attocode 0.1.6 → 0.1.8

package/dist/src/tui/app.js

@@ -10,7 +10,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useState, useCallback, useEffect, memo, useRef, useMemo } from 'react';
 import { Box, Text, useApp, useInput, Static } from 'ink';
-import { DiffView } from './components/DiffView.js';
+import { ActiveAgentsPanel } from './components/ActiveAgentsPanel.js';
+import { TasksPanel } from './components/TasksPanel.js';
+import { ToolCallItem } from './components/ToolCallItem.js';
+import { DebugPanel, useDebugBuffer } from './components/DebugPanel.js';
 import { getTheme, getThemeNames } from './theme/index.js';
 import { ControlledCommandPalette } from './input/CommandPalette.js';
 import { ApprovalDialog } from './components/ApprovalDialog.js';
@@ -18,6 +21,7 @@ import { TransparencyAggregator } from './transparency-aggregator.js';
 import { handleSkillsCommand } from '../commands/skills-commands.js';
 import { handleAgentsCommand } from '../commands/agents-commands.js';
 import { handleInitCommand } from '../commands/init-commands.js';
+import { createHistoryManager } from '../integrations/history.js';
 // =============================================================================
 // PATTERN GENERATION FOR ALWAYS-ALLOW
 // =============================================================================
@@ -57,98 +61,34 @@ const MessageItem = memo(function MessageItem({ msg, colors }) {
     const label = isUser ? 'You' : isAssistant ? 'Assistant' : isError ? 'Error' : 'System';
     return (_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: roleColor, bold: true, children: icon }), _jsx(Text, { color: roleColor, bold: true, children: label }), _jsx(Text, { color: colors.textMuted, dimColor: true, children: ` ${msg.ts.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}` })] }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { wrap: "wrap", color: isError ? colors.error : colors.text, children: msg.content }) })] }));
 });
-const ToolCallItem = memo(function ToolCallItem({ tc, expanded, colors }) {
-    const icon = tc.status === 'success' ? '[OK]' : tc.status === 'error' ? '[X]' : tc.status === 'running' ? '[~]' : '[ ]';
-    const statusColor = tc.status === 'success' ? '#98FB98' : tc.status === 'error' ? '#FF6B6B' : tc.status === 'running' ? '#87CEEB' : colors.textMuted;
-    // Compact formatting for collapsed view
-    const formatToolArgsCompact = (args) => {
-        const entries = Object.entries(args);
-        if (entries.length === 0)
-            return '';
-        if (entries.length === 1) {
-            const [key, val] = entries[0];
-            const valStr = typeof val === 'string' ? val : JSON.stringify(val);
-            return valStr.length > 50 ? `${key}: ${valStr.slice(0, 47)}...` : `${key}: ${valStr}`;
-        }
-        return `{${entries.length} args}`;
-    };
-    // Expanded formatting - each arg on its own line with proper handling
-    const formatToolArgsExpanded = (args) => {
-        const entries = Object.entries(args);
-        if (entries.length === 0)
-            return [];
-        return entries.map(([key, val]) => {
-            let valStr;
-            if (typeof val === 'string') {
-                // For strings, show with quotes, handle multiline
-                if (val.includes('\n')) {
-                    const lines = val.split('\n');
-                    if (lines.length > 3) {
-                        valStr = `"${lines.slice(0, 3).join('\\n')}..." (${lines.length} lines)`;
-                    }
-                    else {
-                        valStr = `"${val.replace(/\n/g, '\\n')}"`;
-                    }
-                }
-                else if (val.length > 100) {
-                    valStr = `"${val.slice(0, 97)}..."`;
-                }
-                else {
-                    valStr = `"${val}"`;
-                }
-            }
-            else if (typeof val === 'object' && val !== null) {
-                const json = JSON.stringify(val, null, 2);
-                if (json.length > 200) {
-                    valStr = JSON.stringify(val).slice(0, 197) + '...';
-                }
-                else {
-                    valStr = json;
-                }
-            }
-            else {
-                valStr = String(val);
-            }
-            return `${key}: ${valStr}`;
-        });
-    };
-    const argsStr = formatToolArgsCompact(tc.args);
-    if (expanded) {
-        const expandedArgs = formatToolArgsExpanded(tc.args);
-        return (_jsxs(Box, { marginLeft: 2, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: statusColor, children: icon }), _jsx(Text, { color: "#DDA0DD", bold: true, children: tc.name }), tc.duration ? _jsxs(Text, { color: colors.textMuted, dimColor: true, children: ["(", tc.duration, "ms)"] }) : null] }), expandedArgs.map((argLine, i) => (_jsx(Box, { marginLeft: 3, children: _jsx(Text, { color: "#87CEEB", dimColor: true, children: argLine }) }, i))), tc.status === 'success' && tc.result !== undefined && tc.result !== null ? (_jsx(Box, { marginLeft: 3, flexDirection: "column", children: (tc.name === 'edit_file' || tc.name === 'write_file') &&
-                        typeof tc.result === 'object' && tc.result !== null &&
-                        'metadata' in tc.result &&
-                        typeof tc.result.metadata?.diff === 'string' ? (_jsx(DiffView, { diff: tc.result.metadata.diff, expanded: true, maxLines: 15 })) : (_jsx(Text, { color: "#98FB98", dimColor: true, children: `-> ${String(tc.result).slice(0, 150)}${String(tc.result).length > 150 ? '...' : ''}` })) })) : null, tc.status === 'error' && tc.error && (_jsx(Box, { marginLeft: 3, children: _jsx(Text, { color: "#FF6B6B", children: `x ${tc.error}` }) }))] }));
-    }
-    // Check if result has diff metadata for collapsed summary
-    const hasDiff = tc.status === 'success' &&
-        (tc.name === 'edit_file' || tc.name === 'write_file') &&
-        typeof tc.result === 'object' && tc.result !== null &&
-        'metadata' in tc.result &&
-        typeof tc.result.metadata?.diff === 'string';
-    return (_jsxs(Box, { marginLeft: 2, gap: 1, children: [_jsx(Text, { color: statusColor, children: icon }), _jsx(Text, { color: "#DDA0DD", bold: true, children: tc.name }), argsStr ? _jsx(Text, { color: colors.textMuted, dimColor: true, children: argsStr }) : null, hasDiff && (_jsx(DiffView, { diff: tc.result.metadata.diff, expanded: false })), tc.duration ? _jsxs(Text, { color: colors.textMuted, dimColor: true, children: ["(", tc.duration, "ms)"] }) : null] }));
-});
-const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled, borderColor, textColor, cursorColor, onCtrlC, onCtrlL, onCtrlP, onEscape, onToggleToolExpand, onToggleThinking, onToggleTransparency, onPageUp, onPageDown, onHome, onEnd, commandPaletteOpen, onCommandPaletteInput, approvalDialogOpen, approvalDenyReasonMode, onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason, onApprovalCancelDenyReason, onApprovalDenyReasonInput, }) {
+const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled, borderColor, textColor, cursorColor, onCtrlC, onCtrlL, onCtrlP, onEscape, onToggleToolExpand, onToggleThinking, onToggleTransparency, onToggleActiveAgents, onToggleTasks, onToggleDebug, onPageUp, onPageDown, onHome, onEnd, commandPaletteOpen, onCommandPaletteInput, approvalDialogOpen, approvalDenyReasonMode, onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason, onApprovalCancelDenyReason, onApprovalDenyReasonInput, history = [], onHistorySearch, }) {
     const [value, setValue] = useState('');
     const [cursorPos, setCursorPos] = useState(0);
+    // History navigation state
+    const [historyIndex, setHistoryIndex] = useState(-1); // -1 = current input (not browsing history)
+    const [savedInput, setSavedInput] = useState(''); // Preserve current input when browsing
+    const historyRef = useRef(history);
+    historyRef.current = history;
     // Store callbacks in refs so useInput doesn't re-subscribe on prop changes
     const callbacksRef = useRef({
         onSubmit, onCtrlC, onCtrlL, onCtrlP, onEscape,
-        onToggleToolExpand, onToggleThinking, onToggleTransparency,
+        onToggleToolExpand, onToggleThinking, onToggleTransparency, onToggleActiveAgents, onToggleTasks, onToggleDebug,
         onPageUp, onPageDown, onHome, onEnd,
         commandPaletteOpen, onCommandPaletteInput,
         approvalDialogOpen, approvalDenyReasonMode,
         onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason,
         onApprovalCancelDenyReason, onApprovalDenyReasonInput,
+        onHistorySearch,
     });
     callbacksRef.current = {
         onSubmit, onCtrlC, onCtrlL, onCtrlP, onEscape,
-        onToggleToolExpand, onToggleThinking, onToggleTransparency,
+        onToggleToolExpand, onToggleThinking, onToggleTransparency, onToggleActiveAgents, onToggleTasks, onToggleDebug,
         onPageUp, onPageDown, onHome, onEnd,
         commandPaletteOpen, onCommandPaletteInput,
         approvalDialogOpen, approvalDenyReasonMode,
         onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason,
         onApprovalCancelDenyReason, onApprovalDenyReasonInput,
+        onHistorySearch,
     };
     const disabledRef = useRef(disabled);
     disabledRef.current = disabled;
@@ -186,6 +126,21 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
             cb.onToggleTransparency?.();
             return;
         }
+        // Alt+A / Option+A - Toggle active agents panel
+        if (input === '\u00e5' || (key.meta && input === 'a')) {
+            cb.onToggleActiveAgents?.();
+            return;
+        }
+        // Alt+K / Option+K - Toggle tasks panel
+        if (input === '\u02da' || (key.meta && input === 'k')) {
+            cb.onToggleTasks?.();
+            return;
+        }
+        // Alt+D / Option+D - Toggle debug panel
+        if (input === '\u2202' || (key.meta && input === 'd')) {
+            cb.onToggleDebug?.();
+            return;
+        }
         // Command palette keyboard handling (when open)
         if (cb.commandPaletteOpen && cb.onCommandPaletteInput) {
             cb.onCommandPaletteInput(input, key);
@@ -249,10 +204,18 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
         // Input handling (only when not disabled)
         if (disabledRef.current)
             return;
+        // Shift+Enter for multiline input (insert newline)
+        if (key.return && key.shift) {
+            setValue(v => v.slice(0, cursorPos) + '\n' + v.slice(cursorPos));
+            setCursorPos(p => p + 1);
+            return;
+        }
         if (key.return && value.trim()) {
             cb.onSubmit(value);
             setValue('');
             setCursorPos(0);
+            setHistoryIndex(-1); // Reset history navigation
+            setSavedInput('');
             return;
         }
         if (key.backspace || key.delete) {
@@ -270,6 +233,54 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
             setCursorPos(p => Math.min(value.length, p + 1));
             return;
         }
+        // History navigation with up/down arrows
+        if (key.upArrow && historyRef.current.length > 0) {
+            setHistoryIndex(prevIndex => {
+                const maxIndex = historyRef.current.length - 1;
+                if (prevIndex === -1) {
+                    // First press - save current input and go to most recent history
+                    setSavedInput(value);
+                    const newValue = historyRef.current[maxIndex] || '';
+                    setValue(newValue);
+                    setCursorPos(newValue.length);
+                    return maxIndex;
+                }
+                else if (prevIndex > 0) {
+                    // Go to older entry
+                    const newIndex = prevIndex - 1;
+                    const newValue = historyRef.current[newIndex] || '';
+                    setValue(newValue);
+                    setCursorPos(newValue.length);
+                    return newIndex;
+                }
+                return prevIndex; // Already at oldest
+            });
+            return;
+        }
+        if (key.downArrow && historyRef.current.length > 0) {
+            setHistoryIndex(prevIndex => {
+                if (prevIndex === -1) {
+                    // Not browsing history, do nothing
+                    return -1;
+                }
+                else if (prevIndex < historyRef.current.length - 1) {
+                    // Go to newer entry
+                    const newIndex = prevIndex + 1;
+                    const newValue = historyRef.current[newIndex] || '';
+                    setValue(newValue);
+                    setCursorPos(newValue.length);
+                    return newIndex;
+                }
+                else {
+                    // At most recent - restore saved input
+                    setValue(savedInput);
+                    setCursorPos(savedInput.length);
+                    setSavedInput('');
+                    return -1;
+                }
+            });
+            return;
+        }
         if (key.ctrl && input === 'a') {
             setCursorPos(0);
             return;
@@ -288,7 +299,10 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
             setCursorPos(p => p + input.length);
         }
     });
-    return (_jsxs(Box, { borderStyle: "round", borderColor: disabledRef.current ? '#666' : borderColor, paddingX: 1, children: [_jsxs(Text, { color: textColor, bold: true, children: ['>', " "] }), _jsx(Text, { children: value.slice(0, cursorPos) }), !disabled && (_jsx(Text, { backgroundColor: cursorColor, color: "#1a1a2e", children: value[cursorPos] ?? ' ' })), _jsx(Text, { children: value.slice(cursorPos + 1) })] }));
+    // Check if multiline (for visual indicator)
+    const isMultiline = value.includes('\n');
+    const lineCount = value.split('\n').length;
+    return (_jsx(Box, { borderStyle: "round", borderColor: disabledRef.current ? '#666' : borderColor, paddingX: 1, flexDirection: "column", children: _jsxs(Box, { children: [_jsxs(Text, { color: textColor, bold: true, children: [isMultiline ? '»' : '>', " "] }), _jsx(Text, { children: value.slice(0, cursorPos).replace(/\n/g, '⏎') }), !disabled && (_jsx(Text, { backgroundColor: cursorColor, color: "#1a1a2e", children: value[cursorPos] === '\n' ? '⏎' : (value[cursorPos] ?? ' ') })), _jsx(Text, { children: value.slice(cursorPos + 1).replace(/\n/g, '⏎') }), isMultiline && (_jsxs(Text, { color: "#666", dimColor: true, children: [" (", lineCount, " lines)"] }))] }) }));
 }, (prevProps, nextProps) => {
     // Custom comparison: only re-render if visual props change
     return prevProps.disabled === nextProps.disabled &&
@@ -314,12 +328,27 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     const [contextTokens, setContextTokens] = useState(0);
     const [elapsedTime, setElapsedTime] = useState(0);
     const processingStartRef = useRef(null);
+    // Command history manager (persistent)
+    const historyManagerRef = useRef(null);
+    if (!historyManagerRef.current) {
+        historyManagerRef.current = createHistoryManager();
+    }
+    const [historyEntries, setHistoryEntries] = useState(() => historyManagerRef.current?.getHistory() || []);
+    // Debug buffer for debug panel
+    const debugBuffer = useDebugBuffer(100);
     const [executionMode, setExecutionMode] = useState('idle');
     const executionModeRef = useRef('idle');
     // Display toggles
     const [toolCallsExpanded, setToolCallsExpanded] = useState(false);
     const [showThinking, setShowThinking] = useState(true);
     const [transparencyExpanded, setTransparencyExpanded] = useState(false);
+    const [activeAgentsExpanded, setActiveAgentsExpanded] = useState(true);
+    const [tasksExpanded, setTasksExpanded] = useState(true);
+    const [debugExpanded, setDebugExpanded] = useState(false);
+    // Active agents tracking (for Active Agents Panel)
+    const [activeAgents, setActiveAgents] = useState([]);
+    // Tasks tracking (for Tasks Panel)
+    const [tasks, setTasks] = useState([]);
     // Command palette state
     const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
     const [commandPaletteQuery, setCommandPaletteQuery] = useState('');
@@ -333,6 +362,9 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     // Transparency state
     const [transparencyState, setTransparencyState] = useState(null);
     const transparencyAggregatorRef = useRef(null);
+    // Consecutive Ctrl+C tracking for force exit
+    const [ctrlCCount, setCtrlCCount] = useState(0);
+    const ctrlCTimerRef = useRef(null);
     // Refs for stable callbacks
     const isProcessingRef = useRef(isProcessing);
     const messagesLengthRef = useRef(messages.length);
@@ -348,6 +380,22 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         const uniqueId = `${role}-${Date.now()}-${++messageIdCounter.current}`;
         setMessages(prev => [...prev, { id: uniqueId, role, content, ts: new Date() }]);
     }, []);
+    const persistPendingPlanToStore = useCallback(() => {
+        if (!agent.hasPendingPlan())
+            return;
+        if (!('savePendingPlan' in sessionStore) || typeof sessionStore.savePendingPlan !== 'function') {
+            return;
+        }
+        const pendingPlan = agent.getPendingPlan();
+        if (!pendingPlan)
+            return;
+        sessionStore.savePendingPlan(pendingPlan, currentSessionId);
+        persistenceDebug.log('Pending plan saved', {
+            planId: pendingPlan.id,
+            changes: pendingPlan.proposedChanges.length,
+            sessionId: currentSessionId,
+        });
+    }, [agent, sessionStore, currentSessionId, persistenceDebug]);
     // =========================================================================
     // APPROVAL DIALOG HANDLERS
     // =========================================================================
@@ -420,6 +468,10 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         const mode = executionModeRef.current;
         if (mode === 'idle')
             return; // No active execution, ignore events
+        // Log event to debug buffer
+        if (debugExpanded) {
+            debugBuffer.debug(`Event: ${event.type}`, event);
+        }
         // Extract subagent from event if present (not all events have it)
         const eventWithSubagent = event;
         const subagentPrefix = eventWithSubagent.subagent ? `[${eventWithSubagent.subagent}] ` : '';
@@ -441,26 +493,66 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         // -------------------------------------------------------------------------
         // Shared events (both processing and approving modes)
         // -------------------------------------------------------------------------
-        // Subagent lifecycle events
+        // Subagent lifecycle events - also update Active Agents Panel
         if (event.type === 'agent.spawn') {
             const e = event;
+            const agentId = e.agentId || `spawn-${Date.now()}`;
             addMessage('system', `[AGENT] Spawning ${e.name}: ${e.task.slice(0, 100)}${e.task.length > 100 ? '...' : ''}`);
+            // Add to active agents panel
+            setActiveAgents(prev => [...prev, {
+                    id: agentId,
+                    type: e.name,
+                    task: e.task,
+                    status: 'running',
+                    tokens: 0,
+                    startTime: Date.now(),
+                }]);
             return;
         }
         if (event.type === 'agent.complete') {
             const e = event;
             const statusText = e.success ? 'completed' : 'failed';
-            addMessage('system', `[AGENT] ${e.agentId} ${statusText}`);
-            // Show output preview if substantive
+            const displayName = e.agentType || e.agentId;
+            addMessage('system', `[AGENT] ${displayName} ${statusText}`);
+            // Show output preview if substantive (increased from 300 to 1000 chars)
             if (e.output && e.output.length > 50) {
-                const preview = e.output.slice(0, 300);
-                addMessage('system', `[AGENT OUTPUT]\n${preview}${e.output.length > 300 ? '\n...(truncated)' : ''}`);
+                const preview = e.output.slice(0, 1000);
+                const truncated = e.output.length > 1000;
+                addMessage('system', `[AGENT OUTPUT]\n${preview}${truncated ? `\n...(full output: ${e.output.length} chars)` : ''}`);
             }
+            // Update active agents panel - use strict ID matching
+            setActiveAgents(prev => prev.map(a => a.id === e.agentId
+                ? { ...a, status: e.success ? 'completed' : 'error' }
+                : a));
             return;
         }
         if (event.type === 'agent.error') {
             const e = event;
-            addMessage('system', `[AGENT] ${e.agentId} error: ${e.error}`);
+            const displayName = e.agentType || e.agentId;
+            addMessage('system', `[AGENT] ${displayName} error: ${e.error}`);
+            // For timeout errors, use 'timing_out' status first to indicate the agent
+            // is in the process of stopping. Then transition to 'timeout' after a delay.
+            // This provides better UX than immediately showing "failed" while tokens accumulate.
+            const isTimeout = e.error.includes('timed out') || e.error.includes('Timed out');
+            if (isTimeout) {
+                // First, mark as timing_out - use strict ID matching
+                setActiveAgents(prev => prev.map(a => a.id === e.agentId
+                    ? { ...a, status: 'timing_out' }
+                    : a));
+                // After 3 seconds, transition to final timeout status
+                // (agent should have stopped by then due to cancellation token check)
+                setTimeout(() => {
+                    setActiveAgents(prev => prev.map(a => a.id === e.agentId && a.status === 'timing_out'
+                        ? { ...a, status: 'timeout' }
+                        : a));
+                }, 3000);
+            }
+            else {
+                // Regular error - set immediately with strict ID matching
+                setActiveAgents(prev => prev.map(a => a.id === e.agentId
+                    ? { ...a, status: 'error' }
+                    : a));
+            }
             return;
         }
         if (event.type === 'agent.pending_plan') {
@@ -529,10 +621,33 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             addMessage('error', `${prefix} ${errorMsg}`);
             return;
         }
-        // Insight events
-        if (event.type === 'insight.tokens' && showThinking) {
+        // Insight events - also track tokens for active agents
+        if (event.type === 'insight.tokens') {
             const e = event;
-            addMessage('system', `${subagentPrefix}* ${e.inputTokens.toLocaleString()} in, ${e.outputTokens.toLocaleString()} out${e.cost ? ` $${e.cost.toFixed(6)}` : ''}`);
+            if (showThinking) {
+                addMessage('system', `${subagentPrefix}* ${e.inputTokens.toLocaleString()} in, ${e.outputTokens.toLocaleString()} out${e.cost ? ` $${e.cost.toFixed(6)}` : ''}`);
+            }
+            // Update tokens for active agent if this event is from a subagent
+            // IMPORTANT: Don't update tokens for agents that are timing_out/timeout/error
+            // These agents should have stopped, and any lingering events are from
+            // zombie processes that we don't want to count.
+            if (e.subagent || eventWithSubagent.subagent) {
+                const subagentId = e.subagentId || eventWithSubagent.subagentId;
+                const agentName = e.subagent || eventWithSubagent.subagent;
+                setActiveAgents(prev => prev.map(a => {
+                    // Use strict ID matching when subagentId is available (prevents duplicate counting
+                    // when multiple agents of the same type run in parallel)
+                    const matchesAgent = subagentId
+                        ? a.id === subagentId
+                        : (a.type === agentName || a.id.includes(agentName || ''));
+                    const isStillRunning = a.status === 'running';
+                    // Only update tokens if agent is still running
+                    if (matchesAgent && isStillRunning) {
+                        return { ...a, tokens: a.tokens + (e.inputTokens || 0) + (e.outputTokens || 0) };
+                    }
+                    return a;
+                }));
+            }
             return;
         }
         // Resilience events
@@ -546,15 +661,45 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             addMessage('system', `[RECOVERED] ${e.reason} after ${e.attempts} attempt(s)`);
             return;
         }
-        // Subagent visibility events
+        // Subagent visibility events - also update Active Agents Panel
         if (event.type === 'subagent.iteration') {
             const e = event;
             setStatus(s => ({ ...s, mode: `${e.agentId} iter ${e.iteration}/${e.maxIterations}` }));
+            // Update active agents panel with iteration info
+            // Use subagentId for strict matching when available (parallel same-type agents)
+            setActiveAgents(prev => prev.map(a => {
+                const matches = e.subagentId
+                    ? a.id === e.subagentId
+                    : (a.type === e.agentId || a.id.includes(e.agentId));
+                return matches ? { ...a, iteration: e.iteration, maxIterations: e.maxIterations } : a;
+            }));
             return;
         }
         if (event.type === 'subagent.phase') {
             const e = event;
             setStatus(s => ({ ...s, mode: `${e.agentId} ${e.phase}` }));
+            // Update active agents panel with phase info
+            // Use subagentId for strict matching when available (parallel same-type agents)
+            setActiveAgents(prev => prev.map(a => {
+                const matches = e.subagentId
+                    ? a.id === e.subagentId
+                    : (a.type === e.agentId || a.id.includes(e.agentId));
+                return matches ? { ...a, currentPhase: e.phase } : a;
+            }));
+            return;
+        }
+        // Task events - update Tasks Panel
+        if (event.type === 'task.created') {
+            const e = event;
+            setTasks(prev => [...prev, e.task]);
+            addMessage('system', `[TASK] Created: ${e.task.subject}`);
+            return;
+        }
+        if (event.type === 'task.updated') {
+            const e = event;
+            setTasks(prev => prev.map(t => t.id === e.task.id ? e.task : t));
+            // Only log status changes
+            addMessage('system', `[TASK] ${e.task.subject}: ${e.task.status}`);
             return;
         }
         // -------------------------------------------------------------------------
@@ -673,9 +818,11 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     '  /theme [name]     Show/change theme',
                     '  /tools            List tools',
                     '',
-                    '> SESSIONS',
+                    '> SESSIONS & TASKS',
                     '  /save             Save session',
                     '  /sessions         List sessions',
+                    '  /load <id>        Load session by ID',
+                    '  /tasks            List tracked tasks',
                     '  /checkpoint       Create checkpoint',
                     '  /checkpoints      List checkpoints',
                     '  /restore <id>     Restore checkpoint',
@@ -727,6 +874,8 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     '  Alt+T       Toggle tool details',
                     '  Alt+O       Toggle thinking',
                     '  Alt+I       Toggle transparency panel',
+                    '  Alt+K       Toggle tasks panel',
+                    '  Alt+D       Toggle debug panel',
                     '========================',
                 ].join('\n'));
                 return;
@@ -750,6 +899,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                         plan: agentState.plan,
                         memoryContext: agentState.memoryContext,
                     });
+                    persistPendingPlanToStore();
                     addMessage('system', `Session saved: ${currentSessionId} (checkpoint: ${ckptId})`);
                 }
                 catch (e) {
@@ -765,6 +915,98 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     addMessage('error', e.message);
                 }
                 return;
+            case 'load': {
+                const targetSessionId = args[0];
+                if (!targetSessionId) {
+                    addMessage('system', 'Usage: /load <session-id>\n  Use /sessions to list available sessions');
+                    return;
+                }
+                // Check if session exists
+                const targetSession = sessionStore.getSessionMetadata(targetSessionId);
+                if (!targetSession) {
+                    addMessage('error', `Session not found: ${targetSessionId}\n  Use /sessions to list available sessions`);
+                    return;
+                }
+                try {
+                    addMessage('system', `Loading session: ${targetSession.id}\n   Created: ${new Date(targetSession.createdAt).toLocaleString()}\n   Messages: ${targetSession.messageCount}`);
+                    // Try to load from checkpoint first
+                    let loadCheckpointData;
+                    if ('loadLatestCheckpoint' in sessionStore && typeof sessionStore.loadLatestCheckpoint === 'function') {
+                        const sqliteCheckpoint = sessionStore.loadLatestCheckpoint(targetSession.id);
+                        if (sqliteCheckpoint?.state) {
+                            loadCheckpointData = sqliteCheckpoint.state;
+                        }
+                    }
+                    // Fall back to loading from entries if no checkpoint
+                    if (!loadCheckpointData) {
+                        const entriesResult = sessionStore.loadSession(targetSession.id);
+                        const entries = Array.isArray(entriesResult) ? entriesResult : await entriesResult;
+                        const checkpoint = [...entries].reverse().find((e) => e.type === 'checkpoint');
+                        if (checkpoint?.data) {
+                            loadCheckpointData = checkpoint.data;
+                        }
+                        else {
+                            const messages = entries
+                                .filter((e) => e.type === 'message')
+                                .map((e) => e.data);
+                            if (messages.length > 0) {
+                                agent.loadState({ messages });
+                                addMessage('system', `+ Loaded ${messages.length} messages from session`);
+                            }
+                            else {
+                                addMessage('system', 'No messages found in session');
+                            }
+                            return;
+                        }
+                    }
+                    // Load from checkpoint data
+                    if (loadCheckpointData?.messages) {
+                        agent.loadState({
+                            messages: loadCheckpointData.messages,
+                            iteration: loadCheckpointData.iteration,
+                            metrics: loadCheckpointData.metrics,
+                            plan: loadCheckpointData.plan,
+                            memoryContext: loadCheckpointData.memoryContext,
+                        });
+                        addMessage('system', `+ Loaded ${loadCheckpointData.messages.length} messages from session${loadCheckpointData.iteration ? `\n   Iteration: ${loadCheckpointData.iteration}` : ''}${loadCheckpointData.plan ? '\n   Plan restored' : ''}`);
+                    }
+                }
+                catch (e) {
+                    addMessage('error', `Error loading session: ${e.message}`);
+                }
+                return;
+            }
+            case 'tasks': {
+                // Filter out deleted tasks
+                const visibleTasks = tasks.filter(t => t.status !== 'deleted');
+                if (visibleTasks.length === 0) {
+                    addMessage('system', 'No tasks. Tasks are created when the agent uses task_create tool.');
+                    return;
+                }
+                // Count by status
+                const pending = visibleTasks.filter(t => t.status === 'pending').length;
+                const inProgress = visibleTasks.filter(t => t.status === 'in_progress').length;
+                const completed = visibleTasks.filter(t => t.status === 'completed').length;
+                // Format task list
+                const taskLines = visibleTasks.map(t => {
+                    const isBlocked = t.blockedBy.some(id => {
+                        const blocker = visibleTasks.find(bt => bt.id === id);
+                        return blocker && blocker.status !== 'completed';
+                    });
+                    const icon = isBlocked ? '◌' : t.status === 'completed' ? '✓' : t.status === 'in_progress' ? '●' : '○';
+                    const blockedInfo = isBlocked ? ` (blocked by: ${t.blockedBy.slice(0, 2).join(', ')})` : '';
+                    const activeInfo = t.status === 'in_progress' && t.activeForm ? `\n     └ ${t.activeForm}...` : '';
+                    return `  ${icon} ${t.id}  ${t.subject}${blockedInfo}${activeInfo}`;
+                });
+                addMessage('system', [
+                    `TASKS [${pending} pending, ${inProgress} in_progress, ${completed} completed]`,
+                    '',
+                    ...taskLines,
+                    '',
+                    'Toggle panel: Alt+K',
+                ].join('\n'));
+                return;
+            }
             case 'context':
             case 'ctx': {
                 const agentState = agent.getState();
@@ -1188,7 +1430,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             case 'trace': {
                 const traceCollector = agent.getTraceCollector();
                 if (args.length === 0) {
-                    // Show current session trace summary
+                    // Show current session trace summary with subagent hierarchy
                     if (!traceCollector) {
                         addMessage('system', 'Tracing is not enabled. Start agent with --trace to enable.');
                         return;
@@ -1198,24 +1440,56 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                         addMessage('system', 'No trace data collected yet.');
                         return;
                     }
-                    addMessage('system', [
-                        'Trace Summary:',
-                        `  Session ID:    ${data.sessionId}`,
-                        `  Status:        ${data.status}`,
-                        `  Iterations:    ${data.iterations.length}`,
-                        `  Duration:      ${data.durationMs ? `${Math.round(data.durationMs / 1000)}s` : 'ongoing'}`,
-                        '',
-                        'Metrics:',
-                        `  Input tokens:  ${data.metrics.inputTokens.toLocaleString()}`,
-                        `  Output tokens: ${data.metrics.outputTokens.toLocaleString()}`,
-                        `  Cache hit:     ${Math.round(data.metrics.avgCacheHitRate * 100)}%`,
-                        `  Tool calls:    ${data.metrics.toolCalls}`,
-                        `  Errors:        ${data.metrics.errors}`,
-                        `  Est. Cost:     $${data.metrics.estimatedCost.toFixed(4)}`,
-                        '',
-                        'Use: /trace --analyze for efficiency analysis',
-                        '     /trace issues to see detected inefficiencies',
-                    ].join('\n'));
+                    // Get subagent hierarchy from JSONL file
+                    const hierarchy = await traceCollector.getSubagentHierarchy();
+                    if (hierarchy && hierarchy.subagents.length > 0) {
+                        // Show hierarchy view with subagents
+                        const lines = [
+                            'Trace Summary:',
+                            `  Session ID:    ${data.sessionId}`,
+                            `  Status:        ${data.status}`,
+                            `  Duration:      ${data.durationMs ? `${Math.round(data.durationMs / 1000)}s` : 'ongoing'}`,
+                            '',
+                            'Main Agent:',
+                            `  Iterations:    ${hierarchy.mainAgent.llmCalls}`,
+                            `  Input tokens:  ${hierarchy.mainAgent.inputTokens.toLocaleString()}`,
+                            `  Output tokens: ${hierarchy.mainAgent.outputTokens.toLocaleString()}`,
+                            `  Tool calls:    ${hierarchy.mainAgent.toolCalls}`,
+                            '',
+                            'Subagent Tree:',
+                        ];
+                        // Sort subagents by spawn time
+                        const sortedSubagents = hierarchy.subagents.sort((a, b) => (a.spawnedAtIteration || 0) - (b.spawnedAtIteration || 0));
+                        for (const sub of sortedSubagents) {
+                            const durationSec = Math.round(sub.duration / 1000);
+                            lines.push(`  └─ ${sub.agentId} (spawned iter ${sub.spawnedAtIteration || '?'})`);
+                            lines.push(`     ├─ ${sub.inputTokens.toLocaleString()} in / ${sub.outputTokens.toLocaleString()} out tokens`);
+                            lines.push(`     ├─ ${sub.toolCalls} tools | ${durationSec}s`);
+                        }
+                        lines.push('', 'TOTALS (all agents):', `  Input tokens:  ${hierarchy.totals.inputTokens.toLocaleString()}`, `  Output tokens: ${hierarchy.totals.outputTokens.toLocaleString()}`, `  Tool calls:    ${hierarchy.totals.toolCalls}`, `  LLM calls:     ${hierarchy.totals.llmCalls}`, `  Est. Cost:     $${hierarchy.totals.estimatedCost.toFixed(4)}`, `  Duration:      ${Math.round(hierarchy.totals.duration / 1000)}s`, '', 'Use: /trace --analyze for efficiency analysis', '     /trace issues to see detected inefficiencies');
+                        addMessage('system', lines.join('\n'));
+                    }
+                    else {
+                        // Original simple view (no subagents)
+                        addMessage('system', [
+                            'Trace Summary:',
+                            `  Session ID:    ${data.sessionId}`,
+                            `  Status:        ${data.status}`,
+                            `  Iterations:    ${data.iterations.length}`,
+                            `  Duration:      ${data.durationMs ? `${Math.round(data.durationMs / 1000)}s` : 'ongoing'}`,
+                            '',
+                            'Metrics:',
+                            `  Input tokens:  ${data.metrics.inputTokens.toLocaleString()}`,
+                            `  Output tokens: ${data.metrics.outputTokens.toLocaleString()}`,
+                            `  Cache hit:     ${Math.round(data.metrics.avgCacheHitRate * 100)}%`,
+                            `  Tool calls:    ${data.metrics.toolCalls}`,
+                            `  Errors:        ${data.metrics.errors}`,
+                            `  Est. Cost:     $${data.metrics.estimatedCost.toFixed(4)}`,
+                            '',
+                            'Use: /trace --analyze for efficiency analysis',
+                            '     /trace issues to see detected inefficiencies',
+                        ].join('\n'));
+                    }
                 }
                 else if (args[0] === '--analyze' || args[0] === 'analyze') {
                     if (!traceCollector) {
@@ -1337,7 +1611,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             default:
                 addMessage('system', `Unknown: /${cmd}. Try /help`);
         }
-    }, [addMessage, exit, agent, mcpClient, lspManager, sessionStore, compactor, model, currentThemeName, currentSessionId, formatSessionsTable, saveCheckpointToStore, showThinking]);
+    }, [addMessage, exit, agent, mcpClient, lspManager, sessionStore, compactor, model, currentThemeName, currentSessionId, formatSessionsTable, saveCheckpointToStore, showThinking, persistPendingPlanToStore]);
     // =========================================================================
     // SUBMIT HANDLER
     // =========================================================================
@@ -1345,6 +1619,11 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         const trimmed = input.trim();
         if (!trimmed)
             return;
+        // Add to history (persistent)
+        if (historyManagerRef.current) {
+            historyManagerRef.current.addEntry(trimmed);
+            setHistoryEntries(historyManagerRef.current.getHistory());
+        }
         addMessage('user', trimmed);
         if (trimmed.startsWith('/')) {
             const parts = trimmed.slice(1).split(/\s+/);
@@ -1356,6 +1635,8 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         executionModeRef.current = 'processing';
         setExecutionMode('processing');
         setStatus(s => ({ ...s, mode: 'thinking' }));
+        // Reset CPU time counter for per-prompt resource limits (prevents session-wide timeout)
+        agent.resetResourceTimer();
         try {
             const result = await agent.run(trimmed);
             const metrics = agent.getMetrics();
@@ -1398,6 +1679,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                         plan: checkpoint.state.plan,
                         memoryContext: checkpoint.state.memoryContext,
                     });
+                    persistPendingPlanToStore();
                 }
                 catch (e) {
                     persistenceDebug.error('[TUI] Checkpoint failed', e);
@@ -1413,7 +1695,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             setIsProcessing(false);
             setToolCalls([]);
         }
-    }, [addMessage, handleCommand, agent, sessionStore, saveCheckpointToStore, persistenceDebug]);
+    }, [addMessage, handleCommand, agent, sessionStore, saveCheckpointToStore, persistenceDebug, persistPendingPlanToStore]);
     // =========================================================================
     // COMMAND PALETTE ITEMS
     // =========================================================================
@@ -1423,6 +1705,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         { id: 'clear', label: 'Clear Screen', shortcut: 'Ctrl+L', category: 'General', action: () => { setMessages([]); setToolCalls([]); } },
         { id: 'save', label: 'Save Session', shortcut: '/save', category: 'Sessions', action: () => handleCommand('save', []) },
         { id: 'sessions', label: 'List Sessions', shortcut: '/sessions', category: 'Sessions', action: () => handleCommand('sessions', []) },
+        { id: 'load', label: 'Load Session', shortcut: '/load <id>', category: 'Sessions', action: () => handleCommand('sessions', []) }, // Shows sessions, user types /load <id>
         { id: 'context', label: 'Context Info', shortcut: '/context', category: 'Context', action: () => handleCommand('context', []) },
         { id: 'compact', label: 'Compact Context', shortcut: '/compact', category: 'Context', action: () => handleCommand('compact', []) },
         { id: 'mcp', label: 'MCP Servers', shortcut: '/mcp', category: 'MCP', action: () => handleCommand('mcp', []) },
@@ -1506,8 +1789,33 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     // KEYBOARD CALLBACKS
     // =========================================================================
     const handleCtrlC = useCallback(() => {
-        agent.cleanup().then(() => mcpClient.cleanup()).then(() => lspManager.cleanup()).then(() => exit());
-    }, [agent, mcpClient, lspManager, exit]);
+        // Clear any existing timer
+        if (ctrlCTimerRef.current) {
+            clearTimeout(ctrlCTimerRef.current);
+            ctrlCTimerRef.current = null;
+        }
+        setCtrlCCount(prevCount => {
+            const newCount = prevCount + 1;
+            if (newCount >= 2) {
+                // Second Ctrl+C within timeout window - force exit immediately
+                process.exit(1);
+            }
+            // First Ctrl+C - show warning and start graceful cleanup
+            addMessage('system', '[CTRL+C] Press again within 1s to force exit...');
+            // Start graceful cleanup in background
+            agent.cleanup()
+                .then(() => mcpClient.cleanup())
+                .then(() => lspManager.cleanup())
+                .then(() => exit())
+                .catch(() => exit()); // Exit even if cleanup fails
+            // Reset counter after 1 second
+            ctrlCTimerRef.current = setTimeout(() => {
+                setCtrlCCount(0);
+                ctrlCTimerRef.current = null;
+            }, 1000);
+            return newCount;
+        });
+    }, [agent, mcpClient, lspManager, exit, addMessage]);
     const handleCtrlL = useCallback(() => {
         setMessages([]);
         setToolCalls([]);
@@ -1517,7 +1825,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         setCommandPaletteQuery('');
         setCommandPaletteIndex(0);
     }, []);
-    const handleEscape = useCallback(() => {
+    const handleEscape = useCallback(async () => {
         // Close command palette first if open
         if (commandPaletteOpen) {
             setCommandPaletteOpen(false);
@@ -1527,11 +1835,30 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         }
         // Otherwise cancel processing
         if (isProcessingRef.current) {
+            // Immediate visual feedback
+            addMessage('system', '[ESC] Stopping agent...');
+            // Autosave checkpoint before cancel (async, don't block)
+            try {
+                const agentState = agent.getState();
+                saveCheckpointToStore(sessionStore, {
+                    sessionId: currentSessionId,
+                    reason: 'user_cancel',
+                    messages: agentState.messages,
+                    iteration: agentState.iteration,
+                    timestamp: Date.now(),
+                });
+                persistPendingPlanToStore();
+                persistenceDebug.log('Checkpoint saved before cancel');
+            }
+            catch (e) {
+                persistenceDebug.error('Failed to save checkpoint before cancel', e);
+            }
+            // Cancel the agent
             agent.cancel('Cancelled by ESC');
             setIsProcessing(false);
-            addMessage('system', '[STOP] Cancelled');
+            addMessage('system', '[STOP] Cancelled (checkpoint saved)');
         }
-    }, [agent, addMessage, commandPaletteOpen]);
+    }, [agent, addMessage, commandPaletteOpen, sessionStore, currentSessionId, saveCheckpointToStore, persistenceDebug, persistPendingPlanToStore]);
     const handleToggleToolExpand = useCallback(() => {
         setToolCallsExpanded(prev => {
             addMessage('system', !prev ? '[*] Tool details: expanded' : '[ ] Tool details: collapsed');
@@ -1550,6 +1877,24 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             return !prev;
         });
     }, [addMessage]);
+    const handleToggleActiveAgents = useCallback(() => {
+        setActiveAgentsExpanded(prev => {
+            addMessage('system', !prev ? '[v] Active agents: visible' : '[^] Active agents: hidden');
+            return !prev;
+        });
+    }, [addMessage]);
+    const handleToggleTasks = useCallback(() => {
+        setTasksExpanded(prev => {
+            addMessage('system', !prev ? '[v] Tasks: visible' : '[^] Tasks: hidden');
+            return !prev;
+        });
+    }, [addMessage]);
+    const handleToggleDebug = useCallback(() => {
+        setDebugExpanded(prev => {
+            addMessage('system', !prev ? '[v] Debug panel: visible (Alt+D)' : '[^] Debug panel: hidden');
+            return !prev;
+        });
+    }, [addMessage]);
     // Update context tokens
     useEffect(() => {
         const agentState = agent.getState();
@@ -1591,7 +1936,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                             args: pendingApproval.args || {},
                             risk: pendingApproval.risk,
                             context: pendingApproval.context,
-                        }, onApprove: handleApprove, onDeny: handleDeny, colors: colors, denyReasonMode: denyReasonMode, denyReason: denyReason })), _jsx(MemoizedInputArea, { onSubmit: handleSubmit, disabled: isProcessing || !!pendingApproval, borderColor: pendingApproval ? '#FFD700' : '#87CEEB', textColor: "#98FB98", cursorColor: "#87CEEB", onCtrlC: handleCtrlC, onCtrlL: handleCtrlL, onCtrlP: handleCtrlP, onEscape: handleEscape, onToggleToolExpand: handleToggleToolExpand, onToggleThinking: handleToggleThinking, onToggleTransparency: handleToggleTransparency, commandPaletteOpen: commandPaletteOpen, onCommandPaletteInput: handleCommandPaletteInput, approvalDialogOpen: !!pendingApproval, approvalDenyReasonMode: denyReasonMode, onApprovalApprove: handleApprove, onApprovalAlwaysAllow: handleAlwaysAllow, onApprovalDeny: handleDeny, onApprovalDenyWithReason: handleDenyWithReason, onApprovalCancelDenyReason: handleCancelDenyReason, onApprovalDenyReasonInput: handleApprovalDenyReasonInput }), commandPaletteOpen && (_jsx(ControlledCommandPalette, { theme: selectedTheme, items: filteredCommandItems, visible: commandPaletteOpen, query: commandPaletteQuery, selectedIndex: commandPaletteIndex, onQueryChange: setCommandPaletteQuery, onSelectItem: (item) => {
+                        }, onApprove: handleApprove, onDeny: handleDeny, colors: colors, denyReasonMode: denyReasonMode, denyReason: denyReason })), _jsx(DebugPanel, { entries: debugBuffer.entries, expanded: debugExpanded, colors: colors }), _jsx(TasksPanel, { tasks: tasks, colors: colors, expanded: tasksExpanded }), _jsx(ActiveAgentsPanel, { agents: activeAgents, colors: colors, expanded: activeAgentsExpanded }), _jsx(MemoizedInputArea, { onSubmit: handleSubmit, disabled: isProcessing || !!pendingApproval, borderColor: pendingApproval ? '#FFD700' : '#87CEEB', textColor: "#98FB98", cursorColor: "#87CEEB", onCtrlC: handleCtrlC, onCtrlL: handleCtrlL, onCtrlP: handleCtrlP, onEscape: handleEscape, onToggleToolExpand: handleToggleToolExpand, onToggleThinking: handleToggleThinking, onToggleTransparency: handleToggleTransparency, onToggleActiveAgents: handleToggleActiveAgents, onToggleTasks: handleToggleTasks, onToggleDebug: handleToggleDebug, commandPaletteOpen: commandPaletteOpen, onCommandPaletteInput: handleCommandPaletteInput, approvalDialogOpen: !!pendingApproval, approvalDenyReasonMode: denyReasonMode, onApprovalApprove: handleApprove, onApprovalAlwaysAllow: handleAlwaysAllow, onApprovalDeny: handleDeny, onApprovalDenyWithReason: handleDenyWithReason, onApprovalCancelDenyReason: handleCancelDenyReason, onApprovalDenyReasonInput: handleApprovalDenyReasonInput, history: historyEntries }), commandPaletteOpen && (_jsx(ControlledCommandPalette, { theme: selectedTheme, items: filteredCommandItems, visible: commandPaletteOpen, query: commandPaletteQuery, selectedIndex: commandPaletteIndex, onQueryChange: setCommandPaletteQuery, onSelectItem: (item) => {
                             setCommandPaletteOpen(false);
                             setCommandPaletteQuery('');
                             setCommandPaletteIndex(0);