Preface

The DeepSeek Harness (DSH) Web version extends the interface and interaction through plugins. For developers who frequently code alongside AI, common practical problems in real work are not just “can it generate code,” but how to quickly view Markdown, code, images, and HTML in the workspace, run local projects and view logs, and pass relevant context back to the conversation.

dsh-web-preview-panel addresses these actions with a sidebar panel: local static hosting, project running, element marking and annotation, link click interception, and directly dragging files into the chat dialog, as well as Markdown/code/image preview.

What is it

This is a plugin for DSH Web. The name field in package.json is dsh-web-preview-panel, and the repository address is https://github.com/zoumutou/dsh-web-preview.

It hosts static resources in the current session’s workspace through DSH’s own HTTP service and opens a preview panel on the right side of the chat interface. The license is MIT.

Core Features

Click the ▶ button in the top-right corner of the chat to open the glass-style card preview panel on the right side.

  • Each session has independent state.
  • The address bar syncs in real-time.
  • Panel width is draggable. The order is “squeeze chat → max 400px → overlay mode”.

Local File Preview

Workspace static files are hosted through Harness’s own HTTP service, with paths like:

/__dsh-preview/<sessionId>/...

Supported features:

  • Markdown rendering
  • Code with line numbers
  • Direct image display
  • HTML display as-is

Project Running

The plugin can automatically detect the following project types:

  • Cargo
  • package.json
  • go.mod
  • Python projects

Supports running and stopping, and real-time scrolling of logs. After running, if localhost:PORT is recognized, the preview can be loaded. Logs can also be sent to AI for assisted diagnosis.

Element Marking and Annotation

In marking mode, you can:

  • Hover to highlight
  • Click to select elements
  • Show annotation bubbles
  • Send to chat with one click

Selectors or HTML snapshots automatically strip internal marking classes.

Dragging Files into Chat Dialog

After dragging a file into the chat dialog, the file is saved to the workspace:

.dsh-drops/

Then it is added to the draft via a path reference.

  • When dragging an image individually, it still follows DSH’s native image attachment channel.
  • When mixed dragging, images are also saved as file references.
  • Upload limit is 64 MB.

The upload interface is:

POST /__dsh-preview/upload

Request headers include:

  • X-Dsh-Sid
  • X-File-Name
  • X-File-Size
  • X-File-Type

The following content in the chat can be opened in the sidebar:

  • http(s) links
  • Relative/Absolute file paths
  • Plain text paths

Paths support CJK/Chinese filenames. When holding Cmd or Ctrl and clicking, browser default behavior is preserved.

Theme Following and Session Isolation

Panel UI, input area bubbles, code/Markdown/file missing preview pages, and mark/annotation floating layers follow DSH’s light/dark theme. Switching takes effect immediately, defaulting to dark mode.

Each session independently manages:

  • Preview state
  • Root directory, defaulting to the current session’s workspace
  • Running process

Installation and Enabling

Requires DSH Web version.

First, execute the installation in the profile directory (e.g., ~/.dsh/profiles/web):

npm install dsh-web-preview-panel

Then mount the plugin in cordis.patch.yml:

- insert:
    - name: dsh-web-preview-panel

Finally, restart:

dsh web

After the above steps, the plugin is enabled in DSH Web.

package.json also declares the following dependencies and client information:

  • @deepseek-ai/cordis: ^4.0.1
  • react: ^18.2.0
  • dsh.client.inject:
    • @deepseek-ai/dsh-client-runtime
    • @deepseek-ai/dsh-client-connection
    • @deepseek-ai/dsh-client-ui-slots
    • @deepseek-ai/dsh-client-locale
  • dsh.client.platform: web

If building locally, you can execute:

npm run build

Output:

  • lib/index.js
  • lib/client.js

Typical Usage

Below is a common path from installation to daily use:

  1. Execute in the profile directory:
    npm install dsh-web-preview-panel
  1. Mount in cordis.patch.yml:
    - insert:
        - name: dsh-web-preview-panel
  1. Restart:
    dsh web
  1. Click the ▶ button in the top-right of the chat to open the preview panel on the right.
  2. View Markdown, code, images, and HTML in the sidebar preview.
  3. When running a project, the plugin automatically recognizes localhost:PORT and loads the preview.
  4. Drag files into the chat dialog; files are saved to .dsh-drops/ in the workspace and added to the draft via path reference.
  5. Click links, relative/absolute file paths, or plain text paths in the chat to open them in the sidebar.
  6. Select elements, write annotations in marking mode, and send the results to the chat.
  7. Send project logs to AI for assisted diagnosis.

Scenarios and Notes

Suitable for developers using DSH Web who want to centralize the following actions into a single sidebar panel:

  • Viewing Markdown, code, images, and HTML in the workspace
  • Running local projects and viewing logs
  • Marking page elements and passing context to AI
  • Dragging files directly into the chat dialog
  • Maintaining session isolation between chat and preview

Points to note:

  • This plugin runs with the current DSH process permissions.
  • It handles workspace static files, runs local projects, and receives dragged files.
  • Source code and license should be checked before installation.
  • Drag file limit is 64 MB.
  • License is MIT.

Conclusion

The value of dsh-web-preview-panel lies in centralizing local file preview, project running, element annotation, file dragging, and link interception into DSH’s sidebar panel. It is suitable for scenarios requiring frequent switching between chat, workspace, and local projects.

Repository address: https://github.com/zoumutou/dsh-web-preview