prompt-language-shell 0.9.2 → 0.9.6

package/dist/components/views/Answer.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { ComponentStatus } from '../../types/components.js';
+import { Colors, getTextColor } from '../../services/colors.js';
+import { getAnswerLoadingMessage } from '../../services/messages.js';
+import { ExecutionStatus } from '../../services/shell.js';
+import { Spinner } from './Spinner.js';
+import { Upcoming } from './Upcoming.js';
+/**
+ * Answer view: Displays question and answer
+ */
+export const AnswerView = ({ status, question, lines, error, upcoming, cancelled = false, }) => {
+    const isActive = status === ComponentStatus.Active;
+    const isLoading = isActive && !lines && !error;
+    const loadingMessage = useMemo(() => getAnswerLoadingMessage(), []);
+    // Determine upcoming status: cancelled, error, or pending
+    const isTerminated = cancelled || error !== null;
+    const upcomingStatus = cancelled
+        ? ExecutionStatus.Aborted
+        : error
+            ? ExecutionStatus.Failed
+            : ExecutionStatus.Pending;
+    // Build full list of items to show - include current question when terminated
+    const upcomingItems = isTerminated && upcoming ? [question, ...upcoming] : (upcoming ?? []);
+    const showUpcoming = upcomingItems.length > 0 && (isActive || isTerminated);
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(_Fragment, { children: [_jsx(Box, { marginLeft: 1, marginBottom: 1, children: _jsx(Text, { color: getTextColor(isActive), children: question }) }), _jsxs(Box, { paddingLeft: 3, marginBottom: 1, children: [_jsxs(Text, { color: getTextColor(isActive), children: [loadingMessage, " "] }), _jsx(Spinner, {})] })] })), lines && lines.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Box, { marginLeft: 1, marginBottom: 1, children: _jsx(Text, { color: getTextColor(isActive), children: question }) }), _jsx(Box, { flexDirection: "column", paddingLeft: 3, children: lines.map((line, index) => (_jsx(Text, { color: getTextColor(isActive), children: line }, index))) })] })), showUpcoming && (_jsx(Box, { marginTop: lines && lines.length > 0 ? 1 : 0, children: _jsx(Upcoming, { items: upcomingItems, status: upcomingStatus }) })), error && (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) }))] }));
+};

package/dist/components/views/Command.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { ComponentStatus } from '../../types/components.js';
+import { Colors } from '../../services/colors.js';
+import { Spinner } from './Spinner.js';
+import { UserQuery } from './UserQuery.js';
+export const CommandView = ({ command, state, status }) => {
+    const isActive = status === ComponentStatus.Active;
+    const { error } = state;
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [!isActive ? (_jsxs(UserQuery, { children: ["> pls ", command] })) : (_jsxs(Box, { marginLeft: 1, children: [_jsxs(Text, { color: Colors.Text.Active, children: ["> pls ", command] }), _jsx(Text, { children: " " }), _jsx(Spinner, {})] })), error && (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) }))] }));
+};

package/dist/components/views/Config.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, 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 { DebugLevel } from '../../configuration/types.js';
+import { useInput } from '../../services/keyboard.js';
+/**
+ * Get postfix with debug brackets if debug is enabled
+ * Info: {key} | Verbose: {key} entry
+ */
+function getPostfix(text, debugLevel) {
+    if (debugLevel === DebugLevel.None || !text) {
+        return '';
+    }
+    if (debugLevel === DebugLevel.Info) {
+        return `{${text}}`;
+    }
+    return `{${text}} entry`;
+}
+export var StepType;
+(function (StepType) {
+    StepType["Text"] = "text";
+    StepType["Selection"] = "selection";
+})(StepType || (StepType = {}));
+function TextStep({ value, placeholder, validate, onChange, onSubmit, }) {
+    const [inputValue, setInputValue] = useState(value);
+    const [validationFailed, setValidationFailed] = useState(false);
+    const { isFocused } = useFocus({ autoFocus: true });
+    // Sync internal state with prop changes
+    useEffect(() => {
+        setInputValue(value);
+    }, [value]);
+    const handleChange = (newValue) => {
+        setInputValue(newValue);
+        onChange(newValue);
+        if (validationFailed) {
+            setValidationFailed(false);
+        }
+    };
+    const handleSubmit = (value) => {
+        // Use placeholder if input is empty
+        const finalValue = value || placeholder || '';
+        if (!validate(finalValue)) {
+            setValidationFailed(true);
+            return;
+        }
+        onSubmit(finalValue);
+    };
+    // 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: Colors.Status.Error, 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 const ConfigView = ({ steps, state, status, debug = DebugLevel.None, onInputChange, onInputSubmit, }) => {
+    const isActive = status === ComponentStatus.Active;
+    const { values, completedStep, selectedIndex } = state;
+    const renderStepInput = (stepConfig, isCurrentStep) => {
+        const configKey = stepConfig.path || stepConfig.key;
+        const displayValue = values[configKey];
+        switch (stepConfig.type) {
+            case StepType.Text:
+                if (isCurrentStep && onInputChange && onInputSubmit) {
+                    return (_jsx(TextStep, { value: values[configKey] || '', placeholder: stepConfig.value || undefined, validate: stepConfig.validate, onChange: onInputChange, onSubmit: onInputSubmit }));
+                }
+                return (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: displayValue || '' }));
+            case StepType.Selection: {
+                if (!isCurrentStep) {
+                    const option = stepConfig.options.find((opt) => opt.value === displayValue);
+                    return _jsx(Text, { dimColor: true, children: option?.label || '' });
+                }
+                return (_jsx(SelectionStep, { options: stepConfig.options, selectedIndex: selectedIndex, isCurrentStep: true }));
+            }
+            default: {
+                const _exhaustiveCheck = stepConfig;
+                throw new Error('Unsupported step type');
+            }
+        }
+    };
+    return (_jsx(Box, { flexDirection: "column", marginLeft: 1, children: steps.map((stepConfig, index) => {
+            const isCurrentStep = index === completedStep && isActive;
+            const isCompleted = index < completedStep;
+            const wasAborted = index === completedStep && !isActive;
+            const shouldShow = isCompleted || isCurrentStep || wasAborted;
+            if (!shouldShow) {
+                return null;
+            }
+            const postfix = getPostfix(stepConfig.path, debug);
+            return (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { children: stepConfig.description }), _jsx(Text, { children: ": " }), postfix && _jsx(Text, { color: Colors.Type.Config, children: postfix })] }), _jsxs(Box, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: Colors.Action.Select, dimColor: !isCurrentStep, children: ">" }), _jsx(Text, { children: " " }), renderStepInput(stepConfig, isCurrentStep)] })] }, stepConfig.path || stepConfig.key));
+        }) }));
+};

package/dist/components/views/Confirm.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { ComponentStatus } from '../../types/components.js';
+import { Colors, getTextColor, Palette } from '../../services/colors.js';
+import { UserQuery } from './UserQuery.js';
+const OPTIONS = [
+    { label: 'yes', value: 'yes', color: Palette.BrightGreen },
+    { label: 'no', value: 'no', color: Colors.Status.Error },
+];
+/**
+ * Confirm view: Displays yes/no confirmation prompt
+ */
+export const ConfirmView = ({ status, message, selectedIndex, }) => {
+    const isActive = status === ComponentStatus.Active;
+    // Timeline rendering (Done status)
+    if (status === ComponentStatus.Done) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, marginLeft: 1, children: _jsx(Text, { color: undefined, children: message }) }), _jsxs(UserQuery, { children: ["> ", OPTIONS[selectedIndex].label] })] }));
+    }
+    // Active/Pending rendering
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, marginLeft: 1, children: _jsx(Text, { color: getTextColor(isActive), children: message }) }), _jsxs(Box, { marginLeft: 1, children: [_jsx(Text, { color: Colors.Action.Select, children: ">" }), _jsx(Text, { children: " " }), _jsx(Box, { children: OPTIONS.map((option, index) => {
+                            const isSelected = index === selectedIndex;
+                            return (_jsx(Box, { marginRight: 2, children: _jsx(Text, { color: isSelected ? option.color : undefined, dimColor: !isSelected, children: option.label }) }, option.value));
+                        }) })] })] }));
+};

package/dist/components/views/Debug.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const CONTENT_WIDTH = 80;
+const HORIZONTAL_PADDING = 2;
+export const Debug = ({ title, content, color }) => {
+    // Plain text content - single bordered box
+    if (typeof content === 'string') {
+        return (_jsxs(Box, { flexDirection: "column", paddingX: HORIZONTAL_PADDING, paddingY: 1, borderStyle: "single", borderColor: color, width: CONTENT_WIDTH, children: [_jsx(Text, { color: color, wrap: "wrap", children: title }), _jsx(Text, { color: color, wrap: "wrap", children: content })] }));
+    }
+    // Array content - table with one column, each item in bordered row
+    return (_jsxs(Box, { flexDirection: "column", width: CONTENT_WIDTH, children: [_jsx(Box, { paddingX: HORIZONTAL_PADDING, paddingY: 1, borderStyle: "single", borderColor: color, width: CONTENT_WIDTH, children: _jsx(Text, { color: color, wrap: "wrap", children: title }) }), content.map((section, index) => (_jsx(Box, { paddingX: HORIZONTAL_PADDING, paddingY: 1, borderStyle: "single", borderColor: color, width: CONTENT_WIDTH, marginTop: -1, children: _jsx(Text, { color: color, wrap: "wrap", children: section }) }, index)))] }));
+};

package/dist/components/views/Execute.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { getTextColor, Palette } from '../../services/colors.js';
+import { ExecutionStatus } from '../../services/shell.js';
+import { Spinner } from './Spinner.js';
+import { TaskView } from './Task.js';
+import { Upcoming } from './Upcoming.js';
+/**
+ * Check if a task is finished (success, failed, or aborted)
+ */
+function isTaskFinished(task) {
+    return (task.status === ExecutionStatus.Success ||
+        task.status === ExecutionStatus.Failed ||
+        task.status === ExecutionStatus.Aborted);
+}
+/**
+ * Determine the upcoming status based on task states
+ */
+function getUpcomingStatus(tasks) {
+    const hasFailed = tasks.some((task) => task.status === ExecutionStatus.Failed);
+    const hasCancelled = tasks.some((task) => task.status === ExecutionStatus.Aborted ||
+        task.status === ExecutionStatus.Cancelled);
+    if (hasFailed)
+        return ExecutionStatus.Failed;
+    if (hasCancelled)
+        return ExecutionStatus.Aborted;
+    return ExecutionStatus.Pending;
+}
+/**
+ * Convert ExecuteState to view props for timeline rendering
+ */
+export function mapStateToViewProps(state, isActive, upcoming, label) {
+    return {
+        isLoading: false,
+        isExecuting: false,
+        isActive,
+        error: state.error,
+        message: state.message,
+        tasks: state.tasks,
+        completionMessage: state.completionMessage,
+        showTasks: state.tasks.length > 0,
+        upcoming,
+        label,
+    };
+}
+/**
+ * Execute view: Pure display component for task execution progress
+ */
+export const ExecuteView = ({ isLoading, isExecuting, isActive, error, message, tasks, completionMessage, showTasks, upcoming, label, }) => {
+    // Return null only when loading completes with no commands
+    if (!isActive && tasks.length === 0 && !error) {
+        return null;
+    }
+    // Determine upcoming status based on task states
+    const upcomingStatus = getUpcomingStatus(tasks);
+    const isTerminated = upcomingStatus !== ExecutionStatus.Pending;
+    // Show upcoming during active execution or when terminated (to show skipped tasks)
+    const showUpcoming = upcoming && upcoming.length > 0 && (isActive || isTerminated);
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [label && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: getTextColor(isActive), children: label }) })), _jsxs(Box, { marginLeft: label ? 2 : 0, children: [_jsx(Text, { color: Palette.Gray, children: "Preparing commands. " }), _jsx(Spinner, {})] })] })), (isExecuting || showTasks) && (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [message && (_jsxs(Box, { marginBottom: 1, gap: 1, children: [_jsx(Text, { color: getTextColor(isActive), children: message }), isExecuting && _jsx(Spinner, {})] })), tasks.map((task, index) => (_jsx(Box, { marginBottom: index < tasks.length - 1 ? 1 : 0, children: _jsx(TaskView, { label: task.label, command: task.command, status: task.status, elapsed: task.elapsed, output: task.output, isFinished: isTaskFinished(task), isActive: isActive }) }, index)))] })), showUpcoming && (_jsx(Box, { marginTop: 1, children: _jsx(Upcoming, { items: upcoming, status: upcomingStatus }) })), completionMessage && !isActive && (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsx(Text, { color: getTextColor(false), children: completionMessage }) })), error && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { children: error }) }))] }));
+};

package/dist/components/views/Feedback.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { ComponentStatus } from '../../types/components.js';
+import { getFeedbackColor } from '../../services/colors.js';
+export function Feedback({ type, message }) {
+    const color = getFeedbackColor(type, ComponentStatus.Done);
+    return (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: color, children: message }) }));
+}

package/dist/components/views/Introspect.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { ComponentStatus } from '../../types/components.js';
+import { Colors, getTextColor } from '../../services/colors.js';
+import { Spinner } from './Spinner.js';
+/**
+ * Introspect view: Displays capabilities list
+ */
+export const IntrospectView = ({ status, hasCapabilities, error, children, }) => {
+    const isActive = status === ComponentStatus.Active;
+    const isLoading = isActive && !hasCapabilities && !error;
+    // Don't render wrapper when done and nothing to show
+    if (!isActive && !error && !children) {
+        return null;
+    }
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(Box, { marginLeft: 1, children: [_jsx(Text, { color: getTextColor(isActive), children: "Listing capabilities. " }), _jsx(Spinner, {})] })), error && (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) })), children] }));
+};

package/dist/{ui → components/views}/Label.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { getTaskColors, getTaskTypeLabel } from '../services/colors.js';
-import { DebugLevel } from '../configuration/types.js';
+import { getTaskColors, getTaskTypeLabel } from '../../services/colors.js';
+import { DebugLevel } from '../../configuration/types.js';
 import { Separator } from './Separator.js';
-import { ComponentStatus } from '../types/components.js';
+import { ComponentStatus } from '../../types/components.js';
 export function Label({ description, taskType, showType = false, status = ComponentStatus.Done, debug = DebugLevel.None, }) {
     const colors = getTaskColors(taskType, status);
     return (_jsxs(Box, { children: [_jsx(Text, { color: colors.description, children: description }), showType && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(Text, { color: colors.type, children: getTaskTypeLabel(taskType, debug) })] }))] }));

package/dist/{ui → components/views}/List.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { Palette } from '../services/colors.js';
+import { Palette } from '../../services/colors.js';
 import { Separator } from './Separator.js';
 export const List = ({ items, level = 0, highlightedIndex = null, highlightedParentIndex = null, showType = false, compact = false, }) => {
     const marginLeft = level > 0 ? 2 : 0;

package/dist/{ui → components/views}/Output.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { Palette } from '../services/colors.js';
-import { ExecutionStatus } from '../services/shell.js';
+import { Palette } from '../../services/colors.js';
+import { ExecutionStatus } from '../../services/shell.js';
 const MAX_LINES = 8;
 const MAX_WIDTH = 75;
 const SHORT_OUTPUT_THRESHOLD = 4;

package/dist/components/views/Refinement.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from 'ink';
+import { ComponentStatus } from '../../types/components.js';
+import { Message } from './Message.js';
+import { Spinner } from './Spinner.js';
+export const RefinementView = ({ text, status }) => {
+    const isActive = status === ComponentStatus.Active;
+    return (_jsxs(Box, { gap: 1, children: [_jsx(Message, { text: text, status: status }), isActive && _jsx(Spinner, {})] }));
+};

package/dist/{ui → components/views}/Report.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { Colors, getOriginColor } from '../services/colors.js';
+import { Colors, getOriginColor } from '../../services/colors.js';
 function CapabilityItem({ name, description, origin, isIncomplete, }) {
     const color = getOriginColor(origin);
     return (_jsxs(Box, { children: [_jsx(Text, { children: "- " }), _jsx(Text, { color: color, children: name }), _jsxs(Text, { children: [" - ", description] }), isIncomplete && _jsx(Text, { color: Colors.Status.Warning, children: " (incomplete)" })] }));

package/dist/components/views/Schedule.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from 'ink';
+import { ComponentStatus } from '../../types/components.js';
+import { TaskType, } from '../../types/types.js';
+import { DebugLevel } from '../../configuration/types.js';
+import { getTaskColors, getTaskTypeLabel, Palette, } from '../../services/colors.js';
+import { Label } from './Label.js';
+import { List } from './List.js';
+export function taskToListItem(task, highlightedChildIndex = null, isDefineTaskWithoutSelection = false, status = ComponentStatus.Done, debug = DebugLevel.None) {
+    const taskColors = getTaskColors(task.type, status);
+    // Determine description color based on status
+    let descriptionColor = taskColors.description;
+    if (status === ComponentStatus.Pending) {
+        descriptionColor = Palette.SoftWhite;
+    }
+    const item = {
+        description: {
+            text: task.action,
+            color: descriptionColor,
+        },
+        type: { text: getTaskTypeLabel(task.type, debug), color: taskColors.type },
+        children: [],
+    };
+    // Mark define tasks with right arrow when no selection has been made
+    if (isDefineTaskWithoutSelection) {
+        item.marker = '  → ';
+        item.markerColor = getTaskColors(TaskType.Schedule, status).type;
+    }
+    // Add children for Define tasks with options
+    if (task.type === TaskType.Define && Array.isArray(task.params?.options)) {
+        const options = task.params.options;
+        item.children = 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 = getTaskColors(childType, status);
+            const planColors = getTaskColors(TaskType.Schedule, status);
+            return {
+                description: {
+                    text: option.name,
+                    color: colors.description,
+                    highlightedColor: planColors.description,
+                },
+                type: {
+                    text: getTaskTypeLabel(childType, debug),
+                    color: colors.type,
+                    highlightedColor: planColors.type,
+                },
+            };
+        });
+    }
+    // Add children for Group tasks with subtasks
+    const scheduledTask = task;
+    if (task.type === TaskType.Group &&
+        scheduledTask.subtasks &&
+        Array.isArray(scheduledTask.subtasks) &&
+        scheduledTask.subtasks.length > 0) {
+        item.children = scheduledTask.subtasks.map((subtask) => {
+            const subtaskColors = getTaskColors(subtask.type, status);
+            return {
+                description: {
+                    text: subtask.action,
+                    color: Palette.AshGray,
+                },
+                type: {
+                    text: getTaskTypeLabel(subtask.type, debug),
+                    color: subtaskColors.type,
+                },
+            };
+        });
+    }
+    return item;
+}
+/**
+ * Schedule view: Displays task list with navigation
+ */
+export const ScheduleView = ({ status, message, tasks, highlightedIndex, currentDefineGroupIndex, completedSelections, debug = DebugLevel.None, }) => {
+    const isActive = status === ComponentStatus.Active;
+    // Use compact mode when all tasks are Config type
+    const isCompact = tasks.every((task) => task.type === TaskType.Config);
+    // 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 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 not active
+                if (!isActive) {
+                    // If not active, 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 and is active
+        const isDefineWithoutSelection = isDefineTask &&
+            defineGroupIndex === currentDefineGroupIndex &&
+            highlightedIndex === null &&
+            isActive;
+        return taskToListItem(task, childIndex, isDefineWithoutSelection, status, debug);
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [message && (_jsx(Box, { marginBottom: 1, marginLeft: 1, children: _jsx(Label, { description: message, taskType: TaskType.Schedule, showType: debug !== DebugLevel.None, status: status, debug: debug }) })), _jsx(Box, { marginLeft: 1, children: _jsx(List, { items: listItems, highlightedIndex: currentDefineTaskIndex >= 0 ? highlightedIndex : null, highlightedParentIndex: currentDefineTaskIndex, showType: debug !== DebugLevel.None, compact: isCompact }) })] }));
+};

package/dist/{ui → components/views}/Separator.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from 'ink';
-import { Colors } from '../services/colors.js';
+import { Colors } from '../../services/colors.js';
 export const Separator = ({ color = Colors.Label.Discarded, spaces = 1, }) => {
     const spacing = ' '.repeat(spaces);
     return (_jsxs(Text, { color: color, children: [spacing, "\u203A", spacing] }));

package/dist/{ui → components/views}/Spinner.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Text } from 'ink';
-import { Palette } from '../services/colors.js';
+import { Palette } from '../../services/colors.js';
 const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 const INTERVAL = 80;
 const CYCLE = FRAMES.length * INTERVAL;

package/dist/{ui → components/views}/Subtask.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { getStatusColors, Palette, STATUS_ICONS } from '../services/colors.js';
-import { ExecutionStatus } from '../services/shell.js';
-import { formatDuration } from '../services/utils.js';
+import { getStatusColors, Palette, STATUS_ICONS, } from '../../services/colors.js';
+import { ExecutionStatus } from '../../services/shell.js';
+import { formatDuration } from '../../services/utils.js';
 import { Spinner } from './Spinner.js';
 /**
  * Pure display component for a single subtask.
@@ -12,11 +12,11 @@ export function SubtaskView({ label, command, status, elapsed, }) {
     const colors = getStatusColors(status);
     const isCancelled = status === ExecutionStatus.Cancelled;
     const isAborted = status === ExecutionStatus.Aborted;
-    const shouldStrikethrough = isCancelled || isAborted;
     const isFinished = status === ExecutionStatus.Success ||
         status === ExecutionStatus.Failed ||
         status === ExecutionStatus.Aborted;
     // Apply strikethrough for cancelled and aborted tasks
+    const shouldStrikethrough = isCancelled || isAborted;
     const formatText = (text) => shouldStrikethrough ? text.split('').join('\u0336') + '\u0336' : text;
     return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: colors.icon, children: STATUS_ICONS[status] }), _jsx(Text, { color: colors.description, children: shouldStrikethrough
                             ? formatText(label || command.description)

package/dist/components/views/Table.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+const DEFAULT_WIDTH = 80;
+const DEFAULT_PADDING = 1;
+export const Cell = ({ children, padding = DEFAULT_PADDING }) => (_jsx(Box, { paddingX: padding, children: _jsx(Text, { wrap: "wrap", children: children }) }));
+export const Column = ({ children, width }) => (_jsx(Box, { flexDirection: "column", width: width, children: children }));
+const Row = ({ children, color, innerWidth }) => (_jsxs(Box, { children: [_jsx(Text, { color: color, children: '│' }), _jsx(Box, { width: innerWidth, children: children }), _jsx(Text, { color: color, children: '│' })] }));
+export const Table = ({ data, width = DEFAULT_WIDTH, color }) => {
+    const innerWidth = width - 2;
+    const TOP = '┌' + '─'.repeat(innerWidth) + '┐';
+    const DIV = '├' + '─'.repeat(innerWidth) + '┤';
+    const BOT = '└' + '─'.repeat(innerWidth) + '┘';
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: color, children: TOP }), data.map((content, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Text, { color: color, children: DIV }), _jsx(Row, { color: color, innerWidth: innerWidth, children: _jsx(Cell, { children: content }) })] }, index))), _jsx(Text, { color: color, children: BOT })] }));
+};

package/dist/components/views/Task.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from 'ink';
+import { loadDebugSetting } from '../../configuration/io.js';
+import { DebugLevel } from '../../configuration/types.js';
+import { Output } from './Output.js';
+import { SubtaskView } from './Subtask.js';
+/**
+ * Pure display component for a task.
+ * Combines SubtaskView (label/command/status) with Output (stdout/stderr).
+ * Output is shown during active execution, or in timeline only with debug mode.
+ */
+export function TaskView({ label, command, status, elapsed, output, isFinished, isActive = false, }) {
+    const stdout = output?.stdout ?? '';
+    const stderr = output?.stderr ?? '';
+    // Show output during active execution, or in timeline only with debug enabled
+    const showOutput = isActive || loadDebugSetting() !== DebugLevel.None;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(SubtaskView, { label: label, command: command, status: status, elapsed: elapsed }), showOutput && (_jsx(Output, { stdout: stdout, stderr: stderr, isFinished: isFinished, status: status }, `${stdout.length}-${stderr.length}`))] }));
+}

package/dist/components/views/Upcoming.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { Palette } from '../../services/colors.js';
+import { ExecutionStatus } from '../../services/shell.js';
+/**
+ * Branching symbols for tree-like display
+ */
+const BRANCH_MIDDLE = '├─';
+const BRANCH_LAST = '└─';
+/**
+ * Labels for each status
+ */
+const STATUS_LABELS = {
+    [ExecutionStatus.Pending]: 'Next:',
+    [ExecutionStatus.Failed]: 'Skipped:',
+    [ExecutionStatus.Aborted]: 'Cancelled:',
+};
+/**
+ * Upcoming: Displays upcoming tasks in a tree-like structure
+ */
+export const Upcoming = ({ items, status = ExecutionStatus.Pending, }) => {
+    if (items.length === 0)
+        return null;
+    const strikethrough = status !== ExecutionStatus.Pending;
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsx(Text, { color: Palette.Gray, children: STATUS_LABELS[status] }), items.map((name, index) => {
+                const isLast = index === items.length - 1;
+                const symbol = isLast ? BRANCH_LAST : BRANCH_MIDDLE;
+                return (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: Palette.DarkGray, strikethrough: strikethrough, children: [symbol, " ", name] }) }, index));
+            })] }));
+};

package/dist/{ui → components/views}/UserQuery.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { Colors } from '../services/colors.js';
+import { Colors } from '../../services/colors.js';
 export function UserQuery({ children }) {
     return (_jsx(Box, { paddingX: 1, alignSelf: "flex-start", backgroundColor: Colors.Background.UserQuery, children: _jsx(Text, { color: Colors.Text.UserQuery, children: children }) }));
 }

package/dist/components/views/Validate.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { ComponentStatus } from '../../types/components.js';
+import { Colors, getTextColor } from '../../services/colors.js';
+import { Spinner } from './Spinner.js';
+/**
+ * Validate view: Displays validation and config prompt
+ */
+export const ValidateView = ({ status, completionMessage, error, }) => {
+    const isActive = status === ComponentStatus.Active;
+    const isLoading = isActive && !completionMessage && !error;
+    // Don't render when not active and nothing to show
+    if (!isActive && !completionMessage && !error) {
+        return null;
+    }
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_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] }) }))] }));
+};

package/dist/{ui → components/views}/Welcome.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { Palette } from '../services/colors.js';
+import { Palette } from '../../services/colors.js';
 import { Panel } from './Panel.js';
 export function Welcome({ app }) {
     return (_jsx(Box, { alignSelf: "flex-start", children: _jsxs(Panel, { children: [_jsx(Header, { app: app }), _jsx(Description, { description: app.description }), _jsx(Usage, {})] }) }));

package/dist/configuration/steps.js

@@ -4,7 +4,7 @@ import { getConfigPath, loadConfig } from './io.js';
 import { getConfigSchema } from './schema.js';
 import { getConfigLabel } from './labels.js';
 import { defaultFileSystem } from '../services/filesystem.js';
-import { StepType } from '../ui/Config.js';
+import { StepType } from '../components/controllers/Config.js';
 export function createConfigSteps() {
     // Use schema-based config step generation for required Anthropic settings
     return createConfigStepsFromSchema(['anthropic.key', 'anthropic.model']);