@assistant-ui/react-mcp 0.1.3 → 0.1.5

package/src/resources/McpManagerResource.test.ts

@@ -1,5 +1,6 @@
-import { createTapRoot, useResource } from "@assistant-ui/tap";
+import { createTapRoot, resource, useResource } from "@assistant-ui/tap";
 import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
 import { defineConnector } from "../connector";
 import type { MCPConnector } from "../mcp-scope";
 import { assertUniqueServerIds } from "../utils/serverId";
@@ -208,3 +209,109 @@ describe("McpManagerResource storage failures", () => {
     }
   });
 });
+
+describe("McpManagerResource storage ordering", () => {
+  it("persists custom server updates in invocation order", async () => {
+    let resolveFirstSave: (() => void) | undefined;
+    const firstSave = new Promise<void>((resolve) => {
+      resolveFirstSave = resolve;
+    });
+    let blockNextSave = false;
+    const persistedSnapshots: string[][] = [];
+    const saveCustomServers = vi.fn(async (records: { name: string }[]) => {
+      persistedSnapshots.push(records.map((record) => record.name));
+      if (blockNextSave) {
+        blockNextSave = false;
+        await firstSave;
+      }
+    });
+    const root = mount(
+      [],
+      McpCustomStorage({
+        loadCustomServers: vi.fn(async () => []),
+        saveCustomServers,
+        loadAuthState: vi.fn(async () => null),
+        saveAuthState: vi.fn(async () => {}),
+        clearAuthState: vi.fn(async () => {}),
+      }),
+    );
+
+    try {
+      await vi.waitFor(() =>
+        expect(root.getValue().getState().isHydrated).toBe(true),
+      );
+      await vi.waitFor(() => expect(saveCustomServers).toHaveBeenCalled());
+      saveCustomServers.mockClear();
+      persistedSnapshots.length = 0;
+      blockNextSave = true;
+
+      await root.getValue().addCustomServer({
+        name: "Docs",
+        url: "https://example.com/docs/mcp",
+        auth: { type: "none" },
+      });
+      await vi.waitFor(() =>
+        expect(saveCustomServers).toHaveBeenCalledTimes(1),
+      );
+
+      await root.getValue().addCustomServer({
+        name: "Linear",
+        url: "https://example.com/linear/mcp",
+        auth: { type: "none" },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(saveCustomServers).toHaveBeenCalledTimes(1);
+
+      resolveFirstSave?.();
+      await vi.waitFor(() =>
+        expect(saveCustomServers).toHaveBeenCalledTimes(2),
+      );
+      expect(persistedSnapshots).toEqual([["Docs"], ["Docs", "Linear"]]);
+    } finally {
+      resolveFirstSave?.();
+      root.unmount();
+    }
+  });
+
+  it("does not persist unchanged servers when inline storage rerenders", async () => {
+    const saveCustomServers = vi.fn(async () => {});
+    let rerender = () => {};
+    const DynamicManager = resource(function useDynamicManager() {
+      const [, setVersion] = useState(0);
+      rerender = () => setVersion((version) => version + 1);
+
+      return useResource(
+        McpManagerResource({
+          connectors: [],
+          storage: McpCustomStorage({
+            loadCustomServers: vi.fn(async () => []),
+            saveCustomServers,
+            loadAuthState: vi.fn(async () => null),
+            saveAuthState: vi.fn(async () => {}),
+            clearAuthState: vi.fn(async () => {}),
+          }),
+          autoConnect: false,
+        }),
+      );
+    });
+    const root = createTapRoot(function Root() {
+      return useResource(DynamicManager());
+    });
+
+    try {
+      await vi.waitFor(() =>
+        expect(root.getValue().getState().isHydrated).toBe(true),
+      );
+      await vi.waitFor(() => expect(saveCustomServers).toHaveBeenCalled());
+      saveCustomServers.mockClear();
+
+      rerender();
+
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(saveCustomServers).not.toHaveBeenCalled();
+    } finally {
+      root.unmount();
+    }
+  });
+});

package/src/resources/McpManagerResource.ts

@@ -10,7 +10,7 @@ import { ModelContext } from "@assistant-ui/core/store";
 import type { Tool } from "assistant-stream";
 import { McpServerResource } from "./McpServerResource";
 import { McpLocalStorage } from "./storage/McpLocalStorage";
-import type { MCPStorageElement } from "./storage/types";
+import type { MCPStorage, MCPStorageElement } from "./storage/types";
 import { assertUniqueServerIds } from "../utils/serverId";
 import type {
   MCPAuthConfig,
@@ -49,6 +49,17 @@ const reportCustomStorageFailure = (
   );
 };
 
+const persistCustomServers = async (
+  storage: MCPStorage,
+  records: MCPCustomServerRecord[],
+) => {
+  try {
+    await storage.saveCustomServers(records);
+  } catch (error) {
+    reportCustomStorageFailure("save", error);
+  }
+};
+
 const useMcpManagerResource = (
   props: McpManagerResourceProps,
 ): ClientOutput<"mcp"> => {
@@ -66,6 +77,12 @@ const useMcpManagerResource = (
   const [isHydrated, setIsHydrated] = useState(false);
 
   const hydratedRef = useRef(false);
+  const storageRef = useRef(storage);
+  const persistenceQueueRef = useRef(Promise.resolve());
+
+  useEffect(() => {
+    storageRef.current = storage;
+  }, [storage]);
 
   const hydrate = useEffectEvent(async (signal: { cancelled: boolean }) => {
     const markHydrated = () => {
@@ -106,19 +123,12 @@ const useMcpManagerResource = (
     };
   }, []);
 
-  const persistCustomServers = useEffectEvent(
-    async (records: MCPCustomServerRecord[]) => {
-      if (!hydratedRef.current) return;
-      try {
-        await storage.saveCustomServers(records);
-      } catch (error) {
-        reportCustomStorageFailure("save", error);
-      }
-    },
-  );
-
   useEffect(() => {
-    void persistCustomServers(customServers);
+    if (!hydratedRef.current) return;
+    const targetStorage = storageRef.current;
+    persistenceQueueRef.current = persistenceQueueRef.current.then(() =>
+      persistCustomServers(targetStorage, customServers),
+    );
   }, [customServers]);
 
   const serverElements = useMemo(() => {

package/src/resources/McpServerResource.test.ts

@@ -150,6 +150,9 @@ const mount = (
     connectionTimeout?: number | undefined;
     cache?: { readonly defaultTtlMs?: number } | undefined;
     elicitation?: boolean | undefined;
+    kind?: "connector" | "custom" | undefined;
+    storage?: MCPStorage | undefined;
+    onRemove?: (() => Promise<void>) | undefined;
   },
   onMount?: (server: ClientOutput<"mcpServer">) => void,
 ) => {
@@ -160,11 +163,11 @@ const mount = (
     const server = useResource(
       McpServerResource({
         id: "docs",
-        kind: "connector",
+        kind: props?.kind ?? "connector",
         name: "Docs",
         url: "https://example.com/mcp",
         auth: props?.auth ?? { type: "none" },
-        storage: createStorage(),
+        storage: props?.storage ?? createStorage(),
         redirectUri: "https://example.com/callback",
         autoConnect: false,
         connectionTimeout,
@@ -172,7 +175,7 @@ const mount = (
         ...(props?.elicitation !== undefined
           ? { elicitation: props.elicitation }
           : {}),
-        onRemove: vi.fn(async () => {}),
+        onRemove: props?.onRemove ?? vi.fn(async () => {}),
       }),
     );
     useEffect(() => {
@@ -1200,6 +1203,37 @@ describe("McpServerResource tools listChanged", () => {
   });
 });
 
+describe("McpServerResource removal", () => {
+  beforeEach(() => {
+    resetMocks();
+  });
+
+  it("exposes auth storage failures and preserves the server", async () => {
+    const error = new Error("storage unavailable");
+    const storage = createStorage();
+    vi.mocked(storage.clearAuthState).mockRejectedValueOnce(error);
+    const onRemove = vi.fn(async () => {});
+    const root = mount({ kind: "custom", storage, onRemove });
+
+    try {
+      await expect(root.getValue().remove()).rejects.toBe(error);
+      await waitForResourceUpdate(
+        () =>
+          root.getValue().getState().lastError?.message ===
+          "storage unavailable",
+      );
+
+      expect(root.getValue().getState()).toMatchObject({
+        connectionState: "disconnected",
+        lastError: { message: "storage unavailable" },
+      });
+      expect(onRemove).not.toHaveBeenCalled();
+    } finally {
+      root.unmount();
+    }
+  });
+});
+
 describe("McpServerResource resource methods", () => {
   beforeEach(() => {
     mocks.clients.length = 0;

package/src/resources/McpServerResource.ts

@@ -539,8 +539,15 @@ const useMcpServerResource = (
     disconnect: doDisconnect,
     remove: async () => {
       await doDisconnect();
-      await props.storage.clearAuthState(props.id);
-      await props.onRemove();
+      try {
+        await props.storage.clearAuthState(props.id);
+        await props.onRemove();
+      } catch (err) {
+        setLastError({
+          message: err instanceof Error ? err.message : String(err),
+        });
+        throw err;
+      }
     },
     callTool: async (name, args) => {
       const client = clientRef.current;

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 AgentbaseAI Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.