Introduction¶

The Web GUI of DSH is designed based on a desktop layout: the left sidebar is persistent, and the main area occupies the remaining width. When opened on a mobile phone, the sidebar gets squeezed into a very narrow column, and the content area becomes narrow as well. Tapping the input box might even trigger iOS’s focus zoom. Direct zooming or using the mobile browser’s desktop mode doesn’t work well.

The dsh-mobile introduced below is a plugin designed specifically for this scenario. It does only one thing: rearrange the Web GUI on narrow screens and completely stay out of the way on desktop widths.

What is it¶

Maintained by cyilin36, dsh-mobile is a client-side plugin positioned as “Phone-responsive layout for the DeepSeek Harness (DSH) Web GUI”. It solves three specific problems:

1. On narrow screens, the sidebar takes up too much width, making it impossible to read and input in the main content area normally;
2. The notch screen and gesture bar cover the page’s edge content;
3. Browser default behaviors such as double-tap zoom delay and input box focus zoom on touch screens interfere with operations.

The plugin is provided as a bundle under DSH’s “Everything is a plugin” philosophy and is loaded on-demand into the profile’s package.json dependencies.

Core Features¶

Sidebar becomes a drawer. When viewport width ≤ 1023px, the sidebar leaves the grid to become a slidable drawer, and the main content fills the entire screen. The ☰ in the top-left corner of the session page opens the drawer; it automatically closes when clicking the overlay, pressing Esc, or clicking a session row. Pages without a session header (plugin pages, etc.) use the floating button in the top-left to open.

Safe area padding. The plugin adds viewport-fit=cover and uses env(safe-area-inset-*) so that the notch screen status bar and bottom gesture bar no longer press down on the content.

Touch screen optimization. Removes double-tap zoom delay, hides the desktop drag-to-resize handle, and sets the input box to 16px to prevent the page from automatically zooming in when focused on iOS.

Settings page becomes single column. Adds a row of scrollable category tabs to the top “Settings” title, with options displayed in full width. Third-party settings pages (e.g., settings for the plugin market) also retain these tabs, so there won’t be a situation where there is no way back after clicking in.

Desktop laziness. At ≥ 1024px width, the plugin does not inject layout styles or run DOM observers, keeping only an unused stylesheet and slot entry. Developers modifying or debugging the GUI on desktop browsers will not be affected by the plugin.

Installation and Enabling¶

There are two equivalent ways to install. The first is to install the GitHub package in DSH’s plugin manager:

install_bundle target: github:cyilin36/dsh-mobile

The second is to add the dependency github:cyilin36/dsh-mobile in “Settings → Plugins” in DSH Web. After installation, “Mobile Responsive Layout” will appear in the plugin list.

The profile’s package.json dependencies and bundle list are maintained by the DSH plugin manager; do not hand-write the command above into the configuration.

Typical Usage¶

The plugin does not require any configuration items. It takes effect as soon as the GUI is opened on a mobile phone or narrow window.

If you temporarily need the desktop layout, add ?dsh-mobile=off to the page URL to restore it. This is suitable for comparing the two layouts while troubleshooting GUI issues on a mobile phone. When no longer needed, disable or uninstall dsh-mobile in the plugin list.

Applicable Scenarios and Notes¶

Suitable for developers and operations personnel who use DSH Web GUI on mobile phones and need to check sessions or adjust settings anytime; also suitable for frontend developers debugging responsive behavior with narrow windows.

There are a few points to note:

• The plugin only takes effect at ≤ 1023px and will not change the layout at desktop widths.
• Do not enable other plugins that take over narrow-screen layouts at the same time, for example, dsh-pocket’s mobile adaptation, as the two will override each other’s styles.
• The plugin relies on the host DOM structure (AppFrame, data-sidebar-collapsed, data-* session hooks). If these hooks change after a major DSH version upgrade, the plugin needs to be updated; if decoration rules fail to match due to class name suffix fallbacks, only one decoration will be missing, and the layout will not be broken.
• The behavior of the iOS Safari address bar collapsing/expanding and the software keyboard covering the screen belongs to the browser itself; the plugin only guarantees that the safe area and viewport width are correct.
• The plugin runs with the permissions of the current DSH process. Before installing, you should check the source code (repository is public) and the license (MIT) to ensure that the dependencies and behavior meet your deployment requirements.

Summary¶

dsh-mobile has a narrow scope: it rearranges the DSH Web GUI into a drawer layout on narrow screens, adds safe areas and touch details, and is completely lazy on desktop widths. No configuration items, just install and use.

• Directory page: https://www.skillhub.cn/plugins/cyilin36/dsh-mobile
• GitHub: https://github.com/cyilin36/dsh-mobile