@gjczone/pi-swarm 0.3.5 → 0.5.0

package/dist/tui/progress.js

@@ -2,56 +2,64 @@
  * 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 braille
- * progress bar with status labels.
+ * an AgentSwarm batch is running. Each subagent gets a compact braille
+ * spinner with status and item description.
+ *
+ * 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
  *
  * Ported from MoonshotAI/kimi-code's AgentSwarmProgressComponent.
  */
+import { matchesKey, Key, isKeyRepeat } from "@earendil-works/pi-tui";
 // ---------------------------------------------------------------------------
-// Constants (from kimi-code)
+// Constants
 // ---------------------------------------------------------------------------
-/** Preferred width for the item text column. */
-const TEXT_CELL_PREFERRED_WIDTH = 30;
-/** Gap between columns. */
-const CELL_GAP = "  ";
-/** Braille bar max width in characters. */
-const BRAILLE_BAR_MAX_WIDTH = 8;
-/** Minimum braille bar width. */
-const TEXT_BRAILLE_BAR_MIN_WIDTH = 6;
-/** Animation frame interval in ms. */
-const FRAME_INTERVAL_MS = 80;
-/** How long the completion-fill animation lasts in ms. */
-const COMPLETE_FILL_MS = 360;
-/** Braille characters representing fill levels 0-6 dots. */
+/** 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", // 0 dots (empty)
-    "\u28C4", // 1 dot
-    "\u28E4", // 2 dots
-    "\u28E6", // 3 dots
-    "\u28F6", // 4 dots
-    "\u28F7", // 5 dots
-    "\u28FF", // 6 dots (full)
+    "\u28C0",
+    "\u28C4",
+    "\u28E4",
+    "\u28E6",
+    "\u28F6",
+    "\u28F7",
+    "\u28FF",
 ];
 const BRAILLE_EMPTY = BRAILLE_LEVELS[0];
 const BRAILLE_FULL = BRAILLE_LEVELS[6];
-/** Status labels for each phase. */
-const ORCHESTRATING_LABEL = "Orchestrating...";
-const WORKING_LABEL = "Working...";
-const COMPLETED_LABEL = "Completed.";
-const FAILED_LABEL = "Failed.";
-const ABORTED_LABEL = "Aborted.";
-const QUEUED_LABEL = "Queued...";
+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 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;
 // ---------------------------------------------------------------------------
-// Snapshot conversion (controller snapshot -> component state)
+// Snapshot conversion
 // ---------------------------------------------------------------------------
-/**
- * Convert a BatchProgressSnapshot from the concurrency controller into
- * the SwarmProgressState expected by AgentSwarmProgressComponent.
- *
- * Maps the controller's coarse member phases onto the component's
- * richer MemberPhase set, attaching a phaseStartedAt timestamp so the
- * braille animation can run for working/suspended members.
- */
 export function snapshotToProgressState(snapshot, title) {
     const now = Date.now();
     const members = snapshot.members.map((m) => ({
@@ -60,6 +68,9 @@ export function snapshotToProgressState(snapshot, title) {
         item: m.item,
         error: m.error,
         phaseStartedAt: isAnimatedPhase(m.phase) ? now : undefined,
+        currentTool: m.currentTool,
+        activity: m.activity,
+        usage: m.usage,
     }));
     return {
         title,
@@ -69,6 +80,10 @@ export function snapshotToProgressState(snapshot, title) {
         active: snapshot.active,
         queued: snapshot.queued,
         members,
+        totalUsage: snapshot.totalUsage,
+        startedAt: snapshot.startedAt ?? now,
+        estimatedRemainingMs: snapshot.estimatedRemainingMs,
+        eventLog: snapshot.eventLog ? [...snapshot.eventLog] : undefined,
     };
 }
 function mapMemberPhase(phase) {
@@ -93,37 +108,40 @@ function isAnimatedPhase(phase) {
 // ---------------------------------------------------------------------------
 export class AgentSwarmProgressComponent {
     state_ = null;
-    animationFrame;
-    startTime = Date.now();
     renderedWidth;
     cachedLines;
     onRequestRender;
-    /**
-     * @param onRequestRender  Optional callback to request a TUI re-render.
-     *   When provided, called on every animation tick so the braille bars
-     *   animate.  Without it the component still renders correctly but the
-     *   animation won't be visible to the user.
-     *
-     *   业务说明：TUI 框架不会自动轮询组件；需要通过 requestRender() 主动
-     *   触发重绘才能使 braille 进度条动起来。此回调由 setWidget 工厂函数
-     *   在捕获 tui 引用后传入。
-     */
+    // 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 the progress state from the tool execution. */
     update(state) {
         this.state_ = state;
-        this.invalidate();
+        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();
     }
-    /** Mark the swarm as completed (triggers completion animation). */
     complete() {
         if (this.state_) {
-            // Mark all non-terminal members as completed
             for (const m of this.state_.members) {
                 if (m.phase !== "completed" &&
                     m.phase !== "failed" &&
@@ -135,28 +153,106 @@ export class AgentSwarmProgressComponent {
             this.state_.active = 0;
             this.state_.queued = 0;
             this.state_.completed = this.state_.total - this.state_.failed;
-            this.state_.status = COMPLETED_LABEL;
         }
-        this.invalidate();
+        this.hasActiveMembers = false;
+        this.requestRender();
     }
-    /** Stop the animation loop. */
     dispose() {
-        if (this.animationFrame !== undefined) {
-            clearInterval(this.animationFrame);
-            this.animationFrame = undefined;
-        }
-        // 断开与 TUI 框架的连接，防止内存泄漏
+        this.stopTimers();
         this.onRequestRender = undefined;
     }
-    // -------------------------------------------------------------------
-    // Component interface
-    // -------------------------------------------------------------------
     invalidate() {
         this.renderedWidth = undefined;
         this.cachedLines = undefined;
     }
+    // -------------------------------------------------------------------
+    // 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;
+        }
+    }
+    // -------------------------------------------------------------------
+    // Rendering
+    // -------------------------------------------------------------------
     render(width) {
-        const safeWidth = Math.max(10, width);
+        const safeWidth = Math.max(20, width);
         if (this.cachedLines && this.renderedWidth === safeWidth) {
             return this.cachedLines;
         }
@@ -164,176 +260,398 @@ export class AgentSwarmProgressComponent {
             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;
+        }
         const state = this.state_;
+        const contentWidth = safeWidth - 4;
         const lines = [];
-        // Title bar
+        // Header: title + panel indicator
         const title = state.title ?? "Agent Swarm";
-        lines.push(borderTop(title, safeWidth));
-        // Overall status
-        const statusLabel = state.status ?? resolveOverallStatus(state);
-        const statusBar = buildStatusBar(state, safeWidth);
-        lines.push(`  ${statusLabel}`);
-        lines.push(`  ${statusBar}`);
-        // Member rows
-        const maxMembers = Math.min(state.members.length, 20); // Cap for performance
-        for (let i = 0; i < maxMembers; i += 1) {
-            const member = state.members[i];
-            if (!member)
-                continue;
-            const row = renderMemberRow(member, safeWidth - 4);
-            lines.push(`  ${row}`);
+        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);
         }
-        // Summary
-        const summary = buildSummary(state, safeWidth - 4);
-        lines.push(`  ${summary}`);
+        // Separator
+        const sep = "\u2500".repeat(contentWidth);
+        lines.push(`  ${sep}`);
+        // Footer: counts + tokens + elapsed + ETA
+        const footer = buildFooter(state, contentWidth);
+        lines.push(`  ${footer}`);
         // Bottom border
-        lines.push(borderBottom(safeWidth));
+        const bottom = `\u2514${"\u2500".repeat(contentWidth)}\u2518`;
+        lines.push(bottom);
         this.cachedLines = lines;
         this.renderedWidth = safeWidth;
         return this.cachedLines;
     }
     // -------------------------------------------------------------------
-    // Animation
+    // Panel rendering
+    // -------------------------------------------------------------------
+    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`);
+        }
+    }
+    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}`);
+        }
+    }
+    // -------------------------------------------------------------------
+    // Overlays
     // -------------------------------------------------------------------
+    renderOverlay(width) {
+        if (!this.overlay)
+            return [];
+        if (this.overlay.kind === "help") {
+            return this.renderHelpOverlay(width);
+        }
+        return this.renderDetailOverlay(width);
+    }
+    renderHelpOverlay(width) {
+        const safeWidth = Math.max(30, width);
+        const contentWidth = safeWidth - 6;
+        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`);
+        }
+        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;
+        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 (const field of fields) {
+            const line = `${padRight(field.label + ":", 10)} ${truncateText(field.value, contentWidth - 12)}`;
+            lines.push(`  \u2502  ${padRight(line, safeWidth - 4)}\u2502`);
+        }
+        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;
+    }
+    // -------------------------------------------------------------------
+    // Scroll helpers
+    // -------------------------------------------------------------------
+    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);
+        }
+        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);
+        }
+        this.requestRender();
+    }
+    // -------------------------------------------------------------------
+    // 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();
+                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.invalidate();
-            // 通知 TUI 框架重绘，使 braille 动画可见
-            this.onRequestRender?.();
+            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);
     }
+    stopTimers() {
+        if (this.animationFrame !== undefined) {
+            clearInterval(this.animationFrame);
+            this.animationFrame = undefined;
+        }
+        if (this.debounceTimer !== undefined) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = undefined;
+        }
+        if (this.pollTimer !== undefined) {
+            clearTimeout(this.pollTimer);
+            this.pollTimer = undefined;
+        }
+    }
 }
 // ---------------------------------------------------------------------------
 // Rendering helpers
 // ---------------------------------------------------------------------------
-function borderTop(title, width) {
-    const inner = ` ${title} `;
-    // Reserve 2 chars for corner symbols (┌ and ┐), 1 for the leading dash
-    const minLen = inner.length + 3;
-    if (minLen > width) {
-        const maxInner = Math.max(0, width - 2);
-        const truncated = inner.slice(0, maxInner);
-        return `\u250C${truncated}\u2510`;
-    }
-    const dashes = width - inner.length - 3;
-    return `\u250C${inner}\u2500${"\u2500".repeat(Math.max(0, dashes))}\u2510`;
-}
-function borderBottom(width) {
-    return `\u2514${"\u2500".repeat(Math.max(0, width - 2))}\u2518`;
-}
-function resolveOverallStatus(state) {
-    if (state.queued === 0 && state.active === 0) {
-        if (state.failed > 0)
-            return FAILED_LABEL;
-        return COMPLETED_LABEL;
+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"; // →
     }
-    if (state.active > 0)
-        return WORKING_LABEL;
-    return ORCHESTRATING_LABEL;
 }
-function buildStatusBar(state, width) {
-    const barWidth = Math.max(1, width - 4);
-    const total = state.total || 1;
-    const doneRatio = (state.completed + state.failed) / total;
-    const doneChars = Math.round(doneRatio * barWidth);
-    const remainingChars = barWidth - doneChars;
-    const done = "\u2501".repeat(doneChars);
-    const remaining = "\u2501".repeat(remainingChars);
-    return done + remaining;
-}
-function renderMemberRow(member, width) {
-    const indexLabel = `#${String(member.index)}`;
-    const brailleBar = renderBrailleBar(member, BRAILLE_BAR_MAX_WIDTH);
-    const statusLabel = memberPhaseLabel(member.phase);
-    const itemLabel = (member.item ?? "").slice(0, TEXT_CELL_PREFERRED_WIDTH);
-    // Layout: #N [braille] Status  item
-    const fixed = `${indexLabel} ${brailleBar} ${statusLabel}`;
+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);
-    // If the fixed part alone exceeds width, truncate it
-    if (fixedLen >= width) {
-        return fixed.slice(0, width);
+    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 itemSpace = Math.max(0, width - fixedLen - 2);
-    const truncatedItem = truncateText(itemLabel, itemSpace);
-    return `${fixed}  ${truncatedItem}`;
+    const itemLabel = member.item ?? "";
+    const truncatedItem = truncateText(itemLabel, Math.max(0, remaining));
+    return `${fixed}  ${truncatedItem}${activitySuffix}`;
 }
-function renderBrailleBar(member, maxWidth) {
-    const phase = member.phase;
-    const elapsed = member.phaseStartedAt
-        ? Date.now() - member.phaseStartedAt
-        : 0;
-    switch (phase) {
+function memberIcon(member, frameIndex) {
+    switch (member.phase) {
         case "completed":
-            return BRAILLE_FULL.repeat(maxWidth);
+            return BRAILLE_FULL.repeat(2);
         case "failed":
         case "cancelled":
+            return "\u2717 ";
         case "pending":
         case "queued":
-            return BRAILLE_EMPTY.repeat(maxWidth);
+            return "\u25CB ";
         case "prompting":
         case "working":
         case "suspended":
-            return animatedBrailleBar(maxWidth, elapsed);
-    }
-}
-function animatedBrailleBar(maxWidth, elapsedMs) {
-    const cycleMs = 800; // One full animation cycle
-    const progress = (elapsedMs % cycleMs) / cycleMs; // 0..1
-    // Fill from left to right
-    const totalDots = maxWidth * 6; // 6 dots per braille char
-    const filledDots = Math.floor(progress * totalDots);
-    let result = "";
-    for (let i = 0; i < maxWidth; i += 1) {
-        const cellStart = i * 6;
-        const dotsInCell = Math.max(0, Math.min(6, filledDots - cellStart));
-        result += dotsInCell === 0 ? BRAILLE_EMPTY : BRAILLE_LEVELS[dotsInCell];
+            return BRAILLE_SPINNER[frameIndex % BRAILLE_SPINNER.length] + " ";
     }
-    return result;
 }
-function memberPhaseLabel(phase) {
+function shortPhaseLabel(phase) {
     switch (phase) {
         case "pending":
         case "queued":
-            return QUEUED_LABEL;
+            return "wait";
         case "prompting":
-            return "Prompting...";
+            return "init";
         case "working":
-            return WORKING_LABEL;
+            return "work";
         case "completed":
-            return COMPLETED_LABEL;
+            return "done";
         case "failed":
-            return FAILED_LABEL;
+            return "fail";
         case "cancelled":
-            return ABORTED_LABEL;
+            return "abort";
         case "suspended":
-            return "Rate limited...";
+            return "retry";
     }
 }
-function buildSummary(state, width) {
-    const parts = [];
-    if (state.completed > 0)
-        parts.push(`completed: ${state.completed}`);
+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.push(`failed: ${state.failed}`);
+        parts.splice(1, 0, `${state.failed}fail`);
     if (state.active > 0)
-        parts.push(`active: ${state.active}`);
-    if (state.queued > 0)
-        parts.push(`queued: ${state.queued}`);
-    const full = parts.join(", ");
+        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 full.slice(0, width);
+    return truncateText(full, width);
+}
+function formatElapsed(ms) {
+    const totalSec = Math.floor(ms / 1000);
+    if (totalSec < 60)
+        return `${totalSec}s`;
+    const m = Math.floor(totalSec / 60);
+    const s = totalSec % 60;
+    return `${m}m${s}s`;
 }
 // ---------------------------------------------------------------------------
-// Text utilities (no external dependency — avoids import issues)
+// Text utilities
 // ---------------------------------------------------------------------------
 function visibleLen(text) {
-    // Simple implementation: count characters, stripping ANSI escapes
     return text.replace(/\x1b\[[0-9;]*m/g, "").length;
 }
 function truncateText(text, maxLen) {
     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);
+}
 //# sourceMappingURL=progress.js.map