@hheei/pi-ext-ui 0.7.0 → 0.7.1

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/host-transcript-patch.js

@@ -200,6 +200,8 @@ 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())
@@ -254,6 +256,7 @@ function attach(host, run) {
     };
     const rebuild = () => {
         const next = new Map();
+        const nextTails = new Map();
         const children = [];
         const blocks = [];
         let calls = new Set();
@@ -290,8 +293,14 @@ function attach(host, run) {
                 });
                 next.set(first, group);
                 children.push(group);
-                if (tail !== undefined)
-                    children.push(new TailUnit(tail));
+                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));
@@ -363,6 +372,7 @@ function attach(host, run) {
                 group.dispose();
         }
         groups = next;
+        tails = nextTails;
         projection.children = children;
     };
     const wrappers = {

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/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

@@ -57,6 +57,8 @@ 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;
     render(width: number): string[];
     handleMouse(event: Parameters<NonNullable<Component["handleMouse"]>>[0]): import("@earendil-works/pi-tui").TuiMouseEventResult | undefined;
     invalidate(): void;

package/dist/tool-group-view.js

@@ -4,6 +4,10 @@ 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];
@@ -11,8 +15,17 @@ export function memberParts(member) {
 export class TailUnit {
     #parts;
     #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) {
+        this.#parts = memberParts(member);
+        this.#live = isLiveTail(member);
     }
     render(width) {
         const offsets = [];
@@ -29,7 +42,18 @@ export class TailUnit {
             rows.push(...own);
         }
         this.#offsets = offsets;
-        return rows.length === 0 || rows[0] === "" ? rows : ["", ...rows];
+        if (rows.length === 0)
+            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("");
+        return out;
     }
     handleMouse(event) {
         for (const { part, top, height, skip } of this.#offsets) {
@@ -78,9 +102,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" });
@@ -250,35 +276,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 +348,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" } });

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.
@@ -389,9 +389,13 @@ export class ToolView {
     #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 +511,16 @@ 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;
+        // 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 &&
             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 +545,9 @@ 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 = { 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.1",
   "description": "Collapsible tool rendering frame and tool renderer pilot for Pi.",
   "type": "module",
   "main": "dist/index.js",