prompt-language-shell 0.7.6 → 0.8.0

package/dist/ui/Execute.js

@@ -1,168 +1,72 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
-import { ComponentStatus } from '../types/components.js';
-import { Colors, getTextColor, Palette } from '../services/colors.js';
+import { ComponentStatus, } from '../types/components.js';
+import { Colors, getTextColor } from '../services/colors.js';
+import { addDebugToTimeline } from '../services/components.js';
 import { useInput } from '../services/keyboard.js';
+import { loadUserConfig } from '../services/loader.js';
 import { formatErrorMessage } from '../services/messages.js';
-import { formatDuration } from '../services/utils.js';
-import { ExecutionStatus, executeCommands, } from '../services/shell.js';
 import { replacePlaceholders } from '../services/resolver.js';
-import { loadUserConfig } from '../services/loader.js';
+import { ExecutionStatus } from '../services/shell.js';
 import { ensureMinimumTime } from '../services/timing.js';
+import { formatDuration } from '../services/utils.js';
 import { Spinner } from './Spinner.js';
+import { Task } from './Task.js';
 const MINIMUM_PROCESSING_TIME = 400;
-const STATUS_ICONS = {
-    [ExecutionStatus.Pending]: '- ',
-    [ExecutionStatus.Running]: '• ',
-    [ExecutionStatus.Success]: '✓ ',
-    [ExecutionStatus.Failed]: '✗ ',
-    [ExecutionStatus.Aborted]: '⊘ ',
-};
-function calculateTotalElapsed(commandStatuses) {
-    return commandStatuses.reduce((sum, cmd) => {
-        if (cmd.elapsed !== undefined) {
-            return sum + cmd.elapsed;
-        }
-        if (cmd.startTime) {
-            const elapsed = cmd.endTime
-                ? cmd.endTime - cmd.startTime
-                : Date.now() - cmd.startTime;
-            return sum + elapsed;
-        }
-        return sum;
-    }, 0);
-}
-function getStatusColors(status) {
-    switch (status) {
-        case ExecutionStatus.Pending:
-            return {
-                icon: Palette.Gray,
-                description: Palette.Gray,
-                command: Palette.DarkGray,
-                symbol: Palette.DarkGray,
-            };
-        case ExecutionStatus.Running:
-            return {
-                icon: Palette.Gray,
-                description: getTextColor(true),
-                command: Palette.LightGreen,
-                symbol: Palette.AshGray,
-            };
-        case ExecutionStatus.Success:
-            return {
-                icon: Colors.Status.Success,
-                description: getTextColor(true),
-                command: Palette.Gray,
-                symbol: Palette.Gray,
-            };
-        case ExecutionStatus.Failed:
-            return {
-                icon: Colors.Status.Error,
-                description: Colors.Status.Error,
-                command: Colors.Status.Error,
-                symbol: Palette.Gray,
-            };
-        case ExecutionStatus.Aborted:
-            return {
-                icon: Palette.DarkOrange,
-                description: getTextColor(true),
-                command: Palette.DarkOrange,
-                symbol: Palette.Gray,
-            };
-    }
-}
-function CommandStatusDisplay({ item, elapsed }) {
-    const colors = getStatusColors(item.status);
-    const getElapsedTime = () => {
-        if (item.status === ExecutionStatus.Running && elapsed !== undefined) {
-            return elapsed;
-        }
-        else if (item.startTime && item.endTime) {
-            return item.endTime - item.startTime;
-        }
-        return undefined;
-    };
-    const elapsedTime = getElapsedTime();
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: colors.icon, children: STATUS_ICONS[item.status] }), _jsx(Text, { color: colors.description, children: item.label || item.command.description }), elapsedTime !== undefined && (_jsxs(Text, { color: Palette.DarkGray, children: [" (", formatDuration(elapsedTime), ")"] }))] }), _jsxs(Box, { paddingLeft: 5, children: [_jsx(Text, { color: colors.symbol, children: "\u221F " }), _jsx(Text, { color: colors.command, children: item.command.command }), item.status === ExecutionStatus.Running && (_jsxs(Text, { children: [' ', _jsx(Spinner, {})] }))] })] }));
-}
 export function Execute({ tasks, state, status, service, handlers, }) {
     const isActive = status === ComponentStatus.Active;
-    // isActive passed as prop
     const [error, setError] = useState(state?.error ?? null);
-    const [isExecuting, setIsExecuting] = useState(false);
-    const [commandStatuses, setCommandStatuses] = useState(state?.commandStatuses ?? []);
+    const [taskInfos, setTaskInfos] = useState(state?.taskInfos ?? []);
     const [message, setMessage] = useState(state?.message ?? '');
-    const [currentElapsed, setCurrentElapsed] = useState(0);
-    const [runningIndex, setRunningIndex] = useState(null);
-    const [outputs, setOutputs] = useState([]);
+    const [completed, setCompleted] = useState(state?.completed ?? 0);
     const [hasProcessed, setHasProcessed] = useState(false);
+    const [taskExecutionTimes, setTaskExecutionTimes] = useState(state?.taskExecutionTimes ?? []);
+    const [completionMessage, setCompletionMessage] = useState(state?.completionMessage ?? null);
+    const [summary, setSummary] = useState(state?.summary ?? '');
     // Derive loading state from current conditions
-    const isLoading = isActive &&
-        commandStatuses.length === 0 &&
-        !error &&
-        !isExecuting &&
-        !hasProcessed;
+    const isLoading = isActive && taskInfos.length === 0 && !error && !hasProcessed;
+    const isExecuting = completed < taskInfos.length;
+    // Handle cancel with useCallback to ensure we capture latest state
+    const handleCancel = useCallback(() => {
+        // Mark tasks based on their status relative to completed:
+        // - Before completed: finished (Success)
+        // - At completed: interrupted (Aborted)
+        // - After completed: never started (Cancelled)
+        const updatedTaskInfos = taskInfos.map((task, taskIndex) => {
+            if (taskIndex < completed) {
+                // Tasks that completed before interruption
+                return { ...task, status: ExecutionStatus.Success };
+            }
+            else if (taskIndex === completed) {
+                // Task that was running when interrupted
+                return { ...task, status: ExecutionStatus.Aborted };
+            }
+            else {
+                // Tasks that haven't started yet
+                return { ...task, status: ExecutionStatus.Cancelled };
+            }
+        });
+        setTaskInfos(updatedTaskInfos);
+        handlers?.updateState({
+            message,
+            summary,
+            taskInfos: updatedTaskInfos,
+            completed,
+            taskExecutionTimes,
+            completionMessage: null,
+            error: null,
+        });
+        handlers?.onAborted('execution');
+    }, [message, summary, taskInfos, completed, taskExecutionTimes, handlers]);
     useInput((_, key) => {
         if (key.escape && (isLoading || isExecuting) && isActive) {
-            setIsExecuting(false);
-            setRunningIndex(null);
-            // Mark any running command as aborted when cancelled
-            const now = Date.now();
-            setCommandStatuses((prev) => {
-                const updated = prev.map((item) => {
-                    if (item.status === ExecutionStatus.Running) {
-                        const elapsed = item.startTime
-                            ? Math.floor((now - item.startTime) / 1000) * 1000
-                            : undefined;
-                        return {
-                            ...item,
-                            status: ExecutionStatus.Aborted,
-                            endTime: now,
-                            elapsed,
-                        };
-                    }
-                    return item;
-                });
-                // Save state after updating
-                handlers?.updateState({
-                    commandStatuses: updated,
-                    message,
-                });
-                return updated;
-            });
-            handlers?.onAborted('execution');
+            handleCancel();
         }
     }, { isActive: (isLoading || isExecuting) && isActive });
-    // Update elapsed time for running command
+    // Process tasks to get commands from AI
     useEffect(() => {
-        if (runningIndex === null)
-            return;
-        const item = commandStatuses[runningIndex];
-        if (!item?.startTime)
-            return;
-        const interval = setInterval(() => {
-            setCurrentElapsed((prev) => {
-                const next = Date.now() - item.startTime;
-                return next !== prev ? next : prev;
-            });
-        }, 1000);
-        return () => clearInterval(interval);
-    }, [runningIndex, commandStatuses]);
-    // Handle completion callback when execution finishes
-    useEffect(() => {
-        if (isExecuting || commandStatuses.length === 0 || !outputs.length)
-            return;
-        // Save state before completing
-        handlers?.updateState({
-            message,
-            commandStatuses,
-            error,
-        });
-        handlers?.completeActive();
-    }, [isExecuting, commandStatuses, outputs, handlers, message, error]);
-    useEffect(() => {
-        if (!isActive) {
+        if (!isActive || taskInfos.length > 0 || hasProcessed) {
             return;
         }
         if (!service) {
@@ -178,7 +82,6 @@ export function Execute({ tasks, state, status, service, handlers, }) {
                 // Format tasks for the execute tool and resolve placeholders
                 const taskDescriptions = tasks
                     .map((task) => {
-                    // Resolve placeholders in task action
                     const resolvedAction = replacePlaceholders(task.action, userConfig);
                     const params = task.params
                         ? ` (params: ${JSON.stringify(task.params)})`
@@ -191,79 +94,62 @@ export function Execute({ tasks, state, status, service, handlers, }) {
                 await ensureMinimumTime(startTime, MINIMUM_PROCESSING_TIME);
                 if (!mounted)
                     return;
+                // Add debug components to timeline if present
+                addDebugToTimeline(result.debug, handlers);
                 if (!result.commands || result.commands.length === 0) {
-                    setOutputs([]);
                     setHasProcessed(true);
-                    // Save state before completing
                     handlers?.updateState({
                         message: result.message,
-                        commandStatuses: [],
+                        summary: '',
+                        taskInfos: [],
+                        completed: 0,
+                        taskExecutionTimes: [],
+                        completionMessage: null,
+                        error: null,
                     });
                     handlers?.completeActive();
                     return;
                 }
-                // Resolve placeholders in command strings before execution
+                // Resolve placeholders in command strings
                 const resolvedCommands = result.commands.map((cmd) => ({
                     ...cmd,
                     command: replacePlaceholders(cmd.command, userConfig),
                 }));
-                // Set message and initialize command statuses
-                setMessage(result.message);
-                setCommandStatuses(resolvedCommands.map((cmd, index) => ({
-                    command: cmd,
-                    status: ExecutionStatus.Pending,
+                // Set message, summary, and create task infos
+                const newMessage = result.message;
+                const newSummary = result.summary || '';
+                const infos = resolvedCommands.map((cmd, index) => ({
                     label: tasks[index]?.action,
-                })));
-                setIsExecuting(true);
-                // Execute commands sequentially
-                const outputs = await executeCommands(resolvedCommands, (progress) => {
-                    if (!mounted)
-                        return;
-                    const now = Date.now();
-                    setCommandStatuses((prev) => prev.map((item, idx) => {
-                        if (idx === progress.currentIndex) {
-                            const isStarting = progress.status === ExecutionStatus.Running &&
-                                !item.startTime;
-                            const isEnding = progress.status !== ExecutionStatus.Running &&
-                                progress.status !== ExecutionStatus.Pending;
-                            const endTime = isEnding ? now : item.endTime;
-                            const elapsed = isEnding && item.startTime
-                                ? Math.floor((now - item.startTime) / 1000) * 1000
-                                : item.elapsed;
-                            return {
-                                ...item,
-                                status: progress.status,
-                                output: progress.output,
-                                startTime: isStarting ? now : item.startTime,
-                                endTime,
-                                elapsed,
-                            };
-                        }
-                        return item;
-                    }));
-                    if (progress.status === ExecutionStatus.Running) {
-                        setRunningIndex((prev) => prev !== progress.currentIndex ? progress.currentIndex : prev);
-                        setCurrentElapsed((prev) => (prev !== 0 ? 0 : prev));
-                    }
-                    else if (progress.status === ExecutionStatus.Success ||
-                        progress.status === ExecutionStatus.Failed) {
-                        setRunningIndex((prev) => (prev !== null ? null : prev));
-                    }
+                    command: cmd,
+                }));
+                setMessage(newMessage);
+                setSummary(newSummary);
+                setTaskInfos(infos);
+                setCompleted(0); // Start with first task
+                // Update state after AI processing
+                handlers?.updateState({
+                    message: newMessage,
+                    summary: newSummary,
+                    taskInfos: infos,
+                    completed: 0,
+                    taskExecutionTimes: [],
+                    completionMessage: null,
+                    error: null,
                 });
-                if (mounted) {
-                    setOutputs(outputs);
-                    setIsExecuting(false);
-                }
             }
             catch (err) {
                 await ensureMinimumTime(startTime, MINIMUM_PROCESSING_TIME);
                 if (mounted) {
                     const errorMessage = formatErrorMessage(err);
-                    setIsExecuting(false);
                     setError(errorMessage);
                     setHasProcessed(true);
-                    // Save error state
                     handlers?.updateState({
+                        message: '',
+                        summary: '',
+                        taskInfos: [],
+                        completed: 0,
+                        taskExecutionTimes: [],
+                        completionMessage: null,
                         error: errorMessage,
                     });
                     handlers?.onError(errorMessage);
@@ -274,12 +160,122 @@ export function Execute({ tasks, state, status, service, handlers, }) {
         return () => {
             mounted = false;
         };
-    }, [tasks, isActive, service, handlers]);
+    }, [tasks, isActive, service, handlers, taskInfos.length, hasProcessed]);
+    // Handle task completion - move to next task
+    const handleTaskComplete = useCallback((index, _output, elapsed) => {
+        const updatedTimes = [...taskExecutionTimes, elapsed];
+        setTaskExecutionTimes(updatedTimes);
+        // Update task with elapsed time and success status
+        const updatedTaskInfos = taskInfos.map((task, i) => i === index
+            ? { ...task, status: ExecutionStatus.Success, elapsed }
+            : task);
+        setTaskInfos(updatedTaskInfos);
+        if (index < taskInfos.length - 1) {
+            // More tasks to execute
+            setCompleted(index + 1);
+            handlers?.updateState({
+                message,
+                summary,
+                taskInfos: updatedTaskInfos,
+                completed: index + 1,
+                taskExecutionTimes: updatedTimes,
+                completionMessage: null,
+                error: null,
+            });
+        }
+        else {
+            // All tasks complete
+            const totalElapsed = updatedTimes.reduce((sum, time) => sum + time, 0);
+            const summaryText = summary?.trim() || 'Execution completed';
+            const completion = `${summaryText} in ${formatDuration(totalElapsed)}.`;
+            setCompletionMessage(completion);
+            handlers?.updateState({
+                message,
+                summary,
+                taskInfos: updatedTaskInfos,
+                completed: index + 1,
+                taskExecutionTimes: updatedTimes,
+                completionMessage: completion,
+                error: null,
+            });
+            handlers?.completeActive();
+        }
+    }, [taskInfos, message, handlers, taskExecutionTimes, summary]);
+    const handleTaskError = useCallback((index, error, elapsed) => {
+        const task = taskInfos[index];
+        const isCritical = task?.command.critical !== false; // Default to true
+        // Update task with elapsed time and failed status
+        const updatedTaskInfos = taskInfos.map((task, i) => i === index
+            ? { ...task, status: ExecutionStatus.Failed, elapsed }
+            : task);
+        setTaskInfos(updatedTaskInfos);
+        if (isCritical) {
+            // Critical failure - stop execution
+            setError(error);
+            handlers?.updateState({
+                message,
+                summary,
+                taskInfos: updatedTaskInfos,
+                completed: index + 1,
+                taskExecutionTimes,
+                completionMessage: null,
+                error,
+            });
+            handlers?.onError(error);
+        }
+        else {
+            // Non-critical failure - continue to next task
+            const updatedTimes = [...taskExecutionTimes, elapsed];
+            setTaskExecutionTimes(updatedTimes);
+            if (index < taskInfos.length - 1) {
+                setCompleted(index + 1);
+                handlers?.updateState({
+                    message,
+                    summary,
+                    taskInfos: updatedTaskInfos,
+                    completed: index + 1,
+                    taskExecutionTimes: updatedTimes,
+                    completionMessage: null,
+                    error: null,
+                });
+            }
+            else {
+                // Last task, complete execution
+                const totalElapsed = updatedTimes.reduce((sum, time) => sum + time, 0);
+                const summaryText = summary?.trim() || 'Execution completed';
+                const completion = `${summaryText} in ${formatDuration(totalElapsed)}.`;
+                setCompletionMessage(completion);
+                handlers?.updateState({
+                    message,
+                    summary,
+                    taskInfos: updatedTaskInfos,
+                    completed: index + 1,
+                    taskExecutionTimes: updatedTimes,
+                    completionMessage: completion,
+                    error: null,
+                });
+                handlers?.completeActive();
+            }
+        }
+    }, [taskInfos, message, handlers, taskExecutionTimes, summary]);
+    const handleTaskAbort = useCallback((_index) => {
+        // Task was aborted - execution already stopped by Escape handler
+        // Just update state, don't call onAborted (already called at Execute level)
+        handlers?.updateState({
+            message,
+            summary,
+            taskInfos,
+            completed,
+            taskExecutionTimes,
+            completionMessage: null,
+            error: null,
+        });
+    }, [taskInfos, message, summary, completed, taskExecutionTimes, handlers]);
     // Return null only when loading completes with no commands
-    if (!isActive && commandStatuses.length === 0 && !error) {
+    if (!isActive && taskInfos.length === 0 && !error) {
         return null;
     }
     // Show completed steps when not active
-    const showCompletedSteps = !isActive && commandStatuses.length > 0;
-    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(Box, { marginLeft: 1, children: [_jsx(Text, { color: getTextColor(isActive), children: "Preparing commands. " }), _jsx(Spinner, {})] })), (isExecuting || showCompletedSteps) && (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [message && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: getTextColor(isActive), children: message }), isExecuting && (_jsxs(Text, { children: [' ', _jsx(Spinner, {})] }))] })), commandStatuses.map((item, index) => (_jsx(Box, { marginBottom: index < commandStatuses.length - 1 ? 1 : 0, children: _jsx(CommandStatusDisplay, { item: item, elapsed: index === runningIndex ? currentElapsed : undefined }) }, index)))] })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) }))] }));
+    const showTasks = !isActive && taskInfos.length > 0;
+    return (_jsxs(Box, { alignSelf: "flex-start", flexDirection: "column", children: [isLoading && (_jsxs(Box, { marginLeft: 1, children: [_jsx(Text, { color: getTextColor(isActive), 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, {})] })), taskInfos.map((taskInfo, index) => (_jsx(Box, { marginBottom: index < taskInfos.length - 1 ? 1 : 0, children: _jsx(Task, { label: taskInfo.label, command: taskInfo.command, isActive: isActive && index === completed, index: index, initialStatus: taskInfo.status, initialElapsed: taskInfo.elapsed, onComplete: handleTaskComplete, onAbort: handleTaskAbort, onError: handleTaskError }) }, index)))] })), completionMessage && !isActive && (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsx(Text, { color: getTextColor(false), children: completionMessage }) })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Status.Error, children: ["Error: ", error] }) }))] }));
 }

package/dist/ui/Feedback.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { getFeedbackColor } from '../services/colors.js';
 import { FeedbackType } from '../types/types.js';
+import { getFeedbackColor } from '../services/colors.js';
 function getSymbol(type) {
     return {
         [FeedbackType.Info]: 'ℹ',

package/dist/ui/Introspect.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import { ComponentStatus, } from '../types/components.js';
 import { Colors, getTextColor } from '../services/colors.js';
-import { createReportDefinition } from '../services/components.js';
+import { addDebugToTimeline, createReportDefinition, } from '../services/components.js';
 import { DebugLevel } from '../services/configuration.js';
 import { useInput } from '../services/keyboard.js';
 import { formatErrorMessage } from '../services/messages.js';
@@ -81,6 +81,8 @@ export function Introspect({ tasks, state, status, service, children, debug = De
                 const result = await svc.processWithTool(introspectAction, 'introspect');
                 await ensureMinimumTime(startTime, MIN_PROCESSING_TIME);
                 if (mounted) {
+                    // Add debug components to timeline if present
+                    addDebugToTimeline(result.debug, handlers);
                     // Parse capabilities from returned tasks
                     let capabilities = result.tasks.map(parseCapabilityFromTask);
                     // Filter out internal capabilities when not in debug mode

package/dist/ui/Label.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { DebugLevel } from '../services/configuration.js';
 import { getTaskColors, getTaskTypeLabel } from '../services/colors.js';
+import { DebugLevel } from '../services/configuration.js';
 import { Separator } from './Separator.js';
 export function Label({ description, taskType, showType = false, isCurrent = false, debug = DebugLevel.None, }) {
     const colors = getTaskColors(taskType, isCurrent);

package/dist/ui/List.js

@@ -1,5 +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 { Separator } from './Separator.js';
 export const List = ({ items, level = 0, highlightedIndex = null, highlightedParentIndex = null, showType = false, }) => {
     const marginLeft = level > 0 ? 2 : 0;
@@ -21,7 +22,7 @@ export const List = ({ items, level = 0, highlightedIndex = null, highlightedPar
             const markerColor = item.markerColor ||
                 (isHighlighted && item.type.highlightedColor
                     ? item.type.highlightedColor
-                    : 'whiteBright');
+                    : Palette.White);
             return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: markerColor, children: marker }), _jsx(Text, { color: descriptionColor, children: item.description.text }), showType && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(Text, { color: typeColor, children: item.type.text })] }))] }), item.children && item.children.length > 0 && (_jsx(List, { items: item.children, level: level + 1, highlightedIndex: shouldHighlightChildren ? highlightedIndex : null, showType: showType }))] }, index));
         }) }));
 };

package/dist/ui/Schedule.js

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { Box } from 'ink';
 import { ComponentStatus } from '../types/components.js';
 import { TaskType } from '../types/types.js';
-import { DebugLevel } from '../services/configuration.js';
 import { getTaskColors, getTaskTypeLabel } from '../services/colors.js';
+import { DebugLevel } from '../services/configuration.js';
 import { useInput } from '../services/keyboard.js';
 import { Label } from './Label.js';
 import { List } from './List.js';

package/dist/ui/Spinner.js

@@ -1,6 +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';
 const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 const INTERVAL = 80;
 const CYCLE = FRAMES.length * INTERVAL;
@@ -18,5 +19,5 @@ export function Spinner() {
         }, INTERVAL);
         return () => clearInterval(timer);
     }, []);
-    return _jsx(Text, { color: "blueBright", children: FRAMES[frame] });
+    return _jsx(Text, { color: Palette.Cyan, children: FRAMES[frame] });
 }

package/dist/ui/Subtask.js

@@ -0,0 +1,22 @@
+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 { Spinner } from './Spinner.js';
+export function Subtask({ label, command, status, isActive, startTime, endTime, 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;
+    const elapsedTime = elapsed ?? (startTime && endTime ? endTime - startTime : undefined);
+    // Apply strikethrough for cancelled and aborted tasks
+    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)
+                            : label || command.description }), (isFinished || status === ExecutionStatus.Running) &&
+                        elapsedTime !== undefined && (_jsxs(Text, { color: Palette.DarkGray, children: ["(", formatDuration(elapsedTime), ")"] }))] }), _jsxs(Box, { paddingLeft: 5, flexDirection: "row", children: [_jsx(Box, { children: _jsx(Text, { color: colors.symbol, children: "\u221F " }) }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { color: colors.command, children: command.command }), status === ExecutionStatus.Running && _jsx(Spinner, {})] })] })] }));
+}

package/dist/ui/Task.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ExecutionStatus, executeCommand, } from '../services/shell.js';
+import { calculateElapsed } from '../services/utils.js';
+import { Subtask } from './Subtask.js';
+export function Task({ label, command, isActive, index, initialStatus, initialElapsed, onComplete, onAbort, onError, }) {
+    const [status, setStatus] = useState(initialStatus ?? ExecutionStatus.Pending);
+    const [startTime, setStartTime] = useState();
+    const [endTime, setEndTime] = useState();
+    const [elapsed, setElapsed] = useState(initialElapsed);
+    const [currentElapsed, setCurrentElapsed] = useState(0);
+    // Update elapsed time while running
+    useEffect(() => {
+        if (status !== ExecutionStatus.Running || !startTime)
+            return;
+        const interval = setInterval(() => {
+            setCurrentElapsed((prev) => {
+                const next = Date.now() - startTime;
+                return next !== prev ? next : prev;
+            });
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [status, startTime]);
+    // Execute command when becoming active
+    useEffect(() => {
+        // Don't execute if task is cancelled or if not active
+        if (!isActive ||
+            status === ExecutionStatus.Cancelled ||
+            status !== ExecutionStatus.Pending) {
+            return;
+        }
+        let mounted = true;
+        async function execute() {
+            const start = Date.now();
+            setStatus(ExecutionStatus.Running);
+            setStartTime(start);
+            setCurrentElapsed(0);
+            try {
+                const output = await executeCommand(command, undefined, index);
+                if (!mounted)
+                    return;
+                const end = Date.now();
+                setEndTime(end);
+                const taskDuration = calculateElapsed(start);
+                setElapsed(taskDuration);
+                setStatus(output.result === 'success'
+                    ? ExecutionStatus.Success
+                    : ExecutionStatus.Failed);
+                if (output.result === 'success') {
+                    onComplete?.(index, output, taskDuration);
+                }
+                else {
+                    onError?.(index, output.errors || 'Command failed', taskDuration);
+                }
+            }
+            catch (err) {
+                if (!mounted)
+                    return;
+                const end = Date.now();
+                setEndTime(end);
+                const errorDuration = calculateElapsed(start);
+                setElapsed(errorDuration);
+                setStatus(ExecutionStatus.Failed);
+                onError?.(index, err instanceof Error ? err.message : 'Unknown error', errorDuration);
+            }
+        }
+        execute();
+        return () => {
+            mounted = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isActive]);
+    // Handle abort when task becomes inactive while running
+    useEffect(() => {
+        if (!isActive && status === ExecutionStatus.Running && startTime) {
+            // Task was aborted mid-execution
+            const end = Date.now();
+            setEndTime(end);
+            setElapsed(calculateElapsed(startTime));
+            setStatus(ExecutionStatus.Aborted);
+            onAbort?.(index);
+        }
+    }, [isActive, status, startTime, index, onAbort]);
+    return (_jsx(Subtask, { label: label, command: command, status: status, isActive: isActive, startTime: startTime, endTime: endTime, elapsed: status === ExecutionStatus.Running ? currentElapsed : elapsed }));
+}