@yinan_chen/pi-claude-code-ui 0.5.0 → 0.7.0

package/README.md

@@ -2,6 +2,12 @@
 
 ![preview](assets/preview.png)
 
+### 演示
+
+![demo](assets/demo.mp4)
+
+> 若上方未内嵌播放，直接下载观看：[assets/demo.mp4](assets/demo.mp4)
+
 > 原名 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`，不依赖适配（v0.5.0）
+- **第三方渲染全接管** — 任何扩展的卡片（含未来未适配的）自动渲染为统一的 `● 卡片` 风格，工具/消息/条目三层全覆盖，零配置零适配；分发层拦截不受加载顺序影响（v0.7.0）
 - **富 diff 渲染** — edit/write 工具的语法高亮 diff（vendored, MIT）
 - **子代理面板** — 后台 agent 状态一目了然
 - **工作状态提示** — working message / running effect
@@ -46,8 +52,11 @@ pi -e npm:@yinan_chen/pi-claude-code-ui
   "stickyIncludeCustom": false,
   "skillResumePreview": true,
   "resultPrefix": "└",
-  "resultPrefixGap": 0,
+  "resultPrefixGap": 1,
   "normalizeForeignRenderers": true,
+  "workflowRendering": "claude",
+  "foreignCardStyle": "generic",
+  "foreignCardSkip": [],
   "diff": {
     "diffViewMode": "auto",
     "diffIndicatorMode": "bars",
@@ -73,8 +82,11 @@ pi -e npm:@yinan_chen/pi-claude-code-ui
 | `stickyIncludeCustom` | `false` | 吸附泡是否包含扩展注入/跨会话转发的旁路消息 |
 | `skillResumePreview` | `true` | `/resume` 列表预览是否折回 `[skill] 名` 单行 |
 | `resultPrefix` | `"└"` | 工具结果行拐角前缀（制表符族，等宽字体最稳；可换 `↳` 或 Claude Code 官方的 `⎿`，后两者在部分字体下会变宽） |
-| `resultPrefixGap` | `0` | 前缀符号与内容之间的空格数（0–4） |
+| `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.5.0",
+	"version": "0.7.0",
 	"description": "Claude Code-style UI for Pi: transcript view, rich diffs, subagent panels and working-message status.",
 	"type": "module",
 	"license": "MIT",
@@ -26,7 +26,8 @@
 		"extensions": [
 			"./src/index.ts"
 		],
-		"image": "https://github.com/chenyn273/pi-claude-code-ui/raw/main/assets/preview.png"
+		"image": "https://github.com/chenyn273/pi-claude-code-ui/raw/main/assets/preview.png",
+		"video": "https://github.com/chenyn273/pi-claude-code-ui/raw/main/assets/demo.mp4"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-coding-agent": "*",

package/src/claude-tools.ts

@@ -4,7 +4,7 @@ import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works
 import { homedir } from "node:os";
 
 /** UI 符号集（lean-tidy.json 可覆盖；见 index.ts loadConfig 的 resultPrefix）。 */
-export const SYMBOLS = { resultPrefix: "└", resultPrefixGap: 0 };
+export const SYMBOLS = { resultPrefix: "└", resultPrefixGap: 1 };
 
 /** 结果行缩进对：first = 3 空格 + 符号 + gap 空格；cont = 4 + gap 空格。运行时读 SYMBOLS。 */
 export function resultIndent(theme: any): { first: string; cont: string } {

package/src/foreign-normalizer.ts

@@ -38,9 +38,28 @@ export function normalizeForeignLines(lines: readonly string[]): string[] {
 }
 
 /**
- * patch 渲染宿主组件类的 prototype.render（幂等，FLAG 防重复包裹）。
- * wrapper 不做任何本地决策，全部经 __leanTidyImpl trampoline 转发。
+ * patch 渲染分发器（ExtensionRunner：同时有 getMessageRenderer + getEntryRenderer 原型方法）。
+ * 分发层拦截：不受包加载顺序影响，__leanTidyImpl.rendererOverride(customType) 命中即改道。
  */
+export function patchRendererDispatch(cls: any): boolean {
+	const proto = cls?.prototype;
+	if (!proto || typeof proto.getMessageRenderer !== "function" || typeof proto.getEntryRenderer !== "function" || proto[FLAG]) return false;
+	proto[FLAG] = true;
+	for (const method of ["getMessageRenderer", "getEntryRenderer"]) {
+		const orig = proto[method];
+		proto[method] = function (customType: string) {
+			const impl = (globalThis as any).__leanTidyImpl;
+			try {
+				const override = impl?.rendererOverride?.(customType);
+				if (override) return override;
+			} catch {}
+			return orig.call(this, customType);
+		};
+	}
+	return true;
+}
+
+/** patch 渲染宿主组件类的 prototype.render（幂等，FLAG 防重复包裹）；wrapper 全部经 __leanTidyImpl trampoline 转发。 */
 export function patchForeignHost(cls: any): boolean {
 	const proto = cls?.prototype;
 	if (!proto || typeof proto.render !== "function" || proto[FLAG]) return false;

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

@@ -26,11 +26,12 @@ import { homedir } from "node:os";
 import { Container } from "@earendil-works/pi-tui";
 import { getPiRuntime, VERIFIED_PI_VERSION } from "./pi-runtime.ts";
 import { createClaudeView } from "./claude-view.ts";
-import registerSubagentPanels from "./subagent-panel.ts";
+import registerSubagentPanels, { createSubagentRenderer, createWorkflowRenderer, registerWorkflowPanels } from "./subagent-panel.ts";
 import stickyFirstMessage from "./sticky-first-message.ts";
 import registerSkillRecollapse from "./skill-block-recollapse.ts";
 import { SYMBOLS } from "./claude-tools.ts";
-import { normalizeForeignLines, patchForeignHost } from "./foreign-normalizer.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";
@@ -88,6 +89,12 @@ interface Config {
 	resultPrefixGap: number;
 	/** 第三方扩展渲染输出的行首 ⎿ 是否规范化为 resultPrefix（默认 true）。 */
 	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 {
@@ -105,8 +112,11 @@ function loadConfig(): Config {
 		stickyIncludeCustom: false,
 		skillResumePreview: true,
 		resultPrefix: "└",
-		resultPrefixGap: 0,
+		resultPrefixGap: 1,
 		normalizeForeignRenderers: true,
+		workflowRendering: "claude",
+		foreignCardStyle: "generic",
+		foreignCardSkip: [],
 	};
 	diffDisplayConfig = { ...DEFAULT_TOOL_DISPLAY_CONFIG };
 	try {
@@ -130,6 +140,9 @@ function loadConfig(): Config {
 		if (typeof data?.resultPrefix === "string" && data.resultPrefix.trim()) config.resultPrefix = data.resultPrefix;
 		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 };
 		}
@@ -352,6 +365,7 @@ function patchModule(mod: any, where: string): number {
 		if (typeof cls !== "function") continue;
 		let did = false;
 		if (key === "CustomMessageComponent" || key === "CustomEntryComponent") did = patchForeignHost(cls);
+		else if (typeof (cls.prototype as any)?.getMessageRenderer === "function" && typeof (cls.prototype as any)?.getEntryRenderer === "function") did = patchRendererDispatch(cls);
 		else if (key.includes("ToolExecution")) did = patchToolExec(cls);
 		else if (key.includes("AssistantMessage")) did = patchAssistant(cls);
 		else if (key.includes("UserMessage")) did = patchUserMessage(cls);
@@ -398,8 +412,15 @@ export default async function leanTidy(pi: ExtensionAPI): Promise<void> {
 	// Subagent 通知接管必须发生在加载期（registerMessageRenderer 仅 factory 内合法）：
 	// lean-tidy 先于 npm 包加载，首个命中 customType 的渲染器胜出（一南 2026-02-12）。
 	// redraw 闭包延迟读 LAST_MODE（hookMode 后才看得到 TUI）。
+	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, { redraw: () => { LAST_MODE?.ui?.requestRender?.(); } });
+		registerSubagentPanels(pi, hooks);
+	}
+	if (config.workflowRendering === "claude") {
+		registerWorkflowPanels(pi, hooks);
 	}
 	if (DEBUG) {
 		try { writeFileSync(LOG, `=== lean-tidy load #${loadCounter} ${new Date().toISOString()} ===\n`); } catch {}
@@ -432,6 +453,13 @@ 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 config.foreignCardStyle === "generic" ? genericCardRenderer : undefined;
+		},
 	} as RuntimeImpl;
 	for (const method of IMPL_METHODS) {
 		impl[method] = (self, orig, ...args) => {

package/src/subagent-panel.ts

@@ -101,11 +101,12 @@ function panelLines(d: any, expanded: boolean, theme: any, width: number): strin
 	return out;
 }
 
-export default function registerSubagentPanels(pi: ExtensionAPI, hooks: SubagentPanelHooks): void {
+/** Claude 风格的 subagent-notification 渲染器（与注册解耦，供分发层拦截复用）。 */
+export function createSubagentRenderer(hooks: SubagentPanelHooks) {
 	// 每个 agent 条目（details 对象，含 others 内的条目）独立的点击展开状态。
 	const clickExpanded = new WeakMap<object, boolean>();
 
-	pi.registerMessageRenderer("subagent-notification", (message: any, options: PanelOptions, theme: any) => {
+	return (message: any, options: PanelOptions, theme: any) => {
 		const details = message?.details;
 		if (!details || typeof details !== "object") return undefined;
 
@@ -140,5 +141,47 @@ export default function registerSubagentPanels(pi: ExtensionAPI, hooks: Subagent
 				return { handled: true };
 			},
 		};
-	});
+	};
+}
+
+export default function registerSubagentPanels(pi: ExtensionAPI, hooks: SubagentPanelHooks): void {
+	pi.registerMessageRenderer("subagent-notification", createSubagentRenderer(hooks));
+}
+
+/** Claude 风格的 subagents:workflow entry 渲染器（v0.6.0；data 契约见 pi-subagents dist/workflow/entry.js）。 */
+export function createWorkflowRenderer(hooks: SubagentPanelHooks) {
+	return (entry: any, options: PanelOptions, theme: any) => {
+		const d = entry?.data;
+		if (!d || typeof d !== "object") return undefined;
+		const failed = d?.status !== "completed";
+		const icon = fg(theme, failed ? "error" : "success", "●");
+		const first = branch(theme);
+		const name = oneLine(d?.name) || "workflow";
+		const ms = typeof d?.endTime === "number" && typeof d?.startTime === "number" ? d.endTime - d.startTime : NaN;
+		const status = failed ? `Failed (${String(d?.status ?? "unknown")})` : `Completed in ${msText(ms)}`;
+		const stats: string[] = [];
+		if (typeof d?.totalTokens === "number" && d.totalTokens > 0) stats.push(tokensText(d.totalTokens));
+		if (typeof d?.agentCount === "number" && d.agentCount > 0) stats.push(`${d.agentCount} agent${d.agentCount === 1 ? "" : "s"}`);
+		let tail = fg(theme, "muted", status);
+		if (stats.length) tail += fg(theme, "dim", ` · ${stats.join(" · ")}`);
+
+		return {
+			render(width: number): string[] {
+				const lines = [fit(` ${icon} ${bold(theme, "Workflow")}(${name})`, width)];
+				lines.push(...prefixed(tail, width, first, BRANCH_REST()));
+				if (options.expanded && d?.meta && typeof d.meta === "object") {
+					for (const line of linesOf(JSON.stringify(d.meta, null, 2))) {
+						lines.push(...prefixed(fg(theme, "dim", line), width, first, BRANCH_REST()));
+					}
+				}
+				return lines;
+			},
+			invalidate(): void {},
+		};
+	};
+}
+
+/** 注册（顺序可能被其他包抢先；分发层拦截保证最终生效，见 index.ts rendererOverride）。 */
+export function registerWorkflowPanels(pi: ExtensionAPI, hooks: SubagentPanelHooks): void {
+	pi.registerEntryRenderer("subagents:workflow", createWorkflowRenderer(hooks));
 }