dsh-smooth-stream 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-smooth-stream",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "DeepSeek Harness (dsh) plugin: silky streaming reveal, no flicker. dsh 丝滑流式渲染插件。",
   "license": "MIT",
   "type": "module",
@@ -74,6 +74,7 @@
   },
   "scripts": {
     "build": "tsdown",
+    "build:repro": "esbuild repro/main.tsx --bundle --format=esm --platform=browser --loader:.css=local-css --outfile=repro/bundle.js",
     "prepare": "tsdown",
     "test": "vitest run",
     "typecheck": "tsc -p tsconfig.json --pretty false"
@@ -146,6 +147,7 @@
     "@types/node": "^22.20.0",
     "@types/react": "~18.3.1",
     "@types/react-dom": "~18.3.0",
+    "esbuild": "^0.28.2",
     "jsdom": "^26.1.0",
     "lightningcss": "^1.30.1",
     "react": "^18.3.1",

package/src/client/FollowHost.tsx

@@ -1,21 +1,66 @@
-import { useRef, type ReactNode } from 'react'
+import { useEffect, useRef, type ReactNode } from 'react'
 import { useConversationFollow } from './teleprompterGlide.ts'
 import css from './TypewriterAssistantNodeView.module.css'
 
 /**
  * Document-flow host that owns conversation-port follow while `active`.
- * Shared by assistant blocks and every other growing Chat row.
+ * Shared by assistant blocks and every other Agent Chat row. `onGrowth` lets
+ * generic wrapped renderers re-arm one glide when their DOM grows without
+ * requiring a business-kind-specific lifecycle predicate.
  */
 export function FollowHost({
   active,
+  entrance = false,
+  onEntranceSettled,
+  onGrowth,
+  entranceExtentRef,
   speedCpsRef,
+  revealScaleRef,
+  predictive = true,
+  predictiveRef,
+  hostRef,
   children,
 }: {
   active: boolean
+  entrance?: boolean
+  onEntranceSettled?: (() => void) | undefined
+  onGrowth?: ((deltaPx: number) => void) | undefined
+  entranceExtentRef?: { current: number | null } | undefined
   speedCpsRef: { current: number }
+  revealScaleRef?: { current: number } | undefined
+  predictive?: boolean
+  predictiveRef?: { current: boolean } | undefined
+  hostRef?: { current: HTMLDivElement | null } | undefined
   children: ReactNode
 }) {
-  const rootRef = useRef<HTMLDivElement>(null)
-  useConversationFollow(rootRef, active, speedCpsRef)
+  const localRootRef = useRef<HTMLDivElement>(null)
+  const rootRef = hostRef ?? localRootRef
+  useConversationFollow(
+    rootRef,
+    active || entrance,
+    speedCpsRef,
+    revealScaleRef,
+    predictive,
+    entrance,
+    onEntranceSettled,
+    predictiveRef,
+    entranceExtentRef,
+  )
+  useEffect(() => {
+    if (onGrowth === undefined || typeof ResizeObserver === 'undefined') return
+    const root = rootRef.current
+    if (root === null) return
+    let previousHeight: number | null = null
+    const observer = new ResizeObserver(entries => {
+      const nextHeight = entries[0]?.contentRect.height ?? root.getBoundingClientRect().height
+      if (!Number.isFinite(nextHeight)) return
+      if (previousHeight !== null && nextHeight > previousHeight + 0.5) {
+        onGrowth(nextHeight - previousHeight)
+      }
+      previousHeight = nextHeight
+    })
+    observer.observe(root)
+    return () => { observer.disconnect() }
+  }, [onGrowth])
   return <div ref={rootRef} className={css.follow}>{children}</div>
 }

package/src/client/TypewriterAssistantNodeView.module.css

@@ -223,6 +223,7 @@
  * (see useConversationFollow).
  */
 .follow {
+  contain: layout style;
   min-width: 0;
 }
 

package/src/client/TypewriterAssistantNodeView.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode } from 'react'
+import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode } from 'react'
 import { IconThinkOutline14, 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'
@@ -32,10 +32,73 @@ interface AnimatedMarkdownTextProps extends MarkdownProps {
   announce: boolean
   /** True on the last text block: that block owns conversation follow. */
   ownFollow: boolean
+  followSpeedCpsRef?: { current: number } | undefined
+  followRevealScaleRef?: { current: number } | undefined
+  onPredictiveChange?: ((predictive: boolean) => void) | undefined
   preset: StreamSmoothingPreset
   shouldHoldBack: () => boolean
 }
 
+/** Conservative fallback before the streaming Markdown tail has geometry. */
+const PREDICTIVE_WRAP_FALLBACK_CHARS = 32
+
+function approximateInlineWidth(text: string, emPx: number): number {
+  let width = 0
+  for (const char of text) {
+    if (/\s/u.test(char)) width += emPx * 0.33
+    else if (/^[\x00-\x7f]$/u.test(char)) width += emPx * 0.56
+    else width += emPx
+  }
+  return width
+}
+
+/** Whether buffered source can reach a new visual line before it drains. */
+function pendingTextCanGrow(root: HTMLElement | null, pending: string): boolean {
+  if (pending === '') return false
+  if (/[\r\n]/u.test(pending)) return true
+  const pendingChars = [...pending]
+  if (
+    root === null
+    || typeof document.createTreeWalker !== 'function'
+    || typeof NodeFilter === 'undefined'
+  ) {
+    return pendingChars.length >= PREDICTIVE_WRAP_FALLBACK_CHARS
+  }
+
+  const rootRect = root.getBoundingClientRect()
+  const rootWidth = Math.max(0, rootRect.width, rootRect.right - rootRect.left, root.clientWidth)
+  if (rootWidth <= 0) return pendingChars.length >= PREDICTIVE_WRAP_FALLBACK_CHARS
+
+  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
+  const pendingWidth = approximateInlineWidth(pending, fontSize)
+  if (tail === null || typeof document.createRange !== 'function') {
+    return pendingWidth >= rootWidth
+  }
+
+  try {
+    const length = tail.textContent?.length ?? 0
+    if (length <= 0) return pendingWidth >= 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 pendingWidth >= rootWidth
+    }
+    const remainingWidth = Math.max(0, contentRight - tailRect.right)
+    return pendingWidth >= remainingWidth + fontSize * 0.35
+  } catch {
+    return pendingWidth >= rootWidth
+  }
+}
+
 /**
  * Smooth streaming text arm. While the reply runs, the accumulated source is
  * revealed through the smoother at a rate that tracks the model's arrival
@@ -54,38 +117,69 @@ function AnimatedMarkdownText({
   streaming,
   announce,
   ownFollow,
+  followSpeedCpsRef,
+  followRevealScaleRef,
+  onPredictiveChange,
   preset,
   shouldHoldBack,
 }: AnimatedMarkdownTextProps) {
   const reduced = usePrefersReducedMotion()
   const [typing, setTyping] = useState(streaming)
-  const speedCpsRef = useRef(35)
+  const localSpeedCpsRef = useRef(35)
+  const followRootRef = useRef<HTMLDivElement>(null)
+  const predictionSourceRef = useRef<string | null>(null)
+  const predictionStateRef = useRef(false)
+  const speedCpsRef = followSpeedCpsRef ?? localSpeedCpsRef
   const displayed = useSmoothStreamContent(text, {
     enabled: typing && !reduced,
+    inputComplete: !streaming,
     preset,
     shouldHoldBack,
     speedCpsRef,
+    revealScaleRef: followRevealScaleRef,
   })
   const shown = reduced ? text : displayed
   const live = typing && !reduced
 
+  useLayoutEffect(() => {
+    if (onPredictiveChange === undefined) return
+    const pending = text.slice(shown.length)
+    const sourceChanged = predictionSourceRef.current !== text
+    const next = !live || !streaming || pending === ''
+      ? false
+      : sourceChanged
+        ? pendingTextCanGrow(followRootRef.current, pending)
+        : predictionStateRef.current
+    predictionSourceRef.current = text
+    predictionStateRef.current = next
+    onPredictiveChange(next)
+  }, [live, onPredictiveChange, shown, streaming, text])
+
   // The stream closed: keep revealing the remaining queue, then swap to the
   // settled parse exactly once. The markdown tree stays mounted until then.
   useEffect(() => {
     if (typing && !streaming && shown.length === text.length) setTyping(false)
   }, [shown, streaming, text, typing])
 
-  if (live) {
-    return (
-      <>
-        {announce && <span className={css.visuallyHidden} aria-live="polite">{text}</span>}
-        <FollowHost active={ownFollow} speedCpsRef={speedCpsRef}>
-          <MarkdownText text={shown} streaming codeLabels={codeLabels} />
-        </FollowHost>
-      </>
-    )
-  }
-  return <MarkdownText text={text} codeLabels={codeLabels} fileMentions={fileMentions} />
+  return (
+    <>
+      {live && announce && <span className={css.visuallyHidden} aria-live="polite">{text}</span>}
+      <FollowHost
+        active={live && ownFollow}
+        speedCpsRef={speedCpsRef}
+        revealScaleRef={followRevealScaleRef}
+        predictive={streaming}
+        hostRef={followRootRef}
+      >
+        <MarkdownText
+          text={live ? shown : text}
+          streaming={live}
+          codeLabels={codeLabels}
+          fileMentions={live ? undefined : fileMentions}
+        />
+      </FollowHost>
+    </>
+  )
 }
 
 function imageLabels(t: AssistantProps['t']): MessageImageLabels {
@@ -129,6 +223,8 @@ function AnimatedReasoning({
   thinkAutoExpand,
   shouldHoldBack,
   followSpeedCpsRef,
+  followRevealScaleRef,
+  onExpandedChange,
   t,
 }: {
   text: string
@@ -137,6 +233,8 @@ function AnimatedReasoning({
   thinkAutoExpand: boolean
   shouldHoldBack: () => boolean
   followSpeedCpsRef?: { current: number } | undefined
+  followRevealScaleRef?: { current: number } | undefined
+  onExpandedChange?: ((expanded: boolean) => void) | undefined
   t: AssistantProps['t']
 }) {
   const reduced = usePrefersReducedMotion()
@@ -147,16 +245,21 @@ function AnimatedReasoning({
     preset,
     shouldHoldBack,
     speedCpsRef: followSpeedCpsRef,
+    revealScaleRef: followRevealScaleRef,
   })
   const shown = running && !reduced ? displayed : text
   const summary = running ? latestLine(shown) : firstLine(text)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     // Only the running state owns disclosure while auto-expand is on; with it
     // off, a manual toggle is never wrestled back by the stream.
     if (thinkAutoExpand) setExpanded(running)
   }, [running, thinkAutoExpand])
 
+  useLayoutEffect(() => {
+    onExpandedChange?.(expanded)
+  }, [expanded, onExpandedChange])
+
   useEffect(() => {
     const element = summaryRef.current
     if (element === null) return
@@ -224,12 +327,29 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
 }) {
   const data = node.data
   const streaming = data.status === 'running'
+  const reduced = usePrefersReducedMotion()
   const { ref: guardRef, shouldHoldBack } = useFpsGuard(streaming)
   const rootSpeedRef = useRef(35)
-  const reasoningOwnsSpeed = streaming && data.blocks[data.blocks.length - 1]?.kind === 'reasoning'
-  useEffect(() => {
+  const rootRevealScaleRef = useRef(1)
+  const reasoningTailIndex = streaming && data.blocks[data.blocks.length - 1]?.kind === 'reasoning'
+    ? data.blocks.length - 1
+    : -1
+  const reasoningOwnsSpeed = reasoningTailIndex !== -1
+  const rootPredictiveRef = useRef(false)
+  const previousReasoningTailRef = useRef(-1)
+  if (reasoningTailIndex !== previousReasoningTailRef.current) {
+    rootPredictiveRef.current = reasoningOwnsSpeed ? thinkAutoExpand : false
     if (!reasoningOwnsSpeed) rootSpeedRef.current = 35
-  }, [reasoningOwnsSpeed])
+    previousReasoningTailRef.current = reasoningTailIndex
+  }
+  const updateReasoningExpanded = useMemo(
+    () => (expanded: boolean): void => { rootPredictiveRef.current = expanded },
+    [],
+  )
+  const updateTextPrediction = useMemo(
+    () => (predictive: boolean): void => { rootPredictiveRef.current = predictive },
+    [],
+  )
   const turn = node.location.kind === 'turn' || node.location.kind === 'step'
     ? node.location.turn
     : undefined
@@ -273,6 +393,9 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
             streaming={streaming}
             announce={index === last}
             ownFollow={!streaming && index === lastFollow}
+            followSpeedCpsRef={index === lastFollow ? rootSpeedRef : undefined}
+            followRevealScaleRef={index === lastFollow ? rootRevealScaleRef : undefined}
+            onPredictiveChange={index === lastFollow ? updateTextPrediction : undefined}
             preset={preset}
             shouldHoldBack={shouldHoldBack}
           />,
@@ -288,6 +411,8 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
             thinkAutoExpand={thinkAutoExpand}
             shouldHoldBack={shouldHoldBack}
             followSpeedCpsRef={reasoningOwnsSpeed && index === last ? rootSpeedRef : undefined}
+            followRevealScaleRef={reasoningOwnsSpeed && index === last ? rootRevealScaleRef : undefined}
+            onExpandedChange={index === reasoningTailIndex ? updateReasoningExpanded : undefined}
             t={t}
           />,
         )
@@ -323,7 +448,12 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
 
   return (
     <div ref={guardRef} className={css.root} data-streaming={streaming || undefined}>
-      <FollowHost active={streaming} speedCpsRef={rootSpeedRef}>
+      <FollowHost
+        active={streaming && !reduced}
+        speedCpsRef={rootSpeedRef}
+        revealScaleRef={rootRevealScaleRef}
+        predictiveRef={rootPredictiveRef}
+      >
         <div className={css.body}>
           {rendered}
           {data.status === 'interrupted' && <span className={css.stopped}>{t('message.stopped')}</span>}

package/src/client/TypewriterToolNodeView.tsx

@@ -1,5 +1,7 @@
-import { createElement, useRef, type ComponentType } from 'react'
+import { createElement, useCallback, useEffect, useLayoutEffect, useRef, useState, type ComponentType } from 'react'
 import { FollowHost } from './FollowHost.tsx'
+import { useProgressiveDomText } from './useProgressiveDomText.ts'
+import { hasRecentConversationFollow } from './teleprompterGlide.ts'
 
 /** Props forwarded through a follow wrap; extra kit seats pass through. */
 export type FollowWrapProps = {
@@ -7,10 +9,29 @@ export type FollowWrapProps = {
   renderSlot?: unknown
 } & Record<string, unknown>
 
+function openAgentLocation(node: unknown): boolean {
+  if (node === null || typeof node !== 'object' || !('location' in node)) return false
+  const location = (node as { location: unknown }).location
+  if (location === null || typeof location !== 'object' || !('kind' in location)) return false
+  const kind = (location as { kind: unknown }).kind
+  if (!('turn' in location)) return false
+  const turn = (location as { turn: unknown }).turn
+  if (turn === null || typeof turn !== 'object' || !('status' in turn)) return false
+  if (kind === 'turn') return (turn as { status: unknown }).status === 'open'
+  if (kind !== 'step' || !('step' in location)) return false
+  const step = (location as { step: unknown }).step
+  return step !== null
+    && typeof step === 'object'
+    && 'status' in step
+    && (step as { status: unknown }).status === 'open'
+}
+
 /**
- * True while a Chat node is still growing: an assistant/workflow `status:
- * 'running'` payload, a Tool root that has not settled (`kind` absent), or a
- * model-retry whose current attempt is still `scheduled`.
+ * True while a Chat node has an explicitly unfinished lifecycle: an
+ * assistant/workflow `status: 'running'` payload, a Tool root that has not
+ * settled (`kind` absent), or a model-retry whose current attempt is still
+ * `scheduled`. Open-but-otherwise-unknown rows are covered by
+ * `isFollowableChatNode` below.
  * @param node - The Chat node's view `node` prop.
  * @returns whether this row should own conversation follow.
  */
@@ -19,6 +40,21 @@ export function isGrowingChatNode(node: unknown): boolean {
   const data = (node as { data: unknown }).data
   if (data === null || typeof data !== 'object') return false
   if ('status' in data && (data as { status: unknown }).status === 'running') return true
+  if (
+    'kind' in data
+    && (data as { kind: unknown }).kind === 'command'
+    && 'outcome' in data
+    && (data as { outcome: unknown }).outcome === null
+  ) return true
+  if ('command' in data) {
+    const command = (data as { command: unknown }).command
+    if (
+      command !== null
+      && typeof command === 'object'
+      && 'outcome' in command
+      && (command as { outcome: unknown }).outcome === null
+    ) return true
+  }
   if ('root' in data) {
     const root = (data as { root: unknown }).root
     if (root !== null && typeof root === 'object' && !('kind' in root)) return true
@@ -36,17 +72,156 @@ export function isGrowingChatNode(node: unknown): boolean {
 }
 
 /**
- * Wrap a prior Chat node renderer so a growing row shares conversation
- * follow. Presentation stays with the wrapped component; kit seats
- * (`renderSlot`, locale, inject) pass through unchanged.
+ * True for any Agent-owned Chat row in the currently open turn/step. This is
+ * the extensibility boundary: a newly registered Context, Command, Tool, or
+ * workflow renderer is followed without adding another kind-specific branch.
+ */
+export function isFollowableChatNode(node: unknown): boolean {
+  return isGrowingChatNode(node) || openAgentLocation(node)
+}
+
+/**
+ * True when a newly mounted Agent-owned row belongs to the current open
+ * Turn/Step, or is itself an unresolved growing lifecycle.
+ * @param node - The Chat node's view `node` prop.
+ * @returns whether its initial height should enter through conversation follow.
+ */
+export function shouldAnimateChatNodeEntrance(node: unknown): boolean {
+  return isFollowableChatNode(node)
+}
+
+/** Runtime-only fallback for unknown or terminal rows at the active flow tip. */
+function liveAgentTailMode(root: HTMLElement): 'turn' | 'handoff' | null {
+  const port = root.closest<HTMLElement>('[data-conversation-scroll]')
+  if (port === null) return null
+  const row = root.closest<HTMLElement>('[data-chat-flow-key]')
+  if (row !== null) {
+    let sibling = row.nextElementSibling
+    while (sibling !== null) {
+      if (sibling instanceof HTMLElement && sibling.hasAttribute('data-chat-flow-key')) return null
+      sibling = sibling.nextElementSibling
+    }
+  }
+  const flow = root.closest<HTMLElement>('[data-chat-flow]')
+  const hasTurnStatus = flow !== null && [...flow.children].some(child =>
+    child instanceof HTMLElement
+    && child.getAttribute('role') === 'status'
+    && !child.hasAttribute('data-chat-flow-key'))
+  if (hasTurnStatus) return 'turn'
+  return hasRecentConversationFollow(port) ? 'handoff' : null
+}
+
+/**
+ * Wrap a prior Agent Chat renderer so its entrance and later growth share
+ * conversation follow. Presentation stays with the wrapped component; kit
+ * seats (`renderSlot`, locale, inject) pass through unchanged.
  * @param Inner - The already-registered row component.
  * @returns A follow-hosted row.
  */
 export function wrapFollowNodeView(Inner: ComponentType<FollowWrapProps>) {
   return function TypewriterFollowNodeView(props: FollowWrapProps) {
     const speedCpsRef = useRef(35)
+    const hostRef = useRef<HTMLDivElement>(null)
+    const growing = isGrowingChatNode(props.node)
+    const structurallyFollowable = isFollowableChatNode(props.node)
+    const structuralRef = useRef(structurallyFollowable)
+    const [runtimeFollowable, setRuntimeFollowable] = useState(false)
+    const runtimePersistentRef = useRef(false)
+    const runtimeHandledRef = useRef(false)
+    const followable = structurallyFollowable || runtimeFollowable
+    const revealInitialRef = useRef(true)
+    const [entering, setEntering] = useState(() => shouldAnimateChatNodeEntrance(props.node))
+    const [growthPulse, setGrowthPulse] = useState(false)
+    const followableRef = useRef(false)
+    const growingRef = useRef(growing)
+    const entranceActiveRef = useRef(entering || growthPulse)
+    const growthExtentRef = useRef<number | null>(null)
+    const mountedRef = useRef(true)
+    const pulseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    structuralRef.current = structurallyFollowable
+    followableRef.current = followable
+    growingRef.current = growing
+    entranceActiveRef.current = entering || growthPulse
+    const finishRuntimeReveal = useCallback(() => {
+      if (structuralRef.current || runtimePersistentRef.current) return
+      runtimeHandledRef.current = true
+      setRuntimeFollowable(false)
+    }, [])
+    useProgressiveDomText(
+      hostRef,
+      followable,
+      revealInitialRef.current,
+      speedCpsRef,
+      runtimeFollowable ? finishRuntimeReveal : undefined,
+    )
+    useLayoutEffect(() => {
+      if (structurallyFollowable) return
+      const root = hostRef.current
+      if (root === null) return
+      const mode = liveAgentTailMode(root)
+      if (runtimeFollowable) {
+        if (runtimePersistentRef.current && mode !== 'turn') {
+          runtimePersistentRef.current = false
+          runtimeHandledRef.current = true
+          setRuntimeFollowable(false)
+        }
+        return
+      }
+      if (runtimeHandledRef.current || mode === null) return
+      runtimePersistentRef.current = mode === 'turn'
+      setRuntimeFollowable(true)
+      setEntering(true)
+    }, [runtimeFollowable, structurallyFollowable])
+    const finishEntrance = useCallback(() => {
+      growthExtentRef.current = null
+      if (pulseTimerRef.current !== null) {
+        clearTimeout(pulseTimerRef.current)
+        pulseTimerRef.current = null
+      }
+      setEntering(false)
+      setGrowthPulse(false)
+    }, [])
+    const onGrowth = useCallback((deltaPx: number) => {
+      // A row with an explicit streaming lifecycle keeps its original owner
+      // through completion. For every other Agent row, a pure layout increase
+      // is enough evidence to glide it; renderer kind and payload shape are
+      // intentionally irrelevant.
+      if (
+        !mountedRef.current
+        || !followableRef.current
+        || growingRef.current
+        || entranceActiveRef.current
+      ) return
+      growthExtentRef.current = deltaPx
+      setGrowthPulse(true)
+      if (pulseTimerRef.current !== null) clearTimeout(pulseTimerRef.current)
+      pulseTimerRef.current = setTimeout(() => {
+        pulseTimerRef.current = null
+        setGrowthPulse(false)
+      }, 1200)
+    }, [])
+    useEffect(() => {
+      mountedRef.current = true
+      return () => {
+        mountedRef.current = false
+        if (pulseTimerRef.current !== null) clearTimeout(pulseTimerRef.current)
+      }
+    }, [])
     return (
-      <FollowHost active={isGrowingChatNode(props.node)} speedCpsRef={speedCpsRef}>
+      <FollowHost
+        active={growing}
+        entrance={entering || growthPulse}
+        onEntranceSettled={finishEntrance}
+        onGrowth={followable ? onGrowth : undefined}
+        entranceExtentRef={growthExtentRef}
+        speedCpsRef={speedCpsRef}
+        // Generic Agent rows reveal and spring their measured growth, but do
+        // not continuously reserve space for a future Markdown line wrap.
+        // Keeping that assistant-only prediction here creates an idle gap
+        // above TurnStatus and a visible return when a short Tool row settles.
+        predictive={false}
+        hostRef={hostRef}
+      >
         {createElement(Inner, props)}
       </FollowHost>
     )

package/src/client/index.ts

@@ -28,9 +28,22 @@ type AssistantProps = ChatNodeViewProps<'assistant-step'>
 const STREAM_MODES: readonly string[] = ['typewriter', 'teleprompter']
 const STREAM_PRESETS: readonly string[] = ['realtime', 'balanced', 'silky']
 
-/** Human-authored rows stay on the built-in renderer; `assistant-step` is replaced. */
+/**
+ * The assistant renderer owns its own character queue and conversation
+ * follower, so wrapping it again would create two scroll owners. Human input
+ * stays immediate; every Agent-owned output renderer goes through the same
+ * generic follow boundary. This is deliberately keyed by the owner that
+ * provides the renderer, not by individual tool names, so new Context,
+ * Command, and Tool rows are covered automatically.
+ */
 const SKIP_WRAP = new Set(['assistant-step', 'user', 'steering', 'command-input'])
 
+/** React function/class or an exotic component such as memo/forwardRef/lazy. */
+function isWrappableComponent(value: unknown): value is ComponentType<FollowWrapProps> {
+  return typeof value === 'function'
+    || (value !== null && typeof value === 'object' && '$$typeof' in value)
+}
+
 /**
  * Read the Host-bridged boot config. The inline script is produced by this
  * plugin's Host half from a schema-validated value, so only the structural
@@ -60,16 +73,19 @@ function readBootConfig(): StreamConfig {
 }
 
 /**
- * Wrap every keyed Chat row except `assistant-step` in place. A second
+ * Wrap every Agent-owned keyed Chat row except the assistant renderer in
+ * place. A second
  * register with the same `children` table throws because the child slot is
  * already declared, and only the winning entry receives `renderSlot`;
  * swapping `entry.component` keeps the original children, locale, and inject
  * seats. `assistant-step` is replaced below so text and Think use the
- * typewriter reveal.
+ * typewriter reveal. The wrapper owns only the shared layout-growth/follow
+ * lifecycle; the Harness keeps each renderer's controls, disclosures, and
+ * cards intact.
  * @param ctx - Browser context carrying the slot registry.
  * @returns Restorer that puts the original components back.
  */
-function wrapGrowingChatRows(ctx: ClientContext): () => void {
+function wrapAgentChatRows(ctx: ClientContext): () => void {
   const restores: Array<() => void> = []
   const wrapped = new WeakSet<object>()
 
@@ -78,7 +94,7 @@ function wrapGrowingChatRows(ctx: ClientContext): () => void {
       const key = entry.options.key
       if (key === undefined || SKIP_WRAP.has(key)) continue
       const current = entry.component
-      if (typeof current !== 'function' || wrapped.has(current)) continue
+      if (!isWrappableComponent(current) || wrapped.has(current)) continue
       const inner = current as ComponentType<FollowWrapProps>
       const next = wrapFollowNodeView(inner)
       wrapped.add(next)
@@ -145,8 +161,9 @@ class PreferenceCell {
 /**
  * Register the typewriter renderer after the conversation package declares the
  * keyed Chat node seat. A lower priority shadows the built-in assistant row;
- * every other growing row is wrapped in place so Tool cards, retries, and
- * workflow runs share conversation follow. The Host-bridged configuration
+ * every other keyed renderer is wrapped in place so Context, commands, Tool
+ * cards, retries, and workflow runs share one extensible follow boundary. The
+ * Host-bridged configuration
  * selects the render direction, smoothing preset, and glide speed; the
  * plugin-owned settings RPC supplies the live auto-expand preference when the
  * settings surface is composed.
@@ -199,7 +216,7 @@ export function apply(ctx: ClientContext): void {
     })
   }
   ctx.slots.inject('conversation.chat.node', () => {
-    const unwrap = wrapGrowingChatRows(ctx)
+    const unwrap = wrapAgentChatRows(ctx)
     const unshadow = ctx.slots.register({
       name: 'conversation.chat.node',
       key: 'assistant-step',