dsh-preview-ui

Readme

# 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

```powershell
# 本地链接安装（实时同步）
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"
```

构建：

```powershell
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