Add responsive breakpoints / mobile layout to dsh-web-frontend

[AlexMollard]

This is largely a +1 on #4429 (and #1721, #1293, #1053, #5058) — the mobile/responsive ask is clearly already on the table. Posting anyway because it adds two things I haven't seen together in those threads: a verified workaround for safe phone access today, and one more piece of concrete evidence for the responsive-layout request.

(中文 TL;DR 见下方)

1. Remote access from a phone already works today — no --host 0.0.0.0 needed

The web UI ships as a proper installable PWA (manifest.webmanifest, display: "fullscreen", SVG icon), and paired with Tailscale it makes a genuinely great remote-control story:

1. Install to home screen on iOS/Android → launches fullscreen with its own icon, no browser chrome.

2. Reach it from anywhere without exposing anything to the LAN or internet: the webserver trusts authorities via trustedHosts, so pairing tailscale serve with a profile patch layer means the harness on my PC is reachable from my phone anywhere — valid HTTPS, zero router ports opened:

   # ~/.dsh/profiles/web/cordis.patch.yml — applies to every `dsh web` launch
   - id: web-runtime
     config:
       openBrowser: !!js ctx.webStartup.openBrowser
       printUrl: true
       surfaceContext: true
       trustedHosts:
         - '127.0.0.1:3080'
         - 'localhost:3080'
         - '<my-node>.<my-tailnet>.ts.net'   # the authority tailscale serve proxies through

   tailscale serve --bg 3080   # proxies https://<node>.<tailnet>.ts.net -> 127.0.0.1:3080

   Being able to drive the agent on my PC from my phone over the tailnet is fantastic. This also sidesteps the --host 0.0.0.0 ask in 还没法--host 0.0.0.0启动啊 #76 entirely — nothing needs to listen on the LAN, and nobody can even see the port without being authenticated to your tailnet.

2. The PWA installs fine — the UI inside it is desktop-only

The PWA shell is there, but the UI itself has no mobile treatment. Concretely, in the shipped dsh-web-frontend dist:

• The entire stylesheet (~35 KB minified) contains only two @media rules, both prefers-reduced-motion — zero responsive breakpoints.
• Desktop-density docked panels and small hit targets don't reflow at phone widths (the sidebar problem Sidebar becomes unusable at phone widths — needs a mobile overlay mode, not just "squeeze the center" #5058 describes matches what I see).
• Several interactions assume hover / precise pointer input, which is awkward with touch.

So on a phone the app installs and connects fine, but actually using it (reading threads, hitting the composer, navigating panels) is rough.

The ask

Responsive treatment for the shipped web frontend, per #4429 / #1721 — the modular dsh-client-ui-* package structure seems well suited to it:

• A narrow-viewport layout: single-pane navigation (session list / chat / panels as swipeable or drawer views) instead of the fixed dock layout.
• Touch-sized hit targets and touch-friendly menus (long-press instead of hover where relevant).
• Safe-area / keyboard handling so the composer behaves when the on-screen keyboard opens.

The PWA plumbing already exists, so this feels like a natural iteration on an existing asset rather than a new app — and it would complete the remote story that #75, #76, and #91 are circling: driving your harness from anywhere, including from a phone, with no extra software beyond a browser.

---

中文摘要

这主要是对 #4429（以及 #1721、#1293、#1053、#5058）的补充+1。带两个增量：

1. 手机远程访问今天就能安全实现，不需要 --host 0.0.0.0： Web UI 自带 PWA manifest，加到主屏幕即可全屏启动；配合 tailscale serve --bg 3080 和 ~/.dsh/profiles/web/cordis.patch.yml 里给 web-runtime 行配置 trustedHosts（加上你的 ts.net 域名），手机在任何地方都能通过 HTTPS 访问 PC 上的 harness——不暴露局域网端口，不进路由器。配置片段见上方英文部分。

2. UI 本身完全没有移动端适配： 打包的 CSS 里只有两条 @media（都是 prefers-reduced-motion），没有任何响应式断点；桌面密度的面板布局、小点击目标、依赖 hover 的交互，在手机上很不好用。

希望按 #4429 的方向给 web 前端做响应式：窄屏单栏/抽屉式布局、触摸友好的点击目标、软键盘弹出时输入框的 safe-area 处理。PWA 基础已经有了，补上这块就能真正实现"手机上远程指挥 PC 上的 agent"。

---

Drafted with AI assistance; the setup and workaround are mine and tested on my own harness.