agentweaver 0.1.2 → 0.1.4

package/dist/interactive-ui.js

@@ -5,28 +5,40 @@ export class InteractiveUi {
     options;
     screen;
     header;
-    summary;
+    progress;
+    flowList;
     status;
-    sidebar;
+    summary;
     log;
-    input;
     footer;
     help;
-    history;
-    historyIndex;
+    confirm;
+    flowMap;
     busy = false;
-    currentCommand = "idle";
+    currentFlowId = null;
+    selectedFlowId;
     summaryText = "";
-    focusedPane = "input";
+    focusedPane = "flows";
     currentNode = null;
     currentExecutor = null;
     spinnerFrame = 0;
     spinnerTimer = null;
     runningStartedAt = null;
-    constructor(options, history) {
+    renderScheduled = false;
+    logFlushTimer = null;
+    pendingLogLines = [];
+    flowState = {
+        flowId: null,
+        executionState: null,
+    };
+    failedFlowId = null;
+    constructor(options) {
         this.options = options;
-        this.history = history;
-        this.historyIndex = history.length;
+        if (options.flows.length === 0) {
+            throw new Error("Interactive UI requires at least one flow.");
+        }
+        this.flowMap = new Map(options.flows.map((flow) => [flow.id, flow]));
+        this.selectedFlowId = options.flows[0]?.id ?? "auto";
         this.screen = blessed.screen({
             smartCSR: true,
             fullUnicode: true,
@@ -51,14 +63,14 @@ export class InteractiveUi {
                 fg: "white",
             },
         });
-        this.sidebar = blessed.box({
+        this.progress = blessed.box({
             parent: this.screen,
             top: 3,
             left: 0,
-            width: "28%",
-            bottom: 10,
+            width: "34%",
+            height: "50%-1",
             tags: true,
-            label: " Commands ",
+            label: " Current Flow ",
             padding: {
                 left: 1,
                 right: 1,
@@ -69,18 +81,21 @@ export class InteractiveUi {
             keys: true,
             vi: true,
             style: {
-                border: { fg: "cyan" },
+                border: { fg: "green" },
                 fg: "white",
             },
         });
-        this.summary = blessed.box({
+        this.flowList = blessed.list({
             parent: this.screen,
-            top: 3,
-            left: "28%",
-            width: "72%",
-            height: 8,
+            top: "50%+2",
+            left: 0,
+            width: "34%",
+            bottom: 10,
+            keys: true,
+            vi: true,
+            mouse: true,
             tags: true,
-            label: " Task Summary ",
+            label: " Flows ",
             padding: {
                 left: 1,
                 right: 1,
@@ -88,18 +103,47 @@ export class InteractiveUi {
             border: "line",
             scrollable: true,
             alwaysScroll: true,
+            style: {
+                border: { fg: "cyan" },
+                fg: "white",
+                selected: {
+                    fg: "black",
+                    bg: "green",
+                    bold: true,
+                },
+            },
+        });
+        this.confirm = blessed.box({
+            parent: this.screen,
+            top: "center",
+            left: "center",
+            width: 44,
+            height: 8,
+            hidden: true,
+            tags: true,
+            label: " Confirm ",
+            padding: {
+                left: 1,
+                right: 1,
+                top: 1,
+                bottom: 1,
+            },
+            border: "line",
             keys: true,
             vi: true,
             style: {
-                border: { fg: "green" },
+                border: { fg: "yellow" },
+                bg: undefined,
                 fg: "white",
             },
+            align: "center",
+            valign: "middle",
         });
         this.status = blessed.box({
             parent: this.screen,
             bottom: 4,
             left: 0,
-            width: "28%",
+            width: "34%",
             height: 6,
             tags: true,
             label: " Status ",
@@ -113,12 +157,34 @@ export class InteractiveUi {
                 fg: "white",
             },
         });
+        this.summary = blessed.box({
+            parent: this.screen,
+            top: 3,
+            left: "34%",
+            width: "66%",
+            height: 12,
+            tags: true,
+            label: " Task Summary ",
+            padding: {
+                left: 1,
+                right: 1,
+            },
+            border: "line",
+            scrollable: true,
+            alwaysScroll: true,
+            keys: true,
+            vi: true,
+            style: {
+                border: { fg: "green" },
+                fg: "white",
+            },
+        });
         this.log = blessed.log({
             parent: this.screen,
-            top: 11,
+            top: 15,
             bottom: 4,
-            left: "28%",
-            width: "72%",
+            left: "34%",
+            width: "66%",
             tags: false,
             label: " Activity ",
             padding: {
@@ -140,28 +206,6 @@ export class InteractiveUi {
                 fg: "white",
             },
         });
-        this.input = blessed.textbox({
-            parent: this.screen,
-            bottom: 1,
-            left: 0,
-            width: "100%",
-            height: 3,
-            keys: true,
-            inputOnFocus: true,
-            mouse: true,
-            label: " command ",
-            padding: {
-                left: 1,
-            },
-            border: "line",
-            style: {
-                border: { fg: "magenta" },
-                fg: "white",
-                focus: {
-                    border: { fg: "magenta" },
-                },
-            },
-        });
         this.footer = blessed.box({
             parent: this.screen,
             bottom: 0,
@@ -175,8 +219,8 @@ export class InteractiveUi {
             parent: this.screen,
             top: "center",
             left: "center",
-            width: "70%",
-            height: "65%",
+            width: "64%",
+            height: "52%",
             hidden: true,
             tags: true,
             label: " Help ",
@@ -202,212 +246,198 @@ export class InteractiveUi {
         this.screen.key(["C-c", "q"], () => {
             this.options.onExit();
         });
-        this.screen.key(["f1", "?"], () => {
+        this.screen.key(["f1", "h", "?"], () => {
+            if (this.confirm.visible) {
+                return;
+            }
             this.help.hidden = !this.help.hidden;
             if (!this.help.hidden) {
                 this.help.focus();
             }
             else {
-                this.input.focus();
+                this.focusPane("flows");
             }
-            this.screen.render();
+            this.requestRender();
         });
         this.screen.key(["escape"], () => {
-            this.help.hide();
-            this.focusPane("input");
-            this.screen.render();
+            if (!this.help.hidden) {
+                this.help.hide();
+                this.focusPane("flows");
+                this.requestRender();
+                return;
+            }
+            if (this.confirm.visible) {
+                this.closeConfirm();
+            }
         });
         this.screen.key(["C-l"], () => {
             this.log.setContent("");
             this.appendLog("Log cleared.");
         });
+        this.screen.key(["tab"], () => {
+            if (this.confirm.visible || !this.help.hidden) {
+                return;
+            }
+            this.cycleFocus(1);
+        });
         this.screen.key(["S-tab"], () => {
+            if (this.confirm.visible || !this.help.hidden) {
+                return;
+            }
             this.cycleFocus(-1);
         });
-        this.screen.key(["tab"], () => {
-            if (this.focusedPane !== "input") {
-                this.cycleFocus(1);
+        this.flowList.on("select item", (_item, index) => {
+            const flow = this.options.flows[index];
+            if (!flow) {
+                return;
+            }
+            this.selectedFlowId = flow.id;
+            this.renderProgress();
+            this.requestRender();
+        });
+        this.flowList.key(["enter"], () => {
+            if (this.busy || this.confirm.visible || !this.help.hidden) {
+                return;
             }
+            this.openConfirm();
         });
-        this.screen.key(["C-j"], () => {
-            this.focusPane("log");
+        this.flowList.key(["pageup"], () => {
+            this.flowList.scroll(-(this.flowList.height - 2));
+            this.requestRender();
         });
-        this.screen.key(["C-k"], () => {
-            this.focusPane("input");
+        this.flowList.key(["pagedown"], () => {
+            this.flowList.scroll(this.flowList.height - 2);
+            this.requestRender();
         });
         this.log.key(["up"], () => {
             this.log.scroll(-1);
-            this.screen.render();
+            this.requestRender();
         });
         this.log.key(["down"], () => {
             this.log.scroll(1);
-            this.screen.render();
+            this.requestRender();
         });
         this.log.key(["pageup"], () => {
             this.log.scroll(-(this.log.height - 2));
-            this.screen.render();
+            this.requestRender();
         });
         this.log.key(["pagedown"], () => {
             this.log.scroll(this.log.height - 2);
-            this.screen.render();
+            this.requestRender();
         });
         this.log.key(["home"], () => {
             this.log.setScroll(0);
-            this.screen.render();
+            this.requestRender();
         });
         this.log.key(["end"], () => {
             this.log.setScrollPerc(100);
-            this.screen.render();
+            this.requestRender();
         });
         this.summary.key(["pageup"], () => {
             this.summary.scroll(-(this.summary.height - 2));
-            this.screen.render();
+            this.requestRender();
         });
         this.summary.key(["pagedown"], () => {
             this.summary.scroll(this.summary.height - 2);
-            this.screen.render();
+            this.requestRender();
         });
-        this.sidebar.key(["pageup"], () => {
-            this.sidebar.scroll(-(this.sidebar.height - 2));
-            this.screen.render();
+        this.progress.key(["pageup"], () => {
+            this.progress.scroll(-(this.progress.height - 2));
+            this.requestRender();
         });
-        this.sidebar.key(["pagedown"], () => {
-            this.sidebar.scroll(this.sidebar.height - 2);
-            this.screen.render();
+        this.progress.key(["pagedown"], () => {
+            this.progress.scroll(this.progress.height - 2);
+            this.requestRender();
         });
-        this.input.key(["up"], () => {
-            if (this.history.length === 0) {
+        this.confirm.key(["enter"], async () => {
+            if (this.busy || this.confirm.hidden) {
                 return;
             }
-            this.historyIndex = Math.max(0, this.historyIndex - 1);
-            this.input.setValue(this.history[this.historyIndex] ?? "");
-            this.screen.render();
-        });
-        this.input.key(["down"], () => {
-            if (this.history.length === 0) {
-                return;
+            const flowId = this.selectedFlowId;
+            this.closeConfirm();
+            this.setBusy(true, flowId);
+            this.clearFlowFailure(flowId);
+            this.setFlowDisplayState(flowId, null);
+            try {
+                await this.options.onRun(flowId);
             }
-            this.historyIndex = Math.min(this.history.length, this.historyIndex + 1);
-            this.input.setValue(this.history[this.historyIndex] ?? "");
-            this.screen.render();
-        });
-        this.input.key(["tab"], () => {
-            const current = String(this.input.getValue() ?? "");
-            const hit = this.options.commands.find((item) => item.startsWith(current.trim()));
-            if (hit) {
-                this.input.setValue(hit);
-                this.screen.render();
+            finally {
+                this.setBusy(false);
+                this.focusPane("flows");
             }
         });
-        this.input.key(["C-j"], () => {
-            this.focusPane("log");
-        });
-        this.input.key(["C-u"], () => {
-            this.focusPane("summary");
-        });
-        this.input.key(["C-h"], () => {
-            this.focusPane("sidebar");
-        });
-        this.input.key(["S-tab"], () => {
-            this.cycleFocus(-1);
-        });
-        this.log.key(["tab"], () => {
-            this.cycleFocus(1);
-        });
-        this.log.key(["S-tab"], () => {
-            this.cycleFocus(-1);
-        });
-        this.summary.key(["tab"], () => {
-            this.cycleFocus(1);
-        });
-        this.summary.key(["S-tab"], () => {
-            this.cycleFocus(-1);
-        });
-        this.sidebar.key(["tab"], () => {
-            this.cycleFocus(1);
-        });
-        this.sidebar.key(["S-tab"], () => {
-            this.cycleFocus(-1);
-        });
-        this.input.on("submit", async (value) => {
-            const line = value.trim();
-            this.input.clearValue();
-            this.screen.render();
-            if (!line || this.busy) {
-                return;
-            }
-            this.history.push(line);
-            this.historyIndex = this.history.length;
-            this.appendLog(`> ${line}`);
-            await this.options.onSubmit(line);
-            this.focusPane("input");
+        this.confirm.key(["escape"], () => {
+            this.closeConfirm();
         });
     }
     cycleFocus(direction) {
-        const panes = ["input", "log", "summary", "sidebar"];
+        const panes = ["flows", "progress", "summary", "log"];
         const currentIndex = panes.indexOf(this.focusedPane);
         const nextIndex = (currentIndex + direction + panes.length) % panes.length;
-        this.focusPane(panes[nextIndex] ?? "input");
+        this.focusPane(panes[nextIndex] ?? "flows");
     }
     focusPane(pane) {
         this.focusedPane = pane;
-        this.header.style.border.fg = "green";
-        this.log.style.border.fg = pane === "log" ? "brightYellow" : "yellow";
+        this.flowList.style.border.fg = pane === "flows" ? "brightCyan" : "cyan";
+        this.progress.style.border.fg = pane === "progress" ? "brightGreen" : "green";
         this.summary.style.border.fg = pane === "summary" ? "brightGreen" : "green";
-        this.sidebar.style.border.fg = pane === "sidebar" ? "brightCyan" : "cyan";
-        this.input.style.border.fg = pane === "input" ? "brightMagenta" : "magenta";
-        if (pane === "input") {
-            this.input.focus();
+        this.log.style.border.fg = pane === "log" ? "brightYellow" : "yellow";
+        this.flowList.setLabel(pane === "flows" ? " ▶ Flows " : " Flows ");
+        this.progress.setLabel(pane === "progress" ? " ▶ Current Flow " : " Current Flow ");
+        this.summary.setLabel(pane === "summary" ? " ▶ Task Summary " : " Task Summary ");
+        this.log.setLabel(pane === "log" ? " ▶ Activity " : " Activity ");
+        if (pane === "flows") {
+            if (this.confirm.visible) {
+                this.confirm.focus();
+            }
+            else {
+                this.flowList.focus();
+            }
         }
-        else if (pane === "log") {
-            this.log.focus();
+        else if (pane === "progress") {
+            this.progress.focus();
         }
         else if (pane === "summary") {
             this.summary.focus();
         }
         else {
-            this.sidebar.focus();
+            this.log.focus();
         }
-        this.footer.setContent(` Focus: ${pane} | Enter: run command | Tab/Shift+Tab: switch pane | Ctrl+J: log | Ctrl+K: input | PgUp/PgDn: scroll | ?: help | q: exit `);
-        this.screen.render();
+        this.footer.setContent(` Focus: ${pane} | Up/Down: select flow | Enter: confirm run | h: help | Esc: close | Tab: switch pane | q: exit `);
+        this.requestRender();
     }
     renderStaticContent() {
         this.summaryText = this.options.summaryText.trim();
         this.updateHeader();
+        this.flowList.setItems(this.options.flows.map((flow) => flow.label));
+        this.flowList.select(this.options.flows.findIndex((flow) => flow.id === this.selectedFlowId));
         this.renderSummary();
-        this.sidebar.setContent([
-            this.options.commands.join("\n"),
-            "",
-            "Keys:",
-            "? / F1      help",
-            "Ctrl+L      clear log",
-            "Tab         complete",
-            "q / Ctrl+C  exit",
-        ].join("\n"));
+        this.renderProgress();
         this.help.setContent(renderMarkdownToTerminal([
             "AgentWeaver interactive mode",
             "",
-            "Use slash commands in the input box:",
-            this.options.commands.join("\n"),
+            "Клавиши:",
+            "Up / Down    выбрать flow",
+            "Enter        открыть подтверждение запуска",
+            "Enter        подтвердить запуск в модалке",
+            "Esc          закрыть help или модалку",
+            "h / F1       открыть или закрыть help",
+            "Tab          переключить pane",
+            "Ctrl+L       очистить лог",
+            "q / Ctrl+C   выйти",
             "",
-            "Keys:",
-            "Tab           autocomplete command",
-            "Up/Down       history",
-            "Ctrl+L        clear log",
-            "? or F1       toggle help",
-            "Esc           close help",
-            "q / Ctrl+C    exit",
+            "Доступные flow:",
+            ...this.options.flows.map((flow) => flow.label),
         ].join("\n")));
-        this.footer.setContent(" Enter: run command | Tab: complete | Up/Down: history | ?: help | Ctrl+L: clear log | q: exit ");
+        this.footer.setContent(" Up/Down: select flow | Enter: confirm run | h: help | Tab: switch pane | q: exit ");
     }
     updateHeader() {
+        const current = this.currentFlowId ?? this.selectedFlowId;
         this.header.setContent(`{bold}AgentWeaver{/bold}  {green-fg}${this.options.issueKey}{/green-fg}\n` +
-            `cwd: ${this.options.cwd}   current: ${this.currentCommand}`);
+            `cwd: ${this.options.cwd}   current: ${current}${this.busy ? " {yellow-fg}[running]{/yellow-fg}" : ""}`);
     }
     renderSummary() {
-        const summaryBody = this.summaryText
-            ? this.summaryText
-            : "Task summary is not available yet.";
+        const summaryBody = this.summaryText || "Task summary is not available yet.";
         this.summary.setContent(renderMarkdownToTerminal(stripAnsi(summaryBody)));
     }
     createAdapter() {
@@ -420,51 +450,326 @@ export class InteractiveUi {
             },
             supportsTransientStatus: false,
             supportsPassthrough: false,
-            renderAuxiliaryOutput: false,
+            renderAuxiliaryOutput: true,
+            renderPanelsAsPlainText: true,
             setExecutionState: (state) => {
                 this.currentNode = state.node;
                 this.currentExecutor = state.executor;
                 this.updateRunningPanel();
             },
+            setFlowState: (state) => {
+                this.setFlowDisplayState(state.flowId, state.executionState);
+            },
         };
     }
+    activeFlowId() {
+        return this.currentFlowId ?? this.selectedFlowId;
+    }
+    progressFlowDefinition() {
+        const preferredFlowId = this.busy ? this.activeFlowId() : this.selectedFlowId;
+        return this.flowMap.get(preferredFlowId);
+    }
+    renderProgress() {
+        const flow = this.progressFlowDefinition();
+        if (!flow) {
+            this.progress.setContent("Flow structure is not available.");
+            return;
+        }
+        const flowState = this.flowState.flowId === flow.id
+            ? this.flowState.executionState
+            : this.currentFlowId === flow.id
+                ? this.flowState.executionState
+                : null;
+        const lines = [flow.label, ""];
+        for (const item of this.visiblePhaseItems(flow, flowState)) {
+            if (item.kind === "group") {
+                const visiblePhases = item.phases.filter((phase) => this.shouldDisplayPhase(flow, flowState, phase));
+                if (visiblePhases.length === 0) {
+                    continue;
+                }
+                lines.push(`${this.symbolForGroup(flow.id, flow, visiblePhases, flowState)} ${item.label}`);
+                for (const phase of visiblePhases) {
+                    const phaseState = flowState?.phases.find((candidate) => candidate.id === phase.id);
+                    const phaseStatus = this.displayStatusForPhase(flowState, flow, phase, phaseState?.status ?? null);
+                    lines.push(`  ${this.symbolForStatus(flow.id, phaseStatus)} ${this.displayPhaseId(phase)}`);
+                    for (const step of phase.steps) {
+                        const stepState = phaseState?.steps.find((candidate) => candidate.id === step.id);
+                        const stepStatus = this.displayStatusForStep(flowState, flow, phase, stepState?.status ?? null);
+                        lines.push(`    ${this.symbolForStatus(flow.id, stepStatus)} ${step.id}`);
+                    }
+                }
+                lines.push("");
+                continue;
+            }
+            const phase = item.phase;
+            if (!this.shouldDisplayPhase(flow, flowState, phase)) {
+                continue;
+            }
+            const phaseState = flowState?.phases.find((candidate) => candidate.id === phase.id);
+            const phaseStatus = this.displayStatusForPhase(flowState, flow, phase, phaseState?.status ?? null);
+            lines.push(`${this.symbolForStatus(flow.id, phaseStatus)} ${this.displayPhaseId(phase)}`);
+            for (const step of phase.steps) {
+                const stepState = phaseState?.steps.find((candidate) => candidate.id === step.id);
+                const stepStatus = this.displayStatusForStep(flowState, flow, phase, stepState?.status ?? null);
+                lines.push(`  ${this.symbolForStatus(flow.id, stepStatus)} ${step.id}`);
+            }
+            lines.push("");
+        }
+        if (flowState?.terminated) {
+            lines.push(`✓ Flow completed successfully`);
+            lines.push(`Reason: ${flowState.terminationReason ?? "flow terminated"}`);
+        }
+        this.progress.setContent(lines.join("\n").trimEnd());
+    }
+    displayStatusForPhase(flowState, flow, phase, actualStatus) {
+        if (actualStatus) {
+            return actualStatus;
+        }
+        if (!flowState?.terminated) {
+            return "pending";
+        }
+        return this.isAfterTermination(flowState, flow, phase) ? "skipped" : "pending";
+    }
+    displayStatusForStep(flowState, flow, phase, actualStatus) {
+        if (actualStatus) {
+            return actualStatus;
+        }
+        if (!flowState?.terminated) {
+            return "pending";
+        }
+        return this.isAfterTermination(flowState, flow, phase) ? "skipped" : "pending";
+    }
+    symbolForStatus(flowId, status) {
+        if (status === "done") {
+            return "✓";
+        }
+        if (status === "skipped") {
+            return "·";
+        }
+        if (status === "running") {
+            const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+            return this.failedFlowId === flowId && !this.busy ? "×" : (frames[this.spinnerFrame] ?? "▶");
+        }
+        return "○";
+    }
+    symbolForGroup(flowId, flow, phases, flowState) {
+        const statuses = phases.map((phase) => this.displayStatusForPhase(flowState, flow, phase, flowState?.phases.find((candidate) => candidate.id === phase.id)?.status ?? null));
+        if (statuses.some((status) => status === "running")) {
+            return this.symbolForStatus(flowId, "running");
+        }
+        if (statuses.every((status) => status === "skipped")) {
+            return "·";
+        }
+        if (statuses.every((status) => status === "done" || status === "skipped")) {
+            return "✓";
+        }
+        return "○";
+    }
+    groupPhases(flow) {
+        const items = [];
+        let index = 0;
+        while (index < flow.phases.length) {
+            const phase = flow.phases[index];
+            if (!phase) {
+                break;
+            }
+            const repeatLabel = this.repeatLabel(phase.repeatVars);
+            if (!repeatLabel) {
+                items.push({ kind: "phase", phase });
+                index += 1;
+                continue;
+            }
+            const phases = [phase];
+            let nextIndex = index + 1;
+            while (nextIndex < flow.phases.length) {
+                const candidate = flow.phases[nextIndex];
+                if (!candidate || this.repeatGroupKey(candidate.repeatVars) !== this.repeatGroupKey(phase.repeatVars)) {
+                    break;
+                }
+                phases.push(candidate);
+                nextIndex += 1;
+            }
+            items.push({ kind: "group", label: repeatLabel, phases, seriesKey: this.repeatSeriesKey(phases) });
+            index = nextIndex;
+        }
+        return items;
+    }
+    visiblePhaseItems(flow, flowState) {
+        const pendingSeries = new Set();
+        return this.groupPhases(flow).filter((item) => {
+            if (item.kind === "phase") {
+                return this.shouldDisplayPhase(flow, flowState, item.phase);
+            }
+            const visiblePhases = item.phases.filter((phase) => this.shouldDisplayPhase(flow, flowState, phase));
+            const hasState = visiblePhases.some((phase) => flowState?.phases.some((candidate) => candidate.id === phase.id));
+            if (visiblePhases.length === 0) {
+                return false;
+            }
+            if (hasState) {
+                return true;
+            }
+            if (pendingSeries.has(item.seriesKey)) {
+                return false;
+            }
+            pendingSeries.add(item.seriesKey);
+            return true;
+        });
+    }
+    repeatGroupKey(repeatVars) {
+        const entries = Object.entries(repeatVars).sort(([left], [right]) => left.localeCompare(right));
+        return JSON.stringify(entries);
+    }
+    shouldDisplayPhase(flow, flowState, phase) {
+        const phaseState = flowState?.phases.find((candidate) => candidate.id === phase.id) ?? null;
+        if (!flowState) {
+            if (Object.keys(phase.repeatVars).length > 0) {
+                return false;
+            }
+            return !this.hasPreviousRepeatPhase(flow, phase);
+        }
+        if (Object.keys(phase.repeatVars).length === 0) {
+            if (!phaseState) {
+                return false;
+            }
+            if (phaseState?.status === "skipped" && flowState.terminated && this.isAfterTermination(flowState, flow, phase)) {
+                return false;
+            }
+            return true;
+        }
+        if (!phaseState) {
+            return false;
+        }
+        if (phaseState.status === "skipped" && flowState.terminated && this.isAfterTermination(flowState, flow, phase)) {
+            return false;
+        }
+        return true;
+    }
+    hasPreviousRepeatPhase(flow, phase) {
+        for (const candidate of flow.phases) {
+            if (candidate.id === phase.id) {
+                return false;
+            }
+            if (Object.keys(candidate.repeatVars).length > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+    repeatSeriesKey(phases) {
+        const repeatVarNames = Object.keys(phases[0]?.repeatVars ?? {}).sort();
+        const phaseNames = phases.map((phase) => this.displayPhaseId(phase));
+        return JSON.stringify({
+            repeatVarNames,
+            phaseNames,
+        });
+    }
+    repeatLabel(repeatVars) {
+        const entries = Object.entries(repeatVars).filter(([key]) => !key.endsWith("_minus_one"));
+        if (entries.length === 0) {
+            return null;
+        }
+        if (entries.length === 1) {
+            const [key, value] = entries[0] ?? ["repeat", ""];
+            return `${key} ${value}`;
+        }
+        return entries.map(([key, value]) => `${key}=${value}`).join(", ");
+    }
+    displayPhaseId(phase) {
+        let result = phase.id;
+        const values = Object.entries(phase.repeatVars)
+            .filter(([key]) => !key.endsWith("_minus_one"))
+            .map(([, value]) => value);
+        for (const value of values) {
+            const suffix = `_${String(value)}`;
+            if (result.endsWith(suffix)) {
+                result = result.slice(0, -suffix.length);
+            }
+        }
+        return result;
+    }
+    isAfterTermination(flowState, flow, phase) {
+        const terminationReason = flowState.terminationReason ?? "";
+        const match = /^Stopped by ([^:]+):/.exec(terminationReason);
+        if (!match) {
+            return false;
+        }
+        const stoppedPhaseId = match[1];
+        const stoppedIndex = flow.phases.findIndex((candidate) => candidate.id === stoppedPhaseId);
+        const currentIndex = flow.phases.findIndex((candidate) => candidate.id === phase.id);
+        if (stoppedIndex < 0 || currentIndex < 0) {
+            return false;
+        }
+        return currentIndex > stoppedIndex;
+    }
+    openConfirm() {
+        const flow = this.flowMap.get(this.selectedFlowId);
+        if (!flow) {
+            return;
+        }
+        this.confirm.setContent(`Run flow "${flow.label}"?\n\nEnter: yes    Esc: no`);
+        this.confirm.show();
+        this.confirm.setFront();
+        this.confirm.focus();
+        this.requestRender();
+    }
+    closeConfirm() {
+        this.confirm.hide();
+        this.focusPane("flows");
+        this.requestRender();
+    }
     mount() {
         setOutputAdapter(this.createAdapter());
-        this.focusPane("input");
+        this.focusPane("flows");
     }
     destroy() {
+        this.flushPendingLogLines();
         if (this.spinnerTimer) {
             clearInterval(this.spinnerTimer);
             this.spinnerTimer = null;
         }
+        if (this.logFlushTimer) {
+            clearTimeout(this.logFlushTimer);
+            this.logFlushTimer = null;
+        }
         setOutputAdapter(null);
         this.screen.destroy();
     }
-    setBusy(busy, command) {
+    setBusy(busy, flowId) {
         this.busy = busy;
-        this.currentCommand = command ?? (busy ? this.currentCommand : "idle");
+        this.currentFlowId = flowId ?? (busy ? this.currentFlowId : this.currentFlowId);
         if (busy && this.runningStartedAt === null) {
             this.runningStartedAt = Date.now();
         }
         else if (!busy && this.currentNode === null && this.currentExecutor === null) {
             this.runningStartedAt = null;
         }
+        if (!busy && flowId === undefined) {
+            this.currentFlowId = this.currentFlowId ?? this.selectedFlowId;
+        }
         this.updateHeader();
-        this.header.setContent(`{bold}AgentWeaver{/bold}  {green-fg}${this.options.issueKey}{/green-fg}\n` +
-            `cwd: ${this.options.cwd}   current: ${this.currentCommand}${busy ? " {yellow-fg}[running]{/yellow-fg}" : ""}`);
         this.updateRunningPanel();
-        this.input.setLabel(busy ? " command [busy] " : " command ");
-        this.screen.render();
+        this.renderProgress();
+        this.requestRender();
+    }
+    setFlowFailed(flowId) {
+        this.failedFlowId = flowId;
+        this.renderProgress();
+        this.requestRender();
+    }
+    clearFlowFailure(flowId) {
+        if (this.failedFlowId === flowId) {
+            this.failedFlowId = null;
+        }
     }
     setStatus(status) {
-        this.currentCommand = status;
+        this.currentFlowId = status;
         this.updateHeader();
-        this.screen.render();
+        this.requestRender();
     }
     setSummary(markdown) {
         this.summaryText = markdown.trim();
         this.renderSummary();
-        this.screen.render();
+        this.requestRender();
     }
     appendLog(text) {
         const normalized = text
@@ -473,15 +778,23 @@ export class InteractiveUi {
             .join("\n")
             .trimEnd();
         if (!normalized) {
-            this.log.add("");
+            this.pendingLogLines.push("");
         }
         else {
-            for (const line of normalized.split("\n")) {
-                this.log.add(line);
-            }
+            this.pendingLogLines.push(...normalized.split("\n"));
         }
-        this.log.setScrollPerc(100);
-        this.screen.render();
+        this.scheduleLogFlush();
+    }
+    setFlowDisplayState(flowId, executionState) {
+        this.flowState = {
+            flowId,
+            executionState,
+        };
+        if (flowId) {
+            this.currentFlowId = flowId;
+        }
+        this.renderProgress();
+        this.requestRender();
     }
     updateRunningPanel() {
         const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -493,7 +806,8 @@ export class InteractiveUi {
             this.spinnerTimer = setInterval(() => {
                 this.spinnerFrame = (this.spinnerFrame + 1) % frames.length;
                 this.updateRunningPanel();
-                this.screen.render();
+                this.renderProgress();
+                this.requestRender();
             }, 120);
         }
         else if (!running && this.spinnerTimer) {
@@ -509,7 +823,7 @@ export class InteractiveUi {
         const stateLine = `State: ${running ? `${spinner} running` : "idle"}`;
         const elapsedLine = `Time: ${elapsed}`;
         this.status.setContent([stateLine, elapsedLine, nodeLine, executorLine].join("\n"));
-        this.screen.render();
+        this.requestRender();
     }
     formatElapsed(now) {
         if (this.runningStartedAt === null || now === null) {
@@ -517,8 +831,38 @@ export class InteractiveUi {
         }
         const totalSeconds = Math.max(0, Math.floor((now - this.runningStartedAt) / 1000));
         const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, "0");
-        const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, "0");
+        const minutes = String((totalSeconds % 3600) / 60 | 0).padStart(2, "0");
         const seconds = String(totalSeconds % 60).padStart(2, "0");
         return `${hours}:${minutes}:${seconds}`;
     }
+    scheduleLogFlush() {
+        if (this.logFlushTimer) {
+            return;
+        }
+        this.logFlushTimer = setTimeout(() => {
+            this.logFlushTimer = null;
+            this.flushPendingLogLines();
+        }, 50);
+    }
+    flushPendingLogLines() {
+        if (this.pendingLogLines.length === 0) {
+            return;
+        }
+        const lines = this.pendingLogLines.splice(0, this.pendingLogLines.length);
+        for (const line of lines) {
+            this.log.add(line);
+        }
+        this.log.setScrollPerc(100);
+        this.requestRender();
+    }
+    requestRender() {
+        if (this.renderScheduled) {
+            return;
+        }
+        this.renderScheduled = true;
+        setImmediate(() => {
+            this.renderScheduled = false;
+            this.screen.render();
+        });
+    }
 }