prompt-language-shell 0.8.4 → 0.8.8

package/dist/ui/Answer.js

@@ -1,20 +1,29 @@
 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 { 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, status, service, stateHandlers, lifecycleHandlers, errorHandlers, workflowHandlers, }) {
+export const AnswerView = ({ question, state, status }) => {
+    const isActive = status === ComponentStatus.Active;
+    const { error, answer } = state;
+    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] }) }))] }));
+};
+/**
+ * Answer controller: Fetches answer from LLM
+ */
+export function Answer({ question, status, service, requestHandlers, lifecycleHandlers, workflowHandlers, }) {
     const isActive = status === ComponentStatus.Active;
     const [error, setError] = useState(null);
-    const [answer, setAnswer] = useState(state?.answer ?? null);
+    const [answer, setAnswer] = useState(null);
     useInput((input, key) => {
         if (key.escape && isActive) {
-            errorHandlers?.onAborted('answer');
+            requestHandlers.onAborted('answer');
         }
     }, { isActive });
     useEffect(() => {
@@ -30,27 +39,32 @@ export function Answer({ question, state, status, service, stateHandlers, lifecy
                 if (mounted) {
                     // Add debug components to timeline if present
                     if (result.debug?.length) {
-                        workflowHandlers?.addToTimeline(...result.debug);
+                        workflowHandlers.addToTimeline(...result.debug);
                     }
                     // Extract answer from result
                     const answerText = result.answer || '';
                     setAnswer(answerText);
-                    // Update component state so answer persists in timeline
-                    stateHandlers?.updateState({
+                    // Expose final state
+                    const finalState = {
                         answer: answerText,
-                    });
+                        error: null,
+                    };
+                    requestHandlers.onCompleted(finalState);
                     // Signal completion
-                    lifecycleHandlers?.completeActive();
+                    lifecycleHandlers.completeActive();
                 }
             }
             catch (err) {
                 if (mounted) {
                     const errorMessage = formatErrorMessage(err);
                     setError(errorMessage);
-                    stateHandlers?.updateState({
+                    // Expose final state with error
+                    const finalState = {
                         error: errorMessage,
-                    });
-                    errorHandlers?.onError(errorMessage);
+                        answer: null,
+                    };
+                    requestHandlers.onCompleted(finalState);
+                    requestHandlers.onError(errorMessage);
                 }
             }
         }
@@ -58,7 +72,14 @@ export function Answer({ question, state, status, service, stateHandlers, lifecy
         return () => {
             mounted = false;
         };
-    }, [question, isActive, service]);
-    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] }) }))] }));
+    }, [
+        question,
+        isActive,
+        service,
+        requestHandlers,
+        lifecycleHandlers,
+        workflowHandlers,
+    ]);
+    const state = { error, answer };
+    return _jsx(AnswerView, { question: question, state: state, status: status });
 }

package/dist/ui/Command.js

@@ -1,7 +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 { ComponentStatus, } from '../types/components.js';
 import { TaskType } from '../types/types.js';
 import { Colors } from '../services/colors.js';
 import { createScheduleDefinition } from '../services/components.js';
@@ -13,12 +13,22 @@ 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, status, service, stateHandlers, lifecycleHandlers, queueHandlers, errorHandlers, workflowHandlers, onAborted, }) {
+export const CommandView = ({ command, state, status }) => {
     const isActive = status === ComponentStatus.Active;
-    const [error, setError] = useState(state?.error ?? null);
+    const { error } = state;
+    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] }) }))] }));
+};
+/**
+ * Command controller: Processes and routes command
+ */
+export function Command({ command, status, service, requestHandlers, lifecycleHandlers, workflowHandlers, onAborted, }) {
+    const isActive = status === ComponentStatus.Active;
+    const [error, setError] = useState(null);
+    const [message, setMessage] = useState(null);
+    const [tasks, setTasks] = useState([]);
     useInput((_, key) => {
         if (key.escape && isActive) {
-            errorHandlers?.onAborted('request');
+            requestHandlers.onAborted('request');
             onAborted?.('request');
         }
     }, { isActive });
@@ -52,38 +62,36 @@ export function Command({ command, state, status, service, stateHandlers, lifecy
                         ? [...scheduleDebug, ...(result.debug || [])]
                         : scheduleDebug;
                     if (debugComponents.length > 0) {
-                        workflowHandlers?.addToTimeline(...debugComponents);
+                        workflowHandlers.addToTimeline(...debugComponents);
                     }
-                    // Save result to state for timeline display
-                    stateHandlers?.updateState({
+                    // Update local state
+                    setMessage(result.message);
+                    setTasks(result.tasks);
+                    // Expose final state
+                    const finalState = {
+                        error: null,
                         message: result.message,
                         tasks: result.tasks,
-                    });
+                    };
+                    requestHandlers.onCompleted(finalState);
                     // Check if tasks contain DEFINE type (variant selection needed)
                     const hasDefineTask = result.tasks.some((task) => task.type === TaskType.Define);
-                    // Guard: ensure all required handlers are present
-                    if (!queueHandlers ||
-                        !lifecycleHandlers ||
-                        !workflowHandlers ||
-                        !errorHandlers) {
-                        return;
-                    }
                     // Create Schedule definition
                     const scheduleDefinition = createScheduleDefinition(result.message, result.tasks, hasDefineTask
                         ? async (selectedTasks) => {
                             // Refinement flow for DEFINE tasks
-                            await handleRefinement(selectedTasks, svc, command, queueHandlers, lifecycleHandlers, workflowHandlers, errorHandlers);
+                            await handleRefinement(selectedTasks, svc, command, lifecycleHandlers, workflowHandlers, requestHandlers);
                         }
                         : undefined);
                     if (hasDefineTask) {
                         // DEFINE tasks: Move Command to timeline, add Schedule to queue
                         lifecycleHandlers.completeActive();
-                        queueHandlers.addToQueue(scheduleDefinition);
+                        workflowHandlers.addToQueue(scheduleDefinition);
                     }
                     else {
                         // No DEFINE tasks: Complete Command, then route to Confirm flow
                         lifecycleHandlers.completeActive();
-                        routeTasksWithConfirm(result.tasks, result.message, svc, command, queueHandlers, workflowHandlers, errorHandlers, false);
+                        routeTasksWithConfirm(result.tasks, result.message, svc, command, lifecycleHandlers, workflowHandlers, requestHandlers, false);
                     }
                 }
             }
@@ -92,10 +100,14 @@ export function Command({ command, state, status, service, stateHandlers, lifecy
                 if (mounted) {
                     const errorMessage = formatErrorMessage(err);
                     setError(errorMessage);
-                    stateHandlers?.updateState({
+                    // Expose final state with error
+                    const finalState = {
                         error: errorMessage,
-                    });
-                    errorHandlers?.onError(errorMessage);
+                        message: null,
+                        tasks: [],
+                    };
+                    requestHandlers.onCompleted(finalState);
+                    requestHandlers.onError(errorMessage);
                 }
             }
         }
@@ -103,6 +115,14 @@ export function Command({ command, state, status, service, stateHandlers, lifecy
         return () => {
             mounted = false;
         };
-    }, [command, isActive, service]);
-    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] }) }))] }));
+    }, [
+        command,
+        isActive,
+        service,
+        requestHandlers,
+        lifecycleHandlers,
+        workflowHandlers,
+    ]);
+    const state = { error, message, tasks };
+    return _jsx(CommandView, { command: command, state: state, status: status });
 }

package/dist/ui/Component.js

@@ -1,49 +1,163 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { ComponentName } from '../types/types.js';
-import { Answer } from './Answer.js';
-import { Command } from './Command.js';
-import { Config } from './Config.js';
-import { Confirm } from './Confirm.js';
+import { Answer, AnswerView } from './Answer.js';
+import { Command, CommandView } from './Command.js';
+import { Config, ConfigView } from './Config.js';
+import { Confirm, ConfirmView } from './Confirm.js';
 import { Debug } from './Debug.js';
-import { Execute } from './Execute.js';
+import { Execute, ExecuteView } from './Execute.js';
 import { Feedback } from './Feedback.js';
-import { Introspect } from './Introspect.js';
+import { Introspect, IntrospectView } from './Introspect.js';
 import { Message } from './Message.js';
-import { Refinement } from './Refinement.js';
+import { Refinement, RefinementView } from './Refinement.js';
 import { Report } from './Report.js';
-import { Schedule } from './Schedule.js';
-import { Validate } from './Validate.js';
+import { Schedule, ScheduleView } from './Schedule.js';
+import { Validate, ValidateView } from './Validate.js';
 import { Welcome } from './Welcome.js';
-export const Component = memo(function Component({ def, debug, }) {
+/**
+ * Render a simple component (no lifecycle management)
+ */
+export const SimpleComponent = memo(function SimpleComponent({ def, }) {
     switch (def.name) {
+        case ComponentName.Welcome: {
+            const { props, status } = def;
+            return _jsx(Welcome, { ...props, status: status });
+        }
+        case ComponentName.Feedback: {
+            const { props, status } = def;
+            return _jsx(Feedback, { ...props, status: status });
+        }
+        case ComponentName.Message: {
+            const { props, status } = def;
+            return _jsx(Message, { ...props, status: status });
+        }
+        case ComponentName.Debug: {
+            const { props, status } = def;
+            return _jsx(Debug, { ...props, status: status });
+        }
+        case ComponentName.Report: {
+            const { props, status } = def;
+            return _jsx(Report, { ...props, status: status });
+        }
+        default:
+            throw new Error(`Unknown simple component: ${def.name}`);
+    }
+});
+/**
+ * Render a managed component (controller with lifecycle management)
+ */
+export const ControllerComponent = memo(function ControllerComponent({ def, debug, requestHandlers, lifecycleHandlers, workflowHandlers, }) {
+    switch (def.name) {
+        case ComponentName.Config: {
+            const { props: { steps, onFinished, onAborted }, status, } = def;
+            return (_jsx(Config, { steps: steps, onFinished: onFinished, onAborted: onAborted, requestHandlers: requestHandlers, lifecycleHandlers: lifecycleHandlers, status: status, debug: debug }));
+        }
+        case ComponentName.Command: {
+            const { props: { command, service, onAborted }, status, } = def;
+            return (_jsx(Command, { command: command, service: service, onAborted: onAborted, requestHandlers: requestHandlers, lifecycleHandlers: lifecycleHandlers, workflowHandlers: workflowHandlers, status: status }));
+        }
+        case ComponentName.Schedule: {
+            const { props: { message, tasks, onSelectionConfirmed }, status, } = def;
+            return (_jsx(Schedule, { message: message, tasks: tasks, onSelectionConfirmed: onSelectionConfirmed, requestHandlers: requestHandlers, lifecycleHandlers: lifecycleHandlers, status: status, debug: debug }));
+        }
+        case ComponentName.Refinement: {
+            const { props: { text, onAborted }, status, } = def;
+            return (_jsx(Refinement, { text: text, onAborted: onAborted, requestHandlers: requestHandlers, status: status }));
+        }
+        case ComponentName.Confirm: {
+            const { props: { message, onConfirmed, onCancelled }, status, } = def;
+            return (_jsx(Confirm, { message: message, onConfirmed: onConfirmed, onCancelled: onCancelled, requestHandlers: requestHandlers, status: status }));
+        }
+        case ComponentName.Introspect: {
+            const { props: { tasks, service, children }, status, } = def;
+            return (_jsx(Introspect, { tasks: tasks, service: service, children: children, requestHandlers: requestHandlers, lifecycleHandlers: lifecycleHandlers, workflowHandlers: workflowHandlers, status: status, debug: debug }));
+        }
+        case ComponentName.Answer: {
+            const { props: { question, service }, status, } = def;
+            return (_jsx(Answer, { question: question, service: service, requestHandlers: requestHandlers, lifecycleHandlers: lifecycleHandlers, workflowHandlers: workflowHandlers, status: status }));
+        }
+        case ComponentName.Validate: {
+            const { props: { missingConfig, userRequest, service, onError, onValidationComplete, onAborted, }, status, } = def;
+            return (_jsx(Validate, { missingConfig: missingConfig, userRequest: userRequest, service: service, onError: onError, onValidationComplete: onValidationComplete, onAborted: onAborted, requestHandlers: requestHandlers, lifecycleHandlers: lifecycleHandlers, workflowHandlers: workflowHandlers, status: status }));
+        }
+        case ComponentName.Execute: {
+            const { props: { tasks, service }, status, } = def;
+            return (_jsx(Execute, { tasks: tasks, service: service, requestHandlers: requestHandlers, lifecycleHandlers: lifecycleHandlers, workflowHandlers: workflowHandlers, status: status }));
+        }
+        default:
+            throw new Error(`Unknown managed component: ${def.name}`);
+    }
+});
+/**
+ * Render a managed component as View only (no Controller logic)
+ */
+export const ViewComponent = memo(function ViewComponent({ def, }) {
+    switch (def.name) {
+        case ComponentName.Confirm: {
+            const { props: { message }, state, status, } = def;
+            return _jsx(ConfirmView, { message: message, state: state, status: status });
+        }
+        case ComponentName.Config: {
+            const { props: { steps }, state, status, } = def;
+            return _jsx(ConfigView, { steps: steps, state: state, status: status });
+        }
+        case ComponentName.Schedule: {
+            const { props: { message, tasks }, state, status, } = def;
+            return (_jsx(ScheduleView, { message: message, tasks: tasks, state: state, status: status }));
+        }
+        case ComponentName.Execute: {
+            const { props: { tasks }, state, status, } = def;
+            return _jsx(ExecuteView, { tasks: tasks, state: state, status: status });
+        }
+        case ComponentName.Answer: {
+            const { props: { question }, state, status, } = def;
+            return _jsx(AnswerView, { question: question, state: state, status: status });
+        }
+        case ComponentName.Command: {
+            const { props: { command }, state, status, } = def;
+            return _jsx(CommandView, { command: command, state: state, status: status });
+        }
+        case ComponentName.Introspect: {
+            const { props: { children }, state, status, } = def;
+            return (_jsx(IntrospectView, { state: state, status: status, children: children }));
+        }
+        case ComponentName.Validate: {
+            const { state, status } = def;
+            return _jsx(ValidateView, { state: state, status: status });
+        }
+        case ComponentName.Refinement: {
+            const { props: { text }, status, } = def;
+            return _jsx(RefinementView, { text: text, status: status });
+        }
+        default:
+            throw new Error(`Unknown managed component: ${def.name}`);
+    }
+});
+/**
+ * Render a component in the timeline (Views only for managed, as-is for simple)
+ */
+export const TimelineComponent = ({ def, }) => {
+    switch (def.name) {
+        // Simple components render as-is
         case ComponentName.Welcome:
-            return _jsx(Welcome, { ...def.props, status: def.status });
-        case ComponentName.Config:
-            return (_jsx(Config, { ...def.props, state: def.state, status: def.status, debug: debug }));
-        case ComponentName.Command:
-            return _jsx(Command, { ...def.props, state: def.state, status: def.status });
-        case ComponentName.Schedule:
-            return (_jsx(Schedule, { ...def.props, state: def.state, status: def.status, debug: debug }));
         case ComponentName.Feedback:
-            return _jsx(Feedback, { ...def.props, status: def.status });
         case ComponentName.Message:
-            return _jsx(Message, { ...def.props, status: def.status });
         case ComponentName.Debug:
-            return _jsx(Debug, { ...def.props, status: def.status });
-        case ComponentName.Refinement:
-            return (_jsx(Refinement, { ...def.props, state: def.state, status: def.status }));
-        case ComponentName.Confirm:
-            return _jsx(Confirm, { ...def.props, state: def.state, status: def.status });
-        case ComponentName.Introspect:
-            return (_jsx(Introspect, { ...def.props, state: def.state, status: def.status, debug: debug }));
         case ComponentName.Report:
-            return _jsx(Report, { ...def.props, status: def.status });
-        case ComponentName.Answer:
-            return _jsx(Answer, { ...def.props, state: def.state, status: def.status });
-        case ComponentName.Execute:
-            return _jsx(Execute, { ...def.props, state: def.state, status: def.status });
+            return _jsx(SimpleComponent, { def: def });
+        // Managed components render as Views
+        case ComponentName.Config:
+        case ComponentName.Command:
+        case ComponentName.Confirm:
+        case ComponentName.Schedule:
+        case ComponentName.Refinement:
         case ComponentName.Validate:
-            return (_jsx(Validate, { ...def.props, state: def.state, status: def.status, debug: debug }));
+        case ComponentName.Execute:
+        case ComponentName.Answer:
+        case ComponentName.Introspect:
+            return _jsx(ViewComponent, { def: def });
+        default:
+            throw new Error('Unknown component type');
     }
-});
+};

package/dist/ui/Config.js

@@ -6,7 +6,7 @@ import { ComponentStatus } from '../types/components.js';
 import { FeedbackType } from '../types/types.js';
 import { Colors } from '../services/colors.js';
 import { createFeedback } from '../services/components.js';
-import { DebugLevel } from '../services/configuration.js';
+import { DebugLevel } from '../configuration/types.js';
 import { useInput } from '../services/keyboard.js';
 /**
  * Get postfix with debug brackets if debug is enabled
@@ -78,16 +78,52 @@ function SelectionStep({ options, selectedIndex, isCurrentStep, }) {
             return (_jsx(Box, { marginRight: 2, children: _jsx(Text, { dimColor: !isSelected || !isCurrentStep, bold: isSelected, children: option.label }) }, option.value));
         }) }));
 }
+export const ConfigView = ({ steps, state, status, debug = DebugLevel.None, onInputChange, onInputSubmit, }) => {
+    const isActive = status === ComponentStatus.Active;
+    const { values, completedStep, selectedIndex } = state;
+    const renderStepInput = (stepConfig, isCurrentStep) => {
+        const configKey = stepConfig.path || stepConfig.key;
+        const displayValue = values[configKey];
+        switch (stepConfig.type) {
+            case StepType.Text:
+                if (isCurrentStep && onInputChange && onInputSubmit) {
+                    return (_jsx(TextStep, { value: values[configKey] || '', placeholder: stepConfig.value || undefined, validate: stepConfig.validate, onChange: onInputChange, onSubmit: onInputSubmit }));
+                }
+                return (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: displayValue || '' }));
+            case StepType.Selection: {
+                if (!isCurrentStep) {
+                    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: true }));
+            }
+            default: {
+                const _exhaustiveCheck = stepConfig;
+                throw new Error('Unsupported step type');
+            }
+        }
+    };
+    return (_jsx(Box, { flexDirection: "column", marginLeft: 1, children: steps.map((stepConfig, index) => {
+            const isCurrentStep = index === completedStep && isActive;
+            const isCompleted = index < completedStep;
+            const wasAborted = index === completedStep && !isActive;
+            const shouldShow = isCompleted || isCurrentStep || wasAborted;
+            if (!shouldShow) {
+                return null;
+            }
+            const postfix = getPostfix(stepConfig.path, debug);
+            return (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { children: stepConfig.description }), _jsx(Text, { children: ": " }), postfix && _jsx(Text, { color: Colors.Type.Config, children: postfix })] }), _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));
+        }) }));
+};
+/**
+ * Config controller: Multi-step wizard logic
+ */
 export function Config(props) {
-    const { steps, state, status, debug = DebugLevel.None, stateHandlers, lifecycleHandlers, onFinished, onAborted, } = props;
+    const { steps, status, debug = DebugLevel.None, requestHandlers, lifecycleHandlers, onFinished, onAborted, } = props;
     const isActive = status === ComponentStatus.Active;
-    const [step, setStep] = useState(!isActive ? (state?.completedStep ?? steps.length) : 0);
+    const [step, setStep] = useState(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
+        // Initialize from step defaults
         const initial = {};
         steps.forEach((stepConfig) => {
             // Use full path if available, otherwise use key
@@ -112,26 +148,14 @@ export function Config(props) {
     });
     const [inputValue, setInputValue] = useState(() => {
         // Initialize with the current step's value if available
-        if (isActive && step < steps.length) {
+        if (step < steps.length) {
             const stepConfig = steps[step];
             const configKey = stepConfig.path || stepConfig.key;
             return values[configKey] || '';
         }
         return '';
     });
-    const [selectedIndex, setSelectedIndex] = useState(() => {
-        // If not active, use saved state
-        if (!isActive && state?.selectedIndex !== undefined) {
-            return state.selectedIndex;
-        }
-        // 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 [selectedIndex, setSelectedIndex] = useState(0);
     const normalizeValue = (value) => {
         if (value === null || value === undefined) {
             return '';
@@ -167,20 +191,25 @@ export function Config(props) {
                     throw new Error('Unsupported step type');
                 }
             }
-            if (currentValue) {
-                setValues({ ...values, [configKey]: currentValue });
-            }
-            // Save state before aborting
-            stateHandlers?.updateState({
-                values,
+            const finalValues = currentValue
+                ? { ...values, [configKey]: currentValue }
+                : values;
+            // Expose final state
+            const finalState = {
+                values: finalValues,
                 completedStep: step,
                 selectedIndex,
-            });
+            };
+            requestHandlers.onCompleted(finalState);
+            // Abort configuration
             if (onAborted) {
+                // Let Workflow handler complete and add feedback
                 onAborted('configuration');
             }
-            // Complete with abort feedback
-            lifecycleHandlers?.completeActive(createFeedback(FeedbackType.Aborted, 'Configuration cancelled.'));
+            else {
+                // Fallback: complete with abort feedback directly
+                lifecycleHandlers.completeActive(createFeedback(FeedbackType.Aborted, 'Configuration cancelled.'));
+            }
             return;
         }
         // Handle selection step navigation
@@ -192,7 +221,7 @@ export function Config(props) {
                 handleSubmit(currentStepConfig.options[selectedIndex].value);
             }
         }
-    });
+    }, { isActive });
     const handleSubmit = (value) => {
         const currentStepConfig = steps[step];
         let finalValue = '';
@@ -230,37 +259,29 @@ export function Config(props) {
         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 = {
+            // Expose final state
+            const finalState = {
                 values: newValues,
                 completedStep: steps.length,
                 selectedIndex,
             };
-            stateHandlers?.updateState(stateUpdate);
+            requestHandlers.onCompleted(finalState);
             // Call onFinished callback and handle result
             try {
                 if (onFinished) {
                     onFinished(newValues);
                 }
                 // Success - complete with success feedback
-                lifecycleHandlers?.completeActive(createFeedback(FeedbackType.Succeeded, 'Configuration saved successfully.'));
+                lifecycleHandlers.completeActive(createFeedback(FeedbackType.Succeeded, 'Configuration saved successfully.'));
             }
             catch (error) {
                 // Failure - complete with error feedback
                 const errorMessage = error instanceof Error ? error.message : 'Configuration failed';
-                lifecycleHandlers?.completeActive(createFeedback(FeedbackType.Failed, errorMessage));
+                lifecycleHandlers.completeActive(createFeedback(FeedbackType.Failed, errorMessage));
             }
             setStep(steps.length);
         }
         else {
-            // Save state after each step
-            const stateUpdate = {
-                values: newValues,
-                completedStep: step + 1,
-                selectedIndex,
-            };
-            stateHandlers?.updateState(stateUpdate);
             const nextStep = step + 1;
             setStep(nextStep);
             // Reset selectedIndex for next step
@@ -270,39 +291,12 @@ export function Config(props) {
             }
         }
     };
-    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, wrap: "truncate-end", children: displayValue || '' }));
-            case StepType.Selection: {
-                if (!isCurrentStep) {
-                    // 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: true }));
-            }
-            default: {
-                const _exhaustiveCheck = stepConfig;
-                throw new Error('Unsupported step type');
-            }
-        }
+    // Build current state for View
+    // Controller always renders View, passing current state and callbacks
+    const state = {
+        values,
+        completedStep: step,
+        selectedIndex,
     };
-    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 && !isActive;
-            const shouldShow = isCompleted || isCurrentStep || wasAborted;
-            if (!shouldShow) {
-                return null;
-            }
-            const postfix = getPostfix(stepConfig.path, debug);
-            return (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { children: stepConfig.description }), _jsx(Text, { children: ": " }), postfix && _jsx(Text, { color: Colors.Type.Config, children: postfix })] }), _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));
-        }) }));
+    return (_jsx(ConfigView, { steps: steps, state: state, status: status, debug: debug, onInputChange: setInputValue, onInputSubmit: handleSubmit }));
 }