@co0ontty/wand 1.23.0 → 1.25.0

package/dist/web-ui/content/scripts.js

@@ -59,7 +59,6 @@
     (function() {
       var configPath = "${escapeHtml(configPath)}";
       var CHAT_EXPAND_STATE_STORAGE_KEY = "wand-chat-expand-state-v1";
-      var CHAT_AUTO_FOLLOW_STORAGE_KEY = "wand-chat-auto-follow";
 
       var state = {
         selectedId: (function() {
@@ -183,16 +182,13 @@
         quickCommitGenerating: false,
         quickCommitError: "",
         quickCommitForm: { autoMessage: false, customMessage: "", makeTag: false, tag: "", push: false },
-        chatAutoFollow: (function() {
-          try {
-            var saved = localStorage.getItem(CHAT_AUTO_FOLLOW_STORAGE_KEY);
-            return saved === null ? true : saved === "true";
-          } catch (e) {
-            return true;
-          }
-        })(),
-        showChatJumpToBottom: false,
-        chatScrollThreshold: 200,
+        // Telegram 风格的"贴底"状态：true = 用户当前贴在底部，新消息会自然出现；
+        // false = 用户向上滚了，未读会累积到气泡里，不会自动滚他们的视图。
+        chatStickToBottom: true,
+        chatUnreadCount: 0,
+        // state.currentMessages 中第一条未读消息的 index，-1 表示没有未读。
+        chatUnreadStartIndex: -1,
+        chatScrollThreshold: 120,
         chatIsProgrammaticScroll: false,
         chatScrollElement: null,
         chatScrollHandler: null,
@@ -406,14 +402,6 @@
         }
       }
 
-      function persistChatAutoFollow() {
-        try {
-          localStorage.setItem(CHAT_AUTO_FOLLOW_STORAGE_KEY, state.chatAutoFollow ? "true" : "false");
-        } catch (e) {
-          // Ignore localStorage errors
-        }
-      }
-
       function getChatScrollElement() {
         var chatOutput = document.getElementById("chat-output");
         if (!chatOutput) {
@@ -429,36 +417,106 @@
         return null;
       }
 
+      // column-reverse: scrollTop=0 是视觉底部，越往上看 scrollTop 绝对值越大。
+      // 部分浏览器历史上在 column-reverse 里给负 scrollTop，所以用绝对值更稳。
       function isChatNearBottom(chatMsgs) {
         var el = chatMsgs || getChatScrollElement();
         if (!el) return true;
-        return el.scrollTop < state.chatScrollThreshold;
+        return Math.abs(el.scrollTop) < state.chatScrollThreshold;
+      }
+
+      // 没有手动 toggle 了——是否贴底完全由用户的滚动行为决定。
+      // 这个函数只用来在某些场景（点未读气泡）下显式把状态扳回 true。
+      function setChatStickToBottom(enabled) {
+        state.chatStickToBottom = !!enabled;
+        if (state.chatStickToBottom) clearChatUnread({ removeDivider: true });
+        updateChatUnreadBubble();
       }
 
-      function updateChatFollowToggleButton() {
-        var button = document.getElementById("chat-follow-toggle");
-        if (!button) return;
-        var enabled = !!state.chatAutoFollow;
-        button.classList.toggle("active", enabled);
-        button.setAttribute("aria-pressed", enabled ? "true" : "false");
-        button.setAttribute("title", enabled ? "追踪底部：开启（点击暂停）" : "追踪底部：已暂停（点击开启）");
-        button.setAttribute("aria-label", enabled ? "追踪底部：开启" : "追踪底部：已暂停");
-        button.innerHTML = enabled
-          ? '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 2.5l4.5 4.5 4.5-4.5"/><path d="M3.5 8.5l4.5 4.5 4.5-4.5"/></svg>'
-          : '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5.5 3v10"/><path d="M10.5 3v10"/></svg>';
+      function clearChatUnread(options) {
+        options = options || {};
+        var hadUnread = state.chatUnreadCount > 0 || state.chatUnreadStartIndex >= 0;
+        state.chatUnreadCount = 0;
+        state.chatUnreadStartIndex = -1;
+        if (options.removeDivider !== false) {
+          var chatMsgs = getChatScrollElement();
+          if (chatMsgs) {
+            var divider = chatMsgs.querySelector(".chat-unread-divider");
+            if (divider && divider.parentNode) divider.parentNode.removeChild(divider);
+          }
+        }
+        if (hadUnread) updateChatUnreadBubble();
       }
 
-      function updateChatJumpToBottomButton() {
-        var button = document.getElementById("chat-jump-bottom");
+      // 在 chatMessages 容器里把"未读分割线"放到正确位置——visually 在
+      // 最后一条已读和第一条未读中间。column-reverse 下 DOM[0] 是最新（视觉底部），
+      // 所以分割线在 DOM 里应该插到"第一条已读消息"之前。
+      function refreshChatUnreadDivider(chatMessages) {
+        if (!chatMessages) chatMessages = getChatScrollElement();
+        if (!chatMessages) return;
+        var existing = chatMessages.querySelector(".chat-unread-divider");
+        if (state.chatUnreadStartIndex < 0 || state.chatUnreadCount <= 0) {
+          if (existing && existing.parentNode) existing.parentNode.removeChild(existing);
+          return;
+        }
+        var startIdx = state.chatUnreadStartIndex;
+        // 找到 DOM 里第一条 originalIndex < startIdx 的消息——它紧邻分割线下方（DOM 顺序），
+        // 也就是视觉上紧贴在分割线"上方"（column-reverse）。
+        var nodes = chatMessages.querySelectorAll(".chat-message");
+        var boundary = null;
+        for (var i = 0; i < nodes.length; i++) {
+          var idxAttr = nodes[i].getAttribute("data-msg-index");
+          if (idxAttr === null) continue;
+          var idx = parseInt(idxAttr, 10);
+          if (!isNaN(idx) && idx < startIdx) { boundary = nodes[i]; break; }
+        }
+        // 没找到 boundary：未读消息覆盖了整个可见窗口——把分割线挂到末尾即可。
+        var label = state.chatUnreadCount + " 条新消息";
+        if (!existing) {
+          existing = document.createElement("div");
+          existing.className = "chat-unread-divider";
+          existing.setAttribute("role", "separator");
+          existing.innerHTML = '<span class="chat-unread-divider-line"></span>'
+            + '<span class="chat-unread-divider-label"></span>'
+            + '<span class="chat-unread-divider-line"></span>';
+        }
+        existing.querySelector(".chat-unread-divider-label").textContent = label;
+        if (boundary) {
+          if (existing.nextSibling !== boundary || existing.parentNode !== chatMessages) {
+            chatMessages.insertBefore(existing, boundary);
+          }
+        } else {
+          if (existing.parentNode !== chatMessages || existing.nextSibling !== null) {
+            chatMessages.appendChild(existing);
+          }
+        }
+      }
+
+      function updateChatUnreadBubble() {
+        var bubble = document.getElementById("chat-unread-bubble");
+        if (!bubble) return;
         var selectedSession = state.sessions.find(function(s) { return s.id === state.selectedId; });
-        var shouldShow = !!selectedSession
-          && state.currentView === "chat"
-          && !state.chatAutoFollow
-          && !isChatNearBottom();
-        state.showChatJumpToBottom = shouldShow;
-        if (button) {
-          button.classList.toggle("visible", shouldShow);
+        var notAtBottom = !isChatNearBottom();
+        // 显示条件：有选中会话 + 在 chat 视图 + 用户已经滚开了底部。
+        // 不强制要求有未读——用户主动滚上去时也给一个"回到底部"的入口。
+        var shouldShow = !!selectedSession && state.currentView === "chat" && notAtBottom;
+        bubble.classList.toggle("visible", shouldShow);
+        bubble.classList.toggle("has-unread", state.chatUnreadCount > 0);
+        var countEl = bubble.querySelector(".chat-unread-bubble-count");
+        if (countEl) {
+          if (state.chatUnreadCount > 0) {
+            countEl.textContent = state.chatUnreadCount > 99 ? "99+" : String(state.chatUnreadCount);
+            countEl.classList.add("visible");
+          } else {
+            countEl.textContent = "";
+            countEl.classList.remove("visible");
+          }
         }
+        var label = state.chatUnreadCount > 0
+          ? (state.chatUnreadCount + " 条新消息，点击查看")
+          : "回到最新消息";
+        bubble.setAttribute("aria-label", label);
+        bubble.setAttribute("title", label);
         var chatContainer = document.getElementById("chat-output");
         if (chatContainer) chatContainer.classList.toggle("has-jump-btn", shouldShow);
       }
@@ -467,38 +525,26 @@
         var chatMsgs = getChatScrollElement();
         if (!chatMsgs || !chatMsgs.isConnected) return;
         state.chatIsProgrammaticScroll = true;
+        var done = function() {
+          state.chatIsProgrammaticScroll = false;
+          state.chatStickToBottom = true;
+          clearChatUnread({ removeDivider: true });
+          updateChatUnreadBubble();
+        };
         if (smooth && typeof chatMsgs.scrollTo === "function") {
           chatMsgs.scrollTo({ top: 0, behavior: "smooth" });
-          setTimeout(function() {
-            state.chatIsProgrammaticScroll = false;
-            updateChatJumpToBottomButton();
-          }, 220);
+          setTimeout(done, 260);
           return;
         }
         chatMsgs.scrollTop = 0;
-        requestAnimationFrame(function() {
-          state.chatIsProgrammaticScroll = false;
-          updateChatJumpToBottomButton();
-        });
-      }
-
-      function setChatAutoFollow(enabled, options) {
-        options = options || {};
-        state.chatAutoFollow = !!enabled;
-        persistChatAutoFollow();
-        updateChatFollowToggleButton();
-        if (state.chatAutoFollow && options.scrollNow !== false) {
-          scrollChatToBottom(!!options.smooth);
-        } else {
-          updateChatJumpToBottomButton();
-        }
+        requestAnimationFrame(done);
       }
 
       function bindChatScrollListener() {
         var chatMsgs = getChatScrollElement();
         if (!chatMsgs || !chatMsgs.isConnected) return;
         if (state.chatScrollElement === chatMsgs && state.chatScrollHandler) {
-          updateChatJumpToBottomButton();
+          updateChatUnreadBubble();
           return;
         }
         if (state.chatScrollElement && state.chatScrollHandler) {
@@ -507,22 +553,24 @@
         state.chatScrollElement = chatMsgs;
         state.chatScrollHandler = function() {
           if (!chatMsgs.isConnected) return;
+          // 程序触发的滚动（点了气泡）不算"用户翻页"——别把状态弄乱。
           if (state.chatIsProgrammaticScroll) {
-            updateChatJumpToBottomButton();
+            updateChatUnreadBubble();
             return;
           }
-          if (!isChatNearBottom(chatMsgs)) {
-            if (state.chatAutoFollow) {
-              setChatAutoFollow(false, { scrollNow: false });
-            } else {
-              updateChatJumpToBottomButton();
-            }
-            return;
+          var atBottom = isChatNearBottom(chatMsgs);
+          if (atBottom) {
+            // 用户自己滚到底了——清未读、贴回底部、撤下气泡。
+            state.chatStickToBottom = true;
+            clearChatUnread({ removeDivider: true });
+          } else {
+            // 用户主动往上翻——脱离贴底状态。新消息只会累积到气泡，不滚视图。
+            state.chatStickToBottom = false;
           }
-          updateChatJumpToBottomButton();
+          updateChatUnreadBubble();
         };
         chatMsgs.addEventListener("scroll", state.chatScrollHandler, { passive: true });
-        updateChatJumpToBottomButton();
+        updateChatUnreadBubble();
       }
 
       /** Load older messages by expanding the visible window */
@@ -865,8 +913,11 @@
         }
         state.chatScrollElement = null;
         state.chatScrollHandler = null;
-        state.showChatJumpToBottom = false;
         state.chatIsProgrammaticScroll = false;
+        // 切会话时未读状态归零、贴底重置——避免上一个会话残留的"未读气泡"。
+        state.chatStickToBottom = true;
+        state.chatUnreadCount = 0;
+        state.chatUnreadStartIndex = -1;
       }
 
       function getEffectiveCwd() {
@@ -1360,19 +1411,38 @@
               // File side panel
               '<div id="file-side-panel" class="file-side-panel' + (state.filePanelOpen ? " open" : "") + '">' +
                 '<div class="file-side-panel-header">' +
-                  '<span class="file-side-panel-title">文件</span>' +
-                  '<button id="file-side-panel-close" class="btn btn-ghost btn-sm" type="button" aria-label="关闭">×</button>' +
+                  '<div class="file-side-panel-title-group">' +
+                    '<span class="file-side-panel-icon">' + wandFileIcon("folder-open", { size: 16 }) + '</span>' +
+                    '<span class="file-side-panel-title">文件</span>' +
+                  '</div>' +
+                  '<div class="file-side-panel-header-actions">' +
+                    '<button class="file-side-panel-iconbtn file-explorer-toggle-hidden' +
+                      (state.fileExplorerShowHidden ? ' active' : '') + '" id="file-explorer-toggle-hidden" type="button" title="' +
+                      (state.fileExplorerShowHidden ? "隐藏点开头文件" : "显示隐藏文件") + '" aria-pressed="' +
+                      (state.fileExplorerShowHidden ? "true" : "false") + '" aria-label="切换显示隐藏文件">' +
+                      wandFileIcon(state.fileExplorerShowHidden ? "eye" : "eye-off", { size: 15 }) +
+                    '</button>' +
+                    '<button class="file-side-panel-iconbtn" id="file-explorer-refresh" type="button" title="刷新" aria-label="刷新文件列表">' +
+                      wandFileIcon("refresh", { size: 15 }) +
+                    '</button>' +
+                    '<button id="file-side-panel-close" class="file-side-panel-iconbtn close" type="button" aria-label="关闭文件面板" title="关闭">' +
+                      wandFileIcon("x", { size: 16 }) +
+                    '</button>' +
+                  '</div>' +
                 '</div>' +
                 '<div class="file-side-panel-body">' +
                   '<div class="file-explorer-header">' +
-                    '<button class="file-explorer-up" id="file-explorer-up" type="button" title="返回上级目录" aria-label="返回上级目录">⬆</button>' +
+                    '<button class="file-explorer-up" id="file-explorer-up" type="button" title="返回上级目录" aria-label="返回上级目录">' +
+                      wandFileIcon("arrow-up", { size: 15 }) +
+                    '</button>' +
                     '<input type="text" class="file-explorer-path" id="file-explorer-cwd" value="' + escapeHtml(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '" title="' + escapeHtml(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '" placeholder="输入路径并回车..." spellcheck="false" autocomplete="off" autocapitalize="off" autocorrect="off" aria-label="当前路径，可直接修改后回车" />' +
-                    '<button class="file-explorer-toggle-hidden' + (state.fileExplorerShowHidden ? ' active' : '') + '" id="file-explorer-toggle-hidden" type="button" title="' + (state.fileExplorerShowHidden ? "隐藏点开头文件" : "显示隐藏文件") + '" aria-pressed="' + (state.fileExplorerShowHidden ? "true" : "false") + '">' + (state.fileExplorerShowHidden ? "👁" : "👁‍🗨") + '</button>' +
-                    '<button class="file-explorer-refresh" id="file-explorer-refresh" title="刷新" aria-label="刷新文件列表">↻</button>' +
                   '</div>' +
                   '<div class="file-search-box">' +
-                    '<input type="text" id="file-search-input" class="file-search-input" placeholder="搜索文件..." autocomplete="off" />' +
-                    '<button class="file-search-clear" id="file-search-clear" type="button" aria-label="清除搜索">×</button>' +
+                    '<span class="file-search-icon">' + wandFileIcon("search", { size: 14 }) + '</span>' +
+                    '<input type="text" id="file-search-input" class="file-search-input" placeholder="搜索当前目录…" autocomplete="off" />' +
+                    '<button class="file-search-clear" id="file-search-clear" type="button" aria-label="清除搜索" title="清除">' +
+                      wandFileIcon("x", { size: 13 }) +
+                    '</button>' +
                   '</div>' +
                   '<div class="file-explorer" id="file-explorer">' + renderFileExplorer(selectedSession && selectedSession.cwd ? selectedSession.cwd : getConfigCwd()) + '</div>' +
                 '</div>' +
@@ -1388,10 +1458,10 @@
                 '<button id="terminal-jump-bottom" class="terminal-jump-bottom' + (state.showTerminalJumpToBottom ? ' visible' : '') + '" type="button" title="回到底部" aria-label="回到底部"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3.5v9M3.5 8l4.5 4.5L12.5 8"/></svg></button>' +
               '</div>' +
               '<div id="chat-output" class="chat-container hidden">' +
-                '<div class="chat-overlay-controls">' +
-                  '<button id="chat-follow-toggle" class="chat-follow-toggle topbar-btn' + (state.chatAutoFollow ? ' active' : '') + '" type="button" aria-pressed="' + (state.chatAutoFollow ? 'true' : 'false') + '" aria-label="' + (state.chatAutoFollow ? '追踪底部：开启' : '追踪底部：已暂停') + '" title="' + (state.chatAutoFollow ? '追踪底部：开启（点击暂停）' : '追踪底部：已暂停（点击开启）') + '">' + (state.chatAutoFollow ? '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 2.5l4.5 4.5 4.5-4.5"/><path d="M3.5 8.5l4.5 4.5 4.5-4.5"/></svg>' : '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5.5 3v10"/><path d="M10.5 3v10"/></svg>') + '</button>' +
-                '</div>' +
-                '<button id="chat-jump-bottom" class="chat-jump-bottom' + (state.showChatJumpToBottom ? ' visible' : '') + '" type="button" title="回到底部并继续追底" aria-label="回到底部"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3.5v9M3.5 8l4.5 4.5L12.5 8"/></svg></button>' +
+                '<button id="chat-unread-bubble" class="chat-unread-bubble" type="button" title="回到最新消息" aria-label="回到最新消息">' +
+                  '<span class="chat-unread-bubble-icon"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3.5v9M3.5 8l4.5 4.5L12.5 8"/></svg></span>' +
+                  '<span class="chat-unread-bubble-count" aria-hidden="true"></span>' +
+                '</button>' +
               '</div>' +
               '<div id="blank-chat" class="blank-chat' + (state.selectedId ? " hidden" : "") + '">' +
                 '<div class="blank-chat-inner">' +
@@ -1450,18 +1520,20 @@
                     '</svg>' +
                     '<span class="prompt-optimize-spinner" aria-hidden="true"></span>' +
                   '</button>' +
-                  '<textarea id="input-box" class="input-textarea" placeholder="' + getComposerPlaceholder(selectedSession, state.terminalInteractive) + '" rows="1">' + escapeHtml(currentDraft) + '</textarea>' +
+                  '<textarea id="input-box" class="input-textarea" placeholder="' + getComposerPlaceholder(selectedSession, state.terminalInteractive) + '" rows="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" enterkeyhint="send">' + escapeHtml(currentDraft) + '</textarea>' +
                   '<div id="attachment-preview" class="attachment-preview hidden"></div>' +
                   '<div class="input-composer-bar">' +
                     '<div class="input-composer-left">' +
                       '<button id="attach-btn" class="btn-circle btn-circle-attach" type="button" title="附加文件">' +
                         '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>' +
                       '</button>' +
-                      '<input type="file" id="file-upload-input" multiple style="position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0);pointer-events:none">' +
-                      '<select id="chat-mode-select" class="chat-mode-select" title="仅对新建会话生效">' +
+                      // tabindex="-1": 把这些控件移出 iOS Safari 的表单导航链，
+                      // 这样 textarea 聚焦时键盘上方就不会出现 ⌃ ⌄ ✓ 表单辅助栏。
+                      '<input type="file" id="file-upload-input" multiple tabindex="-1" style="position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0);pointer-events:none">' +
+                      '<select id="chat-mode-select" class="chat-mode-select" tabindex="-1" title="仅对新建会话生效">' +
                         renderModeOptions(preferredTool, composerMode) +
                       '</select>' +
-                      '<select id="chat-model-select" class="chat-mode-select chat-model-select" title="切换模型（对运行中会话发送 /model，对新会话作为 --model 启动）">' +
+                      '<select id="chat-model-select" class="chat-mode-select chat-model-select" tabindex="-1" title="切换模型（对运行中会话发送 /model，对新会话作为 --model 启动）">' +
                         renderChatModelOptions(getEffectiveModel(selectedSession), selectedSession) +
                       '</select>' +
                       '<button id="terminal-interactive-toggle-top" class="composer-interactive-toggle' + (state.terminalInteractive ? " active" : "") + '" type="button" title="切换终端交互模式">⌨</button>' +
@@ -2941,6 +3013,49 @@
         }
       }
 
+      // ── Inline SVG icon library for file UI ──
+      // The previous design used unicode/emoji glyphs (⬆ ↻ 👁 ✕ 📋 ✏️ ⬇ ↩ A−) for
+      // toolbar/header buttons. Those render inconsistently across OSes and don't
+      // visually convey their action. These SVG icons are stroke-based, follow
+      // currentColor, and stay crisp at any zoom.
+      var WAND_FILE_ICONS = {
+        "chevron-left":  '<path d="M15 18l-6-6 6-6"/>',
+        "arrow-up":      '<path d="M12 19V5"/><path d="M5 12l7-7 7 7"/>',
+        "refresh":       '<path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v5h-5"/>',
+        "eye":           '<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/>',
+        "eye-off":       '<path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a19.86 19.86 0 0 1 4.22-5.18"/><path d="M1 1l22 22"/><path d="M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 7 11 7a19.83 19.83 0 0 1-3.36 4.27"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/>',
+        "x":             '<path d="M18 6L6 18"/><path d="M6 6l12 12"/>',
+        "search":        '<circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>',
+        "copy":          '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>',
+        "clipboard":     '<rect x="8" y="3" width="8" height="4" rx="1"/><path d="M16 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2"/>',
+        "download":      '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/>',
+        "edit":          '<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/>',
+        "save":          '<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8"/><path d="M7 3v5h8"/>',
+        "rotate-ccw":    '<path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/>',
+        "wrap-text":     '<path d="M3 6h18"/><path d="M3 12h15a3 3 0 1 1 0 6h-4"/><path d="M16 16l-2 2 2 2"/><path d="M3 18h6"/>',
+        "type":          '<path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/>',
+        "minus":         '<path d="M5 12h14"/>',
+        "plus":          '<path d="M12 5v14"/><path d="M5 12h14"/>',
+        "send-to-input": '<path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/>',
+        "terminal":      '<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>',
+        "folder-open":   '<path d="M6 14l1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"/>',
+        "info":          '<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>',
+      };
+
+      // Render a stroke-based 16x16 SVG icon by name. Extra classes get appended
+      // to the outer svg, so callers can target specific icons in CSS.
+      function wandFileIcon(name, opts) {
+        opts = opts || {};
+        var body = WAND_FILE_ICONS[name] || "";
+        var size = opts.size || 16;
+        var extraClass = opts.className ? " " + opts.className : "";
+        return '<svg class="wand-icon wand-icon-' + name + extraClass +
+          '" width="' + size + '" height="' + size +
+          '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"' +
+          ' stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+          body + '</svg>';
+      }
+
       function renderFileExplorer(cwd) {
         var root = cwd || getConfigCwd();
         if (!root) {
@@ -3260,7 +3375,7 @@
         if (btn) {
           btn.classList.toggle("active", state.fileExplorerShowHidden);
           btn.setAttribute("aria-pressed", state.fileExplorerShowHidden ? "true" : "false");
-          btn.textContent = state.fileExplorerShowHidden ? "👁" : "👁‍🗨";
+          btn.innerHTML = wandFileIcon(state.fileExplorerShowHidden ? "eye" : "eye-off", { size: 15 });
           btn.title = state.fileExplorerShowHidden ? "隐藏点开头文件" : "显示隐藏文件";
         }
         refreshFileExplorer();
@@ -3403,11 +3518,15 @@
               '<div class="file-preview-header">' +
                 '<div class="file-preview-title">' +
                   '<span class="file-preview-icon">📄</span>' +
-                  '<span class="file-preview-filename">加载中…</span>' +
+                  '<div class="file-preview-name-block">' +
+                    '<div class="file-preview-name-row">' +
+                      '<span class="file-preview-filename">加载中…</span>' +
+                    '</div>' +
+                    '<span class="file-preview-path" title=""></span>' +
+                  '</div>' +
                 '</div>' +
-                '<div class="file-preview-path" title=""></div>' +
                 '<div class="file-preview-toolbar"></div>' +
-                '<button class="file-preview-close" title="关闭 (Esc)" aria-label="关闭">✕</button>' +
+                '<button class="file-preview-close" title="关闭 (Esc)" aria-label="关闭">' + wandFileIcon("x", { size: 18 }) + '</button>' +
               '</div>' +
               '<div class="file-preview-body">' +
                 '<div class="file-preview-loading">加载预览…</div>' +
@@ -3417,6 +3536,25 @@
 
           var closeBtn = overlay.querySelector(".file-preview-close");
           var closeModal = function() {
+            // Guard: warn before discarding unsaved edits.
+            if (_activeFilePreview && _activeFilePreview.dirty) {
+              if (typeof openWandDialog === "function") {
+                openWandDialog({
+                  type: "warning",
+                  title: "放弃未保存的修改？",
+                  message: "当前文件有未保存的改动，关闭后会丢失。",
+                  buttons: [
+                    { label: "继续编辑", value: false, kind: "ghost" },
+                    { label: "放弃修改", value: true, kind: "danger", autofocus: true },
+                  ],
+                  cancelValue: false,
+                }).then(function(go) { if (go) doClose(); });
+                return;
+              }
+            }
+            doClose();
+          };
+          var doClose = function() {
             overlay.remove();
             document.removeEventListener("keydown", keyHandler);
             _activeFilePreview = null;
@@ -3426,21 +3564,49 @@
             if (e.target === overlay) closeModal();
           });
           var keyHandler = function(e) {
-            if (e.key === "Escape") { closeModal(); return; }
+            // Ctrl/Cmd+S to save in edit mode.
+            if ((e.key === "s" || e.key === "S") && (e.ctrlKey || e.metaKey)) {
+              if (_activeFilePreview && _activeFilePreview.editing) {
+                e.preventDefault();
+                saveFileEdit();
+                return;
+              }
+            }
+            if (e.key === "Escape") {
+              // Inside edit mode, Esc exits edit instead of closing the modal.
+              if (_activeFilePreview && _activeFilePreview.editing) {
+                e.preventDefault();
+                exitFileEdit();
+                return;
+              }
+              closeModal();
+              return;
+            }
             if (!_activeFilePreview) return;
+            // Don't intercept arrow keys while typing.
             if (e.target && (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")) return;
+            if (_activeFilePreview.editing) return;
             if (e.key === "ArrowLeft") { e.preventDefault(); navigatePreviewSibling(-1); }
             else if (e.key === "ArrowRight") { e.preventDefault(); navigatePreviewSibling(1); }
           };
           document.addEventListener("keydown", keyHandler);
 
-          _activeFilePreview = { overlay: overlay, close: closeModal, path: filePath, data: null };
+          _activeFilePreview = { overlay: overlay, close: closeModal, path: filePath, data: null, editing: false, dirty: false };
         } else {
           _activeFilePreview.path = filePath;
+          _activeFilePreview.editing = false;
+          _activeFilePreview.dirty = false;
           // Reset header / body for the new file.
           var titleEl = overlay.querySelector(".file-preview-title");
           if (titleEl) {
-            titleEl.innerHTML = '<span class="file-preview-icon">📄</span><span class="file-preview-filename">加载中…</span>';
+            titleEl.innerHTML =
+              '<span class="file-preview-icon">📄</span>' +
+              '<div class="file-preview-name-block">' +
+                '<div class="file-preview-name-row">' +
+                  '<span class="file-preview-filename">加载中…</span>' +
+                '</div>' +
+                '<span class="file-preview-path" title=""></span>' +
+              '</div>';
           }
           var toolbarEl = overlay.querySelector(".file-preview-toolbar");
           if (toolbarEl) toolbarEl.innerHTML = "";
@@ -3630,16 +3796,31 @@
         var bar = overlay.querySelector(".file-preview-toolbar");
         if (!bar) return;
         bar.innerHTML = "";
+        bar.classList.remove("editing");
+
+        // ── Edit mode renders its own dedicated toolbar (save / revert / cancel). ──
+        if (_activeFilePreview && _activeFilePreview.editing) {
+          bar.classList.add("editing");
+          renderEditToolbar(overlay, data);
+          return;
+        }
+
         var buttons = [];
 
+        if (data.kind === "text") {
+          buttons.push({ label: "编辑文件 (E)", icon: wandFileIcon("edit"), primary: true, action: function() {
+            enterFileEdit();
+          }});
+        }
+
         // Common actions across all kinds
-        buttons.push({ label: "复制路径", icon: "📋", action: function() {
+        buttons.push({ label: "复制路径", icon: wandFileIcon("clipboard"), action: function() {
           copyTextSafely(data.path).then(function() { showToastIfPossible("已复制路径"); });
         }});
-        buttons.push({ label: "粘贴到输入框", icon: "✏️", action: function() {
+        buttons.push({ label: "粘贴到输入框", icon: wandFileIcon("send-to-input"), action: function() {
           if (appendToComposer(data.path)) showToastIfPossible("已粘贴到输入框");
         }});
-        buttons.push({ label: "下载", icon: "⬇", action: function() {
+        buttons.push({ label: "下载", icon: wandFileIcon("download"), action: function() {
           var a = document.createElement("a");
           a.href = "/api/file-raw?download=1&path=" + encodeURIComponent(data.path);
           a.download = data.name || "";
@@ -3649,10 +3830,10 @@
         }});
 
         if (data.kind === "text") {
-          buttons.push({ label: "复制全部", icon: "📄", action: function() {
+          buttons.push({ label: "复制全部内容", icon: wandFileIcon("copy"), action: function() {
             copyTextSafely(data.content || "").then(function() { showToastIfPossible("已复制内容"); });
           }});
-          buttons.push({ label: "自动换行", icon: "↩", toggleClass: "toolbar-active",
+          buttons.push({ label: "切换自动换行", icon: wandFileIcon("wrap-text"), toggleClass: "toolbar-active",
             getInitial: function() {
               var pre = overlay.querySelector(".code-preview-content pre");
               return pre && pre.classList.contains("wrap");
@@ -3664,26 +3845,235 @@
               btn.classList.toggle("toolbar-active", pre.classList.contains("wrap"));
             }
           });
-          buttons.push({ label: "字号 −", icon: "A−", action: function() { adjustPreviewFontSize(overlay, -1); }});
-          buttons.push({ label: "字号 +", icon: "A+", action: function() { adjustPreviewFontSize(overlay, +1); }});
+          // Font-size adjustments — render as a single grouped chip with two halves.
+          buttons.push({ kind: "group", className: "toolbar-group-fontsize",
+            children: [
+              { label: "缩小字号", icon: wandFileIcon("minus"), action: function() { adjustPreviewFontSize(overlay, -1); }},
+              { kind: "label", icon: wandFileIcon("type"), label: "字号" },
+              { label: "放大字号", icon: wandFileIcon("plus"), action: function() { adjustPreviewFontSize(overlay, +1); }},
+            ],
+          });
         }
 
+        renderToolbarButtons(bar, buttons, overlay);
+      }
+
+      // Render a flat list of toolbar buttons (with optional grouped chips).
+      function renderToolbarButtons(bar, buttons, overlay) {
         buttons.forEach(function(b) {
-          var btn = document.createElement("button");
-          btn.type = "button";
-          btn.className = "file-preview-toolbar-btn";
-          btn.title = b.label;
-          btn.setAttribute("aria-label", b.label);
-          btn.innerHTML = '<span class="toolbar-icon">' + b.icon + '</span>';
-          if (b.getInitial && b.getInitial()) btn.classList.add("toolbar-active");
-          btn.addEventListener("click", function(ev) {
-            ev.stopPropagation();
-            b.action(btn);
+          if (b.kind === "group") {
+            var group = document.createElement("div");
+            group.className = "file-preview-toolbar-group" + (b.className ? " " + b.className : "");
+            b.children.forEach(function(child) {
+              if (child.kind === "label") {
+                var lab = document.createElement("span");
+                lab.className = "file-preview-toolbar-grouplabel";
+                lab.title = child.label || "";
+                lab.innerHTML = child.icon || "";
+                group.appendChild(lab);
+                return;
+              }
+              group.appendChild(buildToolbarButton(child));
+            });
+            bar.appendChild(group);
+            return;
+          }
+          bar.appendChild(buildToolbarButton(b));
+        });
+      }
+
+      function buildToolbarButton(b) {
+        var btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "file-preview-toolbar-btn";
+        if (b.primary) btn.classList.add("primary");
+        if (b.danger) btn.classList.add("danger");
+        btn.title = b.label;
+        btn.setAttribute("aria-label", b.label);
+        btn.innerHTML = '<span class="toolbar-icon">' + (b.icon || "") + '</span>' +
+          (b.text ? '<span class="toolbar-text">' + escapeHtml(b.text) + '</span>' : '');
+        if (b.getInitial && b.getInitial()) btn.classList.add("toolbar-active");
+        btn.addEventListener("click", function(ev) {
+          ev.stopPropagation();
+          if (typeof b.action === "function") b.action(btn);
+        });
+        return btn;
+      }
+
+      // ── Edit mode ──
+      function renderEditToolbar(overlay, data) {
+        var bar = overlay.querySelector(".file-preview-toolbar");
+        if (!bar) return;
+        bar.innerHTML = "";
+        var saving = _activeFilePreview && _activeFilePreview.saving;
+        var buttons = [
+          { label: "保存 (Ctrl+S)", icon: wandFileIcon("save"), text: "保存", primary: true,
+            action: function() { saveFileEdit(); } },
+          { label: "撤销改动", icon: wandFileIcon("rotate-ccw"),
+            action: function() { revertFileEdit(); } },
+          { label: "退出编辑 (Esc)", icon: wandFileIcon("x"),
+            action: function() { exitFileEdit(); } },
+        ];
+        renderToolbarButtons(bar, buttons, overlay);
+        if (saving) {
+          bar.querySelectorAll(".file-preview-toolbar-btn").forEach(function(b) { b.disabled = true; });
+        }
+      }
+
+      function enterFileEdit() {
+        if (!_activeFilePreview || !_activeFilePreview.data) return;
+        var data = _activeFilePreview.data;
+        if (data.kind !== "text") return;
+        _activeFilePreview.editing = true;
+        _activeFilePreview.dirty = false;
+        _activeFilePreview.originalContent = data.content || "";
+        var overlay = _activeFilePreview.overlay;
+        var body = overlay.querySelector(".file-preview-body");
+        if (!body) return;
+        body.classList.add("editing");
+        body.innerHTML =
+          '<div class="code-editor-wrapper">' +
+            '<textarea class="code-editor-textarea" spellcheck="false" autocomplete="off"' +
+              ' autocorrect="off" autocapitalize="off" wrap="off"></textarea>' +
+          '</div>';
+        var ta = body.querySelector(".code-editor-textarea");
+        if (ta) {
+          ta.value = data.content || "";
+          ta.addEventListener("input", function() {
+            var dirty = ta.value !== (_activeFilePreview.originalContent || "");
+            if (dirty !== _activeFilePreview.dirty) {
+              _activeFilePreview.dirty = dirty;
+              updateDirtyBadge();
+            }
+          });
+          // Tab key inserts spaces (2-space indent) instead of moving focus.
+          ta.addEventListener("keydown", function(e) {
+            if (e.key === "Tab") {
+              e.preventDefault();
+              var start = ta.selectionStart, end = ta.selectionEnd;
+              var indent = "  ";
+              ta.value = ta.value.slice(0, start) + indent + ta.value.slice(end);
+              ta.selectionStart = ta.selectionEnd = start + indent.length;
+              ta.dispatchEvent(new Event("input"));
+            }
           });
-          bar.appendChild(btn);
+          // Focus and place caret at start so user sees the top of the file.
+          setTimeout(function() {
+            ta.focus();
+            ta.setSelectionRange(0, 0);
+            ta.scrollTop = 0;
+          }, 30);
+        }
+        renderPreviewToolbar(overlay, data);
+        updateDirtyBadge();
+      }
+
+      function exitFileEdit() {
+        if (!_activeFilePreview || !_activeFilePreview.editing) return;
+        var doExit = function() {
+          _activeFilePreview.editing = false;
+          _activeFilePreview.dirty = false;
+          var overlay = _activeFilePreview.overlay;
+          var body = overlay.querySelector(".file-preview-body");
+          if (body) body.classList.remove("editing");
+          // Re-render preview from latest data.
+          renderPreviewContent(overlay, _activeFilePreview.data);
+          updateDirtyBadge();
+        };
+        if (_activeFilePreview.dirty && typeof openWandDialog === "function") {
+          openWandDialog({
+            type: "warning",
+            title: "放弃未保存的修改？",
+            message: "当前文件有未保存的改动，退出编辑后会丢失。",
+            buttons: [
+              { label: "继续编辑", value: false, kind: "ghost" },
+              { label: "放弃修改", value: true, kind: "danger", autofocus: true },
+            ],
+            cancelValue: false,
+          }).then(function(go) { if (go) doExit(); });
+          return;
+        }
+        doExit();
+      }
+
+      function revertFileEdit() {
+        if (!_activeFilePreview || !_activeFilePreview.editing) return;
+        var overlay = _activeFilePreview.overlay;
+        var ta = overlay.querySelector(".code-editor-textarea");
+        if (!ta) return;
+        ta.value = _activeFilePreview.originalContent || "";
+        _activeFilePreview.dirty = false;
+        updateDirtyBadge();
+        ta.focus();
+      }
+
+      function saveFileEdit() {
+        if (!_activeFilePreview || !_activeFilePreview.editing) return;
+        if (_activeFilePreview.saving) return;
+        var overlay = _activeFilePreview.overlay;
+        var ta = overlay.querySelector(".code-editor-textarea");
+        if (!ta) return;
+        var newContent = ta.value;
+        if (newContent === (_activeFilePreview.originalContent || "")) {
+          showToastIfPossible("没有改动");
+          return;
+        }
+        _activeFilePreview.saving = true;
+        renderEditToolbar(overlay, _activeFilePreview.data);
+        fetch("/api/file-write", {
+          method: "POST",
+          credentials: "same-origin",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ path: _activeFilePreview.path, content: newContent }),
+        }).then(function(res) {
+          return res.json().then(function(json) { return { ok: res.ok, status: res.status, data: json }; });
+        }).then(function(result) {
+          _activeFilePreview.saving = false;
+          if (!result.ok || (result.data && result.data.error)) {
+            var msg = (result.data && result.data.error) || ("保存失败 (" + result.status + ")");
+            showToastIfPossible(msg);
+            renderEditToolbar(overlay, _activeFilePreview.data);
+            return;
+          }
+          // Sync local cache so revert points at the new baseline.
+          _activeFilePreview.data.content = newContent;
+          _activeFilePreview.data.size = (result.data && result.data.size) || newContent.length;
+          _activeFilePreview.originalContent = newContent;
+          _activeFilePreview.dirty = false;
+          showToastIfPossible("已保存");
+          updateDirtyBadge();
+          renderEditToolbar(overlay, _activeFilePreview.data);
+          // Quietly refresh the file tree so size/git-status update.
+          if (typeof refreshFileExplorer === "function") {
+            try { refreshFileExplorer(); } catch (e) {}
+          }
+        }).catch(function(err) {
+          _activeFilePreview.saving = false;
+          showToastIfPossible("保存失败：" + (err && err.message ? err.message : "网络错误"));
+          renderEditToolbar(overlay, _activeFilePreview.data);
         });
       }
 
+      function updateDirtyBadge() {
+        if (!_activeFilePreview) return;
+        var overlay = _activeFilePreview.overlay;
+        if (!overlay) return;
+        var row = overlay.querySelector(".file-preview-name-row");
+        if (!row) return;
+        var existing = row.querySelector(".file-preview-dirty");
+        if (_activeFilePreview.dirty) {
+          if (!existing) {
+            var dot = document.createElement("span");
+            dot.className = "file-preview-dirty";
+            dot.title = "有未保存的修改";
+            dot.textContent = "● 未保存";
+            row.appendChild(dot);
+          }
+        } else if (existing) {
+          existing.remove();
+        }
+      }
+
       function adjustPreviewFontSize(overlay, delta) {
         var pre = overlay.querySelector(".code-preview-content pre");
         var nums = overlay.querySelector(".code-preview-lines");
@@ -5087,17 +5477,10 @@
         if (jumpBottomBtn) jumpBottomBtn.addEventListener("click", function() {
           maybeScrollTerminalToBottom("force");
         });
-        var chatFollowToggle = document.getElementById("chat-follow-toggle");
-        if (chatFollowToggle) chatFollowToggle.addEventListener("click", function() {
-          if (state.chatAutoFollow) {
-            setChatAutoFollow(false, { scrollNow: false });
-          } else {
-            setChatAutoFollow(true, { scrollNow: true, smooth: false });
-          }
-        });
-        var chatJumpBottomBtn = document.getElementById("chat-jump-bottom");
-        if (chatJumpBottomBtn) chatJumpBottomBtn.addEventListener("click", function() {
-          setChatAutoFollow(true, { scrollNow: true, smooth: true });
+        // 未读气泡：点一下就贴回最新消息，顺手清掉未读分割线和计数。
+        var chatUnreadBubble = document.getElementById("chat-unread-bubble");
+        if (chatUnreadBubble) chatUnreadBubble.addEventListener("click", function() {
+          scrollChatToBottom(true);
         });
         var fileRefresh = document.getElementById("file-explorer-refresh");
         if (fileRefresh) fileRefresh.addEventListener("click", function() { refreshFileExplorer(); });
@@ -7125,8 +7508,7 @@
           ensureChatMessagesContainer(chatContainer);
         }
         bindChatScrollListener();
-        updateChatFollowToggleButton();
-        updateChatJumpToBottomButton();
+        updateChatUnreadBubble();
         updateInteractiveControls();
       }
 
@@ -12465,7 +12847,27 @@
           // Keyboard just closed — force terminal refit and scroll to bottom
           // after a delay so the keyboard dismiss animation and layout settle.
           if (keyboardOpen && !isKeyboardOpen) {
+            // iOS Safari quirk: 用户按系统 Done / 下滑收起键盘 / 应用切换回来时，
+            // 经常不会触发 textarea 的 blur 事件，导致 handleInputBoxBlur 里的
+            // window.scrollTo(0,0) 不跑，页面停在键盘抬起时被 iOS 推上去的
+            // 偏移位置，input-panel 看起来"没回到底"。
+            // 这里在 visualViewport 检测到键盘收起的瞬间直接强制复位一次，
+            // 并把 --app-viewport-height 兜底清掉，确保 .app-container 回到
+            // 100dvh、input-panel 重新贴屏幕底部。
+            var rootEl = document.documentElement;
+            rootEl.style.removeProperty('--app-viewport-height');
+            window.scrollTo(0, 0);
+            if (document.scrollingElement) document.scrollingElement.scrollTop = 0;
+            rootEl.scrollTop = 0;
+            if (document.body) document.body.scrollTop = 0;
             setTimeout(function() {
+              // 二次复位：等键盘收起动画 + iOS 自身的回滚跑完后再清一次，
+              // 防止 iOS 在动画过程中又把 scrollTop 推上去。
+              window.scrollTo(0, 0);
+              if (document.scrollingElement) document.scrollingElement.scrollTop = 0;
+              rootEl.scrollTop = 0;
+              if (document.body) document.body.scrollTop = 0;
+              syncAppViewportHeight();
               ensureTerminalFit("keyboard-close", { forceReplay: true });
               maybeScrollTerminalToBottom("force");
             }, 200);
@@ -13783,8 +14185,7 @@
         if (!chatMessages) return null;
         chatMessages.innerHTML = html;
         bindChatScrollListener();
-        updateChatFollowToggleButton();
-        updateChatJumpToBottomButton();
+        updateChatUnreadBubble();
         return chatMessages;
       }
 
@@ -13818,9 +14219,10 @@
         }
 
         // Lazy loading: only render the most recent chatRenderedCount messages.
-        // Auto-expand when new messages arrive during active streaming to avoid hiding them.
+        // 新消息进来时永远展开渲染窗口，避免用户正在看的旧消息被挤进"加载更早"里——
+        // Telegram 风格下我们不主动挪用户的视线，最稳妥的办法就是别让他看的那条消失。
         var totalMsgCount = allMessages.length;
-        if (totalMsgCount > state.chatRenderedCount && state.chatAutoFollow) {
+        if (totalMsgCount > state.chatRenderedCount) {
           state.chatRenderedCount = totalMsgCount;
         }
         var visibleOffset = Math.max(0, totalMsgCount - state.chatRenderedCount);
@@ -13876,6 +14278,13 @@
         var chatMessages = ensureChatMessagesContainer(chatOutput);
         if (!chatMessages) return;
 
+        // 在动 DOM 之前先看用户是不是贴在底部——这决定后面我们要不要让视图
+        // "继续粘在底部"。column-reverse 下 scrollTop 接近 0 = 视觉底部。
+        // 同时把 state.chatStickToBottom 同步到当前真实状态，避免长时间不滚动后
+        // 的状态漂移（比如新会话 init 的瞬间）。
+        var renderWasAtBottom = isChatNearBottom(chatMessages);
+        if (renderWasAtBottom) state.chatStickToBottom = true;
+
         var existingCount = chatMessages.querySelectorAll(".chat-message").length;
         // Full render when: forced, no existing messages, or message count decreased/changed
         var needsFullRender = forceRender || existingCount === 0 || msgCount !== existingCount;
@@ -13925,16 +14334,29 @@
           }
 
           chatMessages.innerHTML = html;
+          // 给每条消息打 data-msg-index（用 state.currentMessages 的全局索引），
+          // 后面 refreshChatUnreadDivider 用它找未读分割线的位置。
+          (function() {
+            var msgEls = chatMessages.querySelectorAll(".chat-message:not(.system-info)");
+            // column-reverse: DOM[0] = 最新（最高 originalIndex）
+            var totalVisible = msgEls.length;
+            for (var idx = 0; idx < totalVisible; idx++) {
+              msgEls[idx].setAttribute("data-msg-index", String(visibleOffset + totalVisible - 1 - idx));
+            }
+          })();
           // 会话切换 / 首次渲染后，浏览器会把旧的 scrollTop 钳制到新内容
           // 的最大值——column-reverse 下这意味着视觉上跳到最上面（最旧消息），
           // 也就是用户反馈的"退出再回来时被重定向到最上面"。这里在
           // prevMsgCount === 0（resetChatRenderCache 后或刚从空状态进入）
           // 强制 scrollTop=0（视觉底部 = 最新消息），避免错位。
-          // 注意：仅在"换会话/初次渲染"时强制重置；同一会话内的全量重渲染
-          // （prevMsgCount > 0，比如 forceFullRender 或消息数减少）继续走
-          // smartScrollToBottom，尊重用户的 chatAutoFollow 选择。
           if (prevMsgCount === 0) {
             chatMessages.scrollTop = 0;
+            state.chatStickToBottom = true;
+            clearChatUnread({ removeDivider: true });
+          } else if (renderWasAtBottom) {
+            // 同一会话内的全量重渲染：用户原本贴底就保持贴底，浏览器在 innerHTML
+            // 重置后可能把 scrollTop 钳到一个奇怪的值，这里显式拉回 0。
+            chatMessages.scrollTop = 0;
           }
           attachAllCopyHandlers(chatMessages);
           bindChatScrollListener();
@@ -13959,9 +14381,13 @@
               }
             }
           }
-          // Scroll to bottom (newest message) - column-reverse: scrollTop=0 is visual bottom
+          // 不主动 smartScrollToBottom——同一会话的全量重渲染要么是
+          // streaming fallback（页面位置应保持），要么是 msgCount 减少（极少见，
+          // 走 prevMsgCount===0 那条分支已经处理）。让浏览器自带的 scroll
+          // anchoring 接手，避免在用户阅读时把视图拽走。
           requestAnimationFrame(function() {
-            smartScrollToBottom(chatMessages);
+            refreshChatUnreadDivider(chatMessages);
+            updateChatUnreadBubble();
             observeLoadMoreSentinel();
           });
         }
@@ -14036,6 +14462,11 @@
           newMessages.reverse();
           var fragment = document.createDocumentFragment();
           var insertedEls = [];
+          // 记录每条新消息的 originalIndex，方便后面打标签 / 计算未读起点。
+          var insertedOrigIdx = [];
+          // 第一条新消息（数组里 index 最小的，时间上最早的那条）对应的全局索引——
+          // 用作未读起点。
+          var firstNewOrigIdx = visibleOffset + existingCount;
           for (var i = 0; i < newMessages.length; i++) {
             var div = document.createElement("div");
             var nmOrigIdx = visibleOffset + existingCount + (newMessages.length - 1 - i);
@@ -14043,7 +14474,9 @@
             var el = div.firstElementChild;
             if (el) {
               el.classList.add("animate-in");
+              el.setAttribute("data-msg-index", String(nmOrigIdx));
               insertedEls.push(el);
+              insertedOrigIdx.push(nmOrigIdx);
               fragment.appendChild(el);
             }
           }
@@ -14053,10 +14486,31 @@
           applyPersistedExpandState(chatMessages);
           // Collapse all existing cards; new cards (with animate-in) stay expanded
           collapseOldToolCards(chatMessages, insertedEls);
-          // Scroll to bottom (newest message) - column-reverse: scrollTop=0 is visual bottom
-          requestAnimationFrame(function() {
-            smartScrollToBottom(chatMessages);
-          });
+          // Telegram 行为：
+          // - 用户原本就贴在底部 → 维持贴底（column-reverse 通常会自动留在底部，
+          //   但浏览器的 scroll anchoring 在某些边界场景会把 scrollTop 调成非 0；
+          //   这里显式拉回 0 做兜底，不用动画，不会让用户感觉"被甩"）。
+          // - 用户已经滚上去 → 一根毛都不动他的视图，只把未读累到气泡里。
+          if (renderWasAtBottom) {
+            requestAnimationFrame(function() {
+              if (chatMessages.isConnected && Math.abs(chatMessages.scrollTop) > 1) {
+                state.chatIsProgrammaticScroll = true;
+                chatMessages.scrollTop = 0;
+                requestAnimationFrame(function() { state.chatIsProgrammaticScroll = false; });
+              }
+              // 视为已读 —— 用户当前就在底部看着，这些新消息直接进入"已读"。
+              clearChatUnread({ removeDivider: true });
+              updateChatUnreadBubble();
+            });
+          } else {
+            // 累计未读。如果之前没有未读，就用这一批的最早一条做分割线起点。
+            if (state.chatUnreadStartIndex < 0) {
+              state.chatUnreadStartIndex = firstNewOrigIdx;
+            }
+            state.chatUnreadCount += insertedEls.length;
+            refreshChatUnreadDivider(chatMessages);
+            updateChatUnreadBubble();
+          }
         } else if (msgCount === existingCount && outputHash !== prevHash) {
           // Same message count but content changed (streaming update).
           // Optimization: only re-render the newest N messages (column-reverse: first children)
@@ -14091,8 +14545,18 @@
           if (replacedAny) {
             bindChatScrollListener();
             applyPersistedExpandState(chatMessages);
+            // Streaming 更新只是改最新一条的内容，不改条数。column-reverse 下
+            // 浏览器的 scroll anchoring 会自动保持视觉位置；用户贴底时新内容
+            // 自然出现在底部，用户上滚时视图也不受打扰——不需要再 smartScroll。
             requestAnimationFrame(function() {
-              smartScrollToBottom(chatMessages);
+              // 兜底：用户贴底时如果浏览器把 scrollTop 调成非零，拉回来。
+              if (renderWasAtBottom && chatMessages.isConnected && Math.abs(chatMessages.scrollTop) > 1) {
+                state.chatIsProgrammaticScroll = true;
+                chatMessages.scrollTop = 0;
+                requestAnimationFrame(function() { state.chatIsProgrammaticScroll = false; });
+              }
+              refreshChatUnreadDivider(chatMessages);
+              updateChatUnreadBubble();
             });
             var newestMsgEl = chatMessages.querySelector(".chat-message");
             var allCards = chatMessages.querySelectorAll(".tool-use-card, .inline-diff[data-expand-key]");
@@ -14121,19 +14585,11 @@
         updateTodoProgress(allMessages);
       }
 
-      // Smart scroll: only auto-scroll if user is near bottom
-      // column-reverse: scrollTop near 0 = visual bottom (newest messages)
-      function smartScrollToBottom(container) {
-        if (!state.chatAutoFollow) {
-          updateChatJumpToBottomButton();
-          return;
-        }
-        var chatMsgs = (container && container.classList && container.classList.contains("chat-messages"))
-          ? container
-          : getChatScrollElement();
-        if (!chatMsgs || !chatMsgs.isConnected) return;
-        scrollChatToBottom(false);
-      }
+      // 注：旧版的 smartScrollToBottom / chatAutoFollow / chat-follow-toggle 都已经
+      // 拆掉，改成 Telegram 风格：贴底状态完全由用户的滚动行为驱动，未读靠
+      // chat-unread-bubble 气泡提示，不再主动滚动用户的视图。
+      // 相关入口：scrollChatToBottom（用户点气泡时强制贴底）、
+      // refreshChatUnreadDivider（分割线渲染）、updateChatUnreadBubble（气泡 UI）。
 
       // --- Todo progress bar ---
       var todoExpanded = false;
@@ -14220,11 +14676,12 @@
         var task = document.getElementById("todo-progress-task");
         if (task) task.textContent = activeTask;
 
-        // Drive the circular progress ring with the honest "completed / total" fraction
-        // (counter text shows the 1-indexed current step, ring shows actual done ratio).
+        // Keep the ring aligned with the counter text: both reflect the 1-indexed
+        // "current step" (completed + 1, capped at total). Otherwise the ring lags
+        // one step behind whenever a task is in_progress (e.g. text "6/6" but ring 5/6).
         var ring = document.getElementById("todo-progress-ring");
         if (ring) {
-          var ratio = todos.length > 0 ? completed / todos.length : 0;
+          var ratio = todos.length > 0 ? currentStep / todos.length : 0;
           ring.style.setProperty("--progress", ratio.toFixed(3));
         }