claude-opencode-viewer 2.5.0 → 2.6.0

package/index.html

@@ -574,6 +574,219 @@
     #copy-toast.show {
       display: block;
     }
+
+    /* Git Diff 面板 */
+    #git-diff-bar {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: #0a0a0a;
+      z-index: 1000;
+      flex-direction: column;
+    }
+
+    #git-diff-bar.visible {
+      display: flex;
+    }
+
+    #git-diff-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: #111;
+      border-bottom: 1px solid #222;
+      flex-shrink: 0;
+    }
+
+    #git-diff-title {
+      font-size: 14px;
+      color: #ddd;
+      font-weight: 600;
+    }
+
+    .git-diff-file-list {
+      height: 250px;
+      flex-shrink: 0;
+      overflow-y: auto;
+      border-bottom: 1px solid #2a2a2a;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .git-diff-file-item {
+      display: flex;
+      align-items: center;
+      padding: 6px 12px;
+      cursor: pointer;
+      color: #ccc;
+      font-size: 13px;
+      gap: 8px;
+      white-space: nowrap;
+    }
+
+    .git-diff-file-item:hover {
+      background: #1a1a1a;
+    }
+
+    .git-diff-file-item.active {
+      background: rgba(74, 158, 255, 0.12);
+      color: #fff;
+    }
+
+    .git-diff-file-status {
+      width: 18px;
+      flex-shrink: 0;
+      font-size: 11px;
+      font-weight: 700;
+      text-align: center;
+    }
+
+    .git-diff-file-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      font-family: Menlo, Monaco, monospace;
+      font-size: 12px;
+    }
+
+    .git-diff-content-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    .git-diff-content-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 12px;
+      border-bottom: 1px solid #2a2a2a;
+      background: #111;
+      flex-shrink: 0;
+    }
+
+    .git-diff-content-path {
+      font-size: 12px;
+      color: #ccc;
+      font-family: Menlo, Monaco, monospace;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+
+    .git-diff-badge {
+      padding: 2px 8px;
+      background: #2a2a2a;
+      border: 1px solid #444;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: 600;
+      color: #e2c08d;
+      letter-spacing: 0.5px;
+      flex-shrink: 0;
+    }
+
+    .git-diff-content-scroll {
+      flex: 1;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .git-diff-placeholder {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      color: #333;
+      font-size: 13px;
+    }
+
+    .git-diff-loading {
+      text-align: center;
+      padding: 16px;
+      color: #888;
+      font-size: 12px;
+    }
+
+    .git-diff-error {
+      color: #ff6b6b;
+      font-size: 12px;
+      padding: 16px 12px;
+      text-align: center;
+    }
+
+    /* Unified diff 行 */
+    .diff-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-family: Menlo, Monaco, 'Courier New', monospace;
+      font-size: 12px;
+      line-height: 1.5;
+    }
+
+    .diff-line {
+      border: none;
+    }
+
+    .diff-line-num {
+      width: 28px;
+      min-width: 28px;
+      padding: 0 3px;
+      text-align: right;
+      color: #555;
+      font-size: 11px;
+      user-select: none;
+      -webkit-user-select: none;
+      vertical-align: top;
+    }
+
+    .diff-line-content {
+      padding: 0 8px;
+      white-space: pre-wrap;
+      word-break: break-all;
+      color: #d4d4d4;
+    }
+
+    .diff-line-add {
+      background: rgba(35, 134, 54, 0.2);
+    }
+
+    .diff-line-add .diff-line-content {
+      color: #7ee787;
+    }
+
+    .diff-line-del {
+      background: rgba(248, 81, 73, 0.2);
+    }
+
+    .diff-line-del .diff-line-content {
+      color: #ffa198;
+    }
+
+    .diff-line-hunk {
+      background: rgba(56, 139, 253, 0.1);
+    }
+
+    .diff-line-hunk .diff-line-content {
+      color: #79c0ff;
+      font-style: italic;
+    }
+
+    .diff-file-count {
+      font-size: 10px;
+      color: #555;
+      background: #1a1a1a;
+      padding: 1px 6px;
+      border-radius: 8px;
+    }
   </style>
 </head>
 <body>
@@ -581,20 +794,29 @@
   <div id="layout">
     <div id="header">
       <div style="display: flex; gap: 8px; align-items: center;">
-        <button class="history-toggle-btn" id="new-session-btn">
+        <button class="history-toggle-btn" id="new-session-btn" style="color:#73c991; border-color:#2a5a3a;">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <line x1="12" y1="5" x2="12" y2="19"></line>
             <line x1="5" y1="12" x2="19" y2="12"></line>
           </svg>
           <span>新会话</span>
         </button>
-        <button class="history-toggle-btn" id="history-toggle">
+        <button class="history-toggle-btn" id="history-toggle" style="color:#79c0ff; border-color:#2a4a7c;">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="10"></circle>
             <polyline points="12 6 12 12 16 14"></polyline>
           </svg>
           <span>历史</span>
         </button>
+        <button class="history-toggle-btn" id="diff-toggle" style="color:#e2c08d; border-color:#5a4a2a;">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="6" y1="3" x2="6" y2="15"></line>
+            <circle cx="18" cy="6" r="3"></circle>
+            <circle cx="6" cy="18" r="3"></circle>
+            <path d="M18 9a9 9 0 0 1-9 9"></path>
+          </svg>
+          <span>Diff</span>
+        </button>
       </div>
       <div id="mode-switcher">
         <span id="mode-label"></span>
@@ -669,6 +891,46 @@
       </div>
     </div>
 
+    <!-- Git Diff 面板 -->
+    <div id="git-diff-bar">
+      <div id="git-diff-header">
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span id="git-diff-title">Git Changes</span>
+          <span class="diff-file-count" id="git-diff-count">0</span>
+        </div>
+        <div style="display: flex; gap: 8px;">
+          <button class="history-toggle-btn" id="refresh-diff">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="23 4 23 10 17 10"></polyline>
+              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+            </svg>
+            <span>刷新</span>
+          </button>
+          <button class="history-toggle-btn" id="close-diff">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+            <span>返回</span>
+          </button>
+        </div>
+      </div>
+      <div class="git-diff-file-list" id="git-diff-file-list">
+        <div class="git-diff-loading">加载中...</div>
+      </div>
+      <div class="git-diff-content-area" id="git-diff-content-area">
+        <div class="git-diff-placeholder">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="1.5">
+            <line x1="6" y1="3" x2="6" y2="15"></line>
+            <circle cx="18" cy="6" r="3"></circle>
+            <circle cx="6" cy="18" r="3"></circle>
+            <path d="M18 9a9 9 0 0 1-9 9"></path>
+          </svg>
+          <span>点击文件查看 diff</span>
+        </div>
+      </div>
+    </div>
+
     <div id="content">
       <div id="terminal-container">
         <div id="terminal">
@@ -1789,6 +2051,184 @@
         closeSelectMode();
       });
 
+      // ======= Git Diff 功能 =======
+      var diffBarVisible = false;
+      var diffChanges = [];
+      var diffSelectedFile = null;
+
+      var STATUS_COLORS = {
+        'M': '#e2c08d', 'A': '#73c991', 'D': '#f14c4c',
+        'R': '#73c991', 'C': '#73c991', 'U': '#e2c08d',
+        '?': '#73c991', '??': '#73c991',
+      };
+
+      function toggleDiffBar() {
+        diffBarVisible = !diffBarVisible;
+        var bar = document.getElementById('git-diff-bar');
+        if (diffBarVisible) {
+          bar.classList.add('visible');
+          loadGitStatus();
+        } else {
+          bar.classList.remove('visible');
+          diffSelectedFile = null;
+        }
+      }
+
+      function loadGitStatus() {
+        var fileList = document.getElementById('git-diff-file-list');
+        fileList.innerHTML = '<div class="git-diff-loading">加载中...</div>';
+        document.getElementById('git-diff-count').textContent = '0';
+
+        fetch('/api/git-status')
+          .then(function(r) { return r.json(); })
+          .then(function(data) {
+            diffChanges = data.changes || [];
+            document.getElementById('git-diff-count').textContent = diffChanges.length;
+            renderDiffFileList();
+          })
+          .catch(function() {
+            fileList.innerHTML = '<div class="git-diff-error">无法加载 git status</div>';
+          });
+      }
+
+      function renderDiffFileList() {
+        var fileList = document.getElementById('git-diff-file-list');
+        if (diffChanges.length === 0) {
+          fileList.innerHTML = '<div class="git-diff-loading" style="color:#666;">没有变更文件</div>';
+          return;
+        }
+        var html = '';
+        diffChanges.forEach(function(c) {
+          var color = STATUS_COLORS[c.status] || '#888';
+          var label = c.status === '??' ? 'U' : c.status;
+          var activeClass = diffSelectedFile === c.file ? ' active' : '';
+          html += '<div class="git-diff-file-item' + activeClass + '" data-file="' + escapeHtml(c.file) + '">';
+          html += '<span class="git-diff-file-status" style="color:' + color + '">' + label + '</span>';
+          html += '<span class="git-diff-file-name">' + escapeHtml(c.file) + '</span>';
+          html += '</div>';
+        });
+        fileList.innerHTML = html;
+
+        // 绑定点击事件
+        fileList.querySelectorAll('.git-diff-file-item').forEach(function(item) {
+          item.addEventListener('click', function() {
+            var file = item.getAttribute('data-file');
+            diffSelectedFile = file;
+            // 更新选中状态
+            fileList.querySelectorAll('.git-diff-file-item').forEach(function(el) {
+              el.classList.toggle('active', el.getAttribute('data-file') === file);
+            });
+            loadDiffContent(file);
+          });
+        });
+      }
+
+      function loadDiffContent(file) {
+        var area = document.getElementById('git-diff-content-area');
+        area.innerHTML = '<div class="git-diff-loading">加载 diff...</div>';
+
+        fetch('/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>';
+            }
+
+            html += '</div>';
+            area.innerHTML = html;
+          })
+          .catch(function(err) {
+            area.innerHTML = '<div class="git-diff-error">加载失败: ' + escapeHtml(err.message) + '</div>';
+          });
+      }
+
+      function renderUnifiedDiff(diffText) {
+        var lines = diffText.split('\n');
+        var html = '<table class="diff-table">';
+        var oldLine = 0, newLine = 0;
+
+        for (var i = 0; i < lines.length; i++) {
+          var line = lines[i];
+
+          // 跳过 diff 头部信息
+          if (line.startsWith('diff --git') || line.startsWith('index ') ||
+              line.startsWith('---') || line.startsWith('+++') ||
+              line.startsWith('new file') || line.startsWith('deleted file') ||
+              line.startsWith('old mode') || line.startsWith('new mode')) {
+            continue;
+          }
+
+          if (line.startsWith('@@')) {
+            // 解析 hunk header: @@ -old,count +new,count @@
+            var match = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+            if (match) {
+              oldLine = parseInt(match[1], 10);
+              newLine = parseInt(match[2], 10);
+            }
+            html += '<tr class="diff-line diff-line-hunk">';
+            html += '<td class="diff-line-num"></td><td class="diff-line-num"></td>';
+            html += '<td class="diff-line-content">' + escapeHtml(line) + '</td></tr>';
+          } else if (line.startsWith('+')) {
+            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>';
+            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>';
+            oldLine++;
+          } else if (line.startsWith(' ') || (line === '' && i < lines.length - 1)) {
+            html += '<tr class="diff-line">';
+            html += '<td class="diff-line-num">' + oldLine + '</td>';
+            html += '<td class="diff-line-num">' + newLine + '</td>';
+            html += '<td class="diff-line-content">' + escapeHtml(line.substring(1) || '') + '</td></tr>';
+            oldLine++;
+            newLine++;
+          }
+        }
+
+        html += '</table>';
+        return html;
+      }
+
+      // Diff 按钮事件绑定
+      document.getElementById('diff-toggle').addEventListener('click', toggleDiffBar);
+      document.getElementById('close-diff').addEventListener('click', toggleDiffBar);
+      document.getElementById('refresh-diff').addEventListener('click', function(e) {
+        e.stopPropagation();
+        loadGitStatus();
+        // 重置 diff 内容区
+        diffSelectedFile = null;
+        document.getElementById('git-diff-content-area').innerHTML =
+          '<div class="git-diff-placeholder">' +
+          '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="1.5">' +
+          '<line x1="6" y1="3" x2="6" y2="15"></line>' +
+          '<circle cx="18" cy="6" r="3"></circle>' +
+          '<circle cx="6" cy="18" r="3"></circle>' +
+          '<path d="M18 9a9 9 0 0 1-9 9"></path>' +
+          '</svg><span>点击文件查看 diff</span></div>';
+      });
+
       // 初始化虚拟按键事件
       setupVirtualKeyEvents();
 

package/package.json

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

package/server.js

@@ -1,11 +1,12 @@
 #!/usr/bin/env node
 import { createServer } from 'node:http';
-import { existsSync, createReadStream } from 'node:fs';
+import { existsSync, createReadStream, readFileSync } from 'node:fs';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { networkInterfaces, platform, arch, homedir } from 'node:os';
 import { chmodSync, statSync } from 'node:fs';
-import { execSync } from 'child_process';
+import { execSync, execFile } from 'child_process';
+import { promisify } from 'node:util';
 import { WebSocketServer } from 'ws';
 import Database from 'better-sqlite3';
 
@@ -22,6 +23,7 @@ const OPENCODE_DB_PATH = process.env.OPENCODE_DB_PATH || join(
 );
 
 const MAX_BUFFER = 200000;
+const execFileAsync = promisify(execFile);
 
 let ptyModule = null;
 let claudeProcess = null;
@@ -388,7 +390,7 @@ function getSessionMessages(sessionId) {
   }
 }
 
-const server = createServer((req, res) => {
+const server = createServer(async (req, res) => {
   if (req.url === '/' || req.url === '/index.html') {
     res.writeHead(200, {
       'Content-Type': 'text/html; charset=utf-8',
@@ -409,6 +411,96 @@ const server = createServer((req, res) => {
     return;
   }
 
+  // API: 获取 git status
+  if (req.url === '/api/git-status') {
+    res.writeHead(200, {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+    });
+    try {
+      const { stdout } = await execFileAsync('git', ['status', '--porcelain'], {
+        cwd: process.cwd(), encoding: 'utf-8', timeout: 5000,
+      });
+      const changes = stdout.split('\n').filter(Boolean).map(line => ({
+        status: line.substring(0, 2).trim(),
+        file: line.substring(3),
+      }));
+      res.end(JSON.stringify({ changes }));
+    } catch (err) {
+      res.end(JSON.stringify({ changes: [], error: err.message }));
+    }
+    return;
+  }
+
+  // API: 获取 git diff
+  if (req.url?.startsWith('/api/git-diff')) {
+    const url = new URL(req.url, `http://${req.headers.host}`);
+    const files = url.searchParams.get('files');
+    res.writeHead(200, {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+    });
+    if (!files) {
+      res.end(JSON.stringify({ diffs: [] }));
+      return;
+    }
+    const fileList = files.split(',').filter(Boolean);
+    const diffs = [];
+    const cwd = process.cwd();
+    for (const file of fileList) {
+      if (file.includes('..') || file.startsWith('/')) continue;
+      try {
+        const { stdout: statusOut } = await execFileAsync('git', ['status', '--porcelain', '--', file], { cwd, encoding: 'utf-8', timeout: 3000 });
+        if (!statusOut.trim()) continue;
+        const status = statusOut.substring(0, 2).trim();
+        const is_new = status === 'A' || status === '??';
+        const is_deleted = status === 'D';
+        let is_binary = false;
+        if (!is_deleted) {
+          try {
+            const { stdout: dc } = await execFileAsync('git', ['diff', '--numstat', 'HEAD', '--', file], { cwd, encoding: 'utf-8', timeout: 3000 });
+            if (dc.includes('-\t-\t')) is_binary = true;
+          } catch {}
+        }
+        let old_content = '', new_content = '', unified_diff = '';
+        if (!is_binary) {
+          if (!is_new) {
+            try {
+              const { stdout } = await execFileAsync('git', ['show', `HEAD:${file}`], { cwd, encoding: 'utf-8', timeout: 5000, maxBuffer: 5 * 1024 * 1024 });
+              old_content = stdout;
+            } catch {}
+          }
+          if (!is_deleted) {
+            try {
+              const filePath = join(cwd, file);
+              if (existsSync(filePath)) {
+                const stat = statSync(filePath);
+                if (stat.size > 5 * 1024 * 1024) {
+                  diffs.push({ file, status, is_large: true, size: stat.size });
+                  continue;
+                }
+                new_content = readFileSync(filePath, 'utf-8');
+              }
+            } catch {}
+          }
+          // 获取 unified diff
+          try {
+            const diffArgs = is_new
+              ? ['diff', '--no-color', '-U3', '--no-index', '/dev/null', file]
+              : ['diff', '--no-color', '-U3', 'HEAD', '--', file];
+            const { stdout } = await execFileAsync('git', diffArgs, { cwd, encoding: 'utf-8', timeout: 5000, maxBuffer: 5 * 1024 * 1024 });
+            unified_diff = stdout;
+          } catch (e) {
+            if (e.stdout) unified_diff = e.stdout;
+          }
+        }
+        diffs.push({ file, status, old_content, new_content, unified_diff, is_binary, is_new, is_deleted });
+      } catch { continue; }
+    }
+    res.end(JSON.stringify({ diffs }));
+    return;
+  }
+
   // API: 获取会话消息
   if (req.url?.startsWith('/api/session/')) {
     const sessionId = req.url.split('/').pop();