dsh-zen-remote 2.3.8 → 2.3.10

package/lib/client.js

@@ -181,7 +181,7 @@ function MobileNavOverlay({ toggleSidebar, t }) {
             const target = event.target;
             if (target === null)
                 return;
-            const drawer = document.querySelector('[data-mobile-nav="frame"] > :first-child');
+            const drawer = document.querySelector('[data-mobile-nav="frame"] > [class$="_sidebarCol"], [data-mobile-nav="frame"] > :first-child:not([data-sidebar-mask])');
             if (drawer === null || !drawer.contains(target))
                 return;
             // A session row's own action buttons — the "Session actions" kebab
@@ -754,6 +754,18 @@ function dotState(row, pending) {
     return undefined;
 }
 };
+__modules["client-data/new-session.js"] = function (require, module, exports) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decideNewSessionAction = decideNewSessionAction;
+function decideNewSessionAction(selectedWorkspaceId, workspaceIds) {
+    if (selectedWorkspaceId !== undefined)
+        return { kind: 'start', workspaceId: selectedWorkspaceId };
+    if (workspaceIds.length <= 1)
+        return { kind: 'start', workspaceId: workspaceIds[0] };
+    return { kind: 'pick-workspace' };
+}
+};
 __modules["client/chips-store.js"] = function (require, module, exports) {
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -1220,6 +1232,7 @@ const history_nav_ts_1 = require("./client/history-nav.js");
 /** The phone shell's one page-stack step: session list -> session. */
 const SESSION_LAYER = 'session';
 const session_dot_ts_1 = require("./client/session-dot.js");
+const new_session_ts_1 = require("./client-data/new-session.js");
 const MobileHomeChips_tsx_1 = require("./client/MobileHomeChips.js");
 /** Phone breakpoint: below the tablet range, where the app-shell layout applies. */
 const PHONE_QUERY = '(max-width: 767px)';
@@ -1514,7 +1527,26 @@ function MobileHome({ useSessions, useWorkspaces, useSessionPendingInteraction,
             return;
         }
         frame.setAttribute('data-mobile-view', view);
-        return () => frame.removeAttribute('data-mobile-view');
+        // DSH 0.2.2-rc.1+ puts `inert=""` on `[class$="_sidebarCol"]` while
+        // `drawer && sidebarCollapsed` (< 768px). Because home.css.ts already
+        // hides sidebarCol with `display: none !important`, `inert` is redundant
+        // for accessibility/tab order, but per HTML spec an `inert` ancestor
+        // suppresses synthetic `.click()` (breaking openSettings and harvested
+        // sidebar-footer chips) and blocks pointer events inside non-portal
+        // sidebar dialogs. Strip it and keep it stripped while the phone shell
+        // owns the viewport.
+        const sidebarCol = frame.querySelector(':scope > [class$="_sidebarCol"]');
+        const clearInert = () => {
+            if (sidebarCol?.hasAttribute('inert'))
+                sidebarCol.removeAttribute('inert');
+        };
+        clearInert();
+        const observer = sidebarCol ? new MutationObserver(clearInert) : null;
+        observer?.observe(sidebarCol, { attributes: true, attributeFilter: ['inert'] });
+        return () => {
+            observer?.disconnect();
+            frame.removeAttribute('data-mobile-view');
+        };
     }, [phone, view]);
     const enter = (start) => {
         start();
@@ -1600,12 +1632,29 @@ function MobileHome({ useSessions, useWorkspaces, useSessionPendingInteraction,
                                 const status = statusLine(row, dot, t);
                                 const initial = row.displayTitle.trim().charAt(0).toUpperCase();
                                 return ((0, jsx_runtime_1.jsx)(SwipeRow, { open: swipeOpen === row.id, onOpenChange: (open) => setSwipeOpen(open ? row.id : null), onArchive: () => onArchiveRow(row.id), archiveLabel: t('infoArchive'), children: (guardClick) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", "data-mobile-nav": "home-row", "data-current": row.id === current ? '' : undefined, onClick: () => guardClick(() => enter(() => openSession(row.id))), children: [(0, jsx_runtime_1.jsx)("span", { "data-mobile-nav": "home-row-avatar", "aria-hidden": "true", children: dot !== undefined ? (0, jsx_runtime_1.jsx)(dsh_client_ui_primitives_1.StateDot, { state: dot, size: 10 }) : initial }), (0, jsx_runtime_1.jsxs)("span", { "data-mobile-nav": "home-row-body", children: [(0, jsx_runtime_1.jsx)("span", { "data-mobile-nav": "home-row-title", children: row.displayTitle }), status !== undefined && ((0, jsx_runtime_1.jsx)("span", { "data-mobile-nav": "home-row-status", children: status }))] }), (0, jsx_runtime_1.jsx)("time", { "data-mobile-nav": "home-row-time", dateTime: new Date(row.updatedAt).toISOString(), children: relativeTime(row.updatedAt) })] })) }, row.id));
-                            }), rows.length === 0 && (0, jsx_runtime_1.jsx)("li", { "data-mobile-nav": "home-empty", children: t('noSessions') })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", "data-mobile-nav": "home-fab", "aria-label": t('newSession'), title: t('newSession'), onClick: () => enter(() => startSession(selectedWorkspace?.workspaceId)), children: [(0, jsx_runtime_1.jsx)(dsh_client_ui_primitives_1.IconPlusOutlineRegular, { size: 18 }), (0, jsx_runtime_1.jsx)("span", { children: t('newSession') })] }), sheet !== null && ((0, jsx_runtime_1.jsxs)("div", { "data-mobile-nav": "home-sheet-layer", children: [(0, jsx_runtime_1.jsx)("div", { "data-mobile-nav": "home-sheet-mask", role: "button", tabIndex: -1, "aria-label": t('close'), onClick: () => setSheet(null) }), (0, jsx_runtime_1.jsxs)("div", { "data-mobile-nav": "home-sheet", role: sheet === 'filter' ? 'menu' : undefined, children: [sheet === 'filter' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-mobile-nav": "home-sheet-title", children: t('switchWorkspace') }), (0, jsx_runtime_1.jsx)("button", { type: "button", role: "menuitem", "data-mobile-nav": "home-sheet-item", "data-selected": selected === 'all' ? '' : undefined, onClick: () => {
+                            }), rows.length === 0 && (0, jsx_runtime_1.jsx)("li", { "data-mobile-nav": "home-empty", children: t('noSessions') })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", "data-mobile-nav": "home-fab", "aria-label": t('newSession'), title: t('newSession'), onClick: () => {
+                            // UX-3: never enter a dangling no-workspace session. With "all"
+                            // selected (the common case — the host's own sessions belong to no
+                            // workspace) the decision either auto-starts the only workspace or
+                            // opens the workspace drawer first; the session then starts with a
+                            // workspace attached from the first frame.
+                            const action = (0, new_session_ts_1.decideNewSessionAction)(selectedWorkspace?.workspaceId, workspaces.items.map((item) => item.workspaceId));
+                            if (action.kind === 'start')
+                                enter(() => startSession(action.workspaceId));
+                            else
+                                setSheet('new-session');
+                        }, children: [(0, jsx_runtime_1.jsx)(dsh_client_ui_primitives_1.IconPlusOutlineRegular, { size: 18 }), (0, jsx_runtime_1.jsx)("span", { children: t('newSession') })] }), sheet !== null && ((0, jsx_runtime_1.jsxs)("div", { "data-mobile-nav": "home-sheet-layer", children: [(0, jsx_runtime_1.jsx)("div", { "data-mobile-nav": "home-sheet-mask", role: "button", tabIndex: -1, "aria-label": t('close'), onClick: () => setSheet(null) }), (0, jsx_runtime_1.jsxs)("div", { "data-mobile-nav": "home-sheet", role: sheet === 'chips' ? undefined : 'menu', children: [sheet === 'filter' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-mobile-nav": "home-sheet-title", children: t('switchWorkspace') }), (0, jsx_runtime_1.jsx)("button", { type: "button", role: "menuitem", "data-mobile-nav": "home-sheet-item", "data-selected": selected === 'all' ? '' : undefined, onClick: () => {
                                                     actions.filter('all');
                                                     setSheet(null);
                                                 }, children: t('allWorkspaces') }), workspaces.items.map((item) => ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "menuitem", "data-mobile-nav": "home-sheet-item", "data-selected": selected === item.workspaceId ? '' : undefined, onClick: () => {
                                                     actions.filter(item.workspaceId);
                                                     setSheet(null);
+                                                }, children: item.title }, item.workspaceId)))] })), sheet === 'new-session' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-mobile-nav": "home-sheet-title", children: t('pickWorkspaceNew') }), workspaces.items.map((item) => ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "menuitem", "data-mobile-nav": "home-sheet-item", onClick: () => {
+                                                    // Pin the list to the picked workspace (so backing out
+                                                    // of the blank session lands on ITS list) and start the
+                                                    // session with that workspace from the first frame.
+                                                    actions.filter(item.workspaceId);
+                                                    enter(() => startSession(item.workspaceId));
                                                 }, children: item.title }, item.workspaceId)))] })), sheet === 'chips' && (0, jsx_runtime_1.jsx)(MobileHomeChips_tsx_1.MobileHomeChipsSheetBody, { t: t })] })] }))] })] }));
 }
 };
@@ -1665,7 +1714,13 @@ function IconTaskGlyph({ size = 14 }) {
  * the root through `:has()` instead of naming it.
  */
 const HEADER = '[data-phase] header';
-const SUBAGENT_TRIGGER = `${HEADER} button[aria-haspopup="tree"]`;
+/* UX-2 (2026-11-04): narrowed by the action-button class tail. The bare
+   `button[aria-haspopup="tree"]` matched the breadcrumb's parent-session
+   switcher first (`…_switcherTrigger` — also a tree popup), so both the
+   overlay and this fallback check resolved to the wrong button. The suffix
+   matcher is case-sensitive and `_switcherTrigger` does not end in
+   `_trigger`. Must stay in lockstep with effects/native-trigger-overlay.ts. */
+const SUBAGENT_TRIGGER = `${HEADER} button[class$="_trigger"][aria-haspopup="tree"]`;
 const JOBS_TRIGGER = `${HEADER} button[class$="_trigger"]:not([aria-haspopup])`;
 /** One glanceable group: icon + count + state dot; opens the official popover. */
 function ActivityPill({ kind, count, state, label, trigger, onFallback, Icon }) {
@@ -2072,6 +2127,8 @@ exports.deriveClientStatusView = deriveClientStatusView;
 exports.clientStatusLineOf = clientStatusLineOf;
 exports.normalizePairingCode = normalizePairingCode;
 exports.shouldFollowServerDeviceName = shouldFollowServerDeviceName;
+exports.shouldReloadAfterClientActivation = shouldReloadAfterClientActivation;
+exports.awaitClientStatusReady = awaitClientStatusReady;
 exports.createLatestGate = createLatestGate;
 exports.savedRowRole = savedRowRole;
 exports.settingsRoleOf = settingsRoleOf;
@@ -2273,6 +2330,37 @@ function normalizePairingCode(input) {
 function shouldFollowServerDeviceName(deviceName, rowName, hasDraft) {
     return deviceName !== '' && deviceName !== rowName && !hasDraft;
 }
+function shouldReloadAfterClientActivation(input) {
+    if (!input.savedOrPaired || !input.nowClientRole)
+        return false;
+    if (!input.wasEffectiveClient)
+        return true;
+    if (input.streamInterceptAlreadyActive === false)
+        return true;
+    return false;
+}
+/**
+ * Poll {@link CLIENT_STATUS_ROUTE} until the backend answers ok — the bounded
+ * wait before the post-activation reload, covering the restart-watcher's row
+ * reload window (the route 404s / fails while the row restarts). Resolves
+ * after `maxMs` regardless, so the reload always fires. Injectable fetch and
+ * timings keep the check script fast; defaults are the page's 3 s / 250 ms.
+ */
+async function awaitClientStatusReady(fetchFn = fetch, maxMs = 3000, intervalMs = 250) {
+    const deadline = Date.now() + maxMs;
+    while (true) {
+        try {
+            if ((await fetchFn(exports.CLIENT_STATUS_ROUTE)).ok)
+                return;
+        }
+        catch {
+            // the row is mid-reload; keep polling
+        }
+        if (Date.now() >= deadline)
+            return;
+        await new Promise((resolve) => setTimeout(resolve, intervalMs));
+    }
+}
 function createLatestGate() {
     let current = 0;
     return {
@@ -3063,6 +3151,7 @@ exports.zh = {
     'previewExitFullscreen': '退出全屏',
     'allWorkspaces': '全部',
     'switchWorkspace': '切换工作区',
+    'pickWorkspaceNew': '选择工作区开始',
     'newSession': '新建会话',
     'noSessions': '暂无会话，点击右下角加号新建',
     'homeStatusOngoing': '运行中',
@@ -3586,6 +3675,7 @@ exports.en = {
     'previewExitFullscreen': 'Exit fullscreen',
     'allWorkspaces': 'All',
     'switchWorkspace': 'Switch workspace',
+    'pickWorkspaceNew': 'Pick a workspace to start',
     'newSession': 'New session',
     'noSessions': 'No sessions yet — tap + to start one',
     'homeStatusOngoing': 'Running',
@@ -8113,6 +8203,20 @@ exports.LAYOUT_CSS = `/* ---------- mobile-only layout ---------- */
     padding-top: var(--mnav-sat) !important;
   }
 
+  /* DSH 0.2.2-rc.1+: AppFrame pins centerCol to grid-area: 1/2 (column 2,
+     which is 0px wide in our 1-column mobile grid) and inserts a
+     [data-sidebar-mask] div before sidebarCol when viewport < 768. Pin
+     centerCol to column 1 so it fills the 1fr track, hide the host mask
+     (MobileNavOverlay renders its own backdrop on tablet, and MobileHome
+     replaces the drawer on phone), and match sidebarCol by its stable class
+     suffix alongside :first-child. */
+  [data-mobile-nav="frame"] > [class$="_centerCol"] {
+    grid-area: 1 / 1 !important;
+  }
+  [data-mobile-nav="frame"] > [data-sidebar-mask] {
+    display: none !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
@@ -8123,7 +8227,8 @@ exports.LAYOUT_CSS = `/* ---------- mobile-only layout ---------- */
      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 {
+  [data-mobile-nav="frame"] > :first-child,
+  [data-mobile-nav="frame"] > [class$="_sidebarCol"] {
     position: absolute !important;
     inset: 0 auto 0 0 !important;
     width: max-content !important;
@@ -8163,6 +8268,31 @@ exports.LAYOUT_CSS = `/* ---------- mobile-only layout ---------- */
     padding-top: var(--mnav-sat) !important;
     padding-bottom: var(--mnav-sab) !important;
   }
+  /* Right sidebar start/guide page (dsh-client-ui-sidebar-right GuideBody):
+     the host sets .Dv5QdW_tabBody { height: 100%; overflow: hidden } and
+     .F6Huca_guide { min-height: 100%; justify-content: center } with no
+     overflow-y. When many tab entries are registered (e.g. better-sidebar +
+     plugins), the centered flex column overflows equally out the top and
+     bottom of the locked 100%-height box — clipping the leading entries
+     ("文件", "Git") above y=0 with no way to scroll. Make the guide itself
+     the scroll container and replace justify-content:center with auto
+     margins on the first item and ::after so short lists stay centered
+     while long lists start cleanly at the top and scroll end-to-end. */
+  [data-sidebar-right-guide] {
+    flex: 1 1 0 !important;
+    min-height: 0 !important;
+    justify-content: flex-start !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+    padding-top: 24px !important;
+    padding-bottom: 24px !important;
+  }
+  [data-sidebar-right-guide] > :first-child {
+    margin-top: auto !important;
+  }
+  [data-sidebar-right-guide]::after {
+    margin-bottom: auto !important;
+  }
 
   /* Expanded state (frame without data-sidebar-collapsed) slides the drawer in.
      The open state must be transform:none — NOT translateX(0): an identity
@@ -8173,7 +8303,8 @@ exports.LAYOUT_CSS = `/* ---------- mobile-only layout ---------- */
      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 {
+  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) > :first-child,
+  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) > [class$="_sidebarCol"] {
     transform: none !important;
   }
 
@@ -9907,8 +10038,12 @@ exports.HOME_CSS = `/* ---------- phone app shell (< 768px) ---------- */
 
   /* The official sidebar is no longer a drawer on a phone — the home screen
      replaced it. Hidden outright (not translated off-screen) so it cannot
-     capture taps or hold layout. */
-  [data-mobile-nav="frame"] > :first-child {
+     capture taps or hold layout. DSH 0.2.2-rc.1+ inserts [data-sidebar-mask]
+     before [class$="_sidebarCol"] and mounts [data-shell-leading] (the host's
+     own floating drawer opener) on < 768px; hide all three. */
+  [data-mobile-nav="frame"] > :first-child,
+  [data-mobile-nav="frame"] > [class$="_sidebarCol"],
+  [data-mobile-nav="frame"] > [data-shell-leading] {
     display: none !important;
   }
   /* The header's drawer toggle opened that sidebar; with it gone the button
@@ -10570,6 +10705,14 @@ exports.HEADER_CSS = `/* ---------- session header five-piece reflow (< 768px) -
      instead of centered. Pinning the row makes it one 48px band again. */
   [data-phase] header [class$="_titleRow"] {
     position: relative;
+    /* UX-2 (2026-11-04): the host gives this row container-type: inline-size,
+       which implies layout containment — making the row the containing block
+       for every descendant position:fixed. That shifted every viewport
+       coordinate effects/native-trigger-overlay.ts writes by the safe-area
+       top and the row's horizontal padding. normal hands fixed descendants
+       back to the viewport; the phone block owns this layout, so nothing
+       scoped container queries against the row here. */
+    container-type: normal !important;
     display: grid;
     grid-template-columns: 92px 1fr 92px;
     grid-template-rows: minmax(48px, auto);
@@ -10637,55 +10780,30 @@ exports.HEADER_CSS = `/* ---------- session header five-piece reflow (< 768px) -
     min-width: 0;
     overflow: hidden;
   }
-  /* Subagent sessions keep ONE ancestor crumb (2026-08-18): the PC header
-     lets you tap the parent session's title to switch back — that affordance
-     was lost on phone when the whole parent chain was hidden as "多余项".
-     Show only the immediate parent (for agent-teams member sessions that IS
-     the captain/main session; deeper ancestors stay hidden — a 3-level chain
-     cannot fit the ~206px center column at 390px). The parent crumb is the
-     official breadcrumb <button> (dsh-client-ui-conversation renders
-     open(parentId) as its onClick), so tapping needs no JS from this plugin,
-     and main sessions (chain length 1) have no :nth-last-child(2) seg at
-     all — the centered single title is pixel-identical to before. */
-  [data-phase] header [class$="_crumbSeg"]:not(:nth-last-child(-n+2)) {
+  /* Subagent sessions hide every ancestor crumb (UX-2, 2026-11-04 —
+     supersedes the 2026-08-18 "keep ONE ancestor" rule). DSH 0.2.1 turned
+     the parent crumb into a session-TREE popup trigger
+     (…_switcherTrigger[aria-haspopup="tree"]) instead of a direct
+     switch-back tap, and that popup is desktop geometry on the phone; the
+     back button and the home stack stay the way back. Main sessions render
+     a single span with no segs at all, so :not(:last-child) never matches
+     there. */
+  [data-phase] header [class$="_crumbSeg"]:not(:last-child) {
     display: none !important;
   }
-  [data-phase] header [class$="_crumbSeg"]:nth-last-child(2) {
-    display: inline-flex;
-    align-items: center;
-    flex: none;
-    min-width: 0;
-    max-width: 38%;
-  }
-  /* Ancestors BEFORE the parent seg are hidden, which would leave the
-     parent seg's own leading "/" dangling at the start of the title. */
-  [data-phase] header [class$="_crumbSeg"]:nth-last-child(2) [class$="_crumbSep"] {
+  /* With the parent seg gone, the current seg's own leading "/" would
+     dangle before the title; the dissolved trigger container's stray
+     separator is covered by this same rule (its slot rules below hide it
+     too). One blanket rule instead of per-segment cases. */
+  [data-phase] header [class$="_crumbSep"] {
     display: none !important;
   }
-  /* Parent crumb: small tertiary text so the 19px current title stays the
-     visual anchor; min-height keeps a finger-sized target inside the 48px
-     row. Specificity (0,4,1) outranks the shared 19px _crumb rule below. */
-  [data-phase] header [class$="_crumbSeg"]:nth-last-child(2) [class$="_crumb"] {
-    font-size: 13px;
-    font-weight: 400;
-    color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .45));
-    min-height: 44px;
-    display: inline-flex;
-    align-items: center;
-    padding: 0 2px 0 6px;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
   [data-phase] header [class$="_crumbSeg"]:last-child {
     display: flex;
     align-items: center;
     min-width: 0;
     max-width: 100%;
   }
-  /* The last seg's own "/" is the divider between parent and current title —
-     it only exists when there IS an ancestor (index > 0), so it can simply
-     stay visible now that the parent seg shows. (It used to be hidden here:
-     with the parent hidden it dangled before the title.) */
   /* BOTH selectors are required: [class$=] matches the whole class
      ATTRIBUTE's suffix, and the current-session title button's attribute is
      "wSkVaW_crumb wSkVaW_crumbCurrent" — it ends in _crumbCurrent, so the _crumb
@@ -10795,12 +10913,17 @@ exports.HEADER_CSS = `/* ---------- session header five-piece reflow (< 768px) -
      pointer-events on the trigger: that is exactly what would take the tap
      target away again.
 
-     CSS keeps only two chores. Dissolve the root so its box (and its
-     stray separator, hidden below) stops occupying the breadcrumb, and let
-     the trigger participate from wherever the overlay pins it. And no menu
-     re-anchoring anymore: the 0.1.1 popover portals to <body> as
-     position:fixed and positions itself from the trigger's viewport rect
-     (measured 336px wide, fully on screen at 411px). */
+     CSS keeps only the resting dissolve: the root's box (and its stray
+     separator, hidden below) stops occupying the breadcrumb until the
+     overlay pins it. The measurement chore moved to the overlay (UX-2,
+     2026-11-04): the 0.1.1+ popover portals to <body> as position:fixed
+     and sizes itself from the OUTER anchor container (the official
+     rootRef, the trigger's parent div) — a display:contents root has no
+     box, so rootRef.getBoundingClientRect() was all zeros and the panel
+     landed at 12,12 inside the status bar. effects/
+     native-trigger-overlay.ts now pins container + trigger to the pill's
+     rect together (its inline display beats this rule's !important, style
+     attribute outranks selectors at author-important). */
   [data-phase] header [data-slot="conversation.session.header.actions"] > *:has(> button[class$="_trigger"]),
   [data-phase] header [data-slot="conversation.session.header.lineage"] > *:has(> button[class$="_trigger"]) {
     display: contents !important;
@@ -10809,6 +10932,18 @@ exports.HEADER_CSS = `/* ---------- session header five-piece reflow (< 768px) -
   [data-phase] header [data-slot="conversation.session.header.lineage"] [class$="_separator"] {
     display: none !important;
   }
+  /* The popovers themselves portal to <body> as position:fixed layers
+     (class suffix _menu, z-index 100) and place themselves from the pill's
+     viewport rect with margin 12 — the overlay above is what makes that
+     rect correct. This is only a floor: the panels' 336px width overflows
+     320px-class phones, and a tall list must not run under the notch or
+     the home indicator. [id$="-menu"] keeps the composer's model menu out
+     of it — composer.css.ts owns that surface, and this file sits before
+     it in styles/index.ts so its own rules still win the tie. */
+  body > [class$="_menu"]:not([id$="-menu"]) {
+    max-width: calc(100vw - 24px) !important;
+    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;
+  }
   /* The agent-preset mode badge specifically survives the blanket hide
      above: layout.css.ts's shared <=1023px block targets it directly
      (header [class$="_label"]:has(> svg) { display: block !important }),
@@ -10837,8 +10972,12 @@ exports.HEADER_CSS = `/* ---------- session header five-piece reflow (< 768px) -
     display: inline-flex !important;
   }
 
-  /* Back button: 44pt touch target, leftmost column. */
+  /* Back button: 44pt touch target, leftmost column.
+     order: -1 keeps it to the left of @deepseek-ai/dsh-experimental-client-ui-agent-team's
+     TeamAction ([data-team-action], registered into header.actions at order -20 with
+     default flex order 0). */
   [data-mobile-nav="header-back"] {
+    order: -1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -10855,6 +10994,13 @@ exports.HEADER_CSS = `/* ---------- session header five-piece reflow (< 768px) -
   [data-mobile-nav="header-back"]:active {
     opacity: .6;
   }
+  /* TeamAction's own stylesheet hides .XdyUwa_triggerLabel via
+     @container (width<=480px) against _titleRow's container-type: inline-size.
+     Shedding container-type on _titleRow above (UX-2) disabled that container
+     query, so hide the label explicitly on phone and keep only the icon. */
+  [data-phase] header [data-team-action] [class$="_triggerLabel"] {
+    display: none !important;
+  }
 
   /* Info + workbench utility buttons, rightmost column. */
   [data-mobile-nav="header-info"],
@@ -10945,6 +11091,7 @@ exports.HEADER_CSS = `/* ---------- session header five-piece reflow (< 768px) -
      top:100% lands both on the same 28px line. z-index puts it above the
      row it overlaps. */
   [data-mobile-nav="header-activity"] {
+    pointer-events: none;
     position: absolute;
     right: 0;
     top: 100%;
@@ -11406,6 +11553,12 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
      …, open-in-app, deliverables, …), and none opens through this trigger
      while no marked menu is up. */
   body > div[role="menu"][data-zen-sheet="perm"],
+  /* UX-3: the hero page's workspace menu, marked by the same effect through
+     its own two triggers (the WorkspaceChip and the placeholder card) with
+     the workspace value — a distinct marker so the pick that starts the
+     workspace switch (effects/permission-sheet.ts) can key on THIS sheet
+     without ever touching permission options. */
+  body > div[role="menu"][data-zen-sheet="workspace"],
   ${MODEL_MENU} {
     position: fixed !important;
     left: 0 !important;
@@ -11438,6 +11591,7 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
      older hosts. */
   ${PERM} [role="menu"] [role="menuitem"],
   body > div[role="menu"][data-zen-sheet="perm"] [role="menuitem"],
+  body > div[role="menu"][data-zen-sheet="workspace"] [role="menuitem"],
   ${MODEL_MENU} [role="menuitem"],
   ${MODEL_MENU} [role="menuitemradio"],
   ${MODEL_MENU} [class$="_option"],
@@ -11586,11 +11740,28 @@ exports.COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- */
   body:has(> [id$="-menu"][class$="_menu"]:is([role="menu"], [role="group"])) [data-chat-flow] + div,
   /* T70: the portaled permission menu (marked by effects/permission-sheet.ts). */
   body:has(> div[role="menu"][data-zen-sheet="perm"]) [data-chat-flow] + div,
+  /* UX-3: the portaled hero workspace menu, same treatment. */
+  body:has(> div[role="menu"][data-zen-sheet="workspace"]) [data-chat-flow] + div,
   /* T-issue30: an inline menu a parked chip opened (escaped to a fixed
      sheet by 4a). */
   body:has([data-zen-sheet-extras] [role="menu"]) [data-chat-flow] + div {
     display: none !important;
   }
+  /* --- 4c. UX-3: the workspace switch lock ---
+     Between picking a workspace in the hero sheet and the new blank session
+     landing (selectWorkspace → POST /api/session/create → replaceMain
+     remounts the conversation), the composer still belongs to the OLD blank
+     session: a message sent in that window lands there and is then wiped by
+     the remount, bouncing the UI back to the "choose a workspace" state.
+     effects/permission-sheet.ts stamps data-zen-ws-switching on <html> for
+     exactly that window — the lock releases when the conversation root's
+     data-conversation-session has moved and the placeholder card is gone,
+     with a 1.5 s cap — and the dim (not just pointer-events) makes the
+     freeze visible instead of reading as a dead input. */
+  html[data-zen-ws-switching] [data-slot="conversation.composer.bar"] {
+    pointer-events: none !important;
+    opacity: .6 !important;
+  }
   /* --- 5. input box: two lines minimum, five lines maximum ---
      The official autosizer drives the box off the hidden mirror's height, so
      a min-height on the mirror IS the min-height of the field; the scroll cap
@@ -13244,12 +13415,17 @@ exports.CHIPS_CSS = `/* ---------- chips row + settings entry (S5) ---------- */
      logoRow/newSession/regionArea at \`display: flex\`, which is only
      hidden from view by being fully underneath the usage-stats panel's
      opaque body, not by this rule. */
-  [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) {
+  [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay),
+  [data-mobile-nav="frame"] > [class$="_sidebarCol"]:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) {
     display: contents !important;
+    visibility: visible !important;
   }
   [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_logoRow"],
   [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_newSession"],
-  [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_regionArea"] {
+  [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_regionArea"],
+  [data-mobile-nav="frame"] > [class$="_sidebarCol"]:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_logoRow"],
+  [data-mobile-nav="frame"] > [class$="_sidebarCol"]:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_newSession"],
+  [data-mobile-nav="frame"] > [class$="_sidebarCol"]:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_regionArea"] {
     display: none !important;
   }
 
@@ -15112,7 +15288,10 @@ __modules["client/effects/permission-sheet.js"] = function (require, module, exp
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isUnmarkedPortalMenu = isUnmarkedPortalMenu;
-exports.clickArmsPermissionSheet = clickArmsPermissionSheet;
+exports.sheetKindForTrigger = sheetKindForTrigger;
+exports.pointerdownOnWorkspaceTrigger = pointerdownOnWorkspaceTrigger;
+exports.menuitemClickStartsWorkspaceSwitch = menuitemClickStartsWorkspaceSwitch;
+exports.workspaceSwitchSettled = workspaceSwitchSettled;
 exports.installPermissionSheet = installPermissionSheet;
 /** Phone breakpoint — the same query every phone-only effect in this plugin uses. */
 const PHONE_QUERY = '(max-width: 767px)';
@@ -15123,7 +15302,18 @@ const PHONE_QUERY = '(max-width: 767px)';
  * NO aria-controls on 0.2.0 (the Menu primitive portals its list to body
  * and links nothing back), so the click is the only open signal there is.
  */
-const TRIGGER_SELECTOR = '[data-slot="conversation.input.permission"] button[class$="_trigger"]';
+const PERM_TRIGGER_SELECTOR = '[data-slot="conversation.input.permission"] button[class$="_trigger"]';
+/**
+ * UX-3: the HERO page's two workspace triggers (WorkspaceSheet slot impl,
+ * verified in the dsh-client-ui-conversation bundle 2026-11-05):
+ * - `WorkspaceChip` — a bare `button` whose hashed class ends in
+ *   `_workspace`, carrying `aria-haspopup="menu"` + `aria-expanded`;
+ * - the placeholder card — when a blank hero session has no workspace yet
+ *   the whole `div[data-composer-card]` carries `cardWorkspaceTrigger` and
+ *   its click opens the same menu (`onRequestWorkspace`).
+ * Both open a `body > div[role="menu"]` of `button[role="menuitem"]` items.
+ */
+const WORKSPACE_TRIGGER_SELECTOR = '[class$="_workspace"][aria-haspopup="menu"], [data-composer-card][class*="_cardWorkspaceTrigger"]';
 /**
  * What the Menu primitive portals on 0.2.0: a `role=menu` div DIRECTLY under
  * body, carrying `data-menu-material` and a randomized `--dsh-menu-anchor`
@@ -15132,15 +15322,36 @@ const TRIGGER_SELECTOR = '[data-slot="conversation.input.permission"] button[cla
  * host has MANY `portal: true` Menus (agent-preset, chat preference rows,
  * the Enter-behavior row, the workspace sidebar's 「…」, open-in-app,
  * deliverables, the copy button's confirm, …), and none of them may become
- * a bottom sheet. That is why this effect exists: a click on the permission
- * trigger arms a short window and the next body-level menu to land is OURS
- * to mark — while a marked menu still on the page (the close click) keeps
- * the window shut.
+ * a bottom sheet. That is why this effect exists: a click on a sheet trigger
+ * arms a short window and the next body-level menu to land is OURS to mark —
+ * while a marked menu still on the page (the close click) keeps the window
+ * shut.
  */
 const PORTAL_MENU_SELECTOR = 'body > div[role="menu"]';
 /** The marker composer.css.ts section 4 styles into the bottom sheet. */
 const SHEET_MARKER = 'data-zen-sheet';
-const SHEET_VALUE = 'perm';
+const SHEET_VALUE_PERM = 'perm';
+const SHEET_VALUE_WORKSPACE = 'workspace';
+/**
+ * UX-3: the switch lock. Picking a workspace in the hero sheet runs
+ * `selectWorkspace` → `POST /api/session/create` → `replaceMain` — the
+ * conversation unmounts and remounts (`useMaybeIncarnation` epoch+1) and the
+ * composer briefly still belongs to the OLD blank session. A message sent in
+ * that window lands on the old session and is then wiped by the remount,
+ * bouncing the UI back to the "choose a workspace" placeholder. While the
+ * `data-zen-ws-switching` attribute sits on `<html>`, composer.css dead-zones
+ * and dims the composer bar; the lock releases the moment the conversation
+ * root's `data-conversation-session` has MOVED and the placeholder card is
+ * gone — with a hard cap so a failed/no-op switch cannot freeze the input.
+ */
+const SWITCH_MARKER = 'data-zen-ws-switching';
+const SWITCH_LOCK_MS = 1_500;
+const SESSION_ATTR = 'data-conversation-session';
+const SESSION_SELECTOR = `[${SESSION_ATTR}]`;
+/** The hero's inert "choose a workspace" state: the whole input card IS the trigger. */
+const PLACEHOLDER_CARD_SELECTOR = '[data-composer-card][class*="_cardWorkspaceTrigger"]';
+/** Spelled literally (not interpolated) — the test pins this exact text as the perm/workspace discriminator. */
+const WS_MENUITEM_SELECTOR = 'body > div[role="menu"][data-zen-sheet="workspace"] button[role="menuitem"]';
 /**
  * Whether ONE body-level node is a portal menu that does not yet carry the
  * sheet marker. Pure over the node's own methods: `matches` answers the
@@ -15149,17 +15360,52 @@ const SHEET_VALUE = 'perm';
 function isUnmarkedPortalMenu(node) {
     return node.matches(PORTAL_MENU_SELECTOR) && node.getAttribute(SHEET_MARKER) === null;
 }
+const inSeat = (seat) => seat !== undefined && seat !== null;
 /**
- * Whether one click event's target arms the marking window: the phone shell
- * only, and only a click that started inside the permission seat's trigger.
- * Any other button — the sidebar's 「…」, a copy button — never arms, so
- * the menus they open are never marked.
+ * Which sheet ONE click event's target arms: the phone shell only. The
+ * permission seat's trigger arms `perm` (T70); the hero page's two
+ * workspace triggers arm `workspace` (UX-3). Any other button — the
+ * sidebar's 「…」, a copy button — arms nothing, so the menus they open are
+ * never marked.
  */
-function clickArmsPermissionSheet(target, phoneMatches) {
+function sheetKindForTrigger(target, phoneMatches) {
     if (!phoneMatches)
+        return null;
+    if (inSeat(target?.closest(PERM_TRIGGER_SELECTOR)))
+        return 'perm';
+    if (inSeat(target?.closest(WORKSPACE_TRIGGER_SELECTOR)))
+        return 'workspace';
+    return null;
+}
+/**
+ * UX-3: whether a pointerdown landed inside a WORKSPACE trigger — the only
+ * triggers whose open/close suffers the outside-pointerdown + toggle-click
+ * race (the Menu closes the portaled sheet on the outside pointerdown, and
+ * the trigger's own click would flip it straight back open). The permission
+ * trigger toggles by click alone and is never suppressed.
+ */
+function pointerdownOnWorkspaceTrigger(target) {
+    return inSeat(target?.closest(WORKSPACE_TRIGGER_SELECTOR));
+}
+/**
+ * UX-3: whether a click started on a workspace item inside the MARKED
+ * workspace sheet — the pick that starts the switch lock. Keyed on the
+ * `workspace` marker value, so a permission option can never lock the
+ * composer.
+ */
+function menuitemClickStartsWorkspaceSwitch(target) {
+    return inSeat(target?.closest(WS_MENUITEM_SELECTOR));
+}
+/**
+ * Whether the workspace switch has settled: the conversation root now names
+ * a DIFFERENT session than the one the lock was taken on, and the no-workspace
+ * placeholder card is gone (the optimistic `pendingWorkspaceId` display alone
+ * is not enough — the remount resets it).
+ */
+function workspaceSwitchSettled(probe, lockedSessionValue) {
+    if (probe.currentSessionValue() === lockedSessionValue)
         return false;
-    const seat = target?.closest(TRIGGER_SELECTOR);
-    return seat !== undefined && seat !== null;
+    return !probe.placeholderOpen();
 }
 /**
  * How long an OPEN click stays armed. The portal lands in the same React
@@ -15178,18 +15424,36 @@ const ARM_MS = 1_500;
  * selectors stopped matching, and the phone got a tiny floating popup. The
  * host offers no stable attribute to key the portal off — the anchor is a
  * per-instance useId, there is no id and no aria-controls — so this effect
- * marks it: the trigger's click arms a window, the observer stamps the next
- * body-level menu with `data-zen-sheet="perm"`, and the stylesheet (which
+ * marks it: the trigger's click arms a short window, the observer stamps the
+ * next body-level menu with `data-zen-sheet`, and the stylesheet (which
  * only the phone shell loads) turns THAT into the sheet. The portal menu
  * unmounts on close, so the marker's lifetime is exactly the menu's; the
  * 0.1.7 inline structure keeps working through the untouched descendant
  * selectors, and the desktop shell never loads this stylesheet at all.
+ *
+ * UX-3 extends the same machinery to the hero page's workspace menu:
+ * - the two workspace triggers arm a `data-zen-sheet="workspace"` sheet;
+ * - a pointerdown on a workspace trigger while a marked sheet is up
+ *   suppresses the trigger's own click, so one tap reliably CLOSES (the
+ *   host's outside-pointerdown close stands instead of being undone by the
+ *   toggle click);
+ * - a pick inside the workspace sheet locks the composer for the length of
+ *   the `selectWorkspace` remount (see SWITCH_MARKER above).
  */
 function installPermissionSheet(ctx) {
     ctx.effect(() => {
         const phone = window.matchMedia(PHONE_QUERY);
         let armed = false;
+        let armedKind = SHEET_VALUE_PERM;
         let armTimer;
+        // UX-3 toggle debounce: recomputed on EVERY pointerdown, consumed by the
+        // next click — a pointerdown whose click never comes (drag cancel) cannot
+        // leave a stale swallow behind.
+        let suppressClick = false;
+        // Set when a swallowed click found the marked menu STILL on the page
+        // (the pointerdown close did not land): the next tap passes through to
+        // the host's own toggle instead of being swallowed forever.
+        let allowToggle = false;
         const disarm = () => {
             armed = false;
             if (armTimer !== undefined) {
@@ -15197,9 +15461,75 @@ function installPermissionSheet(ctx) {
                 armTimer = undefined;
             }
         };
+        const markedSheet = () => document.querySelector(`${PORTAL_MENU_SELECTOR}[${SHEET_MARKER}]`);
+        const readSessionValue = () => document.querySelector(SESSION_SELECTOR)?.getAttribute(SESSION_ATTR) ?? null;
+        const placeholderOpen = () => document.querySelector(PLACEHOLDER_CARD_SELECTOR) !== null;
+        // -- UX-3 switch lock -------------------------------------------------
+        let lockedSessionValue = null;
+        let lockTimer;
+        let lockObserver;
+        const releaseLock = () => {
+            if (lockTimer !== undefined) {
+                clearTimeout(lockTimer);
+                lockTimer = undefined;
+            }
+            lockObserver?.disconnect();
+            lockObserver = undefined;
+            lockedSessionValue = null;
+            document.documentElement.removeAttribute(SWITCH_MARKER);
+        };
+        const checkLock = () => {
+            if (lockedSessionValue === null)
+                return;
+            if (workspaceSwitchSettled({ currentSessionValue: readSessionValue, placeholderOpen }, lockedSessionValue)) {
+                releaseLock();
+            }
+        };
+        const startSwitchLock = () => {
+            if (lockedSessionValue === null) {
+                lockedSessionValue = readSessionValue();
+                document.documentElement.setAttribute(SWITCH_MARKER, '1');
+                lockObserver = new MutationObserver(checkLock);
+                // The session id moves on the conversation root (attribute) and the
+                // placeholder card mounts/unmounts (childList) — plus class flips on
+                // the card are attribute mutations too. One bounded subtree watch
+                // covers all of it.
+                lockObserver.observe(document.documentElement, { childList: true, subtree: true, attributes: true });
+            }
+            if (lockTimer !== undefined)
+                clearTimeout(lockTimer);
+            lockTimer = setTimeout(releaseLock, SWITCH_LOCK_MS);
+        };
+        // ---------------------------------------------------------------------
+        const onCapturePointerDown = (event) => {
+            const target = event.target instanceof Element ? event.target : null;
+            const onTrigger = pointerdownOnWorkspaceTrigger(target);
+            suppressClick = onTrigger && markedSheet() !== null && !allowToggle;
+            if (!suppressClick)
+                allowToggle = false;
+        };
         const onCaptureClick = (event) => {
+            // UX-3: let the outside-pointerdown close stand — stopPropagation
+            // keeps the click from React's root listeners, so the trigger cannot
+            // toggle the sheet straight back open.
+            if (suppressClick) {
+                suppressClick = false;
+                if (markedSheet() !== null)
+                    allowToggle = true;
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
             const target = event.target instanceof Element ? event.target : null;
-            if (!clickArmsPermissionSheet(target, phone.matches))
+            // UX-3: a pick inside the workspace sheet starts the switch lock — the
+            // composer must not accept input on the old blank session while
+            // selectWorkspace remounts the conversation underneath it.
+            if (phone.matches && menuitemClickStartsWorkspaceSwitch(target)) {
+                startSwitchLock();
+                return;
+            }
+            const kind = sheetKindForTrigger(target, phone.matches);
+            if (kind === null)
                 return;
             // T70-fix: the trigger TOGGLES. A click that CLOSES the menu lands
             // while the marked menu is still in the DOM (capture runs before the
@@ -15208,9 +15538,10 @@ function installPermissionSheet(ctx) {
             // body-level menu opening inside that window would be mis-marked as
             // ours. A marked menu present at click time means this click can only
             // be the close (or a no-op re-open), never an opening we must catch.
-            if (document.querySelector(`${PORTAL_MENU_SELECTOR}[${SHEET_MARKER}="${SHEET_VALUE}"]`) !== null)
+            if (markedSheet() !== null)
                 return;
             armed = true;
+            armedKind = kind === 'workspace' ? SHEET_VALUE_WORKSPACE : SHEET_VALUE_PERM;
             if (armTimer !== undefined)
                 clearTimeout(armTimer);
             armTimer = setTimeout(disarm, ARM_MS);
@@ -15220,11 +15551,12 @@ function installPermissionSheet(ctx) {
             if (!armed)
                 return;
             disarm();
-            root.setAttribute(SHEET_MARKER, SHEET_VALUE);
+            root.setAttribute(SHEET_MARKER, armedKind);
         };
         // Capture phase: the host's own handlers may stop the click's bubble
         // (the trigger toggles `open` itself), so listen on the document in
         // capture and never depend on propagation reaching us.
+        document.addEventListener('pointerdown', onCapturePointerDown, true);
         document.addEventListener('click', onCaptureClick, true);
         const observer = new MutationObserver((records) => {
             if (!armed)
@@ -15238,9 +15570,11 @@ function installPermissionSheet(ctx) {
         });
         observer.observe(document.body, { childList: true });
         return () => {
+            document.removeEventListener('pointerdown', onCapturePointerDown, true);
             document.removeEventListener('click', onCaptureClick, true);
             observer.disconnect();
             disarm();
+            releaseLock();
             // A still-open marked menu outliving this effect keeps its marker only
             // until the user closes it (the element unmounts); scrubbing here
             // would fight a React commit mid-flight for no visual gain.
@@ -15276,36 +15610,75 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.installNativeTriggerOverlay = installNativeTriggerOverlay;
 const PHONE = '(max-width: 767px)';
 const HEADER = '[data-phase] header';
-/** Pill → the official trigger it fronts. Same ARIA split the pills use. */
+/**
+ * Pill → the official trigger it fronts. Same ARIA split the pills use,
+ * narrowed by the action-button class tail (UX-2, 2026-11-04): the bare
+ * `button[aria-haspopup="tree"]` matched the breadcrumb's parent-session
+ * switcher first (`…_switcherTrigger` — also a tree popup, earlier in
+ * document order), so the pill got the wrong button laid over it. The
+ * suffix matcher is case-sensitive and `_switcherTrigger` does not end in
+ * `_trigger`, so the catalog trigger is the only match left.
+ */
 const PAIRS = [
-    { pill: '[data-activity-kind="subagent"]', trigger: `${HEADER} button[aria-haspopup="tree"]` },
+    { pill: '[data-activity-kind="subagent"]', trigger: `${HEADER} button[class$="_trigger"][aria-haspopup="tree"]` },
     { pill: '[data-activity-kind="job"]', trigger: `${HEADER} button[class$="_trigger"]:not([aria-haspopup])` },
 ];
-/** Marks a trigger we have taken over, so cleanup can find it again. */
+/** Marks a trigger (and its anchor container) we have taken over, so cleanup can find them again. */
 const TAKEN = 'data-zen-overlay';
+/** The shared fixed-viewport box: exactly what the portalled popover measures against. */
+function pin(el, r, display) {
+    el.style.setProperty('position', 'fixed', 'important');
+    el.style.setProperty('left', `${r.left}px`, 'important');
+    el.style.setProperty('top', `${r.top}px`, 'important');
+    el.style.setProperty('width', `${r.width}px`, 'important');
+    el.style.setProperty('height', `${r.height}px`, 'important');
+    el.style.setProperty('margin', '0', 'important');
+    el.style.setProperty('padding', '0', 'important');
+    el.style.setProperty('border', '0', 'important');
+    if (display !== undefined)
+        el.style.setProperty('display', display, 'important');
+}
 function place(trigger, pill) {
     const r = pill.getBoundingClientRect();
     if (r.width === 0 || r.height === 0)
         return;
     trigger.setAttribute(TAKEN, '');
+    pin(trigger, r);
     // Fixed, not absolute: the header's containing block is not the pill's, and
     // fixed rects are exactly what the portalled popover measures against.
-    trigger.style.setProperty('position', 'fixed', 'important');
-    trigger.style.setProperty('left', `${r.left}px`, 'important');
-    trigger.style.setProperty('top', `${r.top}px`, 'important');
-    trigger.style.setProperty('width', `${r.width}px`, 'important');
-    trigger.style.setProperty('height', `${r.height}px`, 'important');
-    trigger.style.setProperty('margin', '0', 'important');
-    trigger.style.setProperty('padding', '0', 'important');
-    trigger.style.setProperty('border', '0', 'important');
     trigger.style.setProperty('opacity', '0', 'important');
     trigger.style.setProperty('overflow', 'hidden', 'important');
     trigger.style.setProperty('pointer-events', 'auto', 'important');
     trigger.style.setProperty('z-index', '3', 'important');
+    // The official popover (useAnchoredPosition) sizes itself from the OUTER
+    // anchor container — the trigger's parent div, the official rootRef — not
+    // the button. header.css.ts dissolves that container with
+    // display:contents, so its rect was all zeros and the panel landed at
+    // 12,12 inside the status bar (UX-2). Give the anchor the pill's exact
+    // box: the inline display beats the stylesheet's display:contents
+    // !important (the style attribute outranks selectors at author-important),
+    // so rootRef.getBoundingClientRect() finally sees the pill. pointer-events
+    // none keeps the invisible box from ever stealing a tap — the trigger
+    // child above it is the tappable one. z-index 3 is required on the anchor
+    // too: position:fixed unconditionally creates a stacking context (even at
+    // z-index:auto, stack level 0), which otherwise traps the trigger's own
+    // z-index:3 underneath [data-mobile-nav="header-activity"] (z-index:1).
+    const anchor = trigger.parentElement;
+    if (anchor !== null && anchor.closest(HEADER) !== null) {
+        anchor.setAttribute(TAKEN, '');
+        pin(anchor, r, 'block');
+        anchor.style.setProperty('pointer-events', 'none', 'important');
+        anchor.style.setProperty('z-index', '3', 'important');
+    }
 }
 function release(trigger) {
     trigger.removeAttribute(TAKEN);
     trigger.style.cssText = '';
+    const anchor = trigger.parentElement;
+    if (anchor !== null && anchor.hasAttribute(TAKEN)) {
+        anchor.removeAttribute(TAKEN);
+        anchor.style.cssText = '';
+    }
 }
 function installNativeTriggerOverlay(ctx) {
     ctx.effect(() => {
@@ -17593,6 +17966,11 @@ function SettingsSectionPage({ config, shares, t }) {
         setClaimBusy(true);
         setClaimFail(null);
         setClaimWriteFailed(false);
+        // UX-1: captured BEFORE the pairing — whether the page ran as client, and
+        // whether the backend's stream interceptor was already active per the
+        // last client/status diagnostics.
+        const wasEffectiveClient = clientRole;
+        const streamInterceptAlreadyActive = clientView?.intercept?.installed === true;
         // T60: one name for both halves of the round-trip — trimmed and legal
         // ({@link claimDeviceNameOf}), sent to the server AND written into the
         // row when the claim lands.
@@ -17625,6 +18003,20 @@ function SettingsSectionPage({ config, shares, t }) {
                 // could not store falls back to the name we actually sent.
                 const echoed = typeof body.deviceName === 'string' && body.deviceName !== '' ? (0, settings_form_ts_1.claimDeviceNameOf)(body.deviceName, claimName) : claimName;
                 const landed = await config.writeClientPairing(urlToWrite, body.token, echoed);
+                if (landed && (0, settings_form_ts_1.shouldReloadAfterClientActivation)({
+                    wasEffectiveClient,
+                    nowClientRole: true,
+                    savedOrPaired: true,
+                    streamInterceptAlreadyActive,
+                })) {
+                    // UX-1: FIRST pairing on a page whose resident global streams were
+                    // opened unwrapped (or with the interceptor inactive) — wait out the
+                    // backend's row-reload window, then reload so the streams reopen
+                    // wrapped and the server's sessions enter the sidebar.
+                    setClaimBusy(false);
+                    void (0, settings_form_ts_1.awaitClientStatusReady)().then(() => window.location.reload());
+                    return;
+                }
                 if (landed) {
                     // The draft did its job — it now equals the displayed value, and
                     // keeping it would be a phantom edit (T60).
@@ -17753,8 +18145,29 @@ function SettingsSectionPage({ config, shares, t }) {
                     ? t('settings.statusUnknown')
                     : t('settings.statusUnavailable', { code: load.status }) })), !clientRole && load.state === 'stale' && ((0, jsx_runtime_1.jsx)("p", { className: "zr-settings-hint", "data-invalid": "true", children: t('settings.refreshFailed') })), clientRole && clientLoad.state === 'error' && ((0, jsx_runtime_1.jsx)("p", { className: "zr-settings-hint", "data-invalid": "true", children: t('settings.statusUnknown') })), clientRole && clientLoad.state === 'stale' && ((0, jsx_runtime_1.jsx)("p", { className: "zr-settings-hint", "data-invalid": "true", children: t('settings.refreshFailed') })), data?.viaGateway === true && (0, jsx_runtime_1.jsx)("p", { className: "zr-settings-notice", children: t('settings.remoteNotice') }), (0, jsx_runtime_1.jsx)("div", { className: "zr-settings-card", children: (0, jsx_runtime_1.jsxs)(dsh_client_ui_primitives_1.SettingsForm, { labels: labels, state: form, onSave: () => {
                         const reloadsRow = saveReloadsRow();
-                        void config.save().then((landed) => { if (landed)
-                            saveLanded(reloadsRow); });
+                        // UX-1: captured BEFORE the save — whether the page ran as client,
+                        // and whether the backend's stream interceptor was already active
+                        // per the last client/status diagnostics.
+                        const wasEffectiveClient = clientRole;
+                        const streamInterceptAlreadyActive = clientView?.intercept?.installed === true;
+                        void config.save().then((landed) => {
+                            if (!landed)
+                                return;
+                            if ((0, settings_form_ts_1.shouldReloadAfterClientActivation)({
+                                wasEffectiveClient,
+                                nowClientRole: config.savedRoleIsClient(),
+                                savedOrPaired: true,
+                                streamInterceptAlreadyActive,
+                            })) {
+                                // UX-1: the save first-activated the client interceptor while
+                                // this page's resident global streams were opened unwrapped —
+                                // wait out the row-reload window, then reload so the streams
+                                // reopen wrapped and the server's sessions enter the sidebar.
+                                void (0, settings_form_ts_1.awaitClientStatusReady)().then(() => window.location.reload());
+                                return;
+                            }
+                            saveLanded(reloadsRow);
+                        });
                     }, onDiscard: () => { config.discard(); }, children: [(0, jsx_runtime_1.jsx)("h3", { className: "zr-settings-card-title", children: t('settings.roleTitle') }), select(form.role, 'role', t('settings.role'), t('settings.roleHint'), ['host', 'client'], (option) => (option === 'host' ? t('settings.roleHost') : t('settings.roleClient'))), text(form.serverName, 'serverName', t('settings.fieldServerName'), t(clientRole ? 'settings.fieldServerNameHintClient' : 'settings.fieldServerNameHint'), t('settings.invalidName')), reloadPending && (0, jsx_runtime_1.jsx)("p", { className: "zr-settings-status-line", children: t('settings.reloadNote') }), !clientRole && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h3", { className: "zr-settings-card-title", children: t('settings.gatewayTitle') }), text(form.host, 'host', t('settings.fieldHost'), t('settings.fieldHostHint'), '', false, t('settings.fieldHostNote')), text(form.port, 'port', t('settings.fieldPort'), t('settings.fieldPortHint'), t('settings.invalidPort'), true), text(form.trustedProxies, 'trustedProxies', t('settings.fieldTrustedProxies'), t('settings.fieldTrustedProxiesHint'), ''), text(form.rateLimit, 'rateLimit', t('settings.fieldRateLimit'), t('settings.fieldRateLimitHint'), t('settings.invalidPositiveInt'), true), text(form.vapidSubject, 'vapidSubject', t('settings.fieldVapidSubject'), t('settings.fieldVapidSubjectHint'), ''), (0, jsx_runtime_1.jsx)("h3", { className: "zr-settings-card-title", children: t('settings.pushTitle') }), bool(form.pushSummary, 'pushSummary', t('settings.fieldPushSummary'), t('settings.fieldPushSummaryHint')), bool(form.pushTurnEnd, 'pushTurnEnd', t('settings.fieldPushTurnEnd'), t('settings.fieldPushTurnEndHint')), bool(form.pushTool, 'pushTool', t('settings.fieldPushTool'), t('settings.fieldPushToolHint')), text(form.pushDebounceMs, 'pushDebounceMs', t('settings.fieldPushDebounceMs'), t('settings.fieldPushDebounceMsHint'), t('settings.invalidNonNegativeInt'), true), select(form.lang, 'lang', t('settings.fieldLang'), t('settings.fieldLangHint'), ['auto', 'zh', 'en'], (option) => (option === 'auto' ? t('settings.langAuto') : option === 'zh' ? t('settings.langZh') : t('settings.langEn'))), (0, jsx_runtime_1.jsx)("h3", { className: "zr-settings-card-title", children: t('settings.shareTitle') }), text(form.idleHours, 'idleHours', t('settings.fieldIdleHours'), t('settings.fieldIdleHoursHint'), t('settings.invalidHours'), true), bool(form.autoShareNewSessions, 'autoShareNewSessions', t('settings.fieldAutoShare'), t('settings.fieldAutoShareHint')), (0, jsx_runtime_1.jsx)("h3", { className: "zr-settings-card-title", children: t('settings.bridge.title') }), bridgeState === 'loading' && (0, jsx_runtime_1.jsx)("p", { className: "zr-settings-hint", children: t('settings.bridge.loading') }), bridgeState === 'error' && (0, jsx_runtime_1.jsx)("p", { className: "zr-settings-hint", "data-invalid": "true", children: t('settings.bridge.loadFailed') }), bridgeState === 'empty' && (0, jsx_runtime_1.jsx)("p", { className: "zr-settings-hint", children: t('settings.bridge.empty') }), bridgeLoad.rows.map((row) => {
                                     let current = {};
                                     try {
@@ -19620,6 +20033,12 @@ function GatewayWizard(props) {
     const runClientClaim = async () => {
         setFormError(null);
         setClientClaimFail(null);
+        // UX-1: the facts that decide the post-pairing reload — whether the page
+        // opened as an already-effective client, and whether the backend's
+        // stream interceptor was already active (from the last client/status
+        // diagnostics). Captured BEFORE the role switch and the claim below.
+        const wasEffectiveClient = effectiveClient;
+        const streamInterceptAlreadyActive = clientView?.intercept?.installed === true;
         const trimmedUrl = clientServerUrl.trim();
         const normalizedCode = (0, settings_form_ts_1.normalizePairingCode)(clientPairCode);
         if (trimmedUrl === '' || !/^https?:\/\//i.test(trimmedUrl)) {
@@ -19661,7 +20080,21 @@ function GatewayWizard(props) {
             if (body?.ok === true && typeof body.token === 'string' && body.token !== '') {
                 const urlToWrite = typeof body.serverUrl === 'string' && body.serverUrl !== '' ? body.serverUrl : trimmedUrl;
                 const echoed = typeof body.deviceName === 'string' && body.deviceName.trim() !== '' ? body.deviceName.trim() : deviceName;
-                await config.writeClientPairing(urlToWrite, body.token, echoed);
+                const landed = await config.writeClientPairing(urlToWrite, body.token, echoed);
+                if (landed && (0, settings_form_ts_1.shouldReloadAfterClientActivation)({
+                    wasEffectiveClient,
+                    nowClientRole: true,
+                    savedOrPaired: true,
+                    streamInterceptAlreadyActive,
+                })) {
+                    // UX-1: this was the FIRST client activation while the page's three
+                    // resident global streams were opened unwrapped — wait out the
+                    // backend's row-reload window, then reload so the streams reopen
+                    // wrapped and the server's shared sessions enter the sidebar.
+                    await (0, settings_form_ts_1.awaitClientStatusReady)();
+                    window.location.reload();
+                    return;
+                }
                 setClientPairCode('');
                 await loadClientStatus();
                 setStep('verify');