agentweaver 0.1.11 → 0.1.12

package/dist/interactive-ui.js

@@ -15,6 +15,28 @@ function makeFolderKey(pathSegments) {
 function makeFlowKey(flowId) {
     return `flow:${flowId}`;
 }
+function escapeBlessedTags(text) {
+    return text.replace(/[{}]/g, (ch) => (ch === "{" ? "{open}" : "{close}"));
+}
+function textIndexToLineColumn(value, index) {
+    const boundedIndex = Math.max(0, Math.min(value.length, index));
+    const beforeCursor = value.slice(0, boundedIndex);
+    const lines = beforeCursor.split("\n");
+    return {
+        line: Math.max(0, lines.length - 1),
+        column: (lines[lines.length - 1] ?? "").length,
+    };
+}
+function textLineColumnToIndex(value, line, column) {
+    const lines = value.split("\n");
+    const boundedLine = Math.max(0, Math.min(lines.length - 1, line));
+    let index = 0;
+    for (let currentLine = 0; currentLine < boundedLine; currentLine += 1) {
+        index += (lines[currentLine] ?? "").length + 1;
+    }
+    const targetLine = lines[boundedLine] ?? "";
+    return index + Math.max(0, Math.min(targetLine.length, column));
+}
 function buildFlowTree(flows) {
     const roots = new Map();
     const ensureFolder = (pathSegments) => {
@@ -114,6 +136,11 @@ export class InteractiveUi {
     help;
     confirm;
     formModal;
+    formLineInput;
+    formTextInput;
+    formBooleanInput;
+    formSelectInput;
+    formHint;
     flowMap;
     flowTree;
     expandedFlowFolders = new Set();
@@ -283,6 +310,86 @@ export class InteractiveUi {
                 fg: "white",
             },
         });
+        this.formLineInput = blessed.box({
+            parent: this.formModal,
+            top: 0,
+            left: 0,
+            width: "100%-2",
+            height: 3,
+            hidden: true,
+            tags: true,
+            border: "line",
+            style: {
+                border: { fg: "cyan" },
+                fg: "white",
+            },
+        });
+        this.formTextInput = blessed.box({
+            parent: this.formModal,
+            top: 0,
+            left: 0,
+            width: "100%-2",
+            height: 3,
+            hidden: true,
+            tags: true,
+            mouse: true,
+            border: "line",
+            style: {
+                border: { fg: "cyan" },
+                fg: "white",
+            },
+        });
+        this.formBooleanInput = blessed.checkbox({
+            parent: this.formModal,
+            top: 0,
+            left: 0,
+            width: "100%-2",
+            height: 3,
+            hidden: true,
+            mouse: true,
+            keys: true,
+            vi: true,
+            border: "line",
+            style: {
+                border: { fg: "cyan" },
+                fg: "white",
+            },
+        });
+        this.formSelectInput = blessed.list({
+            parent: this.formModal,
+            top: 0,
+            left: 0,
+            width: "100%-2",
+            height: 8,
+            hidden: true,
+            tags: true,
+            mouse: true,
+            keys: true,
+            vi: true,
+            border: "line",
+            scrollable: true,
+            alwaysScroll: true,
+            style: {
+                border: { fg: "cyan" },
+                fg: "white",
+                selected: {
+                    fg: "black",
+                    bg: "green",
+                },
+            },
+        });
+        this.formHint = blessed.box({
+            parent: this.formModal,
+            top: 0,
+            left: 1,
+            width: "100%-4",
+            height: 2,
+            hidden: true,
+            tags: true,
+            style: {
+                fg: "gray",
+            },
+        });
         this.description = blessed.box({
             parent: this.screen,
             bottom: 6,
@@ -749,20 +856,6 @@ export class InteractiveUi {
         }
         return this.activeFormSession.form.fields[this.activeFormSession.currentFieldIndex] ?? null;
     }
-    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 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
@@ -779,91 +872,14 @@ export class InteractiveUi {
         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.hideFormLineInput();
+            this.hideFormTextInput();
+            this.hideFormBooleanInput();
+            this.hideFormSelectInput();
+            this.hideFormHint();
             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;
@@ -873,6 +889,7 @@ export class InteractiveUi {
         if (!field) {
             return;
         }
+        const isLastField = session.currentFieldIndex >= session.form.fields.length - 1;
         const headerLines = [`{bold}${session.form.title}{/bold}`];
         if (session.form.description?.trim()) {
             headerLines.push("");
@@ -885,58 +902,321 @@ export class InteractiveUi {
             headerLines.push(field.help.trim());
         }
         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 helperLines = [];
         const lines = [...headerLines];
+        let footerHint = ` Form: Enter ${isLastField ? "submit" : "confirm"} | Tab next | Shift+Tab prev | Esc cancel `;
+        let hintLines = [];
         if (field.type === "boolean") {
+            this.hideFormLineInput();
+            this.hideFormTextInput();
+            this.hideFormSelectInput();
+            helperLines.push("{cyan-fg}Use the checkbox below.{/cyan-fg}");
+            this.ensureFormBooleanInputVisible(headerLines.length + helperLines.length, 0);
             const current = session.values[field.id] === true;
-            lines.push(`${current ? "[x]" : "[ ]"} ${field.label}`);
-            lines.push("");
-            lines.push("Space: toggle");
-            lines.push("Enter/Tab: next field");
+            this.formBooleanInput.setText(field.label);
+            if (current) {
+                this.formBooleanInput.check();
+            }
+            else {
+                this.formBooleanInput.uncheck();
+            }
+            hintLines = [
+                `Space: toggle | Enter: ${isLastField ? "submit" : "confirm and next"}`,
+                "Tab/Shift+Tab: switch field | Esc: cancel",
+            ];
+            footerHint = ` Form: Space toggle | Enter ${isLastField ? "submit" : "next"} | Tab switch | Esc cancel `;
         }
         else if (field.type === "text") {
+            this.hideFormBooleanInput();
+            this.hideFormSelectInput();
+            helperLines.push("{cyan-fg}Use the standard editor below.{/cyan-fg}");
             const current = String(session.values[field.id] ?? "");
-            lines.push(...this.renderTextInputValue(current, field.placeholder, field.multiline ? Math.max(1, field.rows ?? 3) : 1));
-            lines.push("");
-            lines.push(field.multiline ? "Type text, Enter: new line, Backspace: delete" : "Type text, Backspace: delete");
-            lines.push("Tab: next field");
+            if (field.multiline) {
+                this.hideFormLineInput();
+                this.ensureFormTextInputVisible(field, headerLines.length + helperLines.length, 0);
+                session.currentTextCursorIndex = Math.max(0, Math.min(current.length, session.currentTextCursorIndex));
+                this.renderFormMultilineInput(current || field.placeholder || "", current.length === 0 && Boolean(field.placeholder));
+                hintLines = [
+                    "Enter: newline | Tab/Shift+Tab: switch field",
+                    `Ctrl+S: submit | Esc: cancel`,
+                ];
+                footerHint = " Form: Enter newline | Tab switch | Ctrl+S submit | Esc cancel ";
+            }
+            else {
+                this.hideFormTextInput();
+                this.ensureFormLineInputVisible(headerLines.length + helperLines.length, 0);
+                session.currentTextCursorIndex = Math.max(0, Math.min(current.length, session.currentTextCursorIndex));
+                this.renderFormLineInput(current);
+                hintLines = [
+                    `Left/Right/Home/End: move | Enter: ${isLastField ? "submit" : "confirm and next"}`,
+                    "Tab/Shift+Tab: switch field | Esc: cancel",
+                ];
+                footerHint = ` Form: Type text | Enter ${isLastField ? "submit" : "next"} | Tab switch | Esc cancel `;
+            }
         }
         else {
-            const currentOptionIndex = Math.min(session.currentOptionIndex, Math.max(0, field.options.length - 1));
+            this.hideFormLineInput();
+            this.hideFormTextInput();
+            this.hideFormBooleanInput();
+            helperLines.push("{cyan-fg}Use the list below.{/cyan-fg}");
+            this.ensureFormSelectInputVisible(headerLines.length + helperLines.length, 0);
+            const preferredOptionIndex = field.type === "single-select"
+                ? this.selectedOptionIndexForField(field)
+                : session.currentOptionIndex;
+            const currentOptionIndex = Math.min(preferredOptionIndex, Math.max(0, field.options.length - 1));
             session.currentOptionIndex = currentOptionIndex;
-            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(...footerLines);
+            const selectedValues = field.type === "single-select"
+                ? [String(session.values[field.id] ?? "")]
+                : Array.isArray(session.values[field.id]) ? session.values[field.id] : [];
+            const items = field.options.map((option) => {
+                const isSelected = selectedValues.includes(option.value);
+                const marker = isSelected ? "[x]" : "[ ]";
+                return `${marker} ${option.label}`;
+            });
+            this.formSelectInput.setItems(items);
+            this.formSelectInput.select(currentOptionIndex);
+            hintLines = [
+                `Up/Down: move | Space: ${field.type === "single-select" ? "pick" : "toggle"} | Enter: ${isLastField ? "submit" : "confirm and next"}`,
+                "Tab/Shift+Tab: switch field | Esc: cancel",
+            ];
+            footerHint = ` Form: Up/Down move | Enter ${isLastField ? "submit" : "next"} | Tab switch | Esc cancel `;
+        }
+        lines.push(...helperLines);
         this.formModal.setContent(lines.join("\n"));
         this.formModal.setScroll(0);
         this.formModal.show();
         this.formModal.setFront();
-        this.formModal.focus();
-        this.footer.setContent(" Form: Space select | Tab next | Shift+Tab prev | Ctrl+S submit | Esc cancel ");
+        if (field.type === "text") {
+            if (field.multiline) {
+                this.formTextInput.focus();
+            }
+            else {
+                this.formLineInput.focus();
+            }
+        }
+        else if (field.type === "boolean") {
+            this.formBooleanInput.focus();
+        }
+        else {
+            this.formSelectInput.focus();
+        }
+        this.showFormHint(hintLines);
+        this.footer.setContent(footerHint);
         this.requestRender();
     }
     moveActiveFormField(delta) {
         if (!this.activeFormSession) {
             return;
         }
+        this.syncActiveTextFieldValue();
+        this.syncActiveBooleanFieldValue();
+        this.syncActiveSelectFieldValue();
         const nextIndex = Math.min(this.activeFormSession.form.fields.length - 1, Math.max(0, this.activeFormSession.currentFieldIndex + delta));
         this.activeFormSession.currentFieldIndex = nextIndex;
-        this.activeFormSession.currentOptionIndex = 0;
+        const nextField = this.activeFormSession.form.fields[nextIndex];
+        if (nextField?.type === "text") {
+            const current = String(this.activeFormSession.values[nextField.id] ?? "");
+            this.activeFormSession.currentTextCursorIndex = current.length;
+            this.activeFormSession.currentOptionIndex = 0;
+        }
+        else if (nextField?.type === "single-select" || nextField?.type === "multi-select") {
+            this.activeFormSession.currentTextCursorIndex = 0;
+            this.activeFormSession.currentOptionIndex = this.selectedOptionIndexForField(nextField);
+        }
+        else {
+            this.activeFormSession.currentTextCursorIndex = 0;
+            this.activeFormSession.currentOptionIndex = 0;
+        }
         this.renderActiveForm();
     }
-    moveActiveFormOption(delta) {
+    selectedOptionIndexForField(field) {
+        const session = this.activeFormSession;
+        if (!session || field.options.length === 0) {
+            return 0;
+        }
+        if (field.type === "single-select") {
+            const selectedValue = String(session.values[field.id] ?? "");
+            const selectedIndex = field.options.findIndex((option) => option.value === selectedValue);
+            return selectedIndex >= 0 ? selectedIndex : 0;
+        }
+        const selectedValues = Array.isArray(session.values[field.id]) ? session.values[field.id] : [];
+        const selectedIndex = field.options.findIndex((option) => selectedValues.includes(option.value));
+        return selectedIndex >= 0 ? selectedIndex : 0;
+    }
+    confirmActiveFormField() {
+        const session = this.activeFormSession;
+        if (!session) {
+            return;
+        }
+        this.syncActiveTextFieldValue();
+        this.syncActiveBooleanFieldValue();
+        this.syncActiveSelectFieldValue();
+        if (session.currentFieldIndex >= session.form.fields.length - 1) {
+            this.submitActiveForm();
+            return;
+        }
+        this.moveActiveFormField(1);
+    }
+    ensureFormLineInputVisible(headerLineCount, footerLineCount) {
+        const reservedTop = Math.max(1, headerLineCount + 2);
+        const availableHeight = Math.max(5, this.formModalInnerHeight() - reservedTop - footerLineCount - 2);
+        this.formLineInput.top = reservedTop;
+        this.formLineInput.left = 1;
+        this.formLineInput.width = Math.max(24, this.formModalInnerWidth() - 4);
+        this.formLineInput.height = Math.min(3, availableHeight);
+        this.formLineInput.show();
+        this.formLineInput.setFront();
+        this.formLineInput.focus();
+        this.positionFormHint(this.formLineInput.top + this.formLineInput.height);
+    }
+    ensureFormTextInputVisible(field, headerLineCount, footerLineCount) {
+        const reservedTop = Math.max(1, headerLineCount + 2);
+        const availableHeight = Math.max(5, this.formModalInnerHeight() - reservedTop - footerLineCount - 2);
+        const desiredRows = field.multiline ? Math.max(3, field.rows ?? 3) : 1;
+        const inputHeight = Math.min(Math.max(3, availableHeight - 2), desiredRows + 2);
+        this.formTextInput.top = reservedTop;
+        this.formTextInput.left = 1;
+        this.formTextInput.width = Math.max(24, this.formModalInnerWidth() - 4);
+        this.formTextInput.height = inputHeight;
+        this.formTextInput.show();
+        this.formTextInput.setFront();
+        this.formTextInput.focus();
+        this.positionFormHint(this.formTextInput.top + this.formTextInput.height);
+    }
+    renderFormLineInput(value) {
+        const session = this.activeFormSession;
+        if (!session) {
+            return;
+        }
+        const totalWidth = typeof this.formLineInput.width === "number" ? this.formLineInput.width : this.formModalInnerWidth();
+        const innerWidth = Math.max(1, totalWidth - 2);
+        const cursorIndex = Math.max(0, Math.min(value.length, session.currentTextCursorIndex));
+        session.currentTextCursorIndex = cursorIndex;
+        const visibleStart = Math.max(0, cursorIndex - innerWidth + 1);
+        const visibleValue = value.slice(visibleStart, visibleStart + innerWidth);
+        const cursorOffset = cursorIndex - visibleStart;
+        const beforeCursor = escapeBlessedTags(visibleValue.slice(0, Math.max(0, cursorOffset)));
+        const cursorChar = visibleValue[cursorOffset] ?? " ";
+        const afterCursor = escapeBlessedTags(visibleValue.slice(Math.min(visibleValue.length, cursorOffset + 1)));
+        this.formLineInput.setContent(`${beforeCursor}{inverse}${escapeBlessedTags(cursorChar)}{/inverse}${afterCursor}`);
+    }
+    renderFormMultilineInput(value, dimmed = false) {
+        const session = this.activeFormSession;
+        if (!session) {
+            return;
+        }
+        const totalWidth = typeof this.formTextInput.width === "number" ? this.formTextInput.width : this.formModalInnerWidth();
+        const totalHeight = typeof this.formTextInput.height === "number" ? this.formTextInput.height : 3;
+        const innerWidth = Math.max(1, totalWidth - 2);
+        const innerHeight = Math.max(1, totalHeight - 2);
+        const cursorIndex = Math.max(0, Math.min(value.length, session.currentTextCursorIndex));
+        session.currentTextCursorIndex = cursorIndex;
+        const cursor = textIndexToLineColumn(value, cursorIndex);
+        const sourceLines = value.split("\n");
+        const visibleStartLine = Math.max(0, cursor.line - innerHeight + 1);
+        const visibleLines = sourceLines.slice(visibleStartLine, visibleStartLine + innerHeight);
+        const renderedLines = visibleLines.map((lineText, visibleLineIndex) => {
+            const absoluteLineIndex = visibleStartLine + visibleLineIndex;
+            const isCursorLine = absoluteLineIndex === cursor.line;
+            const startColumn = isCursorLine && cursor.column >= innerWidth ? cursor.column - innerWidth + 1 : 0;
+            const visibleText = lineText.slice(startColumn, startColumn + innerWidth);
+            if (!isCursorLine) {
+                return escapeBlessedTags(visibleText);
+            }
+            const cursorOffset = cursor.column - startColumn;
+            const beforeCursor = escapeBlessedTags(visibleText.slice(0, Math.max(0, cursorOffset)));
+            const cursorChar = visibleText[cursorOffset] ?? " ";
+            const afterCursor = escapeBlessedTags(visibleText.slice(Math.min(visibleText.length, cursorOffset + 1)));
+            return `${beforeCursor}{inverse}${escapeBlessedTags(cursorChar)}{/inverse}${afterCursor}`;
+        });
+        const rendered = renderedLines.join("\n");
+        this.formTextInput.setContent(dimmed ? `{gray-fg}${rendered}{/gray-fg}` : rendered);
+    }
+    ensureFormBooleanInputVisible(headerLineCount, footerLineCount) {
+        const reservedTop = Math.max(1, headerLineCount + 2);
+        const availableHeight = Math.max(5, this.formModalInnerHeight() - reservedTop - footerLineCount - 2);
+        this.formBooleanInput.top = reservedTop;
+        this.formBooleanInput.left = 1;
+        this.formBooleanInput.width = Math.max(24, this.formModalInnerWidth() - 4);
+        this.formBooleanInput.height = Math.min(4, availableHeight);
+        this.formBooleanInput.show();
+        this.formBooleanInput.setFront();
+        this.formBooleanInput.focus();
+        this.positionFormHint(this.formBooleanInput.top + this.formBooleanInput.height);
+    }
+    ensureFormSelectInputVisible(headerLineCount, footerLineCount) {
+        const reservedTop = Math.max(1, headerLineCount + 2);
+        const availableHeight = Math.max(6, this.formModalInnerHeight() - reservedTop - footerLineCount - 2);
+        this.formSelectInput.top = reservedTop;
+        this.formSelectInput.left = 1;
+        this.formSelectInput.width = Math.max(24, this.formModalInnerWidth() - 4);
+        this.formSelectInput.height = Math.max(4, availableHeight - 2);
+        this.formSelectInput.show();
+        this.formSelectInput.setFront();
+        this.formSelectInput.focus();
+        this.positionFormHint(this.formSelectInput.top + this.formSelectInput.height);
+    }
+    positionFormHint(top) {
+        this.formHint.top = top;
+        this.formHint.left = 1;
+        this.formHint.width = Math.max(24, this.formModalInnerWidth() - 4);
+        this.formHint.height = 2;
+    }
+    showFormHint(lines) {
+        this.formHint.setContent(lines.join("\n"));
+        this.formHint.show();
+        this.formHint.setFront();
+    }
+    hideFormLineInput() {
+        this.formLineInput.hide();
+        if (typeof this.formLineInput.blur === "function") {
+            this.formLineInput.blur();
+        }
+    }
+    hideFormTextInput() {
+        this.formTextInput.hide();
+        if (typeof this.formTextInput.blur === "function") {
+            this.formTextInput.blur();
+        }
+    }
+    hideFormBooleanInput() {
+        this.formBooleanInput.hide();
+        if (typeof this.formBooleanInput.blur === "function") {
+            this.formBooleanInput.blur();
+        }
+    }
+    hideFormSelectInput() {
+        this.formSelectInput.hide();
+        if (typeof this.formSelectInput.blur === "function") {
+            this.formSelectInput.blur();
+        }
+    }
+    hideFormHint() {
+        this.formHint.hide();
+    }
+    syncActiveTextFieldValue() {
+        const session = this.activeFormSession;
         const field = this.currentFormField();
-        if (!this.activeFormSession || !field || (field.type !== "single-select" && field.type !== "multi-select")) {
+        if (!session || !field || field.type !== "text") {
             return;
         }
-        const nextIndex = Math.min(field.options.length - 1, Math.max(0, this.activeFormSession.currentOptionIndex + delta));
-        this.activeFormSession.currentOptionIndex = nextIndex;
-        this.renderActiveForm();
+    }
+    syncActiveBooleanFieldValue() {
+        const session = this.activeFormSession;
+        const field = this.currentFormField();
+        if (!session || !field || field.type !== "boolean") {
+            return;
+        }
+        session.values[field.id] = this.formBooleanInput.checked === true;
+    }
+    syncActiveSelectFieldValue() {
+        const session = this.activeFormSession;
+        const field = this.currentFormField();
+        if (!session || !field || (field.type !== "single-select" && field.type !== "multi-select")) {
+            return;
+        }
+        const selectedIndex = this.formSelectInput.selected ?? session.currentOptionIndex;
+        session.currentOptionIndex = Math.max(0, Math.min(field.options.length - 1, selectedIndex));
     }
     toggleActiveFormValue() {
         const session = this.activeFormSession;
@@ -949,6 +1229,7 @@ export class InteractiveUi {
             this.renderActiveForm();
             return;
         }
+        this.syncActiveSelectFieldValue();
         if (field.type === "single-select") {
             const option = field.options[session.currentOptionIndex];
             if (!option) {
@@ -971,33 +1252,13 @@ export class InteractiveUi {
             this.renderActiveForm();
         }
     }
-    appendActiveFormText(ch, key, appendNewline = false) {
-        const session = this.activeFormSession;
-        const field = this.currentFormField();
-        if (!session || !field || field.type !== "text") {
-            return;
-        }
-        const current = String(session.values[field.id] ?? "");
-        if (key.name === "backspace") {
-            session.values[field.id] = current.slice(0, -1);
-            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;
-        }
-        session.values[field.id] = `${current}${ch}`;
-        this.renderActiveForm();
-    }
     submitActiveForm() {
         if (!this.activeFormSession) {
             return;
         }
+        this.syncActiveTextFieldValue();
+        this.syncActiveBooleanFieldValue();
+        this.syncActiveSelectFieldValue();
         const session = this.activeFormSession;
         try {
             validateUserInputValues(session.form, session.values);
@@ -1008,6 +1269,10 @@ export class InteractiveUi {
             };
             this.activeFormSession = null;
             this.formModal.hide();
+            this.hideFormLineInput();
+            this.hideFormTextInput();
+            this.hideFormBooleanInput();
+            this.hideFormSelectInput();
             this.focusPane("flows");
             session.resolve(result);
             this.renderActiveForm();
@@ -1024,6 +1289,10 @@ export class InteractiveUi {
         const session = this.activeFormSession;
         this.activeFormSession = null;
         this.formModal.hide();
+        this.hideFormLineInput();
+        this.hideFormTextInput();
+        this.hideFormBooleanInput();
+        this.hideFormSelectInput();
         this.focusPane("flows");
         session.reject(new TaskRunnerError(`User cancelled form '${session.form.formId}'.`));
         this.renderActiveForm();
@@ -1035,6 +1304,10 @@ export class InteractiveUi {
         const session = this.activeFormSession;
         this.activeFormSession = null;
         this.formModal.hide();
+        this.hideFormLineInput();
+        this.hideFormTextInput();
+        this.hideFormBooleanInput();
+        this.hideFormSelectInput();
         this.focusPane("flows");
         session.reject(new FlowInterruptedError(message));
         this.renderActiveForm();
@@ -1061,16 +1334,153 @@ export class InteractiveUi {
             return;
         }
         if (field.type === "text") {
+            if (!field.multiline) {
+                const session = this.activeFormSession;
+                if (!session) {
+                    return;
+                }
+                const current = String(session.values[field.id] ?? "");
+                if (key.name === "enter") {
+                    this.confirmActiveFormField();
+                    return;
+                }
+                if (key.name === "left") {
+                    session.currentTextCursorIndex = Math.max(0, session.currentTextCursorIndex - 1);
+                    this.renderFormLineInput(current);
+                    this.requestRender();
+                    return;
+                }
+                if (key.name === "right") {
+                    session.currentTextCursorIndex = Math.min(current.length, session.currentTextCursorIndex + 1);
+                    this.renderFormLineInput(current);
+                    this.requestRender();
+                    return;
+                }
+                if (key.name === "home") {
+                    session.currentTextCursorIndex = 0;
+                    this.renderFormLineInput(current);
+                    this.requestRender();
+                    return;
+                }
+                if (key.name === "end") {
+                    session.currentTextCursorIndex = current.length;
+                    this.renderFormLineInput(current);
+                    this.requestRender();
+                    return;
+                }
+                if (key.name === "backspace") {
+                    if (session.currentTextCursorIndex > 0) {
+                        const nextValue = `${current.slice(0, session.currentTextCursorIndex - 1)}${current.slice(session.currentTextCursorIndex)}`;
+                        session.currentTextCursorIndex -= 1;
+                        session.values[field.id] = nextValue;
+                        this.renderFormLineInput(nextValue);
+                        this.requestRender();
+                    }
+                    return;
+                }
+                if (key.name === "delete") {
+                    if (session.currentTextCursorIndex < current.length) {
+                        const nextValue = `${current.slice(0, session.currentTextCursorIndex)}${current.slice(session.currentTextCursorIndex + 1)}`;
+                        session.values[field.id] = nextValue;
+                        this.renderFormLineInput(nextValue);
+                        this.requestRender();
+                    }
+                    return;
+                }
+                if (ch && !key.ctrl && !key.meta && !/^[\x00-\x1f\x7f]$/.test(ch)) {
+                    const nextValue = `${current.slice(0, session.currentTextCursorIndex)}${ch}${current.slice(session.currentTextCursorIndex)}`;
+                    session.currentTextCursorIndex += ch.length;
+                    session.values[field.id] = nextValue;
+                    this.renderFormLineInput(nextValue);
+                    this.requestRender();
+                }
+                return;
+            }
             if (key.name === "enter") {
-                if (field.multiline) {
-                    this.appendActiveFormText(ch, key, true);
+                const session = this.activeFormSession;
+                if (!session) {
+                    return;
+                }
+                const current = String(session.values[field.id] ?? "");
+                const nextValue = `${current.slice(0, session.currentTextCursorIndex)}\n${current.slice(session.currentTextCursorIndex)}`;
+                session.currentTextCursorIndex += 1;
+                session.values[field.id] = nextValue;
+                this.renderFormMultilineInput(nextValue);
+                this.requestRender();
+                return;
+            }
+            const session = this.activeFormSession;
+            if (!session) {
+                return;
+            }
+            const current = String(session.values[field.id] ?? "");
+            if (key.name === "left") {
+                session.currentTextCursorIndex = Math.max(0, session.currentTextCursorIndex - 1);
+                this.renderFormMultilineInput(current);
+                this.requestRender();
+                return;
+            }
+            if (key.name === "right") {
+                session.currentTextCursorIndex = Math.min(current.length, session.currentTextCursorIndex + 1);
+                this.renderFormMultilineInput(current);
+                this.requestRender();
+                return;
+            }
+            if (key.name === "home") {
+                const { line } = textIndexToLineColumn(current, session.currentTextCursorIndex);
+                session.currentTextCursorIndex = textLineColumnToIndex(current, line, 0);
+                this.renderFormMultilineInput(current);
+                this.requestRender();
+                return;
+            }
+            if (key.name === "end") {
+                const { line } = textIndexToLineColumn(current, session.currentTextCursorIndex);
+                const lineText = current.split("\n")[line] ?? "";
+                session.currentTextCursorIndex = textLineColumnToIndex(current, line, lineText.length);
+                this.renderFormMultilineInput(current);
+                this.requestRender();
+                return;
+            }
+            if (key.name === "up") {
+                const { line, column } = textIndexToLineColumn(current, session.currentTextCursorIndex);
+                session.currentTextCursorIndex = textLineColumnToIndex(current, Math.max(0, line - 1), column);
+                this.renderFormMultilineInput(current);
+                this.requestRender();
+                return;
+            }
+            if (key.name === "down") {
+                const { line, column } = textIndexToLineColumn(current, session.currentTextCursorIndex);
+                session.currentTextCursorIndex = textLineColumnToIndex(current, line + 1, column);
+                this.renderFormMultilineInput(current);
+                this.requestRender();
+                return;
+            }
+            if (key.name === "backspace") {
+                if (session.currentTextCursorIndex > 0) {
+                    const nextValue = `${current.slice(0, session.currentTextCursorIndex - 1)}${current.slice(session.currentTextCursorIndex)}`;
+                    session.currentTextCursorIndex -= 1;
+                    session.values[field.id] = nextValue;
+                    this.renderFormMultilineInput(nextValue);
+                    this.requestRender();
                 }
-                else {
-                    this.moveActiveFormField(1);
+                return;
+            }
+            if (key.name === "delete") {
+                if (session.currentTextCursorIndex < current.length) {
+                    const nextValue = `${current.slice(0, session.currentTextCursorIndex)}${current.slice(session.currentTextCursorIndex + 1)}`;
+                    session.values[field.id] = nextValue;
+                    this.renderFormMultilineInput(nextValue);
+                    this.requestRender();
                 }
                 return;
             }
-            this.appendActiveFormText(ch, key);
+            if (ch && !key.ctrl && !key.meta && !/^[\x00-\x1f\x7f]$/.test(ch)) {
+                const nextValue = `${current.slice(0, session.currentTextCursorIndex)}${ch}${current.slice(session.currentTextCursorIndex)}`;
+                session.currentTextCursorIndex += ch.length;
+                session.values[field.id] = nextValue;
+                this.renderFormMultilineInput(nextValue);
+                this.requestRender();
+            }
             return;
         }
         if (field.type === "boolean") {
@@ -1079,27 +1489,28 @@ export class InteractiveUi {
                 return;
             }
             if (key.name === "enter") {
-                this.moveActiveFormField(1);
+                this.confirmActiveFormField();
             }
             return;
         }
         if (key.name === "up") {
-            this.moveActiveFormOption(-1);
+            this.syncActiveSelectFieldValue();
+            this.requestRender();
             return;
         }
         if (key.name === "down") {
-            this.moveActiveFormOption(1);
+            this.syncActiveSelectFieldValue();
+            this.requestRender();
             return;
         }
         if (key.name === "space") {
+            this.syncActiveSelectFieldValue();
             this.toggleActiveFormValue();
             return;
         }
         if (key.name === "enter") {
-            if (field.type === "single-select") {
-                this.toggleActiveFormValue();
-            }
-            this.moveActiveFormField(1);
+            this.syncActiveSelectFieldValue();
+            this.confirmActiveFormField();
         }
     }
     renderDescription() {
@@ -1544,11 +1955,20 @@ export class InteractiveUi {
             });
         }
         return new Promise((resolve, reject) => {
+            const values = buildInitialUserInputValues(form.fields);
+            const firstField = form.fields[0];
+            const initialCursorIndex = firstField?.type === "text" ? String(values[firstField.id] ?? "").length : 0;
+            const initialOptionIndex = firstField?.type === "single-select"
+                ? Math.max(0, firstField.options.findIndex((option) => option.value === String(values[firstField.id] ?? "")))
+                : firstField?.type === "multi-select"
+                    ? Math.max(0, firstField.options.findIndex((option) => Array.isArray(values[firstField.id]) && values[firstField.id].includes(option.value)))
+                    : 0;
             this.activeFormSession = {
                 form,
-                values: buildInitialUserInputValues(form.fields),
+                values,
                 currentFieldIndex: 0,
-                currentOptionIndex: 0,
+                currentOptionIndex: initialOptionIndex,
+                currentTextCursorIndex: initialCursorIndex,
                 resolve,
                 reject,
             };