@pi-kaush/pi-tool-call-markers 0.2.9 → 0.2.11

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 ## Unreleased
 
+- Add `/toggle-info`: hide tool calls and thinking entirely, or restore them
+  collapsed. Execution rows (including user-run `!` blocks) are lifted out of
+  the render pass via the shared chat-container hook; thinking blocks are
+  stripped before Pi builds the label/expanded block and replayed on restore.
+  Every session starts visible, and Ctrl+O/Ctrl+T behavior is unchanged when
+  visible. The toggle state lives on globalThis because Pi loads each package
+  entrypoint through jiti with module caching disabled — module-level state
+  would otherwise be duplicated between entrypoints.
+- Adopt Pi's native content-color split in collapsed rows: tool names ride
+  `toolTitle` and call content/outcomes ride `toolOutput` (structural
+  chrome stays muted; failed rows stay uniformly error).
+- Quiet the settled "+ Thought" label to the muted tone collapsed tool
+  calls use; only the live "⠋ Thinking…" spinner keeps the session's active
+  thinking-level tint (thinkingOff…thinkingMax), re-tinting on
+  thinking_level_select; the expanded thinking block is untouched. The
+  PI_TOOL_CALL_MARKERS_THOUGHT_COLOR values are `level` (default),
+  `mdheading`, and `inherit`; the midpoint `gray` variant and its RGB
+  color math are gone.
+- Paint user-run `!` bash block surfaces with the theme's
+  `userMessageBg` token instead of a hardcoded hex, matching
+  pi-content-layout's prompt surfaces under any theme.
+- Show subagent progress in the collapsed plan headline: while running, the tail reads `→ N turns · provider/model` in the warning tone from streamed result details; settled calls keep the same `→ N turns · provider/model` in muted instead of a bare `→ done` (turns aggregate across tasks, model only when all tasks agree).
+- Source the settled "+ Thought" label color from the theme's mdHeading
+  token (orange in cobalt2, amber in Pi's stock themes) instead of a
+  hardcoded RGB. The PI_TOOL_CALL_MARKERS_THOUGHT_COLOR experiment values
+  are now `mdheading` (default), `gray`, and `inherit`.
 - Fix: preserve the visible text of hyperlink-wrapped paths in collapsed rows. Pi renders `read` call paths as OSC 8 hyperlinks (`ESC]8;;url ESC\ <path> ESC]8;; ESC\`); the previous greedy OSC strip consumed the path text along with the sequences, collapsing `% read: README.md:1-400` to `% read: :1-400`. OSC payloads now end at their first BEL/ST terminator, so `read`/`write`/`ls` rows show their filenames again.
 - Show settled `edit` changes inline: the call line gains a `+added/-removed` outcome stat, and the display diff from `result.details.diff` renders as a bounded block underneath (`+` lines in the added tone, `-` in the removed tone, context muted, `...` for folded regions; capped at 12 lines with a `+N more` tail). `Ctrl+O` still returns Pi's full native diff.
 - Render subagent plans with a `&` marker instead of `%`, so delegated calls read differently from ordinary tool rows (both the parsed plan shape and the generic fallback).

package/README.md

@@ -2,6 +2,14 @@
 
 Give Pi's collapsed tool calls a quiet, width-safe transcript shell while preserving native details under `Ctrl+O`. The package also includes a display-only thinking-block adapter.
 
+### Install
+
+```fish
+pi install npm:@pi-kaush/pi-tool-call-markers
+```
+
+Restart Pi or run `/reload`.
+
 ## What it changes
 
 Collapsed tool rows use semantic theme colors with no gear, background fill, box padding, or filled blank rows:
@@ -36,6 +44,8 @@ A recognized `subagent` call renders as an unboxed plan in the shared tool aesth
 
 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.
 
+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.
 
 ## Edit diffs
@@ -50,6 +60,14 @@ This package owns every **execution row** in the transcript: collapsed tool call
 
 One shared visual contract crosses the line: `!` blocks align with message text, so their inset mirrors `pi-content-layout`'s message `contentInset` (see `src/bash-block.ts`). Change indentation in both packages together.
 
+## Hiding info entirely: /toggle-info
+
+The default transcript keeps tool calls and thinking collapsed, and Ctrl+O /
+Ctrl+T expand them as usual. When you want prose only, `/toggle-info` hides
+tool calls (including user-run `!` blocks) and thinking completely; running it
+again restores the collapsed view. The toggle is per-session: every session
+starts visible.
+
 ## Bundled thinking-block extension
 
 The second package entrypoint, `src/thinking-block-merger.ts`, combines only directly adjacent `thinking` blocks in a display copy. Tool calls, text, provider blocks, signatures, and stored session messages are unchanged.
@@ -63,15 +81,9 @@ When Pi exposes its per-row hidden-thinking and streaming fields, hidden reasoni
 
 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`. Visible-thinking mode remains native. There is no interval, timeout, render request, model call, or network work.
 
-## Install
-
-```bash
-pi install npm:@pi-kaush/pi-tool-call-markers
-```
-
-For local development:
+## Local development
 
-```bash
+```fish
 pi \
   -e ./extensions/pi-tool-call-markers/src/index.ts \
   -e ./extensions/pi-tool-call-markers/src/thinking-block-merger.ts

package/package.json

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

package/src/bash-block.ts

@@ -4,13 +4,24 @@ import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 type ThemeLike = {
   bold(text: string): string;
   fg(color: string, text: string): string;
+  getBgAnsi?(color: string): string;
 };
 
 const BASH_BLOCK_PATCHED = Symbol.for("kg.pi.bashBlock.v1");
 
-// The prompt surface uses a fixed near-black green tint instead of the
-// theme's selectedBg token so every user-input surface stays identical.
-const PROMPT_SURFACE_BG = "\x1b[48;2;7;19;18m"; // #071312
+// The prompt surface paints with the theme's userMessageBg token, matching
+// pi-content-layout's surfaces. userMessageBg is a required pi theme token;
+// the legacy hex remains only as a fallback for theme lookalikes without
+// getBgAnsi.
+const PROMPT_SURFACE_BG_FALLBACK = "\x1b[48;2;7;19;18m"; // #071312
+
+function promptSurfaceBg(theme: ThemeLike): string {
+  try {
+    return theme.getBgAnsi?.("userMessageBg") ?? PROMPT_SURFACE_BG_FALLBACK;
+  } catch {
+    return PROMPT_SURFACE_BG_FALLBACK;
+  }
+}
 const PROMPT_RAIL = "▎";
 
 // User-run bash blocks align with the message inset pi-content-layout
@@ -109,16 +120,17 @@ function renderRailedBlockLines(
   }
   const bodyWidth = blockWidth - visibleWidth(PROMPT_RAIL);
   const margin = " ".repeat(inset);
+  const surfaceBg = promptSurfaceBg(theme);
   return lines.map((line) => {
     const { controls, content } = splitLeadingSemanticControls(line);
-    const recolored = replaceBackground(content, PROMPT_SURFACE_BG);
+    const recolored = replaceBackground(content, surfaceBg);
     const rail = theme.fg(railColor, PROMPT_RAIL);
     // One extra leading space inside the body, so submitted text sits two
     // columns right of the rail instead of one.
     const body = paintBackground(
       ` ${fitLine(recolored, Math.max(1, bodyWidth - 1))}`,
       bodyWidth,
-      PROMPT_SURFACE_BG,
+      surfaceBg,
     );
     return `${controls}${margin}${rail}${body}${margin}`;
   });
@@ -186,6 +198,7 @@ function renderBashBlockLines(
 type BashRow = { status?: unknown };
 
 type BashBlockPatchState = {
+  owners: number;
   theme?: ThemeLike;
   cache: WeakMap<object, { width: number; src: string[]; lines: string[] }>;
   originalRender: (width: number) => string[];
@@ -207,9 +220,13 @@ function installBashBlockPatch(): BashBlockPatchState | undefined {
     if (!proto || typeof proto.render !== "function") return undefined;
 
     const existing = proto[BASH_BLOCK_PATCHED];
-    if (existing) return existing;
+    if (existing) {
+      existing.owners++;
+      return existing;
+    }
 
     const state: BashBlockPatchState = {
+      owners: 1,
       cache: new WeakMap(),
       originalRender: proto.render,
     };
@@ -265,7 +282,9 @@ function installBashBlockPatch(): BashBlockPatchState | undefined {
 }
 
 function uninstallBashBlockPatch(state: BashBlockPatchState | undefined): void {
-  if (!state) return;
+  if (!state || state.owners <= 0) return;
+  state.owners--;
+  if (state.owners > 0) return;
   const proto = BashExecutionComponent?.prototype as unknown as BashRow & {
     [BASH_BLOCK_PATCHED]?: BashBlockPatchState;
     render?: (width: number) => string[];
@@ -280,10 +299,5 @@ function uninstallBashBlockPatch(state: BashBlockPatchState | undefined): void {
   delete proto[BASH_BLOCK_PATCHED];
 }
 
-export {
-  PROMPT_RAIL,
-  PROMPT_SURFACE_BG,
-  installBashBlockPatch,
-  uninstallBashBlockPatch,
-};
+export { PROMPT_RAIL, installBashBlockPatch, uninstallBashBlockPatch };
 export type { BashBlockPatchState };

package/src/index.ts

@@ -15,6 +15,7 @@ import {
   uninstallBashBlockPatch,
 } from "./bash-block.ts";
 import { runChatContainerHooks } from "./container-hooks.ts";
+import { installInfoVisibility } from "./info-visibility.ts";
 
 const OUTER_INSET = 2;
 const GROUP_MARKER = "%";
@@ -63,13 +64,13 @@ type ToolExecutionRow = {
 };
 
 type PresentationPatchState = {
+  owners: number;
   theme?: ThemeLike;
   collapseParallel: boolean;
   groupCache: WeakMap<ToolExecutionRow, GroupRenderCache>;
   collapsedCache: WeakMap<ToolExecutionRow, CollapsedRenderCache>;
   rowVersions: WeakMap<ToolExecutionRow, number>;
   rowGroups: WeakMap<ToolExecutionRow, ToolExecutionRow[]>;
-  rowSignatures: WeakMap<ToolExecutionRow, string>;
   originalRender: (width: number) => string[];
   originalUpdateDisplay: () => void;
   patchedRender?: (width: number) => string[];
@@ -77,6 +78,7 @@ type PresentationPatchState = {
 };
 
 type GroupingPatchState = {
+  owners: number;
   presentation: PresentationPatchState;
   originalRender: (width: number) => string[];
   patchedRender?: (width: number) => string[];
@@ -111,12 +113,11 @@ function stripAnsi(text: string): string {
   return text.replace(ANSI_RE, "");
 }
 
-// Command output can carry cursor-moving control bytes (git progress writes
-// \r) and raw terminal sequences. Collapsed rows are single-line, so result
-// and scraped text is stripped of display sequences and control bytes before
-// it can reach a row; a bare \r would otherwise return the cursor to column 0
-// and overwrite the row's own marker.
-const INLINE_CONTROL_RE = /[\x00-\x08\x0b-\x1f\x7f]/g;
+// Command output can carry cursor-moving control bytes, raw terminal
+// sequences, line feeds, and tabs. Collapsed rows are single-line, so result
+// and scraped text is stripped of display sequences and all C0 controls before
+// it can reach a row; otherwise control bytes could split or overwrite it.
+const INLINE_CONTROL_RE = /[\x00-\x1f\x7f]/g;
 // OSC first: the two-byte alternative would otherwise consume `\x1b]` and
 // leave the hyperlink payload behind as visible text. OSC sequences (OSC 8
 // hyperlinks, titles) end at their first BEL/ST terminator; a payload match
@@ -134,11 +135,9 @@ function hasVisibleContent(line: string): boolean {
   return stripAnsi(line).trim().length > 0;
 }
 
-// State-transition fingerprint used by both the updateDisplay version bump
-// and the settled-row render cache. It deliberately covers only shape
-// transitions (partial/expanded/result/error): while a row is partial its
-// content streams and it is never cached, and once settled the rendered
-// content is fully determined by this fingerprint + width + theme.
+// Shape fingerprint used in settled-row cache keys. It protects against
+// direct state mutation followed by render without updateDisplay; real
+// component display updates invalidate the cache through rowVersions.
 function rowSignatureOf(row: ToolExecutionRow): string {
   return `${row.isPartial}|${row.expanded}|${row.result ? 1 : 0}|${row.result?.isError ? 1 : 0}`;
 }
@@ -253,7 +252,7 @@ function capFailureTail(tail: string, cap: number, theme: ThemeLike): string {
 }
 
 function renderedGenericOutcome(theme: ThemeLike): string {
-  return theme.fg("muted", "→ done");
+  return theme.fg("toolOutput", "→ done");
 }
 
 // The MCP adapter stashes its call's first line in renderer state before
@@ -707,7 +706,7 @@ function renderedOutcome(
 ): string | undefined {
   const summary = outcomeSummary(row);
   if (!summary) return undefined;
-  return theme.fg("muted", `→ ${summary}`);
+  return theme.fg("toolOutput", `→ ${summary}`);
 }
 
 function renderedGroupedOutcome(
@@ -847,7 +846,7 @@ function renderedCallSummary(
 
   const fallback = compactArgs(row.args);
   return fallback
-    ? theme.fg("muted", fallback)
+    ? theme.fg("toolOutput", fallback)
     : theme.fg("muted", "(no arguments)");
 }
 
@@ -860,9 +859,13 @@ function styledCallLabel(
   const match = /^(\S+)(.*)$/s.exec(plain);
   if (!match) return theme.fg(color, plain);
   const rest = match[2] ?? "";
+  // Failed rows stay uniformly error-colored; settled rows use Pi's native
+  // split — toolTitle for the name, toolOutput for the call content.
+  const nameColor = color === "muted" ? "toolTitle" : color;
+  const restColor = color === "muted" ? "toolOutput" : color;
   return (
-    theme.fg(color, theme.bold(match[1] ?? "")) +
-    (rest ? theme.fg(color, `:${rest}`) : "")
+    theme.fg(nameColor, theme.bold(match[1] ?? "")) +
+    (rest ? theme.fg(restColor, `:${rest}`) : "")
   );
 }
 
@@ -901,7 +904,7 @@ function collapsedOutcome(
   }
   if (row.getRenderShell?.() === "self") {
     const editStat = renderedEditDiffStat(row);
-    if (editStat) return theme.fg("muted", `→ ${editStat}`);
+    if (editStat) return theme.fg("toolOutput", `→ ${editStat}`);
     return renderedGenericOutcome(theme);
   }
   return renderedOutcome(row, theme);
@@ -1054,6 +1057,33 @@ function subagentStepPreview(task: string): string {
   return clean.length > 40 ? `${clean.slice(0, 40)}...` : clean;
 }
 
+// Partial and final subagent results both carry per-task usage in details
+// (the subagent extension streams makeDetails snapshots through onUpdate), so
+// this works live and settled. Surface the smallest useful progress — total
+// turns, and the model when every task resolved to the same one.
+function subagentProgressText(row: ToolExecutionRow): string | undefined {
+  const results = row.result?.details?.results;
+  if (!Array.isArray(results) || results.length === 0) return undefined;
+  let turns = 0;
+  const models = new Set<string>();
+  for (const result of results) {
+    if (!isRecord(result)) continue;
+    const usage = result.usage;
+    const turnCount = isRecord(usage) ? usage.turns : undefined;
+    if (typeof turnCount === "number" && Number.isFinite(turnCount)) {
+      turns += turnCount;
+    }
+    const model = result.model ?? result.requestedModel;
+    if (typeof model === "string" && model.trim().length > 0) {
+      models.add(model.trim());
+    }
+  }
+  const parts: string[] = [];
+  if (turns > 0) parts.push(`${turns} turn${turns === 1 ? "" : "s"}`);
+  if (models.size === 1) parts.push(sanitizeInline([...models][0]!));
+  return parts.length > 0 ? parts.join(" · ") : undefined;
+}
+
 // 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),
@@ -1075,20 +1105,22 @@ function renderSubagentPlan(
   // other collapsed-row text so control bytes cannot reach the terminal.
   const displayOf = (agent: string) =>
     theme.fg(nameColor, displayNames.get(agent) ?? sanitizeInline(agent));
+  const detailColor = failed ? "error" : "toolOutput";
   const detailOf = (step: SubagentStep) =>
     theme.fg(
-      color,
+      detailColor,
       `${step.profile ? ` [${sanitizeInline(step.profile)}]` : ""} ${subagentStepPreview(step.task)}`,
     );
 
   const marker = `${theme.fg(color, theme.bold(SUBAGENT_MARKER))} `;
   const budget = Math.max(1, width - visibleWidth(marker));
+  const progress = subagentProgressText(row);
   const outcome = failed
     ? collapsedOutcome(row, budget, theme)
     : isLiveRow(row)
-      ? collapsedOutcome(row, budget, theme)
+      ? theme.fg("warning", progress ? `→ ${progress}` : "…")
       : row.result
-        ? renderedGenericOutcome(theme)
+        ? theme.fg("toolOutput", progress ? `→ ${progress}` : "→ done")
         : theme.fg("warning", "…");
   const headline = (label: string) =>
     marker +
@@ -1100,7 +1132,7 @@ function renderSubagentPlan(
     const step = plan.steps[0]!;
     return [
       headline(
-        theme.fg(color, theme.bold("subagent")) +
+        theme.fg(failed ? "error" : "toolTitle", theme.bold("subagent")) +
           " " +
           displayOf(step.agent) +
           detailOf(step),
@@ -1114,10 +1146,10 @@ function renderSubagentPlan(
       : `parallel (${plan.steps.length} tasks)`;
   const lines = [
     headline(
-      theme.fg(color, theme.bold("subagent")) +
+      theme.fg(failed ? "error" : "toolTitle", theme.bold("subagent")) +
         " " +
-        theme.fg(color, kindLabel) +
-        theme.fg(color, ` [${plan.scope}]`),
+        theme.fg(failed ? "error" : "toolOutput", kindLabel) +
+        theme.fg(failed ? "error" : "toolOutput", ` [${plan.scope}]`),
     ),
   ];
   const shown = plan.steps.slice(0, 3);
@@ -1183,22 +1215,64 @@ function renderCollapsedToolRow(
   return ["", ...insetLines(body, width)];
 }
 
-function groupedCallComponent(
+function groupedChildLabel(
+  row: ToolExecutionRow,
+  width: number,
+  theme: ThemeLike,
+  color: string = "muted",
+): string {
+  const label = collapsedCallLabel(row, width, theme, color);
+  const plain = stripAnsi(label);
+  const toolName = row.toolName ?? "tool";
+  let prefix = "";
+  if (plain === toolName) {
+    prefix = toolName;
+  } else if (plain.startsWith(`${toolName}:`)) {
+    const whitespace = /^\s*/.exec(plain.slice(toolName.length + 1))?.[0] ?? "";
+    prefix = `${toolName}:${whitespace}`;
+  }
+  const prefixWidth = visibleWidth(prefix);
+  const child = sliceByColumn(
+    label,
+    prefixWidth,
+    Math.max(0, visibleWidth(label) - prefixWidth),
+    true,
+  );
+  return child || theme.fg(color, "(no arguments)");
+}
+
+function renderGroupedCallLines(
   rows: ToolExecutionRow[],
+  width: number,
   theme: ThemeLike,
-): ComponentLike {
-  return {
-    render(width: number): string[] {
-      // Every member renders like a singleton — `% tool: call → outcome` per
-      // line with the tool name bolded — no bullets or internal blanks;
-      // settled edits keep their change visible with a bounded diff block.
-      return rows.flatMap((row) => [
-        collapsedHeadline(row, width, theme),
-        ...(row.toolName === "edit" ? renderedEditDiffLines(row, theme) : []),
-      ]);
-    },
-    invalidate() {},
-  };
+): string[] {
+  const lines: string[] = [];
+  let previousToolName: string | undefined;
+  for (const row of rows) {
+    const toolName = row.toolName ?? "tool";
+    if (toolName !== previousToolName) {
+      lines.push(
+        `${theme.fg("muted", GROUP_MARKER)} ${theme.fg("toolTitle", theme.bold(toolName))}`,
+      );
+      previousToolName = toolName;
+    }
+
+    const color = rowHasFailed(row) ? "error" : "muted";
+    const prefix = `  ${theme.fg(color, "•")} `;
+    const budget = Math.max(1, width - visibleWidth(prefix));
+    const label = groupedChildLabel(row, budget, theme, color);
+    const outcome = collapsedOutcome(row, budget, theme);
+    const suffix = theme.fg(color, "…");
+    lines.push(
+      prefix +
+        (outcome
+          ? fitSummaryTail(label, outcome, budget, suffix)
+          : fitSummary(label, budget, suffix)),
+    );
+    if (row.toolName === "edit")
+      lines.push(...renderedEditDiffLines(row, theme));
+  }
+  return lines;
 }
 
 function sameMembers(
@@ -1247,8 +1321,8 @@ function renderGroupedToolRows(
   }
 
   const layout = insetLayout(width);
-  const summary = groupedCallComponent(rows, theme);
-  const lines = ["", ...insetLines(summary.render(layout.contentWidth), width)];
+  const body = renderGroupedCallLines(rows, layout.contentWidth, theme);
+  const lines = ["", ...insetLines(body, width)];
   if (hasLiveMembers) {
     state.groupCache.delete(row);
   } else {
@@ -1347,12 +1421,14 @@ function installGroupingPatch(
 
     const existing = proto[GROUPING_PATCHED];
     if (existing) {
+      existing.owners++;
       existing.presentation = presentation;
       existing.disabled = false;
       return existing;
     }
 
     const state: GroupingPatchState = {
+      owners: 1,
       presentation,
       originalRender: proto.render,
     };
@@ -1400,10 +1476,12 @@ function installGroupingPatch(
 }
 
 function uninstallGroupingPatch(state: GroupingPatchState | undefined): void {
-  if (!state) return;
+  if (!state || state.owners <= 0) return;
+  state.owners--;
+  if (state.owners > 0) return;
   // Even when another extension's wrapper sits on top of ours, grouping must
-  // not outlive its owner: the wrapper delegates once disabled, and a later
-  // reinstall re-enables it.
+  // not outlive its final owner: the wrapper delegates once disabled, and a
+  // later reinstall re-enables it.
   state.disabled = true;
   const proto = Container?.prototype as unknown as ComponentContainer & {
     [GROUPING_PATCHED]?: GroupingPatchState;
@@ -1427,7 +1505,10 @@ function installPresentationPatch(): PresentationPatchState | undefined {
     if (!proto) return undefined;
 
     const existing = proto[PRESENTATION_PATCHED];
-    if (existing) return existing;
+    if (existing) {
+      existing.owners++;
+      return existing;
+    }
     const legacy = proto[LEGACY_PRESENTATION_PATCHED];
     if (legacy) {
       proto.render = legacy.originalRender;
@@ -1440,30 +1521,24 @@ function installPresentationPatch(): PresentationPatchState | undefined {
       return undefined;
 
     const state: PresentationPatchState = {
+      owners: 1,
       collapseParallel: envEnabled(COLLAPSE_PARALLEL_ENV, true),
       groupCache: new WeakMap(),
       collapsedCache: new WeakMap(),
       rowVersions: new WeakMap(),
       rowGroups: new WeakMap(),
-      rowSignatures: new WeakMap(),
       originalRender: proto.render,
       originalUpdateDisplay: proto.updateDisplay,
     };
     const patchedUpdateDisplay = function updateDisplayWithCollapsedResult(
       this: ToolExecutionRow,
     ): void {
-      // 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 = rowSignatureOf(this);
-      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);
-      }
+      // Transcript rerenders reuse settled caches, but a real component
+      // display update can change args, results, renderer output, or images
+      // without changing the row's shape signature.
+      state.rowVersions.set(this, (state.rowVersions.get(this) ?? 0) + 1);
+      state.groupCache.delete(this);
+      state.collapsedCache.delete(this);
       state.originalUpdateDisplay.call(this);
     };
     const patchedRender = function renderWithToolPresentation(
@@ -1488,12 +1563,11 @@ function installPresentationPatch(): PresentationPatchState | undefined {
       // it touches. On a long session (~1,000 messages, hundreds of tool
       // rows) that measured at ~80 ms per keystroke — visible input lag.
       //
-      // Settled rows (not partial, not expanded) have fully static render
-      // output, so their collapsed lines are cached keyed by width +
-      // rowSignatureOf + rowVersions + theme sample. updateDisplay bumps
-      // rowVersions on every real state transition, and partial rows
-      // bypass the cache entirely because their content streams. This
-      // mirrors the existing groupCache discipline; keep them in sync.
+      // Settled rows (not partial, not expanded) have static output between
+      // component display updates, so their collapsed lines are cached keyed
+      // by width + rowSignatureOf + rowVersions + theme sample. Every real
+      // updateDisplay call bumps rowVersions and clears both caches; partial
+      // rows bypass the cache because their content streams.
       // ================================================================
       if (!this.isPartial) {
         const signature = rowSignatureOf(this);
@@ -1565,7 +1639,9 @@ function installPresentationPatch(): PresentationPatchState | undefined {
 function uninstallPresentationPatch(
   state: PresentationPatchState | undefined,
 ): void {
-  if (!state) return;
+  if (!state || state.owners <= 0) return;
+  state.owners--;
+  if (state.owners > 0) return;
   const proto =
     ToolExecutionComponent?.prototype as unknown as ToolExecutionRow & {
       [PRESENTATION_PATCHED]?: PresentationPatchState;
@@ -1584,10 +1660,20 @@ function uninstallPresentationPatch(
   delete proto[PRESENTATION_PATCHED];
 }
 
+// TODO(compaction cards): native/failed compaction cards in the transcript
+// are currently rendered by the pi-verbatim-compaction extension. Its
+// src/chat-log.ts is deliberately self-contained (public Pi imports only), so
+// porting here is: drop in that file, registerEntryRenderer(COMPACTION_LOG_TYPE),
+// and wire pi.on("session_compact") / pi.on("session_compact_failed") filtered
+// to fromExtension === false. Do this only if pi-verbatim-compaction is
+// removed or native cards should exist without it; while both are installed,
+// rendering here too would double-render every native compaction.
 export default function (pi: ExtensionAPI) {
   const patch = installPresentationPatch();
   const grouping = patch ? installGroupingPatch(patch) : undefined;
   const bashPatch = installBashBlockPatch();
+  installInfoVisibility(pi);
+  let released = false;
 
   pi.on("session_start", (_event, ctx) => {
     if (patch) patch.theme = ctx.ui.theme;
@@ -1596,6 +1682,8 @@ export default function (pi: ExtensionAPI) {
   });
 
   pi.on("session_shutdown", () => {
+    if (released) return;
+    released = true;
     uninstallGroupingPatch(grouping);
     uninstallPresentationPatch(patch);
     uninstallBashBlockPatch(bashPatch);

package/src/info-visibility-state.ts

@@ -0,0 +1,22 @@
+// Shared toggle state for /toggle-info. Pi loads extension entrypoints through
+// jiti with moduleCache disabled, so each entrypoint's relative-import chain
+// gets its OWN module instances — a plain module-level boolean here would be
+// duplicated between the main entrypoint (the /toggle-info command) and the
+// thinking-block-merger entrypoint (the strip). globalThis keeps it singular.
+
+type InfoVisibilityState = { hidden: boolean };
+
+const STATE_KEY = Symbol.for("kg.pi.toolCallMarkers.infoVisibility.v1");
+
+function infoVisibilityState(): InfoVisibilityState {
+  const root = globalThis as Record<symbol, InfoVisibilityState | undefined>;
+  return (root[STATE_KEY] ??= { hidden: false });
+}
+
+export function infoVisibilityHidden(): boolean {
+  return infoVisibilityState().hidden;
+}
+
+export function setInfoVisibilityHidden(hidden: boolean): void {
+  infoVisibilityState().hidden = hidden;
+}

package/src/info-visibility.ts

@@ -0,0 +1,74 @@
+import {
+  BashExecutionComponent,
+  type ExtensionAPI,
+  ToolExecutionComponent,
+} from "@earendil-works/pi-coding-agent";
+import { chatContainerHooks } from "./container-hooks.ts";
+import {
+  infoVisibilityHidden,
+  setInfoVisibilityHidden,
+} from "./info-visibility-state.ts";
+import { refreshThinkingVisibility } from "./thinking-block-merger.ts";
+
+function isExecutionRow(child: unknown): boolean {
+  return (
+    child instanceof ToolExecutionComponent ||
+    child instanceof BashExecutionComponent
+  );
+}
+
+// Chat-container hook: while hidden, tool and user-bash rows are lifted out of
+// the child list for the render pass and restored afterwards, so grouping and
+// insets run on prose only. Nested invocations are naturally idempotent: a
+// second pass finds nothing left to remove.
+function infoFilterHook(
+  _container: object,
+  children: unknown[],
+): (() => void) | undefined {
+  if (!infoVisibilityHidden()) return undefined;
+  const removed: Array<[number, unknown]> = [];
+  for (let index = children.length - 1; index >= 0; index--) {
+    if (isExecutionRow(children[index])) {
+      removed.push([index, children[index]!]);
+      children.splice(index, 1);
+    }
+  }
+  if (removed.length === 0) return undefined;
+  return () => {
+    for (const [index, child] of removed.reverse()) {
+      children.splice(index, 0, child);
+    }
+  };
+}
+
+export function installInfoVisibility(pi: ExtensionAPI): void {
+  // The hook registry is process-global; dedupe by name so hot reloads swap
+  // rather than stack.
+  const hooks = chatContainerHooks();
+  for (const hook of [...hooks]) {
+    if (hook.name === infoFilterHook.name) hooks.delete(hook);
+  }
+  hooks.add(infoFilterHook);
+
+  pi.registerCommand("toggle-info", {
+    description: "Hide tool calls and thinking, or restore them collapsed",
+    handler: async (_args, ctx) => {
+      const hidden = !infoVisibilityHidden();
+      setInfoVisibilityHidden(hidden);
+      // Thinking labels/blocks only rebuild on content updates, so replay the
+      // last update per assistant row to apply the new state immediately.
+      refreshThinkingVisibility();
+      ctx.ui.notify(
+        hidden
+          ? "Tool calls and thinking hidden — /toggle-info restores them"
+          : "Tool calls and thinking visible",
+        "info",
+      );
+    },
+  });
+
+  // Every session starts in the default collapsed-but-visible state. No
+  // shutdown reset: extra shutdown handlers would sit between this package's
+  // owner-counted patch releases.
+  pi.on("session_start", () => setInfoVisibilityHidden(false));
+}

package/src/thinking-block-merger.ts

@@ -1,48 +1,42 @@
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { AssistantMessageComponent } from "@earendil-works/pi-coding-agent";
+import { infoVisibilityHidden } from "./info-visibility-state.ts";
 
-const THINKING_GROUPING_PATCHED = Symbol.for("kg.pi.thinkingGrouping.v1");
+const THINKING_GROUPING_PATCHED = Symbol.for("kg.pi.thinkingGrouping.v2");
 const PI_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const SPINNER_INTERVAL_MS = 80;
 
-// Visual experiment for the settled "+ Thought" label. "inherit" keeps Pi's
-// native styling (italic + thinkingText); "gray" sits halfway between the
-// muted and text theme colors. The env var overrides the default so the
-// variants can be compared without editing code or republishing.
+// Visual treatment for the collapsed thinking label. The live "Thinking…"
+// spinner tints with the session's active thinking-level color
+// (thinkingOff…thinkingMax), so progress reads as activity; the settled
+// "+ Thought" row drops to the muted token collapsed tool calls use, so
+// finished reasoning stops advertising the level. "inherit" keeps Pi's
+// native styling (italic + thinkingText) for both states, and "mdheading"
+// rides the theme's mdHeading token for both. The env var overrides the
+// default so variants can be compared without republishing. Only the
+// collapsed label is restyled — the expanded thinking block keeps Pi's
+// thinkingText.
 const THOUGHT_LABEL_COLOR_ENV = "PI_TOOL_CALL_MARKERS_THOUGHT_COLOR";
-type ThoughtLabelColor = "inherit" | "orange" | "gray";
-const DEFAULT_THOUGHT_LABEL_COLOR: ThoughtLabelColor = "orange";
-// cobalt2's orange token (#ffb86c).
-const THOUGHT_LABEL_ORANGE = { r: 255, g: 184, b: 108 };
+type ThoughtLabelColor = "inherit" | "level" | "mdheading";
+const DEFAULT_THOUGHT_LABEL_COLOR: ThoughtLabelColor = "level";
 
 function thoughtLabelColorChoice(): ThoughtLabelColor {
   const raw = process.env[THOUGHT_LABEL_COLOR_ENV];
-  return raw === "inherit" || raw === "orange" || raw === "gray"
+  return raw === "inherit" || raw === "level" || raw === "mdheading"
     ? raw
     : DEFAULT_THOUGHT_LABEL_COLOR;
 }
 
-const CUBE_VALUES = [0, 95, 135, 175, 215, 255];
-const BASIC_ANSI_RGB: Array<[number, string] | undefined> = [
-  [0, "#000000"],
-  [1, "#800000"],
-  [2, "#008000"],
-  [3, "#808000"],
-  [4, "#000080"],
-  [5, "#800080"],
-  [6, "#008080"],
-  [7, "#c0c0c0"],
-  [8, "#808080"],
-  [9, "#ff0000"],
-  [10, "#00ff00"],
-  [11, "#ffff00"],
-  [12, "#0000ff"],
-  [13, "#ff00ff"],
-  [14, "#00ffff"],
-  [15, "#ffffff"],
-];
-
-type Rgb = { r: number; g: number; b: number };
+// thinkingLevel values map onto theme tokens: "xhigh" → thinkingXhigh etc.
+const LEVEL_TOKEN: Record<string, string> = {
+  off: "thinkingOff",
+  minimal: "thinkingMinimal",
+  low: "thinkingLow",
+  medium: "thinkingMedium",
+  high: "thinkingHigh",
+  xhigh: "thinkingXhigh",
+  max: "thinkingMax",
+};
 
 type ThemeDetail = {
   fg(color: string, text: string): string;
@@ -51,128 +45,50 @@ type ThemeDetail = {
 };
 
 let activeTheme: ThemeDetail | undefined;
+let activeLevel: (() => string) | undefined;
 
-function hexToRgb(hex: string): Rgb | undefined {
-  const match = /^#([0-9a-f]{6})$/i.exec(hex.trim());
-  if (!match) return undefined;
-  const value = parseInt(match[1]!, 16);
-  return { r: value >> 16, g: (value >> 8) & 255, b: value & 255 };
-}
-
-// Mirrors Pi's own mapping so a named color can round-trip through a
-// 256-color terminal (e.g. when COLORFGBG forces 256color mode).
-function ansi256ToRgb(index: number): Rgb | undefined {
-  if (index < 16) {
-    const hex = BASIC_ANSI_RGB[index]?.[1];
-    return hex ? hexToRgb(hex) : undefined;
-  }
-  if (index < 232) {
-    const cube = index - 16;
-    const channel = (n: number) => (n === 0 ? 0 : 55 + n * 40);
-    return {
-      r: channel(Math.floor(cube / 36)),
-      g: channel(Math.floor((cube % 36) / 6)),
-      b: channel(cube % 6),
-    };
-  }
-  const gray = 8 + (index - 232) * 10;
-  return { r: gray, g: gray, b: gray };
-}
-
-function rgbToAnsi256({ r, g, b }: Rgb): number {
-  const nearest = (value: number) =>
-    CUBE_VALUES.reduce(
-      (best, candidate) =>
-        Math.abs(candidate - value) < Math.abs(best - value) ? candidate : best,
-      0,
-    );
-  const cubeR = nearest(r);
-  const cubeG = nearest(g);
-  const cubeB = nearest(b);
-  const cubeDistance =
-    (r - cubeR) ** 2 * 0.299 +
-    (g - cubeG) ** 2 * 0.587 +
-    (b - cubeB) ** 2 * 0.114;
-  const luminance = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
-  const grayStep = Math.max(0, Math.min(23, Math.round((luminance - 8) / 10)));
-  const grayValue = 8 + grayStep * 10;
-  const grayDistance = (luminance - grayValue) ** 2;
-  const spread = Math.max(r, g, b) - Math.min(r, g, b);
-  if (spread < 10 && grayDistance < cubeDistance) return 232 + grayStep;
-  return (
-    16 +
-    36 * CUBE_VALUES.indexOf(cubeR) +
-    6 * CUBE_VALUES.indexOf(cubeG) +
-    CUBE_VALUES.indexOf(cubeB)
-  );
-}
-
-function parseAnsiFgRgb(ansi: string): Rgb | undefined {
-  if (/^\x1b\[39m$/.test(ansi)) return undefined;
-  const truecolor = /^\x1b\[38;2;(\d+);(\d+);(\d+)m$/.exec(ansi);
-  if (truecolor) {
-    return {
-      r: Number(truecolor[1]),
-      g: Number(truecolor[2]),
-      b: Number(truecolor[3]),
-    };
-  }
-  const indexed = /^\x1b\[38;5;(\d+)m$/.exec(ansi);
-  if (indexed) return ansi256ToRgb(Number(indexed[1]));
-  const basic = /^\x1b\[(9[0-7]|3[0-7])m$/.exec(ansi);
-  if (basic) {
-    const code = Number(basic[1]);
-    return ansi256ToRgb(code >= 90 ? code - 90 + 8 : code - 30);
-  }
-  return undefined;
-}
-
-function fgRgbAnsi({ r, g, b }: Rgb): string {
-  if (activeTheme?.getColorMode?.() === "256color") {
-    return `\x1b[38;5;${rgbToAnsi256({ r, g, b })}m`;
-  }
-  return `\x1b[38;2;${r};${g};${b}m`;
-}
+type LabelStyle = { prefix: string; suffix: string };
+let liveLabelStyle: LabelStyle | undefined;
+let settledLabelStyle: LabelStyle | undefined;
 
-function midpointRgb(a: Rgb, b: Rgb): Rgb {
-  return {
-    r: Math.round((a.r + b.r) / 2),
-    g: Math.round((a.g + b.g) / 2),
-    b: Math.round((a.b + b.b) / 2),
-  };
+function styledWith(token: string): LabelStyle | undefined {
+  const ansi = activeTheme?.getFgAnsi?.(token);
+  if (!ansi) return undefined;
+  // The styled label replaces Pi's italicized Text node wholesale (see
+  // restyleHiddenThinkingLabel). The leading italic-off still matters: the
+  // TUI's diff renderer can skip bytes shared with the previously drawn
+  // italic line, leaving the terminal in italic state otherwise.
+  return { prefix: `\x1b[23m${ansi}`, suffix: "\x1b[39m" };
 }
 
-let thoughtLabelPrefix = "";
-let thoughtLabelSuffix = "";
-
 function updateThoughtLabelStyle(): void {
-  thoughtLabelPrefix = "";
-  thoughtLabelSuffix = "";
+  liveLabelStyle = undefined;
+  settledLabelStyle = undefined;
   const choice = thoughtLabelColorChoice();
   if (choice === "inherit" || !activeTheme) return;
 
-  let rgb: Rgb | undefined;
-  if (choice === "orange") {
-    rgb = THOUGHT_LABEL_ORANGE;
-  } else if (activeTheme.getFgAnsi) {
-    const muted = parseAnsiFgRgb(activeTheme.getFgAnsi("muted"));
-    const text = parseAnsiFgRgb(activeTheme.getFgAnsi("text"));
-    if (muted && text) rgb = midpointRgb(muted, text);
-  }
-  if (!rgb) return;
+  const token =
+    choice === "mdheading"
+      ? "mdHeading"
+      : (LEVEL_TOKEN[activeLevel?.() ?? "off"] ?? "thinkingOff");
+  liveLabelStyle = styledWith(token);
+  settledLabelStyle =
+    choice === "mdheading" ? liveLabelStyle : styledWith("muted");
+}
 
-  // The styled label replaces Pi's italicized Text node wholesale (see
-  // restyleHiddenThinkingLabel). The leading italic-off still matters: the
-  // TUI's diff renderer can skip bytes shared with the previously drawn
-  // italic line, leaving the terminal in italic state otherwise.
-  thoughtLabelPrefix = `\x1b[23m${fgRgbAnsi(rgb)}`;
-  thoughtLabelSuffix = "\x1b[39m";
+// The settled label is the finalized "+ Thought" row; every other label is
+// the live spinner.
+function isSettledThoughtLabel(label: string): boolean {
+  return label.startsWith("+ Thought");
 }
 
 export function visibleThoughtLabel(label: string): string {
-  if (!thoughtLabelPrefix) return label;
+  const style = isSettledThoughtLabel(label)
+    ? settledLabelStyle
+    : liveLabelStyle;
+  if (!style) return label;
   const raw = label.replace(/\x1b\[[0-9;]*m/g, "");
-  return `${thoughtLabelPrefix}${raw}${thoughtLabelSuffix}`;
+  return `${style.prefix}${raw}${style.suffix}`;
 }
 
 type AssistantMessageLike = {
@@ -198,7 +114,6 @@ type TextLikeChild = {
 // terminal. Swap the node's text for a self-contained styled version after
 // each native render pass instead.
 function restyleHiddenThinkingLabel(row: AssistantMessageRow): void {
-  if (!thoughtLabelPrefix) return;
   if (
     row.hideThinkingBlock !== true ||
     typeof row.hiddenThinkingLabel !== "string"
@@ -208,6 +123,7 @@ function restyleHiddenThinkingLabel(row: AssistantMessageRow): void {
   const label = row.hiddenThinkingLabel;
   const children = row.contentContainer?.children;
   if (!Array.isArray(children)) return;
+  if (!liveLabelStyle && !settledLabelStyle) return;
   const styled = visibleThoughtLabel(label);
   for (const child of children) {
     const textChild = child as TextLikeChild | undefined;
@@ -228,6 +144,7 @@ type ThinkingTiming = {
 };
 
 type ThinkingGroupingPatchState = {
+  owners: number;
   originalUpdateContent: (
     message: AssistantMessageLike,
     ...args: unknown[]
@@ -237,6 +154,12 @@ type ThinkingGroupingPatchState = {
     ...args: unknown[]
   ) => void;
   timings: WeakMap<AssistantMessageRow, ThinkingTiming>;
+  // Last update per row, so /toggle-info can replay rows without waiting for
+  // new content. Cleared on session start; rows are session-lived anyway.
+  rows: Map<
+    AssistantMessageRow,
+    { message: AssistantMessageLike; args: unknown[] }
+  >;
 };
 
 type ThinkingContentLike = {
@@ -330,6 +253,40 @@ function lifecycleLabel(
   return "+ Thought";
 }
 
+function stripThinkingBlocks(
+  message: AssistantMessageLike,
+): AssistantMessageLike {
+  const content = message.content;
+  if (!Array.isArray(content) || !content.some(isThinkingContent)) {
+    return message;
+  }
+  return { ...message, content: content.filter((c) => !isThinkingContent(c)) };
+}
+
+// Replays the last update on every tracked assistant row so a /toggle-info
+// flip applies immediately instead of waiting for the next content pass.
+export function refreshThinkingVisibility(): void {
+  try {
+    const proto = AssistantMessageComponent?.prototype as unknown as {
+      [THINKING_GROUPING_PATCHED]?: ThinkingGroupingPatchState;
+    };
+    const state = proto?.[THINKING_GROUPING_PATCHED];
+    if (!state?.patchedUpdateContent) return;
+    for (const [row, tracked] of state.rows) {
+      try {
+        Reflect.apply(state.patchedUpdateContent, row, [
+          tracked.message,
+          ...tracked.args,
+        ]);
+      } catch {
+        // A row that changed shape mid-flight keeps its last render.
+      }
+    }
+  } catch {
+    // Cosmetic replay; never break the toggle.
+  }
+}
+
 function applyHiddenThinkingLabel(
   row: AssistantMessageRow,
   message: AssistantMessageLike,
@@ -367,11 +324,17 @@ function installThinkingGroupingPatch():
     if (!proto || typeof proto.updateContent !== "function") return undefined;
 
     const existing = proto[THINKING_GROUPING_PATCHED];
-    if (existing) return existing;
+    if (existing) {
+      existing.owners++;
+      existing.rows ??= new Map();
+      return existing;
+    }
 
     const state: ThinkingGroupingPatchState = {
+      owners: 1,
       originalUpdateContent: proto.updateContent,
       timings: new WeakMap(),
+      rows: new Map(),
     };
     const patchedUpdateContent = function updateContentWithCombinedThinking(
       this: AssistantMessageRow,
@@ -380,9 +343,14 @@ function installThinkingGroupingPatch():
     ): void {
       // Grouping and labels are cosmetic. Each fails open independently, and
       // the original renderer is still called exactly once with every arg.
+      state.rows.set(this, { message, args });
       let combined = message;
       try {
-        combined = combineAdjacentThinking(message);
+        // Pi builds the hidden label and the visible block only when thinking
+        // blocks exist, so stripping them hides both at once.
+        combined = infoVisibilityHidden()
+          ? stripThinkingBlocks(message)
+          : combineAdjacentThinking(message);
       } catch {
         // Preserve the original message intact.
       }
@@ -414,8 +382,10 @@ function installThinkingGroupingPatch():
 
 function uninstallThinkingGroupingPatch(
   state: ThinkingGroupingPatchState | undefined,
-): void {
-  if (!state) return;
+): boolean {
+  if (!state || state.owners <= 0) return false;
+  state.owners--;
+  if (state.owners > 0) return false;
   const proto =
     AssistantMessageComponent?.prototype as unknown as AssistantMessageRow & {
       [THINKING_GROUPING_PATCHED]?: ThinkingGroupingPatchState;
@@ -428,23 +398,44 @@ function uninstallThinkingGroupingPatch(
     proto[THINKING_GROUPING_PATCHED] !== state ||
     proto.updateContent !== state.patchedUpdateContent
   ) {
-    return;
+    return true;
   }
   proto.updateContent = state.originalUpdateContent;
   delete proto[THINKING_GROUPING_PATCHED];
+  return true;
 }
 
 export default function (pi: ExtensionAPI) {
   const patch = installThinkingGroupingPatch();
+  let released = false;
   pi.on("session_start", (_event, ctx) => {
     if (ctx.mode !== "tui") return;
+    try {
+      const proto = AssistantMessageComponent?.prototype as unknown as {
+        [THINKING_GROUPING_PATCHED]?: ThinkingGroupingPatchState;
+      };
+      proto?.[THINKING_GROUPING_PATCHED]?.rows.clear();
+    } catch {
+      // Best effort; stale rows would only linger until the process exits.
+    }
     activeTheme = ctx.ui.theme as unknown as ThemeDetail;
+    activeLevel = () => {
+      try {
+        return pi.getThinkingLevel();
+      } catch {
+        return "off";
+      }
+    };
     updateThoughtLabelStyle();
   });
+  pi.on("thinking_level_select", () => updateThoughtLabelStyle());
   pi.on("session_shutdown", () => {
+    if (released) return;
+    released = true;
+    if (patch && !uninstallThinkingGroupingPatch(patch)) return;
     activeTheme = undefined;
-    thoughtLabelPrefix = "";
-    thoughtLabelSuffix = "";
-    uninstallThinkingGroupingPatch(patch);
+    activeLevel = undefined;
+    liveLabelStyle = undefined;
+    settledLabelStyle = undefined;
   });
 }