@tintinweb/pi-subagents 0.4.9 → 0.4.11

package/dist/ui/agent-widget.js

@@ -32,6 +32,10 @@ export function formatTokens(count) {
         return `${(count / 1_000).toFixed(1)}k token`;
     return `${count} token`;
 }
+/** Format turn count with optional max limit: "⟳5≤30" or "⟳5". */
+export function formatTurns(turnCount, maxTurns) {
+    return maxTurns != null ? `⟳${turnCount}≤${maxTurns}` : `⟳${turnCount}`;
+}
 /** Format milliseconds as human-readable duration. */
 export function formatMs(ms) {
     return `${(ms / 1000).toFixed(1)}s`;
@@ -94,13 +98,26 @@ export class AgentWidget {
     finishedTurnAge = new Map();
     /** How many extra turns errors/aborted agents linger (completed agents clear after 1 turn). */
     static ERROR_LINGER_TURNS = 2;
+    /** Whether the widget callback is currently registered with the TUI. */
+    widgetRegistered = false;
+    /** Cached TUI reference from widget factory callback, used for requestRender(). */
+    tui;
+    /** Last status bar text, used to avoid redundant setStatus calls. */
+    lastStatusText;
     constructor(manager, agentActivity) {
         this.manager = manager;
         this.agentActivity = agentActivity;
     }
     /** Set the UI context (grabbed from first tool execution). */
     setUICtx(ctx) {
-        this.uiCtx = ctx;
+        if (ctx !== this.uiCtx) {
+            // UICtx changed — the widget registered on the old context is gone.
+            // Force re-registration on next update().
+            this.uiCtx = ctx;
+            this.widgetRegistered = false;
+            this.tui = undefined;
+            this.lastStatusText = undefined;
+        }
     }
     /**
      * Called on each new turn (tool_execution_start).
@@ -162,16 +179,20 @@ export class AgentWidget {
             statusText = theme.fg("warning", " aborted");
         }
         const parts = [];
+        const activity = this.agentActivity.get(a.id);
+        if (activity)
+            parts.push(formatTurns(activity.turnCount, activity.maxTurns));
         if (a.toolUses > 0)
             parts.push(`${a.toolUses} tool use${a.toolUses === 1 ? "" : "s"}`);
         parts.push(duration);
         const modeTag = modeLabel ? ` ${theme.fg("dim", `(${modeLabel})`)}` : "";
         return `${icon} ${theme.fg("dim", name)}${modeTag}  ${theme.fg("dim", a.description)} ${theme.fg("dim", "·")} ${theme.fg("dim", parts.join(" · "))}${statusText}`;
     }
-    /** Force an immediate widget update. */
-    update() {
-        if (!this.uiCtx)
-            return;
+    /**
+     * Render the widget content. Called from the registered widget's render() callback,
+     * reading live state each time instead of capturing it in a closure.
+     */
+    renderWidget(tui, theme) {
         const allAgents = this.manager.listAgents();
         const running = allAgents.filter(a => a.status === "running");
         const queued = allAgents.filter(a => a.status === "queued");
@@ -179,10 +200,153 @@ export class AgentWidget {
             && this.shouldShowFinished(a.id, a.status));
         const hasActive = running.length > 0 || queued.length > 0;
         const hasFinished = finished.length > 0;
+        // Nothing to show — return empty (widget will be unregistered by update())
+        if (!hasActive && !hasFinished)
+            return [];
+        const w = tui.terminal.columns;
+        const truncate = (line) => truncateToWidth(line, w);
+        const headingColor = hasActive ? "accent" : "dim";
+        const headingIcon = hasActive ? "●" : "○";
+        const frame = SPINNER[this.widgetFrame % SPINNER.length];
+        // Build sections separately for overflow-aware assembly.
+        // Each running agent = 2 lines (header + activity), finished = 1 line, queued = 1 line.
+        const finishedLines = [];
+        for (const a of finished) {
+            finishedLines.push(truncate(theme.fg("dim", "├─") + " " + this.renderFinishedLine(a, theme)));
+        }
+        const runningLines = []; // each entry is [header, activity]
+        for (const a of running) {
+            const name = getDisplayName(a.type);
+            const modeLabel = getPromptModeLabel(a.type);
+            const modeTag = modeLabel ? ` ${theme.fg("dim", `(${modeLabel})`)}` : "";
+            const elapsed = formatMs(Date.now() - a.startedAt);
+            const bg = this.agentActivity.get(a.id);
+            const toolUses = bg?.toolUses ?? a.toolUses;
+            let tokenText = "";
+            if (bg?.session) {
+                try {
+                    tokenText = formatTokens(bg.session.getSessionStats().tokens.total);
+                }
+                catch { /* */ }
+            }
+            const parts = [];
+            if (bg)
+                parts.push(formatTurns(bg.turnCount, bg.maxTurns));
+            if (toolUses > 0)
+                parts.push(`${toolUses} tool use${toolUses === 1 ? "" : "s"}`);
+            if (tokenText)
+                parts.push(tokenText);
+            parts.push(elapsed);
+            const statsText = parts.join(" · ");
+            const activity = bg ? describeActivity(bg.activeTools, bg.responseText) : "thinking…";
+            runningLines.push([
+                truncate(theme.fg("dim", "├─") + ` ${theme.fg("accent", frame)} ${theme.bold(name)}${modeTag}  ${theme.fg("muted", a.description)} ${theme.fg("dim", "·")} ${theme.fg("dim", statsText)}`),
+                truncate(theme.fg("dim", "│  ") + theme.fg("dim", `  ⎿  ${activity}`)),
+            ]);
+        }
+        const queuedLine = queued.length > 0
+            ? truncate(theme.fg("dim", "├─") + ` ${theme.fg("muted", "◦")} ${theme.fg("dim", `${queued.length} queued`)}`)
+            : undefined;
+        // Assemble with overflow cap (heading + overflow indicator = 2 reserved lines).
+        const maxBody = MAX_WIDGET_LINES - 1; // heading takes 1 line
+        const totalBody = finishedLines.length + runningLines.length * 2 + (queuedLine ? 1 : 0);
+        const lines = [truncate(theme.fg(headingColor, headingIcon) + " " + theme.fg(headingColor, "Agents"))];
+        if (totalBody <= maxBody) {
+            // Everything fits — add all lines and fix up connectors for the last item.
+            lines.push(...finishedLines);
+            for (const pair of runningLines)
+                lines.push(...pair);
+            if (queuedLine)
+                lines.push(queuedLine);
+            // Fix last connector: swap ├─ → └─ and │ → space for activity lines.
+            if (lines.length > 1) {
+                const last = lines.length - 1;
+                lines[last] = lines[last].replace("├─", "└─");
+                // If last item is a running agent activity line, fix indent of that line
+                // and fix the header line above it.
+                if (runningLines.length > 0 && !queuedLine) {
+                    // The last two lines are the last running agent's header + activity.
+                    if (last >= 2) {
+                        lines[last - 1] = lines[last - 1].replace("├─", "└─");
+                        lines[last] = lines[last].replace("│  ", "   ");
+                    }
+                }
+            }
+        }
+        else {
+            // Overflow — prioritize: running > queued > finished.
+            // Reserve 1 line for overflow indicator.
+            let budget = maxBody - 1;
+            let hiddenRunning = 0;
+            let hiddenFinished = 0;
+            // 1. Running agents (2 lines each)
+            for (const pair of runningLines) {
+                if (budget >= 2) {
+                    lines.push(...pair);
+                    budget -= 2;
+                }
+                else {
+                    hiddenRunning++;
+                }
+            }
+            // 2. Queued line
+            if (queuedLine && budget >= 1) {
+                lines.push(queuedLine);
+                budget--;
+            }
+            // 3. Finished agents
+            for (const fl of finishedLines) {
+                if (budget >= 1) {
+                    lines.push(fl);
+                    budget--;
+                }
+                else {
+                    hiddenFinished++;
+                }
+            }
+            // Overflow summary
+            const overflowParts = [];
+            if (hiddenRunning > 0)
+                overflowParts.push(`${hiddenRunning} running`);
+            if (hiddenFinished > 0)
+                overflowParts.push(`${hiddenFinished} finished`);
+            const overflowText = overflowParts.join(", ");
+            lines.push(truncate(theme.fg("dim", "└─") + ` ${theme.fg("dim", `+${hiddenRunning + hiddenFinished} more (${overflowText})`)}`));
+        }
+        return lines;
+    }
+    /** Force an immediate widget update. */
+    update() {
+        if (!this.uiCtx)
+            return;
+        const allAgents = this.manager.listAgents();
+        // Lightweight existence checks — full categorization happens in renderWidget()
+        let runningCount = 0;
+        let queuedCount = 0;
+        let hasFinished = false;
+        for (const a of allAgents) {
+            if (a.status === "running") {
+                runningCount++;
+            }
+            else if (a.status === "queued") {
+                queuedCount++;
+            }
+            else if (a.completedAt && this.shouldShowFinished(a.id, a.status)) {
+                hasFinished = true;
+            }
+        }
+        const hasActive = runningCount > 0 || queuedCount > 0;
         // Nothing to show — clear widget
         if (!hasActive && !hasFinished) {
-            this.uiCtx.setWidget("agents", undefined);
-            this.uiCtx.setStatus("subagents", undefined);
+            if (this.widgetRegistered) {
+                this.uiCtx.setWidget("agents", undefined);
+                this.widgetRegistered = false;
+                this.tui = undefined;
+            }
+            if (this.lastStatusText !== undefined) {
+                this.uiCtx.setStatus("subagents", undefined);
+                this.lastStatusText = undefined;
+            }
             if (this.widgetInterval) {
                 clearInterval(this.widgetInterval);
                 this.widgetInterval = undefined;
@@ -194,131 +358,42 @@ export class AgentWidget {
             }
             return;
         }
-        // Status bar
+        // Status bar — only call setStatus when the text actually changes
+        let newStatusText;
         if (hasActive) {
             const statusParts = [];
-            if (running.length > 0)
-                statusParts.push(`${running.length} running`);
-            if (queued.length > 0)
-                statusParts.push(`${queued.length} queued`);
-            const total = running.length + queued.length;
-            this.uiCtx.setStatus("subagents", `${statusParts.join(", ")} agent${total === 1 ? "" : "s"}`);
+            if (runningCount > 0)
+                statusParts.push(`${runningCount} running`);
+            if (queuedCount > 0)
+                statusParts.push(`${queuedCount} queued`);
+            const total = runningCount + queuedCount;
+            newStatusText = `${statusParts.join(", ")} agent${total === 1 ? "" : "s"}`;
         }
-        else {
-            this.uiCtx.setStatus("subagents", undefined);
+        if (newStatusText !== this.lastStatusText) {
+            this.uiCtx.setStatus("subagents", newStatusText);
+            this.lastStatusText = newStatusText;
         }
         this.widgetFrame++;
-        const frame = SPINNER[this.widgetFrame % SPINNER.length];
-        this.uiCtx.setWidget("agents", (tui, theme) => {
-            const w = tui.terminal.columns;
-            const truncate = (line) => truncateToWidth(line, w);
-            const headingColor = hasActive ? "accent" : "dim";
-            const headingIcon = hasActive ? "●" : "○";
-            // Build sections separately for overflow-aware assembly.
-            // Each running agent = 2 lines (header + activity), finished = 1 line, queued = 1 line.
-            const finishedLines = [];
-            for (const a of finished) {
-                finishedLines.push(truncate(theme.fg("dim", "├─") + " " + this.renderFinishedLine(a, theme)));
-            }
-            const runningLines = []; // each entry is [header, activity]
-            for (const a of running) {
-                const name = getDisplayName(a.type);
-                const modeLabel = getPromptModeLabel(a.type);
-                const modeTag = modeLabel ? ` ${theme.fg("dim", `(${modeLabel})`)}` : "";
-                const elapsed = formatMs(Date.now() - a.startedAt);
-                const bg = this.agentActivity.get(a.id);
-                const toolUses = bg?.toolUses ?? a.toolUses;
-                let tokenText = "";
-                if (bg?.session) {
-                    try {
-                        tokenText = formatTokens(bg.session.getSessionStats().tokens.total);
-                    }
-                    catch { /* */ }
-                }
-                const parts = [];
-                if (toolUses > 0)
-                    parts.push(`${toolUses} tool use${toolUses === 1 ? "" : "s"}`);
-                if (tokenText)
-                    parts.push(tokenText);
-                parts.push(elapsed);
-                const statsText = parts.join(" · ");
-                const activity = bg ? describeActivity(bg.activeTools, bg.responseText) : "thinking…";
-                runningLines.push([
-                    truncate(theme.fg("dim", "├─") + ` ${theme.fg("accent", frame)} ${theme.bold(name)}${modeTag}  ${theme.fg("muted", a.description)} ${theme.fg("dim", "·")} ${theme.fg("dim", statsText)}`),
-                    truncate(theme.fg("dim", "│  ") + theme.fg("dim", `  ⎿  ${activity}`)),
-                ]);
-            }
-            const queuedLine = queued.length > 0
-                ? truncate(theme.fg("dim", "├─") + ` ${theme.fg("muted", "◦")} ${theme.fg("dim", `${queued.length} queued`)}`)
-                : undefined;
-            // Assemble with overflow cap (heading + overflow indicator = 2 reserved lines).
-            const maxBody = MAX_WIDGET_LINES - 1; // heading takes 1 line
-            const totalBody = finishedLines.length + runningLines.length * 2 + (queuedLine ? 1 : 0);
-            const lines = [truncate(theme.fg(headingColor, headingIcon) + " " + theme.fg(headingColor, "Agents"))];
-            if (totalBody <= maxBody) {
-                // Everything fits — add all lines and fix up connectors for the last item.
-                lines.push(...finishedLines);
-                for (const pair of runningLines)
-                    lines.push(...pair);
-                if (queuedLine)
-                    lines.push(queuedLine);
-                // Fix last connector: swap ├─ → └─ and │ → space for activity lines.
-                if (lines.length > 1) {
-                    const last = lines.length - 1;
-                    lines[last] = lines[last].replace("├─", "└─");
-                    // If last item is a running agent activity line, fix indent of that line
-                    // and fix the header line above it.
-                    if (runningLines.length > 0 && !queuedLine) {
-                        // The last two lines are the last running agent's header + activity.
-                        if (last >= 2) {
-                            lines[last - 1] = lines[last - 1].replace("├─", "└─");
-                            lines[last] = lines[last].replace("│  ", "   ");
-                        }
-                    }
-                }
-            }
-            else {
-                // Overflow — prioritize: running > queued > finished.
-                // Reserve 1 line for overflow indicator.
-                let budget = maxBody - 1;
-                let hiddenRunning = 0;
-                let hiddenFinished = 0;
-                // 1. Running agents (2 lines each)
-                for (const pair of runningLines) {
-                    if (budget >= 2) {
-                        lines.push(...pair);
-                        budget -= 2;
-                    }
-                    else {
-                        hiddenRunning++;
-                    }
-                }
-                // 2. Queued line
-                if (queuedLine && budget >= 1) {
-                    lines.push(queuedLine);
-                    budget--;
-                }
-                // 3. Finished agents
-                for (const fl of finishedLines) {
-                    if (budget >= 1) {
-                        lines.push(fl);
-                        budget--;
-                    }
-                    else {
-                        hiddenFinished++;
-                    }
-                }
-                // Overflow summary
-                const overflowParts = [];
-                if (hiddenRunning > 0)
-                    overflowParts.push(`${hiddenRunning} running`);
-                if (hiddenFinished > 0)
-                    overflowParts.push(`${hiddenFinished} finished`);
-                const overflowText = overflowParts.join(", ");
-                lines.push(truncate(theme.fg("dim", "└─") + ` ${theme.fg("dim", `+${hiddenRunning + hiddenFinished} more (${overflowText})`)}`));
-            }
-            return { render: () => lines, invalidate: () => { } };
-        }, { placement: "aboveEditor" });
+        // Register widget callback once; subsequent updates use requestRender()
+        // which re-invokes render() without replacing the component (avoids layout thrashing).
+        if (!this.widgetRegistered) {
+            this.uiCtx.setWidget("agents", (tui, theme) => {
+                this.tui = tui;
+                return {
+                    render: () => this.renderWidget(tui, theme),
+                    invalidate: () => {
+                        // Theme changed — force re-registration so factory captures fresh theme.
+                        this.widgetRegistered = false;
+                        this.tui = undefined;
+                    },
+                };
+            }, { placement: "aboveEditor" });
+            this.widgetRegistered = true;
+        }
+        else {
+            // Widget already registered — just request a re-render of existing components.
+            this.tui?.requestRender();
+        }
     }
     dispose() {
         if (this.widgetInterval) {
@@ -329,5 +404,8 @@ export class AgentWidget {
             this.uiCtx.setWidget("agents", undefined);
             this.uiCtx.setStatus("subagents", undefined);
         }
+        this.widgetRegistered = false;
+        this.tui = undefined;
+        this.lastStatusText = undefined;
     }
 }

package/dist/ui/conversation-viewer.d.ts

@@ -4,11 +4,11 @@
  * Displays a scrollable, live-updating view of an agent's conversation.
  * Subscribes to session events for real-time streaming updates.
  */
-import { type Component, type TUI } from "@mariozechner/pi-tui";
 import type { AgentSession } from "@mariozechner/pi-coding-agent";
+import { type Component, type TUI } from "@mariozechner/pi-tui";
+import type { AgentRecord } from "../types.js";
 import type { Theme } from "./agent-widget.js";
 import { type AgentActivity } from "./agent-widget.js";
-import type { AgentRecord } from "../types.js";
 export declare class ConversationViewer implements Component {
     private tui;
     private session;

package/dist/ui/conversation-viewer.js

@@ -5,8 +5,8 @@
  * Subscribes to session events for real-time streaming updates.
  */
 import { matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@mariozechner/pi-tui";
-import { formatTokens, formatDuration, getDisplayName, getPromptModeLabel, describeActivity } from "./agent-widget.js";
 import { extractText } from "../context.js";
+import { describeActivity, formatDuration, formatTokens, getDisplayName, getPromptModeLabel } from "./agent-widget.js";
 /** Lines consumed by chrome: top border + header + header sep + footer sep + footer + bottom border. */
 const CHROME_LINES = 6;
 const MIN_VIEWPORT = 3;
@@ -231,6 +231,6 @@ export class ConversationViewer {
             lines.push("");
             lines.push(truncateToWidth(th.fg("accent", "▍ ") + th.fg("dim", act), width));
         }
-        return lines;
+        return lines.map(l => truncateToWidth(l, width));
     }
 }

package/dist/ui/conversation-viewer.test.d.ts

@@ -0,0 +1 @@
+export {};