@pi-kaush/pi-tool-call-markers 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+- Restore Pi 0.85's click-to-expand under the custom collapsed rows. Pi routes
+  mouse clicks by per-child rendered line heights, and the grouping render
+  bypassed the native render that refreshes that cache, so clicks on anything
+  drawn after the first tool call landed nowhere (or one line off after a
+  resize). The grouped render now publishes the drawn accounting, and a
+  collapsed tool row toggles expansion on left-click like Pi's native result
+  region.
+
 - Restyle subagent rows: the subagent marker is now `↪` (was `&`), and single
   calls drop the `subagent` tool label — `↪ 🤖 [coder][c3po] Implement the…` —
   with chain/parallel step lines reordered to emoji, profile badge, name badge

package/README.md

@@ -16,13 +16,16 @@ Collapsed tool rows use semantic theme colors with no gear, background fill, box
 
 ```text
   % Read
-    • src/a.ts                         42 lines
-    • src/b.ts                         18 lines
+    │ src/a.ts                         42 lines
+    │ src/b.ts                         18 lines
+
+  % Bash
+    │ $: npm test → done
 ```
 
 - **Two-column outer inset.** Tool markers and image output align with an inset conversation surface. Very narrow terminals reduce the decoration before useful content.
-- **`%` tool headings.** A singleton stays on one line when its summary and outcome fit. A multi-call group has one `%` heading per contiguous tool type.
-- **`•` grouped children.** Bullets appear only for members of a multi-call group.
+- **`%` tool headings.** A singleton stays on one line when its summary and outcome fit. A multi-call group has one `%` heading per contiguous tool type, with a blank line before each subsequent heading.
+- **`│` grouped children.** A vertical rail — fainter than the call text — spans the members of a multi-call group; singletons carry no rail.
 - **Semantic, low-contrast status.** Tool names are emphasized, summaries and settled metadata are muted, pending state is warning-colored, and failures remain error-colored. Ordinary tool states have no background.
 - **Width-safe outcome tails.** Long summaries truncate before useful tails such as `→ done`, `→ 42 lines`, `→ +2/-1`, or a `bash` duration.
 - **Stable running groups.** Adjacent calls group as they appear. Pending state and elapsed `bash` time settle into the final outcome without changing the row count.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pi-kaush/pi-tool-call-markers",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Compact and group Pi tool calls, with a bundled extension for adjacent thinking blocks.",
   "license": "MIT",
   "author": "Kaushik Gopal",

package/src/index.ts

@@ -16,11 +16,12 @@ import {
 } from "./bash-block.ts";
 import { runChatContainerHooks } from "./container-hooks.ts";
 import { installInfoVisibility } from "./info-visibility.ts";
-import { fgCollapsed } from "./muted.ts";
+import { fgCollapsed, fgCollapsedRail } from "./muted.ts";
 
 const OUTER_INSET = 2;
 const GROUP_MARKER = "%";
 const SUBAGENT_MARKER = "↪";
+const GROUP_CALL_MARKER = "│";
 const PRESENTATION_PATCHED = Symbol.for("kg.pi.toolPresentation.v3");
 const LEGACY_PRESENTATION_PATCHED = Symbol.for("kg.pi.toolPresentation.v2");
 const GROUPING_PATCHED = Symbol.for("kg.pi.toolGrouping.v1");
@@ -64,6 +65,8 @@ type ToolExecutionRow = {
   imageSpacers?: unknown[];
   getRenderShell?(): "default" | "self";
   getTextOutput?(): string;
+  setExpanded?(expanded: boolean): void;
+  handleMouse?(event: unknown): unknown;
 };
 
 type PresentationPatchState = {
@@ -76,8 +79,10 @@ type PresentationPatchState = {
   rowGroups: WeakMap<ToolExecutionRow, ToolExecutionRow[]>;
   originalRender: (width: number) => string[];
   originalUpdateDisplay: () => void;
+  originalHandleMouse?: (this: ToolExecutionRow, event: unknown) => unknown;
   patchedRender?: (width: number) => string[];
   patchedUpdateDisplay?: () => void;
+  patchedHandleMouse?: (this: ToolExecutionRow, event: unknown) => unknown;
 };
 
 type GroupingPatchState = {
@@ -90,6 +95,10 @@ type GroupingPatchState = {
 
 type GroupRenderCache = {
   lines: string[];
+  // Per-member click-routing accounting for the group block: the first
+  // member absorbs the leading blank and the tool-name header, later
+  // members carry their own line (plus edit diffs).
+  heights: Array<{ component: ToolExecutionRow; height: number }>;
   members: ToolExecutionRow[];
   memberVersions: number[];
   themeSample: string;
@@ -1278,12 +1287,18 @@ function renderGroupedCallLines(
   rows: ToolExecutionRow[],
   width: number,
   theme: ThemeLike,
-): string[] {
-  const lines: string[] = [];
+): Array<{ row: ToolExecutionRow; lines: string[] }> {
+  const segments: Array<{ row: ToolExecutionRow; lines: string[] }> = [];
   let previousToolName: string | undefined;
   for (const row of rows) {
+    const lines: string[] = [];
     const toolName = row.toolName ?? "tool";
     if (toolName !== previousToolName) {
+      // One blank line between tool-name subgroups, mirroring the block's
+      // leading blank so each `%` heading starts its own visual run. The
+      // blank belongs to the new run's first row, keeping the per-member
+      // click-routing heights aligned with the drawn lines.
+      if (previousToolName !== undefined) lines.push("");
       lines.push(
         `${fgCollapsed(theme, "muted", GROUP_MARKER)} ${fgCollapsed(theme, "toolTitle", toolName, true)}`,
       );
@@ -1291,7 +1306,7 @@ function renderGroupedCallLines(
     }
 
     const color = rowHasFailed(row) ? "error" : "muted";
-    const prefix = `  ${fgCollapsed(theme, color, "•")} `;
+    const prefix = `  ${fgCollapsedRail(theme, color, GROUP_CALL_MARKER)} `;
     const budget = Math.max(1, width - visibleWidth(prefix));
     const label = groupedChildLabel(row, budget, theme, color);
     const outcome = collapsedOutcome(row, budget, theme);
@@ -1304,8 +1319,9 @@ function renderGroupedCallLines(
     );
     if (row.toolName === "edit")
       lines.push(...renderedEditDiffLines(row, theme));
+    segments.push({ row, lines });
   }
-  return lines;
+  return segments;
 }
 
 function sameMembers(
@@ -1331,14 +1347,24 @@ function sameMemberVersions(
   );
 }
 
+type GroupBlock = {
+  lines: string[];
+  // Click-routing accounting aligned with `lines`: one entry per drawn row
+  // segment, so mouse events land on the member that owns the line.
+  heights: Array<{ component: ToolExecutionRow; height: number }>;
+};
+
 function renderGroupedToolRows(
   row: ToolExecutionRow,
   rows: ToolExecutionRow[],
   width: number,
   state: PresentationPatchState,
-): string[] {
+): GroupBlock {
   const theme = state.theme;
-  if (!theme) return state.originalRender.call(row, width);
+  if (!theme) {
+    const lines = state.originalRender.call(row, width);
+    return { lines, heights: [{ component: row, height: lines.length }] };
+  }
   const themeSample = themeSampleFor(theme);
   const cached = state.groupCache.get(row);
   const hasLiveMembers = rows.some(isLiveRow);
@@ -1350,32 +1376,52 @@ function renderGroupedToolRows(
     sameMembers(cached.members, rows) &&
     sameMemberVersions(rows, cached.memberVersions, state)
   ) {
-    return cached.lines;
+    return { lines: cached.lines, heights: cached.heights };
   }
 
   const layout = insetLayout(width);
-  const body = renderGroupedCallLines(rows, layout.contentWidth, theme);
-  const lines = ["", ...insetLines(body, width)];
+  const segments = renderGroupedCallLines(rows, layout.contentWidth, theme);
+  const lines = [
+    "",
+    ...insetLines(
+      segments.flatMap((s) => s.lines),
+      width,
+    ),
+  ];
+  // The leading blank and the first segment (tool-name header + call line)
+  // both belong to the first member; every later member owns its lines.
+  const heights = segments.map((segment, index) => ({
+    component: segment.row,
+    height: index === 0 ? segment.lines.length + 1 : segment.lines.length,
+  }));
   if (hasLiveMembers) {
     state.groupCache.delete(row);
   } else {
     state.groupCache.set(row, {
       lines,
+      heights,
       members: [...rows],
       memberVersions: rows.map((member) => state.rowVersions.get(member) ?? 0),
       themeSample,
       width,
     });
   }
-  return lines;
+  return { lines, heights };
 }
 
+type ContainerRender = {
+  lines: string[];
+  // Click-routing accounting aligned with `lines`.
+  heights: Array<{ component: unknown; height: number }>;
+};
+
 function renderContainerWithToolGroups(
   children: unknown[],
   width: number,
   presentation: PresentationPatchState,
-): string[] {
+): ContainerRender {
   const lines: string[] = [];
+  const heights: Array<{ component: unknown; height: number }> = [];
   const rendered = new Map<number, string[]>();
   const renderAt = (index: number): string[] => {
     const cached = rendered.get(index);
@@ -1391,7 +1437,9 @@ function renderContainerWithToolGroups(
       !isToolExecutionRow(child) ||
       !isGroupableToolRow(child, children, index, renderAt, presentation)
     ) {
-      lines.push(...renderAt(index));
+      const drawn = renderAt(index);
+      lines.push(...drawn);
+      heights.push({ component: child, height: drawn.length });
       continue;
     }
 
@@ -1426,7 +1474,9 @@ function renderContainerWithToolGroups(
     }
 
     if (group.length === 1) {
-      lines.push(...renderAt(index));
+      const drawn = renderAt(index);
+      lines.push(...drawn);
+      heights.push({ component: child, height: drawn.length });
       continue;
     }
 
@@ -1434,11 +1484,13 @@ function renderContainerWithToolGroups(
     // Use a live member while any call is pending, then the first member once
     // settled. Either way, the grouped row keeps the same number of lines.
     const shellRow = group.find(isLiveRow) ?? child;
-    lines.push(...renderGroupedToolRows(shellRow, group, width, presentation));
+    const block = renderGroupedToolRows(shellRow, group, width, presentation);
+    lines.push(...block.lines);
+    heights.push(...block.heights);
     index = lastMemberIndex;
   }
 
-  return lines;
+  return { lines, heights };
 }
 
 // TODO: Replace prototype patching with a public Pi tool/transcript rendering API when available.
@@ -1483,11 +1535,20 @@ function installGroupingPatch(
         // inset) decorate children through the shared hooks before grouping
         // rewrites the rows; delegation alone cannot reach them from here.
         restoreHooks = runChatContainerHooks(this, children, width);
-        return renderContainerWithToolGroups(
+        const drawn = renderContainerWithToolGroups(
           children,
           width,
           state.presentation,
         );
+        // The grouping path bypasses the native render that refreshes the
+        // container's mouse-layout cache. Publish the drawn accounting so
+        // click-to-expand (Pi routes by per-child line heights) keeps landing
+        // on the row that actually owns the line, including grouped members.
+        (this as { mouseLayout?: unknown }).mouseLayout = {
+          width,
+          children: drawn.heights,
+        };
+        return drawn.lines;
       } catch {
         return state.originalRender.call(this, width);
       } finally {
@@ -1574,6 +1635,34 @@ function installPresentationPatch(): PresentationPatchState | undefined {
       state.collapsedCache.delete(this);
       state.originalUpdateDisplay.call(this);
     };
+    // Pi 0.85 wraps settled tool results in a click-to-expand MouseRegion.
+    // The custom collapsed row replaces those lines with a single summary, so
+    // the region never receives the click; toggle expansion here instead.
+    let patchedHandleMouse:
+      | ((this: ToolExecutionRow, event: unknown) => unknown)
+      | undefined;
+    if (typeof proto.handleMouse === "function") {
+      state.originalHandleMouse = proto.handleMouse;
+      patchedHandleMouse = function handleMouseWithCollapsedToggle(
+        this: ToolExecutionRow,
+        event: unknown,
+      ): unknown {
+        const mouseEvent = event as { type?: unknown; button?: unknown };
+        if (
+          state.theme &&
+          this.expanded === false &&
+          !!this.result &&
+          mouseEvent?.type === "click" &&
+          mouseEvent.button === "left" &&
+          typeof this.setExpanded === "function"
+        ) {
+          this.setExpanded(true);
+          return { handled: true };
+        }
+        return state.originalHandleMouse?.call(this, event);
+      };
+      proto.handleMouse = patchedHandleMouse;
+    }
     const patchedRender = function renderWithToolPresentation(
       this: ToolExecutionRow,
       width: number,
@@ -1680,6 +1769,7 @@ function uninstallPresentationPatch(
       [PRESENTATION_PATCHED]?: PresentationPatchState;
       render?: (width: number) => string[];
       updateDisplay?: () => void;
+      handleMouse?: (event: unknown) => unknown;
     };
   if (
     proto[PRESENTATION_PATCHED] !== state ||
@@ -1690,6 +1780,16 @@ function uninstallPresentationPatch(
   }
   proto.render = state.originalRender;
   proto.updateDisplay = state.originalUpdateDisplay;
+  if (
+    state.patchedHandleMouse &&
+    proto.handleMouse === state.patchedHandleMouse
+  ) {
+    if (state.originalHandleMouse) {
+      proto.handleMouse = state.originalHandleMouse;
+    } else {
+      delete proto.handleMouse;
+    }
+  }
   delete proto[PRESENTATION_PATCHED];
 }
 

package/src/muted.ts

@@ -78,3 +78,17 @@ export function fgCollapsed(
   }
   return theme.fg(color, bold && theme.bold ? theme.bold(text) : text);
 }
+
+// Decoration rails recede further than collapsed text. No palette token is
+// guaranteed lighter than the collapsed color (e.g. catppuccin-latte's `dim`
+// resolves to the same overlay0 as syntaxComment), so apply the terminal's
+// faint attribute: it lightens toward the background on light themes and
+// darkens on dark ones. Error rails keep their full-strength semantic red.
+export function fgCollapsedRail(
+  theme: CollapsedTheme,
+  color: string,
+  text: string,
+): string {
+  const styled = fgCollapsed(theme, color, text);
+  return color === "error" ? styled : `\x1b[2m${styled}\x1b[22m`;
+}