@yinan_chen/pi-claude-code-ui 0.0.0-stage → 0.2.0

package/src/pi-runtime.ts

@@ -0,0 +1,232 @@
+/**
+ * pi-runtime — 两个补丁型扩展（lean-tidy / sticky-first-message）
+ * 共用的「pi 运行时类定位」模块。放在 extensions/_shared/ 下、无 index.ts，pi 的加载器
+ * 不会把它当扩展加载（只加载 extensions/*.ts 与 extensions/<dir>/index.ts）。
+ *
+ * ── 为什么要共用 ──────────────────────────────────────────────────────────
+ * 三家都要拿到 pi 内部类（InteractiveMode / CustomEditor / *Component）打 prototype
+ * 补丁。此前各自扫一遍 dist/bundle/chunks（48 个文件）与 dist/modes/interactive*，实测：
+ *   - chunks 首次 ~70ms（47 个是 bedrock/azure 等 provider 库，从不导出 UI 类；只有
+ *     主 chunk 导出 UI 类，而它运行时早已加载，import 为 0ms）
+ *   - dist/modes/interactive + components ~430ms —— 这是**未打包的第二份副本**，本机 pi
+ *     由 dist/bundle/cli.js 启动，这份副本运行时根本不用，扫它纯属浪费（还把整份 pi
+ *     再加载一遍进内存）
+ * 本模块：进程内只扫一次（globalThis 备忘，/reload 零成本），bundle 运行时不再碰
+ * dist/modes/interactive*，chunks 按 pi 版本缓存「含 UI 类的文件清单」（正常只剩主 chunk）。
+ *
+ * ── 类来源与顺序 ──────────────────────────────────────────────────────────
+ *   1. `import * as piPkg from "@earendil-works/pi-coding-agent"` —— bundle 运行时经 jiti
+ *      virtualModules 拿到的就是 bundle 活类；上面所有需要的类它都导出。放第一位。
+ *   2. chunks 里含 UI 类的文件（缓存命中时只 import 清单里的；未命中全扫一次并写缓存）
+ *   3. 非 bundle 运行时（离线测试）或 PI_RUNTIME_SCAN=full：再扫 dist/modes/interactive*
+ * 调用方拿到 modules 数组后按自己的名字/形状规则打补丁；FLAG 幂等，重复出现的类无害。
+ *
+ * ── 开关 ──────────────────────────────────────────────────────────────────
+ *   PI_RUNTIME_PKG_ROOT（旧名 PI_LEAN_TIDY_PKG_ROOT 仍兼容）覆盖 pi 包根
+ *   PI_RUNTIME_SCAN=full（旧名 PI_LEAN_TIDY_SCAN）强制全量扫描
+ * 缓存文件：$PI_CODING_AGENT_DIR/pi-runtime.cache.json（默认 ~/.pi/agent/）
+ */
+import * as piPkg from "@earendil-works/pi-coding-agent";
+import { existsSync, readFileSync, readdirSync, realpathSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { homedir } from "node:os";
+import { dirname, join, relative } from "node:path";
+import { pathToFileURL } from "node:url";
+
+/** 补丁扩展逐版本验收过的 pi 版本；不一致时由 lean-tidy 在 session_start 提示一次。
+ * 0.99.1 核验（2026-09-29）：skill-block-recollapse 8/8 PASS（含 interactive-mode.js:4497
+ * fork 选择器仍造 {id,text} 副本、TreeList 200 字符截断一致）；sticky-first-message 全 PASS；
+ * pi-claude-code(lean-tidy) 除 CustomEntryComponent 已移出公共导出（形状识别不命中，
+ * 无伤退化为原生渲染）外全 PASS。
+ * 0.99.2 核验（2026-09-30）：changelog 仅 MCP/codemode/provider 变更；skill-block-recollapse
+ * 全部导出/形状检查 PASS，interactive-mode.js:4497 fork 副本一字未动，TreeList 仍截 200；
+ * sticky-first-message bun test 40/40 PASS；lean-tidy 形状识别类全在（CustomEntryComponent
+ * 仍缺，同 0.99.1 无伤退化），tests 7/8 PASS——header.test.mjs 失败系其引用的
+ * custom-header.ts 已删除（功能并入本扩展），与 pi 版本无关。
+ * 1.0.0 核验（2026-10-02）：changelog 的 TUI 改动「user message 不再保留两份全宽副本」
+ * 删了 UserMessageComponent 里的 Box（Markdown 直接落 children[0] 且自带 paddingX）——
+ * lean-tidy renderGeneric 的两层结构假设失配退化为原生渲染，已修复（?? 回退取 Markdown +
+ * 临时置零 paddingX 再 invalidate，claude-view.ts）。skill-block-recollapse：fork 选择器
+ * 仍進 {id,text} 副本（interactive-mode.js:4497→4531），TreeList 仍截 200
+ * （tree-selector.js:730），全部依赖导出仍在。sticky bun 40/40；tests 共 60/60 PASS
+ * （working-message 测试已同步为纯计时行为，系 2026-10-01 应一南要求移除 token 计数，
+ * 与 pi 版本无关）。
+ * 1.0.2 核验（2026-10-04）：1.0.1/1.0.2 changelog 均无 TUI 内部变更（前者为 Nix/MCP 项目
+ * 覆盖/OAuth CIMD/registerToolRenderer API/prompt cache，后者仅 samplingParamsByThinkingLevel）。
+ * skill-block-recollapse：fork 选择器仍造 {id,text} 副本（interactive-mode.js:4538→由 1.0.0
+ * 的 4531 偏移，代码一字未动）；TreeList 仍截 200（tree-selector.js:730）；
+ * TreeSelectorComponent/UserMessageSelectorComponent/SessionManager/AgentSession 导出全在。
+ * lean-tidy：UserMessageComponent 仍是无 Box 直接 addChild(Markdown) 结构（其源码注释即
+ * “a Box would keep a second full-width copy”，1.0.0 修复假设匹配）；sticky bun 40/40 PASS。 */
+export const VERIFIED_PI_VERSION = "1.0.2";
+
+export interface RuntimeModule {
+	/** 来源标记："<package>" 或相对 pkgRoot 的文件路径 */
+	where: string;
+	mod: Record<string, unknown>;
+}
+
+export interface PiRuntime {
+	pkgRoot: string;
+	piVersion: string;
+	/** 是否由 dist/bundle/cli.js 启动（本机常态） */
+	bundleRuntime: boolean;
+	/** "<package>" 永远在首位 */
+	modules: RuntimeModule[];
+	/** 本次 import 的文件（相对 pkgRoot） */
+	files: string[];
+	cacheHit: boolean;
+	ms: number;
+}
+
+const AGENT_DIR = (process.env.PI_CODING_AGENT_DIR || "").trim() || join(homedir(), ".pi", "agent");
+const CACHE_PATH = join(AGENT_DIR, "pi-runtime.cache.json");
+const MEMO = Symbol.for("pi-runtime/scan");
+const FALLBACK_ROOT = "/opt/homebrew/lib/node_modules/@earendil-works/pi-coding-agent";
+
+const env = (k: string) => (process.env[k] || "").trim();
+
+/** pi 包根：env → CLI 入口（dist/bundle/cli.js）→ 模块解析 → node/bun 全局前缀 → 硬编码回退 */
+export function resolvePkgRoot(): string {
+	const override = env("PI_RUNTIME_PKG_ROOT") || env("PI_LEAN_TIDY_PKG_ROOT");
+	if (override) return override;
+	const candidates: string[] = [];
+	try {
+		const cliJs = realpathSync(process.argv[1] ?? "");
+		if (cliJs.includes(join("dist", "bundle"))) candidates.push(dirname(dirname(dirname(cliJs))));
+	} catch {}
+	try {
+		const req = createRequire(import.meta.url);
+		let d = dirname(req.resolve("@earendil-works/pi-coding-agent"));
+		for (let i = 0; i < 6 && !existsSync(join(d, "package.json")); i++) d = dirname(d);
+		candidates.push(d);
+	} catch {}
+	try {
+		const prefix = dirname(dirname(realpathSync(process.execPath)));
+		candidates.push(join(prefix, "lib", "node_modules", "@earendil-works", "pi-coding-agent"));
+	} catch {}
+	candidates.push(FALLBACK_ROOT);
+	return candidates.find((p) => existsSync(join(p, "dist", "bundle"))) ?? candidates[candidates.length - 1];
+}
+
+function isBundleRuntime(): boolean {
+	try {
+		return realpathSync(process.argv[1] ?? "").includes(join("dist", "bundle"));
+	} catch {
+		return false;
+	}
+}
+
+function readPiVersion(pkgRoot: string): string {
+	try {
+		return String(JSON.parse(readFileSync(join(pkgRoot, "package.json"), "utf8")).version ?? "");
+	} catch {
+		return "";
+	}
+}
+
+/** 模块命名空间是否导出「UI 类」：大写开头的函数，且 prototype 上有渲染/事件方法。 */
+const UI_METHODS = ["render", "handleEvent", "handleInput", "handlePaste", "updateDisplay"];
+function exportsUiClass(mod: Record<string, unknown>): boolean {
+	for (const key of Object.keys(mod)) {
+		if (!/^[A-Z]/.test(key)) continue;
+		let v: unknown;
+		try {
+			v = mod[key];
+		} catch {
+			continue;
+		}
+		if (typeof v !== "function") continue;
+		const proto = (v as { prototype?: Record<string, unknown> }).prototype;
+		if (proto && UI_METHODS.some((m) => typeof proto[m] === "function")) return true;
+	}
+	return false;
+}
+
+async function importModule(file: string): Promise<Record<string, unknown> | null> {
+	try {
+		return (await import(pathToFileURL(file).href)) as Record<string, unknown>;
+	} catch {
+		return null; // worker chunk 等在主线程 import 会失败——跳过
+	}
+}
+
+async function scan(): Promise<PiRuntime> {
+	const t0 = Date.now();
+	const pkgRoot = resolvePkgRoot();
+	const bundleRuntime = isBundleRuntime();
+	const piVersion = readPiVersion(pkgRoot);
+	const full = (env("PI_RUNTIME_SCAN") || env("PI_LEAN_TIDY_SCAN")).toLowerCase() === "full" || !bundleRuntime;
+	const scope = full ? "full" : "bundle";
+
+	const modules: RuntimeModule[] = [{ where: "<package>", mod: piPkg as unknown as Record<string, unknown> }];
+	const files: string[] = [];
+	let cacheHit = false;
+
+	// 缓存：{ piVersion, scope, files } —— 命中时只 import 清单里的文件
+	let cached: string[] | undefined;
+	try {
+		const c = JSON.parse(readFileSync(CACHE_PATH, "utf8"));
+		if (c?.piVersion === piVersion && c?.scope === scope && Array.isArray(c?.files) && c.files.every((f: unknown) => typeof f === "string")) {
+			const abs = (c.files as string[]).map((f) => join(pkgRoot, f));
+			if (abs.every((f) => existsSync(f))) cached = abs;
+		}
+	} catch {}
+
+	if (cached) {
+		cacheHit = true;
+		for (const f of cached) {
+			const mod = await importModule(f);
+			if (mod) {
+				modules.push({ where: relative(pkgRoot, f), mod });
+				files.push(relative(pkgRoot, f));
+			}
+		}
+	} else {
+		const dirs = [join(pkgRoot, "dist", "bundle", "chunks")];
+		if (full) dirs.push(join(pkgRoot, "dist", "modes", "interactive", "components"), join(pkgRoot, "dist", "modes", "interactive"));
+		for (const dir of dirs) {
+			let names: string[] = [];
+			try {
+				names = readdirSync(dir).filter((f) => f.endsWith(".js"));
+			} catch {
+				continue;
+			}
+			for (const name of names) {
+				const abs = join(dir, name);
+				const mod = await importModule(abs);
+				if (!mod || !exportsUiClass(mod)) continue;
+				modules.push({ where: relative(pkgRoot, abs), mod });
+				files.push(relative(pkgRoot, abs));
+			}
+		}
+		try {
+			writeFileSync(CACHE_PATH, `${JSON.stringify({ piVersion, scope, files }, null, 2)}\n`, "utf8");
+		} catch {}
+	}
+	return { pkgRoot, piVersion, bundleRuntime, modules, files, cacheHit, ms: Date.now() - t0 };
+}
+
+/**
+ * 进程内只扫一次（Promise 备忘在 globalThis，/reload 后新模块实例直接复用）。
+ * 扫描抛错时退化为只含 "<package>" 的结果，绝不让调用方加载失败。
+ */
+export function getPiRuntime(): Promise<PiRuntime> {
+	const g = globalThis as Record<PropertyKey, unknown>;
+	let memo = g[MEMO] as Promise<PiRuntime> | undefined;
+	if (!memo) {
+		memo = scan().catch(
+			(): PiRuntime => ({
+				pkgRoot: resolvePkgRoot(),
+				piVersion: "",
+				bundleRuntime: isBundleRuntime(),
+				modules: [{ where: "<package>", mod: piPkg as unknown as Record<string, unknown> }],
+				files: [],
+				cacheHit: false,
+				ms: 0,
+			}),
+		);
+		g[MEMO] = memo;
+	}
+	return memo;
+}

package/src/preview.ts

@@ -0,0 +1,147 @@
+/**
+ * 一次性预览 harness（跑完即删）：驱动 claude-view.ts 的真实 renderChat，
+ * 模拟「连续工具轮次」时间线，截取 sticky 修复后各时刻的 transcript 形态。
+ */
+import { createClaudeView } from "./claude-view.ts";
+import { stripStyle } from "./claude-tools.ts";
+import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
+
+const W = 76;
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+const theme = {
+	name: "preview",
+	fg: (_t: string, s: string) => s,
+	bold: (s: string) => s,
+	italic: (s: string) => s,
+	getBgAnsi: () => "",
+	getFgAnsi: () => "",
+};
+const config = {
+	bashPreviewLines: 1, codePreviewLines: 3, errorPreviewLines: 1,
+	detailsBackground: "selectedBg", liveThinking: true, thinkingTailLines: 3, foldAnimMs: 240,
+	skillRendering: "native" as const,
+};
+
+const wrapPlain = (text: string, width: number): string[] => {
+	const out: string[] = [];
+	for (const para of text.split("\n")) {
+		const chars = Array.from(para);
+		if (!chars.length) { out.push(""); continue; }
+		for (let i = 0; i < chars.length; i += width) out.push(chars.slice(i, i + width).join(""));
+	}
+	return out;
+};
+
+const makeUser = (text: string) => ({ render: () => [` ❯ ${text}`] });
+
+function makeAssistant(o: { thinking?: string; text?: string; streaming?: boolean; msg: any }) {
+	const children: any[] = [];
+	if (o.thinking !== undefined)
+		children.push({ child: { render: (w: number) => wrapPlain(o.thinking!, w) }, onMouse() {} });
+	if (o.text !== undefined) children.push({ render: (w: number) => wrapPlain(o.text!, w) });
+	return {
+		updateContent() {}, setHideThinkingBlock() {},
+		contentContainer: { children },
+		thinkingVisibilityOverrides: new Map(),
+		hideThinkingBlock: true,
+		lastMessage: o.msg,
+		isStreaming: !!o.streaming,
+		markdownTheme: getMarkdownTheme(),
+	};
+}
+
+let toolSeq = 0;
+function makeTool(name: string, args: any, o: { result?: any; partial?: boolean } = {}) {
+	return {
+		toolName: name, toolCallId: `t${++toolSeq}`, args,
+		result: o.result, isPartial: !!o.partial, executionStarted: true,
+		expanded: false, cwd: "/Users/chenyn/Downloads/demo",
+		setExpanded() {}, updateDisplay() {}, imageComponents: [], hideComponent: false,
+	};
+}
+
+const T1 = [
+	"用户想检查项目结构。",
+	"先列目录、数行数，把整体规模摸清楚。",
+	"从入口文件和最大的模块看起。",
+	"先跑 ls 和 wc -l。",
+	"文件不多的话逐个读重点。",
+	"注意跳过构建产物。",
+	"行数最多的文件优先看。",
+	"收集完信息再下结论。",
+].join("\n");
+const T2 = [
+	"目录和行数都拿到了。",
+	"入口是 index.ts，520 行的 claude-view.ts 值得细看。",
+	"先 grep 关键函数定位，再找一下文档文件。",
+	"然后输出检查结论。",
+].join("\n");
+
+const M1 = { role: "assistant", timestamp: 1_700_000_000_000, provider: "anthropic", model: "demo", content: [{ type: "thinking", thinking: T1 }] };
+const M2 = { role: "assistant", timestamp: 1_700_000_001_000, provider: "anthropic", model: "demo", content: [{ type: "thinking", thinking: T2 }] };
+const M3 = { role: "assistant", timestamp: 1_700_000_002_000, provider: "anthropic", model: "demo", content: [{ type: "text", text: "检查完了。" }] };
+
+const container = { children: [] as any[] };
+const api = createClaudeView(config, () => theme, (s) => console.error("report:", s));
+api.hookMode({ ui: { requestRender() {} } });
+
+function snap(title: string, note?: string) {
+	const lines = api.renderChat(container, W);
+	console.log(`\n┏━━ ${title}`);
+	if (note) console.log(`┃ ${note}`);
+	console.log("┗" + "─".repeat(W + 2));
+	for (const l of lines) console.log("│" + stripStyle(l) + "│");
+}
+
+const user = makeUser("帮我检查一下项目结构");
+const a1 = makeAssistant({ thinking: T1, streaming: true, msg: M1 });
+container.children.push(user, a1);
+
+api.onAgentStart();
+api.onEvent({ type: "message_start", message: M1 });
+api.onEvent({ type: "message_update", message: M1 });
+await sleep(2100);
+snap("快照 1 · M1 thinking 直播中", "stage 首次撑开（sticky 写入）：thinking 尾窗滚动，仅显示尾部 3 行");
+
+api.onEvent({ type: "message_end", message: M1 });
+a1.isStreaming = false;
+const bashDone = () => makeTool("bash", { command: "wc -l *.ts" }, {
+	result: { content: [{ type: "text", text: "  258 claude-tools.ts\n  520 claude-view.ts\n  230 index.ts\n 1008 total" }] },
+});
+const toolLs = makeTool("ls", { path: "." }, {
+	result: { content: [{ type: "text", text: "claude-tools.ts\nclaude-view.ts\nindex.ts\ntsconfig.json\nvendor/" }] },
+});
+const toolBash = makeTool("bash", { command: "wc -l *.ts" }, { partial: true });
+container.children.push(toolLs, toolBash);
+snap("快照 2 · M1 结束，ls 完成、bash 执行中", "【修复点】thinking 停止流式后 stage 保持展开（旧版这里会折回成 Running… 摘要行）");
+
+const a2 = makeAssistant({ thinking: T2, streaming: true, msg: M2 });
+container.children.push(a2);
+api.onEvent({ type: "message_start", message: M2 });
+api.onEvent({ type: "message_update", message: M2 });
+snap("快照 3 · M2 thinking 又开始直播", "无跳变：stage 依旧展开，尾窗切到 thinking2；工具以折叠卡片随行");
+
+await sleep(3100);
+api.onEvent({ type: "message_end", message: M2 });
+a2.isStreaming = false;
+const idx = container.children.indexOf(toolBash);
+container.children[idx] = bashDone();
+const readText = Array.from({ length: 24 }, (_, i) => `${i + 1}  line ${i + 1} of index.ts`).join("\n") + "\n\n[Showing lines 1-24 of 87]";
+container.children.push(
+	makeTool("read", { path: "src/index.ts" }, { result: { content: [{ type: "text", text: readText }] } }),
+	makeTool("grep", { pattern: "runtimeOpen", path: "." }, { result: { content: [{ type: "text", text: "claude-view.ts:488:const runtimeOpen = stage.parts.some(…" }] } }),
+	makeTool("find", { pattern: "*.md" }, { partial: true }),
+);
+snap("快照 4 · M2 结束，read/grep 完成、find 执行中", "【修复点】thinking 间歇仍保持展开（旧版这里又折回，一下一上横跳）");
+
+const a3 = makeAssistant({ text: "检查完了：3 个 TS 文件共约 1000 行，入口 index.ts，最重的模块是 claude-view.ts，vendor/ 是第三方 diff 渲染器。结构清晰，没有发现明显问题。", msg: M3 });
+container.children.push(a3);
+api.onEvent({ type: "message_start", message: M3 });
+api.onEvent({ type: "message_end", message: M3 });
+api.onSettled();
+snap("快照 5 · M3 输出文本 → stage 封口瞬间", "「不能折叠进去的消息」出现：收拢动画第 0 帧（summary 行已冻结 + 成员行将开始向上收）");
+
+await sleep(300);
+snap("快照 6 · 收拢动画结束（最终形态）", "输出完的稳定态：一行摘要，直到用户点它或 ctrl+o 才再展开");
+
+api.dispose();

package/src/running-effect.ts

@@ -0,0 +1,29 @@
+/*
+ * Word sweep adapted from pi-cc-extensions' animateCompactThinkingText (MIT).
+ * Sweeps the first word of any active label — Running, Thinking, Reading,
+ * Listing, Searching, Writing, Editing — without per-verb whitelists; settled
+ * summaries never reach this function and stay static.
+ */
+type RunningTheme = {
+	fg(color: string, text: string): string;
+	italic?(text: string): string;
+	bold?(text: string): string;
+};
+
+export function animateRunningSummary(label: string, theme: RunningTheme, frame: number): string {
+	const match = /^(\S+)([\s\S]*)$/.exec(label);
+	if (!match) return theme.fg("muted", label);
+	const chars = Array.from(match[1]);
+	const span = Math.max(1, Math.min(5, Math.ceil(chars.length * 0.28)));
+	const start = (Math.floor(frame) % (chars.length + span)) - span;
+	const end = start + span;
+	const before = chars.slice(0, Math.max(0, start)).join("");
+	const bright = chars.slice(Math.max(0, start), Math.min(chars.length, end)).join("");
+	const after = chars.slice(Math.max(0, end)).join("");
+	const style = (text: string, color: string) => {
+		if (!text) return "";
+		const painted = theme.fg(color, text);
+		return theme.italic ? theme.italic(painted) : painted;
+	};
+	return style(before, "muted") + (bright ? style(theme.bold ? theme.bold(bright) : bright, "text") : "") + style(after, "muted") + theme.fg("muted", match[2]);
+}