@gjczone/pi-swarm 0.5.0 → 0.7.0

package/dist/tui/team-dashboard.js

@@ -1,657 +0,0 @@
-/**
- * tui/team-dashboard — SwarmTeam live phase progress dashboard.
- *
- * Renders a real-time dashboard above the input area when a SwarmTeam
- * run is in progress.  Shows phase statuses with compact braille spinner
- * for active phases, mailbox message count, token usage, and elapsed time.
- *
- * Features:
- * - Debounced, event-driven rendering (replaces pure setInterval polling)
- * - Keyboard interaction: j/k scroll, Enter detail, ? help, tab panel switch
- * - Panel switching: phases list / dependency viz / mailbox messages
- * - Phase detail overlay
- * - Mailbox message viewing with ack support
- * - Dependency chain visualization
- * - Phase-level ETA
- */
-import { matchesKey, Key, isKeyRepeat } from "@earendil-works/pi-tui";
-import { readInbox, resolveMailboxPaths, } from "../team/mailbox.js";
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-const FRAME_INTERVAL_MS = 80;
-const MAX_PHASES = 20;
-const MAX_VISIBLE_PHASES = 8;
-const VISIBLE_MAILBOX_MSGS = 8;
-const ICON_COL_WIDTH = 3;
-/** Debounce window for coalescing render requests. */
-const DEBOUNCE_MS = 75;
-/** Fallback polling interval when state is active (has running phases). */
-const ACTIVE_POLL_MS = 800;
-/** Idle polling interval. */
-const IDLE_POLL_MS = 2000;
-const BRAILLE_SPINNER = [
-    "\u28BF",
-    "\u28FB",
-    "\u28FD",
-    "\u28FE",
-    "\u28F7",
-    "\u28EF",
-    "\u28DF",
-    "\u287F",
-];
-// ---------------------------------------------------------------------------
-// Snapshot conversion
-// ---------------------------------------------------------------------------
-export function snapshotToDashboardState(snapshot, mailboxPath) {
-    const now = Date.now();
-    const runningPhases = snapshot.phases
-        .filter((p) => p.status === "running")
-        .map((p) => p.name);
-    const runningRoles = snapshot.phases
-        .filter((p) => p.status === "running")
-        .map((p) => p.role);
-    return {
-        title: snapshot.title,
-        goal: snapshot.goal,
-        status: snapshot.status,
-        totalPhases: snapshot.totalPhases,
-        completedPhases: snapshot.completedPhases,
-        failedPhases: snapshot.failedPhases,
-        currentPhase: runningPhases.length > 0
-            ? runningPhases.join(", ")
-            : snapshot.currentPhase,
-        currentRoles: runningRoles.length > 0
-            ? runningRoles
-            : snapshot.currentRole
-                ? [snapshot.currentRole]
-                : undefined,
-        phases: snapshot.phases.map((p) => ({
-            name: p.name,
-            role: p.role,
-            status: p.status,
-            error: p.error,
-            phaseStartedAt: p.status === "running" ? now : 0,
-        })),
-        mailboxCount: snapshot.mailboxCount,
-        totalUsage: snapshot.totalUsage,
-        startedAt: snapshot.startedAt,
-        dependencyEdges: snapshot.dependencyEdges,
-        mailboxPath,
-    };
-}
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-export class TeamDashboardComponent {
-    state_ = null;
-    renderedWidth;
-    cachedLines;
-    onRequestRender;
-    // Render scheduler
-    animationFrame;
-    frameIndex = 0;
-    pollTimer;
-    debounceTimer;
-    pendingInvalidate = false;
-    hasActivePhases = false;
-    // Input / UI state
-    scrollOffset = 0;
-    selectedIndex = -1;
-    activePanel = "phases";
-    overlay = null;
-    constructor(onRequestRender) {
-        this.onRequestRender = onRequestRender;
-        this.startPolling();
-        this.startAnimation();
-    }
-    // -------------------------------------------------------------------
-    // Public API
-    // -------------------------------------------------------------------
-    update(state) {
-        this.state_ = state;
-        this.hasActivePhases =
-            state.phases.some((p) => p.status === "running") &&
-                state.status === "running";
-        if (this.scrollOffset > Math.max(0, state.phases.length - MAX_VISIBLE_PHASES)) {
-            this.scrollOffset = Math.max(0, state.phases.length - MAX_VISIBLE_PHASES);
-        }
-        this.requestRender();
-    }
-    complete() {
-        if (this.state_) {
-            this.state_.phases.forEach((p) => {
-                if (p.status === "queued" || p.status === "running") {
-                    p.status = "completed";
-                }
-            });
-            this.state_.status = "completed";
-            this.state_.completedPhases =
-                this.state_.totalPhases - this.state_.failedPhases;
-            this.state_.currentPhase = undefined;
-            this.state_.currentRoles = undefined;
-        }
-        this.hasActivePhases = false;
-        this.requestRender();
-    }
-    dispose() {
-        this.stopTimers();
-        this.onRequestRender = undefined;
-    }
-    invalidate() {
-        this.renderedWidth = undefined;
-        this.cachedLines = undefined;
-    }
-    // -------------------------------------------------------------------
-    // Keyboard input
-    // -------------------------------------------------------------------
-    handleInput(data) {
-        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;
-            }
-            if (this.overlay.kind === "mailbox_detail") {
-                // Acknowledge message
-                if (matchesKey(data, "a")) {
-                    if (this.state_?.mailboxPath) {
-                        try {
-                            const paths = resolveMailboxPaths(this.state_.mailboxPath.replace(/\/mailbox$/, ""), "");
-                            // Actually we need the runId from the path... this is complex.
-                            // For now just close the overlay
-                        }
-                        catch {
-                            // Best effort
-                        }
-                    }
-                }
-            }
-            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(MAX_VISIBLE_PHASES);
-            return;
-        }
-        if (matchesKey(data, Key.pageUp)) {
-            this.scrollUp(MAX_VISIBLE_PHASES);
-            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_.phases.length - MAX_VISIBLE_PHASES);
-                this.scrollOffset = maxScroll;
-                this.selectedIndex = Math.max(0, this.state_.phases.length - 1);
-            }
-            this.requestRender();
-            return;
-        }
-        // Panel switching
-        if (matchesKey(data, Key.tab) || matchesKey(data, "1")) {
-            this.activePanel = "phases";
-            this.scrollOffset = 0;
-            this.selectedIndex = -1;
-            this.requestRender();
-            return;
-        }
-        if (matchesKey(data, "2")) {
-            this.activePanel = "deps";
-            this.scrollOffset = 0;
-            this.requestRender();
-            return;
-        }
-        if (matchesKey(data, "3") && this.state_ && this.state_.mailboxCount > 0) {
-            this.activePanel = "mailbox";
-            this.scrollOffset = 0;
-            this.requestRender();
-            return;
-        }
-        // Detail overlay
-        if (matchesKey(data, Key.enter) || matchesKey(data, Key.return)) {
-            if (this.activePanel === "phases" && this.state_) {
-                const idx = this.selectedIndex >= 0 ? this.selectedIndex : this.scrollOffset;
-                if (idx >= 0 && idx < this.state_.phases.length) {
-                    this.overlay = {
-                        kind: "detail",
-                        phaseName: this.state_.phases[idx].name,
-                    };
-                    this.requestRender();
-                }
-            }
-            return;
-        }
-        // Help overlay
-        if (matchesKey(data, "?")) {
-            this.overlay = { kind: "help" };
-            this.requestRender();
-            return;
-        }
-    }
-    // -------------------------------------------------------------------
-    // Rendering
-    // -------------------------------------------------------------------
-    render(width) {
-        const safeWidth = Math.max(20, width);
-        if (this.cachedLines && this.renderedWidth === safeWidth) {
-            return this.cachedLines;
-        }
-        if (!this.state_ || this.state_.phases.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;
-        }
-        const state = this.state_;
-        const lines = [];
-        const contentWidth = safeWidth - 4;
-        // Header with panel indicator
-        const header = truncateText(state.title, contentWidth - 20);
-        const panelLabel = this.activePanel === "phases"
-            ? "[1]phases"
-            : this.activePanel === "deps"
-                ? "[2]deps"
-                : "[3]mailbox";
-        lines.push(`  ${header}  ${panelLabel}`);
-        // Overall progress bar
-        const barWidth = Math.max(1, contentWidth);
-        const total = state.totalPhases || 1;
-        const doneRatio = (state.completedPhases + state.failedPhases) / 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 === "phases") {
-            this.renderPhasesPanel(lines, state, contentWidth);
-        }
-        else if (this.activePanel === "deps") {
-            this.renderDepsPanel(lines, state, contentWidth);
-        }
-        else {
-            this.renderMailboxPanel(lines, state, contentWidth);
-        }
-        // Separator
-        const sep = "\u2500".repeat(contentWidth);
-        lines.push(`  ${sep}`);
-        // Footer with all info
-        const footerLine = buildFooter(state, contentWidth);
-        lines.push(`  ${footerLine}`);
-        // Bottom border
-        const bottom = `\u2514${"\u2500".repeat(contentWidth)}\u2518`;
-        lines.push(bottom);
-        this.cachedLines = lines;
-        this.renderedWidth = safeWidth;
-        return this.cachedLines;
-    }
-    // -------------------------------------------------------------------
-    // Panel rendering
-    // -------------------------------------------------------------------
-    renderPhasesPanel(lines, state, contentWidth) {
-        const maxPhases = Math.min(state.phases.length, this.scrollOffset + MAX_VISIBLE_PHASES);
-        const hasMore = state.phases.length > MAX_VISIBLE_PHASES;
-        if (hasMore && this.scrollOffset > 0) {
-            lines.push(`  \u2191 ${this.scrollOffset} more above`);
-        }
-        for (let i = this.scrollOffset; i < maxPhases; i += 1) {
-            const phase = state.phases[i];
-            if (!phase)
-                continue;
-            const isSelected = i === this.selectedIndex ||
-                (this.selectedIndex < 0 && i === this.scrollOffset);
-            const row = renderPhaseRow(phase, contentWidth, this.frameIndex, isSelected);
-            lines.push(`  ${row}`);
-        }
-        if (hasMore && maxPhases < state.phases.length) {
-            const remaining = state.phases.length - maxPhases;
-            lines.push(`  \u2193 ${remaining} more below`);
-        }
-    }
-    renderDepsPanel(lines, state, contentWidth) {
-        const edges = state.dependencyEdges ?? [];
-        if (edges.length === 0) {
-            // Build dependency edges from phase names (default sequence)
-            const names = state.phases.map((p) => p.name);
-            if (names.length <= 1) {
-                lines.push(`  ${padRight("(no dependencies)", contentWidth)}`);
-                return;
-            }
-            // Show as sequential flow
-            let depLine = "";
-            for (let i = 0; i < names.length; i += 1) {
-                if (i > 0)
-                    depLine += " \u2192 ";
-                depLine += names[i];
-                if (depLine.length > contentWidth - 10) {
-                    lines.push(`  ${depLine}`);
-                    depLine = `  ${" ".repeat(2)}`;
-                }
-            }
-            if (depLine) {
-                lines.push(`  ${depLine}`);
-            }
-        }
-        else {
-            // Show explicit dependency edges
-            for (const edge of edges) {
-                const depLine = `${edge.from} \u2192 ${edge.to}`;
-                lines.push(`  ${truncateText(depLine, contentWidth)}`);
-            }
-        }
-        // Show current phase context
-        if (state.currentPhase) {
-            lines.push("");
-            lines.push(`  \u25B6 Current: ${truncateText(state.currentPhase, contentWidth - 12)}`);
-        }
-    }
-    renderMailboxPanel(lines, state, contentWidth) {
-        if (state.mailboxCount === 0) {
-            lines.push(`  ${padRight("(no messages)", contentWidth)}`);
-            return;
-        }
-        // Try to read actual messages
-        let messages = [];
-        if (state.mailboxPath) {
-            try {
-                const paths = resolveMailboxPaths(state.mailboxPath.replace(/\/mailbox$/, ""), "");
-                const raw = readInbox(paths);
-                messages = raw.slice(-VISIBLE_MAILBOX_MSGS).map((m) => ({
-                    from: m.from,
-                    type: m.type,
-                    preview: typeof m.payload.content === "string"
-                        ? m.payload.content.slice(0, 40)
-                        : JSON.stringify(m.payload).slice(0, 40),
-                }));
-            }
-            catch {
-                // If we can't read messages, just show count
-            }
-        }
-        if (messages.length === 0) {
-            lines.push(`  ${padRight(`${state.mailboxCount} message(s) in outbox`, contentWidth)}`);
-            return;
-        }
-        for (const msg of messages) {
-            const prefix = msg.type === "task_assignment"
-                ? "\u2190"
-                : msg.type === "task_result"
-                    ? "\u2713"
-                    : msg.type === "handoff"
-                        ? "\u2194"
-                        : "\u25CB";
-            const line = `${prefix} ${msg.from}: ${truncateText(msg.preview, contentWidth - 8)}`;
-            lines.push(`  ${line}`);
-        }
-    }
-    // -------------------------------------------------------------------
-    // Overlays
-    // -------------------------------------------------------------------
-    renderOverlay(width) {
-        if (!this.overlay)
-            return [];
-        if (this.overlay.kind === "help") {
-            return this.renderHelpOverlay(width);
-        }
-        if (this.overlay.kind === "detail" && this.overlay.phaseName) {
-            return this.renderPhaseDetailOverlay(width, this.overlay.phaseName);
-        }
-        return [];
-    }
-    renderHelpOverlay(width) {
-        const safeWidth = Math.max(30, width);
-        const contentWidth = safeWidth - 6;
-        const lines = [];
-        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 phase list"],
-            ["g / Shift+G", "Go to top / bottom"],
-            ["Enter", "View phase detail"],
-            ["1 or Tab", "Phases panel"],
-            ["2", "Dependencies panel"],
-            ["3", "Mailbox messages"],
-            ["?", "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(`  \u2514${"\u2500".repeat(safeWidth - 2)}\u2518`);
-        return lines;
-    }
-    renderPhaseDetailOverlay(width, phaseName) {
-        if (!this.state_)
-            return [];
-        const phase = this.state_.phases.find((p) => p.name === phaseName);
-        if (!phase)
-            return [];
-        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(`Phase: ${phase.name} (${phase.role})`, safeWidth - 4)}\u2502`);
-        lines.push(`  \u2502  ${padRight("", safeWidth - 4)}\u2502`);
-        const fields = [
-            { label: "Status", value: phase.status },
-        ];
-        if (phase.error) {
-            fields.push({ label: "Error", value: phase.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 phaseCount = this.state_.phases.length;
-        const maxOffset = Math.max(0, phaseCount - 1);
-        this.selectedIndex = Math.min(maxOffset, Math.max(0, this.selectedIndex < 0 ? this.scrollOffset : this.selectedIndex) + n);
-        if (this.selectedIndex - this.scrollOffset >= MAX_VISIBLE_PHASES ||
-            this.selectedIndex < this.scrollOffset) {
-            this.scrollOffset = Math.max(0, this.selectedIndex - MAX_VISIBLE_PHASES + 1);
-            const maxScroll = Math.max(0, phaseCount - MAX_VISIBLE_PHASES);
-            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
-    // -------------------------------------------------------------------
-    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);
-        this.onRequestRender?.();
-    }
-    startPolling() {
-        this.schedulePoll();
-    }
-    schedulePoll() {
-        const interval = this.hasActivePhases ? ACTIVE_POLL_MS : IDLE_POLL_MS;
-        this.pollTimer = setTimeout(() => {
-            this.pollTimer = undefined;
-            if (this.state_) {
-                this.invalidate();
-                this.onRequestRender?.();
-            }
-            this.schedulePoll();
-        }, interval);
-    }
-    updatePollingInterval() {
-        // Will be picked up on next poll cycle
-    }
-    startAnimation() {
-        this.animationFrame = setInterval(() => {
-            this.frameIndex = (this.frameIndex + 1) % BRAILLE_SPINNER.length;
-            if (this.hasActivePhases || 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 renderPhaseRow(phase, width, frameIndex, selected) {
-    const prefix = selected ? ">" : " ";
-    const icon = phaseStatusIcon(phase, frameIndex).padEnd(ICON_COL_WIDTH, " ");
-    const displayName = shortenPhaseName(phase.name, phase.role);
-    const nameWidth = Math.max(6, Math.min(16, Math.floor(width * 0.35)));
-    const name = truncateText(displayName, nameWidth).padEnd(nameWidth, " ");
-    const fixed = `${prefix}${icon} ${name}`;
-    const remaining = Math.max(0, width - visibleLen(fixed) - 1);
-    if (phase.status === "running") {
-        const roleLabel = `${phase.role}`;
-        return `${fixed} ${truncateText(roleLabel, remaining)}`;
-    }
-    if (phase.status === "failed" && phase.error) {
-        const errorPart = phase.error;
-        return `${fixed} ${truncateText(errorPart, remaining)}`;
-    }
-    if (phase.status === "completed") {
-        return `${fixed} ok`;
-    }
-    if (phase.status === "skipped") {
-        return `${fixed} skip`;
-    }
-    return `${fixed} ...`;
-}
-function shortenPhaseName(name, role) {
-    if (name.length <= 12)
-        return name;
-    if (name.startsWith(role))
-        return name.slice(0, Math.max(role.length, 12));
-    const parts = name.split("-");
-    if (parts.length > 1) {
-        return parts.slice(0, 2).join("-");
-    }
-    return name.slice(0, 12);
-}
-function phaseStatusIcon(phase, frameIndex) {
-    switch (phase.status) {
-        case "completed":
-            return "\u2713";
-        case "running":
-            return BRAILLE_SPINNER[frameIndex % BRAILLE_SPINNER.length];
-        case "failed":
-            return "\u2717";
-        case "skipped":
-            return "\u2298";
-        case "queued":
-            return "\u25CB";
-    }
-}
-function buildFooter(state, width) {
-    const usage = state.totalUsage ?? {
-        input: 0,
-        output: 0,
-        cacheRead: 0,
-        cacheWrite: 0,
-        totalTokens: 0,
-    };
-    const phaseCount = `${state.completedPhases + state.failedPhases}/${state.totalPhases}`;
-    const tokens = `${Math.round(usage.input)}in/${Math.round(usage.output)}out`;
-    const mailbox = state.mailboxCount > 0 ? ` ${state.mailboxCount}msg` : "";
-    const elapsed = formatElapsed(Date.now() - state.startedAt);
-    const parts = [`${phaseCount} ph`, tokens, mailbox.trim(), elapsed].filter(Boolean);
-    const full = parts.join(" | ");
-    if (full.length <= width)
-        return full;
-    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
-// ---------------------------------------------------------------------------
-function visibleLen(text) {
-    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, maxLen - 1) + "\u2026";
-}
-function padRight(text, width) {
-    if (text.length >= width)
-        return text.slice(0, width);
-    return text + " ".repeat(width - text.length);
-}
-//# sourceMappingURL=team-dashboard.js.map