pi-pretty-tui 0.2.2 → 0.2.4

package/README.md

@@ -7,6 +7,7 @@ A beautiful, polished TUI for the [Pi coding agent](https://pi.dev/).
 ## Features
 
 - **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.
+- **Live working duration:** in clean mode, elapsed time appears beside `Working` in the prompt editor's top border, using the border's own color. It shares the agent-run clock and duration format with the completion footer, includes automatic retries, and disappears when the run settles. Narrow editors omit the timer when it cannot fit. Expanded `Done` titles and markers use the theme's `success` color; collapsed summaries remain quiet gray.
 - **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.
@@ -26,7 +27,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.
 

package/README.zh-CN.md

@@ -8,6 +8,7 @@
 
 - **可折叠的活动时间线：** 不再让大量独立调用填满对话。思考、工具和普通 `info` 通知会进入同一条按真实时间排序的活动流；工作进行时显示为 `Running(...)`，结束后变为低调的 `Done(...)`。父级只统计工具调用和思考数量；展开后可查看所有有序成员，成员摘要在展开嵌套详情后仍然保留。思考与工具地位相同：没有调用任何工具的那一轮同样会有自己的 `Running(1 thought)` / `Done(1 thought)` 父行，思考作为其子级，内容不会被丢弃。
 - **可持久化的回答 footer：** 整轮 Agent 工作真正 settled 后（包括工具、自动重试和 compaction），最终回答底部会显示一条低调的灰色分隔线，工作时长与 fullscreen 模式下的 `[Copy]` 控件都嵌在线中。`[Copy]` 只复制最终可见回答，不包含 thought、工具、状态或 footer；reload 和 session tree 切换后仍会保留。
+- **实时工作计时：** clean 模式下，耗时显示在输入框顶部边框的 `Working` 右侧，颜色与边框一致。它与完成 footer 共用 Agent 整轮工作的计时起点和时长格式，包含自动重试，工作真正结束后消失；窄输入框放不下时会隐藏计时。展开后的 `Done` 标题和圆点使用主题的 `success` 色，折叠摘要仍保持低调的灰色。
 - **临时 UI 状态：** 编辑器上方的一行只显示 Pi 直接产生的 UI 操作反馈，例如 Thinking 或工具输出可见性变化。新状态会替换旧状态，并在十秒后自动消失，不进入 transcript 或 session。
 - **按需查看有效信息：** 针对不同工具设计的摘要，会简洁呈现路径、命令、结果、diff、文件预览和实时 shell 输出，同时保留查看原始完整内容的能力。
 - **统一、精致的视觉体验：** 透明、右对齐的用户聊天气泡会根据短消息自适应宽度，长消息则在终端宽度的 75% 处换行；气泡使用 accent 浅蓝色圆角边框，并移除了多余的 `User` 标注。配合圆角输入框、主题感知配色、层级清晰的 Markdown 标题、更清爽的列表，以及带语法高亮的圆角代码块，让整个 TUI 更协调。在 fullscreen 模式下，每个围栏代码块还带有符合原生体验的 `[Copy]` 控件。
@@ -26,7 +27,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 状态栏。
 

package/extensions/index.ts

@@ -192,6 +192,16 @@ export default function prettyTui(pi: ExtensionAPI) {
   };
   const responseAnswerTexts = new Map<string, string>();
   let responseRunStartedAt: number | undefined;
+  let workingElapsedTimer: ReturnType<typeof setInterval> | undefined;
+  const stopWorkingElapsedTimer = () => {
+    if (workingElapsedTimer) clearInterval(workingElapsedTimer);
+    workingElapsedTimer = undefined;
+  };
+  const startWorkingElapsedTimer = () => {
+    if (workingElapsedTimer) return;
+    workingElapsedTimer = setInterval(() => currentTui?.requestRender?.(), 1000);
+    workingElapsedTimer.unref?.();
+  };
   let responseHasAssistantMessage = false;
   const assistantAnswerText = (message: any): string => {
     if (typeof message?.content === "string") return message.content.trim();
@@ -203,7 +213,7 @@ export default function prettyTui(pi: ExtensionAPI) {
       .trim();
   };
   const formatResponseDuration = (durationMs: number): string => {
-    const totalSeconds = Math.max(1, Math.round(Math.max(0, durationMs) / 1000));
+    const totalSeconds = Math.floor(Math.max(0, durationMs) / 1000);
     if (totalSeconds < 60) return `${totalSeconds}s`;
     const totalMinutes = Math.floor(totalSeconds / 60);
     const seconds = totalSeconds % 60;
@@ -214,6 +224,8 @@ export default function prettyTui(pi: ExtensionAPI) {
   };
   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>();
@@ -342,7 +354,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
@@ -355,6 +368,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,
@@ -362,8 +436,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 };
@@ -450,9 +526,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[] => {
@@ -495,29 +572,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 };
   };
 
@@ -606,10 +670,16 @@ export default function prettyTui(pi: ExtensionAPI) {
 
       cleanCompactToolCallIds.clear();
       revealedActivityGroups.clear();
+      collapsedActivityGroups.clear();
       expandedThinkingMembers.clear();
       renderMode = requested;
-      if (renderMode === "clean") refreshLatestActivityWidget();
-      else clearLatestActivityStatus();
+      if (renderMode === "clean") {
+        if (cleanRun.active && !cleanRun.settled) startWorkingElapsedTimer();
+        refreshLatestActivityWidget();
+      } else {
+        stopWorkingElapsedTimer();
+        clearLatestActivityStatus();
+      }
       for (const component of cleanToolComponents.values()) component.updateDisplay?.();
       for (const component of thinkingComponents.values()) component.invalidate?.();
       try {
@@ -625,6 +695,7 @@ export default function prettyTui(pi: ExtensionAPI) {
   // Keep the settings command available while disabled, but do not install
   // render patches or override built-in tools until the next enabled reload.
   if (!activeForSession) return;
+  pi.on("session_shutdown", stopWorkingElapsedTimer);
 
   // Give Pi's main prompt editor a complete rounded frame. Render the native
   // editor at a two-column narrower width so cursor layout, wrapping, IME, and
@@ -635,7 +706,30 @@ export default function prettyTui(pi: ExtensionAPI) {
     const hadOwnRender = Object.prototype.hasOwnProperty.call(customEditorPrototype, "render");
     const hadOwnHandleMouse = Object.prototype.hasOwnProperty.call(customEditorPrototype, "handleMouse");
     const originalEditorRender = customEditorPrototype.render;
+    const originalEditorTopBorder = customEditorPrototype.renderTopBorder;
     const originalEditorHandleMouse = customEditorPrototype.handleMouse;
+    const patchedEditorTopBorder = function (this: any, width: number, hiddenLineCount: number): string {
+      if (this.tui) currentTui = this.tui;
+      const indicator = this.workingStatusIndicator;
+      if (renderMode !== "clean" || indicator?.kind !== "working" || responseRunStartedAt === undefined) {
+        return originalEditorTopBorder.call(this, width, hiddenLineCount);
+      }
+      const elapsed = formatResponseDuration(Date.now() - responseRunStartedAt);
+      const indicatorColor = (text: string) => this.borderColor(text);
+      const originalRenderInBorder = indicator.renderInBorder;
+      indicator.renderInBorder = function (availableWidth: number): string {
+        const status = originalRenderInBorder.call(this, availableWidth);
+        const suffix = ` ${elapsed}`;
+        return visibleWidth(status) + visibleWidth(suffix) <= availableWidth
+          ? status + indicatorColor(suffix)
+          : status;
+      };
+      try {
+        return originalEditorTopBorder.call(this, width, hiddenLineCount);
+      } finally {
+        indicator.renderInBorder = originalRenderInBorder;
+      }
+    };
     const patchedEditorRender = function (this: any, width: number): string[] {
       if (width < 3) return originalEditorRender.call(this, width);
 
@@ -669,11 +763,14 @@ export default function prettyTui(pi: ExtensionAPI) {
       hadOwnRender,
       hadOwnHandleMouse,
       originalRender: originalEditorRender,
+      originalTopBorder: originalEditorTopBorder,
       originalHandleMouse: originalEditorHandleMouse,
       patchedRender: patchedEditorRender,
+      patchedTopBorder: patchedEditorTopBorder,
       patchedHandleMouse: patchedEditorHandleMouse,
     };
     customEditorPrototype.render = patchedEditorRender;
+    customEditorPrototype.renderTopBorder = patchedEditorTopBorder;
     customEditorPrototype.handleMouse = patchedEditorHandleMouse;
 
     pi.on("session_shutdown", () => {
@@ -683,12 +780,16 @@ export default function prettyTui(pi: ExtensionAPI) {
         if (patch.hadOwnRender) customEditorPrototype.render = patch.originalRender;
         else delete customEditorPrototype.render;
       }
+      if (patch.patchedTopBorder === customEditorPrototype.renderTopBorder) {
+        customEditorPrototype.renderTopBorder = patch.originalTopBorder;
+      }
       if (patch.patchedHandleMouse === customEditorPrototype.handleMouse) {
         if (patch.hadOwnHandleMouse) customEditorPrototype.handleMouse = patch.originalHandleMouse;
         else delete customEditorPrototype.handleMouse;
       }
       if (
         customEditorPrototype.render === patch.originalRender &&
+        customEditorPrototype.renderTopBorder === patch.originalTopBorder &&
         customEditorPrototype.handleMouse === patch.originalHandleMouse
       ) {
         delete customEditorPrototype[editorFramePatchKey];
@@ -1015,15 +1116,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?.();
     };
 
@@ -1189,9 +1282,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,
@@ -1232,10 +1326,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,
@@ -1247,25 +1342,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);
@@ -1390,6 +1481,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();
@@ -2426,32 +2518,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)) {
@@ -2512,7 +2580,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[];
@@ -2578,8 +2650,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);
@@ -2598,7 +2672,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);
@@ -2612,7 +2690,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
       ) {
@@ -2766,7 +2844,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     prefix: () => {
       const currentActivity = typeof activity === "function" ? activity() : activity;
       const color = currentActivity === "done"
-        ? collapsedDone ? "thinkingText" : successMarkerColor(theme)
+        ? collapsedDone ? "thinkingText" : "success"
         : "accent";
       return theme.fg(color, "● ");
     },
@@ -2775,7 +2853,7 @@ export default function prettyTui(pi: ExtensionAPI) {
       const currentActivity = typeof activity === "function" ? activity() : activity;
       const label = currentActivity === "done" ? "Done" : "Running";
       const color = label === "Done"
-        ? collapsedDone ? "thinkingText" : successMarkerColor(theme)
+        ? collapsedDone ? "thinkingText" : "success"
         : "accent";
       const detailColor = label === "Done" && collapsedDone ? "thinkingText" : "text";
       return theme.fg(color, theme.bold(label)) +
@@ -3063,6 +3141,7 @@ export default function prettyTui(pi: ExtensionAPI) {
         );
 
   const restoreCleanSession = (ctx: any) => {
+    stopWorkingElapsedTimer();
     currentExtensionUi = ctx.ui;
     clearLatestActivityStatus();
     cleanToolsExpanded = ctx.ui.getToolsExpanded();
@@ -3074,6 +3153,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     responseHasAssistantMessage = false;
     nativeCustomBoundaryKeys.clear();
     revealedActivityGroups.clear();
+    collapsedActivityGroups.clear();
     expandedThinkingMembers.clear();
     thinkingComponents.clear();
     activityFallbackThemes.clear();
@@ -3486,6 +3566,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     cleanRun.activeToolCallId = undefined;
     cleanRun.activeToolName = undefined;
     cleanRun.activity = "thinking";
+    if (renderMode === "clean") startWorkingElapsedTimer();
   });
   pi.on("tool_execution_start", (event) => {
     activityTimeline.addTool(event.toolCallId, event.toolName);
@@ -3535,6 +3616,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     cleanRun.activity = "thinking";
   });
   pi.on("agent_settled", (_event, ctx) => {
+    stopWorkingElapsedTimer();
     if (cleanRun.settled) return;
 
     clearPendingToolActivities();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-pretty-tui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "A beautiful, polished TUI for the Pi coding agent",
   "license": "MIT",
   "author": "Kainan Yang <ykn0309@whu.edu.cn>",
@@ -52,6 +52,6 @@
     "extensions": [
       "./extensions/index.ts"
     ],
-    "image": "https://unpkg.com/pi-pretty-tui@0.2.0/assets/screenshot.png"
+    "image": "https://raw.githubusercontent.com/ykn0309/pi-pretty-tui/main/assets/screenshot.png"
   }
 }