@pi-kaush/pi-tool-call-markers 0.1.3 → 0.2.1

package/CHANGELOG.md

@@ -2,10 +2,18 @@
 
 ## Unreleased
 
+- Compose capped in-progress rows before the Box paints its background, fixing elapsed tails leaking outside the tool background and restoring the block's bottom padding.
+
+- Render in-progress calls as a single header line (elapsed time inline for `bash`) that settles into the final summary at the same height, so the transcript flows downwards without jumping.
+- Show the real duration in successful bash summaries (`→ done · 2.3s`) instead of dropping the elapsed time on completion.
+- Group adjacent calls while they are still running, so new bullets grow downward and successful settlement updates outcomes in place without upward reflow.
+- Add `PI_TOOL_CALL_MARKERS_COLLAPSE_PARALLEL`, enabled by default, to keep same-assistant-message calls individual while still grouping sequential calls across quiet turns.
+- Only invalidate grouped-render caches on real state transitions, so bash's per-second ticks and resize invalidations stop busting them.
+
 - Keep failed calls collapsed by default while retaining their native error background and Ctrl+O expansion.
 - Add compact result tails for common successful tools in singleton and grouped summaries.
 - Keep grouped bullets to one line and preserve the useful result tail on narrow terminals.
-- Merge settled calls across assistant turns when no visible prose separates them, without reopening earlier groups while a later batch is active.
+- Merge calls across assistant turns as soon as they appear when no visible prose or thinking separates them.
 - Move adjacent thinking-block merging to a separate extension entrypoint bundled in this package.
 
 ## 0.1.2

package/README.md

@@ -4,15 +4,16 @@ Collapse Pi's adjacent successful tool calls into one compact, gear-headed block
 
 ## What it changes
 
-When several tool calls of the same type succeed in a row, Pi normally renders each one as its own expanded block. This extension groups them:
+When several tool calls run in a row, Pi normally renders each one as its own expanded block. This extension groups them:
 
 - **One gear header per contiguous tool type.** A run of `read` calls shares a single `⚙️ read` header; the following `write` run gets its own `⚙️ write` header.
 - **Bulleted call summaries.** Each call in a group becomes one bullet with a short summary and, for common tools, a compact outcome such as `→ done`, `→ 42 lines`, or `→ +2/-1`.
 - **Vertical spacing between tool types.** A blank line separates one tool group from the next.
 - **One-line, width-safe summaries.** Long targets truncate before their useful outcome tail instead of wrapping into taller blocks.
-- **Tool batches settle before grouping.** A tool batch stays ungrouped while any sibling call is active. Earlier groups remain stable while a later batch runs, then visually adjacent settled calls merge across assistant turns that rendered no prose.
+- **Running calls group immediately.** Adjacent calls become bullets as they appear, and each pending marker or elapsed `bash` time updates to the final outcome in place. Successful settlement does not shrink the block, so the transcript only grows downwards.
+- **Sequential calls merge across quiet turns.** A later call joins the existing group immediately when no visible prose or thinking separates it; visible assistant content remains a hard boundary.
 - **Self-rendered tools keep their shell.** Tools that own their framing keep singleton previews intact. Grouped summaries use only their stable header instead of scraping preview or diff lines.
-- **Partial and image results stay visible.** Streaming progress and image-bearing results are not collapsed into text-only groups.
+- **Image results stay visible.** Image-bearing results are not collapsed into text-only groups. Partial text output is held back while a call runs and surfaces through the final summary.
 - **Errors stay compact and visibly failed.** A failed call keeps its own error-colored block and native collapsed detail until expanded.
 - **Ctrl+O restores full blocks.** Expanding tools (`setToolsExpanded(true)`) brings back Pi's individual full blocks, including complete error details and successful results.
 
@@ -38,6 +39,17 @@ pi \
   -e ./extensions/pi-tool-call-markers/src/thinking-block-merger.ts
 ```
 
+## Configuration
+
+Grouping calls from the same assistant message is enabled by default. Pi normally executes those calls in parallel. To keep those same-message calls as individual compact rows while continuing to group sequential calls across quiet turns, start Pi with:
+
+```fish
+set -lx PI_TOOL_CALL_MARKERS_COLLAPSE_PARALLEL 0
+pi
+```
+
+`0`, `false`, `no`, and `off` disable parallel grouping. `1`, `true`, `yes`, and `on` enable it. The value is read when the extension loads.
+
 ## Compatibility and risk
 
 The tool presentation entrypoint currently relies on **guarded, reversible prototype patches** against two Pi component classes:

package/package.json

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

package/src/index.ts

@@ -18,6 +18,7 @@ const LEGACY_PRESENTATION_PATCHED = Symbol.for("kg.pi.toolPresentation.v2");
 const GROUPING_PATCHED = Symbol.for("kg.pi.toolGrouping.v1");
 const ANSI_RE = /\u001b\[[0-9;]*m/g;
 const BOLD_ON_RE = /\u001b\[1m/g;
+const COLLAPSE_PARALLEL_ENV = "PI_TOOL_CALL_MARKERS_COLLAPSE_PARALLEL";
 
 type ThemeLike = {
   bold(text: string): string;
@@ -50,6 +51,7 @@ type ToolExecutionRow = {
     content?: Array<{ type?: unknown; text?: unknown }>;
     details?: Record<string, unknown>;
   };
+  rendererState?: { startedAt?: unknown; endedAt?: unknown };
   contentBox?: ComponentContainer;
   contentText?: TextComponent;
   selfRenderContainer?: ComponentContainer;
@@ -64,8 +66,12 @@ type ToolExecutionRow = {
 
 type PresentationPatchState = {
   theme?: ThemeLike;
+  collapseParallel: boolean;
   groupCache: WeakMap<ToolExecutionRow, GroupRenderCache>;
+  liveRenderedRows: WeakSet<ToolExecutionRow>;
   rowVersions: WeakMap<ToolExecutionRow, number>;
+  rowGroups: WeakMap<ToolExecutionRow, ToolExecutionRow[]>;
+  rowSignatures: WeakMap<ToolExecutionRow, string>;
   originalRender: (width: number) => string[];
   originalUpdateDisplay: () => void;
   patchedRender?: (width: number) => string[];
@@ -86,6 +92,14 @@ type GroupRenderCache = {
   width: number;
 };
 
+function envEnabled(name: string, defaultValue: boolean): boolean {
+  const value = process.env[name]?.trim().toLowerCase();
+  if (!value) return defaultValue;
+  if (["1", "true", "yes", "on"].includes(value)) return true;
+  if (["0", "false", "no", "off"].includes(value)) return false;
+  return defaultValue;
+}
+
 function stripAnsi(text: string): string {
   return text.replace(ANSI_RE, "");
 }
@@ -227,6 +241,113 @@ function hasImageResult(row: ToolExecutionRow): boolean {
   );
 }
 
+function formatDuration(ms: number): string {
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function bashDurationText(row: ToolExecutionRow): string | undefined {
+  const startedAt = row.rendererState?.startedAt;
+  const endedAt = row.rendererState?.endedAt;
+  if (
+    typeof startedAt !== "number" ||
+    typeof endedAt !== "number" ||
+    !Number.isFinite(startedAt) ||
+    !Number.isFinite(endedAt)
+  )
+    return undefined;
+  return formatDuration(Math.max(0, endedAt - startedAt));
+}
+
+function liveElapsedText(row: ToolExecutionRow): string | undefined {
+  if (row.toolName !== "bash") return undefined;
+  const startedAt = row.rendererState?.startedAt;
+  if (typeof startedAt !== "number" || !Number.isFinite(startedAt))
+    return undefined;
+  return formatDuration(Math.max(0, Date.now() - startedAt));
+}
+
+function isLiveRow(row: ToolExecutionRow): boolean {
+  return (
+    row.expanded === false &&
+    (row.isPartial !== false || !row.result) &&
+    row.getRenderShell?.() !== "self" &&
+    !hasImageResult(row)
+  );
+}
+
+function liveTailText(
+  row: ToolExecutionRow,
+  droppedVisible: boolean,
+  theme?: ThemeLike,
+): string | undefined {
+  if (!theme) return undefined;
+  const elapsed = liveElapsedText(row);
+  if (!droppedVisible && !elapsed) return undefined;
+  const parts: string[] = [];
+  if (droppedVisible) parts.push("…");
+  if (elapsed) parts.push("·", elapsed);
+  return theme.fg("muted", parts.join(" "));
+}
+
+function fitLiveHeader(
+  header: string,
+  tail: string,
+  width: number,
+  droppedVisible: boolean,
+): string {
+  const max = Math.max(1, width);
+  const head = header.trimEnd();
+  if (visibleWidth(head) + visibleWidth(tail) + 1 <= max)
+    return `${head} ${tail}`;
+  const headWidth = Math.max(1, max - visibleWidth(tail) - 1);
+  const headSuffix = droppedVisible ? "" : "…";
+  return `${truncateToWidth(head, headWidth, headSuffix, false)} ${tail}`;
+}
+
+// While a call streams or runs, pin it to a single header line with the
+// elapsed time inline, so the block never grows and never collapses on
+// completion; the header text simply settles into the outcome summary. The
+// cap is composed before the Box applies background and padding, so the live
+// line keeps the tool background edge to edge and the block's bottom padding.
+function capLiveRowDisplay(row: ToolExecutionRow, theme?: ThemeLike): void {
+  if (row.hasRendererDefinition?.()) {
+    const container = row.contentBox;
+    if (!container || !Array.isArray(container.children)) return;
+    const hadExtraChildren = container.children.length > 1;
+    removeResultComponent(container);
+    const original = container.children[0] as ComponentLike | undefined;
+    if (!original || typeof original.render !== "function") return;
+    container.children[0] = {
+      render(width: number): string[] {
+        const lines = original.render(width);
+        const headerIndex = lines.findIndex(hasVisibleContent);
+        if (headerIndex === -1) return lines;
+        const header = lines[headerIndex] ?? "";
+        const droppedVisible =
+          hadExtraChildren ||
+          lines.slice(headerIndex + 1).some(hasVisibleContent);
+        const tail = liveTailText(row, droppedVisible, theme);
+        return [
+          tail ? fitLiveHeader(header, tail, width, droppedVisible) : header,
+        ];
+      },
+      invalidate() {
+        original.invalidate();
+      },
+    };
+    return;
+  }
+
+  const text = row.contentText;
+  if (typeof text?.text !== "string" || typeof text.setText !== "function")
+    return;
+  const lines = text.text.split("\n");
+  const title = lines[0] ?? "";
+  const droppedVisible = lines.slice(1).some((line) => line.trim().length > 0);
+  const tail = liveTailText(row, droppedVisible, theme);
+  text.setText(tail ? `${title} ${tail}` : title);
+}
+
 function isCollapsibleSuccess(row: ToolExecutionRow): boolean {
   return (
     row.expanded === false &&
@@ -241,7 +362,7 @@ function isSettledToolRow(row: ToolExecutionRow): boolean {
   return row.isPartial === false && !!row.result;
 }
 
-function hasUnsettledToolInBatch(
+function hasToolSiblingInAssistantBatch(
   children: unknown[],
   index: number,
   renderAt: (index: number) => string[],
@@ -254,16 +375,31 @@ function hasUnsettledToolInBatch(
     ) {
       const candidate = children[candidateIndex];
       if (isAssistantMessageRow(candidate)) break;
-      if (isToolExecutionRow(candidate)) {
-        if (!isSettledToolRow(candidate)) return true;
-        continue;
-      }
+      if (isToolExecutionRow(candidate)) return true;
       if (renderAt(candidateIndex).some(hasVisibleContent)) break;
     }
   }
   return false;
 }
 
+function isGroupableToolRow(
+  row: ToolExecutionRow,
+  children: unknown[],
+  index: number,
+  renderAt: (index: number) => string[],
+  state: PresentationPatchState,
+): boolean {
+  if (!isLiveRow(row) && !isCollapsibleSuccess(row)) return false;
+  // Self-rendered tools can change height while active. Keep live instances
+  // individual so settling never collapses an already-painted preview.
+  if (row.getRenderShell?.() === "self" && state.liveRenderedRows.has(row))
+    return false;
+  return (
+    state.collapseParallel ||
+    !hasToolSiblingInAssistantBatch(children, index, renderAt)
+  );
+}
+
 function renderComponent(component: unknown, width: number): string[] {
   if (!component || typeof (component as ComponentLike).render !== "function")
     return [];
@@ -348,8 +484,10 @@ function outcomeSummary(row: ToolExecutionRow): string | undefined {
 
   const text = resultText(row);
   switch (row.toolName) {
-    case "bash":
-      return "done";
+    case "bash": {
+      const duration = bashDurationText(row);
+      return duration ? `done · ${duration}` : "done";
+    }
     case "read": {
       const lines = readLineCount(row, text);
       return `${lines} ${lines === 1 ? "line" : "lines"}`;
@@ -388,6 +526,17 @@ function renderedOutcome(
   return `${theme.fg("muted", "→")} ${theme.fg("success", summary)}`;
 }
 
+function renderedGroupedOutcome(
+  row: ToolExecutionRow,
+  theme: ThemeLike,
+): string | undefined {
+  const outcome = renderedOutcome(row, theme);
+  if (outcome) return outcome;
+  if (!isLiveRow(row)) return undefined;
+  const elapsed = liveElapsedText(row);
+  return theme.fg("muted", elapsed ? `· ${elapsed}` : "…");
+}
+
 function truncatePlain(text: string, width: number, suffix = "…"): string {
   const max = Math.max(0, width);
   const plain = stripAnsi(text);
@@ -564,7 +713,7 @@ function groupedCallComponent(
           previousToolName = row.toolName;
         }
         const call = renderedCallSummary(row, Math.max(1, width - 4), theme);
-        const outcome = renderedOutcome(row, theme);
+        const outcome = renderedGroupedOutcome(row, theme);
         lines.push(compactBulletLine(call, outcome, width, theme));
       }
       return lines;
@@ -628,9 +777,12 @@ function renderGroupedToolRows(
   const themeSample =
     theme.fg("toolTitle", "x") +
     theme.fg("muted", "x") +
+    theme.bg("toolPendingBg", "x") +
     theme.bg("toolSuccessBg", "x");
   const cached = state.groupCache.get(row);
+  const hasLiveMembers = rows.some(isLiveRow);
   if (
+    !hasLiveMembers &&
     cached &&
     cached.width === width &&
     cached.themeSample === themeSample &&
@@ -688,13 +840,17 @@ function renderGroupedToolRows(
   }
 
   const decorated = decorateHeader(row, lines, width, theme);
-  state.groupCache.set(row, {
-    lines: decorated,
-    members: [...rows],
-    memberVersions: rows.map((member) => state.rowVersions.get(member) ?? 0),
-    themeSample,
-    width,
-  });
+  if (hasLiveMembers) {
+    state.groupCache.delete(row);
+  } else {
+    state.groupCache.set(row, {
+      lines: decorated,
+      members: [...rows],
+      memberVersions: rows.map((member) => state.rowVersions.get(member) ?? 0),
+      themeSample,
+      width,
+    });
+  }
   return decorated;
 }
 
@@ -715,11 +871,10 @@ function renderContainerWithToolGroups(
 
   for (let index = 0; index < children.length; index++) {
     const child = children[index];
-    if (!isToolExecutionRow(child) || !isCollapsibleSuccess(child)) {
-      lines.push(...renderAt(index));
-      continue;
-    }
-    if (hasUnsettledToolInBatch(children, index, renderAt)) {
+    if (
+      !isToolExecutionRow(child) ||
+      !isGroupableToolRow(child, children, index, renderAt, presentation)
+    ) {
       lines.push(...renderAt(index));
       continue;
     }
@@ -737,7 +892,16 @@ function renderContainerWithToolGroups(
         continue;
       }
       if (isToolExecutionRow(candidate)) {
-        if (!isCollapsibleSuccess(candidate)) break;
+        if (
+          !isGroupableToolRow(
+            candidate,
+            children,
+            candidateIndex,
+            renderAt,
+            presentation,
+          )
+        )
+          break;
         group.push(candidate);
         lastMemberIndex = candidateIndex;
         continue;
@@ -750,7 +914,12 @@ function renderContainerWithToolGroups(
       continue;
     }
 
-    lines.push(...renderGroupedToolRows(child, group, width, presentation));
+    for (const member of group) presentation.rowGroups.set(member, group);
+    // An active member supplies the pending background. Once every call
+    // settles, the first member supplies the success background. Either way,
+    // the grouped row keeps the same number of lines.
+    const shellRow = group.find(isLiveRow) ?? child;
+    lines.push(...renderGroupedToolRows(shellRow, group, width, presentation));
     index = lastMemberIndex;
   }
 
@@ -847,19 +1016,34 @@ function installPresentationPatch(): PresentationPatchState | undefined {
       return undefined;
 
     const state: PresentationPatchState = {
+      collapseParallel: envEnabled(COLLAPSE_PARALLEL_ENV, true),
       groupCache: new WeakMap(),
+      liveRenderedRows: new WeakSet(),
       rowVersions: new WeakMap(),
+      rowGroups: new WeakMap(),
+      rowSignatures: new WeakMap(),
       originalRender: proto.render,
       originalUpdateDisplay: proto.updateDisplay,
     };
     const patchedUpdateDisplay = function updateDisplayWithCollapsedResult(
       this: ToolExecutionRow,
     ): void {
-      state.rowVersions.set(this, (state.rowVersions.get(this) ?? 0) + 1);
-      state.groupCache.delete(this);
+      // Group members always bump so their leader's cache refreshes; other
+      // rows only bump on state transitions, so bash's per-second invalidate
+      // ticks and resize invalidations stop busting caches.
+      const signature = `${this.isPartial}|${this.expanded}|${this.result ? 1 : 0}|${this.result?.isError ? 1 : 0}`;
+      if (
+        state.rowGroups.has(this) ||
+        state.rowSignatures.get(this) !== signature
+      ) {
+        state.rowSignatures.set(this, signature);
+        state.rowVersions.set(this, (state.rowVersions.get(this) ?? 0) + 1);
+        state.groupCache.delete(this);
+      }
       state.originalUpdateDisplay.call(this);
       try {
-        collapseSuccessfulResult(this, state.theme);
+        if (isLiveRow(this)) capLiveRowDisplay(this, state.theme);
+        else collapseSuccessfulResult(this, state.theme);
       } catch {
         // Presentation is cosmetic; preserve Pi's renderer if its internals change.
       }
@@ -868,6 +1052,7 @@ function installPresentationPatch(): PresentationPatchState | undefined {
       this: ToolExecutionRow,
       width: number,
     ): string[] {
+      if (!isSettledToolRow(this)) state.liveRenderedRows.add(this);
       const lines = state.originalRender.call(this, width);
       try {
         return decorateHeader(this, lines, width, state.theme);