@hheei/pi-ext-ui 0.8.3 → 0.9.0

package/dist/host-transcript-patch.js

@@ -287,7 +287,8 @@ function attach(host, run, background, outputPad) {
                     weight += 0.5;
             }
             if (first !== undefined && weight >= 2) {
-                const group = groups.get(first) ?? new ToolGroupView(host.ui, host.requestRender, background);
+                const group = groups.get(first) ??
+                    new ToolGroupView(host.ui, host.requestRender, background, outputPad);
                 const boundaryTime = ended && boundary !== undefined
                     ? (run.observed.get(boundary)?.at ?? performance.now())
                     : undefined;

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

@@ -70,7 +70,7 @@ export declare class TailUnit implements Component {
  */
 export declare class ToolGroupView extends Container {
     #private;
-    constructor(ui: ExtensionUIContext, redraw: () => void, background: () => boolean);
+    constructor(ui: ExtensionUIContext, redraw: () => void, background: () => boolean, outputPad: () => number);
     /**
      * 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

@@ -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.
  *
@@ -157,6 +163,8 @@ export class ToolGroupView extends Container {
     #redraw;
     /** Pi-native block backgrounds are opt-in; while they are on, the fill replaces the rails. */
     #background;
+    /** Pi's own output padding, so the frame lines up with the tool rows it wraps. */
+    #outputPad;
     /** The stable clock for this block; restored history stays unknown until live content joins. */
     #clock;
     /** The block's own members, drawn inside the group. */
@@ -169,21 +177,27 @@ 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);
-    constructor(ui, redraw, background) {
+    /** The blank row between the expanded title and the first member. */
+    #gap = new Spacer(1);
+    constructor(ui, redraw, background, outputPad) {
         super();
         this.#ui = ui;
         this.#redraw = redraw;
         this.#background = background;
+        this.#outputPad = outputPad;
         this.#heading = new MouseRegion(this.#header, (event) => {
             if (event.type !== "click" || event.button !== "left")
                 return undefined;
@@ -195,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;
@@ -239,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) {
@@ -387,8 +385,13 @@ export class ToolGroupView extends Container {
         const theme = this.#ui.theme;
         const lines = [];
         const hits = [];
+        // The frame is the block's own row; a tool row inside it pads itself, so only these rows take
+        // Pi's output padding.
+        const pad = Math.max(0, this.#outputPad());
+        const lead = " ".repeat(pad);
+        const inner = Math.max(0, width - pad * 2);
         const push = (row, action = { kind: "none" }) => {
-            lines.push(fitRow(row, Math.max(0, width), "…"));
+            lines.push(fitRow(`${lead}${row}`, Math.max(0, width), "…"));
             hits.push({ height: 1, action });
         };
         /** Rows that belong to one component keep one hit so its own geometry stays correct. */
@@ -404,7 +407,7 @@ export class ToolGroupView extends Container {
             if (member.kind === "tool")
                 tools.push(index);
         }
-        push(theme.fg("borderMuted", "─".repeat(Math.max(0, width))));
+        push(theme.fg("borderMuted", "─".repeat(inner)));
         const notices = this.#noticeItems();
         if (notices.length > 0) {
             const kinds = new Map();
@@ -418,7 +421,7 @@ export class ToolGroupView extends Container {
                 category: "notices",
             });
             if (this.#category === "notices")
-                this.#renderNotices(notices, width, push);
+                this.#renderNotices(notices, inner, push);
         }
         const thinking = this.#thinkingItems();
         if (thinking.length > 0) {
@@ -428,7 +431,7 @@ export class ToolGroupView extends Container {
                 category: "thinking",
             });
             if (this.#category === "thinking")
-                this.#renderThinking(thinking, width, push);
+                this.#renderThinking(thinking, inner, push);
         }
         // Names and header calls share one eligibility: only completed calls are counted. A tool that
         // is still streaming or running stays listed and expandable, but adds no number.
@@ -461,7 +464,7 @@ export class ToolGroupView extends Container {
                 this.#renderTools(tools, width, push, pushBlock);
         }
         // The rails bracket the header, categories, and any opened detail; the footer sits below them.
-        push(theme.fg("borderMuted", "─".repeat(Math.max(0, width))));
+        push(theme.fg("borderMuted", "─".repeat(inner)));
         // The footer is always the block's request and token totals: one row, never a tool status.
         push(this.#footerRow());
         this.#hits = hits;
@@ -687,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
             ? "—"
@@ -697,8 +708,12 @@ 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", " · "));
-        this.#header.setText(fitRow(`${theme.fg("dim", this.#renderedExpanded ? "▾" : "▸")} ${details}`, Math.max(0, width), "…"));
+        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), "…"));
         return super.render(width);
     }
     /**
@@ -710,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.3",
+  "version": "0.9.0",
   "description": "Collapsible tool rendering frame and tool renderer pilot for Pi.",
   "type": "module",
   "main": "dist/index.js",