Introduction

DeepSeek Harness (DSH) Web Client adopts a plugin-based architecture, extending the system’s capability boundaries. When performing local code development or file browsing, the native Web interface often lacks deep integration with the file system. The dsh-sidebar plugin injects an independent sidebar component, integrating local file management, Git tracking, and web preview into the DSH interface, filling the gap in local file operation experience in the native Web interface.

What Is It

dsh-sidebar is a DSH Web Client plugin maintained by user kaijia323 and licensed under the MIT License. It does not depend on DSH’s native details slot. Instead, it is mounted on document.body as a sibling node of #root, using CSS layout to push the native interface to the right, thereby achieving a “true occupying” sidebar effect.

Core Features

This plugin mainly provides the following capabilities:

  • Virtualized File Tree: Supports lazy loading of the current session workspace directory, using virtual scrolling to handle large directories and avoid rendering performance issues.
  • Multi-format Preview: Supports text/code (with line numbers and basic syntax highlighting), Markdown rendered/source code switching, and previewing common images (png/jpg/jpeg/gif/webp/bmp/ico/avif).
  • VSCode-style Activity Bar: Provides a permanent Activity Bar on the far right of the sidebar, containing entries for switching between “File Explorer”, “Git Tracking”, and “Browser” views.
  • Multi-file Tabs: Supports opening multiple files in the preview area, with horizontal scrolling and close functionality.
  • Git Tracking View: Provides Git features such as branches, changes, and history, supporting Pull/Push operations and automatic status refresh.
  • Browser View: Integrates an iframe-based browser, supporting address bar navigation, search, Edge-style tab management, and directly opening local HTML files.
  • File Watching: Uses chokidar to watch for file changes and automatically refresh the file tree and preview content.

Installation and Enablement

Before installation, ensure that the DSH version is 0.1.2-alpha.2 or later.

Installation command:

dsh plugin --profile web add @kaijia/dsh-sidebar

After installation is complete, restart dsh web to enable the plugin. By default, the sidebar generates a file tree based on the current session workspace (cwd).

Typical Usage

  • Preview a File: Click a file in the file tree; its content will be displayed in the preview area at the bottom of the sidebar.
  • Switch Views: Click the Activity Bar icons on the right side of the sidebar (Files, Git, Browser) to switch between different functional views.
  • Adjust Sidebar: Drag the left edge of the sidebar to adjust its width (minimum 280px).
  • Collapse/Expand: Click the current view icon to collapse the sidebar; click it again or switch views to expand it.
  • Open Local HTML: Select a .html file in the file tree; it will automatically switch to the Browser view and open in a new tab.

Notes

  • Workspace Requirement: The current session must have a workspace directory (cwd); otherwise, the sidebar content cannot be displayed properly.
  • Encoding and Format: Non-UTF-8 text content will fall back to a binary prompt; image preview has format and size limitations.
  • Git Dependency: The Git Tracking View requires the Git command-line tool to be installed locally, and the current working directory must be inside a Git repository.
  • Compatibility: The plugin depends on DSH 0.1.2-alpha.2 or later. After upgrading DSH, pay attention to layout compatibility.