@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

package/src/v2/providers/CopilotKitProvider.vue

@@ -1,41 +1,52 @@
 <script setup lang="ts">
-import {
-  GENERATE_SANDBOXED_UI_DESCRIPTION,
-  randomUUID,
-} from "@copilotkit/shared";
 import {
   computed,
   h,
   onMounted,
+  onUnmounted,
   provide,
   ref,
   shallowRef,
+  toRaw,
   triggerRef,
   watch,
 } from "vue";
 import type { Component, FunctionalComponent } from "vue";
-import { z } from "zod";
-import type { AbstractAgent } from "@ag-ui/client";
-import { ToolCallStatus } from "@copilotkit/core";
+import type { Catalog, ComponentApi } from "@a2ui/web_core/v0_9";
+import {
+  ɵLearningAutoStarter,
+  ɵassembleActivityRenderers,
+  ɵassembleHumanInTheLoop,
+  ɵassembleProviderToolRenderers,
+  ɵassembleProviderTools,
+  ɵhitlRenderProps,
+  ɵresolveA2UIActivation,
+  ɵstableArrayPropWarning,
+  ɵtoLearningConfig,
+} from "@copilotkit/core";
 import type {
-  CopilotKitCoreErrorCode,
-  CopilotKitCoreSubscriber,
   CopilotKitHeadersSource,
   FrontendTool,
+  ɵHumanInTheLoopRegistry,
+  ɵRuntimeInfo,
+  ɵStableArrayProp,
 } from "@copilotkit/core";
-import { ɵwithHeaderDefaults } from "@copilotkit/core";
-import { schemaToJsonSchema, shouldEnableInspector } from "@copilotkit/shared";
-import type {
-  RuntimeEntitlementResponse,
-  RuntimeLicenseStatus,
-} from "@copilotkit/shared";
-import { zodToJsonSchema } from "zod-to-json-schema";
+import {
+  ɵaddOpenGenerativeUIContexts,
+  ɵcreateOpenGenerativeUITool,
+  ɵisOpenGenerativeUIActive,
+  ɵpublicKeyHeaderDefaults,
+  ɵreportProviderConfigDiagnostics,
+  ɵresolveLicenseState,
+  ɵresolveProviderConfig,
+  ɵwithHeaderDefaults,
+} from "@copilotkit/core";
+import { shouldEnableInspector } from "@copilotkit/shared";
 import { CopilotKitCoreVue } from "../lib/vue-core";
 import { createA2UIMessageRenderer } from "../components/A2UIMessageRenderer";
 import { registerA2UIBuiltInToolCallRenderer } from "../components/a2ui/A2UIBuiltInToolCallRenderer";
-import { registerA2UICatalogContext } from "../components/a2ui/A2UICatalogContext";
+import { registerA2UICatalog } from "../components/a2ui/A2UICatalogContext";
 import {
-  GenerateSandboxedUiArgsSchema,
   OpenGenerativeUIActivityRenderer,
   OpenGenerativeUIActivityType,
   OpenGenerativeUIContentSchema,
@@ -54,17 +65,10 @@ import {
 } from "./keys";
 import type { VueInspectorOpenRequest } from "./keys";
 import { MARKDOWN_RENDERER_KEY } from "./markdown-renderer";
-import {
-  LicenseContextKey,
-  createLicenseContextValue,
-} from "./license-context";
-import type { LicenseContextValue } from "./license-context";
+import { LicenseContextKey } from "./license-context";
 import CopilotKitInspector from "../components/CopilotKitInspector.vue";
 import LicenseWarningBanner from "../components/LicenseWarningBanner.vue";
-import type {
-  CopilotKitLearningOptions,
-  CopilotKitProviderProps,
-} from "./CopilotKitProvider.types";
+import type { CopilotKitProviderProps } from "./CopilotKitProvider.types";
 import type {
   SandboxFunction,
   VueActivityMessageRenderer,
@@ -73,37 +77,6 @@ import type {
   VueToolCallRendererRenderProps,
 } from "../types";
 
-const HEADER_NAME = "X-CopilotCloud-Public-Api-Key";
-const COPILOT_CLOUD_CHAT_URL = "https://api.cloud.copilotkit.ai/copilotkit/v1";
-// Canonical A2UI viewer theme default (matches @copilotkit/a2ui-renderer).
-// Defined locally to avoid pulling React dependencies from a2ui-renderer.
-const viewerTheme: Record<string, unknown> = {};
-
-const FRONTEND_TOOLS_STABLE_WARNING =
-  "frontendTools must be a stable array. If you want to dynamically add or remove tools, use `useFrontendTool` instead.";
-const HUMAN_IN_THE_LOOP_STABLE_WARNING =
-  "humanInTheLoop must be a stable array. If you want to dynamically add or remove human-in-the-loop tools, use `useHumanInTheLoop` instead.";
-const RENDER_CUSTOM_MESSAGES_STABLE_WARNING =
-  "renderCustomMessages must be a stable array.";
-const RENDER_ACTIVITY_MESSAGES_STABLE_WARNING =
-  "renderActivityMessages must be a stable array.";
-const SANDBOX_FUNCTIONS_STABLE_WARNING =
-  "openGenerativeUI.sandboxFunctions must be a stable array.";
-// Matches the message React's `useHumanInTheLoop` rejects with, so an aborted
-// interrupt reads the same across frameworks (see #5554).
-const HUMAN_IN_THE_LOOP_ABORTED_MESSAGE =
-  "Human-in-the-loop interaction aborted";
-const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follow these design principles inspired by shadcn/ui:
-
-- Use a minimal, flat aesthetic. Avoid drop shadows and gradients — rely on subtle borders (1px solid, light gray like #e5e7eb) to define surfaces.
-- Neutral base palette: white backgrounds, zinc/slate gray text (#09090b for headings, #71717a for secondary text). One accent color for interactive elements.
-- Use system font stacks (system-ui, -apple-system, sans-serif) at readable sizes (14px body, 600 weight for headings). Tight line-heights.
-- Small, consistent border-radius (6–8px). Cards and containers use border, not shadow, for separation.
-- Buttons: solid fill for primary (dark bg, white text), outline for secondary (border + transparent bg). Subtle hover state (slight opacity or background shift).
-- Use CSS Grid or Flexbox for layout. Ensure the UI looks good at any width.
-- Minimal transitions (150ms) for hover/focus states only. No decorative animations.
-- Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`;
-
 /** The MCP Apps renderer with `mcpApps.allowSameOriginFallback` applied. */
 const SameOriginMCPAppsActivityRenderer: FunctionalComponent = (_, { attrs }) =>
   h(MCPAppsActivityRenderer as Component, {
@@ -137,12 +110,16 @@ provide(
 );
 
 const shouldRenderInspector = ref(false);
+// Follows the Inspector's own show/hide, so message actions that open it are
+// hidden while a temporary dismissal hides it.
+const inspectorVisible = ref(false);
 
 function updateInspectorVisibility(): void {
   shouldRenderInspector.value = shouldEnableInspector({
     enableInspector: props.enableInspector,
     isBrowser: true,
     isDevelopment: process.env.NODE_ENV === "development",
+    hostname: window.location?.hostname,
   });
 }
 
@@ -150,7 +127,9 @@ onMounted(updateInspectorVisibility);
 watch(() => props.enableInspector, updateInspectorVisibility);
 
 const inspectorOpenRequest = ref<VueInspectorOpenRequest | null>(null);
-const isInspectorEnabled = computed(() => shouldRenderInspector.value);
+const isInspectorEnabled = computed(
+  () => shouldRenderInspector.value && inspectorVisible.value,
+);
 
 function openInspector(request: VueInspectorOpenRequest) {
   inspectorOpenRequest.value = { ...request };
@@ -161,67 +140,56 @@ provide(InspectorKey, {
   openInspector,
 });
 
-const initialFrontendTools = props.frontendTools;
-const initialHumanInTheLoop = props.humanInTheLoop;
-const initialRenderCustomMessages = props.renderCustomMessages;
-const initialRenderActivityMessages = props.renderActivityMessages;
-const initialSandboxFunctions = props.openGenerativeUI?.sandboxFunctions;
-
-watch(
-  () => props.frontendTools,
-  (next) => {
-    if (next !== initialFrontendTools) {
-      console.error(FRONTEND_TOOLS_STABLE_WARNING);
-    }
-  },
-);
-
-watch(
-  () => props.humanInTheLoop,
-  (next) => {
-    if (next !== initialHumanInTheLoop) {
-      console.error(HUMAN_IN_THE_LOOP_STABLE_WARNING);
-    }
-  },
-);
-
-watch(
-  () => props.renderCustomMessages,
-  (next) => {
-    if (next !== initialRenderCustomMessages) {
-      console.error(RENDER_CUSTOM_MESSAGES_STABLE_WARNING);
-    }
-  },
-);
-
-watch(
-  () => props.renderActivityMessages,
-  (next) => {
-    if (next !== initialRenderActivityMessages) {
-      console.error(RENDER_ACTIVITY_MESSAGES_STABLE_WARNING);
-    }
-  },
-);
-
-watch(
-  () => props.openGenerativeUI?.sandboxFunctions,
-  (next) => {
-    if (next !== initialSandboxFunctions) {
-      console.error(SANDBOX_FUNCTIONS_STABLE_WARNING);
-    }
-  },
-);
+// Props that come from reactive state arrive as deep proxies. Zod 4 schemas
+// break behind a Vue proxy (their `_zod` property is read-only and
+// non-configurable), so read tools and renderers through their raw objects.
+const rawEntries = <T>(entries: readonly T[] | undefined): T[] =>
+  [...toRaw(entries ?? [])].map((entry) => toRaw(entry));
+
+// Array props must keep their identity; core decides when a change warns
+// (for `renderToolCalls`, only a change of the agentId:name pairs).
+const stableArrayProps: Record<
+  ɵStableArrayProp,
+  () => readonly unknown[] | undefined
+> = {
+  renderToolCalls: () => props.renderToolCalls,
+  frontendTools: () => props.frontendTools,
+  humanInTheLoop: () => props.humanInTheLoop,
+  renderCustomMessages: () => props.renderCustomMessages,
+  renderActivityMessages: () => props.renderActivityMessages,
+  sandboxFunctions: () => props.openGenerativeUI?.sandboxFunctions,
+};
+for (const [name, read] of Object.entries(stableArrayProps)) {
+  const initial = read();
+  watch(read, (next) => {
+    const warning = ɵstableArrayPropWarning(
+      name as ɵStableArrayProp,
+      initial,
+      next,
+    );
+    if (warning) console.error(warning);
+  });
+}
 
-const resolvedPublicKey = computed(
-  () => props.publicApiKey ?? props.publicLicenseKey,
-);
-const mergedAgents = computed(() => ({
-  ...props.agents__unsafe_dev_only,
-  ...props.selfManagedAgents,
-}));
-const hasLocalAgents = computed(
-  () => Object.keys(mergedAgents.value).length > 0,
-);
+// Key fallback, Copilot Cloud URL, transport, agent merge and the catalog
+// property all come from core.
+const resolvedConfig = computed(() =>
+  ɵresolveProviderConfig({
+    runtimeUrl: props.runtimeUrl,
+    publicApiKey: props.publicApiKey,
+    publicLicenseKey: props.publicLicenseKey,
+    useSingleEndpoint: props.useSingleEndpoint,
+    agents__unsafe_dev_only: props.agents__unsafe_dev_only,
+    selfManagedAgents: props.selfManagedAgents,
+    properties: props.properties,
+    a2uiCatalog: props.a2ui?.catalog,
+  }),
+);
+// Strings, so dependents only re-run when the value really changes.
+const resolvedPublicKey = computed(() => resolvedConfig.value.publicKey);
+const chatApiEndpoint = computed(() => resolvedConfig.value.runtimeUrl);
+const runtimeTransport = computed(() => resolvedConfig.value.runtimeTransport);
+const mergedAgents = computed(() => resolvedConfig.value.agents);
 
 // Whether `headers` is a builder, as its own computed so that a re-render
 // merely passing a NEW function of the same kind (e.g. a fresh inline arrow)
@@ -250,294 +218,158 @@ const latestHeaders = (() =>
 const headersSource = computed<CopilotKitHeadersSource>(() =>
   ɵwithHeaderDefaults(
     isHeadersBuilder.value ? latestHeaders : props.headers,
-    resolvedPublicKey.value ? { [HEADER_NAME]: resolvedPublicKey.value } : {},
+    ɵpublicKeyHeaderDefaults(resolvedPublicKey.value),
   ),
 );
 
-const chatApiEndpoint = computed(
-  () =>
-    props.runtimeUrl ??
-    (resolvedPublicKey.value ? COPILOT_CLOUD_CHAT_URL : undefined),
-);
-
+// Throws in production for a missing runtime config; otherwise warns, once
+// per provider for each message.
+const loggedDiagnostics = new Set<string>();
 watch(
-  [chatApiEndpoint, resolvedPublicKey, hasLocalAgents],
-  ([endpoint, publicKey, localAgents]) => {
-    if (endpoint || publicKey || localAgents) return;
-    const msg =
-      "Missing required prop: 'runtimeUrl' or 'publicApiKey' or 'publicLicenseKey'";
-    if (process.env.NODE_ENV === "production") {
-      throw new Error(msg);
-    }
-    console.warn(msg);
+  () => resolvedConfig.value.diagnostics,
+  (diagnostics) => {
+    ɵreportProviderConfigDiagnostics(diagnostics, {
+      isProduction: process.env.NODE_ENV === "production",
+      logged: loggedDiagnostics,
+    });
   },
   { immediate: true },
 );
 
-/**
- * A human-in-the-loop tool call from the `humanInTheLoop` prop that is waiting
- * on the user. Keyed by tool call id so parallel interrupts on the same tool
- * stay independent.
- */
-type PendingHumanInTheLoop = {
-  resolve: (result: unknown) => void;
-  detachAbort?: () => void;
-};
-
-const pendingHumanInTheLoop = new Map<string, PendingHumanInTheLoop>();
-
-/** Removes a pending interaction and detaches its abort listener. */
-const takePendingHumanInTheLoop = (key: string) => {
-  const pending = pendingHumanInTheLoop.get(key);
-  if (!pending) return undefined;
-  pending.detachAbort?.();
-  pendingHumanInTheLoop.delete(key);
-  return pending;
-};
-
-const processedHumanInTheLoop = computed(() => {
-  const tools: FrontendTool[] = [];
-  const renderToolCalls: VueToolCallRenderer<unknown>[] = [];
-
-  for (const tool of props.humanInTheLoop) {
-    tools.push({
-      type: "human-in-the-loop",
-      name: tool.name,
-      description: tool.description,
-      parameters: tool.parameters,
-      followUp: tool.followUp,
-      ...(tool.agentId && { agentId: tool.agentId }),
-      // Keep the tool call pending until the render calls `respond`, matching
-      // the `useHumanInTheLoop` composable. Resolving immediately made the HITL
-      // UI flash and disappear without ever waiting for the user.
-      handler: async (_args, context) => {
-        const signal = context?.signal;
-        const key = context?.toolCall?.id ?? tool.name;
-
-        return new Promise((resolve, reject) => {
-          // Already aborted before the handler ran — reject so core records an
-          // explicit error tool result rather than silently resolving empty.
-          if (signal?.aborted) {
-            reject(new Error(HUMAN_IN_THE_LOOP_ABORTED_MESSAGE));
-            return;
-          }
-
-          const pending: PendingHumanInTheLoop = { resolve };
-          pendingHumanInTheLoop.set(key, pending);
-
-          if (signal) {
-            const onAbort = () => {
-              pendingHumanInTheLoop.delete(key);
-              reject(new Error(HUMAN_IN_THE_LOOP_ABORTED_MESSAGE));
-            };
-            signal.addEventListener("abort", onAbort, { once: true });
-            pending.detachAbort = () => {
-              signal.removeEventListener("abort", onAbort);
-            };
-          }
-        });
-      },
-    });
-    if (tool.render) {
-      const ToolComponent = tool.render;
-      const render: VueToolCallRenderer<unknown>["render"] = (
-        renderProps: VueToolCallRendererRenderProps<unknown>,
-      ) => {
-        const key = renderProps.toolCallId ?? tool.name;
-        return h(ToolComponent as Parameters<typeof h>[0], {
-          ...renderProps,
-          // `renderProps.name` is the tool that was actually invoked. It equals
-          // `tool.name` for a named registration; for a wildcard (`"*"`) it is
-          // the only place the real name exists.
-          name: tool.name === "*" ? renderProps.name : tool.name,
-          description: tool.description || "",
-          agentId: tool.agentId,
-          // `respond` is live only while the tool is executing — the one phase
-          // with a promise waiting on the user.
-          respond:
-            renderProps.status === ToolCallStatus.Executing
-              ? async (result: unknown) => {
-                  takePendingHumanInTheLoop(key)?.resolve(result);
-                }
-              : undefined,
-        });
-      };
-
-      renderToolCalls.push({
-        name: tool.name,
-        args: tool.parameters ?? z.any(),
-        render,
-        ...(tool.agentId && { agentId: tool.agentId }),
-      } as VueToolCallRenderer<unknown>);
-    }
-  }
-  return { tools, renderToolCalls };
-});
-
-const allTools = computed(() => {
-  const tools: FrontendTool[] = [];
-  for (const t of props.frontendTools) {
-    tools.push(t as FrontendTool);
-  }
-  for (const t of builtInFrontendTools.value) {
-    tools.push(t as FrontendTool);
-  }
-  tools.push(...processedHumanInTheLoop.value.tools);
-  return tools;
-});
-
-const allRenderToolCalls = computed(() => {
-  const combined: VueToolCallRenderer<unknown>[] = [
-    ...(props.renderToolCalls ?? []),
-  ];
-  for (const tool of [...props.frontendTools, ...builtInFrontendTools.value]) {
-    if (tool.render) {
-      const args = tool.parameters ?? (tool.name === "*" ? z.any() : undefined);
-      if (args) {
-        combined.push({
-          name: tool.name,
-          args,
-          render: tool.render,
-        } as VueToolCallRenderer<unknown>);
-      }
-    }
-  }
-  combined.push(...processedHumanInTheLoop.value.renderToolCalls);
-  return combined;
-});
+type FrontendToolRender = NonNullable<VueFrontendTool["render"]>;
+
+// The tools and tool-call renderers for core (assembly rules from core).
+// Human-in-the-loop renders are wrapped once per `humanInTheLoop` change: a
+// new wrapper is a new component type, so Vue would remount the card.
+const humanInTheLoopAssembly = computed(() =>
+  ɵassembleHumanInTheLoop<FrontendToolRender, unknown>({
+    humanInTheLoop: rawEntries(props.humanInTheLoop),
+    // Core parks each call by tool call id until the render responds. The core
+    // is created further down, so read its registry lazily.
+    humanInTheLoopRegistry: (): ɵHumanInTheLoopRegistry =>
+      copilotkit.value.ɵhumanInTheLoop,
+    wrapHumanInTheLoopRender: (ToolComponent, tool, registry) =>
+      ((renderProps: VueToolCallRendererRenderProps<unknown>) =>
+        h(
+          ToolComponent as Parameters<typeof h>[0],
+          ɵhitlRenderProps(renderProps, tool, registry()),
+        )) as FrontendToolRender,
+  }),
+);
+const allTools = computed<FrontendTool[]>(() =>
+  ɵassembleProviderTools({
+    frontendTools: rawEntries(props.frontendTools),
+    builtInFrontendTools: builtInFrontendTools.value,
+    humanInTheLoop: humanInTheLoopAssembly.value,
+  }),
+);
+const allRenderToolCalls = computed(
+  () =>
+    ɵassembleProviderToolRenderers({
+      renderToolCalls: rawEntries(props.renderToolCalls),
+      frontendTools: rawEntries(props.frontendTools),
+      builtInFrontendTools: builtInFrontendTools.value,
+      humanInTheLoop: humanInTheLoopAssembly.value,
+    }) as VueToolCallRenderer<unknown>[],
+);
 
 const allRenderCustomMessages = computed(
   () => props.renderCustomMessages ?? [],
 );
-const runtimeA2UIEnabled = ref(false);
-const runtimeOpenGenerativeUIEnabled = ref(false);
-const runtimeLicenseStatus = ref<RuntimeLicenseStatus | undefined>(undefined);
-const runtimeEntitlements = ref<RuntimeEntitlementResponse | undefined>(
-  undefined,
+// Core's runtime info snapshot, projected from the core watcher below.
+const runtimeInfo = shallowRef<ɵRuntimeInfo | null>(null);
+const runtimeA2UIEnabled = computed(
+  () => runtimeInfo.value?.a2uiEnabled ?? false,
+);
+const runtimeOpenGenerativeUIEnabled = computed(
+  () => runtimeInfo.value?.openGenerativeUIEnabled ?? false,
+);
+const runtimeLicenseStatus = computed(() => runtimeInfo.value?.licenseStatus);
+const runtimeEntitlements = computed(
+  () => runtimeInfo.value?.runtimeEntitlements,
+);
+const runtimeEntitlementRetryPending = computed(
+  () => runtimeInfo.value?.runtimeEntitlementRetryPending ?? false,
 );
-const runtimeEntitlementRetryPending = ref(false);
-const openGenerativeUIActive = computed(
-  () => runtimeOpenGenerativeUIEnabled.value || !!props.openGenerativeUI,
+const openGenerativeUIActive = computed(() =>
+  ɵisOpenGenerativeUIActive({
+    runtimeEnabled: runtimeOpenGenerativeUIEnabled.value,
+    configured: !!props.openGenerativeUI,
+  }),
 );
 // A catalog passed to the provider is enough to turn A2UI on: render the
 // surfaces locally and forward the catalog signal so the runtime injects the
 // render tool — no runtime-side `a2ui` config required.
-const a2uiCatalogProvided = computed(() => !!props.a2ui?.catalog);
 const a2uiActive = computed(
-  () => runtimeA2UIEnabled.value || a2uiCatalogProvided.value,
+  () =>
+    ɵresolveA2UIActivation({
+      runtimeEnabled: runtimeA2UIEnabled.value,
+      hasCatalog: !!props.a2ui?.catalog,
+    }).active,
+);
+// The catalog with components disabled in the Inspector removed; set by
+// `registerA2UICatalog` below once the core exists.
+const a2uiFilteredCatalog = shallowRef<Catalog<ComponentApi> | undefined>(
+  undefined,
 );
 // Forward a per-run signal when the provider has an A2UI catalog so the
 // runtime can turn A2UI on (and inject the render tool) without a separate
 // `a2ui.injectA2UITool` flag on the runtime.
-const resolvedProperties = computed(() =>
-  a2uiCatalogProvided.value
-    ? { ...props.properties, a2uiCatalogAvailable: true }
-    : props.properties,
+const resolvedProperties = computed(() => resolvedConfig.value.properties);
+const sandboxFunctions = computed<readonly SandboxFunction[]>(() =>
+  rawEntries(props.openGenerativeUI?.sandboxFunctions),
 );
-const sandboxFunctions = computed<readonly SandboxFunction[]>(
-  () => props.openGenerativeUI?.sandboxFunctions ?? [],
-);
-const zodToJsonSchemaCompat = (
-  schema: unknown,
-  options?: { $refStrategy?: string },
-): Record<string, unknown> =>
-  zodToJsonSchema(
-    schema as z.ZodTypeAny,
-    options as { $refStrategy?: "none" | "relative" | "root" | "seen" },
-  ) as Record<string, unknown>;
-
 const builtInFrontendTools = computed<VueFrontendTool[]>(() => {
   if (!openGenerativeUIActive.value) return [];
   return [
     {
-      name: "generateSandboxedUi",
-      description: GENERATE_SANDBOXED_UI_DESCRIPTION,
-      parameters: GenerateSandboxedUiArgsSchema,
-      handler: async () => "UI generated",
-      // This acknowledgement has no side effects and is safe to reconstruct.
-      reconnectBehavior: "resume-pending",
-      followUp: true,
+      ...ɵcreateOpenGenerativeUITool(),
       render:
         OpenGenerativeUIToolRenderer as unknown as VueFrontendTool["render"],
     } as VueFrontendTool,
   ];
 });
 
-const builtInActivityRenderers = computed<
-  VueActivityMessageRenderer<unknown>[]
->(() => {
-  const renderers: VueActivityMessageRenderer<unknown>[] = [
-    {
-      activityType: MCPAppsActivityType,
-      content: MCPAppsActivityContentSchema as unknown as z.ZodSchema<unknown>,
-      render: (props.mcpApps?.allowSameOriginFallback
-        ? SameOriginMCPAppsActivityRenderer
-        : MCPAppsActivityRenderer) as unknown as VueActivityMessageRenderer<unknown>["render"],
-    },
-  ];
-
-  if (openGenerativeUIActive.value) {
-    renderers.push({
-      activityType: OpenGenerativeUIActivityType,
-      content: OpenGenerativeUIContentSchema as unknown as z.ZodSchema<unknown>,
-      render:
-        OpenGenerativeUIActivityRenderer as unknown as VueActivityMessageRenderer<unknown>["render"],
-    });
-  }
-
-  if (a2uiActive.value) {
-    renderers.unshift(
-      createA2UIMessageRenderer({
-        theme: props.a2ui?.theme ?? viewerTheme,
-        catalog: props.a2ui?.catalog,
-        loadingComponent: props.a2ui?.loadingComponent,
-        recovery: props.a2ui?.recovery,
-      }),
-    );
-  }
-
-  return renderers;
-});
-
-const allRenderActivityMessages = computed(() => [
-  ...(props.renderActivityMessages ?? []),
-  ...builtInActivityRenderers.value,
-]);
-
-const applyDefaultThrottleMs = (core: CopilotKitCoreVue) => {
-  if (
-    props.defaultThrottleMs !== undefined &&
-    (!Number.isFinite(props.defaultThrottleMs) || props.defaultThrottleMs < 0)
-  ) {
-    console.error(
-      `CopilotKitProvider: defaultThrottleMs must be a non-negative finite number, got ${props.defaultThrottleMs}. useAgent hooks without an explicit throttleMs will fall back to unthrottled.`,
-    );
-  }
-  core.setDefaultThrottleMs(props.defaultThrottleMs);
-};
-
-function toLearningConfig(
-  learning: boolean | CopilotKitLearningOptions | undefined,
-): CopilotKitLearningOptions | undefined {
-  // `true` uses the default authenticated capture options.
-  if (learning === true) return {};
-  if (learning === false || learning === undefined) return undefined;
-  // `autoStart` only controls the provider; Core never receives it.
-  const { autoStart: _autoStart, ...config } = learning;
-  return config;
-}
+// The app's activity renderers, then the built-in ones (order from core).
+const allRenderActivityMessages = computed(() =>
+  ɵassembleActivityRenderers<VueActivityMessageRenderer<unknown>>({
+    app: rawEntries(props.renderActivityMessages),
+    a2ui: a2uiActive.value
+      ? createA2UIMessageRenderer({
+          theme: props.a2ui?.theme ?? {},
+          catalog: a2uiFilteredCatalog.value ?? props.a2ui?.catalog,
+          loadingComponent: props.a2ui?.loadingComponent,
+          recovery: props.a2ui?.recovery,
+          onAction: props.a2ui?.onAction,
+        })
+      : undefined,
+    builtIns: [
+      {
+        activityType: MCPAppsActivityType,
+        content: MCPAppsActivityContentSchema,
+        render: (props.mcpApps?.allowSameOriginFallback
+          ? SameOriginMCPAppsActivityRenderer
+          : MCPAppsActivityRenderer) as unknown as VueActivityMessageRenderer<unknown>["render"],
+      },
+      openGenerativeUIActive.value && {
+        activityType: OpenGenerativeUIActivityType,
+        content: OpenGenerativeUIContentSchema,
+        render:
+          OpenGenerativeUIActivityRenderer as unknown as VueActivityMessageRenderer<unknown>["render"],
+      },
+    ],
+  }),
+);
 
-const learningConfig = computed(() => toLearningConfig(props.learning));
+const learningConfig = computed(() => ɵtoLearningConfig(props.learning));
 
-const createCopilotKit = () => {
-  const core = new CopilotKitCoreVue({
+const createCopilotKit = () =>
+  new CopilotKitCoreVue({
     runtimeUrl: chatApiEndpoint.value,
-    runtimeTransport:
-      props.useSingleEndpoint === true
-        ? "single"
-        : props.useSingleEndpoint === false
-          ? "rest"
-          : "auto",
+    // `/info` starts from `onMounted` (`connect()` below), so server-side
+    // setup never fetches it.
+    deferInitialConnection: true,
+    runtimeTransport: runtimeTransport.value,
     headers: headersSource.value,
     credentials: props.credentials,
     messageFilter: props.messageFilter,
@@ -548,12 +380,12 @@ const createCopilotKit = () => {
     renderActivityMessages: allRenderActivityMessages.value,
     renderCustomMessages: allRenderCustomMessages.value,
     debug: props.debug,
+    // Set at construction so child hooks can read it on first render. Core
+    // validates it.
+    defaultThrottleMs: props.defaultThrottleMs,
+    onError: props.onError,
     learning: learningConfig.value,
   });
-  // Initialize synchronously so child hooks can read the value on first render.
-  applyDefaultThrottleMs(core);
-  return core;
-};
 
 const copilotkit = shallowRef<CopilotKitCoreVue>(createCopilotKit());
 const didMountRef = ref(false);
@@ -563,27 +395,17 @@ const executingToolCallIds = ref<ReadonlySet<string>>(new Set());
 watch(
   copilotkit,
   (core, _, onCleanup) => {
+    // Core keeps a call executing until its result is in the messages, so
+    // the status never drops back to in-progress between the two.
+    executingToolCallIds.value = core.executingToolCallIds;
     const sub1 = core.subscribe({
-      onToolExecutionStart: ({
-        toolCallId,
-      }: Parameters<
-        NonNullable<CopilotKitCoreSubscriber["onToolExecutionStart"]>
-      >[0]) => {
-        executingToolCallIds.value = new Set(executingToolCallIds.value).add(
-          toolCallId,
-        );
-      },
-      onToolExecutionEnd: ({
-        toolCallId,
-      }: Parameters<
-        NonNullable<CopilotKitCoreSubscriber["onToolExecutionEnd"]>
-      >[0]) => {
-        setTimeout(() => {
-          const next = new Set(executingToolCallIds.value);
-          next.delete(toolCallId);
-          executingToolCallIds.value = next;
-          triggerRef(copilotkit);
-        }, 0);
+      onExecutingToolCallsChanged: ({ executingToolCallIds: ids }) => {
+        const hasFinishedCall = ids.size < executingToolCallIds.value.size;
+        executingToolCallIds.value = ids;
+        // Core adds the result to `agent.messages` without a messages event,
+        // so re-read the agents once a call finishes. Not on start: that
+        // re-runs the agent subscriptions mid-run and drops a pending update.
+        if (hasFinishedCall) triggerRef(copilotkit);
       },
     });
     const sub2 = core.subscribe({
@@ -595,27 +417,21 @@ watch(
       onRenderCustomMessagesChanged: () => {
         triggerRef(copilotkit);
       },
+      onRenderActivityMessagesChanged: () => {
+        triggerRef(copilotkit);
+      },
+    });
+    runtimeInfo.value = core.ɵruntimeInfo;
+    const unsubscribeRuntimeInfo = core.ɵsubscribeToRuntimeInfo(() => {
+      runtimeInfo.value = core.ɵruntimeInfo;
     });
+    // Consumers read runtime getters off `copilotkit` directly, so every
+    // status event invalidates them.
     const sub4 = core.subscribe({
       onRuntimeConnectionStatusChanged: () => {
-        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) => {
-        void props.onError?.({
-          error: event.error,
-          code: event.code,
-          context: event.context,
-        });
-      },
-    });
     // `onHeadersChanged` fires only from a real `setHeaders()` call (a new
     // source), never from a builder resolving a new token — same generation
     // core bumps. Without this, nothing pokes Vue's reactivity when a source
@@ -633,7 +449,7 @@ watch(
       sub2.unsubscribe();
       sub3.unsubscribe();
       sub4.unsubscribe();
-      sub5.unsubscribe();
+      unsubscribeRuntimeInfo();
       sub6.unsubscribe();
     });
   },
@@ -653,48 +469,34 @@ watch([allRenderToolCalls], ([renderToolCalls]) => {
 watch([allRenderCustomMessages], ([renderCustomMessages]) => {
   if (!didMountRef.value) return;
   copilotkit.value.setRenderCustomMessages(renderCustomMessages);
-  triggerRef(copilotkit);
 });
 
 watch([allRenderActivityMessages], ([renderActivityMessages]) => {
   if (!didMountRef.value) return;
   copilotkit.value.setRenderActivityMessages(renderActivityMessages);
-  triggerRef(copilotkit);
 });
 
-// The last `headersSource` reference actually handed to `core.setHeaders`.
-// `syncRuntimeConfig` runs once (unconditionally) from `onMounted` in
-// addition to the constructor already having applied this same value.
-// `HeaderSourceResolver.setSource` itself is a no-op both for an identical
-// function reference and for a record whose normalized values equal the
-// currently applied record's (see #1937), so this reference
-// check is now a cheap pre-filter rather than the only thing preventing a
-// spurious `onHeadersChanged`. It still avoids the `setHeaders` call (and
-// its normalize + shallow-equal work) entirely on the common path where
-// nothing changed.
-let lastAppliedHeadersSource: CopilotKitHeadersSource = headersSource.value;
-
+// Every setter is a no-op when its value did not change (`setHeaders` too, for
+// the same builder or an equal record, see #1937), so this can pass every key.
 function syncRuntimeConfig() {
-  copilotkit.value.setRuntimeUrl(chatApiEndpoint.value);
-  copilotkit.value.setRuntimeTransport(
-    props.useSingleEndpoint === true
-      ? "single"
-      : props.useSingleEndpoint === false
-        ? "rest"
-        : "auto",
-  );
-  if (headersSource.value !== lastAppliedHeadersSource) {
-    lastAppliedHeadersSource = headersSource.value;
-    copilotkit.value.setHeaders(headersSource.value);
-  }
-  copilotkit.value.setCredentials(props.credentials);
-  copilotkit.value.setMessageFilter(props.messageFilter);
-  copilotkit.value.setProperties(resolvedProperties.value);
-  copilotkit.value.setAgents__unsafe_dev_only(mergedAgents.value);
-  copilotkit.value.setDebug(props.debug);
-  applyDefaultThrottleMs(copilotkit.value);
+  copilotkit.value.ɵupdateConfig({
+    messageFilter: props.messageFilter,
+    runtimeUrl: chatApiEndpoint.value,
+    runtimeTransport: runtimeTransport.value,
+    headers: headersSource.value,
+    credentials: props.credentials,
+    properties: resolvedProperties.value,
+    agents__unsafe_dev_only: mergedAgents.value,
+    debug: props.debug,
+    defaultThrottleMs: props.defaultThrottleMs,
+  });
 }
 
+watch(
+  () => props.onError,
+  (onError) => copilotkit.value.setErrorHandler(onError),
+);
+
 watch(
   [
     () => chatApiEndpoint.value,
@@ -703,7 +505,7 @@ watch(
     () => props.messageFilter,
     () => resolvedProperties.value,
     () => mergedAgents.value,
-    () => props.useSingleEndpoint,
+    () => runtimeTransport.value,
     () => props.debug,
   ],
   () => {
@@ -714,111 +516,32 @@ watch(
 
 watch(
   () => props.defaultThrottleMs,
-  () => {
+  (defaultThrottleMs) => {
     if (!didMountRef.value) return;
-    applyDefaultThrottleMs(copilotkit.value);
+    copilotkit.value.ɵupdateConfig({ defaultThrottleMs });
     triggerRef(copilotkit);
   },
 );
 
 onMounted(() => {
   syncRuntimeConfig();
-  runtimeA2UIEnabled.value = copilotkit.value.a2uiEnabled;
-  runtimeOpenGenerativeUIEnabled.value =
-    copilotkit.value.openGenerativeUIEnabled;
-  runtimeLicenseStatus.value = copilotkit.value.licenseStatus;
-  runtimeEntitlements.value = copilotkit.value.runtimeEntitlements;
-  runtimeEntitlementRetryPending.value =
-    copilotkit.value.runtimeEntitlementRetryPending;
+  // The constructor deferred `/info`; start it now that we are in the browser
+  // (`onMounted` never runs during SSR). Idempotent.
+  copilotkit.value.connect();
+  runtimeInfo.value = copilotkit.value.ɵruntimeInfo;
   didMountRef.value = true;
   // After the runtime URL is set, so CopilotKit's own runtime traffic is never
-  // captured. Created here, the watchers stop (and stop capture) on unmount.
-  watchLearning();
-});
-
-const learningEnabled = computed(() => learningConfig.value !== undefined);
-// `true` is the options-free form, so only an object can opt out.
-const learningAutoStart = computed(
-  () =>
-    learningEnabled.value &&
-    (typeof props.learning !== "object" || props.learning.autoStart !== false),
-);
-const suppliedTrajectoryId = computed(() =>
-  learningAutoStart.value ? learningConfig.value?.trajectoryId : undefined,
-);
-const generatesTrajectoryId = computed(
-  () => learningAutoStart.value && suppliedTrajectoryId.value === undefined,
-);
-
-function watchLearning() {
-  let learningContainerIds = learningConfig.value?.learningContainerIds;
-
+  // captured. The provider's onUnmounted disposes the starter (stops capture).
   watch(
-    [learningConfig, learningAutoStart],
-    ([config, autoStart]) => {
-      copilotkit.value.setLearningConfig(config);
-      learningContainerIds = config?.learningContainerIds;
-      // Automatic starts report unsupported options in Core. With manual
-      // starts, the provider's container option is not part of
-      // startTrajectory() options.
-      if (
-        config?.sink === undefined &&
-        !autoStart &&
-        config?.learningContainerIds !== undefined
-      ) {
-        console.warn(
-          "[CopilotKit] learningContainerIds is supported only with a custom sink. Authenticated Trajectory capture ignores it; assign Learning Spaces on the server with getTrajectoryLearningContainerIds on CopilotKitIntelligence, and remove learningContainerIds from the capture options.",
-        );
-      }
-    },
-    { immediate: true },
-  );
-
-  // Watched as a boolean so a new inline `learning` object warns once.
-  watch(
-    () =>
-      !learningAutoStart.value &&
-      learningConfig.value?.trajectoryId !== undefined,
-    (ignoresTrajectoryId) => {
-      if (!ignoresTrajectoryId) return;
-      console.warn(
-        "[CopilotKit] learning.trajectoryId is ignored when autoStart is false; pass the ID to startTrajectory() instead.",
-      );
+    () => props.learning,
+    (learning) => learningStarter.update(learning),
+    {
+      immediate: true,
     },
-    { immediate: true },
   );
+});
 
-  // Runs only when these change, so option changes that keep generating keep
-  // the generated Trajectory; generating again starts one with a new ID.
-  watch(
-    [learningEnabled, generatesTrajectoryId, suppliedTrajectoryId],
-    ([enabled, generates, supplied], _previous, onCleanup) => {
-      if (!enabled) return;
-      let disposed = false;
-      const core = copilotkit.value;
-      const trajectoryId = generates ? randomUUID() : supplied;
-      if (trajectoryId !== undefined) {
-        void core
-          .startTrajectory({ trajectoryId, learningContainerIds })
-          .catch(() => {
-            // Expected authentication/connection failures resolve with an
-            // error result; Core reports them to LearningConfig.onError or
-            // warns once. Consume unexpected rejections without logging
-            // credentials or errors from a previous start after a new
-            // Trajectory has already started.
-            if (!disposed) {
-              console.warn("[CopilotKit] Failed to start interaction capture.");
-            }
-          });
-      }
-      onCleanup(() => {
-        disposed = true;
-        core.stopTrajectory();
-      });
-    },
-    { immediate: true },
-  );
-}
+const learningStarter = new ɵLearningAutoStarter(copilotkit.value);
 
 const a2uiTheme = computed(() => props.a2ui?.theme);
 const a2uiCatalog = computed(() => props.a2ui?.catalog);
@@ -828,14 +551,17 @@ const a2uiIncludeSchema = computed(() => props.a2ui?.includeSchema ?? true);
 // A2UI tool call renderer (progress indicator) — auto-registered when A2UI enabled
 registerA2UIBuiltInToolCallRenderer(copilotkit, () => a2uiActive.value);
 
-// A2UI catalog context, schema, and generation/design guidelines
-registerA2UICatalogContext(copilotkit, {
+// A2UI catalog: component registration for the Inspector, the filtered
+// catalog, and the agent context (schema, generation/design guidelines).
+registerA2UICatalog(copilotkit, {
   enabled: () => a2uiActive.value,
   catalog: () => props.a2ui?.catalog,
   includeSchema: () => props.a2ui?.includeSchema ?? true,
+  onFilteredCatalog: (catalog) => {
+    a2uiFilteredCatalog.value = catalog;
+  },
 });
 
-const providerContextIds = ref<string[]>([]);
 watch(
   [
     openGenerativeUIActive,
@@ -845,40 +571,12 @@ watch(
   ([active, functions, designSkill], _previous, onCleanup) => {
     if (!active) return;
 
-    const ids: string[] = [];
-    ids.push(
-      copilotkit.value.addContext({
-        description:
-          "Design guidelines for the generateSandboxedUi tool. Follow these when building UI.",
-        value: designSkill ?? DEFAULT_DESIGN_SKILL,
+    onCleanup(
+      ɵaddOpenGenerativeUIContexts(copilotkit.value, {
+        designSkill,
+        sandboxFunctions: functions,
       }),
     );
-
-    if (functions.length > 0) {
-      const descriptors = JSON.stringify(
-        functions.map((fn) => ({
-          name: fn.name,
-          description: fn.description,
-          parameters: schemaToJsonSchema(fn.parameters, {
-            zodToJsonSchema: zodToJsonSchemaCompat,
-          }),
-        })),
-      );
-      ids.push(
-        copilotkit.value.addContext({
-          description:
-            "Sandbox functions available in generated sandboxed UI code. Call via Websandbox.connection.remote.<functionName>(args).",
-          value: descriptors,
-        }),
-      );
-    }
-
-    providerContextIds.value = ids;
-    onCleanup(() => {
-      for (const id of ids) {
-        copilotkit.value.removeContext(id);
-      }
-    });
   },
   { immediate: true },
 );
@@ -894,73 +592,27 @@ provide(CopilotKitKey, {
 provide(SandboxFunctionsKey, sandboxFunctions);
 provide(MARKDOWN_RENDERER_KEY, props.markdownRenderer);
 
-// 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,
-);
-// Only a terminal failure denies features. A retryable failure (a timeout,
-// a network error, a 5xx) says nothing about what the project may use.
-const terminalRuntimeEntitlementFailure = computed(
-  () =>
-    hasNonReadyRuntimeEntitlement.value &&
-    !retryableRuntimeEntitlementFailure.value &&
-    !hasLegacyRuntimeEntitlementFallback.value,
-);
-const licenseContextValue = computed<LicenseContextValue>(() => {
-  const runtimeLicenseContext = createLicenseContextValue(
-    runtimeEntitlementRetryInProgress.value
-      ? undefined
-      : runtimeLicenseStatus.value,
-    runtimeEntitlements.value,
-  );
-  if (!terminalRuntimeEntitlementFailure.value) {
-    return runtimeLicenseContext;
-  }
-
-  return {
-    ...runtimeLicenseContext,
-    checkFeature: () => false,
-    getLimit: () => null,
-  };
-});
+// License context and banner, from the runtime license status and the
+// structured entitlement response.
+const licenseState = computed(() =>
+  ɵresolveLicenseState({
+    status: runtimeLicenseStatus.value,
+    entitlements: runtimeEntitlements.value,
+    retryPending: runtimeEntitlementRetryPending.value,
+    publicKey: resolvedPublicKey.value,
+  }),
+);
+const licenseContextValue = computed(() => licenseState.value.context);
 provide(LicenseContextKey, licenseContextValue);
-
-const runtimeLicenseWarningStatus = computed(() =>
-  runtimeEntitlementRetryInProgress.value
-    ? undefined
-    : (licenseContextValue.value.status ?? undefined),
-);
-const showNoLicenseBanner = computed(
-  () =>
-    runtimeLicenseWarningStatus.value === "none" && !resolvedPublicKey.value,
-);
-const showExpiredBanner = computed(
-  () => runtimeLicenseWarningStatus.value === "expired",
-);
-const showInvalidBanner = computed(
-  () => runtimeLicenseWarningStatus.value === "invalid",
-);
-const showExpiringBanner = computed(
-  () => runtimeLicenseWarningStatus.value === "expiring",
-);
+const licenseBannerType = computed(() => licenseState.value.bannerType);
+
+// The provider created this core, so it stops the core's runs, timers and
+// subscriptions. `onUnmounted` runs after the children unmount, so their
+// cleanup still reaches a live core.
+onUnmounted(() => {
+  learningStarter.dispose();
+  copilotkit.value.dispose();
+});
 </script>
 
 <template>
@@ -969,10 +621,8 @@ const showExpiringBanner = computed(
     v-if="shouldRenderInspector"
     :core="copilotkit"
     :open-request="inspectorOpenRequest"
+    @visibility-change="inspectorVisible = $event"
   />
   <!-- License warnings — driven by server-reported status -->
-  <LicenseWarningBanner v-if="showNoLicenseBanner" type="no_license" />
-  <LicenseWarningBanner v-if="showExpiredBanner" type="expired" />
-  <LicenseWarningBanner v-if="showInvalidBanner" type="invalid" />
-  <LicenseWarningBanner v-if="showExpiringBanner" type="expiring" />
+  <LicenseWarningBanner v-if="licenseBannerType" :type="licenseBannerType" />
 </template>