refactor: adjust frontend layout

static/app.js

@@ -200,8 +200,10 @@ async function bootstrapApp() {
                 // 对话压缩状态
                 compressing: false,
 
-                // 设置菜单状态
+                // 输入/快捷菜单状态
                 settingsOpen: false,
+                quickMenuOpen: false,
+                inputLineCount: 1,
                 // 思考块滚动锁
                 thinkingScrollLocks: new Map(),
 
@@ -254,8 +256,7 @@ async function bootstrapApp() {
                 this.loadInitialData();
             }, 500);
             
-            document.addEventListener('click', this.handleClickOutsideSettings);
+            document.addEventListener('click', this.handleClickOutsideQuickMenu);
-            document.addEventListener('click', this.handleClickOutsideToolMenu);
             document.addEventListener('click', this.handleClickOutsidePanelMenu);
             window.addEventListener('popstate', this.handlePopState);
 
@@ -291,11 +292,14 @@ async function bootstrapApp() {
                     this.fetchSubAgents();
                 }
             }, 5000);
+
+            this.$nextTick(() => {
+                this.autoResizeInput();
+            });
         },
 
         beforeUnmount() {
-            document.removeEventListener('click', this.handleClickOutsideSettings);
+            document.removeEventListener('click', this.handleClickOutsideQuickMenu);
-            document.removeEventListener('click', this.handleClickOutsideToolMenu);
             document.removeEventListener('click', this.handleClickOutsidePanelMenu);
             window.removeEventListener('popstate', this.handlePopState);
             if (this.onDocumentClick) {
@@ -316,6 +320,12 @@ async function bootstrapApp() {
             }
         },
 
+        watch: {
+            inputMessage() {
+                this.autoResizeInput();
+            }
+        },
+        
         methods: {
             openGuiFileManager() {
                 window.open('/file-manager', '_blank');
@@ -1310,6 +1320,8 @@ async function bootstrapApp() {
                 
                 this.settingsOpen = false;
                 this.toolMenuOpen = false;
+                this.quickMenuOpen = false;
+                this.inputLineCount = 1;
                 this.toolSettingsLoading = false;
                 this.toolSettings = [];
                 
@@ -1696,6 +1708,9 @@ async function bootstrapApp() {
                         const metadata = message.metadata || {};
                         const appendPayloadMeta = metadata.append_payload;
                         const modifyPayloadMeta = metadata.modify_payload;
+                        const isAppendMessage = message.name === 'append_to_file';
+                        const isModifyMessage = message.name === 'modify_file';
+                        const containsAppendMarkers = /<<<\s*(APPEND|MODIFY)/i.test(content || '') || /<<<END_\s*(APPEND|MODIFY)>>>/i.test(content || '');
                         
                         let textContent = content;
                         if (!message.reasoning_content) {
@@ -1738,7 +1753,7 @@ async function bootstrapApp() {
                             console.log('添加modify占位信息:', modifyPayloadMeta.path);
                         }
                         
-                        if (textContent && !appendPayloadMeta && !modifyPayloadMeta) {
+                        if (textContent && !appendPayloadMeta && !modifyPayloadMeta && !isAppendMessage && !isModifyMessage && !containsAppendMarkers) {
                             currentAssistantMessage.actions.push({
                                 id: `history-text-${Date.now()}-${Math.random()}`,
                                 type: 'text',
@@ -1822,22 +1837,7 @@ async function bootstrapApp() {
                                 }
                                 console.log(`更新工具结果: ${message.name} -> ${message.content?.substring(0, 50)}...`);
                                 
-                                if (message.name === 'append_to_file' && result && typeof result === 'object') {
+                                // append_to_file 的摘要在 append_payload 占位中呈现，此处无需重复
-                                    const appendSummary = {
-                                        path: result.path || '未知文件',
-                                        success: result.success !== false,
-                                        summary: result.message || (result.success === false ? '追加失败' : '追加完成'),
-                                        lines: result.lines || 0,
-                                        bytes: result.bytes || 0,
-                                        forced: !!result.forced
-                                    };
-                                    currentAssistantMessage.actions.push({
-                                        id: `history-append-${Date.now()}-${Math.random()}`,
-                                        type: 'append',
-                                        append: appendSummary,
-                                        timestamp: Date.now()
-                                    });
-                                }
                             } else {
                                 console.warn('找不到对应的工具调用:', message.name, message.tool_call_id);
                             }
@@ -2319,7 +2319,7 @@ async function bootstrapApp() {
                 if (message.startsWith('/')) {
                     this.socket.emit('send_command', { command: message });
                     this.inputMessage = '';
-                    this.settingsOpen = false;
+                    this.autoResizeInput();
                     return;
                 }
                 
@@ -2333,7 +2333,7 @@ async function bootstrapApp() {
                 this.inputMessage = '';
                 this.autoScrollEnabled = true;
                 this.scrollToBottom();
-                this.settingsOpen = false;
+                this.autoResizeInput();
                 
                 // 发送消息后延迟更新当前上下文Token（关键修复：恢复原逻辑）
                 setTimeout(() => {
@@ -2350,14 +2350,12 @@ async function bootstrapApp() {
                     this.stopRequested = true;
                     console.log('发送停止请求');
                 }
-                this.settingsOpen = false;
             },
             
             clearChat() {
                 if (confirm('确定要清除所有对话记录吗？')) {
                     this.socket.emit('send_command', { command: '/clear' });
                 }
-                this.settingsOpen = false;
             },
 
             async compressConversation() {
@@ -2375,7 +2373,6 @@ async function bootstrapApp() {
                     return;
                 }
 
-                this.settingsOpen = false;
                 this.compressing = true;
 
                 try {
@@ -2411,20 +2408,76 @@ async function bootstrapApp() {
                 this.toolMenuOpen = nextState;
                 if (nextState) {
                     this.settingsOpen = false;
+                    if (!this.quickMenuOpen) {
+                        this.quickMenuOpen = true;
+                    }
                     this.loadToolSettings();
                 }
             },
 
-            handleClickOutsideToolMenu(event) {
+            toggleQuickMenu() {
-                if (!this.toolMenuOpen) {
+                if (!this.isConnected) {
                     return;
                 }
-                const dropdown = this.$refs.toolDropdown;
+                const nextState = !this.quickMenuOpen;
-                if (dropdown && !dropdown.contains(event.target)) {
+                this.quickMenuOpen = nextState;
+                if (!nextState) {
                     this.toolMenuOpen = false;
+                    this.settingsOpen = false;
                 }
             },
 
+            closeQuickMenu() {
+                this.quickMenuOpen = false;
+                this.toolMenuOpen = false;
+                this.settingsOpen = false;
+            },
+
+            handleQuickUpload() {
+                if (this.uploading || !this.isConnected) {
+                    return;
+                }
+                this.triggerFileUpload();
+            },
+
+            handleQuickModeToggle() {
+                if (!this.isConnected || this.streamingMessage) {
+                    return;
+                }
+                this.toggleThinkingMode();
+            },
+
+            handleInputChange() {
+                this.autoResizeInput();
+            },
+
+            autoResizeInput() {
+                this.$nextTick(() => {
+                    const textarea = this.$refs.stadiumInput;
+                    if (!textarea) {
+                        return;
+                    }
+                    textarea.style.height = 'auto';
+                    const computedStyle = window.getComputedStyle(textarea);
+                    const lineHeight = parseFloat(computedStyle.lineHeight || '20') || 20;
+                    const maxHeight = lineHeight * 6;
+                    const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+                    textarea.style.height = `${newHeight}px`;
+                    this.inputLineCount = Math.max(1, Math.round(newHeight / lineHeight));
+                });
+            },
+
+            handleClickOutsideQuickMenu(event) {
+                if (!this.quickMenuOpen) {
+                    return;
+                }
+                const shell = this.$refs.compactInputShell;
+                if (shell && shell.contains(event.target)) {
+                    return;
+                }
+                this.closeQuickMenu();
+            },
+            
             handleClickOutsidePanelMenu(event) {
                 if (!this.panelMenuOpen) {
                     return;
@@ -2518,9 +2571,13 @@ async function bootstrapApp() {
                 if (!this.isConnected) {
                     return;
                 }
-                this.settingsOpen = !this.settingsOpen;
+                const nextState = !this.settingsOpen;
-                if (this.settingsOpen) {
+                this.settingsOpen = nextState;
+                if (nextState) {
                     this.toolMenuOpen = false;
+                    if (!this.quickMenuOpen) {
+                        this.quickMenuOpen = true;
+                    }
                 }
             },
 
@@ -2529,17 +2586,6 @@ async function bootstrapApp() {
                 if (!this.rightCollapsed && this.rightWidth < this.minPanelWidth) {
                     this.rightWidth = this.minPanelWidth;
                 }
-                this.settingsOpen = false;
-            },
-
-            handleClickOutsideSettings(event) {
-                if (!this.settingsOpen) {
-                    return;
-                }
-                const dropdown = this.$refs.settingsDropdown;
-                if (dropdown && !dropdown.contains(event.target)) {
-                    this.settingsOpen = false;
-                }
             },
 
             addSystemMessage(content) {

static/index.html

@@ -38,21 +38,6 @@
         
         <!-- Main UI (只在连接后显示) -->
         <template v-else>
-            <!-- 顶部状态栏 -->
-            <header class="header">
-                <div class="header-left">
-                    <span class="logo">🤖 AI Agent</span>
-                    <span class="agent-version" v-if="agentVersion">{{ agentVersion }}</span>
-                </div>
-                <div class="header-right">
-                    <span class="thinking-mode">{{ thinkingMode ? '思考模式' : '快速模式' }}</span>
-                    <span class="connection-status" :class="{ connected: isConnected }">
-                        <span class="status-dot" :class="{ active: isConnected }"></span>
-                        {{ isConnected ? '已连接' : '未连接' }}
-                    </span>
-                </div>
-            </header>
-
             <div class="main-container">
                 <!-- 新增：对话历史侧边栏（最左侧） -->
                 <aside class="conversation-sidebar" :class="{ collapsed: sidebarCollapsed }">
@@ -127,6 +112,21 @@
 
                 <!-- 左侧文件树 -->
                 <aside class="sidebar left-sidebar" :style="{ width: leftWidth + 'px' }">
+                    <div class="sidebar-status">
+                        <div class="compact-status-card">
+                            <div class="status-top">
+                                <span class="logo">🤖 AI Agent</span>
+                                <span class="agent-version" v-if="agentVersion">{{ agentVersion }}</span>
+                            </div>
+                            <div class="status-bottom">
+                                <span class="thinking-chip">{{ thinkingMode ? '思考模式' : '快速模式' }}</span>
+                                <span class="connection-chip" :class="{ connected: isConnected }">
+                                    <span class="status-dot" :class="{ active: isConnected }"></span>
+                                    {{ isConnected ? '已连接' : '未连接' }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
                     <div class="sidebar-header">
                         <div class="panel-menu-wrapper" ref="panelMenuWrapper">
                             <button class="sidebar-view-toggle"
@@ -222,32 +222,18 @@
 
                 <!-- 中间聊天区域 -->
                 <main class="chat-container">
-                    <!-- 当前对话信息栏 -->
+                    <div class="token-drawer" v-if="currentConversationId" :class="{ collapsed: tokenPanelCollapsed }">
-                    <div class="current-conversation-info" v-if="currentConversationTitle">
+                        <div class="token-display-panel">
-                        <span class="conversation-title-display">{{ currentConversationTitle }}</span>
-                        <span class="conversation-stats">
-                            <span class="message-count">{{ messages.length }}条消息</span>
-                        </span>
-                    </div>
-                    
-                    <!-- Token区域包装器 -->
-                    <div class="token-wrapper" v-if="currentConversationId">
-                        <!-- Token统计显示面板 -->
-                        <div class="token-display-panel" :class="{ collapsed: tokenPanelCollapsed }">
                             <div class="token-panel-content">
                                 <div class="token-stats">
                                     <div class="token-item">
                                         <span class="token-label">当前上下文</span>
                                         <span class="token-value current">{{ formatTokenCount(currentContextTokens || 0) }}</span>
                                     </div>
-                                    
-                                    <div class="token-separator"></div>
-                                    
                                     <div class="token-item">
                                         <span class="token-label">累计输入</span>
                                         <span class="token-value input">{{ formatTokenCount(currentConversationTokens.cumulative_input_tokens || 0) }}</span>
                                     </div>
-                                    
                                     <div class="token-item">
                                         <span class="token-label">累计输出</span>
                                         <span class="token-value output">{{ formatTokenCount(currentConversationTokens.cumulative_output_tokens || 0) }}</span>
@@ -255,12 +241,6 @@
                                 </div>
                             </div>
                         </div>
-                        
-                        <!-- 独立的切换按钮 -->
-                        <button @click="toggleTokenPanel" class="token-toggle-btn" :class="{ collapsed: tokenPanelCollapsed }">
-                            <span v-if="!tokenPanelCollapsed">▲</span>
-                            <span v-else>▼</span>
-                        </button>
                     </div>
                     
                     <div class="messages-area" ref="messagesArea">
@@ -351,6 +331,25 @@
                                         </div>
                                     </div>
                                     
+                                    <!-- 追加结果摘要 -->
+                                    <div v-else-if="action.type === 'append'" 
+                                         class="append-placeholder"
+                                         :class="{ 'append-error': action.append?.success === false }">
+                                        <div class="append-placeholder-content">
+                                            <div>
+                                                ✏️ {{ action.append?.summary || '文件追加完成' }}
+                                            </div>
+                                            <div class="append-meta" v-if="action.append">
+                                                <span>{{ action.append.path || '目标文件' }}</span>
+                                                <span v-if="action.append.lines">· 行数 {{ action.append.lines }}</span>
+                                                <span v-if="action.append.bytes">· 字节 {{ action.append.bytes }}</span>
+                                            </div>
+                                            <div class="append-warning" v-if="action.append?.forced">
+                                                ⚠️ 未检测到结束标记，请按提示继续补充。
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
                                     <!-- 修改内容占位 -->
                                     <div v-else-if="action.type === 'modify_payload'" class="modify-placeholder">
                                         <div class="modify-placeholder-content">
@@ -375,6 +374,21 @@
                                         </div>
                                     </div>
                                     
+                                    <!-- 修改结果摘要 -->
+                                    <div v-else-if="action.type === 'modify'" class="modify-placeholder">
+                                        <div class="modify-placeholder-content">
+                                            🛠️ {{ action.modify?.summary || `已处理 ${action.modify?.path || '目标文件'}` }}
+                                            <div class="modify-meta" v-if="action.modify">
+                                                <span v-if="action.modify.total">· 共 {{ action.modify.total }} 处</span>
+                                                <span v-if="action.modify.completed">· 完成 {{ action.modify.completed.length || action.modify.completed }} 处</span>
+                                                <span v-if="action.modify.failed">· 未完成 {{ action.modify.failed.length || action.modify.failed }} 处</span>
+                                            </div>
+                                            <div class="modify-warning" v-if="action.modify?.forced">
+                                                ⚠️ 未检测到结束标记，系统已自动处理。
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
                                     <!-- 工具块（修复版） -->
                                     <div v-else-if="action.type === 'tool'" 
                                          class="collapsible-block tool-block"
@@ -440,10 +454,24 @@
                             
                             <!-- 系统消息 -->
                             <div v-else class="system-message">
+                                <div class="collapsible-block system-block"
+                                     :class="{ expanded: expandedBlocks.has(`system-${index}`) }">
+                                    <div class="collapsible-header" @click="toggleBlock(`system-${index}`)">
+                                        <div class="arrow"></div>
+                                        <div class="status-icon">
+                                            <span class="tool-icon">ℹ️</span>
+                                        </div>
+                                        <span class="status-text">系统消息</span>
+                                    </div>
+                                    <div class="collapsible-content">
+                                        <div class="content-inner">
                                             {{ msg.content }}
                                         </div>
                                     </div>
                                 </div>
+                            </div>
+                        </div>
+                    </div>
                     
                     <div class="scroll-lock-toggle" :class="{ locked: autoScrollEnabled && !userScrolling }">
                         <button @click="toggleScrollLock" class="scroll-lock-btn">
@@ -459,106 +487,123 @@
                     </div>
 
                     <!-- 输入区域 -->
-                    <div class="input-area">
+                    <div class="input-area compact-input-area">
-                        <div class="input-wrapper">
+                        <div class="stadium-shell" ref="compactInputShell" :class="{ expanded: inputLineCount > 1 }">
-                            <textarea 
-                                v-model="inputMessage" 
-                                @keydown.enter.ctrl="sendMessage"
-                                placeholder="输入消息... (Ctrl+Enter 发送)"
-                                class="message-input"
-                                :disabled="!isConnected || streamingMessage"
-                                rows="3">
-                            </textarea>
-                            <div class="input-actions">
-                                <div class="upload-control">
                             <input type="file"
                                    ref="fileUploadInput"
                                    class="file-input-hidden"
                                    @change="handleFileSelected">
                             <button type="button"
-                                            class="btn upload-btn"
+                                    class="stadium-btn add-btn"
-                                            @click="triggerFileUpload"
+                                    @click.stop="toggleQuickMenu"
+                                    :disabled="!isConnected">
+                                +
+                            </button>
+                            <textarea
+                                ref="stadiumInput"
+                                v-model="inputMessage"
+                                @input="handleInputChange"
+                                @keydown.enter.ctrl="sendMessage"
+                                placeholder="输入消息... (Ctrl+Enter 发送)"
+                                class="stadium-input"
+                                :disabled="!isConnected || streamingMessage"
+                                rows="1">
+                            </textarea>
+                            <button type="button"
+                                    class="stadium-btn send-btn"
+                                    @click="handleSendOrStop"
+                                    :disabled="!isConnected || (!inputMessage.trim() && !streamingMessage)">
+                                <span v-if="streamingMessage">⏹</span>
+                                <span v-else class="send-icon"></span>
+                            </button>
+
+                            <transition name="quick-menu">
+                                <div class="quick-menu" v-if="quickMenuOpen" ref="quickMenu" @click.stop>
+                                    <button type="button"
+                                            class="menu-entry"
+                                            @click="handleQuickUpload"
                                             :disabled="!isConnected || uploading">
                                         {{ uploading ? '上传中...' : '上传文件' }}
                                     </button>
-                                </div>
-                                <div class="tool-dropdown" ref="toolDropdown">
                                     <button type="button"
-                                            class="btn tool-btn"
+                                            class="menu-entry has-submenu"
-                                            @click="toggleToolMenu"
+                                            @click.stop="toggleToolMenu"
-                                            :disabled="!isConnected || toolSettingsLoading">
+                                            :disabled="!isConnected">
-                                        工具
+                                        工具禁用
+                                        <span class="entry-arrow">›</span>
                                     </button>
-                                    <transition name="settings-menu">
+                                    <button type="button"
-                                        <div class="settings-menu tool-menu" v-if="toolMenuOpen">
+                                            class="menu-entry"
-                                            <div class="tool-menu-status" v-if="toolSettingsLoading">
+                                            @click="handleQuickModeToggle"
+                                            :disabled="streamingMessage || !isConnected">
+                                        {{ thinkingMode ? '快速模式' : '思考模式' }}
+                                    </button>
+                                    <button type="button"
+                                            class="menu-entry has-submenu"
+                                            @click.stop="toggleSettings"
+                                            :disabled="!isConnected">
+                                        设置
+                                        <span class="entry-arrow">›</span>
+                                    </button>
+
+                                    <transition name="submenu-slide">
+                                        <div class="quick-submenu tool-submenu" v-if="toolMenuOpen">
+                                            <div class="submenu-status" v-if="toolSettingsLoading">
                                                 正在同步工具状态...
                                             </div>
-                                            <div v-else-if="toolSettings.length === 0" class="tool-menu-empty">
+                                            <div v-else-if="toolSettings.length === 0" class="submenu-empty">
                                                 暂无可控工具
                                             </div>
-                                            <div v-else class="tool-menu-list">
+                                            <div v-else class="submenu-list">
-                                                <div v-for="category in toolSettings"
+                                                <button v-for="category in toolSettings"
                                                      :key="category.id"
-                                                     class="tool-category-item"
+                                                     type="button"
-                                                     :class="{ disabled: !category.enabled }">
+                                                     class="menu-entry submenu-entry"
-                                                    <span class="tool-category-label">
+                                                     :class="{ disabled: !category.enabled }"
-                                                        <span class="tool-category-icon">{{ toolCategoryEmoji(category.id) }}</span>
+                                                     @click.stop="updateToolCategory(category.id, !category.enabled)"
+                                                     :disabled="streamingMessage || !isConnected || toolSettingsLoading">
+                                                    <span class="submenu-label">
+                                                        <span class="submenu-icon">{{ toolCategoryEmoji(category.id) }}</span>
                                                         {{ category.label }}
                                                     </span>
-                                                    <button type="button"
+                                                    <span class="entry-arrow">{{ category.enabled ? '禁用' : '启用' }}</span>
-                                                            class="menu-btn tool-category-toggle"
-                                                            @click="updateToolCategory(category.id, !category.enabled)"
-                                                            :disabled="streamingMessage || !isConnected || toolSettingsLoading">
-                                                        {{ category.enabled ? '禁用' : '启用' }}
                                                 </button>
                                             </div>
                                         </div>
-                                        </div>
                                     </transition>
-                                </div>
+
-                                <button @click="handleSendOrStop"
+                                    <transition name="submenu-slide">
-                                        :disabled="!isConnected || (!inputMessage.trim() && !streamingMessage)"
+                                        <div class="quick-submenu settings-submenu" v-if="settingsOpen">
-                                        :class="['btn', streamingMessage ? 'stop-btn' : 'send-btn']">
+                                            <div class="submenu-list">
-                                    {{ streamingMessage ? '停止' : '发送' }}
-                                </button>
-                                <div class="settings-dropdown" ref="settingsDropdown">
                                                 <button type="button"
-                                            class="btn settings-btn"
+                                                        class="menu-entry submenu-entry"
-                                            @click="toggleSettings"
-                                            :disabled="!isConnected">
-                                        设置
-                                    </button>
-                                    <transition name="settings-menu">
-                    <div class="settings-menu" v-if="settingsOpen">
-                                            <button type="button"
-                                                    class="menu-btn realtime-entry"
                                                         @click="openRealtimeTerminal"
                                                         :disabled="streamingMessage || !isConnected">
                                                     实时终端
                                                 </button>
                                                 <button type="button"
-                                                    class="menu-btn focus-entry"
+                                                        class="menu-entry submenu-entry"
                                                         @click="toggleFocusPanel"
                                                         :disabled="streamingMessage || !isConnected">
-                                                {{ rightCollapsed ? '展开聚焦面板' : '折叠聚焦面板' }}
+                                                    聚焦面板
                                                 </button>
                                                 <button type="button"
-                                                    class="menu-btn mode-entry"
+                                                        class="menu-entry submenu-entry"
-                                                    @click="toggleThinkingMode"
+                                                        @click="toggleTokenPanel"
-                                                    :disabled="streamingMessage || !isConnected">
+                                                        :disabled="!currentConversationId">
-                                                {{ thinkingMode ? '快速模式' : '思考模式' }}
+                                                    用量统计
                                                 </button>
                                                 <button type="button"
-                                                    class="menu-btn compress-entry"
+                                                        class="menu-entry submenu-entry"
                                                         @click="compressConversation"
                                                         :disabled="compressing || streamingMessage || !isConnected">
-                                                {{ compressing ? '压缩中...' : '压缩' }}
+                                                    {{ compressing ? '压缩中...' : '压缩对话' }}
                                                 </button>
                                             </div>
+                                        </div>
                                     </transition>
                                 </div>
-                            </div>
+                            </transition>
                         </div>
                     </div>
                 </main>

static/style.css

@@ -110,7 +110,7 @@ body {
 /* 主容器 */
 .main-container {
     display: flex;
-    height: calc(var(--app-viewport, 100vh) - 56px);
+    height: var(--app-viewport, 100vh);
     background: var(--claude-bg);
     position: relative;
     align-items: stretch;
@@ -130,8 +130,8 @@ body {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 50;
     backdrop-filter: blur(12px);
-    height: calc(var(--app-viewport, 100vh) - 56px) !important;
+    height: var(--app-viewport, 100vh) !important;
-    min-height: calc(var(--app-viewport, 100vh) - 56px) !important;
+    min-height: var(--app-viewport, 100vh) !important;
     border-bottom: 1px solid var(--claude-border);
 }
 
@@ -143,8 +143,8 @@ body {
 .conversation-sidebar.collapsed {
     width: 50px;
     overflow: hidden;
-    height: calc(var(--app-viewport, 100vh) - 56px) !important;
+    height: var(--app-viewport, 100vh) !important;
-    min-height: calc(var(--app-viewport, 100vh) - 56px) !important;
+    min-height: var(--app-viewport, 100vh) !important;
 }
 
 .conversation-sidebar.collapsed .conversation-header {
@@ -253,7 +253,7 @@ body {
 }
 
 .loading-conversations,
-.no-conversations {
+o-conversations {
     text-align: center;
     color: var(--claude-text-secondary);
     padding: 30px 15px;
@@ -393,28 +393,6 @@ body {
     cursor: not-allowed;
 }
 
-/* 当前对话信息栏 */
-.current-conversation-info {
-    background: var(--claude-panel);
-    backdrop-filter: blur(18px);
-    padding: 12px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
-    color: var(--claude-text-secondary);
-    box-shadow: 0 12px 28px rgba(61, 57, 41, 0.06);
-}
-
-.conversation-title-display {
-    font-weight: 500;
-    color: var(--claude-text);
-}
-
-.conversation-message-count {
-    font-size: 12px;
-}
-
 /* 拖拽手柄 */
 .resize-handle {
     width: 4px;
@@ -437,6 +415,60 @@ body {
     border-left: none;
 }
 
+.sidebar-status {
+    padding: 18px 18px 8px;
+}
+
+.compact-status-card {
+    background: var(--claude-panel);
+    border: 1px solid var(--claude-border);
+    border-radius: 18px;
+    padding: 14px 16px;
+    box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.status-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 15px;
+}
+
+.status-bottom {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.thinking-chip {
+    background: var(--claude-accent);
+    color: #fffef8;
+    padding: 4px 14px;
+    border-radius: 999px;
+    font-size: 12px;
+    letter-spacing: 0.02em;
+}
+
+.connection-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 12px;
+    border-radius: 999px;
+    border: 1px solid rgba(118, 103, 84, 0.3);
+    font-size: 12px;
+    color: var(--claude-text-secondary);
+}
+
+.connection-chip.connected {
+    border-color: rgba(94, 159, 109, 0.5);
+    color: var(--claude-text);
+}
+
 .sidebar-header {
     padding: 23px;
     border-bottom: 1px solid var(--claude-border);
@@ -712,8 +744,6 @@ body {
     text-overflow: ellipsis;
     font-family: inherit;
 }
-
-
 .folder-children {
     margin-left: 14px;
     padding-left: 6px;
@@ -789,19 +819,30 @@ body {
     backdrop-filter: blur(6px);
 }
 
+.chat-container button {
+    outline: none;
+}
+
+.chat-container button:focus,
+.chat-container button:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
+
 /* 消息区域 */
 .messages-area {
     flex: 1;
     overflow-y: auto;
     padding: 24px;
-    padding-bottom: calc(24px + var(--app-bottom-inset, 0px));
+    padding-top: 20px;
+    padding-bottom: calc(120px + var(--app-bottom-inset, 0px));
     min-height: 0;
 }
 
 .scroll-lock-toggle {
     position: absolute;
     right: 28px;
-    bottom: 200px;
+    bottom: 110px;
     z-index: 25;
     display: flex;
     align-items: center;
@@ -1080,8 +1121,6 @@ body {
 .append-placeholder {
     margin: 12px 0;
 }
-
-
 .append-placeholder-content {
     background: rgba(255, 255, 255, 0.82);
     border-left: 4px solid rgba(218, 119, 86, 0.32);
@@ -1417,174 +1456,274 @@ body {
 }
 
 /* 输入区域 */
-.token-wrapper {
-    flex-shrink: 0;
-}
-
 .input-area {
-    background: rgba(255, 255, 255, 0.82);
+    position: absolute;
-    border-top: 1px solid var(--claude-border);
+    left: 0;
-    padding: 20px;
+    right: 0;
-    padding-bottom: calc(20px + var(--app-bottom-inset, 0px));
+    bottom: 32px;
-    backdrop-filter: blur(12px);
+    background: transparent;
+    padding: 0 24px;
     flex-shrink: 0;
+    pointer-events: none;
+    z-index: 30;
 }
 
-.input-wrapper {
+.compact-input-area {
     display: flex;
-    flex-direction: column;
+    justify-content: center;
-    gap: 12px;
+    pointer-events: none;
 }
 
-.message-input {
+.stadium-shell {
-    width: 100%;
+    position: relative;
-    padding: 14px 16px;
+    width: min(900px, 94%);
     border: 1px solid var(--claude-border);
-    border-radius: 12px;
+    border-radius: 999px;
-    font-size: 15px;
+    background: rgba(255, 255, 255, 0.96);
-    resize: none;
+    box-shadow: 0 18px 36px rgba(61, 57, 41, 0.12);
-    font-family: inherit;
+    padding: 10px 70px;
-    background: rgba(255, 255, 255, 0.75);
+    min-height: 56px;
-    color: var(--claude-text);
+    transition: padding 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;
-    transition: all 0.2s ease;
+    pointer-events: auto;
 }
 
-.message-input:focus {
+.stadium-shell.expanded {
-    outline: none;
+    padding-top: 18px;
-    border-color: var(--claude-accent);
+    padding-bottom: 18px;
-    background: rgba(255, 255, 255, 0.92);
+    border-radius: 28px;
-    box-shadow: 0 0 0 3px rgba(218, 119, 86, 0.2);
 }
 
-.input-actions {
+.stadium-input {
-    display: flex;
+    width: 100%;
-    gap: 8px;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-}
-
-/* 按钮 */
-.btn {
-    padding: 10px 24px;
     border: none;
-    border-radius: 980px;
+    resize: none;
-    font-size: 14px;
+    background: transparent;
-    font-weight: 500;
+    font-size: 15px;
+    line-height: 1.6;
+    font-family: inherit;
+    color: var(--claude-text);
+    padding: 4px 0;
+    min-height: 24px;
+    outline: none;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+.stadium-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.stadium-input::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+.stadium-btn {
+    position: absolute;
+    bottom: 10px;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--claude-text);
+    font-size: 20px;
     cursor: pointer;
-    transition: all 0.2s ease;
+    display: flex;
-    letter-spacing: 0.03em;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease, transform 0.2s ease;
 }
 
-.send-btn {
+.stadium-shell.expanded .stadium-btn {
-    background: var(--claude-accent);
+    bottom: 14px;
-    color: #fffdf8;
-    box-shadow: 0 12px 28px rgba(189, 93, 58, 0.25);
 }
 
-.send-btn:hover:not(:disabled) {
+.stadium-btn:disabled {
-    background: var(--claude-button-hover);
-    transform: scale(1.02);
-    box-shadow: 0 14px 32px rgba(189, 93, 58, 0.3);
-}
-
-.send-btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
 }
 
-.stop-btn {
+.stadium-btn:hover:not(:disabled) {
-    background: #d85a42;
+    background: rgba(0, 0, 0, 0.05);
-    color: #fffaf5;
 }
 
-.stop-btn:hover {
+.add-btn {
-    background: #bf422b;
+    left: 12px;
+    font-size: 26px;
 }
 
-.settings-dropdown {
+.stadium-btn.send-btn {
+    right: 12px;
+    background: var(--claude-accent);
+    color: #fffaf0;
+    box-shadow: 0 10px 20px rgba(189, 93, 58, 0.28);
+}
+
+.stadium-btn.send-btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    background: var(--claude-button-hover);
+}
+
+.stadium-btn.send-btn:disabled {
+    opacity: 0.4;
+    box-shadow: none;
+}
+
+.stadium-btn.send-btn span {
     position: relative;
-    display: flex;
+    top: 1px;
-    align-items: center;
 }
 
-.tool-dropdown {
+.stadium-btn.send-btn .send-icon {
-    position: relative;
+    width: 0;
-    display: flex;
+    height: 0;
-    align-items: center;
+    border-top: 6px solid transparent;
-    margin-right: auto;
+    border-bottom: 6px solid transparent;
+    border-left: 10px solid #fffaf0;
+    margin-left: 2px;
 }
 
-.upload-control {
+.stadium-btn.send-btn:disabled .send-icon {
-    display: flex;
+    border-left-color: rgba(255, 255, 255, 0.4);
-    align-items: center;
 }
 
 .file-input-hidden {
     display: none;
 }
 
-.upload-btn {
+.quick-menu {
-    background: rgba(255, 255, 255, 0.78);
+    position: absolute;
+    left: 0;
+    bottom: calc(100% + 14px);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 230px;
+    padding: 12px;
+    background: rgba(255, 255, 255, 0.98);
+    border: 1px solid var(--claude-border);
+    border-radius: 18px;
+    box-shadow: var(--claude-shadow);
+    z-index: 30;
+    pointer-events: auto;
+}
+
+.menu-entry {
+    border: none;
+    background: transparent;
+    padding: 10px 12px;
+    border-radius: 12px;
+    font-size: 14px;
+    text-align: left;
     color: var(--claude-text);
-    border: 1px solid rgba(118, 103, 84, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    min-height: 44px;
 }
 
-.upload-btn:hover:not(:disabled) {
+.menu-entry:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(0, 0, 0, 0.05);
 }
 
-.upload-btn:disabled {
+.menu-entry:disabled {
-    opacity: 0.4;
+    opacity: 0.45;
     cursor: not-allowed;
 }
 
-.tool-btn {
+.menu-entry.has-submenu .entry-arrow {
-    background: rgba(255, 255, 255, 0.78);
+    margin-left: 10px;
-    color: var(--claude-text);
+    color: var(--claude-text-secondary);
-    border: 1px solid rgba(118, 103, 84, 0.2);
 }
 
-.tool-btn:hover:not(:disabled) {
+.quick-submenu {
-    background: rgba(255, 255, 255, 0.95);
+    position: absolute;
+    top: 0;
+    left: calc(100% + 12px);
+    width: 230px;
+    min-width: 0;
+    padding: 12px;
+    border-radius: 18px;
+    border: 1px solid var(--claude-border);
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: var(--claude-shadow);
+    z-index: 31;
 }
 
-.tool-btn:disabled {
+.submenu-status,
-    opacity: 0.4;
+.submenu-empty {
-    cursor: not-allowed;
+    font-size: 13px;
+    color: var(--claude-text-secondary);
 }
 
-.settings-btn {
+.submenu-list {
-    background: rgba(255, 255, 255, 0.78);
+    display: flex;
-    color: var(--claude-text);
+    flex-direction: column;
-    border: 1px solid rgba(118, 103, 84, 0.2);
+    gap: 6px;
 }
 
-.settings-btn:hover:not(:disabled) {
+.quick-submenu.tool-submenu {
-    background: rgba(255, 255, 255, 0.95);
+    top: auto;
+    bottom: 0;
 }
 
-.settings-btn:disabled {
+.menu-entry.submenu-entry {
-    opacity: 0.4;
+    width: 100%;
-    cursor: not-allowed;
+    justify-content: space-between;
+}
+
+.menu-entry.submenu-entry .entry-arrow {
+    color: var(--claude-text-secondary);
+}
+
+.menu-entry.disabled {
+    opacity: 0.5;
+}
+
+.submenu-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.submenu-icon {
+    font-size: 16px;
+}
+
+.quick-menu-enter-active,
+.quick-menu-leave-active {
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.quick-menu-enter-from,
+.quick-menu-leave-to {
+    opacity: 0;
+    transform: translateY(8px);
+}
+
+.submenu-slide-enter-active,
+.submenu-slide-leave-active {
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.submenu-slide-enter-from,
+.submenu-slide-leave-to {
+    opacity: 0;
+    transform: translateX(10px);
 }
 
 /* 适应折叠屏/矮屏幕，保证输入区完整可见 */
 @media (max-height: 900px) {
-    .messages-area {
-        padding: 16px 18px;
-    }
-    .token-wrapper {
-        margin-bottom: 8px;
-    }
     .input-area {
-        padding: 14px;
+        bottom: 12px;
+        padding: 0 12px;
     }
-    .message-input {
+    .stadium-shell {
-        padding: 12px 14px;
+        width: min(900px, 98%);
-        min-height: 120px;
-    }
-    .btn {
-        padding: 8px 18px;
     }
 }
 
@@ -1748,7 +1887,7 @@ body {
     padding: 16px;
 }
 
-.no-files {
+o-files {
     text-align: center;
     color: var(--claude-text-secondary);
     padding: 60px 20px;
@@ -1808,15 +1947,8 @@ body {
 }
 
 /* 系统消息 */
-.system-message {
+.system-message .collapsible-block {
-    text-align: center;
+    margin: 0;
-    color: var(--claude-text-secondary);
-    font-size: 13px;
-    margin: 20px 0;
-    padding: 10px;
-    background: rgba(255, 255, 255, 0.7);
-    border-radius: 12px;
-    border: 1px solid var(--claude-border);
 }
 
 /* Markdown样式 */
@@ -1856,8 +1988,6 @@ body {
     0%, 50% { opacity: 1; }
     51%, 100% { opacity: 0; }
 }
-
-
 /* ========================================= */
 /* 响应式设计 */
 /* ========================================= */
@@ -1897,100 +2027,56 @@ body {
         display: none;
     }
 }
-.conversation-stats {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 0.9em;
-    color: var(--claude-text-secondary);
-}
-
 .token-count {
     color: var(--claude-accent);
     font-weight: 500;
 }
-/* ========================================= */
+/* 顶部 Token 抽屉 */
-/* Token 统计面板样式（无缝一体版）*/
+.token-drawer {
-/* ========================================= */
+    position: absolute;
-
+    top: 20px;
-/* Token区域包装器 */
+    left: 0;
-.token-wrapper {
+    right: 0;
-    position: relative;
-    z-index: 5;
-    margin-bottom: 0;
-}
-
-/* 当前对话信息栏 - 移除底部边框 */
-.current-conversation-info {
-    position: relative;
-    z-index: 10;
-    background: var(--claude-panel);
-    backdrop-filter: blur(18px);
-    border-bottom: none;  /* 移除边框，让它和下面的面板融为一体 */
-    padding: 12px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
-    color: var(--claude-text-secondary);
-    border-radius: 0;  /* 顶部保持直角 */
-    box-shadow: 0 12px 28px rgba(61, 57, 41, 0.06);
-}
-
-/* Token面板 - 与标题栏完全一体，底部圆角 */
-.token-display-panel {
-    background: var(--claude-panel);
-    backdrop-filter: blur(18px);
-    border: none;
-    border-radius: 0 0 16px 16px;
-    box-shadow: 0 8px 18px rgba(189, 93, 58, 0.12);
-    overflow: hidden;
-    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     width: 100%;
-    margin: 0;
+    display: flex;
-    padding: 0;
+    justify-content: center;
+    align-items: flex-start;
+    z-index: 20;
+    pointer-events: none;
 }
 
-/* 展开状态 */
+.token-display-panel {
-.token-display-panel:not(.collapsed) {
+    width: min(860px, 92%);
-    height: 80px;
+    background: var(--claude-panel);
-    opacity: 1;
+    border: 1px solid var(--claude-border);
+    border-radius: 26px;
+    box-shadow: 0 24px 42px rgba(61, 57, 41, 0.18);
+    transition: transform 0.35s ease, opacity 0.35s ease;
+    pointer-events: auto;
 }
 
-/* 收起状态 */
+.token-drawer.collapsed .token-display-panel {
-.token-display-panel.collapsed {
+    transform: translateY(-120%);
-    height: 0;
-    opacity: 0;
-    border: none;
-    box-shadow: none;
-}
-
-.token-panel-content {
-    padding: 16px 24px;
-    height: 100%;
-    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.token-display-panel.collapsed .token-panel-content {
     opacity: 0;
     pointer-events: none;
 }
 
+.token-panel-content {
+    padding: 16px 36px;
+}
+
 .token-stats {
     display: flex;
+    justify-content: space-between;
     gap: 32px;
-    align-items: center;
+    flex-wrap: wrap;
-    justify-content: center;
-    font-size: 13px;
-    height: 100%;
 }
 
 .token-item {
     display: flex;
     flex-direction: column;
-    align-items: center;
     gap: 4px;
-    min-width: 80px;
+    min-width: 120px;
 }
 
 .token-label {
@@ -1998,7 +2084,7 @@ body {
     font-size: 11px;
     font-weight: 500;
     text-transform: uppercase;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.04em;
 }
 
 .token-value {
@@ -2012,123 +2098,25 @@ body {
     color: var(--claude-accent);
     font-size: 20px;
 }
+
 .token-value.input { color: var(--claude-success); }
 .token-value.output { color: var(--claude-warning); }
 
-.token-separator {
+@media (max-width: 900px) {
-    width: 1px;
-    height: 35px;
-    background: linear-gradient(to bottom, 
-        transparent, 
-        rgba(218, 119, 86, 0.25) 20%, 
-        rgba(218, 119, 86, 0.25) 80%, 
-        transparent
-    );
-    margin: 0 8px;
-}
-
-/* 切换按钮 - 独立定位 */
-.token-toggle-btn {
-    position: absolute;
-    right: 24px;
-    bottom: -18px;  /* 相对于wrapper底部 */
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: 2px solid rgba(218, 119, 86, 0.3);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 15;
-    font-size: 14px;
-    font-weight: bold;
-}
-
-/* 展开状态 */
-.token-toggle-btn:not(.collapsed) {
-    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 248, 242, 0.9) 100%);
-    color: var(--claude-accent);
-    box-shadow: 0 3px 10px rgba(189, 93, 58, 0.18);
-}
-
-/* 收起状态 - 在标题栏下方露出一半 */
-.token-toggle-btn.collapsed {
-    background: linear-gradient(135deg, var(--claude-accent) 0%, var(--claude-accent-strong) 100%);
-    color: #fff8f2;
-    border-color: rgba(255, 248, 242, 0.55);
-    box-shadow: 0 3px 11px rgba(189, 93, 58, 0.22);
-}
-
-.token-toggle-btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 5px 16px rgba(189, 93, 58, 0.26);
-}
-
-.token-toggle-btn.collapsed:hover {
-    background: linear-gradient(135deg, var(--claude-button-hover) 0%, var(--claude-button-active) 100%);
-}
-
-.token-toggle-btn:active {
-    transform: scale(1.02);
-}
-
-/* 箭头样式 - 移除浮动动画 */
-.token-toggle-btn span {
-    transition: all 0.3s ease;
-    display: inline-block;
-}
-
-/* 移除动画效果 */
-/* .token-toggle-btn:not(.collapsed) span {
-    animation: arrowBounceUp 2s ease-in-out infinite;
-}
-
-.token-toggle-btn.collapsed span {
-    animation: arrowBounceDown 2s ease-in-out infinite;
-} */
-
-/* 保留动画定义，但不使用 */
-@keyframes arrowBounceUp {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-3px); }
-}
-
-@keyframes arrowBounceDown {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(3px); }
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
     .token-stats {
+        flex-direction: column;
         gap: 16px;
     }
 
     .token-item {
-        min-width: 60px;
+        min-width: auto;
     }
 
-    .token-value {
+    .token-panel-content {
-        font-size: 15px;
+        padding: 18px 24px;
-    }
-    
-    .token-value.current {
-        font-size: 17px;
-    }
-    
-    .token-label {
-        font-size: 10px;
-    }
-    
-    .token-toggle-btn {
-        width: 32px;
-        height: 32px;
-        font-size: 12px;
-        right: 16px;
     }
 }
+
 /* Markdown列表样式 - 修复偏左问题 */
 .text-content ul,
 .text-content ol {