pi-cc-extensions 0.8.48 → 0.8.49

package/extensions/{markdown-enhance.ts → feature/markdown-enhance.ts}

@@ -134,75 +134,101 @@ function linkifyUrls(markdown: string): string {
 // ============================================================================
 
 export default function (pi: ExtensionAPI): void {
-	// 1. Mermaid 方言渲染（流式跳过，最终渲染时执行）
+	// 注意：pi 每个扩展只有一个 markdownTransformer 槽位，多次注册会互相覆盖，
+	// 所以三个转换合并为一次注册，内部按序链式执行。
 	pi.registerMarkdownTransformer((markdown, context) => {
-		const { isStreaming = false, availableWidth } = context ?? {};
-		if (isStreaming) return markdown;
-		const lines = markdown.split("\n");
-		const out: string[] = [];
-		let i = 0;
-		while (i < lines.length) {
-			const line = lines[i];
-			const fence = line.match(DIAGRAM_FENCE);
-			if (fence) {
-				const collected = collectFence(lines, i);
-				if (collected) {
-					const { diagram, next } = collected;
-					// grok-mermaid 需要源码自带类型头，方言头在 fence 标签里时补回去
-					const label = fence[2];
-					const src = label.toLowerCase() === "mermaid" ? diagram : `${label}\n${diagram}`;
-					let art = null;
-					try {
-						art = renderMermaid(src);
-					} catch {
-						art = null;
-					}
-					const width = availableWidth ?? 80;
-					if (art && art.width <= width) {
-						// 图行用硬换行（行尾两空格）连接，防止 Markdown 软换行合并行
-						out.push(art.plain.map(codeSpan).join("  \n"));
-					} else {
-						out.push(framedSource(src, width));
-					}
-					i = next;
-					continue;
+		const { messageType, isStreaming = false } = context ?? {};
+		// 与官方推荐一致：thinking 块与流式中间态不转换
+		if (messageType === "assistant-thinking" || isStreaming) return markdown;
+		// 1. Mermaid 方言渲染
+		markdown = renderDiagrams(markdown, context);
+		// 2. GitHub 风格提示框
+		markdown = renderAdmonitions(markdown);
+		// 3. 裸 URL 转超链接
+		return linkifyUrls(markdown);
+	});
+}
+
+// grok-mermaid 渲染结果缓存：resize/restored 重绘会重复转换，按源码缓存 art。
+// ponytail: 固定上限 50 条，防长期会话膨胀；超出后清空重来。
+const ART_CACHE = new Map<string, ReturnType<typeof renderMermaid>>();
+const ART_CACHE_MAX = 50;
+
+/** 获取/计算 mermaid art（带缓存）。 */
+function getArt(src: string): ReturnType<typeof renderMermaid> | null {
+	const cached = ART_CACHE.get(src);
+	if (cached) return cached;
+	let art = null;
+	try {
+		art = renderMermaid(src);
+	} catch {
+		art = null;
+	}
+	if (ART_CACHE.size >= ART_CACHE_MAX) ART_CACHE.clear();
+	if (art) ART_CACHE.set(src, art);
+	return art;
+}
+
+/** Mermaid 方言代码块 → ASCII 图（流式跳过）。 */
+function renderDiagrams(markdown: string, context?: { isStreaming?: boolean; availableWidth?: number }): string {
+	const { isStreaming = false, availableWidth } = context ?? {};
+	if (isStreaming) return markdown;
+	const lines = markdown.split("\n");
+	const out: string[] = [];
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		const fence = line.match(DIAGRAM_FENCE);
+		if (fence) {
+			const collected = collectFence(lines, i);
+			if (collected) {
+				const { diagram, next } = collected;
+				// grok-mermaid 需要源码自带类型头，方言头在 fence 标签里时补回去
+				const label = fence[2];
+				const src = label.toLowerCase() === "mermaid" ? diagram : `${label}\n${diagram}`;
+				const art = getArt(src);
+				const width = availableWidth ?? 80;
+				if (art && art.width <= width) {
+					// 图行用硬换行（行尾两空格）连接，防止 Markdown 软换行合并行
+					out.push(art.plain.map(codeSpan).join("  \n"));
+				} else {
+					out.push(framedSource(src, width));
 				}
-				// 未闭合：保持原文
+				i = next;
+				continue;
 			}
+			// 未闭合：保持原文
+		}
+		out.push(line);
+		i++;
+	}
+	return out.join("\n");
+}
+
+/** GitHub 风格提示框 → 两列表格（跳过代码块）。 */
+function renderAdmonitions(markdown: string): string {
+	const lines = markdown.split("\n");
+	const out: string[] = [];
+	let inFence = false;
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		if (/^```/.test(line)) {
+			inFence = !inFence;
 			out.push(line);
 			i++;
+			continue;
 		}
-		return out.join("\n");
-	});
-
-	// 2. GitHub 风格提示框（跳过代码块）
-	pi.registerMarkdownTransformer((markdown) => {
-		const lines = markdown.split("\n");
-		const out: string[] = [];
-		let inFence = false;
-		let i = 0;
-		while (i < lines.length) {
-			const line = lines[i];
-			if (/^```/.test(line)) {
-				inFence = !inFence;
-				out.push(line);
-				i++;
+		if (!inFence && /^>\s*\[\s*!/i.test(line)) {
+			const result = renderAdmonition(lines, i);
+			if (result) {
+				out.push(...result.output);
+				i = result.next;
 				continue;
 			}
-			if (!inFence && /^>\s*\[\s*!/i.test(line)) {
-				const result = renderAdmonition(lines, i);
-				if (result) {
-					out.push(...result.output);
-					i = result.next;
-					continue;
-				}
-			}
-			out.push(line);
-			i++;
 		}
-		return out.join("\n");
-	});
-
-	// 3. 裸 URL 转超链接
-	pi.registerMarkdownTransformer((markdown) => linkifyUrls(markdown));
+		out.push(line);
+		i++;
+	}
+	return out.join("\n");
 }

package/extensions/{pi-startup-header.ts → feature/pi-startup-header.ts}

@@ -1,4 +1,7 @@
+import { VERSION, type AppKeybinding } from "@earendil-works/pi-coding-agent";
+import { getKeybindings } from "@earendil-works/pi-tui";
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { config } from "../config/config.ts";
 
 type Rgb = [number, number, number];
 type StyledPart = {
@@ -10,30 +13,38 @@ const ANSI_RESET = "\x1b[0m";
 const ANSI_PATTERN =
 	/[\u001B\u009B][[\]()#;?]*(?:(?:(?:[a-zA-Z\d]*(?:;[a-zA-Z\d]*)*)?\u0007)|(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))/g;
 
+// 官方 install.sh 静态 logo（4 行原样，短行补尾随空格统一到 8 列）+ 底部空行补到 5 行，
+// 与右侧 tips 行数等高；着色保持现状（accent 渐变）
 const LOGO_LINES = [
-	"████████████╗",
-	"████████████║",
-	"████╔═══████║",
-	"████║   ████║",
-	"████████╬═══████╗",
-	"████████║   ████║ ",
-	"████╔═══╝   ████║",
-	"████║       ████║",
-	"╚═══╝       ╚═══╝",
+	"██████  ",
+	"██  ██  ",
+	"████  ██",
+	"██    ██",
+	"        ",
 ];
 
-const TAGLINE_LINE_1 = "There are many agent harnesses,";
-const TAGLINE_LINE_2_PREFIX = "but this one is ";
-const TAGLINE_LINE_2_HIGHLIGHT = "yours";
-const TAGLINE_LINE_2_SUFFIX = ".";
+// hero 文案（单行，替换原生 header 的 "Pi can explain..." 默认位置）
+const HERO_PREFIX = "There are many agent harnesses, but this one is ";
+const HERO_HIGHLIGHT = "yours";
+const HERO_SUFFIX = ".";
+
+// 左右双栏布局：左侧 logo(5 行)，右侧原生提示(5 行)
+const TWO_COL_GAP = 2;
+// 窄于该宽度回退为垂直堆叠（logo + hero）
+const TWO_COL_MIN_WIDTH = 48;
 
 const FALLBACK_ACCENT_RGB: Rgb = [80, 160, 255];
 const LOGO_BLOCK_WIDTH = Math.max(...LOGO_LINES.map((line) => [...line].length));
+// 左栏宽度 = logo 宽，右侧栏从该宽度后开始
+const LEFT_COLUMN_WIDTH = LOGO_BLOCK_WIDTH;
 
 const PALETTE_STEPS = 24;
 const PALETTE_MAX_DARKEN = 0.18;
 const PALETTE_MAX_LIGHTEN = 0.18;
-const LOGO_ROW_PHASE_STEP = 0.12;
+// 行内渐变波长：1/4 全波长（暗→亮单调，避免小字符数行内来回跳变）
+const PALETTE_SPAN = 0.25;
+// 行间相位偏移：小步累加 → 整体左上暗→右下亮的对角渐变
+const LOGO_ROW_PHASE_STEP = 0.08;
 
 const ANSI_16_RGB_TABLE: Rgb[] = [
 	[0, 0, 0],
@@ -186,7 +197,8 @@ function renderGradientText(text: string, palette: Rgb[], phase: number): string
 	return characters
 		.map((character, index) => {
 			if (character === " ") return character;
-			const color = sampleGradientColor(palette, index / span + phase);
+			// 行内单调暗→亮（1/4 波长），行间相位偏移 → 对角渐变
+			const color = sampleGradientColor(palette, (index / span) * PALETTE_SPAN + phase);
 			return applyTruecolor(color, character);
 		})
 		.join("");
@@ -219,40 +231,71 @@ function renderLogoLines(width: number, palette: Rgb[]): string[] {
 	});
 }
 
-function renderTaglineLines(
-	width: number,
-	theme: {
-		fg(name: string, text: string): string;
-		bold(text: string): string;
-	},
-): string[] {
-	const line1 = createCenteredStyledLine(
-		[{ raw: TAGLINE_LINE_1, styled: theme.fg("accent", TAGLINE_LINE_1) }],
-		width,
-	);
+// ---- 右侧：原生默认 header 文本（对齐 pi 内置 startup header，按键文本随用户 keybindings 动态渲染） ----
 
-	const line2 = createCenteredStyledLine(
-		[
-			{
-				raw: TAGLINE_LINE_2_PREFIX,
-				styled: theme.fg("accent", TAGLINE_LINE_2_PREFIX),
-			},
-			{
-				raw: TAGLINE_LINE_2_HIGHLIGHT,
-				styled: theme.bold(theme.fg("mdLink", TAGLINE_LINE_2_HIGHLIGHT)),
-			},
-			{
-				raw: TAGLINE_LINE_2_SUFFIX,
-				styled: theme.fg("accent", TAGLINE_LINE_2_SUFFIX),
-			},
-		],
-		width,
-	);
+function formatKeyPart(part: string): string {
+	// 与 pi 内置 keybinding-hints 一致：macOS 上 alt 显示为 option
+	return process.platform === "darwin" && part.toLowerCase() === "alt" ? "option" : part;
+}
+
+function formatKeyText(key: string): string {
+	return key
+		.split("/")
+		.map((part) => part.split("+").map(formatKeyPart).join("+"))
+		.join("/");
+}
+
+function keyText(keybinding: AppKeybinding): string {
+	const keys = getKeybindings().getKeys(keybinding);
+	return keys.length === 0 ? "" : formatKeyText(keys.join("/"));
+}
+
+function renderNativeLines(theme: {
+	fg(name: string, text: string): string;
+	bold(text: string): string;
+}): string[] {
+	// 颜色方案照抄 pi 内置 header：按键 dim、描述 muted、分隔符 muted、版本 dim
+	const hint = (keybinding: AppKeybinding, description: string) =>
+		theme.fg("dim", keyText(keybinding)) + theme.fg("muted", ` ${description}`);
+	const rawHint = (key: string, description: string) =>
+		theme.fg("dim", formatKeyText(key)) + theme.fg("muted", ` ${description}`);
+
+	const logo = theme.bold(theme.fg("accent", "pi")) + theme.fg("dim", ` v${VERSION}`);
+	const compact = [
+		hint("app.interrupt", "interrupt"),
+		rawHint(`${keyText("app.clear")}/${keyText("app.exit")}`, "clear/exit"),
+		rawHint("/", "commands"),
+		rawHint("!", "bash"),
+		hint("app.tools.expand", "more"),
+	].join(theme.fg("muted", " · "));
+
+	return [
+		logo,
+		compact,
+		theme.fg(
+			"dim",
+			`Press ${keyText("app.tools.expand")} to show full startup help and loaded resources.`,
+		),
+		"",
+		// hero 文案替换原生 "Pi can explain..." 行位置
+		renderHeroParts(theme)
+			.map((part) => part.styled)
+			.join(""),
+	];
+}
 
-	return [line1, line2];
+function renderHeroParts(theme: {
+	fg(name: string, text: string): string;
+	bold(text: string): string;
+}): StyledPart[] {
+	return [
+		{ raw: HERO_PREFIX, styled: theme.fg("accent", HERO_PREFIX) },
+		{ raw: HERO_HIGHLIGHT, styled: theme.bold(theme.fg("mdLink", HERO_HIGHLIGHT)) },
+		{ raw: HERO_SUFFIX, styled: theme.fg("accent", HERO_SUFFIX) },
+	];
 }
 
-function renderHeaderLines(
+export function renderHeaderLines(
 	width: number,
 	theme: {
 		getFgAnsi(name: string): string;
@@ -262,22 +305,52 @@ function renderHeaderLines(
 ): string[] {
 	const accentRgb = resolveAccentRgb(theme);
 	const palette = buildAccentPalette(accentRgb);
-	const logoLines = renderLogoLines(width, palette);
-	const taglineLines = renderTaglineLines(width, theme);
 
-	return ["", ...logoLines, "", ...taglineLines, ""].map((line) => fitLineToWidth(line, width));
+	if (width < TWO_COL_MIN_WIDTH) {
+		// 窄屏回退：logo + hero 单行垂直堆叠居中
+		const logoLines = renderLogoLines(width, palette);
+		const heroLine = createCenteredStyledLine(renderHeroParts(theme), width);
+		return ["", ...logoLines, "", heroLine, ""].map((line) => fitLineToWidth(line, width));
+	}
+
+	// 双栏：左官方 logo(5 行) 右原生提示(5 行)，同高并排，gap 分隔不交叉
+	const leftLines = renderLogoLines(LEFT_COLUMN_WIDTH, palette);
+	const rightLines = renderNativeLines(theme);
+	const rightWidth = width - LEFT_COLUMN_WIDTH - TWO_COL_GAP;
+	const padTop = Math.floor((rightLines.length - leftLines.length) / 2);
+	const paddedLeft = [
+		...Array.from({ length: padTop }, () => ""),
+		...leftLines,
+		...Array.from({ length: rightLines.length - leftLines.length - padTop }, () => ""),
+	];
+
+	return paddedLeft.map(
+		(line, index) => `${line}${" ".repeat(TWO_COL_GAP)}${fitLineToWidth(rightLines[index] ?? "", rightWidth)}`,
+	);
+}
+
+/**
+ * 按配置应用启动头：on → 自定义 header；off → 恢复官方默认 header。
+ * 导出供 /ccstyle 面板在切换开关时实时重应用。
+ */
+export function applyStartupHeader(ctx: any): void {
+	if (!ctx?.hasUI || typeof ctx.ui?.setHeader !== "function") return;
+	if (!config.showStartupHeader) {
+		// 恢复官方内置 header（logo + 快捷键提示 + onboarding）。
+		ctx.ui.setHeader(undefined);
+		return;
+	}
+	ctx.ui.setHeader((_tui, theme) => ({
+		render(width: number): string[] {
+			return renderHeaderLines(width, theme);
+		},
+		invalidate() {},
+	}));
 }
 
 export default function piStartupHeader(pi: ExtensionAPI) {
 	pi.on("session_start", async (_event, ctx) => {
-		if (!ctx.hasUI) return;
-
-		ctx.ui.setHeader((_tui, theme) => ({
-			render(width: number): string[] {
-				return renderHeaderLines(width, theme);
-			},
-			invalidate() {},
-		}));
+		applyStartupHeader(ctx);
 	});
 
 	pi.on("session_shutdown", async (_event, ctx) => {

package/extensions/index.ts

@@ -1,13 +1,13 @@
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
-import agentAutocomplete from "./agent-autocomplete.ts";
-import claudeCodeStyle, { getCompactThinkingConfig } from "./claude-code-style.ts";
-import { installCompactThinking, type CompactThinkingController } from "./compact-thinking.ts";
-import context from "./context.ts";
-import markdownEnhance from "./markdown-enhance.ts";
-import piAliases from "./pi-aliases.ts";
-import piStartupHeader from "./pi-startup-header.ts";
-import sessionReference from "./session-reference.ts";
-import workingMessage from "./working-message.ts";
+import agentAutocomplete from "./feature/agent-autocomplete.ts";
+import claudeCodeStyle, { getCompactThinkingConfig } from "./renderer/index.ts";
+import { installCompactThinking, type CompactThinkingController } from "./feature/compact-thinking.ts";
+import context from "./feature/context.ts";
+import markdownEnhance from "./feature/markdown-enhance.ts";
+import piAliases from "./feature/pi-aliases.ts";
+import piStartupHeader from "./feature/pi-startup-header.ts";
+import sessionReference from "./feature/session-reference.ts";
+import workingMessage from "./feature/working-message.ts";
 
 export default function (pi: ExtensionAPI): void {
 	piAliases(pi);