Preface¶

The plugin-based architecture of DeepSeek Harness (DSH) allows behavior to be customized for specific scenarios. When using the DSH Web interface on mobile devices or narrow-screen browsers, the default sidebar occupies valuable display space, and auto-focus when switching sessions triggers the soft keyboard, pushing the page up and obscuring the conversation content. better-er/dsh-mobile-drawer adjusts for this scenario by collapsing the sidebar into a floating block on narrow screens and suppressing auto-focus behavior.

Plugin Introduction¶

This is a client-side plugin maintained by betterer under the MIT license. Its core value is to restructure the sidebar of the DSH Web interface into an overlay drawer on narrow screens, improving the mobile browsing experience through auto-collapse and focus suppression.

Core Features¶

The plugin takes effect only when the viewport width is less than 1024 pixels and does not intervene at all on wide screens.

1. Floating Block and Overlay Drawer

   • Collapsed state: The sidebar is compressed to zero width, the central area occupies the full width, and a 44-pixel floating block appears in the top-left corner.
   • Expanded state: Clicking the block expands the sidebar, which becomes a 280-pixel-wide overlay drawer covering the conversation, with a mask layer on the right.

2. Auto-Collapse and Focus Suppression

   • Auto-collapse: When clicking any session row in the drawer, the sidebar automatically collapses, returning the screen to the conversation. Clicking the more button inside a row does not trigger this behavior.
   • Focus suppression: The plugin suppresses the auto-focus behavior immediately following a session click for about 1.5 seconds, preventing the soft keyboard from popping up and pushing the page up. If the user actively clicks the input box, the suppression is lifted immediately.

3. Mobile Key Enhancement
   A row of keys not present on phone keyboards is provided in the top-right corner of the input box, currently including Shift, Ctrl, and Tab.

   • Tab: Triggers menu completion when / or @ is entered; otherwise inserts a tab character at the cursor.
   • Shift / Ctrl: Sticky modifier keys. Click once to lock and again to unlock. While locked, pressing Enter performs a line break for Shift and sends the message for Ctrl.

Installation¶

Use the official installation command to add the plugin:

dsh plugin --profile web add github:better-er/dsh-mobile-drawer

It can also be installed from npm (includes build artifacts, no on-the-fly build required):

dsh plugin --profile web add dsh-mobile-drawer

Restart DSH Web after installation for the changes to take effect. No manual file editing is required.

Typical Usage¶

1. Open DSH Web in Edge or a mobile browser.
2. Shrink the window width below 1024 pixels (or access it on a phone); a floating block will appear in the top-left corner.
3. Click the block to expand the drawer, click any session, and the sidebar will automatically collapse.
4. You can see the new Shift, Ctrl, and Tab keys in the top-right corner of the input box.

Notes¶

• Effective condition: All behavior only applies to devices with a viewport width less than 1024 pixels.
• No native modifications: The plugin is a pure browser-side plugin and does not modify any native UI or built-in styles.
• Icon dependency: The floating block icon directly clones the whale icon from the built-in collapse bar. If the built-in icon cannot be retrieved, the block will not be displayed, and the collapsed-state layout side effects are also skipped.

Summary¶

By using DOM side effects rather than modifying native styles, this plugin solves the issues of the sidebar obscuring content and the soft keyboard pushing the page up on narrow screens. For users who need to frequently view conversation content on mobile devices, this is a practical tool.

• GitHub Repository
• Plugin Directory Page