@assistant-ui/react 0.15.18 → 0.15.19

package/dist/utils/getSelectionMessageId.js.map

@@ -1 +1 @@
-{"version":3,"file":"getSelectionMessageId.js","names":["QUOTE_SELECTABLE_SELECTOR","getElement","node","Node","HTMLElement","parentElement","findMessageElement","el","id","getAttribute","isExcluded","marker","Element","hasQuoteSelectableRegion","messageElement","matches","querySelectorAll","findQuoteMarker","closest","contains","getSelectionMessageId","selection","Selection","anchorNode","focusNode","anchorMessageElement","focusMessageElement","messageId","anchorMarker","focusMarker"],"sources":["../../src/utils/getSelectionMessageId.ts"],"sourcesContent":["const QUOTE_SELECTABLE_SELECTOR = \"[data-aui-quote-selectable]\";\n\nconst getElement = (node: Node | null): HTMLElement | null => {\n  return node instanceof HTMLElement ? node : (node?.parentElement ?? null);\n};\n\nconst findMessageElement = (node: Node | null): HTMLElement | null => {\n  let el = node instanceof HTMLElement ? node : (node?.parentElement ?? null);\n  while (el) {\n    const id = el.getAttribute(\"data-message-id\");\n    if (id) return el;\n    el = el.parentElement;\n  }\n  return null;\n};\n\nconst isExcluded = (marker: Element): boolean => {\n  return marker.getAttribute(\"data-aui-quote-selectable\") === \"false\";\n};\n\nconst hasQuoteSelectableRegion = (messageElement: HTMLElement) => {\n  if (\n    messageElement.matches(QUOTE_SELECTABLE_SELECTOR) &&\n    !isExcluded(messageElement)\n  ) {\n    return true;\n  }\n  for (const marker of messageElement.querySelectorAll(\n    QUOTE_SELECTABLE_SELECTOR,\n  )) {\n    if (!isExcluded(marker)) return true;\n  }\n  return false;\n};\n\nconst findQuoteMarker = (\n  node: Node | null,\n  messageElement: HTMLElement,\n): HTMLElement | null => {\n  const marker = getElement(node)?.closest(QUOTE_SELECTABLE_SELECTOR);\n  if (!(marker instanceof HTMLElement)) return null;\n  if (!messageElement.contains(marker)) return null;\n  return marker;\n};\n\nexport const getSelectionMessageId = (selection: Selection): string | null => {\n  const { anchorNode, focusNode } = selection;\n  if (!anchorNode || !focusNode) return null;\n\n  const anchorMessageElement = findMessageElement(anchorNode);\n  const focusMessageElement = findMessageElement(focusNode);\n\n  if (!anchorMessageElement || anchorMessageElement !== focusMessageElement) {\n    return null;\n  }\n\n  const messageId = anchorMessageElement.getAttribute(\"data-message-id\");\n  if (!messageId) return null;\n\n  const anchorMarker = findQuoteMarker(anchorNode, anchorMessageElement);\n  const focusMarker = findQuoteMarker(focusNode, anchorMessageElement);\n\n  if (anchorMarker && isExcluded(anchorMarker)) return null;\n  if (focusMarker && isExcluded(focusMarker)) return null;\n\n  if (!hasQuoteSelectableRegion(anchorMessageElement)) return messageId;\n\n  if (!anchorMarker || anchorMarker !== focusMarker) return null;\n\n  return messageId;\n};\n"],"mappings":";AAAA,MAAMA,4BAA4B;AAElC,MAAMC,cAAcC,SAA0C;CAC5D,OAAOA,gBAAgBE,cAAcF,OAAQA,MAAMG,iBAAiB;AACtE;AAEA,MAAMC,sBAAsBJ,SAA0C;CACpE,IAAIK,KAAKL,gBAAgBE,cAAcF,OAAQA,MAAMG,iBAAiB;CACtE,OAAOE,IAAI;EAET,IADWA,GAAGE,aAAa,iBACvBD,GAAI,OAAOD;EACfA,KAAKA,GAAGF;CACV;CACA,OAAO;AACT;AAEA,MAAMK,cAAcC,WAA6B;CAC/C,OAAOA,OAAOF,aAAa,2BAA2B,MAAM;AAC9D;AAEA,MAAMI,4BAA4BC,mBAAgC;CAChE,IACEA,eAAeC,QAAQf,yBAAyB,KAChD,CAACU,WAAWI,cAAc,GAE1B,OAAO;CAET,KAAK,MAAMH,UAAUG,eAAeE,iBAClChB,yBACF,GACE,IAAI,CAACU,WAAWC,MAAM,GAAG,OAAO;CAElC,OAAO;AACT;AAEA,MAAMM,mBACJf,MACAY,mBACuB;CACvB,MAAMH,SAASV,WAAWC,IAAI,CAAC,EAAEgB,QAAQlB,yBAAyB;CAClE,IAAI,EAAEW,kBAAkBP,cAAc,OAAO;CAC7C,IAAI,CAACU,eAAeK,SAASR,MAAM,GAAG,OAAO;CAC7C,OAAOA;AACT;AAEA,MAAaS,yBAAyBC,cAAwC;CAC5E,MAAM,EAAEE,YAAYC,cAAcH;CAClC,IAAI,CAACE,cAAc,CAACC,WAAW,OAAO;CAEtC,MAAMC,uBAAuBnB,mBAAmBiB,UAAU;CAC1D,MAAMG,sBAAsBpB,mBAAmBkB,SAAS;CAExD,IAAI,CAACC,wBAAwBA,yBAAyBC,qBACpD,OAAO;CAGT,MAAMC,YAAYF,qBAAqBhB,aAAa,iBAAiB;CACrE,IAAI,CAACkB,WAAW,OAAO;CAEvB,MAAMC,eAAeX,gBAAgBM,YAAYE,oBAAoB;CACrE,MAAMI,cAAcZ,gBAAgBO,WAAWC,oBAAoB;CAEnE,IAAIG,gBAAgBlB,WAAWkB,YAAY,GAAG,OAAO;CACrD,IAAIC,eAAenB,WAAWmB,WAAW,GAAG,OAAO;CAEnD,IAAI,CAAChB,yBAAyBY,oBAAoB,GAAG,OAAOE;CAE5D,IAAI,CAACC,gBAAgBA,iBAAiBC,aAAa,OAAO;CAE1D,OAAOF;AACT"}
+{"version":3,"file":"getSelectionMessageId.js","names":["QUOTE_SELECTABLE_SELECTOR","getElement","node","Node","HTMLElement","parentElement","findMessageElement","el","id","getAttribute","isExcluded","marker","Element","hasQuoteSelectableRegion","messageElement","matches","querySelectorAll","findQuoteMarker","closest","contains","intersectsExcluded","scope","selection","Selection","ranges","Array","from","length","rangeCount","_","i","getRangeAt","some","range","intersectsNode","getSelectionMessageId","anchorNode","focusNode","anchorMessageElement","focusMessageElement","messageId","anchorMarker","focusMarker","commonAncestorContainer"],"sources":["../../src/utils/getSelectionMessageId.ts"],"sourcesContent":["const QUOTE_SELECTABLE_SELECTOR = \"[data-aui-quote-selectable]\";\n\nconst getElement = (node: Node | null): HTMLElement | null => {\n  return node instanceof HTMLElement ? node : (node?.parentElement ?? null);\n};\n\nconst findMessageElement = (node: Node | null): HTMLElement | null => {\n  let el = node instanceof HTMLElement ? node : (node?.parentElement ?? null);\n  while (el) {\n    const id = el.getAttribute(\"data-message-id\");\n    if (id) return el;\n    el = el.parentElement;\n  }\n  return null;\n};\n\nconst isExcluded = (marker: Element): boolean => {\n  return marker.getAttribute(\"data-aui-quote-selectable\") === \"false\";\n};\n\nconst hasQuoteSelectableRegion = (messageElement: HTMLElement) => {\n  if (\n    messageElement.matches(QUOTE_SELECTABLE_SELECTOR) &&\n    !isExcluded(messageElement)\n  ) {\n    return true;\n  }\n  for (const marker of messageElement.querySelectorAll(\n    QUOTE_SELECTABLE_SELECTOR,\n  )) {\n    if (!isExcluded(marker)) return true;\n  }\n  return false;\n};\n\nconst findQuoteMarker = (\n  node: Node | null,\n  messageElement: HTMLElement,\n): HTMLElement | null => {\n  const marker = getElement(node)?.closest(QUOTE_SELECTABLE_SELECTOR);\n  if (!(marker instanceof HTMLElement)) return null;\n  if (!messageElement.contains(marker)) return null;\n  return marker;\n};\n\nconst intersectsExcluded = (scope: Element, selection: Selection): boolean => {\n  const ranges = Array.from({ length: selection.rangeCount }, (_, i) =>\n    selection.getRangeAt(i),\n  );\n  for (const marker of scope.querySelectorAll(QUOTE_SELECTABLE_SELECTOR)) {\n    if (!isExcluded(marker)) continue;\n    if (ranges.some((range) => range.intersectsNode(marker))) return true;\n  }\n  return false;\n};\n\nexport const getSelectionMessageId = (selection: Selection): string | null => {\n  const { anchorNode, focusNode } = selection;\n  if (!anchorNode || !focusNode) return null;\n\n  const anchorMessageElement = findMessageElement(anchorNode);\n  const focusMessageElement = findMessageElement(focusNode);\n\n  if (!anchorMessageElement || anchorMessageElement !== focusMessageElement) {\n    return null;\n  }\n\n  const messageId = anchorMessageElement.getAttribute(\"data-message-id\");\n  if (!messageId) return null;\n\n  const anchorMarker = findQuoteMarker(anchorNode, anchorMessageElement);\n  const focusMarker = findQuoteMarker(focusNode, anchorMessageElement);\n\n  if (anchorMarker && isExcluded(anchorMarker)) return null;\n  if (focusMarker && isExcluded(focusMarker)) return null;\n\n  if (hasQuoteSelectableRegion(anchorMessageElement)) {\n    if (!anchorMarker || anchorMarker !== focusMarker) return null;\n  }\n\n  const scope = anchorMarker ?? anchorMessageElement;\n\n  for (let i = 0; i < selection.rangeCount; i++) {\n    const { commonAncestorContainer } = selection.getRangeAt(i);\n    if (!scope.contains(commonAncestorContainer)) return null;\n  }\n\n  return intersectsExcluded(scope, selection) ? null : messageId;\n};\n"],"mappings":";AAAA,MAAMA,4BAA4B;AAElC,MAAMC,cAAcC,SAA0C;CAC5D,OAAOA,gBAAgBE,cAAcF,OAAQA,MAAMG,iBAAiB;AACtE;AAEA,MAAMC,sBAAsBJ,SAA0C;CACpE,IAAIK,KAAKL,gBAAgBE,cAAcF,OAAQA,MAAMG,iBAAiB;CACtE,OAAOE,IAAI;EAET,IADWA,GAAGE,aAAa,iBACvBD,GAAI,OAAOD;EACfA,KAAKA,GAAGF;CACV;CACA,OAAO;AACT;AAEA,MAAMK,cAAcC,WAA6B;CAC/C,OAAOA,OAAOF,aAAa,2BAA2B,MAAM;AAC9D;AAEA,MAAMI,4BAA4BC,mBAAgC;CAChE,IACEA,eAAeC,QAAQf,yBAAyB,KAChD,CAACU,WAAWI,cAAc,GAE1B,OAAO;CAET,KAAK,MAAMH,UAAUG,eAAeE,iBAClChB,yBACF,GACE,IAAI,CAACU,WAAWC,MAAM,GAAG,OAAO;CAElC,OAAO;AACT;AAEA,MAAMM,mBACJf,MACAY,mBACuB;CACvB,MAAMH,SAASV,WAAWC,IAAI,CAAC,EAAEgB,QAAQlB,yBAAyB;CAClE,IAAI,EAAEW,kBAAkBP,cAAc,OAAO;CAC7C,IAAI,CAACU,eAAeK,SAASR,MAAM,GAAG,OAAO;CAC7C,OAAOA;AACT;AAEA,MAAMS,sBAAsBC,OAAgBC,cAAkC;CAC5E,MAAME,SAASC,MAAMC,KAAK,EAAEC,QAAQL,UAAUM,WAAW,IAAIC,GAAGC,MAC9DR,UAAUS,WAAWD,CAAC,CACxB;CACA,KAAK,MAAMnB,UAAUU,MAAML,iBAAiBhB,yBAAyB,GAAG;EACtE,IAAI,CAACU,WAAWC,MAAM,GAAG;EACzB,IAAIa,OAAOQ,MAAMC,UAAUA,MAAMC,eAAevB,MAAM,CAAC,GAAG,OAAO;CACnE;CACA,OAAO;AACT;AAEA,MAAawB,yBAAyBb,cAAwC;CAC5E,MAAM,EAAEc,YAAYC,cAAcf;CAClC,IAAI,CAACc,cAAc,CAACC,WAAW,OAAO;CAEtC,MAAMC,uBAAuBhC,mBAAmB8B,UAAU;CAC1D,MAAMG,sBAAsBjC,mBAAmB+B,SAAS;CAExD,IAAI,CAACC,wBAAwBA,yBAAyBC,qBACpD,OAAO;CAGT,MAAMC,YAAYF,qBAAqB7B,aAAa,iBAAiB;CACrE,IAAI,CAAC+B,WAAW,OAAO;CAEvB,MAAMC,eAAexB,gBAAgBmB,YAAYE,oBAAoB;CACrE,MAAMI,cAAczB,gBAAgBoB,WAAWC,oBAAoB;CAEnE,IAAIG,gBAAgB/B,WAAW+B,YAAY,GAAG,OAAO;CACrD,IAAIC,eAAehC,WAAWgC,WAAW,GAAG,OAAO;CAEnD,IAAI7B,yBAAyByB,oBAAoB,GAC3C;MAAA,CAACG,gBAAgBA,iBAAiBC,aAAa,OAAO;CAAA;CAG5D,MAAMrB,QAAQoB,gBAAgBH;CAE9B,KAAK,IAAIR,IAAI,GAAGA,IAAIR,UAAUM,YAAYE,KAAK;EAC7C,MAAM,EAAEa,4BAA4BrB,UAAUS,WAAWD,CAAC;EAC1D,IAAI,CAACT,MAAMF,SAASwB,uBAAuB,GAAG,OAAO;CACvD;CAEA,OAAOvB,mBAAmBC,OAAOC,SAAS,IAAI,OAAOkB;AACvD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.15.18",
+  "version": "0.15.19",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,14 +55,14 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.17",
-    "@assistant-ui/store": "^0.3.12",
-    "@assistant-ui/tap": "^0.9.16",
-    "assistant-cloud": "^0.1.43",
-    "assistant-stream": "^0.3.41",
+    "@assistant-ui/core": "^0.3.18",
+    "@assistant-ui/store": "^0.3.13",
+    "@assistant-ui/tap": "^0.9.17",
+    "assistant-cloud": "^0.2.0",
+    "assistant-stream": "^0.3.42",
     "radix-ui": "^1.6.7",
     "react-textarea-autosize": "^8.5.9",
-    "safe-content-frame": "^0.0.29",
+    "safe-content-frame": "^0.0.30",
     "zod": "^4.5.4",
     "zustand": "^5.0.15"
   },
@@ -81,13 +81,13 @@
     }
   },
   "devDependencies": {
-    "@assistant-ui/vite": "0.0.16",
-    "@assistant-ui/x-buildutils": "0.0.25",
+    "@assistant-ui/vite": "0.0.17",
+    "@assistant-ui/x-buildutils": "0.0.26",
     "@testing-library/react": "^16.3.3",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^26.4.0",
+    "@types/node": "^26.4.1",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
+    "@types/react-dom": "^19.2.7",
     "jsdom": "^30.0.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

package/src/context/providers/ThreadViewportProvider.tsx

@@ -25,8 +25,8 @@ const useThreadViewportStoreValue = (options: ThreadViewportStoreOptions) => {
 
   // Forward scrollToBottom from outer viewport to inner viewport
   useEffect(() => {
-    return outerViewport?.getState().onScrollToBottom(() => {
-      store.getState().scrollToBottom();
+    return outerViewport?.getState().onScrollToBottom((config) => {
+      store.getState().scrollToBottom(config);
     });
   }, [outerViewport, store]);
 

package/src/hooks/useToolCallElapsed.ts

@@ -36,6 +36,9 @@ export const useToolCallElapsed = (): number | undefined => {
 
   useEffect(() => {
     if (!running) return undefined;
+    // The clock is an external source; this catches the elapsed value up before
+    // the interval takes over.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setNow(Date.now());
     const id = setInterval(() => setNow(Date.now()), 1000);
     return () => clearInterval(id);

package/src/index.ts

@@ -46,7 +46,7 @@ export type {
 export { toolApprovalAcceptsText } from "@assistant-ui/core";
 
 export { useCloudThreadListRuntime } from "@assistant-ui/core/react";
-export { AssistantCloud } from "assistant-cloud";
+export { AssistantCloud, readAnonymousRefreshToken } from "assistant-cloud";
 
 // --- adapters/attachment ---
 export type { AttachmentAdapter } from "@assistant-ui/core";

package/src/mcp-apps/app-frame.test.tsx

@@ -7,6 +7,7 @@ import type {
   SandboxHostProps,
 } from "../sandbox-host/SandboxHost";
 import type { CreateMcpAppBridgeOptions, McpAppBridge } from "./bridge";
+import type * as BridgeModule from "./bridge";
 import { MCP_APP_MIME_TYPE, type McpAppHostContext } from "./types";
 
 const { sandboxHostMock, createMcpAppBridgeMock } = vi.hoisted(() => ({
@@ -100,6 +101,178 @@ describe("McpAppFrame", () => {
     sandboxBridge.dispose();
   });
 
+  it.each([
+    { initial: [], next: ["search"], allowed: true },
+    { initial: ["search"], next: [], allowed: false },
+    { initial: undefined, next: ["other"], allowed: false },
+    { initial: [], next: undefined, allowed: true },
+  ])(
+    "applies replacement tool allowlists: $initial -> $next",
+    async ({ initial, next, allowed }) => {
+      const { createMcpAppBridge } =
+        await vi.importActual<typeof BridgeModule>("./bridge");
+      createMcpAppBridgeMock.mockImplementationOnce(createMcpAppBridge);
+      const captured: { createBridge?: SandboxHostProps["createBridge"] } = {};
+      sandboxHostMock.mockImplementation((props: SandboxHostProps) => {
+        captured.createBridge ??= props.createBridge;
+        return null;
+      });
+      const callTool = vi.fn(() => ({ content: [] }));
+      const view = (allowedTools: readonly string[] | undefined) => (
+        <McpAppFrame
+          app={{ resourceUri: "ui://example/widget" }}
+          resource={{
+            uri: "ui://example/widget",
+            mimeType: MCP_APP_MIME_TYPE,
+            html: "",
+          }}
+          handlers={
+            allowedTools === undefined
+              ? { callTool }
+              : { allowedTools, callTool }
+          }
+        />
+      );
+      const rendered = render(view(initial));
+      if (!captured.createBridge) throw new Error("Frame did not mount");
+      const sendMessage = vi.fn();
+      const bridge = captured.createBridge(
+        {
+          iframe: document.createElement("iframe"),
+          origin: "https://widget.example",
+          sendMessage,
+        },
+        { setHeight: vi.fn() },
+      );
+      try {
+        rendered.rerender(view(next));
+        bridge.onMessage(
+          new MessageEvent("message", {
+            data: {
+              jsonrpc: "2.0",
+              id: 1,
+              method: "tools/call",
+              params: { name: "search" },
+            },
+          }),
+        );
+        await Promise.resolve();
+        expect(sendMessage).toHaveBeenCalledWith(
+          expect.objectContaining(
+            allowed
+              ? { id: 1, result: { content: [] } }
+              : { id: 1, error: expect.objectContaining({ code: -32602 }) },
+          ),
+        );
+        expect(callTool).toHaveBeenCalledTimes(allowed ? 1 : 0);
+      } finally {
+        bridge.dispose();
+      }
+    },
+  );
+
+  it("forwards size changes to the sandbox host and live handler", () => {
+    let createBridge: SandboxHostProps["createBridge"] | null = null;
+    sandboxHostMock.mockImplementation((props: SandboxHostProps) => {
+      createBridge ??= props.createBridge;
+      return null;
+    });
+    const bridge: McpAppBridge = {
+      onMessage: vi.fn(),
+      dispose: vi.fn(),
+      notifyToolInput: vi.fn(),
+      notifyToolResult: vi.fn(),
+      notifyHostContextChanged: vi.fn(),
+    };
+    createMcpAppBridgeMock.mockReturnValue(bridge);
+    const initialOnSizeChange = vi.fn();
+    const replacementOnSizeChange = vi.fn();
+    const view = (onSizeChange: typeof initialOnSizeChange) => (
+      <McpAppFrame
+        app={{ resourceUri: "ui://example/widget" }}
+        resource={{
+          uri: "ui://example/widget",
+          mimeType: MCP_APP_MIME_TYPE,
+          html: "",
+        }}
+        handlers={{ onSizeChange }}
+      />
+    );
+    const rendered = render(view(initialOnSizeChange));
+
+    const setHeight = vi.fn();
+    const sandboxBridge = createBridge!(
+      {
+        iframe: document.createElement("iframe"),
+        origin: "https://widget.example",
+        sendMessage: vi.fn(),
+      },
+      { setHeight },
+    );
+    const options = createMcpAppBridgeMock.mock
+      .calls[0]![0] as CreateMcpAppBridgeOptions;
+
+    try {
+      const initialSize = { width: 640, height: 360 };
+      options.handlers?.onSizeChange?.(initialSize);
+      expect(setHeight).toHaveBeenCalledWith(360);
+      expect(initialOnSizeChange).toHaveBeenCalledWith(initialSize);
+
+      rendered.rerender(view(replacementOnSizeChange));
+      const replacementSize = { width: 800, height: 480 };
+      options.handlers?.onSizeChange?.(replacementSize);
+      expect(setHeight).toHaveBeenNthCalledWith(2, 480);
+      expect(initialOnSizeChange).toHaveBeenCalledOnce();
+      expect(replacementOnSizeChange).toHaveBeenCalledOnce();
+      expect(replacementOnSizeChange).toHaveBeenCalledWith(replacementSize);
+
+      const widthOnlySize = { width: 720 };
+      options.handlers?.onSizeChange?.(widthOnlySize);
+      expect(setHeight).toHaveBeenCalledTimes(2);
+      expect(replacementOnSizeChange).toHaveBeenCalledWith(widthOnlySize);
+    } finally {
+      sandboxBridge.dispose();
+    }
+  });
+
+  it("disposes the underlying bridge with the sandbox bridge", () => {
+    let createBridge: SandboxHostProps["createBridge"] | null = null;
+    sandboxHostMock.mockImplementation((props: SandboxHostProps) => {
+      createBridge ??= props.createBridge;
+      return null;
+    });
+    const bridge: McpAppBridge = {
+      onMessage: vi.fn(),
+      dispose: vi.fn(),
+      notifyToolInput: vi.fn(),
+      notifyToolResult: vi.fn(),
+      notifyHostContextChanged: vi.fn(),
+    };
+    createMcpAppBridgeMock.mockReturnValue(bridge);
+    render(
+      <McpAppFrame
+        app={{ resourceUri: "ui://example/widget" }}
+        resource={{
+          uri: "ui://example/widget",
+          mimeType: MCP_APP_MIME_TYPE,
+          html: "",
+        }}
+      />,
+    );
+
+    const sandboxBridge = createBridge!(
+      {
+        iframe: document.createElement("iframe"),
+        origin: "https://widget.example",
+        sendMessage: vi.fn(),
+      },
+      { setHeight: vi.fn() },
+    );
+    sandboxBridge.dispose();
+
+    expect(bridge.dispose).toHaveBeenCalledOnce();
+  });
+
   it("only notifies the widget when host context actually changes", () => {
     let createBridge: SandboxHostProps["createBridge"] | null = null;
     sandboxHostMock.mockImplementation((props: SandboxHostProps) => {
@@ -159,6 +332,22 @@ describe("McpAppFrame", () => {
       availableDisplayModes: ["inline", "pip"],
     });
 
+    // A hole is not a value, in either operand order.
+    const sparseModes: ("inline" | "pip")[] = new Array(2);
+    sparseModes[1] = "pip";
+    rendered.rerender(
+      view({ displayMode: "fullscreen", availableDisplayModes: sparseModes }),
+    );
+    expect(bridge.notifyHostContextChanged).toHaveBeenCalledTimes(2);
+
+    rendered.rerender(
+      view({
+        displayMode: "fullscreen",
+        availableDisplayModes: ["inline", "pip"],
+      }),
+    );
+    expect(bridge.notifyHostContextChanged).toHaveBeenCalledTimes(3);
+
     sandboxBridge.dispose();
   });
   it("cancels a queued host context that returns to the delivered value", () => {

package/src/mcp-apps/app-frame.tsx

@@ -42,12 +42,12 @@ const isSameHostContext = (a: unknown, b: unknown, depth = 0): boolean => {
   if (Object.is(a, b)) return true;
   if (depth > 100) return false;
   if (Array.isArray(a) || Array.isArray(b)) {
-    return (
-      Array.isArray(a) &&
-      Array.isArray(b) &&
-      a.length === b.length &&
-      a.every((item, index) => isSameHostContext(item, b[index], depth + 1))
-    );
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+      return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!isSameHostContext(a[i], b[i], depth + 1)) return false;
+    }
+    return true;
   }
   if (!isPlainObject(a) || !isPlainObject(b)) return false;
   const aKeys = Object.keys(a);
@@ -96,25 +96,33 @@ type LiveSnapshot = {
   output: unknown;
 };
 
+type FrameLifecycle = {
+  onInitialized: () => void;
+  onSizeChange: (params: { width?: number; height?: number }) => void;
+};
+
 // Proxy each per-call handler through liveRef so the bridge always dispatches
 // to the latest handler reference (e.g. inline callbacks closing over state).
 // Capability presence is snapshot at mount: a handler added later requires a
 // remount (keyed on resource URI) to expose the capability to the widget.
+// allowedTools is the exception: it is never advertised in the ui/initialize
+// response, so it stays a live getter, which means this object must reach the
+// bridge uncopied and the frame passes its lifecycle work in rather than
+// wrapping the result.
 function buildLiveHandlers(
   initial: McpAppBridgeHandlers | undefined,
   liveRef: { readonly current: LiveSnapshot },
+  lifecycle: FrameLifecycle,
 ): McpAppBridgeHandlers {
   const live = () => liveRef.current.handlers;
   const has = <K extends keyof McpAppBridgeHandlers>(key: K) =>
     initial?.[key] !== undefined;
   const out: McpAppBridgeHandlers = {};
-  if (has("allowedTools")) {
-    Object.defineProperty(out, "allowedTools", {
-      get: () => live()?.allowedTools,
-      enumerable: true,
-      configurable: true,
-    });
-  }
+  Object.defineProperty(out, "allowedTools", {
+    get: () => live()?.allowedTools,
+    enumerable: true,
+    configurable: true,
+  });
   const liveCall = <K extends keyof McpAppBridgeHandlers>(
     key: K,
   ): NonNullable<McpAppBridgeHandlers[K]> =>
@@ -134,8 +142,14 @@ function buildLiveHandlers(
     out.updateModelContext = liveCall("updateModelContext");
   if (has("requestDisplayMode"))
     out.requestDisplayMode = liveCall("requestDisplayMode");
-  out.onSizeChange = (p) => live()?.onSizeChange?.(p);
-  out.onInitialized = () => live()?.onInitialized?.();
+  out.onSizeChange = (p) => {
+    lifecycle.onSizeChange(p);
+    live()?.onSizeChange?.(p);
+  };
+  out.onInitialized = () => {
+    lifecycle.onInitialized();
+    live()?.onInitialized?.();
+  };
   out.onRequestTeardown = (p) => live()?.onRequestTeardown?.(p);
   out.onLog = (p) => live()?.onLog?.(p);
   out.onError = (e) => live()?.onError?.(e);
@@ -215,23 +229,18 @@ export function McpAppFrame({
       }
     };
 
-    const liveHandlers = buildLiveHandlers(current.handlers, liveRef);
-    const liveOnInitialized = liveHandlers.onInitialized;
-    const wrappedHandlers: McpAppBridgeHandlers = {
-      ...liveHandlers,
+    const wrappedHandlers = buildLiveHandlers(current.handlers, liveRef, {
       onInitialized: () => {
         if (initTimeoutId !== null) {
           clearTimeout(initTimeoutId);
           initTimeoutId = null;
         }
         flushPending();
-        liveOnInitialized?.();
       },
       onSizeChange: (p) => {
         if (p.height != null) host.setHeight(p.height);
-        liveHandlers.onSizeChange?.(p);
       },
-    };
+    });
 
     // Safety net: if the widget never sends notifications/initialized (broken
     // or non-spec-compliant), flush the queue anyway so the host doesn't

package/src/mcp-apps/bridge.test.ts

@@ -37,6 +37,104 @@ async function flush() {
 }
 
 describe("createMcpAppBridge", () => {
+  it("ignores requests and notifications after disposal", async () => {
+    const { frame, captured } = makeFrame();
+    const callTool = vi.fn().mockResolvedValue({ ok: true });
+    const onInitialized = vi.fn();
+    const bridge = createMcpAppBridge({
+      frame,
+      handlers: { callTool, onInitialized },
+    });
+
+    bridge.dispose();
+    expect(() => bridge.dispose()).not.toThrow();
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "tools/call",
+      params: { name: "search" },
+    });
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      method: "notifications/initialized",
+    });
+    await flush();
+
+    expect(callTool).not.toHaveBeenCalled();
+    expect(onInitialized).not.toHaveBeenCalled();
+    expect(captured).toEqual([]);
+  });
+
+  it("does not send a response after disposal", async () => {
+    const { frame, captured } = makeFrame();
+    let resolveCall!: (value: unknown) => void;
+    const callTool = vi.fn(
+      () =>
+        new Promise((resolve) => {
+          resolveCall = resolve;
+        }),
+    );
+    const bridge = createMcpAppBridge({ frame, handlers: { callTool } });
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "tools/call",
+      params: { name: "search" },
+    });
+    expect(callTool).toHaveBeenCalledOnce();
+
+    bridge.dispose();
+    resolveCall({ ok: true });
+    await flush();
+
+    expect(captured).toEqual([]);
+  });
+
+  it("does not report an async error after disposal", async () => {
+    const { frame, captured } = makeFrame();
+    let rejectCall!: (reason?: unknown) => void;
+    const callTool = vi.fn(
+      () =>
+        new Promise((_resolve, reject) => {
+          rejectCall = reject;
+        }),
+    );
+    const onError = vi.fn();
+    const bridge = createMcpAppBridge({
+      frame,
+      handlers: { callTool, onError },
+    });
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "tools/call",
+      params: { name: "search" },
+    });
+    expect(callTool).toHaveBeenCalledOnce();
+
+    bridge.dispose();
+    rejectCall(new Error("tool failed"));
+    await flush();
+
+    expect(onError).not.toHaveBeenCalled();
+    expect(captured).toEqual([]);
+  });
+
+  it("does not send host notifications after disposal", () => {
+    const { frame, captured } = makeFrame();
+    const bridge = createMcpAppBridge({ frame });
+
+    bridge.dispose();
+    bridge.notifyToolInput({ query: "hello" });
+    bridge.notifyToolResult({ answer: "world" });
+    bridge.notifyHostContextChanged({ theme: "dark" });
+
+    expect(captured).toEqual([]);
+  });
+
   it("responds to ui/initialize with host info, version, and capabilities", async () => {
     const { frame, captured } = makeFrame();
     const bridge = createMcpAppBridge({

package/src/mcp-apps/bridge.ts

@@ -90,8 +90,10 @@ export function createMcpAppBridge(
     hostInfo = DEFAULT_HOST_INFO,
     hostContext = {},
   } = opts;
+  let disposed = false;
 
   const post = (msg: McpAppJsonRpcMessage) => {
+    if (disposed) return;
     frame.sendMessage(msg);
   };
 
@@ -125,6 +127,7 @@ export function createMcpAppBridge(
   };
 
   const reportError = (error: Error) => {
+    if (disposed) return;
     invokeUserCallback(
       "assistant-ui",
       "MCP App onError",
@@ -435,6 +438,7 @@ export function createMcpAppBridge(
   // The host applies the cross-origin guard before delegating; this only
   // validates the JSON-RPC envelope.
   const onMessage = (event: MessageEvent) => {
+    if (disposed) return;
     if (!isJsonRpcMessage(event.data)) return;
 
     const msg = event.data;
@@ -447,7 +451,9 @@ export function createMcpAppBridge(
 
   return {
     onMessage,
-    dispose: () => {},
+    dispose: () => {
+      disposed = true;
+    },
     notifyToolInput: (input: unknown) => {
       post({
         jsonrpc: "2.0",

package/src/primitives/assistantModal/AssistantModalRoot.test.tsx

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AssistantRuntimeProvider } from "../../context";
+import { useLocalRuntime } from "../../legacy-runtime/runtime-cores/local/useLocalRuntime";
+import { AssistantModalPrimitiveContent } from "./AssistantModalContent";
+import { AssistantModalPrimitiveRoot } from "./AssistantModalRoot";
+import { AssistantModalPrimitiveTrigger } from "./AssistantModalTrigger";
+
+const adapter = {
+  async *run() {
+    yield { content: [{ type: "text" as const, text: "Hello" }] };
+  },
+};
+
+const Modal = ({
+  controlled = true,
+  onOpenChange,
+  ...props
+}: AssistantModalPrimitiveRoot.Props & { controlled?: boolean }) => {
+  const runtime = useLocalRuntime(adapter);
+  const [open, setOpen] = useState(false);
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <button onClick={() => runtime.thread.append("Hello")}>Start run</button>
+      <AssistantModalPrimitiveRoot
+        {...(controlled ? { open } : {})}
+        onOpenChange={(value) => {
+          setOpen(value);
+          onOpenChange?.(value);
+        }}
+        {...props}
+      >
+        <AssistantModalPrimitiveTrigger>
+          Toggle chat
+        </AssistantModalPrimitiveTrigger>
+        <AssistantModalPrimitiveContent aria-label="Chat">
+          Response
+        </AssistantModalPrimitiveContent>
+      </AssistantModalPrimitiveRoot>
+    </AssistantRuntimeProvider>
+  );
+};
+
+afterEach(cleanup);
+
+describe("AssistantModalPrimitiveRoot run start", () => {
+  it.each([true, false])(
+    "opens on run start and closes through the trigger (controlled: %s)",
+    async (controlled) => {
+      const onOpenChange = vi.fn();
+      render(<Modal controlled={controlled} onOpenChange={onOpenChange} />);
+      expect(screen.queryByRole("dialog")).toBeNull();
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+      });
+      expect(await screen.findByRole("dialog", { name: "Chat" })).toBeDefined();
+      expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(true);
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+      });
+      expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(true);
+
+      fireEvent.click(screen.getByRole("button", { name: "Toggle chat" }));
+      expect(screen.queryByRole("dialog")).toBeNull();
+    },
+  );
+
+  it.each([{ open: true }, { controlled: false, defaultOpen: true }])(
+    "does not request opening when already open (%o)",
+    async (props) => {
+      const onOpenChange = vi.fn();
+      render(<Modal {...props} onOpenChange={onOpenChange} />);
+      expect(screen.getByRole("dialog", { name: "Chat" })).toBeDefined();
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+      });
+
+      expect(onOpenChange).not.toHaveBeenCalled();
+      expect(screen.getByRole("dialog", { name: "Chat" })).toBeDefined();
+    },
+  );
+
+  it("notifies the current owner without overriding its controlled value", async () => {
+    const previous = vi.fn();
+    const current = vi.fn();
+    const view = render(<Modal open={false} onOpenChange={previous} />);
+    view.rerender(<Modal open={false} onOpenChange={current} />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+    });
+
+    expect(current).toHaveBeenCalledExactlyOnceWith(true);
+    expect(previous).not.toHaveBeenCalled();
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("does not request opening when auto-open is disabled", async () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Modal unstable_openOnRunStart={false} onOpenChange={onOpenChange} />,
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+    });
+
+    expect(onOpenChange).not.toHaveBeenCalled();
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+});