claude-opencode-viewer 2.6.42 → 2.6.44

package/index-pc.html

@@ -2262,29 +2262,28 @@
         var bar = document.getElementById('git-diff-bar');
         if (diffBarVisible) {
           bar.classList.add('visible');
-          loadGitStatus(false);
+          if (cachedGitStatus) {
+            diffChanges = cachedGitStatus.changes || [];
+            document.getElementById('git-diff-count').textContent = diffChanges.length;
+            renderDiffFileList();
+          } else if (gitStatusLoading) {
+            document.getElementById('git-diff-file-list').innerHTML = '<div class="git-diff-loading">正在查询 git status...</div>';
+            document.getElementById('git-diff-count').textContent = '...';
+          } else {
+            document.getElementById('git-diff-file-list').innerHTML = '<div class="git-diff-loading" style="color:#666;">点击刷新加载</div>';
+          }
         } else {
           bar.classList.remove('visible');
           diffSelectedFile = null;
         }
       }
 
-      function loadGitStatus(forceRefresh) {
+      function loadGitStatus() {
         var fileList = document.getElementById('git-diff-file-list');
-
-        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>';
+        fileList.innerHTML = '<div class="git-diff-loading">正在刷新...</div>';
         document.getElementById('git-diff-count').textContent = '...';
-
-        if (gitStatusLoading && !forceRefresh) return;
         gitStatusLoading = true;
-        if (forceRefresh) cachedGitStatus = null;
+        cachedGitStatus = null;
 
         fetch(basePath + '/api/git-status')
           .then(function(r) { return r.json(); })
@@ -2426,7 +2425,7 @@
       document.getElementById('close-diff').addEventListener('click', toggleDiffBar);
       document.getElementById('refresh-diff').addEventListener('click', function(e) {
         e.stopPropagation();
-        loadGitStatus(true);
+        loadGitStatus();
         // 重置 diff 内容区
         diffSelectedFile = null;
         document.getElementById('git-diff-content-area').innerHTML =
@@ -2448,7 +2447,14 @@
         var bar = document.getElementById('docs-bar');
         if (docsBarVisible) {
           bar.classList.add('visible');
-          loadDocs(false);
+          if (cachedDocs) {
+            renderDocsList(cachedDocs);
+          } else if (docsLoading) {
+            document.getElementById('docs-file-list').innerHTML = '<div class="docs-loading">正在查询文档...</div>';
+            document.getElementById('docs-count').textContent = '...';
+          } else {
+            document.getElementById('docs-file-list').innerHTML = '<div class="docs-loading" style="color:#666;">点击刷新加载</div>';
+          }
         } else {
           bar.classList.remove('visible');
           docsSelectedFile = null;
@@ -2484,20 +2490,12 @@
         });
       }
 
-      function loadDocs(forceRefresh) {
+      function loadDocs() {
         var fileList = document.getElementById('docs-file-list');
-
-        if (cachedDocs && !forceRefresh) {
-          renderDocsList(cachedDocs);
-          return;
-        }
-
-        fileList.innerHTML = '<div class="docs-loading">' + (forceRefresh ? '正在刷新...' : '正在查询文档...') + '</div>';
+        fileList.innerHTML = '<div class="docs-loading">正在刷新...</div>';
         document.getElementById('docs-count').textContent = '...';
-
-        if (docsLoading && !forceRefresh) return;
         docsLoading = true;
-        if (forceRefresh) cachedDocs = null;
+        cachedDocs = null;
 
         fetch(basePath + '/api/docs')
           .then(function(r) { return r.json(); })
@@ -2533,7 +2531,7 @@
       document.getElementById('close-docs').addEventListener('click', toggleDocsBar);
       document.getElementById('refresh-docs').addEventListener('click', function(e) {
         e.stopPropagation();
-        loadDocs(true);
+        loadDocs();
         docsSelectedFile = null;
         document.getElementById('docs-content-area').innerHTML =
           '<div class="docs-placeholder">' +

package/index.html

@@ -4,7 +4,33 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <title>Claude OpenCode Viewer</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
+  <style id="loading-style">
+    @keyframes loading-dots {
+      0% { content: ''; }
+      25% { content: '.'; }
+      50% { content: '..'; }
+      75% { content: '...'; }
+    }
+    #loading-overlay {
+      position: fixed;
+      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;
+    }
+    #loading-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@5.5.0/css/xterm.min.css" media="print" onload="this.media='all'">
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     html, body { margin: 0; padding: 0; overflow: hidden; }
@@ -359,19 +385,6 @@
       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;
       overflow: hidden;
@@ -857,7 +870,7 @@
 </head>
 <body>
   <!-- 参考 cc-viewer 的 App.jsx 行 1315-1607: 完整的移动端布局结构 -->
-  <div id="loading-overlay">正在初始化...</div>
+  <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;">
@@ -1587,6 +1600,7 @@
         ws = new WebSocket(proto + '//' + location.host + basePath + '/ws');
 
         ws.onopen = function() {
+          setLoadingText('正在连接服务');
           resize();
           rebindTouchScroll();
         };
@@ -1599,9 +1613,24 @@
         };
 
         var loadingOverlay = document.getElementById('loading-overlay');
-        function hideLoading() {
+        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);
           }
         }
 
@@ -1621,12 +1650,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('正在查询会话');
                 fetch('/api/last-sessions')
                   .then(function(r) { return r.json(); })
                   .then(function(data) {
@@ -1641,6 +1683,7 @@
                       claudeProject = cl.project;
                     }
                     currentMode = mode;
+                    setLoadingText('正在启动 ' + (mode === 'claude' ? 'Claude' : 'OpenCode'));
                     ws.send(JSON.stringify({ type: 'init', mode: mode, sessionId: sessionId || null }));
                   })
                   .catch(function() {
@@ -1663,13 +1706,6 @@
               writeBuffer = '';
               term.clear();
             }
-            else if (msg.type === 'state') {
-              if (msg.mode) {
-                currentMode = msg.mode;
-                modeSelect.value = msg.mode;
-                modeIndicator.textContent = msg.mode === 'claude' ? 'Claude' : 'OpenCode';
-              }
-            }
             else if (msg.type === 'restored') {
               // 会话恢复成功，清除所有残留
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
@@ -2517,31 +2553,30 @@
         var bar = document.getElementById('git-diff-bar');
         if (diffBarVisible) {
           bar.classList.add('visible');
-          loadGitStatus(false);
+          if (cachedGitStatus) {
+            diffChanges = cachedGitStatus.changes || [];
+            document.getElementById('git-diff-count').textContent = diffChanges.length;
+            renderDiffFileList();
+          } else if (gitStatusLoading) {
+            document.getElementById('git-diff-file-list').innerHTML = '<div class="git-diff-loading">正在查询 git status...</div>';
+            document.getElementById('git-diff-count').textContent = '...';
+          } else {
+            document.getElementById('git-diff-file-list').innerHTML = '<div class="git-diff-loading" style="color:#666;">点击刷新加载</div>';
+          }
         } else {
           bar.classList.remove('visible');
           diffSelectedFile = null;
         }
       }
 
-      function loadGitStatus(forceRefresh) {
+      function loadGitStatus() {
         var fileList = document.getElementById('git-diff-file-list');
 
-        // 有缓存且非强制刷新，直接用缓存
-        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>';
+        fileList.innerHTML = '<div class="git-diff-loading">正在刷新...</div>';
         document.getElementById('git-diff-count').textContent = '...';
 
-        if (gitStatusLoading && !forceRefresh) return; // 预加载进行中，等它完成
         gitStatusLoading = true;
-        if (forceRefresh) cachedGitStatus = null;
+        cachedGitStatus = null;
 
         fetch(basePath + '/api/git-status')
           .then(function(r) { return r.json(); })
@@ -2683,7 +2718,7 @@
       document.getElementById('close-diff').addEventListener('click', toggleDiffBar);
       document.getElementById('refresh-diff').addEventListener('click', function(e) {
         e.stopPropagation();
-        loadGitStatus(true);
+        loadGitStatus();
         // 重置 diff 内容区
         diffSelectedFile = null;
         document.getElementById('git-diff-content-area').innerHTML =
@@ -2705,7 +2740,14 @@
         var bar = document.getElementById('docs-bar');
         if (docsBarVisible) {
           bar.classList.add('visible');
-          loadDocs(false);
+          if (cachedDocs) {
+            renderDocsList(cachedDocs);
+          } else if (docsLoading) {
+            document.getElementById('docs-file-list').innerHTML = '<div class="docs-loading">正在查询文档...</div>';
+            document.getElementById('docs-count').textContent = '...';
+          } else {
+            document.getElementById('docs-file-list').innerHTML = '<div class="docs-loading" style="color:#666;">点击刷新加载</div>';
+          }
         } else {
           bar.classList.remove('visible');
           docsSelectedFile = null;
@@ -2741,21 +2783,14 @@
         });
       }
 
-      function loadDocs(forceRefresh) {
+      function loadDocs() {
         var fileList = document.getElementById('docs-file-list');
 
-        // 有缓存且非强制刷新，直接用缓存
-        if (cachedDocs && !forceRefresh) {
-          renderDocsList(cachedDocs);
-          return;
-        }
-
-        fileList.innerHTML = '<div class="docs-loading">' + (forceRefresh ? '正在刷新...' : '正在查询文档...') + '</div>';
+        fileList.innerHTML = '<div class="docs-loading">正在刷新...</div>';
         document.getElementById('docs-count').textContent = '...';
 
-        if (docsLoading && !forceRefresh) return;
         docsLoading = true;
-        if (forceRefresh) cachedDocs = null;
+        cachedDocs = null;
 
         fetch(basePath + '/api/docs')
           .then(function(r) { return r.json(); })
@@ -2791,7 +2826,7 @@
       document.getElementById('close-docs').addEventListener('click', toggleDocsBar);
       document.getElementById('refresh-docs').addEventListener('click', function(e) {
         e.stopPropagation();
-        loadDocs(true);
+        loadDocs();
         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.42",
+  "version": "2.6.44",
   "description": "A unified terminal viewer for Claude Code and OpenCode with seamless switching",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -295,6 +295,8 @@ async function spawnProcess(mode, sessionId = null) {
   });
 
   proc.onData((data) => {
+    // 忽略已被替换的旧进程输出
+    if (currentProcess !== proc) return;
     outputBuffer += data;
     if (outputBuffer.length > MAX_BUFFER) {
       const rawStart = outputBuffer.length - MAX_BUFFER;
@@ -1216,8 +1218,7 @@ wssInst.on('connection', (ws, req) => {
         outputBuffer = '';
         try {
           await spawnProcess(mode, msg.sessionId || null);
-          ws.send(JSON.stringify({ type: 'mode', mode: currentMode }));
-          ws.send(JSON.stringify({ type: 'started', sessionId: msg.sessionId || null }));
+          ws.send(JSON.stringify({ type: 'started', mode: currentMode, sessionId: msg.sessionId || null }));
         } catch (e) {
           LOG('[init] 启动失败:', e.message);
           ws.send(JSON.stringify({ type: 'start-error', error: e.message }));