The DeepSeek Harness Web UI often requires specific adaptation under narrow viewports. This plugin provides a standard set of narrow-viewport behaviors, including a drawer sidebar, gesture control, and custom browser tab titles. It replaces the practice of manually patching the compiled dsh-client-ui-layout bundle, which had to be reapplied after every dependency update and could silently break when upstream builds changed hashed class names.

Core Features

  • Drawer sidebar: When the viewport width is below the threshold, the grid layout collapses into a single column, and the sidebar floats above the conversation instead of squeezing the content. The background has a mask layer, and a hamburger menu button is placed in the top-left corner.
  • Direction-aware swipe gestures: Swipe right to open the sidebar and swipe left to close it. This behavior replaces the old patch behavior, where swiping in either direction could toggle it.
  • Browser tab title customization: The tab title is displayed as DSH · <hostname>, making it easier to distinguish different deployments in the tab bar. It listens to the <title> element via a MutationObserver to stay consistent with the Shell’s own session title projection.
  • Group and leaf node interaction: Clicking an expandable group keeps the drawer open; clicking a leaf node closes the drawer, similar to normal navigation.

Installation

This plugin is not yet published on npm. Install it directly from GitHub.

dsh plugin --profile web add github:ghbhiee/dsh-plugin-mobile-shell

Configuration

Specify the narrow-viewport threshold and title template in the plugin configuration.

- id: mobile-shell
  config:
    narrowMaxWidth: 1440        # 当帧宽等于或低于此值时，抽屉接管布局
    documentTitle: 'WB · {host}' # 留空则保留 Shell 自身的会话标题

The client entry cannot directly read the row configuration, so the browser side requests these settings through a small Host route. If they cannot be retrieved, default values are used (1023px / DSH · {host}).

Behavior Notes

  • Global gesture monitoring: Swipe gestures are monitored across the entire document, so horizontal dragging within scrollable areas may still move the drawer.
  • Removed adjustment: The “reclaim vertical padding” adjustment has been removed, because the old patch relied on compiled CSS-Module class names. These class names have multiple variants in the current build and may become invalid in the next upstream release. The center column now receives top padding to prevent the hamburger menu from covering content.

This plugin simplifies the mobile experience of the DeepSeek Harness Web UI by standardizing behavior and eliminating reliance on fragile manual patches.

GitHub repository: ghbhiee/dsh-plugin-mobile-shell
Plugin catalog: SkillHub