@yinan_chen/pi-claude-code-ui 0.6.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`；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.7.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) {