pi-minimalist 0.2.0 → 0.2.2

package/src/row.ts

@@ -4,15 +4,11 @@
  * TWO RULES THIS FILE ENFORCES
  * ---------------------------
  * 1. Rows are described as DATA and painted exactly once. Nothing downstream may
- *    re-parse painted text. An earlier version built `"read src/a.ts"` and then
- *    split it on the first space to recolor the action word, which silently
- *    assumed no label ever contains a space; run summaries were joined into
- *    `"read ×2, edit ×1"` and split back apart the same way.
+ *    re-parse painted text (splitting `"read src/a.ts"` on the first space
+ *    assumes no label contains a space).
  *
- * 2. Theme and settings are bound ONCE, in a `Painter`. There used to be a
- *    module-level mutable config with `config = defaultConfig()` defaults on four
- *    functions, which made painting depend on load order and let one test leak
- *    settings into the next.
+ * 2. Theme and settings are bound ONCE, in a `Painter`, so painting never
+ *    depends on load order and one test cannot leak settings into the next.
  *
  * Free of Pi extension-API runtime imports, so tests exercise real painting
  * without an extension runtime.
@@ -20,12 +16,8 @@
 
 // Type-only: erased at runtime, but makes a mistyped token ("succes") a compile
 // error instead of a theme.fg() throw that core turns into a verbose card.
-import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
-import type { Config } from "./config.ts";
-
-// ThemeBg is not exported publicly, so recover it from Theme.bg's own signature
-// rather than importing a deep dist path (which is not a package export).
-type ThemeBg = Parameters<Theme["bg"]>[0];
+import type { ThemeColor } from "@earendil-works/pi-coding-agent";
+import { OPEN_MARKER, type Config } from "./config.ts";
 
 /**
  * Minimal theme surface. Pi's real Theme satisfies it; tests pass a fake that
@@ -37,7 +29,6 @@ type ThemeBg = Parameters<Theme["bg"]>[0];
  */
 export type ThemeLike = {
   fg(token: ThemeColor, text: string): string;
-  bg(token: ThemeBg, text: string): string;
 };
 
 /** One painted row. `text` is already colored; truncation happens at render. */
@@ -46,16 +37,21 @@ export type Row = {
   gutter: string;
   /** Fully colored row content. */
   text: string;
-  /** Full-width background, applied after truncation. */
-  highlight?: (text: string) => string;
+  /**
+   * Set on an expanded row: wrap instead of truncating. `head` is the colored
+   * `glyph label` prefix (no timer badge, whose width changes) and `body` the
+   * colored `[badge] details`; continuation lines are indented under `head`.
+   */
+  wrap?: { head: string; body: string };
+  /** Header line drawn above an opened run's first row (then one blank line); clicking it folds the run back. */
+  header?: Row;
 };
 
 /**
  * Visible columns a gutter occupies: one space, the glyph, one space.
  *
- * DERIVED from the row's own gutter text, never configured. An earlier design
- * exported this as a constant, which could disagree with the real glyph width and
- * shift every row.
+ * DERIVED from the row's own gutter text, never configured, so it cannot
+ * disagree with the real glyph width and shift every row.
  */
 export function gutterWidth(gutter: string): number {
   return gutter === "" ? 0 : 3;
@@ -78,8 +74,8 @@ export type Labeled = {
   badge?: string;
   /** Path, command, or preview text. */
   details?: string;
-  /** Highlight the row background (streaming thinking only). */
-  highlight?: boolean;
+  /** Wrap long details onto more lines instead of truncating (expanded tool rows). */
+  wrap?: boolean;
 };
 
 /** One folded name and how many times it appeared in a run. */
@@ -101,8 +97,6 @@ export type RunSummary = {
   running: Count[];
 };
 
-export const EMPTY_SUMMARY: RunSummary = { done: [], failed: [], running: [] };
-
 /**
  * Paints rows for one theme and one settings object.
  *
@@ -144,14 +138,24 @@ export class Painter {
     const parts: string[] = [];
     if (spec.glyph) parts.push(this.theme.fg(spec.glyphColor ?? tokens.label, spec.glyph));
     parts.push(this.theme.fg(labelColor, spec.label));
-    if (spec.badge) parts.push(this.theme.fg(tokens.label, spec.badge));
-    if (spec.details) parts.push(this.theme.fg(tokens.details, spec.details));
+    // The wrap indent is `glyph label` ONLY: the timer badge changes width every
+    // 1s/10s/100s and must not shift (re-wrap) the continuation lines.
+    const head = parts.join(" ");
+    // `text` is always ONE line. Details with real newlines (an expanded
+    // command) are flattened for it and kept for `wrap`, colored line by line so
+    // no color escape spans a newline.
+    const details = spec.details ?? "";
+    const flat = details.includes("\n") ? details.replace(/\s+/g, " ").trim() : details;
+    const paintDetails = (text: string) => this.theme.fg(tokens.details, text);
+    const badge = spec.badge ? this.theme.fg(tokens.label, spec.badge) : "";
+    const rest = [badge, flat && paintDetails(flat)].filter(Boolean);
+    const wrapBody = [badge, details && details.split("\n").map(paintDetails).join("\n")].filter(Boolean);
     return {
       // The gutter follows the label's hue, so thinking rows stay purple and tool
       // rows stay green without either caller naming a gutter color.
       gutter: this.gutter(labelColor),
-      text: parts.join(" "),
-      highlight: spec.highlight ? (text) => this.theme.bg(tokens.activeBg, text) : undefined,
+      text: [head, ...rest].join(" "),
+      wrap: spec.wrap && spec.details ? { head, body: wrapBody.join(" ") } : undefined,
     };
   }
 
@@ -176,6 +180,18 @@ export class Painter {
     return { gutter: this.gutter(label), text: groups.join(this.theme.fg(details, " · ")) };
   }
 
+  /**
+   * The header of an opened run: a muted control line, not data, so it carries
+   * no counts. Clicking it folds the run back. ASCII mode swaps `·` for `-`.
+   * No gutter bar: blank padding of the gutter width keeps its text aligned with
+   * the rows below it (no padding at all when the gutter is off).
+   */
+  header(): Row {
+    const ascii = this.config.get("glyphStyle") === "ascii";
+    const text = `${OPEN_MARKER[this.config.get("glyphStyle")]} Expanded ${ascii ? "-" : "·"} click to fold`;
+    return { gutter: this.config.get("gutter") ? "   " : "", text: this.theme.fg("muted", text) };
+  }
+
   private counts(counts: Count[], color: ThemeColor): string {
     const tokens = this.config.tokens();
     const glyphs = this.config.glyphs();

package/src/run-grouping.ts

@@ -1,9 +1,6 @@
 /**
  * Folding adjacent low-noise rows into one summary (the `groupToolRuns` setting).
  *
- * Formerly `quiet-mode.ts` / `QuietMode`, named after a `/quiet` command that no
- * longer exists.
- *
  * WHY THIS STATE EXISTS AT ALL
  * ---------------------------
  * Each tool row is an independent transcript entry that knows nothing about its
@@ -19,7 +16,8 @@ import type { Count, Painter, Row, RunSummary } from "./row.ts";
 
 export type Outcome = "success" | "failure" | "pending";
 
-type EntryKind = "tool" | "thinking" | "prose";
+/** "other" = visible in the transcript but not ours to fold (user message, excluded tool card). */
+type EntryKind = "tool" | "thinking" | "prose" | "other";
 
 type Entry = {
   id: string;
@@ -33,11 +31,13 @@ type Entry = {
   foldable: boolean;
 };
 
-type Cycle = { startedAt: number; settledAt?: number; finalAnswerStarted: boolean };
+type Cycle = { startedAt: number; settledAt?: number };
 
 /** "show" keeps the row as-is, "hide" draws nothing, a summary folds a whole run. */
 export type RowView = "show" | "hide" | RunSummary;
 type ActivityState = "show" | "hide" | "summary";
+/** A run the user opened. Every member id maps to the same object. */
+type OpenRun = { members: Entry[]; activity: boolean };
 type ViewCache = {
   key: string;
   activity: Map<string, ActivityState>;
@@ -51,12 +51,14 @@ export class RunGrouping {
   private byId = new Map<string, Entry>();
   private ownerIds = new WeakMap<object, number>();
   private ownerEntries = new Map<number, Set<string>>();
+  /** Message identity per owner. Rebuilt components of one message share it, so they share entries. */
+  private messageKeys = new WeakMap<object, string>();
   private nextOwnerId = 1;
   private cycle = 0;
   private cycles = new Map<number, Cycle>();
   private agentActive = false;
-  /** Rows the user opened out of a summary by clicking it. Never fold again. */
-  private opened = new Set<string>();
+  /** Rows the user opened out of a summary by clicking it. They stay out of folds until `close()`. */
+  private opened = new Map<string, OpenRun>();
   private version = 0;
   private cache?: ViewCache;
 
@@ -73,7 +75,7 @@ export class RunGrouping {
     // Replay leaves `cycle` pointing at the next empty slot. A subsequent live
     // interaction can use it directly; consecutive live interactions advance.
     if (this.entries.some((entry) => entry.cycle === this.cycle)) this.cycle++;
-    this.cycles.set(this.cycle, { startedAt: now, finalAnswerStarted: false });
+    this.cycles.set(this.cycle, { startedAt: now });
     this.agentActive = true;
     this.invalidateViews();
   }
@@ -116,50 +118,49 @@ export class RunGrouping {
     this.invalidateViews();
   }
 
-  /** Observe a thinking block by its component identity and local run index. */
-  observeThinking(owner: object, runIndex: number, done: boolean, expanded: boolean): void {
+  /**
+   * Record something visible that we never fold or draw (a user message, an
+   * excluded tool card). It only exists to cut runs, so no summary jumps over it.
+   */
+  observeBarrier(id: string): void {
+    this.observe(id, "other", "success", false, false, "other");
+  }
+
+  /** Observe a thinking block by its message identity and local run index. */
+  observeThinking(owner: object, runIndex: number, done: boolean, expanded: boolean, timestamp?: number): void {
+    this.identify(owner, timestamp);
     const id = this.thinkingId(owner, runIndex);
     this.rememberOwnerEntry(owner, id);
     this.observe(id, "think", done ? "success" : "pending", expanded, true, "thinking");
   }
 
-  /**
-   * Record prose and return its stable id. `stopReason=stop` is available on the
-   * first empty final-answer update, before OpenAI streams its first text delta;
-   * the finalized block later confirms the same fact through `phase`.
-   */
+  /** Record prose and return its stable id. `stopReason=stop` marks a final answer. */
   observeProse(
     owner: object,
     contentIndex: number,
     signal: {
-      phase?: "commentary" | "final_answer";
       stopReason?: string;
       streaming?: boolean;
       timestamp?: number;
     } = {},
   ): string {
-    const id = `prose:${this.ownerId(owner)}:${contentIndex}`;
+    this.identify(owner, signal.timestamp);
+    const id = `prose:${this.messageKey(owner)}:${contentIndex}`;
     const isNew = !this.byId.has(id);
     const timestamp = signal.timestamp ?? Date.now();
     if (!this.cycles.has(this.cycle)) {
-      this.cycles.set(this.cycle, { startedAt: timestamp, finalAnswerStarted: false });
+      this.cycles.set(this.cycle, { startedAt: timestamp });
     }
     this.rememberOwnerEntry(owner, id);
     this.observe(id, "prose", "pending", false, false, "prose");
 
-    const isFinal = signal.phase === "final_answer" || signal.stopReason === "stop";
-    const cycle = this.cycles.get(this.byId.get(id)!.cycle)!;
-    if (isFinal && !cycle.finalAnswerStarted) {
-      cycle.finalAnswerStarted = true;
-      this.invalidateViews();
-    }
-
+    const isFinal = signal.stopReason === "stop";
     // session replay has no agent_start/agent_settled events. A newly observed,
     // finalized answer is therefore the only reliable boundary between old user
     // interactions. Advance AFTER assigning the answer so it remains the latest
     // prose of its own cycle; stable ids prevent re-renders from advancing twice.
     if (!this.agentActive && isNew && isFinal && !signal.streaming) {
-      cycle.settledAt = timestamp;
+      this.cycles.get(this.byId.get(id)!.cycle)!.settledAt = timestamp;
       this.cycle++;
     }
     return id;
@@ -193,7 +194,7 @@ export class RunGrouping {
   }
 
   thinkingId(owner: object, runIndex: number): string {
-    return `think:${this.ownerId(owner)}:${runIndex}`;
+    return `think:${this.messageKey(owner)}:${runIndex}`;
   }
 
   /** Hide a message's leading spacer only when every one of its rows is hidden. */
@@ -223,7 +224,7 @@ export class RunGrouping {
     if (activity === "summary") return this.activitySummary(entry!, painter);
 
     const view = this.view(id);
-    if (view === "show") return base();
+    if (view === "show") return entry ? this.withHeader(entry, base(), painter) : base();
     if (view === "hide") return null;
     return painter.summary(view);
   }
@@ -240,44 +241,69 @@ export class RunGrouping {
     if (!entry) return false;
     const { activity, grouped } = this.views();
     const members = [entry];
-    if (activity.get(id) === "summary") {
-      members.push(...this.entries.filter((e) => e.cycle === entry.cycle && activity.get(e.id) === "hide"));
+    const isActivity = activity.get(id) === "summary";
+    if (isActivity) {
+      members.unshift(...this.entries.filter((e) => e.cycle === entry.cycle && activity.get(e.id) === "hide"));
     } else if (typeof grouped.get(id) === "object") {
       // A run's hidden members are the contiguous "hide" rows before its tail.
       for (let i = this.entries.indexOf(entry) - 1; i >= 0 && grouped.get(this.entries[i].id) === "hide"; i--) {
-        members.push(this.entries[i]);
+        members.unshift(this.entries[i]);
       }
     } else {
       return false;
     }
-    for (const member of members) this.opened.add(member.id);
+    const run: OpenRun = { members, activity: isActivity };
+    for (const member of members) this.opened.set(member.id, run);
     this.invalidateViews();
     return true;
   }
 
+  /**
+   * Fold an opened run back, after a click on its header. `CompactLine` reports
+   * `onHeader` only for a row that drew the header, so `id` is that row.
+   */
+  close(id: string): boolean {
+    const run = this.opened.get(id);
+    if (!run) return false;
+    for (const member of run.members) this.opened.delete(member.id);
+    this.invalidateViews();
+    return true;
+  }
+
+  /** The click handler of a row drawn by `CompactLine`: header folds back, anything else opens. */
+  click(id: string, onHeader: boolean): boolean {
+    return onHeader ? this.close(id) : this.open(id);
+  }
+
+  /** The header of an opened run, on its first member only, while the fold that made it is on. */
+  headerFor(id: string, painter: Painter): Row | undefined {
+    const entry = this.byId.get(id);
+    const run = this.opened.get(id);
+    if (!entry || !run || run.members[0].id !== id || !(run.activity ? this.config.get("foldIntermediateActivity") : this.enabled)) {
+      return undefined;
+    }
+    return painter.header();
+  }
+
+  private withHeader(entry: Entry, row: Row, painter: Painter): Row {
+    const header = this.headerFor(entry.id, painter);
+    return header ? { ...row, header } : row;
+  }
+
   view(id: string): RowView {
     return this.views().grouped.get(id) ?? "show";
   }
 
-  /**
-   * Can this entry disappear into a run summary?
-   *
-   * A RUNNING entry folds by default: folds are recomputed on every render, so
-   * the row reappears the moment it matters, and the summary still counts it in
-   * its `running` group. `keepActiveToolsExpanded` opts out for people who want
-   * to watch a long command in place.
-   */
   /** Collapse every collapsible row before the latest prose into ONE activity summary. */
   private activityState(entry: Entry | undefined): ActivityState {
     return entry ? (this.views().activity.get(entry.id) ?? "show") : "show";
   }
 
+  /** The `activitySummary` mode decides what a folded activity run shows. */
   private activitySummary(entry: Entry, painter: Painter, now = Date.now()): Row {
-    const cycle = this.cycles.get(entry.cycle);
     const actions = this.views().actions.get(entry.cycle);
-    if (this.config.get("activitySummary") === "tools" && actions) {
-      return painter.summary(actions);
-    }
+    if (this.config.get("activitySummary") === "tools" && actions) return painter.summary(actions);
+    const cycle = this.cycles.get(entry.cycle);
     const elapsed = Math.max(0, (cycle?.settledAt ?? now) - (cycle?.startedAt ?? now));
     return painter.labeled({ label: "Worked", details: `for ${formatDuration(elapsed)}` });
   }
@@ -288,7 +314,6 @@ export class RunGrouping {
       this.config.get("groupToolRuns"),
       this.config.get("thinkingAsToolCall"),
       this.config.get("foldIntermediateActivity"),
-      this.config.get("foldActivityOnFinalAnswer"),
       this.config.get("keepActiveToolsExpanded"),
     ].join(":");
     if (this.cache?.key === key) return this.cache;
@@ -304,7 +329,12 @@ export class RunGrouping {
           continue;
         }
         let last = first + 1;
-        while (last < this.entries.length && this.foldable(this.entries[last])) last++;
+        // A new agent cycle (user prompt) also cuts the run.
+        while (
+          last < this.entries.length &&
+          this.foldable(this.entries[last]) &&
+          this.entries[last].cycle === this.entries[first].cycle
+        ) last++;
         if (last - first > 1) {
           for (let index = first; index < last - 1; index++) grouped.set(this.entries[index].id, "hide");
           grouped.set(this.entries[last - 1].id, summarize(this.entries.slice(first, last)));
@@ -322,20 +352,18 @@ export class RunGrouping {
       }
       for (const [cycleId, entries] of byCycle) {
         const prose = entries.filter((entry) => entry.kind === "prose");
-        const cycle = this.cycles.get(cycleId);
-        if (
-          prose.length < 2 ||
-          (this.config.get("foldActivityOnFinalAnswer") && !cycle?.finalAnswerStarted)
-        ) continue;
+        if (prose.length < 2) continue;
 
         const beforeLatest = entries.slice(0, entries.indexOf(prose.at(-1)!));
+        // A cycle of consecutive prose only (no tool, no thinking) has nothing to fold.
+        if (!beforeLatest.some(isAction)) continue;
         const collapsible = beforeLatest.filter((entry) => this.activityFoldable(entry));
         for (let index = 0; index < collapsible.length - 1; index++) {
           activity.set(collapsible[index].id, "hide");
         }
         const tail = collapsible.at(-1);
         if (tail) activity.set(tail.id, "summary");
-        const actionEntries = beforeLatest.filter((entry) => entry.kind !== "prose");
+        const actionEntries = beforeLatest.filter(isAction);
         if (actionEntries.length > 0) actions.set(cycleId, summarize(actionEntries));
       }
     }
@@ -349,6 +377,7 @@ export class RunGrouping {
   }
 
   private activityFoldable(entry: Entry): boolean {
+    if (entry.kind === "other") return false;
     if (entry.expanded || this.opened.has(entry.id)) return false;
     if (entry.outcome === "pending" && entry.kind !== "prose" && this.config.get("keepActiveToolsExpanded")) {
       return false;
@@ -373,6 +402,20 @@ export class RunGrouping {
     entries.add(entryId);
   }
 
+  /**
+   * Ids follow the MESSAGE, not the component: Pi builds new components for the
+   * same messages on every rebuild (Ctrl+T, tree navigation), and ids tied to
+   * the dropped components would leave ghost entries counted in summaries.
+   * `timestamp` is set once when a message starts streaming and never changes.
+   */
+  private identify(owner: object, timestamp?: number): void {
+    if (timestamp !== undefined) this.messageKeys.set(owner, `t${timestamp}`);
+  }
+
+  private messageKey(owner: object): string {
+    return this.messageKeys.get(owner) ?? `o${this.ownerId(owner)}`;
+  }
+
   private ownerId(owner: object): number {
     let id = this.ownerIds.get(owner);
     if (id === undefined) {
@@ -383,6 +426,9 @@ export class RunGrouping {
   }
 }
 
+/** A tool or thinking row: what a "Worked for" fold and its tool counts are made of. */
+const isAction = (entry: Entry) => entry.kind === "tool" || entry.kind === "thinking";
+
 /** Group a run's entries by outcome, each in first-seen order. */
 export function summarize(run: Entry[]): RunSummary {
   const named = (outcome: Outcome) =>

package/src/thinking.ts

@@ -1,14 +1,14 @@
 /**
  * FEATURE 2: thinking blocks.
  *
- * Collapsed — one line replacing Pi's bare "Thinking..." label, installed on
- * `Symbol.for("pi.thinkingPreview")`:
+ * Collapsed — one line replacing Pi's bare "Thinking..." label, installed as
+ * `Bridge.thinkingPreview`:
  *
  *     • think The user wants me to…    ← while streaming
  *     ✓ think The user wants me to…    ← once the message completes
  *
  * Expanded (Ctrl+T) — Pi's native italic Markdown, but with every token-specific
- * color replaced by the thinking hue, on `Symbol.for("pi.thinkingMarkdownTheme")`.
+ * color replaced by the thinking hue, as `Bridge.thinkingMarkdownTheme`.
  */
 
 import { CompactLine, realTimers, type Timers } from "./components.ts";
@@ -20,7 +20,6 @@ import type { Config } from "./config.ts";
 export type ThinkingPreview = (
   text: string,
   theme: ThemeLike,
-  pad: number,
   streaming?: boolean,
   owner?: object,
   runIndex?: number,
@@ -36,9 +35,7 @@ export function createThinkingPreview(deps: ThinkingDeps): ThinkingPreview {
   const { config, grouping } = deps;
   const timers = deps.timers ?? realTimers;
 
-  // `pad` is part of the core bridge signature but unused: the gutter already
-  // positions the row, so honoring pad too would double-indent it.
-  return (text, theme, _pad, streaming, owner, runIndex) => {
+  return (text, theme, streaming, owner, runIndex) => {
     const line = new CompactLine(timers);
 
     // Takes no width: thinking has a single detail field, so CompactLine's
@@ -59,7 +56,7 @@ export function createThinkingPreview(deps: ThinkingDeps): ThinkingPreview {
 
     if (owner && runIndex !== undefined) {
       const id = grouping.thinkingId(owner, runIndex);
-      line.setRow(() => grouping.rowFor(id, new Painter(theme, config), paint), () => grouping.open(id));
+      line.setRow(() => grouping.rowFor(id, new Painter(theme, config), paint), (onHeader) => grouping.click(id, onHeader));
     } else {
       line.setRow(paint);
     }

package/src/tool-renderer.ts

@@ -1,8 +1,8 @@
 /**
  * FEATURE 1: the compact tool renderer.
  *
- * Installed on the process-global bridge `Symbol.for("pi.defaultToolRenderer")`
- * and consulted by the prototype wrappers in `core-patch.ts`.
+ * Installed as `Bridge.toolRenderer` (see `bridge.ts`) and consulted by the
+ * prototype wrappers in `core-patch.ts`.
  *
  * Core overrides RENDERING only. Native tool definitions keep their schema,
  * `execute()`, and builtin source ownership — that ownership is what lets
@@ -172,17 +172,28 @@ export function createToolRenderer(deps: RendererDeps): ToolRenderer {
 
       // Painted at render time, because the detail budget depends on the real
       // viewport width and TUI only reveals it during render().
+      const expanded = context.expanded === true;
       const paint = (width: number) => {
         const painter = new Painter(theme, config);
         const badge = timerBadge(status.elapsed, config);
+        // Expanded (Ctrl+O): the full details, wrapped by CompactLine instead of
+        // truncated, so a long command is readable.
         const { label, details } = describeTool(name, args, {
-          expanded: context.expanded === true,
-          budget: detailBudget(width, status.glyph, name, badge),
-          config,
+          budget: expanded ? undefined : detailBudget(width, status.glyph, name, badge),
         });
         // No background while executing — the animated timer already signals
         // activity, and a highlight flashing on each repaint was distracting.
-        return painter.labeled({ glyph: status.glyph, glyphColor: status.color, label, badge, details });
+        // One colour for glyph, label and gutter (the gutter follows the label), so
+        // a failed row is red all over and a done one is label-coloured all over.
+        return painter.labeled({
+          glyph: status.glyph,
+          glyphColor: status.color,
+          label,
+          labelColor: status.color,
+          badge,
+          details,
+          wrap: expanded,
+        });
       };
 
       // EVERY call is observed, so a non-foldable one still cuts a run. Core
@@ -193,10 +204,10 @@ export function createToolRenderer(deps: RendererDeps): ToolRenderer {
         component.setRow(paint);
         return component;
       }
-      grouping.observe(id, summaryName(name, args), status.outcome, context.expanded === true);
+      grouping.observe(id, summaryName(name, args), status.outcome, expanded);
       component.setRow(
         (width) => grouping.rowFor(id, new Painter(theme, config), () => paint(width)),
-        () => grouping.open(id),
+        (onHeader) => grouping.click(id, onHeader),
       );
       return component;
     },
@@ -247,8 +258,8 @@ function detailBudget(width: number, glyph: string, label: string, badge: string
  *
  * Two caches on purpose: core's renderer path passes `lastComponent`, but its
  * FALLBACK path always passes undefined, so `context.state` is the only stable
- * per-call cache there. Allocating a fresh row per repaint used to start another
- * 1s ticker while clearing none — an interval leak that froze the UI.
+ * per-call cache there. Allocating a fresh row per repaint would start another
+ * 1s ticker while clearing none — an interval leak that freezes the UI.
  */
 function reuseRow(context: CallContext & { lastComponent?: unknown }, timers: Timers): CompactLine {
   const cached =