pi-cc-extensions 0.9.8 → 0.9.10

package/extensions/renderer/default-mode.ts

@@ -33,6 +33,11 @@ import {
 } from "./tool/result.ts";
 import { oneLine } from "../utils/format.ts";
 import { showMoreHintText } from "./tool/show-more-hint.ts";
+import {
+	CODEMODE_TOOL_NAME,
+	codemodeExpandedBody,
+	createCodemodeResultComponent,
+} from "./tool/codemode.ts";
 import { countWriteDiffStats } from "./tool/diff/diff-renderer.ts";
 import { renderRichToolResult, type WriteExecutionMetadataStore } from "./tool/diff/index.ts";
 import { getMessageDisplayTheme } from "./tool/message-display.ts";
@@ -157,7 +162,7 @@ function taskListSummary(tasks: ParsedTask[]): string {
 		counts.completed ? `${counts.completed} completed` : "",
 	]
 		.filter(Boolean)
-		.join(" • ");
+		.join(" · ");
 }
 
 function renderExpandedTaskResult(
@@ -305,13 +310,38 @@ function createCcstyleTool(
 			}
 
 			const expanded = isToolExpanded(options, context);
+			const isError = Boolean(options?.isError || context?.isError);
+			// codemode：折叠态自己画子调用树，展开态给全部子调用与去掉脚本头的输出
+			if (toolName === CODEMODE_TOOL_NAME) {
+				if (!options?.isPartial) setToolVisualState(context, isError ? "error" : "success");
+				if (expanded) {
+					return renderExpandedToolResult(
+						codemodeExpandedBody(result),
+						theme,
+						isError,
+						context?.lastComponent,
+						context?.args,
+						context,
+						true,
+					);
+				}
+				// 折叠态不再复用展开视图，免得 hover/鼠标命中指向已隐藏的组件
+				if (context?.state) context.state.ccstyleIoView = undefined;
+				const toolCallId = context?.toolCallId;
+				return createCodemodeResultComponent({
+					result,
+					theme,
+					running: Boolean(options?.isPartial),
+					isError,
+					isHovered: () => isToolCallHovered(toolCallId),
+				});
+			}
 			if (options?.isPartial) {
 				// 展开态贴左（Box 提供 1 格 pad）；折叠态保持 3 格对齐标题
 				const pending = expanded ? "↳ Pending…" : "   ↳ Pending…";
 				return new Text(theme.fg("muted", pending), 0, 0);
 			}
 
-			const isError = options?.isError || context?.isError;
 			setToolVisualState(context, isError ? "error" : "success");
 			const toolCallId = context?.toolCallId;
 			if (shouldRenderRichDiff(config.mode, toolName, Boolean(isError))) {
@@ -356,7 +386,7 @@ function createCcstyleTool(
 						: "Done";
 			const expandable = !expanded && (tasks.length > 0 || hasExpandableDetail(text, args));
 			const hintText = showMoreHintText();
-			const hintPrefix = expandable ? theme.fg("dim", " • ") : "";
+			const hintPrefix = expandable ? theme.fg("dim", " · ") : "";
 			const hint = expandable ? hintPrefix + theme.fg("dim", hintText) : "";
 			const hoveredHint = expandable ? hintPrefix + theme.fg("text", hintText) : "";
 			if (expanded) {
@@ -669,7 +699,9 @@ export function installToolExpandedBackground(): () => void {
 			if (box) {
 				box.paddingX = 1;
 				box.paddingY = 1;
-				if (box.setBgFn) box.setBgFn((text: string) => theme.bg("userMessageBg", text));
+				if (box.setBgFn) {
+					box.setBgFn((text: string) => theme.bg(config.expandedCardBackground, text));
+				}
 			}
 		},
 		original,

package/extensions/renderer/mouse/interaction.ts

@@ -144,7 +144,10 @@ function tryOpenToolIoShowMore(region: InteractionRegion): boolean {
 	}
 	const title = section === "input" ? "Tool Input" : "Tool Output";
 	const content = section === "input" ? ioView.getInputBody() : ioView.getOutputBody();
-	void showTextPreview({ ui }, title, content || "(empty)");
+	// 整段就是代码时包一层围栏：弹框按 Markdown 渲染，围栏代码块才会着色
+	const fence = section === "input" ? ioView.getInputCodeFence() : undefined;
+	const preview = fence ? `\`\`\`${fence.language}\n${fence.code}\n\`\`\`` : content;
+	void showTextPreview({ ui }, title, preview || "(empty)");
 	return true;
 }
 
@@ -433,7 +436,13 @@ function handleFullscreenToolClick(tui: any, packet: SgrMousePacket): boolean {
 		for (const other of others) {
 			if (other !== component && other.expanded) {
 				// 展开 round 卡内 thinking/工具时，外层 compact 卡是它的容器，不能收起。
-				if ((isThinking || isTool) && isCompactAssistantComponent(other)) continue;
+				// 面板挂在摘要行时，anchor 与摘要行是同一张外层卡，点内部工具不能收起它。
+				if (
+					(isThinking || isTool) &&
+					isCompactAssistantComponent(other) &&
+					(other === target.owner || other === target.owner?.roundAnchor)
+				)
+					continue;
 				other.setExpanded(false);
 				other.invalidate?.();
 			}

package/extensions/renderer/tool/codemode.ts

@@ -0,0 +1,303 @@
+/**
+ * codemode 的结果渲染：折叠态把子调用摊成工具组那样的树，最后一行用 └ 收尾。
+ *
+ * 数据来自 `result.details.calls`（CodemodeNestedCall[]，partial 更新里也有），所以运行中就能
+ * 看到子调用进度。两个坑：
+ *
+ * - 子调用不会单独成行：pi 会跳过带 `parentToolCallId` 的 tool_execution_start，进度只能在这里显示。
+ * - 输出以 "Script completed\nWall time …\nOutput:\n" 开头（pi 原生也切掉），行数统计与展开正文都得去掉它，
+ *   否则折叠摘要会多算 3 行。
+ */
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { stripAnsi } from "../../utils/ansi-text.ts";
+import { toolLoadingIcon } from "../../utils/tool-loading-icon.ts";
+import { sanitizeToolResultText } from "../../utils/tool-result-sanitize.ts";
+import { mcpToolTitle } from "./mcp-title.ts";
+import {
+	type ToolCallSummary,
+	humanizeToolLabel,
+	renderToolSummary,
+	toolCallSummary,
+} from "./names.ts";
+import { showMoreHintText } from "./show-more-hint.ts";
+import { headTruncateToWidth, toolViewportWidth } from "./result.ts";
+
+export const CODEMODE_TOOL_NAME = "codemode";
+
+/** 折叠态最多列几条子调用（与 pi 原生一致，更早的折叠成一行）。 */
+const COLLAPSED_CALL_LIMIT = 8;
+/** 折叠态正文缩进，与 `   ↳ …` 对齐。 */
+const INDENT = "   ";
+
+/** 脚本结果头；只有整块正文恰好等于它时才算头。 */
+const SCRIPT_HEADER = /^Script (completed|failed)\nWall time [\d.]+ seconds\nOutput:\n$/;
+
+export type CodemodeNestedCall = {
+	name?: unknown;
+	/** 紧凑 JSON；过长时 pi 会截断，截断后 JSON.parse 会失败。 */
+	args?: unknown;
+	status?: unknown;
+	durationMs?: unknown;
+	error?: unknown;
+	cost?: unknown;
+};
+
+export function codemodeCalls(result: any): CodemodeNestedCall[] {
+	const calls = result?.details?.calls;
+	return Array.isArray(calls) ? calls : [];
+}
+
+/** 去掉脚本头之后的输出正文（已清理终端转义）。 */
+export function codemodeOutputText(result: any): string {
+	const content = Array.isArray(result?.content) ? result.content : [];
+	const blocks = content
+		.filter((item: any) => item?.type === "text")
+		.map((item: any) => String(item?.text ?? ""));
+	if (blocks.length > 0 && SCRIPT_HEADER.test(blocks[0]!)) blocks.shift();
+	return sanitizeToolResultText(blocks.join("\n"), 16_384).trim();
+}
+
+export function codemodeOutputLineCount(result: any): number {
+	const text = codemodeOutputText(result).replace(/\n+$/, "");
+	return text ? text.split("\n").length : 0;
+}
+
+/** 汇总行片段（按重要度先后排列，渲染时从尾部丢以适配宽度）。 */
+export function codemodeSummaryParts(
+	calls: readonly CodemodeNestedCall[],
+	outputLines: number,
+	running: boolean,
+): string[] {
+	const total = calls.length;
+	const failed = calls.filter((call) => call?.status === "error").length;
+	const runningCount = calls.filter((call) => !call?.status || call?.status === "running").length;
+	const parts: string[] = [];
+	if (running) {
+		if (runningCount)
+			parts.push(`${runningCount} ${runningCount === 1 ? "call" : "calls"} running`);
+		const done = total - runningCount;
+		if (done) parts.push(`${done} done`);
+		if (failed) parts.push(`${failed} failed`);
+		return parts.length ? parts : ["running…"];
+	}
+	if (total) parts.push(`${total} ${total === 1 ? "call" : "calls"}`);
+	if (failed) parts.push(`${failed} failed`);
+	if (outputLines) parts.push(`${outputLines} ${outputLines === 1 ? "line" : "lines"} output`);
+	return parts.length ? parts : ["Done"];
+}
+
+/** 宽度不够时从尾部丢片段（先丢输出行数，再丢条数），不断词。 */
+function fitSummaryParts(parts: readonly string[], width: number): string {
+	const kept = [...parts];
+	while (kept.length > 1 && visibleWidth(kept.join(" · ")) > width) kept.pop();
+	const text = kept.join(" · ");
+	return visibleWidth(text) <= width ? text : headTruncateToWidth(text, width);
+}
+
+function formatDuration(ms: number): string {
+	return ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+
+/** 与 pi 原生一致：不到 1 分显示两位有效数字。 */
+function formatCost(cost: number): string {
+	return `$${cost >= 0.01 ? cost.toFixed(2) : cost.toPrecision(2)}`;
+}
+
+/** 单次子调用的耗时/费用（纯文本，着色由调用方决定）。 */
+function callMeta(call: CodemodeNestedCall): string[] {
+	const out: string[] = [];
+	const duration = call?.durationMs;
+	if (typeof duration === "number" && Number.isFinite(duration) && duration >= 0) {
+		out.push(formatDuration(duration));
+	}
+	const cost = call?.cost;
+	if (typeof cost === "number" && Number.isFinite(cost) && cost > 0) out.push(formatCost(cost));
+	return out;
+}
+
+/** 截断的紧凑 JSON 里能恢复出的对象；complete 标记是否原本就完整。 */
+type ParsedCallArgs = { args: Record<string, unknown>; complete: boolean };
+
+/** 截断串尾部补闭合符号的候选：先试收字符串，再收数组与对象。 */
+const REPAIR_CLOSERS = ['"}', '"}]}', '"}}', "}", "]}"];
+
+/**
+ * 子调用参数：先直接解析；pi 从尾部截断过（超 200 字符）的串再补救一次——
+ * 逐字回退补上缺少的闭合符号，取最长能解析出的对象。截断保留的是开头字段，
+ * path/command/pattern 这类先出现的取得到；被切掉的尾部值本就无从恢复。
+ */
+function parseCallArgs(raw: string): ParsedCallArgs | undefined {
+	try {
+		const parsed = JSON.parse(raw);
+		if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+			return { args: parsed, complete: true };
+		}
+		return undefined;
+	} catch {
+		// 截断串：走补救
+	}
+	const body = raw.endsWith("...") ? raw.slice(0, -3) : raw;
+	if (!body.startsWith("{")) return undefined;
+	for (let end = body.length; end > 0; end--) {
+		for (const closer of REPAIR_CLOSERS) {
+			try {
+				const parsed = JSON.parse(body.slice(0, end) + closer);
+				if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) continue;
+				// 空对象等于没恢复出字段，再短也只会更空
+				if (Object.keys(parsed).length === 0) return undefined;
+				return { args: parsed, complete: false };
+			} catch {
+				// 试下一个闭合符号 / 下一个长度
+			}
+		}
+	}
+	return undefined;
+}
+
+/** 子调用参数：能解析就复用字段链摘要，认不出（截断后也不成形）就贴原文。 */
+function callSummary(call: CodemodeNestedCall): ToolCallSummary {
+	const name = String(call?.name ?? "tool");
+	const title = mcpToolTitle({ toolName: name }) ?? humanizeToolLabel(name);
+	const raw = typeof call?.args === "string" ? call.args : "";
+	if (!raw) return { main: title, detail: "" };
+	const parsed = parseCallArgs(raw);
+	if (parsed) {
+		const summary = toolCallSummary(name, parsed.args, { title, variant: "default" });
+		// 截断串只恢复出部分字段：字段链认出来了才用，认不出仍旧贴原文，
+		// 免得把不完整的 JSON 当成完整入参摊开。
+		if (parsed.complete || summary.payload === undefined) return summary;
+	}
+	return { main: title, detail: "", payload: raw };
+}
+
+function statusIcon(status: unknown, theme: any): string {
+	switch (status) {
+		case "ok":
+			return theme.fg("success", "✓");
+		case "error":
+			return theme.fg("error", "✗");
+		case "cancelled":
+			return theme.fg("muted", "⊘");
+		default:
+			// 运行中：帧在 render() 内取，动画定时器只负责 requestRender
+			return theme.fg("accent", toolLoadingIcon());
+	}
+}
+
+function callRow(call: CodemodeNestedCall, theme: any, rowWidth: number): string {
+	const fg = theme.fg.bind(theme);
+	const prefix = `${INDENT}${fg("dim", "├")} ${statusIcon(call?.status, theme)} `;
+	// detail（read 的 offset/limit 等）与工具组行一样接在标题后
+	const summary = callSummary(call);
+	const detail = fg("dim", summary.detail);
+	const suffix = callMeta(call)
+		.map((text) => ` ${fg("dim", text)}`)
+		.join("");
+	const mainWidth = Math.max(
+		0,
+		rowWidth - visibleWidth(prefix) - visibleWidth(detail) - visibleWidth(suffix),
+	);
+	const row = `${prefix}${renderToolSummary(summary, mainWidth, fg)}${detail}${suffix}`;
+	return truncateToWidth(row, rowWidth, "");
+}
+
+/**
+ * 折叠态（含运行中的 partial 更新）的行：子调用全用 ├，最后一行用 └ 收汇总，
+ * 与工具组的树一致。
+ */
+export function codemodeCollapsedLines(options: {
+	result: any;
+	theme: any;
+	running: boolean;
+	isError: boolean;
+	width: number;
+	/** 鼠标悬停整卡时展开提示用 text 色，与其它折叠卡一致。 */
+	hovered?: boolean;
+}): string[] {
+	const { result, theme, running, isError } = options;
+	const fg = theme.fg.bind(theme);
+	const calls = codemodeCalls(result);
+	const rowWidth = toolViewportWidth(options.width);
+	const shown = calls.slice(-COLLAPSED_CALL_LIMIT);
+	const lines: string[] = [];
+	if (shown.length < calls.length) {
+		const hidden = calls.length - shown.length;
+		lines.push(
+			truncateToWidth(
+				`${INDENT}${fg("dim", "├")} ${fg("dim", `… ${hidden} earlier ${hidden === 1 ? "call" : "calls"}`)}`,
+				rowWidth,
+				"",
+			),
+		);
+	}
+	for (const call of shown) lines.push(callRow(call, theme, rowWidth));
+
+	const summary = codemodeSummaryParts(calls, codemodeOutputLineCount(result), running);
+	// 没有子调用时不画衔接符，避免孤零零一个 └
+	const prefix = shown.length > 0 ? `${INDENT}${fg("dim", "└")} ` : INDENT;
+	const hint = running ? "" : ` ${fg(options.hovered ? "text" : "dim", `· ${showMoreHintText()}`)}`;
+	const bodyWidth = Math.max(1, rowWidth - visibleWidth(prefix) - visibleWidth(hint));
+	const body = fg(isError ? "error" : "muted", fitSummaryParts(summary, bodyWidth));
+	lines.push(truncateToWidth(`${prefix}${body}${hint}`, rowWidth, ""));
+	return lines;
+}
+
+/** 展开态正文：全部子调用（含错误文本）+ 去掉脚本头的输出 + 全量输出路径。 */
+export function codemodeExpandedBody(result: any): string {
+	const parts: string[] = [];
+	const calls = codemodeCalls(result);
+	if (calls.length > 0) {
+		parts.push(
+			calls
+				.map((call) => {
+					const name = String(call?.name ?? "tool");
+					const raw = typeof call?.args === "string" ? call.args : "";
+					const meta = callMeta(call);
+					const head = [name, raw, ...meta].filter(Boolean).join(" ");
+					const error =
+						typeof call?.error === "string" && call.error
+							? `\n    ${call.error.split("\n").join("\n    ")}`
+							: "";
+					return `${head}${error}`;
+				})
+				.join("\n"),
+		);
+	}
+	const output = codemodeOutputText(result);
+	if (output) parts.push(output);
+	const full = result?.details?.fullOutputPath;
+	if (typeof full === "string" && full.trim()) parts.push(`Full output: ${full.trim()}`);
+	return parts.join("\n\n");
+}
+
+/**
+ * 折叠态结果组件。只有汇总行是展开入口，与 diff 卡一致；行本身很便宜，
+ * 不自己缓存（settled 卡另有整行 paint 缓存，运行中本就按帧重算）。hover 状态在
+ * render() 内取，才能跟鼠标 motion 的 requestRender 同步。
+ */
+export function createCodemodeResultComponent(options: {
+	result: any;
+	theme: any;
+	running: boolean;
+	isError: boolean;
+	/** 折叠态 hover 查询，与 diff 卡同一套（mouse/hover）。 */
+	isHovered?: () => boolean;
+}): any {
+	const { result, theme, running, isError } = options;
+	return {
+		render(width: number): string[] {
+			return codemodeCollapsedLines({
+				result,
+				theme,
+				running,
+				isError,
+				width,
+				hovered: options.isHovered?.() ?? false,
+			});
+		},
+		invalidate(): void {},
+		isCollapsedHintLine(plainLine: string): boolean {
+			return !running && /(click to show more|to show more)\s*$/.test(stripAnsi(plainLine));
+		},
+	};
+}

package/extensions/renderer/tool/diff/diff-header.ts

@@ -81,7 +81,7 @@ export function renderHeaderRows(
 
 	const summaryPieces = [...buildDiffSummaryBasePieces(stats, theme), theme.fg("muted", mode)];
 
-	const summary = summaryPieces.join(mode === "split" ? " " : theme.fg("muted", " • "));
+	const summary = summaryPieces.join(mode === "split" ? " " : theme.fg("muted", " · "));
 	const meter = renderDiffStatBar(stats, width, theme);
 	if (!meter) {
 		return [{ text: stabilizeBackgroundResets(truncateToWidth(summary, width)), hunkIndex: null }];

package/extensions/renderer/tool/diff/diff-highlight.ts

@@ -91,6 +91,42 @@ export function createCodeLineHighlighter(
 	};
 }
 
+/**
+ * 通用代码块着色（codemode 的 `code` 字段等）：先用 pi 的同步 highlightCode 打底，
+ * 首帧就有颜色；再用 shiki 异步升级（与 diff 共用缓存与主题解析），落地后回调
+ * invalidate 重画。返回行数组，按源行一一对应；语言不识或未就绪时给打底结果。
+ */
+export function createCodeBlockHighlighter(
+	code: string,
+	language: string | undefined,
+	theme: DiffTheme,
+	invalidate?: () => void,
+): () => string[] {
+	const cleanCode = sanitizeToolResultText(code).replace(/\r/g, "");
+	const cleanLines = cleanCode.split("\n").map(cleanCodeLine);
+	if (!language || !shouldHighlightCodeBlock(cleanCode)) {
+		return () => cleanLines.map(sanitizeAnsiForThemedOutput);
+	}
+	let fallback: string[];
+	try {
+		fallback = highlightCode(cleanCode, language).map(sanitizeAnsiForThemedOutput);
+	} catch {
+		fallback = cleanLines.map(sanitizeAnsiForThemedOutput);
+	}
+	const shikiTheme = resolveShikiTheme(theme);
+	let highlighted: string[] | undefined;
+	const resolve = () => {
+		if (highlighted) return;
+		const result = shikiHighlightCache.get(cleanCode, language, shikiTheme, fallback, invalidate);
+		if (result) highlighted = result.map(sanitizeAnsiForThemedOutput);
+	};
+	resolve();
+	return () => {
+		resolve();
+		return highlighted ?? fallback;
+	};
+}
+
 export function highlightDiffLine(
 	codeText: string,
 	entry: DiffLineEntry,

package/extensions/renderer/tool/diff/diff-presentation.ts

@@ -52,8 +52,8 @@ export function buildDiffSummaryText(stats: DiffSummaryStats, width: number): st
 	}
 
 	const summaryCandidates = [
-		`↳ diff +${stats.added} -${stats.removed} • ${stats.hunks} ${pluralize(stats.hunks, "hunk")} • ${stats.files} ${pluralize(stats.files, "file")}`,
-		`↳ diff +${stats.added} -${stats.removed} • ${stats.hunks}h • ${stats.files}f`,
+		`↳ diff +${stats.added} -${stats.removed} · ${stats.hunks} ${pluralize(stats.hunks, "hunk")} · ${stats.files} ${pluralize(stats.files, "file")}`,
+		`↳ diff +${stats.added} -${stats.removed} · ${stats.hunks}h · ${stats.files}f`,
 		`↳ diff +${stats.added} -${stats.removed}`,
 		`+${stats.added} -${stats.removed}`,
 		"diff",

package/extensions/renderer/tool/diff/diff-write-render.ts

@@ -290,7 +290,7 @@ function renderWriteOverwriteGuardRows(
 	return renderSingleDiffRow(buildWriteOverwriteGuardText(guard, width), "warning", width, theme);
 }
 
-/** Folded write with `writeDiffCollapsedLines: 0`: `↳ created • click to show more`. */
+/** Folded write with `writeDiffCollapsedLines: 0`: `↳ created · click to show more`. */
 function renderWriteCollapsedHintLine(
 	wasOverwrite: boolean,
 	width: number,
@@ -304,7 +304,7 @@ function renderWriteCollapsedHintLine(
 	}
 	const actionLabel = headerLabel?.trim() || (wasOverwrite ? "overwritten" : "created");
 	const clickLabel = showMoreHintText();
-	const candidates = [`↳ ${actionLabel} • ${clickLabel}`, `↳ ${actionLabel}`, actionLabel, "…"];
+	const candidates = [`↳ ${actionLabel} · ${clickLabel}`, `↳ ${actionLabel}`, actionLabel, "…"];
 	let text = candidates[candidates.length - 1] ?? "…";
 	for (const candidate of candidates) {
 		if (visibleWidth(candidate) <= safeWidth) {

package/extensions/renderer/tool/diff/line-width-safety.ts

@@ -71,13 +71,14 @@ export function buildCollapsedDiffHintText(
 				? `${options.hiddenHunks} ${pluralize(options.hiddenHunks, "hunk")}`
 				: undefined;
 
+		// 括号去掉：与工具卡的同名提示一致，只用小圆点连接
 		const candidates = [
-			`… (${[remainingText, hiddenHunksText, showMoreHintText()].filter(Boolean).join(" • ")})`,
-			`… (${[remainingText, hiddenHunksText].filter(Boolean).join(" • ")})`,
-			`… (${[shortRemainingText, shortHiddenHunksText].filter(Boolean).join(" • ")})`,
+			`… ${[remainingText, hiddenHunksText, showMoreHintText()].filter(Boolean).join(" · ")}`,
+			`… ${[remainingText, hiddenHunksText].filter(Boolean).join(" · ")}`,
+			`… ${[shortRemainingText, shortHiddenHunksText].filter(Boolean).join(" · ")}`,
 			options.hiddenHunks > 0
-				? `… (+${options.remainingLines} • +${options.hiddenHunks}h)`
-				: `… (+${options.remainingLines})`,
+				? `… +${options.remainingLines} · +${options.hiddenHunks}h`
+				: `… +${options.remainingLines}`,
 			"…",
 		];
 

package/extensions/renderer/tool/grouping.ts

@@ -6,7 +6,14 @@ import {
 	visibleWidth,
 	type Component,
 } from "@earendil-works/pi-tui";
+import { config } from "../../config/config.ts";
 import { TOOL_LOADING_INTERVAL_MS, toolLoadingIcon } from "../../utils/tool-loading-icon.ts";
+import {
+	CODEMODE_TOOL_NAME,
+	codemodeCalls,
+	codemodeOutputLineCount,
+	codemodeSummaryParts,
+} from "./codemode.ts";
 import { getToolMouseTui } from "../mouse/scroll.ts";
 import { mcpToolTitle } from "./mcp-title.ts";
 import { collapseHintText, isToolTuiFullscreen, showMoreHintText } from "./show-more-hint.ts";
@@ -19,6 +26,7 @@ import {
 	toolCallSummary,
 	type ToolCallSummary,
 } from "./names.ts";
+import { toolViewportWidth } from "./result.ts";
 import {
 	patchRegistry,
 	TOOL_GROUPING_GENERATION_KEY as GENERATION_KEY,
@@ -191,6 +199,20 @@ function toolSummary(tool: any): ToolCallSummary {
 	});
 }
 
+/**
+ * codemode 的折叠行：有结果就报该次调用的统计（与单卡汇总行同一套口径），
+ * 免得一张卡里几行长代码预览互相看不出区别。还没结果时退回代码预览。
+ */
+function codemodeResultSummary(tool: any): ToolCallSummary | undefined {
+	if (toolName(tool) !== CODEMODE_TOOL_NAME || !tool?.result) return undefined;
+	const parts = codemodeSummaryParts(
+		codemodeCalls(tool.result),
+		codemodeOutputLineCount(tool.result),
+		tool?.isPartial === true,
+	);
+	return { main: `${toolTitle(tool)} ${parts.join(" · ")}`, detail: "" };
+}
+
 function toolNameList(tools: any[]): string {
 	const counts = new Map<string, number>();
 	for (const tool of tools) counts.set(toolName(tool), (counts.get(toolName(tool)) ?? 0) + 1);
@@ -215,6 +237,8 @@ type ExpandedGroupCache = {
 	hover: boolean;
 	theme: unknown;
 	fullscreen: boolean;
+	/** 背景槽位参与命中判断：改配置后已展开的分组不能继续用旧底色。 */
+	bgSlot: string;
 	paints: readonly unknown[];
 	lines: string[];
 };
@@ -361,7 +385,7 @@ export class ToolGroupComponent extends Container {
 				const color = key === "pending" ? "accent" : key;
 				return `${fg(color, String(counts[key]))} ${label}`;
 			})
-			.join(` ${fg("dim", "•")} `);
+			.join(` ${fg("dim", "·")} `);
 		const names = new Set(this.children.map(toolName));
 		const label = names.size === 1 ? toolTitle(this.children[0]) : "Multiple Tools";
 		const overall: ToolStatus = counts.error ? "error" : counts.pending ? "pending" : "success";
@@ -370,15 +394,15 @@ export class ToolGroupComponent extends Container {
 		)
 			scheduleGroupAnimation(this.patch);
 		const overallColor = overall === "pending" ? "accent" : overall;
-		const nameList = names.size > 1 ? ` ${fg("dim", `• ${toolNameList(this.children)}`)}` : "";
+		const nameList = names.size > 1 ? ` ${fg("dim", `· ${toolNameList(this.children)}`)}` : "";
 		// 圆点保持 dim；hover 只高亮可点击文字。
 		const hintText = this._expanded ? collapseHintText() : showMoreHintText();
-		const hint = `${fg("dim", "•")} ${fg(this.hintHovered ? "text" : "dim", hintText)}`;
+		const hint = `${fg("dim", "·")} ${fg(this.hintHovered ? "text" : "dim", hintText)}`;
 		const lines = [
 			"",
 			truncateToWidth(
 				` ${fg(overallColor, "●")} ${label}: ${countText}${nameList} ${hint}`,
-				width,
+				toolViewportWidth(width),
 				"…",
 			),
 		];
@@ -394,6 +418,7 @@ export class ToolGroupComponent extends Container {
 				expandedHit.hover === this.hintHovered &&
 				expandedHit.theme === this.patch.theme &&
 				expandedHit.fullscreen === isToolTuiFullscreen() &&
+				expandedHit.bgSlot === config.expandedCardBackground &&
 				expandedHit.paints.length === childPaints.length &&
 				expandedHit.paints.every((paint, index) => paint === childPaints[index])
 			) {
@@ -408,14 +433,16 @@ export class ToolGroupComponent extends Container {
 			const branch = index === total - 1 ? "└" : "├";
 			const continuation = index === total - 1 ? "  " : "│ ";
 			if (!this._expanded) {
-				const summary = toolSummary(tool);
+				const summary = codemodeResultSummary(tool) ?? toolSummary(tool);
 				const prefix = ` ${fg("dim", branch)} ${fg(color, statusIcon(toolStatus))} `;
 				const detail = fg("dim", summary.detail);
-				const mainWidth = Math.max(0, width - visibleWidth(prefix) - visibleWidth(detail));
+				// 与单工具卡标题同宽，宽屏右侧留白一致
+				const rowWidth = toolViewportWidth(width);
+				const mainWidth = Math.max(0, rowWidth - visibleWidth(prefix) - visibleWidth(detail));
 				lines.push(
 					truncateToWidth(
 						`${prefix}${renderToolSummary(summary, mainWidth, fg)}${detail}`,
-						width,
+						rowWidth,
 						"",
 					),
 				);
@@ -440,8 +467,8 @@ export class ToolGroupComponent extends Container {
 			}
 		}
 		if (this._expanded) {
-			// 展开面板统一用 user message 背景色（ccstyle 约定），不按状态区分。
-			const backgroundSlot = "userMessageBg";
+			// 展开面板统一一个背景槽位（ccstyle 约定），不按状态区分。
+			const backgroundSlot = config.expandedCardBackground;
 			for (const line of expandedLines) {
 				lines.push(paddedBackgroundRow(theme, backgroundSlot, line, width));
 			}
@@ -451,6 +478,7 @@ export class ToolGroupComponent extends Container {
 				hover: this.hintHovered,
 				theme: this.patch.theme,
 				fullscreen: isToolTuiFullscreen(),
+				bgSlot: backgroundSlot,
 				paints: childPaints ?? [],
 				lines,
 			};

package/extensions/renderer/tool/message-display.ts

@@ -78,15 +78,15 @@ function renderCcstyle(component: any, kind: DisplayKind): void {
 	const title = theme.fg("toolTitle", kind.title(component));
 	if (!component.expanded) {
 		const hovered = component.hintHovered === true;
-		const hint = `${theme.fg("dim", " • ")}${theme.fg(hovered ? "text" : "dim", showMoreHintText())}`;
+		const hint = `${theme.fg("dim", " · ")}${theme.fg(hovered ? "text" : "dim", showMoreHintText())}`;
 		component.addChild(new Text(`${icon} ${title}${hint}`, 0, 0));
 		return;
 	}
-	// 展开卡与 tool 一致：userMessageBg + 上下左右 1 格
+	// 展开卡与 tool 一致：同一个展开卡背景 + 上下左右 1 格
 	component.paddingX = 1;
 	component.paddingY = 1;
 	if (typeof theme.bg === "function" && typeof component.setBgFn === "function") {
-		component.setBgFn((text: string) => theme.bg("userMessageBg", text));
+		component.setBgFn((text: string) => theme.bg(config.expandedCardBackground, text));
 	}
 	component.addChild(new Text(`${icon} ${title}`, 0, 0));
 	component.addChild(new Spacer(1));