@yinan_chen/pi-claude-code-ui 0.6.0 → 0.8.0

package/README.md

@@ -2,6 +2,12 @@
 
 ![preview](assets/preview.png)
 
+### 演示
+
+![demo](https://github.com/user-attachments/assets/d264935a-79fc-434e-be97-05c8210144fe)
+
+动图预览（不渲染视频的平台，如 npm）： ![gif](assets/demo.gif)
+
 > 原名 lean-tidy —— Claude Code 风格的 Pi 界面增强扩展：Claude 式对话转录视图、富文本 diff 渲染、子代理面板与工作状态提示。
 
 ## 安装
@@ -21,7 +27,7 @@ pi -e npm:@yinan_chen/pi-claude-code-ui
 - **Claude 式视图** — 对话转录适配器，Pi 原生回退
 - **吸附消息泡（sticky）** — 滚动时顶部吸附显示当前正在回答的用户消息原文，点击回位（v0.2.0 内置，原 sticky-first-message 扩展）
 - **Skill 折叠（recollapse）** — 展开的 skill 全文自动折回 `/skill:名 参数`，覆盖 /tree、/fork 回填等四处盲区（v0.2.0 内置，原 skill-block-recollapse 扩展）
-- **第三方渲染规范化** — 任何扩展的卡片（如 pi-subagents 的 workflow 卡）行首 `⎿` 自动统一为 `resultPrefix`；subagent / workflow 卡片整体接管为 Claude 风格，分发层拦截不受加载顺序影响（v0.6.0）
+- **第三方渲染全接管** — 任何扩展的卡片（含未来未适配的）自动渲染为统一的 `● 卡片` 风格，工具/消息/条目三层全覆盖，零配置零适配；分发层拦截不受加载顺序影响（v0.7.0）
 - **富 diff 渲染** — edit/write 工具的语法高亮 diff（vendored, MIT）
 - **子代理面板** — 后台 agent 状态一目了然
 - **工作状态提示** — working message / running effect
@@ -48,6 +54,9 @@ pi -e npm:@yinan_chen/pi-claude-code-ui
   "resultPrefix": "└",
   "resultPrefixGap": 1,
   "normalizeForeignRenderers": true,
+  "workflowRendering": "claude",
+  "foreignCardStyle": "generic",
+  "foreignCardSkip": [],
   "diff": {
     "diffViewMode": "auto",
     "diffIndicatorMode": "bars",
@@ -76,6 +85,8 @@ pi -e npm:@yinan_chen/pi-claude-code-ui
 | `resultPrefixGap` | `1` | 前缀符号与内容之间的空格数（0–4） |
 | `normalizeForeignRenderers` | `true` | 第三方扩展卡片输出里行首 `⎿` 自动规范化为 `resultPrefix`（任何未适配扩展的渲染都能统一风格；关闭可看第三方原版） |
 | `workflowRendering` | `"claude"` | workflow 完成卡片样式：`● Workflow(name)` 风格 / `native` 保留包内卡片。分发层拦截实现，不受包加载顺序影响 |
+| `foreignCardStyle` | `"generic"` | 未适配扩展的卡片：自动接管为通用 `● 卡片`（零配置）；`symbols` = 仅统一符号不接管布局 |
+| `foreignCardSkip` | `[]` | 不接管的 customType 黑名单（交互型第三方卡片异常时按类型跳过） |
 | `diff.diffViewMode` | `"auto"` | diff 视图：`auto`/`split`/`unified` |
 | `diff.diffIndicatorMode` | `"bars"` | 变更指示条：`bars`/`classic`/`none` |
 | `diff.diffSplitMinWidth` | `120` | 宽于此才用 split 视图 |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@yinan_chen/pi-claude-code-ui",
-	"version": "0.6.0",
+	"version": "0.8.0",
 	"description": "Claude Code-style UI for Pi: transcript view, rich diffs, subagent panels and working-message status.",
 	"type": "module",
 	"license": "MIT",

package/src/generic-card.ts

@@ -0,0 +1,75 @@
+/**
+ * generic-card — 未适配 customType 的通用 Claude 风格卡片（v0.7.0）。
+ *
+ * foreignCardStyle="generic"（默认）时，任何没有内置适配的 custom 消息 /
+ * 会话条目都自动渲染为：
+ *
+ *    ● Label
+ *    └ 首行内容 (ctrl+o to expand)
+ *
+ * 全自动、零配置；点击卡片 toggle 展开/折叠。内置适配表（subagent-notification /
+ * subagents:workflow，信息更丰富）优先于本通用卡片；第三方交互型卡片异常时可用
+ * lean-tidy.json 的 foreignCardSkip 黑名单按 customType 跳过（保留原生渲染）。
+ *
+ * 一个 renderer 同时服务 getMessageRenderer 与 getEntryRenderer 两个分发点：
+ * payload 兼容 message（content）与 entry（data），customType 两者都有。
+ */
+import { bold, expandHint, fg, fit, linesOf, oneLine, prefixed, resultIndent, RESULT_CONT } from "./claude-tools.ts";
+
+export interface GenericCardHooks {
+	/** 点击切换展开后请求整屏重绘（TUI requestRender）。 */
+	redraw(): void;
+}
+
+const clickExpanded = new WeakMap<object, boolean>();
+
+function labelOf(customType: string): string {
+	const tail = customType.split(":").pop() ?? customType;
+	return tail.charAt(0).toUpperCase() + tail.slice(1);
+}
+
+/** 内容来源：message.content / entry.data（对象优先取 name/description，否则 JSON）。 */
+function bodyOf(payload: any): string {
+	const source = typeof payload?.content === "string" ? payload.content : payload?.data;
+	if (typeof source === "string") return source;
+	if (source && typeof source === "object") {
+		const name = typeof source.name === "string" ? source.name : "";
+		const desc = typeof source.description === "string" ? source.description : "";
+		if (name || desc) return [name, desc].filter(Boolean).join(" — ");
+		try { return JSON.stringify(source, null, 2); } catch { return String(source); }
+	}
+	return source === undefined || source === null ? "" : String(source);
+}
+
+export function createGenericCardRenderer(hooks: GenericCardHooks) {
+	return (payload: any, options: { expanded?: boolean }, theme: any) => {
+		const customType = String(payload?.customType ?? "card");
+		const key = payload && typeof payload === "object" ? payload : undefined;
+		const label = labelOf(customType);
+		const first = resultIndent(theme).first;
+		const icon = fg(theme, "muted", "●");
+
+		return {
+			render(width: number): string[] {
+				const body = linesOf(bodyOf(payload)).filter((l: string) => l.trim() !== "");
+				const expanded = options?.expanded === true || (key !== undefined && clickExpanded.get(key) === true);
+				const lines = [fit(` ${icon} ${bold(theme, label)}`, width)];
+				const visible = body.length ? body : ["(empty)"];
+				if (expanded) {
+					for (const line of visible) lines.push(...prefixed(fg(theme, "dim", line), width, first, RESULT_CONT()));
+				} else {
+					const head = oneLine(visible[0]);
+					lines.push(...prefixed(fg(theme, "muted", head) + expandHint(theme), width, first, RESULT_CONT()));
+				}
+				return lines;
+			},
+			invalidate(): void {},
+			handleMouse(event: any): any {
+				if (event?.type !== "click" || event?.button !== "left" || key === undefined) return undefined;
+				clickExpanded.set(key, clickExpanded.get(key) !== true);
+				try { hooks.redraw(); } catch {}
+				return { handled: true };
+			},
+		};
+	};
+}

package/src/index.ts

@@ -31,6 +31,7 @@ import stickyFirstMessage from "./sticky-first-message.ts";
 import registerSkillRecollapse from "./skill-block-recollapse.ts";
 import { SYMBOLS } from "./claude-tools.ts";
 import { normalizeForeignLines, patchForeignHost, patchRendererDispatch } from "./foreign-normalizer.ts";
+import { createGenericCardRenderer } from "./generic-card.ts";
 import registerWorkingMessage from "./working-message.ts";
 // Vendored rich diff (MIT; see vendor/diff/ATTRIBUTION.md).
 import { renderRichToolResult, WriteExecutionMetadataStore } from "./vendor/diff/index.ts";
@@ -90,6 +91,10 @@ interface Config {
 	normalizeForeignRenderers: boolean;
 	/** workflow 完成卡片（subagents:workflow entry）样式：claude = ● Workflow(name) 风格（默认）；native = 保留包内卡片。 */
 	workflowRendering: "claude" | "native";
+	/** 未适配 customType 的卡片：generic = 自动接管为通用 ● 卡片（默认）；symbols = 仅统一符号不接管布局。 */
+	foreignCardStyle: "generic" | "symbols";
+	/** 不接管的 customType 黑名单（保留第三方/原生渲染）。 */
+	foreignCardSkip: string[];
 }
 
 function loadConfig(): Config {
@@ -110,6 +115,8 @@ function loadConfig(): Config {
 		resultPrefixGap: 1,
 		normalizeForeignRenderers: true,
 		workflowRendering: "claude",
+		foreignCardStyle: "generic",
+		foreignCardSkip: [],
 	};
 	diffDisplayConfig = { ...DEFAULT_TOOL_DISPLAY_CONFIG };
 	try {
@@ -134,6 +141,8 @@ function loadConfig(): Config {
 		if (Number.isInteger(data?.resultPrefixGap) && data.resultPrefixGap >= 0 && data.resultPrefixGap <= 4) config.resultPrefixGap = data.resultPrefixGap;
 		if (typeof data?.normalizeForeignRenderers === "boolean") config.normalizeForeignRenderers = data.normalizeForeignRenderers;
 		if (data?.workflowRendering === "claude" || data?.workflowRendering === "native") config.workflowRendering = data.workflowRendering;
+		if (data?.foreignCardStyle === "generic" || data?.foreignCardStyle === "symbols") config.foreignCardStyle = data.foreignCardStyle;
+		if (Array.isArray(data?.foreignCardSkip) && data.foreignCardSkip.every((x: unknown) => typeof x === "string")) config.foreignCardSkip = data.foreignCardSkip;
 		if (data?.diff && typeof data.diff === "object" && !Array.isArray(data.diff)) {
 			diffDisplayConfig = { ...DEFAULT_TOOL_DISPLAY_CONFIG, ...data.diff };
 		}
@@ -406,6 +415,7 @@ export default async function leanTidy(pi: ExtensionAPI): Promise<void> {
 	const hooks = { redraw: () => { LAST_MODE?.ui?.requestRender?.(); } };
 	const subagentRenderer = createSubagentRenderer(hooks);
 	const workflowRenderer = createWorkflowRenderer(hooks);
+	const genericCardRenderer = createGenericCardRenderer(hooks);
 	if (config.subagentRendering === "claude") {
 		registerSubagentPanels(pi, hooks);
 	}
@@ -443,11 +453,12 @@ export default async function leanTidy(pi: ExtensionAPI): Promise<void> {
 			claude && chat ? claude.renderChat(container, width) : Container.prototype.render.call(container, width),
 		normalizeForeign: (lines: readonly string[]): string[] =>
 			config.normalizeForeignRenderers ? normalizeForeignLines(lines) : (lines as string[]),
-		/** 分发层拦截：命中已知类型则改道为我们自己的渲染器，不受包加载顺序影响。 */
+		/** 分发层拦截：内置适配表优先，其余 generic 自动接管，黑名单跳过；不受包加载顺序影响。 */
 		rendererOverride: (customType: string): any => {
+			if (config.foreignCardSkip.includes(customType)) return undefined;
 			if (customType === "subagent-notification") return config.subagentRendering === "claude" ? subagentRenderer : undefined;
 			if (customType === "subagents:workflow") return config.workflowRendering === "claude" ? workflowRenderer : undefined;
-			return undefined;
+			return config.foreignCardStyle === "generic" ? genericCardRenderer : undefined;
 		},
 	} as RuntimeImpl;
 	for (const method of IMPL_METHODS) {

package/src/subagent-panel.ts

@@ -95,8 +95,9 @@ function panelLines(d: any, expanded: boolean, theme: any, width: number): strin
 			out.push(...prefixed(fg(theme, "dim", `transcript: ${d.outputFile}`), width, first, BRANCH_REST()));
 		}
 	} else if (typeof d?.resultPreview === "string" && d.resultPreview.trim()) {
-		// 折叠态不显示正文，但保留可展开提示（有正文才提示）
-		out.push(...prefixed(expandHint(theme), width, first, BRANCH_REST()));
+		// 折叠态不显示正文，但保留可展开提示（有正文才提示）；格式与工具块 `… +N lines (ctrl+o to expand)` 一致。
+		const hidden = linesOf(d.resultPreview).length;
+		out.push(...prefixed(fg(theme, "dim", `… +${hidden} line${hidden === 1 ? "" : "s"}`) + expandHint(theme), width, first, BRANCH_REST()));
 	}
 	return out;
 }

package/src/vendor/diff/diff-component.ts

@@ -17,6 +17,8 @@ export interface DiffRenderOptions {
 	previousContent?: string;
 	fileExistedBeforeWrite?: boolean;
 	headerLabel?: string;
+	/** 折叠态隐藏的正文行数（write 折叠提示 `… +N lines` 用）。 */
+	collapsedHiddenLines?: number;
 	/** Live hover state for the collapsed hint row (muted → text on hover). */
 	isHovered?: () => boolean;
 	invalidate?: () => void;

package/src/vendor/diff/diff-write-render.ts

@@ -1,6 +1,6 @@
 import { Text, truncateToWidth, visibleWidth, type Component } from "@earendil-works/pi-tui";
 import { sanitizeToolResultText } from "../tool-result-sanitize.ts";
-import { showMoreHintText } from "../show-more-hint.ts";
+import { expandShortcutText } from "../show-more-hint.ts";
 import { splitWriteContentLines } from "./diff-text.ts";
 import {
 	collectDiffStats,
@@ -291,21 +291,26 @@ 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`: `… +N lines (ctrl+o to expand)`（与工具块/subagent 折叠提示同款；无行数时退化为裸快捷键提示）。 */
 function renderWriteCollapsedHintLine(
 	wasOverwrite: boolean,
 	width: number,
 	theme: DiffTheme,
 	hovered: boolean,
 	headerLabel?: string,
+	hiddenCount?: number,
 ): string[] {
 	const safeWidth = normalizeDiffRenderWidth(width);
 	if (safeWidth === 0) {
 		return [""];
 	}
-	const actionLabel = headerLabel?.trim() || (wasOverwrite ? "overwritten" : "created");
-	const clickLabel = showMoreHintText();
-	const candidates = [`↳ ${actionLabel} • ${clickLabel}`, `↳ ${actionLabel}`, actionLabel, "…"];
+	void wasOverwrite; void headerLabel;
+	const clickLabel = `(${expandShortcutText()} to expand)`;
+	const counted =
+		typeof hiddenCount === "number" && hiddenCount > 0
+			? `… +${hiddenCount} line${hiddenCount === 1 ? "" : "s"} ${clickLabel}`
+			: "";
+	const candidates = [counted, clickLabel.slice(1, -1), "…"].filter((candidate) => candidate !== "");
 	let text = candidates[candidates.length - 1] ?? "…";
 	for (const candidate of candidates) {
 		if (visibleWidth(candidate) <= safeWidth) {
@@ -446,6 +451,7 @@ export function renderWriteDiffResult(
 					theme,
 					hovered,
 					options.headerLabel,
+					options.collapsedHiddenLines,
 				);
 				return cache.set(
 					safeWidth,

package/src/vendor/diff/index.ts

@@ -67,13 +67,15 @@ export function renderRichToolResult(
 	if (metadata.diffUnavailableReason) {
 		return unavailableComponent(metadata.diffUnavailableReason, theme);
 	}
+	const writeContent = typeof context?.args?.content === "string" ? context.args.content : undefined;
 	return renderWriteDiffResult(
-		typeof context?.args?.content === "string" ? context.args.content : undefined,
+		writeContent,
 		{
 			expanded,
 			filePath,
 			previousContent: metadata.previousContent,
 			fileExistedBeforeWrite: metadata.fileExistedBeforeWrite,
+			collapsedHiddenLines: writeContent !== undefined ? writeContent.split(/\r?\n/).length : undefined,
 			isHovered: options?.isHovered,
 			invalidate: () => context?.invalidate?.(),
 		},