cc-viewer 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 weiesky
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# CC Viewer
+
+Claude Code API 请求监控系统，实时捕获并可视化展示 Claude Code 的所有 API 请求与响应。
+
+## 使用方法
+
+```bash
+npm install -g cc-viewer
+```
+
+安装完成后运行：
+
+```bash
+ccviewer
+```
+
+该命令会自动将监控脚本注入到本地安装的 Claude Code 中。之后正常使用 Claude Code，打开浏览器访问 `http://localhost:7008` 即可查看监控界面。
+
+## 功能
+
+### 请求监控（原文模式）
+
+- 实时捕获 Claude Code 发出的所有 API 请求，包括流式响应
+- 左侧请求列表展示请求方法、URL、耗时、状态码
+- 自动识别并标记 Main Agent 和 Sub Agent 请求
+- 右侧详情面板支持 Request / Response 两个 Tab 切换查看
+- Request Body 中 `messages`、`system`、`tools` 默认展开一层子属性
+- Response Body 默认全部展开
+- 支持 JSON 视图与纯文本视图切换
+- 支持一键复制 JSON 内容
+
+### 对话模式
+
+点击右上角「打开对话模式」按钮，将最新 Main Agent 请求的 messages 解析为聊天界面：
+
+- 用户消息右对齐（蓝色气泡）
+- Main Agent 回复左对齐（深灰气泡），支持 Markdown 渲染
+- Sub Agent 工具返回左对齐（灰色边框气泡），关联显示工具名称
+- `thinking` 块默认折叠，点击展开查看思考过程
+- `tool_use` 显示为紧凑的工具调用卡片，包含工具名和参数预览
+- 系统注入标签（`<system-reminder>`、`<project-reminder>` 等）自动折叠，点击标签名展开内容
+- 自动过滤系统注入文本，只展示用户的真实输入
+
+### 数据解析
+
+| 消息类型 | 识别方式 | 展示 |
+|---------|---------|------|
+| 用户输入 | `role: "user"` + 非系统标签文本 | 右对齐蓝色气泡 |
+| Agent 文本回复 | `role: "assistant"` + `type: "text"` | 左对齐 Markdown 渲染 |
+| Agent 工具调用 | `role: "assistant"` + `type: "tool_use"` | 工具调用卡片 |
+| Agent 思考 | `role: "assistant"` + `type: "thinking"` | 可折叠思考块 |
+| 工具返回 | `role: "user"` + `type: "tool_result"` | 关联到对应 tool_use |
+
+对于 `Task` 类型的工具调用，会从 `input` 中提取 `subagent_type` 和 `description` 来标识具体的 Sub Agent。
+
+## 技术栈
+
+- 前端：原生 HTML/CSS/JS，暗色主题
+- JSON 渲染：[@alenaksu/json-viewer](https://github.com/nicolo-ribaudo/json-viewer)
+- Markdown 渲染：[marked](https://github.com/markedjs/marked)
+- 后端：Node.js 原生 HTTP 服务 + SSE 实时推送
+- 请求拦截：通过 `globalThis.fetch` 拦截，支持流式响应组装
+
+## License
+
+MIT

package/cli.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+const INJECT_START = '// >>> Start CC Viewer Web Service >>>';
+const INJECT_END = '// <<< Start CC Viewer Web Service <<<';
+const INJECT_IMPORT = "import '../../cc-viewer/interceptor.js';";
+const INJECT_BLOCK = `${INJECT_START}\n${INJECT_IMPORT}\n${INJECT_END}`;
+
+// Claude Code cli.js 的路径
+const cliPath = resolve(__dirname, '../@anthropic-ai/claude-code/cli.js');
+
+try {
+  const content = readFileSync(cliPath, 'utf-8');
+
+  if (content.includes(INJECT_START)) {
+    console.log('✅ CC Viewer 已注入，无需重复操作');
+  } else {
+    // 在第3行（第2行之后）插入注入代码
+    const lines = content.split('\n');
+    lines.splice(2, 0, INJECT_BLOCK);
+    writeFileSync(cliPath, lines.join('\n'));
+    console.log('✅ CC Viewer 运行成功');
+  }
+  console.log(`直接运行 claude 就可以看到cc-viewer的本地运行地址，默认是:127.0.0.1:7008`);
+  console.log(`如果后续功能失效，请重新执行一次 ccviewer 命令即可`);
+} catch (err) {
+  if (err.code === 'ENOENT') {
+    console.error('❌ 找不到 Claude Code cli.js:', cliPath);
+    console.error('   请确认 @anthropic-ai/claude-code 已安装');
+  } else {
+    console.error('❌ 注入失败:', err.message);
+  }
+  process.exit(1);
+}

package/interceptor.js

@@ -0,0 +1,341 @@
+// LLM Request Interceptor
+// 拦截并记录所有Claude API请求
+import { appendFileSync, mkdirSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, basename } from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// 每次启动生成带时间戳的独立日志文件
+function generateLogFilePath() {
+  const now = new Date();
+  const ts = now.getFullYear().toString()
+    + String(now.getMonth() + 1).padStart(2, '0')
+    + String(now.getDate()).padStart(2, '0')
+    + '_'
+    + String(now.getHours()).padStart(2, '0')
+    + String(now.getMinutes()).padStart(2, '0')
+    + String(now.getSeconds()).padStart(2, '0');
+  const projectName = basename(process.cwd()).replace(/[^a-zA-Z0-9_\-\.]/g, '_');
+  const dir = '/tmp/claude-requests';
+  try { mkdirSync(dir, { recursive: true }); } catch {}
+  return join(dir, `${projectName}_${ts}.jsonl`);
+}
+
+export const LOG_FILE = generateLogFilePath();
+
+// 从环境变量 ANTHROPIC_BASE_URL 提取域名用于请求匹配
+function getBaseUrlHost() {
+  try {
+    const baseUrl = process.env.ANTHROPIC_BASE_URL;
+    if (baseUrl) {
+      return new URL(baseUrl).hostname;
+    }
+  } catch {}
+  return null;
+}
+const CUSTOM_API_HOST = getBaseUrlHost();
+
+// 不再需要折叠函数，保存完整 JSON 供前端渲染
+
+// 组装流式消息为完整的 message 对象
+function assembleStreamMessage(events) {
+  let message = null;
+  const contentBlocks = [];
+  let currentBlockIndex = -1;
+
+  for (const event of events) {
+    if (typeof event !== 'object' || !event.type) continue;
+
+    switch (event.type) {
+      case 'message_start':
+        // 初始化消息对象
+        message = { ...event.message };
+        message.content = [];
+        break;
+
+      case 'content_block_start':
+        // 开始新的内容块
+        currentBlockIndex = event.index;
+        contentBlocks[currentBlockIndex] = { ...event.content_block };
+        if (contentBlocks[currentBlockIndex].type === 'text') {
+          contentBlocks[currentBlockIndex].text = '';
+        } else if (contentBlocks[currentBlockIndex].type === 'thinking') {
+          contentBlocks[currentBlockIndex].thinking = '';
+        }
+        break;
+
+      case 'content_block_delta':
+        // 累积内容块的增量数据
+        if (event.index >= 0 && contentBlocks[event.index] && event.delta) {
+          if (event.delta.type === 'text_delta' && event.delta.text) {
+            contentBlocks[event.index].text += event.delta.text;
+          } else if (event.delta.type === 'input_json_delta' && event.delta.partial_json) {
+            if (!contentBlocks[event.index].input) {
+              contentBlocks[event.index].input = '';
+            }
+            contentBlocks[event.index].input += event.delta.partial_json;
+          } else if (event.delta.type === 'thinking_delta' && event.delta.thinking) {
+            contentBlocks[event.index].thinking += event.delta.thinking;
+          } else if (event.delta.type === 'signature_delta' && event.delta.signature) {
+            contentBlocks[event.index].signature = event.delta.signature;
+          }
+        }
+        break;
+
+      case 'content_block_stop':
+        // 内容块结束
+        if (event.index >= 0 && contentBlocks[event.index]) {
+          // 如果是 tool_use 且有累积的 input JSON，尝试解析
+          if (contentBlocks[event.index].type === 'tool_use' && contentBlocks[event.index].input) {
+            try {
+              contentBlocks[event.index].input = JSON.parse(contentBlocks[event.index].input);
+            } catch {
+              // 保持字符串形式
+            }
+          }
+        }
+        break;
+
+      case 'message_delta':
+        // 更新消息的增量数据（如 stop_reason, usage）
+        if (message && event.delta) {
+          if (event.delta.stop_reason) {
+            message.stop_reason = event.delta.stop_reason;
+          }
+          if (event.delta.stop_sequence !== undefined) {
+            message.stop_sequence = event.delta.stop_sequence;
+          }
+        }
+        if (message && event.usage) {
+          message.usage = { ...message.usage, ...event.usage };
+        }
+        break;
+
+      case 'message_stop':
+        // 消息结束
+        break;
+    }
+  }
+
+  // 将内容块添加到消息中
+  if (message) {
+    message.content = contentBlocks.filter(block => block !== undefined);
+  }
+
+  return message;
+}
+
+// 保存 viewer 模块引用
+let viewerModule = null;
+
+export function setupInterceptor() {
+  // 避免重复拦截
+  if (globalThis._ccViewerInterceptorInstalled) {
+    return;
+  }
+  globalThis._ccViewerInterceptorInstalled = true;
+
+  // 启动 viewer 服务（优先根目录 server.js，fallback 到 lib/server.js）
+  const rootServerPath = join(__dirname, 'server.js');
+  const libServerPath = join(__dirname, 'lib', 'server.js');
+  import(rootServerPath).then(module => {
+    viewerModule = module;
+  }).catch(() => {
+    import(libServerPath).then(module => {
+      viewerModule = module;
+    }).catch(() => {
+      // Silently fail if viewer service cannot start
+    });
+  });
+
+  // 注册退出处理器
+  const cleanupViewer = () => {
+    if (viewerModule && typeof viewerModule.stopViewer === 'function') {
+      try {
+        viewerModule.stopViewer();
+      } catch (err) {
+        // Silently fail
+      }
+    }
+  };
+
+  process.on('SIGINT', () => {
+    cleanupViewer();
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', () => {
+    cleanupViewer();
+    process.exit(0);
+  });
+
+  process.on('beforeExit', () => {
+    cleanupViewer();
+  });
+
+  const _originalFetch = globalThis.fetch;
+
+  globalThis.fetch = async function(url, options) {
+    const startTime = Date.now();
+    let requestEntry = null;
+
+    try {
+      const urlStr = typeof url === 'string' ? url : url?.url || String(url);
+      if ((urlStr.includes('anthropic') || urlStr.includes('claude') || (CUSTOM_API_HOST && urlStr.includes(CUSTOM_API_HOST))) && !urlStr.includes('/messages/count_tokens')) {
+        const timestamp = new Date().toISOString();
+        let body = null;
+        if (options?.body) {
+          try {
+            body = JSON.parse(options.body);
+          } catch {
+            body = String(options.body).slice(0, 500);
+          }
+        }
+
+        // 转换 headers 为普通对象
+        let headers = {};
+        if (options?.headers) {
+          if (options.headers instanceof Headers) {
+            headers = Object.fromEntries(options.headers.entries());
+          } else if (typeof options.headers === 'object') {
+            headers = { ...options.headers };
+          }
+        }
+
+        requestEntry = {
+          timestamp,
+          project: basename(process.cwd()),
+          url: urlStr,
+          method: options?.method || 'GET',
+          headers,
+          body: body,
+          response: null,
+          duration: 0,
+          isStream: body?.stream === true,
+          mainAgent: !!body?.system && Array.isArray(body?.tools) && body.tools.length > 10 &&
+            ['Task', 'Edit', 'Bash'].every(n => body.tools.some(t => t.name === n))
+        };
+      }
+    } catch {}
+
+    const response = await _originalFetch.apply(this, arguments);
+
+    if (requestEntry) {
+      const duration = Date.now() - startTime;
+      requestEntry.duration = duration;
+
+      // 对于流式响应，拦截并捕获内容
+      if (requestEntry.isStream) {
+        try {
+          requestEntry.response = {
+            status: response.status,
+            statusText: response.statusText,
+            headers: Object.fromEntries(response.headers.entries()),
+            body: { events: [] }
+          };
+
+          const originalBody = response.body;
+          const reader = originalBody.getReader();
+          const decoder = new TextDecoder();
+          let streamedContent = '';
+
+          const stream = new ReadableStream({
+            async start(controller) {
+              try {
+                while (true) {
+                  const { done, value } = await reader.read();
+                  if (done) {
+                    // flush decoder 残留字节
+                    streamedContent += decoder.decode();
+                    // 流结束，组装完整的消息对象
+                    try {
+                      const events = streamedContent.split('\n\n')
+                        .filter(block => block.trim())
+                        .map(block => {
+                          // SSE 块可能包含多行: event: xxx\ndata: {...}
+                          const lines = block.split('\n');
+                          const dataLine = lines.find(l => l.startsWith('data: '));
+                          if (dataLine) {
+                            try {
+                              return JSON.parse(dataLine.substring(6));
+                            } catch {
+                              return dataLine.substring(6);
+                            }
+                          }
+                          return null;
+                        })
+                        .filter(Boolean);
+
+                      // 组装完整的 message 对象
+                      const assembledMessage = assembleStreamMessage(events);
+
+                      // 直接使用组装后的 message 对象作为 response.body
+                      requestEntry.response.body = assembledMessage;
+                      appendFileSync(LOG_FILE, JSON.stringify(requestEntry, null, 2) + '\n---\n');
+                    } catch (err) {
+                      requestEntry.response.body = streamedContent.slice(0, 1000);
+                      appendFileSync(LOG_FILE, JSON.stringify(requestEntry, null, 2) + '\n---\n');
+                    }
+                    controller.close();
+                    break;
+                  }
+                  const chunk = decoder.decode(value, { stream: true });
+                  streamedContent += chunk;
+                  controller.enqueue(value);
+                }
+              } catch (err) {
+                controller.error(err);
+              }
+            }
+          });
+
+          // 返回带有代理流的新响应
+          return new Response(stream, {
+            status: response.status,
+            statusText: response.statusText,
+            headers: response.headers
+          });
+        } catch (err) {
+          requestEntry.response = {
+            status: response.status,
+            statusText: response.statusText,
+            headers: Object.fromEntries(response.headers.entries()),
+            body: '[Streaming Response - Capture failed]'
+          };
+          appendFileSync(LOG_FILE, JSON.stringify(requestEntry, null, 2) + '\n---\n');
+        }
+      } else {
+        // 对于非流式响应，可以安全读取body
+        try {
+          const clonedResponse = response.clone();
+          const responseText = await clonedResponse.text();
+          let responseData = null;
+
+          try {
+            responseData = JSON.parse(responseText);
+          } catch {
+            responseData = responseText.slice(0, 1000);
+          }
+
+          requestEntry.response = {
+            status: response.status,
+            statusText: response.statusText,
+            headers: Object.fromEntries(response.headers.entries()),
+            body: responseData
+          };
+
+          appendFileSync(LOG_FILE, JSON.stringify(requestEntry, null, 2) + '\n---\n');
+        } catch (err) {
+          appendFileSync(LOG_FILE, JSON.stringify(requestEntry, null, 2) + '\n---\n');
+        }
+      }
+    }
+
+    return response;
+  };
+}
+
+// 自动执行拦截器设置
+setupInterceptor();