@1outres/dsh-plugin-mobile 0.6.0 → 0.7.0

package/README.md

@@ -1,10 +1,11 @@
 # @1outres/dsh-plugin-mobile
 
-Makes the DeepSeek Harness Web UI usable on a phone. The shipped layout is
-built for desktop windows: below 1024px the sidebar shrinks to a 56px rail and,
-when opened, squeezes the conversation to a sliver; the on-screen keyboard
-pushes the header off screen; Enter sends, so a second line cannot be typed.
-This plugin keeps the desktop layout as it is and changes only the narrow one.
+Adds phone refinements to the DeepSeek Harness Web UI. Harness `0.2.2` already
+turns the sidebar into a modal navigation drawer below 768px, with its own
+opener, mask, focus trap and close-on-navigation. This plugin supplies what is
+still missing on a phone: the page follows the on-screen keyboard, Enter adds a
+line, the keyboard stays closed until you tap the composer, edge swipes open
+and close the shipped drawer, and the layout respects notches and touch.
 
 Install just this plugin:
 
@@ -18,16 +19,9 @@ insert the same `mobile` row.
 
 ## On a phone
 
-The phone layout applies while the viewport is narrower than `breakpoint`
-(768px by default, the width below which the right panel already opens
-fullscreen).
+The phone refinements apply while the Harness uses its phone layout: below
+768px and without a Windows caption bar.
 
-- **Sidebar drawer.** The rail disappears and the conversation takes the full
-  width. A menu button before the session title, or a swipe right from the
-  left edge, slides the sidebar in over the conversation with a dimmed scrim.
-  Tap the scrim, swipe left, or pick a session, a panel or New Session to close
-  it. Global panels such as Plugins have no conversation header, so they get a
-  floating menu button in the top-left corner instead.
 - **On-screen keyboard.** The page shrinks to the area the keyboard leaves
   visible, so the header stays at the top and the composer sits right above
   the keyboard. The draft box grows to at most 30% of that area.
@@ -35,21 +29,25 @@ fullscreen).
   break and the send button sends. Enter that confirms an IME conversion, and
   Enter in the slash-command or reference menu, keep working as before.
 - **The keyboard opens only when you tap the input.** The Harness focuses the
-  composer whenever a session opens and when a composer button such as the
-  model picker or Send is pressed, which pops the keyboard over the
-  conversation. On a touch screen the composer takes focus only right after a
-  tap on the input (or on the empty part of the composer card, or the `+`
-  command button) or a hardware key press; other focuses are undone at once.
+  composer when a composer button such as the model picker or Send is pressed,
+  which pops the keyboard over the conversation. On a touch screen the composer
+  takes focus only right after a tap on the input (or on the empty part of the
+  composer card, or the `+` command button) or a hardware key press; other
+  focuses are undone at once.
+- **Swipe the drawer.** Swipe right from the left edge to open the Harness
+  navigation drawer, swipe left to close it. The Harness owns the drawer, its
+  menu button, its scrim and its close-on-navigation behavior.
 - **Notches and the home indicator.** The page asks for the full screen
-  (`viewport-fit=cover`) and pads by the safe-area insets; the composer clears
-  the home indicator while the keyboard is down.
-- **Compact chrome.** Tighter header and composer padding, no width-drag
-  handles, and the Settings dialog becomes a full-screen sheet with its section
-  list scrolling sideways above the page.
+  (`viewport-fit=cover`) and pads by the safe-area insets; the navigation
+  drawer and the composer clear the home indicator.
+- **Compact composer.** The conversation keeps 8px side clearance and the
+  draft box caps its height against the visible area.
 - **No accidental reloads.** Pull-to-refresh and overscroll bounce are off, so
   scrolling up through a long conversation does not reload the page.
+- **A full-screen Settings sheet.** The Harness Settings dialog becomes a
+  full-screen sheet with its section list scrolling sideways above the page.
 
-On any touch screen (also a tablet wider than the breakpoint):
+On any touch screen (also a tablet wider than 768px):
 
 - Text fields use at least 16px type, so iOS does not zoom in when one gets
   focus.
@@ -61,15 +59,17 @@ On any touch screen (also a tablet wider than the breakpoint):
   28px tap targets, and other sessions keep their time.
 - No tap highlight flash and no double-tap zoom delay on buttons.
 
-The plugin also adds the home-screen tags (`apple-mobile-web-app-capable`,
-`mobile-web-app-capable`, `apple-mobile-web-app-title`), so **Add to Home
-Screen** opens the Harness without the browser bar.
+The plugin also patches the viewport metadata and adds the home-screen tags
+(`apple-mobile-web-app-capable`, `mobile-web-app-capable`,
+`apple-mobile-web-app-title`), so **Add to Home Screen** opens the Harness
+without the browser bar. The Harness already ships the manifest and the
+home-screen icon.
 
 ### With the other plugins in this repository
 
 - [`@1outres/dsh-plugin-background`](../dsh-plugin-background) keeps the
-  drawer and the fullscreen right panel opaque, so the conversation does not
-  show through them.
+  Harness drawer, the Settings sheet and the fullscreen right panel opaque, so
+  the conversation does not show through them.
 - [`@1outres/dsh-plugin-model-picker`](../dsh-plugin-model-picker) does not
   focus its search field on a touch screen, fits above the keyboard, and stays
   open when the keyboard is dismissed, so the Effort row stays reachable.
@@ -78,32 +78,30 @@ Screen** opens the Harness without the browser bar.
 
 Edit them in **Settings → Mobile**, or in the profile patch under the
 `mobile` row. Every change applies immediately in every open page. The page
-also says whether the page you are looking at uses the phone layout, and at
-which width, to help pick the breakpoint.
+also says whether the Harness currently uses its phone layout, and at which
+width.
 
-| Field                | Default   | Meaning                                                                                           |
-| -------------------- | --------- | ------------------------------------------------------------------------------------------------- |
-| `mode`               | `auto`    | `auto` uses the phone layout below `breakpoint`, `always` everywhere, `off` never.                |
-| `breakpoint`         | `768`     | Viewport width in CSS pixels, from 360 to 1024.                                                   |
-| `enterKey`           | `newline` | Enter in the composer on a touch screen: `newline` adds a line, `send` keeps the Harness default. |
-| `swipe`              | `true`    | Edge swipe opens the drawer, swipe left closes it.                                                |
-| `fitKeyboard`        | `true`    | Fit the page to the area the on-screen keyboard leaves visible.                                   |
-| `blockPullToRefresh` | `true`    | Stop pull-to-refresh and overscroll bounce.                                                       |
-| `autoFocusComposer`  | `false`   | Let the composer focus itself (and open the keyboard) on a touch screen, as on desktop.           |
+| Field                | Default   | Meaning                                                                                                                                         |
+| -------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `enterKey`           | `newline` | Enter in the composer on a touch screen: `newline` adds a line, `send` keeps the Harness default.                                               |
+| `swipe`              | `true`    | Edge swipe opens the Harness navigation drawer, swipe left closes it.                                                                           |
+| `fitKeyboard`        | `true`    | Fit the page to the area the on-screen keyboard leaves visible.                                                                                 |
+| `blockPullToRefresh` | `true`    | Stop pull-to-refresh and overscroll bounce.                                                                                                     |
+| `autoFocusComposer`  | `false`   | Let a composer button or another Harness action focus the input (and open the keyboard). Off keeps the keyboard closed until you tap the input. |
 
-`mode: off` removes every change, the touch ones included.
+The Harness fixes the drawer width at 768px; this plugin has no separate
+breakpoint. The earlier `mode` and `breakpoint` fields are gone; an old profile
+entry that still sets them is ignored.
 
 ## How it works
 
-1. The browser half watches `matchMedia` and sets `data-dsh-mobile` and
-   `data-dsh-touch` on `<html>`. One stylesheet, scoped under those
-   attributes, does the layout work.
-2. The drawer is the shipped sidebar column. The stylesheet takes it out of the
-   AppFrame grid and slides it with a transform; `ctx.layout.toggleSidebar()`
-   opens and closes it, and the frame's `data-sidebar-collapsed` attribute says
-   which state it is in. The menu button occupies the empty
-   `conversation.header.leading` slot; the scrim and the floating button live
-   in `shell.overlay`.
+1. The browser half watches the frame's `data-sidebar-drawer` attribute and a
+   coarse-pointer media query, and sets `data-dsh-mobile` and `data-dsh-touch`
+   on `<html>`. One stylesheet, scoped under those attributes, does the layout
+   work.
+2. The drawer belongs to the Harness. The plugin only calls
+   `ctx.layout.toggleSidebar()` for an edge swipe and reads the frame's
+   `data-sidebar-collapsed` attribute to know whether it is open.
 3. The keyboard fit reads `window.visualViewport` and publishes its height as
    `--dsh-mobile-vvh`; the page height follows it. iOS scrolls the whole
    document to reveal a focused field, so that scroll is undone while the
@@ -120,21 +118,16 @@ which width, to help pick the breakpoint.
 ## Limits
 
 - **It restyles shipped UI from the outside.** Host elements are found through
-  slot anchors (`data-slot`), data attributes (`data-rightbar-col`,
-  `data-sidebar-collapsed`, `data-composer-*`, `data-conversation-*`,
+  data attributes (`data-sidebar-drawer`, `data-sidebar-collapsed`,
+  `data-rightbar-col`, `data-composer-*`, `data-conversation-*`,
   `data-shortcut-modal`) and ARIA roles. Two touch rules match Session row
   parts by CSS-module class name. A Harness update within
-  `>=0.2.1-rc.5 <0.3.0` can rename any of them; the matching rule then stops
+  `>=0.2.2-rc.1 <0.3.0` can rename any of them; the matching rule then stops
   applying, and the page falls back to the shipped layout for that part.
 - Enter relies on the composer being a plain-text editor that turns the
   browser's paragraph insertion into a line break.
-- The drawer closes after a session or panel is picked, not after other
-  actions in it (Settings opens over it).
-- Between the breakpoint and about 756px a normal right panel overlaps the
-  conversation instead of squeezing it; below 768px the Harness already opens
-  it fullscreen.
-- iOS shows a screenshot instead of an icon on the home screen: it does not
-  use SVG touch icons, and the Harness ships no PNG.
+- The Harness owns the drawer breakpoint; the plugin follows the frame's
+  `data-sidebar-drawer` attribute rather than repeating the width.
 - An edge swipe in Safari can also trigger the browser's own back gesture; the
   home-screen app has none.
 - Buttons and the Settings page are in English, Chinese and Japanese (the

package/lib/client.js

@@ -26,32 +26,57 @@ window.__ModuleLoader__.load({
 		// src/client/index.tsx
 		var index_exports = {};
 		__export(index_exports, {
-		  HEADER_SLOT: () => HEADER_SLOT,
-		  OVERLAY_SLOT: () => OVERLAY_SLOT,
 		  SETTINGS_SLOT: () => SETTINGS_SLOT,
 		  apply: () => apply,
 		  inject: () => inject
 		});
 		module.exports = __toCommonJS(index_exports);
 
-		// src/client/components.tsx
-		var import_react2 = require("react");
+		// src/client/config.ts
+		var NAMESPACE = "mobile";
+		var DEFAULT_CONFIG = {
+		  enterKey: "newline",
+		  swipe: true,
+		  fitKeyboard: true,
+		  blockPullToRefresh: true,
+		  autoFocusComposer: false
+		};
+		var ENTER_KEYS = ["newline", "send"];
+		function oneOf(value, allowed, fallback) {
+		  return typeof value === "string" && allowed.includes(value) ? value : fallback;
+		}
+		function flag(value, fallback) {
+		  return typeof value === "boolean" ? value : fallback;
+		}
+		function normalizeConfig(value) {
+		  return {
+		    enterKey: oneOf(value?.enterKey, ENTER_KEYS, DEFAULT_CONFIG.enterKey),
+		    swipe: flag(value?.swipe, DEFAULT_CONFIG.swipe),
+		    fitKeyboard: flag(value?.fitKeyboard, DEFAULT_CONFIG.fitKeyboard),
+		    blockPullToRefresh: flag(value?.blockPullToRefresh, DEFAULT_CONFIG.blockPullToRefresh),
+		    autoFocusComposer: flag(value?.autoFocusComposer, DEFAULT_CONFIG.autoFocusComposer)
+		  };
+		}
 
 		// src/client/frame.ts
-		var import_react = require("react");
-		var FRAME = "div:has(> [data-rightbar-col])";
+		var FRAME_ANCHOR = "[data-rightbar-col]";
 		var COLLAPSED_ATTRIBUTE = "data-sidebar-collapsed";
 		var FULLSCREEN_ATTRIBUTE = "data-rightbar-fullscreen";
+		var DRAWER_MODAL = "sidebar";
 		function findFrame(root) {
-		  return root.querySelector("[data-rightbar-col]")?.parentElement ?? null;
+		  return root.querySelector(FRAME_ANCHOR)?.parentElement ?? null;
 		}
 		function isExpanded(frame) {
 		  return frame !== null && !frame.hasAttribute(COLLAPSED_ATTRIBUTE);
 		}
-		var NO_SWIPE = "pre, table, input, textarea, select, [contenteditable='true'], [role='slider'], [data-dsh-mobile-no-swipe]";
+		var NO_SWIPE = "pre, table, input, textarea, select, [contenteditable='true'], [role='slider'], [data-sidebar-opener], [data-sidebar-toggle], [data-dsh-mobile-no-swipe]";
+		var OTHER_MODAL = `[aria-modal='true']:not([data-shortcut-modal='${DRAWER_MODAL}'])`;
+		function otherModalOpen(root) {
+		  return root.querySelector(OTHER_MODAL) !== null;
+		}
 		function swipeBlocked(target, root, overflowX) {
 		  if (findFrame(root)?.hasAttribute(FULLSCREEN_ATTRIBUTE) === true) return true;
-		  if (root.querySelector("[aria-modal='true']") !== null) return true;
+		  if (otherModalOpen(root)) return true;
 		  const element = target;
 		  if (element === null || typeof element.closest !== "function") return false;
 		  if (element.closest(NO_SWIPE) !== null) return true;
@@ -65,146 +90,58 @@ window.__ModuleLoader__.load({
 		  }
 		  return false;
 		}
-		function useFrameFlag(anchor, attribute) {
-		  const subscribe = (0, import_react.useCallback)(
-		    (listener) => {
-		      const frame = anchor.current?.closest(FRAME);
-		      if (frame === void 0 || frame === null) return () => {
-		      };
-		      const observer = new MutationObserver(listener);
-		      observer.observe(frame, { attributes: true, attributeFilter: [attribute] });
-		      return () => observer.disconnect();
-		    },
-		    [anchor, attribute]
-		  );
-		  const read = (0, import_react.useCallback)(
-		    () => anchor.current?.closest(FRAME)?.hasAttribute(attribute),
-		    [anchor, attribute]
-		  );
-		  return (0, import_react.useSyncExternalStore)(subscribe, read, () => void 0);
-		}
 
-		// src/client/icons.tsx
-		var import_jsx_runtime = require("react/jsx-runtime");
-		function IconMenu({ size = 16, className }) {
-		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-		    "svg",
-		    {
-		      width: size,
-		      height: size,
-		      className,
-		      viewBox: "0 0 16 16",
-		      fill: "none",
-		      "aria-hidden": "true",
-		      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2.5 4h11M2.5 8h11M2.5 12h7", stroke: "currentColor", strokeLinecap: "round" })
+		// src/client/drawer.ts
+		var DRAWER_ATTRIBUTE = "data-sidebar-drawer";
+		function observeMutations(target, options, callback) {
+		  const observer = new MutationObserver(callback);
+		  observer.observe(target, options);
+		  return observer;
+		}
+		function createDrawerSource(document2, observe) {
+		  const listeners = /* @__PURE__ */ new Set();
+		  let frame = null;
+		  let frameObserver;
+		  let value = false;
+		  const readFrame = () => document2.querySelector(FRAME_ANCHOR)?.parentElement ?? null;
+		  const refresh = () => {
+		    const next = frame?.hasAttribute(DRAWER_ATTRIBUTE) ?? false;
+		    if (next === value) return;
+		    value = next;
+		    for (const listener of [...listeners]) listener();
+		  };
+		  const attach = () => {
+		    const next = readFrame();
+		    if (next === frame) {
+		      refresh();
+		      return;
 		    }
-		  );
-		}
-
-		// src/client/components.tsx
-		var import_jsx_runtime2 = require("react/jsx-runtime");
-		function useObservable(observable) {
-		  const subscribe = (0, import_react2.useCallback)(
-		    (listener) => observable.subscribe(listener),
-		    [observable]
-		  );
-		  const getSnapshot = (0, import_react2.useCallback)(() => observable.getSnapshot(), [observable]);
-		  return (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-		}
-		function mainSessionOf(state) {
-		  for (const [id, row] of Object.entries(state.byId)) {
-		    if ((row?.retainedBy?.mainView ?? 0) > 0) return id;
-		  }
-		  return void 0;
-		}
-		function HeaderMenuButton({ mode, toggle, t }) {
-		  const state = useObservable(mode);
-		  const ref = (0, import_react2.useRef)(null);
-		  const collapsed = useFrameFlag(ref, COLLAPSED_ATTRIBUTE);
-		  const expanded = collapsed === false;
-		  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-		    "button",
-		    {
-		      ref,
-		      type: "button",
-		      className: "dsh-mobile-menu",
-		      hidden: !state.mobile,
-		      "aria-label": expanded ? t("menu.close") : t("menu.open"),
-		      "aria-expanded": state.mobile ? expanded : void 0,
-		      onClick: toggle,
-		      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconMenu, { size: 18 })
+		    frameObserver?.disconnect();
+		    frame = next;
+		    frameObserver = frame === null ? void 0 : observe(frame, { attributes: true, attributeFilter: [DRAWER_ATTRIBUTE] }, refresh);
+		    refresh();
+		  };
+		  const documentObserver = observe(
+		    document2.documentElement,
+		    { childList: true, subtree: true },
+		    () => {
+		      if (frame === null || frame.isConnected === false) attach();
 		    }
 		  );
-		}
-		function DrawerOverlay({ mode, toggle, t, usePanelInfo, useSessions }) {
-		  const state = useObservable(mode);
-		  const anchor = (0, import_react2.useRef)(null);
-		  const collapsed = useFrameFlag(anchor, COLLAPSED_ATTRIBUTE);
-		  const expanded = state.mobile && collapsed === false;
-		  const panel = usePanelInfo((info) => info.activePanelId);
-		  const session = useSessions(mainSessionOf);
-		  const seen = (0, import_react2.useRef)({ panel, session });
-		  (0, import_react2.useEffect)(() => {
-		    const before = seen.current;
-		    seen.current = { panel, session };
-		    if (before.panel === panel && before.session === session) return;
-		    if (expanded) toggle();
-		  }, [panel, session, expanded, toggle]);
-		  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-		    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ref: anchor, hidden: true }),
-		    state.mobile ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-		      "div",
-		      {
-		        className: "dsh-mobile-scrim",
-		        "data-open": expanded ? "" : void 0,
-		        "aria-hidden": "true",
-		        onClick: toggle
-		      }
-		    ) : null,
-		    state.mobile && panel !== null && !expanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-		      "button",
-		      {
-		        type: "button",
-		        className: "dsh-mobile-menu dsh-mobile-floating",
-		        "aria-label": t("menu.open"),
-		        onClick: toggle,
-		        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconMenu, { size: 18 })
-		      }
-		    ) : null
-		  ] });
-		}
-
-		// src/client/config.ts
-		var NAMESPACE = "mobile";
-		var MIN_BREAKPOINT = 360;
-		var MAX_BREAKPOINT = 1024;
-		var DEFAULT_CONFIG = {
-		  mode: "auto",
-		  breakpoint: 768,
-		  enterKey: "newline",
-		  swipe: true,
-		  fitKeyboard: true,
-		  blockPullToRefresh: true,
-		  autoFocusComposer: false
-		};
-		var MODES = ["auto", "always", "off"];
-		var ENTER_KEYS = ["newline", "send"];
-		function oneOf(value, allowed, fallback) {
-		  return typeof value === "string" && allowed.includes(value) ? value : fallback;
-		}
-		function flag(value, fallback) {
-		  return typeof value === "boolean" ? value : fallback;
-		}
-		function normalizeConfig(value) {
-		  const breakpoint = typeof value?.breakpoint === "number" && Number.isFinite(value.breakpoint) ? Math.round(Math.min(MAX_BREAKPOINT, Math.max(MIN_BREAKPOINT, value.breakpoint))) : DEFAULT_CONFIG.breakpoint;
+		  attach();
 		  return {
-		    mode: oneOf(value?.mode, MODES, DEFAULT_CONFIG.mode),
-		    breakpoint,
-		    enterKey: oneOf(value?.enterKey, ENTER_KEYS, DEFAULT_CONFIG.enterKey),
-		    swipe: flag(value?.swipe, DEFAULT_CONFIG.swipe),
-		    fitKeyboard: flag(value?.fitKeyboard, DEFAULT_CONFIG.fitKeyboard),
-		    blockPullToRefresh: flag(value?.blockPullToRefresh, DEFAULT_CONFIG.blockPullToRefresh),
-		    autoFocusComposer: flag(value?.autoFocusComposer, DEFAULT_CONFIG.autoFocusComposer)
+		    get: () => value,
+		    subscribe(listener) {
+		      listeners.add(listener);
+		      return () => {
+		        listeners.delete(listener);
+		      };
+		    },
+		    dispose() {
+		      documentObserver.disconnect();
+		      frameObserver?.disconnect();
+		      listeners.clear();
+		    }
 		  };
 		}
 
@@ -291,29 +228,19 @@ window.__ModuleLoader__.load({
 
 		// src/client/i18n.ts
 		var en = {
-		  "menu.open": "Open sidebar",
-		  "menu.close": "Close sidebar",
 		  nav: "Mobile",
 		  "settings.title": "Mobile",
-		  "settings.description": "Adapts the Web UI to phones: below the breakpoint the sidebar becomes a drawer, the page fits above the on-screen keyboard, and touch controls get larger targets. Changes apply at once in every open page.",
-		  "settings.statusMobile": "This page is using the phone layout ({width}px wide).",
-		  "settings.statusDesktop": "This page is using the desktop layout ({width}px wide).",
-		  "settings.mode": "Phone layout",
-		  "settings.modeHint": "Auto switches below the breakpoint. Off removes every change of this plugin.",
-		  "settings.mode.auto": "Auto",
-		  "settings.mode.always": "Always",
-		  "settings.mode.off": "Off",
-		  "settings.breakpoint": "Breakpoint",
-		  "settings.breakpointHint": "Viewport width in CSS pixels, from 360 to 1024. Below it, auto mode uses the phone layout. Most phones are 360 to 430 wide in portrait.",
-		  "settings.breakpointInvalid": "Enter a whole number from 360 to 1024.",
+		  "settings.description": "Adds phone refinements on top of the Harness layout: the page fits above the on-screen keyboard, Enter adds a line, the keyboard stays closed until you tap the composer, and an edge swipe opens the navigation drawer that the Harness uses below 768px. Changes apply at once in every open page.",
+		  "settings.statusMobile": "The Harness is using its phone layout here ({width}px wide).",
+		  "settings.statusDesktop": "The Harness is using its desktop layout here ({width}px wide); it switches to the phone layout below 768px.",
 		  "settings.enterKey": "Enter key in the composer",
 		  "settings.enterKeyHint": "On a touch screen in the phone layout. With New line, send with the send button. IME conversion and command menus keep their Enter.",
 		  "settings.enterKey.newline": "New line",
 		  "settings.enterKey.send": "Send",
 		  "settings.autoFocusComposer": "Focus the composer automatically",
-		  "settings.autoFocusComposerHint": "Opening a session or pressing a composer button focuses the input, as on desktop, and the on-screen keyboard opens. Off: tap the input to type.",
+		  "settings.autoFocusComposerHint": "Let a composer button or another Harness action focus the input and open the on-screen keyboard. Off keeps the keyboard closed until you tap the input.",
 		  "settings.swipe": "Swipe to open the sidebar",
-		  "settings.swipeHint": "Swipe right from the left edge to open, swipe left to close.",
+		  "settings.swipeHint": "Swipe right from the left edge to open the Harness navigation drawer, swipe left to close it.",
 		  "settings.fitKeyboard": "Fit the page to the keyboard",
 		  "settings.fitKeyboardHint": "Keep the header and the composer on screen while the on-screen keyboard is up.",
 		  "settings.blockPullToRefresh": "Block pull-to-refresh",
@@ -324,29 +251,19 @@ window.__ModuleLoader__.load({
 		  "settings.writeError": "The Host refused the change."
 		};
 		var zh = {
-		  "menu.open": "\u6253\u5F00\u4FA7\u8FB9\u680F",
-		  "menu.close": "\u5173\u95ED\u4FA7\u8FB9\u680F",
 		  nav: "\u79FB\u52A8\u7AEF",
 		  "settings.title": "\u79FB\u52A8\u7AEF",
-		  "settings.description": "\u8BA9 Web UI \u9002\u914D\u624B\u673A\uFF1A\u7A84\u4E8E\u65AD\u70B9\u65F6\u4FA7\u8FB9\u680F\u53D8\u4E3A\u62BD\u5C49\uFF0C\u9875\u9762\u9002\u914D\u5C4F\u5E55\u952E\u76D8\u4E0A\u65B9\u7684\u53EF\u89C1\u533A\u57DF\uFF0C\u89E6\u63A7\u63A7\u4EF6\u7684\u70B9\u51FB\u533A\u57DF\u66F4\u5927\u3002\u4FEE\u6539\u4F1A\u7ACB\u5373\u5E94\u7528\u5230\u6240\u6709\u6253\u5F00\u7684\u9875\u9762\u3002",
-		  "settings.statusMobile": "\u5F53\u524D\u9875\u9762\u4F7F\u7528\u624B\u673A\u5E03\u5C40\uFF08\u5BBD {width}px\uFF09\u3002",
-		  "settings.statusDesktop": "\u5F53\u524D\u9875\u9762\u4F7F\u7528\u684C\u9762\u5E03\u5C40\uFF08\u5BBD {width}px\uFF09\u3002",
-		  "settings.mode": "\u624B\u673A\u5E03\u5C40",
-		  "settings.modeHint": "\u81EA\u52A8\uFF1A\u7A84\u4E8E\u65AD\u70B9\u65F6\u5207\u6362\u3002\u5173\u95ED\uFF1A\u64A4\u9500\u672C\u63D2\u4EF6\u7684\u6240\u6709\u4FEE\u6539\u3002",
-		  "settings.mode.auto": "\u81EA\u52A8",
-		  "settings.mode.always": "\u59CB\u7EC8",
-		  "settings.mode.off": "\u5173\u95ED",
-		  "settings.breakpoint": "\u65AD\u70B9",
-		  "settings.breakpointHint": "\u89C6\u53E3\u5BBD\u5EA6\uFF08CSS \u50CF\u7D20\uFF09\uFF0C360 \u5230 1024\u3002\u7A84\u4E8E\u8BE5\u503C\u65F6\u81EA\u52A8\u6A21\u5F0F\u4F7F\u7528\u624B\u673A\u5E03\u5C40\u3002\u591A\u6570\u624B\u673A\u7AD6\u5C4F\u5BBD 360 \u5230 430\u3002",
-		  "settings.breakpointInvalid": "\u8BF7\u8F93\u5165 360 \u5230 1024 \u4E4B\u95F4\u7684\u6574\u6570\u3002",
+		  "settings.description": "\u5728 Harness \u5E03\u5C40\u4E4B\u4E0A\u8865\u5145\u624B\u673A\u4F53\u9A8C\uFF1A\u9875\u9762\u9002\u914D\u5C4F\u5E55\u952E\u76D8\u4E0A\u65B9\u7684\u53EF\u89C1\u533A\u57DF\uFF0CEnter \u6362\u884C\uFF0C\u70B9\u6309\u8F93\u5165\u6846\u4E4B\u524D\u4E0D\u5F39\u51FA\u952E\u76D8\uFF0C\u5C4F\u5E55\u7A84\u4E8E 768px \u65F6\u4ECE\u8FB9\u7F18\u6ED1\u52A8\u53EF\u6253\u5F00 Harness \u7684\u5BFC\u822A\u62BD\u5C49\u3002\u4FEE\u6539\u4F1A\u7ACB\u5373\u5E94\u7528\u5230\u6240\u6709\u6253\u5F00\u7684\u9875\u9762\u3002",
+		  "settings.statusMobile": "Harness \u5F53\u524D\u4F7F\u7528\u624B\u673A\u5E03\u5C40\uFF08\u5BBD {width}px\uFF09\u3002",
+		  "settings.statusDesktop": "Harness \u5F53\u524D\u4F7F\u7528\u684C\u9762\u5E03\u5C40\uFF08\u5BBD {width}px\uFF09\uFF1B\u7A84\u4E8E 768px \u65F6\u5207\u6362\u4E3A\u624B\u673A\u5E03\u5C40\u3002",
 		  "settings.enterKey": "\u8F93\u5165\u6846\u4E2D\u7684 Enter \u952E",
 		  "settings.enterKeyHint": "\u4EC5\u5728\u89E6\u5C4F\u8BBE\u5907\u7684\u624B\u673A\u5E03\u5C40\u4E2D\u751F\u6548\u3002\u9009\u62E9\u6362\u884C\u65F6\u7528\u53D1\u9001\u6309\u94AE\u53D1\u9001\u3002\u8F93\u5165\u6CD5\u786E\u8BA4\u548C\u547D\u4EE4\u83DC\u5355\u4ECD\u4F7F\u7528 Enter\u3002",
 		  "settings.enterKey.newline": "\u6362\u884C",
 		  "settings.enterKey.send": "\u53D1\u9001",
 		  "settings.autoFocusComposer": "\u81EA\u52A8\u805A\u7126\u8F93\u5165\u6846",
-		  "settings.autoFocusComposerHint": "\u6253\u5F00\u4F1A\u8BDD\u6216\u6309\u4E0B\u8F93\u5165\u6846\u4E2D\u7684\u6309\u94AE\u65F6\u81EA\u52A8\u805A\u7126\u8F93\u5165\u6846\uFF08\u4E0E\u684C\u9762\u76F8\u540C\uFF09\uFF0C\u5C4F\u5E55\u952E\u76D8\u4F1A\u5F39\u51FA\u3002\u5173\u95ED\u65F6\u70B9\u6309\u8F93\u5165\u6846\u624D\u5F00\u59CB\u8F93\u5165\u3002",
+		  "settings.autoFocusComposerHint": "\u6309\u4E0B\u8F93\u5165\u6846\u4E2D\u7684\u6309\u94AE\u6216\u7531 Harness \u7684\u5176\u4ED6\u64CD\u4F5C\u628A\u7126\u70B9\u79FB\u5230\u8F93\u5165\u6846\u65F6\uFF0C\u5141\u8BB8\u805A\u7126\u5E76\u5F39\u51FA\u5C4F\u5E55\u952E\u76D8\u3002\u5173\u95ED\u65F6\uFF0C\u70B9\u6309\u8F93\u5165\u6846\u4E4B\u524D\u952E\u76D8\u4E0D\u4F1A\u5F39\u51FA\u3002",
 		  "settings.swipe": "\u6ED1\u52A8\u6253\u5F00\u4FA7\u8FB9\u680F",
-		  "settings.swipeHint": "\u4ECE\u5DE6\u8FB9\u7F18\u5411\u53F3\u6ED1\u52A8\u6253\u5F00\uFF0C\u5411\u5DE6\u6ED1\u52A8\u5173\u95ED\u3002",
+		  "settings.swipeHint": "\u4ECE\u5DE6\u8FB9\u7F18\u5411\u53F3\u6ED1\u52A8\u6253\u5F00 Harness \u5BFC\u822A\u62BD\u5C49\uFF0C\u5411\u5DE6\u6ED1\u52A8\u5173\u95ED\u3002",
 		  "settings.fitKeyboard": "\u9875\u9762\u9002\u914D\u952E\u76D8",
 		  "settings.fitKeyboardHint": "\u5C4F\u5E55\u952E\u76D8\u5F39\u51FA\u65F6\uFF0C\u6807\u9898\u680F\u548C\u8F93\u5165\u6846\u4FDD\u6301\u5728\u5C4F\u5E55\u5185\u3002",
 		  "settings.blockPullToRefresh": "\u963B\u6B62\u4E0B\u62C9\u5237\u65B0",
@@ -357,29 +274,19 @@ window.__ModuleLoader__.load({
 		  "settings.writeError": "Host \u62D2\u7EDD\u4E86\u6B64\u4FEE\u6539\u3002"
 		};
 		var ja = {
-		  "menu.open": "\u30B5\u30A4\u30C9\u30D0\u30FC\u3092\u958B\u304F",
-		  "menu.close": "\u30B5\u30A4\u30C9\u30D0\u30FC\u3092\u9589\u3058\u308B",
 		  nav: "\u30E2\u30D0\u30A4\u30EB",
 		  "settings.title": "\u30E2\u30D0\u30A4\u30EB",
-		  "settings.description": "Web UI \u3092\u30B9\u30DE\u30FC\u30C8\u30D5\u30A9\u30F3\u306B\u5408\u308F\u305B\u307E\u3059\u3002\u30D6\u30EC\u30FC\u30AF\u30DD\u30A4\u30F3\u30C8\u3088\u308A\u72ED\u3044\u753B\u9762\u3067\u306F\u30B5\u30A4\u30C9\u30D0\u30FC\u3092\u30C9\u30ED\u30EF\u30FC\u306B\u3057\u3001\u30AA\u30F3\u30B9\u30AF\u30EA\u30FC\u30F3\u30AD\u30FC\u30DC\u30FC\u30C9\u306E\u4E0A\u306B\u53CE\u307E\u308B\u3088\u3046\u30DA\u30FC\u30B8\u3092\u7E2E\u3081\u3001\u30BF\u30C3\u30C1\u64CD\u4F5C\u306E\u5F53\u305F\u308A\u5224\u5B9A\u3092\u5E83\u3052\u307E\u3059\u3002\u5909\u66F4\u306F\u958B\u3044\u3066\u3044\u308B\u3059\u3079\u3066\u306E\u30DA\u30FC\u30B8\u306B\u3059\u3050\u53CD\u6620\u3055\u308C\u307E\u3059\u3002",
-		  "settings.statusMobile": "\u3053\u306E\u30DA\u30FC\u30B8\u306F\u30B9\u30DE\u30DB\u8868\u793A\u3067\u3059\uFF08\u5E45 {width}px\uFF09\u3002",
-		  "settings.statusDesktop": "\u3053\u306E\u30DA\u30FC\u30B8\u306F\u30C7\u30B9\u30AF\u30C8\u30C3\u30D7\u8868\u793A\u3067\u3059\uFF08\u5E45 {width}px\uFF09\u3002",
-		  "settings.mode": "\u30B9\u30DE\u30DB\u8868\u793A",
-		  "settings.modeHint": "\u81EA\u52D5\u306F\u30D6\u30EC\u30FC\u30AF\u30DD\u30A4\u30F3\u30C8\u3088\u308A\u72ED\u3044\u3068\u304D\u306B\u5207\u308A\u66FF\u3048\u307E\u3059\u3002\u30AA\u30D5\u306F\u3053\u306E\u30D7\u30E9\u30B0\u30A4\u30F3\u306E\u5909\u66F4\u3092\u3059\u3079\u3066\u5916\u3057\u307E\u3059\u3002",
-		  "settings.mode.auto": "\u81EA\u52D5",
-		  "settings.mode.always": "\u5E38\u306B",
-		  "settings.mode.off": "\u30AA\u30D5",
-		  "settings.breakpoint": "\u30D6\u30EC\u30FC\u30AF\u30DD\u30A4\u30F3\u30C8",
-		  "settings.breakpointHint": "\u30D3\u30E5\u30FC\u30DD\u30FC\u30C8\u5E45\uFF08CSS \u30D4\u30AF\u30BB\u30EB\uFF09\u3002360\u301C1024 \u306E\u7BC4\u56F2\u3067\u3059\u3002\u3053\u308C\u3088\u308A\u72ED\u3044\u3068\u81EA\u52D5\u30E2\u30FC\u30C9\u3067\u30B9\u30DE\u30DB\u8868\u793A\u306B\u306A\u308A\u307E\u3059\u3002\u7E26\u5411\u304D\u306E\u30B9\u30DE\u30DB\u306F\u304A\u304A\u3080\u306D 360\u301C430 \u3067\u3059\u3002",
-		  "settings.breakpointInvalid": "360\u301C1024 \u306E\u6574\u6570\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+		  "settings.description": "Harness \u306E\u30EC\u30A4\u30A2\u30A6\u30C8\u306B\u30B9\u30DE\u30FC\u30C8\u30D5\u30A9\u30F3\u5411\u3051\u306E\u8ABF\u6574\u3092\u8DB3\u3057\u307E\u3059\u3002\u30AA\u30F3\u30B9\u30AF\u30EA\u30FC\u30F3\u30AD\u30FC\u30DC\u30FC\u30C9\u306E\u4E0A\u306B\u53CE\u307E\u308B\u3088\u3046\u30DA\u30FC\u30B8\u3092\u7E2E\u3081\u3001Enter \u3067\u6539\u884C\u3057\u3001\u5165\u529B\u6B04\u3092\u30BF\u30C3\u30D7\u3059\u308B\u307E\u3067\u30AD\u30FC\u30DC\u30FC\u30C9\u3092\u958B\u304B\u305A\u3001768px \u672A\u6E80\u3067\u4F7F\u308F\u308C\u308B Harness \u306E\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u30C9\u30ED\u30EF\u30FC\u3092\u753B\u9762\u7AEF\u306E\u30B9\u30EF\u30A4\u30D7\u3067\u958B\u9589\u3067\u304D\u308B\u3088\u3046\u306B\u3057\u307E\u3059\u3002\u5909\u66F4\u306F\u958B\u3044\u3066\u3044\u308B\u3059\u3079\u3066\u306E\u30DA\u30FC\u30B8\u306B\u3059\u3050\u53CD\u6620\u3055\u308C\u307E\u3059\u3002",
+		  "settings.statusMobile": "Harness \u306F\u3053\u306E\u30DA\u30FC\u30B8\u3067\u30B9\u30DE\u30DB\u8868\u793A\u3092\u4F7F\u3063\u3066\u3044\u307E\u3059\uFF08\u5E45 {width}px\uFF09\u3002",
+		  "settings.statusDesktop": "Harness \u306F\u3053\u306E\u30DA\u30FC\u30B8\u3067\u30C7\u30B9\u30AF\u30C8\u30C3\u30D7\u8868\u793A\u3092\u4F7F\u3063\u3066\u3044\u307E\u3059\uFF08\u5E45 {width}px\uFF09\u3002768px \u672A\u6E80\u3067\u30B9\u30DE\u30DB\u8868\u793A\u306B\u5207\u308A\u66FF\u308F\u308A\u307E\u3059\u3002",
 		  "settings.enterKey": "\u5165\u529B\u6B04\u306E Enter \u30AD\u30FC",
 		  "settings.enterKeyHint": "\u30BF\u30C3\u30C1\u7AEF\u672B\u306E\u30B9\u30DE\u30DB\u8868\u793A\u3067\u3060\u3051\u52B9\u304D\u307E\u3059\u3002\u300C\u6539\u884C\u300D\u306E\u3068\u304D\u306F\u9001\u4FE1\u30DC\u30BF\u30F3\u3067\u9001\u308A\u307E\u3059\u3002\u5909\u63DB\u306E\u78BA\u5B9A\u3068\u30B3\u30DE\u30F3\u30C9\u30E1\u30CB\u30E5\u30FC\u3067\u306F\u5F93\u6765\u3069\u304A\u308A Enter \u304C\u52B9\u304D\u307E\u3059\u3002",
 		  "settings.enterKey.newline": "\u6539\u884C",
 		  "settings.enterKey.send": "\u9001\u4FE1",
 		  "settings.autoFocusComposer": "\u5165\u529B\u6B04\u306B\u81EA\u52D5\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3059\u308B",
-		  "settings.autoFocusComposerHint": "\u30BB\u30C3\u30B7\u30E7\u30F3\u3092\u958B\u3044\u305F\u3068\u304D\u3084\u5165\u529B\u6B04\u306E\u30DC\u30BF\u30F3\u3092\u62BC\u3057\u305F\u3068\u304D\u306B\u3001\u30C7\u30B9\u30AF\u30C8\u30C3\u30D7\u3068\u540C\u3058\u304F\u5165\u529B\u6B04\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u304C\u958B\u304D\u307E\u3059\u3002\u30AA\u30D5\u306B\u3059\u308B\u3068\u3001\u5165\u529B\u6B04\u3092\u30BF\u30C3\u30D7\u3059\u308B\u307E\u3067\u30AD\u30FC\u30DC\u30FC\u30C9\u306F\u958B\u304D\u307E\u305B\u3093\u3002",
+		  "settings.autoFocusComposerHint": "\u5165\u529B\u6B04\u306E\u30DC\u30BF\u30F3\u3084 Harness \u306E\u307B\u304B\u306E\u64CD\u4F5C\u3067\u5165\u529B\u6B04\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u304C\u79FB\u3063\u305F\u3068\u304D\u3001\u305D\u306E\u307E\u307E\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u3066\u30AD\u30FC\u30DC\u30FC\u30C9\u3092\u958B\u304D\u307E\u3059\u3002\u30AA\u30D5\u306B\u3059\u308B\u3068\u3001\u5165\u529B\u6B04\u3092\u30BF\u30C3\u30D7\u3059\u308B\u307E\u3067\u30AD\u30FC\u30DC\u30FC\u30C9\u306F\u958B\u304D\u307E\u305B\u3093\u3002",
 		  "settings.swipe": "\u30B9\u30EF\u30A4\u30D7\u3067\u30B5\u30A4\u30C9\u30D0\u30FC\u3092\u958B\u304F",
-		  "settings.swipeHint": "\u5DE6\u7AEF\u304B\u3089\u53F3\u3078\u30B9\u30EF\u30A4\u30D7\u3067\u958B\u304D\u3001\u5DE6\u3078\u30B9\u30EF\u30A4\u30D7\u3067\u9589\u3058\u307E\u3059\u3002",
+		  "settings.swipeHint": "\u5DE6\u7AEF\u304B\u3089\u53F3\u3078\u30B9\u30EF\u30A4\u30D7\u3067 Harness \u306E\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u30C9\u30ED\u30EF\u30FC\u3092\u958B\u304D\u3001\u5DE6\u3078\u30B9\u30EF\u30A4\u30D7\u3067\u9589\u3058\u307E\u3059\u3002",
 		  "settings.fitKeyboard": "\u30AD\u30FC\u30DC\u30FC\u30C9\u306B\u5408\u308F\u305B\u3066\u30DA\u30FC\u30B8\u3092\u7E2E\u3081\u308B",
 		  "settings.fitKeyboardHint": "\u30AA\u30F3\u30B9\u30AF\u30EA\u30FC\u30F3\u30AD\u30FC\u30DC\u30FC\u30C9\u306E\u8868\u793A\u4E2D\u3082\u3001\u30D8\u30C3\u30C0\u30FC\u3068\u5165\u529B\u6B04\u3092\u753B\u9762\u5185\u306B\u6B8B\u3057\u307E\u3059\u3002",
 		  "settings.blockPullToRefresh": "\u5F15\u3063\u5F35\u3063\u3066\u66F4\u65B0\u3092\u6B62\u3081\u308B",
@@ -390,34 +297,34 @@ window.__ModuleLoader__.load({
 		  "settings.writeError": "Host \u304C\u5909\u66F4\u3092\u62D2\u5426\u3057\u307E\u3057\u305F\u3002"
 		};
 
-		// src/client/mode.ts
+		// src/client/page.ts
 		var TOUCH_QUERY = "(hover: none) and (pointer: coarse)";
-		function widthQuery(breakpoint) {
-		  return `(max-width: ${breakpoint - 0.02}px)`;
+		function readPageState(drawer, touch) {
+		  return { mobile: drawer, touch };
 		}
-		function resolveMobile(mode, narrow) {
-		  if (mode === "always") return true;
-		  if (mode === "off") return false;
-		  return narrow;
+		function mediaSource(matchMedia, query) {
+		  const media = matchMedia(query);
+		  return {
+		    get: () => media.matches,
+		    subscribe(listener) {
+		      media.addEventListener("change", listener);
+		      return () => {
+		        media.removeEventListener("change", listener);
+		      };
+		    }
+		  };
 		}
-		function createModeStore(matchMedia, config) {
+		function createPageStore(signals) {
 		  const listeners = /* @__PURE__ */ new Set();
-		  const touch = matchMedia(TOUCH_QUERY);
-		  let breakpoint = config().breakpoint;
-		  let width = matchMedia(widthQuery(breakpoint));
 		  let state = { mobile: false, touch: false };
 		  const compute = () => {
-		    const next = {
-		      mobile: resolveMobile(config().mode, width.matches),
-		      touch: touch.matches
-		    };
+		    const next = readPageState(signals.drawer.get(), signals.touch.get());
 		    if (next.mobile === state.mobile && next.touch === state.touch) return;
 		    state = next;
 		    for (const listener of [...listeners]) listener();
 		  };
-		  const onChange = () => compute();
-		  touch.addEventListener("change", onChange);
-		  width.addEventListener("change", onChange);
+		  const offDrawer = signals.drawer.subscribe(compute);
+		  const offTouch = signals.touch.subscribe(compute);
 		  compute();
 		  return {
 		    getSnapshot: () => state,
@@ -427,36 +334,21 @@ window.__ModuleLoader__.load({
 		        listeners.delete(listener);
 		      };
 		    },
-		    refresh() {
-		      const next = config().breakpoint;
-		      if (next !== breakpoint) {
-		        width.removeEventListener("change", onChange);
-		        breakpoint = next;
-		        width = matchMedia(widthQuery(breakpoint));
-		        width.addEventListener("change", onChange);
-		      }
-		      compute();
-		    },
 		    dispose() {
-		      touch.removeEventListener("change", onChange);
-		      width.removeEventListener("change", onChange);
+		      offDrawer();
+		      offTouch();
+		      signals.drawer.dispose?.();
+		      signals.touch.dispose?.();
 		      listeners.clear();
 		    }
 		  };
 		}
 
 		// src/client/SettingsPage.tsx
-		var import_react3 = require("react");
-		var import_jsx_runtime3 = require("react/jsx-runtime");
+		var import_react = require("react");
+		var import_jsx_runtime = require("react/jsx-runtime");
 		var FIELDS = Object.keys(DEFAULT_CONFIG);
-		var MODES2 = ["auto", "always", "off"];
 		var ENTER_KEYS2 = ["newline", "send"];
-		function parseBreakpoint(text) {
-		  const trimmed = text.trim();
-		  if (!/^\d+$/.test(trimmed)) return void 0;
-		  const value = Number(trimmed);
-		  return value >= MIN_BREAKPOINT && value <= MAX_BREAKPOINT ? value : void 0;
-		}
 		var sectionStyle = {
 		  maxWidth: 680,
 		  padding: "4px 0 32px",
@@ -510,17 +402,6 @@ window.__ModuleLoader__.load({
 		  paddingTop: 4,
 		  borderTop: "1px solid var(--dsw-alias-border-l2)"
 		};
-		var inputStyle = {
-		  width: 96,
-		  boxSizing: "border-box",
-		  padding: "6px 10px",
-		  borderRadius: 8,
-		  border: "1px solid var(--dsw-alias-border-l2)",
-		  background: "var(--dsw-specific-input-major, var(--dsw-alias-bg-layer-1))",
-		  color: "inherit",
-		  font: "inherit",
-		  outline: "none"
-		};
 		var buttonStyle = {
 		  marginTop: 26,
 		  padding: "8px 12px",
@@ -536,118 +417,66 @@ window.__ModuleLoader__.load({
 		  fontSize: 13,
 		  lineHeight: 1.6
 		};
-		function useObservable2(observable) {
-		  const subscribe = (0, import_react3.useCallback)(
+		function useObservable(observable) {
+		  const subscribe = (0, import_react.useCallback)(
 		    (listener) => observable.subscribe(listener),
 		    [observable]
 		  );
-		  const getSnapshot = (0, import_react3.useCallback)(() => observable.getSnapshot(), [observable]);
-		  return (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+		  const getSnapshot = (0, import_react.useCallback)(() => observable.getSnapshot(), [observable]);
+		  return (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
 		}
 		function subscribeResize(listener) {
 		  window.addEventListener("resize", listener);
 		  return () => window.removeEventListener("resize", listener);
 		}
 		function useViewportWidth() {
-		  return (0, import_react3.useSyncExternalStore)(
+		  return (0, import_react.useSyncExternalStore)(
 		    subscribeResize,
 		    () => Math.round(window.innerWidth),
 		    () => 0
 		  );
 		}
-		function SettingsPage({ form, mode, t }) {
-		  const subscribe = (0, import_react3.useCallback)((listener) => form.subscribe(listener), [form]);
-		  const getSnapshot = (0, import_react3.useCallback)(() => form.getSnapshot(), [form]);
-		  const snapshot = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+		function SettingsPage({ form, page, t }) {
+		  const subscribe = (0, import_react.useCallback)((listener) => form.subscribe(listener), [form]);
+		  const getSnapshot = (0, import_react.useCallback)(() => form.getSnapshot(), [form]);
+		  const snapshot = (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
 		  const config = normalizeConfig(snapshot.value);
-		  const state = useObservable2(mode);
+		  const state = useObservable(page);
 		  const width = useViewportWidth();
-		  const [draft, setDraft] = (0, import_react3.useState)(String(config.breakpoint));
-		  const [writeError, setWriteError] = (0, import_react3.useState)(false);
-		  (0, import_react3.useEffect)(() => {
-		    setDraft(String(config.breakpoint));
-		  }, [config.breakpoint]);
+		  const [writeFailed, setWriteFailed] = (0, import_react.useState)(false);
 		  const write = (field, value) => {
-		    void form.set(field, value).then((accepted) => setWriteError(!accepted)).catch(() => setWriteError(true));
-		  };
-		  const parsed = parseBreakpoint(draft);
-		  const commitBreakpoint = () => {
-		    if (parsed === void 0) return;
-		    if (parsed !== config.breakpoint) write("breakpoint", parsed);
-		  };
-		  const onBreakpointKeyDown = (event) => {
-		    if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
-		    event.preventDefault();
-		    event.currentTarget.blur();
+		    void form.set(field, value).then((accepted) => setWriteFailed(!accepted)).catch(() => setWriteFailed(true));
 		  };
 		  const reset = () => {
-		    void Promise.all(FIELDS.map((field) => form.unset(field))).then((results) => setWriteError(results.some((accepted) => !accepted))).catch(() => setWriteError(true));
+		    void Promise.all(FIELDS.map((field) => form.unset(field))).then((results) => setWriteFailed(results.some((accepted) => !accepted))).catch(() => setWriteFailed(true));
 		  };
 		  if (snapshot.status === "unavailable") {
-		    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: mutedStyle, children: t("settings.unavailable") });
+		    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: mutedStyle, children: t("settings.unavailable") });
 		  }
 		  const disabled = snapshot.writable === false;
-		  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: sectionStyle, className: "dsh-mobile-settings", children: [
-		    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: headingStyle, children: t("settings.title") }),
-		    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: introStyle, children: t("settings.description") }),
-		    width > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: statusStyle, role: "status", children: state.mobile ? t("settings.statusMobile", { width }) : t("settings.statusDesktop", { width }) }) : null,
-		    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: fieldStyle, children: [
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: labelStyle, children: t("settings.mode") }),
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionStyle, className: "dsh-mobile-settings", children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: headingStyle, children: t("settings.title") }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: introStyle, children: t("settings.description") }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: statusStyle, role: "status", children: state.mobile ? t("settings.statusMobile", { width }) : t("settings.statusDesktop", { width }) }),
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: labelStyle, children: t("settings.enterKey") }),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 		        Segmented,
 		        {
-		          label: t("settings.mode"),
-		          options: MODES2.map((value) => ({ value, label: t(`settings.mode.${value}`) })),
-		          value: config.mode,
+		          label: t("settings.enterKey"),
+		          options: ENTER_KEYS2.map((value) => ({
+		            value,
+		            label: t(`settings.enterKey.${value}`)
+		          })),
+		          value: config.enterKey,
 		          disabled,
-		          onChange: (next) => write("mode", next)
+		          onChange: (next) => write("enterKey", next)
 		        }
 		      ),
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: hintStyle, children: t("settings.modeHint") })
-		    ] }),
-		    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: fieldStyle, children: [
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: labelStyle, htmlFor: "dsh-mobile-breakpoint", children: t("settings.breakpoint") }),
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-		          "input",
-		          {
-		            id: "dsh-mobile-breakpoint",
-		            type: "text",
-		            inputMode: "numeric",
-		            autoComplete: "off",
-		            spellCheck: false,
-		            value: draft,
-		            disabled,
-		            "aria-invalid": parsed === void 0,
-		            style: inputStyle,
-		            onChange: (event) => setDraft(event.target.value),
-		            onBlur: commitBreakpoint,
-		            onKeyDown: onBreakpointKeyDown
-		          }
-		        ),
-		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: mutedStyle, children: "px" })
-		      ] }),
-		      parsed === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: errorStyle, children: t("settings.breakpointInvalid") }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: hintStyle, children: t("settings.breakpointHint") })
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: hintStyle, children: t("settings.enterKeyHint") })
 		    ] }),
-		    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: groupStyle, children: [
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: fieldStyle, children: [
-		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: labelStyle, children: t("settings.enterKey") }),
-		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-		          Segmented,
-		          {
-		            label: t("settings.enterKey"),
-		            options: ENTER_KEYS2.map((value) => ({
-		              value,
-		              label: t(`settings.enterKey.${value}`)
-		            })),
-		            value: config.enterKey,
-		            disabled,
-		            onChange: (next) => write("enterKey", next)
-		          }
-		        ),
-		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: hintStyle, children: t("settings.enterKeyHint") })
-		      ] }),
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: groupStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 		        Toggle,
 		        {
 		          label: t("settings.autoFocusComposer"),
@@ -657,7 +486,7 @@ window.__ModuleLoader__.load({
 		          onChange: (next) => write("autoFocusComposer", next)
 		        }
 		      ),
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 		        Toggle,
 		        {
 		          label: t("settings.swipe"),
@@ -667,7 +496,7 @@ window.__ModuleLoader__.load({
 		          onChange: (next) => write("swipe", next)
 		        }
 		      ),
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 		        Toggle,
 		        {
 		          label: t("settings.fitKeyboard"),
@@ -677,7 +506,7 @@ window.__ModuleLoader__.load({
 		          onChange: (next) => write("fitKeyboard", next)
 		        }
 		      ),
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 		        Toggle,
 		        {
 		          label: t("settings.blockPullToRefresh"),
@@ -688,9 +517,9 @@ window.__ModuleLoader__.load({
 		        }
 		      )
 		    ] }),
-		    disabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { ...hintStyle, marginTop: 20 }, children: t("settings.readOnly") }) : null,
-		    writeError ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { ...errorStyle, marginTop: 20 }, children: t("settings.writeError") }) : null,
-		    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: buttonStyle, disabled, onClick: reset, children: t("settings.reset") })
+		    disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { ...hintStyle, marginTop: 20 }, children: t("settings.readOnly") }) : null,
+		    writeFailed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { ...errorStyle, marginTop: 20 }, children: t("settings.writeError") }) : null,
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: buttonStyle, disabled, onClick: reset, children: t("settings.reset") })
 		  ] });
 		}
 		function Segmented({
@@ -700,7 +529,7 @@ window.__ModuleLoader__.load({
 		  disabled,
 		  onChange
 		}) {
-		  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("fieldset", { className: "dsh-mobile-segmented", "aria-label": label, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", { className: "dsh-mobile-segmented", "aria-label": label, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 		    "button",
 		    {
 		      type: "button",
@@ -716,12 +545,12 @@ window.__ModuleLoader__.load({
 		  )) });
 		}
 		function Toggle({ label, hint, checked, disabled, onChange }) {
-		  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: rowStyle, children: [
-		    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }, children: [
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: labelStyle, children: label }),
-		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: hintStyle, children: hint })
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: rowStyle, children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: labelStyle, children: label }),
+		      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: hintStyle, children: hint })
 		    ] }),
-		    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 		      "button",
 		      {
 		        type: "button",
@@ -734,7 +563,7 @@ window.__ModuleLoader__.load({
 		          event.stopPropagation();
 		          onChange(!checked);
 		        },
-		        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dsh-mobile-thumb" })
+		        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsh-mobile-thumb" })
 		      }
 		    )
 		  ] });
@@ -746,69 +575,8 @@ window.__ModuleLoader__.load({
 		var NO_PULL_ATTRIBUTE = "data-dsh-no-pull";
 		var M = `html[${MOBILE_ATTRIBUTE}]`;
 		var T = `html[${TOUCH_ATTRIBUTE}]`;
-		var SIDEBAR = `${M} ${FRAME} > :has(> [data-slot="sidebar"])`;
 		var SETTINGS = `${M} [data-shortcut-modal="settings"][role="dialog"]`;
 		var MOBILE_CSS = `
-		.dsh-mobile-menu {
-		  box-sizing: border-box;
-		  flex: none;
-		  width: 34px;
-		  height: 34px;
-		  margin: -2px 2px -2px -4px;
-		  padding: 0;
-		  border: none;
-		  border-radius: var(--dsw-radius-md);
-		  background: transparent;
-		  color: var(--dsw-alias-label-primary);
-		  font-family: inherit;
-		  display: inline-flex;
-		  align-items: center;
-		  justify-content: center;
-		  cursor: pointer;
-		  touch-action: manipulation;
-		  -webkit-tap-highlight-color: transparent;
-		}
-		.dsh-mobile-menu[hidden] {
-		  display: none;
-		}
-		.dsh-mobile-menu:active {
-		  background: var(--dsw-alias-interactive-bg-hover);
-		}
-		@media (hover: hover) {
-		  .dsh-mobile-menu:hover {
-		    background: var(--dsw-alias-interactive-bg-hover);
-		  }
-		}
-		.dsh-mobile-menu:focus-visible {
-		  outline: var(--dsw-focus-ring-width) solid
-		    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
-		  outline-offset: -2px;
-		}
-		.dsh-mobile-floating {
-		  position: absolute;
-		  top: 8px;
-		  left: 8px;
-		  width: 40px;
-		  height: 40px;
-		  margin: 0;
-		  border: 0.5px solid var(--dsw-alias-border-l3);
-		  border-radius: 999px;
-		  background: var(--dsw-alias-button-elevated-fill, var(--dsw-alias-bg-layer-1));
-		  box-shadow: var(--dsw-elevation-soft, 0 2px 8px rgb(0 0 0 / 12%));
-		}
-		.dsh-mobile-scrim {
-		  position: absolute;
-		  inset: 0;
-		  background: var(--dsw-alias-bg-mask-1, rgb(0 0 0 / 40%));
-		  opacity: 0;
-		  pointer-events: none;
-		  transition: opacity 0.2s ease;
-		  -webkit-tap-highlight-color: transparent;
-		}
-		.dsh-mobile-scrim[data-open] {
-		  opacity: 1;
-		  pointer-events: auto;
-		}
 		.dsh-mobile-segmented {
 		  box-sizing: border-box;
 		  min-width: 0;
@@ -887,9 +655,6 @@ window.__ModuleLoader__.load({
 		  transform: translate(16px);
 		}
 
-		${M} {
-		  --dsh-frame-top-clearance: 44px;
-		}
 		${M} body {
 		  height: var(--dsh-mobile-vvh, 100dvh);
 		  overflow: hidden;
@@ -904,67 +669,17 @@ window.__ModuleLoader__.load({
 		  overscroll-behavior: none;
 		}
 
-		${M} ${FRAME} {
-		  grid-template-columns: 0px minmax(0, 1fr) 0px !important;
-		}
-		${M} ${FRAME} > :has(> [data-slot="main"]) {
-		  grid-column: 2;
-		  grid-row: 1;
-		}
-		${M} ${FRAME} > [data-rightbar-col] {
-		  grid-column: 3;
-		  grid-row: 1;
-		}
-		${M} ${FRAME} > [data-side] {
-		  display: none;
-		}
-		${SIDEBAR} {
-		  position: absolute;
-		  z-index: 25;
-		  top: 0;
-		  bottom: 0;
-		  left: 0;
-		  box-sizing: border-box;
-		  width: min(86vw, 340px);
-		  padding-bottom: env(safe-area-inset-bottom);
-		  border-right: none;
-		  box-shadow: var(--dsw-elevation-prominent, 0 8px 32px rgb(0 0 0 / 20%));
-		  overscroll-behavior: contain;
-		  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
-		}
-		${M} ${FRAME}[data-sidebar-collapsed] > :has(> [data-slot="sidebar"]) {
-		  transform: translateX(calc(-100% - 32px));
-		  visibility: hidden;
-		  box-shadow: none;
-		  transition:
-		    transform 0.2s cubic-bezier(0.4, 0, 1, 1),
-		    visibility 0s linear 0.2s,
-		    box-shadow 0s linear 0.2s;
-		}
-
-		${M} header:has(> [data-conversation-header-leading]) {
-		  min-height: 0;
-		  padding-top: 6px;
-		  padding-left: 8px;
-		  padding-right: 12px;
-		}
-		${M} [data-conversation-header-corner] {
-		  margin-right: 0;
-		}
-		${M} [data-conversation-tabs] {
-		  gap: 20px;
-		}
 		${M} [data-conversation-content] {
 		  --dsh-composer-side-clearance: 8px;
 		}
-		${M} [data-width-handle] {
-		  display: none;
+		${M} div[data-sidebar-drawer] > :has(> [data-slot="sidebar"]) {
+		  padding-bottom: env(safe-area-inset-bottom);
 		}
 		${M} [data-composer-seat] {
 		  --dsh-composer-text-max-height: min(336px, calc(var(--dsh-mobile-vvh, 100dvh) * 0.3));
 		  padding-bottom: env(safe-area-inset-bottom);
 		}
-		html[${MOBILE_ATTRIBUTE}][data-dsh-keyboard] [data-composer-seat] {
+		${M}[data-dsh-keyboard] [data-composer-seat] {
 		  padding-bottom: 0;
 		}
 
@@ -1056,9 +771,8 @@ window.__ModuleLoader__.load({
 		}
 
 		@media (prefers-reduced-motion: reduce) {
-		  .dsh-mobile-scrim,
-		  ${SIDEBAR} {
-		    transition: none !important;
+		  .dsh-mobile-thumb {
+		    transition: none;
 		  }
 		}
 		`;
@@ -1253,11 +967,9 @@ window.__ModuleLoader__.load({
 		}
 
 		// src/client/index.tsx
-		var import_jsx_runtime4 = require("react/jsx-runtime");
+		var import_jsx_runtime2 = require("react/jsx-runtime");
 		var inject = ["slots", "locale", "configForms", "layout"];
 		var PLUGIN_ID = "@1outres/dsh-plugin-mobile";
-		var HEADER_SLOT = "conversation.header.leading";
-		var OVERLAY_SLOT = "shell.overlay";
 		var SETTINGS_SLOT = "settings.section";
 		function apply(ctx) {
 		  ctx.effect(() => ctx.locale.register(NAMESPACE, { en, zh, ja }), "mobile: dictionaries");
@@ -1275,18 +987,18 @@ window.__ModuleLoader__.load({
 		  ctx.effect(() => installMeta(document), "mobile: viewport metadata");
 		  const form = ctx.configForms.get(NAMESPACE);
 		  let config = normalizeConfig(form.getSnapshot().value);
-		  const mode = createModeStore(
-		    (query) => window.matchMedia(query),
-		    () => config
-		  );
-		  ctx.effect(() => () => mode.dispose(), "mobile: layout mode");
+		  const page = createPageStore({
+		    drawer: createDrawerSource(document, observeMutations),
+		    touch: mediaSource((query) => window.matchMedia(query), TOUCH_QUERY)
+		  });
+		  ctx.effect(() => () => page.dispose(), "mobile: page state");
 		  ctx.effect(() => {
 		    const root = document.documentElement;
 		    let stopViewport;
 		    const sync = () => {
-		      const state = mode.getSnapshot();
+		      const state = page.getSnapshot();
 		      root.toggleAttribute(MOBILE_ATTRIBUTE, state.mobile);
-		      root.toggleAttribute(TOUCH_ATTRIBUTE, state.touch && config.mode !== "off");
+		      root.toggleAttribute(TOUCH_ATTRIBUTE, state.touch);
 		      root.toggleAttribute(NO_PULL_ATTRIBUTE, state.mobile && config.blockPullToRefresh);
 		      const fit = state.mobile && config.fitKeyboard;
 		      if (fit && stopViewport === void 0) {
@@ -1296,15 +1008,14 @@ window.__ModuleLoader__.load({
 		        stopViewport = void 0;
 		      }
 		    };
-		    const offMode = mode.subscribe(sync);
+		    const offPage = page.subscribe(sync);
 		    const offForm = form.subscribe(() => {
 		      config = normalizeConfig(form.getSnapshot().value);
-		      mode.refresh();
 		      sync();
 		    });
 		    sync();
 		    return () => {
-		      offMode();
+		      offPage();
 		      offForm();
 		      stopViewport?.();
 		      root.removeAttribute(MOBILE_ATTRIBUTE);
@@ -1319,24 +1030,23 @@ window.__ModuleLoader__.load({
 		      console.warn("mobile: could not toggle the sidebar", error);
 		    }
 		  };
-		  const face = { mode, toggle };
 		  ctx.effect(
 		    () => installEnterNewline(window, () => {
-		      const state = mode.getSnapshot();
+		      const state = page.getSnapshot();
 		      return state.mobile && state.touch && config.enterKey === "newline";
 		    }),
 		    "mobile: Enter adds a line"
 		  );
 		  ctx.effect(
 		    () => installFocusGuard(document, () => {
-		      const state = mode.getSnapshot();
+		      const state = page.getSnapshot();
 		      return state.mobile && state.touch && !config.autoFocusComposer;
 		    }),
 		    "mobile: keyboard stays closed until the composer is tapped"
 		  );
 		  ctx.effect(
 		    () => installSwipe(document, {
-		      enabled: () => mode.getSnapshot().mobile && config.swipe,
+		      enabled: () => page.getSnapshot().mobile && config.swipe,
 		      expanded: () => isExpanded(findFrame(document)),
 		      blocked: (target) => swipeBlocked(
 		        target,
@@ -1347,27 +1057,7 @@ window.__ModuleLoader__.load({
 		    }),
 		    "mobile: drawer swipe"
 		  );
-		  ctx.effect(
-		    () => ctx.slots.inject(
-		      HEADER_SLOT,
-		      () => ctx.slots.register(
-		        { name: HEADER_SLOT, locale: NAMESPACE, inject: () => face },
-		        HeaderMenuButton
-		      )
-		    ),
-		    "mobile: header menu button"
-		  );
-		  ctx.effect(
-		    () => ctx.slots.inject(
-		      OVERLAY_SLOT,
-		      () => ctx.slots.register(
-		        { name: OVERLAY_SLOT, id: "mobile-drawer", locale: NAMESPACE, inject: () => face },
-		        DrawerOverlay
-		      )
-		    ),
-		    "mobile: drawer scrim"
-		  );
-		  const Page = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SettingsPage, { form, mode, t });
+		  const Page = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SettingsPage, { form, page, t });
 		  ctx.effect(
 		    () => ctx.configForms.whileServed(
 		      [NAMESPACE],

package/lib/index.js

@@ -2,20 +2,18 @@
 import z from "@deepseek-ai/schemastery";
 var name = "mobile";
 var Config = z.object({
-  mode: z.union(["auto", "always", "off"]).default("auto").description(
-    "When to use the phone layout: auto below the breakpoint width, always, or never (off)."
-  ).volatile(),
-  breakpoint: z.natural().min(360).max(1024).default(768).description("Viewport width in CSS pixels below which auto mode uses the phone layout.").volatile(),
   enterKey: z.union(["newline", "send"]).default("newline").description(
     "What Enter does in the composer on a touch screen in the phone layout: add a line (send with the button) or send."
   ).volatile(),
-  swipe: z.boolean().default(true).description("Open the sidebar by swiping right from the left edge, close it by swiping left.").volatile(),
+  swipe: z.boolean().default(true).description(
+    "Open the Harness navigation drawer by swiping right from the left edge, close it by swiping left."
+  ).volatile(),
   fitKeyboard: z.boolean().default(true).description(
     "Fit the page to the area the on-screen keyboard leaves visible, so the header and the composer stay on screen."
   ).volatile(),
   blockPullToRefresh: z.boolean().default(true).description("Stop pull-to-refresh and overscroll bounce from reloading or moving the page.").volatile(),
   autoFocusComposer: z.boolean().default(false).description(
-    "Let the composer take focus by itself on a touch screen in the phone layout, as on desktop: when a session opens or a composer button is pressed. Off keeps the on-screen keyboard closed until you tap the input."
+    "Let the Harness focus the composer on a touch screen in the phone layout, as on desktop, when a composer control or another action moves focus to it. Off keeps the on-screen keyboard closed until you tap the input."
   ).volatile()
 });
 function apply(ctx) {

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Mobile",
-    "description": "Makes the Web UI comfortable on a phone. Below a set width the sidebar becomes a drawer opened from a menu button or an edge swipe, the conversation fits the visible area while the on-screen keyboard is up, Enter adds a line instead of sending, and controls avoid notches and the home indicator."
+    "description": "Adds phone refinements to the Harness Web UI: fits the page to the on-screen keyboard, makes Enter add a line, keeps the keyboard closed until the composer is tapped, adds edge swipes to the Harness navigation drawer, and respects notches and touch."
   }
 }

package/locale/ja.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "モバイル",
-    "description": "スマートフォンで Web UI を快適に使えるようにします。設定した幅より狭い画面では、サイドバーをメニューボタンか画面端からのスワイプで開くドロワーに変えます。オンスクリーンキーボードの表示中は会話を見える範囲に収め、Enter は送信せずに改行します。ノッチやホームインジケーターも避けて配置します。"
+    "description": "Harness の Web UI にスマートフォン向けの調整を足します。オンスクリーンキーボードの上に収まるようページを縮め、Enter で改行し、入力欄をタップするまでキーボードを開かず、Harness のナビゲーションドロワーを画面端のスワイプで開閉できるようにします。ノッチやタッチ操作にも合わせます。"
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "移动端",
-    "description": "让 Web UI 在手机上好用。屏幕窄于设定宽度时，侧边栏变为抽屉，可通过菜单按钮或从屏幕边缘滑动打开；屏幕键盘弹出时会话区域适配可见范围，Enter 换行而不发送；界面避开刘海和主屏幕指示条。"
+    "description": "在 Harness 的 Web UI 上补充手机体验：页面适配屏幕键盘上方的可见区域，Enter 换行，点按输入框之前不弹出键盘，屏幕端部的滑动可开闭 Harness 的导航抽屉，并避开刘海等安全区域。"
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1outres/dsh-plugin-mobile",
-  "version": "0.6.0",
-  "description": "Makes the DeepSeek Harness Web UI work on phones: the sidebar becomes a swipeable drawer, the composer follows the on-screen keyboard and Enter adds a line, and the layout respects notches and touch.",
+  "version": "0.7.0",
+  "description": "Adds phone refinements to the DeepSeek Harness Web UI: fits the page to the on-screen keyboard, makes Enter add a line, keeps the keyboard closed until the composer is tapped, adds edge swipes to the Harness navigation drawer, and respects notches and touch.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/1outres/my-dsh-plugins.git",
@@ -34,14 +34,14 @@
     "access": "public"
   },
   "engines": {
-    "dsh": ">=0.2.1-rc.5 <0.3.0",
+    "dsh": ">=0.2.2-rc.1 <0.3.0",
     "node": ">=22"
   },
   "dependencies": {
     "@deepseek-ai/schemastery": "~3.18.5"
   },
   "peerDependencies": {
-    "@deepseek-ai/cordis": "~4.0.5",
+    "@deepseek-ai/cordis": "~4.1.0",
     "react": "^18.2.0"
   },
   "dsh": {