@copilotkit/react-core 1.57.0 → 1.57.1

package/src/v2/hooks/__tests__/use-interrupt.test.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { act, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { useInterrupt } from "../use-interrupt";
-import { useCopilotKit } from "../../providers/CopilotKitProvider";
+import { useCopilotKit } from "../../context";
 import { useAgent } from "../use-agent";
 
-vi.mock("../../providers/CopilotKitProvider", () => ({
+vi.mock("../../context", () => ({
   useCopilotKit: vi.fn(),
 }));
 

package/src/v2/hooks/__tests__/use-render-tool.test.tsx

@@ -3,10 +3,10 @@ import { render } from "@testing-library/react";
 import { describe, it, expect, beforeEach, vi } from "vitest";
 import { z } from "zod";
 import { useRenderTool, type RenderToolProps } from "../use-render-tool";
-import { useCopilotKit } from "../../providers/CopilotKitProvider";
+import { useCopilotKit } from "../../context";
 import type { ReactToolCallRenderer } from "../../types/react-tool-call-renderer";
 
-vi.mock("../../providers/CopilotKitProvider", () => ({
+vi.mock("../../context", () => ({
   useCopilotKit: vi.fn(),
 }));
 

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

@@ -1,13 +1,13 @@
 import React from "react";
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { afterAll, beforeEach, describe, expect, it, vi } from "vitest";
-import { useCopilotKit } from "../../providers/CopilotKitProvider";
+import { useCopilotKit } from "../../context";
 import {
   CopilotKitCoreRuntimeConnectionStatus,
   ɵMAX_SOCKET_RETRIES,
 } from "@copilotkit/core";
 
-vi.mock("../../providers/CopilotKitProvider", () => ({
+vi.mock("../../context", () => ({
   useCopilotKit: vi.fn(),
 }));
 

package/src/v2/hooks/__tests__/zod-regression.test.tsx

@@ -15,11 +15,11 @@ import { z } from "zod";
 import { useRenderTool } from "../use-render-tool";
 import { useComponent } from "../use-component";
 import { defineToolCallRenderer } from "../../types/defineToolCallRenderer";
-import { useCopilotKit } from "../../providers/CopilotKitProvider";
+import { useCopilotKit } from "../../context";
 import { useFrontendTool } from "../use-frontend-tool";
 import type { ReactToolCallRenderer } from "../../types/react-tool-call-renderer";
 
-vi.mock("../../providers/CopilotKitProvider", () => ({
+vi.mock("../../context", () => ({
   useCopilotKit: vi.fn(),
 }));
 

package/src/v2/hooks/use-agent-context.tsx

@@ -1,4 +1,4 @@
-import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { useCopilotKit } from "../context";
 import { useLayoutEffect, useMemo } from "react";
 
 /**

package/src/v2/hooks/use-agent.tsx

@@ -1,5 +1,4 @@
-import { useCopilotKit } from "../providers/CopilotKitProvider";
-import { useCopilotChatConfiguration } from "../providers/CopilotChatConfigurationProvider";
+import { useCopilotKit } from "../context";
 import { useMemo, useEffect, useReducer, useRef } from "react";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { AbstractAgent, HttpAgent } from "@ag-ui/client";
@@ -23,7 +22,6 @@ const ALL_UPDATES: UseAgentUpdate[] = [
 
 export interface UseAgentProps {
   agentId?: string;
-  threadId?: string;
   updates?: UseAgentUpdate[];
   /**
    * Throttle interval (in milliseconds) for re-renders triggered by
@@ -50,80 +48,7 @@ export interface UseAgentProps {
   throttleMs?: number;
 }
 
-/**
- * Clone a registry agent for per-thread isolation.
- * Copies agent configuration (transport, headers, etc.) but resets conversation
- * state (messages, threadId, state) so each thread starts fresh.
- */
-function cloneForThread(
-  source: AbstractAgent,
-  threadId: string,
-  headers: Record<string, string>,
-): AbstractAgent {
-  const clone = source.clone();
-  if (clone === source) {
-    throw new Error(
-      `useAgent: ${source.constructor.name}.clone() returned the same instance. ` +
-        `clone() must return a new, independent object.`,
-    );
-  }
-  clone.threadId = threadId;
-  clone.setMessages([]);
-  clone.setState({});
-  if (clone instanceof HttpAgent) {
-    clone.headers = { ...headers };
-  }
-  return clone;
-}
-
-/**
- * Module-level WeakMap: registryAgent → (threadId → clone).
- * Shared across all useAgent() calls so that every component using the same
- * (agentId, threadId) pair receives the same agent instance. Using WeakMap
- * ensures the clone map is garbage-collected when the registry agent is
- * replaced (e.g. after reconnect or hot-reload).
- */
-export const globalThreadCloneMap = new WeakMap<
-  AbstractAgent,
-  Map<string, AbstractAgent>
->();
-
-/**
- * Look up an existing per-thread clone without creating one.
- * Returns undefined when no clone has been created yet for this pair.
- */
-export function getThreadClone(
-  registryAgent: AbstractAgent | undefined | null,
-  threadId: string | undefined | null,
-): AbstractAgent | undefined {
-  if (!registryAgent || !threadId) return undefined;
-  return globalThreadCloneMap.get(registryAgent)?.get(threadId);
-}
-
-function getOrCreateThreadClone(
-  existing: AbstractAgent,
-  threadId: string,
-  headers: Record<string, string>,
-): AbstractAgent {
-  let byThread = globalThreadCloneMap.get(existing);
-  if (!byThread) {
-    byThread = new Map();
-    globalThreadCloneMap.set(existing, byThread);
-  }
-  const cached = byThread.get(threadId);
-  if (cached) return cached;
-
-  const clone = cloneForThread(existing, threadId, headers);
-  byThread.set(threadId, clone);
-  return clone;
-}
-
-export function useAgent({
-  agentId,
-  threadId,
-  updates,
-  throttleMs,
-}: UseAgentProps = {}) {
+export function useAgent({ agentId, updates, throttleMs }: UseAgentProps = {}) {
   agentId ??= DEFAULT_AGENT_ID;
 
   const { copilotkit } = useCopilotKit();
@@ -131,12 +56,6 @@ export function useAgent({
   // subscribeToAgentWithOptions reads it from the core instance, but React needs the dep
   // to know when to re-subscribe.
   const providerThrottleMs = copilotkit.defaultThrottleMs;
-  // Fall back to the enclosing CopilotChatConfigurationProvider's threadId so
-  // that useAgent() called without explicit threadId (e.g. inside a custom
-  // message renderer) automatically uses the same per-thread clone as the
-  // CopilotChat component it lives within.
-  const chatConfig = useCopilotChatConfiguration();
-  threadId ??= chatConfig?.threadId;
 
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
@@ -153,29 +72,11 @@ export function useAgent({
   );
 
   const agent: AbstractAgent = useMemo(() => {
-    // Use a composite key when threadId is provided so that different threads
-    // for the same agent get independent instances.
-    const cacheKey = threadId ? `${agentId}:${threadId}` : agentId;
-
     const existing = copilotkit.getAgent(agentId);
     if (existing) {
-      // Real agent found — clear any cached provisionals for this key and the
-      // bare agentId key (handles the case where a provisional was created
-      // before threadId was available, then the component re-renders with one).
-      provisionalAgentCache.current.delete(cacheKey);
+      // Real agent found — clear any cached provisional for this ID
       provisionalAgentCache.current.delete(agentId);
-
-      if (!threadId) {
-        // No threadId — return the shared registry agent (original behavior)
-        return existing;
-      }
-
-      // threadId provided — return the shared per-thread clone.
-      // The global WeakMap ensures all components using the same
-      // (registryAgent, threadId) pair receive the same instance, so state
-      // mutations (addMessage, setState) are visible everywhere. The WeakMap
-      // entry is GC-collected automatically when the registry agent is replaced.
-      return getOrCreateThreadClone(existing, threadId, copilotkit.headers);
+      return existing;
     }
 
     const isRuntimeConfigured = copilotkit.runtimeUrl !== undefined;
@@ -188,7 +89,7 @@ export function useAgent({
         status === CopilotKitCoreRuntimeConnectionStatus.Connecting)
     ) {
       // Return cached provisional if available (keeps reference stable)
-      const cached = provisionalAgentCache.current.get(cacheKey);
+      const cached = provisionalAgentCache.current.get(agentId);
       if (cached) {
         // Update headers on the cached agent in case they changed
         cached.headers = { ...copilotkit.headers };
@@ -203,10 +104,7 @@ export function useAgent({
       });
       // Apply current headers so runs/connects inherit them
       provisional.headers = { ...copilotkit.headers };
-      if (threadId) {
-        provisional.threadId = threadId;
-      }
-      provisionalAgentCache.current.set(cacheKey, provisional);
+      provisionalAgentCache.current.set(agentId, provisional);
       return provisional;
     }
 
@@ -219,10 +117,7 @@ export function useAgent({
       isRuntimeConfigured &&
       status === CopilotKitCoreRuntimeConnectionStatus.Error
     ) {
-      // Cache the provisional so that dep changes while in Error state (e.g.
-      // headers update) return the same agent reference, matching the
-      // Disconnected/Connecting path and preventing spurious re-subscriptions.
-      const cached = provisionalAgentCache.current.get(cacheKey);
+      const cached = provisionalAgentCache.current.get(agentId);
       if (cached) {
         cached.headers = { ...copilotkit.headers };
         return cached;
@@ -234,10 +129,7 @@ export function useAgent({
         runtimeMode: "pending",
       });
       provisional.headers = { ...copilotkit.headers };
-      if (threadId) {
-        provisional.threadId = threadId;
-      }
-      provisionalAgentCache.current.set(cacheKey, provisional);
+      provisionalAgentCache.current.set(agentId, provisional);
       return provisional;
     }
 
@@ -256,7 +148,6 @@ export function useAgent({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     agentId,
-    threadId,
     copilotkit.agents,
     copilotkit.runtimeConnectionStatus,
     copilotkit.runtimeUrl,
@@ -290,7 +181,7 @@ export function useAgent({
     };
 
     if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) {
-      handlers.onMessagesChanged = forceUpdate;
+      handlers.onMessagesChanged = batchedForceUpdate;
     }
 
     if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) {

package/src/v2/hooks/use-configure-suggestions.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { useCopilotKit } from "../context";
 import { useCopilotChatConfiguration } from "../providers/CopilotChatConfigurationProvider";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import type {

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

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { useCopilotKit } from "../context";
 import type { ReactFrontendTool } from "../types/frontend-tool";
 
 const EMPTY_DEPS: ReadonlyArray<unknown> = [];
@@ -42,5 +42,5 @@ export function useFrontendTool<
     // Depend on stable keys by default and allow callers to opt into
     // additional dependencies for dynamic tool configuration.
     // tool.available is included so toggling availability re-registers the tool.
-  }, [tool.name, tool.available, copilotkit, extraDeps.length, ...extraDeps]);
+  }, [tool.name, tool.available, copilotkit, JSON.stringify(extraDeps)]);
 }

package/src/v2/hooks/use-human-in-the-loop.tsx

@@ -1,4 +1,4 @@
-import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { useCopilotKit } from "../context";
 import type { ReactFrontendTool } from "../types/frontend-tool";
 import type { ReactHumanInTheLoop } from "../types/human-in-the-loop";
 import type { ReactToolCallRenderer } from "../types/react-tool-call-renderer";

package/src/v2/hooks/use-interrupt.tsx

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useRef,
 } from "react";
-import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { useCopilotKit } from "../context";
 import { useAgent } from "./use-agent";
 import type {
   InterruptEvent,

package/src/v2/hooks/use-render-activity-message.tsx

@@ -3,12 +3,10 @@ import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { useCopilotKit, useCopilotChatConfiguration } from "../providers";
 import { useCallback, useMemo } from "react";
 import { ReactActivityMessageRenderer } from "../types";
-import { getThreadClone } from "./use-agent";
 
 export function useRenderActivityMessage() {
   const { copilotkit } = useCopilotKit();
-  const config = useCopilotChatConfiguration();
-  const agentId = config?.agentId ?? DEFAULT_AGENT_ID;
+  const agentId = useCopilotChatConfiguration()?.agentId ?? DEFAULT_AGENT_ID;
 
   const renderers = copilotkit.renderActivityMessages;
 
@@ -52,13 +50,7 @@ export function useRenderActivityMessage() {
       }
 
       const Component = renderer.render;
-      // Prefer the per-thread clone so that handleAction in ReactSurfaceHost
-      // calls runAgent on the same agent instance that CopilotChat renders from.
-      // Without this, button clicks accumulate messages on the registry agent
-      // while CopilotChat displays from the clone — responses appear to vanish.
-      const registryAgent = copilotkit.getAgent(agentId);
-      const agent =
-        getThreadClone(registryAgent, config?.threadId) ?? registryAgent;
+      const agent = copilotkit.getAgent(agentId);
 
       return (
         <Component
@@ -70,7 +62,7 @@ export function useRenderActivityMessage() {
         />
       );
     },
-    [agentId, config?.threadId, copilotkit, findRenderer],
+    [agentId, copilotkit, findRenderer],
   );
 
   return useMemo(

package/src/v2/hooks/use-render-custom-messages.tsx

@@ -1,5 +1,4 @@
 import { useCopilotChatConfiguration, useCopilotKit } from "../providers";
-import { getThreadClone } from "./use-agent";
 import { ReactCustomMessageRendererPosition } from "../types/react-custom-message-renderer";
 import { Message } from "@ag-ui/core";
 
@@ -39,11 +38,7 @@ export function useRenderCustomMessages() {
       copilotkit.getRunIdForMessage(agentId, threadId, message.id) ??
       copilotkit.getRunIdsForThread(agentId, threadId).slice(-1)[0];
     const runId = resolvedRunId ?? `missing-run-id:${message.id}`;
-    // Prefer the per-thread clone so that agent.messages reflects the actual
-    // conversation state (messages live on the clone, not the registry agent).
-    // Fall back to the registry agent when no clone exists (no threadId).
-    const registryAgent = copilotkit.getAgent(agentId);
-    const agent = getThreadClone(registryAgent, threadId) ?? registryAgent;
+    const agent = copilotkit.getAgent(agentId);
     if (!agent) {
       return null;
     }

package/src/v2/hooks/use-render-tool-call.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useSyncExternalStore } from "react";
 import { ToolCall, ToolMessage } from "@ag-ui/core";
 import { ToolCallStatus } from "@copilotkit/core";
-import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { useCopilotKit } from "../context";
 import { useCopilotChatConfiguration } from "../providers/CopilotChatConfigurationProvider";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 import { partialJSONParse } from "@copilotkit/shared";

package/src/v2/hooks/use-render-tool.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import type { StandardSchemaV1, InferSchemaOutput } from "@copilotkit/shared";
-import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { useCopilotKit } from "../context";
 import { defineToolCallRenderer } from "../types/defineToolCallRenderer";
 
 const EMPTY_DEPS: ReadonlyArray<unknown> = [];
@@ -180,5 +180,5 @@ export function useRenderTool<S extends StandardSchemaV1>(
     copilotkit.addHookRenderToolCall(renderer);
 
     // No cleanup removal — keeps renderer for chat history, same as useFrontendTool
-  }, [config.name, copilotkit, extraDeps.length, ...extraDeps]);
+  }, [config.name, copilotkit, JSON.stringify(extraDeps)]);
 }

package/src/v2/hooks/use-suggestions.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Suggestion } from "@copilotkit/core";
-import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { useCopilotKit } from "../context";
 import { useCopilotChatConfiguration } from "../providers/CopilotChatConfigurationProvider";
 import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
 

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

@@ -1,4 +1,4 @@
-import { useCopilotKit } from "../providers/CopilotKitProvider";
+import { useCopilotKit } from "../context";
 import {
   CopilotKitCoreRuntimeConnectionStatus,
   ɵcreateThreadStore,

package/src/v2/providers/CopilotKitProvider.tsx

@@ -4,8 +4,6 @@ import type { AbstractAgent } from "@ag-ui/client";
 import type { FrontendTool } from "@copilotkit/core";
 import type React from "react";
 import {
-  createContext,
-  useContext,
   type ReactNode,
   useMemo,
   useEffect,
@@ -14,6 +12,14 @@ import {
   useRef,
   useState,
 } from "react";
+// Context extracted to ../context.ts for cross-platform reuse (React Native)
+import {
+  CopilotKitContext,
+  type CopilotKitContextValue,
+  LicenseContext,
+} from "../context";
+export type { CopilotKitContextValue } from "../context";
+export { CopilotKitContext, useLicenseContext } from "../context";
 import { z } from "zod";
 import { CopilotKitInspector } from "../components/CopilotKitInspector";
 import type { Anchor } from "@copilotkit/web-inspector";
@@ -81,34 +87,6 @@ const GENERATE_SANDBOXED_UI_DESCRIPTION =
   "3. html (streams in live — the user watches the UI build as HTML is generated)\n" +
   "4. jsFunctions (reusable helper functions)\n" +
   "5. jsExpressions (applied one-by-one — the user sees each expression take effect)";
-
-// Define the context value interface - idiomatic React naming
-export interface CopilotKitContextValue {
-  copilotkit: CopilotKitCoreReact;
-  /**
-   * Set of tool call IDs currently being executed.
-   * This is tracked at the provider level to ensure tool execution events
-   * are captured even before child components mount.
-   */
-  executingToolCallIds: ReadonlySet<string>;
-}
-
-// Empty set for default context value
-const EMPTY_SET: ReadonlySet<string> = new Set();
-
-// Create the CopilotKit context
-const CopilotKitContext = createContext<CopilotKitContextValue>({
-  copilotkit: null!,
-  executingToolCallIds: EMPTY_SET,
-});
-
-const LicenseContext = createContext<LicenseContextValue>(
-  createLicenseContextValue(null),
-);
-
-export const useLicenseContext = (): LicenseContextValue =>
-  useContext(LicenseContext);
-
 // Provider props interface
 export interface CopilotKitProviderProps {
   children: ReactNode;
@@ -642,15 +620,17 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
   }, [onError]);
 
   useEffect(() => {
-    if (!onErrorRef.current) return;
-
     const subscription = copilotkit.subscribe({
       onError: (event) => {
-        onErrorRef.current?.({
-          error: event.error,
-          code: event.code,
-          context: event.context,
-        });
+        if (onErrorRef.current) {
+          onErrorRef.current(event);
+        } else {
+          console.error(
+            `[CopilotKit] Error (${event.code}):`,
+            event.error,
+            event.context ?? {},
+          );
+        }
       },
     });
 
@@ -816,25 +796,5 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
   );
 };
 
-// Hook to use the CopilotKit instance - returns the full context value
-export const useCopilotKit = (): CopilotKitContextValue => {
-  const context = useContext(CopilotKitContext);
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
-
-  if (!context) {
-    throw new Error("useCopilotKit must be used within CopilotKitProvider");
-  }
-  useEffect(() => {
-    const subscription = context.copilotkit.subscribe({
-      onRuntimeConnectionStatusChanged: () => {
-        forceUpdate();
-      },
-    });
-    return () => {
-      subscription.unsubscribe();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return context;
-};
+// Re-export useCopilotKit from context for backward compatibility
+export { useCopilotKit } from "../context";

package/src/v2/styles/globals.css

@@ -229,3 +229,121 @@
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+/*
+ * IntelligenceIndicator pill — visual styles ported from
+ * CopilotKit/Intelligence #155.
+ *
+ * Violet/indigo glassmorphism — text #5B21B6, icon #7C3AED, border
+ * #9599E0, gradient stop #EEE6FE, soft shadow #5E64AD.
+ */
+.cpk-intelligence-pill {
+  display: inline-flex;
+  /* Opt out of the parent flex-column's default `align-items: stretch`
+     (the auto-mount lives inside `CopilotChatMessageView`'s
+     `cpk:flex cpk:flex-col` container). Without this the pill would
+     stretch to the full chat width even though `inline-flex` is
+     supposed to shrink to its content. */
+  align-self: flex-start;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 0.4rem 0;
+  padding: 0.4rem 0.85rem;
+  border: 1px solid rgb(149 153 224 / 0.32);
+  border-radius: 999px;
+  background: linear-gradient(
+    135deg,
+    rgb(255 255 255 / 0.55) 0%,
+    rgb(238 230 254 / 0.55) 100%
+  );
+  -webkit-backdrop-filter: blur(14px) saturate(160%);
+  backdrop-filter: blur(14px) saturate(160%);
+  color: rgb(91 33 182 / 0.92);
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  box-shadow:
+    0 1px 2px rgb(94 100 173 / 0.06),
+    0 8px 24px rgb(149 153 224 / 0.08),
+    inset 0 1px 0 rgb(255 255 255 / 0.6);
+  opacity: 0;
+  transform: translateY(2px);
+  animation: cpk-intelligence-pill-fade-in 280ms ease-out forwards;
+}
+
+.cpk-intelligence-pill--fading {
+  /* Switching the `animation` property cancels the in-flight fade-in
+     and replaces the held final-value (opacity:1 from `forwards`) with
+     this fade-out keyframe set. Plain `opacity: 0` declarations would
+     otherwise lose to the animation's held value. */
+  animation: cpk-intelligence-pill-fade-out 480ms ease-out forwards;
+  pointer-events: none;
+}
+
+.cpk-intelligence-pill__icon {
+  display: block;
+  flex-shrink: 0;
+  color: rgb(124 58 237);
+}
+
+.cpk-intelligence-pill__ring {
+  stroke: currentColor;
+  stroke-dasharray: 40 16.55;
+  stroke-dashoffset: 0;
+  transform-origin: 12px 12px;
+  animation: cpk-intelligence-pill-spin 0.9s linear infinite;
+  transition: stroke-dasharray 320ms ease-out;
+}
+
+.cpk-intelligence-pill__ring--done {
+  stroke-dasharray: 56.55 0;
+  animation: none;
+}
+
+.cpk-intelligence-pill__check {
+  stroke: currentColor;
+  stroke-dasharray: 12;
+  stroke-dashoffset: 12;
+  /* Opacity zero hides the rounded `stroke-linecap` end-cap that would
+     otherwise leak through as a stationary dot at path end (16, 9.5)
+     during spinner phase. The `dasharray + dashoffset` zeroes the
+     visible stroke length, but the cap is drawn at the dash boundary
+     regardless, so we need opacity to fully hide it. */
+  opacity: 0;
+  transition:
+    stroke-dashoffset 320ms ease-out 200ms,
+    opacity 200ms ease-out 200ms;
+}
+
+.cpk-intelligence-pill__check--shown {
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+
+@keyframes cpk-intelligence-pill-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes cpk-intelligence-pill-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes cpk-intelligence-pill-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}