claude-opencode-viewer 2.6.47 → 2.6.49

package/server.js

@@ -201,6 +201,7 @@ function killProcessTree(proc) {
 
 // 清理孤儿进程（PPID=1 的 opencode/claude）
 function cleanupOrphanProcesses() {
+  const tc = Date.now();
   try {
     const myPid = process.pid;
     const orphans = execSync(
@@ -212,15 +213,23 @@ function cleanupOrphanProcesses() {
     }
     if (orphans.length > 0) LOG(`[cleanup] 清理孤儿进程: ${orphans.join(', ')}`);
   } catch {}
+  console.log(`[perf] cleanupOrphanProcesses: ${Date.now() - tc}ms`);
 }
 
 async function spawnProcess(mode, sessionId = null) {
+  const t0 = Date.now();
   const pty = await getPty();
+  console.log(`[perf] getPty: ${Date.now() - t0}ms`);
+
+  const t1 = Date.now();
   fixSpawnHelperPermissions();
+  console.log(`[perf] fixSpawnHelperPermissions: ${Date.now() - t1}ms`);
 
   let command, args = [];
   if (mode === 'claude') {
+    const t2 = Date.now();
     const claudePath = findCommand('claude');
+    console.log(`[perf] findCommand(claude): ${Date.now() - t2}ms`);
     if (claudePath.endsWith('.js')) {
       command = process.execPath;
       args = [claudePath];
@@ -233,7 +242,9 @@ async function spawnProcess(mode, sessionId = null) {
       LOG(`[claude] 恢复会话: ${sessionId}`);
     }
   } else {
+    const t2 = Date.now();
     command = findCommand('opencode');
+    console.log(`[perf] findCommand(opencode): ${Date.now() - t2}ms`);
     // 如果提供了 sessionId，添加 --session 参数
     if (sessionId) {
       args = ['--session', sessionId];
@@ -244,6 +255,7 @@ async function spawnProcess(mode, sessionId = null) {
   const spawnEnv = { ...process.env };
 
   // 恢复会话时，使用会话记录的工作目录
+  const t3 = Date.now();
   let spawnCwd = process.cwd();
   if (sessionId && mode === 'opencode') {
     try {
@@ -286,6 +298,9 @@ async function spawnProcess(mode, sessionId = null) {
     }
   }
 
+  console.log(`[perf] cwdLookup: ${Date.now() - t3}ms`);
+
+  const t4 = Date.now();
   const proc = pty.spawn(command, args, {
     name: 'xterm-256color',
     cols: lastPtyCols,
@@ -294,6 +309,9 @@ async function spawnProcess(mode, sessionId = null) {
     env: spawnEnv,
   });
 
+  console.log(`[perf] pty.spawn: ${Date.now() - t4}ms`);
+  console.log(`[perf] spawnProcess total: ${Date.now() - t0}ms`);
+
   proc.onData((data) => {
     // 忽略已被替换的旧进程输出
     if (currentProcess !== proc) return;
@@ -637,7 +655,7 @@ const requestHandler = async (req, res) => {
     return;
   }
 
-  // API: 获取 git status
+  // API: 获取 git status（含每个文件的 unified_diff，批量获取优化）
   if (req.url === '/api/git-status') {
     res.writeHead(200, {
       'Content-Type': 'application/json',
@@ -645,13 +663,76 @@ const requestHandler = async (req, res) => {
     });
     try {
       const gitCwd = process.env.PROJECT_DIR || process.cwd();
-      const { stdout } = await execFileAsync('git', ['-c', 'safe.directory=*', 'status', '--porcelain'], {
-        cwd: gitCwd, encoding: 'utf-8', timeout: 60000,
-      });
-      const changes = stdout.split('\n').filter(Boolean).map(line => ({
+
+      // 并行执行: git status + git diff --numstat + git diff (批量获取)
+      const [statusResult, numstatResult, diffResult] = await Promise.all([
+        execFileAsync('git', ['-c', 'safe.directory=*', 'status', '--porcelain'], { cwd: gitCwd, encoding: 'utf-8', timeout: 60000 }),
+        execFileAsync('git', ['-c', 'safe.directory=*', 'diff', '--numstat', 'HEAD'], { cwd: gitCwd, encoding: 'utf-8', timeout: 60000 }).catch(() => ({ stdout: '' })),
+        execFileAsync('git', ['-c', 'safe.directory=*', 'diff', '--no-color', '-U3', 'HEAD'], { cwd: gitCwd, encoding: 'utf-8', timeout: 60000, maxBuffer: 10 * 1024 * 1024 }).catch(e => ({ stdout: e.stdout || '' })),
+      ]);
+
+      const changes = statusResult.stdout.split('\n').filter(Boolean).map(line => ({
         status: line.substring(0, 2).trim(),
         file: line.substring(3),
       })).filter(c => !/^core-/.test(c.file));
+
+      // 解析 numstat 识别二进制文件
+      const binaryFiles = new Set();
+      numstatResult.stdout.split('\n').filter(Boolean).forEach(line => {
+        if (line.startsWith('-\t-\t')) binaryFiles.add(line.split('\t')[2]);
+      });
+
+      // 将批量 diff 输出按文件拆分
+      const diffMap = {};
+      const diffParts = diffResult.stdout.split(/^diff --git /m);
+      for (let i = 1; i < diffParts.length; i++) {
+        const part = diffParts[i];
+        // 提取文件名: "a/path b/path\n..."
+        const firstLine = part.substring(0, part.indexOf('\n'));
+        const bMatch = firstLine.match(/ b\/(.+)$/);
+        if (bMatch) diffMap[bMatch[1]] = 'diff --git ' + part;
+      }
+
+      // 填充每个文件的 diff 信息
+      const untrackedFiles = [];
+      for (const c of changes) {
+        if (c.file.includes('..') || c.file.startsWith('/')) continue;
+        c.is_new = c.status === 'A' || c.status === '??';
+        c.is_deleted = c.status === 'D';
+        c.is_binary = binaryFiles.has(c.file);
+        if (c.is_binary) continue;
+
+        // 检查大文件
+        if (!c.is_deleted) {
+          try {
+            const filePath = join(gitCwd, c.file);
+            if (existsSync(filePath)) {
+              const stat = statSync(filePath);
+              if (stat.size > 5 * 1024 * 1024) { c.is_large = true; c.size = stat.size; continue; }
+            }
+          } catch {}
+        }
+
+        if (c.status === '??') {
+          // untracked 文件需要单独处理
+          untrackedFiles.push(c);
+        } else {
+          c.unified_diff = diffMap[c.file] || '';
+        }
+      }
+
+      // 对 untracked 文件并行获取 diff
+      if (untrackedFiles.length > 0) {
+        await Promise.all(untrackedFiles.map(async (c) => {
+          try {
+            const { stdout: diffOut } = await execFileAsync('git', ['-c', 'safe.directory=*', 'diff', '--no-color', '-U3', '--no-index', '/dev/null', c.file], { cwd: gitCwd, encoding: 'utf-8', timeout: 30000, maxBuffer: 5 * 1024 * 1024 });
+            c.unified_diff = diffOut;
+          } catch (e) {
+            c.unified_diff = e.stdout || '';
+          }
+        }));
+      }
+
       res.end(JSON.stringify({ changes, cwd: gitCwd }));
     } catch (err) {
       res.end(JSON.stringify({ changes: [], cwd: process.env.PROJECT_DIR || process.cwd(), error: err.message }));
@@ -786,6 +867,7 @@ const requestHandler = async (req, res) => {
 
   // API: 获取最近的 OpenCode 和 Claude 会话（用于启动对话框）
   if (req.url === '/api/last-sessions') {
+    const tls = Date.now();
     res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
     let opencode = null, claude = null;
     // OpenCode: 从 SQLite 查最近会话
@@ -861,6 +943,7 @@ const requestHandler = async (req, res) => {
         }
       }
     } catch {}
+    console.log(`[perf] last-sessions: ${Date.now() - tls}ms`);
     res.end(JSON.stringify({ opencode, claude }));
     return;
   }
@@ -1099,8 +1182,16 @@ wssInst.on('connection', (ws, req) => {
       }
       isSwitching = false;
     }, 200);
-  } else if (outputBuffer) {
-    ws.send(JSON.stringify({ type: 'data', data: outputBuffer }));
+  } else if (currentProcess) {
+    // TUI 程序使用 alternate screen buffer，直接回放 raw buffer 容易转义序列错乱。
+    // 改为发送 resize 信号让 TUI 重绘当前画面。
+    // 先改为不同尺寸再改回，强制触发 SIGWINCH（相同尺寸不触发）。
+    try {
+      currentProcess.resize(Math.max(2, lastPtyCols - 1), lastPtyRows);
+      setTimeout(() => {
+        try { currentProcess.resize(lastPtyCols, lastPtyRows); } catch {}
+      }, 50);
+    } catch {}
   }
 
 

package/skills-lock.json

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "code-review-expert": {
+      "source": "sanyuan0704/sanyuan-skills",
+      "sourceType": "github",
+      "computedHash": "6c2fe31851a34e63e033257527eab04eea835ca1cf4c4276d1392a323e36e377"
+    }
+  }
+}

package/test-doc.md

@@ -0,0 +1,86 @@
+# Claude OpenCode Viewer 使用指南
+
+## 简介
+
+Claude OpenCode Viewer（COV）是一个统一的终端查看器，支持在浏览器中远程查看和操作 Claude Code 与 OpenCode 的终端会话。适用于需要在手机或其他设备上查看 AI 编程助手工作进度的场景。
+
+## 安装
+
+```bash
+npm install -g claude-opencode-viewer
+```
+
+安装完成后，可以通过以下命令启动：
+
+```bash
+cov
+```
+
+默认监听端口 7008，PC 模式使用 `--pc` 参数启动。
+
+## 功能特性
+
+### 终端查看
+
+支持实时查看终端输出，基于 xterm.js 实现完整的终端模拟，包括：
+
+- 颜色渲染
+- Unicode 字符支持
+- WebGL 加速渲染
+- 移动端触摸滚动
+
+### 会话管理
+
+可以管理多个会话，支持以下操作：
+
+1. 查看历史会话列表
+2. 恢复已有会话
+3. 创建新会话
+4. 在 Claude 和 OpenCode 之间切换
+
+### Git 变更查看
+
+集成了 Git 状态查看功能，可以直接在页面上查看：
+
+| 状态 | 含义 | 颜色 |
+|------|------|------|
+| M | 已修改 | 橙色 |
+| A | 新增 | 绿色 |
+| D | 已删除 | 红色 |
+| ?? | 未跟踪 | 灰色 |
+
+### 文档浏览
+
+支持浏览项目中的 Markdown 文档，自动扫描项目目录下的 `.md` 文件并以富文本格式展示。
+
+## 配置说明
+
+> 注意：以下配置需要在项目根目录下操作，确保 `PROJECT_DIR` 环境变量指向正确的项目路径。
+
+常用环境变量：
+
+- `PROJECT_DIR` — 指定项目工作目录
+- `PORT` — 自定义端口号
+- `COV_MODE` — 默认启动模式（claude / opencode）
+
+## 常见问题
+
+### 连接断开怎么办？
+
+页面会自动显示重连提示并尝试重新连接。如果持续无法连接，请检查：
+
+1. 服务进程是否仍在运行
+2. 网络是否可达
+3. 端口是否被占用
+
+### 移动端键盘遮挡问题
+
+在 iOS 设备上，系统会自动调整终端高度以适应键盘弹出。如果遇到显示异常，可以尝试旋转屏幕后再旋转回来。
+
+## 更新日志
+
+**v2.6.48** — 修复重连内容重复、模式切换黑屏问题
+
+**v2.6.47** — 添加 PC 端重连覆盖层
+
+**v2.6.46** — 移动端键盘交互优化