claude-opencode-viewer 2.6.48 → 2.6.49

package/index-pc.html

@@ -740,6 +740,39 @@
       line-height: 1.6;
       color: #d4d4d4;
     }
+    .docs-md-content {
+      font-size: 13px; line-height: 1.7; color: #d4d4d4; word-break: break-word;
+    }
+    .docs-md-content h1, .docs-md-content h2, .docs-md-content h3 {
+      margin: 16px 0 8px; color: #e0e0e0; border-bottom: 1px solid #333; padding-bottom: 4px;
+    }
+    .docs-md-content h1 { font-size: 1.4em; }
+    .docs-md-content h2 { font-size: 1.2em; }
+    .docs-md-content h3 { font-size: 1.05em; }
+    .docs-md-content p { margin: 8px 0; }
+    .docs-md-content pre {
+      background: #1a1a1a; border: 1px solid #333; border-radius: 4px;
+      padding: 10px; overflow-x: auto; margin: 8px 0; white-space: pre-wrap; word-break: break-word;
+    }
+    .docs-md-content code {
+      background: #1a1a1a; padding: 1px 4px; border-radius: 3px; font-size: 12px;
+      font-family: Menlo, Monaco, monospace;
+    }
+    .docs-md-content pre code { background: none; padding: 0; }
+    .docs-md-content ul, .docs-md-content ol { margin: 8px 0; padding-left: 20px; }
+    .docs-md-content li { margin: 4px 0; }
+    .docs-md-content blockquote {
+      border-left: 3px solid #444; margin: 8px 0; padding: 4px 12px; color: #999;
+    }
+    .docs-md-content table { border-collapse: collapse; margin: 8px 0; width: 100%; }
+    .docs-md-content th, .docs-md-content td {
+      border: 1px solid #333; padding: 6px 10px; text-align: left;
+    }
+    .docs-md-content th { background: #1a1a1a; }
+    .docs-md-content a { color: #58a6ff; text-decoration: none; }
+    .docs-md-content a:hover { text-decoration: underline; }
+    .docs-md-content img { max-width: 100%; }
+    .docs-md-content hr { border: none; border-top: 1px solid #333; margin: 12px 0; }
     .docs-placeholder {
       flex: 1;
       display: flex;
@@ -805,6 +838,13 @@
       color: #ffa198;
     }
 
+    .diff-sign {
+      display: inline-block;
+      width: 12px;
+      font-weight: bold;
+      user-select: none;
+    }
+
     .diff-line-hunk {
       background: rgba(56, 139, 253, 0.1);
     }
@@ -1071,6 +1111,8 @@
   <div id="copy-toast">已复制</div>
   <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0.18.0/lib/addon-webgl.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@15.0.7/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"></script>
   <script>
     (function() {
       var isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
@@ -1724,6 +1766,11 @@
               term.clear();
             }
             else if (msg.type === 'state') {
+              // 重连时清掉旧终端内容，防止重复叠加
+              if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
+              writeBuffer = '';
+              term.reset();
+              term.clear();
               if (msg.mode) {
                 currentMode = msg.mode;
                 modeSelect.value = msg.mode;
@@ -2432,38 +2479,29 @@
 
       function loadDiffContent(file) {
         var area = document.getElementById('git-diff-content-area');
-        area.innerHTML = '<div class="git-diff-loading">加载 diff...</div>';
-
-        fetch(basePath + '/api/git-diff?files=' + encodeURIComponent(file))
-          .then(function(r) { return r.json(); })
-          .then(function(data) {
-            if (!data.diffs || !data.diffs[0]) {
-              area.innerHTML = '<div class="git-diff-error">无 diff 数据</div>';
-              return;
-            }
-            var d = data.diffs[0];
-            var html = '<div class="git-diff-content-header">';
-            html += '<span class="git-diff-content-path">' + escapeHtml(d.file) + '</span>';
-            html += '<span class="git-diff-badge">' + (d.is_new ? 'NEW' : d.is_deleted ? 'DEL' : 'DIFF') + '</span>';
-            html += '</div>';
-            html += '<div class="git-diff-content-scroll">';
-
-            if (d.is_binary) {
-              html += '<div class="git-diff-loading" style="font-style:italic;">二进制文件</div>';
-            } else if (d.is_large) {
-              html += '<div class="git-diff-loading" style="color:#e2c08d;">文件过大: ' + (d.size / (1024 * 1024)).toFixed(2) + ' MB</div>';
-            } else if (d.unified_diff) {
-              html += renderUnifiedDiff(d.unified_diff);
-            } else {
-              html += '<div class="git-diff-loading" style="color:#666;">无变更内容</div>';
-            }
+        var d = diffChanges.find(function(c) { return c.file === file; });
+        if (!d) {
+          area.innerHTML = '<div class="git-diff-error">无 diff 数据</div>';
+          return;
+        }
+        var html = '<div class="git-diff-content-header">';
+        html += '<span class="git-diff-content-path">' + escapeHtml(d.file) + '</span>';
+        html += '<span class="git-diff-badge">' + (d.is_new ? 'NEW' : d.is_deleted ? 'DEL' : 'DIFF') + '</span>';
+        html += '</div>';
+        html += '<div class="git-diff-content-scroll">';
+
+        if (d.is_binary) {
+          html += '<div class="git-diff-loading" style="font-style:italic;">二进制文件</div>';
+        } else if (d.is_large) {
+          html += '<div class="git-diff-loading" style="color:#e2c08d;">文件过大: ' + (d.size / (1024 * 1024)).toFixed(2) + ' MB</div>';
+        } else if (d.unified_diff) {
+          html += renderUnifiedDiff(d.unified_diff);
+        } else {
+          html += '<div class="git-diff-loading" style="color:#666;">无变更内容</div>';
+        }
 
-            html += '</div>';
-            area.innerHTML = html;
-          })
-          .catch(function(err) {
-            area.innerHTML = '<div class="git-diff-error">加载失败: ' + escapeHtml(err.message) + '</div>';
-          });
+        html += '</div>';
+        area.innerHTML = html;
       }
 
       function renderUnifiedDiff(diffText) {
@@ -2496,13 +2534,13 @@
             html += '<tr class="diff-line diff-line-add">';
             html += '<td class="diff-line-num"></td>';
             html += '<td class="diff-line-num">' + newLine + '</td>';
-            html += '<td class="diff-line-content">' + escapeHtml(line.substring(1)) + '</td></tr>';
+            html += '<td class="diff-line-content"><span class="diff-sign">+</span>' + escapeHtml(line.substring(1)) + '</td></tr>';
             newLine++;
           } else if (line.startsWith('-')) {
             html += '<tr class="diff-line diff-line-del">';
             html += '<td class="diff-line-num">' + oldLine + '</td>';
             html += '<td class="diff-line-num"></td>';
-            html += '<td class="diff-line-content">' + escapeHtml(line.substring(1)) + '</td></tr>';
+            html += '<td class="diff-line-content"><span class="diff-sign">-</span>' + escapeHtml(line.substring(1)) + '</td></tr>';
             oldLine++;
           } else if (line.startsWith(' ') || (line === '' && i < lines.length - 1)) {
             html += '<tr class="diff-line">';
@@ -2608,6 +2646,15 @@
           });
       }
 
+      function formatDocContent(text) {
+        if (!text) return '';
+        try {
+          return DOMPurify.sanitize(marked.parse(text, { breaks: true }));
+        } catch (e) {
+          return '<pre>' + escapeHtml(text) + '</pre>';
+        }
+      }
+
       function loadDocContent(file) {
         var area = document.getElementById('docs-content-area');
         area.innerHTML = '<div class="docs-loading">加载中...</div>';
@@ -2618,7 +2665,7 @@
               area.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">' + escapeHtml(data.error) + '</div>';
               return;
             }
-            area.innerHTML = '<pre>' + escapeHtml(data.content) + '</pre>';
+            area.innerHTML = '<div class="docs-md-content">' + formatDocContent(data.content) + '</div>';
           })
           .catch(function(err) {
             area.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">加载失败</div>';

package/index.html

@@ -809,6 +809,39 @@
       line-height: 1.6;
       color: #d4d4d4;
     }
+    .docs-md-content {
+      font-size: 13px; line-height: 1.7; color: #d4d4d4; word-break: break-word;
+    }
+    .docs-md-content h1, .docs-md-content h2, .docs-md-content h3 {
+      margin: 16px 0 8px; color: #e0e0e0; border-bottom: 1px solid #333; padding-bottom: 4px;
+    }
+    .docs-md-content h1 { font-size: 1.4em; }
+    .docs-md-content h2 { font-size: 1.2em; }
+    .docs-md-content h3 { font-size: 1.05em; }
+    .docs-md-content p { margin: 8px 0; }
+    .docs-md-content pre {
+      background: #1a1a1a; border: 1px solid #333; border-radius: 4px;
+      padding: 10px; overflow-x: auto; margin: 8px 0; white-space: pre-wrap; word-break: break-word;
+    }
+    .docs-md-content code {
+      background: #1a1a1a; padding: 1px 4px; border-radius: 3px; font-size: 12px;
+      font-family: Menlo, Monaco, monospace;
+    }
+    .docs-md-content pre code { background: none; padding: 0; }
+    .docs-md-content ul, .docs-md-content ol { margin: 8px 0; padding-left: 20px; }
+    .docs-md-content li { margin: 4px 0; }
+    .docs-md-content blockquote {
+      border-left: 3px solid #444; margin: 8px 0; padding: 4px 12px; color: #999;
+    }
+    .docs-md-content table { border-collapse: collapse; margin: 8px 0; width: 100%; }
+    .docs-md-content th, .docs-md-content td {
+      border: 1px solid #333; padding: 6px 10px; text-align: left;
+    }
+    .docs-md-content th { background: #1a1a1a; }
+    .docs-md-content a { color: #58a6ff; text-decoration: none; }
+    .docs-md-content a:hover { text-decoration: underline; }
+    .docs-md-content img { max-width: 100%; }
+    .docs-md-content hr { border: none; border-top: 1px solid #333; margin: 12px 0; }
     .docs-placeholder {
       flex: 1;
       display: flex;
@@ -874,6 +907,13 @@
       color: #ffa198;
     }
 
+    .diff-sign {
+      display: inline-block;
+      width: 12px;
+      font-weight: bold;
+      user-select: none;
+    }
+
     .diff-line-hunk {
       background: rgba(56, 139, 253, 0.1);
     }
@@ -2633,38 +2673,29 @@
 
       function loadDiffContent(file) {
         var area = document.getElementById('git-diff-content-area');
-        area.innerHTML = '<div class="git-diff-loading">加载 diff...</div>';
-
-        fetch(basePath + '/api/git-diff?files=' + encodeURIComponent(file))
-          .then(function(r) { return r.json(); })
-          .then(function(data) {
-            if (!data.diffs || !data.diffs[0]) {
-              area.innerHTML = '<div class="git-diff-error">无 diff 数据</div>';
-              return;
-            }
-            var d = data.diffs[0];
-            var html = '<div class="git-diff-content-header">';
-            html += '<span class="git-diff-content-path">' + escapeHtml(d.file) + '</span>';
-            html += '<span class="git-diff-badge">' + (d.is_new ? 'NEW' : d.is_deleted ? 'DEL' : 'DIFF') + '</span>';
-            html += '</div>';
-            html += '<div class="git-diff-content-scroll">';
-
-            if (d.is_binary) {
-              html += '<div class="git-diff-loading" style="font-style:italic;">二进制文件</div>';
-            } else if (d.is_large) {
-              html += '<div class="git-diff-loading" style="color:#e2c08d;">文件过大: ' + (d.size / (1024 * 1024)).toFixed(2) + ' MB</div>';
-            } else if (d.unified_diff) {
-              html += renderUnifiedDiff(d.unified_diff);
-            } else {
-              html += '<div class="git-diff-loading" style="color:#666;">无变更内容</div>';
-            }
+        var d = diffChanges.find(function(c) { return c.file === file; });
+        if (!d) {
+          area.innerHTML = '<div class="git-diff-error">无 diff 数据</div>';
+          return;
+        }
+        var html = '<div class="git-diff-content-header">';
+        html += '<span class="git-diff-content-path">' + escapeHtml(d.file) + '</span>';
+        html += '<span class="git-diff-badge">' + (d.is_new ? 'NEW' : d.is_deleted ? 'DEL' : 'DIFF') + '</span>';
+        html += '</div>';
+        html += '<div class="git-diff-content-scroll">';
+
+        if (d.is_binary) {
+          html += '<div class="git-diff-loading" style="font-style:italic;">二进制文件</div>';
+        } else if (d.is_large) {
+          html += '<div class="git-diff-loading" style="color:#e2c08d;">文件过大: ' + (d.size / (1024 * 1024)).toFixed(2) + ' MB</div>';
+        } else if (d.unified_diff) {
+          html += renderUnifiedDiff(d.unified_diff);
+        } else {
+          html += '<div class="git-diff-loading" style="color:#666;">无变更内容</div>';
+        }
 
-            html += '</div>';
-            area.innerHTML = html;
-          })
-          .catch(function(err) {
-            area.innerHTML = '<div class="git-diff-error">加载失败: ' + escapeHtml(err.message) + '</div>';
-          });
+        html += '</div>';
+        area.innerHTML = html;
       }
 
       function renderUnifiedDiff(diffText) {
@@ -2697,13 +2728,13 @@
             html += '<tr class="diff-line diff-line-add">';
             html += '<td class="diff-line-num"></td>';
             html += '<td class="diff-line-num">' + newLine + '</td>';
-            html += '<td class="diff-line-content">' + escapeHtml(line.substring(1)) + '</td></tr>';
+            html += '<td class="diff-line-content"><span class="diff-sign">+</span>' + escapeHtml(line.substring(1)) + '</td></tr>';
             newLine++;
           } else if (line.startsWith('-')) {
             html += '<tr class="diff-line diff-line-del">';
             html += '<td class="diff-line-num">' + oldLine + '</td>';
             html += '<td class="diff-line-num"></td>';
-            html += '<td class="diff-line-content">' + escapeHtml(line.substring(1)) + '</td></tr>';
+            html += '<td class="diff-line-content"><span class="diff-sign">-</span>' + escapeHtml(line.substring(1)) + '</td></tr>';
             oldLine++;
           } else if (line.startsWith(' ') || (line === '' && i < lines.length - 1)) {
             html += '<tr class="diff-line">';
@@ -2811,6 +2842,15 @@
           });
       }
 
+      function formatDocContent(text) {
+        if (!text) return '';
+        try {
+          return DOMPurify.sanitize(marked.parse(text, { breaks: true }));
+        } catch (e) {
+          return '<pre>' + escapeHtml(text) + '</pre>';
+        }
+      }
+
       function loadDocContent(file) {
         var area = document.getElementById('docs-content-area');
         area.innerHTML = '<div class="docs-loading">加载中...</div>';
@@ -2821,7 +2861,7 @@
               area.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">' + escapeHtml(data.error) + '</div>';
               return;
             }
-            area.innerHTML = '<pre>' + escapeHtml(data.content) + '</pre>';
+            area.innerHTML = '<div class="docs-md-content">' + formatDocContent(data.content) + '</div>';
           })
           .catch(function() {
             area.innerHTML = '<div class="docs-loading" style="color:#ff6b6b;">加载失败</div>';

package/package.json

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

package/server.js

@@ -655,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',
@@ -663,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 }));
@@ -1119,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/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** — 移动端键盘交互优化