dsh-conversation-screenshot

Readme

# dsh-conversation-screenshot — dsh 会话截图插件

dsh 插件：在 dsh Web 界面里把「用户与模型的对话」渲染成一张 PNG 长图并写入系统剪贴板；浏览器拒绝剪贴板写入时自动回退为 PNG 下载。

纯前端实现：克隆已加载的对话 DOM，读取浏览器自身的布局（盒子 + 逐字符光标矩形），直接绘制到一张 canvas 上，不依赖任何第三方渲染库；界面图标（内联 SVG）序列化后一并绘入。跟随 dsh 主题（深色/浅色）与中英文界面语言。

> **本项目由 AI 生成**：由 DeepSeek-V4.1-Flash 与 GLM-5.3-Flash 两个模型协作完成，人类负责提出需求、调整方向并验收成果。提示词与模型分工详见文末 [AI 生成说明](#ai-生成说明)。

## 功能

- **整段长截图**：输入框工具栏右侧的相机按钮。截取当前会话已加载的全部对话。
  - 若会话顶部还有未加载的历史（出现「加载更早」按钮），会自动反复点击拉全历史后再截图；dsh 拉取失败时持续重试，确实拉不动则如实提示「仅含已加载的对话轮次」。
  - 内容超过浏览器画布上限（约 16000px 边长 / 44M 像素）时自动降采样，并用提示语说明实际缩放倍数。
- **单轮截图**：每条已完成回复下方操作行（悬停可见）里的相机按钮。截取**这一轮问答**——从该轮的用户提问气泡开始，到该轮回复结束（含用量/时间行），不混入相邻轮次。

## 截图范围

只截**当前打开会话**的对话区（含用户气泡、模型回复、工具调用行、文件卡片、用量行），不包含侧栏、输入框和其他会话。

## 安装

本地目录安装（推荐，便于改代码即时生效——dsh 以符号链接方式引用）：

```bash
dsh plugin --profile web add /path/to/dsh-plugin/screenshot
```

删除：

```bash
dsh plugin --profile web remove dsh-conversation-screenshot
```

安装后刷新 dsh Web 页面即可。插件名：`dsh-conversation-screenshot`。

## 使用

1. 打开任意会话；
2. 截整段：点输入框工具栏的相机按钮，等待「已复制长截图」提示；
3. 截单轮：鼠标悬停到目标回复，点该轮操作行里的相机按钮，等待「已复制本轮截图」提示；
4. 到任意支持粘贴图片的地方（聊天窗口、文档、画图工具）Ctrl+V 粘贴。

复制成功时按钮图标会短暂变为对钩（与 dsh 复制成功的反馈一致）；剪贴板不可用时回退为下载 PNG，按钮不变。

## 已知限制

- dsh 自身拉取历史偶发崩溃（控制台可见 `session-controller event feed subscriber failed`），插件会持续重试并在确实无法继续时诚实降级为部分截图。
- 界面图标随实况渲染：鼠标悬停才显示的按钮图标（复制/分叉等），在截图里同样保持隐藏；超过 256px 或通过 `<use>` 引用外部符号的 SVG 会跳过，以避免渲染挂起或画布污染。

## 文件结构

```
├── client.js         # 全部逻辑：Canvas 绘制、历史分页、单轮定位、两个 UI 入口
├── index.js          # Host 侧占位
├── package.json      # 插件清单（client 注入项、exports）
├── cordis.patch.yml  # 服务注册补丁
├── icon.svg
└── locale/           # 插件管理器里的标题/描述翻译
    ├── en.json
    └── zh.json
```

## 开发

改 `client.js` 后刷新页面即可生效；若改动 `package.json`（如 inject 列表），dsh 服务端会重算 bundle revision。调试时注意浏览器 HTTP 缓存可能滞留旧 bundle——清缓存或改清单字段强制刷新。

验证方式：`chromium --remote-debugging-port=9222` 打开页面，用 CDP `Input.dispatchMouseEvent` 派发受信任点击，再 `navigator.clipboard.read()` 读回 PNG 检查尺寸与内容。

## AI 生成说明

**本项目由 AI 生成**。两个大模型先后接力完成，人类只在需求、方向与验收上介入，未直接编写代码。

### 提示词摘要

项目起于一句需求：「帮我做一个 dsh 插件，实现可以对 dsh 内的会话内容进行截图复制到剪切板的功能，可以在网页内长截图用户与模型的对话」——DeepSeek-V4.1-Flash 据此从零搭出插件初版（bundle 骨架、Canvas 直接绘制管线——期间历经 SVG foreignObject 污染画布、离屏渲染挂起等弯路——以及 CDP 实机验证环境）。随后人类以三句话调整方向：先澄清「主要是单次会话截图，而不是全部截图」，划定了只截当前会话的边界；再要求「截单轮的问答」，催生了每轮回复操作行里的单轮截图入口；最后指示打包到新目录、写 README、初始化 git 仓库并采用 CC0 许可证，形成了本仓库的发布形态。

### 模型分工

| 模型 | 阶段 | 主要工作 |
| --- | --- | --- |
| **DeepSeek-V4.1-Flash**（dsh 内置 agent） | v1.0.0 初版 | 从零搭出插件：slots 注入、clone + 布局读取 + Canvas 绘制方案、剪贴板复制与下载回退、在真实浏览器里用 CDP 调试并迭代多轮渲染方案 |
| **GLM-5.3-Flash**（ZCode 代理） | v1.0.1–v1.1.1 | 端到端验证并修复两个渲染缺陷（克隆丢失祖先 CSS 自定义属性导致列宽错误、`measureText` 拟合断行漂移导致丢字）、实现单轮截图、历史加载改为人工式持续重试并诚实降级、补上界面图标的 SVG 渲染、打包与仓库 |

### 人工参与

人类提出原始需求与两次方向调整（截图范围、单轮粒度），选定许可证，并对每个功能在真实 dsh 会话中验收截图效果。

## 许可证

[CC0 1.0（公有领域贡献）](./LICENSE)——作者已尽可能放弃全部版权，可任意使用、修改、分发，无需署名。