@heyhuynhgiabuu/pi-pretty 0.5.1 → 0.5.3

package/README.md

@@ -133,9 +133,30 @@ Use them when:
 
 ## Configuration
 
+### Config file: `~/.pi/agent/pi-pretty.json`
+
+Place a JSON file alongside Pi's `settings.json` to customize tool output backgrounds:
+
+```json
+{
+	"background": {
+		"tool": "#1e1e2e",
+		"error": "#2a1e1e"
+	}
+}
+```
+
+- `background.tool` — background color for normal tool output boxes (default: terminal default).
+- `background.error` — background color for error tool output (defaults to `tool` background).
+
+Config values take priority over theme-provided backgrounds (`toolBg` / `toolErrorBg`). To override the config directory, set `PRETTY_CONFIG_DIR` env var.
+
+### Environment variables
+
 Optional environment variables:
 
 - `PRETTY_THEME` (overrides `~/.pi/agent/settings.json` `theme`; otherwise pi-pretty falls back to that setting before `github-dark`)
+- `PRETTY_CONFIG_DIR` — directory to read `pi-pretty.json` from (default: `~/.pi/agent/`)
 - `PRETTY_MAX_HL_CHARS` (default: `80000`)
 - `PRETTY_MAX_PREVIEW_LINES` (default: `80`)
 - `PRETTY_CACHE_LIMIT` (default: `128`)

package/package.json

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

package/pi-pretty.example.json

@@ -0,0 +1,6 @@
+{
+	"background": {
+		"tool": "#1e1e2e",
+		"error": "#2a1e1e"
+	}
+}

package/release-notes/v0.5.3.md

@@ -0,0 +1,29 @@
+# pi-pretty 0.5.3
+
+## Summary
+This release adds user-configurable tool output backgrounds via a `pi-pretty.json` config file, replacing the previous hardcoded theme-only dependency. It also fixes error tool background misalignment where the padding area showed the wrong background color.
+
+## What changed
+- Add `pi-pretty.json` config file support (loaded from `~/.pi/agent/pi-pretty.json` alongside `settings.json`).
+- Config fields: `background.tool` (normal tool output bg, hex) and `background.error` (error tool output bg, hex, defaults to tool bg).
+- Config values take priority over theme-provided backgrounds (`toolBg` / `toolErrorBg`).
+- Add `PRETTY_CONFIG_DIR` env var to override the config directory.
+- Fix: `fillToolBackground()` now uses a per-line RST matching the line's background color, fixing a visible color seam where padding showed `BG_BASE` instead of `BG_ERROR` on error tool output.
+- Fix: `renderToolError()` restores top spacing and applies two-space left padding to every line of multi-line error output.
+- Fix: `multi_grep` error path now uses `renderToolError()` instead of raw text without background fill.
+- Add `hexToAnsiBg()` converter and `PrettyConfig` exported interface.
+- Add `pi-pretty.example.json` in the project root.
+- Update README with configuration documentation.
+
+## Files
+- `src/index.ts`
+- `pi-pretty.example.json`
+- `README.md`
+
+## Verification
+- `npm run typecheck` ✅
+- `npm run lint` ✅ (no new issues)
+- `npm test` ✅ (74 tests)
+
+## Upgrade notes
+No configuration changes are required. Existing behavior is unchanged — config is optional. To customize backgrounds, create `~/.pi/agent/pi-pretty.json` with the `background` fields.

package/src/index.ts

@@ -41,7 +41,7 @@ import type {
 	ReadToolInput,
 	ToolRenderResultOptions,
 } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { truncateToWidth } from "@earendil-works/pi-tui";
 import { codeToANSI } from "@shikijs/cli";
 import type { BundledLanguage, BundledTheme } from "shiki";
 
@@ -79,7 +79,11 @@ function resolvePrettyTheme(agentDir?: string): BundledTheme {
 
 let THEME: BundledTheme = resolvePrettyTheme();
 
+/** Stored agent directory for config lookups during render (set during init). */
+let _agentDir: string | undefined;
+
 function setPrettyTheme(agentDir?: string): void {
+	_agentDir = agentDir;
 	const resolvedTheme = resolvePrettyTheme(agentDir);
 	if (resolvedTheme === THEME) return;
 	THEME = resolvedTheme;
@@ -96,6 +100,74 @@ const MAX_HL_CHARS = envInt("PRETTY_MAX_HL_CHARS", 80_000);
 const MAX_PREVIEW_LINES = envInt("PRETTY_MAX_PREVIEW_LINES", 80);
 const CACHE_LIMIT = envInt("PRETTY_CACHE_LIMIT", 128);
 
+// ---------------------------------------------------------------------------
+// pi-pretty.json config
+// ---------------------------------------------------------------------------
+
+/** Schema for pi-pretty.json — user config file placed adjacent to settings.json. */
+export interface PrettyConfig {
+	/** Background color overrides for tool output boxes. */
+	background?: {
+		/** Background color for normal tool output (hex, e.g. "#1e1e2e"). */
+		tool?: string;
+		/** Background color for error tool output (hex, e.g. "#2a1e1e"). Defaults to tool bg. */
+		error?: string;
+	};
+}
+
+/** Convert a hex color string (e.g. "#1e1e2e") to an ANSI 24-bit background escape. */
+function hexToAnsiBg(hex: string): string | null {
+	const m = hex.match(/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
+	if (!m) return null;
+	const r = Number.parseInt(m[1], 16);
+	const g = Number.parseInt(m[2], 16);
+	const b = Number.parseInt(m[3], 16);
+	return `\x1b[48;2;${r};${g};${b}m`;
+}
+
+/** Read pi-pretty.json from the agent directory. Returns empty object on any error. */
+function readPrettyConfig(agentDir?: string): PrettyConfig {
+	const resolvedDir = agentDir ?? getDefaultAgentDir();
+	if (!resolvedDir) return {};
+
+	try {
+		const raw = readFileSync(join(resolvedDir, "pi-pretty.json"), "utf8");
+		const parsed = JSON.parse(raw) as PrettyConfig;
+
+		// Validate: background fields must be valid hex strings if present
+		if (parsed.background) {
+			if (parsed.background.tool && !hexToAnsiBg(parsed.background.tool)) {
+				parsed.background.tool = undefined;
+			}
+			if (parsed.background.error && !hexToAnsiBg(parsed.background.error)) {
+				parsed.background.error = undefined;
+			}
+			// Drop empty background block
+			if (!parsed.background.tool && !parsed.background.error) {
+				parsed.background = undefined;
+			}
+		}
+
+		return parsed;
+	} catch {
+		return {};
+	}
+}
+
+/** Apply backgrounds from pi-pretty.json config. Returns true if config was applied. */
+function applyPrettyConfigBg(agentDir?: string): boolean {
+	const config = readPrettyConfig(agentDir);
+	if (!config.background?.tool) return false;
+
+	const toolBg = hexToAnsiBg(config.background.tool);
+	if (!toolBg) return false;
+
+	BG_BASE = toolBg;
+	BG_ERROR = config.background.error ? (hexToAnsiBg(config.background.error) ?? toolBg) : toolBg;
+	RST = "\x1b[0m";
+	return true;
+}
+
 // ---------------------------------------------------------------------------
 // ANSI
 // ---------------------------------------------------------------------------
@@ -113,8 +185,8 @@ const FG_BLUE = "\x1b[38;2;100;140;220m";
 const FG_MUTED = "\x1b[38;2;139;148;158m";
 
 const BG_DEFAULT = "\x1b[49m";
-let BG_BASE = BG_DEFAULT; // tool box success/base bg — updated from theme's toolSuccessBg
-let BG_ERROR = BG_DEFAULT; // tool box error bg — updated from theme's toolErrorBg
+let BG_BASE = BG_DEFAULT; // tool box success/base bg — updated from theme's toolSuccessBg or pi-pretty.json
+let BG_ERROR = BG_DEFAULT; // tool box error bg — updated from theme's toolErrorBg or pi-pretty.json
 
 type BgTheme = { getBgAnsi?: (key: string) => string };
 type FgTheme = { fg: (key: string, text: string) => string };
@@ -135,17 +207,46 @@ function getThemeBgAnsi(theme: BgTheme, key: string): string | null {
 }
 
 /** Read themed tool backgrounds and update BG_BASE / BG_ERROR + RST.
- *  Recompute on each render so runtime theme changes are respected. */
+ *  Recompute on each render so runtime theme changes are respected.
+ *  Priority: pi-pretty.json config > theme > terminal default. */
 function resolveBaseBackground(theme: BgTheme | null | undefined): void {
+	// Config takes highest priority: PRETTY_CONFIG_DIR env > agent dir
+	const configDir = process.env.PRETTY_CONFIG_DIR ?? _agentDir ?? getDefaultAgentDir();
+
+	if (applyPrettyConfigBg(configDir)) return;
+
+	// Fall back to theme
 	if (!theme?.getBgAnsi) return;
 
-	BG_BASE = getThemeBgAnsi(theme, "toolBg") ?? getThemeBgAnsi(theme, "background") ?? BG_DEFAULT;
+	BG_BASE = getThemeBgAnsi(theme, "toolSuccessBg") ?? getThemeBgAnsi(theme, "toolBg") ?? getThemeBgAnsi(theme, "background") ?? BG_DEFAULT;
 	BG_ERROR = getThemeBgAnsi(theme, "toolErrorBg") ?? BG_BASE;
-	RST = `\x1b[0m${BG_BASE}`;
+	RST = "\x1b[0m";
+}
+
+function compactErrorLines(error: string): string[] {
+	const compactedLines: string[] = [];
+	let previousBlank = false;
+	for (const line of normalizeLineEndings(error).trim().split("\n")) {
+		const isBlank = line.trim() === "";
+		if (isBlank && previousBlank) continue;
+		compactedLines.push(line);
+		previousBlank = isBlank;
+	}
+	return compactedLines;
+}
+
+function stripBashExitStatusLine(text: string): string {
+	return normalizeLineEndings(text)
+		.split("\n")
+		.filter((line) => !/^Command exited with code \d+$/i.test(line.trim()))
+		.join("\n");
 }
 
 function renderToolError(error: string, theme: FgTheme): string {
-	return fillToolBackground(`\n${theme.fg("error", error)}`, BG_ERROR);
+	const body = compactErrorLines(error)
+		.map((line) => `  ${line ? theme.fg("error", line) : ""}`)
+		.join("\n");
+	return fillToolBackground(body, BG_ERROR);
 }
 
 const ESC_RE = "\u001b";
@@ -178,30 +279,52 @@ function normalizeLineEndings(text: string): string {
 	return text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
 }
 
-function preserveToolBackground(ansi: string, bg: string): string {
-	return ansi.replace(ANSI_CAPTURE_RE, (seq, params: string) => {
-		const codes = params.split(";");
-		return params === "0" || codes.includes("49") ? `${seq}${bg}` : seq;
+const RESET_WITHOUT_BG = "\x1b[22;23;24;25;27;28;29;39m";
+
+function preserveBoxBackground(ansi: string): string {
+	return ansi.replace(ANSI_CAPTURE_RE, (_seq, params: string) => {
+		if (!params || params === "0") return RESET_WITHOUT_BG;
+
+		const parts = params.split(";").filter(Boolean);
+		const kept: string[] = [];
+		for (let i = 0; i < parts.length; i++) {
+			const code = Number(parts[i]);
+			if (code === 49 || (code >= 40 && code <= 47) || (code >= 100 && code <= 107)) continue;
+			if (code === 48) {
+				if (parts[i + 1] === "5") i += 2;
+				else if (parts[i + 1] === "2") i += 4;
+				continue;
+			}
+			kept.push(parts[i]);
+		}
+		return kept.length ? `\x1b[${kept.join(";")}m` : "";
 	});
 }
 
-function fillToolBackground(text: string, bg = BG_BASE): string {
-	const width = termW();
+function fillToolBackground(text: string, _bg = BG_BASE, width?: number): string {
 	return text
 		.split("\n")
 		.map((line) => {
-			const normalized = preserveToolBackground(line, bg);
-			const fitted = preserveToolBackground(truncateToWidth(normalized, width, ""), bg);
-			const padding = Math.max(0, width - visibleWidth(fitted));
-			return `${bg}${fitted}${" ".repeat(padding)}${RST}`;
+			// The TUI Box owns full-width success/error backgrounds. Remove
+			// background-affecting ANSI from text so inline resets don't punch
+			// holes in the Box background after status labels like "✗ exit 1".
+			const fitted = width ? truncateToWidth(line, width, "") : line;
+			return preserveBoxBackground(fitted);
 		})
 		.join("\n");
 }
 
 function termW(): number {
-	const stderrWithColumns = process.stderr as NodeJS.WriteStream & { columns?: number };
+	// When process.stdout.columns is available (real terminal or compositor override),
+	// use it directly — the TUI/compositor already provides the exact content width.
+	// The -4 safety margin only applies to fallback values (stderr.columns, env.COLUMNS, default).
+	if (process.stdout.columns) {
+		return Math.max(1, Math.min(process.stdout.columns, 210));
+	}
 	const raw =
-		process.stdout.columns || stderrWithColumns.columns || Number.parseInt(process.env.COLUMNS ?? "", 10) || 200;
+		(process.stderr as NodeJS.WriteStream & { columns?: number }).columns ||
+		Number.parseInt(process.env.COLUMNS ?? "", 10) ||
+		200;
 	return Math.max(1, Math.min(raw - 4, 210));
 }
 
@@ -605,6 +728,7 @@ async function renderFileContent(
 	filePath: string,
 	offset = 1,
 	maxLines = MAX_PREVIEW_LINES,
+	width?: number,
 ): Promise<string> {
 	const normalizedContent = normalizeLineEndings(content);
 	const lines = normalizedContent.split("\n");
@@ -613,7 +737,7 @@ async function renderFileContent(
 	const lg = lang(filePath);
 	const hl = await hlBlock(show.join("\n"), lg);
 
-	const tw = termW();
+	const tw = width ?? termW();
 	const startLine = offset;
 	const endLine = startLine + show.length - 1;
 	const nw = Math.max(3, String(endLine).length);
@@ -637,6 +761,13 @@ async function renderFileContent(
 	return out.join("\n");
 }
 
+function inferBashExitCode(text: string, fallback: number | null): number | null {
+	const exitMatch = text.match(/(?:exit code|exited with(?: code)?|exit status)[:\s]*(\d+)/i);
+	if (exitMatch) return Number(exitMatch[1]);
+	if (text.includes("command not found") || text.includes("No such file")) return 1;
+	return fallback;
+}
+
 /** Render bash output with colored exit code and stderr highlighting. */
 function renderBashOutput(text: string, exitCode: number | null): { summary: string; body: string } {
 	const isOk = exitCode === 0;
@@ -780,6 +911,77 @@ async function renderGrepResults(text: string, pattern: string): Promise<string>
 	return out.join("\n");
 }
 
+// ---------------------------------------------------------------------------
+// Tool metrics — elapsed time + output size
+// pi-droid-styling-inspired: wrap execute to record performance, display in footer.
+// ---------------------------------------------------------------------------
+
+const ELAPSED_KEY = "__prettyElapsedMs";
+const CHARS_KEY = "__prettyOutputChars";
+
+/** Format milliseconds for display. */
+function formatElapsedMs(ms: number | undefined): string {
+	if (typeof ms !== "number" || !Number.isFinite(ms)) return "";
+	if (ms < 1000) return `${Math.round(ms)}ms`;
+	const s = ms / 1000;
+	return s < 10 ? `${s.toFixed(1)}s` : `${Math.round(s)}s`;
+}
+
+/** Format character count for display. */
+function formatCharCount(chars: number | undefined): string {
+	if (typeof chars !== "number" || !Number.isFinite(chars) || chars <= 0) return "";
+	if (chars < 1000) return `${chars} chars`;
+	if (chars < 10_000) return `${(chars / 1000).toFixed(1)}k chars`;
+	return `${Math.round(chars / 1000)}k chars`;
+}
+
+/** Compute text output length from a tool result. */
+function getOutputCharCount(result: ToolResultLike): number {
+	const content = result.content;
+	if (!Array.isArray(content)) return 0;
+	let length = 0;
+	for (const block of content) {
+		if (block.type !== "text") continue;
+		length += String(block.text ?? "").replace(/\r/g, "").length;
+	}
+	return length;
+}
+
+/**
+ * Wrap a tool's execute function to measure elapsed time and output size.
+ * Annotates result.details with __prettyElapsedMs and __prettyOutputChars.
+ */
+function wrapExecuteWithMetrics<TParams, TDetails>(
+	execute: (...args: any[]) => Promise<ToolResultLike<TDetails>>,
+): ToolExecutor<TParams, TDetails> {
+	return async (
+		tid: string,
+		params: TParams,
+		sig?: AbortSignal,
+		onUpdate?: AgentToolUpdateCallback<TDetails | undefined>,
+		ctx?: ExtensionContext,
+	) => {
+		const start = performance.now();
+		const result = await execute(tid, params, sig, onUpdate, ctx);
+		const elapsedMs = performance.now() - start;
+		const details = (result.details ?? {}) as Record<string, unknown>;
+		details[ELAPSED_KEY] = elapsedMs;
+		details[CHARS_KEY] = getOutputCharCount(result);
+		(result as { details: Record<string, unknown> }).details = details;
+		return result;
+	};
+}
+
+/** Render a tool metrics line: "3.2s · 14.2k chars" */
+function renderToolMetrics(result: ToolResultLike): string {
+	const details = result.details as Record<string, unknown> | undefined;
+	if (!details) return "";
+	const elapsed = formatElapsedMs(details[ELAPSED_KEY] as number | undefined);
+	const chars = formatCharCount(details[CHARS_KEY] as number | undefined);
+	if (!elapsed && !chars) return "";
+	return `${FG_DIM}· ${[elapsed, chars].filter(Boolean).join(" · ")}${RST}`;
+}
+
 // ---------------------------------------------------------------------------
 // FFF integration (optional) — Fast File Finder with frecency & SIMD search
 //
@@ -791,8 +993,17 @@ type ToolTextContent = TextContent;
 type ToolImageContent = ImageContent;
 type ToolContent = TextContent | ImageContent;
 type ToolResultLike<TDetails = unknown> = AgentToolResult<TDetails | undefined>;
-type TextComponentLike = { setText(value: string): void; getText?: () => string };
+type TextComponentLike = { setText(value: string): void; getText?: () => string; render?: (width: number) => string[] };
 type TextComponentCtor = new (text?: string, x?: number, y?: number) => TextComponentLike;
+type WidthAwareTextComponent = TextComponentLike & {
+	__piPrettyWidthAware?: boolean;
+	__piPrettyRender?: (width: number) => string[];
+	__piPrettyRenderedKey?: string;
+	__piPrettyTask?: {
+		key: (width: number) => string;
+		render: (width: number) => string;
+	};
+};
 type ThemeLike = BgTheme & FgTheme & { bold: (text: string) => string };
 type RenderContextLike<TState extends Record<string, string | undefined> = Record<string, string | undefined>> = {
 	lastComponent?: TextComponentLike;
@@ -855,6 +1066,7 @@ type MultiGrepParams = {
 	context?: number;
 	limit?: number;
 };
+type BashRenderState = Record<string, string | undefined>;
 type GrepRenderState = { _gk?: string; _gt?: string };
 type MultiGrepRenderState = { _mgk?: string; _mgt?: string };
 type FindResultDetails = { _type: "findResult"; text: string; pattern: string; matchCount: number };
@@ -1046,6 +1258,76 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 		return !disabledTools.has(name.toLowerCase());
 	}
 
+	function getWidthAwareText(lastComponent: TextComponentLike | undefined): WidthAwareTextComponent {
+		const text = (lastComponent ?? new TextComponent("", 0, 0)) as WidthAwareTextComponent;
+		if (text.__piPrettyWidthAware) return text;
+		const baseRender = typeof text.render === "function" ? text.render.bind(text) : null;
+		if (!baseRender) return text;
+		text.__piPrettyWidthAware = true;
+		text.__piPrettyRender = baseRender;
+		text.render = (width: number) => {
+			const task = text.__piPrettyTask;
+			if (task) {
+				const renderWidth = Math.max(1, Math.floor(width || termW()));
+				const key = task.key(renderWidth);
+				if (text.__piPrettyRenderedKey !== key) {
+					text.__piPrettyRenderedKey = key;
+					text.setText(task.render(renderWidth));
+				}
+			}
+			return text.__piPrettyRender?.(width) ?? [];
+		};
+		return text;
+	}
+
+	// ===================================================================
+	// Generic renderResult for custom tools (no custom renderer)
+	// ===================================================================
+
+	const origRegisterTool = pi.registerTool.bind(pi);
+	pi.registerTool = (tool: any) => {
+		if (!tool.renderResult && !tool.renderCall) {
+			const toolName = tool.label ?? tool.name ?? "tool";
+			tool.renderResult = (result: any, _opt: unknown, theme: ThemeLike, ctx: RenderContextLike) => {
+				resolveBaseBackground(theme);
+				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+
+				if (ctx.isError) {
+					text.setText(renderToolError(getTextContent(result) || "Error", theme));
+					return text;
+				}
+
+				const content = getTextContent(result);
+				if (content) {
+					const renderWidth = termW();
+					const lines = content.split("\n");
+					const maxShow = ctx.expanded ? lines.length : Math.min(lines.length, MAX_PREVIEW_LINES);
+					const preview = lines.slice(0, maxShow).join("\n");
+					const more = lines.length > maxShow ? `\n${FG_DIM}... ${lines.length - maxShow} more lines${RST}` : "";
+					const metrics = renderToolMetrics(result);
+					text.setText(
+						fillToolBackground(`  ${preview}${more}${metrics ? `\n  ${metrics}` : ""}`, undefined, renderWidth),
+					);
+				} else {
+					text.setText(fillToolBackground(`  ${theme.fg("dim", "(no text output)")}`));
+				}
+
+				return text;
+			};
+
+			tool.renderCall = (args: any, theme: ThemeLike, ctx: RenderContextLike) => {
+				resolveBaseBackground(theme);
+				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+				const bg = ctx.isError ? BG_ERROR : undefined;
+				text.setText(
+					fillToolBackground(`${theme.fg("toolTitle", theme.bold(toolName))}`, bg),
+				);
+				return text;
+			};
+		}
+		origRegisterTool(tool);
+	};
+
 	// ===================================================================
 	// FFF initialization (optional — graceful fallback to SDK)
 	// ===================================================================
@@ -1127,13 +1409,13 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 		...origRead,
 		name: "read",
 
-		async execute(
+		execute: wrapExecuteWithMetrics(async (
 			tid: string,
 			params: ReadParams,
 			sig: AbortSignal | undefined,
 			upd: AgentToolUpdateCallback<unknown> | undefined,
 			ctx: ExtensionContext,
-		) {
+		) => {
 			const result = (await origRead.execute(tid, params, sig, upd, ctx)) as ToolResultLike;
 
 			const fp = params.path ?? "";
@@ -1164,7 +1446,7 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 			}
 
 			return result;
-		},
+		}),
 
 		renderCall(args: ReadParams, theme: ThemeLike, ctx: RenderContextLike) {
 			resolveBaseBackground(theme);
@@ -1172,12 +1454,14 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 			const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 			const offset = args.offset ? ` ${theme.fg("muted", `from line ${args.offset}`)}` : "";
 			const limit = args.limit ? ` ${theme.fg("muted", `(${args.limit} lines)`)}` : "";
-			text.setText(
-				fillToolBackground(
-					`${theme.fg("toolTitle", theme.bold("read"))} ${theme.fg("accent", sp(fp))}${offset}${limit}`,
-				),
-			);
-			return text;
+		const bg = ctx.isError ? BG_ERROR : undefined;
+		text.setText(
+			fillToolBackground(
+				`${theme.fg("toolTitle", theme.bold("read"))} ${theme.fg("accent", sp(fp))}${offset}${limit}`,
+				bg,
+			),
+		);
+		return text;
 		},
 
 		renderResult(result: ToolResultLike, _opt: unknown, theme: ThemeLike, ctx: RenderContextLike) {
@@ -1204,22 +1488,24 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 			}
 
 			if (d?._type === "readFile" && d.content) {
-				const key = `read:${d.filePath}:${d.offset}:${d.lineCount}:${termW()}`;
+				const renderWidth = termW();
+				const key = `read:${d.filePath}:${d.offset}:${d.lineCount}:${renderWidth}`;
 				if (ctx.state._rk !== key) {
 					ctx.state._rk = key;
-					const info = `${FG_DIM}${d.lineCount} lines${RST}`;
-					ctx.state._rt = fillToolBackground(`  ${info}`);
+					const metrics = renderToolMetrics(result);
+					const info = `${FG_DIM}${d.lineCount} lines${RST}${metrics}`;
+					ctx.state._rt = fillToolBackground(`  ${info}`, undefined, renderWidth);
 
 					const maxShow = ctx.expanded ? d.lineCount : MAX_PREVIEW_LINES;
-					renderFileContent(d.content, d.filePath, d.offset, maxShow)
+					renderFileContent(d.content, d.filePath, d.offset, maxShow, renderWidth)
 						.then((rendered: string) => {
 							if (ctx.state._rk !== key) return;
-							ctx.state._rt = fillToolBackground(`  ${info}\n${rendered}`);
+							ctx.state._rt = fillToolBackground(`  ${info}\n${rendered}`, undefined, renderWidth);
 							ctx.invalidate();
 						})
 						.catch(() => {});
 				}
-				text.setText(ctx.state._rt ?? fillToolBackground(`  ${FG_DIM}${d.lineCount} lines${RST}`));
+				text.setText(ctx.state._rt ?? fillToolBackground(`  ${FG_DIM}${d.lineCount} lines${RST}${renderToolMetrics(result)}`, undefined, renderWidth));
 				return text;
 			}
 
@@ -1243,24 +1529,17 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 			...origBash,
 			name: "bash",
 
-			async execute(
+			execute: wrapExecuteWithMetrics(async (
 				tid: string,
 				params: BashParams,
 				sig: AbortSignal | undefined,
 				upd: AgentToolUpdateCallback<unknown> | undefined,
 				ctx: ExtensionContext,
-			) {
+			) => {
 				const result = (await origBash.execute(tid, params, sig, upd, ctx)) as ToolResultLike;
 				const textContent = getTextContent(result);
 
-				let exitCode: number | null = 0;
-				if (textContent) {
-					const exitMatch = textContent.match(/(?:exit code|exited with|exit status)[:\s]*(\d+)/i);
-					if (exitMatch) exitCode = Number(exitMatch[1]);
-					if (textContent.includes("command not found") || textContent.includes("No such file")) {
-						exitCode = 1;
-					}
-				}
+				const exitCode = textContent ? inferBashExitCode(textContent, 0) : 0;
 
 				setResultDetails(result, {
 					_type: "bashResult",
@@ -1269,56 +1548,81 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 					command: params.command ?? "",
 				});
 
+				// Propagate error state to result so the TUI Box picks up
+				// toolErrorBg instead of toolSuccessBg for the background.
+				// Cast to any since AgentToolResult doesn't expose isError but
+				// the TUI runtime checks for it when selecting the background color.
+				if (exitCode !== null && exitCode !== 0) {
+					(result as any).isError = true;
+				}
+
 				return result;
-			},
+			}),
 
-			renderCall(args: BashParams, theme: ThemeLike, ctx: RenderContextLike) {
+			renderCall(args: BashParams, theme: ThemeLike, ctx: RenderContextLike<BashRenderState>) {
 				resolveBaseBackground(theme);
 				const cmd = args.command ?? "";
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 				const timeout = args.timeout ? ` ${theme.fg("muted", `(${args.timeout}s timeout)`)}` : "";
 				const displayCmd = ctx.expanded || cmd.length <= 80 ? cmd : `${cmd.slice(0, 77)}…`;
-				text.setText(
-					fillToolBackground(
-						`${theme.fg("toolTitle", theme.bold("bash"))} ${theme.fg("accent", displayCmd)}${timeout}`,
-					),
-				);
+				const bg = ctx.isError ? BG_ERROR : undefined;
+				const title = `${theme.fg("toolTitle", theme.bold("bash"))} ${theme.fg("accent", displayCmd)}${timeout}`;
+				text.setText(fillToolBackground(title, bg, termW()));
 				return text;
 			},
 
-			renderResult(result: ToolResultLike, _opt: unknown, theme: ThemeLike, ctx: RenderContextLike) {
+			renderResult(result: ToolResultLike, _opt: unknown, theme: ThemeLike, ctx: RenderContextLike<BashRenderState>) {
 				resolveBaseBackground(theme);
-				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+				const text = getWidthAwareText(ctx.lastComponent);
 
-				if (ctx.isError) {
-					text.setText(renderToolError(getTextContent(result) || "Error", theme));
-					return text;
-				}
-
-				const d = result.details as RenderDetails | undefined;
+				const details = result.details as RenderDetails | undefined;
+				const textContent = getTextContent(result);
+				const d: Extract<RenderDetails, { _type: "bashResult" }> | undefined =
+					details?._type === "bashResult"
+						? details
+						: textContent || ctx.isError
+							? {
+									_type: "bashResult",
+									text: textContent || "Error",
+									exitCode: inferBashExitCode(textContent, ctx.isError ? 1 : 0),
+									command: "",
+								}
+							: undefined;
 				if (d?._type === "bashResult") {
-					const { summary } = renderBashOutput(d.text, d.exitCode);
-					const lines = d.text.split("\n");
+					const isBashError = ctx.isError || (d.exitCode !== null && d.exitCode !== 0);
+					const bg = isBashError ? BG_ERROR : undefined;
+					const cleanedText = stripBashExitStatusLine(d.text);
+					const outputText = isBashError ? compactErrorLines(cleanedText).join("\n") : cleanedText;
+					const { summary } = renderBashOutput(outputText, d.exitCode);
+					const lines = outputText.split("\n");
 					const lineCount = lines.length;
-					const lineInfo = lineCount > 1 ? `  ${FG_DIM}(${lineCount} lines)${RST}` : "";
+					const lineInfo = lineCount > 1 ? `  ${FG_DIM}(${lineCount} lines)${RST} ${renderToolMetrics(result)}` : ` ${renderToolMetrics(result)}`;
 					const header = `  ${summary}${lineInfo}`;
-
-					if (d.text.trim()) {
+					const renderAtWidth = (width: number) => {
+						if (!outputText.trim()) return fillToolBackground(header, bg, width);
 						const maxShow = ctx.expanded ? lineCount : MAX_PREVIEW_LINES;
 						const show = lines.slice(0, maxShow);
-						const tw = termW();
-						const out: string[] = [header, rule(tw)];
+						const out: string[] = [header, rule(width)];
 						for (const line of show) {
 							out.push(`  ${line}`);
 						}
-						out.push(rule(tw));
+						out.push(rule(width));
 						if (lineCount > maxShow) {
 							out.push(`${FG_DIM}  … ${lineCount - maxShow} more lines${RST}`);
 						}
-						text.setText(fillToolBackground(out.join("\n")));
-					} else {
-						text.setText(fillToolBackground(header));
-					}
+						return fillToolBackground(out.join("\n"), bg, width);
+					};
+					text.__piPrettyTask = {
+						key: (width: number) => `bash:${ctx.expanded ? "1" : "0"}:${width}:${d.exitCode ?? "killed"}:${outputText.length}:${renderToolMetrics(result)}`,
+						render: renderAtWidth,
+					};
+					text.setText(renderAtWidth(termW()));
+					return text;
+				}
+
+				text.__piPrettyTask = undefined;
+				if (ctx.isError) {
+					text.setText(renderToolError(getTextContent(result) || "Error", theme));
 					return text;
 				}
 
@@ -1341,13 +1645,13 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 			...origLs,
 			name: "ls",
 
-			async execute(
+			execute: wrapExecuteWithMetrics(async (
 				tid: string,
 				params: LsParams,
 				sig: AbortSignal | undefined,
 				upd: AgentToolUpdateCallback<unknown> | undefined,
 				ctx: ExtensionContext,
-			) {
+			) => {
 				const result = (await origLs.execute(tid, params, sig, upd, ctx)) as ToolResultLike;
 				const textContent = getTextContent(result);
 				const fp = params.path ?? cwd;
@@ -1361,13 +1665,14 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				});
 
 				return result;
-			},
+			}),
 
 			renderCall(args: LsParams, theme: ThemeLike, ctx: RenderContextLike) {
 				resolveBaseBackground(theme);
 				const fp = args.path ?? ".";
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
-				text.setText(fillToolBackground(`${theme.fg("toolTitle", theme.bold("ls"))} ${theme.fg("accent", sp(fp))}`));
+				const bg = ctx.isError ? BG_ERROR : undefined;
+				text.setText(fillToolBackground(`${theme.fg("toolTitle", theme.bold("ls"))} ${theme.fg("accent", sp(fp))}`, bg));
 				return text;
 			},
 
@@ -1383,7 +1688,7 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				const d = result.details as RenderDetails | undefined;
 				if (d?._type === "lsResult" && d.text) {
 					const tree = renderTree(d.text, d.path);
-					const info = `${FG_DIM}${d.entryCount} entries${RST}`;
+					const info = `${FG_DIM}${d.entryCount} entries${RST}${renderToolMetrics(result)}`;
 					text.setText(fillToolBackground(`  ${info}\n${tree}`));
 					return text;
 				}
@@ -1407,13 +1712,13 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 			...origFind,
 			name: "find",
 
-			async execute(
+			execute: wrapExecuteWithMetrics(async (
 				tid: string,
 				params: FindParams,
 				sig: AbortSignal | undefined,
 				upd: unknown,
 				ctx: ExtensionContext,
-			) {
+			) => {
 				// Try FFF first (frecency-ranked, SIMD-accelerated)
 				if (_fffFinder && !_fffFinder.isDestroyed) {
 					try {
@@ -1456,15 +1761,16 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				});
 
 				return result;
-			},
+			}),
 
 			renderCall(args: FindParams, theme: ThemeLike, ctx: RenderContextLike) {
 				resolveBaseBackground(theme);
 				const pattern = args.pattern ?? "";
 				const path = args.path ? ` ${theme.fg("muted", `in ${sp(args.path)}`)}` : "";
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+				const bg = ctx.isError ? BG_ERROR : undefined;
 				text.setText(
-					fillToolBackground(`${theme.fg("toolTitle", theme.bold("find"))} ${theme.fg("accent", pattern)}${path}`),
+					fillToolBackground(`${theme.fg("toolTitle", theme.bold("find"))} ${theme.fg("accent", pattern)}${path}`, bg),
 				);
 				return text;
 			},
@@ -1486,7 +1792,7 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				const d = result.details;
 				if (d?._type === "findResult" && d.text) {
 					const rendered = renderFindResults(d.text);
-					const info = `${FG_DIM}${d.matchCount} files${RST}`;
+					const info = `${FG_DIM}${d.matchCount} files${RST}${renderToolMetrics(result)}`;
 					text.setText(fillToolBackground(`  ${info}\n${rendered}`));
 					return text;
 				}
@@ -1510,13 +1816,13 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 			...origGrep,
 			name: "grep",
 
-			async execute(
+			execute: wrapExecuteWithMetrics(async (
 				tid: string,
 				params: GrepParams,
 				sig: AbortSignal | undefined,
 				upd: unknown,
 				ctx: ExtensionContext,
-			) {
+			) => {
 				// Try FFF first (SIMD-accelerated, frecency-ranked).
 				// FFF 0.5.2 can abort the process when path/glob constraints meet
 				// Unicode filenames, so constrained searches use the SDK fallback.
@@ -1576,7 +1882,7 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				});
 
 				return result;
-			},
+			}),
 
 			renderCall(args: GrepParams, theme: ThemeLike, ctx: RenderContextLike) {
 				resolveBaseBackground(theme);
@@ -1584,9 +1890,11 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				const path = args.path ? ` ${theme.fg("muted", `in ${sp(args.path)}`)}` : "";
 				const glob = args.glob ? ` ${theme.fg("muted", `(${args.glob})`)}` : "";
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+				const bg = ctx.isError ? BG_ERROR : undefined;
 				text.setText(
 					fillToolBackground(
 						`${theme.fg("toolTitle", theme.bold("grep"))} ${theme.fg("accent", pattern)}${path}${glob}`,
+						bg,
 					),
 				);
 				return text;
@@ -1608,21 +1916,23 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 
 				const d = result.details;
 				if (d?._type === "grepResult" && d.text) {
-					const key = `grep:${d.pattern}:${d.matchCount}:${termW()}`;
+					const renderWidth = termW();
+					const key = `grep:${d.pattern}:${d.matchCount}:${renderWidth}`;
 					if (ctx.state._gk !== key) {
 						ctx.state._gk = key;
-						const info = `${FG_DIM}${d.matchCount} matches${RST}`;
-						ctx.state._gt = fillToolBackground(`  ${info}`);
+						const metrics = renderToolMetrics(result);
+						const info = `${FG_DIM}${d.matchCount} matches${RST}${metrics}`;
+						ctx.state._gt = fillToolBackground(`  ${info}`, undefined, renderWidth);
 
 						renderGrepResults(d.text, d.pattern)
 							.then((rendered: string) => {
 								if (ctx.state._gk !== key) return;
-								ctx.state._gt = fillToolBackground(`  ${info}\n${rendered}`);
+								ctx.state._gt = fillToolBackground(`  ${info}\n${rendered}`, undefined, renderWidth);
 								ctx.invalidate();
 							})
 							.catch(() => {});
 					}
-					text.setText(ctx.state._gt ?? fillToolBackground(`  ${FG_DIM}${d.matchCount} matches${RST}`));
+					text.setText(ctx.state._gt ?? fillToolBackground(`  ${FG_DIM}${d.matchCount} matches${RST}${renderToolMetrics(result)}`, undefined, renderWidth));
 					return text;
 				}
 
@@ -1689,13 +1999,13 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				required: ["patterns"],
 			},
 
-			async execute(
+			execute: wrapExecuteWithMetrics(async (
 				tid: string,
 				params: MultiGrepParams,
 				sig: AbortSignal | undefined,
 				upd: unknown,
 				ctx: ExtensionContext,
-			) {
+			) => {
 				if (sig?.aborted) return makeTextResult("Aborted", {});
 
 				if (!params.patterns || params.patterns.length === 0) {
@@ -1813,7 +2123,7 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 					const message = getErrorMessage(error);
 					return makeTextResult(`multi_grep error: ${message}`, { error: message });
 				}
-			},
+			}),
 
 			renderCall(args: MultiGrepParams, theme: ThemeLike, ctx: RenderContextLike) {
 				resolveBaseBackground(theme);
@@ -1821,13 +2131,14 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				const path = args.path ? ` ${theme.fg("muted", `in ${sp(args.path)}`)}` : "";
 				const constraints = args.constraints;
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
+				const bg = ctx.isError ? BG_ERROR : undefined;
 				let content =
 					theme.fg("toolTitle", theme.bold("multi_grep")) +
 					" " +
 					theme.fg("accent", patterns.map((p) => `"${p}"`).join(", "));
 				content += path;
 				if (constraints) content += theme.fg("muted", ` (${constraints})`);
-				text.setText(fillToolBackground(content));
+				text.setText(fillToolBackground(content, bg));
 				return text;
 			},
 
@@ -1841,7 +2152,7 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 
 				if (ctx.isError) {
-					text.setText(`\n${theme.fg("error", getTextContent(result) || "Error")}`);
+					text.setText(renderToolError(getTextContent(result) || "Error", theme));
 					return text;
 				}
 
@@ -1850,7 +2161,8 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 					const key = `mgrep:${d.pattern}:${d.matchCount}:${termW()}`;
 					if (ctx.state._mgk !== key) {
 						ctx.state._mgk = key;
-						const info = `${FG_DIM}${d.matchCount} matches${RST}`;
+						const metrics = renderToolMetrics(result);
+						const info = `${FG_DIM}${d.matchCount} matches${RST}${metrics}`;
 						ctx.state._mgt = `  ${info}`;
 
 						renderGrepResults(d.text, d.pattern)
@@ -1861,7 +2173,7 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 							})
 							.catch(() => {});
 					}
-					text.setText(ctx.state._mgt ?? `  ${FG_DIM}${d.matchCount} matches${RST}`);
+					text.setText(ctx.state._mgt ?? `  ${FG_DIM}${d.matchCount} matches${RST}${renderToolMetrics(result)}`);
 					return text;
 				}
 

package/test/bash-rendering.test.ts

@@ -12,6 +12,9 @@ class MockText {
 	getText() {
 		return this.text;
 	}
+	render(_width: number) {
+		return this.text.split("\n");
+	}
 }
 
 const mockTheme = {
@@ -33,6 +36,10 @@ function mockToolFactory(exec: any) {
 	});
 }
 
+function stripAnsi(text: string): string {
+	return text.replace(/\x1b\[[0-9;]*m/g, "");
+}
+
 function withStdoutColumns<T>(columns: number, fn: () => T): T {
 	const descriptor = Object.getOwnPropertyDescriptor(process.stdout, "columns");
 	Object.defineProperty(process.stdout, "columns", { configurable: true, value: columns });
@@ -127,7 +134,7 @@ describe("bash renderCall expansion", () => {
 		expect(expanded.getText()).toContain("5s timeout");
 	});
 
-	it("truncates expanded ANSI tool headers to the terminal width before padding backgrounds", () => {
+	it("truncates ANSI tool headers that exceed the terminal width", () => {
 		withStdoutColumns(84, () => {
 			const bashTool = loadBashTool();
 			const command = `printf '${"界".repeat(120)}'`;
@@ -141,7 +148,7 @@ describe("bash renderCall expansion", () => {
 			});
 
 			for (const line of rendered.getText().split("\n")) {
-				expect(visibleWidth(line)).toBeLessThanOrEqual(80);
+				expect(visibleWidth(line)).toBeLessThanOrEqual(84);
 			}
 		});
 	});
@@ -160,7 +167,103 @@ describe("bash renderCall expansion", () => {
 			});
 
 			for (const line of rendered.getText().split("\n")) {
-				expect(visibleWidth(line)).toBeLessThanOrEqual(20);
+				expect(visibleWidth(line)).toBeLessThanOrEqual(24);
+			}
+		});
+	});
+
+	it("does not add extra internal padding to the bash title in error state", () => {
+		withStdoutColumns(48, () => {
+			const bashTool = loadBashTool();
+			const rendered = bashTool.renderCall({ command: "false" }, mockTheme, {
+				lastComponent: new MockText(),
+				isError: true,
+				state: {},
+				expanded: false,
+				invalidate: () => {},
+			});
+
+			const lines = stripAnsi(rendered.getText()).split("\n");
+			expect(lines[0]).toMatch(/^bash false/);
+		});
+	});
+
+	it("pads every line of multi-line tool errors", () => {
+		withStdoutColumns(48, () => {
+			const bashTool = loadBashTool();
+			const rendered = bashTool.renderResult(
+				{ content: [{ type: "text", text: "\nfirst error\n\n\nsecond error\n" }] },
+				{},
+				ansiMockTheme,
+				{
+					lastComponent: new MockText(),
+					isError: true,
+					state: {},
+					expanded: false,
+					invalidate: () => {},
+				},
+			);
+
+			const lines = stripAnsi(rendered.getText()).split("\n");
+			expect(lines[0]).toContain("✗ exit 1");
+			expect(lines[1]).toMatch(/^─+$/);
+			expect(lines[2]).toMatch(/^  first error/);
+			expect(lines[3]).toMatch(/^  /);
+			expect(lines[3].trim()).toBe("");
+			expect(lines[4]).toMatch(/^  second error/);
+			expect(lines[5]).toMatch(/^─+$/);
+		});
+	});
+
+	it("does not emit internal ANSI background padding or resets for bash results", () => {
+		withStdoutColumns(64, () => {
+			const bashTool = loadBashTool();
+			const rendered = bashTool.renderResult(
+				{
+					content: [{ type: "text", text: "output" }],
+					details: { _type: "bashResult", text: "output", exitCode: 1, command: "test" },
+				},
+				{},
+				ansiMockTheme,
+				{
+					lastComponent: new MockText(),
+					isError: true,
+					state: { _tw: "64" },
+					expanded: false,
+					invalidate: () => {},
+				},
+			);
+
+			expect(rendered.getText()).not.toMatch(/\x1b\[48;/);
+			expect(rendered.getText()).not.toContain("\x1b[0m");
+			expect(rendered.getText()).not.toContain("\x1b[49m");
+			for (const line of rendered.getText().split("\n")) {
+				expect(visibleWidth(line)).toBeLessThanOrEqual(64);
+			}
+		});
+	});
+
+	it("renders bash results using the component render width instead of stdout columns", () => {
+		withStdoutColumns(120, () => {
+			const bashTool = loadBashTool();
+			const rendered = bashTool.renderResult(
+				{ content: [{ type: "text", text: "hello world" }], details: { _type: "bashResult", text: "hello world", exitCode: 0, command: "echo hi" } },
+				{},
+				mockTheme,
+				{
+					lastComponent: new MockText(),
+					isError: false,
+					state: {},
+					expanded: false,
+					invalidate: () => {},
+				},
+			);
+
+			rendered.render(80);
+			const lines = stripAnsi(rendered.getText()).split("\n");
+			expect(lines.some((line) => /^─{80}$/.test(line))).toBe(true);
+			for (const line of rendered.getText().split("\n")) {
+				expect(visibleWidth(line)).toBeLessThanOrEqual(80);
 			}
 		});
 	});