closer-code 1.0.0 → 1.0.1

package/src/closer-cli.jsx

@@ -5,12 +5,18 @@
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { render, Box, Text } from 'ink';
-import TextInput from 'ink-text-input';
 import { useInput } from 'ink';
 import { createConversation } from './conversation.js';
 import { getConfig, updateConfig } from './config.js';
+import { generateToolSummary } from './tools.js';
 import { createShortcutManager } from './shortcuts.js';
 import { createSnippetManager, SNIPPET_TEMPLATES } from './snippets.js';
+import { createHistoryManager } from './input/history.js';
+import { EnhancedTextInputWithShortcuts } from './input/enhanced-input.jsx';
+import FullscreenConversation from './components/fullscreen-conversation.jsx';
+import { ToolDetailPanel } from './components/tool-detail-view.jsx';
+import { safeSuspend, getPlatformName } from './utils/platform.js';
+import { useSmartThrottledState } from './hooks/use-throttled-state.js';
 import fs from 'fs';
 import path from 'path';
 
@@ -18,7 +24,10 @@ import path from 'path';
 function Panel({ title, children, borderColor = 'gray', flex = 1 }) {
   return (
     <Box
-      borderStyle="round"
+      borderTop={true}
+      borderBottom={true}
+      borderLeft={false}
+      borderRight={false}
       borderColor={borderColor}
       flexDirection="column"
       flexGrow={flex}
@@ -106,13 +115,20 @@ function TaskProgress({ plan }) {
 }
 
 // 工具执行显示组件
-function ToolExecution({ summary, timestamp }) {
+function ToolExecution({ summary, detailInfo, timestamp }) {
   return (
     <Box flexDirection="column" marginBottom={1} paddingX={1} borderStyle="single" borderColor="gray" width="100%">
+      {/* 第一行：简短摘要 */}
       <Box width="100%">
         <Text>{summary}</Text>
         <Text dim> [{timestamp}]</Text>
       </Box>
+      {/* 第二行：详细信息 */}
+      {detailInfo && (
+        <Box width="100%">
+          <Text dim color="gray">{detailInfo}</Text>
+        </Box>
+      )}
     </Box>
   );
 }
@@ -269,6 +285,8 @@ function App() {
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState('');
   const [isProcessing, setIsProcessing] = useState(false);
+  const [fullscreenMode, setFullscreenMode] = useState(false);
+  const [showToolsInFullscreen, setShowToolsInFullscreen] = useState(true); // 全屏模式下是否显示工具
   const [currentPlan, setCurrentPlan] = useState(null);
   const [toolExecutions, setToolExecutions] = useState([]);
   const [status, setStatus] = useState('Initializing...');
@@ -277,6 +295,35 @@ function App() {
   const [thinking, setThinking] = useState([]); // AI 思考过程
   const [thinkingEnabled, setThinkingEnabled] = useState(true); // Thinking 开关状态
   const [thinkingScrollPosition, setThinkingScrollPosition] = useState(0); // Thinking滚动位置
+  const [showToolDetail, setShowToolDetail] = useState(false); // 工具详情面板开关
+  const [toolDetailIndex, setToolDetailIndex] = useState(0); // 工具详情面板选中索引
+
+  // 节流更新 Hook
+  const activityUpdate = useSmartThrottledState(setActivity, {
+    throttleDelay: 1500,
+    immediateTypes: ['error', 'abort']
+  });
+
+  const thinkingUpdate = useSmartThrottledState(setThinking, {
+    throttleDelay: 1500,
+    immediateTypes: ['tool_start', 'tool_complete', 'thinking_signature',
+                    'thinking_redacted', 'abort']
+  });
+
+  const messagesUpdate = useSmartThrottledState(setMessages, {
+    throttleDelay: 1500,
+    immediateTypes: ['user', 'error', 'system']
+  });
+
+  const toolExecutionsUpdate = useSmartThrottledState(setToolExecutions, {
+    throttleDelay: 1500,
+    immediateTypes: ['complete', 'error']
+  });
+
+  const planUpdate = useSmartThrottledState(setCurrentPlan, {
+    throttleDelay: 1500,
+    immediateTypes: ['completed', 'failed']
+  });
 
   // 终端尺寸状态
   const [terminalSize, setTerminalSize] = useState({
@@ -299,21 +346,50 @@ function App() {
     };
   }, []);
 
+  // 监听 SIGCONT (fg 恢复信号)
+  useEffect(() => {
+    const handleContinue = () => {
+      // 恢复 raw mode
+      if (process.stdin.isTTY) {
+        process.stdin.setRawMode(true);
+        process.stdin.resume();
+      }
+
+      // 清屏重绘
+      console.clear();
+
+      // 强制刷新终端尺寸，触发重新渲染
+      setTerminalSize({
+        columns: process.stdout.columns || 80,
+        rows: process.stdout.rows || 30
+      });
+    };
+
+    process.on('SIGCONT', handleContinue);
+
+    return () => {
+      process.off('SIGCONT', handleContinue);
+    };
+  }, []);
+
   // 自定义滚动管理
   const [messageLines, setMessageLines] = useState([]); // 所有消息行
   const [scrollPosition, setScrollPosition] = useState(0); // 当前滚动位置
-  const conversationHeight = Math.floor(terminalSize.rows * 0.65) - 2; // Conversation区域高度（行数）
+  const conversationHeight = Math.floor(terminalSize.rows * 0.65) - 4; // Conversation区域高度（行数）
 
   // Thinking区域滚动管理
   const [thinkingLines, setThinkingLines] = useState([]); // 所有thinking行
-  const thinkingHeight = 3; // Thinking区域固定显示3行
-  
+  const thinkingHeight = 4; // Thinking区域固定显示4行（增加1行以便更好查看标题）
+
   // Ctrl+C 退出控制
   const [lastCtrlC, setLastCtrlC] = useState(0);
   const [showExitHint, setShowExitHint] = useState(false);
   const [abortMessage, setAbortMessage] = useState(null); // 中止任务的提示
-  const abortControllerRef = useRef(null);
+  const [aborting, setAborting] = useState(false); // 是否正在中止
+  const conversationRef = useRef(null); // Conversation 对象引用
   const inputRef = useRef(''); // 用于在 useInput 中获取最新的 input 值
+  // 历史记录管理器
+  const [inputHistory] = useState(() => createHistoryManager({ maxSize: 100 }));
 
   // 当消息更新时，重新计算行
   useEffect(() => {
@@ -354,27 +430,56 @@ function App() {
 
   // 键盘输入处理（用于滚动和 Ctrl+C）
   useInput((input, key) => {
+    // 处理 Ctrl+Z - 挂起程序（发送 SIGTSTP 信号）
+    if (key.ctrl && input === 'z') {
+      // 使用安全的挂起函数
+      const success = safeSuspend();
+
+      if (!success) {
+        // 挂起失败或不支持，显示提示
+        console.log(`\n⚠️  ${getPlatformName()} 不支持 Ctrl+Z 挂起\n`);
+        console.log('替代方案：');
+        console.log('  - 使用 Ctrl+C 退出程序');
+        console.log('  - 或使用 Ctrl+G 切换全屏模式\n');
+      }
+      return;
+    }
+
+    // 处理 Ctrl+G - 切换全屏模式
+    if (key.ctrl && input === 'g') {
+      setFullscreenMode(prev => !prev);
+      return;
+    }
+
+    // 处理 Ctrl+T - 全屏模式下切换工具显示，普通模式下切换工具详情面板
+    if (key.ctrl && input === 't') {
+      if (fullscreenMode) {
+        // 全屏模式：切换工具显示
+        setShowToolsInFullscreen(prev => {
+          const newValue = !prev;
+          setActivity(newValue ? '🔧 工具显示已开启' : '🚫 工具显示已关闭');
+          setTimeout(() => setActivity(null), 1500);
+          return newValue;
+        });
+      } else {
+        // 普通模式：切换工具详情面板
+        setShowToolDetail(prev => {
+          const newValue = !prev;
+          setActivity(newValue ? '📋 工具详情面板已打开' : '📋 工具详情面板已关闭');
+          setTimeout(() => setActivity(null), 1500);
+          return newValue;
+        });
+      }
+      return;
+    }
+
     // 处理 Ctrl+C 和 ESC（始终有效，即使在输入模式）
     if ((key.ctrl && input === 'c') || key.escape) {
       const now = Date.now();
 
       if (isProcessing) {
         // 如果 AI 正在执行，中止对话
-        if (abortControllerRef.current) {
-          abortControllerRef.current.abort();
-          abortControllerRef.current = null;
-        }
-        setIsProcessing(false);
-        setActivity('❌ 用户中止了 AI 执行');
-        setAbortMessage('❌ AI 执行已被中止');
-        setThinking(prev => [...prev, `❌ [${new Date().toLocaleTimeString()}] 用户中止了 AI 执行`]);
-
-        // 3秒后清除中止提示
-        setTimeout(() => {
-          setAbortMessage(null);
-          setActivity(null);
-        }, 3000);
-
+        handleAbort();
         return;
       }
 
@@ -404,9 +509,16 @@ function App() {
       return;
     }
 
+    // 方向键：让 MultilineTextInput 处理历史记录导航和多行光标移动
+    // 父组件不再拦截这些事件
+    if (key.upArrow || key.downArrow) {
+      // 始终让子组件处理
+      return false;
+    }
+
     // 处理滚动（使用自定义滚动系统）
     // PageUp/PageDown - 始终可用于滚动
-    if (key.pageUp) {
+    else if (key.pageUp) {
       const delta = Math.min(10, conversationHeight);
       setScrollPosition(prev => Math.max(0, prev - delta));
     } else if (key.pageDown) {
@@ -414,15 +526,6 @@ function App() {
       const maxPosition = Math.max(0, messageLines.length - conversationHeight);
       setScrollPosition(prev => Math.min(maxPosition, prev + delta));
     }
-    // 方向键 - 仅在输入框为空时滚动（避免与光标移动冲突）
-    else if (inputRef.current.length === 0) {
-      if (key.upArrow) {
-        setScrollPosition(prev => Math.max(0, prev - 1));
-      } else if (key.downArrow) {
-        const maxPosition = Math.max(0, messageLines.length - conversationHeight);
-        setScrollPosition(prev => Math.min(maxPosition, prev + 1));
-      }
-    }
     // Alt 键组合 - 始终可用
     else if (key.alt && key.upArrow) {
       setScrollPosition(prev => Math.max(0, prev - 1));
@@ -430,15 +533,32 @@ function App() {
       const maxPosition = Math.max(0, messageLines.length - conversationHeight);
       setScrollPosition(prev => Math.min(maxPosition, prev + 1));
     }
-    // Shift + 方向键 - 滚动Thinking区域
+    // Shift + 方向键 - 工具详情面板打开时切换工具，否则滚动Thinking区域
     else if (key.shift && key.upArrow) {
-      setThinkingScrollPosition(prev => Math.max(0, prev - 1));
+      if (showToolDetail && toolExecutions.length > 0) {
+        setToolDetailIndex(prev => Math.max(0, prev - 1));
+      } else {
+        setThinkingScrollPosition(prev => Math.max(0, prev - 1));
+      }
     } else if (key.shift && key.downArrow) {
-      const maxPosition = Math.max(0, thinkingLines.length - thinkingHeight);
-      setThinkingScrollPosition(prev => Math.min(maxPosition, prev + 1));
+      if (showToolDetail && toolExecutions.length > 0) {
+        setToolDetailIndex(prev => Math.min(toolExecutions.length - 1, prev + 1));
+      } else {
+        const maxPosition = Math.max(0, thinkingLines.length - thinkingHeight);
+        setThinkingScrollPosition(prev => Math.min(maxPosition, prev + 1));
+      }
     }
   }, { capture: true }); // capture: true 确保能捕获按键
 
+  // Token 统计状态
+  const [tokenStats, setTokenStats] = useState({
+    total: 0,
+    limit: 4096, // 默认token限制
+    input: 0,
+    output: 0,
+    percentage: 0
+  });
+
   // 初始化
   useEffect(() => {
     async function init() {
@@ -446,8 +566,19 @@ function App() {
         const cfg = getConfig();
         setConfig(cfg);
 
+        // 从配置中获取token限制
+        const provider = cfg.ai?.provider || 'anthropic';
+        const tokenLimit = cfg.ai?.[provider]?.maxTokens || 4096;
+
+        // 更新token统计状态
+        setTokenStats(prev => ({
+          ...prev,
+          limit: tokenLimit
+        }));
+
         const conv = await createConversation(cfg);
         setConversation(conv);
+        conversationRef.current = conv; // 保存引用
 
         // 欢迎消息
         const welcomeMsg = {
@@ -478,9 +609,77 @@ Type your message or command to get started.`
   }, []);
 
 
+  // 更新token统计信息
+  const updateTokenStats = useCallback((newInputTokens = 0, newOutputTokens = 0) => {
+    setTokenStats(prev => {
+      const newInput = prev.input + newInputTokens;
+      const newOutput = prev.output + newOutputTokens;
+      const newTotal = newInput + newOutput;
+      const newPercentage = Math.round((newTotal / prev.limit) * 100);
+
+      return {
+        ...prev,
+        input: newInput,
+        output: newOutput,
+        total: newTotal,
+        percentage: newPercentage
+      };
+    });
+  }, []);
+
+  // 估算用户消息的token数（在没有API计数的情况下使用）
+  const estimateUserTokens = useCallback((text) => {
+    // 简单估算：中文字符和英文字符分别处理
+    const chineseChars = (text.match(/[\u4e00-\u9fa5]/g) || []).length;
+    const englishChars = text.length - chineseChars;
+    // 中文字符约2-3个token，英文字符约0.25个token（按单词计算）
+    return Math.ceil(chineseChars * 2.5 + englishChars * 0.25);
+  }, []);
+
+  /**
+   * 处理 Ctrl+C 中止
+   * 使用 Abort Fence 机制中止当前对话
+   */
+  const handleAbort = useCallback(async () => {
+    if (!isProcessing || aborting) {
+      return;
+    }
+
+    setAborting(true);
+    setActivity('⚠️ 正在中止任务...');
+    setThinking(prev => [...prev, `⚠️ [${new Date().toLocaleTimeString()}] 正在中止当前任务...`]);
+
+    try {
+      if (conversationRef.current) {
+        // 调用 Conversation 的 abortCurrentPhase 方法
+        await conversationRef.current.abortCurrentPhase();
+      }
+    } catch (error) {
+      console.error('[Abort Error]', error.message);
+      setThinking(prev => [...prev, `❌ [${new Date().toLocaleTimeString()}] 中止失败: ${error.message}`]);
+    } finally {
+      setAborting(false);
+      setIsProcessing(false);
+      setActivity('❌ 任务已中止');
+      setAbortMessage('❌ AI 执行已被中止');
+
+      // 3秒后清除中止提示
+      setTimeout(() => {
+        setAbortMessage(null);
+        setActivity(null);
+      }, 3000);
+    }
+  }, [isProcessing, aborting]);
+
   // 处理用户输入
   const handleSubmit = useCallback(async (value) => {
-    if (!conversation || isProcessing) return;
+    if (!conversation || isProcessing) {
+      // 如果正在中止，等待
+      if (aborting) {
+        setActivity('⏳ 等待中止完成...');
+      }
+      return;
+    }
 
     setInput('');
     setIsProcessing(true);
@@ -490,6 +689,10 @@ Type your message or command to get started.`
     const userMsg = { role: 'user', content: value };
     setMessages(prev => [...prev, userMsg]);
 
+    // 估算用户消息的token数（在没有API计数的情况下使用）
+    const userTokens = estimateUserTokens(value);
+    updateTokenStats(userTokens, 0);
+
     // 处理特殊命令
     if (value.startsWith('/')) {
       await handleCommand(value);
@@ -499,23 +702,19 @@ Type your message or command to get started.`
     }
 
     try {
-      // 创建 AbortController 用于中止
-      const abortController = new AbortController();
-      abortControllerRef.current = abortController;
-      
       // 记录思考开始
       setThinking(prev => [...prev, `🤔 [${new Date().toLocaleTimeString()}] 开始分析用户请求...`]);
-      
-      // 发送到 AI
+
+      // 发送到 AI（Conversation 内部会管理 AbortController）
       setActivity('🤔 AI 正在思考...');
       const response = await conversation.sendMessage(
         value,
         (progress) => {
           // 处理流式响应（使用 SDK 事件监听器 API）
           if (progress.type === 'thinking') {
-            // AI thinking 内容 - 逐字显示
-            setActivity('🤔 AI 正在深度思考...');
-            setThinking(prev => {
+            // AI thinking 内容 - 逐字显示（使用节流更新）
+            activityUpdate.updateImmediate('🤔 AI 正在深度思考...');
+            thinkingUpdate.updateSmart(prev => {
               const newThinking = [...prev];
 
               // 检查最后一条是否是当前 thinking（未完成的）
@@ -534,10 +733,10 @@ Type your message or command to get started.`
               }
 
               return newThinking.slice(-30); // 保留最后 30 条thinking记录
-            });
+            }, 'thinking');
           } else if (progress.type === 'thinking_signature') {
-            // Thinking 签名
-            setThinking(prev => {
+            // Thinking 签名（立即更新）
+            thinkingUpdate.updateSmart(prev => {
               const newThinking = [...prev];
               // 计算累计的thinking内容长度
               const totalThinkingLength = prev
@@ -547,22 +746,22 @@ Type your message or command to get started.`
                   const content = entry.replace(/^🤔 \[.*?\] /, '');
                   return sum + content.length;
                 }, 0);
-              
+
               newThinking.push(`✅ [${new Date().toLocaleTimeString()}] Thinking 完成 (${totalThinkingLength} 字符, ~${Math.ceil(totalThinkingLength/4)} tokens)`);
               return newThinking.slice(-30);
-            });
+            }, 'thinking_signature');
           } else if (progress.type === 'thinking_redacted') {
-            // Redacted thinking（被编辑的思考内容）
-            setThinking(prev => {
+            // Redacted thinking（立即更新）
+            thinkingUpdate.updateSmart(prev => {
               const newThinking = [...prev];
               newThinking.push(`🔒 [${new Date().toLocaleTimeString()}] Redacted thinking: ${progress.content}`);
               return newThinking.slice(-10);
-            });
+            }, 'thinking_redacted');
           } else if (progress.type === 'token') {
-            // 真正的流式文本
-            setActivity('✍️ AI 正在输入...');
-            setThinking(prev => [...prev, `✍️ [${new Date().toLocaleTimeString()}] 生成响应中...`]);
-            setMessages(prev => {
+            // 真正的流式文本（使用节流更新）
+            activityUpdate.updateImmediate('✍️ AI 正在输入...');
+            thinkingUpdate.updateThrottled(prev => [...prev, `✍️ [${new Date().toLocaleTimeString()}] 生成响应中...`]);
+            messagesUpdate.updateSmart(prev => {
               const lastMsg = prev[prev.length - 1];
 
               if (lastMsg && lastMsg.role === 'assistant' && !lastMsg.complete) {
@@ -588,94 +787,92 @@ Type your message or command to get started.`
           } else if (progress.type === 'tool_use_start') {
             // 检测到工具调用
             const thinkingMsg = `⚡ [${new Date().toLocaleTimeString()}] 检测到工具调用: ${progress.toolName}`;
-            setActivity(`⚡ 准备执行工具: ${progress.toolName}...`);
-            setThinking(prev => [...prev, thinkingMsg]);
+            activityUpdate.updateImmediate(`⚡ 准备执行工具: ${progress.toolName}...`);
+            thinkingUpdate.updateSmart(prev => [...prev, thinkingMsg], 'tool_start');
           } else if (progress.type === 'plan_created') {
             // AI Planning 被创建
-            setCurrentPlan(progress.plan);
-            setThinking(prev => [...prev, `📋 [${new Date().toLocaleTimeString()}] AI Planning 已创建`]);
+            planUpdate.updateImmediate(progress.plan);
+            thinkingUpdate.updateThrottled(prev => [...prev, `📋 [${new Date().toLocaleTimeString()}] AI Planning 已创建`]);
           } else if (progress.type === 'plan_progress') {
-            // AI Planning 进度更新
-            setCurrentPlan(progress.plan);
+            // AI Planning 进度更新（节流更新）
+            planUpdate.updateThrottled(progress.plan);
           } else if (progress.type === 'tool_start') {
             const thinkingMsg = `⚡ [${new Date().toLocaleTimeString()}] 调用工具: ${progress.tool}`;
-            setActivity(`⚡ 执行工具: ${progress.tool}...`);
-            setThinking(prev => [...prev, thinkingMsg]);
+            activityUpdate.updateImmediate(`⚡ 执行工具: ${progress.tool}...`);
+            thinkingUpdate.updateSmart(prev => [...prev, thinkingMsg], 'tool_start');
             // 存储工具信息，包括 input 和 result 引用（用于生成摘要）
-            setToolExecutions(prev => {
+            toolExecutionsUpdate.updateSmart(prev => {
               const newExecs = [...prev, {
+                id: Date.now(),
                 tool: progress.tool,
                 timestamp: new Date().toLocaleTimeString(),
                 input: progress.input,
-                result: null
+                result: null,
+                status: 'running',
+                startTime: Date.now(),
+                duration: null
               }];
               // 只保留最近 10 个
-              return newExecs.slice(-10);
-            });
+              const sliced = newExecs.slice(-10);
+              // 自动将索引指向最新的工具
+              setToolDetailIndex(sliced.length - 1);
+              return sliced;
+            }, 'tool_start');
           } else if (progress.type === 'tool_complete') {
             const resultMsg = progress.result.success ? '✓ 成功' : '✗ 失败';
-            setActivity('📊 处理工具结果...');
-            setThinking(prev => [...prev, `📊 [${new Date().toLocaleTimeString()}] 工具执行结果: ${resultMsg}`]);
+            activityUpdate.updateImmediate('📊 处理工具结果...');
+            thinkingUpdate.updateSmart(prev => [...prev, `📊 [${new Date().toLocaleTimeString()}] 工具执行结果: ${resultMsg}`], 'tool_complete');
             // 更新工具执行结果，并生成摘要
-            setToolExecutions(prev => {
+            toolExecutionsUpdate.updateSmart(prev => {
               if (prev.length === 0) return prev;
               const newExecs = [...prev];
-              const lastExec = newExecs[newExecs.length - 1];
-
-              // 生成简短摘要（不使用完整数据）
-              let summary = '';
-              const tool = lastExec.tool;
-              const input = lastExec.input || {};
-              const result = progress.result;
-
-              // 根据工具类型生成摘要
-              if (tool === 'bash') {
-                const cmd = input.command || '';
-                const parts = cmd.trim().split(/\s+/);
-                const command = parts[0] || 'bash';
-                const arg1 = parts[1] ? parts[1].substring(0, 20) : '';
-                summary = result.success
-                  ? `✓ ${command} ${arg1}`
-                  : `✗ ${command}`;
-              } else if (tool === 'readFile') {
-                const filePath = input.filePath || '';
-                const fileName = filePath.split('/').pop().substring(0, 20);
-                summary = result.success
-                  ? `📖 ${fileName}`
-                  : `✗ ${fileName}`;
-              } else if (tool === 'writeFile') {
-                const filePath = input.filePath || '';
-                const fileName = filePath.split('/').pop().substring(0, 20);
-                summary = result.success
-                  ? `✍️ ${fileName}`
-                  : `✗ ${fileName}`;
-              } else if (tool === 'editFile') {
-                const filePath = input.filePath || '';
-                const fileName = filePath.split('/').pop().substring(0, 20);
-                summary = result.success
-                  ? `✏️ ${fileName}`
-                  : `✗ ${fileName}`;
-              } else {
-                summary = result.success
-                  ? `✓ ${tool}`
-                  : `✗ ${tool}`;
-              }
-
-              newExecs[newExecs.length - 1] = {
+              // 找到最后一个 running 状态的工具
+              const lastRunningIdx = newExecs.findLastIndex(e => e.status === 'running');
+              if (lastRunningIdx === -1) return prev;
+              const lastExec = newExecs[lastRunningIdx];
+
+              // 使用 generateToolSummary 生成双行显示
+              const { summary, detailInfo } = generateToolSummary(
+                lastExec.tool,
+                lastExec.input || {},
+                progress.result
+              );
+
+              newExecs[lastRunningIdx] = {
                 ...lastExec,
                 result: progress.result,
-                summary: summary
+                status: progress.result.success ? 'success' : 'error',
+                duration: Date.now() - lastExec.startTime,
+                summary,
+                detailInfo
               };
               return newExecs;
             });
           }
         }
       );
-      
-      abortControllerRef.current = null;
+
+      // 检查是否是 abort 结果
+      if (response.aborted) {
+        thinkingUpdate.updateSmart(prev => [...prev, `❌ [${new Date().toLocaleTimeString()}] 对话已中止: ${response.abortReason}`], 'abort');
+        return;
+      }
+
+      // 使用API返回的准确token使用信息
+      if (response.usage) {
+        const { input_tokens = 0, output_tokens = 0 } = response.usage;
+        updateTokenStats(input_tokens, output_tokens);
+
+        // 在thinking中记录准确的token使用
+        thinkingUpdate.updateSmart(prev => [...prev, `📊 [${new Date().toLocaleTimeString()}] API Token使用: 输入=${input_tokens}, 输出=${output_tokens}`], 'thinking');
+      } else {
+        // 如果没有usage信息，使用估算
+        const aiTokens = Math.ceil(response.content.length / 4);
+        updateTokenStats(0, aiTokens);
+      }
 
       // 更新最后的消息为完整响应
-      setMessages(prev => {
+      messagesUpdate.updateSmart(prev => {
         const lastIdx = prev.findIndex(m => m.role === 'assistant' && !m.complete);
         if (lastIdx >= 0) {
           return [
@@ -685,6 +882,7 @@ Type your message or command to get started.`
               content: response.content,
               complete: true,
               toolCalls: response.toolCalls,
+              usage: response.usage,
               key: Date.now()
             }
           ];
@@ -694,22 +892,23 @@ Type your message or command to get started.`
             content: response.content,
             complete: true,
             toolCalls: response.toolCalls,
+            usage: response.usage,
             key: Date.now()
           }];
         }
       });
 
     } catch (error) {
-      setMessages(prev => [...prev, {
+      messagesUpdate.updateSmart(prev => [...prev, {
         role: 'error',
         content: `Error: ${error.message}`,
         key: Date.now()
-      }]);
+      }], 'error');
     } finally {
       setIsProcessing(false);
-      setActivity(null);
+      activityUpdate.updateImmediate(null);
     }
-  }, [conversation, isProcessing]);
+  }, [conversation, isProcessing, updateTokenStats]);
 
   // 处理命令
   const handleCommand = async (cmd) => {
@@ -722,6 +921,14 @@ Type your message or command to get started.`
         setActivity('🗑️ 清除对话历史...');
         setMessages([]);
         conversation.clearHistory();
+        // 重置token统计
+        setTokenStats({
+          total: 0,
+          limit: tokenStats.limit, // 保持原有的限制
+          input: 0,
+          output: 0,
+          percentage: 0
+        });
         setActivity(null);
         break;
 
@@ -803,10 +1010,31 @@ Type your message or command to get started.`
 /plan <task> - Create and execute a task plan
 /learn - Learn project patterns
 /status - Show conversation summary
+/history - Show input history statistics
 /help - Show this help message`
         }]);
         break;
 
+      case '/history':
+        setActivity('📊 获取历史记录统计...');
+        const historyStats = inputHistory.getStats();
+        const historyInfo = {
+          role: 'system',
+          content: `Input History Statistics:
+• Total entries: ${historyStats.total}
+• Current index: ${historyStats.currentIndex}
+• Search results: ${historyStats.searchResults}
+• History file: ~/.closer-code/closer-input-history
+
+Tips:
+• Use ↑/↓ arrows to browse history
+• History is automatically saved
+• Duplicate entries are filtered`
+        };
+        setMessages(prev => [...prev, historyInfo]);
+        setActivity(null);
+        break;
+
       default:
         setMessages(prev => [...prev, {
           role: 'system',
@@ -815,6 +1043,26 @@ Type your message or command to get started.`
     }
   };
 
+  // 根据token使用情况确定颜色
+  const getTokenColor = () => {
+    const percentage = tokenStats.percentage;
+    if (percentage < 70) return 'green';
+    if (percentage < 90) return 'yellow';
+    return 'red';
+  };
+
+
+  // 全屏模式：显示完整对话历史（包含工具详情）
+  if (fullscreenMode) {
+    return (
+      <FullscreenConversation
+        messages={messages}
+        tokenStats={tokenStats}
+        toolExecutions={toolExecutions}
+        showTools={showToolsInFullscreen}
+      />
+    );
+  }
   if (!config) {
     return (
       <Box padding={1}>
@@ -824,7 +1072,7 @@ Type your message or command to get started.`
   }
 
   return (
-    <Box flexDirection="column" padding={1} height="100%">
+    <Box flexDirection="column" padding={1}>
       {/* 顶部状态栏 */}
       <Box
         borderStyle="bold"
@@ -846,10 +1094,13 @@ Type your message or command to get started.`
 
       {/* Thinking 区域 - 占17.5%高度 */}
       <Box
-        borderStyle="round"
+        borderTop={true}
+        borderBottom={true}
+        borderLeft={false}
+        borderRight={false}
+	borderStyle="single"
         borderColor="cyan"
         flexDirection="column"
-        flexGrow={17.5}
         marginBottom={1}
         width="100%"
       >
@@ -859,7 +1110,7 @@ Type your message or command to get started.`
             <Text dim color="gray"> [Tab: {thinkingEnabled ? 'ON ✅' : 'OFF ❌'}] [Shift+↑/↓: Scroll]</Text>
           </Text>
         </Box>
-        <Box flexGrow={1} flexDirection="column" overflow="hidden" width="100%">
+        <Box  flexDirection="column" width="100%">
           {thinkingLines.length > 0 ? (
             <>
               {/* 滚动提示 */}
@@ -880,30 +1131,37 @@ Type your message or command to get started.`
               />
             </>
           ) : (
-            <Box justifyContent="center" alignItems="center" height="100%">
+            <Box justifyContent="center" alignItems="center">
               <Text dim color="gray">No thinking messages yet</Text>
             </Box>
           )}
         </Box>
       </Box>
 
-      {/* 主内容区域 - 占剩余65% */}
-      <Box flexGrow={65} flexDirection="row">
+      {/* 主内容区域 - 工具详情面板打开时占50%，否则占65% */}
+      <Box flexDirection="row">
         <Box width="100%">
           {/* 左侧：对话面板 - 占67%宽度 */}
           <Box
-            borderStyle="round"
             borderColor="blue"
+            borderTop={true}
+            borderBottom={true}
+            borderLeft={false}
+            borderRight={false}
+	    borderStyle="single"
             flexDirection="column"
             flexGrow={67}
             marginRight={1}
             width="67%"
-            height="100%"
+            height="60%"
           >
             <Box borderBottom={false} borderColor="blue" paddingBottom={0} marginBottom={1}>
-              <Text bold color="blue">💬 Conversation</Text>
+              <Text bold color="blue">
+                💬 Conversation
+                <Text color={getTokenColor()}> [Tokens: {tokenStats.total.toLocaleString()}/{tokenStats.limit.toLocaleString()}]</Text>
+              </Text>
             </Box>
-            <Box flexDirection="column" overflow="hidden" width="100%" height="100%">
+            <Box flexDirection="column" overflow="hidden" width="100%">
               {messageLines.length > 0 ? (
                 <>
                   {/* 滚动提示 */}
@@ -924,7 +1182,7 @@ Type your message or command to get started.`
                   />
                 </>
               ) : (
-                <Box justifyContent="center" alignItems="center" height="100%">
+                <Box justifyContent="center" alignItems="center" height="60%">
                   <Text dim>No messages yet</Text>
                 </Box>
               )}
@@ -932,13 +1190,17 @@ Type your message or command to get started.`
           </Box>
 
           {/* 右侧：任务和工具面板 - 占33%宽度 */}
-          <Box flexDirection="column" flexGrow={33} width="33%" height="100%">
-            {/* 任务进度 - 占50%高度 */}
+          <Box flexDirection="column" flexGrow={33} width="33%" height="60%">
+            {/* 任务进度 - 占46%高度（减少4个单位以减少2行高度） */}
             <Box
-              borderStyle="round"
+              borderTop={true}
+              borderBottom={true}
+              borderLeft={false}
+              borderRight={false}
+	      borderStyle="single"
               borderColor="yellow"
               flexDirection="column"
-              flexGrow={50}
+              flexGrow={46}
               marginBottom={1}
               width="100%"
             >
@@ -952,12 +1214,16 @@ Type your message or command to get started.`
               )}
             </Box>
 
-            {/* 工具执行 - 占50%高度 */}
+            {/* 工具执行 - 占54%高度（相应增加以保持平衡） */}
             <Box
-              borderStyle="round"
+              borderTop={true}
+              borderBottom={true}
+              borderLeft={false}
+              borderRight={false}
+	      borderStyle="single"
               borderColor="green"
               flexDirection="column"
-              flexGrow={50}
+              flexGrow={54}
               width="100%"
             >
               <Box borderBottom={false} borderColor="green" paddingBottom={0} marginBottom={1}>
@@ -979,7 +1245,9 @@ Type your message or command to get started.`
       {/* 活动提示 */}
       {activity && (
         <Box
-          borderStyle="round"
+          borderTop={true}
+          borderBottom={true}
+          borderStyle="single"
           borderColor={abortMessage ? "red" : "yellow"}
           paddingX={1}
           marginTop={1}
@@ -992,7 +1260,9 @@ Type your message or command to get started.`
       {/* 退出提示 */}
       {showExitHint && (
         <Box
-          borderStyle="round"
+          borderTop={true}
+          borderBottom={true}
+          borderStyle="single"
           borderColor="red"
           paddingX={1}
           marginTop={1}
@@ -1002,26 +1272,44 @@ Type your message or command to get started.`
         </Box>
       )}
 
+      {/* 工具详情面板 - 当打开时占用较大空间 */}
+      {showToolDetail && (
+        <ToolDetailPanel
+          tools={toolExecutions}
+          visible={showToolDetail}
+          onClose={() => setShowToolDetail(false)}
+          height={Math.floor(terminalSize.rows * 0.45)}
+          selectedIndex={toolDetailIndex}
+        />
+      )}
+
       {/* 输入区域 */}
-      <Box
-        borderStyle="double"
-        borderColor="cyan"
-        paddingX={1}
-        marginTop={activity ? 0 : 1}
-      >
-        <Box marginRight={1}>
-          <Text bold color="cyan">❯</Text>
+      <Box flexDirection="column" marginTop={activity ? 0 : 1}>
+        {/* 输入区域标记 */}
+        <Box marginBottom={1} paddingLeft={1}>
+          <Text dim color="cyan">
+            {isProcessing ? '⏳ 处理中...' : '▶ 输入消息'}
+          </Text>
+          <Text dim color="gray">
+            {' '}(Enter发送, Ctrl+Enter换行)
+          </Text>
+        </Box>
+
+        {/* 输入框 - 无边框，方便鼠标复制 */}
+        <Box paddingLeft={1} paddingRight={1}>
+          <EnhancedTextInputWithShortcuts
+            value={input}
+            onChange={(value) => {
+              setInput(value);
+              inputRef.current = value;
+            }}
+            onSubmit={handleSubmit}
+            placeholder="在这里输入..."
+            disabled={isProcessing}
+            history={inputHistory}
+            showHistoryIndicator={true}
+          />
         </Box>
-        <TextInput
-          value={input}
-          onChange={(value) => {
-            setInput(value);
-            inputRef.current = value;
-          }}
-          onSubmit={handleSubmit}
-          placeholder="Type a message or /help for commands..."
-          disabled={isProcessing}
-        />
       </Box>
     </Box>
   );