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

package/README.md

@@ -21,6 +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）
 - **富 diff 渲染** — edit/write 工具的语法高亮 diff（vendored, MIT）
 - **子代理面板** — 后台 agent 状态一目了然
 - **工作状态提示** — working message / running effect
@@ -45,6 +46,8 @@ pi -e npm:@yinan_chen/pi-claude-code-ui
   "stickyIncludeCustom": false,
   "skillResumePreview": true,
   "resultPrefix": "└",
+  "resultPrefixGap": 0,
+  "normalizeForeignRenderers": true,
   "diff": {
     "diffViewMode": "auto",
     "diffIndicatorMode": "bars",
@@ -70,6 +73,8 @@ pi -e npm:@yinan_chen/pi-claude-code-ui
 | `stickyIncludeCustom` | `false` | 吸附泡是否包含扩展注入/跨会话转发的旁路消息 |
 | `skillResumePreview` | `true` | `/resume` 列表预览是否折回 `[skill] 名` 单行 |
 | `resultPrefix` | `"└"` | 工具结果行拐角前缀（制表符族，等宽字体最稳；可换 `↳` 或 Claude Code 官方的 `⎿`，后两者在部分字体下会变宽） |
+| `resultPrefixGap` | `0` | 前缀符号与内容之间的空格数（0–4） |
+| `normalizeForeignRenderers` | `true` | 第三方扩展卡片输出里行首 `⎿` 自动规范化为 `resultPrefix`（任何未适配扩展的渲染都能统一风格；关闭可看第三方原版） |
 | `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.3.0",
+	"version": "0.5.0",
 	"description": "Claude Code-style UI for Pi: transcript view, rich diffs, subagent panels and working-message status.",
 	"type": "module",
 	"license": "MIT",

package/src/claude-tools.ts

@@ -4,7 +4,13 @@ import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works
 import { homedir } from "node:os";
 
 /** UI 符号集（lean-tidy.json 可覆盖；见 index.ts loadConfig 的 resultPrefix）。 */
-export const SYMBOLS = { resultPrefix: "└" };
+export const SYMBOLS = { resultPrefix: "└", resultPrefixGap: 0 };
+
+/** 结果行缩进对：first = 3 空格 + 符号 + gap 空格；cont = 4 + gap 空格。运行时读 SYMBOLS。 */
+export function resultIndent(theme: any): { first: string; cont: string } {
+	return { first: `   ${fg(theme, "dim", SYMBOLS.resultPrefix)}${" ".repeat(SYMBOLS.resultPrefixGap)}`, cont: RESULT_CONT() };
+}
+export const RESULT_CONT = (): string => " ".repeat(4 + SYMBOLS.resultPrefixGap);
 
 export interface ToolView {
 	name: string;
@@ -197,13 +203,13 @@ export function summaryOf(v: ToolView, theme: any): string | undefined {
 export function paintTool(v: ToolView, theme: any, width: number, config: ToolAppearance): PaintedTool {
 	const lines = headerOf(v, theme, width), headerHeight = lines.length;
 	let moreRow: number | undefined;
-	const result = (s: string) => lines.push(...prefixed(s, width, `   ${fg(theme, "dim", SYMBOLS.resultPrefix)}  `, "      "));
+	const result = (s: string) => lines.push(...prefixed(s, width, resultIndent(theme).first, RESULT_CONT()));
 	const body = (source: string[], limit: number, full = v.expanded, firstResult = false) => {
 		const shown = full ? source : source.slice(0, limit);
 		let clipped = false;
 		shown.forEach((line, i) => {
-			const first = firstResult && i === 0 ? `   ${fg(theme, "dim", SYMBOLS.resultPrefix)}  ` : "      ";
-			if (full) lines.push(...prefixed(line, width, first, "      "));
+			const first = firstResult && i === 0 ? resultIndent(theme).first : RESULT_CONT();
+			if (full) lines.push(...prefixed(line, width, first, RESULT_CONT()));
 			else {
 				const pw = Math.min(6, Math.max(0, width - 1)), bw = Math.max(1, width - pw);
 				clipped ||= visibleWidth(line) > bw;

package/src/claude-view.ts

@@ -1,7 +1,7 @@
 /** Pi-specific transcript adapter. All private component fields are isolated here. */
 import { Box, Container, Markdown, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { getMarkdownTheme, keyText } from "@earendil-works/pi-coding-agent";
-import { BUILTIN_NAMES, PROCESS_TOOL_NAMES, bold, canExpandTool, expandHint, failedTool, fg, fit, headerOf, isBlank, isImageLine, oneLine, paintBackground, paintTool, prefixed, prefixZones, SYMBOLS, targetOf, type ToolAppearance, type ToolView } from "./claude-tools.ts";
+import { BUILTIN_NAMES, PROCESS_TOOL_NAMES, bold, canExpandTool, expandHint, failedTool, fg, fit, headerOf, isBlank, isImageLine, oneLine, paintBackground, paintTool, prefixed, prefixZones, resultIndent, RESULT_CONT, targetOf, type ToolAppearance, type ToolView } from "./claude-tools.ts";
 import { animateRunningSummary } from "./running-effect.ts";
 
 export interface ClaudeConfig extends ToolAppearance {
@@ -313,7 +313,7 @@ export function createClaudeView(
 			if (raw.length > rowsLeft) { hidden += raw.length - rowsLeft; raw = raw.slice(0, Math.max(0, rowsLeft)); }
 			rowsLeft -= raw.length;
 			const start = lines.length;
-			for (let i = 0; i < raw.length; i++) lines.push(isImageLine(raw[i]) ? raw[i] : fit(truncateToWidth(start + i === 0 ? `   ${fg(theme(), "dim", SYMBOLS.resultPrefix)}  ` : "      ", indent, "") + raw[i], width));
+			for (let i = 0; i < raw.length; i++) lines.push(isImageLine(raw[i]) ? raw[i] : fit(truncateToWidth(start + i === 0 ? resultIndent(theme()).first : RESULT_CONT(), indent, "") + raw[i], width));
 			const proxy = {
 				handleMouse(e: any) {
 					if (e.x < indent) return undefined;
@@ -346,7 +346,7 @@ export function createClaudeView(
 				const last = entries.at(-1);
 				if (last && --last.height <= 0) entries.pop();
 			}
-			const more = prefixed(fg(theme(), "dim", `… +${hidden} lines`) + expandHint(theme()), width, `   ${fg(theme(), "dim", SYMBOLS.resultPrefix)}  `, "      ");
+			const more = prefixed(fg(theme(), "dim", `… +${hidden} lines`) + expandHint(theme()), width, resultIndent(theme()).first, RESULT_CONT());
 			lines.push(...more);
 			entries.push({ component: toggleTool(self), height: more.length });
 		}
@@ -368,7 +368,7 @@ export function createClaudeView(
 			lines = [...head, ...(body?.lines ?? [])];
 			entries = [{ component: toggleTool(self), height: head.length }, ...(body?.entries ?? [])];
 			if (v.partial && !body?.lines.length) {
-				const pending = prefixed(fg(t, "dim", v.started ? "Running…" : "Waiting…"), width, `   ${fg(t, "dim", SYMBOLS.resultPrefix)}  `, "      ");
+				const pending = prefixed(fg(t, "dim", v.started ? "Running…" : "Waiting…"), width, resultIndent(t).first, RESULT_CONT());
 				lines.push(...pending); entries.push({ component: {}, height: pending.length });
 			}
 		} else {
@@ -390,12 +390,12 @@ export function createClaudeView(
 						// The vendored renderer limits body rows and supplies its own remainder hint.
 						// Do not also slice by codePreviewLines: that counts the diff header/frame
 						// against the body and hides almost every changed row.
-						const prefix = `   ${fg(t, "dim", SYMBOLS.resultPrefix)}  `;
+						const prefix = resultIndent(t).first;
 						// The rich edit header already reports +N/-M; do not repeat
 						// paintTool's "Added N lines, removed M lines" summary above it.
 						const introRows = painted.headerHeight + (v.name === "edit" ? 0 : 1);
 						lines = [...painted.lines.slice(0, introRows),
-							...detail.map((line, i) => fit((i === 0 ? prefix : "      ") + line, width))];
+							...detail.map((line, i) => fit((i === 0 ? prefix : RESULT_CONT()) + line, width))];
 					} catch {
 							// Keep the existing edit/write renderer as a fail-open fallback.
 					}
@@ -610,7 +610,7 @@ export function createClaudeView(
 			if (active && tools.length) {
 				const focus = [...tools].reverse().find((p) => p.owner.isPartial) ?? tools.at(-1)!;
 				const v = toolView(focus.owner), target = targetOf(v.name, v.args, v.cwd).text;
-				if (target) rows.push(...prefixed(fg(theme(), "muted", (v.name === "bash" || v.name === "powershell" ? "$ " : "") + target), width, `   ${fg(theme(), "dim", SYMBOLS.resultPrefix)}  `, "      ").slice(0, 2));
+				if (target) rows.push(...prefixed(fg(theme(), "muted", (v.name === "bash" || v.name === "powershell" ? "$ " : "") + target), width, resultIndent(theme()).first, RESULT_CONT()).slice(0, 2));
 			}
 			append(rows, toggle);
 			// Failures stay folded like the rest: the summary counts them ("N failed")
@@ -700,7 +700,7 @@ export function createClaudeView(
 				return trimmed;
 			}
 			const name = oneLine(self.skillBlock.name), lines = [` ${fg(theme(), "success", "●")} ${bold(theme(), "Skill")}(${name})`];
-			lines.push(...prefixed(fg(theme(), "muted", "Loaded skill") + (self.expanded ? "" : ` (${keyText("app.tools.expand")} to expand)`), width, `   ${fg(theme(), "dim", SYMBOLS.resultPrefix)}  `, "      "));
+			lines.push(...prefixed(fg(theme(), "muted", "Loaded skill") + (self.expanded ? "" : ` (${keyText("app.tools.expand")} to expand)`), width, resultIndent(theme()).first, RESULT_CONT()));
 			if (self.expanded) {
 				const md = new Markdown(self.skillBlock.content ?? "", 0, 0, self.markdownTheme ?? getMarkdownTheme());
 				for (const l of md.render(Math.max(1, width - 3))) lines.push(fit("   " + l, width));

package/src/foreign-normalizer.ts

@@ -0,0 +1,59 @@
+/**
+ * foreign-normalizer — 第三方渲染输出的符号规范化层（v0.5.0）。
+ *
+ * 动机：任何扩展都能 registerMessageRenderer / registerEntryRenderer 输出
+ * 自带风格的卡片（如 @tintinweb/pi-subagents 的 workflow 卡片硬编码 ⎿）。
+ * lean-tidy 无法逐个接管——类型无限多，且"先加载者胜"的分发顺序不受本包
+ * 控制（依赖包加载序）。一劳永逸的做法：在 pi 的两个渲染宿主组件
+ * （CustomMessageComponent = custom 消息宿主；CustomEntryComponent =
+ * custom 会话条目宿主，如 workflow 卡片）的 render 输出上做行级后处理：
+ *
+ *   行首（仅空白/ANSI 转义之后）的 ⎿ 等宽替换为 SYMBOLS.resultPrefix。
+ *
+ * 性质：
+ *   - 宽度守恒（⎿ 与 └ 均 1 列），布局与测量零影响；正文里的 ⎿ 不动。
+ *   - 幂等：lean-tidy 自身渲染已是 resultPrefix，不匹配 ⎿ 模式，无叠加。
+ *   - trampoline：wrapper 每次调用读 globalThis.__leanTidyImpl.normalizeForeign
+ *     （由 index.ts 组装，闭包捕获当次 loadConfig 的开关与 SYMBOLS），
+ *     /reload 后新配置立即生效，无需摘除原型补丁。
+ *   - 关闭（normalizeForeignRenderers=false）时 wrapper 空转透传。
+ */
+import { SYMBOLS } from "./claude-tools.ts";
+
+const FLAG = Symbol.for("lean-tidy.foreign-normalizer");
+/** 行首到 ⎿ 之间只允许空白与 ANSI SGR 转义序列。 */
+const LEADING = /^((?:\s|\x1b\[[0-9;]*m)*)⎿/;
+
+/** 行级符号规范化：仅替换行首 ⎿（等宽），其余原样；无变化时返回原数组。 */
+export function normalizeForeignLines(lines: readonly string[]): string[] {
+	const sym = SYMBOLS.resultPrefix;
+	let changed = false;
+	const out = lines.map((line) => {
+		if (typeof line !== "string" || !line.includes("⎿")) return line;
+		const replaced = line.replace(LEADING, `$1${sym}`);
+		if (replaced !== line) changed = true;
+		return replaced;
+	});
+	return changed ? out : (lines as string[]);
+}
+
+/**
+ * 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;
+	const orig = proto.render;
+	proto[FLAG] = true;
+	proto.render = function (width: number) {
+		const lines = orig.call(this, width);
+		const impl = (globalThis as any).__leanTidyImpl;
+		try {
+			return typeof impl?.normalizeForeign === "function" ? impl.normalizeForeign(lines) : lines;
+		} catch {
+			return lines;
+		}
+	};
+	return true;
+}

package/src/index.ts

@@ -30,6 +30,7 @@ import registerSubagentPanels 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 registerWorkingMessage from "./working-message.ts";
 // Vendored rich diff (MIT; see vendor/diff/ATTRIBUTION.md).
 import { renderRichToolResult, WriteExecutionMetadataStore } from "./vendor/diff/index.ts";
@@ -83,6 +84,10 @@ interface Config {
 	skillResumePreview: boolean;
 	/** 工具结果行的拐角前缀符号（默认 └；可换 ↳ 或 Claude Code 官方的 ⎿）。 */
 	resultPrefix: string;
+	/** 前缀符号与内容之间的空格数（0–4，默认 0）。 */
+	resultPrefixGap: number;
+	/** 第三方扩展渲染输出的行首 ⎿ 是否规范化为 resultPrefix（默认 true）。 */
+	normalizeForeignRenderers: boolean;
 }
 
 function loadConfig(): Config {
@@ -100,6 +105,8 @@ function loadConfig(): Config {
 		stickyIncludeCustom: false,
 		skillResumePreview: true,
 		resultPrefix: "└",
+		resultPrefixGap: 0,
+		normalizeForeignRenderers: true,
 	};
 	diffDisplayConfig = { ...DEFAULT_TOOL_DISPLAY_CONFIG };
 	try {
@@ -121,6 +128,8 @@ function loadConfig(): Config {
 		if (typeof data?.stickyIncludeCustom === "boolean") config.stickyIncludeCustom = data.stickyIncludeCustom;
 		if (typeof data?.skillResumePreview === "boolean") config.skillResumePreview = data.skillResumePreview;
 		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?.diff && typeof data.diff === "object" && !Array.isArray(data.diff)) {
 			diffDisplayConfig = { ...DEFAULT_TOOL_DISPLAY_CONFIG, ...data.diff };
 		}
@@ -342,7 +351,8 @@ function patchModule(mod: any, where: string): number {
 		try { cls = mod[key]; } catch { continue; }
 		if (typeof cls !== "function") continue;
 		let did = false;
-		if (key.includes("ToolExecution")) did = patchToolExec(cls);
+		if (key === "CustomMessageComponent" || key === "CustomEntryComponent") did = patchForeignHost(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);
 		else if (key.includes("SkillInvocation")) did = patchSkill(cls);
@@ -382,6 +392,7 @@ export default async function leanTidy(pi: ExtensionAPI): Promise<void> {
 	registerWorkingMessage(pi);
 	const config = loadConfig();
 	SYMBOLS.resultPrefix = config.resultPrefix;
+	SYMBOLS.resultPrefixGap = config.resultPrefixGap;
 	await stickyFirstMessage(pi, { includeCustom: config.stickyIncludeCustom });
 	registerSkillRecollapse(pi, { resumePreview: config.skillResumePreview });
 	// Subagent 通知接管必须发生在加载期（registerMessageRenderer 仅 factory 内合法）：
@@ -419,6 +430,8 @@ export default async function leanTidy(pi: ExtensionAPI): Promise<void> {
 		hookMode,
 		containerRender: (container: any, width: number, chat: boolean): string[] =>
 			claude && chat ? claude.renderChat(container, width) : Container.prototype.render.call(container, width),
+		normalizeForeign: (lines: readonly string[]): string[] =>
+			config.normalizeForeignRenderers ? normalizeForeignLines(lines) : (lines as string[]),
 	} as RuntimeImpl;
 	for (const method of IMPL_METHODS) {
 		impl[method] = (self, orig, ...args) => {

package/src/subagent-panel.ts

@@ -22,7 +22,7 @@
  * host 驱动，两者 OR 叠加。
  */
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
-import { bold, expandHint, fg, fit, linesOf, oneLine, prefixed, SYMBOLS } from "./claude-tools.ts";
+import { bold, expandHint, fg, fit, linesOf, oneLine, prefixed, resultIndent, RESULT_CONT } from "./claude-tools.ts";
 
 /** 只用到 pi 传入 options 的 expanded；outputPad 由内置 Spacer(1) 承担，忽略。 */
 interface PanelOptions {
@@ -35,8 +35,8 @@ export interface SubagentPanelHooks {
 }
 
 /** ⎿ 分支前缀，与 claude-view.ts 工具结果/技能块同款（3 空格 + ⎿ + 2 空格，续行 6 空格）。 */
-const branch = (theme: any): string => `   ${fg(theme, "dim", SYMBOLS.resultPrefix)}  `;
-const BRANCH_REST = "      ";
+const branch = (theme: any): string => resultIndent(theme).first;
+const BRANCH_REST = () => RESULT_CONT();
 
 /** 与该包 ui/agent-widget.ts 的 formatTokens 对齐："33.8k token" / "1.2M token"。 */
 function tokensText(count: unknown): string {
@@ -85,18 +85,18 @@ function panelLines(d: any, expanded: boolean, theme: any, width: number): strin
 	if (stats.length) tail += fg(theme, "dim", ` · ${stats.join(" · ")}`);
 
 	const out = [fit(` ${icon} ${bold(theme, "Subagent")}(${description})`, width)];
-	out.push(...prefixed(tail, width, first, BRANCH_REST));
+	out.push(...prefixed(tail, width, first, BRANCH_REST()));
 
 	// 展开态：resultPreview 全文（其本身已在包内截到 resultMaxLen）+ transcript 路径
 	if (expanded) {
 		const body = linesOf(typeof d?.resultPreview === "string" ? d.resultPreview : "");
-		for (const line of body) out.push(...prefixed(fg(theme, "dim", line), width, first, BRANCH_REST));
+		for (const line of body) out.push(...prefixed(fg(theme, "dim", line), width, first, BRANCH_REST()));
 		if (typeof d?.outputFile === "string" && d.outputFile) {
-			out.push(...prefixed(fg(theme, "dim", `transcript: ${d.outputFile}`), width, first, BRANCH_REST));
+			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));
+		out.push(...prefixed(expandHint(theme), width, first, BRANCH_REST()));
 	}
 	return out;
 }