claude-opencode-viewer 2.3.0 → 2.3.1

package/index.html

@@ -116,6 +116,10 @@
       align-items: center;
       justify-content: center;
       border: none;
+      outline: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
     }
 
     .virtual-key:active {
@@ -143,14 +147,16 @@
       <div id="terminal-container">
         <div id="terminal"></div>
         <div id="virtual-keybar">
-          <button class="virtual-key" data-key="up">↑</button>
-          <button class="virtual-key" data-key="down">↓</button>
-          <button class="virtual-key" data-key="left">←</button>
-          <button class="virtual-key" data-key="right">→</button>
-          <button class="virtual-key" data-key="enter">Enter</button>
-          <button class="virtual-key" data-key="tab">Tab</button>
-          <button class="virtual-key" data-key="esc">Esc</button>
-          <button class="virtual-key" data-key="ctrlc">Ctrl+C</button>
+          <div class="virtual-key" data-key="up">↑</div>
+          <div class="virtual-key" data-key="down">↓</div>
+          <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="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 scroll-key" data-scroll="-5">⇡ 滚动</div>
+          <div class="virtual-key scroll-key" data-scroll="5">⇣ 滚动</div>
         </div>
       </div>
     </div>
@@ -197,6 +203,53 @@
       var momentumRaf = null;
       var velocitySamples = [];
 
+      // 未发送消息缓存
+      var currentInputBuffer = '';
+      var CACHE_KEY = 'claude_opencode_input_cache';
+      var cacheRestored = false; // 防止重复恢复
+
+      function saveInputCache() {
+        if (currentInputBuffer) {
+          localStorage.setItem(CACHE_KEY, currentInputBuffer);
+          console.log('[cache] saved:', currentInputBuffer);
+        } else {
+          localStorage.removeItem(CACHE_KEY);
+        }
+      }
+
+      function loadInputCache() {
+        // 确保只恢复一次
+        if (cacheRestored) {
+          console.log('[cache] already restored, skipping');
+          return;
+        }
+
+        var cached = localStorage.getItem(CACHE_KEY);
+        if (cached && ws && ws.readyState === 1) {
+          console.log('[cache] restoring:', cached);
+          // 立即清除缓存，防止重复调用
+          localStorage.removeItem(CACHE_KEY);
+          cacheRestored = true;
+
+          // 将缓存的输入发送到终端
+          ws.send(JSON.stringify({ type: 'input', data: cached }));
+          // 重要：恢复后清空 currentInputBuffer，防止再次保存
+          currentInputBuffer = '';
+        } else {
+          console.log('[cache] no cache to restore');
+        }
+      }
+
+      function clearInputCache() {
+        currentInputBuffer = '';
+        localStorage.removeItem(CACHE_KEY);
+        console.log('[cache] cleared');
+      }
+
+      function getCellDims() {
+        return term._core && term._core._renderService && term._core._renderService.dimensions && term._core._renderService.dimensions.css && term._core._renderService.dimensions.css.cell;
+      }
+
       // 参考 cc-viewer 的 App.jsx 行 76-94: iOS visualViewport 处理
       // iOS 虚拟键盘弹出时，Safari 会滚动整个文档将页面上推，
       // 导致导航栏消失在视口之外。通过 visualViewport 的 resize + scroll
@@ -218,10 +271,6 @@
         onVVChange();
       }
 
-      function getCellDims() {
-        return term._core && term._core._renderService && term._core._renderService.dimensions && term._core._renderService.dimensions.css && term._core._renderService.dimensions.css.cell;
-      }
-
       // 参考 cc-viewer 的 TerminalPanel.jsx 行 410-447: 移动端固定尺寸计算
       function mobileFixedResize() {
         if (!term) return;
@@ -302,109 +351,187 @@
         pixelAccum = 0;
       }
 
-      // 参考 cc-viewer 的 TerminalPanel.jsx 行 172-309: 移动端触摸滚动完整实现
+      // OpenCode 模式触摸滚动实现 - 使用 xterm.js scrollLines API
+      var touchScreen = null;
+      var touchEventsBound = false;
+
+      function getLineHeight() {
+        var cellDims = getCellDims();
+        var height = (cellDims && cellDims.height) || 15;
+        console.log('[scroll] lineHeight:', height);
+        return height;
+      }
+
+      function stopMomentum() {
+        if (momentumRaf) {
+          cancelAnimationFrame(momentumRaf);
+          momentumRaf = null;
+        }
+        if (scrollRaf) {
+          cancelAnimationFrame(scrollRaf);
+          scrollRaf = null;
+        }
+        pendingDy = 0;
+        pixelAccum = 0;
+      }
+
       function flushScroll() {
         scrollRaf = null;
         if (pendingDy === 0) return;
+
         pixelAccum += pendingDy;
         pendingDy = 0;
-        var cellDims = getCellDims();
-        var lh = (cellDims && cellDims.height) || 15;
+
+        var lh = getLineHeight();
         var lines = Math.trunc(pixelAccum / lh);
+
         if (lines !== 0) {
+          console.log('[scroll] scrollLines:', lines, 'pixelAccum:', pixelAccum, 'lineHeight:', lh);
           term.scrollLines(lines);
           pixelAccum -= lines * lh;
         }
       }
 
-      if (isMobile) {
-        setTimeout(function() {
-          var screen = document.querySelector('.xterm-screen');
-          if (!screen) return;
-
-          screen.addEventListener('touchstart', function(e) {
-            stopMomentum();
-            if (e.touches.length !== 1) return;
-            lastY = e.touches[0].clientY;
-            lastTime = performance.now();
-            velocitySamples = [];
-          }, { passive: true });
+      function handleTouchStart(e) {
+        console.log('[scroll] touchstart');
+        stopMomentum();
+        if (e.touches.length !== 1) return;
+        lastY = e.touches[0].clientY;
+        lastTime = performance.now();
+        velocitySamples = [];
+      }
 
-          screen.addEventListener('touchmove', function(e) {
-            if (e.touches.length !== 1) return;
-            var y = e.touches[0].clientY;
-            var now = performance.now();
-            var dt = now - lastTime;
-            var dy = lastY - y;
-            if (dt > 0) {
-              var v = dy / dt * 16;
-              velocitySamples.push({ v: v, t: now });
-              while (velocitySamples.length > 0 && now - velocitySamples[0].t > 100) {
-                velocitySamples.shift();
-              }
-            }
-            pendingDy += dy;
-            if (!scrollRaf) scrollRaf = requestAnimationFrame(flushScroll);
-            lastY = y;
-            lastTime = now;
-          }, { passive: true });
+      function handleTouchMove(e) {
+        if (e.touches.length !== 1) return;
+        var y = e.touches[0].clientY;
+        var now = performance.now();
+        var dt = now - lastTime;
+        var dy = lastY - y;
+
+        if (dt > 0) {
+          var v = dy / dt * 16;
+          velocitySamples.push({ v: v, t: now });
+          while (velocitySamples.length > 0 && now - velocitySamples[0].t > 100) {
+            velocitySamples.shift();
+          }
+        }
 
-          screen.addEventListener('touchend', function() {
-            if (scrollRaf) {
-              cancelAnimationFrame(scrollRaf);
-              scrollRaf = null;
-            }
-            if (pendingDy !== 0) {
-              pixelAccum += pendingDy;
-              pendingDy = 0;
-              var cellDims = getCellDims();
-              var lh = (cellDims && cellDims.height) || 15;
-              var lines = Math.trunc(pixelAccum / lh);
-              if (lines !== 0) term.scrollLines(lines);
-              pixelAccum = 0;
-            }
+        pendingDy += dy;
+        console.log('[scroll] touchmove dy:', dy, 'pendingDy:', pendingDy);
 
-            var velocity = 0;
-            if (velocitySamples.length >= 2) {
-              var totalWeight = 0;
-              var weightedV = 0;
-              var latest = velocitySamples[velocitySamples.length - 1].t;
-              for (var i = 0; i < velocitySamples.length; i++) {
-                var s = velocitySamples[i];
-                var w = Math.max(0, 1 - (latest - s.t) / 100);
-                weightedV += s.v * w;
-                totalWeight += w;
-              }
-              velocity = totalWeight > 0 ? weightedV / totalWeight : 0;
+        if (!scrollRaf) scrollRaf = requestAnimationFrame(flushScroll);
+        lastY = y;
+        lastTime = now;
+      }
+
+      function handleTouchEnd() {
+        console.log('[scroll] touchend');
+
+        if (scrollRaf) {
+          cancelAnimationFrame(scrollRaf);
+          scrollRaf = null;
+        }
+
+        if (pendingDy !== 0) {
+          pixelAccum += pendingDy;
+          pendingDy = 0;
+          var lh = getLineHeight();
+          var lines = Math.trunc(pixelAccum / lh);
+          if (lines !== 0) {
+            console.log('[scroll] final scrollLines:', lines);
+            term.scrollLines(lines);
+          }
+          pixelAccum = 0;
+        }
+
+        var velocity = 0;
+        if (velocitySamples.length >= 2) {
+          var totalWeight = 0;
+          var weightedV = 0;
+          var latest = velocitySamples[velocitySamples.length - 1].t;
+          for (var i = 0; i < velocitySamples.length; i++) {
+            var s = velocitySamples[i];
+            var w = Math.max(0, 1 - (latest - s.t) / 100);
+            weightedV += s.v * w;
+            totalWeight += w;
+          }
+          velocity = totalWeight > 0 ? weightedV / totalWeight : 0;
+        }
+        velocitySamples = [];
+
+        console.log('[scroll] velocity:', velocity);
+        if (Math.abs(velocity) < 0.5) return;
+
+        var friction = 0.95;
+        var mAccum = 0;
+        var tick = function() {
+          if (Math.abs(velocity) < 0.3) {
+            var lh = getLineHeight();
+            var rest = Math.round(mAccum / lh);
+            if (rest !== 0) {
+              console.log('[scroll] momentum final:', rest);
+              term.scrollLines(rest);
             }
-            velocitySamples = [];
-
-            if (Math.abs(velocity) < 0.5) return;
-            var friction = 0.95;
-            var mAccum = 0;
-            var tick = function() {
-              if (Math.abs(velocity) < 0.3) {
-                var cellDims = getCellDims();
-                var lh = (cellDims && cellDims.height) || 15;
-                var rest = Math.round(mAccum / lh);
-                if (rest !== 0) term.scrollLines(rest);
-                momentumRaf = null;
-                return;
-              }
-              mAccum += velocity;
-              var cellDims = getCellDims();
-              var lh = (cellDims && cellDims.height) || 15;
-              var lines = Math.trunc(mAccum / lh);
-              if (lines !== 0) {
-                term.scrollLines(lines);
-                mAccum -= lines * lh;
-              }
-              velocity *= friction;
-              momentumRaf = requestAnimationFrame(tick);
-            };
-            momentumRaf = requestAnimationFrame(tick);
-          }, { passive: true });
-        }, 100);
+            momentumRaf = null;
+            return;
+          }
+          mAccum += velocity;
+          var lh = getLineHeight();
+          var lines = Math.trunc(mAccum / lh);
+          if (lines !== 0) {
+            term.scrollLines(lines);
+            mAccum -= lines * lh;
+          }
+          velocity *= friction;
+          momentumRaf = requestAnimationFrame(tick);
+        };
+        momentumRaf = requestAnimationFrame(tick);
+      }
+
+      function unbindTouchScroll() {
+        if (touchScreen && touchEventsBound) {
+          console.log('[scroll] unbinding touch events');
+          touchScreen.removeEventListener('touchstart', handleTouchStart);
+          touchScreen.removeEventListener('touchmove', handleTouchMove);
+          touchScreen.removeEventListener('touchend', handleTouchEnd);
+          touchEventsBound = false;
+          touchScreen = null;
+        }
+      }
+
+      function setupMobileTouchScroll() {
+        // 先解绑旧的
+        unbindTouchScroll();
+
+        // 只在 opencode 模式下绑定
+        if (currentMode !== 'opencode') {
+          console.log('[scroll] Not opencode mode, skip binding');
+          return;
+        }
+
+        var screen = terminalEl.querySelector('.xterm-screen');
+        if (!screen) {
+          console.log('[scroll] .xterm-screen not found, retrying...');
+          setTimeout(setupMobileTouchScroll, 50);
+          return;
+        }
+
+        touchScreen = screen;
+        screen.addEventListener('touchstart', handleTouchStart, { passive: true });
+        screen.addEventListener('touchmove', handleTouchMove, { passive: true });
+        screen.addEventListener('touchend', handleTouchEnd, { passive: true });
+        touchEventsBound = true;
+        console.log('[scroll] Touch events bound to .xterm-screen (opencode mode)');
+      }
+
+      function rebindTouchScroll() {
+        if (isMobile) {
+          setTimeout(setupMobileTouchScroll, 100);
+        }
+      }
+
+      if (isMobile) {
+        setupMobileTouchScroll();
       }
 
       function startTransition() {
@@ -452,6 +579,8 @@
             else if (msg.type === 'exit') throttledWrite('\r\n[进程已退出: ' + msg.exitCode + ']\r\n');
             else if (msg.type === 'mode') {
               endTransition(msg.mode);
+              // 模式切换完成后，重新绑定触摸事件
+              rebindTouchScroll();
             }
             else if (msg.type === 'switching') {
               // 服务端开始切换，前端清屏
@@ -469,12 +598,49 @@
         };
 
         term.onData(function(d) {
-          if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data: d }));
+          if (ws && ws.readyState === 1) {
+            ws.send(JSON.stringify({ type: 'input', data: d }));
+
+            // 缓存管理：跟踪当前行的输入（仅在 opencode 模式且未在恢复中）
+            if (currentMode === 'opencode' && cacheRestored) {
+              if (d === '\r' || d === '\n' || d === '\r\n') {
+                // 回车：命令已发送，清除缓存
+                clearInputCache();
+              } else if (d === '\x7f' || d === '\b') {
+                // 退格：删除最后一个字符
+                if (currentInputBuffer.length > 0) {
+                  currentInputBuffer = currentInputBuffer.slice(0, -1);
+                  saveInputCache();
+                }
+              } else if (d === '\x03') {
+                // Ctrl+C：中断，清除缓存
+                clearInputCache();
+              } else if (d === '\x15') {
+                // Ctrl+U：清空整行
+                clearInputCache();
+              } else if (d.length === 1 && d.charCodeAt(0) >= 32 && d.charCodeAt(0) < 127) {
+                // 可打印 ASCII 字符：添加到缓冲区
+                currentInputBuffer += d;
+                saveInputCache();
+              }
+            }
+          }
+
           // 点击终端输入时，滚动到底部
           setTimeout(function() {
             window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
           }, 50);
         });
+
+        // 页面加载后尝试恢复缓存的输入（仅在 opencode 模式）
+        setTimeout(function() {
+          if (currentMode === 'opencode') {
+            loadInputCache();
+          } else {
+            // 非 opencode 模式，标记为已恢复，避免后续缓存逻辑干扰
+            cacheRestored = true;
+          }
+        }, 800);
       }
 
       window.addEventListener('resize', resize);
@@ -484,6 +650,20 @@
         });
       }
 
+      // 页面卸载前保存输入缓存
+      window.addEventListener('beforeunload', function() {
+        if (currentInputBuffer) {
+          saveInputCache();
+        }
+      });
+
+      // 页面可见性变化时保存缓存
+      document.addEventListener('visibilitychange', function() {
+        if (document.hidden && currentInputBuffer) {
+          saveInputCache();
+        }
+      });
+
       // 虚拟按键映射表
       var KEY_MAP = {
         'up': '\x1b[A',
@@ -503,42 +683,123 @@
         }
       }
 
+      function scrollTerminal(lines) {
+        if (term) {
+          term.scrollLines(lines);
+          console.log('[scroll] scrolled by:', lines);
+        }
+      }
+
       // 参考 cc-viewer 的 TerminalPanel.jsx 行 519-546: 虚拟按键触摸处理
-      var keybar = document.getElementById('virtual-keybar');
+      // 每个按键独立绑定事件，不在容器上绑定
       var vkStartX = 0, vkStartY = 0, vkMoved = false, vkTarget = null;
+      var scrollInterval = null; // 长按滚动定时器
+
+      function setupVirtualKeyEvents() {
+        var keys = document.querySelectorAll('.virtual-key');
+        keys.forEach(function(key) {
+          // 防止元素获得焦点
+          key.setAttribute('tabindex', '-1');
+
+          // 移动端触摸事件
+          key.addEventListener('touchstart', function(e) {
+            var touch = e.touches[0];
+            vkStartX = touch.clientX;
+            vkStartY = touch.clientY;
+            vkMoved = false;
+            vkTarget = e.currentTarget;
+            vkTarget.style.background = '#333';
+
+            // 如果是滚动按钮，阻止默认行为（防止键盘弹出）并启动持续滚动
+            var scrollLines = e.currentTarget.getAttribute('data-scroll');
+            if (scrollLines) {
+              e.preventDefault(); // 关键：阻止默认行为，防止键盘弹出
+              scrollTerminal(parseInt(scrollLines, 10));
+              scrollInterval = setInterval(function() {
+                scrollTerminal(parseInt(scrollLines, 10));
+              }, 100);
+            }
+          }, { passive: false }); // 必须是 false 才能调用 preventDefault()
+
+          key.addEventListener('touchmove', function(e) {
+            if (vkMoved) return;
+            var touch = e.touches[0];
+            var dx = touch.clientX - vkStartX;
+            var dy = touch.clientY - vkStartY;
+            if (dx * dx + dy * dy > 64) { // 8px 阈值
+              vkMoved = true;
+              if (vkTarget) {
+                vkTarget.style.background = '';
+              }
+            }
+          }, { passive: true });
 
-      keybar.addEventListener('touchstart', function(e) {
-        if (!e.target.classList.contains('virtual-key')) return;
-        e.preventDefault();
-        var touch = e.touches[0];
-        vkStartX = touch.clientX;
-        vkStartY = touch.clientY;
-        vkMoved = false;
-        vkTarget = e.target;
-        vkTarget.style.background = '#333';
-      });
+          key.addEventListener('touchend', function(e) {
+            // 清除滚动定时器
+            if (scrollInterval) {
+              clearInterval(scrollInterval);
+              scrollInterval = null;
+            }
 
-      keybar.addEventListener('touchmove', function(e) {
-        if (vkMoved) return;
-        var touch = e.touches[0];
-        var dx = touch.clientX - vkStartX;
-        var dy = touch.clientY - vkStartY;
-        if (dx * dx + dy * dy > 64) {
-          vkMoved = true;
-        }
-      });
+            if (vkTarget) {
+              vkTarget.style.background = '';
+              vkTarget = null;
+            }
 
-      keybar.addEventListener('touchend', function(e) {
-        e.preventDefault();
-        if (vkTarget) {
-          vkTarget.style.background = '';
-          vkTarget = null;
-        }
-        if (!vkMoved && e.target.classList.contains('virtual-key')) {
-          var keyName = e.target.getAttribute('data-key');
-          sendKey(keyName);
-        }
-      });
+            // 如果没有移动，触发按键功能并阻止默认行为
+            if (!vkMoved) {
+              e.preventDefault(); // 阻止默认行为
+              var scrollLines = e.currentTarget.getAttribute('data-scroll');
+              if (!scrollLines) {
+                // 非滚动按钮才触发按键
+                var keyName = e.currentTarget.getAttribute('data-key');
+                sendKey(keyName);
+              }
+            }
+          }, { passive: false });
+
+          // PC端点击支持
+          key.addEventListener('click', function(e) {
+            e.preventDefault();
+            var scrollLines = e.currentTarget.getAttribute('data-scroll');
+            if (scrollLines) {
+              scrollTerminal(parseInt(scrollLines, 10));
+            } else {
+              var keyName = e.currentTarget.getAttribute('data-key');
+              sendKey(keyName);
+            }
+          });
+          
+          // PC端鼠标按下支持（长按滚动）
+          key.addEventListener('mousedown', function(e) {
+            e.preventDefault();
+            var scrollLines = e.currentTarget.getAttribute('data-scroll');
+            if (scrollLines) {
+              scrollTerminal(parseInt(scrollLines, 10));
+              scrollInterval = setInterval(function() {
+                scrollTerminal(parseInt(scrollLines, 10));
+              }, 100);
+            }
+          });
+          
+          key.addEventListener('mouseup', function(e) {
+            if (scrollInterval) {
+              clearInterval(scrollInterval);
+              scrollInterval = null;
+            }
+          });
+          
+          key.addEventListener('mouseleave', function(e) {
+            if (scrollInterval) {
+              clearInterval(scrollInterval);
+              scrollInterval = null;
+            }
+          });
+        });
+      }
+
+      // 初始化虚拟按键事件
+      setupVirtualKeyEvents();
 
       connect();
       setTimeout(resize, 100);

package/package.json

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