feat: optimize chat page scroll area

packages/client/ui-conversation/tests/chat-apply.spec.tsx

@@ -84,6 +84,8 @@ describe('apply wiring', () => {
     // service being present implies the chat entry declared the hole first.
     const entries = b.slots.entries('conversation.chat.toolview')
     expect(entries.map(e => e.options.key)).toEqual(['bash', 'todo_write'])
+    // Stats stick with the composer (not inside ChatView).
+    expect(b.slots.entries('conversation.composer.dock').map(e => e.options.id)).toEqual(['stats'])
     await b.runtime.dispose()
   })
 

packages/client/ui-conversation/tests/chat-stats-bash-sample.spec.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-// StatsLine (rendered inside the chat view body): totals derivation + the RFC
+// StatsLine (composer.dock entry): totals derivation + the RFC
 // hard acceptance — zero renders during streaming. Bash sample row: the
 // canonical sub-agent differential decided INSIDE the component off the
 // standard useSessions kit (no registry predicates — tool ring dissolved).

packages/client/ui-conversation/tests/chat-view.spec.tsx

@@ -371,6 +371,28 @@ describe('ChatView', () => {
     expect(view.queryByLabelText('回到底部')).toBeNull()
   })
 
+  it('under data-conversation-scroll, bottom-follow targets the host scrollport', () => {
+    const host = document.createElement('div')
+    host.setAttribute('data-conversation-scroll', '')
+    Object.defineProperty(host, 'scrollHeight', { value: 2000, writable: true, configurable: true })
+    Object.defineProperty(host, 'clientHeight', { value: 500, writable: true, configurable: true })
+    Object.defineProperty(host, 'scrollTop', { value: 0, writable: true, configurable: true })
+    document.body.appendChild(host)
+    try {
+      const h = makeHarness({ nodes: [user(1, 'q'), assistant(2, 'a')] })
+      const view = render(<h.ChatView {...h.props} />, { container: host })
+      // Open jump uses the host, not the local .scroll node.
+      expect(host.scrollTop).toBe(2000)
+      host.scrollTop = 100
+      fireEvent.scroll(host)
+      expect(view.getByLabelText('回到底部')).toBeTruthy()
+      fireEvent.click(view.getByLabelText('回到底部'))
+      expect(host.scrollTop).toBe(2000)
+    } finally {
+      host.remove()
+    }
+  })
+
   it('paging button loads older and shows its busy label', () => {
     const h = makeHarness({ nodes: [user(5, 'later')], hasMore: true })
     const view = render(<h.ChatView {...h.props} />)

packages/client/ui-conversation/tests/input-bar.spec.tsx

@@ -227,6 +227,22 @@ describe('running and lock semantics (queue cut 1)', () => {
     expect((textarea).value).toBe('typed')
   })
 
+  it('wheel over the textarea scrolls the conversation host, not a nested textarea port', () => {
+    const host = document.createElement('div')
+    host.setAttribute('data-conversation-scroll', '')
+    Object.defineProperty(host, 'scrollTop', { value: 40, writable: true, configurable: true })
+    const { view, textarea } = bench()
+    host.appendChild(view.container)
+    document.body.appendChild(host)
+    try {
+      const wheeled = fireEvent.wheel(textarea, { deltaY: 30 })
+      expect(wheeled).toBe(false) // preventDefault
+      expect(host.scrollTop).toBe(70)
+    } finally {
+      host.remove()
+    }
+  })
+
   it('disabled state shows the unavailable placeholder; custom placeholder wins', () => {
     const { textarea } = bench({ disabled: true })
     expect(textarea.placeholder).toBe('Session unavailable')

packages/client/ui-conversation/tests/skeleton.spec.tsx

@@ -102,6 +102,7 @@ function mount(
           views={{ list: () => [{ id: 'chat', label: 'Chat' }], subscribe: () => () => {}, version: () => 1 }}
           bindDraftMirror={write => wiring.bindMirror(write)}
           open={open}
+          {...owner}
         />
       )
     }
@@ -166,6 +167,18 @@ describe('ConversationRoot resident composer', () => {
     expect(b.open).toHaveBeenCalledWith(sid('root'))
   })
 
+  it('active phase: fixed header outside the scrollport; sticky composer inside it', () => {
+    const b = mount(conversationSnapshot())
+    const host = b.view.container.querySelector('[data-conversation-scroll]')
+    const header = b.view.container.querySelector('header')
+    const textarea = b.view.container.querySelector('textarea')
+    expect(host).not.toBeNull()
+    expect(header).not.toBeNull()
+    // Header is column chrome above the scrollport; composer sticks inside it.
+    expect(host?.contains(header)).toBe(false)
+    expect(host?.contains(textarea)).toBe(true)
+  })
+
   it('hero phase: same textarea, hero chrome, no header, picker switches the workspace', () => {
     const b = mount(
       conversationSnapshot({ composerPhase: 'blank', blank: true }),
@@ -174,7 +187,8 @@ describe('ConversationRoot resident composer', () => {
         { ...workspace('second'), title: 'Selected Folder' },
       ],
     )
-    // Hero chrome present, view ring absent.
+    // Hero chrome present, view ring absent; scroll host is active-phase only.
+    expect(b.view.container.querySelector('[data-conversation-scroll]')).toBeNull()
     expect(b.view.getByText("Let's start building")).toBeTruthy()
     expect(b.view.queryByTestId('view-chat')).toBeNull()
     // The same machine-backed textarea is live in the hero, and the
@@ -193,16 +207,19 @@ describe('ConversationRoot resident composer', () => {
     expect(b.view.getByText('Selected Folder')).toBeTruthy()
   })
 
-  it('textarea DOM identity survives the hero → active flip', () => {
+  it('machine draft survives the hero → active flip into the sticky scrollport composer', () => {
     const b = mount(conversationSnapshot({ composerPhase: 'blank', blank: true }))
     const before = b.view.getByRole('textbox')
     fireEvent.change(before, { target: { value: 'kept across flip' } })
-    // First message landed: content exists, phase leaves blank.
+    // First message landed: content exists, phase leaves blank. The active
+    // composer lives inside the Session scrollport (sticky footer), so the
+    // textarea may remount; the InputHub draft is the durable carrier.
     b.session.set(conversationSnapshot({ composerPhase: 'active', blank: false }))
     b.rerender()
-    const after = b.view.getByRole('textbox')
-    expect(after).toBe(before)
-    expect((after as HTMLTextAreaElement).value).toBe('kept across flip')
+    const after = b.view.getByRole('textbox') as HTMLTextAreaElement
+    expect(after.value).toBe('kept across flip')
+    expect(b.chat.store.getSnapshot().draft).toBe('kept across flip')
+    expect(b.view.container.querySelector('[data-conversation-scroll]')?.contains(after)).toBe(true)
     expect(b.view.queryByText("Let's start building")).toBeNull()
     expect(b.view.getByTestId('view-chat')).toBeTruthy()
   })