@dxos/react-ui-feed 0.11.1 → 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264

package/dist/lib/chunk-src.mjs

@@ -1,178 +1,14 @@
-import { createContext, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { EditorState, StateEffect, StateField } from "@codemirror/state";
 import { Decoration, EditorView } from "@codemirror/view";
 import DOMPurify from "dompurify";
 import { createPortal } from "react-dom";
-import { Column, Popover, ScrollArea, composable, composableProps, setRef, useThemeContext } from "@dxos/react-ui";
+import { Column, IconButton, Popover, ScrollArea, composable, composableProps, setRef, useThemeContext } from "@dxos/react-ui";
 import { createBasicExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown, extendedMarkdown, xmlBlockDecoration, xmlFormatting, xmlTags } from "@dxos/ui-editor";
 import { createContext as createContext$1 } from "@radix-ui/react-context";
-import * as Atom from "effect/unstable/reactivity/Atom";
-import * as Registry from "effect/unstable/reactivity/AtomRegistry";
+import { ListModel, useFollow, useWindow } from "@dxos/react-ui-virtual";
 import { mx } from "@dxos/ui-theme";
-//#region src/hooks/follow.ts
-var DEFAULT_MAX_SPEED = 2;
-var DEFAULT_ACCELERATION = 12;
-var DEFAULT_DECELERATION = 6;
-/**
-* Gentler than the ramp up, and deliberately so.
-*
-* Braking distance is `v²/2d`, so matching the two rates sheds full speed in three rows — a travel
-* of any length then cruises to within a few rows of the target and stops, which reads as an abrupt
-* halt however correct the curve is. At a third of the acceleration the landing occupies nine rows
-* and a second and a half, which is long enough to see.
-*/
-var DEFAULT_ROW_HEIGHT = 120;
-/** Within this distance the follow has arrived; below it the animation would only jitter. */
-var ARRIVED = .5;
-/**
-* Speed for the next frame of a follow.
-*
-* Ramps up to `maxSpeed` and back down so the travel starts and ends gently rather than jumping.
-* The cap is whichever is lower: the ceiling, or the speed from which the remaining distance can
-* still be shed at `acceleration` (`v = sqrt(2·a·d)`) — that second term is what turns the arrival
-* into a deceleration instead of a stop, and what keeps a growing target at cruise speed.
-*
-* Acceleration is rate-limited so a start is gradual; **deceleration is not**, because the braking
-* curve is already a smooth ramp to zero and easing onto it instead leaves the speed above the
-* curve for the whole approach — the follow then runs out of distance while still moving and the
-* arrival reads as a stop rather than a landing.
-*/
-var stepVelocity = ({ velocity, distance, dt, maxSpeed, acceleration, deceleration = acceleration }) => {
-	const braking = Math.sqrt(2 * deceleration * Math.max(distance, 0));
-	const desired = Math.min(maxSpeed, braking);
-	return velocity < desired ? Math.min(desired, velocity + acceleration * dt) : desired;
-};
-/**
-* **Not wired into `MessageList` at present.** The placement engine follows the tail by holding an
-* intent and correcting the offset, which arrives instantly; this class is the animated travel the
-* old engine used, kept with its tests because the glide is worth having back and nothing about it
-* was wrong. Wiring it is a decision about feel, not a repair.
-*/
-/**
-* Keeps an element scrolled to its bottom while its content grows.
-*
-* Native `scrollTo({ behavior: 'smooth' })` restarts its easing on every call, so a target that
-* moves every chunk never leaves the start of the curve — the motion reads as a stutter. This
-* carries velocity across frames instead: it accelerates as a stream begins, cruises while content
-* keeps arriving, and decelerates onto the tail when it stops.
-*
-* `@dxos/ui-editor`'s `createCrawler` follows a streaming CodeMirror document the same way, with a
-* critically-damped spring. The two are deliberately separate: that one is bound to `view.scrollDOM`
-* and driven by editor effects, where a feed owns its own scroll container. The models differ in
-* feel — a spring's speed falls off with distance, where this holds a ceiling and brakes onto the
-* target, which keeps a fast stream at a constant rate rather than an ever-widening lag.
-*/
-var ScrollFollower = class {
-	_element;
-	#maxSpeed;
-	#acceleration;
-	#deceleration;
-	#rowHeight;
-	#trailing;
-	#frame;
-	#velocity = 0;
-	#timestamp = 0;
-	#braking = false;
-	constructor(_element, { maxSpeed = DEFAULT_MAX_SPEED, acceleration = DEFAULT_ACCELERATION, deceleration = DEFAULT_DECELERATION, rowHeight = () => DEFAULT_ROW_HEIGHT, trailing = () => 0 } = {}) {
-		this._element = _element;
-		this.#maxSpeed = maxSpeed;
-		this.#acceleration = acceleration;
-		this.#deceleration = deceleration;
-		this.#rowHeight = rowHeight;
-		this.#trailing = trailing;
-	}
-	/**
-	* The bottom of the last row, which is not the bottom of the document.
-	*
-	* A feed may reserve empty space below its last row so that row can be brought to the top of the
-	* viewport. That space is somewhere the reader may go and nowhere the follow should: chasing the
-	* element's own maximum walks the feed off the end of the conversation and keeps going.
-	*/
-	get #bottom() {
-		return this._element.scrollHeight - this.#trailing() - this._element.clientHeight;
-	}
-	get running() {
-		return this.#frame !== void 0;
-	}
-	/** Current speed, rows/s. Exposed so a harness can show the ramp. */
-	get velocity() {
-		return this.#velocity / Math.max(this.#rowHeight(), 1);
-	}
-	/** Starts (or continues) travelling towards the bottom. Safe to call on every content change. */
-	start() {
-		this.#braking = false;
-		if (this.#frame !== void 0) return;
-		this.#timestamp = performance.now();
-		this.#frame = requestAnimationFrame(this.#tick);
-	}
-	/**
-	* Coasts to a halt, shedding speed at `deceleration` — what a stream ending or a stop control
-	* means. Cutting the animation instead would halt mid-glide, which is the one motion the reader
-	* cannot have caused and so reads as a fault.
-	*/
-	stop() {
-		if (this.#frame === void 0) {
-			this.#velocity = 0;
-			return;
-		}
-		this.#braking = true;
-	}
-	/**
-	* Halts immediately, discarding the velocity — the reader has taken over, or the list is going
-	* away. Coasting here would fight a hand already on the scrollbar.
-	*/
-	cancel() {
-		if (this.#frame !== void 0) {
-			cancelAnimationFrame(this.#frame);
-			this.#frame = void 0;
-		}
-		this.#braking = false;
-		this.#velocity = 0;
-	}
-	/** Jumps to the bottom with no animation. */
-	jump() {
-		this.cancel();
-		this._element.scrollTop = Math.max(0, this.#bottom);
-	}
-	#tick = (timestamp) => {
-		const dt = Math.min((timestamp - this.#timestamp) / 1e3, .05);
-		this.#timestamp = timestamp;
-		const target = Math.max(0, this.#bottom);
-		const distance = target - this._element.scrollTop;
-		if (this.#braking) {
-			const rowHeight = Math.max(this.#rowHeight(), 1);
-			this.#velocity = Math.max(0, this.#velocity - this.#deceleration * rowHeight * dt);
-			if (this.#velocity <= 0 || distance <= ARRIVED) {
-				this.#frame = void 0;
-				this.#velocity = 0;
-				this.#braking = false;
-				return;
-			}
-			this._element.scrollTop = Math.min(target, this._element.scrollTop + this.#velocity * dt);
-			this.#frame = requestAnimationFrame(this.#tick);
-			return;
-		}
-		if (distance <= ARRIVED) {
-			this._element.scrollTop = target;
-			this.#frame = void 0;
-			this.#velocity = 0;
-			return;
-		}
-		const rowHeight = Math.max(this.#rowHeight(), 1);
-		this.#velocity = stepVelocity({
-			velocity: this.#velocity,
-			distance,
-			dt,
-			maxSpeed: this.#maxSpeed * rowHeight,
-			acceleration: this.#acceleration * rowHeight,
-			deceleration: this.#deceleration * rowHeight
-		});
-		this._element.scrollTop = Math.min(target, this._element.scrollTop + this.#velocity * dt);
-		this.#frame = requestAnimationFrame(this.#tick);
-	};
-};
-//#endregion
 //#region src/hooks/useDecorations.tsx
 var DecorationsContext = createContext(/* @__PURE__ */ new Map());
 /**
@@ -203,6 +39,8 @@ var useDecorations = (id) => {
 };
 //#endregion
 //#region src/hooks/useFeedNavigation.ts
+/** How long a commanded destination outranks the scroll offset as "where the reader is". */
+var PENDING_WINDOW = 1500;
 /**
 * The one navigation seam (SPEC: useFeedNavigation): toolbar buttons, arrow keys, the outline rail
 * and the minimap all call this, so they cannot disagree about what a step is.
@@ -216,190 +54,55 @@ var useDecorations = (id) => {
 * Distinct from react-ui-list's `useListNavigation`, which is focus traversal over fully-mounted
 * rows — a different problem in the same naming family.
 */
-var useFeedNavigation = ({ controller, stops, current, count, scrollPastEnd, onNavigate }) => {
-	const jumpTo = useCallback((index, behavior = "auto") => {
-		onNavigate?.(index);
-		const align = !scrollPastEnd && index >= count() - 1 ? "end" : "start";
-		controller.current?.scrollToIndex(index, align, behavior);
-	}, [
-		controller,
+var useFeedNavigation = ({ controller, stops, current, count, onNavigate }) => {
+	const pending = useRef(void 0);
+	const optionsRef = useRef({
+		stops,
+		current,
 		count,
-		scrollPastEnd,
 		onNavigate
-	]);
-	return {
-		step: useCallback((delta) => {
-			const all = stops();
-			if (!all.length) return;
-			const at = current();
-			const next = delta > 0 ? all.find(({ index }) => index > at) ?? all[all.length - 1] : [...all].reverse().find(({ index }) => index < at) ?? all[0];
-			jumpTo(next.index, "smooth");
-		}, [
-			stops,
-			current,
-			jumpTo
-		]),
-		jumpTo,
-		first: useCallback(() => jumpTo(0), [jumpTo]),
-		last: useCallback(() => jumpTo(count() - 1), [jumpTo, count])
-	};
-};
-//#endregion
-//#region src/hooks/useFollow.ts
-/** Distance from the end within which the reader counts as being at it. */
-var STICKY_THRESHOLD = 32;
-/** How long after a gesture a scroll is still attributable to the reader. */
-var GESTURE_WINDOW = 300;
-/**
-* The sticky tail as an intent (SPEC: useFollow) — a policy over the window, not part of it.
-*
-* Withdrawn by one thing only: a scroll that moves *backwards*. That is the reader; a correction
-* never moves the offset back, it moves the end away. Re-deriving the intent from proximity on
-* every commit cannot survive its own corrections — measuring the tail grows the document under a
-* reader who has not moved, the gap opens past any threshold worth having, and the follow reads
-* that as the reader leaving and disengages for good (`bridge/Tail`, the second defect).
-*
-* Reusable for any streaming container — transcripts, logs — because nothing here knows about
-* messages: it needs a scroller, a placement, and the two numbers that say the content grew.
-*/
-var useFollow = ({ scrollerRef, placement, extent, count, axis = "block", reserve = 0, enabled, glide = true }) => {
-	const following = useRef(!!enabled);
-	const wasEnabled = useRef(enabled);
-	if (wasEnabled.current !== enabled) {
-		wasEnabled.current = enabled;
-		following.current = !!enabled;
-	}
-	/**
-	* Where the reader has to be for the last row's rendered edge to rest on the viewport's.
-	*
-	* From the row's own rectangle when it is mounted, and from the arithmetic only when it is not:
-	* measured extents are rounded to integers and rendered rows are fractional, so over a mounted
-	* window the sum drifts from the layout by tens of pixels — an "arrived" that the reader can see
-	* is short. The rect already includes the window's transform, so the delta is exact.
-	*/
-	const endTarget = useCallback(() => {
-		const scroller = scrollerRef.current;
-		if (!scroller) return 0;
-		const last = scroller.querySelector(`[data-index="${count - 1}"]`);
-		if (last) {
-			const current = axis === "block" ? scroller.scrollTop : scroller.scrollLeft;
-			const delta = axis === "block" ? last.getBoundingClientRect().bottom - scroller.getBoundingClientRect().bottom : last.getBoundingClientRect().right - scroller.getBoundingClientRect().right;
-			return Math.max(0, Math.round(current + delta));
-		}
-		return placement.endOffset();
-	}, [
+	});
+	optionsRef.current = {
+		stops,
+		current,
 		count,
-		axis,
-		placement,
-		scrollerRef.current
-	]);
-	const follower = useMemo(() => {
-		const scroller = scrollerRef.current;
-		if (!scroller || axis !== "block") return;
-		return new ScrollFollower(scroller, {
-			maxSpeed: 8,
-			acceleration: 32,
-			deceleration: 10,
-			trailing: () => scroller.scrollHeight - scroller.clientHeight - endTarget(),
-			rowHeight: () => {
-				const { first, last } = placement.layout();
-				const sizes = [];
-				for (let index = first; index <= last; index++) sizes.push(placement.extentOf(index));
-				sizes.sort((a, b) => a - b);
-				const median = sizes.length ? sizes[Math.floor(sizes.length / 2)] : 100;
-				return Math.min(median, scroller.clientHeight || median);
-			}
-		});
-	}, [
-		scrollerRef.current,
-		axis,
-		placement,
-		endTarget
-	]);
-	useLayoutEffect(() => () => follower?.cancel(), [follower]);
-	const lastOffset = useRef(0);
-	const gestureAt = useRef(0);
-	useLayoutEffect(() => {
-		const scroller = scrollerRef.current;
-		if (!scroller || !enabled) return;
-		const onGesture = () => {
-			gestureAt.current = performance.now();
-		};
-		const onScroll = () => {
-			const current = axis === "block" ? scroller.scrollTop : scroller.scrollLeft;
-			const viewport = axis === "block" ? scroller.clientHeight : scroller.clientWidth;
-			const total = axis === "block" ? scroller.scrollHeight : scroller.scrollWidth;
-			const back = current < lastOffset.current - 1;
-			lastOffset.current = current;
-			if (total - reserve - current - viewport <= STICKY_THRESHOLD) following.current = true;
-			else if (back && performance.now() - gestureAt.current < GESTURE_WINDOW) {
-				following.current = false;
-				follower?.cancel();
-			}
-		};
-		scroller.addEventListener("scroll", onScroll, { passive: true });
-		for (const event of [
-			"wheel",
-			"touchmove",
-			"keydown",
-			"pointerdown"
-		]) scroller.addEventListener(event, onGesture, { passive: true });
-		return () => {
-			scroller.removeEventListener("scroll", onScroll);
-			for (const event of [
-				"wheel",
-				"touchmove",
-				"keydown",
-				"pointerdown"
-			]) scroller.removeEventListener(event, onGesture);
+		onNavigate
+	};
+	const jumpTo = useCallback((index, behavior = "auto") => {
+		const { count, onNavigate } = optionsRef.current;
+		pending.current = {
+			index,
+			at: performance.now()
 		};
-	}, [
-		scrollerRef.current,
-		enabled,
-		axis,
-		reserve,
-		follower
-	]);
-	const positioned = useRef(false);
-	useLayoutEffect(() => {
-		const scroller = scrollerRef.current;
-		if (!enabled || !following.current || !count || !scroller) return;
-		const target = endTarget();
-		const gap = target - (axis === "block" ? scroller.scrollTop : scroller.scrollLeft);
-		if (Math.abs(gap) <= 1) {
-			positioned.current = true;
-			return;
-		}
-		const viewport = axis === "block" ? scroller.clientHeight : scroller.clientWidth;
-		if (positioned.current && glide && follower && gap > 0 && gap <= viewport) {
-			follower.start();
-			return;
-		}
-		follower?.cancel();
-		placement.scrollTo(target);
-		lastOffset.current = target;
-		if (axis === "block") scroller.scrollTop = target;
-		else scroller.scrollLeft = target;
-	}, [
-		enabled,
-		count,
-		extent,
-		placement,
-		axis,
-		glide,
-		follower,
-		endTarget,
-		scrollerRef.current
+		onNavigate?.(index);
+		const align = index >= count() - 1 ? "end" : "start";
+		controller.current?.scrollToIndex(index, align, behavior);
+	}, [controller]);
+	const step = useCallback((delta) => {
+		const { stops, current } = optionsRef.current;
+		const all = stops();
+		if (!all.length) return;
+		const flight = pending.current;
+		const at = flight && performance.now() - flight.at < PENDING_WINDOW && flight.index !== current() ? flight.index : current();
+		const next = delta > 0 ? all.find(({ index }) => index > at) ?? all[all.length - 1] : [...all].reverse().find(({ index }) => index < at) ?? all[0];
+		jumpTo(next.index, "smooth");
+	}, [jumpTo]);
+	const first = useCallback(() => jumpTo(0), [jumpTo]);
+	const last = useCallback(() => {
+		const { count } = optionsRef.current;
+		jumpTo(count() - 1);
+	}, [jumpTo]);
+	return useMemo(() => ({
+		step,
+		jumpTo,
+		first,
+		last
+	}), [
+		step,
+		jumpTo,
+		first,
+		last
 	]);
-	return { onNavigate: useCallback((index) => {
-		const wants = index >= count - 1;
-		following.current = !!enabled && wants;
-		if (!wants) follower?.cancel();
-	}, [
-		enabled,
-		count,
-		follower
-	]) };
 };
 //#endregion
 //#region src/hooks/useItemSelection.tsx
@@ -614,7 +317,7 @@ var build = (registry, editable, themeMode) => [
 * Each item owns a document, so streaming appends and per-message editing stay local — where a
 * single thread-wide document needs a cursor and a range table to know which message it is touching.
 */
-var MarkdownBlock = memo(({ text, editable = false, registry, hits, onWidgetsChange }) => {
+var MarkdownBlock = memo(({ text, stream, editable = false, registry, hits, onWidgetsChange }) => {
 	const { themeMode } = useThemeContext();
 	const [view, setView] = useState(null);
 	const [widgets, setWidgets] = useState([]);
@@ -653,21 +356,74 @@ var MarkdownBlock = memo(({ text, editable = false, registry, hits, onWidgetsCha
 			setView(null);
 		};
 	}, [extensions]);
-	const currentRef = useRef(text);
+	const targetRef = useRef(text);
+	const dispatchedRef = useRef(text);
+	const dripRaf = useRef(0);
 	useEffect(() => {
-		if (!view || currentRef.current === text) return;
-		const previous = currentRef.current;
-		currentRef.current = text;
+		if (!view) return;
+		targetRef.current = text;
 		initialTextRef.current = text;
-		view.dispatch(text.startsWith(previous) ? { changes: {
-			from: previous.length,
-			insert: text.slice(previous.length)
-		} } : { changes: {
-			from: 0,
-			to: view.state.doc.length,
-			insert: text
-		} });
-	}, [view, text]);
+		if (dispatchedRef.current === text) return;
+		if (!text.startsWith(dispatchedRef.current)) {
+			cancelAnimationFrame(dripRaf.current);
+			dripRaf.current = 0;
+			dispatchedRef.current = text;
+			view.dispatch({ changes: {
+				from: 0,
+				to: view.state.doc.length,
+				insert: text
+			} });
+			return;
+		}
+		if (!stream) {
+			cancelAnimationFrame(dripRaf.current);
+			dripRaf.current = 0;
+			const from = dispatchedRef.current.length;
+			dispatchedRef.current = text;
+			view.dispatch({ changes: {
+				from,
+				insert: text.slice(from)
+			} });
+			return;
+		}
+		if (dripRaf.current) return;
+		const tick = () => {
+			const target = targetRef.current;
+			const dispatched = dispatchedRef.current;
+			if (!target.startsWith(dispatched)) {
+				dripRaf.current = 0;
+				return;
+			}
+			const backlog = target.slice(dispatched.length);
+			if (!backlog.length) {
+				dripRaf.current = 0;
+				return;
+			}
+			let take = Math.max(2, Math.ceil(backlog.length / 30));
+			if (backlog[0] === "<") {
+				const close = backlog.indexOf(">");
+				take = close === -1 ? 0 : Math.max(take, close + 1);
+			} else {
+				const tag = backlog.indexOf("<");
+				if (tag !== -1) take = Math.min(take, tag);
+			}
+			if (take > 0) {
+				const insert = backlog.slice(0, take);
+				dispatchedRef.current = dispatched + insert;
+				view.dispatch({ changes: {
+					from: dispatched.length,
+					insert
+				} });
+			}
+			dripRaf.current = requestAnimationFrame(tick);
+		};
+		dripRaf.current = requestAnimationFrame(tick);
+	}, [
+		view,
+		text,
+		stream
+	]);
+	useEffect(() => () => cancelAnimationFrame(dripRaf.current), []);
 	const highlighted = useRef(false);
 	useEffect(() => {
 		if (!view || !hits?.length && !highlighted.current) return;
@@ -751,6 +507,12 @@ var tag = (name, content, block, attributes) => {
 	return block.pending ? `${open}${text}` : `${open}${text}</${name}>`;
 };
 var escapeXml = (raw) => raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+/**
+* Whether a message is the reader's own prompt. Role alone cannot say: tool results travel back as
+* `user`-role messages (the AI protocol convention), and a synthetic turn is system-generated input
+* — neither is the reader speaking, so neither gets the prompt frame or counts as a stop.
+*/
+var isPrompt = (message) => message.sender.role === "user" && message.blocks.some((block) => block._tag === "text" && block.disposition !== "synthetic");
 /** Plain text of a message, used by search and copy so both read the same projection. */
 var messageText = (message, renderer) => {
 	const content = renderer(message);
@@ -810,107 +572,6 @@ var sliceFeed = (messages, renderer, range) => {
 	return parts.join("\n\n");
 };
 //#endregion
-//#region src/model/list-model.ts
-/**
-* The low-level reactive collection the virtualizer binds to (SPEC: ListModel).
-*
-* Two faces on one state, deliberately: a plain synchronous face (`count`, `at`, `subscribe`) that
-* the virtualizer consumes without dragging an atom registry into every story and test, and an
-* atom face (`rowsAtom`) for hosts that live in atom-land — derivations (stops, decorations,
-* readouts) hang off the atom rather than becoming parallel props. Both are the same array; the
-* subscribe face is not a fallback but the binding's contract.
-*/
-var ListModel = class {
-	#items;
-	#getId;
-	#listeners = /* @__PURE__ */ new Set();
-	/** The rows as an atom, for derivations. Registry-managed by whoever consumes it. */
-	rowsAtom;
-	#registry;
-	constructor({ items = [], getId }) {
-		this.#items = [...items];
-		this.#getId = getId;
-		this.rowsAtom = Atom.make(this.#items);
-		this.#registry = Registry.make();
-	}
-	get count() {
-		return this.#items.length;
-	}
-	get items() {
-		return this.#items;
-	}
-	getId = (index) => {
-		const item = this.#items[index];
-		return item === void 0 ? `missing-${index}` : this.#getId(item);
-	};
-	at = (index) => this.#items[index];
-	indexOf(id) {
-		return this.#items.findIndex((item) => this.#getId(item) === id);
-	}
-	subscribe(listener) {
-		this.#listeners.add(listener);
-		return () => this.#listeners.delete(listener);
-	}
-	append(items) {
-		if (!items.length) return;
-		this.#items = [...this.#items, ...items];
-		this.#publish({ appended: items.length });
-	}
-	prepend(items) {
-		if (!items.length) return;
-		this.#items = [...items, ...this.#items];
-		this.#publish({ prepended: items.length });
-	}
-	/** An item changed in place — same identity, new content. */
-	update(id) {
-		this.#publish({ updated: [id] });
-	}
-	/**
-	* Replace one item with a successor of the same identity — the streaming case for *frozen*
-	* items. An ECHO object mutates and `update` announces it; a schema-made message is frozen, so
-	* the chunk arrives as a fresh value under the old id. Same event either way: `updated`.
-	*/
-	patch(id, next) {
-		const index = this.#items.findIndex((item) => this.#getId(item) === id);
-		if (index < 0 || this.#getId(next) !== id) return;
-		this.#items = [
-			...this.#items.slice(0, index),
-			next,
-			...this.#items.slice(index + 1)
-		];
-		this.#publish({ updated: [id] });
-	}
-	/**
-	* The adapter for hosts that hand over a whole new array (a React prop, a query result).
-	*
-	* The one place the prepend inference survives, because this is the one caller that genuinely
-	* does not know what changed: the old first item is found in the new array, and everything before
-	* it was prepended. The virtualizer itself is always told (SPEC F-7.1).
-	*/
-	replace(items) {
-		const previous = this.#items;
-		const previousFirst = previous.length ? this.#getId(previous[0]) : void 0;
-		this.#items = [...items];
-		let prepended = 0;
-		if (previousFirst !== void 0 && items.length > previous.length) {
-			const grew = items.length - previous.length;
-			for (let index = 1; index <= grew; index++) if (items[index] !== void 0 && this.#getId(items[index]) === previousFirst) {
-				prepended = index;
-				break;
-			}
-		}
-		const appended = prepended ? 0 : Math.max(0, items.length - previous.length);
-		this.#publish({
-			prepended: prepended || void 0,
-			appended: appended || void 0
-		});
-	}
-	#publish(change) {
-		this.#registry.set(this.rowsAtom, this.#items);
-		for (const listener of this.#listeners) listener(change);
-	}
-};
-//#endregion
 //#region src/model/feed.ts
 /**
 * The native case, not an add-on (SPEC: FeedModel): a ListModel of messages carrying the feed's
@@ -944,6 +605,7 @@ var FeedModel = class extends ListModel {
 	}
 	setStreaming(id) {
 		const previous = this.#streamingId;
+		if (previous === id) return;
 		this.#streamingId = id;
 		for (const changed of [previous, id]) if (changed) this.update(changed);
 	}
@@ -961,7 +623,7 @@ var FeedModel = class extends ListModel {
 	* knows when it changed — callers that want reactivity derive from `rowsAtom`.
 	*/
 	stops() {
-		const predicate = this.#stops === "message" ? () => true : this.#stops === "prompt" ? (message) => message.sender.role === "user" : this.#stops;
+		const predicate = this.#stops === "message" ? () => true : this.#stops === "prompt" ? isPrompt : this.#stops;
 		const stops = [];
 		this.messages.forEach((message, index) => {
 			if (predicate(message, index)) stops.push({
@@ -1011,26 +673,13 @@ var fromMessages = (messages, options = {}) => new FeedModel({
 //#endregion
 //#region src/model/useListModel.ts
 /**
-* A model over an array the host re-creates per render — the React-prop case.
+* A feed model over a message array the host re-creates per render — the React-prop case.
 *
 * The model is stable; the array is folded into it with `replace`, which is where the prepend
 * inference lives (and the only place — SPEC F-7.1). In an effect rather than during render: the
 * model publishes synchronously to its subscribers, and a subscriber invalidating itself while the
 * host is still rendering is a cross-component update React rejects. The window it opens is one
 * frame, and the window's own subscription closes it.
-*/
-var useListModel = (items, getId) => {
-	const model = useMemo(() => new ListModel({
-		items,
-		getId
-	}), []);
-	useEffect(() => {
-		if (model.items !== items) model.replace(items);
-	}, [model, items]);
-	return model;
-};
-/**
-* The feed-shaped twin, for a host that re-creates its message array per render.
 *
 * Streaming through this adapter is a `replace` whose length does not change; the model still
 * publishes, so the window still re-renders, and the streaming item reconciles by document delta
@@ -1047,514 +696,6 @@ var useFeedModel = (messages, options = {}) => {
 	return model;
 };
 //#endregion
-//#region src/virtualizer/placement.ts
-var DEFAULT_OVERSCAN = 8;
-/**
-*
-*/
-var Placement = class {
-	#count;
-	#getId;
-	#extents;
-	#viewport;
-	#overscan;
-	#reserve;
-	/** Measured extents by message id, so that reordering the model cannot invalidate them. */
-	#measured = /* @__PURE__ */ new Map();
-	/** The one authoritative position: this row starts exactly here. */
-	#anchor;
-	#scroll = 0;
-	constructor({ count, getId, extents, viewport, overscan = DEFAULT_OVERSCAN, reserve = 0 }) {
-		this.#count = count;
-		this.#getId = getId;
-		this.#extents = extents;
-		this.#viewport = viewport;
-		this.#overscan = overscan;
-		this.#reserve = reserve;
-		this.#anchor = {
-			id: count ? getId(0) : "",
-			index: 0,
-			start: 0
-		};
-	}
-	get scroll() {
-		return this.#scroll;
-	}
-	get count() {
-		return this.#count;
-	}
-	/** The viewport is the binding's to know: it is the one thing here that comes from the DOM. */
-	setViewport(viewport) {
-		this.#viewport = viewport;
-	}
-	/**
-	* The host's answer about extents can change — a row is edited, a panel opens, a story flips a
-	* fixture — and it is a *function*, so keeping the one handed over at construction quietly pins
-	* the layout to whatever was true then. Measured extents survive: they are keyed by id and this
-	* only replaces what the host would say about a row nobody has measured.
-	*/
-	setExtents(extents) {
-		this.#extents = extents;
-	}
-	setReserve(reserve) {
-		this.#reserve = reserve;
-	}
-	/**
-	* The host's identity function, which is a closure over the host's own list.
-	*
-	* Appending a message gives a *new* `getId`, and a placement holding the one it was constructed
-	* with resolves the new row's index to an id nobody will ever measure. The binding then stores
-	* that row's measurement under the id the DOM carries and reads it back under the stale one, so
-	* the row is measured, found to disagree, measured again — every commit, for ever. It presents as
-	* a render loop rather than as a wrong size, which is what made `bridge/Tail` look like a tail
-	* defect (§8: measurement is only a correction if it can be read back).
-	*/
-	setGetId(getId) {
-		this.#getId = getId;
-	}
-	get anchor() {
-		return this.#anchor;
-	}
-	/** Extent of one row: what was measured, or what the host says. */
-	extentOf(index) {
-		return this.#measured.get(this.#getId(index)) ?? this.#extents.of(index);
-	}
-	/**
-	* Absolute position of a row, derived from the anchor rather than summed from the start.
-	*
-	* Rows between here and the anchor are the only ones whose extents matter (§5): everything before
-	* the window is described by the anchor's position, not by adding up guesses about it.
-	*/
-	positionOf(index) {
-		let position = this.#anchor.start;
-		if (index >= this.#anchor.index) for (let row = this.#anchor.index; row < index; row++) position += this.extentOf(row);
-		else for (let row = index; row < this.#anchor.index; row++) position -= this.extentOf(row);
-		return position;
-	}
-	/** The reader moved. Nothing is corrected here — only the mounted range changes. */
-	scrollTo(offset) {
-		this.#scroll = offset;
-		this.#reanchor();
-	}
-	/**
-	* A row turned out to be a different size than assumed.
-	*
-	* Rows at or after the anchor push the ones after them and leave the anchor alone. A row *before*
-	* the anchor moves the rows between it and the anchor, which is correct and unavoidable: the
-	* anchor is the thing being held still, and it is still being held.
-	*/
-	measure(id, extent) {
-		if (this.#extents.exact) return;
-		this.#measured.set(id, extent);
-	}
-	/** The model changed length. `prepended` rows arrived before the anchor and shift its index. */
-	setCount(count, { prepended = 0 } = {}) {
-		this.#count = count;
-		if (prepended) this.#anchor = {
-			...this.#anchor,
-			index: this.#anchor.index + prepended
-		};
-	}
-	/**
-	* Move to a row that may be nowhere near the window.
-	*
-	* The only operation that positions from estimates rather than from measurement, because there is
-	* no measured path to somewhere the reader has never been. A jump is a discontinuity the reader
-	* asked for, so being approximately right is what it can be.
-	*/
-	jumpTo(index, align = "start") {
-		const clamped = Math.max(0, Math.min(index, this.#count - 1));
-		let start = 0;
-		for (let row = 0; row < clamped; row++) start += this.extentOf(row);
-		this.#anchor = {
-			id: this.#getId(clamped),
-			index: clamped,
-			start
-		};
-		const end = clamped === this.#count - 1 ? this.layout().sizerExtent - this.#reserve : start + this.extentOf(clamped);
-		this.#scroll = align === "end" ? end - this.#viewport : start;
-		this.#scroll = Math.max(0, this.#scroll);
-		this.#reanchor();
-	}
-	/**
-	* Where the reader has to be for `index` to sit at the start (or end) of the viewport.
-	*
-	* Reports; does not move. `jumpTo` re-anchors as well, which is right for a discontinuity and
-	* wrong for a glide: the anchor would arrive at the destination while the element was still
-	* travelling, so the reader would watch the rows they were scrolling *through* unmount and the
-	* journey happen over nothing.
-	*/
-	offsetOf(index, align = "start") {
-		const clamped = Math.max(0, Math.min(index, this.#count - 1));
-		const start = this.positionOf(clamped);
-		return Math.max(0, align === "end" ? start + this.extentOf(clamped) - this.#viewport : start);
-	}
-	/**
-	* Where the reader has to be for the last row to rest against the end of the viewport.
-	*
-	* Derived from the anchor, like every other position, and deliberately **not** from a sum over the
-	* model: a follow asks this again on every commit, and each answer mounts rows whose measurement
-	* replaces the estimates that sum is over — so a sum-based end moves every time it is consulted,
-	* and consulting it is what moves it. That is not slow convergence, it is a feedback loop, and in
-	* React it terminates by exceeding the update limit rather than by settling (`bridge/Tail`).
-	*
-	* Anchor-relative, the answer only changes as the rows *between the anchor and the last row* are
-	* measured — each of them once — so a follow settles in a couple of commits and rows the reader
-	* has already passed cannot disturb it.
-	*/
-	endOffset() {
-		if (!this.#count) return 0;
-		const last = this.#count - 1;
-		return Math.max(0, this.positionOf(last) + this.extentOf(last) - this.#viewport);
-	}
-	/** The mounted range, the parent's offset, and the extent the thumb is computed from. */
-	layout() {
-		if (!this.#count) return {
-			first: 0,
-			last: -1,
-			visible: {
-				first: 0,
-				last: -1
-			},
-			offset: 0,
-			sizerExtent: 0
-		};
-		const { first, last, visible } = this.#range();
-		const offset = this.positionOf(first);
-		let windowExtent = 0;
-		for (let row = first; row <= last; row++) windowExtent += this.extentOf(row);
-		let after = 0;
-		for (let row = last + 1; row < this.#count; row++) after += this.extentOf(row);
-		return {
-			first,
-			last,
-			visible,
-			offset,
-			sizerExtent: offset + windowExtent + after + this.#reserve
-		};
-	}
-	/**
-	* Repay the start edge's drift: shift every position so row 0 starts at exactly zero, and move
-	* the scroll by the same amount so nothing the reader sees moves.
-	*
-	* The first row starting at zero is the one absolute fact of content space, and estimates being
-	* replaced above the anchor break it: a feed opened at its tail whose rows measure taller than
-	* assumed pushes row 0 *negative*, where no scroll can reach it — the reader arrives at the top
-	* and the first messages simply are not there. This is the single correction that must touch the
-	* scroll (§7's rule is about corrections and readers sharing a channel; here both the content and
-	* the offset move by the same delta in the same commit, so the reader sees nothing at all).
-	* Returns the shift for the binding to apply to the element.
-	*/
-	rebaseStart() {
-		if (!this.#count) return 0;
-		const shift = -this.positionOf(0);
-		if (shift === 0) return 0;
-		this.#anchor = {
-			...this.#anchor,
-			start: this.#anchor.start + shift
-		};
-		this.#scroll = Math.max(0, this.#scroll + shift);
-		return shift;
-	}
-	/**
-	* What an edge revealed, if the window has reached one.
-	*
-	* The edges are where estimate meets ground truth: the first row starts at zero and the last one
-	* ends at the content's end, by definition, so a computed position that says otherwise is the
-	* measure of how wrong the estimates were. Reported rather than silently applied — absorbing it
-	* into the anchor would move what the reader is looking at, and at an edge they are looking at
-	* exactly the thing that would move.
-	*/
-	drift() {
-		if (!this.#count) return;
-		const { first, last } = this.#range();
-		if (first === 0 && this.positionOf(0) !== 0) return {
-			edge: "start",
-			delta: this.positionOf(0)
-		};
-		if (last === this.#count - 1) {
-			const end = this.positionOf(last) + this.extentOf(last);
-			const { sizerExtent } = this.layout();
-			const content = sizerExtent - this.#reserve;
-			if (end !== content) return {
-				edge: "end",
-				delta: content - end
-			};
-		}
-	}
-	/** Visible rows, plus overscan, clamped to the model. */
-	#range() {
-		let first = this.#anchor.index;
-		while (first > 0 && this.positionOf(first) > this.#scroll) first--;
-		while (first < this.#count - 1 && this.positionOf(first) + this.extentOf(first) <= this.#scroll) first++;
-		let last = first;
-		let filled = this.positionOf(first) + this.extentOf(first);
-		while (last < this.#count - 1 && filled < this.#scroll + this.#viewport) {
-			last++;
-			filled += this.extentOf(last);
-		}
-		return {
-			first: Math.max(0, first - this.#overscan),
-			last: Math.min(this.#count - 1, last + this.#overscan),
-			visible: {
-				first,
-				last
-			}
-		};
-	}
-	/**
-	* The anchor is the first row the reader can see — always, not merely when the old one leaves
-	* the window.
-	*
-	* The anchor is the row held still while others are measured, so it must be the reader's
-	* reference point. Clamping the old anchor into the mounted range let it drift to the window's
-	* *far* edge after an upward scroll — below everything on screen — and a widget toggled open
-	* above it then pushed the whole viewport up by its own growth: the engine held a row the reader
-	* could not see still, at the expense of every row they could. Re-anchoring preserves the new
-	* anchor's computed position exactly, so the move itself shifts nothing.
-	*/
-	#reanchor() {
-		if (!this.#count) return;
-		const { visible } = this.#range();
-		if (this.#anchor.index === visible.first) return;
-		const index = visible.first;
-		this.#anchor = {
-			id: this.#getId(index),
-			index,
-			start: this.positionOf(index)
-		};
-	}
-};
-//#endregion
-//#region src/virtualizer/Window.tsx
-/** Extent of the mounted rows, which is the parent's own size in content space. */
-var windowExtentOf = (placement, first, last) => {
-	let extent = 0;
-	for (let index = first; index <= last; index++) extent += placement.extentOf(index);
-	return extent;
-};
-var useWindow = ({ scrollerRef, model, extents, axis = "block", overscan, reserve = 0, onEdge, onMismatch, onChange, controllerRef }) => {
-	const windowRef = useRef(null);
-	const [, render] = useState(0);
-	const invalidate = useCallback(() => render((value) => value + 1), []);
-	const count = model.count;
-	const getId = model.getId;
-	const placement = useMemo(() => new Placement({
-		count,
-		getId,
-		extents,
-		viewport: 0,
-		overscan
-	}), []);
-	const reported = useRef(/* @__PURE__ */ new Set());
-	placement.setGetId(getId);
-	useEffect(() => {
-		const unsubscribe = model.subscribe((change) => {
-			placement.setCount(model.count, { prepended: change.prepended ?? 0 });
-			invalidate();
-		});
-		placement.setCount(model.count, {});
-		invalidate();
-		return unsubscribe;
-	}, [
-		model,
-		placement,
-		invalidate
-	]);
-	if (placement.count !== model.count) placement.setCount(model.count, {});
-	useImperativeHandle(controllerRef, () => ({ scrollToIndex: (index, align, behavior = "auto") => {
-		const scroller = scrollerRef.current;
-		const { first, last } = placement.layout();
-		if (behavior === "smooth" && scroller && index >= first && index <= last) {
-			const target = placement.offsetOf(index, align);
-			scroller.scrollTo(axis === "block" ? {
-				top: target,
-				behavior
-			} : {
-				left: target,
-				behavior
-			});
-			return;
-		}
-		placement.jumpTo(index, align);
-		if (scroller) {
-			if (axis === "block") scroller.scrollTop = placement.scroll;
-			else scroller.scrollLeft = placement.scroll;
-		}
-		invalidate();
-	} }), [
-		placement,
-		axis,
-		invalidate
-	]);
-	placement.setExtents(extents);
-	placement.setReserve(reserve);
-	const { first, last, visible, offset, sizerExtent } = placement.layout();
-	useLayoutEffect(() => {
-		const scroller = scrollerRef.current;
-		if (!scroller) return;
-		const read = () => axis === "block" ? scroller.clientHeight : scroller.clientWidth;
-		placement.setViewport(read());
-		const observer = new ResizeObserver(() => {
-			placement.setViewport(read());
-			invalidate();
-		});
-		observer.observe(scroller);
-		const onScroll = () => {
-			placement.scrollTo(axis === "block" ? scroller.scrollTop : scroller.scrollLeft);
-			invalidate();
-		};
-		scroller.addEventListener("scroll", onScroll, { passive: true });
-		invalidate();
-		return () => {
-			observer.disconnect();
-			scroller.removeEventListener("scroll", onScroll);
-		};
-	}, [
-		placement,
-		axis,
-		invalidate
-	]);
-	useLayoutEffect(() => {
-		const parent = windowRef.current;
-		if (!parent) return;
-		let changed = false;
-		for (const element of parent.children) {
-			const row = element;
-			const index = Number(row.dataset.index);
-			const id = row.dataset.objectId;
-			const actual = Math.round(axis === "block" ? row.offsetHeight : row.offsetWidth);
-			const declared = placement.extentOf(index);
-			if (extents.exact) {
-				const key = `${id}:${declared}:${actual}`;
-				if (actual !== declared && !reported.current.has(key)) {
-					reported.current.add(key);
-					onMismatch?.({
-						index,
-						id,
-						declared,
-						actual
-					});
-				}
-				continue;
-			}
-			if (actual && actual !== declared) {
-				placement.measure(id, actual);
-				changed = true;
-			}
-		}
-		if (placement.rebaseStart() !== 0) {
-			const scroller = scrollerRef.current;
-			if (scroller) {
-				if (axis === "block") scroller.scrollTop = placement.scroll;
-				else scroller.scrollLeft = placement.scroll;
-			}
-			changed = true;
-		}
-		const drift = placement.drift();
-		const key = drift && `${drift.edge}:${drift.delta}`;
-		if (drift && key && !reported.current.has(key)) {
-			reported.current.add(key);
-			onEdge?.(drift);
-		}
-		if (changed) invalidate();
-	});
-	const announced = useRef("");
-	const state = `${visible.first}:${visible.last}:${first}:${last}:${count}`;
-	if (onChange && announced.current !== state) {
-		announced.current = state;
-		const scroller = scrollerRef.current;
-		const viewport = (axis === "block" ? scroller?.clientHeight : scroller?.clientWidth) ?? 0;
-		const extent = windowExtentOf(placement, first, last);
-		queueMicrotask(() => onChange({
-			index: visible.first,
-			visible,
-			mounted: {
-				first,
-				last
-			},
-			count,
-			geometry: {
-				scroll: placement.scroll,
-				viewport,
-				total: sizerExtent,
-				window: {
-					start: offset,
-					extent
-				}
-			}
-		}));
-	}
-	return {
-		placement,
-		layout: {
-			first,
-			last,
-			visible,
-			offset,
-			sizerExtent
-		},
-		windowRef,
-		sizerExtent,
-		offset,
-		first,
-		last
-	};
-};
-/**
-* The DOM shape, and nothing else.
-*
-* Three elements: a **sizer** that holds no rows and exists only to give the thumb something to
-* measure, a **window** holding the mounted rows in normal flow, and the scroller around them.
-*/
-var Window = ({ classNames, children, controllerRef, ...options }) => {
-	const scrollerRef = useRef(null);
-	const inner = useRef(null);
-	const { placement, windowRef, offset, sizerExtent, first, last } = useWindow({
-		...options,
-		scrollerRef,
-		controllerRef: inner
-	});
-	const axis = options.axis ?? "block";
-	const main = axis === "block" ? "height" : "width";
-	const { getId } = options.model;
-	const follow = useFollow({
-		scrollerRef,
-		placement,
-		extent: sizerExtent,
-		count: options.model.count,
-		axis,
-		reserve: options.reserve,
-		enabled: options.sticky
-	});
-	useImperativeHandle(controllerRef, () => ({ scrollToIndex: (index, align, behavior) => {
-		follow.onNavigate(index);
-		inner.current?.scrollToIndex(index, align, behavior);
-	} }), [follow]);
-	const rows = [];
-	for (let index = first; index <= last; index++) rows.push(/* @__PURE__ */ jsx("div", {
-		"data-index": index,
-		"data-object-id": getId(index),
-		children: children(index, getId(index))
-	}, getId(index)));
-	return /* @__PURE__ */ jsxs("div", {
-		ref: scrollerRef,
-		className: mx("relative", axis === "block" ? "overflow-y-auto" : "overflow-x-auto", classNames),
-		style: { overflowAnchor: "none" },
-		"data-testid": "window.scroller",
-		children: [/* @__PURE__ */ jsx("div", {
-			style: { [main]: sizerExtent },
-			"data-testid": "window.sizer"
-		}), /* @__PURE__ */ jsx("div", {
-			ref: windowRef,
-			className: mx("absolute top-0 left-0 flex", axis === "block" ? "flex-col w-full" : "flex-row h-full"),
-			style: { transform: axis === "block" ? `translateY(${offset}px)` : `translateX(${offset}px)` },
-			"data-testid": "window.window",
-			children: rows
-		})]
-	});
-};
-//#endregion
 //#region src/components/MessageList/position-log.ts
 /** Movement below this is sub-pixel rounding, not a row changing place. */
 var EPSILON = 1;
@@ -1723,7 +864,7 @@ var DEFAULT_ESTIMATE = 120;
 * Renders no DOM of its own, so a toolbar or statusbar that reads its state can sit outside the
 * scroll container — the scrolling part is `MessageList.Viewport`.
 */
-var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry, Chrome = DefaultChrome, Custom, debug, estimateSize = DEFAULT_ESTIMATE, stickyBottom = false, scrollPastEnd = false, overscan = 8, onRangeChange }) => {
+var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry, Chrome = DefaultChrome, Custom, debug, estimateSize = DEFAULT_ESTIMATE, stickyBottom = false, tailLines = 0, overscan = 8, onRangeChange, controllerRef }) => {
 	const widgetStore = useMemo(createWidgetStateStore, []);
 	const [viewport, setViewportState] = useState(null);
 	const scrollerRef = useRef(null);
@@ -1755,46 +896,53 @@ var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry,
 		estimateSize,
 		nominalSize
 	]);
-	const reserve = useMemo(() => scrollPastEnd && viewport && model.count ? Math.max(0, viewport.clientHeight - nominalSize) : 0, [
-		scrollPastEnd,
-		viewport,
-		model.count,
-		nominalSize
-	]);
+	const [reserve, setReserve] = useState(0);
+	useEffect(() => {
+		if (!viewport || !tailLines) {
+			setReserve(0);
+			return;
+		}
+		const lineHeight = parseFloat(getComputedStyle(viewport).lineHeight) || 24;
+		setReserve(Math.round(tailLines * lineHeight));
+	}, [viewport, tailLines]);
 	const controller = useRef(null);
+	const onWindowChange = useCallback((state) => {
+		const next = state.count ? {
+			startIndex: state.visible.first,
+			endIndex: state.visible.last
+		} : void 0;
+		setRange(next);
+		setMounted(state.mounted.last - state.mounted.first + 1);
+		if (next) {
+			onRangeChange?.(next);
+			setCurrent(next.startIndex);
+			if (next.startIndex === 0) model.more("start");
+			if (next.endIndex >= model.count - 1) model.more("end");
+		}
+	}, [
+		onRangeChange,
+		setCurrent,
+		model
+	]);
 	const { placement, windowRef, offset, sizerExtent, first, last } = useWindow({
 		scrollerRef,
 		model,
 		extents,
 		overscan,
 		reserve,
-		onChange: useCallback((state) => {
-			const next = state.count ? {
-				startIndex: state.visible.first,
-				endIndex: state.visible.last
-			} : void 0;
-			setRange(next);
-			setMounted(state.mounted.last - state.mounted.first + 1);
-			if (next) {
-				onRangeChange?.(next);
-				setCurrent(next.startIndex);
-				if (next.startIndex === 0) model.more("start");
-				if (next.endIndex >= model.count - 1) model.more("end");
-			}
-		}, [
-			onRangeChange,
-			setCurrent,
-			model
-		]),
+		onChange: onWindowChange,
 		controllerRef: controller
 	});
+	const changedAtRef = useRef(performance.now());
+	useEffect(() => model.subscribe(() => changedAtRef.current = performance.now()), [model]);
 	const follow = useFollow({
 		scrollerRef,
 		placement,
 		extent: sizerExtent,
 		count: model.count,
 		reserve,
-		enabled: stickyBottom
+		enabled: stickyBottom,
+		changedAt: () => changedAtRef.current
 	});
 	const jumps = useJumpDetector(viewport, debug);
 	const { shifts, breaks, trace: shiftTrace, record: recordPositions, reset: resetShifts } = usePositionLog();
@@ -1817,14 +965,24 @@ var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry,
 	]);
 	const scrollToIndex = useCallback((index, { align = "start", behavior = "auto" } = {}) => {
 		follow.onNavigate(index);
-		controller.current?.scrollToIndex(index, align === "center" ? "start" : align, behavior);
+		controller.current?.scrollToIndex(index, align, behavior);
 	}, [follow]);
 	const scrollToBottom = useCallback((options) => {
-		if (model.count) scrollToIndex(model.count - 1, {
+		if (!model.count) return;
+		const scroller = scrollerRef.current;
+		if (scroller && scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop <= 32) {
+			follow.onNavigate(model.count - 1);
+			return;
+		}
+		scrollToIndex(model.count - 1, {
 			align: "end",
 			...options
 		});
-	}, [scrollToIndex, model]);
+	}, [
+		scrollToIndex,
+		model,
+		follow
+	]);
 	useEffect(() => {
 		if (viewport) viewport.__feed = {
 			placement,
@@ -1851,7 +1009,6 @@ var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry,
 		stops: () => model.stops(),
 		current: () => currentIndexRef.current,
 		count: () => model.count,
-		scrollPastEnd,
 		onNavigate: follow.onNavigate
 	});
 	useEffect(() => {
@@ -1873,6 +1030,23 @@ var MessageListRoot = ({ children, model, renderer = defaultRenderer, registry,
 		return () => viewport.removeEventListener("keydown", onKeyDown);
 	}, [viewport, navigation]);
 	const selectionGroup = useMemo(createSelectionGroup, []);
+	useEffect(() => {
+		setRef(controllerRef, {
+			model,
+			scrollToBottom,
+			scrollToIndex,
+			navigation
+		});
+		return () => {
+			setRef(controllerRef, null);
+		};
+	}, [
+		controllerRef,
+		model,
+		scrollToBottom,
+		scrollToIndex,
+		navigation
+	]);
 	return /* @__PURE__ */ jsx(SelectionGroupContext.Provider, {
 		value: selectionGroup,
 		children: /* @__PURE__ */ jsx(WidgetStateProvider, {
@@ -1915,8 +1089,15 @@ var MESSAGE_LIST_VIEWPORT_NAME = "MessageList.Viewport";
 * Scrolling belongs to `ScrollArea`, which owns the overlay thumbs and the padding tokens; the
 * placement needs only the element being scrolled, which `ScrollArea.Viewport` publishes.
 */
-var MessageListViewport = composable(({ autoHide, centered, native, padding, scrollbars, thin, gutter, ...props }, forwardedRef) => {
-	const { model, Chrome, windowRef, offset, sizerExtent, first, last, setViewport } = useMessageListContext(MESSAGE_LIST_VIEWPORT_NAME);
+/**
+* Whether a message renders to nothing under the current renderer — e.g. a stats-only turn, whose
+* block the renderer deliberately maps to no output. The message stays in the model (identity,
+* stops, search all see it); only its chrome is withheld, so the reader is not shown an empty row
+* with a toolbar.
+*/
+var isEmptyContent = (content, hasCustomRenderer) => content.kind === "markdown" && !content.text.trim() || content.kind === "html" && !content.html.trim() || content.kind === "custom" && !hasCustomRenderer;
+var MessageListViewport = composable(({ autoHide, centered, native, padding, scrollbars, thin, gutter = "md", ...props }, forwardedRef) => {
+	const { model, renderer, Chrome, Custom, windowRef, offset, sizerExtent, first, last, setViewport } = useMessageListContext(MESSAGE_LIST_VIEWPORT_NAME);
 	const { selectedIds, onSelect } = useItemSelectionValue();
 	const handleViewportRef = useCallback((element) => {
 		setViewport(element);
@@ -1926,10 +1107,11 @@ var MessageListViewport = composable(({ autoHide, centered, native, padding, scr
 	for (let index = first; index <= last; index++) {
 		const message = model.at(index);
 		if (!message) continue;
+		const empty = isEmptyContent(renderer(message), Boolean(Custom));
 		rows.push(/* @__PURE__ */ jsx("div", {
 			"data-index": index,
 			"data-object-id": message.id,
-			children: /* @__PURE__ */ jsx(Column.Root, {
+			children: !empty && /* @__PURE__ */ jsx(Column.Root, {
 				gutter,
 				children: /* @__PURE__ */ jsx(Column.Center, { children: /* @__PURE__ */ jsx(Chrome, {
 					message,
@@ -1956,6 +1138,7 @@ var MessageListViewport = composable(({ autoHide, centered, native, padding, scr
 				position: "relative",
 				overflowAnchor: "none"
 			},
+			classNames: "dx-document",
 			ref: handleViewportRef,
 			children: [/* @__PURE__ */ jsx("div", {
 				style: { height: sizerExtent },
@@ -1977,7 +1160,7 @@ var MESSAGE_LIST_ITEM_NAME = "MessageList.Item";
 * outside the scrolling window — a pinned message, a preview — through the same path.
 */
 var MessageListItem = composable(({ message, ...props }, forwardedRef) => {
-	const { renderer, registry, Custom, debug, reportWidgets } = useMessageListContext(MESSAGE_LIST_ITEM_NAME);
+	const { model, renderer, registry, Custom, debug, reportWidgets } = useMessageListContext(MESSAGE_LIST_ITEM_NAME);
 	const content = renderer(message);
 	const decorations = useDecorations(message.id);
 	const hits = useMemo(() => decorations.length ? decorations.map(({ range }) => [range.offset, range.offset + range.length]) : void 0, [decorations]);
@@ -1990,6 +1173,7 @@ var MessageListItem = composable(({ message, ...props }, forwardedRef) => {
 				scope: message.id,
 				children: /* @__PURE__ */ jsx(MarkdownBlock, {
 					text: content.text,
+					stream: model.streamingId === message.id,
 					registry,
 					hits,
 					onWidgetsChange: handleWidgetsChange
@@ -2004,10 +1188,76 @@ var MessageListItem = composable(({ message, ...props }, forwardedRef) => {
 	});
 });
 MessageListItem.displayName = MESSAGE_LIST_ITEM_NAME;
+var MESSAGE_LIST_NAV_NAME = "MessageList.Nav";
+/**
+* The step and jump controls, on the same seam as the arrow keys and the rails (SPEC F-3.2), so a
+* reader who switches between them does not change places. Lives outside the viewport — Root is
+* headless precisely so chrome like this can sit in a toolbar.
+*
+* While any of its buttons has focus, ArrowUp/Down step and Meta(Ctrl)+Arrow jumps to the ends —
+* the same keymap the viewport itself carries, so focus landing on the toolbar does not change
+* what the keys mean.
+*/
+var MessageListNav = composable(({ ends = true, ...props }, forwardedRef) => {
+	const { navigation } = useMessageListContext(MESSAGE_LIST_NAV_NAME);
+	const onKeyDown = useCallback((event) => {
+		const delta = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+		if (!delta || event.altKey || event.shiftKey) return;
+		event.preventDefault();
+		if (event.metaKey || event.ctrlKey) {
+			if (delta > 0) navigation.last();
+			else navigation.first();
+			return;
+		}
+		navigation.step(delta);
+	}, [navigation]);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		...composableProps(props),
+		onKeyDown,
+		ref: forwardedRef,
+		children: [
+			ends && /* @__PURE__ */ jsx(IconButton, {
+				icon: "ph--arrow-line-up--regular",
+				iconOnly: true,
+				label: "First message",
+				variant: "ghost",
+				"data-testid": "feed.nav.top",
+				onClick: () => navigation.first()
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: "ph--caret-up--regular",
+				iconOnly: true,
+				label: "Previous message",
+				variant: "ghost",
+				"data-testid": "feed.nav.back",
+				onClick: () => navigation.step(-1)
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: "ph--caret-down--regular",
+				iconOnly: true,
+				label: "Next message",
+				variant: "ghost",
+				"data-testid": "feed.nav.forward",
+				onClick: () => navigation.step(1)
+			}),
+			ends && /* @__PURE__ */ jsx(IconButton, {
+				icon: "ph--arrow-line-down--regular",
+				iconOnly: true,
+				label: "Last message",
+				variant: "ghost",
+				"data-testid": "feed.nav.bottom",
+				onClick: () => navigation.last()
+			})
+		]
+	});
+});
+MessageListNav.displayName = MESSAGE_LIST_NAV_NAME;
 var MessageList = {
 	Root: MessageListRoot,
 	Viewport: MessageListViewport,
-	Item: MessageListItem
+	Item: MessageListItem,
+	Nav: MessageListNav
 };
 //#endregion
 //#region src/components/Minimap/Minimap.tsx
@@ -2223,6 +1473,6 @@ var Outline = ({ classNames, markers, visibleRange, tickSize = TICK_SIZE, width
 	});
 };
 //#endregion
-export { ItemSelectionProvider as A, useWidgetState as C, SelectionGroupContext as D, setHighlights as E, useFeedNavigation as F, DecorationsProvider as I, useDecorations as L, useItemSelection as M, useItemSelectionValue as N, createSelectionGroup as O, useFollow as P, ScrollFollower as R, createWidgetStateStore as S, highlights as T, sliceFeed as _, useJumpDetector as a, WidgetScopeProvider as b, useFeedModel as c, fromMessages as d, ListModel as f, searchFeed as g, messageText as h, useMessageList as i, isAdditive as j, useSelectionGroup as k, useListModel as l, defaultRenderer as m, Minimap as n, usePositionLog as o, chatRenderer as p, MessageList as r, Window as s, Outline as t, FeedModel as u, MarkdownBlock as v, highlightTheme as w, WidgetStateProvider as x, HtmlBlock as y, stepVelocity as z };
+export { useItemSelection as A, highlights as C, useSelectionGroup as D, createSelectionGroup as E, useFeedNavigation as M, DecorationsProvider as N, ItemSelectionProvider as O, useDecorations as P, highlightTheme as S, SelectionGroupContext as T, HtmlBlock as _, useJumpDetector as a, createWidgetStateStore as b, FeedModel as c, defaultRenderer as d, isPrompt as f, MarkdownBlock as g, sliceFeed as h, useMessageList as i, useItemSelectionValue as j, isAdditive as k, fromMessages as l, searchFeed as m, Minimap as n, usePositionLog as o, messageText as p, MessageList as r, useFeedModel as s, Outline as t, chatRenderer as u, WidgetScopeProvider as v, setHighlights as w, useWidgetState as x, WidgetStateProvider as y };
 
 //# sourceMappingURL=chunk-src.mjs.map