Merge branch 'master' into xtr/trajectory-virtual-scroll

2026-08-05 20:02:53 +08:00
parent 2d2b542372 edabb3c2dc
commit 749108c2b0
11 changed files with 581 additions and 5 deletions
@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# side as of the last confirmed-consistent state. Both languages carry equal authority;
+# after editing either side, bring the other along and re-record with:
+#   pnpm run verify-translation-pairing --write .agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md
+2026-08-04-composer-tab-gutter-reservation.md: 3b28c35c1f11676e41cabde76d1b0d16c688f034
+2026-08-04-composer-tab-gutter-reservation.zh.md: 26e8b6bff73a01e6518f3918d201330c1d029876
@@ -0,0 +1,50 @@
+# Agent Note: The conversation column reserves one scrollbar gutter for every view
+
+Status: implemented
+
+English | [中文](2026-08-04-composer-tab-gutter-reservation.zh.md)
+
+## Problem
+
+The composer seat is one node in one place in the tree, and it was laid out against a different edge depending on which view tab was shown.
+
+In Chat it is a sticky CHILD of the column's scroller (`[data-conversation-scroll]`), so it rides that scroller's content box — the box a space-consuming scrollbar shortens by the bar's width. A view that declares `data-conversation-composer-overlay`, which Trajectory does, moves the column's scrolling into the view itself: the branch keyed on that attribute left the scroller `overflow: hidden` and positioned the seat absolutely, against the padding box, which no scrollbar reduces.
+
+So for as long as the transcript overflowed — the ordinary state of any session with history — the two tabs disagreed by exactly the bar's width. The input card is centred, so switching tabs moved it 4px sideways on an 8px bar, and its right-hand clearance changed by the full 8. The same displacement appeared inside Chat alone at the moment a growing transcript started to scroll, and again between the hero phase and the first scrolling turn.
+
+## Decision
+
+`.scrollBody` declares `scrollbar-gutter: stable` unconditionally, and the overlay branch declares the same box a scroll container on both axes — `overflow-x: hidden; overflow-y: auto` — instead of `overflow: hidden`.
+
+The two halves are one change. The reservation is what makes both states measure against the same width; declaring the overlay branch a scroll container is what makes the reservation reach it. `stable` rather than `auto` because `auto` reserves only while the box actually overflows, and the difference between overflowing and not is precisely the difference between the two tabs — an `auto` gutter would state the bug rather than fix it.
+
+The overlay state is a scroll container that nothing scrolls: the view fills it (`flex: 1 1 0` with its own clip) and the seat is out of flow, so no gesture and no clipping behavior changes. What changes is which declarations the engine honours. WebKit applies `scrollbar-gutter` to an `overflow-y: auto` box and ignores it on a hidden one — measured on this app's own composer layers and recorded in [the composer scrollport note](2026-07-31-composer-text-layers-share-one-scrollport.md) — so a reservation left on a hidden box would hold in Chromium and silently not in Safari.
+
+The horizontal axis is declared rather than left to compute: a box that scrolls on one axis computes `visible` on the other to `auto`, and would grow a horizontal scrollbar of its own the first time a view's content reached past the column.
+
+The reservation is worth what it costs only because the bar takes layout space here at all, which is not the browser's default behavior but this client's: `::-webkit-scrollbar` carries a width in ui-theme's sheet ([themed scrollbars](2026-07-28-themed-scrollbars-and-reserved-gutter.md)), and the sidebar's session list already reserves its own gutter for the same reason.
+
+## Alternatives considered
+
+**Inset the overlay seat by the bar's width.** The narrow reading of the bug — the two states differ by 8px, so subtract 8px from one. Rejected because the number is the engine's, not ours: the WebKit path draws the sheet's 8px bar, the Firefox path draws whatever `scrollbar-width: thin` resolves to, and a hardcoded inset would line the two states up in Chromium while drifting everywhere else. The gutter asks the engine to reserve its own bar's width, whatever that is.
+
+**Keep `overflow: hidden` and add `scrollbar-gutter: stable` alone.** The one-line version. It fixes the visible symptom on the engine the browser lane runs, and leaves it in place on Safari, with no test failing anywhere — the failure mode the second half of the change exists to prevent.
+
+**Move the composer seat out of the scroller in Chat too, making the overlay geometry the only geometry.** This deletes the difference at its root rather than reconciling it, and gives up a deliberate property: the sticky seat sits inside the scroll flow, so a wheel over the composer moves the transcript ([sticky composer](2026-07-29-sticky-composer-conversation-scroll.md)), and the fade mask above it is painted by the seat's own background. Both are owned behavior with their own coverage; rebuilding them to remove 8px of asymmetry is the larger change, not the smaller one.
+
+**Pad the column by the bar's width instead of reserving a gutter.** Padding applies whether or not a bar is present, so it costs the width unconditionally in every state, and it pins a value in the stylesheet that the engine picks at layout time. Rejected for the same reason the sidebar list rejected it.
+
+## Consequences
+
+- Chat's content column is permanently 8px narrower — in the hero phase and while the transcript is short as well, where no bar is drawn. That is the trade: one card position at every content height, instead of the widest possible column.
+- The fix covers three transitions with one declaration, because all three are the same difference: Chat ↔ Trajectory, short ↔ scrolling transcript within Chat, and hero ↔ first scrolling turn.
+- The overlay state is now a scroll container. Nothing in it can overflow today; a future view that let its content exceed the column would scroll this box instead of clipping, and would need its own clip the way the Trajectory view already has one.
+- The committed golden records the reserved band, so a change to the sheet's `::-webkit-scrollbar` width — the value that decides how wide the reservation is — arrives as a reviewable diff in this scenario as well as in the sidebar's.
+
+## Testing
+
+`apps/web/tests/composer-tab-geometry.e2e.ts` measures the input card's rectangle in both tabs, at a viewport where the card sits at its width cap and one where it shrinks with the column, and asserts the two rectangles are the same rectangle. Only a real engine reports this: jsdom gives every element a zero-sized box and no scrollbar, so a unit spec could assert the declarations exist but not that the two states land in the same place. For the same reason no CSS-text spec accompanies it — it would restate the declarations without adding a fact the browser lane does not already establish.
+
+The scenario launches chromium without Playwright's default `--hide-scrollbars`, which is load-bearing: under that argument a bar consumes no layout width, both tabs agree before this change as much as after it, and every comparison in the file holds vacuously. Measured, the pre-fix cascade leaves both bands at 0 under the argument, and at 8 and 0 with it dropped.
+
+The pre-fix cascade is then applied in the page — `scrollbar-gutter: auto` on the scroller, `overflow: hidden` on the overlay branch — and the same two tabs measured through it, which is what separates a card that does not move from a tab switch that never reached the layout. It reproduces the reported symptom as a number: 4px on each edge, half the 8px band. The golden records that control beside the fixed state, so the fixture carries the difference the change removes rather than only its absence.
@@ -0,0 +1,50 @@
+# Agent Note: 会话列为每个视图预留同一条滚动条槽
+
+Status: implemented
+
+[English](2026-08-04-composer-tab-gutter-reservation.md) | 中文
+
+## 问题
+
+composer 座位在组件树中只有一个节点、一个位置，但它究竟对齐到哪条边，取决于当前展示的是哪个视图标签页。
+
+在 Chat 中它是会话列滚动容器（`[data-conversation-scroll]`）的 sticky **子元素**，因而依附于该容器的 content box——而占布局宽度的滚动条会把这个盒子收窄一条滚动条的宽度。声明了 `data-conversation-composer-overlay` 的视图（Trajectory 即是其一）会把会话列的滚动搬进视图自身：以该属性为条件的那条分支把滚动容器留作 `overflow: hidden`，并把座位改为绝对定位——对齐的是 padding box，而滚动条从不收窄这个盒子。
+
+于是只要对话记录超出一屏——任何带历史的会话的常态——两个标签页就恰好相差一条滚动条的宽度。输入卡片是居中的，因此在 8px 的滚动条下切换标签页会让它横向移动 4px，而右侧留白整整变化 8px。同一位移也出现在 Chat 内部：对话增长到开始滚动的那一刻，以及从 hero 态进入第一个可滚动轮次时。
+
+## 决策
+
+`.scrollBody` 无条件声明 `scrollbar-gutter: stable`，overlay 分支则把同一个盒子在两个轴向上都声明为滚动容器——`overflow-x: hidden; overflow-y: auto`——而不再是 `overflow: hidden`。
+
+这两半是同一处改动。预留使两种状态依附于同一个宽度；把 overlay 分支声明为滚动容器，才使这条预留真正抵达它。选 `stable` 而非 `auto`，是因为 `auto` 只在盒子确实溢出时才预留，而"溢出与否"恰恰就是两个标签页之间的那点差别——`auto` 的写法只是把缺陷重述一遍，并不能修掉它。
+
+overlay 状态是一个没有任何东西会去滚动它的滚动容器：视图把它填满（`flex: 1 1 0`，且自带裁剪），座位不在常规流中，因此没有任何手势与裁剪行为发生变化。变化的是引擎会认哪些声明。WebKit 对 `overflow-y: auto` 的盒子应用 `scrollbar-gutter`，对 hidden 的盒子则忽略它——这是在本应用 composer 自身的图层上实测所得，并记录于 [composer 滚动容器记录](2026-07-31-composer-text-layers-share-one-scrollport.md)——所以把预留留在一个 hidden 盒子上，会在 Chromium 上成立，在 Safari 上悄无声息地不成立。
+
+横向轴是显式声明的，而不是交给推导：单轴滚动的盒子会把另一轴的 `visible` 计算为 `auto`，于是只要某个视图的内容第一次伸出列外，它就会长出自己的横向滚动条。
+
+这条预留之所以值回它的代价，前提是滚动条在这里确实占布局空间——这并非浏览器的默认行为，而是本客户端的选择：ui-theme 的样式表给 `::-webkit-scrollbar` 声明了宽度（[滚动条主题化](2026-07-28-themed-scrollbars-and-reserved-gutter.md)），侧边栏的会话列表也正是出于同一原因预留了自己的滚动条槽。
+
+## 曾考虑的替代方案
+
+**把 overlay 座位按滚动条宽度内缩。** 这是对该缺陷最窄的一种解读——两种状态差 8px，那就从一侧减去 8px。之所以否决，是因为这个数字属于引擎而不属于我们：WebKit 路径绘制样式表里的 8px 滚动条，Firefox 路径绘制 `scrollbar-width: thin` 解析出的宽度，硬编码的内缩会让两种状态在 Chromium 上对齐、在别处继续漂移。滚动条槽是请引擎按它自己那条滚动条的宽度去预留，无论那是多少。
+
+**保留 `overflow: hidden`，只加 `scrollbar-gutter: stable`。** 单行版本。它能在浏览器车道所用的引擎上修掉可见症状，却把症状原封不动留在 Safari 上，而且任何测试都不会失败——这正是改动的后一半所要防的失效模式。
+
+**让 Chat 的 composer 座位也移出滚动容器，使 overlay 的几何成为唯一的几何。** 这是从根上删掉差异，而不是调和它，代价是放弃一项刻意的性质：sticky 座位位于滚动流之内，因此在 composer 上滚轮会带动对话记录（[sticky composer](2026-07-29-sticky-composer-conversation-scroll.md)），其上方的渐隐遮罩也由座位自身的背景绘制。两者都是有主、有覆盖的既有行为；为了消除 8px 的不对称而重建它们，是更大的改动而非更小的。
+
+**给会话列加上一条滚动条宽度的内边距，而不是预留滚动条槽。** 内边距无论是否存在滚动条都会生效，因此在每种状态下都无条件付出这份宽度，而且它把一个由引擎在布局期决定的值钉死在样式表里。否决理由与侧边栏列表当初否决它时相同。
+
+## 后果
+
+- Chat 的内容列永久变窄 8px——hero 态与对话记录尚短、根本不绘制滚动条时同样如此。这就是这笔交易：以最宽的列换取卡片在任何内容高度下都只有一个位置。
+- 一条声明覆盖三种切换，因为这三者本就是同一个差异：Chat ↔ Trajectory、Chat 内部的短对话 ↔ 可滚动对话，以及 hero ↔ 第一个可滚动轮次。
+- overlay 状态现在是一个滚动容器。今天其中没有任何内容会溢出；将来若有视图允许自身内容超出会话列，这个盒子会滚动而不是裁剪，那个视图就需要像 Trajectory 视图那样自带裁剪。
+- 提交的 golden 记录了预留的带宽，因此样式表中 `::-webkit-scrollbar` 宽度的变化——决定这条预留有多宽的那个值——会在本场景中与在侧边栏场景中一样，以可评审的 diff 形式出现。
+
+## 测试
+
+`apps/web/tests/composer-tab-geometry.e2e.ts` 在两个标签页下测量输入卡片的矩形，分别取卡片处于宽度上限的视口与卡片随列收缩的视口，并断言这两个矩形是同一个矩形。只有真实引擎能报告这件事：jsdom 给每个元素的盒子尺寸都是零，也没有滚动条，因此单元测试只能断言那些声明存在，无法断言两种状态落在同一位置。出于同一原因，本次没有附带读取 CSS 文本的单元测试——它只会把声明复述一遍，并不会补上浏览器车道尚未确立的事实。
+
+该场景启动 chromium 时去掉了 Playwright 默认的 `--hide-scrollbars`，这一点是承重的：带上该参数时滚动条不占任何布局宽度，两个标签页在改动前后同样一致，文件中的每一处比较都会空洞地通过。实测：带上该参数时，改动前的层叠让两侧带宽都是 0；去掉它则是 8 与 0。
+
+随后，改动前的层叠会被注入页面——滚动容器上 `scrollbar-gutter: auto`，overlay 分支上 `overflow: hidden`——并在其下测量同样的两个标签页，这正是把"卡片确实没动"与"标签页切换根本没到达布局"区分开的那一步。它把上报的症状复现为一个数字：每条边 4px，恰是 8px 带宽的一半。golden 把这份对照与修复后的状态并排记录，因此 fixture 承载的是这次改动所消除的那个差值，而不仅仅是它的缺席。
@@ -0,0 +1,420 @@
+// Web e2e scenario: the input card holds one horizontal position across the
+// Chat and Trajectory tabs.
+//
+// The composer seat is the same node in both tabs, but it measures itself
+// against a different edge in each (see
+// packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css).
+// In Chat it is a sticky CHILD of the column's scroller, so it rides that
+// scroller's content box — the box a space-consuming scrollbar shortens. A view
+// that opts into a composer overlay (`data-conversation-composer-overlay`, which
+// Trajectory declares and which moves the column's own scrolling into the view)
+// gets an absolutely positioned seat instead, laid out against the padding box,
+// which the scrollbar never reduces.
+//
+// So the two tabs disagreed by exactly the bar's width for as long as the
+// transcript overflowed: the card jumped sideways on every tab switch, and
+// inside Chat alone at the moment a growing transcript started to scroll. The
+// column now reserves the gutter unconditionally (`scrollbar-gutter: stable`)
+// and states the overlay branch as a scroll container on the same axes, so both
+// edges are the same edge.
+//
+// Only a real engine can show this. The seat's geometry is layout: jsdom gives
+// every element a zero-sized box and reports no scrollbar at all, so a unit spec
+// can assert the declarations exist but not that the two states land in the same
+// place. What is asserted here is the user-visible fact — the card does not move
+// — measured as the distance between the two tabs' card rectangles.
+//
+// The browser is launched WITHOUT Playwright's default `--hide-scrollbars`,
+// which is load-bearing rather than incidental. Under that argument a scroll
+// container's bar consumes no layout width at all, so the two tabs agree before
+// this change as much as after it and every comparison below holds vacuously —
+// measured: the pre-fix cascade leaves both tabs' bands at 0 there, against 8
+// and 0 with the argument dropped. Dropping it is also the faithful
+// configuration: ui-theme's scrollbar.css gives `::-webkit-scrollbar` a width,
+// and a bar that occupies layout space is what the product actually draws.
+//
+// The scenario runs that pre-fix cascade in the page — `scrollbar-gutter: auto`
+// on the scroller, `overflow: hidden` on the overlay branch — and measures the
+// same two tabs through it, which is what keeps the equal rectangles above from
+// being explained by a tab switch that never reached the layout. It is the
+// reported symptom as a number: the card moves 4px, half the 8px band, on each
+// edge.
+//
+// Zero model calls: a seeded cold session renders from its log, and switching
+// tabs asks the host for nothing. A stray stream would fail loud with NO_ADAPTER.
+import { fileURLToPath } from 'node:url'
+import { join } from 'node:path'
+import type { Browser, Page } from 'playwright'
+import { chromium } from 'playwright'
+import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
+import { createChatScrollFixture } from './chat-scroll-fixture.ts'
+import {
+  assertFixtureInventory, compareOrRefreshGolden, launchWebScaffold, seedSession, watchConsole,
+  webSnapshotMode, type WebScaffold,
+} from './scaffold.ts'
+import { newEnglishPage, saveFailureShot } from './support.ts'
+
+const SNAPSHOT_DIR = fileURLToPath(new URL('./snapshots/composer-tab-geometry', import.meta.url))
+/**
+ * Committed golden of where the input card sits in each tab, at a wide viewport
+ * (card at its width cap) and a narrow one (card shrinking with the column).
+ *
+ * Absolute coordinates are deliberately absent: they depend on the sidebar's
+ * laid-out width and on font metrics, so committing them would produce a fixture
+ * that has to be re-recorded per platform. What is recorded is the distance
+ * between the two tabs' rectangles, which is zero when the reservation holds and
+ * the bar's width when it does not — including under the control, so the golden
+ * carries the difference the fix removes rather than only its absence.
+ */
+const GEOMETRY_EXPECTED = join(SNAPSHOT_DIR, 'geometry.expected.md')
+const MODE = webSnapshotMode()
+
+/** Long enough that the transcript overflows the lane's 1000px viewport; the scenario asserts the overflow rather than trusting it. */
+const FIXTURE = createChatScrollFixture({
+  markerPrefix: 'TAB_GEOMETRY',
+  title: 'COMPOSER_TAB_GEOMETRY long session',
+  turns: 24,
+})
+const SEED_ID = 'composer-tab-geometry-web-e2e'
+
+/** Viewport widths the scenario measures at: the card capped, and the card shrinking with the column. */
+const WIDE_VIEWPORT = { width: 1680, height: 1000 }
+const NARROW_VIEWPORT = { width: 800, height: 1000 }
+
+/**
+ * Resize to one measurement viewport after the responsive sidebar and center
+ * column finish their track transition.
+ * @param page - the page under test.
+ * @param viewport - the viewport dimensions to apply.
+ * @param sidebarCollapsed - the sidebar state expected at this width.
+ */
+async function setMeasuredViewport(
+  page: Page,
+  viewport: { width: number; height: number },
+  sidebarCollapsed: boolean,
+): Promise<void> {
+  await page.setViewportSize(viewport)
+  await page.locator('[data-sidebar-collapsed="true"]').waitFor({
+    state: sidebarCollapsed ? 'attached' : 'detached',
+    timeout: 10_000,
+  })
+  await page.locator('[data-conversation-scroll]').evaluate(async (host) => {
+    const deadline = performance.now() + 5_000
+    let previous = host.getBoundingClientRect().width
+    let stableFrames = 0
+    while (performance.now() < deadline) {
+      await new Promise<void>((resolve) => { requestAnimationFrame(() => { resolve() }) })
+      const current = host.getBoundingClientRect().width
+      stableFrames = Math.abs(current - previous) < 0.01 ? stableFrames + 1 : 0
+      if (stableFrames >= 3) return
+      previous = current
+    }
+    throw new Error('conversation width did not settle after the viewport changed')
+  })
+}
+
+/**
+ * The pre-fix cascade, injected into the page: the reservation dropped and the
+ * overlay branch back to a hidden box. `!important` beats the module rules
+ * without a rebuild, and the id lets the control be lifted again in the same
+ * session.
+ */
+const CONTROL_STYLE_ID = 'composer-tab-geometry-control'
+const CONTROL_CSS = `
+[data-conversation-scroll] { scrollbar-gutter: auto !important; }
+[data-conversation-scroll]:has([data-conversation-composer-overlay]) { overflow: hidden !important; }
+`
+
+/** The column scroller and the input card as the browser lays them out, in one tab. */
+interface TabMetrics {
+  /** Resolved `scrollbar-gutter` on the column's scroller. */
+  gutter: string
+  /** Resolved `overflow-x`: `hidden` in both states, so neither grows a horizontal bar. */
+  overflowX: string
+  /** Resolved `overflow-y`: `auto` in both states, which is the form WebKit honours the gutter on. */
+  overflowY: string
+  /** Border-box width minus client width: the space the scrollbar takes out of the content area. */
+  band: number
+  /** True when the column's scroller actually scrolls — only Chat does. */
+  scrolls: boolean
+  /** Left edge of the input card in viewport coordinates. */
+  cardLeft: number
+  /** Right edge of the input card. */
+  cardRight: number
+  /** Width of the input card, capped at the composer card max width. */
+  cardWidth: number
+}
+
+/** One tab's metrics beside the other's, plus the distances between them. */
+interface TabComparison {
+  chat: TabMetrics
+  trajectory: TabMetrics
+  /** Distance between the two tabs' card left edges: 0 when the card holds its position. */
+  leftShift: number
+  /** Distance between the two tabs' card right edges. */
+  rightShift: number
+  /** Difference between the two tabs' card widths. */
+  widthShift: number
+}
+
+/**
+ * Measure the column scroller and the input card in the tab currently shown.
+ * @param page - the page under test.
+ * @returns the scroller's resolved overflow style and the card's rectangle.
+ */
+function measureTab(page: Page): Promise<TabMetrics> {
+  return page.evaluate(() => {
+    const host = document.querySelector<HTMLElement>('[data-conversation-scroll]')
+    if (host === null) throw new Error('conversation column scroller not in the DOM')
+    const card = host.querySelector<HTMLElement>('[data-composer-seat] [data-composer-card]')
+    if (card === null) throw new Error('no input card inside the composer seat')
+    const style = getComputedStyle(host)
+    const hostRect = host.getBoundingClientRect()
+    const cardRect = card.getBoundingClientRect()
+    return {
+      gutter: style.scrollbarGutter,
+      overflowX: style.overflowX,
+      overflowY: style.overflowY,
+      band: hostRect.width - host.clientWidth,
+      scrolls: host.scrollHeight > host.clientHeight,
+      cardLeft: cardRect.left,
+      cardRight: cardRect.right,
+      cardWidth: cardRect.width,
+    }
+  })
+}
+
+/**
+ * Show one tab and wait for the view that owns it to be laid out.
+ * @param page - the page under test.
+ * @param tab - the tab to show.
+ */
+async function showTab(page: Page, tab: 'Chat' | 'Trajectory'): Promise<void> {
+  await page.getByRole('tab', { name: tab, exact: true }).click()
+  if (tab === 'Trajectory') await page.getByLabel('Trajectory timeline').waitFor({ timeout: 30_000 })
+  else await page.locator('[data-conversation-scroll] [data-chat-anchor-key]').first().waitFor({ timeout: 30_000 })
+  // Both measurements are taken after a paint, so a rectangle read mid-transition
+  // cannot be reported as a shift the cascade did not cause.
+  await page.evaluate(() => new Promise<void>((settle) => {
+    requestAnimationFrame(() => { requestAnimationFrame(() => { settle() }) })
+  }))
+}
+
+/**
+ * Measure both tabs and the distances between them, leaving Chat shown.
+ * @param page - the page under test.
+ * @returns each tab's metrics and the card's displacement between them.
+ */
+async function compareTabs(page: Page): Promise<TabComparison> {
+  await showTab(page, 'Chat')
+  const chat = await measureTab(page)
+  await showTab(page, 'Trajectory')
+  const trajectory = await measureTab(page)
+  await showTab(page, 'Chat')
+  return {
+    chat,
+    trajectory,
+    leftShift: Math.abs(trajectory.cardLeft - chat.cardLeft),
+    rightShift: Math.abs(trajectory.cardRight - chat.cardRight),
+    widthShift: Math.abs(trajectory.cardWidth - chat.cardWidth),
+  }
+}
+
+/**
+ * Run the pre-fix cascade in the page for one measurement, then lift it.
+ * @param page - the page under test.
+ * @returns the comparison as the column laid out before this change.
+ */
+async function compareTabsWithoutReservation(page: Page): Promise<TabComparison> {
+  await page.evaluate(({ id, css }) => {
+    const style = document.createElement('style')
+    style.id = id
+    style.textContent = css
+    document.head.append(style)
+  }, { id: CONTROL_STYLE_ID, css: CONTROL_CSS })
+  try {
+    return await compareTabs(page)
+  } finally {
+    await page.evaluate((id) => { document.getElementById(id)?.remove() }, CONTROL_STYLE_ID)
+  }
+}
+
+/**
+ * Open the seeded session from the sidebar search.
+ *
+ * Cold summaries carry the temp workspace's basename, so the persisted first
+ * message is the stable identity to search for, and the query itself drives the
+ * lazy content-index reconciliation. Hand-rolled polling because `expect.poll`
+ * is test-scoped and this runs in `beforeAll`.
+ * @param page - the page under test.
+ */
+async function openSeededSession(page: Page): Promise<void> {
+  const search = page.getByRole('textbox', { name: 'Search name, keywords...', exact: true })
+  await search.fill(FIXTURE.markers.user(1))
+  const results = page.getByRole('tree', { name: 'Search results' }).getByRole('treeitem')
+  const deadline = Date.now() + 60_000
+  for (;;) {
+    if (await results.count() === 1) break
+    if (Date.now() > deadline) throw new Error('seeded session never appeared in the sidebar search results')
+    await page.waitForTimeout(200)
+  }
+  await results.click()
+}
+
+/**
+ * Render the golden body.
+ * @param wide - comparison at the viewport where the card sits at its width cap.
+ * @param narrow - comparison at the viewport where the card shrinks with the column.
+ * @param control - comparison at the wide viewport with the reservation removed.
+ * @returns the golden body, without a trailing newline.
+ */
+function renderGeometry(wide: TabComparison, narrow: TabComparison, control: TabComparison): string {
+  const section = (name: string, comparison: TabComparison): string[] => [
+    `## ${name}`,
+    '',
+    `- Chat: scrollbar-gutter ${comparison.chat.gutter}, overflow ${comparison.chat.overflowX}/${comparison.chat.overflowY}`,
+    `- Chat scroller scrolls: ${String(comparison.chat.scrolls)}`,
+    `- Chat reserved band: ${String(comparison.chat.band)}px`,
+    `- Trajectory: scrollbar-gutter ${comparison.trajectory.gutter}, overflow ${comparison.trajectory.overflowX}/${comparison.trajectory.overflowY}`,
+    `- Trajectory scroller scrolls: ${String(comparison.trajectory.scrolls)}`,
+    `- Trajectory reserved band: ${String(comparison.trajectory.band)}px`,
+    `- input card left edge moves between tabs: ${String(comparison.leftShift)}px`,
+    `- input card right edge moves between tabs: ${String(comparison.rightShift)}px`,
+    `- input card width changes between tabs: ${String(comparison.widthShift)}px`,
+    '',
+  ]
+  return [
+    '# Input card position across the Chat and Trajectory tabs',
+    '',
+    ...section(`Wide viewport (${String(WIDE_VIEWPORT.width)}px, card at its cap)`, wide),
+    ...section(`Narrow viewport (${String(NARROW_VIEWPORT.width)}px, card shrinking with the column)`, narrow),
+    ...section('Wide viewport, reservation removed in the page (control)', control),
+  ].join('\n').trimEnd()
+}
+
+describe('web e2e: input card position across view tabs', () => {
+  let scaffold: WebScaffold
+  let browser: Browser
+  let page: Page
+  let tripwire: ReturnType<typeof watchConsole>
+
+  beforeAll(async () => {
+    scaffold = await launchWebScaffold({})
+    await seedSession(scaffold, FIXTURE.log, SEED_ID)
+    // Scrollbars must take layout space here or the scenario proves nothing;
+    // see the file header for the measurement behind dropping this argument.
+    browser = await chromium.launch({ ignoreDefaultArgs: ['--hide-scrollbars'] })
+    page = await newEnglishPage(browser, WIDE_VIEWPORT.height)
+    tripwire = watchConsole(page)
+    await page.goto(scaffold.baseUrl, { waitUntil: 'load' })
+    await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
+    await openSeededSession(page)
+    await page.getByRole('tab', { name: 'Chat', exact: true }).waitFor({ timeout: 30_000 })
+    await page.getByText(FIXTURE.markers.assistant(FIXTURE.turns), { exact: false }).last()
+      .waitFor({ timeout: 30_000 })
+  }, 180_000)
+
+  afterAll(async () => {
+    await browser?.close()
+    await scaffold?.close()
+  })
+
+  it('reserves the same gutter in both tabs while the transcript scrolls', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-composer-tab-geometry-band'))
+    await setMeasuredViewport(page, WIDE_VIEWPORT, false)
+    // Vacuity guard, in two parts. A transcript that does not overflow gives
+    // Chat no scrollbar, and a hidden or overlaid bar gives it no width; either
+    // would make the tabs agree without the reservation doing anything.
+    await expect.poll(async () => (await measureTab(page)).scrolls, { timeout: 10_000 }).toBe(true)
+    const comparison = await compareTabs(page)
+    expect(comparison.chat.band).toBeGreaterThan(0)
+    // The reservation reaches both states, which is the whole change: the same
+    // band, on a box that scrolls and on one that only holds a view.
+    expect(comparison.chat.gutter).toBe('stable')
+    expect(comparison.trajectory.gutter).toBe('stable')
+    expect(comparison.trajectory.band).toBe(comparison.chat.band)
+    // Declared as a scroll container on both axes rather than left to compute:
+    // `overflow: hidden` would drop the reservation in WebKit, and a `visible`
+    // horizontal axis computes to `auto` beside a scrolling one.
+    expect(comparison.trajectory.overflowY).toBe('auto')
+    expect(comparison.trajectory.overflowX).toBe('hidden')
+    // Only Chat scrolls this box; the Trajectory view owns its own scrollers.
+    expect(comparison.trajectory.scrolls).toBe(false)
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
+  it('holds the input card in place when the tab changes', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-composer-tab-geometry-wide'))
+    await setMeasuredViewport(page, WIDE_VIEWPORT, false)
+    const comparison = await compareTabs(page)
+    // The reported symptom as a number. At this viewport the card sits at its
+    // width cap, so the pre-fix shift showed up as a centring difference — half
+    // the band on each edge — rather than as a width change.
+    expect(comparison.leftShift).toBe(0)
+    expect(comparison.rightShift).toBe(0)
+    expect(comparison.widthShift).toBe(0)
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
+  it('holds the input card in place at a viewport where it shrinks with the column', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-composer-tab-geometry-narrow'))
+    await setMeasuredViewport(page, WIDE_VIEWPORT, false)
+    const capped = await measureTab(page)
+    await setMeasuredViewport(page, NARROW_VIEWPORT, true)
+    const comparison = await compareTabs(page)
+    // The other geometry, and a different failure: below the cap the card takes
+    // the column's width, so an unreserved gutter changed its WIDTH by the whole
+    // band instead of shifting it by half. Asserted against the capped
+    // measurement rather than against the cap's pixel value, which belongs to
+    // the stylesheet.
+    expect(comparison.chat.cardWidth).toBeLessThan(capped.cardWidth)
+    expect(comparison.leftShift).toBe(0)
+    expect(comparison.rightShift).toBe(0)
+    expect(comparison.widthShift).toBe(0)
+    await setMeasuredViewport(page, WIDE_VIEWPORT, false)
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
+  it('moves the card again once the reservation is removed in the page', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-composer-tab-geometry-control'))
+    await setMeasuredViewport(page, WIDE_VIEWPORT, false)
+    // The control: without it, equal rectangles could also mean the tab switch
+    // never reached the layout. Under the pre-fix cascade the Chat scroller keeps
+    // its bar and the Trajectory branch goes back to a hidden box with none, and
+    // the card moves by half the band on each edge.
+    const comparison = await compareTabsWithoutReservation(page)
+    expect(comparison.chat.gutter).toBe('auto')
+    expect(comparison.chat.band).toBeGreaterThan(0)
+    expect(comparison.trajectory.band).toBe(0)
+    expect(comparison.leftShift).toBe(comparison.chat.band / 2)
+    expect(comparison.rightShift).toBe(comparison.chat.band / 2)
+    // Restoring the sheet restores the fix, so the control cannot leak into the
+    // remaining measurements.
+    const restored = await compareTabs(page)
+    expect(restored.leftShift).toBe(0)
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
+  it('matches the committed tab geometry golden', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-composer-tab-geometry-golden'))
+    await setMeasuredViewport(page, WIDE_VIEWPORT, false)
+    const wide = await compareTabs(page)
+    await setMeasuredViewport(page, NARROW_VIEWPORT, true)
+    const narrow = await compareTabs(page)
+    await setMeasuredViewport(page, WIDE_VIEWPORT, false)
+    const control = await compareTabsWithoutReservation(page)
+    await compareOrRefreshGolden(GEOMETRY_EXPECTED, renderGeometry(wide, narrow, control), MODE)
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
+  it('commits exactly the fixtures it reads', async () => {
+    // The seeded session is generated in-process, so the geometry golden is the
+    // whole inventory.
+    await assertFixtureInventory(SNAPSHOT_DIR, ['geometry.expected.md'])
+  })
+
+  it.skipIf(MODE === 'record')('issued zero model calls and stayed clean', () => {
+    expect(tripwire.warnings).toEqual([])
+    expect(tripwire.pageErrors).toEqual([])
+  })
+})
@@ -0,0 +1,37 @@
+# Input card position across the Chat and Trajectory tabs
+
+## Wide viewport (1680px, card at its cap)
+
+- Chat: scrollbar-gutter stable, overflow auto/auto
+- Chat scroller scrolls: true
+- Chat reserved band: 8px
+- Trajectory: scrollbar-gutter stable, overflow hidden/auto
+- Trajectory scroller scrolls: false
+- Trajectory reserved band: 8px
+- input card left edge moves between tabs: 0px
+- input card right edge moves between tabs: 0px
+- input card width changes between tabs: 0px
+
+## Narrow viewport (800px, card shrinking with the column)
+
+- Chat: scrollbar-gutter stable, overflow auto/auto
+- Chat scroller scrolls: true
+- Chat reserved band: 8px
+- Trajectory: scrollbar-gutter stable, overflow hidden/auto
+- Trajectory scroller scrolls: false
+- Trajectory reserved band: 8px
+- input card left edge moves between tabs: 0px
+- input card right edge moves between tabs: 0px
+- input card width changes between tabs: 0px
+
+## Wide viewport, reservation removed in the page (control)
+
+- Chat: scrollbar-gutter auto, overflow auto/auto
+- Chat scroller scrolls: true
+- Chat reserved band: 8px
+- Trajectory: scrollbar-gutter auto, overflow hidden/hidden
+- Trajectory scroller scrolls: false
+- Trajectory reserved band: 0px
+- input card left edge moves between tabs: 4px
+- input card right edge moves between tabs: 4px
+- input card width changes between tabs: 0px
@@ -63,6 +63,7 @@
    "tests/chat-scroll-contract.e2e.ts",
    "tests/chat-long-interactions.e2e.ts",
    "tests/chat-continuous-conversation.e2e.ts",
+    "tests/composer-tab-geometry.e2e.ts",
    "tests/complex-history.perf.ts"
  ],
  "references": [
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-conversation/README.md
-README.md: d7433c151b7ab8da66d319ce71dd24f533739176
-README.zh.md: 338cb3a8673a24a387a96c4c5e65a528e01c4c68
+README.md: 3b4d2f2c1d7934d619768f2b3b355c8c585290cc
+README.zh.md: e3664a0d621214cced2d8a0d7d5d5f7800f15d90
@@ -6,7 +6,7 @@ Conversation domain: skeleton (header/tabs/composer/empty state), chat view (gro

 Compaction renders as one collapsed row at the checkpoint's flow position without replacing the transcript above it. The disclosure renders the checkpoint's `compact/summary` provenance; when that event is outside the loaded window, the row remains visible but non-expandable. The framed checkpoint payload is model-facing and never renders.

-The resident conversation shell survives no-session and session transitions. Without a current session it renders a disabled input bar; its root-scoped `conversation.hero.workspace` slot hosts the Workspace picker. Selecting a Workspace connects or reuses its Host-owned blank session and opens that session without replacing the shell. Blank sessions render the same composer body as active sessions, while the InputHub carries drafts across Workspace switches and mirrors them into the session store. In the active phase the session header shows only the current session title and view tabs as ordinary column chrome; fork lineage remains session data and is not projected into the header. Beneath it a scrollport (`data-conversation-scroll`) holds the flowing views and the sticky composer stack (stats dock + input docks + bar). Wheel over the textarea chains: the capped draft scrolls locally until its edge, then forwards to that host.
+The resident conversation shell survives no-session and session transitions. Without a current session it renders a disabled input bar; its root-scoped `conversation.hero.workspace` slot hosts the Workspace picker. Selecting a Workspace connects or reuses its Host-owned blank session and opens that session without replacing the shell. Blank sessions render the same composer body as active sessions, while the InputHub carries drafts across Workspace switches and mirrors them into the session store. In the active phase the session header shows only the current session title and view tabs as ordinary column chrome; fork lineage remains session data and is not projected into the header. Beneath it a scrollport (`data-conversation-scroll`) holds the flowing views and the sticky composer stack (stats dock + input docks + bar). That scrollport reserves its scrollbar gutter unconditionally, and a view opting into a composer overlay leaves it a scroll container, so the input card keeps one horizontal position whether or not the transcript scrolls and whichever view tab is shown ([decision](../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)). Wheel over the textarea chains: the capped draft scrolls locally until its edge, then forwards to that host.

 The view ring is a slot: the conversation registration declares the session-scoped `'conversation.view'` list in its `children` table, ConversationRoot renders the active entry through its renderSlot share (`only: <active id>`), and view tabs project from registration options (`id`/`order`/`label`). The chat view is this package's own entry; plugins such as ui-trajectory contribute tabs through `ctx.slots.register`, and each view owns its chrome.

@@ -6,7 +6,7 @@

 压缩（compaction）在检查点自身的消息流位置渲染为一行折叠标记，不替换其上方的 transcript（文本记录）。展开内容来自检查点溯源的 `compact/summary`；该事件位于已加载窗口之外时，标记仍然可见但不可展开。面向模型的带框检查点载荷绝不渲染。

-常驻会话壳会跨无会话与会话状态切换而保留。没有当前会话时，它会渲染禁用输入栏；其根作用域的 `conversation.hero.workspace` slot 承载 Workspace 选择器。选择 Workspace 会连接或复用由 Host 拥有的空白会话，并在不替换会话壳的情况下打开该会话。空白会话与活跃会话渲染相同的输入区主体；InputHub 则在 Workspace 切换间携带草稿，并将草稿镜像到会话 store。活跃阶段，会话标题栏作为普通列 chrome，仅显示当前会话标题和视图标签；fork 谱系仍保留为会话数据，不投影到标题栏。其下滚动容器（`data-conversation-scroll`）承载流动排版的各视图与 sticky 编辑器栈（统计 dock＋输入区 dock＋输入栏）。textarea 上的滚轮会链式处理：限高草稿先在本地滚动，到达边缘后再转交给该宿主。
+常驻会话壳会跨无会话与会话状态切换而保留。没有当前会话时，它会渲染禁用输入栏；其根作用域的 `conversation.hero.workspace` slot 承载 Workspace 选择器。选择 Workspace 会连接或复用由 Host 拥有的空白会话，并在不替换会话壳的情况下打开该会话。空白会话与活跃会话渲染相同的输入区主体；InputHub 则在 Workspace 切换间携带草稿，并将草稿镜像到会话 store。活跃阶段，会话标题栏作为普通列 chrome，仅显示当前会话标题和视图标签；fork 谱系仍保留为会话数据，不投影到标题栏。其下滚动容器（`data-conversation-scroll`）承载流动排版的各视图与 sticky 编辑器栈（统计 dock＋输入区 dock＋输入栏）。该滚动容器无条件预留自己的滚动条槽，选用编辑器 overlay 的视图也仍把它保留为滚动容器，因此无论对话记录是否滚动、无论展示哪个视图标签，输入卡片都保持同一个横向位置（[决策](../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)）。textarea 上的滚轮会链式处理：限高草稿先在本地滚动，到达边缘后再转交给该宿主。

 视图环是一个 slot：会话注册在 `children` 表中声明 Session scope 的 `'conversation.view'` 列表，ConversationRoot 通过 renderSlot share 渲染活跃配置项（`only: <active id>`），视图标签页则从注册选项（`id`／`order`／`label`）投影而来。聊天视图是该包自身的配置项；ui-trajectory 等插件通过 `ctx.slots.register` 贡献标签页，每个视图负责自己的 chrome。

@@ -191,6 +191,11 @@
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
+  /* Reserved unconditionally: the composer seat rides this box's content box in
+     Chat and its padding box under a view's composer overlay, so an `auto`
+     gutter moves the input card sideways by the bar's width whenever the two
+     differ ([decision](../../../../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)). */
+  scrollbar-gutter: stable;
 }

 .root[data-phase='active'] .viewArea {
@@ -221,7 +226,13 @@
   ownership of the seat geometry and its active-phase precedence. */
 .scrollBody:has([data-conversation-composer-overlay]) {
  position: relative;
-  overflow: hidden;
+  /* A clipping box nothing scrolls out of, stated as a scroll container on both
+     axes rather than `overflow: hidden`: WebKit honours the reservation above
+     only in the `overflow-y: auto` form, and a single-axis scroller computes
+     the other axis to `auto`
+     ([decision](../../../../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)). */
+  overflow-x: hidden;
+  overflow-y: auto;
 }

 .scrollBody:has([data-conversation-composer-overlay]) > .viewArea {
@@ -50,6 +50,7 @@
    "apps/web/tests/chat-scroll-contract.e2e.ts",
    "apps/web/tests/chat-long-interactions.e2e.ts",
    "apps/web/tests/chat-continuous-conversation.e2e.ts",
+    "apps/web/tests/composer-tab-geometry.e2e.ts",
    "apps/web/tests/complex-history.perf.ts",
    "apps/web/stress-tests/reasoning-chunks.stress.ts",
    "apps/cli/tests/**/*.ts",