pi-cc-extensions 1.0.14 → 1.0.15

package/README.en.md

@@ -34,7 +34,7 @@ Run `/reload` after installation.
 | Context inspection          | Usage breakdown and previews for the system prompt, memory, skills, tools definition, and messages                                           | `/context`                                      |
 | Session/Subagent references | Search and inject effective context from previous Sessions or existing SubAgents                                                             | `@`                                             |
 | Status bar                  | Shows model, context, cache, cost, the conversation token total, and git; also works with `@narumitw/pi-usage` for live quota. Git/cache Nerd Font icons can be turned off | `/ccstyle`                                      |
-| Theme                       | Bundled CC Dark and CC Light themes                                                                                                          | `/settings` → Theme                             |
+| Theme                       | Bundled themes: CC Dark, CC Light, CC Dark HC, CC Light HC                                                                                   | `/settings` → Theme                             |
 
 Renderer snapshots for `on` / `compact` modes: [default](./docs/tool-render-examples-default.md) · [compact](./docs/tool-render-examples-compact.md)
 

package/README.md

@@ -34,7 +34,7 @@ pi install git:github.com/minuque/pi-cc-extensions
 | 上下文检查            | 查看上下文占用，并预览 System prompt、Memory、Skills、Tools definition 和消息内容 | `/context`                                      |
 | Session/Subagent 引用 | 搜索并注入历史 Session 或现有 SubAgent 的有效上下文                             | `@`                                             |
 | 状态栏                | 显示：模型、上下文、缓存、费用、本次对话累计 token、git并适配 @narumitw/pi-usage 实时显示额度；git/缓存图标可关 Nerd Font | `/ccstyle`                              |
-| 主题                  | 随包提供内置 CC Dark、CC Light 主题                                             | `/settings` → Theme                             |
+| 主题                  | 随包提供 4 个主题：CC Dark、CC Light、CC Dark HC、CC Light HC                   | `/settings` → Theme                             |
 
 `on` / `compact` 两种模式的渲染样例：[默认模式](./docs/tool-render-examples-default.md) · [紧凑模式](./docs/tool-render-examples-compact.md)
 

package/extensions/renderer/mouse/interaction.ts

@@ -49,6 +49,7 @@ import {
 	fullscreenLazyTui,
 	hideScrollButton,
 	dockScrollButtonActive,
+	isFullscreenAtBottom,
 	restoreOfficialScrollToEnd,
 	restoreNativeScrollIndicatorText,
 	syncOfficialScrollToEnd,
@@ -457,9 +458,9 @@ function handleFullscreenToolClick(tui: any, packet: SgrMousePacket): boolean {
 			// compact 摘要行自己记展开前的视口（收起时还原跟随），所以它先展开再停跟随：
 			// 顺序反了快照会记下「未跟随」，收起时就交不回官方 follow。
 			component.setExpanded(true);
-			keepViewportOnExpand(tui);
+			keepViewportOnExpand(tui, hit);
 		} else {
-			keepViewportOnExpand(tui);
+			keepViewportOnExpand(tui, hit);
 			component.setExpanded(true);
 		}
 		clearPendingCollapsePress();
@@ -509,13 +510,40 @@ function isSameExpandedRound(other: any, owner: any): boolean {
 }
 
 /**
- * 原地展开时停在当前滚动位置：transcript 跟随底部时，内容变高会把视口拖到底，
- * 点击的行和它上方的外层面板被顶出屏幕。展开前关掉跟随，点击行留在原位。
+ * 点击行在滚动视口里的位置：视口内行号与视口高度。布局树读不到时返回 null。
+ * leaf 不带 scrollView，视口是最近的带 scrollView 的祖先 box。
+ */
+function clickedRowInViewport(
+	hit: { box: any; localRow: number } | null | undefined,
+): { y: number; height: number } | null {
+	if (!hit?.box) return null;
+	let scrollBox: any = null;
+	for (let current = hit.box; current; current = current.parent) {
+		if (current.scrollView) {
+			scrollBox = current;
+			break;
+		}
+	}
+	const rect = scrollBox?.rect;
+	const height = Number(rect?.height);
+	const rowY = Number(hit.box.rect?.y);
+	if (!rect || !(height > 0) || !Number.isFinite(rowY)) return null;
+	return { y: rowY + hit.localRow - Number(rect.y), height };
+}
+
+/**
+ * 原地展开时视口怎么走。transcript 跟随底部时，内容变高会把视口拖到底，
+ * 点击的行和它上方的外层面板被顶出屏幕：展开前关掉跟随，点击行留在原位。
  * compact 摘要行同样适用：它的展开入口在 setExpanded 之后调用本函数（见调用点）。
+ *
+ * 例外是点击行已经落在视口下半屏：它下面没有足够空间，冻结只会把展开出来的
+ * 内容全推到屏幕外（贴着底部输入框时最常见）。这种位置保持跟随，让新内容顶上来。
  */
-function keepViewportOnExpand(tui: any): void {
+function keepViewportOnExpand(tui: any, hit?: { box: any; localRow: number } | null): void {
 	const view = tui.getPrimaryScrollView?.();
 	if (typeof view?.scrollTo !== "function" || typeof view.scrollTop !== "number") return;
+	const spot = clickedRowInViewport(hit);
+	if (spot && isFullscreenAtBottom(tui) && spot.y >= spot.height / 2) return;
 	view.scrollTo(view.scrollTop, { disableFollow: true });
 	// 已脱离底部跟随：dock 模式亮出回到底部按钮，新输出到来时仍有入口。
 	if (view.isFollowingEnd === false && dockScrollButtonActive()) setScrollButtonVisible(true);

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

@@ -194,6 +194,67 @@ function shellDurationText(toolName: string, context: any, isPartial: boolean):
 	return elapsed === undefined ? "" : formatToolDuration(elapsed);
 }
 
+/**
+ * 运行中的展开视图：与结束后同一份 Input / Output。
+ * 还没输出时用 Pending… 占位：空正文会被视图画成 Done，像已经跑完了。
+ * shell 的已用时间挂到视图尾部；取值函数每帧重算，秒数才跟着动画 tick 走。
+ */
+function renderRunningExpandedResult(toolName: string, result: any, context: any, theme: any): any {
+	const view = renderExpandedToolResult(
+		textFromResult(result) || "Pending…",
+		theme,
+		false,
+		context?.lastComponent,
+		context?.args,
+		context,
+		true,
+	);
+	if (isExpandedToolIoView(view) && SHELL_TOOL_NAMES.has(toolName)) {
+		view.setFooter(() => shellDurationText(toolName, context, true) || undefined);
+	}
+	return view;
+}
+
+/**
+ * 运行中的折叠行：`   ↳ Pending… · 12.4s · click to show more`。
+ * 提示必须留在行尾：collapsedHintHitbox 只认行尾，没有它这行既点不动也看不出能点。
+ * 已用时间在 render() 内取，动画 tick 才能带上新值。
+ */
+function renderRunningCollapsedResult(options: {
+	toolName: string;
+	context: any;
+	theme: any;
+	/** ask_user_question 的结果树用 1 格缩进，与它的 ├/└ 对齐。 */
+	prefix?: string;
+}): any {
+	const { toolName, context, theme, prefix } = options;
+	const toolCallId = context?.toolCallId;
+	const hintPrefix = theme.fg("dim", " · ");
+	const hint = hintPrefix + theme.fg("dim", showMoreHintText());
+	const hoveredHint = hintPrefix + theme.fg("text", showMoreHintText());
+	let cachedWidth: number | undefined;
+	let cachedBody: string | undefined;
+	let cachedLine: string | undefined;
+	let cachedHoveredLine: string | undefined;
+	return {
+		render(width: number) {
+			const elapsed = shellDurationText(toolName, context, true);
+			const body = elapsed ? `Pending… · ${elapsed}` : "Pending…";
+			if (cachedLine === undefined || cachedWidth !== width || cachedBody !== body) {
+				cachedWidth = width;
+				cachedBody = body;
+				cachedLine = theme.fg("muted", renderCollapsedToolResultToWidth(body, hint, width, prefix));
+				cachedHoveredLine = theme.fg(
+					"muted",
+					renderCollapsedToolResultToWidth(body, hoveredHint, width, prefix),
+				);
+			}
+			return [isToolCallHovered(toolCallId) ? cachedHoveredLine! : cachedLine];
+		},
+		invalidate(): void {},
+	};
+}
+
 /**
  * Agent 的 renderResult：与 pi-subagents 保持同样的分支，但收敛成 ccstyle 的 ↳ 行。
  * running/partial 转交原渲染器（只有它有 spinner frame 和 activity 文案）；
@@ -454,9 +515,9 @@ export function createCcstyleTool(
 			if (toolName === ASK_USER_QUESTION_TOOL_NAME) {
 				if (!options?.isPartial) setToolVisualState(context, isError ? "error" : "success");
 				if (options?.isPartial) {
-					// 折叠态 1 格缩进：与完成后的 ├/└ 对齐标题行的勾。
-					const pending = expanded ? "↳ Pending…" : " ↳ Pending…";
-					return new Text(theme.fg("muted", pending), 0, 0);
+					// 等待回答时也能展开看问题原文（Input 即 args.questions）；折叠态 1 格缩进。
+					if (expanded) return renderRunningExpandedResult(toolName, result, context, theme);
+					return renderRunningCollapsedResult({ toolName, context, theme, prefix: " ↳ " });
 				}
 				if (expanded) {
 					return renderExpandedToolResult(
@@ -479,21 +540,11 @@ export function createCcstyleTool(
 				});
 			}
 			if (options?.isPartial) {
+				// 运行中也给和结束后同一份 Input / Output：命令全文与已产生的输出。
+				if (expanded) return renderRunningExpandedResult(toolName, result, context, theme);
 				// 折叠态保持 3 格：与完成后的 `   ↳ …` 同列，工具跑完那行不横跳。
-				// 展开态贴左（Box 提供 1 格 pad）。
-				const pending = expanded ? "↳ Pending…" : "   ↳ Pending…";
-				if (!SHELL_TOOL_NAMES.has(toolName)) {
-					return new Text(theme.fg("muted", pending), 0, 0);
-				}
-				// shell 运行中报已用时间：数字在 render() 内取，动画 tick 才能带上新值。
-				return {
-					render(width: number) {
-						const elapsed = shellDurationText(toolName, context, true);
-						const suffix = elapsed ? theme.fg("dim", ` · ${elapsed}`) : "";
-						return [truncateToWidth(theme.fg("muted", pending) + suffix, width, "")];
-					},
-					invalidate(): void {},
-				};
+				if (context?.state) context.state.ccstyleIoView = undefined;
+				return renderRunningCollapsedResult({ toolName, context, theme });
 			}
 
 			// shell：结果定型时定一次结束时间，这一行之后不再变。

package/extensions/renderer/tool/grouping.ts

@@ -26,6 +26,7 @@ import { mcpToolTitle } from "./mcp-title.ts";
 import { collapseHintText, isToolTuiFullscreen, showMoreHintText } from "./names.ts";
 import {
 	contentRowRange,
+	hasVisibleText,
 	imagePlacement,
 	stripAnsi,
 	stripBackgroundAnsi,
@@ -364,10 +365,17 @@ function expandedToolRows(tool: any, width: number): string[] {
 	const cached = expandedToolRowsCache.get(paint);
 	if (cached) return cached;
 	const rendered = visibleLines(paint);
-	if (rendered.length) {
-		rendered[0] = stripLeadingStatusIcon(rendered[0])
+	// 首行的状态图标由组前缀给，子行里要剥掉。
+	const stripIcon = (line: string) =>
+		stripLeadingStatusIcon(line)
 			.replace(/^ +/, "")
 			.replace(/^((?:\x1b\[[0-?]*[ -/]*[@-~])*) +/, "$1");
+	// 剥完什么都没剩下（子卡首行只剩一个图标）就丢掉这一行，再对新的首行剥一次：
+	// 留着会多出一行只有 `├ ✓` 的空行，标题行也会带着图标和前缀叠成两个。
+	while (rendered.length) {
+		rendered[0] = stripIcon(rendered[0]);
+		if (hasVisibleText(rendered[0])) break;
+		rendered.shift();
 	}
 	const rows = rendered.length
 		? // 续行只剥外层 Box 的 1 格 left pad，保留 Input/Output 相对缩进

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

@@ -106,8 +106,11 @@ export class ExpandedToolIoView {
 
 	/** flushLeft：贴左渲染（外层 Box 负责 1 格 pad）；默认 false 保留 1 格前导空格。 */
 	private flushLeft: boolean;
-	/** 尾部附注（shell 的耗时）。挂到 Output 的 show-more 行上，没有那一行时单独成行。 */
-	private footer: string | undefined;
+	/** 尾部附注（shell 的耗时）。挂到 Output 的 show-more 行上，没有那一行时单独成行。
+	 * 传取值函数时每帧求值，值变了才重画：运行中的秒数要跟着动画 tick 走。 */
+	private footer: string | (() => string | undefined) | undefined;
+	/** 上一次求值结果，用来判断 footer 是否变化。 */
+	private footerText: string | undefined;
 
 	constructor(
 		theme: any,
@@ -224,7 +227,7 @@ export class ExpandedToolIoView {
 	}
 
 	/** 尾部附注（耗时等）。挂在 show-more 行上；无 show-more 行时单独成行。 */
-	setFooter(text: string | undefined): void {
+	setFooter(text: string | (() => string | undefined) | undefined): void {
 		if (this.footer === text) return;
 		this.footer = text;
 		this.invalidate();
@@ -268,6 +271,12 @@ export class ExpandedToolIoView {
 	}
 
 	render(width: number): string[] {
+		// footer 可以是取值函数（运行中的耗时），每帧重算；变了就丢掉行缓存。
+		const footer = typeof this.footer === "function" ? this.footer() : this.footer;
+		if (footer !== this.footerText) {
+			this.footerText = footer;
+			this.cachedLines = undefined;
+		}
 		if (this.cachedLines !== undefined && this.cachedWidth === width) {
 			return withIoViewMarkers(this, this.cachedLines);
 		}
@@ -397,7 +406,7 @@ export class ExpandedToolIoView {
 				limit: this.maxOutputLines,
 				continued: false,
 				section: "output",
-				footerNote: this.footer,
+				footerNote: footer,
 			});
 		} else {
 			this.truncated.output = outputWouldTruncate;
@@ -406,14 +415,14 @@ export class ExpandedToolIoView {
 				limit: this.maxOutputLines,
 				continued: false,
 				section: "output",
-				footerNote: this.footer,
+				footerNote: footer,
 			});
 		}
 
 		// 耗时挂在 Output 的 show-more 行上（与折叠态一样，提示留在行尾）；
 		// 没截断就没有那一行，才单独成行。放在最后追加，前面记下的行号不受影响。
-		if (this.footer && this.showMoreHeaderRows.output === undefined) {
-			pushRailLine(theme.fg("muted", this.footer), false);
+		if (footer && this.showMoreHeaderRows.output === undefined) {
+			pushRailLine(theme.fg("muted", footer), false);
 		}
 
 		this.cachedWidth = width;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-cc-extensions",
-	"version": "1.0.14",
+	"version": "1.0.15",
 	"license": "MIT",
 	"description": "Claude Code-style TUI output with some personal touches and handy utilities.",
 	"type": "module",
@@ -31,7 +31,9 @@
 		],
 		"themes": [
 			"./themes/cc-dark.json",
-			"./themes/cc-light.json"
+			"./themes/cc-light.json",
+			"./themes/cc-dark-hc.json",
+			"./themes/cc-light-hc.json"
 		],
 		"image": "https://raw.githubusercontent.com/minuque/pi-cc-extensions/main/assets/readme/preview.webp",
 		"video": "https://github.com/minuque/pi-cc-extensions/releases/download/v0.9.4/demo.mp4"

package/themes/cc-dark-hc.json

@@ -0,0 +1,92 @@
+{
+	"$schema": "https://pi.dev/schemas/theme.schema.json",
+	"name": "cc-dark-hc",
+	"appearance": "dark",
+	"vars": {
+		"fg": "#d6dde3",
+		"fgMuted": "#929eab",
+		"fgSubtle": "#768494",
+		"canvas": "#0d1117",
+		"canvasSubtle": "#1c2033",
+		"canvasInset": "#161a2b",
+		"border": "#1c2d44",
+		"borderMuted": "#16233a",
+		"blue": "#4f9eff",
+		"blueBright": "#79c0ff",
+		"green": "#37b34a",
+		"red": "#ff6e62",
+		"redSoft": "#ff7b72",
+		"yellow": "#cb9214",
+		"orange": "#f0883e",
+		"orangeSoft": "#ffa657",
+		"purple": "#be8fff",
+		"pink": "#f778ba",
+		"cyan": "#39c5cf",
+		"selection": "#1a4480",
+		"diffAddBg": "#0f2a24",
+		"diffDelBg": "#261418"
+	},
+	"colors": {
+		"accent": "blue",
+		"border": "border",
+		"borderAccent": "blue",
+		"borderMuted": "borderMuted",
+		"success": "green",
+		"error": "#ffc4bd",
+		"warning": "yellow",
+		"muted": "fgMuted",
+		"dim": "#71717a",
+		"text": "#f2f6fa",
+		"thinkingText": "#c6d0dc",
+		"selectedBg": "selection",
+		"scrollbarTrack": "borderMuted",
+		"scrollbarThumb": "#3a5274",
+		"searchMatchBg": "#1e1800",
+		"searchMatchText": "fg",
+		"userMessageBg": "#17375a",
+		"userMessageText": "#f2f6fa",
+		"customMessageBg": "borderMuted",
+		"customMessageText": "fgMuted",
+		"customMessageLabel": "blue",
+		"toolPendingBg": "#1a2534",
+		"toolSuccessBg": "#123c2b",
+		"toolErrorBg": "#4b1b21",
+		"toolTitle": "#f2f6fa",
+		"toolOutput": "#c6d0dc",
+		"mdHeading": "#b8ddff",
+		"mdLink": "#a3d0ff",
+		"mdLinkUrl": "#c6d0dc",
+		"mdCode": "#a5d6ff",
+		"mdCodeBlock": "#f2f6fa",
+		"mdCodeBlockBorder": "#6b95c7",
+		"mdQuote": "#c6d0dc",
+		"mdQuoteBorder": "#6b95c7",
+		"mdHr": "#6b95c7",
+		"mdListBullet": "#b8ddff",
+		"toolDiffAdded": "green",
+		"toolDiffRemoved": "red",
+		"toolDiffContext": "fgMuted",
+		"syntaxComment": "#c6d0dc",
+		"syntaxKeyword": "#ffc7c0",
+		"syntaxFunction": "#e0c9ff",
+		"syntaxVariable": "#ffc99b",
+		"syntaxString": "#a5d6ff",
+		"syntaxNumber": "#b8ddff",
+		"syntaxType": "#ffc98f",
+		"syntaxOperator": "#ffc7c0",
+		"syntaxPunctuation": "#f2f6fa",
+		"thinkingOff": "fgMuted",
+		"thinkingMinimal": "fgSubtle",
+		"thinkingLow": "blue",
+		"thinkingMedium": "blue",
+		"thinkingHigh": "blueBright",
+		"thinkingXhigh": "cyan",
+		"thinkingMax": "cyan",
+		"bashMode": "green"
+	},
+	"export": {
+		"pageBg": "#0a1424",
+		"cardBg": "canvasSubtle",
+		"infoBg": "#122544"
+	}
+}

package/themes/cc-light-hc.json

@@ -0,0 +1,92 @@
+{
+	"$schema": "https://pi.dev/schemas/theme.schema.json",
+	"name": "cc-light-hc",
+	"appearance": "light",
+	"vars": {
+		"fg": "#1e252a",
+		"fgMuted": "#3e4a56",
+		"fgSubtle": "#46525e",
+		"canvas": "#ffffff",
+		"canvasSubtle": "#d6e1f1",
+		"canvasInset": "#e3ebf5",
+		"border": "#7391c2",
+		"borderMuted": "#a8bdd9",
+		"blue": "#0058ad",
+		"blueBright": "#004776",
+		"green": "#005a16",
+		"red": "#a81417",
+		"redSoft": "#9b1b1f",
+		"yellow": "#765300",
+		"orange": "#843f00",
+		"orangeSoft": "#663600",
+		"purple": "#65339c",
+		"pink": "#931662",
+		"cyan": "#005359",
+		"selection": "#c5d6ee",
+		"diffAddBg": "#c3dcd0",
+		"diffDelBg": "#f0d5d8"
+	},
+	"colors": {
+		"accent": "blue",
+		"border": "border",
+		"borderAccent": "blue",
+		"borderMuted": "borderMuted",
+		"success": "green",
+		"error": "#6f0307",
+		"warning": "yellow",
+		"muted": "fgMuted",
+		"dim": "#4e5966",
+		"text": "#0a0f14",
+		"thinkingText": "#262e36",
+		"selectedBg": "selection",
+		"scrollbarTrack": "borderMuted",
+		"scrollbarThumb": "#5d84b8",
+		"searchMatchBg": "#f3e4b0",
+		"searchMatchText": "fg",
+		"userMessageBg": "#8ecdfa",
+		"userMessageText": "#0a0f14",
+		"customMessageBg": "#c5d3e6",
+		"customMessageText": "fgMuted",
+		"customMessageLabel": "blue",
+		"toolPendingBg": "canvasSubtle",
+		"toolSuccessBg": "#8ce3b8",
+		"toolErrorBg": "#ffbdba",
+		"toolTitle": "#0a0f14",
+		"toolOutput": "#262e36",
+		"mdHeading": "#00294f",
+		"mdLink": "#003263",
+		"mdLinkUrl": "#262e36",
+		"mdCode": "#00294f",
+		"mdCodeBlock": "#0a0f14",
+		"mdCodeBlockBorder": "#2f4d75",
+		"mdQuote": "#262e36",
+		"mdQuoteBorder": "#4a6d9e",
+		"mdHr": "#2f4d75",
+		"mdListBullet": "#00294f",
+		"toolDiffAdded": "green",
+		"toolDiffRemoved": "red",
+		"toolDiffContext": "fgMuted",
+		"syntaxComment": "#262e36",
+		"syntaxKeyword": "#6f0307",
+		"syntaxFunction": "#3f1a66",
+		"syntaxVariable": "#552800",
+		"syntaxString": "#00294f",
+		"syntaxNumber": "#00294f",
+		"syntaxType": "#522500",
+		"syntaxOperator": "#6f0307",
+		"syntaxPunctuation": "#0a0f14",
+		"thinkingOff": "fgMuted",
+		"thinkingMinimal": "fgSubtle",
+		"thinkingLow": "blue",
+		"thinkingMedium": "blue",
+		"thinkingHigh": "blueBright",
+		"thinkingXhigh": "cyan",
+		"thinkingMax": "cyan",
+		"bashMode": "green"
+	},
+	"export": {
+		"pageBg": "#f4f7fb",
+		"cardBg": "canvasSubtle",
+		"infoBg": "#d0dff2"
+	}
+}