kangshifu1
dsh-record-replay
Record & Replay for DSH web GUI: session replay, replay packs, screen recording -> skill generation. #dsh-plugin
- Stars
- 0
- Language
- TypeScript
- Created
- Aug 15, 2026
- Updated
- Aug 16, 2026
Introduction
dsh-record-replay · DSH 录制回放(Record & Replay)
DSH Web GUI 的「录制回放」插件,两套能力:
- 会话回放:DSH 自动录制每一场会话(
~/.dsh/sessions/session.jsonl.zstd),本插件把它变成可用资产——时间线回放、导出/导入可分享的回放包、一键复刻到全新会话重新执行。 - 录屏 → 生成技能(Codex Record & Replay 同款):在浏览器里录下你的屏幕操作(computer use,
getDisplayMedia→ webm 视频 + 采样帧),回放查看,并让 agent 逐帧分析(describe_image)自动生成SKILL.md,安装进~/.dsh/skills立即可用。
类似 Codex 的 record & replay:录制是自动的,本插件补齐「回放 / 分享 / 复刻」这一半。
📚 文档
- README — 说明(能力 / 回放包格式 / 数据与隐私 / 架构)
- INSTALL — 导入 / 安装
- USAGE — 使用(会话回放 / 导入导出 / 复刻 / 录屏 / 生成技能)
- SKILL — 作为 DSH skill 的用法
能力
| 功能 | 说明 |
|---|---|
| 会话库 | 侧边栏「录制回放」入口,列出本机全部已录制会话(标题 / 项目 / 时间 / 消息数) |
| 时间线回放 | 以可读时间线查看任意会话:用户消息、助手回复(推理过程可折叠)、工具调用与参数、工具结果(长文可展开),支持搜索过滤 |
| 导出回放包 | 把任意会话导出为单个 dsh-replay-pack JSON(*.replay.json),git 友好、体积小,可直接放到 GitHub 仓库分享 |
| 导入回放包 | 导入队友 / GitHub 上分享的 .replay.json,存到 ~/.dsh/replay-packs,可查看、删除、复刻 |
| 复刻执行 | 把录制会话的用户消息按原顺序逐条发送到全新会话,让 agent 真实重新执行一遍(可用于复现、回归、教学、模板化流程) |
| 录屏 | 浏览器 getDisplayMedia 录制屏幕/窗口(webm + 每 2s 采样帧,存 ~/.dsh/recordings),支持回放与删除 |
| 生成技能 | 一键让 agent 会话逐帧分析录屏(describe_image),输出 SKILL.md 并安装到 ~/.dsh/skills——新技能被 skill 目录热监听发现,直接进入每个会话的技能目录 |
安装
# 本地路径安装(开发 / 自用,推荐)
dsh plugin --profile web add link:/path/to/dsh-record-replay
# 或从 npm 安装(发布后)
dsh plugin --profile web add dsh-record-replay
安装后重启 dsh web GUI(插件集会变更需要重启生效)。侧边栏出现「录制回放」入口即成功。
原理:
dsh plugin是 pnpm 转发器——把包装进 profile 的node_modules,检测到dsh.bundle声明后把cordis.patch.yml并入 bundle 层,插件行进入 roster;浏览器半区按dsh.client声明以/plugins/dsh-record-replay/client.js加载。
使用
- 点侧边栏「录制回放」打开面板。
- 会话 tab:任一会话可「回放」(时间线)、「导出」(下载回放包)、「复刻」(开新会话重新执行)。
- 回放包 tab:导入
.replay.json,管理已导入的包。 - 录屏 tab:点「开始录屏」选择屏幕/窗口录制操作;停止后自动上传视频与采样帧。对任意录屏可「回放」,或点「生成技能」——插件开一个 agent 会话,让它逐帧调用
describe_image提炼工作流并产出 SKILL.md,写入~/.dsh/skills/<name>/SKILL.md后即成为可用技能。
回放包格式
{
"format": "dsh-replay-pack",
"version": 1,
"meta": { "title": "...", "cwd": "...", "createdAt": 0, "agentPreset": "code", "exportedAt": 0, "sourceSessionId": "session-..." },
"items": [
{ "kind": "user", "turn": 1, "step": 1, "text": "...", "time": 0 },
{ "kind": "assistant", "turn": 1, "step": 1, "text": "...", "reasoning": "...", "time": 0 },
{ "kind": "tool", "turn": 1, "step": 1, "name": "run_code", "callId": "...", "argsText": "{...}", "time": 0 },
{ "kind": "result", "turn": 1, "step": 1, "callId": "...", "text": "...", "time": 0 }
]
}
数据与隐私
- 读取:
~/.dsh/sessions/**/session.jsonl(.zstd)(DSH 自动录制,本插件只读)。 - 写入:
~/.dsh/replay-packs/(导入的回放包)、~/.dsh/recordings/(录屏)、~/.dsh/skills/(生成的技能)。 - 录屏隐私:录屏会捕获屏幕上的一切(含密码输入等),生成技能前请留意;录制全程仅在浏览器本地,上传存于本机
~/.dsh/recordings。 - 注意:回放包含完整对话与工具输出,可能含密钥 / 敏感信息——分享前请自行脱敏。API 路由仅限 loopback(本机浏览器同源),LAN 暴露的 dsh web 部署不会提供服务。
开发
pnpm install
pnpm build # tsc 编译宿主半区到 lib/,tsdown 打包浏览器半区到 lib/client.js
pnpm smoke # 对本机真实会话跑一遍 扫描→解析→建包→解析→存库 冒烟测试
架构
双面插件(dsh-web-ui 家族约定):
- 宿主半区(
src/index.ts,node):SessionStore扫描解码会话、timeline.ts蒸馏时间线、replay-pack.ts/pack-store.ts回放包、recording-store.ts录屏存储(webm + 帧,视频带 Range 支持)、skill-installer.ts技能安装(校验 frontmatter 与 skill 命名、写入~/.dsh/skills)、routes.ts提供/api/dsh-record-replay/*,并向 agent 宣告插件存在(system-prompt section)。zstd 解码使用 vendored fzstd(MIT,支持多帧流),无运行时第三方依赖。 - 浏览器半区(
src/client/):侧边栏入口(DOM 级注入、自愈)+ 中央列面板(React,单占用者接管,与 task-board / ssh 面板互斥)。会话/回放包/录屏三个 tab;复刻执行与技能生成都复用官方sessions/workspaces/connection服务——技能生成会话用describe_image逐帧看录屏帧(宿主以 HTTP URL 提供),最后把 agent 输出的 SKILL.md 交给宿主安装。
License
Apache-2.0。Vendored fzstd © 101arrowz, MIT(见 THIRD_PARTY_NOTICES.md)。