pi-claude-code-ui 1.0.88 → 1.0.89

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 > [!IMPORTANT]
 > **1.0.69 — package rename (permanent).** Canonical npm name is now [`pi-claude-code-ui`](https://www.npmjs.com/package/pi-claude-code-ui). `pi-claude-style-tools` is legacy and will not receive further releases. Install with `pi install npm:pi-claude-code-ui` or `npm i pi-claude-code-ui`.
 
+## 1.0.89 — 2026-10-19
+
+### Fixed
+
+- **Direct MCP tools show what they did** - `mcp__<server>__<tool>` rows showed only `MCP status` until expanded. They now show `server:tool` and the main argument (for example `MCP subagents:Agent Debug NaN`), and grouped headers list the tool names (`Agent, Ctx Reduce`) instead of `Mcp Subagents Agent`.
+- **Running tool rows no longer draw their header twice** - the first pending blink invalidated the row while Pi was still building it, which left the call line in the row twice until the next redraw (until the result arrived on expanded rows). Affected every tool, not only MCP.
+- **Theme switches repaint everything** - after `/theme` or a light/dark switch, diff previews kept the old diff palette, rows inside tool groups kept the old colors, and the spinner verb/status kept the old theme until restart. All three now follow the new theme.
+- **MCP output uses the same dim color as other tools** - MCP running previews and expanded output were drawn in `toolOutput`, brighter than read, bash, grep and other tools.
+
+### Performance
+
+- **Each diff preview renders once** - since 1.0.80 edit, write and apply_patch rows started their Shiki render at a guessed width and rendered again once the real row width was known. On resume every diff row paid twice. Rows now wait for their width: half the diff renders, and the first frame of a 60-row tool history dropped from about 37 ms to 8 ms in the benchmark.
+
 ## 1.0.88 — 2026-10-19
 
 ### Added

package/extensions/index.ts

@@ -89,6 +89,8 @@ const PATCH_FLAG = Symbol.for("pi-claude-style-tools:patched-container-render");
 const TOOL_RENDER_CACHE = Symbol.for("pi-claude-style-tools:tool-render-cache");
 const COMPONENT_PARENT = Symbol.for("pi-claude-style-tools:component-parent");
 const PARENT_TRACKING_PATCH_FLAG = Symbol.for("pi-claude-style-tools:patched-parent-tracking");
+const TOOL_UPDATE_DISPLAY_ACTIVE = Symbol("pi-claude-style-tools:update-display-active");
+const TOOL_UPDATE_DISPLAY_RERUN = Symbol("pi-claude-style-tools:update-display-rerun");
 const TOOL_CACHE_PATCH_FLAG = Symbol.for("pi-claude-style-tools:patched-tool-cache-invalidation");
 const TOOL_MOUSE_PATCH_FLAG = Symbol.for("pi-claude-style-tools:patched-tool-fullscreen-mouse");
 const FULLSCREEN_HOVER_PATCH_FLAG = Symbol.for("pi-claude-style-tools:patched-fullscreen-hover");
@@ -615,7 +617,7 @@ function getGroupedToolName(tools: any[]): string | undefined {
 
 function getToolGroupLabel(tools: any[]): string {
 	const sameName = getGroupedToolName(tools);
-	return sameName ? humanizeToolName(sameName) : "Multiple Tools";
+	return sameName ? toolDisplayName(sameName) : "Multiple Tools";
 }
 
 function getToolGroupOverallStatus(tools: any[]): ToolStatus {
@@ -683,7 +685,7 @@ function formatToolNameList(tools: any[]): string {
 		counts.set(name, (counts.get(name) ?? 0) + 1);
 	}
 	return [...counts.entries()]
-		.map(([name, count]) => `${humanizeToolName(name)}${count > 1 ? `×${count}` : ""}`)
+		.map(([name, count]) => `${toolDisplayName(name)}${count > 1 ? `×${count}` : ""}`)
 		.join(", ");
 }
 
@@ -763,6 +765,7 @@ function getToolArgSummary(tool: any): string {
 	if (name === "grep") return `"${summarizeText(args.pattern ?? "", 40)}"${args.path ? ` in ${args.path}` : ""}`;
 	if (name === "find") return `"${summarizeText(args.pattern ?? "", 40)}"${args.path ? ` in ${args.path}` : ""}`;
 	if (name === "ls") return shortPath(process.cwd(), args.path ?? ".");
+	if (parseNamespacedMcpToolName(name)) return summarizeDirectMcpArgs(args);
 	return summarizeText(getStringArg(args, "path", "file_path", "url", "query", "name", "subject", "tool", "description", "prompt") || name, 72);
 }
 
@@ -773,7 +776,7 @@ function getToolCallLine(tool: any): string {
 		return line.replaceAll(WRAP_MARK, "").replaceAll(CLIP_MARK, "");
 	}
 	const summary = getToolArgSummary(tool);
-	const label = humanizeToolName(getToolName(tool));
+	const label = toolDisplayName(getToolName(tool));
 	return `${label}${summary ? ` ${summary}` : ""}`;
 }
 
@@ -917,6 +920,7 @@ class ToolGroupComponent extends Container {
 	private cachedStatusKey?: string;
 	private cachedToolCount?: number;
 	private cachedLines?: string[];
+	private paletteFingerprint?: string;
 
 	private clearRenderCache(): void {
 		this.dirty = true;
@@ -986,6 +990,15 @@ class ToolGroupComponent extends Container {
 		// only; children keep their own ToolText/TOOL_RENDER_CACHE entries and
 		// recompute only when their content actually changes.
 		this.clearRenderCache();
+		// Exception: a theme switch (Pi calls ui.invalidate()) changes colors the
+		// child renderers baked into their text, so those must re-run once.
+		// (Child invalidation re-enters here via clearToolRenderCache; the palette is
+		// recorded first so that re-entry is a no-op.)
+		const palette = currentThemePaletteFingerprint();
+		if (palette === undefined || palette === this.paletteFingerprint) return;
+		const changed = this.paletteFingerprint !== undefined;
+		this.paletteFingerprint = palette;
+		if (changed) for (const tool of this.tools) tool?.invalidate?.();
 	}
 
 	handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
@@ -1011,6 +1024,8 @@ class ToolGroupComponent extends Container {
 		}
 		const safeWidth = Number.isFinite(width) ? Math.max(1, Math.floor(width)) : 1;
 		// Fast path: settled groups with a valid memo skip ALL child walks.
+		// Remember the palette this group was drawn with (see invalidate()).
+		if (this.paletteFingerprint === undefined) this.paletteFingerprint = currentThemePaletteFingerprint();
 		// Child mutations mark dirty via clearToolRenderCache → invalidate().
 		if (
 			!this.dirty
@@ -2994,7 +3009,7 @@ function patchToolRenderCacheInvalidation(): void {
 	for (const method of methods) {
 		const original = proto[method];
 		if (typeof original !== "function") continue;
-		proto[method] = function patchedToolMutation(...args: any[]) {
+		const run = function patchedToolMutation(this: any, ...args: any[]) {
 			clearToolRenderCache(this);
 			if (method === "updateDisplay" || method === "updateResult" || method === "invalidate") {
 				syncLiveToolRenderState(this);
@@ -3003,6 +3018,28 @@ function patchToolRenderCacheInvalidation(): void {
 			clearToolRenderCache(this);
 			return result;
 		};
+		proto[method] = method !== "updateDisplay" ? run : function patchedToolUpdateDisplay(this: any, ...args: any[]) {
+			// A renderer can invalidate its own row while updateDisplay is building it
+			// (the first pending blink registration does). Pi's updateDisplay clears the
+			// content box and re-adds regions, so a nested pass leaves the call/result
+			// regions twice in the box until the next redraw. Defer it to one rerun.
+			if (this[TOOL_UPDATE_DISPLAY_ACTIVE]) {
+				this[TOOL_UPDATE_DISPLAY_RERUN] = true;
+				return undefined;
+			}
+			this[TOOL_UPDATE_DISPLAY_ACTIVE] = true;
+			try {
+				let result = run.apply(this, args);
+				if (this[TOOL_UPDATE_DISPLAY_RERUN]) {
+					this[TOOL_UPDATE_DISPLAY_RERUN] = false;
+					result = run.apply(this, args);
+				}
+				return result;
+			} finally {
+				this[TOOL_UPDATE_DISPLAY_ACTIVE] = false;
+				this[TOOL_UPDATE_DISPLAY_RERUN] = false;
+			}
+		};
 	}
 
 	proto[TOOL_CACHE_PATCH_FLAG] = true;
@@ -3788,6 +3825,9 @@ class ToolText extends Text {
 	private toolCachedLines?: string[];
 	private observedWidth?: number;
 	private pendingObservedWidth?: number;
+	getObservedWidth(): number | undefined {
+		return this.observedWidth;
+	}
 	private widthObserver?: (width: number) => void;
 	private widthObserverScheduled = false;
 
@@ -4153,6 +4193,13 @@ function themeBgRgb(theme: any, key: string): Rgb | null {
 let _themePaletteCacheTheme: unknown = null;
 let _themePaletteCacheName: string | null = null;
 let _themePaletteCacheFingerprint: string | null = null;
+// Pi passes the same global theme Proxy everywhere, so keeping the last one lets
+// non-render code (group invalidation) read the current palette.
+let _lastSeenTheme: unknown = null;
+
+function currentThemePaletteFingerprint(): string | undefined {
+	return _lastSeenTheme ? themePaletteFingerprint(_lastSeenTheme) : undefined;
+}
 
 /** Resolved-color fingerprint so palette re-derives when the active theme file changes under the same name/object. */
 function themePaletteFingerprint(theme: any): string {
@@ -4567,6 +4614,7 @@ function resetThemePalette(): void {
 
 function applyThemePaletteIfNeeded(theme: any): void {
 	if (!theme) return;
+	_lastSeenTheme = theme;
 	if (!themeAdaptiveEnabled()) {
 		applyToolBranchColor(theme);
 		syncOutlineChromeFromBranch(theme);
@@ -4757,10 +4805,26 @@ function branchDiffWidth(componentWidth?: number, chromeWidth = 2): number {
 	return Math.max(20, Math.min(width - chromeWidth, MAX_TERM_WIDTH));
 }
 
+// Diff preview cache keys also carry _toolBranchVisualEpoch, which applyThemePaletteIfNeeded
+// bumps when the theme palette changes: otherwise rows rendered before a /theme or light/dark
+// switch kept the old diff backgrounds and stat colors while new rows used the new ones.
 function contextDiffWidth(ctx: any, chromeWidth = 2): number {
 	return branchDiffWidth(ctx.state?._diffComponentWidth, chromeWidth);
 }
 
+// Diff previews are laid out for the row's real width, which is only known after the
+// row's text component has rendered once. Starting the async Shiki render before that
+// used the termW() guess and rendered every diff a second time once the real width
+// arrived (on resume: every edit/write row, twice). Wait for the width instead; the
+// width observer invalidates the row as soon as it is known.
+function diffWidthReady(ctx: any): boolean {
+	if (typeof ctx.state?._diffComponentWidth === "number") return true;
+	const seen = ctx.lastComponent instanceof ToolText ? ctx.lastComponent.getObservedWidth() : undefined;
+	if (seen === undefined || !ctx.state) return false;
+	ctx.state._diffComponentWidth = seen;
+	return true;
+}
+
 function adaptiveWrapRows(tw?: number): number {
 	const width = tw ?? termW();
 	if (width >= 180) return MAX_WRAP_ROWS_WIDE;
@@ -6013,6 +6077,18 @@ function isMcpToolName(name: string): boolean {
 	return name === "mcp" || /^mcp[_:-]/i.test(name) || /[_:-]mcp[_:-]/i.test(name);
 }
 
+// Direct MCP tools are registered as `mcp__<server>__<tool>`; their args are the
+// tool's own args, not the gateway's `{ tool, server, ... }`.
+function parseNamespacedMcpToolName(name: string): { server: string; tool: string } | undefined {
+	const match = /^mcp__(.+?)__(.+)$/.exec(name);
+	return match ? { server: match[1], tool: match[2] } : undefined;
+}
+
+function toolDisplayName(name: string): string {
+	const direct = parseNamespacedMcpToolName(name);
+	return humanizeToolName(direct ? direct.tool : name);
+}
+
 function shouldUseGenericToolRenderer(name: unknown): boolean {
 	return typeof name === "string" && name.length > 0 && !CORE_TOOL_OVERRIDES.has(name);
 }
@@ -6519,8 +6595,11 @@ function renderApplyPatchCall(args: any, theme: Theme, ctx: any, sp: (path: stri
 	}
 	ctx.state._openAiPatchFiles = preview.changes.map((change) => change.displayPath);
 
+	if (!diffWidthReady(ctx)) {
+		return makeResponsiveDiffText(ctx, ctx.lastComponent, `${hdr}\n${withBranch(theme.fg("muted", "(rendering…)"), theme, false, true)}`);
+	}
 	const diffWidth = contextDiffWidth(ctx);
-	const key = `apply-preview:${ctx.state._applyPatchMetaKey ?? hashText(patchText)}:${diffWidth}:${ctx.expanded ? 1 : 0}`;
+	const key = `apply-preview:${ctx.state._applyPatchMetaKey ?? hashText(patchText)}:${diffWidth}:${ctx.expanded ? 1 : 0}:${_toolBranchVisualEpoch}`;
 	if (ctx.state._applyPatchPreviewKey !== key) {
 		ctx.state._applyPatchPreviewKey = key;
 		ctx.state._applyPatchPreviewBody = theme.fg("muted", "(rendering…)");
@@ -6603,7 +6682,37 @@ function renderApplyPatchResult(result: any, isPartial: boolean, theme: Theme, c
 	return makeText(ctx.lastComponent, withBranch(`${theme.fg("success", "Applied")} ${meta.changeCount} files ${summary}${meta.totalLines ? ` ${theme.fg("muted", `(${meta.totalLines} diff lines)`)}` : ""}`, theme));
 }
 
-function summarizeMcpToolCall(args: any, theme: Theme): string {
+const DIRECT_MCP_SUMMARY_KEYS = [
+	"description", "subject", "title", "query", "path", "file_path", "url", "command", "name",
+	"agent_id", "agentId", "taskId", "task_id", "threadId", "drop", "target", "message", "prompt", "task",
+] as const;
+
+function summarizeArgValue(value: unknown): string {
+	if (typeof value === "string") return value.trim();
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	if (Array.isArray(value) && value.every((item) => typeof item === "string" || typeof item === "number")) return value.join(", ");
+	return "";
+}
+
+function summarizeDirectMcpArgs(args: any): string {
+	if (!args || typeof args !== "object") return "";
+	for (const key of DIRECT_MCP_SUMMARY_KEYS) {
+		const value = summarizeArgValue(args[key]);
+		if (value) return summarizeText(value, 72);
+	}
+	for (const [key, raw] of Object.entries(args)) {
+		const value = summarizeArgValue(raw);
+		if (value) return summarizeText(`${key}: ${value}`, 72);
+	}
+	return "";
+}
+
+function summarizeMcpToolCall(name: string, args: any, theme: Theme): string {
+	const direct = parseNamespacedMcpToolName(name);
+	if (direct) {
+		const detail = summarizeDirectMcpArgs(args);
+		return `${direct.server}:${direct.tool}${detail ? ` ${theme.fg("muted", detail)}` : ""}`;
+	}
 	const tool = getStringArg(args, "tool");
 	if (tool) return args?.server ? `${args.server}:${tool}` : tool;
 	const connect = getStringArg(args, "connect");
@@ -6614,14 +6723,14 @@ function summarizeMcpToolCall(args: any, theme: Theme): string {
 }
 
 function summarizeGenericToolCall(name: string, args: any, theme: Theme, sp: (path: string) => string): string {
-	if (isMcpToolName(name)) return summarizeMcpToolCall(args, theme);
+	if (isMcpToolName(name)) return summarizeMcpToolCall(name, args, theme);
 	return summarizeOpenAiToolCall(name, args, theme, sp);
 }
 
 function renderMcpToolResult(result: any, expanded: boolean, isPartial: boolean, theme: Theme, ctx: any): Text {
 	if (isPartial) {
 		return makeText(ctx.lastComponent, runningPreviewBlock(result, theme.fg("dim", "MCP running..."), expanded, theme, ctx, {
-			styleLine: (line) => theme.fg("toolOutput", line || " "),
+			styleLine: (line) => theme.fg("dim", line || " "),
 		}));
 	}
 	clearBlinkTimer(ctx);
@@ -6645,7 +6754,7 @@ function renderMcpToolResult(result: any, expanded: boolean, isPartial: boolean,
 		theme,
 		previewLimit(),
 		lines.length,
-		(line) => theme.fg(ctx.isError ? "error" : "toolOutput", line || " "),
+		(line) => theme.fg(ctx.isError ? "error" : "dim", line || " "),
 	);
 	return makeText(ctx.lastComponent, withBranch(`${statusText}\n${preview}`, theme));
 }
@@ -7705,10 +7814,14 @@ export default function (pi: ExtensionAPI) {
 			if (d?._type === "diff") {
 				const previewLines = ctx.expanded ? MAX_RENDER_LINES : diffCollapsedLimit();
 				const hunks = d.diff?.lines?.filter((l: any) => l.type === "sep").length + (d.diff?.lines?.length ? 1 : 0);
+				if (!diffWidthReady(ctx)) {
+					const pendingSummary = diffSummaryWithMeta(d.diff.added, d.diff.removed, hunks, "");
+					return makeResponsiveDiffText(ctx, ctx.lastComponent, withFinalBranchBlock(`${pendingSummary}\n${theme.fg("muted", "rendering diff…")}`, theme));
+				}
 				const diffWidth = contextDiffWidth(ctx);
 				const mode = shouldUseSplit(d.diff, diffWidth, previewLines) ? "split" : "unified";
 				const richSummary = diffSummaryWithMeta(d.diff.added, d.diff.removed, hunks, mode);
-				const key = `wd:${diffWidth}:${d.summary}:${d.diff?.lines?.length ?? 0}:${d.language ?? ""}:${ctx.expanded ? 1 : 0}`;
+				const key = `wd:${diffWidth}:${d.summary}:${d.diff?.lines?.length ?? 0}:${d.language ?? ""}:${ctx.expanded ? 1 : 0}:${_toolBranchVisualEpoch}`;
 				if (ctx.state._wdk !== key) {
 					ctx.state._wdk = key;
 					ctx.state._wdt = withFinalBranchBlock(`${richSummary}\n${theme.fg("muted", "rendering diff…")}`, theme);
@@ -7735,8 +7848,11 @@ export default function (pi: ExtensionAPI) {
 				const syntheticDiff = getCachedParsedDiff(ctx, `nf-diff:${d.filePath}:${contentHash}`, "", content);
 				const richSummary = diffSummaryWithMeta(syntheticDiff.added, 0, 1, "new file");
 				const previewLines = ctx.expanded ? MAX_RENDER_LINES : diffCollapsedLimit();
+				if (!diffWidthReady(ctx)) {
+					return makeResponsiveDiffText(ctx, ctx.lastComponent, withFinalBranchBlock(`${richSummary}\n${theme.fg("muted", "rendering diff…")}`, theme));
+				}
 				const diffWidth = contextDiffWidth(ctx);
-				const pk = `nf:${d.filePath}:${contentHash}:${diffWidth}:${ctx.expanded ? 1 : 0}`;
+				const pk = `nf:${d.filePath}:${contentHash}:${diffWidth}:${ctx.expanded ? 1 : 0}:${_toolBranchVisualEpoch}`;
 				if (ctx.state._nfk !== pk) {
 					ctx.state._nfk = pk;
 					ctx.state._nft = withFinalBranchBlock(`${richSummary}\n${theme.fg("muted", "rendering diff…")}`, theme);
@@ -7824,8 +7940,12 @@ export default function (pi: ExtensionAPI) {
 			// History replay never sets argsComplete; a finished edit is drawn from its result instead.
 			const finished = ctx.state._editResult as Record<string, unknown> | undefined;
 			if (!((ctx.argsComplete || finished) && operations.length > 0)) return makeText(ctx.lastComponent, hdr);
+			if (!diffWidthReady(ctx)) {
+				const pending = liveBranchDisplay(ctx.state, theme) ?? indentBranchBlock(withBranch(theme.fg("muted", "(rendering…)"), theme, false, true));
+				return makeResponsiveDiffText(ctx, ctx.lastComponent, `${hdr}\n${pending}`);
+			}
 			const diffWidth = contextDiffWidth(ctx, 3);
-			const key = `edit:${fp}:${hashText(operations.map((edit) => `${edit.oldText}\u0000${edit.newText}`).join("\u0001"))}:${diffWidth}:${ctx.expanded ? 1 : 0}`;
+			const key = `edit:${fp}:${hashText(operations.map((edit) => `${edit.oldText}\u0000${edit.newText}`).join("\u0001"))}:${diffWidth}:${ctx.expanded ? 1 : 0}:${_toolBranchVisualEpoch}`;
 			const { diffs: fallbackDiffs, summary: editSummary } = getCachedEditOperationSummary(ctx, key, operations);
 			if (ctx.state._pk !== key) {
 				ctx.state._pk = key;

package/extensions/spinner.ts

@@ -73,7 +73,6 @@ function themeAdaptiveEnabled(): boolean {
 const _DEFAULT_CLAUDE_ORANGE = "\x1b[38;2;215;119;87m";
 const _DEFAULT_STATUS_DIM = "\x1b[38;2;153;153;153m";
 
-let _themeColorsCacheTheme: unknown = null;
 let _themeColorsLastAdaptive: boolean | null = null;
 let _themeColorsLastVerbKey: string | null = null;
 let _themeColorsLastStatusKey: string | null = null;
@@ -105,7 +104,6 @@ function applyThemeColors(theme: any): void {
 		_themeColorsLastAdaptive = adaptive;
 		_themeColorsLastVerbKey = verbColor;
 		_themeColorsLastStatusKey = statusColor;
-		_themeColorsCacheTheme = null;
 		if (!adaptive) {
 			CLAUDE_ORANGE = _DEFAULT_CLAUDE_ORANGE;
 			STATUS_DIM = _DEFAULT_STATUS_DIM;
@@ -113,9 +111,9 @@ function applyThemeColors(theme: any): void {
 	}
 
 	if (!theme || !adaptive) return;
-	if (_themeColorsCacheTheme === theme) return;
-	_themeColorsCacheTheme = theme;
-
+	// ctx.ui.theme is Pi's global theme Proxy: the same object before and after
+	// /theme or a light/dark switch, so an identity cache never refreshed the
+	// spinner colors. Resolving is two map lookups per tick; just do it.
 	const verb = resolveThemeColor(theme, verbColor, "accent");
 	if (verb) CLAUDE_ORANGE = verb;
 	const status = resolveThemeColor(theme, statusColor, "muted");
@@ -792,8 +790,7 @@ export default function (pi: ExtensionAPI) {
 		}
 		// Re-derive colors on every tick so /cc-spinner verb/status changes
 		// take effect within ~250 ms without waiting for the next pi event.
-		// applyThemeColors is identity-cached on (theme, verbKey, statusKey) so
-		// this is cheap when nothing changed.
+		// applyThemeColors only re-resolves two theme colors, so this is cheap.
 		applyThemeColors(activeCtx.ui?.theme);
 		const nextMessage = buildWorkingMessage();
 		if (!force && nextMessage === lastWorkingMessage) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-claude-code-ui",
-  "version": "1.0.88",
+  "version": "1.0.89",
   "description": "Claude Code-style grouped tool rows for pi with Ctrl+O/Ctrl+Shift+O previews, math rendering, and consistent built-in, MCP, and custom tool rendering",
   "keywords": [
     "pi-package",