Introduction

The Web UI of DeepSeek Harness (DSH) works well on desktop, but on mobile it often requires zooming or suffers from layout issues. dsh-mobile-nav is a mobile-optimized plugin implemented with pure hand-written JS and CSS, requiring no build step and not interfering with desktop usage.

What This Is

This is an ultra-lightweight mobile UI plugin for the DeepSeek Harness Web UI. It does not modify the DSH source code; all styles and behavior are contained in a single file, lib/client.js.

Core Features

  1. Drawer Sidebar: On mobile, the sidebar collapses into a drawer. Tap the session title or the “Explore Uncharted Territory” text on the new session page to slide out the session list, while chat remains full-width.
  2. Simplified Header: Hides elements such as standard preset tags, the Session log download button, the plus button on the input box, and the permission selector arrow.
  3. Statistics Panel: Tap the ⓘ icon to the right of the input box to view a statistics panel similar to the context card (turns, steps, LLM duration, TTFT, output speed, Tokens, and cache hit rate progress bar).
  4. Link Preview: http(s) links in messages automatically get a “Preview” button. A “Preview” tab is added to the top tab bar, opening web pages in an iframe within the chat window; switching away and back can preserve state.
  5. Simplified Action Row: The action row below messages retains only copy and branch functions, and the time row text is compacted (e.g., “Elapsed 8s” becomes “8s”).
  6. Zero Desktop Impact: All changes only apply to viewports ≤640px; desktop remains unaffected.

Installation and Activation

git clone https://github.com/xDer666/dsh-mobile-nav.git
dsh plugin --profile web add link:<克隆到的绝对路径>

Restart dsh web, then access it on a phone or a narrow window (≤640px).

Typical Usage and Customization

All styles and behavior are kept in lib/client.js (a single file, with no build step):
- Adjust drawer width / model name max-width (96px) / panel width (264px), etc., by searching for and modifying the corresponding .dshmn-* CSS classes.
- Show/hide more elements: Add matches in hideButtons / hideExtraActions using official CSS Modules semantic class names (e.g., _label, _sessionLogButton).

After modifying lib/client.js, refreshing the browser is enough to make it take effect; no service restart is required.

Use Cases and Notes

It is suitable for developers who need to debug or demo DSH on mobile. Note that the plugin relies on semantic suffixes from official CSS Modules (e.g., _label, _sessionLogButton, _crumb). Hashed prefixes may change across builds, so if DSH significantly refactors its layout, the matching rules must be updated accordingly. All changes only apply to viewports ≤640px.

Short Closing

This plugin improves mobile usability with minimal code, requires no build process, and takes effect directly after modifying the code. Project links are below.

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