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 客户端，Viewer 的优势包括：
可视化交互：不再只是终端 CLI，而是在浏览器中操作和查看。 远程访问能力：部署后可通过浏览器远程访问，例如手机操作。 多项目结构支持：支持多个 project、多个 session 切换。 辅助流程集成：Git Diff、文件预览、定时任务等增强了编码流程管理能力。
界面效果展示
应用场景
场景 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 提交、定时任务。 浏览器可用：远程、移动设备都能访问。 自托管安心：本地部署，不强依赖云服务。 实时同步：日志文件变化即可浏览，无需手动刷新。 专注 Claude Code 生态：与 Claude Code 项目结构契合。
总结
如果你正在使用 Claude Code，想大幅提升「日志查看／历史回溯／远程管理／Git 审查」的效率，那么 Claude Code Viewer 是一个「浏览器化、流程化」极佳选择。它让终端工具向网页操作转化，让 AI 编程流程更透明、更易管理。
