prompt-language-shell 0.5.2 → 0.6.2

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;
@@ -81,21 +78,27 @@ export function Introspect({ tasks, state, service, children, debug = false, onE
                             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?.completeActive();
                 }
             }
             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);
                 }
             }
         }
@@ -103,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] }));
 }

package/dist/ui/Main.js

@@ -1,33 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { FeedbackType } from '../types/types.js';
 import { createAnthropicService, } from '../services/anthropic.js';
-import { createCommandDefinition, createConfigDefinition, createFeedback, createMessage, createWelcomeDefinition, isStateless, markAsDone, } from '../services/components.js';
-import { getConfigurationRequiredMessage, hasValidAnthropicKey, loadConfig, loadDebugSetting, saveDebugSetting, } from '../services/configuration.js';
+import { createCommandDefinition, createConfigDefinitionWithKeys, createFeedback, createMessage, createWelcomeDefinition, } from '../services/components.js';
+import { getConfigurationRequiredMessage, getMissingConfigKeys, loadConfig, loadDebugSetting, saveAnthropicConfig, saveDebugSetting, } from '../services/configuration.js';
 import { registerGlobalShortcut } from '../services/keyboard.js';
-import { getCancellationMessage } from '../services/messages.js';
-import { exitApp } from '../services/process.js';
-import { createAnswerHandlers } from '../handlers/answer.js';
-import { createCommandHandlers } from '../handlers/command.js';
-import { createConfigHandlers } from '../handlers/config.js';
-import { createExecuteHandlers } from '../handlers/execute.js';
-import { createExecutionHandlers } from '../handlers/execution.js';
-import { createIntrospectHandlers } from '../handlers/introspect.js';
-import { createPlanHandlers } from '../handlers/plan.js';
-import { Column } from './Column.js';
+import { Workflow } from './Workflow.js';
 export const Main = ({ app, command }) => {
-    const [service, setService] = React.useState(() => {
-        if (hasValidAnthropicKey()) {
-            const config = loadConfig();
-            return createAnthropicService(config.anthropic);
-        }
-        return null;
-    });
-    const [timeline, setTimeline] = React.useState([]);
-    const [queue, setQueue] = React.useState([]);
-    const [isDebug, setIsDebug] = React.useState(() => loadDebugSetting());
+    const [service, setService] = useState(null);
+    const [initialQueue, setInitialQueue] = useState(null);
+    const [isDebug, setIsDebug] = useState(() => loadDebugSetting());
     // Register global keyboard shortcuts
-    React.useEffect(() => {
+    useEffect(() => {
         registerGlobalShortcut('shift+tab', () => {
             setIsDebug((prev) => {
                 const newValue = !prev;
@@ -36,88 +20,75 @@ export const Main = ({ app, command }) => {
             });
         });
     }, []);
-    const addToTimeline = React.useCallback((...items) => {
-        setTimeline((timeline) => [...timeline, ...items]);
-    }, []);
-    const processNextInQueue = React.useCallback(() => {
-        setQueue((currentQueue) => {
-            if (currentQueue.length === 0)
-                return currentQueue;
-            const [first, ...rest] = currentQueue;
-            if (isStateless(first)) {
-                addToTimeline(first);
-                return rest;
+    // Initialize service on mount
+    useEffect(() => {
+        if (service !== null) {
+            return;
+        }
+        const missingKeys = getMissingConfigKeys();
+        if (missingKeys.length === 0) {
+            // Config exists - create service immediately
+            try {
+                const config = loadConfig();
+                const newService = createAnthropicService(config.anthropic);
+                setService(newService);
             }
-            return currentQueue;
-        });
-    }, [addToTimeline]);
-    // Core abort handler
-    const handleAborted = React.useCallback((operationName) => {
-        setQueue((currentQueue) => {
-            if (currentQueue.length === 0)
-                return currentQueue;
-            const [first] = currentQueue;
-            if (!isStateless(first)) {
-                addToTimeline(markAsDone(first), createFeedback(FeedbackType.Aborted, getCancellationMessage(operationName)));
+            catch (error) {
+                // Service creation failed - show error and exit
+                const errorMessage = error instanceof Error
+                    ? error.message
+                    : 'Failed to initialize service';
+                setInitialQueue([createFeedback(FeedbackType.Failed, errorMessage)]);
             }
-            exitApp(0);
-            return [];
-        });
-    }, [addToTimeline]);
-    // Create operations object
-    const ops = React.useMemo(() => ({
-        addToTimeline,
-        setQueue,
-        service,
-    }), [addToTimeline, service]);
-    // Create handlers in dependency order
-    const introspectHandlers = React.useMemo(() => createIntrospectHandlers(ops, handleAborted), [ops, handleAborted]);
-    const answerHandlers = React.useMemo(() => createAnswerHandlers(ops, handleAborted), [ops, handleAborted]);
-    const executeHandlers = React.useMemo(() => createExecuteHandlers(ops, handleAborted), [ops, handleAborted]);
-    const executionHandlers = React.useMemo(() => createExecutionHandlers(ops, {
-        introspect: introspectHandlers,
-        answer: answerHandlers,
-        execute: executeHandlers,
-    }), [ops, introspectHandlers, answerHandlers, executeHandlers]);
-    const planHandlers = React.useMemo(() => createPlanHandlers(ops, handleAborted, executionHandlers), [ops, handleAborted, executionHandlers]);
-    const commandHandlers = React.useMemo(() => createCommandHandlers(ops, handleAborted, planHandlers, executionHandlers), [ops, handleAborted, planHandlers, executionHandlers]);
-    const configHandlers = React.useMemo(() => createConfigHandlers(ops, handleAborted, command, commandHandlers, setService), [ops, handleAborted, command, commandHandlers]);
-    // Initialize queue on mount
-    React.useEffect(() => {
-        const hasConfig = !!service;
-        if (command && hasConfig) {
-            setQueue([
-                createCommandDefinition(command, service, commandHandlers.onError, commandHandlers.onComplete, commandHandlers.onAborted),
-            ]);
         }
-        else if (command && !hasConfig) {
-            setQueue([
-                createMessage(getConfigurationRequiredMessage()),
-                createConfigDefinition(configHandlers.onFinished, configHandlers.onAborted),
-            ]);
+        // If config is missing, service will be created after config completes
+    }, [service]);
+    // Initialize queue after service is ready
+    useEffect(() => {
+        // Only set initial queue once
+        if (initialQueue !== null) {
+            return;
         }
-        else if (!command && hasConfig) {
-            setQueue([createWelcomeDefinition(app)]);
-        }
-        else {
-            setQueue([
+        const missingKeys = getMissingConfigKeys();
+        if (missingKeys.length > 0) {
+            // Missing config - show initial configuration flow
+            const handleConfigFinished = (config) => {
+                // Save config and create service
+                try {
+                    const newConfig = saveAnthropicConfig(config);
+                    const newService = createAnthropicService(newConfig.anthropic);
+                    setService(newService);
+                }
+                catch (error) {
+                    // Config creation failed - show error
+                    const errorMessage = error instanceof Error
+                        ? error.message
+                        : 'Failed to save configuration';
+                    setInitialQueue([createFeedback(FeedbackType.Failed, errorMessage)]);
+                }
+            };
+            const handleConfigAborted = (operation) => {
+                // Config was cancelled - just exit
+            };
+            setInitialQueue([
                 createWelcomeDefinition(app),
-                createMessage(getConfigurationRequiredMessage(true)),
-                createConfigDefinition(configHandlers.onFinished, configHandlers.onAborted),
+                createMessage(getConfigurationRequiredMessage()),
+                createConfigDefinitionWithKeys(missingKeys, handleConfigFinished, handleConfigAborted),
             ]);
         }
-    }, []);
-    // Process queue whenever it changes
-    React.useEffect(() => {
-        processNextInQueue();
-    }, [queue, processNextInQueue]);
-    // Exit when queue is empty and timeline has content
-    React.useEffect(() => {
-        if (queue.length === 0 && timeline.length > 0) {
-            exitApp(0);
+        else if (service && command) {
+            // Valid service exists and command provided - execute command
+            setInitialQueue([createCommandDefinition(command, service)]);
+        }
+        else if (service && !command) {
+            // Valid service exists, no command - show welcome
+            setInitialQueue([createWelcomeDefinition(app)]);
         }
-    }, [queue, timeline]);
-    const current = queue.length > 0 ? queue[0] : null;
-    const items = React.useMemo(() => [...timeline, ...(current ? [current] : [])], [timeline, current]);
-    return _jsx(Column, { items: items, debug: isDebug });
+        // Wait for service to be initialized before setting queue
+    }, [app, command, service, initialQueue]);
+    // Don't render until initial queue is ready
+    if (initialQueue === null) {
+        return null;
+    }
+    return _jsx(Workflow, { initialQueue: initialQueue, debug: isDebug });
 };

package/dist/ui/Message.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 export const Message = ({ text }) => {
-    return (_jsx(Box, { children: _jsx(Text, { children: text }) }));
+    return (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { children: text }) }));
 };

package/dist/ui/Plan.js

@@ -49,11 +49,11 @@ function taskToListItem(task, highlightedChildIndex = null, isDefineTaskWithoutS
     }
     return item;
 }
-export function Plan({ message, tasks, state, debug = false, onSelectionConfirmed, onAborted, }) {
+export function Plan({ message, tasks, state, isActive = true, debug = false, handlers, onSelectionConfirmed, }) {
+    // isActive passed as prop
     const [highlightedIndex, setHighlightedIndex] = useState(state?.highlightedIndex ?? null);
     const [currentDefineGroupIndex, setCurrentDefineGroupIndex] = useState(state?.currentDefineGroupIndex ?? 0);
     const [completedSelections, setCompletedSelections] = useState(state?.completedSelections ?? []);
-    const [isDone, setIsDone] = useState(state?.done ?? false);
     // Find all Define tasks
     const defineTaskIndices = tasks
         .map((t, idx) => (t.type === TaskType.Define ? idx : -1))
@@ -65,13 +65,29 @@ export function Plan({ message, tasks, state, debug = false, onSelectionConfirme
         ? defineTask.params.options.length
         : 0;
     const hasMoreGroups = currentDefineGroupIndex < defineTaskIndices.length - 1;
+    // If no DEFINE tasks, immediately confirm with all tasks
+    useEffect(() => {
+        if (isActive && defineTaskIndices.length === 0 && onSelectionConfirmed) {
+            // No selection needed - all tasks are concrete
+            const concreteTasks = tasks.filter((task) => task.type !== TaskType.Ignore && task.type !== TaskType.Discard);
+            onSelectionConfirmed(concreteTasks);
+            // Signal Plan completion after adding Confirm to queue
+            handlers?.completeActive();
+        }
+    }, [
+        isActive,
+        defineTaskIndices.length,
+        tasks,
+        onSelectionConfirmed,
+        handlers,
+    ]);
     useInput((input, key) => {
-        // Don't handle input if already done or no define task
-        if (isDone || !defineTask) {
+        // Don't handle input if not active or no define task
+        if (!isActive || !defineTask) {
             return;
         }
         if (key.escape) {
-            onAborted();
+            handlers?.onAborted('task selection');
             return;
         }
         if (key.downArrow) {
@@ -97,16 +113,13 @@ export function Plan({ message, tasks, state, debug = false, onSelectionConfirme
             setCompletedSelections(newCompletedSelections);
             if (hasMoreGroups) {
                 // Advance to next group
-                setCurrentDefineGroupIndex(currentDefineGroupIndex + 1);
+                const newGroupIndex = currentDefineGroupIndex + 1;
+                setCurrentDefineGroupIndex(newGroupIndex);
                 setHighlightedIndex(null);
             }
             else {
-                // Last group - mark as done to show the selection
-                setIsDone(true);
-                setHighlightedIndex(null); // Clear highlight to show Execute color
-                if (state) {
-                    state.done = true;
-                }
+                // Clear highlight to show Execute color
+                setHighlightedIndex(null);
                 // Build refined task list with only selected options (no discarded or ignored ones)
                 const refinedTasks = [];
                 tasks.forEach((task, idx) => {
@@ -116,8 +129,10 @@ export function Plan({ message, tasks, state, debug = false, onSelectionConfirme
                         // This is a Define task - only include the selected option
                         const options = task.params.options;
                         const selectedIndex = newCompletedSelections[defineGroupIndex];
+                        const selectedOption = String(options[selectedIndex]);
+                        // Use Execute as default - LLM will properly classify during refinement
                         refinedTasks.push({
-                            action: String(options[selectedIndex]),
+                            action: selectedOption,
                             type: TaskType.Execute,
                         });
                     }
@@ -127,26 +142,33 @@ export function Plan({ message, tasks, state, debug = false, onSelectionConfirme
                         refinedTasks.push(task);
                     }
                 });
-                onSelectionConfirmed?.(refinedTasks);
+                if (onSelectionConfirmed) {
+                    // Callback will handle the entire flow (Refinement, refined Plan, Confirm)
+                    // So we need to complete the Plan first
+                    handlers?.completeActive();
+                    onSelectionConfirmed(refinedTasks);
+                }
+                else {
+                    // No selection callback, just complete normally
+                    handlers?.completeActive();
+                }
             }
         }
-    }, { isActive: !isDone && defineTask !== null });
-    // Sync state back to state object
+    }, { isActive: isActive && defineTask !== null });
+    // Sync state back to component definition
+    // This ensures timeline can render historical state and tests can validate behavior
     useEffect(() => {
-        if (state) {
-            state.highlightedIndex = highlightedIndex;
-            state.currentDefineGroupIndex = currentDefineGroupIndex;
-            state.completedSelections = completedSelections;
-            state.done = isDone;
-        }
+        handlers?.updateState({
+            highlightedIndex,
+            currentDefineGroupIndex,
+            completedSelections,
+        });
     }, [
         highlightedIndex,
         currentDefineGroupIndex,
         completedSelections,
-        isDone,
-        state,
+        handlers,
     ]);
-    const isCurrent = isDone === false;
     const listItems = tasks.map((task, idx) => {
         // Find which define group this task belongs to (if any)
         const defineGroupIndex = defineTaskIndices.indexOf(idx);
@@ -159,9 +181,9 @@ export function Plan({ message, tasks, state, debug = false, onSelectionConfirme
                 childIndex = completedSelections[defineGroupIndex] ?? null;
             }
             else if (defineGroupIndex === currentDefineGroupIndex) {
-                // Current active group - show live navigation unless done
-                if (isDone) {
-                    // If done, show the completed selection for this group too
+                // Current active group - show live navigation unless not active
+                if (!isActive) {
+                    // If not active, show the completed selection for this group too
                     childIndex = completedSelections[defineGroupIndex] ?? null;
                 }
                 else {
@@ -169,12 +191,12 @@ export function Plan({ message, tasks, state, debug = false, onSelectionConfirme
                 }
             }
         }
-        // Show arrow on current active define task when no child is highlighted and not done
+        // Show arrow on current active define task when no child is highlighted and is active
         const isDefineWithoutSelection = isDefineTask &&
             defineGroupIndex === currentDefineGroupIndex &&
             highlightedIndex === null &&
-            !isDone;
-        return taskToListItem(task, childIndex, isDefineWithoutSelection, isCurrent);
+            isActive;
+        return taskToListItem(task, childIndex, isDefineWithoutSelection, isActive);
     });
-    return (_jsxs(Box, { flexDirection: "column", children: [message && (_jsx(Box, { marginBottom: 1, children: _jsx(Label, { description: message, taskType: TaskType.Plan, showType: debug, isCurrent: isCurrent }) })), _jsx(List, { items: listItems, highlightedIndex: currentDefineTaskIndex >= 0 ? highlightedIndex : null, highlightedParentIndex: currentDefineTaskIndex, showType: debug })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [message && (_jsx(Box, { marginBottom: 1, marginLeft: 1, children: _jsx(Label, { description: message, taskType: TaskType.Plan, showType: debug, isCurrent: isActive }) })), _jsx(Box, { marginLeft: 1, children: _jsx(List, { items: listItems, highlightedIndex: currentDefineTaskIndex >= 0 ? highlightedIndex : null, highlightedParentIndex: currentDefineTaskIndex, showType: debug }) })] }));
 }

package/dist/ui/Refinement.js

@@ -3,13 +3,12 @@ import { Box } from 'ink';
 import { useInput } from '../services/keyboard.js';
 import { Message } from './Message.js';
 import { Spinner } from './Spinner.js';
-export const Refinement = ({ text, state, onAborted }) => {
-    const isDone = state?.done ?? false;
-    useInput((input, key) => {
-        if (key.escape && !isDone) {
-            onAborted();
+export const Refinement = ({ text, isActive = true, onAborted, }) => {
+    useInput((_, key) => {
+        if (key.escape && isActive) {
+            onAborted('plan refinement');
             return;
         }
-    }, { isActive: !isDone });
-    return (_jsxs(Box, { gap: 1, children: [_jsx(Message, { text: text }), !isDone && _jsx(Spinner, {})] }));
+    }, { isActive });
+    return (_jsxs(Box, { gap: 1, children: [_jsx(Message, { text: text }), isActive && _jsx(Spinner, {})] }));
 };

package/dist/ui/Report.js

@@ -10,5 +10,5 @@ function CapabilityItem({ name, description, isBuiltIn, isIndirect, }) {
     return (_jsxs(Box, { children: [_jsx(Text, { children: "- " }), _jsx(Text, { color: color, children: name }), _jsxs(Text, { children: [" - ", description] })] }));
 }
 export function Report({ message, capabilities }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: message }), _jsx(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, children: capabilities.map((capability, index) => (_jsx(CapabilityItem, { name: capability.name, description: capability.description, isBuiltIn: capability.isBuiltIn, isIndirect: capability.isIndirect }, index))) })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginLeft: 1, children: _jsx(Text, { children: message }) }), _jsx(Box, { flexDirection: "column", marginLeft: 3, marginTop: 1, children: capabilities.map((capability, index) => (_jsx(CapabilityItem, { name: capability.name, description: capability.description, isBuiltIn: capability.isBuiltIn, isIndirect: capability.isIndirect }, index))) })] }));
 }

package/dist/ui/UserQuery.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { Colors } from '../services/colors.js';
+export function UserQuery({ children }) {
+    return (_jsx(Box, { paddingX: 1, alignSelf: "flex-start", backgroundColor: Colors.Background.UserQuery, children: _jsx(Text, { color: Colors.Text.UserQuery, children: children }) }));
+}

package/dist/ui/Validate.js

@@ -6,29 +6,29 @@ import { Colors, getTextColor } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
 import { formatErrorMessage } from '../services/messages.js';
 import { ensureMinimumTime } from '../services/timing.js';
+import { saveConfig, unflattenConfig } from '../services/configuration.js';
+import { Config, StepType } from './Config.js';
 import { Spinner } from './Spinner.js';
 const MIN_PROCESSING_TIME = 1000;
-export function Validate({ missingConfig, userRequest, state, service, children, onError, onComplete, onAborted, }) {
-    const done = state?.done ?? false;
-    const isCurrent = done === false;
+export function Validate({ missingConfig, userRequest, state, isActive = true, service, children, debug, onError, onComplete, onAborted, handlers, }) {
+    // isActive passed as prop
     const [error, setError] = useState(null);
-    const [isLoading, setIsLoading] = useState(state?.isLoading ?? !done);
     const [completionMessage, setCompletionMessage] = useState(null);
-    useInput((input, key) => {
-        if (key.escape && isLoading && !done) {
-            setIsLoading(false);
-            onAborted();
+    const [configRequirements, setConfigRequirements] = useState(null);
+    const [showConfig, setShowConfig] = useState(false);
+    useInput((_, key) => {
+        if (key.escape && isActive && !showConfig) {
+            onAborted('validation');
         }
-    }, { isActive: isLoading && !done });
+    }, { isActive: isActive && !showConfig });
     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;
@@ -67,15 +67,22 @@ export function Validate({ missingConfig, userRequest, state, service, children,
                     ];
                     const message = messages[Math.floor(Math.random() * messages.length)];
                     setCompletionMessage(message);
-                    setIsLoading(false);
-                    onComplete?.(withDescriptions);
+                    setConfigRequirements(withDescriptions);
+                    // Save state after validation completes
+                    handlers?.updateState({
+                        configRequirements: withDescriptions,
+                        validated: true,
+                    });
                 }
             }
             catch (err) {
                 await ensureMinimumTime(startTime, MIN_PROCESSING_TIME);
                 if (mounted) {
                     const errorMessage = formatErrorMessage(err);
-                    setIsLoading(false);
+                    // Save error state
+                    handlers?.updateState({
+                        error: errorMessage,
+                    });
                     if (onError) {
                         onError(errorMessage);
                     }
@@ -92,17 +99,40 @@ export function Validate({ missingConfig, userRequest, state, service, children,
     }, [
         missingConfig,
         userRequest,
-        done,
+        isActive,
         service,
         onComplete,
         onError,
         onAborted,
     ]);
-    // Don't render when done and nothing to show
-    if (done && !completionMessage && !error && !children) {
+    // Don't render when not active and nothing to show
+    if (!isActive && !completionMessage && !error && !children) {
         return null;
     }
-    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(Box, { children: [_jsxs(Text, { color: getTextColor(isCurrent), children: ["Validating configuration requirements.", ' '] }), _jsx(Spinner, {})] })), completionMessage && !isLoading && (_jsx(Box, { children: _jsx(Text, { color: getTextColor(isCurrent), children: completionMessage }) })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) })), children] }));
+    // Create ConfigSteps from requirements
+    const configSteps = configRequirements
+        ? configRequirements.map((req) => ({
+            description: req.description || req.path,
+            key: req.path,
+            path: req.path,
+            type: StepType.Text,
+            value: null,
+            validate: () => true,
+        }))
+        : null;
+    const handleConfigFinished = (config) => {
+        // 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);
+        }
+        onComplete?.(configRequirements);
+    };
+    const handleConfigAborted = (operation) => {
+        onAborted(operation);
+    };
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isActive && !completionMessage && !error && (_jsxs(Box, { marginLeft: 1, children: [_jsxs(Text, { color: getTextColor(isActive), children: ["Validating configuration requirements.", ' '] }), _jsx(Spinner, {})] })), completionMessage && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: getTextColor(isActive), children: completionMessage }) })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) })), configSteps && !error && (_jsx(Box, { marginTop: 1, children: _jsx(Config, { steps: configSteps, isActive: isActive, debug: debug, onFinished: handleConfigFinished, onAborted: handleConfigAborted, handlers: handlers }) })), children] }));
 }
 /**
  * Build prompt for VALIDATE tool

package/dist/ui/Welcome.js

@@ -21,7 +21,7 @@ function Description({ description }) {
 function Usage() {
     return (_jsxs(Box, { flexDirection: "column", marginTop: 1, gap: 1, children: [_jsx(Section, { title: "Get started:", children: _jsx(Example, { children: "list skills" }) }), _jsx(Section, { title: "Usage:", children: _jsx(Example, { children: "[describe your request]" }) })] }));
 }
-function Section({ title, children, }) {
+function Section({ title, children }) {
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: Palette.White, children: title }), children] }));
 }
 function Example({ children }) {