@gjczone/pi-swarm 0.5.0 → 0.7.1

package/dist/tui/progress.js

@@ -1,38 +1,19 @@
 /**
  * tui/progress — AgentSwarm live progress panel.
  *
- * Renders a real-time progress display above the input area when
- * an AgentSwarm batch is running. Each subagent gets a compact braille
- * spinner with status and item description.
+ * Vertical panel layout with fixed-width tool-call-based braille progress
+ * bars and inline activity text.  Each agent renders as a single line:
+ *   001 [braille bar] read: src/lib.rs lines 42-99
+ * Bar width is fixed (5 cells) so tool labels align across agents.
  *
- * Features:
- * - Debounced, event-driven rendering (replaces pure setInterval polling)
- * - Keyboard interaction: j/k scroll, Enter detail, ? help, tab panel switch
- * - Panel switching: members list / event log
- * - Detail overlay for individual members
- * - Activity/tool tracking per member
- * - ETA estimation
+ * Progress is driven by actual tool calls / activity events (progressTick),
+ * not wall-clock time.  An agent that makes more progress fills faster.
  *
- * Ported from MoonshotAI/kimi-code's AgentSwarmProgressComponent.
+ * For 5+ agents, switches to a 2-column compact grid (3-cell bars).
  */
-import { matchesKey, Key, isKeyRepeat } from "@earendil-works/pi-tui";
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
-/** Max item description length to display. */
-const MAX_ITEM_LABEL_LEN = 40;
-/** Compact braille spinner frames for running agents. */
-const BRAILLE_SPINNER = [
-    "\u28BF",
-    "\u28FB",
-    "\u28FD",
-    "\u28FE",
-    "\u28F7",
-    "\u28EF",
-    "\u28DF",
-    "\u287F",
-];
-/** Braille characters representing fill levels 0-6 dots for completed bar. */
 const BRAILLE_LEVELS = [
     "\u28C0",
     "\u28C4",
@@ -42,36 +23,21 @@ const BRAILLE_LEVELS = [
     "\u28F7",
     "\u28FF",
 ];
-const BRAILLE_EMPTY = BRAILLE_LEVELS[0];
-const BRAILLE_FULL = BRAILLE_LEVELS[6];
-const COMPLETED_BAR_WIDTH = 4;
-/** Maximum members shown at once in the list view. */
-const VISIBLE_MEMBERS = 8;
-/** Maximum events shown in the event log panel. */
-const VISIBLE_EVENTS = 10;
-/** Debounce window for coalescing render requests. */
+const BRAILLE_EMPTY = "\u28C0"; // baseline empty (bottom dots), so bar track is always visible
 const DEBOUNCE_MS = 75;
-/** Fallback polling interval when state is active (has running members). */
-const ACTIVE_POLL_MS = 800;
-/** Fallback polling interval when idle (no running members). */
-const IDLE_POLL_MS = 2000;
-/** Animation interval for the braille spinner. */
-const FRAME_INTERVAL_MS = 80;
+const POLL_MS = 800;
+const MAX_VISIBLE_MEMBERS = 20;
+const ID_WIDTH = 3;
+// Fixed-width braille bar — all agents share the same width so labels align.
+// Vertical mode: 5 cells, grid mode: 3 cells.
+const FIXED_BAR_CELLS = 5;
+const GRID_BAR_CELLS = 3;
+// Layout: agents shown vertically when count <= this
+const VERTICAL_LAYOUT_MAX = 4;
 // ---------------------------------------------------------------------------
 // Snapshot conversion
 // ---------------------------------------------------------------------------
 export function snapshotToProgressState(snapshot, title) {
-    const now = Date.now();
-    const members = snapshot.members.map((m) => ({
-        index: m.index,
-        phase: mapMemberPhase(m.phase),
-        item: m.item,
-        error: m.error,
-        phaseStartedAt: isAnimatedPhase(m.phase) ? now : undefined,
-        currentTool: m.currentTool,
-        activity: m.activity,
-        usage: m.usage,
-    }));
     return {
         title,
         total: snapshot.total,
@@ -79,11 +45,19 @@ export function snapshotToProgressState(snapshot, title) {
         failed: snapshot.failed,
         active: snapshot.active,
         queued: snapshot.queued,
-        members,
+        members: snapshot.members.map((m) => ({
+            index: m.index,
+            phase: mapMemberPhase(m.phase),
+            item: m.item,
+            error: m.error,
+            currentTool: m.currentTool,
+            activity: m.activity,
+            usage: m.usage,
+            progressTick: m.progressTick,
+            startedAt: m.startedAt,
+        })),
         totalUsage: snapshot.totalUsage,
-        startedAt: snapshot.startedAt ?? now,
-        estimatedRemainingMs: snapshot.estimatedRemainingMs,
-        eventLog: snapshot.eventLog ? [...snapshot.eventLog] : undefined,
+        startedAt: snapshot.startedAt ?? Date.now(),
     };
 }
 function mapMemberPhase(phase) {
@@ -100,44 +74,23 @@ function mapMemberPhase(phase) {
             return "suspended";
     }
 }
-function isAnimatedPhase(phase) {
-    return phase === "working" || phase === "suspended";
-}
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 export class AgentSwarmProgressComponent {
     state_ = null;
-    renderedWidth;
-    cachedLines;
     onRequestRender;
-    // Render scheduler
-    animationFrame;
-    frameIndex = 0;
     pollTimer;
     debounceTimer;
-    pendingInvalidate = false;
-    hasActiveMembers = false;
-    // Input / UI state
-    scrollOffset = 0;
-    selectedIndex = -1;
-    activePanel = "members";
-    overlay = null;
     constructor(onRequestRender) {
         this.onRequestRender = onRequestRender;
         this.startPolling();
-        this.startAnimation();
     }
     // -------------------------------------------------------------------
     // Public API
     // -------------------------------------------------------------------
     update(state) {
         this.state_ = state;
-        this.hasActiveMembers = state.active > 0;
-        // Reset scroll offset if it exceeds member count
-        if (this.scrollOffset > Math.max(0, state.members.length - VISIBLE_MEMBERS)) {
-            this.scrollOffset = Math.max(0, state.members.length - VISIBLE_MEMBERS);
-        }
         this.requestRender();
     }
     complete() {
@@ -147,14 +100,12 @@ export class AgentSwarmProgressComponent {
                     m.phase !== "failed" &&
                     m.phase !== "cancelled") {
                     m.phase = "completed";
-                    m.phaseStartedAt = Date.now();
                 }
             }
             this.state_.active = 0;
             this.state_.queued = 0;
             this.state_.completed = this.state_.total - this.state_.failed;
         }
-        this.hasActiveMembers = false;
         this.requestRender();
     }
     dispose() {
@@ -162,358 +113,261 @@ export class AgentSwarmProgressComponent {
         this.onRequestRender = undefined;
     }
     invalidate() {
-        this.renderedWidth = undefined;
-        this.cachedLines = undefined;
+        /* no-op */
     }
-    // -------------------------------------------------------------------
-    // Keyboard input
-    // -------------------------------------------------------------------
-    handleInput(data) {
-        // Ignore key repeats for navigation keys to avoid scroll jank
-        const isRepeat = isKeyRepeat(data);
-        // Close overlay on Escape / q
-        if (this.overlay) {
-            if (matchesKey(data, Key.escape) || matchesKey(data, "q")) {
-                this.overlay = null;
-                this.requestRender();
-                return;
-            }
-            return;
-        }
-        // Navigation
-        if (matchesKey(data, "j") || matchesKey(data, Key.down)) {
-            if (!isRepeat) {
-                this.scrollDown(1);
-            }
-            return;
-        }
-        if (matchesKey(data, "k") || matchesKey(data, Key.up)) {
-            if (!isRepeat) {
-                this.scrollUp(1);
-            }
-            return;
-        }
-        if (matchesKey(data, Key.pageDown)) {
-            this.scrollDown(VISIBLE_MEMBERS);
-            return;
-        }
-        if (matchesKey(data, Key.pageUp)) {
-            this.scrollUp(VISIBLE_MEMBERS);
-            return;
-        }
-        if (matchesKey(data, "g") || matchesKey(data, Key.home)) {
-            this.scrollOffset = 0;
-            this.selectedIndex = -1;
-            this.requestRender();
-            return;
-        }
-        if (matchesKey(data, Key.shift("g")) || matchesKey(data, Key.end)) {
-            if (this.state_) {
-                const maxScroll = Math.max(0, this.state_.members.length - VISIBLE_MEMBERS);
-                this.scrollOffset = maxScroll;
-                this.selectedIndex = Math.max(0, this.state_.members.length - 1);
-            }
-            this.requestRender();
-            return;
-        }
-        // Panel switching
-        if (matchesKey(data, Key.tab) || matchesKey(data, "1")) {
-            this.activePanel = "members";
-            this.scrollOffset = 0;
-            this.selectedIndex = -1;
-            this.requestRender();
-            return;
-        }
-        if (matchesKey(data, "2")) {
-            this.activePanel = "events";
-            this.scrollOffset = 0;
-            this.requestRender();
-            return;
-        }
-        // Detail overlay
-        if (matchesKey(data, Key.enter) || matchesKey(data, Key.return)) {
-            if (this.activePanel === "members" && this.state_) {
-                const idx = this.selectedIndex >= 0 ? this.selectedIndex : this.scrollOffset;
-                if (idx >= 0 && idx < this.state_.members.length) {
-                    this.overlay = { kind: "detail" };
-                    this.requestRender();
-                }
-            }
-            return;
-        }
-        // Help overlay
-        if (matchesKey(data, "?")) {
-            this.overlay = { kind: "help" };
-            this.requestRender();
-            return;
-        }
+    handleInput(_data) {
+        /* minimal: no keyboard */
     }
     // -------------------------------------------------------------------
     // Rendering
     // -------------------------------------------------------------------
     render(width) {
         const safeWidth = Math.max(20, width);
-        if (this.cachedLines && this.renderedWidth === safeWidth) {
-            return this.cachedLines;
-        }
-        if (!this.state_ || this.state_.members.length === 0) {
-            this.cachedLines = [];
-            return this.cachedLines;
-        }
-        // If overlay is active, render overlay content
-        if (this.overlay) {
-            const lines = this.renderOverlay(safeWidth);
-            this.cachedLines = lines;
-            return this.cachedLines;
-        }
+        if (!this.state_ || this.state_.members.length === 0)
+            return [];
         const state = this.state_;
-        const contentWidth = safeWidth - 4;
         const lines = [];
-        // Header: title + panel indicator
-        const title = state.title ?? "Agent Swarm";
-        const panelLabel = this.activePanel === "members" ? "[1]members" : "[2]events";
-        const headerText = `${title}  ${panelLabel}`;
-        lines.push(`  ${truncateText(headerText, contentWidth)}`);
-        // Overall progress bar
-        const barWidth = Math.max(1, contentWidth);
-        const total = state.total || 1;
-        const doneRatio = (state.completed + state.failed) / total;
-        const doneChars = Math.round(doneRatio * barWidth);
-        const done = "\u2501".repeat(doneChars);
-        const remaining = "\u2501".repeat(barWidth - doneChars);
-        lines.push(`  ${done}${remaining}`);
-        if (this.activePanel === "members") {
-            this.renderMembersPanel(lines, state, contentWidth);
-        }
-        else {
-            this.renderEventsPanel(lines, state, contentWidth);
-        }
-        // Separator
-        const sep = "\u2500".repeat(contentWidth);
-        lines.push(`  ${sep}`);
-        // Footer: counts + tokens + elapsed + ETA
-        const footer = buildFooter(state, contentWidth);
-        lines.push(`  ${footer}`);
-        // Bottom border
-        const bottom = `\u2514${"\u2500".repeat(contentWidth)}\u2518`;
-        lines.push(bottom);
-        this.cachedLines = lines;
-        this.renderedWidth = safeWidth;
-        return this.cachedLines;
+        // Header: ─ Agent Swarm ─ <title> ──────────
+        lines.push(this.renderHeader(safeWidth, state));
+        lines.push("");
+        // Agent panels (vertical or compact grid)
+        const memberLines = this.renderAgentPanels(safeWidth - 2, state);
+        lines.push(...memberLines);
+        lines.push("");
+        // Bottom separator
+        const sepWidth = safeWidth - 2;
+        lines.push(truncateText(repeatStr("\u2500", sepWidth), sepWidth));
+        // Status line: Working...  N/M (P%)  elapsed
+        lines.push(this.renderStatusLine(safeWidth, state));
+        return lines;
     }
     // -------------------------------------------------------------------
-    // Panel rendering
+    // Header: ─ Agent Swarm ─ <desc> ──────────
     // -------------------------------------------------------------------
-    renderMembersPanel(lines, state, contentWidth) {
-        const maxMembers = Math.min(state.members.length, this.scrollOffset + VISIBLE_MEMBERS);
-        const hasMore = state.members.length > VISIBLE_MEMBERS;
-        // Scroll indicator (top)
-        if (hasMore && this.scrollOffset > 0) {
-            lines.push(`  \u2191 ${this.scrollOffset} more above`);
-        }
-        for (let i = this.scrollOffset; i < maxMembers; i += 1) {
-            const member = state.members[i];
-            if (!member)
-                continue;
-            const isSelected = i === this.selectedIndex ||
-                (this.selectedIndex < 0 && i === this.scrollOffset);
-            const row = renderMemberRow(member, contentWidth, this.frameIndex, isSelected);
-            lines.push(`  ${row}`);
-        }
-        // Scroll indicator (bottom)
-        if (hasMore && maxMembers < state.members.length) {
-            const remaining = state.members.length - maxMembers;
-            lines.push(`  \u2193 ${remaining} more below`);
-        }
+    renderHeader(width, state) {
+        const mode = state.mailbox ? "Swarm Team" : "Agent Swarm";
+        const desc = state.title ?? "";
+        const mailboxInfo = state.mailboxCount && state.mailboxCount > 0
+            ? ` | Mailbox: ${state.mailboxCount}`
+            : "";
+        const prefix = `\u2500 ${mode}`;
+        const content = desc ? ` \u2500 ${desc}` : "";
+        const label = `${prefix}${content}${mailboxInfo}`;
+        const suffixLen = Math.max(0, width - visibleLen(label) - 2);
+        const suffix = suffixLen > 0 ? ` \u2500${repeatStr("\u2500", suffixLen)}` : "";
+        return truncateText(`${label}${suffix}`, width);
     }
-    renderEventsPanel(lines, state, contentWidth) {
-        const events = state.eventLog ?? [];
-        const displayEvents = events.slice(-VISIBLE_EVENTS);
-        if (displayEvents.length === 0) {
-            lines.push(`  ${padRight("(no events yet)", contentWidth)}`);
-            return;
-        }
-        for (const event of displayEvents) {
-            const time = new Date(event.timestamp).toLocaleTimeString();
-            const icon = eventIcon(event.type);
-            const detail = truncateText(event.detail, contentWidth - 12);
-            lines.push(`  ${icon} ${time} ${detail}`);
-        }
+    // -------------------------------------------------------------------
+    // Status line
+    // -------------------------------------------------------------------
+    renderStatusLine(width, state) {
+        const done = state.completed + state.failed;
+        const total = state.total;
+        const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+        const elapsed = formatElapsed(Date.now() - state.startedAt);
+        const label = state.active > 0 ? "Working..." : "Completed";
+        return truncateText(`${label}  ${done}/${total} (${pct}%)  ${elapsed}`, width);
     }
     // -------------------------------------------------------------------
-    // Overlays
+    // Agent panel layout selection
     // -------------------------------------------------------------------
-    renderOverlay(width) {
-        if (!this.overlay)
+    /**
+     * Render all agents.  Uses vertical panels for small counts
+     * and a compact 2-column grid for larger batches.
+     */
+    renderAgentPanels(width, state) {
+        const count = Math.min(state.members.length, MAX_VISIBLE_MEMBERS);
+        if (count <= 0)
             return [];
-        if (this.overlay.kind === "help") {
-            return this.renderHelpOverlay(width);
+        if (count <= VERTICAL_LAYOUT_MAX) {
+            return this.renderVerticalPanels(width, state);
         }
-        return this.renderDetailOverlay(width);
+        return this.renderCompactGrid(width, state);
     }
-    renderHelpOverlay(width) {
-        const safeWidth = Math.max(30, width);
-        const contentWidth = safeWidth - 6;
+    // -------------------------------------------------------------------
+    // Vertical panel layout (1-4 agents)
+    //
+    // Each agent is a single line with live activity inline:
+    //   001 [▓▓▓▓▓░░░] read: src/lib.rs lines 42-99
+    //   (blank line between agents)
+    // -------------------------------------------------------------------
+    renderVerticalPanels(width, state) {
+        const count = Math.min(state.members.length, MAX_VISIBLE_MEMBERS);
         const lines = [];
-        const bottom = `\u2514${"\u2500".repeat(safeWidth - 2)}\u2518`;
-        lines.push(`  \u250C${"\u2500".repeat(safeWidth - 2)}\u2510`);
-        lines.push(`  \u2502  ${padRight("Help" + " ".repeat(contentWidth - 4), safeWidth - 4)}\u2502`);
-        lines.push(`  \u2502  ${padRight("", safeWidth - 4)}\u2502`);
-        const helpItems = [
-            ["j/k, up/down", "Scroll member list"],
-            ["g / Shift+G", "Go to top / bottom"],
-            ["Enter", "View member detail"],
-            ["1 or Tab", "Members panel"],
-            ["2", "Events panel"],
-            ["?", "Toggle this help"],
-            ["q / Esc", "Close overlay"],
-        ];
-        for (const [key, desc] of helpItems) {
-            const line = `${padRight(key, 18)} ${desc}`;
-            lines.push(`  \u2502  ${padRight(line, safeWidth - 4)}\u2502`);
+        for (let i = 0; i < count; i++) {
+            const member = state.members[i];
+            lines.push(this.renderAgentLine(member, width));
+            if (i < count - 1) {
+                lines.push(""); // blank line separator between agents
+            }
+        }
+        if (state.members.length > MAX_VISIBLE_MEMBERS) {
+            lines.push(`  ... ${state.members.length - MAX_VISIBLE_MEMBERS} more`);
         }
-        lines.push(`  \u2502  ${padRight("", safeWidth - 4)}\u2502`);
-        lines.push(`  \u2502  ${padRight("Press q or Esc to close", safeWidth - 4)}\u2502`);
-        lines.push(bottom);
         return lines;
     }
-    renderDetailOverlay(width) {
-        const safeWidth = Math.max(30, width);
-        const contentWidth = safeWidth - 6;
+    /**
+     * Render one agent as a single line with fixed-width progress bar.
+     *
+     * Format: `001 [braille bar] read: src/lib.rs lines 42-99`
+     * Bar is always FIXED_BAR_CELLS (5) wide so tool labels align across agents.
+     *
+     * Progress is driven by progressTick (actual tool calls / activity events),
+     * not wall-clock time.  Each tick fills one level of the braille bar.
+     */
+    renderAgentLine(member, width) {
+        const id = String(member.index).padStart(ID_WIDTH, "0");
+        // Fixed bar width — ensures all agent labels align
+        const barCells = FIXED_BAR_CELLS;
+        // Label gets the remaining space after id + bar + fixed gaps
+        const labelWidth = Math.max(4, width - ID_WIDTH - barCells - 4);
+        const bar = this.renderBrailleBar(member, barCells);
+        const label = this.renderCellLabel(member, labelWidth);
+        return truncateText(`${id} ${bar} ${label}`, width);
+    }
+    // -------------------------------------------------------------------
+    // Compact grid layout (5+ agents)
+    //
+    // 2 columns, single-line cells:
+    //   001 [▓▓▓] task    002 [▓▓▓] task
+    //   003 [▓▓▓] task    004 [▓▓▓] task
+    // -------------------------------------------------------------------
+    renderCompactGrid(width, state) {
+        const cols = 2;
+        const count = Math.min(state.members.length, MAX_VISIBLE_MEMBERS);
+        const gap = 3; // spaces between columns
+        const cellWidth = Math.floor((width - gap) / cols);
+        const rows = Math.ceil(count / cols);
         const lines = [];
-        if (!this.state_)
-            return [];
-        const idx = this.selectedIndex >= 0 ? this.selectedIndex : this.scrollOffset;
-        const member = this.state_.members[idx];
-        if (!member)
-            return [];
-        const bottom = `\u2514${"\u2500".repeat(safeWidth - 2)}\u2518`;
-        lines.push(`  \u250C${"\u2500".repeat(safeWidth - 2)}\u2510`);
-        lines.push(`  \u2502  ${padRight(`Agent #${String(member.index).padStart(2, "0")}`, safeWidth - 4)}\u2502`);
-        lines.push(`  \u2502  ${padRight("", safeWidth - 4)}\u2502`);
-        const fields = [
-            { label: "Status", value: shortPhaseLabel(member.phase) },
-        ];
-        if (member.item) {
-            fields.push({ label: "Item", value: member.item });
-        }
-        if (member.currentTool) {
-            fields.push({ label: "Tool", value: member.currentTool });
-        }
-        if (member.activity) {
-            fields.push({ label: "Activity", value: member.activity });
-        }
-        if (member.usage) {
-            fields.push({
-                label: "Tokens",
-                value: `${Math.round(member.usage.input)}in / ${Math.round(member.usage.output)}out`,
-            });
-        }
-        if (member.error) {
-            fields.push({ label: "Error", value: member.error });
+        for (let row = 0; row < rows; row++) {
+            let line = "";
+            for (let col = 0; col < cols; col++) {
+                const idx = row * cols + col;
+                if (idx >= count)
+                    break;
+                const member = state.members[idx];
+                const cw = col < cols - 1 ? cellWidth : width - line.length;
+                const cell = this.renderGridCell(member, cw);
+                line += cell;
+                if (col < cols - 1) {
+                    // Pad to fill the remaining cell width + gap
+                    const padLen = Math.max(0, cellWidth - visibleLen(cell) + gap);
+                    line += " ".repeat(padLen);
+                }
+            }
+            lines.push(truncateText(line, width));
         }
-        for (const field of fields) {
-            const line = `${padRight(field.label + ":", 10)} ${truncateText(field.value, contentWidth - 12)}`;
-            lines.push(`  \u2502  ${padRight(line, safeWidth - 4)}\u2502`);
+        if (state.members.length > MAX_VISIBLE_MEMBERS) {
+            lines.push(`  ... ${state.members.length - MAX_VISIBLE_MEMBERS} more`);
         }
-        lines.push(`  \u2502  ${padRight("", safeWidth - 4)}\u2502`);
-        lines.push(`  \u2502  ${padRight("Press q or Esc to close", safeWidth - 4)}\u2502`);
-        lines.push(bottom);
         return lines;
     }
+    /**
+     * Compact single-line grid cell.
+     * Format: `001 [▓▓] label`
+     */
+    renderGridCell(member, width) {
+        const id = String(member.index).padStart(ID_WIDTH, "0");
+        // Compact grid uses fewer bar cells
+        const barCells = GRID_BAR_CELLS;
+        const bar = this.renderBrailleBar(member, barCells);
+        const labelWidth = Math.max(2, width - ID_WIDTH - barCells - 4);
+        const label = this.renderCellLabel(member, labelWidth);
+        return `${id} ${bar} ${label}`;
+    }
     // -------------------------------------------------------------------
-    // Scroll helpers
+    // Braille progress bar
+    //
+    // Tool-call-based progress for working agents:
+    //   - Each progressTick (tool call / activity event) fills one level.
+    //   - Bar fills up as the agent works; capped at 85% so completed
+    //     agents (full bar) are visually distinguishable from working ones.
+    //   - Empty cells show the baseline character so the bar track is always visible.
+    //
+    // Completed agents: full bar
+    // Failed agents: half bar
+    // Queued/suspended: empty bar (baseline only)
     // -------------------------------------------------------------------
-    scrollDown(n) {
-        if (!this.state_)
-            return;
-        const memberCount = this.state_.members.length;
-        const maxOffset = Math.max(0, memberCount - 1);
-        this.selectedIndex = Math.min(maxOffset, Math.max(0, this.selectedIndex < 0 ? this.scrollOffset : this.selectedIndex) + n);
-        if (this.selectedIndex - this.scrollOffset >= VISIBLE_MEMBERS ||
-            this.selectedIndex < this.scrollOffset) {
-            this.scrollOffset = Math.max(0, this.selectedIndex - VISIBLE_MEMBERS + 1);
-            const maxScroll = Math.max(0, memberCount - VISIBLE_MEMBERS);
-            this.scrollOffset = Math.min(this.scrollOffset, maxScroll);
+    renderBrailleBar(member, width) {
+        if (width <= 0)
+            return "";
+        const capacity = width * BRAILLE_LEVELS.length;
+        let ticks;
+        if (member.phase === "completed") {
+            ticks = capacity;
+        }
+        else if (member.phase === "failed") {
+            ticks = Math.floor(capacity / 2);
+        }
+        else if (member.phase === "working" || member.phase === "prompting") {
+            // Fill based on actual tool-call progress.
+            // Each tool execution or model output event increments progressTick by 1.
+            // Cap at 85% so "almost done" is visually distinct from "completed".
+            ticks = Math.min(member.progressTick ?? 0, Math.floor(capacity * 0.85));
         }
-        this.requestRender();
-    }
-    scrollUp(n) {
-        if (!this.state_)
-            return;
-        this.selectedIndex = Math.max(0, (this.selectedIndex < 0 ? this.scrollOffset : this.selectedIndex) - n);
-        if (this.selectedIndex < this.scrollOffset) {
-            this.scrollOffset = Math.max(0, this.selectedIndex);
+        else {
+            ticks = 0;
+        }
+        const fullBars = Math.floor(ticks / BRAILLE_LEVELS.length);
+        const partial = ticks % BRAILLE_LEVELS.length;
+        const partialChar = partial > 0 ? BRAILLE_LEVELS[partial - 1] : "";
+        let bar = "";
+        for (let i = 0; i < width; i++) {
+            if (i < fullBars) {
+                bar += BRAILLE_LEVELS[BRAILLE_LEVELS.length - 1]; // Full cell
+            }
+            else if (i === fullBars && partialChar) {
+                bar += partialChar;
+            }
+            else {
+                bar += BRAILLE_EMPTY;
+            }
         }
-        this.requestRender();
+        return bar;
+    }
+    // -------------------------------------------------------------------
+    // Cell label rendering
+    // -------------------------------------------------------------------
+    renderCellLabel(member, width) {
+        if (width <= 0)
+            return "";
+        if (member.phase === "working" || member.phase === "prompting") {
+            // Show tool: activity_text (scrolling model output / shell command)
+            const toolPart = member.currentTool ? `${member.currentTool}: ` : "";
+            const activityText = member.activity ?? member.item ?? "";
+            const text = toolPart + activityText;
+            return truncateText(text, width);
+        }
+        if (member.phase === "completed")
+            return truncateText("ok", width);
+        if (member.phase === "failed" && member.error)
+            return truncateText(member.error, Math.min(width, 20));
+        if (member.phase === "queued" || member.phase === "suspended")
+            return truncateText(member.item ?? "...", width);
+        return "";
     }
     // -------------------------------------------------------------------
     // Render scheduling
     // -------------------------------------------------------------------
-    /**
-     * Request a debounced render. Multiple calls within the debounce window
-     * coalesce into a single render pass. State changes also trigger immediate
-     * invalidation.
-     */
     requestRender() {
-        this.invalidate();
         if (this.debounceTimer !== undefined) {
-            this.pendingInvalidate = true;
             return;
         }
         this.debounceTimer = setTimeout(() => {
             this.debounceTimer = undefined;
-            this.pendingInvalidate = false;
             this.onRequestRender?.();
-            this.updatePollingInterval();
         }, DEBOUNCE_MS);
-        // Also trigger an immediate render for faster response to inputs
         this.onRequestRender?.();
     }
-    /**
-     * Start the fallback polling timer. Falls back to polling when no
-     * state changes trigger requests, ensuring the spinner animates.
-     */
     startPolling() {
-        this.schedulePoll();
-    }
-    schedulePoll() {
-        const interval = this.hasActiveMembers ? ACTIVE_POLL_MS : IDLE_POLL_MS;
         this.pollTimer = setTimeout(() => {
             this.pollTimer = undefined;
-            // Tick the spinner frame even without state changes
-            if (this.state_) {
-                this.invalidate();
+            if (this.state_)
                 this.onRequestRender?.();
-            }
-            this.schedulePoll();
-        }, interval);
-    }
-    /**
-     * Adjust polling interval based on active member count.
-     */
-    updatePollingInterval() {
-        // Will be picked up on next poll cycle
-    }
-    /**
-     * Start the animation tick for the braille spinner.
-     */
-    startAnimation() {
-        this.animationFrame = setInterval(() => {
-            this.frameIndex = (this.frameIndex + 1) % BRAILLE_SPINNER.length;
-            // Only invalidate and re-render if there are active members (spinner visible)
-            // or if we're in an overlay that uses animation
-            if (this.hasActiveMembers || this.overlay) {
-                this.invalidate();
-                this.onRequestRender?.();
-            }
-        }, FRAME_INTERVAL_MS);
+            this.startPolling();
+        }, POLL_MS);
     }
     stopTimers() {
-        if (this.animationFrame !== undefined) {
-            clearInterval(this.animationFrame);
-            this.animationFrame = undefined;
-        }
         if (this.debounceTimer !== undefined) {
             clearTimeout(this.debounceTimer);
             this.debounceTimer = undefined;
@@ -525,108 +379,13 @@ export class AgentSwarmProgressComponent {
     }
 }
 // ---------------------------------------------------------------------------
-// Rendering helpers
+// Text utilities
 // ---------------------------------------------------------------------------
-function eventIcon(type) {
-    switch (type) {
-        case "started":
-            return "\u25B6"; // ▶
-        case "completed":
-            return "\u2713"; // ✓
-        case "failed":
-            return "\u2717"; // ✗
-        case "tool_execution":
-            return "\u2699"; // ⚙
-        case "suspended":
-            return "\u23F3"; // ⏳
-        case "phase_change":
-            return "\u2192"; // →
-    }
-}
-function renderMemberRow(member, width, frameIndex, selected) {
-    const prefix = selected ? ">" : " ";
-    const indexLabel = `#${String(member.index).padStart(2, "0")}`;
-    const icon = memberIcon(member, frameIndex);
-    const statusLabel = shortPhaseLabel(member.phase);
-    // Layout with optional activity column
-    const fixed = `${prefix}${indexLabel} ${icon} ${statusLabel}`;
-    const fixedLen = visibleLen(fixed);
-    let remaining = Math.max(0, width - fixedLen - 2);
-    // Show current tool if available
-    let activitySuffix = "";
-    if (member.currentTool && member.phase === "working") {
-        const toolInfo = member.activity
-            ? `${member.currentTool}: ${member.activity}`
-            : member.currentTool;
-        if (toolInfo.length < remaining - 2) {
-            activitySuffix = ` ${truncateText(toolInfo, Math.min(30, remaining - 2))}`;
-            remaining -= visibleLen(activitySuffix);
-        }
-    }
-    const itemLabel = member.item ?? "";
-    const truncatedItem = truncateText(itemLabel, Math.max(0, remaining));
-    return `${fixed}  ${truncatedItem}${activitySuffix}`;
-}
-function memberIcon(member, frameIndex) {
-    switch (member.phase) {
-        case "completed":
-            return BRAILLE_FULL.repeat(2);
-        case "failed":
-        case "cancelled":
-            return "\u2717 ";
-        case "pending":
-        case "queued":
-            return "\u25CB ";
-        case "prompting":
-        case "working":
-        case "suspended":
-            return BRAILLE_SPINNER[frameIndex % BRAILLE_SPINNER.length] + " ";
-    }
-}
-function shortPhaseLabel(phase) {
-    switch (phase) {
-        case "pending":
-        case "queued":
-            return "wait";
-        case "prompting":
-            return "init";
-        case "working":
-            return "work";
-        case "completed":
-            return "done";
-        case "failed":
-            return "fail";
-        case "cancelled":
-            return "abort";
-        case "suspended":
-            return "retry";
-    }
-}
-function buildFooter(state, width) {
-    const usage = state.totalUsage ?? {
-        input: 0,
-        output: 0,
-        cacheRead: 0,
-        cacheWrite: 0,
-        totalTokens: 0,
-    };
-    const counts = `${state.completed + state.failed}/${state.total} ag`;
-    const tokens = `${Math.round(usage.input)}in/${Math.round(usage.output)}out`;
-    const elapsed = formatElapsed(Date.now() - state.startedAt);
-    const parts = [counts, tokens, elapsed];
-    if (state.failed > 0)
-        parts.splice(1, 0, `${state.failed}fail`);
-    if (state.active > 0)
-        parts.splice(1, 0, `${state.active}act`);
-    // ETA
-    if (state.estimatedRemainingMs !== undefined &&
-        state.estimatedRemainingMs > 0) {
-        parts.push(formatElapsed(state.estimatedRemainingMs));
-    }
-    const full = parts.join(" | ");
-    if (full.length <= width)
-        return full;
-    return truncateText(full, width);
+function repeatStr(ch, count) {
+    let out = "";
+    for (let i = 0; i < count; i++)
+        out += ch;
+    return out;
 }
 function formatElapsed(ms) {
     const totalSec = Math.floor(ms / 1000);
@@ -634,24 +393,21 @@ function formatElapsed(ms) {
         return `${totalSec}s`;
     const m = Math.floor(totalSec / 60);
     const s = totalSec % 60;
-    return `${m}m${s}s`;
+    if (m < 60)
+        return `${m}m ${s}s`;
+    const h = Math.floor(m / 60);
+    return `${h}h ${m % 60}m ${s}s`;
 }
-// ---------------------------------------------------------------------------
-// Text utilities
-// ---------------------------------------------------------------------------
 function visibleLen(text) {
     return text.replace(/\x1b\[[0-9;]*m/g, "").length;
 }
 function truncateText(text, maxLen) {
+    if (maxLen <= 0)
+        return "";
     if (text.length <= maxLen)
         return text;
     if (maxLen <= 1)
         return text.slice(0, 1);
-    return text.slice(0, Math.max(0, maxLen - 1)) + "\u2026";
-}
-function padRight(text, width) {
-    if (text.length >= width)
-        return text.slice(0, width);
-    return text + " ".repeat(width - text.length);
+    return text.slice(0, maxLen - 1) + "\u2026";
 }
 //# sourceMappingURL=progress.js.map