claude-opencode-viewer 2.6.46 → 2.6.47

package/index-pc.html

@@ -390,8 +390,26 @@
       content: '';
       animation: loading-dots 1.2s steps(4, end) infinite;
     }
-    #terminal.transitioning #switch-overlay { display: flex;
+    #terminal.transitioning #switch-overlay { display: flex; }
+    #init-overlay {
+      display: none;
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: #0a0a0a;
+      color: #ccc;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      font-weight: 600;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: 1px;
+      z-index: 10;
+    }
+    #init-overlay::after {
+      content: '';
+      animation: loading-dots 1.2s steps(4, end) infinite;
     }
+    #init-overlay.visible { display: flex; }
 
 
     /* 选择模式：原位文本层 */
@@ -1019,6 +1037,7 @@
       <div id="terminal-container">
         <div id="terminal" style="position:relative;">
           <div id="switch-overlay">正在切换</div>
+          <div id="init-overlay"></div>
           <div id="select-text-layer">
             <div id="select-hint">长按选择文本 · 点右上角 ✕ 返回终端</div>
             <pre id="select-text-pre"></pre>
@@ -1054,7 +1073,7 @@
           selectionBackground: '#264f78',
         },
         allowProposedApi: true,
-        scrollback: isIOS ? 200 : isMobile ? 1000 : 3000,
+        scrollback: isIOS ? 2000 : isMobile ? 5000 : 50000,
         smoothScrollDuration: 0,
         scrollOnUserInput: true,
       });
@@ -1592,12 +1611,18 @@
         modeSelect.value = mode;
         document.getElementById('mode-label').textContent = '';
         var label = mode === 'claude' ? 'Claude' : 'OpenCode';
-        term.write('\r\n  正在启动 ' + label + (sessionId ? '（恢复会话）' : '') + '...\r\n');
+        var initOv = document.getElementById('init-overlay');
+        initOv.textContent = '正在启动 ' + label + (sessionId ? '（恢复会话）' : '');
+        initOv.classList.add('visible');
         var msg = { type: 'init', mode: mode };
         if (sessionId) msg.sessionId = sessionId;
         ws.send(JSON.stringify(msg));
       }
 
+      function hideInitOverlay() {
+        document.getElementById('init-overlay').classList.remove('visible');
+      }
+
       function getTimeAgo(ts) {
         var diff = Date.now() - ts;
         var min = Math.floor(diff / 60000);
@@ -1673,6 +1698,7 @@
               }
             }
             else if (msg.type === 'restored') {
+              hideInitOverlay();
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
@@ -1681,13 +1707,16 @@
               }
             }
             else if (msg.type === 'restore-error') {
+              hideInitOverlay();
               term.write('恢复失败: ' + msg.error + '\r\n');
             }
             else if (msg.type === 'started') {
+              hideInitOverlay();
               rebindTouchScroll();
               preloadData();
             }
             else if (msg.type === 'new-session-ok') {
+              hideInitOverlay();
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();

package/index.html

@@ -38,7 +38,6 @@
     /* 隐藏 xterm textarea 的闪烁光标 (cc-viewer TerminalPanel.module.css) */
     .xterm-helper-textarea { caret-color: transparent !important; }
 
-    /* 参考 cc-viewer 的 App.jsx 行 1319: 移动端容器使用 100vw/100vh */
     #layout {
       position: fixed;
       top: 0;
@@ -57,8 +56,7 @@
       background: #111;
       border-bottom: 1px solid #222;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       flex-shrink: 0;
       height: 40px;
@@ -94,8 +92,7 @@
 
     #session-history-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -129,8 +126,7 @@
 
     .session-item {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       gap: 8px;
       padding: 8px 12px;
       background: #1a1a1a;
@@ -214,8 +210,7 @@
       cursor: pointer;
       border-radius: 4px;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       gap: 3px;
       flex-shrink: 0;
     }
@@ -256,8 +251,7 @@
       cursor: pointer;
       border-radius: 50%;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       transition: all 0.15s;
       -webkit-tap-highlight-color: transparent;
@@ -302,8 +296,7 @@
 
     #claude-detail-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       padding: 10px 12px;
       background: #111;
       border-bottom: 1px solid #222;
@@ -356,8 +349,7 @@
     #mode-switcher {
       display: flex;
       gap: 4px;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
     }
 
     #mode-label {
@@ -410,8 +402,7 @@
       top: 0; left: 0; right: 0; bottom: 0;
       background: #0a0a0a;
       color: #ccc;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       font-size: 16px;
       font-family: -apple-system, BlinkMacSystemFont, sans-serif;
@@ -481,8 +472,7 @@
     }
     #msg-viewer-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 10px 14px;
       background: #111;
@@ -616,8 +606,7 @@
 
     #git-diff-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -641,8 +630,7 @@
 
     .git-diff-file-item {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       padding: 6px 12px;
       cursor: pointer;
       color: #ccc;
@@ -686,8 +674,7 @@
 
     .git-diff-content-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       gap: 10px;
       padding: 8px 12px;
       border-bottom: 1px solid #2a2a2a;
@@ -727,8 +714,7 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       gap: 12px;
       color: #333;
@@ -761,8 +747,7 @@
     #docs-bar.visible { display: flex; }
     #docs-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -782,8 +767,7 @@
     }
     .docs-file-item {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       padding: 8px 12px;
       cursor: pointer;
       color: #ccc;
@@ -829,8 +813,7 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       gap: 12px;
       color: #333;
@@ -1153,13 +1136,14 @@
           selectionBackground: '#264f78',
         },
         allowProposedApi: true,
-        scrollback: isIOS ? 200 : isMobile ? 1000 : 3000,
+        scrollback: isIOS ? 2000 : isMobile ? 5000 : 50000,
         smoothScrollDuration: 0,
         scrollOnUserInput: true,
       });
 
       term.open(document.getElementById('terminal'));
 
+
       // Unicode 11 宽字符支持：box-drawing、CJK、emoji 等字符宽度精确计算
       if (window.Unicode11Addon) {
         try {
@@ -1326,6 +1310,7 @@
           var lineHeight = (newCellDims && newCellDims.height) || cellDims.height;
           var rows = Math.max(5, Math.min(Math.floor(availH / lineHeight), 100));
           term.resize(MOBILE_COLS, rows);
+          term.scrollToBottom();
           if (ws && ws.readyState === 1 && !isTransitioning) {
             ws.send(JSON.stringify({ type: 'resize', cols: MOBILE_COLS, rows: rows, mobile: true }));
           }

package/package.json

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