@copilotkit/vue 1.69.3 → 1.70.1

package/src/v2/hooks/__tests__/use-frontend-tool-webmcp.test.ts

@@ -0,0 +1,282 @@
+import { defineComponent, ref, watch } from "vue";
+import { screen, fireEvent, waitFor } from "@testing-library/vue";
+import { z } from "zod";
+import { describe, it, expect } from "vitest";
+import { useFrontendTool } from "../use-frontend-tool";
+import { useCopilotKit } from "../../providers/useCopilotKit";
+import type { VueFrontendTool } from "../../types";
+import type { CopilotKitCoreVue } from "../../lib/vue-core";
+import { renderWithCopilotKit } from "../../__tests__/utils/test-helpers";
+
+/**
+ * Component that captures the copilotkit core ref for test assertions.
+ */
+const CoreCapture = defineComponent({
+  props: {
+    onCore: {
+      type: Function as () => (core: CopilotKitCoreVue) => void,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { copilotkit } = useCopilotKit();
+    watch(
+      copilotkit,
+      (core) => {
+        if (core) {
+          props.onCore(core);
+        }
+      },
+      { immediate: true },
+    );
+    return {};
+  },
+  template: `<div />`,
+});
+
+describe("useFrontendTool webmcp flag", () => {
+  it("registers tool with webmcp: true on the core", async () => {
+    let coreRef: CopilotKitCoreVue | null = null;
+
+    const ToolComponent = defineComponent({
+      setup() {
+        const tool: VueFrontendTool<{ msg: string }> = {
+          name: "webmcpTool",
+          description: "A WebMCP-exposed tool",
+          webmcp: true,
+          parameters: z.object({ msg: z.string() }),
+          handler: async () => ({ result: "ok" }),
+        };
+        useFrontendTool(tool);
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    const Host = defineComponent({
+      components: { ToolComponent, CoreCapture },
+      setup() {
+        return {
+          setCore: (core: CopilotKitCoreVue) => {
+            coreRef = core;
+          },
+        };
+      },
+      template: `
+        <div>
+          <ToolComponent />
+          <CoreCapture :on-core="setCore" />
+        </div>
+      `,
+    });
+
+    const ui = renderWithCopilotKit({
+      children: Host,
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find((entry) => entry.name === "webmcpTool");
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toBe(true);
+    });
+
+    ui.unmount();
+  });
+
+  it("registers tool with webmcp annotations on the core", async () => {
+    let coreRef: CopilotKitCoreVue | null = null;
+
+    const ToolComponent = defineComponent({
+      setup() {
+        const tool: VueFrontendTool<{ msg: string }> = {
+          name: "annotatedTool",
+          description: "A WebMCP-exposed tool with annotations",
+          webmcp: { annotations: { readOnlyHint: true } },
+          parameters: z.object({ msg: z.string() }),
+          handler: async () => ({ result: "ok" }),
+        };
+        useFrontendTool(tool);
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    const Host = defineComponent({
+      components: { ToolComponent, CoreCapture },
+      setup() {
+        return {
+          setCore: (core: CopilotKitCoreVue) => {
+            coreRef = core;
+          },
+        };
+      },
+      template: `
+        <div>
+          <ToolComponent />
+          <CoreCapture :on-core="setCore" />
+        </div>
+      `,
+    });
+
+    const ui = renderWithCopilotKit({
+      children: Host,
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find(
+        (entry) => entry.name === "annotatedTool",
+      );
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toEqual({ annotations: { readOnlyHint: true } });
+    });
+
+    ui.unmount();
+  });
+
+  it("re-registers tool when the webmcp config changes", async () => {
+    let coreRef: CopilotKitCoreVue | null = null;
+
+    const ToolWithToggle = defineComponent({
+      setup() {
+        const readOnly = ref(false);
+
+        const tool: VueFrontendTool<{ data: string }> = {
+          name: "toggleWebmcpTool",
+          description: "A tool with a toggleable WebMCP config",
+          get webmcp() {
+            return { annotations: { readOnlyHint: readOnly.value } };
+          },
+          parameters: z.object({ data: z.string() }),
+          handler: async () => ({ ok: true }),
+        };
+        useFrontendTool(tool, [readOnly]);
+
+        return {
+          readOnly,
+          toggle: () => {
+            readOnly.value = !readOnly.value;
+          },
+        };
+      },
+      template: `
+        <button data-testid="toggle-btn" @click="toggle">
+          {{ readOnly ? "Read-write" : "Read-only" }}
+        </button>
+      `,
+    });
+
+    const Host = defineComponent({
+      components: { ToolWithToggle, CoreCapture },
+      setup() {
+        return {
+          setCore: (core: CopilotKitCoreVue) => {
+            coreRef = core;
+          },
+        };
+      },
+      template: `
+        <div>
+          <ToolWithToggle />
+          <CoreCapture :on-core="setCore" />
+        </div>
+      `,
+    });
+
+    const ui = renderWithCopilotKit({
+      children: Host,
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const tool = coreRef!.tools.find(
+        (entry) => entry.name === "toggleWebmcpTool",
+      );
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toEqual({ annotations: { readOnlyHint: false } });
+    });
+
+    await fireEvent.click(screen.getByTestId("toggle-btn"));
+
+    await waitFor(() => {
+      const tool = coreRef!.tools.find(
+        (entry) => entry.name === "toggleWebmcpTool",
+      );
+      expect(tool).toBeDefined();
+      expect(tool!.webmcp).toEqual({ annotations: { readOnlyHint: true } });
+    });
+
+    ui.unmount();
+  });
+
+  it("registers and cleans up agent-scoped webmcp tools on the core", async () => {
+    let coreRef: CopilotKitCoreVue | null = null;
+
+    const ToolComponent = defineComponent({
+      setup() {
+        useFrontendTool({
+          name: "scopedTool",
+          description: "A WebMCP tool scoped to alpha",
+          agentId: "alpha",
+          webmcp: { annotations: { readOnlyHint: true } },
+          handler: async () => ({ ok: true }),
+        });
+        useFrontendTool({
+          name: "scopedTool",
+          description: "A WebMCP tool scoped to beta",
+          agentId: "beta",
+          webmcp: true,
+          handler: async () => ({ ok: true }),
+        });
+        return {};
+      },
+      template: `<div />`,
+    });
+
+    const Host = defineComponent({
+      components: { ToolComponent, CoreCapture },
+      setup() {
+        return {
+          setCore: (core: CopilotKitCoreVue) => {
+            coreRef = core;
+          },
+        };
+      },
+      template: `
+        <div>
+          <ToolComponent />
+          <CoreCapture :on-core="setCore" />
+        </div>
+      `,
+    });
+
+    const ui = renderWithCopilotKit({
+      children: Host,
+    });
+
+    await waitFor(() => {
+      expect(coreRef).not.toBeNull();
+      const alphaTool = coreRef!.tools.find(
+        (entry) => entry.name === "scopedTool" && entry.agentId === "alpha",
+      );
+      expect(alphaTool).toBeDefined();
+      expect(alphaTool!.webmcp).toEqual({
+        annotations: { readOnlyHint: true },
+      });
+      const betaTool = coreRef!.tools.find(
+        (entry) => entry.name === "scopedTool" && entry.agentId === "beta",
+      );
+      expect(betaTool).toBeDefined();
+      expect(betaTool!.webmcp).toBe(true);
+    });
+
+    ui.unmount();
+
+    await waitFor(() => {
+      expect(
+        coreRef!.tools.filter((entry) => entry.name === "scopedTool").length,
+      ).toBe(0);
+    });
+  });
+});

package/src/v2/hooks/__tests__/use-threads.test.ts

@@ -44,6 +44,8 @@ const mockUseCopilotKit = useCopilotKit as ReturnType<typeof vi.fn>;
 const threadMocks = vi.hoisted(() => ({
   sockets: [] as any[],
   dispatchedContexts: [] as Array<ThreadState["context"]>,
+  /** Every environment `ɵcreateThreadStore` was constructed with. */
+  storeEnvironments: [] as Array<{ fetch?: unknown }>,
 }));
 
 function compareThreadsByActivity(left: ThreadRecord, right: ThreadRecord) {
@@ -344,7 +346,10 @@ vi.mock("@copilotkit/core", () => {
       Connected: "connected",
       Error: "error",
     },
-    ɵcreateThreadStore: () => new MockThreadStore(),
+    ɵcreateThreadStore: (environment: { fetch?: unknown }) => {
+      threadMocks.storeEnvironments.push(environment);
+      return new MockThreadStore();
+    },
     ɵselectThreads: select((state) => state.threads),
     ɵselectThreadsIsLoading: select((state) => state.isLoading),
     ɵselectThreadsError: select((state) => state.error),
@@ -358,6 +363,10 @@ vi.mock("@copilotkit/core", () => {
 const fetchMock = vi.fn();
 globalThis.fetch = fetchMock;
 
+const runtimeFetchMock = vi.fn((...args: unknown[]) =>
+  (fetchMock as (...a: unknown[]) => unknown)(...args),
+);
+
 const { CopilotKitCoreRuntimeConnectionStatus } =
   await import("@copilotkit/core");
 
@@ -391,6 +400,7 @@ type MockCopilotKit = {
   threadEndpoints: ThreadEndpointRuntimeInfo | undefined;
   registerThreadStore: ReturnType<typeof vi.fn>;
   unregisterThreadStore: ReturnType<typeof vi.fn>;
+  ɵruntimeFetch: typeof fetch;
 };
 
 function setupCopilotKit(
@@ -410,6 +420,7 @@ function setupCopilotKit(
     threadEndpoints: supportedThreadEndpoints,
     registerThreadStore: vi.fn(),
     unregisterThreadStore: vi.fn(),
+    ɵruntimeFetch: runtimeFetchMock as unknown as typeof fetch,
     ...overrides,
   });
   mockUseCopilotKit.mockReturnValue({ copilotkit });
@@ -487,10 +498,22 @@ describe("useThreads", () => {
   beforeEach(() => {
     threadMocks.sockets.splice(0);
     threadMocks.dispatchedContexts.splice(0);
+    threadMocks.storeEnvironments.splice(0);
     fetchMock.mockReset();
     setupCopilotKit();
   });
 
+  it("builds the thread store with the core's instrumented fetch", () => {
+    const copilotkit = setupCopilotKit();
+    mountHook();
+
+    expect(threadMocks.storeEnvironments).toHaveLength(1);
+    expect(threadMocks.storeEnvironments[0]!.fetch).toBe(
+      copilotkit.value.ɵruntimeFetch,
+    );
+    expect(threadMocks.storeEnvironments[0]!.fetch).not.toBe(globalThis.fetch);
+  });
+
   it("fetches threads and subscribes to the user metadata channel", async () => {
     fetchMock
       .mockReturnValueOnce(

package/src/v2/hooks/use-frontend-tool.ts

@@ -32,6 +32,9 @@ export function useFrontendTool<T extends Record<string, unknown>>(
     [
       () => tool.name,
       () => tool.available,
+      // webmcp is commonly an object literal, so compare it by value to avoid
+      // re-registering on identity churn while still reacting to real changes.
+      () => JSON.stringify(tool.webmcp ?? null),
       () => extraDeps.length,
       ...extraDeps,
     ],

package/src/v2/hooks/use-threads.ts

@@ -90,7 +90,7 @@ function bindThreadStoreSelector<T>(
 export function useThreads(input: UseThreadsInput): UseThreadsResult {
   const { copilotkit } = useCopilotKit();
   const store = ɵcreateThreadStore({
-    fetch: globalThis.fetch,
+    fetch: copilotkit.value.ɵruntimeFetch,
   });
 
   const resolvedAgentId = computed(() => toValue(input.agentId));

package/src/v2/providers/CopilotKitProvider.vue

@@ -16,7 +16,10 @@ import type {
   FrontendTool,
 } from "@copilotkit/core";
 import { schemaToJsonSchema, shouldEnableInspector } from "@copilotkit/shared";
-import type { RuntimeLicenseStatus } from "@copilotkit/shared";
+import type {
+  RuntimeEntitlementResponse,
+  RuntimeLicenseStatus,
+} from "@copilotkit/shared";
 import { zodToJsonSchema } from "zod-to-json-schema";
 import { CopilotKitCoreVue } from "../lib/vue-core";
 import { createA2UIMessageRenderer } from "../components/A2UIMessageRenderer";
@@ -48,7 +51,6 @@ import type {
   SandboxFunction,
   VueActivityMessageRenderer,
   VueFrontendTool,
-  VueHumanInTheLoop,
   VueToolCallRenderer,
 } from "../types";
 
@@ -294,6 +296,10 @@ const allRenderCustomMessages = computed(
 const runtimeA2UIEnabled = ref(false);
 const runtimeOpenGenerativeUIEnabled = ref(false);
 const runtimeLicenseStatus = ref<RuntimeLicenseStatus | undefined>(undefined);
+const runtimeEntitlements = ref<RuntimeEntitlementResponse | undefined>(
+  undefined,
+);
+const runtimeEntitlementRetryPending = ref(false);
 const openGenerativeUIActive = computed(
   () => runtimeOpenGenerativeUIEnabled.value || !!props.openGenerativeUI,
 );
@@ -460,15 +466,14 @@ watch(
         runtimeA2UIEnabled.value = core.a2uiEnabled;
         runtimeOpenGenerativeUIEnabled.value = core.openGenerativeUIEnabled;
         runtimeLicenseStatus.value = core.licenseStatus;
+        runtimeEntitlements.value = core.runtimeEntitlements;
+        runtimeEntitlementRetryPending.value =
+          core.runtimeEntitlementRetryPending;
         triggerRef(copilotkit);
       },
     });
     const sub5 = core.subscribe({
-      onError: (event: {
-        error: Error;
-        code: CopilotKitCoreErrorCode;
-        context: Record<string, any>;
-      }) => {
+      onError: (event) => {
         void props.onError?.({
           error: event.error,
           code: event.code,
@@ -557,6 +562,9 @@ onMounted(() => {
   runtimeOpenGenerativeUIEnabled.value =
     copilotkit.value.openGenerativeUIEnabled;
   runtimeLicenseStatus.value = copilotkit.value.licenseStatus;
+  runtimeEntitlements.value = copilotkit.value.runtimeEntitlements;
+  runtimeEntitlementRetryPending.value =
+    copilotkit.value.runtimeEntitlementRetryPending;
   didMountRef.value = true;
 });
 
@@ -633,23 +641,70 @@ provide(CopilotKitKey, {
 });
 provide(SandboxFunctionsKey, sandboxFunctions);
 
-// License context — driven by server-reported `/info` license status.
-const licenseContextValue = computed<LicenseContextValue>(() =>
-  createLicenseContextValue(runtimeLicenseStatus.value),
+// License context — driven by structured and legacy Runtime authority.
+const retryableRuntimeEntitlementFailure = computed(
+  () =>
+    runtimeEntitlements.value?.status !== "ready" &&
+    runtimeEntitlements.value?.error.retryable === true,
+);
+const hasNonReadyRuntimeEntitlement = computed(
+  () =>
+    runtimeEntitlements.value !== undefined &&
+    runtimeEntitlements.value.status !== "ready",
+);
+const hasLegacyRuntimeEntitlementFallback = computed(
+  () =>
+    runtimeLicenseStatus.value === "valid" ||
+    runtimeLicenseStatus.value === "expiring",
+);
+const runtimeEntitlementRetryInProgress = computed(
+  () =>
+    retryableRuntimeEntitlementFailure.value &&
+    runtimeEntitlementRetryPending.value &&
+    !hasLegacyRuntimeEntitlementFallback.value,
 );
+const runtimeEntitlementFailureSettled = computed(
+  () =>
+    hasNonReadyRuntimeEntitlement.value &&
+    !runtimeEntitlementRetryInProgress.value &&
+    !hasLegacyRuntimeEntitlementFallback.value,
+);
+const licenseContextValue = computed<LicenseContextValue>(() => {
+  const runtimeLicenseContext = createLicenseContextValue(
+    runtimeEntitlementRetryInProgress.value
+      ? undefined
+      : runtimeLicenseStatus.value,
+    runtimeEntitlements.value,
+  );
+  if (!runtimeEntitlementFailureSettled.value) {
+    return runtimeLicenseContext;
+  }
+
+  return {
+    ...runtimeLicenseContext,
+    checkFeature: () => false,
+    getLimit: () => null,
+  };
+});
 provide(LicenseContextKey, licenseContextValue);
 
+const runtimeLicenseWarningStatus = computed(() =>
+  runtimeEntitlementRetryInProgress.value
+    ? undefined
+    : (licenseContextValue.value.status ?? undefined),
+);
 const showNoLicenseBanner = computed(
-  () => runtimeLicenseStatus.value === "none" && !resolvedPublicKey.value,
+  () =>
+    runtimeLicenseWarningStatus.value === "none" && !resolvedPublicKey.value,
 );
 const showExpiredBanner = computed(
-  () => runtimeLicenseStatus.value === "expired",
+  () => runtimeLicenseWarningStatus.value === "expired",
 );
 const showInvalidBanner = computed(
-  () => runtimeLicenseStatus.value === "invalid",
+  () => runtimeLicenseWarningStatus.value === "invalid",
 );
 const showExpiringBanner = computed(
-  () => runtimeLicenseStatus.value === "expiring",
+  () => runtimeLicenseWarningStatus.value === "expiring",
 );
 </script>