prompt-language-shell 0.3.0 → 0.3.2

package/dist/index.js

@@ -4,8 +4,6 @@ import { existsSync, readFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 import { render } from 'ink';
-import { hasValidConfig, loadConfig, saveAnthropicConfig, } from './services/config.js';
-import { createAnthropicService } from './services/anthropic.js';
 import { Main } from './ui/Main.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -26,26 +24,5 @@ const app = {
 // Get command from command-line arguments
 const args = process.argv.slice(2);
 const command = args.join(' ').trim() || null;
-async function runApp() {
-    // Happy path: valid config exists
-    if (hasValidConfig()) {
-        const config = loadConfig();
-        const service = createAnthropicService(config.anthropic);
-        render(_jsx(Main, { app: app, command: command, service: service, isReady: true }));
-        return;
-    }
-    // Setup: config doesn't exist or is invalid
-    const { waitUntilExit, unmount } = render(_jsx(Main, { app: app, command: command, isReady: false, onConfigured: (config) => {
-            saveAnthropicConfig(config);
-            if (command) {
-                return createAnthropicService(config);
-            }
-            else {
-                // No command - exit after showing completion message
-                setTimeout(() => unmount(), 100);
-                return undefined;
-            }
-        } }));
-    await waitUntilExit();
-}
-runApp();
+// Render application
+render(_jsx(Main, { app: app, command: command }));

package/dist/services/components.js

@@ -0,0 +1,90 @@
+import { ComponentName, } from '../types/components.js';
+import { StepType } from '../ui/Config.js';
+import { AnthropicModel, isValidAnthropicApiKey, isValidAnthropicModel, } from './config.js';
+export function markAsDone(component) {
+    return { ...component, state: { ...component.state, done: true } };
+}
+export function createWelcomeDefinition(app) {
+    return {
+        name: ComponentName.Welcome,
+        props: { app },
+    };
+}
+export function createConfigSteps() {
+    return [
+        {
+            description: 'Anthropic API key',
+            key: 'key',
+            type: StepType.Text,
+            value: null,
+            validate: isValidAnthropicApiKey,
+        },
+        {
+            description: 'Model',
+            key: 'model',
+            type: StepType.Selection,
+            options: [
+                { label: 'Haiku 4.5', value: AnthropicModel.Haiku },
+                { label: 'Sonnet 4.5', value: AnthropicModel.Sonnet },
+                { label: 'Opus 4.1', value: AnthropicModel.Opus },
+            ],
+            defaultIndex: 0,
+            validate: isValidAnthropicModel,
+        },
+    ];
+}
+export function createConfigDefinition(onFinished, onAborted) {
+    return {
+        name: ComponentName.Config,
+        state: { done: false },
+        props: {
+            steps: createConfigSteps(),
+            onFinished,
+            onAborted,
+        },
+    };
+}
+export function createCommandDefinition(command, service, onError, onComplete) {
+    return {
+        name: ComponentName.Command,
+        state: {
+            done: false,
+            isLoading: true,
+        },
+        props: {
+            command,
+            service,
+            onError,
+            onComplete,
+        },
+    };
+}
+export function createPlanDefinition(message, tasks) {
+    return {
+        name: ComponentName.Plan,
+        props: {
+            message,
+            tasks,
+        },
+    };
+}
+export function createFeedback(type, ...messages) {
+    return {
+        name: ComponentName.Feedback,
+        props: {
+            type,
+            message: messages.join('\n\n'),
+        },
+    };
+}
+export function createMessage(text) {
+    return {
+        name: ComponentName.Message,
+        props: {
+            text,
+        },
+    };
+}
+export function isStateless(component) {
+    return !('state' in component);
+}

package/dist/services/config.js

@@ -2,6 +2,13 @@ import { existsSync, readFileSync, writeFileSync } from 'fs';
 import { homedir } from 'os';
 import { join } from 'path';
 import YAML from 'yaml';
+export var AnthropicModel;
+(function (AnthropicModel) {
+    AnthropicModel["Sonnet"] = "claude-sonnet-4-5";
+    AnthropicModel["Haiku"] = "claude-haiku-4-5";
+    AnthropicModel["Opus"] = "claude-opus-4-1";
+})(AnthropicModel || (AnthropicModel = {}));
+export const SUPPORTED_MODELS = Object.values(AnthropicModel);
 export class ConfigError extends Error {
     origin;
     constructor(message, origin) {
@@ -10,7 +17,9 @@ export class ConfigError extends Error {
         this.origin = origin;
     }
 }
-const CONFIG_FILE = join(homedir(), '.plsrc');
+function getConfigFile() {
+    return join(homedir(), '.plsrc');
+}
 function parseYamlConfig(content) {
     try {
         return YAML.parse(content);
@@ -37,30 +46,41 @@ function validateConfig(parsed) {
             key,
         },
     };
-    // Optional model
-    if (model && typeof model === 'string') {
+    // Optional model - only set if valid
+    if (model && typeof model === 'string' && isValidAnthropicModel(model)) {
         validatedConfig.anthropic.model = model;
     }
     return validatedConfig;
 }
 export function loadConfig() {
-    if (!existsSync(CONFIG_FILE)) {
+    const configFile = getConfigFile();
+    if (!existsSync(configFile)) {
         throw new ConfigError('Configuration not found');
     }
-    const content = readFileSync(CONFIG_FILE, 'utf-8');
+    const content = readFileSync(configFile, 'utf-8');
     const parsed = parseYamlConfig(content);
     return validateConfig(parsed);
 }
 export function getConfigPath() {
-    return CONFIG_FILE;
+    return getConfigFile();
 }
 export function configExists() {
-    return existsSync(CONFIG_FILE);
+    return existsSync(getConfigFile());
+}
+export function isValidAnthropicApiKey(key) {
+    // Anthropic API keys format: sk-ant-api03-XXXXX (108 chars total)
+    // - Prefix: sk-ant-api03- (13 chars)
+    // - Key body: 95 characters (uppercase, lowercase, digits, hyphens, underscores)
+    const apiKeyPattern = /^sk-ant-api03-[A-Za-z0-9_-]{95}$/;
+    return apiKeyPattern.test(key);
+}
+export function isValidAnthropicModel(model) {
+    return SUPPORTED_MODELS.includes(model);
 }
-export function hasValidConfig() {
+export function hasValidAnthropicKey() {
     try {
         const config = loadConfig();
-        return !!config.anthropic.key;
+        return (!!config.anthropic.key && isValidAnthropicApiKey(config.anthropic.key));
     }
     catch {
         return false;
@@ -86,12 +106,43 @@ export function mergeConfig(existingContent, sectionName, newValues) {
     return YAML.stringify(sortedConfig);
 }
 export function saveConfig(section, config) {
-    const existingContent = existsSync(CONFIG_FILE)
-        ? readFileSync(CONFIG_FILE, 'utf-8')
+    const configFile = getConfigFile();
+    const existingContent = existsSync(configFile)
+        ? readFileSync(configFile, 'utf-8')
         : '';
     const newContent = mergeConfig(existingContent, section, config);
-    writeFileSync(CONFIG_FILE, newContent, 'utf-8');
+    writeFileSync(configFile, newContent, 'utf-8');
 }
 export function saveAnthropicConfig(config) {
     saveConfig('anthropic', config);
 }
+/**
+ * Returns a message requesting initial setup.
+ * Provides natural language variations that sound like a professional concierge
+ * preparing to serve, avoiding technical jargon.
+ *
+ * @param forFutureUse - If true, indicates setup is for future requests rather than
+ *                       an immediate task
+ */
+export function getConfigurationRequiredMessage(forFutureUse = false) {
+    if (forFutureUse) {
+        const messages = [
+            "Before I can assist with your requests, let's get a few things ready.",
+            'Let me set up a few things so I can help you in the future.',
+            "I'll need to prepare a few things before I can assist you.",
+            "Let's get everything ready so I can help with your tasks.",
+            "I need to set up a few things first, then I'll be ready to assist.",
+            'Let me prepare everything so I can help you going forward.',
+        ];
+        return messages[Math.floor(Math.random() * messages.length)];
+    }
+    const messages = [
+        'Before I can help, let me get a few things ready.',
+        'I need to set up a few things first.',
+        'Let me prepare everything before we begin.',
+        'Just a moment while I get ready to assist you.',
+        "I'll need to get set up before I can help with that.",
+        'Let me get everything ready for you.',
+    ];
+    return messages[Math.floor(Math.random() * messages.length)];
+}

package/dist/services/process.js

@@ -0,0 +1,6 @@
+/**
+ * Exit application after brief delay to allow UI to render
+ */
+export function exitApp(code) {
+    setTimeout(() => process.exit(code), 100);
+}

package/dist/types/components.js

@@ -1,3 +1,12 @@
+export var ComponentName;
+(function (ComponentName) {
+    ComponentName["Welcome"] = "welcome";
+    ComponentName["Config"] = "config";
+    ComponentName["Feedback"] = "feedback";
+    ComponentName["Message"] = "message";
+    ComponentName["Plan"] = "plan";
+    ComponentName["Command"] = "command";
+})(ComponentName || (ComponentName = {}));
 export var TaskType;
 (function (TaskType) {
     TaskType["Config"] = "config";
@@ -11,6 +20,7 @@ export var TaskType;
 })(TaskType || (TaskType = {}));
 export var FeedbackType;
 (function (FeedbackType) {
+    FeedbackType["Info"] = "info";
     FeedbackType["Succeeded"] = "succeeded";
     FeedbackType["Aborted"] = "aborted";
     FeedbackType["Failed"] = "failed";

package/dist/ui/Column.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from 'ink';
 import { Component } from './Component.js';
 export const Column = ({ items }) => {
-    return (_jsx(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", gap: 1, children: items.map((item, index) => (_jsx(Box, { children: _jsx(Component, { def: item }) }, index))) }));
+    return (_jsx(Box, { marginTop: 1, marginBottom: 1, marginLeft: 1, flexDirection: "column", gap: 1, children: items.map((item, index) => (_jsx(Box, { children: _jsx(Component, { def: item }) }, index))) }));
 };

package/dist/ui/Command.js

@@ -1,80 +1,12 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
-import { TaskType } from '../types/components.js';
-import { Label } from './Label.js';
-import { List } from './List.js';
 import { Spinner } from './Spinner.js';
 const MIN_PROCESSING_TIME = 1000; // purely for visual effect
-// Color palette
-const ColorPalette = {
-    [TaskType.Config]: {
-        description: '#ffffff', // white
-        type: '#5c9ccc', // cyan
-    },
-    [TaskType.Plan]: {
-        description: '#ffffff', // white
-        type: '#5ccccc', // magenta
-    },
-    [TaskType.Execute]: {
-        description: '#ffffff', // white
-        type: '#4a9a7a', // green
-    },
-    [TaskType.Answer]: {
-        description: '#ffffff', // white
-        type: '#9c5ccc', // purple
-    },
-    [TaskType.Report]: {
-        description: '#ffffff', // white
-        type: '#cc9c5c', // orange
-    },
-    [TaskType.Define]: {
-        description: '#ffffff', // white
-        type: '#cc9c5c', // amber
-    },
-    [TaskType.Ignore]: {
-        description: '#cccc5c', // yellow
-        type: '#cc7a5c', // orange
-    },
-    [TaskType.Select]: {
-        description: '#888888', // grey
-        type: '#5c8cbc', // steel blue
-    },
-};
-function taskToListItem(task) {
-    const colors = ColorPalette[task.type];
-    const item = {
-        description: {
-            text: task.action,
-            color: colors.description,
-        },
-        type: {
-            text: task.type,
-            color: colors.type,
-        },
-    };
-    // Add children for Define tasks with options
-    if (task.type === TaskType.Define && Array.isArray(task.params?.options)) {
-        const selectColors = ColorPalette[TaskType.Select];
-        item.children = task.params.options.map((option) => ({
-            description: {
-                text: String(option),
-                color: selectColors.description,
-            },
-            type: {
-                text: TaskType.Select,
-                color: selectColors.type,
-            },
-        }));
-    }
-    return item;
-}
 export function Command({ command, state, service, children, onError, onComplete, }) {
     const done = state?.done ?? false;
     const [error, setError] = useState(null);
     const [isLoading, setIsLoading] = useState(state?.isLoading ?? !done);
-    const [message, setMessage] = useState('');
-    const [tasks, setTasks] = useState([]);
     useEffect(() => {
         // Skip processing if done (showing historical/final state)
         if (done) {
@@ -95,10 +27,8 @@ export function Command({ command, state, service, children, onError, onComplete
                 const remainingTime = Math.max(0, MIN_PROCESSING_TIME - elapsed);
                 await new Promise((resolve) => setTimeout(resolve, remainingTime));
                 if (mounted) {
-                    setMessage(result.message);
-                    setTasks(result.tasks);
                     setIsLoading(false);
-                    onComplete?.();
+                    onComplete?.(result.message, result.tasks);
                 }
             }
             catch (err) {
@@ -122,5 +52,5 @@ export function Command({ command, state, service, children, onError, onComplete
             mounted = false;
         };
     }, [command, done, service]);
-    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", marginLeft: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: ["> pls ", command] }), isLoading && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Spinner, {})] }))] }), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) })), !isLoading && tasks.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [message && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { children: " " }), _jsx(Label, { description: message, descriptionColor: ColorPalette[TaskType.Plan].description, type: TaskType.Plan, typeColor: ColorPalette[TaskType.Plan].type })] })), _jsx(List, { items: tasks.map(taskToListItem) })] })), children] }));
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: "gray", children: ["> pls ", command] }), isLoading && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Spinner, {})] }))] }), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) })), children] }));
 }

package/dist/ui/Component.js

@@ -1,23 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentName } from '../types/components.js';
 import { Command } from './Command.js';
 import { Config } from './Config.js';
 import { Feedback } from './Feedback.js';
+import { Message } from './Message.js';
+import { Plan } from './Plan.js';
 import { Welcome } from './Welcome.js';
 export function Component({ def }) {
     switch (def.name) {
-        case 'welcome':
+        case ComponentName.Welcome:
             return _jsx(Welcome, { ...def.props });
-        case 'config': {
+        case ComponentName.Config: {
             const props = def.props;
             const state = def.state;
             return _jsx(Config, { ...props, state: state });
         }
-        case 'feedback':
-            return _jsx(Feedback, { ...def.props });
-        case 'command': {
+        case ComponentName.Command: {
             const props = def.props;
             const state = def.state;
             return _jsx(Command, { ...props, state: state });
         }
+        case ComponentName.Plan:
+            return _jsx(Plan, { ...def.props });
+        case ComponentName.Feedback:
+            return _jsx(Feedback, { ...def.props });
+        case ComponentName.Message:
+            return _jsx(Message, { ...def.props });
     }
 }

package/dist/ui/Config.js

@@ -1,20 +1,87 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text, useInput, useFocus } from 'ink';
 import TextInput from 'ink-text-input';
+export var StepType;
+(function (StepType) {
+    StepType["Text"] = "text";
+    StepType["Selection"] = "selection";
+})(StepType || (StepType = {}));
+function TextStep({ value, placeholder, validate, onChange, onSubmit, }) {
+    const [inputValue, setInputValue] = React.useState(value);
+    const [validationFailed, setValidationFailed] = React.useState(false);
+    const { isFocused } = useFocus({ autoFocus: true });
+    const handleChange = (newValue) => {
+        setInputValue(newValue);
+        onChange(newValue);
+        if (validationFailed) {
+            setValidationFailed(false);
+        }
+    };
+    const handleSubmit = (value) => {
+        if (!validate(value)) {
+            setValidationFailed(true);
+            return;
+        }
+        onSubmit(value);
+    };
+    // Handle input manually when validation fails
+    useInput((input, key) => {
+        if (!validationFailed)
+            return;
+        if (key.return) {
+            handleSubmit(inputValue);
+        }
+        else if (key.backspace || key.delete) {
+            const newValue = inputValue.slice(0, -1);
+            handleChange(newValue);
+        }
+        else if (!key.ctrl && !key.meta && input) {
+            const newValue = inputValue + input;
+            handleChange(newValue);
+        }
+    }, { isActive: validationFailed });
+    // When validation fails, show colored text
+    if (validationFailed) {
+        return (_jsxs(Text, { color: "#cc5c5c", children: [inputValue || placeholder, isFocused && _jsx(Text, { inverse: true, children: " " })] }));
+    }
+    return (_jsx(TextInput, { value: inputValue, onChange: handleChange, onSubmit: handleSubmit, placeholder: placeholder }));
+}
+function SelectionStep({ options, selectedIndex, isCurrentStep, }) {
+    return (_jsx(Box, { children: options.map((option, optIndex) => {
+            const isSelected = optIndex === selectedIndex;
+            return (_jsx(Box, { marginRight: 2, children: _jsx(Text, { dimColor: !isSelected || !isCurrentStep, bold: isSelected, children: option.label }) }, option.value));
+        }) }));
+}
 export function Config({ steps, state, onFinished, onAborted }) {
     const done = state?.done ?? false;
     const [step, setStep] = React.useState(done ? steps.length : 0);
     const [values, setValues] = React.useState(() => {
         const initial = {};
-        steps.forEach((step) => {
-            if (step.value !== null) {
-                initial[step.key] = step.value;
+        steps.forEach((stepConfig) => {
+            switch (stepConfig.type) {
+                case StepType.Text:
+                    if (stepConfig.value !== null) {
+                        initial[stepConfig.key] = stepConfig.value;
+                    }
+                    break;
+                case StepType.Selection:
+                    initial[stepConfig.key] =
+                        stepConfig.options[stepConfig.defaultIndex].value;
+                    break;
+                default: {
+                    const exhaustiveCheck = stepConfig;
+                    throw new Error(`Unsupported step type: ${exhaustiveCheck}`);
+                }
             }
         });
         return initial;
     });
     const [inputValue, setInputValue] = React.useState('');
+    const [selectedIndex, setSelectedIndex] = React.useState(() => {
+        const firstStep = steps[0];
+        return firstStep?.type === StepType.Selection ? firstStep.defaultIndex : 0;
+    });
     const normalizeValue = (value) => {
         if (value === null || value === undefined) {
             return '';
@@ -23,16 +90,83 @@ export function Config({ steps, state, onFinished, onAborted }) {
     };
     useInput((input, key) => {
         if (key.escape && !done && step < steps.length) {
+            // Save current value before aborting
+            const currentStepConfig = steps[step];
+            if (currentStepConfig) {
+                let currentValue = '';
+                switch (currentStepConfig.type) {
+                    case StepType.Text:
+                        currentValue = inputValue || values[currentStepConfig.key] || '';
+                        break;
+                    case StepType.Selection:
+                        currentValue =
+                            currentStepConfig.options[selectedIndex]?.value ||
+                                values[currentStepConfig.key] ||
+                                '';
+                        break;
+                    default: {
+                        const exhaustiveCheck = currentStepConfig;
+                        throw new Error(`Unsupported step type: ${exhaustiveCheck}`);
+                    }
+                }
+                if (currentValue) {
+                    setValues({ ...values, [currentStepConfig.key]: currentValue });
+                }
+            }
             if (onAborted) {
                 onAborted();
             }
+            return;
+        }
+        const currentStep = steps[step];
+        if (!done && step < steps.length && currentStep) {
+            switch (currentStep.type) {
+                case StepType.Selection:
+                    if (key.tab) {
+                        setSelectedIndex((prev) => (prev + 1) % currentStep.options.length);
+                    }
+                    else if (key.return) {
+                        handleSubmit(currentStep.options[selectedIndex].value);
+                    }
+                    break;
+                case StepType.Text:
+                    // Text input handled by TextInput component
+                    break;
+                default: {
+                    const exhaustiveCheck = currentStep;
+                    throw new Error(`Unsupported step type: ${exhaustiveCheck}`);
+                }
+            }
         }
     });
     const handleSubmit = (value) => {
         const currentStepConfig = steps[step];
-        const finalValue = normalizeValue(value) || normalizeValue(currentStepConfig.value);
-        // Don't allow empty value if step has no default (mandatory field)
-        if (!finalValue && !currentStepConfig.value) {
+        let finalValue = '';
+        switch (currentStepConfig.type) {
+            case StepType.Selection:
+                // For selection, value is already validated by options
+                finalValue = value;
+                break;
+            case StepType.Text: {
+                // For text input
+                const normalizedInput = normalizeValue(value);
+                // Try user input first, then fall back to default
+                if (normalizedInput && currentStepConfig.validate(normalizedInput)) {
+                    finalValue = normalizedInput;
+                }
+                else if (currentStepConfig.value &&
+                    currentStepConfig.validate(currentStepConfig.value)) {
+                    finalValue = currentStepConfig.value;
+                }
+                break;
+            }
+            default: {
+                const exhaustiveCheck = currentStepConfig;
+                throw new Error(`Unsupported step type: ${exhaustiveCheck}`);
+            }
+        }
+        // Don't allow empty or invalid value
+        if (!finalValue) {
             return;
         }
         const newValues = { ...values, [currentStepConfig.key]: finalValue };
@@ -47,9 +181,34 @@ export function Config({ steps, state, onFinished, onAborted }) {
         }
         else {
             setStep(step + 1);
+            // Reset selection index for next step
+            const nextStep = steps[step + 1];
+            if (nextStep?.type === StepType.Selection) {
+                setSelectedIndex(nextStep.defaultIndex);
+            }
+        }
+    };
+    const renderStepInput = (stepConfig, isCurrentStep) => {
+        switch (stepConfig.type) {
+            case StepType.Text:
+                if (isCurrentStep) {
+                    return (_jsx(TextStep, { value: inputValue, placeholder: stepConfig.value || undefined, validate: stepConfig.validate, onChange: setInputValue, onSubmit: handleSubmit }));
+                }
+                return _jsx(Text, { dimColor: true, children: values[stepConfig.key] || '' });
+            case StepType.Selection: {
+                if (!isCurrentStep) {
+                    const selectedOption = stepConfig.options.find((opt) => opt.value === values[stepConfig.key]);
+                    return _jsx(Text, { dimColor: true, children: selectedOption?.label || '' });
+                }
+                return (_jsx(SelectionStep, { options: stepConfig.options, selectedIndex: selectedIndex, isCurrentStep: isCurrentStep }));
+            }
+            default: {
+                const exhaustiveCheck = stepConfig;
+                throw new Error(`Unsupported step type: ${exhaustiveCheck}`);
+            }
         }
     };
-    return (_jsx(Box, { flexDirection: "column", marginLeft: 1, children: steps.map((stepConfig, index) => {
+    return (_jsx(Box, { flexDirection: "column", children: steps.map((stepConfig, index) => {
             const isCurrentStep = index === step && !done;
             const isCompleted = index < step;
             const wasAborted = index === step && done;
@@ -57,6 +216,6 @@ export function Config({ steps, state, onFinished, onAborted }) {
             if (!shouldShow) {
                 return null;
             }
-            return (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsx(Box, { children: _jsxs(Text, { children: [stepConfig.description, ":"] }) }), _jsxs(Box, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "#5c8cbc", dimColor: !isCurrentStep, children: ">" }), _jsx(Text, { children: " " }), isCurrentStep ? (_jsx(TextInput, { value: inputValue, onChange: setInputValue, onSubmit: handleSubmit, placeholder: stepConfig.value || undefined })) : (_jsx(Text, { dimColor: true, children: values[stepConfig.key] || '' }))] })] }, stepConfig.key));
+            return (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsx(Box, { children: _jsxs(Text, { children: [stepConfig.description, ":"] }) }), _jsxs(Box, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "#5c8cbc", dimColor: !isCurrentStep, children: ">" }), _jsx(Text, { children: " " }), renderStepInput(stepConfig, isCurrentStep)] })] }, stepConfig.key));
         }) }));
 }

package/dist/ui/Feedback.js

@@ -3,20 +3,31 @@ import { Box, Text } from 'ink';
 import { FeedbackType } from '../types/components.js';
 function getSymbol(type) {
     return {
+        [FeedbackType.Info]: 'ℹ',
         [FeedbackType.Succeeded]: '✓',
         [FeedbackType.Aborted]: '⊘',
         [FeedbackType.Failed]: '✗',
     }[type];
 }
-function getColor(type) {
+function getSymbolColor(type) {
     return {
+        [FeedbackType.Info]: '#5c9ccc', // cyan
         [FeedbackType.Succeeded]: '#00aa00', // green
         [FeedbackType.Aborted]: '#cc9c5c', // orange
-        [FeedbackType.Failed]: '#aa0000', // red
+        [FeedbackType.Failed]: '#cc5c5c', // red
+    }[type];
+}
+function getMessageColor(type) {
+    return {
+        [FeedbackType.Info]: '#aaaaaa', // light grey
+        [FeedbackType.Succeeded]: '#5ccc5c', // green
+        [FeedbackType.Aborted]: '#cc9c5c', // orange
+        [FeedbackType.Failed]: '#cc5c5c', // red
     }[type];
 }
 export function Feedback({ type, message }) {
-    const color = getColor(type);
+    const symbolColor = getSymbolColor(type);
+    const messageColor = getMessageColor(type);
     const symbol = getSymbol(type);
-    return (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: color, children: [symbol, " ", message] }) }));
+    return (_jsxs(Box, { children: [_jsxs(Text, { color: symbolColor, children: [symbol, " "] }), _jsx(Text, { color: messageColor, children: message })] }));
 }

package/dist/ui/Main.js

@@ -1,133 +1,134 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { ComponentName, } from '../types/components.js';
+import { createAnthropicService, } from '../services/anthropic.js';
 import { FeedbackType } from '../types/components.js';
+import { getConfigurationRequiredMessage, hasValidAnthropicKey, loadConfig, saveAnthropicConfig, } from '../services/config.js';
+import { createCommandDefinition, createConfigDefinition, createFeedback, createMessage, createPlanDefinition, createWelcomeDefinition, isStateless, markAsDone, } from '../services/components.js';
+import { exitApp } from '../services/process.js';
 import { Column } from './Column.js';
-function exit(code) {
-    setTimeout(() => globalThis.process.exit(code), 100);
-}
-function markAsDone(component) {
-    return { ...component, state: { ...component.state, done: true } };
-}
-function createWelcomeDefinition(app) {
-    return {
-        name: 'welcome',
-        props: { app },
-    };
-}
-function createConfigSteps() {
-    return [
-        { description: 'Anthropic API key', key: 'key', value: null },
-        {
-            description: 'Model',
-            key: 'model',
-            value: 'claude-haiku-4-5-20251001',
-        },
-    ];
-}
-function createConfigDefinition(onFinished, onAborted) {
-    return {
-        name: 'config',
-        state: { done: false },
-        props: {
-            steps: createConfigSteps(),
-            onFinished,
-            onAborted,
-        },
-    };
-}
-function createCommandDefinition(command, service, onError, onComplete) {
-    return {
-        name: 'command',
-        state: {
-            done: false,
-            isLoading: true,
-        },
-        props: {
-            command,
-            service,
-            onError,
-            onComplete,
-        },
-    };
-}
-function createFeedback(type, ...messages) {
-    return {
-        name: 'feedback',
-        props: {
-            type,
-            message: messages.join('\n\n'),
-        },
-    };
-}
-export const Main = ({ app, command, service: initialService, isReady, onConfigured, }) => {
-    const [history, setHistory] = React.useState([]);
-    const [current, setCurrent] = React.useState(null);
-    const [service, setService] = React.useState(initialService);
-    const addToHistory = React.useCallback((...items) => {
-        setHistory((history) => [...history, ...items]);
-    }, []);
-    const handleConfigFinished = React.useCallback((config) => {
-        const service = onConfigured?.(config);
-        if (service) {
-            setService(service);
+export const Main = ({ app, command }) => {
+    // Initialize service from existing config if available
+    const [service, setService] = React.useState(() => {
+        if (hasValidAnthropicKey()) {
+            const config = loadConfig();
+            return createAnthropicService(config.anthropic);
         }
-        // Move config to history with done state and add success feedback
-        setCurrent((current) => {
-            if (!current)
-                return null;
-            addToHistory(markAsDone(current), createFeedback(FeedbackType.Succeeded, 'Configuration complete'));
-            return null;
-        });
-    }, [onConfigured, addToHistory]);
-    const handleConfigAborted = React.useCallback(() => {
-        // Move config to history with done state and add aborted feedback
-        setCurrent((current) => {
-            addToHistory(markAsDone(current), createFeedback(FeedbackType.Aborted, 'Configuration aborted by user'));
-            // Exit after showing abort message
-            exit(0);
-            return null;
+        return null;
+    });
+    const [timeline, setTimeline] = React.useState([]);
+    const [queue, setQueue] = React.useState([]);
+    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;
+            // Stateless components auto-complete immediately
+            if (isStateless(first)) {
+                addToTimeline(first);
+                return rest;
+            }
+            return currentQueue;
         });
-    }, [addToHistory]);
+    }, [addToTimeline]);
     const handleCommandError = React.useCallback((error) => {
-        // Move command to history with done state and add error feedback
-        setCurrent((current) => {
-            addToHistory(markAsDone(current), createFeedback(FeedbackType.Failed, 'Unexpected error occurred:', error));
-            // Exit after showing error
-            exit(1);
-            return null;
+        setQueue((currentQueue) => {
+            if (currentQueue.length === 0)
+                return currentQueue;
+            const [first] = currentQueue;
+            if (first.name === ComponentName.Command) {
+                addToTimeline(markAsDone(first), createFeedback(FeedbackType.Failed, 'Unexpected error occurred:', error));
+            }
+            exitApp(1);
+            return [];
+        });
+    }, [addToTimeline]);
+    const handleCommandComplete = React.useCallback((message, tasks) => {
+        setQueue((currentQueue) => {
+            if (currentQueue.length === 0)
+                return currentQueue;
+            const [first] = currentQueue;
+            if (first.name === ComponentName.Command) {
+                addToTimeline(markAsDone(first), createPlanDefinition(message, tasks));
+            }
+            exitApp(0);
+            return [];
         });
-    }, [addToHistory]);
-    const handleCommandComplete = React.useCallback(() => {
-        // Move command to history with done state
-        setCurrent((current) => {
-            addToHistory(markAsDone(current));
-            // Exit after showing plan
-            exit(0);
-            return null;
+    }, [addToTimeline]);
+    const handleConfigFinished = React.useCallback((config) => {
+        const anthropicConfig = config;
+        saveAnthropicConfig(anthropicConfig);
+        const newService = createAnthropicService(anthropicConfig);
+        setService(newService);
+        // Complete config component and add command if present
+        setQueue((currentQueue) => {
+            if (currentQueue.length === 0)
+                return currentQueue;
+            const [first, ...rest] = currentQueue;
+            if (first.name === ComponentName.Config) {
+                addToTimeline(markAsDone(first), createFeedback(FeedbackType.Succeeded, 'Configuration complete'));
+            }
+            // Add command to queue if we have one
+            if (command) {
+                return [
+                    ...rest,
+                    createCommandDefinition(command, newService, handleCommandError, handleCommandComplete),
+                ];
+            }
+            // No command - exit after showing completion message
+            exitApp(0);
+            return rest;
+        });
+    }, [addToTimeline, command, handleCommandError, handleCommandComplete]);
+    const handleConfigAborted = React.useCallback(() => {
+        setQueue((currentQueue) => {
+            if (currentQueue.length === 0)
+                return currentQueue;
+            const [first] = currentQueue;
+            if (first.name === ComponentName.Config) {
+                addToTimeline(markAsDone(first), createFeedback(FeedbackType.Aborted, 'Configuration aborted by user'));
+            }
+            exitApp(0);
+            return [];
         });
-    }, [addToHistory]);
-    // Initialize configuration flow when not ready
+    }, [addToTimeline]);
+    // Initialize queue on mount
     React.useEffect(() => {
-        if (isReady) {
-            return;
+        const hasConfig = !!service;
+        if (command && hasConfig) {
+            // With command + valid config: [Command]
+            setQueue([
+                createCommandDefinition(command, service, handleCommandError, handleCommandComplete),
+            ]);
         }
-        if (!command) {
-            setHistory([createWelcomeDefinition(app)]);
+        else if (command && !hasConfig) {
+            // With command + no config: [Message, Config] (Command added after config)
+            setQueue([
+                createMessage(getConfigurationRequiredMessage()),
+                createConfigDefinition(handleConfigFinished, handleConfigAborted),
+            ]);
         }
-        setCurrent(createConfigDefinition(handleConfigFinished, handleConfigAborted));
-    }, [isReady, app, command, handleConfigFinished, handleConfigAborted]);
-    // Execute command when service and command are available
-    React.useEffect(() => {
-        if (command && service) {
-            setCurrent(createCommandDefinition(command, service, handleCommandError, handleCommandComplete));
+        else if (!command && hasConfig) {
+            // No command + valid config: [Welcome]
+            setQueue([createWelcomeDefinition(app)]);
         }
-    }, [command, service, handleCommandError, handleCommandComplete]);
-    // Show welcome screen when ready but no command
-    React.useEffect(() => {
-        if (isReady && !command) {
-            setCurrent(createWelcomeDefinition(app));
+        else {
+            // No command + no config: [Welcome, Message, Config]
+            setQueue([
+                createWelcomeDefinition(app),
+                createMessage(getConfigurationRequiredMessage(true)),
+                createConfigDefinition(handleConfigFinished, handleConfigAborted),
+            ]);
         }
-    }, [isReady, command, app]);
-    const items = [...history, ...(current ? [current] : [])];
+    }, []); // Only run on mount
+    // Process queue whenever it changes
+    React.useEffect(() => {
+        processNextInQueue();
+    }, [queue, processNextInQueue]);
+    const current = queue.length > 0 ? queue[0] : null;
+    const items = [...timeline, ...(current ? [current] : [])];
     return _jsx(Column, { items: items });
 };

package/dist/ui/Message.js

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

package/dist/ui/Plan.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from 'ink';
+import { TaskType } from '../types/components.js';
+import { Label } from './Label.js';
+import { List } from './List.js';
+const ColorPalette = {
+    [TaskType.Config]: {
+        description: '#ffffff', // white
+        type: '#5c9ccc', // cyan
+    },
+    [TaskType.Plan]: {
+        description: '#ffffff', // white
+        type: '#5ccccc', // magenta
+    },
+    [TaskType.Execute]: {
+        description: '#ffffff', // white
+        type: '#4a9a7a', // green
+    },
+    [TaskType.Answer]: {
+        description: '#ffffff', // white
+        type: '#9c5ccc', // purple
+    },
+    [TaskType.Report]: {
+        description: '#ffffff', // white
+        type: '#cc9c5c', // orange
+    },
+    [TaskType.Define]: {
+        description: '#ffffff', // white
+        type: '#cc9c5c', // amber
+    },
+    [TaskType.Ignore]: {
+        description: '#cccc5c', // yellow
+        type: '#cc7a5c', // orange
+    },
+    [TaskType.Select]: {
+        description: '#888888', // grey
+        type: '#5c8cbc', // steel blue
+    },
+};
+function taskToListItem(task) {
+    const item = {
+        description: {
+            text: task.action,
+            color: ColorPalette[task.type].description,
+        },
+        type: { text: task.type, color: ColorPalette[task.type].type },
+        children: [],
+    };
+    // Add children for Define tasks with options
+    if (task.type === TaskType.Define && Array.isArray(task.params?.options)) {
+        const selectColors = ColorPalette[TaskType.Select];
+        item.children = task.params.options.map((option) => ({
+            description: {
+                text: String(option),
+                color: selectColors.description,
+            },
+            type: {
+                text: TaskType.Select,
+                color: selectColors.type,
+            },
+        }));
+    }
+    return item;
+}
+export function Plan({ message, tasks }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [message && (_jsx(Box, { marginBottom: 1, children: _jsx(Label, { description: message, descriptionColor: ColorPalette[TaskType.Plan].description, type: TaskType.Plan, typeColor: ColorPalette[TaskType.Plan].type }) })), _jsx(List, { items: tasks.map(taskToListItem) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prompt-language-shell",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Your personal command-line concierge. Ask politely, and it gets things done.",
   "type": "module",
   "main": "dist/index.js",
@@ -57,6 +57,7 @@
     "@vitest/coverage-v8": "^4.0.8",
     "eslint": "^9.17.0",
     "husky": "^9.1.7",
+    "ink-testing-library": "^4.0.0",
     "prettier": "^3.6.2",
     "typescript": "^5.3.3",
     "typescript-eslint": "^8.19.1",