When developing in the DSH (DeepSeek Harness) environment, frequently switching windows to view code, documentation, or edit files can reduce efficiency. The dsh-preview-ui plugin integrates file tree browsing, multi-format previewing, online editing, and version management directly in the browser, so all operations can be completed in the current web interface.

This is a DSH client plugin maintained by xusuyang030218. It allows users to browse the file tree of the current workspace in the browser, preview multiple formats including code, Markdown, images, PDF, Office documents, and HTML, edit text files online, and automatically retain local version history.

Installation and Activation

Install the plugin using pnpm.

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

After installation, enter the project directory and build it:

cd d:\dsh-preview-ui
pnpm install
pnpm run build

Restart the DSH web service, visit http://127.0.0.1:3080, and a “Preview” button appears on the left side of the input box. The plugin is provided through /plugins/dsh-preview-ui/client.js.

Core Features

  • File Tree Browsing: Displays workspace directories in a tree structure, supports filtering by filename and lazy loading of subdirectories.
  • Multi-Format Preview:
    • Code and text: Supports syntax highlighting.
    • Markdown: Renders headings, lists, tables, code blocks, and more.
    • Images: Supports PNG, JPG, GIF, SVG, WebP, BMP, and ICO.
    • PDF: Uses the browser’s native viewer.
    • Office: Supports parsing DOCX, XLSX, and PPTX.
    • HTML: Previews in an iframe sandbox with script execution disabled.
    • Binary: Displays a hexadecimal dump of the first 4KB.
  • Online Editing: Uses a textarea with a highlighting overlay for editing. When saving with Ctrl+S, the system automatically creates a version snapshot.
  • Version History: Snapshots are stored in the .dsh-preview-ui/versions/ directory. Supports rollback operations, retaining up to 50 versions per file.
  • Full-Text Search: Supports searching files in the workspace by filename or file content.
  • Drag-and-Drop Preview: Supports dragging documents or entire project folders into the panel, recursively generating the file tree and previewing it.
  • Agent Tools: The plugin registers list_files and preview_file tools, allowing the Agent to proactively trigger the preview panel.

Typical Usage

  1. After restarting the service, find the “Preview” button on the left side of the interface at http://127.0.0.1:3080.
  2. Drag local documents or a project folder directly into the preview panel; the system automatically parses the file tree.
  3. Edit text files in editor mode and save with Ctrl+S; the system automatically creates a version snapshot before saving.
  4. In DSH Agent, call the list_files or preview_file tool to proactively open the preview panel.

Security and Notes

All plugin APIs are anchored to the workspace root directory configured in DSH. The system rejects absolute paths, path traversal attacks, and direct access to the version snapshot directory. HTML preview uses an iframe sandbox without script permissions, and the raw endpoint returns safe MIME types with the X-Content-Type-Options: nosniff header.

As a plugin running with the permissions of the current DSH process, please review the source code and license (MIT) before installation.

Ecosystem Background

The design philosophy of DSH is “everything is a plugin.” This plugin is listed in the community directory and has no official affiliation with DeepSeek or High-Flyer.