jayhe-mdviewer

一个面向 DeepSeek Harness（dsh）的通用文件预览器插件。

当 agent 完成一轮工作并产出文件时，收尾消息下方的"产物"行以垂直列表展示（默认折叠，点击展开全部）；点击任意产物文件即在右侧弹出面板中渲染预览，且每种文件类型都有符合其风格的渲染：

| 类型 | 渲染方式 | | --- | --- | | 📄 markdown | 官方 MarkdownText（完整 GFM、表格、代码块、TeX 公式） | | 💻 代码（js/ts/py/go/rs/java/c/cpp/json/yaml/css/sql/html 等约 70 种扩展名） | highlight.js 语法高亮 + 语言徽标 | | 📊 csv / tsv | 解析为 HTML 表格（支持引号转义字段，500 行封顶） | | 🖼 图片（png/jpg/gif/webp/svg/bmp/ico/avif） | 内联展示 | | 📃 文本 / 日志 | 等宽纯文本 | | 已知二进制（pdf/docx/xlsx/zip 等） | 针对性的"用 ↗ 外部打开"提示 |

English

特性

• 按类型风格化渲染——扩展名驱动识别（约 70 种代码语言 + csv/tsv + 图片 + markdown），每种类型各有专属渲染路径；语法高亮器（highlight.js）直接打进 bundle，无需额外安装。
• 通用预览，不自造解析器——markdown 直接用 @deepseek-ai/dsh-client-ui-primitives 的 MarkdownText 渲染（micromark + KaTeX，与聊天界面同款、天然安全）。
• 垂直可展开产物行——默认折叠为 产物 · N 个文件 ▸，点击展开全部产物（不再截断为 6 个 chip），每个文件一行：类型图标 + 文件名 + ↗ 外部打开。
• 点击即预览——点击文件条目自动在右侧打开预览面板，只渲染所点击的那一个文件；面板提供 ↗ 外部打开、关闭、加载/错误/重试、15 秒超时兜底。
• 同源读取路由——Host 半注册 GET /mdviewer/read，经由部署自身的文件系统服务读取（本地 / 沙箱 / 远程 E2B 后端都可用）；文本 4 MB 上限、图片 4 MB 上限（base64 data URL）、拒绝目录与二进制内容。
• 双语（zh/en）走 locale 服务；样式全部使用部署主题 token（明暗主题自适应）。

环境要求

• dsh 的 web 形态，@deepseek-ai/dsh-* 包版本为 0.1.0-rc.x（基于 0.1.0-rc.6 开发）。
• profile 保留官方 @deepseek-ai/dsh-client-ui-deliverables 行（dsh-web-app 默认挂载）——它是本插件所读取"产物数据"的来源。

安装

web profile 位于 ~/.dsh/profiles/web（按你的 profile 调整）：

cd ~/.dsh/profiles/web
pnpm add jayhe-mdviewer

然后在 profile 自己的 cordis.patch.yml 中加入一行（见 install/cordis.patch.example.yml）：

- insert:
    - id: mdviewer
      name: 'jayhe-mdviewer'

重启 dsh web 进程——插件集合的变更在重启后生效。

这一行同时是 Host 行和浏览器清单条目：package.json 里的 dsh.client 声明会让客户端 bundle 自动进入 window.__DSH_BOOT__。

回滚

cd ~/.dsh/profiles/web
# 从 cordis.patch.yml 删除 `mdviewer` 行，然后：
pnpm remove jayhe-mdviewer

使用

1. 让 agent 产出任意文件（write / edit 工具）。
2. 该轮结束后，"产物"行显示 产物 · N 个文件 ▸，点击展开全部产物（垂直列表）。
3. 点击某个文件条目 → 右侧自动弹出预览面板，只渲染该文件。
   • 条目旁的 ↗（或面板顶部的 ↗）改为用外部编辑器打开。
   • 想换一个文件预览：直接点击产物行里的另一个条目即可。

工作原理

src/index.ts            Host 半：GET /mdviewer/read 路由（webServer + fs）
src/client/index.tsx    客户端 apply：locale 字典、样式、两个槽位注册
src/client/deliverables.ts  轮次产物数据读取（产出路径 + .md 过滤）
src/client/turnTail.tsx     产物行（chain 条目，priority -1）
src/client/viewer.tsx       预览面板（fetch + MarkdownText）

• 产物行读取引擎发布的 deliverables 轮次数据（由官方 @deepseek-ai/dsh-client-ui-deliverables 从改写工具的 locations 累积），所以即使模型忘记在正文里提到某个文件，它也会被列出。
• 面板请求 /mdviewer/read?path=…&cwd=…，返回内容交给 MarkdownText 渲染。

安全说明

• 读取路由为同源，只能读取部署自身文件系统服务可解析的内容；拒绝目录、非普通文件与超过 4 MB 的文件，且只读 UTF-8 文本。
• 该路由刻意不做会话鉴权（与官方文件打开 RPC 处于同一信任边界）；多用户部署请自行评估。

开发

npm install
npm run build        # esbuild 打包 + tsc 声明 → lib/
npm run typecheck    # tsc --noEmit

lib/ 作为构建产物随 npm 包发布，最终用户无需任何构建步骤。

发布清单

1. 确认 package.json 中的包名为最终发布名。
2. npm publish（prepublishOnly 会自动重新构建 lib/）。
3. 给 GitHub 仓库打上 dsh-plugin topic，方便社区发现。
4. 到 DeepSeek Harness discussions 发布插件公告（官方唯一接受外部反馈的渠道）。

许可证

MIT