@hheei/pi-ext-ui 0.5.2 → 0.6.0

package/dist/extension.js

@@ -32,6 +32,18 @@ export default function (pi) {
                 }
             };
             const provider = createToolGroupSettings({ onEnabled: apply });
+            const onAgentStart = pi.on("agent_start", () => {
+                patch?.beginRun();
+                redrawGroups?.();
+            });
+            const onAgentEnd = pi.on("agent_end", () => {
+                patch?.endRun();
+                redrawGroups?.();
+            });
+            context.resources.add("run-clock", () => {
+                onAgentStart();
+                onAgentEnd();
+            });
             context.resources.add("tool-group-settings", registerSettings(provider, getRuntimeSettingsRegistry(pi)));
             context.resources.add("tool-groups", () => {
                 redrawGroups = undefined;

package/dist/host-transcript-patch.d.ts

@@ -3,4 +3,6 @@ import { type ExtensionContext } from "@earendil-works/pi-coding-agent";
 export declare function installHostToolGroups(context: ExtensionContext): {
     dispose(): void;
     requestRender(): void;
+    beginRun(): void;
+    endRun(): void;
 };

package/dist/host-transcript-patch.js

@@ -1,8 +1,8 @@
 import { AssistantMessageComponent, InteractiveMode, ToolExecutionComponent, VERSION, } from "@earendil-works/pi-coding-agent";
-import { Container, MouseRegion, Spacer, stripTerminalSequences, Text, } from "@earendil-works/pi-tui";
-import { fitRow } from "@hheei/pi-ext-core";
+import { Container, Spacer, stripTerminalSequences, Text, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
 import { MessageView } from "./message-view.js";
-import { renderWithoutToolRails, ToolView, toSingleRow } from "./tool-view.js";
+import { ToolGroupView } from "./tool-group-view.js";
+import { ToolView, toSingleRow } from "./tool-view.js";
 const SEAMS = ["getRegisteredToolDefinition", "showExtensionNotify"];
 function record(value) {
     return typeof value === "object" && value !== null;
@@ -28,34 +28,56 @@ function readHost(value) {
     const requestRender = tui.requestRender;
     return { chat, ui, requestRender: () => requestRender.call(tui) };
 }
+function readUsage(value) {
+    if (!record(value))
+        return undefined;
+    const { input, output, cacheRead, cacheWrite } = value;
+    if (typeof input !== "number" ||
+        typeof output !== "number" ||
+        typeof cacheRead !== "number" ||
+        typeof cacheWrite !== "number")
+        return undefined;
+    return { input, output, cacheRead, cacheWrite };
+}
 function assistantInfo(component) {
     const message = Reflect.get(component, "lastMessage");
     if (!record(message) || !Array.isArray(message.content)) {
         throw new Error("Pi assistant message shape changed");
     }
+    const hidden = Reflect.get(component, "hideThinkingBlock");
     const calls = new Set();
     let eligible = !["length", "aborted", "error"].includes(String(message.stopReason));
-    let thinking = false;
+    let thinking = "";
     for (const block of message.content) {
         if (!record(block))
             throw new Error("Pi assistant content shape changed");
         if (block.type === "toolCall" && typeof block.id === "string")
             calls.add(block.id);
         else if (block.type === "thinking" && typeof block.thinking === "string")
-            thinking ||= block.thinking.trim() !== "";
+            thinking += block.thinking;
         else if (block.type !== "text" || typeof block.text !== "string" || block.text.trim() !== "")
             eligible = false;
     }
-    return { calls, eligible, thinking };
+    return {
+        calls,
+        eligible,
+        thinking,
+        hidden: hidden === true,
+        usage: readUsage(message.usage),
+    };
 }
 function toolMember(component, calls) {
     const id = Reflect.get(component, "toolCallId");
     const name = Reflect.get(component, "toolName");
     const partial = Reflect.get(component, "isPartial");
+    const complete = Reflect.get(component, "argsComplete");
     const result = Reflect.get(component, "result");
     const renderer = Reflect.get(component, "resultRendererComponent");
     const callRenderer = Reflect.get(component, "callRendererComponent");
-    if (typeof id !== "string" || typeof name !== "string" || typeof partial !== "boolean") {
+    if (typeof id !== "string" ||
+        typeof name !== "string" ||
+        typeof partial !== "boolean" ||
+        typeof complete !== "boolean") {
         throw new Error("Pi tool component shape changed");
     }
     if (!calls.has(id) || !(callRenderer instanceof ToolView))
@@ -71,7 +93,24 @@ function toolMember(component, calls) {
         : callRenderer.summary;
     if (summary === undefined)
         return undefined;
-    return { component, name: toSingleRow(stripTerminalSequences(name)), summary };
+    const status = !complete
+        ? "streaming"
+        : partial
+            ? "running"
+            : record(result) && result.isError === true
+                ? "error"
+                : "ok";
+    const children = renderer instanceof ToolView ? renderer.children : callRenderer.children;
+    const childCount = renderer instanceof ToolView ? renderer.childCount : undefined;
+    return {
+        kind: "tool",
+        component,
+        title: toSingleRow(stripTerminalSequences(name)),
+        summary,
+        status,
+        ...(children === undefined || children.length === 0 ? {} : { children }),
+        ...(childCount === undefined ? {} : { childCount }),
+    };
 }
 function messageView(component) {
     if (component instanceof MessageView)
@@ -84,165 +123,62 @@ function messageView(component) {
     return undefined;
 }
 /** Shared transcript notices stay in the group. The frame is the contract, not each custom type. */
-function noticeContinuation(component) {
+function noticeMember(component) {
     const view = messageView(component);
-    return view === undefined ? undefined : { component, summary: view.activitySummary };
+    if (view === undefined)
+        return undefined;
+    return {
+        kind: "notice",
+        component,
+        title: view.kind,
+        summary: view.activitySummary,
+        // A notice with no preview and no body has nothing to open; the group draws a pin only when
+        // detail exists, so an unconditional function would give it an arrow onto an empty body.
+        ...(view.hasDetail ? { detail: (width) => view.detailRows(width) } : {}),
+    };
 }
 class NotifyView extends Container {
     #text = new Text("", 1, 0);
-    #context;
+    #ui;
     #message;
     #type;
-    constructor(message, type, context) {
+    constructor(message, type, ui) {
         super();
-        this.#context = context;
+        this.#ui = ui;
         this.#message = message;
         this.#type = type;
         this.addChild(new Spacer(1));
         this.addChild(this.#text);
     }
     get summary() {
-        return this.#context.ui.theme.fg(this.#type === "info" ? "dim" : this.#type, toSingleRow(this.#content));
+        return this.#ui.theme.fg(this.#type === "info" ? "dim" : this.#type, toSingleRow(this.#content));
     }
-    get #content() {
-        const prefix = this.#type === "error" ? "Error: " : this.#type === "warning" ? "Warning: " : "";
-        return `${prefix}${this.#message}`;
-    }
-    render(width) {
-        this.#text.setText(this.#context.ui.theme.fg(this.#type === "info" ? "dim" : this.#type, this.#content));
-        return super.render(width);
-    }
-}
-class ToolGroup extends Container {
-    #header = new Text("", 0, 0);
-    #originals = new Container();
-    #context;
-    #redraw;
-    #members = [];
-    #expanded = false;
-    #renderedExpanded = false;
-    #open = new Set();
-    #hits = [];
-    constructor(context, redraw) {
-        super();
-        this.#context = context;
-        this.#redraw = redraw;
-        const heading = new MouseRegion(this.#header, (event) => {
-            if (event.type !== "click" || event.button !== "left")
-                return undefined;
-            this.#expanded = this.#context.ui.getToolsExpanded() ? false : !this.#expanded;
-            if (!this.#expanded)
-                this.#open.clear();
-            redraw();
-            return { handled: true, render: true };
-        });
-        const body = {
-            render: (width) => this.#renderBody(width),
-            handleMouse: (event) => this.#hit(event),
-            invalidate() { },
+    get member() {
+        return {
+            kind: "notice",
+            component: this,
+            title: this.#type,
+            summary: this.summary,
+            detail: (width) => this.#detail(width),
         };
-        this.children = [new Spacer(1), heading, body];
     }
-    #renderBody(width) {
+    #detail(width) {
         const inner = Math.max(1, width - 2);
-        const rail = this.#context.ui.theme.fg("dim", "▎");
-        const lines = [];
-        const hits = [];
-        this.#members.forEach((member, index) => {
-            const wrapper = this.#originals.children[index];
-            if (wrapper === undefined)
-                return;
-            const native = this.#renderedExpanded || this.#open.has(member.component);
-            const rows = native
-                ? renderWithoutToolRails(wrapper, inner)
-                : member.summary === undefined
-                    ? []
-                    : [member.summary];
-            if (rows.length === 0)
-                return;
-            hits.push({ component: member.component, wrapper, native, height: rows.length });
-            for (const row of rows) {
-                lines.push(fitRow(`${rail} ${row}`, Math.max(0, width), "…"));
-            }
+        return this.#content.split("\n").flatMap((line) => {
+            const wrapped = wrapTextWithAnsi(line, inner);
+            return (wrapped.length > 0 ? wrapped : [""]).map((row) => `  ${row}`);
         });
-        this.#hits = hits;
-        return lines;
-    }
-    #hit(event) {
-        let y = event.y;
-        for (const hit of this.#hits) {
-            if (y >= hit.height) {
-                y -= hit.height;
-                continue;
-            }
-            if (!hit.native) {
-                if (event.type !== "click" || event.button !== "left")
-                    return undefined;
-                this.#open.add(hit.component);
-                this.#redraw();
-                return { handled: true, render: true };
-            }
-            // The rail belongs to the group. Content, including header fold and copy, stays with the member.
-            if (event.x < 2) {
-                if (!this.#renderedExpanded && event.type === "click" && event.button === "left") {
-                    this.#open.delete(hit.component);
-                    this.#redraw();
-                    return { handled: true, render: true };
-                }
-                return undefined;
-            }
-            return hit.wrapper.handleMouse?.({
-                ...event,
-                y,
-                height: hit.height,
-                x: event.x - 2,
-                width: Math.max(1, event.width - 2),
-            });
-        }
-        return undefined;
     }
-    update(members) {
-        this.#members = members;
-        this.#originals.children = members.map(({ component }) => {
-            let offset = 0;
-            return {
-                render(width) {
-                    const rows = component.render(width);
-                    // Pi adds one leading separator per tool; the group supplies its own spacing.
-                    offset = rows[0] === "" ? 1 : 0;
-                    return rows.slice(offset);
-                },
-                handleMouse(event) {
-                    return component.handleMouse?.({
-                        ...event,
-                        y: event.y + offset,
-                        height: event.height + offset,
-                    });
-                },
-                invalidate() { },
-            };
-        });
-    }
-    invalidate() {
-        // Original chatContainer.invalidate invalidates original members exactly once.
-        this.#header.invalidate();
+    get #content() {
+        const prefix = this.#type === "error" ? "Error: " : this.#type === "warning" ? "Warning: " : "";
+        return `${prefix}${this.#message}`;
     }
     render(width) {
-        this.#renderedExpanded = this.#expanded || this.#context.ui.getToolsExpanded();
-        const theme = this.#context.ui.theme;
-        const counts = new Map();
-        for (const member of this.#members) {
-            if (member.name !== undefined)
-                counts.set(member.name, (counts.get(member.name) ?? 0) + 1);
-        }
-        const heading = [...counts]
-            .map(([name, count]) => `${theme.fg("toolTitle", theme.bold(name))} ${theme.fg("dim", `×${count}`)}`)
-            .join(theme.fg("dim", " · "));
-        this.#header.setText(fitRow(`${theme.fg("dim", this.#renderedExpanded ? "▾" : "▸")} ${heading}`, Math.max(0, width), "…"));
+        this.#text.setText(this.#ui.theme.fg(this.#type === "info" ? "dim" : this.#type, this.#content));
         return super.render(width);
     }
 }
-function attach(host, context) {
+function attach(host, run) {
     const chat = host.chat;
     const original = {
         render: chat.render,
@@ -264,13 +200,16 @@ function attach(host, context) {
     const rebuild = () => {
         const next = new Map();
         const children = [];
+        const blocks = [];
         let calls = new Set();
         let members = [];
-        const flush = () => {
+        /** Closes the pending run. `ended` is false only for the run still open at the transcript tail. */
+        const flush = (ended) => {
             const first = members[0]?.component;
-            if (first !== undefined && members.filter((member) => member.name !== undefined).length > 1) {
-                const group = groups.get(first) ?? new ToolGroup(context, host.requestRender);
-                group.update(members);
+            if (first !== undefined && members.filter((member) => member.kind === "tool").length > 1) {
+                const group = groups.get(first) ??
+                    new ToolGroupView(host.ui, host.requestRender, run.current?.endedAt === undefined ? run.current : undefined);
+                blocks.push({ group, members, ended });
                 next.set(first, group);
                 children.push(group);
             }
@@ -283,9 +222,13 @@ function attach(host, context) {
                 const info = assistantInfo(child);
                 calls = info.calls;
                 if (info.eligible) {
+                    const thinking = info.thinking;
                     members.push({
+                        kind: "assistant",
                         component: child,
-                        ...(info.thinking ? { summary: context.ui.theme.fg("thinkingText", "thinking…") } : {}),
+                        ...(thinking === "" ? {} : { thinkingChars: thinking.length }),
+                        ...(thinking === "" || info.hidden ? {} : { thinking }),
+                        ...(info.usage === undefined ? {} : { usage: info.usage }),
                     });
                     continue;
                 }
@@ -298,20 +241,24 @@ function attach(host, context) {
                 }
             }
             else if (child instanceof NotifyView) {
-                members.push({ component: child, summary: child.summary });
+                members.push(child.member);
                 continue;
             }
             else {
-                const continuation = noticeContinuation(child);
+                const continuation = noticeMember(child);
                 if (continuation !== undefined) {
                     members.push(continuation);
                     continue;
                 }
             }
-            flush();
+            flush(true);
             children.push(child);
         }
-        flush();
+        flush(false);
+        const frozen = run.current === undefined || run.current.endedAt !== undefined;
+        for (const block of blocks) {
+            block.group.update(block.members, frozen || block.ended);
+        }
         groups = next;
         projection.children = children;
     };
@@ -326,7 +273,7 @@ function attach(host, context) {
                 active = false;
                 groups.clear();
                 projection.clear();
-                context.ui.notify(`Tool grouping disabled: ${error instanceof Error ? error.message : String(error)}`, "warning");
+                host.ui.notify(`Tool grouping disabled: ${error instanceof Error ? error.message : String(error)}`, "warning");
                 return original.render.call(chat, width);
             }
             // Real renderer errors propagate; never hide a tool-rendering failure.
@@ -348,7 +295,7 @@ function attach(host, context) {
         notify(message, type) {
             if (!active)
                 return false;
-            chat.addChild(new NotifyView(message, type, context));
+            chat.addChild(new NotifyView(message, type, host.ui));
             host.requestRender();
             return true;
         },
@@ -372,7 +319,7 @@ function attach(host, context) {
                     Object.defineProperty(chat, key, descriptor);
             }
             if (conflict)
-                context.ui.notify("Tool grouping patch changed by another extension; restart Pi to fully unload it.", "warning");
+                host.ui.notify("Tool grouping patch changed by another extension; restart Pi to fully unload it.", "warning");
             host.requestRender();
         },
     };
@@ -385,7 +332,7 @@ function connect(owner, host) {
     }
     catch (error) {
         owner.failed.add(host.chat);
-        owner.context.ui.notify(`Tool grouping unavailable: ${error instanceof Error ? error.message : String(error)}`, "warning");
+        owner.ui.notify(`Tool grouping unavailable: ${error instanceof Error ? error.message : String(error)}`, "warning");
     }
 }
 function patchState() {
@@ -426,7 +373,7 @@ function patchState() {
             if (record(instance))
                 failed.add(instance);
             for (const owner of owners.values())
-                owner.context.ui.notify(`Tool grouping unavailable: ${error instanceof Error ? error.message : String(error)}`, "warning");
+                owner.ui.notify(`Tool grouping unavailable: ${error instanceof Error ? error.message : String(error)}`, "warning");
             return undefined;
         }
         if (record(instance) && !seen.has(instance)) {
@@ -469,7 +416,8 @@ export function installHostToolGroups(context) {
         !(major > 1 || (major === 1 && (minor > 0 || (minor === 0 && patch >= 1)))))
         throw new Error(`Tool grouping requires Pi >=1.0.1; running ${VERSION}`);
     const state = patchState();
-    if (state.owners.has(context.ui))
+    const ui = context.ui;
+    if (state.owners.has(ui))
         throw new Error("Tool grouping already owns this UI runtime");
     if (state.owners.size === 0) {
         for (const seam of SEAMS) {
@@ -483,13 +431,15 @@ export function installHostToolGroups(context) {
                 value: state.wrappers[seam],
             });
     }
+    const run = {};
     const owner = {
-        context,
+        ui,
         hosts: new Map(),
         failed: new WeakSet(),
-        attach: (host) => attach(host, context),
+        run,
+        attach: (host) => attach(host, run),
     };
-    state.owners.set(context.ui, owner);
+    state.owners.set(ui, owner);
     // Reload rebuilds history before session_start; reconnect already discovered instances.
     for (const reference of state.hosts) {
         const instance = reference.deref();
@@ -499,7 +449,7 @@ export function installHostToolGroups(context) {
         }
         try {
             const host = readHost(instance);
-            if (host.ui === context.ui)
+            if (host.ui === ui)
                 connect(owner, host);
         }
         catch {
@@ -512,11 +462,20 @@ export function installHostToolGroups(context) {
             for (const host of owner.hosts.values())
                 host.requestRender();
         },
+        beginRun() {
+            run.current = { startedAt: performance.now() };
+        },
+        endRun() {
+            const current = run.current;
+            if (current !== undefined && current.endedAt === undefined)
+                current.endedAt = performance.now();
+        },
         dispose() {
             if (disposed)
                 return;
             disposed = true;
-            state.owners.delete(context.ui);
+            run.current = undefined;
+            state.owners.delete(ui);
             for (const host of owner.hosts.values())
                 host.dispose();
             owner.hosts.clear();
@@ -527,7 +486,7 @@ export function installHostToolGroups(context) {
                     state.wrappers[seam])
                     Object.defineProperty(InteractiveMode.prototype, seam, state.originals[seam]);
                 else
-                    context.ui.notify("Tool grouping seam changed by another extension; restart Pi to fully unload it.", "warning");
+                    ui.notify("Tool grouping seam changed by another extension; restart Pi to fully unload it.", "warning");
             }
         },
     };

package/dist/index.d.ts

@@ -2,5 +2,5 @@ export { type DiffHunk, type DiffLine, type DiffSource, type DiffStats, DiffView
 export { createMessageView, type MessageRows, type MessageTone, MessageView, type MessageViewHeader, type MessageViewSpec, } from "./message-view.js";
 export { extractChildToolCopyText, NestedCallsView, type NestedCallsViewProps, } from "./nested-calls-view.js";
 export { type CollapsibleToolRendererOptions, createCollapsibleToolRendererResolver, estimateStreamingTokens, inlinePresentation, isMcpTool, type NestedCallRecord, registerCollapsibleToolRenderer, SPECIALIZED_TOOL_RENDERERS, type SpecializedToolRendererName, type ToolRenderContext, } from "./renderer.js";
-export { type Collapsible, createToolView, type FoldLevel, formatStatusGlyph, formatToolHeaderText, isCollapsible, type RailColorToken, type RailSection, type ToolStatusKind, ToolView, type ToolViewCopySpec, type ToolViewHeaderSpec, type ToolViewSpec, transitionFoldLevel, } from "./tool-view.js";
+export { type Collapsible, createToolView, type FoldLevel, formatStatusGlyph, formatToolHeaderText, isCollapsible, type RailColorToken, type RailSection, type ToolStatusKind, ToolView, type ToolViewChild, type ToolViewCopySpec, type ToolViewHeaderSpec, type ToolViewSpec, transitionFoldLevel, } from "./tool-view.js";
 export { type CapturedToolCall, clearCapturedNestedCalls, getCapturedNestedCalls, recordToolExecutionEnd, recordToolExecutionStart, } from "./tracker.js";

package/dist/message-view.d.ts

@@ -12,6 +12,18 @@ export declare class MessageView implements Component {
     render(width: number): string[];
     invalidate(): void;
     handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
+    /** Provider-declared notice type, used to group notices without reading their text. */
+    get kind(): string;
+    /**
+     * Detail rows inside an activity group: preview and body below the summary row the group already
+     * draws, regardless of local fold. Repeating the header there would print the summary twice.
+     */
+    detailRows(width: number): string[];
     /** Single-row label used when this notice sits inside an activity group. */
     get activitySummary(): string;
+    /**
+     * Whether anything would render below the label. `expandable` asks about the body only; a
+     * preview-only notice still has detail to show, so the group keys its pin on this instead.
+     */
+    get hasDetail(): boolean;
 }

package/dist/message-view.js

@@ -106,12 +106,8 @@ export class MessageView {
         invalidateRows(this.#spec.body);
     }
     handleMouse(event) {
-        if (!this.expandable ||
-            event.type === "wheel" ||
-            event.type !== "click" ||
-            event.button !== "left") {
+        if (!this.expandable || event.type !== "click" || event.button !== "left")
             return undefined;
-        }
         const effectiveWidth = event.width > 0 ? event.width : this.#lastWidth;
         const pad = Math.max(0, this.#spec.outputPad ?? 0);
         const innerX = event.x - pad;
@@ -125,6 +121,20 @@ export class MessageView {
         this.toggle();
         return { handled: true, render: true };
     }
+    /** Provider-declared notice type, used to group notices without reading their text. */
+    get kind() {
+        return this.#spec.header.kind;
+    }
+    /**
+     * Detail rows inside an activity group: preview and body below the summary row the group already
+     * draws, regardless of local fold. Repeating the header there would print the summary twice.
+     */
+    detailRows(width) {
+        const pad = Math.max(0, this.#spec.outputPad ?? 0);
+        const safeWidth = Math.max(1, width - pad * 2);
+        const leftPad = pad > 0 ? " ".repeat(pad) : "";
+        return [...layRows(this.#spec.preview, safeWidth), ...layRows(this.#spec.body, safeWidth)].map((line) => (leftPad === "" ? line : `${leftPad}${line}`));
+    }
     /** Single-row label used when this notice sits inside an activity group. */
     get activitySummary() {
         const { theme, header } = this.#spec;
@@ -133,6 +143,13 @@ export class MessageView {
         const summary = summaryRaw === "" ? "" : theme.fg(header.tone ?? "dim", summaryRaw);
         return summary === "" ? kind : `${kind}${theme.fg("dim", " · ")}${summary}`;
     }
+    /**
+     * Whether anything would render below the label. `expandable` asks about the body only; a
+     * preview-only notice still has detail to show, so the group keys its pin on this instead.
+     */
+    get hasDetail() {
+        return hasRows(this.#spec.preview) || hasRows(this.#spec.body);
+    }
     #header(width, expanded) {
         const pin = this.expandable ? `${this.#spec.theme.fg("dim", expanded ? "▾" : "▸")} ` : "";
         return truncate(`${pin}${this.activitySummary}`, width);