pi-pretty-tui 0.1.6 → 0.1.8

package/README.md

@@ -1,22 +1,16 @@
 # pi-pretty-tui
 
-A visual refinement extension for the [Pi coding agent](https://pi.dev/). It provides framed user messages, compact tool-call rendering, and cleaner list presentation while preserving Pi's built-in behavior.
+English | [简体中文](./README.zh-CN.md)
 
-![pi-pretty-tui preview](./assets/screenshot.png)
+A beautiful, polished TUI for the [Pi coding agent](https://pi.dev/).
 
 ## Features
 
-- Rounded, titled `User` message frames with theme-aware borders, filled backgrounds, and Markdown support
-- A rounded prompt editor that preserves native cursor, IME, autocomplete, and mouse behavior
-- Compact `Read`, `Bash`, `Edit`, `Write`, `Grep`, `Find`, and `List` calls
-- Concise per-tool call and result summaries with expandable details
-- Native-style `Write` previews in `full` mode: first 10 lines when collapsed, full content when expanded
-- Live `Bash` output in `full` mode: latest 5 lines when collapsed, all available output when expanded
-- Switchable `full`, `compact`, and `clean` rendering modes with persistent settings
-- Clean mode hides thinking blocks (including Pi's standalone `Thinking...` placeholder) while collapsed and reveals the original thinking content when expanded
-- Colored `+added` and `-removed` edit statistics and diffs
-- Correct hanging indentation for long paths and wrapped tool output
-- Bullet (`•`) markers for unordered Markdown lists
+- **Collapsible tool activity:** instead of filling the conversation with individual tool calls, supported tools are collected into a single `Running(...)` row while work is in progress and a quiet `Done(...)` row when it finishes. Click the group to reveal its compact child calls, click any child for full details, and click the parent again to collapse everything.
+- **Useful details on demand:** tool-aware summaries keep paths, commands, results, diffs, file previews, and live shell output concise without removing access to the original content.
+- **A cohesive visual finish:** rounded user messages and prompt input, theme-aware colors, a clear Markdown heading hierarchy, cleaner lists, and rounded syntax-highlighted code blocks make the entire TUI feel intentional. In fullscreen, each fenced code block also includes a native-feeling `[Copy]` control.
+
+Collapsible grouping covers Pi's built-in `read`, `bash`, `edit`, `write`, `grep`, `find`, and `ls` tools. Third-party tools keep their own rendering, and Pi's cursor, IME, autocomplete, mouse interaction, and tool execution behavior remain intact.
 
 ## Install
 
@@ -28,32 +22,38 @@ Restart Pi or run `/reload` after installation.
 
 Pi may warn that built-in tools are being overridden. This is expected: pi-pretty-tui re-registers Pi's built-in tools and delegates execution to their original implementations, changing only their TUI renderers.
 
+## Working with tool calls
+
+Click a `Running(...)` or `Done(...)` row to keep it as a parent and reveal the tools beneath it. Click an individual child to toggle its complete view, or click the parent again to collapse the whole group. Press `Ctrl+O` at any time to use Pi's global expansion control for tool output and thinking content.
+
 ## Rendering modes
 
-Run `/pretty-tui` to choose a mode interactively, or set one directly:
+The extension supports three persistent rendering modes: `clean` (default), `compact`, and `full`. Run `/pretty-tui` to choose one interactively, or use `/pretty-tui clean`, `/pretty-tui compact`, `/pretty-tui full`, and `/pretty-tui status` directly. The selection is stored in `~/.pi/agent/pretty-tui.json` or under the directory selected by `PI_CODING_AGENT_DIR`.
+
+## Copy code blocks
 
-```text
-/pretty-tui full
-/pretty-tui compact
-/pretty-tui clean
-/pretty-tui status
+In fullscreen TUI mode, fenced Markdown code blocks include a clickable `[Copy]` control in the top rule:
+
+```sh
+pi --tui-mode fullscreen
 ```
 
-- `full`: preserve each tool's detailed call renderer and normal result preview. Press `Ctrl+O` to expand available output, diffs, and content.
-- `compact`: when collapsed, all supported built-in tools use concise one-line call summaries and final result summaries. Long commands, written content, edit diffs, and tool output stay hidden until expanded; press `Ctrl+O` to reveal the full details.
-- `clean` (default): collapse supported tool calls into a single `Running(...)` status; the activity slot shows a tool name as soon as its streamed tool call appears, such as `Running(3 tool calls · Read)`, and remains visible for at least 1 second before changing to `thinking...`. Once settled, the label becomes `Done(...)`. Click a group status to reveal all tools in that group as indented compact children while retaining the parent `Running`/`Done` row, then click an individual tool to toggle its full details. Visible assistant text starts a new tool group, so later calls get a separate status. Collapsed thinking blocks stay hidden without Pi's `Thinking...` placeholder; press `Ctrl+O` to reveal thinking content and all expanded tool calls/output in transcript order.
+Clicking it copies only the code content—not the rounded border—through Pi's native fullscreen clipboard path and shows the same transient `Copied!` or `Copy failed` flash used by direct text selection. The control is hidden in regular TUI mode because the terminal keeps mouse input for text selection and scrolling there.
 
-Clean mode covers the built-in tools managed by this package: `read`, `bash`, `edit`, `write`, `grep`, `find`, and `ls`. Third-party tools keep their own rendering.
+## Development
 
-The selected mode applies immediately and persists in `~/.pi/agent/pretty-tui.json` (or the directory selected by `PI_CODING_AGENT_DIR`).
+Run the committed regression suite before changing renderer state or transcript grouping:
 
-## Expand tool output
+```sh
+npm install
+npm test
+```
 
-Press `Ctrl+O` (Pi's default `app.tools.expand` keybinding) to show or hide detailed output, edit diffs, complete `Write` content, full tool details, and thinking content in `compact` or `clean` mode. In clean mode, mouse interaction also supports progressive disclosure: click a group status to retain it as a parent and reveal compact child tools, click one child for its full view, or click the parent again to collapse the group.
+The suite covers live and restored steering/compaction boundaries, parallel completion ownership, orphaned tool calls, duplicate-summary prevention, and fullscreen code-block copy hit regions. GitHub Actions runs the same checks on every push and pull request.
 
 ## Compatibility notice
 
-Tool rendering uses Pi's documented extension APIs. Clean thinking and active-tool state follow Pi's built-in expansion and execution transitions through its exported interactive components. Framing native user messages, rounding the native prompt editor, and changing unordered-list markers require reload-safe runtime patches because Pi does not currently expose public renderer hooks for those presentation details. User Markdown and terminal semantic zones remain handled by Pi, and code blocks use Pi's original renderer without modification.
+Tool rendering uses Pi's documented extension APIs. Thinking visibility and active-tool state follow Pi's built-in expansion and execution transitions through its exported interactive components. Framing native user messages, rounding the native prompt editor, changing unordered-list markers, and enhancing fenced code blocks require reload-safe runtime patches because Pi does not currently expose public renderer hooks for those presentation details. Markdown parsing, syntax highlighting, and terminal semantic zones remain handled by Pi.
 
 No Pi source files are modified. Runtime patches are removed during session shutdown, but a future Pi release may require this extension to be updated.
 

package/README.zh-CN.md

@@ -0,0 +1,70 @@
+# pi-pretty-tui
+
+[English](./README.md) | 简体中文
+
+为 [Pi coding agent](https://pi.dev/) 打造美观、精致的 TUI 体验。
+
+## 功能特性
+
+- **可折叠的工具活动：** 不再让大量独立工具调用填满对话。工作进行时，受支持的工具会集中显示为一行 `Running(...)`；工作结束后，则变为低调的 `Done(...)`。点击分组可展开紧凑的子工具列表，点击任一子工具可查看完整详情，再次点击父级即可全部折叠。
+- **按需查看有效信息：** 针对不同工具设计的摘要，会简洁呈现路径、命令、结果、diff、文件预览和实时 shell 输出，同时保留查看原始完整内容的能力。
+- **统一、精致的视觉体验：** 圆角用户消息与输入框、主题感知配色、层级清晰的 Markdown 标题、更清爽的列表，以及带语法高亮的圆角代码块，让整个 TUI 更协调。在 fullscreen 模式下，每个围栏代码块还带有符合原生体验的 `[Copy]` 控件。
+
+可折叠分组覆盖 Pi 内置的 `read`、`bash`、`edit`、`write`、`grep`、`find` 和 `ls` 工具。第三方工具保留自己的渲染方式，同时不会影响 Pi 原有的光标、输入法、自动补全、鼠标交互和工具执行行为。
+
+## 安装
+
+```sh
+pi install npm:pi-pretty-tui
+```
+
+安装后重启 Pi，或运行 `/reload`。
+
+Pi 可能会提示内置工具被覆盖。这是正常现象：pi-pretty-tui 会重新注册 Pi 的内置工具，并将实际执行委托给原始实现，只修改它们的 TUI 渲染方式。
+
+## 使用工具调用
+
+点击 `Running(...)` 或 `Done(...)` 行，可以保留父级并展开其下方的工具。点击单个子工具可切换完整视图，再次点击父级可折叠整个分组。任何时候都可以按 `Ctrl+O`，使用 Pi 的全局展开控制来显示或隐藏工具输出和思考内容。
+
+## 渲染模式
+
+扩展支持三种可持久化的渲染模式：`clean`（默认）、`compact` 和 `full`。运行 `/pretty-tui` 可交互选择，也可以直接使用 `/pretty-tui clean`、`/pretty-tui compact`、`/pretty-tui full` 和 `/pretty-tui status`。所选设置会保存到 `~/.pi/agent/pretty-tui.json`，或 `PI_CODING_AGENT_DIR` 指定目录中的对应位置。
+
+## 复制代码块
+
+在 fullscreen TUI 模式下，Markdown 围栏代码块的顶部边框会显示可点击的 `[Copy]` 控件：
+
+```sh
+pi --tui-mode fullscreen
+```
+
+点击后只复制代码内容，不包含圆角边框；复制会通过 Pi 原生的 fullscreen 剪贴板路径完成，并显示与直接框选文本相同的临时 `Copied!` 或 `Copy failed` 提示。regular TUI 模式下，终端会保留鼠标输入用于文本选择和滚动，因此该控件会被隐藏。
+
+## 开发
+
+修改渲染状态或 transcript 分组前，请运行仓库内的回归测试：
+
+```sh
+npm install
+npm test
+```
+
+测试覆盖实时与历史恢复时的 steer/compaction 边界、并行工具完成归属、孤立 tool call、重复摘要防护，以及 fullscreen 代码块复制的点击区域。GitHub Actions 会在每次 push 和 pull request 时运行相同检查。
+
+## 兼容性说明
+
+工具渲染使用 Pi 的公开扩展 API。思考内容的可见性与活动工具状态，通过 Pi 导出的交互组件跟随其内置展开和执行状态变化。由于 Pi 目前没有为这些展示细节提供公开渲染钩子，原生用户消息框、原生输入编辑器圆角、无序列表标记和围栏代码块增强需要使用可安全重载的运行时补丁。Markdown 解析、语法高亮和终端语义区域仍由 Pi 处理。
+
+本扩展不会修改 Pi 源文件。运行时补丁会在会话关闭时移除，但未来的 Pi 版本可能需要本扩展同步适配。
+
+## 卸载
+
+```sh
+pi remove npm:pi-pretty-tui
+```
+
+然后重启 Pi。
+
+## 许可证
+
+MIT

package/extensions/index.ts

@@ -11,12 +11,17 @@ import {
   createLsTool,
   createReadTool,
   createWriteTool,
+  copyToClipboard,
   getAgentDir,
   type ExtensionAPI,
 } from "@earendil-works/pi-coding-agent";
 import {
   type Component,
   Markdown,
+  stripTerminalSequences,
+  truncateToWidth,
+  TuiAltScreen,
+  type TuiMouseEvent,
   visibleWidth,
   wrapTextWithAnsi,
 } from "@earendil-works/pi-tui";
@@ -52,6 +57,10 @@ export default function prettyTui(pi: ExtensionAPI) {
     ? configuredMode
     : "clean";
   let cleanToolsExpanded = false;
+  let cleanContextCompacted = false;
+  let fullscreenTui = false;
+  let currentTui: any;
+  let currentExtensionUi: any;
   let changingAllToolsExpansion = false;
   const cleanCompactToolCallIds = new Set<string>();
   const cleanGroupToolCallIds = new Map<string, string[]>();
@@ -371,10 +380,35 @@ export default function prettyTui(pi: ExtensionAPI) {
   // Extension shortcuts cannot replace Pi's built-in Ctrl+O binding. Wrap
   // the exported state transition instead, so both Ctrl+O and UI callers keep
   // their normal behavior while clean thinking follows the same state.
+  const orderContextEntriesForTranscript = (entries: any[]): any[] => {
+    if (!Array.isArray(entries) || entries[0]?.type !== "compaction") return entries;
+    const [compaction, ...contextEntries] = entries;
+    const parentIndex = contextEntries.findIndex((entry: any) => entry?.id === compaction.parentId);
+    const compactionTime = Date.parse(compaction.timestamp ?? "");
+    const firstNewerIndex = Number.isFinite(compactionTime)
+      ? contextEntries.findIndex((entry: any) => {
+          const entryTime = Date.parse(entry?.timestamp ?? "");
+          return Number.isFinite(entryTime) && entryTime >= compactionTime;
+        })
+      : -1;
+    const insertionIndex = parentIndex >= 0
+      ? parentIndex + 1
+      : firstNewerIndex >= 0
+        ? firstNewerIndex
+        : contextEntries.length;
+    return [
+      ...contextEntries.slice(0, insertionIndex),
+      compaction,
+      ...contextEntries.slice(insertionIndex),
+    ];
+  };
+
   const interactiveModePrototype = InteractiveMode.prototype as any;
   const toolsExpansionPatchKey = Symbol.for("pretty-tui.clean-tool-expansion");
   if (!interactiveModePrototype[toolsExpansionPatchKey]) {
     const originalSetToolsExpanded = interactiveModePrototype.setToolsExpanded;
+    const originalRenderSessionEntries = interactiveModePrototype.renderSessionEntries;
+    const originalSwitchTuiMode = interactiveModePrototype.switchTuiMode;
     const patchedSetToolsExpanded = function (this: any, expanded: boolean) {
       cleanToolsExpanded = expanded;
       changingAllToolsExpansion = true;
@@ -386,27 +420,420 @@ export default function prettyTui(pi: ExtensionAPI) {
       }
     };
 
+    const patchedRenderSessionEntries = function (this: any, entries: any[], options?: any) {
+      currentTui = this.ui;
+      fullscreenTui = currentTui?.mode === "fullscreen";
+      // buildContextEntries() prepends the latest compaction for model context,
+      // while Pi's live compaction UI appends it chronologically. Keep reloads
+      // and transcript rebuilds consistent with that live presentation.
+      return originalRenderSessionEntries.call(
+        this,
+        orderContextEntriesForTranscript(entries),
+        options,
+      );
+    };
+
+    const patchedSwitchTuiMode = function (this: any, ...args: any[]) {
+      const result = originalSwitchTuiMode.apply(this, args);
+      currentTui = this.ui;
+      fullscreenTui = currentTui?.mode === "fullscreen";
+      return result;
+    };
+
     interactiveModePrototype[toolsExpansionPatchKey] = {
       originalSetToolsExpanded,
       patchedSetToolsExpanded,
+      originalRenderSessionEntries,
+      patchedRenderSessionEntries,
+      originalSwitchTuiMode,
+      patchedSwitchTuiMode,
     };
     interactiveModePrototype.setToolsExpanded = patchedSetToolsExpanded;
+    interactiveModePrototype.renderSessionEntries = patchedRenderSessionEntries;
+    interactiveModePrototype.switchTuiMode = patchedSwitchTuiMode;
 
     pi.on("session_shutdown", () => {
+      fullscreenTui = false;
+      currentTui = undefined;
+      currentExtensionUi = undefined;
       const patch = interactiveModePrototype[toolsExpansionPatchKey];
       if (!patch) return;
       if (patch.patchedSetToolsExpanded === interactiveModePrototype.setToolsExpanded) {
         interactiveModePrototype.setToolsExpanded = patch.originalSetToolsExpanded;
       }
-      if (interactiveModePrototype.setToolsExpanded === patch.originalSetToolsExpanded) {
+      if (patch.patchedRenderSessionEntries === interactiveModePrototype.renderSessionEntries) {
+        interactiveModePrototype.renderSessionEntries = patch.originalRenderSessionEntries;
+      }
+      if (patch.patchedSwitchTuiMode === interactiveModePrototype.switchTuiMode) {
+        interactiveModePrototype.switchTuiMode = patch.originalSwitchTuiMode;
+      }
+      if (
+        interactiveModePrototype.setToolsExpanded === patch.originalSetToolsExpanded &&
+        interactiveModePrototype.renderSessionEntries === patch.originalRenderSessionEntries &&
+        interactiveModePrototype.switchTuiMode === patch.originalSwitchTuiMode
+      ) {
         delete interactiveModePrototype[toolsExpansionPatchKey];
       }
     });
   }
 
-  // Pi normalizes unordered-list markers to "-". Replace only that marker;
-  // leave code-block rendering entirely to Pi's built-in Markdown renderer.
+  // Fullscreen selection only emits a component click when press and release
+  // land on the exact same cell. Give clean group rows a tiny horizontal
+  // tolerance so an ordinary click does not turn into an accidental selection.
+  const altScreenPrototype = TuiAltScreen.prototype as any;
+  const cleanSummaryClickPatchKey = Symbol.for("pretty-tui.clean-summary-click");
+  const cleanSummaryPressKey = Symbol("pretty-tui.clean-summary-press");
+  if (!altScreenPrototype[cleanSummaryClickPatchKey]) {
+    const originalHandleSelectionMouseEvent = altScreenPrototype.handleSelectionMouseEvent;
+    const summaryAtPoint = (screen: any, x: number, y: number): boolean => {
+      const line = stripTerminalSequences(screen.previousScreen?.[y] ?? "");
+      const match = /●\s+(?:Done|Running)\([^)]*\)/.exec(line);
+      return Boolean(match && x >= match.index && x < match.index + match[0].length);
+    };
+    const patchedHandleSelectionMouseEvent = function (this: any, event: any) {
+      const isMotion = (event.button & 32) !== 0;
+      const isLeftPress = !event.release && !isMotion && (event.button & 3) === 0;
+      if (isLeftPress) {
+        if (summaryAtPoint(this, event.x, event.y)) {
+          this[cleanSummaryPressKey] = { x: event.x, y: event.y };
+        } else {
+          delete this[cleanSummaryPressKey];
+        }
+        return originalHandleSelectionMouseEvent.call(this, event);
+      }
+
+      const press = this[cleanSummaryPressKey];
+      if (press) {
+        const withinClickTolerance =
+          event.y === press.y && Math.abs(event.x - press.x) <= 2;
+        if (isMotion && withinClickTolerance) {
+          return;
+        }
+        if (event.release) {
+          delete this[cleanSummaryPressKey];
+          if (withinClickTolerance) {
+            return originalHandleSelectionMouseEvent.call(this, { ...event, x: press.x });
+          }
+        } else if (isMotion) {
+          delete this[cleanSummaryPressKey];
+        }
+      }
+      return originalHandleSelectionMouseEvent.call(this, event);
+    };
+
+    altScreenPrototype[cleanSummaryClickPatchKey] = {
+      originalHandleSelectionMouseEvent,
+      patchedHandleSelectionMouseEvent,
+    };
+    altScreenPrototype.handleSelectionMouseEvent = patchedHandleSelectionMouseEvent;
+
+    pi.on("session_shutdown", () => {
+      const patch = altScreenPrototype[cleanSummaryClickPatchKey];
+      if (patch?.patchedHandleSelectionMouseEvent === altScreenPrototype.handleSelectionMouseEvent) {
+        altScreenPrototype.handleSelectionMouseEvent = patch.originalHandleSelectionMouseEvent;
+      }
+      if (
+        patch &&
+        altScreenPrototype.handleSelectionMouseEvent === patch.originalHandleSelectionMouseEvent
+      ) {
+        delete altScreenPrototype[cleanSummaryClickPatchKey];
+      }
+    });
+  }
+
+  // Refine Pi's Markdown presentation while preserving its parser and themes.
   const markdownPrototype = Markdown.prototype as any;
+  const codeBlockPatchKey = Symbol.for("pretty-tui.code-blocks");
+  const codeBlockCollectionKey = Symbol("pretty-tui.code-block-collection");
+  const codeBlockRegionsKey = Symbol("pretty-tui.code-block-regions");
+  if (!markdownPrototype[codeBlockPatchKey]) {
+    const originalInvalidate = markdownPrototype.invalidate;
+    const originalRender = markdownPrototype.render;
+    const originalRenderToken = markdownPrototype.renderToken;
+    const originalHandleMouse = markdownPrototype.handleMouse;
+    const stripTerminalStyles = (value: string): string =>
+      value.replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, "");
+
+    const patchedInvalidate = function (this: any) {
+      delete this[codeBlockCollectionKey];
+      delete this[codeBlockRegionsKey];
+      return originalInvalidate.call(this);
+    };
+
+    const patchedRender = function (this: any, width: number): string[] {
+      const needsRender =
+        !this.cachedLines || this.cachedText !== this.text || this.cachedWidth !== width;
+      if (needsRender) this[codeBlockCollectionKey] = [];
+
+      const lines = originalRender.call(this, width);
+      if (!needsRender) return lines;
+
+      const regions: Array<{ xStart: number; xEnd: number; y: number; code: string }> = [];
+      let searchFrom = 0;
+      for (const block of this[codeBlockCollectionKey] ?? []) {
+        let headerLine = -1;
+        for (let lineIndex = searchFrom; lineIndex < lines.length; lineIndex += 1) {
+          const renderedLine = lines[lineIndex] ?? "";
+          if (
+            renderedLine.includes(block.styledTopRule) ||
+            stripTerminalStyles(renderedLine).includes(block.topRule)
+          ) {
+            headerLine = lineIndex;
+            break;
+          }
+        }
+        if (headerLine < 0) continue;
+
+        regions.push({
+          xStart: Number(this.paddingX ?? 0) + block.buttonStart,
+          xEnd: Number(this.paddingX ?? 0) + block.buttonStart + block.buttonWidth,
+          y: headerLine,
+          code: block.code,
+        });
+        searchFrom = headerLine + 1;
+      }
+      this[codeBlockRegionsKey] = regions;
+      delete this[codeBlockCollectionKey];
+      return lines;
+    };
+
+    const patchedRenderToken = function (
+      this: any,
+      token: any,
+      width: number,
+      nextTokenType?: string,
+      styleContext?: any,
+    ): string[] {
+      if (token?.type === "heading") {
+        const level = Math.max(1, Math.min(6, Number(token.depth) || 1));
+        const maxWidth = Math.max(1, width);
+        const addHeadingSpacing = (lines: string[]) => {
+          if (nextTokenType && nextTokenType !== "space") lines.push("");
+          return lines;
+        };
+        const headingStyle = (text: string) => this.theme.heading(text);
+        const foregroundLuminance = (styled: string): number | undefined => {
+          const trueColor = /\x1b\[38;2;(\d+);(\d+);(\d+)m/.exec(styled);
+          if (!trueColor) return undefined;
+          const [, red, green, blue] = trueColor.map(Number);
+          return red * 0.2126 + green * 0.7152 + blue * 0.0722;
+        };
+        const defaultLuminance = foregroundLuminance(this.applyDefaultStyle("M"));
+        const headingLuminance = foregroundLuminance(headingStyle("M"));
+        const darkTheme =
+          defaultLuminance !== undefined
+            ? defaultLuminance >= 128
+            : (headingLuminance ?? 255) >= 160;
+        const whiteStyle = (text: string) => `\x1b[97m${text}\x1b[39m`;
+        const titleStyle =
+          level === 1 || level === 3
+            ? (text: string) => headingStyle(this.theme.bold(this.theme.underline(text)))
+            : level === 2
+              ? (text: string) =>
+                  (darkTheme ? whiteStyle : headingStyle)(
+                    this.theme.bold(this.theme.underline(text)),
+                  )
+              : level === 4
+                ? (text: string) => headingStyle(this.theme.bold(text))
+                : level === 5
+                  ? headingStyle
+                  : (text: string) => this.theme.quote(this.theme.italic(text));
+        const titleContext = {
+          applyText: titleStyle,
+          stylePrefix: this.getStylePrefix(titleStyle),
+        };
+        const title = this.renderInlineTokens(token.tokens || [], titleContext);
+
+        if (level === 1 && maxWidth >= 6) {
+          const maximumInnerWidth = maxWidth - 4;
+          const titleLines = wrapTextWithAnsi(title, Math.max(1, maximumInnerWidth));
+          const innerWidth = Math.max(
+            1,
+            ...titleLines.map((line: string) => visibleWidth(line)),
+          );
+          const frameWidth = Math.min(maxWidth, innerWidth + 4);
+          const frameStyle = (text: string) => headingStyle(this.theme.bold(text));
+          const lines = [
+            frameStyle(`╔${"═".repeat(frameWidth - 2)}╗`),
+            ...titleLines.map((line: string) => {
+              const padding = " ".repeat(Math.max(0, innerWidth - visibleWidth(line)));
+              return frameStyle("║ ") + line + frameStyle(`${padding} ║`);
+            }),
+            frameStyle(`╚${"═".repeat(frameWidth - 2)}╝`),
+          ];
+          return addHeadingSpacing(lines);
+        }
+
+        if (level === 2) {
+          // Reverse only the rendered title cells: the theme's heading color
+          // becomes a compact, content-width background label with no frame.
+          const lines = wrapTextWithAnsi(title, maxWidth).map((line: string) =>
+            darkTheme
+              ? `\x1b[48;5;94m${line}\x1b[49m`
+              : `\x1b[107m\x1b[7m${line}\x1b[27m\x1b[49m`
+          );
+          return addHeadingSpacing(lines);
+        }
+
+        if (level === 5 && maxWidth >= 8) {
+          const prefix = "┄┄ ";
+          const suffix = " ┄┄";
+          const contentWidth = Math.max(
+            1,
+            maxWidth - visibleWidth(prefix) - visibleWidth(suffix),
+          );
+          const wrapped = wrapTextWithAnsi(title, contentWidth);
+          const lines = wrapped.map((line: string, index: number) => {
+            const left = index === 0 ? this.theme.heading(prefix) : " ".repeat(visibleWidth(prefix));
+            const right = index === wrapped.length - 1 ? this.theme.heading(suffix) : "";
+            return left + line + right;
+          });
+          return addHeadingSpacing(lines);
+        }
+
+        return addHeadingSpacing(wrapTextWithAnsi(title, maxWidth));
+      }
+
+      if (token?.type !== "code") {
+        return originalRenderToken.call(this, token, width, nextTokenType, styleContext);
+      }
+
+      const maxWidth = Math.max(1, width);
+      const code = String(token.text ?? "");
+      const useRoundedFrame = maxWidth >= 8;
+      const maximumCodeWidth = useRoundedFrame ? maxWidth - 4 : maxWidth;
+      const highlighted = this.theme.highlightCode
+        ? this.theme.highlightCode(code, token.lang)
+        : code.split("\n").map((line: string) => this.theme.codeBlock(line));
+      const codeLines: string[] = [];
+      for (const line of highlighted.length > 0 ? highlighted : [""]) {
+        const wrapped = wrapTextWithAnsi(line, maximumCodeWidth);
+        codeLines.push(...(wrapped.length > 0 ? wrapped : [""]));
+      }
+
+      if (!useRoundedFrame) {
+        if (nextTokenType && nextTokenType !== "space") codeLines.push("");
+        return codeLines;
+      }
+
+      const copyLabel = "[Copy]";
+      const showCopyButton = fullscreenTui && maxWidth >= 18;
+      const topSuffix = showCopyButton ? ` ${copyLabel} ╮` : "╮";
+      const rawLanguage = typeof token.lang === "string" ? token.lang.trim() : "";
+      const language = rawLanguage.split(/\s+/, 1)[0] || "code";
+      const label = truncateToWidth(
+        language,
+        Math.max(1, maxWidth - visibleWidth(topSuffix) - 7),
+        "…",
+      );
+      const topPrefix = `╭─ ${label} `;
+      const contentWidth = codeLines.reduce(
+        (widest, line) => Math.max(widest, visibleWidth(line)),
+        0,
+      );
+      const minimumFrameWidth = visibleWidth(topPrefix) + 3 + visibleWidth(topSuffix);
+      const frameWidth = Math.min(maxWidth, Math.max(contentWidth + 4, minimumFrameWidth));
+      const fillWidth = Math.max(
+        0,
+        frameWidth - visibleWidth(topPrefix) - visibleWidth(topSuffix),
+      );
+      const buttonStart = visibleWidth(topPrefix) + fillWidth + (showCopyButton ? 1 : 0);
+      const topRule = topPrefix + "─".repeat(fillWidth) + topSuffix;
+      const styledTopRule = this.theme.codeBlockBorder(topRule);
+      const framedCodeWidth = Math.max(1, frameWidth - 4);
+      const lines = [
+        styledTopRule,
+        ...codeLines.map((line) =>
+          this.theme.codeBlockBorder("│ ") +
+          line +
+          " ".repeat(Math.max(0, framedCodeWidth - visibleWidth(line))) +
+          this.theme.codeBlockBorder(" │")
+        ),
+        this.theme.codeBlockBorder(`╰${"─".repeat(Math.max(0, frameWidth - 2))}╯`),
+      ];
+
+      if (showCopyButton && Array.isArray(this[codeBlockCollectionKey])) {
+        this[codeBlockCollectionKey].push({
+          buttonStart,
+          buttonWidth: visibleWidth(copyLabel),
+          code,
+          styledTopRule,
+          topRule,
+        });
+      }
+      if (nextTokenType && nextTokenType !== "space") lines.push("");
+      return lines;
+    };
+
+    const patchedHandleMouse = function (this: any, event: TuiMouseEvent) {
+      if (event.button === "left" && (event.type === "press" || event.type === "click")) {
+        const region = (this[codeBlockRegionsKey] ?? []).find(
+          (candidate: any) =>
+            event.y === candidate.y && event.x >= candidate.xStart && event.x < candidate.xEnd,
+        );
+        if (region) {
+          if (event.type === "click") {
+            if (typeof currentTui?.copyTextToClipboard === "function") {
+              // Match fullscreen selection exactly: use Pi TUI's clipboard path
+              // and its transient "Copied!" / "Copy failed" flash feedback.
+              void Promise.resolve(currentTui.copyTextToClipboard(region.code)).catch(() => {
+                currentTui?.flash?.("Copy failed");
+              });
+            } else {
+              // Defensive fallback for older Pi versions without the fullscreen helper.
+              void copyToClipboard(region.code)
+                .then(() => currentExtensionUi?.notify("Copied!", "info"))
+                .catch(() => currentExtensionUi?.notify("Copy failed", "error"));
+            }
+          }
+          return { handled: true, render: false };
+        }
+      }
+      return originalHandleMouse?.call(this, event);
+    };
+
+    markdownPrototype[codeBlockPatchKey] = {
+      originalHandleMouse,
+      originalInvalidate,
+      originalRender,
+      originalRenderToken,
+      patchedHandleMouse,
+      patchedInvalidate,
+      patchedRender,
+      patchedRenderToken,
+    };
+    markdownPrototype.invalidate = patchedInvalidate;
+    markdownPrototype.render = patchedRender;
+    markdownPrototype.renderToken = patchedRenderToken;
+    markdownPrototype.handleMouse = patchedHandleMouse;
+
+    pi.on("session_shutdown", () => {
+      const patch = markdownPrototype[codeBlockPatchKey];
+      if (patch?.patchedInvalidate === markdownPrototype.invalidate) {
+        markdownPrototype.invalidate = patch.originalInvalidate;
+      }
+      if (patch?.patchedRender === markdownPrototype.render) {
+        markdownPrototype.render = patch.originalRender;
+      }
+      if (patch?.patchedRenderToken === markdownPrototype.renderToken) {
+        markdownPrototype.renderToken = patch.originalRenderToken;
+      }
+      if (patch?.patchedHandleMouse === markdownPrototype.handleMouse) {
+        if (patch.originalHandleMouse) markdownPrototype.handleMouse = patch.originalHandleMouse;
+        else delete markdownPrototype.handleMouse;
+      }
+      if (
+        patch &&
+        markdownPrototype.invalidate === patch.originalInvalidate &&
+        markdownPrototype.render === patch.originalRender &&
+        markdownPrototype.renderToken === patch.originalRenderToken &&
+        markdownPrototype.handleMouse === patch.originalHandleMouse
+      ) {
+        delete markdownPrototype[codeBlockPatchKey];
+      }
+    });
+  }
+
   const listPatchKey = Symbol.for("pretty-tui.list-bullets");
   if (!markdownPrototype[listPatchKey]) {
     const originalRenderList = markdownPrototype.renderList;
@@ -1032,20 +1459,26 @@ export default function prettyTui(pi: ExtensionAPI) {
     count: number,
     failed: number,
     activity: DisplayValue = "done",
+    collapsedDone = false,
   ): DisplayRow => ({
     prefix: () => {
       const currentActivity = typeof activity === "function" ? activity() : activity;
-      const color = currentActivity === "done" ? "success" : "accent";
+      const color = currentActivity === "done"
+        ? collapsedDone ? "thinkingText" : "success"
+        : "accent";
       return theme.fg(color, "● ");
     },
     continuation: "  ",
     content: () => {
       const currentActivity = typeof activity === "function" ? activity() : activity;
       const label = currentActivity === "done" ? "Done" : "Running";
-      const color = label === "Done" ? "success" : "accent";
+      const color = label === "Done"
+        ? collapsedDone ? "thinkingText" : "success"
+        : "accent";
+      const detailColor = label === "Done" && collapsedDone ? "thinkingText" : "text";
       return theme.fg(color, theme.bold(label)) +
         theme.fg("dim", "(") +
-        theme.fg("text", summaryText(count, failed, currentActivity)) + theme.fg("dim", ")");
+        theme.fg(detailColor, summaryText(count, failed, currentActivity)) + theme.fg("dim", ")");
     },
   });
 
@@ -1084,7 +1517,13 @@ export default function prettyTui(pi: ExtensionAPI) {
 
         const settledSummary = settledSummaries.get(toolCallId);
         if (settledSummary) {
-          return block([summaryRow(theme, settledSummary.count, settledSummary.failed, settledSummary.activity)]).render(width);
+          return block([summaryRow(
+            theme,
+            settledSummary.count,
+            settledSummary.failed,
+            settledSummary.activity,
+            true,
+          )]).render(width);
         }
         if (cleanRun.settled) return [];
 
@@ -1139,7 +1578,7 @@ export default function prettyTui(pi: ExtensionAPI) {
 
   pi.registerEntryRenderer<ToolSummaryData>("pretty-tui-tool-summary", (entry, { expanded }, theme) => ({
     render(width: number): string[] {
-      if (renderMode !== "clean" || expanded) return [];
+      if (renderMode !== "clean" || expanded || cleanContextCompacted) return [];
       const data = entry.data;
       const groups = data?.groups?.length
         ? data.groups
@@ -1160,15 +1599,15 @@ export default function prettyTui(pi: ExtensionAPI) {
                 : [];
             })();
       // The live tool components own the visual positions. Keep this durable
-      // entry as a fallback only for groups whose tool components are absent
-      // from the current branch (for example, after compaction).
+      // entry as a fallback only for groups whose components are unexpectedly
+      // absent from an uncompacted branch.
       const missingGroups = groups.filter((group) => !knownToolCallIds.has(group.lastToolCallId));
       if (missingGroups.length === 0) return [];
       // Persisted entries represent settled groups. Older versions could
       // accidentally store the transient responding... activity, so always
       // normalize their display to Done.
       return block(missingGroups.map((group) =>
-        summaryRow(theme, group.count, group.failed, "done")
+        summaryRow(theme, group.count, group.failed, "done", true)
       )).render(width);
     },
     invalidate() {},
@@ -1185,6 +1624,7 @@ export default function prettyTui(pi: ExtensionAPI) {
         );
 
   const restoreCleanSession = (ctx: any) => {
+    currentExtensionUi = ctx.ui;
     cleanToolsExpanded = ctx.ui.getToolsExpanded();
     settledSummaries.clear();
     legacySummaryLastToolCallIds.clear();
@@ -1213,7 +1653,9 @@ export default function prettyTui(pi: ExtensionAPI) {
     let failed = 0;
     let lastToolCallId: string | undefined;
     let lastFinishedGroup: ToolSummaryGroup | undefined;
+    const inferredGroups: ToolSummaryGroup[] = [];
     const toolCalls = new Set<string>();
+    const completedToolCalls = new Set<string>();
     const explicitSummaryIds = new Set<string>();
 
     const rememberGroup = (group: ToolSummaryGroup, entryId?: string) => {
@@ -1232,6 +1674,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     const finishGroup = () => {
       if (lastToolCallId && count > 0) {
         lastFinishedGroup = { count, failed, lastToolCallId, toolCallIds: [...toolCalls] };
+        inferredGroups.push(lastFinishedGroup);
         setCleanGroupMembers(lastToolCallId, [...toolCalls]);
         if (!explicitSummaryIds.has(lastToolCallId)) {
           settledSummaries.set(lastToolCallId, { count, failed, activity: "done" });
@@ -1241,23 +1684,96 @@ export default function prettyTui(pi: ExtensionAPI) {
       failed = 0;
       lastToolCallId = undefined;
       toolCalls.clear();
+      completedToolCalls.clear();
+    };
+
+    const inferredGroupsOverlapping = (group: ToolSummaryGroup): ToolSummaryGroup[] => {
+      if (!group.toolCallIds?.length) return [];
+      const persistedIds = new Set(group.toolCallIds);
+      const currentGroup = lastToolCallId && count > 0
+        ? [{ count, failed, lastToolCallId, toolCallIds: [...toolCalls] }]
+        : [];
+      return [...inferredGroups, ...currentGroup].filter((inferred) =>
+        inferred.toolCallIds?.some((toolCallId) => persistedIds.has(toolCallId)),
+      );
+    };
+
+    const splitSummaryAtTranscriptBoundaries = (group: ToolSummaryGroup): ToolSummaryGroup[] => {
+      if (!group.toolCallIds?.length) return [group];
+      const persistedIds = new Set(group.toolCallIds);
+      const overlappingGroups = inferredGroupsOverlapping(group);
+      if (overlappingGroups.length <= 1) return [group];
+
+      // Older clean-mode summaries could span steering or compaction because
+      // only visible assistant text ended a live group. Prefer the transcript's
+      // hard boundaries so parent rows and expanded children stay chronological.
+      return overlappingGroups.map((inferred) => ({
+        ...inferred,
+        toolCallIds: inferred.toolCallIds?.filter((toolCallId) => persistedIds.has(toolCallId)),
+      }));
+    };
+
+    const replaceInferredGroupsWithSummary = (
+      persistedGroup: ToolSummaryGroup,
+      restoredGroups: ToolSummaryGroup[],
+    ) => {
+      const restoredOwners = new Set(restoredGroups.map((group) => group.lastToolCallId));
+      for (const inferred of inferredGroupsOverlapping(persistedGroup)) {
+        if (!restoredOwners.has(inferred.lastToolCallId)) {
+          settledSummaries.delete(inferred.lastToolCallId);
+        }
+      }
+      for (const group of restoredGroups) rememberGroup(group);
+    };
+
+    const consumeGroupCoveredBySummary = (groups: ToolSummaryGroup[]) => {
+      if (toolCalls.size === 0) return;
+      const coveredToolCallIds = new Set(
+        groups.flatMap((group) => [group.lastToolCallId, ...(group.toolCallIds ?? [])]),
+      );
+      if (![...toolCalls].some((toolCallId) => coveredToolCallIds.has(toolCallId))) return;
+
+      // A durable summary closes the current run even if the session contains
+      // an orphaned tool call without a toolResult. Do not infer a second,
+      // larger Done row when the following user message closes the transcript group.
+      count = 0;
+      failed = 0;
+      lastToolCallId = undefined;
+      lastFinishedGroup = undefined;
+      toolCalls.clear();
+      completedToolCalls.clear();
     };
 
     // Use the same compaction-aware branch that Pi renders in the transcript;
     // getEntries() can also contain entries from other branches.
-    for (const entry of ctx.sessionManager.buildContextEntries()) {
+    const modelContextEntries = ctx.sessionManager.buildContextEntries();
+    cleanContextCompacted = modelContextEntries[0]?.type === "compaction";
+    const contextEntries = orderContextEntriesForTranscript(modelContextEntries);
+    for (const entry of contextEntries) {
+      if (entry.type === "compaction") {
+        finishGroup();
+        lastFinishedGroup = undefined;
+        continue;
+      }
       if (entry.type === "custom" && entry.customType === "pretty-tui-tool-summary") {
         const data = entry.data as ToolSummaryData | undefined;
         if (data?.groups?.length) {
-          for (const group of data.groups) {
-            if (group?.lastToolCallId && group.count > 0) rememberGroup(group);
+          const validGroups = data.groups.filter(
+            (group): group is ToolSummaryGroup => Boolean(group?.lastToolCallId && group.count > 0),
+          );
+          for (const group of validGroups) {
+            const restoredGroups = splitSummaryAtTranscriptBoundaries(group);
+            replaceInferredGroupsWithSummary(group, restoredGroups);
           }
+          consumeGroupCoveredBySummary(validGroups);
         } else if (data?.lastToolCallId) {
-          rememberGroup({
+          const group = {
             count: data.count ?? 0,
             failed: data.failed ?? 0,
             lastToolCallId: data.lastToolCallId,
-          });
+          };
+          rememberGroup(group);
+          consumeGroupCoveredBySummary([group]);
         } else if (lastFinishedGroup) {
           // Migrate summaries written by the earlier clean-mode versions,
           // which did not persist the final tool call id. The text message
@@ -1291,15 +1807,20 @@ export default function prettyTui(pi: ExtensionAPI) {
         if (messageHasVisibleText(message)) finishGroup();
         for (const item of messageContentItems(message)) {
           if (item.type !== "toolCall" || !supportedTools.has(item.name)) continue;
-          count++;
-          lastToolCallId = item.id;
           toolCalls.add(item.id);
         }
         continue;
       }
 
-      if (message.role === "toolResult" && toolCalls.has(message.toolCallId) && message.isError) {
-        failed++;
+      if (
+        message.role === "toolResult" &&
+        toolCalls.has(message.toolCallId) &&
+        !completedToolCalls.has(message.toolCallId)
+      ) {
+        completedToolCalls.add(message.toolCallId);
+        count++;
+        lastToolCallId = message.toolCallId;
+        if (message.isError) failed++;
       }
     }
 
@@ -1309,10 +1830,13 @@ export default function prettyTui(pi: ExtensionAPI) {
   pi.on("session_start", (_event, ctx) => restoreCleanSession(ctx));
   pi.on("session_tree", (_event, ctx) => restoreCleanSession(ctx));
   pi.on("session_compact", () => {
-    // Tool components removed by compaction must no longer suppress the
-    // durable summary fallback. Remaining components register again as Pi
-    // renders the rebuilt transcript.
-    knownToolCallIds.clear();
+    // Compaction is a hard chronological boundary. Keep tools completed before
+    // it in their own group so expanded hierarchy lines never cross the summary.
+    finishCleanGroup("done");
+    settleLastCleanGroup();
+    // Pre-compaction tools have been summarized intentionally. Their durable
+    // fallback rows should not be replayed beside the compacted transcript.
+    cleanContextCompacted = true;
   });
 
   const hasVisibleAssistantText = (message: any): boolean =>
@@ -1353,6 +1877,15 @@ export default function prettyTui(pi: ExtensionAPI) {
     }
   };
 
+  // A delivered steering message is also a chronological group boundary.
+  // message_start runs before Pi adds the user component to the transcript,
+  // so settling here keeps the previous parent row above that message.
+  pi.on("message_start", (event) => {
+    if (event.message.role !== "user") return;
+    finishCleanGroup("done");
+    settleLastCleanGroup();
+  });
+
   // A visible assistant response is the boundary between tool groups. Do
   // this during streaming so a following tool call cannot inherit the prior
   // summary, while message_end keeps the rule correct for non-streaming paths.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pi-pretty-tui",
-  "version": "0.1.6",
-  "description": "Polished user messages, tool calls, and list rendering for the Pi coding agent TUI",
+  "version": "0.1.8",
+  "description": "A beautiful, polished TUI for the Pi coding agent",
   "license": "MIT",
   "author": "Kainan Yang <ykn0309@whu.edu.cn>",
   "type": "module",
@@ -13,6 +13,10 @@
   "bugs": {
     "url": "https://github.com/ykn0309/pi-pretty-tui/issues"
   },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "npm run typecheck && node tests/regression.mjs"
+  },
   "keywords": [
     "pi-package",
     "pi-extension",
@@ -24,6 +28,7 @@
     "extensions",
     "assets",
     "README.md",
+    "README.zh-CN.md",
     "LICENSE"
   ],
   "engines": {
@@ -33,6 +38,13 @@
     "@earendil-works/pi-coding-agent": "*",
     "@earendil-works/pi-tui": "*"
   },
+  "devDependencies": {
+    "@earendil-works/pi-coding-agent": "0.85.1",
+    "@earendil-works/pi-tui": "0.85.1",
+    "@types/node": "^24.0.0",
+    "jiti": "^2.7.0",
+    "typescript": "^5.9.0"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -40,6 +52,6 @@
     "extensions": [
       "./extensions/index.ts"
     ],
-    "image": "https://unpkg.com/pi-pretty-tui@0.1.6/assets/screenshot.png"
+    "image": "https://unpkg.com/pi-pretty-tui@0.1.8/assets/screenshot.png"
   }
 }