prompt-language-shell 0.6.2 → 0.6.6

package/dist/types/components.js

@@ -1 +1,8 @@
-export {};
+// Component lifecycle status
+export var ComponentStatus;
+(function (ComponentStatus) {
+    ComponentStatus["Awaiting"] = "awaiting";
+    ComponentStatus["Active"] = "active";
+    ComponentStatus["Pending"] = "pending";
+    ComponentStatus["Done"] = "done";
+})(ComponentStatus || (ComponentStatus = {}));

package/dist/ui/Answer.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { useInput } from '../services/keyboard.js';
 import { formatErrorMessage } from '../services/messages.js';
 import { withMinimumTime } from '../services/timing.js';
 import { Spinner } from './Spinner.js';
 const MINIMUM_PROCESSING_TIME = 400;
-export function Answer({ question, state, isActive = true, service, handlers, }) {
+export function Answer({ question, state, status, service, handlers, }) {
+    const isActive = status === ComponentStatus.Active;
     const [error, setError] = useState(null);
     const [answer, setAnswer] = useState(state?.answer ?? null);
     useInput((input, key) => {

package/dist/ui/Command.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 } from '../services/colors.js';
 import { createPlanDefinition } from '../services/components.js';
@@ -12,7 +13,8 @@ import { ensureMinimumTime } from '../services/timing.js';
 import { Spinner } from './Spinner.js';
 import { UserQuery } from './UserQuery.js';
 const MIN_PROCESSING_TIME = 400; // purely for visual effect
-export function Command({ command, state, isActive = true, service, handlers, onAborted, }) {
+export function Command({ command, state, status, service, handlers, onAborted, }) {
+    const isActive = status === ComponentStatus.Active;
     const [error, setError] = useState(state?.error ?? null);
     useInput((_, key) => {
         if (key.escape && isActive) {
@@ -66,9 +68,9 @@ export function Command({ command, state, isActive = true, service, handlers, on
                         handlers?.addToQueue(planDefinition);
                     }
                     else {
-                        // No DEFINE tasks: Pass Plan to be added atomically with Command
-                        routeTasksWithConfirm(result.tasks, result.message, svc, command, handlers, false, planDefinition // Pass Plan for atomic update
-                        );
+                        // No DEFINE tasks: Complete Command, then route to Confirm flow
+                        handlers?.completeActive();
+                        routeTasksWithConfirm(result.tasks, result.message, svc, command, handlers, false);
                     }
                 }
             }

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

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);

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';
@@ -23,26 +24,35 @@ function parseCapabilityFromTask(task) {
     const colonIndex = task.action.indexOf(':');
     if (colonIndex === -1) {
         const upperName = task.action.toUpperCase();
+        // Check for status markers
+        const isIncomplete = task.action.includes('(INCOMPLETE)');
+        const cleanName = task.action.replace(/\s*\(INCOMPLETE\)\s*/gi, '').trim();
         return {
-            name: task.action,
+            name: cleanName,
             description: '',
             isBuiltIn: BUILT_IN_CAPABILITIES.has(upperName),
             isIndirect: INDIRECT_CAPABILITIES.has(upperName),
+            isIncomplete,
         };
     }
     const name = task.action.substring(0, colonIndex).trim();
     const description = task.action.substring(colonIndex + 1).trim();
-    const upperName = name.toUpperCase();
+    // Check for status markers
+    const isIncomplete = name.includes('(INCOMPLETE)');
+    const cleanName = name.replace(/\s*\(INCOMPLETE\)\s*/gi, '').trim();
+    const upperName = cleanName.toUpperCase();
     const isBuiltIn = BUILT_IN_CAPABILITIES.has(upperName);
     const isIndirect = INDIRECT_CAPABILITIES.has(upperName);
     return {
-        name,
+        name: cleanName,
         description,
         isBuiltIn,
         isIndirect,
+        isIncomplete,
     };
 }
-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) => {

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);
-            onSelectionConfirmed(concreteTasks);
-            // Signal Plan completion after adding Confirm to queue
+            // Complete the selection phase - it goes to timeline
+            // Callback will create a new Plan showing refined tasks (pending) + Confirm (active)
             handlers?.completeActive();
+            onSelectionConfirmed(concreteTasks);
         }
     }, [
         isActive,
@@ -143,8 +146,8 @@ 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
+                    // Complete the selection phase - it goes to timeline
+                    // Callback will create a new Plan showing refined tasks (pending) + Confirm (active)
                     handlers?.completeActive();
                     onSelectionConfirmed(refinedTasks);
                 }

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/Report.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { Colors } from '../services/colors.js';
-function CapabilityItem({ name, description, isBuiltIn, isIndirect, }) {
+function CapabilityItem({ name, description, isBuiltIn, isIndirect, isIncomplete, }) {
     const color = isIndirect
         ? Colors.Origin.Indirect
         : isBuiltIn
             ? Colors.Origin.BuiltIn
             : Colors.Origin.UserProvided;
-    return (_jsxs(Box, { children: [_jsx(Text, { children: "- " }), _jsx(Text, { color: color, children: name }), _jsxs(Text, { children: [" - ", description] })] }));
+    return (_jsxs(Box, { children: [_jsx(Text, { children: "- " }), _jsx(Text, { color: color, children: name }), _jsxs(Text, { children: [" - ", description] }), isIncomplete && _jsx(Text, { color: Colors.Status.Warning, children: " (incomplete)" })] }));
 }
 export function Report({ message, capabilities }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginLeft: 1, children: _jsx(Text, { children: message }) }), _jsx(Box, { flexDirection: "column", marginLeft: 3, marginTop: 1, children: capabilities.map((capability, index) => (_jsx(CapabilityItem, { name: capability.name, description: capability.description, isBuiltIn: capability.isBuiltIn, isIndirect: capability.isIndirect }, index))) })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginLeft: 1, children: _jsx(Text, { children: message }) }), _jsx(Box, { flexDirection: "column", marginLeft: 3, marginTop: 1, children: capabilities.map((capability, index) => (_jsx(CapabilityItem, { name: capability.name, description: capability.description, isBuiltIn: capability.isBuiltIn, isIndirect: capability.isIndirect, isIncomplete: capability.isIncomplete }, index))) })] }));
 }

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, useRef, useState } from 'react';
+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,36 +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);
-    // Ref to track active component for synchronous access
-    const activeRef = useRef(null);
-    // Keep ref in sync with active state
-    useEffect(() => {
-        activeRef.current = active;
-    }, [active]);
-    // Function to move active component to timeline with optional additional items
-    const moveActiveToTimeline = useCallback((...items) => {
-        const curr = activeRef.current;
-        if (!curr) {
-            // No active component, just add items if provided
-            if (items.length > 0) {
-                setTimeline((prev) => [...prev, ...items]);
-            }
-            return;
-        }
-        const doneComponent = markAsDone(curr);
-        // Atomic update: add active component and any additional items
-        setTimeline((prev) => items.length > 0
-            ? [...prev, doneComponent, ...items]
-            : [...prev, doneComponent]);
-        setActive(null);
+    // 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(() => {
+        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 { active: null, pending };
+        });
     }, []);
     // Global handlers for all stateful components
     const handlers = useMemo(() => ({
+        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,
@@ -46,76 +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: (...items) => {
-            moveActiveToTimeline(...items);
-        },
-        updateState: (newState) => {
-            setActive((curr) => {
-                if (!curr || !('state' in curr))
-                    return curr;
-                const stateful = curr;
-                const updated = {
-                    ...stateful,
-                    state: {
-                        ...stateful.state,
-                        ...newState,
-                    },
-                };
-                // Update ref synchronously so moveActiveToTimeline sees the latest state
-                activeRef.current = updated;
-                return updated;
-            });
-        },
-    }), [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;
         }
-    }, [queue, active]);
+        // Other components - move pending to timeline first, then activate
+        if (pending) {
+            const donePending = markAsDone(pending);
+            setTimeline((prev) => [...prev, donePending]);
+        }
+        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;
@@ -126,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 })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prompt-language-shell",
-  "version": "0.6.2",
+  "version": "0.6.6",
   "description": "Your personal command-line concierge. Ask politely, and it gets things done.",
   "type": "module",
   "main": "dist/index.js",