dsh-preview-ui
DeepSeek Harness（DSH）文件在线预览与修改插件：在浏览器内直接浏览工作区文件树、预览常见文件格式、在线编辑文本文件，并保留本地版本历史。
A DSH plugin for DeepSeek Harness Web. Browse the active workspace as a file tree, preview common file formats directly in the browser, edit text files online, search file content, and restore local version snapshots — no external tools required.
功能 / Features
- 文件树浏览：树形展示工作区目录，支持文件名过滤与懒加载子目录
- 多格式预览：
- 代码 / 文本（自写 tokenizer 语法高亮）
- Markdown（标题、列表、表格、引用、代码块、链接、图片）
- 图片（PNG/JPG/GIF/SVG/WebP/BMP/ICO）
- PDF（浏览器原生查看器）
- Office（DOCX / XLSX / PPTX，OOXML ZIP 解析）
- HTML（iframe 沙箱预览，禁用脚本执行）
- 二进制（前 4KB 十六进制 dump）
- 在线编辑：textarea + 高亮 overlay，
Ctrl+S 保存，保存前自动创建版本快照
- 版本历史：快照存储于
.dsh-preview-ui/versions/，支持回滚，单文件最多保留 50 个版本
- 全文搜索：按文件名或文件内容搜索工作区
- 拖入预览：将文档或整个项目文件夹拖入面板，递归生成本地文件树并预览
- Agent 工具：注册
list_files 与 preview_file 工具，Agent 可主动触发预览面板
安装 / Install
# 本地链接安装（实时同步）
pnpm dsh plugin --profile web add "dsh-preview-ui@link:d:/dsh-preview-ui"
# 或从 GitHub 安装
pnpm dsh plugin --profile web add "github:xusuyang030218/dsh-preview-ui"
构建：
cd d:\dsh-preview-ui
pnpm install
pnpm run build
重启 DSH Web 服务后，访问 http://127.0.0.1:3080，输入框左侧会出现「预览」按钮。客户端 bundle 由 /plugins/dsh-preview-ui/client.js 提供。
目录结构 / Structure
dsh-preview-ui/
├── src/
│ ├── host/
│ │ ├── index.ts # Host 半：list_files / preview_file 工具
│ │ ├── web.ts # Web 半：/dsh-preview-ui/api/* 路由
│ │ ├── fs.ts # 文件系统封装（树/读/写/搜索/路径校验）
│ │ ├── version.ts # 版本快照管理
│ │ └── parse.ts # 二进制嗅探 + 语言检测 + Office 解析
│ └── client/
│ └── index.tsx # Client 半：文件树 + 预览面板 + 编辑器
├── lib/ # 构建产物（esbuild / tsdown）
├── cordis.patch.yml # DSH bundle patch
├── tsdown.config.ts
└── package.json
安全 / Security
- 所有 API 均锚定在 DSH 配置的工作区根目录
- 拒绝绝对路径、路径穿越、直接访问版本快照目录
- HTML 预览使用无脚本权限的 iframe 沙箱
- raw 端点按扩展名返回安全 MIME，并附带
X-Content-Type-Options: nosniff
License
MIT
