@quandev104/pi-style 0.1.1 → 0.1.3

package/extension-src/pi-style/pi/index.ts

@@ -1,5 +1,6 @@
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 import type { StatusSnapshot } from "../domain/status.js";
+import { closeActiveBatch } from "../features/tools/boxed/batch.js";
 import { registerPiStyleCommand } from "./commands.js";
 import { type CompatibilityTestHooks, createPiStyleSessionCoordinator } from "./session-coordinator.js";
 import { usageFromSession } from "./session-usage.js";
@@ -10,6 +11,24 @@ function usagePatch(ctx: ExtensionContext): StatusSnapshot {
 	return usage ? { usage } : {};
 }
 
+/**
+ * Add Pi's read-only tools (grep/find/ls) to the active tool set if they are
+ * registered. Preserves any other active tools (e.g. extension tools).
+ * Only calls setActiveTools when something actually changed.
+ */
+function activateReadOnlyTools(pi: ExtensionAPI): void {
+	const available = new Set(pi.getAllTools().map((tool) => tool.name));
+	const active = new Set(pi.getActiveTools());
+	let changed = false;
+	for (const name of ["grep", "find", "ls"] as const) {
+		if (available.has(name) && !active.has(name)) {
+			active.add(name);
+			changed = true;
+		}
+	}
+	if (changed) pi.setActiveTools([...active]);
+}
+
 let compatibilityTestHooks: CompatibilityTestHooks = {};
 export function __setCompatibilityTestHooks(hooks: CompatibilityTestHooks): () => void {
 	const previous = compatibilityTestHooks;
@@ -26,10 +45,10 @@ export default function piStyleExtension(pi: ExtensionAPI): void {
 	// product gate `compatibility.allowCorePatches: false` (or `enabled: false`) in config.
 	for (const [name, description] of [
 		["pi-style-core-patches", "Enable pi-style message/tool core patches"],
-		["pi-style-message-user", "Enable pi-style user message prefix"],
 		["pi-style-message-assistant", "Enable pi-style assistant message prefix"],
 		["pi-style-message-special-blocks", "Enable pi-style boxed compaction/skill/branch/custom message blocks"],
 		["pi-style-tools", "Enable pi-style tool renderer decoration"],
+		["pi-style-readonly-tools", "Enable grep/find/ls read-only tools in the active tool set"],
 	] as const)
 		pi.registerFlag(name, { type: "boolean", description, default: true });
 	// ASCII markers stay opt-in; unicode markers are the default.
@@ -37,6 +56,13 @@ export default function piStyleExtension(pi: ExtensionAPI): void {
 	const coordinator = createPiStyleSessionCoordinator(pi, compatibilityTestHooks);
 	registerPiStyleCommand(pi, coordinator.app);
 	pi.on("session_start", async (event, ctx) => {
+		// Pi only activates read/bash/edit/write by default; grep/find/ls are
+		// registered but inactive (kept out of the model's tool list to keep the
+		// core small). Activate them so the TUI shows them and the model can call
+		// them directly, mirroring Claude Code's glob/grep/read tool set.
+		if (pi.getFlag("pi-style-readonly-tools") === true) {
+			activateReadOnlyTools(pi);
+		}
 		await coordinator.start(event, ctx);
 	});
 	pi.on("agent_start", () => coordinator.app.runtime.current?.dismissStartup());
@@ -54,6 +80,14 @@ export default function piStyleExtension(pi: ExtensionAPI): void {
 	);
 	pi.on("thinking_level_select", (event) => coordinator.app.update({ thinkingLevel: event.level }, "immediate"));
 	pi.on("session_info_changed", (event) => coordinator.app.update({ sessionName: event.name }, "coalesced"));
+	pi.on("message_start", () => {
+		// A new message is a batch boundary: quiet-tool (read/ls/find) calls of the
+		// new message start a fresh batch instead of joining the previous one.
+		closeActiveBatch();
+		// grep/bash tree panels are NOT cleared here: historical panels must keep
+		// their state so Pi re-renders of previous messages (scroll/resume) stay
+		// intact. Only session boundaries reset them (session-coordinator).
+	});
 	pi.on("message_update", () => coordinator.app.update({}, "coalesced"));
 	// Usage (tokens + cost) is aggregated from finalized session entries at
 	// message/turn boundaries, mirroring Pi's native footer; per-chunk updates

package/extension-src/pi-style/pi/session-coordinator.ts

@@ -2,8 +2,12 @@ import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-a
 import { type KeyId, matchesKey } from "@earendil-works/pi-tui";
 import type { ConfigFilePort } from "../app/config-storage.js";
 import { createPiStyleApp, type PiStyleApp } from "../app/index.js";
+import { resolveTheme } from "../domain/theme.js";
 import { setSpecialBlockTheme } from "../features/messages/special-blocks.js";
-import { setToolsRenderConfig } from "../features/tools/boxed/session-config.js";
+import { resetBashTreeRegistry } from "../features/tools/boxed/bash.js";
+import { resetBatchRegistry } from "../features/tools/boxed/batch.js";
+import { resetGrepRegistry } from "../features/tools/boxed/grep.js";
+import { setToolsRenderConfig, type ToolsRenderConfig } from "../features/tools/boxed/session-config.js";
 import { createCompatibilityCoordinator } from "./compatibility-coordinator.js";
 import {
 	type CompatibilityCleanupResult,
@@ -45,6 +49,8 @@ export function createPiStyleSessionCoordinator(pi: ExtensionAPI, hooks: Compati
 	let active = false;
 	let tuiSession = false;
 	let terminalInputUnsubscribe: (() => void) | undefined;
+	let sessionTheme: unknown;
+	let sessionUi: import("@earendil-works/pi-coding-agent").ExtensionUIContext | undefined;
 	const source = createConfigSourceAdapter(
 		pi,
 		filePort,
@@ -68,6 +74,22 @@ export function createPiStyleSessionCoordinator(pi: ExtensionAPI, hooks: Compati
 			),
 		);
 	};
+	/** Render-scoped tool config: line budgets + the resolved open-tree glyph. */
+	const applyToolsRenderConfig = (config: import("../domain/config-types.js").NormalizedPiStyleConfig) => {
+		setToolsRenderConfig({
+			...config.tools,
+			batchOpenGlyph: resolveTheme(sessionTheme as never, config, process.env).glyph("batchOpen"),
+			nerdFonts: resolveTheme(sessionTheme as never, config, process.env).mode === "nerd",
+		} satisfies ToolsRenderConfig);
+	};
+	/**
+	 * Hide Pi's "Thinking..." placeholder label: an empty label renders zero
+	 * lines, so the thinking block leaves no trace while content stays hidden.
+	 * Passing undefined restores the default label.
+	 */
+	const applyMessagesConfig = (config: import("../domain/config-types.js").NormalizedPiStyleConfig) => {
+		sessionUi?.setHiddenThinkingLabel?.(config.messages.hideThinkingLabel ? "" : undefined);
+	};
 	const app: PiStyleApp = createPiStyleApp(
 		undefined,
 		{
@@ -79,6 +101,10 @@ export function createPiStyleSessionCoordinator(pi: ExtensionAPI, hooks: Compati
 		(config) => {
 			productGate = app.productPolicy.corePatchGate;
 			if (!active) return;
+			// Apply render-scoped tool config live so `/pi-style set tools.*` takes
+			// effect immediately (line budgets, dimOutput, open-tree glyph, …).
+			applyToolsRenderConfig(config);
+			applyMessagesConfig(config);
 			if (compatibility.report) {
 				const cleanup = compatibility.dispose();
 				if (!cleanup.complete) {
@@ -100,7 +126,6 @@ export function createPiStyleSessionCoordinator(pi: ExtensionAPI, hooks: Compati
 			authorization = readSessionAuthorization(pi);
 			compatibility.captureAuthorization(
 				authorization.core,
-				authorization.user,
 				authorization.assistant,
 				authorization.specialBlocks,
 				authorization.tools,
@@ -120,6 +145,11 @@ export function createPiStyleSessionCoordinator(pi: ExtensionAPI, hooks: Compati
 			tuiSession = ctx.mode === "tui";
 			app.setProjectTrusted(ctx.isProjectTrusted());
 			source.setSession(cwd, ctx.isProjectTrusted());
+			// Drop any batch state carried over from the previous session (Pi renders
+			// the restored chat between session_shutdown and the next session_start).
+			resetBatchRegistry();
+			resetGrepRegistry();
+			resetBashTreeRegistry();
 			active = false;
 			await app.reload();
 			productGate = app.productPolicy.corePatchGate;
@@ -127,7 +157,10 @@ export function createPiStyleSessionCoordinator(pi: ExtensionAPI, hooks: Compati
 			compatibility.install(app.config, ctx.mode === "tui", productGate);
 			// Session-scoped render configuration for the boxed tool/message surfaces.
 			// Populated once per session (never inside render).
-			setToolsRenderConfig(app.config.tools);
+			sessionTheme = ctx.ui?.theme as never;
+			sessionUi = ctx.ui as import("@earendil-works/pi-coding-agent").ExtensionUIContext | undefined;
+			applyToolsRenderConfig(app.config);
+			applyMessagesConfig(app.config);
 			if (ctx.ui?.theme) setSpecialBlockTheme(ctx.ui.theme as never);
 			const toolDetails = collectToolDetails(pi.getActiveTools?.(), pi.getAllTools?.());
 			app.sessionStart(
@@ -180,8 +213,19 @@ export function createPiStyleSessionCoordinator(pi: ExtensionAPI, hooks: Compati
 			tuiSession = false;
 			terminalInputUnsubscribe?.();
 			terminalInputUnsubscribe = undefined;
+			resetBatchRegistry();
+			resetGrepRegistry();
+			resetBashTreeRegistry();
 			app.sessionShutdown();
-			compatibility.dispose();
+			// Tier C prototype patches stay installed across session switches. Pi renders
+			// the restored chat (renderBeforeBind) AFTER session_shutdown but BEFORE the
+			// next session_start, so disposing here would rebuild the resumed tool and
+			// special-block surfaces with native prototypes and they would never be
+			// re-decorated (their boxed output is derived once at updateDisplay time and
+			// cached; a later frame render does not re-invoke the renderer selectors).
+			// The next start() disposes this report (restoring the native identities)
+			// and reinstalls before any new render. On process exit (reason "quit") the
+			// terminal is torn down immediately after, so retained patches are harmless.
 		},
 	};
 }

package/extension-src/pi-style/shared/ansi.ts

@@ -84,6 +84,9 @@ export function stripAnsi(value: string): string {
 					break;
 				}
 			}
+			// Consume the OSC terminator (BEL, or the ESC\\ already consumed above)
+			// so it is not emitted as a visible character.
+			if (i + 1 < value.length && value.charCodeAt(i + 1) === 7) i++;
 		}
 	}
 	return output;

package/extension-src/pi-style/shared/box.ts

@@ -38,6 +38,8 @@ export interface BoxTheme {
 
 export interface BoxedRenderOptions {
 	widthKey?: string;
+	/** Detail embedded in the top-border title after the tool name (e.g. the path). */
+	headerDetail?: string;
 	isError?: boolean;
 	isPartial?: boolean;
 	isPending?: boolean;
@@ -45,6 +47,14 @@ export interface BoxedRenderOptions {
 	state?: Record<string, unknown>;
 	/** Wall-clock elapsed override (used when metrics are not in result.details). */
 	elapsedMs?: number;
+	/** Width-dependent content lines rendered between the top border and the
+	 *  footer border of a compact box (replaces the blank breathing line).
+	 *  Each returned line is truncated to the box inner width by the renderer.
+	 *  Returns an empty array for no body (blank line preserved). */
+	bodyLines?: (contentWidth: number) => string[];
+	/** Right-side label embedded in the compact box bottom border before the
+	 *  corner (e.g. an expand hint such as `Ctrl+O for more`). */
+	bottomRightLabel?: string;
 }
 
 export function isExpanded(options: { expanded?: boolean } | undefined): boolean {
@@ -131,7 +141,7 @@ export function countWords(text: string): number {
 	return count;
 }
 
-function formatCompactCount(value: number): string {
+export function formatCompactCount(value: number): string {
 	if (value < 1000) return `${Math.round(value)}`;
 	if (value < 10000) return `${(value / 1000).toFixed(1)}k`;
 	if (value < 1000000) return `${Math.round(value / 1000)}k`;
@@ -140,7 +150,7 @@ function formatCompactCount(value: number): string {
 }
 
 export function formatBoxedWords(text: string): string {
-	return `✎ ~${formatCompactCount(countWords(text))} words`;
+	return `~${formatCompactCount(countWords(text))} words`;
 }
 
 export function badge(theme: BoxTheme, label: string): string {
@@ -172,11 +182,15 @@ const BOX_HORIZONTAL = "─";
 const BOX_VERTICAL = "│";
 const BOX_SIDE_PADDING = 2;
 const BOX_MIN_WIDTH = 12;
+const BOX_ROUND_TOP_LEFT = "╭";
+const BOX_ROUND_TOP_RIGHT = "╮";
+const BOX_ROUND_BOTTOM_LEFT = "╰";
+const BOX_ROUND_BOTTOM_RIGHT = "╯";
+const BOX_DIVIDER_LEFT = "├";
+const BOX_DIVIDER_RIGHT = "┤";
+/** Dash run before the right corner when a right-side border label is present. */
+const BOX_LABELED_RIGHT_DASH_MIN = 3;
 const BOX_WIDTH_CACHE = new Map<string, number>();
-const COMPACT_TOOL_NAME_WIDTH = safeVisibleWidth("Search");
-const COMPACT_FOOTER_ELAPSED_WIDTH = 8;
-const COMPACT_FOOTER_EXTRA_WIDTH = 8;
-const COMPACT_FOOTER_WORDS_WIDTH = safeVisibleWidth("✎ ~1.2k words");
 
 export function boxWidth(width: number): number {
 	return Math.max(BOX_MIN_WIDTH, width);
@@ -317,19 +331,22 @@ function formatBoxedStatusIcon(theme: BoxTheme, isError?: boolean): string {
 	return theme.fg(isError ? "error" : "success", icon);
 }
 
-export function formatBoxedToolTitle(theme: BoxTheme, name: string, isError?: boolean): string {
-	const rawTitle = `➔ ${name}`;
-	const coloredTitle = `${colorFromExtra(theme, "bashPromptColor", "bashMode", rawTitle)} ${formatBoxedStatusIcon(theme, isError)}`;
-	const title = typeof theme?.bold === "function" ? theme.bold(coloredTitle) : coloredTitle;
-	return `${title} ${boxText(theme, "|")}`;
+/**
+ * Colored `➔ Name` prefix for tool titles (identity color). The status glyph
+ * (✓/✗) is appended separately by formatBoxedToolTitle.
+ */
+export function formatToolTitlePrefix(theme: BoxTheme, name: string): string {
+	return colorFromExtra(theme, "bashPromptColor", "bashMode", `➔ ${name}`);
 }
 
-function formatCompactBoxedToolTitle(theme: BoxTheme, name: string, isError?: boolean): string {
-	const paddedName = padVisibleRight(name, COMPACT_TOOL_NAME_WIDTH);
-	const rawTitle = `➔ ${paddedName}`;
-	const coloredTitle = `${colorFromExtra(theme, "bashPromptColor", "bashMode", rawTitle)} ${formatBoxedStatusIcon(theme, isError)}`;
-	const title = typeof theme?.bold === "function" ? theme.bold(coloredTitle) : coloredTitle;
-	return `${title} ${boxText(theme, "|")}`;
+export function formatBoxedToolTitle(theme: BoxTheme, name: string, isError?: boolean): string {
+	// On failure the whole title turns error-colored (not just the ✗) so a failed
+	// tool reads instantly; on success the tool keeps its identity color and only
+	// the ✓ carries the success color.
+	const coloredTitle = isError
+		? theme.fg("error", `➔ ${name} ✗`)
+		: `${formatToolTitlePrefix(theme, name)} ${formatBoxedStatusIcon(theme, false)}`;
+	return typeof theme?.bold === "function" ? theme.bold(coloredTitle) : coloredTitle;
 }
 
 function boxText(theme: BoxTheme, text: string): string {
@@ -349,8 +366,92 @@ export function boxBorder(theme: BoxTheme, left: string, right: string, width: n
 	return boxFrameText(theme, `${left}${BOX_HORIZONTAL.repeat(innerWidth)}${right}`);
 }
 
-function padVisibleRight(text: string, width: number): string {
-	return `${text}${" ".repeat(Math.max(0, width - safeVisibleWidth(text)))}`;
+/**
+ * Border line with an optional label embedded after the left corner and an
+ * optional right-side label before the right corner, e.g.:
+ *
+ *   ╭─ ➔ Bash ✓ ────────────╮
+ *   ├─ Response ────────────┤
+ *   ╰─ 0.00s · ~45 words ──── Ctrl+O for more ───╯
+ */
+export function boxLabeledBorder(
+	theme: BoxTheme,
+	start: string,
+	end: string,
+	leftLabel: string,
+	rightLabel: string | undefined,
+	width: number,
+): string {
+	const renderedWidth = boxWidth(width);
+	let left = leftLabel ?? "";
+	const right = rightLabel ?? "";
+	let leftWidth = safeVisibleWidth(left);
+	const rightWidth = safeVisibleWidth(right);
+	const leftOverhead = left ? 3 : 0; // "─ " prefix + " " suffix
+	const rightOverhead = right ? 2 : 0; // " " prefix + " " suffix
+	let rightFill = right ? BOX_LABELED_RIGHT_DASH_MIN : 0;
+	let fill =
+		renderedWidth - start.length - end.length - leftOverhead - leftWidth - rightOverhead - rightWidth - rightFill;
+
+	if (right && fill < 0) {
+		rightFill = 1;
+		fill =
+			renderedWidth - start.length - end.length - leftOverhead - leftWidth - rightOverhead - rightWidth - rightFill;
+	}
+
+	if (fill < 0) {
+		// Too narrow for the labels: truncate the left label, keeping at least one
+		// filler dash so the border stays closed.
+		const reserved =
+			start.length + end.length + leftOverhead + (right ? rightOverhead + rightWidth + rightFill : 0) + 1;
+		const maxLeft = renderedWidth - reserved;
+		left = maxLeft > 0 ? safeTruncateToWidth(left, maxLeft, "…") : "";
+		leftWidth = safeVisibleWidth(left);
+		fill =
+			renderedWidth -
+			start.length -
+			end.length -
+			(left ? leftWidth + leftOverhead : 0) -
+			(right ? rightOverhead + rightWidth + rightFill : 0);
+	}
+
+	// Style each border segment separately. Embedded labels carry their own
+	// foreground escapes that end in \x1b[39m (reset to the terminal default);
+	// applying the border color to the whole line in one wrap would leave every
+	// dash after a label in the default color, making one border render with
+	// mixed brightness.
+	const parts: string[] = [boxFrameText(theme, `${start}${left ? "─ " : ""}`)];
+	if (left) parts.push(left);
+	parts.push(boxFrameText(theme, `${left ? " " : ""}${BOX_HORIZONTAL.repeat(Math.max(0, fill))}`));
+	if (right) {
+		parts.push(boxFrameText(theme, " "), right, boxFrameText(theme, ` ${BOX_HORIZONTAL.repeat(rightFill)}`));
+	}
+	parts.push(boxFrameText(theme, end));
+	return parts.join("");
+}
+
+/** Empty content line used for breathing room inside a box. */
+export function boxBlankLine(theme: BoxTheme, width: number): string {
+	const renderedWidth = boxWidth(width);
+	const contentWidth = boxInnerWidth(renderedWidth);
+	const sidePad = " ".repeat(BOX_SIDE_PADDING);
+	return `${boxFrameText(theme, BOX_VERTICAL)}${sidePad}${" ".repeat(contentWidth)}${sidePad}${boxFrameText(theme, BOX_VERTICAL)}`;
+}
+
+export function boxLineAligned(theme: BoxTheme, left: string, right: string, width: number): string {
+	const renderedWidth = boxWidth(width);
+	const contentWidth = boxInnerWidth(renderedWidth);
+	const rightWidth = safeVisibleWidth(right);
+	const sidePad = " ".repeat(BOX_SIDE_PADDING);
+
+	if (!right || rightWidth >= contentWidth) {
+		return boxLine(theme, right || left, renderedWidth);
+	}
+
+	const maxLeftWidth = Math.max(1, contentWidth - rightWidth - 1);
+	const truncatedLeft = safeTruncateToWidth(left, maxLeftWidth, "…");
+	const gap = " ".repeat(Math.max(1, contentWidth - safeVisibleWidth(truncatedLeft) - rightWidth));
+	return `${boxFrameText(theme, BOX_VERTICAL)}${sidePad}${truncatedLeft}${gap}${right}${sidePad}${boxFrameText(theme, BOX_VERTICAL)}`;
 }
 
 export function boxLineWithRight(theme: BoxTheme, left: string, right: string, width: number): string {
@@ -471,20 +572,30 @@ export function renderBoxedToolCall(
 		render(width: number): string[] {
 			if (cache?.width === width) return cache.lines;
 			const title = formatBoxedToolTitle(theme, toolName, options.isError);
+			const headerLabel = options.headerDetail ? `${title} · ${options.headerDetail}` : title;
 			const renderedWidth = boxWidth(width);
 			const lines = [
-				boxBorder(theme, "┌", "┐", renderedWidth),
-				boxLine(theme, title, renderedWidth),
-				boxInsetDivider(theme, renderedWidth),
+				boxLabeledBorder(theme, BOX_ROUND_TOP_LEFT, BOX_ROUND_TOP_RIGHT, headerLabel, undefined, renderedWidth),
+				boxBlankLine(theme, renderedWidth),
 				...detailLines.flatMap((line) => boxedWrappedLines(theme, line, renderedWidth)),
 			];
 			if (options.isPending) {
 				const pendingText = options.pendingText ?? "Waiting for output…";
 				lines.push(
-					boxInsetDivider(theme, renderedWidth),
-					...boxedWrappedLines(theme, `${theme.fg("muted", "…")} ${theme.fg("dim", pendingText)}`, renderedWidth),
-					boxBorder(theme, "└", "┘", renderedWidth),
+					boxBlankLine(theme, renderedWidth),
+					boxLabeledBorder(
+						theme,
+						BOX_ROUND_BOTTOM_LEFT,
+						BOX_ROUND_BOTTOM_RIGHT,
+						theme.fg("dim", `… ${pendingText}`),
+						undefined,
+						renderedWidth,
+					),
 				);
+			} else {
+				// Leave the box open with trailing breathing room; the result renderer
+				// continues it with the Response divider.
+				lines.push(boxBlankLine(theme, renderedWidth));
 			}
 			cache = { width, lines };
 			return lines;
@@ -513,27 +624,45 @@ export function renderCompactBoxedToolCall(
 		invalidate() {},
 		render(width: number): string[] {
 			const renderedWidth = boxWidth(width);
-			const title = `${formatCompactBoxedToolTitle(theme, toolName, options.isError)} ${detailLine}`;
+			const title = formatBoxedToolTitle(theme, toolName, options.isError);
+			const headerLabel = detailLine ? `${title} · ${detailLine}` : title;
 			const compactFooter =
 				typeof options.state?.[COMPACT_FOOTER_KEY] === "string" ? options.state[COMPACT_FOOTER_KEY] : "";
 			const _footerIsError = Boolean(options.state?.[COMPACT_FOOTER_ERROR_KEY]);
 			const _footerIsPartial = Boolean(options.state?.[COMPACT_FOOTER_PARTIAL_KEY]);
+			const bodyLines = options.bodyLines ? options.bodyLines(boxInnerWidth(renderedWidth)) : [];
+			const lines = [
+				boxLabeledBorder(theme, BOX_ROUND_TOP_LEFT, BOX_ROUND_TOP_RIGHT, headerLabel, undefined, renderedWidth),
+				...(bodyLines.length > 0
+					? bodyLines.map((line) => boxLine(theme, line, renderedWidth))
+					: [boxBlankLine(theme, renderedWidth)]),
+			];
 			if (compactFooter) {
-				return [
-					boxBorder(theme, "┌", "┐", renderedWidth),
-					boxLineWithRight(theme, title, compactFooter, renderedWidth),
-					boxBorder(theme, "└", "┘", renderedWidth),
-				];
-			}
-
-			const lines = [boxBorder(theme, "┌", "┐", renderedWidth), boxLine(theme, title, renderedWidth)];
-			if (options.isPending) {
+				lines.push(
+					boxLabeledBorder(
+						theme,
+						BOX_ROUND_BOTTOM_LEFT,
+						BOX_ROUND_BOTTOM_RIGHT,
+						compactFooter,
+						options.bottomRightLabel,
+						renderedWidth,
+					),
+				);
+			} else if (options.isPending) {
 				const pendingText = options.pendingText ?? "Waiting for output…";
 				lines.push(
-					boxInsetDivider(theme, renderedWidth),
-					...boxedWrappedLines(theme, `${theme.fg("muted", "…")} ${theme.fg("dim", pendingText)}`, renderedWidth),
-					boxBorder(theme, "└", "┘", renderedWidth),
+					boxLabeledBorder(
+						theme,
+						BOX_ROUND_BOTTOM_LEFT,
+						BOX_ROUND_BOTTOM_RIGHT,
+						theme.fg("dim", `… ${pendingText}`),
+						options.bottomRightLabel,
+						renderedWidth,
+					),
 				);
+			} else {
+				// No footer yet (transient, or the result opens the Response divider):
+				// leave the box open so the result renderer continues the same box.
 			}
 			return lines;
 		},
@@ -552,6 +681,12 @@ export function renderBoxedToolResult(
 		widthKey?: string;
 		referenceLines?: string[];
 		renderLineBudget?: number;
+		/** Left-side label embedded in the divider between the call and the result. May be a function of the box width (e.g. for width-dependent layout labels). */
+		dividerLabel?: string | ((width: number) => string);
+		/** Right-side label embedded in the divider between the call and the result. */
+		dividerRightLabel?: string;
+		/** Right-side label embedded in the bottom border (e.g. the expand hint). */
+		expandHint?: string;
 		isError?: boolean;
 		isPartial?: boolean;
 	} = {},
@@ -572,16 +707,31 @@ export function renderBoxedToolResult(
 				bodyLines.length > 0
 					? [...errorPrefix, ...bodyLines]
 					: [theme.fg("muted", `∅ ${options.emptyText ?? "(no output)"}`)];
-			const footerLines = options.footerLines ?? [];
-			const renderedFooterLines =
-				footerLines.length > 0
-					? [boxInsetDivider(theme, renderedWidth), ...footerLines.map((line) => boxLine(theme, line, renderedWidth))]
-					: [];
+			const footerText = (options.footerLines ?? []).join(" · ");
+			const dividerText =
+				typeof options.dividerLabel === "function"
+					? options.dividerLabel(renderedWidth)
+					: (options.dividerLabel ?? "Response");
 			const rendered = [
-				boxInsetDivider(theme, renderedWidth),
+				boxLabeledBorder(
+					theme,
+					BOX_DIVIDER_LEFT,
+					BOX_DIVIDER_RIGHT,
+					theme.fg("dim", dividerText),
+					options.dividerRightLabel ? theme.fg("dim", options.dividerRightLabel) : undefined,
+					renderedWidth,
+				),
+				boxBlankLine(theme, renderedWidth),
 				...renderBoxedOutputLines(theme, outputLines, renderedWidth, options.renderLineBudget ?? outputLines.length),
-				...renderedFooterLines,
-				boxBorder(theme, "└", "┘", renderedWidth),
+				boxBlankLine(theme, renderedWidth),
+				boxLabeledBorder(
+					theme,
+					BOX_ROUND_BOTTOM_LEFT,
+					BOX_ROUND_BOTTOM_RIGHT,
+					footerText,
+					options.expandHint ? theme.fg("dim", options.expandHint) : undefined,
+					renderedWidth,
+				),
 			];
 			cache = { width, lines: rendered };
 			return rendered;
@@ -600,36 +750,21 @@ export function formatBoxedFooterFromValues(
 	elapsedMs: number | undefined,
 	output: string,
 	extraParts: string[] = [],
-	fixedColumns = false,
 ): string {
 	const wall = elapsedMs === undefined ? "--" : `${(elapsedMs / 1000).toFixed(2)}s`;
-	const elapsedPart = `${theme.fg("text", "◷")} ${theme.fg("dim", wall)}`;
+	const elapsedPart = theme.fg("text", wall);
 	const extraPartList = extraParts.filter(Boolean).map((part) => theme.fg("dim", part));
 	const wordsPart = theme.fg("dim", formatBoxedWords(output));
-	const parts = fixedColumns
-		? [
-				padVisibleRight(elapsedPart, COMPACT_FOOTER_ELAPSED_WIDTH),
-				...extraPartList.map((part) => padVisibleRight(part, COMPACT_FOOTER_EXTRA_WIDTH)),
-				padVisibleRight(wordsPart, COMPACT_FOOTER_WORDS_WIDTH),
-			]
-		: [elapsedPart, ...extraPartList, wordsPart];
-	return parts.join(theme.fg("dim", " · "));
+	return [elapsedPart, ...extraPartList, wordsPart].join(theme.fg("dim", " · "));
 }
 
 function formatBoxedFooterParts(
 	theme: BoxTheme,
 	result: MetricResultLike | undefined,
 	extraParts: string[] = [],
-	fixedColumns = false,
 	elapsedMs?: number,
 ): string {
-	return formatBoxedFooterFromValues(
-		theme,
-		elapsedMs ?? getElapsedMs(result),
-		getTextOutput(result),
-		extraParts,
-		fixedColumns,
-	);
+	return formatBoxedFooterFromValues(theme, elapsedMs ?? getElapsedMs(result), getTextOutput(result), extraParts);
 }
 
 export function formatBoxedFooter(
@@ -638,7 +773,7 @@ export function formatBoxedFooter(
 	extraParts: string[] = [],
 	elapsedMs?: number,
 ): string {
-	return formatBoxedFooterParts(theme, result, extraParts, false, elapsedMs);
+	return formatBoxedFooterParts(theme, result, extraParts, elapsedMs);
 }
 
 export function renderCompactBoxedFooter(
@@ -647,7 +782,7 @@ export function renderCompactBoxedFooter(
 	options: BoxedRenderOptions = {},
 ): Component {
 	if (options.state && typeof options.state === "object") {
-		options.state[COMPACT_FOOTER_KEY] = formatBoxedFooterParts(theme, result, [], true, options.elapsedMs);
+		options.state[COMPACT_FOOTER_KEY] = formatBoxedFooterParts(theme, result, [], options.elapsedMs);
 		options.state[COMPACT_FOOTER_ERROR_KEY] = Boolean(options.isError);
 		options.state[COMPACT_FOOTER_PARTIAL_KEY] = Boolean(options.isPartial);
 		return { invalidate() {}, render: () => [] };
@@ -658,8 +793,14 @@ export function renderCompactBoxedFooter(
 		render(width: number): string[] {
 			const renderedWidth = boxWidth(width);
 			return [
-				boxLine(theme, formatBoxedFooterParts(theme, result, [], false, options.elapsedMs), renderedWidth),
-				boxBorder(theme, "└", "┘", renderedWidth),
+				boxLabeledBorder(
+					theme,
+					BOX_ROUND_BOTTOM_LEFT,
+					BOX_ROUND_BOTTOM_RIGHT,
+					formatBoxedFooterParts(theme, result, [], options.elapsedMs),
+					undefined,
+					renderedWidth,
+				),
 			];
 		},
 	};
@@ -731,7 +872,7 @@ export function formatToolOutputLine(
 	return theme.fg(color, line);
 }
 
-function selectRenderLines(text: string, maxLines: number, tail = false): { lines: string[]; omitted: number } {
+export function selectRenderLines(text: string, maxLines: number, tail = false): { lines: string[]; omitted: number } {
 	const source = text ?? "";
 	if (!source) return { lines: [], omitted: 0 };
 	const limit = Math.max(0, maxLines);