dsh-pocket 0.1.0 → 1.0.0

package/client/client.js

@@ -30,7 +30,7 @@ __export(index_exports, {
   redactStatus: () => redactStatus
 });
 module.exports = __toCommonJS(index_exports);
-var import_react = require("react");
+var import_react2 = require("react");
 
 // client/api.js
 var POCKET_RPC_CHANNEL = "/dsh-pocket";
@@ -52,9 +52,1195 @@ function redactStatus(s) {
   };
 }
 
+// client/mobile/MobileNavToggle.tsx
+var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+function MobileNavToggle({ toggleSidebar, t }) {
+  const toggleExplorer = () => {
+    const frame = document.querySelector('[data-mobile-nav="frame"]');
+    if (frame === null) return;
+    if (frame.hasAttribute("data-aionui-explorer-open")) {
+      frame.removeAttribute("data-aionui-explorer-open");
+    } else {
+      frame.setAttribute("data-aionui-explorer-open", "");
+    }
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "data-mobile-nav": "toggle",
+      "aria-label": t("open"),
+      title: t("open"),
+      onClick: () => toggleSidebar()
+    },
+    /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconPanelLeftOutline16, { size: 16 })
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "data-mobile-nav": "files",
+      "aria-label": t("files"),
+      title: t("files"),
+      onClick: toggleExplorer
+    },
+    /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconFolderOpenOutline16, { size: 16 })
+  ));
+}
+
+// client/mobile/MobileNavOverlay.tsx
+var import_react = require("react");
+var import_dsh_client_ui_primitives2 = require("@deepseek-ai/dsh-client-ui-primitives");
+var MOBILE_QUERY = "(max-width: 1023px)";
+function useMobile() {
+  const [mobile, setMobile] = (0, import_react.useState)(() => window.matchMedia(MOBILE_QUERY).matches);
+  (0, import_react.useEffect)(() => {
+    const query = window.matchMedia(MOBILE_QUERY);
+    const onChange = (event) => setMobile(event.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  return mobile;
+}
+function findFrame() {
+  return document.querySelector("[data-shell-overlay]")?.parentElement ?? null;
+}
+function MobileNavOverlay({ toggleSidebar, t }) {
+  const mobile = useMobile();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [fabVisible, setFabVisible] = (0, import_react.useState)(false);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!mobile) {
+      setOpen(false);
+      return;
+    }
+    const frame = findFrame();
+    if (frame === null) return;
+    frame.setAttribute("data-mobile-nav", "frame");
+    const sync = () => setOpen(!frame.hasAttribute("data-sidebar-collapsed"));
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(frame, { attributes: true, attributeFilter: ["data-sidebar-collapsed"] });
+    return () => {
+      observer.disconnect();
+      frame.removeAttribute("data-mobile-nav");
+    };
+  }, [mobile]);
+  (0, import_react.useEffect)(() => {
+    if (!mobile) {
+      setFabVisible(false);
+      return;
+    }
+    const sync = () => setFabVisible(document.querySelector('[data-phase="active"]') === null);
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["data-phase"]
+    });
+    return () => observer.disconnect();
+  }, [mobile]);
+  (0, import_react.useEffect)(() => {
+    if (!mobile || !open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" && document.querySelector('[aria-modal="true"]') === null) toggleSidebar();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [mobile, open, toggleSidebar]);
+  (0, import_react.useEffect)(() => {
+    if (!mobile || !open) return;
+    const onDrawerClick = (event) => {
+      if (document.querySelector('[aria-modal="true"]') !== null) return;
+      const target = event.target;
+      if (target === null) return;
+      const drawer = document.querySelector('[data-mobile-nav="frame"] > :first-child');
+      if (drawer === null || !drawer.contains(target)) return;
+      if (target.closest('[class*="sessionRow"] button') !== null) return;
+      const navigates = target.closest(
+        'button[data-dsh-taskboard-entry], button[data-dsh-ssh-entry], [class*="newSession"], [class*="sessionRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"]'
+      );
+      if (navigates !== null) toggleSidebar();
+    };
+    document.addEventListener("click", onDrawerClick, true);
+    return () => document.removeEventListener("click", onDrawerClick, true);
+  }, [mobile, open, toggleSidebar]);
+  if (!mobile) return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, open && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-mobile-nav": "backdrop",
+      role: "button",
+      "aria-label": t("backdrop"),
+      onClick: () => toggleSidebar()
+    }
+  ), fabVisible && !open && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "data-mobile-nav": "fab",
+      "aria-label": t("open"),
+      title: t("open"),
+      onClick: () => toggleSidebar()
+    },
+    /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives2.IconPanelLeftOutline16, { size: 18 })
+  ));
+}
+
+// client/mobile/MobileDrawerFooter.tsx
+var import_dsh_client_ui_primitives3 = require("@deepseek-ai/dsh-client-ui-primitives");
+function MobileDrawerFooter({ useSessions, downloadSessionLog, toggleSidebar, t }) {
+  const sessionId = useSessions((state) => state.current);
+  const openExplorer = () => {
+    document.querySelector('[data-mobile-nav="frame"]')?.setAttribute("data-aionui-explorer-open", "");
+    toggleSidebar();
+  };
+  return /* @__PURE__ */ React.createElement("div", { "data-mobile-nav": "drawer-actions" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "data-mobile-nav": "explorer",
+      "aria-label": t("files"),
+      title: t("files"),
+      onClick: openExplorer
+    },
+    /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives3.IconPanelLeftOutline16, { size: 14 }),
+    /* @__PURE__ */ React.createElement("span", null, t("files"))
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "data-mobile-nav": "session-log",
+      "aria-label": t("sessionLog"),
+      title: t("sessionLog"),
+      disabled: sessionId === void 0,
+      onClick: () => {
+        if (sessionId !== void 0) downloadSessionLog(sessionId);
+      }
+    },
+    /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives3.IconDownloadOutline16, { size: 14 }),
+    /* @__PURE__ */ React.createElement("span", null, t("sessionLog"))
+  ));
+}
+
+// client/mobile/mobile.css.ts
+var MOBILE_CSS = `
+/* ---------- base control styles (rendered at any width, hidden where unused) ---------- */
+
+[data-mobile-nav="toggle"],
+[data-mobile-nav="files"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: none;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, inherit);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-mobile-nav="toggle"]:hover,
+[data-mobile-nav="files"]:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
+}
+[data-mobile-nav="toggle"]:focus-visible,
+[data-mobile-nav="files"]:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary, #4f6ef7);
+  outline-offset: 1px;
+}
+
+/* Drawer footer actions: the relocated Session log download plus the Files
+   action that opens the dsh-web-ui explorer sheet. */
+[data-mobile-nav="drawer-actions"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+[data-mobile-nav="session-log"],
+[data-mobile-nav="explorer"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12));
+  border-radius: 12px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, inherit);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-mobile-nav="session-log"]:hover:not(:disabled),
+[data-mobile-nav="explorer"]:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
+}
+[data-mobile-nav="session-log"]:disabled {
+  color: var(--dsw-alias-label-dimmed, rgba(0, 0, 0, .35));
+  cursor: default;
+}
+
+/* Floating fallback button (hero / blank phases without a session header).
+   The top clears the camera band below the status bar; when the client has
+   set viewport-fit=cover the safe-area inset moves it below the notch too. */
+[data-mobile-nav="fab"] {
+  position: absolute;
+  top: calc(env(safe-area-inset-top, 0px) + 72px);
+  left: 10px;
+  z-index: 21;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12));
+  border-radius: 50%;
+  background: var(--dsw-alias-button-floating-fill, #ffffff);
+  color: var(--dsw-alias-label-primary, inherit);
+  cursor: pointer;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
+  -webkit-tap-highlight-color: transparent;
+}
+[data-mobile-nav="fab"]:hover {
+  background: var(--dsw-alias-button-floating-hover, rgba(0, 0, 0, .08));
+}
+[data-mobile-nav="fab"]:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary, #4f6ef7);
+  outline-offset: 2px;
+}
+
+/* Dimmed backdrop under the open drawer; above every column, below the drawer. */
+[data-mobile-nav="backdrop"] {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  background: rgba(0, 0, 0, .45);
+  cursor: pointer;
+  animation: dsh-mobile-nav-fade .2s var(--ds-ease-in-out, ease-in-out);
+  -webkit-tap-highlight-color: transparent;
+}
+@keyframes dsh-mobile-nav-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+/* Settings sheet entrance: the official dialog mounts with no animation at
+   all, so it snaps in. Fade + slight rise/scale reads as a proper sheet. */
+@keyframes dsh-mobile-nav-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+/* Preview sheet rise: the aionui preview column opens as a bottom sheet. */
+@keyframes dsh-mobile-nav-sheet-up {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ---------- mobile-only layout ---------- */
+
+@media (max-width: 1023px) {
+  /* --- Phone chrome ---
+     The system status bar stays visible (no fullscreen). Two adjustments
+     make it behave:
+     - touch-action: manipulation kills double-tap-to-zoom (and the 300ms
+       tap delay) while keeping pan and pinch zoom; the client also
+       suppresses legacy-iOS gesturestart as a fallback.
+     - With the client's viewport-fit=cover, env(safe-area-inset-top) is the
+       status bar / notch height; the rules below push the app content below
+       it so the status bar never covers anything. Off notched phones (or in
+       a normal browser tab where the layout viewport already sits below the
+       status bar) the inset is 0 and nothing shifts. */
+  html,
+  body {
+    touch-action: manipulation !important;
+  }
+
+  /* AppFrame: the drawer takes the sidebar column out of grid flow, so the
+     remaining in-flow items (center, details) land in tracks 1..2: give the
+     center every pixel and keep the details track at zero. The top padding
+     clears the status bar / notch for every in-flow surface (session header,
+     messages, composer); the absolutely-positioned drawer is unaffected (its
+     containing block is the frame's padding box, i.e. still the frame top). */
+  [data-mobile-nav="frame"] {
+    position: relative !important;
+    grid-template-columns: minmax(0, 1fr) 0 0 !important;
+    padding-top: env(safe-area-inset-top, 0px) !important;
+  }
+
+  /* The sidebar column (first grid child) becomes a left drawer. The drawer
+     hugs the sidebar content exactly (the wide sidebar carries an inline
+     width, ~280px): a fixed 92vw box would leave a white strip where the
+     container background shows beside the content.
+     Closed state: translateX(-110%) \u2014 more than -100% of the max-content
+     width \u2014 guarantees the whole drawer (and its shadow, had it one) leaves
+     the viewport. A mere -100% leaves a sliver on screen; -105% (as used
+     before) left 14px of the drawer plus a long 32px-blur shadow gradient
+     visible along the left edge of the main UI. No box-shadow at all: the
+     dimmed backdrop already separates drawer from content. */
+  [data-mobile-nav="frame"] > :first-child {
+    position: absolute !important;
+    inset: 0 auto 0 0 !important;
+    width: max-content !important;
+    max-width: 92vw !important;
+    z-index: 40 !important;
+    transform: translateX(-110%);
+    transition: transform .28s var(--ds-ease-in-out, ease-in-out);
+    background: var(--dsw-alias-bg-base, #ffffff);
+    /* Keep the drawer's own content below the status bar / notch: the drawer
+       spans the full frame height (its absolute containing block is the
+       frame's padding box, so the frame's own safe-area padding does NOT
+       reach it). The drawer background paints the status-bar strip, which
+       the client's theme-color meta matches, so the strip reads seamless. */
+    padding-top: env(safe-area-inset-top, 0px) !important;
+    /* Kill the official sidebarCol right border: with the backdrop the edge
+       reads cleanly, and the settings dialog (width:100% of this box) stays
+       pixel-flush with the drawer. */
+    border-right: none !important;
+  }
+
+  /* Expanded state (frame without data-sidebar-collapsed) slides the drawer in.
+     The open state must be transform:none \u2014 NOT translateX(0): an identity
+     transform still makes the drawer the containing block for fixed-position
+     descendants (the settings dialog's .VOzbGW_overlay is portaled into the
+     sidebar DOM). With the identity transform the wide settings sheet
+     (100vw-16) overflows the 280px drawer, the dialog's focus scrolls the
+     overflow:hidden drawer to scrollLeft=102, and every static child (plus the
+     fixed overlay) shifts 102px off-screen. With transform:none the overlay is
+     viewport-anchored: it dims the full screen and the sheet sits at left:8. */
+  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) > :first-child {
+    transform: none !important;
+  }
+
+  /* Drag handles are useless on touch and would float over the drawer. */
+  [data-side="sidebar"],
+  [data-side="details"] {
+    display: none !important;
+  }
+
+  /* --- Conversation text on mobile ---
+     The official message flow keeps desktop's 32px side gutters and 16px
+     type. On a phone: shrink the type a notch and widen the lines by
+     trimming the gutters (the sidebar drawer list keeps its size). The
+     flow's scroll container is the only _scroll element holding markdown
+     <p> paragraphs \u2014 the composer's own scroll (textarea) is excluded
+     via :has(p). */
+  /* The official main scroll body reserves scrollbar-gutter for desktop
+     scrollbars (8px), which shoves every column off-center on a phone.
+     Classic desktop scrollbars (Edge/Chrome) also occupy ~8-17px in a
+     phone-sized viewport, shifting the column further. Mobile scrolling
+     is touch/wheel, so remove the scrollbar entirely on phones: the
+     column is then exactly centered in every browser. */
+  [data-phase] [class$="_scrollBody"] {
+    scrollbar-gutter: auto !important;
+    scrollbar-width: none !important;
+  }
+  [data-phase] [class$="_scrollBody"]::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+  /* Message action rows (copy / run-time badges) can overflow the right
+     edge on narrow screens \u2014 keep them inside the message width. */
+  [data-phase] [class$="_actions"] {
+    overflow: hidden !important;
+  }
+  [data-phase] [class$="_actions"] [class$="_timeEnd"] {
+    flex: 0 1 auto !important;
+    min-width: 0 !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+
+  [data-phase] [class$="_scroll"]:has(p) {
+    padding-left: 20px !important;
+    padding-right: 20px !important;
+    font-size: 15px !important;
+  }
+  /* The official markdown styles set an explicit 16px on paragraphs and
+     list items, so the container's inherited 15px is not enough. User
+     messages render their text in a div whose class carries _text_
+     (16px too) \u2014 cover it as well. */
+  [data-phase] [class$="_scroll"]:has(p) p,
+  [data-phase] [class$="_scroll"]:has(p) li,
+  [data-phase] [class$="_scroll"]:has(p) [class*="_text_"] {
+    font-size: 15px !important;
+  }
+
+  /* --- Composer bottom row on mobile ---
+     The official row gives the model pill (trailing) flex:0 0 auto, which
+     squeezes the agent-permission pill (modes) down to 15px: the pill's
+     chevron then overflows on top of the model name. Let the permission
+     pill keep its natural width and let the model pill shrink instead.
+     Anchored by the composer card (:has(textarea)): row = last child,
+     tools = first child, permission pill = its 2nd child, model pill =
+     row's last child. */
+  [data-phase] [class*="_card"]:has(textarea) > :last-child {
+    gap: 8px !important;
+  }
+  [data-phase] [class*="_card"]:has(textarea) > :last-child > :first-child {
+    gap: 8px !important;
+  }
+  [data-phase] [class*="_card"]:has(textarea) > :last-child > :first-child > :nth-child(2) {
+    flex: 0 0 auto !important;
+  }
+  [data-phase] [class*="_card"]:has(textarea) > :last-child > :last-child {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+  }
+
+  /* --- Session header on mobile ---
+     Layout goal: [toggle] [session title] [mode badge] in a row, with the
+     Session log capsule removed from the header (relocated to the drawer
+     footer). Stable structural hooks only:
+       [data-phase] header                     the session header element
+       header > :first-child                   titleRow (titleCluster + utilities)
+       header > :first-child > :last-child     headerUtilities (Session log seat) */
+  [data-phase] header {
+    padding-right: 12px !important;
+  }
+  /* Give the title row a lane clear of the absolutely-placed toggle, then
+     balance the header: with header padding-right 12px, a 20px left
+     padding puts the title's geometric center exactly on the viewport
+     center (measured 195/195 at 390px). */
+  [data-phase] header > :first-child {
+    padding-left: 20px !important;
+  }
+  /* The directory toggle sits at the far left of the header (the header
+     is position:relative; the data-slot wrappers are display:contents). */
+  [data-mobile-nav="toggle"] {
+    position: absolute !important;
+    left: 8px !important;
+    top: 12px !important;
+    z-index: 2 !important;
+  }
+  /* The Files action sits at the FAR RIGHT of the header so it reads as a
+     distinct control from the directory toggle on the left (which opens
+     the history sidebar). */
+  [data-mobile-nav="files"] {
+    position: absolute !important;
+    left: auto !important;
+    right: 8px !important;
+    top: 12px !important;
+    z-index: 2 !important;
+  }
+  /* Session log download: gone from the header row on mobile (the utilities
+     seat holds only the session-log-export capsule). */
+  [data-phase] header > :first-child > :last-child {
+    display: none !important;
+  }
+
+  /* --- Settings dialog on mobile ---
+     Desktop: 800px two-column flex (188px nav + content). Mobile: a
+     near-full-width sheet \u2014 nav tabs wrap into rows on top, option rows
+     stay horizontal (title+description left, control right). Structural
+     selectors are scoped to the unique aria-modal dialog; every
+     settings-specific rule is gated with
+     :has(> :first-child > :last-child > button) \u2014 the settings nav tab
+     list holds <button> tabs, so the transient export dialog (the same
+     primitives Modal, header(title+close)+description+body) keeps its
+     official centered card layout. Requires :has() support
+     (Chromium 105+, 2022). */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) {
+    position: absolute !important;
+    left: 8px !important;
+    /* Fixed top (no translateY): a transform on the panel combined with the
+       panel overflowing the max-content drawer shifts the fixed overlay's
+       coordinate frame, dragging the whole sidebar content off-screen. The
+       safe-area inset keeps the sheet below the status bar / notch. */
+    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
+    width: calc(100vw - 16px) !important;
+    max-width: calc(100vw - 16px) !important;
+    /* Height follows the content (no dead space under a short page); it
+       caps at 100dvh-24 (less the safe-area top) and the options area
+       scrolls only then. */
+    height: auto !important;
+    max-height: min(800px, calc(100vh - 24px - env(safe-area-inset-top, 0px))) !important;
+    max-height: min(800px, calc(100dvh - 24px - env(safe-area-inset-top, 0px))) !important;
+    flex-direction: column !important;
+    border-radius: 14px !important;
+    animation: dsh-mobile-nav-sheet-in .22s var(--ds-ease-out, ease-in-out);
+  }
+  /* The settings sheet's dimmed mask fades in with the panel (the mask is
+     the first child of the overlay that directly contains the sheet). */
+  :has(> [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"]))) > :first-child {
+    animation: dsh-mobile-nav-fade .18s var(--ds-ease-out, ease-in-out);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])),
+    :has(> [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"]))) > :first-child {
+      animation: none !important;
+    }
+  }
+  /* The export dialog (not the settings sheet) must never overflow the
+     viewport: the official centered card can be wider than 390px. */
+  [aria-modal="true"]:not(:has(> :first-child > :last-child > button)) {
+    max-width: calc(100vw - 32px) !important;
+  }
+  /* Nav bar: hide the "Settings" caption (redundant on a full-width sheet)
+     and wrap the tab list so every tab is visible \u2014 a horizontal scroll cut
+     the last tab ("Plugins") off with no affordance to scroll. */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :first-child {
+    width: 100% !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    gap: 6px !important;
+    padding: 10px 12px 8px !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :first-child > :first-child {
+    display: none !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :first-child > :last-child {
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    width: 100% !important;
+    gap: 6px !important;
+    overflow: visible !important;
+  }
+  /* Content toolbar (Open configuration file + close): spread to the edges
+     instead of clustering right with a dead zone on the left. The toolbar
+     children carry official auto-margins that would defeat space-between,
+     so neutralize them. The close button gets a round tappable base so it
+     reads as its own control, not part of the outline button. */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child > :first-child {
+    justify-content: space-between !important;
+    align-items: center !important;
+    padding: 0 12px !important;
+    min-height: 40px !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child > :first-child > * {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child > :first-child > :last-child {
+    width: 32px !important;
+    height: 32px !important;
+    border-radius: 50% !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06)) !important;
+  }
+  /* Appearance mode cards: the official cube row renders three tall
+     vertical cards (~268px) that eat half the sheet. Turn them into a
+     compact horizontal trio (icon + label inline, equal widths).
+     Relies on the official cube-row class name of this version. */
+  [aria-modal="true"] [class$="_cubeRow"] {
+    gap: 6px !important;
+  }
+  [aria-modal="true"] [class$="_cubeRow"] > * {
+    flex: 1 1 0 !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 6px !important;
+    padding: 10px 8px !important;
+    min-height: 0 !important;
+  }
+  /* Content: the options scroll area gets bottom breathing room so the last
+     row never sits flush against the sheet's rounded corner. */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+  }
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :last-child > :last-child {
+    padding: 0 12px 24px !important;
+  }
+
+  /* ---------- dsh-web-ui family compatibility ----------
+     The linxin666 plugin suite extends the shell frame directly:
+       - aionui-panel appends two trailing grid columns (explorer / preview)
+         plus absolute drag handles to [data-dsh-frame]; its 5-track inline
+         grid is already overridden above, but the handles and columns would
+         still float over the main UI. On mobile the columns leave the grid
+         as floating bottom sheets and keep their own visibility state \u2014
+         the suite's collapse chevron / preview tabs still work, so no
+         feature is lost. The task-board / ssh plugins inject sidebar
+         entries and center-column takeover panels; the entries need
+         spacing and the kanban needs scrollable columns. */
+
+  /* Touch devices: the drag handles are useless \u2014 the floating expand
+     button is the opener. */
+  .aionui-explorer-handle,
+  .aionui-preview-handle {
+    display: none !important;
+  }
+
+  /* Shared base: both columns leave the grid as floating panels. The
+     explorer is gated shut by default (its own persisted expanded state
+     must never cover the mobile UI on load); the header Files action opens
+     it via the frame marker below, and the sheet's own collapse chevron
+     clears it. Preview stays owned by the suite (hidden while no tab is
+     open). The per-column rules below override the geometry. */
+  [data-aionui-explorer-col],
+  [data-aionui-preview-col] {
+    position: fixed !important;
+    z-index: 55 !important;
+    background: var(--aion-bg-base, #ffffff) !important;
+    border-left: none !important;
+  }
+  /* Explorer (file tree) bottom sheet: bottom edge aligned exactly with
+     the composer card's bottom line \u2014 the card sits 36px above the
+     viewport bottom (8px composer padding + the 28px stats strip below
+     the card), so the sheet uses the same 36px bottom offset. */
+  [data-aionui-explorer-col] {
+    visibility: hidden !important;
+    left: 8px !important;
+    right: 8px !important;
+    top: auto !important;
+    bottom: 36px !important;
+    width: auto !important;
+    height: min(55dvh, 460px) !important;
+    max-height: calc(100dvh - 44px) !important;
+    border-radius: 14px !important;
+    overflow: hidden !important;
+    box-shadow: 0 -4px 28px rgba(0, 0, 0, .18) !important;
+    animation: dsh-mobile-nav-sheet-up .24s var(--ds-ease-out, ease-in-out) !important;
+  }
+  /* Preview (file content) bottom sheet. Gated shut by default: the suite
+     persists open preview tabs in localStorage and restores them on load,
+     which would pop the sheet over the fresh UI. The client only sets the
+     frame marker after the user taps a file row in the explorer; the
+     suite's own collapse chevron clears it via the visibility watcher. */
+  [data-aionui-preview-col] {
+    visibility: hidden !important;
+    position: fixed !important;
+    left: 8px !important;
+    right: 8px !important;
+    top: auto !important;
+    bottom: 40px !important;
+    width: auto !important;
+    height: min(50dvh, 420px) !important;
+    max-height: calc(100dvh - 48px) !important;
+    border-radius: 14px !important;
+    overflow: hidden !important;
+    box-shadow: 0 -4px 28px rgba(0, 0, 0, .18) !important;
+    z-index: 56 !important;
+    animation: dsh-mobile-nav-sheet-up .24s var(--ds-ease-out, ease-in-out) !important;
+  }
+  /* User-opened preview sheet (frame marker, set on file-row tap). */
+  [data-mobile-nav="frame"][data-aionui-preview-open] [data-aionui-preview-col] {
+    visibility: visible !important;
+  }
+  /* The Files action opens the explorer sheet (frame marker). */
+  [data-mobile-nav="frame"][data-aionui-explorer-open] [data-aionui-explorer-col] {
+    visibility: visible !important;
+  }
+  /* The open drawer must never sit under a sheet: while the frame is in the
+     narrow-expanded state both sheets yield (later in the file than the
+     open marker rule, so it wins at equal specificity). */
+  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) [data-aionui-explorer-col],
+  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) [data-aionui-preview-col] {
+    visibility: hidden !important;
+  }
+  /* The suite's own expand button reads the store state we bypass on
+     mobile \u2014 hide it; the header Files action is the opener. */
+  .aionui-floating-expand {
+    display: none !important;
+  }
+
+  /* dsh-web-ui sidebar entries (task board / ssh) sit flush against each
+     other \u2014 give the injected rows breathing room. */
+  button[data-dsh-taskboard-entry],
+  button[data-dsh-ssh-entry] {
+    margin-bottom: 8px !important;
+  }
+
+  /* Task board: five kanban columns at minmax(0,1fr) crush into ~78px phone
+     strips. Give every column a usable minimum and let the row scroll. */
+  [data-dsh-taskboard-board] > [class$="_columns"] {
+    grid-template-columns: repeat(5, minmax(240px, 1fr)) !important;
+    overflow-x: auto !important;
+  }
+  /* The floating button must not float over a takeover panel (task board /
+     ssh own the center column while active). */
+  html[data-dsh-taskboard-active] [data-mobile-nav="fab"],
+  html[data-dsh-ssh-active] [data-mobile-nav="fab"],
+  html[data-dsh-taskboard-active] [data-mobile-nav="backdrop"],
+  html[data-dsh-ssh-active] [data-mobile-nav="backdrop"] {
+    display: none !important;
+  }
+  /* Board header: let the search field take the slack instead of squeezing
+     the action buttons. */
+  [data-dsh-taskboard-board] > [class$="_boardHeader"] [class$="_search"] {
+    flex: 1 1 auto !important;
+    min-width: 80px !important;
+  }
+
+  /* ---------- dsh-web-ui polish: plugin market search ----------
+     The market tab row (Discover / Themes / Installed + the plugin search
+     box) is a no-wrap flex: at 390px the tabs plus the ~218px search box
+     (~475px total) overflow the ~334px sheet and the search box runs off
+     the right edge of the screen (it also forces a horizontal scrollbar on
+     the sheet's options area). Let the row wrap: the tabs keep the first
+     line and the search box gets its own full-width second line. */
+
+  [aria-modal="true"] [class$="_tabs"] {
+    flex-wrap: wrap !important;
+    row-gap: 8px !important;
+  }
+  [aria-modal="true"] [class$="_searchInline"] {
+    flex: 1 1 100% !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* ---------- dsh-usage-stats polish: usage & balance panel ----------
+     The panel's stats row shows three token counters side by side
+     (today / month / total). The counters use tabular nowrap figures whose
+     min-content width overflows the ~336px panel body on a phone: figures
+     clip at the row's edges and the panel grows a horizontal scrollbar.
+     Stack the three counters vertically \u2014 full-width rows, so the figures
+     always fit. */
+
+  [class*="usg_"][class$="_statsRow"] {
+    flex-direction: column !important;
+  }
+  [class*="usg_"][class$="_stat"] {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  /* ---------- dsh-web-ui polish: settings sheet ----------
+     The official dialog is a desktop two-column form; on a phone the
+     label/control split leaves a huge dead gap and long descriptions wrap
+     into tall stacks. Stack each row (text above, control full-width) and
+     compact the nav tabs into an even wrap. */
+
+  /* Nav tabs: a stable 3-per-row grid (two clean rows instead of a ragged
+     wrap) with tighter cells. */
+  [aria-modal="true"]:has(> :first-child > :last-child > button):not(:has([role="navigation"])) > :first-child > :last-child {
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 6px !important;
+  }
+  [aria-modal="true"] [class$="_navCell"] {
+    padding: 6px 8px !important;
+    gap: 6px !important;
+    font-size: 13px !important;
+    justify-content: flex-start !important;
+  }
+  [aria-modal="true"] [class$="_navCell"] svg {
+    width: 14px !important;
+    height: 14px !important;
+    flex: none !important;
+  }
+  /* Setting rows: text on top, control below at full width. */
+  [aria-modal="true"] [class$="_section"] [class$="_row"] {
+    flex-direction: column !important;
+    align-items: stretch !important;
+    gap: 8px !important;
+  }
+  [aria-modal="true"] [class$="_section"] [class$="_row"] > :first-child {
+    width: 100% !important;
+    max-width: none !important;
+  }
+  [aria-modal="true"] [class$="_section"] [class$="_row"] > :last-child {
+    width: 100% !important;
+    max-width: none !important;
+  }
+  /* Appearance mode group: give the cube row a consistent bordered
+     segmented look (the official borders differ per state). */
+  [aria-modal="true"] [class$="_cubeRow"] > * {
+    border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12)) !important;
+  }
+
+  /* ---------- dsh-web-ui polish: explorer sheet ----------
+     The aionui explorer was designed for a desktop side column: compact the
+     header, search box and tree rows so a phone shows more entries, and pad
+     the scroll bottom so the last row never sits flush on the edge. */
+
+  [data-aionui-explorer-col] [class$="_tabBar"] {
+    height: 36px !important;
+  }
+  [data-aionui-explorer-col] [class$="_tabBtn"],
+  [data-aionui-explorer-col] [class$="_tabBtnActive"] {
+    padding: 0 12px !important;
+    font-size: 13px !important;
+  }
+  [data-aionui-explorer-col] [class$="_searchBox"] {
+    height: 32px !important;
+    font-size: 13px !important;
+  }
+  [data-aionui-explorer-col] [class$="_treeRow"] {
+    height: 30px !important;
+    font-size: 13px !important;
+  }
+  [data-aionui-explorer-col] [class$="_treeRow"] svg {
+    width: 14px !important;
+    height: 14px !important;
+  }
+  [data-aionui-explorer-col] [class$="_scrollArea"] {
+    padding-bottom: 28px !important;
+  }
+
+  /* ---------- dsh-web-ui polish: drawer footer ----------
+     The injected footer actions (Files + Session log) become two equal pill
+     buttons instead of text-width capsules. */
+
+  /* The official footerActions row also hosts the remote-web-ui entry
+     row (two icon buttons); without wrapping the two groups squeeze each
+     other on one line. Wrap so each group gets its own full-width row. */
+  [data-mobile-nav="frame"] [class$="_footerActions"] {
+    flex-wrap: wrap !important;
+    gap: 6px !important;
+  }
+  [data-mobile-nav="drawer-actions"] {
+    width: 100% !important;
+  }
+  [data-mobile-nav="drawer-actions"] > button {
+    flex: 1 1 0 !important;
+    padding: 0 8px !important;
+    white-space: nowrap !important;
+  }
+
+  /* ---------- dsh-web-ui polish: floating pet ----------
+     The whale-girl pet (dsh-pet) floats at the viewport corner with a
+     persisted, draggable position. On phones the pet is scaled down so
+     it does not dominate the screen; the plugin's own drag + persist
+     still work (the position itself is left alone \u2014 the mobile default
+     position is seeded via the pet API to just above the composer). */
+
+  body > [class$="_float"]:has([class$="_sprite"][role="button"]) {
+    transform: scale(.66);
+    transform-origin: bottom right;
+  }
+  /* While a modal dialog (settings sheet / export) owns the screen the pet
+     floats ABOVE it and covers the dialog content; modal semantics say the
+     background is inert, so hide the pet for the modal's lifetime. */
+  body:has([aria-modal="true"]) > [class$="_float"]:has([class$="_sprite"][role="button"]) {
+    display: none !important;
+  }
+
+  /* ---------- dsh-web-ui polish: conversation stats line ----------
+     The official session-status row (turns / steps / LLM time / TTFT /
+     cache) is long. The client marks the exact row with
+     [data-mobile-nav="stats"] (text-anchored, hashed classes can't be
+     targeted). Layout: ONE fixed-height (28px) flex strip that scrolls
+     horizontally \u2014 the full metrics stream stays reachable by swiping,
+     the row never grows vertically, no ellipsis or fade, 12px gaps
+     between metric groups, a 2px scrollbar as the swipe affordance. */
+
+  [data-mobile-nav="stats"] {
+    display: flex !important;
+    flex-flow: row nowrap !important;
+    align-items: center !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    height: 28px !important;
+    min-height: 28px !important;
+    max-height: 28px !important;
+    box-sizing: border-box !important;
+    white-space: nowrap !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin !important;
+    scrollbar-color: var(--dsw-alias-border-l1, rgba(0, 0, 0, .28)) transparent !important;
+    padding: 0 0 4px !important;
+    line-height: 20px !important;
+    font-size: 12px !important;
+  }
+  [data-mobile-nav="stats"]::-webkit-scrollbar {
+    height: 2px !important;
+  }
+  [data-mobile-nav="stats"]::-webkit-scrollbar-thumb {
+    background: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .3)) !important;
+    border-radius: 2px !important;
+  }
+  [data-mobile-nav="stats"]::-webkit-scrollbar-track {
+    background: transparent !important;
+  }
+  [data-mobile-nav="stats"] > * {
+    display: flex !important;
+    flex: 0 0 auto !important;
+    flex-flow: row nowrap !important;
+    align-items: center !important;
+    width: max-content !important;
+    min-width: max-content !important;
+    max-width: none !important;
+    white-space: nowrap !important;
+    margin-right: 12px !important;
+    padding: 0 !important;
+  }
+  [data-mobile-nav="stats"] > *:last-child {
+    margin-right: 0 !important;
+  }
+  [data-mobile-nav="stats"] * {
+    white-space: nowrap !important;
+  }
+
+  /* ---------- hero composer on mobile ----------
+     The official hero card carries a 2-line textarea plus a tall tool row,
+     which reads oversized on a phone. Tighten the empty-state rhythm: keep
+     the official centered hero, shrink the textarea line box, slim the card
+     padding and the tool row, and close the gap under the headline. */
+
+  [data-phase="hero"] [class$="_card"]:has(textarea) {
+    padding-top: 6px !important;
+    gap: 8px !important;
+  }
+  /* The official composer autosizes the textarea and writes an inline
+     height (2 lines on the hero empty state) on the textarea's scroll/grow
+     wrappers. :placeholder-shown lets us collapse the EMPTY state to one
+     line with !important; as soon as the user types, the pseudo-class no
+     longer matches and the autosizer's inline height takes over again \u2014 so
+     multi-line growth keeps working. */
+  [data-phase="hero"] textarea:placeholder-shown {
+    height: 28px !important;
+  }
+  [data-phase="hero"] [class$="_card"]:has(textarea:placeholder-shown) > [class$="_scroll"],
+  [data-phase="hero"] [class$="_card"]:has(textarea:placeholder-shown) [class$="_grow"] {
+    height: 28px !important;
+  }
+  [data-phase="hero"] [class$="_card"]:has(textarea) > [class$="_row"] {
+    padding-top: 2px !important;
+  }
+  [data-phase="hero"] [class$="_headline"] {
+    line-height: 1.15 !important;
+    margin-bottom: 0 !important;
+  }
+  [data-phase="hero"] [class$="_stack"] {
+    gap: 0 !important;
+  }
+}
+
+/* ---------- desktop: the mobile controls must never appear ---------- */
+
+@media (min-width: 1024px) {
+  [data-mobile-nav="toggle"],
+  [data-mobile-nav="files"],
+  [data-mobile-nav="fab"],
+  [data-mobile-nav="backdrop"],
+  [data-mobile-nav="session-log"],
+  [data-mobile-nav="explorer"],
+  [data-mobile-nav="drawer-actions"] {
+    display: none !important;
+  }
+}
+`;
+
+// client/mobile/locales.ts
+var NS = "mobileNav";
+var zh = {
+  "open": "\u6253\u5F00\u76EE\u5F55",
+  "close": "\u6536\u8D77\u76EE\u5F55",
+  "backdrop": "\u70B9\u51FB\u5173\u95ED\u76EE\u5F55",
+  "sessionLog": "\u5BFC\u51FA\u4F1A\u8BDD\u65E5\u5FD7",
+  "files": "\u6587\u4EF6\u6D4F\u89C8"
+};
+var en = {
+  "open": "Open directory",
+  "close": "Close directory",
+  "backdrop": "Click to close directory",
+  "sessionLog": "Session log",
+  "files": "Files"
+};
+
+// client/mobile/mobile-apply.tsx
+function mobileApply(ctx) {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-mobile-nav: dictionaries");
+  ctx.effect(() => {
+    const tag = document.createElement("style");
+    tag.dataset.plugin = "@dsh-external/dsh-mobile-nav";
+    tag.dataset.pluginCss = "@dsh-external/dsh-mobile-nav/mobile.css";
+    tag.textContent = MOBILE_CSS;
+    document.head.appendChild(tag);
+    return () => {
+      tag.remove();
+    };
+  }, "dsh-mobile-nav: styles");
+  ctx.effect(() => {
+    const narrow = window.matchMedia("(max-width: 1023px)");
+    const viewport = document.querySelector('meta[name="viewport"]');
+    const originalViewport = viewport?.content ?? "";
+    const themeMeta = document.createElement("meta");
+    themeMeta.name = "theme-color";
+    const bodyBg = () => getComputedStyle(document.body).backgroundColor;
+    const sync = () => {
+      if (viewport !== null) viewport.content = "width=device-width, initial-scale=1, viewport-fit=cover";
+      themeMeta.content = bodyBg();
+      if (themeMeta.parentElement === null) document.head.appendChild(themeMeta);
+    };
+    const restore = () => {
+      if (viewport !== null) viewport.content = originalViewport;
+      themeMeta.remove();
+    };
+    const onGestureStart = (event) => event.preventDefault();
+    if (narrow.matches) sync();
+    const onChange = (event) => event.matches ? sync() : restore();
+    narrow.addEventListener("change", onChange);
+    const observer = new MutationObserver(() => {
+      if (narrow.matches) themeMeta.content = bodyBg();
+    });
+    observer.observe(document.body, { attributes: true, attributeFilter: ["data-ds-dark-theme"] });
+    document.addEventListener("gesturestart", onGestureStart);
+    return () => {
+      narrow.removeEventListener("change", onChange);
+      observer.disconnect();
+      document.removeEventListener("gesturestart", onGestureStart);
+      restore();
+    };
+  }, "dsh-mobile-nav: status bar theme + viewport + zoom guard");
+  ctx.effect(() => {
+    const narrow = window.matchMedia("(max-width: 1023px)");
+    if (!narrow.matches) return () => {
+    };
+    const onChevronClick = (event) => {
+      const target = event.target;
+      if (target === null || !target.closest(".aionui-collapse-chevron")) return;
+      document.querySelector('[data-mobile-nav="frame"]')?.removeAttribute("data-aionui-explorer-open");
+    };
+    document.addEventListener("click", onChevronClick, true);
+    return () => document.removeEventListener("click", onChevronClick, true);
+  }, "dsh-mobile-nav: aionui explorer close marker");
+  ctx.effect(() => {
+    const narrow = window.matchMedia("(max-width: 1023px)");
+    if (!narrow.matches) return () => {
+    };
+    const frame = () => document.querySelector('[data-mobile-nav="frame"]');
+    const onTap = (event) => {
+      const target = event.target;
+      if (target === null) return;
+      if (target.closest('[data-aionui-explorer-col] [class$="_treeRow"]') === null) return;
+      frame()?.setAttribute("data-aionui-preview-open", "");
+    };
+    const sync = () => {
+      const pv = document.querySelector("[data-aionui-preview-col]");
+      if (pv === null) return;
+      if (getComputedStyle(pv).visibility === "hidden") frame()?.removeAttribute("data-aionui-preview-open");
+    };
+    document.addEventListener("click", onTap, true);
+    const observer = new MutationObserver(sync);
+    observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ["style"] });
+    sync();
+    return () => {
+      document.removeEventListener("click", onTap, true);
+      observer.disconnect();
+    };
+  }, "dsh-mobile-nav: preview sheet open marker");
+  ctx.effect(() => {
+    const narrow = window.matchMedia("(max-width: 1023px)");
+    if (!narrow.matches) return () => {
+    };
+    const moveTps = (stats) => {
+      if ([...stats.children].some((c) => /^TPS\s+\d/.test((c.textContent ?? "").trim()))) return;
+      const stack = stats.closest('[class$="_composerStack"]');
+      if (stack === null) return;
+      for (const el of stack.querySelectorAll("div")) {
+        const text = (el.textContent ?? "").trim();
+        if (!/^TPS\s+\d/.test(text)) continue;
+        if (el.children.length > 0) continue;
+        stats.appendChild(el);
+        return;
+      }
+    };
+    const mark = () => {
+      for (const root of document.querySelectorAll('[data-phase] [class$="_root"]')) {
+        if (root.closest('[class$="_composerStack"]') === null) continue;
+        const text = root.textContent ?? "";
+        if (!/(turns|steps|\bLLM\b|轮|步)/.test(text)) continue;
+        if (root.querySelector("textarea") !== null) continue;
+        root.setAttribute("data-mobile-nav", "stats");
+        moveTps(root);
+        return;
+      }
+    };
+    const observer = new MutationObserver(mark);
+    observer.observe(document.body, { childList: true, subtree: true });
+    mark();
+    return () => {
+      observer.disconnect();
+    };
+  }, "dsh-mobile-nav: stats line marker");
+  ctx.effect(() => {
+    const narrow = window.matchMedia("(max-width: 1023px)");
+    if (!narrow.matches) return () => {
+    };
+    const cols = ["[data-aionui-explorer-col]", "[data-aionui-preview-col]"];
+    const seen = /* @__PURE__ */ new Map();
+    const play = (el) => {
+      el.animate(
+        [
+          { opacity: 0, transform: "translateY(28px)" },
+          { opacity: 1, transform: "none" }
+        ],
+        { duration: 280, easing: "cubic-bezier(.16, 1, .3, 1)", fill: "backwards" }
+      );
+    };
+    const check = () => {
+      for (const sel of cols) {
+        const el = document.querySelector(sel);
+        if (el === null) continue;
+        const visible = getComputedStyle(el).visibility === "visible";
+        const prev = seen.get(sel) ?? false;
+        if (visible && !prev) play(el);
+        seen.set(sel, visible);
+      }
+    };
+    const observer = new MutationObserver(check);
+    observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ["style", "class", "data-aionui-explorer-open"] });
+    check();
+    return () => {
+      observer.disconnect();
+    };
+  }, "dsh-mobile-nav: sheet rise animation replay");
+  ctx.slots.inject("conversation.session.header.actions", () => ctx.slots.register({
+    name: "conversation.session.header.actions",
+    id: "mobile-nav-toggle",
+    order: 10,
+    locale: NS,
+    inject: () => ({
+      toggleSidebar: () => ctx.layout.toggleSidebar()
+    })
+  }, MobileNavToggle));
+  ctx.slots.inject("shell.overlay", () => ctx.slots.register({
+    name: "shell.overlay",
+    id: "mobile-nav-overlay",
+    order: 10,
+    locale: NS,
+    inject: () => ({
+      toggleSidebar: () => ctx.layout.toggleSidebar()
+    })
+  }, MobileNavOverlay));
+  ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({
+    name: "sidebar.footer.action",
+    id: "mobile-nav-session-log",
+    order: 10,
+    locale: NS,
+    inject: () => ({
+      downloadSessionLog: (sessionId) => ctx.sessionLogDownload.download(sessionId),
+      toggleSidebar: () => ctx.layout.toggleSidebar()
+    })
+  }, MobileDrawerFooter));
+}
+
 // client/index.jsx
 var name = "dsh-pocket";
-var inject = ["slots", "connection"];
+var inject = ["slots", "connection", "layout", "locale", "sessionLogDownload"];
 var styles = {
   card: { background: "var(--dsw-alias-bg-layer-1,#fff)", border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", borderRadius: 12, padding: "14px 16px", maxWidth: 480 },
   block: { borderTop: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", marginTop: 12, paddingTop: 12 },
@@ -66,9 +1252,9 @@ var styles = {
   warn: { color: "var(--dsw-alias-state-warn-primary,#b45309)", fontSize: 12 }
 };
 function PocketSettingsTab({ rpcCall }) {
-  const [status, setStatus] = (0, import_react.useState)(null);
-  const [busy, setBusy] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react2.useState)(null);
+  const [busy, setBusy] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
   const call = async (endpoint, payload) => {
     const res = await rpcCall(endpoint, payload);
     if (!res?.ok) throw new Error(res?.error?.message ?? "RPC failed");
@@ -80,7 +1266,7 @@ function PocketSettingsTab({ rpcCall }) {
     } catch {
     }
   };
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     load();
     const t = setInterval(load, 3e3);
     return () => clearInterval(t);
@@ -104,51 +1290,52 @@ function PocketSettingsTab({ rpcCall }) {
   };
   const lanUrl = status?.lanUrl;
   const tunnelUrl = status?.tunnelUrl;
-  return (0, import_react.createElement)(
+  return (0, import_react2.createElement)(
     "div",
     { style: styles.card },
-    (0, import_react.createElement)(
+    (0, import_react2.createElement)(
       "div",
       null,
-      (0, import_react.createElement)("strong", null, "\u{1F4F1} \u624B\u673A\u8BBF\u95EE | Phone access"),
-      (0, import_react.createElement)("div", { style: styles.muted }, "\u624B\u673A\u626B\u7801\u6253\u5F00\u7684\u5C31\u662F\u7535\u8111\u4E0A\u7684\u8FD9\u4E2A\u754C\u9762\uFF0C\u5B9E\u65F6\u540C\u6B65 | the phone shows this exact screen, live")
+      (0, import_react2.createElement)("strong", null, "\u{1F4F1} \u624B\u673A\u8BBF\u95EE | Phone access"),
+      (0, import_react2.createElement)("div", { style: styles.muted }, "\u624B\u673A\u626B\u7801\u6253\u5F00\u7684\u5C31\u662F\u7535\u8111\u4E0A\u7684\u8FD9\u4E2A\u754C\u9762\uFF0C\u5B9E\u65F6\u540C\u6B65 | the phone shows this exact screen, live")
     ),
     // 局域网
-    (0, import_react.createElement)(
+    (0, import_react2.createElement)(
       "div",
       { style: styles.block },
-      (0, import_react.createElement)("div", { style: { fontWeight: 600, fontSize: 13 } }, "\u{1F4F6} \u5C40\u57DF\u7F51\uFF08\u540C\u4E00 WiFi\uFF09| LAN"),
-      lanUrl ? (0, import_react.createElement)(
+      (0, import_react2.createElement)("div", { style: { fontWeight: 600, fontSize: 13 } }, "\u{1F4F6} \u5C40\u57DF\u7F51\uFF08\u540C\u4E00 WiFi\uFF09| LAN"),
+      lanUrl ? (0, import_react2.createElement)(
         "div",
         null,
-        (0, import_react.createElement)("img", { src: status.lanQr, alt: "LAN QR", style: styles.qr }),
-        (0, import_react.createElement)("div", { style: styles.code }, lanUrl),
-        (0, import_react.createElement)("div", { style: styles.muted }, "\u624B\u673A\u8FDE\u63A5\u540C\u4E00 WiFi \u540E\u626B\u7801\u5373\u53EF\u6253\u5F00")
-      ) : (0, import_react.createElement)("div", { style: styles.muted }, "\u4EE3\u7406\u672A\u5C31\u7EEA\u2026 | proxy starting\u2026")
+        (0, import_react2.createElement)("img", { src: status.lanQr, alt: "LAN QR", style: styles.qr }),
+        (0, import_react2.createElement)("div", { style: styles.code }, lanUrl),
+        (0, import_react2.createElement)("div", { style: styles.muted }, "\u624B\u673A\u8FDE\u63A5\u540C\u4E00 WiFi \u540E\u626B\u7801\u5373\u53EF\u6253\u5F00")
+      ) : (0, import_react2.createElement)("div", { style: styles.muted }, "\u4EE3\u7406\u672A\u5C31\u7EEA\u2026 | proxy starting\u2026")
     ),
     // 公网
-    (0, import_react.createElement)(
+    (0, import_react2.createElement)(
       "div",
       { style: styles.block },
-      (0, import_react.createElement)("div", { style: { fontWeight: 600, fontSize: 13 } }, "\u{1F310} \u516C\u7F51\uFF08\u4EBA\u5728\u5916\u9762\uFF09| Anywhere"),
-      tunnelUrl ? (0, import_react.createElement)(
+      (0, import_react2.createElement)("div", { style: { fontWeight: 600, fontSize: 13 } }, "\u{1F310} \u516C\u7F51\uFF08\u4EBA\u5728\u5916\u9762\uFF09| Anywhere"),
+      tunnelUrl ? (0, import_react2.createElement)(
         "div",
         null,
-        (0, import_react.createElement)("img", { src: status.tunnelQr, alt: "Tunnel QR", style: styles.qr }),
-        (0, import_react.createElement)("div", { style: styles.code }, tunnelUrl),
-        (0, import_react.createElement)("div", { style: styles.muted }, "\u4EFB\u4F55\u7F51\u7EDC\u626B\u7801\u5373\u7528\uFF08URL \u6BCF\u6B21\u91CD\u542F\u4F1A\u53D8\uFF09"),
-        (0, import_react.createElement)("button", { style: styles.btn, onClick: stopTunnel }, "\u5173\u95ED\u516C\u7F51 | Stop")
-      ) : (0, import_react.createElement)(
+        (0, import_react2.createElement)("img", { src: status.tunnelQr, alt: "Tunnel QR", style: styles.qr }),
+        (0, import_react2.createElement)("div", { style: styles.code }, tunnelUrl),
+        (0, import_react2.createElement)("div", { style: styles.muted }, "\u4EFB\u4F55\u7F51\u7EDC\u626B\u7801\u5373\u7528\uFF08URL \u6BCF\u6B21\u91CD\u542F\u4F1A\u53D8\uFF09"),
+        (0, import_react2.createElement)("button", { style: styles.btn, onClick: stopTunnel }, "\u5173\u95ED\u516C\u7F51 | Stop")
+      ) : (0, import_react2.createElement)(
         "div",
         null,
-        (0, import_react.createElement)("button", { style: styles.primary, onClick: startTunnel, disabled: busy }, busy ? "\u5F00\u542F\u4E2D\u2026\uFF08\u9996\u6B21\u9700\u4E0B\u8F7D cloudflared\uFF09" : "\u5F00\u542F\u516C\u7F51\u8BBF\u95EE | Enable anywhere"),
-        (0, import_react.createElement)("div", { style: styles.warn, marginTop: 8 }, "\u26A0\uFE0F DSH \u80FD\u6267\u884C\u7535\u8111\u4EE3\u7801\uFF1A\u4E8C\u7EF4\u7801/URL \u5C31\u662F\u94A5\u5319\uFF0C\u8BF7\u52FF\u53D1\u7ED9\u522B\u4EBA")
+        (0, import_react2.createElement)("button", { style: styles.primary, onClick: startTunnel, disabled: busy }, busy ? "\u5F00\u542F\u4E2D\u2026\uFF08\u9996\u6B21\u9700\u4E0B\u8F7D cloudflared\uFF09" : "\u5F00\u542F\u516C\u7F51\u8BBF\u95EE | Enable anywhere"),
+        (0, import_react2.createElement)("div", { style: styles.warn, marginTop: 8 }, "\u26A0\uFE0F DSH \u80FD\u6267\u884C\u7535\u8111\u4EE3\u7801\uFF1A\u4E8C\u7EF4\u7801/URL \u5C31\u662F\u94A5\u5319\uFF0C\u8BF7\u52FF\u53D1\u7ED9\u522B\u4EBA")
       )
     ),
-    error ? (0, import_react.createElement)("div", { style: { color: "var(--dsw-alias-state-error-primary,#dc2626)", fontSize: 12, marginTop: 8 } }, `\u274C ${error}`) : null
+    error ? (0, import_react2.createElement)("div", { style: { color: "var(--dsw-alias-state-error-primary,#dc2626)", fontSize: 12, marginTop: 8 } }, `\u274C ${error}`) : null
   );
 }
 function apply(ctx) {
+  mobileApply(ctx);
   const rpcCall = (endpoint, payload, signal) => ctx.connection.rpc.call(POCKET_RPC_CHANNEL, endpoint, payload, signal);
   ctx.slots.inject(
     "settings.plugins.tab",