dexto 1.6.0 → 1.6.1

package/dist/cli/ink-cli/components/ElicitationForm.js

@@ -1,203 +1,335 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ElicitationForm Component
- * Renders a form for ask_user/elicitation requests in the CLI
- * Supports string, number, boolean, and enum field types
+ * Renders a form for ask_user/elicitation requests in the CLI.
+ *
+ * Uses a wizard flow (one question at a time) to avoid huge modals and improve
+ * usability on small terminals.
  */
 import { useState, forwardRef, useImperativeHandle, useCallback, useMemo } from 'react';
 import { Box, Text } from 'ink';
+import wrapAnsi from 'wrap-ansi';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { parseElicitationSchema } from '../utils/elicitationSchema.js';
+function hasOwn(obj, key) {
+    return Object.prototype.hasOwnProperty.call(obj, key);
+}
+function getDisplayValue(value) {
+    if (value === undefined || value === null || value === '')
+        return '—';
+    if (Array.isArray(value))
+        return value.length > 0 ? value.join(', ') : '—';
+    if (value === true)
+        return 'Yes';
+    if (value === false)
+        return 'No';
+    return String(value ?? '');
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
 /**
  * Form component for elicitation/ask_user requests
  */
 export const ElicitationForm = forwardRef(({ metadata, onSubmit, onCancel }, ref) => {
-    // Parse schema into form fields
+    const { rows: terminalRows, columns: terminalColumns } = useTerminalSize();
+    const headerLineCount = 1;
+    const stepHeaderLineCount = 2; // hard cap: 2 lines
+    const spacerAfterStepLineCount = 1;
+    const questionLineCount = 2;
+    const helpLineCount = 2;
+    const errorLineCount = 1;
+    const questionHeaderHeight = headerLineCount +
+        stepHeaderLineCount +
+        spacerAfterStepLineCount +
+        questionLineCount +
+        helpLineCount +
+        errorLineCount;
+    const reviewHeaderHeight = headerLineCount + spacerAfterStepLineCount;
+    const maxHeaderHeight = Math.max(questionHeaderHeight, reviewHeaderHeight);
+    const footerHeight = 1; // key hints
+    const minContentHeight = 4;
+    const viewportHeight = useMemo(() => {
+        // Ink clears + redraws when dynamic output height >= terminal rows, which looks like flicker.
+        // Keep the elicitation UI small and scroll internally to stay under that threshold.
+        // Leave slack so Ink doesn't hit the "clear + redraw everything" path.
+        // (Ink clears when dynamic output height >= terminal rows.)
+        const reservedRows = 8;
+        const minViewportHeight = maxHeaderHeight + footerHeight + minContentHeight;
+        const maxHeight = Math.max(minViewportHeight, terminalRows - reservedRows);
+        const desired = Math.max(minViewportHeight, Math.floor(terminalRows * 0.6));
+        return Math.min(maxHeight, desired);
+    }, [footerHeight, maxHeaderHeight, minContentHeight, terminalRows]);
+    const availableWidth = Math.max(20, terminalColumns - 2);
     const fields = useMemo(() => {
-        const schema = metadata.schema;
-        if (!schema?.properties)
+        return parseElicitationSchema(metadata.schema);
+    }, [metadata.schema]);
+    const wrapClampedLines = useCallback((text, maxLines) => {
+        if (maxLines <= 0)
             return [];
-        const required = schema.required || [];
-        return Object.entries(schema.properties)
-            .filter((entry) => typeof entry[1] !== 'boolean')
-            .map(([name, prop]) => {
-            let type = 'string';
-            let enumValues;
-            if (prop.type === 'boolean') {
-                type = 'boolean';
-            }
-            else if (prop.type === 'number' || prop.type === 'integer') {
-                type = 'number';
-            }
-            else if (prop.enum && Array.isArray(prop.enum)) {
-                type = 'enum';
-                enumValues = prop.enum;
-            }
-            else if (prop.type === 'array' &&
-                typeof prop.items === 'object' &&
-                prop.items &&
-                'enum' in prop.items) {
-                type = 'array-enum';
-                enumValues = prop.items.enum;
-            }
-            return {
-                name,
-                label: prop.title || name,
-                type,
-                description: prop.description,
-                required: required.includes(name),
-                enumValues,
-            };
+        const wrapped = wrapAnsi(text, availableWidth, {
+            hard: true,
+            wordWrap: true,
+            trim: false,
         });
-    }, [metadata.schema]);
+        const rawLines = wrapped.length > 0 ? wrapped.split('\n') : [''];
+        const didTruncate = rawLines.length > maxLines;
+        const lines = rawLines.slice(0, maxLines);
+        if (didTruncate && lines.length > 0) {
+            const lastIndex = lines.length - 1;
+            const lastLine = (lines[lastIndex] ?? '').replace(/\s+$/, '');
+            const safe = lastLine.length > 0
+                ? `${lastLine.slice(0, Math.max(0, lastLine.length - 1))}…`
+                : '…';
+            lines[lastIndex] = safe;
+        }
+        while (lines.length < maxLines) {
+            lines.push('');
+        }
+        return lines;
+    }, [availableWidth]);
     // Form state
     const [activeFieldIndex, setActiveFieldIndex] = useState(0);
     const [formData, setFormData] = useState({});
-    const [currentInput, setCurrentInput] = useState('');
-    const [enumIndex, setEnumIndex] = useState(0); // For enum selection
-    const [arraySelections, setArraySelections] = useState(new Set()); // For array-enum
+    const [draftInputs, setDraftInputs] = useState({});
+    const [enumIndex, setEnumIndex] = useState(0); // For enum/array-enum focus
+    const [arraySelections, setArraySelections] = useState(new Set()); // array-enum
     const [errors, setErrors] = useState({});
-    const [isReviewing, setIsReviewing] = useState(false); // Confirmation step before submit
+    const [isReviewing, setIsReviewing] = useState(false);
+    const [reviewScrollTop, setReviewScrollTop] = useState(0);
     const activeField = fields[activeFieldIndex];
-    // Update a field value
+    const contentHeight = useMemo(() => {
+        const activeHeaderHeight = isReviewing ? reviewHeaderHeight : questionHeaderHeight;
+        return Math.max(1, viewportHeight - activeHeaderHeight - footerHeight);
+    }, [footerHeight, isReviewing, questionHeaderHeight, reviewHeaderHeight, viewportHeight]);
     const updateField = useCallback((name, value) => {
         setFormData((prev) => ({ ...prev, [name]: value }));
         setErrors((prev) => {
-            const newErrors = { ...prev };
-            delete newErrors[name];
-            return newErrors;
+            if (!hasOwn(prev, name))
+                return prev;
+            const next = { ...prev };
+            delete next[name];
+            return next;
         });
     }, []);
-    // Validate and enter review mode (or submit if already reviewing)
-    // Accepts optional currentFieldValue to handle async state update timing
+    const goToFieldIndex = useCallback((index, data = formData) => {
+        if (index < 0 || index >= fields.length)
+            return;
+        setActiveFieldIndex(index);
+        const field = fields[index];
+        if (!field)
+            return;
+        if (field.type === 'boolean') {
+            const currentValue = data[field.name];
+            setEnumIndex(currentValue === false ? 1 : 0);
+            setArraySelections(new Set());
+            return;
+        }
+        if (field.type === 'enum') {
+            const values = field.enumValues ?? [];
+            const currentValue = data[field.name];
+            const currentIndex = values.findIndex((v) => v === currentValue);
+            setEnumIndex(currentIndex >= 0 ? currentIndex : 0);
+            setArraySelections(new Set());
+            return;
+        }
+        if (field.type === 'array-enum') {
+            const values = field.enumValues ?? [];
+            const currentValue = data[field.name];
+            const currentValues = Array.isArray(currentValue) ? currentValue : [];
+            const selections = new Set();
+            for (const selectedValue of currentValues) {
+                const selectedIndex = values.findIndex((v) => v === selectedValue);
+                if (selectedIndex >= 0)
+                    selections.add(selectedIndex);
+            }
+            setArraySelections(selections);
+            const firstSelected = selections.values().next().value;
+            const maxIndex = Math.max(0, values.length - 1);
+            setEnumIndex(Math.min(firstSelected ?? 0, maxIndex));
+            return;
+        }
+        setEnumIndex(0);
+        setArraySelections(new Set());
+    }, [fields, formData]);
+    const nextField = useCallback(() => {
+        if (activeFieldIndex < fields.length - 1) {
+            goToFieldIndex(activeFieldIndex + 1);
+        }
+    }, [activeFieldIndex, fields.length, goToFieldIndex]);
+    const prevField = useCallback(() => {
+        if (activeFieldIndex > 0) {
+            goToFieldIndex(activeFieldIndex - 1);
+        }
+    }, [activeFieldIndex, goToFieldIndex]);
     const handleSubmit = useCallback((currentFieldValue) => {
         const newErrors = {};
-        // Merge current field value since React state update is async
         const finalFormData = currentFieldValue
             ? { ...formData, [currentFieldValue.name]: currentFieldValue.value }
-            : formData;
+            : { ...formData };
+        // Incorporate draft inputs (wizard UX is forgiving if you navigate without pressing Enter).
+        for (const field of fields) {
+            if (!hasOwn(draftInputs, field.name))
+                continue;
+            const rawDraft = draftInputs[field.name] ?? '';
+            if (field.type === 'number') {
+                const trimmed = rawDraft.trim();
+                if (trimmed === '') {
+                    finalFormData[field.name] = '';
+                    continue;
+                }
+                const parsed = Number(trimmed);
+                if (Number.isNaN(parsed)) {
+                    newErrors[field.name] = 'Invalid number';
+                    continue;
+                }
+                finalFormData[field.name] = parsed;
+            }
+            if (field.type === 'string') {
+                finalFormData[field.name] = rawDraft;
+            }
+        }
+        // Ensure boolean fields are always present in submitted data.
         for (const field of fields) {
-            if (field.required) {
-                const value = finalFormData[field.name];
-                if (value === undefined || value === null || value === '') {
+            if (!field.required)
+                continue;
+            const value = finalFormData[field.name];
+            if (field.type === 'array-enum') {
+                if (!Array.isArray(value) || value.length === 0) {
                     newErrors[field.name] = 'Required';
                 }
+                continue;
+            }
+            if (value === undefined || value === null || value === '') {
+                newErrors[field.name] = 'Required';
             }
         }
         if (Object.keys(newErrors).length > 0) {
             setErrors(newErrors);
-            // Focus first error field
             const firstErrorField = fields.findIndex((f) => newErrors[f.name]);
             if (firstErrorField >= 0) {
-                setActiveFieldIndex(firstErrorField);
+                goToFieldIndex(firstErrorField, finalFormData);
             }
+            setIsReviewing(false);
             return;
         }
-        // Update formData with final value and enter review mode
-        if (currentFieldValue) {
-            setFormData(finalFormData);
-        }
+        setFormData(finalFormData);
+        setReviewScrollTop(0);
         setIsReviewing(true);
-    }, [fields, formData]);
-    // Final submission after review
+    }, [draftInputs, fields, formData, goToFieldIndex]);
     const confirmSubmit = useCallback(() => {
         onSubmit(formData);
     }, [formData, onSubmit]);
-    // Navigate to next/previous field
-    const nextField = useCallback(() => {
-        if (activeFieldIndex < fields.length - 1) {
-            // Save current input for string/number fields
-            if (activeField?.type === 'string' || activeField?.type === 'number') {
-                if (currentInput.trim()) {
-                    const value = activeField.type === 'number' ? Number(currentInput) : currentInput;
-                    updateField(activeField.name, value);
-                }
-            }
-            setActiveFieldIndex((prev) => prev + 1);
-            setCurrentInput('');
-            setEnumIndex(0);
-            setArraySelections(new Set());
-        }
-    }, [activeFieldIndex, fields.length, activeField, currentInput, updateField]);
-    const prevField = useCallback(() => {
-        if (activeFieldIndex > 0) {
-            setActiveFieldIndex((prev) => prev - 1);
-            setCurrentInput('');
-            setEnumIndex(0);
-            setArraySelections(new Set());
-        }
-    }, [activeFieldIndex]);
-    // Handle keyboard input
     useImperativeHandle(ref, () => ({
         handleInput: (input, key) => {
-            // Review mode handling
             if (isReviewing) {
+                const maxScrollTop = Math.max(0, fields.length - contentHeight);
                 if (key.return) {
                     confirmSubmit();
                     return true;
                 }
-                // Backspace to go back to editing
                 if (key.backspace || key.delete) {
                     setIsReviewing(false);
+                    goToFieldIndex(Math.max(0, fields.length - 1));
+                    return true;
+                }
+                if (key.leftArrow || (key.tab && key.shift)) {
+                    setIsReviewing(false);
+                    goToFieldIndex(Math.max(0, fields.length - 1));
+                    return true;
+                }
+                if (key.upArrow) {
+                    setReviewScrollTop((prev) => Math.max(0, prev - 1));
+                    return true;
+                }
+                if (key.downArrow) {
+                    setReviewScrollTop((prev) => Math.min(maxScrollTop, prev + 1));
+                    return true;
+                }
+                if (key.pageUp) {
+                    setReviewScrollTop((prev) => Math.max(0, prev - 5));
+                    return true;
+                }
+                if (key.pageDown) {
+                    setReviewScrollTop((prev) => Math.min(maxScrollTop, prev + 5));
                     return true;
                 }
-                // Esc to cancel entirely
                 if (key.escape) {
                     onCancel();
                     return true;
                 }
                 return false;
             }
-            // Escape to cancel
             if (key.escape) {
                 onCancel();
                 return true;
             }
             if (!activeField)
                 return false;
-            // Shift+Tab or Up to previous field (check BEFORE plain Tab)
-            if ((key.tab && key.shift) ||
-                (key.upArrow &&
-                    activeField.type !== 'enum' &&
-                    activeField.type !== 'array-enum')) {
+            // Wizard navigation: Left/Right (or Shift+Tab/Tab) changes the question.
+            if (key.leftArrow || (key.tab && key.shift)) {
                 prevField();
                 return true;
             }
-            // Tab (without Shift) or Down to next field
-            if ((key.tab && !key.shift) ||
-                (key.downArrow &&
-                    activeField.type !== 'enum' &&
-                    activeField.type !== 'array-enum')) {
-                nextField();
+            if (key.rightArrow || (key.tab && !key.shift)) {
+                if (activeFieldIndex === fields.length - 1) {
+                    handleSubmit();
+                }
+                else {
+                    nextField();
+                }
                 return true;
             }
-            // Field-specific handling
+            const setDraftValue = (updater) => {
+                const hadError = hasOwn(errors, activeField.name);
+                setDraftInputs((prev) => {
+                    const current = hasOwn(prev, activeField.name)
+                        ? (prev[activeField.name] ?? '')
+                        : (() => {
+                            const existing = formData[activeField.name];
+                            return existing === undefined || existing === null
+                                ? ''
+                                : String(existing);
+                        })();
+                    return { ...prev, [activeField.name]: updater(current) };
+                });
+                if (hadError) {
+                    setErrors((prevErrors) => {
+                        const nextErrors = { ...prevErrors };
+                        delete nextErrors[activeField.name];
+                        return nextErrors;
+                    });
+                }
+            };
             switch (activeField.type) {
                 case 'boolean': {
-                    // Space or Enter to toggle
-                    if (input === ' ' || key.return) {
-                        const current = formData[activeField.name] === true;
-                        const newValue = !current;
-                        updateField(activeField.name, newValue);
-                        if (key.return) {
-                            if (activeFieldIndex === fields.length - 1) {
-                                handleSubmit({ name: activeField.name, value: newValue });
-                            }
-                            else {
-                                nextField();
-                            }
-                        }
+                    if (key.upArrow) {
+                        setEnumIndex((prev) => clamp(prev - 1, 0, 1));
+                        return true;
+                    }
+                    if (key.downArrow) {
+                        setEnumIndex((prev) => clamp(prev + 1, 0, 1));
                         return true;
                     }
-                    // Left/Right to toggle
-                    if (key.leftArrow || key.rightArrow) {
-                        const current = formData[activeField.name] === true;
-                        updateField(activeField.name, !current);
+                    if (input === ' ') {
+                        setEnumIndex((prev) => (prev === 0 ? 1 : 0));
+                        return true;
+                    }
+                    if (key.return) {
+                        const nextValue = enumIndex === 0;
+                        updateField(activeField.name, nextValue);
+                        if (activeFieldIndex === fields.length - 1) {
+                            handleSubmit({ name: activeField.name, value: nextValue });
+                        }
+                        else {
+                            nextField();
+                        }
                         return true;
                     }
                     break;
                 }
                 case 'enum': {
                     const values = activeField.enumValues || [];
-                    // Up/Down to navigate enum
                     if (key.upArrow) {
                         setEnumIndex((prev) => (prev > 0 ? prev - 1 : values.length - 1));
                         return true;
@@ -206,7 +338,6 @@ export const ElicitationForm = forwardRef(({ metadata, onSubmit, onCancel }, ref
                         setEnumIndex((prev) => (prev < values.length - 1 ? prev + 1 : 0));
                         return true;
                     }
-                    // Enter to select and move to next (or submit if last)
                     if (key.return) {
                         const selectedValue = values[enumIndex];
                         updateField(activeField.name, selectedValue);
@@ -222,7 +353,6 @@ export const ElicitationForm = forwardRef(({ metadata, onSubmit, onCancel }, ref
                 }
                 case 'array-enum': {
                     const values = activeField.enumValues || [];
-                    // Up/Down to navigate
                     if (key.upArrow) {
                         setEnumIndex((prev) => (prev > 0 ? prev - 1 : values.length - 1));
                         return true;
@@ -231,26 +361,18 @@ export const ElicitationForm = forwardRef(({ metadata, onSubmit, onCancel }, ref
                         setEnumIndex((prev) => (prev < values.length - 1 ? prev + 1 : 0));
                         return true;
                     }
-                    // Space to toggle selection
                     if (input === ' ') {
-                        setArraySelections((prev) => {
-                            const next = new Set(prev);
-                            if (next.has(enumIndex)) {
-                                next.delete(enumIndex);
-                            }
-                            else {
-                                next.add(enumIndex);
-                            }
-                            // Update form data
-                            const selected = Array.from(next).map((i) => values[i]);
-                            updateField(activeField.name, selected);
-                            return next;
-                        });
+                        const nextSelections = new Set(arraySelections);
+                        if (nextSelections.has(enumIndex))
+                            nextSelections.delete(enumIndex);
+                        else
+                            nextSelections.add(enumIndex);
+                        setArraySelections(nextSelections);
+                        const selected = Array.from(nextSelections).map((i) => values[i]);
+                        updateField(activeField.name, selected);
                         return true;
                     }
-                    // Enter to confirm and move to next (or submit if last)
                     if (key.return) {
-                        // Get current selections for submit
                         const selected = Array.from(arraySelections).map((i) => values[i]);
                         if (activeFieldIndex === fields.length - 1) {
                             handleSubmit({ name: activeField.name, value: selected });
@@ -264,18 +386,40 @@ export const ElicitationForm = forwardRef(({ metadata, onSubmit, onCancel }, ref
                 }
                 case 'string':
                 case 'number': {
-                    // Enter to confirm field and move to next (or submit if last)
+                    const hasDraft = hasOwn(draftInputs, activeField.name);
+                    const rawInput = hasDraft
+                        ? (draftInputs[activeField.name] ?? '')
+                        : (() => {
+                            const existing = formData[activeField.name];
+                            return existing === undefined || existing === null
+                                ? ''
+                                : String(existing);
+                        })();
                     if (key.return) {
-                        const value = currentInput.trim()
-                            ? activeField.type === 'number'
-                                ? Number(currentInput)
-                                : currentInput
-                            : formData[activeField.name]; // Use existing value if no new input
-                        if (currentInput.trim()) {
+                        let value = hasDraft
+                            ? rawInput
+                            : formData[activeField.name];
+                        if (activeField.type === 'number' && hasDraft) {
+                            const trimmed = rawInput.trim();
+                            if (trimmed === '') {
+                                value = '';
+                            }
+                            else {
+                                const parsed = Number(trimmed);
+                                if (Number.isNaN(parsed)) {
+                                    setErrors((prev) => ({
+                                        ...prev,
+                                        [activeField.name]: 'Invalid number',
+                                    }));
+                                    return true;
+                                }
+                                value = parsed;
+                            }
+                        }
+                        if (hasDraft) {
                             updateField(activeField.name, value);
                         }
                         if (activeFieldIndex === fields.length - 1) {
-                            // Last field - submit with current value
                             handleSubmit(value !== undefined
                                 ? { name: activeField.name, value }
                                 : undefined);
@@ -285,21 +429,20 @@ export const ElicitationForm = forwardRef(({ metadata, onSubmit, onCancel }, ref
                         }
                         return true;
                     }
-                    // Backspace
                     if (key.backspace || key.delete) {
-                        setCurrentInput((prev) => prev.slice(0, -1));
+                        setDraftValue((prev) => prev.slice(0, -1));
                         return true;
                     }
-                    // Regular character input
                     if (input && !key.ctrl && !key.meta) {
-                        // For number type, only allow digits and decimal
                         if (activeField.type === 'number') {
-                            if (/^[\d.-]$/.test(input)) {
-                                setCurrentInput((prev) => prev + input);
+                            // Accept either single-key entry or paste: filter to allowed chars.
+                            const filtered = input.replace(/[^\d.-]/g, '');
+                            if (filtered.length > 0) {
+                                setDraftValue((prev) => prev + filtered);
                             }
                         }
                         else {
-                            setCurrentInput((prev) => prev + input);
+                            setDraftValue((prev) => prev + input);
                         }
                         return true;
                     }
@@ -312,47 +455,138 @@ export const ElicitationForm = forwardRef(({ metadata, onSubmit, onCancel }, ref
         activeField,
         activeFieldIndex,
         arraySelections,
+        contentHeight,
         confirmSubmit,
-        currentInput,
+        draftInputs,
         enumIndex,
-        fields.length,
+        errors,
+        fields,
         formData,
         handleSubmit,
         isReviewing,
+        goToFieldIndex,
         nextField,
         onCancel,
         prevField,
+        reviewScrollTop,
         updateField,
     ]);
     if (fields.length === 0) {
         return (_jsx(Box, { flexDirection: "column", paddingX: 1, children: _jsx(Text, { color: "red", children: "Invalid form schema" }) }));
     }
-    const prompt = metadata.prompt;
-    // Review mode - show summary of choices
-    if (isReviewing) {
-        return (_jsxs(Box, { flexDirection: "column", paddingX: 0, paddingY: 0, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "green", bold: true, children: "\u2713 Review your answers:" }) }), fields.map((field) => {
-                    const value = formData[field.name];
-                    const displayValue = Array.isArray(value)
-                        ? value.join(', ')
-                        : value === true
-                            ? 'Yes'
-                            : value === false
-                                ? 'No'
-                                : String(value ?? '');
-                    return (_jsx(Box, { marginBottom: 0, children: _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: field.label }), _jsx(Text, { children: ": " }), _jsx(Text, { color: "green", children: displayValue })] }) }, field.name));
-                }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Enter to submit \u2022 Backspace to edit \u2022 Esc to cancel" }) })] }));
+    const isAnswered = (field) => {
+        if (field.type === 'boolean')
+            return hasOwn(formData, field.name);
+        if (field.type === 'enum')
+            return hasOwn(formData, field.name);
+        if (field.type === 'array-enum') {
+            const value = formData[field.name];
+            return Array.isArray(value) && value.length > 0;
+        }
+        const draft = draftInputs[field.name];
+        if (typeof draft === 'string' && draft.trim() !== '')
+            return true;
+        const value = formData[field.name];
+        return value !== undefined && value !== null && value !== '';
+    };
+    if (!isReviewing && !activeField) {
+        return (_jsx(Box, { flexDirection: "column", paddingX: 1, children: _jsx(Text, { color: "red", children: "Invalid form state" }) }));
     }
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 0, paddingY: 0, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "yellowBright", bold: true, children: ["\uD83D\uDCDD ", prompt] }) }), fields.map((field, index) => {
-                const isActive = index === activeFieldIndex;
-                const value = formData[field.name];
-                const error = errors[field.name];
-                return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? 'cyan' : 'white', bold: isActive, children: [isActive ? '▶ ' : '  ', field.label, field.required && _jsx(Text, { color: "red", children: "*" }), ': '] }), field.type === 'boolean' && (_jsxs(Text, { color: value === true ? 'green' : 'gray', children: [value === true ? '[✓] Yes' : '[ ] No', isActive && _jsx(Text, { color: "gray", children: " (Space to toggle)" })] })), field.type === 'string' && !isActive && value !== undefined && (_jsx(Text, { color: "green", children: String(value) })), field.type === 'number' && !isActive && value !== undefined && (_jsx(Text, { color: "green", children: String(value) })), field.type === 'enum' && !isActive && value !== undefined && (_jsx(Text, { color: "green", children: String(value) })), field.type === 'array-enum' &&
-                                    !isActive &&
-                                    Array.isArray(value) &&
-                                    value.length > 0 && (_jsx(Text, { color: "green", children: value.join(', ') }))] }), isActive && (field.type === 'string' || field.type === 'number') && (_jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { color: "cyan", children: "> " }), _jsx(Text, { children: currentInput }), _jsx(Text, { color: "cyan", children: "_" })] })), isActive && field.type === 'enum' && field.enumValues && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: field.enumValues.map((opt, i) => (_jsx(Box, { children: _jsxs(Text, { color: i === enumIndex ? 'green' : 'gray', children: [i === enumIndex ? '  ▶ ' : '    ', String(opt)] }) }, String(opt)))) })), isActive && field.type === 'array-enum' && field.enumValues && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsx(Text, { color: "gray", children: " (Space to select, Enter to confirm)" }), field.enumValues.map((opt, i) => {
-                                    const isSelected = arraySelections.has(i);
-                                    return (_jsx(Box, { children: _jsxs(Text, { color: i === enumIndex ? 'cyan' : 'gray', children: [i === enumIndex ? '  ▶ ' : '    ', _jsx(Text, { color: isSelected ? 'green' : 'gray', children: isSelected ? '[✓]' : '[ ]' }), ' ', String(opt)] }) }, String(opt)));
-                                })] })), isActive && field.description && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", children: field.description }) })), error && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "red", children: error }) }))] }, field.name));
-            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Tab/\u2193 next field \u2022 Shift+Tab/\u2191 prev \u2022 Enter to confirm \u2022 Esc to cancel" }) })] }));
+    const value = activeField ? formData[activeField.name] : undefined;
+    const currentInput = activeField && hasOwn(draftInputs, activeField.name)
+        ? (draftInputs[activeField.name] ?? '')
+        : value === undefined || value === null
+            ? ''
+            : String(value);
+    const errorText = activeField ? (errors[activeField.name] ?? '') : '';
+    const renderContent = () => {
+        if (isReviewing) {
+            return (_jsx(Box, { overflowY: "scroll", overflowX: "hidden", scrollTop: reviewScrollTop, scrollbarThumbColor: "gray", flexDirection: "column", height: contentHeight, paddingRight: 1, children: fields.map((field) => (_jsxs(Text, { wrap: "truncate-end", children: [field.question, ": ", getDisplayValue(formData[field.name])] }, field.name))) }));
+        }
+        if (!activeField)
+            return null;
+        if (activeField.type === 'string' || activeField.type === 'number') {
+            return (_jsx(Box, { height: contentHeight, children: _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: "cyan", children: "> " }), currentInput || _jsx(Text, { color: "gray", children: "Type your answer\u2026" }), _jsx(Text, { color: "cyan", children: "\u258B" })] }) }));
+        }
+        const options = [];
+        if (activeField.type === 'boolean') {
+            options.push({
+                key: 'yes',
+                label: 'Yes',
+                isFocused: enumIndex === 0,
+                isSelected: false,
+            });
+            options.push({
+                key: 'no',
+                label: 'No',
+                isFocused: enumIndex === 1,
+                isSelected: false,
+            });
+        }
+        if ((activeField.type === 'enum' || activeField.type === 'array-enum') &&
+            activeField.enumValues) {
+            activeField.enumValues.forEach((opt, i) => {
+                const isFocused = i === enumIndex;
+                const isSelected = activeField.type === 'enum' ? false : arraySelections.has(i);
+                options.push({
+                    key: `${String(opt)}-${i}`,
+                    label: String(opt),
+                    isFocused,
+                    isSelected,
+                });
+            });
+        }
+        const focusedIndex = Math.max(0, options.findIndex((o) => o.isFocused));
+        const maxScrollTop = Math.max(0, options.length - contentHeight);
+        const targetScrollTop = clamp(focusedIndex - Math.floor(contentHeight / 2), 0, maxScrollTop);
+        return (_jsx(Box, { overflowY: "scroll", overflowX: "hidden", scrollbarThumbColor: "gray", height: contentHeight, scrollTop: targetScrollTop, flexDirection: "column", paddingRight: 1, children: options.map((opt) => {
+                const prefix = opt.isFocused ? '▶ ' : '  ';
+                const mark = activeField.type === 'array-enum'
+                    ? opt.isSelected
+                        ? '[✓] '
+                        : '[ ] '
+                    : '';
+                return (_jsxs(Text, { color: opt.isFocused ? 'cyan' : 'gray', wrap: "truncate-end", children: [prefix, mark, opt.label] }, opt.key));
+            }) }));
+    };
+    const hintLine = (() => {
+        if (isReviewing)
+            return 'Enter submit • Backspace/← edit • ↑↓ scroll • Esc cancel';
+        switch (activeField?.type) {
+            case 'string':
+            case 'number':
+                return 'Type to answer • Enter next • ←/→ question • Esc cancel';
+            case 'array-enum':
+                return '↑/↓ option • Space toggle • Enter next • ←/→ question • Esc cancel';
+            default:
+                return '↑/↓ option • Enter select • ←/→ question • Esc cancel';
+        }
+    })();
+    const headerText = isReviewing
+        ? '📝 Review your answers'
+        : `📝 Please answer ${fields.length === 1 ? 'this' : 'these'} ${fields.length} ${fields.length === 1 ? 'question' : 'questions'}.`;
+    const stepText = (() => {
+        if (isReviewing) {
+            return '';
+        }
+        if (!activeField)
+            return '';
+        return `Question ${activeFieldIndex + 1}/${fields.length}: ${activeField.stepLabel}`;
+    })();
+    const questionText = !isReviewing && activeField
+        ? `${activeField.question}${activeField.required ? '*' : ''}`
+        : '';
+    const helpText = !isReviewing && activeField?.helpText ? activeField.helpText : '';
+    const errorLineText = !isReviewing ? errorText : '';
+    const headerLines = wrapClampedLines(headerText, headerLineCount);
+    const stepLines = wrapClampedLines(stepText, stepHeaderLineCount);
+    const questionLines = wrapClampedLines(questionText, questionLineCount);
+    const helpLines = wrapClampedLines(helpText, helpLineCount);
+    const errorLines = wrapClampedLines(errorLineText, errorLineCount);
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 0, height: viewportHeight, children: [headerLines.map((line, index) => (_jsx(Text, { color: "yellowBright", bold: true, wrap: "truncate-end", children: line || ' ' }, `header-${index}`))), !isReviewing &&
+                stepLines.map((line, index) => (_jsx(Text, { color: "gray", dimColor: true, wrap: "truncate-end", children: line || ' ' }, `step-${index}`))), Array.from({ length: spacerAfterStepLineCount }, (_, index) => (_jsx(Text, { wrap: "truncate-end", children: ' ' }, `spacer-step-${index}`))), !isReviewing &&
+                questionLines.map((line, index) => (_jsx(Text, { color: "white", bold: true, wrap: "truncate-end", children: line || ' ' }, `question-${index}`))), !isReviewing &&
+                helpLines.map((line, index) => (_jsx(Text, { color: "gray", dimColor: true, wrap: "truncate-end", children: line || ' ' }, `help-${index}`))), !isReviewing &&
+                errorLines.map((line, index) => (_jsx(Text, { color: "red", wrap: "truncate-end", children: line || ' ' }, `error-${index}`))), renderContent(), _jsx(Text, { color: "gray", dimColor: true, wrap: "truncate-end", children: hintLine })] }));
 });
 ElicitationForm.displayName = 'ElicitationForm';