Introduction

The native file browsing in the DeepSeek Harness (DSH) Web Client usually relies on the details panel. This approach has limitations in blank sessions or when an independent layout is required. The dsh-ymc-sidebar plugin is mounted on document.body and provides an independent right-side file tree sidebar for the Web Client. It does not occupy DSH’s native details slot, so it works even in blank sessions without context, delivering a VSCode-like layout experience.

Core Features

The plugin mainly includes three core views and a file tree system.

Views and Layout

  • Activity Bar Icon Panel: The far right side of the sidebar provides a persistent VSCode-style Activity Bar, containing three views: “File Explorer”, “Git Tracking”, and “Browser”. Clicking the current view icon collapses/expands the sidebar.
  • Drag to Resize Width: The left edge of the sidebar supports dragging to adjust the width. The minimum width is 280px, and the state is persisted.
  • Layout Push: The plugin uses the --dsh-sidebar-width property to make the native #root element yield space on the right, creating a true placeholder effect rather than overlaying.

File Explorer

  • Virtualized Lazy Loading: The file tree is rooted at the current session’s working directory (cwd). Both directories and the tree structure use virtualized lazy loading to prevent performance issues caused by large directories.
  • File Preview: After clicking a file, its content is previewed in the lower part of the right panel. It supports text/code (with line numbers and syntax highlighting), Markdown rendering/source view toggle, and preview of common image formats. Binary files are displayed with a binary notice.
  • Multiple Tabs: Multiple files can be opened simultaneously, with horizontal scrolling and close functionality.

Git Tracking View

  • Feature Subpages: Provides three subpages: “Changes”, “History”, and “Branches”.
    • Changes: View the current branch, staging area, unstaged changes in the working tree, and untracked files, with diff preview supporting line-level highlighting.
    • History: View commit records, commit messages, and single-commit diffs.
    • Branches: Manage local/remote branch lists, supporting branch switching or checking out remote branches.
  • Actions and Refresh: The panel header provides Pull and Push actions (with confirmation dialogs). All state, diffs, history, and branches are automatically refreshed when file changes and Git metadata change.

Browser View

  • Loopback Routing: Supports selecting .html / .htm files in the file tree, automatically switching to the Browser view and opening them. The plugin provides its own Loopback HTTP routing, allowing relative resources referenced by local HTML files (CSS / JS / images, etc.) to load correctly.
  • Web Browsing: Provides a custom search homepage (Bing search by default) and an address bar. It supports multi-tab browsing, with each tab retaining its own navigation history.
  • HTML Shortcut Menu: The Browser panel header provides a shortcut menu for current workspace HTML files, allowing quick jumping to open local files.

Installation and Enablement

Environment Requirements

  • DeepSeek Harness (DSH): 0.1.2-alpha.2 or later.
  • Node.js: 20+
  • pnpm: 10+
  • Git: local git command (for Git tracking functionality).

Installation Commands

The plugin has been published to npm and can be installed directly via the DSH plugin command:

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

After installation, restart dsh web to see the sidebar on the right. To verify that the configuration has taken effect, run:

dsh --profile web --dump-config

The output should include the # == @kaijia/dsh-sidebar layer.

Configuration

After installation, you can adjust plugin behavior via the insert configuration in the cordis.yml configuration file. The default configuration is as follows:

- insert:
    - id: dsh-sidebar
      name: '@kaijia/dsh-sidebar'
      config:
        maxTextBytes: 2097152
        maxImageBytes: 8388608
        maxEntriesPerDirectory: 2000
        maxTreeRows: 100000
        watchEnabled: true
        watchDebounceMs: 200
        watchIgnored:
          - '**/node_modules/**'
          - '**/.git/**'
Configuration Item Default Value Description
maxTextBytes 2097152 Upper limit for a single text preview (UTF-8 bytes).
maxImageBytes 8388608 Upper limit for a single image preview (bytes).
maxEntriesPerDirectory 2000 Maximum number of entries returned for a single directory; truncated when exceeded.
maxTreeRows 100000 Maximum number of tree rows that can be flattened after expansion on the client side.
watchEnabled true Whether to enable file watching for real-time refresh (depends on chokidar).
watchDebounceMs 200 Waiting time before triggering notifications (milliseconds).
watchIgnored ['**/node_modules/**', '**/.git/**'] List of glob paths ignored by file watching.

Usage Examples

  1. Adjust Sidebar: While the sidebar is expanded, drag the left edge to adjust its width; click the Activity Bar icon on the far right to collapse the sidebar.
  2. Browse Files: Select a file in the file tree to view its preview; enter a URL in the “Browser” view or use the search box.
  3. Local HTML: Click a .html file in the file tree. The sidebar automatically switches to the “Browser” view and opens the file.
  4. Git Operations: In the “Git Tracking” view header, click Pull or Push, or switch branches on the “Branches” page.

Dependencies and Considerations

  • Blank Sessions: The plugin does not rely on DSH’s native details slot, so it can be opened in blank sessions without context.
  • Workspace Dependency: The file tree content depends on the current session’s working directory (cwd). If the current session has no cwd, the right panel displays a notice.
  • Git Dependency: Git tracking depends on the git command installed locally, and the current working directory must be a Git repository.
  • Image Support: Only png / jpg / jpeg / gif / webp / bmp / ico / avif formats are supported.

Development and Maintenance

The plugin uses a Host/Browser separated architecture. The source code is located in src/index.ts (Host entry, responsible for RPC, file system, and Git) and src/client.tsx (Browser entry, responsible for React components and styles).

  • Local Development: After cloning the repository, run pnpm install and pnpm build, then install with dsh plugin --profile web add ..
  • Styling: Uses Tailwind CSS and directly consumes DSH’s theme alias tokens (--dsw-alias-*), supporting light and dark theme switching.

Ending

dsh-ymc-sidebar provides a complete solution for file management, code preview, and Git tracking for the DSH Web Client, without intruding into the native interface. It is suitable for users who want a VSCode-like development experience on the web.