@agnishc/edb-compact-tools 0.10.8 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.12.0] - 2026-05-22
+
+### Added
+- Unit tests for new rendering modules
+
+### Changed
+- Modularized frame rendering with paragraph classes and per-tool views
+
+## [0.10.9] - 2026-05-18
+
 ## [0.10.8] - 2026-05-18
 
 ## [0.11.0] - 2026-05-18

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agnishc/edb-compact-tools",
-	"version": "0.10.8",
+	"version": "0.12.0",
 	"description": "Pi extension: compact outlined tool-call renderers with ctrl+o expansion",
 	"keywords": [
 		"pi-package",

package/src/branch-tool-block.test.ts

@@ -0,0 +1,29 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { describe, expect, it } from "vitest";
+import { BranchToolBlock } from "./branch-tool-block.js";
+import type { CompactTheme } from "./types.js";
+
+const theme: CompactTheme = {
+	fg: (_color, text) => text,
+	bold: (text) => text,
+};
+
+describe("BranchToolBlock", () => {
+	it("adds spacer and rule lines around the branch block", () => {
+		const block = new BranchToolBlock("full", ["top", "bottom"], theme, (text) => text);
+		expect(block.render(20)).toEqual([
+			" ".repeat(19),
+			"─".repeat(19),
+			"● top              ",
+			"└─ bottom          ",
+			"─".repeat(19),
+			" ".repeat(19),
+		]);
+	});
+
+	it("never renders wider than the available width", () => {
+		const block = new BranchToolBlock("full", ["x".repeat(100), "y".repeat(100)], theme, (text) => text);
+		const lines = block.render(20);
+		expect(lines.every((line) => visibleWidth(line) <= 19)).toBe(true);
+	});
+});

package/src/branch-tool-block.ts

@@ -0,0 +1,70 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { CompactTheme, ToolBlockKind } from "./types.js";
+
+export class EmptyBlock {
+	render(): string[] {
+		return [];
+	}
+	invalidate(): void {}
+}
+
+export interface BranchToolBlockOptions {
+	pending?: boolean;
+}
+
+export class BranchToolBlock {
+	constructor(
+		private readonly kind: ToolBlockKind,
+		private readonly lines: string[],
+		private readonly theme: CompactTheme,
+		private readonly colorFn: (text: string) => string,
+		private readonly options: BranchToolBlockOptions = {},
+	) {}
+
+	render(width: number): string[] {
+		const renderWidth = Math.max(8, width - 1);
+		const lines = this.lines.length > 0 ? this.lines : [""];
+		const block = lines.map((line, index) => {
+			if (this.kind === "call" || index === 0) return this.renderTop(line, renderWidth);
+			const isLast = index === lines.length - 1;
+			return isLast ? this.renderBottom(line, renderWidth) : this.renderBody(line, renderWidth);
+		});
+		const spacerLine = " ".repeat(renderWidth);
+		const ruleLine = this.theme.fg("borderMuted", "─".repeat(renderWidth));
+		return [spacerLine, ruleLine, ...block, ruleLine, spacerLine];
+	}
+
+	invalidate(): void {}
+
+	private color(text: string): string {
+		return this.colorFn(text);
+	}
+
+	private pendingColor(): string {
+		const colors = ["warning", "accent", "muted"] as const;
+		return colors[Math.floor(Date.now() / 180) % colors.length];
+	}
+
+	private fit(text: string, width: number): string {
+		const clipped = truncateToWidth(text, Math.max(1, width), "");
+		return `${clipped}${" ".repeat(Math.max(0, width - visibleWidth(clipped)))}`;
+	}
+
+	private renderTop(content: string, width: number): string {
+		const prefix = this.options.pending ? this.theme.fg(this.pendingColor(), "● ") : this.color("● ");
+		const contentWidth = Math.max(1, width - visibleWidth("● "));
+		return `${prefix}${this.fit(content, contentWidth)}`;
+	}
+
+	private renderBody(content: string, width: number): string {
+		const prefix = this.theme.fg("borderMuted", "├─ ");
+		const contentWidth = Math.max(1, width - visibleWidth("├─ "));
+		return `${prefix}${this.fit(content, contentWidth)}`;
+	}
+
+	private renderBottom(content: string, width: number): string {
+		const prefix = this.color("└─ ");
+		const contentWidth = Math.max(1, width - visibleWidth("└─ "));
+		return `${prefix}${this.fit(content, contentWidth)}`;
+	}
+}

package/src/constants.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import * as constants from "./constants.js";
+
+// ── constants ──────────────────────────────────────────────────────────────
+
+describe("ANSI constants", () => {
+	it("exports ANSI_PURPLE and ANSI_RESET", () => {
+		expect(constants.ANSI_PURPLE).toMatch(/^\x1b\[38;5;\d+m$/);
+		expect(constants.ANSI_RESET).toBe("\x1b[0m");
+	});
+
+	it("exports emoji arrays", () => {
+		expect(constants.USER_MESSAGE_EMOJIS.length).toBeGreaterThan(0);
+		expect(constants.ASSISTANT_MESSAGE_EMOJIS.length).toBeGreaterThan(0);
+	});
+
+	it("exports OSC133 markers", () => {
+		expect(constants.OSC133_ZONE_START).toBe("\x1b]133;A\x07");
+		expect(constants.OSC133_ZONE_END).toBe("\x1b]133;B\x07");
+		expect(constants.OSC133_ZONE_FINAL).toBe("\x1b]133;C\x07");
+	});
+});

package/src/expanded-lines.ts

@@ -0,0 +1,91 @@
+import { shortenPath } from "./path-utils.js";
+import { cleanToolOutputText, previewLines } from "./text.js";
+import type { CompactTheme } from "./types.js";
+
+function midLine(theme: CompactTheme, text: string): string {
+	return theme.fg("toolOutput", text);
+}
+
+function mutedLine(theme: CompactTheme, text: string): string {
+	return theme.fg("muted", text);
+}
+
+function fileIcon(path: string): string {
+	return path.endsWith("/") ? "📁" : "📄";
+}
+
+function escapeRegExp(text: string): string {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function formatExpandedLines(toolName: string, text: string, theme: CompactTheme, args?: any): string[] {
+	const cleanText = cleanToolOutputText(text);
+	if (!cleanText.trim()) return [];
+	if (toolName === "read") return formatReadLines(cleanText, theme);
+	if (toolName === "bash") return formatBashLines(cleanText, theme);
+	if (toolName === "ls") return formatLsLines(cleanText, theme);
+	if (toolName === "find") return formatFindLines(cleanText, theme);
+	if (toolName === "grep") return formatGrepLines(cleanText, theme, args);
+	return formatGenericLines(cleanText, theme);
+}
+
+function formatReadLines(text: string, theme: CompactTheme): string[] {
+	const lines = previewLines(text, "head");
+	const width = String(lines.length).length;
+	return [
+		mutedLine(theme, `preview · ${lines.length} line${lines.length === 1 ? "" : "s"}`),
+		...lines.map(
+			(line, index) => `${theme.fg("dim", String(index + 1).padStart(width, " "))} ${theme.fg("toolOutput", line)}`,
+		),
+	];
+}
+
+function formatBashLines(text: string, theme: CompactTheme): string[] {
+	const lines = previewLines(text, "tail");
+	return [
+		mutedLine(theme, `output · last ${lines.length} line${lines.length === 1 ? "" : "s"}`),
+		...lines.map((line) => midLine(theme, line)),
+	];
+}
+
+function formatLsLines(text: string, theme: CompactTheme): string[] {
+	const entries = previewLines(text, "head").sort((a, b) => {
+		const dirDelta = Number(b.endsWith("/")) - Number(a.endsWith("/"));
+		return dirDelta || a.localeCompare(b);
+	});
+	return entries.map(
+		(entry) => `${fileIcon(entry)} ${theme.fg(entry.endsWith("/") ? "accent" : "toolOutput", entry)}`,
+	);
+}
+
+function formatFindLines(text: string, theme: CompactTheme): string[] {
+	const entries = previewLines(text, "head").map((entry) => shortenPath(entry));
+	return entries.map((entry) => `${fileIcon(entry)} ${theme.fg("toolOutput", entry)}`);
+}
+
+function formatGrepLines(text: string, theme: CompactTheme, args?: any): string[] {
+	const pattern = typeof args?.pattern === "string" && args.pattern.length > 0 ? args.pattern : "";
+	const matcher = pattern ? new RegExp(escapeRegExp(pattern), "gi") : null;
+	const highlight = (value: string) => {
+		if (!matcher) return theme.fg("toolOutput", value);
+		matcher.lastIndex = 0;
+		return theme.fg(
+			"toolOutput",
+			value.replace(matcher, (match) => theme.fg("warning", match)),
+		);
+	};
+	return previewLines(text, "head").map((line) => {
+		const match = line.match(/^([^:\n]+):(\d+):(.*)$/);
+		if (!match) return highlight(line);
+		return `${theme.fg("accent", shortenPath(match[1] ?? ""))}${theme.fg("dim", `:${match[2]}:`)}${highlight(match[3] ?? "")}`;
+	});
+}
+
+function formatGenericLines(text: string, theme: CompactTheme): string[] {
+	try {
+		const parsed = JSON.parse(text);
+		return previewLines(JSON.stringify(parsed, null, 2), "head").map((line) => midLine(theme, line));
+	} catch {
+		return previewLines(text, "head").map((line) => midLine(theme, line));
+	}
+}

package/src/message-frame.test.ts

@@ -0,0 +1,41 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { describe, expect, it } from "vitest";
+import { DottedParagraph, ThinkingParagraph } from "./message-frame.js";
+
+const markdownTheme = {
+	heading: (s: string) => s,
+	link: (s: string) => s,
+	linkUrl: (s: string) => s,
+	code: (s: string) => s,
+	codeBlock: (s: string) => s,
+	codeBlockBorder: (s: string) => s,
+	quote: (s: string) => s,
+	quoteBorder: (s: string) => s,
+	hr: (s: string) => s,
+	listBullet: (s: string) => s,
+	bold: (s: string) => s,
+	italic: (s: string) => s,
+	strikethrough: (s: string) => s,
+	underline: (s: string) => s,
+	highlightCode: (code: string) => code.split("\n"),
+};
+
+describe("message frame paragraphs", () => {
+	it("keeps thinking lines within width", () => {
+		const paragraph = new ThinkingParagraph("x".repeat(200), markdownTheme as any);
+		const lines = paragraph.render(40);
+		expect(lines.every((line) => visibleWidth(line) <= 40)).toBe(true);
+		expect(lines[0]).toContain("✻ thinking:");
+	});
+
+	it("cleans old persisted ANSI completion artifacts and keeps only the latest completion", () => {
+		const paragraph = new DottedParagraph(
+			"Answer\n\n【38;2;128;128;128m✓ · Spelunked · 2s】\n\n✓ · Transmuted · 4s",
+			markdownTheme as any,
+		);
+		const rendered = paragraph.render(80).join("\n");
+		expect(rendered).not.toContain("【38");
+		expect(rendered).not.toContain("Spelunked");
+		expect(rendered).toContain("✓ · Transmuted · 4s");
+	});
+});

package/src/message-frame.ts

@@ -1,15 +1,17 @@
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import {
-	ASSISTANT_MESSAGE_EMOJIS,
-	OSC133_ZONE_END,
-	OSC133_ZONE_FINAL,
-	OSC133_ZONE_START,
-	USER_MESSAGE_EMOJIS,
-} from "./constants.js";
+import { Markdown, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { OSC133_ZONE_END, OSC133_ZONE_FINAL, OSC133_ZONE_START, USER_MESSAGE_EMOJIS } from "./constants.js";
 import type { CompactTheme } from "./types.js";
 
+const ANSI_RE = /\x1b\[[0-9;]*m/g;
+const TRANSPARENT_BG = "\x1b[49m";
+const RESET = "\x1b[0m";
+
 // ── Helpers ──────────────────────────────────────────────────────
 
+export function stripAnsi(text: string): string {
+	return text.replace(ANSI_RE, "");
+}
+
 export function padVisible(text: string, width: number): string {
 	const clipped = truncateToWidth(text, width, "");
 	return `${clipped}${" ".repeat(Math.max(0, width - visibleWidth(clipped)))}`;
@@ -23,51 +25,229 @@ export function randomUserMessageMarker(): string {
 	return USER_MESSAGE_EMOJIS[Math.floor(Math.random() * USER_MESSAGE_EMOJIS.length)] ?? "✨";
 }
 
-export function randomAssistantMessageMarker(): string {
-	return ASSISTANT_MESSAGE_EMOJIS[Math.floor(Math.random() * ASSISTANT_MESSAGE_EMOJIS.length)] ?? "🤖";
-}
-
 export function trimVisualBlankLines(lines: string[]): string[] {
 	let start = 0;
 	let end = lines.length;
-	while (start < end && stripUserZoneMarkers(lines[start] ?? "").trim() === "") start++;
-	while (end > start && stripUserZoneMarkers(lines[end - 1] ?? "").trim() === "") end--;
+	while (start < end && stripUserZoneMarkers(stripAnsi(lines[start] ?? "")).trim() === "") start++;
+	while (end > start && stripUserZoneMarkers(stripAnsi(lines[end - 1] ?? "")).trim() === "") end--;
 	return lines.slice(start, end);
 }
 
-// ── Framing ──────────────────────────────────────────────────────
+function stripBackgroundAnsi(text: string): string {
+	return text.replace(/\x1b\[([0-9;]*)m/g, (_match, paramsText: string) => {
+		const params = paramsText === "" ? ["0"] : paramsText.split(";");
+		const kept: string[] = [];
+		for (let i = 0; i < params.length; i++) {
+			const code = Number(params[i] || "0");
+			if (code === 48) {
+				const mode = Number(params[i + 1] || "0");
+				i += mode === 2 ? 4 : mode === 5 ? 2 : 0;
+				continue;
+			}
+			if (code === 49 || (code >= 40 && code <= 47) || (code >= 100 && code <= 107)) continue;
+			kept.push(params[i]!);
+		}
+		return kept.length === 0 ? "" : `\x1b[${kept.join(";")}m`;
+	});
+}
+
+function trimAnsiRight(text: string): string {
+	let trimmed = text;
+	while (true) {
+		const next = trimmed.replace(/[ \t]+((?:\x1b\[[0-9;]*m)*)$/g, "$1");
+		if (next === trimmed) return trimmed;
+		trimmed = next;
+	}
+}
+
+function cleanMessageLine(line: string): string {
+	return `${TRANSPARENT_BG}${trimAnsiRight(stripBackgroundAnsi(stripUserZoneMarkers(line)))}${TRANSPARENT_BG}`;
+}
+
+function borderFn(theme: CompactTheme): (text: string) => string {
+	return (text: string) => theme.fg("borderMuted", text);
+}
+
+function roundedUserBorder(width: number, top: boolean, theme: CompactTheme, markerText: string): string {
+	const border = borderFn(theme);
+	if (width <= 1) return `${border("│")}${RESET}${TRANSPARENT_BG}`;
+	const left = top ? "╭" : "╰";
+	const right = top ? "╮" : "╯";
+	if (!top || width < 14)
+		return `${border(left + "─".repeat(Math.max(0, width - 2)) + right)}${RESET}${TRANSPARENT_BG}`;
+	const label = ` ${markerText} User `;
+	const prefix = "─";
+	const suffixWidth = Math.max(0, width - 2 - visibleWidth(prefix) - visibleWidth(label));
+	return `${border(left + prefix)}${TRANSPARENT_BG}${theme.fg("error", label)}${border("─".repeat(suffixWidth) + right)}${RESET}${TRANSPARENT_BG}`;
+}
+
+function borderedMessageLine(line: string, width: number, theme: CompactTheme): string {
+	const border = borderFn(theme);
+	const innerWidth = Math.max(1, width - 4);
+	const content = truncateToWidth(cleanMessageLine(line), innerWidth, "");
+	return `${border("│")}${TRANSPARENT_BG} ${padVisible(content, innerWidth)} ${border("│")}${RESET}${TRANSPARENT_BG}`;
+}
+
+// ── User message framing: cc-tools geometry + edb emoji marker ─────
 
-export function frameMessage(
-	lines: string[],
-	width: number,
-	theme: CompactTheme,
-	markerText: string,
-	borderColor: string,
-	markerColor: string,
-): string[] {
+export function frameUserMessage(lines: string[], width: number, theme: CompactTheme, markerText: string): string[] {
 	if (width < 6) return lines;
-	const innerWidth = Math.max(1, width - 2);
-	const border = (text: string) => theme.fg(borderColor, text);
-	const marker = theme.fg(markerColor, markerText);
-	const topFill = Math.max(0, innerWidth - visibleWidth(marker) - 2);
-	const top = `${border("╭─")} ${marker}${border("─".repeat(topFill))}${border("╮")}`;
-	const body = trimVisualBlankLines(lines).map(
-		(line) => `${border("│")}${padVisible(stripUserZoneMarkers(line).trimEnd(), innerWidth)}${border("│")}`,
+	const borderWidth = Math.max(1, width);
+	const body = trimVisualBlankLines(lines);
+	const rendered = [
+		roundedUserBorder(borderWidth, true, theme, markerText),
+		...body.map((line) => borderedMessageLine(line, borderWidth, theme)),
+		roundedUserBorder(borderWidth, false, theme, markerText),
+	];
+	rendered[0] = OSC133_ZONE_START + rendered[0];
+	rendered[rendered.length - 1] += OSC133_ZONE_END + OSC133_ZONE_FINAL;
+	return [...rendered, ""];
+}
+
+// ── Assistant message paragraphs: cc-tools dotted final/thinking style ─
+
+function cleanPersistedAnsiArtifacts(line: string): string {
+	// Older completion lines were accidentally persisted with ANSI escapes. In some terminals
+	// those escapes come back through markdown as visible fragments like "【38;2;...m".
+	if (!line.includes("✓ ·")) return line;
+	return line.replace(/【(?:\d{1,3};)*\d{1,3}m/g, "").replaceAll("】", "");
+}
+
+function sanitizeRenderedTextBlockLines(lines: string[]): string[] {
+	return trimVisualBlankLines(lines).map((line) =>
+		trimAnsiRight(cleanPersistedAnsiArtifacts(stripBackgroundAnsi(line))),
 	);
-	const bottom = `${border("╰")}${border("─".repeat(innerWidth))}${border("╯")}`;
-	return [`${OSC133_ZONE_START}${top}`, ...body, `${OSC133_ZONE_END}${OSC133_ZONE_FINAL}${bottom}`, ""];
 }
 
-export function frameUserMessage(lines: string[], width: number, theme: CompactTheme, markerText: string): string[] {
-	return frameMessage(lines, width, theme, markerText, "accent", "error");
+function isCompletionLine(line: string): boolean {
+	return /^✓ · .+ · \d/.test(stripAnsi(line).trim());
+}
+
+function muted(text: string): string {
+	return `\x1b[38;5;244m${text}${RESET}`;
 }
 
-export function frameAssistantMessage(
-	lines: string[],
-	width: number,
-	theme: CompactTheme,
-	markerText?: string,
-): string[] {
-	const marker = markerText ?? randomAssistantMessageMarker();
-	return frameMessage(lines, width, theme, marker, "border", "toolTitle");
+export class DottedParagraph {
+	private md: InstanceType<typeof Markdown>;
+	private cachedWidth?: number;
+	private cachedLines?: string[];
+
+	constructor(text: string, markdownTheme: ConstructorParameters<typeof Markdown>[3]) {
+		this.md = new Markdown(text, 0, 0, markdownTheme);
+	}
+
+	invalidate(): void {
+		this.cachedWidth = undefined;
+		this.cachedLines = undefined;
+		this.md.invalidate();
+	}
+
+	render(width: number): string[] {
+		if (this.cachedLines && this.cachedWidth === width) return this.cachedLines;
+		const prefixWidth = 3;
+		if (width <= prefixWidth) {
+			this.cachedWidth = width;
+			this.cachedLines = [" ● "];
+			return this.cachedLines;
+		}
+		const lines = sanitizeRenderedTextBlockLines(this.md.render(width - prefixWidth));
+		let lastCompletionIndex = -1;
+		for (let index = lines.length - 1; index >= 0; index--) {
+			if (isCompletionLine(lines[index] ?? "")) {
+				lastCompletionIndex = index;
+				break;
+			}
+		}
+		let dotPlaced = false;
+		const rendered = lines.flatMap((line, index) => {
+			if (isCompletionLine(line)) {
+				if (index !== lastCompletionIndex) return [];
+				return [`   ${muted(stripAnsi(line).trim())}`];
+			}
+			if (!dotPlaced && stripAnsi(line).trim()) {
+				dotPlaced = true;
+				return [` ● ${line}`];
+			}
+			return [`   ${line}`];
+		});
+		this.cachedWidth = width;
+		this.cachedLines = rendered;
+		return rendered;
+	}
+}
+
+export class ThinkingParagraph {
+	private md: InstanceType<typeof Markdown>;
+	private cachedWidth?: number;
+	private cachedLines?: string[];
+
+	constructor(
+		text: string,
+		markdownTheme: ConstructorParameters<typeof Markdown>[3],
+		defaultTextStyle?: ConstructorParameters<typeof Markdown>[4],
+	) {
+		const fallbackMuted = "\x1b[38;5;244m";
+		const color =
+			typeof defaultTextStyle?.color === "function"
+				? defaultTextStyle.color
+				: (s: string) => `${fallbackMuted}${s}${RESET}`;
+		const italic = "\x1b[3m";
+		const wrap = (s: string) => `${italic}${color(s)}${RESET}`;
+		const plainTheme: ConstructorParameters<typeof Markdown>[3] = {
+			...(markdownTheme as any),
+			heading: wrap,
+			link: wrap,
+			linkUrl: wrap,
+			code: wrap,
+			codeBlock: wrap,
+			codeBlockBorder: wrap,
+			quote: wrap,
+			quoteBorder: wrap,
+			hr: wrap,
+			listBullet: wrap,
+			bold: wrap,
+			italic: wrap,
+			strikethrough: wrap,
+			underline: wrap,
+			highlightCode: (code: string) => code.split("\n").map(wrap),
+		};
+		const plainStyle: ConstructorParameters<typeof Markdown>[4] = { italic: true, color: wrap };
+		this.md = new Markdown(text, 0, 0, plainTheme, plainStyle);
+	}
+
+	invalidate(): void {
+		this.cachedWidth = undefined;
+		this.cachedLines = undefined;
+		this.md.invalidate();
+	}
+
+	render(width: number): string[] {
+		if (this.cachedLines && this.cachedWidth === width) return this.cachedLines;
+		const label = "✻ thinking:";
+		const firstPrefixWidth = visibleWidth(` ${label} `);
+		const continuationPrefixWidth = 3;
+		const prefix = `\x1b[38;5;244m${label}\x1b[0m`;
+		if (width <= firstPrefixWidth) {
+			this.cachedWidth = width;
+			this.cachedLines = [truncateToWidth(` ${prefix} `, width, "")];
+			return this.cachedLines;
+		}
+		const firstLineWidth = Math.max(1, width - firstPrefixWidth);
+		const continuationWidth = Math.max(1, width - continuationPrefixWidth);
+		const sourceLines = sanitizeRenderedTextBlockLines(this.md.render(continuationWidth));
+		let symbolPlaced = false;
+		const rendered: string[] = [];
+		for (const sourceLine of sourceLines) {
+			if (!symbolPlaced && stripAnsi(sourceLine).trim()) {
+				symbolPlaced = true;
+				const first = truncateToWidth(sourceLine, firstLineWidth, "");
+				rendered.push(` ${prefix} ${first}`);
+				continue;
+			}
+			rendered.push(`   ${truncateToWidth(sourceLine, continuationWidth, "")}`);
+		}
+		this.cachedWidth = width;
+		this.cachedLines = rendered;
+		return rendered;
+	}
 }

package/src/patches.ts

@@ -4,19 +4,14 @@ import {
 	ToolExecutionComponent,
 	UserMessageComponent,
 } from "@earendil-works/pi-coding-agent";
+import { Markdown } from "@earendil-works/pi-tui";
 import {
-	ASSISTANT_MESSAGE_MARKER_SYMBOL,
 	ASSISTANT_MESSAGE_PATCH_SYMBOL,
 	TOOL_EXECUTION_PATCH_SYMBOL,
 	USER_MESSAGE_MARKER_SYMBOL,
 	USER_MESSAGE_PATCH_SYMBOL,
 } from "./constants.js";
-import {
-	frameAssistantMessage,
-	frameUserMessage,
-	randomAssistantMessageMarker,
-	randomUserMessageMarker,
-} from "./message-frame.js";
+import { DottedParagraph, frameUserMessage, randomUserMessageMarker, ThinkingParagraph } from "./message-frame.js";
 import { renderCall, renderResult } from "./tool-renderer.js";
 import type { BuiltinTool, BuiltinToolName, CompactTheme } from "./types.js";
 
@@ -104,23 +99,27 @@ export function installMessageRenderers(pi: ExtensionAPI): void {
 	if (
 		assistantProto &&
 		!assistantProto[ASSISTANT_MESSAGE_PATCH_SYMBOL] &&
-		typeof assistantProto.render === "function"
+		typeof assistantProto.updateContent === "function"
 	) {
-		const originalRender = assistantProto.render as (width: number) => string[];
-		assistantProto.render = function compactAssistantMessageRender(this: any, width: number): string[] {
-			const rendered = originalRender.call(this, Math.max(1, width - 3));
-			if (this?.hasToolCalls || rendered.length === 0) return rendered;
-			const frameWidth = Math.max(1, width - 1);
-			if (!this[ASSISTANT_MESSAGE_MARKER_SYMBOL])
-				this[ASSISTANT_MESSAGE_MARKER_SYMBOL] = randomAssistantMessageMarker();
-			return frameAssistantMessage(
-				rendered,
-				frameWidth,
-				activeTheme ?? fallbackTheme(),
-				this[ASSISTANT_MESSAGE_MARKER_SYMBOL],
-			);
+		const originalUpdateContent = assistantProto.updateContent;
+		assistantProto.updateContent = function compactAssistantUpdateContent(this: any, message: any): void {
+			originalUpdateContent.call(this, message);
+			const container = this?.contentContainer;
+			if (!container?.children) return;
+			const markdownTheme = this?.markdownTheme;
+			for (let i = container.children.length - 1; i >= 0; i--) {
+				const child = container.children[i];
+				if (!(child instanceof Markdown)) continue;
+				const markdownChild = child as any;
+				const text = markdownChild.text;
+				if (typeof text !== "string" || text.length === 0) continue;
+				const isThinking = Boolean(markdownChild.defaultTextStyle?.italic);
+				container.children[i] = isThinking
+					? new ThinkingParagraph(text, markdownTheme, markdownChild.defaultTextStyle)
+					: new DottedParagraph(text, markdownTheme);
+			}
 		};
-		assistantProto[ASSISTANT_MESSAGE_PATCH_SYMBOL] = { originalRender };
+		assistantProto[ASSISTANT_MESSAGE_PATCH_SYMBOL] = { originalUpdateContent };
 	}
 
 	pi.on("session_start", (_event, ctx) => {
@@ -134,7 +133,7 @@ export function installMessageRenderers(pi: ExtensionAPI): void {
 		}
 		const assistantState = assistantProto?.[ASSISTANT_MESSAGE_PATCH_SYMBOL];
 		if (assistantState) {
-			assistantProto.render = assistantState.originalRender;
+			assistantProto.updateContent = assistantState.originalUpdateContent;
 			delete assistantProto[ASSISTANT_MESSAGE_PATCH_SYMBOL];
 		}
 		activeTheme = undefined;
@@ -155,6 +154,7 @@ export function registerDelegatingTool(
 		label: name,
 		description: original.description,
 		promptSnippet: (original as any).promptSnippet,
+		promptGuidelines: (original as any).promptGuidelines,
 		parameters: original.parameters as any,
 		renderShell: "self",
 		async execute(id: string, params: unknown, signal?: AbortSignal, onUpdate?: unknown, ctx?: any) {

package/src/path-utils.ts

@@ -0,0 +1,27 @@
+import { existsSync } from "node:fs";
+import { relative, resolve } from "node:path";
+import { oneLine } from "./text.js";
+
+export function pathExists(value: unknown, cwd = process.cwd()): boolean {
+	const path = oneLine(value);
+	if (!path) return false;
+	try {
+		return existsSync(resolve(cwd, path));
+	} catch {
+		return false;
+	}
+}
+
+export function shortenPath(value: unknown, cwd = process.cwd()): string {
+	const path = oneLine(value);
+	if (!path) return "";
+	const home = process.env.HOME;
+	try {
+		const rel = relative(cwd, path);
+		if (rel && !rel.startsWith("..") && !rel.startsWith("/")) return rel;
+		if (rel === "") return ".";
+	} catch {
+		// Keep the original value for malformed path-like strings.
+	}
+	return home && path.startsWith(`${home}/`) ? `~/${path.slice(home.length + 1)}` : path;
+}

package/src/text.test.ts

@@ -0,0 +1,138 @@
+import { describe, expect, it } from "vitest";
+import {
+	cleanToolOutputText,
+	clip,
+	lineCount,
+	oneLine,
+	outputWasTruncated,
+	previewLines,
+	textContent,
+} from "./text.js";
+
+describe("oneLine", () => {
+	it("collapses whitespace", () => {
+		expect(oneLine("hello   world")).toBe("hello world");
+	});
+
+	it("trims edges", () => {
+		expect(oneLine("  hello  ")).toBe("hello");
+	});
+
+	it("handles null and undefined as empty string", () => {
+		expect(oneLine(null)).toBe("");
+		expect(oneLine(undefined)).toBe("");
+	});
+});
+
+describe("clip", () => {
+	it("passes through short text", () => {
+		expect(clip("hello")).toBe("hello");
+	});
+
+	it("truncates long text with ellipsis", () => {
+		expect(clip("a".repeat(150))).toBe(`${"a".repeat(119)}…`);
+	});
+
+	it("respects custom max", () => {
+		expect(clip("hello world", 5)).toBe("hell…");
+	});
+
+	it("handles empty string", () => {
+		expect(clip("")).toBe("");
+	});
+});
+
+describe("lineCount", () => {
+	it("counts lines", () => {
+		expect(lineCount("a\nb\nc")).toBe(3);
+	});
+
+	it("handles CRLF", () => {
+		expect(lineCount("a\r\nb\r\nc")).toBe(3);
+	});
+
+	it("returns 0 for empty", () => {
+		expect(lineCount("")).toBe(0);
+	});
+});
+
+describe("textContent", () => {
+	it("extracts text from content array", () => {
+		const result = {
+			content: [
+				{ type: "text", text: "hello" },
+				{ type: "text", text: "world" },
+			],
+		};
+		expect(textContent(result)).toBe("hello\nworld");
+	});
+
+	it("filters non-text items", () => {
+		const result = {
+			content: [
+				{ type: "text", text: "hello" },
+				{ type: "image", text: "world" },
+			],
+		};
+		expect(textContent(result)).toBe("hello");
+	});
+
+	it("handles missing content", () => {
+		expect(textContent({})).toBe("");
+		expect(textContent(null)).toBe("");
+	});
+
+	it("joins multiple text items", () => {
+		const result = {
+			content: [
+				{ type: "text", text: "line1" },
+				{ type: "text", text: "line2" },
+			],
+		};
+		expect(textContent(result)).toBe("line1\nline2");
+	});
+});
+
+describe("outputWasTruncated", () => {
+	it("detects truncation markers", () => {
+		expect(outputWasTruncated("Output truncated")).toBe(true);
+		expect(outputWasTruncated("Full output saved to: /tmp/out.txt")).toBe(true);
+	});
+
+	it("is case-insensitive", () => {
+		expect(outputWasTruncated("TRUNCATED")).toBe(true);
+	});
+
+	it("returns false for clean output", () => {
+		expect(outputWasTruncated("hello world")).toBe(false);
+	});
+});
+
+describe("cleanToolOutputText", () => {
+	it("removes synthetic exit-code lines from tool output", () => {
+		expect(cleanToolOutputText("hello\nExit code: 0\n")).toBe("hello");
+	});
+});
+
+describe("previewLines", () => {
+	it("takes head lines by default", () => {
+		const lines = "a\nb\nc\nd\ne".split("\n");
+		const text = lines.join("\n");
+		expect(previewLines(text, "head")).toEqual(["a", "b", "c", "d", "e"]);
+	});
+
+	it("takes tail lines when mode is tail", () => {
+		const text = "a\nb\nc\nd\ne";
+		expect(previewLines(text, "tail", 3)).toEqual(["c", "d", "e"]);
+	});
+
+	it("respects limit", () => {
+		const text = "a\nb\nc\nd\ne";
+		expect(previewLines(text, "head", 3)).toEqual(["a", "b", "c"]);
+	});
+
+	it("clips long lines", () => {
+		const text = "a".repeat(200);
+		expect(previewLines(text, "head", 1)[0]!.length).toBeLessThanOrEqual(121);
+	});
+});

package/src/text.ts

@@ -27,6 +27,14 @@ export function outputWasTruncated(text: string): boolean {
 	return /\btruncated\b|Full output saved to:/i.test(text);
 }
 
+export function cleanToolOutputText(text: string): string {
+	return text
+		.split(/\r?\n/)
+		.filter((line) => !/^\s*Exit code:\s*-?\d+\s*$/i.test(line))
+		.join("\n")
+		.replace(/\s+$/g, "");
+}
+
 export function previewLines(text: string, mode: "head" | "tail", limit = MAX_EXPANDED_LINES): string[] {
 	const lines = text.replace(/\s+$/g, "").split(/\r?\n/);
 	const selected = mode === "tail" ? lines.slice(-limit) : lines.slice(0, limit);

package/src/tool-meta.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from "vitest";
+import { callLabel, isSkillPath, purple, summaryFor, toolColor, toolDisplayName, toolIcon } from "./tool-meta.js";
+
+describe("isSkillPath", () => {
+	it("detects .agents/skills paths", () => {
+		expect(isSkillPath(".agents/skills/my-skill/SKILL.md")).toBe(true);
+	});
+
+	it("detects .pi/agent/skills paths", () => {
+		expect(isSkillPath(".pi/agent/skills/my-skill/SKILL.md")).toBe(true);
+	});
+
+	it("returns false for regular paths", () => {
+		expect(isSkillPath("/Users/foo/project/src/index.ts")).toBe(false);
+	});
+
+	it("returns false for non-string inputs", () => {
+		expect(isSkillPath(null)).toBe(false);
+		expect(isSkillPath(undefined)).toBe(false);
+		expect(isSkillPath(123)).toBe(false);
+	});
+});
+
+describe("purple", () => {
+	it("wraps text with ANSI purple codes", () => {
+		const result = purple("hello");
+		expect(result).toContain("hello");
+		expect(result).toContain("\x1b[38;5;141m");
+		expect(result).toContain("\x1b[0m");
+	});
+});
+
+describe("toolColor", () => {
+	it("returns bashMode for bash", () => {
+		expect(toolColor("bash")).toBe("bashMode");
+	});
+
+	it("returns toolTitle for read (non-skill)", () => {
+		expect(toolColor("read", { path: "/tmp/foo.ts" })).toBe("toolTitle");
+	});
+
+	it("returns purple for read (skill file)", () => {
+		expect(toolColor("read", { path: ".agents/skills/my-skill/SKILL.md" })).toBe("purple");
+	});
+
+	it("returns success for grep", () => {
+		expect(toolColor("grep")).toBe("success");
+	});
+
+	it("returns accent for find", () => {
+		expect(toolColor("find")).toBe("accent");
+	});
+
+	it("returns warning for ls", () => {
+		expect(toolColor("ls")).toBe("warning");
+	});
+
+	it("returns toolDiffAdded for edit", () => {
+		expect(toolColor("edit")).toBe("toolDiffAdded");
+	});
+
+	it("returns accent for write", () => {
+		expect(toolColor("write")).toBe("accent");
+	});
+
+	it("returns accent for unknown tools", () => {
+		expect(toolColor("unknown_tool")).toBe("accent");
+	});
+});
+
+describe("toolIcon", () => {
+	it("returns correct icon per tool", () => {
+		expect(toolIcon("bash")).toBe("⚙️");
+		expect(toolIcon("read")).toBe("📖");
+		expect(toolIcon("grep")).toBe("🔎");
+		expect(toolIcon("find")).toBe("🧭");
+		expect(toolIcon("ls")).toBe("📁");
+		expect(toolIcon("edit")).toBe("✏️");
+		expect(toolIcon("write")).toBe("📝");
+	});
+
+	it("returns default icon for unknown tools", () => {
+		expect(toolIcon("unknown")).toBe("🧩");
+	});
+});
+
+describe("toolDisplayName", () => {
+	it("returns polished built-in display names", () => {
+		expect(toolDisplayName("bash")).toBe("Run");
+		expect(toolDisplayName("read")).toBe("Read");
+		expect(toolDisplayName("grep")).toBe("Search");
+		expect(toolDisplayName("find")).toBe("Find");
+		expect(toolDisplayName("ls")).toBe("List");
+		expect(toolDisplayName("edit")).toBe("Edit");
+		expect(toolDisplayName("write", { path: "definitely-new-file-for-display-name.ts" })).toBe("Create");
+	});
+
+	it("falls back to the raw name for unknown tools", () => {
+		expect(toolDisplayName("unknown_tool")).toBe("unknown_tool");
+	});
+});
+
+describe("callLabel", () => {
+	it("returns clipped command for bash", () => {
+		expect(callLabel("bash", { command: "ls -la" })).toBe("ls -la");
+	});
+
+	it("truncates long bash commands", () => {
+		const long = `echo ${"x".repeat(150)}`;
+		const result = callLabel("bash", { command: long });
+		expect(result.length).toBeLessThanOrEqual(143);
+		expect(result.endsWith("…")).toBe(true);
+	});
+
+	it("returns shortened path for read", () => {
+		expect(callLabel("read", { path: `${process.cwd()}/packages/foo.ts` })).toBe("packages/foo.ts");
+	});
+
+	it("formats grep with shortened path", () => {
+		expect(callLabel("grep", { pattern: "TODO", path: `${process.cwd()}/src` })).toBe("TODO in src");
+	});
+
+	it("returns default for grep without path", () => {
+		expect(callLabel("grep", { pattern: "TODO" })).toBe("TODO in .");
+	});
+
+	it("formats find with path", () => {
+		expect(callLabel("find", { path: "/tmp" })).toBe("/tmp");
+	});
+
+	it("formats edit with replacement count", () => {
+		expect(callLabel("edit", { path: "foo.ts", edits: [{}, {}] })).toBe("foo.ts · 2 replacements");
+	});
+
+	it("formats write with bytes", () => {
+		expect(callLabel("write", { path: "foo.ts", content: "hello world" })).toBe("foo.ts · 11 bytes");
+	});
+});
+
+describe("summaryFor", () => {
+	it("formats bash exit code", () => {
+		const result = { content: [{ type: "text", text: "hello\nexit 0" }] };
+		expect(summaryFor("bash", result)).toMatch(/exit 0/);
+	});
+
+	it("shows truncated marker when output was truncated", () => {
+		const result = { content: [{ type: "text", text: "hello\nOutput truncated" }] };
+		expect(summaryFor("bash", result)).toContain("truncated");
+	});
+
+	it("formats read line count", () => {
+		const result = { content: [{ type: "text", text: "line1\nline2\nline3" }] };
+		expect(summaryFor("read", result)).toBe("3 lines");
+	});
+
+	it("formats single line as singular", () => {
+		const result = { content: [{ type: "text", text: "line1" }] };
+		expect(summaryFor("read", result)).toBe("1 line");
+	});
+
+	it("formats ls item count", () => {
+		const result = { content: [{ type: "text", text: "file1\nfile2" }] };
+		expect(summaryFor("ls", result)).toBe("2 items");
+	});
+
+	it("formats edit diff stats", () => {
+		const result = {
+			content: [{ type: "text", text: "done" }],
+			details: { diff: "@@ -1,3 +1,4 @@\n+added1\n+added2\n-removed1\n-removed2" },
+		};
+		expect(summaryFor("edit", result)).toBe("+2 -2");
+	});
+
+	it("falls back to line count for edit without diff", () => {
+		const result = { content: [{ type: "text", text: "a\nb" }] };
+		expect(summaryFor("edit", result)).toBe("2 lines");
+	});
+
+	it("formats write line count", () => {
+		const result = { content: [{ type: "text", text: "line1\nline2" }] };
+		expect(summaryFor("write", result)).toBe("2 lines");
+	});
+
+	it("formats grep result count", () => {
+		const result = { content: [{ type: "text", text: "match1\nmatch2\nmatch3" }] };
+		expect(summaryFor("grep", result)).toBe("3 results");
+	});
+
+	it("formats find result count", () => {
+		const result = { content: [{ type: "text", text: "file1\nfile2\nfile3\nfile4" }] };
+		expect(summaryFor("find", result)).toBe("4 results");
+	});
+
+	it("returns '1 result' for single result", () => {
+		const result = { content: [{ type: "text", text: "only" }] };
+		expect(summaryFor("grep", result)).toBe("1 result");
+	});
+});

package/src/tool-meta.ts

@@ -1,4 +1,5 @@
 import { ANSI_PURPLE, ANSI_RESET } from "./constants.js";
+import { pathExists, shortenPath } from "./path-utils.js";
 import { clip, lineCount, oneLine, outputWasTruncated, textContent } from "./text.js";
 
 // ── Skill path detection ─────────────────────────────────────────
@@ -17,6 +18,7 @@ export function purple(text: string): string {
 type ToolMeta = {
 	color: string | ((args?: any) => string);
 	icon: string;
+	displayName: string | ((args?: any) => string);
 	label: (args: any) => string;
 	summary: (result: any) => string;
 };
@@ -25,6 +27,7 @@ const TOOL_REGISTRY: Record<string, ToolMeta> = {
 	bash: {
 		color: "bashMode",
 		icon: "⚙️",
+		displayName: "Run",
 		label: (args) => clip(oneLine(args?.command), 140),
 		summary: (result) => {
 			const text = textContent(result);
@@ -38,7 +41,8 @@ const TOOL_REGISTRY: Record<string, ToolMeta> = {
 	read: {
 		color: (args) => (isSkillPath(args?.path) ? "purple" : "toolTitle"),
 		icon: "📖",
-		label: (args) => clip(oneLine(args?.path), 140),
+		displayName: "Read",
+		label: (args) => clip(shortenPath(args?.path), 140),
 		summary: (result) => {
 			const text = textContent(result);
 			const lines = lineCount(text);
@@ -49,9 +53,10 @@ const TOOL_REGISTRY: Record<string, ToolMeta> = {
 	grep: {
 		color: "success",
 		icon: "🔎",
+		displayName: "Search",
 		label: (args) => {
 			const pattern = oneLine(args?.pattern);
-			const path = oneLine(args?.path ?? args?.glob ?? ".");
+			const path = shortenPath(args?.path ?? args?.glob ?? ".");
 			return clip(`${pattern}${path ? ` in ${path}` : ""}`, 140);
 		},
 		summary: (result) => {
@@ -64,7 +69,12 @@ const TOOL_REGISTRY: Record<string, ToolMeta> = {
 	find: {
 		color: "accent",
 		icon: "🧭",
-		label: (args) => clip(oneLine(args?.path ?? args?.pattern ?? "."), 140),
+		displayName: "Find",
+		label: (args) => {
+			const pattern = oneLine(args?.pattern);
+			const path = shortenPath(args?.path ?? ".") || ".";
+			return clip(pattern && pattern !== path ? `${pattern} in ${path}` : path, 140);
+		},
 		summary: (result) => {
 			const text = textContent(result);
 			const lines = lineCount(text);
@@ -75,7 +85,8 @@ const TOOL_REGISTRY: Record<string, ToolMeta> = {
 	ls: {
 		color: "warning",
 		icon: "📁",
-		label: (args) => clip(oneLine(args?.path), 140),
+		displayName: "List",
+		label: (args) => clip(shortenPath(args?.path) || ".", 140),
 		summary: (result) => {
 			const text = textContent(result);
 			const lines = lineCount(text);
@@ -86,10 +97,11 @@ const TOOL_REGISTRY: Record<string, ToolMeta> = {
 	edit: {
 		color: "toolDiffAdded",
 		icon: "✏️",
+		displayName: "Edit",
 		label: (args) => {
 			const count = Array.isArray(args?.edits) ? args.edits.length : args?.oldText && args?.newText ? 1 : 0;
 			return clip(
-				`${oneLine(args?.path ?? args?.file_path)}${count ? ` · ${count} replacement${count === 1 ? "" : "s"}` : ""}`,
+				`${shortenPath(args?.path ?? args?.file_path)}${count ? ` · ${count} replacement${count === 1 ? "" : "s"}` : ""}`,
 				140,
 			);
 		},
@@ -110,9 +122,10 @@ const TOOL_REGISTRY: Record<string, ToolMeta> = {
 	write: {
 		color: "accent",
 		icon: "📝",
+		displayName: (args) => (pathExists(args?.path ?? args?.file_path) ? "Write" : "Create"),
 		label: (args) => {
 			const bytes = typeof args?.content === "string" ? Buffer.byteLength(args.content, "utf8") : 0;
-			return clip(`${oneLine(args?.path ?? args?.file_path)}${bytes ? ` · ${bytes} bytes` : ""}`, 140);
+			return clip(`${shortenPath(args?.path ?? args?.file_path)}${bytes ? ` · ${bytes} bytes` : ""}`, 140);
 		},
 		summary: (result) => {
 			const text = textContent(result);
@@ -126,6 +139,7 @@ const TOOL_REGISTRY: Record<string, ToolMeta> = {
 const DEFAULT_META: ToolMeta = {
 	color: "accent",
 	icon: "🧩",
+	displayName: "Tool",
 	label: (args) => {
 		const compactArgs = oneLine(JSON.stringify(args ?? {}));
 		return clip(compactArgs === "{}" ? "" : compactArgs, 140);
@@ -151,6 +165,12 @@ export function toolIcon(toolName: string): string {
 	return getMeta(toolName).icon;
 }
 
+export function toolDisplayName(toolName: string, args?: any): string {
+	const meta = TOOL_REGISTRY[toolName];
+	if (!meta) return toolName;
+	return typeof meta.displayName === "function" ? meta.displayName(args) : meta.displayName;
+}
+
 export function callLabel(toolName: string, args: any): string {
 	return getMeta(toolName).label(args);
 }

package/src/tool-renderer.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { renderResult } from "./tool-renderer.js";
+import type { CompactTheme } from "./types.js";
+
+const theme: CompactTheme = {
+	fg: (_color, text) => text,
+	bold: (text) => text,
+};
+
+function textResult(text: string) {
+	return { content: [{ type: "text", text }] };
+}
+
+describe("renderResult expanded views", () => {
+	it("renders read output with line numbers", () => {
+		const block = renderResult("read", textResult("alpha\nbeta"), { expanded: true }, theme, {
+			args: { path: "file.ts" },
+		});
+		const lines = block.render(80).join("\n");
+		expect(lines).toContain("1 alpha");
+		expect(lines).toContain("2 beta");
+	});
+
+	it("renders ls output with file and folder icons", () => {
+		const block = renderResult("ls", textResult("src/\npackage.json"), { expanded: true }, theme, {
+			args: { path: "." },
+		});
+		const lines = block.render(80).join("\n");
+		expect(lines).toContain("📁 src/");
+		expect(lines).toContain("📄 package.json");
+	});
+
+	it("renders grep output with path and line metadata", () => {
+		const block = renderResult("grep", textResult("src/a.ts:12:const value = 1"), { expanded: true }, theme, {
+			args: { pattern: "value", path: "src" },
+		});
+		const lines = block.render(80).join("\n");
+		expect(lines).toContain("src/a.ts:12:const value = 1");
+	});
+});

package/src/tool-renderer.ts

@@ -1,8 +1,9 @@
 import { keyHint } from "@earendil-works/pi-coding-agent";
+import { BranchToolBlock, EmptyBlock } from "./branch-tool-block.js";
 import { MAX_EXPANDED_LINES } from "./constants.js";
-import { lineCount, previewLines, textContent } from "./text.js";
-import { EmptyBlock, ToolBlock } from "./tool-block.js";
-import { callLabel, purple, summaryFor, toolColor, toolIcon } from "./tool-meta.js";
+import { formatExpandedLines } from "./expanded-lines.js";
+import { cleanToolOutputText, lineCount, previewLines, textContent } from "./text.js";
+import { callLabel, purple, summaryFor, toolColor, toolDisplayName, toolIcon } from "./tool-meta.js";
 import type { CompactTheme, ToolBlockKind } from "./types.js";
 
 // ── Color resolution ─────────────────────────────────────────────
@@ -20,7 +21,7 @@ function makeColorFn(color: string, theme: CompactTheme): (text: string) => stri
 
 function topLine(toolName: string, theme: CompactTheme, label: string, args?: any): string {
 	const color = toolColor(toolName, args);
-	const title = `${toolIcon(toolName)} ${toolName}`;
+	const title = `${toolIcon(toolName)} ${toolDisplayName(toolName, args)}`;
 	const coloredTitle = color === "purple" ? purple(theme.bold(title)) : theme.fg(color, theme.bold(title));
 	return `${coloredTitle} ${theme.fg("toolOutput", label)}`;
 }
@@ -29,6 +30,10 @@ function midLine(_toolName: string, theme: CompactTheme, text: string): string {
 	return theme.fg("toolOutput", text);
 }
 
+function mutedLine(theme: CompactTheme, text: string): string {
+	return theme.fg("muted", text);
+}
+
 function bottomLine(_toolName: string, _theme: CompactTheme, text = ""): string {
 	return text.trimEnd();
 }
@@ -42,9 +47,10 @@ function toolText(
 	theme: CompactTheme,
 	borderColor: string,
 	args?: any,
-): ToolBlock {
+	options?: { pending?: boolean },
+): BranchToolBlock {
 	const color = resolveColor(toolName, args, borderColor);
-	return new ToolBlock(kind, lines, theme, makeColorFn(color, theme));
+	return new BranchToolBlock(kind, lines, theme, makeColorFn(color, theme), options);
 }
 
 // ── Renderers ────────────────────────────────────────────────────
@@ -57,16 +63,23 @@ export function renderResult(toolName: string, result: any, options: any, theme:
 	const args = context?.args;
 
 	if (options?.isPartial) {
+		const partialText = cleanToolOutputText(textContent(result));
+		const mode = toolName === "bash" ? "tail" : "head";
+		const preview = partialText.trim()
+			? previewLines(partialText, mode, 5).map((line) => midLine(toolName, theme, line))
+			: [];
 		return toolText(
 			"full",
 			toolName,
 			[
 				topLine(toolName, theme, callLabel(toolName, args), args),
+				...preview,
 				bottomLine(toolName, theme, theme.fg("muted", "running…")),
 			],
 			theme,
-			"warning",
+			"muted",
 			args,
+			{ pending: true },
 		);
 	}
 
@@ -75,7 +88,7 @@ export function renderResult(toolName: string, result: any, options: any, theme:
 	const failed = Boolean(context?.isError || result?.isError);
 	const statusColor = failed ? "error" : "success";
 	const statusIcon = failed ? "✗" : "✓";
-	const expandHint = options?.expanded ? "" : ` ${theme.fg("dim", keyHint("app.tools.expand", "expand"))}`;
+	const expandHint = options?.expanded ? "" : ` ${keyHint("app.tools.expand", "expand")}`;
 
 	const top = topLine(toolName, theme, callLabel(toolName, args), args);
 	const bottom = bottomLine(
@@ -91,11 +104,10 @@ export function renderResult(toolName: string, result: any, options: any, theme:
 
 	const diff = toolName === "edit" && typeof result?.details?.diff === "string" ? result.details.diff : "";
 	const previewText = diff || text;
-	const mode = toolName === "bash" ? "tail" : "head";
-	const lines = previewLines(previewText, mode).map((line) => midLine(toolName, theme, line));
+	const lines = formatExpandedLines(toolName, previewText, theme, args);
 	if (lineCount(previewText) > MAX_EXPANDED_LINES) {
 		const omitted = lineCount(previewText) - MAX_EXPANDED_LINES;
-		lines.push(midLine(toolName, theme, theme.fg("dim", `… ${omitted} more line(s)`)));
+		lines.push(mutedLine(theme, `… ${omitted} more line(s)`));
 	}
 	lines.unshift(top);
 	lines.push(bottomLine(toolName, theme, `${theme.fg(statusColor, statusIcon)} ${theme.fg("toolOutput", summary)}`));