dsh-plugin-better-mobile-ui

A dsh web client plugin that makes the GUI usable on phones/tablets
(viewport ≤ 768px by default). It only activates in the mobile media query —
desktop is byte-for-byte untouched.

Install

From GitHub

One block — installs the plugin and registers the loader row:

dsh plugin --profile web add github:davidgereb/dsh-plugin-better-mobile-ui
PATCH="${DSH_HOME:-$HOME/.dsh}/profiles/web/cordis.patch.yml"
grep -q "name: dsh-plugin-better-mobile-ui" "$PATCH" 2>/dev/null || cat >> "$PATCH" <<'EOF'

- insert:
    - id: ui-better-mobile
      name: dsh-plugin-better-mobile-ui
EOF

From a local checkout

# 1. build
node scripts/build-client.js
# 2. make the package resolvable by the profile
dsh plugin --profile web link /path/to/dsh-plugin-better-mobile-ui
# 3. register the loader row in cordis.patch.yml (see above)

What it fixes

1. Sidebar → swipe drawer — the sidebar grid track is forced to 0 on
   mobile, so the collapsed 56px rail no longer eats screen space. The sidebar
   becomes an off-canvas drawer:
   • swipe right anywhere on the conversation (mid-screen works — Android
     owns the screen edges) to slide it in;
   • swipe left anywhere to go back (see the navigation stack below);
   • the ☰ button in the top bar toggles it;
   • the app's own layout store is kept in the "expanded" state on mobile, so
     the drawer always shows the full sidebar (sessions, workspaces), never
     the icon rail.
2. Settings as drawer screens (Android-settings style navigation stack).
   The app's settings modal renders inside the sidebar column, so on mobile it
   becomes two screens:
   • tapping Settings in the drawer shows the section list (General,
     Models, Plugins, …) filling the drawer, with a ← back arrow;
   • selecting a section expands the drawer to the full viewport as the
     settings page;
   • the X dismisses back to the settings list; the left-swipe backs
     are fully drag-follow like the sidebar — the drawer follows the
     finger and snaps on release: settings page → settings list → sidebar →
     hidden.
3. Session header dropdown — the header (session title + Chat/Trajectory
   mode tabs) is hidden on mobile and becomes a dropdown menu under the
   ⋯ button in the top bar (tabs stack vertically). Picking a tab or
   crumb dismisses it; action/utility buttons inside it (e.g. the
   cost-lens cheapass toggle) stay usable with the menu open. Tapping
   outside or pressing Escape dismisses it too.
4. Top action bar — a 48px fixed bar shows the session title next to
   a ☰ sidebar button, with the ⋯ menu button on the right. The background
   is fully opaque; a gradient fades its bottom edge into the content. It
   stays pinned while the mobile keyboard is open: html/body are locked
   against document scrolling, the bar re-anchors to
   visualViewport.offsetTop, and the app frame tracks
   visualViewport.height (via --bmu-vh) so the composer always rides
   above the keyboard. The override is cleared when the keyboard closes
   (falling back to 100dvh), and a slow re-sync interval plus
   window/orientation listeners keep the frame from getting stuck raised if a
   keyboard show/hide event is missed.
5. Composer toolbar — the model selector used to get crushed to zero width
   while its label overlapped the "+" commands button. The toolbar now wraps,
   the trailing group shrinks instead of overflowing, the token-context meter
   is dropped on mobile, and the model name ellipsizes instead of colliding
   with icons. Plain Enter inserts a newline (mobile only); submission
   happens via the blue send button (modifier chords like Ctrl/Cmd+Enter keep
   the app's accelerated behavior). While the agent runs, the primary
   button becomes Stop, so an extra send button appears next to it —
   tapping it queues the message via the app's own steering path without
   stopping the run.
6. Sidebar navigation — opening a session (or New Session) closes the
   drawer; expanding/collapsing a workspace or its action buttons keep it
   open.

Swipes deliberately do not trigger on buttons/links/inputs, on transient
popups (menus/dialogs — the settings panel is a full-screen page, so it is
exempt), or on horizontally scrollable areas (wide tables, the attachment
rail). Swiping on the message box (composer) is allowed on purpose — it sits
at thumb height.

Layout

dsh-plugin-better-mobile-ui/
├── package.json              # dsh.client web plugin declaration
├── lib/
│   ├── index.js              # host-side stub (empty apply; makes the loader entry real)
│   └── client.js             # browser bundle (generated)
├── src/
│   └── client-source.js      # single source of truth for the browser half
└── scripts/
    └── build-client.js       # generates lib/client.js

How it works

• dsh.client in package.json; exports["./client"] is the ModuleLoader
  bundle; the bundle's inject asks for the layout service so the
  plugin can drive the app's sidebar state (ctx.layout.toggleSidebar()).
• The browser half injects one <style> whose rules are all inside
  @media (max-width: <breakpoint>px) (plus display:none chrome rules
  outside it), tags the shell frame/columns/composer/settings-modal with
  stable data-bmu-* handles (class names are hashed; the tags are not), and
  runs the pointer-gesture controller + top-bar/dropdown wiring.
• The sidebar grid track is overridden with !important; the columns are
  pinned to their grid tracks so the center column keeps full width while the
  sidebar drawer floats above it.
• Settings "page" mode widens the drawer column to 100vw (no transform
  ancestors, so the modal's absolute positioning just fills the viewport).

Verify

1. Open the dsh web GUI on a narrow window (or device emulation ≤ 768px) and
   refresh.
2. The sidebar is gone; a slim top bar shows the session title, ☰ and ⋯.
3. Swipe right mid-screen → sidebar slides in; swipe left → back/hide.
4. Tap ☰ → drawer; tap Settings → the section list fills the drawer;
   pick one → full-screen settings; X or left-swipe walks back.
5. Tap ⋯ → the Chat/Trajectory menu drops down; pick a tab → view switches.
6. The composer shows the model name cleanly next to the send button.
7. Widen past 768px → everything returns to the normal desktop layout.

Rebuilding / iterating

node scripts/build-client.js
dsh plugin --profile web add github:davidgereb/dsh-plugin-better-mobile-ui
# the running GUI hot-swaps rebuilt bundles via the client-hmr SSE channel
# (no refresh needed for bundle-only changes once the plugin is loaded).

Configuration

Before boot, window.__BETTER_MOBILE_UI_CONFIG__ = { breakpoint: 820 }
overrides the mobile breakpoint (default 768). Read once at apply time.

Reverting

• Remove the ui-better-mobile row from cordis.patch.yml.
• dsh plugin --profile web rm dsh-plugin-better-mobile-ui
• Restart the dsh server (new-entry removal needs a boot) and refresh the page.

Compatibility. Tested against dsh 0.1.0-rc.6 on Node.js
v24.19.0 (dsh web profile). Older or newer dsh releases may change the
internals this plugin hooks into — check the changelog before upgrading.

⚠️ AI-generated, provided as-is. This project was written with the
assistance of an AI. It is provided AS IS without warranty of any kind,
express or implied. The author cannot be held responsible for any damage,
data loss, or misbehaviour that results from using it. Use at your own risk.