myagent-ai 1.7.2 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myagent-ai",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "description": "本地桌面端执行型AI助手 - Open Interpreter 风格 | Local Desktop Execution-Oriented AI Assistant",
   "main": "main.py",
   "bin": {
@@ -65,4 +65,4 @@
     "departments/",
     "web/"
   ]
-}
+}

package/web/api_server.py

@@ -746,29 +746,41 @@ class ApiServer:
             return ""
 
         base_instruction = (
-            "你当前处于【执行模式】(Execution Mode)。\n"
-            "1. **复杂度分析**：首先评估任务复杂度。对于简单问候或常见问题，直接回答；对于多步骤任务，【必须】先制定计划。\n"
-            "2. **强制规则 - 任务列表**：每次回复【必须】包含 ```tasklist``` 代码块，输出 JSON 格式的任务进度列表。先写纯文本分析，再写 tasklist，最后写 action（如有）。\n"
-            "3. **强制规则 - 单步执行**：每次回复【只能执行一个操作】（一个工具调用或一个代码块）。执行完后等待结果反馈。\n"
+            "你当前处于【执行模式】(Execution Mode)。\n\n"
+            "## 核心规则\n"
+            "1. **任务列表（强制）**：每次回复【必须】包含一个 ```tasklist``` 代码块，内含 JSON 数组格式的任务进度。\n"
+            "   - 格式：```tasklist\\n[{\"text\": \"步骤描述\", \"status\": \"pending\"}]\\n```\n"
+            "   - status 可选值：pending(待执行)、running(进行中)、done(已完成)、blocked(受阻)\n"
+            "   - 首次收到任务时，拆分为多个步骤，全部标记为 pending\n"
+            "   - 每次执行完一个步骤后，更新对应步骤状态为 done，下一个为 running\n"
+            "2. **单步执行（强制）**：每次回复【只能执行一个操作】（一个工具调用、一个代码块或一个技能调用）。\n"
+            "   - 执行完一个操作后停下来，等待结果反馈后再决定下一步\n"
+            "   - 不要一次性执行多个操作\n"
+            "3. **回复格式**：先写纯文本分析/总结 → 再写 ```tasklist``` 更新进度 → 最后写 ```action``` 执行操作（如有）\n"
         )
 
         # 从内存读取当前任务列表
         tasks = self._task_list_store.get(agent_path, [])
         if not tasks:
-            return base_instruction + "请分析需求后制定计划。"
+            return base_instruction + "\n## 当前状态\n暂无任务计划。请先分析用户需求，拆分为具体步骤，然后用 ```tasklist``` 输出计划。"
 
         pending = [f"  - ⏳ {t['text']}" for t in tasks if t.get("status") in ("pending", "running", "blocked")]
         done = [f"  - ✅ {t['text']}" for t in tasks if t.get("status") == "done"]
         running = [f"  - 🔄 {t['text']}" for t in tasks if t.get("status") == "running"]
 
-        context = base_instruction + "\n当前任务进度:\n"
+        context = base_instruction + "\n## 当前任务进度\n"
         if done:
             context += "已完成:\n" + "\n".join(done) + "\n"
         if running:
             context += "进行中:\n" + "\n".join(running) + "\n"
         if pending:
             context += "待执行:\n" + "\n".join(pending) + "\n"
-        context += "\n请在回复中用 ```tasklist``` 更新任务进度（先写文本分析，再写 tasklist，最后写 action）。记住：【每次只能执行一个操作】。"
+        context += (
+            "\n## 下一步\n"
+            "1. 用纯文本简要分析当前进展\n"
+            "2. 用 ```tasklist``` 更新任务进度（标记已完成的步骤为 done，标记当前步骤为 running）\n"
+            "3. 用 ```action``` 执行下一个待执行步骤（每次只执行一个操作）\n"
+        )
         return context
 
     async def handle_chat_page(self, request):
@@ -2613,7 +2625,9 @@ class ApiServer:
         iteration = 0
         # 追踪连续无 action 迭代次数，防止无限重新提示
         _consecutive_no_action = 0
-        _MAX_NO_ACTION_RETRIES = 3
+        _MAX_NO_ACTION_RETRIES = 5  # 提高重试次数，给 LLM 更多机会完成剩余任务
+        # ── 追踪所有流式推送的纯文本（用于刷新后恢复） ──
+        _all_streamed_text_parts = []  # 每轮迭代推送的纯文本片段
 
         while iteration < max_iter:
             iteration += 1
@@ -2682,6 +2696,7 @@ class ApiServer:
                             text_before = remaining[:marker_pos]
                             if text_before.strip():
                                 await _write_sse({"type": "text_delta", "content": text_before})
+                                _all_streamed_text_parts.append(text_before)
                             # 跳过整个开始标记（```action 或 ```tasklist），不要只跳到 ```
                             st["processed_pos"] += marker_pos + len(f"```{block_type}")
                             if block_type == "tasklist":
@@ -2718,7 +2733,9 @@ class ApiServer:
                         # 没有找到标记，流式推送（保留末尾可能的部分标记）
                         safe_end = len(remaining) - _MAX_HOLD
                         if safe_end > 0:
-                            await _write_sse({"type": "text_delta", "content": remaining[:safe_end]})
+                            chunk = remaining[:safe_end]
+                            await _write_sse({"type": "text_delta", "content": chunk})
+                            _all_streamed_text_parts.append(chunk)
                             st["processed_pos"] += safe_end
                             remaining = full_text_so_far[st["processed_pos"]:]
                         else:
@@ -2790,6 +2807,7 @@ class ApiServer:
                         await _stream_text_chunked(remaining, _write_sse, chunk_size=3, delay=0.01)
                     else:
                         await _write_sse({"type": "text_delta", "content": remaining})
+                    _all_streamed_text_parts.append(remaining)
                     st["processed_pos"] = len(full_text)
 
             # Call LLM with streaming — tokens are filtered through _text_delta_callback
@@ -3054,10 +3072,19 @@ class ApiServer:
                 break
 
         # Save assistant response to memory
-        if agent.memory and final_response:
-            agent.memory.add_short_term(session_id=session_id, role="assistant", content=final_response)
-
-        return final_response
+        # ── 优先使用流式累积文本（包含所有迭代的纯文本），回退到 final_response ──
+        saved_response = final_response
+        if not saved_response and _all_streamed_text_parts:
+            saved_response = "\n\n".join(p for p in _all_streamed_text_parts if p.strip())
+        if not saved_response and content:
+            saved_response = content  # 兜底：使用最后一轮的完整输出
+        if agent.memory and saved_response:
+            agent.memory.add_short_term(session_id=session_id, role="assistant", content=saved_response)
+        elif agent.memory:
+            # 即使为空也保存一条，防止刷新后消息丢失
+            agent.memory.add_short_term(session_id=session_id, role="assistant", content="(执行完成，无文本回复)")
+
+        return saved_response or final_response or content or ""
 
     async def _execute_actions_streaming(
         self, agent, action_data: dict, context, write_sse

package/web/ui/chat/chat.css

@@ -588,6 +588,13 @@ input,textarea,select{font:inherit}
 }
 .rp-section-toggle:hover{background:var(--bg4);color:var(--text)}
 .rp-section-toggle.expanded{transform:rotate(90deg)}
+.rp-section-action-btn{
+  width:20px;height:20px;border-radius:3px;border:none;
+  background:transparent;color:var(--text3);
+  display:inline-grid;place-items:center;flex-shrink:0;
+  cursor:pointer;transition:var(--transition);
+}
+.rp-section-action-btn:hover{background:var(--bg4);color:var(--accent)}
 
 /* Master Agent Card (全权Agent) */
 .rp-master-card{
@@ -1204,8 +1211,9 @@ input,textarea,select{font:inherit}
   opacity:0;position:absolute;right:8px;top:50%;transform:translateY(-50%);
   width:24px;height:24px;border-radius:4px;display:grid;place-items:center;
   background:var(--bg2);transition:var(--transition);font-size:12px;color:var(--text3);
+  pointer-events:none;
 }
-.group-item:hover .group-delete{opacity:1}
+.group-item:hover .group-delete{opacity:1;pointer-events:auto}
 .group-delete:hover{background:var(--danger);color:#fff}
 
 /* Group Chat Messages */
@@ -1569,6 +1577,20 @@ input,textarea,select{font:inherit}
 .exec-event-result-btn:hover{background:var(--accent-light);color:var(--accent-dark)}
 .exec-event-result-btn svg{width:12px;height:12px}
 
+/* ── Inline Exec Events (Timeline Interleaved) ── */
+.msg-timeline{display:flex;flex-direction:column;gap:6px}
+.inline-exec-event{margin:2px 0;padding:8px 12px;background:var(--bg2);border-left:3px solid var(--border);border-radius:6px;font-size:13px;animation:execEventSlide .3s ease-out}
+.inline-exec-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
+.inline-exec-icon{font-size:14px}
+.inline-exec-title{font-weight:500;color:var(--text);font-size:12px}
+.inline-exec-meta{color:var(--text3);font-size:11px;margin-left:auto}
+.inline-exec-code{background:var(--bg);padding:6px 8px;border-radius:4px;font-family:'SF Mono','Fira Code','Cascadia Code',monospace;font-size:12px;color:var(--text2);margin:4px 0;max-height:100px;overflow:hidden;cursor:pointer;transition:var(--transition);white-space:pre-wrap;word-break:break-all}
+.inline-exec-code:hover{background:var(--bg3)}
+.inline-exec-code.expanded{max-height:none}
+.inline-exec-summary{color:var(--text2);font-size:12px;margin:4px 0}
+.inline-exec-result-btn{background:none;border:1px solid var(--border);color:var(--text2);font-size:11px;padding:2px 8px;border-radius:4px;cursor:pointer;margin-top:4px;transition:var(--transition)}
+.inline-exec-result-btn:hover{background:var(--bg2);border-color:var(--accent);color:var(--accent)}
+
 /* ── Execution Result Modal ── */
 .exec-result-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}
 .exec-result-modal{background:var(--bg);border:1px solid var(--border);border-radius:12px;width:min(680px,90vw);max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:slideUp .2s ease}
@@ -1605,6 +1627,9 @@ input,textarea,select{font:inherit}
 [data-theme="dark"] .exec-result-modal{background:var(--bg2);border-color:var(--border)}
 [data-theme="dark"] .exec-result-modal-body pre{background:#0a0c10;color:#cdd6f4}
 [data-theme="dark"] .exec-result-info-item{background:var(--bg3)}
+[data-theme="dark"] .inline-exec-event{background:var(--bg3);border-left-color:var(--border)}
+[data-theme="dark"] .inline-exec-code{background:var(--bg)}
+[data-theme="dark"] .inline-exec-result-btn:hover{background:var(--bg4)}
 
   .thought-block {
     background: rgba(0, 0, 0, 0.03);
@@ -1626,3 +1651,143 @@ input,textarea,select{font:inherit}
     font-family: inherit;
     white-space: pre-wrap;
   }
+
+/* ══════════════════════════════════════════════════════
+   ── Mobile Responsive (≤768px) ──
+   ══════════════════════════════════════════════════════ */
+
+/* ── Mobile Overlay Backdrop (placed outside media query so JS can always use it) ── */
+.mobile-overlay{
+  position:fixed;inset:0;
+  background:rgba(0,0,0,.4);
+  z-index:45;
+  opacity:0;visibility:hidden;
+  transition:opacity .3s ease,visibility .3s ease;
+  pointer-events:none;
+}
+.mobile-overlay.active{
+  opacity:1;visibility:visible;
+  pointer-events:auto;
+}
+
+@media(max-width:768px){
+
+  /* ── Sidebar: Fixed overlay sliding from left ── */
+  .sidebar{
+    position:fixed;
+    left:0;top:0;
+    width:85vw;max-width:320px;
+    height:100vh;
+    z-index:50;
+    transform:translateX(-100%);
+    transition:transform .3s cubic-bezier(.4,0,.2,1);
+    box-shadow:none;
+  }
+  .sidebar.mobile-open{
+    transform:translateX(0);
+    box-shadow:4px 0 24px rgba(0,0,0,.15);
+  }
+
+  /* ── Agent Panel: Fixed overlay sliding from right ── */
+  .agent-panel{
+    position:fixed;
+    right:0;top:0;
+    width:85vw;max-width:340px;
+    height:100vh;
+    z-index:50;
+    transform:translateX(100%);
+    transition:transform .3s cubic-bezier(.4,0,.2,1);
+    box-shadow:none;
+  }
+  .agent-panel.mobile-open{
+    transform:translateX(0);
+    box-shadow:-4px 0 24px rgba(0,0,0,.15);
+  }
+
+  /* ── Hide desktop toggle buttons on mobile ── */
+  .sidebar-toggle,
+  .agent-toggle{
+    display:none!important;
+  }
+
+  /* ── Header ── */
+  .main-header{
+    height:50px;min-height:50px;
+    padding:0 12px;
+  }
+  .main-title{
+    font-size:14px;
+    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+    min-width:0;
+  }
+
+  /* ── Messages ── */
+  .messages-container{
+    padding:12px;
+  }
+  .messages-inner{
+    max-width:100%;
+  }
+  .message-bubble{
+    max-width:88%;
+  }
+  .message-bubble pre{
+    font-size:12px;
+  }
+
+  /* ── Input Area ── */
+  .input-area{
+    padding:10px 12px;
+  }
+  .input-wrapper{
+    max-width:100%;
+  }
+  .input-box textarea{
+    min-height:60px;
+  }
+
+  /* ── Modals ── */
+  .modal,
+  .agent-modal,
+  .platform-modal{
+    width:95%;max-height:90vh;padding:20px;
+  }
+
+  /* ── Toast ── */
+  .toast-container{
+    top:12px;right:12px;left:12px;
+  }
+  .toast{
+    max-width:100%;
+  }
+
+  /* ── Welcome Card Capabilities ── */
+  .capabilities{
+    grid-template-columns:1fr 1fr;
+  }
+
+  /* ── Execution Timer ── */
+  .exec-timer{
+    max-width:100%;
+  }
+
+  /* ── Empty State ── */
+  .empty-icon{
+    font-size:40px;
+  }
+  .empty-title{
+    font-size:16px;
+  }
+}
+
+/* ══════════════════════════════════════════════════════
+   ── Very Small Phones (≤480px) ──
+   ══════════════════════════════════════════════════════ */
+@media(max-width:480px){
+  .message-bubble{
+    max-width:92%;
+  }
+  .main-header{
+    padding:0 8px;
+  }
+}

package/web/ui/chat/chat_container.html

@@ -18,6 +18,9 @@
   <div id="rightAgentsContainer"></div>
 </div>
 
+<!-- Mobile Overlay -->
+<div class="mobile-overlay" id="chatMobileOverlay"></div>
+
 <!-- Toast Container -->
 <div class="toast-container" id="toastContainer"></div>
 

package/web/ui/chat/chat_main.js

@@ -28,18 +28,119 @@ initTheme();
 document.getElementById('themeToggle')?.addEventListener('click', toggleTheme);
 
 // ── Sidebar Collapse ──
+function isMobile() { return window.innerWidth <= 768; }
+
 function toggleSidebar() {
   const sidebar = document.getElementById('sidebar');
   const toggleBtn = document.getElementById('sidebarToggle');
   if (!sidebar) return;
-  sidebar.classList.toggle('collapsed');
-  const isCollapsed = sidebar.classList.contains('collapsed');
-  if (toggleBtn) toggleBtn.textContent = isCollapsed ? '▶' : '◀';
-  localStorage.setItem('myagent-sidebar-collapsed', isCollapsed);
+  if (isMobile()) {
+    // Mobile: toggle as overlay
+    const overlay = document.getElementById('chatMobileOverlay');
+    const isOpen = sidebar.classList.contains('mobile-open');
+    if (isOpen) {
+      closeMobileSidebar();
+    } else {
+      sidebar.classList.add('mobile-open');
+      if (overlay) overlay.classList.add('active');
+      // Close agent panel if open
+      closeMobileAgentPanel();
+    }
+  } else {
+    // Desktop: collapse/expand
+    sidebar.classList.toggle('collapsed');
+    const isCollapsed = sidebar.classList.contains('collapsed');
+    if (toggleBtn) toggleBtn.textContent = isCollapsed ? '▶' : '◀';
+    localStorage.setItem('myagent-sidebar-collapsed', isCollapsed);
+  }
+}
+
+function closeMobileSidebar() {
+  const sidebar = document.getElementById('sidebar');
+  const overlay = document.getElementById('chatMobileOverlay');
+  if (sidebar) sidebar.classList.remove('mobile-open');
+  if (overlay) overlay.classList.remove('active');
+}
+
+function toggleMobileAgentPanel() {
+  const panel = document.getElementById('agentPanel');
+  const overlay = document.getElementById('chatMobileOverlay');
+  if (!panel) return;
+  const isOpen = panel.classList.contains('mobile-open');
+  if (isOpen) {
+    closeMobileAgentPanel();
+  } else {
+    panel.classList.add('mobile-open');
+    if (overlay) overlay.classList.add('active');
+    // Close sidebar if open
+    closeMobileSidebar();
+  }
+}
+
+function closeMobileAgentPanel() {
+  const panel = document.getElementById('agentPanel');
+  const overlay = document.getElementById('chatMobileOverlay');
+  if (panel) panel.classList.remove('mobile-open');
+  if (overlay) overlay.classList.remove('active');
+}
+
+// Mobile overlay click closes both panels
+document.addEventListener('click', function(e) {
+  if (e.target && e.target.id === 'chatMobileOverlay') {
+    closeMobileSidebar();
+    closeMobileAgentPanel();
+  }
+});
+
+// Show/hide mobile agents button based on screen size
+function checkChatMobile() {
+  const btn = document.getElementById('mobileAgentsBtn');
+  if (btn) btn.style.display = isMobile() ? 'grid' : 'none';
+}
+window.addEventListener('resize', checkChatMobile);
+// Run after DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', checkChatMobile);
+} else {
+  checkChatMobile();
 }
-// Restore sidebar state
+
+// Override toggleAgentPanel for mobile (deferred since function is defined later)
+var _origToggleAgentPanel = null;
+(function() {
+  var origDef = toggleAgentPanel;
+  if (typeof origDef === 'function') {
+    _origToggleAgentPanel = origDef;
+    toggleAgentPanel = function() {
+      if (isMobile()) {
+        toggleMobileAgentPanel();
+      } else {
+        _origToggleAgentPanel();
+      }
+    };
+  }
+})();
+// Also override after definition via setTimeout (fallback)
+setTimeout(function() {
+  if (!_origToggleAgentPanel && typeof toggleAgentPanel === 'function') {
+    // Check if it's already the mobile version
+    var testFn = toggleAgentPanel.toString();
+    if (testFn.indexOf('toggleMobileAgentPanel') === -1) {
+      _origToggleAgentPanel = toggleAgentPanel;
+      toggleAgentPanel = function() {
+        if (isMobile()) {
+          toggleMobileAgentPanel();
+        } else {
+          _origToggleAgentPanel();
+        }
+      };
+    }
+  }
+}, 0);
+
+// Restore sidebar state (desktop only)
 (function() {
-  if (localStorage.getItem('myagent-sidebar-collapsed') === 'true') {
+  if (localStorage.getItem('myagent-sidebar-collapsed') === 'true' && !isMobile()) {
     const sidebar = document.getElementById('sidebar');
     const toggleBtn = document.getElementById('sidebarToggle');
     if (sidebar) sidebar.classList.add('collapsed');
@@ -966,6 +1067,7 @@ async function selectAgent(agentPath) {
   // 如果 loadSessions 已经 auto-selected 了 session，UI 已由 selectSession 设置好，不再覆盖
 
   document.getElementById('userInput').focus();
+  if (isMobile()) closeMobileAgentPanel();
   // Reload task plan if in exec mode
   if (state.chatMode === 'exec') loadTaskPlan();
   // Reset escalation and update exec mode UI
@@ -1434,9 +1536,13 @@ function newChat() {
 async function selectSession(id) {
   if (id === '__new__') {
     newChat();
+    if (isMobile()) closeMobileSidebar();
+    return;
+  }
+  if (state.activeSessionId === id && state.messages.length > 0) {
+    if (isMobile()) closeMobileSidebar();
     return;
   }
-  if (state.activeSessionId === id && state.messages.length > 0) return;
 
   // 重置生成状态，防止残留的 isGenerating=true 导致输入框锁定
   state.isGenerating = false;
@@ -1470,6 +1576,7 @@ async function selectSession(id) {
   }
   renderMessages();
   document.getElementById('userInput').focus();
+  if (isMobile()) closeMobileSidebar();
 }
 
 async function deleteSession(id) {
@@ -1680,9 +1787,12 @@ function renderMessages() {
       </div>` : '';
     const ttsIndicator = ttsManager && ttsManager.isPlaying && ttsManager.currentMsgIndex === i ?
       ' <span class="tts-playing-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></span>' : '';
-    const execEventsHtml = (!isUser && msg.exec_events && msg.exec_events.length > 0)
-      ? renderExecEvents(msg.exec_events, i) : '';
-    const streamingIndicator = msg.streaming && !msg.content && !msg.thought ? `
+
+    // ── Determine rendering mode and streaming indicator ──
+    const hasParts = Array.isArray(msg.parts) && msg.parts.length > 0;
+    const hasStreamingText = msg._streamingText && msg._streamingText.trim();
+    const anyContent = msg.content || msg._streamingText || hasParts;
+    const streamingIndicator = msg.streaming && !anyContent && !msg.thought ? `
       <div class="streaming-indicator">
         <div class="spinner"></div>
         <div class="streaming-dots">
@@ -1690,13 +1800,42 @@ function renderMessages() {
         </div>
         <span style="font-weight:500">Agent 正在思考...</span>
       </div>` : '';
+
+    // ── Timeline rendering for interleaved text + exec events ──
+    let timelineHtml = '';
+    if (hasParts || hasStreamingText) {
+      let partsHtml = '';
+      for (const part of (msg.parts || [])) {
+        if (part.type === 'text' && part.content.trim()) {
+          partsHtml += '<div class="message-bubble">' + renderMarkdown(part.content) + '</div>';
+        } else if (part.type === 'exec') {
+          partsHtml += renderInlineExecEvent(part.data, i);
+        }
+      }
+      if (hasStreamingText) {
+        partsHtml += '<div class="message-bubble">' + renderMarkdown(msg._streamingText) + '</div>';
+      }
+      if (partsHtml) {
+        timelineHtml = '<div class="msg-timeline">' + partsHtml + '</div>';
+      }
+    }
+
+    // Backward compat: single bubble for messages without parts
+    const singleBubbleHtml = (!hasParts && !hasStreamingText)
+      ? ((content || streamingIndicator) ? `<div class="message-bubble">${content}${ttsIndicator}</div>` : '')
+      : '';
+
+    // Exec events panel: only for backward compat (messages without parts loaded from DB)
+    const execEventsHtml = (!isUser && !hasParts && msg.exec_events && msg.exec_events.length > 0)
+      ? renderExecEvents(msg.exec_events, i) : '';
     html += `
       <div class="message-row ${msg.role}">
         <div class="message-avatar">${avatar}</div>
         <div style="flex:1;min-width:0">
           ${reasoningHtml}
           ${thoughtHtml}
-          ${content || streamingIndicator ? `<div class="message-bubble">${content}${ttsIndicator}</div>` : ''}
+          ${timelineHtml}
+          ${singleBubbleHtml}
           ${streamingIndicator}
           ${execEventsHtml}
           ${msg.time ? `<div class="message-time">${formatTime(msg.time)}</div>` : ''}

package/web/ui/chat/flow_engine.js

@@ -1,4 +1,3 @@
-<string>:27: SyntaxWarning: invalid escape sequence '\s'
 // ══════════════════════════════════════════════════════
 // ── Flow Engine: 文本处理流引擎 ──
 // ── 负责消息发送、SSE 流式处理、大文本检测与分段、
@@ -351,22 +350,87 @@ function updateStreamingMessage(msgIdx) {
     }
   }
 
-  // Update content bubble
-  let bubble = contentArea.querySelector('.message-bubble');
-  const content = renderMarkdown(msg.content);
-  if (content && !bubble) {
-    // Create bubble
-    bubble = document.createElement('div');
-    bubble.className = 'message-bubble';
-    contentArea.appendChild(bubble);
-  }
-  if (bubble && content) {
-    bubble.innerHTML = content;
+  // Update content - timeline (interleaved text + exec events) or single bubble (backward compat)
+  const hasParts = Array.isArray(msg.parts);
+  if (hasParts) {
+    // ── Timeline rendering for interleaved text + exec events ──
+    let timeline = contentArea.querySelector('.msg-timeline');
+    if (!timeline) {
+      // Remove old single bubble if exists
+      const oldBubble = contentArea.querySelector(':scope > .message-bubble');
+      if (oldBubble) oldBubble.remove();
+      // Create timeline container
+      timeline = document.createElement('div');
+      timeline.className = 'msg-timeline';
+      // Insert after thought blocks or at beginning
+      const allThoughts = contentArea.querySelectorAll(':scope > .thought-block');
+      if (allThoughts.length > 0) {
+        allThoughts[allThoughts.length - 1].insertAdjacentElement('afterend', timeline);
+      } else {
+        contentArea.appendChild(timeline);
+      }
+    }
+
+    // Cache completed parts rendering (only re-render when parts count changes)
+    const partsCount = msg.parts.length;
+    if (!msg._renderedPartsHtml || msg._lastPartsCount !== partsCount) {
+      let html = '';
+      for (const part of msg.parts) {
+        if (part.type === 'text' && part.content.trim()) {
+          html += '<div class="message-bubble">' + renderMarkdown(part.content) + '</div>';
+        } else if (part.type === 'exec') {
+          html += renderInlineExecEvent(part.data, msgIdx);
+        }
+      }
+      msg._renderedPartsHtml = html;
+      msg._lastPartsCount = partsCount;
+    }
+
+    // Build streaming bubble for current in-progress text
+    const streamingText = msg._streamingText || '';
+    const streamingBubbleHtml = streamingText.trim()
+      ? '<div class="message-bubble">' + renderMarkdown(streamingText) + '</div>'
+      : '';
+
+    timeline.innerHTML = msg._renderedPartsHtml + streamingBubbleHtml;
+
+    // Remove exec events panel if present (events are now inline in timeline)
+    const execPanel = contentArea.querySelector('.exec-events-panel');
+    if (execPanel) execPanel.remove();
+  } else {
+    // ── Backward compat: single content bubble + exec events panel ──
+    let bubble = contentArea.querySelector('.message-bubble');
+    const content = renderMarkdown(msg.content);
+    if (content && !bubble) {
+      bubble = document.createElement('div');
+      bubble.className = 'message-bubble';
+      contentArea.appendChild(bubble);
+    }
+    if (bubble && content) {
+      bubble.innerHTML = content;
+    }
+
+    // Exec events panel (only for backward compat messages without parts)
+    if (msg.exec_events && msg.exec_events.length > 0) {
+      let execPanel = contentArea.querySelector('.exec-events-panel');
+      const newExecHtml = renderExecEvents(msg.exec_events, msgIdx);
+      if (execPanel) {
+        execPanel.outerHTML = newExecHtml;
+      } else {
+        const timeEl = contentArea.querySelector('.message-time');
+        if (timeEl) {
+          timeEl.insertAdjacentHTML('beforebegin', newExecHtml);
+        } else {
+          contentArea.insertAdjacentHTML('beforeend', newExecHtml);
+        }
+      }
+    }
   }
 
   // Update streaming indicator
   let indicator = contentArea.querySelector('.streaming-indicator');
-  const streamingIndicator = msg.streaming && !msg.content && !msg.thought ? `
+  const anyContent = msg.content || msg._streamingText || (msg.parts && msg.parts.length > 0);
+  const streamingIndicator = msg.streaming && !anyContent && !msg.thought ? `
       <div class="streaming-indicator">
         <div class="streaming-dots">
           <span class="dot"></span><span class="dot"></span><span class="dot"></span>
@@ -381,23 +445,6 @@ function updateStreamingMessage(msgIdx) {
     indicator.remove();
   }
 
-  // Update exec events panel
-  if (msg.exec_events && msg.exec_events.length > 0) {
-    let execPanel = contentArea.querySelector('.exec-events-panel');
-    const newExecHtml = renderExecEvents(msg.exec_events, msgIdx);
-    if (execPanel) {
-      execPanel.outerHTML = newExecHtml;
-    } else {
-      // Insert before time element or at end
-      const timeEl = contentArea.querySelector('.message-time');
-      if (timeEl) {
-        timeEl.insertAdjacentHTML('beforebegin', newExecHtml);
-      } else {
-        contentArea.insertAdjacentHTML('beforeend', newExecHtml);
-      }
-    }
-  }
-
   // Auto-scroll
   scrollToBottom();
 }
@@ -508,6 +555,52 @@ function toggleExecEventsPanel(header) {
   body.classList.toggle('expanded');
 }
 
+// ══════════════════════════════════════════════════════
+// ── Inline Exec Event (Timeline Card) ──
+// ══════════════════════════════════════════════════════
+
+function renderInlineExecEvent(data, msgIdx) {
+  const iconEmoji = getEventIconEmoji(data);
+  const title = data.title || (data.tool_name || data.skill_name || '执行事件');
+
+  // Build meta text
+  let metaParts = [];
+  if (data.execution_time !== undefined) metaParts.push('耗时 ' + data.execution_time + 's');
+  if (data.language) metaParts.push(escapeHtml(data.language));
+  if (data.tool_name || data.skill_name) metaParts.push(escapeHtml(data.tool_name || data.skill_name));
+  if (data.timed_out) metaParts.push('超时');
+  if (data.exit_code !== undefined) metaParts.push('exit: ' + data.exit_code);
+  const metaText = metaParts.join(' · ');
+
+  // Build body content
+  let bodyHtml = '';
+  // Code preview for code_exec/code_result
+  if (data.code_preview && (data.type === 'code_exec' || data.type === 'code_result')) {
+    bodyHtml += '<div class="inline-exec-code" onclick="showExecResultModal(' + msgIdx + ', ' + data.id + ')" title="点击查看完整结果">' + escapeHtml(data.code_preview) + '</div>';
+  }
+  // Summary for tool_result/skill_result
+  if (data.summary && (data.type === 'tool_result' || data.type === 'skill_result')) {
+    bodyHtml += '<div class="inline-exec-summary">' + escapeHtml(data.summary) + '</div>';
+  }
+  // Result button for code_result
+  if (data.type === 'code_result' && (data.stdout || data.stderr || data.error)) {
+    bodyHtml += '<button class="inline-exec-result-btn" onclick="showExecResultModal(' + msgIdx + ', ' + data.id + ')">查看详情</button>';
+  }
+  // Result button for tool_result/skill_result
+  if ((data.type === 'tool_result' || data.type === 'skill_result') && data.result) {
+    bodyHtml += '<button class="inline-exec-result-btn" onclick="showToolResultModal(' + msgIdx + ', ' + data.id + ')">查看详情</button>';
+  }
+
+  return '<div class="inline-exec-event">' +
+    '<div class="inline-exec-header">' +
+      '<span class="inline-exec-icon">' + iconEmoji + '</span>' +
+      '<span class="inline-exec-title">' + escapeHtml(title) + '</span>' +
+      (metaText ? '<span class="inline-exec-meta">' + metaText + '</span>' : '') +
+    '</div>' +
+    bodyHtml +
+  '</div>';
+}
+
 // ══════════════════════════════════════════════════════
 // ── Execution Result Modal (执行结果弹窗) ──
 // ══════════════════════════════════════════════════════
@@ -703,14 +796,22 @@ async function sendMessage() {
     const reader = resp.body.getReader();
     const decoder = new TextDecoder();
     let buffer = '';
-    let fullResponse = '';
+    let msgParts = [];       // Timeline: [{type:'text', content:'...'}, {type:'exec', data:{...}}]
+    let currentText = '';    // Accumulator for current streaming text segment
+    let allExecEvents = [];  // All exec events (for summary panel at bottom)
     let msgIdx = state.messages.length;
     let sessionIdReceived = sessionId;
-    let execEventsReceived = [];
     let fullThought = '';
-    
+
+    function flushCurrentText() {
+      if (currentText.trim()) {
+        msgParts.push({type: 'text', content: currentText});
+      }
+      currentText = '';
+    }
+
     // Add placeholder for streaming response
-    state.messages.push({ role: 'assistant', content: '', thought: '', time: new Date().toISOString(), streaming: true });
+    state.messages.push({ role: 'assistant', content: '', thought: '', parts: [], time: new Date().toISOString(), streaming: true });
     renderMessages();
     
     while (true) {
@@ -731,13 +832,22 @@ async function sendMessage() {
             // Sync the actual session ID (backend may prefix with agent_path)
             state.activeSessionId = evt.session_id;
           } else if (evt.type === 'text') {
-            fullResponse = evt.content;
+            // Full text event (non-streaming replacement)
+            flushCurrentText();
+            msgParts.push({type: 'text', content: evt.content});
+            state.messages[msgIdx].parts = [...msgParts];
+            state.messages[msgIdx]._streamingText = '';
             state.messages[msgIdx].content = evt.content;
             renderMessages();
           } else if (evt.type === 'text_delta') {
             // Incremental streaming token
-            fullResponse += evt.content;
-            state.messages[msgIdx].content = fullResponse;
+            currentText += evt.content;
+            // Build backward-compat content from all parts + streaming text
+            const allText = msgParts.filter(p => p.type === 'text').map(p => p.content).join('\n\n')
+              + (currentText.trim() ? '\n\n' + currentText : '');
+            state.messages[msgIdx].parts = [...msgParts];
+            state.messages[msgIdx]._streamingText = currentText;
+            state.messages[msgIdx].content = allText;
             throttledStreamUpdate(msgIdx);
             // ── 分段流式 TTS：推送增量文本 ──
             if (ttsManager.enabled && !ttsManager._streamActive) {
@@ -759,28 +869,39 @@ async function sendMessage() {
             state.messages[msgIdx].thought = fullThought;
             throttledStreamUpdate(msgIdx);
           } else if (evt.type === 'queue_start') {
-            // New message starting from queue
+            // Finalize previous message
+            flushCurrentText();
             if (state.messages[msgIdx]) {
               state.messages[msgIdx].streaming = false;
-              if (execEventsReceived.length > 0) state.messages[msgIdx].exec_events = [...execEventsReceived];
+              state.messages[msgIdx].parts = [...msgParts];
+              state.messages[msgIdx].content = msgParts.filter(p => p.type === 'text').map(p => p.content).join('\n\n') || '(无回复)';
+              state.messages[msgIdx]._streamingText = '';
+              if (allExecEvents.length > 0) state.messages[msgIdx].exec_events = [...allExecEvents];
             }
+            // Start new message
             state.messages.push({ role: 'user', content: evt.message, time: new Date().toISOString() });
             msgIdx = state.messages.length;
-            fullResponse = '';
+            msgParts = [];
+            currentText = '';
+            allExecEvents = [];
             fullThought = '';
-            execEventsReceived = [];
-            state.messages.push({ role: 'assistant', content: '', thought: '', time: new Date().toISOString(), streaming: true });
+            state.messages.push({ role: 'assistant', content: '', thought: '', parts: [], time: new Date().toISOString(), streaming: true });
             renderMessages();
           } else if (evt.type === 'clear_text') {
             // Clear intermediate text from previous agent loop iterations
-            fullResponse = '';
-            state.messages[msgIdx].content = '';
+            flushCurrentText();
+            state.messages[msgIdx].parts = [...msgParts];
+            state.messages[msgIdx]._streamingText = '';
+            state.messages[msgIdx].content = msgParts.filter(p => p.type === 'text').map(p => p.content).join('\n\n') || '';
             throttledStreamUpdate(msgIdx);
           } else if (evt.type === 'exec_event') {
             // Real-time execution event (tool call, code exec, skill result, etc.)
-            execEventsReceived.push(evt.data);
-            // 立即更新消息的 exec_events 并渲染
-            state.messages[msgIdx].exec_events = [...execEventsReceived];
+            flushCurrentText();
+            msgParts.push({type: 'exec', data: evt.data});
+            allExecEvents.push(evt.data);
+            state.messages[msgIdx].parts = [...msgParts];
+            state.messages[msgIdx]._streamingText = '';
+            state.messages[msgIdx].exec_events = [...allExecEvents];
             throttledStreamUpdate(msgIdx);
           } else if (evt.type === 'task_list_update') {
             // 任务列表 JSON 直推更新（exec 模式）
@@ -803,11 +924,15 @@ async function sendMessage() {
               }
             }
           } else if (evt.type === 'done') {
+            flushCurrentText();
             // done 事件提供最终事件列表（可能有去重/合并）
             if (evt.exec_events && evt.exec_events.length > 0) {
-              execEventsReceived = evt.exec_events;
-              state.messages[msgIdx].exec_events = [...execEventsReceived];
+              allExecEvents = evt.exec_events;
             }
+            state.messages[msgIdx].parts = [...msgParts];
+            state.messages[msgIdx]._streamingText = '';
+            state.messages[msgIdx].exec_events = [...allExecEvents];
+            state.messages[msgIdx].content = msgParts.filter(p => p.type === 'text').map(p => p.content).join('\n\n') || '(无回复)';
           } else if (evt.type === 'reasoning_delta') {
             // 模型推理过程增量文本（OpenAI o1/o3/DeepSeek-R1 等推理模型）
             if (!state.messages[msgIdx].reasoning) state.messages[msgIdx].reasoning = '';
@@ -818,22 +943,25 @@ async function sendMessage() {
             state.messages[msgIdx].reasoning = evt.content;
             throttledStreamUpdate(msgIdx);
           } else if (evt.type === 'error') {
-            fullResponse = '❌ ' + evt.error;
-            state.messages[msgIdx].content = fullResponse;
+            flushCurrentText();
+            currentText = '❌ ' + evt.error;
+            msgParts.push({type: 'text', content: currentText});
+            state.messages[msgIdx].parts = [...msgParts];
+            state.messages[msgIdx]._streamingText = '';
+            state.messages[msgIdx].content = msgParts.filter(p => p.type === 'text').map(p => p.content).join('\n\n');
           }
         } catch (e) { /* skip malformed */ }
       }
     }
     
     // Finalize message
+    flushCurrentText();
     if (state.messages[msgIdx]) {
       state.messages[msgIdx].streaming = false;
-      if (execEventsReceived.length > 0) {
-        state.messages[msgIdx].exec_events = execEventsReceived;
-      }
-      if (!state.messages[msgIdx].content) {
-        state.messages[msgIdx].content = '(无回复)';
-      }
+      state.messages[msgIdx].parts = [...msgParts];
+      state.messages[msgIdx]._streamingText = '';
+      state.messages[msgIdx].exec_events = allExecEvents;
+      state.messages[msgIdx].content = msgParts.filter(p => p.type === 'text').map(p => p.content).join('\n\n') || '(无回复)';
     }
     
     // Task list 已通过 SSE task_list_update 事件实时推送，无需再轮询

package/web/ui/chat/groupchat.js

@@ -37,7 +37,7 @@ async function fetchGroups() {
 async function createGroupApi(name, description, emoji, color, members) {
   return await api('/api/groups', {
     method: 'POST',
-    body: JSON.stringify({ name, description, emoji, color, members }),
+    body: JSON.stringify({ name, description, avatar_emoji: emoji, avatar_color: color, members }),
   });
 }
 
@@ -109,13 +109,12 @@ function renderGroups() {
     var memberCount = (g.members || []).length;
     var isActive = g.id === currentGroupId;
     html += '<div class="group-item ' + (isActive ? 'active' : '') + '" onclick="selectGroup(\'' + escapeHtml(g.id) + '\')" title="' + escapeHtml(g.name) + '">';
-    html += '<div class="group-icon">' + escapeHtml(g.emoji || '👥') + '</div>';
+    html += '<div class="group-icon"' + (g.avatar_color ? ' style="background:' + escapeHtml(g.avatar_color) + ';color:#fff"' : '') + '>' + escapeHtml(g.avatar_emoji || g.emoji || '👥') + '</div>';
     html += '<div class="group-info">';
     html += '<div class="group-name">' + escapeHtml(g.name) + '</div>';
     html += '<div class="group-preview">' + escapeHtml(g.description || memberCount + ' 位成员') + '</div>';
     html += '</div>';
     html += '<span class="group-badge">' + memberCount + '</span>';
-    html += '<button class="group-delete" onclick="event.stopPropagation();deleteGroupConfirm(\'' + escapeHtml(g.id) + '\')" title="删除">✕</button>';
     html += '</div>';
   }
   listEl.innerHTML = html;
@@ -145,7 +144,7 @@ async function selectGroup(gid) {
     var groupData = await getGroup(gid);
 
     // Update header
-    document.getElementById('headerTitle').textContent = (groupData.emoji || '👥') + ' ' + groupData.name;
+    document.getElementById('headerTitle').textContent = (groupData.avatar_emoji || groupData.emoji || '👥') + ' ' + groupData.name;
     document.getElementById('activeAgentBadge').style.display = 'none';
     document.getElementById('groupBackBtn').style.display = '';
     document.getElementById('groupSettingsBtn').style.display = '';
@@ -217,7 +216,7 @@ function renderGroupMessages() {
   if (groupMessages.length === 0) {
     var group = groups.find(function(g) { return g.id === currentGroupId; });
     html = '<div class="welcome-card">'
-      + '<h2><span class="emoji">' + escapeHtml((group && group.emoji) || '👥') + '</span>'
+      + '<h2><span class="emoji">' + escapeHtml((group && (group.avatar_emoji || group.emoji)) || '👥') + '</span>'
       + ' <span>群聊: ' + escapeHtml((group && group.name) || '') + '</span></h2>'
       + '<p class="subtitle">向所有成员发送消息，每个 Agent 会分别回复</p>'
       + '</div>';
@@ -426,8 +425,8 @@ async function showGroupSettingsModal() {
       + '</div>'
       + '<div class="agent-form-group"><label>头像</label>'
       + '<div class="agent-avatar-picker" id="groupSettingsEmojiPicker">'
-      + emojis.map(function(e) { return '<div class="agent-avatar-option ' + ((groupData.emoji || '👥') === e ? 'selected' : '') + '" onclick="pickGroupSettingsEmoji(this,\'' + e + '\')" data-emoji="' + e + '">' + e + '</div>'; }).join('')
-      + '</div><input type="hidden" id="groupSettingsEmoji" value="' + escapeHtml(groupData.emoji || '👥') + '"></div>'
+      + emojis.map(function(e) { return '<div class="agent-avatar-option ' + ((groupData.avatar_emoji || groupData.emoji || '👥') === e ? 'selected' : '') + '" onclick="pickGroupSettingsEmoji(this,\'' + e + '\')" data-emoji="' + e + '">' + e + '</div>'; }).join('')
+      + '</div><input type="hidden" id="groupSettingsEmoji" value="' + escapeHtml(groupData.avatar_emoji || groupData.emoji || '👥') + '"></div>'
       + '<div class="agent-form-group"><label>成员 (' + members.length + ')</label>'
       + '<div style="margin-bottom:8px">'
       + '<button class="config-action-btn" onclick="showAddMemberToGroup()" style="font-size:12px;padding:6px 12px">'
@@ -463,14 +462,14 @@ async function saveGroupSettings() {
     await updateGroup(currentGroupId, {
       name: name,
       description: document.getElementById('groupSettingsDesc').value.trim(),
-      emoji: document.getElementById('groupSettingsEmoji').value
+      avatar_emoji: document.getElementById('groupSettingsEmoji').value
     });
     toast('群聊设置已保存', 'success');
     closeGroupModal();
     await fetchGroups();
     var group = groups.find(function(g) { return g.id === currentGroupId; });
     if (group) {
-      document.getElementById('headerTitle').textContent = (group.emoji || '👥') + ' ' + group.name;
+      document.getElementById('headerTitle').textContent = (group.avatar_emoji || group.emoji || '👥') + ' ' + group.name;
     }
   } catch (e) {
     toast('保存失败: ' + e.message, 'error');

package/web/ui/chat/middle_chat.html

@@ -12,6 +12,9 @@
         </span>
       </div>
       <div class="header-actions">
+        <button class="header-btn" id="mobileAgentsBtn" onclick="toggleMobileAgentPanel()" title="Agents" style="display:none">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+        </button>
         <button class="header-btn" id="groupBackBtn" onclick="exitGroupChat()" title="返回对话" style="display:none">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
         </button>

package/web/ui/chat/right_agents.html

@@ -39,7 +39,12 @@
       <div id="rpGroupSection">
         <div class="rp-section-header" onclick="toggleRpSection('group')">
           <span class="rp-section-title">👥 群聊</span>
-          <span class="rp-section-toggle expanded" id="rpGroupToggle">▶</span>
+          <div style="display:flex;align-items:center;gap:4px">
+            <button class="rp-section-action-btn" onclick="event.stopPropagation();showCreateGroupModal()" title="创建群聊">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            </button>
+            <span class="rp-section-toggle expanded" id="rpGroupToggle">▶</span>
+          </div>
         </div>
         <div class="rp-section-body" id="rpGroupBody">
           <div class="group-list" id="groupList">

package/web/ui/index.html

@@ -151,6 +151,29 @@ tr:hover{background:var(--surface2)}
 [data-theme="claude"] .badge-red{background:#c9444422}
 [data-theme="claude"] .badge-yellow{background:#c4862b22}
 [data-theme="claude"] .badge-blue{background:#4a7fc922}
+/* ── Mobile Responsive ── */
+@media(max-width:768px){
+  body{flex-direction:column}
+  .sidebar{position:fixed;left:0;top:0;height:100vh;width:260px;max-width:80vw;z-index:50;transform:translateX(-100%);transition:transform .3s ease;flex-shrink:0}
+  .sidebar.mobile-open{transform:translateX(0)}
+  .sidebar.collapsed{width:260px;transform:translateX(-100%)}
+  .sidebar.collapsed.mobile-open{transform:translateX(0)}
+  .sidebar-toggle{display:none!important}
+  .mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:45;display:none}
+  .mobile-overlay.active{display:block}
+  .header{padding:12px 16px}
+  .header h2{font-size:16px}
+  .content{padding:16px}
+  .grid{grid-template-columns:1fr}
+  .form-row{grid-template-columns:1fr}
+  .table-wrap{overflow-x:auto}
+  .modal{width:95%;max-height:90vh;padding:16px}
+  .modal-wide{max-width:95%}
+  .tabs{gap:0;overflow-x:auto}
+  .toast{left:16px;right:16px;bottom:16px}
+  .agent-card{flex-direction:column;align-items:flex-start}
+  .agent-card .flex.flex-col{flex-direction:row;gap:4px}
+}
 </style>
 </head>
 <body>
@@ -181,8 +204,9 @@ tr:hover{background:var(--surface2)}
     · <a href="#" onclick="checkUpdate(true)" style="color:var(--primary)">检查更新</a>
   </div>
 </div>
+<div class="mobile-overlay" id="adminMobileOverlay" onclick="closeMobileSidebar()"></div>
 <div class="main">
-  <div class="header"><div style="display:flex;align-items:center;gap:12px"><h2 id="pageTitle">📊 仪表盘</h2><button class="header-btn" id="themeToggle" title="切换主题"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div><div style="display:flex;align-items:center;gap:8px"><span class="status-dot"></span>运行中</div></div>
+  <div class="header"><div style="display:flex;align-items:center;gap:12px"><button class="header-btn" id="mobileMenuBtn" onclick="toggleMobileSidebar()" style="display:none" title="菜单"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button><h2 id="pageTitle">📊 仪表盘</h2><button class="header-btn" id="themeToggle" title="切换主题"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div><div style="display:flex;align-items:center;gap:8px"><span class="status-dot"></span>运行中</div></div>
   <div class="content" id="content"></div>
 </div>
 <div id="modalContainer"></div>
@@ -250,12 +274,28 @@ function initTheme(){const s=localStorage.getItem('myagent-theme')||'claude';doc
 function toggleTheme(){const c=document.documentElement.getAttribute('data-theme')||'claude';const n=c==='claude'?'dark':'claude';document.documentElement.setAttribute('data-theme',n);localStorage.setItem('myagent-theme',n);updateThemeIcon(n)}
 function updateThemeIcon(t){const b=document.getElementById('themeToggle');if(!b)return;if(t==='dark'){b.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';b.title='切换到 Claude 风格'}else{b.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';b.title='切换到夜间模式'}}
 // ── Sidebar Collapse ──
-function toggleSidebar(){const s=document.getElementById('adminSidebar');const t=document.getElementById('sidebarToggle');if(!s)return;s.classList.toggle('collapsed');const isCollapsed=s.classList.contains('collapsed');t.textContent=isCollapsed?'▶':'◀';localStorage.setItem('myagent-admin-sidebar-collapsed',isCollapsed)}
+function toggleSidebar(){const s=document.getElementById('adminSidebar');const t=document.getElementById('sidebarToggle');if(!s)return;s.classList.toggle('collapsed');const isCollapsed=s.classList.contains('collapsed');t.textContent=isCollapsed?'▶':'◀';localStorage.setItem('myagent-admin-sidebar-collapsed',isCollapsed);closeMobileSidebar()}
 // Initialize
 initTheme();
 document.getElementById('themeToggle')?.addEventListener('click',toggleTheme);
 if(localStorage.getItem('myagent-admin-sidebar-collapsed')==='true'){document.getElementById('adminSidebar')?.classList.add('collapsed');const t=document.getElementById('sidebarToggle');if(t)t.textContent='▶'}
 
+// ── Mobile Sidebar ──
+function toggleMobileSidebar(){
+  const s=document.getElementById('adminSidebar');
+  const o=document.getElementById('adminMobileOverlay');
+  s.classList.toggle('mobile-open');
+  o.classList.toggle('active');
+}
+function closeMobileSidebar(){
+  document.getElementById('adminSidebar').classList.remove('mobile-open');
+  document.getElementById('adminMobileOverlay').classList.remove('active');
+}
+// Show hamburger on mobile
+function checkMobile(){const btn=document.getElementById('mobileMenuBtn');if(btn)btn.style.display=window.innerWidth<=768?'grid':'none'}
+window.addEventListener('resize',checkMobile);
+checkMobile();
+
 loadVersion();
 setTimeout(()=>checkUpdate(false),30000);
 function showConfirm(title,msg,onOk){
@@ -266,6 +306,7 @@ function showConfirm(title,msg,onOk){
 }
 
 function showPage(page){
+  closeMobileSidebar();
   currentPage=page;
   document.querySelectorAll('.nav-item').forEach((n,i)=>n.classList.toggle('active',Object.keys(pages)[i]===page));
   $('pageTitle').textContent=pages[page]||page;