@hheei/pi-ext-ui 0.8.4 → 0.9.0

package/dist/tool-group-view.js

@@ -144,6 +144,12 @@ function thinkingPreview(text) {
     }
     return { head, more: content !== head };
 }
+function isLiveMember(member) {
+    return member.status === "running" || member.status === "streaming";
+}
+function isFailedMember(member) {
+    return member.status === "error";
+}
 /**
  * The collapsed frame of one activity block.
  *
@@ -171,16 +177,21 @@ export class ToolGroupView extends Container {
     #category;
     #item;
     #renderedExpanded = false;
-    #shell = "collapsed";
+    #shell;
     /** When the block last became quiet; the surface hold counts from here. */
     #settledAt;
     #holdTimer;
     #hits = [];
     #heading;
     #body;
-    // One extra colored row above and below: the block needs breathing room inside its background.
-    #box = new Box(0, 1);
+    // One extra colored row above and below while the surface is filled: the block needs breathing
+    // room inside its background, and a transparent block has nothing to breathe in. `Box` has no
+    // vertical setter, so the box is rebuilt when the fill flips.
+    #box = new Box(0, 0);
+    #filled;
     #spacer = new Spacer(1);
+    /** The blank row between the expanded title and the first member. */
+    #gap = new Spacer(1);
     constructor(ui, redraw, background, outputPad) {
         super();
         this.#ui = ui;
@@ -198,11 +209,7 @@ export class ToolGroupView extends Container {
             handleMouse: (event) => this.#hit(event),
             invalidate() { },
         };
-        // The group background covers the header, categories, and footer. Zero padding keeps the rows
-        // at the width they were laid out for; a tool's own outputPad must not be counted twice.
-        this.#box.addChild(this.#heading);
-        this.#box.addChild(this.#body);
-        this.children = [this.#spacer, this.#box];
+        this.#syncShell();
     }
     #toggleRaw() {
         this.#raw = this.#ui.getToolsExpanded() ? false : !this.#raw;
@@ -242,35 +249,23 @@ export class ToolGroupView extends Container {
         return this.#tail === undefined ? [...this.#members] : [...this.#members, this.#tail];
     }
     /** The block's own last fact: the newest member that states a status, tail included. */
-    #lastStatus() {
-        const block = this.#block();
-        for (let index = block.length - 1; index >= 0; index -= 1) {
-            const status = block[index]?.status;
-            if (status !== undefined)
-                return status;
-        }
-        return undefined;
-    }
     /**
-     * The surface states the block's last fact, not its worst one, so one old failure cannot tint a
-     * block forever. A settled block keeps that color for five seconds and then falls back to the
-     * neutral surface, because a transcript full of settled blocks is a transcript to read, not a wall
-     * of colored panels.
+     * The surface states the block, decided once: pending until a call settles, then the settled color
+     * for five seconds, then the neutral surface. Reading the last call's status instead re-tinted the
+     * block on every call, which read as flashing while one request ran several tools.
      */
     #surfaceToken() {
-        const last = this.#lastStatus();
-        if (last === "running" || last === "streaming") {
-            this.#settledAt = undefined;
-            this.#stopHold();
-            return "toolPendingBg";
+        if (this.#settledAt === undefined) {
+            const stated = this.#block().filter((member) => member.status !== undefined);
+            if (stated.length === 0 || stated.some(isLiveMember))
+                return "toolPendingBg";
+            this.#settledAt = performance.now();
         }
-        const now = performance.now();
-        this.#settledAt ??= now;
-        const held = now - this.#settledAt;
-        if (last === undefined || held >= SURFACE_HOLD_MS)
+        const held = performance.now() - this.#settledAt;
+        if (held >= SURFACE_HOLD_MS)
             return "toolPendingBg";
         this.#hold(SURFACE_HOLD_MS - held);
-        return last === "error" ? "toolErrorBg" : "toolSuccessBg";
+        return this.#block().some(isFailedMember) ? "toolErrorBg" : "toolSuccessBg";
     }
     /** One repaint when the hold expires; nothing keeps ticking after that. */
     #hold(delay) {
@@ -695,8 +690,16 @@ export class ToolGroupView extends Container {
         }
         this.#renderedExpanded = this.#raw || globalExpanded;
         const theme = this.#ui.theme;
+        // The fill and its breathing rows belong to one surface: a transparent block keeps neither, so
+        // turning tool backgrounds off really removes them instead of leaving blank rows behind.
+        const filled = this.#background();
+        if (this.#filled !== filled) {
+            this.#filled = filled;
+            this.#box = new Box(0, filled ? 1 : 0);
+            this.#shell = undefined;
+        }
         this.#syncShell();
-        this.#box.setBgFn(backgroundFill(theme, this.#surfaceToken()));
+        this.#box.setBgFn(filled ? backgroundFill(theme, this.#surfaceToken()) : undefined);
         const calls = this.#calls();
         const elapsed = this.#clock === undefined
             ? "—"
@@ -705,6 +708,9 @@ export class ToolGroupView extends Container {
             theme.fg("text", "collapse views"),
             theme.fg("dim", elapsed),
             theme.fg("dim", `${calls} ${calls === 1 ? "call" : "calls"}`),
+            // The expanded view has no frame to hold a footer, so its totals join the title instead of
+            // adding a row after the last member.
+            ...(this.#renderedExpanded ? [this.#footerRow()] : []),
         ].join(theme.fg("dim", " · "));
         const pad = Math.max(0, this.#outputPad());
         this.#header.setText(fitRow(`${" ".repeat(pad)}${theme.fg("dim", this.#renderedExpanded ? "▾" : "▸")} ${details}`, Math.max(0, width - pad * 2), "…"));
@@ -719,7 +725,16 @@ export class ToolGroupView extends Container {
         if (this.#shell === shell)
             return;
         this.#shell = shell;
+        // The title owns the surface in both shells. A collapsed frame keeps its body inside it; the
+        // expanded one leaves every member its own styling and separates the title from them by one
+        // blank row, so the block never tints the whole conversation.
+        this.#box.clear();
+        this.#box.addChild(this.#heading);
+        if (shell === "collapsed")
+            this.#box.addChild(this.#body);
         this.children =
-            shell === "raw" ? [this.#spacer, this.#heading, this.#body] : [this.#spacer, this.#box];
+            shell === "raw"
+                ? [this.#spacer, this.#box, this.#gap, this.#body]
+                : [this.#spacer, this.#box];
     }
 }

package/package.json

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