prompt-language-shell 0.5.2 → 0.6.0

package/dist/services/task-router.js

@@ -0,0 +1,135 @@
+import { TaskType } from '../types/types.js';
+import { createAnswerDefinition, createConfigDefinitionWithKeys, createConfirmDefinition, createExecuteDefinition, createFeedback, createIntrospectDefinition, createMessage, createPlanDefinition, createValidateDefinition, } from './components.js';
+import { saveConfig, unflattenConfig } from './configuration.js';
+import { FeedbackType } from '../types/types.js';
+import { validateExecuteTasks } from './execution-validator.js';
+import { getMixedTaskTypesError, getUnknownRequestMessage, } from './messages.js';
+/**
+ * Determine the operation name based on task types
+ */
+export function getOperationName(tasks) {
+    const allIntrospect = tasks.every((task) => task.type === TaskType.Introspect);
+    const allAnswer = tasks.every((task) => task.type === TaskType.Answer);
+    if (allIntrospect)
+        return 'introspection';
+    if (allAnswer)
+        return 'answer';
+    return 'execution';
+}
+/**
+ * Route tasks to appropriate components with Confirm flow
+ * Handles the complete flow: Plan → Confirm → Execute/Answer/Introspect
+ */
+export function routeTasksWithConfirm(tasks, message, service, userRequest, handlers, hasDefineTask = false) {
+    if (tasks.length === 0)
+        return;
+    // Filter out ignore and discard tasks early
+    const validTasks = tasks.filter((task) => task.type !== TaskType.Ignore && task.type !== TaskType.Discard);
+    // Check if no valid tasks remain after filtering
+    if (validTasks.length === 0) {
+        const message = createMessage(getUnknownRequestMessage());
+        handlers.addToQueue(message);
+        return;
+    }
+    const operation = getOperationName(validTasks);
+    // Create plan definition with valid tasks only
+    const planDefinition = createPlanDefinition(message, validTasks);
+    if (hasDefineTask) {
+        // Has DEFINE tasks - add Plan to queue for user selection
+        // Refinement flow will call this function again with refined tasks
+        handlers.addToQueue(planDefinition);
+    }
+    else {
+        // No DEFINE tasks - add Plan to timeline, create Confirm
+        const confirmDefinition = createConfirmDefinition(() => {
+            // User confirmed - route to appropriate component
+            handlers.completeActive();
+            executeTasksAfterConfirm(validTasks, service, userRequest, handlers);
+        }, () => {
+            // User cancelled
+            handlers.onAborted(operation);
+        });
+        handlers.addToTimeline(planDefinition);
+        handlers.addToQueue(confirmDefinition);
+    }
+}
+/**
+ * Validate that all tasks have the same type
+ * Per FLOWS.md: "Mixed types → Error (not supported)"
+ */
+function validateTaskTypes(tasks) {
+    if (tasks.length === 0)
+        return;
+    const types = new Set(tasks.map((task) => task.type));
+    if (types.size > 1) {
+        throw new Error(getMixedTaskTypesError(Array.from(types)));
+    }
+}
+/**
+ * Execute tasks after confirmation (internal helper)
+ * Validates task types after user has seen and confirmed the plan
+ */
+function executeTasksAfterConfirm(tasks, service, userRequest, handlers) {
+    // Validate all tasks have the same type after user confirmation
+    // Per FLOWS.md: "Confirm component completes → Execution handler analyzes task types"
+    try {
+        validateTaskTypes(tasks);
+    }
+    catch (error) {
+        handlers.onError(error instanceof Error ? error.message : String(error));
+        return;
+    }
+    const allIntrospect = tasks.every((task) => task.type === TaskType.Introspect);
+    const allAnswer = tasks.every((task) => task.type === TaskType.Answer);
+    const allConfig = tasks.every((task) => task.type === TaskType.Config);
+    if (allAnswer) {
+        const question = tasks[0].action;
+        handlers.addToQueue(createAnswerDefinition(question, service));
+    }
+    else if (allIntrospect) {
+        handlers.addToQueue(createIntrospectDefinition(tasks, service));
+    }
+    else if (allConfig) {
+        // Route to Config flow - extract keys from task params
+        const configKeys = tasks
+            .map((task) => task.params?.key)
+            .filter((key) => key !== undefined);
+        handlers.addToQueue(createConfigDefinitionWithKeys(configKeys, (config) => {
+            // Save config using the same pattern as Validate component
+            try {
+                // Convert flat dotted keys to nested structure grouped by section
+                const configBySection = unflattenConfig(config);
+                // Save each section
+                for (const [section, sectionConfig] of Object.entries(configBySection)) {
+                    saveConfig(section, sectionConfig);
+                }
+                handlers.completeActive();
+                handlers.addToQueue(createFeedback(FeedbackType.Succeeded, 'Configuration updated successfully.'));
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error
+                    ? error.message
+                    : 'Failed to save configuration';
+                handlers.onError(errorMessage);
+            }
+        }, (operation) => {
+            handlers.onAborted(operation);
+        }));
+    }
+    else {
+        // Execute tasks with validation
+        const missingConfig = validateExecuteTasks(tasks);
+        if (missingConfig.length > 0) {
+            handlers.addToQueue(createValidateDefinition(missingConfig, userRequest, service, (error) => {
+                handlers.onError(error);
+            }, () => {
+                handlers.addToQueue(createExecuteDefinition(tasks, service));
+            }, (operation) => {
+                handlers.onAborted(operation);
+            }));
+        }
+        else {
+            handlers.addToQueue(createExecuteDefinition(tasks, service));
+        }
+    }
+}

package/dist/types/types.js

@@ -11,7 +11,6 @@ export var ComponentName;
     ComponentName["Introspect"] = "introspect";
     ComponentName["Report"] = "report";
     ComponentName["Answer"] = "answer";
-    ComponentName["AnswerDisplay"] = "answerDisplay";
     ComponentName["Execute"] = "execute";
     ComponentName["Validate"] = "validate";
 })(ComponentName || (ComponentName = {}));

package/dist/ui/Answer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { Colors, getTextColor } from '../services/colors.js';
@@ -7,26 +7,22 @@ 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, service, onError, onComplete, onAborted, }) {
-    const done = state?.done ?? false;
-    const isCurrent = done === false;
+export function Answer({ question, state, isActive = true, service, handlers, }) {
     const [error, setError] = useState(null);
-    const [isLoading, setIsLoading] = useState(state?.isLoading ?? !done);
+    const [answer, setAnswer] = useState(state?.answer ?? null);
     useInput((input, key) => {
-        if (key.escape && isLoading && !done) {
-            setIsLoading(false);
-            onAborted();
+        if (key.escape && isActive) {
+            handlers?.onAborted('answer');
         }
-    }, { isActive: isLoading && !done });
+    }, { isActive });
     useEffect(() => {
         // Skip processing if done
-        if (done) {
+        if (!isActive) {
             return;
         }
         // Skip processing if no service available
         if (!service) {
             setError('No service available');
-            setIsLoading(false);
             return;
         }
         let mounted = true;
@@ -36,21 +32,19 @@ export function Answer({ question, state, service, onError, onComplete, onAborte
                 const result = await withMinimumTime(() => svc.processWithTool(question, 'answer'), MINIMUM_PROCESSING_TIME);
                 if (mounted) {
                     // Extract answer from result
-                    const answer = result.answer || '';
-                    setIsLoading(false);
-                    onComplete?.(answer);
+                    const answerText = result.answer || '';
+                    setAnswer(answerText);
+                    // Update component state so answer persists in timeline
+                    handlers?.updateState({ answer: answerText });
+                    // Signal completion
+                    handlers?.onComplete();
                 }
             }
             catch (err) {
                 if (mounted) {
                     const errorMessage = formatErrorMessage(err);
-                    setIsLoading(false);
-                    if (onError) {
-                        onError(errorMessage);
-                    }
-                    else {
-                        setError(errorMessage);
-                    }
+                    setError(errorMessage);
+                    handlers?.onError(errorMessage);
                 }
             }
         }
@@ -58,10 +52,7 @@ export function Answer({ question, state, service, onError, onComplete, onAborte
         return () => {
             mounted = false;
         };
-    }, [question, done, service, onComplete, onError]);
-    // Return null when done (like Introspect)
-    if (done || (!isLoading && !error)) {
-        return null;
-    }
-    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(Box, { children: [_jsx(Text, { color: getTextColor(isCurrent), children: "Finding answer. " }), _jsx(Spinner, {})] })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) }))] }));
+    }, [question, isActive, service, handlers]);
+    const lines = answer ? answer.split('\n') : [];
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isActive && !answer && !error && (_jsxs(Box, { marginLeft: 1, children: [_jsx(Text, { color: getTextColor(isActive), children: "Finding answer. " }), _jsx(Spinner, {})] })), answer && (_jsxs(_Fragment, { children: [_jsx(Box, { marginLeft: 1, marginBottom: 1, children: _jsx(Text, { color: getTextColor(isActive), children: question }) }), _jsx(Box, { flexDirection: "column", paddingLeft: 3, children: lines.map((line, index) => (_jsx(Text, { color: getTextColor(isActive), children: line }, index))) })] })), error && (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) }))] }));
 }

package/dist/ui/Command.js

@@ -1,32 +1,33 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import { TaskType } from '../types/types.js';
 import { Colors } from '../services/colors.js';
-import { useInput } from '../services/keyboard.js';
+import { createPlanDefinition } from '../services/components.js';
 import { formatErrorMessage } from '../services/messages.js';
+import { useInput } from '../services/keyboard.js';
+import { handleRefinement } from '../services/refinement.js';
+import { routeTasksWithConfirm } from '../services/task-router.js';
 import { ensureMinimumTime } from '../services/timing.js';
 import { Spinner } from './Spinner.js';
-const MIN_PROCESSING_TIME = 1000; // purely for visual effect
-export function Command({ command, state, service, children, onError, onComplete, onAborted, }) {
-    const done = state?.done ?? false;
-    const [error, setError] = useState(null);
-    const [isLoading, setIsLoading] = useState(state?.isLoading ?? !done);
-    useInput((input, key) => {
-        if (key.escape && isLoading && !done) {
-            setIsLoading(false);
-            onAborted();
+import { UserQuery } from './UserQuery.js';
+const MIN_PROCESSING_TIME = 400; // purely for visual effect
+export function Command({ command, state, isActive = true, service, handlers, onAborted, }) {
+    const [error, setError] = useState(state?.error ?? null);
+    useInput((_, key) => {
+        if (key.escape && isActive) {
+            handlers?.onAborted('request');
+            onAborted?.('request');
         }
-    }, { isActive: isLoading && !done });
+    }, { isActive });
     useEffect(() => {
-        // Skip processing if done (showing historical/final state)
-        if (done) {
+        // Skip processing if not active (showing historical/final state)
+        if (!isActive) {
             return;
         }
         // Skip processing if no service available
         if (!service) {
             setError('No service available');
-            setIsLoading(false);
             return;
         }
         let mounted = true;
@@ -45,21 +46,39 @@ export function Command({ command, state, service, children, onError, onComplete
                 }
                 await ensureMinimumTime(startTime, MIN_PROCESSING_TIME);
                 if (mounted) {
-                    setIsLoading(false);
-                    onComplete?.(result.message, result.tasks);
+                    // Save result to state for timeline display
+                    handlers?.updateState({
+                        message: result.message,
+                        tasks: result.tasks,
+                    });
+                    // Check if tasks contain DEFINE type (variant selection needed)
+                    const hasDefineTask = result.tasks.some((task) => task.type === TaskType.Define);
+                    // Create Plan definition
+                    const planDefinition = createPlanDefinition(result.message, result.tasks, hasDefineTask
+                        ? async (selectedTasks) => {
+                            // Refinement flow for DEFINE tasks
+                            await handleRefinement(selectedTasks, svc, command, handlers);
+                        }
+                        : undefined);
+                    if (hasDefineTask) {
+                        // Has DEFINE tasks: Add Plan to queue for selection
+                        // The refinement callback will handle routing after user selects
+                        handlers?.addToQueue(planDefinition);
+                    }
+                    else {
+                        // No DEFINE tasks: Use routing service for Confirm flow
+                        routeTasksWithConfirm(result.tasks, result.message, svc, command, handlers, false);
+                    }
+                    // Move Command to timeline
+                    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);
+                    handlers?.onError(errorMessage);
                 }
             }
         }
@@ -67,7 +86,6 @@ export function Command({ command, state, service, children, onError, onComplete
         return () => {
             mounted = false;
         };
-    }, [command, done, service]);
-    const isCurrent = done === false;
-    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [_jsxs(Box, { paddingX: done ? 1 : 0, marginX: done ? -1 : 0, backgroundColor: done ? Colors.Background.UserQuery : undefined, children: [_jsxs(Text, { color: isCurrent ? Colors.Text.Active : Colors.Text.UserQuery, children: ["> pls ", command] }), isLoading && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Spinner, {})] }))] }), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) })), children] }));
+    }, [command, isActive, service, handlers]);
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [!isActive ? (_jsxs(UserQuery, { children: ["> pls ", command] })) : (_jsxs(Box, { marginLeft: 1, children: [_jsxs(Text, { color: Colors.Text.Active, children: ["> pls ", command] }), _jsx(Text, { children: " " }), _jsx(Spinner, {})] })), error && (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) }))] }));
 }

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