From 4436420f47f590be5a1708e205f4c4143b3141d2 Mon Sep 17 00:00:00 2001
From: EricMoin <mengguolai@gmail.com>
Date: Thu, 29 Oct 2026 17:47:02 +0800
Subject: [PATCH 1/4] fix(web): stabilize mobile sidebar header layout

---
 apps/web/tests/sidebar-right.e2e.ts           | 62 +++++++++++++++++++
 .../client/ui-sidebar-right/README.i18n.yaml  |  4 +-
 packages/client/ui-sidebar-right/README.md    |  2 +-
 packages/client/ui-sidebar-right/README.zh.md |  2 +-
 .../ui-sidebar-right/src/client/index.ts      | 20 ++++--
 .../src/client/shell/ExpandButton.module.css  |  4 ++
 .../src/client/shell/ExpandButton.tsx         | 26 +++++---
 .../src/client/shell/SidebarRight.tsx         |  7 ++-
 .../tests/apply.client.spec.ts                | 41 ++++++++++++
 .../tests/expand-button.client.spec.tsx       | 53 +++++++++++-----
 10 files changed, 185 insertions(+), 36 deletions(-)

diff --git a/apps/web/tests/sidebar-right.e2e.ts b/apps/web/tests/sidebar-right.e2e.ts
index 064adbb620..948c98cd64 100644
--- a/apps/web/tests/sidebar-right.e2e.ts
+++ b/apps/web/tests/sidebar-right.e2e.ts
@@ -644,6 +644,68 @@ describe('web e2e: shipped right Sidebar', () => {
       expect(tripwire.warnings).toEqual([])
     })
 
+    it.each([390, 767])('keeps the mobile conversation title still while the right sidebar slides at %ipx', async (viewportWidth) => {
+      onTestFailed(() => saveFailureShot(page, `web-e2e-sidebar-right-mobile-title-${viewportWidth}`))
+      const viewport = page.viewportSize()
+      if (viewport === null) throw new Error('expected a fixed viewport')
+      const column = await resetSidebar(page)
+      const panel = column.locator('[data-sidebar-right-panel]')
+      const title = page.locator('[class*="titleCluster"]').first()
+      const utilities = page.locator('[class*="headerUtilities"]').first()
+      try {
+        await page.emulateMedia({ reducedMotion: 'no-preference' })
+        await page.setViewportSize({ width: viewportWidth, height: viewport.height })
+        await expect.poll(() => panel.getAttribute('data-sidebar-right-panel')).toBe('fullscreen')
+        await column.locator('[data-sidebar-right-toggle]').click()
+        await panel.evaluate(async (node) => {
+          await Promise.allSettled(node.getAnimations({ subtree: true }).map(animation => animation.finished))
+        })
+        await expandOf(page).waitFor()
+        const titleNode = await title.locator('[class*="crumbCurrent"]').elementHandle()
+        if (titleNode === null) throw new Error('conversation title is not rendered')
+        const titleBefore = await title.boundingBox()
+        const utilitiesBefore = await utilities.boundingBox()
+        expect(titleBefore?.width).toBeGreaterThan(0)
+        expect(utilitiesBefore?.width).toBeGreaterThan(0)
+        await shot(page, `mobile-title-${viewportWidth}-collapsed`)
+        try {
+          for (const opening of [true, false]) {
+            const held = await holdPanelSlide(panel)
+            try {
+              await (opening ? expandOf(page) : column.locator('[data-sidebar-right-toggle]')).click()
+              await expect.poll(() => held.evaluate(state => state.animation?.playState)).toBe('paused')
+              const sliding = await paneAt(column, 0).boundingBox()
+              if (sliding === null) throw new Error('sliding panel is not rendered')
+              expect(sliding.x).toBeGreaterThan(0)
+              expect(sliding.x).toBeLessThan(viewportWidth)
+              expect(await title.boundingBox()).toEqual(titleBefore)
+              expect(await utilities.boundingBox()).toEqual(utilitiesBefore)
+              expect(await titleNode.evaluate(node => node.isConnected)).toBe(true)
+              expect(await expandOf(page).isDisabled()).toBe(opening)
+              expect(await page.getByRole('button', { name: 'Open right sidebar', exact: true }).count()).toBe(opening ? 0 : 1)
+              await shot(page, `mobile-title-${viewportWidth}-${opening ? 'opening' : 'closing'}`)
+              await held.evaluate((state) => { (state.animation as Animation).finish() })
+              expect(await title.boundingBox()).toEqual(titleBefore)
+              expect(await utilities.boundingBox()).toEqual(utilitiesBefore)
+            } finally {
+              await held.evaluate((state) => {
+                state.dispose()
+                if (state.animation?.playState === 'paused') state.animation.finish()
+              })
+              await held.dispose()
+            }
+          }
+        } finally {
+          await titleNode.dispose()
+        }
+      } finally {
+        await page.setViewportSize(viewport)
+        await page.emulateMedia({ reducedMotion: null })
+      }
+      expect(tripwire.pageErrors).toEqual([])
+      expect(tripwire.warnings).toEqual([])
+    })
+
     it('keeps a capacity-closed panel closed after widening and uses fullscreen on a narrow viewport', async () => {
       const viewport = page.viewportSize()
       if (viewport === null) throw new Error('expected a fixed viewport')
diff --git a/packages/client/ui-sidebar-right/README.i18n.yaml b/packages/client/ui-sidebar-right/README.i18n.yaml
index 17ac7a98fc..03cf7d7d69 100644
--- a/packages/client/ui-sidebar-right/README.i18n.yaml
+++ b/packages/client/ui-sidebar-right/README.i18n.yaml
@@ -21,8 +21,8 @@
   en: 5024c4e5fe5dfd2e
   zh: 535a7f585e1bcd97
 /deepseek-ai-dsh-client-ui-sidebar-right/the-expand-button:
-  en: 2614d3f179290606
-  zh: 88c08ee260ba57b7
+  en: 50c158b6639ae83a
+  zh: 9580a299e1ee1ca8
 /deepseek-ai-dsh-client-ui-sidebar-right/state:
   en: 98597ce087c48075
   zh: c5466bf7955ea7b0
diff --git a/packages/client/ui-sidebar-right/README.md b/packages/client/ui-sidebar-right/README.md
index a5eae492e0..d88aff7b90 100644
--- a/packages/client/ui-sidebar-right/README.md
+++ b/packages/client/ui-sidebar-right/README.md
@@ -56,7 +56,7 @@ The panel has no header row. Its two controls — the presentation switch and th
 
 The shortcut reference includes right-sidebar toggle, split and panel fullscreen commands. The same effective binding appears on the corresponding controls. Split and fullscreen require focus within a visible dock pane; conversation focus leaves them unavailable. Split remains visible when unavailable; its focusable tooltip shows the current binding and explains the pane limit or width requirement. Files, browser, and terminal providers contribute their own commands. Guide buttons display effective shortcuts as unboxed text inline without duplicate tooltips.
 
-While the panel is hidden, one button in the conversation header's corner seat (`conversation.session.header.corner`, past the utilities' right edge and level with the Session log control) is the way back in. Its glyph is the left sidebar's collapse icon mirrored. It uses the shared compact Button, matching the adjacent More action’s radius and hover fill. It shares the panel's store (the slot runtime allows one handle across two same-scope seats); while the panel is shown it renders nothing, and the corner seat collapses with it. A collapsed Sidebar therefore costs the conversation nothing: no rail, no width, and the transcript's scrollbar stays at the column's edge. Without a session there is no button and no panel.
+While the panel is hidden, one button in the conversation header's corner seat (`conversation.session.header.corner`, past the utilities' right edge and level with the Session log control) is the way back in. Its glyph is the left sidebar's collapse icon mirrored. It uses the shared compact Button, matching the adjacent More action’s radius and hover fill. It shares the panel's store (the slot runtime allows one handle across two same-scope seats); while the panel is shown below 768px, the button stays mounted, hidden, and disabled, retaining its header space so the title and utilities do not shift during the overlay slide. On wider viewports the button renders nothing and the corner seat collapses. A collapsed Sidebar therefore costs the conversation nothing: no rail, no width, and the transcript's scrollbar stays at the column's edge. Without a session there is no button and no panel.
 
 The panel takes the conversation's ground colour and content font sizes rather than a raised layer of its own: it is a column of the page, not a card over it.
 
diff --git a/packages/client/ui-sidebar-right/README.zh.md b/packages/client/ui-sidebar-right/README.zh.md
index 7e5319e477..0c7f6e1a5f 100644
--- a/packages/client/ui-sidebar-right/README.zh.md
+++ b/packages/client/ui-sidebar-right/README.zh.md
@@ -56,7 +56,7 @@ kind: "package-reference"
 
 快捷键速查包含右侧栏切换、分栏和面板全屏命令，对应控件显示同一份有效键位。分栏与全屏要求焦点位于可见的停靠分栏内；焦点在聊天区时不可用。不可分栏时控件仍可见，可聚焦的提示显示当前键位，并说明分栏数量上限或宽度要求。文件、浏览器和终端提供者分别注册自己的命令。开始页按钮内以无背景文字显示有效快捷键，不额外弹出重复提示。
 
-面板隐藏时，会话 header 角落席位里的一个按钮（`conversation.session.header.corner`，在工具组右缘之外，与 Session 日志控件齐平）是回去的路。它的图形是左侧 sidebar 折叠图标的镜像。它使用公共紧凑 Button，与相邻更多操作按钮共用圆角和 hover 底色。它与面板共用一个存储（slot 运行时允许两个同作用域席位共用一个 handle）；面板显示时它什么也不渲染，角落席位随之收起。于是折叠的 Sidebar 不花会话区任何代价：没有轨条、没有宽度，转录的滚动条留在列的边缘。没有会话就没有按钮也没有面板。
+面板隐藏时，会话 header 角落席位里的一个按钮（`conversation.session.header.corner`，在工具组右缘之外，与 Session 日志控件齐平）是回去的路。它的图形是左侧 sidebar 折叠图标的镜像。它使用公共紧凑 Button，与相邻更多操作按钮共用圆角和 hover 底色。它与面板共用一个存储（slot 运行时允许两个同作用域席位共用一个 handle）；视口宽度小于 768px 且面板显示时，按钮保持挂载、隐藏并禁用，保留在 header 中的占位，使标题和工具组在覆盖层滑动期间不发生位移。更宽的视口中，按钮不渲染，角落席位随之收起。于是折叠的 Sidebar 不花会话区任何代价：没有轨条、没有宽度，转录的滚动条留在列的边缘。没有会话就没有按钮也没有面板。
 
 面板取会话区的底色与正文字号，而不是自成一层浮起的表面：它是页面的一列，不是压在页面上的卡片。
 
diff --git a/packages/client/ui-sidebar-right/src/client/index.ts b/packages/client/ui-sidebar-right/src/client/index.ts
index 1f3d3781fe..851909f867 100644
--- a/packages/client/ui-sidebar-right/src/client/index.ts
+++ b/packages/client/ui-sidebar-right/src/client/index.ts
@@ -32,6 +32,7 @@ import type {} from '@deepseek-ai/dsh-client-resources/client'
 import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
 import type {} from '@deepseek-ai/dsh-client-ui-session/client'
 import type { ILayout } from '@deepseek-ai/dsh-client-ui-layout/client'
+import type { HostObservable } from '@deepseek-ai/dsh-client-ui-slots'
 import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
 import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
@@ -39,7 +40,7 @@ import type {} from './contract/slots.ts'
 import { GuideBody, type GuideInjected } from './tabs/guide/GuideBody.tsx'
 import { GuideTitle } from './tabs/guide/GuideTitle.tsx'
 import { ExpandButton } from './shell/ExpandButton.tsx'
-import { RightbarSeat, type SidebarRightInjected } from './shell/SidebarRight.tsx'
+import { AUTO_FULLSCREEN_WIDTH, RightbarSeat, type SidebarRightInjected } from './shell/SidebarRight.tsx'
 import { closeWithPaneFocus, openWithPaneFocus } from './shell/close-focus.ts'
 import { RightbarRoot, type RightbarRootInjected } from './shell/RightbarRoot.tsx'
 import { SidebarSessionViews } from './session-views.ts'
@@ -262,15 +263,22 @@ export function apply(ctx: ClientContext): void {
         }),
       }, RightbarSeat)
     })
-    // The expand button shares the panel's store: it only needs to know whether
-    // the panel is expanded, and to ask for it to be. The header's corner seat
-    // is its own place, past the utilities, so showing and hiding it moves
-    // nothing else in the row.
+    // The expand button retains its width under narrow-screen overlays;
+    // wide-screen panels collapse the header's corner seat while shown.
+    const query = typeof matchMedia === 'function'
+      ? matchMedia(`(width < ${AUTO_FULLSCREEN_WIDTH}px)`) : undefined
+    const narrowViewport: HostObservable<boolean> = {
+      getSnapshot: () => query?.matches ?? false,
+      subscribe: (listener) => {
+        query?.addEventListener('change', listener)
+        return () => { query?.removeEventListener('change', listener) }
+      },
+    }
     const disposeExpand = ctx.slots.inject('conversation.session.header.corner', () => ctx.slots.register({
       name: 'conversation.session.header.corner',
       locale: NS,
       store,
-      inject: () => ({ hooks: { shortcuts: ctx.shortcuts.catalog } }),
+      inject: () => ({ hooks: { shortcuts: ctx.shortcuts.catalog, narrowViewport } }),
     }, ExpandButton))
     // Stage two for the guide: it declares the chain child it hosts and reads
     // the registry's entry boxes, which an ordinary type has no reason to do.
diff --git a/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.module.css b/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.module.css
index 0ea624baeb..77f7f4af7f 100644
--- a/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.module.css
+++ b/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.module.css
@@ -11,6 +11,10 @@
   height: 15px;
 }
 
+.expanded {
+  visibility: hidden;
+}
+
 /* The left sidebar's panel icon, mirrored: the divider moves to the right side. */
 .icon {
   transform: scaleX(-1);
diff --git a/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx b/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx
index fbac5b553e..a0d17e4de2 100644
--- a/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx
+++ b/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx
@@ -1,13 +1,15 @@
 /**
  * The way into a hidden panel: one button in the conversation header's corner
- * seat, shown only while the panel is collapsed.
+ * seat, visible only while the panel is collapsed.
  *
  * It lives in the conversation's own header rather than in the frame's right
  * column so that a collapsed Sidebar costs the conversation nothing — no rail,
  * no width, and the transcript's scrollbar stays at the column's edge. The
  * corner seat is its own, past the utilities' edge, so the button never joins
- * the utilities row; while the panel is shown this renders nothing, and the
- * seat collapses with it. It shares the panel's per-session store, which the
+ * the utilities row. On narrow viewports, the disabled button stays mounted
+ * and hidden while the panel is shown, preserving the title's width during
+ * the overlay slide. Wide viewports collapse the seat while the panel is shown.
+ * It shares the panel's per-session store, which the
  * slot runtime allows because both seats are session-scoped.
  *
  * The glyph is the left sidebar's collapse icon mirrored: the same affordance,
@@ -16,6 +18,7 @@
 import type { ShortcutCatalogEntry } from '@deepseek-ai/dsh-client-shortcuts/client'
 import type { InjectFace, HostObservable } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ReactNode } from 'react'
+import clsx from 'clsx'
 import { Button, IconPanelLeftOutlineRegular, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PropsLocale, PropsRuntime, PropsStore } from '@deepseek-ai/dsh-client-ui-slots'
 import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
@@ -27,20 +30,25 @@ export type ExpandButtonProps =
   & PropsRuntime<'conversation.session.header.corner'>
   & PropsStore<ReturnType<typeof createSidebarRightStore>>
   & PropsLocale<'sidebarRight'>
-  & InjectFace<{ hooks: { shortcuts: HostObservable<readonly ShortcutCatalogEntry[]> } }>
+  & InjectFace<{ hooks: {
+    shortcuts: HostObservable<readonly ShortcutCatalogEntry[]>
+    narrowViewport: HostObservable<boolean>
+  } }>
 
-/** The expand control while the panel is collapsed; nothing while it is shown. */
-export function ExpandButton({ sessionId, useStore, actions, t, useShortcuts }: ExpandButtonProps): ReactNode {
+/** The hidden expand control retains its header space only on narrow viewports. */
+export function ExpandButton({ sessionId, useStore, actions, t, useShortcuts, useNarrowViewport }: ExpandButtonProps): ReactNode {
   // A session with no surface yet is collapsed: the panel seat materializes the
   // surface on its own mount, and until then there is nothing expanded.
   const shortcut = useShortcuts(entries => entries.find(entry => entry.id === 'sidebar.right.toggle'))
   const expanded = useStore(state => state.bySession[sessionId]?.layout.expanded ?? false)
-  if (expanded) return null
+  const narrow = useNarrowViewport(value => value)
+  if (expanded && !narrow) return null
   return (
-    <Tooltip label={t('chrome.expand')} shortcutKeys={shortcut?.keys} side="bottom" delayMs={500}>
+    <Tooltip label={t('chrome.expand')} shortcutKeys={shortcut?.keys} side="bottom" delayMs={500} disabled={expanded}>
       <Button
         size="sm"
-        className={css.button}
+        className={clsx(css.button, expanded && css.expanded)}
+        disabled={expanded}
         aria-label={t('chrome.expandAria')}
         aria-keyshortcuts={shortcut?.aria}
         data-sidebar-right-expand
diff --git a/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx b/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx
index e0182a611b..fdf7e2c515 100644
--- a/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx
+++ b/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx
@@ -18,7 +18,7 @@
  * and collapse — ride the docking kit's chrome seat at the end of the top-right
  * pane's tab strip, so the strip is the panel's whole top edge. The way back in
  * while collapsed is not here either: it is one button in the conversation
- * header (`ExpandButton.tsx`), because it exists only while this panel is
+ * header (`ExpandButton.tsx`), where it is visible only while this panel is
  * hidden. Floating panels remain in the same content tree; untransformed
  * ancestors let their fixed-position frames cross the column and conversation.
  *
@@ -54,6 +54,9 @@ import type { TabHookContext } from '../tab-info.ts'
 import { flashPane } from './flash.ts'
 import css from './SidebarRight.module.css'
 
+/** Viewports below this width present the right sidebar as an overlay. */
+export const AUTO_FULLSCREEN_WIDTH = 768
+
 /** The store share the seat receives. */
 type Store = PropsStore<ReturnType<typeof createSidebarRightStore>>
 
@@ -395,7 +398,7 @@ export function RightbarSeat({
   const shortcuts = useShortcuts(entries => entries)
   const surface = useStore(state => state.bySession[sessionId])
   const shown = active && surface !== undefined && surface.layout.expanded
-  const autoFullscreen = viewportWidth < 768
+  const autoFullscreen = viewportWidth < AUTO_FULLSCREEN_WIDTH
   const fullscreen = autoFullscreen || surface?.layout.mode === 'fullscreen'
   const panelRef = useRef<HTMLDivElement | null>(null)
   // A reading never re-renders anything: the service applies it when it splits.
diff --git a/packages/client/ui-sidebar-right/tests/apply.client.spec.ts b/packages/client/ui-sidebar-right/tests/apply.client.spec.ts
index c2acde7768..f2052caed5 100644
--- a/packages/client/ui-sidebar-right/tests/apply.client.spec.ts
+++ b/packages/client/ui-sidebar-right/tests/apply.client.spec.ts
@@ -14,6 +14,7 @@ import { MenuRegistry } from '@deepseek-ai/dsh-client-ui-context-menu/src/client
 import { IconCloseOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
 import { createSnapshotStore } from '@deepseek-ai/dsh-client-store'
 import type { SlotRegistry } from '@deepseek-ai/dsh-client-ui-renderer/client'
+import type { HostObservable } from '@deepseek-ai/dsh-client-ui-slots'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
 import type { Shortcuts, ShortcutCommand } from '@deepseek-ai/dsh-client-shortcuts/client'
 import { TabMenuContent } from '../src/client/shell/TabMenuContent.tsx'
@@ -168,6 +169,46 @@ describe('ui-sidebar-right apply', () => {
     expect(ctx.sidebarRight.mounted.getSnapshot()).toBeUndefined()
   })
 
+  it('shares a live narrow viewport source and releases its media listener', async () => {
+    onTestFinished(() => { vi.unstubAllGlobals() })
+    const query = Object.assign(new EventTarget(), { matches: true })
+    const matchMedia = vi.fn(() => query)
+    vi.stubGlobal('matchMedia', matchMedia)
+    const { ctx, seat, injectedOf } = await boot()
+    onTestFinished(async () => { await ctx.fiber.dispose() })
+    const entry = seat('conversation.session.header.corner')
+    const first = injectedOf(entry) as { hooks: { narrowViewport: HostObservable<boolean> } }
+    const second = injectedOf(entry) as typeof first
+    const viewport = first.hooks.narrowViewport
+    expect(second.hooks.narrowViewport).toBe(viewport)
+    expect(matchMedia).toHaveBeenCalledWith('(width < 768px)')
+    expect(viewport.getSnapshot()).toBe(true)
+    const listener = vi.fn()
+    const unsubscribe = viewport.subscribe(listener)
+    try {
+      query.matches = false
+      query.dispatchEvent(new Event('change'))
+      expect(viewport.getSnapshot()).toBe(false)
+      expect(listener).toHaveBeenCalledOnce()
+    } finally { unsubscribe() }
+    query.matches = true
+    query.dispatchEvent(new Event('change'))
+    expect(listener).toHaveBeenCalledOnce()
+  })
+
+  it('uses the wide header presentation without browser media APIs', async () => {
+    onTestFinished(() => { vi.unstubAllGlobals() })
+    vi.stubGlobal('matchMedia', undefined)
+    const { ctx, seat, injectedOf } = await boot()
+    onTestFinished(async () => { await ctx.fiber.dispose() })
+    const injected = injectedOf(seat('conversation.session.header.corner')) as { hooks: { narrowViewport: HostObservable<boolean> } }
+    const viewport = injected.hooks.narrowViewport
+    expect(viewport.getSnapshot()).toBe(false)
+    const listener = vi.fn()
+    viewport.subscribe(listener)()
+    expect(listener).not.toHaveBeenCalled()
+  })
+
   it('hands the panel seat the frame report, the room rule, the opens, the observable registry, and the Tab domain', async () => {
     const { ctx, layout, current, resources, seat, injectedOf } = await boot()
     const injected = injectedOf(seat('rightbar.session')) as SidebarRightInjected
diff --git a/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx b/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx
index 45da0303dc..2e4550ef7f 100644
--- a/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx
+++ b/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx
@@ -1,13 +1,13 @@
 // @vitest-environment jsdom
 import { contextMenuHook } from '@deepseek-ai/dsh-client-test-runtime'
 /**
- * The way back into a hidden panel: the header's corner button exists exactly
- * while the panel is collapsed, asks for it to expand, and renders nothing
- * while the panel is shown.
+ * Narrow overlays preserve the header control's identity; wide panels release
+ * its header space while open.
  */
 import { describe, expect, it } from 'vitest'
 import { act, cleanup, fireEvent, render } from '@testing-library/react'
 import { useSyncExternalStore } from 'react'
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-store'
 import type { GlobalStandardProps, SessionStandardProps } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ShortcutCatalogEntry } from '@deepseek-ai/dsh-client-shortcuts/client'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
@@ -37,11 +37,13 @@ function hookOf<T>(inst: { subscribe: (fn: () => void) => () => void; getSnapsho
 }
 
 /** Mount the button over its real store and an empty shortcut catalog. */
-function mountButton(shortcuts: readonly ShortcutCatalogEntry[] = []) {
+function mountButton(shortcuts: readonly ShortcutCatalogEntry[] = [], narrow = false) {
   const instance = createSidebarRightStore(() => ({ kind: 'guide', title: 'Start' })).create()
+  const viewport = createSnapshotStore(narrow)
   const props: ExpandButtonProps = {
     ...standard,
     useShortcuts: <T,>(selector: (entries: readonly ShortcutCatalogEntry[]) => T): T => selector(shortcuts),
+    useNarrowViewport: hookOf(viewport),
     sessionId: SESSION,
     useStore: hookOf(instance),
     actions: instance.actions,
@@ -49,39 +51,60 @@ function mountButton(shortcuts: readonly ShortcutCatalogEntry[] = []) {
     t: (key: string) => key,
   }
   const view = render(<ExpandButton {...props} />)
-  const control = (): HTMLElement | null => view.container.querySelector('[data-sidebar-right-expand]')
-  return { instance, view, control }
+  const control = (): HTMLButtonElement | null => view.container.querySelector('[data-sidebar-right-expand]')
+  return { instance, viewport, view, control }
 }
 
 describe('ExpandButton', () => {
   it('advertises the configured expand binding', async () => {
-    const { control, view } = mountButton([{ id: 'sidebar.right.toggle' as never, label: 'Toggle', aliases: [],
-      binding: null, keys: ['Ctrl', 'B'], aria: 'Control+B', modified: true, conflicts: [], issue: null }])
+    const { instance, control, view } = mountButton([{ id: 'sidebar.right.toggle' as never, label: 'Toggle', aliases: [],
+      binding: null, keys: ['Ctrl', 'B'], aria: 'Control+B', modified: true, conflicts: [], issue: null }], true)
     expect(control()?.getAttribute('aria-keyshortcuts')).toBe('Control+B')
     fireEvent.pointerEnter(control()!)
     const tooltip = await view.findByRole('tooltip')
     expect(tooltip.textContent).toContain('chrome.expand')
     expect(Array.from(tooltip.querySelectorAll('kbd'), key => key.textContent)).toEqual(['Ctrl', 'B'])
+    act(() => { instance.actions.setExpanded(SESSION, true) })
+    expect(view.queryByRole('tooltip')).toBeNull()
     cleanup()
   })
   it('offers the way in while the session has no surface yet, and asks the panel to expand', () => {
-    const { instance, view, control } = mountButton()
+    const { instance, control } = mountButton()
     const button = control()
     if (button === null) throw new Error('expected the expand control')
     expect(button.getAttribute('aria-label')).toBe('chrome.expandAria')
     fireEvent.click(button)
     expect(instance.getSnapshot().bySession[SESSION]?.layout.expanded).toBe(true)
-    // Shown: the seat is empty, so the header lays out without it.
-    expect(view.container.childElementCount).toBe(0)
+    expect(control()).toBeNull()
+    act(() => { instance.actions.setExpanded(SESSION, false) })
+    expect(control()?.disabled).toBe(false)
     cleanup()
   })
 
-  it('comes back when the panel collapses again', () => {
-    const { instance, control } = mountButton()
+  it('retains the disabled control through a narrow overlay opening and closing', () => {
+    const { instance, control } = mountButton([], true)
+    const button = control()
+    if (button === null) throw new Error('expected the expand control')
     act(() => { instance.actions.setExpanded(SESSION, true) })
-    expect(control()).toBeNull()
+    expect(control()).toBe(button)
+    expect(button.disabled).toBe(true)
     act(() => { instance.actions.setExpanded(SESSION, false) })
-    expect(control()).not.toBeNull()
+    expect(control()).toBe(button)
+    expect(button.disabled).toBe(false)
+    cleanup()
+  })
+
+  it('keeps an available control across viewport changes and releases its space only for an open wide panel', () => {
+    const { instance, viewport, control } = mountButton()
+    const button = control()
+    act(() => { viewport.set(true) })
+    expect(control()).toBe(button)
+    act(() => { instance.actions.setExpanded(SESSION, true) })
+    expect(control()).toBe(button)
+    act(() => { viewport.set(false) })
+    expect(control()).toBeNull()
+    act(() => { viewport.set(true) })
+    expect(control()?.disabled).toBe(true)
     cleanup()
   })
 })

From d04f1d31658ea9ed69f6609617f6c84d3299c3d0 Mon Sep 17 00:00:00 2001
From: EricMoin <mengguolai@gmail.com>
Date: Thu, 29 Oct 2026 18:31:19 +0800
Subject: [PATCH 2/4] fix(ui): share frame width for sidebar presentation

---
 apps/web/tests/sidebar-right.e2e.ts           | 40 ++++++++++-----
 .../layout-frame-width/guide.i18n.yaml        | 16 ++++++
 .../layout-frame-width/guide.md               | 20 ++++++++
 .../layout-frame-width/guide.zh.md            | 20 ++++++++
 packages/client/ui-layout/README.i18n.yaml    |  4 +-
 packages/client/ui-layout/README.md           |  2 +-
 packages/client/ui-layout/README.zh.md        |  2 +-
 packages/client/ui-layout/src/client/index.ts |  6 ++-
 .../client/ui-layout/src/client/service.ts    |  4 ++
 .../ui-layout/tests/apply.client.spec.ts      | 14 +++++-
 .../ui-layout/tests/service.client.spec.ts    | 16 +++---
 .../tests/browser-plugin.client.spec.ts       |  3 ++
 .../client/ui-sidebar-right/README.i18n.yaml  | 12 ++---
 packages/client/ui-sidebar-right/README.md    |  6 +--
 packages/client/ui-sidebar-right/README.zh.md |  6 +--
 .../ui-sidebar-right/src/client/index.ts      | 31 +++++-------
 .../src/client/shell/ExpandButton.tsx         |  9 ++--
 .../src/client/shell/SidebarRight.tsx         | 27 +++-------
 .../tests/apply.client.spec.ts                | 49 ++++++++-----------
 .../tests/expand-button.client.spec.tsx       | 19 +++++--
 .../tests/seat.client.spec.tsx                | 29 ++++++-----
 .../tests/panel-list.client.spec.tsx          |  1 +
 .../tests/workspaces-service.client.spec.ts   |  2 +-
 23 files changed, 212 insertions(+), 126 deletions(-)
 create mode 100644 docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.i18n.yaml
 create mode 100644 docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md
 create mode 100644 docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.zh.md

diff --git a/apps/web/tests/sidebar-right.e2e.ts b/apps/web/tests/sidebar-right.e2e.ts
index 948c98cd64..427fe32349 100644
--- a/apps/web/tests/sidebar-right.e2e.ts
+++ b/apps/web/tests/sidebar-right.e2e.ts
@@ -7,7 +7,7 @@
 // draws the panel is a recorded, reversible choice, so this file asserts against
 // the frame's track as much as against the panel itself. The way back in while
 // collapsed is not in the column at all: it is one button in the conversation
-// header, and it leaves when the panel opens.
+// header, visible only while the panel is collapsed.
 //
 // Ordering is the product's own: the hero comes before any session, so the
 // empty right edge is asserted first and the session-bound cases follow in a
@@ -114,7 +114,7 @@ async function holdPanelSlide(panel: Locator) {
   })
 }
 
-/** The expand button in the conversation header, present only while collapsed. */
+/** The conversation header's expand control, visible only while collapsed. */
 function expandOf(page: Page): Locator {
   return page.locator('[data-sidebar-right-expand]')
 }
@@ -379,8 +379,7 @@ describe('web e2e: shipped right Sidebar', () => {
       onTestFailed(() => saveFailureShot(page, 'web-e2e-sidebar-right-pageup'))
       const frame = page.locator('[class*="frame"]').first()
       const composer = page.locator('textarea, [contenteditable="true"]').first()
-      // The expand button exists only while the panel is collapsed, when its
-      // docked hosts sit translated past the frame's right edge.
+      // Collapsed docked hosts sit translated past the frame's right edge.
       await expandOf(page).waitFor({ timeout: 15_000 })
       await composer.click()
       await composer.pressSequentially('caret')
@@ -644,17 +643,31 @@ describe('web e2e: shipped right Sidebar', () => {
       expect(tripwire.warnings).toEqual([])
     })
 
-    it.each([390, 767])('keeps the mobile conversation title still while the right sidebar slides at %ipx', async (viewportWidth) => {
-      onTestFailed(() => saveFailureShot(page, `web-e2e-sidebar-right-mobile-title-${viewportWidth}`))
+    it.each([
+      { viewportWidth: 390, frameWidth: 390 },
+      { viewportWidth: 767, frameWidth: 767 },
+      { viewportWidth: 1024, frameWidth: 767 },
+    ])('keeps the mobile conversation title still in a $frameWidth px frame inside a $viewportWidth px viewport', async ({ viewportWidth, frameWidth }) => {
+      const caseName = `mobile-title-${frameWidth}-viewport-${viewportWidth}`
+      onTestFailed(() => saveFailureShot(page, `web-e2e-sidebar-right-${caseName}`))
       const viewport = page.viewportSize()
       if (viewport === null) throw new Error('expected a fixed viewport')
       const column = await resetSidebar(page)
+      const frame = page.locator('[class*="frame"]').first()
+      const frameStyle = await frame.evaluate(node => ({
+        width: node.style.width,
+        priority: node.style.getPropertyPriority('width'),
+      }))
       const panel = column.locator('[data-sidebar-right-panel]')
       const title = page.locator('[class*="titleCluster"]').first()
       const utilities = page.locator('[class*="headerUtilities"]').first()
       try {
         await page.emulateMedia({ reducedMotion: 'no-preference' })
         await page.setViewportSize({ width: viewportWidth, height: viewport.height })
+        if (frameWidth !== viewportWidth) {
+          await frame.evaluate((node, width) => { node.style.width = `${width}px` }, frameWidth)
+        }
+        await expect.poll(async () => (await frame.boundingBox())?.width).toBe(frameWidth)
         await expect.poll(() => panel.getAttribute('data-sidebar-right-panel')).toBe('fullscreen')
         await column.locator('[data-sidebar-right-toggle]').click()
         await panel.evaluate(async (node) => {
@@ -667,23 +680,22 @@ describe('web e2e: shipped right Sidebar', () => {
         const utilitiesBefore = await utilities.boundingBox()
         expect(titleBefore?.width).toBeGreaterThan(0)
         expect(utilitiesBefore?.width).toBeGreaterThan(0)
-        await shot(page, `mobile-title-${viewportWidth}-collapsed`)
+        await shot(page, `${caseName}-collapsed`)
         try {
           for (const opening of [true, false]) {
             const held = await holdPanelSlide(panel)
             try {
               await (opening ? expandOf(page) : column.locator('[data-sidebar-right-toggle]')).click()
               await expect.poll(() => held.evaluate(state => state.animation?.playState)).toBe('paused')
-              const sliding = await paneAt(column, 0).boundingBox()
-              if (sliding === null) throw new Error('sliding panel is not rendered')
-              expect(sliding.x).toBeGreaterThan(0)
-              expect(sliding.x).toBeLessThan(viewportWidth)
+              const progress = await held.evaluate(state => state.animation?.effect?.getComputedTiming().progress)
+              expect(progress).toBeGreaterThan(0)
+              expect(progress).toBeLessThan(1)
               expect(await title.boundingBox()).toEqual(titleBefore)
               expect(await utilities.boundingBox()).toEqual(utilitiesBefore)
               expect(await titleNode.evaluate(node => node.isConnected)).toBe(true)
               expect(await expandOf(page).isDisabled()).toBe(opening)
               expect(await page.getByRole('button', { name: 'Open right sidebar', exact: true }).count()).toBe(opening ? 0 : 1)
-              await shot(page, `mobile-title-${viewportWidth}-${opening ? 'opening' : 'closing'}`)
+              await shot(page, `${caseName}-${opening ? 'opening' : 'closing'}`)
               await held.evaluate((state) => { (state.animation as Animation).finish() })
               expect(await title.boundingBox()).toEqual(titleBefore)
               expect(await utilities.boundingBox()).toEqual(utilitiesBefore)
@@ -699,6 +711,10 @@ describe('web e2e: shipped right Sidebar', () => {
           await titleNode.dispose()
         }
       } finally {
+        await frame.evaluate((node, original) => {
+          if (original.width) node.style.setProperty('width', original.width, original.priority)
+          else node.style.removeProperty('width')
+        }, frameStyle)
         await page.setViewportSize(viewport)
         await page.emulateMedia({ reducedMotion: null })
       }
diff --git a/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.i18n.yaml b/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.i18n.yaml
new file mode 100644
index 0000000000..b562210419
--- /dev/null
+++ b/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.i18n.yaml
@@ -0,0 +1,16 @@
+# Bilingual-pair consistency record for guide.md (docs/i18n/README.md): per heading
+# section, a hash of its English and Chinese blocks outside code blocks and generated regions.
+# After editing either side, bring the other along and re-record with:
+#   pnpm run verify-translation-pairing --write docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md
+/:
+  en: 3ca4fac76e0b00cd
+  zh: 7c3c716f6852d5c8
+/layout-implementations-provide-frame-width:
+  en: a813362996ec6123
+  zh: f3ce03a6d9189929
+/layout-implementations-provide-frame-width/change:
+  en: 3b416af7455739ba
+  zh: 33d763140ff660f2
+/layout-implementations-provide-frame-width/migration:
+  en: 58ee0cbb2bf6e355
+  zh: ded59e8163d189aa
diff --git a/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md b/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md
new file mode 100644
index 0000000000..0dccfef727
--- /dev/null
+++ b/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md
@@ -0,0 +1,20 @@
+---
+kind: upgrade-guide
+description: "Custom layout implementations and LayoutController callers must provide the frame-width observable."
+---
+
+# Layout implementations provide frame width
+
+English | [中文](guide.zh.md)
+
+## Change
+
+`ILayout` from `@deepseek-ai/dsh-client-ui-layout/client` requires `frameWidth: HostObservable<number>`. `LayoutController` requires this source as its fourth constructor argument, after `panelInfo`. Custom implementations and direct constructor callers must supply it; plugins that only consume the shipped `ctx.layout` need no changes.
+
+The source reports the frame's measured width in CSS pixels and notifies subscribers when it changes. Before the first measurement, it reports the initial window width. The right sidebar uses this source for both its automatic fullscreen presentation and its header button's retained space.
+
+## Migration
+
+1. Add `frameWidth` to each custom `ILayout` implementation and test fake. Read from the same layout storage that supplies the frame's geometry; delegate subscriptions to that storage and return its unsubscribe function.
+2. Pass that source as the fourth argument to each `new LayoutController(...)` call. Do not replace it with an independent window-width observer.
+3. Run your TypeScript checks, then resize the frame across 768 CSS pixels with the right sidebar open. Confirm that the sidebar presentation and header button change together, including when frame and window widths differ.
diff --git a/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.zh.md b/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.zh.md
new file mode 100644
index 0000000000..d06069e8db
--- /dev/null
+++ b/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.zh.md
@@ -0,0 +1,20 @@
+---
+kind: upgrade-guide
+description: "自定义布局实现与 LayoutController 调用方必须提供框架宽度的 observable。"
+---
+
+# 布局实现需提供框架宽度
+
+[English](guide.md) | 中文
+
+## 变更
+
+`@deepseek-ai/dsh-client-ui-layout/client` 中的 `ILayout` 要求提供 `frameWidth: HostObservable<number>`。`LayoutController` 要求将此数据源作为第四个构造参数，放在 `panelInfo` 之后。自定义实现与直接调用构造函数的代码必须提供它；仅使用内置 `ctx.layout` 的插件无需修改。
+
+此数据源报告框架的实测宽度，单位为 CSS 像素，并在宽度变化时通知订阅方。首次测量前，它报告初始窗口宽度。右侧栏的自动全屏呈现与标题栏按钮的占位共用此数据源。
+
+## 迁移
+
+1. 为每个自定义 `ILayout` 实现与测试替身添加 `frameWidth`。从提供框架几何数据的同一布局存储读取宽度，将订阅委托给该存储，并返回其取消订阅函数。
+2. 将此数据源作为第四个参数传入每个 `new LayoutController(...)` 调用。不要使用独立的窗口宽度观察器代替它。
+3. 运行 TypeScript 检查，再保持右侧栏打开，将框架宽度调整至 768 CSS 像素的两侧。确认侧栏呈现与标题栏按钮同步变化，包括框架与窗口宽度不同的情况。
diff --git a/packages/client/ui-layout/README.i18n.yaml b/packages/client/ui-layout/README.i18n.yaml
index a89c7c4b40..4f99055cb3 100644
--- a/packages/client/ui-layout/README.i18n.yaml
+++ b/packages/client/ui-layout/README.i18n.yaml
@@ -24,8 +24,8 @@
   en: 5ac34303ad90b484
   zh: abcc4a1dcf28391e
 /deepseek-ai-dsh-client-ui-layout/understand-the-implementation:
-  en: e3cb25f05902369a
-  zh: c1a8f049a7a4effb
+  en: d0e96d56889da0f3
+  zh: 711c8c5125f809c8
 /deepseek-ai-dsh-client-ui-layout/further-exploration:
   en: 74de780b4592e28e
   zh: a413f06f8ec406d0
diff --git a/packages/client/ui-layout/README.md b/packages/client/ui-layout/README.md
index 8a20476270..cb27430e44 100644
--- a/packages/client/ui-layout/README.md
+++ b/packages/client/ui-layout/README.md
@@ -62,7 +62,7 @@ The root registration supplies folded-landscape posture through an injected obse
 
 `selectPanel(id)` checks the live `main` registry before changing selection; an absent key throws and leaves the current panel intact. `beginNavigation()` returns an abort signal for an asynchronous UI navigation. A later call, a valid panel selection (including repeated selection), or layout disposal aborts that signal without cancelling underlying Session creation. Consumers check the signal before committing navigation or moving drafts.
 
-One registration declares the frame slots and binds `ctx.layout` methods `selectPanel`, `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. One root store separates `panelInfo` selection from `layoutInfo` measurements, width preferences, and presentation reports. `ctx.layout.panelInfo` and the standard `usePanelInfo` hook share the same selection source; AppFrame subscribes to the stable layout object. The `rightbar` owner supplies actual `width`, `viewportWidth`, and normal-presentation eligibility `canShow`; insufficient room causes a deterministic close, never automatic reopening on widening. Fullscreen hides the width handle without releasing a track the occupant retains. AppFrame keeps the column containers mounted. The right column's root controller renders `rightbar.session` through `SessionProvider` only while the Conversation is selected; its unmount report releases the track. The independent title component uses the selected Session title only while the Conversation is visible, with the build-configured product title or localized `common.brand.localBuild` as its fallback; locale revisions update that fallback. The theme presenter is a second effect: pure DOM writes from resolved snapshots — initial state through the getter once, then event-driven only, with no React path. It applies palette, font-size, font-list, and token variables before measuring the rendered background as the single color authority. Fullscreen presentation suppresses grid and handle transitions; its occupant reports the new columns only after covering the frame. Fullscreen exit keeps transitions suppressed while the frame installs its destination geometry: close removes the right track, and restore retains it. Subsequent normal geometry actions restore ordinary transitions.
+One registration declares the frame slots and binds `ctx.layout` methods `selectPanel`, `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. One root store separates `panelInfo` selection from `layoutInfo` measurements, width preferences, and presentation reports. `ctx.layout.panelInfo` and the standard `usePanelInfo` hook share the same selection source; AppFrame subscribes to the stable layout object. `ctx.layout.frameWidth` publishes the same root store's frame width in CSS pixels, initially the window width until the frame's first measurement; geometry consumers share its updates with the `rightbar` owner props. The `rightbar` owner supplies actual `width`, `viewportWidth`, and normal-presentation eligibility `canShow`; insufficient room causes a deterministic close, never automatic reopening on widening. Fullscreen hides the width handle without releasing a track the occupant retains. AppFrame keeps the column containers mounted. The right column's root controller renders `rightbar.session` through `SessionProvider` only while the Conversation is selected; its unmount report releases the track. The independent title component uses the selected Session title only while the Conversation is visible, with the build-configured product title or localized `common.brand.localBuild` as its fallback; locale revisions update that fallback. The theme presenter is a second effect: pure DOM writes from resolved snapshots — initial state through the getter once, then event-driven only, with no React path. It applies palette, font-size, font-list, and token variables before measuring the rendered background as the single color authority. Fullscreen presentation suppresses grid and handle transitions; its occupant reports the new columns only after covering the frame. Fullscreen exit keeps transitions suppressed while the frame installs its destination geometry: close removes the right track, and restore retains it. Subsequent normal geometry actions restore ordinary transitions.
 
 </details>
 
diff --git a/packages/client/ui-layout/README.zh.md b/packages/client/ui-layout/README.zh.md
index e19b7a0bd2..f029902c37 100644
--- a/packages/client/ui-layout/README.zh.md
+++ b/packages/client/ui-layout/README.zh.md
@@ -62,7 +62,7 @@ root 注册通过注入的可观察源提供横屏折叠状态，由渲染器负
 
 `selectPanel(id)` 在改变选中态前检查实时 `main` 注册表；缺失的 key 会抛错并保留当前面板。`beginNavigation()` 为异步 UI 导航返回 abort signal。后续调用、有效面板选择（包括重复选择）或布局释放会中止该 signal，但不取消底层会话创建。消费方在提交导航或搬移草稿前检查 signal。
 
-一次注册声明框架的子 slot，并绑定 `ctx.layout` 的 `selectPanel`、`toggleSidebar`、`openRightbar(track, fullscreen)` 与 `closeRightbar`。同一个 root 存储把 `panelInfo` 选中态与 `layoutInfo` 测量、宽度偏好、呈现报告分开。`ctx.layout.panelInfo` 与标准 `usePanelInfo` hook 共用同一个选中态来源；AppFrame 订阅引用稳定的布局对象。`rightbar` owner 提供实际 `width`、`viewportWidth`，以及表示能否以普通模式呈现的 `canShow`；占用方在空间不足时执行确定性的收起，变宽不自行重新展开。全屏隐藏宽度手柄，但不自行释放占用方要求保留的轨道。AppFrame 保持各列容器挂载。右栏的 root 控制器仅在选中会话界面时，经 `SessionProvider` 渲染 `rightbar.session`；内容卸载时的报告释放轨道。独立的标题组件仅在会话界面可见时使用所选会话标题，以构建配置的产品标题或本地化 `common.brand.localBuild` 为回退值；语言变化会更新该回退值。主题呈现器是第二个 effect：从解析后的快照做纯 DOM 写入——初始状态经 getter 读取一次，此后仅事件驱动，不经过 React。它先应用调色板、字号、字体列表与 token 变量，再把渲染出的背景测量为唯一的颜色依据。全屏呈现禁用网格和手柄过渡；占用方完全覆盖框架后才报告新的列布局。退出全屏时，框架先保持无过渡并安装目标布局：关闭移除右轨道，恢复保留右轨道。后续普通几何操作恢复正常过渡。
+一次注册声明框架的子 slot，并绑定 `ctx.layout` 的 `selectPanel`、`toggleSidebar`、`openRightbar(track, fullscreen)` 与 `closeRightbar`。同一个 root 存储把 `panelInfo` 选中态与 `layoutInfo` 测量、宽度偏好、呈现报告分开。`ctx.layout.panelInfo` 与标准 `usePanelInfo` hook 共用同一个选中态来源；AppFrame 订阅引用稳定的布局对象。`ctx.layout.frameWidth` 发布同一个 root 存储中的框架宽度，单位为 CSS 像素；首次测量框架前以窗口宽度初始化，几何数据消费方与 `rightbar` owner props 共用其更新。`rightbar` owner 提供实际 `width`、`viewportWidth`，以及表示能否以普通模式呈现的 `canShow`；占用方在空间不足时执行确定性的收起，变宽不自行重新展开。全屏隐藏宽度手柄，但不自行释放占用方要求保留的轨道。AppFrame 保持各列容器挂载。右栏的 root 控制器仅在选中会话界面时，经 `SessionProvider` 渲染 `rightbar.session`；内容卸载时的报告释放轨道。独立的标题组件仅在会话界面可见时使用所选会话标题，以构建配置的产品标题或本地化 `common.brand.localBuild` 为回退值；语言变化会更新该回退值。主题呈现器是第二个 effect：从解析后的快照做纯 DOM 写入——初始状态经 getter 读取一次，此后仅事件驱动，不经过 React。它先应用调色板、字号、字体列表与 token 变量，再把渲染出的背景测量为唯一的颜色依据。全屏呈现禁用网格和手柄过渡；占用方完全覆盖框架后才报告新的列布局。退出全屏时，框架先保持无过渡并安装目标布局：关闭移除右轨道，恢复保留右轨道。后续普通几何操作恢复正常过渡。
 
 </details>
 
diff --git a/packages/client/ui-layout/src/client/index.ts b/packages/client/ui-layout/src/client/index.ts
index aec243039c..3e1e5b77db 100644
--- a/packages/client/ui-layout/src/client/index.ts
+++ b/packages/client/ui-layout/src/client/index.ts
@@ -185,8 +185,12 @@ export function apply(ctx: ClientContext): void {
       getSnapshot: () => instance.getSnapshot().panelInfo,
       subscribe: listener => instance.subscribe(listener),
     }
+    const frameWidth: HostObservable<number> = {
+      getSnapshot: () => instance.getSnapshot().layoutInfo.viewportWidth,
+      subscribe: listener => instance.subscribe(listener),
+    }
     const layout = new LayoutController(instance.actions, id =>
-      ctx.slots.entries('main').some(entry => entry.options.key === id), panelInfo)
+      ctx.slots.entries('main').some(entry => entry.options.key === id), panelInfo, frameWidth)
     const disposePanelInfo = ctx.slots.provideRoot({ hooks: { panelInfo: layout.panelInfo } })
     const disposeService = ctx.reflect.provide('layout', layout)
     const disposeRegistration = ctx.slots.register({
diff --git a/packages/client/ui-layout/src/client/service.ts b/packages/client/ui-layout/src/client/service.ts
index 22dd77a4e6..d35ab3aae5 100644
--- a/packages/client/ui-layout/src/client/service.ts
+++ b/packages/client/ui-layout/src/client/service.ts
@@ -28,6 +28,8 @@ export type PanelActions = BoundActions<ReturnType<typeof createLayoutStore>>
 export interface ILayout {
   /** Selected central panel from the same root store used by `usePanelInfo`. */
   readonly panelInfo: HostObservable<PanelInfo>
+  /** Frame width in px; window width initializes it until the frame is measured. */
+  readonly frameWidth: HostObservable<number>
   /**
    * Select a global central panel without changing the current Session.
    * @param panelId - registered main key, or null to show the Conversation.
@@ -61,11 +63,13 @@ export class LayoutController implements ILayout {
    * @param panels - actions of the instance shared with the root entry.
    * @param hasMainPanel - checks the live main-slot registry for a panel id.
    * @param panelInfo - root store's shared central-panel selection source.
+   * @param frameWidth - root store's measured frame width source.
    */
   constructor(
     private readonly panels: PanelActions,
     private readonly hasMainPanel: (id: MainPanelId) => boolean,
     readonly panelInfo: HostObservable<PanelInfo>,
+    readonly frameWidth: HostObservable<number>,
   ) {}
 
   /** Select a global panel or return to the Conversation. */
diff --git a/packages/client/ui-layout/tests/apply.client.spec.ts b/packages/client/ui-layout/tests/apply.client.spec.ts
index 7ab8585886..bd8553d39c 100644
--- a/packages/client/ui-layout/tests/apply.client.spec.ts
+++ b/packages/client/ui-layout/tests/apply.client.spec.ts
@@ -117,7 +117,7 @@ describe('ui-layout client apply', () => {
     expect(width()).toBe(280)
   })
 
-  it('shares a pre-created instance between service actions, root rendering, and panelInfo', async () => {
+  it('shares a pre-created instance between service actions, root rendering, and layout sources', async () => {
     const { ctx, slots, rendererHost } = await bench()
     const fiber = ctx.plugin({ inject: [...inject], apply })
     await fiber.await()
@@ -135,6 +135,18 @@ describe('ui-layout client apply', () => {
     const panelInfo = host.root.getSnapshot().hooks.panelInfo!
     expect(panelInfo).toBe(layout.panelInfo)
     expect(panelInfo.getSnapshot()).toBe(instance.getSnapshot().panelInfo)
+    expect(layout.frameWidth.getSnapshot()).toBe(1920)
+    const measure = vi.fn(() => layout.frameWidth.getSnapshot())
+    const unsubscribe = layout.frameWidth.subscribe(measure)
+    try {
+      instance.actions.setViewportWidth(767)
+      expect(layout.frameWidth.getSnapshot()).toBe(767)
+      expect(measure).toHaveReturnedWith(767)
+      expect(window.innerWidth).toBe(1920)
+    } finally { unsubscribe() }
+    instance.actions.setViewportWidth(1920)
+    expect(layout.frameWidth.getSnapshot()).toBe(1920)
+    expect(measure).toHaveBeenCalledOnce()
     const panelId = 'panel-a' as MainPanelId
     const disposePanel = slots.register({ name: 'main', key: panelId }, () => null)
     layout.selectPanel(panelId)
diff --git a/packages/client/ui-layout/tests/service.client.spec.ts b/packages/client/ui-layout/tests/service.client.spec.ts
index b3e3680d5c..8e3f96d1e6 100644
--- a/packages/client/ui-layout/tests/service.client.spec.ts
+++ b/packages/client/ui-layout/tests/service.client.spec.ts
@@ -19,7 +19,7 @@ function fakePanels(): PanelActions {
 describe('LayoutController', () => {
   it('forwards right column transitions to the constructor-supplied actions', () => {
     const panels = fakePanels()
-    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }))
+    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
 
     service.openRightbar(true, false)
     service.openRightbar(true, true)
@@ -36,7 +36,7 @@ describe('LayoutController', () => {
 
   it('can toggle the sidebar immediately after construction', () => {
     const panels = fakePanels()
-    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }))
+    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
 
     service.toggleSidebar()
 
@@ -46,7 +46,7 @@ describe('LayoutController', () => {
 
   it('forwards panel selection and returning to the Conversation without changing geometry', () => {
     const panels = fakePanels()
-    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }))
+    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
     const panelId = 'panel-a' as MainPanelId
     service.selectPanel(panelId)
     service.selectPanel(panelId)
@@ -62,8 +62,8 @@ describe('LayoutController', () => {
   it('keeps separately constructed controllers bound to their own instances', () => {
     const first = fakePanels()
     const second = fakePanels()
-    const firstService = new LayoutController(first, () => true, createSnapshotStore({ activePanelId: null }))
-    const secondService = new LayoutController(second, () => true, createSnapshotStore({ activePanelId: null }))
+    const firstService = new LayoutController(first, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
+    const secondService = new LayoutController(second, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
     firstService.toggleSidebar()
     expect(first.toggleSidebar).toHaveBeenCalledTimes(1)
     expect(second.toggleSidebar).not.toHaveBeenCalled()
@@ -75,7 +75,9 @@ describe('LayoutController', () => {
   it('rejects an absent main entry without changing selection or cancelling pending navigation', () => {
     const panels = fakePanels()
     const present = new Set(['panel-a'])
-    const service = new LayoutController(panels, id => present.has(id), createSnapshotStore({ activePanelId: null }))
+    const service = new LayoutController(
+      panels, id => present.has(id), createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920),
+    )
     service.selectPanel('panel-a' as MainPanelId)
     const navigation = service.beginNavigation()
     present.delete('panel-a')
@@ -87,7 +89,7 @@ describe('LayoutController', () => {
   })
 
   it('supersedes asynchronous navigation on another request, any valid selection, and disposal', () => {
-    const service = new LayoutController(fakePanels(), () => true, createSnapshotStore({ activePanelId: null }))
+    const service = new LayoutController(fakePanels(), () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
     const first = service.beginNavigation()
     const second = service.beginNavigation()
     expect(first.aborted).toBe(true)
diff --git a/packages/client/ui-open-in-app/tests/browser-plugin.client.spec.ts b/packages/client/ui-open-in-app/tests/browser-plugin.client.spec.ts
index e0457da73f..c5eff3af50 100644
--- a/packages/client/ui-open-in-app/tests/browser-plugin.client.spec.ts
+++ b/packages/client/ui-open-in-app/tests/browser-plugin.client.spec.ts
@@ -80,6 +80,9 @@ async function bench() {
   const layout = new LayoutController(layoutStore.actions, id => id === 'plugins', {
     getSnapshot: () => layoutStore.getSnapshot().panelInfo,
     subscribe: listener => layoutStore.subscribe(listener),
+  }, {
+    getSnapshot: () => layoutStore.getSnapshot().layoutInfo.viewportWidth,
+    subscribe: listener => layoutStore.subscribe(listener),
   })
   const notify = vi.fn()
   const menus = new MenuRegistry(notify)
diff --git a/packages/client/ui-sidebar-right/README.i18n.yaml b/packages/client/ui-sidebar-right/README.i18n.yaml
index 03cf7d7d69..78ebefbb4a 100644
--- a/packages/client/ui-sidebar-right/README.i18n.yaml
+++ b/packages/client/ui-sidebar-right/README.i18n.yaml
@@ -18,11 +18,11 @@
   en: 3b007cc4d2d89c60
   zh: 74d9795c6392ad74
 /deepseek-ai-dsh-client-ui-sidebar-right/presentations:
-  en: 5024c4e5fe5dfd2e
-  zh: 535a7f585e1bcd97
+  en: 0ccdab5f29ff9002
+  zh: a0af44ff13301a7f
 /deepseek-ai-dsh-client-ui-sidebar-right/the-expand-button:
-  en: 50c158b6639ae83a
-  zh: 9580a299e1ee1ca8
+  en: 5fe679356e432915
+  zh: e14bcc0778fa1131
 /deepseek-ai-dsh-client-ui-sidebar-right/state:
   en: 98597ce087c48075
   zh: c5466bf7955ea7b0
@@ -30,8 +30,8 @@
   en: 9533f5af50898daf
   zh: 78d3b77c25962145
 /deepseek-ai-dsh-client-ui-sidebar-right/ctx-sidebarright:
-  en: ce5622d6d18ed8d1
-  zh: 292932d8edb6e1c3
+  en: 47b35a3b5be01240
+  zh: 9b1396d8b36f41cd
 /deepseek-ai-dsh-client-ui-sidebar-right/the-tab-domain:
   en: 717b86e05b44ebdd
   zh: 0f4f694d0ea1d7f8
diff --git a/packages/client/ui-sidebar-right/README.md b/packages/client/ui-sidebar-right/README.md
index d88aff7b90..70ed7c2452 100644
--- a/packages/client/ui-sidebar-right/README.md
+++ b/packages/client/ui-sidebar-right/README.md
@@ -36,7 +36,7 @@ The layout itself — the split tree, its operations, the drag gestures, the flo
 <a id="presentations"></a>
 ## Presentations
 
-Normal and fullscreen presentations share the same content tree, so switching does not remount tabs. The normal panel anchors to the right column; fullscreen covers the viewport while retaining the wide-screen columns underneath. Opening below 768px uses fullscreen automatically; leaving fullscreen on a narrow viewport closes the panel, and widening does not reopen a closed panel. A fullscreen opening keeps the underlying columns unchanged until its slide finishes, then prepares the normal track without a column transition. Before a fullscreen panel retreats, closing prepares a full-width conversation and restoring prepares the normal right track; the background does not animate during the retreat.
+Normal and fullscreen presentations share the same content tree, so switching does not remount tabs. The normal panel anchors to the right column; fullscreen covers the viewport while retaining the wide-screen columns underneath. Opening with a frame width below 768px uses fullscreen automatically; leaving fullscreen in a narrow frame closes the panel, and widening does not reopen a closed panel. A fullscreen opening keeps the underlying columns unchanged until its slide finishes, then prepares the normal track without a column transition. Before a fullscreen panel retreats, closing prepares a full-width conversation and restoring prepares the normal right track; the background does not animate during the retreat.
 
 With a coarse pointer, a disabled split button is hidden, whether blocked by insufficient pane width or the two-pane limit, while retaining its space for stable width measurements. Fine-pointer layouts keep the disabled button visible.
 
@@ -56,7 +56,7 @@ The panel has no header row. Its two controls — the presentation switch and th
 
 The shortcut reference includes right-sidebar toggle, split and panel fullscreen commands. The same effective binding appears on the corresponding controls. Split and fullscreen require focus within a visible dock pane; conversation focus leaves them unavailable. Split remains visible when unavailable; its focusable tooltip shows the current binding and explains the pane limit or width requirement. Files, browser, and terminal providers contribute their own commands. Guide buttons display effective shortcuts as unboxed text inline without duplicate tooltips.
 
-While the panel is hidden, one button in the conversation header's corner seat (`conversation.session.header.corner`, past the utilities' right edge and level with the Session log control) is the way back in. Its glyph is the left sidebar's collapse icon mirrored. It uses the shared compact Button, matching the adjacent More action’s radius and hover fill. It shares the panel's store (the slot runtime allows one handle across two same-scope seats); while the panel is shown below 768px, the button stays mounted, hidden, and disabled, retaining its header space so the title and utilities do not shift during the overlay slide. On wider viewports the button renders nothing and the corner seat collapses. A collapsed Sidebar therefore costs the conversation nothing: no rail, no width, and the transcript's scrollbar stays at the column's edge. Without a session there is no button and no panel.
+While the panel is hidden, one button in the conversation header's corner seat (`conversation.session.header.corner`, past the utilities' right edge and level with the Session log control) is the way back in. Its glyph is the left sidebar's collapse icon mirrored. It uses the shared compact Button, matching the adjacent More action’s radius and hover fill. It shares the panel's store (the slot runtime allows one handle across two same-scope seats); while the panel is shown in a frame narrower than 768px, the button stays mounted, hidden, and disabled, retaining its header space so the title and utilities do not shift during the overlay slide. The panel and button share the frame-width source. In wider frames, including manual fullscreen, the button renders nothing and the corner seat collapses. A collapsed Sidebar therefore costs the conversation nothing: no rail, no width, and the transcript's scrollbar stays at the column's edge. Without a session there is no button and no panel.
 
 The panel takes the conversation's ground colour and content font sizes rather than a raised layer of its own: it is a column of the page, not a card over it.
 
@@ -100,7 +100,7 @@ Two more seats extend what is already there: `sidebar.right.tab.guide` (chain) r
 
 `openResource`, `openResourceIn`, and `tab.actions.openResource` also accept `destination: 'sidebar' | 'float'`, which names the host instead of a pane and takes precedence over `paneId`, `preferNewPane`, `replaceTab`, and `revealIfOpened`; `tab.actions` then passes neither its own pane nor itself for replacement, and no tab closes. Matching uses the Session, the claimed kind, and the content id. A copy already in the requested host is revealed, and glows when it was already on screen. Otherwise one copy from the other host moves there, keeping its tab id, occurrence, signal, and body state such as scroll position; its close handler does not run. Otherwise a new tab opens there. `'sidebar'` uses the active docked pane (the first docked pane while a floating pane is active), never splits, and expands the column; an empty collapsed root takes the tab without a default page beside it. `'float'` uses a new floating panel at the next cascade position and leaves the column's expansion as it is, for a new tab as for a move; a docked tab that leaves its pane follows the usual empty-pane rules. Other copies stay open. Every open still delivers its `params` and steps `revision`, and the whole open, including a move, is one history entry. Without `destination`, placement follows the rules above unchanged.
 
-`close(tabId)` closes a tab; `hide(tabId)` closes a floating tab or collapses its docked column; `active()` reads the active tab. `isExpanded()` and `toggleExpanded()` read and drive the column's expansion; `toggleFullscreen(target)` applies the panel control’s display-mode action to a captured dock pane. Layout operations, for callers that arrange the column programmatically, each recorded like the gesture it stands in for: `focus(tabId)` focuses a tab and its pane; `split(paneId?)` splits a docked pane (the active one by default) under the same pane budget and room rule as the strip's control and returns the new pane's id, or `undefined` — recording nothing — when it cannot; `float(tabId, rect?)` takes a docked tab out into a panel; `dock(paneId)` returns a floating panel to the active docked pane and expands the column, as the panel's dock control does. A tab or pane that does not exist, or already is where the call would put it, is left alone. The face exposes operations only: no layout snapshot, no operation log, no lookup by address. `_undo()` / `_redo()` step the on-screen surface's history; they are `@internal` — the sequence has no user-facing control, and these exist for tests. Commands act on the on-screen Session through its adopted store; with no Session on screen, or before the runtime mints its store, they throw rather than write into a surface nobody draws. `mounted` is the observable of the Session on screen: the selected Session while the Conversation fills the main column, `undefined` while a global panel replaces it or no Session is selected. The plugin derives it from the Session selection and `ctx.layout.panelInfo`, and it changes before React renders the change that causes it, so a component rendered in that commit reads the arriving Session and may act on it from its effects: the frame renders that Session's seat in the same pass, which mints its store. Seats never publish it; each reports only what it renders with: the room its docking kit measured, which `split` and `preferNewPane` apply to that Session's panes (unmeasured panes have room), and whether its frame width presents the panel fullscreen automatically, which the fullscreen command applies. The plan review's automatic open reads `mounted` through a bound hook.
+`close(tabId)` closes a tab; `hide(tabId)` closes a floating tab or collapses its docked column; `active()` reads the active tab. `isExpanded()` and `toggleExpanded()` read and drive the column's expansion; `toggleFullscreen(target)` applies the panel control’s display-mode action to a captured dock pane. Layout operations, for callers that arrange the column programmatically, each recorded like the gesture it stands in for: `focus(tabId)` focuses a tab and its pane; `split(paneId?)` splits a docked pane (the active one by default) under the same pane budget and room rule as the strip's control and returns the new pane's id, or `undefined` — recording nothing — when it cannot; `float(tabId, rect?)` takes a docked tab out into a panel; `dock(paneId)` returns a floating panel to the active docked pane and expands the column, as the panel's dock control does. A tab or pane that does not exist, or already is where the call would put it, is left alone. The face exposes operations only: no layout snapshot, no operation log, no lookup by address. `_undo()` / `_redo()` step the on-screen surface's history; they are `@internal` — the sequence has no user-facing control, and these exist for tests. Commands act on the on-screen Session through its adopted store; with no Session on screen, or before the runtime mints its store, they throw rather than write into a surface nobody draws. `mounted` is the observable of the Session on screen: the selected Session while the Conversation fills the main column, `undefined` while a global panel replaces it or no Session is selected. The plugin derives it from the Session selection and `ctx.layout.panelInfo`, and it changes before React renders the change that causes it, so a component rendered in that commit reads the arriving Session and may act on it from its effects: the frame renders that Session's seat in the same pass, which mints its store. Seats never publish it; each reports the room its docking kit measured, which `split` and `preferNewPane` apply to that Session's panes (unmeasured panes have room). The fullscreen command shares the panel and header button's automatic fullscreen rule, derived from `ctx.layout.frameWidth`. The plan review's automatic open reads `mounted` through a bound hook.
 
 `focusedTarget(element?)` resolves the current DOM pane and tab, including an embedding iframe; outside focus returns no page. `commandTarget(element?)` additionally allows an outside open to use the on-screen Session's active dock pane. Captures include the occurrence and navigation revision; `isTargetCurrent(target)` rejects changed Sessions, moved or reopened tabs, and intervening navigation. Focus and pointer activation remain separate from persisted layout selection.
 
diff --git a/packages/client/ui-sidebar-right/README.zh.md b/packages/client/ui-sidebar-right/README.zh.md
index 0c7f6e1a5f..fc7fbae381 100644
--- a/packages/client/ui-sidebar-right/README.zh.md
+++ b/packages/client/ui-sidebar-right/README.zh.md
@@ -36,7 +36,7 @@ kind: "package-reference"
 <a id="presentations"></a>
 ## 呈现形态
 
-普通与全屏共用同一棵面板内容树，切换不会重挂载Tab。普通面板贴靠右栏；全屏面板覆盖窗口并保留宽屏底层列宽。窗口低于768px时打开右栏自动全屏；窄屏退出全屏会收起右栏，变宽不重新打开已关闭的右栏。 全屏打开时，底层列宽保持不变，直到滑入结束后才无过渡地准备普通轨道。 全屏面板退场前，关闭先准备全宽会话区，恢复先准备普通右轨道；退场期间底层不播放宽度动画。
+普通与全屏共用同一棵面板内容树，切换不会重挂载Tab。普通面板贴靠右栏；全屏面板覆盖窗口并保留宽屏底层列宽。框架宽度低于 768px 时打开右栏自动全屏；窄框架退出全屏会收起右栏，变宽不重新打开已关闭的右栏。 全屏打开时，底层列宽保持不变，直到滑入结束后才无过渡地准备普通轨道。 全屏面板退场前，关闭先准备全宽会话区，恢复先准备普通右轨道；退场期间底层不播放宽度动画。
 
 触屏等粗指针设备上，因面板宽度不足或已达两个分栏上限而禁用的分栏按钮都会隐藏，并保留占位以稳定宽度测量。鼠标等精细指针设备仍显示禁用按钮。
 
@@ -56,7 +56,7 @@ kind: "package-reference"
 
 快捷键速查包含右侧栏切换、分栏和面板全屏命令，对应控件显示同一份有效键位。分栏与全屏要求焦点位于可见的停靠分栏内；焦点在聊天区时不可用。不可分栏时控件仍可见，可聚焦的提示显示当前键位，并说明分栏数量上限或宽度要求。文件、浏览器和终端提供者分别注册自己的命令。开始页按钮内以无背景文字显示有效快捷键，不额外弹出重复提示。
 
-面板隐藏时，会话 header 角落席位里的一个按钮（`conversation.session.header.corner`，在工具组右缘之外，与 Session 日志控件齐平）是回去的路。它的图形是左侧 sidebar 折叠图标的镜像。它使用公共紧凑 Button，与相邻更多操作按钮共用圆角和 hover 底色。它与面板共用一个存储（slot 运行时允许两个同作用域席位共用一个 handle）；视口宽度小于 768px 且面板显示时，按钮保持挂载、隐藏并禁用，保留在 header 中的占位，使标题和工具组在覆盖层滑动期间不发生位移。更宽的视口中，按钮不渲染，角落席位随之收起。于是折叠的 Sidebar 不花会话区任何代价：没有轨条、没有宽度，转录的滚动条留在列的边缘。没有会话就没有按钮也没有面板。
+面板隐藏时，会话 header 角落席位里的一个按钮（`conversation.session.header.corner`，在工具组右缘之外，与 Session 日志控件齐平）是回去的路。它的图形是左侧 sidebar 折叠图标的镜像。它使用公共紧凑 Button，与相邻更多操作按钮共用圆角和 hover 底色。它与面板共用一个存储（slot 运行时允许两个同作用域席位共用一个 handle）；框架宽度小于 768px 且面板显示时，按钮保持挂载、隐藏并禁用，保留在 header 中的占位，使标题和工具组在覆盖层滑动期间不发生位移。面板与按钮共用框架宽度来源。在更宽的框架中，包括手动全屏时，按钮不渲染，角落席位随之收起。于是折叠的 Sidebar 不花会话区任何代价：没有轨条、没有宽度，转录的滚动条留在列的边缘。没有会话就没有按钮也没有面板。
 
 面板取会话区的底色与正文字号，而不是自成一层浮起的表面：它是页面的一列，不是压在页面上的卡片。
 
@@ -100,7 +100,7 @@ tab 类型分两阶段注册，随包发布的引导类型走的正是别的包
 
 `openResource`、`openResourceIn` 与 `tab.actions.openResource` 还接受 `destination: 'sidebar' | 'float'`：它指定宿主位置而非分栏，优先于 `paneId`、`preferNewPane`、`replaceTab` 与 `revealIfOpened`；此时 `tab.actions` 既不传自己所在的格，也不把自己作为被替换的 tab，不会关闭任何 tab。匹配依据会话、认领的 kind 与 content id。请求的宿主里已有副本时揭示它，该副本原本就在屏幕上时发光提示。否则把另一宿主中的一份副本移过去，保留其 tab id、occurrence、signal 及滚动位置等正文状态，不运行其关闭处理器。否则在该宿主新开 tab。`'sidebar'` 使用活跃停靠格（活动格是浮窗时为第一个停靠格），从不分栏，并展开该列；空的收起根格直接接收该 tab，旁边不补默认页。`'float'` 在下一个级联位置新建浮窗，新开和移动都不改变该列的展开状态；停靠 tab 离开所在格后按通常的空格规则处理。其他副本保持打开。每次打开仍交付 `params` 并递增 `revision`，整次打开（含移动）是一条历史。不传 `destination` 时，落位规则与上文相同。
 
-`close(tabId)` 关闭一个 tab；`hide(tabId)` 关闭浮动 tab 或收起其停靠列；`active()` 读取活动 tab。`isExpanded()` 与 `toggleExpanded()` 读取并驱动该列的展开；`toggleFullscreen(target)` 对捕获的停靠分栏执行面板控件的显示模式操作。布局操作供以编程方式安排该列的调用方使用，每个都像它替代的手势一样被记录：`focus(tabId)` 聚焦一个 tab 及其格；`split(paneId?)` 在与 tab 条控件相同的格预算与空间规则下分栏一个停靠格（默认活跃格），返回新格的 id，做不到时返回 `undefined`——且不记录任何东西；`float(tabId, rect?)` 把停靠 tab 浮出为浮窗；`dock(paneId)` 把浮窗放回活跃停靠格并展开该列，与浮窗的收回控件一致。不存在的 tab 或格、或已处于调用目标状态的，都原样不动。该接口只暴露操作：没有布局快照、没有操作日志、没有按地址查找。`_undo()` / `_redo()` 步进屏幕上停靠面的历史；它们是 `@internal`——序列没有面向用户的控件，这两个只为测试存在。命令通过屏幕上会话已采用的 store 作用于该会话；没有会话在屏幕上、或运行时尚未创建它的 store 时，命令 throw，而不是写进一个没人绘制的面里。`mounted` 是「屏幕上的会话」的可观察值：Conversation 占据主栏时为选中的会话，全局面板替代它或没有选中会话时为 `undefined`。插件从会话选择与 `ctx.layout.panelInfo` 推导它，它在 React 渲染引起变化的那次更新之前就已改变，因此同一次提交里渲染的组件读到的是到来的会话，并可以在自己的 effect 里对它行动：框架在同一轮渲染里渲染该会话的席位，席位随之创建它的 store。席位从不发布它；每个席位只上报它渲染时依据的事实：停靠套件测得的空间，`split` 与 `preferNewPane` 把它用于该会话的分栏（未测量的分栏视为有空间）；以及框架宽度是否让面板自动全屏，全屏命令据此执行。计划审阅的自动打开通过绑定的 hook 读取 `mounted`。
+`close(tabId)` 关闭一个 tab；`hide(tabId)` 关闭浮动 tab 或收起其停靠列；`active()` 读取活动 tab。`isExpanded()` 与 `toggleExpanded()` 读取并驱动该列的展开；`toggleFullscreen(target)` 对捕获的停靠分栏执行面板控件的显示模式操作。布局操作供以编程方式安排该列的调用方使用，每个都像它替代的手势一样被记录：`focus(tabId)` 聚焦一个 tab 及其格；`split(paneId?)` 在与 tab 条控件相同的格预算与空间规则下分栏一个停靠格（默认活跃格），返回新格的 id，做不到时返回 `undefined`——且不记录任何东西；`float(tabId, rect?)` 把停靠 tab 浮出为浮窗；`dock(paneId)` 把浮窗放回活跃停靠格并展开该列，与浮窗的收回控件一致。不存在的 tab 或格、或已处于调用目标状态的，都原样不动。该接口只暴露操作：没有布局快照、没有操作日志、没有按地址查找。`_undo()` / `_redo()` 步进屏幕上停靠面的历史；它们是 `@internal`——序列没有面向用户的控件，这两个只为测试存在。命令通过屏幕上会话已采用的 store 作用于该会话；没有会话在屏幕上、或运行时尚未创建它的 store 时，命令 throw，而不是写进一个没人绘制的面里。`mounted` 是「屏幕上的会话」的可观察值：Conversation 占据主栏时为选中的会话，全局面板替代它或没有选中会话时为 `undefined`。插件从会话选择与 `ctx.layout.panelInfo` 推导它，它在 React 渲染引起变化的那次更新之前就已改变，因此同一次提交里渲染的组件读到的是到来的会话，并可以在自己的 effect 里对它行动：框架在同一轮渲染里渲染该会话的席位，席位随之创建它的 store。席位从不发布它；每个席位只上报停靠套件测得的空间，`split` 与 `preferNewPane` 把它用于该会话的分栏（未测量的分栏视为有空间）。全屏命令与面板、header 按钮共用自动全屏规则，该规则从 `ctx.layout.frameWidth` 推导。计划审阅的自动打开通过绑定的 hook 读取 `mounted`。
 
 `focusedTarget(element?)` 解析当前 DOM 分栏和标签页，也接受嵌入 iframe；焦点位于外部时不返回页面。`commandTarget(element?)` 另外允许外部打开动作使用屏幕上会话的活动停靠分栏。捕获值包含 occurrence 和导航版本；`isTargetCurrent(target)` 拒绝会话变更、已移动或重新打开的标签页，以及期间发生的导航。焦点和指针激活独立于持久化的布局选择。
 
diff --git a/packages/client/ui-sidebar-right/src/client/index.ts b/packages/client/ui-sidebar-right/src/client/index.ts
index 851909f867..be7a831e9d 100644
--- a/packages/client/ui-sidebar-right/src/client/index.ts
+++ b/packages/client/ui-sidebar-right/src/client/index.ts
@@ -40,7 +40,7 @@ import type {} from './contract/slots.ts'
 import { GuideBody, type GuideInjected } from './tabs/guide/GuideBody.tsx'
 import { GuideTitle } from './tabs/guide/GuideTitle.tsx'
 import { ExpandButton } from './shell/ExpandButton.tsx'
-import { AUTO_FULLSCREEN_WIDTH, RightbarSeat, type SidebarRightInjected } from './shell/SidebarRight.tsx'
+import { RightbarSeat, type SidebarRightInjected } from './shell/SidebarRight.tsx'
 import { closeWithPaneFocus, openWithPaneFocus } from './shell/close-focus.ts'
 import { RightbarRoot, type RightbarRootInjected } from './shell/RightbarRoot.tsx'
 import { SidebarSessionViews } from './session-views.ts'
@@ -86,6 +86,9 @@ export type { SidebarRightOpenTab } from './tab-inventory.ts'
 /** This package's copy namespace. */
 const NS = 'sidebarRight'
 
+/** Frames below this width present the right sidebar as an overlay. */
+const AUTO_FULLSCREEN_WIDTH = 768
+
 /** Required browser services: the slot registry, the frame's panel actions, copy, and the resource model. */
 export const inject = ['contextMenus', 'slots', 'layout', 'locale', 'resources', 'sessions', 'uiSession', 'shortcuts']
 
@@ -124,14 +127,15 @@ export function apply(ctx: ClientContext): void {
     return () => { unsubscribe(); views.dispose() }
   }, 'ui-sidebar-right: retained Session views')
   const layout: ILayout = ctx.layout
-  // The automatic fullscreen rule as the seats last rendered it: the frame
-  // hands them its width as owner props, and every seat reports the same rule.
-  let autoFullscreen = false
+  const narrowViewport: HostObservable<boolean> = {
+    getSnapshot: () => layout.frameWidth.getSnapshot() < AUTO_FULLSCREEN_WIDTH,
+    subscribe: listener => layout.frameWidth.subscribe(listener),
+  }
   const { controller, adopt, forget, show, measure } = createSidebarRightController(
     tabs,
     (address, signal) => { ctx.resources.pin(address, signal) },
     {
-      autoFullscreen: () => autoFullscreen,
+      autoFullscreen: () => narrowViewport.getSnapshot(),
       openWithFocus: (sessionId, open) => { openWithPaneFocus(document, sessionId, open) },
       closeWithFocus: (sessionId, paneId, close) => { closeWithPaneFocus(document, sessionId, paneId, close) },
     },
@@ -223,7 +227,6 @@ export function apply(ctx: ClientContext): void {
         if (shown) layout.openRightbar(track, fullscreen)
         else layout.closeRightbar()
       },
-      reportAutoFullscreen: (value) => { autoFullscreen = value },
       splitPane: (paneId) => { controller.split(paneId) },
       toggleFullscreen: () => { const target = controller.commandTarget(); if (target !== undefined) controller.toggleFullscreen(target) },
       openTab: (kind, options) => { controller.openTab(kind, options) },
@@ -251,7 +254,8 @@ export function apply(ctx: ClientContext): void {
         inject: (sessionId): SidebarRightInjected => ({
           ...injected,
           hooks: {
-            contextMenuTarget: ctx.contextMenus.active, shortcuts: ctx.shortcuts.catalog, tabTypes, flash: controller.flashOf(sessionId),
+            contextMenuTarget: ctx.contextMenus.active, shortcuts: ctx.shortcuts.catalog, tabTypes,
+            flash: controller.flashOf(sessionId), narrowViewport,
           },
           measureRoom: (canSplitPane) => { measure(sessionId, canSplitPane) },
           closeTab: (tabId) => {
@@ -263,17 +267,8 @@ export function apply(ctx: ClientContext): void {
         }),
       }, RightbarSeat)
     })
-    // The expand button retains its width under narrow-screen overlays;
-    // wide-screen panels collapse the header's corner seat while shown.
-    const query = typeof matchMedia === 'function'
-      ? matchMedia(`(width < ${AUTO_FULLSCREEN_WIDTH}px)`) : undefined
-    const narrowViewport: HostObservable<boolean> = {
-      getSnapshot: () => query?.matches ?? false,
-      subscribe: (listener) => {
-        query?.addEventListener('change', listener)
-        return () => { query?.removeEventListener('change', listener) }
-      },
-    }
+    // Narrow frames retain the opener's width under the overlay. Wide frames
+    // collapse the corner seat even when the panel uses manual fullscreen.
     const disposeExpand = ctx.slots.inject('conversation.session.header.corner', () => ctx.slots.register({
       name: 'conversation.session.header.corner',
       locale: NS,
diff --git a/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx b/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx
index a0d17e4de2..56240173be 100644
--- a/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx
+++ b/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx
@@ -6,11 +6,10 @@
  * column so that a collapsed Sidebar costs the conversation nothing — no rail,
  * no width, and the transcript's scrollbar stays at the column's edge. The
  * corner seat is its own, past the utilities' edge, so the button never joins
- * the utilities row. On narrow viewports, the disabled button stays mounted
+ * the utilities row. On narrow frames, the disabled button stays mounted
  * and hidden while the panel is shown, preserving the title's width during
- * the overlay slide. Wide viewports collapse the seat while the panel is shown.
- * It shares the panel's per-session store, which the
- * slot runtime allows because both seats are session-scoped.
+ * the overlay slide. Wide frames collapse the seat while the panel is shown.
+ * It shares the panel's per-session store because both seats are session-scoped.
  *
  * The glyph is the left sidebar's collapse icon mirrored: the same affordance,
  * on the other edge.
@@ -35,7 +34,7 @@ export type ExpandButtonProps =
     narrowViewport: HostObservable<boolean>
   } }>
 
-/** The hidden expand control retains its header space only on narrow viewports. */
+/** Opens a collapsed panel; when expanded, hides and disables on narrow frames and renders nothing on wide frames. */
 export function ExpandButton({ sessionId, useStore, actions, t, useShortcuts, useNarrowViewport }: ExpandButtonProps): ReactNode {
   // A session with no surface yet is collapsed: the panel seat materializes the
   // surface on its own mount, and until then there is nothing expanded.
diff --git a/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx b/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx
index fdf7e2c515..8f781e9404 100644
--- a/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx
+++ b/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx
@@ -4,7 +4,7 @@
  * The frame owns the right column's geometry; this package owns one content
  * tree at the column width or spanning the viewport. A shown wide panel
  * retains its track in fullscreen, preserving the conversation width. Below
- * 768px fullscreen is derived from viewport width, without changing manual mode.
+ * 768px fullscreen is derived from frame width, without changing manual mode.
  *
  * Docked content stays mounted while collapsed, translated off the frame's right
  * edge, so opening and closing are one gesture in both presentations: a slide
@@ -54,9 +54,6 @@ import type { TabHookContext } from '../tab-info.ts'
 import { flashPane } from './flash.ts'
 import css from './SidebarRight.module.css'
 
-/** Viewports below this width present the right sidebar as an overlay. */
-export const AUTO_FULLSCREEN_WIDTH = 768
-
 /** The store share the seat receives. */
 type Store = PropsStore<ReturnType<typeof createSidebarRightStore>>
 
@@ -91,14 +88,6 @@ export interface SidebarRightInjected {
    * @param canSplitPane - whether two working halves of a docked pane would fit; unmeasured panes fit.
    */
   readonly measureRoom: (canSplitPane: (paneId: PaneId) => boolean) => void
-  /**
-   * Record whether the frame width this seat renders at presents an expanded panel fullscreen automatically.
-   *
-   * The fullscreen command reads the latest report: while it holds, the command
-   * closes the panel instead of switching its recorded mode.
-   * @param autoFullscreen - whether the frame is narrower than the automatic fullscreen width.
-   */
-  readonly reportAutoFullscreen: (autoFullscreen: boolean) => void
   /**
    * The navigation face's `openTab`, for the strip's add control: a new tab is
    * the guide opened by kind, through the same path as every other open.
@@ -114,6 +103,8 @@ export interface SidebarRightInjected {
     readonly contextMenuTarget: HostObservable<ContextMenuTarget | null>
     readonly shortcuts: HostObservable<readonly ShortcutCatalogEntry[]>
     readonly tabTypes: HostObservable<readonly SidebarRightTabDefinition[]>
+    /** Whether the measured frame requires an automatic fullscreen overlay. */
+    readonly narrowViewport: HostObservable<boolean>
     /** This Session's latest request to make the pane holding a revealed tab glow. */
     readonly flash: HostObservable<SidebarRightFlash | undefined>
   }
@@ -382,13 +373,12 @@ function SidebarPanel(panel: PanelProps & { width: number; panelRef: RefObject<H
  * The right column's occupant: stable tab containers, docked or floating.
  * It is also where the frame learns the panel's presentation, because this is
  * the seat that knows it. `ctx.sidebarRight` names the on-screen Session
- * itself; this seat reports only what it renders with: the room its kit
- * measured and the automatic fullscreen rule of its frame width.
+ * itself; this seat reports its presentation and the room its kit measured.
  */
 export function RightbarSeat({
-  sessionId, width, viewportWidth, canShow, useStore, actions, t, renderSlot, syncPresentation, measureRoom, reportAutoFullscreen,
+  sessionId, width, canShow, useStore, actions, t, renderSlot, syncPresentation, measureRoom,
   openTab, closeTab, useContextMenu, useContextMenuTarget, useTabTypes, useTabNavigation, occurrence, retainTab,
-  active, useShortcuts, splitPane, toggleFullscreen, useFlash,
+  active, useShortcuts, splitPane, toggleFullscreen, useFlash, useNarrowViewport,
 }: RightbarSeatProps): ReactNode {
   const { getTriggerProps } = useContextMenu()
   const getTabTriggerProps: PanelProps['getTabTriggerProps'] = (tab, paneId, handlers) =>
@@ -398,7 +388,7 @@ export function RightbarSeat({
   const shortcuts = useShortcuts(entries => entries)
   const surface = useStore(state => state.bySession[sessionId])
   const shown = active && surface !== undefined && surface.layout.expanded
-  const autoFullscreen = viewportWidth < AUTO_FULLSCREEN_WIDTH
+  const autoFullscreen = useNarrowViewport(value => value)
   const fullscreen = autoFullscreen || surface?.layout.mode === 'fullscreen'
   const panelRef = useRef<HTMLDivElement | null>(null)
   // A reading never re-renders anything: the service applies it when it splits.
@@ -415,9 +405,6 @@ export function RightbarSeat({
     if (shown && !fullscreen && !canShow) actions.setExpanded(sessionId, false)
   }, [actions, sessionId, shown, fullscreen, canShow])
 
-  // Read only when the fullscreen command runs, after this commit has settled.
-  useLayoutEffect(() => { reportAutoFullscreen(autoFullscreen) }, [reportAutoFullscreen, autoFullscreen])
-
   // The open/close slide needs no pulse of its own: the shell's window drag
   // watcher (ui-web) measures the marked rows every frame the surface moves and
   // sets the recall mark itself (electron#32341).
diff --git a/packages/client/ui-sidebar-right/tests/apply.client.spec.ts b/packages/client/ui-sidebar-right/tests/apply.client.spec.ts
index f2052caed5..334949fc10 100644
--- a/packages/client/ui-sidebar-right/tests/apply.client.spec.ts
+++ b/packages/client/ui-sidebar-right/tests/apply.client.spec.ts
@@ -72,6 +72,7 @@ async function boot(shortcuts: Partial<Shortcuts> = {}) {
   const layout = {
     openRightbar: vi.fn(), closeRightbar: vi.fn(),
     panelInfo: createSnapshotStore<{ activePanelId: string | null }>({ activePanelId: null }),
+    frameWidth: createSnapshotStore(1920),
   }
   const current = createSnapshotStore<{ key: SessionId | undefined }>({ key: undefined })
   const resources = { pin: vi.fn<(address: string, signal: AbortSignal) => void>() }
@@ -151,7 +152,7 @@ describe('ui-sidebar-right apply', () => {
       'sidebar.right.pane.tab', 'sidebar.right.pane.tab.title',
     ])
     expect(seat('sidebar.right.pane.tab').children).toMatchObject({ 'sidebar.right.tab.guide': { kind: 'chain', scope: 'session' } })
-    // Both seats read one store: the button only needs to know whether the panel is expanded.
+    // Both seats share the session's panel state.
     expect(seat('rightbar.session').store).toBeDefined()
     expect(seat('conversation.session.header.corner').store).toBe(seat('rightbar.session').store)
   })
@@ -169,44 +170,34 @@ describe('ui-sidebar-right apply', () => {
     expect(ctx.sidebarRight.mounted.getSnapshot()).toBeUndefined()
   })
 
-  it('shares a live narrow viewport source and releases its media listener', async () => {
+  it('shares measured frame width between the panel and opener and releases subscriptions', async () => {
     onTestFinished(() => { vi.unstubAllGlobals() })
-    const query = Object.assign(new EventTarget(), { matches: true })
-    const matchMedia = vi.fn(() => query)
+    const matchMedia = vi.fn(() => Object.assign(new EventTarget(), { matches: false }))
     vi.stubGlobal('matchMedia', matchMedia)
-    const { ctx, seat, injectedOf } = await boot()
+    const { ctx, layout, seat, injectedOf } = await boot()
     onTestFinished(async () => { await ctx.fiber.dispose() })
     const entry = seat('conversation.session.header.corner')
     const first = injectedOf(entry) as { hooks: { narrowViewport: HostObservable<boolean> } }
     const second = injectedOf(entry) as typeof first
+    const panel = injectedOf(seat('rightbar.session')) as SidebarRightInjected
     const viewport = first.hooks.narrowViewport
     expect(second.hooks.narrowViewport).toBe(viewport)
-    expect(matchMedia).toHaveBeenCalledWith('(width < 768px)')
-    expect(viewport.getSnapshot()).toBe(true)
-    const listener = vi.fn()
+    expect(panel.hooks.narrowViewport).toBe(viewport)
+    expect(viewport.getSnapshot()).toBe(false)
+    const listener = vi.fn(() => viewport.getSnapshot())
     const unsubscribe = viewport.subscribe(listener)
     try {
-      query.matches = false
-      query.dispatchEvent(new Event('change'))
+      layout.frameWidth.set(767)
+      expect(viewport.getSnapshot()).toBe(true)
+      expect(listener).toHaveLastReturnedWith(true)
+      layout.frameWidth.set(768)
       expect(viewport.getSnapshot()).toBe(false)
-      expect(listener).toHaveBeenCalledOnce()
+      expect(listener).toHaveLastReturnedWith(false)
+      expect(listener).toHaveBeenCalledTimes(2)
     } finally { unsubscribe() }
-    query.matches = true
-    query.dispatchEvent(new Event('change'))
-    expect(listener).toHaveBeenCalledOnce()
-  })
-
-  it('uses the wide header presentation without browser media APIs', async () => {
-    onTestFinished(() => { vi.unstubAllGlobals() })
-    vi.stubGlobal('matchMedia', undefined)
-    const { ctx, seat, injectedOf } = await boot()
-    onTestFinished(async () => { await ctx.fiber.dispose() })
-    const injected = injectedOf(seat('conversation.session.header.corner')) as { hooks: { narrowViewport: HostObservable<boolean> } }
-    const viewport = injected.hooks.narrowViewport
-    expect(viewport.getSnapshot()).toBe(false)
-    const listener = vi.fn()
-    viewport.subscribe(listener)()
-    expect(listener).not.toHaveBeenCalled()
+    layout.frameWidth.set(767)
+    expect(listener).toHaveBeenCalledTimes(2)
+    expect(matchMedia).not.toHaveBeenCalled()
   })
 
   it('hands the panel seat the frame report, the room rule, the opens, the observable registry, and the Tab domain', async () => {
@@ -254,11 +245,11 @@ describe('ui-sidebar-right apply', () => {
     injected.measureRoom(() => true)
     injected.splitPane(surface.layout.activePaneId)
     expect(panes()).toHaveLength(2)
-    // The fullscreen command follows the automatic fullscreen rule the seats report.
+    // Commands read the current frame width even before a seat renders it.
     const layoutOf = () => instance.getSnapshot().bySession[SESSION]?.layout
     injected.toggleFullscreen()
     expect(layoutOf()?.mode).toBe('fullscreen')
-    injected.reportAutoFullscreen(true)
+    layout.frameWidth.set(767)
     injected.toggleFullscreen()
     expect(layoutOf()?.expanded).toBe(false)
     expect(layoutOf()?.mode).toBe('push')
diff --git a/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx b/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx
index 2e4550ef7f..250f0856e8 100644
--- a/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx
+++ b/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx
@@ -4,7 +4,7 @@ import { contextMenuHook } from '@deepseek-ai/dsh-client-test-runtime'
  * Narrow overlays preserve the header control's identity; wide panels release
  * its header space while open.
  */
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it } from 'vitest'
 import { act, cleanup, fireEvent, render } from '@testing-library/react'
 import { useSyncExternalStore } from 'react'
 import { createSnapshotStore } from '@deepseek-ai/dsh-client-store'
@@ -17,6 +17,7 @@ import type { ExpandButtonProps } from '../src/client/shell/ExpandButton.tsx'
 import { createSidebarRightStore } from '../src/client/stores.ts'
 
 const SESSION = 's-test' as SessionId
+afterEach(cleanup)
 const unused = (): never => { throw new Error('This isolated component does not consume framework hooks') }
 const standard: GlobalStandardProps & SessionStandardProps = {
   sessionId: SESSION, useSession: unused, useProjection: unused, useConversation: unused,
@@ -66,7 +67,6 @@ describe('ExpandButton', () => {
     expect(Array.from(tooltip.querySelectorAll('kbd'), key => key.textContent)).toEqual(['Ctrl', 'B'])
     act(() => { instance.actions.setExpanded(SESSION, true) })
     expect(view.queryByRole('tooltip')).toBeNull()
-    cleanup()
   })
   it('offers the way in while the session has no surface yet, and asks the panel to expand', () => {
     const { instance, control } = mountButton()
@@ -78,7 +78,6 @@ describe('ExpandButton', () => {
     expect(control()).toBeNull()
     act(() => { instance.actions.setExpanded(SESSION, false) })
     expect(control()?.disabled).toBe(false)
-    cleanup()
   })
 
   it('retains the disabled control through a narrow overlay opening and closing', () => {
@@ -91,7 +90,6 @@ describe('ExpandButton', () => {
     act(() => { instance.actions.setExpanded(SESSION, false) })
     expect(control()).toBe(button)
     expect(button.disabled).toBe(false)
-    cleanup()
   })
 
   it('keeps an available control across viewport changes and releases its space only for an open wide panel', () => {
@@ -105,6 +103,17 @@ describe('ExpandButton', () => {
     expect(control()).toBeNull()
     act(() => { viewport.set(true) })
     expect(control()?.disabled).toBe(true)
-    cleanup()
+  })
+
+  it('releases header space for a manually fullscreen panel on a wide frame', () => {
+    const { instance, control } = mountButton()
+    act(() => {
+      instance.actions.setMode(SESSION, 'fullscreen')
+      instance.actions.setExpanded(SESSION, true)
+    })
+    expect(instance.getSnapshot().bySession[SESSION]?.layout.mode).toBe('fullscreen')
+    expect(control()).toBeNull()
+    act(() => { instance.actions.setExpanded(SESSION, false) })
+    expect(control()?.disabled).toBe(false)
   })
 })
diff --git a/packages/client/ui-sidebar-right/tests/seat.client.spec.tsx b/packages/client/ui-sidebar-right/tests/seat.client.spec.tsx
index c6ae78c2e8..4f83466d16 100644
--- a/packages/client/ui-sidebar-right/tests/seat.client.spec.tsx
+++ b/packages/client/ui-sidebar-right/tests/seat.client.spec.tsx
@@ -72,7 +72,8 @@ function transition(property = 'transform') {
 async function mountSeat(viewportWidth = 1440, canShow = true, entryCount = 0, opener = false, keepMounted = false) {
   const runtime = await SlotTestRuntime.create()
   runtimes.push(runtime)
-  const frame = { openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: runtime.panelInfo }
+  const frame = { openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: runtime.panelInfo,
+    frameWidth: createSnapshotStore(viewportWidth) }
   const pin = vi.fn<(address: string, signal: AbortSignal) => void>()
   runtime.ctx.provide('layout', frame as never)
   runtime.ctx.provide('resources', { pin } as never)
@@ -148,6 +149,12 @@ async function mountSeat(viewportWidth = 1440, canShow = true, entryCount = 0, o
     runtime.slots.register({ name: 'sidebar.right.pane.tab.title', key: 'test/text' }, Title)
   })
   const view = runtime.renderSlot('rightbar', { width: 420, viewportWidth, canShow })
+  const updateFrame = (props: Parameters<typeof view.update>[0]): void => {
+    act(() => {
+      frame.frameWidth.set(props.viewportWidth)
+      view.update(props)
+    })
+  }
   const registerPage = (kind: string, multiple = false): void => {
     runtime.ctx.sidebarRightTabs.register({ id: `test/${kind}`, kind, multiple, title: () => kind })
     runtime.slots.register({ name: 'sidebar.right.pane.tab', key: `test/${kind}` }, Body)
@@ -166,7 +173,7 @@ async function mountSeat(viewportWidth = 1440, canShow = true, entryCount = 0, o
   }
   return {
     runtime, feature, controller, instance, actions: instance.actions, layout,
-    open, selectSession, frame, pin, bodies, titles, hooks, view, arm, opened, registerPage, catalog,
+    open, selectSession, frame, pin, bodies, titles, hooks, view, updateFrame, arm, opened, registerPage, catalog,
     openerView: () => openerView!,
   }
 }
@@ -674,7 +681,7 @@ describe('RightbarSeat presentation', () => {
     expect(h.frame.openRightbar).toHaveBeenLastCalledWith(false, true)
     const stored = h.instance.getSnapshot()
     const body = element(h.view.container, '[data-tab-body]')
-    h.view.update({ width: 420, viewportWidth: 768, canShow: true })
+    h.updateFrame({ width: 420, viewportWidth: 768, canShow: true })
     expect(h.instance.getSnapshot()).toBe(stored)
     expect(element(h.view.container, '[data-tab-body]')).toBe(body)
     expect(h.frame.openRightbar).toHaveBeenLastCalledWith(true, false)
@@ -688,7 +695,7 @@ describe('RightbarSeat presentation', () => {
     expect(h.layout().expanded).toBe(false)
     expect(h.layout().mode).toBe('push')
     const stored = h.instance.getSnapshot()
-    h.view.update({ width: 420, viewportWidth: 1440, canShow: true })
+    h.updateFrame({ width: 420, viewportWidth: 1440, canShow: true })
     expect(h.instance.getSnapshot()).toBe(stored)
     expect(h.layout().tabs[tab.id]).toBeDefined()
     expect(signal.aborted).toBe(false)
@@ -699,12 +706,12 @@ describe('RightbarSeat presentation', () => {
     const h = await mountSeat()
     h.open()
     // Narrowed below the automatic fullscreen width, the command closes the panel.
-    h.view.update({ width: 420, viewportWidth: 700, canShow: false })
+    h.updateFrame({ width: 420, viewportWidth: 700, canShow: false })
     fireEvent.click(element(h.view.container, '[data-sidebar-right-mode]'))
     expect(h.layout().expanded).toBe(false)
     expect(h.layout().mode).toBe('push')
     // Widened again, the command switches the recorded mode.
-    h.view.update({ width: 420, viewportWidth: 1440, canShow: true })
+    h.updateFrame({ width: 420, viewportWidth: 1440, canShow: true })
     act(() => { h.controller.toggleExpanded() })
     fireEvent.click(element(h.view.container, '[data-sidebar-right-mode]'))
     expect(h.layout().expanded).toBe(true)
@@ -716,9 +723,9 @@ describe('RightbarSeat presentation', () => {
     h.open()
     fireEvent.click(element(h.view.container, '[data-sidebar-right-mode]'))
     const stored = h.instance.getSnapshot()
-    h.view.update({ width: 420, viewportWidth: 500, canShow: false })
+    h.updateFrame({ width: 420, viewportWidth: 500, canShow: false })
     expect(h.frame.openRightbar).toHaveBeenLastCalledWith(false, true)
-    h.view.update({ width: 420, viewportWidth: 1440, canShow: true })
+    h.updateFrame({ width: 420, viewportWidth: 1440, canShow: true })
     expect(h.frame.openRightbar).toHaveBeenLastCalledWith(true, true)
     expect(h.instance.getSnapshot()).toBe(stored)
   })
@@ -727,12 +734,12 @@ describe('RightbarSeat presentation', () => {
     const h = await mountSeat()
     const tab = h.open()
     const signal = h.bodies.get(tab.id)!.tab.signal
-    h.view.update({ width: 420, viewportWidth: 900, canShow: false })
+    h.updateFrame({ width: 420, viewportWidth: 900, canShow: false })
     expect(h.layout().expanded).toBe(false)
     expect(h.layout().tabs[tab.id]).toBeDefined()
     expect(signal.aborted).toBe(false)
     const stored = h.instance.getSnapshot()
-    h.view.update({ width: 420, viewportWidth: 1440, canShow: true })
+    h.updateFrame({ width: 420, viewportWidth: 1440, canShow: true })
     expect(h.instance.getSnapshot()).toBe(stored)
     expect(h.layout().expanded).toBe(false)
   })
@@ -823,7 +830,7 @@ describe('RightbarSeat fullscreen entry', () => {
     const slide = transition()
     vi.spyOn(element(h.view.container, '[data-sidebar-right-panel]'), 'getAnimations').mockReturnValue([slide.animation])
     h.open()
-    h.view.update({ width: 420, viewportWidth: 500, canShow: false })
+    h.updateFrame({ width: 420, viewportWidth: 500, canShow: false })
     expect(h.frame.openRightbar).not.toHaveBeenCalled()
     await act(async () => { slide.finish(); await slide.animation.finished })
     expect(h.frame.openRightbar).toHaveBeenCalledExactlyOnceWith(false, true)
diff --git a/packages/client/ui-sidebar/tests/panel-list.client.spec.tsx b/packages/client/ui-sidebar/tests/panel-list.client.spec.tsx
index 6d3045ca09..755bd31078 100644
--- a/packages/client/ui-sidebar/tests/panel-list.client.spec.tsx
+++ b/packages/client/ui-sidebar/tests/panel-list.client.spec.tsx
@@ -43,6 +43,7 @@ async function bench(collapsed = false, track?: TrackProductEvent) {
   locale.setLocale('en')
   const layout = {
     panelInfo: runtime.panelInfo,
+    frameWidth: createSnapshotStore(1920),
     beginNavigation: vi.fn(() => new AbortController().signal),
     toggleSidebar: vi.fn(),
     selectPanel: vi.fn((activePanelId: MainPanelId | null) => { runtime.panelInfo.set({ activePanelId }) }),
diff --git a/packages/client/ui-workspace/tests/workspaces-service.client.spec.ts b/packages/client/ui-workspace/tests/workspaces-service.client.spec.ts
index f4e5bdcac9..78a4196051 100644
--- a/packages/client/ui-workspace/tests/workspaces-service.client.spec.ts
+++ b/packages/client/ui-workspace/tests/workspaces-service.client.spec.ts
@@ -291,7 +291,7 @@ function bench(options: BenchOptions = {}) {
     selectPanel: vi.fn(), retainMainPanels: vi.fn(),
     setSidebar: vi.fn(), toggleSidebar: vi.fn(), setViewportWidth: vi.fn(),
     setRightbar: vi.fn(), openRightbar: vi.fn(), closeRightbar: vi.fn(),
-  }, () => true, createSnapshotStore({ activePanelId: null }))
+  }, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
   const selectPanel = vi.spyOn(layout, 'selectPanel')
   ctx.provide('layout', layout)
   ctx.effect(() => () => { layout.dispose() })

From b74851c0a68321d7b6e2cc859f7d54d221b86f9c Mon Sep 17 00:00:00 2001
From: EricMoin <mengguolai@gmail.com>
Date: Thu, 29 Oct 2026 19:05:44 +0800
Subject: [PATCH 3/4] test(ui): provide frame width in sidebar consumer
 fixtures

---
 .../tests/document-seat.client.spec.tsx                |  9 +++++++--
 .../liveshare/tests/viewer-share-path.client.spec.tsx  | 10 ++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/client/ui-sidebar-documentpreview/tests/document-seat.client.spec.tsx b/packages/client/ui-sidebar-documentpreview/tests/document-seat.client.spec.tsx
index 2053ab3659..5842132761 100644
--- a/packages/client/ui-sidebar-documentpreview/tests/document-seat.client.spec.tsx
+++ b/packages/client/ui-sidebar-documentpreview/tests/document-seat.client.spec.tsx
@@ -46,7 +46,12 @@ async function boot() {
     useContextMenu: contextMenuHook((target, point) => { rt.ctx.contextMenus.open(target, point) }),
   } })
   rt.ctx.provide('configForms', { developerTools: { enabled: createSnapshotStore(true) } } as never)
-  rt.ctx.provide('layout', { openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: rt.panelInfo } as never)
+  const layout = {
+    openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: rt.panelInfo,
+    frameWidth: createSnapshotStore(1440), selectPanel: vi.fn(), toggleSidebar: vi.fn(),
+    beginNavigation: vi.fn(() => new AbortController().signal),
+  } satisfies typeof rt.ctx.layout
+  rt.ctx.provide('layout', layout)
   rt.ctx.provide('shortcuts', { register: () => () => {}, catalog: { getSnapshot: () => SHORTCUT_CATALOG, subscribe: () => () => {} } } as never)
   const locale = new LocaleRuntime(rt.ctx)
   rt.ctx.provide('locale', locale)
@@ -72,7 +77,7 @@ async function boot() {
   }))
   await rt.mount({ inject: [...sidebarInject], apply: sidebarApply })
   await rt.mount({ inject: [...inject], apply })
-  const view = rt.renderSlot('rightbar', { width: 600, viewportWidth: 1440, canShow: true })
+  const view = rt.renderSlot('rightbar', { width: 600, viewportWidth: layout.frameWidth.getSnapshot(), canShow: true })
   const open = (name: string): void => {
     act(() => { rt.ctx.sidebarRight.openResource('dsh-resource://file/session/documents/' + name) })
   }
diff --git a/packages/experimental/liveshare/tests/viewer-share-path.client.spec.tsx b/packages/experimental/liveshare/tests/viewer-share-path.client.spec.tsx
index 8d1bb84f82..37c56c2e60 100644
--- a/packages/experimental/liveshare/tests/viewer-share-path.client.spec.tsx
+++ b/packages/experimental/liveshare/tests/viewer-share-path.client.spec.tsx
@@ -12,6 +12,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { act, waitFor } from '@testing-library/react'
 import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
 import { LocaleRuntime } from '@deepseek-ai/dsh-client-locale/client'
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-store'
 import { apply as menusApply, inject as menusInject } from '@deepseek-ai/dsh-client-ui-context-menu/client'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
 import { apply as resourcesApply, inject as resourcesInject } from '@deepseek-ai/dsh-client-resources/src/client/index.ts'
@@ -37,7 +38,12 @@ afterEach(async () => {
 async function boot() {
   const rt = await SlotTestRuntime.create()
   runtime = rt
-  rt.ctx.provide('layout', { openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: rt.panelInfo } as never)
+  const layout = {
+    openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: rt.panelInfo,
+    frameWidth: createSnapshotStore(1440), selectPanel: vi.fn(), toggleSidebar: vi.fn(),
+    beginNavigation: vi.fn(() => new AbortController().signal),
+  } satisfies typeof rt.ctx.layout
+  rt.ctx.provide('layout', layout)
   rt.ctx.provide('shortcuts', {
     register: () => () => {},
     catalog: { getSnapshot: () => SHORTCUT_CATALOG, subscribe: () => () => {} },
@@ -55,7 +61,7 @@ async function boot() {
   await rt.mount({ inject: [...menusInject], apply: menusApply })
   await rt.mount({ inject: [...sidebarInject], apply: sidebarApply })
   await rt.mount({ inject: [...inject], apply })
-  const view = rt.renderSlot('rightbar', { width: 600, viewportWidth: 1440, canShow: true })
+  const view = rt.renderSlot('rightbar', { width: 600, viewportWidth: layout.frameWidth.getSnapshot(), canShow: true })
   return { rt, view }
 }
 

From 820336fa4dfcdcb5afee1462ad1365d793f3f095 Mon Sep 17 00:00:00 2001
From: EricMoin <mengguolai@gmail.com>
Date: Thu, 29 Oct 2026 19:19:56 +0800
Subject: [PATCH 4/4] fix(ui): reuse mobile device detection for sidebar opener

---
 apps/web/tests/sidebar-right.e2e.ts           | 68 ++++++++-----------
 .../layout-frame-width/guide.i18n.yaml        | 16 -----
 .../layout-frame-width/guide.md               | 20 ------
 .../layout-frame-width/guide.zh.md            | 20 ------
 packages/client/ui-layout/README.i18n.yaml    |  4 +-
 packages/client/ui-layout/README.md           |  2 +-
 packages/client/ui-layout/README.zh.md        |  2 +-
 packages/client/ui-layout/src/client/index.ts |  6 +-
 .../client/ui-layout/src/client/service.ts    |  4 --
 .../ui-layout/tests/apply.client.spec.ts      | 14 +---
 .../ui-layout/tests/service.client.spec.ts    | 16 ++---
 .../tests/browser-plugin.client.spec.ts       |  3 -
 .../tests/document-seat.client.spec.tsx       |  9 +--
 .../client/ui-sidebar-right/README.i18n.yaml  | 12 ++--
 packages/client/ui-sidebar-right/README.md    |  6 +-
 packages/client/ui-sidebar-right/README.zh.md |  6 +-
 .../ui-sidebar-right/src/client/index.ts      | 25 +++----
 .../src/client/shell/ExpandButton.tsx         | 18 ++---
 .../src/client/shell/SidebarRight.tsx         | 26 ++++---
 .../tests/apply.client.spec.ts                | 38 +----------
 .../tests/expand-button.client.spec.tsx       | 40 +++++------
 .../tests/seat.client.spec.tsx                | 29 +++-----
 .../tests/panel-list.client.spec.tsx          |  1 -
 .../tests/workspaces-service.client.spec.ts   |  2 +-
 .../tests/viewer-share-path.client.spec.tsx   | 10 +--
 25 files changed, 125 insertions(+), 272 deletions(-)
 delete mode 100644 docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.i18n.yaml
 delete mode 100644 docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md
 delete mode 100644 docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.zh.md

diff --git a/apps/web/tests/sidebar-right.e2e.ts b/apps/web/tests/sidebar-right.e2e.ts
index 427fe32349..461947ed21 100644
--- a/apps/web/tests/sidebar-right.e2e.ts
+++ b/apps/web/tests/sidebar-right.e2e.ts
@@ -643,49 +643,40 @@ describe('web e2e: shipped right Sidebar', () => {
       expect(tripwire.warnings).toEqual([])
     })
 
-    it.each([
-      { viewportWidth: 390, frameWidth: 390 },
-      { viewportWidth: 767, frameWidth: 767 },
-      { viewportWidth: 1024, frameWidth: 767 },
-    ])('keeps the mobile conversation title still in a $frameWidth px frame inside a $viewportWidth px viewport', async ({ viewportWidth, frameWidth }) => {
-      const caseName = `mobile-title-${frameWidth}-viewport-${viewportWidth}`
-      onTestFailed(() => saveFailureShot(page, `web-e2e-sidebar-right-${caseName}`))
-      const viewport = page.viewportSize()
-      if (viewport === null) throw new Error('expected a fixed viewport')
-      const column = await resetSidebar(page)
-      const frame = page.locator('[class*="frame"]').first()
-      const frameStyle = await frame.evaluate(node => ({
-        width: node.style.width,
-        priority: node.style.getPropertyPriority('width'),
-      }))
-      const panel = column.locator('[data-sidebar-right-panel]')
-      const title = page.locator('[class*="titleCluster"]').first()
-      const utilities = page.locator('[class*="headerUtilities"]').first()
+    it.each([390, 767])('keeps the mobile conversation title still while the right sidebar slides at %ipx', async (viewportWidth) => {
+      const caseName = `mobile-title-${viewportWidth}`
+      const mobilePage = await browser.newPage({
+        viewport: { width: viewportWidth, height: 844 },
+        locale: 'en-US', timezoneId: 'Asia/Shanghai',
+        userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_6 like Mac OS X) AppleWebKit/605.1.15 Version/18.6 Mobile/15E148 Safari/604.1',
+        isMobile: true, hasTouch: true, reducedMotion: 'no-preference',
+        storageState: await page.context().storageState(),
+      })
+      const mobileTripwire = watchConsole(mobilePage)
       try {
-        await page.emulateMedia({ reducedMotion: 'no-preference' })
-        await page.setViewportSize({ width: viewportWidth, height: viewport.height })
-        if (frameWidth !== viewportWidth) {
-          await frame.evaluate((node, width) => { node.style.width = `${width}px` }, frameWidth)
-        }
-        await expect.poll(async () => (await frame.boundingBox())?.width).toBe(frameWidth)
+        await mobilePage.goto(page.url(), { waitUntil: 'load' })
+        const column = await resetSidebar(mobilePage)
+        const panel = column.locator('[data-sidebar-right-panel]')
+        const title = mobilePage.locator('[class*="titleCluster"]').first()
+        const utilities = mobilePage.locator('[class*="headerUtilities"]').first()
         await expect.poll(() => panel.getAttribute('data-sidebar-right-panel')).toBe('fullscreen')
-        await column.locator('[data-sidebar-right-toggle]').click()
+        await column.locator('[data-sidebar-right-toggle]').tap()
         await panel.evaluate(async (node) => {
           await Promise.allSettled(node.getAnimations({ subtree: true }).map(animation => animation.finished))
         })
-        await expandOf(page).waitFor()
+        await expandOf(mobilePage).waitFor()
         const titleNode = await title.locator('[class*="crumbCurrent"]').elementHandle()
         if (titleNode === null) throw new Error('conversation title is not rendered')
         const titleBefore = await title.boundingBox()
         const utilitiesBefore = await utilities.boundingBox()
         expect(titleBefore?.width).toBeGreaterThan(0)
         expect(utilitiesBefore?.width).toBeGreaterThan(0)
-        await shot(page, `${caseName}-collapsed`)
+        await shot(mobilePage, `${caseName}-collapsed`)
         try {
           for (const opening of [true, false]) {
             const held = await holdPanelSlide(panel)
             try {
-              await (opening ? expandOf(page) : column.locator('[data-sidebar-right-toggle]')).click()
+              await (opening ? expandOf(mobilePage) : column.locator('[data-sidebar-right-toggle]')).tap()
               await expect.poll(() => held.evaluate(state => state.animation?.playState)).toBe('paused')
               const progress = await held.evaluate(state => state.animation?.effect?.getComputedTiming().progress)
               expect(progress).toBeGreaterThan(0)
@@ -693,9 +684,9 @@ describe('web e2e: shipped right Sidebar', () => {
               expect(await title.boundingBox()).toEqual(titleBefore)
               expect(await utilities.boundingBox()).toEqual(utilitiesBefore)
               expect(await titleNode.evaluate(node => node.isConnected)).toBe(true)
-              expect(await expandOf(page).isDisabled()).toBe(opening)
-              expect(await page.getByRole('button', { name: 'Open right sidebar', exact: true }).count()).toBe(opening ? 0 : 1)
-              await shot(page, `${caseName}-${opening ? 'opening' : 'closing'}`)
+              expect(await expandOf(mobilePage).isDisabled()).toBe(opening)
+              expect(await mobilePage.getByRole('button', { name: 'Open right sidebar', exact: true }).count()).toBe(opening ? 0 : 1)
+              await shot(mobilePage, `${caseName}-${opening ? 'opening' : 'closing'}`)
               await held.evaluate((state) => { (state.animation as Animation).finish() })
               expect(await title.boundingBox()).toEqual(titleBefore)
               expect(await utilities.boundingBox()).toEqual(utilitiesBefore)
@@ -710,16 +701,14 @@ describe('web e2e: shipped right Sidebar', () => {
         } finally {
           await titleNode.dispose()
         }
+        expect(mobileTripwire.pageErrors).toEqual([])
+        expect(mobileTripwire.warnings).toEqual([])
+      } catch (error) {
+        await saveFailureShot(mobilePage, `web-e2e-sidebar-right-${caseName}`)
+        throw error
       } finally {
-        await frame.evaluate((node, original) => {
-          if (original.width) node.style.setProperty('width', original.width, original.priority)
-          else node.style.removeProperty('width')
-        }, frameStyle)
-        await page.setViewportSize(viewport)
-        await page.emulateMedia({ reducedMotion: null })
+        await mobilePage.close()
       }
-      expect(tripwire.pageErrors).toEqual([])
-      expect(tripwire.warnings).toEqual([])
     })
 
     it('keeps a capacity-closed panel closed after widening and uses fullscreen on a narrow viewport', async () => {
@@ -746,6 +735,7 @@ describe('web e2e: shipped right Sidebar', () => {
         await expect.poll(async () => await panel.getAttribute('data-sidebar-right-panel')).toBe('fullscreen')
         await expect.poll(async () => await width(panel)).toBe(767)
         await expect.poll(() => frame.getAttribute('data-rightbar-fullscreen')).toBe('true')
+        expect(await expandOf(page).count()).toBe(0)
         expect(await frame.locator('[data-side="rightbar"]').count()).toBe(0)
         await column.locator('[data-sidebar-right-mode="push"]').click()
         await expect.poll(async () => await column.locator('[data-sidebar-right-open]').count()).toBe(0)
diff --git a/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.i18n.yaml b/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.i18n.yaml
deleted file mode 100644
index b562210419..0000000000
--- a/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.i18n.yaml
+++ /dev/null
@@ -1,16 +0,0 @@
-# Bilingual-pair consistency record for guide.md (docs/i18n/README.md): per heading
-# section, a hash of its English and Chinese blocks outside code blocks and generated regions.
-# After editing either side, bring the other along and re-record with:
-#   pnpm run verify-translation-pairing --write docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md
-/:
-  en: 3ca4fac76e0b00cd
-  zh: 7c3c716f6852d5c8
-/layout-implementations-provide-frame-width:
-  en: a813362996ec6123
-  zh: f3ce03a6d9189929
-/layout-implementations-provide-frame-width/change:
-  en: 3b416af7455739ba
-  zh: 33d763140ff660f2
-/layout-implementations-provide-frame-width/migration:
-  en: 58ee0cbb2bf6e355
-  zh: ded59e8163d189aa
diff --git a/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md b/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md
deleted file mode 100644
index 0dccfef727..0000000000
--- a/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-kind: upgrade-guide
-description: "Custom layout implementations and LayoutController callers must provide the frame-width observable."
----
-
-# Layout implementations provide frame width
-
-English | [中文](guide.zh.md)
-
-## Change
-
-`ILayout` from `@deepseek-ai/dsh-client-ui-layout/client` requires `frameWidth: HostObservable<number>`. `LayoutController` requires this source as its fourth constructor argument, after `panelInfo`. Custom implementations and direct constructor callers must supply it; plugins that only consume the shipped `ctx.layout` need no changes.
-
-The source reports the frame's measured width in CSS pixels and notifies subscribers when it changes. Before the first measurement, it reports the initial window width. The right sidebar uses this source for both its automatic fullscreen presentation and its header button's retained space.
-
-## Migration
-
-1. Add `frameWidth` to each custom `ILayout` implementation and test fake. Read from the same layout storage that supplies the frame's geometry; delegate subscriptions to that storage and return its unsubscribe function.
-2. Pass that source as the fourth argument to each `new LayoutController(...)` call. Do not replace it with an independent window-width observer.
-3. Run your TypeScript checks, then resize the frame across 768 CSS pixels with the right sidebar open. Confirm that the sidebar presentation and header button change together, including when frame and window widths differ.
diff --git a/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.zh.md b/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.zh.md
deleted file mode 100644
index d06069e8db..0000000000
--- a/docs/upgrade-guide/v0.2.2-alpha.2/layout-frame-width/guide.zh.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-kind: upgrade-guide
-description: "自定义布局实现与 LayoutController 调用方必须提供框架宽度的 observable。"
----
-
-# 布局实现需提供框架宽度
-
-[English](guide.md) | 中文
-
-## 变更
-
-`@deepseek-ai/dsh-client-ui-layout/client` 中的 `ILayout` 要求提供 `frameWidth: HostObservable<number>`。`LayoutController` 要求将此数据源作为第四个构造参数，放在 `panelInfo` 之后。自定义实现与直接调用构造函数的代码必须提供它；仅使用内置 `ctx.layout` 的插件无需修改。
-
-此数据源报告框架的实测宽度，单位为 CSS 像素，并在宽度变化时通知订阅方。首次测量前，它报告初始窗口宽度。右侧栏的自动全屏呈现与标题栏按钮的占位共用此数据源。
-
-## 迁移
-
-1. 为每个自定义 `ILayout` 实现与测试替身添加 `frameWidth`。从提供框架几何数据的同一布局存储读取宽度，将订阅委托给该存储，并返回其取消订阅函数。
-2. 将此数据源作为第四个参数传入每个 `new LayoutController(...)` 调用。不要使用独立的窗口宽度观察器代替它。
-3. 运行 TypeScript 检查，再保持右侧栏打开，将框架宽度调整至 768 CSS 像素的两侧。确认侧栏呈现与标题栏按钮同步变化，包括框架与窗口宽度不同的情况。
diff --git a/packages/client/ui-layout/README.i18n.yaml b/packages/client/ui-layout/README.i18n.yaml
index 4f99055cb3..a89c7c4b40 100644
--- a/packages/client/ui-layout/README.i18n.yaml
+++ b/packages/client/ui-layout/README.i18n.yaml
@@ -24,8 +24,8 @@
   en: 5ac34303ad90b484
   zh: abcc4a1dcf28391e
 /deepseek-ai-dsh-client-ui-layout/understand-the-implementation:
-  en: d0e96d56889da0f3
-  zh: 711c8c5125f809c8
+  en: e3cb25f05902369a
+  zh: c1a8f049a7a4effb
 /deepseek-ai-dsh-client-ui-layout/further-exploration:
   en: 74de780b4592e28e
   zh: a413f06f8ec406d0
diff --git a/packages/client/ui-layout/README.md b/packages/client/ui-layout/README.md
index cb27430e44..8a20476270 100644
--- a/packages/client/ui-layout/README.md
+++ b/packages/client/ui-layout/README.md
@@ -62,7 +62,7 @@ The root registration supplies folded-landscape posture through an injected obse
 
 `selectPanel(id)` checks the live `main` registry before changing selection; an absent key throws and leaves the current panel intact. `beginNavigation()` returns an abort signal for an asynchronous UI navigation. A later call, a valid panel selection (including repeated selection), or layout disposal aborts that signal without cancelling underlying Session creation. Consumers check the signal before committing navigation or moving drafts.
 
-One registration declares the frame slots and binds `ctx.layout` methods `selectPanel`, `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. One root store separates `panelInfo` selection from `layoutInfo` measurements, width preferences, and presentation reports. `ctx.layout.panelInfo` and the standard `usePanelInfo` hook share the same selection source; AppFrame subscribes to the stable layout object. `ctx.layout.frameWidth` publishes the same root store's frame width in CSS pixels, initially the window width until the frame's first measurement; geometry consumers share its updates with the `rightbar` owner props. The `rightbar` owner supplies actual `width`, `viewportWidth`, and normal-presentation eligibility `canShow`; insufficient room causes a deterministic close, never automatic reopening on widening. Fullscreen hides the width handle without releasing a track the occupant retains. AppFrame keeps the column containers mounted. The right column's root controller renders `rightbar.session` through `SessionProvider` only while the Conversation is selected; its unmount report releases the track. The independent title component uses the selected Session title only while the Conversation is visible, with the build-configured product title or localized `common.brand.localBuild` as its fallback; locale revisions update that fallback. The theme presenter is a second effect: pure DOM writes from resolved snapshots — initial state through the getter once, then event-driven only, with no React path. It applies palette, font-size, font-list, and token variables before measuring the rendered background as the single color authority. Fullscreen presentation suppresses grid and handle transitions; its occupant reports the new columns only after covering the frame. Fullscreen exit keeps transitions suppressed while the frame installs its destination geometry: close removes the right track, and restore retains it. Subsequent normal geometry actions restore ordinary transitions.
+One registration declares the frame slots and binds `ctx.layout` methods `selectPanel`, `toggleSidebar`, `openRightbar(track, fullscreen)`, and `closeRightbar`. One root store separates `panelInfo` selection from `layoutInfo` measurements, width preferences, and presentation reports. `ctx.layout.panelInfo` and the standard `usePanelInfo` hook share the same selection source; AppFrame subscribes to the stable layout object. The `rightbar` owner supplies actual `width`, `viewportWidth`, and normal-presentation eligibility `canShow`; insufficient room causes a deterministic close, never automatic reopening on widening. Fullscreen hides the width handle without releasing a track the occupant retains. AppFrame keeps the column containers mounted. The right column's root controller renders `rightbar.session` through `SessionProvider` only while the Conversation is selected; its unmount report releases the track. The independent title component uses the selected Session title only while the Conversation is visible, with the build-configured product title or localized `common.brand.localBuild` as its fallback; locale revisions update that fallback. The theme presenter is a second effect: pure DOM writes from resolved snapshots — initial state through the getter once, then event-driven only, with no React path. It applies palette, font-size, font-list, and token variables before measuring the rendered background as the single color authority. Fullscreen presentation suppresses grid and handle transitions; its occupant reports the new columns only after covering the frame. Fullscreen exit keeps transitions suppressed while the frame installs its destination geometry: close removes the right track, and restore retains it. Subsequent normal geometry actions restore ordinary transitions.
 
 </details>
 
diff --git a/packages/client/ui-layout/README.zh.md b/packages/client/ui-layout/README.zh.md
index f029902c37..e19b7a0bd2 100644
--- a/packages/client/ui-layout/README.zh.md
+++ b/packages/client/ui-layout/README.zh.md
@@ -62,7 +62,7 @@ root 注册通过注入的可观察源提供横屏折叠状态，由渲染器负
 
 `selectPanel(id)` 在改变选中态前检查实时 `main` 注册表；缺失的 key 会抛错并保留当前面板。`beginNavigation()` 为异步 UI 导航返回 abort signal。后续调用、有效面板选择（包括重复选择）或布局释放会中止该 signal，但不取消底层会话创建。消费方在提交导航或搬移草稿前检查 signal。
 
-一次注册声明框架的子 slot，并绑定 `ctx.layout` 的 `selectPanel`、`toggleSidebar`、`openRightbar(track, fullscreen)` 与 `closeRightbar`。同一个 root 存储把 `panelInfo` 选中态与 `layoutInfo` 测量、宽度偏好、呈现报告分开。`ctx.layout.panelInfo` 与标准 `usePanelInfo` hook 共用同一个选中态来源；AppFrame 订阅引用稳定的布局对象。`ctx.layout.frameWidth` 发布同一个 root 存储中的框架宽度，单位为 CSS 像素；首次测量框架前以窗口宽度初始化，几何数据消费方与 `rightbar` owner props 共用其更新。`rightbar` owner 提供实际 `width`、`viewportWidth`，以及表示能否以普通模式呈现的 `canShow`；占用方在空间不足时执行确定性的收起，变宽不自行重新展开。全屏隐藏宽度手柄，但不自行释放占用方要求保留的轨道。AppFrame 保持各列容器挂载。右栏的 root 控制器仅在选中会话界面时，经 `SessionProvider` 渲染 `rightbar.session`；内容卸载时的报告释放轨道。独立的标题组件仅在会话界面可见时使用所选会话标题，以构建配置的产品标题或本地化 `common.brand.localBuild` 为回退值；语言变化会更新该回退值。主题呈现器是第二个 effect：从解析后的快照做纯 DOM 写入——初始状态经 getter 读取一次，此后仅事件驱动，不经过 React。它先应用调色板、字号、字体列表与 token 变量，再把渲染出的背景测量为唯一的颜色依据。全屏呈现禁用网格和手柄过渡；占用方完全覆盖框架后才报告新的列布局。退出全屏时，框架先保持无过渡并安装目标布局：关闭移除右轨道，恢复保留右轨道。后续普通几何操作恢复正常过渡。
+一次注册声明框架的子 slot，并绑定 `ctx.layout` 的 `selectPanel`、`toggleSidebar`、`openRightbar(track, fullscreen)` 与 `closeRightbar`。同一个 root 存储把 `panelInfo` 选中态与 `layoutInfo` 测量、宽度偏好、呈现报告分开。`ctx.layout.panelInfo` 与标准 `usePanelInfo` hook 共用同一个选中态来源；AppFrame 订阅引用稳定的布局对象。`rightbar` owner 提供实际 `width`、`viewportWidth`，以及表示能否以普通模式呈现的 `canShow`；占用方在空间不足时执行确定性的收起，变宽不自行重新展开。全屏隐藏宽度手柄，但不自行释放占用方要求保留的轨道。AppFrame 保持各列容器挂载。右栏的 root 控制器仅在选中会话界面时，经 `SessionProvider` 渲染 `rightbar.session`；内容卸载时的报告释放轨道。独立的标题组件仅在会话界面可见时使用所选会话标题，以构建配置的产品标题或本地化 `common.brand.localBuild` 为回退值；语言变化会更新该回退值。主题呈现器是第二个 effect：从解析后的快照做纯 DOM 写入——初始状态经 getter 读取一次，此后仅事件驱动，不经过 React。它先应用调色板、字号、字体列表与 token 变量，再把渲染出的背景测量为唯一的颜色依据。全屏呈现禁用网格和手柄过渡；占用方完全覆盖框架后才报告新的列布局。退出全屏时，框架先保持无过渡并安装目标布局：关闭移除右轨道，恢复保留右轨道。后续普通几何操作恢复正常过渡。
 
 </details>
 
diff --git a/packages/client/ui-layout/src/client/index.ts b/packages/client/ui-layout/src/client/index.ts
index 3e1e5b77db..aec243039c 100644
--- a/packages/client/ui-layout/src/client/index.ts
+++ b/packages/client/ui-layout/src/client/index.ts
@@ -185,12 +185,8 @@ export function apply(ctx: ClientContext): void {
       getSnapshot: () => instance.getSnapshot().panelInfo,
       subscribe: listener => instance.subscribe(listener),
     }
-    const frameWidth: HostObservable<number> = {
-      getSnapshot: () => instance.getSnapshot().layoutInfo.viewportWidth,
-      subscribe: listener => instance.subscribe(listener),
-    }
     const layout = new LayoutController(instance.actions, id =>
-      ctx.slots.entries('main').some(entry => entry.options.key === id), panelInfo, frameWidth)
+      ctx.slots.entries('main').some(entry => entry.options.key === id), panelInfo)
     const disposePanelInfo = ctx.slots.provideRoot({ hooks: { panelInfo: layout.panelInfo } })
     const disposeService = ctx.reflect.provide('layout', layout)
     const disposeRegistration = ctx.slots.register({
diff --git a/packages/client/ui-layout/src/client/service.ts b/packages/client/ui-layout/src/client/service.ts
index d35ab3aae5..22dd77a4e6 100644
--- a/packages/client/ui-layout/src/client/service.ts
+++ b/packages/client/ui-layout/src/client/service.ts
@@ -28,8 +28,6 @@ export type PanelActions = BoundActions<ReturnType<typeof createLayoutStore>>
 export interface ILayout {
   /** Selected central panel from the same root store used by `usePanelInfo`. */
   readonly panelInfo: HostObservable<PanelInfo>
-  /** Frame width in px; window width initializes it until the frame is measured. */
-  readonly frameWidth: HostObservable<number>
   /**
    * Select a global central panel without changing the current Session.
    * @param panelId - registered main key, or null to show the Conversation.
@@ -63,13 +61,11 @@ export class LayoutController implements ILayout {
    * @param panels - actions of the instance shared with the root entry.
    * @param hasMainPanel - checks the live main-slot registry for a panel id.
    * @param panelInfo - root store's shared central-panel selection source.
-   * @param frameWidth - root store's measured frame width source.
    */
   constructor(
     private readonly panels: PanelActions,
     private readonly hasMainPanel: (id: MainPanelId) => boolean,
     readonly panelInfo: HostObservable<PanelInfo>,
-    readonly frameWidth: HostObservable<number>,
   ) {}
 
   /** Select a global panel or return to the Conversation. */
diff --git a/packages/client/ui-layout/tests/apply.client.spec.ts b/packages/client/ui-layout/tests/apply.client.spec.ts
index bd8553d39c..7ab8585886 100644
--- a/packages/client/ui-layout/tests/apply.client.spec.ts
+++ b/packages/client/ui-layout/tests/apply.client.spec.ts
@@ -117,7 +117,7 @@ describe('ui-layout client apply', () => {
     expect(width()).toBe(280)
   })
 
-  it('shares a pre-created instance between service actions, root rendering, and layout sources', async () => {
+  it('shares a pre-created instance between service actions, root rendering, and panelInfo', async () => {
     const { ctx, slots, rendererHost } = await bench()
     const fiber = ctx.plugin({ inject: [...inject], apply })
     await fiber.await()
@@ -135,18 +135,6 @@ describe('ui-layout client apply', () => {
     const panelInfo = host.root.getSnapshot().hooks.panelInfo!
     expect(panelInfo).toBe(layout.panelInfo)
     expect(panelInfo.getSnapshot()).toBe(instance.getSnapshot().panelInfo)
-    expect(layout.frameWidth.getSnapshot()).toBe(1920)
-    const measure = vi.fn(() => layout.frameWidth.getSnapshot())
-    const unsubscribe = layout.frameWidth.subscribe(measure)
-    try {
-      instance.actions.setViewportWidth(767)
-      expect(layout.frameWidth.getSnapshot()).toBe(767)
-      expect(measure).toHaveReturnedWith(767)
-      expect(window.innerWidth).toBe(1920)
-    } finally { unsubscribe() }
-    instance.actions.setViewportWidth(1920)
-    expect(layout.frameWidth.getSnapshot()).toBe(1920)
-    expect(measure).toHaveBeenCalledOnce()
     const panelId = 'panel-a' as MainPanelId
     const disposePanel = slots.register({ name: 'main', key: panelId }, () => null)
     layout.selectPanel(panelId)
diff --git a/packages/client/ui-layout/tests/service.client.spec.ts b/packages/client/ui-layout/tests/service.client.spec.ts
index 8e3f96d1e6..b3e3680d5c 100644
--- a/packages/client/ui-layout/tests/service.client.spec.ts
+++ b/packages/client/ui-layout/tests/service.client.spec.ts
@@ -19,7 +19,7 @@ function fakePanels(): PanelActions {
 describe('LayoutController', () => {
   it('forwards right column transitions to the constructor-supplied actions', () => {
     const panels = fakePanels()
-    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
+    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }))
 
     service.openRightbar(true, false)
     service.openRightbar(true, true)
@@ -36,7 +36,7 @@ describe('LayoutController', () => {
 
   it('can toggle the sidebar immediately after construction', () => {
     const panels = fakePanels()
-    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
+    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }))
 
     service.toggleSidebar()
 
@@ -46,7 +46,7 @@ describe('LayoutController', () => {
 
   it('forwards panel selection and returning to the Conversation without changing geometry', () => {
     const panels = fakePanels()
-    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
+    const service = new LayoutController(panels, () => true, createSnapshotStore({ activePanelId: null }))
     const panelId = 'panel-a' as MainPanelId
     service.selectPanel(panelId)
     service.selectPanel(panelId)
@@ -62,8 +62,8 @@ describe('LayoutController', () => {
   it('keeps separately constructed controllers bound to their own instances', () => {
     const first = fakePanels()
     const second = fakePanels()
-    const firstService = new LayoutController(first, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
-    const secondService = new LayoutController(second, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
+    const firstService = new LayoutController(first, () => true, createSnapshotStore({ activePanelId: null }))
+    const secondService = new LayoutController(second, () => true, createSnapshotStore({ activePanelId: null }))
     firstService.toggleSidebar()
     expect(first.toggleSidebar).toHaveBeenCalledTimes(1)
     expect(second.toggleSidebar).not.toHaveBeenCalled()
@@ -75,9 +75,7 @@ describe('LayoutController', () => {
   it('rejects an absent main entry without changing selection or cancelling pending navigation', () => {
     const panels = fakePanels()
     const present = new Set(['panel-a'])
-    const service = new LayoutController(
-      panels, id => present.has(id), createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920),
-    )
+    const service = new LayoutController(panels, id => present.has(id), createSnapshotStore({ activePanelId: null }))
     service.selectPanel('panel-a' as MainPanelId)
     const navigation = service.beginNavigation()
     present.delete('panel-a')
@@ -89,7 +87,7 @@ describe('LayoutController', () => {
   })
 
   it('supersedes asynchronous navigation on another request, any valid selection, and disposal', () => {
-    const service = new LayoutController(fakePanels(), () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
+    const service = new LayoutController(fakePanels(), () => true, createSnapshotStore({ activePanelId: null }))
     const first = service.beginNavigation()
     const second = service.beginNavigation()
     expect(first.aborted).toBe(true)
diff --git a/packages/client/ui-open-in-app/tests/browser-plugin.client.spec.ts b/packages/client/ui-open-in-app/tests/browser-plugin.client.spec.ts
index c5eff3af50..e0457da73f 100644
--- a/packages/client/ui-open-in-app/tests/browser-plugin.client.spec.ts
+++ b/packages/client/ui-open-in-app/tests/browser-plugin.client.spec.ts
@@ -80,9 +80,6 @@ async function bench() {
   const layout = new LayoutController(layoutStore.actions, id => id === 'plugins', {
     getSnapshot: () => layoutStore.getSnapshot().panelInfo,
     subscribe: listener => layoutStore.subscribe(listener),
-  }, {
-    getSnapshot: () => layoutStore.getSnapshot().layoutInfo.viewportWidth,
-    subscribe: listener => layoutStore.subscribe(listener),
   })
   const notify = vi.fn()
   const menus = new MenuRegistry(notify)
diff --git a/packages/client/ui-sidebar-documentpreview/tests/document-seat.client.spec.tsx b/packages/client/ui-sidebar-documentpreview/tests/document-seat.client.spec.tsx
index 5842132761..2053ab3659 100644
--- a/packages/client/ui-sidebar-documentpreview/tests/document-seat.client.spec.tsx
+++ b/packages/client/ui-sidebar-documentpreview/tests/document-seat.client.spec.tsx
@@ -46,12 +46,7 @@ async function boot() {
     useContextMenu: contextMenuHook((target, point) => { rt.ctx.contextMenus.open(target, point) }),
   } })
   rt.ctx.provide('configForms', { developerTools: { enabled: createSnapshotStore(true) } } as never)
-  const layout = {
-    openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: rt.panelInfo,
-    frameWidth: createSnapshotStore(1440), selectPanel: vi.fn(), toggleSidebar: vi.fn(),
-    beginNavigation: vi.fn(() => new AbortController().signal),
-  } satisfies typeof rt.ctx.layout
-  rt.ctx.provide('layout', layout)
+  rt.ctx.provide('layout', { openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: rt.panelInfo } as never)
   rt.ctx.provide('shortcuts', { register: () => () => {}, catalog: { getSnapshot: () => SHORTCUT_CATALOG, subscribe: () => () => {} } } as never)
   const locale = new LocaleRuntime(rt.ctx)
   rt.ctx.provide('locale', locale)
@@ -77,7 +72,7 @@ async function boot() {
   }))
   await rt.mount({ inject: [...sidebarInject], apply: sidebarApply })
   await rt.mount({ inject: [...inject], apply })
-  const view = rt.renderSlot('rightbar', { width: 600, viewportWidth: layout.frameWidth.getSnapshot(), canShow: true })
+  const view = rt.renderSlot('rightbar', { width: 600, viewportWidth: 1440, canShow: true })
   const open = (name: string): void => {
     act(() => { rt.ctx.sidebarRight.openResource('dsh-resource://file/session/documents/' + name) })
   }
diff --git a/packages/client/ui-sidebar-right/README.i18n.yaml b/packages/client/ui-sidebar-right/README.i18n.yaml
index 78ebefbb4a..723d46bf9c 100644
--- a/packages/client/ui-sidebar-right/README.i18n.yaml
+++ b/packages/client/ui-sidebar-right/README.i18n.yaml
@@ -18,11 +18,11 @@
   en: 3b007cc4d2d89c60
   zh: 74d9795c6392ad74
 /deepseek-ai-dsh-client-ui-sidebar-right/presentations:
-  en: 0ccdab5f29ff9002
-  zh: a0af44ff13301a7f
+  en: 5024c4e5fe5dfd2e
+  zh: 535a7f585e1bcd97
 /deepseek-ai-dsh-client-ui-sidebar-right/the-expand-button:
-  en: 5fe679356e432915
-  zh: e14bcc0778fa1131
+  en: ca7a1966ad9cef31
+  zh: b9a7a967a14f067e
 /deepseek-ai-dsh-client-ui-sidebar-right/state:
   en: 98597ce087c48075
   zh: c5466bf7955ea7b0
@@ -30,8 +30,8 @@
   en: 9533f5af50898daf
   zh: 78d3b77c25962145
 /deepseek-ai-dsh-client-ui-sidebar-right/ctx-sidebarright:
-  en: 47b35a3b5be01240
-  zh: 9b1396d8b36f41cd
+  en: ce5622d6d18ed8d1
+  zh: 292932d8edb6e1c3
 /deepseek-ai-dsh-client-ui-sidebar-right/the-tab-domain:
   en: 717b86e05b44ebdd
   zh: 0f4f694d0ea1d7f8
diff --git a/packages/client/ui-sidebar-right/README.md b/packages/client/ui-sidebar-right/README.md
index 70ed7c2452..9472af1700 100644
--- a/packages/client/ui-sidebar-right/README.md
+++ b/packages/client/ui-sidebar-right/README.md
@@ -36,7 +36,7 @@ The layout itself — the split tree, its operations, the drag gestures, the flo
 <a id="presentations"></a>
 ## Presentations
 
-Normal and fullscreen presentations share the same content tree, so switching does not remount tabs. The normal panel anchors to the right column; fullscreen covers the viewport while retaining the wide-screen columns underneath. Opening with a frame width below 768px uses fullscreen automatically; leaving fullscreen in a narrow frame closes the panel, and widening does not reopen a closed panel. A fullscreen opening keeps the underlying columns unchanged until its slide finishes, then prepares the normal track without a column transition. Before a fullscreen panel retreats, closing prepares a full-width conversation and restoring prepares the normal right track; the background does not animate during the retreat.
+Normal and fullscreen presentations share the same content tree, so switching does not remount tabs. The normal panel anchors to the right column; fullscreen covers the viewport while retaining the wide-screen columns underneath. Opening below 768px uses fullscreen automatically; leaving fullscreen on a narrow viewport closes the panel, and widening does not reopen a closed panel. A fullscreen opening keeps the underlying columns unchanged until its slide finishes, then prepares the normal track without a column transition. Before a fullscreen panel retreats, closing prepares a full-width conversation and restoring prepares the normal right track; the background does not animate during the retreat.
 
 With a coarse pointer, a disabled split button is hidden, whether blocked by insufficient pane width or the two-pane limit, while retaining its space for stable width measurements. Fine-pointer layouts keep the disabled button visible.
 
@@ -56,7 +56,7 @@ The panel has no header row. Its two controls — the presentation switch and th
 
 The shortcut reference includes right-sidebar toggle, split and panel fullscreen commands. The same effective binding appears on the corresponding controls. Split and fullscreen require focus within a visible dock pane; conversation focus leaves them unavailable. Split remains visible when unavailable; its focusable tooltip shows the current binding and explains the pane limit or width requirement. Files, browser, and terminal providers contribute their own commands. Guide buttons display effective shortcuts as unboxed text inline without duplicate tooltips.
 
-While the panel is hidden, one button in the conversation header's corner seat (`conversation.session.header.corner`, past the utilities' right edge and level with the Session log control) is the way back in. Its glyph is the left sidebar's collapse icon mirrored. It uses the shared compact Button, matching the adjacent More action’s radius and hover fill. It shares the panel's store (the slot runtime allows one handle across two same-scope seats); while the panel is shown in a frame narrower than 768px, the button stays mounted, hidden, and disabled, retaining its header space so the title and utilities do not shift during the overlay slide. The panel and button share the frame-width source. In wider frames, including manual fullscreen, the button renders nothing and the corner seat collapses. A collapsed Sidebar therefore costs the conversation nothing: no rail, no width, and the transcript's scrollbar stays at the column's edge. Without a session there is no button and no panel.
+While the panel is hidden, one button in the conversation header's corner seat (`conversation.session.header.corner`, past the utilities' right edge and level with the Session log control) is the way back in. Its glyph is the left sidebar's collapse icon mirrored. It uses the shared compact Button, matching the adjacent More action’s radius and hover fill. It shares the panel's store (the slot runtime allows one handle across two same-scope seats). On mobile devices recognized by the shared `isMobileDevice()` helper, the expanded panel leaves this button mounted, hidden, and disabled, retaining its header space so the title and utilities do not shift during the overlay slide. On desktop devices, the button renders nothing while the panel is shown and the corner seat collapses, regardless of window width or manual fullscreen mode. A collapsed Sidebar therefore costs the conversation nothing: no rail, no width, and the transcript's scrollbar stays at the column's edge. Without a session there is no button and no panel.
 
 The panel takes the conversation's ground colour and content font sizes rather than a raised layer of its own: it is a column of the page, not a card over it.
 
@@ -100,7 +100,7 @@ Two more seats extend what is already there: `sidebar.right.tab.guide` (chain) r
 
 `openResource`, `openResourceIn`, and `tab.actions.openResource` also accept `destination: 'sidebar' | 'float'`, which names the host instead of a pane and takes precedence over `paneId`, `preferNewPane`, `replaceTab`, and `revealIfOpened`; `tab.actions` then passes neither its own pane nor itself for replacement, and no tab closes. Matching uses the Session, the claimed kind, and the content id. A copy already in the requested host is revealed, and glows when it was already on screen. Otherwise one copy from the other host moves there, keeping its tab id, occurrence, signal, and body state such as scroll position; its close handler does not run. Otherwise a new tab opens there. `'sidebar'` uses the active docked pane (the first docked pane while a floating pane is active), never splits, and expands the column; an empty collapsed root takes the tab without a default page beside it. `'float'` uses a new floating panel at the next cascade position and leaves the column's expansion as it is, for a new tab as for a move; a docked tab that leaves its pane follows the usual empty-pane rules. Other copies stay open. Every open still delivers its `params` and steps `revision`, and the whole open, including a move, is one history entry. Without `destination`, placement follows the rules above unchanged.
 
-`close(tabId)` closes a tab; `hide(tabId)` closes a floating tab or collapses its docked column; `active()` reads the active tab. `isExpanded()` and `toggleExpanded()` read and drive the column's expansion; `toggleFullscreen(target)` applies the panel control’s display-mode action to a captured dock pane. Layout operations, for callers that arrange the column programmatically, each recorded like the gesture it stands in for: `focus(tabId)` focuses a tab and its pane; `split(paneId?)` splits a docked pane (the active one by default) under the same pane budget and room rule as the strip's control and returns the new pane's id, or `undefined` — recording nothing — when it cannot; `float(tabId, rect?)` takes a docked tab out into a panel; `dock(paneId)` returns a floating panel to the active docked pane and expands the column, as the panel's dock control does. A tab or pane that does not exist, or already is where the call would put it, is left alone. The face exposes operations only: no layout snapshot, no operation log, no lookup by address. `_undo()` / `_redo()` step the on-screen surface's history; they are `@internal` — the sequence has no user-facing control, and these exist for tests. Commands act on the on-screen Session through its adopted store; with no Session on screen, or before the runtime mints its store, they throw rather than write into a surface nobody draws. `mounted` is the observable of the Session on screen: the selected Session while the Conversation fills the main column, `undefined` while a global panel replaces it or no Session is selected. The plugin derives it from the Session selection and `ctx.layout.panelInfo`, and it changes before React renders the change that causes it, so a component rendered in that commit reads the arriving Session and may act on it from its effects: the frame renders that Session's seat in the same pass, which mints its store. Seats never publish it; each reports the room its docking kit measured, which `split` and `preferNewPane` apply to that Session's panes (unmeasured panes have room). The fullscreen command shares the panel and header button's automatic fullscreen rule, derived from `ctx.layout.frameWidth`. The plan review's automatic open reads `mounted` through a bound hook.
+`close(tabId)` closes a tab; `hide(tabId)` closes a floating tab or collapses its docked column; `active()` reads the active tab. `isExpanded()` and `toggleExpanded()` read and drive the column's expansion; `toggleFullscreen(target)` applies the panel control’s display-mode action to a captured dock pane. Layout operations, for callers that arrange the column programmatically, each recorded like the gesture it stands in for: `focus(tabId)` focuses a tab and its pane; `split(paneId?)` splits a docked pane (the active one by default) under the same pane budget and room rule as the strip's control and returns the new pane's id, or `undefined` — recording nothing — when it cannot; `float(tabId, rect?)` takes a docked tab out into a panel; `dock(paneId)` returns a floating panel to the active docked pane and expands the column, as the panel's dock control does. A tab or pane that does not exist, or already is where the call would put it, is left alone. The face exposes operations only: no layout snapshot, no operation log, no lookup by address. `_undo()` / `_redo()` step the on-screen surface's history; they are `@internal` — the sequence has no user-facing control, and these exist for tests. Commands act on the on-screen Session through its adopted store; with no Session on screen, or before the runtime mints its store, they throw rather than write into a surface nobody draws. `mounted` is the observable of the Session on screen: the selected Session while the Conversation fills the main column, `undefined` while a global panel replaces it or no Session is selected. The plugin derives it from the Session selection and `ctx.layout.panelInfo`, and it changes before React renders the change that causes it, so a component rendered in that commit reads the arriving Session and may act on it from its effects: the frame renders that Session's seat in the same pass, which mints its store. Seats never publish it; each reports only what it renders with: the room its docking kit measured, which `split` and `preferNewPane` apply to that Session's panes (unmeasured panes have room), and whether its frame width presents the panel fullscreen automatically, which the fullscreen command applies. The plan review's automatic open reads `mounted` through a bound hook.
 
 `focusedTarget(element?)` resolves the current DOM pane and tab, including an embedding iframe; outside focus returns no page. `commandTarget(element?)` additionally allows an outside open to use the on-screen Session's active dock pane. Captures include the occurrence and navigation revision; `isTargetCurrent(target)` rejects changed Sessions, moved or reopened tabs, and intervening navigation. Focus and pointer activation remain separate from persisted layout selection.
 
diff --git a/packages/client/ui-sidebar-right/README.zh.md b/packages/client/ui-sidebar-right/README.zh.md
index fc7fbae381..96e714b2d6 100644
--- a/packages/client/ui-sidebar-right/README.zh.md
+++ b/packages/client/ui-sidebar-right/README.zh.md
@@ -36,7 +36,7 @@ kind: "package-reference"
 <a id="presentations"></a>
 ## 呈现形态
 
-普通与全屏共用同一棵面板内容树，切换不会重挂载Tab。普通面板贴靠右栏；全屏面板覆盖窗口并保留宽屏底层列宽。框架宽度低于 768px 时打开右栏自动全屏；窄框架退出全屏会收起右栏，变宽不重新打开已关闭的右栏。 全屏打开时，底层列宽保持不变，直到滑入结束后才无过渡地准备普通轨道。 全屏面板退场前，关闭先准备全宽会话区，恢复先准备普通右轨道；退场期间底层不播放宽度动画。
+普通与全屏共用同一棵面板内容树，切换不会重挂载Tab。普通面板贴靠右栏；全屏面板覆盖窗口并保留宽屏底层列宽。窗口低于768px时打开右栏自动全屏；窄屏退出全屏会收起右栏，变宽不重新打开已关闭的右栏。 全屏打开时，底层列宽保持不变，直到滑入结束后才无过渡地准备普通轨道。 全屏面板退场前，关闭先准备全宽会话区，恢复先准备普通右轨道；退场期间底层不播放宽度动画。
 
 触屏等粗指针设备上，因面板宽度不足或已达两个分栏上限而禁用的分栏按钮都会隐藏，并保留占位以稳定宽度测量。鼠标等精细指针设备仍显示禁用按钮。
 
@@ -56,7 +56,7 @@ kind: "package-reference"
 
 快捷键速查包含右侧栏切换、分栏和面板全屏命令，对应控件显示同一份有效键位。分栏与全屏要求焦点位于可见的停靠分栏内；焦点在聊天区时不可用。不可分栏时控件仍可见，可聚焦的提示显示当前键位，并说明分栏数量上限或宽度要求。文件、浏览器和终端提供者分别注册自己的命令。开始页按钮内以无背景文字显示有效快捷键，不额外弹出重复提示。
 
-面板隐藏时，会话 header 角落席位里的一个按钮（`conversation.session.header.corner`，在工具组右缘之外，与 Session 日志控件齐平）是回去的路。它的图形是左侧 sidebar 折叠图标的镜像。它使用公共紧凑 Button，与相邻更多操作按钮共用圆角和 hover 底色。它与面板共用一个存储（slot 运行时允许两个同作用域席位共用一个 handle）；框架宽度小于 768px 且面板显示时，按钮保持挂载、隐藏并禁用，保留在 header 中的占位，使标题和工具组在覆盖层滑动期间不发生位移。面板与按钮共用框架宽度来源。在更宽的框架中，包括手动全屏时，按钮不渲染，角落席位随之收起。于是折叠的 Sidebar 不花会话区任何代价：没有轨条、没有宽度，转录的滚动条留在列的边缘。没有会话就没有按钮也没有面板。
+面板隐藏时，会话 header 角落席位里的一个按钮（`conversation.session.header.corner`，在工具组右缘之外，与 Session 日志控件齐平）是回去的路。它的图形是左侧 sidebar 折叠图标的镜像。它使用公共紧凑 Button，与相邻更多操作按钮共用圆角和 hover 底色。它与面板共用一个存储（slot 运行时允许两个同作用域席位共用一个 handle）。在公共 `isMobileDevice()` 函数识别的移动设备上，面板展开时按钮保持挂载、隐藏并禁用，保留 header 占位，使标题与工具组在覆盖层滑动时不发生位移。在桌面设备上，面板显示时按钮不渲染，角落席位随之收起，不受窗口宽度或手动全屏模式影响。于是折叠的 Sidebar 不花会话区任何代价：没有轨条、没有宽度，转录的滚动条留在列的边缘。没有会话就没有按钮也没有面板。
 
 面板取会话区的底色与正文字号，而不是自成一层浮起的表面：它是页面的一列，不是压在页面上的卡片。
 
@@ -100,7 +100,7 @@ tab 类型分两阶段注册，随包发布的引导类型走的正是别的包
 
 `openResource`、`openResourceIn` 与 `tab.actions.openResource` 还接受 `destination: 'sidebar' | 'float'`：它指定宿主位置而非分栏，优先于 `paneId`、`preferNewPane`、`replaceTab` 与 `revealIfOpened`；此时 `tab.actions` 既不传自己所在的格，也不把自己作为被替换的 tab，不会关闭任何 tab。匹配依据会话、认领的 kind 与 content id。请求的宿主里已有副本时揭示它，该副本原本就在屏幕上时发光提示。否则把另一宿主中的一份副本移过去，保留其 tab id、occurrence、signal 及滚动位置等正文状态，不运行其关闭处理器。否则在该宿主新开 tab。`'sidebar'` 使用活跃停靠格（活动格是浮窗时为第一个停靠格），从不分栏，并展开该列；空的收起根格直接接收该 tab，旁边不补默认页。`'float'` 在下一个级联位置新建浮窗，新开和移动都不改变该列的展开状态；停靠 tab 离开所在格后按通常的空格规则处理。其他副本保持打开。每次打开仍交付 `params` 并递增 `revision`，整次打开（含移动）是一条历史。不传 `destination` 时，落位规则与上文相同。
 
-`close(tabId)` 关闭一个 tab；`hide(tabId)` 关闭浮动 tab 或收起其停靠列；`active()` 读取活动 tab。`isExpanded()` 与 `toggleExpanded()` 读取并驱动该列的展开；`toggleFullscreen(target)` 对捕获的停靠分栏执行面板控件的显示模式操作。布局操作供以编程方式安排该列的调用方使用，每个都像它替代的手势一样被记录：`focus(tabId)` 聚焦一个 tab 及其格；`split(paneId?)` 在与 tab 条控件相同的格预算与空间规则下分栏一个停靠格（默认活跃格），返回新格的 id，做不到时返回 `undefined`——且不记录任何东西；`float(tabId, rect?)` 把停靠 tab 浮出为浮窗；`dock(paneId)` 把浮窗放回活跃停靠格并展开该列，与浮窗的收回控件一致。不存在的 tab 或格、或已处于调用目标状态的，都原样不动。该接口只暴露操作：没有布局快照、没有操作日志、没有按地址查找。`_undo()` / `_redo()` 步进屏幕上停靠面的历史；它们是 `@internal`——序列没有面向用户的控件，这两个只为测试存在。命令通过屏幕上会话已采用的 store 作用于该会话；没有会话在屏幕上、或运行时尚未创建它的 store 时，命令 throw，而不是写进一个没人绘制的面里。`mounted` 是「屏幕上的会话」的可观察值：Conversation 占据主栏时为选中的会话，全局面板替代它或没有选中会话时为 `undefined`。插件从会话选择与 `ctx.layout.panelInfo` 推导它，它在 React 渲染引起变化的那次更新之前就已改变，因此同一次提交里渲染的组件读到的是到来的会话，并可以在自己的 effect 里对它行动：框架在同一轮渲染里渲染该会话的席位，席位随之创建它的 store。席位从不发布它；每个席位只上报停靠套件测得的空间，`split` 与 `preferNewPane` 把它用于该会话的分栏（未测量的分栏视为有空间）。全屏命令与面板、header 按钮共用自动全屏规则，该规则从 `ctx.layout.frameWidth` 推导。计划审阅的自动打开通过绑定的 hook 读取 `mounted`。
+`close(tabId)` 关闭一个 tab；`hide(tabId)` 关闭浮动 tab 或收起其停靠列；`active()` 读取活动 tab。`isExpanded()` 与 `toggleExpanded()` 读取并驱动该列的展开；`toggleFullscreen(target)` 对捕获的停靠分栏执行面板控件的显示模式操作。布局操作供以编程方式安排该列的调用方使用，每个都像它替代的手势一样被记录：`focus(tabId)` 聚焦一个 tab 及其格；`split(paneId?)` 在与 tab 条控件相同的格预算与空间规则下分栏一个停靠格（默认活跃格），返回新格的 id，做不到时返回 `undefined`——且不记录任何东西；`float(tabId, rect?)` 把停靠 tab 浮出为浮窗；`dock(paneId)` 把浮窗放回活跃停靠格并展开该列，与浮窗的收回控件一致。不存在的 tab 或格、或已处于调用目标状态的，都原样不动。该接口只暴露操作：没有布局快照、没有操作日志、没有按地址查找。`_undo()` / `_redo()` 步进屏幕上停靠面的历史；它们是 `@internal`——序列没有面向用户的控件，这两个只为测试存在。命令通过屏幕上会话已采用的 store 作用于该会话；没有会话在屏幕上、或运行时尚未创建它的 store 时，命令 throw，而不是写进一个没人绘制的面里。`mounted` 是「屏幕上的会话」的可观察值：Conversation 占据主栏时为选中的会话，全局面板替代它或没有选中会话时为 `undefined`。插件从会话选择与 `ctx.layout.panelInfo` 推导它，它在 React 渲染引起变化的那次更新之前就已改变，因此同一次提交里渲染的组件读到的是到来的会话，并可以在自己的 effect 里对它行动：框架在同一轮渲染里渲染该会话的席位，席位随之创建它的 store。席位从不发布它；每个席位只上报它渲染时依据的事实：停靠套件测得的空间，`split` 与 `preferNewPane` 把它用于该会话的分栏（未测量的分栏视为有空间）；以及框架宽度是否让面板自动全屏，全屏命令据此执行。计划审阅的自动打开通过绑定的 hook 读取 `mounted`。
 
 `focusedTarget(element?)` 解析当前 DOM 分栏和标签页，也接受嵌入 iframe；焦点位于外部时不返回页面。`commandTarget(element?)` 另外允许外部打开动作使用屏幕上会话的活动停靠分栏。捕获值包含 occurrence 和导航版本；`isTargetCurrent(target)` 拒绝会话变更、已移动或重新打开的标签页，以及期间发生的导航。焦点和指针激活独立于持久化的布局选择。
 
diff --git a/packages/client/ui-sidebar-right/src/client/index.ts b/packages/client/ui-sidebar-right/src/client/index.ts
index be7a831e9d..1f3d3781fe 100644
--- a/packages/client/ui-sidebar-right/src/client/index.ts
+++ b/packages/client/ui-sidebar-right/src/client/index.ts
@@ -32,7 +32,6 @@ import type {} from '@deepseek-ai/dsh-client-resources/client'
 import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
 import type {} from '@deepseek-ai/dsh-client-ui-session/client'
 import type { ILayout } from '@deepseek-ai/dsh-client-ui-layout/client'
-import type { HostObservable } from '@deepseek-ai/dsh-client-ui-slots'
 import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
 import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
@@ -86,9 +85,6 @@ export type { SidebarRightOpenTab } from './tab-inventory.ts'
 /** This package's copy namespace. */
 const NS = 'sidebarRight'
 
-/** Frames below this width present the right sidebar as an overlay. */
-const AUTO_FULLSCREEN_WIDTH = 768
-
 /** Required browser services: the slot registry, the frame's panel actions, copy, and the resource model. */
 export const inject = ['contextMenus', 'slots', 'layout', 'locale', 'resources', 'sessions', 'uiSession', 'shortcuts']
 
@@ -127,15 +123,14 @@ export function apply(ctx: ClientContext): void {
     return () => { unsubscribe(); views.dispose() }
   }, 'ui-sidebar-right: retained Session views')
   const layout: ILayout = ctx.layout
-  const narrowViewport: HostObservable<boolean> = {
-    getSnapshot: () => layout.frameWidth.getSnapshot() < AUTO_FULLSCREEN_WIDTH,
-    subscribe: listener => layout.frameWidth.subscribe(listener),
-  }
+  // The automatic fullscreen rule as the seats last rendered it: the frame
+  // hands them its width as owner props, and every seat reports the same rule.
+  let autoFullscreen = false
   const { controller, adopt, forget, show, measure } = createSidebarRightController(
     tabs,
     (address, signal) => { ctx.resources.pin(address, signal) },
     {
-      autoFullscreen: () => narrowViewport.getSnapshot(),
+      autoFullscreen: () => autoFullscreen,
       openWithFocus: (sessionId, open) => { openWithPaneFocus(document, sessionId, open) },
       closeWithFocus: (sessionId, paneId, close) => { closeWithPaneFocus(document, sessionId, paneId, close) },
     },
@@ -227,6 +222,7 @@ export function apply(ctx: ClientContext): void {
         if (shown) layout.openRightbar(track, fullscreen)
         else layout.closeRightbar()
       },
+      reportAutoFullscreen: (value) => { autoFullscreen = value },
       splitPane: (paneId) => { controller.split(paneId) },
       toggleFullscreen: () => { const target = controller.commandTarget(); if (target !== undefined) controller.toggleFullscreen(target) },
       openTab: (kind, options) => { controller.openTab(kind, options) },
@@ -254,8 +250,7 @@ export function apply(ctx: ClientContext): void {
         inject: (sessionId): SidebarRightInjected => ({
           ...injected,
           hooks: {
-            contextMenuTarget: ctx.contextMenus.active, shortcuts: ctx.shortcuts.catalog, tabTypes,
-            flash: controller.flashOf(sessionId), narrowViewport,
+            contextMenuTarget: ctx.contextMenus.active, shortcuts: ctx.shortcuts.catalog, tabTypes, flash: controller.flashOf(sessionId),
           },
           measureRoom: (canSplitPane) => { measure(sessionId, canSplitPane) },
           closeTab: (tabId) => {
@@ -267,13 +262,15 @@ export function apply(ctx: ClientContext): void {
         }),
       }, RightbarSeat)
     })
-    // Narrow frames retain the opener's width under the overlay. Wide frames
-    // collapse the corner seat even when the panel uses manual fullscreen.
+    // The expand button shares the panel's store: it only needs to know whether
+    // the panel is expanded, and to ask for it to be. The header's corner seat
+    // is its own place, past the utilities, so showing and hiding it moves
+    // nothing else in the row.
     const disposeExpand = ctx.slots.inject('conversation.session.header.corner', () => ctx.slots.register({
       name: 'conversation.session.header.corner',
       locale: NS,
       store,
-      inject: () => ({ hooks: { shortcuts: ctx.shortcuts.catalog, narrowViewport } }),
+      inject: () => ({ hooks: { shortcuts: ctx.shortcuts.catalog } }),
     }, ExpandButton))
     // Stage two for the guide: it declares the chain child it hosts and reads
     // the registry's entry boxes, which an ordinary type has no reason to do.
diff --git a/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx b/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx
index 56240173be..4364ea721a 100644
--- a/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx
+++ b/packages/client/ui-sidebar-right/src/client/shell/ExpandButton.tsx
@@ -6,9 +6,9 @@
  * column so that a collapsed Sidebar costs the conversation nothing — no rail,
  * no width, and the transcript's scrollbar stays at the column's edge. The
  * corner seat is its own, past the utilities' edge, so the button never joins
- * the utilities row. On narrow frames, the disabled button stays mounted
+ * the utilities row. On mobile devices, the disabled button stays mounted
  * and hidden while the panel is shown, preserving the title's width during
- * the overlay slide. Wide frames collapse the seat while the panel is shown.
+ * the overlay slide. Desktop devices collapse the seat while the panel is shown.
  * It shares the panel's per-session store because both seats are session-scoped.
  *
  * The glyph is the left sidebar's collapse icon mirrored: the same affordance,
@@ -18,7 +18,7 @@ import type { ShortcutCatalogEntry } from '@deepseek-ai/dsh-client-shortcuts/cli
 import type { InjectFace, HostObservable } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ReactNode } from 'react'
 import clsx from 'clsx'
-import { Button, IconPanelLeftOutlineRegular, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
+import { Button, IconPanelLeftOutlineRegular, isMobileDevice, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PropsLocale, PropsRuntime, PropsStore } from '@deepseek-ai/dsh-client-ui-slots'
 import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type { createSidebarRightStore } from '../stores.ts'
@@ -29,19 +29,15 @@ export type ExpandButtonProps =
   & PropsRuntime<'conversation.session.header.corner'>
   & PropsStore<ReturnType<typeof createSidebarRightStore>>
   & PropsLocale<'sidebarRight'>
-  & InjectFace<{ hooks: {
-    shortcuts: HostObservable<readonly ShortcutCatalogEntry[]>
-    narrowViewport: HostObservable<boolean>
-  } }>
+  & InjectFace<{ hooks: { shortcuts: HostObservable<readonly ShortcutCatalogEntry[]> } }>
 
-/** Opens a collapsed panel; when expanded, hides and disables on narrow frames and renders nothing on wide frames. */
-export function ExpandButton({ sessionId, useStore, actions, t, useShortcuts, useNarrowViewport }: ExpandButtonProps): ReactNode {
+/** Opens a collapsed panel; when expanded, hides and disables on mobile devices and renders nothing on desktop devices. */
+export function ExpandButton({ sessionId, useStore, actions, t, useShortcuts }: ExpandButtonProps): ReactNode {
   // A session with no surface yet is collapsed: the panel seat materializes the
   // surface on its own mount, and until then there is nothing expanded.
   const shortcut = useShortcuts(entries => entries.find(entry => entry.id === 'sidebar.right.toggle'))
   const expanded = useStore(state => state.bySession[sessionId]?.layout.expanded ?? false)
-  const narrow = useNarrowViewport(value => value)
-  if (expanded && !narrow) return null
+  if (expanded && !isMobileDevice()) return null
   return (
     <Tooltip label={t('chrome.expand')} shortcutKeys={shortcut?.keys} side="bottom" delayMs={500} disabled={expanded}>
       <Button
diff --git a/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx b/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx
index 8f781e9404..e0182a611b 100644
--- a/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx
+++ b/packages/client/ui-sidebar-right/src/client/shell/SidebarRight.tsx
@@ -4,7 +4,7 @@
  * The frame owns the right column's geometry; this package owns one content
  * tree at the column width or spanning the viewport. A shown wide panel
  * retains its track in fullscreen, preserving the conversation width. Below
- * 768px fullscreen is derived from frame width, without changing manual mode.
+ * 768px fullscreen is derived from viewport width, without changing manual mode.
  *
  * Docked content stays mounted while collapsed, translated off the frame's right
  * edge, so opening and closing are one gesture in both presentations: a slide
@@ -18,7 +18,7 @@
  * and collapse — ride the docking kit's chrome seat at the end of the top-right
  * pane's tab strip, so the strip is the panel's whole top edge. The way back in
  * while collapsed is not here either: it is one button in the conversation
- * header (`ExpandButton.tsx`), where it is visible only while this panel is
+ * header (`ExpandButton.tsx`), because it exists only while this panel is
  * hidden. Floating panels remain in the same content tree; untransformed
  * ancestors let their fixed-position frames cross the column and conversation.
  *
@@ -88,6 +88,14 @@ export interface SidebarRightInjected {
    * @param canSplitPane - whether two working halves of a docked pane would fit; unmeasured panes fit.
    */
   readonly measureRoom: (canSplitPane: (paneId: PaneId) => boolean) => void
+  /**
+   * Record whether the frame width this seat renders at presents an expanded panel fullscreen automatically.
+   *
+   * The fullscreen command reads the latest report: while it holds, the command
+   * closes the panel instead of switching its recorded mode.
+   * @param autoFullscreen - whether the frame is narrower than the automatic fullscreen width.
+   */
+  readonly reportAutoFullscreen: (autoFullscreen: boolean) => void
   /**
    * The navigation face's `openTab`, for the strip's add control: a new tab is
    * the guide opened by kind, through the same path as every other open.
@@ -103,8 +111,6 @@ export interface SidebarRightInjected {
     readonly contextMenuTarget: HostObservable<ContextMenuTarget | null>
     readonly shortcuts: HostObservable<readonly ShortcutCatalogEntry[]>
     readonly tabTypes: HostObservable<readonly SidebarRightTabDefinition[]>
-    /** Whether the measured frame requires an automatic fullscreen overlay. */
-    readonly narrowViewport: HostObservable<boolean>
     /** This Session's latest request to make the pane holding a revealed tab glow. */
     readonly flash: HostObservable<SidebarRightFlash | undefined>
   }
@@ -373,12 +379,13 @@ function SidebarPanel(panel: PanelProps & { width: number; panelRef: RefObject<H
  * The right column's occupant: stable tab containers, docked or floating.
  * It is also where the frame learns the panel's presentation, because this is
  * the seat that knows it. `ctx.sidebarRight` names the on-screen Session
- * itself; this seat reports its presentation and the room its kit measured.
+ * itself; this seat reports only what it renders with: the room its kit
+ * measured and the automatic fullscreen rule of its frame width.
  */
 export function RightbarSeat({
-  sessionId, width, canShow, useStore, actions, t, renderSlot, syncPresentation, measureRoom,
+  sessionId, width, viewportWidth, canShow, useStore, actions, t, renderSlot, syncPresentation, measureRoom, reportAutoFullscreen,
   openTab, closeTab, useContextMenu, useContextMenuTarget, useTabTypes, useTabNavigation, occurrence, retainTab,
-  active, useShortcuts, splitPane, toggleFullscreen, useFlash, useNarrowViewport,
+  active, useShortcuts, splitPane, toggleFullscreen, useFlash,
 }: RightbarSeatProps): ReactNode {
   const { getTriggerProps } = useContextMenu()
   const getTabTriggerProps: PanelProps['getTabTriggerProps'] = (tab, paneId, handlers) =>
@@ -388,7 +395,7 @@ export function RightbarSeat({
   const shortcuts = useShortcuts(entries => entries)
   const surface = useStore(state => state.bySession[sessionId])
   const shown = active && surface !== undefined && surface.layout.expanded
-  const autoFullscreen = useNarrowViewport(value => value)
+  const autoFullscreen = viewportWidth < 768
   const fullscreen = autoFullscreen || surface?.layout.mode === 'fullscreen'
   const panelRef = useRef<HTMLDivElement | null>(null)
   // A reading never re-renders anything: the service applies it when it splits.
@@ -405,6 +412,9 @@ export function RightbarSeat({
     if (shown && !fullscreen && !canShow) actions.setExpanded(sessionId, false)
   }, [actions, sessionId, shown, fullscreen, canShow])
 
+  // Read only when the fullscreen command runs, after this commit has settled.
+  useLayoutEffect(() => { reportAutoFullscreen(autoFullscreen) }, [reportAutoFullscreen, autoFullscreen])
+
   // The open/close slide needs no pulse of its own: the shell's window drag
   // watcher (ui-web) measures the marked rows every frame the surface moves and
   // sets the recall mark itself (electron#32341).
diff --git a/packages/client/ui-sidebar-right/tests/apply.client.spec.ts b/packages/client/ui-sidebar-right/tests/apply.client.spec.ts
index 334949fc10..c2acde7768 100644
--- a/packages/client/ui-sidebar-right/tests/apply.client.spec.ts
+++ b/packages/client/ui-sidebar-right/tests/apply.client.spec.ts
@@ -14,7 +14,6 @@ import { MenuRegistry } from '@deepseek-ai/dsh-client-ui-context-menu/src/client
 import { IconCloseOutlineRegular } from '@deepseek-ai/dsh-client-ui-primitives'
 import { createSnapshotStore } from '@deepseek-ai/dsh-client-store'
 import type { SlotRegistry } from '@deepseek-ai/dsh-client-ui-renderer/client'
-import type { HostObservable } from '@deepseek-ai/dsh-client-ui-slots'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
 import type { Shortcuts, ShortcutCommand } from '@deepseek-ai/dsh-client-shortcuts/client'
 import { TabMenuContent } from '../src/client/shell/TabMenuContent.tsx'
@@ -72,7 +71,6 @@ async function boot(shortcuts: Partial<Shortcuts> = {}) {
   const layout = {
     openRightbar: vi.fn(), closeRightbar: vi.fn(),
     panelInfo: createSnapshotStore<{ activePanelId: string | null }>({ activePanelId: null }),
-    frameWidth: createSnapshotStore(1920),
   }
   const current = createSnapshotStore<{ key: SessionId | undefined }>({ key: undefined })
   const resources = { pin: vi.fn<(address: string, signal: AbortSignal) => void>() }
@@ -152,7 +150,7 @@ describe('ui-sidebar-right apply', () => {
       'sidebar.right.pane.tab', 'sidebar.right.pane.tab.title',
     ])
     expect(seat('sidebar.right.pane.tab').children).toMatchObject({ 'sidebar.right.tab.guide': { kind: 'chain', scope: 'session' } })
-    // Both seats share the session's panel state.
+    // Both seats read one store: the button only needs to know whether the panel is expanded.
     expect(seat('rightbar.session').store).toBeDefined()
     expect(seat('conversation.session.header.corner').store).toBe(seat('rightbar.session').store)
   })
@@ -170,36 +168,6 @@ describe('ui-sidebar-right apply', () => {
     expect(ctx.sidebarRight.mounted.getSnapshot()).toBeUndefined()
   })
 
-  it('shares measured frame width between the panel and opener and releases subscriptions', async () => {
-    onTestFinished(() => { vi.unstubAllGlobals() })
-    const matchMedia = vi.fn(() => Object.assign(new EventTarget(), { matches: false }))
-    vi.stubGlobal('matchMedia', matchMedia)
-    const { ctx, layout, seat, injectedOf } = await boot()
-    onTestFinished(async () => { await ctx.fiber.dispose() })
-    const entry = seat('conversation.session.header.corner')
-    const first = injectedOf(entry) as { hooks: { narrowViewport: HostObservable<boolean> } }
-    const second = injectedOf(entry) as typeof first
-    const panel = injectedOf(seat('rightbar.session')) as SidebarRightInjected
-    const viewport = first.hooks.narrowViewport
-    expect(second.hooks.narrowViewport).toBe(viewport)
-    expect(panel.hooks.narrowViewport).toBe(viewport)
-    expect(viewport.getSnapshot()).toBe(false)
-    const listener = vi.fn(() => viewport.getSnapshot())
-    const unsubscribe = viewport.subscribe(listener)
-    try {
-      layout.frameWidth.set(767)
-      expect(viewport.getSnapshot()).toBe(true)
-      expect(listener).toHaveLastReturnedWith(true)
-      layout.frameWidth.set(768)
-      expect(viewport.getSnapshot()).toBe(false)
-      expect(listener).toHaveLastReturnedWith(false)
-      expect(listener).toHaveBeenCalledTimes(2)
-    } finally { unsubscribe() }
-    layout.frameWidth.set(767)
-    expect(listener).toHaveBeenCalledTimes(2)
-    expect(matchMedia).not.toHaveBeenCalled()
-  })
-
   it('hands the panel seat the frame report, the room rule, the opens, the observable registry, and the Tab domain', async () => {
     const { ctx, layout, current, resources, seat, injectedOf } = await boot()
     const injected = injectedOf(seat('rightbar.session')) as SidebarRightInjected
@@ -245,11 +213,11 @@ describe('ui-sidebar-right apply', () => {
     injected.measureRoom(() => true)
     injected.splitPane(surface.layout.activePaneId)
     expect(panes()).toHaveLength(2)
-    // Commands read the current frame width even before a seat renders it.
+    // The fullscreen command follows the automatic fullscreen rule the seats report.
     const layoutOf = () => instance.getSnapshot().bySession[SESSION]?.layout
     injected.toggleFullscreen()
     expect(layoutOf()?.mode).toBe('fullscreen')
-    layout.frameWidth.set(767)
+    injected.reportAutoFullscreen(true)
     injected.toggleFullscreen()
     expect(layoutOf()?.expanded).toBe(false)
     expect(layoutOf()?.mode).toBe('push')
diff --git a/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx b/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx
index 250f0856e8..205ebcf35f 100644
--- a/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx
+++ b/packages/client/ui-sidebar-right/tests/expand-button.client.spec.tsx
@@ -1,13 +1,13 @@
 // @vitest-environment jsdom
 import { contextMenuHook } from '@deepseek-ai/dsh-client-test-runtime'
 /**
- * Narrow overlays preserve the header control's identity; wide panels release
+ * Mobile devices preserve the header control's identity; desktops release
  * its header space while open.
  */
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { act, cleanup, fireEvent, render } from '@testing-library/react'
 import { useSyncExternalStore } from 'react'
-import { createSnapshotStore } from '@deepseek-ai/dsh-client-store'
+import * as uiPrimitives from '@deepseek-ai/dsh-client-ui-primitives'
 import type { GlobalStandardProps, SessionStandardProps } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ShortcutCatalogEntry } from '@deepseek-ai/dsh-client-shortcuts/client'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
@@ -17,7 +17,10 @@ import type { ExpandButtonProps } from '../src/client/shell/ExpandButton.tsx'
 import { createSidebarRightStore } from '../src/client/stores.ts'
 
 const SESSION = 's-test' as SessionId
-afterEach(cleanup)
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+})
 const unused = (): never => { throw new Error('This isolated component does not consume framework hooks') }
 const standard: GlobalStandardProps & SessionStandardProps = {
   sessionId: SESSION, useSession: unused, useProjection: unused, useConversation: unused,
@@ -38,13 +41,12 @@ function hookOf<T>(inst: { subscribe: (fn: () => void) => () => void; getSnapsho
 }
 
 /** Mount the button over its real store and an empty shortcut catalog. */
-function mountButton(shortcuts: readonly ShortcutCatalogEntry[] = [], narrow = false) {
+function mountButton(shortcuts: readonly ShortcutCatalogEntry[] = [], mobile = false) {
+  vi.spyOn(uiPrimitives, 'isMobileDevice').mockReturnValue(mobile)
   const instance = createSidebarRightStore(() => ({ kind: 'guide', title: 'Start' })).create()
-  const viewport = createSnapshotStore(narrow)
   const props: ExpandButtonProps = {
     ...standard,
     useShortcuts: <T,>(selector: (entries: readonly ShortcutCatalogEntry[]) => T): T => selector(shortcuts),
-    useNarrowViewport: hookOf(viewport),
     sessionId: SESSION,
     useStore: hookOf(instance),
     actions: instance.actions,
@@ -53,7 +55,7 @@ function mountButton(shortcuts: readonly ShortcutCatalogEntry[] = [], narrow = f
   }
   const view = render(<ExpandButton {...props} />)
   const control = (): HTMLButtonElement | null => view.container.querySelector('[data-sidebar-right-expand]')
-  return { instance, viewport, view, control }
+  return { instance, view, control }
 }
 
 describe('ExpandButton', () => {
@@ -80,11 +82,14 @@ describe('ExpandButton', () => {
     expect(control()?.disabled).toBe(false)
   })
 
-  it('retains the disabled control through a narrow overlay opening and closing', () => {
+  it.each(['push', 'fullscreen'] as const)('retains the disabled control through mobile %s panel opening and closing', (mode) => {
     const { instance, control } = mountButton([], true)
     const button = control()
     if (button === null) throw new Error('expected the expand control')
-    act(() => { instance.actions.setExpanded(SESSION, true) })
+    act(() => {
+      instance.actions.setMode(SESSION, mode)
+      instance.actions.setExpanded(SESSION, true)
+    })
     expect(control()).toBe(button)
     expect(button.disabled).toBe(true)
     act(() => { instance.actions.setExpanded(SESSION, false) })
@@ -92,20 +97,7 @@ describe('ExpandButton', () => {
     expect(button.disabled).toBe(false)
   })
 
-  it('keeps an available control across viewport changes and releases its space only for an open wide panel', () => {
-    const { instance, viewport, control } = mountButton()
-    const button = control()
-    act(() => { viewport.set(true) })
-    expect(control()).toBe(button)
-    act(() => { instance.actions.setExpanded(SESSION, true) })
-    expect(control()).toBe(button)
-    act(() => { viewport.set(false) })
-    expect(control()).toBeNull()
-    act(() => { viewport.set(true) })
-    expect(control()?.disabled).toBe(true)
-  })
-
-  it('releases header space for a manually fullscreen panel on a wide frame', () => {
+  it('releases header space for a manually fullscreen panel on desktop', () => {
     const { instance, control } = mountButton()
     act(() => {
       instance.actions.setMode(SESSION, 'fullscreen')
diff --git a/packages/client/ui-sidebar-right/tests/seat.client.spec.tsx b/packages/client/ui-sidebar-right/tests/seat.client.spec.tsx
index 4f83466d16..c6ae78c2e8 100644
--- a/packages/client/ui-sidebar-right/tests/seat.client.spec.tsx
+++ b/packages/client/ui-sidebar-right/tests/seat.client.spec.tsx
@@ -72,8 +72,7 @@ function transition(property = 'transform') {
 async function mountSeat(viewportWidth = 1440, canShow = true, entryCount = 0, opener = false, keepMounted = false) {
   const runtime = await SlotTestRuntime.create()
   runtimes.push(runtime)
-  const frame = { openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: runtime.panelInfo,
-    frameWidth: createSnapshotStore(viewportWidth) }
+  const frame = { openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: runtime.panelInfo }
   const pin = vi.fn<(address: string, signal: AbortSignal) => void>()
   runtime.ctx.provide('layout', frame as never)
   runtime.ctx.provide('resources', { pin } as never)
@@ -149,12 +148,6 @@ async function mountSeat(viewportWidth = 1440, canShow = true, entryCount = 0, o
     runtime.slots.register({ name: 'sidebar.right.pane.tab.title', key: 'test/text' }, Title)
   })
   const view = runtime.renderSlot('rightbar', { width: 420, viewportWidth, canShow })
-  const updateFrame = (props: Parameters<typeof view.update>[0]): void => {
-    act(() => {
-      frame.frameWidth.set(props.viewportWidth)
-      view.update(props)
-    })
-  }
   const registerPage = (kind: string, multiple = false): void => {
     runtime.ctx.sidebarRightTabs.register({ id: `test/${kind}`, kind, multiple, title: () => kind })
     runtime.slots.register({ name: 'sidebar.right.pane.tab', key: `test/${kind}` }, Body)
@@ -173,7 +166,7 @@ async function mountSeat(viewportWidth = 1440, canShow = true, entryCount = 0, o
   }
   return {
     runtime, feature, controller, instance, actions: instance.actions, layout,
-    open, selectSession, frame, pin, bodies, titles, hooks, view, updateFrame, arm, opened, registerPage, catalog,
+    open, selectSession, frame, pin, bodies, titles, hooks, view, arm, opened, registerPage, catalog,
     openerView: () => openerView!,
   }
 }
@@ -681,7 +674,7 @@ describe('RightbarSeat presentation', () => {
     expect(h.frame.openRightbar).toHaveBeenLastCalledWith(false, true)
     const stored = h.instance.getSnapshot()
     const body = element(h.view.container, '[data-tab-body]')
-    h.updateFrame({ width: 420, viewportWidth: 768, canShow: true })
+    h.view.update({ width: 420, viewportWidth: 768, canShow: true })
     expect(h.instance.getSnapshot()).toBe(stored)
     expect(element(h.view.container, '[data-tab-body]')).toBe(body)
     expect(h.frame.openRightbar).toHaveBeenLastCalledWith(true, false)
@@ -695,7 +688,7 @@ describe('RightbarSeat presentation', () => {
     expect(h.layout().expanded).toBe(false)
     expect(h.layout().mode).toBe('push')
     const stored = h.instance.getSnapshot()
-    h.updateFrame({ width: 420, viewportWidth: 1440, canShow: true })
+    h.view.update({ width: 420, viewportWidth: 1440, canShow: true })
     expect(h.instance.getSnapshot()).toBe(stored)
     expect(h.layout().tabs[tab.id]).toBeDefined()
     expect(signal.aborted).toBe(false)
@@ -706,12 +699,12 @@ describe('RightbarSeat presentation', () => {
     const h = await mountSeat()
     h.open()
     // Narrowed below the automatic fullscreen width, the command closes the panel.
-    h.updateFrame({ width: 420, viewportWidth: 700, canShow: false })
+    h.view.update({ width: 420, viewportWidth: 700, canShow: false })
     fireEvent.click(element(h.view.container, '[data-sidebar-right-mode]'))
     expect(h.layout().expanded).toBe(false)
     expect(h.layout().mode).toBe('push')
     // Widened again, the command switches the recorded mode.
-    h.updateFrame({ width: 420, viewportWidth: 1440, canShow: true })
+    h.view.update({ width: 420, viewportWidth: 1440, canShow: true })
     act(() => { h.controller.toggleExpanded() })
     fireEvent.click(element(h.view.container, '[data-sidebar-right-mode]'))
     expect(h.layout().expanded).toBe(true)
@@ -723,9 +716,9 @@ describe('RightbarSeat presentation', () => {
     h.open()
     fireEvent.click(element(h.view.container, '[data-sidebar-right-mode]'))
     const stored = h.instance.getSnapshot()
-    h.updateFrame({ width: 420, viewportWidth: 500, canShow: false })
+    h.view.update({ width: 420, viewportWidth: 500, canShow: false })
     expect(h.frame.openRightbar).toHaveBeenLastCalledWith(false, true)
-    h.updateFrame({ width: 420, viewportWidth: 1440, canShow: true })
+    h.view.update({ width: 420, viewportWidth: 1440, canShow: true })
     expect(h.frame.openRightbar).toHaveBeenLastCalledWith(true, true)
     expect(h.instance.getSnapshot()).toBe(stored)
   })
@@ -734,12 +727,12 @@ describe('RightbarSeat presentation', () => {
     const h = await mountSeat()
     const tab = h.open()
     const signal = h.bodies.get(tab.id)!.tab.signal
-    h.updateFrame({ width: 420, viewportWidth: 900, canShow: false })
+    h.view.update({ width: 420, viewportWidth: 900, canShow: false })
     expect(h.layout().expanded).toBe(false)
     expect(h.layout().tabs[tab.id]).toBeDefined()
     expect(signal.aborted).toBe(false)
     const stored = h.instance.getSnapshot()
-    h.updateFrame({ width: 420, viewportWidth: 1440, canShow: true })
+    h.view.update({ width: 420, viewportWidth: 1440, canShow: true })
     expect(h.instance.getSnapshot()).toBe(stored)
     expect(h.layout().expanded).toBe(false)
   })
@@ -830,7 +823,7 @@ describe('RightbarSeat fullscreen entry', () => {
     const slide = transition()
     vi.spyOn(element(h.view.container, '[data-sidebar-right-panel]'), 'getAnimations').mockReturnValue([slide.animation])
     h.open()
-    h.updateFrame({ width: 420, viewportWidth: 500, canShow: false })
+    h.view.update({ width: 420, viewportWidth: 500, canShow: false })
     expect(h.frame.openRightbar).not.toHaveBeenCalled()
     await act(async () => { slide.finish(); await slide.animation.finished })
     expect(h.frame.openRightbar).toHaveBeenCalledExactlyOnceWith(false, true)
diff --git a/packages/client/ui-sidebar/tests/panel-list.client.spec.tsx b/packages/client/ui-sidebar/tests/panel-list.client.spec.tsx
index 755bd31078..6d3045ca09 100644
--- a/packages/client/ui-sidebar/tests/panel-list.client.spec.tsx
+++ b/packages/client/ui-sidebar/tests/panel-list.client.spec.tsx
@@ -43,7 +43,6 @@ async function bench(collapsed = false, track?: TrackProductEvent) {
   locale.setLocale('en')
   const layout = {
     panelInfo: runtime.panelInfo,
-    frameWidth: createSnapshotStore(1920),
     beginNavigation: vi.fn(() => new AbortController().signal),
     toggleSidebar: vi.fn(),
     selectPanel: vi.fn((activePanelId: MainPanelId | null) => { runtime.panelInfo.set({ activePanelId }) }),
diff --git a/packages/client/ui-workspace/tests/workspaces-service.client.spec.ts b/packages/client/ui-workspace/tests/workspaces-service.client.spec.ts
index 78a4196051..f4e5bdcac9 100644
--- a/packages/client/ui-workspace/tests/workspaces-service.client.spec.ts
+++ b/packages/client/ui-workspace/tests/workspaces-service.client.spec.ts
@@ -291,7 +291,7 @@ function bench(options: BenchOptions = {}) {
     selectPanel: vi.fn(), retainMainPanels: vi.fn(),
     setSidebar: vi.fn(), toggleSidebar: vi.fn(), setViewportWidth: vi.fn(),
     setRightbar: vi.fn(), openRightbar: vi.fn(), closeRightbar: vi.fn(),
-  }, () => true, createSnapshotStore({ activePanelId: null }), createSnapshotStore(1920))
+  }, () => true, createSnapshotStore({ activePanelId: null }))
   const selectPanel = vi.spyOn(layout, 'selectPanel')
   ctx.provide('layout', layout)
   ctx.effect(() => () => { layout.dispose() })
diff --git a/packages/experimental/liveshare/tests/viewer-share-path.client.spec.tsx b/packages/experimental/liveshare/tests/viewer-share-path.client.spec.tsx
index 37c56c2e60..8d1bb84f82 100644
--- a/packages/experimental/liveshare/tests/viewer-share-path.client.spec.tsx
+++ b/packages/experimental/liveshare/tests/viewer-share-path.client.spec.tsx
@@ -12,7 +12,6 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { act, waitFor } from '@testing-library/react'
 import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
 import { LocaleRuntime } from '@deepseek-ai/dsh-client-locale/client'
-import { createSnapshotStore } from '@deepseek-ai/dsh-client-store'
 import { apply as menusApply, inject as menusInject } from '@deepseek-ai/dsh-client-ui-context-menu/client'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
 import { apply as resourcesApply, inject as resourcesInject } from '@deepseek-ai/dsh-client-resources/src/client/index.ts'
@@ -38,12 +37,7 @@ afterEach(async () => {
 async function boot() {
   const rt = await SlotTestRuntime.create()
   runtime = rt
-  const layout = {
-    openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: rt.panelInfo,
-    frameWidth: createSnapshotStore(1440), selectPanel: vi.fn(), toggleSidebar: vi.fn(),
-    beginNavigation: vi.fn(() => new AbortController().signal),
-  } satisfies typeof rt.ctx.layout
-  rt.ctx.provide('layout', layout)
+  rt.ctx.provide('layout', { openRightbar: vi.fn(), closeRightbar: vi.fn(), panelInfo: rt.panelInfo } as never)
   rt.ctx.provide('shortcuts', {
     register: () => () => {},
     catalog: { getSnapshot: () => SHORTCUT_CATALOG, subscribe: () => () => {} },
@@ -61,7 +55,7 @@ async function boot() {
   await rt.mount({ inject: [...menusInject], apply: menusApply })
   await rt.mount({ inject: [...sidebarInject], apply: sidebarApply })
   await rt.mount({ inject: [...inject], apply })
-  const view = rt.renderSlot('rightbar', { width: 600, viewportWidth: layout.frameWidth.getSnapshot(), canShow: true })
+  const view = rt.renderSlot('rightbar', { width: 600, viewportWidth: 1440, canShow: true })
   return { rt, view }
 }