claude-opencode-viewer 2.6.38 → 2.6.40

package/index-pc.html

@@ -1007,6 +1007,7 @@
 
   <div id="copy-toast">已复制</div>
   <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0.18.0/lib/addon-webgl.min.js"></script>
   <script>
     (function() {
       var isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
@@ -1036,6 +1037,17 @@
 
       term.open(document.getElementById('terminal'));
 
+      // WebGL 渲染器：GPU 加速绘制
+      if (window.WebglAddon) {
+        try {
+          var webglAddon = new WebglAddon.WebglAddon();
+          webglAddon.onContextLoss(function() {
+            webglAddon.dispose();
+          });
+          term.loadAddon(webglAddon);
+        } catch(e) {}
+      }
+
       // PC端复制：用 xterm.js selection API 获取纯文本，避免复制出乱码
       document.getElementById('terminal').addEventListener('copy', function(e) {
         var sel = term.getSelection();
@@ -1585,7 +1597,8 @@
 
         ws.onclose = function() {
           ws = null;
-          term.reset(); // 清除终端状态，避免 buffer 回放叠加导致状态混乱
+          term.reset();
+          term.write('\r\n  \x1b[33m连接断开，正在重连...\x1b[0m\r\n');
           setTimeout(connect, 2000);
         };
 
@@ -1593,7 +1606,7 @@
           try {
             var msg = JSON.parse(e.data);
             if (msg.type === 'data') {
-              if (!isCreatingNewSession) {
+              if (!isCreatingNewSession && !isTransitioning) {
                 throttledWrite(msg.data);
               }
             }
@@ -1604,14 +1617,19 @@
               }
             }
             else if (msg.type === 'mode') {
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+              writeBuffer = '';
+              term.reset();
               endTransition(msg.mode);
-              // 模式切换完成后，重新绑定触摸事件
+              if (msg.buffer) {
+                term.write(msg.buffer);
+              }
               rebindTouchScroll();
             }
             else if (msg.type === 'switching') {
-              // 服务端开始切换，完全重置终端（清除残留输出和状态）
-              term.reset();
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
+              term.clear();
             }
             else if (msg.type === 'state') {
               if (msg.mode) {
@@ -1626,19 +1644,28 @@
               }
             }
             else if (msg.type === 'restored') {
-              // 会话恢复成功，重置终端清除残留ANSI状态
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+              writeBuffer = '';
               term.reset();
+              if (msg.buffer) {
+                term.write(msg.buffer);
+              }
             }
             else if (msg.type === 'restore-error') {
-              // 恢复失败
               term.write('恢复失败: ' + msg.error + '\r\n');
             }
             else if (msg.type === 'started') {
               rebindTouchScroll();
+              preloadData();
             }
             else if (msg.type === 'new-session-ok') {
-              isCreatingNewSession = false;
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+              writeBuffer = '';
               term.reset();
+              if (msg.buffer) {
+                term.write(msg.buffer);
+              }
+              isCreatingNewSession = false;
             }
             else if (msg.type === 'new-session-error') {
               isCreatingNewSession = false;
@@ -1664,11 +1691,14 @@
         });
       }
 
-      // 页面卸载前保存输入缓存
+      // 页面卸载前保存输入缓存，并通知服务端退出
       window.addEventListener('beforeunload', function() {
         if (currentInputBuffer) {
           saveInputCache();
         }
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'quit' }));
+        }
       });
 
       // 页面可见性变化时保存缓存
@@ -2183,6 +2213,16 @@
       var diffChanges = [];
       var diffSelectedFile = null;
 
+      // 预加载缓存
+      var cachedGitStatus = null;
+      var cachedDocs = null;
+      var gitStatusLoading = false;
+      var docsLoading = false;
+
+      function preloadData() {
+        // 预加载已移除，改为按需查询：首次打开面板时查询并缓存，刷新按钮才重新查
+      }
+
       var STATUS_COLORS = {
         'M': '#e2c08d', 'A': '#73c991', 'D': '#f14c4c',
         'R': '#73c991', 'C': '#73c991', 'U': '#e2c08d',
@@ -2194,27 +2234,42 @@
         var bar = document.getElementById('git-diff-bar');
         if (diffBarVisible) {
           bar.classList.add('visible');
-          loadGitStatus();
+          loadGitStatus(false);
         } else {
           bar.classList.remove('visible');
           diffSelectedFile = null;
         }
       }
 
-      function loadGitStatus() {
+      function loadGitStatus(forceRefresh) {
         var fileList = document.getElementById('git-diff-file-list');
-        fileList.innerHTML = '<div class="git-diff-loading">加载中...</div>';
-        document.getElementById('git-diff-count').textContent = '0';
+
+        if (cachedGitStatus && !forceRefresh) {
+          diffChanges = cachedGitStatus.changes || [];
+          document.getElementById('git-diff-count').textContent = diffChanges.length;
+          renderDiffFileList();
+          return;
+        }
+
+        fileList.innerHTML = '<div class="git-diff-loading">' + (forceRefresh ? '正在刷新...' : '正在查询 git status...') + '</div>';
+        document.getElementById('git-diff-count').textContent = '...';
+
+        if (gitStatusLoading && !forceRefresh) return;
+        gitStatusLoading = true;
+        if (forceRefresh) cachedGitStatus = null;
 
         fetch(basePath + '/api/git-status')
           .then(function(r) { return r.json(); })
           .then(function(data) {
+            cachedGitStatus = data;
+            gitStatusLoading = false;
             diffChanges = data.changes || [];
             document.getElementById('git-diff-count').textContent = diffChanges.length;
-            renderDiffFileList();
+            if (diffBarVisible) renderDiffFileList();
           })
           .catch(function() {
-            fileList.innerHTML = '<div class="git-diff-error">无法加载 git status</div>';
+            gitStatusLoading = false;
+            if (diffBarVisible) fileList.innerHTML = '<div class="git-diff-error">无法加载 git status</div>';
           });
       }
 
@@ -2343,7 +2398,7 @@
       document.getElementById('close-diff').addEventListener('click', toggleDiffBar);
       document.getElementById('refresh-diff').addEventListener('click', function(e) {
         e.stopPropagation();
-        loadGitStatus();
+        loadGitStatus(true);
         // 重置 diff 内容区
         diffSelectedFile = null;
         document.getElementById('git-diff-content-area').innerHTML =
@@ -2365,49 +2420,67 @@
         var bar = document.getElementById('docs-bar');
         if (docsBarVisible) {
           bar.classList.add('visible');
-          loadDocs();
+          loadDocs(false);
         } else {
           bar.classList.remove('visible');
           docsSelectedFile = null;
         }
       }
 
-      function loadDocs() {
+      function renderDocsList(data) {
+        var fileList = document.getElementById('docs-file-list');
+        var docs = data.docs || [];
+        document.getElementById('docs-count').textContent = docs.length;
+        if (!docs.length) {
+          fileList.innerHTML = '<div class="docs-loading" style="color:#666;">无文档</div>';
+          return;
+        }
+        var html = '<div style="padding:4px 12px;font-size:11px;color:#666;border-bottom:1px solid #2a2a2a;">📁 ' + escapeHtml(data.cwd || 'PROJECT_DIR') + '</div>';
+        docs.forEach(function(doc) {
+          var activeClass = docsSelectedFile === doc.name ? ' active' : '';
+          var time = new Date(doc.mtime).toLocaleString('zh-CN', { month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' });
+          html += '<div class="docs-file-item' + activeClass + '" data-file="' + escapeHtml(doc.name) + '">';
+          html += '<span class="docs-file-name">' + escapeHtml(doc.name) + '</span>';
+          html += '<span class="docs-file-time">' + time + '</span>';
+          html += '</div>';
+        });
+        fileList.innerHTML = html;
+        fileList.querySelectorAll('.docs-file-item').forEach(function(item) {
+          item.addEventListener('click', function() {
+            var file = this.getAttribute('data-file');
+            docsSelectedFile = file;
+            fileList.querySelectorAll('.docs-file-item').forEach(function(el) { el.classList.remove('active'); });
+            this.classList.add('active');
+            loadDocContent(file);
+          });
+        });
+      }
+
+      function loadDocs(forceRefresh) {
         var fileList = document.getElementById('docs-file-list');
-        fileList.innerHTML = '<div class="docs-loading">加载中...</div>';
-        document.getElementById('docs-count').textContent = '0';
+
+        if (cachedDocs && !forceRefresh) {
+          renderDocsList(cachedDocs);
+          return;
+        }
+
+        fileList.innerHTML = '<div class="docs-loading">' + (forceRefresh ? '正在刷新...' : '正在查询文档...') + '</div>';
+        document.getElementById('docs-count').textContent = '...';
+
+        if (docsLoading && !forceRefresh) return;
+        docsLoading = true;
+        if (forceRefresh) cachedDocs = null;
 
         fetch(basePath + '/api/docs')
           .then(function(r) { return r.json(); })
           .then(function(data) {
-            var docs = data.docs || [];
-            document.getElementById('docs-count').textContent = docs.length;
-            if (!docs.length) {
-              fileList.innerHTML = '<div class="docs-loading" style="color:#666;">无文档</div>';
-              return;
-            }
-            var html = '<div style="padding:4px 12px;font-size:11px;color:#666;border-bottom:1px solid #2a2a2a;">📁 ' + escapeHtml(data.cwd || 'PROJECT_DIR') + '</div>';
-            docs.forEach(function(doc) {
-              var activeClass = docsSelectedFile === doc.name ? ' active' : '';
-              var time = new Date(doc.mtime).toLocaleString('zh-CN', { month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' });
-              html += '<div class="docs-file-item' + activeClass + '" data-file="' + escapeHtml(doc.name) + '">';
-              html += '<span class="docs-file-name">' + escapeHtml(doc.name) + '</span>';
-              html += '<span class="docs-file-time">' + time + '</span>';
-              html += '</div>';
-            });
-            fileList.innerHTML = html;
-            fileList.querySelectorAll('.docs-file-item').forEach(function(item) {
-              item.addEventListener('click', function() {
-                var file = this.getAttribute('data-file');
-                docsSelectedFile = file;
-                fileList.querySelectorAll('.docs-file-item').forEach(function(el) { el.classList.remove('active'); });
-                this.classList.add('active');
-                loadDocContent(file);
-              });
-            });
+            cachedDocs = data;
+            docsLoading = false;
+            if (docsBarVisible) renderDocsList(data);
           })
           .catch(function() {
-            fileList.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">加载失败</div>';
+            docsLoading = false;
+            if (docsBarVisible) fileList.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">加载失败</div>';
           });
       }
 
@@ -2432,7 +2505,7 @@
       document.getElementById('close-docs').addEventListener('click', toggleDocsBar);
       document.getElementById('refresh-docs').addEventListener('click', function(e) {
         e.stopPropagation();
-        loadDocs();
+        loadDocs(true);
         docsSelectedFile = null;
         document.getElementById('docs-content-area').innerHTML =
           '<div class="docs-placeholder">' +

package/index.html

@@ -357,7 +357,20 @@
       display: flex;
       flex-direction: column;
       background: #0a0a0a;
+      position: relative;
+    }
+    #loading-overlay {
+      position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: #0a0a0a;
+      color: #888;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+      z-index: 9999;
     }
+    #loading-overlay.hidden { display: none; }
 
     #terminal {
       flex: 1;
@@ -489,6 +502,18 @@
       -webkit-user-select: text;
       user-select: text;
     }
+    .msg-text pre {
+      background: #0d0d0d;
+      border: 1px solid #333;
+      border-radius: 4px;
+      padding: 8px;
+      overflow-x: auto;
+      font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+      font-size: 12px;
+      line-height: 1.4;
+      white-space: pre;
+      -webkit-overflow-scrolling: touch;
+    }
     .msg-tool {
       margin-top: 6px;
       padding: 6px 8px;
@@ -832,6 +857,7 @@
 </head>
 <body>
   <!-- 参考 cc-viewer 的 App.jsx 行 1315-1607: 完整的移动端布局结构 -->
+  <div id="loading-overlay">正在初始化...</div>
   <div id="layout">
     <div id="header">
       <div style="display: flex; gap: 4px; align-items: center; overflow-x: auto; flex: 1; min-width: 0;">
@@ -1044,6 +1070,7 @@
 
   <div id="copy-toast">已复制</div>
   <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0.18.0/lib/addon-webgl.min.js"></script>
   <script>
     (function() {
       var isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
@@ -1052,6 +1079,7 @@
       var fontSize = isMobile ? 11 : 13;
       var currentMode = 'claude';
       var isTransitioning = false;
+      var mobileInitSent = false;
 
       var term = new Terminal({
         cursorBlink: !isMobile,
@@ -1071,6 +1099,19 @@
 
       term.open(document.getElementById('terminal'));
 
+      // WebGL 渲染器：GPU 加速绘制，非 iOS 设备启用（iOS WebGL 性能差）
+      if (!isIOS && window.WebglAddon) {
+        try {
+          var webglAddon = new WebglAddon.WebglAddon();
+          webglAddon.onContextLoss(function() {
+            webglAddon.dispose();
+          });
+          term.loadAddon(webglAddon);
+        } catch(e) {
+          // WebGL 不可用时回退到 Canvas 渲染
+        }
+      }
+
       // PC端复制：用 xterm.js selection API 获取纯文本，避免复制出乱码
       document.getElementById('terminal').addEventListener('copy', function(e) {
         var sel = term.getSelection();
@@ -1132,6 +1173,8 @@
       // 会话历史相关
       var sessions = [];
       var currentSessionId = null;
+      var claudeSessionId = null;
+      var claudeProject = null;
       var currentSessionData = null;
       var historyBarVisible = false;
 
@@ -1258,15 +1301,10 @@
         }
       }
 
-      function stopMomentum() {
-        if (momentumRaf) { cancelAnimationFrame(momentumRaf); momentumRaf = null; }
-        if (scrollRaf) { cancelAnimationFrame(scrollRaf); scrollRaf = null; }
-        pendingDy = 0;
-        pixelAccum = 0;
-      }
-
-      // 触摸滚动实现 - 混合模式：alternate buffer 发鼠标滚轮，normal buffer 用 scrollLines
-      var SCROLL_SENSITIVITY = 0.7; // 滚动灵敏度，越小每次滑动行数越少
+      // 触摸滚动实现
+      // Claude 模式：与 cc-viewer 一致，直接 scrollLines，1:1 像素映射，无 WheelEvent
+      // OpenCode 模式：alternate buffer 发 WheelEvent（vim/less 等需要），灵敏度 0.7
+      var SCROLL_SENSITIVITY = 0.7;
       var touchScreen = null;
       var touchEventsBound = false;
 
@@ -1300,6 +1338,12 @@
 
       function doScroll(lines) {
         if (lines === 0) return;
+        // Claude 模式：始终直接 scrollLines（与 cc-viewer 一致）
+        if (currentMode === 'claude') {
+          term.scrollLines(lines);
+          return;
+        }
+        // OpenCode 模式：alternate buffer 发 WheelEvent，normal buffer 用 scrollLines
         if (isAlternateBuffer()) {
           altScrollAccum += lines;
           if (Math.abs(altScrollAccum) >= ALT_SCROLL_THRESHOLD) {
@@ -1335,7 +1379,8 @@
         scrollRaf = null;
         if (pendingDy === 0) return;
 
-        pixelAccum += pendingDy * SCROLL_SENSITIVITY;
+        // Claude 模式 1:1 像素映射（cc-viewer 同款），OpenCode 降低灵敏度
+        pixelAccum += pendingDy * (currentMode === 'claude' ? 1 : SCROLL_SENSITIVITY);
         pendingDy = 0;
 
         var lh = getLineHeight();
@@ -1372,22 +1417,19 @@
         }
 
         pendingDy += dy;
-        console.log('[scroll] touchmove dy:', dy, 'pendingDy:', pendingDy);
-
         if (!scrollRaf) scrollRaf = requestAnimationFrame(flushScroll);
         lastY = y;
         lastTime = now;
       }
 
       function handleTouchEnd() {
-
         if (scrollRaf) {
           cancelAnimationFrame(scrollRaf);
           scrollRaf = null;
         }
 
         if (pendingDy !== 0) {
-          pixelAccum += pendingDy * SCROLL_SENSITIVITY;
+          pixelAccum += pendingDy * (currentMode === 'claude' ? 1 : SCROLL_SENSITIVITY);
           pendingDy = 0;
           var lh = getLineHeight();
           var lines = Math.trunc(pixelAccum / lh);
@@ -1412,9 +1454,8 @@
         }
         velocitySamples = [];
 
-        velocity *= SCROLL_SENSITIVITY;
-        console.log('[scroll] velocity:', velocity);
-        if (Math.abs(velocity) < 0.3) return;
+        velocity *= (currentMode === 'claude' ? 1 : SCROLL_SENSITIVITY);
+        if (Math.abs(velocity) < 0.5) return;
 
         var friction = 0.95;
         var mAccum = 0;
@@ -1443,7 +1484,6 @@
 
       function unbindTouchScroll() {
         if (touchScreen && touchEventsBound) {
-          console.log('[scroll] unbinding touch events');
           touchScreen.removeEventListener('touchstart', handleTouchStart);
           touchScreen.removeEventListener('touchmove', handleTouchMove);
           touchScreen.removeEventListener('touchend', handleTouchEnd);
@@ -1553,15 +1593,24 @@
 
         ws.onclose = function() {
           ws = null;
-          term.reset(); // 清除终端状态，避免 buffer 回放叠加导致状态混乱
+          term.reset();
+          term.write('\r\n  \x1b[33m连接断开，正在重连...\x1b[0m\r\n');
           setTimeout(connect, 2000);
         };
 
+        var loadingOverlay = document.getElementById('loading-overlay');
+        function hideLoading() {
+          if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {
+            loadingOverlay.classList.add('hidden');
+          }
+        }
+
         ws.onmessage = function(e) {
           try {
             var msg = JSON.parse(e.data);
             if (msg.type === 'data') {
-              if (!isCreatingNewSession) {
+              hideLoading();
+              if (!isCreatingNewSession && !isTransitioning) {
                 throttledWrite(msg.data);
               }
             }
@@ -1571,15 +1620,45 @@
                 throttledWrite('按 Enter 键重新启动 ' + currentMode + '...\r\n');
               }
             }
+            else if (msg.type === 'state') {
+              // 服务端还没启动进程时，查最近会话并自动恢复
+              if (!msg.running && !mobileInitSent) {
+                mobileInitSent = true;
+                fetch('/api/last-sessions')
+                  .then(function(r) { return r.json(); })
+                  .then(function(data) {
+                    var oc = data.opencode;
+                    var cl = data.claude;
+                    // 取 mtime 最新的那个
+                    var useOc = oc && (!cl || oc.mtime > cl.mtime);
+                    var mode = useOc ? 'opencode' : 'claude';
+                    var sessionId = useOc ? (oc && oc.id) : (cl && cl.id);
+                    if (cl) {
+                      claudeSessionId = cl.id;
+                      claudeProject = cl.project;
+                    }
+                    currentMode = mode;
+                    ws.send(JSON.stringify({ type: 'init', mode: mode, sessionId: sessionId || null }));
+                  })
+                  .catch(function() {
+                    ws.send(JSON.stringify({ type: 'init', mode: 'claude' }));
+                  });
+              }
+            }
             else if (msg.type === 'mode') {
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+              writeBuffer = '';
+              term.reset();
               endTransition(msg.mode);
-              // 模式切换完成后，重新绑定触摸事件
+              if (msg.buffer) {
+                term.write(msg.buffer);
+              }
               rebindTouchScroll();
             }
             else if (msg.type === 'switching') {
-              // 服务端开始切换，完全重置终端（清除残留输出和状态）
-              term.reset();
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
+              term.clear();
             }
             else if (msg.type === 'state') {
               if (msg.mode) {
@@ -1589,22 +1668,37 @@
               }
             }
             else if (msg.type === 'restored') {
-              // 会话恢复成功，重置终端清除残留ANSI状态
+              // 会话恢复成功，清除所有残留
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+              writeBuffer = '';
               term.reset();
+              if (msg.buffer) {
+                term.write(msg.buffer);
+              }
+              isTransitioning = false;
             }
             else if (msg.type === 'restore-error') {
-              // 恢复失败
+              isTransitioning = false;
               term.write('恢复失败: ' + msg.error + '\r\n');
             }
             else if (msg.type === 'started') {
+              hideLoading();
               rebindTouchScroll();
+              preloadData();
             }
             else if (msg.type === 'new-session-ok') {
-              isCreatingNewSession = false;
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+              writeBuffer = '';
               term.reset();
+              if (msg.buffer) {
+                term.write(msg.buffer);
+              }
+              isCreatingNewSession = false;
+              isTransitioning = false;
             }
             else if (msg.type === 'new-session-error') {
               isCreatingNewSession = false;
+              isTransitioning = false;
               term.write('新会话启动失败: ' + msg.error + '\r\n');
             }
           } catch(err) {}
@@ -1923,11 +2017,15 @@
         // 关闭历史栏
         toggleHistoryBar();
 
-        // 重置终端（清除残留ANSI解析状态）
+        // 阻止旧数据写入
+        isTransitioning = true;
+        if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+        writeBuffer = '';
         term.reset();
 
         if (ws && ws.readyState === 1) {
           if (currentMode !== 'opencode') {
+            isTransitioning = false;
             term.write('错误: 请先切换到 OpenCode 模式\r\n');
             return;
           }
@@ -2022,7 +2120,7 @@
               item.appendChild(deleteBtn);
 
               item.addEventListener('click', function() {
-                restoreClaudeSession(s.id);
+                restoreClaudeSession(s.id, s.project);
               });
 
               sessionList.appendChild(item);
@@ -2113,12 +2211,18 @@
           });
       }
 
-      function restoreClaudeSession(sessionId) {
+      function restoreClaudeSession(sessionId, project) {
         console.log('[restore] 恢复 Claude 会话:', sessionId);
+        claudeSessionId = sessionId;
+        if (project) claudeProject = project;
         toggleHistoryBar();
+        isTransitioning = true;
+        if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+        writeBuffer = '';
         term.reset();
         if (ws && ws.readyState === 1) {
           if (currentMode !== 'claude') {
+            isTransitioning = false;
             term.write('错误: 请先切换到 Claude 模式\r\n');
             return;
           }
@@ -2140,9 +2244,12 @@
       // 新会话按钮
       var isCreatingNewSession = false;
       document.getElementById('new-session-btn').addEventListener('click', function() {
-        if (!ws || ws.readyState !== 1) return;
+        if (!ws || ws.readyState !== 1 || isTransitioning) return;
         isCreatingNewSession = true;
-        term.clear();
+        isTransitioning = true;
+        if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+        writeBuffer = '';
+        term.reset();
         ws.send(JSON.stringify({ type: 'new-session' }));
       });
 
@@ -2227,23 +2334,81 @@
         msgViewerContent.innerHTML = '<div class="msg-empty">加载中...</div>';
         unbindTouchScroll();
 
-        // 获取当前会话 ID
-        fetch(basePath + '/api/current-session')
-          .then(function(r) { return r.json(); })
-          .then(function(data) {
-            if (!data.sessionId) {
-              msgViewerContent.innerHTML = '<div class="msg-empty">暂无活跃会话</div>';
-              return;
-            }
-            return fetch(basePath + '/api/session/' + data.sessionId)
+        if (currentMode === 'claude') {
+          // Claude 模式：从 JSONL 文件读取消息
+          var loadClaudeMessages = function(sid, proj) {
+            fetch(basePath + '/api/claude-session-messages?id=' + encodeURIComponent(sid) + '&project=' + encodeURIComponent(proj))
               .then(function(r) { return r.json(); })
-              .then(function(messages) {
+              .then(function(data) {
+                if (data.error) {
+                  msgViewerContent.innerHTML = '<div class="msg-empty">' + escapeHtml(data.error) + '</div>';
+                  return;
+                }
+                var messages = data.messages || [];
                 renderMessages(messages);
+              })
+              .catch(function(e) {
+                msgViewerContent.innerHTML = '<div class="msg-empty">加载失败: ' + e.message + '</div>';
               });
-          })
-          .catch(function(e) {
-            msgViewerContent.innerHTML = '<div class="msg-empty">加载失败: ' + e.message + '</div>';
-          });
+          };
+          if (claudeSessionId && claudeProject) {
+            loadClaudeMessages(claudeSessionId, claudeProject);
+          } else {
+            // 尚未获取到 session 信息，先查
+            fetch(basePath + '/api/last-sessions')
+              .then(function(r) { return r.json(); })
+              .then(function(data) {
+                var cl = data.claude;
+                if (cl && cl.id && cl.project) {
+                  claudeSessionId = cl.id;
+                  claudeProject = cl.project;
+                  loadClaudeMessages(cl.id, cl.project);
+                } else {
+                  msgViewerContent.innerHTML = '<div class="msg-empty">暂无活跃会话</div>';
+                }
+              })
+              .catch(function(e) {
+                msgViewerContent.innerHTML = '<div class="msg-empty">加载失败: ' + e.message + '</div>';
+              });
+          }
+        } else {
+          // OpenCode 模式：从 SQLite 读取消息
+          fetch(basePath + '/api/current-session')
+            .then(function(r) { return r.json(); })
+            .then(function(data) {
+              if (!data.sessionId) {
+                msgViewerContent.innerHTML = '<div class="msg-empty">暂无活跃会话</div>';
+                return;
+              }
+              return fetch(basePath + '/api/session/' + data.sessionId)
+                .then(function(r) { return r.json(); })
+                .then(function(messages) {
+                  renderMessages(messages);
+                });
+            })
+            .catch(function(e) {
+              msgViewerContent.innerHTML = '<div class="msg-empty">加载失败: ' + e.message + '</div>';
+            });
+        }
+      }
+
+      function formatMsgText(text) {
+        // 将 markdown 代码块转为 <pre>，其余部分转义
+        var parts = text.split(/(```[\s\S]*?```)/g);
+        var result = '';
+        for (var i = 0; i < parts.length; i++) {
+          var p = parts[i];
+          if (p.startsWith('```') && p.endsWith('```')) {
+            // 去掉首尾 ```（可能带语言标记）
+            var inner = p.slice(3, -3);
+            var nlIdx = inner.indexOf('\n');
+            if (nlIdx !== -1) inner = inner.slice(nlIdx + 1);
+            result += '<pre>' + escapeHtml(inner) + '</pre>';
+          } else {
+            result += escapeHtml(p);
+          }
+        }
+        return result;
       }
 
       function renderMessages(messages) {
@@ -2259,7 +2424,7 @@
           html += '<div class="msg-item ' + cls + '">';
           html += '<div class="msg-role">' + roleLabel + '</div>';
           if (msg.text) {
-            html += '<div class="msg-text">' + escapeHtml(msg.text) + '</div>';
+            html += '<div class="msg-text">' + formatMsgText(msg.text) + '</div>';
           }
           if (msg.toolCalls && msg.toolCalls.length > 0) {
             msg.toolCalls.forEach(function(tc) {
@@ -2269,6 +2434,7 @@
           html += '</div>';
         });
         msgViewerContent.innerHTML = html;
+        msgViewerContent.scrollTop = msgViewerContent.scrollHeight;
       }
 
       function escapeHtml(str) {
@@ -2302,6 +2468,16 @@
       var diffChanges = [];
       var diffSelectedFile = null;
 
+      // 预加载缓存
+      var cachedGitStatus = null;
+      var cachedDocs = null;
+      var gitStatusLoading = false;
+      var docsLoading = false;
+
+      function preloadData() {
+        // 预加载已移除，改为按需查询：首次打开面板时查询并缓存，刷新按钮才重新查
+      }
+
       var STATUS_COLORS = {
         'M': '#e2c08d', 'A': '#73c991', 'D': '#f14c4c',
         'R': '#73c991', 'C': '#73c991', 'U': '#e2c08d',
@@ -2313,27 +2489,44 @@
         var bar = document.getElementById('git-diff-bar');
         if (diffBarVisible) {
           bar.classList.add('visible');
-          loadGitStatus();
+          loadGitStatus(false);
         } else {
           bar.classList.remove('visible');
           diffSelectedFile = null;
         }
       }
 
-      function loadGitStatus() {
+      function loadGitStatus(forceRefresh) {
         var fileList = document.getElementById('git-diff-file-list');
-        fileList.innerHTML = '<div class="git-diff-loading">加载中...</div>';
-        document.getElementById('git-diff-count').textContent = '0';
+
+        // 有缓存且非强制刷新，直接用缓存
+        if (cachedGitStatus && !forceRefresh) {
+          diffChanges = cachedGitStatus.changes || [];
+          document.getElementById('git-diff-count').textContent = diffChanges.length;
+          renderDiffFileList();
+          return;
+        }
+
+        // 正在加载中或需要发起请求
+        fileList.innerHTML = '<div class="git-diff-loading">' + (forceRefresh ? '正在刷新...' : '正在查询 git status...') + '</div>';
+        document.getElementById('git-diff-count').textContent = '...';
+
+        if (gitStatusLoading && !forceRefresh) return; // 预加载进行中，等它完成
+        gitStatusLoading = true;
+        if (forceRefresh) cachedGitStatus = null;
 
         fetch(basePath + '/api/git-status')
           .then(function(r) { return r.json(); })
           .then(function(data) {
+            cachedGitStatus = data;
+            gitStatusLoading = false;
             diffChanges = data.changes || [];
             document.getElementById('git-diff-count').textContent = diffChanges.length;
-            renderDiffFileList();
+            if (diffBarVisible) renderDiffFileList();
           })
           .catch(function() {
-            fileList.innerHTML = '<div class="git-diff-error">无法加载 git status</div>';
+            gitStatusLoading = false;
+            if (diffBarVisible) fileList.innerHTML = '<div class="git-diff-error">无法加载 git status</div>';
           });
       }
 
@@ -2462,7 +2655,7 @@
       document.getElementById('close-diff').addEventListener('click', toggleDiffBar);
       document.getElementById('refresh-diff').addEventListener('click', function(e) {
         e.stopPropagation();
-        loadGitStatus();
+        loadGitStatus(true);
         // 重置 diff 内容区
         diffSelectedFile = null;
         document.getElementById('git-diff-content-area').innerHTML =
@@ -2484,49 +2677,68 @@
         var bar = document.getElementById('docs-bar');
         if (docsBarVisible) {
           bar.classList.add('visible');
-          loadDocs();
+          loadDocs(false);
         } else {
           bar.classList.remove('visible');
           docsSelectedFile = null;
         }
       }
 
-      function loadDocs() {
+      function renderDocsList(data) {
         var fileList = document.getElementById('docs-file-list');
-        fileList.innerHTML = '<div class="docs-loading">加载中...</div>';
-        document.getElementById('docs-count').textContent = '0';
+        var docs = data.docs || [];
+        document.getElementById('docs-count').textContent = docs.length;
+        if (!docs.length) {
+          fileList.innerHTML = '<div class="docs-loading" style="color:#666;">无文档</div>';
+          return;
+        }
+        var html = '<div style="padding:4px 12px;font-size:11px;color:#666;border-bottom:1px solid #2a2a2a;">📁 ' + escapeHtml(data.cwd || 'PROJECT_DIR') + '</div>';
+        docs.forEach(function(doc) {
+          var activeClass = docsSelectedFile === doc.name ? ' active' : '';
+          var time = new Date(doc.mtime).toLocaleString('zh-CN', { month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' });
+          html += '<div class="docs-file-item' + activeClass + '" data-file="' + escapeHtml(doc.name) + '">';
+          html += '<span class="docs-file-name">' + escapeHtml(doc.name) + '</span>';
+          html += '<span class="docs-file-time">' + time + '</span>';
+          html += '</div>';
+        });
+        fileList.innerHTML = html;
+        fileList.querySelectorAll('.docs-file-item').forEach(function(item) {
+          item.addEventListener('click', function() {
+            var file = this.getAttribute('data-file');
+            docsSelectedFile = file;
+            fileList.querySelectorAll('.docs-file-item').forEach(function(el) { el.classList.remove('active'); });
+            this.classList.add('active');
+            loadDocContent(file);
+          });
+        });
+      }
+
+      function loadDocs(forceRefresh) {
+        var fileList = document.getElementById('docs-file-list');
+
+        // 有缓存且非强制刷新，直接用缓存
+        if (cachedDocs && !forceRefresh) {
+          renderDocsList(cachedDocs);
+          return;
+        }
+
+        fileList.innerHTML = '<div class="docs-loading">' + (forceRefresh ? '正在刷新...' : '正在查询文档...') + '</div>';
+        document.getElementById('docs-count').textContent = '...';
+
+        if (docsLoading && !forceRefresh) return;
+        docsLoading = true;
+        if (forceRefresh) cachedDocs = null;
 
         fetch(basePath + '/api/docs')
           .then(function(r) { return r.json(); })
           .then(function(data) {
-            var docs = data.docs || [];
-            document.getElementById('docs-count').textContent = docs.length;
-            if (!docs.length) {
-              fileList.innerHTML = '<div class="docs-loading" style="color:#666;">无文档</div>';
-              return;
-            }
-            var html = '<div style="padding:4px 12px;font-size:11px;color:#666;border-bottom:1px solid #2a2a2a;">📁 ' + escapeHtml(data.cwd || 'PROJECT_DIR') + '</div>';
-            docs.forEach(function(doc) {
-              var activeClass = docsSelectedFile === doc.name ? ' active' : '';
-              var time = new Date(doc.mtime).toLocaleString('zh-CN', { month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' });
-              html += '<div class="docs-file-item' + activeClass + '" data-file="' + escapeHtml(doc.name) + '">';
-              html += '<span class="docs-file-name">' + escapeHtml(doc.name) + '</span>';
-              html += '<span class="docs-file-time">' + time + '</span>';
-              html += '</div>';
-            });
-            fileList.innerHTML = html;
-            fileList.querySelectorAll('.docs-file-item').forEach(function(item) {
-              item.addEventListener('click', function() {
-                var file = this.getAttribute('data-file');
-                docsSelectedFile = file;
-                fileList.querySelectorAll('.docs-file-item').forEach(function(el) { el.classList.remove('active'); });
-                this.classList.add('active');
-                loadDocContent(file);
-              });
-            });
+            cachedDocs = data;
+            docsLoading = false;
+            if (docsBarVisible) renderDocsList(data);
           })
           .catch(function() {
-            fileList.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">加载失败</div>';
+            docsLoading = false;
+            if (docsBarVisible) fileList.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">加载失败</div>';
           });
       }
 
@@ -2551,7 +2763,7 @@
       document.getElementById('close-docs').addEventListener('click', toggleDocsBar);
       document.getElementById('refresh-docs').addEventListener('click', function(e) {
         e.stopPropagation();
-        loadDocs();
+        loadDocs(true);
         docsSelectedFile = null;
         document.getElementById('docs-content-area').innerHTML =
           '<div class="docs-placeholder">' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-opencode-viewer",
-  "version": "2.6.38",
+  "version": "2.6.40",
   "description": "A unified terminal viewer for Claude Code and OpenCode with seamless switching",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -404,7 +404,7 @@ async function switchMode(newMode) {
   } catch (e) {
     LOG('[switchMode] 启动新进程失败:', e.message);
   }
-  isSwitching = false;
+  // 注意：isSwitching 由调用方在回放 buffer 后设为 false
 }
 
 function writeToPty(data) {
@@ -1042,28 +1042,7 @@ const requestHandler = async (req, res) => {
 const httpsOpts = USE_HTTPS ? await getOrCreateCert() : null;
 let server, wss;
 
-// 无客户端连接后自动退出，防止进程堆积
-// 首次启动等 3 分钟（给用户时间打开浏览器），连接过之后断开等 30 秒
-let noClientTimer = null;
 let hasEverConnected = false;
-function startNoClientTimer() {
-  if (noClientTimer) return;
-  if (wss && wss.clients.size > 0) return;
-  const timeout = hasEverConnected ? 10000 : 180000;
-  noClientTimer = setTimeout(() => {
-    if (!wss || wss.clients.size === 0) {
-      LOG(`[auto-exit] ${timeout / 1000}秒无客户端连接，自动退出`);
-      cleanupAndExit();
-    }
-    noClientTimer = null;
-  }, timeout);
-}
-function cancelNoClientTimer() {
-  if (noClientTimer) {
-    clearTimeout(noClientTimer);
-    noClientTimer = null;
-  }
-}
 
 function createServerAndWss() {
   server = USE_HTTPS
@@ -1087,7 +1066,6 @@ function setupWss(wssInst) {
 wssInst.on('connection', (ws, req) => {
   LOG('[WS] 客户端连接 from', req.socket.remoteAddress);
   hasEverConnected = true;
-  cancelNoClientTimer();
   ws.isAlive = true;
   ws.on('pong', () => { ws.isAlive = true; });
 
@@ -1178,16 +1156,14 @@ wssInst.on('connection', (ws, req) => {
         }
       } else if (msg.type === 'switch') {
         if (msg.mode !== currentMode) {
+          isSwitching = true;
           ws.send(JSON.stringify({ type: 'switching', mode: msg.mode }));
           await switchMode(msg.mode);
-          // 切换完成后：先发 reset 清除残留，再发新进程的 buffer
-          ws.send(JSON.stringify({ type: 'data', data: '\x1bc' }));
-          ws.send(JSON.stringify({ type: 'mode', mode: currentMode }));
-          setTimeout(() => {
-            if (outputBuffer) {
-              ws.send(JSON.stringify({ type: 'data', data: outputBuffer }));
-            }
-          }, 100);
+          // 切换完成后统一回放（switchMode 期间 isSwitching=true，listener 不推数据）
+          const buf = outputBuffer;
+          outputBuffer = '';
+          ws.send(JSON.stringify({ type: 'mode', mode: currentMode, buffer: buf || undefined }));
+          isSwitching = false;
         }
       } else if (msg.type === 'restore') {
         // 恢复会话（支持 opencode 和 claude）
@@ -1223,7 +1199,9 @@ wssInst.on('connection', (ws, req) => {
           // 启动进程，传入 session ID
           try {
             await spawnProcess(currentMode, msg.sessionId);
-            ws.send(JSON.stringify({ type: 'restored', sessionId: msg.sessionId }));
+            const buf = outputBuffer;
+            outputBuffer = '';
+            ws.send(JSON.stringify({ type: 'restored', sessionId: msg.sessionId, buffer: buf || undefined }));
           } catch (e) {
             LOG('[restore] 启动进程失败:', e.message);
             ws.send(JSON.stringify({ type: 'restore-error', error: e.message }));
@@ -1280,10 +1258,11 @@ wssInst.on('connection', (ws, req) => {
         await new Promise(resolve => setTimeout(resolve, 500));
         cleanupOrphanProcesses();
 
-        // 先通知前端准备好，再启动新进程
-        ws.send(JSON.stringify({ type: 'new-session-ok', mode }));
         try {
           await spawnProcess(mode);
+          const buf = outputBuffer;
+          outputBuffer = '';
+          ws.send(JSON.stringify({ type: 'new-session-ok', mode, buffer: buf || undefined }));
         } catch (e) {
           LOG('[new-session] 启动失败:', e.message);
           ws.send(JSON.stringify({ type: 'new-session-error', error: e.message }));
@@ -1315,6 +1294,17 @@ wssInst.on('connection', (ws, req) => {
           setTimeout(() => checkNewSession(attempt + 1), 2000);
         };
         setTimeout(() => checkNewSession(0), 3000);
+      } else if (msg.type === 'quit') {
+        // PC 端关闭浏览器时发送，延迟 5 秒退出（防止刷新页面误杀）
+        LOG('[quit] 收到退出请求，5秒后检查是否仍无连接...');
+        setTimeout(() => {
+          if (!wss || wss.clients.size === 0) {
+            LOG('[quit] 无活跃连接，退出进程');
+            cleanupAndExit();
+          } else {
+            LOG('[quit] 仍有活跃连接，取消退出');
+          }
+        }, 5000);
       }
     } catch (err) {
       LOG('[WS] Error:', err.message);
@@ -1343,15 +1333,19 @@ wssInst.on('connection', (ws, req) => {
         }
       }
     }
-    // 无客户端连接时，30秒后自动退出
-    startNoClientTimer();
   });
 });
 
   // WebSocket 心跳保活，防止中间网络设备断开空闲连接
+  // 移动端跳过心跳检测：锁屏时 JS 暂停无法回 pong，但不需要断开（进程常驻）
   const HEARTBEAT_INTERVAL = 5000;
   const heartbeat = setInterval(() => {
     wssInst.clients.forEach((ws) => {
+      if (mobileClients.has(ws)) {
+        // 移动端不检测心跳，但清理已断开的僵尸连接
+        if (ws.readyState !== 1) mobileClients.delete(ws);
+        return;
+      }
       if (ws.isAlive === false) return ws.terminate();
       ws.isAlive = false;
       ws.ping();
@@ -1397,8 +1391,6 @@ function startServer() {
     // 移动端客户端连接时自动启动 claude（见 WS 连接处理）
     LOG('[startup] 等待客户端连接并选择会话...');
 
-    // 启动首次连接超时检测（3分钟无人连接则退出）
-    startNoClientTimer();
   });
 
   server.on('error', (err) => {