cc-viewer 0.1.3 → 0.1.6

package/README.md

@@ -1,4 +1,4 @@
-# CC Viewer
+# CC-Viewer
 
 Claude Code API 请求监控系统，实时捕获并可视化展示 Claude Code 的所有 API 请求与响应。
 
@@ -11,7 +11,7 @@ npm install -g cc-viewer
 安装完成后运行：
 
 ```bash
-ccviewer
+ccv
 ```
 
 该命令会自动将监控脚本注入到本地安装的 Claude Code 中。之后正常使用 Claude Code，打开浏览器访问 `http://localhost:7008` 即可查看监控界面。
@@ -31,35 +31,54 @@ ccviewer
 
 ### 对话模式
 
-点击右上角「打开对话模式」按钮，将最新 Main Agent 请求的 messages 解析为聊天界面：
+点击右上角「对话模式」按钮，将 Main Agent 的完整对话历史解析为聊天界面：
 
-- 用户消息右对齐（蓝色气泡）
+- 用户消息左对齐（蓝色气泡）
 - Main Agent 回复左对齐（深灰气泡），支持 Markdown 渲染
-- Sub Agent 工具返回左对齐（灰色边框气泡），关联显示工具名称
+- 工具调用结果内联显示在对应的 Assistant 消息内部
 - `thinking` 块默认折叠，点击展开查看思考过程
-- `tool_use` 显示为紧凑的工具调用卡片，包含工具名和参数预览
-- 系统注入标签（`<system-reminder>`、`<project-reminder>` 等）自动折叠，点击标签名展开内容
+- `tool_use` 显示为紧凑的工具调用卡片（Bash、Read、Edit、Write、Glob、Grep、Task 等均有专属展示）
+- 用户选择型消息（AskUserQuestion）以问答形式展示
+- 系统注入标签（`<system-reminder>`、`<project-reminder>` 等）自动折叠
 - 自动过滤系统注入文本，只展示用户的真实输入
+- 支持多 session 分段展示（`/compact`、`/clear` 等操作后自动分段）
+- 每条消息显示精确到秒的时间戳
+
+### Token 消耗统计
+
+Header 区域的「Token 消耗统计」悬浮面板：
+
+- 按模型分组统计 input/output token 数量
+- 显示 cache creation/read 数量及缓存命中率
+- Main Agent 缓存失效倒计时
+
+### 日志管理
+
+通过左上角 CC-Viewer 下拉菜单：
+
+- 导入本地日志：浏览历史日志文件，按项目分组，在新窗口打开
+- 当前日志另存为：下载当前监控的 JSONL 日志文件
+- 导出用户 Prompt：提取并展示所有用户输入，支持 system-reminder 折叠查看
 
 ### 数据解析
 
 | 消息类型 | 识别方式 | 展示 |
 |---------|---------|------|
-| 用户输入 | `role: "user"` + 非系统标签文本 | 右对齐蓝色气泡 |
-| Agent 文本回复 | `role: "assistant"` + `type: "text"` | 左对齐 Markdown 渲染 |
-| Agent 工具调用 | `role: "assistant"` + `type: "tool_use"` | 工具调用卡片 |
+| 用户输入 | `role: "user"` + 非系统标签文本 | 蓝色气泡 |
+| 用户选择 | `[SUGGESTION MODE:]` + `tool_result` | 问答卡片 |
+| 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)
+- 前端：React + Ant Design，暗色主题
 - Markdown 渲染：[marked](https://github.com/markedjs/marked)
 - 后端：Node.js 原生 HTTP 服务 + SSE 实时推送
 - 请求拦截：通过 `globalThis.fetch` 拦截，支持流式响应组装
+- 构建：Vite
 
 ## License
 

package/cli.js

@@ -1,11 +1,25 @@
 #!/usr/bin/env node
 
-import { readFileSync, writeFileSync } from 'node:fs';
+import { readFileSync, writeFileSync, unlinkSync } 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}`;
+const SHOW_ALL_FILE = '/tmp/cc-viewer-show-all';
+
+// 解析 --all 参数
+const showAll = process.argv.includes('--all');
+if (showAll) {
+  try { writeFileSync(SHOW_ALL_FILE, '1'); } catch {}
+} else {
+  try { unlinkSync(SHOW_ALL_FILE); } catch {}
+}
+
 const INJECT_START = '// >>> Start CC Viewer Web Service >>>';
 const INJECT_END = '// <<< Start CC Viewer Web Service <<<';
 const INJECT_IMPORT = "import '../../cc-viewer/interceptor.js';";

package/interceptor.js

@@ -1,6 +1,7 @@
 // LLM Request Interceptor
 // 拦截并记录所有Claude API请求
 import { appendFileSync, mkdirSync } from 'node:fs';
+import { homedir } from 'node:os';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, basename } from 'node:path';
 
@@ -18,7 +19,7 @@ function generateLogFilePath() {
     + 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';
+  const dir = join(homedir(), '.claude', 'cc-viewer');
   try { mkdirSync(dir, { recursive: true }); } catch {}
   return join(dir, `${projectName}_${ts}.jsonl`);
 }
@@ -215,6 +216,7 @@ export function setupInterceptor() {
           response: null,
           duration: 0,
           isStream: body?.stream === true,
+          isHeartbeat: /\/api\/eval\/sdk-/.test(urlStr),
           mainAgent: !!body?.system && Array.isArray(body?.tools) && body.tools.length > 10 &&
             ['Task', 'Edit', 'Bash'].every(n => body.tools.some(t => t.name === n))
         };