cc-viewer 1.2.2 → 1.2.5

package/README.md

@@ -6,19 +6,38 @@ A request monitoring system for Claude Code that captures and visualizes all API
 
 ## Usage
 
+### Installation
+
 ```bash
 npm install -g cc-viewer
 ```
 
-After installation, run:
+### Run & Auto-Configuration
 
 ```bash
 ccv
 ```
 
-Then use Claude Code as usual and open `http://localhost:7008` in your browser to view the monitoring interface.
+This command automatically detects your Claude Code installation method (NPM or Native Install) and configures itself.
+
+- **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.
+
+### 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.
+
+### 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`.
 
-After Claude Code updates, no manual action is needed — the next time you run `claude`, it will automatically detect and reconfigure.
+Once configured, use `claude` as usual. Open `http://localhost:7008` to view 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.
 
 ### Uninstall
 
@@ -26,6 +45,12 @@ After Claude Code updates, no manual action is needed — the next time you run
 ccv --uninstall
 ```
 
+### Check Version
+
+```bash
+ccv --version
+```
+
 ## Features
 
 ### Request Monitoring (Raw Mode)

package/cli.js

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
 
 import { readFileSync, writeFileSync, existsSync } from 'node:fs';
-import { resolve } from 'node:path';
+import { resolve, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { homedir } from 'node:os';
+import { spawn, execSync } from 'node:child_process';
 import { t } from './i18n.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -17,7 +18,41 @@ 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 <<<';
 
-const cliPath = resolve(__dirname, '../@anthropic-ai/claude-code/cli.js');
+// 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();
 
 function getShellConfigPath() {
   const shell = process.env.SHELL || '';
@@ -30,11 +65,31 @@ function getShellConfigPath() {
   return resolve(homedir(), '.zshrc');
 }
 
-function buildShellHook() {
+function buildShellHook(isNative) {
+  if (isNative) {
+    return `${SHELL_HOOK_START}
+claude() {
+  # Avoid recursion if ccv invokes claude
+  if [ "$1" = "--ccv-internal" ]; then
+    shift
+    command claude "$@"
+    return
+  fi
+  ccv run -- claude --ccv-internal "$@"
+}
+${SHELL_HOOK_END}`;
+  }
+
   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
+  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
+    if [ -f "$candidate" ]; then
+      cli_js="$candidate"
+      break
+    fi
+  done
+  if [ -n "$cli_js" ] && ! grep -q "CC Viewer" "$cli_js" 2>/dev/null; then
     ccv 2>/dev/null
   fi
   command claude "$@"
@@ -42,14 +97,23 @@ claude() {
 ${SHELL_HOOK_END}`;
 }
 
-function installShellHook() {
+function installShellHook(isNative) {
   const configPath = getShellConfigPath();
   try {
-    const content = existsSync(configPath) ? readFileSync(configPath, 'utf-8') : '';
+    let content = existsSync(configPath) ? readFileSync(configPath, 'utf-8') : '';
+
     if (content.includes(SHELL_HOOK_START)) {
-      return { path: configPath, status: 'exists' };
+      // Check if existing hook matches desired mode
+      const isNativeHook = content.includes('ccv run -- claude');
+      if (!!isNative === !!isNativeHook) {
+        return { path: configPath, status: 'exists' };
+      }
+      // Mismatch: remove old hook first
+      removeShellHook();
+      content = existsSync(configPath) ? readFileSync(configPath, 'utf-8') : '';
     }
-    const hook = buildShellHook();
+
+    const hook = buildShellHook(isNative);
     const newContent = content.endsWith('\n') ? content + '\n' + hook + '\n' : content + '\n\n' + hook + '\n';
     writeFileSync(configPath, newContent);
     return { path: configPath, status: 'installed' };
@@ -97,25 +161,160 @@ 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
+    const { startProxy } = await import('./proxy.js');
+    const proxyPort = await startProxy();
+
+    // args = ['run', '--', 'command', 'claude', ...] or ['run', 'claude', ...]
+    // Our hook uses: ccv run -- claude --ccv-internal "$@"
+    // args[0] is 'run'.
+    // If args[1] is '--', then command starts at args[2].
+
+    let cmdStartIndex = 1;
+    if (args[1] === '--') {
+      cmdStartIndex = 2;
+    }
+
+    let cmd = args[cmdStartIndex];
+    if (!cmd) {
+      console.error('No command provided to run.');
+      process.exit(1);
+    }
+    let cmdArgs = args.slice(cmdStartIndex + 1);
+
+    // If cmd is 'claude' and next arg is '--ccv-internal', remove it
+    // and we must use 'command claude' to avoid infinite recursion of the shell function?
+    // Node spawn doesn't use shell functions, so 'claude' should resolve to the binary in PATH.
+    // BUT, if 'claude' is a function in the current shell, spawn won't see it unless we use shell:true.
+    // We are using shell:false (default).
+    // So spawn('claude') should find /usr/local/bin/claude (the binary).
+    // The issue might be that ccv itself is running in a way that PATH is weird?
+
+    // Wait, the shell hook adds '--ccv-internal'. We should strip it before spawning.
+    if (cmdArgs[0] === '--ccv-internal') {
+      cmdArgs.shift();
+    }
+
+    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();
+      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) => {
+      process.exit(code);
+    });
+
+    child.on('error', (err) => {
+      console.error('Failed to start command:', err);
+      process.exit(1);
+    });
+  } catch (err) {
+    console.error('Proxy error:', err);
+    process.exit(1);
+  }
+}
+
 // === 主逻辑 ===
 
-const isUninstall = process.argv.includes('--uninstall');
-const isVersion = process.argv.includes('--v') || process.argv.includes('--version');
+const args = process.argv.slice(2);
+const isUninstall = args.includes('--uninstall');
+const isVersion = args.includes('--v') || args.includes('--version') || args.includes('-v');
 
 if (isVersion) {
-  const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8'));
-  console.log(`cc-viewer v${pkg.version}`);
+  try {
+    const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8'));
+    console.log(`cc-viewer v${pkg.version}`);
+  } catch (e) {
+    console.error('Failed to read version:', e.message);
+  }
   process.exit(0);
 }
 
-if (isUninstall) {
+if (args[0] === 'run') {
+  runProxyCommand(args);
+} else if (args.includes('--uninstall')) {
   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'));
+    // console.log(t('cli.uninstall.cliNotFound'));
+    // Silent is better for mixed mode uninstall
   } else {
     console.log(t('cli.uninstall.cliFail'));
   }
@@ -130,36 +329,72 @@ if (isUninstall) {
 
   console.log(t('cli.uninstall.done'));
   process.exit(0);
-}
-
-// 正常安装流程
-try {
-  const cliResult = injectCliJs();
-  const shellResult = installShellHook();
-
-  if (cliResult === 'exists' && shellResult.status === 'exists') {
-    console.log(t('cli.alreadyWorking'));
+} else {
+  // Installation Logic
+  let mode = 'unknown';
+  if (existsSync(cliPath)) {
+    mode = 'npm';
   } else {
-    if (cliResult === 'exists') {
-      console.log(t('cli.inject.exists'));
-    } else {
-      console.log(t('cli.inject.success'));
-    }
-
-    if (shellResult.status === 'installed') {
-      console.log('All READY!');
-    } else if (shellResult.status !== 'exists') {
-      console.log(t('cli.hook.fail', { error: shellResult.error }));
+    const nativePath = getNativeInstallPath();
+    if (nativePath) {
+      mode = 'native';
     }
   }
 
-  console.log(t('cli.usage.hint'));
-} catch (err) {
-  if (err.code === 'ENOENT') {
+  if (mode === 'unknown') {
     console.error(t('cli.inject.notFound', { path: cliPath }));
-    console.error(t('cli.inject.notFoundHint'));
+    console.error('Also could not find native "claude" command in PATH.');
+    console.error('Please make sure @anthropic-ai/claude-code is installed.');
+    process.exit(1);
+  }
+
+  if (mode === 'npm') {
+    try {
+      const cliResult = injectCliJs();
+      const shellResult = installShellHook(false);
+
+      if (cliResult === 'exists' && shellResult.status === 'exists') {
+        console.log(t('cli.alreadyWorking'));
+      } else {
+        if (cliResult === 'exists') {
+          console.log(t('cli.inject.exists'));
+        } else {
+          console.log(t('cli.inject.success'));
+        }
+
+        if (shellResult.status === 'installed') {
+          console.log('All READY!');
+        } else if (shellResult.status !== 'exists') {
+          console.log(t('cli.hook.fail', { error: shellResult.error }));
+        }
+      }
+      console.log(t('cli.usage.hint'));
+    } catch (err) {
+      if (err.code === 'ENOENT') {
+        console.error(t('cli.inject.notFound', { path: cliPath }));
+        console.error(t('cli.inject.notFoundHint'));
+      } else {
+        console.error(t('cli.inject.fail', { error: err.message }));
+      }
+      process.exit(1);
+    }
   } else {
-    console.error(t('cli.inject.fail', { error: err.message }));
+    // Native Mode
+    try {
+      console.log('Detected Claude Code Native Install.');
+      const shellResult = installShellHook(true);
+
+      if (shellResult.status === 'exists') {
+        console.log(t('cli.alreadyWorking'));
+      } else if (shellResult.status === 'installed') {
+        console.log('Native Hook Installed! All READY!');
+      } else {
+        console.log(t('cli.hook.fail', { error: shellResult.error }));
+      }
+      console.log(t('cli.usage.hint'));
+    } catch (err) {
+      console.error('Failed to install native hook:', err);
+      process.exit(1);
+    }
   }
-  process.exit(1);
 }

package/interceptor.js

@@ -31,7 +31,7 @@ function generateNewLogFilePath() {
   try { cwd = process.cwd(); } catch { cwd = homedir(); }
   const projectName = basename(cwd).replace(/[^a-zA-Z0-9_\-\.]/g, '_');
   const dir = join(homedir(), '.claude', 'cc-viewer', projectName);
-  try { mkdirSync(dir, { recursive: true }); } catch {}
+  try { mkdirSync(dir, { recursive: true }); } catch { }
   return { filePath: join(dir, `${projectName}_${ts}.jsonl`), dir, projectName };
 }
 
@@ -44,7 +44,7 @@ function findRecentLog(dir, projectName) {
       .reverse();
     if (files.length === 0) return null;
     return join(dir, files[0]);
-  } catch {}
+  } catch { }
   return null;
 }
 
@@ -67,9 +67,9 @@ function cleanupTempFiles(dir, projectName) {
         } else {
           renameSync(tempPath, newPath);
         }
-      } catch {}
+      } catch { }
     }
-  } catch {}
+  } catch { }
 }
 
 // Resume 状态（供 server.js 使用）
@@ -128,7 +128,7 @@ const _initPromise = (async () => {
         tempFile,
       };
     }
-  } catch {}
+  } catch { }
 })();
 
 export { LOG_FILE, _initPromise, _resumeState, _choicePromise, resolveResumeChoice, _projectName };
@@ -167,7 +167,7 @@ function migrateConversationContext(oldFile, newFile) {
             break;
           }
         }
-      } catch {}
+      } catch { }
     }
 
     if (originIndex < 0) return; // 找不到起点，不迁移
@@ -180,7 +180,7 @@ function migrateConversationContext(oldFile, newFile) {
         if (isPreflightEntry(prev)) {
           migrationStart = originIndex - 1;
         }
-      } catch {}
+      } catch { }
     }
 
     // 迁移条目写入新文件
@@ -194,7 +194,7 @@ function migrateConversationContext(oldFile, newFile) {
     } else {
       writeFileSync(oldFile, '');
     }
-  } catch {}
+  } catch { }
 }
 
 function checkAndRotateLogFile() {
@@ -207,7 +207,7 @@ function checkAndRotateLogFile() {
       LOG_FILE = filePath;
       migrateConversationContext(oldFile, filePath);
     }
-  } catch {}
+  } catch { }
 }
 
 // 从环境变量 ANTHROPIC_BASE_URL 提取域名用于请求匹配
@@ -217,7 +217,7 @@ function getBaseUrlHost() {
     if (baseUrl) {
       return new URL(baseUrl).hostname;
     }
-  } catch {}
+  } catch { }
   return null;
 }
 const CUSTOM_API_HOST = getBaseUrlHost();
@@ -227,7 +227,7 @@ function isAnthropicApiPath(urlStr) {
   try {
     const pathname = new URL(urlStr).pathname;
     return /^\/v1\/messages(\/count_tokens|\/batches(\/.*)?)?$/.test(pathname)
-        || /^\/api\/eval\/sdk-/.test(pathname);
+      || /^\/api\/eval\/sdk-/.test(pathname);
   } catch {
     return /\/v1\/messages/.test(urlStr);
   }
@@ -374,7 +374,7 @@ export function setupInterceptor() {
 
   const _originalFetch = globalThis.fetch;
 
-  globalThis.fetch = async function(url, options) {
+  globalThis.fetch = async function (url, options) {
     // cc-viewer 内部请求（翻译等）直接透传，不拦截
     const internalHeader = options?.headers?.['x-cc-viewer-internal']
       || (options?.headers instanceof Headers && options.headers.get('x-cc-viewer-internal'));
@@ -387,7 +387,17 @@ export function setupInterceptor() {
 
     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)) || isAnthropicApiPath(urlStr)) {
+      // 检查 headers 中是否包含 x-cc-viewer-trace 标记
+      const headers = options?.headers || {};
+      const isProxyTrace = headers['x-cc-viewer-trace'] === 'true' || headers['x-cc-viewer-trace'] === true;
+
+      // 如果是 proxy 转发的，或者符合 URL 规则
+      if (isProxyTrace || urlStr.includes('anthropic') || urlStr.includes('claude') || (CUSTOM_API_HOST && urlStr.includes(CUSTOM_API_HOST)) || isAnthropicApiPath(urlStr)) {
+        // 如果是 proxy 转发的，需要清理掉标记 header 避免发给上游
+        if (isProxyTrace && options?.headers) {
+          delete options.headers['x-cc-viewer-trace'];
+        }
+
         const timestamp = new Date().toISOString();
         let body = null;
         if (options?.body) {
@@ -463,7 +473,7 @@ export function setupInterceptor() {
           })()
         };
       }
-    } catch {}
+    } catch { }
 
     // 用户新指令边界：检查日志文件大小，超过 500MB 则切换新文件
     if (requestEntry?.mainAgent) {
@@ -514,23 +524,28 @@ export function setupInterceptor() {
                         .map(block => {
                           // SSE 块可能包含多行: event: xxx\ndata: {...}
                           const lines = block.split('\n');
-                          const dataLine = lines.find(l => l.startsWith('data: '));
+                          const dataLine = lines.find(l => l.startsWith('data:'));
                           if (dataLine) {
+                            // 处理 "data:" 或 "data: " 两种格式
+                            const jsonStr = dataLine.startsWith('data: ')
+                              ? dataLine.substring(6)
+                              : dataLine.substring(5);
                             try {
-                              return JSON.parse(dataLine.substring(6));
+                              return JSON.parse(jsonStr);
                             } catch {
-                              return dataLine.substring(6);
+                              return jsonStr;
                             }
                           }
                           return null;
                         })
                         .filter(Boolean);
 
-                      // 组装完整的 message 对象
+                      // 组装完整的 message 对象（GLM 使用标准格式，但 data: 后无空格）
                       const assembledMessage = assembleStreamMessage(events);
 
                       // 直接使用组装后的 message 对象作为 response.body
-                      requestEntry.response.body = assembledMessage;
+                      // 如果组装失败（例如非标准 SSE），则使用原始流内容
+                      requestEntry.response.body = assembledMessage || streamedContent;
                       appendFileSync(LOG_FILE, JSON.stringify(requestEntry, null, 2) + '\n---\n');
                     } catch (err) {
                       requestEntry.response.body = streamedContent.slice(0, 1000);
@@ -599,4 +614,6 @@ export function setupInterceptor() {
 setupInterceptor();
 
 // 等待日志文件初始化完成后启动 Web Viewer 服务
-_initPromise.then(() => import('cc-viewer/server.js')).catch(() => {});
+_initPromise.then(() => import('./server.js')).catch((err) => {
+  console.error('[CC-Viewer] Failed to start viewer server:', err);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc-viewer",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "description": "Claude Code Logger visualization management tool",
   "license": "MIT",
   "main": "server.js",
@@ -44,6 +44,7 @@
     "dist/",
     "server.js",
     "cli.js",
+    "proxy.js",
     "interceptor.js",
     "i18n.js",
     "locales/",
@@ -58,4 +59,4 @@
     "vite": "^6.3.5",
     "@vitejs/plugin-react": "^4.5.2"
   }
-}
+}

package/proxy.js

@@ -0,0 +1,215 @@
+
+import { createServer } from 'node:http';
+import { readFileSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { homedir } from 'node:os';
+import { setupInterceptor } from './interceptor.js';
+
+// Setup interceptor to patch fetch
+setupInterceptor();
+
+function getOriginalBaseUrl() {
+  // 1. Check settings.json (Priority 1)
+  try {
+    const settingsPath = join(homedir(), '.claude', 'settings.json');
+    if (existsSync(settingsPath)) {
+      const settings = JSON.parse(readFileSync(settingsPath, 'utf-8'));
+      if (settings.env && settings.env.ANTHROPIC_BASE_URL) {
+        return settings.env.ANTHROPIC_BASE_URL;
+      }
+    }
+  } catch (e) {
+    // ignore
+  }
+
+  // 2. Check env var (Priority 2)
+  if (process.env.ANTHROPIC_BASE_URL) {
+    return process.env.ANTHROPIC_BASE_URL;
+  }
+
+  // 3. Default
+  return 'https://api.anthropic.com';
+}
+
+export function startProxy() {
+  return new Promise((resolve, reject) => {
+    const server = createServer(async (req, res) => {
+      // [Debug] Log incoming request
+      // console.error(`[CC-Viewer Proxy] Received request: ${req.method} ${req.url}`);
+
+      // Handle CORS preflight if needed (though claude cli probably doesn't send OPTIONS)
+
+      const originalBaseUrl = getOriginalBaseUrl();
+      const targetUrl = new URL(req.url, originalBaseUrl);
+
+      // Use the patched fetch (which logs to cc-viewer)
+      try {
+        // Convert incoming headers
+        const headers = { ...req.headers };
+        delete headers.host; // Let fetch set the host
+
+        // [Fix] Handle compressed body
+        // If content-encoding is set (e.g. gzip), and we read the raw stream into a buffer,
+        // we are passing the compressed buffer as body.
+        // fetch will automatically add content-length, but might not handle content-encoding correctly if we just pass the buffer?
+        // Actually, fetch should handle it fine if we pass the headers.
+
+        // However, if we are reading the body here to pass it to fetch, we are buffering it.
+        // For large uploads this might be bad, but for text prompts it's fine.
+
+        // We need to read the body if any
+        const buffers = [];
+        for await (const chunk of req) {
+          buffers.push(chunk);
+        }
+        const body = Buffer.concat(buffers);
+
+        // [Debug] Log body size
+        // console.error(`[CC-Viewer Proxy] Request body size: ${body.length}`);
+
+        const fetchOptions = {
+          method: req.method,
+          headers: headers,
+        };
+
+        // 标记此请求为 CC-Viewer 代理转发的 Claude API 请求
+        // 拦截器识别到此 Header 会强制记录，忽略 URL 匹配规则
+        fetchOptions.headers['x-cc-viewer-trace'] = 'true';
+
+        if (body.length > 0) {
+          fetchOptions.body = body;
+        }
+
+        // [Crucial Fix]
+        // If originalBaseUrl is also a proxy or special endpoint, make sure we construct the full URL correctly.
+        // originalBaseUrl might end with /v1 or not.
+        // req.url from proxy server is usually just the path (e.g. /v1/messages) if client is configured with base_url=http://localhost:port
+        // So new URL(req.url, originalBaseUrl) should work.
+
+        // However, if originalBaseUrl already contains a path (e.g. /api/anthropic), and req.url is /v1/messages,
+        // new URL(req.url, originalBaseUrl) might treat req.url as absolute path if it starts with /, replacing the path in originalBaseUrl?
+        // Let's test: new URL('/v1/messages', 'https://example.com/api').toString() -> 'https://example.com/v1/messages' (path replaced!)
+
+        // This is why we get 404! The user's base URL is https://antchat.alipay.com/api/anthropic
+        // But our proxy constructs: https://antchat.alipay.com/v1/messages
+        // It lost the /api/anthropic part!
+
+        // We need to append req.url to the pathname of originalBaseUrl, carefully avoiding double slashes.
+
+        const originalUrlObj = new URL(originalBaseUrl);
+        // Ensure original pathname doesn't end with slash if we append
+        let basePath = originalUrlObj.pathname;
+        if (basePath.endsWith('/')) basePath = basePath.slice(0, -1);
+
+        // req.url starts with / usually
+        const reqPath = req.url.startsWith('/') ? req.url : '/' + req.url;
+
+        // Check if we should join them
+        // If req.url is /v1/messages, and base is /api/anthropic, we want /api/anthropic/v1/messages
+        originalUrlObj.pathname = basePath + reqPath;
+        // Search params are already in req.url? Yes, req.url includes query string in Node http server.
+        // Wait, new URL(req.url, base) parses query string correctly.
+        // But if we manually concat pathname, we need to handle query string separately.
+
+        // Let's do it simpler: use string concatenation for the full URL
+        // But we need to handle the origin correctly.
+
+        // Better approach:
+        // 1. Remove trailing slash from originalBaseUrl
+        const cleanBase = originalBaseUrl.endsWith('/') ? originalBaseUrl.slice(0, -1) : originalBaseUrl;
+        // 2. Remove leading slash from req.url
+        const cleanReq = req.url.startsWith('/') ? req.url.slice(1) : req.url;
+        // 3. Join
+        const fullUrl = `${cleanBase}/${cleanReq}`;
+
+        // [Debug] Proxying to
+        // console.error(`[CC-Viewer Proxy] Forwarding to: ${fullUrl}`);
+
+        const response = await fetch(fullUrl, fetchOptions);
+
+        // [Crucial Fix]
+        // Handle decompression manually if needed.
+        // Node's fetch automatically decompresses if 'compress: true' is default?
+        // Actually, fetch handles gzip/deflate by default.
+        // But if we pipe the response body to the client response (res), we need to be careful.
+        // The issue is likely that we are trying to read the body as text/json for logging, 
+        // but it might be compressed or binary.
+
+        // Let's modify how we handle the response body.
+        // We need to:
+        // 1. Pipe the response to the client (res) so Claude Code gets the data.
+        // 2. Clone the response to read it for logging? fetch response.clone() might not work with streaming body easily.
+
+        // Better approach: intercept the stream.
+        // Or simply: don't log the response body for now to avoid breaking the stream.
+        // User just wants to see the request in the viewer.
+        // If we want to log response, we need to handle it carefully.
+
+        // Let's check where ZlibError comes from. It likely comes from `response.text()` or `response.json()` 
+        // if the content-encoding header is set but fetch didn't decompress it automatically?
+        // Or maybe we are double decompressing?
+
+        // Wait, if we use `response.body.pipe(res)`, that's fine.
+        // But do we read the body elsewhere?
+
+        // Let's look at how we log the response.
+        // We are not logging response body in this proxy.js currently.
+        // Wait, line 105: `response.body.pipe(res);`
+
+        // If the error happens, it might be because `fetch` failed to decompress?
+        // Or maybe `response.body` is already decompressed stream, but we are piping it to `res` which expects raw?
+        // No, `res` (http.ServerResponse) expects raw data.
+
+        // If `fetch` decompresses automatically, then `response.body` yields decompressed chunks.
+        // But `res` writes those chunks to the client.
+        // The client (Claude Code) expects compressed data if it sent `Accept-Encoding: gzip`.
+        // If we send decompressed data but keep `Content-Encoding: gzip` header, client will try to decompress again -> ZlibError!
+
+        // FIX: Remove content-encoding header from response headers before piping to client.
+        // This tells the client "the data I'm sending you is NOT compressed" (because fetch already decompressed it).
+
+        const responseHeaders = {};
+        for (const [key, value] of response.headers.entries()) {
+          // Skip Content-Encoding and Transfer-Encoding to let Node/Client handle it
+          if (key.toLowerCase() !== 'content-encoding' && key.toLowerCase() !== 'transfer-encoding' && key.toLowerCase() !== 'content-length') {
+            responseHeaders[key] = value;
+          }
+        }
+
+        res.writeHead(response.status, responseHeaders);
+
+        // Also log that we are piping
+        // console.error(`[CC-Viewer Proxy] Response status: ${response.status}`);
+
+        if (response.body) {
+          // We need to convert Web Stream (response.body) to Node Stream for piping to res
+          // Node 18+ fetch returns a Web ReadableStream.
+          // We can use Readable.fromWeb(response.body)
+          const { Readable } = await import('node:stream');
+          // @ts-ignore
+          const nodeStream = Readable.fromWeb(response.body);
+          nodeStream.pipe(res);
+
+          // Optional: Log response body for debugging (careful with streams)
+          // For now, let's just ensure reliability.
+        } else {
+          res.end();
+        }
+      } catch (err) {
+        console.error('[CC-Viewer Proxy] Error:', err);
+        res.statusCode = 502;
+        res.end('Proxy Error');
+      }
+    });
+
+    // Start on random port
+    server.listen(0, '127.0.0.1', () => {
+      const address = server.address();
+      resolve(address.port);
+    });
+
+    server.on('error', (err) => {
+      reject(err);
+    });
+  });
+}

package/server.js

@@ -598,7 +598,7 @@ export async function startViewer() {
   return new Promise((resolve, reject) => {
     function tryListen(port) {
       if (port > MAX_PORT) {
-        console.log(t('server.portsBusy', { start: START_PORT, end: MAX_PORT }));
+        console.error(t('server.portsBusy', { start: START_PORT, end: MAX_PORT }));
         resolve(null);
         return;
       }
@@ -609,7 +609,7 @@ export async function startViewer() {
         server = currentServer;
         actualPort = port;
         const url = `http://${HOST}:${port}`;
-        console.log(t('server.started', { host: HOST, port }));
+        console.error(t('server.started', { host: HOST, port }));
         // v2.0.69 之前的版本会清空控制台，自动打开浏览器确保用户能看到界面
         try {
           const ccPkgPath = join(__dirname, '..', '@anthropic-ai', 'claude-code', 'package.json');