cc-viewer 0.1.5 → 0.2.0

package/README.md

@@ -1,6 +1,8 @@
-# CC Viewer
+# CC-Viewer
 
-Claude Code API 请求监控系统，实时捕获并可视化展示 Claude Code 的所有 API 请求与响应。
+Claude Code 请求监控系统，实时捕获并可视化展示 Claude Code 的所有 API 请求与响应。方便开发者监控自己的 Context，以便于 Vibe Coding 过程中回顾和排查问题。
+
+[English](./docs/README.en.md) | [繁體中文](./docs/README.zh-TW.md) | [한국어](./docs/README.ko.md) | [日本語](./docs/README.ja.md) | [Deutsch](./docs/README.de.md) | [Español](./docs/README.es.md) | [Français](./docs/README.fr.md) | [Italiano](./docs/README.it.md) | [Dansk](./docs/README.da.md) | [Polski](./docs/README.pl.md) | [Русский](./docs/README.ru.md) | [العربية](./docs/README.ar.md) | [Norsk](./docs/README.no.md) | [Português (Brasil)](./docs/README.pt-BR.md) | [ไทย](./docs/README.th.md) | [Türkçe](./docs/README.tr.md) | [Українська](./docs/README.uk.md)
 
 ## 使用方法
 
@@ -14,7 +16,17 @@ npm install -g cc-viewer
 ccv
 ```
 
-该命令会自动将监控脚本注入到本地安装的 Claude Code 中。之后正常使用 Claude Code，打开浏览器访问 `http://localhost:7008` 即可查看监控界面。
+该命令会自动将监控脚本注入到本地安装的 Claude Code 中，并在 shell 配置文件（`~/.zshrc` 或 `~/.bashrc`）中添加自动重注入 hook。之后正常使用 Claude Code，打开浏览器访问 `http://localhost:7008` 即可查看监控界面。
+
+Claude Code 更新后无需手动操作，下次运行 `claude` 时会自动检测并重新注入。
+
+### 卸载
+
+```bash
+ccv --uninstall
+```
+
+一键清理 cli.js 中的注入代码和 shell 配置文件中的 hook。
 
 ## 功能
 
@@ -31,35 +43,40 @@ ccv
 
 ### 对话模式
 
-点击右上角「打开对话模式」按钮，将最新 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 下拉菜单：
 
-| 消息类型 | 识别方式 | 展示 |
-|---------|---------|------|
-| 用户输入 | `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 |
+- 导入本地日志：浏览历史日志文件，按项目分组，在新窗口打开
+- 当前日志另存为：下载当前监控的 JSONL 日志文件
+- 导出用户 Prompt：提取并展示所有用户输入，支持 system-reminder 折叠查看
 
-对于 `Task` 类型的工具调用，会从 `input` 中提取 `subagent_type` 和 `description` 来标识具体的 Sub Agent。
+### 多语言支持
 
-## 技术栈
+CC-Viewer 支持 18 种语言，根据系统语言环境自动切换：
 
-- 前端：原生 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` 拦截，支持流式响应组装
+简体中文 | English | 繁體中文 | 한국어 | Deutsch | Español | Français | Italiano | Dansk | 日本語 | Polski | Русский | العربية | Norsk | Português (Brasil) | ไทย | Türkçe | Українська
 
 ## License
 

package/cli.js

@@ -1,8 +1,10 @@
 #!/usr/bin/env node
 
-import { readFileSync, writeFileSync } from 'node:fs';
+import { readFileSync, writeFileSync, unlinkSync, existsSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { homedir } from 'node:os';
+import { t } from './i18n.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
@@ -10,30 +12,154 @@ 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';
+
+const SHELL_HOOK_START = '# >>> CC-Viewer Auto-Inject >>>';
+const SHELL_HOOK_END = '# <<< CC-Viewer Auto-Inject <<<';
 
-// Claude Code cli.js 的路径
 const cliPath = resolve(__dirname, '../@anthropic-ai/claude-code/cli.js');
 
-try {
-  const content = readFileSync(cliPath, 'utf-8');
+function getShellConfigPath() {
+  const shell = process.env.SHELL || '';
+  if (shell.includes('zsh')) return resolve(homedir(), '.zshrc');
+  if (shell.includes('bash')) {
+    const bashProfile = resolve(homedir(), '.bash_profile');
+    if (process.platform === 'darwin' && existsSync(bashProfile)) return bashProfile;
+    return resolve(homedir(), '.bashrc');
+  }
+  return resolve(homedir(), '.zshrc');
+}
+
+function buildShellHook() {
+  return `${SHELL_HOOK_START}
+claude() {
+  local cli_js="$HOME/.npm-global/lib/node_modules/@anthropic-ai/claude-code/cli.js"
+  if [ -f "$cli_js" ] && ! grep -q "CC Viewer" "$cli_js" 2>/dev/null; then
+    ccv 2>/dev/null
+  fi
+  command claude "$@"
+}
+${SHELL_HOOK_END}`;
+}
+
+function installShellHook() {
+  const configPath = getShellConfigPath();
+  try {
+    const content = existsSync(configPath) ? readFileSync(configPath, 'utf-8') : '';
+    if (content.includes(SHELL_HOOK_START)) {
+      return { path: configPath, status: 'exists' };
+    }
+    const hook = buildShellHook();
+    const newContent = content.endsWith('\n') ? content + '\n' + hook + '\n' : content + '\n\n' + hook + '\n';
+    writeFileSync(configPath, newContent);
+    return { path: configPath, status: 'installed' };
+  } catch (err) {
+    return { path: configPath, status: 'error', error: err.message };
+  }
+}
 
+function removeShellHook() {
+  const configPath = getShellConfigPath();
+  try {
+    if (!existsSync(configPath)) return { path: configPath, status: 'not_found' };
+    const content = readFileSync(configPath, 'utf-8');
+    if (!content.includes(SHELL_HOOK_START)) return { path: configPath, status: 'clean' };
+    const regex = new RegExp(`\\n?${SHELL_HOOK_START}[\\s\\S]*?${SHELL_HOOK_END}\\n?`, 'g');
+    const newContent = content.replace(regex, '\n');
+    writeFileSync(configPath, newContent);
+    return { path: configPath, status: 'removed' };
+  } catch (err) {
+    return { path: configPath, status: 'error', error: err.message };
+  }
+}
+
+function injectCliJs() {
+  const content = readFileSync(cliPath, 'utf-8');
   if (content.includes(INJECT_START)) {
-    console.log('✅ CC Viewer 已注入，无需重复操作');
+    return 'exists';
+  }
+  const lines = content.split('\n');
+  lines.splice(2, 0, INJECT_BLOCK);
+  writeFileSync(cliPath, lines.join('\n'));
+  return 'injected';
+}
+
+function removeCliJsInjection() {
+  try {
+    if (!existsSync(cliPath)) return 'not_found';
+    const content = readFileSync(cliPath, 'utf-8');
+    if (!content.includes(INJECT_START)) return 'clean';
+    const regex = new RegExp(`${INJECT_START}\\n${INJECT_IMPORT}\\n${INJECT_END}\\n?`, 'g');
+    writeFileSync(cliPath, content.replace(regex, ''));
+    return 'removed';
+  } catch {
+    return 'error';
+  }
+}
+
+// === 主逻辑 ===
+
+const isUninstall = process.argv.includes('--uninstall');
+
+if (isUninstall) {
+  const cliResult = removeCliJsInjection();
+  const shellResult = removeShellHook();
+
+  if (cliResult === 'removed' || cliResult === 'clean') {
+    console.log(t('cli.uninstall.cliCleaned'));
+  } else if (cliResult === 'not_found') {
+    console.log(t('cli.uninstall.cliNotFound'));
+  } else {
+    console.log(t('cli.uninstall.cliFail'));
+  }
+
+  if (shellResult.status === 'removed') {
+    console.log(t('cli.uninstall.hookRemoved', { path: shellResult.path }));
+  } else if (shellResult.status === 'clean' || shellResult.status === 'not_found') {
+    console.log(t('cli.uninstall.hookClean', { path: shellResult.path }));
+  } else {
+    console.log(t('cli.uninstall.hookFail', { error: shellResult.error }));
+  }
+
+  try { unlinkSync(SHOW_ALL_FILE); } catch {}
+
+  console.log(t('cli.uninstall.done'));
+  process.exit(0);
+}
+
+// 正常安装流程
+const showAll = process.argv.includes('--all');
+if (showAll) {
+  try { writeFileSync(SHOW_ALL_FILE, '1'); } catch {}
+} else {
+  try { unlinkSync(SHOW_ALL_FILE); } catch {}
+}
+
+try {
+  const cliResult = injectCliJs();
+  if (cliResult === 'exists') {
+    console.log(t('cli.inject.exists'));
   } 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 的实际运行地址`);
-  console.log(`如果后续功能失效，请重新执行一次 ccviewer 命令即可`);
+    console.log(t('cli.inject.success'));
+  }
+
+  const shellResult = installShellHook();
+  if (shellResult.status === 'installed') {
+    console.log(t('cli.hook.installed', { path: shellResult.path }));
+  } else if (shellResult.status === 'exists') {
+    console.log(t('cli.hook.exists', { path: shellResult.path }));
+  } else {
+    console.log(t('cli.hook.fail', { error: shellResult.error }));
+  }
+
+  console.log(t('cli.usage.hint'));
+  console.log(t('cli.usage.uninstallHint'));
 } catch (err) {
   if (err.code === 'ENOENT') {
-    console.error('❌ 找不到 Claude Code cli.js:', cliPath);
-    console.error('   请确认 @anthropic-ai/claude-code 已安装');
+    console.error(t('cli.inject.notFound', { path: cliPath }));
+    console.error(t('cli.inject.notFoundHint'));
   } else {
-    console.error('❌ 注入失败:', err.message);
+    console.error(t('cli.inject.fail', { error: err.message }));
   }
   process.exit(1);
 }

package/i18n.js

@@ -0,0 +1,85 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const SUPPORTED_LANGS = [
+  'zh', 'en', 'zh-TW', 'ko', 'de', 'es', 'fr', 'it', 'da', 'ja',
+  'pl', 'ru', 'ar', 'no', 'pt-BR', 'th', 'tr', 'uk',
+];
+
+function loadLocale(lang) {
+  try {
+    return JSON.parse(readFileSync(join(__dirname, 'locales', `${lang}.json`), 'utf-8'));
+  } catch {
+    return {};
+  }
+}
+
+const locales = {};
+for (const lang of SUPPORTED_LANGS) {
+  locales[lang] = loadLocale(lang);
+}
+
+let currentLang = 'zh';
+
+// 语言代码 → locale key 映射
+const LANG_MAP = {
+  zh: 'zh', 'zh-cn': 'zh', 'zh-hans': 'zh',
+  'zh-tw': 'zh-TW', 'zh-hk': 'zh-TW', 'zh-hant': 'zh-TW',
+  en: 'en',
+  ko: 'ko',
+  de: 'de',
+  es: 'es',
+  fr: 'fr',
+  it: 'it',
+  da: 'da',
+  ja: 'ja',
+  pl: 'pl',
+  ru: 'ru',
+  ar: 'ar',
+  no: 'no', nb: 'no', nn: 'no',
+  pt: 'pt-BR', 'pt-br': 'pt-BR',
+  th: 'th',
+  tr: 'tr',
+  uk: 'uk',
+};
+
+function resolveLocale(raw) {
+  if (!raw) return 'en';
+  // 去掉 .UTF-8 等后缀，统一小写
+  const cleaned = raw.split('.')[0].replace(/_/g, '-').toLowerCase();
+  // 精确匹配
+  if (LANG_MAP[cleaned]) return LANG_MAP[cleaned];
+  // 取主语言
+  const primary = cleaned.split('-')[0];
+  if (LANG_MAP[primary]) return LANG_MAP[primary];
+  return 'en';
+}
+
+export function detectLanguage() {
+  const lang = process.env.LANG || process.env.LANGUAGE || process.env.LC_ALL || '';
+  return resolveLocale(lang);
+}
+
+export function setLang(lang) {
+  currentLang = locales[lang] ? lang : 'en';
+}
+
+export function getLang() {
+  return currentLang;
+}
+
+export function t(key, params) {
+  let text = locales[currentLang]?.[key] || locales['en'][key] || key;
+  if (params) {
+    for (const [k, v] of Object.entries(params)) {
+      text = text.replaceAll(`{${k}}`, v);
+    }
+  }
+  return text;
+}
+
+// 自动检测并设置语言
+setLang(detectLanguage());

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))
         };