claude-opencode-viewer 2.6.15 → 2.6.17

package/.claude/settings.local.json

@@ -7,7 +7,11 @@
       "Bash(node:*)",
       "Bash(lsof -ti:7008)",
       "Bash(sqlite3:*)",
-      "Bash(ps:*)"
+      "Bash(ps:*)",
+      "Bash(git add:*)",
+      "Bash(git commit -m ':*)",
+      "Bash(git push:*)",
+      "Bash(npm publish:*)"
     ]
   }
 }

package/index-pc.html

@@ -1217,6 +1217,7 @@
 
         ws.onclose = function() {
           ws = null;
+          term.reset(); // 清除终端状态，避免 buffer 回放叠加导致状态混乱
           setTimeout(connect, 2000);
         };
 
@@ -1229,7 +1230,7 @@
               }
             }
             else if (msg.type === 'exit') {
-              if (!isCreatingNewSession) {
+              if (!isCreatingNewSession && !isTransitioning) {
                 throttledWrite('\r\n\x1b[33m[进程已退出: ' + msg.exitCode + ']\x1b[0m\r\n');
                 throttledWrite('\x1b[90m按 Enter 键重新启动 ' + currentMode + '...\x1b[0m\r\n');
               }
@@ -1240,8 +1241,8 @@
               rebindTouchScroll();
             }
             else if (msg.type === 'switching') {
-              // 服务端开始切换，前端清屏
-              term.clear();
+              // 服务端开始切换，完全重置终端（清除残留输出和状态）
+              term.reset();
               writeBuffer = '';
             }
             else if (msg.type === 'state') {

package/index.html

@@ -21,7 +21,7 @@
 
     /* 参考 cc-viewer 的 App.jsx 行 1320-1335: 顶部工具栏 */
     #header {
-      padding: 10px 12px;
+      padding: 10px 8px;
       background: #111;
       border-bottom: 1px solid #222;
       display: flex;
@@ -29,7 +29,7 @@
       justify-content: space-between;
       flex-shrink: 0;
       height: 40px;
-      gap: 12px;
+      gap: 6px;
     }
 
     #session-history-bar {
@@ -679,7 +679,7 @@
   <!-- 参考 cc-viewer 的 App.jsx 行 1315-1607: 完整的移动端布局结构 -->
   <div id="layout">
     <div id="header">
-      <div style="display: flex; gap: 8px; align-items: center;">
+      <div style="display: flex; gap: 4px; align-items: center; overflow-x: auto; flex: 1; min-width: 0;">
         <button class="history-toggle-btn" id="new-session-btn" style="color:#73c991; border-color:#2a5a3a;">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <line x1="12" y1="5" x2="12" y2="19"></line>
@@ -801,10 +801,10 @@
           <div class="virtual-key" data-key="left">←</div>
           <div class="virtual-key" data-key="right">→</div>
           <div class="virtual-key" data-key="enter">Enter</div>
+          <div class="virtual-key" data-key="paste">Ctrl+V</div>
           <div class="virtual-key" data-key="tab">Tab</div>
           <div class="virtual-key" data-key="esc">Esc</div>
           <div class="virtual-key" data-key="ctrlc">Ctrl+C</div>
-          <div class="virtual-key" data-key="paste">Ctrl+V</div>
         </div>
       </div>
     </div>
@@ -1044,6 +1044,7 @@
       }
 
       // 触摸滚动实现 - 混合模式：alternate buffer 发鼠标滚轮，normal buffer 用 scrollLines
+      var SCROLL_SENSITIVITY = 0.7; // 滚动灵敏度，越小每次滑动行数越少
       var touchScreen = null;
       var touchEventsBound = false;
 
@@ -1112,7 +1113,7 @@
         scrollRaf = null;
         if (pendingDy === 0) return;
 
-        pixelAccum += pendingDy;
+        pixelAccum += pendingDy * SCROLL_SENSITIVITY;
         pendingDy = 0;
 
         var lh = getLineHeight();
@@ -1164,7 +1165,7 @@
         }
 
         if (pendingDy !== 0) {
-          pixelAccum += pendingDy;
+          pixelAccum += pendingDy * SCROLL_SENSITIVITY;
           pendingDy = 0;
           var lh = getLineHeight();
           var lines = Math.trunc(pixelAccum / lh);
@@ -1189,8 +1190,9 @@
         }
         velocitySamples = [];
 
+        velocity *= SCROLL_SENSITIVITY;
         console.log('[scroll] velocity:', velocity);
-        if (Math.abs(velocity) < 0.5) return;
+        if (Math.abs(velocity) < 0.3) return;
 
         var friction = 0.95;
         var mAccum = 0;
@@ -1329,6 +1331,7 @@
 
         ws.onclose = function() {
           ws = null;
+          term.reset(); // 清除终端状态，避免 buffer 回放叠加导致状态混乱
           setTimeout(connect, 2000);
         };
 
@@ -1341,7 +1344,7 @@
               }
             }
             else if (msg.type === 'exit') {
-              if (!isCreatingNewSession) {
+              if (!isCreatingNewSession && !isTransitioning) {
                 throttledWrite('\r\n\x1b[33m[进程已退出: ' + msg.exitCode + ']\x1b[0m\r\n');
                 throttledWrite('\x1b[90m按 Enter 键重新启动 ' + currentMode + '...\x1b[0m\r\n');
               }
@@ -1352,8 +1355,8 @@
               rebindTouchScroll();
             }
             else if (msg.type === 'switching') {
-              // 服务端开始切换，前端清屏
-              term.clear();
+              // 服务端开始切换，完全重置终端（清除残留输出和状态）
+              term.reset();
               writeBuffer = '';
             }
             else if (msg.type === 'state') {

package/package.json

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

package/server.js

@@ -59,6 +59,27 @@ const OPENCODE_DB_PATH = process.env.OPENCODE_DB_PATH || join(
 );
 
 const MAX_BUFFER = 1024 * 1024; // 1MB
+
+// 安全截断：避免从 ANSI 转义序列中间开始导致终端状态紊乱
+function findSafeSliceStart(buf, rawStart) {
+  const scanLimit = Math.min(rawStart + 64, buf.length);
+  let i = rawStart;
+  while (i < scanLimit) {
+    const ch = buf.charCodeAt(i);
+    if (ch === 0x1b) {
+      let j = i + 1;
+      while (j < scanLimit && !((buf.charCodeAt(j) >= 0x40 && buf.charCodeAt(j) <= 0x7e) && j > i + 1)) {
+        j++;
+      }
+      if (j < scanLimit) return j + 1;
+      i = j;
+      continue;
+    }
+    if (ch >= 0x20 && ch <= 0x3f) { i++; continue; }
+    break;
+  }
+  return i < buf.length ? i : rawStart;
+}
 const execFileAsync = promisify(execFile);
 
 let ptyModule = null;
@@ -73,9 +94,11 @@ let lastPtyRows = 30;
 
 let activeWs = null;
 let currentSessionId = null;
+let previousSessionId = null; // 用于判断新会话是否已写入 DB
 const clientSizes = new Map();
 const mobileClients = new Set();
 let currentMode = 'opencode';
+let isSwitching = false; // 模式切换/恢复会话中，忽略旧进程退出事件
 
 function getMobileSize() {
   for (const mws of mobileClients) {
@@ -194,7 +217,9 @@ async function spawnProcess(mode, sessionId = null) {
   proc.onData((data) => {
     outputBuffer += data;
     if (outputBuffer.length > MAX_BUFFER) {
-      outputBuffer = outputBuffer.slice(-MAX_BUFFER);
+      const rawStart = outputBuffer.length - MAX_BUFFER;
+      const safeStart = findSafeSliceStart(outputBuffer, rawStart);
+      outputBuffer = outputBuffer.slice(safeStart);
     }
     dataListeners.forEach(cb => cb(data));
   });
@@ -210,6 +235,8 @@ async function spawnProcess(mode, sessionId = null) {
     if (opencodeProcess === proc) {
       opencodeProcess = null;
     }
+    // 已被替换的旧进程或切换中的进程，不通知前端
+    if (isSwitching || currentProcess !== null) return;
     exitListeners.forEach(cb => cb(exitCode || 0));
   });
 
@@ -236,23 +263,8 @@ async function spawnProcess(mode, sessionId = null) {
       currentSessionId = sessionId;
       console.log(`[session] 当前会话 ID: ${currentSessionId}`);
     } else {
-      // 新建会话：延迟查数据库获取最新 session ID
+      // 新建会话：保持 null，前端点击复制时不显示内容
       currentSessionId = null;
-      setTimeout(() => {
-        try {
-          const db = new Database(OPENCODE_DB_PATH, { readonly: true });
-          const row = db.prepare(
-            `SELECT id FROM session WHERE parent_id IS NULL AND time_archived IS NULL ORDER BY time_created DESC LIMIT 1`
-          ).get();
-          db.close();
-          if (row) {
-            currentSessionId = row.id;
-            console.log(`[session] 检测到新会话 ID: ${currentSessionId}`);
-          }
-        } catch (e) {
-          console.log('[session] 查询新会话 ID 失败:', e.message);
-        }
-      }, 3000);
     }
   }
 
@@ -266,6 +278,8 @@ async function switchMode(newMode) {
 
   console.log(`[switchMode] 从 ${currentMode} 切换到 ${newMode}`);
 
+  isSwitching = true;
+
   // 清空所有历史输出
   outputBuffer = '';
 
@@ -296,10 +310,15 @@ async function switchMode(newMode) {
   currentMode = newMode;
   try {
     await spawnProcess(newMode);
+    // 强制 resize 确保新进程使用正确的终端尺寸
+    if (currentProcess && lastPtyCols && lastPtyRows) {
+      try { currentProcess.resize(lastPtyCols, lastPtyRows); } catch {}
+    }
     console.log(`[switchMode] 切换到 ${newMode} 成功`);
   } catch (e) {
     console.error('[switchMode] 启动新进程失败:', e.message);
   }
+  isSwitching = false;
 }
 
 function writeToPty(data) {
@@ -644,13 +663,29 @@ const requestHandler = async (req, res) => {
   res.end('Not Found');
 };
 
-const server = USE_HTTPS
-  ? createHttpsServer(await getOrCreateCert(), requestHandler)
-  : createServer(requestHandler);
+const httpsOpts = USE_HTTPS ? await getOrCreateCert() : null;
+let server, wss;
+
+function createServerAndWss() {
+  server = USE_HTTPS
+    ? createHttpsServer(httpsOpts, requestHandler)
+    : createServer(requestHandler);
+  wss = new WebSocketServer({ noServer: true });
+  setupWss(wss);
 
-const wss = new WebSocketServer({ server, path: '/ws' });
+  server.on('upgrade', (req, socket, head) => {
+    if (req.url === '/ws') {
+      wss.handleUpgrade(req, socket, head, (ws) => {
+        wss.emit('connection', ws, req);
+      });
+    } else {
+      socket.destroy();
+    }
+  });
+}
 
-wss.on('connection', (ws, req) => {
+function setupWss(wssInst) {
+wssInst.on('connection', (ws, req) => {
   console.log('[WS] 客户端连接 from', req.socket.remoteAddress);
 
   ws.send(JSON.stringify({
@@ -660,12 +695,34 @@ wss.on('connection', (ws, req) => {
     mode: currentMode,
   }));
 
-  if (outputBuffer) {
+  // 重连时：如果有当前 opencode 会话且不在切换中，重启加载完整会话
+  if (!isSwitching && currentMode === 'opencode' && currentProcess && currentSessionId) {
+    isSwitching = true;
+    const sid = currentSessionId;
+    try {
+      if (opencodeProcess) {
+        opencodeProcess.kill();
+        opencodeProcess = null;
+        currentProcess = null;
+      }
+    } catch {}
+    outputBuffer = '';
+    setTimeout(async () => {
+      try {
+        await spawnProcess('opencode', sid);
+        ws.send(JSON.stringify({ type: 'started', sessionId: sid }));
+      } catch (e) {
+        console.error('[reconnect] 重启失败:', e.message);
+      }
+      isSwitching = false;
+    }, 200);
+  } else if (outputBuffer) {
     ws.send(JSON.stringify({ type: 'data', data: outputBuffer }));
   }
 
+
   const listener = (data) => {
-    if (ws.readyState === 1) {
+    if (ws.readyState === 1 && !isSwitching) {
       ws.send(JSON.stringify({ type: 'data', data }));
     }
   };
@@ -685,7 +742,8 @@ wss.on('connection', (ws, req) => {
 
       if (msg.type === 'input') {
         // 进程已退出时，自动重新启动（参考 cc-viewer 逻辑）
-        if (!currentProcess) {
+        // 模式切换/新建会话期间不触发 respawn
+        if (!currentProcess && !isSwitching) {
           try {
             console.log(`[respawn] 进程已退出，自动重新启动 ${currentMode}`);
             outputBuffer = '';
@@ -719,6 +777,8 @@ wss.on('connection', (ws, req) => {
         if (msg.mode !== currentMode) {
           ws.send(JSON.stringify({ type: 'switching', mode: msg.mode }));
           await switchMode(msg.mode);
+          // 切换完成后：先发 reset 清除残留，再发新进程的 buffer
+          ws.send(JSON.stringify({ type: 'data', data: '\x1bc' }));
           ws.send(JSON.stringify({ type: 'mode', mode: currentMode }));
           setTimeout(() => {
             if (outputBuffer) {
@@ -731,6 +791,8 @@ wss.on('connection', (ws, req) => {
         if (msg.sessionId && currentMode === 'opencode') {
           console.log(`[restore] 恢复会话: ${msg.sessionId}`);
 
+          isSwitching = true;
+
           // 杀死当前 opencode 进程
           if (opencodeProcess) {
             try {
@@ -757,6 +819,7 @@ wss.on('connection', (ws, req) => {
             console.error('[restore] 启动进程失败:', e.message);
             ws.send(JSON.stringify({ type: 'restore-error', error: e.message }));
           }
+          isSwitching = false;
         }
       } else if (msg.type === 'start') {
         // 前端启动指令：可选带 sessionId 恢复会话
@@ -775,6 +838,10 @@ wss.on('connection', (ws, req) => {
         const mode = currentMode;
         console.log(`[new-session] 开启新会话, mode=${mode}`);
 
+        isSwitching = true;
+        previousSessionId = currentSessionId; // 记住旧会话，用于判断新会话是否已写入 DB
+        currentSessionId = null; // 立即清除旧会话 ID
+
         if (mode === 'opencode' && opencodeProcess) {
           try { opencodeProcess.kill(); } catch {}
           opencodeProcess = null;
@@ -796,6 +863,29 @@ wss.on('connection', (ws, req) => {
           console.error('[new-session] 启动失败:', e.message);
           ws.send(JSON.stringify({ type: 'new-session-error', error: e.message }));
         }
+        isSwitching = false;
+
+        // 延迟检测新会话 ID（等 opencode 写入 DB）
+        const prevSid = previousSessionId;
+        const checkNewSession = (attempt) => {
+          if (currentSessionId || attempt > 10) return;
+          try {
+            if (existsSync(OPENCODE_DB_PATH)) {
+              const db = new Database(OPENCODE_DB_PATH, { readonly: true });
+              const row = db.prepare(
+                `SELECT id FROM session WHERE parent_id IS NULL AND time_archived IS NULL ORDER BY time_created DESC LIMIT 1`
+              ).get();
+              db.close();
+              if (row && row.id !== prevSid) {
+                currentSessionId = row.id;
+                console.log(`[new-session] 检测到新会话 ID: ${currentSessionId}`);
+                return;
+              }
+            }
+          } catch {}
+          setTimeout(() => checkNewSession(attempt + 1), 2000);
+        };
+        setTimeout(() => checkNewSession(0), 3000);
       }
     } catch (err) {
       console.error('[WS] Error:', err.message);
@@ -826,14 +916,17 @@ wss.on('connection', (ws, req) => {
     }
   });
 });
+} // end setupWss
+
+createServerAndWss();
 
 process.on('SIGINT', () => process.exit(0));
 process.on('SIGTERM', () => process.exit(0));
 
-// PC 模式端口范围，用于端口冲突重试
-const PC_PORT_MIN = 19200;
-const PC_PORT_MAX = 19220;
-const MAX_PORT_RETRIES = 10;
+// 端口范围，用于端口冲突重试
+const PORT_MIN = IS_PC ? 19200 : 7008;
+const PORT_MAX = IS_PC ? 19220 : 7028;
+const MAX_PORT_RETRIES = 20;
 
 function startServer(retries = 0) {
   server.listen(PORT, '0.0.0.0', async () => {
@@ -873,12 +966,11 @@ function startServer(retries = 0) {
   });
 
   server.on('error', (err) => {
-    if (err.code === 'EADDRINUSE' && IS_PC && retries < MAX_PORT_RETRIES) {
-      // PC 模式端口冲突，顺序查找下一个可用端口
+    if (err.code === 'EADDRINUSE' && retries < MAX_PORT_RETRIES) {
       const oldPort = PORT;
-      PORT = PORT >= PC_PORT_MAX ? PC_PORT_MIN : PORT + 1;
+      PORT = PORT >= PORT_MAX ? PORT_MIN : PORT + 1;
       console.error(`[port] ${oldPort} 已占用，尝试 ${PORT} (${retries + 1}/${MAX_PORT_RETRIES})`);
-      server.removeAllListeners('error');
+      createServerAndWss();
       startServer(retries + 1);
     } else {
       console.error(`启动失败: ${err.message}`);