@assistant-ui/react 0.15.22 → 0.15.24

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

@@ -94,6 +94,7 @@ const dispatchEscape = (target: EventTarget) => {
     key: "Escape",
     bubbles: true,
     cancelable: true,
+    composed: true,
   });
   act(() => target.dispatchEvent(event));
   return event;
@@ -143,6 +144,135 @@ describe("ThreadPrimitiveRoot", () => {
     expect(event.defaultPrevented).toBe(false);
   });
 
+  it("does not stop speech in another mounted thread", async () => {
+    const firstSpeech = createSpeechAdapter();
+    const secondSpeech = createSpeechAdapter();
+    const firstRuntimeRef: RuntimeRef = { current: null };
+    const secondRuntimeRef: RuntimeRef = { current: null };
+    render(
+      <>
+        <RuntimeProvider
+          runtimeRef={firstRuntimeRef}
+          speech={firstSpeech.adapter}
+        >
+          <ThreadPrimitiveRoot>
+            <button data-testid="first-thread-control" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>
+        <RuntimeProvider
+          runtimeRef={secondRuntimeRef}
+          speech={secondSpeech.adapter}
+        >
+          <ThreadPrimitiveRoot>
+            <button data-testid="second-thread-control" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>
+      </>,
+    );
+    startSpeaking(firstRuntimeRef);
+    await waitFor(() => {
+      expect(firstRuntimeRef.current!.thread.getState().speech).toBeDefined();
+    });
+
+    const event = dispatchEscape(screen.getByTestId("second-thread-control"));
+
+    expect(firstSpeech.cancel).not.toHaveBeenCalled();
+    expect(secondSpeech.cancel).not.toHaveBeenCalled();
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it("stops speech in the thread containing the Escape target", async () => {
+    const firstSpeech = createSpeechAdapter();
+    const secondSpeech = createSpeechAdapter();
+    const firstRuntimeRef: RuntimeRef = { current: null };
+    const secondRuntimeRef: RuntimeRef = { current: null };
+    render(
+      <>
+        <RuntimeProvider
+          runtimeRef={firstRuntimeRef}
+          speech={firstSpeech.adapter}
+        >
+          <ThreadPrimitiveRoot>
+            <button data-testid="first-thread-control" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>
+        <RuntimeProvider
+          runtimeRef={secondRuntimeRef}
+          speech={secondSpeech.adapter}
+        >
+          <ThreadPrimitiveRoot>
+            <button data-testid="second-thread-control" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>
+      </>,
+    );
+    startSpeaking(firstRuntimeRef);
+    startSpeaking(secondRuntimeRef);
+    await waitFor(() => {
+      expect(firstRuntimeRef.current!.thread.getState().speech).toBeDefined();
+      expect(secondRuntimeRef.current!.thread.getState().speech).toBeDefined();
+    });
+
+    const event = dispatchEscape(screen.getByTestId("second-thread-control"));
+
+    expect(firstSpeech.cancel).not.toHaveBeenCalled();
+    expect(secondSpeech.cancel).toHaveBeenCalledOnce();
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("stops speech in a thread mounted inside a closed shadow root", async () => {
+    const firstSpeech = createSpeechAdapter();
+    const secondSpeech = createSpeechAdapter();
+    const firstRuntimeRef: RuntimeRef = { current: null };
+    const secondRuntimeRef: RuntimeRef = { current: null };
+    render(
+      <RuntimeProvider
+        runtimeRef={firstRuntimeRef}
+        speech={firstSpeech.adapter}
+      >
+        <ThreadPrimitiveRoot />
+      </RuntimeProvider>,
+    );
+    const shadowHost = document.createElement("div");
+    const shadowRoot = shadowHost.attachShadow({ mode: "closed" });
+    const shadowContainer = document.createElement("div");
+    shadowRoot.append(shadowContainer);
+    document.body.append(shadowHost);
+    const shadowView = render(
+      <RuntimeProvider
+        runtimeRef={secondRuntimeRef}
+        speech={secondSpeech.adapter}
+      >
+        <ThreadPrimitiveRoot>
+          <button data-testid="shadow-thread-control" />
+        </ThreadPrimitiveRoot>
+      </RuntimeProvider>,
+      { container: shadowContainer },
+    );
+
+    try {
+      startSpeaking(firstRuntimeRef);
+      startSpeaking(secondRuntimeRef);
+      await waitFor(() => {
+        expect(firstRuntimeRef.current!.thread.getState().speech).toBeDefined();
+        expect(
+          secondRuntimeRef.current!.thread.getState().speech,
+        ).toBeDefined();
+      });
+
+      const event = dispatchEscape(
+        shadowContainer.querySelector("[data-testid=shadow-thread-control]")!,
+      );
+
+      expect(firstSpeech.cancel).not.toHaveBeenCalled();
+      expect(secondSpeech.cancel).toHaveBeenCalledOnce();
+      expect(event.defaultPrevented).toBe(true);
+    } finally {
+      shadowView.unmount();
+      shadowHost.remove();
+    }
+  });
+
   it("stops speech from outside the only mounted thread", async () => {
     const speech = createSpeechAdapter();
     const runtimeRef: RuntimeRef = { current: null };
@@ -227,6 +357,39 @@ describe("ThreadPrimitiveRoot", () => {
     expect(event.defaultPrevented).toBe(true);
   });
 
+  it.each([
+    ["during the composition", { isComposing: true }],
+    ["after compositionend (Safari)", { keyCode: 229 }],
+  ])(
+    "keeps speech playing when Escape ends an IME composition %s",
+    async (_, init) => {
+      const speech = createSpeechAdapter();
+      const runtimeRef: RuntimeRef = { current: null };
+      render(
+        <RuntimeProvider runtimeRef={runtimeRef} speech={speech.adapter}>
+          <ThreadPrimitiveRoot>
+            <ComposerPrimitiveInput data-testid="composer" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>,
+      );
+      startSpeaking(runtimeRef);
+      await waitFor(() => {
+        expect(runtimeRef.current!.thread.getState().speech).toBeDefined();
+      });
+
+      const event = new KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+        cancelable: true,
+        ...init,
+      });
+      act(() => screen.getByTestId("composer").dispatchEvent(event));
+
+      expect(speech.cancel).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    },
+  );
+
   it("lets an idle composer fall through so Escape still stops speech", async () => {
     const speech = createSpeechAdapter();
     const runtimeRef: RuntimeRef = { current: null };

package/src/primitives/thread/ThreadRoot.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
+import { isCompositionKey } from "../../utils/isCompositionKey";
 import {
   type ComponentRef,
   forwardRef,
   type ComponentPropsWithoutRef,
+  type KeyboardEventHandler,
   useEffect,
   useRef,
 } from "react";
@@ -12,6 +14,8 @@ import { useAui } from "@assistant-ui/store";
 import { useComposedRefs } from "radix-ui/internal";
 import { ThreadRootElementContext } from "./ThreadRootElementContext";
 
+const escapeEventThreadRoots = new WeakMap<KeyboardEvent, Element>();
+
 export namespace ThreadPrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.div>;
   /**
@@ -27,8 +31,9 @@ export namespace ThreadPrimitiveRoot {
  * This component serves as the foundational wrapper for all thread-related components.
  * It provides the basic structure and context needed for thread functionality.
  *
- * While this component is mounted, an unhandled Escape keydown stops active speech, even if
- * the action bar that started it is no longer mounted.
+ * While this component is mounted, an unhandled Escape keydown inside this thread stops its
+ * active speech, even if the action bar that started it is no longer mounted. Escape outside
+ * every thread retains the document-level fallback.
  *
  * @example
  * ```tsx
@@ -48,11 +53,31 @@ export const ThreadPrimitiveRoot = forwardRef<
   const aui = useAui();
   const rootRef = useRef<ThreadPrimitiveRoot.Element>(null);
   const composedRef = useComposedRefs(ref, rootRef);
+  const handleRootKeyDown: KeyboardEventHandler<ThreadPrimitiveRoot.Element> = (
+    event,
+  ) => {
+    if (event.key === "Escape" && rootRef.current) {
+      escapeEventThreadRoots.set(event.nativeEvent, rootRef.current);
+    }
+    props.onKeyDown?.(event);
+  };
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Escape") return;
+      // An Escape that ends an IME composition belongs to the input method.
+      if (isCompositionKey(event)) return;
       if (event.defaultPrevented || aui.thread.source === null) return;
+      const eventThreadRoot =
+        escapeEventThreadRoots.get(event) ??
+        event
+          .composedPath()
+          .find(
+            (target) =>
+              target instanceof Element &&
+              target.hasAttribute("data-aui-thread-root"),
+          );
+      if (eventThreadRoot && eventThreadRoot !== rootRef.current) return;
       if (aui.thread.getState().speech == null) return;
       event.preventDefault();
       try {
@@ -77,7 +102,12 @@ export const ThreadPrimitiveRoot = forwardRef<
 
   return (
     <ThreadRootElementContext.Provider value={rootRef}>
-      <Primitive.div {...props} ref={composedRef} />
+      <Primitive.div
+        {...props}
+        data-aui-thread-root=""
+        ref={composedRef}
+        onKeyDown={handleRootKeyDown}
+      />
     </ThreadRootElementContext.Provider>
   );
 });

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -40,6 +40,8 @@ export const ThreadListItemPrimitiveRoot = forwardRef<
   const direction = Direction.useDirection();
 
   const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+      return;
     const forwardKey = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
     const backKey = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
     const trigger = triggerRef.current;

package/src/primitives/threadListItem/ThreadListKeyboardNav.test.tsx

@@ -60,6 +60,36 @@ const menu = (): HTMLElement | null =>
   document.querySelector<HTMLElement>('[role="menu"]');
 
 describe("thread list keyboard navigation", () => {
+  it.each(["altKey", "ctrlKey", "metaKey", "shiftKey"])(
+    "leaves arrows modified with %s available to ancestor shortcuts",
+    (modifier) => {
+      const prevented: boolean[] = [];
+      const { container } = render(
+        <div onKeyDown={(event) => prevented.push(event.defaultPrevented)}>
+          <ThreadListPrimitiveRoot>
+            {[0, 1].map((i) => (
+              <ThreadListItemPrimitiveRoot key={i}>
+                <ThreadListItemPrimitiveTrigger>
+                  item {i}
+                </ThreadListItemPrimitiveTrigger>
+              </ThreadListItemPrimitiveRoot>
+            ))}
+          </ThreadListPrimitiveRoot>
+        </div>,
+      );
+      const [first, second] = triggers(container);
+
+      first!.focus();
+      fireEvent.keyDown(first!, { key: "ArrowDown", [modifier]: true });
+      expect(document.activeElement).toBe(first);
+
+      second!.focus();
+      fireEvent.keyDown(second!, { key: "ArrowUp", [modifier]: true });
+      expect(document.activeElement).toBe(second);
+      expect(prevented).toEqual([false, false]);
+    },
+  );
+
   it("moves focus between items with the up/down arrows", () => {
     const { container } = render(
       <ThreadListPrimitiveRoot>
@@ -102,6 +132,41 @@ describe("thread list keyboard navigation", () => {
     expect(menu()).not.toBeNull();
   });
 
+  it.each(["altKey", "ctrlKey", "metaKey", "shiftKey"])(
+    "leaves the More menu closed on ArrowRight modified with %s",
+    (modifier) => {
+      const { more } = renderItem();
+
+      more.focus();
+      const unhandled = fireEvent.keyDown(more, {
+        key: "ArrowRight",
+        [modifier]: true,
+      });
+
+      expect(menu()).toBeNull();
+      expect(document.activeElement).toBe(more);
+      expect(unhandled).toBe(true);
+    },
+  );
+
+  it.each(["altKey", "ctrlKey", "metaKey", "shiftKey"])(
+    "leaves the More menu open on ArrowLeft modified with %s",
+    (modifier) => {
+      renderItem({ defaultOpen: true });
+      const content = menu()!;
+
+      content.focus();
+      const unhandled = fireEvent.keyDown(content, {
+        key: "ArrowLeft",
+        [modifier]: true,
+      });
+
+      expect(menu()).toBe(content);
+      expect(document.activeElement).toBe(content);
+      expect(unhandled).toBe(true);
+    },
+  );
+
   it.each(["ArrowLeft", "Escape"])(
     "closes the menu on %s and returns focus to the More button",
     (key) => {

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.tsx

@@ -54,6 +54,13 @@ export const ThreadListItemMorePrimitiveContent = forwardRef<
           {...props}
           onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
             if (!sharedFocusGroup || event.key !== closeKey) return;
+            if (
+              event.altKey ||
+              event.ctrlKey ||
+              event.metaKey ||
+              event.shiftKey
+            )
+              return;
             event.preventDefault();
             setOpen(false);
             focus?.moreRef.current?.focus();

package/src/primitives/threadListItemMore/ThreadListItemMoreTrigger.tsx

@@ -46,6 +46,8 @@ export const ThreadListItemMorePrimitiveTrigger = forwardRef<
         {...rest}
         onKeyDown={composeEventHandlers(rest.onKeyDown, (event) => {
           if (!sharedFocusGroup || event.key !== openKey) return;
+          if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
           event.preventDefault();
           setOpen(true);
         })}

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

@@ -5,7 +5,10 @@ import { type FC, useEffect } from "react";
 import { describe, expect, it } from "vitest";
 import type { AssistantRuntime } from "@assistant-ui/core";
 import { useRemoteThreadListRuntime } from "@assistant-ui/core/react";
-import { makeAdapter } from "./remote-thread-list-test-helpers";
+import {
+  makeAdapter,
+  settleOutsideAct,
+} from "./remote-thread-list-test-helpers";
 import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
 import { AssistantRuntimeProvider } from "../context";
 import type { ChatModelAdapter } from "../index";
@@ -74,15 +77,11 @@ describe("threads.reloadMainThread", () => {
     const capture = await renderThreadList(mounts);
     const runtime = capture.runtime!;
 
-    await act(async () => {
-      await runtime.threads.switchToThread("t-1");
-    });
+    await settleOutsideAct(() => runtime.threads.switchToThread("t-1"));
     const beforeReload = await settle(mounts);
     expect(beforeReload).toBeGreaterThan(0);
 
-    await act(async () => {
-      await runtime.threads.reloadMainThread();
-    });
+    await settleOutsideAct(() => runtime.threads.reloadMainThread());
 
     await waitFor(() => expect(mounts.count).toBeGreaterThan(beforeReload));
   });
@@ -92,18 +91,14 @@ describe("threads.reloadMainThread", () => {
     const capture = await renderThreadList(mounts);
     const runtime = capture.runtime!;
 
-    await act(async () => {
-      await runtime.threads.switchToThread("t-1");
-    });
+    await settleOutsideAct(() => runtime.threads.switchToThread("t-1"));
 
     const seen: boolean[] = [];
     const unsubscribe = runtime.threads.subscribe(() => {
       seen.push(runtime.threads.getState().mainThreadId === "t-1");
     });
 
-    await act(async () => {
-      await runtime.threads.reloadMainThread();
-    });
+    await settleOutsideAct(() => runtime.threads.reloadMainThread());
     unsubscribe();
 
     expect(seen.length).toBeGreaterThan(0);

package/src/tests/remote-thread-list-test-helpers.ts

@@ -1,3 +1,4 @@
+import { act, waitFor } from "@testing-library/react";
 import { vi } from "vitest";
 import type { RemoteThreadListAdapter } from "../index";
 
@@ -31,3 +32,17 @@ export function makeAdapter(
     ...overrides,
   };
 }
+
+// React 18's act holds renders until its callback settles, so a task that waits on a render starts inside act and settles outside it, where React can commit what the task waits on.
+export async function settleOutsideAct<T>(task: () => Promise<T>): Promise<T> {
+  let pending!: Promise<T>;
+  await act(async () => {
+    pending = task();
+    pending.catch(() => {});
+  });
+  await waitFor(() => pending.then(settled, settled));
+  await act(async () => {});
+  return pending;
+}
+
+const settled = () => {};

package/src/tests/threadListItemIsRunning.test.tsx

@@ -5,7 +5,10 @@ import { type FC, useEffect, useReducer } from "react";
 import { describe, expect, it } from "vitest";
 import type { ThreadMessage } from "@assistant-ui/core";
 import { useRemoteThreadListRuntime } from "@assistant-ui/core/react";
-import { makeAdapter } from "./remote-thread-list-test-helpers";
+import {
+  makeAdapter,
+  settleOutsideAct,
+} from "./remote-thread-list-test-helpers";
 import { AssistantRuntimeProvider } from "../context";
 import * as ThreadListPrimitive from "../primitives/threadList";
 import {
@@ -172,9 +175,9 @@ describe("threadListItem.isRunning", () => {
     });
     await waitFor(() => expect(screen.getByTestId("item-t-1")).toBeTruthy());
 
-    await act(async () => {
-      await capture.runtime!.threads.switchToThread("t-1");
-    });
+    await settleOutsideAct(() =>
+      capture.runtime!.threads.switchToThread("t-1"),
+    );
     await act(async () => {
       setRunning("t-1", true);
     });
@@ -182,9 +185,9 @@ describe("threadListItem.isRunning", () => {
       expect(screen.getByTestId("item-t-1").textContent).toBe("running"),
     );
 
-    await act(async () => {
-      await capture.runtime!.threads.switchToThread("t-2");
-    });
+    await settleOutsideAct(() =>
+      capture.runtime!.threads.switchToThread("t-2"),
+    );
 
     expect(screen.getByTestId("item-t-1").textContent).toBe("running");
     expect(screen.getByTestId("item-t-2").textContent).toBe("idle");

package/src/unstable/webmcp/WebMcpRegistrationResource.ts

@@ -10,6 +10,7 @@ export type WebMcpRegistrationProps = {
   /** Re-registers when it changes; an execute-only edit reads through instead. */
   signature: string;
   tool: Tool<any, any>;
+  getCurrentTool: (name: string) => Tool<any, any> | undefined;
 };
 
 // The explainer specifies NotAllowedError for a page whose tools permission is
@@ -26,16 +27,12 @@ const useWebMcpRegistration = ({
   name,
   signature,
   tool,
+  getCurrentTool,
 }: WebMcpRegistrationProps): string | null => {
   // A refused name is remembered for as long as the tool stays in the model
   // context, so a permanent collision warns once rather than on every sync.
   const [refused, setRefused] = useState(false);
-  const toolRef = useRef(tool);
-  // Commit phase, so an abandoned render cannot hand the host a tool the tree
-  // never committed.
-  useEffect(() => {
-    toolRef.current = tool;
-  }, [tool]);
+  const fallbackToolRef = useRef(tool);
 
   useEffect(() => {
     if (refused) return undefined;
@@ -53,7 +50,11 @@ const useWebMcpRegistration = ({
 
     try {
       dispose = host.registerTool(
-        toWebMcpTool(name, () => toolRef.current, lifecycle.signal),
+        toWebMcpTool(
+          name,
+          () => getCurrentTool(name) ?? fallbackToolRef.current,
+          lifecycle.signal,
+        ),
         (error) =>
           refuse(
             notPermitted(error)
@@ -84,7 +85,7 @@ const useWebMcpRegistration = ({
         );
       }
     };
-  }, [host, name, signature, refused]);
+  }, [getCurrentTool, host, name, signature, refused]);
 
   return refused ? null : name;
 };

package/src/unstable/webmcp/useWebMcpProvider.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
-import { StrictMode, type ReactNode } from "react";
-import { cleanup } from "@testing-library/react";
+import { StrictMode, type ReactNode, useLayoutEffect } from "react";
+import { act, cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { Tool } from "assistant-stream";
 import type {
@@ -195,6 +195,40 @@ describe("unstable_useWebMcpProvider", () => {
     expect(host.unregisterCalls).toEqual([]);
   });
 
+  it("calls through to the committed implementation from a descendant layout effect", async () => {
+    const host = useHost(createFakeWebMcpHost());
+    const provider = createProvider({
+      search: frontendTool({ execute: async () => "first" }),
+    });
+    let invoke = false;
+    let execution: ReturnType<WebMcpToolDescriptor["execute"]> | undefined;
+
+    const InvokeOnCommit = ({ children }: { children: ReactNode }) => {
+      useLayoutEffect(() => {
+        if (invoke) execution = host.registry.get("search")?.execute({});
+      });
+      return children;
+    };
+    const { rerender } = mountProvider(provider, {}, (children) => (
+      <InvokeOnCommit>{children}</InvokeOnCommit>
+    ));
+    await waitForNames(["search"]);
+
+    act(() => {
+      invoke = true;
+      provider.setTools({
+        search: frontendTool({ execute: async () => "second" }),
+      });
+      rerender({});
+    });
+
+    await expect(execution).resolves.toEqual({
+      content: [{ type: "text", text: "second" }],
+    });
+    expect(host.registerCalls).toEqual(["search"]);
+    expect(host.unregisterCalls).toEqual([]);
+  });
+
   it("re-registers when the description or the schema changes", async () => {
     const host = useHost(createFakeWebMcpHost());
     const provider = createProvider({ search: frontendTool() });

package/src/unstable/webmcp/useWebMcpProvider.ts

@@ -1,8 +1,15 @@
 "use client";
 
-import { useEffect, useState, useSyncExternalStore } from "react";
+import {
+  useCallback,
+  useEffect,
+  useInsertionEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import { useResources, useTapRoot, withKey } from "@assistant-ui/tap";
-import { useAui, type AssistantClient } from "@assistant-ui/store";
+import { useAui } from "@assistant-ui/store";
 import type { Tool } from "assistant-stream";
 import { getDefaultWebMcpHost, type WebMcpHost } from "./webmcp-host";
 import { defaultWebMcpFilter, toWebMcpInputSchema } from "./convertTools";
@@ -73,20 +80,16 @@ const useStableNames = (names: readonly (string | null)[]) => {
 };
 
 const useWebMcpRegistry = ({
-  aui,
   host,
   filter,
+  tools,
+  getCurrentTool,
 }: {
-  aui: AssistantClient;
   host: WebMcpHost;
   filter: (name: string, tool: Tool<any, any>) => boolean;
+  tools: Record<string, Tool<any, any>>;
+  getCurrentTool: (name: string) => Tool<any, any> | undefined;
 }) => {
-  const tools = useModelContextSnapshot(
-    aui,
-    host.available,
-    modelContextToolSource,
-  );
-
   const elements = [];
   for (const [name, tool] of Object.entries(tools)) {
     try {
@@ -95,8 +98,14 @@ const useWebMcpRegistry = ({
       elements.push(
         withKey(
           name,
-          WebMcpRegistrationResource({ host, name, signature, tool }),
-          [host, name, signature, tool],
+          WebMcpRegistrationResource({
+            host,
+            name,
+            signature,
+            tool,
+            getCurrentTool,
+          }),
+          [host, name, signature, tool, getCurrentTool],
         ),
       );
     } catch (error) {
@@ -126,9 +135,27 @@ export const unstable_useWebMcpProvider = (
   const aui = useAui();
   const [host] = useState(getDefaultWebMcpHost);
   const filter = options.filter ?? defaultWebMcpFilter;
+  const tools = useModelContextSnapshot(
+    aui,
+    host.available,
+    modelContextToolSource,
+  );
+  const currentToolsRef = useRef(tools);
+  useInsertionEffect(() => {
+    currentToolsRef.current = tools;
+  }, [tools]);
+  const getCurrentTool = useCallback(
+    (name: string) => currentToolsRef.current[name],
+    [],
+  );
 
   const root = useTapRoot(function WebMcpProviderRoot() {
-    return useWebMcpRegistry({ aui, host, filter });
+    return useWebMcpRegistry({
+      host,
+      filter,
+      tools,
+      getCurrentTool,
+    });
   });
   const registeredToolNames = useSyncExternalStore(
     root.subscribe,

package/src/utils/isCompositionKey.ts

@@ -0,0 +1,5 @@
+// A keydown that ends an IME composition can arrive after compositionend with
+// isComposing false and keyCode 229, as the Enter that commits one does in
+// Safari.
+export const isCompositionKey = (event: KeyboardEvent) =>
+  event.isComposing || event.keyCode === 229;