dsh-showme-html:在对话中展示 HTML 并回传反馈

DSH(DeepSeek Harness)是插件化的开发平台。在构建包含视觉输出的 Agent 工作流时,Markdown 文本会丢失视觉信息,导致用户难以区分变体,且反馈过程容易丢失语义。dsh-showme-html 插件解决了这一问题,它允许 Agent 将工作区中的 HTML 页面渲染为对话卡片,并将用户在页面上的表态以结构化文本回传给 Agent。

核心能力

该插件包含以下核心功能:

  1. 工具 show_html:Agent 调用此工具展示 HTML 页面,参数为 path(路径)、title(标题)、note(备注)。页面正文以文件形式存在,便于迭代和留档。
  2. 镜像读路由:提供 GET /api/showme/raw/<sessionId>/<工作区相对路径> 接口。页面内的相对引用(如 <img>、样式文件)可正常工作,同一地址即为“在浏览器打开原文件”。
  3. 对话内卡片:展示标题、路径、刷新、全屏、在浏览器打开等操作。非可见的历史卡片不会持有活跃的 iframe。
  4. 画面内全屏:通过框架级浮层实现,按 Esc 键退出,滚动位置不丢失。
  5. 反馈两条路:页面通过 postMessage 将表态内容一键填入对话输入框,或通过 POST /api/showme/feedback 追加到反馈文件。
  6. 四套预设样式:包含 soft(柔和现代)、swiss(瑞士国际主义)、brutal(新野兽派)、blueprint(蓝图/工程图)。
  7. 回执体检:展示前扫描页面,检查是否存在可点名的 ID、postMessage 回传配置以及相对资源引用。
  8. skill showme-report:教 Agent 如何编写页面,包括样式引入、回执契约和交换格式。

安装

通过命令行安装插件:

dsh plugin --profile web add "github:liceses/dsh-showme-html"

安装后需重启 dsh web 服务以生效。

典型用法

1. 编写 HTML

在 Agent 生成的内容中引入预设样式:

<link rel="stylesheet" href="presets/swiss.css">

2. 调用工具

Agent 调用 show_html 工具:

show_html({
  path: ".dsh/showme/review.html",
  title: "设计评审",
  note: "挑一个变体"
})

3. 查看与反馈

页面会作为卡片出现在对话中。用户可在页面上进行表态,点击“填入输入框”即可将文本追加到对话输入框。

说明

  • 无常驻服务:不新增独立服务,依赖宿主的 DSH web server。
  • 目录位置:页面默认落在 .dsh/showme/ 隐藏目录,不污染源码树。
  • 样式与模板:预设样式非强制,若需评审特定系统的视觉,应使用官方调色板。模板文件在首次 show_html 时创建(create-only)。
  • 文件命名:页面文件名必须与数据文件名同名(如 mypage.html 和 mypage.data.js)。
  • 离线可用:预设样式自包含,无外链字体和 CDN,断网可用。

生态

该插件遵循 MIT 许可证,由 liceses 维护。DSH 理念是“一切皆插件”,社区目录提供插件索引。更多细节可查看:

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜