attocode 0.1.0 → 0.1.3

package/dist/src/tui/app.js

@@ -13,6 +13,40 @@ import { Box, Text, useApp, useInput, Static } from 'ink';
 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 { handleSkillsCommand } from '../commands/skills-commands.js';
+import { handleAgentsCommand } from '../commands/agents-commands.js';
+import { handleInitCommand } from '../commands/init-commands.js';
+// =============================================================================
+// PATTERN GENERATION FOR ALWAYS-ALLOW
+// =============================================================================
+/**
+ * Generates an approval pattern for matching future requests.
+ * Pattern format: `tool:key_argument`
+ *
+ * Matching strategy by tool type:
+ * - bash: match on base command (first 2 tokens, e.g., "npm test")
+ * - file operations: match on file path
+ * - other tools: match on first string argument
+ */
+function generateApprovalPattern(request) {
+    const tool = request.tool || request.action || 'unknown';
+    const args = request.args || {};
+    // Tool-specific key extraction
+    if (tool === 'bash' && typeof args.command === 'string') {
+        // Extract base command: "npm test --coverage" → "npm test"
+        const parts = args.command.trim().split(/\s+/);
+        const baseCmd = parts.slice(0, 2).join(' '); // First 2 tokens
+        return `bash:${baseCmd}`;
+    }
+    if (['write_file', 'edit_file', 'read_file'].includes(tool)) {
+        const path = (args.path || args.file_path || '');
+        return `${tool}:${path}`;
+    }
+    // Default: tool + first string argument
+    const firstStringArg = Object.values(args).find(v => typeof v === 'string');
+    return `${tool}:${firstStringArg || ''}`;
+}
 const MessageItem = memo(function MessageItem({ msg, colors }) {
     const isUser = msg.role === 'user';
     const isAssistant = msg.role === 'assistant';
@@ -84,26 +118,26 @@ const ToolCallItem = memo(function ToolCallItem({ tc, expanded, colors }) {
     }
     return (_jsxs(Box, { marginLeft: 2, gap: 1, children: [_jsx(Text, { color: statusColor, children: icon }), _jsx(Text, { color: "#DDA0DD", bold: true, children: tc.name }), argsStr ? _jsx(Text, { color: colors.textMuted, dimColor: true, children: argsStr }) : null, tc.duration ? _jsxs(Text, { color: colors.textMuted, dimColor: true, children: ["(", tc.duration, "ms)"] }) : null] }));
 });
-const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled, borderColor, textColor, cursorColor, onCtrlC, onCtrlL, onCtrlP, onEscape, onToggleToolExpand, onToggleThinking, onPageUp, onPageDown, onHome, onEnd, commandPaletteOpen, onCommandPaletteInput, approvalDialogOpen, approvalDenyReasonMode, onApprovalApprove, onApprovalDeny, onApprovalDenyWithReason, onApprovalCancelDenyReason, onApprovalDenyReasonInput, }) {
+const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled, borderColor, textColor, cursorColor, onCtrlC, onCtrlL, onCtrlP, onEscape, onToggleToolExpand, onToggleThinking, onToggleTransparency, onPageUp, onPageDown, onHome, onEnd, commandPaletteOpen, onCommandPaletteInput, approvalDialogOpen, approvalDenyReasonMode, onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason, onApprovalCancelDenyReason, onApprovalDenyReasonInput, }) {
     const [value, setValue] = useState('');
     const [cursorPos, setCursorPos] = useState(0);
     // Store callbacks in refs so useInput doesn't re-subscribe on prop changes
     const callbacksRef = useRef({
         onSubmit, onCtrlC, onCtrlL, onCtrlP, onEscape,
-        onToggleToolExpand, onToggleThinking,
+        onToggleToolExpand, onToggleThinking, onToggleTransparency,
         onPageUp, onPageDown, onHome, onEnd,
         commandPaletteOpen, onCommandPaletteInput,
         approvalDialogOpen, approvalDenyReasonMode,
-        onApprovalApprove, onApprovalDeny, onApprovalDenyWithReason,
+        onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason,
         onApprovalCancelDenyReason, onApprovalDenyReasonInput,
     });
     callbacksRef.current = {
         onSubmit, onCtrlC, onCtrlL, onCtrlP, onEscape,
-        onToggleToolExpand, onToggleThinking,
+        onToggleToolExpand, onToggleThinking, onToggleTransparency,
         onPageUp, onPageDown, onHome, onEnd,
         commandPaletteOpen, onCommandPaletteInput,
         approvalDialogOpen, approvalDenyReasonMode,
-        onApprovalApprove, onApprovalDeny, onApprovalDenyWithReason,
+        onApprovalApprove, onApprovalAlwaysAllow, onApprovalDeny, onApprovalDenyWithReason,
         onApprovalCancelDenyReason, onApprovalDenyReasonInput,
     };
     const disabledRef = useRef(disabled);
@@ -137,6 +171,11 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
             cb.onToggleThinking?.();
             return;
         }
+        // Alt+I / Option+I - Toggle transparency panel
+        if (input === '\u00ee' || input === '\u0131' || (key.meta && input === 'i')) {
+            cb.onToggleTransparency?.();
+            return;
+        }
         // Command palette keyboard handling (when open)
         if (cb.commandPaletteOpen && cb.onCommandPaletteInput) {
             cb.onCommandPaletteInput(input, key);
@@ -165,6 +204,10 @@ const MemoizedInputArea = memo(function MemoizedInputArea({ onSubmit, disabled,
                 cb.onApprovalApprove?.();
                 return;
             }
+            if (input === 'a' || input === 'A') {
+                cb.onApprovalAlwaysAllow?.();
+                return;
+            }
             if (input === 'n' || input === 'N') {
                 cb.onApprovalDeny?.();
                 return;
@@ -264,6 +307,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     // Display toggles
     const [toolCallsExpanded, setToolCallsExpanded] = useState(false);
     const [showThinking, setShowThinking] = useState(true);
+    const [transparencyExpanded, setTransparencyExpanded] = useState(false);
     // Command palette state
     const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
     const [commandPaletteQuery, setCommandPaletteQuery] = useState('');
@@ -272,6 +316,11 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     const [pendingApproval, setPendingApproval] = useState(null);
     const [denyReasonMode, setDenyReasonMode] = useState(false);
     const [denyReason, setDenyReason] = useState('');
+    // Session-scoped always-allowed patterns (e.g., "bash:npm test", "write_file:/path")
+    const [alwaysAllowed, setAlwaysAllowed] = useState(new Set());
+    // Transparency state
+    const [transparencyState, setTransparencyState] = useState(null);
+    const transparencyAggregatorRef = useRef(null);
     // Refs for stable callbacks
     const isProcessingRef = useRef(isProcessing);
     const messagesLengthRef = useRef(messages.length);
@@ -292,10 +341,18 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     // =========================================================================
     // Handle approval request from bridge
     const handleApprovalRequest = useCallback((request) => {
+        // Check if this matches an always-allowed pattern
+        const pattern = generateApprovalPattern(request);
+        if (alwaysAllowed.has(pattern)) {
+            // Auto-approve without showing dialog
+            approvalBridge?.resolve({ approved: true });
+            return;
+        }
+        // Show dialog as normal
         setPendingApproval(request);
         setDenyReasonMode(false);
         setDenyReason('');
-    }, []);
+    }, [alwaysAllowed, approvalBridge]);
     // Approve the pending request
     const handleApprove = useCallback(() => {
         if (approvalBridge && pendingApprovalRef.current) {
@@ -314,6 +371,17 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             setDenyReason('');
         }
     }, [approvalBridge]);
+    // Always allow this pattern for the rest of the session
+    const handleAlwaysAllow = useCallback(() => {
+        if (approvalBridge && pendingApprovalRef.current) {
+            const pattern = generateApprovalPattern(pendingApprovalRef.current);
+            setAlwaysAllowed(prev => new Set(prev).add(pattern));
+            approvalBridge.resolve({ approved: true });
+            setPendingApproval(null);
+            setDenyReasonMode(false);
+            setDenyReason('');
+        }
+    }, [approvalBridge]);
     // Enter deny with reason mode
     const handleDenyWithReason = useCallback(() => {
         setDenyReasonMode(true);
@@ -332,6 +400,23 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             });
         }
     }, [approvalBridge, handleApprovalRequest]);
+    // 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);
+        });
+        return () => {
+            unsubscribeAggregator();
+            unsubscribeAgent();
+        };
+    }, [agent]);
     // =========================================================================
     // COMMAND HANDLER
     // =========================================================================
@@ -400,10 +485,18 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     '  /mcp tools        List MCP tools',
                     '  /mcp search <q>   Search & load tools',
                     '',
-                    '> SUBAGENTS',
-                    '  /agents           List available agents',
+                    '> SKILLS & AGENTS',
+                    '  /skills           List all skills',
+                    '  /skills new <n>   Create new skill',
+                    '  /skills info <n>  Show skill details',
+                    '  /agents           List all agents',
+                    '  /agents new <n>   Create new agent',
+                    '  /agents info <n>  Show agent details',
                     '  /spawn <a> <task> Run agent with task',
                     '',
+                    '> INITIALIZATION',
+                    '  /init             Setup .attocode/ directory',
+                    '',
                     '> PLAN MODE',
                     '  /mode             Show current mode',
                     '  /plan             Toggle plan mode',
@@ -417,6 +510,7 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                     '  Ctrl+P      Help',
                     '  Alt+T       Toggle tool details',
                     '  Alt+O       Toggle thinking',
+                    '  Alt+I       Toggle transparency panel',
                     '========================',
                 ].join('\n'));
                 return;
@@ -764,16 +858,81 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             case 'model':
                 addMessage('system', `Model: ${model || 'auto'}\nRestart to change.`);
                 return;
+            // Skills commands
+            case 'skills': {
+                const skillManager = agent.getSkillManager();
+                if (skillManager) {
+                    // Create output adapter for TUI
+                    const tuiOutput = {
+                        log: (msg) => addMessage('system', msg),
+                        error: (msg) => addMessage('error', msg),
+                        clear: () => setMessages([]),
+                    };
+                    const ctx = {
+                        agent,
+                        sessionId: currentSessionId,
+                        output: tuiOutput,
+                        integrations: {
+                            sessionStore,
+                            mcpClient,
+                            compactor,
+                            skillManager,
+                        },
+                    };
+                    await handleSkillsCommand(args, ctx, skillManager);
+                }
+                else {
+                    addMessage('system', 'Skills not enabled');
+                }
+                return;
+            }
+            // Init command
+            case 'init': {
+                const tuiOutput = {
+                    log: (msg) => addMessage('system', msg),
+                    error: (msg) => addMessage('error', msg),
+                    clear: () => setMessages([]),
+                };
+                const ctx = {
+                    agent,
+                    sessionId: currentSessionId,
+                    output: tuiOutput,
+                    integrations: {
+                        sessionStore,
+                        mcpClient,
+                        compactor,
+                    },
+                };
+                await handleInitCommand(args, ctx);
+                return;
+            }
             // Subagent commands
-            case 'agents':
-                try {
-                    const agentList = agent.formatAgentList();
-                    addMessage('system', `Available Agents:\n${agentList}`);
+            case 'agents': {
+                const agentRegistry = agent.getAgentRegistry();
+                if (agentRegistry) {
+                    const tuiOutput = {
+                        log: (msg) => addMessage('system', msg),
+                        error: (msg) => addMessage('error', msg),
+                        clear: () => setMessages([]),
+                    };
+                    const ctx = {
+                        agent,
+                        sessionId: currentSessionId,
+                        output: tuiOutput,
+                        integrations: {
+                            sessionStore,
+                            mcpClient,
+                            compactor,
+                            agentRegistry,
+                        },
+                    };
+                    await handleAgentsCommand(args, ctx, agentRegistry);
                 }
-                catch (e) {
-                    addMessage('error', e.message);
+                else {
+                    addMessage('system', 'Agents not enabled');
                 }
                 return;
+            }
             case 'spawn':
                 if (args.length < 2) {
                     addMessage('system', 'Usage: /spawn <agent-name> <task>');
@@ -813,19 +972,31 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
         setIsProcessing(true);
         setStatus(s => ({ ...s, mode: 'thinking' }));
         const unsub = agent.subscribe((event) => {
-            if (event.type === 'tool.start') {
-                setStatus(s => ({ ...s, mode: `calling ${event.tool}` }));
+            // Check if event is from a subagent
+            const subagentPrefix = event.subagent ? `[${event.subagent}] ` : '';
+            if (event.type === 'agent.spawn') {
+                // A subagent is starting
+                addMessage('system', `[AGENT] Spawning ${event.name}: ${event.task.slice(0, 100)}${event.task.length > 100 ? '...' : ''}`);
+            }
+            else if (event.type === 'agent.complete') {
+                // A subagent finished
+                addMessage('system', `[AGENT] ${event.agentId} ${event.success ? 'completed' : 'failed'}`);
+            }
+            else if (event.type === 'tool.start') {
+                const displayName = event.subagent ? `${event.subagent}:${event.tool}` : event.tool;
+                setStatus(s => ({ ...s, mode: `calling ${displayName}` }));
                 setToolCalls(prev => [...prev.slice(-4), {
-                        id: `${event.tool}-${Date.now()}`,
-                        name: event.tool,
+                        id: `${displayName}-${Date.now()}`,
+                        name: displayName,
                         args: event.args || {},
                         status: 'running',
                         startTime: new Date(),
                     }]);
             }
             else if (event.type === 'tool.complete') {
-                setStatus(s => ({ ...s, mode: 'thinking' }));
-                setToolCalls(prev => prev.map(t => t.name === event.tool ? {
+                const displayName = event.subagent ? `${event.subagent}:${event.tool}` : event.tool;
+                setStatus(s => ({ ...s, mode: event.subagent ? `${event.subagent} thinking` : 'thinking' }));
+                setToolCalls(prev => prev.map(t => t.name === displayName ? {
                     ...t,
                     status: 'success',
                     result: event.result,
@@ -833,18 +1004,19 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
                 } : t));
             }
             else if (event.type === 'tool.blocked') {
-                setToolCalls(prev => prev.map(t => t.name === event.tool ? {
+                const displayName = event.subagent ? `${event.subagent}:${event.tool}` : event.tool;
+                setToolCalls(prev => prev.map(t => t.name === displayName ? {
                     ...t,
                     status: 'error',
                     error: event.reason || 'Blocked',
                 } : t));
             }
             else if (event.type === 'llm.start') {
-                setStatus(s => ({ ...s, mode: 'thinking', iter: s.iter + 1 }));
+                setStatus(s => ({ ...s, mode: event.subagent ? `${event.subagent} thinking` : 'thinking', iter: s.iter + 1 }));
             }
             else if (event.type === 'insight.tokens' && showThinking) {
                 const e = event;
-                addMessage('system', `* ${e.inputTokens.toLocaleString()} in, ${e.outputTokens.toLocaleString()} out${e.cost ? ` $${e.cost.toFixed(6)}` : ''}`);
+                addMessage('system', `${subagentPrefix}* ${e.inputTokens.toLocaleString()} in, ${e.outputTokens.toLocaleString()} out${e.cost ? ` $${e.cost.toFixed(6)}` : ''}`);
             }
             else if (event.type === 'plan.change.queued') {
                 addMessage('system', `[PLAN] Queued: ${event.tool}`);
@@ -855,13 +1027,25 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             const metrics = agent.getMetrics();
             const modeInfo = agent.getModeInfo();
             setStatus({ iter: metrics.llmCalls, tokens: metrics.totalTokens, cost: metrics.estimatedCost, mode: modeInfo.name === 'Plan' ? 'ready (plan)' : 'ready' });
+            // Calculate current context size (what's actually in the window now)
+            const agentState = agent.getState();
+            const estimateTokens = (str) => Math.ceil(str.length / 3.2);
+            const currentContextTokens = agentState.messages.reduce((sum, m) => sum + estimateTokens(typeof m.content === 'string' ? m.content : JSON.stringify(m.content)), 0);
+            const contextLimit = 80000;
+            const contextPct = Math.round((currentContextTokens / contextLimit) * 100);
             const durationSec = (metrics.duration / 1000).toFixed(1);
-            const metricsLine = `\n---\n${metrics.inputTokens.toLocaleString()} in | ${metrics.outputTokens.toLocaleString()} out | ${metrics.toolCalls} tools | ${durationSec}s`;
+            // 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 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()) {
                 const plan = agent.getPendingPlan();
                 if (plan) {
-                    const planSummary = `\n[PLAN] ${plan.proposedChanges.length} change(s) queued\n/show-plan | /approve | /reject`;
-                    addMessage('assistant', (result.response || 'Changes queued.') + planSummary + metricsLine);
+                    // Auto-show the full plan instead of just a count
+                    const fullPlan = agent.formatPendingPlan();
+                    addMessage('assistant', (result.response || 'Planning complete.') + metricsLine);
+                    addMessage('system', fullPlan);
                 }
             }
             else {
@@ -1025,6 +1209,12 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
             return !prev;
         });
     }, [addMessage]);
+    const handleToggleTransparency = useCallback(() => {
+        setTransparencyExpanded(prev => {
+            addMessage('system', !prev ? '[v] Transparency panel: visible' : '[^] Transparency panel: hidden');
+            return !prev;
+        });
+    }, [addMessage]);
     // Update context tokens
     useEffect(() => {
         const agentState = agent.getState();
@@ -1055,13 +1245,18 @@ export function TUIApp({ agent, sessionStore, mcpClient, compactor, lspManager,
     // =========================================================================
     // 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}`)))] })), pendingApproval && (_jsx(ApprovalDialog, { visible: true, request: {
+    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(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, commandPaletteOpen: commandPaletteOpen, onCommandPaletteInput: handleCommandPaletteInput, approvalDialogOpen: !!pendingApproval, approvalDenyReasonMode: denyReasonMode, onApprovalApprove: handleApprove, onApprovalDeny: handleDeny, onApprovalDenyWithReason: handleDenyWithReason, onApprovalCancelDenyReason: handleCancelDenyReason, onApprovalDenyReasonInput: handleApprovalDenyReasonInput }), commandPaletteOpen && (_jsx(ControlledCommandPalette, { theme: selectedTheme, items: filteredCommandItems, visible: commandPaletteOpen, query: commandPaletteQuery, selectedIndex: commandPaletteIndex, onQueryChange: setCommandPaletteQuery, onSelectItem: (item) => {
+                        }, onApprove: handleApprove, onDeny: handleDeny, colors: colors, denyReasonMode: denyReasonMode, denyReason: denyReason })), _jsx(MemoizedInputArea, { onSubmit: handleSubmit, disabled: isProcessing || !!pendingApproval, borderColor: pendingApproval ? '#FFD700' : '#87CEEB', textColor: "#98FB98", cursorColor: "#87CEEB", onCtrlC: handleCtrlC, onCtrlL: handleCtrlL, onCtrlP: handleCtrlP, onEscape: handleEscape, onToggleToolExpand: handleToggleToolExpand, onToggleThinking: handleToggleThinking, onToggleTransparency: handleToggleTransparency, commandPaletteOpen: commandPaletteOpen, onCommandPaletteInput: handleCommandPaletteInput, approvalDialogOpen: !!pendingApproval, approvalDenyReasonMode: denyReasonMode, onApprovalApprove: handleApprove, onApprovalAlwaysAllow: handleAlwaysAllow, onApprovalDeny: handleDeny, onApprovalDenyWithReason: handleDenyWithReason, onApprovalCancelDenyReason: handleCancelDenyReason, onApprovalDenyReasonInput: handleApprovalDenyReasonInput }), commandPaletteOpen && (_jsx(ControlledCommandPalette, { theme: selectedTheme, items: filteredCommandItems, visible: commandPaletteOpen, query: commandPaletteQuery, selectedIndex: commandPaletteIndex, onQueryChange: setCommandPaletteQuery, onSelectItem: (item) => {
                             setCommandPaletteOpen(false);
                             setCommandPaletteQuery('');
                             setCommandPaletteIndex(0);
@@ -1070,7 +1265,9 @@ 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: `${(contextTokens / 1000).toFixed(1)}k` }), _jsx(Text, { color: "#98FB98", dimColor: true, children: costStr }), gitBranch && _jsx(Text, { color: "#87CEEB", dimColor: true, children: gitBranch }), _jsx(Text, { color: colors.textMuted, dimColor: true, children: "ESC:cancel ^P:help" })] })] })] })] }));
+                        } })), _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: '[' + '='.repeat(Math.min(8, Math.round((contextPct / 100) * 8))) +
+                                            '-'.repeat(Math.max(0, 8 - Math.round((contextPct / 100) * 8))) + '] ' +
+                                            contextPct + '%' }), _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] })), _jsx(Text, { color: colors.textMuted, dimColor: true, children: "^P:help" })] })] })] })] }));
 }
 export default TUIApp;
 //# sourceMappingURL=app.js.map