claude-opencode-viewer 2.6.43 → 2.6.45

package/index-pc.html

@@ -365,9 +365,32 @@
       overscroll-behavior: contain;
     }
 
-    #terminal.transitioning {
-      opacity: 0.3;
-      transition: opacity 0.3s ease;
+    #terminal.transitioning .xterm { visibility: hidden; }
+    @keyframes loading-dots {
+      0% { content: ''; }
+      25% { content: '.'; }
+      50% { content: '..'; }
+      75% { content: '...'; }
+    }
+    #switch-overlay {
+      display: none;
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: #0a0a0a;
+      color: #ccc;
+      align-items: flex-start;
+      padding-top: 40px;
+      justify-content: center;
+      font-size: 15px;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: 1px;
+      z-index: 10;
+    }
+    #switch-overlay::after {
+      content: '';
+      animation: loading-dots 1.2s steps(4, end) infinite;
+    }
+    #terminal.transitioning #switch-overlay { display: flex;
     }
 
 
@@ -994,7 +1017,8 @@
 
     <div id="content">
       <div id="terminal-container">
-        <div id="terminal">
+        <div id="terminal" style="position:relative;">
+          <div id="switch-overlay">正在切换</div>
           <div id="select-text-layer">
             <div id="select-hint">长按选择文本 · 点右上角 ✕ 返回终端</div>
             <pre id="select-text-pre"></pre>

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; }
@@ -28,7 +54,8 @@
       background: #111;
       border-bottom: 1px solid #222;
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       justify-content: space-between;
       flex-shrink: 0;
       height: 40px;
@@ -64,7 +91,8 @@
 
     #session-history-header {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -98,7 +126,8 @@
 
     .session-item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       gap: 8px;
       padding: 8px 12px;
       background: #1a1a1a;
@@ -182,7 +211,8 @@
       cursor: pointer;
       border-radius: 4px;
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       gap: 3px;
       flex-shrink: 0;
     }
@@ -223,7 +253,8 @@
       cursor: pointer;
       border-radius: 50%;
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       justify-content: center;
       transition: all 0.15s;
       -webkit-tap-highlight-color: transparent;
@@ -268,7 +299,8 @@
 
     #claude-detail-header {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       padding: 10px 12px;
       background: #111;
       border-bottom: 1px solid #222;
@@ -321,7 +353,8 @@
     #mode-switcher {
       display: flex;
       gap: 4px;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
     }
 
     #mode-label {
@@ -359,19 +392,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;
@@ -380,10 +400,26 @@
       overscroll-behavior: contain;
     }
 
-    #terminal.transitioning {
-      opacity: 0.3;
-      transition: opacity 0.3s ease;
+    #terminal.transitioning .xterm { visibility: hidden; }
+    #switch-overlay {
+      display: none;
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: #0a0a0a;
+      color: #ccc;
+      align-items: flex-start;
+      padding-top: 40px;
+      justify-content: center;
+      font-size: 16px;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: 1px;
+      z-index: 10;
+    }
+    #switch-overlay::after {
+      content: '';
+      animation: loading-dots 1.2s steps(4, end) infinite;
     }
+    #terminal.transitioning #switch-overlay { display: flex; }
 
     /* 参考 cc-viewer 的 TerminalPanel.module.css: 虚拟键盘栏 */
     #virtual-keybar {
@@ -413,7 +449,8 @@
       min-width: 44px;
       min-height: 44px;
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       justify-content: center;
       border: none;
       outline: none;
@@ -442,7 +479,8 @@
     }
     #msg-viewer-header {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       justify-content: space-between;
       padding: 10px 14px;
       background: #111;
@@ -569,7 +607,8 @@
 
     #git-diff-header {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -593,7 +632,8 @@
 
     .git-diff-file-item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       padding: 6px 12px;
       cursor: pointer;
       color: #ccc;
@@ -637,7 +677,8 @@
 
     .git-diff-content-header {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       gap: 10px;
       padding: 8px 12px;
       border-bottom: 1px solid #2a2a2a;
@@ -677,7 +718,8 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       justify-content: center;
       gap: 12px;
       color: #333;
@@ -710,7 +752,8 @@
     #docs-bar.visible { display: flex; }
     #docs-header {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -730,7 +773,8 @@
     }
     .docs-file-item {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       padding: 8px 12px;
       cursor: pointer;
       color: #ccc;
@@ -776,7 +820,8 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: center;
+      align-items: flex-start;
+      padding-top: 40px;
       justify-content: center;
       gap: 12px;
       color: #333;
@@ -857,7 +902,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;">
@@ -1041,7 +1086,8 @@
 
     <div id="content">
       <div id="terminal-container">
-        <div id="terminal">
+        <div id="terminal" style="position:relative;">
+          <div id="switch-overlay">正在切换</div>
         </div>
         <div id="virtual-keybar">
           <div class="virtual-key" data-key="up">↑</div>
@@ -1587,6 +1633,7 @@
         ws = new WebSocket(proto + '//' + location.host + basePath + '/ws');
 
         ws.onopen = function() {
+          setLoadingText('正在连接服务');
           resize();
           rebindTouchScroll();
         };
@@ -1599,9 +1646,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 +1683,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 +1716,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 +1739,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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-opencode-viewer",
-  "version": "2.6.43",
+  "version": "2.6.45",
   "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 }));