dsh-smooth-stream 0.6.1 → 0.7.0

package/src/client/TypewriterAssistantNodeView.tsx

@@ -1,12 +1,14 @@
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode, type RefObject } from 'react'
-import { IconThinkOutline14, JsonBlock, MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives'
+import { JsonBlock, MarkdownText } from '@deepseek-ai/dsh-client-ui-primitives'
 import { ImageGallery, type ImageLoader, type MessageImageLabels } from '@deepseek-ai/dsh-client-ui-attachment'
 import type { ChatNodeViewProps, TurnTailOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import { AnimatedDisclosure } from './AnimatedDisclosure.tsx'
+import { IconThink } from './harnessIcons.ts'
 import { notifyFollowCommit } from './teleprompterGlide.ts'
 import { useSmoothStreamContent, type StreamSmoothingPreset } from './useSmoothStreamContent.ts'
 import { useFpsGuard } from './useFpsGuard.ts'
 import { useLogarithmicFade } from './useLogarithmicFade.ts'
+import { useDecoupledMarkdown } from './useDecoupledMarkdown.ts'
 import { FollowHost } from './FollowHost.tsx'
 import { DEFAULT_STREAM_CONFIG, type StreamMode } from '../config.ts'
 import { DEFAULT_STREAM_SETTINGS, type StreamMotionPreference } from '../settings.ts'
@@ -49,15 +51,14 @@ interface AnimatedMarkdownTextProps extends MarkdownProps {
   logarithmicFade: boolean
   /** Whether the resolved reduced-motion gate keeps the reveal engine off. */
   motionReduced: boolean
-  /** True on the last text block: that block owns conversation follow. */
-  ownFollow: boolean
   followSpeedCpsRef?: { current: number } | undefined
   followRevealedCharsRef?: { current: number } | undefined
   followRevealScaleRef?: { current: number } | undefined
   onPredictiveChange?: ((predictive: boolean) => void) | undefined
+  /** Reports whether the final text arm still has visible reveal work. */
+  onRevealActivityChange?: ((active: boolean) => void) | undefined
   preset: StreamSmoothingPreset
   shouldHoldBack: () => boolean
-  controlScroll?: boolean
 }
 
 /** Conservative fallback before the streaming Markdown tail has geometry. */
@@ -82,50 +83,6 @@ function approximateInlineWidth(text: string, emPx: number): number {
   return width
 }
 
-function measurePendingTextGeometry(root: HTMLElement, visibleText: string): PendingTextGeometry {
-  if (
-    typeof document.createTreeWalker !== 'function'
-    || typeof NodeFilter === 'undefined'
-  ) {
-    return { root, visibleText, fontSize: 14, wrapThresholdWidth: null }
-  }
-  const rootRect = root.getBoundingClientRect()
-  const rootWidth = Math.max(0, rootRect.width, rootRect.right - rootRect.left, root.clientWidth)
-  if (rootWidth <= 0) return { root, visibleText, fontSize: 14, wrapThresholdWidth: null }
-
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
-  let tail: Text | null = null
-  for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
-    if ((node.textContent ?? '').length > 0) tail = node as Text
-  }
-  const parent = tail?.parentElement ?? root
-  const fontSize = Number.parseFloat(getComputedStyle(parent).fontSize) || 14
-  if (tail === null || typeof document.createRange !== 'function') {
-    return { root, visibleText, fontSize, wrapThresholdWidth: rootWidth }
-  }
-
-  try {
-    const length = tail.textContent?.length ?? 0
-    if (length <= 0) return { root, visibleText, fontSize, wrapThresholdWidth: rootWidth }
-    const range = document.createRange()
-    range.setStart(tail, Math.max(0, length - 1))
-    range.setEnd(tail, length)
-    const tailRect = range.getBoundingClientRect()
-    const contentRight = rootRect.right
-    if (!Number.isFinite(tailRect.right) || tailRect.right <= rootRect.left || contentRight <= rootRect.left) {
-      return { root, visibleText, fontSize, wrapThresholdWidth: rootWidth }
-    }
-    const remainingWidth = Math.max(0, contentRight - tailRect.right)
-    return {
-      root,
-      visibleText,
-      fontSize,
-      wrapThresholdWidth: remainingWidth + fontSize * 0.35,
-    }
-  } catch {
-    return { root, visibleText, fontSize, wrapThresholdWidth: rootWidth }
-  }
-}
 
 /** Whether buffered source can reach a new visual line before it drains. */
 function pendingTextCanGrow(
@@ -137,17 +94,16 @@ function pendingTextCanGrow(
   if (pending === '') return false
   if (/[\r\n]/u.test(pending)) return true
   const pendingChars = [...pending]
-  if (root === null) return pendingChars.length >= PREDICTIVE_WRAP_FALLBACK_CHARS
+  if (pendingChars.length >= PREDICTIVE_WRAP_FALLBACK_CHARS) return true
+  if (root === null) return false
 
   let geometry = geometryRef.current
-  if (geometry?.root !== root || geometry.visibleText !== visibleText) {
-    geometry = measurePendingTextGeometry(root, visibleText)
+  if (geometry?.root !== root) {
+    const rootWidth = root.clientWidth || 600
+    geometry = { root, visibleText, fontSize: 14, wrapThresholdWidth: Math.max(120, rootWidth * 0.4) }
     geometryRef.current = geometry
   }
-  if (geometry.wrapThresholdWidth === null) {
-    return pendingChars.length >= PREDICTIVE_WRAP_FALLBACK_CHARS
-  }
-  return approximateInlineWidth(pending, geometry.fontSize) >= geometry.wrapThresholdWidth
+  return approximateInlineWidth(pending, geometry.fontSize) >= (geometry.wrapThresholdWidth ?? (geometry.fontSize * PREDICTIVE_WRAP_FALLBACK_CHARS))
 }
 
 function announcementChunkEnd(source: string, start: number): number {
@@ -299,9 +255,9 @@ const StreamAnnouncement = memo(function StreamAnnouncement({
  * and rendered by the Harness `MarkdownText`
  * streaming arm (incremental parse, frozen non-tail blocks), so there is no
  * raw-text tail and no text-to-markdown swap: the tree stays markdown
- * throughout. The last text block owns conversation-port follow so wraps
- * glide instead of snapping. Once the stream closes and the reveal queue
- * drains, the settled full parse (KaTeX math, fence highlighting, file
+ * throughout. The outer assistant owner follows all text growth, including
+ * the final drain, so wraps glide without a completion handoff. Once the
+ * queue drains, the settled full parse (KaTeX math, fence highlighting, file
  * mentions) swaps in exactly once.
  */
 function AnimatedMarkdownText({
@@ -311,14 +267,13 @@ function AnimatedMarkdownText({
   streaming,
   logarithmicFade,
   motionReduced,
-  ownFollow,
   followSpeedCpsRef,
   followRevealedCharsRef,
   followRevealScaleRef,
   onPredictiveChange,
+  onRevealActivityChange,
   preset,
   shouldHoldBack,
-  controlScroll = true,
 }: AnimatedMarkdownTextProps) {
   const reduced = motionReduced
   const [typing, setTyping] = useState(streaming)
@@ -340,6 +295,7 @@ function AnimatedMarkdownText({
   })
   const shown = reduced ? text : displayed
   const live = typing && !reduced
+  const markdownShown = useDecoupledMarkdown(shown, live)
   useLogarithmicFade(followRootRef, logarithmicFade && !reduced, live, speedCpsRef)
 
   useEffect(() => {
@@ -366,6 +322,10 @@ function AnimatedMarkdownText({
     onPredictiveChange(next)
   }, [live, onPredictiveChange, shown, streaming, text])
 
+  useLayoutEffect(() => {
+    onRevealActivityChange?.(live)
+  }, [live, onRevealActivityChange])
+
   // The stream closed: keep revealing the remaining queue, then swap to the
   // settled parse exactly once. The markdown tree stays mounted until then.
   useEffect(() => {
@@ -380,26 +340,20 @@ function AnimatedMarkdownText({
     if (streaming) setTyping(true)
   }, [streaming])
 
+  if (!streaming && !live && text.trim() === '') return null
+
   return (
-    <FollowHost
-      active={live && ownFollow}
-      speedCpsRef={speedCpsRef}
-      revealedCharsRef={followRevealedCharsRef}
-      revealScaleRef={followRevealScaleRef}
-      predictive={streaming}
-      controlScroll={controlScroll}
-      hostRef={followRootRef}
-    >
+    <div ref={followRootRef} className={css.follow} data-follow-text="">
       <MarkdownText
         // `shown` stays authoritative through the completion drain: the
         // settled parse swaps in only when the queue has actually emptied.
         // Rendering `text` early bypasses the drain and teleports the tail.
-        text={live ? shown : text}
+        text={live ? markdownShown : text}
         streaming={live}
         labels={labels}
         fileMentions={live ? undefined : fileMentions}
       />
-    </FollowHost>
+    </div>
   )
 }
 
@@ -418,7 +372,7 @@ function imageLabels(t: AssistantProps['t']): MessageImageLabels {
 }
 
 /**
- * Apply searchable hidden state without unmounting a stable subtree — the
+ * Apply searchable hidden state without unmounting a stable subtree 鈥?the
  * Host's completion fold hides the answer-inline reasoning this way, so the
  * takeover renderer must reproduce it to stay inside the contract: the row
  * disappears into the Host's process summary and comes back on find-in-page.
@@ -488,8 +442,8 @@ function latestLine(text: string): string {
  * click stay on the disclosure chrome, which the plugin's AnimatedDisclosure
  * renders with a height-animated body (the harness primitive would mount and
  * unmount it, which cannot glide). The row opens only while this block is
- * the streaming tail and closes as soon as thinking ends — a later block,
- * or the assistant node settling — not when the rest of the reply is
+ * the streaming tail and closes as soon as thinking ends 鈥?a later block,
+ * or the assistant node settling 鈥?not when the rest of the reply is
  * still streaming.
  */
 function AnimatedReasoning({
@@ -502,6 +456,7 @@ function AnimatedReasoning({
   shouldHoldBack,
   followSpeedCpsRef,
   followRevealScaleRef,
+  snapAutoCollapse,
   t,
 }: {
   text: string
@@ -513,6 +468,8 @@ function AnimatedReasoning({
   shouldHoldBack: () => boolean
   followSpeedCpsRef?: { current: number } | undefined
   followRevealScaleRef?: { current: number } | undefined
+  /** 0.1.x single rows snap the auto-close and let their follower absorb the step; on 0.2.x the collapse lands exactly at the ownership handoff, so it must glide. */
+  snapAutoCollapse: boolean
   t: AssistantProps['t']
 }) {
   const reduced = motionReduced
@@ -520,10 +477,21 @@ function AnimatedReasoning({
   const [autoClosed, setAutoClosed] = useState(false)
   const summaryRef = useRef<HTMLSpanElement>(null)
   const fadeRootRef = useRef<HTMLDivElement>(null)
+  // The custom thinking auto-scroll drives the SAME node as the logarithmic
+  // fade, so it reuses that ref object rather than installing a second one
+  // (a callback ref would re-attach on every render).
+  const thinkBodyRef = fadeRootRef
   const localFadeSpeedRef = useRef(35)
   const fadeSpeedRef = followSpeedCpsRef ?? localFadeSpeedRef
+  const userScrolledRef = useRef(false)
+  const rafIdRef = useRef(0)
+  // Latest "the live stream still owns this scroller" state. Tracked on every
+  // render so the queued frame can re-read it: a stop or a collapse landing
+  // between scheduling and the frame must not move the viewport.
+  const followActiveRef = useRef(false)
+  followActiveRef.current = running && expanded
   const commitAnchorRef = useRef<HTMLDivElement>(null)
-  // The running→false flip is the AUTO-close: it collapses instantly and the
+  // The running鈫抐alse flip is the AUTO-close: it collapses instantly and the
   // follower's settle spring absorbs the height step. A later manual toggle
   // keeps the CSS glide.
   const displayed = useSmoothStreamContent(text, {
@@ -545,12 +513,87 @@ function AnimatedReasoning({
       setExpanded(running)
       setAutoClosed(!running)
     }
+    if (running) {
+      userScrolledRef.current = false
+    }
     // A commit that changes this block's height must hand the follower its
     // correction in the SAME task, before the grown-but-uncompensated frame
     // can reach a paint.
     notifyFollowCommit(commitAnchorRef.current)
   }, [running, thinkAutoExpand])
 
+  useEffect(() => {
+    // Only the live stream owns the reading position. A settled block is
+    // something to read from the top, so expanding a finished reasoning card
+    // must not scroll it 鈥?that would make its first lines unreachable.
+    if (!running || !expanded || userScrolledRef.current) return
+    const el = thinkBodyRef.current
+    if (el === null) return
+    if (rafIdRef.current === 0) {
+      rafIdRef.current = requestAnimationFrame(() => {
+        rafIdRef.current = 0
+        // Re-checked at frame time: the stream may have stopped, the block may
+        // have collapsed, or the user may have scrolled since scheduling. A
+        // queued frame never steals the position back.
+        if (!followActiveRef.current || userScrolledRef.current || el === null) return
+        const delta = el.scrollHeight - el.scrollTop - el.clientHeight
+        if (delta > 2) {
+          el.scrollTop = Number.MAX_SAFE_INTEGER
+        }
+      })
+    }
+  }, [running, expanded, shown])
+
+  useEffect(() => {
+    return () => {
+      if (rafIdRef.current !== 0) {
+        cancelAnimationFrame(rafIdRef.current)
+        rafIdRef.current = 0
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    const el = thinkBodyRef.current
+    if (el === null) return
+    let isPointerDown = false
+    const onWheel = (e: WheelEvent) => {
+      if (e.deltaY < 0) {
+        userScrolledRef.current = true
+      } else if (e.deltaY > 0) {
+        if (el.scrollHeight - el.scrollTop - el.clientHeight <= 30) {
+          userScrolledRef.current = false
+        }
+      }
+    }
+    const onPointerDown = () => {
+      isPointerDown = true
+    }
+    const onPointerUp = () => {
+      isPointerDown = false
+    }
+    const onScroll = () => {
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 30
+      if (atBottom) {
+        userScrolledRef.current = false
+      } else if (isPointerDown) {
+        userScrolledRef.current = true
+      }
+    }
+    el.addEventListener('wheel', onWheel, { passive: true })
+    el.addEventListener('pointerdown', onPointerDown, { passive: true })
+    window.addEventListener('pointerup', onPointerUp, { passive: true })
+    window.addEventListener('pointercancel', onPointerUp, { passive: true })
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => {
+      el.removeEventListener('wheel', onWheel)
+      el.removeEventListener('pointerdown', onPointerDown)
+      window.removeEventListener('pointerup', onPointerUp)
+      window.removeEventListener('pointercancel', onPointerUp)
+      el.removeEventListener('scroll', onScroll)
+    }
+  }, [])
+
   useEffect(() => {
     const element = summaryRef.current
     if (element === null) return
@@ -567,18 +610,29 @@ function AnimatedReasoning({
           leadingClassName={css.thinkLeading}
           titleClassName={css.thinkTitle}
           chevronClassName={css.thinkChevron}
-          icon={<IconThinkOutline14 size={14} />}
-          title="Think"
+          icon={<IconThink size={14} />}
+          // `message.think` is not in the `conversation` key union this prop is
+          // typed with: no Harness version owns it there. On 0.1.5+ it lives in
+          // the `chat` namespace, and on older builds only this plugin's own
+          // fallback dictionary has it. The layered lookup installed in
+          // index.ts resolves it either way, so the cast widens the key domain
+          // rather than skipping a lookup. No hardcoded label and no
+          // `<html lang>` sniffing: a key that resolves nowhere shows the key,
+          // which the locale routing test catches.
+          title={(t as unknown as (key: string) => string)('message.think')}
           open={expanded}
           onToggle={() => {
             setAutoClosed(false)
             setExpanded(value => !value)
           }}
-          // The auto-close at stream end snaps (no grid-track animation): the
-          // follower's settle spring absorbs the height step through the
-          // compositor, so animating the track too would double-animate the
-          // collapse. Manual toggles while streaming keep the glide.
-          bodyTransition={!autoClosed}
+          // The auto-close at stream end snaps on 0.1.x (no grid-track
+          // animation): the single row's follower absorbs the height step
+          // through the compositor, so animating the track too would
+          // double-animate the collapse. On 0.2.x the collapse lands exactly
+          // at the ownership handoff with nothing left to absorb it, so the
+          // track itself glides and the floor retreats gradually instead of
+          // teleporting. Manual toggles while streaming keep the glide.
+          bodyTransition={!autoClosed || !snapAutoCollapse}
           collapsedContent={(
             <>
               <span className={css.thinkSeparator} aria-hidden />
@@ -598,10 +652,11 @@ function AnimatedReasoning({
  * streaming is revealed by the smoother through the Harness Markdown
  * renderer at a rate that tracks arrival. Reasoning blocks keep the
  * built-in Think disclosure and only receive a smoothed text feed; the
- * outer node owns conversation-port follow while streaming; the final text
- * block keeps ownership while its settled reveal queue drains. The FPS guard
- * holds offscreen reveals when the frame rate is degraded. Settled text
- * renders with the full Markdown pipeline.
+ * outer node owns conversation-port follow through both streaming and the
+ * final text drain. Keeping one owner avoids a lifecycle handoff that would
+ * reopen and later retire a second runway. The FPS guard holds offscreen
+ * reveals when the frame rate is degraded. Settled text renders with the full
+ * Markdown pipeline.
  */
 export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNodeView({
   mode: _mode = DEFAULT_STREAM_CONFIG.mode,
@@ -614,6 +669,7 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
   controlScroll = true,
   motionPreference = DEFAULT_STREAM_SETTINGS.motionPreference,
   node,
+  groupPart,
   useTurnData,
   openFile,
   loadImage,
@@ -621,6 +677,14 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
   turnProcess,
   t,
 }: AssistantProps & {
+  /**
+   * dsh 0.2.x row split for one assistant step: the flow mounts the node
+   * twice — once with `groupPart: 'reasoning'` (reasoning blocks only) and
+   * once with `groupPart: 'response'` (everything else). Absent on 0.1.x,
+   * where the step renders as a single row; the pinned type predates the
+   * field, so it is declared here and erased at compile time.
+   */
+  groupPart?: 'reasoning' | 'response' | undefined
   mode?: StreamMode
   preset?: StreamSmoothingPreset
   revealCharsPerSec?: number
@@ -633,6 +697,31 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
 }) {
   const data = node.data
   const streaming = data.status === 'running'
+  // dsh 0.2.x mounts the assistant step twice with a `groupPart` split: the
+  // `reasoning` row carries the reasoning blocks and the `response` row the
+  // rest. Mirrors the built-in AssistantMarkdown filter so the takeover does
+  // not render every block in both rows (which duplicated each reasoning
+  // paragraph in the transcript on 0.2.x).
+  const blocks = groupPart === 'reasoning'
+    ? data.blocks.filter(block => block.kind === 'reasoning')
+    : groupPart === 'response'
+      ? data.blocks.filter(block => block.kind !== 'reasoning')
+      : data.blocks
+  // dsh 0.2.x mounts this view twice on the same conversation scrollport —
+  // the reasoning row above and the response row below. Handing the port to
+  // whichever row carries the streaming tail still left the think phase
+  // jumpy: while reasoning streamed, the reasoning-row host owned the port
+  // from a mid-transcript anchor (the empty response row and the turn status
+  // render below it), and the viewport hopped upward as the glide steered
+  // toward positions its bottom-row tuning does not describe. The response
+  // row is the geometric bottom row for the whole turn, so owning it from
+  // the first streamed block reproduces the 0.1.x single-row configuration
+  // the glide was tuned for: think growth happens above the anchor, the
+  // text reveal grows inside it, and ownership never flips mid-turn. The
+  // reasoning row never touches the port — its think box paces its own
+  // reveal and auto-scrolls internally. 0.1.x mounts a single row
+  // (groupPart undefined) and keeps the previous behavior.
+  const rowOwnsPort = groupPart !== 'reasoning'
   const reduced = useMotionReduced(motionPreference)
   // The Host's completion-fold decision for THIS node's inline reasoning:
   // only the answer step folds, only in compact-transcript mode, and only
@@ -648,8 +737,19 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
   const rootSpeedRef = useRef(35)
   const rootRevealedCharsRef = useRef(0)
   const rootRevealScaleRef = useRef(1)
-  const reasoningTailIndex = streaming && data.blocks[data.blocks.length - 1]?.kind === 'reasoning'
-    ? data.blocks.length - 1
+  const previousStreamingRef = useRef(streaming)
+  const [textRevealActive, setTextRevealActive] = useState(false)
+  const completionCandidate = !streaming
+    && previousStreamingRef.current
+    && blocks.some(block => block.kind === 'text' && block.text.trim() !== '')
+  useLayoutEffect(() => {
+    previousStreamingRef.current = streaming
+  }, [streaming])
+  const updateTextRevealActivity = useCallback((active: boolean): void => {
+    setTextRevealActive(previous => previous === active ? previous : active)
+  }, [])
+  const reasoningTailIndex = streaming && blocks[blocks.length - 1]?.kind === 'reasoning'
+    ? blocks.length - 1
     : -1
   const reasoningOwnsSpeed = reasoningTailIndex !== -1
   const rootPredictiveRef = useRef(false)
@@ -690,25 +790,36 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
   })
   const hasVisible = streaming
     || data.status === 'interrupted'
-    || data.blocks.some(block => block.kind !== 'tool-call')
+    || blocks.some(block => block.kind !== 'tool-call')
   if (!hasVisible) return null
-  const announcementText = data.blocks
+  const announcementText = blocks
     .filter(block => block.kind === 'text')
     .map(block => block.text)
     .join('\n')
+  // 0.2.x reasoning rows see a blocks array filtered to reasoning only, so
+  // `index === last` stays true while a later tool-call or text block runs in
+  // the same step — the disclosure then waits for the whole step to settle
+  // before snapping shut, and that late full-height collapse jumps the page.
+  // Tail-ness must be judged against the ORIGINAL step blocks: any later
+  // block of any kind closes the think box promptly, exactly as the 0.1.x
+  // single-row layout did by construction.
+  const stepTailIsReasoning = data.blocks[data.blocks.length - 1]?.kind === 'reasoning'
 
   const rendered: ReactNode[] = []
-  const last = data.blocks.length - 1
+  const last = blocks.length - 1
   let lastFollow = -1
-  for (let index = 0; index < data.blocks.length; index += 1) {
-    const kind = data.blocks[index]?.kind
+  let lastText = -1
+  for (let index = 0; index < blocks.length; index += 1) {
+    const kind = blocks[index]?.kind
     if (kind === 'text' || kind === 'reasoning') lastFollow = index
+    if (kind === 'text') lastText = index
   }
-  for (let index = 0; index < data.blocks.length; index += 1) {
-    const block = data.blocks[index]
+  for (let index = 0; index < blocks.length; index += 1) {
+    const block = blocks[index]
     if (block === undefined) continue
     switch (block.kind) {
       case 'text':
+        if (!streaming && block.text.trim() === '') break
         rendered.push(
           <AnimatedMarkdownText
             key={index}
@@ -718,14 +829,13 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
             streaming={streaming}
             logarithmicFade={logarithmicFade && data.status !== 'interrupted'}
             motionReduced={reduced}
-            ownFollow={!streaming && index === lastFollow}
             followSpeedCpsRef={index === lastFollow ? rootSpeedRef : undefined}
             followRevealedCharsRef={index === lastFollow ? rootRevealedCharsRef : undefined}
             followRevealScaleRef={index === lastFollow ? rootRevealScaleRef : undefined}
             onPredictiveChange={index === lastFollow ? updateTextPrediction : undefined}
+            onRevealActivityChange={index === lastText ? updateTextRevealActivity : undefined}
             preset={preset}
             shouldHoldBack={shouldHoldBack}
-            controlScroll={controlScroll}
           />,
         )
         break
@@ -734,7 +844,7 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
           <FoldableReasoning key={index} hidden={reasoningHidden} reveal={revealProcess}>
             <AnimatedReasoning
               text={block.text}
-              running={streaming && index === last}
+              running={streaming && index === last && (groupPart !== 'reasoning' || stepTailIsReasoning)}
               preset={preset}
               thinkAutoExpand={thinkAutoExpand}
               logarithmicFade={logarithmicFade && data.status !== 'interrupted'}
@@ -742,6 +852,7 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
               shouldHoldBack={shouldHoldBack}
               followSpeedCpsRef={reasoningOwnsSpeed && index === last ? rootSpeedRef : undefined}
               followRevealScaleRef={reasoningOwnsSpeed && index === last ? rootRevealScaleRef : undefined}
+              snapAutoCollapse={groupPart === undefined}
               t={t}
             />
           </FoldableReasoning>,
@@ -750,8 +861,8 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
       case 'image': {
         const start = index
         const group = [block]
-        while (index + 1 < data.blocks.length) {
-          const next = data.blocks[index + 1]
+        while (index + 1 < blocks.length) {
+          const next = blocks[index + 1]
           if (next === undefined || next.kind !== 'image') break
           group.push(next)
           index += 1
@@ -780,12 +891,15 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
     <div ref={guardRef} className={css.root} data-streaming={streaming || undefined}>
       <StreamAnnouncement text={announcementText} active={streaming && !reduced} />
       <FollowHost
-        active={streaming && !reduced}
+        // The status can close before its final text arm drains. Retain this
+        // same owner across that boundary; the candidate bridges the one
+        // layout commit before the child reports its live reveal state.
+        active={!reduced && (streaming || completionCandidate || textRevealActive)}
         speedCpsRef={rootSpeedRef}
         revealedCharsRef={rootRevealedCharsRef}
         revealScaleRef={rootRevealScaleRef}
         predictiveRef={rootPredictiveRef}
-        controlScroll={controlScroll}
+        controlScroll={controlScroll && rowOwnsPort}
       >
         <div className={css.body}>
           {rendered}

package/src/client/debugRuntime.ts

@@ -30,12 +30,46 @@ export interface DebugMetrics {
   followRevealScale: number
   followFollowing: boolean
   followConstrained: boolean
+  /**
+   * Terminal-follow phase. `terminal-drain` (producer stopped, reveal queue
+   * still owes text) and `host-cascade` (host swapping status / collapsing
+   * Think / mounting the tail) need OPPOSITE corrections, so they must be
+   * distinguishable in the panel rather than inferred from `followActive`.
+   */
+  followTerminalPhase: FollowTerminalPhase
+  /** Physical owned bottom margin currently written into the DOM. */
+  followRunwayPx: number
+  /** Budget the terminal phase may spend, capped by the runway. */
+  followTerminalBudgetPx: number
+  /** `runwayPx - visibleReserve`: the term that turns into visible motion. */
+  followBaselineShiftPx: number
+  /** Screen-space reading-anchor delta this frame (null when unmeasurable). */
+  followAnchorDeltaPx: number | null
+  /** Reveal characters the smoother still owes after the producer stopped. */
+  followRemainingRevealChars: number
   scrollTop: number | null
   scrollHeight: number | null
   clientHeight: number | null
   lastUpdatedMs: number | null
 }
 
+export type FollowTerminalPhase = 'live' | 'terminal-drain' | 'host-cascade' | 'natural'
+
+/**
+ * Allocation-free read of the newest stream metric. The follower polls this
+ * every frame to learn whether the producer has stopped while reveal work
+ * remains, and `getSnapshot()` would allocate a fresh state object per frame
+ * just to answer one boolean.
+ */
+export function readNewestStreamMetric(): { producerComplete: boolean; backlog: number } | null {
+  let newest: StreamMetric | undefined
+  for (const candidate of streamMetrics.values()) {
+    if (newest === undefined || candidate.updatedAt > newest.updatedAt) newest = candidate
+  }
+  if (newest === undefined) return null
+  return { producerComplete: newest.producerComplete, backlog: newest.backlog }
+}
+
 export interface DebugRuntimeState {
   available: boolean
   enabled: boolean
@@ -70,6 +104,12 @@ interface StreamMetric {
   targetChars: number
   displayedChars: number
   active: boolean
+  /**
+   * The producer (model stream) has stopped even if the reveal queue still owes
+   * characters. The follower needs exactly this bit to tell a `terminal-drain`
+   * from live streaming, and it cannot be derived from `backlog > 0` alone.
+   */
+  producerComplete: boolean
   updatedAt: number
 }
 
@@ -85,6 +125,12 @@ interface FollowMetric {
   scrollHeight: number
   clientHeight: number
   active: boolean
+  terminalPhase: FollowTerminalPhase
+  runwayPx: number
+  terminalBudgetPx: number
+  baselineShiftPx: number
+  readingAnchorDeltaPx: number | null
+  remainingRevealChars: number
   updatedAt: number
 }
 
@@ -105,6 +151,12 @@ const EMPTY_METRICS: DebugMetrics = {
   followRevealScale: 1,
   followFollowing: false,
   followConstrained: false,
+  followTerminalPhase: 'live',
+  followRunwayPx: 0,
+  followTerminalBudgetPx: 0,
+  followBaselineShiftPx: 0,
+  followAnchorDeltaPx: null,
+  followRemainingRevealChars: 0,
   scrollTop: null,
   scrollHeight: null,
   clientHeight: null,
@@ -181,6 +233,12 @@ function currentMetrics(timestamp: number): DebugMetrics {
     followRevealScale: follow?.revealScale ?? 1,
     followFollowing: follow?.following ?? false,
     followConstrained: follow?.constrained ?? false,
+    followTerminalPhase: follow?.terminalPhase ?? 'live',
+    followRunwayPx: follow?.runwayPx ?? 0,
+    followTerminalBudgetPx: follow?.terminalBudgetPx ?? 0,
+    followBaselineShiftPx: follow?.baselineShiftPx ?? 0,
+    followAnchorDeltaPx: follow?.readingAnchorDeltaPx ?? null,
+    followRemainingRevealChars: follow?.remainingRevealChars ?? 0,
     scrollTop: follow?.scrollTop ?? null,
     scrollHeight: follow?.scrollHeight ?? null,
     clientHeight: follow?.clientHeight ?? null,