@assistant-ui/react 0.15.23 → 0.15.25

package/src/primitives/thread/useThreadViewportAutoScroll.test.tsx

@@ -28,11 +28,13 @@ import { ThreadPrimitiveScrollToBottom } from "./ThreadScrollToBottom";
 import { ThreadPrimitiveViewport } from "./ThreadViewport";
 import {
   ExportedMessageRepository,
+  useExternalStoreRuntime,
   useLocalRuntime,
   type ChatModelAdapter,
   type ThreadHistoryAdapter,
   type ThreadMessageLike,
 } from "../../index";
+import { ThreadPrimitiveLoadEarlier } from "./ThreadLoadEarlier";
 
 const adapter: ChatModelAdapter = {
   async *run() {},
@@ -50,8 +52,19 @@ const getMaxScrollTop = (element: Element) =>
 
 let forceShortViewportMeasurement = false;
 let viewportMeasurementOffset = 0;
+const messageHeights = new Map<string, number>();
 const resizeObserverCallbacks = new Set<ResizeObserverCallback>();
 
+const messageRows = () => [
+  ...document.querySelectorAll<HTMLElement>('[data-testid="thread-message"]'),
+];
+
+const rowHeight = (row: Element) =>
+  messageHeights.get(row.getAttribute("data-message-id") ?? "") ?? 80;
+
+const rowsHeight = (rows: readonly Element[]) =>
+  rows.reduce((height, row) => height + rowHeight(row), 0);
+
 class TestResizeObserver {
   private callback: ResizeObserverCallback;
 
@@ -121,11 +134,32 @@ beforeAll(() => {
     get() {
       if (this.getAttribute("data-testid") !== "viewport") return 0;
       if (forceShortViewportMeasurement) return this.clientHeight;
-      return (
-        document.querySelectorAll('[data-testid="thread-message"]').length *
-          80 +
-        viewportMeasurementOffset
-      );
+      return rowsHeight(messageRows()) + viewportMeasurementOffset;
+    },
+  });
+
+  Object.defineProperty(HTMLElement.prototype, "getBoundingClientRect", {
+    configurable: true,
+    value(this: HTMLElement) {
+      const rows = messageRows();
+      const index = rows.indexOf(this);
+      const viewport = this.closest<HTMLElement>('[data-testid="viewport"]');
+      const top =
+        index === -1
+          ? 0
+          : rowsHeight(rows.slice(0, index)) - (viewport?.scrollTop ?? 0);
+      const height = index === -1 ? 0 : rowHeight(this);
+      return {
+        x: 0,
+        y: top,
+        top,
+        bottom: top + height,
+        left: 0,
+        right: 0,
+        width: 0,
+        height,
+        toJSON: () => ({}),
+      } satisfies DOMRect;
     },
   });
 
@@ -141,6 +175,7 @@ beforeAll(() => {
 afterEach(() => {
   forceShortViewportMeasurement = false;
   viewportMeasurementOffset = 0;
+  messageHeights.clear();
   resizeObserverCallbacks.clear();
   cleanup();
 });
@@ -169,9 +204,11 @@ const AtBottom: FC = () => {
 const Thread = ({
   autoScroll,
   scrollToBottomOnInitialize,
+  scrollToBottomOnThreadSwitch,
 }: {
   autoScroll?: boolean | undefined;
   scrollToBottomOnInitialize?: boolean | undefined;
+  scrollToBottomOnThreadSwitch?: boolean | undefined;
 }) => (
   <ThreadPrimitiveRoot>
     <ThreadPrimitiveViewport
@@ -179,6 +216,7 @@ const Thread = ({
       data-testid="viewport"
       turnAnchor="top"
       scrollToBottomOnInitialize={scrollToBottomOnInitialize}
+      scrollToBottomOnThreadSwitch={scrollToBottomOnThreadSwitch}
     >
       <ThreadPrimitiveMessages components={{ Message }} />
       <AtBottom />
@@ -908,4 +946,217 @@ describe("useThreadViewportAutoScroll", () => {
     act(notifyResizeObservers);
     expect(screen.getByTestId("is-at-bottom").textContent).toBe("false");
   });
+
+  describe("earlier messages", () => {
+    const pagedMessages: ThreadMessageLike[] = messages.map(
+      (message, index) => ({
+        ...message,
+        id: `message-${index}`,
+      }),
+    );
+
+    type PagedThreadProps = {
+      follow?: boolean;
+      running?: boolean;
+      /** Runs in the same update that prepends the page. */
+      onPrepend?: () => void;
+    };
+
+    const PagedThread = ({
+      follow = false,
+      running = false,
+      onPrepend,
+    }: PagedThreadProps) => {
+      const [loaded, setLoaded] = useState(pagedMessages.slice(4));
+      const runtime = useExternalStoreRuntime<ThreadMessageLike>({
+        messages: loaded,
+        convertMessage: (message) => message,
+        onNew: async () => {},
+        isRunning: running,
+        hasEarlier: loaded.length < pagedMessages.length,
+        onLoadEarlier: async () => {
+          onPrepend?.();
+          setLoaded(pagedMessages);
+        },
+      });
+
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          {follow ? <BottomAnchorThread /> : <Thread />}
+          <ThreadPrimitiveLoadEarlier data-testid="load-earlier" />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    const renderAt = async (
+      scrollTop: number,
+      { follow = false, onPrepend }: PagedThreadProps = {},
+    ) => {
+      render(<PagedThread follow={follow} {...(onPrepend && { onPrepend })} />);
+      await waitFor(() =>
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(4),
+      );
+      act(() => {
+        getViewport().scrollTop = scrollTop;
+        fireEvent.scroll(getViewport());
+      });
+    };
+
+    const loadEarlier = async () => {
+      await act(async () => {
+        fireEvent.click(screen.getByTestId("load-earlier"));
+      });
+      await waitFor(() =>
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(8),
+      );
+      act(notifyResizeObservers);
+    };
+
+    it("keeps the rows a reader scrolled to in place when an earlier page is prepended", async () => {
+      await renderAt(0);
+
+      await loadEarlier();
+
+      expect(getViewport().scrollTop).toBe(4 * 80);
+      expect(
+        (screen.getByTestId("load-earlier") as HTMLButtonElement).disabled,
+      ).toBe(true);
+    });
+
+    it.each([false, true])(
+      "keeps a reader at the bottom at the bottom (auto-follow %s)",
+      async (follow) => {
+        await renderAt(4 * 80 - 100, { follow });
+
+        await loadEarlier();
+
+        expect(getViewport().scrollTop).toBe(8 * 80 - 100);
+      },
+    );
+
+    it("does not count growth below the reader in the same update as part of the page", async () => {
+      await renderAt(100, {
+        onPrepend: () => {
+          viewportMeasurementOffset = 40;
+        },
+      });
+
+      await loadEarlier();
+
+      expect(getViewport().scrollTop).toBe(4 * 80 + 100);
+    });
+
+    it("holds the rows in place while the page above settles, until the reader's next gesture", async () => {
+      await renderAt(0);
+      await loadEarlier();
+      expect(getViewport().scrollTop).toBe(4 * 80);
+
+      messageHeights.set("message-3", 120);
+      act(notifyResizeObservers);
+      expect(getViewport().scrollTop).toBe(4 * 80 + 40);
+
+      fireEvent.wheel(getViewport());
+      messageHeights.set("message-2", 120);
+      act(notifyResizeObservers);
+      expect(getViewport().scrollTop).toBe(4 * 80 + 40);
+    });
+
+    it("lets go of the held rows when a run starts, so the new turn can take the viewport", async () => {
+      const { rerender } = render(<PagedThread />);
+      await waitFor(() =>
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(4),
+      );
+      act(() => {
+        getViewport().scrollTop = 0;
+        fireEvent.scroll(getViewport());
+      });
+      await loadEarlier();
+
+      await act(async () => {
+        rerender(<PagedThread running />);
+      });
+      messageHeights.set("message-3", 120);
+      act(notifyResizeObservers);
+
+      expect(getViewport().scrollTop).toBe(4 * 80);
+    });
+
+    it("lets go of the held rows once something else scrolls the viewport", async () => {
+      await renderAt(0);
+      await loadEarlier();
+
+      act(() => {
+        getViewport().scrollTo({ top: 100 });
+      });
+      messageHeights.set("message-3", 120);
+      act(notifyResizeObservers);
+
+      expect(getViewport().scrollTop).toBe(100);
+    });
+
+    it("holds the row the reader sees, not the old first message, while content between them settles", async () => {
+      await renderAt(100);
+      await loadEarlier();
+      expect(getViewport().scrollTop).toBe(4 * 80 + 100);
+
+      messageHeights.set("message-4", 120);
+      act(notifyResizeObservers);
+      expect(getViewport().scrollTop).toBe(4 * 80 + 100 + 40);
+    });
+
+    it("does not treat a thread switch as a page, even when the new thread repeats the old first message", async () => {
+      const SwitchingThread = () => {
+        const [thread, setThread] = useState({
+          id: "a",
+          messages: pagedMessages.slice(4),
+        });
+        const runtime = useExternalStoreRuntime<ThreadMessageLike>({
+          messages: thread.messages,
+          convertMessage: (message) => message,
+          onNew: async () => {},
+          adapters: {
+            threadList: {
+              threadId: thread.id,
+              threads: [
+                { id: "a", status: "regular" },
+                { id: "b", status: "regular" },
+              ],
+            },
+          },
+        });
+
+        return (
+          <AssistantRuntimeProvider runtime={runtime}>
+            <Thread scrollToBottomOnThreadSwitch={false} />
+            <button
+              type="button"
+              data-testid="switch"
+              onClick={() =>
+                setThread({ id: "b", messages: pagedMessages.slice(3) })
+              }
+            />
+          </AssistantRuntimeProvider>
+        );
+      };
+
+      render(<SwitchingThread />);
+      await waitFor(() =>
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(4),
+      );
+      act(() => {
+        getViewport().scrollTop = 100;
+        fireEvent.scroll(getViewport());
+      });
+
+      await act(async () => {
+        fireEvent.click(screen.getByTestId("switch"));
+      });
+      await waitFor(() =>
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(5),
+      );
+      act(notifyResizeObservers);
+
+      expect(getViewport().scrollTop).toBe(100);
+    });
+  });
 });

package/src/primitives/thread/useThreadViewportAutoScroll.ts

@@ -2,7 +2,7 @@
 
 import { useComposedRefs } from "radix-ui/internal";
 import { useCallback, useLayoutEffect, useRef, type RefCallback } from "react";
-import { useAuiEvent, useAuiState } from "@assistant-ui/store";
+import { useAui, useAuiEvent, useAuiState } from "@assistant-ui/store";
 import {
   isUserScrollUp,
   isViewportAtBottom,
@@ -33,6 +33,69 @@ const TEXT_ENTRY_SELECTOR = [
     ":not([type='range']):not([type='file']):not([type='color'])",
 ].join(", ");
 
+const MESSAGE_SELECTOR = "[data-message-id]";
+
+type MessageOffset = { readonly id: string; readonly offset: number };
+
+const offsetInViewport = (element: Element, viewport: Element) =>
+  element.getBoundingClientRect().top - viewport.getBoundingClientRect().top;
+
+const measureFirstMessage = (viewport: HTMLElement): MessageOffset | null => {
+  const element = viewport.querySelector<HTMLElement>(MESSAGE_SELECTOR);
+  const id = element?.dataset["messageId"];
+  return element && id
+    ? { id, offset: offsetInViewport(element, viewport) }
+    : null;
+};
+
+/** The first message that starts in view, else the one spanning its top edge. */
+const measureReaderMessage = (viewport: HTMLElement): MessageOffset | null => {
+  const { top, bottom } = viewport.getBoundingClientRect();
+  let spanning: MessageOffset | null = null;
+  for (const element of viewport.querySelectorAll<HTMLElement>(
+    MESSAGE_SELECTOR,
+  )) {
+    const rect = element.getBoundingClientRect();
+    if (rect.bottom <= top) continue;
+    if (rect.top >= bottom) break;
+    const id = element.dataset["messageId"];
+    if (!id) continue;
+    if (rect.top >= top) return { id, offset: rect.top - top };
+    spanning ??= { id, offset: rect.top - top };
+  }
+  return spanning;
+};
+
+const findMessage = (viewport: HTMLElement, id: string) => {
+  for (const element of viewport.querySelectorAll<HTMLElement>(
+    MESSAGE_SELECTOR,
+  )) {
+    if (element.dataset["messageId"] === id) return element;
+  }
+  return null;
+};
+
+/**
+ * Scrolls so the message sits at `anchor.offset` again, recording the
+ * position it scrolls to in `heldScrollTop` before the scroll event can
+ * report it; false when the message is gone.
+ */
+const keepMessageAt = (
+  viewport: HTMLElement,
+  anchor: MessageOffset,
+  heldScrollTop: { current: number },
+) => {
+  const element = findMessage(viewport, anchor.id);
+  if (!element) return false;
+  const delta = offsetInViewport(element, viewport) - anchor.offset;
+  heldScrollTop.current = viewport.scrollTop + delta;
+  if (Math.abs(delta) >= 1) {
+    viewport.scrollTo({ top: heldScrollTop.current, behavior: "instant" });
+  }
+  heldScrollTop.current = viewport.scrollTop;
+  return true;
+};
+
 export namespace useThreadViewportAutoScroll {
   export type Options = {
     /**
@@ -72,8 +135,11 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   scrollToBottomOnInitialize = true,
   scrollToBottomOnThreadSwitch = true,
 }: useThreadViewportAutoScroll.Options): RefCallback<TElement> => {
+  const aui = useAui();
   const divRef = useRef<TElement>(null);
   const hasMessages = useAuiState((s) => s.thread.messages.length > 0);
+  const firstMessageId = useAuiState((s) => s.thread.messages[0]?.id);
+  const threadId = useAuiState((s) => s.threadListItem.id);
   const isRunning = useAuiState((s) => s.thread.isRunning);
   const initializeScrollRequestedRef = useRef(false);
   const scheduledFrameRef = useRef<number | null>(null);
@@ -87,6 +153,13 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   const lastScrollHeight = useRef<number>(0);
   const lastObservedScrollHeight = useRef<number>(0);
   const lastObservedClientHeight = useRef<number>(0);
+  const firstMessageRef = useRef<MessageOffset | null>(null);
+  // The row the reader sees when earlier messages land, held until a gesture
+  // or a scroll this hook did not make, so content above it that settles
+  // afterwards (lazy layout, late media) does not move it on engines without
+  // native scroll anchoring.
+  const prependAnchorRef = useRef<MessageOffset | null>(null);
+  const heldScrollTopRef = useRef(0);
 
   // Pending bottom-scroll intent. Planted by initialize/run-start/switch/button
   // triggers, cleared when handleScroll confirms we reached bottom, or when the
@@ -110,6 +183,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
 
     followBottomRef.current = true;
     scrollingToBottomBehaviorRef.current = behavior;
+    prependAnchorRef.current = null;
     div.scrollTo({ top: div.scrollHeight, behavior });
   }, []);
 
@@ -146,6 +220,13 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
     const div = divRef.current;
     if (!div) return;
 
+    if (
+      prependAnchorRef.current &&
+      Math.abs(div.scrollTop - heldScrollTopRef.current) >= 1
+    ) {
+      prependAnchorRef.current = null;
+    }
+
     const isAtBottom = threadViewportStore.getState().isAtBottom;
     const newIsAtBottom = isViewportAtBottom(div);
 
@@ -188,6 +269,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
 
     lastScrollTop.current = div.scrollTop;
     lastScrollHeight.current = div.scrollHeight;
+    firstMessageRef.current = measureFirstMessage(div);
   };
 
   const resizeRef = useOnResizeContent(() => {
@@ -216,6 +298,11 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
       followBottomRef.current
     ) {
       scrollToBottom("instant");
+    } else if (
+      prependAnchorRef.current &&
+      !keepMessageAt(div, prependAnchorRef.current, heldScrollTopRef)
+    ) {
+      prependAnchorRef.current = null;
     }
 
     handleScroll();
@@ -242,16 +329,74 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
       if (target?.closest?.(TEXT_ENTRY_SELECTOR)) return;
       cancelPendingScrollToBottom();
     };
+    const releasePrependAnchor = () => {
+      prependAnchorRef.current = null;
+    };
+    const gestures = ["pointerdown", "wheel", "touchstart", "keydown"] as const;
     el.addEventListener("scroll", handleScroll);
     el.addEventListener("pointerdown", cancelPendingScrollToBottom);
     el.addEventListener("keydown", cancelOnKeyDown);
+    for (const gesture of gestures) {
+      el.addEventListener(gesture, releasePrependAnchor, { passive: true });
+    }
     return () => {
       el.removeEventListener("scroll", handleScroll);
       el.removeEventListener("pointerdown", cancelPendingScrollToBottom);
       el.removeEventListener("keydown", cancelOnKeyDown);
+      for (const gesture of gestures) {
+        el.removeEventListener(gesture, releasePrependAnchor);
+      }
     };
   });
 
+  // Earlier messages prepended above the reader put the old first message back
+  // where the reader saw it, so growth below it in the same commit (a
+  // streaming reply) is not mistaken for the page; where the browser already
+  // anchored the scroll, this is a no-op.
+  const previousRef = useRef({ threadId, firstMessageId });
+  useLayoutEffect(() => {
+    const previous = previousRef.current;
+    previousRef.current = { threadId, firstMessageId };
+    if (previous.threadId !== threadId) {
+      prependAnchorRef.current = null;
+      return;
+    }
+    const div = divRef.current;
+    const previousFirstMessageId = previous.firstMessageId;
+    if (
+      !div ||
+      previousFirstMessageId === undefined ||
+      previousFirstMessageId === firstMessageId ||
+      (autoScroll && followBottomRef.current) ||
+      scrollingToBottomBehaviorRef.current !== null
+    )
+      return;
+    const prepended = aui.thread
+      .getState()
+      .messages.some(
+        (message, index) => index > 0 && message.id === previousFirstMessageId,
+      );
+    if (!prepended) return;
+
+    const anchor = firstMessageRef.current;
+    if (
+      anchor?.id === previousFirstMessageId &&
+      keepMessageAt(div, anchor, heldScrollTopRef)
+    ) {
+      prependAnchorRef.current = measureReaderMessage(div) ?? anchor;
+    } else {
+      // Message roots that render no `data-message-id` leave only the total
+      // growth to go on, which counts any growth below the reader too.
+      const top =
+        div.scrollHeight - (lastScrollHeight.current - lastScrollTop.current);
+      if (Math.abs(div.scrollTop - top) >= 1) {
+        div.scrollTo({ top, behavior: "instant" });
+      }
+    }
+    lastScrollTop.current = div.scrollTop;
+    lastScrollHeight.current = div.scrollHeight;
+  }, [aui, autoScroll, firstMessageId, threadId]);
+
   useLayoutEffect(() => {
     if (!scrollToBottomOnInitialize) return;
     if (!hasMessages) {
@@ -272,6 +417,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   });
 
   useAuiEvent("thread.runStart", () => {
+    prependAnchorRef.current = null;
     if (!scrollToBottomOnRunStart) return;
     if (threadViewportStore.getState().turnAnchor === "top") return;
     scheduleScrollToBottom("auto");

package/src/primitives/thread.ts

@@ -7,7 +7,9 @@ export { ThreadPrimitiveViewportFooter as ViewportFooter } from "./thread/Thread
 export { ThreadPrimitiveMessages as Messages } from "./thread/ThreadMessages";
 export { ThreadPrimitiveMessageByIndex as MessageByIndex } from "./thread/ThreadMessages";
 export { ThreadPrimitiveUnstable_MessageById as Unstable_MessageById } from "./thread/ThreadMessages";
+export { ThreadPrimitiveRow as Row } from "./thread/ThreadMessages";
 export { ThreadPrimitiveScrollToBottom as ScrollToBottom } from "./thread/ThreadScrollToBottom";
+export { ThreadPrimitiveLoadEarlier as LoadEarlier } from "./thread/ThreadLoadEarlier";
 export { ThreadPrimitiveSuggestion as Suggestion } from "./thread/ThreadSuggestion";
 export {
   ThreadPrimitiveSuggestions as Suggestions,

package/src/sandbox-host/SandboxHost.test.tsx

@@ -416,6 +416,40 @@ describe("SandboxHost", () => {
     expect(onError).not.toHaveBeenCalled();
   });
 
+  it("cancels pending renders on replacement and unmount", async () => {
+    renderHtmlMock.mockImplementation(() => new Promise(() => {}));
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "first" }}
+          contentKey="first"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+        />,
+      );
+    });
+    const firstSignal = renderHtmlMock.mock.calls[0]![2].signal as AbortSignal;
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "second" }}
+          contentKey="second"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+        />,
+      );
+    });
+    const secondSignal = renderHtmlMock.mock.calls[1]![2].signal as AbortSignal;
+
+    expect(firstSignal.aborted).toBe(true);
+    expect(secondSignal.aborted).toBe(false);
+
+    await act(async () => {
+      root.unmount();
+    });
+    expect(secondSignal.aborted).toBe(true);
+  });
+
   it("contains failures thrown by onError", async () => {
     const renderError = new Error("render failed");
     const callbackError = new Error("error callback failed");

package/src/sandbox-host/SandboxHost.tsx

@@ -107,6 +107,7 @@ export function SandboxHost({
     let frame: RenderedFrame | null = null;
     let bridge: SandboxBridge | null = null;
     let onMessage: ((event: MessageEvent) => void) | null = null;
+    const renderController = new AbortController();
 
     const { content: liveContent, sandbox: sb } = liveRef.current;
 
@@ -129,10 +130,12 @@ export function SandboxHost({
       ...(sb?.salt !== undefined && { salt: sb.salt }),
     });
 
-    const renderOpts =
-      sb?.unsafeDocumentWrite !== undefined
-        ? { unsafeDocumentWrite: sb.unsafeDocumentWrite }
-        : undefined;
+    const renderOpts = {
+      signal: renderController.signal,
+      ...(sb?.unsafeDocumentWrite !== undefined && {
+        unsafeDocumentWrite: sb.unsafeDocumentWrite,
+      }),
+    };
 
     scf
       .renderHtml(liveContent.html, container, renderOpts)
@@ -216,6 +219,7 @@ export function SandboxHost({
       const bridgeToDispose = bridge;
       bridge = null;
       if (bridgeToDispose) runCleanup(() => bridgeToDispose.dispose());
+      runCleanup(() => renderController.abort());
       const frameToDispose = frame;
       frame = null;
       if (frameToDispose) runCleanup(() => frameToDispose.dispose());

package/src/tests/toolCallTiming.test.tsx

@@ -47,8 +47,15 @@ const ElapsedProbe: FC = () => {
 };
 
 const StallProbe: FC = () => {
-  const { stalled } = unstable_useMessageStallDetection({ thresholdMs: 2000 });
-  return <span data-testid="stalled">{String(stalled)}</span>;
+  const { stalled, stalledForMs } = unstable_useMessageStallDetection({
+    thresholdMs: 2000,
+  });
+  return (
+    <>
+      <span data-testid="stalled">{String(stalled)}</span>
+      <span data-testid="stalled-for">{stalledForMs}</span>
+    </>
+  );
 };
 
 const RuntimeProvider: FC<
@@ -224,6 +231,16 @@ describe("unstable_useMessageStallDetection", () => {
     });
 
     expect(screen.getByTestId("stalled").textContent).toBe("true");
+    const stalledFor = () =>
+      Number(screen.getByTestId("stalled-for").textContent);
+    const atStall = stalledFor();
+    expect(atStall).toBeGreaterThanOrEqual(2000);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000);
+    });
+
+    expect(stalledFor()).toBeGreaterThan(atStall);
   });
 
   it("never stalls on settled messages", async () => {