fix(ui): stabilize chat scrolling

[richardsolomou]

Problem

Long legacy chat threads jitter and push the reader back down while scrolling upward. Markdown and tool rows mount with estimated heights, then their real measurements change individual virtual rows above the viewport.

Virtualized chat state can also survive a taskId change, causing a newly opened task to inherit the previous thread's scroll position.

Changes

I changed the legacy view to virtualize complete conversation turns with stable keys. Each prompt and response is measured and cached as one unit, while bottom-follow disengages as soon as an upward wheel or touch gesture begins.

Item-level DOM anchors remain inside each turn so conversation search can still highlight matches. Both thread implementations share the same user-initiated turn boundary, and the stateful chat renderer is keyed by taskId so switching tasks resets its virtualization and scroll state.

There is no visual design change, so screenshots are N/A.

How did you test this?

• Added unit coverage for turn grouping, synchronous variable-height measurement, and horizontal versus upward-history touch gestures.
• Ran the 12 experimental-thread virtualization tests, 7 focused legacy-thread tests, the full @posthog/ui typecheck, Biome, and the repository commit hooks.
• Loaded a copied production database with a long chat history, manually verified smooth upward scrolling, and confirmed conversation search produced both normal and active highlights in the running app.
• Did not manually re-run the task-switch scenario after adding the taskId remount.

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

---

Created with PostHog Code

[trunk-io]

😎 Merged directly without going through the merge queue, as the queue was empty and the PR was up to date with the target branch - details.

[github-actions]

React Doctor found 2 issues in 2 files · 2 warnings.

2 warnings

src/features/sessions/components/ConversationView.tsx

• ⚠️ src/features/sessions/components/ConversationView.tsx:485 Component rendered by inline function call no-render-in-render

src/features/sessions/components/VirtualizedList.tsx

• ⚠️ src/features/sessions/components/VirtualizedList.tsx:49 Large component is hard to read and change no-giant-component

_{Reviewed by React Doctor for commit 47452b2.}

[greptile-apps]

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
packages/ui/src/features/sessions/components/VirtualizedList.tsx:252-254
**Touch movement breaks bottom-follow**

When a user moves their finger downward or sideways while the conversation is at the bottom, this handler clears `isAtBottomRef` without checking direction, causing a concurrent streamed-content or row-height update to skip `scrollToEnd` and leave new content below the viewport.

_{Reviews (1): Last reviewed commit: "fix(ui): stabilize chat scrolling" | Re-trigger Greptile}

[posthog]

✅ Visual changes approved by @richardsolomou — baseline updated in 0f3e324.

View this run in PostHog

10 changed.