local-cli-agent 5.0.4

package/dist/ui/components/PlanExecuteApp.js

@@ -0,0 +1,1377 @@
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { Box, Text, useInput, useApp, Static } from 'ink';
+import Spinner from 'ink-spinner';
+import os from 'os';
+import { spawn } from 'child_process';
+import { detectGitRepo } from '../../utils/git-utils.js';
+import { getShellConfig, isNativeWindows } from '../../utils/platform-utils.js';
+import { CustomTextInput } from './CustomTextInput.js';
+import { LLMClient, createLLMClient } from '../../core/llm/llm-client.js';
+import { TodoPanel, TodoStatusBar } from '../TodoPanel.js';
+import { sessionManager } from '../../core/session/session-manager.js';
+import { FileBrowser } from './FileBrowser.js';
+import { SessionBrowser, LogBrowser } from './panels/index.js';
+import { SettingsBrowser } from './dialogs/SettingsDialog.js';
+import { LLMSetupWizard } from './LLMSetupWizard.js';
+import { ModelSelector } from './ModelSelector.js';
+import { ToolSelector } from './ToolSelector.js';
+import { AskUserDialog } from './dialogs/AskUserDialog.js';
+import { ApprovalDialog } from './dialogs/ApprovalDialog.js';
+import { CommandBrowser } from './CommandBrowser.js';
+import { Logo } from './Logo.js';
+import { MarkdownRenderer } from './MarkdownRenderer.js';
+import { ActivityIndicator } from './ActivityIndicator.js';
+import { useFileBrowserState } from '../hooks/useFileBrowserState.js';
+import { useCommandBrowserState } from '../hooks/useCommandBrowserState.js';
+import { usePlanExecution } from '../hooks/usePlanExecution.js';
+import { useInputHistory } from '../hooks/useInputHistory.js';
+import { useTerminalWidth, clampText } from '../hooks/useTerminalWidth.js';
+import { isValidCommand } from '../hooks/slashCommandProcessor.js';
+import { processFileReferences } from '../hooks/atFileProcessor.js';
+import { executeSlashCommand, isSlashCommand, } from '../../core/slash-command-handler.js';
+import { closeJsonStreamLogger } from '../../utils/json-stream-logger.js';
+import { configManager } from '../../core/config/config-manager.js';
+import { GitAutoUpdater } from '../../core/git-auto-updater.js';
+import { logger } from '../../utils/logger.js';
+import { usageTracker } from '../../core/usage-tracker.js';
+import { setToolExecutionCallback, setTellToUserCallback, setToolResponseCallback, setPlanCreatedCallback, setTodoStartCallback, setTodoCompleteCallback, setTodoFailCallback, setCompactCallback, setAssistantResponseCallback, setToolApprovalCallback, setReasoningCallback, } from '../../tools/llm/simple/file-tools.js';
+import { findVisionModel } from '../../tools/llm/simple/read-image-tool.js';
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+const pkg = require('../../../package.json');
+const VERSION = pkg.version;
+const TOOLS_REQUIRING_APPROVAL = new Set(['create_file', 'edit_file', 'bash']);
+const STARTUP_TIPS = [
+    {
+        icon: '🔧',
+        en: { prefix: 'Optional tools available! Use ', cmd: '/tool', suffix: ' to enable browser automation and more.' },
+        ko: { prefix: '선택적 도구를 사용할 수 있습니다. ', cmd: '/tool', suffix: ' 명령어로 브라우저 자동화 등을 활성화하세요.' },
+    },
+    {
+        icon: '🎯',
+        en: { prefix: 'Switch models anytime! Use ', cmd: '/model', suffix: ' to select your preferred LLM.' },
+        ko: { prefix: '언제든 모델을 변경할 수 있습니다. ', cmd: '/model', suffix: ' 명령어로 선호하는 LLM을 선택하세요.' },
+    },
+];
+function shortenPath(fullPath) {
+    const homeDir = os.homedir();
+    if (fullPath.startsWith(homeDir)) {
+        return fullPath.replace(homeDir, '~');
+    }
+    return fullPath;
+}
+function formatElapsedTime(seconds) {
+    if (seconds < 60) {
+        return `${seconds}s`;
+    }
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}m ${secs}s`;
+}
+function formatTokensCompact(count) {
+    if (count < 1000)
+        return count.toString();
+    if (count < 1000000)
+        return `${(count / 1000).toFixed(1)}k`;
+    return `${(count / 1000000).toFixed(2)}M`;
+}
+function getStatusText({ phase, todos, currentToolName }) {
+    const completedCount = todos.filter(t => t.status === 'completed').length;
+    const totalCount = todos.length;
+    const allTodosCompleted = totalCount > 0 && todos.every(t => t.status === 'completed' || t.status === 'failed');
+    const progressPrefix = totalCount > 0 ? `${completedCount}/${totalCount} tasks · ` : '';
+    if (phase === 'compacting') {
+        return 'Compacting conversation';
+    }
+    if (phase === 'executing' && allTodosCompleted) {
+        return `${progressPrefix}Generating response`;
+    }
+    if (phase === 'planning') {
+        return 'Thinking';
+    }
+    if (currentToolName) {
+        return `${progressPrefix}${currentToolName}`;
+    }
+    return `${progressPrefix}Processing`;
+}
+export const PlanExecuteApp = ({ llmClient: initialLlmClient, modelInfo }) => {
+    const { exit } = useApp();
+    const termWidth = useTerminalWidth();
+    const [messages, setMessages] = useState([]);
+    const { input, setInput, handleHistoryPrev, handleHistoryNext, addToHistory } = useInputHistory();
+    const [isProcessing, setIsProcessing] = useState(false);
+    const planningMode = 'auto';
+    const [llmClient, setLlmClient] = useState(initialLlmClient);
+    const [activityType, setActivityType] = useState('thinking');
+    const [activityStartTime, setActivityStartTime] = useState(Date.now());
+    const [activityDetail, setActivityDetail] = useState('');
+    const [subActivities, setSubActivities] = useState([]);
+    const [sessionTokens, setSessionTokens] = useState(0);
+    const [sessionElapsed, setSessionElapsed] = useState(0);
+    const [currentToolName, setCurrentToolName] = useState(null);
+    const [showSessionBrowser, setShowSessionBrowser] = useState(false);
+    const [showSettings, setShowSettings] = useState(false);
+    const [showSetupWizard, setShowSetupWizard] = useState(false);
+    const [isInitializing, setIsInitializing] = useState(true);
+    const [initStep, setInitStep] = useState('health');
+    const [healthStatus, setHealthStatus] = useState('checking');
+    const [gitUpdateStatus, setGitUpdateStatus] = useState(null);
+    const [showModelSelector, setShowModelSelector] = useState(false);
+    const [currentModelInfo, setCurrentModelInfo] = useState(modelInfo);
+    const [showToolSelector, setShowToolSelector] = useState(false);
+    const [showLogFiles, setShowLogFiles] = useState(false);
+    const [executionMode, setExecutionMode] = useState('auto');
+    const [autoApprovedTools, setAutoApprovedTools] = useState(new Set());
+    const [pendingToolApproval, setPendingToolApproval] = useState(null);
+    const [logEntries, setLogEntries] = useState([]);
+    const logIdCounter = React.useRef(0);
+    const lastToolArgsRef = React.useRef(null);
+    const [pendingUserMessage, setPendingUserMessage] = useState(null);
+    const pendingUserMessageRef = React.useRef(null);
+    useEffect(() => {
+        pendingUserMessageRef.current = pendingUserMessage;
+    }, [pendingUserMessage]);
+    const pendingMessageCallbacks = useMemo(() => ({
+        getPendingMessage: () => pendingUserMessageRef.current,
+        clearPendingMessage: () => {
+            pendingUserMessageRef.current = null;
+            setPendingUserMessage(null);
+        },
+    }), []);
+    const lastCtrlCTimeRef = React.useRef(0);
+    const DOUBLE_TAP_THRESHOLD = 1500;
+    const addLog = useCallback((entry) => {
+        if (!entry.content || entry.content.trim() === '') {
+            return;
+        }
+        const id = `log-${++logIdCounter.current}`;
+        setLogEntries(prev => [...prev, { ...entry, id }]);
+    }, []);
+    const clearLogs = useCallback(() => {
+        setLogEntries([]);
+        logIdCounter.current = 0;
+    }, []);
+    useEffect(() => {
+        sessionManager.setLogEntries(logEntries);
+    }, [logEntries]);
+    const fileBrowserState = useFileBrowserState(input, isProcessing);
+    const commandBrowserState = useCommandBrowserState(input, isProcessing);
+    const planExecutionState = usePlanExecution(pendingMessageCallbacks);
+    useEffect(() => {
+        sessionManager.setTodos(planExecutionState.todos);
+    }, [planExecutionState.todos]);
+    useEffect(() => {
+        addLog({
+            type: 'logo',
+            content: `v${VERSION} │ ${modelInfo.model}`,
+        });
+        const isGitRepo = detectGitRepo();
+        if (isGitRepo) {
+            addLog({
+                type: 'git_info',
+                content: 'Git repository detected! Commit assistance enabled.',
+            });
+        }
+    }, []);
+    useEffect(() => {
+        logger.enter('PlanExecuteApp', { modelInfo });
+        return () => {
+            logger.exit('PlanExecuteApp', { messageCount: messages.length });
+        };
+    }, []);
+    useEffect(() => {
+        setToolExecutionCallback((toolName, reason, args) => {
+            lastToolArgsRef.current = args;
+            setCurrentToolName(toolName);
+            addLog({
+                type: 'tool_start',
+                content: toolName,
+                details: reason,
+                toolArgs: args,
+            });
+            logger.debug('Tool execution started', { toolName, reason, args });
+        });
+        return () => {
+            setToolExecutionCallback(null);
+        };
+    }, [addLog]);
+    useEffect(() => {
+        setToolResponseCallback((toolName, success, result) => {
+            setCurrentToolName(null);
+            let diff;
+            try {
+                const parsed = JSON.parse(result);
+                if (parsed.diff && Array.isArray(parsed.diff)) {
+                    diff = parsed.diff;
+                }
+            }
+            catch {
+            }
+            const savedArgs = lastToolArgsRef.current;
+            lastToolArgsRef.current = null;
+            addLog({
+                type: 'tool_result',
+                content: toolName,
+                details: result,
+                success,
+                diff,
+                toolArgs: savedArgs || undefined,
+            });
+            logger.debug('Tool execution completed', { toolName, success, result });
+        });
+        return () => {
+            setToolResponseCallback(null);
+        };
+    }, [addLog]);
+    useEffect(() => {
+        setTellToUserCallback((message) => {
+            addLog({
+                type: 'tell_user',
+                content: message,
+            });
+            logger.debug('Message to user', { message });
+        });
+        return () => {
+            setTellToUserCallback(null);
+        };
+    }, [addLog]);
+    useEffect(() => {
+        setAssistantResponseCallback((content) => {
+            addLog({
+                type: 'assistant_message',
+                content,
+            });
+            logger.debug('Assistant response received', { contentLength: content.length });
+        });
+        return () => {
+            setAssistantResponseCallback(null);
+        };
+    }, [addLog]);
+    useEffect(() => {
+        setReasoningCallback((content, _isStreaming) => {
+            logger.debug('Reasoning received', { contentLength: content.length });
+        });
+        return () => {
+            setReasoningCallback(null);
+        };
+    }, []);
+    useEffect(() => {
+        setToolApprovalCallback(async (toolName, args, reason) => {
+            if (executionMode === 'auto') {
+                return 'approve';
+            }
+            if (!TOOLS_REQUIRING_APPROVAL.has(toolName)) {
+                return 'approve';
+            }
+            if (autoApprovedTools.has(toolName)) {
+                logger.debug('Tool auto-approved from session', { toolName });
+                return 'approve';
+            }
+            addLog({
+                type: 'approval_request',
+                content: toolName,
+                details: reason,
+                toolArgs: args,
+            });
+            return new Promise((resolve) => {
+                setPendingToolApproval({
+                    toolName,
+                    args,
+                    reason,
+                    resolve,
+                });
+            });
+        });
+        return () => {
+            setToolApprovalCallback(null);
+        };
+    }, [executionMode, autoApprovedTools, addLog]);
+    const handleApprovalResponse = useCallback((result) => {
+        if (!pendingToolApproval)
+            return;
+        const { toolName, resolve } = pendingToolApproval;
+        if (result === 'approve') {
+            addLog({
+                type: 'approval_response',
+                content: toolName,
+                details: 'approved',
+                success: true,
+            });
+        }
+        else if (result === 'always') {
+            setAutoApprovedTools(prev => new Set([...prev, toolName]));
+            addLog({
+                type: 'approval_response',
+                content: toolName,
+                details: 'always_approved',
+                success: true,
+            });
+        }
+        else if (typeof result === 'object' && result.reject) {
+            addLog({
+                type: 'approval_response',
+                content: toolName,
+                details: result.comment || 'rejected',
+                success: false,
+            });
+        }
+        resolve(result);
+        setPendingToolApproval(null);
+        logger.debug('Approval response', { toolName, result });
+    }, [pendingToolApproval, addLog]);
+    useEffect(() => {
+        setPlanCreatedCallback((todoTitles) => {
+            usageTracker.resetSession();
+            setSessionTokens(0);
+            setSessionElapsed(0);
+            addLog({
+                type: 'plan_created',
+                content: `Created ${todoTitles.length} task${todoTitles.length > 1 ? 's' : ''}`,
+                items: todoTitles,
+            });
+        });
+        setTodoStartCallback((title) => {
+            addLog({
+                type: 'todo_start',
+                content: title,
+            });
+        });
+        setTodoCompleteCallback(() => {
+        });
+        setTodoFailCallback((title) => {
+            addLog({
+                type: 'todo_fail',
+                content: title,
+            });
+        });
+        setCompactCallback((originalCount, newCount) => {
+            clearLogs();
+            addLog({
+                type: 'compact',
+                content: `Conversation compacted: ${originalCount} → ${newCount} messages`,
+            });
+        });
+        return () => {
+            setPlanCreatedCallback(null);
+            setTodoStartCallback(null);
+            setTodoCompleteCallback(null);
+            setTodoFailCallback(null);
+            setCompactCallback(null);
+        };
+    }, [addLog, clearLogs]);
+    useEffect(() => {
+        if (!isProcessing) {
+            return;
+        }
+        const interval = setInterval(() => {
+            const sessionUsage = usageTracker.getSessionUsage();
+            setSessionTokens(sessionUsage.totalTokens);
+            setSessionElapsed(usageTracker.getSessionElapsedSeconds());
+        }, 500);
+        return () => clearInterval(interval);
+    }, [isProcessing]);
+    useEffect(() => {
+        const initialize = async () => {
+            logger.flow('Starting initialization');
+            logger.startTimer('app-init');
+            try {
+                setInitStep('git_update');
+                logger.flow('Checking for git updates');
+                const updater = new GitAutoUpdater({
+                    onStatus: setGitUpdateStatus,
+                });
+                const needsRestart = await updater.run();
+                if (needsRestart) {
+                    process.exit(0);
+                }
+                setInitStep('health');
+                logger.flow('Running health check');
+                setHealthStatus('checking');
+                if (configManager.hasEndpoints()) {
+                    const healthResults = await LLMClient.healthCheckAll();
+                    let hasHealthy = false;
+                    for (const [endpointId, modelResults] of healthResults) {
+                        logger.vars({ name: 'endpointId', value: endpointId }, { name: 'healthyModels', value: modelResults.filter(r => r.healthy).length });
+                        if (modelResults.some((r) => r.healthy)) {
+                            hasHealthy = true;
+                        }
+                    }
+                    logger.state('Health status', 'checking', hasHealthy ? 'healthy' : 'unhealthy');
+                    setHealthStatus(hasHealthy ? 'healthy' : 'unhealthy');
+                    await configManager.updateAllHealthStatus(healthResults);
+                }
+                else {
+                    setHealthStatus('unknown');
+                }
+                setInitStep('config');
+                logger.flow('Checking configuration');
+                if (!configManager.hasEndpoints()) {
+                    logger.debug('No endpoints configured, showing setup wizard');
+                    setShowSetupWizard(true);
+                    setIsInitializing(false);
+                    logger.endTimer('app-init');
+                    return;
+                }
+                setInitStep('done');
+            }
+            catch (error) {
+                logger.error('Initialization failed', error);
+                setHealthStatus('unknown');
+            }
+            finally {
+                setIsInitializing(false);
+                logger.endTimer('app-init');
+            }
+        };
+        initialize();
+    }, []);
+    const handleExit = useCallback(async () => {
+        logger.flow('Exiting application');
+        await closeJsonStreamLogger();
+        exit();
+    }, [exit]);
+    useInput((inputChar, key) => {
+        if (key.ctrl && inputChar === 'c') {
+            const now = Date.now();
+            const timeSinceLastCtrlC = now - lastCtrlCTimeRef.current;
+            if (isProcessing) {
+                logger.flow('Ctrl+C pressed - interrupting execution');
+                if (llmClient) {
+                    llmClient.abort();
+                }
+                planExecutionState.handleInterrupt();
+                addLog({
+                    type: 'interrupt',
+                    content: '⎿ Interrupted',
+                });
+                setIsProcessing(false);
+                lastCtrlCTimeRef.current = now;
+                return;
+            }
+            if (input.length > 0) {
+                logger.debug('Ctrl+C pressed - clearing input');
+                setInput('');
+                lastCtrlCTimeRef.current = now;
+                return;
+            }
+            if (timeSinceLastCtrlC < DOUBLE_TAP_THRESHOLD) {
+                logger.flow('Ctrl+C double-tap detected - exiting');
+                handleExit().catch((err) => logger.error('Exit failed', err));
+                return;
+            }
+            lastCtrlCTimeRef.current = now;
+            addLog({
+                type: 'assistant_message',
+                content: '^C again to exit',
+            });
+            logger.debug('Ctrl+C pressed - waiting for double-tap to exit');
+            return;
+        }
+        if (key.escape && (isProcessing || planExecutionState.isInterrupted)) {
+            logger.flow('ESC pressed');
+            if (llmClient) {
+                llmClient.abort();
+            }
+            const result = planExecutionState.handleInterrupt();
+            if (result === 'paused') {
+                addLog({
+                    type: 'interrupt',
+                    content: '⏸️ Paused (type message to resume, ESC to stop completely)',
+                });
+            }
+            else if (result === 'stopped') {
+                addLog({
+                    type: 'interrupt',
+                    content: '⏹️ Stopped - TODO list cleared',
+                });
+            }
+            setIsProcessing(false);
+        }
+        if (key.tab && !isProcessing && !pendingToolApproval && !fileBrowserState.showFileBrowser && !commandBrowserState.showCommandBrowser) {
+            const newMode = executionMode === 'auto' ? 'supervised' : 'auto';
+            setExecutionMode(newMode);
+            if (newMode === 'auto') {
+                setAutoApprovedTools(new Set());
+            }
+            addLog({
+                type: 'assistant_message',
+                content: `실행 모드 변경: ${newMode === 'auto' ? '🚀 Auto Mode (자율 실행)' : '👁️ Supervised Mode (승인 필요)'}`,
+            });
+            logger.debug('Execution mode toggled', { newMode });
+        }
+        if (key.ctrl && inputChar === 'o') {
+            setShowLogFiles(prev => !prev);
+        }
+    });
+    const handleFileSelect = useCallback((filePaths) => {
+        logger.debug('File selected', { filePaths });
+        const newInput = fileBrowserState.handleFileSelect(filePaths, input);
+        setInput(newInput);
+    }, [fileBrowserState, input]);
+    const handleCommandSelect = useCallback((command, shouldSubmit) => {
+        logger.debug('Command selected', { command, shouldSubmit });
+        const result = commandBrowserState.handleCommandSelect(command, shouldSubmit, input, handleSubmit);
+        if (result !== null) {
+            setInput(result);
+        }
+    }, [commandBrowserState, input]);
+    const handleSessionSelect = useCallback(async (sessionId) => {
+        logger.enter('handleSessionSelect', { sessionId });
+        setShowSessionBrowser(false);
+        try {
+            const sessionData = await sessionManager.loadSession(sessionId);
+            if (!sessionData) {
+                const errorMessage = `세션을 찾을 수 없습니다: ${sessionId}`;
+                logger.warn('Session not found', { sessionId });
+                setMessages(prev => [
+                    ...prev,
+                    { role: 'assistant', content: errorMessage },
+                ]);
+                return;
+            }
+            const hasTodos = sessionData.todos && sessionData.todos.length > 0;
+            logger.debug('Session loaded', {
+                sessionId,
+                messageCount: sessionData.messages.length,
+                logEntryCount: sessionData.logEntries?.length || 0,
+                todoCount: hasTodos ? sessionData.todos.length : 0,
+            });
+            setMessages(sessionData.messages);
+            setAutoApprovedTools(new Set());
+            logger.debug('Auto-approved tools cleared on session load');
+            if (hasTodos) {
+                const restoredTodos = sessionData.todos.map(todo => ({
+                    id: todo.id,
+                    title: todo.title,
+                    description: todo.description || '',
+                    status: todo.status,
+                    dependencies: todo.dependencies ?? [],
+                    result: todo.result,
+                    error: todo.error,
+                }));
+                planExecutionState.setTodos(restoredTodos);
+                logger.debug('Restored in-progress TODOs', { count: restoredTodos.length });
+            }
+            const detailParts = [];
+            detailParts.push(`${sessionData.messages.length}개 메시지`);
+            if (sessionData.logEntries?.length) {
+                detailParts.push(`${sessionData.logEntries.length}개 로그`);
+            }
+            if (hasTodos) {
+                detailParts.push(`${sessionData.todos.length}개 TODO 복구`);
+            }
+            if (sessionData.logEntries && sessionData.logEntries.length > 0) {
+                const restoredLogs = [
+                    {
+                        id: `log-restored-header`,
+                        type: 'session_restored',
+                        content: `세션 복구됨: ${new Date(sessionData.metadata.updatedAt).toLocaleString('ko-KR')}`,
+                        details: detailParts.join(', '),
+                    },
+                    ...sessionData.logEntries.map((entry, idx) => ({
+                        ...entry,
+                        id: `log-restored-${idx}`,
+                    })),
+                ];
+                setLogEntries(restoredLogs);
+                logIdCounter.current = restoredLogs.length;
+            }
+            else {
+                clearLogs();
+                addLog({
+                    type: 'session_restored',
+                    content: `세션 복구됨: ${new Date(sessionData.metadata.updatedAt).toLocaleString('ko-KR')}`,
+                    details: detailParts.join(', ') + (sessionData.logEntries?.length ? '' : ' (로그 히스토리 없음)'),
+                });
+            }
+        }
+        catch (error) {
+            const errorMessage = `세션 로드 실패: ${error instanceof Error ? error.message : 'Unknown error'}`;
+            logger.error(`Session load failed (sessionId: ${sessionId})`, error);
+            setMessages(prev => [
+                ...prev,
+                { role: 'assistant', content: errorMessage },
+            ]);
+        }
+        logger.exit('handleSessionSelect', { sessionId });
+    }, [addLog, clearLogs]);
+    const handleSettingsPlanningModeChange = useCallback((_mode) => {
+        logger.debug('Planning mode change ignored - always auto');
+    }, []);
+    const handleSettingsClose = useCallback(() => {
+        logger.debug('Settings closed');
+        setShowSettings(false);
+    }, []);
+    const handleSetupComplete = useCallback(() => {
+        logger.debug('Setup wizard completed');
+        setShowSetupWizard(false);
+        try {
+            const endpoint = configManager.getCurrentEndpoint();
+            const model = configManager.getCurrentModel();
+            if (endpoint && model) {
+                setCurrentModelInfo({
+                    model: model.name,
+                    endpoint: endpoint.baseUrl,
+                });
+                const newClient = createLLMClient();
+                setLlmClient(newClient);
+                logger.debug('LLMClient created after setup', { modelId: model.id, modelName: model.name });
+            }
+        }
+        catch (error) {
+            logger.error('Failed to create LLMClient after setup', error);
+        }
+    }, []);
+    const handleSetupSkip = useCallback(() => {
+        logger.debug('Setup wizard skipped');
+        setShowSetupWizard(false);
+    }, []);
+    const handleModelSelect = useCallback((endpointId, modelId) => {
+        logger.enter('handleModelSelect', { endpointId, modelId });
+        const endpoint = configManager.getAllEndpoints().find((ep) => ep.id === endpointId);
+        const model = endpoint?.models.find((m) => m.id === modelId);
+        if (endpoint && model) {
+            logger.state('Current model', currentModelInfo.model, model.name);
+            setCurrentModelInfo({
+                model: model.name,
+                endpoint: endpoint.baseUrl,
+            });
+            try {
+                const newClient = createLLMClient();
+                setLlmClient(newClient);
+                logger.debug('LLMClient recreated with new model', { modelId, modelName: model.name });
+            }
+            catch (error) {
+                logger.error('Failed to create new LLMClient', error);
+            }
+        }
+        setShowModelSelector(false);
+        setMessages((prev) => [
+            ...prev,
+            {
+                role: 'assistant',
+                content: `모델이 변경되었습니다: ${model?.name || modelId} (${endpoint?.name || endpointId})`,
+            },
+        ]);
+        logger.exit('handleModelSelect', { model: model?.name });
+    }, [currentModelInfo.model]);
+    const handleModelSelectorCancel = useCallback(() => {
+        logger.debug('Model selector cancelled');
+        setShowModelSelector(false);
+    }, []);
+    const handleToolSelectorClose = useCallback(() => {
+        logger.debug('Tool selector closed');
+        setShowToolSelector(false);
+    }, []);
+    const handleSubmit = useCallback(async (value) => {
+        if (isProcessing && value.trim()) {
+            const queuedMessage = value.trim();
+            setPendingUserMessage(queuedMessage);
+            logger.flow('User message queued for mid-execution injection', { message: queuedMessage });
+            addLog({
+                type: 'user_input',
+                content: `(→ 다음 호출에 전달) ${queuedMessage}`,
+            });
+            setInput('');
+            return;
+        }
+        if (!value.trim() && planExecutionState.retryPending) {
+            planExecutionState.setRetryPending(false);
+            const lastUserMsg = [...messages].reverse().find(m => m.role === 'user');
+            if (lastUserMsg && llmClient) {
+                setIsProcessing(true);
+                setActivityStartTime(Date.now());
+                llmClient.resetInterrupt();
+                try {
+                    await planExecutionState.executeAutoMode(lastUserMsg.content, llmClient, messages, setMessages);
+                }
+                catch (e) {
+                    logger.error('Retry failed', e);
+                }
+                finally {
+                    setIsProcessing(false);
+                }
+            }
+            return;
+        }
+        if (!value.trim() || fileBrowserState.showFileBrowser || showSessionBrowser || showSettings || showSetupWizard) {
+            return;
+        }
+        logger.enter('handleSubmit', { valueLength: value.length });
+        const userMessage = value.trim();
+        const isSettingsCommand = userMessage === '/settings';
+        if (!llmClient && !isSettingsCommand) {
+            logger.warn('LLM client not configured');
+            setMessages((prev) => [
+                ...prev,
+                { role: 'assistant', content: 'LLM이 설정되지 않았습니다. /settings → LLMs에서 설정해주세요.' },
+            ]);
+            return;
+        }
+        if (commandBrowserState.showCommandBrowser && !isValidCommand(userMessage)) {
+            return;
+        }
+        if (commandBrowserState.showCommandBrowser) {
+            commandBrowserState.resetCommandBrowser();
+        }
+        setInput('');
+        addToHistory(userMessage);
+        if (userMessage.startsWith('!')) {
+            const shellCommand = userMessage.slice(1).trim();
+            if (!shellCommand) {
+                addLog({
+                    type: 'assistant_message',
+                    content: '사용법: !<명령어> (예: !ls -la, !dir)',
+                });
+                return;
+            }
+            addLog({
+                type: 'user_input',
+                content: userMessage,
+            });
+            const shellConfig = getShellConfig();
+            const shellLabel = isNativeWindows() ? 'PowerShell' : 'Bash';
+            addLog({
+                type: 'tool_start',
+                content: `${shellLabel}: ${shellCommand}`,
+            });
+            try {
+                const child = spawn(shellConfig.shell, shellConfig.args(shellCommand), {
+                    cwd: process.cwd(),
+                    env: process.env,
+                });
+                let stdout = '';
+                let stderr = '';
+                child.stdout?.on('data', (data) => {
+                    stdout += data.toString();
+                });
+                child.stderr?.on('data', (data) => {
+                    stderr += data.toString();
+                });
+                child.on('close', (code) => {
+                    const output = stdout + (stderr ? `\n${stderr}` : '');
+                    const success = code === 0;
+                    addLog({
+                        type: 'shell_result',
+                        content: output.trim() || (success ? '(no output)' : `Exit code: ${code}`),
+                        success,
+                    });
+                });
+                child.on('error', (err) => {
+                    addLog({
+                        type: 'shell_result',
+                        content: `Error: ${err.message}`,
+                        success: false,
+                    });
+                });
+            }
+            catch (err) {
+                addLog({
+                    type: 'shell_result',
+                    content: `Error: ${err instanceof Error ? err.message : String(err)}`,
+                    success: false,
+                });
+            }
+            logger.exit('handleSubmit', { shellCommand: true });
+            return;
+        }
+        if (isSlashCommand(userMessage)) {
+            logger.flow('Executing slash command');
+            addLog({
+                type: 'user_input',
+                content: userMessage,
+            });
+            const commandContext = {
+                planningMode,
+                messages,
+                todos: planExecutionState.todos,
+                setPlanningMode: () => { },
+                setMessages,
+                setTodos: planExecutionState.setTodos,
+                exit: handleExit,
+                onShowSessionBrowser: () => setShowSessionBrowser(true),
+                onShowSettings: () => setShowSettings(true),
+                onShowModelSelector: () => setShowModelSelector(true),
+                onShowToolSelector: () => setShowToolSelector(true),
+                onCompact: llmClient
+                    ? () => planExecutionState.performCompact(llmClient, messages, setMessages)
+                    : undefined,
+            };
+            const result = await executeSlashCommand(userMessage, commandContext);
+            if (result.handled) {
+                if (result.updatedContext?.messages) {
+                    const lastMessage = result.updatedContext.messages[result.updatedContext.messages.length - 1];
+                    if (lastMessage && lastMessage.role === 'assistant') {
+                        addLog({
+                            type: 'assistant_message',
+                            content: lastMessage.content,
+                        });
+                    }
+                }
+                logger.exit('handleSubmit', { handled: true });
+                return;
+            }
+        }
+        addLog({
+            type: 'user_input',
+            content: userMessage,
+        });
+        const processedResult = await processFileReferences(userMessage);
+        const processedMessage = processedResult.content;
+        if (processedResult.includedFiles.length > 0) {
+            logger.debug('Files included in message', {
+                files: processedResult.includedFiles,
+                failedFiles: processedResult.failedFiles,
+            });
+        }
+        let updatedMessages = [...messages, { role: 'user', content: processedMessage }];
+        setMessages(updatedMessages);
+        setIsProcessing(true);
+        setActivityStartTime(Date.now());
+        setSubActivities([]);
+        if (llmClient) {
+            llmClient.resetInterrupt();
+            llmClient.countdownCallback = (remainingSeconds) => {
+                if (remainingSeconds > 0) {
+                    setActivityDetail(`서버 응답 대기... ${remainingSeconds}초`);
+                }
+                else {
+                    setActivityDetail('재시도 중...');
+                }
+            };
+        }
+        usageTracker.resetSession();
+        setSessionTokens(0);
+        setSessionElapsed(0);
+        logger.startTimer('message-processing');
+        try {
+            if (planExecutionState.shouldAutoCompact()) {
+                logger.flow('Auto-compact triggered');
+                setActivityType('thinking');
+                setActivityDetail('Compacting conversation...');
+                const compactResult = await planExecutionState.performCompact(llmClient, updatedMessages, setMessages);
+                if (compactResult.success && compactResult.compactedMessages) {
+                    updatedMessages = compactResult.compactedMessages;
+                    logger.debug('Auto-compact completed', {
+                        originalCount: compactResult.originalMessageCount,
+                        newCount: compactResult.newMessageCount,
+                    });
+                }
+                else if (!compactResult.success) {
+                    logger.warn('Auto-compact failed, continuing without compact', { error: compactResult.error });
+                }
+            }
+            const hasPendingTodos = planExecutionState.todos.some(t => t.status === 'pending' || t.status === 'in_progress');
+            if (hasPendingTodos && planExecutionState.isInterrupted) {
+                logger.flow('Resuming TODO execution after pause');
+                setActivityType('executing');
+                setActivityDetail('Resuming...');
+                await planExecutionState.resumeTodoExecution(processedMessage, llmClient, messages, setMessages);
+            }
+            else {
+                setActivityType('thinking');
+                setActivityDetail('Analyzing request...');
+                logger.vars({ name: 'planningMode', value: planningMode }, { name: 'messageLength', value: processedMessage.length });
+                await planExecutionState.executeAutoMode(processedMessage, llmClient, updatedMessages, setMessages);
+            }
+        }
+        catch (error) {
+            logger.error('Message processing failed', error);
+        }
+        finally {
+            setIsProcessing(false);
+            logger.endTimer('message-processing');
+            logger.exit('handleSubmit', { success: true });
+        }
+    }, [
+        isProcessing,
+        fileBrowserState.showFileBrowser,
+        showSessionBrowser,
+        showSettings,
+        showSetupWizard,
+        commandBrowserState,
+        planningMode,
+        messages,
+        planExecutionState,
+        llmClient,
+        handleExit,
+        addLog,
+    ]);
+    useEffect(() => {
+        if (!isProcessing && pendingUserMessage && llmClient) {
+            logger.flow('Processing remaining pending user message after execution complete');
+            const queuedMessage = pendingUserMessage;
+            setPendingUserMessage(null);
+            pendingUserMessageRef.current = null;
+            const hasPendingTodos = planExecutionState.todos.some(t => t.status === 'pending' || t.status === 'in_progress');
+            addLog({
+                type: 'user_input',
+                content: `📩 ${queuedMessage}`,
+            });
+            const processAndExecute = async () => {
+                const processedResult = await processFileReferences(queuedMessage);
+                const processedMessage = processedResult.content;
+                setIsProcessing(true);
+                setActivityStartTime(Date.now());
+                try {
+                    if (hasPendingTodos) {
+                        logger.flow('Resuming TODO execution with user message');
+                        await planExecutionState.resumeTodoExecution(processedMessage, llmClient, messages, setMessages);
+                    }
+                    else {
+                        logger.flow('No pending TODOs - starting fresh execution');
+                        const updatedMessages = [...messages, { role: 'user', content: processedMessage }];
+                        setMessages(updatedMessages);
+                        await planExecutionState.executeAutoMode(processedMessage, llmClient, updatedMessages, setMessages);
+                    }
+                }
+                catch (error) {
+                    logger.error('Queued message processing failed', error);
+                }
+                finally {
+                    setIsProcessing(false);
+                }
+            };
+            processAndExecute().catch(err => {
+                logger.error('Pending message execution error', err);
+            });
+        }
+    }, [isProcessing, pendingUserMessage, llmClient, messages, planExecutionState, addLog]);
+    if (isInitializing) {
+        const getGitStatusText = () => {
+            if (!gitUpdateStatus)
+                return 'Checking for updates...';
+            switch (gitUpdateStatus.type) {
+                case 'checking':
+                    return 'Checking for updates...';
+                case 'no_update':
+                    return 'Up to date';
+                case 'first_run':
+                    return `${gitUpdateStatus.message} (${gitUpdateStatus.step}/${gitUpdateStatus.totalSteps})`;
+                case 'updating':
+                    return `${gitUpdateStatus.message} (${gitUpdateStatus.step}/${gitUpdateStatus.totalSteps})`;
+                case 'complete':
+                    return gitUpdateStatus.message;
+                case 'error':
+                    return gitUpdateStatus.message;
+                case 'skipped':
+                    return `Skipped: ${gitUpdateStatus.reason}`;
+                default:
+                    return (((_) => 'Checking for updates...')(gitUpdateStatus));
+            }
+        };
+        const getInitStepInfo = () => {
+            switch (initStep) {
+                case 'git_update':
+                    return { icon: '🔄', text: getGitStatusText(), progress: 1 };
+                case 'health':
+                    return { icon: '🏥', text: 'Checking model health...', progress: 2 };
+                case 'config':
+                    return { icon: '⚙️', text: 'Loading configuration...', progress: 3 };
+                default:
+                    return { icon: '✓', text: 'Ready!', progress: 4 };
+            }
+        };
+        const stepInfo = getInitStepInfo();
+        const AuthorsDisplay = () => {
+            const authors = ['syngha.han', 'byeongju.lee', 'youngsub.kim'];
+            const [highlightIndex, setHighlightIndex] = useState(0);
+            useEffect(() => {
+                const interval = setInterval(() => {
+                    setHighlightIndex((prev) => (prev + 1) % authors.length);
+                }, 800);
+                return () => clearInterval(interval);
+            }, []);
+            return (React.createElement(Box, { marginTop: 2 },
+                React.createElement(Text, { color: "gray" }, "by "),
+                authors.map((author, idx) => (React.createElement(React.Fragment, { key: author },
+                    React.createElement(Text, { color: idx === highlightIndex ? 'cyan' : 'gray', bold: idx === highlightIndex, dimColor: idx !== highlightIndex }, author),
+                    idx < authors.length - 1 && React.createElement(Text, { color: "gray" }, " \u00B7 "))))));
+        };
+        return (React.createElement(Box, { flexDirection: "column", alignItems: "center", paddingY: 2 },
+            React.createElement(Logo, { showVersion: true, showTagline: true }),
+            React.createElement(Box, { marginTop: 2, flexDirection: "column", alignItems: "center" },
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: "cyan" },
+                        React.createElement(Spinner, { type: "shark" }))),
+                React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { color: "yellow" },
+                        stepInfo.icon,
+                        " ",
+                        stepInfo.text)),
+                React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { color: stepInfo.progress >= 1 ? 'green' : 'gray' }, "\u25CF"),
+                    React.createElement(Text, { color: "gray" }, " \u2192 "),
+                    React.createElement(Text, { color: stepInfo.progress >= 2 ? 'green' : 'gray' }, "\u25CF"),
+                    React.createElement(Text, { color: "gray" }, " \u2192 "),
+                    React.createElement(Text, { color: stepInfo.progress >= 3 ? 'green' : 'gray' }, "\u25CF"),
+                    React.createElement(Text, { color: "gray" }, " \u2192 "),
+                    React.createElement(Text, { color: stepInfo.progress >= 4 ? 'green' : 'gray' }, "\u25CF")),
+                React.createElement(AuthorsDisplay, null))));
+    }
+    if (showSetupWizard) {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(LLMSetupWizard, { onComplete: handleSetupComplete, onSkip: handleSetupSkip })));
+    }
+    const getHealthIndicator = () => {
+        switch (healthStatus) {
+            case 'checking':
+                return React.createElement(Text, { color: "yellow" }, "\u22EF");
+            case 'healthy':
+                return React.createElement(Text, { color: "green" }, "\u25CF");
+            case 'unhealthy':
+                return React.createElement(Text, { color: "red" }, "\u25CF");
+            default:
+                return React.createElement(Text, { color: "gray" }, "\u25CB");
+        }
+    };
+    const getCurrentActivityType = () => {
+        if (planExecutionState.executionPhase === 'planning')
+            return 'planning';
+        if (planExecutionState.executionPhase === 'executing')
+            return 'executing';
+        return activityType;
+    };
+    const isAnyPanelOpen = fileBrowserState.showFileBrowser ||
+        commandBrowserState.showCommandBrowser ||
+        showToolSelector ||
+        showSettings ||
+        showModelSelector ||
+        showSessionBrowser ||
+        showLogFiles;
+    const renderLogEntry = (entry) => {
+        switch (entry.type) {
+            case 'logo': {
+                const tipIndex = usageTracker.getSummary().allTime.totalRequests % STARTUP_TIPS.length;
+                const tip = STARTUP_TIPS[tipIndex];
+                return (React.createElement(Box, { key: entry.id, flexDirection: "column", marginBottom: 1 },
+                    React.createElement(Logo, { showVersion: true, showTagline: false, animate: false, modelName: currentModelInfo.model, workingDirectory: shortenPath(process.cwd()), visionAvailable: findVisionModel() !== null }),
+                    React.createElement(Text, null, ' '),
+                    React.createElement(Box, null,
+                        React.createElement(Text, { color: "gray" },
+                            " ",
+                            tip.icon,
+                            " ",
+                            tip.en.prefix),
+                        React.createElement(Text, { color: "cyan" }, tip.en.cmd),
+                        React.createElement(Text, { color: "gray" }, tip.en.suffix)),
+                    React.createElement(Box, null,
+                        React.createElement(Text, { color: "gray" },
+                            "    ",
+                            tip.ko.prefix),
+                        React.createElement(Text, { color: "cyan" }, tip.ko.cmd),
+                        React.createElement(Text, { color: "gray" }, tip.ko.suffix))));
+            }
+            case 'user_input':
+                return (React.createElement(Box, { key: entry.id, marginTop: 1 },
+                    React.createElement(Text, { color: "green", bold: true }, "\u276F "),
+                    React.createElement(Text, null, entry.content)));
+            case 'assistant_message':
+                return (React.createElement(Box, { key: entry.id, marginTop: 1, marginBottom: 1, flexDirection: "column" },
+                    React.createElement(Text, { color: "magenta", bold: true }, "\u25CF Assistant"),
+                    React.createElement(Box, { paddingLeft: 2 },
+                        React.createElement(MarkdownRenderer, { content: entry.content }))));
+            case 'interrupt':
+                return (React.createElement(Box, { key: entry.id, marginTop: 1 },
+                    React.createElement(Text, { color: "red", bold: true }, entry.content)));
+            case 'session_restored':
+                return (React.createElement(Box, { key: entry.id, marginTop: 1, flexDirection: "column" },
+                    React.createElement(Text, { color: "cyan", bold: true },
+                        "\uD83D\uDCC2 ",
+                        entry.content),
+                    entry.details && React.createElement(Text, { color: "gray", dimColor: true },
+                        "   ",
+                        entry.details)));
+            case 'git_info':
+                return (React.createElement(Box, { key: entry.id, marginTop: 0, marginBottom: 0, flexDirection: "column" },
+                    React.createElement(Text, { color: "yellow" },
+                        " \uD83D\uDD00 ",
+                        entry.content),
+                    React.createElement(Text, { color: "gray" }, "    Git \uC800\uC7A5\uC18C\uAC00 \uAC10\uC9C0\uB418\uC5C8\uC2B5\uB2C8\uB2E4! \uCEE4\uBC0B \uC9C0\uC6D0\uC774 \uD65C\uC131\uD654\uB429\uB2C8\uB2E4.")));
+            case 'tool_start': {
+                if (entry.content === 'tell_to_user' || entry.content === 'final_response')
+                    return null;
+                const getToolIcon = (toolName) => {
+                    if (toolName.startsWith('word_'))
+                        return '📄';
+                    if (toolName.startsWith('excel_'))
+                        return '📊';
+                    if (toolName.startsWith('powerpoint_'))
+                        return '📽️';
+                    if (toolName.startsWith('browser_'))
+                        return '🌐';
+                    switch (toolName) {
+                        case 'read_file':
+                            return '📖';
+                        case 'create_file':
+                            return '📝';
+                        case 'edit_file':
+                            return '✏️';
+                        case 'list_files':
+                            return '📂';
+                        case 'find_files':
+                            return '🔍';
+                        case 'tell_to_user':
+                            return '💬';
+                        case 'bash':
+                            return '⚡';
+                        default:
+                            return '🔧';
+                    }
+                };
+                const getToolParams = (toolName, args) => {
+                    if (!args)
+                        return '';
+                    if (toolName.startsWith('word_') || toolName.startsWith('excel_') || toolName.startsWith('powerpoint_')) {
+                        const filePath = args['file_path'];
+                        if (filePath)
+                            return filePath;
+                        const cell = args['cell'];
+                        const range = args['range'];
+                        if (cell)
+                            return cell;
+                        if (range)
+                            return range;
+                        const slideNumber = args['slide_number'];
+                        if (slideNumber)
+                            return `slide ${slideNumber}`;
+                        return '';
+                    }
+                    switch (toolName) {
+                        case 'read_file':
+                            return args['file_path'] || '';
+                        case 'create_file':
+                            return args['file_path'] || '';
+                        case 'edit_file': {
+                            const filePath = args['file_path'] || '';
+                            const edits = args['edits'] || [];
+                            return `${filePath}, ${edits.length} edits`;
+                        }
+                        case 'list_files': {
+                            const dir = args['directory_path'] || '.';
+                            const recursive = args['recursive'] ? ', recursive' : '';
+                            return `${dir}${recursive}`;
+                        }
+                        case 'find_files': {
+                            const pattern = args['pattern'] || '';
+                            const dir = args['directory_path'];
+                            return dir ? `${pattern} in ${dir}` : pattern;
+                        }
+                        case 'tell_to_user':
+                            return '';
+                        case 'bash':
+                            return args['command'] || '';
+                        default:
+                            return '';
+                    }
+                };
+                const icon = getToolIcon(entry.content);
+                const params = getToolParams(entry.content, entry.toolArgs);
+                const toolName = entry.content;
+                const reason = entry.details || '';
+                const maxReasonLen = Math.max(20, termWidth - 10);
+                const truncatedReason = clampText(reason, maxReasonLen);
+                return (React.createElement(Box, { key: entry.id, flexDirection: "column", marginTop: 1 },
+                    React.createElement(Box, null,
+                        React.createElement(Text, { color: "cyan", bold: true },
+                            icon,
+                            " ",
+                            toolName),
+                        params && React.createElement(Text, { color: "gray" },
+                            " (",
+                            params,
+                            ")")),
+                    truncatedReason && (React.createElement(Box, { marginLeft: 2 },
+                        React.createElement(Text, { color: "gray" }, "\u23BF "),
+                        React.createElement(Text, { color: "yellow" }, "\uD83D\uDCAD "),
+                        React.createElement(Text, { color: "gray" }, truncatedReason)))));
+            }
+            case 'tool_result':
+                return null;
+            case 'shell_result':
+                return (React.createElement(Box, { key: entry.id, marginLeft: 2 },
+                    React.createElement(Text, { color: "gray" }, "\u23BF "),
+                    React.createElement(Text, { color: entry.success ? 'white' : 'red' }, entry.content)));
+            case 'tell_user':
+                return (React.createElement(Box, { key: entry.id, marginTop: 1 },
+                    React.createElement(Text, { color: "yellow", bold: true }, "\u25CF "),
+                    React.createElement(Text, null, entry.content)));
+            case 'plan_created':
+                return (React.createElement(Box, { key: entry.id, flexDirection: "column", marginTop: 1 },
+                    React.createElement(Text, { color: "magenta", bold: true },
+                        "\u25CF \uD83D\uDCCB ",
+                        entry.content),
+                    entry.items?.map((item, idx) => (React.createElement(Box, { key: idx, marginLeft: 2 },
+                        React.createElement(Text, { color: "gray" }, "\u23BF  "),
+                        React.createElement(Text, null,
+                            idx + 1,
+                            ". ",
+                            item))))));
+            case 'todo_start':
+                return (React.createElement(Box, { key: entry.id, marginTop: 1 },
+                    React.createElement(Text, { color: "blue", bold: true }, "\u25CF \u25B6 "),
+                    React.createElement(Text, { bold: true }, entry.content)));
+            case 'todo_complete':
+                return (React.createElement(Box, { key: entry.id, marginLeft: 2 },
+                    React.createElement(Text, { color: "gray" }, "\u23BF  "),
+                    React.createElement(Text, { color: "green" }, "\u2713 \uC644\uB8CC")));
+            case 'todo_fail':
+                return (React.createElement(Box, { key: entry.id, marginLeft: 2 },
+                    React.createElement(Text, { color: "gray" }, "\u23BF  "),
+                    React.createElement(Text, { color: "red" }, "\u2717 \uC2E4\uD328")));
+            case 'compact':
+                return (React.createElement(Box, { key: entry.id, flexDirection: "column", marginTop: 1 },
+                    React.createElement(Logo, { showVersion: true, showTagline: false, animate: false, modelName: currentModelInfo.model, workingDirectory: shortenPath(process.cwd()), visionAvailable: findVisionModel() !== null }),
+                    React.createElement(Text, { color: "gray" },
+                        "\u2500\u2500 ",
+                        entry.content,
+                        " \u2500\u2500")));
+            case 'approval_request': {
+                const formatArg = (_key, value) => {
+                    if (typeof value === 'string') {
+                        if (value.length > 100)
+                            return value.substring(0, 100) + '...';
+                        return value;
+                    }
+                    return JSON.stringify(value);
+                };
+                return (React.createElement(Box, { key: entry.id, flexDirection: "column", marginTop: 1 },
+                    React.createElement(Box, null,
+                        React.createElement(Text, { color: "yellow", bold: true }, "\u26A0\uFE0F \uC2B9\uC778 \uC694\uCCAD: "),
+                        React.createElement(Text, { color: "cyan", bold: true }, entry.content)),
+                    entry.details && (React.createElement(Box, { marginLeft: 2 },
+                        React.createElement(Text, { color: "gray" }, "\u23BF "),
+                        React.createElement(Text, null, entry.details))),
+                    entry.toolArgs && Object.entries(entry.toolArgs).map(([key, value], idx) => {
+                        if (key === 'reason')
+                            return null;
+                        return (React.createElement(Box, { key: idx, marginLeft: 2 },
+                            React.createElement(Text, { color: "gray" }, "\u23BF "),
+                            React.createElement(Text, { color: "magenta" },
+                                key,
+                                ": "),
+                            React.createElement(Text, { color: "gray" }, formatArg(key, value))));
+                    })));
+            }
+            case 'approval_response':
+                return (React.createElement(Box, { key: entry.id, marginLeft: 2 },
+                    React.createElement(Text, { color: "gray" }, "\u23BF "),
+                    entry.success ? (React.createElement(Text, { color: "green" },
+                        "\u2713 ",
+                        entry.details === 'always_approved' ? '항상 승인됨' : '승인됨')) : (React.createElement(Text, { color: "red" },
+                        "\u2717 \uAC70\uBD80\uB428",
+                        entry.details && entry.details !== 'rejected' ? `: ${entry.details}` : ''))));
+            case 'reasoning':
+                return null;
+            default:
+                return null;
+        }
+    };
+    return (React.createElement(Box, { flexDirection: "column", height: "100%" },
+        React.createElement(Static, { items: logEntries }, (entry) => renderLogEntry(entry)),
+        pendingToolApproval && (React.createElement(Box, { marginY: 1 },
+            React.createElement(ApprovalDialog, { toolName: pendingToolApproval.toolName, args: pendingToolApproval.args, reason: pendingToolApproval.reason, onResponse: handleApprovalResponse }))),
+        isProcessing && (planExecutionState.executionPhase === 'planning' || planExecutionState.todos.length === 0) && !pendingToolApproval && (React.createElement(Box, { marginY: 1 },
+            React.createElement(ActivityIndicator, { activity: getCurrentActivityType(), startTime: activityStartTime, detail: activityDetail, subActivities: subActivities, modelName: currentModelInfo.model }))),
+        planExecutionState.todos.length > 0 && (React.createElement(Box, { marginTop: 2, marginBottom: 1 },
+            React.createElement(TodoPanel, { todos: planExecutionState.todos, currentTodoId: planExecutionState.currentTodoId, isProcessing: isProcessing }))),
+        React.createElement(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Text, { color: "green", bold: true }, "> "),
+                React.createElement(Box, { flexGrow: 1 },
+                    React.createElement(CustomTextInput, { value: input, onChange: (value) => {
+                            if (showSessionBrowser || showSettings) {
+                                return;
+                            }
+                            setInput(value);
+                        }, onSubmit: handleSubmit, onHistoryPrev: isAnyPanelOpen ? undefined : handleHistoryPrev, onHistoryNext: isAnyPanelOpen ? undefined : handleHistoryNext, placeholder: isProcessing
+                            ? "AI is working..."
+                            : showSessionBrowser
+                                ? "Select a session or press ESC..."
+                                : showSettings
+                                    ? "Press ESC to close settings..."
+                                    : "Type your message... (@ files, / commands, Alt+Enter newline)", focus: !showSessionBrowser && !showSettings && !planExecutionState.askUserRequest })),
+                input.length > 0 && (React.createElement(Text, { color: input.length > 4000 ? 'red' : input.length > 2000 ? 'yellow' : 'gray', dimColor: true }, input.length.toLocaleString())))),
+        fileBrowserState.showFileBrowser && !isProcessing && (React.createElement(Box, { marginTop: 0 }, fileBrowserState.isLoadingFiles ? (React.createElement(Box, { borderStyle: "single", borderColor: "yellow", paddingX: 1 },
+            React.createElement(Spinner, { type: "dots" }),
+            React.createElement(Text, { color: "yellow" }, " Loading files..."))) : (React.createElement(FileBrowser, { filter: fileBrowserState.filterText, onSelect: handleFileSelect, onCancel: fileBrowserState.handleFileBrowserCancel, cachedFiles: fileBrowserState.cachedFileList })))),
+        commandBrowserState.showCommandBrowser && !isProcessing && !fileBrowserState.showFileBrowser && (React.createElement(Box, { marginTop: 0 },
+            React.createElement(CommandBrowser, { partialCommand: commandBrowserState.partialCommand, args: commandBrowserState.commandArgs, onSelect: handleCommandSelect, onCancel: commandBrowserState.handleCommandBrowserCancel }))),
+        showSessionBrowser && !isProcessing && (React.createElement(Box, { marginTop: 0 },
+            React.createElement(SessionBrowser, { onSelect: handleSessionSelect, onCancel: () => setShowSessionBrowser(false) }))),
+        showSettings && !isProcessing && (React.createElement(Box, { marginTop: 0 },
+            React.createElement(SettingsBrowser, { currentPlanningMode: planningMode, onPlanningModeChange: handleSettingsPlanningModeChange, onClose: handleSettingsClose }))),
+        showModelSelector && !isProcessing && (React.createElement(Box, { marginTop: 0 },
+            React.createElement(ModelSelector, { onSelect: handleModelSelect, onCancel: handleModelSelectorCancel }))),
+        showToolSelector && !isProcessing && (React.createElement(Box, { marginTop: 0 },
+            React.createElement(ToolSelector, { onClose: handleToolSelectorClose }))),
+        planExecutionState.askUserRequest && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(AskUserDialog, { request: planExecutionState.askUserRequest, onResponse: planExecutionState.handleAskUserResponse }))),
+        React.createElement(Box, { justifyContent: "space-between", paddingX: 1 }, isProcessing || planExecutionState.executionPhase === 'compacting' ? (React.createElement(React.Fragment, null,
+            React.createElement(Box, { flexDirection: "column" },
+                planExecutionState.executionPhase === 'compacting' ? (React.createElement(Box, null,
+                    React.createElement(Text, { color: "cyan" },
+                        React.createElement(Spinner, { type: "shark" })))) : null,
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: "magenta" },
+                        React.createElement(Spinner, { type: "star" })),
+                    React.createElement(Text, { color: "white" },
+                        ' ',
+                        clampText(getStatusText({
+                            phase: planExecutionState.executionPhase,
+                            todos: planExecutionState.todos,
+                            currentToolName,
+                        }) + '\u2026', Math.max(20, termWidth - 40))),
+                    React.createElement(Text, { color: "gray" },
+                        ' ',
+                        "(esc to interrupt \u00B7 ",
+                        formatElapsedTime(sessionElapsed),
+                        sessionTokens > 0 && ` · ↑ ${formatTokensCompact(sessionTokens)} tokens`,
+                        ")"))),
+            React.createElement(Box, null,
+                (() => {
+                    const ctxInfo = planExecutionState.getContextUsageInfo();
+                    const ctxColor = ctxInfo.percent < 50 ? 'green' : ctxInfo.percent < 80 ? 'yellow' : 'red';
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement(Text, { color: ctxColor },
+                            "Context (",
+                            formatTokensCompact(ctxInfo.tokens),
+                            " / ",
+                            ctxInfo.percent,
+                            "%)"),
+                        React.createElement(Text, { color: "gray" }, " \u2502 ")));
+                })(),
+                React.createElement(Text, { color: "cyan" }, currentModelInfo.model)))) : (React.createElement(React.Fragment, null,
+            React.createElement(Box, null,
+                React.createElement(Text, { color: executionMode === 'auto' ? 'green' : 'yellow', bold: true },
+                    "[",
+                    executionMode === 'auto' ? 'Auto' : 'Supervised',
+                    "]"),
+                React.createElement(Text, { color: "gray" }, " \u2502 "),
+                (() => {
+                    const ctxInfo = planExecutionState.getContextUsageInfo();
+                    const ctxColor = ctxInfo.percent < 50 ? 'green' : ctxInfo.percent < 80 ? 'yellow' : 'red';
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement(Text, { color: ctxColor },
+                            "Context (",
+                            formatTokensCompact(ctxInfo.tokens),
+                            " / ",
+                            ctxInfo.percent,
+                            "%)"),
+                        React.createElement(Text, { color: "gray" }, " \u2502 ")));
+                })(),
+                React.createElement(Text, { color: "gray" },
+                    getHealthIndicator(),
+                    " "),
+                React.createElement(Text, { color: "cyan" }, currentModelInfo.model),
+                React.createElement(Text, { color: "gray" }, " \u2502 "),
+                React.createElement(Text, { color: "gray" }, clampText(shortenPath(process.cwd()), Math.max(10, termWidth - 50))),
+                planExecutionState.todos.length > 0 && (React.createElement(React.Fragment, null,
+                    React.createElement(Text, { color: "gray" }, " \u2502 "),
+                    React.createElement(TodoStatusBar, { todos: planExecutionState.todos })))),
+            React.createElement(Text, { color: "gray", dimColor: true }, "Tab: mode \u2502 /help")))),
+        showLogFiles && (React.createElement(Box, { marginTop: 0 },
+            React.createElement(LogBrowser, { onClose: () => setShowLogFiles(false) })))));
+};
+export default PlanExecuteApp;
+//# sourceMappingURL=PlanExecuteApp.js.map