npm - claude-opencode-viewer - Versions diffs - 2.0.0 → 2.1.0 - Mend

claude-opencode-viewer 2.0.0 → 2.1.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

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
-  <title>Combined Viewer V2</title>
+  <title>Claude OpenCode Viewer</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -80,17 +80,20 @@
       border-top: 1px solid #222;
       flex-shrink: 0;
     }
-    #virtual-keybar-row1, #virtual-keybar-row2 {
+    #virtual-keybar-row {
       display: flex;
       gap: 6px;
-      padding: 6px 8px;
-      justify-content: center;
-      flex-wrap: wrap;
+      padding: 8px 10px;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
     }
-    #virtual-keybar-row1 button, #virtual-keybar-row2 button {
-      flex: 1;
-      min-width: 48px;
-      max-width: 80px;
+    #virtual-keybar-row::-webkit-scrollbar {
+      display: none;
+    }
+    #virtual-keybar-row button {
+      flex-shrink: 0;
+      min-width: 56px;
       height: 40px;
       border: 1px solid #333;
       border-radius: 6px;
@@ -98,11 +101,36 @@
       color: #ccc;
       font-size: 13px;
       touch-action: manipulation;
+      white-space: nowrap;
+    }
+    #virtual-keybar-row button:active {
+      background: #333;
+    }
+    #input-bar {
+      display: none;
+      background: #111;
+      border-top: 1px solid #222;
+      flex-shrink: 0;
+      padding: 8px 10px;
+    }
+    #input-bar input {
+      width: 100%;
+      padding: 10px 12px;
+      background: #1a1a1a;
+      border: 1px solid #333;
+      border-radius: 6px;
+      color: #d4d4d4;
+      font-size: 14px;
+      font-family: Menlo, Monaco, monospace;
+      outline: none;
+    }
+    #input-bar input:focus {
+      border-color: #4ade80;
     }
-    #virtual-keybar-row1 button:active, #virtual-keybar-row2 button:active { background: #333; }
     @media (max-width: 768px) {
       #mode-switcher { display: block; }
       #virtual-keybar { display: block; }
+      #input-bar { display: block; }
     }
   </style>
 </head>
@@ -119,23 +147,21 @@
       <option value="opencode">OpenCode</option>
     </select>
   </div>
+  <div id="input-bar">
+    <input type="text" id="input-field" placeholder="输入命令..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
+  </div>
   <div id="virtual-keybar">
-    <div id="virtual-keybar-row1">
-      <button data-key="&#x1b;[A">↑</button>
-      <button data-key="&#x1b;[B">↓</button>
-      <button data-key="&#x1b;[D">←</button>
-      <button data-key="&#x1b;[C">→</button>
-      <button data-key="
-">Enter</button>
-      <button data-key="&#x1b;">Esc</button>
-    </div>
-    <div id="virtual-keybar-row2">
-      <button data-key="&#x7f;">⌫</button>
-      <button data-key="&#x03;">^C</button>
-      <button data-key="&#x04;">^D</button>
-      <button data-key=" ">Space</button>
-      <button data-key="	">Tab</button>
+    <div id="virtual-keybar-row">
+      <button data-key="up">↑</button>
+      <button data-key="down">↓</button>
+      <button data-key="left">←</button>
+      <button data-key="right">→</button>
+      <button data-key="enter">Enter</button>
+      <button data-key="esc">Esc</button>
+      <button data-key="ctrlc">^C</button>
+      <button data-key="tab">Tab</button>
     </div>
   </div>
@@ -437,6 +463,10 @@
         term.onData(function(d) {
           if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data: d }));
+          // 点击终端输入时，滚动到底部
+          setTimeout(function() {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+          }, 50);
         });
       }
@@ -445,11 +475,141 @@
         window.addEventListener('orientationchange', function() { setTimeout(resize, 200); });
       }
-      keybar.addEventListener('click', function(e) {
-        if (e.target.tagName === 'BUTTON' && ws && ws.readyState === 1 && !isTransitioning) {
-          ws.send(JSON.stringify({ type: 'input', data: e.target.getAttribute('data-key') }));
+      // 输入框状态
+      var inputField = document.getElementById('input-field');
+      var inputFocused = false;
+      if (inputField) {
+        // 跟踪输入框焦点状态
+        inputField.addEventListener('focus', function() {
+          inputFocused = true;
+          // iOS 上需要临时恢复 body 滚动能力
+          if (isIOS && document.body.style.position === 'fixed') {
+            var scrollTop = -parseFloat(document.body.style.top || '0');
+            document.body.style.position = '';
+            document.body.style.top = '';
+            window.scrollTo(0, document.body.scrollHeight);
+            // 恢复 fixed 定位
+            setTimeout(function() {
+              document.body.style.position = 'fixed';
+              document.body.style.top = '-' + scrollTop + 'px';
+            }, 300);
+          } else {
+            window.scrollTo(0, document.body.scrollHeight);
+          }
+        });
+        inputField.addEventListener('blur', function() {
+          inputFocused = false;
+        });
+        // 输入框回车处理
+        inputField.addEventListener('keydown', function(e) {
+          if (e.key === 'Enter' && ws && ws.readyState === 1 && !isTransitioning) {
+            var value = inputField.value;
+            if (value) {
+              console.log('[input enter] sending:', value);
+              ws.send(JSON.stringify({ type: 'input', data: value + '\r' }));
+              inputField.value = '';
+            }
+            e.preventDefault();
+          }
+        });
+        // 移动端触摸输入框时阻止终端获焦
+        if (isMobile) {
+          inputField.addEventListener('touchstart', function(e) {
+            e.stopPropagation();
+          }, { passive: true });
         }
-      });
+      }
+      // 虚拟按键映射表
+      var KEY_MAP = {
+        'up': '\x1b[A',
+        'down': '\x1b[B',
+        'left': '\x1b[D',
+        'right': '\x1b[C',
+        'esc': '\x1b',
+        'ctrlc': '\x03',
+        'tab': '\t'
+      };
+      function sendKey(keyName) {
+        // Enter 键特殊处理：根据焦点位置决定行为
+        if (keyName === 'enter') {
+          if (inputFocused && inputField && inputField.value) {
+            // 焦点在输入框且有内容：只发送输入框内容，不额外发送 \r
+            var value = inputField.value;
+            console.log('[enter] from input:', value);
+            ws.send(JSON.stringify({ type: 'input', data: value + '\r' }));
+            inputField.value = '';
+            // 让输入框失去焦点，防止终端 textarea 同时收到输入
+            inputField.blur();
+          } else if (inputFocused && inputField) {
+            // 焦点在输入框但内容为空：不发送任何内容，避免误触
+            console.log('[enter] input focused but empty, ignored');
+          } else {
+            // 焦点在终端：直接发送回车
+            console.log('[enter] sending \\r to terminal');
+            ws.send(JSON.stringify({ type: 'input', data: '\r' }));
+          }
+          return;
+        }
+        // 其他按键直接发送
+        var key = KEY_MAP[keyName];
+        if (key && ws && ws.readyState === 1 && !isTransitioning) {
+          console.log('[sendKey] sending:', keyName, '->', key);
+          ws.send(JSON.stringify({ type: 'input', data: key }));
+        } else {
+          console.log('[sendKey] skipped:', keyName, 'ws:', ws?.readyState, 'transitioning:', isTransitioning);
+        }
+      }
+      // 虚拟按键处理：PC 端用 click，移动端用 touch
+      if (isMobile) {
+        // 移动端：使用触摸事件，区分点击和拖动（滑动）
+        var vkStartX = 0, vkStartY = 0, vkMoved = false;
+        keybar.addEventListener('touchstart', function(e) {
+          if (e.target.tagName !== 'BUTTON') return;
+          var touch = e.touches[0];
+          vkStartX = touch.clientX;
+          vkStartY = touch.clientY;
+          vkMoved = false;
+          e.target.style.background = '#333';
+        }, { passive: true });
+        keybar.addEventListener('touchmove', function(e) {
+          if (e.target.tagName !== 'BUTTON') return;
+          if (vkMoved) return;
+          var touch = e.touches[0];
+          var dx = touch.clientX - vkStartX;
+          var dy = touch.clientY - vkStartY;
+          if (dx * dx + dy * dy > 100) { // 10px 阈值，允许横向滑动
+            vkMoved = true;
+          }
+        }, { passive: true });
+        keybar.addEventListener('touchend', function(e) {
+          if (e.target.tagName !== 'BUTTON') return;
+          e.preventDefault();
+          e.target.style.background = '';
+          if (!vkMoved) {
+            var keyName = e.target.getAttribute('data-key');
+            sendKey(keyName);
+          }
+        }, { passive: false });
+      } else {
+        // PC 端：直接用 click
+        keybar.addEventListener('click', function(e) {
+          if (e.target.tagName === 'BUTTON') {
+            var keyName = e.target.getAttribute('data-key');
+            sendKey(keyName);
+          }
+        });
+      }
       connect();
       setTimeout(resize, 100);

package/package.json CHANGED Viewed

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

package/server.js CHANGED Viewed

@@ -8,6 +8,9 @@ import { chmodSync, statSync } from 'node:fs';
 import { execSync } from 'child_process';
 import { WebSocketServer } from 'ws';
+// 设置进程名为 claude-opencode-viewer
+process.title = 'claude-opencode-viewer';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PORT = 7008;