@ericleoo/dsh-mobile

Mobile-first overlay for the DeepSeek Harness web UI (dsh web).

The built-in web surface is a three-column desktop shell: a sidebar rail, a conversation center column, and a details track. On a phone the rail and the empty details track still consume width, squeezing the chat into a narrow slit. This plugin turns the same composition into a mobile surface without forking any of the built-in UI.

What it does

At viewports < 1024px (matching the layout plugin's own "narrow" breakpoint):

• Full-bleed chat — the sidebar rail and details track collapse to 0, so the conversation gets the whole viewport.
• Sidebar as a drawer — the rail is hidden; a hamburger in the conversation header (and a floating button on the blank/hero screen) opens the sidebar as an overlay drawer with a backdrop. Esc, the backdrop, the sidebar's own fold toggle, and switching sessions all close it.
• Details panel as a sheet — opening a tool's details covers the chat as a full-screen sheet instead of rendering off-screen.
• Settings as a full-screen sheet — the built-in settings modal is an 800px two-column dialog (188px nav rail + content column), which leaves the content column at ~150px on a phone. At the narrow breakpoint the shell is restacked into a full-bleed sheet: the nav rail becomes a horizontal section strip (title + per-section icons dropped) and the content column takes the full width. The sheet's own overlay already covers the open drawer, so no drawer coordination is needed.
• Directory picker as a full-screen sheet — "Select Workspace Directory" is a min(680px, 100%) dialog with a two-pane Miller column (each pane min-width 256px), so on a phone the panes overflow and the footer wraps to two rows. At the narrow breakpoint the dialog goes full-bleed, the panes become full-width scroll-snap pages (the picker already auto-scrolls to the newly opened child pane; swipe back to the parent), and the footer becomes a single non-wrapping row that scrolls horizontally when tight. The create-folder subdialog stays a centered card.
• Touch polish — safe-area insets for notched phones, overscroll containment, touch-action: manipulation (no double-tap zoom delay), no tap-highlight flash, and a bottom-safe-area composer.

Desktop (≥ 1024px) is untouched: the plugin contributes nothing there.

How it works

A bundle plugin — the same pattern as @deepseek-ai/dsh-escalation-tolerance:

• cordis.patch.yml inserts one loader entry (dsh-mobile) into the web composition after @deepseek-ai/dsh-web-app.
• package.json declares dsh.client (platform: "web"), so @deepseek-ai/dsh-client-modules serves lib/client.js as a browser bundle and the web shell boots it as a client-side cordis entry.
• lib/client.js injects a stylesheet (CSS overrides keyed off the frame's data-shell-overlay marker, so it survives the hashed class names) and registers three slot contributions:
  • conversation.session.header.actions — the hamburger,
  • shell.overlay — the drawer/details backdrop + the hero floating menu,
  • plus a document-level Esc handler and a session-switch listener.
• Drawer state is read from the same layout store instance the AppFrame writes (ctx.slots.hostFace().storeOf(rootEntry, "root")), so the drawer always mirrors the shell's own narrowExpanded / details state; opening and closing goes through ctx.layout.toggleSidebar() / ctx.layout.closeDetails().

Installing

The plugin lives at $DSH_HOME/plugins/dsh-mobile and is wired into the web profile:

# from the web profile directory
cd "$DSH_HOME/profiles/web"
pnpm install    # links @ericleoo/dsh-mobile (already in package.json)

If you prefer a separate surface, add "@ericleoo/dsh-mobile" to the dsh.profile.bundles list of any other profile (for example a new mobile profile) — the bundle's patch layer applies the same way.

Notes

• Everything is viewport-scoped (@media (max-width: 1023px)); desktop behavior is untouched.
• The CSS overrides are keyed to the frame's [data-shell-overlay] child (an attribute the built-in layout plugin renders) so they survive the hashed CSS module class names of the built-in UI. If the layout plugin changes that marker, the selectors need a refresh.
• Client bundle changes require a page reload (the graph re-hash is picked up on the next boot; pnpm run dev:web in the dsh checkout provides HMR for the in-box client packages).