Claude Code Viewer 是一个基于浏览器的客户端工具，专为 Claude Code 项目日志可视化和交互操作设计。它帮助你「查看会话日志／启动新会话／恢复旧会话／浏览项目内容」——一站式管理 Claude Code 对话历史与项目。
为何需要 Claude Code Viewer？
在使用 Claude Code（一个在终端运行、理解你的项目、协助编码的 AI 工具）时，你可能会遇到以下痛点：
- 在命令行里切换项目、查看历史会话、查找某次对话的细节，体验较差。
- 项目里多个子会话、子流程（比如 agent 调用工具、子任务）时，日志变得杂乱，难以理顺逻辑。
- 想在浏览器里远程查看 Claude Code 会话或从手机操作，但 CLI 或终端界面限制了场景。
- 想快速浏览已执行 .git 变更、diff、工具调用情况，但命令行工具视图受限。
而 Claude Code Viewer 正是为缓解上述痛点而生：把繁杂的 ~/.claude 会话日志转成可浏览、可交互的网页视图，实现「一键启动／浏览／恢复」等操作。正如一位开发者所言：
换言之，如果你希望将 Claude Code 的黑盒终端体验，转化为可视化、可操作、网页化的体验，那么这个项目正好切中需求。
核心功能盘点
会话日志实时查看
将 Claude Code 在 ~/.claude/projects/<project>/<session-id>.jsonl 中生成的 JSONL 日志，实时解析并在浏览器中展示会话数据：用户输入、AI 响应、工具调用、thinking 阶段、子会话详情。
你可以快速查到「某次对话里 agent 调用了什么工具」「执行了多少命令」「子会话跳转路径」等细节。
启动／继续会话
不只是查看日志，你还可以在浏览器中通过 Claude Code Viewer 启动新的 chat 会话，或从既有会话继续运行（Resume）。 比如：在某个 project 里选择「新建会话」——然后就可以通过网页界面输入提示，而不是回到终端。
项目／会话目录导航
在 UI 中列出多个项目、会话 Session ID、切换会话、查看历史，这大大提升多项目、多任务管理的效率。
文件上传及预览
在 chat 界面可以上传图片（PNG, JPEG, GIF, WebP）、PDF、文本文件，UI 支持原生预览：图片直接显示，PDF 嵌入查看，文本格式化。
这意味着你可以在 Claude Code 会话中上传截图、说明文档、日志等资料并浏览。
Git Diff 查看 + 提交/推送
内建 Git Diff 查看器：你可以在浏览器里对比代码修改、提交 commit、甚至推送 push。
对于希望 AI 辅助编码、然后检查 diff 的开发流程特别适合。
定时消息调度
可以为 Claude Code 消息设置 cron 表达式，实现定时任务、循环任务（支持跳过／运行）以及自动 删除。 例如：每天凌晨自动启动某个 agent 执行任务，再由你浏览结果。
多语言支持 + 移动优化
UI 支持英文和日文界面，响应式设计适合手机浏览。 如果你常使用手机远程查看或者在平板上操作，这是一个加分项。
零数据丢失 & 流程结构化
项目强调「Zero data loss」：严格的 Zod schema 验证保证日志格式完整；此外采用「渐进披露」（Expandable UI）设计，使得子会话等复杂结构也可清晰展开。
技术架构
架构图
技术优势 &架构解析
| 组成模块 | 描述 | 优势 |
| 日志数据读取 | 直接读取 Claude Code 在本地生成的 JSONL 文件 | 无需额外数据库，部署更轻量 |
| 后端监控与通知 | 使用 Server-Sent Events(SSE)监听日志变更，前端 React Query 自动刷新 | 实时同步、低延迟 |
| 前端 UI | 基于 React、Next.js，提供项目/会话导航、查看、操作 UI | 浏览器可用、易用性高 |
| Git Diff 与提交模块 | 直接调用 Git 命令或通过 Node 库操作代码仓库 | 适合代码审查和变更管理 |
| 上传/预览模块 | 支持多媒体/文档上传预览 | 扩展性强，支持项目辅助资料 |
| 定时消息调度模块 | 通过 cron 表达式调度 Claude 消息 | 自动化任务支持，提升流程效率 |
相比于仅在终端操作的 Claude Code 客户端，Viewer 的优势包括：
- 可视化交互：不再只是终端 CLI，而是在浏览器中操作和查看。
- 远程访问能力：部署后可通过浏览器远程访问，例如手机操作。
- 多项目结构支持：支持多个 project、多个 session 切换。
- 辅助流程集成：Git Diff、文件预览、定时任务等增强了编码流程管理能力。
界面效果展示
ImageImage 
Image 
ImageImage
截图说明：
- 第一张：聊天视图，左侧项目/会话树，右侧对话内容，工具调用 & thinking 阶段可折叠。
- 第二张：项目-会话列表界面，可选多个项目、会话切换。
- 第三张：Git Diff 查看界面：展示代码变化、commit 按钮、push 功能。
从这些截图可以看到，界面清晰、结构分明、操作流畅。对于开发者来说，从浏览器就可完成大部分 Claude Code 的日常操作。
应用场景
场景 A：AI 辅助编码流程管理
你在使用 Claude Code 辅助编写代码、生成补丁、重构、测试。用了 Claude Code Viewer 之后：
- 在浏览器查看历史 session，了解 agent 是如何一步步执行操作的。
- 在 Git Diff 界面快速审查 agent 提交的代码。
- 使用定时任务模块设置某个自动任务，例如「每天 2 点生成报表代码」。 这大幅提升 AI 辅助编码的管理效率。
场景 B：远程／移动开发支持
你在外办公或出差，想用手机查看 Claude Code 的运行状况：
- 部署 Viewer 在远程服务器，通过 tailscale 或 VPN 访问。
- 手机浏览器即可查看会话、上传文件、开始新的会话。正如作者所说：
场景 C：非工程师协作
非技术角色也希望参与 Claude Code 流程（例如产品、设计、分析）：
- 通过 Viewer 界面上传需求文档、截图、说明。
- 查看 agent 执行过程，提交反馈。
- 浏览 Git Diff，了解 agent 贡献。 减少了终端操作门槛，提升跨角色协作效率。
场景 D：教学／演示环境
在教学或技术演示中，你想展示 Claude Code 的运行流程：
- 用 Viewer 展示会话历史、子会话展开流程。
- 演示 agent 工具调用、输出结果、diff 变化。 界面化展示比命令行更直观、更适合演讲或课堂。
项目对比
以下为 Claude Code Viewer 与其他 类似工具的对比：
| 项目名称 | 功能重点 | 优势 | 劣势 |
| Claude Code Viewer（本项目） | 日志可视化 + 浏览器操作 + Git Diff + 定时任务 | 自托管、实时、交互丰富、远程可用 | 仅支持 Claude Code 项目日志，需要本地 ~/.claude 结构 |
| Claude Code Web UI（sugyan） | 将 Claude Code CLI 转为 Web 前端 | 快速 UI 化、适配移动 | 功能偏向聊天界面，日志浏览能力弱 |
| Claude Code Proxy（seifghazi） | 请求代理 + 可视化监控 | 支持监控多模型、API 路由 | 偏向监控，可视化但交互操作有限 |
| Claude Code History Viewer（jhlee0409） | 桌面日志浏览工具 | 支持多平台、专注历史数据 | 不支持会话启动、Web 远程功能弱 |
本项目优势总结
- 功能丰富：不仅日志浏览，还能启动/续会话、Git 提交、定时任务。
- 浏览器可用：远程、移动设备都能访问。
- 自托管安心：本地部署，不强依赖云服务。
- 实时同步：日志文件变化即可浏览，无需手动刷新。
- 专注 Claude Code 生态：与 Claude Code 项目结构契合。
总结
如果你正在使用 Claude Code，想大幅提升「日志查看／历史回溯／远程管理／Git 审查」的效率，那么 Claude Code Viewer 是一个「浏览器化、流程化」极佳选择。它让终端工具向网页操作转化，让 AI 编程流程更透明、更易管理。
