prompt-language-shell 0.6.0 → 0.6.4

package/dist/ui/Component.js

@@ -14,36 +14,33 @@ import { Refinement } from './Refinement.js';
 import { Report } from './Report.js';
 import { Validate } from './Validate.js';
 import { Welcome } from './Welcome.js';
-export const Component = memo(function Component({ def, isActive, debug, }) {
-    // For stateless components, always inactive
-    const isStatelessComponent = !('state' in def);
-    const componentIsActive = isStatelessComponent ? false : isActive;
+export const Component = memo(function Component({ def, debug, }) {
     switch (def.name) {
         case ComponentName.Welcome:
-            return _jsx(Welcome, { ...def.props });
+            return _jsx(Welcome, { ...def.props, status: def.status });
         case ComponentName.Config:
-            return (_jsx(Config, { ...def.props, state: def.state, isActive: componentIsActive, debug: debug }));
+            return (_jsx(Config, { ...def.props, state: def.state, status: def.status, debug: debug }));
         case ComponentName.Command:
-            return _jsx(Command, { ...def.props, state: def.state, isActive: isActive });
+            return _jsx(Command, { ...def.props, state: def.state, status: def.status });
         case ComponentName.Plan:
-            return (_jsx(Plan, { ...def.props, state: def.state, isActive: componentIsActive, debug: debug }));
+            return (_jsx(Plan, { ...def.props, state: def.state, status: def.status, debug: debug }));
         case ComponentName.Feedback:
-            return _jsx(Feedback, { ...def.props });
+            return _jsx(Feedback, { ...def.props, status: def.status });
         case ComponentName.Message:
-            return _jsx(Message, { ...def.props });
+            return _jsx(Message, { ...def.props, status: def.status });
         case ComponentName.Refinement:
-            return (_jsx(Refinement, { ...def.props, state: def.state, isActive: isActive }));
+            return (_jsx(Refinement, { ...def.props, state: def.state, status: def.status }));
         case ComponentName.Confirm:
-            return _jsx(Confirm, { ...def.props, state: def.state, isActive: isActive });
+            return _jsx(Confirm, { ...def.props, state: def.state, status: def.status });
         case ComponentName.Introspect:
-            return (_jsx(Introspect, { ...def.props, state: def.state, isActive: componentIsActive, debug: debug }));
+            return (_jsx(Introspect, { ...def.props, state: def.state, status: def.status, debug: debug }));
         case ComponentName.Report:
-            return _jsx(Report, { ...def.props });
+            return _jsx(Report, { ...def.props, status: def.status });
         case ComponentName.Answer:
-            return _jsx(Answer, { ...def.props, state: def.state, isActive: isActive });
+            return _jsx(Answer, { ...def.props, state: def.state, status: def.status });
         case ComponentName.Execute:
-            return _jsx(Execute, { ...def.props, state: def.state, isActive: isActive });
+            return _jsx(Execute, { ...def.props, state: def.state, status: def.status });
         case ComponentName.Validate:
-            return (_jsx(Validate, { ...def.props, state: def.state, isActive: isActive, debug: debug }));
+            return (_jsx(Validate, { ...def.props, state: def.state, status: def.status, debug: debug }));
     }
 });

package/dist/ui/Config.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, useFocus } from 'ink';
 import TextInput from 'ink-text-input';
+import { ComponentStatus } from '../types/components.js';
 import { Colors } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
 export var StepType;
@@ -57,8 +58,8 @@ function SelectionStep({ options, selectedIndex, isCurrentStep, }) {
             return (_jsx(Box, { marginRight: 2, children: _jsx(Text, { dimColor: !isSelected || !isCurrentStep, bold: isSelected, children: option.label }) }, option.value));
         }) }));
 }
-export function Config({ steps, state, isActive = true, debug, handlers, onFinished, onAborted, }) {
-    // isActive passed as prop
+export function Config({ steps, state, status, debug, handlers, onFinished, onAborted, }) {
+    const isActive = status === ComponentStatus.Active;
     const [step, setStep] = useState(!isActive ? (state?.completedStep ?? steps.length) : 0);
     const [values, setValues] = useState(() => {
         // If not active and we have saved state values, use those
@@ -90,8 +91,13 @@ export function Config({ steps, state, isActive = true, debug, handlers, onFinis
     });
     const [inputValue, setInputValue] = useState('');
     const [selectedIndex, setSelectedIndex] = useState(() => {
-        const firstStep = steps[0];
-        return firstStep?.type === StepType.Selection ? firstStep.defaultIndex : 0;
+        // Initialize selectedIndex based on current step's defaultIndex
+        if (isActive &&
+            step < steps.length &&
+            steps[step].type === StepType.Selection) {
+            return steps[step].defaultIndex;
+        }
+        return 0;
     });
     const normalizeValue = (value) => {
         if (value === null || value === undefined) {
@@ -99,10 +105,12 @@ export function Config({ steps, state, isActive = true, debug, handlers, onFinis
         }
         return value.replace(/\n/g, '').trim();
     };
-    useInput((input, key) => {
-        if (key.escape && isActive && step < steps.length) {
+    useInput((_, key) => {
+        if (!isActive || step >= steps.length)
+            return;
+        const currentStepConfig = steps[step];
+        if (key.escape) {
             // Save current value before aborting
-            const currentStepConfig = steps[step];
             if (currentStepConfig) {
                 const configKey = currentStepConfig.path || currentStepConfig.key;
                 let currentValue = '';
@@ -111,10 +119,7 @@ export function Config({ steps, state, isActive = true, debug, handlers, onFinis
                         currentValue = inputValue || values[configKey] || '';
                         break;
                     case StepType.Selection:
-                        currentValue =
-                            currentStepConfig.options[selectedIndex]?.value ||
-                                values[configKey] ||
-                                '';
+                        currentValue = values[configKey] || '';
                         break;
                     default: {
                         const exhaustiveCheck = currentStepConfig;
@@ -130,24 +135,13 @@ export function Config({ steps, state, isActive = true, debug, handlers, onFinis
             }
             return;
         }
-        const currentStep = steps[step];
-        if (isActive && step < steps.length && currentStep) {
-            switch (currentStep.type) {
-                case StepType.Selection:
-                    if (key.tab) {
-                        setSelectedIndex((prev) => (prev + 1) % currentStep.options.length);
-                    }
-                    else if (key.return) {
-                        handleSubmit(currentStep.options[selectedIndex].value);
-                    }
-                    break;
-                case StepType.Text:
-                    // Text input handled by TextInput component
-                    break;
-                default: {
-                    const exhaustiveCheck = currentStep;
-                    throw new Error(`Unsupported step type: ${exhaustiveCheck}`);
-                }
+        // Handle selection step navigation
+        if (currentStepConfig.type === StepType.Selection) {
+            if (key.tab) {
+                setSelectedIndex((prev) => (prev + 1) % currentStepConfig.options.length);
+            }
+            else if (key.return) {
+                handleSubmit(currentStepConfig.options[selectedIndex].value);
             }
         }
     });
@@ -188,35 +182,38 @@ export function Config({ steps, state, isActive = true, debug, handlers, onFinis
         setInputValue('');
         if (step === steps.length - 1) {
             // Last step completed
+            // IMPORTANT: Update state BEFORE calling onFinished
+            // onFinished may call handlers.completeActive(), so state must be saved first
+            const stateUpdate = {
+                values: newValues,
+                completedStep: steps.length,
+            };
+            handlers?.updateState(stateUpdate);
+            // Now call onFinished - this may trigger completeActive()
             if (onFinished) {
                 onFinished(newValues);
             }
-            // Save state before completing
-            handlers?.updateState({
-                values: newValues,
-                completedStep: steps.length,
-            });
-            // Signal Workflow that config is complete
-            handlers?.onComplete();
             setStep(steps.length);
         }
         else {
             // Save state after each step
-            handlers?.updateState({
+            const stateUpdate = {
                 values: newValues,
                 completedStep: step + 1,
-            });
-            setStep(step + 1);
-            // Reset selection index for next step
-            const nextStep = steps[step + 1];
-            if (nextStep?.type === StepType.Selection) {
-                setSelectedIndex(nextStep.defaultIndex);
+            };
+            handlers?.updateState(stateUpdate);
+            const nextStep = step + 1;
+            setStep(nextStep);
+            // Reset selectedIndex for next step
+            if (nextStep < steps.length &&
+                steps[nextStep].type === StepType.Selection) {
+                setSelectedIndex(steps[nextStep].defaultIndex);
             }
         }
     };
     const renderStepInput = (stepConfig, isCurrentStep) => {
         const configKey = stepConfig.path || stepConfig.key;
-        // Use state values if not active (in timeline), otherwise use local values
+        // Use state values when inactive, local values when active
         const displayValue = !isActive && state?.values ? state.values[configKey] : values[configKey];
         switch (stepConfig.type) {
             case StepType.Text:
@@ -226,10 +223,11 @@ export function Config({ steps, state, isActive = true, debug, handlers, onFinis
                 return (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: displayValue || '' }));
             case StepType.Selection: {
                 if (!isCurrentStep) {
-                    const selectedOption = stepConfig.options.find((opt) => opt.value === displayValue);
-                    return _jsx(Text, { dimColor: true, children: selectedOption?.label || '' });
+                    // Find the option that matches the saved/current value
+                    const option = stepConfig.options.find((opt) => opt.value === displayValue);
+                    return _jsx(Text, { dimColor: true, children: option?.label || '' });
                 }
-                return (_jsx(SelectionStep, { options: stepConfig.options, selectedIndex: selectedIndex, isCurrentStep: isCurrentStep }));
+                return (_jsx(SelectionStep, { options: stepConfig.options, selectedIndex: selectedIndex, isCurrentStep: true }));
             }
             default: {
                 const exhaustiveCheck = stepConfig;

package/dist/ui/Confirm.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text } from 'ink';
+import { ComponentStatus, } from '../types/components.js';
 import { Colors, Palette } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
 import { UserQuery } from './UserQuery.js';
-export function Confirm({ message, state, isActive = true, handlers, onConfirmed, onCancelled, }) {
-    // isActive passed as prop
+export function Confirm({ message, state, status, handlers, onConfirmed, onCancelled, }) {
+    const isActive = status === ComponentStatus.Active;
     const [selectedIndex, setSelectedIndex] = useState(state?.selectedIndex ?? 0); // 0 = Yes, 1 = No
     useInput((input, key) => {
         if (!isActive)
@@ -18,11 +19,9 @@ export function Confirm({ message, state, isActive = true, handlers, onConfirmed
         }
         else if (key.tab) {
             // Toggle between Yes (0) and No (1)
-            setSelectedIndex((prev) => {
-                const newIndex = prev === 0 ? 1 : 0;
-                handlers?.updateState({ selectedIndex: newIndex });
-                return newIndex;
-            });
+            const newIndex = selectedIndex === 0 ? 1 : 0;
+            setSelectedIndex(newIndex);
+            handlers?.updateState({ selectedIndex: newIndex });
         }
         else if (key.return) {
             // Confirm selection

package/dist/ui/Execute.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
+import { ComponentStatus } from '../types/components.js';
 import { Colors, getTextColor, Palette } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
 import { formatErrorMessage } from '../services/messages.js';
@@ -85,7 +86,8 @@ function CommandStatusDisplay({ item, elapsed }) {
     const elapsedTime = getElapsedTime();
     return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: colors.icon, children: STATUS_ICONS[item.status] }), _jsx(Text, { color: colors.description, children: item.label || item.command.description }), elapsedTime !== undefined && (_jsxs(Text, { color: Palette.DarkGray, children: [" (", formatDuration(elapsedTime), ")"] }))] }), _jsxs(Box, { paddingLeft: 5, children: [_jsx(Text, { color: colors.symbol, children: "\u221F " }), _jsx(Text, { color: colors.command, children: item.command.command }), item.status === ExecutionStatus.Running && (_jsxs(Text, { children: [' ', _jsx(Spinner, {})] }))] })] }));
 }
-export function Execute({ tasks, state, isActive = true, service, handlers, }) {
+export function Execute({ tasks, state, status, service, handlers, }) {
+    const isActive = status === ComponentStatus.Active;
     // isActive passed as prop
     const [error, setError] = useState(state?.error ?? null);
     const [isExecuting, setIsExecuting] = useState(false);
@@ -157,7 +159,7 @@ export function Execute({ tasks, state, isActive = true, service, handlers, }) {
             commandStatuses,
             error,
         });
-        handlers?.onComplete();
+        handlers?.completeActive();
     }, [isExecuting, commandStatuses, outputs, handlers, message, error]);
     useEffect(() => {
         if (!isActive) {
@@ -197,7 +199,7 @@ export function Execute({ tasks, state, isActive = true, service, handlers, }) {
                         message: result.message,
                         commandStatuses: [],
                     });
-                    handlers?.onComplete();
+                    handlers?.completeActive();
                     return;
                 }
                 // Resolve placeholders in command strings before execution

package/dist/ui/Introspect.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
+import { ComponentStatus, } from '../types/components.js';
 import { Colors, getTextColor } from '../services/colors.js';
 import { createReportDefinition } from '../services/components.js';
 import { useInput } from '../services/keyboard.js';
@@ -42,7 +43,8 @@ function parseCapabilityFromTask(task) {
         isIndirect,
     };
 }
-export function Introspect({ tasks, state, isActive = true, service, children, debug = false, handlers, }) {
+export function Introspect({ tasks, state, status, service, children, debug = false, handlers, }) {
+    const isActive = status === ComponentStatus.Active;
     // isActive passed as prop
     const [error, setError] = useState(null);
     useInput((input, key) => {
@@ -86,7 +88,7 @@ export function Introspect({ tasks, state, isActive = true, service, children, d
                     // Add Report component to queue
                     handlers?.addToQueue(createReportDefinition(result.message, capabilities));
                     // Signal completion
-                    handlers?.onComplete();
+                    handlers?.completeActive();
                 }
             }
             catch (err) {

package/dist/ui/Plan.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box } from 'ink';
+import { ComponentStatus } from '../types/components.js';
 import { TaskType } from '../types/types.js';
 import { getTaskColors } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
@@ -49,7 +50,8 @@ function taskToListItem(task, highlightedChildIndex = null, isDefineTaskWithoutS
     }
     return item;
 }
-export function Plan({ message, tasks, state, isActive = true, debug = false, handlers, onSelectionConfirmed, }) {
+export function Plan({ message, tasks, state, status, debug = false, handlers, onSelectionConfirmed, }) {
+    const isActive = status === ComponentStatus.Active;
     // isActive passed as prop
     const [highlightedIndex, setHighlightedIndex] = useState(state?.highlightedIndex ?? null);
     const [currentDefineGroupIndex, setCurrentDefineGroupIndex] = useState(state?.currentDefineGroupIndex ?? 0);
@@ -70,9 +72,10 @@ export function Plan({ message, tasks, state, isActive = true, debug = false, ha
         if (isActive && defineTaskIndices.length === 0 && onSelectionConfirmed) {
             // No selection needed - all tasks are concrete
             const concreteTasks = tasks.filter((task) => task.type !== TaskType.Ignore && task.type !== TaskType.Discard);
+            // Complete the selection phase - it goes to timeline
+            // Callback will create a new Plan showing refined tasks (pending) + Confirm (active)
+            handlers?.completeActive();
             onSelectionConfirmed(concreteTasks);
-            // Signal Plan completion after adding Confirm to queue
-            handlers?.onComplete();
         }
     }, [
         isActive,
@@ -143,14 +146,14 @@ export function Plan({ message, tasks, state, isActive = true, debug = false, ha
                     }
                 });
                 if (onSelectionConfirmed) {
-                    // Callback will handle the entire flow (Refinement, refined Plan, Confirm)
-                    // So we need to complete the Plan first
-                    handlers?.onComplete();
+                    // Complete the selection phase - it goes to timeline
+                    // Callback will create a new Plan showing refined tasks (pending) + Confirm (active)
+                    handlers?.completeActive();
                     onSelectionConfirmed(refinedTasks);
                 }
                 else {
                     // No selection callback, just complete normally
-                    handlers?.onComplete();
+                    handlers?.completeActive();
                 }
             }
         }

package/dist/ui/Refinement.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from 'ink';
+import { ComponentStatus } from '../types/components.js';
 import { useInput } from '../services/keyboard.js';
 import { Message } from './Message.js';
 import { Spinner } from './Spinner.js';
-export const Refinement = ({ text, isActive = true, onAborted, }) => {
+export const Refinement = ({ text, status, onAborted }) => {
+    const isActive = status === ComponentStatus.Active;
     useInput((_, key) => {
         if (key.escape && isActive) {
             onAborted('plan refinement');

package/dist/ui/Validate.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
+import { ComponentStatus } from '../types/components.js';
 import { TaskType } from '../types/types.js';
 import { Colors, getTextColor } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
@@ -10,8 +11,8 @@ import { saveConfig, unflattenConfig } from '../services/configuration.js';
 import { Config, StepType } from './Config.js';
 import { Spinner } from './Spinner.js';
 const MIN_PROCESSING_TIME = 1000;
-export function Validate({ missingConfig, userRequest, state, isActive = true, service, children, debug, onError, onComplete, onAborted, handlers, }) {
-    // isActive passed as prop
+export function Validate({ missingConfig, userRequest, state, status, service, children, debug, onError, onComplete, onAborted, handlers, }) {
+    const isActive = status === ComponentStatus.Active;
     const [error, setError] = useState(null);
     const [completionMessage, setCompletionMessage] = useState(null);
     const [configRequirements, setConfigRequirements] = useState(null);
@@ -132,7 +133,7 @@ export function Validate({ missingConfig, userRequest, state, isActive = true, s
     const handleConfigAborted = (operation) => {
         onAborted(operation);
     };
-    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isActive && !completionMessage && !error && (_jsxs(Box, { marginLeft: 1, children: [_jsxs(Text, { color: getTextColor(isActive), children: ["Validating configuration requirements.", ' '] }), _jsx(Spinner, {})] })), completionMessage && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: getTextColor(isActive), children: completionMessage }) })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) })), configSteps && !error && (_jsx(Box, { marginTop: 1, children: _jsx(Config, { steps: configSteps, isActive: isActive, debug: debug, onFinished: handleConfigFinished, onAborted: handleConfigAborted, handlers: handlers }) })), children] }));
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isActive && !completionMessage && !error && (_jsxs(Box, { marginLeft: 1, children: [_jsxs(Text, { color: getTextColor(isActive), children: ["Validating configuration requirements.", ' '] }), _jsx(Spinner, {})] })), completionMessage && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: getTextColor(isActive), children: completionMessage }) })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) })), configSteps && !error && (_jsx(Box, { marginTop: 1, children: _jsx(Config, { steps: configSteps, status: status, debug: debug, onFinished: handleConfigFinished, onAborted: handleConfigAborted, handlers: handlers }) })), children] }));
 }
 /**
  * Build prompt for VALIDATE tool

package/dist/ui/Workflow.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, Static } from 'ink';
+import { ComponentStatus, } from '../types/components.js';
 import { ComponentName, FeedbackType } from '../types/types.js';
 import { createFeedback, isStateless, markAsDone, } from '../services/components.js';
 import { exitApp } from '../services/process.js';
@@ -8,26 +9,82 @@ import { getCancellationMessage } from '../services/messages.js';
 import { Component } from './Component.js';
 export const Workflow = ({ initialQueue, debug }) => {
     const [timeline, setTimeline] = useState([]);
-    const [active, setActive] = useState(null);
+    const [current, setCurrent] = useState({ active: null, pending: null });
     const [queue, setQueue] = useState(initialQueue);
-    // Function to move active component to timeline
+    // Function to move active to pending (component just completed)
+    const moveActiveToPending = useCallback(() => {
+        setCurrent((curr) => {
+            const { active } = curr;
+            if (!active)
+                return curr;
+            // Move active to pending without marking as done
+            const pendingComponent = { ...active, status: ComponentStatus.Pending };
+            return { active: null, pending: pendingComponent };
+        });
+    }, []);
+    // Function to move active directly to timeline (error/abort)
     const moveActiveToTimeline = useCallback(() => {
-        setActive((curr) => {
-            if (!curr)
-                return null;
-            const doneComponent = markAsDone(curr);
+        setCurrent((curr) => {
+            const { active, pending } = curr;
+            if (!active)
+                return curr;
+            // Mark as done and add to timeline
+            const doneComponent = markAsDone(active);
             setTimeline((prev) => [...prev, doneComponent]);
-            return null;
+            return { active: null, pending };
         });
     }, []);
     // Global handlers for all stateful components
     const handlers = useMemo(() => ({
-        onComplete: () => {
-            moveActiveToTimeline();
+        addToQueue: (...items) => {
+            setQueue((queue) => [...queue, ...items]);
+        },
+        updateState: (newState) => {
+            setCurrent((curr) => {
+                const { active, pending } = curr;
+                if (!active || !('state' in active))
+                    return curr;
+                const stateful = active;
+                const updated = {
+                    ...stateful,
+                    state: {
+                        ...stateful.state,
+                        ...newState,
+                    },
+                };
+                return { active: updated, pending };
+            });
+        },
+        completeActive: (...items) => {
+            moveActiveToPending();
+            if (items.length > 0) {
+                setQueue((queue) => [...items, ...queue]);
+            }
+        },
+        completeActiveAndPending: (...items) => {
+            setCurrent((curr) => {
+                const { active, pending } = curr;
+                // Move both to timeline - pending first (Plan), then active (Confirm)
+                if (pending) {
+                    const donePending = markAsDone(pending);
+                    setTimeline((prev) => [...prev, donePending]);
+                }
+                if (active) {
+                    const doneActive = markAsDone(active);
+                    setTimeline((prev) => [...prev, doneActive]);
+                }
+                return { active: null, pending: null };
+            });
+            if (items.length > 0) {
+                setQueue((queue) => [...items, ...queue]);
+            }
+        },
+        addToTimeline: (...items) => {
+            setTimeline((prev) => [...prev, ...items]);
         },
         onAborted: (operation) => {
             moveActiveToTimeline();
-            // Add feedback to queue and exit
+            // Add feedback to queue
             const message = getCancellationMessage(operation);
             setQueue((queue) => [
                 ...queue,
@@ -36,73 +93,82 @@ export const Workflow = ({ initialQueue, debug }) => {
         },
         onError: (error) => {
             moveActiveToTimeline();
-            // Add feedback to queue and exit with error code
+            // Add feedback to queue
             setQueue((queue) => [
                 ...queue,
                 createFeedback(FeedbackType.Failed, error),
             ]);
         },
-        addToQueue: (...items) => {
-            setQueue((queue) => [...queue, ...items]);
-        },
-        addToTimeline: (...items) => {
-            setTimeline((prev) => [...prev, ...items]);
-        },
-        completeActive: () => {
-            moveActiveToTimeline();
-        },
-        updateState: (newState) => {
-            setActive((curr) => {
-                if (!curr || !('state' in curr))
-                    return curr;
-                const stateful = curr;
-                return {
-                    ...stateful,
-                    state: {
-                        ...stateful.state,
-                        ...newState,
-                    },
-                };
-            });
-        },
-    }), [moveActiveToTimeline]);
+    }), [moveActiveToPending, moveActiveToTimeline]);
     // Global Esc handler removed - components handle their own Esc individually
     // Move next item from queue to active
     useEffect(() => {
-        if (queue.length > 0 && active === null) {
-            const [first, ...rest] = queue;
+        const { active, pending } = current;
+        // Early return: not ready to activate next
+        if (queue.length === 0 || active !== null) {
+            return;
+        }
+        const [first, ...rest] = queue;
+        const activeComponent = { ...first, status: ComponentStatus.Active };
+        // Confirm - keep pending visible (Plan showing what will execute)
+        if (first.name === ComponentName.Confirm) {
             setQueue(rest);
-            setActive(first);
+            setCurrent({ active: activeComponent, pending });
+            return;
+        }
+        // Other components - move pending to timeline first, then activate
+        if (pending) {
+            const donePending = markAsDone(pending);
+            setTimeline((prev) => [...prev, donePending]);
         }
-    }, [queue, active]);
+        setQueue(rest);
+        setCurrent({ active: activeComponent, pending: null });
+    }, [queue, current]);
     // Process active component - stateless components auto-move to timeline
     useEffect(() => {
+        const { active, pending } = current;
         if (!active)
             return;
         if (isStateless(active)) {
+            // Stateless components move directly to timeline
             const doneComponent = markAsDone(active);
             setTimeline((prev) => [...prev, doneComponent]);
-            setActive(null);
+            setCurrent({ active: null, pending });
         }
-        // Stateful components stay in active until handlers move them to timeline
-    }, [active]);
-    // Exit when all done
+        // Stateful components stay in active until handlers move them to pending
+    }, [current]);
+    // Move final pending to timeline and exit when all done
     useEffect(() => {
-        if (active === null && queue.length === 0 && timeline.length > 0) {
-            // Check if last item in timeline is a failed feedback
-            const lastItem = timeline[timeline.length - 1];
-            const isFailed = lastItem.name === ComponentName.Feedback &&
-                lastItem.props.type === FeedbackType.Failed;
-            exitApp(isFailed ? 1 : 0);
+        const { active, pending } = current;
+        // Early return: not ready to finish
+        if (active !== null || queue.length > 0) {
+            return;
+        }
+        // Handle pending component
+        if (pending) {
+            const donePending = markAsDone(pending);
+            setTimeline((prev) => [...prev, donePending]);
+            setCurrent({ active: null, pending: null });
+            return;
         }
-    }, [active, queue, timeline]);
-    // Inject global handlers into active component
+        // Early return: nothing to exit with
+        if (timeline.length === 0) {
+            return;
+        }
+        // Everything is done, exit
+        const lastItem = timeline[timeline.length - 1];
+        const isFailed = lastItem.name === ComponentName.Feedback &&
+            lastItem.props.type === FeedbackType.Failed;
+        exitApp(isFailed ? 1 : 0);
+    }, [current, queue, timeline]);
+    // Render active and pending components
     const activeComponent = useMemo(() => {
+        const { active } = current;
         if (!active)
             return null;
-        // For stateless components, render as-is with isActive=true
+        // For stateless components, render as-is
         if (isStateless(active)) {
-            return (_jsx(Component, { def: active, isActive: true, debug: debug }, active.id));
+            return _jsx(Component, { def: active, debug: debug }, active.id);
         }
         // For stateful components, inject global handlers
         const statefulActive = active;
@@ -113,7 +179,14 @@ export const Workflow = ({ initialQueue, debug }) => {
                 handlers,
             },
         };
-        return (_jsx(Component, { def: wrappedDef, isActive: true, debug: debug }, active.id));
-    }, [active, debug, handlers]);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: timeline, children: (item) => (_jsx(Box, { marginTop: 1, children: _jsx(Component, { def: item, isActive: false, debug: debug }) }, item.id)) }, "timeline"), _jsx(Box, { marginTop: 1, children: activeComponent })] }));
+        return _jsx(Component, { def: wrappedDef, debug: debug }, active.id);
+    }, [current, debug, handlers]);
+    const pendingComponent = useMemo(() => {
+        const { pending } = current;
+        if (!pending)
+            return null;
+        // Pending components don't receive input
+        return _jsx(Component, { def: pending, debug: debug }, pending.id);
+    }, [current, debug]);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: timeline, children: (item) => (_jsx(Box, { marginTop: 1, children: _jsx(Component, { def: item, debug: false }) }, item.id)) }, "timeline"), pendingComponent && _jsx(Box, { marginTop: 1, children: pendingComponent }), activeComponent && _jsx(Box, { marginTop: 1, children: activeComponent })] }));
 };