Preface¶

The philosophy of DSH is “everything is a plugin.” The community directory operates as an independent site, with no official affiliation to DeepSeek or High-Flyer.

When working with code-related tasks in DSH Web, relying solely on a chat window is sometimes insufficient. File browsing, editing, Git commits, terminal output, and background tasks, if scattered across multiple windows, can disrupt the current session context. The following introduction covers gameswu/dsh-plugin-vscode-sidebar, a client-side plugin that integrates the file browser, editor, terminal, source code management, embedded browser, and task management into the right sidebar and bottom panel of DSH Web, with isolation per session.

What This Is¶

Name: gameswu/dsh-plugin-vscode-sidebar
Maintainer: gameswu
Category: Client-side
License: MIT
Purpose: Provides a VSCode-style right sidebar for the DSH (DeepSeek Harness) Web interface and extends the bottom panel, including a file browser, editor, terminal, source code management, embedded browser, and task management.

This plugin is a composite package with its own patch layer, containing dsh.bundle and cordis.patch.yml. During installation, the package is automatically mounted into dsh.profile.bundles.

Core Features¶

File Browser¶

The file browser uses a lazy-loading directory tree and displays icons based on file types via vscode-icons. It supports creating new files, new folders, renaming, and deletion; deletion operations require confirmation.

In Git repositories, files ignored by .gitignore are displayed with reduced brightness in gray but remain in the list; Git status letter badges are shown next to files.

Large directories are rendered by window, defaulting to 200 items displayed, with the rest collapsed, to avoid loading a large number of directory entries into the DOM at once.

Editor and Markdown Preview¶

The editor uses Monaco for text editing and supports full-language syntax highlighting. Ctrl+S saves the file; unsaved status is indicated in the tab title, and auto-save can be enabled in settings. Images, Markdown, HTML, and PDF support inline preview.

Markdown preview uses the DSH renderer, supporting KaTeX math formulas and image rendering. Relative links and file references within the document can be clicked to open the corresponding files.

Source Code Management¶

The source code management panel provides colored status badges, +a −d line counts, inline diffs, commits, and branch switching, with ahead/behind display. It supports a history swimlane graph, can automatically detect Git repositories in subdirectories, and allows configuration to exclude directories.

Terminal and Embedded Browser¶

The terminal, based on xterm.js and node-pty, provides a real shell. It can optionally inject terminal_* tools for the model.

The embedded browser uses a sandboxed iframe and supports opening multiple web tabs.

Task Management¶

Task management is used to view subagent topology and background task cards. Clicking a task card expands a terminal-style streaming output; new tasks can be set to expand automatically.

Running subagents are pinned to the top, while historical subagents are listed below and can be collapsed. The task and terminal lists also use collapsible display, mounting only content within visible windows.

Settings, Layout, and Extensions¶

All settings are integrated into the plugin configuration page and take effect immediately after modification without requiring a restart. Interface text switches in real-time following the DSH language (zh/en), and the panel layout is persisted per session.

The plugin also exposes services for other plugins to register sidebar tabs and file viewers.

Installation and Enabling¶

Installation Command¶

When installing from a local path, replace <path>/dsh-plugin-vscode-sidebar with the directory of this repository:

dsh plugin --profile web add <path>/dsh-plugin-vscode-sidebar

When installing from GitHub, it is recommended to pin the commit. The <sha> in the command is a placeholder; replace it with the commit you wish to install:

dsh plugin --profile web add github:gameswu/dsh-plugin-vscode-sidebar#<sha>

Build Permissions for pnpm >=10¶

When installing from GitHub, pnpm may run the prepare build script of this package after installation to generate lib/. pnpm ≥10 refuses to execute this by default, so the first add may fail and prompt you to add the package key to the pnpm-workspace.yaml of this profile. You need to add the following configuration and retry:

allowBuilds:
  dsh-plugin-vscode-sidebar: true
  node-pty: true
  protobufjs: true

This involves build authorization: during installation, the build scripts of this package will be executed on your machine, so only authorize trusted sources.

Restart and Uninstallation¶

After installation, restart the Web interface to enable the plugin:

dsh web

To uninstall, run:

dsh plugin --profile web remove dsh-plugin-vscode-sidebar

Typical Usage¶

Installation from a Local Path¶

First prepare the repository directory, then install using the local path:

dsh plugin --profile web add <path>/dsh-plugin-vscode-sidebar

After installation, restart the Web interface:

dsh web

Installation from GitHub with Build Permissions Configuration¶

Use the installation command with a pinned commit:

dsh plugin --profile web add github:gameswu/dsh-plugin-vscode-sidebar#<sha>

If the first installation fails in a pnpm ≥10 environment, modify pnpm-workspace.yaml as prompted:

allowBuilds:
  dsh-plugin-vscode-sidebar: true
  node-pty: true
  protobufjs: true

Then retry the installation and restart the Web interface.

Development and Debugging¶

On the development side, use pnpm to install dependencies, build, and run tests:

pnpm install
pnpm build
pnpm test

Local path installation (pnpm link) directly uses the build artifacts from this repository. Changes on the host side require restarting dsh web:

dsh web

For changes on the client side only, a hard refresh in the browser after rebuilding is sufficient:

Ctrl+Shift+R

Use Cases and Notes¶

This is suitable for users who need to work with files, Markdown, Git, terminals, and subagent tasks simultaneously in DSH Web. If the workflow requires quickly browsing code, previewing documents, committing to Git, and viewing background task output, this plugin can consolidate these panels within DSH Web.

Before use, note the following:

The plugin runs with the permissions of the current DSH process and may access local capabilities such as files, Git repositories, and terminals; check the source code, license, and build scripts before installation.
When installing from GitHub, it is recommended to pin the commit to avoid unexpected versions entering the workspace.
In pnpm ≥10, explicit authorization for build scripts is required, and authorized builds will execute scripts on your local machine.
package.json declares node >=20.
DSH version compatibility: From v0.2.0, it is compatible with DSH Web ≥ 0.1.1-rc.2; earlier versions of DSH may still work, but editor/terminal lazy loading requires runtime provision of ctx.modules or the legacy global.

Conclusion¶

gameswu/dsh-plugin-vscode-sidebar integrates VSCode-style file, editing, Git, terminal, browser, and task management into DSH Web, with isolation per session. Confirm the source is trusted before installation, then restart dsh web after installation to start using.

GitHub Repository: https://github.com/gameswu/dsh-plugin-vscode-sidebar

gameswu/dsh-plugin-vscode-sidebar: Adding a VSCode-style Workbench to DSH Web