dsh-smooth-stream 0.3.3 → 0.3.4

package/README.en.md

@@ -2,9 +2,7 @@
 
 English | [中文](README.md)
 
-[![featured on dsh-suite](https://img.shields.io/badge/featured%20on-dsh--suite-4d6bfe)](https://whyihaveyou.github.io/dsh-suite/)
-
-**dsh-smooth-stream** is a [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) (`dsh`) community plugin for **silky streaming** in the Web UI: arrival-tracking typewriter reveal, glide-in wraps, no flicker. It is not part of the official DeepSeek distribution.
+**dsh-smooth-stream** brings fluid streaming rendering and silky scrolling to the [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) (`dsh`) Web UI. Text, Markdown, code blocks, tables, and tool results appear as the reply arrives; as the content grows, the page follows along in one continuous visual rhythm.
 
 Project homepage: <https://laplace-bit.github.io/dsh-smooth-stream/>
 
@@ -14,17 +12,12 @@ Left: default Web UI. Right: dsh-smooth-stream.
 
 ![Left: without the plugin. Right: with dsh-smooth-stream.](docs/compare.gif)
 
-## Current behavior
+## Core experience
 
-- **The whole Agent turn uses one extensible pipeline.** Assistant text, Think, Context, Retry, Command, Bash, Glob, Read, tool calls, and newly registered renderers all enter progressive reveal and bottom-follow through the same boundary, without a tool-name allowlist.
-- **Reveal speed adapts to queue pressure.** Small updates keep a soft cadence while large or fast bursts catch up promptly. Once the producer completes, remaining source is committed immediately instead of continuing to type long after the Agent has stopped.
-- **Markdown remains mounted throughout streaming.** Code blocks, tables, emphasis, and other formatting do not begin as plain text and later swap trees. Historical messages also do not replay their reveal animation when remounted.
-- **Scroll room opens only when a wrap is actually likely.** The predictor combines buffered source with the current line's remaining width before opening its runway. Long replies still absorb line wraps smoothly, while a short same-line answer after Think does not pre-scroll and rebound.
-- **Conversation chrome stays fixed.** `Deep diving...`, the composer, and the to-bottom button never ride the message transform. Fast output and low-frame-rate catch-up cannot paint through the status row or disappear behind the composer.
-- **One continuous spring owns motion.** The engine carries velocity and displacement between frames instead of repeatedly starting native smooth-scroll calls. Line wraps, code, tables, and growing tool rows converge along the same trajectory; completion lands on the natural floor and retires temporary state without a flash or overshoot rebound.
-- **Reader input wins immediately.** A small upward wheel, touch, or keyboard gesture releases automatic follow. Ownership returns only after the reader actually reaches the bottom again.
-- **Think respects the user's preference.** With auto-expand enabled it keeps the Harness disclosure interaction and collapses when thinking ends. With it disabled, collapsed reasoning can keep updating without fake height motion, and a manual toggle is not wrestled back by stream state.
-- **Performance guards preserve the final position.** `prefers-reduced-motion` shows complete content without taking follow. Off-screen DOM commits pause under low FPS, then catch up under control and still finish exactly at the bottom.
+- **Fluid rendering.** Text appears as it arrives while Markdown structure stays active, keeping headings, lists, code blocks, and tables readable throughout the stream.
+- **Silky scrolling.** As the content grows, the page follows along one continuous scroll path and keeps the reader close to the generated output.
+- **Consistent transitions.** Line wraps, code blocks, tables, and tool results use the same motion treatment, so text, reasoning, and tools flow together.
+- **Adaptive cadence.** Reveal speed responds to arrival rate and pending content, staying measured for slow output and catching up with fast output.
 
 ## Install
 
@@ -89,7 +82,7 @@ dsh plugin --profile web update dsh-smooth-stream
 ## FAQ
 
 **Is this an official DeepSeek plugin?**
-No. It is a community plugin for the DeepSeek Harness (`dsh`) Web UI, MIT-licensed, and not part of the official DeepSeek distribution.
+No. It is independently maintained, MIT-licensed software for the DeepSeek Harness (`dsh`) Web UI and is not affiliated with DeepSeek.
 
 **How do I install a DeepSeek Harness plugin?**
 Use the built-in plugin command: `dsh plugin --profile web add dsh-smooth-stream` from a dsh source checkout (see [Install](#install)).
@@ -100,6 +93,8 @@ Yes — `dsh-smooth-stream` is published to [npm](https://www.npmjs.com/package/
 **Does it respect `prefers-reduced-motion`?**
 Yes. With reduced motion enabled the finished text is shown at once and the plugin does not take over follow. If the frame rate drops below 30 fps while the reply is off-screen, reveal pauses and catches up later.
 
+[![featured on dsh-suite](https://img.shields.io/badge/featured%20on-dsh--suite-4d6bfe)](https://whyihaveyou.github.io/dsh-suite/)
+
 ## License
 
 [MIT](LICENSE)

package/README.md

@@ -2,9 +2,7 @@
 
 [English](README.en.md) | 中文
 
-[![featured on dsh-suite](https://img.shields.io/badge/featured%20on-dsh--suite-4d6bfe)](https://whyihaveyou.github.io/dsh-suite/)
-
-**dsh-smooth-stream** 是 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness)（`dsh`）的社区插件，给 Web 对话做**丝滑流式渲染**：字跟着模型走、换行滑入、不闪。不是官方发行的一部分。
+**dsh-smooth-stream** 为 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness)（`dsh`）Web UI 带来流畅的流式渲染和丝滑滚动。文字、Markdown、代码块、表格以及工具结果会随着输出自然呈现；内容逐步增长时，页面平稳跟随，整轮回复保持连贯的视觉节奏。
 
 项目主页：<https://laplace-bit.github.io/dsh-smooth-stream/>
 
@@ -14,17 +12,12 @@
 
 ![左：未使用插件。右：使用 dsh-smooth-stream。](docs/compare.gif)
 
-## 当前实现
+## 核心体验
 
-- **整轮 Agent 输出统一接管。** 助手正文、Think、Context、Retry、Command、Bash、Glob、Read、工具调用以及后续注册的新渲染器，都通过同一个可扩展入口进入渐进揭示和底部跟随，不依赖工具名称白名单。
-- **吐字速度会跟随积压自动变速。** 小批内容保持柔和节拍，大批或高速到达时及时追赶；完成信号到达后立即提交剩余正文，不让 Agent 已结束而文字还长时间继续输出。
-- **流式过程始终使用 Markdown 渲染。** 代码块、表格、强调等不会先显示成纯文本再整体换树，历史消息也不会在重新挂载时重播动画。
-- **换行前才准备滚动空间。** 引擎结合待揭示内容和当前行剩余宽度判断是否可能增高，只在真实换行风险出现时打开预测 runway。长回复仍能平滑吸收换行，Think 后的短同一行正文不会多滚再回弹。
-- **状态区域保持稳定。** `Deep diving...`、输入框和「滚动到底部」按钮不参与消息 transform；高速输出或低帧率下，正文也不会越过状态区域或藏到输入框后面。
-- **滚动使用持续弹簧而不是反复启动原生平滑滚动。** 每帧保留速度和位移状态，换行、代码块、表格及工具卡片增高都沿同一轨迹收敛；结束时落在自然底部并安静撤销临时状态，不闪烁、不越位回弹。
-- **用户输入拥有最高优先级。** 向上滚轮、触控拖动或键盘滚动会在轻微手势时立即解除自动跟随；只有用户真正回到底部后才重新接管。
-- **Think 尊重用户设置。** 自动展开开启时沿用 Harness 的 disclosure 交互并在思考结束后收起；关闭时折叠内容持续更新但不引发虚假高度和上下闪动，手动展开也不会被流状态抢回。
-- **性能保护不会破坏最终状态。** `prefers-reduced-motion` 直接显示完整内容且不接管跟随；低帧率且回复在屏外时暂停 DOM 提交，恢复后受控追赶，最终仍准确停在底部。
+- **流畅渲染。** 文字边到边呈现，Markdown 结构持续更新，标题、列表、代码块和表格在流式过程中保持自然的阅读状态。
+- **丝滑滚动。** 内容逐步变高时，页面沿连续的滚动轨迹平稳跟随，视线始终贴着正在生成的内容。
+- **统一过渡。** 换行、代码块、表格和工具结果使用一致的过渡方式，正文、思考过程与工具输出衔接自然。
+- **自适应节奏。** 渲染速度会根据输出速度和待显示内容调整，让慢速输出从容呈现，快速输出及时跟上。
 
 ## 安装
 
@@ -89,7 +82,7 @@ dsh plugin --profile web update dsh-smooth-stream
 ## 常见问题
 
 **这是 DeepSeek 官方插件吗？**
-不是。它是 DeepSeek Harness（`dsh`）Web UI 的社区插件，MIT 协议开源，不属于 DeepSeek 官方发行。
+不是。它是面向 DeepSeek Harness（`dsh`）Web UI 的独立维护项目，采用 MIT 许可证，和 DeepSeek 没有从属关系。
 
 **dsh 插件怎么安装？**
 用内置插件命令：在 dsh 源码目录运行 `dsh plugin --profile web add dsh-smooth-stream`（见[安装](#安装)）。
@@ -100,6 +93,8 @@ dsh plugin --profile web update dsh-smooth-stream
 **支持 `prefers-reduced-motion` 吗？**
 支持。系统开启减少动态效果时直接显示完整文本、不接管跟随；帧率低于 30 fps 且回复在屏外时，揭示自动暂停、恢复后再补上。
 
+[![featured on dsh-suite](https://img.shields.io/badge/featured%20on-dsh--suite-4d6bfe)](https://whyihaveyou.github.io/dsh-suite/)
+
 ## 许可证
 
 [MIT](LICENSE)

package/lib/client.js

@@ -23,27 +23,27 @@ window.__ModuleLoader__.load({
 			tag.textContent = css$1;
 		}
 		var TypewriterAssistantNodeView_module_css_default = {
-			"disclosureRoot": "I17U7q_disclosureRoot",
-			"root": "I17U7q_root",
+			"thinkBody": "I17U7q_thinkBody",
+			"body": "I17U7q_body",
 			"thinkRow": "I17U7q_thinkRow",
-			"thinkChevron": "I17U7q_thinkChevron",
-			"disclosureRow": "I17U7q_disclosureRow",
+			"thinkLeading": "I17U7q_thinkLeading",
 			"disclosureLeading": "I17U7q_disclosureLeading",
-			"dsh-smooth-stream-think-sweep": "I17U7q_dsh-smooth-stream-think-sweep",
 			"disclosureTitle": "I17U7q_disclosureTitle",
-			"disclosureIconIdle": "I17U7q_disclosureIconIdle",
-			"thinkSeparator": "I17U7q_thinkSeparator",
-			"thinkSummary": "I17U7q_thinkSummary",
 			"follow": "I17U7q_follow",
+			"disclosureRoot": "I17U7q_disclosureRoot",
+			"disclosureIconIdle": "I17U7q_disclosureIconIdle",
 			"thinkTitle": "I17U7q_thinkTitle",
-			"disclosureContent": "I17U7q_disclosureContent",
-			"thinkBody": "I17U7q_thinkBody",
-			"thinkLeading": "I17U7q_thinkLeading",
+			"disclosureRow": "I17U7q_disclosureRow",
 			"disclosureChevronHover": "I17U7q_disclosureChevronHover",
-			"stopped": "I17U7q_stopped",
 			"visuallyHidden": "I17U7q_visuallyHidden",
-			"body": "I17U7q_body",
-			"think": "I17U7q_think"
+			"thinkSeparator": "I17U7q_thinkSeparator",
+			"root": "I17U7q_root",
+			"think": "I17U7q_think",
+			"dsh-smooth-stream-think-sweep": "I17U7q_dsh-smooth-stream-think-sweep",
+			"thinkChevron": "I17U7q_thinkChevron",
+			"stopped": "I17U7q_stopped",
+			"thinkSummary": "I17U7q_thinkSummary",
+			"disclosureContent": "I17U7q_disclosureContent"
 		};
 		//#endregion
 		//#region src/client/AnimatedDisclosure.tsx
@@ -667,7 +667,15 @@ window.__ModuleLoader__.load({
 			}
 			return height;
 		}
-		const followRunways = /* @__PURE__ */ new WeakMap();
+		/**
+		* 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;
+		const followRunways = followRunwayRegistry[FOLLOW_RUNWAYS_SYMBOL] ?? /* @__PURE__ */ new WeakMap();
+		followRunwayRegistry[FOLLOW_RUNWAYS_SYMBOL] = followRunways;
 		const followPaintLimits = /* @__PURE__ */ new WeakMap();
 		function invalidatePaintLimit(port) {
 			followPaintLimits.delete(port);
@@ -681,9 +689,39 @@ window.__ModuleLoader__.load({
 			followRunways.delete(port);
 			invalidatePaintLimit(port);
 		}
+		function isLegacyRunway(value) {
+			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 >= 48 && Math.abs(px % 48) <= Number.EPSILON;
+			});
+		}
+		/** Remove unowned runway residue written by v0.3.3 and earlier bundles. */
+		function migrateLegacyRunway(port, surfaces, status, composer) {
+			if (followRunways.has(port)) return;
+			let migrated = false;
+			if (status !== null && isLegacyRunway(status.style.marginTop)) {
+				status.style.marginTop = "";
+				migrated = true;
+			}
+			const last = surfaces.at(-1);
+			if (status === null && composer !== null && last !== void 0 && isLegacyRunway(last.style.marginBottom)) {
+				last.style.marginBottom = "";
+				migrated = true;
+			}
+			if (migrated) invalidatePaintLimit(port);
+		}
 		function ensureRunway(port, surfaces) {
 			const status = turnStatusOf(port);
 			const composer = port.querySelector("[data-composer-seat]");
+			migrateLegacyRunway(port, surfaces, status, composer);
+			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 ? void 0 : surfaces.at(-1),
 				property: "marginBottom"
@@ -1258,6 +1296,8 @@ window.__ModuleLoader__.load({
 		}
 		/** 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;
 		function approximateInlineWidth(text, emPx) {
 			let width = 0;
 			for (const char of text) if (/\s/u.test(char)) width += emPx * .33;
@@ -1265,36 +1305,189 @@ window.__ModuleLoader__.load({
 			else width += emPx;
 			return width;
 		}
-		/** Whether buffered source can reach a new visual line before it drains. */
-		function pendingTextCanGrow(root, pending) {
-			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;
+		function measurePendingTextGeometry(root, visibleText) {
+			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 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 = null;
 			for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) if ((node.textContent ?? "").length > 0) tail = node;
 			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;
+			if (tail === null || typeof document.createRange !== "function") 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 pendingWidth >= Math.max(0, contentRight - tailRect.right) + fontSize * .35;
+				if (!Number.isFinite(tailRect.right) || tailRect.right <= rootRect.left || contentRight <= rootRect.left) return {
+					root,
+					visibleText,
+					fontSize,
+					wrapThresholdWidth: rootWidth
+				};
+				return {
+					root,
+					visibleText,
+					fontSize,
+					wrapThresholdWidth: Math.max(0, contentRight - tailRect.right) + fontSize * .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, visibleText, pending, geometryRef) {
+			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, start) {
+			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 * .6);
+			for (let index = hardEnd - 1; index >= softStart; index -= 1) if (/[\s.,;:!?]/u.test(source[index] ?? "")) return index + 1;
+			return hardEnd;
+		}
+		/** A commit-driven live region isolated from the visible Markdown subtree. */
+		const StreamAnnouncement = (0, react.memo)(function StreamAnnouncement({ text, active }) {
+			const [announcement, setAnnouncement] = (0, react.useState)({
+				text: "",
+				revision: 0,
+				present: active
+			});
+			const sourceRef = (0, react.useRef)(text);
+			const activeRef = (0, react.useRef)(active);
+			const announcedOffsetRef = (0, react.useRef)(active ? 0 : text.length);
+			const drainSourceRef = (0, react.useRef)(null);
+			const timerRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				const clearTimer = () => {
+					if (timerRef.current === null) return;
+					clearTimeout(timerRef.current);
+					timerRef.current = null;
+				};
+				const publishNext = (source) => {
+					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 = () => {
+					timerRef.current = setTimeout(() => {
+						timerRef.current = null;
+						if (activeRef.current) return;
+						drainSourceRef.current = null;
+						setAnnouncement((previous) => ({
+							...previous,
+							present: false
+						}));
+					}, STREAM_ANNOUNCEMENT_INTERVAL_MS);
+				};
+				const drainNext = () => {
+					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 = () => {
+					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;
+				if (!(!active && !wasActive && drainSourceRef.current !== null) && (!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]);
+			(0, react.useEffect)(() => () => {
+				if (timerRef.current !== null) clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}, []);
+			if (!active && !announcement.present) return null;
+			const activating = active && !activeRef.current;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: TypewriterAssistantNodeView_module_css_default.visuallyHidden,
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: activating ? "" : announcement.text }, announcement.revision)
+			});
+		});
 		/**
 		* 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
@@ -1306,13 +1499,14 @@ window.__ModuleLoader__.load({
 		* drains, the settled full parse (KaTeX math, fence highlighting, file
 		* mentions) swaps in exactly once.
 		*/
-		function AnimatedMarkdownText({ text, codeLabels, fileMentions, streaming, announce, ownFollow, followSpeedCpsRef, followRevealScaleRef, onPredictiveChange, preset, shouldHoldBack }) {
+		function AnimatedMarkdownText({ text, codeLabels, fileMentions, streaming, ownFollow, followSpeedCpsRef, followRevealScaleRef, onPredictiveChange, preset, shouldHoldBack }) {
 			const reduced = usePrefersReducedMotion();
 			const [typing, setTyping] = (0, react.useState)(streaming);
 			const localSpeedCpsRef = (0, react.useRef)(35);
 			const followRootRef = (0, react.useRef)(null);
 			const predictionSourceRef = (0, react.useRef)(null);
 			const predictionStateRef = (0, react.useRef)(false);
+			const predictionGeometryRef = (0, react.useRef)(null);
 			const speedCpsRef = followSpeedCpsRef ?? localSpeedCpsRef;
 			const displayed = useSmoothStreamContent(text, {
 				enabled: typing && !reduced,
@@ -1324,11 +1518,22 @@ window.__ModuleLoader__.load({
 			});
 			const shown = reduced ? text : displayed;
 			const live = typing && !reduced;
+			(0, react.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();
+				};
+			}, []);
 			(0, react.useLayoutEffect)(() => {
 				if (onPredictiveChange === void 0) 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;
+				const next = !live || !streaming || pending === "" ? false : sourceChanged ? pendingTextCanGrow(followRootRef.current, shown, pending, predictionGeometryRef) : predictionStateRef.current;
 				predictionSourceRef.current = text;
 				predictionStateRef.current = next;
 				onPredictiveChange(next);
@@ -1347,11 +1552,7 @@ window.__ModuleLoader__.load({
 				text,
 				typing
 			]);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [live && announce && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: TypewriterAssistantNodeView_module_css_default.visuallyHidden,
-				"aria-live": "polite",
-				children: text
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FollowHost, {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FollowHost, {
 				active: live && ownFollow,
 				speedCpsRef,
 				revealScaleRef: followRevealScaleRef,
@@ -1363,7 +1564,7 @@ window.__ModuleLoader__.load({
 					codeLabels,
 					fileMentions: live ? void 0 : fileMentions
 				})
-			})] });
+			});
 		}
 		function imageLabels(t) {
 			return {
@@ -1396,7 +1597,7 @@ window.__ModuleLoader__.load({
 		* or the assistant node settling — not when the rest of the reply is
 		* still streaming.
 		*/
-		function AnimatedReasoning({ text, running, preset, thinkAutoExpand, shouldHoldBack, followSpeedCpsRef, followRevealScaleRef, onExpandedChange, t }) {
+		function AnimatedReasoning({ text, running, preset, thinkAutoExpand, shouldHoldBack, followSpeedCpsRef, followRevealScaleRef, t }) {
 			const reduced = usePrefersReducedMotion();
 			const [expanded, setExpanded] = (0, react.useState)(running && thinkAutoExpand);
 			const summaryRef = (0, react.useRef)(null);
@@ -1412,9 +1613,6 @@ window.__ModuleLoader__.load({
 			(0, react.useLayoutEffect)(() => {
 				if (thinkAutoExpand) setExpanded(running);
 			}, [running, thinkAutoExpand]);
-			(0, react.useLayoutEffect)(() => {
-				onExpandedChange?.(expanded);
-			}, [expanded, onExpandedChange]);
 			(0, react.useEffect)(() => {
 				const element = summaryRef.current;
 				if (element === null) return;
@@ -1479,13 +1677,10 @@ window.__ModuleLoader__.load({
 			const rootPredictiveRef = (0, react.useRef)(false);
 			const previousReasoningTailRef = (0, react.useRef)(-1);
 			if (reasoningTailIndex !== previousReasoningTailRef.current) {
-				rootPredictiveRef.current = reasoningOwnsSpeed ? thinkAutoExpand : false;
+				rootPredictiveRef.current = false;
 				if (!reasoningOwnsSpeed) rootSpeedRef.current = 35;
 				previousReasoningTailRef.current = reasoningTailIndex;
 			}
-			const updateReasoningExpanded = (0, react.useMemo)(() => (expanded) => {
-				rootPredictiveRef.current = expanded;
-			}, []);
 			const updateTextPrediction = (0, react.useMemo)(() => (predictive) => {
 				rootPredictiveRef.current = predictive;
 			}, []);
@@ -1514,6 +1709,7 @@ window.__ModuleLoader__.load({
 				throw new Error(t("image.serviceUnavailable"));
 			});
 			if (!(streaming || data.status === "interrupted" || data.blocks.some((block) => block.kind !== "tool-call"))) return null;
+			const announcementText = data.blocks.filter((block) => block.kind === "text").map((block) => block.text).join("\n");
 			const rendered = [];
 			const last = data.blocks.length - 1;
 			let lastFollow = -1;
@@ -1531,7 +1727,6 @@ window.__ModuleLoader__.load({
 							codeLabels,
 							fileMentions: mentions,
 							streaming,
-							announce: index === last,
 							ownFollow: !streaming && index === lastFollow,
 							followSpeedCpsRef: index === lastFollow ? rootSpeedRef : void 0,
 							followRevealScaleRef: index === lastFollow ? rootRevealScaleRef : void 0,
@@ -1549,7 +1744,6 @@ window.__ModuleLoader__.load({
 							shouldHoldBack,
 							followSpeedCpsRef: reasoningOwnsSpeed && index === last ? rootSpeedRef : void 0,
 							followRevealScaleRef: reasoningOwnsSpeed && index === last ? rootRevealScaleRef : void 0,
-							onExpandedChange: index === reasoningTailIndex ? updateReasoningExpanded : void 0,
 							t
 						}, index));
 						break;
@@ -1578,11 +1772,14 @@ window.__ModuleLoader__.load({
 					}, index));
 				}
 			}
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: guardRef,
 				className: TypewriterAssistantNodeView_module_css_default.root,
 				"data-streaming": streaming || void 0,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FollowHost, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StreamAnnouncement, {
+					text: announcementText,
+					active: streaming && !reduced
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FollowHost, {
 					active: streaming && !reduced,
 					speedCpsRef: rootSpeedRef,
 					revealScaleRef: rootRevealScaleRef,
@@ -1594,7 +1791,7 @@ window.__ModuleLoader__.load({
 							children: t("message.stopped")
 						})]
 					})
-				})
+				})]
 			});
 		});
 		//#endregion
@@ -1967,31 +2164,31 @@ window.__ModuleLoader__.load({
 			tag.textContent = css;
 		}
 		var SmoothStreamCard_module_css_default = {
-			"card": "XNGeRG_card",
-			"hint": "XNGeRG_hint",
-			"failed": "XNGeRG_failed",
-			"field": "XNGeRG_field",
-			"chevron": "XNGeRG_chevron",
-			"headText": "XNGeRG_headText",
+			"header": "XNGeRG_header",
 			"version": "XNGeRG_version",
-			"body": "XNGeRG_body",
-			"fieldHead": "XNGeRG_fieldHead",
-			"toggle": "XNGeRG_toggle",
 			"readOnly": "XNGeRG_readOnly",
-			"header": "XNGeRG_header",
-			"pending": "XNGeRG_pending",
-			"label": "XNGeRG_label",
-			"update": "XNGeRG_update",
-			"discard": "XNGeRG_discard",
 			"footer": "XNGeRG_footer",
+			"label": "XNGeRG_label",
+			"hint": "XNGeRG_hint",
+			"fieldHead": "XNGeRG_fieldHead",
 			"failure": "XNGeRG_failure",
-			"name": "XNGeRG_name",
-			"description": "XNGeRG_description",
+			"update": "XNGeRG_update",
+			"field": "XNGeRG_field",
+			"save": "XNGeRG_save",
+			"pending": "XNGeRG_pending",
+			"card": "XNGeRG_card",
 			"cardOpen": "XNGeRG_cardOpen",
-			"chevronOpen": "XNGeRG_chevronOpen",
+			"chevron": "XNGeRG_chevron",
+			"toggle": "XNGeRG_toggle",
+			"body": "XNGeRG_body",
+			"name": "XNGeRG_name",
+			"failed": "XNGeRG_failed",
 			"updateRow": "XNGeRG_updateRow",
-			"save": "XNGeRG_save",
-			"updateCopy": "XNGeRG_updateCopy"
+			"discard": "XNGeRG_discard",
+			"description": "XNGeRG_description",
+			"headText": "XNGeRG_headText",
+			"updateCopy": "XNGeRG_updateCopy",
+			"chevronOpen": "XNGeRG_chevronOpen"
 		};
 		//#endregion
 		//#region src/client/SmoothStreamCard.tsx