[Feature] Mobile-friendly web UI: responsive layout, touch support, and PWA polish

[motchii709]

Context

Serving dsh web through tailscale serve and installing it as a PWA works great out of the box (manifest.webmanifest with display: fullscreen is already shipped - nice!). This makes DSH usable from a phone anywhere.

Problem

Once installed on a phone, the experience breaks down because the UI is desktop-first:

• No touch affordances: no edge-swipe/drawer behavior for the sidebar, no swipe gestures to switch conversations
• Tap targets (buttons, session list items, input toolbar) are sized for mouse pointers
• No safe-area handling (viewport-fit=cover / env(safe-area-inset-*)), so content sits under gesture bars/notches
• Input area and typography do not adapt to narrow viewports

Suggestions (roughly in impact order)

1. Responsive breakpoints for narrow viewports: collapsible drawer sidebar, full-width composer
2. Larger minimum touch target sizes (~44px) on small screens
3. Safe-area insets so the app respects notches/gesture bars when launched standalone from the home screen
4. Basic touch gestures: edge-swipe to open sidebar, swipe between sessions if feasible

Even 1-3 alone would make phone usage dramatically better. Happy to provide more details on the environment (Android/Chrome PWA over Tailscale Serve) if useful.

[fan56]

A complementary approach that works today for the "use it from the phone" half: dsh-feishu attaches a Feishu/Lark bot to an existing dsh session instead of resizing the web UI. Outbound-WebSocket only (no tunnel, no public origin): status cards stream progress while the agent works, ask-user questions arrive as interactive cards answerable from the phone, /resume re-attaches a live session, and follow-ups dispatch work remotely.

dsh plugin add @aiwayds/dsh-feishu

This serves the phone-driven workflow without a browser at all; the responsive-web improvements you are asking for remain the right ask for browser-based use — the two serve different deployment shapes.

[dvchd]

+1 on this — tested on dsh 0.1.2-rc.1 + dsh-web-frontend 0.1.2-rc.1, iPhone / Android Chrome at 375-412px.

What still breaks:

1. Left sidebar re-expands by squeezing the center instead of overlaying it, so the center drops to ~95px and needs horizontal scroll (Sidebar becomes unusable at phone widths — needs a mobile overlay mode, not just "squeeze the center" #5058, [Bug] Mobile layout broken: sidebar expanded view is cramped/overlapping #1053).
2. Composer controls stack/overlap under 768px, no wrapping/condensing (Web UI has no responsive layout — composer/controls stack on mobile #1293).
3. No viewport-fit=cover / env(safe-area-inset-*), content sits under notch/gesture bar in standalone PWA.
4. Hit targets are mouse-sized, hover-only interactions don't work with touch.

Suggestion, in priority order:

• <640px: sidebar becomes a fixed drawer with backdrop + swipe/Escape to dismiss, center keeps full width.
• Composer wraps to single column + larger touch targets (~44px).
• Add safe-area insets + keyboard-open handling for PWA.

The PWA shell (manifest.webmanifest, fullscreen) already works great over Tailscale — this responsive pass would complete the phone story. Happy to attach screenshots / test alpha builds.