@entelligentsia/forgecli 1.0.10 → 1.0.20

package/dist/extensions/forgecli/dashboard/component.js

@@ -0,0 +1,861 @@
+// dashboard/component.ts — Two-panel orchestrator tree dashboard.
+//
+// Renders as a pi-tui overlay (ctx.ui.custom) with:
+//   Left panel:  tree browser with depth-based indentation, status glyphs,
+//                progress labels, and cursor highlighting.
+//   Right panel: detail view of the selected node — status, model, metrics,
+//                prompt preview, tail-buffer activity, outcome, and children.
+//
+// Keyboard:
+//   ↑/↓     move cursor in tree
+//   →       expand orchestrator / focus leaf detail
+//   ←       collapse orchestrator / back to tree
+//   Enter   toggle expand on orchestrator; focus detail on leaf
+//   Esc     close overlay
+//   x       request cancellation (with y/n confirm)
+//   p       (reserved for pause)
+//
+// Architecture (post-MVC-refactor, dashboard-mvc-audit.md V1–V7):
+//   DashboardController owns the TreeViewModel, subscribes to model events,
+//   manages the refresh timer, and handles input. DashboardComponent reads
+//   only from the controller — never directly from the OrchestratorTree model.
+//   This eliminates the boundary violations catalogued in the audit.
+//
+// Iron Laws conformance:
+//   IL1 — All visible strings route through dashboard/theme.ts helpers or
+//          theme.fg()/bg()/bold(). No raw glyphs.
+//   IL2 — Dual-layer width safety: screen renderers call truncateLines(),
+//          orchestrator applies truncateToWidth per line.
+//   IL3 — DashboardComponent implements Focusable (focused: boolean = false).
+//   IL7 — Timer unmount-safety: disposed flag guards interval callbacks.
+import { matchesKey, Key, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { getSessionRegistry } from "../session-registry.js";
+import { buildViewModel } from "./view-model.js";
+import { fmtTokenMeter } from "../viewport-renderer.js";
+import { paintTailLine } from "../viewport-theme.js";
+import { cursor, nodeGlyph, statusLabel, dim, accentBold, warn, bold, border, collapseIndicator, promptExpandIcon, truncateLines, } from "./theme.js";
+// ── Word-wrap helper ───────────────────────────────────────────────────────────
+//
+// Splits a line (which may contain ANSI escape sequences) into multiple
+// lines at word boundaries so it fits within `maxWidth` visible columns.
+// Preserves ANSI styling across wrapped lines. Falls back to character-level
+// truncation for individual tokens wider than maxWidth.
+function wrapLine(line, maxWidth) {
+    if (maxWidth <= 0)
+        return [line];
+    const visW = visibleWidth(line);
+    if (visW <= maxWidth)
+        return [line];
+    const segments = [];
+    const ANSI_RE = /(\x1b\[[0-9;]*m|\x1b\].*?(?:\x07|\x1b\\)|\x1b\[[^m]*m)/g;
+    let currentPrefix = "";
+    let lastIdx = 0;
+    let m;
+    while ((m = ANSI_RE.exec(line)) !== null) {
+        if (m.index > lastIdx) {
+            segments.push({ prefix: currentPrefix, text: line.slice(lastIdx, m.index) });
+        }
+        currentPrefix += m[0];
+        lastIdx = m.index + m[0].length;
+    }
+    if (lastIdx < line.length) {
+        segments.push({ prefix: currentPrefix, text: line.slice(lastIdx) });
+    }
+    if (segments.length === 0) {
+        return [truncateToWidth(line, maxWidth)];
+    }
+    const tokens = [];
+    for (const seg of segments) {
+        const words = seg.text.split(/\s+/);
+        for (const w of words) {
+            if (w.length === 0)
+                continue;
+            tokens.push({ prefix: seg.prefix, text: w, visLen: visibleWidth(w) });
+        }
+    }
+    // Greedy line-fill: accumulate tokens with single-space gaps until the
+    // next token would exceed maxWidth, then start a new line.
+    const lines = [];
+    let curLine = "";
+    let curLen = 0;
+    for (const tok of tokens) {
+        const gapLen = curLen > 0 ? 1 : 0; // one space between tokens
+        const addedLen = tok.visLen + gapLen;
+        if (curLen > 0 && curLen + addedLen > maxWidth) {
+            // Emit current line and start fresh
+            if (curLine.length > 0)
+                lines.push(curLine);
+            curLine = "";
+            curLen = 0;
+        }
+        if (curLen === 0) {
+            curLine = tok.prefix + tok.text;
+            curLen = tok.visLen;
+        }
+        else {
+            curLine += " " + tok.text;
+            curLen += 1 + tok.visLen;
+        }
+        // If a single token is wider than maxWidth, hard-break via truncation.
+        if (curLen > maxWidth) {
+            const truncated = truncateToWidth(curLine, maxWidth);
+            lines.push(truncated);
+            curLine = "";
+            curLen = 0;
+        }
+    }
+    if (curLen > 0) {
+        lines.push(curLine);
+    }
+    return lines.length > 0 ? lines : [line];
+}
+// ── Refresh timer ───────────────────────────────────────────────────────────
+const REFRESH_INTERVAL_MS = 1000;
+// ── Controller ──────────────────────────────────────────────────────────────
+export class DashboardController {
+    tree;
+    vm;
+    state;
+    onInvalidate;
+    refreshTimer;
+    disposed = false; // IL7: guards interval callbacks after dispose
+    _handlers;
+    constructor(tree, initialCursorId) {
+        this.tree = tree;
+        this.vm = buildViewModel(tree);
+        // Default cursor to the first active root, or empty string if tree is empty.
+        const firstVisible = this.vm.roots.length > 0 ? this.vm.roots[0] : "";
+        this.state = {
+            cursorId: initialCursorId ?? firstVisible,
+            expanded: new Set(),
+            focusPanel: "tree",
+            promptExpanded: false,
+            cancelTargetId: null,
+            detailScroll: 0,
+        };
+        this._handlers = [];
+        // V2 fix: subscriptions now owned by controller, not view.
+        // On every model event, rebuild VM then invalidate the view.
+        const onModelChange = () => {
+            this.rebuildViewModel();
+            if (!this.disposed)
+                this.onInvalidate?.();
+        };
+        const onTreeChange = (id) => {
+            this.rebuildViewModel();
+            this.autoExpandNewNode(id);
+            if (!this.disposed)
+                this.onInvalidate?.();
+        };
+        this.tree.on("change", onModelChange);
+        this.tree.on("tail", onModelChange);
+        this.tree.on("preview", onModelChange);
+        this.tree.on("tree", onTreeChange);
+        this._handlers = [
+            { event: "change", handler: onModelChange },
+            { event: "tail", handler: onModelChange },
+            { event: "preview", handler: onModelChange },
+            { event: "tree", handler: onTreeChange },
+        ];
+        // V3 fix: timer now owned by controller, not view.
+        this.ensureRefreshTimer();
+    }
+    setOnInvalidate(cb) {
+        this.onInvalidate = cb;
+    }
+    // ── ViewModel projection ────────────────────────────────────────────────
+    /** Rebuild the ViewModel from the live model. Called on every model event. */
+    rebuildViewModel() {
+        this.vm = buildViewModel(this.tree);
+    }
+    /** Get a node from the current ViewModel. */
+    getNode(id) {
+        return this.vm.nodes.get(id);
+    }
+    /** Get a node's children from the current ViewModel. */
+    getChildren(id) {
+        const node = this.vm.nodes.get(id);
+        if (!node)
+            return [];
+        return node.children
+            .map((cid) => this.vm.nodes.get(cid))
+            .filter((n) => n !== undefined);
+    }
+    /** Get the progress (completed/total leaves) for a subtree. */
+    getSubtreeProgress(id) {
+        let completed = 0;
+        let total = 0;
+        const stack = [id];
+        while (stack.length > 0) {
+            const current = stack.pop();
+            const node = this.vm.nodes.get(current);
+            if (!node)
+                continue;
+            if (node.kind === "leaf") {
+                total++;
+                if (node.status === "completed")
+                    completed++;
+            }
+            stack.push(...node.children);
+        }
+        return { completed, total };
+    }
+    /** Aggregate token usage across all active roots. */
+    getAggregateUsage() {
+        const agg = { input: 0, output: 0, cacheRead: 0 };
+        for (const rootId of this.vm.roots) {
+            const stack = [rootId];
+            while (stack.length > 0) {
+                const current = stack.pop();
+                const node = this.vm.nodes.get(current);
+                if (!node)
+                    continue;
+                agg.input += node.usage.input;
+                agg.output += node.usage.output;
+                agg.cacheRead += node.usage.cacheRead;
+                stack.push(...node.children);
+            }
+        }
+        return agg;
+    }
+    /** Aggregate compression across all active roots. */
+    getAggregateCompression() {
+        const agg = { calls: 0, tokensSaved: 0 };
+        for (const rootId of this.vm.roots) {
+            const stack = [rootId];
+            while (stack.length > 0) {
+                const current = stack.pop();
+                const node = this.vm.nodes.get(current);
+                if (!node)
+                    continue;
+                if (node.compression) {
+                    agg.calls += node.compression.calls;
+                    agg.tokensSaved += node.compression.tokensSaved;
+                }
+                stack.push(...node.children);
+            }
+        }
+        return agg;
+    }
+    /** Model/provider from the first running root, if any. */
+    getActiveModel() {
+        for (const rootId of this.vm.roots) {
+            const node = this.vm.nodes.get(rootId);
+            if (node && node.model) {
+                return { provider: node.provider, model: node.model };
+            }
+        }
+        return undefined;
+    }
+    /** Check whether any active root is running or cancelling. */
+    hasRunningNodes() {
+        for (const rootId of this.vm.roots) {
+            const node = this.vm.nodes.get(rootId);
+            if (node && (node.status === "running" || node.status === "cancelling")) {
+                return true;
+            }
+        }
+        return false;
+    }
+    // ── Visible node list (DFS respecting expand state) ────────────────────
+    getVisibleNodes() {
+        const result = [];
+        const visit = (id) => {
+            const node = this.vm.nodes.get(id);
+            if (!node)
+                return;
+            result.push(id);
+            if (node.kind === "orchestrator" && this.state.expanded.has(id)) {
+                for (const childId of node.children) {
+                    visit(childId);
+                }
+            }
+        };
+        for (const rootId of this.vm.roots) {
+            visit(rootId);
+        }
+        return result;
+    }
+    // ── Input handling ──────────────────────────────────────────────────────
+    handleInput(data) {
+        // Cancel confirmation mode takes priority.
+        if (this.state.cancelTargetId) {
+            this.handleCancelConfirm(data);
+            if (!this.disposed)
+                this.onInvalidate?.();
+            return;
+        }
+        switch (this.state.focusPanel) {
+            case "tree":
+                this.handleTreeInput(data);
+                break;
+            case "detail":
+                this.handleDetailInput(data);
+                break;
+        }
+        if (!this.disposed)
+            this.onInvalidate?.();
+    }
+    handleTreeInput(data) {
+        if (matchesKey(data, Key.up)) {
+            this.moveCursor(-1);
+        }
+        else if (matchesKey(data, Key.down)) {
+            this.moveCursor(1);
+        }
+        else if (matchesKey(data, Key.enter) || matchesKey(data, Key.right)) {
+            this.activateCursor();
+        }
+        else if (matchesKey(data, Key.left)) {
+            this.collapseCursor();
+        }
+        else if (data === "x") {
+            this.startCancel();
+        }
+        // ESC in tree panel is handled in handleInput above — it closes
+        // the overlay rather than navigating or setting a sentinel.
+    }
+    handleDetailInput(data) {
+        // ESC in detail panel is handled in handleInput above — it closes
+        // the overlay rather than just switching panels.
+        if (matchesKey(data, Key.left)) {
+            this.state.focusPanel = "tree";
+            this.state.detailScroll = 0;
+        }
+        else if (matchesKey(data, Key.down) || data === "j" || data === "J") {
+            this.state.detailScroll++;
+        }
+        else if (matchesKey(data, Key.up) || data === "k" || data === "K") {
+            this.state.detailScroll = Math.max(0, this.state.detailScroll - 1);
+        }
+        else if (matchesKey(data, Key.enter)) {
+            this.state.promptExpanded = !this.state.promptExpanded;
+        }
+        else if (data === "x") {
+            this.startCancel();
+        }
+    }
+    handleCancelConfirm(data) {
+        if (data === "y" || matchesKey(data, Key.enter)) {
+            if (this.state.cancelTargetId) {
+                this.cancelNodeAndSessions(this.state.cancelTargetId);
+            }
+            this.state.cancelTargetId = null;
+        }
+        else if (data === "n") {
+            this.state.cancelTargetId = null;
+        }
+        // All other keys consumed silently in cancel mode. ESC is handled
+        // by the view's handleInput (closes the overlay entirely).
+    }
+    /** Cancel the node in the OrchestratorTree for immediate visual
+     *  feedback, and propagate cancellation through SessionRegistry
+     *  for actual pipeline abort. Reads from VM; writes to model. */
+    cancelNodeAndSessions(nodeId) {
+        // Mutation: mark node as "cancelling" in the model for immediate
+        // visual feedback. The model emits "change", which triggers a VM
+        // rebuild via the controller's subscription.
+        this.tree.requestCancel(nodeId);
+        const registry = getSessionRegistry();
+        // Walk up the tree to find the session (task-level) node in the registry.
+        // Reads from the VM (pre-rebuild stale state is fine — parentId doesn't
+        // change on cancel, and we re-read from VM).
+        let currentId = nodeId;
+        while (currentId) {
+            const session = registry.getSession(currentId);
+            if (session && (session.status === "running" || session.status === "cancelling")) {
+                registry.requestCancel(currentId);
+                return;
+            }
+            const node = this.vm.nodes.get(currentId);
+            currentId = node?.parentId ?? null;
+        }
+        // No session found for this node or ancestors. If this is a
+        // sprint-level orchestrator, cancel all running child sessions.
+        const node = this.vm.nodes.get(nodeId);
+        if (node?.kind === "orchestrator") {
+            for (const childId of node.children) {
+                const session = registry.getSession(childId);
+                if (session && (session.status === "running" || session.status === "cancelling")) {
+                    registry.requestCancel(childId);
+                }
+            }
+        }
+    }
+    moveCursor(delta) {
+        const visible = this.getVisibleNodes();
+        if (visible.length === 0)
+            return;
+        const idx = visible.indexOf(this.state.cursorId);
+        const next = Math.max(0, Math.min(visible.length - 1, idx + delta));
+        this.state.cursorId = visible[next];
+        // Auto-expand ancestors so the cursor is always visible.
+        this.ensureAncestorsExpanded(this.state.cursorId);
+    }
+    activateCursor() {
+        const node = this.vm.nodes.get(this.state.cursorId);
+        if (!node)
+            return;
+        if (node.kind === "orchestrator") {
+            this.toggleExpand(node.id);
+        }
+        else {
+            this.state.focusPanel = "detail";
+            this.state.detailScroll = 0;
+        }
+    }
+    toggleExpand(id) {
+        if (this.state.expanded.has(id)) {
+            this.state.expanded.delete(id);
+        }
+        else {
+            this.state.expanded.add(id);
+        }
+    }
+    collapseCursor() {
+        const node = this.vm.nodes.get(this.state.cursorId);
+        if (!node)
+            return;
+        if (node.kind === "orchestrator" && this.state.expanded.has(node.id)) {
+            this.state.expanded.delete(node.id);
+        }
+        else if (node.parentId) {
+            // Move cursor to parent.
+            this.state.cursorId = node.parentId;
+        }
+    }
+    startCancel() {
+        const node = this.vm.nodes.get(this.state.cursorId);
+        if (!node)
+            return;
+        // Can cancel any node under a running subtree — find the nearest
+        // cancellable ancestor (running or cancelling).
+        let target = null;
+        let current = node;
+        while (current) {
+            if (current.status === "running" || current.status === "cancelling") {
+                target = current;
+                break;
+            }
+            current = current.parentId ? this.vm.nodes.get(current.parentId) : undefined;
+        }
+        if (target) {
+            this.state.cancelTargetId = target.id;
+        }
+    }
+    ensureAncestorsExpanded(id) {
+        let currentId = id;
+        while (currentId) {
+            const node = this.vm.nodes.get(currentId);
+            if (!node)
+                break;
+            if (node.kind === "orchestrator") {
+                this.state.expanded.add(currentId);
+            }
+            currentId = node.parentId;
+        }
+    }
+    // ── Auto-expand: only expand the root and the direct parent of a new
+    // leaf node (phase). Intermediate orchestrator nodes (tasks) are NOT
+    // auto-expanded — the user expands them manually. This prevents the tree
+    // from exploding into a fully-expanded state on every new node.
+    autoExpandNewNode(id) {
+        const node = this.vm.nodes.get(id);
+        if (!node)
+            return;
+        // Auto-expand the root level only: if this node IS a root (no parent),
+        // expand it so it's visible. If this node is a leaf (phase), expand
+        // only its direct parent (the task). Intermediate orchestrators
+        // (tasks under a sprint) are NOT auto-expanded.
+        if (node.kind === "leaf" && node.parentId) {
+            // Leaf node (phase): expand its parent so the phase is visible,
+            // but only if the parent is already visible (i.e., the user
+            // has expanded the root).
+            const parent = this.vm.nodes.get(node.parentId);
+            if (parent && this.state.expanded.has(node.parentId) && parent.kind === "orchestrator") {
+                // Parent is visible and is an orchestrator — leaf will show.
+                // No need to expand further.
+            }
+            // Also ensure ancestors of the leaf are expanded so it's visible.
+            this.ensureAncestorsExpanded(node.id);
+        }
+        else if (!node.parentId) {
+            // Root node (sprint-level orchestrator): always expand.
+            this.state.expanded.add(id);
+        }
+        // Default cursor to the newest running node if no cursor set.
+        if (!this.state.cursorId || this.state.cursorId === "") {
+            this.state.cursorId = id;
+        }
+    }
+    // ── Refresh timer (V3 fix: owned by controller, not view) ──────────────
+    ensureRefreshTimer() {
+        if (this.refreshTimer)
+            return;
+        this.refreshTimer = setInterval(() => {
+            // IL7: guard against firing after dispose.
+            if (this.disposed) {
+                this.stopRefreshTimer();
+                return;
+            }
+            if (!this.hasRunningNodes()) {
+                // One last render to settle final frame, then stop timer.
+                this.onInvalidate?.();
+                this.stopRefreshTimer();
+                return;
+            }
+            this.onInvalidate?.();
+        }, REFRESH_INTERVAL_MS);
+    }
+    stopRefreshTimer() {
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer);
+            this.refreshTimer = undefined;
+        }
+    }
+    // ── Cleanup ────────────────────────────────────────────────────────────
+    dispose() {
+        this.disposed = true; // IL7: set before clearing timer so callback sees it
+        this.stopRefreshTimer();
+        for (const { event, handler } of this._handlers) {
+            this.tree.off(event, handler);
+        }
+        this._handlers = [];
+    }
+    getState() {
+        return this.state;
+    }
+}
+// ── View ────────────────────────────────────────────────────────────────────
+export class DashboardComponent {
+    /** IL3: Focusable — pi sets this to true when the overlay has
+     *  keyboard focus. Without this, arrow-key and Escape events are
+     *  swallowed at the overlay layer. (Lesson from config-TUI commit 07e886f.) */
+    focused = false;
+    controller;
+    theme;
+    tui;
+    done;
+    constructor(controller, tui, theme, done) {
+        this.controller = controller;
+        this.tui = tui;
+        this.theme = theme;
+        this.done = done;
+        // V2 fix: subscriptions are now owned by the controller.
+        // The view only registers an invalidation callback for re-rendering.
+        this.controller.setOnInvalidate(() => this.tui.requestRender());
+    }
+    // ── Component interface ──────────────────────────────────────────────────
+    render(width) {
+        // Layout: left panel ~20% (min 22), right panel fills rest, borders.
+        const leftWidth = Math.max(22, Math.floor(width * 0.20));
+        const separatorWidth = 1;
+        const rightWidth = Math.max(20, width - leftWidth - separatorWidth - 3);
+        const contentWidth = width - 2; // minus left and right border chars
+        const visible = this.controller.getVisibleNodes();
+        const state = this.controller.getState();
+        const selectedNode = this.controller.getNode(state.cursorId);
+        // ── Left panel: tree browser ───────────────────────────────────
+        const leftLines = this.renderTreePanel(visible, state, leftWidth);
+        // ── Right panel: detail ─────────────────────────────────────────
+        const rightLines = selectedNode
+            ? this.renderDetailPanel(selectedNode, rightWidth)
+            : [dim("Select a node in the tree", this.theme)];
+        // ── Compose ─────────────────────────────────────────────────────
+        const termHeight = this.tui.terminal.rows;
+        // Deduct 3 lines for top border, bottom border, and hints footer
+        const contentHeight = Math.max(8, termHeight - 3);
+        // Compute detail panel scroll with auto-scrolling fallback for tree focus
+        let activeScroll = state.detailScroll;
+        if (state.focusPanel === "tree") {
+            // Auto-scroll to the bottom so live dispatches are visible immediately
+            activeScroll = Math.max(0, rightLines.length - contentHeight);
+        }
+        else {
+            // Clamp user manual scroll within valid bounds
+            const maxScroll = Math.max(0, rightLines.length - contentHeight);
+            if (activeScroll > maxScroll) {
+                activeScroll = maxScroll;
+                state.detailScroll = maxScroll; // sync controller state
+            }
+        }
+        const paddedLeftLines = [];
+        for (let i = 0; i < contentHeight; i++) {
+            paddedLeftLines.push(leftLines[i] ?? "");
+        }
+        const paddedRightLines = [];
+        for (let i = 0; i < contentHeight; i++) {
+            paddedRightLines.push(rightLines[i + activeScroll] ?? "");
+        }
+        const lines = [];
+        // ── Header ──────────────────────────────────────────────────────
+        const headerText = ` Orchestrator Dashboard `;
+        const headerPad = contentWidth - visibleWidth(border("", this.theme)) - visibleWidth(accentBold(headerText, this.theme));
+        lines.push(border("╭", this.theme) +
+            accentBold(headerText, this.theme) +
+            border("─".repeat(Math.max(0, headerPad)), this.theme) +
+            border("╮", this.theme));
+        for (let i = 0; i < contentHeight; i++) {
+            const left = truncateToWidth(paddedLeftLines[i], leftWidth);
+            const right = truncateToWidth(paddedRightLines[i], rightWidth);
+            const lPad = leftWidth - visibleWidth(left);
+            const rPad = rightWidth - visibleWidth(right);
+            lines.push(border("│", this.theme) +
+                left +
+                " ".repeat(Math.max(0, lPad)) +
+                border("│", this.theme) +
+                " " +
+                right +
+                " ".repeat(Math.max(0, rPad)) +
+                border("│", this.theme));
+        }
+        // ── Footer: bottom border + key hints + model/token meter ────────
+        const hintsBase = state.cancelTargetId
+            ? " y confirm · n dismiss · esc close"
+            : " ↑↓ nav · → expand · ← back · ⏎ focus · x cancel · esc close";
+        lines.push(border("╰", this.theme) + border("─".repeat(contentWidth), this.theme) + border("╯", this.theme));
+        // Aggregate model + token footer (mirrors ViewportFooterComponent).
+        const aggUsage = this.controller.getAggregateUsage();
+        const aggCompression = this.controller.getAggregateCompression();
+        const activeModel = this.controller.getActiveModel();
+        const meter = fmtTokenMeter(aggUsage);
+        const compSuffix = aggCompression.tokensSaved > 0 ? ` ⇌${aggCompression.tokensSaved}t` : "";
+        const modelLabel = activeModel?.provider && activeModel?.model
+            ? `${activeModel.provider} ${activeModel.model}`
+            : (activeModel?.provider ?? activeModel?.model ?? "");
+        let footerLine = "";
+        if (modelLabel && meter) {
+            footerLine = `${hintsBase}   ${dim(modelLabel, this.theme)}  Σ ${meter}${compSuffix}`;
+        }
+        else if (meter) {
+            footerLine = `${hintsBase}   Σ ${meter}${compSuffix}`;
+        }
+        else if (modelLabel) {
+            footerLine = `${hintsBase}   ${dim(modelLabel, this.theme)}`;
+        }
+        else {
+            footerLine = hintsBase;
+        }
+        lines.push(dim(truncateToWidth(footerLine, width), this.theme));
+        // ── Overlay cancel confirmation on top of dashboard content ────
+        if (state.cancelTargetId) {
+            return this.overlayCancelConfirm(lines, width, state.cancelTargetId);
+        }
+        return lines;
+    }
+    handleInput(data) {
+        // ESC always closes the overlay, regardless of focus panel or
+        // cancel-confirmation state. This takes priority over the controller's
+        // ESC handling (which only dismissed cancel-confirm but didn't close).
+        if (matchesKey(data, Key.escape)) {
+            this.dispose();
+            this.done(null);
+            return;
+        }
+        this.controller.handleInput(data);
+    }
+    invalidate() {
+        // No cached render state — pure function of VM + controller state.
+    }
+    dispose() {
+        this.controller.dispose();
+    }
+    // ── Tree panel renderer ─────────────────────────────────────────────────
+    renderTreePanel(visibleIds, state, width) {
+        if (visibleIds.length === 0) {
+            return [dim("No session running", this.theme)];
+        }
+        const lines = [];
+        // Header
+        lines.push(accentBold(" Phases", this.theme));
+        for (const id of visibleIds) {
+            const node = this.controller.getNode(id);
+            if (!node)
+                continue;
+            const isCursor = id === state.cursorId;
+            const depth = node.depth;
+            const indent = " ".repeat(depth * 2);
+            // IL1: themed cursor and glyphs — no raw characters.
+            const cursorChar = cursor(isCursor, this.theme);
+            // Status glyph
+            const glyph = nodeGlyph(node.status, this.theme);
+            // Progress label for orchestrators
+            let label = node.label;
+            if (node.kind === "orchestrator") {
+                const prog = this.controller.getSubtreeProgress(id);
+                label += ` ${prog.completed}/${prog.total}`;
+            }
+            // Expand/collapse indicator — themed
+            const expandIndicator = node.kind === "orchestrator"
+                ? state.expanded.has(id)
+                    ? " "
+                    : collapseIndicator(this.theme)
+                : " ";
+            // Combine
+            const prefix = `${indent}${cursorChar} ${glyph} ${expandIndicator} `;
+            const styled = isCursor
+                ? this.theme.bold(this.theme.fg("accent", `${prefix}${label}`))
+                : `${prefix}${label}`;
+            lines.push(truncateToWidth(styled, width));
+        }
+        // IL2: dual-layer width safety — first guard in screen renderer.
+        return truncateLines(lines, width);
+    }
+    renderDetailPanel(node, width) {
+        const lines = [];
+        // ── Header: label + status (wrap long model strings) ──────────────────
+        const statusLabelStr = statusLabel(node.status);
+        const modelPart = node.model ? ` · ${node.provider ?? ""} ${node.model}` : "";
+        lines.push(...wrapLine(`${nodeGlyph(node.status, this.theme)} ${bold(statusLabelStr, this.theme)}${dim(modelPart, this.theme)}`, width));
+        // ── Metrics line ────────────────────────────────────────────────
+        const metrics = this.formatMetrics(node);
+        if (metrics)
+            lines.push(...wrapLine(dim(metrics, this.theme), width));
+        lines.push("");
+        // ── Orchestrator node: list children ─────────────────────────────
+        if (node.kind === "orchestrator" && node.children.length > 0) {
+            const children = this.controller.getChildren(node.id);
+            lines.push(...wrapLine(dim(bold(`Agents · ${children.length}`, this.theme), this.theme), width));
+            for (const child of children) {
+                const cglyph = nodeGlyph(child.status, this.theme);
+                const cmodel = child.model ? ` ${child.provider ?? ""} ${child.model}` : "";
+                const cmetrics = this.formatMetrics(child);
+                const cmetricsPart = cmetrics ? ` ${cmetrics}` : "";
+                lines.push(...wrapLine(` ${cglyph} ${child.label}${dim(cmodel, this.theme)}${dim(cmetricsPart, this.theme)}`, width));
+            }
+            lines.push("");
+        }
+        // ── Prompt preview (expandable) ─────────────────────────────────
+        if (node.promptPreview) {
+            const expandIcon = promptExpandIcon(this.controller.getState().promptExpanded, this.theme);
+            const lineCount = node.promptPreview.split("\n").length;
+            lines.push(...wrapLine(dim(`${expandIcon} Prompt · ${lineCount} lines · ⏎ expand`, this.theme), width));
+            if (this.controller.getState().promptExpanded) {
+                for (const pline of node.promptPreview.split("\n").slice(0, 20)) {
+                    // Indent wrapped prompt lines by 2 spaces
+                    const wrapped = wrapLine(pline, Math.max(0, width - 4));
+                    for (let i = 0; i < wrapped.length; i++) {
+                        lines.push(dim(i === 0 ? `  ${wrapped[i]}` : `  ${wrapped[i]}`, this.theme));
+                    }
+                }
+                if (lineCount > 20) {
+                    lines.push(dim(`  … ${lineCount - 20} more lines`, this.theme));
+                }
+            }
+            lines.push("");
+        }
+        // ── Activity: running full log of all turns ──────────────────────
+        if (node.kind === "leaf" && node.tailBuffer.length > 0) {
+            const total = node.tailBuffer.length;
+            lines.push(...wrapLine(dim(`Activity · ${total} log line${total === 1 ? "" : "s"}`, this.theme), width));
+            for (const tline of node.tailBuffer) {
+                const painted = paintTailLine(tline, this.theme);
+                lines.push(...wrapLine(painted, width));
+            }
+            lines.push("");
+        }
+        // ── Outcome ─────────────────────────────────────────────────────
+        if (node.outcomePreview) {
+            lines.push(dim("Outcome", this.theme));
+            for (const oline of node.outcomePreview.split("\n").slice(0, 8)) {
+                const wrapped = wrapLine(oline, Math.max(0, width - 4));
+                for (const wl of wrapped) {
+                    lines.push(`  ${wl}`);
+                }
+            }
+            const lineCount = node.outcomePreview.split("\n").length;
+            if (lineCount > 8) {
+                lines.push(dim(`  … ${lineCount - 8} more lines`, this.theme));
+            }
+        }
+        // IL2: dual-layer width safety — first guard in screen renderer.
+        return truncateLines(lines, width);
+    }
+    /** Render a cancel-confirmation dialog overlaid on the dashboard.
+     *  The dashboard content stays visible above and below the dialog.
+     *  The outer frame borders (│ on each side) are preserved across the
+     *  dialog rows so the two-panel layout doesn't visually collapse.
+     *  The dialog is centered and accepts y/Enter to confirm or n/Esc to
+     *  dismiss. The overlay stays until the user decides — Esc only
+     *  dismisses the cancel prompt, not the dashboard.
+     */
+    overlayCancelConfirm(baseLines, width, targetId) {
+        const node = this.controller.getNode(targetId);
+        const label = node?.label ?? targetId;
+        // Content width is the full width minus the two outer │ borders.
+        const contentWidth = width - 2;
+        // Build the dialog box (narrower than the full content area so it
+        // floats with padding on each side).
+        const dialogW = Math.min(contentWidth, 60);
+        const diagLines = [];
+        const prompt = warn(`⚠ Cancel ${bold(label, this.theme)}?`, this.theme);
+        const actions = dim("y confirm · n dismiss · esc close", this.theme);
+        const promptW = visibleWidth(prompt);
+        const actionsW = visibleWidth(actions);
+        diagLines.push(border("╭", this.theme) + border("─".repeat(dialogW - 2), this.theme) + border("╮", this.theme));
+        diagLines.push(border("│", this.theme) + " ".repeat(dialogW - 2) + border("│", this.theme));
+        {
+            // Place prompt and actions side by side when they fit; stack otherwise.
+            const sideBySide = promptW + actionsW + 4 <= dialogW - 2;
+            if (sideBySide) {
+                const contentGap = Math.max(1, dialogW - 4 - promptW - actionsW);
+                const contentLine = border("│", this.theme) + " " + prompt + " ".repeat(contentGap) + actions + " " + border("│", this.theme);
+                if (visibleWidth(contentLine) < dialogW) {
+                    // Pad content line to full dialog width.
+                    const pad = dialogW - 2 - visibleWidth(contentLine.slice(1, -1));
+                    diagLines.push(border("│", this.theme) +
+                        " " + prompt + " ".repeat(contentGap + Math.max(0, pad)) + actions +
+                        " " + border("│", this.theme));
+                }
+                else {
+                    diagLines.push(contentLine);
+                }
+            }
+            else {
+                // Stacked: prompt on one line, actions on the next.
+                const promptPad = Math.max(0, dialogW - 2 - 1 - promptW - 1);
+                diagLines.push(border("│", this.theme) + " " + prompt + " ".repeat(promptPad) + border("│", this.theme));
+                const actionsPad = Math.max(0, dialogW - 2 - 1 - actionsW - 1);
+                diagLines.push(border("│", this.theme) + " " + actions + " ".repeat(actionsPad) + border("│", this.theme));
+            }
+        }
+        diagLines.push(border("│", this.theme) + " ".repeat(dialogW - 2) + border("│", this.theme));
+        diagLines.push(border("╰", this.theme) + border("─".repeat(dialogW - 2), this.theme) + border("╯", this.theme));
+        // Center the dialog vertically within the content rows and
+        // horizontally within the content area, preserving the outer │
+        // borders on every row so the frame stays intact.
+        const totalLines = baseLines.length;
+        const diagH = diagLines.length;
+        const startRow = Math.max(0, Math.floor((totalLines - diagH) / 2));
+        const leftPad = Math.max(0, Math.floor((contentWidth - dialogW) / 2));
+        const result = [...baseLines];
+        for (let i = 0; i < diagH && startRow + i < result.length; i++) {
+            const diagLine = diagLines[i];
+            const diagVisW = visibleWidth(diagLine);
+            const rightPad = Math.max(0, contentWidth - leftPad - diagVisW);
+            // Preserve the outer │ borders: left border + centered dialog + right border.
+            result[startRow + i] =
+                border("│", this.theme) + " ".repeat(leftPad) + diagLine + " ".repeat(rightPad) + border("│", this.theme);
+        }
+        return result;
+    }
+    formatMetrics(node) {
+        const parts = [];
+        if (node.usage.input || node.usage.output || node.usage.cacheRead) {
+            parts.push(fmtTokenMeter(node.usage));
+        }
+        if (node.metrics.toolCount) {
+            parts.push(`${node.metrics.toolCount} tool${node.metrics.toolCount === 1 ? "" : "s"}`);
+        }
+        if (node.metrics.errCount) {
+            parts.push(`${node.metrics.errCount} err`);
+        }
+        if (node.startedAt) {
+            const end = node.endedAt ?? Date.now();
+            const secs = Math.floor((end - node.startedAt) / 1000);
+            parts.push(secs < 60 ? `${secs}s` : `${Math.floor(secs / 60)}m${String(secs % 60).padStart(2, "0")}s`);
+        }
+        return parts.join(" · ");
+    }
+}
+//# sourceMappingURL=component.js.map