claude-opencode-viewer 2.6.12 → 2.6.14

package/index.html

@@ -174,13 +174,13 @@
       background: none;
       border: 1px solid #333;
       color: #aaa;
-      padding: 4px 10px;
-      font-size: 12px;
+      padding: 3px 6px;
+      font-size: 11px;
       cursor: pointer;
       border-radius: 4px;
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: 3px;
       flex-shrink: 0;
     }
 
@@ -191,8 +191,8 @@
     }
 
     .history-toggle-btn svg {
-      width: 14px;
-      height: 14px;
+      width: 12px;
+      height: 12px;
     }
 
     .session-loading {
@@ -351,71 +351,94 @@
       color: #fff;
     }
 
-    /* 选择模式：原位文本层 */
-    #terminal.select-mode .xterm-screen {
-      visibility: hidden;
-    }
-
-    #select-text-layer {
+    /* 消息查看器 */
+    #message-viewer {
       display: none;
-      position: absolute;
+      position: fixed;
       top: 0; left: 0; right: 0; bottom: 0;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
       background: #0a0a0a;
-      padding: 4px 8px;
-      touch-action: auto;
-      z-index: 10;
+      z-index: 1000;
+      flex-direction: column;
     }
-
-    #select-text-layer.visible {
-      display: block;
+    #message-viewer.visible {
+      display: flex;
     }
-
-    #select-hint {
-      position: sticky;
-      top: 0;
-      background: rgba(30,30,30,0.95);
-      color: #888;
-      font-size: 11px;
-      text-align: center;
-      padding: 6px 0;
-      border-bottom: 1px solid #333;
-      z-index: 1;
-      -webkit-user-select: none;
-      user-select: none;
+    #msg-viewer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 14px;
+      background: #111;
+      border-bottom: 1px solid #222;
+      flex-shrink: 0;
     }
-
-    #select-text-layer pre {
-      margin: 0;
-      color: #d4d4d4;
-      font-family: Menlo, Monaco, "Courier New", monospace;
-      font-size: 11px;
-      line-height: 1.4;
-      white-space: pre-wrap;
-      word-break: break-all;
-      -webkit-user-select: text;
-      user-select: text;
+    #msg-viewer-header span {
+      color: #ccc;
+      font-size: 15px;
+      font-weight: 500;
     }
-
-    #select-mode-close {
-      position: absolute;
-      top: 6px;
-      right: 6px;
-      z-index: 20;
-      display: none;
+    #msg-viewer-close {
       background: rgba(50,50,50,0.9);
       border: 1px solid #555;
       color: #ccc;
-      width: 28px;
-      height: 28px;
+      width: 30px;
+      height: 30px;
       border-radius: 50%;
-      font-size: 14px;
-      line-height: 26px;
+      font-size: 15px;
+      line-height: 28px;
       text-align: center;
       cursor: pointer;
-      -webkit-user-select: none;
-      user-select: none;
+    }
+    #msg-viewer-content {
+      flex: 1;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      padding: 12px;
+    }
+    .msg-item {
+      margin-bottom: 16px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      border: 1px solid #222;
+    }
+    .msg-user {
+      background: #1a2332;
+      border-color: #2a4a7c;
+    }
+    .msg-assistant {
+      background: #1a2e1a;
+      border-color: #2a5a3a;
+    }
+    .msg-role {
+      font-size: 11px;
+      color: #888;
+      font-weight: 600;
+      text-transform: uppercase;
+      margin-bottom: 6px;
+    }
+    .msg-text {
+      color: #ddd;
+      font-size: 13px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-user-select: text;
+      user-select: text;
+    }
+    .msg-tool {
+      margin-top: 6px;
+      padding: 6px 8px;
+      background: #1a1a0a;
+      border: 1px solid #333;
+      border-radius: 4px;
+      font-size: 11px;
+      color: #f0ad4e;
+    }
+    .msg-empty {
+      text-align: center;
+      padding: 40px 20px;
+      color: #666;
+      font-size: 13px;
     }
 
     /* 复制成功提示 */
@@ -680,6 +703,12 @@
           </svg>
           <span>Diff</span>
         </button>
+        <button class="history-toggle-btn" id="msg-toggle" style="color:#c9a0dc; border-color:#5a3a6a;">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+          </svg>
+          <span>消息</span>
+        </button>
       </div>
       <div id="mode-switcher">
         <span id="mode-label"></span>
@@ -765,11 +794,6 @@
     <div id="content">
       <div id="terminal-container">
         <div id="terminal">
-          <div id="select-text-layer">
-            <div id="select-hint">长按选择文本 · 点右上角 ✕ 返回终端</div>
-            <pre id="select-text-pre"></pre>
-          </div>
-          <button id="select-mode-close">✕</button>
         </div>
         <div id="virtual-keybar">
           <div class="virtual-key" data-key="up">↑</div>
@@ -785,6 +809,16 @@
     </div>
   </div>
 
+  <div id="message-viewer">
+    <div id="msg-viewer-header">
+      <span>会话消息</span>
+      <button id="msg-viewer-close">✕</button>
+    </div>
+    <div id="msg-viewer-content">
+      <div class="msg-empty">加载中...</div>
+    </div>
+  </div>
+
   <div id="copy-toast">已复制</div>
   <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
   <script>
@@ -931,7 +965,7 @@
         onVVChange();
       }
 
-      // 参考 cc-viewer 的 TerminalPanel.jsx 行 410-447: 移动端固定尺寸计算
+      // 移动端固定尺寸计算：基于 #terminal 元素实际高度，确保终端与按钮栏齐平
       function mobileFixedResize() {
         if (!term) return;
         var cellDims = getCellDims();
@@ -941,12 +975,9 @@
         }
 
         var padX = 16;
-        var padY = 8;
-        var topBarHeight = 40;
-        var keybarHeight = 52;
-
+        var termEl = document.getElementById('terminal');
         var availW = window.innerWidth - padX;
-        var availH = window.innerHeight - topBarHeight - keybarHeight - padY;
+        var availH = termEl ? termEl.clientHeight : 300;
 
         var currentFontSize = term.options.fontSize;
         var currentCharWidth = cellDims.width;
@@ -1092,49 +1123,17 @@
         }
       }
 
-      // 长按检测
-      var longPressTimer = null;
-      var longPressTriggered = false;
-      var LONG_PRESS_DELAY = 550; // ms
-
-      function clearLongPress() {
-        if (longPressTimer) {
-          clearTimeout(longPressTimer);
-          longPressTimer = null;
-        }
-        // 始终恢复 xterm textarea，防止 disabled 残留
-        var xtermTa = terminalEl.querySelector('.xterm-helper-textarea');
-        if (xtermTa) xtermTa.removeAttribute('disabled');
-      }
-
       function handleTouchStart(e) {
         stopMomentum();
         altScrollAccum = 0;
-        longPressTriggered = false;
-        clearLongPress();
         if (e.touches.length !== 1) return;
         lastY = e.touches[0].clientY;
         lastTime = performance.now();
         velocitySamples = [];
-
-        // 启动长按计时器
-        // 在长按检测期间阻止 xterm textarea 获取焦点，防止弹出键盘
-        var xtermTa = terminalEl.querySelector('.xterm-helper-textarea');
-        if (xtermTa) {
-          xtermTa.setAttribute('disabled', 'true');
-        }
-
-        longPressTimer = setTimeout(function() {
-          longPressTriggered = true;
-          longPressTimer = null;
-          openSelectMode();
-        }, LONG_PRESS_DELAY);
       }
 
       function handleTouchMove(e) {
         if (e.touches.length !== 1) return;
-        // 有移动则取消长按
-        clearLongPress();
         var y = e.touches[0].clientY;
         var now = performance.now();
         var dt = now - lastTime;
@@ -1157,17 +1156,6 @@
       }
 
       function handleTouchEnd() {
-        console.log('[scroll] touchend');
-        clearLongPress();
-
-        // 长按已触发，不执行滚动惯性
-        if (longPressTriggered) {
-          longPressTriggered = false;
-          pendingDy = 0;
-          pixelAccum = 0;
-          velocitySamples = [];
-          return;
-        }
 
         if (scrollRaf) {
           cancelAnimationFrame(scrollRaf);
@@ -1818,47 +1806,89 @@
       }
 
 
-      // 方案2: 长按进入选择模式 — 原位显示可选纯文本
-      var selectTextLayer = document.getElementById('select-text-layer');
-      var selectTextPre = document.getElementById('select-text-pre');
-      var selectModeClose = document.getElementById('select-mode-close');
-      var inSelectMode = false;
+      // 消息查看器
+      var messageViewer = document.getElementById('message-viewer');
+      var msgViewerContent = document.getElementById('msg-viewer-content');
+      var msgViewerClose = document.getElementById('msg-viewer-close');
 
-      function openSelectMode() {
-        if (inSelectMode) return;
-        inSelectMode = true;
+      function openMessageViewer() {
         // 收起键盘
         var xtermTa = terminalEl.querySelector('.xterm-helper-textarea');
         if (xtermTa) xtermTa.blur();
         document.activeElement && document.activeElement.blur();
-        var text = getTerminalText();
-        selectTextPre.textContent = text || '(终端内容为空)';
-        terminalEl.classList.add('select-mode');
-        selectTextLayer.classList.add('visible');
-        selectModeClose.style.display = 'block';
+
+        messageViewer.classList.add('visible');
+        msgViewerContent.innerHTML = '<div class="msg-empty">加载中...</div>';
         unbindTouchScroll();
+
+        // 获取当前会话 ID
+        fetch(basePath + '/api/current-session')
+          .then(function(r) { return r.json(); })
+          .then(function(data) {
+            if (!data.sessionId) {
+              msgViewerContent.innerHTML = '<div class="msg-empty">暂无活跃会话</div>';
+              return;
+            }
+            return fetch(basePath + '/api/session/' + data.sessionId)
+              .then(function(r) { return r.json(); })
+              .then(function(messages) {
+                renderMessages(messages);
+              });
+          })
+          .catch(function(e) {
+            msgViewerContent.innerHTML = '<div class="msg-empty">加载失败: ' + e.message + '</div>';
+          });
       }
 
-      function closeSelectMode() {
-        if (!inSelectMode) return;
-        inSelectMode = false;
-        terminalEl.classList.remove('select-mode');
-        selectTextLayer.classList.remove('visible');
-        selectModeClose.style.display = 'none';
-        window.getSelection().removeAllRanges();
+      function renderMessages(messages) {
+        if (!messages || messages.length === 0) {
+          msgViewerContent.innerHTML = '<div class="msg-empty">暂无消息</div>';
+          return;
+        }
+        var html = '';
+        messages.forEach(function(msg) {
+          var role = msg.role || 'unknown';
+          var roleLabel = role === 'user' ? '用户' : role === 'assistant' ? '助手' : role;
+          var cls = role === 'user' ? 'msg-user' : role === 'assistant' ? 'msg-assistant' : '';
+          html += '<div class="msg-item ' + cls + '">';
+          html += '<div class="msg-role">' + roleLabel + '</div>';
+          if (msg.text) {
+            html += '<div class="msg-text">' + escapeHtml(msg.text) + '</div>';
+          }
+          if (msg.toolCalls && msg.toolCalls.length > 0) {
+            msg.toolCalls.forEach(function(tc) {
+              html += '<div class="msg-tool">🔧 ' + escapeHtml(tc.name || 'tool') + '</div>';
+            });
+          }
+          html += '</div>';
+        });
+        msgViewerContent.innerHTML = html;
+      }
+
+      function escapeHtml(str) {
+        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      }
+
+      function closeMessageViewer() {
+        messageViewer.classList.remove('visible');
         rebindTouchScroll();
       }
 
-      selectModeClose.addEventListener('click', function(e) {
+      msgViewerClose.addEventListener('click', function(e) {
         e.preventDefault();
         e.stopPropagation();
-        closeSelectMode();
+        closeMessageViewer();
       });
 
-      selectModeClose.addEventListener('touchend', function(e) {
+      msgViewerClose.addEventListener('touchend', function(e) {
         e.preventDefault();
         e.stopPropagation();
-        closeSelectMode();
+        closeMessageViewer();
+      });
+
+      // 顶部消息按钮
+      document.getElementById('msg-toggle').addEventListener('click', function() {
+        openMessageViewer();
       });
 
       // ======= Git Diff 功能 =======

package/package.json

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

package/server.js

@@ -15,7 +15,7 @@ import Database from 'better-sqlite3';
 process.title = 'claude-opencode-viewer';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const PORT = parseInt(process.argv[2]) || 7008;
+let PORT = parseInt(process.argv[2]) || 7008;
 const IS_PC = process.argv.includes('--pc');
 const USE_HTTPS = process.argv.includes('--https');
 const JSON_OUTPUT = process.argv.includes('--json');
@@ -72,6 +72,7 @@ let lastPtyCols = 120;
 let lastPtyRows = 30;
 
 let activeWs = null;
+let currentSessionId = null;
 const clientSizes = new Map();
 const mobileClients = new Set();
 let currentMode = 'opencode';
@@ -229,6 +230,30 @@ async function spawnProcess(mode, sessionId = null) {
       } catch {}
     }
     opencodeProcess = proc;
+
+    // 追踪当前会话 ID
+    if (sessionId) {
+      currentSessionId = sessionId;
+      console.log(`[session] 当前会话 ID: ${currentSessionId}`);
+    } else {
+      // 新建会话：延迟查数据库获取最新 session ID
+      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);
+    }
   }
 
   currentProcess = proc;
@@ -479,6 +504,16 @@ const requestHandler = async (req, res) => {
     return;
   }
 
+  // API: 获取当前会话 ID
+  if (req.url === '/api/current-session') {
+    res.writeHead(200, {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+    });
+    res.end(JSON.stringify({ sessionId: currentSessionId }));
+    return;
+  }
+
   // API: 获取 git status
   if (req.url === '/api/git-status') {
     res.writeHead(200, {
@@ -795,23 +830,61 @@ wss.on('connection', (ws, req) => {
 process.on('SIGINT', () => process.exit(0));
 process.on('SIGTERM', () => process.exit(0));
 
-server.listen(PORT, '0.0.0.0', async () => {
-  const ip = getLocalIp();
-  const proto = USE_HTTPS ? 'https' : 'http';
+// PC 模式端口范围，用于端口冲突重试
+const PC_PORT_MIN = 19200;
+const PC_PORT_MAX = 19220;
+const MAX_PORT_RETRIES = 10;
 
-  if (JSON_OUTPUT) {
-    // 输出一行 JSON 供外部程序解析，然后继续运行
-    console.log(JSON.stringify({ port: PORT, url: `${proto}://127.0.0.1:${PORT}`, ip, proto, pid: process.pid }));
-  } else {
-    console.log('\n' + '='.repeat(50));
-    console.log('✅ Claude OpenCode Viewer 已启动');
-    console.log('='.repeat(50));
-    console.log(`🖥️  本地访问：${proto}://127.0.0.1:${PORT}`);
-    console.log(`📱  手机访问：${proto}://${ip}:${PORT}`);
-    if (USE_HTTPS) console.log('🔐 HTTPS 模式（首次访问需信任自签名证书）');
-    console.log('='.repeat(50));
-    console.log('\n按 Ctrl+C 停止服务\n');
-  }
+function startServer(retries = 0) {
+  server.listen(PORT, '0.0.0.0', async () => {
+    const ip = getLocalIp();
+    const proto = USE_HTTPS ? 'https' : 'http';
 
-  await spawnProcess('opencode');
-});
+    if (JSON_OUTPUT) {
+      console.log(JSON.stringify({ port: PORT, url: `${proto}://127.0.0.1:${PORT}`, ip, proto, pid: process.pid }));
+    } else {
+      console.log('\n' + '='.repeat(50));
+      console.log('✅ Claude OpenCode Viewer 已启动');
+      console.log('='.repeat(50));
+      console.log(`🖥️  本地访问：${proto}://127.0.0.1:${PORT}`);
+      console.log(`📱  手机访问：${proto}://${ip}:${PORT}`);
+      if (USE_HTTPS) console.log('🔐 HTTPS 模式（首次访问需信任自签名证书）');
+      console.log('='.repeat(50));
+      console.log('\n按 Ctrl+C 停止服务\n');
+    }
+
+    // 尝试恢复最近的会话，如果没有则新建
+    let lastSessionId = null;
+    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_updated DESC LIMIT 1`
+      ).get();
+      db.close();
+      if (row) lastSessionId = row.id;
+    } catch (e) {}
+
+    if (lastSessionId) {
+      console.log(`[startup] 恢复最近会话: ${lastSessionId}`);
+      await spawnProcess('opencode', lastSessionId);
+    } else {
+      await spawnProcess('opencode');
+    }
+  });
+
+  server.on('error', (err) => {
+    if (err.code === 'EADDRINUSE' && IS_PC && retries < MAX_PORT_RETRIES) {
+      // PC 模式端口冲突，顺序查找下一个可用端口
+      const oldPort = PORT;
+      PORT = PORT >= PC_PORT_MAX ? PC_PORT_MIN : PORT + 1;
+      console.error(`[port] ${oldPort} 已占用，尝试 ${PORT} (${retries + 1}/${MAX_PORT_RETRIES})`);
+      server.removeAllListeners('error');
+      startServer(retries + 1);
+    } else {
+      console.error(`启动失败: ${err.message}`);
+      process.exit(1);
+    }
+  });
+}
+
+startServer();