@assistant-ui/core 0.3.18 → 0.3.20

package/src/react/primitives/thread/ThreadMessages.test.tsx

@@ -0,0 +1,160 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { AuiProvider, useAui } from "@assistant-ui/store";
+import { type FC, useState } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  ExternalThread,
+  type ExternalThreadProps,
+} from "../../../store/clients/external-thread";
+import type { MessageState } from "../../../store";
+import { AssistantRuntimeProvider } from "../../AssistantRuntimeProvider";
+import { useExternalStoreRuntime } from "../../runtimes/useExternalStoreRuntime";
+import { ThreadPrimitiveMessages } from "./ThreadMessages";
+
+const message = (
+  id: string,
+  role: "user" | "assistant",
+): ExternalThreadProps["messages"][number] => {
+  if (role === "assistant") {
+    return {
+      id,
+      createdAt: new Date(0),
+      role,
+      content: [{ type: "text", text: id }],
+      status: { type: "complete", reason: "stop" },
+      metadata: {
+        unstable_state: {},
+        unstable_annotations: [],
+        unstable_data: [],
+        steps: [],
+        custom: {},
+      },
+    };
+  }
+
+  return {
+    id,
+    createdAt: new Date(0),
+    role,
+    content: [{ type: "text", text: id }],
+    attachments: [],
+    metadata: { custom: {} },
+  };
+};
+
+const StatefulMessage = ({ message }: { message: MessageState }) => {
+  const [initialId] = useState(message.id);
+  return <span data-role={message.role}>{`${initialId}:${message.id}`}</span>;
+};
+
+const renderMessages = (messages: ExternalThreadProps["messages"]) => {
+  const App: FC<{ messages: ExternalThreadProps["messages"] }> = ({
+    messages,
+  }) => {
+    const aui = useAui({ thread: ExternalThread({ messages }) });
+    return (
+      <AuiProvider value={aui}>
+        <ThreadPrimitiveMessages>
+          {({ message }) => <StatefulMessage message={message} />}
+        </ThreadPrimitiveMessages>
+      </AuiProvider>
+    );
+  };
+  const result = render(<App messages={messages} />);
+  return {
+    rerender: (nextMessages: ExternalThreadProps["messages"]) =>
+      result.rerender(<App messages={nextMessages} />),
+  };
+};
+
+const renderExternalStoreMessages = (
+  messages: ExternalThreadProps["messages"],
+  isRunning: boolean,
+) => {
+  const App: FC<{
+    messages: ExternalThreadProps["messages"];
+    isRunning: boolean;
+  }> = ({ messages, isRunning }) => {
+    const runtime = useExternalStoreRuntime({
+      messages,
+      isRunning,
+      convertMessage: (message) => message,
+      onNew: async () => {},
+    });
+    return (
+      <AssistantRuntimeProvider runtime={runtime}>
+        <ThreadPrimitiveMessages>
+          {({ message }) => <StatefulMessage message={message} />}
+        </ThreadPrimitiveMessages>
+      </AssistantRuntimeProvider>
+    );
+  };
+  const result = render(<App messages={messages} isRunning={isRunning} />);
+  return {
+    container: result.container,
+    rerender: (
+      nextMessages: ExternalThreadProps["messages"],
+      nextIsRunning: boolean,
+    ) =>
+      result.rerender(
+        <App messages={nextMessages} isRunning={nextIsRunning} />,
+      ),
+  };
+};
+
+describe("ThreadPrimitiveMessages", () => {
+  afterEach(cleanup);
+
+  it("keeps component state with the surviving message after removal", () => {
+    const first = message("first", "user");
+    const second = message("second", "assistant");
+    const thread = renderMessages([first, second]);
+
+    thread.rerender([second]);
+
+    expect(screen.queryByText("second:second")).not.toBeNull();
+    expect(screen.queryByText("first:second")).toBeNull();
+  });
+
+  it("keeps component state with messages after prepending history", () => {
+    const first = message("first", "user");
+    const second = message("second", "assistant");
+    const thread = renderMessages([first, second]);
+
+    thread.rerender([message("zeroth", "assistant"), first, second]);
+
+    expect(screen.queryByText("first:first")).not.toBeNull();
+    expect(screen.queryByText("second:second")).not.toBeNull();
+    expect(screen.queryByText("first:zeroth")).toBeNull();
+    expect(screen.queryByText("second:first")).toBeNull();
+  });
+
+  it("remounts a message when its runtime ID changes", () => {
+    const thread = renderMessages([message("client-id", "assistant")]);
+
+    thread.rerender([message("server-id", "assistant")]);
+
+    expect(screen.queryByText("server-id:server-id")).not.toBeNull();
+    expect(screen.queryByText("client-id:server-id")).toBeNull();
+  });
+
+  it("remounts an optimistic placeholder as the real assistant message", async () => {
+    const userMessage = message("user-id", "user");
+    const thread = renderExternalStoreMessages([userMessage], true);
+    const optimisticRow = thread.container.querySelector(
+      '[data-role="assistant"]',
+    );
+
+    expect(optimisticRow).not.toBeNull();
+    expect(optimisticRow?.textContent).not.toBe("assistant-id:assistant-id");
+
+    thread.rerender([userMessage, message("assistant-id", "assistant")], false);
+
+    await waitFor(() => {
+      expect(screen.queryByText("assistant-id:assistant-id")).not.toBeNull();
+    });
+    expect(optimisticRow?.isConnected).toBe(false);
+  });
+});

package/src/react/primitives/thread/ThreadMessages.tsx

@@ -6,6 +6,7 @@ import {
   useMemo,
 } from "react";
 import { RenderChildrenWithAccessor, useAuiState } from "@assistant-ui/store";
+import { useShallowSelector } from "@assistant-ui/store/internal";
 import { MessageByIndexProvider } from "../../providers/MessageByIndexProvider";
 import { MessageByIdProvider } from "../../providers/MessageByIdProvider";
 import type { MessageState } from "../../../store";
@@ -241,12 +242,14 @@ ThreadPrimitiveUnstable_MessageById.displayName =
 const ThreadPrimitiveMessagesInner: FC<{
   children: (value: { message: MessageState }) => ReactNode;
 }> = ({ children }) => {
-  const messagesLength = useAuiState((s) => s.thread.messages.length);
+  const messageIds = useAuiState(
+    useShallowSelector((s) => s.thread.messages.map((message) => message.id)),
+  );
 
   return useMemo(() => {
-    if (messagesLength === 0) return null;
-    return Array.from({ length: messagesLength }, (_, index) => (
-      <MessageByIndexProvider key={index} index={index}>
+    if (messageIds.length === 0) return null;
+    return messageIds.map((messageId, index) => (
+      <MessageByIndexProvider key={messageId} index={index}>
         <RenderChildrenWithAccessor
           getItemState={(aui) => aui.thread.message({ index }).getState()}
         >
@@ -260,7 +263,7 @@ const ThreadPrimitiveMessagesInner: FC<{
         </RenderChildrenWithAccessor>
       </MessageByIndexProvider>
     ));
-  }, [messagesLength, children]);
+  }, [messageIds, children]);
 };
 
 /**

package/src/react/providers/ReadonlyThreadProvider.test.tsx

@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { useAuiState } from "@assistant-ui/store";
+import { afterEach, describe, expect, it } from "vitest";
+import type { ThreadMessage } from "../../types/message";
+import { ReadonlyThreadProvider } from "./ReadonlyThreadProvider";
+
+const messages = (status: "running" | "complete"): readonly ThreadMessage[] => [
+  {
+    id: "nested-assistant",
+    createdAt: new Date(0),
+    role: "assistant",
+    content: [],
+    status:
+      status === "running"
+        ? { type: "running" }
+        : { type: "complete", reason: "unknown" },
+    metadata: {
+      unstable_state: {},
+      unstable_annotations: [],
+      unstable_data: [],
+      steps: [],
+      custom: {},
+    },
+  },
+];
+
+const ThreadStatus = () => {
+  const isRunning = useAuiState((s) => s.thread.isRunning);
+  return <output data-testid="thread-running">{String(isRunning)}</output>;
+};
+
+afterEach(cleanup);
+
+describe("ReadonlyThreadProvider", () => {
+  it("reports isRunning from the trailing assistant message", async () => {
+    const result = render(
+      <ReadonlyThreadProvider messages={messages("running")}>
+        <ThreadStatus />
+      </ReadonlyThreadProvider>,
+    );
+
+    expect(screen.getByTestId("thread-running").textContent).toBe("true");
+
+    result.rerender(
+      <ReadonlyThreadProvider messages={messages("complete")}>
+        <ThreadStatus />
+      </ReadonlyThreadProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("thread-running").textContent).toBe("false");
+    });
+  });
+});

package/src/react/runtimes/RemoteThreadListHookInstanceManager.layout.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+
+import { act, render } from "@testing-library/react";
+import { StrictMode, useLayoutEffect, useState, type ReactNode } from "react";
+import { expect, it } from "vitest";
+import { makeAdapter } from "../../tests/remote-thread-list-test-helpers";
+import type { ThreadMessage } from "../../types/message";
+import { AssistantRuntimeProvider } from "../AssistantRuntimeProvider";
+import { useExternalStoreRuntime } from "./useExternalStoreRuntime";
+import { useRemoteThreadListRuntime } from "./useRemoteThreadListRuntime";
+
+const EMPTY_MESSAGES: readonly ThreadMessage[] = [];
+
+const renderCounterThread = async (wrap: (app: ReactNode) => ReactNode) => {
+  const adapter = makeAdapter();
+  let bump: (() => void) | undefined;
+  let count: number | undefined;
+  const bumpOnLayout = () => bump!();
+
+  const LayoutProbe = ({ onLayout }: { onLayout: () => void }) => {
+    useLayoutEffect(() => {
+      onLayout();
+    }, [onLayout]);
+    return null;
+  };
+  const App = () => {
+    const runtime = useRemoteThreadListRuntime({
+      adapter,
+      runtimeHook: function useCounterThreadRuntime() {
+        const [value, setValue] = useState(0);
+        bump = () => setValue((current) => current + 1);
+        count = value;
+        return useExternalStoreRuntime<ThreadMessage>({
+          messages: EMPTY_MESSAGES,
+          onNew: async () => {},
+        });
+      },
+    });
+    return (
+      <AssistantRuntimeProvider runtime={runtime}>
+        <LayoutProbe onLayout={bumpOnLayout} />
+      </AssistantRuntimeProvider>
+    );
+  };
+
+  await act(async () => {
+    render(wrap(<App />));
+  });
+
+  return count;
+};
+
+it("lets a descendant layout effect update a hosted thread on the mount commit", async () => {
+  expect(await renderCounterThread((app) => app)).toBe(1);
+});
+
+it("keeps the hosted thread committed through StrictMode's effect replay", async () => {
+  const count = await renderCounterThread((app) => (
+    <StrictMode>{app}</StrictMode>
+  ));
+  expect(count).toBe(2);
+});

package/src/react/runtimes/RemoteThreadListHookInstanceManager.retry.test.tsx

@@ -7,7 +7,7 @@ import { useExternalStoreRuntime } from "./useExternalStoreRuntime";
 import { useLocalRuntime } from "./useLocalRuntime";
 import { useRemoteThreadListRuntime } from "./useRemoteThreadListRuntime";
 import type { AssistantRuntime } from "../../runtime/api/assistant-runtime";
-import type { AppendMessage } from "../../types/message";
+import type { AppendMessage, ThreadMessage } from "../../types/message";
 import { makeAdapter } from "../../tests/remote-thread-list-test-helpers";
 
 const userMessage = (text: string): AppendMessage => ({
@@ -109,7 +109,7 @@ describe("RemoteThreadListHookInstanceManager initialization retry", () => {
   it("retries a rejected initialization for external-store runtimes", async () => {
     const onNew = vi.fn(async () => {});
     await testInitializationRetry(
-      () => useExternalStoreRuntime({ messages: [], onNew }),
+      () => useExternalStoreRuntime<ThreadMessage>({ messages: [], onNew }),
       onNew,
     );
   });

package/src/react/runtimes/RemoteThreadListHookInstanceManager.test.tsx

@@ -4,6 +4,13 @@ import { RemoteThreadListHookInstanceManager } from "./RemoteThreadListHookInsta
 import { ExternalStoreThreadRuntimeCore } from "../../runtimes/external-store/external-store-thread-runtime-core";
 import type { ExternalStoreAdapter } from "../../runtimes/external-store/external-store-adapter";
 import type { ModelContextProvider } from "../../model-context/types";
+import type { ThreadRuntimeCore } from "../../runtime/interfaces/thread-runtime-core";
+
+const createExternalStoreRuntime = () =>
+  new ExternalStoreThreadRuntimeCore(
+    { getModelContext: () => ({}) } satisfies ModelContextProvider,
+    { messages: [], onNew: async () => {} } satisfies ExternalStoreAdapter,
+  );
 
 describe("RemoteThreadListHookInstanceManager", () => {
   it("rejects a pending start when the thread runtime is stopped", async () => {
@@ -97,7 +104,7 @@ describe("RemoteThreadListHookInstanceManager.__internal_restartThreadRuntime",
     instances: Map<
       string,
       {
-        runtime?: unknown;
+        runtime?: ThreadRuntimeCore;
         publishedGeneration?: number;
         generation: number;
       }
@@ -161,7 +168,7 @@ describe("RemoteThreadListHookInstanceManager.__internal_restartThreadRuntime",
   const publish = (
     manager: RemoteThreadListHookInstanceManager,
     id: string,
-    runtime: unknown,
+    runtime: ThreadRuntimeCore,
     options?: { generation?: number },
   ) => {
     const instance = internalsOf(manager).instances.get(id)!;
@@ -173,24 +180,24 @@ describe("RemoteThreadListHookInstanceManager.__internal_restartThreadRuntime",
   it("does not settle with the pre-restart runtime; only the incoming binder's publication resolves it", async () => {
     const manager = makeManager();
     start(manager, "thread-1");
-    publish(manager, "thread-1", { tag: "pre-reload-runtime" });
+    const preReloadRuntime = createExternalStoreRuntime();
+    const postReloadRuntime = createExternalStoreRuntime();
+    publish(manager, "thread-1", preReloadRuntime);
 
     let settledWith = "NOT_SETTLED";
-    manager.__internal_restartThreadRuntime("thread-1").then((r) => {
-      settledWith = (r as { tag: string }).tag;
+    manager.__internal_restartThreadRuntime("thread-1").then((runtime) => {
+      settledWith = runtime === postReloadRuntime ? "post-reload-runtime" : "";
     });
 
     // the outgoing runtime rides across the restart (stays readable)…
-    expect(manager.getThreadRuntimeCore("thread-1")).toEqual({
-      tag: "pre-reload-runtime",
-    });
+    expect(manager.getThreadRuntimeCore("thread-1")).toBe(preReloadRuntime);
     // …but must not count as attached
     await Promise.resolve();
     await Promise.resolve();
     await Promise.resolve();
     expect(settledWith).toBe("NOT_SETTLED");
 
-    publish(manager, "thread-1", { tag: "post-reload-runtime" });
+    publish(manager, "thread-1", postReloadRuntime);
     await Promise.resolve();
     expect(settledWith).toBe("post-reload-runtime");
   });
@@ -198,19 +205,20 @@ describe("RemoteThreadListHookInstanceManager.__internal_restartThreadRuntime",
   it("keeps the outgoing runtime readable while the restart promise is pending", () => {
     const manager = makeManager();
     start(manager, "thread-1");
-    publish(manager, "thread-1", { tag: "pre-reload-runtime" });
+    const preReloadRuntime = createExternalStoreRuntime();
+    publish(manager, "thread-1", preReloadRuntime);
 
     restart(manager, "thread-1");
 
-    expect(manager.getThreadRuntimeCore("thread-1")).toEqual({
-      tag: "pre-reload-runtime",
-    });
+    expect(manager.getThreadRuntimeCore("thread-1")).toBe(preReloadRuntime);
   });
 
   it("a stale-generation publication does not resolve the restart promise", async () => {
     const manager = makeManager();
     start(manager, "thread-1");
-    publish(manager, "thread-1", { tag: "pre-reload-runtime" });
+    const preReloadRuntime = createExternalStoreRuntime();
+    const staleRuntime = createExternalStoreRuntime();
+    publish(manager, "thread-1", preReloadRuntime);
 
     let settled = false;
     manager.__internal_restartThreadRuntime("thread-1").then(() => {
@@ -221,12 +229,7 @@ describe("RemoteThreadListHookInstanceManager.__internal_restartThreadRuntime",
     // outerSubscribe callback) must not count as the new attachment
     const staleGeneration =
       internalsOf(manager).instances.get("thread-1")!.generation - 1;
-    publish(
-      manager,
-      "thread-1",
-      { tag: "stale-publication" },
-      { generation: staleGeneration },
-    );
+    publish(manager, "thread-1", staleRuntime, { generation: staleGeneration });
 
     await Promise.resolve();
     await Promise.resolve();

package/src/react/runtimes/RemoteThreadListHookInstanceManager.title.test.tsx

@@ -8,7 +8,9 @@ import { useExternalStoreRuntime } from "./useExternalStoreRuntime";
 import { useLocalRuntime } from "./useLocalRuntime";
 import { useRemoteThreadListRuntime } from "./useRemoteThreadListRuntime";
 import type { AssistantRuntime } from "../../runtime/api/assistant-runtime";
-import type { AppendMessage, ThreadMessageLike } from "../../types/message";
+import type { AppendMessage } from "../../types/message";
+import type { ThreadMessageLike } from "../../runtime/utils/thread-message-like";
+import type { RemoteThreadListAdapter } from "../../runtimes/remote-thread-list/types";
 import {
   deferred,
   makeAdapter,
@@ -41,7 +43,9 @@ describe("RemoteThreadListHookInstanceManager title generation", () => {
       remoteId: string;
       externalId: string;
     }>();
-    const generateTitle = vi.fn(async () => new ReadableStream());
+    const generateTitle = vi.fn<RemoteThreadListAdapter["generateTitle"]>(
+      async () => new ReadableStream(),
+    );
     const adapter = makeAdapter({
       initialize: vi.fn(() => initialization.promise),
       generateTitle,
@@ -95,7 +99,9 @@ describe("RemoteThreadListHookInstanceManager title generation", () => {
       remoteId: string;
       externalId: string;
     }>();
-    const generateTitle = vi.fn(async () => new ReadableStream());
+    const generateTitle = vi.fn<RemoteThreadListAdapter["generateTitle"]>(
+      async () => new ReadableStream(),
+    );
     const adapter = makeAdapter({
       initialize: vi.fn(() => initialization.promise),
       generateTitle,
@@ -136,10 +142,9 @@ describe("RemoteThreadListHookInstanceManager title generation", () => {
     await waitFor(() => {
       expect(generateTitle).toHaveBeenCalledTimes(1);
     });
-    const [, titledMessages] = generateTitle.mock.calls[0] as [
-      string,
-      readonly { role: string }[],
-    ];
+    const titleCall = generateTitle.mock.calls[0];
+    if (titleCall === undefined) throw new Error("Expected title generation");
+    const [, titledMessages] = titleCall;
     expect(titledMessages.map((message) => message.role)).toEqual(["user"]);
   });
 
@@ -149,7 +154,9 @@ describe("RemoteThreadListHookInstanceManager title generation", () => {
       externalId: string;
     }>();
     const run = deferred<{ content: { type: "text"; text: string }[] }>();
-    const generateTitle = vi.fn(async () => new ReadableStream());
+    const generateTitle = vi.fn<RemoteThreadListAdapter["generateTitle"]>(
+      async () => new ReadableStream(),
+    );
     const adapter = makeAdapter({
       initialize: vi.fn(() => initialization.promise),
       generateTitle,
@@ -193,17 +200,18 @@ describe("RemoteThreadListHookInstanceManager title generation", () => {
     await waitFor(() => {
       expect(generateTitle).toHaveBeenCalledTimes(1);
     });
-    const [, titledMessages] = generateTitle.mock.calls[0] as [
-      string,
-      readonly { role: string }[],
-    ];
+    const titleCall = generateTitle.mock.calls[0];
+    if (titleCall === undefined) throw new Error("Expected title generation");
+    const [, titledMessages] = titleCall;
     expect(titledMessages.map((message) => message.role)).toEqual([
       "assistant",
     ]);
   });
 
   it("waits for the first message when initialization resolves before the store lands it", async () => {
-    const generateTitle = vi.fn(async () => new ReadableStream());
+    const generateTitle = vi.fn<RemoteThreadListAdapter["generateTitle"]>(
+      async () => new ReadableStream(),
+    );
     const adapter = makeAdapter({ generateTitle });
     const store = {
       messages: [] as readonly ThreadMessageLike[],
@@ -262,10 +270,9 @@ describe("RemoteThreadListHookInstanceManager title generation", () => {
     await waitFor(() => {
       expect(generateTitle).toHaveBeenCalledTimes(1);
     });
-    const [, titledMessages] = generateTitle.mock.calls[0] as [
-      string,
-      readonly { role: string }[],
-    ];
+    const titleCall = generateTitle.mock.calls[0];
+    if (titleCall === undefined) throw new Error("Expected title generation");
+    const [, titledMessages] = titleCall;
     expect(titledMessages).toHaveLength(1);
     expect(titledMessages[0]).toMatchObject({ role: "user" });
   });

package/src/react/runtimes/RemoteThreadListHookInstanceManager.tsx

@@ -10,7 +10,7 @@ import {
   type ComponentType,
   Fragment,
 } from "react";
-import { useResources, withKey } from "@assistant-ui/tap";
+import { useResources, useTapHost, withKey } from "@assistant-ui/tap";
 import type { AssistantClient } from "@assistant-ui/store";
 import { ThreadListItemRuntimeProvider } from "../providers/ThreadListItemRuntimeProvider";
 import type {
@@ -329,30 +329,37 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
     });
   }
 
+  private _threadElements(
+    parentClient: AssistantClient,
+    { threads, hookEpoch }: HostSnapshot,
+    adapters: AdapterSnapshot,
+  ) {
+    const runtimeHook = this.runtimeHook;
+    return threads.map(({ id, generation, destroySignal }) => {
+      const threadAdapters = this.pendingThreadAdapters.has(id)
+        ? this.pendingThreadAdapters.get(id)!
+        : (adapters.threadAdapters.get(id) ?? adapters.defaultAdapters);
+      return withKey(
+        `${id}:${generation}:${hookEpoch}`,
+        RemoteThreadResource({
+          threadId: id,
+          generation,
+          parentList: this.parent,
+          runtimeHook,
+          parentClient,
+          adapters: threadAdapters,
+          publish: this._publish,
+          destroySignal,
+        }),
+      );
+    });
+  }
+
+  /** @deprecated Commits the hosted threads after descendant layout effects; render `__internal_Host` instead. */
   public __internal_useHost(parentClient: AssistantClient) {
-    const { threads, hookEpoch } = useSubscribable(this.hostStore);
+    const host = useSubscribable(this.hostStore);
     const adapters = useSubscribable(this.adapterStore);
-    const runtimeHook = this.runtimeHook;
-    return useResources(
-      threads.map(({ id, generation, destroySignal }) => {
-        const threadAdapters = this.pendingThreadAdapters.has(id)
-          ? this.pendingThreadAdapters.get(id)!
-          : (adapters.threadAdapters.get(id) ?? adapters.defaultAdapters);
-        return withKey(
-          `${id}:${generation}:${hookEpoch}`,
-          RemoteThreadResource({
-            threadId: id,
-            generation,
-            parentList: this.parent,
-            runtimeHook,
-            parentClient,
-            adapters: threadAdapters,
-            publish: this._publish,
-            destroySignal,
-          }),
-        );
-      }),
-    );
+    return useResources(this._threadElements(parentClient, host, adapters));
   }
 
   public __internal_RenderThreadRuntimes: FC<{
@@ -374,7 +381,15 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
   public __internal_Host: FC<{ parentClient: AssistantClient }> = ({
     parentClient,
   }) => {
-    this.__internal_useHost(parentClient);
+    const host = useSubscribable(this.hostStore);
+    const adapters = useSubscribable(this.adapterStore);
+    const elements = this._threadElements(parentClient, host, adapters);
+    const { effects } = useTapHost(function RemoteThreadResources() {
+      return useResources(elements);
+    });
+    // Descendant layout effects may already dispatch to the thread resources,
+    // and tap commits a hosted resource only when its host effects run.
+    useLayoutEffect(effects);
     return null;
   };
 

package/src/react/runtimes/RemoteThreadListThreadListRuntimeCore.tsx

@@ -58,6 +58,7 @@ import { useAui } from "@assistant-ui/store";
 import type { ModelContextProvider } from "../../model-context/types";
 import { RuntimeAdapterProvider } from "./RuntimeAdapterProvider";
 import { useStableRuntimeAdapters } from "./useRuntimeAdapters";
+import { invokeUserCallback } from "../../utils/invoke-user-callback";
 
 const threadNotFoundError = (threadIdOrRemoteId: string, action: string) =>
   new Error(`Thread "${threadIdOrRemoteId}" not found while ${action}.`);
@@ -573,7 +574,12 @@ export class RemoteThreadListThreadListRuntimeCore
     if (this._lastNotifiedThreadId === threadId) return;
     this._lastNotifiedThreadId = threadId;
     if (emit) {
-      this._options.onThreadIdChange?.(threadId);
+      invokeUserCallback(
+        "assistant-ui",
+        "onThreadIdChange",
+        this._options.onThreadIdChange,
+        threadId,
+      );
     }
   }