dsh-zen-remote 2.3.8 → 2.3.10

package/src/client/effects/permission-sheet.ts

@@ -10,7 +10,20 @@ 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
@@ -20,23 +33,46 @@ 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"]'
 
-/** The DOM face the two pure decisions below read — structural, so the
- * tests drive them with plain objects instead of a DOM. */
+/** The DOM face the pure decisions below read — structural, so the tests
+ * drive them with plain objects instead of a DOM. */
 export interface PermissionSheetCandidate {
   matches(selectors: string): boolean
   getAttribute(name: string): string | null
-  /** A truthy `closest` result means the click started in the seat. */
+  /** A truthy `closest` result means the click started inside the seat. */
   closest(selectors: string): unknown
 }
 
@@ -49,16 +85,63 @@ export function isUnmarkedPortalMenu(node: PermissionSheetCandidate): boolean {
   return node.matches(PORTAL_MENU_SELECTOR) && node.getAttribute(SHEET_MARKER) === null
 }
 
+/** Which bottom sheet a trigger click arms. */
+export type SheetKind = 'perm' | 'workspace'
+
+const inSeat = (seat: unknown): boolean => seat !== undefined && seat !== null
+
+/**
+ * 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.
+ */
+export function sheetKindForTrigger(target: PermissionSheetCandidate | null | undefined, phoneMatches: boolean): SheetKind | null {
+  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.
+ */
+export function pointerdownOnWorkspaceTrigger(target: PermissionSheetCandidate | null | undefined): boolean {
+  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.
+ */
+export function menuitemClickStartsWorkspaceSwitch(target: PermissionSheetCandidate | null | undefined): boolean {
+  return inSeat(target?.closest(WS_MENUITEM_SELECTOR))
+}
+
+/** What the release check reads, injected so the tests stay DOM-free. */
+export interface WorkspaceSwitchProbe {
+  /** The conversation root's current `data-conversation-session` value (null = none mounted). */
+  currentSessionValue(): string | null
+  /** Whether the hero's "choose a workspace" placeholder card is mounted. */
+  placeholderOpen(): boolean
+}
+
 /**
- * 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.
+ * 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).
  */
-export function clickArmsPermissionSheet(target: PermissionSheetCandidate | null | undefined, phoneMatches: boolean): boolean {
-  if (!phoneMatches) return false
-  const seat = target?.closest(TRIGGER_SELECTOR)
-  return seat !== undefined && seat !== null
+export function workspaceSwitchSettled(probe: WorkspaceSwitchProbe, lockedSessionValue: string | null): boolean {
+  if (probe.currentSessionValue() === lockedSessionValue) return false
+  return !probe.placeholderOpen()
 }
 
 /**
@@ -79,18 +162,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).
  */
 export function installPermissionSheet(ctx: ClientContext): void {
   ctx.effect(() => {
     const phone = window.matchMedia(PHONE_QUERY)
     let armed = false
+    let armedKind: string = SHEET_VALUE_PERM
     let armTimer: ReturnType<typeof setTimeout> | undefined
+    // 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 = (): void => {
       armed = false
@@ -100,9 +201,81 @@ export function installPermissionSheet(ctx: ClientContext): void {
       }
     }
 
+    const markedSheet = (): Element | null =>
+      document.querySelector(`${PORTAL_MENU_SELECTOR}[${SHEET_MARKER}]`)
+
+    const readSessionValue = (): string | null =>
+      document.querySelector(SESSION_SELECTOR)?.getAttribute(SESSION_ATTR) ?? null
+
+    const placeholderOpen = (): boolean => document.querySelector(PLACEHOLDER_CARD_SELECTOR) !== null
+
+    // -- UX-3 switch lock -------------------------------------------------
+    let lockedSessionValue: string | null = null
+    let lockTimer: ReturnType<typeof setTimeout> | undefined
+    let lockObserver: MutationObserver | undefined
+
+    const releaseLock = (): void => {
+      if (lockTimer !== undefined) {
+        clearTimeout(lockTimer)
+        lockTimer = undefined
+      }
+      lockObserver?.disconnect()
+      lockObserver = undefined
+      lockedSessionValue = null
+      document.documentElement.removeAttribute(SWITCH_MARKER)
+    }
+
+    const checkLock = (): void => {
+      if (lockedSessionValue === null) return
+      if (workspaceSwitchSettled({ currentSessionValue: readSessionValue, placeholderOpen }, lockedSessionValue)) {
+        releaseLock()
+      }
+    }
+
+    const startSwitchLock = (): void => {
+      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: Event): void => {
+      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: Event): void => {
+      // 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)) return
+      // 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
       // host's own handler unmounts it) — arming there would leave a live
@@ -110,8 +283,9 @@ export function installPermissionSheet(ctx: ClientContext): void {
       // 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) return
+      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)
     }
@@ -120,12 +294,13 @@ export function installPermissionSheet(ctx: ClientContext): void {
     const markIfArmed = (root: Element): void => {
       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) return
@@ -138,9 +313,11 @@ export function installPermissionSheet(ctx: ClientContext): void {
     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.

package/src/client/locales.ts

@@ -12,6 +12,7 @@ export const zh = {
   'previewExitFullscreen': '退出全屏',
   'allWorkspaces': '全部',
   'switchWorkspace': '切换工作区',
+  'pickWorkspaceNew': '选择工作区开始',
   'newSession': '新建会话',
   'noSessions': '暂无会话，点击右下角加号新建',
   'homeStatusOngoing': '运行中',
@@ -536,6 +537,7 @@ export const en: Record<MobileNavKey, string> = {
   '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',

package/src/client/settings/SettingsSection.tsx

@@ -48,6 +48,7 @@ import {
   CLIENT_DEBUG_REPORT_ROUTE,
   CLIENT_RECONNECT_ROUTE,
   CLIENT_STATUS_ROUTE,
+  awaitClientStatusReady,
   claimDeviceNameOf,
   createLatestGate,
   clientStatusLineOf,
@@ -56,6 +57,7 @@ import {
   localOpsAllowed,
   normalizePairingCode,
   shouldFollowServerDeviceName,
+  shouldReloadAfterClientActivation,
 } from '../../client-data/settings-form.ts'
 import { bridgeSectionState, togglePluginConsent } from '../../client-data/plugin-bridge.ts'
 import type { PluginBridgeStatusView } from '../../client-data/plugin-bridge.ts'
@@ -678,6 +680,11 @@ function SettingsSectionPage({ config, shares, t }: SettingsSectionProps) {
     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.
@@ -710,6 +717,20 @@ function SettingsSectionPage({ config, shares, t }: SettingsSectionProps) {
         // could not store falls back to the name we actually sent.
         const echoed = typeof body.deviceName === 'string' && body.deviceName !== '' ? claimDeviceNameOf(body.deviceName, claimName) : claimName
         const landed = await config.writeClientPairing(urlToWrite, body.token, echoed)
+        if (landed && 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 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).
@@ -990,7 +1011,28 @@ function SettingsSectionPage({ config, shares, t }: SettingsSectionProps) {
           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 (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 awaitClientStatusReady().then(() => window.location.reload())
+                return
+              }
+              saveLanded(reloadsRow)
+            })
           }}
           onDiscard={() => { config.discard() }}
         >

package/src/client/styles/chips.css.ts

@@ -55,12 +55,17 @@ export const 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;
   }
 

package/src/client/styles/composer.css.ts

@@ -345,6 +345,12 @@ export const 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;
@@ -377,6 +383,7 @@ export const 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"],
@@ -525,11 +532,28 @@ export const 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

package/src/client/styles/header.css.ts

@@ -128,6 +128,14 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
      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);
@@ -195,55 +203,30 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
     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
@@ -353,12 +336,17 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
      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;
@@ -367,6 +355,18 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
   [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 }),
@@ -395,8 +395,12 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
     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;
@@ -413,6 +417,13 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
   [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"],
@@ -503,6 +514,7 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
      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%;

package/src/client/styles/home.css.ts

@@ -72,8 +72,12 @@ export const 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