@pi-kaush/pi-tool-call-markers 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## 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
+  (`1. 🐝 [workhorse][bee] …`). Single-call headings are now scraped too, so
+  agent emojis appear on single rows, not just chain/parallel steps.
+
 - Color collapsed rows (tool calls, `+ Thought`, subagents) from the
   theme's `syntaxComment` token — which ships with every theme — instead of
   the louder muted/toolTitle/toolOutput split. The bolded tool name and the

package/README.md

@@ -34,19 +34,19 @@ Collapsed tool rows use semantic theme colors with no gear, background fill, box
 
 ## Subagent plans
 
-A recognized `subagent` call renders as an unboxed plan in the shared tool aesthetic, marked with `&` instead of the ordinary `%` tool marker:
+A recognized `subagent` call renders as an unboxed plan in the shared tool aesthetic, marked with `↪` instead of the ordinary `%` tool marker:
 
 ```text
-  & subagent chain (3 steps) [repo-review]
+  ↪ subagent chain (3 steps) [repo-review]
     1. 🐝 bee [workhorse] Challenge the compatibility conclusion…
     2. 🐝 bee …
 ```
 
-Single calls stay on one `& subagent <agent> [profile] <task preview>` row; chain calls get a heading with the kind, count, and scope followed by numbered steps (parallel tasks list without numbers). Agent display names (emoji + name) are scraped from the native plan component with an args fallback, and render in `accent`; everything else stays muted, and failed subagents go full red. Subagents never join ordinary tool groups.
+Single calls stay on one `↪ [<emoji>] [<profile>][<agent>] <task preview>` row — no tool label; the `↪` marker identifies it. Chain calls get a heading with the kind, count, and scope followed by numbered steps (parallel tasks list without numbers), with each step ordered emoji, profile badge, name badge. Agent display names (emoji + name) are scraped from the native plan component — including the single-call heading — with an args fallback, and render in `accent`; everything else stays muted, and failed subagents go full red. Subagents never join ordinary tool groups.
 
 While a subagent runs, the plan headline's tail shows live progress from the streamed result details — `→ 1 turn · provider/model` in the warning tone — and a settled call keeps the same `→ N turns · provider/model` summary in muted (turns aggregate across tasks; the model shows only when every task used the same one).
 
-Malformed, ambiguous, future, or too-narrow shapes fall back to the generic `& subagent …` collapsed row rather than dropping information, and `Ctrl+O` still exposes the native subagent renderer.
+Malformed, ambiguous, future, or too-narrow shapes fall back to the generic `↪ subagent …` collapsed row rather than dropping information, and `Ctrl+O` still exposes the native subagent renderer.
 
 ## Edit diffs
 

package/package.json

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

package/src/index.ts

@@ -20,7 +20,7 @@ import { fgCollapsed } from "./muted.ts";
 
 const OUTER_INSET = 2;
 const GROUP_MARKER = "%";
-const SUBAGENT_MARKER = "&";
+const SUBAGENT_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 +64,8 @@ type ToolExecutionRow = {
   imageSpacers?: unknown[];
   getRenderShell?(): "default" | "self";
   getTextOutput?(): string;
+  setExpanded?(expanded: boolean): void;
+  handleMouse?(event: unknown): unknown;
 };
 
 type PresentationPatchState = {
@@ -76,8 +78,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 +94,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;
@@ -1028,6 +1036,19 @@ function parseStepContent(content: string): {
   };
 }
 
+// Splits a scraped "emoji name" display into its emoji prefix and bare name;
+// plain names pass through with no emoji.
+function splitEmojiName(
+  displayName: string,
+  bareName: string,
+): { emoji: string; name: string } {
+  const tokens = displayName.trim().split(/\s+/).filter(Boolean);
+  if (tokens.length > 1 && tokens[tokens.length - 1] === bareName) {
+    return { emoji: tokens.slice(0, -1).join(" "), name: bareName };
+  }
+  return { emoji: "", name: bareName };
+}
+
 // Agent display names (emoji + name) come from the subagent extension's own
 // call component when available; args only carry the bare agent name.
 function scrapeSubagentDisplayNames(
@@ -1042,10 +1063,16 @@ function scrapeSubagentDisplayNames(
   try {
     for (const raw of component.render(120)) {
       const line = sanitizeInline(stripAnsi(raw)).trim();
-      if (!line || /^subagent\b/.test(line)) continue;
-      const { displayName, bareName } = parseStepContent(
-        line.replace(/^\d+\.\s*/, ""),
-      );
+      if (!line) continue;
+      // Single calls carry the agent name on their "subagent <name>" heading
+      // line; stripping the heading word (and step numbers) lets both shapes
+      // flow through the same parse. Heading remainders without an emoji
+      // (e.g. "chain (2 steps)") degrade to displayName === bareName and are
+      // skipped by the guard below.
+      const content = line
+        .replace(/^subagent\b\s*/, "")
+        .replace(/^\d+\.\s*/, "");
+      const { displayName, bareName } = parseStepContent(content);
       if (displayName && bareName && displayName !== bareName) {
         names.set(bareName, displayName);
       }
@@ -1091,10 +1118,11 @@ function subagentProgressText(row: ToolExecutionRow): string | undefined {
   return parts.length > 0 ? parts.join(" · ") : undefined;
 }
 
-// Subagents render as an ordinary unboxed tool block: a `%` heading with the
+// Subagents render as an ordinary unboxed tool block: a `↪` heading with the
 // plan kind/count/scope, then the numbered chain steps or parallel tasks with
-// agent names in accent. Everything else stays muted (or error on failure),
-// matching the shared tool-row aesthetic.
+// agent identities (emoji, profile badge, name badge) in accent. Single calls
+// collapse to one row: `↪ <emoji> [<profile>][<name>] <task preview>`. Everything
+// else stays muted (or error on failure), matching the shared tool-row aesthetic.
 function renderSubagentPlan(
   row: ToolExecutionRow,
   width: number,
@@ -1110,19 +1138,21 @@ function renderSubagentPlan(
   const displayNames = scrapeSubagentDisplayNames(row);
   // Agent/profile/task values are model-supplied; sanitize them like every
   // other collapsed-row text so control bytes cannot reach the terminal.
-  const displayOf = (agent: string) =>
-    fgCollapsed(
-      theme,
-      nameColor,
-      displayNames.get(agent) ?? sanitizeInline(agent),
-    );
+  // Identity order: emoji, then the profile and agent-name badges.
+  const identityOf = (step: SubagentStep) => {
+    const displayName =
+      displayNames.get(step.agent) ?? sanitizeInline(step.agent);
+    const { emoji, name } = splitEmojiName(displayName, step.agent);
+    const accentPart = (text: string) => fgCollapsed(theme, nameColor, text);
+    const emojiPart = emoji ? `${accentPart(emoji)} ` : "";
+    const profilePart = step.profile
+      ? accentPart(`[${sanitizeInline(step.profile)}]`)
+      : "";
+    return `${emojiPart}${profilePart}${accentPart(`[${sanitizeInline(name)}]`)}`;
+  };
   const detailColor = failed ? "error" : "toolOutput";
-  const detailOf = (step: SubagentStep) =>
-    fgCollapsed(
-      theme,
-      detailColor,
-      `${step.profile ? ` [${sanitizeInline(step.profile)}]` : ""} ${subagentStepPreview(step.task)}`,
-    );
+  const previewOf = (step: SubagentStep) =>
+    fgCollapsed(theme, detailColor, ` ${subagentStepPreview(step.task)}`);
 
   const marker = `${fgCollapsed(theme, color, SUBAGENT_MARKER, true)} `;
   const budget = Math.max(1, width - visibleWidth(marker));
@@ -1146,14 +1176,7 @@ function renderSubagentPlan(
 
   if (plan.kind === "single") {
     const step = plan.steps[0]!;
-    return [
-      headline(
-        fgCollapsed(theme, failed ? "error" : "toolTitle", "subagent", true) +
-          " " +
-          displayOf(step.agent) +
-          detailOf(step),
-      ),
-    ];
+    return [headline(identityOf(step) + previewOf(step))];
   }
 
   const kindLabel =
@@ -1175,7 +1198,7 @@ function renderSubagentPlan(
       plan.kind === "chain"
         ? `${fgCollapsed(theme, color, `${index + 1}.`)} `
         : "";
-    lines.push(`  ${number}${displayOf(step.agent)}${detailOf(step)}`);
+    lines.push(`  ${number}${identityOf(step)}${previewOf(step)}`);
   }
   if (plan.steps.length > shown.length) {
     lines.push(
@@ -1263,10 +1286,11 @@ 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) {
       lines.push(
@@ -1289,8 +1313,9 @@ function renderGroupedCallLines(
     );
     if (row.toolName === "edit")
       lines.push(...renderedEditDiffLines(row, theme));
+    segments.push({ row, lines });
   }
-  return lines;
+  return segments;
 }
 
 function sameMembers(
@@ -1316,14 +1341,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);
@@ -1335,32 +1370,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);
@@ -1376,7 +1431,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;
     }
 
@@ -1411,7 +1468,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;
     }
 
@@ -1419,11 +1478,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.
@@ -1468,11 +1529,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 {
@@ -1559,6 +1629,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,
@@ -1665,6 +1763,7 @@ function uninstallPresentationPatch(
       [PRESENTATION_PATCHED]?: PresentationPatchState;
       render?: (width: number) => string[];
       updateDisplay?: () => void;
+      handleMouse?: (event: unknown) => unknown;
     };
   if (
     proto[PRESENTATION_PATCHED] !== state ||
@@ -1675,6 +1774,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];
 }