claude-opencode-viewer 2.6.48 → 2.6.50

package/index-pc.html

@@ -740,6 +740,39 @@
       line-height: 1.6;
       color: #d4d4d4;
     }
+    .docs-md-content {
+      font-size: 13px; line-height: 1.7; color: #d4d4d4; word-break: break-word;
+    }
+    .docs-md-content h1, .docs-md-content h2, .docs-md-content h3 {
+      margin: 16px 0 8px; color: #e0e0e0; border-bottom: 1px solid #333; padding-bottom: 4px;
+    }
+    .docs-md-content h1 { font-size: 1.4em; }
+    .docs-md-content h2 { font-size: 1.2em; }
+    .docs-md-content h3 { font-size: 1.05em; }
+    .docs-md-content p { margin: 8px 0; }
+    .docs-md-content pre {
+      background: #1a1a1a; border: 1px solid #333; border-radius: 4px;
+      padding: 10px; overflow-x: auto; margin: 8px 0; white-space: pre-wrap; word-break: break-word;
+    }
+    .docs-md-content code {
+      background: #1a1a1a; padding: 1px 4px; border-radius: 3px; font-size: 12px;
+      font-family: Menlo, Monaco, monospace;
+    }
+    .docs-md-content pre code { background: none; padding: 0; }
+    .docs-md-content ul, .docs-md-content ol { margin: 8px 0; padding-left: 20px; }
+    .docs-md-content li { margin: 4px 0; }
+    .docs-md-content blockquote {
+      border-left: 3px solid #444; margin: 8px 0; padding: 4px 12px; color: #999;
+    }
+    .docs-md-content table { border-collapse: collapse; margin: 8px 0; width: 100%; }
+    .docs-md-content th, .docs-md-content td {
+      border: 1px solid #333; padding: 6px 10px; text-align: left;
+    }
+    .docs-md-content th { background: #1a1a1a; }
+    .docs-md-content a { color: #58a6ff; text-decoration: none; }
+    .docs-md-content a:hover { text-decoration: underline; }
+    .docs-md-content img { max-width: 100%; }
+    .docs-md-content hr { border: none; border-top: 1px solid #333; margin: 12px 0; }
     .docs-placeholder {
       flex: 1;
       display: flex;
@@ -805,6 +838,13 @@
       color: #ffa198;
     }
 
+    .diff-sign {
+      display: inline-block;
+      width: 12px;
+      font-weight: bold;
+      user-select: none;
+    }
+
     .diff-line-hunk {
       background: rgba(56, 139, 253, 0.1);
     }
@@ -1071,6 +1111,8 @@
   <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 src="https://cdn.jsdelivr.net/npm/marked@15.0.7/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"></script>
   <script>
     (function() {
       var isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
@@ -1724,6 +1766,11 @@
               term.clear();
             }
             else if (msg.type === 'state') {
+              // 重连时清掉旧终端内容，防止重复叠加
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+              writeBuffer = '';
+              term.reset();
+              term.clear();
               if (msg.mode) {
                 currentMode = msg.mode;
                 modeSelect.value = msg.mode;
@@ -2432,38 +2479,29 @@
 
       function loadDiffContent(file) {
         var area = document.getElementById('git-diff-content-area');
-        area.innerHTML = '<div class="git-diff-loading">加载 diff...</div>';
-
-        fetch(basePath + '/api/git-diff?files=' + encodeURIComponent(file))
-          .then(function(r) { return r.json(); })
-          .then(function(data) {
-            if (!data.diffs || !data.diffs[0]) {
-              area.innerHTML = '<div class="git-diff-error">无 diff 数据</div>';
-              return;
-            }
-            var d = data.diffs[0];
-            var html = '<div class="git-diff-content-header">';
-            html += '<span class="git-diff-content-path">' + escapeHtml(d.file) + '</span>';
-            html += '<span class="git-diff-badge">' + (d.is_new ? 'NEW' : d.is_deleted ? 'DEL' : 'DIFF') + '</span>';
-            html += '</div>';
-            html += '<div class="git-diff-content-scroll">';
-
-            if (d.is_binary) {
-              html += '<div class="git-diff-loading" style="font-style:italic;">二进制文件</div>';
-            } else if (d.is_large) {
-              html += '<div class="git-diff-loading" style="color:#e2c08d;">文件过大: ' + (d.size / (1024 * 1024)).toFixed(2) + ' MB</div>';
-            } else if (d.unified_diff) {
-              html += renderUnifiedDiff(d.unified_diff);
-            } else {
-              html += '<div class="git-diff-loading" style="color:#666;">无变更内容</div>';
-            }
+        var d = diffChanges.find(function(c) { return c.file === file; });
+        if (!d) {
+          area.innerHTML = '<div class="git-diff-error">无 diff 数据</div>';
+          return;
+        }
+        var html = '<div class="git-diff-content-header">';
+        html += '<span class="git-diff-content-path">' + escapeHtml(d.file) + '</span>';
+        html += '<span class="git-diff-badge">' + (d.is_new ? 'NEW' : d.is_deleted ? 'DEL' : 'DIFF') + '</span>';
+        html += '</div>';
+        html += '<div class="git-diff-content-scroll">';
+
+        if (d.is_binary) {
+          html += '<div class="git-diff-loading" style="font-style:italic;">二进制文件</div>';
+        } else if (d.is_large) {
+          html += '<div class="git-diff-loading" style="color:#e2c08d;">文件过大: ' + (d.size / (1024 * 1024)).toFixed(2) + ' MB</div>';
+        } else if (d.unified_diff) {
+          html += renderUnifiedDiff(d.unified_diff);
+        } else {
+          html += '<div class="git-diff-loading" style="color:#666;">无变更内容</div>';
+        }
 
-            html += '</div>';
-            area.innerHTML = html;
-          })
-          .catch(function(err) {
-            area.innerHTML = '<div class="git-diff-error">加载失败: ' + escapeHtml(err.message) + '</div>';
-          });
+        html += '</div>';
+        area.innerHTML = html;
       }
 
       function renderUnifiedDiff(diffText) {
@@ -2496,13 +2534,13 @@
             html += '<tr class="diff-line diff-line-add">';
             html += '<td class="diff-line-num"></td>';
             html += '<td class="diff-line-num">' + newLine + '</td>';
-            html += '<td class="diff-line-content">' + escapeHtml(line.substring(1)) + '</td></tr>';
+            html += '<td class="diff-line-content"><span class="diff-sign">+</span>' + escapeHtml(line.substring(1)) + '</td></tr>';
             newLine++;
           } else if (line.startsWith('-')) {
             html += '<tr class="diff-line diff-line-del">';
             html += '<td class="diff-line-num">' + oldLine + '</td>';
             html += '<td class="diff-line-num"></td>';
-            html += '<td class="diff-line-content">' + escapeHtml(line.substring(1)) + '</td></tr>';
+            html += '<td class="diff-line-content"><span class="diff-sign">-</span>' + escapeHtml(line.substring(1)) + '</td></tr>';
             oldLine++;
           } else if (line.startsWith(' ') || (line === '' && i < lines.length - 1)) {
             html += '<tr class="diff-line">';
@@ -2608,6 +2646,15 @@
           });
       }
 
+      function formatDocContent(text) {
+        if (!text) return '';
+        try {
+          return DOMPurify.sanitize(marked.parse(text, { breaks: true }));
+        } catch (e) {
+          return '<pre>' + escapeHtml(text) + '</pre>';
+        }
+      }
+
       function loadDocContent(file) {
         var area = document.getElementById('docs-content-area');
         area.innerHTML = '<div class="docs-loading">加载中...</div>';
@@ -2618,7 +2665,7 @@
               area.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">' + escapeHtml(data.error) + '</div>';
               return;
             }
-            area.innerHTML = '<pre>' + escapeHtml(data.content) + '</pre>';
+            area.innerHTML = '<div class="docs-md-content">' + formatDocContent(data.content) + '</div>';
           })
           .catch(function(err) {
             area.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">加载失败</div>';

package/index.html

@@ -11,24 +11,62 @@
       50% { content: '..'; }
       75% { content: '...'; }
     }
-    #loading-overlay {
-      position: fixed;
+    #init-overlay {
+      display: none;
+      position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       background: #0a0a0a;
       color: #ccc;
-      display: flex;
       align-items: center;
       justify-content: center;
       font-size: 16px;
       font-family: -apple-system, BlinkMacSystemFont, sans-serif;
       letter-spacing: 1px;
-      z-index: 99999;
+      z-index: 100;
+    }
+    #init-overlay::after {
+      content: '';
+      animation: loading-dots 1.2s steps(4, end) infinite;
+    }
+    #init-overlay.visible { display: flex; }
+    #reconnect-overlay {
+      display: none;
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0,0,0,0.85);
+      color: #ccc;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: 1px;
+      z-index: 100;
+    }
+    #reconnect-overlay.visible { display: flex; }
+    #reconnect-overlay::after {
+      content: '';
+      animation: loading-dots 1.2s steps(4, end) infinite;
+    }
+    #restore-overlay {
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0,0,0,0.85);
+      color: #ccc;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: 1px;
+      z-index: 100;
+      flex-direction: column;
+      gap: 12px;
     }
-    #loading-overlay::after {
+    #restore-overlay.visible { display: flex; }
+    #restore-overlay::after {
       content: '';
       animation: loading-dots 1.2s steps(4, end) infinite;
     }
-    #loading-overlay.hidden { display: none !important; }
   </style>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@6.0.0/css/xterm.min.css" media="print" onload="this.media='all'">
   <style>
@@ -393,6 +431,8 @@
       padding: 4px 8px;
       touch-action: none;
       overscroll-behavior: contain;
+      background: #000;
+      background: #000;
     }
 
     #terminal.transitioning .xterm { visibility: hidden; }
@@ -809,6 +849,39 @@
       line-height: 1.6;
       color: #d4d4d4;
     }
+    .docs-md-content {
+      font-size: 13px; line-height: 1.7; color: #d4d4d4; word-break: break-word;
+    }
+    .docs-md-content h1, .docs-md-content h2, .docs-md-content h3 {
+      margin: 16px 0 8px; color: #e0e0e0; border-bottom: 1px solid #333; padding-bottom: 4px;
+    }
+    .docs-md-content h1 { font-size: 1.4em; }
+    .docs-md-content h2 { font-size: 1.2em; }
+    .docs-md-content h3 { font-size: 1.05em; }
+    .docs-md-content p { margin: 8px 0; }
+    .docs-md-content pre {
+      background: #1a1a1a; border: 1px solid #333; border-radius: 4px;
+      padding: 10px; overflow-x: auto; margin: 8px 0; white-space: pre-wrap; word-break: break-word;
+    }
+    .docs-md-content code {
+      background: #1a1a1a; padding: 1px 4px; border-radius: 3px; font-size: 12px;
+      font-family: Menlo, Monaco, monospace;
+    }
+    .docs-md-content pre code { background: none; padding: 0; }
+    .docs-md-content ul, .docs-md-content ol { margin: 8px 0; padding-left: 20px; }
+    .docs-md-content li { margin: 4px 0; }
+    .docs-md-content blockquote {
+      border-left: 3px solid #444; margin: 8px 0; padding: 4px 12px; color: #999;
+    }
+    .docs-md-content table { border-collapse: collapse; margin: 8px 0; width: 100%; }
+    .docs-md-content th, .docs-md-content td {
+      border: 1px solid #333; padding: 6px 10px; text-align: left;
+    }
+    .docs-md-content th { background: #1a1a1a; }
+    .docs-md-content a { color: #58a6ff; text-decoration: none; }
+    .docs-md-content a:hover { text-decoration: underline; }
+    .docs-md-content img { max-width: 100%; }
+    .docs-md-content hr { border: none; border-top: 1px solid #333; margin: 12px 0; }
     .docs-placeholder {
       flex: 1;
       display: flex;
@@ -874,6 +947,13 @@
       color: #ffa198;
     }
 
+    .diff-sign {
+      display: inline-block;
+      width: 12px;
+      font-weight: bold;
+      user-select: none;
+    }
+
     .diff-line-hunk {
       background: rgba(56, 139, 253, 0.1);
     }
@@ -894,7 +974,6 @@
 </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;">
@@ -1080,6 +1159,9 @@
       <div id="terminal-container">
         <div id="terminal" style="position:relative;">
           <div id="switch-overlay">正在切换</div>
+          <div id="restore-overlay">正在恢复会话</div>
+          <div id="init-overlay">正在初始化</div>
+          <div id="reconnect-overlay">连接断开，正在重连</div>
         </div>
         <div id="virtual-keybar">
           <div class="virtual-key" data-key="up">↑</div>
@@ -1269,24 +1351,31 @@
       // iOS 虚拟键盘弹出时，Safari 会滚动整个文档将页面上推，
       // 导致导航栏消失在视口之外。通过 visualViewport 的 resize + scroll
       // 事件同步可见区域的高度和偏移，用 fixed 定位将布局锁定在可见区域内。
-      if (isIOS && window.visualViewport) {
+      var mobileKbOpen = false;
+      if (isMobile && window.visualViewport) {
         var layoutEl = document.getElementById('layout');
+        var initVVH = window.visualViewport.height;
         var onVVChange = function() {
           if (!layoutEl) return;
           var vv = window.visualViewport;
-          layoutEl.style.position = 'fixed';
-          layoutEl.style.top = vv.offsetTop + 'px';
-          layoutEl.style.height = vv.height + 'px';
-          layoutEl.style.width = '100%';
-          layoutEl.style.left = '0';
-          setTimeout(mobileFixedResize, 50);
+          if ((initVVH - vv.height) > 50) {
+            mobileKbOpen = true;
+            layoutEl.style.height = vv.height + 'px';
+            layoutEl.style.top = vv.offsetTop + 'px';
+            layoutEl.style.bottom = 'auto';
+          } else {
+            mobileKbOpen = false;
+            layoutEl.style.height = '';
+            layoutEl.style.top = '0';
+            layoutEl.style.bottom = '0';
+          }
         };
         window.visualViewport.addEventListener('resize', onVVChange);
         window.visualViewport.addEventListener('scroll', onVVChange);
-        onVVChange();
       }
 
-      // 移动端固定尺寸计算：基于 #terminal 元素实际高度，确保终端与按钮栏齐平
+      // 移动端固定尺寸计算：用屏幕全高减去固定区域，保证全屏时也填满
+      var lastMobileCols = 0, lastMobileRows = 0;
       function mobileFixedResize() {
         if (!term) return;
         var cellDims = getCellDims();
@@ -1310,9 +1399,12 @@
           var newCellDims = getCellDims();
           var lineHeight = (newCellDims && newCellDims.height) || cellDims.height;
           var rows = Math.max(5, Math.min(Math.floor(availH / lineHeight), 100));
+          // 尺寸未变时只 resize xterm 本地，不通知服务端（避免重复 SIGWINCH）
+          var sizeChanged = !(MOBILE_COLS === lastMobileCols && rows === lastMobileRows);
+          lastMobileCols = MOBILE_COLS;
+          lastMobileRows = rows;
           term.resize(MOBILE_COLS, rows);
-          term.scrollToBottom();
-          if (ws && ws.readyState === 1 && !isTransitioning) {
+          if (sizeChanged && ws && ws.readyState === 1) {
             ws.send(JSON.stringify({ type: 'resize', cols: MOBILE_COLS, rows: rows, mobile: true }));
           }
         });
@@ -1638,57 +1730,67 @@
         }, 50);
       });
 
+      var restoreOverlay = document.getElementById('restore-overlay');
+      function showRestoreOverlay() {
+        if (restoreOverlay) restoreOverlay.classList.add('visible');
+      }
+      function hideRestoreOverlay() {
+        if (restoreOverlay) restoreOverlay.classList.remove('visible');
+      }
+
+      var waitingInitData = false;
+      var initDataTimer = null;
+
+      function showInitOverlay(text) {
+        var ov = document.getElementById('init-overlay');
+        if (ov) {
+          ov.textContent = text || '正在初始化';
+          ov.classList.add('visible');
+        }
+      }
+      function hideInitOverlay() {
+        var ov = document.getElementById('init-overlay');
+        if (ov) ov.classList.remove('visible');
+      }
+
       function connect() {
+        if (ws && ws.readyState <= 1) return;
         var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
         ws = new WebSocket(proto + '//' + location.host + basePath + '/ws');
 
         ws.onopen = function() {
-          setLoadingText('正在连接服务');
+          document.getElementById('reconnect-overlay').classList.remove('visible');
+          lastMobileCols = 0;
+          lastMobileRows = 0;
           resize();
           rebindTouchScroll();
         };
 
         ws.onclose = function() {
           ws = null;
-          term.reset();
-          term.write('\r\n  \x1b[33m连接断开，正在重连...\x1b[0m\r\n');
+          document.getElementById('reconnect-overlay').classList.add('visible');
           setTimeout(connect, 2000);
         };
 
-        var loadingOverlay = document.getElementById('loading-overlay');
-        var loadingShowTime = Date.now();
-        var loadingMinMs = 600;
-        var loadingHideTimer = null;
-        function setLoadingText(text) {
-          if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) {
-            loadingOverlay.textContent = text;
-          }
-        }
-        function hideLoading() {
-          if (!loadingOverlay || loadingOverlay.classList.contains('hidden')) return;
-          if (loadingHideTimer) return; // 已在等待中
-          var elapsed = Date.now() - loadingShowTime;
-          if (elapsed >= loadingMinMs) {
-            loadingOverlay.classList.add('hidden');
-          } else {
-            loadingHideTimer = setTimeout(function() {
-              loadingOverlay.classList.add('hidden');
-            }, loadingMinMs - elapsed);
-          }
-        }
-
         ws.onmessage = function(e) {
           try {
             var msg = JSON.parse(e.data);
             if (msg.type === 'data') {
-              hideLoading();
               if (isTransitioning) {
                 term.write(msg.data);
                 clearTimeout(transitionEndTimer);
                 transitionEndTimer = setTimeout(function() {
                   terminalEl.classList.remove('transitioning');
                   isTransitioning = false;
-                }, 2000);
+                }, 500);
+              } else if (waitingInitData) {
+                throttledWrite(msg.data);
+                clearTimeout(initDataTimer);
+                initDataTimer = setTimeout(function() {
+                  hideInitOverlay();
+                  hideRestoreOverlay();
+                  waitingInitData = false;
+                }, 500);
               } else if (!isCreatingNewSession) {
                 throttledWrite(msg.data);
               }
@@ -1700,31 +1802,25 @@
               }
             }
             else if (msg.type === 'state') {
-              // 重连时清掉旧终端内容（如"连接断开"提示）
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
               term.clear();
-              // 同步模式 UI
               if (msg.mode) {
                 currentMode = msg.mode;
                 modeSelect.value = msg.mode;
               }
               if (msg.running) {
-                setLoadingText('正在连接');
-                hideLoading();
                 preloadData();
               }
-              // 服务端还没启动进程时，查最近会话并自动恢复
               if (!msg.running && !mobileInitSent) {
                 mobileInitSent = true;
-                setLoadingText('正在查询会话');
+                showInitOverlay('正在查询会话');
                 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);
@@ -1733,7 +1829,7 @@
                       claudeProject = cl.project;
                     }
                     currentMode = mode;
-                    setLoadingText('正在启动 ' + (mode === 'claude' ? 'Claude' : 'OpenCode'));
+                    showInitOverlay('正在启动 ' + (mode === 'claude' ? 'Claude' : 'OpenCode'));
                     ws.send(JSON.stringify({ type: 'init', mode: mode, sessionId: sessionId || null }));
                   })
                   .catch(function() {
@@ -1758,7 +1854,7 @@
               term.clear();
             }
             else if (msg.type === 'restored') {
-              // 会话恢复成功，清除所有残留
+              waitingInitData = true;
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
@@ -1769,14 +1865,17 @@
             }
             else if (msg.type === 'restore-error') {
               isTransitioning = false;
+              hideInitOverlay();
+              hideRestoreOverlay();
               term.write('恢复失败: ' + msg.error + '\r\n');
             }
             else if (msg.type === 'started') {
-              hideLoading();
+              waitingInitData = true;
               rebindTouchScroll();
               preloadData();
             }
             else if (msg.type === 'new-session-ok') {
+              waitingInitData = true;
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
@@ -1784,11 +1883,9 @@
                 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) {}
@@ -1804,24 +1901,56 @@
         }, 2000);
       }
 
-      window.addEventListener('resize', resize);
       if (isMobile) {
+        // 移动端：不监听 window resize（键盘弹出/收起会触发导致重复内容）
+        // 仅监听屏幕旋转
         window.addEventListener('orientationchange', function() {
           setTimeout(resize, 200);
         });
+      } else {
+        window.addEventListener('resize', resize);
+      }
+
+      // 监听终端容器大小变化（全屏切换、地址栏收起等），键盘弹出时跳过
+      // 只做本地 term.resize 填充空间，不发服务端，避免 SIGWINCH 导致重复内容
+      if (isMobile && typeof ResizeObserver !== 'undefined') {
+        var termResizeTimer = null;
+        new ResizeObserver(function() {
+          if (mobileKbOpen || !term) return;
+          if (termResizeTimer) clearTimeout(termResizeTimer);
+          termResizeTimer = setTimeout(function() {
+            var cellDims = getCellDims();
+            if (!cellDims || !cellDims.height) return;
+            var termEl = document.getElementById('terminal');
+            if (!termEl) return;
+            var rows = Math.max(5, Math.min(Math.floor(termEl.clientHeight / cellDims.height), 100));
+            if (rows !== lastMobileRows) {
+              lastMobileRows = rows;
+              lastMobileCols = MOBILE_COLS;
+              term.resize(MOBILE_COLS, rows);
+            }
+          }, 150);
+        }).observe(document.getElementById('terminal'));
       }
 
-      // 页面卸载前保存输入缓存
+      // 页面卸载前保存输入缓存，并通知服务端退出
       window.addEventListener('beforeunload', function() {
         if (currentInputBuffer) {
           saveInputCache();
         }
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'quit' }));
+        }
       });
 
-      // 页面可见性变化时保存缓存
+      // 页面可见性变化时保存缓存 + 尝试重连
       document.addEventListener('visibilitychange', function() {
-        if (document.hidden && currentInputBuffer) {
-          saveInputCache();
+        if (document.hidden) {
+          if (currentInputBuffer) saveInputCache();
+        } else {
+          if (!ws || ws.readyState > 1) {
+            connect();
+          }
         }
       });
 
@@ -2057,27 +2186,23 @@
 
 
       function loadSession(session) {
-        console.log('[restore] 直接恢复会话:', session.title);
         currentSessionData = session;
-
-        // 关闭历史栏
         toggleHistoryBar();
-
-        // 阻止旧数据写入
+        showRestoreOverlay();
         isTransitioning = true;
         if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
         writeBuffer = '';
         term.reset();
-
         if (ws && ws.readyState === 1) {
           if (currentMode !== 'opencode') {
             isTransitioning = false;
+            hideRestoreOverlay();
             term.write('错误: 请先切换到 OpenCode 模式\r\n');
             return;
           }
-          // 静默恢复
           ws.send(JSON.stringify({ type: 'restore', sessionId: session.id }));
         } else {
+          hideRestoreOverlay();
           term.write('错误: WebSocket 未连接\r\n');
         }
       }
@@ -2258,10 +2383,10 @@
       }
 
       function restoreClaudeSession(sessionId, project) {
-        console.log('[restore] 恢复 Claude 会话:', sessionId);
         claudeSessionId = sessionId;
         if (project) claudeProject = project;
         toggleHistoryBar();
+        showRestoreOverlay();
         isTransitioning = true;
         if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
         writeBuffer = '';
@@ -2269,11 +2394,13 @@
         if (ws && ws.readyState === 1) {
           if (currentMode !== 'claude') {
             isTransitioning = false;
+            hideRestoreOverlay();
             term.write('错误: 请先切换到 Claude 模式\r\n');
             return;
           }
           ws.send(JSON.stringify({ type: 'restore', sessionId: sessionId }));
         } else {
+          hideRestoreOverlay();
           term.write('错误: WebSocket 未连接\r\n');
         }
       }
@@ -2633,38 +2760,29 @@
 
       function loadDiffContent(file) {
         var area = document.getElementById('git-diff-content-area');
-        area.innerHTML = '<div class="git-diff-loading">加载 diff...</div>';
-
-        fetch(basePath + '/api/git-diff?files=' + encodeURIComponent(file))
-          .then(function(r) { return r.json(); })
-          .then(function(data) {
-            if (!data.diffs || !data.diffs[0]) {
-              area.innerHTML = '<div class="git-diff-error">无 diff 数据</div>';
-              return;
-            }
-            var d = data.diffs[0];
-            var html = '<div class="git-diff-content-header">';
-            html += '<span class="git-diff-content-path">' + escapeHtml(d.file) + '</span>';
-            html += '<span class="git-diff-badge">' + (d.is_new ? 'NEW' : d.is_deleted ? 'DEL' : 'DIFF') + '</span>';
-            html += '</div>';
-            html += '<div class="git-diff-content-scroll">';
-
-            if (d.is_binary) {
-              html += '<div class="git-diff-loading" style="font-style:italic;">二进制文件</div>';
-            } else if (d.is_large) {
-              html += '<div class="git-diff-loading" style="color:#e2c08d;">文件过大: ' + (d.size / (1024 * 1024)).toFixed(2) + ' MB</div>';
-            } else if (d.unified_diff) {
-              html += renderUnifiedDiff(d.unified_diff);
-            } else {
-              html += '<div class="git-diff-loading" style="color:#666;">无变更内容</div>';
-            }
+        var d = diffChanges.find(function(c) { return c.file === file; });
+        if (!d) {
+          area.innerHTML = '<div class="git-diff-error">无 diff 数据</div>';
+          return;
+        }
+        var html = '<div class="git-diff-content-header">';
+        html += '<span class="git-diff-content-path">' + escapeHtml(d.file) + '</span>';
+        html += '<span class="git-diff-badge">' + (d.is_new ? 'NEW' : d.is_deleted ? 'DEL' : 'DIFF') + '</span>';
+        html += '</div>';
+        html += '<div class="git-diff-content-scroll">';
+
+        if (d.is_binary) {
+          html += '<div class="git-diff-loading" style="font-style:italic;">二进制文件</div>';
+        } else if (d.is_large) {
+          html += '<div class="git-diff-loading" style="color:#e2c08d;">文件过大: ' + (d.size / (1024 * 1024)).toFixed(2) + ' MB</div>';
+        } else if (d.unified_diff) {
+          html += renderUnifiedDiff(d.unified_diff);
+        } else {
+          html += '<div class="git-diff-loading" style="color:#666;">无变更内容</div>';
+        }
 
-            html += '</div>';
-            area.innerHTML = html;
-          })
-          .catch(function(err) {
-            area.innerHTML = '<div class="git-diff-error">加载失败: ' + escapeHtml(err.message) + '</div>';
-          });
+        html += '</div>';
+        area.innerHTML = html;
       }
 
       function renderUnifiedDiff(diffText) {
@@ -2697,13 +2815,13 @@
             html += '<tr class="diff-line diff-line-add">';
             html += '<td class="diff-line-num"></td>';
             html += '<td class="diff-line-num">' + newLine + '</td>';
-            html += '<td class="diff-line-content">' + escapeHtml(line.substring(1)) + '</td></tr>';
+            html += '<td class="diff-line-content"><span class="diff-sign">+</span>' + escapeHtml(line.substring(1)) + '</td></tr>';
             newLine++;
           } else if (line.startsWith('-')) {
             html += '<tr class="diff-line diff-line-del">';
             html += '<td class="diff-line-num">' + oldLine + '</td>';
             html += '<td class="diff-line-num"></td>';
-            html += '<td class="diff-line-content">' + escapeHtml(line.substring(1)) + '</td></tr>';
+            html += '<td class="diff-line-content"><span class="diff-sign">-</span>' + escapeHtml(line.substring(1)) + '</td></tr>';
             oldLine++;
           } else if (line.startsWith(' ') || (line === '' && i < lines.length - 1)) {
             html += '<tr class="diff-line">';
@@ -2811,6 +2929,15 @@
           });
       }
 
+      function formatDocContent(text) {
+        if (!text) return '';
+        try {
+          return DOMPurify.sanitize(marked.parse(text, { breaks: true }));
+        } catch (e) {
+          return '<pre>' + escapeHtml(text) + '</pre>';
+        }
+      }
+
       function loadDocContent(file) {
         var area = document.getElementById('docs-content-area');
         area.innerHTML = '<div class="docs-loading">加载中...</div>';
@@ -2821,7 +2948,7 @@
               area.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">' + escapeHtml(data.error) + '</div>';
               return;
             }
-            area.innerHTML = '<pre>' + escapeHtml(data.content) + '</pre>';
+            area.innerHTML = '<div class="docs-md-content">' + formatDocContent(data.content) + '</div>';
           })
           .catch(function() {
             area.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">加载失败</div>';

package/package.json

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

package/server.js

@@ -434,11 +434,17 @@ function writeToPty(data) {
 }
 
 function resizePty(cols, rows) {
+  const sameSize = (cols === lastPtyCols && rows === lastPtyRows);
   lastPtyCols = cols;
   lastPtyRows = rows;
+  if (sameSize) return;
   [claudeProcess, opencodeProcess].forEach(proc => {
     if (proc) {
-      try { proc.resize(cols, rows); } catch {}
+      try {
+        // 先设不同尺寸再设目标尺寸，保证即使进程已是该尺寸也能触发 SIGWINCH
+        proc.resize(Math.max(2, cols - 1), rows);
+        proc.resize(cols, rows);
+      } catch {}
     }
   });
 }
@@ -603,6 +609,7 @@ const requestHandler = async (req, res) => {
     return;
   }
 
+
   // API: 获取服务端口信息
   if (req.url === '/api/port') {
     res.writeHead(200, {
@@ -655,7 +662,7 @@ const requestHandler = async (req, res) => {
     return;
   }
 
-  // API: 获取 git status
+  // API: 获取 git status（含每个文件的 unified_diff，批量获取优化）
   if (req.url === '/api/git-status') {
     res.writeHead(200, {
       'Content-Type': 'application/json',
@@ -663,13 +670,76 @@ const requestHandler = async (req, res) => {
     });
     try {
       const gitCwd = process.env.PROJECT_DIR || process.cwd();
-      const { stdout } = await execFileAsync('git', ['-c', 'safe.directory=*', 'status', '--porcelain'], {
-        cwd: gitCwd, encoding: 'utf-8', timeout: 60000,
-      });
-      const changes = stdout.split('\n').filter(Boolean).map(line => ({
+
+      // 并行执行: git status + git diff --numstat + git diff (批量获取)
+      const [statusResult, numstatResult, diffResult] = await Promise.all([
+        execFileAsync('git', ['-c', 'safe.directory=*', 'status', '--porcelain'], { cwd: gitCwd, encoding: 'utf-8', timeout: 60000 }),
+        execFileAsync('git', ['-c', 'safe.directory=*', 'diff', '--numstat', 'HEAD'], { cwd: gitCwd, encoding: 'utf-8', timeout: 60000 }).catch(() => ({ stdout: '' })),
+        execFileAsync('git', ['-c', 'safe.directory=*', 'diff', '--no-color', '-U3', 'HEAD'], { cwd: gitCwd, encoding: 'utf-8', timeout: 60000, maxBuffer: 10 * 1024 * 1024 }).catch(e => ({ stdout: e.stdout || '' })),
+      ]);
+
+      const changes = statusResult.stdout.split('\n').filter(Boolean).map(line => ({
         status: line.substring(0, 2).trim(),
         file: line.substring(3),
       })).filter(c => !/^core-/.test(c.file));
+
+      // 解析 numstat 识别二进制文件
+      const binaryFiles = new Set();
+      numstatResult.stdout.split('\n').filter(Boolean).forEach(line => {
+        if (line.startsWith('-\t-\t')) binaryFiles.add(line.split('\t')[2]);
+      });
+
+      // 将批量 diff 输出按文件拆分
+      const diffMap = {};
+      const diffParts = diffResult.stdout.split(/^diff --git /m);
+      for (let i = 1; i < diffParts.length; i++) {
+        const part = diffParts[i];
+        // 提取文件名: "a/path b/path\n..."
+        const firstLine = part.substring(0, part.indexOf('\n'));
+        const bMatch = firstLine.match(/ b\/(.+)$/);
+        if (bMatch) diffMap[bMatch[1]] = 'diff --git ' + part;
+      }
+
+      // 填充每个文件的 diff 信息
+      const untrackedFiles = [];
+      for (const c of changes) {
+        if (c.file.includes('..') || c.file.startsWith('/')) continue;
+        c.is_new = c.status === 'A' || c.status === '??';
+        c.is_deleted = c.status === 'D';
+        c.is_binary = binaryFiles.has(c.file);
+        if (c.is_binary) continue;
+
+        // 检查大文件
+        if (!c.is_deleted) {
+          try {
+            const filePath = join(gitCwd, c.file);
+            if (existsSync(filePath)) {
+              const stat = statSync(filePath);
+              if (stat.size > 5 * 1024 * 1024) { c.is_large = true; c.size = stat.size; continue; }
+            }
+          } catch {}
+        }
+
+        if (c.status === '??') {
+          // untracked 文件需要单独处理
+          untrackedFiles.push(c);
+        } else {
+          c.unified_diff = diffMap[c.file] || '';
+        }
+      }
+
+      // 对 untracked 文件并行获取 diff
+      if (untrackedFiles.length > 0) {
+        await Promise.all(untrackedFiles.map(async (c) => {
+          try {
+            const { stdout: diffOut } = await execFileAsync('git', ['-c', 'safe.directory=*', 'diff', '--no-color', '-U3', '--no-index', '/dev/null', c.file], { cwd: gitCwd, encoding: 'utf-8', timeout: 30000, maxBuffer: 5 * 1024 * 1024 });
+            c.unified_diff = diffOut;
+          } catch (e) {
+            c.unified_diff = e.stdout || '';
+          }
+        }));
+      }
+
       res.end(JSON.stringify({ changes, cwd: gitCwd }));
     } catch (err) {
       res.end(JSON.stringify({ changes: [], cwd: process.env.PROJECT_DIR || process.cwd(), error: err.message }));
@@ -1118,15 +1188,32 @@ wssInst.on('connection', (ws, req) => {
         LOG('[reconnect] 重启失败:', e.message);
       }
       isSwitching = false;
-    }, 200);
-  } else if (outputBuffer) {
-    ws.send(JSON.stringify({ type: 'data', data: outputBuffer }));
+    }, 100);
+  } else if (currentProcess) {
+    // 连接已运行的进程：发送缓冲区内容 + 重置尺寸触发 SIGWINCH 重绘
+    if (outputBuffer) {
+      ws.send(JSON.stringify({ type: 'data', data: outputBuffer }));
+    }
+    lastPtyCols = 0;
+    lastPtyRows = 0;
   }
 
 
+  let wsBuf = '';
+  let wsFlushTimer = null;
+  const flushWs = () => {
+    wsFlushTimer = null;
+    if (wsBuf && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: 'data', data: wsBuf }));
+      wsBuf = '';
+    }
+  };
   const listener = (data) => {
     if (ws.readyState === 1 && !isSwitching) {
-      ws.send(JSON.stringify({ type: 'data', data }));
+      wsBuf += data;
+      if (!wsFlushTimer) {
+        wsFlushTimer = setTimeout(flushWs, 16);
+      }
     }
   };
   dataListeners.push(listener);
@@ -1141,7 +1228,6 @@ wssInst.on('connection', (ws, req) => {
   ws.on('message', async (raw) => {
     try {
       const msg = JSON.parse(raw);
-      LOG(`[WS msg] type=${msg.type}, currentProcess=${!!currentProcess}, currentMode=${currentMode}`);
 
       if (msg.type === 'input') {
         // 进程已退出时，自动重新启动（参考 cc-viewer 逻辑）
@@ -1189,6 +1275,7 @@ wssInst.on('connection', (ws, req) => {
         }
       } else if (msg.type === 'restore') {
         // 恢复会话（支持 opencode 和 claude）
+        LOG(`[restore] received: sessionId=${msg.sessionId}, mode=${currentMode}, isSwitching=${isSwitching}`);
         if (msg.sessionId) {
           LOG(`[restore] 恢复 ${currentMode} 会话: ${msg.sessionId}`);
 
@@ -1214,8 +1301,8 @@ wssInst.on('connection', (ws, req) => {
           // 清空输出缓冲
           outputBuffer = '';
 
-          // 等待进程完全退出
-          await new Promise(resolve => setTimeout(resolve, 500));
+          // 等待进程退出
+          await new Promise(resolve => setTimeout(resolve, 100));
           cleanupOrphanProcesses();
 
           // 启动进程，传入 session ID
@@ -1328,7 +1415,7 @@ wssInst.on('connection', (ws, req) => {
         }, 5000);
       }
     } catch (err) {
-      LOG('[WS] Error:', err.message);
+      console.log('[WS] Error:', err.message, err.stack);
     }
   });
 

package/test-doc.md

@@ -0,0 +1,86 @@
+# Claude OpenCode Viewer 使用指南
+
+## 简介
+
+Claude OpenCode Viewer（COV）是一个统一的终端查看器，支持在浏览器中远程查看和操作 Claude Code 与 OpenCode 的终端会话。适用于需要在手机或其他设备上查看 AI 编程助手工作进度的场景。
+
+## 安装
+
+```bash
+npm install -g claude-opencode-viewer
+```
+
+安装完成后，可以通过以下命令启动：
+
+```bash
+cov
+```
+
+默认监听端口 7008，PC 模式使用 `--pc` 参数启动。
+
+## 功能特性
+
+### 终端查看
+
+支持实时查看终端输出，基于 xterm.js 实现完整的终端模拟，包括：
+
+- 颜色渲染
+- Unicode 字符支持
+- WebGL 加速渲染
+- 移动端触摸滚动
+
+### 会话管理
+
+可以管理多个会话，支持以下操作：
+
+1. 查看历史会话列表
+2. 恢复已有会话
+3. 创建新会话
+4. 在 Claude 和 OpenCode 之间切换
+
+### Git 变更查看
+
+集成了 Git 状态查看功能，可以直接在页面上查看：
+
+| 状态 | 含义 | 颜色 |
+|------|------|------|
+| M | 已修改 | 橙色 |
+| A | 新增 | 绿色 |
+| D | 已删除 | 红色 |
+| ?? | 未跟踪 | 灰色 |
+
+### 文档浏览
+
+支持浏览项目中的 Markdown 文档，自动扫描项目目录下的 `.md` 文件并以富文本格式展示。
+
+## 配置说明
+
+> 注意：以下配置需要在项目根目录下操作，确保 `PROJECT_DIR` 环境变量指向正确的项目路径。
+
+常用环境变量：
+
+- `PROJECT_DIR` — 指定项目工作目录
+- `PORT` — 自定义端口号
+- `COV_MODE` — 默认启动模式（claude / opencode）
+
+## 常见问题
+
+### 连接断开怎么办？
+
+页面会自动显示重连提示并尝试重新连接。如果持续无法连接，请检查：
+
+1. 服务进程是否仍在运行
+2. 网络是否可达
+3. 端口是否被占用
+
+### 移动端键盘遮挡问题
+
+在 iOS 设备上，系统会自动调整终端高度以适应键盘弹出。如果遇到显示异常，可以尝试旋转屏幕后再旋转回来。
+
+## 更新日志
+
+**v2.6.48** — 修复重连内容重复、模式切换黑屏问题
+
+**v2.6.47** — 添加 PC 端重连覆盖层
+
+**v2.6.46** — 移动端键盘交互优化