@pi-kaush/pi-tool-call-markers 0.3.14 → 0.3.16

package/CHANGELOG.md

@@ -2,11 +2,37 @@
 
 ## Unreleased
 
+- Draw subagent rows with the same faint rail as every other collapsed
+  tool call. They used a bold `│` of their own, and failed subagent plans
+  painted the rail in the error color.
+- Stop the thinking spinner from forcing full transcript redraws. Changing
+  a line above the viewport makes the terminal clear and replay the whole
+  transcript, and the live label kept animating after answer text pushed it
+  out of view. The label now settles when the answer or a tool call starts,
+  so its duration is the real thinking time. With several thinking runs in
+  one message, earlier runs show a static `│ * Thought`, and the current
+  run animates only while it is the message's last line.
+- Never animate over a click-revealed thinking trace or answer Markdown
+  that happens to equal the label.
+- Keep `/toggle-info` replay from bringing back thinking that a message's
+  final update dropped.
+
+- Fix assistant replies vanishing behind the thinking label. The label
+  restyle matched any text node containing the label, so a reply that quoted
+  `Thinking...` or `│ * Thought` was replaced by the label until Ctrl+T. Only
+  Pi's thinking-run label nodes are restyled now, on an exact match, and only
+  on rows that carry thinking.
+- Keep the live thinking spinner moving between thinking deltas. The frame is
+  read from the clock on each redraw that Pi's working indicator already
+  drives, instead of only when new thinking text arrives.
+
 - Anchor the settled thinking label like a collapsed tool call:
   `│ * Thought · 2.5s` instead of `+ Thought · 2.5s`. The faint rail and
   bold glyph match the tool rows around it, so a turn that alternates
-  thinking and calls reads as one column. The live `⠋ Thinking…` spinner is
-  unchanged.
+  thinking and calls reads as one column. The live label takes the same
+  anchor, `│ ⠋ Thinking…`, with the spinner in the glyph slot, so settling
+  swaps only the glyph, the words, and the tint instead of shifting the text
+  two columns and drawing a rail in.
 
 - Paint collapsed rows with the theme's `dim` token instead of
   `syntaxComment`. Pi's generated `system` theme solves `syntaxComment` to

package/README.md

@@ -97,11 +97,11 @@ The second package entrypoint, `src/thinking-block-merger.ts`, combines only dir
 When Pi exposes its per-row hidden-thinking and streaming fields, hidden reasoning uses these native-themed labels:
 
 ```text
-⠋ Thinking…  →  ⠙ Thinking…  →  …
+│ ⠋ Thinking…  →  │ ⠙ Thinking…  →  …
 │ * Thought · 2.5s
 ```
 
-The live label samples Pi's native braille spinner sequence from the content updates Pi already renders; it does not add a timer. The adapter stores the first local streaming timestamp per assistant row in a `WeakMap`. A restored message or an older runtime with no streaming argument uses `│ * Thought`. The settled label borrows the collapsed tool-row anchor — a faint `│` rail and a bold `*` — so finished reasoning reads like the tool calls around it. There is no interval, timeout, render request, model call, or network work.
+The live label samples Pi's native braille spinner sequence from the clock each time the TUI draws it, so it steps with the redraws Pi's working indicator already drives instead of freezing between bursty thinking deltas. It does not add a timer; with the working indicator hidden, the spinner advances on each content update. The adapter stores the first local streaming timestamp per assistant row in a `WeakMap`. A restored message or an older runtime with no streaming argument uses `│ * Thought`. Both labels borrow the collapsed tool-row anchor — a faint `│` rail and a bold glyph — so reasoning reads like the tool calls around it. The spinner holds the glyph slot and settles into `*` in place: the rail and the label text keep their columns, and the rail keeps the settled tone throughout. There is no interval, timeout, render request, model call, or network work.
 
 Pi renders thinking labels and traces italic. This package drops those italics: both labels read as plain collapsed rows (the live spinner keeps its thinking-level tint, the settled row the muted tone, and a theme that resolves no color still loses the italics), and a visible trace stays italic only while it streams, then settles into ordinary transcript text. `PI_TOOL_CALL_MARKERS_THOUGHT_COLOR=inherit` is the opt-out that keeps Pi's native italic `thinkingText` styling.
 

package/package.json

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

package/src/index.ts

@@ -24,8 +24,7 @@ import { isQuestionToolCall, renderQuestionBlock } from "./question-block.ts";
 import { sanitizeInline } from "./sanitize.ts";
 
 const OUTER_INSET = 2;
-const SUBAGENT_MARKER = "│";
-const GROUP_CALL_MARKER = "│";
+const TOOL_RAIL_MARKER = "│";
 // Collapsed rows anchor with a glyph instead of repeating the tool name;
 // tools that read as one family share a glyph, and unmapped tools fall back
 // to `*`. A single space separates the glyph from the call content: the
@@ -898,11 +897,23 @@ function codemodeCallLabel(row: ToolExecutionRow): string | undefined {
   return parts.length > 0 ? parts.join(" · ") : undefined;
 }
 
+// One anchor builder for every collapsed row: the faint rail, then the
+// row's bold glyph when it has one — `│ ● src/a.ts`, `│ $ npm test`. A
+// subagent row anchors on the rail alone and keeps its `│ subagent …`
+// reading instead of a glyph.
+function collapsedAnchor(
+  theme: ThemeLike,
+  color: string,
+  glyph: string | undefined,
+): string {
+  const rail = `${fgCollapsedRail(theme, TOOL_RAIL_MARKER)} `;
+  return glyph === undefined
+    ? rail
+    : `${rail}${fgCollapsed(theme, color, glyph, true)} `;
+}
+
 // The collapsed-row seam lives here and nowhere else: which anchor a row
-// takes, how that anchor is styled, and the call text that follows it.
-// Anchors always render bold and take no joining colon — `│ ● src/a.ts`,
-// `│ $ npm test` — and subagent fallbacks keep their `│ subagent …`
-// reading instead of a glyph. Callers append the outcome tail.
+// takes, and the call text that follows it. Callers append the outcome tail.
 function collapsedSeam(
   row: ToolExecutionRow,
   width: number,
@@ -911,17 +922,12 @@ function collapsedSeam(
 ): { anchor: string; content: string } {
   const isBash = row.toolName === "bash";
   const isSubagent = row.toolName === "subagent";
-  const glyph = isBash
-    ? "$"
-    : (TOOL_CALL_GLYPHS.get(row.toolName ?? "") ?? "*");
-  const anchor = isSubagent
-    ? `${fgCollapsed(theme, color, SUBAGENT_MARKER, true)} `
-    : `${fgCollapsedRail(theme, GROUP_CALL_MARKER)} ${fgCollapsed(
-        theme,
-        color,
-        glyph,
-        true,
-      )} `;
+  const glyph = isSubagent
+    ? undefined
+    : isBash
+      ? "$"
+      : (TOOL_CALL_GLYPHS.get(row.toolName ?? "") ?? "*");
+  const anchor = collapsedAnchor(theme, color, glyph);
   const budget = Math.max(1, width - visibleWidth(anchor));
   // Self-rendered rows build their own `tool {args}` label — Pi's call title
   // is gone once settled — while ordinary rows scrape the rendered call
@@ -1209,7 +1215,7 @@ function renderSubagentPlan(
   const previewOf = (step: SubagentStep) =>
     fgCollapsed(theme, detailColor, ` ${subagentStepPreview(step.task)}`);
 
-  const marker = `${fgCollapsed(theme, color, SUBAGENT_MARKER, true)} `;
+  const marker = collapsedAnchor(theme, color, undefined);
   const budget = Math.max(1, width - visibleWidth(marker));
   const progress = subagentProgressText(row);
   const outcome = failed

package/src/thinking-block-merger.ts

@@ -105,21 +105,34 @@ function labelStyle(
   return styledWith(token, theme);
 }
 
-// The settled label wears the collapsed tool-row anchor — faint rail, bold
-// glyph — so finished reasoning reads like the tool calls around it. Every
-// other label is the live spinner.
+// Both labels wear the collapsed tool-row anchor — faint rail, bold glyph —
+// so reasoning reads like the tool calls around it. The live spinner holds
+// the glyph slot and settles into `*` in place: the rail and the label text
+// keep their columns, and only the glyph, the words, and the tint change.
 const THOUGHT_RAIL = "│";
 const THOUGHT_GLYPH = "*";
-const THOUGHT_ANCHOR = `${THOUGHT_RAIL} ${THOUGHT_GLYPH}`;
-const SETTLED_THOUGHT = `${THOUGHT_ANCHOR} Thought`;
+const SETTLED_THOUGHT = `${THOUGHT_RAIL} ${THOUGHT_GLYPH} Thought`;
+const ANCHORED_LABEL_RE = /^│ (\S) (.*)$/su;
 
 function isSettledThoughtLabel(label: string): boolean {
   return label.startsWith(SETTLED_THOUGHT);
 }
 
-function styledSettledThought(raw: string, style: LabelStyle): string {
-  const rest = raw.slice(THOUGHT_ANCHOR.length);
-  return `${style.prefix}\x1b[2m${THOUGHT_RAIL}\x1b[22m \x1b[1m${THOUGHT_GLYPH}\x1b[22m${rest}${style.suffix}`;
+// The rail keeps the settled collapsed tone in both states, like a pending
+// tool row's rail, so settling never repaints it.
+function styledAnchoredLabel(
+  raw: string,
+  style: LabelStyle,
+  theme: ThemeDetail,
+): string {
+  const match = ANCHORED_LABEL_RE.exec(raw);
+  if (!match) return `${style.prefix}${raw}${style.suffix}`;
+  const rail = settledMutedStyle(theme) ?? style;
+  const railText = `\x1b[2m${THOUGHT_RAIL}\x1b[22m`;
+  const body = ` \x1b[1m${match[1]}\x1b[22m ${match[2]}${style.suffix}`;
+  return rail.prefix === style.prefix
+    ? `${style.prefix}${railText}${body}`
+    : `${rail.prefix}${railText}${rail.suffix}${style.prefix}${body}`;
 }
 
 export function visibleThoughtLabel(label: string): string {
@@ -129,10 +142,8 @@ export function visibleThoughtLabel(label: string): string {
   const settled = isSettledThoughtLabel(raw);
   const style = theme ? labelStyle(settled, theme) : undefined;
   // A theme that cannot resolve a color still drops Pi's italics.
-  if (!style) return `${ITALIC_OFF}${raw}`;
-  return settled
-    ? styledSettledThought(raw, style)
-    : `${style.prefix}${raw}${style.suffix}`;
+  if (!style || !theme) return `${ITALIC_OFF}${raw}`;
+  return styledAnchoredLabel(raw, style, theme);
 }
 
 type AssistantMessageLike = {
@@ -149,6 +160,7 @@ type AssistantMessageRow = {
 type TextLikeChild = {
   text?: unknown;
   setText?(text: string): void;
+  render?(width: number): string[];
 };
 
 type MarkdownLikeChild = {
@@ -192,7 +204,85 @@ function unitalicizeSettledThinking(row: AssistantMessageRow): void {
 // previous (italic) frame, so an in-line italic reset may never reach the
 // terminal. Swap the node's text for a self-contained styled version after
 // each native render pass instead.
-function restyleHiddenThinkingLabel(row: AssistantMessageRow): void {
+//
+// Only label nodes qualify. Answer prose and a click-revealed trace are
+// Markdown nodes that also carry `text` and `setText`, so Markdown never
+// matches, and a candidate's plain text must equal the label exactly. Pi 1.0
+// wraps each thinking run in a MouseRegion; each child is judged on its own,
+// unwrapped when it has a wrapped inner.
+function hiddenLabelNodes(
+  row: AssistantMessageRow,
+  plainLabel: string,
+): Array<{ node: TextLikeChild; trailing: boolean }> {
+  const children = row.contentContainer?.children;
+  if (!Array.isArray(children)) return [];
+  const labels: Array<{ node: TextLikeChild; trailing: boolean }> = [];
+  children.forEach((child, index) => {
+    const node = ((child as { child?: unknown } | undefined)?.child ??
+      child) as TextLikeChild | undefined;
+    if (
+      isMarkdownLike(node) ||
+      typeof node?.text !== "string" ||
+      typeof node.setText !== "function" ||
+      plainText(node.text) !== plainLabel
+    ) {
+      return;
+    }
+    labels.push({ node, trailing: index === children.length - 1 });
+  });
+  return labels;
+}
+
+// Duck-typed, not `instanceof`: a locally loaded extension can resolve its
+// own pi-tui copy, so class identity is not shared with Pi's. pi-tui's
+// Markdown declares `theme` and `defaultTextStyle` fields; Text has neither.
+function isMarkdownLike(node: unknown): boolean {
+  return (
+    !!node &&
+    typeof node === "object" &&
+    ("defaultTextStyle" in node || "theme" in node)
+  );
+}
+
+function plainText(text: string): string {
+  return text.replace(/\x1b\[[0-9;]*m/g, "");
+}
+
+// A live label re-reads the clock whenever the TUI draws it, so the spinner
+// steps with the redraws Pi's working indicator already drives instead of
+// freezing between bursty thinking deltas. Pi rebuilds the label node on
+// every content update, so the override dies with the node; no timer is
+// added, and with no redraws the spinner still advances on each delta.
+function animateLiveLabel(node: TextLikeChild, startedAt: number): void {
+  const render = node.render;
+  if (typeof render !== "function") return;
+  node.render = function renderLiveThinkingLabel(
+    this: TextLikeChild,
+    width: number,
+  ): string[] {
+    try {
+      const styled = visibleThoughtLabel(
+        liveThinkingLabel(startedAt, Date.now()),
+      );
+      if (this.text !== styled) this.setText?.(styled);
+    } catch {
+      // Keep the last frame if styling fails mid-render.
+    }
+    return Reflect.apply(render, this, [width]) as string[];
+  };
+}
+
+// Pi gives every thinking run in a message the same label. Only the last
+// run is the current one; earlier runs read as settled so a line above later
+// content never changes. The current run animates only when it is the
+// message's last line and no tool rows render below the message: changing
+// a line above the viewport makes pi-tui clear and replay the transcript.
+// Otherwise it holds one spinner frame until it settles.
+function restyleHiddenThinkingLabel(
+  row: AssistantMessageRow,
+  message: AssistantMessageLike,
+  liveSince?: number,
+): void {
   if (
     row.hideThinkingBlock !== true ||
     typeof row.hiddenThinkingLabel !== "string"
@@ -201,18 +291,28 @@ function restyleHiddenThinkingLabel(row: AssistantMessageRow): void {
   }
   const label = row.hiddenThinkingLabel;
   if (!stylesThinkingLabels()) return;
-  const styled = visibleThoughtLabel(label);
-  for (const child of contentNodes(row)) {
-    const textChild = child as TextLikeChild | undefined;
-    if (
-      typeof textChild?.text !== "string" ||
-      typeof textChild.setText !== "function" ||
-      !textChild.text.includes(label)
-    ) {
-      continue;
+  const labels = hiddenLabelNodes(row, plainText(label));
+  const hasToolCalls =
+    Array.isArray(message.content) &&
+    message.content.some(
+      (block) => (block as { type?: unknown } | undefined)?.type === "toolCall",
+    );
+  labels.forEach(({ node, trailing }, index) => {
+    if (index < labels.length - 1) {
+      node.setText?.(visibleThoughtLabel(SETTLED_THOUGHT));
+      return;
     }
-    textChild.setText(styled);
-  }
+    if (liveSince === undefined) {
+      node.setText?.(visibleThoughtLabel(label));
+    } else if (trailing && !hasToolCalls) {
+      node.setText?.(visibleThoughtLabel(label));
+      animateLiveLabel(node, liveSince);
+    } else {
+      node.setText?.(
+        visibleThoughtLabel(liveThinkingLabel(liveSince, liveSince)),
+      );
+    }
+  });
 }
 
 type ThinkingTiming = {
@@ -256,7 +356,9 @@ function trackReplayRow(
   args: unknown[],
 ): void {
   try {
-    if (!hasThinkingContent(message)) return;
+    // A tracked row keeps tracking even when its final content drops
+    // thinking, so a replay never resurrects an earlier streaming snapshot.
+    if (!hasThinkingContent(message) && !state.rows.has(row)) return;
     state.rows.set(row, { message, args });
     while (state.rows.size > MAX_REPLAY_ROWS) {
       const oldest = state.rows.keys().next().value;
@@ -321,6 +423,10 @@ function formatThoughtDuration(startedAt: number, finishedAt: number): string {
   return `${(Math.max(0, finishedAt - startedAt) / 1000).toFixed(1)}s`;
 }
 
+function liveThinkingLabel(startedAt: number, now: number): string {
+  return `${THOUGHT_RAIL} ${thinkingSpinner(startedAt, now)} Thinking…`;
+}
+
 function thinkingSpinner(startedAt: number, now: number): string {
   const frame = Math.floor(Math.max(0, now - startedAt) / SPINNER_INTERVAL_MS);
   return PI_SPINNER_FRAMES[frame % PI_SPINNER_FRAMES.length]!;
@@ -342,23 +448,59 @@ function thinkingStillLive(
   );
 }
 
+// Thinking ends when the answer starts: visible text or a tool call after
+// the last thinking block. Settling there keeps the duration honest and
+// keeps a live label as the transcript's last line, so its spinner never
+// changes a line scrolled above the viewport (which forces a full replay).
+function answerStarted(message: AssistantMessageLike): boolean {
+  const content = Array.isArray(message.content) ? message.content : [];
+  let lastThinking = -1;
+  content.forEach((block, index) => {
+    if (isThinkingContent(block)) lastThinking = index;
+  });
+  return content.slice(lastThinking + 1).some((block) => {
+    const b = block as { type?: unknown; text?: unknown } | undefined;
+    return (
+      b?.type === "toolCall" ||
+      (b?.type === "text" && typeof b.text === "string" && b.text.trim() !== "")
+    );
+  });
+}
+
+function timingLive(
+  streaming: boolean | undefined,
+  timing: ThinkingTiming | undefined,
+): boolean {
+  return (
+    streaming !== false &&
+    timing !== undefined &&
+    timing.finishedAt === undefined
+  );
+}
+
 function lifecycleLabel(
   row: AssistantMessageRow,
+  message: AssistantMessageLike,
   streaming: boolean | undefined,
   timings: WeakMap<AssistantMessageRow, ThinkingTiming>,
 ): string {
   const now = Date.now();
   const previous = timings.get(row);
-  if (thinkingStillLive(streaming, previous)) {
+  const answering = answerStarted(message);
+  if (!answering && thinkingStillLive(streaming, previous)) {
     const current =
       previous && previous.finishedAt === undefined
         ? previous
         : { startedAt: now };
     timings.set(row, current);
-    return `${thinkingSpinner(current.startedAt, now)} Thinking…`;
+    return liveThinkingLabel(current.startedAt, now);
   }
 
-  if (streaming === false && previous && previous.finishedAt === undefined) {
+  if (
+    (streaming === false || answering) &&
+    previous &&
+    previous.finishedAt === undefined
+  ) {
     previous.finishedAt = now;
   }
 
@@ -411,7 +553,7 @@ function applyHiddenThinkingLabel(
 ): void {
   // Record the component's first streaming update even when the provider has
   // not emitted a non-empty thinking block yet.
-  const label = lifecycleLabel(row, streaming, timings);
+  const label = lifecycleLabel(row, message, streaming, timings);
   if (!hasThinkingContent(message)) return;
   if (
     row.hideThinkingBlock !== true ||
@@ -483,14 +625,21 @@ function installThinkingGroupingPatch():
       }
       Reflect.apply(state.originalUpdateContent, this, [combined, ...args]);
       try {
-        restyleHiddenThinkingLabel(this);
+        if (hasThinkingContent(combined)) {
+          const timing = state.timings.get(this);
+          const liveSince =
+            timing && timingLive(streaming, timing)
+              ? timing.startedAt
+              : undefined;
+          restyleHiddenThinkingLabel(this, combined, liveSince);
+        }
       } catch {
         // Keep Pi's native label styling if the row shape changes.
       }
       try {
         if (
           hasThinkingContent(combined) &&
-          !thinkingStillLive(streaming, state.timings.get(this))
+          !timingLive(streaming, state.timings.get(this))
         ) {
           unitalicizeSettledThinking(this);
         }