@hheei/pi-ext-ui 0.7.1 → 0.8.0

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,
@@ -200,8 +200,6 @@ function attach(host, run) {
         throw new Error("Pi transcript cannot accept instance methods");
     const projection = new Container();
     let groups = new Map();
-    /** One wrapper per tail component, so its reserved height survives a transcript rebuild. */
-    let tails = new Map();
     let active = true;
     const disposeGroups = () => {
         for (const group of groups.values())
@@ -256,7 +254,6 @@ function attach(host, run) {
     };
     const rebuild = () => {
         const next = new Map();
-        const nextTails = new Map();
         const children = [];
         const blocks = [];
         let calls = new Set();
@@ -269,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")
@@ -278,32 +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) {
-                    const key = memberParts(tail)[0];
-                    const unit = (key === undefined ? undefined : tails.get(key)) ?? new TailUnit(tail);
-                    unit.update(tail);
-                    if (key !== undefined)
-                        nextTails.set(key, unit);
-                    children.push(unit);
-                }
             }
             else
-                children.push(...members.flatMap(memberParts));
+                children.push(...inside.flatMap(memberParts));
+            if (tail !== undefined)
+                children.push(new TailUnit(tail, background));
             members = [];
             requests = [];
         };
@@ -372,7 +364,6 @@ function attach(host, run) {
                 group.dispose();
         }
         groups = next;
-        tails = nextTails;
         projection.children = children;
     };
     const wrappers = {
@@ -522,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 ||
@@ -554,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/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/tool-group-view.d.ts

@@ -56,9 +56,7 @@ export interface ToolGroupClock {
 export declare function memberParts(member: Member): readonly Component[];
 export declare class TailUnit implements Component {
     #private;
-    constructor(member: Member);
-    /** The same tail with a newer fact: the component list can grow, the reserved height must not. */
-    update(member: Member): void;
+    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;
@@ -72,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,58 +1,62 @@
-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";
 /** A settled block keeps its surface this long, then drops it so the transcript stays quiet. */
 const SURFACE_HOLD_MS = 5_000;
-/** A tool that has not received its final result yet: its own rows are still changing height. */
-function isLiveTail(member) {
-    return member.kind === "tool" && member.completed !== true;
-}
 /** Every original component of a member, in transcript order. */
 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 = [];
-    /** Rows already shown for a live member: a tool that grows may not shrink back and shift the block. */
-    #reserved = 0;
-    #live;
-    constructor(member) {
-        this.#parts = memberParts(member);
-        this.#live = isLiveTail(member);
-    }
-    /** The same tail with a newer fact: the component list can grow, the reserved height must not. */
-    update(member) {
+    constructor(member, background) {
         this.#parts = memberParts(member);
-        this.#live = isLiveTail(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;
-        if (rows.length === 0)
+        if (rows.length === 0) {
+            this.#offsets = offsets;
             return rows;
-        const out = rows[0] === "" ? rows : ["", ...rows];
-        // A live tail grows downward from a fixed top: the host keeps the transcript's bottom in view, so
-        // a row count that falls back drags everything above it down. Reserve the tallest frame instead.
-        if (this.#live)
-            this.#reserved = Math.max(this.#reserved, out.length);
-        else
-            this.#reserved = 0;
-        while (out.length < this.#reserved)
-            out.push("");
+        }
+        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) {
@@ -138,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. */
@@ -160,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;
@@ -492,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;
@@ -499,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.js

@@ -245,6 +245,7 @@ export class ToolView {
     #localCopiedUntil = 0;
     #localCopyFailed = false;
     #localTimer;
+    #liveTimer;
     #lastWidth = 80;
     #lastHeight = 0;
     #lastNoRail = false;
@@ -386,6 +387,20 @@ 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);
@@ -514,7 +529,15 @@ export class ToolView {
         // 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() : "";
-        if (this.#cache !== undefined &&
+        // 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 &&
@@ -547,7 +570,9 @@ export class ToolView {
         this.#lastTopPad = surface === undefined ? 0 : 1;
         const lines = surface === undefined ? safeLines : surfaceBlock(this.#spec.theme, surface, safeLines, width);
         this.#lastHeight = lines.length;
-        this.#cache = { width, level, copied, noRail, surface, glyph, 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.1",
+  "version": "0.8.0",
   "description": "Collapsible tool rendering frame and tool renderer pilot for Pi.",
   "type": "module",
   "main": "dist/index.js",
@@ -22,29 +22,28 @@
     "pi",
     "pi-package",
     "pi-extension",
-    "hepi",
     "ui",
     "collapsible"
   ],
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hheei/hepi-mono.git",
+    "url": "git+https://github.com/hheei/pi-mono.git",
     "directory": "packages/pi-ext-ui"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@hheei/pi-ext-core": "^0.7.1"
+    "@hheei/pi-ext-core": "^0.8.0"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": ">=1.0.1",
     "@earendil-works/pi-tui": ">=1.0.1"
   },
   "devDependencies": {
-    "@earendil-works/pi-coding-agent": "1.3.0",
-    "@earendil-works/pi-tui": "1.3.0"
+    "@earendil-works/pi-coding-agent": "^1.4.0",
+    "@earendil-works/pi-tui": "^1.4.0"
   },
   "scripts": {
     "build": "node -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.build.json"