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

claude-opencode-viewer 2.0.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 (6) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,101 @@
+# Claude OpenCode Viewer
+一个统一的终端查看器，支持 **Claude Code** 和 **OpenCode** 之间的无缝切换。
+## ✨ 特性
+- 🔄 **无缝切换** - 在 Claude Code 和 OpenCode 之间丝滑切换
+- 📱 **移动优先** - 支持移动端访问，配备虚拟键盘
+- 🚀 **快速启动** - 通过简单的 `cov` 命令即可启动
+- 🌐 **局域网访问** - 支持手机等移动设备访问
+## 📦 安装
+### 方式一：npm 全局安装（推荐）
+```bash
+npm install -g claude-opencode-viewer
+```
+### 方式二：使用 npx 直接运行
+```bash
+npx claude-opencode-viewer
+```
+### 方式三：从源码安装
+```bash
+git clone <repository-url>
+cd claude_opencode_viewer
+npm install
+npm link
+```
+## 🚀 使用方法
+### 启动服务
+```bash
+# 在当前目录启动
+cov
+# 在指定目录启动
+cov /path/to/project
+# 查看帮助
+cov --help
+```
+### 访问界面
+启动后，在浏览器中访问：
+- **本地访问**: http://127.0.0.1:7008
+- **手机访问**: http://<本机 IP>:7008
+### 切换模式
+在界面底部可以选择切换到：
+- **Claude Code** - Anthropic 的 AI 编程助手
+- **OpenCode** - 开源 AI 编程工具
+## 📋 系统要求
+- Node.js >= 16.0.0
+- macOS / Linux / Windows
+- 需要预先安装 `claude` 或 `opencode` 命令
+## 🔧 开发
+```bash
+# 安装依赖
+npm install
+# 启动服务
+npm start
+# 本地测试全局命令
+npm link
+```
+## 📝 命令说明
+| 命令 | 说明 |
+|------|------|
+| `cov` | 启动服务 |
+| `cov [路径]` | 在指定目录启动服务 |
+| `cov --help` | 显示帮助信息 |
+| `cov --version` | 显示版本号 |
+## 🎮 移动端使用
+在移动设备上访问时，界面会自动适配：
+- 虚拟方向键
+- 常用控制键（Esc、Tab、Ctrl+C 等）
+- 模式切换选择器
+- 惯性滚动支持
+## 📄 License
+MIT

package/bin/cov.js ADDED Viewed

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+/**
+ * cov - Claude OpenCode Viewer 启动命令
+ *
+ * 使用方法:
+ *   cov              # 在当前目录启动
+ *   cov [path]       # 在指定目录启动
+ *   cov --help       # 显示帮助信息
+ */
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+import { existsSync } from 'node:fs';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SERVER_PATH = join(__dirname, '..', 'server.js');
+const args = process.argv.slice(2);
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(`
+╔══════════════════════════════════════════════════════════╗
+║         Claude OpenCode Viewer (cov)                     ║
+╠══════════════════════════════════════════════════════════╣
+║  用法：                                                   ║
+║    cov                    在当前目录启动服务               ║
+║    cov [路径]             在指定目录启动服务               ║
+║    cov --help, -h         显示此帮助信息                  ║
+║    cov --version, -v      显示版本号                      ║
+╠══════════════════════════════════════════════════════════╣
+║  功能：                                                   ║
+║    - 同时支持 Claude Code 和 OpenCode                    ║
+║    - 丝滑切换两个 AI 终端                                 ║
+║    - 支持移动端访问                                       ║
+╠══════════════════════════════════════════════════════════╣
+║  访问地址：                                               ║
+║    本地：http://127.0.0.1:7008                           ║
+║    手机：http://<本机 IP>:7008                           ║
+╚══════════════════════════════════════════════════════════╝
+`);
+  process.exit(0);
+}
+if (args.includes('--version') || args.includes('-v')) {
+  const pkgPath = join(__dirname, '..', 'package.json');
+  if (existsSync(pkgPath)) {
+    const pkg = JSON.parse(await import('node:fs').then(m => m.readFileSync(pkgPath, 'utf-8')));
+    console.log(`v${pkg.version}`);
+  }
+  process.exit(0);
+}
+// 如果指定了路径，切换到该目录
+if (args.length > 0 && !args[0].startsWith('-')) {
+  const targetPath = resolve(args[0]);
+  if (existsSync(targetPath)) {
+    process.chdir(targetPath);
+    console.log(`📁 工作目录：${process.cwd()}`);
+  } else {
+    console.error(`❌ 目录不存在：${targetPath}`);
+    process.exit(1);
+  }
+}
+// 启动服务器
+const server = spawn(process.execPath, [SERVER_PATH], {
+  stdio: 'inherit',
+  cwd: process.cwd(),
+});
+server.on('error', (err) => {
+  console.error('❌ 启动失败:', err.message);
+  process.exit(1);
+});
+server.on('exit', (code) => {
+  process.exit(code || 0);
+});

package/index.html ADDED Viewed

@@ -0,0 +1,459 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<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>
+  <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; }
+    html, body { height: 100%; background: #0a0a0a; overflow: hidden; }
+    body {
+      display: flex;
+      flex-direction: column;
+      background: #0a0a0a;
+    }
+    #terminal {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+      padding: 4px 8px;
+      touch-action: none;
+      overscroll-behavior: contain;
+    }
+    #terminal.transitioning {
+      opacity: 0.3;
+      transition: opacity 0.3s ease;
+    }
+    #status {
+      padding: 4px;
+      background: #111;
+      font-size: 12px;
+      color: #888;
+      text-align: center;
+      flex-shrink: 0;
+      height: 32px;
+      line-height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+    #status.connected { color: #4ade80; }
+    #status.disconnected { color: #f87171; }
+    #mode-indicator {
+      font-size: 10px;
+      padding: 2px 6px;
+      background: #222;
+      border-radius: 3px;
+      color: #888;
+    }
+    #mode-switcher {
+      display: none;
+      background: #111;
+      border-top: 1px solid #222;
+      flex-shrink: 0;
+      padding: 6px 8px;
+    }
+    #mode-switcher select {
+      background: #1a1a1a;
+      color: #d4d4d4;
+      border: 1px solid #333;
+      border-radius: 4px;
+      padding: 6px 28px 6px 10px;
+      font-size: 13px;
+      cursor: pointer;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+    }
+    #mode-switcher select:focus {
+      outline: none;
+      border-color: #4ade80;
+    }
+    #virtual-keybar {
+      display: none;
+      background: #111;
+      border-top: 1px solid #222;
+      flex-shrink: 0;
+    }
+    #virtual-keybar-row1, #virtual-keybar-row2 {
+      display: flex;
+      gap: 6px;
+      padding: 6px 8px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    #virtual-keybar-row1 button, #virtual-keybar-row2 button {
+      flex: 1;
+      min-width: 48px;
+      max-width: 80px;
+      height: 40px;
+      border: 1px solid #333;
+      border-radius: 6px;
+      background: #1a1a1a;
+      color: #ccc;
+      font-size: 13px;
+      touch-action: manipulation;
+    }
+    #virtual-keybar-row1 button:active, #virtual-keybar-row2 button:active { background: #333; }
+    @media (max-width: 768px) {
+      #mode-switcher { display: block; }
+      #virtual-keybar { display: block; }
+    }
+  </style>
+</head>
+<body>
+  <div id="terminal"></div>
+  <div id="status" class="disconnected">
+    <span id="status-text">● 未连接</span>
+    <span id="mode-indicator">-</span>
+  </div>
+  <div id="mode-switcher">
+    <select id="mode-select">
+      <option value="claude">Claude Code</option>
+      <option value="opencode">OpenCode</option>
+    </select>
+  </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>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
+  <script>
+    (function() {
+      var isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+      var isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+      var MOBILE_COLS = 60;
+      var fontSize = isMobile ? 11 : 13;
+      var currentMode = 'claude';
+      var isTransitioning = false;
+      var term = new Terminal({
+        cursorBlink: !isMobile,
+        fontSize: fontSize,
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        theme: {
+          background: '#0a0a0a',
+          foreground: '#d4d4d4',
+          cursor: '#d4d4d4',
+          selectionBackground: '#264f78',
+        },
+        allowProposedApi: true,
+        scrollback: isIOS ? 200 : isMobile ? 1000 : 3000,
+        smoothScrollDuration: 0,
+        scrollOnUserInput: true,
+      });
+      term.open(document.getElementById('terminal'));
+      var statusText = document.getElementById('status-text');
+      var modeIndicator = document.getElementById('mode-indicator');
+      var statusEl = document.getElementById('status');
+      var keybar = document.getElementById('virtual-keybar');
+      var modeSelect = document.getElementById('mode-select');
+      var terminalEl = document.getElementById('terminal');
+      var ws = null;
+      var writeBuffer = '';
+      var writeTimer = null;
+      var lastY = 0;
+      var lastTime = 0;
+      var pixelAccum = 0;
+      var pendingDy = 0;
+      var scrollRaf = null;
+      var momentumRaf = null;
+      var velocitySamples = [];
+      if (isIOS && window.visualViewport) {
+        var body = document.body;
+        var onVVChange = function() {
+          var vv = window.visualViewport;
+          body.style.height = vv.height + 'px';
+          body.style.position = 'fixed';
+          body.style.top = '-' + vv.offsetTop + 'px';
+          body.style.width = '100%';
+          setTimeout(mobileFixedResize, 50);
+        };
+        window.visualViewport.addEventListener('resize', onVVChange);
+        window.visualViewport.addEventListener('scroll', onVVChange);
+      }
+      function getCellDims() {
+        return term._core && term._core._renderService && term._core._renderService.dimensions && term._core._renderService.dimensions.css && term._core._renderService.dimensions.css.cell;
+      }
+      function mobileFixedResize() {
+        var cellDims = getCellDims();
+        if (!cellDims || !cellDims.width || !cellDims.height) {
+          setTimeout(mobileFixedResize, 50);
+          return;
+        }
+        var padX = 16;
+        var padY = 8;
+        var topBarHeight = 32;
+        var switcherHeight = isMobile ? 48 : 0;
+        var keybarHeight = isMobile ? 96 : 0;
+        var availW = window.innerWidth - padX;
+        var availH = window.innerHeight - topBarHeight - switcherHeight - keybarHeight - padY;
+        var currentFontSize = term.options.fontSize;
+        var currentCharWidth = cellDims.width;
+        var targetFontSize = Math.floor(currentFontSize * availW / (MOBILE_COLS * currentCharWidth) * 10) / 10;
+        targetFontSize = Math.max(8, targetFontSize);
+        term.options.fontSize = targetFontSize;
+        requestAnimationFrame(function() {
+          var newCellDims = getCellDims();
+          var lineHeight = (newCellDims && newCellDims.height) || cellDims.height;
+          var rows = Math.max(5, Math.min(Math.floor(availH / lineHeight), 100));
+          term.resize(MOBILE_COLS, rows);
+          if (ws && ws.readyState === 1 && !isTransitioning) {
+            ws.send(JSON.stringify({ type: 'resize', cols: MOBILE_COLS, rows: rows, mobile: true }));
+          }
+        });
+      }
+      function pcResize() {
+        var container = document.getElementById('terminal');
+        var cellDims = getCellDims();
+        if (!cellDims) return;
+        var charW = cellDims.width;
+        var charH = cellDims.height;
+        var availW = container.clientWidth - 16;
+        var availH = container.clientHeight - 8;
+        var cols = Math.max(20, Math.floor(availW / charW));
+        var rows = Math.max(10, Math.floor(availH / charH));
+        term.resize(cols, rows);
+        if (ws && ws.readyState === 1 && !isTransitioning) {
+          ws.send(JSON.stringify({ type: 'resize', cols: cols, rows: rows }));
+        }
+      }
+      function resize() {
+        if (isMobile) {
+          mobileFixedResize();
+        } else {
+          pcResize();
+        }
+      }
+      function flushWrite() {
+        if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+        if (!writeBuffer || !term) return;
+        var buf = writeBuffer;
+        writeBuffer = '';
+        term.write(buf);
+      }
+      function throttledWrite(data) {
+        writeBuffer += data;
+        if (!writeTimer) {
+          writeTimer = requestAnimationFrame(flushWrite);
+        }
+      }
+      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) || 16;
+        var lines = Math.trunc(pixelAccum / lh);
+        if (lines !== 0) { term.scrollLines(lines); pixelAccum -= lines * lh; }
+      }
+      if (isMobile) {
+        var screen = document.querySelector('.xterm-screen');
+        if (screen) {
+          screen.addEventListener('touchstart', function(e) {
+            stopMomentum();
+            if (e.touches.length !== 1) return;
+            lastY = e.touches[0].clientY;
+            lastTime = performance.now();
+            velocitySamples = [];
+          }, { passive: true });
+          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 });
+          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) || 16;
+              var lines = Math.trunc(pixelAccum / lh);
+              if (lines !== 0) term.scrollLines(lines);
+              pixelAccum = 0;
+            }
+            var velocity = 0;
+            if (velocitySamples.length >= 2) {
+              var totalWeight = 0, 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 = [];
+            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) || 16;
+                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) || 16;
+              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 });
+        }
+      }
+      function startTransition() {
+        isTransitioning = true;
+        terminalEl.classList.add('transitioning');
+        modeIndicator.textContent = '切换中...';
+      }
+      function endTransition(mode) {
+        currentMode = mode;
+        modeSelect.value = mode;
+        modeIndicator.textContent = mode === 'claude' ? 'Claude' : 'OpenCode';
+        terminalEl.classList.remove('transitioning');
+        isTransitioning = false;
+      }
+      function switchMode(mode) {
+        if (mode === currentMode || !ws || ws.readyState !== 1 || isTransitioning) return;
+        startTransition();
+        ws.send(JSON.stringify({ type: 'switch', mode: mode }));
+      }
+      modeSelect.addEventListener('change', function() {
+        switchMode(modeSelect.value);
+      });
+      function connect() {
+        var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+        ws = new WebSocket(proto + '//' + location.host + '/ws');
+        ws.onopen = function() {
+          statusText.textContent = '● 已连接';
+          statusEl.className = 'connected';
+          resize();
+        };
+        ws.onclose = function() {
+          statusText.textContent = '● 未连接';
+          statusEl.className = 'disconnected';
+          modeIndicator.textContent = '-';
+          ws = null;
+          setTimeout(connect, 2000);
+        };
+        ws.onmessage = function(e) {
+          try {
+            var msg = JSON.parse(e.data);
+            if (msg.type === 'data') throttledWrite(msg.data);
+            else if (msg.type === 'exit') throttledWrite('\r\n[进程已退出: ' + msg.exitCode + ']\r\n');
+            else if (msg.type === 'mode') {
+              endTransition(msg.mode);
+            }
+            else if (msg.type === 'switching') {
+              // 服务端开始切换，前端清屏
+              term.clear();
+              writeBuffer = '';
+            }
+            else if (msg.type === 'state') {
+              if (msg.mode) {
+                currentMode = msg.mode;
+                modeSelect.value = msg.mode;
+                modeIndicator.textContent = msg.mode === 'claude' ? 'Claude' : 'OpenCode';
+              }
+            }
+          } catch(err) {}
+        };
+        term.onData(function(d) {
+          if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data: d }));
+        });
+      }
+      window.addEventListener('resize', resize);
+      if (isMobile) {
+        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') }));
+        }
+      });
+      connect();
+      setTimeout(resize, 100);
+    })();
+  </script>
+</body>
+</html>

package/install.sh ADDED Viewed

@@ -0,0 +1,52 @@
+#!/bin/bash
+# Claude OpenCode Viewer 安装脚本
+# 使用方法：curl -fsSL https://... | bash
+set -e
+echo "🚀 开始安装 Claude OpenCode Viewer..."
+# 检查 Node.js
+if ! command -v node &> /dev/null; then
+    echo "❌ 错误：未找到 Node.js，请先安装 Node.js"
+    echo "   访问：https://nodejs.org/"
+    exit 1
+fi
+NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
+if [ "$NODE_VERSION" -lt 16 ]; then
+    echo "❌ 错误：Node.js 版本过低，需要 >= 16.0.0"
+    echo "   当前版本：$(node -v)"
+    exit 1
+fi
+echo "✅ Node.js 版本检查通过：$(node -v)"
+# 检查 npm
+if ! command -v npm &> /dev/null; then
+    echo "❌ 错误：未找到 npm"
+    exit 1
+fi
+echo "✅ npm 版本：$(npm -v)"
+# 全局安装
+echo "📦 正在全局安装 claude-opencode-viewer..."
+npm install -g claude-opencode-viewer
+echo ""
+echo "✅ 安装完成！"
+echo ""
+echo "╔══════════════════════════════════════════════════════════╗"
+║         使用指南                                              ║
+╠══════════════════════════════════════════════════════════════╣
+║  启动命令：                                                   ║
+║    cov                    # 在当前目录启动                    ║
+║    cov /path/to/project # 在指定目录启动                     ║
+║    cov --help           # 查看帮助                           ║
+╠══════════════════════════════════════════════════════════════╣
+║  访问地址：                                                   ║
+║    http://127.0.0.1:7008                                     ║
+╚══════════════════════════════════════════════════════════════╝
+echo ""
+echo "💡 提示：请确保已安装 claude 或 opencode 命令"

package/package.json ADDED Viewed

@@ -0,0 +1,42 @@
+{
+  "name": "claude-opencode-viewer",
+  "version": "2.0.0",
+  "description": "A unified terminal viewer for Claude Code and OpenCode with seamless switching",
+  "type": "module",
+  "main": "server.js",
+  "bin": {
+    "cov": "bin/cov.js",
+    "claude-opencode-viewer": "bin/cov.js"
+  },
+  "scripts": {
+    "start": "node server.js",
+    "postinstall": "node -e \"console.log('\\n✅ claude-opencode-viewer 安装成功！\\n\\n使用方法:\\n  - 全局启动：cov\\n  - 或通过 npm 启动：npx cov\\n')\""
+  },
+  "keywords": [
+    "claude",
+    "opencode",
+    "terminal",
+    "viewer",
+    "cli",
+    "ai",
+    "claude-code",
+    "opencode-cli"
+  ],
+  "author": "chrisjason12138",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ChrisJason121238/claude-opencode-viewer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ChrisJason121238/claude-opencode-viewer/issues"
+  },
+  "homepage": "https://github.com/ChrisJason121238/claude-opencode-viewer#readme",
+  "dependencies": {
+    "node-pty": "^1.1.0",
+    "ws": "^8.19.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/server.js ADDED Viewed

@@ -0,0 +1,309 @@
+#!/usr/bin/env node
+import { createServer } from 'node:http';
+import { existsSync, createReadStream } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { networkInterfaces, platform, arch } from 'node:os';
+import { chmodSync, statSync } from 'node:fs';
+import { execSync } from 'child_process';
+import { WebSocketServer } from 'ws';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PORT = 7008;
+const MAX_BUFFER = 200000;
+let ptyModule = null;
+let claudeProcess = null;
+let opencodeProcess = null;
+let currentProcess = null;
+let currentMode = 'claude';
+let outputBuffer = '';
+const dataListeners = [];
+const exitListeners = [];
+let lastPtyCols = 120;
+let lastPtyRows = 30;
+let activeWs = null;
+const clientSizes = new Map();
+const mobileClients = new Set();
+function getMobileSize() {
+  for (const mws of mobileClients) {
+    if (mws.readyState === 1) {
+      const size = clientSizes.get(mws);
+      if (size) return size;
+    }
+  }
+  return null;
+}
+async function getPty() {
+  if (!ptyModule) {
+    ptyModule = await import('node-pty');
+    ptyModule = ptyModule.default || ptyModule;
+  }
+  return ptyModule;
+}
+function fixSpawnHelperPermissions() {
+  try {
+    const helperPath = join(__dirname, 'node_modules', 'node-pty', 'prebuilds', `${platform()}-${arch()}`, 'spawn-helper');
+    const stat = statSync(helperPath);
+    if (!(stat.mode & 0o111)) {
+      chmodSync(helperPath, stat.mode | 0o755);
+    }
+  } catch { }
+}
+function getLocalIp() {
+  const nets = networkInterfaces();
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name]) {
+      if (net.family === 'IPv4' && !net.internal) return net.address;
+    }
+  }
+  return '127.0.0.1';
+}
+function findCommand(cmd) {
+  const paths = [
+    cmd,
+    '/opt/homebrew/bin/' + cmd,
+    '/usr/local/bin/' + cmd,
+    '/usr/bin/' + cmd,
+    join(process.env.HOME, '.local/bin/' + cmd),
+    join(process.env.HOME, '.npm-global/lib/node_modules/@anthropic-ai/claude-code/cli.js'),
+  ];
+  for (const p of paths) {
+    if (p === 'opencode' && existsSync(p)) return p;
+    if (p === 'claude' && existsSync(p)) return p;
+    if (p === 'claude' && p.includes('@anthropic-ai')) {
+      try {
+        return execSync(`which claude`, { encoding: 'utf8' }).trim();
+      } catch {}
+    }
+  }
+  try {
+    return execSync(`which ${cmd}`, { encoding: 'utf8' }).trim();
+  } catch {}
+  return cmd;
+}
+async function spawnProcess(mode) {
+  const pty = await getPty();
+  fixSpawnHelperPermissions();
+  let command, args = [];
+  if (mode === 'claude') {
+    const claudePath = findCommand('claude');
+    if (claudePath.endsWith('.js')) {
+      command = process.execPath;
+      args = [claudePath];
+    } else {
+      command = claudePath;
+    }
+  } else {
+    command = findCommand('opencode');
+  }
+  const proc = pty.spawn(command, args, {
+    name: 'xterm-256color',
+    cols: lastPtyCols,
+    rows: lastPtyRows,
+    cwd: process.cwd(),
+    env: { ...process.env },
+  });
+  proc.onData((data) => {
+    outputBuffer += data;
+    if (outputBuffer.length > MAX_BUFFER) {
+      outputBuffer = outputBuffer.slice(-MAX_BUFFER);
+    }
+    dataListeners.forEach(cb => cb(data));
+  });
+  proc.onExit(() => {
+    if (currentProcess === proc) {
+      currentProcess = null;
+      exitListeners.forEach(cb => cb(0));
+    }
+  });
+  if (mode === 'claude') {
+    if (claudeProcess?.pid) {
+      try { claudeProcess.kill(); } catch {}
+    }
+    claudeProcess = proc;
+  } else {
+    if (opencodeProcess?.pid) {
+      try { opencodeProcess.kill(); } catch {}
+    }
+    opencodeProcess = proc;
+  }
+  currentProcess = proc;
+  console.log(`[CombinedV2] ${mode === 'claude' ? 'Claude Code' : 'OpenCode'} 已启动 (PID: ${proc.pid})`);
+  return proc;
+}
+async function switchMode(newMode) {
+  if (newMode === currentMode) return;
+  // 清空所有历史输出
+  outputBuffer = '';
+  // 杀死旧进程
+  if (currentMode === 'claude' && claudeProcess) {
+    try { claudeProcess.kill(); } catch {}
+    claudeProcess = null;
+  } else if (currentMode === 'opencode' && opencodeProcess) {
+    try { opencodeProcess.kill(); } catch {}
+    opencodeProcess = null;
+  }
+  currentProcess = null;
+  // 切换到新模式
+  currentMode = newMode;
+  await spawnProcess(newMode);
+  console.log(`[CombinedV2] 切换到 ${newMode}`);
+}
+function writeToPty(data) {
+  if (currentProcess) {
+    currentProcess.write(data);
+  }
+}
+function resizePty(cols, rows) {
+  lastPtyCols = cols;
+  lastPtyRows = rows;
+  [claudeProcess, opencodeProcess].forEach(proc => {
+    if (proc) {
+      try { proc.resize(cols, rows); } catch {}
+    }
+  });
+}
+const server = createServer((req, res) => {
+  if (req.url === '/' || req.url === '/index.html') {
+    res.writeHead(200, {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Access-Control-Allow-Origin': '*',
+    });
+    createReadStream(join(__dirname, 'index.html')).pipe(res);
+    return;
+  }
+  res.writeHead(404, { 'Content-Type': 'text/plain' });
+  res.end('Not Found');
+});
+const wss = new WebSocketServer({ server, path: '/ws' });
+wss.on('connection', (ws, req) => {
+  console.log('[WS] 客户端连接 from', req.socket.remoteAddress);
+  ws.send(JSON.stringify({
+    type: 'state',
+    running: !!currentProcess,
+    pid: currentProcess?.pid,
+    mode: currentMode,
+  }));
+  if (outputBuffer) {
+    ws.send(JSON.stringify({ type: 'data', data: outputBuffer }));
+  }
+  const listener = (data) => {
+    if (ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: 'data', data }));
+    }
+  };
+  dataListeners.push(listener);
+  const exitListener = (code) => {
+    if (ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: 'exit', exitCode: code }));
+    }
+  };
+  exitListeners.push(exitListener);
+  ws.on('message', async (raw) => {
+    try {
+      const msg = JSON.parse(raw);
+      if (msg.type === 'input') {
+        if (activeWs !== ws) {
+          activeWs = ws;
+          const mSize = getMobileSize();
+          if (mSize) {
+            resizePty(mSize.cols, mSize.rows);
+          } else {
+            const size = clientSizes.get(ws);
+            if (size) resizePty(size.cols, size.rows);
+          }
+        }
+        writeToPty(msg.data);
+      } else if (msg.type === 'resize') {
+        clientSizes.set(ws, { cols: msg.cols, rows: msg.rows });
+        if (msg.mobile) mobileClients.add(ws);
+        if (msg.mobile) {
+          resizePty(msg.cols, msg.rows);
+        } else if (mobileClients.size === 0 && (activeWs === ws || activeWs === null)) {
+          activeWs = ws;
+          resizePty(msg.cols, msg.rows);
+        }
+      } else if (msg.type === 'switch') {
+        if (msg.mode !== currentMode) {
+          ws.send(JSON.stringify({ type: 'switching', mode: msg.mode }));
+          await switchMode(msg.mode);
+          ws.send(JSON.stringify({ type: 'mode', mode: currentMode }));
+          setTimeout(() => {
+            if (outputBuffer) {
+              ws.send(JSON.stringify({ type: 'data', data: outputBuffer }));
+            }
+          }, 100);
+        }
+      }
+    } catch (err) {
+      console.error('[WS] Error:', err.message);
+    }
+  });
+  ws.on('close', () => {
+    mobileClients.delete(ws);
+    const idx = dataListeners.indexOf(listener);
+    if (idx >= 0) dataListeners.splice(idx, 1);
+    const eIdx = exitListeners.indexOf(exitListener);
+    if (eIdx >= 0) exitListeners.splice(eIdx, 1);
+    clientSizes.delete(ws);
+    if (activeWs === ws) {
+      activeWs = null;
+      const mSize = getMobileSize();
+      if (mSize) {
+        resizePty(mSize.cols, mSize.rows);
+      } else {
+        for (const [remainWs, size] of clientSizes) {
+          if (remainWs.readyState === 1) {
+            activeWs = remainWs;
+            resizePty(size.cols, size.rows);
+            break;
+          }
+        }
+      }
+    }
+  });
+});
+server.listen(PORT, '0.0.0.0', async () => {
+  const ip = getLocalIp();
+  console.log('\n' + '='.repeat(50));
+  console.log('✅ Combined Viewer V2 已启动 (丝滑切换版)');
+  console.log('='.repeat(50));
+  console.log(`🖥️  本地访问：http://127.0.0.1:${PORT}`);
+  console.log(`📱  手机访问：http://${ip}:${PORT}`);
+  console.log('='.repeat(50));
+  console.log('\n按 Ctrl+C 停止服务\n');
+  await spawnProcess('claude');
+});