pi-cc-extensions 1.0.3 → 1.0.5

package/extensions/renderer/mouse/scroll.ts

@@ -68,7 +68,7 @@ export function setScrollButtonVisible(visible: boolean): void {
 export function noteNewTranscriptItem(): void {
 	const state = scrollButtonState();
 	const tui = getToolMouseTui();
-	if (!state.visible || !tui) return;
+	if (!dockScrollButtonActive() || !state.visible || !tui) return;
 	// 提交新消息时官方可能直接跳回底部（不经过滚动输入）：先按实时跟随状态校正，
 	// 否则跟随期间的内容会被当成“离开底部时的新消息”计入。
 	if (isAtTranscriptBottom(tui)) {
@@ -107,6 +107,11 @@ export function toolMouseInteractionActive(): boolean {
 	return config.mode !== "off";
 }
 
+/** dock 模式才用扩展的独占行；native 或 ccstyle off 时交还 Pi 原生浮层。 */
+export function dockScrollButtonActive(): boolean {
+	return toolMouseInteractionActive() && config.scrollButtonMode === "dock";
+}
+
 /** 惰性 Proxy 官方 fullscreen（TuiAltScreen）判定。 */
 export function fullscreenLazyTui(tui: any): boolean {
 	return isLazyProxyTui(tui) && tui.mode === "fullscreen";
@@ -132,10 +137,15 @@ export function restoreOfficialScrollToEnd(tui: any): void {
 	tui[OFFICIAL_SCROLL_TO_END_KEY] = undefined;
 }
 
-/** on/compact 用 dock 按钮；off 还回 pi 原生 Jump to latest。 */
+/** dock 模式替换官方浮层；native 或 ccstyle off 时保留 Pi 原生 Jump to latest。 */
 export function syncOfficialScrollToEnd(tui: any): void {
-	if (toolMouseInteractionActive()) disableOfficialScrollToEnd(tui);
-	else restoreOfficialScrollToEnd(tui);
+	if (dockScrollButtonActive()) {
+		disableOfficialScrollToEnd(tui);
+		return;
+	}
+	restoreOfficialScrollToEnd(tui);
+	setScrollButtonVisible(false);
+	setScrollButtonHovered(false);
 }
 
 /** 官方 fullscreen：是否已跟随 transcript 底部（按钮隐藏条件）。 */
@@ -202,7 +212,7 @@ export function hideScrollButton(tui: any): void {
 export function scheduleScrollButtonSync(tui: any, data: string): void {
 	if (
 		!fullscreenLazyTui(tui) ||
-		!toolMouseInteractionActive() ||
+		!dockScrollButtonActive() ||
 		!isScrollNavigationInput(data) ||
 		scrollButtonSyncScheduled
 	)
@@ -211,7 +221,7 @@ export function scheduleScrollButtonSync(tui: any, data: string): void {
 	const previousLines = tui.previousLines;
 	const check = (attempt: number) => {
 		scrollButtonSyncScheduled = false;
-		if (getToolMouseTui() !== tui) return;
+		if (getToolMouseTui() !== tui || !dockScrollButtonActive()) return;
 		// Pi renders on its own frame timer. Inspect the resulting viewport before
 		// showing the button so empty or non-scrollable transcripts never flash it.
 		const rendered = tui.previousLines !== previousLines;
@@ -234,7 +244,7 @@ export function scheduleScrollButtonSync(tui: any, data: string): void {
 }
 
 export function updateScrollButtonFromInput(tui: any, data: string): void {
-	if (!fullscreenLazyTui(tui) || !toolMouseInteractionActive()) return;
+	if (!fullscreenLazyTui(tui) || !dockScrollButtonActive()) return;
 	if (matchesKey(data, "enter") || matchesKey(data, "return")) hideScrollButton(tui);
 }
 
@@ -247,7 +257,12 @@ function scrollButtonText(): string {
 }
 
 export function renderScrollButton(width: number, theme: any): string[] {
-	if (!getScrollButtonVisible() || !fullscreenLazyTui(getToolMouseTui())) return [];
+	if (
+		!dockScrollButtonActive() ||
+		!getScrollButtonVisible() ||
+		!fullscreenLazyTui(getToolMouseTui())
+	)
+		return [];
 	const label = theme.fg(
 		getScrollButtonHovered() ? "text" : "accent",
 		`[ ↓ ${scrollButtonText()} ]`,

package/extensions/renderer/mouse/sticky-prompt.ts

@@ -27,7 +27,7 @@ import {
 } from "../../utils/patch-keys.ts";
 import { isToolTuiFullscreen } from "../tool/names.ts";
 import type { SgrMousePacket } from "./packets.ts";
-import { setScrollButtonVisible } from "./scroll.ts";
+import { dockScrollButtonActive, setScrollButtonVisible } from "./scroll.ts";
 
 /** 消息正文首行/末行的零宽 APC 标记；终端忽略，合成前剥离。 */
 const MESSAGE_START = "\x1b_cc:p\x07";
@@ -338,7 +338,7 @@ export function handleStickyPromptClick(tui: any, packet: SgrMousePacket): boole
 	const view = tui.getPrimaryScrollView?.();
 	if (typeof view?.scrollTo === "function") {
 		view.scrollTo(state.jumpRow, { disableFollow: true });
-		if (view.isFollowingEnd === false) setScrollButtonVisible(true);
+		if (view.isFollowingEnd === false && dockScrollButtonActive()) setScrollButtonVisible(true);
 	}
 	// 落点已到消息头，这一帧的粘性行立即失效；等下一帧按新位置重算。
 	state.visible = false;

package/extensions/renderer/tool/ccstyle-tool.ts

@@ -27,6 +27,7 @@ import {
 } from "./names.ts";
 import {
 	collapsedResultSummary,
+	expandedBodyComponent,
 	formatToolDuration,
 	insetComponent,
 	renderCollapsedToolResultToWidth,
@@ -154,6 +155,23 @@ function renderExpandedTaskResult(
 	return formatted ? new Text(`↳ ${formatted}`, 0, 0) : undefined;
 }
 
+/**
+ * 工具耗时（毫秒）。结束时优先用 pi 记在结果上的 durationMs（单调，restore 出来的行也带得到）；
+ * 运行中 pi 不给（partial 期间渲染上下文里恒为 undefined），退回 renderCall 记下的时钟。
+ * 拿不到返回 undefined。时钟回拨时钳到 0。
+ */
+function toolElapsedMs(context: any, isPartial: boolean): number | undefined {
+	const recorded = context?.durationMs;
+	if (!isPartial && typeof recorded === "number" && Number.isFinite(recorded) && recorded >= 0) {
+		return recorded;
+	}
+	const startedAt = context?.state?.ccstyleShellStartedAt;
+	if (typeof startedAt !== "number") return undefined;
+	const endedAt = context?.state?.ccstyleShellEndedAt;
+	const end = typeof endedAt === "number" ? endedAt : Date.now();
+	return Math.max(0, end - startedAt);
+}
+
 /**
  * shell 的耗时文本。Pi 原生 shell 渲染器会在结果底部报一行，ccstyle 的通用折叠行把它盖掉了。
  *
@@ -163,16 +181,8 @@ function renderExpandedTaskResult(
  */
 function shellDurationText(toolName: string, context: any, isPartial: boolean): string {
 	if (!SHELL_TOOL_NAMES.has(toolName)) return "";
-	const recorded = context?.durationMs;
-	if (!isPartial && typeof recorded === "number" && Number.isFinite(recorded) && recorded >= 0) {
-		return formatToolDuration(recorded);
-	}
-	const startedAt = context?.state?.ccstyleShellStartedAt;
-	if (typeof startedAt !== "number") return "";
-	const endedAt = context?.state?.ccstyleShellEndedAt;
-	const end = typeof endedAt === "number" ? endedAt : Date.now();
-	// 时钟回拨时别吐负数；快照固定时钟也会走到这。
-	return formatToolDuration(Math.max(0, end - startedAt));
+	const elapsed = toolElapsedMs(context, isPartial);
+	return elapsed === undefined ? "" : formatToolDuration(elapsed);
 }
 
 /** 用 ccstyle call/result 包装任意工具定义。 */
@@ -328,6 +338,7 @@ export function createCcstyleTool(
 					running: Boolean(options?.isPartial),
 					isError,
 					isHovered: () => isToolCallHovered(toolCallId),
+					code: context?.args?.code,
 				});
 			}
 			// ask_user_question：折叠态摊成问答树，展开态按问题逐条列出选择。
@@ -405,8 +416,9 @@ export function createCcstyleTool(
 					writeExecutionMetadata,
 					getToolDisplayConfig,
 				);
-				// 展开态由 Box(1,1) 提供内边距；折叠态 inset 一级缩进
-				if (richResult) return expanded ? richResult : insetComponent(richResult);
+				// 展开态由 Box(1,1) 提供内边距，首行再缩 2 格与标题文字列对齐；折叠态 inset 一级缩进
+				if (richResult)
+					return expanded ? expandedBodyComponent(richResult) : insetComponent(richResult);
 			}
 
 			const text = textFromResult(result, expanded);

package/extensions/renderer/tool/codemode.ts

@@ -8,8 +8,11 @@
  * - 输出以 "Script completed\nWall time …\nOutput:\n" 开头（pi 原生也切掉），行数统计与展开正文都得去掉它，
  *   否则折叠摘要会多算 3 行。
  */
+import { highlightCode } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { config } from "../../config/config.ts";
 import { stripAnsi } from "../../utils/ansi-text.ts";
+import { oneLine } from "../../utils/format.ts";
 import { toolLoadingIcon } from "../../utils/tool-loading-icon.ts";
 import { sanitizeToolResultText } from "../../utils/tool-result-sanitize.ts";
 import { mcpToolTitle } from "./mcp-title.ts";
@@ -94,6 +97,105 @@ function fitSummaryParts(parts: readonly string[], width: number): string {
 	return visibleWidth(text) <= width ? text : headTruncateToWidth(text, width);
 }
 
+/**
+ * 摘要行的打分：调用最能说明脚本在干什么，字符串次之，行长只在前两者相同时决胜。
+ * 调用权重必须大于「字符串分 + 行长上限」，否则长赋值会压过短调用。
+ */
+const CODE_SUMMARY_CALL_SCORE = 4;
+const CODE_SUMMARY_STRING_SCORE = 2;
+
+/**
+ * 无子调用时的脚本摘要：取信息量最大的一行语句，压成单行。
+ *
+ * 要的是一段真实的 JavaScript 片段，折叠行才能用 highlightCode 着色；
+ * 标识符链（`a → b → c`）着色器认不出，染不上。跳过注释、空行和 `// @options`。
+ * 只是折叠行的提示，不求还原语义；看代码还是展开 Input。
+ */
+export function codemodeCodeSummary(code: unknown): string | undefined {
+	if (typeof code !== "string" || !code.trim()) return undefined;
+	let best: { text: string; score: number } | undefined;
+	let skippingBlock = false;
+	for (const raw of code.split("\n")) {
+		const line = raw.trim();
+		if (skippingBlock) {
+			if (line.includes("*/")) skippingBlock = false;
+			continue;
+		}
+		if (line.startsWith("/*")) {
+			if (!line.includes("*/")) skippingBlock = true;
+			continue;
+		}
+		if (!line || line.startsWith("//") || line.startsWith("*")) continue;
+		const text = oneLine(line);
+		if (!text) continue;
+		const score =
+			(text.includes("(") ? CODE_SUMMARY_CALL_SCORE : 0) +
+			(/["'`]/.test(text) ? CODE_SUMMARY_STRING_SCORE : 0) +
+			Math.min(text.length, 100) / 100;
+		if (!best || score > best.score) best = { text, score };
+	}
+	return best?.text;
+}
+
+/**
+ * 没有子调用时的脚本行：语句逐行用 │ 树线列出，行数跟 expandedInputMaxLines。
+ * 超出的收成一行 `… N more lines`。注释、空行和 `// @options` 不占行。
+ */
+export function codemodeCodeLines(
+	code: unknown,
+	fg: (color: string, text: string) => string,
+	rowWidth: number,
+): string[] {
+	if (typeof code !== "string" || !code.trim()) return [];
+	const statements: string[] = [];
+	let skippingBlock = false;
+	for (const raw of code.split("\n")) {
+		const line = raw.trim();
+		if (skippingBlock) {
+			if (line.includes("*/")) skippingBlock = false;
+			continue;
+		}
+		if (line.startsWith("/*")) {
+			if (!line.includes("*/")) skippingBlock = true;
+			continue;
+		}
+		if (!line || line.startsWith("//") || line.startsWith("*")) continue;
+		const text = oneLine(line);
+		if (text) statements.push(text);
+	}
+	if (statements.length === 0) return [];
+	const limit = Math.max(1, config.expandedInputMaxLines);
+	const visible = statements.slice(0, limit);
+	const rail = `${INDENT}${fg("dim", "│")} `;
+	const lines = visible.map((statement) =>
+		truncateToWidth(`${rail}${highlightCodeSummary(statement)}`, rowWidth, ""),
+	);
+	const hidden = statements.length - visible.length;
+	if (hidden > 0) {
+		lines.push(
+			truncateToWidth(
+				`${rail}${fg("dim", `… ${hidden} more ${hidden === 1 ? "line" : "lines"}`)}`,
+				rowWidth,
+				"",
+			),
+		);
+	}
+	return lines;
+}
+
+/**
+ * 所以包一层 `() => { … }` 再取中间那一行。失败或没着色时退回原文。
+ */
+export function highlightCodeSummary(summary: string): string {
+	try {
+		const lines = highlightCode(`() => { ${summary} }`, "javascript");
+		const colored = lines[0]?.replace(/^\(\) => \{ /, "").replace(/ \}$/, "");
+		return colored && stripAnsi(colored) === summary ? colored : summary;
+	} catch {
+		return summary;
+	}
+}
+
 /** 与 pi 原生一致：不到 1 分显示两位有效数字。 */
 function formatCost(cost: number): string {
 	return `$${cost >= 0.01 ? cost.toFixed(2) : cost.toPrecision(2)}`;
@@ -159,9 +261,12 @@ function callSummary(call: CodemodeNestedCall): ToolCallSummary {
 	const parsed = parseCallArgs(raw);
 	if (parsed) {
 		const summary = toolCallSummary(name, parsed.args, { title, variant: "default" });
-		// 截断串只恢复出部分字段：字段链认出来了才用，认不出仍旧贴原文，
-		// 免得把不完整的 JSON 当成完整入参摊开。
-		if (parsed.complete || summary.payload === undefined) return summary;
+		// 截断串只恢复出部分字段：字段链认出来了才用（payload 是字段链挑出的值，
+		// path/main 的兜底标题不算）；认不出仍旧贴原文，免得把不完整的 JSON 当成完整入参摊开。
+		const recognized = summary.payload !== undefined || summary.path !== undefined;
+		// 完全还原的入参：标题与载荷分色后的 summary 直接用；恢复了字段的也用结构化
+		// 结果（字段链认出的值比截断原文更可读）。认不出的才退回贴原文。
+		if (parsed.complete || recognized) return summary;
 	}
 	return { main: title, detail: "", payload: raw };
 }
@@ -176,7 +281,7 @@ function statusIcon(status: unknown, theme: any): string {
 			return theme.fg("muted", "⊘");
 		default:
 			// 运行中：帧在 render() 内取，动画定时器只负责 requestRender
-			return theme.fg("accent", toolLoadingIcon());
+			return theme.fg("dim", toolLoadingIcon());
 	}
 }
 
@@ -209,6 +314,8 @@ export function codemodeCollapsedLines(options: {
 	width: number;
 	/** 鼠标悬停整卡时展开提示用 text 色，与其它折叠卡一致。 */
 	hovered?: boolean;
+	/** 脚本源码；没有子调用时用来补一行 `code:` 摘要。 */
+	code?: unknown;
 }): string[] {
 	const { result, theme, running, isError } = options;
 	const fg = theme.fg.bind(theme);
@@ -216,6 +323,11 @@ export function codemodeCollapsedLines(options: {
 	const rowWidth = toolViewportWidth(options.width);
 	const shown = calls.slice(-COLLAPSED_CALL_LIMIT);
 	const lines: string[] = [];
+	// 没有子调用时脚本本身是唯一线索：逐行用 │ 树线列出，行数跟 expandedInputMaxLines，
+	// 汇总行仍用 └ 收尾。
+	if (shown.length === 0) {
+		lines.push(...codemodeCodeLines(options.code, fg, rowWidth));
+	}
 	if (shown.length < calls.length) {
 		const hidden = calls.length - shown.length;
 		lines.push(
@@ -229,8 +341,8 @@ export function codemodeCollapsedLines(options: {
 	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 prefix = lines.length > 0 ? `${INDENT}${fg("dim", "└")} ` : INDENT;
 	// 圆点保持 dim；hover 只高亮可点击文字。
 	const hint = running
 		? ""
@@ -281,6 +393,8 @@ export function createCodemodeResultComponent(options: {
 	isError: boolean;
 	/** 折叠态 hover 查询，与 diff 卡同一套（mouse/hover）。 */
 	isHovered?: () => boolean;
+	/** 脚本源码；没有子调用时用来补一行 `code:` 摘要。 */
+	code?: unknown;
 }): any {
 	const { result, theme, running, isError } = options;
 	return {
@@ -292,6 +406,7 @@ export function createCodemodeResultComponent(options: {
 				isError,
 				width,
 				hovered: options.isHovered?.() ?? false,
+				code: options.code,
 			});
 		},
 		invalidate(): void {},

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

@@ -135,10 +135,11 @@ export function applyLineLimit(
 	const clickLabel = showMoreHintText();
 	const clickIndex = hintText.lastIndexOf(clickLabel);
 	// 展开态不会再截断，剩下的分支必是折叠态提示。
+	// 提示文本与其余折叠卡一致用 dim，hover 时 clickLabel 提到 text。
 	const styledHint =
-		hovered && clickIndex >= 0
+		clickIndex >= 0
 			? theme.fg("muted", hintText.slice(0, clickIndex)) +
-				theme.fg("text", clickLabel) +
+				theme.fg(hovered ? "text" : "dim", clickLabel) +
 				theme.fg("muted", hintText.slice(clickIndex + clickLabel.length))
 			: theme.fg("muted", hintText);
 	return {

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

@@ -31,12 +31,18 @@ export interface DiffPalette {
 	removeEmphasisBgAnsi: string;
 }
 
-const ADD_ROW_BACKGROUND_MIX_RATIO = 0.12;
+const ADD_ROW_BACKGROUND_MIX_RATIO = 0.04;
 const REMOVE_ROW_BACKGROUND_MIX_RATIO = 0.12;
 const ADD_INLINE_EMPHASIS_MIX_RATIO = 0.26;
-const REMOVE_INLINE_EMPHASIS_MIX_RATIO = 0.26;
+const REMOVE_INLINE_EMPHASIS_MIX_RATIO = 0.5;
 const ADDITION_TINT_TARGET: RgbColor = { r: 84, g: 190, b: 118 };
 const DELETION_TINT_TARGET: RgbColor = { r: 232, g: 95, b: 122 };
+// GitHub dark 删除行底 ~#67060c：混向深酒红目标，压掉主题基底的粉/灰感。
+const DELETION_ROW_TARGET: RgbColor = { r: 103, g: 6, b: 12 };
+const DELETION_EMPHASIS_TARGET: RgbColor = { r: 160, g: 17, b: 23 };
+// 行底/强调底混完再向自身亮度去饱和，留灰感，避免纯色底过艳。
+const ROW_DESATURATE_RATIO = 0.3;
+const EMPHASIS_DESATURATE_RATIO = 0.2;
 export const ANSI_BG_RESET = "\x1b[49m";
 
 export function emphasis(theme: DiffTheme, text: string): string {
@@ -202,6 +208,11 @@ function rgbToBgAnsi(color: RgbColor): string {
 	return `\x1b[48;2;${r};${g};${b}m`;
 }
 
+function desaturateRgb(color: RgbColor, ratio: number): RgbColor {
+	const luma = (color.r * 299 + color.g * 587 + color.b * 114) / 1000;
+	return mixRgb(color, { r: luma, g: luma, b: luma }, ratio);
+}
+
 function mixRgb(base: RgbColor, tint: RgbColor, ratio: number): RgbColor {
 	const clamped = Math.max(0, Math.min(1, ratio));
 	return {
@@ -263,9 +274,11 @@ export function readThemeAnsi(
 }
 
 export function resolveDiffPalette(theme: DiffTheme): DiffPalette {
-	const baseBg = parseAnsiColorCode(readThemeAnsi(theme, "bg", "toolSuccessBg")) ??
-		parseAnsiColorCode(readThemeAnsi(theme, "bg", "toolPendingBg")) ??
+	const fallbackBg = parseAnsiColorCode(readThemeAnsi(theme, "bg", "toolPendingBg")) ??
 		parseAnsiColorCode(readThemeAnsi(theme, "bg", "userMessageBg")) ?? { r: 32, g: 35, b: 42 };
+	// 删除行用 toolErrorBg 做基底（主题里是 diffDelBg 暗红）；不定义时退回通用基底混 tint。
+	const addBaseBg = parseAnsiColorCode(readThemeAnsi(theme, "bg", "toolSuccessBg")) ?? fallbackBg;
+	const removeBaseBg = parseAnsiColorCode(readThemeAnsi(theme, "bg", "toolErrorBg")) ?? addBaseBg;
 	const addFg = parseAnsiColorCode(readThemeAnsi(theme, "fg", "toolDiffAdded")) ?? {
 		r: 88,
 		g: 173,
@@ -279,10 +292,28 @@ export function resolveDiffPalette(theme: DiffTheme): DiffPalette {
 	const addTint = mixRgb(addFg, ADDITION_TINT_TARGET, 0.35);
 	const removeTint = mixRgb(removeFg, DELETION_TINT_TARGET, 0.65);
 
-	const addRowBg = mixRgb(baseBg, addTint, ADD_ROW_BACKGROUND_MIX_RATIO);
-	const removeRowBg = mixRgb(baseBg, removeTint, REMOVE_ROW_BACKGROUND_MIX_RATIO);
-	const addEmphasisBg = mixRgb(baseBg, addTint, ADD_INLINE_EMPHASIS_MIX_RATIO);
-	const removeEmphasisBg = mixRgb(baseBg, removeTint, REMOVE_INLINE_EMPHASIS_MIX_RATIO);
+	const addRowBg = desaturateRgb(
+		mixRgb(addBaseBg, addTint, ADD_ROW_BACKGROUND_MIX_RATIO),
+		ROW_DESATURATE_RATIO,
+	);
+	const addEmphasisBg = desaturateRgb(
+		mixRgb(addBaseBg, addTint, ADD_INLINE_EMPHASIS_MIX_RATIO),
+		EMPHASIS_DESATURATE_RATIO,
+	);
+	// 暗色基底下向 GitHub 深酒红（~#67060c）加权，压掉主题基底的粉/灰感；
+	// 浅色基底保持原 tint 口径，免得行底深得盖过文字。
+	const removeBaseLuminance =
+		(removeBaseBg.r * 299 + removeBaseBg.g * 587 + removeBaseBg.b * 114) / 1000;
+	const removeRowTarget = removeBaseLuminance < 128 ? DELETION_ROW_TARGET : removeTint;
+	const removeEmphasisTarget = removeBaseLuminance < 128 ? DELETION_EMPHASIS_TARGET : removeTint;
+	const removeRowBg = desaturateRgb(
+		mixRgb(removeBaseBg, removeRowTarget, REMOVE_ROW_BACKGROUND_MIX_RATIO),
+		ROW_DESATURATE_RATIO,
+	);
+	const removeEmphasisBg = desaturateRgb(
+		mixRgb(removeBaseBg, removeEmphasisTarget, REMOVE_INLINE_EMPHASIS_MIX_RATIO),
+		EMPHASIS_DESATURATE_RATIO,
+	);
 
 	return {
 		addRowBgAnsi: rgbToBgAnsi(addRowBg),

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

@@ -71,7 +71,7 @@ export function buildDiffSummaryText(stats: DiffSummaryStats, width: number): st
 }
 
 /**
- * 折叠摘要行样式：整行 muted，`+A -D` 用 diff 头行同一套绿/红，hover 只把动作词提到 text。
+ * 折叠摘要行样式：整行 muted，`+A -D` 用 diff 头行同一套绿/红，`click to show more` 与其余折叠卡一致用 dim，hover 提到 text。
  * 0 行预览与多行预览共用这一套颜色：改折叠行数时同一处信息不变色。
  */
 export function styleDiffSummaryLine(
@@ -103,7 +103,7 @@ export function styleDiffSummaryLine(
 	}
 	if (hintIndex >= cursor) {
 		pushMuted(hintIndex);
-		pieces.push(theme.fg(hovered ? "text" : "muted", hint));
+		pieces.push(theme.fg(hovered ? "text" : "dim", hint));
 		cursor = hintIndex + hint.length;
 	}
 	pushMuted(text.length);

package/extensions/renderer/tool/grouping.ts

@@ -7,6 +7,7 @@ import {
 	type Component,
 } from "@earendil-works/pi-tui";
 import { config } from "../../config/config.ts";
+import { aggregateToolCardBgSlot, toolCardStatus } from "./tool-state.ts";
 import { TOOL_LOADING_INTERVAL_MS, toolLoadingIcon } from "../../utils/tool-loading-icon.ts";
 import {
 	ASK_USER_QUESTION_TOOL_NAME,
@@ -105,9 +106,7 @@ function previousSibling(
 type ToolStatus = "pending" | "success" | "error";
 
 function status(tool: any): ToolStatus {
-	if (tool?.result?.isError) return "error";
-	if (tool?.isPartial === true || (tool?.executionStarted && !tool?.result)) return "pending";
-	return tool?.result ? "success" : "pending";
+	return toolCardStatus(tool);
 }
 
 function statusIcon(value: ToolStatus): string {
@@ -235,14 +234,15 @@ function askUserResultSummary(tool: any): ToolCallSummary | undefined {
 		.map((entry) => entry.answer);
 	if (answers.length === 0) {
 		const label = tool.result?.details?.cancelled === true ? "Declined" : "Done";
-		return { main: `${toolTitle(tool)} ${label}`, detail: "" };
+		return { main: toolTitle(tool), detail: "", payload: label };
 	}
 	const first = answers[0]!;
 	const question = String(first.question ?? "").trim() || "Question";
 	const more = answers.length > 1 ? ` (+${answers.length - 1})` : "";
 	return {
-		main: `${toolTitle(tool)} ${question} -> ${askUserAnswerText(first)}${more}`,
+		main: toolTitle(tool),
 		detail: "",
+		payload: `${question} -> ${askUserAnswerText(first)}${more}`,
 	};
 }
 
@@ -253,7 +253,7 @@ function codemodeResultSummary(tool: any): ToolCallSummary | undefined {
 		codemodeOutputLineCount(tool.result),
 		tool?.isPartial === true,
 	);
-	return { main: `${toolTitle(tool)} ${parts.join(" · ")}`, detail: "" };
+	return { main: toolTitle(tool), detail: "", payload: parts.join(" · ") };
 }
 
 /**
@@ -283,7 +283,7 @@ function collapsedGroupToolLine(
 	width: number,
 ): string {
 	const toolStatus = status(tool);
-	const color = toolStatus === "pending" ? "accent" : toolStatus;
+	const color = toolStatus === "pending" ? "dim" : toolStatus;
 	const summary = askUserResultSummary(tool) ?? codemodeResultSummary(tool) ?? toolSummary(tool);
 	const prefix = ` ${fg("dim", last ? "└" : "├")} ${fg(color, statusIcon(toolStatus))} `;
 	const detail = fg("dim", summary.detail);
@@ -311,7 +311,7 @@ function groupCountText(
 		.filter((key) => counts[key])
 		.map((key) => {
 			const label = key === "pending" ? "running" : key === "success" ? "done" : "failed";
-			const color = key === "pending" ? "accent" : key;
+			const color = key === "pending" ? "dim" : key;
 			return `${fg(color, String(counts[key]))} ${label}`;
 		})
 		.join(` ${fg("dim", "·")} `);
@@ -499,7 +499,7 @@ export class ToolGroupComponent extends Container {
 		const label = names.size === 1 ? toolTitle(this.children[0]) : "Multiple Tools";
 		const overall = groupOverallStatus(counts);
 		if ((this.children as any[]).some(isAnimatingTool)) scheduleGroupAnimation(this.patch);
-		const overallColor = overall === "pending" ? "accent" : overall;
+		const overallColor = overall === "pending" ? "dim" : overall;
 		// 圆点保持 dim；hover 只高亮可点击文字。
 		const hintText = this._expanded ? collapseHintText() : showMoreHintText();
 		const hint = `${fg("dim", "·")} ${fg(this.hintHovered ? "text" : "dim", hintText)}`;
@@ -527,7 +527,7 @@ export class ToolGroupComponent extends Container {
 				expandedHit.hover === this.hintHovered &&
 				expandedHit.theme === this.patch.theme &&
 				expandedHit.fullscreen === isToolTuiFullscreen() &&
-				expandedHit.bgSlot === config.expandedCardBackground &&
+				expandedHit.bgSlot === aggregateToolCardBgSlot(this.children) &&
 				expandedHit.paints.length === childPaints.length &&
 				expandedHit.paints.every((paint, index) => paint === childPaints[index])
 			) {
@@ -538,7 +538,7 @@ export class ToolGroupComponent extends Container {
 		for (let index = 0; index < total; index++) {
 			const tool = this.children[index];
 			const toolStatus = status(tool);
-			const color = toolStatus === "pending" ? "accent" : toolStatus;
+			const color = toolStatus === "pending" ? "dim" : toolStatus;
 			const branch = index === total - 1 ? "└" : "├";
 			const continuation = index === total - 1 ? "  " : "│ ";
 			if (!this._expanded) {
@@ -564,8 +564,8 @@ export class ToolGroupComponent extends Container {
 			}
 		}
 		if (this._expanded) {
-			// 展开面板统一一个背景槽位（ccstyle 约定），不按状态区分。
-			const backgroundSlot = config.expandedCardBackground;
+			// 有一个失败整卡用失败底色；没有失败但还有进行中用进行中底色。
+			const backgroundSlot = aggregateToolCardBgSlot(this.children);
 			for (const line of expandedLines) {
 				lines.push(paddedBackgroundRow(theme, backgroundSlot, line, width));
 			}

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

@@ -6,6 +6,7 @@ import {
 import { Markdown, Spacer, Text } from "@earendil-works/pi-tui";
 import { MESSAGE_DISPLAY_PATCH, patchRegistry } from "../../utils/patch-keys.ts";
 import { config } from "../../config/config.ts";
+import { TOOL_CARD_BG_SLOT } from "./tool-state.ts";
 import { showMoreHintText } from "./names.ts";
 import { walkComponentTree } from "../../utils/component-tree.ts";
 
@@ -82,11 +83,11 @@ function renderCcstyle(component: any, kind: DisplayKind): void {
 		component.addChild(new Text(`${icon} ${title}${hint}`, 0, 0));
 		return;
 	}
-	// 展开卡与 tool 一致：同一个展开卡背景 + 上下左右 1 格
+	// 展开卡与成功的工具卡同底色，上下左右各 1 格。
 	component.paddingX = 1;
 	component.paddingY = 1;
 	if (typeof theme.bg === "function" && typeof component.setBgFn === "function") {
-		component.setBgFn((text: string) => theme.bg(config.expandedCardBackground, text));
+		component.setBgFn((text: string) => theme.bg(TOOL_CARD_BG_SLOT.success, text));
 	}
 	component.addChild(new Text(`${icon} ${title}`, 0, 0));
 	component.addChild(new Spacer(1));