prompt-language-shell 0.7.4 → 0.7.8

package/dist/tools/answer.tool.js

@@ -1,6 +1,6 @@
 export const answerTool = {
     name: 'answer',
-    description: 'Answer questions and provide up-to-date information using web search. Called after PLAN has identified an answer request and user has confirmed. Searches the web for current data and provides concise, helpful responses formatted for terminal display.',
+    description: 'Answer questions and provide up-to-date information using web search. Called after SCHEDULE has identified an answer request and user has confirmed. Searches the web for current data and provides concise, helpful responses formatted for terminal display.',
     input_schema: {
         type: 'object',
         properties: {

package/dist/tools/configure.tool.js

@@ -1,6 +1,6 @@
 export const configureTool = {
     name: 'configure',
-    description: 'Determine which configuration settings to show based on user query. Receives available config keys with descriptions and returns which keys the user wants to configure.',
+    description: 'Determine which configuration settings to show based on user query. Receives available configuration keys with descriptions and returns which keys the user wants to configure.',
     input_schema: {
         type: 'object',
         properties: {

package/dist/tools/execute.tool.js

@@ -1,6 +1,6 @@
 export const executeTool = {
     name: 'execute',
-    description: 'Execute shell commands from planned tasks. Translates task descriptions into specific shell commands that can be run in the terminal. Called after PLAN has created execute tasks and user has confirmed.',
+    description: 'Execute shell commands from scheduled tasks. Translates task descriptions into specific shell commands that can be run in the terminal. Called after SCHEDULE has created execute tasks and user has confirmed.',
     input_schema: {
         type: 'object',
         properties: {
@@ -8,6 +8,10 @@ export const executeTool = {
                 type: 'string',
                 description: 'Brief status message about the execution. Must be a single sentence, maximum 64 characters, ending with a period.',
             },
+            summary: {
+                type: 'string',
+                description: 'Natural language summary as if execution has finished, like a concierge would report. Shown after execution completes with time appended. Use varied expressions and synonyms, not necessarily the same verb as the message. Must be a single sentence without period, maximum 48 characters. MUST NOT be empty. Example: "Project ready to go" (time will be appended as " in X seconds").',
+            },
             commands: {
                 type: 'array',
                 description: 'Array of commands to execute sequentially',
@@ -39,6 +43,6 @@ export const executeTool = {
                 },
             },
         },
-        required: ['message', 'commands'],
+        required: ['message', 'summary', 'commands'],
     },
 };

package/dist/tools/introspect.tool.js

@@ -1,6 +1,6 @@
 export const introspectTool = {
     name: 'introspect',
-    description: 'Execute a task with type "introspect" to list available capabilities and skills. Called after PLAN has identified an introspection request and user has confirmed. Takes the task action and optional filter parameter to present built-in capabilities and user-defined skills.',
+    description: 'Execute a task with type "introspect" to list available capabilities and skills. Called after SCHEDULE has identified an introspection request and user has confirmed. Takes the task action and optional filter parameter to present built-in capabilities and user-defined skills.',
     input_schema: {
         type: 'object',
         properties: {
@@ -10,13 +10,13 @@ export const introspectTool = {
             },
             tasks: {
                 type: 'array',
-                description: 'Array of capabilities, each with type "introspect". Include built-in capabilities (PLAN, INTROSPECT, ANSWER, EXECUTE, REPORT, CONFIG) and user-defined skills from the Available Skills section.',
+                description: 'Array of capabilities, each with type "introspect". Include built-in capabilities (SCHEDULE, INTROSPECT, ANSWER, EXECUTE, REPORT, CONFIGURE) and user-defined skills from the Available Skills section.',
                 items: {
                     type: 'object',
                     properties: {
                         action: {
                             type: 'string',
-                            description: 'Capability name and description. Format: "NAME: Brief description". Maximum 64 characters. Examples: "PLAN: Break down requests into steps", "Deploy App: Build and deploy application".',
+                            description: 'Capability name and description. Format: "NAME: Brief description". Maximum 64 characters. Examples: "SCHEDULE: Break down requests into steps", "Deploy App: Build and deploy application".',
                         },
                         type: {
                             type: 'string',

package/dist/tools/schedule.tool.js

@@ -27,7 +27,7 @@ export const scheduleTool = {
                     },
                     type: {
                         type: 'string',
-                        description: 'Type: "group" for parent tasks with subtasks. For leaf tasks: "config", "execute", "answer", "introspect", "report", "define", "ignore"',
+                        description: 'Type: "group" for parent tasks with subtasks. For leaf tasks: "configure", "execute", "answer", "introspect", "report", "define", "ignore"',
                     },
                     params: {
                         type: 'object',

package/dist/ui/Answer.js

@@ -3,6 +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 { addDebugToTimeline } from '../services/components.js';
 import { useInput } from '../services/keyboard.js';
 import { formatErrorMessage } from '../services/messages.js';
 import { withMinimumTime } from '../services/timing.js';
@@ -33,6 +34,8 @@ export function Answer({ question, state, status, service, handlers, }) {
                 // Call answer tool with minimum processing time for UX polish
                 const result = await withMinimumTime(() => svc.processWithTool(question, 'answer'), MINIMUM_PROCESSING_TIME);
                 if (mounted) {
+                    // Add debug components to timeline if present
+                    addDebugToTimeline(result.debug, handlers);
                     // Extract answer from result
                     const answerText = result.answer || '';
                     setAnswer(answerText);

package/dist/ui/Command.js

@@ -4,7 +4,7 @@ import { Box, Text } from 'ink';
 import { ComponentStatus, } from '../types/components.js';
 import { TaskType } from '../types/types.js';
 import { Colors } from '../services/colors.js';
-import { createScheduleDefinition } from '../services/components.js';
+import { addDebugToTimeline, createScheduleDefinition, } from '../services/components.js';
 import { formatErrorMessage } from '../services/messages.js';
 import { useInput } from '../services/keyboard.js';
 import { handleRefinement } from '../services/refinement.js';
@@ -53,12 +53,10 @@ export function Command({ command, state, status, service, handlers, onAborted,
                     // Add debug components to timeline if present
                     // If we delegated to configure, include both schedule and configure debug
                     // If not, only include schedule debug (result.debug is same as scheduleDebug)
-                    const allDebug = allConfig
+                    const debugComponents = allConfig
                         ? [...scheduleDebug, ...(result.debug || [])]
                         : scheduleDebug;
-                    if (allDebug.length > 0) {
-                        handlers?.addToTimeline(...allDebug);
-                    }
+                    addDebugToTimeline(debugComponents, handlers);
                     // Save result to state for timeline display
                     handlers?.updateState({
                         message: result.message,

package/dist/ui/Execute.js

@@ -1,168 +1,41 @@
 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 { Colors, getTextColor } from '../services/colors.js';
+import { addDebugToTimeline } from '../services/components.js';
 import { useInput } from '../services/keyboard.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 { 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 [activeTaskIndex, setActiveTaskIndex] = useState(state?.activeTaskIndex ?? -1);
     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 = activeTaskIndex >= 0 && activeTaskIndex < taskInfos.length;
     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;
-            });
+            // Cancel execution
+            setActiveTaskIndex(-1);
             handlers?.onAborted('execution');
         }
     }, { isActive: (isLoading || isExecuting) && isActive });
-    // Update elapsed time for running command
-    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]);
+    // Process tasks to get commands from AI
     useEffect(() => {
-        if (!isActive) {
+        if (!isActive || taskInfos.length > 0 || hasProcessed) {
             return;
         }
         if (!service) {
@@ -178,7 +51,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,81 +63,39 @@ 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: [],
+                        taskInfos: [],
                     });
                     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
+                // Set message, summary, and create task infos
                 setMessage(result.message);
-                setCommandStatuses(resolvedCommands.map((cmd, index) => ({
-                    command: cmd,
-                    status: ExecutionStatus.Pending,
+                setSummary(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));
-                    }
-                });
-                if (mounted) {
-                    setOutputs(outputs);
-                    setIsExecuting(false);
-                }
+                    command: cmd,
+                }));
+                setTaskInfos(infos);
+                setActiveTaskIndex(0); // Start with first task
             }
             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({
-                        error: errorMessage,
-                    });
+                    handlers?.updateState({ error: errorMessage });
                     handlers?.onError(errorMessage);
                 }
             }
@@ -274,12 +104,86 @@ 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);
+        if (index < taskInfos.length - 1) {
+            // More tasks to execute
+            setActiveTaskIndex(index + 1);
+        }
+        else {
+            // All tasks complete
+            setActiveTaskIndex(-1);
+            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,
+                activeTaskIndex: -1,
+                taskExecutionTimes: updatedTimes,
+                completionMessage: completion,
+            });
+            handlers?.completeActive();
+        }
+    }, [taskInfos, message, handlers, taskExecutionTimes, summary]);
+    const handleTaskError = useCallback((index, error) => {
+        const task = taskInfos[index];
+        const isCritical = task?.command.critical !== false; // Default to true
+        if (isCritical) {
+            // Critical failure - stop execution
+            setActiveTaskIndex(-1);
+            setError(error);
+            handlers?.updateState({
+                message,
+                taskInfos,
+                activeTaskIndex: -1,
+                error,
+            });
+            handlers?.onError(error);
+        }
+        else {
+            // Non-critical failure - continue to next task
+            if (index < taskInfos.length - 1) {
+                setActiveTaskIndex(index + 1);
+            }
+            else {
+                // Last task, complete execution
+                setActiveTaskIndex(-1);
+                const totalElapsed = taskExecutionTimes.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,
+                    activeTaskIndex: -1,
+                    taskExecutionTimes,
+                    completionMessage: completion,
+                });
+                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,
+            taskInfos,
+            activeTaskIndex: -1,
+        });
+    }, [taskInfos, message, 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 === activeTaskIndex, index: index, 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/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';
@@ -11,7 +11,7 @@ import { ensureMinimumTime } from '../services/timing.js';
 import { Spinner } from './Spinner.js';
 const MIN_PROCESSING_TIME = 1000;
 const BUILT_IN_CAPABILITIES = new Set([
-    'CONFIG',
+    'CONFIGURE',
     'SCHEDULE',
     'INTROSPECT',
     'ANSWER',
@@ -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/Subtask.js

@@ -0,0 +1,11 @@
+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 { formatDuration } from '../services/utils.js';
+import { ExecutionStatus } from '../services/shell.js';
+import { Spinner } from './Spinner.js';
+export function Subtask({ label, command, status, startTime, endTime, elapsed, }) {
+    const colors = getStatusColors(status);
+    const elapsedTime = elapsed ?? (startTime && endTime ? endTime - startTime : undefined);
+    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: label || command.description }), elapsedTime !== undefined && (_jsxs(Text, { color: Palette.DarkGray, children: ["(", formatDuration(elapsedTime), ")"] }))] }), _jsxs(Box, { paddingLeft: 5, gap: 1, children: [_jsx(Text, { color: colors.symbol, children: "\u221F" }), _jsx(Text, { color: colors.command, children: command.command }), status === ExecutionStatus.Running && _jsx(Spinner, {})] })] }));
+}

package/dist/ui/Task.js

@@ -0,0 +1,81 @@
+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, onComplete, onAbort, onError, }) {
+    const [status, setStatus] = useState(ExecutionStatus.Pending);
+    const [startTime, setStartTime] = useState();
+    const [endTime, setEndTime] = useState();
+    const [elapsed, setElapsed] = useState();
+    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(() => {
+        if (!isActive || 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');
+                }
+            }
+            catch (err) {
+                if (!mounted)
+                    return;
+                const end = Date.now();
+                setEndTime(end);
+                setElapsed(calculateElapsed(start));
+                setStatus(ExecutionStatus.Failed);
+                onError?.(index, err instanceof Error ? err.message : 'Unknown error');
+            }
+        }
+        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, startTime: startTime, endTime: endTime, elapsed: status === ExecutionStatus.Running ? currentElapsed : elapsed }));
+}

package/dist/ui/Validate.js

@@ -4,6 +4,7 @@ import { Box, Text } from 'ink';
 import { ComponentStatus } from '../types/components.js';
 import { TaskType } from '../types/types.js';
 import { Colors, getTextColor } from '../services/colors.js';
+import { addDebugToTimeline } from '../services/components.js';
 import { useInput } from '../services/keyboard.js';
 import { formatErrorMessage } from '../services/messages.js';
 import { ensureMinimumTime } from '../services/timing.js';
@@ -42,6 +43,8 @@ export function Validate({ missingConfig, userRequest, state, status, service, c
                 const result = await svc.processWithTool(prompt, 'validate');
                 await ensureMinimumTime(startTime, MIN_PROCESSING_TIME);
                 if (mounted) {
+                    // Add debug components to timeline if present
+                    addDebugToTimeline(result.debug, handlers);
                     // Extract CONFIG tasks with descriptions from result
                     const configTasks = result.tasks.filter((task) => task.type === TaskType.Config);
                     // Build ConfigRequirements with descriptions