pi-pretty-tui 0.1.4 → 0.1.6

package/README.md

@@ -1,11 +1,13 @@
 # pi-pretty-tui
 
-A visual refinement extension for the [Pi coding agent](https://pi.dev/). It provides compact tool-call rendering and cleaner list presentation while preserving Pi's built-in tool behavior.
+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.
 
 ![pi-pretty-tui preview](./assets/screenshot.png)
 
 ## 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
@@ -37,9 +39,9 @@ Run `/pretty-tui` to choose a mode interactively, or set one directly:
 /pretty-tui status
 ```
 
-- `full` (default): preserve each tool's detailed call renderer and normal result preview. Press `Ctrl+O` to expand available output, diffs, and content.
+- `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`: 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(...)`. 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 normal expanded tool calls/output in transcript order.
+- `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.
 
 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.
 
@@ -47,13 +49,13 @@ The selected mode applies immediately and persists in `~/.pi/agent/pretty-tui.js
 
 ## Expand tool output
 
-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.
+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.
 
 ## 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. Changing unordered-list markers currently requires runtime patching of an internal `@earendil-works/pi-tui` Markdown renderer method because Pi does not expose a public hook for that presentation detail. Code blocks use Pi's original renderer without modification.
+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.
 
-No Pi source files are modified. The list-marker patch is removed during session shutdown, but a future Pi release may require this extension to be updated.
+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.
 
 ## Uninstall
 

package/extensions/index.ts

@@ -1,7 +1,9 @@
 import {
   AssistantMessageComponent,
+  CustomEditor,
   InteractiveMode,
   ToolExecutionComponent,
+  UserMessageComponent,
   createBashTool,
   createEditTool,
   createFindTool,
@@ -40,16 +42,46 @@ const loadConfig = (path: string): PrettyTuiConfig => {
   }
 };
 
-/** Polished tool calls and list rendering for Pi's TUI. */
+/** Polished user messages, tool calls, and list rendering for Pi's TUI. */
 export default function prettyTui(pi: ExtensionAPI) {
   const cwd = process.cwd();
   const configPath = join(getAgentDir(), "pretty-tui.json");
   let config = loadConfig(configPath);
   const configuredMode = config.mode ?? config.bash?.mode;
-  let renderMode: PrettyTuiMode = configuredMode === "compact" || configuredMode === "clean"
+  let renderMode: PrettyTuiMode = configuredMode === "full" || configuredMode === "compact" || configuredMode === "clean"
     ? configuredMode
-    : "full";
+    : "clean";
   let cleanToolsExpanded = false;
+  let changingAllToolsExpansion = false;
+  const cleanCompactToolCallIds = new Set<string>();
+  const cleanGroupToolCallIds = new Map<string, string[]>();
+  const cleanToolCallGroupOwners = new Map<string, string>();
+  const cleanToolComponents = new Map<string, any>();
+  const cleanToolThemes = new Map<string, any>();
+  const cleanToolNames = new Map<string, string>();
+  let renderCleanGroupSummary = (_lastToolCallId: string, _width: number): string[] => [];
+
+  const setCleanGroupMembers = (lastToolCallId: string, toolCallIds: string[]) => {
+    cleanGroupToolCallIds.set(lastToolCallId, toolCallIds);
+    for (const toolCallId of toolCallIds) cleanToolCallGroupOwners.set(toolCallId, lastToolCallId);
+  };
+
+  const isCleanGroupRevealed = (toolCallId: string): boolean => {
+    if (cleanCompactToolCallIds.has(toolCallId)) return true;
+    const groupOwner = cleanToolCallGroupOwners.get(toolCallId);
+    const groupToolCallIds = groupOwner ? cleanGroupToolCallIds.get(groupOwner) : undefined;
+    return groupToolCallIds?.some((id) => cleanCompactToolCallIds.has(id)) ?? false;
+  };
+
+  const cleanThemeForToolCall = (toolCallId: string): any => {
+    const directTheme = cleanToolThemes.get(toolCallId);
+    if (directTheme) return directTheme;
+    const groupOwner = cleanToolCallGroupOwners.get(toolCallId);
+    const groupToolCallIds = groupOwner ? cleanGroupToolCallIds.get(groupOwner) : undefined;
+    return groupToolCallIds
+      ?.map((id) => cleanToolThemes.get(id))
+      .find(Boolean);
+  };
 
   const saveRenderMode = (mode: PrettyTuiMode) => {
     config = { ...config, mode };
@@ -94,7 +126,9 @@ export default function prettyTui(pi: ExtensionAPI) {
         return;
       }
 
+      cleanCompactToolCallIds.clear();
       renderMode = requested;
+      for (const component of cleanToolComponents.values()) component.updateDisplay?.();
       try {
         saveRenderMode(renderMode);
         ctx.ui.notify(`pi-pretty-tui mode set to: ${renderMode}`, "info");
@@ -105,6 +139,149 @@ export default function prettyTui(pi: ExtensionAPI) {
     },
   });
 
+  // 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
+  // autocomplete remain native, then add one themed border column per side.
+  const customEditorPrototype = CustomEditor.prototype as any;
+  const editorFramePatchKey = Symbol.for("pretty-tui.rounded-editor-frame");
+  if (!customEditorPrototype[editorFramePatchKey]) {
+    const hadOwnRender = Object.prototype.hasOwnProperty.call(customEditorPrototype, "render");
+    const hadOwnHandleMouse = Object.prototype.hasOwnProperty.call(customEditorPrototype, "handleMouse");
+    const originalEditorRender = customEditorPrototype.render;
+    const originalEditorHandleMouse = customEditorPrototype.handleMouse;
+    const patchedEditorRender = function (this: any, width: number): string[] {
+      if (width < 3) return originalEditorRender.call(this, width);
+
+      const innerWidth = width - 2;
+      const lines = originalEditorRender.call(this, innerWidth) as string[];
+      const visibleLineCount = Math.max(0, Number(this.renderedVisibleLineCount) || 0);
+      const bottomBorderIndex = visibleLineCount + 1;
+      const fitInnerWidth = (line: string) =>
+        line + " ".repeat(Math.max(0, innerWidth - visibleWidth(line)));
+
+      return lines.map((line, index) => {
+        const fitted = fitInnerWidth(line);
+        if (index === 0) return this.borderColor("╭") + fitted + this.borderColor("╮");
+        if (index === bottomBorderIndex) return this.borderColor("╰") + fitted + this.borderColor("╯");
+        if (index < bottomBorderIndex) return this.borderColor("│") + fitted + this.borderColor("│");
+        // Autocomplete remains outside the input frame, aligned to its content.
+        return " " + fitted + " ";
+      });
+    };
+    const patchedEditorHandleMouse = function (this: any, event: any) {
+      if (event.width < 3) return originalEditorHandleMouse.call(this, event);
+      const innerWidth = event.width - 2;
+      return originalEditorHandleMouse.call(this, {
+        ...event,
+        x: Math.max(0, Math.min(innerWidth - 1, event.x - 1)),
+        width: innerWidth,
+      });
+    };
+
+    customEditorPrototype[editorFramePatchKey] = {
+      hadOwnRender,
+      hadOwnHandleMouse,
+      originalRender: originalEditorRender,
+      originalHandleMouse: originalEditorHandleMouse,
+      patchedRender: patchedEditorRender,
+      patchedHandleMouse: patchedEditorHandleMouse,
+    };
+    customEditorPrototype.render = patchedEditorRender;
+    customEditorPrototype.handleMouse = patchedEditorHandleMouse;
+
+    pi.on("session_shutdown", () => {
+      const patch = customEditorPrototype[editorFramePatchKey];
+      if (!patch) return;
+      if (patch.patchedRender === customEditorPrototype.render) {
+        if (patch.hadOwnRender) customEditorPrototype.render = patch.originalRender;
+        else delete customEditorPrototype.render;
+      }
+      if (patch.patchedHandleMouse === customEditorPrototype.handleMouse) {
+        if (patch.hadOwnHandleMouse) customEditorPrototype.handleMouse = patch.originalHandleMouse;
+        else delete customEditorPrototype.handleMouse;
+      }
+      if (
+        customEditorPrototype.render === patch.originalRender &&
+        customEditorPrototype.handleMouse === patch.originalHandleMouse
+      ) {
+        delete customEditorPrototype[editorFramePatchKey];
+      }
+    });
+  }
+
+  // Render user prompts as a titled, rounded frame while preserving Pi's
+  // original Markdown component, wrapping, output padding, and OSC 133 zones.
+  const userMessagePrototype = UserMessageComponent.prototype as any;
+  const userMessagePatchKey = Symbol.for("pretty-tui.user-message-frame");
+  if (!userMessagePrototype[userMessagePatchKey]) {
+    const originalUserMessageRebuild = userMessagePrototype.rebuild;
+    const patchedUserMessageRebuild = function (this: any) {
+      originalUserMessageRebuild.call(this);
+      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;
+      content.paddingX = 0;
+      content.paddingY = 0;
+      content.setBgFn?.(undefined);
+      content.invalidate?.();
+
+      const outputPad = Math.max(0, Number(this.outputPad) || 0);
+      const markdownTheme = this.markdownTheme;
+      const border = (text: string) => 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 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 = content.render(contentWidth).map((line: string) => {
+            const padding = " ".repeat(Math.max(0, contentWidth - visibleWidth(line)));
+            return border("│ ") + line + padding + border(" │");
+          });
+          return [top, ...body, bottom].map((line: string) => outer + paintBackground(line));
+        },
+        invalidate() {
+          content.invalidate?.();
+        },
+      };
+
+      this.clear();
+      this.addChild(frame);
+    };
+
+    userMessagePrototype[userMessagePatchKey] = {
+      originalRebuild: originalUserMessageRebuild,
+      patchedRebuild: patchedUserMessageRebuild,
+    };
+    userMessagePrototype.rebuild = patchedUserMessageRebuild;
+
+    pi.on("session_shutdown", () => {
+      const patch = userMessagePrototype[userMessagePatchKey];
+      if (!patch) return;
+      if (patch.patchedRebuild === userMessagePrototype.rebuild) {
+        userMessagePrototype.rebuild = patch.originalRebuild;
+      }
+      if (userMessagePrototype.rebuild === patch.originalRebuild) {
+        delete userMessagePrototype[userMessagePatchKey];
+      }
+    });
+  }
+
   // Pi's built-in assistant component turns hidden thinking into a static
   // "Thinking..." label. In collapsed clean mode, omit that label entirely;
   // the clean-mode Running(...) row owns activity, while Ctrl+O still reveals
@@ -200,7 +377,13 @@ export default function prettyTui(pi: ExtensionAPI) {
     const originalSetToolsExpanded = interactiveModePrototype.setToolsExpanded;
     const patchedSetToolsExpanded = function (this: any, expanded: boolean) {
       cleanToolsExpanded = expanded;
-      return originalSetToolsExpanded.call(this, expanded);
+      changingAllToolsExpansion = true;
+      if (!expanded) cleanCompactToolCallIds.clear();
+      try {
+        return originalSetToolsExpanded.call(this, expanded);
+      } finally {
+        changingAllToolsExpansion = false;
+      }
     };
 
     interactiveModePrototype[toolsExpansionPatchKey] = {
@@ -472,6 +655,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     count: number;
     failed: number;
     lastToolCallId: string;
+    toolCallIds?: string[];
     activity?: string;
   };
   type ToolSummaryData = {
@@ -503,6 +687,8 @@ export default function prettyTui(pi: ExtensionAPI) {
     requestRender?: () => void;
     count: number;
     failed: number;
+    currentToolCallIds: string[];
+    activeToolCallIds: Set<string>;
     groups: ToolSummaryGroup[];
     active: boolean;
     settled: boolean;
@@ -510,6 +696,8 @@ export default function prettyTui(pi: ExtensionAPI) {
   const cleanRun: CleanRunState = {
     count: 0,
     failed: 0,
+    currentToolCallIds: [],
+    activeToolCallIds: new Set(),
     groups: [],
     active: false,
     settled: false,
@@ -596,6 +784,9 @@ export default function prettyTui(pi: ExtensionAPI) {
     return () => heldActivity(hold);
   };
 
+  const liveCleanToolCount = (): number =>
+    Math.max(cleanRun.count, cleanRun.currentToolCallIds.length);
+
   const currentCleanActivity = (): string => {
     if (cleanRun.activeToolCallId) {
       return cleanRun.activeToolName ?? cleanRun.activity ?? "thinking...";
@@ -616,10 +807,23 @@ export default function prettyTui(pi: ExtensionAPI) {
   const toolExecutionPatchKey = Symbol.for("pretty-tui.clean-tool-execution");
   if (!toolExecutionPrototype[toolExecutionPatchKey]) {
     const originalMarkExecutionStarted = toolExecutionPrototype.markExecutionStarted;
+    const originalSetExpanded = toolExecutionPrototype.setExpanded;
     const originalToolRender = toolExecutionPrototype.render;
+    const originalToolHandleMouse = toolExecutionPrototype.handleMouse;
     const renderedModeKey = Symbol("pretty-tui.tool-rendered-mode");
+    const revealCleanGroup = (groupToolCallIds: string[], ui?: any) => {
+      for (const toolCallId of groupToolCallIds) cleanCompactToolCallIds.add(toolCallId);
+      for (const toolCallId of groupToolCallIds) cleanToolComponents.get(toolCallId)?.updateDisplay();
+      ui?.requestRender?.();
+    };
     const patchedMarkExecutionStarted = function (this: any) {
       if (supportedTools.has(this.toolName)) {
+        if (!cleanRun.currentToolCallIds.includes(this.toolCallId)) {
+          cleanRun.currentToolCallIds.push(this.toolCallId);
+        }
+        cleanRun.activeToolCallIds.add(this.toolCallId);
+        cleanToolNames.set(this.toolCallId, toolDisplayName(this.toolName));
+        setCleanGroupMembers(this.toolCallId, cleanRun.currentToolCallIds.slice());
         if (typeof this.ui?.requestRender === "function") {
           cleanRun.requestRender = () => this.ui.requestRender();
         }
@@ -629,22 +833,127 @@ export default function prettyTui(pi: ExtensionAPI) {
       }
       return originalMarkExecutionStarted.call(this);
     };
+    const patchedSetExpanded = function (this: any, expanded: boolean) {
+      const groupToolCallIds = cleanGroupToolCallIds.get(this.toolCallId);
+      if (
+        renderMode === "clean" &&
+        !changingAllToolsExpansion &&
+        expanded &&
+        !this.expanded &&
+        !isCleanGroupRevealed(this.toolCallId) &&
+        groupToolCallIds?.length
+      ) {
+        revealCleanGroup(groupToolCallIds, this.ui);
+        return;
+      }
+      return originalSetExpanded.call(this, expanded);
+    };
     const patchedToolRender = function (this: any, width: number): string[] {
+      if (supportedTools.has(this.toolName)) {
+        cleanToolComponents.set(this.toolCallId, this);
+        knownToolCallIds.add(this.toolCallId);
+      }
       if (this[renderedModeKey] !== renderMode) {
         this[renderedModeKey] = renderMode;
         this.updateDisplay();
       }
-      return originalToolRender.call(this, width);
+
+      const groupOwner = cleanToolCallGroupOwners.get(this.toolCallId);
+      const groupToolCallIds = groupOwner ? cleanGroupToolCallIds.get(groupOwner) : undefined;
+      const childIndex = groupToolCallIds?.indexOf(this.toolCallId) ?? -1;
+      const showAsChild = renderMode === "clean" && childIndex >= 0 && isCleanGroupRevealed(this.toolCallId);
+      if (!showAsChild || !groupOwner || !groupToolCallIds) {
+        return originalToolRender.call(this, width);
+      }
+
+      const rawChildPrefix = childIndex === groupToolCallIds.length - 1 ? "  └─ " : "  ├─ ";
+      const rawContinuation = childIndex === groupToolCallIds.length - 1 ? "     " : "  │  ";
+      const childTheme = cleanThemeForToolCall(this.toolCallId);
+      const childPrefix = childTheme ? childTheme.fg("dim", rawChildPrefix) : rawChildPrefix;
+      const continuation = childTheme ? childTheme.fg("dim", rawContinuation) : rawContinuation;
+      const childWidth = Math.max(1, width - visibleWidth(rawChildPrefix));
+      const lines = originalToolRender.call(this, childWidth);
+      if (lines.length === 0) return lines;
+
+      const decoratedContent = lines.slice(1).map((line: string, index: number) =>
+        (index === 0 ? childPrefix : continuation) + line
+      );
+      if (childIndex !== 0) return decoratedContent;
+      return [lines[0], ...renderCleanGroupSummary(groupOwner, width), ...decoratedContent];
+    };
+    const patchedToolHandleMouse = function (this: any, event: any) {
+      const groupOwner = cleanToolCallGroupOwners.get(this.toolCallId);
+      const groupToolCallIds = groupOwner ? cleanGroupToolCallIds.get(groupOwner) : undefined;
+      const childIndex = groupToolCallIds?.indexOf(this.toolCallId) ?? -1;
+      const showAsChild = renderMode === "clean" && childIndex >= 0 && isCleanGroupRevealed(this.toolCallId);
+      const isLeftClick = event.type === "click" && event.button === "left";
+
+      // Pi normally ignores tool clicks until a result exists. Clean mode can
+      // still reveal the active call safely because this changes presentation
+      // only; it does not affect or delay execution.
+      if (
+        renderMode === "clean" &&
+        !showAsChild &&
+        isLeftClick &&
+        this.toolCallId === groupOwner &&
+        groupToolCallIds?.length
+      ) {
+        revealCleanGroup(groupToolCallIds, this.ui);
+        return { handled: true };
+      }
+      if (!showAsChild || !groupToolCallIds) return originalToolHandleMouse.call(this, event);
+
+      const summaryHeight = childIndex === 0 ? renderCleanGroupSummary(groupOwner!, event.width).length : 0;
+      if (
+        childIndex === 0 &&
+        event.y > 0 &&
+        event.y <= summaryHeight &&
+        isLeftClick
+      ) {
+        changingAllToolsExpansion = true;
+        try {
+          for (const toolCallId of groupToolCallIds) {
+            const component = cleanToolComponents.get(toolCallId);
+            if (component?.expanded) originalSetExpanded.call(component, false);
+            cleanCompactToolCallIds.delete(toolCallId);
+          }
+          for (const toolCallId of groupToolCallIds) cleanToolComponents.get(toolCallId)?.updateDisplay();
+        } finally {
+          changingAllToolsExpansion = false;
+        }
+        this.ui?.requestRender?.();
+        return { handled: true };
+      }
+
+      if (!this.result && isLeftClick) {
+        originalSetExpanded.call(this, !this.expanded);
+        this.ui?.requestRender?.();
+        return { handled: true };
+      }
+
+      const childPrefixWidth = visibleWidth("  ├─ ");
+      return originalToolHandleMouse.call(this, {
+        ...event,
+        x: Math.max(0, event.x - childPrefixWidth),
+        y: event.y - summaryHeight + (childIndex === 0 ? 0 : 1),
+        width: Math.max(1, event.width - childPrefixWidth),
+      });
     };
 
     toolExecutionPrototype[toolExecutionPatchKey] = {
       originalMarkExecutionStarted,
       patchedMarkExecutionStarted,
+      originalSetExpanded,
+      patchedSetExpanded,
       originalRender: originalToolRender,
       patchedRender: patchedToolRender,
+      originalHandleMouse: originalToolHandleMouse,
+      patchedHandleMouse: patchedToolHandleMouse,
     };
     toolExecutionPrototype.markExecutionStarted = patchedMarkExecutionStarted;
+    toolExecutionPrototype.setExpanded = patchedSetExpanded;
     toolExecutionPrototype.render = patchedToolRender;
+    toolExecutionPrototype.handleMouse = patchedToolHandleMouse;
 
     pi.on("session_shutdown", () => {
       const patch = toolExecutionPrototype[toolExecutionPatchKey];
@@ -652,12 +961,20 @@ export default function prettyTui(pi: ExtensionAPI) {
       if (patch.patchedMarkExecutionStarted === toolExecutionPrototype.markExecutionStarted) {
         toolExecutionPrototype.markExecutionStarted = patch.originalMarkExecutionStarted;
       }
+      if (patch.patchedSetExpanded === toolExecutionPrototype.setExpanded) {
+        toolExecutionPrototype.setExpanded = patch.originalSetExpanded;
+      }
       if (patch.patchedRender === toolExecutionPrototype.render) {
         toolExecutionPrototype.render = patch.originalRender;
       }
+      if (patch.patchedHandleMouse === toolExecutionPrototype.handleMouse) {
+        toolExecutionPrototype.handleMouse = patch.originalHandleMouse;
+      }
       if (
         toolExecutionPrototype.markExecutionStarted === patch.originalMarkExecutionStarted &&
-        toolExecutionPrototype.render === patch.originalRender
+        toolExecutionPrototype.setExpanded === patch.originalSetExpanded &&
+        toolExecutionPrototype.render === patch.originalRender &&
+        toolExecutionPrototype.handleMouse === patch.originalHandleMouse
       ) {
         delete toolExecutionPrototype[toolExecutionPatchKey];
       }
@@ -670,6 +987,7 @@ export default function prettyTui(pi: ExtensionAPI) {
         count: cleanRun.count,
         failed: cleanRun.failed,
         lastToolCallId: cleanRun.lastCompletedToolCallId,
+        toolCallIds: cleanRun.currentToolCallIds.slice(),
         activity,
       };
       cleanRun.groups.push(group);
@@ -678,9 +996,12 @@ export default function prettyTui(pi: ExtensionAPI) {
         failed: group.failed,
         activity: activityValueForHold(group.lastToolCallId, activity),
       });
+      setCleanGroupMembers(group.lastToolCallId, group.toolCallIds ?? []);
     }
     cleanRun.count = 0;
     cleanRun.failed = 0;
+    cleanRun.currentToolCallIds = [];
+    cleanRun.activeToolCallIds.clear();
     cleanRun.lastCompletedToolCallId = undefined;
     cleanRun.activeToolCallId = undefined;
     cleanRun.activeToolName = undefined;
@@ -728,6 +1049,27 @@ export default function prettyTui(pi: ExtensionAPI) {
     },
   });
 
+  renderCleanGroupSummary = (lastToolCallId: string, width: number): string[] => {
+    const summaryTheme = cleanThemeForToolCall(lastToolCallId);
+    if (!summaryTheme) return [];
+    const settled = settledSummaries.get(lastToolCallId);
+    if (settled) {
+      return block([summaryRow(summaryTheme, settled.count, settled.failed, settled.activity)]).render(width);
+    }
+    if (cleanRun.activeToolCallId === lastToolCallId) {
+      return block([summaryRow(
+        summaryTheme,
+        liveCleanToolCount(),
+        cleanRun.failed,
+        () => cleanRun.activeToolName ?? currentCleanActivity(),
+      )]).render(width);
+    }
+    if (cleanRun.lastCompletedToolCallId === lastToolCallId && cleanRun.count > 0) {
+      return block([summaryRow(summaryTheme, cleanRun.count, cleanRun.failed, currentCleanActivity)]).render(width);
+    }
+    return [];
+  };
+
   /**
    * Clean mode keeps Running/Done rows in the existing tool components. This
    * avoids waiting for agent_end (which can be followed by retry/compaction),
@@ -735,6 +1077,7 @@ export default function prettyTui(pi: ExtensionAPI) {
    */
   const cleanToolCall = (theme: any, name: string, toolCallId: string): Component => {
     knownToolCallIds.add(toolCallId);
+    cleanToolThemes.set(toolCallId, theme);
     return {
       render(width: number): string[] {
         if (renderMode !== "clean") return [];
@@ -748,7 +1091,7 @@ export default function prettyTui(pi: ExtensionAPI) {
         if (cleanRun.activeToolCallId === toolCallId) {
           return block([summaryRow(
             theme,
-            cleanRun.count + 1,
+            liveCleanToolCount(),
             cleanRun.failed,
             () => cleanRun.activeToolName ?? name,
           )]).render(width);
@@ -783,10 +1126,16 @@ export default function prettyTui(pi: ExtensionAPI) {
   // In collapsed clean mode, every supported tool call is represented by its
   // Running row. Ctrl+O bypasses this and restores the normal full renderer.
   const hideCleanTool = (
-    _toolCallId: string,
+    toolCallId: string,
     expanded: boolean,
     _executionStarted = false,
-  ): boolean => renderMode === "clean" && !expanded;
+  ): boolean => renderMode === "clean" && !expanded && !isCleanGroupRevealed(toolCallId);
+
+  const useCompactToolView = (toolCallId: string, expanded: boolean): boolean =>
+    !expanded && (
+      renderMode === "compact" ||
+      (renderMode === "clean" && isCleanGroupRevealed(toolCallId))
+    );
 
   pi.registerEntryRenderer<ToolSummaryData>("pretty-tui-tool-summary", (entry, { expanded }, theme) => ({
     render(width: number): string[] {
@@ -825,14 +1174,33 @@ export default function prettyTui(pi: ExtensionAPI) {
     invalidate() {},
   }));
 
-  pi.on("session_start", (_event, ctx) => {
+  const messageContentItems = (message: any): any[] =>
+    Array.isArray(message?.content) ? message.content : [];
+
+  const messageHasVisibleText = (message: any): boolean =>
+    typeof message?.content === "string"
+      ? message.content.trim().length > 0
+      : messageContentItems(message).some(
+          (item: any) => item.type === "text" && typeof item.text === "string" && item.text.trim().length > 0,
+        );
+
+  const restoreCleanSession = (ctx: any) => {
     cleanToolsExpanded = ctx.ui.getToolsExpanded();
     settledSummaries.clear();
     legacySummaryLastToolCallIds.clear();
+    knownToolCallIds.clear();
+    cleanCompactToolCallIds.clear();
+    cleanGroupToolCallIds.clear();
+    cleanToolCallGroupOwners.clear();
+    cleanToolComponents.clear();
+    cleanToolThemes.clear();
+    cleanToolNames.clear();
     clearToolActivityHolds();
     cleanRun.requestRender = undefined;
     cleanRun.count = 0;
     cleanRun.failed = 0;
+    cleanRun.currentToolCallIds = [];
+    cleanRun.activeToolCallIds.clear();
     cleanRun.groups = [];
     cleanRun.activeToolCallId = undefined;
     cleanRun.activeToolName = undefined;
@@ -854,13 +1222,17 @@ export default function prettyTui(pi: ExtensionAPI) {
         failed: group.failed,
         activity: "done",
       });
+      if (group.toolCallIds?.length) {
+        setCleanGroupMembers(group.lastToolCallId, group.toolCallIds.slice());
+      }
       if (entryId) legacySummaryLastToolCallIds.set(entryId, group.lastToolCallId);
       explicitSummaryIds.add(group.lastToolCallId);
     };
 
     const finishGroup = () => {
       if (lastToolCallId && count > 0) {
-        lastFinishedGroup = { count, failed, lastToolCallId };
+        lastFinishedGroup = { count, failed, lastToolCallId, toolCallIds: [...toolCalls] };
+        setCleanGroupMembers(lastToolCallId, [...toolCalls]);
         if (!explicitSummaryIds.has(lastToolCallId)) {
           settledSummaries.set(lastToolCallId, { count, failed, activity: "done" });
         }
@@ -916,11 +1288,8 @@ export default function prettyTui(pi: ExtensionAPI) {
       }
 
       if (message.role === "assistant") {
-        const hasVisibleText = (message.content ?? []).some(
-          (item: any) => item.type === "text" && typeof item.text === "string" && item.text.trim().length > 0,
-        );
-        if (hasVisibleText) finishGroup();
-        for (const item of message.content ?? []) {
+        if (messageHasVisibleText(message)) finishGroup();
+        for (const item of messageContentItems(message)) {
           if (item.type !== "toolCall" || !supportedTools.has(item.name)) continue;
           count++;
           lastToolCallId = item.id;
@@ -935,21 +1304,37 @@ export default function prettyTui(pi: ExtensionAPI) {
     }
 
     finishGroup();
+  };
+
+  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();
   });
 
   const hasVisibleAssistantText = (message: any): boolean =>
-    message?.role === "assistant" && (message.content ?? []).some(
-      (item: any) => item.type === "text" && typeof item.text === "string" && item.text.trim().length > 0,
-    );
+    message?.role === "assistant" && messageHasVisibleText(message);
 
-  const latestPendingToolCall = (message: any): any =>
-    [...(message?.content ?? [])].reverse().find(
+  const pendingToolCalls = (message: any): any[] =>
+    messageContentItems(message).filter(
       (item: any) => item.type === "toolCall" && supportedTools.has(item.name) && item.id,
     );
 
   const trackPendingToolActivity = (message: any): boolean => {
-    const toolCall = latestPendingToolCall(message);
-    if (!toolCall || cleanRun.lastCompletedToolCallId === toolCall.id) return false;
+    const toolCalls = pendingToolCalls(message);
+    if (toolCalls.length === 0) return false;
+    for (const toolCall of toolCalls) {
+      if (!cleanRun.currentToolCallIds.includes(toolCall.id)) {
+        cleanRun.currentToolCallIds.push(toolCall.id);
+      }
+      cleanToolNames.set(toolCall.id, toolDisplayName(toolCall.name));
+    }
+    const toolCall = toolCalls[toolCalls.length - 1];
+    if (cleanRun.lastCompletedToolCallId === toolCall.id) return false;
+    setCleanGroupMembers(toolCall.id, cleanRun.currentToolCallIds.slice());
     cleanRun.active = true;
     cleanRun.activeToolCallId = toolCall.id;
     beginToolActivity(toolCall.id, toolDisplayName(toolCall.name));
@@ -996,17 +1381,26 @@ export default function prettyTui(pi: ExtensionAPI) {
       clearToolActivityHolds();
       cleanRun.count = 0;
       cleanRun.failed = 0;
+      cleanRun.currentToolCallIds = [];
+      cleanRun.activeToolCallIds.clear();
       cleanRun.groups = [];
       cleanRun.lastCompletedToolCallId = undefined;
       cleanRun.settled = false;
     }
     cleanRun.active = true;
+    cleanRun.activeToolCallIds.clear();
     cleanRun.activeToolCallId = undefined;
     cleanRun.activeToolName = undefined;
     cleanRun.activity = "thinking...";
   });
   pi.on("tool_execution_start", (event) => {
     if (!supportedTools.has(event.toolName)) return;
+    if (!cleanRun.currentToolCallIds.includes(event.toolCallId)) {
+      cleanRun.currentToolCallIds.push(event.toolCallId);
+    }
+    cleanRun.activeToolCallIds.add(event.toolCallId);
+    cleanToolNames.set(event.toolCallId, toolDisplayName(event.toolName));
+    setCleanGroupMembers(event.toolCallId, cleanRun.currentToolCallIds.slice());
     cleanRun.active = true;
     cleanRun.activeToolCallId = event.toolCallId;
     beginToolActivity(event.toolCallId, toolDisplayName(event.toolName), true);
@@ -1022,16 +1416,24 @@ export default function prettyTui(pi: ExtensionAPI) {
     cleanRun.count++;
     if (event.isError) cleanRun.failed++;
     cleanRun.lastCompletedToolCallId = event.toolCallId;
+    cleanRun.activeToolCallIds.delete(event.toolCallId);
     if (cleanRun.activeToolCallId === event.toolCallId) {
-      cleanRun.activeToolCallId = undefined;
-      cleanRun.activeToolName = undefined;
-      cleanRun.activity = "thinking...";
+      cleanRun.activeToolCallId = [...cleanRun.currentToolCallIds]
+        .reverse()
+        .find((toolCallId) => cleanRun.activeToolCallIds.has(toolCallId));
+      cleanRun.activeToolName = cleanRun.activeToolCallId
+        ? cleanToolNames.get(cleanRun.activeToolCallId)
+        : undefined;
+      cleanRun.activity = cleanRun.activeToolName ?? "thinking...";
     }
+    const visibleSummaryToolCallId = cleanRun.activeToolCallId ?? cleanRun.lastCompletedToolCallId;
+    setCleanGroupMembers(visibleSummaryToolCallId, cleanRun.currentToolCallIds.slice());
   });
   pi.on("agent_end", () => {
     // No summary is appended here: this event may be followed by an automatic
     // retry or compaction. The live row remains available until settled.
     clearPendingToolActivities();
+    cleanRun.activeToolCallIds.clear();
     cleanRun.activeToolCallId = undefined;
     cleanRun.activeToolName = undefined;
     cleanRun.activity = "thinking...";
@@ -1051,6 +1453,7 @@ export default function prettyTui(pi: ExtensionAPI) {
       });
     }
     cleanRun.active = false;
+    cleanRun.activeToolCallIds.clear();
     cleanRun.activeToolCallId = undefined;
     cleanRun.activeToolName = undefined;
     cleanRun.activity = "done";
@@ -1066,7 +1469,12 @@ export default function prettyTui(pi: ExtensionAPI) {
       count,
       failed,
       lastToolCallId,
-      groups: groups.map(({ count, failed, lastToolCallId }) => ({ count, failed, lastToolCallId })),
+      groups: groups.map(({ count, failed, lastToolCallId, toolCallIds }) => ({
+        count,
+        failed,
+        lastToolCallId,
+        toolCallIds,
+      })),
     });
   });
 
@@ -1107,7 +1515,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     renderCall(args: any, theme: any, context: any) {
       if (hideCleanTool(context.toolCallId, context.expanded, context.executionStarted)) return cleanToolCall(theme, "Bash", context.toolCallId);
       const command = typeof args.command === "string" ? args.command : "";
-      if (renderMode === "compact" && !context.expanded) {
+      if (useCompactToolView(context.toolCallId, context.expanded)) {
         const commandLines = command.split(/\r\n|\r|\n/);
         const firstLine = commandLines[0] ?? "";
         const omitted = commandLines.length - 1;
@@ -1121,7 +1529,7 @@ export default function prettyTui(pi: ExtensionAPI) {
     renderResult(toolResult: any, options: any, theme: any, context: any) {
       const output = textContent(toolResult);
       if (hideCleanTool(context.toolCallId, options.expanded, context.executionStarted)) return hiddenToolResult(context, options, output);
-      if (renderMode === "compact" && !options.expanded) {
+      if (useCompactToolView(context.toolCallId, options.expanded)) {
         if (options.isPartial) return partialResult(context, theme, "Running…");
         const failed = completeStatus(context, output);
         return result(theme, failed ? "Command failed" : "Done", "", false, failed);
@@ -1199,7 +1607,7 @@ export default function prettyTui(pi: ExtensionAPI) {
       if (hideCleanTool(context.toolCallId, context.expanded, context.executionStarted)) return cleanToolCall(theme, "Write", context.toolCallId);
       const content = typeof args.content === "string" ? args.content : "";
       const path = String(args.path ?? "");
-      if (renderMode === "compact" && !context.expanded) {
+      if (useCompactToolView(context.toolCallId, context.expanded)) {
         const lines = content.replace(/\t/g, "    ").split("\n");
         while (lines.length > 0 && lines[lines.length - 1] === "") lines.pop();
         const total = lines.length;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pi-pretty-tui",
-  "version": "0.1.4",
-  "description": "Polished tool calls and list rendering for the Pi coding agent TUI",
+  "version": "0.1.6",
+  "description": "Polished user messages, tool calls, and list rendering for the Pi coding agent TUI",
   "license": "MIT",
   "author": "Kainan Yang <ykn0309@whu.edu.cn>",
   "type": "module",
@@ -40,6 +40,6 @@
     "extensions": [
       "./extensions/index.ts"
     ],
-    "image": "https://unpkg.com/pi-pretty-tui@0.1.4/assets/screenshot.png"
+    "image": "https://unpkg.com/pi-pretty-tui@0.1.6/assets/screenshot.png"
   }
 }