fix(ui): stabilize strict follow autoscroll (NeuralNomadsAI#576)

## Summary
- replace message stream follow behavior with a strict following/escaped
state model
- keep explicit submit bottom pinning deterministic while preserving
user scroll-up escape intent
- prevent repeated pending question/permission polling from rewriting
identical store entries and snapping back to bottom
- isolate pending request dedupe logic in a raw-node-testable helper

Fixes NeuralNomadsAI#574

## Validation
- node --test
"packages/ui/src/components/virtual-follow-behavior.test.ts"
"packages/ui/src/components/session/session-bottom-pin-intent.test.ts"
"packages/ui/src/stores/message-v2/pending-request-dedupe.test.ts"
- npm run typecheck --workspace @codenomad/ui
- npm run build --workspace @codenomad/ui
- git diff --check

Author: pascalandr

packages/ui/src/components/message-block.tsx

@@ -33,7 +33,6 @@ function DeleteUpToIcon() {
 const USER_BORDER_COLOR = "var(--message-user-border)"
 const ASSISTANT_BORDER_COLOR = "var(--message-assistant-border)"
 const NO_STEP_BORDER = "none"
-const REASONING_SCROLL_SENTINEL_MARGIN_PX = 48
 
 const LazyToolCall = lazy(() => import("./tool-call"))
 
@@ -1419,7 +1418,6 @@ function ReasoningStreamOutput(props: {
   const followScroll = createFollowScroll({
     getScrollTopSnapshot: props.scrollTopSnapshot,
     setScrollTopSnapshot: props.setScrollTopSnapshot,
-    sentinelMarginPx: REASONING_SCROLL_SENTINEL_MARGIN_PX,
     sentinelClassName: "reasoning-scroll-sentinel",
   })
 

packages/ui/src/components/message-section.tsx

@@ -5,7 +5,7 @@ import BrandedEmptyState from "./branded-empty-state"
 import MessageBlock from "./message-block"
 import { getMessageAnchorId } from "./message-anchors"
 import MessageTimeline, { buildTimelineSegments, type TimelineSegment } from "./message-timeline"
-import VirtualFollowList, { type VirtualFollowBottomIntent, type VirtualFollowListApi, type VirtualFollowListState, type VirtualFollowScrollSnapshot } from "./virtual-follow-list"
+import VirtualFollowList, { type VirtualExplicitBottomPinIntent, type VirtualFollowListApi, type VirtualFollowListState, type VirtualFollowScrollSnapshot } from "./virtual-follow-list"
 import { isSnapshotAutoFollowing } from "./virtual-follow-behavior"
 import { useConfig } from "../stores/preferences"
 import { getSessionInfo } from "../stores/sessions"
@@ -24,7 +24,6 @@ import { buildSessionSearchMatches } from "../lib/session-search"
 import type { SessionSearchMatch } from "../lib/session-search"
 import { resolveThinkingExpansionDefault } from "./tool-call/tool-registry"
 
-const SCROLL_SENTINEL_MARGIN_PX = 8
 const MESSAGE_SCROLL_CACHE_SCOPE = "message-stream"
 const QUOTE_SELECTION_MAX_LENGTH = 2000
 const STREAMING_TEXT_HOLD_TOP_THRESHOLD_PX = 8
@@ -49,7 +48,8 @@ export interface MessageSectionProps {
   onReloadMessages?: () => void
   isActive?: boolean
   sessionStreamingActive?: boolean
-  bottomFollowIntent?: VirtualFollowBottomIntent | null
+  explicitBottomPinIntent?: VirtualExplicitBottomPinIntent | null
+  onExplicitBottomPinCancelled?: () => void
 }
 
 export default function MessageSection(props: MessageSectionProps) {
@@ -735,16 +735,6 @@ export default function MessageSection(props: MessageSectionProps) {
       return
     }
 
-    const element = streamElement()
-    if (!allowCapture || !canCapture) return
-    if (!element) return
-    const scrollTop = element.scrollTop
-    const maxScrollTop = Math.max(element.scrollHeight - element.clientHeight, 0)
-    const scrollRatio = maxScrollTop > 0 ? scrollTop / maxScrollTop : 0
-    const atBottom = element.scrollHeight - (element.scrollTop + element.clientHeight) <= 48
-    const snapshot = { scrollTop, scrollRatio, maxScrollTop, atBottom }
-    setLastGoodScrollSnapshot(sessionId, snapshot)
-    store().setScrollSnapshot(sessionId, MESSAGE_SCROLL_CACHE_SCOPE, snapshot)
   }
 
   // Persist scroll position when switching sessions. This effect's cleanup runs
@@ -783,7 +773,7 @@ export default function MessageSection(props: MessageSectionProps) {
     setScrollControlsOpen(false)
   }
 
-  function openScrollControlsFromTrigger(event: PointerEvent) {
+  function openScrollControlsFromTrigger(event: MouseEvent) {
     event.preventDefault()
     event.stopPropagation()
     if (scrollControlsOpen()) return
@@ -795,7 +785,7 @@ export default function MessageSection(props: MessageSectionProps) {
     event.preventDefault()
     event.stopPropagation()
     action()
-    setScrollControlsHoverSuppressed(event.pointerType !== "mouse")
+    setScrollControlsHoverSuppressed(false)
     closeScrollControls()
   }
 
@@ -836,7 +826,7 @@ export default function MessageSection(props: MessageSectionProps) {
     const api = listApi()
     if (!api) return
     if (props.registerScrollToBottom) {
-      props.registerScrollToBottom(() => api.scrollToBottom({ immediate: true, suppressHold: true }))
+      props.registerScrollToBottom(() => api.scrollToBottom({ immediate: true }))
       onCleanup(() => props.registerScrollToBottom?.(null))
     }
   })
@@ -1264,7 +1254,7 @@ export default function MessageSection(props: MessageSectionProps) {
     if (!match || !isSearchOpen()) return
     if (match.id === lastScrolledSearchMatchId) return
     lastScrolledSearchMatchId = match.id
-    listApi()?.scrollToKey(match.messageId, { behavior: "smooth", block: "start", setAutoScroll: false })
+    listApi()?.scrollToKey(match.messageId, { behavior: "smooth", block: "start" })
   })
 
 
@@ -1367,16 +1357,15 @@ export default function MessageSection(props: MessageSectionProps) {
           getKey={(messageId) => messageId}
           getAnchorId={getMessageAnchorId}
           overscanPx={800}
-          scrollSentinelMarginPx={SCROLL_SENTINEL_MARGIN_PX}
-          suspendMeasurements={() => !isActive()}
           streamingActive={streamingActive}
           isActive={isActive}
           scrollToBottomOnActivate={() => false}
           initialScrollToBottom={() => false}
           initialAutoScroll={initialAutoScroll}
           resetKey={() => props.sessionId}
           followToken={followToken}
-          forceBottomFollowIntent={() => props.bottomFollowIntent ?? null}
+          explicitBottomPinIntent={() => props.explicitBottomPinIntent ?? null}
+          onExplicitBottomPinCancelled={props.onExplicitBottomPinCancelled}
           autoPinHoldEnabled={holdLongAssistantRepliesEnabled}
           autoPinHoldTargetKey={autoPinHoldTargetKey}
           autoPinHoldTopThresholdPx={STREAMING_TEXT_HOLD_TOP_THRESHOLD_PX}
@@ -1429,7 +1418,7 @@ export default function MessageSection(props: MessageSectionProps) {
               <button
                 type="button"
                 class="message-scroll-button message-scroll-controls-trigger"
-                onPointerUp={openScrollControlsFromTrigger}
+                onClick={openScrollControlsFromTrigger}
                 aria-label={t("messageSection.scroll.showControlsAriaLabel")}
                 title={t("messageSection.scroll.showControlsAriaLabel")}
               >
@@ -1472,7 +1461,7 @@ export default function MessageSection(props: MessageSectionProps) {
                   <button
                     type="button"
                     class="message-scroll-button"
-                    onPointerUp={(event) => runScrollControlAction(event, () => api.scrollToBottom({ suppressHold: true }))}
+                    onPointerUp={(event) => runScrollControlAction(event, () => api.scrollToBottom())}
                     aria-label={t("messageSection.scroll.toLatestAriaLabel")}
                   >
                     <span class="message-scroll-icon" aria-hidden="true">

packages/ui/src/components/session/session-bottom-follow-intent.test.ts

@@ -0,0 +1,74 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+
+import { getSubmitBottomPinTargetCount, resolveSessionBottomPinIntent, shouldClearSessionBottomPinIntent } from "./session-bottom-pin-intent.ts"
+
+describe("session bottom pin intent", () => {
+  it("targets only the queued user prompt when submitting during active streaming", () => {
+    assert.equal(getSubmitBottomPinTargetCount(10, true), 11)
+    assert.equal(getSubmitBottomPinTargetCount(10, false), 12)
+  })
+
+  it("only exposes submit bottom pin intent to the matching session", () => {
+    const intent = { sessionId: "session-a", token: 3, minItemCount: 12, createdMessageCount: 10, observedStreaming: false }
+
+    assert.deepEqual(resolveSessionBottomPinIntent(intent, "session-a"), {
+      token: 3,
+      minItemCount: 12,
+    })
+    assert.equal(resolveSessionBottomPinIntent(intent, "session-b"), null)
+  })
+
+  it("clears submit bottom pin intent after the submitted exchange has rendered and stopped streaming", () => {
+    const intent = { sessionId: "session-a", token: 3, minItemCount: 12, createdMessageCount: 10, observedStreaming: false }
+
+    assert.equal(
+      shouldClearSessionBottomPinIntent(intent, {
+        sessionId: "session-a",
+        messageCount: 11,
+        streamingActive: false,
+      }),
+      false,
+    )
+
+    assert.equal(
+      shouldClearSessionBottomPinIntent(intent, {
+        sessionId: "session-a",
+        messageCount: 12,
+        streamingActive: true,
+      }),
+      false,
+    )
+
+    assert.equal(
+      shouldClearSessionBottomPinIntent(intent, {
+        sessionId: "session-a",
+        messageCount: 12,
+        streamingActive: false,
+      }),
+      true,
+    )
+
+    assert.equal(
+      shouldClearSessionBottomPinIntent(intent, {
+        sessionId: "session-b",
+        messageCount: 12,
+        streamingActive: false,
+      }),
+      false,
+    )
+  })
+
+  it("clears a submitted turn that stopped streaming before the optimistic count was reached", () => {
+    const intent = { sessionId: "session-a", token: 3, minItemCount: 12, createdMessageCount: 10, observedStreaming: true }
+
+    assert.equal(
+      shouldClearSessionBottomPinIntent(intent, {
+        sessionId: "session-a",
+        messageCount: 11,
+        streamingActive: false,
+      }),
+      true,
+    )
+  })
+})

packages/ui/src/components/session/session-bottom-follow-intent.ts

@@ -0,0 +1,30 @@
+import type { VirtualExplicitBottomPinIntent } from "../virtual-follow-list"
+
+export interface SessionBottomPinIntent extends VirtualExplicitBottomPinIntent {
+  sessionId: string
+  createdMessageCount: number
+  observedStreaming: boolean
+}
+
+export function getSubmitBottomPinTargetCount(messageCount: number, streamingActive: boolean) {
+  return messageCount + (streamingActive ? 1 : 2)
+}
+
+export function resolveSessionBottomPinIntent(
+  intent: SessionBottomPinIntent | null,
+  sessionId: string,
+): VirtualExplicitBottomPinIntent | null {
+  if (!intent || intent.sessionId !== sessionId) return null
+  return { token: intent.token, minItemCount: intent.minItemCount }
+}
+
+export function shouldClearSessionBottomPinIntent(
+  intent: SessionBottomPinIntent | null,
+  state: { sessionId: string; messageCount: number; streamingActive: boolean },
+) {
+  if (!intent) return false
+  if (intent.sessionId !== state.sessionId) return false
+  if (state.streamingActive) return false
+  if (state.messageCount >= (intent.minItemCount ?? 0)) return true
+  return intent.observedStreaming && state.messageCount > intent.createdMessageCount
+}