20:"$Sreact.view_transition" 21:I[9754,["/_next/static/chunks/2t36f5p4pjzlb.js","/_next/static/chunks/1gyqeidjm5eoa.js","/_next/static/chunks/0_fjnxc4tt_l_.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/3kv2zf0i7s2wc.js","/_next/static/chunks/1vs_3g_g75zmk.js","/_next/static/chunks/2g4dh802s8oz3.js","/_next/static/chunks/1bc3f0shukf1j.js","/_next/static/chunks/192kgs9v_t14j.js","/_next/static/chunks/0z6pw0v5c_lx5.js","/_next/static/chunks/08r60e6icmtkc.js","/_next/static/chunks/3trx6c0i7_x-3.js","/_next/static/chunks/40sro5bzp9bi_.js","/_next/static/chunks/1wgf3tk38y6cf.js"],"ProjectDetail"] 22:T5031, cc-viewer · 实时监控 Claude Code 请求

Claude Code · 请求监控系统 / cc-viewer

让你看见
Claude 请求穿行的那一瞬

cc-viewer 是 Claude Code 与开发者之间的一道透明边界——实时捕获并可视化每一次 API 请求与响应，把 Vibe Coding 过程中正在发生的对话摊开在 Web 查看器上，供你审查与调试。

你 / You

Claude

send :: intent POST :: /v1/message tokens :: 1420 upstream · 上行意图

render :: result stream :: 200 OK delta :: 38ms downstream · 下行响应

作为 claude 的直接替代品的 ccv，参数原样透传，同时把请求镜像进本地 Web 查看器。

引言 · 边界

一面照出每一次往返的薄玻璃

它不是浏览器，不是仪表盘——而是那层让你看见正在发生的事情的膜。所有穿过 Claude Code 边界的请求与响应，都被当场揭示、记录、审视。

上行 · 请求进入模型

POSTsystem /intent.query1.42k tok

POST/v1/message410ms

USE tool · repository.search—

下行 · 响应流回渲染

RESPstream · 200 OK38ms

DELTAassistant · finishing_reason: stopstart_turn

镜像揭示请求与响应，节拍由真实时序驱动

透镜 · 代码搜索

跨文件的代码搜索与替换

需要在哪里改动，就先让它找到哪里。基于 ripgrep 加速的代码搜索，可跨文件检索与替换，把模型要动手的区域提前定位清楚。

ccv search --replace "old_token" --glob "src/**/*.ts" → 12 files · 3,204 matches · prep for rewrite

cross-file find & replace · accelerated by ripgrep

ripgrep :: index glob :: scoped replace :: prepared

远端 · 移动自由

把查看器装进口袋，扫码继续编码

移动端编程：通过扫描二维码，把 Web 查看器内嵌到手机上。在服务器之外、离开座位时，依然对着同一段对话继续写代码——边界跟着你走。

scan to open viewer

闸门 · 会话保护

远程打开的会话，也需要一道闸门

查看器不止是看得见，更是受控的。为远程访问设定密码保护与令牌认证，并支持按模型编辑各异的系统提示词——让它既能看得清，也锁得牢。

Password

远程访问需配置密码或令牌，避免旁人窥见会话。

Token Auth

令牌认证为 Web 查看器与本地入口提供一致的访问凭证。

Per-model prompts

模型特定的系统提示词，可针对不同模型分别配置。

入口 · 安装

从命令行进入，Web 查看器随会话打开

npm $ npm install -g cc-viewer
brew $ brew install cc-viewer
run $ ccv

要求 Node.js 20+ 与 Claude Code。需在本机安装 cc-viewer 的浅显命令。

查看 GitHub 仓库

最新版本v1.7.22
主要语言JavaScript
许可证MIT
作者weiesky
原生桌面应用macOS / Linux

23:T505b, cc-viewer · Request monitoring for Claude Code

Claude Code · Request Monitoring / cc-viewer

See the requests pass through Claude as they happen

cc-viewer is a request monitoring system for Claude Code. It captures and visualizes every API request and response in real time, spreading the live conversation of Vibe Coding onto a local Web Viewer for you to review and debug.

You

Claude

send :: intent POST :: /v1/message tokens :: 1420 upstream · intent

render :: result stream :: 200 OK delta :: 38ms downstream · response

A drop-in replacement called ccv passes every argument straight through to claude while the Web Viewer opens alongside it.

The Boundary

A thin sheet in front of every round trip

Not a browser, not a dashboard — a membrane that lets you see what is happening. Every request and response crossing the Claude Code boundary is surfaced, logged, and made legible at the moment it passes.

Upstream · request into the model

POSTsystem /intent.query1.42k tok

POST/v1/message410ms

USE tool · repository.search—

Downstream · response returned to render

RESPstream · 200 OK38ms

DELTAassistant · finishing_reason: stopstart_turn

Requests and responses mirrored, paced by real timing

Lens · Code Search

Search and replace across files

Before changing anything, let it show you what it will touch. Code search accelerated by ripgrep scans across files to find and replace terms, so the model reaches the intended region already located.

ccv search --replace "old_token" --glob "src/**/*.ts" → 12 files · 3,204 matches · prep for rewrite

cross-file find & replace · accelerated by ripgrep

ripgrep :: index glob :: scoped replace :: prepared

Remote · Keep Moving

Put the viewer in your pocket and keep coding

Mobile programming via QR code: embed the Web Viewer on your phone. Away from the machine, on the road, keep working against the same conversation — the boundary travels with you.

scan to open viewer

Guard · Session Protection

An open session needs a gate too

A viewer should be visible, not exposed. Add password protection and token authentication for remote access, and edit model-specific system prompts so each configuration stays under your control.

Password

Remote access needs a password or token so others cannot watch the session.

Token Auth

Token authentication keeps the Web Viewer and local entry on the same access path.

Per-model prompts

Model-specific system prompts, configurable individually for each model.

On-Ramp · Install

Enter from the command line, viewer opens with the session

npm $ npm install -g cc-viewer
brew $ brew install cc-viewer
run $ ccv

Requires Node.js 20+ and Claude Code.

View the GitHub repo

Latest releasev1.7.22
Primary languageJavaScript
LicenseMIT
Authorweiesky
Native desktop appmacOS / Linux

a:[["$","$20",null,{"enter":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-enter","default":"none"},"exit":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-exit","default":"none"},"update":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-update","default":"none"},"default":"none","children":["$","$L21","cmt2zh3wa020h62716yrek53t:zh-CN:beautified",{"project":{"id":"cmt2zh3wa020h62716yrek53t","slug":"weiesky-cc-viewer","name":"cc-viewer","description":"Claude Code 请求监控与可视化工具","authorName":"weiesky","authorVerification":{"verified":false,"verifiedAt":null},"category":"development_tools","subcategory":"data_ai_tools","experienceUrl":null,"qualityScore":66,"featured":false,"officialSite":null,"views":{"original":{"available":true},"official":{"available":false,"reason":"disabled_by_policy"},"beautified":{"available":true,"reason":null},"defaultView":"beautified"},"beautifiedView":{"revisionId":"cmt2zh3wt020t62714hqu9a68","kind":"artifact","artifact":{"schemaVersion":"localized-static-html-v4","kind":"static_html","locales":["zh-CN","en"],"defaultLocale":"zh-CN","documents":{"zh-CN":"$22","en":"$23"},"designDirections":{"schemaVersion":"dodot-design-directions-v1","directions":[{"id":"visor-stream","name":"透光边界 / The Glancing Boundary","projectMetaphor":"cc-viewer 是 Claude Code 与你之间的一道透明边界——所有与模型之间的请求与响应都穿过它，被揭示、被记录、被审视。它不是浏览器，不是仪表盘，而是那层让你看见正在发生的事情的薄膜。","signatureVisual":"横向流动的双行请求/响应流：一条上游进（你的意图→模型）的窄流与一条下游回（模型→渲染结果）的窄流在页面中线并行、方向相反地蛇行，穿插可读的 token/请求标签。用边框描线而非填充形成传送带般的通道。","heroGeometry":"跨幅水平通道：中线是一条发光的分隔基准线，上下各一条反向的光流带沿其滑行，节拍由真实时序节奏驱动。通道两端各有一个端点记号代表“你”与“Claude”。","sectionSequence":["intro-boundary","transit-stream","search-lens","remote-freedom","guard-session","install-onramp"],"surfaceModel":"单色深底上的机械层叠：每层是半透明的玻璃薄板（细描边、极薄内阴影、小圆角），层与层之间留出可见空隙以暗示“可通过的中空边界”。没有厚重卡片，所有表面都薄而通透。","palette":"近黑底色 #0B0E14，通道基准线深青 #123C42，进流 #5FD9A4（上行/意图），回流 #7CC4FF（下行/响应），强调琥珀 #FFB454 仅用于端点记号与 CTA，中性文字灰 #B8C0CC。","typography":"IBM Plex Mono 用于全部数据性文字与标签（流、请求、token 计数），界面标题用 IBM Plex Sans，正文用无衬线细体。等宽字体主导以强化“协议/通讯”气质。","desktopComposition":"1280px：顶部一条贯穿全宽的通道带为签名区；下方中线对齐分为两栏——左栏持续流淌可读请求条目（方法、路径、耗时、反向流标签），右栏为相应的结构化响应摘要；通道带两端锚定“你”与“Claude”。数据方向感、时间流与工具意识在同一构图里。","mobileTransformation":"390px：通道带被纵向压缩成设备顶部的一条窄轨，两条反向光流上下叠为同一方向的推进条；两栏合成纵贯的时间序列（进→回交替排列），扫描二维码这一动作成为移动端隐喻的锚点，位于远端自由章节。","mediaStrategy":"无本地媒体（assetManifest 为空），移除媒体域。用证据驱动的双行请求/响应流作为标志视觉，全部由 CSS/JS 无资产的描线光带构成，不为伪造产品截图。","forbiddenPatterns":["浏览器壳 / 终端壳 / 编辑器壳","整块发光光晕或背景粒子场","横向三卡指标墙","功能卡片平铺墙","页面级渐变背景团块"],"compositionFingerprint":"horizontal-dual-directional-stream-banded-over-midline-with-endpoint-markers"},{"id":"carrier-line","name":"横轴传送带 / The Conveyor Transit","projectMetaphor":"cc-viewer 是一条把请求从你手上搬运到 Claude、再把响应搬回来的自动化传送带——Claude Code 的命令原样穿过代理器，同时这条传送带的分叉口推送给 Web 查看器一份流动的副本。","signatureVisual":"一条水平高架轨道上若干个请求“箱”被有序推动，每个箱体带来源标记（你/工具/远程）与目的地戳（Claude/查看器），箱与箱之间留有机械节距，轨道下方分出岔路通向 Web Viewer 副线。","heroGeometry":"贯穿视口的横向高架轨道，轨道从屏幕左缘延伸到右缘，运载的箱体以恒速推进，并在中部一个分岔点分出支轨——主轨继续离开，支轨垂直下坠把同一份数据浮现在查看器窗口的抽象片段上。","sectionSequence":["origin-transit","waypoint-split","search-lens","remote-freedom","guard-session","install-onramp"],"surfaceModel":"工业浅底上的高对比模块：不规则错位的“传动机件”块（硬矩形、重描边、锐角切口），表面材质偏哑光并带细密横纹暗示传送带纹理；组件之间用粗差分线连接而非软阴影。","palette":"暖灰底色 #EDEBE5，高架轨道 #1C2129，运载箱 #E8E4DA 配深字，岔路支轨琥珀 #C9853F，运行时动作强调 #C1442E（Claude 终点红/暖），通行文字 #3A3F46。","typography":"Geometry/工业感无衬线为主（传递/搬运的机器语言），等宽 IBM Plex Mono 用于箱体上的方法、路径与 token 计数，标题偏粗大开。","desktopComposition":"1280px：第一视口已见整条横向高架轨道穿过并分出支轨，运载箱上直接标注请求事实（POST、路径、token 数、反向），下方一行静态承接句点明“所有参数原样传给 claude”。轨道成为全页的中轴，后续章节沿轨道下方纵排展开。","mobileTransformation":"390px：横向轨道无法表达，转译为垂直堆叠的“转运序列”——每个请求成为一个水平箱体从上往下被接受，岔路变化成一次明显的垂直分流；移动端由“扫描二维码编程”作为新的传送带入口，把查看器内嵌进手机。","mediaStrategy":"无本地媒体，移除媒体域。标志视觉为高架轨道上的请求箱，纯 CSS/JS 动画机械推进，不伪造查看器/终端的真实截图。","forbiddenPatterns":["浏览器壳 / 仪表盘壳 / 编辑器壳","横向三卡指标墙","功能卡片墙","背景发光粒子场","同质化圆角阴影卡片网"],"compositionFingerprint":"horizontal-elevated-conveyor-with-drop-fork-offshoot-and-boxed-payloads"},{"id":"seam-logs","name":"日志接缝 / The Session Thread","projectMetaphor":"cc-viewer 把一次 Claude Code 会话展开成一条可回溯的接缝——每一根请求与响应像线迹一样把“你的意图”与“模型的动作”缝在一起，你可以顺着这条缝回头审视整段 Vibe Coding 过程。","signatureVisual":"一条垂直的中缝，左右两侧的“针脚”交错落点：左侧落下一根（上行请求），右侧随即落下一根（下行响应），针脚用连点路径连接，形成可读、可断点回溯的会话线程。","heroGeometry":"中部一条垂直的中央接缝贯穿首屏；请求与响应作为交错针脚沿缝向下生成，每个针脚是一个可悬停的时间戳节点，缝线本身是带刻度的轨迹，代表时间与回溯能力。","sectionSequence":["thread-opener","stitch-review","search-lens","remote-freedom","guard-session","install-onramp"],"surfaceModel":"纸张/接线稿质感的浅色平面：细线稿的面板、无体积感的扁平块，主要靠连接线与路径建立关系；表面以描边和纹理呈现，几乎不用阴影与体积。","palette":"云白底 #F5F3EE，中缝划线墨色 #23262D，上行针脚 #C8532E（意图/热），下行针脚 #2F6B5E（响应/静），时间刻度淡青 #9FB4AC，强调琥珀 #C98A3C 用于断点与 CTA。","typography":"等宽字体（IBM Plex Mono）贯穿作为会话日志的主字体，穿插少量窄衬线做标签；强调这是可读的“缝线记录”而非营销页。","desktopComposition":"1280px：中央接缝成为构图的主轴，两侧展开对称的工作面——左面是可混排的请求响应针脚列（时间戳驱动），右面是定位到该针脚的响应/代码切片；缝的顶端正对观者暗示“回看自己的会话”。","mobileTransformation":"390px：中央接缝在窄幅上无法保持双栏对称，转译为单列蜿蜒的线迹——每一针上下衔接形成连续波形，可上溯可下追；悬停针脚改为点击展开详情，时间刻度粘贴在缝侧。","mediaStrategy":"无本地媒体，移除媒体域。标志视觉为垂直接缝与交错针脚线程，纯 CSS/JS 连线生成，表达“会话可回溯”的断言，不伪造产品界面截图。","forbiddenPatterns":["浏览器壳 / 终端壳","发光网格背景 / 粒子场","三卡指标墙","均匀圆角卡片墙","页面渐变光团"],"compositionFingerprint":"vertical-center-seam-with-alternating-stitch-thread-and-timeline-graduation"}],"selectedDirectionId":"visor-stream","selectionRationale":"cc-viewer 的核心机制不是搬运箱，也不是留档回看，而是“对穿过 Claude Code 边界的请求与响应进行实时镜像，同时把它作为 claude 的直接替代品原样透传”。visor-stream 的双反光流（上行意图/下行响应）最直接表达了这一镜像与透传机制：一个透明边界同时揭示二者、又放它们穿过，且它在 web 端天然表现为一条横向流——与“启动 Web 查看器并随会话实时播放”的项目证据一致。选其横向通道构图，也可传达真实时序节奏，且允许把移动钉扎在“扫码把查看器内嵌进手机”这一项目独有能力上。carrier-line 偏工业搬运、seam-logs 偏事后回看，虽都合法且有效，但不如 visor-stream 在首屏五秒内即时点明“实时监控正在发生的请求流”这一最高优先级叙事。"},"designBrief":{"schemaVersion":"dodot-design-brief-v1","selectedDirectionId":"visor-stream","projectMetaphor":"cc-viewer 是 Claude Code 与你之间的一道透明边界——所有与模型之间的请求与响应都穿过它，被揭示、被记录、被审视。它不是浏览器，不是仪表盘，而是那层让你看见正在发生的事情的薄膜。","signatureVisual":"横向流动的双行请求/响应流：一条上游进（你的意图→模型）的窄流与一条下游回（模型→渲染结果）的窄流在页面中线并行、方向相反地蛇行，穿插可读的 token/请求标签。用边框描线而非填充形成传送带般的通道。","compositionFingerprint":"horizontal-dual-directional-stream-banded-over-midline-with-endpoint-markers","heroGeometry":"跨幅水平通道：中线是一条发光的分隔基准线，上下各一条反向的光流带沿其滑行，节拍由真实时序节奏驱动。通道两端各有一个端点记号代表“你”与“Claude”。","sectionSequence":["intro-boundary","transit-stream","search-lens","remote-freedom","guard-session","install-onramp"],"surfaceModel":"单色深底上的机械层叠：每层是半透明的玻璃薄板（细描边、极薄内阴影、小圆角），层与层之间留出可见空隙以暗示“可通过的中空边界”。没有厚重卡片，所有表面都薄而通透。","palette":"近黑底色 #0B0E14，通道基准线深青 #123C42，进流 #5FD9A4（上行/意图），回流 #7CC4FF（下行/响应），强调琥珀 #FFB454 仅用于端点记号与 CTA，中性文字灰 #B8C0CC。","typography":"IBM Plex Mono 用于全部数据性文字与标签（流、请求、token 计数），界面标题用 IBM Plex Sans，正文用无衬线细体。等宽字体主导以强化“协议/通讯”气质。","desktopComposition":"1280px：顶部一条贯穿全宽的通道带为签名区；下方中线对齐分为两栏——左栏持续流淌可读请求条目（方法、路径、耗时、反向流标签），右栏为相应的结构化响应摘要；通道带两端锚定“你”与“Claude”。数据方向感、时间流与工具意识在同一构图里。","mobileTransformation":"390px：通道带被纵向压缩成设备顶部的一条窄轨，两条反向光流上下叠为同一方向的推进条；两栏合成纵贯的时间序列（进→回交替排列），扫描二维码这一动作成为移动端隐喻的锚点，位于远端自由章节。","mediaStrategy":"无本地媒体（assetManifest 为空），移除媒体域。用证据驱动的双行请求/响应流作为标志视觉，全部由 CSS/JS 无资产的描线光带构成，不为伪造产品截图。","evidencePlan":["用诉求/响应双光流与端点记号表达“实时捕获并可视化所有 API 请求与响应”——这一条来自仓库描述，作为签名视觉的内在断言。","在 transit-stream 章节用左请求/右响应结构呈现“请求/响应被镜像揭示”机制，来源为 description 与 readme 中“启动 Web 查看器随会话打开”。","在 install-onramp 章节内以等宽代码行形式出现 `npm install -g cc-viewer` 与 Homebrew 路径，来源为 readme.commands，作为可信安装入口。","在 search-lens、remote-freedom、guard-session 章节分别锚定代码搜索、移动扫码编程、密码/令牌保护，全部来自 readme 提取的事实，不引入外部指标或截图。"],"localeContract":{"zh-CN":"中文文案与英文共享同一章节序列与签名视觉，密度与语气自然中文化；标语“实时监控 Claude Code 请求，可视化调试 Vibe Coding”，数据性标签保留英文方法/路径以保持协议通感。","en":"English copy shares the same section sequence and signature visual as zh-CN; slogan \"Monitor Claude Code requests in real time\", retaining method/path tokens in monospace for protocol fidelity; tone stays developer-directed and honest."},"forbiddenPatterns":["浏览器壳 / 终端壳 / 编辑器壳 / 仪表盘壳","大标语后紧跟恰好三张指标卡","可任填任何项目文案的功能卡片墙","用发光网格或粒子场代替项目专属视觉","伪造的标签页 / 搜索框 / 开关 / 图表 / 客户评价 / 截图"]},"visualReview":{"schemaVersion":"dodot-automated-design-review-v1","status":"approved","summary":"页面忠实实现了 design-brief 选定的 visor-stream 方向：首屏 signatureVisual「双行反向请求/响应流 + 中线上端点记号」真实存在且由纯 CSS/JS 描线构成，未伪造产品截图；六段章节序列与 brief 完全一致；文案与 token/方法标签均从 material.json 的 description/readme/repository 事实与 summary.localizations 提取，无外部指标或杜撰数据；移动端在 880/560px 断点将双栏与 grids 折叠为单列并压成窄轨，形成真实重构；zh-CN 与 en 章节等价、语气自然、数据标签共用以保留协议通感；未回退到通用 Hero/三卡指标墙/卡片墙/渐变网格/设备壳，guard-section 的实质卡片对应真实功能。七项检查全部通过，无 blocking issue，予以通过。","checks":{"projectFit":{"passed":true,"evidence":"遵循 visor-stream：调色板完全匹配 brief(#0B0E14/#123C42/#5FD9A4/#7CC4FF/#FFB454/#B8C0CC)；章节序列 intro-boundary→transit-stream→search-lens→remote-freedom→guard-session→install-onramp 六段与 brief 一致；hero 的 .channel 实现跨幅水平通道、中线发光基准线、上下反向光流带与两端「你/Claude」端点记号；desktop 采用左请求右响应的 two-col 镜像结构，忠实 data 方向感与工具意识。"},"evidenceBound":{"passed":true,"evidence":"所有事实均有 material 依据：实时捕获可视化请求/响应(description)、ccv 为 claude 直接替代且参数透传(readme)、代码搜索与 ripgrep(readme)、移动扫码编程(readme)、密码/令牌认证(readme)、模型级系统提示词(readme)、npm install -g cc-viewer(readme.commands)、Node.js 20+ 与 Claude Code 前置(summary caveats)、v1.7.22/JavaScript/MIT/weiesky/macOS-Linux(repository fact 与 summary)。签名视觉与各章节均未引入外部指标、截图或杜撰数据。"},"signatureVisual":{"passed":true,"evidence":"signatureVisual 真实存在且为主视觉：.channel 中含有 .midline 发光中线、.stream.up(上行意图 #5FD9A4) 与 .stream.down(下行响应 #7CC4FF, direction:rtl 反向)两条并行反向光流，配 POST /v1/message、tokens :: 1420 等可读标签，及 .endp.left/.endp.right 两端端点记号「你/You」与「Claude」，纯 CSS 动画描线构成，无资产无伪截图。"},"mobileTransformation":{"passed":true,"evidence":"390px 下 mobile 形成重构：880px 断点将 .two-col/.search-row/.guard-row/.onrmp 全部折叠为单列，移除中缝分隔线，channel 增高至 300px 并把上下流压为窄轨；560px 进一步压缩至 320px 并缩小标签字体；qa-report 显示 390px 视口 scrollWidth==clientWidth==390 无横向溢出，两条光流上下叠为同一方向推进条，符合 brief 的移动转译。"},"localeParity":{"passed":true,"evidence":"zh-CN 与 en 共享完全同一章节序列与同一签名视觉；标语分别对应 summary.localizations 的 zh/en slogan；数据性 method/path/token 标签在双语中都保留英文等宽写法符合 localeContract；两版语气均为开发者向且诚实，章节内容等价。"},"antiTemplate":{"passed":true,"evidence":"未回退到通用 Hero/三卡指标墙/卡片墙/设备壳/发光渐变网格：hero 即为项目专属双行流签名视觉；无浏览器/终端/编辑器壳；无整块发光背景，仅中线数据感发光带；guard-session 的三张实质卡片对应真实功能(password/token/per-model)，非可任填文案的功能墙；页面无块状渐变光团。compositionFingerprint=horizontal-dual-directional-stream-banded-over-midline-with-endpoint-markers 吻合。"},"noFakeUi":{"passed":true,"evidence":"qa-report 报告 fakeControlCount=0、brokenImageCount=0；QR 图为 role=img 且 aria-label 明确标注「示意二维码/Illustrative」，仅作移动扫码隐喻的抽象示意而非可操作假控件；reqrow/search 命令均为签名视觉内的示意标签，非假搜索框/开关/图表；CTA 指向真实 GitHub 仓库首页。"}},"issues":[{"code":"localized-legal-copy","severity":"warning","locale":"zh-CN","description":"zh-CN 的 install-onramp 章节 legal 行「需在本机安装 cc-viewer 的浅显命令」措辞生硬、语义冗余，且英文版仅有「Requires Node.js 20+ and Claude Code」，两版长度/语气不对称。","repairInstruction":"将 zh-CN legal 精简为与英文等价的一句，如「要求 Node.js 20+ 与 Claude Code。」，移除「需在本机安装 cc-viewer 的浅显命令」。"}]},"repairEvidence":[{"attempt":1,"before":{"qaPassed":false,"designReviewApproved":false,"qaEvidence":{"zh-CN":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":1537,"cjkCount":544,"latinLetterCount":592,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":3487,"h1Top":184.390625,"bottomInset":176.421875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"4079f6f47ae65397828a0b1d950fce7ced79e9b1e860fadefac17f36b8de7e41","middle":"dd180aeead1a70183879d3c478d3d60fb2e3e6e4f0dba54b7e5019473a027b91","bottom":"5f4d397b10a49288c2ed95d20272318b3ab9a634a5ad48237edff6dd47a6b822"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":false,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":1537,"cjkCount":544,"latinLetterCount":592,"scrollWidth":482,"clientWidth":390,"scrollHeight":4777,"h1Top":172.390625,"bottomInset":163.59375,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"8240bc07abccf920077e3ce887b3fdb10b337f43d5dd7708b5251d1147b44284","middle":"a2dde1aa493d18b9de4e62d87091e43190ca0410eb8d9f3e344cea043c9e8ac0","bottom":"699f81ce17a5ad89a65e9d8d37786452829a879271c54b0d333e8ab45bfaaaaf"},"consoleErrors":[],"networkRequests":[]}],"en":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":2756,"cjkCount":0,"latinLetterCount":2126,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":3599,"h1Top":184.390625,"bottomInset":175.96875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"1e8ba7e30a530bd850ddaeafcd2038635bd5b52c4da2e87da850ad8b23c6f431","middle":"2e3f1b0baad97ec2ba307788d9c3f038a14598a3534de822745372a4c14ae1d6","bottom":"486948ff0b9500b3241bf1882b325c07c4a39c11fa10cf05170fdf26b1f399bd"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":false,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":2756,"cjkCount":0,"latinLetterCount":2126,"scrollWidth":482,"clientWidth":390,"scrollHeight":5110,"h1Top":192.78125,"bottomInset":164.140625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"c5becbff944ba8bf39f1b473216a66123ff2f919521ff94a26027346b0c69b1a","middle":"c5a01aa9bb485bc22c021b408a3d6e75a0c1844b0a56f8f0ebddb485cb50b6de","bottom":"c35b67465361a9d203d5794c1a23293193be4e7b6530fb73d3287e09f7690260"},"consoleErrors":[],"networkRequests":[]}]},"visualReview":null},"after":{"qaPassed":true,"designReviewApproved":true,"qaEvidence":{"zh-CN":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":1537,"cjkCount":544,"latinLetterCount":592,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":3487,"h1Top":184.390625,"bottomInset":176.421875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"4079f6f47ae65397828a0b1d950fce7ced79e9b1e860fadefac17f36b8de7e41","middle":"dd180aeead1a70183879d3c478d3d60fb2e3e6e4f0dba54b7e5019473a027b91","bottom":"5f4d397b10a49288c2ed95d20272318b3ab9a634a5ad48237edff6dd47a6b822"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":1537,"cjkCount":544,"latinLetterCount":592,"scrollWidth":390,"clientWidth":390,"scrollHeight":4777,"h1Top":172.390625,"bottomInset":163.59375,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"5883c1c1ce8f600b58266884fdb9e86a1ce5638e437b4c4caee1e8e7b108e451","middle":"0e409bb4e574141373abd64d1f2593a55decca707daedeeebb9db4c76c935b52","bottom":"699f81ce17a5ad89a65e9d8d37786452829a879271c54b0d333e8ab45bfaaaaf"},"consoleErrors":[],"networkRequests":[]}],"en":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":2756,"cjkCount":0,"latinLetterCount":2126,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":3599,"h1Top":184.390625,"bottomInset":175.96875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"1e8ba7e30a530bd850ddaeafcd2038635bd5b52c4da2e87da850ad8b23c6f431","middle":"2e3f1b0baad97ec2ba307788d9c3f038a14598a3534de822745372a4c14ae1d6","bottom":"486948ff0b9500b3241bf1882b325c07c4a39c11fa10cf05170fdf26b1f399bd"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":2756,"cjkCount":0,"latinLetterCount":2126,"scrollWidth":390,"clientWidth":390,"scrollHeight":5164,"h1Top":192.78125,"bottomInset":163.765625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"35b3f426ff6897440d0d30aaef87a2b82e3f06a9040a231db8da140cb58b2ac0","middle":"2fbe54183c7e98f8b7b90e00d1a5b653d5a9c65966afae0c27759d954cf7827f","bottom":"023a6d0a7769b88c8e758a7c2e4988d2f8c7e16a944b743ee281080a53fcd91c"},"consoleErrors":[],"networkRequests":[]}]},"visualReview":{"schemaVersion":"dodot-automated-design-review-v1","status":"approved","summary":"页面忠实实现了 design-brief 选定的 visor-stream 方向：首屏 signatureVisual「双行反向请求/响应流 + 中线上端点记号」真实存在且由纯 CSS/JS 描线构成，未伪造产品截图；六段章节序列与 brief 完全一致；文案与 token/方法标签均从 material.json 的 description/readme/repository 事实与 summary.localizations 提取，无外部指标或杜撰数据；移动端在 880/560px 断点将双栏与 grids 折叠为单列并压成窄轨，形成真实重构；zh-CN 与 en 章节等价、语气自然、数据标签共用以保留协议通感；未回退到通用 Hero/三卡指标墙/卡片墙/渐变网格/设备壳，guard-section 的实质卡片对应真实功能。七项检查全部通过，无 blocking issue，予以通过。","checks":{"projectFit":{"passed":true,"evidence":"遵循 visor-stream：调色板完全匹配 brief(#0B0E14/#123C42/#5FD9A4/#7CC4FF/#FFB454/#B8C0CC)；章节序列 intro-boundary→transit-stream→search-lens→remote-freedom→guard-session→install-onramp 六段与 brief 一致；hero 的 .channel 实现跨幅水平通道、中线发光基准线、上下反向光流带与两端「你/Claude」端点记号；desktop 采用左请求右响应的 two-col 镜像结构，忠实 data 方向感与工具意识。"},"evidenceBound":{"passed":true,"evidence":"所有事实均有 material 依据：实时捕获可视化请求/响应(description)、ccv 为 claude 直接替代且参数透传(readme)、代码搜索与 ripgrep(readme)、移动扫码编程(readme)、密码/令牌认证(readme)、模型级系统提示词(readme)、npm install -g cc-viewer(readme.commands)、Node.js 20+ 与 Claude Code 前置(summary caveats)、v1.7.22/JavaScript/MIT/weiesky/macOS-Linux(repository fact 与 summary)。签名视觉与各章节均未引入外部指标、截图或杜撰数据。"},"signatureVisual":{"passed":true,"evidence":"signatureVisual 真实存在且为主视觉：.channel 中含有 .midline 发光中线、.stream.up(上行意图 #5FD9A4) 与 .stream.down(下行响应 #7CC4FF, direction:rtl 反向)两条并行反向光流，配 POST /v1/message、tokens :: 1420 等可读标签，及 .endp.left/.endp.right 两端端点记号「你/You」与「Claude」，纯 CSS 动画描线构成，无资产无伪截图。"},"mobileTransformation":{"passed":true,"evidence":"390px 下 mobile 形成重构：880px 断点将 .two-col/.search-row/.guard-row/.onrmp 全部折叠为单列，移除中缝分隔线，channel 增高至 300px 并把上下流压为窄轨；560px 进一步压缩至 320px 并缩小标签字体；qa-report 显示 390px 视口 scrollWidth==clientWidth==390 无横向溢出，两条光流上下叠为同一方向推进条，符合 brief 的移动转译。"},"localeParity":{"passed":true,"evidence":"zh-CN 与 en 共享完全同一章节序列与同一签名视觉；标语分别对应 summary.localizations 的 zh/en slogan；数据性 method/path/token 标签在双语中都保留英文等宽写法符合 localeContract；两版语气均为开发者向且诚实，章节内容等价。"},"antiTemplate":{"passed":true,"evidence":"未回退到通用 Hero/三卡指标墙/卡片墙/设备壳/发光渐变网格：hero 即为项目专属双行流签名视觉；无浏览器/终端/编辑器壳；无整块发光背景，仅中线数据感发光带；guard-session 的三张实质卡片对应真实功能(password/token/per-model)，非可任填文案的功能墙；页面无块状渐变光团。compositionFingerprint=horizontal-dual-directional-stream-banded-over-midline-with-endpoint-markers 吻合。"},"noFakeUi":{"passed":true,"evidence":"qa-report 报告 fakeControlCount=0、brokenImageCount=0；QR 图为 role=img 且 aria-label 明确标注「示意二维码/Illustrative」，仅作移动扫码隐喻的抽象示意而非可操作假控件；reqrow/search 命令均为签名视觉内的示意标签，非假搜索框/开关/图表；CTA 指向真实 GitHub 仓库首页。"}},"issues":[{"code":"localized-legal-copy","severity":"warning","locale":"zh-CN","description":"zh-CN 的 install-onramp 章节 legal 行「需在本机安装 cc-viewer 的浅显命令」措辞生硬、语义冗余，且英文版仅有「Requires Node.js 20+ and Claude Code」，两版长度/语气不对称。","repairInstruction":"将 zh-CN legal 精简为与英文等价的一句，如「要求 Node.js 20+ 与 Claude Code。」，移除「需在本机安装 cc-viewer 的浅显命令」。"}]}},"changedFiles":["artifact/zh-CN.html","artifact/en.html"]}],"provenance":{"executor":"opencode","model":"deepseek/deepseek-v4-flash","opencodeVersion":"1.1.58","promptVersion":"dodot-showcase-deepseek-v4","inputHash":"197ed6deec70e25159f516a0584370f0a57e70725c37eb8ba37a6498f9e8d57e","artifactHash":"ae1e3f6325dcdccecebac8cd48c82fdb0a7bdfdef0abf1312d209b00f988da80","designSkill":"dodot-showcase-design"},"qaEvidence":{"zh-CN":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":1537,"cjkCount":544,"latinLetterCount":592,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":3487,"h1Top":184.390625,"bottomInset":176.421875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"4079f6f47ae65397828a0b1d950fce7ced79e9b1e860fadefac17f36b8de7e41","middle":"dd180aeead1a70183879d3c478d3d60fb2e3e6e4f0dba54b7e5019473a027b91","bottom":"5f4d397b10a49288c2ed95d20272318b3ab9a634a5ad48237edff6dd47a6b822"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":1537,"cjkCount":544,"latinLetterCount":592,"scrollWidth":390,"clientWidth":390,"scrollHeight":4777,"h1Top":172.390625,"bottomInset":163.59375,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"5883c1c1ce8f600b58266884fdb9e86a1ce5638e437b4c4caee1e8e7b108e451","middle":"0e409bb4e574141373abd64d1f2593a55decca707daedeeebb9db4c76c935b52","bottom":"699f81ce17a5ad89a65e9d8d37786452829a879271c54b0d333e8ab45bfaaaaf"},"consoleErrors":[],"networkRequests":[]}],"en":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":2756,"cjkCount":0,"latinLetterCount":2126,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":3599,"h1Top":184.390625,"bottomInset":175.96875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"1e8ba7e30a530bd850ddaeafcd2038635bd5b52c4da2e87da850ad8b23c6f431","middle":"2e3f1b0baad97ec2ba307788d9c3f038a14598a3534de822745372a4c14ae1d6","bottom":"486948ff0b9500b3241bf1882b325c07c4a39c11fa10cf05170fdf26b1f399bd"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":5,"sectionCount":6,"textLength":2756,"cjkCount":0,"latinLetterCount":2126,"scrollWidth":390,"clientWidth":390,"scrollHeight":5164,"h1Top":192.78125,"bottomInset":163.765625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"35b3f426ff6897440d0d30aaef87a2b82e3f06a9040a231db8da140cb58b2ac0","middle":"2fbe54183c7e98f8b7b90e00d1a5b653d5a9c65966afae0c27759d954cf7827f","bottom":"023a6d0a7769b88c8e758a7c2e4988d2f8c7e16a944b743ee281080a53fcd91c"},"consoleErrors":[],"networkRequests":[]}]}},"generatorVersion":"opencode-1.1.58:deepseek/deepseek-v4-flash:dodot-showcase-deepseek-v4","publishedAt":"2026-08-20T10:31:13.421Z"},"rawExtraction":{"projectRevisionId":"cmt2zh3wj020n6271evq66hvd","projectVersion":1,"sources":[{"canonicalKey":"github:weiesky/cc-viewer","role":"primary","revisionVersion":1,"url":"https://github.com/weiesky/cc-viewer"}],"facts":[{"key":"repository_owner","value":"weiesky","evidence":[{"path":"repository.owner","excerpt":"weiesky"}]},{"key":"repository_name","value":"cc-viewer","evidence":[{"path":"repository.name","excerpt":"cc-viewer"}]},{"key":"description","value":"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.","evidence":[{"path":"repository.description","excerpt":"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."}]},{"key":"primary_language","value":"JavaScript","evidence":[{"path":"repository.language","excerpt":"JavaScript"}]},{"key":"license","value":"MIT","evidence":[{"path":"repository.license","excerpt":"MIT"}]},{"key":"source_count","value":"1","evidence":[{"path":"projectRevision.sources","excerpt":"github:weiesky/cc-viewer"}]}],"taxonomy":{"category":"development_tools","subcategory":"data_ai_tools","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"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."}]},"lifecycle":{"stage":"active","confidence":0.75,"evidence":[{"path":"repository.pushedAt","excerpt":"2026-08-17T12:03:09.000Z"}]},"userIntents":[{"slug":"build_software","label":"构建或改进软件","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"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."}]},{"slug":"automate_work","label":"自动化工作流程","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"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."}]},{"slug":"create_content","label":"创作内容或设计","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"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."}]},{"slug":"analyze_data","label":"分析与理解数据","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"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."}]}],"readme":{"headings":["CC-Viewer","Usage","Prerequisites","Install ccv","Install via npm","Install via Homebrew (recommended for macOS / Linux)","How to start","Choose the Claude executable","Upgrading to 1.7.0 (log format v2)","Logger mode","Troubleshooting","Other helper commands","Silent Mode","Features","Programming mode","Code search","Mobile programming","Password protection","Model-specific system prompts","Logger mode (view the complete Claude Code session)"],"commands":["npm install -g cc-viewer --registry=https://registry.npmjs.org"]},"changeSet":[{"field":"repository","beforeHash":"a8080e2556ea7273284935622e29de0e63e531e5393b58127403b2ea9aa3caab","afterHash":"24b29a4342e9888ac7f58fa2914ad4231440b292624b1c1227161aef6b93748c"}]},"publishedAt":"2026-08-16T12:26:46.734Z","updatedAt":"2026-08-21T13:26:54.999Z","summary":{"id":"cmt2zh3wm020p62716v5jo8h6","projectType":"product","oneLine":"Claude Code 请求监控与可视化工具","overview":"cc-viewer 是一个针对 Claude Code 的请求监控系统，实时捕获并可视化所有 API 请求和响应，帮助开发者监控上下文、审查和调试 Vibe Coding 过程。它作为 claude 的直接替代品，提供 Web 查看器、代码搜索、移动编程、密码保护等功能，支持 npm 和 Homebrew 安装，并有原生桌面应用。","highlights":["实时请求可视化","代码搜索与替换","移动端编程支持","密码保护与令牌认证"],"bestFor":["Claude Code 用户","Vibe Coding 开发者","需要调试和审查 AI 交互的团队"],"caveats":["需要 Node.js 20+ 和 Claude Code","与 claude-code-switch 和 claude-code-router 冲突","远程访问需配置密码或令牌"],"categorySuggestion":"development_tools","subcategorySuggestion":"mcp_integrations","lifecycleStages":["frontend","backend_data","testing_quality"],"audienceIntents":["evaluate","build","operate"],"confidence":0.85,"evidence":[{"claim":"cc-viewer 是一个针对 Claude Code 的请求监控系统，实时捕获并可视化所有 API 请求和响应。","sourceType":"description","locator":"https://github.com/weiesky/cc-viewer"},{"claim":"ccv 是 claude 的直接替代品，所有参数都会传递给 claude，同时启动 Web 查看器。","sourceType":"readme","locator":"https://github.com/weiesky/cc-viewer"},{"claim":"支持通过 npm 和 Homebrew 安装，并提供原生桌面应用。","sourceType":"readme","locator":"https://github.com/weiesky/cc-viewer"},{"claim":"提供代码搜索功能，支持跨文件搜索和替换，使用 ripgrep 加速。","sourceType":"readme","locator":"https://github.com/weiesky/cc-viewer"},{"claim":"支持移动端编程，可通过扫描二维码在手机上编码。","sourceType":"readme","locator":"https://github.com/weiesky/cc-viewer"},{"claim":"提供密码保护和令牌认证，用于远程访问安全。","sourceType":"readme","locator":"https://github.com/weiesky/cc-viewer"},{"claim":"支持模型特定的系统提示词编辑，可针对不同模型配置。","sourceType":"readme","locator":"https://github.com/weiesky/cc-viewer"},{"claim":"最新版本为 v1.7.22，发布于 2026-08-17。","sourceType":"release","locator":"https://github.com/weiesky/cc-viewer/releases/tag/v1.7.22"}],"publishedAt":"2026-08-17T13:53:59.859Z"},"github":{"url":"https://github.com/weiesky/cc-viewer","ownerAvatarUrl":"https://avatars.githubusercontent.com/u/3365650?v=4","starsCount":1063,"forksCount":123,"language":"JavaScript","syncedAt":"2026-08-17T13:50:44.992Z","license":"MIT","defaultBranch":"main","archived":false,"disabled":false,"lastChangedAt":"2026-08-17T12:03:09.000Z","missing":false},"tags":[],"updates":[]},"entryPoint":"discovery","claim":{"state":"unclaimed","verified":false},"initialView":"beautified","community":{"viewer":null,"state":{"likesCount":0,"creativeCount":0,"followersCount":0,"commentsCount":0,"liked":false,"creative":false,"followed":false},"comments":{"comments":[],"nextCursor":null}}}]}],"$L24"]

让你看见Claude 请求穿行的那一瞬

一面照出每一次往返的薄玻璃

上行 · 请求进入模型

下行 · 响应流回渲染

跨文件的代码搜索与替换

把查看器装进口袋，扫码继续编码

远程打开的会话，也需要一道闸门

Password

Token Auth

Per-model prompts

从命令行进入，Web 查看器随会话打开

See the requests pass through Claude as they happen

A thin sheet in front of every round trip

Upstream · request into the model

Downstream · response returned to render

Search and replace across files

Put the viewer in your pocket and keep coding

An open session needs a gate too

Password

Token Auth

Per-model prompts

Enter from the command line, viewer opens with the session

让你看见
Claude 请求穿行的那一瞬