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

package/README.md

@@ -21,7 +21,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）
+- **第三方渲染规范化** — 任何扩展的卡片（如 pi-subagents 的 workflow 卡）行首 `⎿` 自动统一为 `resultPrefix`；subagent / workflow 卡片整体接管为 Claude 风格，分发层拦截不受加载顺序影响（v0.6.0）
 - **富 diff 渲染** — edit/write 工具的语法高亮 diff（vendored, MIT）
 - **子代理面板** — 后台 agent 状态一目了然
 - **工作状态提示** — working message / running effect
@@ -46,7 +46,7 @@ pi -e npm:@yinan_chen/pi-claude-code-ui
   "stickyIncludeCustom": false,
   "skillResumePreview": true,
   "resultPrefix": "└",
-  "resultPrefixGap": 0,
+  "resultPrefixGap": 1,
   "normalizeForeignRenderers": true,
   "diff": {
     "diffViewMode": "auto",
@@ -73,8 +73,9 @@ 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` 保留包内卡片。分发层拦截实现，不受包加载顺序影响 |
 | `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.6.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/index.ts

@@ -26,11 +26,11 @@ 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 registerWorkingMessage from "./working-message.ts";
 // Vendored rich diff (MIT; see vendor/diff/ATTRIBUTION.md).
 import { renderRichToolResult, WriteExecutionMetadataStore } from "./vendor/diff/index.ts";
@@ -88,6 +88,8 @@ interface Config {
 	resultPrefixGap: number;
 	/** 第三方扩展渲染输出的行首 ⎿ 是否规范化为 resultPrefix（默认 true）。 */
 	normalizeForeignRenderers: boolean;
+	/** workflow 完成卡片（subagents:workflow entry）样式：claude = ● Workflow(name) 风格（默认）；native = 保留包内卡片。 */
+	workflowRendering: "claude" | "native";
 }
 
 function loadConfig(): Config {
@@ -105,8 +107,9 @@ function loadConfig(): Config {
 		stickyIncludeCustom: false,
 		skillResumePreview: true,
 		resultPrefix: "└",
-		resultPrefixGap: 0,
+		resultPrefixGap: 1,
 		normalizeForeignRenderers: true,
+		workflowRendering: "claude",
 	};
 	diffDisplayConfig = { ...DEFAULT_TOOL_DISPLAY_CONFIG };
 	try {
@@ -130,6 +133,7 @@ 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?.diff && typeof data.diff === "object" && !Array.isArray(data.diff)) {
 			diffDisplayConfig = { ...DEFAULT_TOOL_DISPLAY_CONFIG, ...data.diff };
 		}
@@ -352,6 +356,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 +403,14 @@ 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);
 	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 +443,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[]),
+		/** 分发层拦截：命中已知类型则改道为我们自己的渲染器，不受包加载顺序影响。 */
+		rendererOverride: (customType: string): any => {
+			if (customType === "subagent-notification") return config.subagentRendering === "claude" ? subagentRenderer : undefined;
+			if (customType === "subagents:workflow") return config.workflowRendering === "claude" ? workflowRenderer : undefined;
+			return 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));
 }