@wierdbytes/pi-facelift 0.1.0 → 0.1.1

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/index.ts

@@ -250,27 +250,112 @@ function bodyW(): number {
 	return Math.max(1, termW() - 1);
 }
 
+/**
+ * Find the visible column of the first space character in an ANSI-formatted
+ * string, ignoring ANSI escape sequences. Returns -1 if no space is found
+ * before a newline (or end of string).
+ *
+ * Used by `frameTop` to align continuation rows under the first argument of
+ * the tool title (e.g., the column where `cd` starts in `bash cd …`).
+ */
+function firstVisibleSpace(s: string): number {
+	let visiblePos = 0;
+	let i = 0;
+	while (i < s.length) {
+		const ch = s[i];
+		if (ch === "\x1b") {
+			const next = s[i + 1];
+			if (next === "[") {
+				const end = s.indexOf("m", i + 2);
+				if (end < 0) return -1;
+				i = end + 1;
+				continue;
+			}
+			// Unknown escape — bail out
+			return -1;
+		}
+		if (ch === "\n") return -1;
+		if (ch === " ") return visiblePos;
+		visiblePos += 1;
+		i += 1;
+	}
+	return -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.
+ *
+ * Multi-line titles (e.g., a multi-line bash command) are rendered with the
+ * first line as the top border and remaining lines as rail-prefixed
+ * continuation rows in a sub-tree:
+ *
+ *     ╭── bash cd /…/pi-wierd-stuff && \ ──────────────
+ *     │      │ echo "line 1" \
+ *     │      ╚ echo "line 2"
+ *
+ * Each continuation row is composed of:
+ *   • the outer frame rail `│` (frame status color)
+ *   • padding sized so the sub-tree connector lines up with the first arg
+ *     character of the first row
+ *   • a sub-tree connector (`│` for non-last rows, `╰` for the last)
+ *   • a single separator space
+ *   • the row's content (callers are expected to wrap each line in the
+ *     same color as the first-row args so the sub-tree text matches)
+ *
+ * Trailing dashes are only emitted on the first row so continuation rows
+ * stay clean.
  */
 function frameTop(titleAnsi: string, status: FrameStatus): string {
 	const color = getFrameColor(status);
 	const w = termW();
+	const titleLines = titleAnsi.split("\n");
+	const firstTitle = titleLines[0];
+	const continuations = titleLines.slice(1);
+
 	// 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);
+	let title = firstTitle;
+	let tw = visibleWidth(firstTitle);
 	if (tw > maxTitleW) {
-		title = truncateToWidth(titleAnsi, maxTitleW, "…");
+		title = truncateToWidth(firstTitle, maxTitleW, "…");
 		tw = visibleWidth(title);
 	}
 	const trailing = Math.max(minTrailing, w - 1 - 2 - 1 - tw - 1);
-	return `${color}╭──${RST} ${title} ${color}${"─".repeat(trailing)}${RST}`;
+	const firstLine = `${color}╭──${RST} ${title} ${color}${"─".repeat(trailing)}${RST}`;
+
+	if (continuations.length === 0) return firstLine;
+
+	// Continuation rows: rail + padding + sub-tree connector + space + content.
+	// First line layout:
+	//   col 1: `╭`
+	//   cols 2-3: `──`
+	//   col 4: literal space
+	//   cols 5..: title (toolName + space + args…)
+	// If the toolName ends at visible-offset N (i.e., the space is at offset N),
+	// the first arg char sits at column N + 6 (1-indexed). We align the sub-tree
+	// connector two columns before it (at contentCol - 2) and put the content
+	// itself at the same column as the first row's first arg char, so the rows
+	// read as a tree hanging off the title.
+	const toolNameEnd = firstVisibleSpace(firstTitle);
+	const contentCol = toolNameEnd >= 0 ? toolNameEnd + 6 : 6;
+	const padBetween = " ".repeat(Math.max(0, contentCol - 4));
+	const rail = `${color}│${RST}`;
+	const innerW = Math.max(1, w - contentCol + 1);
+	const lastIdx = continuations.length - 1;
+
+	const contLines = continuations.map((line, idx) => {
+		const connectorChar = idx === lastIdx ? "╰" : "│";
+		const connector = `${color}${connectorChar}${RST}`;
+		const fitted = visibleWidth(line) > innerW ? truncateToWidth(line, innerW, "…") : line;
+		return `${rail}${padBetween}${connector} ${fitted}`;
+	});
+
+	return [firstLine, ...contLines].join("\n");
 }
 
 /** Render the bottom border of the frame: `╰─────────────`. */
@@ -306,6 +391,13 @@ function frameBottomWithLabel(labelAnsi: string, status: FrameStatus): string {
  * 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()`.
+ *
+ * Embedded carriage returns (`\r`) are collapsed using terminal-style
+ * overwrite semantics: only the content after the last `\r` on a line is
+ * kept. Without this, sequences like `git rebase`'s
+ * `Rebasing (1/1)\rSuccessfully rebased…` would clobber the rail when the
+ * terminal honors `\r` as cursor-reset, leaving the line visibly
+ * unprefixed.
  */
 function frameBodyLines(text: string, status: FrameStatus): string {
 	const color = getFrameColor(status);
@@ -314,7 +406,11 @@ function frameBodyLines(text: string, status: FrameStatus): string {
 	return text
 		.split("\n")
 		.map((line) => {
-			const fitted = line && visibleWidth(line) > w ? truncateToWidth(line, w, "") : line;
+			// Terminal-style \r handling: keep only what survives after the last
+			// carriage return so the rail isn't overwritten by progress messages.
+			const lastCR = line.lastIndexOf("\r");
+			const safeLine = lastCR >= 0 ? line.slice(lastCR + 1) : line;
+			const fitted = safeLine && visibleWidth(safeLine) > w ? truncateToWidth(safeLine, w, "") : safeLine;
 			return `${rail}${fitted}`;
 		})
 		.join("\n");
@@ -1226,7 +1322,18 @@ 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}`;
+
+				// 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)));
 				return t;
 			},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wierdbytes/pi-facelift",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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": [

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();