@copilotkit/vue 2.0.0-rc.20 → 2.0.0-rc.21

package/src/v2/providers/__tests__/CopilotChatConfigurationProvider.test.ts

@@ -119,6 +119,23 @@ describe("CopilotChatConfigurationProvider", () => {
     expect(wrapper.find("[data-testid=placeholder]").text()).toBe("Inner");
   });
 
+  it("a nested non-explicit seed yields to the parent's thread, like React", () => {
+    const Display = makeDisplay();
+    const wrapper = mount(CopilotChatConfigurationProvider, {
+      props: { threadId: "outer-thread" },
+      slots: {
+        default: () =>
+          h(
+            CopilotChatConfigurationProvider,
+            { threadId: "inner-seed", hasExplicitThreadId: false },
+            { default: () => h(Display) },
+          ),
+      },
+    });
+
+    expect(wrapper.find("[data-testid=thread]").text()).toBe("outer-thread");
+  });
+
   it("creates and mutates modal state when isModalDefaultOpen is provided", async () => {
     const Toggle = defineComponent({
       setup() {
@@ -398,9 +415,12 @@ describe("CopilotChatConfiguration drawer-awareness", () => {
 });
 
 describe("CopilotChatConfiguration modal-setter presence contract", () => {
-  it("bare provider (no isModalDefaultOpen, no parent) exposes setModalOpen as undefined", () => {
+  it("bare provider (no isModalDefaultOpen, no parent) owns a modal that starts open, like React", async () => {
     const cfg = harness({ threadId: "thread-1" });
-    expect(cfg().setModalOpen).toBeUndefined();
+    expect(cfg().isModalOpen).toBe(true);
+    cfg().setModalOpen?.(false);
+    await nextTick();
+    expect(cfg().isModalOpen).toBe(false);
   });
 
   it("provider with isModalDefaultOpen exposes a working setModalOpen", async () => {

package/src/v2/providers/__tests__/CopilotKitProvider.a2ui.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { defineComponent, h, ref } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
 import { mount } from "@vue/test-utils";
 import { z } from "zod-v3";
 import { Catalog } from "@a2ui/web_core/v0_9";
@@ -125,4 +125,22 @@ describe("CopilotKitProvider a2ui catalog context", () => {
     expect(value).toContain("  - FlightCard:\n    {");
     expect(value).toContain('"airline"');
   });
+
+  it("registers the catalog's components with core for the Inspector", () => {
+    const { observedCore } = mountProvider({
+      a2ui: { catalog: makeCustomCatalog() },
+    });
+    expect(
+      observedCore.value?.catalogComponents.map((component) => component.name),
+    ).toEqual(["FlightCard"]);
+  });
+
+  it("stops advertising a component the Inspector disables", async () => {
+    const { observedCore } = mountProvider({
+      a2ui: { catalog: makeCustomCatalog() },
+    });
+    observedCore.value?.setCatalogComponentEnabled("FlightCard", false);
+    await nextTick();
+    expect(capabilitiesValue(observedCore.value)).not.toContain("FlightCard");
+  });
 });

package/src/v2/providers/__tests__/CopilotKitProvider.config.test.ts

@@ -0,0 +1,124 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createSSRApp } from "vue";
+import { mount } from "@vue/test-utils";
+import { renderToString } from "vue/server-renderer";
+import CopilotKitProvider from "../CopilotKitProvider.vue";
+
+const RUNTIME_URL = "https://runtime.example/api/copilotkit";
+const SHAPE_WARNING =
+  "renderToolCalls must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.";
+
+function stubInfoFetch() {
+  const fetchMock = vi.fn(async () => {
+    throw new Error("network failure");
+  });
+  vi.stubGlobal("fetch", fetchMock);
+  return () =>
+    fetchMock.mock.calls.filter(([url]) => String(url).includes("/info"));
+}
+
+/** A tool call renderer shape: only `name` and `agentId` matter here. */
+function renderer(name: string) {
+  return { name, args: undefined, render: () => null };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+describe("CopilotKitProvider (Vue) runtime connection", () => {
+  it("does not fetch /info during server-side rendering", async () => {
+    const infoCalls = stubInfoFetch();
+    await renderToString(
+      createSSRApp(CopilotKitProvider, { runtimeUrl: RUNTIME_URL }),
+    );
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(infoCalls()).toHaveLength(0);
+  });
+
+  it("fetches /info once the provider mounts", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const infoCalls = stubInfoFetch();
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL },
+    });
+    await vi.waitFor(() => expect(infoCalls().length).toBeGreaterThan(0));
+    wrapper.unmount();
+  });
+});
+
+describe("CopilotKitProvider (Vue) errors", () => {
+  it("logs core errors when no onError is given", async () => {
+    stubInfoFetch();
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL },
+    });
+    await vi.waitFor(() =>
+      expect(error).toHaveBeenCalledWith(
+        "[CopilotKit] Error (runtime_info_fetch_failed):",
+        expect.any(Error),
+        expect.anything(),
+      ),
+    );
+    wrapper.unmount();
+  });
+
+  it("reports an invalid defaultThrottleMs once, from core", () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL, defaultThrottleMs: -1 },
+    });
+    const providerCopies = error.mock.calls.filter(
+      ([message]) =>
+        typeof message === "string" &&
+        message.startsWith("CopilotKitProvider: defaultThrottleMs"),
+    );
+    const coreReports = error.mock.calls.filter(
+      ([message]) =>
+        typeof message === "string" &&
+        message.startsWith("CopilotKitCore.setDefaultThrottleMs"),
+    );
+    expect(providerCopies).toEqual([]);
+    expect(coreReports.length).toBeGreaterThan(0);
+    wrapper.unmount();
+  });
+});
+
+describe("CopilotKitProvider (Vue) renderToolCalls warning", () => {
+  it("warns when the renderToolCalls shape changes", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL, renderToolCalls: [renderer("a")] },
+    });
+    await wrapper.setProps({ renderToolCalls: [renderer("b")] });
+    expect(error).toHaveBeenCalledWith(SHAPE_WARNING);
+    wrapper.unmount();
+  });
+
+  it("does not warn for a new array with the same tools", async () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, {
+      props: { runtimeUrl: RUNTIME_URL, renderToolCalls: [renderer("a")] },
+    });
+    await wrapper.setProps({ renderToolCalls: [renderer("a")] });
+    expect(error).not.toHaveBeenCalledWith(SHAPE_WARNING);
+    wrapper.unmount();
+  });
+});
+
+describe("CopilotKitProvider (Vue) config diagnostics", () => {
+  it("warns about a missing runtime config once", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const wrapper = mount(CopilotKitProvider, { props: {} });
+    await wrapper.setProps({ properties: { tenant: "acme" } });
+    const missing = warn.mock.calls.filter(
+      ([message]) =>
+        message ===
+        "Missing required prop: 'runtimeUrl' or 'publicApiKey' or 'publicLicenseKey'",
+    );
+    expect(missing).toHaveLength(1);
+    wrapper.unmount();
+  });
+});

package/src/v2/providers/__tests__/CopilotKitProvider.sandboxFunctions.test.ts

@@ -79,7 +79,10 @@ describe("CopilotKitProvider sandbox functions", () => {
       },
     });
     const sandboxContext = findSandboxContext(observedCore.value!.context);
-    expect(sandboxContext).toBeDefined();
+    // The same model-visible call form React and Angular send.
+    expect(sandboxContext?.description).toBe(
+      "Sandbox functions available in generated sandboxed UI code. Call via: await Websandbox.connection.remote.<functionName>(args)",
+    );
   });
 
   it("does not register agent context when sandbox functions are empty", () => {

package/src/v2/providers/__tests__/CopilotKitProvider.test.ts

@@ -5,11 +5,12 @@ import {
   createSSRApp,
   defineComponent,
   h,
+  inject,
   nextTick,
   ref,
   watchEffect,
 } from "vue";
-import type { VNode } from "vue";
+import type { ComputedRef, VNode } from "vue";
 import { renderToString } from "vue/server-renderer";
 import type {
   CopilotKitCoreSubscriber,
@@ -23,6 +24,7 @@ import { defineWebInspector } from "@copilotkit/web-inspector";
 import { z } from "zod";
 import CopilotKitProvider from "../CopilotKitProvider.vue";
 import { useCopilotKit } from "../useCopilotKit";
+import { InspectorKey } from "../keys";
 import type { VueFrontendTool } from "../../types";
 import type { VueHumanInTheLoop } from "../../types";
 import { mountWithProvider } from "../../__tests__/utils/mount";
@@ -838,7 +840,7 @@ describe("CopilotKitProvider", () => {
       vi.stubEnv("NODE_ENV", "development");
     });
 
-    it("renders by default on any development host and passes the provider core before connection", async () => {
+    it("renders by default on a loopback development host and passes the provider core before connection", async () => {
       let providerCore: CopilotKitCoreContextValue | null = null;
       const Probe = defineComponent({
         setup() {
@@ -872,6 +874,47 @@ describe("CopilotKitProvider", () => {
       view.unmount();
     });
 
+    it("never renders or loads on a remote development host, even when explicitly enabled", async () => {
+      vi.stubGlobal("location", new URL("http://192.168.1.25:3000"));
+      const view = render(CopilotKitProvider, {
+        props: { runtimeUrl: "/api/copilotkit", enableInspector: true },
+        slots: { default: "child" },
+      });
+
+      await settleInspectorLoad();
+      expect(view.container.querySelector("cpk-web-inspector")).toBeNull();
+      expect(defineWebInspector).not.toHaveBeenCalled();
+      view.unmount();
+    });
+
+    it("enables Inspector message actions only while the Inspector is shown", async () => {
+      let isInspectorEnabled: ComputedRef<boolean> | undefined;
+      const Probe = defineComponent({
+        setup() {
+          isInspectorEnabled = inject(InspectorKey)?.isInspectorEnabled;
+          return () => null;
+        },
+      });
+      const view = render(CopilotKitProvider, {
+        props: { runtimeUrl: "/api/copilotkit" },
+        slots: { default: Probe },
+      });
+
+      await waitFor(() => {
+        expect(isInspectorEnabled?.value).toBe(true);
+      });
+      const inspector = view.container.querySelector("cpk-web-inspector")!;
+      inspector.dispatchEvent(
+        new CustomEvent("cpk-inspector-visibility-change", {
+          detail: { visible: false },
+        }),
+      );
+      await nextTick();
+      expect(isInspectorEnabled?.value).toBe(false);
+      expect(inspector.isConnected).toBe(true);
+      view.unmount();
+    });
+
     it("does not render or load when explicitly disabled in development", async () => {
       const view = render(CopilotKitProvider, {
         props: {

package/src/v2/providers/chat-configuration-store-key.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey } from "vue";
+import type { ɵChatConfigurationStore } from "@copilotkit/core";
+
+/**
+ * The nearest `CopilotChatConfigurationProvider`'s core store, so a nested
+ * provider can link its own store to it.
+ */
+export const ChatConfigurationStoreKey: InjectionKey<ɵChatConfigurationStore> =
+  Symbol("CopilotChatConfigurationStore");

package/src/v2/providers/markdown-renderer.ts

@@ -1,6 +1,10 @@
 import { inject } from "vue";
 import type { Component, InjectionKey } from "vue";
-import type { VueStreamingMarkdownNodeRenderers } from "@copilotkit/markdown/vue";
+import type {
+  VueStreamingMarkdownCitationClickHandler,
+  VueStreamingMarkdownLinkClickHandler,
+  VueStreamingMarkdownNodeRenderers,
+} from "@copilotkit/markdown/vue";
 import type { StreamingMarkdownParserOptions } from "@copilotkit/markdown";
 
 /** Config for the built-in Vue default renderer (pass instead of a component). */
@@ -9,6 +13,8 @@ export interface DefaultMarkdownRendererProps {
   caret?: boolean;
   options?: Partial<StreamingMarkdownParserOptions>;
   class?: string;
+  onLinkClick?: VueStreamingMarkdownLinkClickHandler;
+  onCitationClick?: VueStreamingMarkdownCitationClickHandler;
 }
 
 export type MarkdownRendererValue = Component | DefaultMarkdownRendererProps;

package/src/v2/providers/use-inspector-thread-override.ts

@@ -1,20 +1,12 @@
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import type { Ref } from "vue";
-import {
-  emitInspectorActiveThread,
-  emitInspectorViewThreadResult,
-  isInspectorThreadBridgeEnabled,
-  onInspectorStopViewing,
-  onInspectorViewThread,
-} from "@copilotkit/core";
-
-type InspectorOverride = {
-  requestId: string;
-  threadId: string;
-  agentId: string;
-  previousThreadId: string;
-};
+import { ɵInspectorThreadOverride } from "@copilotkit/core";
 
+/**
+ * Apply the Inspector's "view this thread" requests to a chat. Core's
+ * `ɵInspectorThreadOverride` owns the state machine; this composable binds it
+ * to the component's lifetime and Vue reactivity.
+ */
 export function useInspectorThreadOverride(args: {
   agentId: Ref<string>;
   baseThreadId: Ref<string>;
@@ -23,77 +15,27 @@ export function useInspectorThreadOverride(args: {
   inspectorRequestId: Ref<string | null>;
   failInspectorOverride: (requestId: string) => void;
 } {
-  const override = ref<InspectorOverride | null>(null);
-
-  const restoreOverride = (
-    current: InspectorOverride,
-    nextThreadId: string,
-  ) => {
-    override.value = null;
-    emitInspectorActiveThread({
-      requestId: current.requestId,
-      threadId: nextThreadId,
-      agentId: current.agentId,
-      source: "app",
-    });
-  };
-
-  const failInspectorOverride = (requestId: string) => {
-    const current = override.value;
-    if (!current || current.requestId !== requestId) return;
-    emitInspectorViewThreadResult({
-      requestId,
-      threadId: current.threadId,
-      agentId: current.agentId,
-      ok: false,
-      reason: "connect-failed",
-    });
-    restoreOverride(current, current.previousThreadId);
-  };
-
-  if (isInspectorThreadBridgeEnabled()) {
-    const offView = onInspectorViewThread((payload) => {
-      if (payload.agentId !== args.agentId.value) return false;
-      override.value = override.value
-        ? { ...override.value, ...payload }
-        : {
-            ...payload,
-            previousThreadId: args.baseThreadId.value,
-          };
-      emitInspectorViewThreadResult({ ...payload, ok: true });
-      emitInspectorActiveThread({ ...payload, source: "override" });
-      return true;
-    });
-
-    const offStop = onInspectorStopViewing((payload) => {
-      const current = override.value;
-      if (!current) return;
-      if (payload.requestId !== current.requestId) return;
-      if (payload.agentId !== current.agentId) return;
-      restoreOverride(current, current.previousThreadId);
-    });
-
-    onBeforeUnmount(() => {
-      offView();
-      offStop();
-    });
-  }
+  const controller = new ɵInspectorThreadOverride({
+    agentId: args.agentId.value,
+    baseThreadId: args.baseThreadId.value,
+  });
+  const override = shallowRef(controller.getSnapshot());
+  const unsubscribe = controller.subscribe(() => {
+    override.value = controller.getSnapshot();
+  });
 
   watch([args.agentId, args.baseThreadId], ([agentId, baseThreadId]) => {
-    const current = override.value;
-    if (!current) return;
-    if (agentId !== current.agentId) {
-      restoreOverride(current, current.previousThreadId);
-      return;
-    }
-    if (baseThreadId === current.previousThreadId) return;
-    if (baseThreadId === current.threadId) return;
-    restoreOverride(current, baseThreadId);
+    controller.update({ agentId, baseThreadId });
+  });
+
+  onBeforeUnmount(() => {
+    unsubscribe();
+    controller.dispose();
   });
 
   return {
     inspectorThreadId: computed(() => override.value?.threadId ?? null),
     inspectorRequestId: computed(() => override.value?.requestId ?? null),
-    failInspectorOverride,
+    failInspectorOverride: controller.fail,
   };
 }

package/vite.config.ts

@@ -30,6 +30,9 @@ export default defineConfig({
         "@ag-ui/core",
         // The framework-neutral A2UI catalog description subpath (no React).
         "@copilotkit/a2ui-renderer/catalog-schema",
+        // The framework-neutral A2UI engine subpath (no React).
+        "@copilotkit/a2ui-renderer/engine",
+        "@copilotkit/a2ui-renderer/engine-core",
         // Core and its `/styles` subpath, so the stylesheet isn't bundled here.
         /^@copilotkit\/core(\/.*)?$/,
         // Keep the shared MCP Apps host + its subpaths external. The root entry
@@ -40,7 +43,8 @@ export default defineConfig({
         // statically for activity registration.
         /^@copilotkit\/mcp-apps-renderer(\/.*)?$/,
         "@copilotkit/shared",
-        "@copilotkit/web-inspector",
+        // The Inspector and its `/mount` subpath stay runtime imports.
+        /^@copilotkit\/web-inspector(\/.*)?$/,
         // Keep @copilotkit/web-components (the Lit drawer element) + its subpaths
         // external. It's a runtime dependency loaded via the drawer wrapper's
         // client-only dynamic import; bundling it inline would ship a duplicate

package/vitest.config.ts

@@ -12,12 +12,17 @@ export default defineConfig({
     reporters: [["default", { summary: false }]],
   },
   resolve: {
-    alias: {
-      "@": resolve(__dirname, "./src"),
-      "@copilotkit/web-inspector": resolve(
-        __dirname,
-        "./src/v2/__tests__/mocks/web-inspector.ts",
-      ),
-    },
+    // Exact match, so the real `@copilotkit/web-inspector/mount` subpath
+    // still resolves while the Inspector bundle itself is mocked.
+    alias: [
+      { find: "@", replacement: resolve(__dirname, "./src") },
+      {
+        find: /^@copilotkit\/web-inspector$/,
+        replacement: resolve(
+          __dirname,
+          "./src/v2/__tests__/mocks/web-inspector.ts",
+        ),
+      },
+    ],
   },
 });