claude-opencode-viewer 2.6.47 → 2.6.49

package/index-pc.html

@@ -410,6 +410,25 @@
       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(10, 10, 10, 0.85);
+      color: #f59e0b;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 600;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: 1px;
+      z-index: 10;
+    }
+    #reconnect-overlay::after {
+      content: '';
+      animation: loading-dots 1.2s steps(4, end) infinite;
+    }
+    #reconnect-overlay.visible { display: flex; }
 
 
     /* 选择模式：原位文本层 */
@@ -721,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;
@@ -786,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);
     }
@@ -1038,6 +1097,7 @@
         <div id="terminal" style="position:relative;">
           <div id="switch-overlay">正在切换</div>
           <div id="init-overlay"></div>
+          <div id="reconnect-overlay">连接断开，正在重连</div>
           <div id="select-text-layer">
             <div id="select-hint">长按选择文本 · 点右上角 ✕ 返回终端</div>
             <pre id="select-text-pre"></pre>
@@ -1051,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);
@@ -1059,6 +1121,9 @@
       var fontSize = isMobile ? 11 : 13;
       var currentMode = 'claude';
       var isTransitioning = false;
+      var transitionEndTimer = null;
+      var waitingInitData = false;
+      var initDataTimer = null;
       var isBufferReplay = true; // 初始缓冲区回放中，不弹 toast
       var startupDialogShown = false;
 
@@ -1640,16 +1705,16 @@
 
         ws.onopen = function() {
           isBufferReplay = true;
+          document.getElementById('reconnect-overlay').classList.remove('visible');
           resize();
           rebindTouchScroll();
-          setTimeout(function() { isBufferReplay = false; }, 500);
+          setTimeout(function() { isBufferReplay = false; }, 2000);
           // 不在这里初始化，等 state 消息判断是否需要弹对话框
         };
 
         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);
         };
 
@@ -1657,7 +1722,23 @@
           try {
             var msg = JSON.parse(e.data);
             if (msg.type === 'data') {
-              if (!isCreatingNewSession && !isTransitioning) {
+              if (isTransitioning) {
+                // 模式切换：TUI 渲染会发送一连串 data，debounce 等稳定后移除覆盖层
+                term.write(msg.data);
+                clearTimeout(transitionEndTimer);
+                transitionEndTimer = setTimeout(function() {
+                  terminalEl.classList.remove('transitioning');
+                  isTransitioning = false;
+                }, 2000);
+              } else if (waitingInitData) {
+                // 启动/恢复：同样 debounce 等 TUI 渲染完再隐藏启动覆盖层
+                throttledWrite(msg.data);
+                clearTimeout(initDataTimer);
+                initDataTimer = setTimeout(function() {
+                  hideInitOverlay();
+                  waitingInitData = false;
+                }, 2000);
+              } else if (!isCreatingNewSession) {
                 throttledWrite(msg.data);
               }
             }
@@ -1671,7 +1752,9 @@
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
-              endTransition(msg.mode);
+              // 更新模式但保留覆盖层，等首条 data 到达后再移除
+              currentMode = msg.mode;
+              modeSelect.value = msg.mode;
               if (msg.buffer) {
                 term.write(msg.buffer);
               }
@@ -1683,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;
@@ -1698,7 +1786,8 @@
               }
             }
             else if (msg.type === 'restored') {
-              hideInitOverlay();
+              // 不立即隐藏覆盖层，等 data debounce 后隐藏
+              waitingInitData = true;
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
@@ -1711,12 +1800,13 @@
               term.write('恢复失败: ' + msg.error + '\r\n');
             }
             else if (msg.type === 'started') {
-              hideInitOverlay();
+              // 不立即隐藏覆盖层，等 data debounce 后隐藏
+              waitingInitData = true;
               rebindTouchScroll();
               preloadData();
             }
             else if (msg.type === 'new-session-ok') {
-              hideInitOverlay();
+              waitingInitData = true;
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
@@ -1739,7 +1829,7 @@
           } else {
             cacheRestored = true;
           }
-        }, 800);
+        }, 2000);
       }
 
       window.addEventListener('resize', resize);
@@ -1908,7 +1998,7 @@
               setTimeout(function() {
                 sessions = sessions.filter(function(s) { return s.id !== sessionId; });
                 renderSessions();
-              }, 200);
+              }, 2000);
             } else {
               itemEl.style.opacity = '';
               itemEl.style.pointerEvents = '';
@@ -2108,7 +2198,7 @@
               itemEl.style.padding = '0 12px';
               itemEl.style.margin = '0';
               itemEl.style.opacity = '0';
-              setTimeout(function() { itemEl.remove(); }, 200);
+              setTimeout(function() { itemEl.remove(); }, 2000);
             } else {
               itemEl.style.opacity = '';
               itemEl.style.pointerEvents = '';
@@ -2389,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) {
@@ -2453,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">';
@@ -2565,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>';
@@ -2575,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

@@ -809,6 +809,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 +907,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);
     }
@@ -1120,6 +1160,7 @@
       var fontSize = isMobile ? 11 : 13;
       var currentMode = 'claude';
       var isTransitioning = false;
+      var transitionEndTimer = null;
       var mobileInitSent = false;
 
       var term = new Terminal({
@@ -1681,7 +1722,14 @@
             var msg = JSON.parse(e.data);
             if (msg.type === 'data') {
               hideLoading();
-              if (!isCreatingNewSession && !isTransitioning) {
+              if (isTransitioning) {
+                term.write(msg.data);
+                clearTimeout(transitionEndTimer);
+                transitionEndTimer = setTimeout(function() {
+                  terminalEl.classList.remove('transitioning');
+                  isTransitioning = false;
+                }, 2000);
+              } else if (!isCreatingNewSession) {
                 throttledWrite(msg.data);
               }
             }
@@ -1737,7 +1785,8 @@
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
-              endTransition(msg.mode);
+              currentMode = msg.mode;
+              modeSelect.value = msg.mode;
               if (msg.buffer) {
                 term.write(msg.buffer);
               }
@@ -1792,7 +1841,7 @@
           } else {
             cacheRestored = true;
           }
-        }, 800);
+        }, 2000);
       }
 
       window.addEventListener('resize', resize);
@@ -2031,7 +2080,7 @@
               setTimeout(function() {
                 sessions = sessions.filter(function(s) { return s.id !== sessionId; });
                 renderSessions();
-              }, 200);
+              }, 2000);
             } else {
               itemEl.style.opacity = '';
               itemEl.style.pointerEvents = '';
@@ -2234,7 +2283,7 @@
               itemEl.style.padding = '0 12px';
               itemEl.style.margin = '0';
               itemEl.style.opacity = '0';
-              setTimeout(function() { itemEl.remove(); }, 200);
+              setTimeout(function() { itemEl.remove(); }, 2000);
             } else {
               itemEl.style.opacity = '';
               itemEl.style.pointerEvents = '';
@@ -2624,38 +2673,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) {
@@ -2688,13 +2728,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">';
@@ -2802,6 +2842,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>';
@@ -2812,7 +2861,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.47",
+  "version": "2.6.49",
   "description": "A unified terminal viewer for Claude Code and OpenCode with seamless switching",
   "type": "module",
   "main": "server.js",