pi-one-ui 0.1.1

package/extensions/transcript/renderer/index.ts

@@ -0,0 +1,286 @@
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import type { CompactThinkingController } from "../../features/compact-thinking.ts";
+import {
+  installToolGrouping,
+  type ToolGroupingHooks,
+} from "./tool/grouping.ts";
+import {
+  installCompactMode,
+  refreshCompactModeComponents,
+  type CompactModeHooks,
+  type CompactThinkingQuery,
+} from "./compact-mode.ts";
+import {
+  installDefaultMode,
+  installToolExpandedBackground,
+  type DefaultModeHooks,
+} from "./default-mode.ts";
+import { isLazyProxyTui } from "../../tools/fullscreen-detect.ts";
+import {
+  GLOBAL_COMPACTION_RENDER_PATCH,
+  patchRegistry,
+} from "../../tools/patch-keys.ts";
+import {
+  config,
+  normalizeConfig,
+  setConfig,
+  updateConfig,
+  type CompactStyleMode,
+  type Config,
+} from "../../app/config/renderer.ts";
+import {
+  installToolMouseInteraction,
+  resetToolHoverState,
+  scheduleSessionRender,
+  teardownToolMouseInteraction,
+  TOOL_MOUSE_DISABLE,
+} from "./mouse/interaction.ts";
+import { getToolMouseTui } from "./mouse/scroll.ts";
+import { setHoveredToolGroup, setHoveredToolIo } from "./mouse/hover.ts";
+import { clearAllAnimations } from "./tool/result.ts";
+import {
+  installWriteOverride,
+  WriteExecutionMetadataStore,
+} from "./tool/diff/index.ts";
+import {
+  installMessageDisplayRendering,
+  refreshMessageDisplays,
+  setMessageDisplayTheme,
+} from "./tool/message-display.ts";
+
+/**
+ * Claude Code Style for pi — 装配入口。
+ *
+ * mode=on      → default-mode（工具卡样式 + 展开背景）
+ * mode=compact → compact-mode（消息折叠摘要）
+ * 共用        → tool-grouping / message-display / mouse / write override
+ */
+
+let compactModeHooks: CompactModeHooks | undefined;
+
+function refreshCurrentTranscript(
+  ctx?: any,
+  toolGrouping?: ToolGroupingHooks,
+): void {
+  const tui = getToolMouseTui();
+  toolGrouping?.refresh(tui);
+  refreshMessageDisplays(tui);
+  refreshCompactModeComponents(tui);
+  compactModeHooks?.refresh();
+  tui?.requestRender?.(true);
+  ctx?.ui?.requestRender?.(true);
+}
+
+function syncCompactMode(ctx: any): void {
+  refreshCompactModeComponents(getToolMouseTui());
+  compactModeHooks?.sync(ctx);
+}
+
+function applyStyleMode(
+  mode: CompactStyleMode,
+  ctx: any,
+  toolGrouping?: ToolGroupingHooks,
+): void {
+  updateConfig({ mode });
+  if (mode === "off") {
+    // Native rendering：清 hover/click，关闭鼠标上报以恢复终端默认滚轮。
+    resetToolHoverState();
+    setHoveredToolGroup(null);
+    setHoveredToolIo(null, null);
+    // 惰性 Proxy（regular/fullscreen）不持有 reporting：regular 保终端回滚，
+    // fullscreen 归官方所有，均不能在此关闭。
+    const tui = getToolMouseTui();
+    if (tui && !isLazyProxyTui(tui)) {
+      tui.terminal?.write?.(TOOL_MOUSE_DISABLE);
+    }
+  } else if (mode === "compact") {
+    // 切入 compact：先收集当前 transcript，再同步全局展开状态和补丁所有权。
+    syncCompactMode(ctx);
+  }
+  // 立即重塑一次；再延迟一帧（与 session_start 同款），等面板/custom
+  // 卸下、主 transcript 重新挂载后再扫树，避免必须 /reload。
+  refreshCurrentTranscript(ctx, toolGrouping);
+  scheduleSessionRender(() => {
+    if (mode === "compact") syncCompactMode(ctx);
+    refreshCurrentTranscript(ctx, toolGrouping);
+  });
+  ctx.ui.notify(`Claude Code style: ${mode}`, "info");
+}
+
+type LegacyCompactionRenderPatch = {
+  enabled?: () => boolean;
+};
+
+/** Disable the pre-native compaction monkey patch left alive by /reload. */
+function deactivateLegacyCompactionRendering() {
+  const patch = patchRegistry.get<LegacyCompactionRenderPatch>(
+    GLOBAL_COMPACTION_RENDER_PATCH,
+  );
+  if (patch) patch.enabled = () => false;
+}
+
+export type RendererRuntimeController = {
+  setMode: (mode: CompactStyleMode, ctx: any) => void;
+  updateConfig: (partial: Partial<Config>, ctx: any) => void;
+};
+
+export type RendererExtensionOptions = {
+  onRuntimeController?: (controller: RendererRuntimeController) => void;
+};
+
+export default function (
+  pi: ExtensionAPI,
+  configOverride?: Partial<Config>,
+  compactThinking?: CompactThinkingController,
+  options: RendererExtensionOptions = {},
+) {
+  // 可选 override：集成测试不依赖用户全局配置。
+  if (configOverride)
+    setConfig(normalizeConfig({ ...config, ...configOverride }));
+  const writeExecutionMetadata = new WriteExecutionMetadataStore();
+  const mouseOwner = {};
+  let installation:
+    | {
+        defaultMode: DefaultModeHooks;
+        toolGrouping: ToolGroupingHooks;
+        compactMode: CompactModeHooks;
+        disposeMessageDisplay: () => void;
+        disposeToolExpandedBackground: () => void;
+      }
+    | undefined;
+
+  const ensureTuiInstallation = (ctx: any) => {
+    if (ctx?.mode !== "tui" || !ctx?.hasUI) return undefined;
+    // 渲染层（工具样式/分组）是原型与组件级 patch，fullscreen 官方布局
+    // 同样渲染这些组件，因此两种模式都安装。
+    if (installation) return installation;
+    const defaultMode = installDefaultMode(writeExecutionMetadata);
+    const toolGrouping = installToolGrouping(() => config.mode === "on");
+    const compactMode = installCompactMode({
+      query: compactThinking as CompactThinkingQuery | undefined,
+      writeMetadata: writeExecutionMetadata,
+    });
+    compactModeHooks = compactMode;
+    const disposeMessageDisplay = installMessageDisplayRendering();
+    // 展开背景必须在 compact-mode 之后装，shutdown 时先于 compact 释放。
+    const disposeToolExpandedBackground = installToolExpandedBackground();
+    deactivateLegacyCompactionRendering();
+    installation = {
+      defaultMode,
+      toolGrouping,
+      compactMode,
+      disposeMessageDisplay,
+      disposeToolExpandedBackground,
+    };
+    return installation;
+  };
+
+  options.onRuntimeController?.({
+    setMode: (mode, ctx) =>
+      applyStyleMode(mode, ctx, installation?.toolGrouping),
+    updateConfig: (partial, ctx) => {
+      updateConfig(partial);
+      refreshCurrentTranscript(ctx, installation?.toolGrouping);
+    },
+  });
+
+  pi.on("message_update", async (event) => {
+    // compact-thinking 在 session_start 时于 compact 补丁之上再装一层；
+    // 扩展事件先于 interactive-mode 的 updateContent 派发，此处先重新认领。
+    if (config.mode === "compact" && event.message?.role === "assistant") {
+      compactModeHooks?.assertOwnership();
+    }
+  });
+
+  pi.on("tool_execution_end", async (event) => {
+    if (config.mode !== "compact") return;
+    // Agent 等工具收尾后延迟刷新，让 compact-thinking 先落最终态。
+    const toolCallId: string | undefined = event?.toolCallId;
+    setTimeout(() => {
+      compactModeHooks?.refreshToolCallMessage(toolCallId);
+    }, 0);
+  });
+
+  pi.on("session_start", async (event, ctx) => {
+    // 延迟到 session_start 注册 write override：加载阶段 getAllTools 不可用且其他扩展
+    // 尚未注册工具，无法检测外部 write 所有者（如 pi-spark），直接注册会与对方撞名。
+    // session_start 时所有扩展已加载完毕，installWriteOverride 内部会检测并让位。
+    installWriteOverride(pi, writeExecutionMetadata);
+    const hooks = ensureTuiInstallation(ctx);
+    // 鼠标交互独立于渲染层：fullscreen 渲染层让位（hooks undefined）但
+    // 工具点击/回到底部适配仍需安装；保持在渲染层安装之后以维持原顺序。
+    if (ctx?.mode === "tui" && ctx?.hasUI)
+      installToolMouseInteraction(ctx, mouseOwner);
+    if (!hooks) return;
+    hooks.toolGrouping.setTheme(ctx.ui.theme);
+    setMessageDisplayTheme(ctx.ui.theme);
+    ctx.ui.setStatus("ccstyle", undefined);
+    // 先收集 resume transcript，再同步 compact 补丁与全局展开状态。
+    syncCompactMode(ctx);
+    // compact-thinking 的 session_start 处理在本 handler 之后执行（在其之上再装
+    // 一层 updateContent）；延迟再同步一次，保证 compact 补丁最终位于外层。
+    setTimeout(() => syncCompactMode(ctx), 0);
+    scheduleSessionRender(() => hooks.toolGrouping.refresh(getToolMouseTui()));
+  });
+
+  pi.on("session_compact", async (event, ctx) => {
+    const hooks = ensureTuiInstallation(ctx);
+    // Compaction rebuilds the transcript without session_start. Rebind after
+    // other TUI extensions may have replaced the root input dispatcher.
+    if (ctx?.mode === "tui" && ctx?.hasUI)
+      installToolMouseInteraction(ctx, mouseOwner);
+    if (!hooks) return;
+    hooks.toolGrouping.setTheme(ctx.ui.theme);
+    setMessageDisplayTheme(ctx.ui.theme);
+    syncCompactMode(ctx);
+    scheduleSessionRender(() => {
+      syncCompactMode(ctx);
+      hooks.toolGrouping.refresh(getToolMouseTui());
+    });
+  });
+
+  pi.on("session_tree", async (event, ctx) => {
+    // 会话树重建后在当前帧和下一帧各同步一次，替换旧组件引用。
+    if (ctx?.mode !== "tui" || !ctx?.hasUI) return;
+    syncCompactMode(ctx);
+    scheduleSessionRender(() => syncCompactMode(ctx));
+  });
+
+  pi.on("tool_execution_start", async (_event, ctx) => {
+    installation?.toolGrouping.setTheme(ctx.ui.theme);
+  });
+
+  pi.on("session_shutdown", async () => {
+    writeExecutionMetadata.clear();
+    // 鼠标交互独立于渲染层：fullscreen 下 installation 为 undefined，
+    // 但 onTerminalInput 监听与 handleViewportInput 包装仍需释放。
+    teardownToolMouseInteraction(mouseOwner);
+    const current = installation;
+    if (!current || !current.defaultMode.isOwner()) return;
+    current.defaultMode.shutdown();
+    current.toolGrouping.shutdown();
+    current.disposeToolExpandedBackground();
+    current.compactMode.shutdown();
+    compactModeHooks = undefined;
+    current.disposeMessageDisplay();
+    deactivateLegacyCompactionRendering();
+    clearAllAnimations();
+    installation = undefined;
+  });
+}
+
+// ---- 对外导出：入口/测试实际消费的符号 ----
+export { getCompactThinkingConfig } from "../../app/config/renderer.ts";
+export {
+  humanizeMcpToolName,
+  isMcpToolDefinition,
+  preservesOriginalRenderer,
+  shouldRenderRichDiff,
+} from "./default-mode.ts";
+export {
+  ExpandedToolIoView,
+  ExpandedToolResultText,
+  formatToolInputArgs,
+  SHOW_MORE_LABEL,
+} from "./tool/result.ts";
+export { installToolMouseInteraction } from "./mouse/interaction.ts";

package/extensions/transcript/renderer/markdown-enhance.ts

@@ -0,0 +1,325 @@
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { render as renderMermaid, sourceBox } from "grok-mermaid";
+
+// ============================================================================
+// Mermaid 方言渲染
+// ============================================================================
+
+// 内置 mermaid transformer 只认 ```mermaid，这里补上 grok-mermaid 支持的其他方言
+const DIAGRAM_FENCE =
+  /^(`{3,})\s*(mermaid|statediagram|statediagram-v2|classdiagram|classdiagram-v2|erdiagram|sequencediagram)\s*$/i;
+const FENCE_OPEN = /^(`{3,})/;
+const FENCE_CLOSE = /^`{3,}\s*$/;
+
+/** 把一行图内容包成行内代码（保持空格与框线字符对齐）。 */
+function codeSpan(line: string): string {
+  const content = line || "\u00a0";
+  const longestRun = Math.max(
+    0,
+    ...Array.from(content.matchAll(/`+/g), (m) => m[0].length),
+  );
+  const fence = "`".repeat(longestRun + 1);
+  const padding = content.startsWith("`") || content.endsWith("`") ? " " : "";
+  return `${fence}${padding}${content}${padding}${fence}`;
+}
+
+/** 渲染失败或图宽超出终端宽度时，把源码包进带标题的框里显示。 */
+function framedSource(src: string, width: number): string {
+  const box = sourceBox(src, Math.max(8, width - 2));
+  return `\`\`\`\n${box.plain.join("\n")}\n\`\`\``;
+}
+
+/** 解析 ```diagram 代码块，返回 { 源码, 块内行数 }；未闭合返回 null。 */
+function collectFence(
+  lines: string[],
+  i: number,
+): { diagram: string; next: number } | null {
+  const open = lines[i].match(FENCE_OPEN)?.[0] ?? "```";
+  const src: string[] = [];
+  let j = i + 1;
+  while (j < lines.length) {
+    if (lines[j].match(FENCE_CLOSE) && lines[j].startsWith(open)) {
+      return { diagram: src.join("\n"), next: j + 1 };
+    }
+    src.push(lines[j]);
+    j++;
+  }
+  return null; // 未闭合：放弃转换，保持原文
+}
+
+// ============================================================================
+// GitHub 风格提示框（admonition）
+// ============================================================================
+
+const ADMONITION =
+  /^>\s*\[\s*!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\s*\]\s*(.*)$/i;
+const ADMONITION_STYLE: Record<string, { icon: string; label: string }> = {
+  NOTE: { icon: "💡", label: "NOTE" },
+  TIP: { icon: "✅", label: "TIP" },
+  IMPORTANT: { icon: "❗", label: "IMPORTANT" },
+  WARNING: { icon: "⚠️", label: "WARNING" },
+  CAUTION: { icon: "⚠️", label: "CAUTION" },
+};
+
+/**
+ * 把 > [!TYPE] 及其后续 > 行转成带加粗标签的引用块，视觉上成提示框。
+ * 多行内容用空格合并为一行。返回 null 表示该行不是提示框。
+ */
+function renderAdmonition(
+  lines: string[],
+  i: number,
+): { output: string[]; next: number } | null {
+  const m = lines[i].match(ADMONITION);
+  if (!m) return null;
+  const style = ADMONITION_STYLE[m[1].toUpperCase()];
+  const body: string[] = [m[2]];
+  let j = i + 1;
+  while (
+    j < lines.length &&
+    /^>\s?/.test(lines[j]) &&
+    !ADMONITION.test(lines[j])
+  ) {
+    body.push(lines[j].replace(/^>\s?/, ""));
+    j++;
+  }
+  while (body.length > 0 && body[body.length - 1].trim() === "") body.pop();
+  // 内容合并为一行，作为引用块正文
+  const content = body.join(" ").trim();
+  // 保留引用块形态（pi 渲染为左侧竖线），标签加粗
+  return {
+    output: [
+      `> **${style.icon} ${style.label}**${content ? ` ${content}` : ""}`,
+      "",
+    ],
+    next: j,
+  };
+}
+
+// ============================================================================
+// 裸 URL 转可点击超链接
+// ============================================================================
+
+const URL_RE =
+  /(?<!<)(?<!\]\()https?:\/\/[^\s<>'"|，。；：！？、」』】（）【】《》『』「」]+/g;
+const TRIM_URL_RE = /[.,;:!?】」』"'》）}]+$/;
+
+/**
+ * 去掉 URL 尾部标点；括号按平衡保留（如 Wikipedia 链接含括号、
+ * IPv6 地址含 [::1]），尾部不成对的 ] 与 ) 会截掉。
+ */
+function trimUrl(url: string): string {
+  let t = url.replace(TRIM_URL_RE, "");
+  for (;;) {
+    if (
+      t.endsWith(")") &&
+      (t.match(/\(/g)?.length ?? 0) < (t.match(/\)/g)?.length ?? 0)
+    ) {
+      t = t.slice(0, -1);
+    } else if (
+      t.endsWith("]") &&
+      (t.match(/\[/g)?.length ?? 0) < (t.match(/\]/g)?.length ?? 0)
+    ) {
+      t = t.slice(0, -1);
+    } else {
+      break;
+    }
+  }
+  return t;
+}
+
+/**
+ * 把代码块和行内代码外的裸 URL 转成 markdown 链接。
+ * 已有的 [text](url) / ![alt](url) / <url> 自动链接用 lookbehind 排除。
+ */
+function linkifyUrls(markdown: string): string {
+  const lines = markdown.split("\n");
+  const out: string[] = [];
+  let inFence = false;
+  for (const line of lines) {
+    if (/^```/.test(line)) {
+      inFence = !inFence;
+      out.push(line);
+      continue;
+    }
+    if (inFence) {
+      out.push(line);
+      continue;
+    }
+    // 行内代码（`...`）按反引号分片，只处理偶数片（代码外）
+    const parts = line.split("`");
+    for (let p = 0; p < parts.length; p++) {
+      if (p % 2 === 0) {
+        parts[p] = parts[p].replace(URL_RE, (url) => {
+          const trimmed = trimUrl(url);
+          if (trimmed.length === 0) return url;
+          return `[${trimmed}](${trimmed})`;
+        });
+      }
+    }
+    out.push(parts.join("`"));
+  }
+  return out.join("\n");
+}
+
+// ============================================================================
+// 圈数字 → 半角括号
+// ============================================================================
+
+// Nerd Font 补丁字形（U+2460-U+2473）ink 超界，DirectWrite 下渲染会压住相邻字符；
+// 转成 ASCII "(n)" 后任何字体下宽度一致。U+2460-U+2473 连续，差值即序号。
+const CIRCLED_RE = /[①-⑳]/g;
+
+function deCircled(markdown: string): string {
+  return markdown.replace(
+    CIRCLED_RE,
+    (ch) => `(${ch.codePointAt(0)! - 0x2460 + 1})`,
+  );
+}
+
+// ============================================================================
+// 跨行链接规整
+// ============================================================================
+
+const MULTILINE_LINK_RE = /\[([^\]\n]*(?:\n[^\]\n]*)+)\](?=\()/g;
+
+/** 防止 Markdown 跨行链接把行尾填充空格纳入 OSC 8 点击区。 */
+function normalizeMultilineLinks(markdown: string): string {
+  const out: string[] = [];
+  let prose: string[] = [];
+  let inFence = false;
+  const flush = () => {
+    if (prose.length === 0) return;
+    out.push(
+      prose.join("\n").replace(MULTILINE_LINK_RE, (_match, label: string) => {
+        const normalized = label.replace(/[ \t]*\n[ \t]*/g, " ").trim();
+        return `[${normalized}]`;
+      }),
+    );
+    prose = [];
+  };
+  for (const line of markdown.split("\n")) {
+    if (/^```/.test(line)) {
+      flush();
+      inFence = !inFence;
+      out.push(line);
+    } else if (inFence) {
+      out.push(line);
+    } else {
+      prose.push(line);
+    }
+  }
+  flush();
+  return out.join("\n");
+}
+
+// ============================================================================
+// 注册
+// ============================================================================
+
+export default function (pi: ExtensionAPI): void {
+  // 注意：pi 每个扩展只有一个 markdownTransformer 槽位，多次注册会互相覆盖，
+  // 所以三个转换合并为一次注册，内部按序链式执行。
+  pi.registerMarkdownTransformer((markdown, context) => {
+    const { messageType, isStreaming = false } = context ?? {};
+    // thinking 保持原文；普通回复即使流式中也先关闭跨行链接的空白点击区。
+    if (messageType === "assistant-thinking") return markdown;
+    markdown = normalizeMultilineLinks(markdown);
+    if (isStreaming) return markdown;
+    // 0. 圈数字转半角括号（Nerd Font 补丁字形缺陷规避）
+    markdown = deCircled(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;
+    }
+    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");
+}