From a7b7066267d35da4c3051b8b3eb30d6f59d90f76 Mon Sep 17 00:00:00 2001
From: creatixchu <creatixchu@deepseek.com>
Date: Fri, 31 Jul 2026 11:53:04 +0800
Subject: [PATCH] fix(web): scroll the composer's glyph layer with its textarea
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A composer draft past the 14-line cap could not be scrolled: the caret and
the selection moved, but the words stayed frozen at line 1, so the tail of
anything longer than the cap was unreachable while writing it.

The composer paints its text in two stacked layers. The textarea owns the
value, the selection and the caret but renders its own glyphs transparent;
every visible character is painted by the decoration backdrop beneath it,
which also carries the claim-token highlight, the chips and the ghost hint.
The backdrop is `inset: 0; overflow: hidden` — clipped, not scrolled — and
nothing linked its offset to the textarea's. Below the cap both layers rest
at 0, which is why the defect hid behind every short-draft screenshot and
fixture.

InputBar now mirrors the textarea's scrollTop onto the backdrop, from a
`scroll` listener (every gesture and every caret-driven scroll) and from a
layout effect keyed on the committed draft (an edit reflows both layers
without necessarily firing a scroll event).

Scrolling is layout, so jsdom cannot show this: the unit spec stubs both
offsets and proves the mirroring paths run, while a new browser scenario
measures the user-visible fact against the built client with a DOM Range
over the backdrop's own text — after a wheel gesture over a 40-line draft
the last line is on screen and the first has scrolled out. Confirmed both
directions: with the mirroring reverted and the packages rebuilt, the
golden reads `last draft line is on screen: false` while `textarea moved:
true`.
---
 ...-glyph-layer-tracks-the-textarea.i18n.yaml |   6 +
 ...omposer-glyph-layer-tracks-the-textarea.md |  53 ++++
 ...oser-glyph-layer-tracks-the-textarea.zh.md |  53 ++++
 apps/web/tests/composer-draft-scroll.e2e.ts   | 278 ++++++++++++++++++
 .../geometry.expected.md                      |  17 ++
 apps/web/tsconfig.json                        |   3 +-
 .../src/client/skeleton/InputBar.tsx          |  43 ++-
 .../ui-conversation/tests/input-bar.spec.tsx  |  16 +
 tsconfig.host.json                            |   1 +
 9 files changed, 461 insertions(+), 9 deletions(-)
 create mode 100644 .agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.i18n.yaml
 create mode 100644 .agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.md
 create mode 100644 .agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.zh.md
 create mode 100644 apps/web/tests/composer-draft-scroll.e2e.ts
 create mode 100644 apps/web/tests/snapshots/composer-draft-scroll/geometry.expected.md

diff --git a/.agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.i18n.yaml b/.agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.i18n.yaml
new file mode 100644
index 0000000000..15e96b5788
--- /dev/null
+++ b/.agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.i18n.yaml
@@ -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-07-31-composer-glyph-layer-tracks-the-textarea.md
+2026-07-31-composer-glyph-layer-tracks-the-textarea.md: b9249d59f12cd7bcb2267ce46168e9049517d307
+2026-07-31-composer-glyph-layer-tracks-the-textarea.zh.md: 68d8cc29e30d25fa25f79617e1e7d9e28e4edff8
diff --git a/.agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.md b/.agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.md
new file mode 100644
index 0000000000..b9249d59f1
--- /dev/null
+++ b/.agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.md
@@ -0,0 +1,53 @@
+# Agent Note: The composer's glyph layer tracks the textarea's scroll offset
+
+Status: implemented
+
+English | [中文](2026-07-31-composer-glyph-layer-tracks-the-textarea.zh.md)
+
+## Problem
+
+A composer draft longer than the 14-line cap could not be scrolled. The caret moved and the selection moved, but the words stayed frozen at line 1 — no wheel gesture, drag, or arrow key brought the end of a long draft on screen, so the bottom of anything past ~14 lines was unreachable and unreadable while writing it.
+
+The cap itself was working. The composer paints its text in two stacked layers ([InputBar](../../../../packages/client/ui-conversation/src/client/skeleton/InputBar.tsx)): the `<textarea>` owns the value, the selection, and the caret but renders its own glyphs `color: transparent`, and every visible character is painted by the `[data-input-backdrop]` div beneath it, which also carries the claim-token highlight, the chips, and the ghost hint. That split is what makes chips and highlights possible at all — a textarea cannot style a range of its own text.
+
+The two layers were coupled in geometry but not in scroll. The backdrop is `position: absolute; inset: 0; overflow: hidden`: it is clipped, not scrolled, and nothing in the browser links its offset to the textarea's. Below the cap that is invisible, because both layers rest at offset 0 and the mirror div sizes the box to the draft. At the cap the textarea starts scrolling and the backdrop does not follow, so the layer the user actually reads never moves.
+
+The defect is therefore exactly as old as the cap, and it hid behind the resting state: a short draft, the state every screenshot and every existing fixture captured, renders identically with and without the coupling.
+
+## Decision
+
+`InputBar` mirrors the textarea's `scrollTop` onto the backdrop, from two places:
+
+- A `scroll` listener on the textarea, registered beside the existing wheel-chaining listener in the same effect (the textarea is never unmounted — the inert state renders the same element disabled). This covers every gesture and every caret-driven scroll the browser performs.
+- A layout effect keyed on the committed draft. An edit reflows both layers without necessarily moving the textarea — no `scroll` event fires while the caret stays in view — and a shrinking draft clamps each layer independently.
+
+Both write the textarea's offset to the backdrop, never the reverse: the textarea is the authority because it owns the caret, and the caret is what the browser scrolls to.
+
+## Alternatives considered
+
+**Give the backdrop `overflow: auto` and let it scroll itself.** It would then have a scroll offset of its own to keep in step, which is the same problem plus a second scrollbar painted over the input. The backdrop is a projection of the textarea, not an independently navigable surface.
+
+**Drop the backdrop and style the textarea's own text.** This removes the layer split and the whole class of desync with it. Rejected because it is not implementable: a textarea renders one uniform text run, so the claim-token highlight, the chips, and the ghost hint — the reasons the backdrop exists — have no way to be expressed. Losing them to fix scrolling trades a bounded defect for a feature deletion.
+
+**Render the draft in a `contenteditable` div instead of a textarea.** One element, one scroll offset, styleable ranges. Rejected as far out of proportion to the defect: `contenteditable` would put IME composition, undo/redo, selection semantics, and paste normalization back on us, all of which the textarea plus the input machine currently handle, and the machine already owns an undo log that assumes a textarea's value semantics.
+
+**Scroll the backdrop from the existing wheel handler instead of a `scroll` listener.** The handler already runs on every wheel over the textarea, so it looks like the natural place. Rejected because it covers only one of the ways the box scrolls: typing at the end, `End`, arrow keys, drag-selection past the edge, and scrollbar drags all move the textarea without a wheel event. Listening to `scroll` is listening to the thing itself rather than to one of its causes.
+
+**Sync in the `onChange` handler rather than a layout effect.** Rejected because it fires before React commits the new draft to the backdrop, so it would mirror against the previous layout. The layout effect runs after the commit and before paint, which is where the two layers are simultaneously current.
+
+## Consequences
+
+- A draft past the cap scrolls its glyphs. Measured in the browser scenario: after a wheel gesture over a 40-line draft the last line sits inside the visible box and the first has scrolled out above it; before, the last line stayed a full draft-height below the box while the textarea's own offset had moved.
+- The coupling is one-directional and cheap — two assignments of one number, no measurement, no layout read beyond `scrollTop` — so it adds nothing to the typing path's cost.
+- Chips, claim-token highlights, and text-ref marks stay aligned with their glyphs while scrolled, because they are positioned inside the backdrop and move with it. Nothing about the decoration walk changes.
+- The composer's two-layer design keeps this hazard: any future layer added beside the backdrop needs the same mirroring. The e2e scenario asserts the relation the user cares about (which line is on screen) rather than the mechanism, so it holds whatever the layer count becomes.
+
+## Testing
+
+The unit spec in [input-bar.spec.tsx](../../../../packages/client/ui-conversation/tests/input-bar.spec.tsx) proves the mirroring paths run: it stubs both offsets, because jsdom reports `scrollHeight === clientHeight` for every element and never scrolls one, and asserts the backdrop follows a textarea `scroll` and a committed edit. Reverting the `ref` makes it fail.
+
+The user-visible fact needs a real engine, so [composer-draft-scroll.e2e.ts](../../../../apps/web/tests/composer-draft-scroll.e2e.ts) measures it in chromium against the built client: a 40-line draft in a fresh workspace's blank composer, zero model calls, with a DOM Range over the backdrop's own text reporting where the first and last lines sit relative to the visible box. A vacuity guard asserts the draft actually overflows the capped box first.
+
+Confirmed both directions against the built client. With the mirroring reverted and the packages rebuilt, the wheel case fails on the layer offsets, the edit case fails with it, and the golden diff reads `last draft line is on screen: false` while `textarea moved: true` — the reported symptom stated as a fixture. The resting-state case passes in both builds, which is the point: it is the state that hid the defect.
+
+Note that the composer ships inside a client-module bundle, so `pnpm run build:web` alone does not pick up a change to `InputBar.tsx` — the package build must run for the browser lane to see it, and a scenario run against a stale `lib/` asserts against an older client than the tree.
diff --git a/.agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.zh.md b/.agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.zh.md
new file mode 100644
index 0000000000..68d8cc29e3
--- /dev/null
+++ b/.agents/notes/implemented/bug-fix/2026-07-31-composer-glyph-layer-tracks-the-textarea.zh.md
@@ -0,0 +1,53 @@
+# Agent Note: composer 的字形层跟随 textarea 的滚动偏移
+
+Status: implemented
+
+[English](2026-07-31-composer-glyph-layer-tracks-the-textarea.md) | 中文
+
+## 问题
+
+草稿一旦超过 14 行的高度上限，就无法再滚动。光标会动，选区会动，但文字始终冻结在第 1 行——无论滚轮、拖拽还是方向键，都无法把长草稿的末尾带到可见范围内，因此约 14 行之后的内容在书写过程中既够不着也读不到。
+
+高度上限本身是正常工作的。composer 的文本由两层叠放绘制（见 [InputBar](../../../../packages/client/ui-conversation/src/client/skeleton/InputBar.tsx)）：`<textarea>` 持有取值、选区与光标，但它自己的字形以 `color: transparent` 渲染；用户看到的每一个字符都由其下的 `[data-input-backdrop]` 层绘制，该层同时承载 claim token 高亮、chip 与提示影子文本。这一拆分正是 chip 与高亮得以存在的前提——textarea 无法为自身文本的某个区间单独设置样式。
+
+两层在几何上是耦合的，在滚动上却不是。backdrop 为 `position: absolute; inset: 0; overflow: hidden`：它只做裁剪，不做滚动，浏览器也不会把它的偏移与 textarea 关联起来。未达上限时这一点不可见，因为两层都停在偏移 0，且镜像层会把盒子撑到草稿的高度。一旦触及上限，textarea 开始滚动而 backdrop 不跟随，于是用户真正在读的那一层从不移动。
+
+因此该缺陷与高度上限同龄，并且藏在静止状态背后：短草稿——也就是所有截图与既有 fixture（测试前置数据）所捕获的那个状态——在有无该耦合时渲染完全一致。
+
+## 决策
+
+`InputBar` 把 textarea 的 `scrollTop` 镜像到 backdrop 上，来自两处：
+
+- textarea 上的 `scroll` 监听，与既有的滚轮接力监听注册在同一个 effect 中（textarea 从不卸载——失效状态渲染的是同一个元素的 disabled 形态）。它覆盖所有手势，以及浏览器因光标而执行的每一次滚动。
+- 一个以已提交草稿为 key 的 layout effect。一次编辑会让两层重排，却不一定让 textarea 移动——光标仍在可见范围内时不会触发 `scroll` 事件——而草稿变短时两层各自独立地被钳位。
+
+两者都把 textarea 的偏移写给 backdrop，绝不反向：textarea 是权威方，因为它持有光标，而浏览器滚动的目标正是光标。
+
+## 曾考虑的替代方案
+
+**给 backdrop 加 `overflow: auto`，让它自行滚动。** 那样它就有了一个属于自己的滚动偏移需要同步，问题原样保留，还额外多出一条画在输入框上的滚动条。backdrop 是 textarea 的投影，而不是一个可独立导航的界面。
+
+**去掉 backdrop，直接为 textarea 自身文本设置样式。** 这会消除分层，连同整类失步问题一并消除。之所以否决，是因为它根本无法实现：textarea 只渲染一段统一的文本流，因此 claim token 高亮、chip 与提示影子文本——backdrop 存在的全部理由——都无从表达。为修滚动而放弃它们，是拿一个有界的缺陷去换一次功能删除。
+
+**改用 `contenteditable` div 承载草稿，不再用 textarea。** 一个元素、一个滚动偏移、区间可设样式。之所以否决，是它与该缺陷的体量严重不相称：`contenteditable` 会把 IME 组词、撤销／重做、选区语义与粘贴规范化重新压回我们身上，而这些目前都由 textarea 加输入状态机处理，且状态机已持有一份以 textarea 取值语义为前提的撤销日志。
+
+**在既有的滚轮处理函数里滚动 backdrop，而不是新增 `scroll` 监听。** 该处理函数本就在 textarea 上的每次滚轮时运行，看似是自然的落点。之所以否决，是它只覆盖了盒子滚动的其中一种成因：在末尾输入、`End`、方向键、拖选越过边缘、拖动滚动条，都会在没有滚轮事件的情况下移动 textarea。监听 `scroll` 是在监听事情本身，而不是它的某一个成因。
+
+**在 `onChange` 处理函数里同步，而不用 layout effect。** 之所以否决，是它在 React 把新草稿提交到 backdrop 之前触发，因而会按上一次的布局做镜像。layout effect 在提交之后、绘制之前运行，那正是两层同时处于最新状态的时刻。
+
+## 后果
+
+- 超过上限的草稿会滚动其字形。浏览器场景实测：在 40 行草稿上做一次滚轮手势后，最后一行位于可见盒子之内，第一行已滚出上方；此前最后一行仍停在盒子下方整整一个草稿高度处，而 textarea 自身的偏移已经移动了。
+- 该耦合是单向且廉价的——两次对一个数字的赋值，没有测量，除 `scrollTop` 外没有额外的布局读取——因此不会给输入路径增加开销。
+- chip、claim token 高亮与文本引用标记在滚动时始终与其字形对齐，因为它们定位在 backdrop 内部并随之移动。装饰扫描本身没有任何改动。
+- composer 的双层设计保留了这一隐患：日后在 backdrop 旁新增的任何一层都需要同样的镜像。e2e 场景断言的是用户真正关心的关系（哪一行在屏幕上），而非实现机制，因此无论层数变成多少它都成立。
+
+## 验证
+
+[input-bar.spec.tsx](../../../../packages/client/ui-conversation/tests/input-bar.spec.tsx) 中的单元用例证明镜像路径确实执行：它对两侧偏移都做了桩替换——因为 jsdom 对任何元素都报告 `scrollHeight === clientHeight` 且从不滚动任何元素——并断言 backdrop 跟随 textarea 的 `scroll` 与一次已提交的编辑。撤掉那个 `ref` 会让它失败。
+
+用户可见的事实需要真实引擎，因此 [composer-draft-scroll.e2e.ts](../../../../apps/web/tests/composer-draft-scroll.e2e.ts) 在 chromium 中针对构建产物客户端测量它：在全新工作区空白会话的 composer 中放入 40 行草稿，零模型调用，用一个跨越 backdrop 自身文本的 DOM Range 报告首行与末行相对于可见盒子的位置。一个防空转守卫会先断言草稿确实溢出了设有上限的盒子。
+
+已双向确认。撤掉镜像并重新构建各包后，滚轮用例在两层偏移上失败，编辑用例随之失败，golden 差异读作 `last draft line is on screen: false` 而 `textarea moved: true`——即以 fixture（测试前置数据）形式陈述的原始现象。静止状态用例在两种构建下都通过，这正是要点所在：它就是掩盖了该缺陷的那个状态。
+
+注意 composer 随客户端模块 bundle 一同发布，因此仅运行 `pnpm run build:web` 不会纳入对 `InputBar.tsx` 的改动——必须运行包构建，浏览器测试通道才能看到它；针对陈旧 `lib/` 运行的场景，断言的是比当前工作树更旧的客户端。
diff --git a/apps/web/tests/composer-draft-scroll.e2e.ts b/apps/web/tests/composer-draft-scroll.e2e.ts
new file mode 100644
index 0000000000..bb414e7e8f
--- /dev/null
+++ b/apps/web/tests/composer-draft-scroll.e2e.ts
@@ -0,0 +1,278 @@
+// Web e2e scenario: a composer draft longer than the 14-line cap scrolls its
+// GLYPHS, not just its caret.
+//
+// The composer paints its text in two stacked layers (see
+// packages/client/ui-conversation/src/client/skeleton/InputBar.module.css): the
+// `<textarea>` carries the value, the selection and the caret but renders its
+// own glyphs `color: transparent`, and every visible character is painted by the
+// `[data-input-backdrop]` div underneath it, which also carries the claim-token
+// highlight, the chips and the ghost hint. The backdrop is `position: absolute;
+// inset: 0; overflow: hidden` — it is CLIPPED, not scrolled, and nothing in the
+// browser links its scroll offset to the textarea's.
+//
+// So past the cap the textarea scrolled and the words did not: the caret walked
+// off the bottom of a block of text frozen at line 1, and no gesture — wheel,
+// drag, arrow key — moved it. `InputBar` now mirrors the offset onto the
+// backdrop on every textarea `scroll` and after every committed draft.
+//
+// Only a real engine can show this. Scrolling is layout: jsdom reports
+// `scrollHeight === clientHeight` for every element and never scrolls one, so
+// the unit spec in packages/client/ui-conversation/tests/input-bar.spec.tsx has
+// to stub both offsets and can only prove the mirroring code path runs. What is
+// asserted here instead is the user-visible fact that path exists for — after
+// scrolling to the end of a long draft, the LAST line is the one on screen —
+// measured with a DOM Range over the backdrop's own text.
+//
+// Zero model calls: a fresh workspace's blank session already carries a live
+// composer, and the scenario only types into it. 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 {
+  assertFixtureInventory, compareOrRefreshGolden, launchWebScaffold, watchConsole,
+  webSnapshotMode, type WebScaffold,
+} from './scaffold.ts'
+import { connectFreshWorkspace, newEnglishPage, saveFailureShot } from './support.ts'
+
+const SNAPSHOT_DIR = fileURLToPath(new URL('./snapshots/composer-draft-scroll', import.meta.url))
+/**
+ * Committed golden of the composer's two-layer scroll geometry. The change
+ * alters no DOM and no accessible name, so the aria goldens the other scenarios
+ * commit are byte-identical with and without it; this records the relations
+ * instead, which makes a shift in the cap or in the layer coupling a reviewable
+ * diff rather than an assertion someone has to reconstruct.
+ */
+const GEOMETRY_EXPECTED = join(SNAPSHOT_DIR, 'geometry.expected.md')
+const MODE = webSnapshotMode()
+
+/** Marks the first and last line so a Range can find them in the backdrop's text. */
+const FIRST_MARKER = 'FIRST-LINE-MARKER'
+const LAST_MARKER = 'LAST-LINE-MARKER'
+/** Comfortably past the 14-line cap, so the draft overflows however the lines wrap. */
+const DRAFT_LINES = 40
+const DRAFT = Array.from({ length: DRAFT_LINES }, (_unused, index) => {
+  if (index === 0) return FIRST_MARKER
+  if (index === DRAFT_LINES - 1) return LAST_MARKER
+  return `draft line ${String(index + 1).padStart(2, '0')}`
+}).join('\n')
+
+/** The composer's two text layers as the browser lays them out. */
+interface ComposerMetrics {
+  /** True when the draft is taller than the capped box — the situation under test. */
+  overflows: boolean
+  /** Visible height of the textarea's content box: the cap in pixels. */
+  clientHeight: number
+  /** Whole lines that fit in the visible box, at the composer's own line-height. */
+  visibleLines: number
+  /** The textarea's scroll offset, which the caret and the selection follow. */
+  inputScrollTop: number
+  /** The backdrop's scroll offset, which every visible glyph follows. */
+  backdropScrollTop: number
+  /** True when the two layers agree — the coupling this scenario exists for. */
+  layersAgree: boolean
+  /**
+   * Top of the LAST draft line relative to the visible box's top, in pixels: at
+   * most `clientHeight` when that line is on screen. This is the reported
+   * symptom as a number — with the layers uncoupled the backdrop stays at offset
+   * 0, so the last line sits a full draft-height below the box.
+   */
+  lastLineOffset: number
+  /** Top of the FIRST draft line relative to the visible box's top: negative once it has scrolled out. */
+  firstLineOffset: number
+}
+
+/**
+ * Measure both composer layers in the page.
+ * @param page - the page under test.
+ * @returns the two layers' offsets and where the draft's first and last lines sit.
+ */
+function measureComposer(page: Page): Promise<ComposerMetrics> {
+  return page.evaluate(({ first, last }) => {
+    const input = document.querySelector<HTMLTextAreaElement>('textarea:enabled')
+    if (input === null) throw new Error('no live composer textarea in the DOM')
+    const backdrop = input.parentElement?.querySelector<HTMLElement>('[data-input-backdrop]')
+    if (backdrop === undefined || backdrop === null) throw new Error('no decoration backdrop beside the composer textarea')
+    const box = input.getBoundingClientRect()
+    // The draft carries no chips or claim token, so the backdrop holds exactly
+    // one text node — the plain-text arm of the decoration walk.
+    const text = backdrop.firstChild
+    if (!(text instanceof Text)) throw new Error('backdrop is not a single plain text node')
+    const offsetOf = (marker: string): number => {
+      const at = text.data.indexOf(marker)
+      if (at < 0) throw new Error(`marker ${marker} missing from the backdrop text`)
+      const range = document.createRange()
+      range.setStart(text, at)
+      range.setEnd(text, at + marker.length)
+      return range.getBoundingClientRect().top - box.top
+    }
+    const lineHeight = Number.parseFloat(getComputedStyle(input).lineHeight)
+    return {
+      overflows: input.scrollHeight > input.clientHeight,
+      clientHeight: input.clientHeight,
+      visibleLines: Math.floor(input.clientHeight / lineHeight),
+      inputScrollTop: input.scrollTop,
+      backdropScrollTop: backdrop.scrollTop,
+      layersAgree: input.scrollTop === backdrop.scrollTop,
+      lastLineOffset: offsetOf(last),
+      firstLineOffset: offsetOf(first),
+    }
+  }, { first: FIRST_MARKER, last: LAST_MARKER })
+}
+
+/**
+ * Render the golden body.
+ *
+ * Absolute glyph coordinates are deliberately absent: they depend on font
+ * metrics and would make the fixture fail on a machine that measures text
+ * differently — a golden that needs re-recording per platform documents the
+ * platform, not the change. What is recorded is the cap, the layer agreement,
+ * and which lines are on screen, each a comparison that survives any layout
+ * keeping the coupling.
+ * @param top - metrics with the draft scrolled to its start.
+ * @param bottom - metrics with the draft scrolled to its end.
+ * @returns the golden body, without a trailing newline.
+ */
+function renderGeometry(top: ComposerMetrics, bottom: ComposerMetrics): string {
+  return [
+    '# Composer draft scrolling (14-line cap, two text layers)',
+    '',
+    '## At the start of the draft',
+    '',
+    `- draft overflows the capped box: ${String(top.overflows)}`,
+    `- visible lines: ${String(top.visibleLines)}`,
+    `- textarea scroll offset: ${String(top.inputScrollTop)}px`,
+    `- glyph layer tracks it: ${String(top.layersAgree)}`,
+    `- first draft line is on screen: ${String(top.firstLineOffset >= 0 && top.firstLineOffset < top.clientHeight)}`,
+    `- last draft line is on screen: ${String(top.lastLineOffset >= 0 && top.lastLineOffset < top.clientHeight)}`,
+    '',
+    '## Scrolled to the end of the draft',
+    '',
+    `- textarea moved: ${String(bottom.inputScrollTop > 0)}`,
+    `- glyph layer tracks it: ${String(bottom.layersAgree)}`,
+    `- first draft line has scrolled out above: ${String(bottom.firstLineOffset < 0)}`,
+    `- last draft line is on screen: ${String(bottom.lastLineOffset >= 0 && bottom.lastLineOffset < bottom.clientHeight)}`,
+  ].join('\n').trimEnd()
+}
+
+describe('web e2e: composer draft scrolling', () => {
+  let scaffold: WebScaffold
+  let browser: Browser
+  let page: Page
+  let tripwire: ReturnType<typeof watchConsole>
+
+  beforeAll(async () => {
+    scaffold = await launchWebScaffold({})
+    browser = await chromium.launch()
+    page = await newEnglishPage(browser)
+    tripwire = watchConsole(page)
+    await page.goto(scaffold.baseUrl, { waitUntil: 'load' })
+    await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
+    await connectFreshWorkspace(page, 'composer-draft-scroll')
+    await page.locator('textarea:enabled').first().fill(DRAFT)
+  }, 180_000)
+
+  afterAll(async () => {
+    await browser?.close()
+    await scaffold?.close()
+  })
+
+  it('caps the draft box and keeps both text layers at the start', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-composer-draft-scroll-top'))
+    // Vacuity guard: without an overflowing draft there is nothing to scroll and
+    // every assertion below holds trivially.
+    await expect.poll(async () => (await measureComposer(page)).overflows, { timeout: 10_000 }).toBe(true)
+    // Typing the draft left the caret — and the box — at its end, so reach the
+    // start by the same gesture a user would, and leave it there for the wheel
+    // case below.
+    await page.locator('textarea:enabled').first().hover()
+    await page.mouse.wheel(0, -2000)
+    await expect.poll(async () => (await measureComposer(page)).inputScrollTop, { timeout: 10_000 }).toBe(0)
+    const metrics = await measureComposer(page)
+    // The cap is the composer seat's `--dsh-composer-text-max-height` (336px =
+    // 14 x 24px lines). The count, not the pixels: it is the figma constant and
+    // survives a device-pixel-ratio change.
+    expect(metrics.visibleLines).toBe(14)
+    // Resting state: the draft's head is what a 40-line draft shows, and its
+    // tail is far below the box. Both layers sit at the origin, which is why the
+    // uncoupled build looks correct until something scrolls.
+    expect(metrics.inputScrollTop).toBe(0)
+    expect(metrics.layersAgree).toBe(true)
+    expect(metrics.firstLineOffset).toBeGreaterThanOrEqual(0)
+    expect(metrics.firstLineOffset).toBeLessThan(metrics.clientHeight)
+    expect(metrics.lastLineOffset).toBeGreaterThan(metrics.clientHeight)
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
+  it('a wheel gesture over a long draft moves the words, not only the caret', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-composer-draft-scroll-wheel'))
+    const input = page.locator('textarea:enabled').first()
+    await input.hover()
+    // One delta past the whole draft: the textarea clamps at its own end, and
+    // the wheel-chaining handler leaves it native because the box is not yet at
+    // its edge when the gesture starts (the chaining itself is owned by the
+    // unit spec).
+    await page.mouse.wheel(0, 2000)
+    await expect.poll(async () => (await measureComposer(page)).inputScrollTop, { timeout: 10_000 })
+      .toBeGreaterThan(0)
+    const metrics = await measureComposer(page)
+    // The coupling, stated directly.
+    expect(metrics.layersAgree).toBe(true)
+    // The reported symptom, stated as what the user sees: the end of the draft
+    // is on screen and its beginning is not. On the uncoupled build the glyph
+    // layer stays at offset 0, so `lastLineOffset` is still a full draft below
+    // the box and `firstLineOffset` is still 0 — the text never moved.
+    expect(metrics.lastLineOffset).toBeGreaterThanOrEqual(0)
+    expect(metrics.lastLineOffset).toBeLessThan(metrics.clientHeight)
+    expect(metrics.firstLineOffset).toBeLessThan(0)
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
+  it('an edit re-mirrors the layers without a scroll event', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-composer-draft-scroll-edit'))
+    // Typing at the caret — parked at the draft's end by the wheel gesture —
+    // reflows both layers. The textarea need not scroll (the caret stays in
+    // view), so nothing fires the `scroll` listener and only the draft-keyed
+    // mirror keeps the layers together.
+    const input = page.locator('textarea:enabled').first()
+    await input.press('End')
+    await input.pressSequentially(' tail')
+    const metrics = await measureComposer(page)
+    expect(metrics.layersAgree).toBe(true)
+    expect(metrics.lastLineOffset).toBeGreaterThanOrEqual(0)
+    expect(metrics.lastLineOffset).toBeLessThan(metrics.clientHeight)
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
+  it('matches the committed composer scroll geometry golden', async () => {
+    onTestFailed(() => saveFailureShot(page, 'web-e2e-composer-draft-scroll-golden'))
+    const input = page.locator('textarea:enabled').first()
+    // Restore the pristine draft (the edit case appended to it) and return to
+    // its start, both through ordinary gestures.
+    await input.fill(DRAFT)
+    await input.hover()
+    await page.mouse.wheel(0, -2000)
+    await expect.poll(async () => (await measureComposer(page)).inputScrollTop, { timeout: 10_000 }).toBe(0)
+    const top = await measureComposer(page)
+    await input.hover()
+    await page.mouse.wheel(0, 2000)
+    await expect.poll(async () => (await measureComposer(page)).inputScrollTop, { timeout: 10_000 })
+      .toBeGreaterThan(0)
+    const bottom = await measureComposer(page)
+    await compareOrRefreshGolden(GEOMETRY_EXPECTED, renderGeometry(top, bottom), MODE)
+    expect(tripwire.pageErrors).toEqual([])
+  }, 60_000)
+
+  it('commits exactly the fixtures it reads', async () => {
+    // Zero model calls, so the scenario records no session fixture: 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([])
+  })
+})
diff --git a/apps/web/tests/snapshots/composer-draft-scroll/geometry.expected.md b/apps/web/tests/snapshots/composer-draft-scroll/geometry.expected.md
new file mode 100644
index 0000000000..6f3e0bd881
--- /dev/null
+++ b/apps/web/tests/snapshots/composer-draft-scroll/geometry.expected.md
@@ -0,0 +1,17 @@
+# Composer draft scrolling (14-line cap, two text layers)
+
+## At the start of the draft
+
+- draft overflows the capped box: true
+- visible lines: 14
+- textarea scroll offset: 0px
+- glyph layer tracks it: true
+- first draft line is on screen: true
+- last draft line is on screen: false
+
+## Scrolled to the end of the draft
+
+- textarea moved: true
+- glyph layer tracks it: true
+- first draft line has scrolled out above: true
+- last draft line is on screen: true
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index f5774e1545..9a6a4e572e 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -43,7 +43,8 @@
     "tests/cordis-tool-round.e2e.ts",
     "tests/message-actions.e2e.ts",
     "tests/queue-actions.e2e.ts",
-    "tests/skill-invocation-policy.e2e.ts"
+    "tests/skill-invocation-policy.e2e.ts",
+    "tests/composer-draft-scroll.e2e.ts"
   ],
   "references": [
     {
diff --git a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
index 6709c4e434..a5e217235f 100644
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
@@ -6,7 +6,7 @@
  * region-slot content) ride the owner props. Session facts
  * (running/removed/promptError) are self-selected via useSession. */
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useLayoutEffect, useRef } from 'react'
 import type { ChangeEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
 import clsx from 'clsx'
 import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
@@ -62,6 +62,7 @@ export function InputBar({
   const draft = input?.draft ?? ''
   const empty = draft.trim() === ''
   const inputRef = useRef<HTMLTextAreaElement | null>(null)
+  const backdropRef = useRef<HTMLDivElement | null>(null)
   // IME guard: composition Enter picks a candidate, it must not send. The ref outlives renders;
   // clearing is deferred one tick because Safari delivers the closing keydown AFTER compositionend.
   const composingRef = useRef(false)
@@ -91,11 +92,19 @@ export function InputBar({
     if (!locked) inputRef.current?.focus()
   }, [locked, sessionId])
 
-  // Active conversation scrollport: chain the wheel. While the textarea (capped
-  // at 14 lines with overflow-y:auto) can still move in this direction, keep
-  // the native scroll; only at its own edge forward delta to the host so a
-  // short draft never traps the gesture and a long draft stays scrollable.
-  // Hero mounts have no host and keep native wheel scrolling.
+  // Two DOM listeners on the textarea, one lifetime (it is never unmounted —
+  // the inert state renders the same element disabled).
+  //
+  // wheel — active conversation scrollport: chain the gesture. While the
+  // textarea (capped at 14 lines with overflow-y:auto) can still move in this
+  // direction, keep the native scroll; only at its own edge forward delta to
+  // the host so a short draft never traps the gesture and a long draft stays
+  // scrollable. Hero mounts have no host and keep native wheel scrolling.
+  //
+  // scroll — the backdrop paints every visible glyph (the textarea's own text
+  // is transparent) but is clipped, not scrolled, so it does not follow the
+  // textarea on its own: without this mirror a draft past the cap moves the
+  // caret while the words stay frozen in place.
   useEffect(() => {
     const el = inputRef.current
     if (el === null) return
@@ -108,10 +117,28 @@ export function InputBar({
       e.preventDefault()
       host.scrollTop += e.deltaY
     }
+    const onScroll = (): void => {
+      const backdropEl = backdropRef.current
+      if (backdropEl !== null) backdropEl.scrollTop = el.scrollTop
+    }
     el.addEventListener('wheel', onWheel, { passive: false })
-    return () => { el.removeEventListener('wheel', onWheel) }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => {
+      el.removeEventListener('wheel', onWheel)
+      el.removeEventListener('scroll', onScroll)
+    }
   }, [])
 
+  // Draft edits reflow both layers without necessarily moving the textarea
+  // (no scroll event fires when the caret stays in view), and a shrinking
+  // draft clamps each layer independently. Re-mirror after every committed
+  // draft so the glyphs never lag the caret by an edit.
+  useLayoutEffect(() => {
+    const el = inputRef.current
+    const backdropEl = backdropRef.current
+    if (el !== null && backdropEl !== null) backdropEl.scrollTop = el.scrollTop
+  }, [draft])
+
   const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
     // Absent machine (no session): the textarea is disabled so events cannot
     // fire; the guard narrows the faces for the paths below.
@@ -376,7 +403,7 @@ export function InputBar({
             (min/max capped in CSS); the absolutely-positioned textarea rides its height. Counting
             rows by '\n' cannot see soft wraps. */}
         <div className={css.grow}>
-          <div aria-hidden className={css.backdrop} data-input-backdrop>{backdrop}</div>
+          <div ref={backdropRef} aria-hidden className={css.backdrop} data-input-backdrop>{backdrop}</div>
           <textarea
             ref={inputRef}
             className={css.input}
diff --git a/packages/client/ui-conversation/tests/input-bar.spec.tsx b/packages/client/ui-conversation/tests/input-bar.spec.tsx
index 8753b5ed66..6ce98d403a 100644
--- a/packages/client/ui-conversation/tests/input-bar.spec.tsx
+++ b/packages/client/ui-conversation/tests/input-bar.spec.tsx
@@ -288,6 +288,22 @@ describe('running and lock semantics (queue cut 1)', () => {
     }
   })
 
+  it('the decoration backdrop tracks the textarea offset (it paints every visible glyph)', () => {
+    const { view, textarea } = bench({ draft: 'line\n'.repeat(40) })
+    const backdrop = view.container.querySelector<HTMLElement>('[data-input-backdrop]')!
+    Object.defineProperty(backdrop, 'scrollTop', { value: 0, writable: true, configurable: true })
+    Object.defineProperty(textarea, 'scrollTop', { value: 0, writable: true, configurable: true })
+    // A scrolled draft: the textarea moves, the clipped backdrop must follow.
+    textarea.scrollTop = 120
+    fireEvent.scroll(textarea)
+    expect(backdrop.scrollTop).toBe(120)
+    // Editing re-mirrors without a scroll event (the caret can stay in view).
+    backdrop.scrollTop = 0
+    textarea.scrollTop = 96
+    fireEvent.change(textarea, { target: { value: 'line\n'.repeat(39) } })
+    expect(backdrop.scrollTop).toBe(96)
+  })
+
   it('disabled state shows the unavailable placeholder; custom placeholder wins', () => {
     const { textarea } = bench({ disabled: true })
     expect(textarea.placeholder).toBe('会话不可用')
diff --git a/tsconfig.host.json b/tsconfig.host.json
index 4d111917a0..2923d379a0 100644
--- a/tsconfig.host.json
+++ b/tsconfig.host.json
@@ -31,6 +31,7 @@
     "apps/web/tests/message-actions.e2e.ts",
     "apps/web/tests/queue-actions.e2e.ts",
     "apps/web/tests/skill-invocation-policy.e2e.ts",
+    "apps/web/tests/composer-draft-scroll.e2e.ts",
     "apps/cli/tests/**/*.ts",
     "examples/*/src/**/*.ts",
     "examples/*/start.ts",