@bluehawks/cli 1.0.36 → 1.0.38

package/src/cli/app.tsx

@@ -3,88 +3,18 @@
  */
 
 import React, { useState, useCallback, useEffect } from 'react';
-import { Text, Box, useInput, useApp } from 'ink';
-import Spinner from 'ink-spinner';
-import TextInput from 'ink-text-input';
+import { useInput, useApp } from 'ink';
 import { APIClient } from '../core/api/client.js';
 import { Orchestrator } from '../core/agents/orchestrator.js';
 import { ToolExecutor, toolRegistry, registerAllTools } from '../core/tools/index.js';
 import { SessionManager } from '../core/session/manager.js';
 import { commandRegistry, type CommandContext } from './commands/index.js';
-import { CLI_NAME, CLI_VERSION, COLORS } from '../config/constants.js';
 import { hooksManager } from '../core/hooks/index.js';
 import type { SessionStartInput, StopInput } from '../core/hooks/types.js';
-import * as path from 'path';
-import * as os from 'os';
-
-// UI Components
-const Branding = () => (
-    <Box flexDirection="column" marginY={1}>
-        <Text color="#3B82F6">{"██████╗ ██╗     ██╗   ██╗███████╗██╗  ██╗ █████╗ ██╗    ██╗██╗  ██╗███████╗"}</Text>
-        <Text color="#6366F1">{"██╔══██╗██║     ██║   ██║██╔════╝██║  ██║██╔══██╗██║    ██║██║ ██╔╝██╔════╝"}</Text>
-        <Text color="#8B5CF6">{"██████╔╝██║     ██║   ██║█████╗  ███████║███████║██║ █╗ ██║█████╔╝ ███████╗"}</Text>
-        <Text color="#A855F7">{"██╔══██╗██║     ██║   ██║██╔══╝  ██╔══██║██╔══██║██║███╗██║██╔═██╗ ╚════██║"}</Text>
-        <Text color="#D946EF">{"██████╔╝███████╗╚██████╔╝███████╗██║  ██║██║  ██║╚███╔███╔╝██║  ██╗███████║"}</Text>
-        <Text color="#EC4899">{"╚═════╝ ╚══════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚══╝╚══╝ ╚═╝  ╚═╝╚══════╝"}</Text>
-    </Box>
-);
-
-const HeaderBox: React.FC<{ version: string; model: string; projectPath: string }> = ({ version, model, projectPath }) => {
-    const relativePath = projectPath.startsWith(os.homedir())
-        ? '~/' + path.relative(os.homedir(), projectPath)
-        : projectPath;
 
-    return (
-        <Box borderStyle="round" borderColor="#3B82F6" paddingX={2} paddingY={0} width={80} marginBottom={1}>
-            <Box flexDirection="column">
-                <Box>
-                    <Text bold color="#3B82F6">{">_ "}{CLI_NAME} </Text>
-                    <Text color="gray">(v{version})</Text>
-                </Box>
-                <Box marginTop={0}>
-                    <Text color="gray">Model: </Text>
-                    <Text color="white">{model}</Text>
-                </Box>
-                <Box>
-                    <Text color="gray">Path:  </Text>
-                    <Text color="white">{relativePath}</Text>
-                </Box>
-            </Box>
-        </Box>
-    );
-};
-
-const Tips = () => {
-    const tipsList = [
-        "Start a fresh idea with /clear or /new; the previous session stays available in history.",
-        "Use /yolo to auto-approve all tool executions for maximum speed.",
-        "Need help? Type /help to see all available commands and shortcuts.",
-        "Bluehawks can read your codebase, run tests, and even commit changes.",
-        "Working on a specific repository? Bluehawks understands your local context automatically."
-    ];
-    const [tip] = useState(() => tipsList[Math.floor(Math.random() * tipsList.length)]);
-
-    return (
-        <Box marginTop={1} marginBottom={1}>
-            <Text color="gray">Tips: {tip}</Text>
-        </Box>
-    );
-};
-
-const StatusBar: React.FC<{ isYoloMode: boolean }> = ({ isYoloMode }) => (
-    <Box marginTop={1} paddingX={1} borderStyle="single" borderTop={true} borderBottom={false} borderLeft={false} borderRight={false} borderColor="gray">
-        <Box flexGrow={1}>
-            <Text color="gray">Type </Text>
-            <Text color="cyan" bold>/help</Text>
-            <Text color="gray"> for commands. </Text>
-        </Box>
-        {isYoloMode && (
-            <Box>
-                <Text color="#F59E0B" bold>⚡ YOLO MODE ACTIVE </Text>
-            </Box>
-        )}
-    </Box>
-);
+// UI Components & Types
+import { Layout } from './components/Layout.js';
+import { SystemEvent, ToolActivity } from './components/types.js';
 
 interface AppProps {
     initialPrompt?: string;
@@ -102,6 +32,8 @@ interface MessageDisplay {
 export const App: React.FC<AppProps> = ({ initialPrompt, apiKey, yoloMode = false, onExit }) => {
     const { exit } = useApp();
     const exitCalledRef = React.useRef(false);
+
+    // Core State
     const [input, setInput] = useState('');
     const [messages, setMessages] = useState<MessageDisplay[]>([]);
     const [isProcessing, setIsProcessing] = useState(false);
@@ -114,7 +46,35 @@ export const App: React.FC<AppProps> = ({ initialPrompt, apiKey, yoloMode = fals
     } | null>(null);
     const [isYoloMode, setIsYoloMode] = useState(yoloMode);
 
-    // Initialize components
+    // Dashboard State
+    const [systemEvents, setSystemEvents] = useState<SystemEvent[]>([]);
+    const [toolHistory, setToolHistory] = useState<ToolActivity[]>([]);
+    const [tps, setTps] = useState(0);
+    const [contextUsage, setContextUsage] = useState(0);
+    const [totalTokens, setTotalTokens] = useState(0);
+
+    // Initialize Helpers
+    const addSystemEvent = useCallback((message: string, type: SystemEvent['type'] = 'info') => {
+        const event: SystemEvent = {
+            id: Math.random().toString(36).substring(7),
+            timestamp: new Date().toISOString(),
+            message,
+            type,
+        };
+        setSystemEvents(prev => [...prev, event]);
+    }, []);
+
+    const addToolActivity = useCallback((toolName: string, status: ToolActivity['status']) => {
+        const activity: ToolActivity = {
+            id: Math.random().toString(36).substring(7),
+            toolName,
+            status,
+            timestamp: Date.now(),
+        };
+        setToolHistory(prev => [...prev.slice(-24), activity]); // Keep last 25
+    }, []);
+
+    // Initialize Managers
     const [apiClient] = useState(() => new APIClient({ apiKey }));
     const [toolExecutor] = useState(() => {
         const executor = new ToolExecutor({
@@ -134,38 +94,46 @@ export const App: React.FC<AppProps> = ({ initialPrompt, apiKey, yoloMode = fals
         () => new SessionManager(process.cwd(), apiClient.currentModel)
     );
 
-    // Set up approval handler and lifecycle hooks
+    // Lifecycle: Init & System Events
     useEffect(() => {
-        toolExecutor.setApprovalHandler(async (toolName, args) => {
-            if (isYoloMode) return true;
+        addSystemEvent('System initialized. Neural interface active.', 'success');
 
+        // Initialize approval handler
+        toolExecutor.setApprovalHandler(async (toolName, args) => {
+            if (isYoloMode) {
+                addSystemEvent(`Auto-approving tool: ${toolName}`, 'warning');
+                return true;
+            }
+            addSystemEvent(`Requesting approval for: ${toolName}`, 'warning');
             return new Promise<boolean>((resolve) => {
                 setPendingApproval({ toolName, args, resolve });
             });
         });
 
-        // Initialize orchestrator and trigger SessionStart hook
-        orchestrator.initialize().then(async () => {
-            const hookContext: SessionStartInput = {
-                sessionId: sessionManager.getSessionId(),
-                projectPath: process.cwd(),
-                model: apiClient.currentModel,
-                timestamp: new Date().toISOString(),
-                cwd: process.cwd(),
-            };
-            await hooksManager.execute('SessionStart', hookContext);
-        }).catch((err) => {
-            setMessages((prev) => [...prev, { role: 'error', content: `Init error: ${err}` }]);
-        });
+        const init = async () => {
+            try {
+                const hookContext: SessionStartInput = {
+                    sessionId: sessionManager.getSessionId(),
+                    projectPath: process.cwd(),
+                    model: apiClient.currentModel,
+                    timestamp: new Date().toISOString(),
+                    cwd: process.cwd(),
+                };
+                await hooksManager.execute('SessionStart', hookContext);
+                addSystemEvent(`Session started: ${sessionManager.getSessionId()}`, 'info');
+            } catch (err) {
+                const appId = String(err);
+                addSystemEvent(`Init Error: ${appId}`, 'error');
+            }
+        };
+        init();
 
-        // Cleanup: trigger Stop hook and auto-save session on exit
         return () => {
             if (!exitCalledRef.current && onExit) {
                 exitCalledRef.current = true;
                 const stats = sessionManager.getStats();
                 onExit(stats, sessionManager.getSessionId());
             }
-
             const cleanup = async () => {
                 const stats = sessionManager.getStats();
                 const stopContext: StopInput = {
@@ -181,126 +149,157 @@ export const App: React.FC<AppProps> = ({ initialPrompt, apiKey, yoloMode = fals
             };
             cleanup().catch(console.error);
         };
-    }, [toolExecutor, isYoloMode, orchestrator, sessionManager, apiClient, onExit]);
+    }, [toolExecutor, isYoloMode, orchestrator, sessionManager, apiClient, onExit, addSystemEvent]);
 
-    // Handle initial prompt
+    // TPS Simulation (Mock for now, can be real later)
     useEffect(() => {
-        if (initialPrompt) {
-            handleSubmit(initialPrompt);
+        let interval: NodeJS.Timeout;
+        if (isProcessing) {
+            interval = setInterval(() => {
+                setTps(Math.random() * 15 + 30); // Random 30-45 t/s
+            }, 500);
+        } else {
+            setTps(0);
         }
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [isProcessing]);
+
+    // Initial Prompt
+    useEffect(() => {
+        if (initialPrompt) handleSubmit(initialPrompt);
     }, []);
 
-    const handleSubmit = useCallback(
-        async (value: string) => {
-            const trimmed = value.trim();
-            if (!trimmed || isProcessing) return;
-
-            // Check for slash commands
-            if (commandRegistry.isCommand(trimmed)) {
-                const context: CommandContext = {
-                    sessionManager,
-                    orchestrator,
-                    toolRegistry,
-                    onExit: () => {
-                        if (!exitCalledRef.current && onExit) {
-                            exitCalledRef.current = true;
-                            const stats = sessionManager.getStats();
-                            onExit(stats, sessionManager.getSessionId());
+    // Main Handler
+    const handleSubmit = useCallback(async (value: string) => {
+        const trimmed = value.trim();
+        if (!trimmed || isProcessing) return;
+
+        // Commands
+        if (commandRegistry.isCommand(trimmed)) {
+            addSystemEvent(`Executing command: ${trimmed}`, 'info');
+            const context: CommandContext = {
+                sessionManager,
+                orchestrator,
+                toolRegistry,
+                onExit: () => {
+                    if (!exitCalledRef.current && onExit) {
+                        exitCalledRef.current = true;
+                        const stats = sessionManager.getStats();
+                        onExit(stats, sessionManager.getSessionId());
+                    }
+                    exit();
+                },
+            };
+            const result = await commandRegistry.execute(trimmed, context);
+            if (result) {
+                setMessages((prev) => [...prev, { role: 'system', content: result }]);
+            }
+            setInput('');
+            return;
+        }
+
+        // Yolo Toggle
+        if (trimmed.toLowerCase() === '/yolo') {
+            setIsYoloMode((prev) => {
+                const newValue = !prev;
+                toolExecutor.setApprovalMode(newValue ? 'never' : 'unsafe-only');
+                addSystemEvent(`YOLO Mode ${newValue ? 'ENABLED' : 'DISABLED'}`, newValue ? 'warning' : 'info');
+                return newValue;
+            });
+            setInput('');
+            return;
+        }
+
+        // Chat Loop
+        setMessages((prev) => [...prev, { role: 'user', content: trimmed }]);
+        setInput('');
+        setIsProcessing(true);
+        setStreamingContent('');
+        addSystemEvent('Processing user intput...', 'info');
+
+        let thinkBuffer = '';
+        let inThinkBlock = false;
+
+        try {
+            const response = await orchestrator.chat(trimmed, [], {
+                onChunk: (chunk) => {
+                    // Think Tag Filtering
+                    const fullText = thinkBuffer + chunk;
+                    thinkBuffer = '';
+                    let output = '';
+                    let i = 0;
+                    while (i < fullText.length) {
+                        if (!inThinkBlock) {
+                            const thinkStart = fullText.indexOf('<think>', i);
+                            if (thinkStart === -1) {
+                                output += fullText.substring(i);
+                                break;
+                            } else {
+                                output += fullText.substring(i, thinkStart);
+                                inThinkBlock = true;
+                                i = thinkStart + 7;
+                            }
+                        } else {
+                            const thinkEnd = fullText.indexOf('</think>', i);
+                            if (thinkEnd === -1) {
+                                thinkBuffer = fullText.substring(i);
+                                break;
+                            } else {
+                                inThinkBlock = false;
+                                i = thinkEnd + 8;
+                            }
                         }
-                        exit();
-                    },
-                };
+                    }
+                    if (output) setStreamingContent((prev) => prev + output);
+                },
+                onToolStart: (name: string, args?: any) => {
+                    setCurrentTool(name);
+                    setMessages(prev => [...prev, { role: 'tool', content: JSON.stringify({ type: 'tool_start', name, args }) }]);
+                    addToolActivity(name, 'running');
+                    addSystemEvent(`Tool Start: ${name}`, 'info');
+                },
+                onToolEnd: (name, result) => {
+                    setCurrentTool(null);
+                    setMessages(prev => [...prev, { role: 'tool', content: JSON.stringify({ type: 'tool_end', name, result }) }]);
+                    addToolActivity(name, 'success'); // Assume success for visualization
+                    addSystemEvent(`Tool Finished: ${name}`, 'success');
+                }
+            });
 
-                const result = await commandRegistry.execute(trimmed, context);
-                if (result) {
-                    setMessages((prev) => [...prev, { role: 'system', content: result }]);
+            // Finalize
+            if (response.content) {
+                const cleanContent = response.content.replace(/<think>[\s\S]*?<\/think>/g, '').trim();
+                if (cleanContent) {
+                    setMessages((prev) => [...prev, { role: 'assistant', content: cleanContent }]);
                 }
-                setInput('');
-                return;
             }
 
-            // Check for YOLO toggle
-            if (trimmed.toLowerCase() === '/yolo') {
-                setIsYoloMode((prev) => {
-                    const newValue = !prev;
-                    toolExecutor.setApprovalMode(newValue ? 'never' : 'unsafe-only');
-                    setMessages((prev) => [
-                        ...prev,
-                        {
-                            role: 'system',
-                            content: newValue
-                                ? '⚡ YOLO mode enabled.'
-                                : '🛡️ YOLO mode disabled.',
-                        },
-                    ]);
-                    return newValue;
-                });
-                setInput('');
-                return;
-            }
+            // Update Session & Stats
+            const cleanContent = response.content ? response.content.replace(/<think>[\s\S]*?<\/think>/g, '').trim() : '';
+            sessionManager.addMessage({ role: 'user', content: trimmed });
+            if (cleanContent) sessionManager.addMessage({ role: 'assistant', content: cleanContent });
 
-            // Add user message
-            setMessages((prev) => [...prev, { role: 'user', content: trimmed }]);
-            setInput('');
-            setIsProcessing(true);
-            setStreamingContent('');
+            // Simulating Token Counts for visualization
+            if (response.usage) {
+                setTotalTokens(prev => prev + response.usage.total_tokens);
+                setContextUsage(Math.min(1, (response.usage.total_tokens / 128000))); // Usage vs 128k context
+            }
 
-            try {
-                const response = await orchestrator.chat(trimmed, [], {
-                    onChunk: (chunk) => {
-                        setStreamingContent((prev) => prev + chunk);
-                    },
-                    onToolStart: (name, args?: Record<string, unknown>) => {
-                        setCurrentTool(name);
-                        setMessages((prev) => [
-                            ...prev,
-                            {
-                                role: 'tool',
-                                content: JSON.stringify({ type: 'tool_start', name, args })
-                            },
-                        ]);
-                    },
-                    onToolEnd: (name, result) => {
-                        setCurrentTool(null);
-                        setMessages((prev) => [
-                            ...prev,
-                            {
-                                role: 'tool',
-                                content: JSON.stringify({ type: 'tool_end', name, result })
-                            },
-                        ]);
-                    },
-                });
-
-                // Add final response
-                if (response.content) {
-                    setMessages((prev) => [...prev, { role: 'assistant', content: response.content }]);
-                }
+            addSystemEvent('Response received.', 'success');
 
-                // Update session
-                sessionManager.addMessage({ role: 'user', content: trimmed });
-                sessionManager.addMessage({ role: 'assistant', content: response.content });
-                response.toolsUsed.forEach((tool) => sessionManager.addToolUsed(tool));
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            setMessages((prev) => [...prev, { role: 'error', content: `Error: ${errorMessage}` }]);
+            addSystemEvent(`Error: ${errorMessage}`, 'error');
+        } finally {
+            setIsProcessing(false);
+            setStreamingContent('');
+            setCurrentTool(null);
+        }
 
-                // Record metrics
-                sessionManager.addApiTime(response.apiTime);
-                sessionManager.addToolTime(response.toolTime);
-                if (response.usage) {
-                    sessionManager.addUsage(apiClient.currentModel, response.usage);
-                }
-                for (let i = 0; i < response.successfulToolCalls; i++) sessionManager.recordToolCall(true);
-                for (let i = 0; i < response.failedToolCalls; i++) sessionManager.recordToolCall(false);
-            } catch (error) {
-                const errorMessage = error instanceof Error ? error.message : String(error);
-                setMessages((prev) => [...prev, { role: 'error', content: `Error: ${errorMessage}` }]);
-            } finally {
-                setIsProcessing(false);
-                setStreamingContent('');
-                setCurrentTool(null);
-            }
-        },
-        [isProcessing, orchestrator, sessionManager, exit, toolExecutor, isYoloMode]
-    );
+    }, [isProcessing, orchestrator, sessionManager, exit, toolExecutor, isYoloMode, addSystemEvent, addToolActivity]);
 
     // Handle approval input
     useInput(
@@ -309,180 +308,38 @@ export const App: React.FC<AppProps> = ({ initialPrompt, apiKey, yoloMode = fals
                 if (input.toLowerCase() === 'y' || key.return) {
                     pendingApproval.resolve(true);
                     setPendingApproval(null);
+                    addSystemEvent('Action Approved by User', 'success');
                 } else if (input.toLowerCase() === 'n' || key.escape) {
                     pendingApproval.resolve(false);
                     setPendingApproval(null);
+                    addSystemEvent('Action Denied by User', 'error');
                 }
             }
         },
         { isActive: pendingApproval !== null }
     );
 
-    const getRoleColor = (role: MessageDisplay['role']): string => {
-        switch (role) {
-            case 'user':
-                return COLORS.primary;
-            case 'assistant':
-                return COLORS.success;
-            case 'tool':
-                return COLORS.info;
-            case 'system':
-                return COLORS.warning;
-            case 'error':
-                return COLORS.error;
-            default:
-                return COLORS.muted;
-        }
-    };
-
     return (
-        <Box flexDirection="column" paddingX={2} paddingY={1}>
-            {/* Branding & Header */}
-            <Box flexDirection="row" alignItems="center" marginBottom={1}>
-                <Branding />
-                <Box marginLeft={4}>
-                    <HeaderBox
-                        version={CLI_VERSION}
-                        model={apiClient.currentModel}
-                        projectPath={process.cwd()}
-                    />
-                </Box>
-            </Box>
-
-            {/* Tips only shown on start */}
-            {messages.length === 0 && <Tips />}
-
-            {/* Messages */}
-            <Box flexDirection="column" flexGrow={1} marginBottom={1}>
-                {messages.slice(-30).map((msg, i) => {
-                    // Custom rendering for Tool messages (Boxed UI)
-                    if (msg.role === 'tool') {
-                        try {
-                            const content = JSON.parse(msg.content);
-                            if (content.type === 'tool_start') {
-                                // Smart JSON formatting: one line if short, indented if long
-                                const jsonStr = JSON.stringify(content.args);
-                                const displayArgs = jsonStr.length < 80 ? jsonStr : JSON.stringify(content.args, null, 2);
-
-                                return (
-                                    <Box key={i} flexDirection="column" borderStyle="round" borderColor="magenta" paddingX={1} marginY={0} marginBottom={1} alignSelf="flex-start">
-                                        <Box>
-                                            <Text color="magenta" bold>⚡ TOOL CALL: </Text>
-                                            <Text color="white" bold>{content.name}</Text>
-                                        </Box>
-                                        <Box marginLeft={1}>
-                                            <Text color="gray">{displayArgs}</Text>
-                                        </Box>
-                                    </Box>
-                                );
-                            } else if (content.type === 'tool_end') {
-                                return (
-                                    <Box key={i} flexDirection="column" borderStyle="round" borderColor="green" paddingX={1} marginBottom={1} alignSelf="flex-start">
-                                        <Box>
-                                            <Text color="green" bold>✅ TOOL RESULT: </Text>
-                                            <Text color="white" bold>{content.name}</Text>
-                                        </Box>
-                                        <Box marginLeft={1}>
-                                            <Text color="gray">{content.result ? content.result.substring(0, 200) + (content.result.length > 200 ? '...' : '') : 'Completed'}</Text>
-                                        </Box>
-                                    </Box>
-                                );
-                            }
-                        } catch {
-                            // Fallback for legacy plain text tool messages
-                            return (
-                                <Box key={i} marginBottom={1}>
-                                    <Text color="gray">🔧 {msg.content}</Text>
-                                </Box>
-                            );
-                        }
-                    }
-
-                    // Standard User/Assistant/System messages
-                    return (
-                        <Box key={i} marginBottom={1} flexDirection="column">
-                            <Box>
-                                <Text bold color={getRoleColor(msg.role)}>
-                                    {msg.role === 'user' ? '👤 YOU ' : msg.role === 'assistant' ? '🦅 BLUEHAWKS AI ' : 'ℹ️ SYSTEM '}
-                                </Text>
-                            </Box>
-                            <Box marginLeft={2}>
-                                <Text color="white">
-                                    {(msg.role === 'user' || msg.role === 'assistant') ? '🔹 ' : ''}{msg.content}
-                                </Text>
-                            </Box>
-                        </Box>
-                    );
-                })}
-
-                {/* Streaming content */}
-                {streamingContent && (
-                    <Box marginBottom={1} flexDirection="column">
-                        <Box>
-                            <Text bold color={COLORS.success}>🦅 BLUEHAWKS AI </Text>
-                        </Box>
-                        <Box marginLeft={2}>
-                            <Text color="white">🔹 {streamingContent}</Text>
-                        </Box>
-                    </Box>
-                )}
-
-                {/* Current tool - Only show if NO persistent start message was added yet (prevent partial dupes) */}
-                {currentTool && !messages.some(m => m.role === 'tool' && m.content.includes(currentTool) && m.content.includes('tool_start')) && (
-                    <Box flexDirection="column" borderStyle="round" borderColor="magenta" paddingX={2} paddingY={1} marginY={1}>
-                        <Box>
-                            <Spinner type="dots" />
-                            <Text color="magenta" bold> ⚡ TOOL CALL: </Text>
-                            <Text color="white" bold>{currentTool}</Text>
-                        </Box>
-                    </Box>
-                )}
-
-                {/* Approval prompt */}
-                {pendingApproval && (
-                    <Box flexDirection="column" borderStyle="round" borderColor="yellow" padding={1} marginY={1}>
-                        <Text color={COLORS.warning} bold>
-                            ⚠️ ACTION REQUIRED: Tool Approval
-                        </Text>
-                        <Box marginY={1} paddingX={1} borderStyle="single" borderColor="gray">
-                            <Text color="white" bold>{pendingApproval.toolName}</Text>
-                            <Text color="gray">
-                                {"\n"}Args: {JSON.stringify(pendingApproval.args, null, 2).substring(0, 500)}
-                            </Text>
-                        </Box>
-                        <Box>
-                            <Text>Press </Text>
-                            <Text color="green" bold>Y</Text>
-                            <Text> to approve, </Text>
-                            <Text color="red" bold>N</Text>
-                            <Text> to deny</Text>
-                        </Box>
-                    </Box>
-                )}
-            </Box>
-
-            {/* Input Area */}
-            {!pendingApproval && (
-                <Box flexDirection="column">
-                    <Box borderStyle="single" borderTop={true} borderBottom={false} borderLeft={false} borderRight={false} borderColor="gray" paddingTop={1}>
-                        <Text color={COLORS.primary} bold>❯ </Text>
-                        {isProcessing ? (
-                            <Box>
-                                <Spinner type="dots" />
-                                <Text color={COLORS.muted}> Agent is thinking...</Text>
-                            </Box>
-                        ) : (
-                            <TextInput
-                                value={input}
-                                onChange={setInput}
-                                onSubmit={handleSubmit}
-                                placeholder="What's on your mind?"
-                            />
-                        )}
-                    </Box>
-                    <StatusBar isYoloMode={isYoloMode} />
-                </Box>
-            )}
-        </Box>
+        <Layout
+            // Header
+            systemEvents={systemEvents}
+            tps={tps}
+
+            // Sidebar
+            model={apiClient.currentModel}
+            contextUsage={contextUsage}
+            totalTokens={totalTokens}
+            toolHistory={toolHistory}
+
+            // Chat
+            messages={messages}
+            streamingContent={streamingContent}
+            currentTool={currentTool}
+            isProcessing={isProcessing}
+            input={input}
+            setInput={setInput}
+            onSubmit={handleSubmit}
+            pendingApproval={pendingApproval}
+        />
     );
 };