pi-pretty-tui 0.2.1 → 0.2.3

package/README.md

@@ -8,8 +8,9 @@ A beautiful, polished TUI for the [Pi coding agent](https://pi.dev/).
 
 - **Collapsible activity timeline:** instead of filling the conversation with individual calls, thoughts, tools, and ordinary `info` notifications share one chronological activity stream. Work appears beneath a single `Running(...)` row and settles into a quiet `Done(...)` row. Parent rows count only tool calls and thoughts; expanding one reveals every ordered member with summaries retained above nested details. Thoughts and tools are peers: a turn that calls no tool still gets its own `Running(1 thought)` / `Done(1 thought)` parent row with the Thought as its child, so thinking is never dropped.
 - **Transient UI status:** one line above the editor shows direct Pi UI feedback such as Thinking/tool-output visibility changes. A newer UI status replaces it, and it disappears automatically after ten seconds without entering the transcript or session.
+- **Durable response footers:** once the complete agent run settles—including tools, retries, and compaction—the final answer ends with one quiet gray divider containing the elapsed-work time and, in fullscreen, a `[Copy]` control. It copies only the final visible answer, excluding thoughts, tools, statuses, and the footer itself; the footer survives reloads and session-tree navigation.
 - **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.
+- **A cohesive visual finish:** transparent, right-aligned user chat bubbles size themselves to short messages and wrap longer ones at 75% of the terminal width, with an accent-blue rounded border and no redundant `User` label. Together with the rounded prompt input, theme-aware colors, clear Markdown heading hierarchy, cleaner lists, and rounded syntax-highlighted code blocks, they make the entire TUI feel intentional. In fullscreen, each fenced code block also includes a native-feeling `[Copy]` control.
 
 Pi's built-in `read`, `bash`, `edit`, `write`, `grep`, `find`, and `ls` tools receive purpose-built compact views. Every third-party tool automatically receives a consistent compact row; opening it preserves its native renderer while removing conflicting terminal background colors. User and steering messages, compaction summaries, visible assistant text, warnings, errors, aborted/truncated responses, and displayed custom messages with a registered renderer create hard group boundaries. Pi's cursor, IME, autocomplete, mouse interaction, and tool execution behavior remain intact.
 
@@ -25,7 +26,7 @@ Pi may warn that built-in tools are being overridden. This is expected: pi-prett
 
 ## Working with tool calls
 
-Click a `Running(...)` or `Done(...)` row to keep it as a parent and reveal tools, completed `● thought` entries, and extension updates beneath it. Click an individual tool or thought to reveal nested details without replacing its summary, or click the parent again to collapse the whole group. Press `Ctrl+O` at any time to use Pi's global expansion control for all tool output and thinking content. Tool names use each definition's `label` verbatim, falling back to its raw `name`; pi-pretty-tui does not rename or title-case them.
+Click a `Running(...)` or `Done(...)` row to keep it as a parent and reveal tools, completed `● thought` entries, and extension updates beneath it. Click an individual tool or thought to reveal nested details without replacing its summary. The last item in each expanded tree, `└─ [↑ Collapse]`, collapses just that group without scrolling back to its parent; clicking the parent also works. Press `Ctrl+O` at any time to use Pi's global expansion control for all tool output and thinking content. The end-of-tree action still collapses only its own group after global expansion. Third-party replacements for `grep` and `find` (such as FFF) use compact tree rows too, with their native details available when expanded. Tool names use each definition's `label` verbatim, falling back to its raw `name`; pi-pretty-tui does not rename or title-case them.
 
 Extension calls to `ctx.ui.notify(message, "info")` (or with the type omitted) join an existing thought/tool group in chronological order; without existing work they remain independent and never attach to a future group. Warnings and errors stay standalone, use yellow `⚠` and red `✕`, and are hard boundaries. Tool failures remain owned by their tool details. None of these extension notifications or errors appear in the transient UI-status line.
 
@@ -58,11 +59,11 @@ npm install
 npm test
 ```
 
-The suite covers live and restored activity timelines, retries and terminal states, user/steering/compaction/native-renderer boundaries, ten-second UI-status replacement, stale-timer and flash cleanup on reload and shutdown, standalone severity styling, built-in and third-party tools, expandable thinking, parallel completion ownership, orphaned calls, duplicate-summary prevention, complete prototype-patch restoration, and fullscreen code-block copy hit regions. GitHub Actions runs the same checks on every push and pull request.
+The suite covers live and restored activity timelines, retries and terminal states, user/steering/compaction/native-renderer boundaries, ten-second UI-status replacement, stale-timer and flash cleanup on reload and shutdown, standalone severity styling, built-in and third-party tools, expandable thinking, parallel completion ownership, orphaned calls, duplicate-summary prevention, durable response timing and answer-only copy controls, adaptive user chat bubbles, complete prototype-patch restoration, 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. Active-tool state follows Pi's built-in execution transitions through its exported interactive components. Clean-mode thought details use the activity hierarchy's own disclosure state; full and compact modes retain Pi's built-in Thinking visibility control. 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 enhancements are activated only while rendering user and assistant messages in the main transcript; Markdown created by extension overlays keeps Pi's native layout. Markdown parsing, syntax highlighting, and terminal semantic zones remain handled by Pi.
+Tool rendering uses Pi's documented extension APIs. Active-tool state follows Pi's built-in execution transitions through its exported interactive components. Clean-mode thought details use the activity hierarchy's own disclosure state; full and compact modes retain Pi's built-in Thinking visibility control. Rendering native user messages as adaptive chat bubbles, 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 enhancements are activated only while rendering user and assistant messages in the main transcript; Markdown created by extension overlays keeps Pi's native layout. 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

@@ -7,9 +7,10 @@
 ## 功能特性
 
 - **可折叠的活动时间线：** 不再让大量独立调用填满对话。思考、工具和普通 `info` 通知会进入同一条按真实时间排序的活动流；工作进行时显示为 `Running(...)`，结束后变为低调的 `Done(...)`。父级只统计工具调用和思考数量；展开后可查看所有有序成员，成员摘要在展开嵌套详情后仍然保留。思考与工具地位相同：没有调用任何工具的那一轮同样会有自己的 `Running(1 thought)` / `Done(1 thought)` 父行，思考作为其子级，内容不会被丢弃。
+- **可持久化的回答 footer：** 整轮 Agent 工作真正 settled 后（包括工具、自动重试和 compaction），最终回答底部会显示一条低调的灰色分隔线，工作时长与 fullscreen 模式下的 `[Copy]` 控件都嵌在线中。`[Copy]` 只复制最终可见回答，不包含 thought、工具、状态或 footer；reload 和 session tree 切换后仍会保留。
 - **临时 UI 状态：** 编辑器上方的一行只显示 Pi 直接产生的 UI 操作反馈，例如 Thinking 或工具输出可见性变化。新状态会替换旧状态，并在十秒后自动消失，不进入 transcript 或 session。
 - **按需查看有效信息：** 针对不同工具设计的摘要，会简洁呈现路径、命令、结果、diff、文件预览和实时 shell 输出，同时保留查看原始完整内容的能力。
-- **统一、精致的视觉体验：** 圆角用户消息与输入框、主题感知配色、层级清晰的 Markdown 标题、更清爽的列表，以及带语法高亮的圆角代码块，让整个 TUI 更协调。在 fullscreen 模式下，每个围栏代码块还带有符合原生体验的 `[Copy]` 控件。
+- **统一、精致的视觉体验：** 透明、右对齐的用户聊天气泡会根据短消息自适应宽度，长消息则在终端宽度的 75% 处换行；气泡使用 accent 浅蓝色圆角边框，并移除了多余的 `User` 标注。配合圆角输入框、主题感知配色、层级清晰的 Markdown 标题、更清爽的列表，以及带语法高亮的圆角代码块，让整个 TUI 更协调。在 fullscreen 模式下，每个围栏代码块还带有符合原生体验的 `[Copy]` 控件。
 
 Pi 内置的 `read`、`bash`、`edit`、`write`、`grep`、`find` 和 `ls` 工具使用专门设计的紧凑视图；所有第三方工具会自动获得统一的紧凑行，单独展开时继续使用原生 renderer，但会移除与整体冲突的终端背景色。用户与 steer 消息、compaction 摘要、可见 assistant 正文、warning、error、aborted/length 响应，以及注册了专用 renderer 的 displayed custom message 都会形成硬分组边界。同时不会影响 Pi 原有的光标、输入法、自动补全、鼠标交互和工具执行行为。
 
@@ -25,7 +26,7 @@ Pi 可能会提示内置工具被覆盖。这是正常现象：pi-pretty-tui 会
 
 ## 使用工具调用
 
-点击 `Running(...)` 或 `Done(...)` 行，可以保留父级并展开其下方的工具、已完成的 `● thought` 和扩展更新。点击单个工具或思考子项可在保留摘要的同时展开嵌套详情，再次点击父级可折叠整个分组。任何时候都可以按 `Ctrl+O`，使用 Pi 的全局展开控制来显示或隐藏全部工具输出和思考内容。工具名称会原样使用定义中的 `label`，没有 `label` 时回退到原始 `name`；pi-pretty-tui 不再重命名或转换大小写。
+点击 `Running(...)` 或 `Done(...)` 行，可以保留父级并展开其下方的工具、已完成的 `● thought` 和扩展更新。点击单个工具或思考子项可在保留摘要的同时展开嵌套详情。每棵展开的树末尾都有 `└─ [↑ Collapse]`，无需滚回父级即可只折叠当前分组；再次点击父级也可以折叠。任何时候都可以按 `Ctrl+O`，使用 Pi 的全局展开控制来显示或隐藏全部工具输出和思考内容；全局展开后，树尾操作仍只折叠本组。第三方替换的 `grep`、`find`（如 FFF）也使用紧凑的树节点，展开子项时仍可查看原生详情。工具名称会原样使用定义中的 `label`，没有 `label` 时回退到原始 `name`；pi-pretty-tui 不再重命名或转换大小写。
 
 扩展调用 `ctx.ui.notify(message, "info")`（或省略 type）时，如果当前已有 thought/tool 活动组，通知会按真实时间顺序加入该组；如果没有现有工作，则独立显示，并且不会附着到未来的工具组。warning 和 error 保持独立，分别使用黄色 `⚠` 和红色 `✕`，并形成硬边界。工具失败继续归属于对应工具详情。上述扩展通知和错误都不会进入临时 UI 状态栏。
 
@@ -58,11 +59,11 @@ npm install
 npm test
 ```
 
-测试覆盖实时与历史恢复的活动时间线、自动重试与终止状态、用户/steer/compaction/原生 renderer 边界、十秒 UI 状态替换、reload 与 shutdown 时的旧 timer 与状态清理、独立严重级别样式、内置与第三方工具、可展开思考、并行工具完成归属、孤立 tool call、重复摘要防护、原型补丁的完整恢复，以及 fullscreen 代码块复制的点击区域。GitHub Actions 会在每次 push 和 pull request 时运行相同检查。
+测试覆盖实时与历史恢复的活动时间线、自动重试与终止状态、用户/steer/compaction/原生 renderer 边界、十秒 UI 状态替换、reload 与 shutdown 时的旧 timer 与状态清理、独立严重级别样式、内置与第三方工具、可展开思考、并行工具完成归属、孤立 tool call、重复摘要防护、可持久化的工作时长与仅回答复制控件、自适应用户聊天气泡、原型补丁的完整恢复，以及 fullscreen 代码块复制的点击区域。GitHub Actions 会在每次 push 和 pull request 时运行相同检查。
 
 ## 兼容性说明
 
-工具渲染使用 Pi 的公开扩展 API。活动工具状态通过 Pi 导出的交互组件跟随其内置执行状态变化；clean 模式的 thought 详情使用活动时间线自身的展开状态，full 和 compact 模式则保留 Pi 内置的 Thinking 可见性控制。由于 Pi 目前没有为这些展示细节提供公开渲染钩子，原生用户消息框、原生输入编辑器圆角、无序列表标记和围栏代码块增强需要使用可安全重载的运行时补丁。Markdown 增强仅在渲染主 transcript 中的用户消息和助手回复时启用；扩展 overlay 创建的 Markdown 保持 Pi 原生布局。Markdown 解析、语法高亮和终端语义区域仍由 Pi 处理。
+工具渲染使用 Pi 的公开扩展 API。活动工具状态通过 Pi 导出的交互组件跟随其内置执行状态变化；clean 模式的 thought 详情使用活动时间线自身的展开状态，full 和 compact 模式则保留 Pi 内置的 Thinking 可见性控制。由于 Pi 目前没有为这些展示细节提供公开渲染钩子，自适应的原生用户消息气泡、原生输入编辑器圆角、无序列表标记和围栏代码块增强需要使用可安全重载的运行时补丁。Markdown 增强仅在渲染主 transcript 中的用户消息和助手回复时启用；扩展 overlay 创建的 Markdown 保持 Pi 原生布局。Markdown 解析、语法高亮和终端语义区域仍由 Pi 处理。
 
 本扩展不会修改 Pi 源文件。运行时补丁会在会话关闭时移除，但未来的 Pi 版本可能需要本扩展同步适配。
 

package/extensions/index.ts

@@ -43,6 +43,7 @@ import {
 type PrettyTuiMode = "full" | "compact" | "clean";
 const CLEAN_TOOL_ACTIVITY_MIN_MS = 1000;
 const TRANSIENT_UI_STATUS_MS = 10_000;
+const RESPONSE_FOOTER_ENTRY_TYPE = "pretty-tui-response-footer";
 const SPECIALIZED_TOOL_NAMES = new Set(["read", "bash", "edit", "write", "grep", "find", "ls"]);
 
 const stripAnsiBackgrounds = (value: string): string =>
@@ -168,8 +169,53 @@ export default function prettyTui(pi: ExtensionAPI) {
       currentTui?.requestRender?.();
     }, TRANSIENT_UI_STATUS_MS);
   };
+  const copyTranscriptText = (text: string) => {
+    // Code-block copy must preserve leading/trailing whitespace and indentation.
+    // Answers are normalized separately by assistantAnswerText().
+    if (!text.trim()) return;
+    const copyText = text;
+    if (typeof currentTui?.copyTextToClipboard === "function") {
+      // Fullscreen uses Pi's native clipboard path and native flash feedback.
+      void Promise.resolve(currentTui.copyTextToClipboard(copyText)).catch(() => {
+        currentTui?.flash?.("Copy failed");
+      });
+      return;
+    }
+    void copyToClipboard(copyText)
+      .then(() => setLatestActivityStatus({ title: "Copied!", severity: "success" }))
+      .catch(() => setLatestActivityStatus({ title: "Copy failed", severity: "error" }));
+  };
+  type ResponseFooterData = {
+    answerEntryId?: string;
+    durationMs: number;
+    outcome: "completed" | "stopped";
+  };
+  const responseAnswerTexts = new Map<string, string>();
+  let responseRunStartedAt: number | undefined;
+  let responseHasAssistantMessage = false;
+  const assistantAnswerText = (message: any): string => {
+    if (typeof message?.content === "string") return message.content.trim();
+    if (!Array.isArray(message?.content)) return "";
+    return message.content
+      .filter((item: any) => item?.type === "text" && typeof item.text === "string" && item.text.trim())
+      .map((item: any) => item.text.trim())
+      .join("\n\n")
+      .trim();
+  };
+  const formatResponseDuration = (durationMs: number): string => {
+    const totalSeconds = Math.max(1, Math.round(Math.max(0, durationMs) / 1000));
+    if (totalSeconds < 60) return `${totalSeconds}s`;
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    if (totalMinutes < 60) return `${totalMinutes}m ${seconds}s`;
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return `${hours}h ${String(minutes).padStart(2, "0")}m`;
+  };
   const activityTimeline = new ActivityTimeline();
   const revealedActivityGroups = new Set<string>();
+  // A local collapse must still work when Ctrl+O has expanded every group.
+  const collapsedActivityGroups = new Set<string>();
   const expandedThinkingMembers = new Set<string>();
   const thinkingComponents = new Map<string, any>();
   const activityFallbackThemes = new Map<string, any>();
@@ -298,7 +344,8 @@ export default function prettyTui(pi: ExtensionAPI) {
   };
 
   const activityGroupRevealed = (group: ActivityGroup): boolean =>
-    cleanToolsExpanded || revealedActivityGroups.has(group.id);
+    !collapsedActivityGroups.has(group.id) &&
+    (cleanToolsExpanded || revealedActivityGroups.has(group.id));
 
   // A group is revealable once it owns anything renderable beneath its parent
   // row. Thinking counts on its own: a tool-free turn still gets a parent row
@@ -311,6 +358,67 @@ export default function prettyTui(pi: ExtensionAPI) {
     last: group.members[group.members.length - 1]?.id === member.id,
   });
 
+  const collapseLabel = "[↑ Collapse]";
+  const collapsePrefix = "  └─ ";
+  const renderActivityCollapse = (group: ActivityGroup, width: number): string => {
+    const theme = activityGroupTheme(group);
+    return truncateToWidth(
+      theme.fg("dim", collapsePrefix) + theme.fg("muted", collapseLabel),
+      Math.max(1, width),
+      "",
+    );
+  };
+  const withActivityCollapse = (
+    group: ActivityGroup,
+    member: ActivityMember,
+    width: number,
+    lines: string[],
+  ): string[] => activityMemberPosition(group, member).last && activityGroupRevealed(group)
+    ? [...lines, renderActivityCollapse(group, width)]
+    : lines;
+  const activityCollapseClicked = (
+    group: ActivityGroup,
+    member: ActivityMember,
+    event: any,
+    row: number,
+  ): boolean => activityGroupRevealed(group) &&
+    activityMemberPosition(group, member).last &&
+    event.type === "click" && event.button === "left" && event.y === row &&
+    event.x >= visibleWidth(collapsePrefix) &&
+    event.x < Math.min(event.width, visibleWidth(collapsePrefix + collapseLabel));
+
+  const refreshActivityGroup = (group: ActivityGroup): void => {
+    for (const child of group.members) {
+      if (child.kind === "tool" && child.toolCallId) {
+        cleanToolComponents.get(child.toolCallId)?.updateDisplay?.();
+      } else if (child.kind === "thinking" && child.messageKey) {
+        thinkingComponents.get(child.messageKey)?.invalidate?.();
+      } else if (child.kind === "update") {
+        activityUpdateComponents.get(child.id)?.invalidate?.();
+      }
+    }
+  };
+  const revealActivityGroup = (group: ActivityGroup, ui?: any): void => {
+    collapsedActivityGroups.delete(group.id);
+    revealedActivityGroups.add(group.id);
+    for (const toolCallId of group.toolCallIds) cleanCompactToolCallIds.add(toolCallId);
+    refreshActivityGroup(group);
+    (ui ?? currentTui)?.requestRender?.();
+  };
+  const collapseActivityGroup = (group: ActivityGroup, ui?: any): void => {
+    revealedActivityGroups.delete(group.id);
+    if (cleanToolsExpanded) collapsedActivityGroups.add(group.id);
+    else collapsedActivityGroups.delete(group.id);
+    for (const toolCallId of group.toolCallIds) {
+      cleanCompactToolCallIds.delete(toolCallId);
+      const component = cleanToolComponents.get(toolCallId);
+      if (component?.expanded) component.setExpanded(false);
+    }
+    for (const child of group.members) expandedThinkingMembers.delete(child.id);
+    refreshActivityGroup(group);
+    (ui ?? currentTui)?.requestRender?.();
+  };
+
   const activityTreeStyle = (
     group: ActivityGroup,
     member: ActivityMember,
@@ -318,8 +426,10 @@ export default function prettyTui(pi: ExtensionAPI) {
     memberTheme?: any,
   ) => {
     const { last } = activityMemberPosition(group, member);
-    const rawPrefix = last ? "  └─ " : "  ├─ ";
-    const rawContinuation = last ? "     " : "  │  ";
+    // While expanded, the collapse action is the final sibling in the tree.
+    const hasFollowingCollapse = last && activityGroupRevealed(group);
+    const rawPrefix = last && !hasFollowingCollapse ? "  └─ " : "  ├─ ";
+    const rawContinuation = last && !hasFollowingCollapse ? "     " : "  │  ";
     const prefixWidth = visibleWidth(rawPrefix);
     if (width <= prefixWidth) {
       return { prefix: "", continuation: "", childWidth: Math.max(1, width), prefixWidth: 0 };
@@ -406,9 +516,10 @@ export default function prettyTui(pi: ExtensionAPI) {
       truncateToWidth((index === 0 ? prefix : continuation) + line, Math.max(1, width), "")
     );
     const position = activityMemberPosition(group, member);
-    return position.first
-      ? ["", ...renderActivityGroupSummary(group, width), ...decorated]
-      : decorated;
+    return withActivityCollapse(
+      group, member, width,
+      position.first ? ["", ...renderActivityGroupSummary(group, width), ...decorated] : decorated,
+    );
   };
 
   const renderPendingActivityUpdate = (member: ActivityMember, width: number): string[] => {
@@ -451,29 +562,16 @@ export default function prettyTui(pi: ExtensionAPI) {
     const position = activityMemberPosition(group, member);
     if (!activityGroupRevealed(group)) {
       if (!position.first) return undefined;
-      revealedActivityGroups.add(group.id);
-      for (const toolCallId of group.toolCallIds) cleanCompactToolCallIds.add(toolCallId);
-    } else {
-      const summaryHeight = position.first ? renderActivityGroupSummary(group, event.width).length : 0;
-      if (!position.first || event.y <= 0 || event.y > summaryHeight) return undefined;
-      revealedActivityGroups.delete(group.id);
-      for (const toolCallId of group.toolCallIds) {
-        cleanCompactToolCallIds.delete(toolCallId);
-        const component = cleanToolComponents.get(toolCallId);
-        if (component?.expanded) component.setExpanded(false);
-      }
-      for (const child of group.members) expandedThinkingMembers.delete(child.id);
-    }
-    for (const child of group.members) {
-      if (child.kind === "tool" && child.toolCallId) {
-        cleanToolComponents.get(child.toolCallId)?.updateDisplay?.();
-      } else if (child.kind === "thinking" && child.messageKey) {
-        thinkingComponents.get(child.messageKey)?.invalidate?.();
-      } else if (child.kind === "update") {
-        activityUpdateComponents.get(child.id)?.invalidate?.();
-      }
+      revealActivityGroup(group);
+      return { handled: true };
     }
-    currentTui?.requestRender?.();
+    const summaryHeight = position.first ? renderActivityGroupSummary(group, event.width).length : 0;
+    const onSummary = position.first && event.y > 0 && event.y <= summaryHeight;
+    const onCollapse = position.last && activityCollapseClicked(
+      group, member, event, renderActivityUpdate(group, member, event.width).length - 1,
+    );
+    if (!onSummary && !onCollapse) return undefined;
+    collapseActivityGroup(group);
     return { handled: true };
   };
 
@@ -562,6 +660,7 @@ export default function prettyTui(pi: ExtensionAPI) {
 
       cleanCompactToolCallIds.clear();
       revealedActivityGroups.clear();
+      collapsedActivityGroups.clear();
       expandedThinkingMembers.clear();
       renderMode = requested;
       if (renderMode === "clean") refreshLatestActivityWidget();
@@ -652,8 +751,10 @@ export default function prettyTui(pi: ExtensionAPI) {
     });
   }
 
-  // Render user prompts as a titled, rounded frame while preserving Pi's
-  // original Markdown component, wrapping, output padding, and OSC 133 zones.
+  // Render user prompts as right-aligned, content-sized chat bubbles while
+  // preserving Pi's Markdown component, wrapping, output padding, and OSC 133
+  // zones. Long messages stop at 75% of the terminal width; narrow terminals
+  // trade away the left gap before sacrificing readability.
   const userMessagePrototype = UserMessageComponent.prototype as any;
   const userMessagePatchKey = Symbol.for("pretty-tui.user-message-frame");
   if (!userMessagePrototype[userMessagePatchKey]) {
@@ -663,66 +764,118 @@ export default function prettyTui(pi: ExtensionAPI) {
       const content = this.children?.[0] as any;
       if (!content) return;
 
-      // Reuse Pi's theme-aware user background across the complete frame.
-      const userMessageBg = content.bgFn as ((text: string) => string) | undefined;
+      // Remove Pi's full-width user-message background. The Markdown keeps its
+      // native foreground styling, while the surrounding bubble stays transparent.
       content.paddingX = 0;
       content.paddingY = 0;
       content.setBgFn?.(undefined);
       content.invalidate?.();
+      // Pi wraps the Markdown in a full-width Box. Render the Markdown child
+      // directly so short messages expose their natural visible width instead
+      // of inheriting the Box's width-filling padding.
+      const markdown = content.children?.[0] ?? content;
 
       const outputPad = Math.max(0, Number(this.outputPad) || 0);
       const markdownTheme = this.markdownTheme;
-      const border = (text: string) => markdownTheme.quoteBorder(text);
+      // Markdown deliberately pads every rendered line to the requested width.
+      // Remove only that trailing layout padding before measuring or framing;
+      // ANSI styling and the visible content remain untouched.
+      const renderMarkdown = (width: number): string[] =>
+        withTranscriptMarkdown(() => markdown.render(width))
+          .map((line: string) => line.replace(/ +$/u, ""));
+      const layout = (width: number) => {
+        const terminalWidth = Math.max(1, width);
+        const rightPad = Math.min(outputPad, Math.max(0, terminalWidth - 1));
+        const availableWidth = Math.max(1, terminalWidth - rightPad);
+        if (availableWidth < 4) {
+          return {
+            framed: false,
+            rightPad,
+            leftPad: 0,
+            frameWidth: availableWidth,
+            contentWidth: availableWidth,
+            body: renderMarkdown(availableWidth),
+          };
+        }
+
+        const preferredMaximum = Math.max(4, Math.floor(terminalWidth * 0.75));
+        // Keep at least one blank column on the left whenever a framed bubble
+        // fits, even after a narrow terminal relaxes the usual 75% maximum.
+        const bubbleAvailable = availableWidth >= 5 ? availableWidth - 1 : availableWidth;
+        const narrowReadableMinimum = Math.min(bubbleAvailable, 24);
+        const frameMaximum = Math.min(
+          bubbleAvailable,
+          Math.max(preferredMaximum, narrowReadableMinimum),
+        );
+        const measuringWidth = Math.max(1, frameMaximum - 4);
+        const measuredBody = renderMarkdown(measuringWidth);
+        const naturalContentWidth = Math.max(
+          1,
+          ...measuredBody.map((line: string) => visibleWidth(line)),
+        );
+        const frameWidth = Math.min(frameMaximum, naturalContentWidth + 4);
+        const contentWidth = Math.max(1, frameWidth - 4);
+        const body = contentWidth === measuringWidth
+          ? measuredBody
+          : renderMarkdown(contentWidth);
+        return {
+          framed: true,
+          rightPad,
+          leftPad: Math.max(0, terminalWidth - rightPad - frameWidth),
+          frameWidth,
+          contentWidth,
+          body,
+        };
+      };
+      const border = (text: string) => currentExtensionUi?.theme?.fg
+        ? currentExtensionUi.theme.fg("accent", text)
+        : markdownTheme.quoteBorder(text);
       const frame: Component = {
         render(width: number): string[] {
-          const sidePad = Math.min(outputPad, Math.max(0, Math.floor((width - 1) / 2)));
-          const outer = " ".repeat(sidePad);
-          const frameWidth = Math.max(1, width - sidePad * 2);
-          const paintBackground = (line: string) => {
-            const padding = " ".repeat(Math.max(0, frameWidth - visibleWidth(line)));
-            return userMessageBg ? userMessageBg(line + padding) : line + padding;
-          };
-          if (frameWidth < 4) {
-            return content.render(frameWidth).map((line: string) => outer + paintBackground(line));
+          const measured = layout(width);
+          const left = " ".repeat(measured.leftPad);
+          const right = " ".repeat(measured.rightPad);
+          if (!measured.framed) {
+            return measured.body.map((line: string) => left + line + right);
           }
 
-          const title = " User ";
-          const topStart = "╭─";
-          const topTail = "─".repeat(Math.max(0, frameWidth - visibleWidth(topStart) - visibleWidth(title) - 1));
-          const top = border(topStart + markdownTheme.bold(title) + topTail + "╮");
-          const bottom = border("╰" + "─".repeat(Math.max(0, frameWidth - 2)) + "╯");
-          const contentWidth = Math.max(1, frameWidth - 4);
-          const body = withTranscriptMarkdown(() => content.render(contentWidth)).map((line: string) => {
-            const padding = " ".repeat(Math.max(0, contentWidth - visibleWidth(line)));
+          const top = border("╭" + "─".repeat(Math.max(0, measured.frameWidth - 2)) + "╮");
+          const bottom = border("╰" + "─".repeat(Math.max(0, measured.frameWidth - 2)) + "╯");
+          const body = measured.body.map((line: string) => {
+            const padding = " ".repeat(Math.max(0, measured.contentWidth - visibleWidth(line)));
             return border("│ ") + line + padding + border(" │");
           });
-          return [top, ...body, bottom].map((line: string) => outer + paintBackground(line));
+          return [top, ...body, bottom].map((line: string) => left + line + right);
         },
         handleMouse(event: any) {
-          if (!content.handleMouse) return undefined;
-          const sidePad = Math.min(outputPad, Math.max(0, Math.floor((event.width - 1) / 2)));
-          const frameWidth = Math.max(1, event.width - sidePad * 2);
-          if (frameWidth < 4) {
-            return withTranscriptMarkdown(() => content.handleMouse({
+          if (!markdown.handleMouse) return undefined;
+          const measured = layout(event.width);
+          if (!measured.framed) {
+            return withTranscriptMarkdown(() => markdown.handleMouse({
               ...event,
-              x: event.x - sidePad,
-              width: frameWidth,
+              x: event.x - measured.leftPad,
+              width: measured.contentWidth,
             }));
           }
-          const contentWidth = Math.max(1, frameWidth - 4);
-          if (event.y <= 0 || event.x < sidePad + 2 || event.x >= sidePad + 2 + contentWidth) {
+          const contentX = measured.leftPad + 2;
+          if (
+            event.y <= 0 ||
+            event.y > measured.body.length ||
+            event.x < contentX ||
+            event.x >= contentX + measured.contentWidth
+          ) {
             return undefined;
           }
-          return withTranscriptMarkdown(() => content.handleMouse({
+          return withTranscriptMarkdown(() => markdown.handleMouse({
             ...event,
-            x: event.x - sidePad - 2,
+            x: event.x - contentX,
             y: event.y - 1,
-            width: contentWidth,
-            height: Math.max(0, event.height - 2),
+            width: measured.contentWidth,
+            height: measured.body.length,
           }));
         },
         invalidate() {
-          content.invalidate?.();
+          markdown.invalidate?.();
         },
       };
 
@@ -917,15 +1070,7 @@ export default function prettyTui(pi: ExtensionAPI) {
       );
 
     const refreshGroup = (group: ActivityGroup) => {
-      for (const member of group.members) {
-        if (member.kind === "tool" && member.toolCallId) {
-          cleanToolComponents.get(member.toolCallId)?.updateDisplay?.();
-        } else if (member.kind === "thinking" && member.messageKey) {
-          thinkingComponents.get(member.messageKey)?.invalidate?.();
-        } else if (member.kind === "update") {
-          activityUpdateComponents.get(member.id)?.invalidate?.();
-        }
-      }
+      refreshActivityGroup(group);
       currentTui?.requestRender?.();
     };
 
@@ -1091,9 +1236,10 @@ export default function prettyTui(pi: ExtensionAPI) {
       const decorated = contentLines.map((line, index) =>
         truncateToWidth((index === 0 ? prefix : continuation) + line, Math.max(1, width), "")
       );
-      const output = position.first
-        ? ["", ...renderActivityGroupSummary(group, width), ...decorated]
-        : decorated;
+      const output = withActivityCollapse(
+        group, member, width,
+        position.first ? ["", ...renderActivityGroupSummary(group, width), ...decorated] : decorated,
+      );
       if (cacheable) {
         this[cleanThinkingRenderCacheKey] = {
           width,
@@ -1134,10 +1280,11 @@ export default function prettyTui(pi: ExtensionAPI) {
       // visible Markdown. The Markdown is rendered after the activity rows;
       // route clicks in that suffix back to Pi's native component so links,
       // text selection, and code-block Copy controls keep working.
+      let activityHeight: number | undefined;
       if (visibleAssistantText(message)) {
         const visibleLines = originalRender.call(this, event.width);
         const renderedLines = patchedRender.call(this, event.width);
-        const activityHeight = Math.max(0, renderedLines.length - visibleLines.length);
+        activityHeight = Math.max(0, renderedLines.length - visibleLines.length);
         if (event.y >= activityHeight) {
           return originalHandleMouse.call(this, {
             ...event,
@@ -1149,25 +1296,21 @@ export default function prettyTui(pi: ExtensionAPI) {
 
       if (!activityGroupRevealed(group)) {
         if (!isLeftClick) return undefined;
-        if (position.first) {
-          revealedActivityGroups.add(group.id);
-          for (const toolCallId of group.toolCallIds) cleanCompactToolCallIds.add(toolCallId);
-          refreshGroup(group);
-        }
+        if (position.first) revealActivityGroup(group);
         return { handled: true };
       }
       const summaryHeight = position.first ? renderActivityGroupSummary(group, event.width).length : 0;
-      if (position.first && event.y > 0 && event.y <= summaryHeight && isLeftClick) {
-        revealedActivityGroups.delete(group.id);
-        for (const toolCallId of group.toolCallIds) {
-          cleanCompactToolCallIds.delete(toolCallId);
-          const component = cleanToolComponents.get(toolCallId);
-          if (component?.expanded) component.setExpanded(false);
-        }
-        for (const child of group.members) expandedThinkingMembers.delete(child.id);
-        refreshGroup(group);
+      const collapseRow = position.last
+        ? (activityHeight ?? patchedRender.call(this, event.width).length) - 1
+        : -1;
+      if (
+        (position.first && event.y > 0 && event.y <= summaryHeight && isLeftClick) ||
+        activityCollapseClicked(group, member, event, collapseRow)
+      ) {
+        collapseActivityGroup(group);
         return { handled: true };
       }
+      if (position.last && event.y === collapseRow) return undefined;
       if (isLeftClick) {
         if (expandedThinkingMembers.has(member.id)) expandedThinkingMembers.delete(member.id);
         else expandedThinkingMembers.add(member.id);
@@ -1292,6 +1435,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     const originalShowError = interactiveModePrototype.showError;
     const patchedSetToolsExpanded = function (this: any, expanded: boolean) {
       cleanToolsExpanded = expanded;
+      collapsedActivityGroups.clear();
       changingAllToolsExpansion = true;
       if (!expanded) {
         cleanCompactToolCallIds.clear();
@@ -1789,26 +1933,7 @@ export default function prettyTui(pi: ExtensionAPI) {
             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(() => setLatestActivityStatus({
-                  title: "Copied!",
-                  severity: "success",
-                }))
-                .catch(() => setLatestActivityStatus({
-                  title: "Copy failed",
-                  severity: "error",
-                }));
-            }
-          }
+          if (event.type === "click") copyTranscriptText(region.code);
           return { handled: true, render: false };
         }
       }
@@ -2347,32 +2472,8 @@ export default function prettyTui(pi: ExtensionAPI) {
     const originalToolHandleMouse = toolExecutionPrototype.handleMouse;
     const renderedModeKey = Symbol("pretty-tui.tool-rendered-mode");
     const cleanChildRenderCacheKey = Symbol("pretty-tui.clean-child-render-cache");
-    const refreshActivityGroup = (group: ActivityGroup) => {
-      for (const member of group.members) {
-        if (member.kind === "tool" && member.toolCallId) {
-          cleanToolComponents.get(member.toolCallId)?.updateDisplay();
-        } else if (member.kind === "thinking" && member.messageKey) {
-          thinkingComponents.get(member.messageKey)?.invalidate?.();
-        }
-      }
-    };
-    const revealCleanGroup = (group: ActivityGroup, ui?: any) => {
-      revealedActivityGroups.add(group.id);
-      for (const toolCallId of group.toolCallIds) cleanCompactToolCallIds.add(toolCallId);
-      refreshActivityGroup(group);
-      ui?.requestRender?.();
-    };
-    const collapseCleanGroup = (group: ActivityGroup, ui?: any) => {
-      revealedActivityGroups.delete(group.id);
-      for (const toolCallId of group.toolCallIds) {
-        const component = cleanToolComponents.get(toolCallId);
-        if (component?.expanded) originalSetExpanded.call(component, false);
-        cleanCompactToolCallIds.delete(toolCallId);
-      }
-      for (const member of group.members) expandedThinkingMembers.delete(member.id);
-      refreshActivityGroup(group);
-      ui?.requestRender?.();
-    };
+    const revealCleanGroup = revealActivityGroup;
+    const collapseCleanGroup = collapseActivityGroup;
     const patchedMarkExecutionStarted = function (this: any) {
       activityTimeline.addTool(this.toolCallId, this.toolName);
       if (!cleanRun.currentToolCallIds.includes(this.toolCallId)) {
@@ -2433,7 +2534,11 @@ export default function prettyTui(pi: ExtensionAPI) {
         continuation,
         childWidth,
       } = activityTreeStyle(group, member, width, childTheme);
-      const thirdParty = !SPECIALIZED_TOOL_NAMES.has(this.toolName);
+      // Other extensions (notably FFF in override mode) can register their own
+      // grep/find renderers under built-in names. Their default boxed shell is
+      // not one of our self-rendering specialized tools.
+      const thirdParty = !SPECIALIZED_TOOL_NAMES.has(this.toolName) ||
+        this.toolDefinition?.renderShell !== "self";
       const cacheable = !this.expanded && Boolean(this.result) && !this.isPartial;
       const cached = cacheable ? this[cleanChildRenderCacheKey] : undefined;
       let decoratedContent: string[];
@@ -2499,8 +2604,10 @@ export default function prettyTui(pi: ExtensionAPI) {
           };
         }
       }
-      if (!position.first) return decoratedContent;
-      return ["", ...renderActivityGroupSummary(group, width), ...decoratedContent];
+      return withActivityCollapse(
+        group, member, width,
+        position.first ? ["", ...renderActivityGroupSummary(group, width), ...decoratedContent] : decoratedContent,
+      );
     };
     const patchedToolHandleMouse = function (this: any, event: any) {
       const member = activityTimeline.memberForTool(this.toolCallId);
@@ -2519,7 +2626,11 @@ export default function prettyTui(pi: ExtensionAPI) {
       if (!revealed) return isLeftClick ? { handled: true } : undefined;
 
       const summaryHeight = position.first ? renderActivityGroupSummary(group, event.width).length : 0;
-      if (position.first && event.y > 0 && event.y <= summaryHeight && isLeftClick) {
+      const onSummary = position.first && event.y > 0 && event.y <= summaryHeight && isLeftClick;
+      const onCollapse = position.last && activityCollapseClicked(
+        group, member, event, patchedToolRender.call(this, event.width).length - 1,
+      );
+      if (onSummary || onCollapse) {
         changingAllToolsExpansion = true;
         try {
           collapseCleanGroup(group, this.ui);
@@ -2533,7 +2644,7 @@ export default function prettyTui(pi: ExtensionAPI) {
       // replaces that spacer with the compact header for non-first members.
       const thirdPartyHeaderY = position.first ? summaryHeight + 1 : 0;
       if (
-        !SPECIALIZED_TOOL_NAMES.has(this.toolName) &&
+        (!SPECIALIZED_TOOL_NAMES.has(this.toolName) || this.toolDefinition?.renderShell !== "self") &&
         isLeftClick &&
         event.y === thirdPartyHeaderY
       ) {
@@ -2879,6 +2990,62 @@ export default function prettyTui(pi: ExtensionAPI) {
       (renderMode === "clean" && isCleanGroupRevealed(toolCallId))
     );
 
+  pi.registerEntryRenderer<ResponseFooterData>(RESPONSE_FOOTER_ENTRY_TYPE, (entry, _options, theme) => {
+    let copyStart = -1;
+    let copyWidth = 0;
+    return {
+      render(width: number): string[] {
+        const data = entry.data;
+        if (!data || width <= 0) return [];
+        copyStart = -1;
+        copyWidth = 0;
+        const answer = data.answerEntryId ? responseAnswerTexts.get(data.answerEntryId) ?? "" : "";
+        const copyLabel = "[Copy]";
+        const showCopy = fullscreenTui && Boolean(answer.trim()) && width >= 30;
+        const duration = formatResponseDuration(data.durationMs);
+        const statusText = data.outcome === "stopped"
+          ? `⚠ Stopped after ${duration}`
+          : `✓ Completed in ${duration}`;
+        const leading = "── ";
+        const trailing = showCopy ? ` ${copyLabel} ──` : "──";
+        const fixedWidth = visibleWidth(leading) + visibleWidth(trailing) + 1;
+        if (width <= fixedWidth) return [theme.fg("dim", "─".repeat(width))];
+
+        const statusWidth = Math.max(1, width - fixedWidth);
+        const visibleStatus = truncateToWidth(statusText, statusWidth, "…");
+        const prefix = leading + visibleStatus + " ";
+        const fill = "─".repeat(Math.max(0, width - visibleWidth(prefix) - visibleWidth(trailing)));
+        const line = prefix + fill + trailing;
+        if (showCopy) {
+          const copyIndex = line.indexOf(copyLabel);
+          copyStart = visibleWidth(line.slice(0, copyIndex));
+          copyWidth = visibleWidth(copyLabel);
+        }
+        // The divider, completion text, and Copy control intentionally share
+        // one quiet gray treatment; position alone communicates the hierarchy.
+        return [theme.fg("dim", line)];
+      },
+      handleMouse(event: TuiMouseEvent) {
+        if (
+          copyStart < 0 ||
+          event.button !== "left" ||
+          (event.type !== "press" && event.type !== "click") ||
+          event.y !== 0 ||
+          event.x < copyStart ||
+          event.x >= copyStart + copyWidth
+        ) {
+          return undefined;
+        }
+        if (event.type === "click" && entry.data?.answerEntryId) {
+          const answer = responseAnswerTexts.get(entry.data.answerEntryId);
+          if (answer) copyTranscriptText(answer);
+        }
+        return { handled: true, render: false };
+      },
+      invalidate() {},
+    };
+  });
+
   pi.registerEntryRenderer<ToolSummaryData>("pretty-tui-tool-summary", (entry, { expanded }, theme) => ({
     render(width: number): string[] {
       if (renderMode !== "clean" || expanded || cleanContextCompacted) return [];
@@ -2934,8 +3101,12 @@ export default function prettyTui(pi: ExtensionAPI) {
     settledSummaries.clear();
     legacySummaryLastToolCallIds.clear();
     activityTimeline.clear();
+    responseAnswerTexts.clear();
+    responseRunStartedAt = undefined;
+    responseHasAssistantMessage = false;
     nativeCustomBoundaryKeys.clear();
     revealedActivityGroups.clear();
+    collapsedActivityGroups.clear();
     expandedThinkingMembers.clear();
     thinkingComponents.clear();
     activityFallbackThemes.clear();
@@ -3157,6 +3328,8 @@ export default function prettyTui(pi: ExtensionAPI) {
       }
 
       if (message.role === "assistant") {
+        const answerText = assistantAnswerText(message);
+        if (answerText) responseAnswerTexts.set(entry.id, answerText);
         const thinking = thinkingText(message);
         if (thinking) {
           activityTimeline.addThinking(assistantMessageKey(message), thinking);
@@ -3306,6 +3479,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     trackPendingToolActivity(event.message);
   });
   pi.on("message_end", (event) => {
+    if (event.message?.role === "assistant") responseHasAssistantMessage = true;
     if (hasVisibleAssistantText(event.message)) {
       trackThinkingActivity(event.message);
       closeAtAssistantBoundary(event.message, "done");
@@ -3328,6 +3502,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     // count until the whole run reaches agent_settled.
     if (!cleanRun.active) {
       clearToolActivityHolds();
+      responseRunStartedAt = Date.now();
       cleanRun.count = 0;
       cleanRun.failed = 0;
       cleanRun.currentToolCallIds = [];
@@ -3336,6 +3511,9 @@ export default function prettyTui(pi: ExtensionAPI) {
       cleanRun.lastCompletedToolCallId = undefined;
       cleanRun.settled = false;
     }
+    // Retries share the original start time but only the newest low-level
+    // run may supply a candidate final answer.
+    responseHasAssistantMessage = false;
     cleanRun.active = true;
     cleanRun.activeToolCallIds.clear();
     cleanRun.activeToolCallId = undefined;
@@ -3389,7 +3567,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     cleanRun.activeToolName = undefined;
     cleanRun.activity = "thinking";
   });
-  pi.on("agent_settled", () => {
+  pi.on("agent_settled", (_event, ctx) => {
     if (cleanRun.settled) return;
 
     clearPendingToolActivities();
@@ -3411,6 +3589,30 @@ export default function prettyTui(pi: ExtensionAPI) {
     cleanRun.activity = "done";
     cleanRun.settled = true;
 
+    if (responseRunStartedAt !== undefined) {
+      // message_end runs before later extensions can replace the message and
+      // before Pi persists it. Read the committed branch at the final boundary
+      // so Copy matches the transcript even when another extension redacts it.
+      const finalEntry = responseHasAssistantMessage
+        ? ctx.sessionManager.getBranch().reverse().find(
+            (entry) => entry.type === "message" && entry.message.role === "assistant",
+          )
+        : undefined;
+      const answer = finalEntry && finalEntry.type === "message"
+        ? assistantAnswerText(finalEntry.message)
+        : "";
+      if (answer && finalEntry) responseAnswerTexts.set(finalEntry.id, answer);
+      pi.appendEntry<ResponseFooterData>(RESPONSE_FOOTER_ENTRY_TYPE, {
+        answerEntryId: answer ? finalEntry?.id : undefined,
+        durationMs: Math.max(0, Date.now() - responseRunStartedAt),
+        outcome: finalEntry?.type === "message" && assistantTerminalState(finalEntry.message)
+          ? "stopped"
+          : "completed",
+      });
+      responseRunStartedAt = undefined;
+      responseHasAssistantMessage = false;
+    }
+
     const groups = cleanRun.groups.slice();
     if (renderMode !== "clean" || groups.length === 0) return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-pretty-tui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A beautiful, polished TUI for the Pi coding agent",
   "license": "MIT",
   "author": "Kainan Yang <ykn0309@whu.edu.cn>",