@wierdbytes/pi-facelift 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+
+## 0.3.0
+
+- Frame primitives (open-right rounded box for `read` / `bash` / `ls` /
+  `find` / `grep`) extracted to `@wierdbytes/pi-common/tool-frame`.
+  pi-facelift now consumes them as a library so the same chrome can be
+  reused by other extensions (e.g. `@wierdbytes/pi-web`).
+- Status border colours now follow host theme tokens (`success` →
+  `theme.fg("success", …)`, pending → `warning`, error → `error`)
+  instead of pi-facelift's previous fixed RGB palette. Visual contract
+  is unchanged on the default pi theme; on custom themes the frame
+  inherits the user's palette.
+- `formatDuration` (the bash bottom-label timer formatter) moved to
+  `@wierdbytes/pi-common/tool-frame` so other extensions can reuse it.
+  Behaviour unchanged.
+- **Fix**: the `read` tool's frame body silently went empty after the
+  Phase-2 refactor because `renderFileContent` still referenced the
+  deleted `bodyW()` helper, and the highlighter promise's
+  `.catch(() => {})` swallowed the resulting `ReferenceError`. The
+  width is now computed inline as `termW() - 1` and the catch logs to
+  stderr so future regressions in the highlighter pipeline are
+  visible. Same `console.error` treatment applied to the matching
+  `renderGrepResults` catch.

package/README.md

@@ -14,10 +14,19 @@ tool output.
 - **`bash`** — open-right frame with the duration + status pinned to the
   bottom border
 
-  Status color follows pi: **green** on success, **yellow** while still
-  running, **red** on non-zero / timeout / abort. The exit summary is
-  consistent across statuses (`✓ exit 0`, `✗ exit N`, `⚡ timed out`,
-  `⚡ aborted`). Duration is shown as `3.3s` / `1m3s` / `2h5m`.
+  Status colour follows the host theme tokens (`success` while finished,
+  `warning` while running, `error` on non-zero / timeout / abort) so the
+  chrome blends with whatever palette the user is running. The exit
+  summary is consistent across statuses (`✓ exit 0`, `✗ exit N`,
+  `⚡ timed out`, `⚡ aborted`). Duration is shown as `3.3s` / `1m3s` /
+  `2h5m`.
+
+  > Frame primitives (top/bottom borders, rail, multi-line title
+  > sub-tree) live in [`@wierdbytes/pi-common/tool-frame`][cf] and are
+  > shared with `@wierdbytes/pi-web` so every tool that opts into
+  > `renderShell: "self"` looks the same.
+
+  [cf]: ../common/README.md#tool-frame
 - **`ls`** — Nerd Font file icons + tree-oriented rendering.
 - **`find` / `grep`** — grouped / highlighted rendering on top of pi's
   built-in tool implementations (no extra search backend, no extra

package/bash-rendering.test.ts

@@ -166,4 +166,169 @@ describe("bash renderCall expansion", () => {
 			}
 		});
 	});
+
+	it("keeps trailing dashes on the first line for multi-line commands", () => {
+		withStdoutColumns(120, () => {
+			const bashTool = loadBashTool();
+			// User-typed multi-line command (line continuation with `\`)
+			const command = `cd /tmp && \\\n  echo "hello"`;
+
+			const rendered = bashTool.renderCall({ command }, mockTheme, {
+				lastComponent: new MockText(),
+				isError: false,
+				state: {},
+				expanded: true,
+				invalidate: () => {},
+			});
+
+			const lines = rendered.getText().split("\n");
+			expect(lines.length).toBeGreaterThanOrEqual(2);
+
+			// First line: top border with `╭── bash cd /tmp && \` and trailing dashes.
+			expect(lines[0]).toMatch(/^.*╭──.*bash.*cd \/tmp && \\.*─/);
+			expect(lines[0]).toContain("\\");
+			expect(lines[0]).toMatch(/─{2,}/); // trailing dashes survive on first line
+
+			// Continuation line: outer rail + sub-tree connector + content (no trailing dashes).
+			const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, "");
+			const plainCont = stripAnsi(lines[1]);
+			expect(plainCont).toMatch(/^│/);
+			expect(plainCont).toMatch(/[│╰] /); // sub-tree connector before content
+			expect(plainCont).toContain("echo");
+			expect(plainCont).not.toMatch(/─{2,}/);
+		});
+	});
+
+	it("renders multi-line commands as a sub-tree with `│`/`╰` connectors", () => {
+		withStdoutColumns(200, () => {
+			const bashTool = loadBashTool();
+			const command = `cd /tmp && \\\n  echo "line 1" \\\n  echo "line 2"`;
+
+			const rendered = bashTool.renderCall({ command }, mockTheme, {
+				lastComponent: new MockText(),
+				isError: false,
+				state: {},
+				expanded: true,
+				invalidate: () => {},
+			});
+
+			const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, "");
+			const plain = rendered.getText().split("\n").map(stripAnsi);
+
+			expect(plain.length).toBe(3);
+			// Non-last continuation row uses `│`.
+			expect(plain[1]).toMatch(/^│ +│ echo "line 1" \\$/);
+			// Last continuation row uses `╰`.
+			expect(plain[2]).toMatch(/^│ +╰ echo "line 2"$/);
+		});
+	});
+
+	it("aligns sub-tree continuations under the first arg, ignoring heredoc indent", () => {
+		withStdoutColumns(120, () => {
+			const bashTool = loadBashTool();
+			// Continuation has 4 leading spaces — those should be stripped so the
+			// sub-tree connector aligns the content under the first row's first arg.
+			const command = "cd /tmp && \\\n    echo hi";
+
+			const rendered = bashTool.renderCall({ command }, mockTheme, {
+				lastComponent: new MockText(),
+				isError: false,
+				state: {},
+				expanded: true,
+				invalidate: () => {},
+			});
+
+			const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, "");
+			const [firstLine, secondLine] = rendered.getText().split("\n").map(stripAnsi);
+
+			// `╭── bash ` is 9 chars, so `c` of `cd` is at col 10 (0-indexed: 9).
+			const firstArgCol = firstLine.indexOf("cd /tmp");
+			expect(firstArgCol).toBe(9);
+
+			// Continuation: `│` (col 0) + 6 spaces + connector (col 7) + space (col 8) + content (col 9).
+			// Content col must equal the first row's first arg col, regardless of
+			// the user's heredoc indent (4 leading spaces above are stripped).
+			const echoCol = secondLine.indexOf("echo");
+			expect(echoCol).toBe(firstArgCol);
+		});
+	});
+
+	it("colors continuation lines with the same accent as the first arg", () => {
+		withStdoutColumns(120, () => {
+			const bashTool = loadBashTool();
+			const accentTheme = {
+				fg: (key: string, text: string) => (key === "accent" ? `\x1b[36m${text}\x1b[0m` : `\x1b[31m${text}\x1b[0m`),
+				bold: (text: string) => `\x1b[1m${text}\x1b[22m`,
+			};
+			const command = "cd /tmp && \\\n  echo hi";
+
+			const rendered = bashTool.renderCall({ command }, accentTheme, {
+				lastComponent: new MockText(),
+				isError: false,
+				state: {},
+				expanded: true,
+				invalidate: () => {},
+			});
+
+			const lines = rendered.getText().split("\n");
+			// First-row args are wrapped in the accent open code (`\x1b[36m`); the
+			// continuation row must independently carry the same accent wrap so the
+			// rendered text doesn't fall back to the terminal's default fg.
+			expect(lines[0]).toContain("\x1b[36mcd /tmp");
+			expect(lines[1]).toContain("\x1b[36mecho hi");
+		});
+	});
+});
+
+describe("bash renderResult body rails", () => {
+	it("keeps the left rail on lines that contain a `\\r` (terminal-style overwrite)", () => {
+		withStdoutColumns(120, () => {
+			const bashTool = loadBashTool();
+
+			// Simulates `git rebase` output, which prints `Rebasing (1/1)\rSuccessfully …`
+			const text = [
+				"=== before ===",
+				"abc1234 some change",
+				"Rebasing (1/1)\rSuccessfully rebased and updated refs/heads/master.",
+				"=== after ===",
+			].join("\n");
+
+			const result = {
+				content: [{ type: "text", text }],
+				details: { _type: "bashResult", text, exitCode: 0, command: "git pull --rebase" },
+			};
+
+			const rendered = bashTool.renderResult(
+				result as any,
+				{ isPartial: false } as any,
+				mockTheme,
+				{
+					lastComponent: new MockText(),
+					isError: false,
+					state: {},
+					expanded: true,
+					invalidate: () => {},
+				} as any,
+			);
+
+			const out = rendered.getText() as string;
+			const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, "");
+			const lines = out.split("\n").map(stripAnsi);
+
+			// Find the line that ends with the success message — it must be rail-prefixed,
+			// not raw `Successfully…` (which would mean the rail got clobbered).
+			const successLine = lines.find((l) => l.includes("Successfully rebased"));
+			expect(successLine).toBeDefined();
+			expect(successLine!.startsWith("│")).toBe(true);
+			// `\r` and the discarded progress prefix are stripped from the rendered line.
+			expect(successLine!).not.toContain("\r");
+			expect(successLine!).not.toContain("Rebasing (1/1)");
+
+			// Sanity check: every body line keeps a rail prefix.
+			const bodyLines = lines.filter((l) => !l.startsWith("╭") && !l.startsWith("╰") && l.length > 0);
+			for (const line of bodyLines) {
+				expect(line.startsWith("│")).toBe(true);
+			}
+		});
+	});
 });

package/image-rendering.test.ts

@@ -30,6 +30,15 @@ class MockText {
 	}
 }
 
+// Minimal duck-typed theme: the new shared frame helpers in
+// `@wierdbytes/pi-common/tool-frame` invoke `theme.fg(token, str)` to colour
+// the chrome, so the empty-object placeholder this test used previously no
+// longer suffices. Pass-through `fg` keeps assertions focused on structure.
+const mockTheme = {
+	fg: (_key: string, text: string) => text,
+	bold: (text: string) => text,
+};
+
 function mockToolFactory(exec: any) {
 	return (_cwd: string) => ({
 		name: "mock",
@@ -136,7 +145,7 @@ describe("image rendering terminal detection", () => {
 		}));
 
 		const result = await readTool.execute("t1", { path: "media/inline-image.png" }, null, null, {});
-		const rendered = readTool.renderResult(result, {}, {}, {
+		const rendered = readTool.renderResult(result, {}, mockTheme, {
 			lastComponent: new MockText(),
 			isError: false,
 			state: {},

package/index.ts

@@ -40,8 +40,21 @@ import type {
 	ReadToolInput,
 	ToolRenderResultOptions,
 } from "@earendil-works/pi-coding-agent";
+import type { Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { codeToANSI } from "@shikijs/cli";
+import {
+	formatDuration,
+	frameBodyLines,
+	frameBottom,
+	frameBottomWithLabel,
+	frameResult,
+	frameResultWithBottomLabel,
+	frameTop,
+	getFrameStatus,
+	renderToolError,
+	type FrameStatus,
+} from "@wierdbytes/pi-common/tool-frame";
 import type { BundledLanguage, BundledTheme } from "shiki";
 
 // ---------------------------------------------------------------------------
@@ -149,10 +162,6 @@ function resolveBaseBackground(theme: BgTheme | null | undefined): void {
 	RST = `\x1b[0m${BG_BASE}`;
 }
 
-function renderToolError(error: string, theme: FgTheme): string {
-	return frameResult(theme.fg("error", error), "error");
-}
-
 const ESC_RE = "\u001b";
 const ANSI_CAPTURE_RE = new RegExp(`${ESC_RE}\\[([0-9;]*)m`, "g");
 
@@ -207,133 +216,11 @@ function lnum(n: number, w: number): string {
 }
 
 // ---------------------------------------------------------------------------
-// Frame — open-right rounded box for tool output.
-//
-// Replaces pi core's `toolSuccessBg` fill (the green left rail in the
-// default tool shell) with a status-aware single-line frame that reads
-// the same way as the settings modal in pi-wierd-stuff
-// (`packages/common/settings/frame.ts`), but with the right side left
-// open so long lines fade out naturally:
-//
-//     ╭── read /some/file.ext ─────
-//     │   12 lines
-//     │ 535 │ const x = 1;
-//     │ 536 │ const y = 2;
-//     ╰─────────────────────────
-//
-// Tools opt in by setting `renderShell: "self"` on their definition,
-// which tells pi core to skip the colored Box wrapper and let the tool
-// draw its own framing.
+// Frame helpers now live in `@wierdbytes/pi-common/tool-frame`. Status
+// border colours follow host theme tokens (`success` / `warning` /
+// `error`) instead of the previous fixed RGB palette.
 // ---------------------------------------------------------------------------
 
-type FrameStatus = "pending" | "success" | "error";
-
-function getFrameStatus(ctx: { isError?: boolean; isPartial?: boolean }): FrameStatus {
-	if (ctx.isError) return "error";
-	if (ctx.isPartial) return "pending";
-	return "success";
-}
-
-function getFrameColor(status: FrameStatus): string {
-	switch (status) {
-		case "error":
-			return FG_RED;
-		case "pending":
-			return FG_YELLOW;
-		default:
-			return FG_GREEN;
-	}
-}
-
-/** Inner content width — terminal width minus the `│` left rail (1 col). */
-function bodyW(): number {
-	return Math.max(1, termW() - 1);
-}
-
-/**
- * Render the top border of the frame: `╭── <title> ─────`.
- * The title may contain ANSI codes; visible width is measured with pi-tui.
- * Truncated with `…` if it would overflow the terminal width.
- */
-function frameTop(titleAnsi: string, status: FrameStatus): string {
-	const color = getFrameColor(status);
-	const w = termW();
-	// Layout: `╭` (1) + `──` (2) + ` ` (1) + title + ` ` (1) + trailing dashes (≥1)
-	const minTrailing = 1;
-	const fixed = 1 + 2 + 1 + 1 + minTrailing;
-	const maxTitleW = Math.max(0, w - fixed);
-
-	let title = titleAnsi;
-	let tw = visibleWidth(titleAnsi);
-	if (tw > maxTitleW) {
-		title = truncateToWidth(titleAnsi, maxTitleW, "…");
-		tw = visibleWidth(title);
-	}
-	const trailing = Math.max(minTrailing, w - 1 - 2 - 1 - tw - 1);
-	return `${color}╭──${RST} ${title} ${color}${"─".repeat(trailing)}${RST}`;
-}
-
-/** Render the bottom border of the frame: `╰─────────────`. */
-function frameBottom(status: FrameStatus): string {
-	const color = getFrameColor(status);
-	const w = termW();
-	return `${color}╰${"─".repeat(Math.max(1, w - 1))}${RST}`;
-}
-
-/**
- * Render the bottom border with an inline label, mirroring `frameTop`:
- * `╰── <label> ──────`. Used by the bash renderer to keep the exit
- * summary attached to the frame instead of as the first body line.
- */
-function frameBottomWithLabel(labelAnsi: string, status: FrameStatus): string {
-	const color = getFrameColor(status);
-	const w = termW();
-	const minTrailing = 1;
-	const fixed = 1 + 2 + 1 + 1 + minTrailing;
-	const maxLabelW = Math.max(0, w - fixed);
-
-	let label = labelAnsi;
-	let lw = visibleWidth(labelAnsi);
-	if (lw > maxLabelW) {
-		label = truncateToWidth(labelAnsi, maxLabelW, "…");
-		lw = visibleWidth(label);
-	}
-	const trailing = Math.max(minTrailing, w - 1 - 2 - 1 - lw - 1);
-	return `${color}╰──${RST} ${label} ${color}${"─".repeat(trailing)}${RST}`;
-}
-
-/**
- * Prefix every line in `text` with the frame's left rail (`│`).
- * Each logical line is right-truncated to `bodyW()` so the visible width
- * including the rail never exceeds `termW()`.
- */
-function frameBodyLines(text: string, status: FrameStatus): string {
-	const color = getFrameColor(status);
-	const rail = `${color}│${RST}`;
-	const w = bodyW();
-	return text
-		.split("\n")
-		.map((line) => {
-			const fitted = line && visibleWidth(line) > w ? truncateToWidth(line, w, "") : line;
-			return `${rail}${fitted}`;
-		})
-		.join("\n");
-}
-
-/** Wrap `body` as the result-side of the frame: rail-prefixed lines + bottom border.
- *  An empty `body` collapses to just the bottom border, mirroring
- *  `frameResultWithBottomLabel` so the frame doesn't show an empty rail row. */
-function frameResult(body: string, status: FrameStatus): string {
-	const body_ = body ? `${frameBodyLines(body, status)}\n` : "";
-	return `${body_}${frameBottom(status)}`;
-}
-
-/** Same as `frameResult` but embeds `label` inline in the bottom border. */
-function frameResultWithBottomLabel(body: string, labelAnsi: string, status: FrameStatus): string {
-	const body_ = body ? `${frameBodyLines(body, status)}\n` : "";
-	return `${body_}${frameBottomWithLabel(labelAnsi, status)}`;
-}
-
 // ---------------------------------------------------------------------------
 // Language detection
 // ---------------------------------------------------------------------------
@@ -548,21 +435,6 @@ export const __imageInternals = {
 	},
 };
 
-/**
- * Compact human-readable duration: `3.3s`, `1m3s`, `2h5m`.
- * Mirrors the style requested by the user for the bash bottom-border label.
- */
-function formatDuration(ms: number): string {
-	const totalSec = Math.max(0, ms) / 1000;
-	if (totalSec < 60) return `${totalSec.toFixed(1)}s`;
-	const totalMin = Math.floor(totalSec / 60);
-	const sec = Math.floor(totalSec % 60);
-	if (totalMin < 60) return sec > 0 ? `${totalMin}m${sec}s` : `${totalMin}m`;
-	const hours = Math.floor(totalMin / 60);
-	const min = totalMin % 60;
-	return min > 0 ? `${hours}h${min}m` : `${hours}h`;
-}
-
 /**
  * Get human-readable file size
  */
@@ -741,8 +613,9 @@ async function renderFileContent(
 	const lg = lang(filePath);
 	const hl = await hlBlock(show.join("\n"), lg);
 
-	// Reserve 2 cols for the outer frame's `│ ` rail — rendered by frameBodyLines.
-	const tw = bodyW();
+	// Reserve 1 col for the outer frame's `│` rail (drawn later by
+	// `frameBodyLines`) so the highlighted lines fit inside the frame.
+	const tw = Math.max(1, termW() - 1);
 	const startLine = offset;
 	const endLine = startLine + show.length - 1;
 	const nw = Math.max(3, String(endLine).length);
@@ -899,6 +772,15 @@ type ToolResultLike<TDetails = unknown> = AgentToolResult<TDetails | undefined>;
 type TextComponentLike = { setText(value: string): void; getText?: () => string };
 type TextComponentCtor = new (text?: string, x?: number, y?: number) => TextComponentLike;
 type ThemeLike = BgTheme & FgTheme & { bold: (text: string) => string };
+
+/**
+ * Cast the loose `ThemeLike` (used by the duck-typed render hooks) to the
+ * real `Theme` class expected by the shared
+ * `@wierdbytes/pi-common/tool-frame` helpers. The helpers only call
+ * `theme.fg(token, str)`, which `ThemeLike` already provides, so the cast
+ * is structurally safe at runtime.
+ */
+const asTheme = (theme: ThemeLike): Theme => theme as unknown as Theme;
 type RenderContextLike<TState extends Record<string, unknown> = Record<string, unknown>> = {
 	lastComponent?: TextComponentLike;
 	state: TState;
@@ -1112,7 +994,7 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 			const offset = args.offset ? ` ${theme.fg("muted", `from line ${args.offset}`)}` : "";
 			const limit = args.limit ? ` ${theme.fg("muted", `(${args.limit} lines)`)}` : "";
 			const title = `${theme.fg("toolTitle", theme.bold("read"))} ${theme.fg("accent", sp(fp))}${offset}${limit}`;
-			text.setText(frameTop(title, getFrameStatus(ctx)));
+			text.setText(frameTop(title, getFrameStatus(ctx), asTheme(theme), termW()));
 			return text;
 		},
 
@@ -1125,9 +1007,11 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 			resolveBaseBackground(theme);
 			const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 			const status = getFrameStatus(ctx);
+			const t = asTheme(theme);
+			const w = termW();
 
 			if (ctx.isError) {
-				text.setText(renderToolError(getTextContent(result) || "Error", theme));
+				text.setText(renderToolError(getTextContent(result) || "Error", t, w));
 				return text;
 			}
 
@@ -1141,35 +1025,41 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				const sizeStr = humanSize(byteSize);
 				const mimeStr = d.mimeType ?? "image";
 
-				text.setText(frameResult(`${fileIcon(d.filePath)}${FG_DIM}${mimeStr} · ${sizeStr}${RST}`, status));
+				text.setText(frameResult(`${fileIcon(d.filePath)}${FG_DIM}${mimeStr} · ${sizeStr}${RST}`, status, t, w));
 				return text;
 			}
 
 			if (d?._type === "readFile" && d.content) {
-				const key = `read:${d.filePath}:${d.offset}:${d.lineCount}:${termW()}:${status}`;
+				const key = `read:${d.filePath}:${d.offset}:${d.lineCount}:${w}:${status}`;
 				if (ctx.state._rk !== key) {
 					ctx.state._rk = key;
 					// Initial render: just the frame chrome until shiki resolves.
 					// Once `renderFileContent` returns we re-cache with the highlighted body.
-					ctx.state._rt = frameResult("", status);
+					ctx.state._rt = frameResult("", status, t, w);
 
 					const maxShow = ctx.expanded ? d.lineCount : MAX_PREVIEW_LINES;
 					renderFileContent(d.content, d.filePath, d.offset, maxShow)
 						.then((rendered: string) => {
 							if (ctx.state._rk !== key) return;
-							ctx.state._rt = frameResult(rendered, status);
+							ctx.state._rt = frameResult(rendered, status, t, w);
 							ctx.invalidate();
 						})
-						.catch(() => {});
+						.catch((err: unknown) => {
+							// Surface to stderr so silent regressions in the highlighter
+							// (e.g. a stale helper reference) are visible during dev
+							// instead of producing an empty-body frame.
+							const msg = err instanceof Error ? err.message : String(err);
+							console.error(`pi-facelift: read render failed: ${msg}`);
+						});
 				}
-				text.setText(ctx.state._rt ?? frameResult("", status));
+				text.setText(ctx.state._rt ?? frameResult("", status, t, w));
 				return text;
 			}
 
 			// Fallback
 			const fallback = result.content?.[0];
 			const fallbackText = fallback && isTextContent(fallback) ? fallback.text : "read";
-			text.setText(frameResult(theme.fg("dim", String(fallbackText).slice(0, 120)), status));
+			text.setText(frameResult(theme.fg("dim", String(fallbackText).slice(0, 120)), status, t, w));
 			return text;
 		},
 	});
@@ -1226,8 +1116,19 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				}
 				const timeout = args.timeout ? ` ${theme.fg("muted", `(${args.timeout}s timeout)`)}` : "";
 				const displayCmd = ctx.expanded || cmd.length <= 80 ? cmd : `${cmd.slice(0, 77)}…`;
-				const title = `${theme.fg("toolTitle", theme.bold("bash"))} ${theme.fg("accent", displayCmd)}${timeout}`;
-				t.setText(frameTop(title, getFrameStatus(ctx)));
+
+				// Multi-line bash commands (shell line continuations with `\`, here-docs,
+				// or embedded newlines) need each line wrapped in the accent color
+				// separately so the color survives line splitting in `frameTop`. Leading
+				// whitespace on continuation lines is dropped — the sub-tree connector
+				// already provides visual indentation, so the user's heredoc indent
+				// would just push content right and misalign the tree.
+				const cmdLines = displayCmd.split("\n");
+				const firstCmd = cmdLines[0];
+				const restCmd = cmdLines.slice(1).map((line) => line.replace(/^\s+/, ""));
+				const firstTitle = `${theme.fg("toolTitle", theme.bold("bash"))} ${theme.fg("accent", firstCmd)}${timeout}`;
+				const title = [firstTitle, ...restCmd.map((line) => theme.fg("accent", line))].join("\n");
+				t.setText(frameTop(title, getFrameStatus(ctx), asTheme(theme), termW()));
 				return t;
 			},
 
@@ -1240,6 +1141,8 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				resolveBaseBackground(theme);
 				const t = ctx.lastComponent ?? new TextComponent("", 0, 0);
 				const status = getFrameStatus(ctx);
+				const frameTheme = asTheme(theme);
+				const frameWidth = termW();
 				const state = ctx.state;
 
 				// Live timer: tick every second while still streaming, freeze on final/error.
@@ -1306,9 +1209,9 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				const body = out.join("\n");
 
 				if (label) {
-					t.setText(frameResultWithBottomLabel(body, label, status));
+					t.setText(frameResultWithBottomLabel(body, label, status, frameTheme, frameWidth));
 				} else {
-					t.setText(frameResult(body, status));
+					t.setText(frameResult(body, status, frameTheme, frameWidth));
 				}
 				return t;
 			},
@@ -1354,7 +1257,7 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				const fp = args.path ?? ".";
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 				const title = `${theme.fg("toolTitle", theme.bold("ls"))} ${theme.fg("accent", sp(fp))}`;
-				text.setText(frameTop(title, getFrameStatus(ctx)));
+				text.setText(frameTop(title, getFrameStatus(ctx), asTheme(theme), termW()));
 				return text;
 			},
 
@@ -1362,9 +1265,11 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				resolveBaseBackground(theme);
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 				const status = getFrameStatus(ctx);
+				const t = asTheme(theme);
+				const w = termW();
 
 				if (ctx.isError) {
-					text.setText(renderToolError(getTextContent(result) || "Error", theme));
+					text.setText(renderToolError(getTextContent(result) || "Error", t, w));
 					return text;
 				}
 
@@ -1372,13 +1277,13 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				if (d?._type === "lsResult" && d.text) {
 					const tree = renderTree(d.text, d.path);
 					const info = `${FG_DIM}${d.entryCount} entries${RST}`;
-					text.setText(frameResultWithBottomLabel(tree, info, status));
+					text.setText(frameResultWithBottomLabel(tree, info, status, t, w));
 					return text;
 				}
 
 				const fallback = result.content?.[0];
 				const fallbackText = fallback && isTextContent(fallback) ? fallback.text : "listed";
-				text.setText(frameResult(theme.fg("dim", String(fallbackText).slice(0, 120)), status));
+				text.setText(frameResult(theme.fg("dim", String(fallbackText).slice(0, 120)), status, t, w));
 				return text;
 			},
 		});
@@ -1423,7 +1328,7 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				const path = args.path ? ` ${theme.fg("muted", `in ${sp(args.path)}`)}` : "";
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 				const title = `${theme.fg("toolTitle", theme.bold("find"))} ${theme.fg("accent", pattern)}${path}`;
-				text.setText(frameTop(title, getFrameStatus(ctx)));
+				text.setText(frameTop(title, getFrameStatus(ctx), asTheme(theme), termW()));
 				return text;
 			},
 
@@ -1436,9 +1341,11 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				resolveBaseBackground(theme);
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 				const status = getFrameStatus(ctx);
+				const t = asTheme(theme);
+				const w = termW();
 
 				if (ctx.isError) {
-					text.setText(renderToolError(getTextContent(result) || "Error", theme));
+					text.setText(renderToolError(getTextContent(result) || "Error", t, w));
 					return text;
 				}
 
@@ -1446,13 +1353,13 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				if (d?._type === "findResult" && d.text) {
 					const rendered = renderFindResults(d.text);
 					const info = `${FG_DIM}${d.matchCount} files${RST}`;
-					text.setText(frameResultWithBottomLabel(rendered, info, status));
+					text.setText(frameResultWithBottomLabel(rendered, info, status, t, w));
 					return text;
 				}
 
 				const fallback = result.content?.[0];
 				const fallbackText = fallback && isTextContent(fallback) ? fallback.text : "found";
-				text.setText(frameResult(theme.fg("dim", String(fallbackText).slice(0, 120)), status));
+				text.setText(frameResult(theme.fg("dim", String(fallbackText).slice(0, 120)), status, t, w));
 				return text;
 			},
 		});
@@ -1508,7 +1415,7 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				const glob = args.glob ? ` ${theme.fg("muted", `(${args.glob})`)}` : "";
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 				const title = `${theme.fg("toolTitle", theme.bold("grep"))} ${theme.fg("accent", pattern)}${path}${glob}`;
-				text.setText(frameTop(title, getFrameStatus(ctx)));
+				text.setText(frameTop(title, getFrameStatus(ctx), asTheme(theme), termW()));
 				return text;
 			},
 
@@ -1521,37 +1428,42 @@ export default function piFaceliftExtension(pi: PiFaceliftApi, deps?: PiFacelift
 				resolveBaseBackground(theme);
 				const text = ctx.lastComponent ?? new TextComponent("", 0, 0);
 				const status = getFrameStatus(ctx);
+				const t = asTheme(theme);
+				const w = termW();
 
 				if (ctx.isError) {
-					text.setText(renderToolError(getTextContent(result) || "Error", theme));
+					text.setText(renderToolError(getTextContent(result) || "Error", t, w));
 					return text;
 				}
 
 				const d = result.details;
 				if (d?._type === "grepResult" && d.text) {
-					const key = `grep:${d.pattern}:${d.matchCount}:${termW()}:${status}`;
+					const key = `grep:${d.pattern}:${d.matchCount}:${w}:${status}`;
 					if (ctx.state._gk !== key) {
 						ctx.state._gk = key;
 						const info = `${FG_DIM}${d.matchCount} matches${RST}`;
-						ctx.state._gt = frameResultWithBottomLabel("", info, status);
+						ctx.state._gt = frameResultWithBottomLabel("", info, status, t, w);
 
 						renderGrepResults(d.text, d.pattern)
 							.then((rendered: string) => {
 								if (ctx.state._gk !== key) return;
-								ctx.state._gt = frameResultWithBottomLabel(rendered, info, status);
+								ctx.state._gt = frameResultWithBottomLabel(rendered, info, status, t, w);
 								ctx.invalidate();
 							})
-							.catch(() => {});
+							.catch((err: unknown) => {
+								const msg = err instanceof Error ? err.message : String(err);
+								console.error(`pi-facelift: grep render failed: ${msg}`);
+							});
 					}
 					text.setText(
-						ctx.state._gt ?? frameResultWithBottomLabel("", `${FG_DIM}${d.matchCount} matches${RST}`, status),
+						ctx.state._gt ?? frameResultWithBottomLabel("", `${FG_DIM}${d.matchCount} matches${RST}`, status, t, w),
 					);
 					return text;
 				}
 
 				const fallback = result.content?.[0];
 				const fallbackText = fallback && isTextContent(fallback) ? fallback.text : "searched";
-				text.setText(frameResult(theme.fg("dim", String(fallbackText).slice(0, 120)), status));
+				text.setText(frameResult(theme.fg("dim", String(fallbackText).slice(0, 120)), status, t, w));
 				return text;
 			},
 		});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wierdbytes/pi-facelift",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Cosmetic facelift for built-in pi tool output — open-right rounded frames, syntax-highlighted reads, status-aware bash summaries, find/grep.",
   "type": "module",
   "files": [
@@ -52,7 +52,8 @@
     "demo": "bun scripts/demo.ts"
   },
   "dependencies": {
-    "@shikijs/cli": "^4.0.2"
+    "@shikijs/cli": "^4.0.2",
+    "@wierdbytes/pi-common": "^0.3.0"
   },
   "peerDependencies": {
     "@earendil-works/pi-ai": ">=0.74.0",

package/read-rendering.test.ts

@@ -0,0 +1,209 @@
+/**
+ * Regression tests for the `read` tool's body rendering.
+ *
+ * History: a previous refactor stranded a `bodyW()` reference inside
+ * `renderFileContent` after the helper itself was deleted. The
+ * resulting `ReferenceError` was swallowed by `.catch(() => {})` on
+ * the shiki promise, leaving every `read` result with a top + bottom
+ * border but no body lines at all. These tests force the async
+ * highlighter to run and assert that the body actually populates.
+ */
+
+import { describe, expect, it } from "vitest";
+
+import piFaceliftExtension from "./index.ts";
+
+class MockText {
+	private text = "";
+	constructor(_text = "", _x = 0, _y = 0) {}
+	setText(value: string) {
+		this.text = value;
+	}
+	getText() {
+		return this.text;
+	}
+}
+
+const mockTheme = {
+	fg: (_key: string, text: string) => text,
+	bold: (text: string) => text,
+};
+
+function mockToolFactory(exec: any) {
+	return (_cwd: string) => ({
+		name: "mock",
+		description: "mock",
+		parameters: { type: "object", properties: {} },
+		execute: exec,
+	});
+}
+
+/**
+ * Pin `process.stdout.columns` for the lifetime of `fn`, including
+ * across `await` boundaries. The naive sync `try/finally` version
+ * restores the descriptor immediately when `fn` returns its promise,
+ * so any code that runs after the first `await` sees the *original*
+ * width — enough to flip a width-keyed cache (`_rk`) and force a
+ * shiki re-run, which clobbers the populated `_rt` we waited for.
+ */
+async function withStdoutColumns<T>(
+	columns: number,
+	fn: () => T | Promise<T>,
+): Promise<T> {
+	const descriptor = Object.getOwnPropertyDescriptor(process.stdout, "columns");
+	Object.defineProperty(process.stdout, "columns", {
+		configurable: true,
+		value: columns,
+	});
+	try {
+		return await fn();
+	} finally {
+		if (descriptor)
+			Object.defineProperty(process.stdout, "columns", descriptor);
+		else
+			delete (process.stdout as NodeJS.WriteStream & { columns?: number })
+				.columns;
+	}
+}
+
+function loadReadTool(readExec: any) {
+	const noopExec = async () => ({ content: [{ type: "text", text: "" }] });
+	const tools = new Map<string, any>();
+	const pi = {
+		registerTool: (tool: any) => tools.set(tool.name, tool),
+		registerCommand: () => {},
+		on: () => {},
+	};
+
+	piFaceliftExtension(pi, {
+		sdk: {
+			createReadToolDefinition: mockToolFactory(readExec),
+			createBashToolDefinition: mockToolFactory(noopExec),
+			createLsToolDefinition: mockToolFactory(noopExec),
+			createFindToolDefinition: mockToolFactory(noopExec),
+			createGrepToolDefinition: mockToolFactory(noopExec),
+			getAgentDir: () => "/tmp/pi-facelift-test",
+		},
+		TextComponent: MockText,
+	});
+
+	return tools.get("read");
+}
+
+const stripAnsi = (s: string): string => s.replace(/\x1b\[[0-9;]*m/g, "");
+
+/**
+ * Wait until `state._rt` is populated by shiki's async render. Shiki's
+ * first call cold-starts the highlighter (registers the language
+ * grammar, etc.) which can take a few hundred ms in CI; we poll up to
+ * a few seconds before giving up so the test still fails fast on a
+ * real regression.
+ */
+/**
+ * Wait until `state._rt` is populated by shiki's async render. Shiki's
+ * first call cold-starts the highlighter (registers the language
+ * grammar, etc.) which can take a few hundred ms in CI; we poll up to
+ * a few seconds before giving up so the test still fails fast on a
+ * real regression.
+ */
+async function waitForCachedBody(state: { _rt?: string }): Promise<void> {
+	const deadline = Date.now() + 3000;
+	while (Date.now() < deadline) {
+		await new Promise((r) => setTimeout(r, 25));
+		if (state._rt && state._rt.split("\n").length > 1) return;
+	}
+}
+
+describe("read renderResult body", () => {
+	it("populates the frame body with file contents (regression: bodyW reference)", async () => {
+		const fileContent = [
+			"line one",
+			"line two",
+			"line three",
+			"line four",
+			"line five",
+		].join("\n");
+
+		const readTool = loadReadTool(async () => ({
+			content: [{ type: "text", text: fileContent }],
+		}));
+
+		// First, run execute() so the result has the expected `details`
+		// payload that renderResult dispatches on.
+		const result = await readTool.execute(
+			"t1",
+			{ path: "fixtures/sample.txt" },
+			null,
+			null,
+			{},
+		);
+
+		await withStdoutColumns(80, async () => {
+			let invalidated = 0;
+			const ctx: any = {
+				lastComponent: new MockText(),
+				isError: false,
+				isPartial: false,
+				state: {},
+				expanded: false,
+				invalidate: () => {
+					invalidated += 1;
+				},
+			};
+
+			// First render: kicks off shiki, sets the cached `_rt` to an
+			// empty-body frame. The async pipeline then populates `_rt`.
+			const rendered = readTool.renderResult(result, {}, mockTheme, ctx);
+			expect(rendered.getText()).toMatch(/^╰─+$/m); // bottom border present
+
+			await waitForCachedBody(ctx.state);
+
+			// After the highlighter resolves, `ctx.invalidate` should have
+			// fired so pi-tui re-invokes the renderer. Simulate that.
+			expect(invalidated).toBeGreaterThanOrEqual(1);
+			const rendered2 = readTool.renderResult(result, {}, mockTheme, ctx);
+			const lines = rendered2.getText().split("\n");
+
+			// Top border is drawn by renderCall, not renderResult — so the
+			// renderResult output starts with at least one body line and
+			// ends with the bottom border. Body rows carry the `│` rail.
+			const bodyRows = lines.filter((l: string) =>
+				stripAnsi(l).startsWith("│"),
+			);
+			expect(bodyRows.length).toBeGreaterThan(0);
+
+			// Body must contain each source line by content.
+			const body = lines.map(stripAnsi).join("\n");
+			expect(body).toContain("line one");
+			expect(body).toContain("line five");
+		});
+	});
+
+	it("renders an unknown-language file without dying (uses fallback path)", async () => {
+		const readTool = loadReadTool(async () => ({
+			content: [{ type: "text", text: "hello world" }],
+		}));
+		const result = await readTool.execute(
+			"t2",
+			{ path: "fixtures/no-extension" },
+			null,
+			null,
+			{},
+		);
+
+		await withStdoutColumns(80, async () => {
+			const ctx: any = {
+				lastComponent: new MockText(),
+				isError: false,
+				isPartial: false,
+				state: {},
+				expanded: false,
+				invalidate: () => {},
+			};
+			readTool.renderResult(result, {}, mockTheme, ctx);
+			await waitForCachedBody(ctx.state);
+			const rendered = readTool.renderResult(result, {}, mockTheme, ctx);
+			expect(stripAnsi(rendered.getText())).toContain("hello world");
+		});
+	});
+});

package/scripts/demo.ts

@@ -260,6 +260,56 @@ async function demoBashTimeout(): Promise<void> {
 	);
 }
 
+async function demoBashMultiline(): Promise<void> {
+	header("bash multi-line command — sub-tree title + \\r-safe body rails");
+	// Multi-line shell command (line continuations with `\`). The title
+	// renders as a sub-tree with `│`/`╰` connectors aligned under the first
+	// arg of the first row; continuation lines stay in the same accent
+	// color as the first row.
+	const command = [
+		"cd /Users/mentor/me/dev/pi-wierd-stuff && \\",
+		'  echo "=== before ===" && \\',
+		"  git log --oneline -3 origin/master && \\",
+		"  git pull --rebase && \\",
+		'  echo "=== after ==="',
+	].join("\n");
+
+	// Body intentionally contains `Rebasing (1/1)\rSuccessfully rebased…`,
+	// the exact pattern `git rebase` writes to stderr. Without terminal-style
+	// `\r` handling, the embedded carriage return would clobber the `│` rail
+	// when the terminal honors `\r` as cursor-reset.
+	const bodyText = [
+		"=== before ===",
+		"981c12d facelift: add @wierdbytes/pi-facelift v0.1.0",
+		"4517d9c README: fix stale npm package names",
+		"046a5c2 web: rename slash command from /wierd-web to /web, bump to 0.3.1",
+		"Rebasing (1/1)\rSuccessfully rebased and updated refs/heads/master.",
+		"=== after ===",
+		"8770a5e facelift: add @wierdbytes/pi-facelift v0.1.0",
+		"046a5c2 web: rename slash command from /wierd-web to /web, bump to 0.3.1",
+		"f87cbcf voice: rename slash command from /wierd-voice to /voice, bump to 0.4.1",
+	].join("\n");
+
+	const tools = loadTools({
+		bash: async () => ({
+			content: [{ type: "text", text: bodyText }],
+			details: { _type: "bashResult", text: bodyText, exitCode: 0, command },
+		}),
+	});
+	const bash = tools.get("bash");
+	const state: { startedAt?: number; endedAt?: number } = { startedAt: Date.now() - 1200 };
+
+	const callCtx = makeCtx({ state, expanded: true });
+	console.log(bash.renderCall({ command }, theme, callCtx).getText());
+
+	const result = await bash.execute("t1", { command }, undefined, undefined, {});
+	state.endedAt = Date.now();
+	const resCtx = makeCtx({ state, expanded: true });
+	console.log(
+		bash.renderResult(result, { isPartial: false, expanded: true }, theme, resCtx).getText(),
+	);
+}
+
 async function demoLs(): Promise<void> {
 	header("ls — tree view with Nerd Font icons");
 	const tools = loadTools({
@@ -344,6 +394,7 @@ async function main(): Promise<void> {
 	await demoBashError();
 	await demoBashStreaming();
 	await demoBashTimeout();
+	await demoBashMultiline();
 	await demoLs();
 	await demoFind();
 	await demoGrep();