@hheei/pi-ext-ui 0.8.3 → 0.8.4

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

@@ -157,6 +157,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. */
@@ -179,11 +181,12 @@ 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, background) {
+    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;
@@ -387,8 +390,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 +412,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 +426,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 +436,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 +469,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;
@@ -698,7 +706,8 @@ export class ToolGroupView extends Container {
             theme.fg("dim", elapsed),
             theme.fg("dim", `${calls} ${calls === 1 ? "call" : "calls"}`),
         ].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);
     }
     /**

package/package.json

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