prompt-language-shell 0.3.0 → 0.3.4

package/dist/ui/Main.js

@@ -1,133 +1,161 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { ComponentName, TaskType, } 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 handlePlanSelectionConfirmed = React.useCallback((selectedIndex, updatedTasks) => {
+        setQueue((currentQueue) => {
+            if (currentQueue.length === 0)
+                return currentQueue;
+            const [first] = currentQueue;
+            if (first.name === ComponentName.Plan) {
+                // Mark plan as done and add it to timeline
+                addToTimeline(markAsDone(first));
+            }
+            // Exit after selection is confirmed
+            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 handleCommandComplete = React.useCallback((message, tasks) => {
+        setQueue((currentQueue) => {
+            if (currentQueue.length === 0)
+                return currentQueue;
+            const [first] = currentQueue;
+            // Check if tasks contain a Define task that requires user interaction
+            const hasDefineTask = tasks.some((task) => task.type === TaskType.Define);
+            if (first.name === ComponentName.Command) {
+                const planDefinition = createPlanDefinition(message, tasks, hasDefineTask ? handlePlanSelectionConfirmed : undefined);
+                if (hasDefineTask) {
+                    // Don't exit - keep the plan in the queue for interaction
+                    addToTimeline(markAsDone(first));
+                    return [planDefinition];
+                }
+                else {
+                    // No define task - add plan to timeline and exit
+                    addToTimeline(markAsDone(first), planDefinition);
+                    exitApp(0);
+                    return [];
+                }
+            }
+            exitApp(0);
+            return [];
         });
-    }, [addToHistory]);
-    // Initialize configuration flow when not ready
+    }, [addToTimeline, handlePlanSelectionConfirmed]);
+    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 [];
+        });
+    }, [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,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, useInput } 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
+    },
+    [TaskType.Discard]: {
+        description: '#666666', // dark grey
+        type: '#a85c3f', // dark orange
+    },
+};
+function taskToListItem(task, highlightedChildIndex = null, isDefineTaskWithoutSelection = false) {
+    const item = {
+        description: {
+            text: task.action,
+            color: ColorPalette[task.type].description,
+        },
+        type: { text: task.type, color: ColorPalette[task.type].type },
+        children: [],
+    };
+    // Mark define tasks with right arrow when no selection has been made
+    if (isDefineTaskWithoutSelection) {
+        item.marker = '  → ';
+    }
+    // Add children for Define tasks with options
+    if (task.type === TaskType.Define && Array.isArray(task.params?.options)) {
+        item.children = task.params.options.map((option, index) => {
+            // Determine the type based on selection state
+            let childType = TaskType.Select;
+            if (highlightedChildIndex !== null) {
+                // A selection was made - mark others as discarded
+                childType =
+                    index === highlightedChildIndex ? TaskType.Execute : TaskType.Discard;
+            }
+            const colors = ColorPalette[childType];
+            return {
+                description: {
+                    text: String(option),
+                    color: colors.description,
+                    highlightedColor: ColorPalette[TaskType.Plan].description,
+                },
+                type: {
+                    text: childType,
+                    color: colors.type,
+                    highlightedColor: ColorPalette[TaskType.Plan].type,
+                },
+            };
+        });
+    }
+    return item;
+}
+export function Plan({ message, tasks, state, onSelectionConfirmed, }) {
+    const [highlightedIndex, setHighlightedIndex] = useState(state?.highlightedIndex ?? null);
+    const [currentDefineGroupIndex, setCurrentDefineGroupIndex] = useState(state?.currentDefineGroupIndex ?? 0);
+    const [completedSelections, setCompletedSelections] = useState(state?.completedSelections ?? []);
+    const [isDone, setIsDone] = useState(state?.done ?? false);
+    // Find all Define tasks
+    const defineTaskIndices = tasks
+        .map((t, idx) => (t.type === TaskType.Define ? idx : -1))
+        .filter((idx) => idx !== -1);
+    // Get the current active define task
+    const currentDefineTaskIndex = defineTaskIndices[currentDefineGroupIndex] ?? -1;
+    const defineTask = currentDefineTaskIndex >= 0 ? tasks[currentDefineTaskIndex] : null;
+    const optionsCount = Array.isArray(defineTask?.params?.options)
+        ? defineTask.params.options.length
+        : 0;
+    const hasMoreGroups = currentDefineGroupIndex < defineTaskIndices.length - 1;
+    useInput((input, key) => {
+        // Don't handle input if already done or no define task
+        if (isDone || !defineTask) {
+            return;
+        }
+        if (key.downArrow) {
+            setHighlightedIndex((prev) => {
+                if (prev === null) {
+                    return 0; // Select first
+                }
+                return (prev + 1) % optionsCount; // Wrap around
+            });
+        }
+        else if (key.upArrow) {
+            setHighlightedIndex((prev) => {
+                if (prev === null) {
+                    return optionsCount - 1; // Select last
+                }
+                return (prev - 1 + optionsCount) % optionsCount; // Wrap around
+            });
+        }
+        else if (key.return && highlightedIndex !== null) {
+            // Record the selection for this group
+            const newCompletedSelections = [...completedSelections];
+            newCompletedSelections[currentDefineGroupIndex] = highlightedIndex;
+            setCompletedSelections(newCompletedSelections);
+            if (hasMoreGroups) {
+                // Advance to next group
+                setCurrentDefineGroupIndex(currentDefineGroupIndex + 1);
+                setHighlightedIndex(null);
+            }
+            else {
+                // Last group - mark as done to show the selection
+                setIsDone(true);
+                setHighlightedIndex(null); // Clear highlight to show Execute color
+                if (state) {
+                    state.done = true;
+                }
+                // Update all tasks and notify parent
+                const updatedTasks = tasks.map((task, idx) => {
+                    if (defineTaskIndices.includes(idx)) {
+                        return { ...task, type: TaskType.Execute };
+                    }
+                    return task;
+                });
+                onSelectionConfirmed?.(highlightedIndex, updatedTasks);
+            }
+        }
+    }, { isActive: !isDone && defineTask !== null });
+    // Sync state back to state object
+    useEffect(() => {
+        if (state) {
+            state.highlightedIndex = highlightedIndex;
+            state.currentDefineGroupIndex = currentDefineGroupIndex;
+            state.completedSelections = completedSelections;
+            state.done = isDone;
+        }
+    }, [
+        highlightedIndex,
+        currentDefineGroupIndex,
+        completedSelections,
+        isDone,
+        state,
+    ]);
+    const listItems = tasks.map((task, idx) => {
+        // Find which define group this task belongs to (if any)
+        const defineGroupIndex = defineTaskIndices.indexOf(idx);
+        const isDefineTask = defineGroupIndex !== -1;
+        // Determine child selection state
+        let childIndex = null;
+        if (isDefineTask) {
+            if (defineGroupIndex < currentDefineGroupIndex) {
+                // Previously completed group - show the selection
+                childIndex = completedSelections[defineGroupIndex] ?? null;
+            }
+            else if (defineGroupIndex === currentDefineGroupIndex) {
+                // Current active group - show live navigation unless done
+                if (isDone) {
+                    // If done, show the completed selection for this group too
+                    childIndex = completedSelections[defineGroupIndex] ?? null;
+                }
+                else {
+                    childIndex = null;
+                }
+            }
+        }
+        // Show arrow on current active define task when no child is highlighted
+        const isDefineWithoutSelection = isDefineTask &&
+            defineGroupIndex === currentDefineGroupIndex &&
+            highlightedIndex === null;
+        return taskToListItem(task, childIndex, isDefineWithoutSelection);
+    });
+    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: listItems, highlightedIndex: currentDefineTaskIndex >= 0 ? highlightedIndex : null, highlightedParentIndex: currentDefineTaskIndex })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prompt-language-shell",
-  "version": "0.3.0",
+  "version": "0.3.4",
   "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",