prompt-language-shell 0.5.2 → 0.6.2

package/dist/ui/Component.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import { memo } from 'react';
 import { ComponentName } from '../types/types.js';
 import { Answer } from './Answer.js';
-import { AnswerDisplay } from './AnswerDisplay.js';
 import { Command } from './Command.js';
 import { Confirm } from './Confirm.js';
 import { Config } from './Config.js';
@@ -15,62 +14,36 @@ import { Refinement } from './Refinement.js';
 import { Report } from './Report.js';
 import { Validate } from './Validate.js';
 import { Welcome } from './Welcome.js';
-export const Component = React.memo(function Component({ def, debug, }) {
+export const Component = memo(function Component({ def, isActive, debug, }) {
+    // For stateless components, always inactive
+    const isStatelessComponent = !('state' in def);
+    const componentIsActive = isStatelessComponent ? false : isActive;
     switch (def.name) {
         case ComponentName.Welcome:
             return _jsx(Welcome, { ...def.props });
-        case ComponentName.Config: {
-            const props = def.props;
-            const state = def.state;
-            return _jsx(Config, { ...props, state: state, debug: debug });
-        }
-        case ComponentName.Command: {
-            const props = def.props;
-            const state = def.state;
-            return _jsx(Command, { ...props, state: state });
-        }
-        case ComponentName.Plan: {
-            const props = def.props;
-            const state = def.state;
-            return _jsx(Plan, { ...props, state: state, debug: debug });
-        }
+        case ComponentName.Config:
+            return (_jsx(Config, { ...def.props, state: def.state, isActive: componentIsActive, debug: debug }));
+        case ComponentName.Command:
+            return _jsx(Command, { ...def.props, state: def.state, isActive: isActive });
+        case ComponentName.Plan:
+            return (_jsx(Plan, { ...def.props, state: def.state, isActive: componentIsActive, debug: debug }));
         case ComponentName.Feedback:
             return _jsx(Feedback, { ...def.props });
         case ComponentName.Message:
             return _jsx(Message, { ...def.props });
-        case ComponentName.Refinement: {
-            const props = def.props;
-            const state = def.state;
-            return _jsx(Refinement, { ...props, state: state });
-        }
-        case ComponentName.Confirm: {
-            const props = def.props;
-            const state = def.state;
-            return _jsx(Confirm, { ...props, state: state });
-        }
-        case ComponentName.Introspect: {
-            const props = def.props;
-            const state = def.state;
-            return _jsx(Introspect, { ...props, state: state, debug: debug });
-        }
+        case ComponentName.Refinement:
+            return (_jsx(Refinement, { ...def.props, state: def.state, isActive: isActive }));
+        case ComponentName.Confirm:
+            return _jsx(Confirm, { ...def.props, state: def.state, isActive: isActive });
+        case ComponentName.Introspect:
+            return (_jsx(Introspect, { ...def.props, state: def.state, isActive: componentIsActive, debug: debug }));
         case ComponentName.Report:
             return _jsx(Report, { ...def.props });
-        case ComponentName.Answer: {
-            const props = def.props;
-            const state = def.state;
-            return _jsx(Answer, { ...props, state: state });
-        }
-        case ComponentName.AnswerDisplay:
-            return _jsx(AnswerDisplay, { ...def.props });
-        case ComponentName.Execute: {
-            const props = def.props;
-            const state = def.state;
-            return _jsx(Execute, { ...props, state: state });
-        }
-        case ComponentName.Validate: {
-            const props = def.props;
-            const state = def.state;
-            return _jsx(Validate, { ...props, state: state });
-        }
+        case ComponentName.Answer:
+            return _jsx(Answer, { ...def.props, state: def.state, isActive: isActive });
+        case ComponentName.Execute:
+            return _jsx(Execute, { ...def.props, state: def.state, isActive: isActive });
+        case ComponentName.Validate:
+            return (_jsx(Validate, { ...def.props, state: def.state, isActive: isActive, debug: debug }));
     }
 });

package/dist/ui/Config.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { useState } from 'react';
 import { Box, Text, useFocus } from 'ink';
 import TextInput from 'ink-text-input';
 import { Colors } from '../services/colors.js';
@@ -10,8 +10,8 @@ export var StepType;
     StepType["Selection"] = "selection";
 })(StepType || (StepType = {}));
 function TextStep({ value, placeholder, validate, onChange, onSubmit, }) {
-    const [inputValue, setInputValue] = React.useState(value);
-    const [validationFailed, setValidationFailed] = React.useState(false);
+    const [inputValue, setInputValue] = useState(value);
+    const [validationFailed, setValidationFailed] = useState(false);
     const { isFocused } = useFocus({ autoFocus: true });
     const handleChange = (newValue) => {
         setInputValue(newValue);
@@ -57,20 +57,27 @@ 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, debug, onFinished, onAborted }) {
-    const done = state?.done ?? false;
-    const [step, setStep] = React.useState(done ? steps.length : 0);
-    const [values, setValues] = React.useState(() => {
+export function Config({ steps, state, isActive = true, debug, handlers, onFinished, onAborted, }) {
+    // isActive passed as prop
+    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
+        if (!isActive && state?.values) {
+            return state.values;
+        }
+        // Otherwise initialize from step defaults
         const initial = {};
         steps.forEach((stepConfig) => {
+            // Use full path if available, otherwise use key
+            const configKey = stepConfig.path || stepConfig.key;
             switch (stepConfig.type) {
                 case StepType.Text:
                     if (stepConfig.value !== null) {
-                        initial[stepConfig.key] = stepConfig.value;
+                        initial[configKey] = stepConfig.value;
                     }
                     break;
                 case StepType.Selection:
-                    initial[stepConfig.key] =
+                    initial[configKey] =
                         stepConfig.options[stepConfig.defaultIndex].value;
                     break;
                 default: {
@@ -81,10 +88,15 @@ export function Config({ steps, state, debug, onFinished, onAborted }) {
         });
         return initial;
     });
-    const [inputValue, setInputValue] = React.useState('');
-    const [selectedIndex, setSelectedIndex] = React.useState(() => {
-        const firstStep = steps[0];
-        return firstStep?.type === StepType.Selection ? firstStep.defaultIndex : 0;
+    const [inputValue, setInputValue] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(() => {
+        // 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) {
@@ -92,21 +104,21 @@ export function Config({ steps, state, debug, onFinished, onAborted }) {
         }
         return value.replace(/\n/g, '').trim();
     };
-    useInput((input, key) => {
-        if (key.escape && !done && 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 = '';
                 switch (currentStepConfig.type) {
                     case StepType.Text:
-                        currentValue = inputValue || values[currentStepConfig.key] || '';
+                        currentValue = inputValue || values[configKey] || '';
                         break;
                     case StepType.Selection:
-                        currentValue =
-                            currentStepConfig.options[selectedIndex]?.value ||
-                                values[currentStepConfig.key] ||
-                                '';
+                        currentValue = values[configKey] || '';
                         break;
                     default: {
                         const exhaustiveCheck = currentStepConfig;
@@ -114,32 +126,21 @@ export function Config({ steps, state, debug, onFinished, onAborted }) {
                     }
                 }
                 if (currentValue) {
-                    setValues({ ...values, [currentStepConfig.key]: currentValue });
+                    setValues({ ...values, [configKey]: currentValue });
                 }
             }
             if (onAborted) {
-                onAborted();
+                onAborted('configuration');
             }
             return;
         }
-        const currentStep = steps[step];
-        if (!done && 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);
             }
         }
     });
@@ -173,38 +174,59 @@ export function Config({ steps, state, debug, onFinished, onAborted }) {
         if (!finalValue) {
             return;
         }
-        const newValues = { ...values, [currentStepConfig.key]: finalValue };
+        // Use full path if available, otherwise use key
+        const configKey = currentStepConfig.path || currentStepConfig.key;
+        const newValues = { ...values, [configKey]: finalValue };
         setValues(newValues);
         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);
             }
             setStep(steps.length);
         }
         else {
-            setStep(step + 1);
-            // Reset selection index for next step
-            const nextStep = steps[step + 1];
-            if (nextStep?.type === StepType.Selection) {
-                setSelectedIndex(nextStep.defaultIndex);
+            // Save state after each step
+            const stateUpdate = {
+                values: newValues,
+                completedStep: step + 1,
+            };
+            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 when inactive, local values when active
+        const displayValue = !isActive && state?.values ? state.values[configKey] : values[configKey];
         switch (stepConfig.type) {
             case StepType.Text:
                 if (isCurrentStep) {
                     return (_jsx(TextStep, { value: inputValue, placeholder: stepConfig.value || undefined, validate: stepConfig.validate, onChange: setInputValue, onSubmit: handleSubmit }));
                 }
-                return _jsx(Text, { dimColor: true, children: values[stepConfig.key] || '' });
+                return (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: displayValue || '' }));
             case StepType.Selection: {
                 if (!isCurrentStep) {
-                    const selectedOption = stepConfig.options.find((opt) => opt.value === values[stepConfig.key]);
-                    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;
@@ -212,14 +234,14 @@ export function Config({ steps, state, debug, onFinished, onAborted }) {
             }
         }
     };
-    return (_jsx(Box, { flexDirection: "column", children: steps.map((stepConfig, index) => {
-            const isCurrentStep = index === step && !done;
+    return (_jsx(Box, { flexDirection: "column", marginLeft: 1, children: steps.map((stepConfig, index) => {
+            const isCurrentStep = index === step && isActive;
             const isCompleted = index < step;
-            const wasAborted = index === step && done;
+            const wasAborted = index === step && !isActive;
             const shouldShow = isCompleted || isCurrentStep || wasAborted;
             if (!shouldShow) {
                 return null;
             }
-            return (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { children: stepConfig.description }), _jsx(Text, { children: ": " }), debug && stepConfig.path && (_jsxs(Text, { color: Colors.Type.Define, children: ['{', stepConfig.path, '}'] }))] }), _jsxs(Box, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: Colors.Action.Select, dimColor: !isCurrentStep, children: ">" }), _jsx(Text, { children: " " }), renderStepInput(stepConfig, isCurrentStep)] })] }, stepConfig.key));
+            return (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { children: stepConfig.description }), _jsx(Text, { children: ": " }), debug && stepConfig.path && (_jsxs(Text, { color: Colors.Type.Define, children: ['{', stepConfig.path, '}'] }))] }), _jsxs(Box, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: Colors.Action.Select, dimColor: !isCurrentStep, children: ">" }), _jsx(Text, { children: " " }), renderStepInput(stepConfig, isCurrentStep)] })] }, stepConfig.path || stepConfig.key));
         }) }));
 }

package/dist/ui/Confirm.js

@@ -1,26 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { useState } from 'react';
 import { Box, Text } from 'ink';
 import { Colors, Palette } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
-export function Confirm({ message, state, onConfirmed, onCancelled, }) {
-    const done = state?.done ?? false;
-    const isCurrent = done === false;
-    const [selectedIndex, setSelectedIndex] = React.useState(0); // 0 = Yes, 1 = No
+import { UserQuery } from './UserQuery.js';
+export function Confirm({ message, state, isActive = true, handlers, onConfirmed, onCancelled, }) {
+    // isActive passed as prop
+    const [selectedIndex, setSelectedIndex] = useState(state?.selectedIndex ?? 0); // 0 = Yes, 1 = No
     useInput((input, key) => {
-        if (done)
+        if (!isActive)
             return;
         if (key.escape) {
             // Escape: highlight "No" and cancel
             setSelectedIndex(1);
+            handlers?.updateState({ selectedIndex: 1 });
             onCancelled?.();
         }
         else if (key.tab) {
             // Toggle between Yes (0) and No (1)
-            setSelectedIndex((prev) => (prev === 0 ? 1 : 0));
+            setSelectedIndex((prev) => {
+                const newIndex = prev === 0 ? 1 : 0;
+                handlers?.updateState({ selectedIndex: newIndex });
+                return newIndex;
+            });
         }
         else if (key.return) {
             // Confirm selection
+            handlers?.updateState({ selectedIndex, confirmed: true });
             if (selectedIndex === 0) {
                 onConfirmed?.();
             }
@@ -28,16 +34,16 @@ export function Confirm({ message, state, onConfirmed, onCancelled, }) {
                 onCancelled?.();
             }
         }
-    }, { isActive: !done });
+    }, { isActive });
     const options = [
         { label: 'yes', value: 'yes', color: Palette.BrightGreen },
         { label: 'no', value: 'no', color: Colors.Status.Error },
     ];
-    if (done) {
+    if (!isActive) {
         // When done, show both the message and user's choice in timeline
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: undefined, children: message }) }), _jsx(Box, { paddingX: 1, marginX: -1, alignSelf: "flex-start", backgroundColor: Colors.Background.UserQuery, children: _jsxs(Text, { color: Colors.Text.UserQuery, children: ["> ", options[selectedIndex].label] }) })] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, marginLeft: 1, children: _jsx(Text, { color: undefined, children: message }) }), _jsxs(UserQuery, { children: ["> ", options[selectedIndex].label] })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: isCurrent ? Colors.Text.Active : Colors.Text.Inactive, children: message }) }), _jsxs(Box, { children: [_jsx(Text, { color: Colors.Action.Select, children: ">" }), _jsx(Text, { children: " " }), _jsx(Box, { children: options.map((option, index) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, marginLeft: 1, children: _jsx(Text, { color: isActive ? Colors.Text.Active : Colors.Text.Inactive, children: message }) }), _jsxs(Box, { marginLeft: 1, children: [_jsx(Text, { color: Colors.Action.Select, children: ">" }), _jsx(Text, { children: " " }), _jsx(Box, { children: options.map((option, index) => {
                             const isSelected = index === selectedIndex;
                             return (_jsx(Box, { marginRight: 2, children: _jsx(Text, { color: isSelected ? option.color : undefined, dimColor: !isSelected, children: option.label }) }, option.value));
                         }) })] })] }));

package/dist/ui/Execute.js

@@ -85,41 +85,53 @@ 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, service, onError, onComplete, onAborted, }) {
-    const done = state?.done ?? false;
-    const isCurrent = done === false;
-    const [error, setError] = useState(null);
-    const [isLoading, setIsLoading] = useState(state?.isLoading ?? !done);
+export function Execute({ tasks, state, isActive = true, service, handlers, }) {
+    // isActive passed as prop
+    const [error, setError] = useState(state?.error ?? null);
     const [isExecuting, setIsExecuting] = useState(false);
-    const [commandStatuses, setCommandStatuses] = useState([]);
-    const [message, setMessage] = useState('');
+    const [commandStatuses, setCommandStatuses] = useState(state?.commandStatuses ?? []);
+    const [message, setMessage] = useState(state?.message ?? '');
     const [currentElapsed, setCurrentElapsed] = useState(0);
     const [runningIndex, setRunningIndex] = useState(null);
     const [outputs, setOutputs] = useState([]);
-    useInput((input, key) => {
-        if (key.escape && (isLoading || isExecuting) && !done) {
-            setIsLoading(false);
+    const [hasProcessed, setHasProcessed] = useState(false);
+    // Derive loading state from current conditions
+    const isLoading = isActive &&
+        commandStatuses.length === 0 &&
+        !error &&
+        !isExecuting &&
+        !hasProcessed;
+    useInput((_, key) => {
+        if (key.escape && (isLoading || isExecuting) && isActive) {
             setIsExecuting(false);
             setRunningIndex(null);
             // Mark any running command as aborted when cancelled
             const now = Date.now();
-            setCommandStatuses((prev) => prev.map((item) => {
-                if (item.status === ExecutionStatus.Running) {
-                    const elapsed = item.startTime
-                        ? Math.floor((now - item.startTime) / 1000) * 1000
-                        : undefined;
-                    return {
-                        ...item,
-                        status: ExecutionStatus.Aborted,
-                        endTime: now,
-                        elapsed,
-                    };
-                }
-                return item;
-            }));
-            onAborted(calculateTotalElapsed(commandStatuses));
+            setCommandStatuses((prev) => {
+                const updated = prev.map((item) => {
+                    if (item.status === ExecutionStatus.Running) {
+                        const elapsed = item.startTime
+                            ? Math.floor((now - item.startTime) / 1000) * 1000
+                            : undefined;
+                        return {
+                            ...item,
+                            status: ExecutionStatus.Aborted,
+                            endTime: now,
+                            elapsed,
+                        };
+                    }
+                    return item;
+                });
+                // Save state after updating
+                handlers?.updateState({
+                    commandStatuses: updated,
+                    message,
+                });
+                return updated;
+            });
+            handlers?.onAborted('execution');
         }
-    }, { isActive: (isLoading || isExecuting) && !done });
+    }, { isActive: (isLoading || isExecuting) && isActive });
     // Update elapsed time for running command
     useEffect(() => {
         if (runningIndex === null)
@@ -139,15 +151,20 @@ export function Execute({ tasks, state, service, onError, onComplete, onAborted,
     useEffect(() => {
         if (isExecuting || commandStatuses.length === 0 || !outputs.length)
             return;
-        onComplete?.(outputs, calculateTotalElapsed(commandStatuses));
-    }, [isExecuting, commandStatuses, outputs, onComplete]);
+        // Save state before completing
+        handlers?.updateState({
+            message,
+            commandStatuses,
+            error,
+        });
+        handlers?.completeActive();
+    }, [isExecuting, commandStatuses, outputs, handlers, message, error]);
     useEffect(() => {
-        if (done) {
+        if (!isActive) {
             return;
         }
         if (!service) {
             setError('No service available');
-            setIsLoading(false);
             return;
         }
         let mounted = true;
@@ -173,9 +190,14 @@ export function Execute({ tasks, state, service, onError, onComplete, onAborted,
                 if (!mounted)
                     return;
                 if (!result.commands || result.commands.length === 0) {
-                    setIsLoading(false);
                     setOutputs([]);
-                    onComplete?.([], 0);
+                    setHasProcessed(true);
+                    // Save state before completing
+                    handlers?.updateState({
+                        message: result.message,
+                        commandStatuses: [],
+                    });
+                    handlers?.completeActive();
                     return;
                 }
                 // Resolve placeholders in command strings before execution
@@ -190,7 +212,6 @@ export function Execute({ tasks, state, service, onError, onComplete, onAborted,
                     status: ExecutionStatus.Pending,
                     label: tasks[index]?.action,
                 })));
-                setIsLoading(false);
                 setIsExecuting(true);
                 // Execute commands sequentially
                 const outputs = await executeCommands(resolvedCommands, (progress) => {
@@ -236,14 +257,14 @@ export function Execute({ tasks, state, service, onError, onComplete, onAborted,
                 await ensureMinimumTime(startTime, MINIMUM_PROCESSING_TIME);
                 if (mounted) {
                     const errorMessage = formatErrorMessage(err);
-                    setIsLoading(false);
                     setIsExecuting(false);
-                    if (onError) {
-                        onError(errorMessage);
-                    }
-                    else {
-                        setError(errorMessage);
-                    }
+                    setError(errorMessage);
+                    setHasProcessed(true);
+                    // Save error state
+                    handlers?.updateState({
+                        error: errorMessage,
+                    });
+                    handlers?.onError(errorMessage);
                 }
             }
         }
@@ -251,12 +272,12 @@ export function Execute({ tasks, state, service, onError, onComplete, onAborted,
         return () => {
             mounted = false;
         };
-    }, [tasks, done, service, onComplete, onError]);
+    }, [tasks, isActive, service, handlers]);
     // Return null only when loading completes with no commands
-    if (done && commandStatuses.length === 0 && !error) {
+    if (!isActive && commandStatuses.length === 0 && !error) {
         return null;
     }
-    // Show completed steps when done
-    const showCompletedSteps = done && commandStatuses.length > 0;
-    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(Box, { children: [_jsx(Text, { color: getTextColor(isCurrent), children: "Preparing commands. " }), _jsx(Spinner, {})] })), (isExecuting || showCompletedSteps) && (_jsxs(Box, { flexDirection: "column", children: [message && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: getTextColor(isCurrent), children: message }), isExecuting && (_jsxs(Text, { children: [' ', _jsx(Spinner, {})] }))] })), commandStatuses.map((item, index) => (_jsx(Box, { marginBottom: index < commandStatuses.length - 1 ? 1 : 0, children: _jsx(CommandStatusDisplay, { item: item, elapsed: index === runningIndex ? currentElapsed : undefined }) }, index)))] })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) }))] }));
+    // Show completed steps when not active
+    const showCompletedSteps = !isActive && commandStatuses.length > 0;
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(Box, { marginLeft: 1, children: [_jsx(Text, { color: getTextColor(isActive), children: "Preparing commands. " }), _jsx(Spinner, {})] })), (isExecuting || showCompletedSteps) && (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [message && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: getTextColor(isActive), children: message }), isExecuting && (_jsxs(Text, { children: [' ', _jsx(Spinner, {})] }))] })), commandStatuses.map((item, index) => (_jsx(Box, { marginBottom: index < commandStatuses.length - 1 ? 1 : 0, children: _jsx(CommandStatusDisplay, { item: item, elapsed: index === runningIndex ? currentElapsed : undefined }) }, index)))] })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) }))] }));
 }

package/dist/ui/Feedback.js

@@ -13,5 +13,5 @@ function getSymbol(type) {
 export function Feedback({ type, message }) {
     const color = getFeedbackColor(type, false);
     const symbol = getSymbol(type);
-    return (_jsx(Box, { children: _jsxs(Text, { color: color, children: [symbol, " ", message] }) }));
+    return (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: color, children: [symbol, " ", message] }) }));
 }