@assistant-ui/react 0.15.16 → 0.15.18

package/src/primitives/composer/trigger/matchesTriggerItemQuery.ts

@@ -0,0 +1,13 @@
+import type { Unstable_TriggerItem } from "@assistant-ui/core";
+
+export function matchesTriggerItemQuery(
+  item: Unstable_TriggerItem,
+  lowerQuery: string,
+): boolean {
+  if (!lowerQuery) return true;
+  return (
+    item.id.toLowerCase().includes(lowerQuery) ||
+    item.label.toLowerCase().includes(lowerQuery) ||
+    (item.description?.toLowerCase().includes(lowerQuery) ?? false)
+  );
+}

package/src/primitives/composer/trigger/triggerDetectionResource.ts

@@ -1,12 +1,13 @@
 import { useMemo, useState } from "react";
 import { resource } from "@assistant-ui/tap";
-import { detectTrigger } from "./detectTrigger";
+import {
+  detectTrigger,
+  type TriggerMatch,
+  type TriggerMatcher,
+} from "./detectTrigger";
 
 /** Detected trigger position within the composer text. */
-export type DetectedTrigger = {
-  readonly offset: number;
-  readonly query: string;
-};
+export type DetectedTrigger = TriggerMatch;
 
 export type TriggerDetectionResourceOutput = {
   /** Detected trigger (or `null` when inactive). */
@@ -21,16 +22,18 @@ export type TriggerDetectionResourceOutput = {
 const useTriggerDetectionResource = ({
   text,
   triggerChar,
+  matcher,
 }: {
   text: string;
   triggerChar: string;
+  matcher?: TriggerMatcher | undefined;
 }): TriggerDetectionResourceOutput => {
   const [cursorPosition, setCursorPosition] = useState(text.length);
 
   const trigger = useMemo(() => {
     const pos = Math.min(cursorPosition, text.length);
-    return detectTrigger(text, triggerChar, pos);
-  }, [cursorPosition, text, triggerChar]);
+    return detectTrigger(text, triggerChar, pos, matcher);
+  }, [cursorPosition, matcher, text, triggerChar]);
 
   const query = trigger?.query ?? "";
 

package/src/primitives/composer/trigger/triggerNavigationResource.ts

@@ -5,14 +5,7 @@ import type {
   Unstable_TriggerCategory,
   Unstable_TriggerItem,
 } from "@assistant-ui/core";
-
-function matchesQuery(item: Unstable_TriggerItem, lower: string): boolean {
-  return (
-    item.id.toLowerCase().includes(lower) ||
-    item.label.toLowerCase().includes(lower) ||
-    (item.description?.toLowerCase().includes(lower) ?? false)
-  );
-}
+import { matchesTriggerItemQuery } from "./matchesTriggerItemQuery";
 
 export type TriggerNavigationResourceOutput = {
   /** Filtered categories visible in the list (empty in search mode). */
@@ -76,7 +69,7 @@ const useTriggerNavigationResource = ({
     const lower = query.toLowerCase();
     for (const cat of categories) {
       for (const item of adapter.categoryItems(cat.id)) {
-        if (matchesQuery(item, lower)) {
+        if (matchesTriggerItemQuery(item, lower)) {
           all.push(item);
         }
       }
@@ -97,7 +90,7 @@ const useTriggerNavigationResource = ({
     if (isSearchMode) return searchResults ?? [];
     if (!query) return allItems;
     const lower = query.toLowerCase();
-    return allItems.filter((item) => matchesQuery(item, lower));
+    return allItems.filter((item) => matchesTriggerItemQuery(item, lower));
   }, [allItems, query, isSearchMode, searchResults]);
 
   const navigableList = useMemo(() => {

package/src/primitives/composer/trigger/triggerSelectionResource.test.ts

@@ -45,7 +45,7 @@ const render = ({
 }: {
   behavior: TriggerBehavior;
   text: string;
-  trigger: { offset: number; query: string };
+  trigger: { offset: number; query: string; endOffset: number };
 }) => {
   const textRef = { value: text };
   const { aui, setText } = makeAui(textRef);
@@ -72,7 +72,7 @@ describe("TriggerSelectionResource", () => {
     const { root, setText, setCursorPosition, onSelected } = render({
       behavior: { kind: "directive", formatter },
       text: "@file tail",
-      trigger: { offset: 0, query: "file" },
+      trigger: { offset: 0, query: "file", endOffset: 5 },
     });
 
     root.getValue().selectItem(item);
@@ -91,7 +91,7 @@ describe("TriggerSelectionResource", () => {
         removeOnExecute: true,
       },
       text: "before @file tail",
-      trigger: { offset: 7, query: "file" },
+      trigger: { offset: 7, query: "file", endOffset: 12 },
     });
 
     root.getValue().selectItem(item);
@@ -132,4 +132,16 @@ describe("TriggerSelectionResource", () => {
     expect(setText).toHaveBeenCalledWith("@file.txt ");
     expect(textRef.value).toBe("@file.txt ");
   });
+
+  it("replaces the matcher endOffset even when query is shorter", () => {
+    const { root, setText } = render({
+      behavior: { kind: "directive", formatter },
+      text: "hello @Example UK tail",
+      trigger: { offset: 6, query: "example", endOffset: 17 },
+    });
+
+    root.getValue().selectItem(item);
+
+    expect(setText).toHaveBeenCalledWith("hello @file.txt tail");
+  });
 });

package/src/primitives/composer/trigger/triggerSelectionResource.ts

@@ -37,7 +37,6 @@ const useTriggerSelectionResource = ({
   behavior,
   trigger,
   aui,
-  triggerChar,
   setCursorPosition,
   onSelected,
 }: {
@@ -74,9 +73,7 @@ const useTriggerSelectionResource = ({
 
     const currentText = aui.composer.getState().text;
     const before = currentText.slice(0, trigger.offset);
-    const after = currentText.slice(
-      trigger.offset + triggerChar.length + trigger.query.length,
-    );
+    const after = currentText.slice(trigger.endOffset);
 
     const insertDirective = () => {
       const directive = behavior.formatter.serialize(item);

package/src/primitives/composer.ts

@@ -29,3 +29,4 @@ export { useTriggerPopoverScopeContextOptional as unstable_useTriggerPopoverScop
 export { useTriggerPopoverTriggers as unstable_useTriggerPopoverTriggers } from "./composer/trigger";
 export { useTriggerPopoverTriggersOptional as unstable_useTriggerPopoverTriggersOptional } from "./composer/trigger";
 export type { RegisteredTrigger as Unstable_RegisteredTrigger } from "./composer/trigger";
+export type { TriggerMatcher as Unstable_TriggerMatcher } from "./composer/trigger";

package/src/primitives/message/MessageRoot.tsx

@@ -10,7 +10,7 @@ import {
 } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import {
   useThreadViewport,
   useThreadViewportStore,

package/src/primitives/selectionToolbar/SelectionToolbarQuote.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import {
   type ComponentPropsWithoutRef,
   type ComponentRef,

package/src/primitives/selectionToolbar/SelectionToolbarRoot.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import {
   type ComponentPropsWithoutRef,
   type ComponentRef,

package/src/primitives/thread/ThreadViewport.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,

package/src/primitives/thread/ThreadViewportFooter.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,

package/src/primitives/thread/useThreadViewportAutoScroll.ts

@@ -1,9 +1,13 @@
 "use client";
 
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import { useCallback, useLayoutEffect, useRef, type RefCallback } from "react";
 import { useAuiEvent, useAuiState } from "@assistant-ui/store";
-import { isUserScrollUp } from "@assistant-ui/store/client";
+import {
+  isUserScrollUp,
+  isViewportAtBottom,
+  viewportOverflows,
+} from "@assistant-ui/store/client";
 import { useOnResizeContent } from "../../utils/hooks/useOnResizeContent";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
@@ -114,9 +118,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
     if (!div) return;
 
     const isAtBottom = threadViewportStore.getState().isAtBottom;
-    const newIsAtBottom =
-      Math.abs(div.scrollHeight - div.scrollTop - div.clientHeight) <= 1 ||
-      div.scrollHeight <= div.clientHeight;
+    const newIsAtBottom = isViewportAtBottom(div);
 
     const isInFlightDownwardScroll =
       !newIsAtBottom && lastScrollTop.current < div.scrollTop;
@@ -135,8 +137,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
       if (newIsAtBottom) {
         // newIsAtBottom is ambiguous when the viewport doesn't overflow —
         // keep intent alive until content can actually scroll
-        const viewportOverflows = div.scrollHeight > div.clientHeight + 1;
-        if (viewportOverflows) {
+        if (viewportOverflows(div)) {
           scrollingToBottomBehaviorRef.current = null;
         }
         if (autoScroll) followBottomRef.current = true;

package/src/primitives/threadList/ThreadListNew.tsx

@@ -6,7 +6,7 @@ import type {
 } from "../../utils/createActionButton";
 import { forwardRef } from "react";
 import { Primitive } from "../../utils/Primitive";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import { useAuiState } from "@assistant-ui/store";
 import { useThreadListNew as useThreadListNewBehavior } from "@assistant-ui/core/react";
 

package/src/primitives/threadListFocusGroup.ts

@@ -1,10 +1,10 @@
 "use client";
 
-import { createCollection } from "@radix-ui/react-collection";
+import { Collection } from "radix-ui/internal";
 import { createContext, useContext, type RefObject } from "react";
 
 const [collection, useThreadListCollection] =
-  createCollection<HTMLButtonElement>("ThreadList");
+  Collection.createCollection<HTMLButtonElement>("ThreadList");
 
 export const ThreadListCollection = collection;
 export { useThreadListCollection };

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -10,7 +10,7 @@ import {
   useRef,
 } from "react";
 import { useAuiState } from "@assistant-ui/store";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import { Direction } from "radix-ui";
 import {
   ThreadListItemFocusProvider,

package/src/primitives/threadListItem/ThreadListItemTrigger.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { forwardRef } from "react";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import {
   type ActionButtonElement,
   type ActionButtonProps,

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.tsx

@@ -6,7 +6,7 @@ import {
   forwardRef,
 } from "react";
 import { Direction, DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import type { WithRenderPropProps } from "../../utils/Primitive";
 import { DropdownMenuRenderContent } from "../dropdownMenuRenderPrimitives";
 import { useThreadListItemFocus } from "../threadListFocusGroup";

package/src/primitives/threadListItemMore/ThreadListItemMoreRoot.tsx

@@ -8,7 +8,7 @@ import {
   useContext,
 } from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "radix-ui/internal";
 import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 const ThreadListItemMoreSetOpenContext = createContext<

package/src/primitives/threadListItemMore/ThreadListItemMoreTrigger.tsx

@@ -5,8 +5,8 @@ import {
   Direction,
   type DropdownMenu as DropdownMenuPrimitive,
 } from "radix-ui";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { useComposedRefs } from "radix-ui/internal";
+import { composeEventHandlers } from "radix-ui/internal";
 import type { WithRenderPropProps } from "../../utils/Primitive";
 import { DropdownMenuRenderTrigger } from "../dropdownMenuRenderPrimitives";
 import { useThreadListItemFocus } from "../threadListFocusGroup";

package/src/primitives/threadListItemMore/scope.ts

@@ -1,8 +1,8 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import type { Scope } from "@radix-ui/react-context";
+import type { Context } from "radix-ui/internal";
 
 export const useDropdownMenuScope: ReturnType<
   typeof DropdownMenuPrimitive.createDropdownMenuScope
 > = DropdownMenuPrimitive.createDropdownMenuScope();
 
-export type ScopedProps<P> = P & { __scopeThreadListItemMore?: Scope };
+export type ScopedProps<P> = P & { __scopeThreadListItemMore?: Context.Scope };

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

@@ -1,11 +1,12 @@
 // @vitest-environment jsdom
-import { act } from "react";
+import { act, startTransition, Suspense } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const { renderHtmlMock } = vi.hoisted(() => ({ renderHtmlMock: vi.fn() }));
 
-vi.mock("safe-content-frame", () => ({
+vi.mock("safe-content-frame", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("safe-content-frame")>()),
   SafeContentFrame: class {
     renderHtml = renderHtmlMock;
   },
@@ -34,7 +35,7 @@ function fakeRendered() {
     origin: "https://fake.scf.test",
     sendMessage: vi.fn(),
     dispose: vi.fn(),
-    fullyLoadedPromiseWithTimeout: vi.fn(),
+    fullyLoadedPromiseWithTimeout: vi.fn(() => new Promise<void>(() => {})),
   };
 }
 
@@ -140,6 +141,123 @@ describe("SandboxHost", () => {
     expect(onMessage).toHaveBeenCalledTimes(1);
   });
 
+  it("reports a frame that never finishes loading through onError", async () => {
+    const rendered = fakeRendered();
+    rendered.fullyLoadedPromiseWithTimeout.mockImplementation(() =>
+      Promise.reject(
+        Object.assign(new Error("Failed to load shim: https://fake.scf.test"), {
+          code: "shim-unavailable",
+        }),
+      ),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(onError.mock.calls[0]![0]).toBeInstanceOf(Error);
+    expect(onError.mock.calls[0]![0]).toMatchObject({
+      code: "shim-unavailable",
+      message: "Failed to load shim: https://fake.scf.test",
+    });
+    expect(rendered.dispose).not.toHaveBeenCalled();
+  });
+
+  it("stays silent when the shim started and the render is merely slow", async () => {
+    const rendered = fakeRendered();
+    rendered.fullyLoadedPromiseWithTimeout.mockImplementation(() =>
+      Promise.reject(
+        Object.assign(new Error("Timeout"), { code: "render-timeout" }),
+      ),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(rendered.fullyLoadedPromiseWithTimeout).toHaveBeenCalled();
+    expect(onError).not.toHaveBeenCalled();
+    expect(rendered.dispose).not.toHaveBeenCalled();
+  });
+
+  it("reports a load failure that carries no shim code", async () => {
+    const rendered = fakeRendered();
+    rendered.fullyLoadedPromiseWithTimeout.mockImplementation(() =>
+      Promise.reject(new Error("Failed to load iframe")),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(onError.mock.calls[0]![0].message).toBe("Failed to load iframe");
+  });
+
+  it("does not report a load failure after unmount", async () => {
+    const rendered = fakeRendered();
+    let rejectLoad: (error: Error) => void;
+    rendered.fullyLoadedPromiseWithTimeout.mockReturnValue(
+      new Promise<void>((_, reject) => {
+        rejectLoad = reject;
+      }),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    await act(async () => {
+      root.unmount();
+    });
+    rejectLoad!(new Error("Timeout"));
+    await flush();
+
+    expect(rendered.fullyLoadedPromiseWithTimeout).toHaveBeenCalled();
+    expect(onError).not.toHaveBeenCalled();
+  });
+
   it("clamps the bridge-reported height to maxHeight and ignores invalid values", async () => {
     const rendered = fakeRendered();
     renderHtmlMock.mockResolvedValue(rendered);
@@ -318,4 +436,48 @@ describe("SandboxHost", () => {
     });
     expect(rendered.dispose).toHaveBeenCalledTimes(1);
   });
+
+  it("keeps bridge options scoped to committed renders", async () => {
+    let resolveRender!: (frame: ReturnType<typeof fakeRendered>) => void;
+    renderHtmlMock.mockReturnValue(
+      new Promise((resolve) => {
+        resolveRender = resolve;
+      }),
+    );
+    const rendered = fakeRendered();
+    const bridge = { onMessage: vi.fn(), dispose: vi.fn() };
+    const createBridgeA = vi.fn(() => bridge);
+    const createBridgeB = vi.fn(() => bridge);
+    const interruptedRender = vi.fn();
+    const pending = new Promise<never>(() => {});
+    const Block = () => {
+      interruptedRender();
+      throw pending;
+    };
+    const view = (createBridge: typeof createBridgeA, blocked: boolean) => (
+      <Suspense fallback={null}>
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={createBridge}
+        />
+        {blocked ? <Block /> : null}
+      </Suspense>
+    );
+
+    await act(async () => {
+      root.render(view(createBridgeA, false));
+    });
+    act(() => {
+      startTransition(() => root.render(view(createBridgeB, true)));
+    });
+    await vi.waitFor(() => expect(interruptedRender).toHaveBeenCalled());
+    await act(async () => {
+      resolveRender(rendered);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(createBridgeA).toHaveBeenCalledTimes(1);
+    expect(createBridgeB).not.toHaveBeenCalled();
+  });
 });

package/src/sandbox-host/SandboxHost.tsx

@@ -1,15 +1,23 @@
 "use client";
 
-import { type CSSProperties, useEffect, useRef, useState } from "react";
 import {
+  type CSSProperties,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  isShimLoadError,
   type RenderedFrame,
   SafeContentFrame,
   type SandboxOption,
 } from "safe-content-frame";
-import { invokeCallbackSafely } from "../utils/invokeCallbackSafely";
+import { invokeUserCallback } from "@assistant-ui/core/internal";
 
 const DEFAULT_PRODUCT = "assistant-ui-sandbox";
 const DEFAULT_MAX_HEIGHT = 800;
+const LOAD_TIMEOUT_MS = 10_000;
 
 export type SandboxHostConfig = {
   sandbox?: SandboxOption[];
@@ -81,8 +89,15 @@ export function SandboxHost({
     undefined,
   );
 
-  const liveRef = useRef<LiveSnapshot>(null!);
-  liveRef.current = { content, sandbox, createBridge, onError };
+  const liveRef = useRef<LiveSnapshot>({
+    content,
+    sandbox,
+    createBridge,
+    onError,
+  });
+  useLayoutEffect(() => {
+    liveRef.current = { content, sandbox, createBridge, onError };
+  }, [content, sandbox, createBridge, onError]);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -95,6 +110,16 @@ export function SandboxHost({
 
     const { content: liveContent, sandbox: sb } = liveRef.current;
 
+    const reportError = (err: unknown) => {
+      const error = err instanceof Error ? err : new Error(String(err));
+      invokeUserCallback(
+        "assistant-ui",
+        "SandboxHost onError",
+        liveRef.current.onError?.bind(liveRef.current),
+        error,
+      );
+    };
+
     const scf = new SafeContentFrame(sb?.product ?? DEFAULT_PRODUCT, {
       ...(sb?.sandbox !== undefined && { sandbox: sb.sandbox }),
       ...(sb?.useShadowDom !== undefined && { useShadowDom: sb.useShadowDom }),
@@ -146,16 +171,24 @@ export function SandboxHost({
           bridge?.onMessage(event);
         };
         window.addEventListener("message", onMessage);
+
+        // renderHtml resolves at iframe load, which a shim that was never
+        // served also reaches, so a completed render is only known once the
+        // frame says so. render-timeout is excluded because the shim is
+        // running and the guest may still paint, and reporting it would leave
+        // a host that renders an error state showing one over a frame that
+        // recovers.
+        rendered.fullyLoadedPromiseWithTimeout(LOAD_TIMEOUT_MS).catch((err) => {
+          if (cancelled) return;
+          if (isShimLoadError(err) && err.code === "render-timeout") return;
+          reportError(err);
+        });
       })
       .catch((err) => {
         if (cancelled) return;
         frame?.dispose();
         frame = null;
-        const error = err instanceof Error ? err : new Error(String(err));
-        invokeCallbackSafely(
-          () => liveRef.current.onError?.(error),
-          "SandboxHost onError",
-        );
+        reportError(err);
       });
 
     return () => {

package/src/tests/RemoteThreadListRuntime.adapterProvider.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
 import { act, render, waitFor } from "@testing-library/react";
-import type { FC, PropsWithChildren } from "react";
+import { useState, type FC, type PropsWithChildren } from "react";
 import { describe, expect, it } from "vitest";
 import {
   RuntimeAdapterProvider,
@@ -107,6 +107,36 @@ describe("RemoteThreadListAdapter.unstable_Provider", () => {
     expect(capture.adapters?.history).toBe(dummyHistory);
   });
 
+  it("picks up a post-mount useAdapters bag", async () => {
+    const capture: { adapters: CapturedAdapters } = { adapters: null };
+    const firstHistory: ThreadHistoryAdapter = {
+      load: async () => ({ messages: [] }),
+      append: async () => {},
+    };
+    const secondHistory: ThreadHistoryAdapter = {
+      load: async () => ({ messages: [] }),
+      append: async () => {},
+    };
+
+    let bump: (() => void) | undefined;
+    const adapter = makeAdapter({
+      unstable_useAdapters: function useTestAdapters() {
+        const [swapped, setSwapped] = useState(false);
+        bump = () => setSwapped(true);
+        return { history: swapped ? secondHistory : firstHistory };
+      },
+    });
+
+    await renderAndWaitForBinder(adapter, capture);
+    expect(capture.adapters?.history).toBe(firstHistory);
+
+    await act(async () => {
+      bump!();
+    });
+
+    expect(capture.adapters?.history).toBe(secondHistory);
+  });
+
   it("picks up a swapped Provider on re-render", async () => {
     const capture: { adapters: CapturedAdapters } = { adapters: null };
     const firstHistory: ThreadHistoryAdapter = {