fix: stabilize hold-mode assistant autoscroll

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

@@ -391,6 +391,7 @@ function MessageContentItem(props: MessageContentItemProps) {
           parts={visibleParts()}
           instanceId={props.instanceId}
           sessionId={props.sessionId}
+          contentStartPartId={props.startPartId}
           isQueued={isQueued()}
           showAgentMeta={showAgentMeta()}
           showDeleteMessage={props.showDeleteMessage}

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

@@ -37,6 +37,7 @@ interface MessageItemProps {
   onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   showAgentMeta?: boolean
+  contentStartPartId?: string
   onContentRendered?: () => void
   showDeleteMessage?: boolean
   onDeleteHoverChange?: (state: DeleteHoverState) => void
@@ -158,6 +159,11 @@ export default function MessageItem(props: MessageItemProps) {
   }
 
   const messageParts = () => props.parts
+  const isAssistantTextBlock = () =>
+    !isUser() &&
+    messageParts().some(
+      (part) => part.type === "text" && !isHiddenSyntheticTextPart(part) && partHasRenderableText(part),
+    )
 
   // User messages can temporarily include synthetic helper parts (e.g. tool traces / file reads).
   // We only want to display the primary prompt text for the user message; other synthetic text
@@ -472,6 +478,8 @@ export default function MessageItem(props: MessageItemProps) {
       data-message-id={props.record.id}
       data-message-role={isUser() ? "user" : "assistant"}
       data-message-status={props.record.status}
+      data-message-content-start-part-id={props.contentStartPartId}
+      data-assistant-text-block={isAssistantTextBlock() ? "true" : undefined}
     >
       <header class={`message-item-header ${isUser() ? "pb-0.5" : "pb-0"}`}>
         <div class="message-item-header-row message-item-header-row--top" ref={(el) => (topRowEl = el)}>

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

@@ -36,10 +36,17 @@ export default function MessagePart(props: MessagePartProps) {
   const textContainerClass = () => (isAssistantMessage() ? "message-text message-text-assistant" : "message-text")
   const markdownContainerClass = () => "message-text message-text-assistant"
   const textContainerRole = () => props.messageType || "assistant"
+  const isPrimaryUserTextPart = () =>
+    props.messageType === "user" &&
+    props.part?.type === "text" &&
+    typeof props.primaryUserTextPartId === "string" &&
+    props.primaryUserTextPartId.length > 0 &&
+    props.part.id === props.primaryUserTextPartId
 
   const shouldHideTextPart = () => {
     const part = props.part
     if (!part || part.type !== "text") return false
+    if (isPrimaryUserTextPart()) return false
     return Boolean((part as any).synthetic)
   }
 
@@ -213,7 +220,7 @@ export default function MessagePart(props: MessagePartProps) {
   return (
     <Switch>
       <Match when={partType() === "text"}>
-        <Show when={!shouldHideTextPart() && partHasRenderableText(props.part)}>
+        <Show when={!shouldHideTextPart() && (partHasRenderableText(props.part) || isPrimaryUserTextPart())}>
           <div
             class={canRenderMarkdown() ? markdownContainerClass() : textContainerClass()}
             dir="auto"

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 VirtualFollowListApi, type VirtualFollowListState, type VirtualFollowScrollSnapshot } from "./virtual-follow-list"
+import VirtualFollowList, { type VirtualFollowBottomIntent, type VirtualFollowListApi, type VirtualFollowListState, type VirtualFollowScrollSnapshot } from "./virtual-follow-list"
 import { useConfig } from "../stores/preferences"
 import { getSessionInfo } from "../stores/sessions"
 import { messageStoreBus } from "../stores/message-v2/bus"
@@ -47,6 +47,7 @@ export interface MessageSectionProps {
   onReloadMessages?: () => void
   isActive?: boolean
   sessionStreamingActive?: boolean
+  bottomFollowIntent?: VirtualFollowBottomIntent | null
 }
 
 export default function MessageSection(props: MessageSectionProps) {
@@ -1338,10 +1339,12 @@ export default function MessageSection(props: MessageSectionProps) {
           initialAutoScroll={initialAutoScroll}
           resetKey={() => props.sessionId}
           followToken={followToken}
+          forceBottomFollowIntent={() => props.bottomFollowIntent ?? null}
+          autoPinHoldEnabled={holdLongAssistantRepliesEnabled}
           autoPinHoldTargetKey={autoPinHoldTargetKey}
           autoPinHoldTopThresholdPx={STREAMING_TEXT_HOLD_TOP_THRESHOLD_PX}
           resolveAutoPinHoldElement={(itemWrapper, key) => {
-            const candidates = Array.from(itemWrapper.querySelectorAll<HTMLElement>(`.message-item-base[data-message-id="${key}"][data-message-role="assistant"]`))
+            const candidates = Array.from(itemWrapper.querySelectorAll<HTMLElement>(`.message-item-base[data-message-id="${key}"][data-message-role="assistant"][data-assistant-text-block="true"]`))
             return candidates[candidates.length - 1] ?? null
           }}
           onScroll={() => {

packages/ui/src/components/session/session-view.tsx

@@ -79,7 +79,8 @@ export const SessionView: Component<SessionViewProps> = (props) => {
   let scrollToBottomHandle: (() => void) | undefined
   let rootRef: HTMLDivElement | undefined
   const pendingIdleSeenTimers = new Set<string>()
-  const [pendingSubmitBottomScrollTargetCount, setPendingSubmitBottomScrollTargetCount] = createSignal<number | null>(null)
+  const [submitBottomFollowIntent, setSubmitBottomFollowIntent] = createSignal<{ token: number; minItemCount: number } | null>(null)
+  let submitBottomFollowIntentSequence = 0
 
   function shouldScrollToBottomOnActivate() {
     const current = session()
@@ -99,6 +100,16 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     return true
   }
 
+  function startSubmitBottomFollowIntent(minItemCount: number) {
+    submitBottomFollowIntentSequence += 1
+    setSubmitBottomFollowIntent({ token: submitBottomFollowIntentSequence, minItemCount })
+  }
+
+  function forceSubmittedExchangeToBottom(minItemCount: number) {
+    startSubmitBottomFollowIntent(minItemCount)
+    scrollToBottomHandle?.()
+  }
+
   function getSeenIdleEntries(currentSession: Session, keepUnseenSubagentIdleStatus: boolean): Array<{ id: string; idleSince: number }> {
     const entries: Array<{ id: string; idleSince: number }> = []
 
@@ -216,21 +227,6 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     )
   }
 
-  createEffect(
-    on(
-      () => messageStore().getSessionMessageIds(props.sessionId).length,
-      (messageCount) => {
-        const targetCount = pendingSubmitBottomScrollTargetCount()
-        if (targetCount === null) return
-        const didSchedule = scheduleScrollToBottom({ force: true })
-        if (didSchedule && messageCount >= targetCount) {
-          setPendingSubmitBottomScrollTargetCount(null)
-        }
-      },
-      { defer: true },
-    ),
-  )
-
   function registerPromptInputApi(api: PromptInputApi) {
     promptInputApi = api
     props.registerSessionPromptApi?.(props.sessionId, api)
@@ -276,14 +272,13 @@ export const SessionView: Component<SessionViewProps> = (props) => {
 
   async function handleSendMessage(prompt: string, attachments: Attachment[]) {
     const messageCount = messageStore().getSessionMessageIds(props.sessionId).length
-    setPendingSubmitBottomScrollTargetCount(messageCount + 2)
-    scheduleScrollToBottom({ force: true })
+    const submittedExchangeTargetCount = messageCount + 2
+    forceSubmittedExchangeToBottom(submittedExchangeTargetCount)
     try {
       await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
-      scheduleScrollToBottom({ force: true })
-      setPendingSubmitBottomScrollTargetCount(null)
+      const latestMessageCount = messageStore().getSessionMessageIds(props.sessionId).length
+      forceSubmittedExchangeToBottom(Math.max(submittedExchangeTargetCount, latestMessageCount))
     } catch (error) {
-      setPendingSubmitBottomScrollTargetCount(null)
       throw error
     }
   }
@@ -448,20 +443,13 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                   loadError={messagesLoadError()}
                   onReloadMessages={handleReloadMessages}
                   sessionStreamingActive={sessionStreamingActive()}
+                  bottomFollowIntent={submitBottomFollowIntent()}
                   onRevert={handleRevert}
                   onDeleteMessagesUpTo={handleDeleteMessagesUpTo}
                   onFork={handleFork}
                   isActive={props.isActive}
                   registerScrollToBottom={(fn) => {
                     scrollToBottomHandle = fn ?? undefined
-                    if (!fn) return
-                    const targetCount = pendingSubmitBottomScrollTargetCount()
-                    if (targetCount === null) return
-                    const didSchedule = scheduleScrollToBottom({ force: true })
-                    const messageCount = messageStore().getSessionMessageIds(props.sessionId).length
-                    if (didSchedule && messageCount >= targetCount) {
-                      setPendingSubmitBottomScrollTargetCount(null)
-                    }
                   }}
                   showSidebarToggle={props.showSidebarToggle}
                   onSidebarToggle={props.onSidebarToggle}