prompt-language-shell 0.3.0 → 0.3.4

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/List.js

@@ -1,7 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { Label } from './Label.js';
-export const List = ({ items, level = 0 }) => {
+export const List = ({ items, level = 0, highlightedIndex = null, highlightedParentIndex = null, }) => {
     const marginLeft = level > 0 ? 4 : 0;
-    return (_jsx(Box, { flexDirection: "column", marginLeft: marginLeft, children: items.map((item, index) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "whiteBright", children: '  - ' }), _jsx(Label, { description: item.description.text, descriptionColor: item.description.color, type: item.type.text, typeColor: item.type.color })] }), item.children && item.children.length > 0 && (_jsx(List, { items: item.children, level: level + 1 }))] }, index))) }));
+    return (_jsx(Box, { flexDirection: "column", marginLeft: marginLeft, children: items.map((item, index) => {
+            // At level 0, track which parent is active for child highlighting
+            // At level > 0, only highlight if this parent is the active one
+            const shouldHighlightChildren = level === 0 ? highlightedParentIndex === index : false;
+            const isHighlighted = item.highlighted || (level > 0 && index === highlightedIndex);
+            const marker = item.marker || (isHighlighted ? '  → ' : '  - ');
+            // Use highlighted colors if available and item is highlighted
+            const descriptionColor = isHighlighted && item.description.highlightedColor
+                ? item.description.highlightedColor
+                : item.description.color;
+            const typeColor = isHighlighted && item.type.highlightedColor
+                ? item.type.highlightedColor
+                : item.type.color;
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "whiteBright", children: marker }), _jsx(Label, { description: item.description.text, descriptionColor: descriptionColor, type: item.type.text, typeColor: typeColor })] }), item.children && item.children.length > 0 && (_jsx(List, { items: item.children, level: level + 1, highlightedIndex: shouldHighlightChildren ? highlightedIndex : null }))] }, index));
+        }) }));
 };