In practice with DSH Web, mobile adaptation often requires extensive manual tuning for specific components (sidebar, input box, and header). Existing layouts can cause awkward interactions or visual misalignment on narrow screens. For this scenario, the dsh-mobile-glass plugin provides a mobile-specific interaction solution that optimizes the mobile operation feel through code-level overrides, without affecting the desktop experience.

What This Is

The plugin is a Web mobile adaptation plugin for DeepSeek Harness (DSH), maintained by YiRan0. It is designed specifically for screen sizes ≤1023px. By overriding specific DOM structures and CSS styles, it implements a reveal drawer interaction with the chat pane above and the sidebar below, while also fixing mobile-specific input box and header layout issues. Its design principle is zero impact on desktop (≥1024px).

Core Features

Removes the bottom navigation and replaces it with a floating glass hamburger menu at the top to open the sidebar. The sidebar remains as a static underlying layer (not animated), while the chat column moves right using translateX to create the reveal effect.

Drag Gestures

Uses setPointerCapture with rAF throttling, direction locking, and velocity/displacement snapping. When dragging overlaps a horizontally scrollable element (such as a wide table or code block), it automatically defers to native horizontal scrolling to preserve text readability.

Adaptive Input Box

The rounded corners of the right-side bubble and input box adapt automatically. When unfocused, the input is centered and compact; when focused, it expands to full width and lifts to about 2.5 lines in height; when blurred, it smoothly collapses back. It automatically grows when content increases. The send button and model selector remain on the same line, with transition animations lasting 0.32s.

Settings Panel and Header Cleanup

The settings panel is presented as a bottom card that slides up over the content. The header area is cleaned up by hiding the session log and tabs, aligning the title, and removing the sidebar’s built-in toggle and the better-sidebar button, freeing up top space on mobile.

PWA Support

The plugin includes a Service Worker and an enhanced Manifest. The host-side webServer serves the SW file and Manifest through precise routing, without modifying DSH vendor files, so upgrades do not cause conflicts.

Installation and Activation

Run the following command in your DSH project directory to install:

dsh plugin --profile web add github:YiRan0/dsh-mobile-glass

After installation, restart the dsh web process for the changes to take effect.

Typical Usage

After installation, the plugin automatically adapts to mobile devices without additional configuration. Open the app in a mobile browser to experience the optimized drawer interaction, gesture-based scrolling, and adaptive input box layout.

Use Cases and Notes

This plugin is suitable for developers or users who want a native-like mobile experience in DSH Web.

Notes:
1. Dragging on physical devices can occasionally jitter, likely caused by real-time blurring via backdrop-filter on the sidebar; this is not fully resolved yet.
2. After uninstalling the plugin, any registered Service Worker remains in the browser and must be manually unregistered once: DevTools → Application → Service Workers → Unregister (or clear site data).
3. The plugin runs with the permissions of the current DSH process. Reviewing the source code and license before use is recommended.

Summary

dsh-mobile-glass uses fine-grained DOM manipulation and CSS transforms to solve layout pain points in DSH Web on mobile, unifying the reveal drawer, adaptive input box, and gesture interaction. As a mobile adaptation solution with zero desktop impact, it reduces the cost of manually writing mobile CSS.