@heyhuynhgiabuu/pi-pretty 0.5.2 → 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.2",
+	"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,22 +279,37 @@ 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, width?: number): string {
-	if (width === undefined) 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");
 }
@@ -645,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;
@@ -870,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;
@@ -934,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 };
@@ -1125,6 +1258,28 @@ 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)
 	// ===================================================================
@@ -1163,8 +1318,9 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 			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))}`),
+					fillToolBackground(`${theme.fg("toolTitle", theme.bold(toolName))}`, bg),
 				);
 				return text;
 			};
@@ -1298,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) {
@@ -1381,14 +1539,7 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				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",
@@ -1397,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} ${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;
 				}
 
@@ -1495,7 +1671,8 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				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;
 			},
 
@@ -1591,8 +1768,9 @@ export default function piPrettyExtension(pi: PiPrettyApi, deps?: PiPrettyDeps):
 				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;
 			},
@@ -1712,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;
@@ -1951,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;
 			},
 
@@ -1971,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;
 				}
 

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)}'`;
@@ -164,4 +171,100 @@ describe("bash renderCall expansion", () => {
 			}
 		});
 	});
+
+	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);
+			}
+		});
+	});
 });