Skip to content

Commit 9a6c3a3

Browse files
author
weiesky.wangc
committed
feat: ccv argument passthrough — drop-in replacement for claude
- Refactor main logic: all args passed through to claude via PTY + Web Viewer - Remove -c/-d as ccv-specific flags (now transparent to claude) - Add ccv -logger for hook installation - Add --d shortcut for --dangerously-skip-permissions - Update help text with claude passthrough options - Update all 18 language README files - Bump version to 1.5.19
1 parent 4039089 commit 9a6c3a3

23 files changed

Lines changed: 1533 additions & 1161 deletions

README.md

Lines changed: 79 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
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.
44
The latest version of CC-Viewer also provides a server-deployed web programming solution and mobile programming tools. Feel free to use them in your own projects — more plugin features and cloud deployment support are coming in the future.
55

6+
Check out the fun part — here's what you can see on mobile:
7+
8+
<img width="1700" height="790" alt="image" src="https://github.com/user-attachments/assets/da3e519f-ff66-4cd2-81d1-f4e131215f6c" />
9+
10+
<font color="#999">(Current version has limited iOS compatibility — iOS optimization is planned for 2026.04.01)</font>
11+
612
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)
713

814
## Usage
@@ -13,47 +19,49 @@ English | [简体中文](./docs/README.zh.md) | [繁體中文](./docs/README.zh-
1319
npm install -g cc-viewer --registry=https://registry.npmjs.org
1420
```
1521

16-
### Monitor Mode (launching claude or claude --dangerously-skip-permissions in this mode automatically starts a logging process to record request payloads)
17-
18-
```bash
19-
ccv
20-
```
21-
2222
### Programming Mode
2323

24-
== claude
24+
ccv is a drop-in replacement for claude — all arguments are passed through to claude while launching the Web Viewer.
2525

2626
```bash
27-
ccv -c
27+
ccv # == claude (interactive mode)
28+
ccv -c # == claude --continue (continue last conversation)
29+
ccv -r # == claude --resume (resume a conversation)
30+
ccv -p "hello" # == claude --print "hello" (print mode)
31+
ccv --d # == claude --dangerously-skip-permissions (shortcut)
32+
ccv --model opus # == claude --model opus
2833
```
2934

30-
== claude --dangerously-skip-permissions
31-
32-
```bash
33-
ccv -d
34-
```
35-
36-
After launching programming mode, a web page will open automatically.
35+
After launching, a web page will open automatically.
3736

3837
You can use Claude directly from the web page while viewing the full request payloads and code changes.
3938

4039
Even better — you can even code from your mobile device!
4140

42-
This command automatically detects how Claude Code is installed locally (NPM or Native Install) and adapts accordingly.
4341

44-
- **NPM Install**: Automatically injects an interceptor script into Claude Code's `cli.js`.
45-
- **Native Install**: Automatically detects the `claude` binary, configures a local transparent proxy, and sets up a Zsh Shell Hook to forward traffic automatically.
46-
- NPM-installed Claude Code is the recommended approach for this project.
42+
### Logger Mode
4743

48-
### Configuration Override
44+
⚠️ If you still prefer using the native claude tool or VS Code extension, use this mode.
4945

50-
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.
46+
In this mode, launching `claude` or `claude --dangerously-skip-permissions` will automatically start a logging process that records request logs to ~/.claude/cc-viewer/*yourproject*/date.jsonl
5147

52-
### Silent Mode
48+
Enable logger mode:
49+
```bash
50+
ccv -logger
51+
```
5352

54-
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`.
53+
When the console cannot print the specific port, the default first port is 127.0.0.1:7008. Multiple instances use sequential ports like 7009, 7010.
5554

56-
Once configured, use the `claude` command as normal. Visit `http://localhost:7008` to access the monitoring interface.
55+
This command automatically detects how Claude Code is installed locally (NPM or Native Install) and adapts accordingly.
56+
57+
- **NPM version Claude Code**: Automatically injects an interceptor script into Claude Code's `cli.js`.
58+
- **Native version Claude Code**: Automatically detects the `claude` binary, configures a local transparent proxy, and sets up a Zsh Shell Hook to forward traffic automatically.
59+
- NPM-installed Claude Code is the recommended approach for this project.
60+
61+
Uninstall logger mode:
62+
```bash
63+
ccv --uninstall
64+
```
5765

5866
### Troubleshooting
5967

@@ -69,65 +77,75 @@ Letting Claude Code diagnose the issue itself is more effective than asking anyo
6977

7078
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.
7179

72-
### Uninstall
80+
### Other Commands
7381

82+
See:
7483
```bash
75-
ccv --uninstall
84+
ccv -h
7685
```
7786

78-
### Check Version
87+
### Configuration Override
7988

80-
```bash
81-
ccv -v
82-
```
89+
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.
8390

84-
## Features
91+
### Silent Mode
8592

86-
### Request Monitoring (Raw Mode)
87-
<img width="1500" height="720" alt="image" src="https://github.com/user-attachments/assets/519dd496-68bd-4e76-84d7-2a3d14ae3f61" />
93+
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`.
8894

89-
- Captures all API requests made by Claude Code in real time, ensuring raw content rather than truncated logs (this is important!!!)
90-
- Automatically identifies and labels Main Agent and Sub Agent requests (subtypes: Plan, Search, Bash)
91-
- MainAgent requests support Body Diff JSON, showing a collapsed diff of changes from the previous MainAgent request (only changed/added fields)
92-
- Inline token usage stats per request (input/output tokens, cache creation/read, hit rate)
93-
- Compatible with Claude Code Router (CCR) and other proxy scenarios — falls back to API path pattern matching
95+
Once configured, use the `claude` command as normal. Visit `http://localhost:7008` to access the monitoring interface.
9496

95-
### Conversation Mode
9697

97-
Click the "Conversation Mode" button in the top-right corner to parse the Main Agent's full conversation history into a chat interface:
98-
<img width="1500" height="730" alt="image" src="https://github.com/user-attachments/assets/c973f142-748b-403f-b2b7-31a5d81e33e6" />
98+
## Features
9999

100-
- Agent Team display is not yet supported
101-
- User messages are right-aligned (blue bubbles), Main Agent replies are left-aligned (dark bubbles)
102-
- `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)
103-
- User selection messages (AskUserQuestion) are displayed in a Q&A format
104-
- Bidirectional mode sync: switching to Conversation Mode automatically scrolls to the conversation corresponding to the selected request; switching back to Raw Mode automatically scrolls to the selected request
105-
- Settings panel: toggle the default collapsed state for tool results and thinking blocks
106-
- Mobile conversation browsing: in mobile CLI mode, tap the "Conversation Browse" button in the top bar to slide out a read-only conversation view for browsing the full conversation history on your phone
107100

108101
### Programming Mode
109102

110-
After launching with ccv -c or ccv -d, you will see:
103+
After launching with ccv, you can see:
104+
111105
<img width="1500" height="725" alt="image" src="https://github.com/user-attachments/assets/a64a381e-5a68-430c-b594-6d57dc01f4d3" />
112106

113107
You can view code diffs directly after editing:
108+
114109
<img width="1500" height="728" alt="image" src="https://github.com/user-attachments/assets/2a4acdaa-fc5f-4dc0-9e5f-f3273f0849b2" />
115110

116-
While you can open files and edit code manually, manual coding is not recommended — that's old-school coding!
111+
While you can open files and code manually, manual coding is not recommended — that's old-school coding!
117112

118113
### Mobile Programming
119114

120-
You can even scan a QR code to code on your mobile device:
115+
You can even scan a QR code to code from your mobile device:
116+
121117
<img width="3018" height="1460" alt="image" src="https://github.com/user-attachments/assets/8debf48e-daec-420c-b37a-609f8b81cd20" />
122118

123-
On mobile you can see:
124-
<img width="1700" height="790" alt="image" src="https://github.com/user-attachments/assets/da3e519f-ff66-4cd2-81d1-f4e131215f6c" />
119+
Fulfill your imagination of mobile programming. There's also a plugin mechanism — if you need to customize for your coding habits, stay tuned for plugin hooks updates.
120+
121+
### Logger Mode (View Complete Claude Code Sessions)
122+
123+
<img width="1500" height="720" alt="image" src="https://github.com/user-attachments/assets/519dd496-68bd-4e76-84d7-2a3d14ae3f61" />
124+
125+
- Captures all API requests from Claude Code in real time, ensuring raw text — not redacted logs (this is important!!!)
126+
- Automatically identifies and labels Main Agent and Sub Agent requests (subtypes: Plan, Search, Bash)
127+
- MainAgent requests support Body Diff JSON, showing collapsed differences from the previous MainAgent request (only changed/new fields)
128+
- Each request displays inline Token usage statistics (input/output tokens, cache creation/read, hit rate)
129+
- Compatible with Claude Code Router (CCR) and other proxy scenarios — falls back to API path pattern matching
130+
131+
### Conversation Mode
125132

126-
Fulfills everything you can imagine about mobile programming.
133+
Click the "Conversation Mode" button in the top-right corner to parse the Main Agent's complete conversation history into a chat interface:
134+
135+
<img width="1500" height="730" alt="image" src="https://github.com/user-attachments/assets/c973f142-748b-403f-b2b7-31a5d81e33e6" />
136+
137+
- Agent Team display is not yet supported
138+
- User messages are right-aligned (blue bubbles), Main Agent replies are left-aligned (dark bubbles)
139+
- `thinking` blocks are collapsed by default, rendered as Markdown — click to expand and view the thinking process; one-click translation is supported (feature is still unstable)
140+
- User selection messages (AskUserQuestion) are displayed in Q&A format
141+
- Bidirectional mode sync: switching to conversation mode auto-scrolls to the conversation corresponding to the selected request; switching back to raw mode auto-scrolls to the selected request
142+
- Settings panel: toggle default collapse state for tool results and thinking blocks
143+
- Mobile conversation browsing: in mobile CLI mode, tap the "Conversation Browse" button in the top bar to slide out a read-only conversation view for browsing the complete conversation history on mobile
127144

128145
### Statistics Tool
129146

130147
The "Data Statistics" floating panel in the header area:
148+
131149
<img width="1500" height="729" alt="image" src="https://github.com/user-attachments/assets/b23f9a81-fc3d-4937-9700-e70d84e4e5ce" />
132150

133151
- Displays cache creation/read counts and cache hit rate
@@ -139,6 +157,7 @@ The "Data Statistics" floating panel in the header area:
139157
### Log Management
140158

141159
Via the CC-Viewer dropdown menu in the top-left corner:
160+
142161
<img width="1200" height="672" alt="image" src="https://github.com/user-attachments/assets/8cf24f5b-9450-4790-b781-0cd074cd3b39" />
143162

144163
- Import local logs: browse historical log files grouped by project, open in a new window
@@ -148,18 +167,18 @@ Via the CC-Viewer dropdown menu in the top-left corner:
148167
- 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
149168
- Export Prompts to TXT: export user Prompts (plain text, excluding system tags) to a local `.txt` file
150169

151-
### Multi-language Support
152-
153-
CC-Viewer supports 18 languages, automatically switching based on system locale:
154-
155-
简体中文 | English | 繁體中文 | 한국어 | Deutsch | Español | Français | Italiano | Dansk | 日本語 | Polski | Русский | العربية | Norsk | Português (Brasil) | ไทย | Türkçe | Українська
156-
157170
### Auto-Update
158171

159172
CC-Viewer automatically checks for updates on startup (at most once every 4 hours). Within the same major version (e.g., 1.x.x → 1.y.z), updates are applied automatically and take effect on the next restart. Cross-major-version updates only show a notification.
160173

161174
Auto-update follows Claude Code's global configuration in `~/.claude/settings.json`. If Claude Code has auto-updates disabled (`autoUpdates: false`), CC-Viewer will also skip auto-updates.
162175

176+
### Multi-language Support
177+
178+
CC-Viewer supports 18 languages, automatically switching based on system locale:
179+
180+
简体中文 | English | 繁體中文 | 한국어 | Deutsch | Español | Français | Italiano | Dansk | 日本語 | Polski | Русский | العربية | Norsk | Português (Brasil) | ไทย | Türkçe | Українська
181+
163182
## License
164183

165184
MIT

cli.js

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -383,11 +383,12 @@ async function runCliModeWorkspaceSelector(extraClaudeArgs = []) {
383383
// === 主逻辑 ===
384384

385385
const args = process.argv.slice(2);
386+
387+
// ccv 自有命令判断
388+
const isLogger = args.includes('-logger');
386389
const isUninstall = args.includes('--uninstall');
387390
const isHelp = args.includes('--help') || args.includes('-h') || args[0] === 'help';
388391
const isVersion = args.includes('--v') || args.includes('--version') || args.includes('-v');
389-
const isCliMode = args.includes('--c') || args.includes('-c');
390-
const isDangerousMode = args.includes('-d') || args.includes('--d');
391392

392393
if (isHelp) {
393394
console.log(t('cli.help'));
@@ -404,31 +405,13 @@ if (isVersion) {
404405
process.exit(0);
405406
}
406407

407-
if (isCliMode || isDangerousMode) {
408-
const extraArgs = isDangerousMode ? ['--dangerously-skip-permissions'] : [];
409-
410-
// 解析 -d/-c 后的可选路径参数
411-
const flagIndex = args.findIndex(a => a === '-d' || a === '--d' || a === '-c' || a === '--c');
412-
let workspacePath = null;
413-
if (flagIndex >= 0 && flagIndex + 1 < args.length && !args[flagIndex + 1].startsWith('-')) {
414-
workspacePath = resolve(args[flagIndex + 1]);
415-
}
416-
417-
// 默认用 cwd 启动,支持可选路径参数
418-
runCliMode(extraArgs, workspacePath || process.cwd()).catch(err => {
419-
console.error('CLI mode error:', err);
420-
process.exit(1);
421-
});
422-
} else if (args[0] === 'run') {
423-
runProxyCommand(args);
424-
} else if (isUninstall) {
408+
if (isUninstall) {
425409
const cliResult = removeCliJsInjection();
426410
const shellResult = removeShellHook();
427411

428412
if (cliResult === 'removed' || cliResult === 'clean') {
429413
console.log(t('cli.uninstall.cliCleaned'));
430414
} else if (cliResult === 'not_found') {
431-
// console.log(t('cli.uninstall.cliNotFound'));
432415
// Silent is better for mixed mode uninstall
433416
} else {
434417
console.log(t('cli.uninstall.cliFail'));
@@ -444,12 +427,13 @@ if (isCliMode || isDangerousMode) {
444427
console.log(t('cli.uninstall.reloadShell'));
445428
console.log(t('cli.uninstall.done'));
446429
process.exit(0);
447-
} else {
448-
// Installation Logic
430+
}
431+
432+
if (isLogger) {
433+
// 安装/修复 hook 逻辑(原来无参数 ccv 的行为)
449434
let mode = 'unknown';
450435

451-
// Check PATH to determine priority
452-
let prefersNative = true; // default to native if not found in PATH
436+
let prefersNative = true;
453437
const paths = (process.env.PATH || '').split(':');
454438
for (const dir of paths) {
455439
if (!dir) continue;
@@ -542,4 +526,17 @@ if (isCliMode || isDangerousMode) {
542526
process.exit(1);
543527
}
544528
}
529+
process.exit(0);
530+
}
531+
532+
if (args[0] === 'run') {
533+
runProxyCommand(args);
534+
} else {
535+
// 默认行为:所有参数透传给 claude(通过 PTY + Web Viewer)
536+
// 展开 --d 快捷方式为 --dangerously-skip-permissions
537+
const claudeArgs = args.map(a => a === '--d' ? '--dangerously-skip-permissions' : a);
538+
runCliMode(claudeArgs, process.cwd()).catch(err => {
539+
console.error('CLI mode error:', err);
540+
process.exit(1);
541+
});
545542
}

0 commit comments

Comments
 (0)