Preface

The default DeepSeek Harness (DSH) web interface uses a three-column desktop layout. On mobile-width viewports (≤ 820px), the sidebar rail, the 188px settings navigation bar, and the hover-only tool row become cramped or inaccessible. The dsh-client-ui-mobile plugin reshapes the shell below the max-width: 820px breakpoint without touching upstream code. It is a pure client-side (browser) plugin containing a <style> block and a minimal React overlay.

Features

Drawer-style sidebar
Below 820px, the sidebar becomes a left-side drawer. There are two entry points:
1. On conversation pages, inject an “expand sidebar” button next to the official top bar’s “Session log” button.
2. On the home page (no conversation header), a FAB (floating action button) appears in the top-right corner.
They are mutually exclusive. Once the top-bar button appears, the FAB steps aside. It includes a backdrop over the conversation, supports closing with Esc, and automatically closes on session change.

Full-screen settings form
The settings dialog (an 188px navigation rail + content on desktop) becomes a full-screen form with a top title, horizontally scrollable tabs, an absolutely positioned close button, and safe-area insets.

Settings entry animation
Overlay fade-in + panel slide-up. Respects prefers-reduced-motion.

Details panel as bottom form
The tool-call details column (hidden by default on small screens) becomes a slide-up bottom form driven by the layout’s data-details-collapsed state.

Tool row “Inspect” button
Shown on hover on desktop; visible on small screens and enlarged to a 32px touch target.

Safe area and touch optimizations
env(safe-area-inset-*), 16px input font, touch-action: manipulation, denser input spacing.

Upgrade-resilient selectors
Target stable attributes ([role="dialog"][aria-modal="true"]:has(>nav), [data-shell-overlay]) and CSS module local name suffixes ([class*="_options"]) rather than hashed class names, so they survive DSH frontend rebuilds.

Installation and Enablement

This plugin is pure ESM with no build step and no install scripts.

dsh plugin --profile web add github:raomaiping-hash/dsh-client-ui-mobile
# 固定提交哈希以实现可重复性：
dsh plugin --profile web add github:raomaiping-hash/dsh-client-ui-mobile#<sha>

Restart the DSH Web process, then open the GUI in a mobile-width viewport (or a browser window ≤ 820px).

Typical usage

  1. Open the GUI at mobile width.
  2. Open the drawer using the top-bar button or FAB.
  3. Use the settings form to access settings.
  4. The Inspect button appears on touch targets.

Compatibility and notes

  • Target version: DSH 0.1.5-rc.2 (declared as dshTarget in package.json).
  • Execution environment: This plugin is a UI-only plugin. It does not handle host routing, file access, networking, or settings persistence. It reads ctx.layout (sidebar/details toggles) and ctx.slots; it writes only DOM nodes and <style> tags, and all content is removed on stop/update.
  • Security: Restricted execution environments are not security boundaries. Only install plugins from trusted sources. Pin commit hashes for reproducibility.

Ecosystem context

The DeepSeek Harness philosophy is “everything is a plugin”. The community directory is an independent site with no official affiliation with DeepSeek / High-Flyer.

GitHub repository | SkillHub directory