dsh-zen-remote 2.3.8 → 2.3.9

package/src/client/effects/native-trigger-overlay.ts

@@ -26,38 +26,77 @@ import type { ClientContext } from '../compat/types.ts'
 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: ReadonlyArray<{ pill: string, trigger: string }> = [
-  { 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: HTMLElement, r: { left: number, top: number, width: number, height: number }, display?: string): void {
+  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: HTMLElement, pill: Element): void {
   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: HTMLElement): void {
   trigger.removeAttribute(TAKEN)
   trigger.style.cssText = ''
+  const anchor = trigger.parentElement
+  if (anchor !== null && anchor.hasAttribute(TAKEN)) {
+    anchor.removeAttribute(TAKEN)
+    anchor.style.cssText = ''
+  }
 }
 
 export function installNativeTriggerOverlay(ctx: ClientContext): void {

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/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