agentweaver 0.1.9 → 0.1.11

package/dist/interactive-ui.js

@@ -2,10 +2,104 @@ import path from "node:path";
 import blessed from "neo-blessed";
 import { renderMarkdownToTerminal } from "./markdown.js";
 import { setOutputAdapter, stripAnsi } from "./tui.js";
-import { TaskRunnerError } from "./errors.js";
+import { FlowInterruptedError, TaskRunnerError } from "./errors.js";
 import { buildInitialUserInputValues, validateUserInputValues, } from "./user-input.js";
 const CONFIRM_MIN_WIDTH = 44;
 const CONFIRM_MIN_HEIGHT = 8;
+function compareTreeNames(left, right) {
+    return left.localeCompare(right, "ru");
+}
+function makeFolderKey(pathSegments) {
+    return `folder:${pathSegments.join("/")}`;
+}
+function makeFlowKey(flowId) {
+    return `flow:${flowId}`;
+}
+function buildFlowTree(flows) {
+    const roots = new Map();
+    const ensureFolder = (pathSegments) => {
+        const firstSegment = pathSegments[0];
+        if (!firstSegment) {
+            throw new Error("Flow tree folder path cannot be empty.");
+        }
+        const rootFolder = roots.get(firstSegment);
+        let currentFolder;
+        if (rootFolder) {
+            currentFolder = rootFolder;
+        }
+        else {
+            currentFolder = {
+                kind: "folder",
+                key: makeFolderKey([firstSegment]),
+                name: firstSegment,
+                pathSegments: [firstSegment],
+                children: [],
+            };
+            roots.set(firstSegment, currentFolder);
+        }
+        for (let index = 1; index < pathSegments.length; index += 1) {
+            const segment = pathSegments[index] ?? "";
+            const folderPath = pathSegments.slice(0, index + 1);
+            let nextFolder = currentFolder.children.find((child) => child.kind === "folder" && child.name === segment);
+            if (!nextFolder) {
+                nextFolder = {
+                    kind: "folder",
+                    key: makeFolderKey(folderPath),
+                    name: segment,
+                    pathSegments: folderPath,
+                    children: [],
+                };
+                currentFolder.children.push(nextFolder);
+            }
+            currentFolder = nextFolder;
+        }
+        return currentFolder;
+    };
+    for (const flow of flows) {
+        if (flow.treePath.length === 0) {
+            continue;
+        }
+        const folderPath = flow.treePath.slice(0, -1);
+        const leafName = flow.treePath[flow.treePath.length - 1] ?? flow.id;
+        const parent = ensureFolder(folderPath);
+        parent.children.push({
+            kind: "flow",
+            key: makeFlowKey(flow.id),
+            name: leafName,
+            pathSegments: [...flow.treePath],
+            flow,
+        });
+    }
+    const sortNodes = (nodes) => [...nodes]
+        .sort((left, right) => {
+        if (left.kind !== right.kind) {
+            return left.kind === "folder" ? -1 : 1;
+        }
+        return compareTreeNames(left.name, right.name);
+    })
+        .map((node) => node.kind === "folder"
+        ? {
+            ...node,
+            children: sortNodes(node.children),
+        }
+        : node);
+    const orderedRootNames = ["custom", "default"];
+    const sortedRoots = [...roots.values()].sort((left, right) => {
+        const leftIndex = orderedRootNames.indexOf(left.name);
+        const rightIndex = orderedRootNames.indexOf(right.name);
+        if (leftIndex !== -1 || rightIndex !== -1) {
+            if (leftIndex === -1) {
+                return 1;
+            }
+            if (rightIndex === -1) {
+                return -1;
+            }
+            return leftIndex - rightIndex;
+        }
+        return compareTreeNames(left.name, right.name);
+    });
+    return sortNodes(sortedRoots);
+}
 export class InteractiveUi {
     options;
     screen;
@@ -21,9 +115,13 @@ export class InteractiveUi {
     confirm;
     formModal;
     flowMap;
+    flowTree;
+    expandedFlowFolders = new Set();
+    visibleFlowItems = [];
     busy = false;
     currentFlowId = null;
     selectedFlowId;
+    selectedFlowItemKey;
     summaryText = "";
     focusedPane = "flows";
     currentNode = null;
@@ -44,16 +142,21 @@ export class InteractiveUi {
     scopeKey;
     jiraIssueKey;
     summaryVisible;
+    version;
     constructor(options) {
         this.options = options;
         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.flowTree = buildFlowTree(options.flows);
+        this.selectedFlowId = options.flows[0]?.id ?? "auto-golang";
+        this.visibleFlowItems = this.computeVisibleFlowItems();
+        this.selectedFlowItemKey = this.visibleFlowItems[0]?.key ?? makeFlowKey(this.selectedFlowId);
         this.scopeKey = options.scopeKey;
         this.jiraIssueKey = options.jiraIssueKey ?? null;
         this.summaryVisible = options.summaryText.trim().length > 0;
+        this.version = options.version ?? "";
         this.screen = blessed.screen({
             smartCSR: true,
             fullUnicode: true,
@@ -338,6 +441,10 @@ export class InteractiveUi {
             this.requestRender();
         });
         this.screen.key(["escape"], () => {
+            if (this.busy && this.confirm.hidden && this.help.hidden) {
+                this.openInterruptConfirm();
+                return;
+            }
             if (this.hasActiveForm()) {
                 this.cancelActiveForm();
                 return;
@@ -375,11 +482,15 @@ export class InteractiveUi {
             if (this.hasActiveForm()) {
                 return;
             }
-            const flow = this.options.flows[index];
-            if (!flow) {
+            const selectedItem = this.visibleFlowItems[index];
+            if (!selectedItem) {
                 return;
             }
-            this.selectedFlowId = flow.id;
+            this.selectedFlowItemKey = selectedItem.key;
+            if (selectedItem.kind === "flow") {
+                this.selectedFlowId = selectedItem.flow.id;
+            }
+            this.updateHeader();
             this.renderDescription();
             this.renderProgress();
             this.requestRender();
@@ -388,8 +499,25 @@ export class InteractiveUi {
             if (this.busy || this.confirm.visible || !this.help.hidden || this.hasActiveForm()) {
                 return;
             }
+            const selectedItem = this.selectedFlowTreeItem();
+            if (selectedItem?.kind === "folder") {
+                this.toggleFlowFolder(selectedItem.key);
+                return;
+            }
             await this.openConfirm();
         });
+        this.flowList.key(["right"], () => {
+            if (this.hasActiveForm()) {
+                return;
+            }
+            this.expandSelectedFlowFolder();
+        });
+        this.flowList.key(["left"], () => {
+            if (this.hasActiveForm()) {
+                return;
+            }
+            this.collapseSelectedFlowFolderOrSelectParent();
+        });
         this.flowList.key(["pageup"], () => {
             if (this.hasActiveForm()) {
                 return;
@@ -475,20 +603,29 @@ export class InteractiveUi {
             this.requestRender();
         });
         this.confirm.key(["enter"], async () => {
-            if (this.busy || this.confirm.hidden || this.hasActiveForm() || !this.confirmSession) {
+            if (this.confirm.hidden || !this.confirmSession) {
                 return;
             }
-            const { flowId, selectedAction } = this.confirmSession;
+            if (this.hasActiveForm() && this.confirmSession.kind !== "interrupt") {
+                return;
+            }
+            const { flowId, selectedAction, kind } = this.confirmSession;
             if (selectedAction === "cancel") {
                 this.closeConfirm();
                 return;
             }
+            if (kind === "interrupt") {
+                this.closeConfirm();
+                await this.options.onInterrupt(flowId);
+                return;
+            }
             this.closeConfirm();
             this.setBusy(true, flowId);
             this.clearFlowFailure(flowId);
             this.setFlowDisplayState(flowId, null);
             try {
-                await this.options.onRun(flowId, selectedAction === "ok" ? "restart" : selectedAction);
+                const launchMode = selectedAction === "resume" ? "resume" : "restart";
+                await this.options.onRun(flowId, launchMode);
             }
             finally {
                 this.setBusy(false);
@@ -547,7 +684,7 @@ export class InteractiveUi {
         else {
             this.log.focus();
         }
-        this.footer.setContent(` Focus: ${pane} | Up/Down: select flow | Enter: confirm run | h: help | Esc: close | Tab: switch pane | q: exit `);
+        this.footer.setContent(` Focus: ${pane} | Up/Down: select | Left/Right: fold | Enter: toggle/run | h: help | Esc: close/interrupt | Tab: switch pane | q: exit `);
         this.requestRender();
     }
     renderStaticContent() {
@@ -555,8 +692,7 @@ export class InteractiveUi {
         this.summaryVisible = this.summaryText.length > 0;
         this.applyRightPaneLayout();
         this.updateHeader();
-        this.flowList.setItems(this.options.flows.map((flow) => this.renderFlowListLabel(flow)));
-        this.flowList.select(this.options.flows.findIndex((flow) => flow.id === this.selectedFlowId));
+        this.renderFlowTreeList();
         this.renderDescription();
         this.renderSummary();
         this.renderProgress();
@@ -564,31 +700,35 @@ export class InteractiveUi {
             "AgentWeaver interactive mode",
             "",
             "Клавиши:",
-            "Up / Down    выбрать flow",
-            "Enter        открыть подтверждение запуска",
+            "Up / Down    выбрать папку или flow",
+            "Right        раскрыть папку",
+            "Left         свернуть папку или перейти к родителю",
+            "Enter        раскрыть папку или открыть запуск flow",
             "Enter        подтвердить запуск в модалке",
-            "Esc          закрыть help или модалку",
-            "h / F1       открыть или закрыть help",
+            "Esc          закрыть help/модалку или прервать running flow",
+            "F1           открыть или закрыть help",
             "Tab          переключить pane",
             "Ctrl+L       очистить лог",
             "q / Ctrl+C   выйти",
             "",
             "Доступные flow:",
-            ...this.options.flows.map((flow) => flow.label),
+            ...this.options.flows.map((flow) => flow.treePath.join("/")),
         ].join("\n")));
-        this.footer.setContent(" Up/Down: select flow | Enter: confirm run | h: help | Tab: switch pane | q: exit ");
+        this.footer.setContent(" Up/Down: select | Left/Right: fold | Enter: toggle/run | Esc: close/interrupt | h: help | Tab: switch pane | q: exit ");
     }
     updateHeader() {
-        const current = this.currentFlowId ?? this.selectedFlowId;
+        const current = this.currentFlowId ?? this.selectedHeaderLabel();
         const pathParts = this.options.cwd.split(path.sep).filter(Boolean);
         const folderName = pathParts.slice(-3).join("/") || this.options.cwd;
         const branchLabel = this.options.gitBranchName ? this.options.gitBranchName : "detached-head";
         const flowLabel = `${current}${this.busy ? " {yellow-fg}[running]{/yellow-fg}" : ""}`;
         const divider = " {gray-fg}│{/gray-fg} ";
+        const versionLabel = this.version ? `${divider}{bold}Version{/bold} {white-fg}${this.version}{/white-fg}` : "";
         this.header.setContent([
             "{bold}AgentWeaver{/bold}",
             divider,
             `{bold}Scope{/bold} {green-fg}${this.scopeKey}{/green-fg}`,
+            versionLabel,
             this.jiraIssueKey ? `${divider}{bold}Jira{/bold} {yellow-fg}${this.jiraIssueKey}{/yellow-fg}` : "",
             divider,
             `{bold}Flow{/bold} ${flowLabel}`,
@@ -609,24 +749,122 @@ export class InteractiveUi {
         }
         return this.activeFormSession.form.fields[this.activeFormSession.currentFieldIndex] ?? null;
     }
-    renderTextInputValue(value, placeholder) {
-        const rawText = value || placeholder || "Введите текст";
-        const frameWidth = Math.max(36, rawText.length + 6);
+    renderTextInputValue(value, placeholder, rows = 1) {
+        const rawLines = (value || placeholder || "Введите текст").split("\n");
+        const visibleLines = rawLines.slice(0, Math.max(1, rows));
+        const contentWidth = visibleLines.reduce((max, line) => Math.max(max, line.length), 0);
+        const frameWidth = Math.max(36, contentWidth + 6);
         const innerWidth = Math.max(32, frameWidth - 4);
-        const visibleText = rawText.length > innerWidth - 2 ? `${rawText.slice(0, innerWidth - 5)}...` : rawText;
-        const padded = value
-            ? `{white-fg}${visibleText.padEnd(innerWidth - 2, " ")}{/white-fg}`
-            : `{gray-fg}${visibleText.padEnd(innerWidth - 2, " ")}{/gray-fg}`;
-        return [
-            `{cyan-fg}┌${"─".repeat(frameWidth - 2)}┐{/cyan-fg}`,
-            `{cyan-fg}│{/cyan-fg}{black-bg} {green-fg}>{/green-fg} ${padded} {/black-bg}{cyan-fg}│{/cyan-fg}`,
-            `{cyan-fg}└${"─".repeat(frameWidth - 2)}┘{/cyan-fg}`,
-        ];
+        const renderedRows = Array.from({ length: Math.max(1, rows) }, (_, index) => {
+            const rawLine = visibleLines[index] ?? "";
+            const visibleText = rawLine.length > innerWidth - 2 ? `${rawLine.slice(0, innerWidth - 5)}...` : rawLine;
+            const color = value ? "white-fg" : "gray-fg";
+            return `{cyan-fg}│{/cyan-fg}{black-bg} ${index === 0 ? "{green-fg}>{/green-fg}" : " "} {${color}}${visibleText.padEnd(innerWidth - 2, " ")}{/${color}} {/black-bg}{cyan-fg}│{/cyan-fg}`;
+        });
+        return [`{cyan-fg}┌${"─".repeat(frameWidth - 2)}┐{/cyan-fg}`, ...renderedRows, `{cyan-fg}└${"─".repeat(frameWidth - 2)}┘{/cyan-fg}`];
+    }
+    formModalInnerHeight() {
+        const rawHeight = typeof this.formModal.height === "number" ? this.formModal.height : this.formModal?.lpos?.yi
+            ? this.formModal.lpos.yl - this.formModal.lpos.yi + 1
+            : 0;
+        const paddingTop = Number(this.formModal.padding?.top ?? 0);
+        const paddingBottom = Number(this.formModal.padding?.bottom ?? 0);
+        return Math.max(6, rawHeight - 2 - paddingTop - paddingBottom);
+    }
+    formModalInnerWidth() {
+        const rawWidth = typeof this.formModal.width === "number" ? this.formModal.width : this.formModal?.lpos?.xi
+            ? this.formModal.lpos.xl - this.formModal.lpos.xi + 1
+            : 0;
+        const paddingLeft = Number(this.formModal.padding?.left ?? 0);
+        const paddingRight = Number(this.formModal.padding?.right ?? 0);
+        return Math.max(24, rawWidth - 2 - paddingLeft - paddingRight);
+    }
+    wrapFormText(text, width) {
+        const normalized = text.trim();
+        if (!normalized) {
+            return [""];
+        }
+        const wrapped = [];
+        for (const paragraph of normalized.split("\n")) {
+            if (!paragraph.trim()) {
+                wrapped.push("");
+                continue;
+            }
+            let remaining = paragraph.trim();
+            while (remaining.length > width) {
+                let splitAt = remaining.lastIndexOf(" ", width);
+                if (splitAt <= 0) {
+                    splitAt = width;
+                }
+                wrapped.push(remaining.slice(0, splitAt).trimEnd());
+                remaining = remaining.slice(splitAt).trimStart();
+            }
+            wrapped.push(remaining);
+        }
+        return wrapped.length > 0 ? wrapped : [""];
+    }
+    renderSelectableFieldWindow(field, value, currentOptionIndex, availableLines) {
+        const contentWidth = this.formModalInnerWidth();
+        const firstLineWidth = Math.max(12, contentWidth - 6);
+        const continuationWidth = Math.max(8, contentWidth - 6);
+        const descriptionWidth = Math.max(8, contentWidth - 4);
+        const renderedOptions = field.options.map((option, index) => {
+            const isCursor = index === currentOptionIndex;
+            const isSelected = field.type === "single-select"
+                ? value === option.value
+                : Array.isArray(value) && value.includes(option.value);
+            const cursor = isCursor ? "{cyan-fg}>{/cyan-fg}" : " ";
+            const marker = isSelected ? "[x]" : "[ ]";
+            const labelLines = this.wrapFormText(option.label, firstLineWidth);
+            const itemLines = [`${cursor} ${marker} ${labelLines[0] ?? ""}`];
+            for (const continuation of labelLines.slice(1)) {
+                itemLines.push(`      ${continuation.slice(0, continuationWidth)}`);
+            }
+            if (option.description?.trim()) {
+                for (const descriptionLine of this.wrapFormText(option.description, descriptionWidth)) {
+                    itemLines.push(`    {gray-fg}${descriptionLine}{/gray-fg}`);
+                }
+            }
+            return itemLines;
+        });
+        if (renderedOptions.length === 0) {
+            return ["{gray-fg}Нет доступных вариантов.{/gray-fg}"];
+        }
+        let startIndex = 0;
+        let selectedStartLine = 0;
+        for (let index = 0; index < currentOptionIndex; index += 1) {
+            selectedStartLine += renderedOptions[index]?.length ?? 0;
+        }
+        let visibleLines = 0;
+        for (let index = 0; index < renderedOptions.length; index += 1) {
+            const itemHeight = renderedOptions[index]?.length ?? 0;
+            if (index < currentOptionIndex && selectedStartLine + itemHeight > availableLines) {
+                startIndex = index + 1;
+                selectedStartLine -= itemHeight;
+            }
+        }
+        const output = [];
+        for (let index = startIndex; index < renderedOptions.length; index += 1) {
+            const itemLines = renderedOptions[index] ?? [];
+            if (output.length > 0 && output.length + itemLines.length > availableLines) {
+                break;
+            }
+            if (output.length === 0 && itemLines.length > availableLines) {
+                output.push(...itemLines.slice(0, availableLines));
+                break;
+            }
+            output.push(...itemLines);
+            visibleLines += itemLines.length;
+            if (visibleLines >= availableLines) {
+                break;
+            }
+        }
+        return output;
     }
     renderActiveForm() {
         if (!this.activeFormSession) {
             this.formModal.hide();
-            this.footer.setContent(" Up/Down: select flow | Enter: confirm run | h: help | Tab: switch pane | q: exit ");
+            this.footer.setContent(" Up/Down: select | Left/Right: fold | Enter: toggle/run | Esc: close/interrupt | h: help | Tab: switch pane | q: exit ");
             this.requestRender();
             return;
         }
@@ -635,18 +873,20 @@ export class InteractiveUi {
         if (!field) {
             return;
         }
-        const lines = [`{bold}${session.form.title}{/bold}`];
+        const headerLines = [`{bold}${session.form.title}{/bold}`];
         if (session.form.description?.trim()) {
-            lines.push("");
-            lines.push(session.form.description.trim());
+            headerLines.push("");
+            headerLines.push(session.form.description.trim());
         }
-        lines.push("");
-        lines.push(`Field ${session.currentFieldIndex + 1}/${session.form.fields.length}`);
-        lines.push(`{yellow-fg}${field.label}{/yellow-fg}`);
+        headerLines.push("");
+        headerLines.push(`Field ${session.currentFieldIndex + 1}/${session.form.fields.length}`);
+        headerLines.push(`{yellow-fg}${field.label}{/yellow-fg}`);
         if (field.help?.trim()) {
-            lines.push(field.help.trim());
+            headerLines.push(field.help.trim());
         }
-        lines.push("");
+        headerLines.push("");
+        const footerLines = ["", "{green-fg}Ctrl+S{/green-fg}: submit", "{magenta-fg}Shift+Tab{/magenta-fg}: previous field", "{red-fg}Esc{/red-fg}: cancel"];
+        const lines = [...headerLines];
         if (field.type === "boolean") {
             const current = session.values[field.id] === true;
             lines.push(`${current ? "[x]" : "[ ]"} ${field.label}`);
@@ -656,37 +896,24 @@ export class InteractiveUi {
         }
         else if (field.type === "text") {
             const current = String(session.values[field.id] ?? "");
-            lines.push(...this.renderTextInputValue(current, field.placeholder));
+            lines.push(...this.renderTextInputValue(current, field.placeholder, field.multiline ? Math.max(1, field.rows ?? 3) : 1));
             lines.push("");
-            lines.push("Type text, Backspace: delete");
-            lines.push("Enter/Tab: next field");
+            lines.push(field.multiline ? "Type text, Enter: new line, Backspace: delete" : "Type text, Backspace: delete");
+            lines.push("Tab: next field");
         }
         else {
             const currentOptionIndex = Math.min(session.currentOptionIndex, Math.max(0, field.options.length - 1));
             session.currentOptionIndex = currentOptionIndex;
-            field.options.forEach((option, index) => {
-                const isCursor = index === currentOptionIndex;
-                const value = session.values[field.id];
-                const isSelected = field.type === "single-select"
-                    ? value === option.value
-                    : Array.isArray(value) && value.includes(option.value);
-                const cursor = isCursor ? "{cyan-fg}>{/cyan-fg}" : " ";
-                const marker = isSelected ? "[x]" : "[ ]";
-                lines.push(`${cursor} ${marker} ${option.label}`);
-                if (option.description?.trim()) {
-                    lines.push(`    {gray-fg}${option.description.trim()}{/gray-fg}`);
-                }
-            });
+            const availableLines = Math.max(3, this.formModalInnerHeight() - headerLines.length - footerLines.length - 3);
+            lines.push(...this.renderSelectableFieldWindow(field, session.values[field.id], currentOptionIndex, availableLines));
             lines.push("");
             lines.push("Up/Down: move");
             lines.push("Space: select/toggle");
             lines.push("Enter/Tab: next field");
         }
-        lines.push("");
-        lines.push("{green-fg}Ctrl+S{/green-fg}: submit");
-        lines.push("{magenta-fg}Shift+Tab{/magenta-fg}: previous field");
-        lines.push("{red-fg}Esc{/red-fg}: cancel");
+        lines.push(...footerLines);
         this.formModal.setContent(lines.join("\n"));
+        this.formModal.setScroll(0);
         this.formModal.show();
         this.formModal.setFront();
         this.formModal.focus();
@@ -744,7 +971,7 @@ export class InteractiveUi {
             this.renderActiveForm();
         }
     }
-    appendActiveFormText(ch, key) {
+    appendActiveFormText(ch, key, appendNewline = false) {
         const session = this.activeFormSession;
         const field = this.currentFormField();
         if (!session || !field || field.type !== "text") {
@@ -756,6 +983,11 @@ export class InteractiveUi {
             this.renderActiveForm();
             return;
         }
+        if (appendNewline) {
+            session.values[field.id] = `${current}\n`;
+            this.renderActiveForm();
+            return;
+        }
         if (key.ctrl || key.meta || !ch || ch === "\r" || ch === "\n" || ch === "\t") {
             return;
         }
@@ -796,6 +1028,17 @@ export class InteractiveUi {
         session.reject(new TaskRunnerError(`User cancelled form '${session.form.formId}'.`));
         this.renderActiveForm();
     }
+    interruptActiveForm(message = "Flow interrupted by user.") {
+        if (!this.activeFormSession) {
+            return;
+        }
+        const session = this.activeFormSession;
+        this.activeFormSession = null;
+        this.formModal.hide();
+        this.focusPane("flows");
+        session.reject(new FlowInterruptedError(message));
+        this.renderActiveForm();
+    }
     handleActiveFormKey(ch, key) {
         const field = this.currentFormField();
         if (!field) {
@@ -819,7 +1062,12 @@ export class InteractiveUi {
         }
         if (field.type === "text") {
             if (key.name === "enter") {
-                this.moveActiveFormField(1);
+                if (field.multiline) {
+                    this.appendActiveFormText(ch, key, true);
+                }
+                else {
+                    this.moveActiveFormField(1);
+                }
                 return;
             }
             this.appendActiveFormText(ch, key);
@@ -855,22 +1103,33 @@ export class InteractiveUi {
         }
     }
     renderDescription() {
-        const flow = this.flowMap.get(this.selectedFlowId);
-        const description = flow?.description?.trim() || "Описание для этого flow пока не задано.";
+        const selectedItem = this.selectedFlowTreeItem();
+        if (!selectedItem) {
+            this.description.setContent("Flow structure is not available.");
+            return;
+        }
+        if (selectedItem.kind === "folder") {
+            const kindLabel = selectedItem.pathSegments[0] === "custom" ? "project-local" : "built-in";
+            const folderDescription = [
+                `Папка flow \`${selectedItem.pathSegments.join("/")}\`.`,
+                "",
+                `Источник: ${kindLabel}`,
+                `Статус: ${this.expandedFlowFolders.has(selectedItem.key) ? "развёрнута" : "свёрнута"}`,
+            ].join("\n");
+            this.description.setContent(renderMarkdownToTerminal(stripAnsi(folderDescription)));
+            return;
+        }
+        const { flow } = selectedItem;
+        const description = flow.description?.trim() || "Описание для этого flow пока не задано.";
         const details = [
-            flow ? `Источник: ${flow.source === "project-local" ? "project-local" : "built-in"}` : "",
-            flow?.source === "project-local" && flow.sourcePath ? `Файл: ${flow.sourcePath}` : "",
+            `Путь: ${flow.treePath.join("/")}`,
+            `Источник: ${flow.source === "project-local" ? "project-local" : "built-in"}`,
+            flow.source === "project-local" && flow.sourcePath ? `Файл: ${flow.sourcePath}` : "",
         ]
             .filter((line) => line.length > 0)
             .join("\n");
         this.description.setContent(renderMarkdownToTerminal(stripAnsi(details ? `${description}\n\n${details}` : description)));
     }
-    renderFlowListLabel(flow) {
-        if (flow.source === "project-local") {
-            return `{yellow-fg}${flow.label}{/yellow-fg}`;
-        }
-        return flow.label;
-    }
     createAdapter() {
         return {
             writeStdout: (text) => {
@@ -897,13 +1156,19 @@ export class InteractiveUi {
         return this.currentFlowId ?? this.selectedFlowId;
     }
     progressFlowDefinition() {
-        const preferredFlowId = this.busy ? this.activeFlowId() : this.selectedFlowId;
-        return this.flowMap.get(preferredFlowId);
+        if (this.busy) {
+            return this.flowMap.get(this.activeFlowId());
+        }
+        const selectedItem = this.selectedFlowTreeItem();
+        if (selectedItem?.kind === "flow") {
+            return selectedItem.flow;
+        }
+        return undefined;
     }
     renderProgress() {
         const flow = this.progressFlowDefinition();
         if (!flow) {
-            this.progress.setContent("Flow structure is not available.");
+            this.progress.setContent("Выберите конкретный flow в дереве, чтобы увидеть его прогресс.");
             return;
         }
         const flowState = this.flowState.flowId === flow.id
@@ -1165,34 +1430,47 @@ export class InteractiveUi {
         if (!this.confirmSession) {
             return;
         }
-        const actions = this.confirmSession.resumeAvailable
-            ? ["resume", "restart", "cancel"]
-            : this.confirmSession.hasExistingState
-                ? ["restart", "cancel"]
-                : ["ok", "cancel"];
+        const actions = this.confirmActions();
         const currentIndex = actions.indexOf(this.confirmSession.selectedAction);
         const nextIndex = (currentIndex + delta + actions.length) % actions.length;
         this.confirmSession.selectedAction = (actions[nextIndex] ?? "cancel");
         this.renderConfirm();
     }
+    confirmActions() {
+        if (!this.confirmSession) {
+            return ["cancel"];
+        }
+        if (this.confirmSession.kind === "interrupt") {
+            return ["stop", "cancel"];
+        }
+        return this.confirmSession.resumeAvailable
+            ? ["resume", "restart", "cancel"]
+            : this.confirmSession.hasExistingState
+                ? ["restart", "cancel"]
+                : ["ok", "cancel"];
+    }
     renderConfirm() {
         const session = this.confirmSession;
         if (!session) {
             return;
         }
         const flow = this.flowMap.get(session.flowId);
-        const actions = session.resumeAvailable
-            ? ["resume", "restart", "cancel"]
-            : session.hasExistingState
-                ? ["restart", "cancel"]
-                : ["ok", "cancel"];
+        const actions = this.confirmActions();
         const actionLabels = actions
             .map((action) => {
-            const label = action === "resume" ? "Resume" : action === "restart" ? "Restart" : action === "ok" ? "OK" : "Cancel";
+            const label = action === "stop"
+                ? "Stop"
+                : action === "resume"
+                    ? "Resume"
+                    : action === "restart"
+                        ? "Restart"
+                        : action === "ok"
+                            ? "OK"
+                            : "Cancel";
             return session.selectedAction === action ? `[ ${label} ]` : `  ${label}  `;
         })
             .join("   ");
-        const lines = [`Run flow "${flow?.label ?? session.flowId}"?`];
+        const lines = [session.kind === "interrupt" ? `Interrupt flow "${flow?.label ?? session.flowId}"?` : `Run flow "${flow?.label ?? session.flowId}"?`];
         if (session.details?.trim()) {
             lines.push("", session.details.trim());
         }
@@ -1214,12 +1492,17 @@ export class InteractiveUi {
         this.requestRender();
     }
     async openConfirm() {
-        const flow = this.flowMap.get(this.selectedFlowId);
+        const selectedItem = this.selectedFlowTreeItem();
+        if (!selectedItem || selectedItem.kind !== "flow") {
+            return;
+        }
+        const flow = selectedItem.flow;
         if (!flow) {
             return;
         }
         const confirmation = await this.options.getRunConfirmation(flow.id);
         this.confirmSession = {
+            kind: "run",
             flowId: flow.id,
             resumeAvailable: confirmation.resumeAvailable,
             hasExistingState: confirmation.hasExistingState,
@@ -1228,6 +1511,21 @@ export class InteractiveUi {
         };
         this.renderConfirm();
     }
+    openInterruptConfirm() {
+        const flowId = this.currentFlowId;
+        if (!flowId || this.confirm.visible) {
+            return;
+        }
+        this.confirmSession = {
+            kind: "interrupt",
+            flowId,
+            resumeAvailable: true,
+            hasExistingState: true,
+            details: "Текущий flow будет остановлен. Состояние сохранится, и его можно будет продолжить через Resume.",
+            selectedAction: "stop",
+        };
+        this.renderConfirm();
+    }
     closeConfirm() {
         this.confirmSession = null;
         this.confirm.hide();
@@ -1364,6 +1662,116 @@ export class InteractiveUi {
         this.renderProgress();
         this.requestRender();
     }
+    computeVisibleFlowItems() {
+        const items = [];
+        const walk = (nodes, depth) => {
+            for (const node of nodes) {
+                if (node.kind === "folder") {
+                    items.push({
+                        kind: "folder",
+                        key: node.key,
+                        name: node.name,
+                        depth,
+                        pathSegments: [...node.pathSegments],
+                    });
+                    if (this.expandedFlowFolders.has(node.key)) {
+                        walk(node.children, depth + 1);
+                    }
+                    continue;
+                }
+                items.push({
+                    kind: "flow",
+                    key: node.key,
+                    name: node.name,
+                    depth,
+                    pathSegments: [...node.pathSegments],
+                    flow: node.flow,
+                });
+            }
+        };
+        walk(this.flowTree, 0);
+        return items;
+    }
+    selectedFlowTreeItem() {
+        return this.visibleFlowItems.find((item) => item.key === this.selectedFlowItemKey);
+    }
+    selectedHeaderLabel() {
+        const selectedItem = this.selectedFlowTreeItem();
+        if (!selectedItem) {
+            return this.selectedFlowId;
+        }
+        return selectedItem.kind === "folder" ? selectedItem.pathSegments.join("/") : selectedItem.flow.label;
+    }
+    refreshVisibleFlowItems() {
+        this.visibleFlowItems = this.computeVisibleFlowItems();
+        if (!this.visibleFlowItems.some((item) => item.key === this.selectedFlowItemKey)) {
+            this.selectedFlowItemKey = this.visibleFlowItems[0]?.key ?? makeFlowKey(this.selectedFlowId);
+        }
+        const selectedItem = this.selectedFlowTreeItem();
+        if (selectedItem?.kind === "flow") {
+            this.selectedFlowId = selectedItem.flow.id;
+        }
+    }
+    renderFlowTreeList() {
+        this.refreshVisibleFlowItems();
+        this.flowList.setItems(this.visibleFlowItems.map((item) => this.renderFlowTreeLabel(item)));
+        const selectedIndex = this.visibleFlowItems.findIndex((item) => item.key === this.selectedFlowItemKey);
+        this.flowList.select(selectedIndex >= 0 ? selectedIndex : 0);
+    }
+    renderFlowTreeLabel(item) {
+        const indent = "  ".repeat(item.depth);
+        if (item.kind === "folder") {
+            const expanded = this.expandedFlowFolders.has(item.key);
+            const color = "cyan";
+            return `${indent}{${color}-fg}${expanded ? "▾" : "▸"} ${item.name}{/${color}-fg}`;
+        }
+        const color = "white";
+        return `${indent}{${color}-fg}• ${item.name}{/${color}-fg}`;
+    }
+    toggleFlowFolder(folderKey) {
+        if (this.expandedFlowFolders.has(folderKey)) {
+            this.expandedFlowFolders.delete(folderKey);
+        }
+        else {
+            this.expandedFlowFolders.add(folderKey);
+        }
+        this.renderFlowTreeList();
+        this.renderDescription();
+        this.renderProgress();
+        this.updateHeader();
+        this.requestRender();
+    }
+    expandSelectedFlowFolder() {
+        const selectedItem = this.selectedFlowTreeItem();
+        if (!selectedItem || selectedItem.kind !== "folder" || this.expandedFlowFolders.has(selectedItem.key)) {
+            return;
+        }
+        this.toggleFlowFolder(selectedItem.key);
+    }
+    collapseSelectedFlowFolderOrSelectParent() {
+        const selectedItem = this.selectedFlowTreeItem();
+        if (!selectedItem) {
+            return;
+        }
+        if (selectedItem.kind === "folder" && this.expandedFlowFolders.has(selectedItem.key)) {
+            this.toggleFlowFolder(selectedItem.key);
+            return;
+        }
+        const parentPath = selectedItem.pathSegments.slice(0, -1);
+        if (parentPath.length === 0) {
+            return;
+        }
+        const parentKey = makeFolderKey(parentPath);
+        if (!this.visibleFlowItems.some((item) => item.key === parentKey)) {
+            return;
+        }
+        this.selectedFlowItemKey = parentKey;
+        this.renderFlowTreeList();
+        this.renderDescription();
+        this.renderProgress();
+        this.updateHeader();
+        this.requestRender();
+    }
     updateRunningPanel() {
         const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
         const running = this.busy || this.currentNode !== null || this.currentExecutor !== null;