CC Viewer

一个用于查看 Claude Code 生成的 JSONL 日志文件的桌面应用程序。

📖 项目简介

CC Viewer 是一个基于 Tauri 的桌面应用，专门用于查看和分析 Claude Code 的对话历史记录。它能够解析 JSONL 格式的日志文件，以可视化的方式展示用户与 AI 助手之间的交互过程，包括消息内容、工具调用、思考过程等。

✨ 功能特性

主要特性如下：

• 📁 多文件管理 - 侧边栏支持加载和切换多个 JSONL 文件
• 💬 对话展示 - 清晰展示用户、助手、系统消息
• 🔧 工具调用可视化 - 展示 Read、Write、Edit、Bash、Grep 等工具的调用和结果
• 🧠 思考过程 - 可折叠显示 AI 的思考内容（Thinking）
• 📊 统计信息 - 显示 token 使用量、消息数量、工具调用统计等
• 🔍 全文搜索 - 支持搜索消息内容、工具名称、结果等，并高亮显示
• 🔄 自动刷新 - 实时监控日志文件变化，自动加载新内容

📦 安装与使用

前置要求

• Node.js >= 18
• Rust >= 1.70
• pnpm 或 npm

开发环境

1. 克隆项目

git clone <repository-url>
cd cc-viewer

2. 安装依赖

pnpm install
# 或
npm install

3. 运行开发模式

pnpm tauri:dev
# 或
npm run tauri:dev

构建生产版本

pnpm tauri:build
# 或
npm run tauri:build

构建产物将输出到 src-tauri/target/release/bundle/ 目录。

📁 项目结构

cc-viewer/
├── src/                      # 前端源代码
│   ├── components/          # React 组件
│   │   ├── cards/          # 消息卡片组件
│   │   ├── layout/         # 布局组件
│   │   └── ui/             # UI 基础组件
│   ├── stores/             # Zustand 状态管理
│   ├── types/              # TypeScript 类型定义
│   ├── lib/                # 工具函数
│   │   ├── parser.ts       # JSONL 解析器
│   │   ├── stats.ts        # 统计计算
│   │   └── utils.ts        # 通用工具
│   ├── hooks/              # 自定义 Hooks
│   └── App.tsx             # 主应用组件
├── src-tauri/               # Tauri 后端
│   ├── src/                # Rust 源代码
│   └── Cargo.toml          # Rust 依赖配置
├── package.json            # Node.js 依赖
└── vite.config.ts          # Vite 配置

🙏 致谢

• Tauri - 跨平台桌面应用框架
• React - UI 框架
• TailwindCSS - CSS 框架
• Claude Code - AI 编程助手