@hheei/pi-ext-ui 0.7.0 → 0.7.2

package/dist/background.d.ts

@@ -9,3 +9,10 @@ import type { Theme, ThemeBg } from "@earendil-works/pi-coding-agent";
  * one paints the rows it draws, not because this function tracks ANSI state.
  */
 export declare function backgroundFill(theme: Theme, token: ThemeBg): (text: string) => string;
+/**
+ * One independent surface: a filled padding row above and below, every row reaching `width`.
+ *
+ * A block that owns a surface also owns its breathing room, so two adjacent blocks separate with
+ * their own padding rows instead of sharing one unstyled gap.
+ */
+export declare function surfaceBlock(theme: Theme, token: ThemeBg, rows: readonly string[], width: number): string[];

package/dist/background.js

@@ -1,3 +1,4 @@
+import { visibleWidth } from "@earendil-works/pi-tui";
 const MARK = "\u0000";
 /** Any SGR sequence: parameters are `;`-separated, an empty parameter list means reset. */
 const SGR = /\x1b\[([0-9;]*)m/g;
@@ -29,3 +30,15 @@ export function backgroundFill(theme, token) {
         return `${out}${text.slice(from)}${end}`;
     };
 }
+/**
+ * One independent surface: a filled padding row above and below, every row reaching `width`.
+ *
+ * A block that owns a surface also owns its breathing room, so two adjacent blocks separate with
+ * their own padding rows instead of sharing one unstyled gap.
+ */
+export function surfaceBlock(theme, token, rows, width) {
+    const fill = backgroundFill(theme, token);
+    const pad = fill(" ".repeat(Math.max(0, width)));
+    const body = rows.map((row) => fill(row + " ".repeat(Math.max(0, width - visibleWidth(row)))));
+    return [pad, ...body, pad];
+}

package/dist/extension.js

@@ -4,7 +4,6 @@ import { createMessageView } from "./message-view.js";
 import { createOptionalToolRendererFactory, registerCollapsibleToolRenderer } from "./renderer.js";
 import { ToolUiRuntime } from "./runtime.js";
 import { activityGroupsEnabled, createToolGroupSettings, toolBackgroundsEnabled, } from "./settings.js";
-import { TOOL_SPINNER_INTERVAL_MS } from "./tool-view.js";
 export default function (pi) {
     // One runtime per extension instance: two Pi runtimes in one process never share these facts.
     const runtime = new ToolUiRuntime();
@@ -27,7 +26,7 @@ export default function (pi) {
                 if (patch !== undefined)
                     return;
                 try {
-                    patch = installHostToolGroups(context.extension);
+                    patch = installHostToolGroups(context.extension, () => runtime.backgrounds);
                     redrawGroups = patch.requestRender;
                 }
                 catch (error) {
@@ -46,47 +45,14 @@ export default function (pi) {
                 patch?.beginRun();
                 redrawGroups?.();
             });
-            // A live tool animates its status glyph. The ticker exists only while one is running, and the
-            // frame itself comes from one shared clock, so a phase never restarts on a status change.
-            let liveTools = 0;
-            let ticker;
-            const stopTicker = () => {
-                if (ticker === undefined)
-                    return;
-                clearInterval(ticker);
-                ticker = undefined;
-            };
             const onAgentEnd = pi.on("agent_end", () => {
                 patch?.endRun();
-                // No tool outlives the agent loop, so the animation cannot keep a ticker alive either.
-                liveTools = 0;
-                stopTicker();
                 redrawGroups?.();
             });
-            const onToolStart = pi.on("tool_execution_start", () => {
-                liveTools += 1;
-                if (ticker !== undefined)
-                    return;
-                ticker = setInterval(() => {
-                    if (liveTools === 0 || redrawGroups === undefined) {
-                        stopTicker();
-                        return;
-                    }
-                    redrawGroups();
-                }, TOOL_SPINNER_INTERVAL_MS);
-            });
-            const onToolEnd = pi.on("tool_execution_end", () => {
-                liveTools = Math.max(0, liveTools - 1);
-                if (liveTools === 0)
-                    stopTicker();
-            });
+            // The live glyph clock lives with the rows that draw it, so nothing here ticks.
             context.resources.add("run-clock", () => {
                 onAgentStart();
                 onAgentEnd();
-                onToolStart();
-                onToolEnd();
-                stopTicker();
-                liveTools = 0;
             });
             context.resources.add("tool-group-settings", registerSettings(provider, getRuntimeSettingsRegistry(pi)));
             context.resources.add("tool-groups", () => {

package/dist/host-transcript-patch.d.ts

@@ -1,6 +1,6 @@
 import { type ExtensionContext } from "@earendil-works/pi-coding-agent";
 /** Private to pi-ext-ui: two process hooks, scoped by the actual host UI facade. */
-export declare function installHostToolGroups(context: ExtensionContext): {
+export declare function installHostToolGroups(context: ExtensionContext, background: () => boolean): {
     dispose(): void;
     requestRender(): void;
     beginRun(): void;

package/dist/host-transcript-patch.js

@@ -182,7 +182,7 @@ class NotifyView {
         this.#text.invalidate();
     }
 }
-function attach(host, run) {
+function attach(host, run, background) {
     const chat = host.chat;
     const original = {
         render: chat.render,
@@ -266,6 +266,14 @@ function attach(host, run) {
          */
         const flush = (ended, boundary) => {
             const first = members[0]?.component;
+            // Empty assistant/tool-call placeholders do not replace the last visible tail.
+            const tail = ended
+                ? undefined
+                : [...members]
+                    .reverse()
+                    .find((member) => member.kind !== "thinking" ||
+                    (member.thinking !== undefined && member.thinking !== ""));
+            const inside = members.filter((member) => member !== tail);
             let weight = 0;
             for (const member of members) {
                 if (member.kind === "tool")
@@ -275,26 +283,19 @@ function attach(host, run) {
                     weight += 0.5;
             }
             if (first !== undefined && weight >= 2) {
-                const group = groups.get(first) ?? new ToolGroupView(host.ui, host.requestRender);
-                const tail = ended ? undefined : members.at(-1);
-                const inside = tail === undefined ? members : members.slice(0, -1);
+                const group = groups.get(first) ?? new ToolGroupView(host.ui, host.requestRender, background);
                 const boundaryTime = ended && boundary !== undefined
                     ? (run.observed.get(boundary)?.at ?? performance.now())
                     : undefined;
-                blocks.push({
-                    group,
-                    members: inside,
-                    tail,
-                    requests,
-                    clock: clockOf(members, boundaryTime),
-                });
+                const clock = clockOf(members, boundaryTime);
+                blocks.push({ group, members: inside, tail, requests, clock });
                 next.set(first, group);
                 children.push(group);
-                if (tail !== undefined)
-                    children.push(new TailUnit(tail));
             }
             else
-                children.push(...members.flatMap(memberParts));
+                children.push(...inside.flatMap(memberParts));
+            if (tail !== undefined)
+                children.push(new TailUnit(tail, background));
             members = [];
             requests = [];
         };
@@ -512,7 +513,7 @@ function patchState() {
     return state;
 }
 /** Private to pi-ext-ui: two process hooks, scoped by the actual host UI facade. */
-export function installHostToolGroups(context) {
+export function installHostToolGroups(context, background) {
     const parts = VERSION.split(".").map(Number);
     const [major = 0, minor = 0, patch = 0] = parts;
     if (parts.length !== 3 ||
@@ -544,7 +545,7 @@ export function installHostToolGroups(context) {
         ui,
         hosts: new Map(),
         failed: new WeakSet(),
-        attach: (host) => attach(host, run),
+        attach: (host) => attach(host, run, background),
     };
     state.owners.set(ui, owner);
     // Reload rebuilds history before session_start; reconnect already discovered instances.

package/dist/message-view.js

@@ -69,8 +69,12 @@ export class MessageView {
      * `customMessageBg` box when no renderer is installed, so this view supplies the same block
      * itself. Inside an activity group the rows come from `previewRows`/`bodyRows` and keep the
      * group's background instead.
+     *
+     * A surface that owns its rows also owns one padding row above and below, the same breathing room
+     * a Pi-native tool surface gives itself; without it the colored block is a tight strip of text.
      */
-    #shell = new Box(0, 0);
+    #padY = 1;
+    #shell = new Box(0, this.#padY);
     constructor(spec) {
         this.#spec = spec;
         this.#localExpanded = remembered(spec.stateHolder, spec.defaultExpanded === true);
@@ -130,9 +134,10 @@ export class MessageView {
         const innerWidth = Math.max(1, effectiveWidth - pad * 2);
         if (innerX < 0 || innerX >= innerWidth)
             return undefined;
-        if (this.#lastHeight > 0 && (event.y < 0 || event.y >= this.#lastHeight))
+        if (this.#lastHeight > 0 && (event.y < 0 || event.y >= this.#lastHeight + this.#padY))
             return undefined;
-        if (event.y !== 0)
+        // The shell's own padding rows belong to the surface, not to the header row.
+        if (event.y !== this.#padY)
             return undefined;
         this.toggle();
         return { handled: true, render: true };

package/dist/nested-calls-view.js

@@ -1,13 +1,22 @@
 import { copyToClipboard as copyToSystemClipboard, getLanguageFromPath, highlightCode, } from "@earendil-works/pi-coding-agent";
 import { stripTerminalSequences, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
 import { extractChildToolCopyText, inlinePresentation, nativeRequestCopy } from "./native-tools.js";
-import { formatToolHeaderText, ToolView, toContentRows, transitionFoldLevel, } from "./tool-view.js";
+import { formatToolHeaderText, TOOL_SPINNER_INTERVAL_MS, ToolView, toContentRows, toolSpinnerFrame, transitionFoldLevel, } from "./tool-view.js";
 function truncate(text, width) {
     return truncateToWidth(text, Math.max(1, width));
 }
 function isRecord(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
 }
+/**
+ * A call without a final result is still running: its row carries the live spinner frame. A persisted
+ * record states its own status, so a recovered board never animates a call that already ended.
+ */
+function isLiveCall(call) {
+    return "status" in call
+        ? call.status === "running"
+        : call.result === undefined;
+}
 /**
  * A copy keeps the request half byte-exact and strips only what follows it: the result is display
  * text, while the request is what the model sent and may legitimately contain escapes.
@@ -31,6 +40,7 @@ export class NestedCallsView {
     #copiedIndex = undefined;
     #failedIndex = undefined;
     #copiedTimer = undefined;
+    #liveTimer = undefined;
     #lineMapping = [];
     #renderCache;
     constructor(props) {
@@ -191,14 +201,30 @@ export class NestedCallsView {
         if (state !== undefined)
             delete state[NESTED_CALLS_COPIED_KEY];
     }
+    /** A live child row owns the next frame; a settled board asks for none. */
+    #requestNextFrame() {
+        if (this.#liveTimer !== undefined)
+            return;
+        this.#liveTimer = setTimeout(() => {
+            this.#liveTimer = undefined;
+            this.#props.invalidate?.();
+        }, TOOL_SPINNER_INTERVAL_MS);
+        this.#liveTimer.unref?.();
+    }
     render(width) {
         const safeWidth = Math.max(1, width);
         const levelsKey = this.#getLevelsKey();
+        // A live child row draws the shared spinner, so a cached board would freeze that glyph.
+        const frame = this.#props.calls.some(isLiveCall) ? toolSpinnerFrame() : "";
+        // A live child row draws the glyph, so this board owns the next frame for as long as it does.
+        if (frame !== "")
+            this.#requestNextFrame();
         if (this.#renderCache !== undefined &&
             this.#renderCache.width === safeWidth &&
             this.#renderCache.copiedIndex === this.#copiedIndex &&
             this.#renderCache.failedIndex === this.#failedIndex &&
-            this.#renderCache.levelsKey === levelsKey) {
+            this.#renderCache.levelsKey === levelsKey &&
+            this.#renderCache.frame === frame) {
             this.#lineMapping = this.#renderCache.lineMapping;
             return this.#renderCache.lines;
         }
@@ -212,8 +238,7 @@ export class NestedCallsView {
                 continue;
             const toolName = "toolName" in call ? call.toolName : call.name;
             const isError = Boolean(call.isError || ("status" in call && call.status === "error"));
-            const isRunning = ("status" in call && call.status === "running") ||
-                (!("status" in call) && call.result === undefined);
+            const isRunning = isLiveCall(call);
             const expansionLevel = this.#getExpansionLevel(i);
             const isExpanded = expansionLevel !== 0;
             const rawSummary = "summary" in call ? call.summary : undefined;
@@ -281,6 +306,7 @@ export class NestedCallsView {
             copiedIndex: this.#copiedIndex,
             failedIndex: this.#failedIndex,
             levelsKey,
+            frame,
             lines,
             lineMapping: this.#lineMapping,
         };

package/dist/renderer.js

@@ -262,9 +262,15 @@ function renderGenericResult(params) {
     const { outputText: rawOutput, wallTimeSeconds } = nativeResultText(toolName, result);
     const isError = (context.isError ?? false) || (result.isError ?? false);
     const status = toolName === "codemode"
-        ? childCalls.length === 0 && isError
-            ? "error"
-            : "none"
+        ? childCalls.length > 0
+            ? "none"
+            : isError
+                ? "error"
+                : renderOptions.isPartial === true
+                    ? context.argsComplete
+                        ? "running"
+                        : "streaming"
+                    : "none"
         : isMetaTool
             ? resolveContainerStatus({
                 isError,
@@ -672,11 +678,9 @@ function createRendererResolver(runtime, options, resolvePresentation, resolveNa
                 const isStreamingArgs = context.isPartial && !context.argsComplete;
                 const status = context.isError
                     ? "error"
-                    : toolName === "codemode"
-                        ? "none"
-                        : isStreamingArgs
-                            ? "streaming"
-                            : "running";
+                    : isStreamingArgs
+                        ? "streaming"
+                        : "running";
                 const streamedTokens = isStreamingArgs ? estimateStreamingTokens(args) : 0;
                 const header = isStreamingArgs
                     ? { summary: streamedTokens > 0 ? `· ${String(streamedTokens)} tokens` : "" }

package/dist/tool-group-view.d.ts

@@ -56,7 +56,7 @@ export interface ToolGroupClock {
 export declare function memberParts(member: Member): readonly Component[];
 export declare class TailUnit implements Component {
     #private;
-    constructor(member: Member);
+    constructor(member: Member, background: () => boolean);
     render(width: number): string[];
     handleMouse(event: Parameters<NonNullable<Component["handleMouse"]>>[0]): import("@earendil-works/pi-tui").TuiMouseEventResult | undefined;
     invalidate(): void;
@@ -70,7 +70,7 @@ export declare class TailUnit implements Component {
  */
 export declare class ToolGroupView extends Container {
     #private;
-    constructor(ui: ExtensionUIContext, redraw: () => void);
+    constructor(ui: ExtensionUIContext, redraw: () => void, background: () => boolean);
     /**
      * Release the block's own lifetime. The projection drops a block when it is evicted, when
      * grouping is disabled, or when the patch unloads; an idempotent dispose keeps that path honest,

package/dist/tool-group-view.js

@@ -1,4 +1,4 @@
-import { Box, Container, MouseRegion, Spacer, Text, truncateToWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
+import { Box, Container, MouseRegion, Spacer, Text, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
 import { fitRow } from "@hheei/pi-ext-core";
 import { backgroundFill } from "./background.js";
 import { isCollapsible, toContentRows, toSingleRow, } from "./tool-view.js";
@@ -8,28 +8,56 @@ const SURFACE_HOLD_MS = 5_000;
 export function memberParts(member) {
     return member.parts ?? [member.component];
 }
+/**
+ * A row that draws nothing visible. A separator row is not always an empty string: Pi marks the start
+ * of a message zone with an OSC 133 row that paints no cells, and counting it as content would add a
+ * second blank row after the block.
+ */
+function isBlankRow(row) {
+    return row === undefined || visibleWidth(row) === 0;
+}
 export class TailUnit {
     #parts;
+    #background;
     #offsets = [];
-    constructor(member) {
+    constructor(member, background) {
         this.#parts = memberParts(member);
+        this.#background = background;
     }
     render(width) {
         const offsets = [];
         const rows = [];
+        let contentRows = 0;
         for (const part of this.#parts) {
             const all = part.render(width);
             const skip = all[0] === "" ? 1 : 0;
             const own = all.slice(skip);
             if (own.length === 0)
                 continue;
-            if (rows.length > 0)
+            if (rows.length > 0) {
                 rows.push("");
+                contentRows++;
+            }
+            // A leading OSC-only separator stays in the output, but is not a content row.
+            contentRows += own.length - (isBlankRow(own[0]) ? 1 : 0);
             offsets.push({ part, top: rows.length, height: own.length, skip });
             rows.push(...own);
         }
-        this.#offsets = offsets;
-        return rows.length === 0 || rows[0] === "" ? rows : ["", ...rows];
+        if (rows.length === 0) {
+            this.#offsets = offsets;
+            return rows;
+        }
+        const out = isBlankRow(rows[0]) ? rows : ["", ...rows];
+        // The separator above is a row of this unit too, so every part offset moves down with it.
+        const shift = out.length - rows.length;
+        this.#offsets = offsets.map((offset) => ({ ...offset, top: offset.top + shift }));
+        // Surface padding counts toward the minimum; added rows stay outside surfaces and hit areas.
+        const minimum = this.#background() ? 4 : 2;
+        if (contentRows > 0) {
+            for (let row = contentRows; row < minimum; row++)
+                out.push("");
+        }
+        return out;
     }
     handleMouse(event) {
         for (const { part, top, height, skip } of this.#offsets) {
@@ -78,9 +106,11 @@ function formatTokens(count) {
  */
 function cacheHitRate(latestPrompt) {
     if (latestPrompt === undefined)
-        return "—";
+        return undefined;
     const prompt = latestPrompt.input + latestPrompt.cacheRead + latestPrompt.cacheWrite;
-    return `${((latestPrompt.cacheRead / prompt) * 100).toFixed(1).replace(/\.0$/, "")}%`;
+    if (prompt <= 0)
+        return undefined;
+    return `${((latestPrompt.cacheRead / prompt) * 100).toFixed(1)}%`;
 }
 const PREVIEW_GRAPHEMES = 20;
 const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
@@ -112,6 +142,8 @@ export class ToolGroupView extends Container {
     #header = new Text("", 0, 0);
     #ui;
     #redraw;
+    /** Pi-native block backgrounds are opt-in; while they are on, the fill replaces the rails. */
+    #background;
     /** The stable clock for this block; restored history stays unknown until live content joins. */
     #clock;
     /** The block's own members, drawn inside the group. */
@@ -134,10 +166,11 @@ export class ToolGroupView extends Container {
     // One extra colored row above and below: the block needs breathing room inside its background.
     #box = new Box(0, 1);
     #spacer = new Spacer(1);
-    constructor(ui, redraw) {
+    constructor(ui, redraw, background) {
         super();
         this.#ui = ui;
         this.#redraw = redraw;
+        this.#background = background;
         this.#heading = new MouseRegion(this.#header, (event) => {
             if (event.type !== "click" || event.button !== "left")
                 return undefined;
@@ -250,35 +283,51 @@ export class ToolGroupView extends Container {
         let requests = 0;
         let input = 0;
         let output = 0;
-        let measured = false;
+        let cacheRead = 0;
+        let cacheWrite = 0;
         let latestPrompt;
         for (const fact of this.#requests) {
             requests += 1;
             const usage = fact.usage;
             if (usage === undefined)
                 continue;
-            measured = true;
             input += usage.input;
             output += usage.output;
+            cacheRead += usage.cacheRead;
+            cacheWrite += usage.cacheWrite;
             // A streaming snapshot can arrive with every field zeroed; that is a placeholder, not a
             // measured prompt, so it must not overwrite the last known cache-hit fact.
             if (usage.input + usage.cacheRead + usage.cacheWrite > 0)
                 latestPrompt = usage;
         }
-        return { requests, measured, input, output, latestPrompt };
+        return { requests, input, output, cacheRead, cacheWrite, latestPrompt };
     }
-    /** The block footer: the whole block's request and token totals, fixed under the body. */
+    /**
+     * The block footer: the block's request count, then the same token facts and the same symbols
+     * Pi's own footer uses (`↑input ↓output RcacheRead WcacheWrite CHrate`). Pi totals the whole
+     * session; this totals one block, so the two never have to agree on the number.
+     */
     #footerRow() {
         const theme = this.#ui.theme;
         const usage = this.#usage();
-        const input = usage.measured ? formatTokens(usage.input) : "—";
-        const output = usage.measured ? formatTokens(usage.output) : "—";
-        const parts = [
-            `requests ×${usage.requests}`,
-            `IN ${input}`,
-            `OUT ${output}`,
-            `CH ${cacheHitRate(usage.latestPrompt)}`,
-        ];
+        const parts = [`requests ×${usage.requests}`];
+        if (usage.input + usage.output + usage.cacheRead + usage.cacheWrite === 0) {
+            parts.push("↑—", "↓—");
+            return theme.fg("dim", parts.join(" · "));
+        }
+        if (usage.input > 0)
+            parts.push(`↑${formatTokens(usage.input)}`);
+        if (usage.output > 0)
+            parts.push(`↓${formatTokens(usage.output)}`);
+        if (usage.cacheRead > 0)
+            parts.push(`R${formatTokens(usage.cacheRead)}`);
+        if (usage.cacheWrite > 0)
+            parts.push(`W${formatTokens(usage.cacheWrite)}`);
+        if (usage.cacheRead > 0 || usage.cacheWrite > 0) {
+            const rate = cacheHitRate(usage.latestPrompt);
+            if (rate !== undefined)
+                parts.push(`CH${rate}`);
+        }
         return theme.fg("dim", parts.join(" · "));
     }
     #categoryRow(category, label, detail) {
@@ -306,7 +355,8 @@ export class ToolGroupView extends Container {
             const own = wrapper.render(Math.max(1, width));
             if (own.length === 0)
                 continue;
-            // One blank row between adjacent semantic blocks; inner blank rows stay where they are.
+            // One blank row between adjacent semantic blocks. A thinking run has no surface of its own,
+            // so it keeps the plain separator even when tools paint their own padded surfaces.
             if (lines.length > 0) {
                 lines.push("");
                 hits.push({ height: 1, action: { kind: "none" } });
@@ -449,6 +499,13 @@ export class ToolGroupView extends Container {
                 push(row, index === 0 ? { kind: "item", member: member.component } : { kind: "none" });
         }
     }
+    /**
+     * The cells a thinking row starts with. Thinking has no surface of its own, so it keeps the same
+     * rail as a tool at every level; once a block is filled, the fill delimits it and the rail goes.
+     */
+    #thinkingPrefix() {
+        return this.#background() ? "  " : `${this.#ui.theme.fg("dim", "▎")} `;
+    }
     /** One preview row: the grapheme head plus an ellipsis, then cut to the cells the rail leaves. */
     #thinkingPreviewRow(text, width) {
         const theme = this.#ui.theme;
@@ -456,15 +513,16 @@ export class ToolGroupView extends Container {
         const room = Math.max(1, width - 2);
         const fitted = truncateToWidth(head, more ? Math.max(1, room - 1) : room, "…");
         const preview = more && fitted === head ? `${head}…` : fitted;
-        return `${theme.fg("dim", "▎")} ${theme.fg("thinkingText", theme.italic(preview))}`;
+        return `${this.#thinkingPrefix()}${theme.fg("thinkingText", theme.italic(preview))}`;
     }
     /** Full thinking text: paragraphs keep their separation, every row wraps to the indent's width. */
     #thinkingRows(text, width) {
         const theme = this.#ui.theme;
+        const prefix = this.#thinkingPrefix();
         const inner = Math.max(1, width - 2);
         return toContentRows(text).flatMap((line) => {
             const wrapped = wrapTextWithAnsi(line, inner);
-            return (wrapped.length > 0 ? wrapped : [""]).map((row) => row === "" ? "" : `  ${theme.fg("thinkingText", theme.italic(row))}`);
+            return (wrapped.length > 0 ? wrapped : [""]).map((row) => row === "" ? "" : `${prefix}${theme.fg("thinkingText", theme.italic(row))}`);
         });
     }
     /**

package/dist/tool-view.d.ts

@@ -66,7 +66,7 @@ export declare const MAX_LEVEL2_SECTION_LINES = 500;
 export declare const MAX_LEVEL2_BYTES: number;
 export declare function transitionFoldLevel(current: FoldLevel, ctrlKey: boolean): FoldLevel;
 export declare const TOOL_SPINNER_FRAMES: readonly ["·", "✢", "✳", "✶", "✻", "✽", "✻", "✶", "✳", "✢"];
-export declare const TOOL_SPINNER_INTERVAL_MS = 100;
+export declare const TOOL_SPINNER_INTERVAL_MS = 200;
 /**
  * One clock for every live tool, so the phase is shared and never restarts: streaming args and a
  * running execution draw the same frame and differ only in color.

package/dist/tool-view.js

@@ -1,7 +1,7 @@
 import { Buffer } from "node:buffer";
 import { copyToClipboard as copyToSystemClipboard, } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
-import { backgroundFill } from "./background.js";
+import { surfaceBlock } from "./background.js";
 /** Pi native tool surfaces: a failure outranks work in progress, which outranks a settled tool. */
 function nativeSurface(status) {
     if (status === "error")
@@ -67,7 +67,7 @@ function isCopyFailed(stateHolder, localFailed) {
     return isRecord(stateHolder) && stateHolder[COPY_FAILED_STATE_KEY] === true;
 }
 export const TOOL_SPINNER_FRAMES = ["·", "✢", "✳", "✶", "✻", "✽", "✻", "✶", "✳", "✢"];
-export const TOOL_SPINNER_INTERVAL_MS = 100;
+export const TOOL_SPINNER_INTERVAL_MS = 200;
 /**
  * One clock for every live tool, so the phase is shared and never restarts: streaming args and a
  * running execution draw the same frame and differ only in color.
@@ -245,6 +245,7 @@ export class ToolView {
     #localCopiedUntil = 0;
     #localCopyFailed = false;
     #localTimer;
+    #liveTimer;
     #lastWidth = 80;
     #lastHeight = 0;
     #lastNoRail = false;
@@ -386,12 +387,30 @@ export class ToolView {
             this.#spec.stateHolder[COPY_FEEDBACK_TIMER_KEY] = timer;
         }
     }
+    /**
+     * A live glyph needs someone to ask for the next frame, and no host event says "still running".
+     * The frame that drew one owns that timer: it fires once, the repaint renders again, and a settled
+     * row simply stops asking.
+     */
+    #requestNextFrame() {
+        if (this.#liveTimer !== undefined)
+            return;
+        this.#liveTimer = setTimeout(() => {
+            this.#liveTimer = undefined;
+            this.#spec.invalidate?.();
+        }, TOOL_SPINNER_INTERVAL_MS);
+        this.#liveTimer.unref?.();
+    }
     #renderHeader(width, level) {
         const { theme, header, copy } = this.#spec;
         const safeWidth = Math.max(1, width);
-        const pinGlyph = level === 0 ? "▸" : "▾";
-        const pin = theme.fg("dim", pinGlyph);
-        const leftContent = `${pin} ${formatToolHeaderText(header, theme)}`;
+        // A live tool says so in its leading slot: one glyph, no `▸` in front of a second status mark.
+        // A container that already lists child calls is not live any more, so it keeps the fold pin.
+        const live = level === 0 && (header.status === "streaming" || header.status === "running");
+        const pin = live
+            ? formatStatusGlyph(header.status, theme)
+            : theme.fg("dim", level === 0 ? "▸" : "▾");
+        const leftContent = `${pin} ${formatToolHeaderText(live ? { ...header, status: "none" } : header, theme)}`;
         if (copy === undefined || safeWidth < 6) {
             return truncate(leftContent, safeWidth);
         }
@@ -507,12 +526,24 @@ export class ToolView {
         const native = this.#spec.background?.() === true;
         const surface = native ? nativeSurface(this.#spec.header.status) : undefined;
         const noRail = this.#spec.noRail === true || native;
-        if (this.#cache !== undefined &&
+        // The glyph of a live tool changes on its own clock, so a cached frame would freeze it.
+        const status = this.#spec.header.status;
+        const glyph = status === "streaming" || status === "running" ? toolSpinnerFrame() : "";
+        // A live row at level 0 draws the glyph, so this frame owns the next one.
+        if (glyph !== "" && level === 0)
+            this.#requestNextFrame();
+        // A component body draws on a clock of its own: a container's child board animates a live child
+        // while the container itself already shows its fold pin, so a cached frame would freeze the
+        // child's glyph. Only a body of literal rows is fully known here.
+        const bodyOwnsItsClock = this.#spec.collapsedRows !== undefined && !Array.isArray(this.#spec.collapsedRows);
+        if (!bodyOwnsItsClock &&
+            this.#cache !== undefined &&
             this.#cache.width === width &&
             this.#cache.level === level &&
             this.#cache.noRail === noRail &&
             this.#cache.surface === surface &&
-            this.#cache.copied === copied) {
+            this.#cache.copied === copied &&
+            this.#cache.glyph === glyph) {
             return this.#cache.lines;
         }
         const pad = Math.max(0, this.#spec.outputPad ?? 0);
@@ -537,11 +568,11 @@ export class ToolView {
             }
         }
         this.#lastTopPad = surface === undefined ? 0 : 1;
-        const lines = surface === undefined
-            ? safeLines
-            : ["", ...safeLines, ""].map((line) => backgroundFill(this.#spec.theme, surface)(line + " ".repeat(Math.max(0, width - visibleWidth(line)))));
+        const lines = surface === undefined ? safeLines : surfaceBlock(this.#spec.theme, surface, safeLines, width);
         this.#lastHeight = lines.length;
-        this.#cache = { width, level, copied, noRail, surface, lines };
+        this.#cache = bodyOwnsItsClock
+            ? undefined
+            : { width, level, copied, noRail, surface, glyph, lines };
         return lines;
     }
     handleMouse(event) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hheei/pi-ext-ui",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Collapsible tool rendering frame and tool renderer pilot for Pi.",
   "type": "module",
   "main": "dist/index.js",