Session Dashboard

March 15, 2026 · View on GitHub

本地 Web 仪表板，用于浏览和监控 AI 编程工具（Claude Code、Codex CLI、Cursor、Aider）的历史会话记录。支持实时更新、全文搜索、Token 用量统计、多 session 对比等功能。

功能概览

  • 多工具支持：Claude Code、Codex CLI、Cursor、Aider 四个适配器，架构支持扩展
  • 三栏布局：项目列表 / Session 列表 / 聊天记录，支持拖拽调整宽度
  • 实时更新：SSE 监听文件变化，新 session 和消息变化自动刷新
  • 全文搜索：按消息内容搜索，限定当前项目，snippet 高亮展示
  • Token 统计：解析原始 token 用量（含缓存 token），支持 session 和项目两个维度
  • 多 session 对比：并排查看两个 session 的完整对话
  • 本地索引：~/.session-dashboard/index.json 增量缓存，大幅提升加载速度
  • Shiki 代码高亮：github-dark 主题，异步加载
  • 工具调用展示：Claude Code tool_use / tool_result 折叠块，Codex function_call 渲染

界面预览

整体布局仪表盘
整体布局仪表盘
消息列表对比模式
消息列表对比模式
Session Token 统计项目 Token 统计
Session Token 统计项目 Token 统计

技术栈

层技术
框架Node v22.22.0 Next.js 16.1.6 (App Router) + TypeScript
样式Tailwind CSS v4 + shadcn/ui
数据获取SWR + SSE (chokidar)
代码高亮Shiki
虚拟滚动@tanstack/react-virtual
图表Recharts
SQLite（读 Cursor）better-sqlite3

快速开始

# 安装依赖
npm install

# 启动开发服务器
npm run dev

打开 http://localhost:3000

全局安装（npm）

# 全局安装
npm install -g session-dashboard

# 直接启动 Dashboard
session-dashboard

默认会在包目录中启动 Next.js 开发服务器（等价于运行 next dev）。你也可以透传 Next.js 参数，例如 session-dashboard --port 4000。

发布流程

  • 本地 git push 前会通过 Husky 自动执行 npm run typecheck
  • 创建 GitHub Release 或推送 v* tag 时，GitHub Actions 会执行 npm ci、npm run release:check 并自动发布到 npm
  • 发布前请在仓库 Secrets 中配置 NPM_TOKEN

目录结构

session-dashboard/
├── app/
│   ├── page.tsx                    # 仪表板（统计图表）
│   ├── sessions/page.tsx           # 三栏 session 浏览器
│   └── api/
│       ├── sessions/               # Session 列表 + 详情
│       ├── projects/               # 项目列表
│       ├── search/                 # 全文搜索
│       ├── token-usage/            # Token 用量统计
│       ├── stats/                  # 汇总统计
│       ├── watch/                  # SSE 实时推送
│       └── index/rebuild/          # 强制重建索引
├── lib/
│   ├── types.ts                    # 共享类型定义
│   ├── registry.ts                 # 适配器注册中心
│   ├── index-store.ts              # 本地 JSON 索引层
│   └── adapters/
│       ├── claude-code.ts          # Claude Code 适配器
│       ├── codex.ts                # Codex CLI 适配器
│       ├── cursor.ts               # Cursor 适配器（读 SQLite）
│       └── aider.ts                # Aider 适配器（读 .md）
├── components/
│   ├── session-detail/             # 聊天记录组件
│   ├── session-list/               # Session 列表组件
│   └── dashboard/                  # 统计图表组件
├── hooks/
│   ├── useSessions.ts
│   ├── useSession.ts
│   └── useRealtimeWatch.ts
└── docs/
    └── roadmap.md                  # 详细功能规划

数据源

工具位置格式
Claude Code~/.claude/projects/{encoded-path}/*.jsonlJSONL，每行一个事件
Codex CLI~/.codex/sessions/YYYY/MM/DD/{slug}-{uuid}.jsonlJSONL，含 session_meta
Cursor~/Library/Application Support/Cursor/User/workspaceStorage/*/state.vscdbSQLite，ItemTable
Aider{project-dir}/.aider.chat.history.mdMarkdown，#### human/ai 分段

本地索引

首次加载会扫描所有 JSONL 文件并写入 ~/.session-dashboard/index.json（增量，只重解析 mtime 变化的文件）。

如遇 session 缺失，点击仪表板右上角的 ↺ 重建索引 按钮强制全量重建。

键盘快捷键

按键功能
/聚焦搜索框
↑ / ↓在 session 列表中移动
Enter打开选中 session / 触发全文搜索
Esc关闭当前 session / 清空搜索

已实现功能

#功能
1三栏布局，拖拽 resize，宽度持久化
2左栏可折叠（48px 图标模式）
3项目列表：工具筛选（全部/CC/Codex）、hover 预览、复制路径
4Session 列表：虚拟滚动、日期筛选、收藏星标、进行中脉冲指示
5全文搜索：按 Enter 触发，限定当前项目，snippet 高亮
6聊天记录：按天时间轴分组、Shiki 代码高亮、复制按钮、消息书签
7工具调用折叠展示（Claude Code / Codex）
8文件变更摘要：解析 tool_use 事件，显示涉及的文件
9Token 用量统计：session + 项目维度，含缓存 token
10多 session 并排对比视图
11实时更新：SSE + chokidar，当前 session 精确刷新
12统计图表：每日活跃度折线图 + Top5 项目
13导出 session 为 Markdown
14亮暗主题切换
15本地 JSON 索引层（mtime 增量更新）

Roadmap

完整规划见 docs/roadmap.md。

待实现

方向代表功能说明
AI 原生增强AI 生成 session 摘要、自动工作日报 / 周报、Session 复盘助手、下一步行动建议从“展示历史”升级到“主动总结和建议”
分析增强Session 叙事时间线、个人 AI 开发画像、效率信号面板、调试路径回放从“查看记录”升级到“理解工作模式和效率”
协作展示项目演进故事板、可分享的只读快照、团队维度看板、Demo / 展览模式从“个人本地工具”升级到“可汇报、可分享的协作资产”
工程化与分发发布前 TypeScript 守门、GitHub Actions 自动发布 npm、全局 CLI 启动入口从“本地项目”升级到“可安装、可发布、可直接运行”的产品形态

推荐优先级：

  1. 先做 自动工作日报 / 周报 和 个人 AI 开发画像，最快提升日常打开价值
  2. 再做 Session 叙事时间线 和 Session 复盘助手，拉开产品差异化
  3. 补上 发布前 tsc 校验、GitHub Actions 自动发布 npm 和 session-dashboard 命令启动，降低分发和使用门槛
  4. 最后做 项目演进故事板 和 可分享的只读快照，强化展示与协作能力