prompt-language-shell 0.5.0 → 0.6.0

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,8 +88,8 @@ export function Config({ steps, state, debug, onFinished, onAborted }) {
         });
         return initial;
     });
-    const [inputValue, setInputValue] = React.useState('');
-    const [selectedIndex, setSelectedIndex] = React.useState(() => {
+    const [inputValue, setInputValue] = useState('');
+    const [selectedIndex, setSelectedIndex] = useState(() => {
         const firstStep = steps[0];
         return firstStep?.type === StepType.Selection ? firstStep.defaultIndex : 0;
     });
@@ -93,19 +100,20 @@ export function Config({ steps, state, debug, onFinished, onAborted }) {
         return value.replace(/\n/g, '').trim();
     };
     useInput((input, key) => {
-        if (key.escape && !done && step < steps.length) {
+        if (key.escape && isActive && step < steps.length) {
             // 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] ||
+                                values[configKey] ||
                                 '';
                         break;
                     default: {
@@ -114,16 +122,16 @@ 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) {
+        if (isActive && step < steps.length && currentStep) {
             switch (currentStep.type) {
                 case StepType.Selection:
                     if (key.tab) {
@@ -173,7 +181,9 @@ 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) {
@@ -181,9 +191,21 @@ export function Config({ steps, state, debug, onFinished, onAborted }) {
             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({
+                values: newValues,
+                completedStep: step + 1,
+            });
             setStep(step + 1);
             // Reset selection index for next step
             const nextStep = steps[step + 1];
@@ -193,15 +215,18 @@ export function Config({ steps, state, debug, onFinished, onAborted }) {
         }
     };
     const renderStepInput = (stepConfig, isCurrentStep) => {
+        const configKey = stepConfig.path || stepConfig.key;
+        // Use state values if not active (in timeline), otherwise use local values
+        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]);
+                    const selectedOption = stepConfig.options.find((opt) => opt.value === displayValue);
                     return _jsx(Text, { dimColor: true, children: selectedOption?.label || '' });
                 }
                 return (_jsx(SelectionStep, { options: stepConfig.options, selectedIndex: selectedIndex, isCurrentStep: isCurrentStep }));
@@ -212,14 +237,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?.onComplete();
+    }, [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?.onComplete();
                     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] }) }));
 }

package/dist/ui/Introspect.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import { Colors, getTextColor } from '../services/colors.js';
+import { createReportDefinition } from '../services/components.js';
 import { useInput } from '../services/keyboard.js';
 import { formatErrorMessage } from '../services/messages.js';
 import { ensureMinimumTime } from '../services/timing.js';
@@ -41,26 +42,22 @@ function parseCapabilityFromTask(task) {
         isIndirect,
     };
 }
-export function Introspect({ tasks, state, service, children, debug = false, onError, onComplete, onAborted, }) {
-    const done = state?.done ?? false;
-    const isCurrent = done === false;
+export function Introspect({ tasks, state, isActive = true, service, children, debug = false, handlers, }) {
+    // isActive passed as prop
     const [error, setError] = useState(null);
-    const [isLoading, setIsLoading] = useState(state?.isLoading ?? !done);
     useInput((input, key) => {
-        if (key.escape && isLoading && !done) {
-            setIsLoading(false);
-            onAborted();
+        if (key.escape && isActive) {
+            handlers?.onAborted('introspection');
         }
-    }, { isActive: isLoading && !done });
+    }, { isActive });
     useEffect(() => {
-        // Skip processing if done
-        if (done) {
+        // Skip processing if not active
+        if (!isActive) {
             return;
         }
         // Skip processing if no service available
         if (!service) {
             setError('No service available');
-            setIsLoading(false);
             return;
         }
         let mounted = true;
@@ -78,23 +75,30 @@ export function Introspect({ tasks, state, service, children, debug = false, onE
                     // Filter out internal capabilities when not in debug mode
                     if (!debug) {
                         capabilities = capabilities.filter((cap) => cap.name.toUpperCase() !== 'PLAN' &&
+                            cap.name.toUpperCase() !== 'VALIDATE' &&
                             cap.name.toUpperCase() !== 'REPORT');
                     }
-                    setIsLoading(false);
-                    onComplete?.(result.message, capabilities);
+                    // Save state before completing
+                    handlers?.updateState({
+                        capabilities,
+                        message: result.message,
+                    });
+                    // Add Report component to queue
+                    handlers?.addToQueue(createReportDefinition(result.message, capabilities));
+                    // Signal completion
+                    handlers?.onComplete();
                 }
             }
             catch (err) {
                 await ensureMinimumTime(startTime, MIN_PROCESSING_TIME);
                 if (mounted) {
                     const errorMessage = formatErrorMessage(err);
-                    setIsLoading(false);
-                    if (onError) {
-                        onError(errorMessage);
-                    }
-                    else {
-                        setError(errorMessage);
-                    }
+                    setError(errorMessage);
+                    // Save error state
+                    handlers?.updateState({
+                        error: errorMessage,
+                    });
+                    handlers?.onError(errorMessage);
                 }
             }
         }
@@ -102,10 +106,10 @@ export function Introspect({ tasks, state, service, children, debug = false, onE
         return () => {
             mounted = false;
         };
-    }, [tasks, done, service, debug, onComplete, onError]);
+    }, [tasks, isActive, service, debug, handlers]);
     // Don't render wrapper when done and nothing to show
-    if (!isLoading && !error && !children) {
+    if (!isActive && !error && !children) {
         return null;
     }
-    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(Box, { children: [_jsx(Text, { color: getTextColor(isCurrent), children: "Listing capabilities. " }), _jsx(Spinner, {})] })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) })), children] }));
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isActive && (_jsxs(Box, { marginLeft: 1, children: [_jsx(Text, { color: getTextColor(isActive), children: "Listing capabilities. " }), _jsx(Spinner, {})] })), error && (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) })), children] }));
 }