mcpField
S
session-replay

session-replay

github.com/athola创意与媒体34380 次安装2 天前更新
代码仓库

关于 session-replay

session-replay 可将 Claude Code 会话 JSONL 文件转换为终端输出风格的动画 GIF，适合制作开发演示、PR 证据和教程片段，并支持筛选轮次与显示内容。

主要功能

  1. 01将会话 JSONL 解析为轮次
  2. 02筛选轮次和显示内容层
  3. 03从对话生成 VHS 磁带
  4. 04将磁带渲染为动画 GIF

适用场景

  1. 01制作开发工作流演示
  2. 02为 PR 附上回放证据
  3. 03在 Slack 或 GitHub 分享会话片段
  4. 04在教程中嵌入回放

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/athola/claude-night-market --skill session-replay

安装后在 Claude Code 中输入/session-replay确认已加载。

详细介绍

Session Replay

将 Claude Code 会话 JSONL 文件转换为动画 GIF， 以终端输出逐字显示对话。

此技能按三个步骤执行：将会话文件解析为轮次， 根据这些轮次生成 VHS 磁带，然后交由 scry 渲染 GIF。

使用场景

  • 创建开发工作流演示
  • 为拉取请求添加可视化证据
  • 在 Slack 或 GitHub 上分享会话亮点
  • 在教程中嵌入会话回放

不适用场景

  • 根据会话撰写博客文章（使用 scribe:session-to-post）
  • 生成 API 文档（使用 scribe:doc-generator）
  • 录制实时终端命令（直接使用 scry:vhs-recording）

集成点

需求技能提供的功能
GIF 渲染scry:vhs-recording将 VHS 磁带转换为动画 GIF
嵌入教程scribe:tech-tutorial在教程 Markdown 中嵌入 GIF
准备 PRsanctum:prepare-pr将回放作为 PR 证据附上

工作流

步骤 0：选择会话（未提供路径时）

用户在不带路径参数的情况下调用 /session-replay 时， 使用 scribe.session_parser.list_sessions() 从 ~/.claude/projects/ 中查找最近的会话文件。

该函数会返回按修改时间排序的 SessionInfo 对象列表（最新的在前），每个对象包含：

  • path：.jsonl 文件的完整路径
  • modified：mtime 时间戳
  • first_user_message：第一条用户消息的预览
  • turn_count：会话中的用户轮次数
  • project_name：父目录名称

以编号菜单的形式向用户展示列表：

Recent sessions:
 1. [my-project] "implement auth module" (8 turns, 2h ago)
 2. [api-server] "fix rate limiting bug" (3 turns, 5h ago)
 3. [docs-site]  "update installation guide" (12 turns, 1d ago)

请用户选择一个编号。后续步骤使用所选会话的 path。

如果 list_sessions 返回空列表，告知用户未找到会话， 并建议直接提供路径。

步骤 1：解析会话

使用 scribe.session_parser.parse_session() 读取 JSONL 文件。解析器会：

  • 提取用户和助手轮次
  • 跳过 sidechain（子 Agent）记录
  • 将工具调用整理为易读的摘要
  • 按配置的列宽换行文本
  • 按配置的行数截断过长的回复

根据用户选项应用筛选条件：

  • --turns 选择指定的轮次范围（例如 1-5）
  • --show 控制显示哪些层：user、assistant、 tools、thinking（默认不包含 thinking）
步骤 2：生成 VHS 磁带

使用 scribe.tape_generator.generate_tape() 将解析后的 轮次转换为 VHS 磁带文件。生成器会：

  • 创建 Output 指令和 Set 命令
  • 以 30ms/字符的速度输入用户消息，并添加 $ 前缀
  • 以 15ms/字符的速度输入助手回复
  • 以 100ms 的速度输入工具摘要，并缩进两个空格
  • 在轮次之间添加 1.5s 的暂停
  • 将最后一帧保持 3s
  • 按 --speed 倍速缩放所有时间
  • 超出 --max-duration 时截断内容

将磁带写入临时文件： {tempdir}/session-replay-{timestamp}.tape

步骤 3：渲染 GIF

使用磁带文件路径调用 Skill(scry:vhs-recording)。 Scry 会验证磁带、运行 VHS，并在 Output 指令指定的 路径生成 GIF。

渲染成功后，删除临时磁带文件。

错误处理
错误操作
未安装 VHS提示：通过 go install github.com/charmbracelet/vhs@latest 安装
磁带语法错误报告 VHS 错误输出。可能是字符串转义错误。
GIF 生成失败报告 VHS 错误。建议使用 --turns 1-5 缩小范围。
未找到 Scry 技能提示：渲染 GIF 需要 scry 插件。

示例

# Pick from recent sessions interactively
/session-replay

# Replay a specific file directly
/session-replay ~/.claude/projects/my-project/abc123.jsonl

# First 5 turns only, faster playback
/session-replay --turns 1-5 --speed 1.5

# Show only the conversation, no tool calls
/session-replay --show user,assistant --output demo.gif

输出（交互式选择器）：

Recent sessions:
 1. [my-project] "implement auth module" (8 turns, 2h ago)
 2. [api-server] "fix rate limiting bug" (3 turns, 5h ago)
 3. [docs-site]  "update installation guide" (12 turns, 1d ago)

Pick a session [1-3]: 1

Parsed 42 turns from session (12 user, 15 assistant, 15 tools)
Generated tape: /tmp/session-replay-1711234567.tape
Rendering GIF via scry...
Done: session-replay.gif (18s, 960x540)

退出标准

  • 在尝试渲染之前，将 VHS 磁带文件写入 {tempdir}/session-replay-{timestamp}.tape
  • 在磁带文件的 Output 指令指定的路径生成 GIF，并报告其大小（时长、尺寸）
  • GIF 成功渲染后删除临时磁带文件
  • 如果未安装 VHS，则报告错误并提供安装命令 go install github.com/charmbracelet/vhs@latest，而不是 静默失败
  • 如果未提供 JSONL 路径，且 list_sessions() 返回空结果， 则告知用户未找到会话，并提示直接提供路径

评论

支持 Markdown