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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 chenyn273
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,45 @@
-# Temporary Holding Version
+# @yinan_chen/pi-claude-code-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+![preview](assets/preview.png)
+
+> 原名 lean-tidy —— Claude Code 风格的 Pi 界面增强扩展：Claude 式对话转录视图、富文本 diff 渲染、子代理面板与工作状态提示。
+
+## 安装
+
+```bash
+pi install npm:@yinan_chen/pi-claude-code-ui
+```
+
+试运行（不写入配置）：
+
+```bash
+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 扩展）
+- **富 diff 渲染** — edit/write 工具的语法高亮 diff（vendored, MIT）
+- **子代理面板** — 后台 agent 状态一目了然
+- **工作状态提示** — working message / running effect
+- **只读工具美化** — read/bash/grep/find/ls 结果渲染
+
+## 可选增强
+
+在 `~/.pi/agent/npm` 下安装 `@shikijs/cli` 可启用 diff 的 shiki 语法高亮（须在包解析链上，全局安装无效；未安装时自动降级为纯 +/- 底色着色）：
+
+```bash
+cd ~/.pi/agent/npm && npm install @shikijs/cli
+```
+
+## 兼容性
+
+按 `VERIFIED_PI_VERSION = 1.0.2` 验收；版本不一致时扩展会在 session 启动时提示一次。
+
+## 从源码安装
+
+```bash
+pi install git:github.com/chenyn273/pi-claude-code-ui@v0.2.0
+```

package/package.json

@@ -1,6 +1,35 @@
 {
-  "name": "@yinan_chen/pi-claude-code-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@yinan_chen/pi-claude-code-ui",
+	"version": "0.2.0",
+	"description": "Claude Code-style UI for Pi: transcript view, rich diffs, subagent panels and working-message status.",
+	"type": "module",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/chenyn273/pi-claude-code-ui.git"
+	},
+	"bugs": {
+		"url": "https://github.com/chenyn273/pi-claude-code-ui/issues"
+	},
+	"homepage": "https://github.com/chenyn273/pi-claude-code-ui#readme",
+	"keywords": [
+		"pi-package",
+		"pi-extension",
+		"pi-coding-agent",
+		"claude-code"
+	],
+	"files": [
+		"src",
+		"README.md"
+	],
+	"pi": {
+		"extensions": [
+			"./src/index.ts"
+		],
+		"image": "https://github.com/chenyn273/pi-claude-code-ui/raw/main/assets/preview.png"
+	},
+	"peerDependencies": {
+		"@earendil-works/pi-coding-agent": "*",
+		"@earendil-works/pi-tui": "*"
+	}
+}

package/src/claude-tools.ts

@@ -0,0 +1,274 @@
+/** Claude-style tool presentation. Display only: never executes tools or changes result content. */
+import { getLanguageFromPath, highlightCode, keyText } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { homedir } from "node:os";
+
+export interface ToolView {
+	name: string;
+	args: Record<string, any>;
+	result?: any;
+	partial: boolean;
+	started: boolean;
+	expanded: boolean;
+	cwd?: string;
+}
+export interface ToolAppearance {
+	bashPreviewLines: number;
+	codePreviewLines: number;
+	errorPreviewLines: number;
+}
+export interface PaintedTool {
+	lines: string[];
+	headerHeight: number;
+	moreRow?: number;
+}
+export const BUILTIN_NAMES = new Set(["read", "bash", "powershell", "edit", "write", "grep", "find", "ls"]);
+/** Only these tools join thinking in Claude's process summary. Mutating tools stay visible. */
+export const PROCESS_TOOL_NAMES = new Set(["read", "bash", "powershell", "grep", "find", "ls"]);
+const SUMMARY_ONLY_NAMES = new Set(["read", "grep", "find", "ls"]);
+/** Structural failure signal: pi's isError, or an extension-reported error code in details.error
+ *  (pi-mcp-adapter "script_error", pi-web-access "No query provided", …). Never text heuristics. */
+export function failedTool(v: ToolView): boolean {
+	const d = v.result?.details;
+	return !!v.result?.isError || (typeof d?.error === "string" && d.error.trim() !== "");
+}
+export function canExpandTool(v: ToolView): boolean {
+	return failedTool(v) || !SUMMARY_ONLY_NAMES.has(v.name);
+}
+export const isImageLine = (s: string): boolean => s.includes("\x1b_G") || s.includes("\x1b]1337;File=");
+export const stripStyle = (s: string): string => s.replace(/\x1b\[[0-9;]*m/g, "").replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, "");
+export const isBlank = (s: string): boolean => !stripStyle(s).trim();
+export const textOf = (r: any): string => Array.isArray(r?.content)
+	? r.content.filter((c: any) => c?.type === "text" && typeof c.text === "string").map((c: any) => c.text).join("\n")
+	: typeof r?.output === "string" ? r.output : typeof r?.error === "string" ? r.error : "";
+export const hasImages = (r: any): boolean => r?.content?.some((c: any) => c?.type === "image") ?? false;
+export function fg(theme: any, token: string, s: string): string {
+	try { return theme?.fg(token, s) ?? s; } catch { return s; }
+}
+export function bold(theme: any, s: string): string { return theme?.bold?.(s) ?? `\x1b[1m${s}\x1b[22m`; }
+export function fit(s: string, width: number): string {
+	return isImageLine(s) || visibleWidth(s) <= width ? s : truncateToWidth(s, Math.max(0, width), "…");
+}
+export function wrap(s: string, width: number): string[] {
+	if (width <= 0) return [""];
+	if (visibleWidth(s) <= width) return [s];
+	return wrapTextWithAnsi(s, width).map((l) => fit(l, width));
+}
+export function prefixed(s: string, width: number, first: string, rest = first): string[] {
+	const prefixW = Math.min(Math.max(visibleWidth(first), visibleWidth(rest)), Math.max(0, width - 1));
+	const a = truncateToWidth(first, prefixW, ""), b = truncateToWidth(rest, prefixW, "");
+	return wrap(s, Math.max(1, width - prefixW)).map((l, i) => fit(`${i ? b : a}${l}`, width));
+}
+export const oneLine = (v: unknown): string => String(v ?? "").replace(/\s+/g, " ").trim();
+export function shortPath(path: string, cwd?: string): string {
+	if (cwd && path === cwd) return ".";
+	if (cwd && path.startsWith(cwd.replace(/\/$/, "") + "/")) return path.slice(cwd.replace(/\/$/, "").length + 1);
+	const home = homedir();
+	return path === home ? "~" : path.startsWith(home + "/") ? "~" + path.slice(home.length) : path;
+}
+export function middle(s: string, budget: number): string {
+	if (visibleWidth(s) <= budget) return s;
+	if (budget < 3) return fit(s, budget);
+	const segments = [...new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(s)].map((x) => x.segment);
+	let tail = "", used = 0;
+	while (segments.length && used + visibleWidth(segments.at(-1)!) <= Math.floor(budget * .65)) {
+		const next = segments.pop()!; tail = next + tail; used += visibleWidth(next);
+	}
+	return truncateToWidth(segments.join(""), Math.max(0, budget - used - 1), "") + "…" + tail;
+}
+export function displayName(name: string): string {
+	const known: Record<string, string> = { read: "Read", write: "Write", edit: "Edit", bash: "Bash", powershell: "PowerShell", grep: "Grep", find: "Find", ls: "Ls", codemode: "Codemode", web_search: "WebSearch", fetch_content: "Fetch", source_check: "SourceCheck", get_search_content: "SearchContent", ask_user_question: "AskUserQuestion", subagent: "Subagent", mcpScript: "McpScript" };
+	return known[name] ?? name.replace(/(^|_)([a-z])/g, (_m, _a, c) => c.toUpperCase());
+}
+/** codemode 头行目标提示：首个非 @options 注释行；没有可读注释就报脚本行数。 */
+export function codemodeTarget(code: string): string {
+	const lines = code.split("\n").map((l) => l.trim()).filter(Boolean);
+	const head = lines.find((l) => l.startsWith("//") && !/^\/\/\s*@options\b/i.test(l));
+	if (head) return oneLine(head.replace(/^\/\/+\s*/, ""));
+	const n = lines.length;
+	return `script · ${n} ${n === 1 ? "line" : "lines"}`;
+}
+export function targetOf(name: string, a: Record<string, any>, cwd?: string): { text: string; path: boolean } {
+	// codemode 头行括号提示已停用（一南 2026-09-30）：注释/行数不再上头行；codemodeTarget 保留备用。
+	if (name === "codemode") return { text: "", path: false };
+	if (typeof a.command === "string") return { text: oneLine(a.command), path: false };
+	if ((name === "grep" || name === "find") && a.pattern) return { text: `pattern: ${JSON.stringify(a.pattern)}${a.path ? `, path: ${shortPath(a.path, cwd)}` : ""}`, path: false };
+	if (typeof a.path === "string") {
+		const range = name === "read" && (a.offset || a.limit) ? `:${a.offset || 1}${a.limit ? `-${(a.offset || 1) + a.limit - 1}` : "-"}` : "";
+		return { text: shortPath(a.path, cwd) + range, path: true };
+	}
+	if (a.agent || a.workflow) return { text: oneLine([a.agent || a.workflow, a.task].filter(Boolean).join(": ")), path: false };
+	for (const k of ["url", "urls", "query", "queries", "pattern", "claim", "action", "name", "tool", "search", "describe", "project_id"]) {
+		if (a[k]) return { text: oneLine(Array.isArray(a[k]) ? a[k].join("; ") : a[k]), path: false };
+	}
+	return { text: "", path: false };
+}
+export function headerOf(v: ToolView, theme: any, width: number): string[] {
+	const name = displayName(v.name), target = targetOf(v.name, v.args, v.cwd);
+	const color = v.partial ? "muted" : failedTool(v) ? "error" : "success";
+	// 执行中的 bullet 明灭（与折叠 Running 摘要行同款 500ms 节奏，一南 2026-09-26）；
+	// 完成（success/失败 error）后静态。
+	const glyph = v.partial && Math.floor(Date.now() / 500) % 2 === 0 ? " " : "●";
+	const prefix = ` ${fg(theme, color, glyph)} `;
+	// codemode 的注释提示常自带编号/括号收尾（"0) …（…）"），外层不叠闭合括号。
+	const close = (s: string): string => v.name === "codemode" && /[)）]$/.test(s) ? "" : ")";
+	if (v.expanded) return prefixed(`${bold(theme, name)}${target.text ? `(${target.text}${close(target.text)}` : ""}`, width, prefix, "   ");
+	const budget = Math.max(0, width - 3 - visibleWidth(name) - 2);
+	const shown = target.path ? middle(target.text, budget) : fit(target.text, budget);
+	return [fit(`${prefix}${bold(theme, name)}${shown ? `(${shown}${close(shown)}` : ""}`, width)];
+}
+export function expandHint(theme: any): string {
+	let key = "ctrl+o";
+	try { key = keyText("app.tools.expand") || key; } catch {}
+	return fg(theme, "dim", ` (${key} to expand)`);
+}
+export function linesOf(text: string): string[] {
+	if (!text) return [];
+	return text.replace(/\r\n/g, "\n").replace(/\n$/, "").split("\n");
+}
+export function readBody(text: string): string {
+	return text.replace(/\n\n\[(?:\d+ more lines? in file|Showing lines )[^\]]*\]\s*$/, "");
+}
+export function diffCounts(diff: string): { add: number; remove: number } {
+	let add = 0, remove = 0;
+	for (const line of diff.split("\n")) {
+		if (line.startsWith("+") && !line.startsWith("+++")) add++;
+		if (line.startsWith("-") && !line.startsWith("---")) remove++;
+	}
+	return { add, remove };
+}
+function expandTabs(text: string): string {
+	let col = 0, out = "";
+	for (const g of new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(text)) {
+		const s = g.segment;
+		if (s === "\t") { const n = 4 - col % 4; out += " ".repeat(n); col += n; }
+		else { out += s; col += visibleWidth(s); }
+	}
+	return out;
+}
+function codeLines(text: string, path: unknown, theme: any, offset = 1): string[] {
+	const raw = linesOf(text).map(expandTabs);
+	let rendered = raw;
+	try { const lang = typeof path === "string" ? getLanguageFromPath(path) : undefined; if (lang) rendered = highlightCode(raw.join("\n"), lang); } catch {}
+	const digits = String(Math.max(offset, offset + raw.length - 1)).length;
+	return raw.map((line, i) => `${fg(theme, "dim", String(offset + i).padStart(digits))} ${rendered[i] ?? line}`);
+}
+function diffLines(diff: string, theme: any): string[] {
+	return linesOf(diff).map((l) => fg(theme, l.startsWith("+") ? "toolDiffAdded" : l.startsWith("-") ? "toolDiffRemoved" : "toolDiffContext", expandTabs(l)));
+}
+function countRecords(text: string, empty: RegExp): number {
+	if (!text.trim() || empty.test(text.trim())) return 0;
+	return text.split("\n").filter((l) => l.trim() && !/^\[.*(?:limit|truncated|results).*\]$/i.test(l)).length;
+}
+const plural = (n: number, noun: string) => `${n} ${noun}${n === 1 ? "" : "s"}`;
+/** Summary uses semantic records, never the JSON line count of an unknown tool. */
+export function summaryOf(v: ToolView, theme: any): string | undefined {
+	const text = textOf(v.result), d = v.result?.details ?? {};
+	const count = (n: number, noun: string) => `${bold(theme, String(n))} ${noun}${n === 1 ? "" : "s"}`;
+	if (v.name === "read") {
+		if (hasImages(v.result)) return "Read image";
+		const shown = text.match(/\[Showing lines (\d+)-(\d+) of (\d+)/);
+		const more = text.match(/\[(\d+) more lines? in file/);
+		let s = `Read ${count(linesOf(readBody(text)).length, "line")}`;
+		if (shown) s += fg(theme, "dim", ` (${shown[1]}-${shown[2]} of ${shown[3]}, truncated)`);
+		else if (d.truncation?.truncated) s += fg(theme, "dim", " (truncated)");
+		else if (more) s += fg(theme, "dim", ` (+${more[1]} more in file)`);
+		return s;
+	}
+	if (v.name === "find") return `Found ${count(d.resultLimitReached ?? countRecords(text, /^No files found/), "file")}${d.resultLimitReached ? "+ (limit)" : ""}`;
+	if (v.name === "ls") return `Listed ${count(d.entryLimitReached ?? countRecords(text, /^\(empty directory\)/), "entry").replace(/entrys$/, "entries")}${d.entryLimitReached ? "+ (limit)" : ""}`;
+	if (v.name === "grep") {
+		const rows = text.split("\n").filter((l) => /^.+:\d+:/.test(l));
+		const files = new Set(rows.map((l) => l.replace(/:\d+:.*$/, "")));
+		const matches = d.matchLimitReached ?? (/^No matches found/.test(text.trim()) ? 0 : rows.length);
+		if (!matches && text.trim() && !/^No matches found/.test(text.trim())) return undefined;
+		return `Found ${bold(theme, String(matches))}${d.matchLimitReached ? "+" : ""} ${matches === 1 ? "match" : "matches"} in ${count(files.size, "file")}`;
+	}
+	if (v.name === "write" && typeof v.args.content === "string") return `Wrote ${count(linesOf(v.args.content).length, "line")} to ${shortPath(v.args.path ?? "", v.cwd)}`;
+	if (v.name === "edit" && typeof d.diff === "string") {
+		const c = diffCounts(d.diff);
+		return `${fg(theme, "toolDiffAdded", `Added ${plural(c.add, "line")}`)}, ${fg(theme, "toolDiffRemoved", `removed ${plural(c.remove, "line")}`)}`;
+	}
+	return 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", "⎿")}  `, "      "));
+	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", "⎿")}  ` : "      ";
+			if (full) lines.push(...prefixed(line, width, first, "      "));
+			else {
+				const pw = Math.min(6, Math.max(0, width - 1)), bw = Math.max(1, width - pw);
+				clipped ||= visibleWidth(line) > bw;
+				lines.push(fit(truncateToWidth(first, pw, "") + fit(line, bw), width));
+			}
+		});
+		const remaining = source.length - shown.length;
+		if (!full && (remaining || clipped)) {
+			moreRow = lines.length;
+			result(fg(theme, "dim", remaining ? `… +${remaining} lines` : "… long lines clipped") + expandHint(theme));
+		}
+	};
+	const text = textOf(v.result), d = v.result?.details ?? {};
+	if (v.partial) {
+		result(fg(theme, "dim", v.started ? "Running…" : "Waiting…"));
+		// bashPreviewLines = 0 → 折叠态无预览（slice(-0) 会返回全部行，须显式跳过）。
+		if (text && (v.expanded || config.bashPreviewLines > 0)) body(linesOf(text).slice(v.expanded ? 0 : -config.bashPreviewLines).map((l) => fg(theme, "toolOutput", expandTabs(l))), config.bashPreviewLines);
+		return { lines, headerHeight, moreRow };
+	}
+	if (failedTool(v)) {
+		const raw = linesOf(text);
+		const exit = raw.find((l) => /(?:Command exited with code|exit code)\s*:?\s*\d+/i.test(l));
+		const idx = raw.findIndex((l) => /\b(?:error|failed|fail|exception|fatal|ENOENT|EACCES)\b/i.test(l));
+		// errorPreviewLines = 0 → 空预览（slice(-0) 同样会返回全部行）。
+		const preview =
+			idx >= 0 || config.errorPreviewLines <= 0
+				? raw.slice(idx, idx + config.errorPreviewLines)
+				: raw.slice(-config.errorPreviewLines);
+		if (exit && !preview.includes(exit)) preview.push(exit);
+		const picked = v.expanded ? raw : preview;
+		body((picked.length ? picked : ["Error"]).map((l) => fg(theme, "error", expandTabs(l))), config.errorPreviewLines, true, true);
+		if (!v.expanded && picked.length < raw.length) { moreRow = lines.length; result(fg(theme, "dim", `… +${raw.length - picked.length} lines`) + expandHint(theme)); }
+		return { lines, headerHeight, moreRow };
+	}
+	const summary = summaryOf(v, theme);
+	if (summary) result(summary);
+	// Read/search/list output is intentionally semantic-only in both collapsed and
+	// detailed process views. The model still receives the unchanged full result.
+	if (["read", "grep", "find", "ls"].includes(v.name)) {
+		if (hasImages(v.result)) { /* Images are appended by ToolExecutionComponent. */ }
+	}
+	else if (v.name === "edit" && typeof d.diff === "string") body(diffLines(d.diff, theme), config.codePreviewLines);
+	else if (v.name === "write" && typeof v.args.content === "string") {
+		if (d.created === false && d.diff) body(diffLines(d.diff, theme), config.codePreviewLines);
+		else body(codeLines(v.args.content, v.args.path, theme), config.codePreviewLines);
+	}
+	else {
+		const raw = linesOf(text).map((l) => fg(theme, "toolOutput", expandTabs(l)));
+		body(raw.length ? raw : [fg(theme, "dim", hasImages(v.result) ? "Image" : "(No content)")], config.bashPreviewLines, v.expanded, !summary);
+	}
+	if (d.truncation?.truncated && v.name !== "read") result(fg(theme, "dim", "Output truncated by tool"));
+	if (typeof d.fullOutputPath === "string") result(fg(theme, "dim", `Full output: ${shortPath(d.fullOutputPath, v.cwd)}`));
+	return { lines, headerHeight, moreRow };
+}
+/** Apply a shared detail-region background; preserve image control sequences. */
+export function paintBackground(line: string, width: number, theme: any, token: string): string {
+	if (isImageLine(line)) return line;
+	let bg = "";
+	try { bg = theme?.getBgAnsi?.(token) ?? ""; } catch {}
+	if (!bg || bg === "\x1b[49m") return line;
+	const body = line.replace(/\x1b\[(?:0|49)m/g, (reset) => reset + bg);
+	return `${bg}${body}${" ".repeat(Math.max(0, width - visibleWidth(line)))}\x1b[49m`;
+}
+export function prefixZones(lines: string[]): string[] {
+	return lines.map((line) => {
+		if (!line.includes("\x1b]133;")) return line;
+		let zones = "";
+		const body = line.replace(/\x1b\]133;[ABC](?:\x07|\x1b\\)/g, (s) => { zones += s; return ""; });
+		return zones + body;
+	});
+}