dsh-smooth-stream 0.3.3 → 0.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-smooth-stream",
-  "version": "0.3.3",
-  "description": "DeepSeek Harness (dsh) plugin: silky streaming reveal, no flicker. dsh 丝滑流式渲染插件。",
+  "version": "0.3.4",
+  "description": "Fluid streaming rendering and silky scrolling for DeepSeek Harness replies, including Markdown, code blocks, tables, and tool results.",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -23,6 +23,11 @@
     "cordis",
     "streaming",
     "smooth-streaming",
+    "fluid-streaming",
+    "streaming-renderer",
+    "markdown-streaming",
+    "smooth-scrolling",
+    "smooth-scroll",
     "smooth-stream",
     "typewriter",
     "typewriter-effect",

package/src/client/TypewriterAssistantNodeView.tsx

@@ -29,7 +29,6 @@ function usePrefersReducedMotion(): boolean {
 
 interface AnimatedMarkdownTextProps extends MarkdownProps {
   streaming: boolean
-  announce: boolean
   /** True on the last text block: that block owns conversation follow. */
   ownFollow: boolean
   followSpeedCpsRef?: { current: number } | undefined
@@ -41,6 +40,15 @@ interface AnimatedMarkdownTextProps extends MarkdownProps {
 
 /** Conservative fallback before the streaming Markdown tail has geometry. */
 const PREDICTIVE_WRAP_FALLBACK_CHARS = 32
+const STREAM_ANNOUNCEMENT_INTERVAL_MS = 800
+const STREAM_ANNOUNCEMENT_MAX_CHARS = 320
+
+interface PendingTextGeometry {
+  root: HTMLElement
+  visibleText: string
+  fontSize: number
+  wrapThresholdWidth: number | null
+}
 
 function approximateInlineWidth(text: string, emPx: number): number {
   let width = 0
@@ -52,22 +60,16 @@ function approximateInlineWidth(text: string, emPx: number): number {
   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]
+function measurePendingTextGeometry(root: HTMLElement, visibleText: string): PendingTextGeometry {
   if (
-    root === null
-    || typeof document.createTreeWalker !== 'function'
+    typeof document.createTreeWalker !== 'function'
     || typeof NodeFilter === 'undefined'
   ) {
-    return pendingChars.length >= PREDICTIVE_WRAP_FALLBACK_CHARS
+    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 pendingChars.length >= PREDICTIVE_WRAP_FALLBACK_CHARS
+  if (rootWidth <= 0) return { root, visibleText, fontSize: 14, wrapThresholdWidth: null }
 
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
   let tail: Text | null = null
@@ -76,29 +78,199 @@ function pendingTextCanGrow(root: HTMLElement | null, pending: string): boolean
   }
   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
+    return { root, visibleText, fontSize, wrapThresholdWidth: rootWidth }
   }
 
   try {
     const length = tail.textContent?.length ?? 0
-    if (length <= 0) return pendingWidth >= rootWidth
+    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 pendingWidth >= rootWidth
+      return { root, visibleText, fontSize, wrapThresholdWidth: rootWidth }
     }
     const remainingWidth = Math.max(0, contentRight - tailRect.right)
-    return pendingWidth >= remainingWidth + fontSize * 0.35
+    return {
+      root,
+      visibleText,
+      fontSize,
+      wrapThresholdWidth: remainingWidth + fontSize * 0.35,
+    }
   } catch {
-    return pendingWidth >= rootWidth
+    return { root, visibleText, fontSize, wrapThresholdWidth: rootWidth }
+  }
+}
+
+/** Whether buffered source can reach a new visual line before it drains. */
+function pendingTextCanGrow(
+  root: HTMLElement | null,
+  visibleText: string,
+  pending: string,
+  geometryRef: { current: PendingTextGeometry | null },
+): boolean {
+  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
+
+  let geometry = geometryRef.current
+  if (geometry?.root !== root || geometry.visibleText !== visibleText) {
+    geometry = measurePendingTextGeometry(root, visibleText)
+    geometryRef.current = geometry
   }
+  if (geometry.wrapThresholdWidth === null) {
+    return pendingChars.length >= PREDICTIVE_WRAP_FALLBACK_CHARS
+  }
+  return approximateInlineWidth(pending, geometry.fontSize) >= geometry.wrapThresholdWidth
+}
+
+function announcementChunkEnd(source: string, start: number): number {
+  const hardEnd = Math.min(source.length, start + STREAM_ANNOUNCEMENT_MAX_CHARS)
+  if (hardEnd === source.length) return hardEnd
+  const softStart = start + Math.floor(STREAM_ANNOUNCEMENT_MAX_CHARS * 0.6)
+  for (let index = hardEnd - 1; index >= softStart; index -= 1) {
+    if (/[\s.,;:!?]/u.test(source[index] ?? '')) return index + 1
+  }
+  return hardEnd
 }
 
+/** Pace screen-reader updates independently from visual reveal frames. */
+interface StreamAnnouncementState {
+  text: string
+  revision: number
+  present: boolean
+}
+
+/** A commit-driven live region isolated from the visible Markdown subtree. */
+const StreamAnnouncement = memo(function StreamAnnouncement({
+  text,
+  active,
+}: {
+  text: string
+  active: boolean
+}) {
+  const [announcement, setAnnouncement] = useState<StreamAnnouncementState>({
+    text: '',
+    revision: 0,
+    present: active,
+  })
+  const sourceRef = useRef(text)
+  const activeRef = useRef(active)
+  const announcedOffsetRef = useRef(active ? 0 : text.length)
+  const drainSourceRef = useRef<string | null>(null)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    const clearTimer = (): void => {
+      if (timerRef.current === null) return
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+
+    const publishNext = (source: string): boolean => {
+      const start = Math.min(announcedOffsetRef.current, source.length)
+      const end = announcementChunkEnd(source, start)
+      if (end <= start) return false
+      announcedOffsetRef.current = end
+      setAnnouncement(previous => ({
+        text: source.slice(start, end),
+        revision: previous.revision + 1,
+        present: true,
+      }))
+      return end < source.length
+    }
+
+    const hideAfterLinger = (): void => {
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null
+        if (activeRef.current) return
+        drainSourceRef.current = null
+        setAnnouncement(previous => ({ ...previous, present: false }))
+      }, STREAM_ANNOUNCEMENT_INTERVAL_MS)
+    }
+
+    const drainNext = (): void => {
+      const source = drainSourceRef.current
+      if (source === null) return
+      if (!publishNext(source)) {
+        hideAfterLinger()
+        return
+      }
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null
+        if (activeRef.current) return
+        drainNext()
+      }, STREAM_ANNOUNCEMENT_INTERVAL_MS)
+    }
+
+    const scheduleLive = (): void => {
+      if (timerRef.current !== null || announcedOffsetRef.current >= sourceRef.current.length) return
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null
+        if (!activeRef.current) return
+        const source = sourceRef.current
+        if (publishNext(source)) scheduleLive()
+      }, STREAM_ANNOUNCEMENT_INTERVAL_MS)
+    }
+
+    const wasActive = activeRef.current
+    const previousSource = sourceRef.current
+    const continuingDrain = !active && !wasActive && drainSourceRef.current !== null
+    if (
+      !continuingDrain
+      && (!text.startsWith(previousSource) || announcedOffsetRef.current > text.length)
+    ) {
+      announcedOffsetRef.current = 0
+    }
+    sourceRef.current = text
+    activeRef.current = active
+
+    if (active) {
+      if (!wasActive) {
+        clearTimer()
+        drainSourceRef.current = null
+        setAnnouncement(previous => ({
+          text: '',
+          revision: previous.revision + 1,
+          present: true,
+        }))
+      }
+      scheduleLive()
+      return
+    }
+
+    if (!wasActive) {
+      if (drainSourceRef.current === null) announcedOffsetRef.current = text.length
+      return
+    }
+
+    clearTimer()
+    drainSourceRef.current = text
+    drainNext()
+  }, [active, text])
+
+  useEffect(() => () => {
+    if (timerRef.current !== null) clearTimeout(timerRef.current)
+    timerRef.current = null
+  }, [])
+
+  if (!active && !announcement.present) return null
+  const activating = active && !activeRef.current
+  return (
+    <span
+      className={css.visuallyHidden}
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      <span key={announcement.revision}>{activating ? '' : announcement.text}</span>
+    </span>
+  )
+})
+
 /**
  * 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
@@ -115,7 +287,6 @@ function AnimatedMarkdownText({
   codeLabels,
   fileMentions,
   streaming,
-  announce,
   ownFollow,
   followSpeedCpsRef,
   followRevealScaleRef,
@@ -129,6 +300,7 @@ function AnimatedMarkdownText({
   const followRootRef = useRef<HTMLDivElement>(null)
   const predictionSourceRef = useRef<string | null>(null)
   const predictionStateRef = useRef(false)
+  const predictionGeometryRef = useRef<PendingTextGeometry | null>(null)
   const speedCpsRef = followSpeedCpsRef ?? localSpeedCpsRef
   const displayed = useSmoothStreamContent(text, {
     enabled: typing && !reduced,
@@ -141,6 +313,16 @@ function AnimatedMarkdownText({
   const shown = reduced ? text : displayed
   const live = typing && !reduced
 
+  useEffect(() => {
+    const root = followRootRef.current
+    if (root === null || typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(() => {
+      if (predictionGeometryRef.current?.root === root) predictionGeometryRef.current = null
+    })
+    observer.observe(root)
+    return () => { observer.disconnect() }
+  }, [])
+
   useLayoutEffect(() => {
     if (onPredictiveChange === undefined) return
     const pending = text.slice(shown.length)
@@ -148,7 +330,7 @@ function AnimatedMarkdownText({
     const next = !live || !streaming || pending === ''
       ? false
       : sourceChanged
-        ? pendingTextCanGrow(followRootRef.current, pending)
+        ? pendingTextCanGrow(followRootRef.current, shown, pending, predictionGeometryRef)
         : predictionStateRef.current
     predictionSourceRef.current = text
     predictionStateRef.current = next
@@ -162,23 +344,20 @@ function AnimatedMarkdownText({
   }, [shown, streaming, text, typing])
 
   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>
-    </>
+    <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>
   )
 }
 
@@ -224,7 +403,6 @@ function AnimatedReasoning({
   shouldHoldBack,
   followSpeedCpsRef,
   followRevealScaleRef,
-  onExpandedChange,
   t,
 }: {
   text: string
@@ -234,7 +412,6 @@ function AnimatedReasoning({
   shouldHoldBack: () => boolean
   followSpeedCpsRef?: { current: number } | undefined
   followRevealScaleRef?: { current: number } | undefined
-  onExpandedChange?: ((expanded: boolean) => void) | undefined
   t: AssistantProps['t']
 }) {
   const reduced = usePrefersReducedMotion()
@@ -256,10 +433,6 @@ function AnimatedReasoning({
     if (thinkAutoExpand) setExpanded(running)
   }, [running, thinkAutoExpand])
 
-  useLayoutEffect(() => {
-    onExpandedChange?.(expanded)
-  }, [expanded, onExpandedChange])
-
   useEffect(() => {
     const element = summaryRef.current
     if (element === null) return
@@ -338,14 +511,15 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
   const rootPredictiveRef = useRef(false)
   const previousReasoningTailRef = useRef(-1)
   if (reasoningTailIndex !== previousReasoningTailRef.current) {
-    rootPredictiveRef.current = reasoningOwnsSpeed ? thinkAutoExpand : false
+    // Think growth is already paced by its own text reveal. Opening additional
+    // speculative runway here exposes that runway as an empty gap above the
+    // fixed turn status, especially when reasoning arrives in fast bursts.
+    // The follower still smooths real height growth within the measured gap
+    // and catches up any unsafe remainder in the same frame.
+    rootPredictiveRef.current = false
     if (!reasoningOwnsSpeed) rootSpeedRef.current = 35
     previousReasoningTailRef.current = reasoningTailIndex
   }
-  const updateReasoningExpanded = useMemo(
-    () => (expanded: boolean): void => { rootPredictiveRef.current = expanded },
-    [],
-  )
   const updateTextPrediction = useMemo(
     () => (predictive: boolean): void => { rootPredictiveRef.current = predictive },
     [],
@@ -371,6 +545,10 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
     || data.status === 'interrupted'
     || data.blocks.some(block => block.kind !== 'tool-call')
   if (!hasVisible) return null
+  const announcementText = data.blocks
+    .filter(block => block.kind === 'text')
+    .map(block => block.text)
+    .join('\n')
 
   const rendered: ReactNode[] = []
   const last = data.blocks.length - 1
@@ -391,7 +569,6 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
             codeLabels={codeLabels}
             fileMentions={mentions}
             streaming={streaming}
-            announce={index === last}
             ownFollow={!streaming && index === lastFollow}
             followSpeedCpsRef={index === lastFollow ? rootSpeedRef : undefined}
             followRevealScaleRef={index === lastFollow ? rootRevealScaleRef : undefined}
@@ -412,7 +589,6 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
             shouldHoldBack={shouldHoldBack}
             followSpeedCpsRef={reasoningOwnsSpeed && index === last ? rootSpeedRef : undefined}
             followRevealScaleRef={reasoningOwnsSpeed && index === last ? rootRevealScaleRef : undefined}
-            onExpandedChange={index === reasoningTailIndex ? updateReasoningExpanded : undefined}
             t={t}
           />,
         )
@@ -448,6 +624,7 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
 
   return (
     <div ref={guardRef} className={css.root} data-streaming={streaming || undefined}>
+      <StreamAnnouncement text={announcementText} active={streaming && !reduced} />
       <FollowHost
         active={streaming && !reduced}
         speedCpsRef={rootSpeedRef}

package/src/client/teleprompterGlide.ts

@@ -269,7 +269,18 @@ interface FollowRunway {
   readonly property: 'marginBottom' | 'marginTop'
 }
 
-const followRunways = new WeakMap<HTMLElement, FollowRunway>()
+/**
+ * The plugin can be reinjected without replacing the conversation DOM. Keep
+ * runway ownership in the page realm so a fresh bundle adopts the existing
+ * margin instead of treating it as host layout and adding another 48px.
+ */
+const FOLLOW_RUNWAYS_SYMBOL = Symbol.for('dsh-smooth-stream.follow-runways')
+const followRunwayRegistry = globalThis as typeof globalThis & {
+  [key: symbol]: WeakMap<HTMLElement, FollowRunway> | undefined
+}
+const followRunways = followRunwayRegistry[FOLLOW_RUNWAYS_SYMBOL]
+  ?? new WeakMap<HTMLElement, FollowRunway>()
+followRunwayRegistry[FOLLOW_RUNWAYS_SYMBOL] = followRunways
 
 interface FollowPaintLimit {
   readonly clientHeight: number
@@ -316,9 +327,61 @@ function restoreRunway(port: HTMLElement): void {
   invalidatePaintLimit(port)
 }
 
+function isLegacyRunway(value: string): boolean {
+  if (value === '') return false
+  const terms = [...value.matchAll(/([\d.]+)px/g)]
+  if (terms.length === 0 || value.replaceAll(/calc|px|[\d.+()\s]/g, '') !== '') return false
+  return terms.every(([, raw]) => {
+    const px = Number(raw)
+    return Number.isFinite(px)
+      && px >= FOLLOW_STATUS_RUNWAY_PX
+      && Math.abs(px % FOLLOW_STATUS_RUNWAY_PX) <= Number.EPSILON
+  })
+}
+
+/** Remove unowned runway residue written by v0.3.3 and earlier bundles. */
+function migrateLegacyRunway(
+  port: HTMLElement,
+  surfaces: readonly HTMLElement[],
+  status: HTMLElement | null,
+  composer: HTMLElement | null,
+): void {
+  if (followRunways.has(port)) return
+  let migrated = false
+  if (status !== null && isLegacyRunway(status.style.marginTop)) {
+    // Harness TurnStatus has no inline margin; exact 48px multiples here are
+    // values emitted by the old runway writer, including reload accumulation.
+    status.style.marginTop = ''
+    migrated = true
+  }
+  const last = surfaces.at(-1)
+  if (
+    status === null
+    && composer !== null
+    && last !== undefined
+    && isLegacyRunway(last.style.marginBottom)
+  ) {
+    // Without TurnStatus the old writer used the current final message as its
+    // completion runway. Limit migration to that same target topology.
+    last.style.marginBottom = ''
+    migrated = true
+  }
+  if (migrated) invalidatePaintLimit(port)
+}
+
 function ensureRunway(port: HTMLElement, surfaces: readonly HTMLElement[]): void {
   const status = turnStatusOf(port)
   const composer = port.querySelector<HTMLElement>('[data-composer-seat]')
+  migrateLegacyRunway(port, surfaces, status, composer)
+  // A runway is useful only after the natural conversation already has a
+  // scroll floor for its equal message transform to ride. Before that point
+  // applyVisual keeps every surface in normal flow, so adding status margin
+  // would expose the whole runway as empty space below a short/early Think.
+  const naturalHeight = Math.max(0, port.scrollHeight - runwayOffsetOf(port))
+  if (port.clientHeight <= 0 || naturalHeight <= port.clientHeight) {
+    restoreRunway(port)
+    return
+  }
   const target = status === null
     ? { element: composer === null ? undefined : surfaces.at(-1), property: 'marginBottom' as const }
     : { element: status, property: 'marginTop' as const }