cc-viewer 1.2.5 → 1.2.8

package/README.md

@@ -1,8 +1,8 @@
 # CC-Viewer
 
-A request monitoring system for Claude Code that captures and visualizes all API requests and responses in real time. Helps developers monitor their Context for reviewing and debugging during Vibe Coding.
+A Claude Code request monitoring system that captures and visualizes all API requests and responses from Claude Code in real time (raw text, unredacted). Helps developers monitor their context for review and troubleshooting during Vibe Coding sessions.
 
-[简体中文](./docs/README.zh.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)
+English | [简体中文](./docs/README.zh.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)
 
 ## Usage
 
@@ -12,32 +12,40 @@ A request monitoring system for Claude Code that captures and visualizes all API
 npm install -g cc-viewer
 ```
 
-### Run & Auto-Configuration
+### Running and Auto-Configuration
 
 ```bash
 ccv
 ```
 
-This command automatically detects your Claude Code installation method (NPM or Native Install) and configures itself.
+This command automatically detects how Claude Code is installed locally (NPM or Native Install) and adapts accordingly.
 
-- **NPM Install**: Injects interceptor script into `cli.js` of Claude Code.
-- **Native Install**: Detects `claude` binary, sets up a local transparent proxy, and configures a Zsh Shell Hook to route traffic through the proxy automatically.
+- **NPM Install**: Automatically injects an interceptor script into Claude Code's `cli.js`.
+- **Native Install**: Automatically detects the `claude` binary, configures a local transparent proxy, and sets up a Zsh Shell Hook to forward traffic automatically.
 
 ### Configuration Override
 
-If you need to use a custom API endpoint (e.g., corporate proxy), simply configure it in `~/.claude/settings.json` or set `ANTHROPIC_BASE_URL` environment variable. `ccv` will respect these settings and forward requests correctly.
+If you need to use a custom API endpoint (e.g., a corporate proxy), simply configure it in `~/.claude/settings.json` or set the `ANTHROPIC_BASE_URL` environment variable. `ccv` will automatically detect and correctly forward requests.
 
 ### Silent Mode
 
-By default, `ccv` runs in silent mode when wrapping `claude`, ensuring your terminal output remains clean and identical to the original Claude Code experience. All logs are captured in the background and visible at `http://localhost:7008`.
+By default, `ccv` runs in silent mode when wrapping `claude`, keeping your terminal output clean and consistent with the native experience. All logs are captured in the background and can be viewed at `http://localhost:7008`.
 
-Once configured, use `claude` as usual. Open `http://localhost:7008` to view the monitoring interface.
+Once configured, use the `claude` command as normal. Visit `http://localhost:7008` to access the monitoring interface.
 
 ### Troubleshooting
 
-- **Mixed Output**: If you see `[CC-Viewer]` debug logs mixed with Claude's output, please update to the latest version (`npm install -g cc-viewer`).
-- **Connection Refused**: Ensure `ccv` background process is running. Running `ccv` or `claude` (after hook installation) should start it automatically.
-- **Empty Body**: If you see "No Body" in the viewer, it might be due to non-standard SSE formats. The viewer now attempts to capture raw content as a fallback.
+If you encounter issues starting cc-viewer, here is the ultimate troubleshooting approach:
+
+Step 1: Open Claude Code in any directory.
+
+Step 2: Give Claude Code the following instruction:
+```
+I have installed the cc-viewer npm package but cannot get it to start. Please check cc-viewer's cli.js and findcc.js, and adapt them to the local Claude Code deployment based on the specifics. Keep the scope of changes as constrained as possible within findcc.js.
+```
+Letting Claude Code diagnose the issue itself is more effective than asking anyone or reading any documentation!
+
+After the above instruction is completed, `findcc.js` will be updated. If your project frequently requires local deployment, or if forked code often needs to resolve installation issues, keeping this file lets you simply copy it next time. At this stage, many projects and companies using Claude Code are not deploying on Mac but rather on server-side hosted environments, so the author has separated `findcc.js` to make it easier to track cc-viewer source code updates going forward.
 
 ### Uninstall
 
@@ -54,77 +62,49 @@ ccv --version
 ## Features
 
 ### Request Monitoring (Raw Mode)
-
-- Real-time capture of all API requests from Claude Code, including streaming responses
-- Left panel shows request method, URL, duration, and status code
-- Automatically identifies and labels Main Agent and Sub Agent requests (with sub-types: Bash, Task, Plan, General)
-- Request list auto-scrolls to the selected item (centered on mode switch, nearest on manual click)
-- Right panel supports Request / Response tab switching
-- Request Body expands `messages`, `system`, `tools` one level by default
-- Response Body fully expanded by default
-- Toggle between JSON view and plain text view
-- One-click JSON content copy
-- MainAgent requests support Body Diff JSON, showing a collapsible diff with the previous MainAgent request (only changed/added fields)
-- Diff section supports JSON/Text view switching and one-click copy
-- "Expand Diff" setting: when enabled, MainAgent requests auto-expand the diff section
-- Body Diff JSON tooltip is dismissible; once closed, the preference is persisted server-side and never shown again
-- Sensitive headers (`x-api-key`, `authorization`) are automatically masked in JSONL log files to prevent credential leakage
+<img width="1500" height="720" alt="image" src="https://github.com/user-attachments/assets/519dd496-68bd-4e76-84d7-2a3d14ae3f61" />
+- Captures all API requests made by Claude Code in real time, ensuring raw content rather than truncated logs (this is important!!!)
+- Automatically identifies and labels Main Agent and Sub Agent requests (subtypes: Bash, Task, Plan, General)
+- MainAgent requests support Body Diff JSON, showing a collapsed diff of changes from the previous MainAgent request (only changed/added fields)
 - Inline token usage stats per request (input/output tokens, cache creation/read, hit rate)
-- Compatible with Claude Code Router (CCR) and other proxy setups — requests are matched by API path pattern as a fallback
-
-### Chat Mode
-
-Click the "Chat mode" button in the top right to parse Main Agent's full conversation history into a chat interface:
-
-- User messages right-aligned (blue bubbles), Main Agent replies left-aligned (dark bubbles) with Markdown rendering
-- `/compact` messages auto-detected and displayed collapsed, click to expand full summary
-- Tool call results displayed inline within the corresponding Assistant message
-- `thinking` blocks collapsed by default, rendered as Markdown, click to expand; supports one-click translation
-- `tool_use` shown as compact tool call cards (Bash, Read, Edit, Write, Glob, Grep, Task each have dedicated displays)
-- Task (SubAgent) tool results rendered as Markdown
-- User selection messages (AskUserQuestion) shown in Q&A format
-- System tags (`<system-reminder>`, `<project-reminder>`, etc.) auto-collapsed
-- Skill loaded messages auto-detected and collapsed, showing skill name; click to expand full documentation with Markdown rendering
-- Skills reminder auto-detected and collapsed
-- System text auto-filtered, showing only real user input
-- Multi-session segmented display (auto-segmented after `/compact`, `/clear`, etc.)
-- Each message shows a timestamp accurate to the second, derived from API request timing
-- Each message has a "View Request" link to jump back to raw mode at the corresponding API request
-- Bidirectional mode sync: switching to chat mode scrolls to the conversation matching the selected request; switching back scrolls to the selected request
-- Settings panel: toggle default collapse state for tool results and thinking blocks
-- Global settings: toggle filtering of irrelevant requests (count_tokens, heartbeat) from the request list
-
-### Translation
-
-- Thinking blocks and assistant messages support one-click translation
-- Powered by Claude Haiku API, uses `x-api-key` authentication only (OAuth session tokens are excluded to prevent context pollution)
-- Automatically captures haiku model name from mainAgent requests; defaults to `claude-haiku-4-5-20251001`
-- Translation results are cached; click again to toggle back to the original text
-- Loading spinner animation shown during translation
-- (?) help icon on `authorization` header links to concept doc explaining context pollution
-
-### Token Stats
-
-Hover panel in the header area:
-
-- Token counts grouped by model (input/output)
-- Cache creation/read counts and cache hit rate
-- Cache rebuild statistics: grouped by reason (TTL, system/tools/model change, message truncation/modification, key change) with count and cache_creation tokens
-- Tool usage statistics: call counts per tool, sorted by frequency
-- Skill usage statistics: call counts per skill, sorted by frequency
-- Concept help (?) icons: click to view built-in documentation for MainAgent, CacheRebuild, and each tool
-- Main Agent cache expiration countdown
+- Compatible with Claude Code Router (CCR) and other proxy scenarios — falls back to API path pattern matching
+
+### Conversation Mode
+
+Click the "Conversation Mode" button in the top-right corner to parse the Main Agent's full conversation history into a chat interface:
+<img width="1500" height="730" alt="image" src="https://github.com/user-attachments/assets/c973f142-748b-403f-b2b7-31a5d81e33e6" />
+
+
+- Agent Team display is not yet supported
+- User messages are right-aligned (blue bubbles), Main Agent replies are left-aligned (dark bubbles)
+- `thinking` blocks are collapsed by default, rendered in Markdown, and can be expanded to view the reasoning process; one-click translation is supported (feature is still unstable)
+- User selection messages (AskUserQuestion) are displayed in a Q&A format
+- Bidirectional mode sync: switching to Conversation Mode automatically navigates to the conversation corresponding to the selected request; switching back to Raw Mode automatically navigates to the selected request
+- Settings panel: toggle the default collapsed state of tool results and thinking blocks
+
+
+### Statistics Tool
+
+The "Data Statistics" floating panel in the header area:
+<img width="1500" height="729" alt="image" src="https://github.com/user-attachments/assets/b23f9a81-fc3d-4937-9700-e70d84e4e5ce" />
+
+- Displays cache creation/read counts and cache hit rate
+- Cache rebuild statistics: grouped by reason (TTL, system/tools/model changes, message truncation/modification, key changes) showing counts and cache_creation tokens
+- Tool usage statistics: displays call frequency for each tool sorted by number of calls
+- Skill usage statistics: displays call frequency for each skill sorted by number of calls
+- Concept help (?) icon: click to view built-in documentation for MainAgent, CacheRebuild, and each tool
 
 ### Log Management
 
-Via the CC-Viewer dropdown menu in the top left:
+Via the CC-Viewer dropdown menu in the top-left corner:
+<img width="1200" height="672" alt="image" src="https://github.com/user-attachments/assets/8cf24f5b-9450-4790-b781-0cd074cd3b39" />
 
-- Import local logs: browse historical log files, grouped by project, opens in new window
-- Load local JSONL file: directly select and load a local `.jsonl` file (up to 500MB)
-- Download current log: download the current monitoring JSONL log file
+- Import local logs: browse historical log files grouped by project, open in a new window
+- Load local JSONL file: directly select a local `.jsonl` file to load and view (supports up to 500MB)
+- Save current log as: download the current monitoring JSONL log file
 - Merge logs: combine multiple JSONL log files into a single session for unified analysis
-- Export user prompts: extract and display all user inputs with three view modes — Original (raw content), Context (with system tags collapsible), and Text (plain text only); slash commands (`/model`, `/context`, etc.) shown as standalone entries; command-related tags auto-hidden from prompt content
-- Export prompts to TXT: export user prompts (text only, excluding system tags) to a local `.txt` file
+- View user Prompts: extract and display all user inputs, supporting three view modes — Raw mode (original content), Context mode (system tags collapsible), Text mode (plain text); slash commands (`/model`, `/context`, etc.) shown as standalone entries; command-related tags are auto-hidden from Prompt content
+- Export Prompts to TXT: export user Prompts (plain text, excluding system tags) to a local `.txt` file
 
 ### Multi-language Support
 

package/cli.js

@@ -1,58 +1,24 @@
 #!/usr/bin/env node
 
 import { readFileSync, writeFileSync, existsSync } from 'node:fs';
-import { resolve, join } from 'node:path';
+import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { homedir } from 'node:os';
-import { spawn, execSync } from 'node:child_process';
+import { spawn } from 'node:child_process';
 import { t } from './i18n.js';
+import { INJECT_IMPORT, resolveCliPath, resolveNativePath, buildShellCandidates } from './findcc.js';
 
 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 SHELL_HOOK_START = '# >>> CC-Viewer Auto-Inject >>>';
 const SHELL_HOOK_END = '# <<< CC-Viewer Auto-Inject <<<';
 
-// Claude Code cli.js 包名候选列表，按优先级排列
-const CLAUDE_CODE_PACKAGES = [
-  '@anthropic-ai/claude-code',
-  '@ali/claude-code',
-];
-
-function getGlobalNodeModulesDir() {
-  try {
-    return execSync('npm root -g', { encoding: 'utf-8' }).trim();
-  } catch {
-    return null;
-  }
-}
-
-function resolveClaudeCodeCliPath() {
-  // 候选基础目录：__dirname 的上级（适用于常规 npm 安装）+ 全局 node_modules（适用于符号链接安装）
-  const baseDirs = [resolve(__dirname, '..')];
-  const globalRoot = getGlobalNodeModulesDir();
-  if (globalRoot && globalRoot !== resolve(__dirname, '..')) {
-    baseDirs.push(globalRoot);
-  }
-
-  for (const baseDir of baseDirs) {
-    for (const packageName of CLAUDE_CODE_PACKAGES) {
-      const candidate = join(baseDir, packageName, 'cli.js');
-      if (existsSync(candidate)) {
-        return candidate;
-      }
-    }
-  }
-  // 兜底：返回全局目录下的默认路径，便于错误提示
-  return join(globalRoot || resolve(__dirname, '..'), CLAUDE_CODE_PACKAGES[0], 'cli.js');
-}
-
-const cliPath = resolveClaudeCodeCliPath();
+const cliPath = resolveCliPath();
 
 function getShellConfigPath() {
   const shell = process.env.SHELL || '';
@@ -80,10 +46,11 @@ claude() {
 ${SHELL_HOOK_END}`;
   }
 
+  const candidates = buildShellCandidates();
   return `${SHELL_HOOK_START}
 claude() {
   local cli_js=""
-  for candidate in "$HOME/.npm-global/lib/node_modules/@anthropic-ai/claude-code/cli.js" "$HOME/.npm-global/lib/node_modules/@ali/claude-code/cli.js"; do
+  for candidate in ${candidates}; do
     if [ -f "$candidate" ]; then
       cli_js="$candidate"
       break
@@ -161,37 +128,6 @@ function removeCliJsInjection() {
   }
 }
 
-function getNativeInstallPath() {
-  // 1. 尝试 which/command -v（继承当前 process.env PATH）
-  for (const cmd of ['which claude', 'command -v claude']) {
-    try {
-      const result = execSync(cmd, { encoding: 'utf-8', shell: true, env: process.env }).trim();
-      // 排除 shell function 的输出（多行说明不是路径）
-      if (result && !result.includes('\n') && existsSync(result)) {
-        return result;
-      }
-    } catch {
-      // ignore
-    }
-  }
-
-  // 2. 检查常见 native 安装路径
-  const home = homedir();
-  const candidates = [
-    join(home, '.claude', 'local', 'claude'),
-    '/usr/local/bin/claude',
-    join(home, '.local', 'bin', 'claude'),
-    '/opt/homebrew/bin/claude',
-  ];
-  for (const p of candidates) {
-    if (existsSync(p)) {
-      return p;
-    }
-  }
-
-  return null;
-}
-
 async function runProxyCommand(args) {
   try {
     // Dynamic import to avoid side effects when just installing
@@ -229,49 +165,24 @@ async function runProxyCommand(args) {
     }
 
     const env = { ...process.env };
-    // [Debug] Verify hook execution
-    // console.error(`[CC-Viewer] Hook triggered for: ${cmd} ${cmdArgs.join(' ')}`);
-
     // Determine the path to the native 'claude' executable
     if (cmd === 'claude') {
-      const nativePath = getNativeInstallPath();
+      const nativePath = resolveNativePath();
       if (nativePath) {
         cmd = nativePath;
       }
     }
     env.ANTHROPIC_BASE_URL = `http://127.0.0.1:${proxyPort}`;
 
-    // [Debug] Force ANTHROPIC_BASE_URL via process.env is not enough for some reason?
-    // Let's also check if we can pass it via command line args if supported, but claude cli doesn't seem to have a --base-url arg documented.
-    // However, maybe the issue is that 'env' in spawn options isn't overriding what claude internal config has?
-    // Claude Code likely reads from ~/.claude/settings.json which might take precedence over env vars?
-    // No, usually env vars take precedence.
-
-    // [Fix] Check if user has ANTHROPIC_BASE_URL in settings.json and use it in proxy.js
-    // We already do that in proxy.js: getOriginalBaseUrl().
-
-    // [Crucial Fix]
-    // Use --settings JSON argument to force ANTHROPIC_BASE_URL configuration
-    // This is safer and more reliable than env vars which might be ignored.
-
-    // console.error(`[CC-Viewer] Setting ANTHROPIC_BASE_URL to ${env.ANTHROPIC_BASE_URL}`);
-
-    // Construct settings JSON string
-    // Note: We need to be careful with quoting for the shell/spawn.
-    // Since we use spawn without shell, we can pass the JSON string directly as an argument.
     const settingsJson = JSON.stringify({
       env: {
         ANTHROPIC_BASE_URL: env.ANTHROPIC_BASE_URL
       }
     });
 
-    // Inject --settings argument
-    // We put it at the beginning of args to ensure it's picked up
     cmdArgs.unshift(settingsJson);
     cmdArgs.unshift('--settings');
 
-    // Force non-interactive if needed? No, we want interactive.
-
     const child = spawn(cmd, cmdArgs, { stdio: 'inherit', env });
 
     child.on('exit', (code) => {
@@ -292,8 +203,14 @@ async function runProxyCommand(args) {
 
 const args = process.argv.slice(2);
 const isUninstall = args.includes('--uninstall');
+const isHelp = args.includes('--help') || args.includes('-h') || args[0] === 'help';
 const isVersion = args.includes('--v') || args.includes('--version') || args.includes('-v');
 
+if (isHelp) {
+  console.log(t('cli.help'));
+  process.exit(0);
+}
+
 if (isVersion) {
   try {
     const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8'));
@@ -335,7 +252,7 @@ if (args[0] === 'run') {
   if (existsSync(cliPath)) {
     mode = 'npm';
   } else {
-    const nativePath = getNativeInstallPath();
+    const nativePath = resolveNativePath();
     if (nativePath) {
       mode = 'native';
     }