npm - claude-opencode-viewer - Versions diffs - 2.4.1 → 2.5.0 - Mend

claude-opencode-viewer 2.4.1 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/index.html CHANGED Viewed

@@ -487,22 +487,117 @@
       border-color: #555;
       color: #fff;
     }
+    /* 选择模式：原位文本层 */
+    #terminal.select-mode .xterm-screen {
+      visibility: hidden;
+    }
+    #select-text-layer {
+      display: none;
+      position: absolute;
+      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;
+    }
+    #select-text-layer.visible {
+      display: block;
+    }
+    #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;
+    }
+    #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;
+    }
+    #select-mode-close {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      z-index: 20;
+      display: none;
+      background: rgba(50,50,50,0.9);
+      border: 1px solid #555;
+      color: #ccc;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      font-size: 14px;
+      line-height: 26px;
+      text-align: center;
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+    /* 复制成功提示 */
+    #copy-toast {
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: rgba(40, 167, 69, 0.9);
+      color: #fff;
+      padding: 10px 24px;
+      border-radius: 8px;
+      font-size: 14px;
+      z-index: 9999;
+      pointer-events: none;
+    }
+    #copy-toast.show {
+      display: block;
+    }
   </style>
 </head>
 <body>
   <!-- 参考 cc-viewer 的 App.jsx 行 1315-1607: 完整的移动端布局结构 -->
   <div id="layout">
     <div id="header">
-      <div style="font-size: 12px; color: #aaa;">Claude OpenCode Viewer</div>
-      <button class="history-toggle-btn" id="history-toggle">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="12" cy="12" r="10"></circle>
-          <polyline points="12 6 12 12 16 14"></polyline>
-        </svg>
-        <span>历史</span>
-      </button>
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <button class="history-toggle-btn" id="new-session-btn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+          <span>新会话</span>
+        </button>
+        <button class="history-toggle-btn" id="history-toggle">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+          </svg>
+          <span>历史</span>
+        </button>
+      </div>
       <div id="mode-switcher">
-        <span id="mode-label">Mode:</span>
+        <span id="mode-label"></span>
         <select id="mode-select">
           <option value="opencode">OpenCode</option>
           <option value="claude">Claude</option>
@@ -576,7 +671,13 @@
     <div id="content">
       <div id="terminal-container">
-        <div id="terminal"></div>
+        <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>
           <div class="virtual-key" data-key="down">↓</div>
@@ -588,11 +689,13 @@
           <div class="virtual-key" data-key="ctrlc">Ctrl+C</div>
           <div class="virtual-key scroll-key" data-scroll="-5">⇡ 滚动</div>
           <div class="virtual-key scroll-key" data-scroll="5">⇣ 滚动</div>
+          <div class="virtual-key" id="btn-copy">复制</div>
         </div>
       </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>
     (function() {
@@ -829,17 +932,40 @@
         }
       }
+      // 长按检测
+      var longPressTimer = null;
+      var longPressTriggered = false;
+      var LONG_PRESS_DELAY = 500; // ms
+      function clearLongPress() {
+        if (longPressTimer) {
+          clearTimeout(longPressTimer);
+          longPressTimer = null;
+        }
+      }
       function handleTouchStart(e) {
         console.log('[scroll] touchstart');
         stopMomentum();
+        longPressTriggered = false;
+        clearLongPress();
         if (e.touches.length !== 1) return;
         lastY = e.touches[0].clientY;
         lastTime = performance.now();
         velocitySamples = [];
+        // 启动长按计时器
+        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;
@@ -863,6 +989,16 @@
       function handleTouchEnd() {
         console.log('[scroll] touchend');
+        clearLongPress();
+        // 长按已触发，不执行滚动惯性
+        if (longPressTriggered) {
+          longPressTriggered = false;
+          pendingDy = 0;
+          pixelAccum = 0;
+          velocitySamples = [];
+          return;
+        }
         if (scrollRaf) {
           cancelAnimationFrame(scrollRaf);
@@ -1048,10 +1184,16 @@
         ws.onmessage = function(e) {
           try {
             var msg = JSON.parse(e.data);
-            if (msg.type === 'data') throttledWrite(msg.data);
+            if (msg.type === 'data') {
+              if (!isCreatingNewSession) {
+                throttledWrite(msg.data);
+              }
+            }
             else if (msg.type === 'exit') {
-              throttledWrite('\r\n\x1b[33m[进程已退出: ' + msg.exitCode + ']\x1b[0m\r\n');
-              throttledWrite('\x1b[90m按 Enter 键重新启动 ' + currentMode + '...\x1b[0m\r\n');
+              if (!isCreatingNewSession) {
+                throttledWrite('\r\n\x1b[33m[进程已退出: ' + msg.exitCode + ']\x1b[0m\r\n');
+                throttledWrite('\x1b[90m按 Enter 键重新启动 ' + currentMode + '...\x1b[0m\r\n');
+              }
             }
             else if (msg.type === 'mode') {
               endTransition(msg.mode);
@@ -1080,6 +1222,14 @@
               // 恢复失败
               term.write('\x1b[31m✗ 恢复失败: ' + msg.error + '\x1b[0m\r\n');
             }
+            else if (msg.type === 'new-session-ok') {
+              isCreatingNewSession = false;
+              term.clear();
+            }
+            else if (msg.type === 'new-session-error') {
+              isCreatingNewSession = false;
+              term.write('\x1b[31m✗ 新会话启动失败: ' + msg.error + '\x1b[0m\r\n');
+            }
           } catch(err) {}
         };
@@ -1455,12 +1605,27 @@
         if (historyBarVisible) {
           historyBar.classList.add('visible');
-          loadSessions();
+          if (currentMode === 'opencode') {
+            loadSessions();
+          } else {
+            // claude 模式暂无历史会话功能
+            var sessionList = document.getElementById('session-list');
+            sessionList.innerHTML = '<div class="session-empty">Claude Code 暂不支持历史会话</div>';
+          }
         } else {
           historyBar.classList.remove('visible');
         }
       }
+      // 新会话按钮
+      var isCreatingNewSession = false;
+      document.getElementById('new-session-btn').addEventListener('click', function() {
+        if (!ws || ws.readyState !== 1) return;
+        isCreatingNewSession = true;
+        term.clear();
+        ws.send(JSON.stringify({ type: 'new-session' }));
+      });
       // 绑定历史按钮
       document.getElementById('history-toggle').addEventListener('click', function() {
         toggleHistoryBar();
@@ -1526,6 +1691,104 @@
         }
       });
+      // 提取终端缓冲区文本
+      function getTerminalText() {
+        var buf = term.buffer.active;
+        var lines = [];
+        for (var i = 0; i < buf.length; i++) {
+          var line = buf.getLine(i);
+          if (line) lines.push(line.translateToString(true));
+        }
+        // 去除尾部空行
+        while (lines.length > 0 && lines[lines.length - 1].trim() === '') {
+          lines.pop();
+        }
+        return lines.join('\n');
+      }
+      // 复制到剪贴板
+      function copyToClipboard(text) {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(text).then(showCopyToast).catch(function() {
+            fallbackCopy(text);
+          });
+        } else {
+          fallbackCopy(text);
+        }
+      }
+      function fallbackCopy(text) {
+        var ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px';
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        showCopyToast();
+      }
+      function showCopyToast() {
+        var toast = document.getElementById('copy-toast');
+        toast.classList.add('show');
+        setTimeout(function() { toast.classList.remove('show'); }, 1200);
+      }
+      // "复制" 按钮
+      document.getElementById('btn-copy').addEventListener('touchend', function(e) {
+        e.preventDefault();
+        var text = getTerminalText();
+        if (text) copyToClipboard(text);
+      });
+      document.getElementById('btn-copy').addEventListener('click', function(e) {
+        e.preventDefault();
+        var text = getTerminalText();
+        if (text) copyToClipboard(text);
+      });
+      // 方案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;
+      function openSelectMode() {
+        if (inSelectMode) return;
+        inSelectMode = true;
+        // 收起键盘
+        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';
+        unbindTouchScroll();
+      }
+      function closeSelectMode() {
+        if (!inSelectMode) return;
+        inSelectMode = false;
+        terminalEl.classList.remove('select-mode');
+        selectTextLayer.classList.remove('visible');
+        selectModeClose.style.display = 'none';
+        window.getSelection().removeAllRanges();
+        rebindTouchScroll();
+      }
+      selectModeClose.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeSelectMode();
+      });
+      selectModeClose.addEventListener('touchend', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeSelectMode();
+      });
       // 初始化虚拟按键事件
       setupVirtualKeyEvents();

package/package.json CHANGED Viewed

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

package/server.js CHANGED Viewed

@@ -535,6 +535,32 @@ wss.on('connection', (ws, req) => {
             ws.send(JSON.stringify({ type: 'restore-error', error: e.message }));
           }
         }
+      } else if (msg.type === 'new-session') {
+        // 开启新会话：杀掉当前进程，重新启动不带 session 参数的 opencode
+        const mode = currentMode;
+        console.log(`[new-session] 开启新会话, mode=${mode}`);
+        if (mode === 'opencode' && opencodeProcess) {
+          try { opencodeProcess.kill(); } catch {}
+          opencodeProcess = null;
+          currentProcess = null;
+        } else if (mode === 'claude' && claudeProcess) {
+          try { claudeProcess.kill(); } catch {}
+          claudeProcess = null;
+          currentProcess = null;
+        }
+        outputBuffer = '';
+        await new Promise(resolve => setTimeout(resolve, 200));
+        // 先通知前端准备好，再启动新进程
+        ws.send(JSON.stringify({ type: 'new-session-ok', mode }));
+        try {
+          await spawnProcess(mode);
+        } catch (e) {
+          console.error('[new-session] 启动失败:', e.message);
+          ws.send(JSON.stringify({ type: 'new-session-error', error: e.message }));
+        }
       }
     } catch (err) {
       console.error('[WS] Error:', err.message);