prompt-language-shell 0.8.4 → 0.8.6

package/dist/services/router.js

@@ -1,7 +1,10 @@
 import { asScheduledTasks } from '../types/guards.js';
 import { FeedbackType, TaskType } from '../types/types.js';
+import { saveConfig } from '../configuration/io.js';
+import { getConfigSchema } from '../configuration/schema.js';
+import { unflattenConfig } from '../configuration/transformation.js';
+import { saveConfigLabels } from './config-labels.js';
 import { createAnswerDefinition, createConfigDefinitionWithKeys, createConfirmDefinition, createExecuteDefinition, createFeedback, createIntrospectDefinition, createMessage, createScheduleDefinition, createValidateDefinition, } from './components.js';
-import { saveConfig, unflattenConfig } from './configuration.js';
 import { getCancellationMessage, getMixedTaskTypesError, getUnknownRequestMessage, } from './messages.js';
 import { validateExecuteTasks } from './validator.js';
 /**
@@ -20,7 +23,7 @@ export function getOperationName(tasks) {
  * Route tasks to appropriate components with Confirm flow
  * Handles the complete flow: Plan → Confirm → Execute/Answer/Introspect
  */
-export function routeTasksWithConfirm(tasks, message, service, userRequest, queueHandlers, workflowHandlers, errorHandlers, hasDefineTask = false) {
+export function routeTasksWithConfirm(tasks, message, service, userRequest, lifecycleHandlers, workflowHandlers, requestHandlers, hasDefineTask = false) {
     if (tasks.length === 0)
         return;
     // Filter out ignore and discard tasks early
@@ -28,7 +31,7 @@ export function routeTasksWithConfirm(tasks, message, service, userRequest, queu
     // Check if no valid tasks remain after filtering
     if (validTasks.length === 0) {
         const message = createMessage(getUnknownRequestMessage());
-        queueHandlers.addToQueue(message);
+        workflowHandlers.addToQueue(message);
         return;
     }
     const operation = getOperationName(validTasks);
@@ -36,7 +39,7 @@ export function routeTasksWithConfirm(tasks, message, service, userRequest, queu
         // Has DEFINE tasks - add Schedule to queue for user selection
         // Refinement flow will call this function again with refined tasks
         const scheduleDefinition = createScheduleDefinition(message, validTasks);
-        queueHandlers.addToQueue(scheduleDefinition);
+        workflowHandlers.addToQueue(scheduleDefinition);
     }
     else {
         // No DEFINE tasks - Schedule auto-completes and adds Confirm to queue
@@ -47,17 +50,17 @@ export function routeTasksWithConfirm(tasks, message, service, userRequest, queu
             // Schedule completed - add Confirm to queue
             const confirmDefinition = createConfirmDefinition(() => {
                 // User confirmed - complete both Confirm and Schedule, then route to appropriate component
-                workflowHandlers.completeActiveAndPending();
-                executeTasksAfterConfirm(validTasks, service, userRequest, queueHandlers, errorHandlers);
+                lifecycleHandlers.completeActiveAndPending();
+                executeTasksAfterConfirm(validTasks, service, userRequest, workflowHandlers, requestHandlers);
             }, () => {
                 // User cancelled - complete both Confirm and Schedule, then show cancellation
-                workflowHandlers.completeActiveAndPending();
+                lifecycleHandlers.completeActiveAndPending();
                 const message = getCancellationMessage(operation);
-                queueHandlers.addToQueue(createFeedback(FeedbackType.Aborted, message));
+                workflowHandlers.addToQueue(createFeedback(FeedbackType.Aborted, message));
             });
-            queueHandlers.addToQueue(confirmDefinition);
+            workflowHandlers.addToQueue(confirmDefinition);
         });
-        queueHandlers.addToQueue(scheduleDefinition);
+        workflowHandlers.addToQueue(scheduleDefinition);
     }
 }
 /**
@@ -88,13 +91,13 @@ function validateTaskTypes(tasks) {
  * Validates task types and routes each type appropriately
  * Supports mixed types at top level with Groups
  */
-function executeTasksAfterConfirm(tasks, service, userRequest, queueHandlers, errorHandlers) {
+function executeTasksAfterConfirm(tasks, service, userRequest, workflowHandlers, requestHandlers) {
     // Validate task types (Groups must have uniform subtasks)
     try {
         validateTaskTypes(tasks);
     }
     catch (error) {
-        errorHandlers.onError(error instanceof Error ? error.message : String(error));
+        requestHandlers.onError(error instanceof Error ? error.message : String(error));
         return;
     }
     const scheduledTasks = asScheduledTasks(tasks);
@@ -117,7 +120,7 @@ function executeTasksAfterConfirm(tasks, service, userRequest, queueHandlers, er
             const taskType = type;
             if (typeTasks.length === 0)
                 continue;
-            routeTasksByType(taskType, typeTasks, service, userRequest, queueHandlers, errorHandlers);
+            routeTasksByType(taskType, typeTasks, service, userRequest, workflowHandlers, requestHandlers);
         }
         consecutiveStandaloneTasks = [];
     };
@@ -130,7 +133,7 @@ function executeTasksAfterConfirm(tasks, service, userRequest, queueHandlers, er
             if (task.subtasks.length > 0) {
                 const subtasks = task.subtasks;
                 const taskType = subtasks[0].type;
-                routeTasksByType(taskType, subtasks, service, userRequest, queueHandlers, errorHandlers);
+                routeTasksByType(taskType, subtasks, service, userRequest, workflowHandlers, requestHandlers);
             }
         }
         else {
@@ -145,22 +148,35 @@ function executeTasksAfterConfirm(tasks, service, userRequest, queueHandlers, er
  * Route tasks by type to appropriate components
  * Extracted to allow reuse for both Groups and standalone tasks
  */
-function routeTasksByType(taskType, typeTasks, service, userRequest, queueHandlers, errorHandlers) {
+function routeTasksByType(taskType, typeTasks, service, userRequest, workflowHandlers, requestHandlers) {
     if (taskType === TaskType.Answer) {
         // Create separate Answer component for each question
         for (const task of typeTasks) {
-            queueHandlers.addToQueue(createAnswerDefinition(task.action, service));
+            workflowHandlers.addToQueue(createAnswerDefinition(task.action, service));
         }
     }
     else if (taskType === TaskType.Introspect) {
-        queueHandlers.addToQueue(createIntrospectDefinition(typeTasks, service));
+        workflowHandlers.addToQueue(createIntrospectDefinition(typeTasks, service));
     }
     else if (taskType === TaskType.Config) {
-        // Route to Config flow - extract keys from task params
+        // Route to Config flow - extract keys and descriptions from task params
         const configKeys = typeTasks
             .map((task) => task.params?.key)
             .filter((key) => key !== undefined);
-        queueHandlers.addToQueue(createConfigDefinitionWithKeys(configKeys, (config) => {
+        // Extract and cache labels from task descriptions
+        // Only cache labels for dynamically discovered keys (not in schema)
+        const schema = getConfigSchema();
+        const labels = {};
+        for (const task of typeTasks) {
+            const key = task.params?.key;
+            if (key && task.action && !(key in schema)) {
+                labels[key] = task.action;
+            }
+        }
+        if (Object.keys(labels).length > 0) {
+            saveConfigLabels(labels);
+        }
+        workflowHandlers.addToQueue(createConfigDefinitionWithKeys(configKeys, (config) => {
             // Save config - Config component will handle completion and feedback
             try {
                 // Convert flat dotted keys to nested structure grouped by section
@@ -177,7 +193,7 @@ function routeTasksByType(taskType, typeTasks, service, userRequest, queueHandle
                 throw new Error(errorMessage);
             }
         }, (operation) => {
-            errorHandlers.onAborted(operation);
+            requestHandlers.onAborted(operation);
         }));
     }
     else if (taskType === TaskType.Execute) {
@@ -192,26 +208,26 @@ function routeTasksByType(taskType, typeTasks, service, userRequest, queueHandle
                         .join('\n');
                     return `Invalid skill definition "${error.skill}":\n\n${issuesList}`;
                 });
-                queueHandlers.addToQueue(createFeedback(FeedbackType.Failed, errorMessages.join('\n\n')));
+                workflowHandlers.addToQueue(createFeedback(FeedbackType.Failed, errorMessages.join('\n\n')));
             }
             else if (validation.missingConfig.length > 0) {
-                queueHandlers.addToQueue(createValidateDefinition(validation.missingConfig, userRequest, service, (error) => {
-                    errorHandlers.onError(error);
+                workflowHandlers.addToQueue(createValidateDefinition(validation.missingConfig, userRequest, service, (error) => {
+                    requestHandlers.onError(error);
                 }, () => {
-                    queueHandlers.addToQueue(createExecuteDefinition(typeTasks, service));
+                    workflowHandlers.addToQueue(createExecuteDefinition(typeTasks, service));
                 }, (operation) => {
-                    errorHandlers.onAborted(operation);
+                    requestHandlers.onAborted(operation);
                 }));
             }
             else {
-                queueHandlers.addToQueue(createExecuteDefinition(typeTasks, service));
+                workflowHandlers.addToQueue(createExecuteDefinition(typeTasks, service));
             }
         }
         catch (error) {
             // Handle skill reference errors (e.g., unknown skills)
             const errorMessage = error instanceof Error ? error.message : String(error);
             const message = createMessage(errorMessage);
-            queueHandlers.addToQueue(message);
+            workflowHandlers.addToQueue(message);
         }
     }
 }

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');
     }
-});
+};