Introduction

When modifying code in DSH Web UI, you often need to view the project running results and workspace files simultaneously. @dsh-external/dsh-web-preview-float provides two independent floating windows: a preview iframe and a code file tree. It mounts via official extension points and does not modify the DSH core.

What is this

@dsh-external/dsh-web-preview-float is a floating preview plugin for the DeepSeek Harness (DSH) Web UI, maintained by WJNCT55555. The current version is 0.1.0 and the license is MIT. The GitHub repository is https://github.com/WJNCT55555/dsh-web-preview-float.

It provides two independent floating windows that are draggable, resizable, and minimizable:

  • Preview Window: Uses iframe to connect directly to the project dev server.
  • Code Window: Provides workspace file tree and code content viewing/editing.

The plugin relies on official extension points ctx.webServer, ctx.fs, ctx.sandboxPolicy, and a self-contained DOM portal, without modifying the DSH core.

Core Features

Preview Window

The preview window uses an iframe to load the project dev server. The URL is automatically detected from the project’s package.json scripts. Common mappings are as follows:

Vite→5173
Next/CRA→3000
Astro→4321

If the detected result is not suitable for the current project, you can manually modify the URL.

Window controls support:

  • Common aspect ratio presets: 16:9 / 4:3 / 3:2 / 21:9 / 9:16 / 9:18 / 9:19.5
  • Lock aspect ratio to maintain proportions during manual resizing
  • Enter width×height directly to customize dimensions
  • Common resolution presets: 1920×1080 / 1366×768 / 390×844, etc.
  • Zoom in/Restore: automatically scales to fit when off-screen

Code Window

The code window provides a workspace file tree and supports lazy-loading directories. Click a file to view its content. Direct editing is also supported: click “Edit” to enter edit mode, then click “Save” or press Ctrl+S to confirm the write.

A confirmation dialog will appear when saving. After confirmation, the file is written, and the web-preview/code-edit session event is logged to the DSH logs. The current code window displays plain text; syntax highlighting is not implemented.

For binary or very large files (>256KB), a “file too large” warning will be shown; write operations are limited to 1MB.

Window State

Both floating windows have maximize/restore buttons in the title bar, allowing you to maximize them to fit the screen with one click. They can also be dragged directly after minimizing into a capsule. Floating window position and size state are saved in memory and return to default positions after refreshing.

Installation and Activation

The activation method provided in the README is to install it as a profile patch layer. The plugin’s built-in cordis.patch.yml inserts the following configuration:

- id: dsh-web-preview-float
  name: '@dsh-external/dsh-web-preview-float'

After installation, restart DSH Web:

dsh web

Two floating windows will appear in the browser.

Local Development

If local development is needed, execute the following first:

pnpm install
pnpm run typecheck
pnpm run test
pnpm run build

The build produces lib/index.js (Node side) and lib/client.js (Browser side).

Local development relies on @deepseek-ai/cordis. It is a vendored package not available on npm; package.json’s devDependencies uses a link: reference pointing to the vendor/cordis in the harness checkout.

The peerDependencies are declared as follows:

{
  "@deepseek-ai/cordis": "^4.0.1-rc.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

Typical Usage

  1. After installation, restart dsh web. Two floating windows will appear in the browser.
  2. Confirm the URL in the preview window. The URL is automatically detected from the project’s package.json scripts (Vite → 5173, Next/CRA → 3000, Astro → 4321), but you can also modify it manually.
  3. Click a file in the code window to view its content; click “Edit” to enter edit mode, and click “Save” or press Ctrl+S to confirm the write.
  4. When you need to adjust the view, use the maximize/restore buttons in the title bar, or drag the window after minimizing it into a capsule.
  5. The preview window allows you to choose aspect ratio presets (e.g., 16:9, 9:16) or resolution presets (e.g., 1920×1080, 390×844), or enter width×height directly.

Suitable Scenarios and Notes

Suitable for scenarios where you are modifying code in DSH Web UI and viewing the dev server page effect simultaneously, while quickly browsing workspace files.

The plugin uses official extension points like ctx.webServer, ctx.fs, ctx.sandboxPolicy, and code window saving writes to project files. Therefore, before installation, you should check the source code and license, and confirm that you trust the current project and the current DSH process permissions.

The current version is 0.1.0, syntax highlighting is not implemented, and floating window position/size state is not preserved across refreshes.

GitHub: https://github.com/WJNCT55555/dsh-web-preview-float