@quandev104/pi-style 0.2.7 → 0.2.10

package/extension-src/pi-style/features/messages/special-blocks.ts

@@ -46,13 +46,12 @@ interface MessageBlockInstance {
 	expanded?: unknown;
 	_expanded?: unknown;
 	markdownTheme?: unknown;
-	box?: { clear(): void; addChild(child: unknown): void; setBgFn?(fn: (text: string) => string): void };
+	box?: { clear(): void; addChild(child: unknown): void };
 	customComponent?: unknown;
 	customRenderer?: unknown;
 	clear?(): void;
 	addChild(child: unknown): void;
 	removeChild(child: unknown): void;
-	setBgFn?(fn: (text: string) => string): void;
 }
 
 const EXPAND_HINT = "Ctrl+O to expand";
@@ -77,16 +76,6 @@ function createMarkdownBody(
 	return (contentWidth: number) => md.render(contentWidth);
 }
 
-/**
- * Neutralize the native customMessageBg fill for boxed blocks: the boxed block
- * owns its visual boundary, so the parent background is removed (the box sits
- * directly on the terminal/page background).
- */
-function neutralizeMessageBlockBackground(target: { setBgFn?(fn: (text: string) => string): void } | undefined): void {
-	if (!target) return;
-	if (typeof target.setBgFn === "function") target.setBgFn((text) => text);
-}
-
 function patchCompaction(instance: MessageBlockInstance, _original: () => void, theme: BoxTheme): boolean {
 	const tokensBefore = instance.message?.tokensBefore;
 	if (tokensBefore == null) return false;
@@ -97,12 +86,9 @@ function patchCompaction(instance: MessageBlockInstance, _original: () => void,
 	const summary = typeof instance.message?.summary === "string" ? instance.message.summary : "";
 	const markdownTheme = instance.markdownTheme as MarkdownTheme | undefined;
 
-	neutralizeMessageBlockBackground(instance as { setBgFn?(fn: (text: string) => string): void });
-
 	const body = expanded && summary && markdownTheme ? createMarkdownBody(summary, markdownTheme, theme) : () => [];
 
 	const tokenStr = Number(tokensBefore).toLocaleString();
-	neutralizeMessageBlockBackground(instance as { setBgFn?(fn: (text: string) => string): void });
 	const block = renderBoxedMessageBlock(theme, {
 		kind: "Compaction",
 		title: `${tokenStr} tokens`,
@@ -125,8 +111,6 @@ function patchSkill(instance: MessageBlockInstance, _original: () => void, theme
 	const content = typeof instance.skillBlock?.content === "string" ? instance.skillBlock.content : "";
 	const markdownTheme = instance.markdownTheme as MarkdownTheme | undefined;
 
-	neutralizeMessageBlockBackground(instance as { setBgFn?(fn: (text: string) => string): void });
-
 	const body = expanded && content && markdownTheme ? createMarkdownBody(content, markdownTheme, theme) : () => [];
 
 	const block = renderBoxedMessageBlock(theme, {
@@ -150,8 +134,6 @@ function patchBranch(instance: MessageBlockInstance, _original: () => void, them
 	const summary = typeof instance.message?.summary === "string" ? instance.message.summary : "";
 	const markdownTheme = instance.markdownTheme as MarkdownTheme | undefined;
 
-	neutralizeMessageBlockBackground(instance as { setBgFn?(fn: (text: string) => string): void });
-
 	const body = expanded && summary && markdownTheme ? createMarkdownBody(summary, markdownTheme, theme) : () => [];
 
 	const block = renderBoxedMessageBlock(theme, {
@@ -185,9 +167,7 @@ function patchCustomMessage(instance: MessageBlockInstance, _original: () => voi
 	}
 	if (instance.box) instance.removeChild(instance.box);
 
-	// The boxed shell owns its boundary; drop the native customMessageBg fill.
-	neutralizeMessageBlockBackground(instance.box);
-	neutralizeMessageBlockBackground(instance as { setBgFn?(fn: (text: string) => string): void });
+	// The boxed shell owns its boundary; the native customMessageBg fill stays.
 
 	const rawCustomType = instance.message?.customType;
 	const customType = typeof rawCustomType === "string" ? rawCustomType : "Custom";

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

@@ -2,8 +2,9 @@ import type { Component, OverlayHandle, OverlayOptions } from "@earendil-works/p
 import type { NormalizedPiStyleConfig } from "../../domain/config-types.js";
 import type { StatusSnapshot } from "../../domain/status.js";
 import { type ActiveTheme, type ResolvedTheme, resolveTheme } from "../../domain/theme.js";
-import { fitAnsiWidth, truncateAnsi, visibleWidth } from "../../shared/ansi.js";
-import { compactLogoHeader } from "./logo.js";
+import { fitAnsiWidth, fitAnsiWidthTail, truncateAnsi, visibleWidth } from "../../shared/ansi.js";
+import { shortenPath } from "../../shared/box.js";
+import { compactLogoHeader, logoDetailWidth } from "./logo.js";
 
 export type StartupReason = "startup" | "reload" | "new" | "resume" | "fork";
 
@@ -302,6 +303,16 @@ const STARTUP_PADDING_TOP = 2;
 /** Blank rows below the block, separating it from the editor / chat. */
 const STARTUP_PADDING_BOTTOM = 2;
 
+/**
+ * Startup heading title: the working directory of the session (home-contracted
+ * to `~`) — i.e. the path of the repo currently being worked in. Falls back to
+ * the directory basename, then the brand, when the runtime reports no cwd.
+ */
+function startupProjectTitle(snapshot: StartupSnapshot): string {
+	if (snapshot.cwd) return shortenPath(snapshot.cwd);
+	return snapshot.project ?? "pi-style";
+}
+
 function styledLines(
 	theme: ActiveTheme,
 	config: NormalizedPiStyleConfig,
@@ -319,13 +330,22 @@ function styledLines(
 	// Breathing room above the block (separates it from the status line / terminal top).
 	lines.push(...Array.from({ length: STARTUP_PADDING_TOP }, () => ""));
 
-	const logoTitle = resolved.mode === "ascii" ? "pi-style" : `${resolved.glyph("pi")} pi-style`;
+	// Heading: the π glyph followed by the current project path (never the
+	// package name — the heading identifies WHERE you are, not what styles it).
+	// The path is tail-fitted so the repo name survives narrow terminals.
+	const asciiMode = resolved.mode === "ascii";
+	const glyph = resolved.glyph("pi");
+	const projectTitle = startupProjectTitle(snapshot);
+	const titleBudget = Math.max(0, logoDetailWidth(bodyWidth) - (asciiMode ? 0 : visibleWidth(glyph) + 1));
+	const fittedTitle = fitAnsiWidthTail(projectTitle, titleBudget, asciiMode ? "..." : "…");
+	const logoTitle = asciiMode ? fittedTitle : `${glyph} ${fittedTitle}`;
 	lines.push(
 		...compactLogoHeader(
 			resolved,
 			[
 				resolved.apply("accent", logoTitle),
-				resolved.apply("muted", "/ commands · ! bash"),
+				resolved.apply("muted", "/ commands"),
+				resolved.apply("muted", "! bash"),
 				resolved.apply("success", "● ready"),
 			],
 			bodyWidth,

package/extension-src/pi-style/features/startup/logo.ts

@@ -9,15 +9,14 @@ import { fitAnsiWidth, parseAnsiFgToRgb, visibleWidth } from "../../shared/ansi.
  */
 
 export const PI_LOGO_LINES = [
-	"████████████╗",
-	"████████████║",
-	"████╔═══████║",
-	"████║   ████║",
-	"████████╬═══████╗",
-	"████████║   ████║ ",
-	"████╔═══╝   ████║",
-	"████║       ████║",
-	"╚═══╝       ╚═══╝",
+	"████████████",
+	"████████████",
+	"████    ████",
+	"████    ████",
+	"████████    ████",
+	"████████    ████",
+	"████        ████",
+	"████        ████",
 ] as const;
 
 const LOGO_PALETTE_STEPS = 24;
@@ -117,20 +116,25 @@ export function styledLogoLines(resolved: ResolvedTheme): string[] {
 	return logoGradientCacheLines;
 }
 
+/** Width of the side-detail column next to the block-art logo at a given content width. */
+export function logoDetailWidth(width: number): number {
+	const logoWidth = Math.max(...PI_LOGO_LINES.map((line) => visibleWidth(line)));
+	return Math.max(0, width - logoWidth - visibleWidth(LOGO_GAP));
+}
+
 /**
  * Assemble the compact startup header: gradient logo with side details when
  * wide enough, stacked logo + details next, and a minimal title/status pair
- * for very narrow terminals. Every returned line fits within `width`.
+ * for very narrow terminals. `details` is a column of detail rows — the first
+ * is the title, the last is the status, and the rows between are hints — each
+ * rendered on its own line, vertically centered beside the logo. Every
+ * returned line fits within `width`.
  */
-export function compactLogoHeader(
-	resolved: ResolvedTheme,
-	details: readonly [title: string, hints: string, status: string],
-	width: number,
-): string[] {
+export function compactLogoHeader(resolved: ResolvedTheme, details: readonly string[], width: number): string[] {
 	const logoLines = styledLogoLines(resolved);
-	const logoWidth = Math.max(...PI_LOGO_LINES.map((line) => visibleWidth(line)));
 	const safeWidth = Math.max(1, width);
-	const detailWidth = safeWidth - logoWidth - visibleWidth(LOGO_GAP);
+	const logoWidth = Math.max(...PI_LOGO_LINES.map((line) => visibleWidth(line)));
+	const detailWidth = logoDetailWidth(safeWidth);
 
 	if (detailWidth >= LOGO_SIDE_DETAIL_MIN_WIDTH) {
 		const detailStartRow = Math.max(0, Math.floor((PI_LOGO_LINES.length - details.length) / 2));
@@ -147,5 +151,5 @@ export function compactLogoHeader(
 		return [...logoLines, ...details.map((detail) => fitAnsiWidth(detail, safeWidth))];
 	}
 
-	return [details[0], details[2]].map((detail) => fitAnsiWidth(detail, safeWidth));
+	return [details[0] ?? "", details[details.length - 1] ?? ""].map((detail) => fitAnsiWidth(detail, safeWidth));
 }

package/extension-src/pi-style/features/tools/bash-execution.ts

@@ -13,6 +13,7 @@
 
 import type { BoxTheme } from "../../shared/box.js";
 import {
+	applyBgTint,
 	boxBlankLine,
 	boxInnerWidth,
 	boxLabeledBorder,
@@ -102,21 +103,36 @@ export function renderBashExecutionBox(instance: unknown, args: unknown[]): stri
 		const cacheKey = `${themeCacheKey(theme)}|${width}|${host.status}|${host.exitCode ?? ""}|${host.command}`;
 		if (host.status !== "running" && host.piStyleRenderCache?.key === cacheKey) return host.piStyleRenderCache.lines;
 		const inner = boxInnerWidth(renderedWidth);
+		// The box owns its status tint (box ⇒ background) and, on failure, its
+		// frame color; the leading spacer line sits outside the frame and stays
+		// transparent.
+		const frameColor = host.status === "error" ? "error" : host.status === "cancelled" ? "warning" : undefined;
+		const bgName =
+			host.status === "running" ? "toolPendingBg" : host.status === "complete" ? "toolSuccessBg" : "toolErrorBg"; // error | cancelled
 		// The native Text children render one leading padding space per line;
 		// drop it so boxLine's own side padding produces symmetric borders.
 		const wrapped = content
 			.render(inner)
-			.map((line) => boxLine(theme, line.startsWith(" ") ? line.slice(1) : line, renderedWidth));
-		const lines = [
+			.map((line) => boxLine(theme, line.startsWith(" ") ? line.slice(1) : line, renderedWidth, frameColor));
+		const [spacer, ...boxLines] = [
 			"",
-			boxLabeledBorder(theme, TOP_LEFT, TOP_RIGHT, bashBoxTitle(theme, host), undefined, renderedWidth),
-			boxBlankLine(theme, renderedWidth),
+			boxLabeledBorder(theme, TOP_LEFT, TOP_RIGHT, bashBoxTitle(theme, host), undefined, renderedWidth, frameColor),
+			boxBlankLine(theme, renderedWidth, frameColor),
 			...wrapped,
-			boxBlankLine(theme, renderedWidth),
-			boxLabeledBorder(theme, BOTTOM_LEFT, BOTTOM_RIGHT, bashBoxFooter(theme, host), undefined, renderedWidth),
+			boxBlankLine(theme, renderedWidth, frameColor),
+			boxLabeledBorder(
+				theme,
+				BOTTOM_LEFT,
+				BOTTOM_RIGHT,
+				bashBoxFooter(theme, host),
+				undefined,
+				renderedWidth,
+				frameColor,
+			),
 		];
-		if (host.status !== "running") host.piStyleRenderCache = { key: cacheKey, lines };
-		return lines;
+		const tinted = [spacer ?? "", ...applyBgTint(theme, bgName, boxLines)];
+		if (host.status !== "running") host.piStyleRenderCache = { key: cacheKey, lines: tinted };
+		return tinted;
 	} catch {
 		return undefined;
 	}

package/extension-src/pi-style/features/tools/boxed/edit.ts

@@ -23,11 +23,14 @@ import { isResultSeen } from "./session-config.js";
 import {
 	type BoxedToolContext,
 	type BoxedToolDefinition,
+	clearDiffHeaderStats,
+	diffHeaderStatsSuffix,
 	displayPath,
 	getRenderCacheKey,
 	memoizedStateComponent,
 	noteBoxedCallState,
 	noteBoxedResultPhase,
+	noteDiffHeaderStats,
 	noteExecutionStart,
 	resultFooterLines,
 	stateElapsedMs,
@@ -46,36 +49,28 @@ const EMPTY_EDIT_RESULT: Component = Object.freeze({
 
 type EditResultDetails = { diff?: string; path?: string } | undefined;
 
-/** `Diff · +3 -0` divider label. */
-function diffDividerLabel(theme: BoxTheme, stats: { additions: number; removals: number }): string {
-	const plus = stats.additions > 0 ? theme.fg("toolDiffAdded", `+${stats.additions}`) : theme.fg("dim", "+0");
-	const minus = stats.removals > 0 ? theme.fg("toolDiffRemoved", `-${stats.removals}`) : theme.fg("dim", "-0");
-	return `Diff · ${plus} ${minus}`;
-}
-
-/** Edit footer: `1 file · +3 -0`, prefixed with elapsed time when known. */
+/** Edit footer: elapsed time only. The diff stats live in the box header and
+ *  a single edited file is implied, so neither repeats in the footer. */
 function editDiffFooter(
 	theme: BoxTheme,
 	result: { content?: readonly unknown[]; details?: unknown },
 	context: BoxedToolContext,
-	stats: { additions: number; removals: number },
 ): string {
 	const elapsedMs = getElapsedMs(result) ?? stateElapsedMs(context);
-	const parts: string[] = [];
-	if (elapsedMs !== undefined) parts.push(theme.fg("text", formatElapsedMs(elapsedMs)));
-	const plus = stats.additions > 0 ? theme.fg("toolDiffAdded", `+${stats.additions}`) : theme.fg("dim", "+0");
-	const minus = stats.removals > 0 ? theme.fg("toolDiffRemoved", `-${stats.removals}`) : theme.fg("dim", "-0");
-	parts.push(theme.fg("dim", "1 file"), `${plus} ${minus}`);
-	return parts.join(theme.fg("dim", " · "));
+	return elapsedMs === undefined ? "" : theme.fg("text", formatElapsedMs(elapsedMs));
 }
 
 export const editTool: BoxedToolDefinition = {
 	call(args, theme, context) {
 		noteExecutionStart(context);
 		noteBoxedCallState(context);
-		const detail = displayPath(String(args?.path ?? args?.file_path ?? ""), context);
+		const path = displayPath(String(args?.path ?? args?.file_path ?? ""), context);
 		return renderBoxedToolCall(theme, "Edit", [], {
-			headerDetail: detail,
+			// Lazy: the settled result publishes diff stats into the shared renderer
+			// state, and this function resolves at render time — so the header picks
+			// up `· +N -M` on the same paint the diff body appears (the write footer
+			// uses the same state-sharing contract).
+			headerDetail: () => `${path}${diffHeaderStatsSuffix(theme, context)}`,
 			isError: Boolean(context.isError),
 			isPartial: Boolean(context.isPartial),
 			isPending: Boolean(context.isPartial),
@@ -98,6 +93,7 @@ export const editTool: BoxedToolDefinition = {
 
 		// Handle errors
 		if (context.isError) {
+			clearDiffHeaderStats(context);
 			const output = getTextOutput(result);
 			return renderBoxedToolResult(theme, () => [theme.fg("error", stripAnsi(output).trim() || "Error")], {
 				footerLines: resultFooterLines(theme, result, context),
@@ -110,6 +106,7 @@ export const editTool: BoxedToolDefinition = {
 		const diff = details?.diff as string | undefined;
 
 		if (!diff) {
+			clearDiffHeaderStats(context);
 			const output = stripAnsi(getTextOutput(result)).trim();
 			const fallback = `↳ ${output || "Edit applied"}`;
 			return renderBoxedToolResult(theme, () => [theme.fg("dim", fallback)], {
@@ -122,21 +119,16 @@ export const editTool: BoxedToolDefinition = {
 		const argPath = String(context?.args?.path ?? context?.args?.file_path ?? "");
 		const sourcePath = details?.path ?? (argPath || extractEditedPath(message));
 		const expanded = options.expanded;
-		// Stats feed the footer, which is part of the cache key (cheap line scan —
-		// unlike the row/component construction below, which must not run on hits).
+		// Stats feed the header slot and the cache key (cheap line scan — unlike
+		// the row/component construction below, which must not run on hits).
 		const stats = countDiffStats(diff);
+		noteDiffHeaderStats(context, stats);
+		const footer = editDiffFooter(theme, result, context);
 
 		return memoizedStateComponent(
 			context.state,
 			"__piStyleEditDiffResult",
-			getRenderCacheKey(
-				"edit-diff-result",
-				theme,
-				Boolean(expanded),
-				diff,
-				sourcePath ?? "",
-				editDiffFooter(theme, result, context, stats),
-			),
+			getRenderCacheKey("edit-diff-result", theme, Boolean(expanded), diff, sourcePath ?? "", footer),
 			() => {
 				// Expensive construction (buildSplitRows + AdaptiveDiffComponent,
 				// ~0.4ms for a 160-row diff) runs only on cache misses, never per
@@ -162,9 +154,12 @@ export const editTool: BoxedToolDefinition = {
 						},
 					},
 					{
-						dividerLabel: diffDividerLabel(theme, stats),
-						...(expandHint ? { dividerRightLabel: expandHint } : {}),
-						footerLines: [editDiffFooter(theme, result, context, stats)],
+						// Stats live in the box header (`➔ Edit ✓ · path · +N -M`), so no
+						// `Diff` divider: the body continues the open call box directly.
+						showDivider: false,
+						skipLeadingBlank: true,
+						...(expandHint ? { expandHint } : {}),
+						footerLines: footer ? [footer] : [],
 					},
 				);
 			},

package/extension-src/pi-style/features/tools/boxed/git.ts

@@ -1840,21 +1840,24 @@ export function renderGitCardLines(
 // `renderBoxedToolResult` + the same `AdaptiveDiffComponent` `Edit` uses — no
 // second diff visual language (ADR 0005 / GIT-002). The Git header lives
 // outside the box (the call panel card); each file gets its own `╭…╰` frame
-// with a `Diff · +N -M` divider and a `Ctrl+O more` expand hint when collapsed.
+// whose top border carries `path · +N -M` (no divider — the stats live in the
+// header, exactly like `Edit`), with a `Ctrl+O more` expand hint on the bottom
+// border when collapsed.
 
 const GIT_DIFF_MAX_HIGHLIGHT_CHARS = 12000;
 const GIT_DIFF_MAX_HIGHLIGHT_ROWS = 120;
 const GIT_DIFF_MAX_ROWS_COLLAPSED = 36;
 const GIT_DIFF_MAX_ROWS_EXPANDED = 160;
 
-function diffDividerLabel(theme: BoxTheme, stats: { additions: number; removals: number }): string {
+/** Colored `+N -M` stats fragment shared by diff frame headers. */
+function diffStatsFragment(theme: BoxTheme, stats: { additions: number; removals: number }): string {
 	const plus = stats.additions > 0 ? theme.fg("toolDiffAdded", `+${stats.additions}`) : theme.fg("dim", "+0");
 	const minus = stats.removals > 0 ? theme.fg("toolDiffRemoved", `-${stats.removals}`) : theme.fg("dim", "-0");
-	return `Diff · ${plus} ${minus}`;
+	return `${plus} ${minus}`;
 }
 
-function fileBoxTopLabel(theme: BoxTheme, path: string): string {
-	const body = theme.fg("text", path);
+function fileBoxTopLabel(theme: BoxTheme, path: string, stats?: { additions: number; removals: number }): string {
+	const body = stats ? `${theme.fg("text", path)} · ${diffStatsFragment(theme, stats)}` : theme.fg("text", path);
 	return typeof theme?.bold === "function" ? theme.bold(body) : body;
 }
 
@@ -1928,7 +1931,9 @@ function buildGitDiffResultComponent(
 
 	const footerParts: string[] = [];
 	if (elapsedMs !== undefined) footerParts.push(theme.fg("text", formatElapsedMs(elapsedMs)));
-	footerParts.push(theme.fg("dim", `${fileCount} ${pluralForm("file", fileCount)}`));
+	// A single frame already implies one file — the count is only worth a footer
+	// slot when the diff spans several.
+	if (fileCount > 1) footerParts.push(theme.fg("dim", `${fileCount} ${pluralForm("file", fileCount)}`));
 	const footer = footerParts.join(theme.fg("dim", " · "));
 
 	const fileBoxes: DiffFileBox[] = [];
@@ -1942,18 +1947,19 @@ function buildGitDiffResultComponent(
 			topLabel: fileBoxTopLabel(theme, parsed.show ? "Git show" : "Git diff"),
 			resultComponent: renderBoxedToolResult(theme, () => [theme.fg("muted", "No changes")], {
 				showDivider: false,
+				skipLeadingBlank: true,
 				footerLines: emptyFooter ? [emptyFooter] : [],
 			}),
 		});
 	} else {
 		for (const file of parsed.files) {
-			const topLabel = fileBoxTopLabel(theme, file.path);
 			if (file.binary) {
 				fileBoxes.push({
-					topLabel,
+					topLabel: fileBoxTopLabel(theme, file.path),
 					resultComponent: renderBoxedToolResult(theme, () => [binaryBodyLine(theme, file.status)], {
-						dividerLabel: "Binary",
-						footerLines: [footer],
+						showDivider: false,
+						skipLeadingBlank: true,
+						footerLines: footer ? [footer] : [],
 					}),
 				});
 				continue;
@@ -1968,10 +1974,12 @@ function buildGitDiffResultComponent(
 			const view = new AdaptiveDiffComponent(theme, rows, maxRows, shouldHighlight ? language : undefined);
 			const expandHint = !expanded && view.hasCollapsed() ? "Ctrl+O more" : undefined;
 			fileBoxes.push({
-				topLabel,
+				topLabel: fileBoxTopLabel(theme, file.path, countDiffStats(file.body)),
 				resultComponent: renderBoxedToolResult(theme, view, {
-					dividerLabel: diffDividerLabel(theme, countDiffStats(file.body)),
-					footerLines: [footer],
+					// Stats live in the frame's top border (`path · +N -M`) — no divider.
+					showDivider: false,
+					skipLeadingBlank: true,
+					footerLines: footer ? [footer] : [],
 					...(expandHint ? { expandHint } : {}),
 				}),
 			});

package/extension-src/pi-style/features/tools/boxed/quick-edit.ts

@@ -15,11 +15,14 @@ import { getStateElapsedMs, isResultSeen } from "./session-config.js";
 import {
 	type BoxedToolContext,
 	type BoxedToolDefinition,
+	clearDiffHeaderStats,
+	diffHeaderStatsSuffix,
 	displayPath,
 	getRenderCacheKey,
 	memoizedStateComponent,
 	noteBoxedCallState,
 	noteBoxedResultPhase,
+	noteDiffHeaderStats,
 	noteExecutionStart,
 	stateElapsedMs,
 } from "./shared.js";
@@ -63,7 +66,12 @@ export function getQuickEditToolConfig(toolName: unknown): QuickEditToolConfig |
 	return typeof toolName === "string" ? QUICK_EDIT_TOOLS[toolName] : undefined;
 }
 
-function extractQuickEditDiff(text: string): string | undefined {
+/**
+ * Parse the `── diff ──` section of a quick-edit-family output text into a
+ * synthetic unified diff (exported for the turn-summary registry, which
+ * derives diff stats from session content without a renderer).
+ */
+export function extractQuickEditDiff(text: string): string | undefined {
 	const lines = stripAnsi(text).replace(/\r/g, "").split("\n");
 	const start = lines.indexOf("── diff ──");
 	if (start < 0) return undefined;
@@ -117,27 +125,15 @@ function extractQuickEditDiff(text: string): string | undefined {
 	return diffLines.length > 0 ? diffLines.join("\n") : undefined;
 }
 
-/** `Diff · +3 -0` divider label. */
-function quickEditDividerLabel(theme: BoxTheme, stats: { additions: number; removals: number }): string {
-	const plus = stats.additions > 0 ? theme.fg("toolDiffAdded", `+${stats.additions}`) : theme.fg("dim", "+0");
-	const minus = stats.removals > 0 ? theme.fg("toolDiffRemoved", `-${stats.removals}`) : theme.fg("dim", "-0");
-	return `Diff · ${plus} ${minus}`;
-}
-
-/** Quick-edit footer: `1 file · +3 -0`, prefixed with elapsed time when known. */
+/** Quick-edit footer: elapsed time only. The diff stats live in the box
+ *  header and a single edited file is implied, so neither repeats there. */
 function quickEditDiffFooter(
 	theme: BoxTheme,
 	result: { content?: readonly unknown[]; details?: unknown },
 	context: BoxedToolContext,
-	stats: { additions: number; removals: number },
 ): string {
 	const elapsedMs = getElapsedMs(result) ?? getStateElapsedMs(context.state);
-	const parts: string[] = [];
-	if (elapsedMs !== undefined) parts.push(theme.fg("text", formatElapsedMs(elapsedMs)));
-	const plus = stats.additions > 0 ? theme.fg("toolDiffAdded", `+${stats.additions}`) : theme.fg("dim", "+0");
-	const minus = stats.removals > 0 ? theme.fg("toolDiffRemoved", `-${stats.removals}`) : theme.fg("dim", "-0");
-	parts.push(theme.fg("dim", "1 file"), `${plus} ${minus}`);
-	return parts.join(theme.fg("dim", " · "));
+	return elapsedMs === undefined ? "" : theme.fg("text", formatElapsedMs(elapsedMs));
 }
 
 function renderQuickEditResult(
@@ -160,38 +156,36 @@ function renderQuickEditResult(
 
 	const output = getTextOutput(result);
 	if (context.isError) {
+		clearDiffHeaderStats(context);
+		const footer = quickEditFooter(theme, context);
 		return renderBoxedToolResult(theme, () => [theme.fg("error", stripAnsi(output).trim() || "Error")], {
-			footerLines: [quickEditFooter(theme, context)],
+			...(footer ? { footerLines: [footer] } : {}),
 			isError: true,
 		});
 	}
 
 	const diff = extractQuickEditDiff(output);
 	if (!diff) {
+		clearDiffHeaderStats(context);
 		const fallback = stripAnsi(output).trim() || config.fallbackLabel;
+		const footer = quickEditFooter(theme, context);
 		return renderBoxedToolResult(theme, () => [`${theme.fg("dim", "↳")} ${theme.fg("muted", fallback)}`], {
-			footerLines: [quickEditFooter(theme, context)],
+			...(footer ? { footerLines: [footer] } : {}),
 		});
 	}
 
 	const expanded = options.expanded;
 	const argPath = String(context?.args?.path ?? "");
-	// Stats feed the footer, which is part of the cache key (cheap line scan —
-	// unlike the row/component construction below, which must not run on hits).
+	// Stats feed the header slot and the cache key (cheap line scan — unlike
+	// the row/component construction below, which must not run on hits).
 	const stats = countDiffStats(diff);
+	noteDiffHeaderStats(context, stats);
+	const footer = quickEditDiffFooter(theme, result, context);
 
 	return memoizedStateComponent(
 		context.state,
 		"__piStyleQuickEditDiffResult",
-		getRenderCacheKey(
-			"quick-edit-diff-result",
-			theme,
-			config.toolLabel,
-			Boolean(expanded),
-			diff,
-			argPath,
-			quickEditDiffFooter(theme, result, context, stats),
-		),
+		getRenderCacheKey("quick-edit-diff-result", theme, config.toolLabel, Boolean(expanded), diff, argPath, footer),
 		() => {
 			// Expensive construction (buildSplitRows + AdaptiveDiffComponent) runs
 			// only on cache misses, never per render pass. Everything below is a
@@ -216,9 +210,12 @@ function renderQuickEditResult(
 					},
 				},
 				{
-					dividerLabel: quickEditDividerLabel(theme, stats),
-					...(expandHint ? { dividerRightLabel: expandHint } : {}),
-					footerLines: [quickEditDiffFooter(theme, result, context, stats)],
+					// Stats live in the box header (`➔ Quick Edit ✓ · path · +N -M`),
+					// so no `Diff` divider: the body continues the open call box directly.
+					showDivider: false,
+					skipLeadingBlank: true,
+					...(expandHint ? { expandHint } : {}),
+					footerLines: footer ? [footer] : [],
 				},
 			);
 		},
@@ -227,10 +224,7 @@ function renderQuickEditResult(
 
 function quickEditFooter(theme: BoxTheme, context: BoxedToolContext): string {
 	const elapsedMs = getStateElapsedMs(context.state);
-	const parts: string[] = [];
-	if (elapsedMs !== undefined) parts.push(theme.fg("text", formatElapsedMs(elapsedMs)));
-	parts.push(theme.fg("dim", "1 file"));
-	return parts.join(theme.fg("dim", " · "));
+	return elapsedMs === undefined ? "" : theme.fg("text", formatElapsedMs(elapsedMs));
 }
 
 export function quickEditTool(config: QuickEditToolConfig): BoxedToolDefinition {
@@ -238,9 +232,12 @@ export function quickEditTool(config: QuickEditToolConfig): BoxedToolDefinition
 		call(args, theme, context) {
 			noteExecutionStart(context);
 			noteBoxedCallState(context);
-			const detail = displayPath(String(args?.path ?? ""), context);
+			const path = displayPath(String(args?.path ?? ""), context);
 			return renderBoxedToolCall(theme, config.toolLabel, [], {
-				headerDetail: detail,
+				// Lazy: the settled result publishes diff stats into the shared renderer
+				// state, and this function resolves at render time — so the header picks
+				// up `· +N -M` on the same paint the diff body appears.
+				headerDetail: () => `${path}${diffHeaderStatsSuffix(theme, context)}`,
 				isError: Boolean(context.isError),
 				isPartial: Boolean(context.isPartial),
 				isPending: Boolean(context.isPartial),

package/extension-src/pi-style/features/tools/boxed/shared.ts

@@ -142,6 +142,40 @@ export function stateElapsedMs(context: BoxedToolContext): number | undefined {
 	return getStateElapsedMs(context.state);
 }
 
+/** State slot a diff result renderer publishes its stats into so the call
+ *  renderer can append them to the box header (`path · +3 -0`) on the same
+ *  paint. One slot suffices: renderer state is per tool call, and a call never
+ *  renders two diffs. */
+const DIFF_HEADER_STATS_KEY = "__piStyleDiffHeaderStats";
+
+/** Publish diff stats for the call header (called by settled result renderers). */
+export function noteDiffHeaderStats(context: BoxedToolContext, stats: { additions: number; removals: number }): void {
+	context.state[DIFF_HEADER_STATS_KEY] = { additions: stats.additions, removals: stats.removals };
+}
+
+/** Drop published diff stats (error / no-diff results keep the header clean). */
+export function clearDiffHeaderStats(context: BoxedToolContext): void {
+	delete context.state[DIFF_HEADER_STATS_KEY];
+}
+
+/** Colored `+N -M` diff stats pair: diff colors when nonzero, dim zeros. */
+export function formatDiffStatsPair(theme: BoxTheme, additions: number, removals: number): string {
+	const plus = additions > 0 ? theme.fg("toolDiffAdded", `+${additions}`) : theme.fg("dim", "+0");
+	const minus = removals > 0 ? theme.fg("toolDiffRemoved", `-${removals}`) : theme.fg("dim", "-0");
+	return `${plus} ${minus}`;
+}
+
+/** ` · +3 -0` header suffix with diff colors, or "" while no stats are
+ *  published (pending call / error result). */
+export function diffHeaderStatsSuffix(theme: BoxTheme, context: BoxedToolContext): string {
+	const stats = context.state[DIFF_HEADER_STATS_KEY] as { additions?: unknown; removals?: unknown } | undefined;
+	if (!stats || typeof stats !== "object") return "";
+	const additions = Number(stats.additions);
+	const removals = Number(stats.removals);
+	if (!Number.isFinite(additions) || !Number.isFinite(removals)) return "";
+	return ` · ${formatDiffStatsPair(theme, additions, removals)}`;
+}
+
 /** Footer parts with state-based elapsed when result.details lacks timing. */
 export function boxedFooterWithState(
 	theme: BoxTheme,