dsh-classic-coding: Opening the Monaco Editor and File Tree in the DSH Web UI

Preface

When doing conversational development in DSH, tool outputs, code generation, and local workspace files often get mixed together. If you just want to view a file, make a small code change, and save it, switching to an external editor interrupts the current session flow. dsh-classic-coding solves this problem: it provides an overlay panel in the DSH Web UI, opening a file tree and Monaco editor in a side panel, allowing you to view and save files without leaving the current DSH interface.

What This Is

dsh-classic-coding is a dsh client plugin maintained by better-er, licensed under MIT. Its purpose is specific: it provides a Monaco editor plus file tree overlay panel in the DSH Web UI for quickly viewing workspace files, opening multiple file tabs, saving changes, and connecting file entries from the message stream to this panel.

It declares dsh.client and exports ./client, while also declaring dsh.bundle. After installation, it is automatically recognized as a profile layer and mounted, requiring no manual composition entry.

Core Features

This plugin primarily does three things: provide a sidebar entry point, provide a file tree, and provide editor read/write with save feedback.

  • There’s a “Classic Coding” button at the bottom of the sidebar that expands or collapses the editor panel when clicked.
  • The file tree on the left supports lazy-loading directories, collapsing or expanding directories, and filters out .git, node_modules, and similar directories.
  • The Monaco editor is dynamically loaded via CDN, supporting multiple file tabs, syntax highlighting, and Ctrl+S to save the current file.
  • The status bar at the bottom displays the current file path and save results.
  • The panel can be closed by clicking the overlay, pressing Esc, or clicking the close button, and it automatically adapts to DSH’s light/dark themes.
  • When the sidebar is collapsed into a narrow rail, the button switches to a single icon button; when the sidebar is expanded, it restores the full two-line structure.
  • Tool line paths in the message stream and file buttons in the artifact area get a “Classic Coding” suffix after them. Clicking the suffix opens the corresponding file within the plugin; clicking the button itself preserves the original external open behavior.

Installation and Activation

First, run the install command to have DSH pull the plugin from GitHub:

dsh plugin --profile web add github:better-er/dsh-classic-coding

It mounts automatically after installation, requiring no manual editing of composition files. It becomes active after restarting DSH web.

To remove it, run the uninstall command:

dsh plugin --profile web remove dsh-classic-coding

After uninstalling, restart DSH web, and the plugin will no longer load.

Typical Usage

Here is a common view-and-save workflow.

  1. Click the “Classic Coding” button at the bottom of the sidebar to expand the editor panel.
  2. Locate the target file in the file tree on the left; directories lazy-load and can be collapsed or expanded.
  3. Open the file in the Monaco editor to view syntax highlighting or multiple file tabs.
  4. After making changes, press Ctrl+S to save the current file.
  5. Check the current file path and save results in the status bar at the bottom.
  6. When done, click the overlay, press Esc, or click the close button to collapse the panel.

If a file comes from a tool line path in the message stream or a file button in the artifact area, you can prioritize clicking the “Classic Coding” suffix to open it directly within the plugin; if you still prefer external opening, click the button itself.

Suitable Scenarios and Notes

Suitable scenarios are: you’ve already received tool outputs or code files in a DSH Web conversation and just want to quickly view, make small modifications, and save without leaving the current interface.

Points to note:

  • The plugin’s Host side registers four endpoints—describe, listDir, readFile, and writeFile—via ctx.connection.rpc.handle('/classic-coding', ...). The file tree and editor read/write operations use DSH’s built-in ctx.fs file system service underneath.
  • The shared /api channel’s sole interceptor slot is already occupied by the official gateway, so plugin endpoints use the handle independent channel.
  • The UI mount points are two slots: the sidebar.footer.action trigger button and the shell.overlay editor panel.
  • Styles use DSH theme CSS variables --dsw-alias-* for light/dark theme adaptation.
  • Monaco Editor is dynamically loaded via CDN, introducing no extra npm dependencies.
  • This plugin runs with the current dsh process permissions. Before installation, check the source code and MIT license to confirm its file read/write paths and service endpoints meet expectations.
  • If you modify the plugin, lib/index.js and lib/client.js are both source-as-artifact—changes take effect immediately. Additionally, the factory in lib/client.js must end with return module.exports; otherwise, the module exports undefined, and DSH will fail-loud on startup.

Conclusion

The value of dsh-classic-coding lies in compressing the three steps of “view file, edit file, save file” into the DSH Web UI, avoiding frequent switches to external editors. It’s not a general IDE replacement, but a lightweight file editing panel focused on DSH session scenarios.

The catalog page is a plugin directory, not an official app store; it has no official affiliation with DeepSeek / 幻方.

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye