In the DSH Web environment, handling files usually requires switching windows or using a bloated sidebar. dsh-file-panel-left provides a centralized “File Workbench” experience, integrating the file explorer, code editor, and previewer in a single panel. It is a streamlined fork that retains core file-related capabilities (file tree, editor, preview, @ references) and removes unrelated features such as terminals, browsers, Git, and tabs.

Core Features

Layout and Interaction

The plugin uses a classic “tree on the left, content on the right” layout. The left side is the file tree, and the right side is the content area. It supports draggable panel width (240-480px, default 280px). The “Close” button in the content area collapses the content pane, restoring 65% of the viewport width to focus on the file tree. Layout state and width preferences are saved per session.

File Tree

The file tree supports lazy-loading directories (loading one level at a time to maintain responsiveness), symbolic link support (resolving real types and marking broken links), UNC network paths, and global filename search (300ms debounce). Users can create new files via the “+” in the tree header or folder rows (Enter to confirm, Esc to cancel), or right-click to copy relative/absolute paths, rename files, or delete files. The session root directory cannot be deleted.

Code Editor

The editor is built on CodeMirror 6 and supports syntax highlighting for 20+ languages (including JS/TS/JSON/Python/HTML/CSS/Markdown/Rust/Go, etc.). It provides Ctrl/Cmd+F search, bracket matching, code folding, auto-indentation, and column selection. It supports saving files with Ctrl/Cmd+S and includes an auto-save mechanism (checking for unsaved changes once per second). For JSON/JSONC files, it supports shortcut formatting with Ctrl/Cmd+Shift+F.

Viewer

Built-in viewers include 6 types: images, PDF, Markdown (with Mermaid preview), HTML (running in a sandboxed iframe, without accessing GUI data or local files), code, and binary files. Oversized files are truncated for display (first 512 KB). Markdown supports switching between preview and edit modes.

@ References

Selecting code in the editor and releasing the mouse triggers an “Add to conversation” popup, inserting a plain reference line (such as @relative/path L12-L25). It does not copy the selected text, keeping Token usage friendly. The plugin includes the file-line-reading skill, guiding the AI to read only the referenced line range. This feature coexists with the official DSH @ source without interfering with each other.

Integration

File links in chat are opened in the sidebar with priority. External plugins can register sidebar tabs and custom file viewers through the ctx.betterSidebar service.

Installation and Enabling

Before installation, ensure the environment meets the requirements: Node.js >= 20 and DSH Web (CLI) installed.

dsh plugin --profile web add dsh-file-panel-left

After installation, no additional configuration file is required. The DSH runtime automatically provides React 18, Cordis, and @deepseek-ai/dsh-* dependencies. After installation completes, restart DSH and hard refresh the browser (Ctrl+Shift+R / Cmd+Shift+R) to load the plugin.

Typical Usage

  1. File Operations: Click a file to open it, or use the “+” in the tree header/folder row to create a new file.
  2. Code Editing: In the editor, press Ctrl/Cmd+S to save, Ctrl/Cmd+F to search code, and Ctrl/Cmd+Shift+F to format JSON.
  3. Code References: Select a piece of code in the editor and release the mouse; the system automatically inserts an @path L12-L25 reference line.

Notes

  • Local Development: If using pnpm for local development, file: dependencies are copied rather than linked. After modifying source code, you need to delete ~/.dsh/profiles/web/node_modules/dsh-file-panel-left and re-run pnpm install; otherwise, the browser may load an old build.
  • Session Isolation: Each session has its own working directory and panel state.
  • Compatibility: In Windows title-bar compatibility mode, space is reserved; deployments without a settings service fall back to using ~/.dsh/dsh-file-panel-left-prefs.json to store preferences.

Summary

dsh-file-panel-left provides DSH Web with a lightweight, focused file working environment. By removing unnecessary features, it improves the efficiency of file operations and delivers a solid editing and referencing experience. For more details, see the GitHub repository.