prompt-language-shell 0.6.2 → 0.6.4

package/dist/services/components.js

@@ -1,8 +1,9 @@
 import { randomUUID } from 'node:crypto';
 import { existsSync, readFileSync } from 'node:fs';
 import { ComponentName } from '../types/types.js';
+import { ComponentStatus, } from '../types/components.js';
 import { parse as parseYaml } from 'yaml';
-import { getConfigPath, getConfigSchema, loadConfig, } from './configuration.js';
+import { ConfigDefinitionType, getConfigPath, getConfigSchema, loadConfig, } from './configuration.js';
 import { getConfirmationMessage } from './messages.js';
 import { StepType } from '../ui/Config.js';
 export function createWelcomeDefinition(app) {
@@ -39,15 +40,15 @@ function getConfigValue(config, key) {
  */
 function getValidator(definition) {
     switch (definition.type) {
-        case 'regexp':
+        case ConfigDefinitionType.RegExp:
             return (value) => definition.pattern.test(value);
-        case 'string':
+        case ConfigDefinitionType.String:
             return () => true; // Strings are always valid
-        case 'enum':
+        case ConfigDefinitionType.Enum:
             return (value) => definition.values.includes(value);
-        case 'number':
+        case ConfigDefinitionType.Number:
             return (value) => !isNaN(Number(value));
-        case 'boolean':
+        case ConfigDefinitionType.Boolean:
             return (value) => value === 'true' || value === 'false';
     }
 }
@@ -103,11 +104,11 @@ export function createConfigStepsFromSchema(keys) {
         const shortKey = keyParts[keyParts.length - 1];
         // Map definition to ConfigStep based on type
         switch (definition.type) {
-            case 'regexp':
-            case 'string': {
+            case ConfigDefinitionType.RegExp:
+            case ConfigDefinitionType.String: {
                 const value = currentValue !== undefined && typeof currentValue === 'string'
                     ? currentValue
-                    : definition.type === 'string'
+                    : definition.type === ConfigDefinitionType.String
                         ? (definition.default ?? '')
                         : null;
                 return {
@@ -119,7 +120,7 @@ export function createConfigStepsFromSchema(keys) {
                     validate: getValidator(definition),
                 };
             }
-            case 'number': {
+            case ConfigDefinitionType.Number: {
                 const value = currentValue !== undefined && typeof currentValue === 'number'
                     ? String(currentValue)
                     : definition.default !== undefined
@@ -134,7 +135,7 @@ export function createConfigStepsFromSchema(keys) {
                     validate: getValidator(definition),
                 };
             }
-            case 'enum': {
+            case ConfigDefinitionType.Enum: {
                 const currentStr = currentValue !== undefined && typeof currentValue === 'string'
                     ? currentValue
                     : definition.default;
@@ -154,7 +155,7 @@ export function createConfigStepsFromSchema(keys) {
                     validate: getValidator(definition),
                 };
             }
-            case 'boolean': {
+            case ConfigDefinitionType.Boolean: {
                 const currentBool = currentValue !== undefined && typeof currentValue === 'boolean'
                     ? currentValue
                     : undefined;
@@ -178,6 +179,7 @@ export function createConfigDefinition(onFinished, onAborted) {
     return {
         id: randomUUID(),
         name: ComponentName.Config,
+        status: ComponentStatus.Awaiting,
         state: {},
         props: {
             steps: createConfigSteps(),
@@ -193,6 +195,7 @@ export function createConfigDefinitionWithKeys(keys, onFinished, onAborted) {
     return {
         id: randomUUID(),
         name: ComponentName.Config,
+        status: ComponentStatus.Awaiting,
         state: {},
         props: {
             steps: createConfigStepsFromSchema(keys),
@@ -205,6 +208,7 @@ export function createCommandDefinition(command, service) {
     return {
         id: randomUUID(),
         name: ComponentName.Command,
+        status: ComponentStatus.Awaiting,
         state: {},
         props: {
             command,
@@ -216,6 +220,7 @@ export function createPlanDefinition(message, tasks, onSelectionConfirmed) {
     return {
         id: randomUUID(),
         name: ComponentName.Plan,
+        status: ComponentStatus.Awaiting,
         state: {
             highlightedIndex: null,
             currentDefineGroupIndex: 0,
@@ -251,6 +256,7 @@ export function createRefinement(text, onAborted) {
     return {
         id: randomUUID(),
         name: ComponentName.Refinement,
+        status: ComponentStatus.Awaiting,
         state: {},
         props: {
             text,
@@ -262,6 +268,7 @@ export function createConfirmDefinition(onConfirmed, onCancelled) {
     return {
         id: randomUUID(),
         name: ComponentName.Confirm,
+        status: ComponentStatus.Awaiting,
         state: {},
         props: {
             message: getConfirmationMessage(),
@@ -274,6 +281,7 @@ export function createIntrospectDefinition(tasks, service) {
     return {
         id: randomUUID(),
         name: ComponentName.Introspect,
+        status: ComponentStatus.Awaiting,
         state: {},
         props: {
             tasks,
@@ -295,6 +303,7 @@ export function createAnswerDefinition(question, service) {
     return {
         id: randomUUID(),
         name: ComponentName.Answer,
+        status: ComponentStatus.Awaiting,
         state: {},
         props: {
             question,
@@ -308,16 +317,16 @@ export function isStateless(component) {
 /**
  * Mark a component as done. Returns the component to be added to timeline.
  * Components use handlers.updateState to save their state before completion,
- * so this function simply returns the component as-is.
+ * so this function sets the status to Done and returns the updated component.
  */
 export function markAsDone(component) {
-    // State already updated via handlers.updateState
-    return component;
+    return { ...component, status: ComponentStatus.Done };
 }
 export function createExecuteDefinition(tasks, service) {
     return {
         id: randomUUID(),
         name: ComponentName.Execute,
+        status: ComponentStatus.Awaiting,
         state: {},
         props: {
             tasks,
@@ -329,6 +338,7 @@ export function createValidateDefinition(missingConfig, userRequest, service, on
     return {
         id: randomUUID(),
         name: ComponentName.Validate,
+        status: ComponentStatus.Awaiting,
         state: {},
         props: {
             missingConfig,

package/dist/services/configuration.js

@@ -9,6 +9,14 @@ export var AnthropicModel;
     AnthropicModel["Opus"] = "claude-opus-4-1";
 })(AnthropicModel || (AnthropicModel = {}));
 export const SUPPORTED_MODELS = Object.values(AnthropicModel);
+export var ConfigDefinitionType;
+(function (ConfigDefinitionType) {
+    ConfigDefinitionType["RegExp"] = "regexp";
+    ConfigDefinitionType["String"] = "string";
+    ConfigDefinitionType["Enum"] = "enum";
+    ConfigDefinitionType["Number"] = "number";
+    ConfigDefinitionType["Boolean"] = "boolean";
+})(ConfigDefinitionType || (ConfigDefinitionType = {}));
 export class ConfigError extends Error {
     origin;
     constructor(message, origin) {
@@ -172,20 +180,20 @@ export function getConfigurationRequiredMessage(forFutureUse = false) {
  */
 const coreConfigSchema = {
     'anthropic.key': {
-        type: 'regexp',
+        type: ConfigDefinitionType.RegExp,
         required: true,
         pattern: /^sk-ant-api03-[A-Za-z0-9_-]{95}$/,
         description: 'Anthropic API key',
     },
     'anthropic.model': {
-        type: 'enum',
+        type: ConfigDefinitionType.Enum,
         required: true,
         values: SUPPORTED_MODELS,
         default: AnthropicModel.Haiku,
         description: 'Anthropic model',
     },
     'settings.debug': {
-        type: 'boolean',
+        type: ConfigDefinitionType.Boolean,
         required: false,
         description: 'Debug mode',
     },
@@ -239,20 +247,20 @@ export function getMissingConfigKeys() {
         // Validate based on type
         let isValid = false;
         switch (definition.type) {
-            case 'regexp':
+            case ConfigDefinitionType.RegExp:
                 isValid = typeof value === 'string' && definition.pattern.test(value);
                 break;
-            case 'string':
+            case ConfigDefinitionType.String:
                 isValid = typeof value === 'string';
                 break;
-            case 'enum':
+            case ConfigDefinitionType.Enum:
                 isValid =
                     typeof value === 'string' && definition.values.includes(value);
                 break;
-            case 'number':
+            case ConfigDefinitionType.Number:
                 isValid = typeof value === 'number';
                 break;
-            case 'boolean':
+            case ConfigDefinitionType.Boolean:
                 isValid = typeof value === 'boolean';
                 break;
         }
@@ -357,13 +365,13 @@ function parseConfigValue(key, stringValue, schema) {
     if (key in schema) {
         const definition = schema[key];
         switch (definition.type) {
-            case 'boolean':
+            case ConfigDefinitionType.Boolean:
                 return stringValue === 'true';
-            case 'number':
+            case ConfigDefinitionType.Number:
                 return Number(stringValue);
-            case 'string':
-            case 'regexp':
-            case 'enum':
+            case ConfigDefinitionType.String:
+            case ConfigDefinitionType.RegExp:
+            case ConfigDefinitionType.Enum:
                 return stringValue;
         }
     }

package/dist/services/refinement.js

@@ -25,8 +25,7 @@ export async function handleRefinement(selectedTasks, service, originalCommand,
         // Complete the Refinement component
         handlers.completeActive();
         // Route refined tasks to appropriate components
-        routeTasksWithConfirm(refinedResult.tasks, refinedResult.message, service, originalCommand, handlers, false, // No DEFINE tasks in refined result
-        undefined // No commandComponent - use normal flow
+        routeTasksWithConfirm(refinedResult.tasks, refinedResult.message, service, originalCommand, handlers, false // No DEFINE tasks in refined result
         );
     }
     catch (err) {

package/dist/services/task-router.js

@@ -3,7 +3,7 @@ import { createAnswerDefinition, createConfigDefinitionWithKeys, createConfirmDe
 import { saveConfig, unflattenConfig } from './configuration.js';
 import { FeedbackType } from '../types/types.js';
 import { validateExecuteTasks } from './execution-validator.js';
-import { getMixedTaskTypesError, getUnknownRequestMessage, } from './messages.js';
+import { getCancellationMessage, getMixedTaskTypesError, getUnknownRequestMessage, } from './messages.js';
 /**
  * Determine the operation name based on task types
  */
@@ -20,7 +20,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, handlers, hasDefineTask = false, commandComponent) {
+export function routeTasksWithConfirm(tasks, message, service, userRequest, handlers, hasDefineTask = false) {
     if (tasks.length === 0)
         return;
     // Filter out ignore and discard tasks early
@@ -32,31 +32,32 @@ export function routeTasksWithConfirm(tasks, message, service, userRequest, hand
         return;
     }
     const operation = getOperationName(validTasks);
-    // Create plan definition with valid tasks only
-    const planDefinition = createPlanDefinition(message, validTasks);
     if (hasDefineTask) {
         // Has DEFINE tasks - add Plan to queue for user selection
         // Refinement flow will call this function again with refined tasks
+        const planDefinition = createPlanDefinition(message, validTasks);
         handlers.addToQueue(planDefinition);
     }
     else {
-        // No DEFINE tasks - add Plan to timeline, create Confirm
-        const confirmDefinition = createConfirmDefinition(() => {
-            // User confirmed - route to appropriate component
-            handlers.completeActive();
-            executeTasksAfterConfirm(validTasks, service, userRequest, handlers);
-        }, () => {
-            // User cancelled
-            handlers.onAborted(operation);
+        // No DEFINE tasks - Plan auto-completes and adds Confirm to queue
+        // When Plan activates, Command moves to timeline
+        // When Plan completes, it moves to pending
+        // When Confirm activates, Plan stays pending (visible for context)
+        const planDefinition = createPlanDefinition(message, validTasks, () => {
+            // Plan completed - add Confirm to queue
+            const confirmDefinition = createConfirmDefinition(() => {
+                // User confirmed - complete both Confirm and Plan, then route to appropriate component
+                handlers.completeActiveAndPending();
+                executeTasksAfterConfirm(validTasks, service, userRequest, handlers);
+            }, () => {
+                // User cancelled - complete both Confirm and Plan, then show cancellation
+                handlers.completeActiveAndPending();
+                const message = getCancellationMessage(operation);
+                handlers.addToQueue(createFeedback(FeedbackType.Aborted, message));
+            });
+            handlers.addToQueue(confirmDefinition);
         });
-        // Use atomic update if commandComponent provided, else normal flow
-        if (commandComponent) {
-            handlers.completeActive(planDefinition);
-        }
-        else {
-            handlers.addToTimeline(planDefinition);
-        }
-        handlers.addToQueue(confirmDefinition);
+        handlers.addToQueue(planDefinition);
     }
 }
 /**

package/dist/types/components.js

@@ -1 +1,8 @@
-export {};
+// Component lifecycle status
+export var ComponentStatus;
+(function (ComponentStatus) {
+    ComponentStatus["Awaiting"] = "awaiting";
+    ComponentStatus["Active"] = "active";
+    ComponentStatus["Pending"] = "pending";
+    ComponentStatus["Done"] = "done";
+})(ComponentStatus || (ComponentStatus = {}));

package/dist/ui/Answer.js

@@ -1,13 +1,15 @@
 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 { 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, isActive = true, service, handlers, }) {
+export function Answer({ question, state, status, service, handlers, }) {
+    const isActive = status === ComponentStatus.Active;
     const [error, setError] = useState(null);
     const [answer, setAnswer] = useState(state?.answer ?? null);
     useInput((input, key) => {

package/dist/ui/Command.js

@@ -1,6 +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 { TaskType } from '../types/types.js';
 import { Colors } from '../services/colors.js';
 import { createPlanDefinition } from '../services/components.js';
@@ -12,7 +13,8 @@ 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, isActive = true, service, handlers, onAborted, }) {
+export function Command({ command, state, status, service, handlers, onAborted, }) {
+    const isActive = status === ComponentStatus.Active;
     const [error, setError] = useState(state?.error ?? null);
     useInput((_, key) => {
         if (key.escape && isActive) {
@@ -66,9 +68,9 @@ export function Command({ command, state, isActive = true, service, handlers, on
                         handlers?.addToQueue(planDefinition);
                     }
                     else {
-                        // No DEFINE tasks: Pass Plan to be added atomically with Command
-                        routeTasksWithConfirm(result.tasks, result.message, svc, command, handlers, false, planDefinition // Pass Plan for atomic update
-                        );
+                        // No DEFINE tasks: Complete Command, then route to Confirm flow
+                        handlers?.completeActive();
+                        routeTasksWithConfirm(result.tasks, result.message, svc, command, handlers, false);
                     }
                 }
             }

package/dist/ui/Component.js

@@ -14,36 +14,33 @@ import { Refinement } from './Refinement.js';
 import { Report } from './Report.js';
 import { Validate } from './Validate.js';
 import { Welcome } from './Welcome.js';
-export const Component = memo(function Component({ def, isActive, debug, }) {
-    // For stateless components, always inactive
-    const isStatelessComponent = !('state' in def);
-    const componentIsActive = isStatelessComponent ? false : isActive;
+export const Component = memo(function Component({ def, debug, }) {
     switch (def.name) {
         case ComponentName.Welcome:
-            return _jsx(Welcome, { ...def.props });
+            return _jsx(Welcome, { ...def.props, status: def.status });
         case ComponentName.Config:
-            return (_jsx(Config, { ...def.props, state: def.state, isActive: componentIsActive, debug: debug }));
+            return (_jsx(Config, { ...def.props, state: def.state, status: def.status, debug: debug }));
         case ComponentName.Command:
-            return _jsx(Command, { ...def.props, state: def.state, isActive: isActive });
+            return _jsx(Command, { ...def.props, state: def.state, status: def.status });
         case ComponentName.Plan:
-            return (_jsx(Plan, { ...def.props, state: def.state, isActive: componentIsActive, debug: debug }));
+            return (_jsx(Plan, { ...def.props, state: def.state, status: def.status, debug: debug }));
         case ComponentName.Feedback:
-            return _jsx(Feedback, { ...def.props });
+            return _jsx(Feedback, { ...def.props, status: def.status });
         case ComponentName.Message:
-            return _jsx(Message, { ...def.props });
+            return _jsx(Message, { ...def.props, status: def.status });
         case ComponentName.Refinement:
-            return (_jsx(Refinement, { ...def.props, state: def.state, isActive: isActive }));
+            return (_jsx(Refinement, { ...def.props, state: def.state, status: def.status }));
         case ComponentName.Confirm:
-            return _jsx(Confirm, { ...def.props, state: def.state, isActive: isActive });
+            return _jsx(Confirm, { ...def.props, state: def.state, status: def.status });
         case ComponentName.Introspect:
-            return (_jsx(Introspect, { ...def.props, state: def.state, isActive: componentIsActive, debug: debug }));
+            return (_jsx(Introspect, { ...def.props, state: def.state, status: def.status, debug: debug }));
         case ComponentName.Report:
-            return _jsx(Report, { ...def.props });
+            return _jsx(Report, { ...def.props, status: def.status });
         case ComponentName.Answer:
-            return _jsx(Answer, { ...def.props, state: def.state, isActive: isActive });
+            return _jsx(Answer, { ...def.props, state: def.state, status: def.status });
         case ComponentName.Execute:
-            return _jsx(Execute, { ...def.props, state: def.state, isActive: isActive });
+            return _jsx(Execute, { ...def.props, state: def.state, status: def.status });
         case ComponentName.Validate:
-            return (_jsx(Validate, { ...def.props, state: def.state, isActive: isActive, debug: debug }));
+            return (_jsx(Validate, { ...def.props, state: def.state, status: def.status, debug: debug }));
     }
 });

package/dist/ui/Config.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, useFocus } from 'ink';
 import TextInput from 'ink-text-input';
+import { ComponentStatus } from '../types/components.js';
 import { Colors } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
 export var StepType;
@@ -57,8 +58,8 @@ function SelectionStep({ options, selectedIndex, isCurrentStep, }) {
             return (_jsx(Box, { marginRight: 2, children: _jsx(Text, { dimColor: !isSelected || !isCurrentStep, bold: isSelected, children: option.label }) }, option.value));
         }) }));
 }
-export function Config({ steps, state, isActive = true, debug, handlers, onFinished, onAborted, }) {
-    // isActive passed as prop
+export function Config({ steps, state, status, debug, handlers, onFinished, onAborted, }) {
+    const isActive = status === ComponentStatus.Active;
     const [step, setStep] = useState(!isActive ? (state?.completedStep ?? steps.length) : 0);
     const [values, setValues] = useState(() => {
         // If not active and we have saved state values, use those

package/dist/ui/Confirm.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text } from 'ink';
+import { ComponentStatus, } from '../types/components.js';
 import { Colors, Palette } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
 import { UserQuery } from './UserQuery.js';
-export function Confirm({ message, state, isActive = true, handlers, onConfirmed, onCancelled, }) {
-    // isActive passed as prop
+export function Confirm({ message, state, status, handlers, onConfirmed, onCancelled, }) {
+    const isActive = status === ComponentStatus.Active;
     const [selectedIndex, setSelectedIndex] = useState(state?.selectedIndex ?? 0); // 0 = Yes, 1 = No
     useInput((input, key) => {
         if (!isActive)
@@ -18,11 +19,9 @@ export function Confirm({ message, state, isActive = true, handlers, onConfirmed
         }
         else if (key.tab) {
             // Toggle between Yes (0) and No (1)
-            setSelectedIndex((prev) => {
-                const newIndex = prev === 0 ? 1 : 0;
-                handlers?.updateState({ selectedIndex: newIndex });
-                return newIndex;
-            });
+            const newIndex = selectedIndex === 0 ? 1 : 0;
+            setSelectedIndex(newIndex);
+            handlers?.updateState({ selectedIndex: newIndex });
         }
         else if (key.return) {
             // Confirm selection

package/dist/ui/Execute.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
+import { ComponentStatus } from '../types/components.js';
 import { Colors, getTextColor, Palette } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
 import { formatErrorMessage } from '../services/messages.js';
@@ -85,7 +86,8 @@ function CommandStatusDisplay({ item, elapsed }) {
     const elapsedTime = getElapsedTime();
     return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: colors.icon, children: STATUS_ICONS[item.status] }), _jsx(Text, { color: colors.description, children: item.label || item.command.description }), elapsedTime !== undefined && (_jsxs(Text, { color: Palette.DarkGray, children: [" (", formatDuration(elapsedTime), ")"] }))] }), _jsxs(Box, { paddingLeft: 5, children: [_jsx(Text, { color: colors.symbol, children: "\u221F " }), _jsx(Text, { color: colors.command, children: item.command.command }), item.status === ExecutionStatus.Running && (_jsxs(Text, { children: [' ', _jsx(Spinner, {})] }))] })] }));
 }
-export function Execute({ tasks, state, isActive = true, service, handlers, }) {
+export function Execute({ tasks, state, status, service, handlers, }) {
+    const isActive = status === ComponentStatus.Active;
     // isActive passed as prop
     const [error, setError] = useState(state?.error ?? null);
     const [isExecuting, setIsExecuting] = useState(false);

package/dist/ui/Introspect.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
+import { ComponentStatus, } from '../types/components.js';
 import { Colors, getTextColor } from '../services/colors.js';
 import { createReportDefinition } from '../services/components.js';
 import { useInput } from '../services/keyboard.js';
@@ -42,7 +43,8 @@ function parseCapabilityFromTask(task) {
         isIndirect,
     };
 }
-export function Introspect({ tasks, state, isActive = true, service, children, debug = false, handlers, }) {
+export function Introspect({ tasks, state, status, service, children, debug = false, handlers, }) {
+    const isActive = status === ComponentStatus.Active;
     // isActive passed as prop
     const [error, setError] = useState(null);
     useInput((input, key) => {

package/dist/ui/Plan.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box } from 'ink';
+import { ComponentStatus } from '../types/components.js';
 import { TaskType } from '../types/types.js';
 import { getTaskColors } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
@@ -49,7 +50,8 @@ function taskToListItem(task, highlightedChildIndex = null, isDefineTaskWithoutS
     }
     return item;
 }
-export function Plan({ message, tasks, state, isActive = true, debug = false, handlers, onSelectionConfirmed, }) {
+export function Plan({ message, tasks, state, status, debug = false, handlers, onSelectionConfirmed, }) {
+    const isActive = status === ComponentStatus.Active;
     // isActive passed as prop
     const [highlightedIndex, setHighlightedIndex] = useState(state?.highlightedIndex ?? null);
     const [currentDefineGroupIndex, setCurrentDefineGroupIndex] = useState(state?.currentDefineGroupIndex ?? 0);
@@ -70,9 +72,10 @@ export function Plan({ message, tasks, state, isActive = true, debug = false, ha
         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
+            // Complete the selection phase - it goes to timeline
+            // Callback will create a new Plan showing refined tasks (pending) + Confirm (active)
             handlers?.completeActive();
+            onSelectionConfirmed(concreteTasks);
         }
     }, [
         isActive,
@@ -143,8 +146,8 @@ export function Plan({ message, tasks, state, isActive = true, debug = false, ha
                     }
                 });
                 if (onSelectionConfirmed) {
-                    // Callback will handle the entire flow (Refinement, refined Plan, Confirm)
-                    // So we need to complete the Plan first
+                    // Complete the selection phase - it goes to timeline
+                    // Callback will create a new Plan showing refined tasks (pending) + Confirm (active)
                     handlers?.completeActive();
                     onSelectionConfirmed(refinedTasks);
                 }

package/dist/ui/Refinement.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from 'ink';
+import { ComponentStatus } from '../types/components.js';
 import { useInput } from '../services/keyboard.js';
 import { Message } from './Message.js';
 import { Spinner } from './Spinner.js';
-export const Refinement = ({ text, isActive = true, onAborted, }) => {
+export const Refinement = ({ text, status, onAborted }) => {
+    const isActive = status === ComponentStatus.Active;
     useInput((_, key) => {
         if (key.escape && isActive) {
             onAborted('plan refinement');

package/dist/ui/Validate.js

@@ -1,6 +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 { TaskType } from '../types/types.js';
 import { Colors, getTextColor } from '../services/colors.js';
 import { useInput } from '../services/keyboard.js';
@@ -10,8 +11,8 @@ 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, isActive = true, service, children, debug, onError, onComplete, onAborted, handlers, }) {
-    // isActive passed as prop
+export function Validate({ missingConfig, userRequest, state, status, service, children, debug, onError, onComplete, onAborted, handlers, }) {
+    const isActive = status === ComponentStatus.Active;
     const [error, setError] = useState(null);
     const [completionMessage, setCompletionMessage] = useState(null);
     const [configRequirements, setConfigRequirements] = useState(null);
@@ -132,7 +133,7 @@ export function Validate({ missingConfig, userRequest, state, isActive = true, s
     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] }));
+    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, status: status, debug: debug, onFinished: handleConfigFinished, onAborted: handleConfigAborted, handlers: handlers }) })), children] }));
 }
 /**
  * Build prompt for VALIDATE tool

package/dist/ui/Workflow.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, Static } from 'ink';
+import { ComponentStatus, } from '../types/components.js';
 import { ComponentName, FeedbackType } from '../types/types.js';
 import { createFeedback, isStateless, markAsDone, } from '../services/components.js';
 import { exitApp } from '../services/process.js';
@@ -8,36 +9,82 @@ import { getCancellationMessage } from '../services/messages.js';
 import { Component } from './Component.js';
 export const Workflow = ({ initialQueue, debug }) => {
     const [timeline, setTimeline] = useState([]);
-    const [active, setActive] = useState(null);
+    const [current, setCurrent] = useState({ active: null, pending: null });
     const [queue, setQueue] = useState(initialQueue);
-    // Ref to track active component for synchronous access
-    const activeRef = useRef(null);
-    // Keep ref in sync with active state
-    useEffect(() => {
-        activeRef.current = active;
-    }, [active]);
-    // Function to move active component to timeline with optional additional items
-    const moveActiveToTimeline = useCallback((...items) => {
-        const curr = activeRef.current;
-        if (!curr) {
-            // No active component, just add items if provided
-            if (items.length > 0) {
-                setTimeline((prev) => [...prev, ...items]);
-            }
-            return;
-        }
-        const doneComponent = markAsDone(curr);
-        // Atomic update: add active component and any additional items
-        setTimeline((prev) => items.length > 0
-            ? [...prev, doneComponent, ...items]
-            : [...prev, doneComponent]);
-        setActive(null);
+    // Function to move active to pending (component just completed)
+    const moveActiveToPending = useCallback(() => {
+        setCurrent((curr) => {
+            const { active } = curr;
+            if (!active)
+                return curr;
+            // Move active to pending without marking as done
+            const pendingComponent = { ...active, status: ComponentStatus.Pending };
+            return { active: null, pending: pendingComponent };
+        });
+    }, []);
+    // Function to move active directly to timeline (error/abort)
+    const moveActiveToTimeline = useCallback(() => {
+        setCurrent((curr) => {
+            const { active, pending } = curr;
+            if (!active)
+                return curr;
+            // Mark as done and add to timeline
+            const doneComponent = markAsDone(active);
+            setTimeline((prev) => [...prev, doneComponent]);
+            return { active: null, pending };
+        });
     }, []);
     // Global handlers for all stateful components
     const handlers = useMemo(() => ({
+        addToQueue: (...items) => {
+            setQueue((queue) => [...queue, ...items]);
+        },
+        updateState: (newState) => {
+            setCurrent((curr) => {
+                const { active, pending } = curr;
+                if (!active || !('state' in active))
+                    return curr;
+                const stateful = active;
+                const updated = {
+                    ...stateful,
+                    state: {
+                        ...stateful.state,
+                        ...newState,
+                    },
+                };
+                return { active: updated, pending };
+            });
+        },
+        completeActive: (...items) => {
+            moveActiveToPending();
+            if (items.length > 0) {
+                setQueue((queue) => [...items, ...queue]);
+            }
+        },
+        completeActiveAndPending: (...items) => {
+            setCurrent((curr) => {
+                const { active, pending } = curr;
+                // Move both to timeline - pending first (Plan), then active (Confirm)
+                if (pending) {
+                    const donePending = markAsDone(pending);
+                    setTimeline((prev) => [...prev, donePending]);
+                }
+                if (active) {
+                    const doneActive = markAsDone(active);
+                    setTimeline((prev) => [...prev, doneActive]);
+                }
+                return { active: null, pending: null };
+            });
+            if (items.length > 0) {
+                setQueue((queue) => [...items, ...queue]);
+            }
+        },
+        addToTimeline: (...items) => {
+            setTimeline((prev) => [...prev, ...items]);
+        },
         onAborted: (operation) => {
             moveActiveToTimeline();
-            // Add feedback to queue and exit
+            // Add feedback to queue
             const message = getCancellationMessage(operation);
             setQueue((queue) => [
                 ...queue,
@@ -46,76 +93,82 @@ export const Workflow = ({ initialQueue, debug }) => {
         },
         onError: (error) => {
             moveActiveToTimeline();
-            // Add feedback to queue and exit with error code
+            // Add feedback to queue
             setQueue((queue) => [
                 ...queue,
                 createFeedback(FeedbackType.Failed, error),
             ]);
         },
-        addToQueue: (...items) => {
-            setQueue((queue) => [...queue, ...items]);
-        },
-        addToTimeline: (...items) => {
-            setTimeline((prev) => [...prev, ...items]);
-        },
-        completeActive: (...items) => {
-            moveActiveToTimeline(...items);
-        },
-        updateState: (newState) => {
-            setActive((curr) => {
-                if (!curr || !('state' in curr))
-                    return curr;
-                const stateful = curr;
-                const updated = {
-                    ...stateful,
-                    state: {
-                        ...stateful.state,
-                        ...newState,
-                    },
-                };
-                // Update ref synchronously so moveActiveToTimeline sees the latest state
-                activeRef.current = updated;
-                return updated;
-            });
-        },
-    }), [moveActiveToTimeline]);
+    }), [moveActiveToPending, moveActiveToTimeline]);
     // Global Esc handler removed - components handle their own Esc individually
     // Move next item from queue to active
     useEffect(() => {
-        if (queue.length > 0 && active === null) {
-            const [first, ...rest] = queue;
+        const { active, pending } = current;
+        // Early return: not ready to activate next
+        if (queue.length === 0 || active !== null) {
+            return;
+        }
+        const [first, ...rest] = queue;
+        const activeComponent = { ...first, status: ComponentStatus.Active };
+        // Confirm - keep pending visible (Plan showing what will execute)
+        if (first.name === ComponentName.Confirm) {
             setQueue(rest);
-            setActive(first);
+            setCurrent({ active: activeComponent, pending });
+            return;
         }
-    }, [queue, active]);
+        // Other components - move pending to timeline first, then activate
+        if (pending) {
+            const donePending = markAsDone(pending);
+            setTimeline((prev) => [...prev, donePending]);
+        }
+        setQueue(rest);
+        setCurrent({ active: activeComponent, pending: null });
+    }, [queue, current]);
     // Process active component - stateless components auto-move to timeline
     useEffect(() => {
+        const { active, pending } = current;
         if (!active)
             return;
         if (isStateless(active)) {
+            // Stateless components move directly to timeline
             const doneComponent = markAsDone(active);
             setTimeline((prev) => [...prev, doneComponent]);
-            setActive(null);
+            setCurrent({ active: null, pending });
         }
-        // Stateful components stay in active until handlers move them to timeline
-    }, [active]);
-    // Exit when all done
+        // Stateful components stay in active until handlers move them to pending
+    }, [current]);
+    // Move final pending to timeline and exit when all done
     useEffect(() => {
-        if (active === null && queue.length === 0 && timeline.length > 0) {
-            // Check if last item in timeline is a failed feedback
-            const lastItem = timeline[timeline.length - 1];
-            const isFailed = lastItem.name === ComponentName.Feedback &&
-                lastItem.props.type === FeedbackType.Failed;
-            exitApp(isFailed ? 1 : 0);
+        const { active, pending } = current;
+        // Early return: not ready to finish
+        if (active !== null || queue.length > 0) {
+            return;
+        }
+        // Handle pending component
+        if (pending) {
+            const donePending = markAsDone(pending);
+            setTimeline((prev) => [...prev, donePending]);
+            setCurrent({ active: null, pending: null });
+            return;
         }
-    }, [active, queue, timeline]);
-    // Inject global handlers into active component
+        // Early return: nothing to exit with
+        if (timeline.length === 0) {
+            return;
+        }
+        // Everything is done, exit
+        const lastItem = timeline[timeline.length - 1];
+        const isFailed = lastItem.name === ComponentName.Feedback &&
+            lastItem.props.type === FeedbackType.Failed;
+        exitApp(isFailed ? 1 : 0);
+    }, [current, queue, timeline]);
+    // Render active and pending components
     const activeComponent = useMemo(() => {
+        const { active } = current;
         if (!active)
             return null;
-        // For stateless components, render as-is with isActive=true
+        // For stateless components, render as-is
         if (isStateless(active)) {
-            return (_jsx(Component, { def: active, isActive: true, debug: debug }, active.id));
+            return _jsx(Component, { def: active, debug: debug }, active.id);
         }
         // For stateful components, inject global handlers
         const statefulActive = active;
@@ -126,7 +179,14 @@ export const Workflow = ({ initialQueue, debug }) => {
                 handlers,
             },
         };
-        return (_jsx(Component, { def: wrappedDef, isActive: true, debug: debug }, active.id));
-    }, [active, debug, handlers]);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: timeline, children: (item) => (_jsx(Box, { marginTop: 1, children: _jsx(Component, { def: item, isActive: false, debug: debug }) }, item.id)) }, "timeline"), _jsx(Box, { marginTop: 1, children: activeComponent })] }));
+        return _jsx(Component, { def: wrappedDef, debug: debug }, active.id);
+    }, [current, debug, handlers]);
+    const pendingComponent = useMemo(() => {
+        const { pending } = current;
+        if (!pending)
+            return null;
+        // Pending components don't receive input
+        return _jsx(Component, { def: pending, debug: debug }, pending.id);
+    }, [current, debug]);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: timeline, children: (item) => (_jsx(Box, { marginTop: 1, children: _jsx(Component, { def: item, debug: false }) }, item.id)) }, "timeline"), pendingComponent && _jsx(Box, { marginTop: 1, children: pendingComponent }), activeComponent && _jsx(Box, { marginTop: 1, children: activeComponent })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prompt-language-shell",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Your personal command-line concierge. Ask politely, and it gets things done.",
   "type": "module",
   "main": "dist/index.js",

package/dist/services/queue.js

@@ -1,52 +0,0 @@
-import { FeedbackType } from '../types/types.js';
-import { createFeedback } from './components.js';
-import { FeedbackMessages } from './messages.js';
-import { exitApp } from './process.js';
-/**
- * Higher-order function that wraps queue handler logic with common patterns:
- * - Check if queue is empty
- * - Extract first element
- * - Optionally check component name
- * - Execute callback with first element
- * - Return new queue state
- */
-export function withQueueHandler(componentName, callback, shouldExit = false, exitCode = 0) {
-    return (currentQueue) => {
-        if (currentQueue.length === 0)
-            return currentQueue;
-        const [first, ...rest] = currentQueue;
-        // If componentName is specified, check if it matches
-        if (componentName && first.name !== componentName) {
-            if (shouldExit) {
-                exitApp(exitCode);
-            }
-            return [];
-        }
-        // Execute callback with first and rest
-        const result = callback(first, rest);
-        // Exit if specified
-        if (shouldExit) {
-            exitApp(exitCode);
-        }
-        // Return result or empty queue
-        return result || [];
-    };
-}
-/**
- * Creates a generic error handler for a component
- */
-export function createErrorHandler(componentName, addToTimeline) {
-    return (error) => withQueueHandler(componentName, (first) => {
-        addToTimeline(first, createFeedback(FeedbackType.Failed, FeedbackMessages.UnexpectedError, error));
-        return undefined;
-    }, true, 1);
-}
-/**
- * Creates a generic completion handler for a component
- */
-export function createCompletionHandler(componentName, addToTimeline, onComplete) {
-    return withQueueHandler(componentName, (first) => {
-        onComplete(first);
-        return undefined;
-    }, true, 0);
-}