@linxin666/dsh-remote-web-ui 0.3.23 → 0.4.0

package/src/client/index.ts

@@ -10,12 +10,12 @@
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import type { Context as ClientContext } from '@deepseek-ai/cordis'
-import type { SettingsScope, SettingsScopeSpec } from '@deepseek-ai/dsh-client-ui-settings/client'
+import type { ConfigForm, ConfigForms } from '@deepseek-ai/dsh-client-ui-settings/client'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale) and the
 // ui-sidebar SlotMap merge (the 'sidebar.footer.action' hole).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
 // Type-only: pulls the settings-surface SlotMap merge (the 'settings.section'
-// entry) and the ctx.settingsScope Context merge.
+// entry) and the ctx.configForms Context merge.
 import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
 import type {} from '@deepseek-ai/dsh-client-ui-sidebar/client'
 // Type-only: pulls the ctx.slots merge (the renderer owns the slot registry since 0.1.2).
@@ -27,7 +27,7 @@ import { PairFailedNotice } from './PairFailedNotice.tsx'
 import { RemoteSettingsCard, RemoteSettingsCardController, type RemoteSettings } from './RemoteSettingsCard.tsx'
 import { en, zh, type RemoteKey } from './locales.ts'
 import { PAIR_FAILED_MARKER, runPairBootFlow } from './deep-link.ts'
-import { readPairGatePolicy, sendHeartbeat } from './pair-api.ts'
+import { readPairGatePolicy, sendHeartbeat, shouldStopHeartbeat } from './pair-api.ts'
 import {
   channelTransition,
   installRemoteChannel,
@@ -39,6 +39,7 @@ import {
 import { FenceNotice } from './FenceNotice.tsx'
 import { reportDailyHeartbeat } from './telemetry.ts'
 import { startMobileAdapt, type RemoteAdaptGlobal } from './mobile-adapt.ts'
+import { installPluginCard } from './plugin-card-seat.ts'
 
 // Portrait-touch adaptation of the official UI: installed under the plugin
 // lifecycle (apply) so disabling the plugin in cordis patch (disabled: true)
@@ -66,9 +67,9 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
      */
     /**
      * The child slot the Web UI plugin group declares; this card registers
-     * into the group instead of the top-level `settings.plugin.item` list.
-     * Spelled here with the same shape so this package can register without
-     * depending on the sibling UI package.
+     * into the group's list seat rather than the official
+     * bundle-configuration seat. Spelled here with the same shape so this
+     * package can register without depending on the sibling UI package.
      */
     'web-ui.plugin.item': { kind: 'list'; scope: 'root'; owner: SettingsPluginItemOwnerProps }
   }
@@ -89,11 +90,18 @@ export interface SettingsPluginItemOwnerProps {
 declare module '@deepseek-ai/cordis' {
   interface Context {
     /**
-     * Optional rc.6 compatibility binder provided by dsh-web-settings;
-     * absent when that group plugin is not installed, so callers fall back to
-     * the official settings scope.
+     * Optional family settings binder provided by dsh-web-settings; absent
+     * when that group plugin is not installed, so callers fall back to the
+     * official `ctx.configForms` service.
+     *
+     * The 0.1.7 client addresses one form per active profile entry id and
+     * carries no package identity, so the family binder resolves a family
+     * settings namespace to the entry that owns it and hands back that entry's
+     * shared form; the official service is addressed by the entry id directly.
      */
-    webUiSettings?: { bind<S>(spec: SettingsScopeSpec<S>): SettingsScope<S> }
+    webUiSettings?: {
+      bind<S>(spec: { namespace: string; decode?: (section: unknown) => S | undefined }): ConfigForm<S>
+    }
   }
 }
 
@@ -103,12 +111,25 @@ const NS = 'remote'
 
 /** Settings namespace the remote-control card edits (the Host plugin registers it). */
 const REMOTE_WEB_UI_NS = 'remote-web-ui'
+const AGGREGATE_ENTRY_ID = 'web-ui-remote-web-ui'
+const REMOTE_WEB_UI_ENTRY_IDS: readonly string[] = [AGGREGATE_ENTRY_ID, 'ui-remote-web-ui', REMOTE_WEB_UI_NS]
+
+function servedEntryId(forms: ConfigForms): string {
+  let served: readonly string[] | undefined
+  try {
+    served = forms.describe().getSnapshot().view?.namespaces.map(view => view.ns)
+  } catch {
+    served = undefined
+  }
+  if (!served || served.length === 0) return REMOTE_WEB_UI_NS
+  return REMOTE_WEB_UI_ENTRY_IDS.find(id => served.includes(id)) ?? REMOTE_WEB_UI_NS
+}
 
 /** Heartbeat cadence from a paired phone (presence + revocation liveness). */
 const HEARTBEAT_INTERVAL_MS = 10_000
 
 /** Services required by this plugin. */
-export const inject = ['slots', 'locale', 'connection', 'settingsScope', 'remote']
+export const inject = ['slots', 'locale', 'connection', 'configForms', 'remote']
 
 /**
  * Register the remote-control surface.
@@ -177,10 +198,17 @@ export function apply(ctx: ClientContext): void {
   // before any dictionary existed; the wiring plus the layer's own sync tick
   // re-render them in the active locale.
   if (adapt !== undefined) adapt.translate = t
-  const binder = ctx.get('webUiSettings') ?? ctx.settingsScope
-  const settingsScope = binder.bind<RemoteSettings>({ namespace: REMOTE_WEB_UI_NS })
+  // The settings form this card edits. The family group's binder resolves a
+  // family namespace to the profile entry that owns it and binds that entry's
+  // shared form (natively, or over its loopback bridge); without that group the
+  // namespace IS the owning entry id, so the official service is addressed
+  // directly.
+  const family = ctx.get('webUiSettings')
+  const settingsForm: ConfigForm<RemoteSettings> = family !== undefined && typeof family.bind === 'function'
+    ? family.bind<RemoteSettings>({ namespace: REMOTE_WEB_UI_NS })
+    : ctx.configForms.get<RemoteSettings>(servedEntryId(ctx.configForms))
   const enabled = (): boolean => {
-    const snapshot = settingsScope.getSnapshot()
+    const snapshot = settingsForm.getSnapshot()
     return snapshot.status === 'ready'
       ? snapshot.value?.enabled ?? true
       : snapshot.status === 'unavailable'
@@ -195,7 +223,7 @@ export function apply(ctx: ClientContext): void {
   const syncAdaptEnabled = (): void => {
     ;(window as unknown as { __dshRemoteAdapt?: RemoteAdaptGlobal }).__dshRemoteAdapt?.setEnabled?.(enabled())
   }
-  settingsScope.subscribe(syncAdaptEnabled)
+  settingsForm.subscribe(syncAdaptEnabled)
   syncAdaptEnabled()
   // The replay closes a details panel restored before the wiring; the
   // layout face throws while the root entry has not mounted yet (a real
@@ -223,7 +251,7 @@ export function apply(ctx: ClientContext): void {
         disposeEntry = undefined
       }
     }
-    const unsubscribe = settingsScope.subscribe(syncEntry)
+    const unsubscribe = settingsForm.subscribe(syncEntry)
     syncEntry()
     return () => {
       unsubscribe()
@@ -232,25 +260,20 @@ export function apply(ctx: ClientContext): void {
   })
 
   // Plugin configuration card: one staged form over the `remote-web-ui`
-  // settings namespace, contributed to the Web UI plugin group.
-  const remoteSettings = new RemoteSettingsCardController(settingsScope)
-  ctx.slots.inject('web-ui.plugin.item', () => {
-    try {
-      const unregister = ctx.slots.register({
-        name: 'web-ui.plugin.item',
-        id: 'remote-web-ui',
-        order: 90,
-        locale: NS,
-        inject: () => remoteSettings.inject(),
-      }, RemoteSettingsCard)
-      return () => {
-        remoteSettings.dispose()
-        unregister()
-      }
-    } catch {
-      return () => {}
-    }
+  // settings namespace, contributed to whichever plugin-card seat the running
+  // host declares (the family group's list seat, or the official
+  // bundle-configuration seat on the plugin manager page when dsh-web-settings
+  // is not installed).
+  const remoteSettings = new RemoteSettingsCardController(settingsForm)
+  installPluginCard(ctx, {
+    bundle: '@linxin666/dsh-remote-web-ui',
+    id: 'remote-web-ui',
+    order: 90,
+    locale: NS,
+    inject: () => remoteSettings.inject(),
+    component: RemoteSettingsCard,
   })
+  ctx.effect(() => () => { remoteSettings.dispose() }, 'remote-web-ui: settings card')
 
   // Phone-side boot flow + heartbeats. Loopback pages (the desktop) never
   // heartbeat; the server ignores unpaired heartbeats anyway. Both run only
@@ -263,7 +286,14 @@ export function apply(ctx: ClientContext): void {
         const loopback = connection?.isLoopback ?? true
         runPairBootFlow(ctx, window.location.search)
         if (loopback) return () => {}
-        const timer = window.setInterval(() => { void sendHeartbeat().catch(() => {}) }, HEARTBEAT_INTERVAL_MS)
+        const timer = window.setInterval(() => {
+          void sendHeartbeat().then((status) => {
+            // A revoked (401) or fenced-off (403) page can never be accepted
+            // again without re-pairing, so the 10 s wake source stops instead of
+            // polling a refusal for the lifetime of the tab.
+            if (shouldStopHeartbeat(status)) window.clearInterval(timer)
+          }).catch(() => {})
+        }, HEARTBEAT_INTERVAL_MS)
         return () => { window.clearInterval(timer) }
       }, 'remote-web-ui: pair flow + heartbeats')
     } else if (!enabled() && disposeRuntime !== undefined) {
@@ -271,7 +301,7 @@ export function apply(ctx: ClientContext): void {
       disposeRuntime = undefined
     }
   }
-  settingsScope.subscribe(syncRuntime)
+  settingsForm.subscribe(syncRuntime)
   syncRuntime()
 
   // Remote desktop channel: on a non-loopback origin (LAN address or public
@@ -296,7 +326,7 @@ export function apply(ctx: ClientContext): void {
     fenceNotice = undefined
   }
   const handleUnpaired = (): void => {
-    if (settingsScope.getSnapshot().status !== 'ready' && hostPairingPolicy === undefined) {
+    if (settingsForm.getSnapshot().status !== 'ready' && hostPairingPolicy === undefined) {
       unpairedWhilePolicyPending = true
       return
     }
@@ -304,7 +334,7 @@ export function apply(ctx: ClientContext): void {
   }
   const channelActive = (): boolean => remoteChannelRequired(
     window.location.hostname,
-    settingsScope.getSnapshot(),
+    settingsForm.getSnapshot(),
     hostPairingPolicy,
   )
   // The parse-time boot patch (issue #987), when the served index carried
@@ -355,9 +385,9 @@ export function apply(ctx: ClientContext): void {
       bootSeat()?.restore()
     }
   }
-  settingsScope.subscribe(syncChannel)
+  settingsForm.subscribe(syncChannel)
   syncChannel()
-  if (!isLoopbackHostname(window.location.hostname) && settingsScope.getSnapshot().status !== 'ready') {
+  if (!isLoopbackHostname(window.location.hostname) && settingsForm.getSnapshot().status !== 'ready') {
     void readPairGatePolicy().then((policy) => {
       hostPairingPolicy = policy.requirePairingForLan
       syncChannel()

package/src/client/locales.ts

@@ -31,9 +31,9 @@ export const zh = {
   'pair.linkLabel': '配对链接',
   'pair.tokenLabel': '配对令牌',
   'pair.dockerHint': 'Docker 或反向代理环境下，可直接复制此令牌并在目标设备配对页面输入。',
-  'pair.oneTimeHint': '链接含一次性令牌；任一设备配对成功后立即失效，配对下一台设备请刷新二维码。',
+  'pair.oneTimeHint': '链接含限时令牌；在令牌过期或刷新二维码之前，同一链接可为多台设备完成配对（每次配对各自生成独立设备会话）。',
   'pair.failed.title': '配对失败',
-  'pair.failed.detail': '链接无效或已使用，请回到电脑端刷新二维码后重新扫码。',
+  'pair.failed.detail': '链接无效或已过期，请回到电脑端刷新二维码后重新扫码。',
   'fence.unpaired.title': '此设备未配对，无法访问工作区数据',
   'fence.unpaired.eyebrow': '需要设备配对',
   'fence.unpaired.hint': '为保护工作区、会话与插件数据，远程电脑必须先通过主电脑授权。',
@@ -45,7 +45,6 @@ export const zh = {
   'fence.unpaired.pairAction': '立即配对',
   'fence.unpaired.pairing': '配对中…',
   'fence.unpaired.tokenInvalid': '配对链接或 Token 无效已过期',
-  'fence.unpaired.tokenUsed': '该配对链接已被使用',
   'fence.unpaired.tokenFailed': '配对失败，请检查网络或重新获取链接',
   'fence.unpaired.footnote': '请勿使用他人提供的配对链接；管理员可随时取消此设备的授权。',
   'posture.exposed': '/api 通道对未配对设备敞开',
@@ -72,7 +71,7 @@ export const zh = {
   'relay.registering': '正在把临时隧道同步到固定域名（<id>.dsh-market.com）…',
   'relay.failed': '固定域名同步失败：{error}。正在自动重试，期间二维码可能使用临时地址。',
   'close.label': '关闭远程访问面板',
-  // 插件设置卡片（settings.plugin.item 席位）。
+  // 插件设置卡片（家族 list 席位，或官方 plugins.bundle.config 席位）。
   'settings.title': '远程访问设置',
   'settings.description': '配对安全与设备限额。',
   'settings.enabled': '启用远程访问',
@@ -205,9 +204,9 @@ export const en = {
   'pair.linkLabel': 'Pairing link',
   'pair.tokenLabel': 'Pairing token',
   'pair.dockerHint': 'In Docker or reverse proxy environments, copy this token to pair directly on the target device.',
-  'pair.oneTimeHint': 'The link carries one single-use token; it dies as soon as any device pairs. Refresh the QR to pair the next device.',
+  'pair.oneTimeHint': 'The link carries a time-limited token: until it expires or the QR is refreshed, the same link can pair several devices, each with its own device session.',
   'pair.failed.title': 'Pairing failed',
-  'pair.failed.detail': 'The link is invalid or was already used. Refresh the QR code on your computer and scan again.',
+  'pair.failed.detail': 'The link is invalid or has expired. Refresh the QR code on your computer and scan again.',
   'fence.unpaired.title': 'This device is not paired and cannot reach workspace data',
   'fence.unpaired.eyebrow': 'Device pairing required',
   'fence.unpaired.hint': 'To protect workspace, session, and plugin data, a remote computer must first be authorized by the primary computer.',
@@ -219,7 +218,6 @@ export const en = {
   'fence.unpaired.pairAction': 'Pair Now',
   'fence.unpaired.pairing': 'Pairing…',
   'fence.unpaired.tokenInvalid': 'Pairing link or token is invalid or expired',
-  'fence.unpaired.tokenUsed': 'This pairing link has already been used',
   'fence.unpaired.tokenFailed': 'Pairing failed, please check network or issue a new link',
   'fence.unpaired.footnote': 'Do not use pairing links from people you do not trust. An administrator can revoke this device at any time.',
   'posture.exposed': 'The /api channel is open to unpaired devices',
@@ -246,7 +244,7 @@ export const en = {
   'relay.registering': 'Syncing the ephemeral tunnel to the stable hostname (<id>.dsh-market.com)…',
   'relay.failed': 'Stable-hostname sync failed: {error}. Retrying automatically; the QR may use the ephemeral address meanwhile.',
   'close.label': 'Close remote access panel',
-  // Plugin settings card (the `settings.plugin.item` seat).
+  // Plugin settings card (the family list seat, or the official bundle-config seat).
   'settings.title': 'Remote access settings',
   'settings.description': 'Pairing security and device limits.',
   'settings.enabled': 'Enable remote access',

package/src/client/mobile-adapt.ts

@@ -64,6 +64,12 @@ const EFFORT_BTN_ID = 'dshRemoteEffortPick'
 const COMPACT_CLASS = 'dsh-remote-compact-picker'
 /** Body class while the header actions are seated in the tabs row. */
 const HEADER_SEATED_CLASS = 'dsh-remote-header-seated'
+/**
+ * Width the seated header actions paint over the tabs row, as a CSS variable
+ * on <html>. The row caps its own width with it (see the v80 rules) instead of
+ * reserving the space with padding.
+ */
+const HEADER_RESERVE_VAR = '--dsh-remote-header-actions-reserve'
 /** The two composer picker entries the compact buttons drill into. */
 type PickerKind = 'model' | 'effort'
 /** Locale-dependent fast path for the official picker cells (zh/en). */
@@ -254,6 +260,20 @@ const ADAPT_CSS: readonly string[] = [
   // [class$="_tab"] misses the active tab (its class ends in "_tabActive")
   // — containment so BOTH tabs match.
   '[class$="_header"] [class$="_tabs"] [class*="_tab"]{font-size:12px;white-space:nowrap}',
+  // v80: the tabs row must give the painted actions their width up on its own.
+  // The v67 padding reservation could not do it: the row is a nowrap flex
+  // container, and once the tab labels plus their gaps overflow the reduced
+  // content box the flex items spill over the padding box, so the trailing
+  // tabs render underneath the actions (reported on a phone: a long agent
+  // preset label covered the last tabs). Cap the row against the reserve and
+  // let the labels scroll instead. The value rides a CSS variable on <html>
+  // because the update lands before React re-creates the row node, and an
+  // inline reservation on that node is dropped until the next sync tick.
+  // The 2px bottom padding keeps the active-tab underline inside the clipping
+  // box; the matching negative margin keeps the header height official.
+  `body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_tabs"]{max-width:max(0px,calc(100% - var(${HEADER_RESERVE_VAR},0px)));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-bottom:-2px}`,
+  `body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_tabs"]::-webkit-scrollbar{display:none}`,
+  `body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_tabs"] > [class*="_tab"]{flex:0 0 auto}`,
   // Mobile scope: hide the plugin surfaces that do not fit a phone — the
   // right-hand details column and every desktop-oriented tool surface. The
   // list keys on the L2 semantic roots (data-dsh-plugin, ownership stays
@@ -333,7 +353,7 @@ export function startMobileAdapt(): void {
   let whaleSuppressClick = false
   let whaleShown = false
   let drag: { x: number; y: number; left: number; top: number; moved: boolean } | null = null
-  let swipeTouch: { x: number; y: number; id: number } | null = null
+  let swipeTouch: { x: number; y: number; id: number; el: Element | null } | null = null
   let lastComposerTap = 0
   // Plugin master switch: the module-scope layer installs before any config
   // is readable, so the plugin apply() flips this through setEnabled() once
@@ -348,7 +368,7 @@ export function startMobileAdapt(): void {
    * rail compaction) while the body class stays.
    */
   function ensureAdaptStyle(): void {
-    if (document.querySelector(`style[data-plugin-css="${ADAPT_CSS_ID}"]`) !== null) return
+    if (nodeOf(`style[data-plugin-css="${ADAPT_CSS_ID}"]`) !== null) return
     const tag = document.createElement('style')
     tag.dataset.plugin = 'remote-web-ui'
     tag.dataset.pluginCss = ADAPT_CSS_ID
@@ -401,6 +421,9 @@ export function startMobileAdapt(): void {
       savedViewportContent = null
     }
     if (whaleEl !== null) whaleEl.style.display = 'none'
+    // The next apply() is a hidden-to-shown transition again: without this the
+    // whale would keep its pre-revert position state and skip the clamp.
+    whaleShown = false
     setWhaleTimer(false)
     if (whaleObserver !== null) {
       whaleObserver.disconnect()
@@ -472,7 +495,7 @@ export function startMobileAdapt(): void {
 
   function syncCompactPicker(): void {
     if (!active) return
-    const tools = document.querySelector('[class$="_composerSeat"] [class$="_tools"]')
+    const tools = nodeOf('[class$="_composerSeat"] [class$="_tools"]')
     const trigger = tools?.parentElement?.querySelector('[class$="_triggerEffort"]')?.parentElement
     if (tools === null || trigger === null) {
       removeCompactPicker()
@@ -631,18 +654,25 @@ export function startMobileAdapt(): void {
     document.body.appendChild(whale)
   }
 
+  /**
+   * Write one row's recorded official draggable state back onto it.
+   * @param row - the tracked row element.
+   * @param original - the recorded attribute value, or null when it was absent.
+   */
+  function restoreRowDragState(row: Element, original: string | null): void {
+    if (original === null) row.removeAttribute('draggable')
+    else row.setAttribute('draggable', original)
+  }
+
   /**
    * Restore the official draggable state this layer overrode while active.
    * Rows are React-owned and may have been re-created meanwhile, so only the
-   * tracked elements are touched; a detached element is skipped.
+   * tracked elements are touched; a detached element is written back too
+   * (harmless, and it keeps the entry prunable at every tick).
    */
   function restoreRowDrag(): void {
     if (dragOverridden.size === 0) return
-    for (const [row, original] of dragOverridden) {
-      if (!row.isConnected) continue
-      if (original === null) row.removeAttribute('draggable')
-      else row.setAttribute('draggable', original)
-    }
+    for (const [row, original] of dragOverridden) restoreRowDragState(row, original)
     dragOverridden.clear()
   }
 
@@ -679,6 +709,41 @@ export function startMobileAdapt(): void {
         row.setAttribute('draggable', 'false')
       }
     }
+    // React replaces rows as the session list re-renders; a detached row can
+    // never be restored by a later revert, so keeping it here would retain the
+    // whole detached subtree (and its children) for the page lifetime. Its
+    // official state goes back on the node itself and the entry is dropped:
+    // a node React re-attaches is recorded again on the next tick.
+    if (dragOverridden.size === 0) return
+    for (const [row, original] of dragOverridden) {
+      if (row.isConnected) continue
+      restoreRowDragState(row, original)
+      dragOverridden.delete(row)
+    }
+  }
+
+  /**
+   * Official nodes resolved through the document and cached while they stay
+   * connected. The sync tick runs every 600ms for the page lifetime, and these
+   * selectors (suffix class matches, :has()) cannot use Blink's fast paths, so
+   * every miss walks the whole mounted DOM — the official chat keeps the whole
+   * conversation mounted, i.e. tens of thousands of elements. React replaces a
+   * node on a major re-render, which the isConnected guard detects.
+   */
+  const nodeCache = new Map<string, Element>()
+  function nodeOf(selector: string): Element | null {
+    const cached = nodeCache.get(selector)
+    if (cached !== undefined && cached.isConnected) return cached
+    const found = document.querySelector(selector)
+    if (found === null) nodeCache.delete(selector)
+    else nodeCache.set(selector, found)
+    return found
+  }
+
+  /** The official application frame, through the same cached lookup. */
+  function frameEl(): HTMLElement | null {
+    const frame = nodeOf(APP_FRAME_SELECTOR)
+    return frame instanceof HTMLElement ? frame : null
   }
 
   function syncWhale(): void {
@@ -690,8 +755,8 @@ export function startMobileAdapt(): void {
       whaleEl.style.display = 'none'
       return
     }
-    const collapsed = appFrame()?.hasAttribute('data-sidebar-collapsed') === true
-    const overlayUp = document.querySelector('[class$="_overlay"]') !== null
+    const collapsed = frameEl()?.hasAttribute('data-sidebar-collapsed') === true
+    const overlayUp = nodeOf('[class$="_overlay"]') !== null
     const show = collapsed && !overlayUp
     // Restore on every hidden-to-shown transition — including the very
     // first show on a fresh page load, where the inline display is still
@@ -718,7 +783,7 @@ export function startMobileAdapt(): void {
   // sessions, and hiding the actions without a seat target made them vanish.
   function seatHeaderActions(): void {
     if (!active) return
-    const header = document.querySelector('[class$="_header"]')
+    const header = nodeOf('[class$="_header"]')
     const tabs = header !== null ? header.querySelector('[class$="_tabs"]') : null
     const actions = header !== null ? header.querySelector('[class$="_titleCluster"] [class$="_headerActions"]') : null
     // The actions node is NOT moved: it is a React-owned host node whose badge
@@ -740,7 +805,7 @@ export function startMobileAdapt(): void {
   // and converged each time the header geometry is dirty.
   function alignActionsText(): void {
     if (!active) return
-    const header = document.querySelector('[class$="_header"]')
+    const header = nodeOf('[class$="_header"]')
     if (header === null) return
     const tabs = header.querySelector('[class$="_tabs"]')
     const actions = header.querySelector('[class$="_titleCluster"] [class$="_headerActions"]')
@@ -764,9 +829,14 @@ export function startMobileAdapt(): void {
     let dx = translate !== null ? parseFloat(translate[1] ?? '0') : 0
     let dy = translate !== null ? parseFloat(translate[2] ?? '0') : 0
     const actionsRect = actions.getBoundingClientRect()
-    const tabsRect = tabs.getBoundingClientRect()
-    // Horizontal: the actions' right edge lands on the tabs row's right edge.
-    const rightDiff = tabsRect.right - actionsRect.right
+    // Horizontal: the actions' right edge lands on the header's content edge,
+    // NOT on the tabs row's right edge. The row caps its own width against the
+    // reserve below (v80), so anchoring to the row would let the pair walk
+    // leftwards on every measurement.
+    const headerRect = header.getBoundingClientRect()
+    const headerStyle = getComputedStyle(header)
+    const contentRight = headerRect.right - (parseFloat(headerStyle.paddingRight) || 0) - (parseFloat(headerStyle.borderRightWidth) || 0)
+    const rightDiff = contentRight - actionsRect.right
     if (Math.abs(rightDiff) >= 0.5) dx = Math.round((dx + rightDiff) * 10) / 10
     // Vertical: the actions' text bottom lands on the tab text bottom.
     const tabBottom = textBottom(tabBtn)
@@ -783,17 +853,26 @@ export function startMobileAdapt(): void {
     }
     const next = `translate(${dx}px, ${dy}px)`
     if (actions.style.transform !== next) actions.style.transform = next
-    // Reserve the painted width so the tab labels never slide under it.
+    // Reserve the painted width on the row itself, so the tab labels never
+    // slide under it. The value rides a CSS variable on <html>: React
+    // recreates the row node on re-render, which would drop an inline
+    // reservation until the next sync tick, and until then the labels render
+    // underneath the painted actions.
     const reserve = `${Math.ceil(actionsRect.width) + 8}px`
-    if (tabs.style.paddingRight !== reserve) tabs.style.paddingRight = reserve
+    const rootStyle = document.documentElement.style
+    if (rootStyle.getPropertyValue(HEADER_RESERVE_VAR) !== reserve) rootStyle.setProperty(HEADER_RESERVE_VAR, reserve)
   }
 
   function unseatHeaderActions(): void {
     document.body.classList.remove(HEADER_SEATED_CLASS)
+    document.documentElement.style.removeProperty(HEADER_RESERVE_VAR)
     const header = document.querySelector('[class$="_header"]')
     const tabs = header !== null ? header.querySelector('[class$="_tabs"]') : null
     const actions = header !== null ? header.querySelector('[class$="_titleCluster"] [class$="_headerActions"]') : null
     if (actions instanceof HTMLElement) actions.style.transform = ''
+    // The v67 padding reservation is gone with the v80 cap; clearing it keeps a
+    // profile that hot-updated from an older build from keeping a stale inline
+    // width on the row.
     if (tabs instanceof HTMLElement) tabs.style.paddingRight = ''
     if (headerObserver !== null) {
       headerObserver.disconnect()
@@ -838,6 +917,11 @@ export function startMobileAdapt(): void {
     if (isMobilePortrait()) {
       apply()
       ensureWhaleObserver()
+      // A viewport shrink (split-screen, foldable, rotation) can leave the
+      // whale — the only portrait sidebar entry — parked beyond the new right
+      // edge while it stays visible; re-clamp it here. Skipped mid-drag so a
+      // resize cannot yank the button away from the finger.
+      if (active && drag === null) applyWhalePos()
     } else {
       revert()
     }
@@ -936,13 +1020,17 @@ export function startMobileAdapt(): void {
     }
     const t = e.target
     const editable = t instanceof HTMLElement && t.isContentEditable
-    if (t instanceof Element && (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT' || editable || t.closest(`#${WHALE_ID}`) !== null || insideHScrollable(t) || t.closest('table, [class$="_table"], [class$="_tablePane"]') !== null)) {
+    if (t instanceof Element && (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT' || editable || t.closest(`#${WHALE_ID}`) !== null || t.closest('table, [class$="_table"], [class$="_tablePane"]') !== null)) {
       swipeTouch = null
       return
     }
     const ct = e.changedTouches[0]
     if (ct === undefined) return
-    swipeTouch = { x: ct.clientX, y: ct.clientY, id: ct.identifier }
+    // The horizontally-scrollable veto is judged at release (see touchend):
+    // evaluating it here forced a style recalc plus a synchronous layout on
+    // every tap and scroll-start while the page was dirty, for a gesture that
+    // mostly never becomes a swipe.
+    swipeTouch = { x: ct.clientX, y: ct.clientY, id: ct.identifier, el: t instanceof Element ? t : null }
   }, { capture: true, passive: true })
   document.addEventListener('touchend', (e) => {
     if (swipeTouch === null) return
@@ -952,12 +1040,17 @@ export function startMobileAdapt(): void {
     if (ct === undefined || ct.identifier !== swipeTouch.id) return
     const dx = ct.clientX - swipeTouch.x
     const dy = ct.clientY - swipeTouch.y
+    const start = swipeTouch
     swipeTouch = null
     if (!active) return
     if (Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.5) return
-    const frame = appFrame()
+    // A gesture that started inside a horizontally scrollable container belongs
+    // to that container, not to the sidebar. Judged now, only for a gesture
+    // that already qualified as a swipe.
+    if (start.el !== null && insideHScrollable(start.el)) return
+    const frame = frameEl()
     if (frame === null) return
-    if (document.querySelector('[class$="_overlay"], [class$="_dialog"], [class$="_menu"], [class*="_portal"]') !== null) return
+    if (nodeOf('[class$="_overlay"], [class$="_dialog"], [class$="_menu"], [class*="_portal"]') !== null) return
     const collapsed = frame.hasAttribute('data-sidebar-collapsed')
     if (dx < 0 && !collapsed) collapseSidebar()
     else if (dx > 0 && collapsed) toggleSidebarVerified()
@@ -1098,10 +1191,23 @@ export function startMobileAdapt(): void {
     return isComposerField(el) ? el : null
   }
   const lanOrigFocus = HTMLElement.prototype.focus
-  HTMLElement.prototype.focus = function (this: HTMLElement, options?: FocusOptions): void {
+  const patchedFocus = function (this: HTMLElement, options?: FocusOptions): void {
     if (active && isComposerField(this) && Date.now() - lastComposerTap >= 800) return
     lanOrigFocus.call(this, options)
   }
+  /** (Re-)install the composer-focus guard (see setEnabled). */
+  const installFocusPatch = (): void => {
+    HTMLElement.prototype.focus = patchedFocus
+  }
+  /**
+   * Remove the guard when the layer is disabled. A patch another plugin
+   * installed after ours is left alone (identity check), so disabling this
+   * layer never removes someone else's behavior.
+   */
+  const restoreFocusPatch = (): void => {
+    if (HTMLElement.prototype.focus === patchedFocus) HTMLElement.prototype.focus = lanOrigFocus
+  }
+  installFocusPatch()
   document.addEventListener('pointerdown', (e) => {
     if (!active) return
     if (composerFieldOf(e.target) !== null) lastComposerTap = Date.now()
@@ -1117,8 +1223,13 @@ export function startMobileAdapt(): void {
     translate: null,
     setEnabled(on: boolean): void {
       adaptEnabled = on
-      if (on) evaluate()
-      else revert()
+      if (on) {
+        installFocusPatch()
+        evaluate()
+      } else {
+        revert()
+        restoreFocusPatch()
+      }
     },
     flushCloseDetails(): void {
       // The first apply() ran before any wiring existed, so its