@copilotkitnext/react 1.52.2-next.1 → 1.52.2-next.3

package/dist/components/chat/CopilotSidebarView.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"CopilotSidebarView.d.cts","names":[],"sources":["../../../src/components/chat/CopilotSidebarView.tsx"],"mappings":";;;;;;;;KAkBY,uBAAA,GAA0B,oBAAA;EACpC,MAAA,GAAS,SAAA,QAAiB,kBAAA;EAC1B,YAAA,GAAe,SAAA,QAAiB,uBAAA;EAChC,KAAA;EACA,WAAA;AAAA;AAAA,iBAGc,kBAAA,CAAA;EACd,MAAA;EACA,YAAA;EACA,KAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBANV,kBAAA;EAAA,IAAkB,WAAA;AAAA;AAAA,kBAuKjB,kBAAA;EA5KS;;;;;;EAAA,MAmLX,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA;AAAA"}
+{"version":3,"file":"CopilotSidebarView.d.cts","names":[],"sources":["../../../src/components/chat/CopilotSidebarView.tsx"],"mappings":";;;;;;;;KAkBY,uBAAA,GAA0B,oBAAA;EACpC,MAAA,GAAS,SAAA,QAAiB,kBAAA;EAC1B,YAAA,GAAe,SAAA,QAAiB,uBAAA;EAChC,KAAA;EACA,WAAA;AAAA;AAAA,iBAGc,kBAAA,CAAA;EACd,MAAA;EACA,YAAA;EACA,KAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBANV,kBAAA;EAAA,IAAkB,WAAA;AAAA;AAAA,kBAwKjB,kBAAA;EA7KS;;;;;;EAAA,MAoLX,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA;AAAA"}

package/dist/components/chat/CopilotSidebarView.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"CopilotSidebarView.d.mts","names":[],"sources":["../../../src/components/chat/CopilotSidebarView.tsx"],"mappings":";;;;;;;;KAkBY,uBAAA,GAA0B,oBAAA;EACpC,MAAA,GAAS,SAAA,QAAiB,kBAAA;EAC1B,YAAA,GAAe,SAAA,QAAiB,uBAAA;EAChC,KAAA;EACA,WAAA;AAAA;AAAA,iBAGc,kBAAA,CAAA;EACd,MAAA;EACA,YAAA;EACA,KAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBANV,kBAAA;EAAA,IAAkB,WAAA;AAAA;AAAA,kBAuKjB,kBAAA;EA5KS;;;;;;EAAA,MAmLX,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA;AAAA"}
+{"version":3,"file":"CopilotSidebarView.d.mts","names":[],"sources":["../../../src/components/chat/CopilotSidebarView.tsx"],"mappings":";;;;;;;;KAkBY,uBAAA,GAA0B,oBAAA;EACpC,MAAA,GAAS,SAAA,QAAiB,kBAAA;EAC1B,YAAA,GAAe,SAAA,QAAiB,uBAAA;EAChC,KAAA;EACA,WAAA;AAAA;AAAA,iBAGc,kBAAA,CAAA;EACd,MAAA;EACA,YAAA;EACA,KAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBANV,kBAAA;EAAA,IAAkB,WAAA;AAAA;AAAA,kBAwKjB,kBAAA;EA7KS;;;;;;EAAA,MAoLX,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA;AAAA"}

package/dist/components/chat/CopilotSidebarView.mjs

@@ -73,7 +73,7 @@ function CopilotSidebarViewInternal({ header, toggleButton, width, ...props }) {
 		"data-copilotkit": true,
 		"data-testid": "copilot-sidebar",
 		"data-copilot-sidebar": true,
-		className: cn("cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : "cpk:translate-x-full cpk:pointer-events-none"),
+		className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : "cpk:translate-x-full cpk:pointer-events-none"),
 		style: {
 			["--sidebar-width"]: widthToCss(sidebarWidth),
 			paddingTop: "env(safe-area-inset-top)",

package/dist/components/chat/CopilotSidebarView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopilotSidebarView.mjs","names":["CopilotChatView"],"sources":["../../../src/components/chat/CopilotSidebarView.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport CopilotChatView, {\n  CopilotChatViewProps,\n  WelcomeScreenProps,\n} from \"./CopilotChatView\";\nimport {\n  CopilotChatConfigurationProvider,\n  useCopilotChatConfiguration,\n} from \"@/providers/CopilotChatConfigurationProvider\";\nimport CopilotChatToggleButton from \"./CopilotChatToggleButton\";\nimport { cn } from \"@/lib/utils\";\nimport { CopilotModalHeader } from \"./CopilotModalHeader\";\nimport { renderSlot, SlotValue } from \"@/lib/slots\";\n\nconst DEFAULT_SIDEBAR_WIDTH = 480;\nconst SIDEBAR_TRANSITION_MS = 260;\n\nexport type CopilotSidebarViewProps = CopilotChatViewProps & {\n  header?: SlotValue<typeof CopilotModalHeader>;\n  toggleButton?: SlotValue<typeof CopilotChatToggleButton>;\n  width?: number | string;\n  defaultOpen?: boolean;\n};\n\nexport function CopilotSidebarView({\n  header,\n  toggleButton,\n  width,\n  defaultOpen = true,\n  ...props\n}: CopilotSidebarViewProps) {\n  return (\n    <CopilotChatConfigurationProvider isModalDefaultOpen={defaultOpen}>\n      <CopilotSidebarViewInternal\n        header={header}\n        toggleButton={toggleButton}\n        width={width}\n        {...props}\n      />\n    </CopilotChatConfigurationProvider>\n  );\n}\n\nfunction CopilotSidebarViewInternal({\n  header,\n  toggleButton,\n  width,\n  ...props\n}: Omit<CopilotSidebarViewProps, \"defaultOpen\">) {\n  const configuration = useCopilotChatConfiguration();\n\n  const isSidebarOpen = configuration?.isModalOpen ?? false;\n\n  const sidebarRef = useRef<HTMLDivElement | null>(null);\n  const [sidebarWidth, setSidebarWidth] = useState<number | string>(\n    width ?? DEFAULT_SIDEBAR_WIDTH,\n  );\n\n  // Helper to convert width to CSS value\n  const widthToCss = (w: number | string): string => {\n    return typeof w === \"number\" ? `${w}px` : w;\n  };\n\n  // Helper to extract numeric value for body margin (only works with px values)\n  const widthToMargin = (w: number | string): string => {\n    if (typeof w === \"number\") {\n      return `${w}px`;\n    }\n    // For string values, use as-is (assumes valid CSS unit)\n    return w;\n  };\n\n  useEffect(() => {\n    // If width is explicitly provided, don't measure\n    if (width !== undefined) {\n      return;\n    }\n\n    if (typeof window === \"undefined\") {\n      return;\n    }\n\n    const element = sidebarRef.current;\n    if (!element) {\n      return;\n    }\n\n    const updateWidth = () => {\n      const rect = element.getBoundingClientRect();\n      if (rect.width > 0) {\n        setSidebarWidth(rect.width);\n      }\n    };\n\n    updateWidth();\n\n    if (typeof ResizeObserver !== \"undefined\") {\n      const observer = new ResizeObserver(() => updateWidth());\n      observer.observe(element);\n      return () => observer.disconnect();\n    }\n\n    window.addEventListener(\"resize\", updateWidth);\n    return () => window.removeEventListener(\"resize\", updateWidth);\n  }, [width]);\n\n  // Manage body margin for sidebar docking (desktop only).\n  // useLayoutEffect runs before paint, so defaultOpen={true} never causes a\n  // visible layout shift — the margin is already applied on the first frame.\n  const hasMounted = useRef(false);\n\n  useLayoutEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    )\n      return;\n    if (!window.matchMedia(\"(min-width: 768px)\").matches) return;\n\n    if (isSidebarOpen) {\n      if (hasMounted.current) {\n        document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;\n      }\n      document.body.style.marginInlineEnd = widthToMargin(sidebarWidth);\n    } else if (hasMounted.current) {\n      document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;\n      document.body.style.marginInlineEnd = \"\";\n    }\n\n    hasMounted.current = true;\n\n    return () => {\n      document.body.style.marginInlineEnd = \"\";\n      document.body.style.transition = \"\";\n    };\n  }, [isSidebarOpen, sidebarWidth]);\n\n  const headerElement = renderSlot(header, CopilotModalHeader, {});\n  const toggleButtonElement = renderSlot(\n    toggleButton,\n    CopilotChatToggleButton,\n    {},\n  );\n\n  return (\n    <>\n      {toggleButtonElement}\n      <aside\n        ref={sidebarRef}\n        data-copilotkit\n        data-testid=\"copilot-sidebar\"\n        data-copilot-sidebar\n        className={cn(\n          \"cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex\",\n          // Height with dvh fallback and safe area support\n          \"cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen\",\n          // Responsive width: full on mobile, custom on desktop\n          \"cpk:w-full\",\n          \"cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl\",\n          \"cpk:transition-transform cpk:duration-300 cpk:ease-out\",\n          isSidebarOpen\n            ? \"cpk:translate-x-0\"\n            : \"cpk:translate-x-full cpk:pointer-events-none\",\n        )}\n        style={\n          {\n            // Use CSS custom property for responsive width\n            [\"--sidebar-width\" as string]: widthToCss(sidebarWidth),\n            // Safe area insets for iOS\n            paddingTop: \"env(safe-area-inset-top)\",\n            paddingBottom: \"env(safe-area-inset-bottom)\",\n          } as React.CSSProperties\n        }\n        aria-hidden={!isSidebarOpen}\n        aria-label=\"Copilot chat sidebar\"\n        role=\"complementary\"\n      >\n        <div className=\"cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden\">\n          {headerElement}\n          <div className=\"cpk:flex-1 cpk:overflow-hidden\" data-sidebar-chat>\n            <CopilotChatView {...props} />\n          </div>\n        </div>\n      </aside>\n    </>\n  );\n}\n\nCopilotSidebarView.displayName = \"CopilotSidebarView\";\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport namespace CopilotSidebarView {\n  /**\n   * Sidebar-specific welcome screen layout:\n   * - Suggestions at the top\n   * - Welcome message in the middle\n   * - Input fixed at the bottom (like normal chat)\n   */\n  export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({\n    welcomeMessage,\n    input,\n    suggestionView,\n    className,\n    children,\n    ...props\n  }) => {\n    // Render the welcomeMessage slot internally\n    const BoundWelcomeMessage = renderSlot(\n      welcomeMessage,\n      CopilotChatView.WelcomeMessage,\n      {},\n    );\n\n    if (children) {\n      return (\n        <div data-copilotkit style={{ display: \"contents\" }}>\n          {children({\n            welcomeMessage: BoundWelcomeMessage,\n            input,\n            suggestionView,\n            className,\n            ...props,\n          })}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        className={cn(\"cpk:h-full cpk:flex cpk:flex-col\", className)}\n        {...props}\n      >\n        {/* Welcome message - centered vertically */}\n        <div className=\"cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4\">\n          {BoundWelcomeMessage}\n        </div>\n\n        {/* Suggestions and input at bottom */}\n        <div className=\"cpk:px-8 cpk:pb-4\">\n          <div className=\"cpk:max-w-3xl cpk:mx-auto\">\n            {/* Suggestions above input */}\n            <div className=\"cpk:mb-4 cpk:flex cpk:justify-center\">\n              {suggestionView}\n            </div>\n            {input}\n          </div>\n        </div>\n      </div>\n    );\n  };\n}\n\nexport default CopilotSidebarView;\n"],"mappings":"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"}
+{"version":3,"file":"CopilotSidebarView.mjs","names":["CopilotChatView"],"sources":["../../../src/components/chat/CopilotSidebarView.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\nimport CopilotChatView, {\n  CopilotChatViewProps,\n  WelcomeScreenProps,\n} from \"./CopilotChatView\";\nimport {\n  CopilotChatConfigurationProvider,\n  useCopilotChatConfiguration,\n} from \"@/providers/CopilotChatConfigurationProvider\";\nimport CopilotChatToggleButton from \"./CopilotChatToggleButton\";\nimport { cn } from \"@/lib/utils\";\nimport { CopilotModalHeader } from \"./CopilotModalHeader\";\nimport { renderSlot, SlotValue } from \"@/lib/slots\";\n\nconst DEFAULT_SIDEBAR_WIDTH = 480;\nconst SIDEBAR_TRANSITION_MS = 260;\n\nexport type CopilotSidebarViewProps = CopilotChatViewProps & {\n  header?: SlotValue<typeof CopilotModalHeader>;\n  toggleButton?: SlotValue<typeof CopilotChatToggleButton>;\n  width?: number | string;\n  defaultOpen?: boolean;\n};\n\nexport function CopilotSidebarView({\n  header,\n  toggleButton,\n  width,\n  defaultOpen = true,\n  ...props\n}: CopilotSidebarViewProps) {\n  return (\n    <CopilotChatConfigurationProvider isModalDefaultOpen={defaultOpen}>\n      <CopilotSidebarViewInternal\n        header={header}\n        toggleButton={toggleButton}\n        width={width}\n        {...props}\n      />\n    </CopilotChatConfigurationProvider>\n  );\n}\n\nfunction CopilotSidebarViewInternal({\n  header,\n  toggleButton,\n  width,\n  ...props\n}: Omit<CopilotSidebarViewProps, \"defaultOpen\">) {\n  const configuration = useCopilotChatConfiguration();\n\n  const isSidebarOpen = configuration?.isModalOpen ?? false;\n\n  const sidebarRef = useRef<HTMLDivElement | null>(null);\n  const [sidebarWidth, setSidebarWidth] = useState<number | string>(\n    width ?? DEFAULT_SIDEBAR_WIDTH,\n  );\n\n  // Helper to convert width to CSS value\n  const widthToCss = (w: number | string): string => {\n    return typeof w === \"number\" ? `${w}px` : w;\n  };\n\n  // Helper to extract numeric value for body margin (only works with px values)\n  const widthToMargin = (w: number | string): string => {\n    if (typeof w === \"number\") {\n      return `${w}px`;\n    }\n    // For string values, use as-is (assumes valid CSS unit)\n    return w;\n  };\n\n  useEffect(() => {\n    // If width is explicitly provided, don't measure\n    if (width !== undefined) {\n      return;\n    }\n\n    if (typeof window === \"undefined\") {\n      return;\n    }\n\n    const element = sidebarRef.current;\n    if (!element) {\n      return;\n    }\n\n    const updateWidth = () => {\n      const rect = element.getBoundingClientRect();\n      if (rect.width > 0) {\n        setSidebarWidth(rect.width);\n      }\n    };\n\n    updateWidth();\n\n    if (typeof ResizeObserver !== \"undefined\") {\n      const observer = new ResizeObserver(() => updateWidth());\n      observer.observe(element);\n      return () => observer.disconnect();\n    }\n\n    window.addEventListener(\"resize\", updateWidth);\n    return () => window.removeEventListener(\"resize\", updateWidth);\n  }, [width]);\n\n  // Manage body margin for sidebar docking (desktop only).\n  // useLayoutEffect runs before paint, so defaultOpen={true} never causes a\n  // visible layout shift — the margin is already applied on the first frame.\n  const hasMounted = useRef(false);\n\n  useLayoutEffect(() => {\n    if (\n      typeof window === \"undefined\" ||\n      typeof window.matchMedia !== \"function\"\n    )\n      return;\n    if (!window.matchMedia(\"(min-width: 768px)\").matches) return;\n\n    if (isSidebarOpen) {\n      if (hasMounted.current) {\n        document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;\n      }\n      document.body.style.marginInlineEnd = widthToMargin(sidebarWidth);\n    } else if (hasMounted.current) {\n      document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;\n      document.body.style.marginInlineEnd = \"\";\n    }\n\n    hasMounted.current = true;\n\n    return () => {\n      document.body.style.marginInlineEnd = \"\";\n      document.body.style.transition = \"\";\n    };\n  }, [isSidebarOpen, sidebarWidth]);\n\n  const headerElement = renderSlot(header, CopilotModalHeader, {});\n  const toggleButtonElement = renderSlot(\n    toggleButton,\n    CopilotChatToggleButton,\n    {},\n  );\n\n  return (\n    <>\n      {toggleButtonElement}\n      <aside\n        ref={sidebarRef}\n        data-copilotkit\n        data-testid=\"copilot-sidebar\"\n        data-copilot-sidebar\n        className={cn(\n          \"copilotKitSidebar copilotKitWindow\",\n          \"cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex\",\n          // Height with dvh fallback and safe area support\n          \"cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen\",\n          // Responsive width: full on mobile, custom on desktop\n          \"cpk:w-full\",\n          \"cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl\",\n          \"cpk:transition-transform cpk:duration-300 cpk:ease-out\",\n          isSidebarOpen\n            ? \"cpk:translate-x-0\"\n            : \"cpk:translate-x-full cpk:pointer-events-none\",\n        )}\n        style={\n          {\n            // Use CSS custom property for responsive width\n            [\"--sidebar-width\" as string]: widthToCss(sidebarWidth),\n            // Safe area insets for iOS\n            paddingTop: \"env(safe-area-inset-top)\",\n            paddingBottom: \"env(safe-area-inset-bottom)\",\n          } as React.CSSProperties\n        }\n        aria-hidden={!isSidebarOpen}\n        aria-label=\"Copilot chat sidebar\"\n        role=\"complementary\"\n      >\n        <div className=\"cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden\">\n          {headerElement}\n          <div className=\"cpk:flex-1 cpk:overflow-hidden\" data-sidebar-chat>\n            <CopilotChatView {...props} />\n          </div>\n        </div>\n      </aside>\n    </>\n  );\n}\n\nCopilotSidebarView.displayName = \"CopilotSidebarView\";\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport namespace CopilotSidebarView {\n  /**\n   * Sidebar-specific welcome screen layout:\n   * - Suggestions at the top\n   * - Welcome message in the middle\n   * - Input fixed at the bottom (like normal chat)\n   */\n  export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({\n    welcomeMessage,\n    input,\n    suggestionView,\n    className,\n    children,\n    ...props\n  }) => {\n    // Render the welcomeMessage slot internally\n    const BoundWelcomeMessage = renderSlot(\n      welcomeMessage,\n      CopilotChatView.WelcomeMessage,\n      {},\n    );\n\n    if (children) {\n      return (\n        <div data-copilotkit style={{ display: \"contents\" }}>\n          {children({\n            welcomeMessage: BoundWelcomeMessage,\n            input,\n            suggestionView,\n            className,\n            ...props,\n          })}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        className={cn(\"cpk:h-full cpk:flex cpk:flex-col\", className)}\n        {...props}\n      >\n        {/* Welcome message - centered vertically */}\n        <div className=\"cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4\">\n          {BoundWelcomeMessage}\n        </div>\n\n        {/* Suggestions and input at bottom */}\n        <div className=\"cpk:px-8 cpk:pb-4\">\n          <div className=\"cpk:max-w-3xl cpk:mx-auto\">\n            {/* Suggestions above input */}\n            <div className=\"cpk:mb-4 cpk:flex cpk:justify-center\">\n              {suggestionView}\n            </div>\n            {input}\n          </div>\n        </div>\n      </div>\n    );\n  };\n}\n\nexport default CopilotSidebarView;\n"],"mappings":"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"}

package/dist/hooks/use-agent.cjs

@@ -21,18 +21,28 @@ function useAgent({ agentId, updates } = {}) {
 	const { copilotkit } = require_CopilotKitProvider.useCopilotKit();
 	const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 	const updateFlags = (0, react.useMemo)(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
+	const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
 	const agent = (0, react.useMemo)(() => {
 		const existing = copilotkit.getAgent(agentId);
-		if (existing) return existing;
+		if (existing) {
+			provisionalAgentCache.current.delete(agentId);
+			return existing;
+		}
 		const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
 		const status = copilotkit.runtimeConnectionStatus;
 		if (isRuntimeConfigured && (status === _copilotkitnext_core.CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === _copilotkitnext_core.CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
+			const cached = provisionalAgentCache.current.get(agentId);
+			if (cached) {
+				cached.headers = { ...copilotkit.headers };
+				return cached;
+			}
 			const provisional = new _copilotkitnext_core.ProxiedCopilotRuntimeAgent({
 				runtimeUrl: copilotkit.runtimeUrl,
 				agentId,
 				transport: copilotkit.runtimeTransport
 			});
 			provisional.headers = { ...copilotkit.headers };
+			provisionalAgentCache.current.set(agentId, provisional);
 			return provisional;
 		}
 		const knownAgents = Object.keys(copilotkit.agents ?? {});
@@ -44,8 +54,7 @@ function useAgent({ agentId, updates } = {}) {
 		copilotkit.runtimeConnectionStatus,
 		copilotkit.runtimeUrl,
 		copilotkit.runtimeTransport,
-		JSON.stringify(copilotkit.headers),
-		copilotkit
+		JSON.stringify(copilotkit.headers)
 	]);
 	(0, react.useEffect)(() => {
 		if (updateFlags.length === 0) return;

package/dist/hooks/use-agent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-agent.cjs","names":["DEFAULT_AGENT_ID","useCopilotKit","CopilotKitCoreRuntimeConnectionStatus","ProxiedCopilotRuntimeAgent"],"sources":["../../src/hooks/use-agent.tsx"],"sourcesContent":["import { useCopilotKit } from \"@/providers/CopilotKitProvider\";\nimport { useMemo, useEffect, useReducer } from \"react\";\nimport { DEFAULT_AGENT_ID } from \"@copilotkitnext/shared\";\nimport { AbstractAgent } from \"@ag-ui/client\";\nimport {\n  ProxiedCopilotRuntimeAgent,\n  CopilotKitCoreRuntimeConnectionStatus,\n} from \"@copilotkitnext/core\";\n\nexport enum UseAgentUpdate {\n  OnMessagesChanged = \"OnMessagesChanged\",\n  OnStateChanged = \"OnStateChanged\",\n  OnRunStatusChanged = \"OnRunStatusChanged\",\n}\n\nconst ALL_UPDATES: UseAgentUpdate[] = [\n  UseAgentUpdate.OnMessagesChanged,\n  UseAgentUpdate.OnStateChanged,\n  UseAgentUpdate.OnRunStatusChanged,\n];\n\nexport interface UseAgentProps {\n  agentId?: string;\n  updates?: UseAgentUpdate[];\n}\n\nexport function useAgent({ agentId, updates }: UseAgentProps = {}) {\n  agentId ??= DEFAULT_AGENT_ID;\n\n  const { copilotkit } = useCopilotKit();\n  const [, forceUpdate] = useReducer((x) => x + 1, 0);\n\n  const updateFlags = useMemo(\n    () => updates ?? ALL_UPDATES,\n    [JSON.stringify(updates)],\n  );\n\n  const agent: AbstractAgent = useMemo(() => {\n    const existing = copilotkit.getAgent(agentId);\n    if (existing) {\n      return existing;\n    }\n\n    const isRuntimeConfigured = copilotkit.runtimeUrl !== undefined;\n    const status = copilotkit.runtimeConnectionStatus;\n\n    // While runtime is not yet synced, return a provisional runtime agent\n    if (\n      isRuntimeConfigured &&\n      (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected ||\n        status === CopilotKitCoreRuntimeConnectionStatus.Connecting)\n    ) {\n      const provisional = new ProxiedCopilotRuntimeAgent({\n        runtimeUrl: copilotkit.runtimeUrl,\n        agentId,\n        transport: copilotkit.runtimeTransport,\n      });\n      // Apply current headers so runs/connects inherit them\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (provisional as any).headers = { ...copilotkit.headers };\n      return provisional;\n    }\n\n    // If no runtime is configured (dev/local), return a no-op agent to satisfy the\n    // non-undefined contract without forcing network behavior.\n    // After runtime has synced (Connected or Error) or no runtime configured and the agent doesn't exist, throw a descriptive error\n    const knownAgents = Object.keys(copilotkit.agents ?? {});\n    const runtimePart = isRuntimeConfigured\n      ? `runtimeUrl=${copilotkit.runtimeUrl}`\n      : \"no runtimeUrl\";\n    throw new Error(\n      `useAgent: Agent '${agentId}' not found after runtime sync (${runtimePart}). ` +\n        (knownAgents.length\n          ? `Known agents: [${knownAgents.join(\", \")}]`\n          : \"No agents registered.\") +\n        \" Verify your runtime /info and/or agents__unsafe_dev_only.\",\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    agentId,\n    copilotkit.agents,\n    copilotkit.runtimeConnectionStatus,\n    copilotkit.runtimeUrl,\n    copilotkit.runtimeTransport,\n    JSON.stringify(copilotkit.headers),\n    copilotkit,\n  ]);\n\n  useEffect(() => {\n    if (updateFlags.length === 0) {\n      return;\n    }\n\n    const handlers: Parameters<AbstractAgent[\"subscribe\"]>[0] = {};\n\n    if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) {\n      // Content stripping for immutableContent renderers is handled by CopilotKitCoreReact\n      handlers.onMessagesChanged = () => {\n        forceUpdate();\n      };\n    }\n\n    if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) {\n      handlers.onStateChanged = forceUpdate;\n    }\n\n    if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {\n      handlers.onRunInitialized = forceUpdate;\n      handlers.onRunFinalized = forceUpdate;\n      handlers.onRunFailed = forceUpdate;\n    }\n\n    const subscription = agent.subscribe(handlers);\n    return () => subscription.unsubscribe();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [agent, forceUpdate, JSON.stringify(updateFlags)]);\n\n  return {\n    agent,\n  };\n}\n"],"mappings":";;;;;;;AASA,IAAY,0DAAL;AACL;AACA;AACA;;;AAGF,MAAM,cAAgC;CACpC,eAAe;CACf,eAAe;CACf,eAAe;CAChB;AAOD,SAAgB,SAAS,EAAE,SAAS,YAA2B,EAAE,EAAE;AACjE,aAAYA;CAEZ,MAAM,EAAE,eAAeC,0CAAe;CACtC,MAAM,GAAG,sCAA2B,MAAM,IAAI,GAAG,EAAE;CAEnD,MAAM,uCACE,WAAW,aACjB,CAAC,KAAK,UAAU,QAAQ,CAAC,CAC1B;CAED,MAAM,iCAAqC;EACzC,MAAM,WAAW,WAAW,SAAS,QAAQ;AAC7C,MAAI,SACF,QAAO;EAGT,MAAM,sBAAsB,WAAW,eAAe;EACtD,MAAM,SAAS,WAAW;AAG1B,MACE,wBACC,WAAWC,2DAAsC,gBAChD,WAAWA,2DAAsC,aACnD;GACA,MAAM,cAAc,IAAIC,gDAA2B;IACjD,YAAY,WAAW;IACvB;IACA,WAAW,WAAW;IACvB,CAAC;AAGF,GAAC,YAAoB,UAAU,EAAE,GAAG,WAAW,SAAS;AACxD,UAAO;;EAMT,MAAM,cAAc,OAAO,KAAK,WAAW,UAAU,EAAE,CAAC;EACxD,MAAM,cAAc,sBAChB,cAAc,WAAW,eACzB;AACJ,QAAM,IAAI,MACR,oBAAoB,QAAQ,kCAAkC,YAAY,QACvE,YAAY,SACT,kBAAkB,YAAY,KAAK,KAAK,CAAC,KACzC,2BACJ,6DACH;IAEA;EACD;EACA,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,KAAK,UAAU,WAAW,QAAQ;EAClC;EACD,CAAC;AAEF,4BAAgB;AACd,MAAI,YAAY,WAAW,EACzB;EAGF,MAAM,WAAsD,EAAE;AAE9D,MAAI,YAAY,SAAS,eAAe,kBAAkB,CAExD,UAAS,0BAA0B;AACjC,gBAAa;;AAIjB,MAAI,YAAY,SAAS,eAAe,eAAe,CACrD,UAAS,iBAAiB;AAG5B,MAAI,YAAY,SAAS,eAAe,mBAAmB,EAAE;AAC3D,YAAS,mBAAmB;AAC5B,YAAS,iBAAiB;AAC1B,YAAS,cAAc;;EAGzB,MAAM,eAAe,MAAM,UAAU,SAAS;AAC9C,eAAa,aAAa,aAAa;IAEtC;EAAC;EAAO;EAAa,KAAK,UAAU,YAAY;EAAC,CAAC;AAErD,QAAO,EACL,OACD"}
+{"version":3,"file":"use-agent.cjs","names":["DEFAULT_AGENT_ID","useCopilotKit","CopilotKitCoreRuntimeConnectionStatus","ProxiedCopilotRuntimeAgent"],"sources":["../../src/hooks/use-agent.tsx"],"sourcesContent":["import { useCopilotKit } from \"@/providers/CopilotKitProvider\";\nimport { useMemo, useEffect, useReducer, useRef } from \"react\";\nimport { DEFAULT_AGENT_ID } from \"@copilotkitnext/shared\";\nimport { AbstractAgent } from \"@ag-ui/client\";\nimport {\n  ProxiedCopilotRuntimeAgent,\n  CopilotKitCoreRuntimeConnectionStatus,\n} from \"@copilotkitnext/core\";\n\nexport enum UseAgentUpdate {\n  OnMessagesChanged = \"OnMessagesChanged\",\n  OnStateChanged = \"OnStateChanged\",\n  OnRunStatusChanged = \"OnRunStatusChanged\",\n}\n\nconst ALL_UPDATES: UseAgentUpdate[] = [\n  UseAgentUpdate.OnMessagesChanged,\n  UseAgentUpdate.OnStateChanged,\n  UseAgentUpdate.OnRunStatusChanged,\n];\n\nexport interface UseAgentProps {\n  agentId?: string;\n  updates?: UseAgentUpdate[];\n}\n\nexport function useAgent({ agentId, updates }: UseAgentProps = {}) {\n  agentId ??= DEFAULT_AGENT_ID;\n\n  const { copilotkit } = useCopilotKit();\n  const [, forceUpdate] = useReducer((x) => x + 1, 0);\n\n  const updateFlags = useMemo(\n    () => updates ?? ALL_UPDATES,\n    [JSON.stringify(updates)],\n  );\n\n  // Cache provisional agents to avoid creating new references on every render\n  // while the runtime is still connecting. A new reference would cascade into\n  // CopilotChat's connectAgent effect, causing unnecessary HTTP calls.\n  const provisionalAgentCache = useRef<Map<string, ProxiedCopilotRuntimeAgent>>(\n    new Map(),\n  );\n\n  const agent: AbstractAgent = useMemo(() => {\n    const existing = copilotkit.getAgent(agentId);\n    if (existing) {\n      // Real agent found — clear any cached provisional for this ID\n      provisionalAgentCache.current.delete(agentId);\n      return existing;\n    }\n\n    const isRuntimeConfigured = copilotkit.runtimeUrl !== undefined;\n    const status = copilotkit.runtimeConnectionStatus;\n\n    // While runtime is not yet synced, return a provisional runtime agent\n    if (\n      isRuntimeConfigured &&\n      (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected ||\n        status === CopilotKitCoreRuntimeConnectionStatus.Connecting)\n    ) {\n      // Return cached provisional if available (keeps reference stable)\n      const cached = provisionalAgentCache.current.get(agentId);\n      if (cached) {\n        // Update headers on the cached agent in case they changed\n        cached.headers = { ...copilotkit.headers };\n        return cached;\n      }\n\n      const provisional = new ProxiedCopilotRuntimeAgent({\n        runtimeUrl: copilotkit.runtimeUrl,\n        agentId,\n        transport: copilotkit.runtimeTransport,\n      });\n      // Apply current headers so runs/connects inherit them\n      provisional.headers = { ...copilotkit.headers };\n      provisionalAgentCache.current.set(agentId, provisional);\n      return provisional;\n    }\n\n    // After runtime has synced (Connected or Error) or no runtime configured and the agent doesn't exist, throw a descriptive error\n    const knownAgents = Object.keys(copilotkit.agents ?? {});\n    const runtimePart = isRuntimeConfigured\n      ? `runtimeUrl=${copilotkit.runtimeUrl}`\n      : \"no runtimeUrl\";\n    throw new Error(\n      `useAgent: Agent '${agentId}' not found after runtime sync (${runtimePart}). ` +\n        (knownAgents.length\n          ? `Known agents: [${knownAgents.join(\", \")}]`\n          : \"No agents registered.\") +\n        \" Verify your runtime /info and/or agents__unsafe_dev_only.\",\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    agentId,\n    copilotkit.agents,\n    copilotkit.runtimeConnectionStatus,\n    copilotkit.runtimeUrl,\n    copilotkit.runtimeTransport,\n    JSON.stringify(copilotkit.headers),\n  ]);\n\n  useEffect(() => {\n    if (updateFlags.length === 0) {\n      return;\n    }\n\n    const handlers: Parameters<AbstractAgent[\"subscribe\"]>[0] = {};\n\n    if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) {\n      // Content stripping for immutableContent renderers is handled by CopilotKitCoreReact\n      handlers.onMessagesChanged = () => {\n        forceUpdate();\n      };\n    }\n\n    if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) {\n      handlers.onStateChanged = forceUpdate;\n    }\n\n    if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {\n      handlers.onRunInitialized = forceUpdate;\n      handlers.onRunFinalized = forceUpdate;\n      handlers.onRunFailed = forceUpdate;\n    }\n\n    const subscription = agent.subscribe(handlers);\n    return () => subscription.unsubscribe();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [agent, forceUpdate, JSON.stringify(updateFlags)]);\n\n  return {\n    agent,\n  };\n}\n"],"mappings":";;;;;;;AASA,IAAY,0DAAL;AACL;AACA;AACA;;;AAGF,MAAM,cAAgC;CACpC,eAAe;CACf,eAAe;CACf,eAAe;CAChB;AAOD,SAAgB,SAAS,EAAE,SAAS,YAA2B,EAAE,EAAE;AACjE,aAAYA;CAEZ,MAAM,EAAE,eAAeC,0CAAe;CACtC,MAAM,GAAG,sCAA2B,MAAM,IAAI,GAAG,EAAE;CAEnD,MAAM,uCACE,WAAW,aACjB,CAAC,KAAK,UAAU,QAAQ,CAAC,CAC1B;CAKD,MAAM,0DACJ,IAAI,KAAK,CACV;CAED,MAAM,iCAAqC;EACzC,MAAM,WAAW,WAAW,SAAS,QAAQ;AAC7C,MAAI,UAAU;AAEZ,yBAAsB,QAAQ,OAAO,QAAQ;AAC7C,UAAO;;EAGT,MAAM,sBAAsB,WAAW,eAAe;EACtD,MAAM,SAAS,WAAW;AAG1B,MACE,wBACC,WAAWC,2DAAsC,gBAChD,WAAWA,2DAAsC,aACnD;GAEA,MAAM,SAAS,sBAAsB,QAAQ,IAAI,QAAQ;AACzD,OAAI,QAAQ;AAEV,WAAO,UAAU,EAAE,GAAG,WAAW,SAAS;AAC1C,WAAO;;GAGT,MAAM,cAAc,IAAIC,gDAA2B;IACjD,YAAY,WAAW;IACvB;IACA,WAAW,WAAW;IACvB,CAAC;AAEF,eAAY,UAAU,EAAE,GAAG,WAAW,SAAS;AAC/C,yBAAsB,QAAQ,IAAI,SAAS,YAAY;AACvD,UAAO;;EAIT,MAAM,cAAc,OAAO,KAAK,WAAW,UAAU,EAAE,CAAC;EACxD,MAAM,cAAc,sBAChB,cAAc,WAAW,eACzB;AACJ,QAAM,IAAI,MACR,oBAAoB,QAAQ,kCAAkC,YAAY,QACvE,YAAY,SACT,kBAAkB,YAAY,KAAK,KAAK,CAAC,KACzC,2BACJ,6DACH;IAEA;EACD;EACA,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,KAAK,UAAU,WAAW,QAAQ;EACnC,CAAC;AAEF,4BAAgB;AACd,MAAI,YAAY,WAAW,EACzB;EAGF,MAAM,WAAsD,EAAE;AAE9D,MAAI,YAAY,SAAS,eAAe,kBAAkB,CAExD,UAAS,0BAA0B;AACjC,gBAAa;;AAIjB,MAAI,YAAY,SAAS,eAAe,eAAe,CACrD,UAAS,iBAAiB;AAG5B,MAAI,YAAY,SAAS,eAAe,mBAAmB,EAAE;AAC3D,YAAS,mBAAmB;AAC5B,YAAS,iBAAiB;AAC1B,YAAS,cAAc;;EAGzB,MAAM,eAAe,MAAM,UAAU,SAAS;AAC9C,eAAa,aAAa,aAAa;IAEtC;EAAC;EAAO;EAAa,KAAK,UAAU,YAAY;EAAC,CAAC;AAErD,QAAO,EACL,OACD"}

package/dist/hooks/use-agent.mjs

@@ -1,5 +1,5 @@
 import { useCopilotKit } from "../providers/CopilotKitProvider.mjs";
-import { useEffect, useMemo, useReducer } from "react";
+import { useEffect, useMemo, useReducer, useRef } from "react";
 import { DEFAULT_AGENT_ID } from "@copilotkitnext/shared";
 import { CopilotKitCoreRuntimeConnectionStatus, ProxiedCopilotRuntimeAgent } from "@copilotkitnext/core";
 
@@ -20,18 +20,28 @@ function useAgent({ agentId, updates } = {}) {
 	const { copilotkit } = useCopilotKit();
 	const [, forceUpdate] = useReducer((x) => x + 1, 0);
 	const updateFlags = useMemo(() => updates ?? ALL_UPDATES, [JSON.stringify(updates)]);
+	const provisionalAgentCache = useRef(/* @__PURE__ */ new Map());
 	const agent = useMemo(() => {
 		const existing = copilotkit.getAgent(agentId);
-		if (existing) return existing;
+		if (existing) {
+			provisionalAgentCache.current.delete(agentId);
+			return existing;
+		}
 		const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
 		const status = copilotkit.runtimeConnectionStatus;
 		if (isRuntimeConfigured && (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
+			const cached = provisionalAgentCache.current.get(agentId);
+			if (cached) {
+				cached.headers = { ...copilotkit.headers };
+				return cached;
+			}
 			const provisional = new ProxiedCopilotRuntimeAgent({
 				runtimeUrl: copilotkit.runtimeUrl,
 				agentId,
 				transport: copilotkit.runtimeTransport
 			});
 			provisional.headers = { ...copilotkit.headers };
+			provisionalAgentCache.current.set(agentId, provisional);
 			return provisional;
 		}
 		const knownAgents = Object.keys(copilotkit.agents ?? {});
@@ -43,8 +53,7 @@ function useAgent({ agentId, updates } = {}) {
 		copilotkit.runtimeConnectionStatus,
 		copilotkit.runtimeUrl,
 		copilotkit.runtimeTransport,
-		JSON.stringify(copilotkit.headers),
-		copilotkit
+		JSON.stringify(copilotkit.headers)
 	]);
 	useEffect(() => {
 		if (updateFlags.length === 0) return;

package/dist/hooks/use-agent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-agent.mjs","names":[],"sources":["../../src/hooks/use-agent.tsx"],"sourcesContent":["import { useCopilotKit } from \"@/providers/CopilotKitProvider\";\nimport { useMemo, useEffect, useReducer } from \"react\";\nimport { DEFAULT_AGENT_ID } from \"@copilotkitnext/shared\";\nimport { AbstractAgent } from \"@ag-ui/client\";\nimport {\n  ProxiedCopilotRuntimeAgent,\n  CopilotKitCoreRuntimeConnectionStatus,\n} from \"@copilotkitnext/core\";\n\nexport enum UseAgentUpdate {\n  OnMessagesChanged = \"OnMessagesChanged\",\n  OnStateChanged = \"OnStateChanged\",\n  OnRunStatusChanged = \"OnRunStatusChanged\",\n}\n\nconst ALL_UPDATES: UseAgentUpdate[] = [\n  UseAgentUpdate.OnMessagesChanged,\n  UseAgentUpdate.OnStateChanged,\n  UseAgentUpdate.OnRunStatusChanged,\n];\n\nexport interface UseAgentProps {\n  agentId?: string;\n  updates?: UseAgentUpdate[];\n}\n\nexport function useAgent({ agentId, updates }: UseAgentProps = {}) {\n  agentId ??= DEFAULT_AGENT_ID;\n\n  const { copilotkit } = useCopilotKit();\n  const [, forceUpdate] = useReducer((x) => x + 1, 0);\n\n  const updateFlags = useMemo(\n    () => updates ?? ALL_UPDATES,\n    [JSON.stringify(updates)],\n  );\n\n  const agent: AbstractAgent = useMemo(() => {\n    const existing = copilotkit.getAgent(agentId);\n    if (existing) {\n      return existing;\n    }\n\n    const isRuntimeConfigured = copilotkit.runtimeUrl !== undefined;\n    const status = copilotkit.runtimeConnectionStatus;\n\n    // While runtime is not yet synced, return a provisional runtime agent\n    if (\n      isRuntimeConfigured &&\n      (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected ||\n        status === CopilotKitCoreRuntimeConnectionStatus.Connecting)\n    ) {\n      const provisional = new ProxiedCopilotRuntimeAgent({\n        runtimeUrl: copilotkit.runtimeUrl,\n        agentId,\n        transport: copilotkit.runtimeTransport,\n      });\n      // Apply current headers so runs/connects inherit them\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (provisional as any).headers = { ...copilotkit.headers };\n      return provisional;\n    }\n\n    // If no runtime is configured (dev/local), return a no-op agent to satisfy the\n    // non-undefined contract without forcing network behavior.\n    // After runtime has synced (Connected or Error) or no runtime configured and the agent doesn't exist, throw a descriptive error\n    const knownAgents = Object.keys(copilotkit.agents ?? {});\n    const runtimePart = isRuntimeConfigured\n      ? `runtimeUrl=${copilotkit.runtimeUrl}`\n      : \"no runtimeUrl\";\n    throw new Error(\n      `useAgent: Agent '${agentId}' not found after runtime sync (${runtimePart}). ` +\n        (knownAgents.length\n          ? `Known agents: [${knownAgents.join(\", \")}]`\n          : \"No agents registered.\") +\n        \" Verify your runtime /info and/or agents__unsafe_dev_only.\",\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    agentId,\n    copilotkit.agents,\n    copilotkit.runtimeConnectionStatus,\n    copilotkit.runtimeUrl,\n    copilotkit.runtimeTransport,\n    JSON.stringify(copilotkit.headers),\n    copilotkit,\n  ]);\n\n  useEffect(() => {\n    if (updateFlags.length === 0) {\n      return;\n    }\n\n    const handlers: Parameters<AbstractAgent[\"subscribe\"]>[0] = {};\n\n    if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) {\n      // Content stripping for immutableContent renderers is handled by CopilotKitCoreReact\n      handlers.onMessagesChanged = () => {\n        forceUpdate();\n      };\n    }\n\n    if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) {\n      handlers.onStateChanged = forceUpdate;\n    }\n\n    if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {\n      handlers.onRunInitialized = forceUpdate;\n      handlers.onRunFinalized = forceUpdate;\n      handlers.onRunFailed = forceUpdate;\n    }\n\n    const subscription = agent.subscribe(handlers);\n    return () => subscription.unsubscribe();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [agent, forceUpdate, JSON.stringify(updateFlags)]);\n\n  return {\n    agent,\n  };\n}\n"],"mappings":";;;;;;AASA,IAAY,0DAAL;AACL;AACA;AACA;;;AAGF,MAAM,cAAgC;CACpC,eAAe;CACf,eAAe;CACf,eAAe;CAChB;AAOD,SAAgB,SAAS,EAAE,SAAS,YAA2B,EAAE,EAAE;AACjE,aAAY;CAEZ,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,GAAG,eAAe,YAAY,MAAM,IAAI,GAAG,EAAE;CAEnD,MAAM,cAAc,cACZ,WAAW,aACjB,CAAC,KAAK,UAAU,QAAQ,CAAC,CAC1B;CAED,MAAM,QAAuB,cAAc;EACzC,MAAM,WAAW,WAAW,SAAS,QAAQ;AAC7C,MAAI,SACF,QAAO;EAGT,MAAM,sBAAsB,WAAW,eAAe;EACtD,MAAM,SAAS,WAAW;AAG1B,MACE,wBACC,WAAW,sCAAsC,gBAChD,WAAW,sCAAsC,aACnD;GACA,MAAM,cAAc,IAAI,2BAA2B;IACjD,YAAY,WAAW;IACvB;IACA,WAAW,WAAW;IACvB,CAAC;AAGF,GAAC,YAAoB,UAAU,EAAE,GAAG,WAAW,SAAS;AACxD,UAAO;;EAMT,MAAM,cAAc,OAAO,KAAK,WAAW,UAAU,EAAE,CAAC;EACxD,MAAM,cAAc,sBAChB,cAAc,WAAW,eACzB;AACJ,QAAM,IAAI,MACR,oBAAoB,QAAQ,kCAAkC,YAAY,QACvE,YAAY,SACT,kBAAkB,YAAY,KAAK,KAAK,CAAC,KACzC,2BACJ,6DACH;IAEA;EACD;EACA,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,KAAK,UAAU,WAAW,QAAQ;EAClC;EACD,CAAC;AAEF,iBAAgB;AACd,MAAI,YAAY,WAAW,EACzB;EAGF,MAAM,WAAsD,EAAE;AAE9D,MAAI,YAAY,SAAS,eAAe,kBAAkB,CAExD,UAAS,0BAA0B;AACjC,gBAAa;;AAIjB,MAAI,YAAY,SAAS,eAAe,eAAe,CACrD,UAAS,iBAAiB;AAG5B,MAAI,YAAY,SAAS,eAAe,mBAAmB,EAAE;AAC3D,YAAS,mBAAmB;AAC5B,YAAS,iBAAiB;AAC1B,YAAS,cAAc;;EAGzB,MAAM,eAAe,MAAM,UAAU,SAAS;AAC9C,eAAa,aAAa,aAAa;IAEtC;EAAC;EAAO;EAAa,KAAK,UAAU,YAAY;EAAC,CAAC;AAErD,QAAO,EACL,OACD"}
+{"version":3,"file":"use-agent.mjs","names":[],"sources":["../../src/hooks/use-agent.tsx"],"sourcesContent":["import { useCopilotKit } from \"@/providers/CopilotKitProvider\";\nimport { useMemo, useEffect, useReducer, useRef } from \"react\";\nimport { DEFAULT_AGENT_ID } from \"@copilotkitnext/shared\";\nimport { AbstractAgent } from \"@ag-ui/client\";\nimport {\n  ProxiedCopilotRuntimeAgent,\n  CopilotKitCoreRuntimeConnectionStatus,\n} from \"@copilotkitnext/core\";\n\nexport enum UseAgentUpdate {\n  OnMessagesChanged = \"OnMessagesChanged\",\n  OnStateChanged = \"OnStateChanged\",\n  OnRunStatusChanged = \"OnRunStatusChanged\",\n}\n\nconst ALL_UPDATES: UseAgentUpdate[] = [\n  UseAgentUpdate.OnMessagesChanged,\n  UseAgentUpdate.OnStateChanged,\n  UseAgentUpdate.OnRunStatusChanged,\n];\n\nexport interface UseAgentProps {\n  agentId?: string;\n  updates?: UseAgentUpdate[];\n}\n\nexport function useAgent({ agentId, updates }: UseAgentProps = {}) {\n  agentId ??= DEFAULT_AGENT_ID;\n\n  const { copilotkit } = useCopilotKit();\n  const [, forceUpdate] = useReducer((x) => x + 1, 0);\n\n  const updateFlags = useMemo(\n    () => updates ?? ALL_UPDATES,\n    [JSON.stringify(updates)],\n  );\n\n  // Cache provisional agents to avoid creating new references on every render\n  // while the runtime is still connecting. A new reference would cascade into\n  // CopilotChat's connectAgent effect, causing unnecessary HTTP calls.\n  const provisionalAgentCache = useRef<Map<string, ProxiedCopilotRuntimeAgent>>(\n    new Map(),\n  );\n\n  const agent: AbstractAgent = useMemo(() => {\n    const existing = copilotkit.getAgent(agentId);\n    if (existing) {\n      // Real agent found — clear any cached provisional for this ID\n      provisionalAgentCache.current.delete(agentId);\n      return existing;\n    }\n\n    const isRuntimeConfigured = copilotkit.runtimeUrl !== undefined;\n    const status = copilotkit.runtimeConnectionStatus;\n\n    // While runtime is not yet synced, return a provisional runtime agent\n    if (\n      isRuntimeConfigured &&\n      (status === CopilotKitCoreRuntimeConnectionStatus.Disconnected ||\n        status === CopilotKitCoreRuntimeConnectionStatus.Connecting)\n    ) {\n      // Return cached provisional if available (keeps reference stable)\n      const cached = provisionalAgentCache.current.get(agentId);\n      if (cached) {\n        // Update headers on the cached agent in case they changed\n        cached.headers = { ...copilotkit.headers };\n        return cached;\n      }\n\n      const provisional = new ProxiedCopilotRuntimeAgent({\n        runtimeUrl: copilotkit.runtimeUrl,\n        agentId,\n        transport: copilotkit.runtimeTransport,\n      });\n      // Apply current headers so runs/connects inherit them\n      provisional.headers = { ...copilotkit.headers };\n      provisionalAgentCache.current.set(agentId, provisional);\n      return provisional;\n    }\n\n    // After runtime has synced (Connected or Error) or no runtime configured and the agent doesn't exist, throw a descriptive error\n    const knownAgents = Object.keys(copilotkit.agents ?? {});\n    const runtimePart = isRuntimeConfigured\n      ? `runtimeUrl=${copilotkit.runtimeUrl}`\n      : \"no runtimeUrl\";\n    throw new Error(\n      `useAgent: Agent '${agentId}' not found after runtime sync (${runtimePart}). ` +\n        (knownAgents.length\n          ? `Known agents: [${knownAgents.join(\", \")}]`\n          : \"No agents registered.\") +\n        \" Verify your runtime /info and/or agents__unsafe_dev_only.\",\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    agentId,\n    copilotkit.agents,\n    copilotkit.runtimeConnectionStatus,\n    copilotkit.runtimeUrl,\n    copilotkit.runtimeTransport,\n    JSON.stringify(copilotkit.headers),\n  ]);\n\n  useEffect(() => {\n    if (updateFlags.length === 0) {\n      return;\n    }\n\n    const handlers: Parameters<AbstractAgent[\"subscribe\"]>[0] = {};\n\n    if (updateFlags.includes(UseAgentUpdate.OnMessagesChanged)) {\n      // Content stripping for immutableContent renderers is handled by CopilotKitCoreReact\n      handlers.onMessagesChanged = () => {\n        forceUpdate();\n      };\n    }\n\n    if (updateFlags.includes(UseAgentUpdate.OnStateChanged)) {\n      handlers.onStateChanged = forceUpdate;\n    }\n\n    if (updateFlags.includes(UseAgentUpdate.OnRunStatusChanged)) {\n      handlers.onRunInitialized = forceUpdate;\n      handlers.onRunFinalized = forceUpdate;\n      handlers.onRunFailed = forceUpdate;\n    }\n\n    const subscription = agent.subscribe(handlers);\n    return () => subscription.unsubscribe();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [agent, forceUpdate, JSON.stringify(updateFlags)]);\n\n  return {\n    agent,\n  };\n}\n"],"mappings":";;;;;;AASA,IAAY,0DAAL;AACL;AACA;AACA;;;AAGF,MAAM,cAAgC;CACpC,eAAe;CACf,eAAe;CACf,eAAe;CAChB;AAOD,SAAgB,SAAS,EAAE,SAAS,YAA2B,EAAE,EAAE;AACjE,aAAY;CAEZ,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,GAAG,eAAe,YAAY,MAAM,IAAI,GAAG,EAAE;CAEnD,MAAM,cAAc,cACZ,WAAW,aACjB,CAAC,KAAK,UAAU,QAAQ,CAAC,CAC1B;CAKD,MAAM,wBAAwB,uBAC5B,IAAI,KAAK,CACV;CAED,MAAM,QAAuB,cAAc;EACzC,MAAM,WAAW,WAAW,SAAS,QAAQ;AAC7C,MAAI,UAAU;AAEZ,yBAAsB,QAAQ,OAAO,QAAQ;AAC7C,UAAO;;EAGT,MAAM,sBAAsB,WAAW,eAAe;EACtD,MAAM,SAAS,WAAW;AAG1B,MACE,wBACC,WAAW,sCAAsC,gBAChD,WAAW,sCAAsC,aACnD;GAEA,MAAM,SAAS,sBAAsB,QAAQ,IAAI,QAAQ;AACzD,OAAI,QAAQ;AAEV,WAAO,UAAU,EAAE,GAAG,WAAW,SAAS;AAC1C,WAAO;;GAGT,MAAM,cAAc,IAAI,2BAA2B;IACjD,YAAY,WAAW;IACvB;IACA,WAAW,WAAW;IACvB,CAAC;AAEF,eAAY,UAAU,EAAE,GAAG,WAAW,SAAS;AAC/C,yBAAsB,QAAQ,IAAI,SAAS,YAAY;AACvD,UAAO;;EAIT,MAAM,cAAc,OAAO,KAAK,WAAW,UAAU,EAAE,CAAC;EACxD,MAAM,cAAc,sBAChB,cAAc,WAAW,eACzB;AACJ,QAAM,IAAI,MACR,oBAAoB,QAAQ,kCAAkC,YAAY,QACvE,YAAY,SACT,kBAAkB,YAAY,KAAK,KAAK,CAAC,KACzC,2BACJ,6DACH;IAEA;EACD;EACA,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,KAAK,UAAU,WAAW,QAAQ;EACnC,CAAC;AAEF,iBAAgB;AACd,MAAI,YAAY,WAAW,EACzB;EAGF,MAAM,WAAsD,EAAE;AAE9D,MAAI,YAAY,SAAS,eAAe,kBAAkB,CAExD,UAAS,0BAA0B;AACjC,gBAAa;;AAIjB,MAAI,YAAY,SAAS,eAAe,eAAe,CACrD,UAAS,iBAAiB;AAG5B,MAAI,YAAY,SAAS,eAAe,mBAAmB,EAAE;AAC3D,YAAS,mBAAmB;AAC5B,YAAS,iBAAiB;AAC1B,YAAS,cAAc;;EAGzB,MAAM,eAAe,MAAM,UAAU,SAAS;AAC9C,eAAa,aAAa,aAAa;IAEtC;EAAC;EAAO;EAAa,KAAK,UAAU,YAAY;EAAC,CAAC;AAErD,QAAO,EACL,OACD"}

package/dist/index.umd.js

@@ -1017,7 +1017,7 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
 		}) : null;
 		const inputPill = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-testid": "copilot-chat-input",
-			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:w-full cpk:flex-col cpk:items-center cpk:justify-center", "cpk:cursor-text", "cpk:overflow-visible cpk:bg-clip-padding cpk:contain-inline-size", "cpk:bg-white cpk:dark:bg-[#303030]", "cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:rounded-[28px]"),
+			className: (0, tailwind_merge.twMerge)("copilotKitInput", "cpk:flex cpk:w-full cpk:flex-col cpk:items-center cpk:justify-center", "cpk:cursor-text", "cpk:overflow-visible cpk:bg-clip-padding cpk:contain-inline-size", "cpk:bg-white cpk:dark:bg-[#303030]", "cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:rounded-[28px]"),
 			onClick: handleContainerClick,
 			"data-layout": isExpanded ? "expanded" : "compact",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1817,6 +1817,12 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		get renderToolCalls() {
 			return this._renderToolCalls;
 		}
+		setRenderActivityMessages(renderers) {
+			this._renderActivityMessages = renderers;
+		}
+		setRenderCustomMessages(renderers) {
+			this._renderCustomMessages = renderers;
+		}
 		setRenderToolCalls(renderToolCalls) {
 			this._renderToolCalls = renderToolCalls;
 			this.notifySubscribers((subscriber) => {
@@ -1971,26 +1977,20 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			frontendToolsList,
 			processedHumanInTheLoopTools
 		]);
-		const copilotkit = (0, react.useMemo)(() => {
-			return new CopilotKitCoreReact({
-				runtimeUrl: chatApiEndpoint,
-				runtimeTransport: useSingleEndpoint ? "single" : "rest",
-				headers: mergedHeaders,
-				credentials,
-				properties,
-				agents__unsafe_dev_only: mergedAgents,
-				tools: allTools,
-				renderToolCalls: allRenderToolCalls,
-				renderActivityMessages: allActivityRenderers,
-				renderCustomMessages: renderCustomMessagesList
-			});
-		}, [
-			allTools,
-			allRenderToolCalls,
-			allActivityRenderers,
-			renderCustomMessagesList,
-			useSingleEndpoint
-		]);
+		const copilotkitRef = (0, react.useRef)(null);
+		if (copilotkitRef.current === null) copilotkitRef.current = new CopilotKitCoreReact({
+			runtimeUrl: chatApiEndpoint,
+			runtimeTransport: useSingleEndpoint ? "single" : "rest",
+			headers: mergedHeaders,
+			credentials,
+			properties,
+			agents__unsafe_dev_only: mergedAgents,
+			tools: allTools,
+			renderToolCalls: allRenderToolCalls,
+			renderActivityMessages: allActivityRenderers,
+			renderCustomMessages: renderCustomMessagesList
+		});
+		const copilotkit = copilotkitRef.current;
 		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 		(0, react.useEffect)(() => {
 			const subscription = copilotkit.subscribe({ onRenderToolCallsChanged: () => {
@@ -2032,6 +2032,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			copilotkit.setProperties(properties);
 			copilotkit.setAgents__unsafe_dev_only(mergedAgents);
 		}, [
+			copilotkit,
 			chatApiEndpoint,
 			mergedHeaders,
 			credentials,
@@ -2039,11 +2040,32 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			mergedAgents,
 			useSingleEndpoint
 		]);
+		const didMountRef = (0, react.useRef)(false);
+		(0, react.useEffect)(() => {
+			if (!didMountRef.current) return;
+			copilotkit.setTools(allTools);
+		}, [copilotkit, allTools]);
+		(0, react.useEffect)(() => {
+			if (!didMountRef.current) return;
+			copilotkit.setRenderToolCalls(allRenderToolCalls);
+		}, [copilotkit, allRenderToolCalls]);
+		(0, react.useEffect)(() => {
+			if (!didMountRef.current) return;
+			copilotkit.setRenderActivityMessages(allActivityRenderers);
+		}, [copilotkit, allActivityRenderers]);
+		(0, react.useEffect)(() => {
+			if (!didMountRef.current) return;
+			copilotkit.setRenderCustomMessages(renderCustomMessagesList);
+		}, [copilotkit, renderCustomMessagesList]);
+		(0, react.useEffect)(() => {
+			didMountRef.current = true;
+		}, []);
+		const contextValue = (0, react.useMemo)(() => ({
+			copilotkit,
+			executingToolCallIds
+		}), [copilotkit, executingToolCallIds]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopilotKitContext.Provider, {
-			value: {
-				copilotkit,
-				executingToolCallIds
-			},
+			value: contextValue,
 			children: [children, shouldRenderInspector ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitInspector, { core: copilotkit }) : null]
 		});
 	};
@@ -2708,19 +2730,29 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const { copilotkit } = useCopilotKit();
 		const [, forceUpdate] = (0, react.useReducer)((x) => x + 1, 0);
 		const updateFlags = (0, react.useMemo)(() => updates !== null && updates !== void 0 ? updates : ALL_UPDATES, [JSON.stringify(updates)]);
+		const provisionalAgentCache = (0, react.useRef)(/* @__PURE__ */ new Map());
 		const agent = (0, react.useMemo)(() => {
 			var _copilotkit$agents;
 			const existing = copilotkit.getAgent(agentId);
-			if (existing) return existing;
+			if (existing) {
+				provisionalAgentCache.current.delete(agentId);
+				return existing;
+			}
 			const isRuntimeConfigured = copilotkit.runtimeUrl !== void 0;
 			const status = copilotkit.runtimeConnectionStatus;
 			if (isRuntimeConfigured && (status === _copilotkitnext_core.CopilotKitCoreRuntimeConnectionStatus.Disconnected || status === _copilotkitnext_core.CopilotKitCoreRuntimeConnectionStatus.Connecting)) {
+				const cached = provisionalAgentCache.current.get(agentId);
+				if (cached) {
+					cached.headers = { ...copilotkit.headers };
+					return cached;
+				}
 				const provisional = new _copilotkitnext_core.ProxiedCopilotRuntimeAgent({
 					runtimeUrl: copilotkit.runtimeUrl,
 					agentId,
 					transport: copilotkit.runtimeTransport
 				});
 				provisional.headers = { ...copilotkit.headers };
+				provisionalAgentCache.current.set(agentId, provisional);
 				return provisional;
 			}
 			const knownAgents = Object.keys((_copilotkit$agents = copilotkit.agents) !== null && _copilotkit$agents !== void 0 ? _copilotkit$agents : {});
@@ -2732,8 +2764,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			copilotkit.runtimeConnectionStatus,
 			copilotkit.runtimeUrl,
 			copilotkit.runtimeTransport,
-			JSON.stringify(copilotkit.headers),
-			copilotkit
+			JSON.stringify(copilotkit.headers)
 		]);
 		(0, react.useEffect)(() => {
 			if (updateFlags.length === 0) return;
@@ -3218,7 +3249,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-copilotkit": true,
 			"data-testid": "copilot-assistant-message",
-			className: (0, tailwind_merge.twMerge)(className),
+			className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitAssistantMessage", className),
 			...props,
 			"data-message-id": message.id,
 			children: [
@@ -3385,7 +3416,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-copilotkit": true,
 			"data-testid": "copilot-user-message",
-			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:flex-col cpk:items-end cpk:group cpk:pt-10", className),
+			className: (0, tailwind_merge.twMerge)("copilotKitMessage copilotKitUserMessage cpk:flex cpk:flex-col cpk:items-end cpk:group cpk:pt-10", className),
 			"data-message-id": message.id,
 			...props,
 			children: [BoundMessageRenderer, BoundToolbar]
@@ -3940,7 +3971,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-copilotkit": true,
 			"data-testid": "copilot-message-list",
-			className: (0, tailwind_merge.twMerge)("cpk:flex cpk:flex-col", className),
+			className: (0, tailwind_merge.twMerge)("copilotKitMessages cpk:flex cpk:flex-col", className),
 			...props,
 			children: [
 				messageElements,
@@ -4103,7 +4134,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				"data-copilotkit": true,
 				"data-testid": "copilot-chat",
 				"data-copilot-running": isRunning ? "true" : "false",
-				className: (0, tailwind_merge.twMerge)("cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
+				className: (0, tailwind_merge.twMerge)("copilotKitChat cpk:relative cpk:h-full cpk:flex cpk:flex-col", className),
 				...props,
 				children: BoundWelcomeScreen
 			});
@@ -4122,7 +4153,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			"data-copilotkit": true,
 			"data-testid": "copilot-chat",
 			"data-copilot-running": isRunning ? "true" : "false",
-			className: (0, tailwind_merge.twMerge)("cpk:relative cpk:h-full", className),
+			className: (0, tailwind_merge.twMerge)("copilotKitChat cpk:relative cpk:h-full", className),
 			...props,
 			children: [BoundScrollView, BoundInput]
 		});
@@ -4414,20 +4445,27 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		const isMediaRecorderSupported = typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
 		const { messageView: providedMessageView, suggestionView: providedSuggestionView, onStop: providedStopHandler, ...restProps } = props;
 		(0, react.useEffect)(() => {
+			let detached = false;
+			const connectAbortController = new AbortController();
+			if (agent instanceof _ag_ui_client.HttpAgent) agent.abortController = connectAbortController;
 			const connect = async (agent) => {
 				try {
 					await copilotkit.connectAgent({ agent });
 				} catch (error) {
+					if (detached) return;
 					if (error instanceof _ag_ui_client.AGUIConnectNotImplementedError) {} else throw error;
 				}
 			};
 			agent.threadId = resolvedThreadId;
 			connect(agent);
-			return () => {};
+			return () => {
+				detached = true;
+				connectAbortController.abort();
+				agent.detachActiveRun();
+			};
 		}, [
 			resolvedThreadId,
 			agent,
-			copilotkit,
 			resolvedAgentId
 		]);
 		const onSubmitInput = (0, react.useCallback)(async (value) => {
@@ -4442,7 +4480,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			} catch (error) {
 				console.error("CopilotChat: runAgent failed", error);
 			}
-		}, [agent, copilotkit]);
+		}, [agent]);
 		const handleSelectSuggestion = (0, react.useCallback)(async (suggestion) => {
 			agent.addMessage({
 				id: (0, _copilotkitnext_shared.randomUUID)(),
@@ -4454,7 +4492,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			} catch (error) {
 				console.error("CopilotChat: runAgent failed after selecting suggestion", error);
 			}
-		}, [agent, copilotkit]);
+		}, [agent]);
 		const stopCurrentRun = (0, react.useCallback)(() => {
 			try {
 				copilotkit.stopAgent({ agent });
@@ -4466,7 +4504,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 					console.error("CopilotChat: abortRun fallback failed", abortError);
 				}
 			}
-		}, [agent, copilotkit]);
+		}, [agent]);
 		const handleStartTranscribe = (0, react.useCallback)(() => {
 			setTranscriptionError(null);
 			setTranscribeMode("transcribe");
@@ -4520,7 +4558,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			} finally {
 				setIsTranscribing(false);
 			}
-		}, [copilotkit]);
+		}, []);
 		(0, react.useEffect)(() => {
 			if (transcriptionError) {
 				const timer = setTimeout(() => {
@@ -4596,7 +4634,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 	DefaultCloseIcon.displayName = "CopilotChatToggleButton.CloseIcon";
 	const ICON_TRANSITION_STYLE = Object.freeze({ transition: "opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)" });
 	const ICON_WRAPPER_BASE = "cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:will-change-transform";
-	const BUTTON_BASE_CLASSES = cn("cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center", "cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground", "cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out", "cpk:hover:scale-[1.04] cpk:hover:shadow-md", "cpk:cursor-pointer", "cpk:active:scale-[0.96]", "cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background", "cpk:disabled:pointer-events-none cpk:disabled:opacity-60");
+	const BUTTON_BASE_CLASSES = cn("copilotKitButton", "cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center", "cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground", "cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out", "cpk:hover:scale-[1.04] cpk:hover:shadow-md", "cpk:cursor-pointer", "cpk:active:scale-[0.96]", "cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background", "cpk:disabled:pointer-events-none cpk:disabled:opacity-60");
 	const CopilotChatToggleButton = react.default.forwardRef(function CopilotChatToggleButton({ openIcon, closeIcon, className, ...buttonProps }, ref) {
 		var _configuration$labels, _configuration$isModa, _configuration$setMod;
 		const { onClick, type, disabled, ...restProps } = buttonProps;
@@ -4683,7 +4721,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 			"data-testid": "copilot-modal-header",
 			"data-slot": "copilot-modal-header",
-			className: cn("cpk:flex cpk:items-center cpk:justify-between cpk:border-b cpk:border-border cpk:px-4 cpk:py-4", "cpk:bg-background/95 cpk:backdrop-blur cpk:supports-[backdrop-filter]:bg-background/80", className),
+			className: cn("copilotKitHeader", "cpk:flex cpk:items-center cpk:justify-between cpk:border-b cpk:border-border cpk:px-4 cpk:py-4", "cpk:bg-background/95 cpk:backdrop-blur cpk:supports-[backdrop-filter]:bg-background/80", className),
 			...rest,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "cpk:flex cpk:w-full cpk:items-center cpk:gap-2",
@@ -4796,7 +4834,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 			"data-copilotkit": true,
 			"data-testid": "copilot-sidebar",
 			"data-copilot-sidebar": true,
-			className: cn("cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : "cpk:translate-x-full cpk:pointer-events-none"),
+			className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : "cpk:translate-x-full cpk:pointer-events-none"),
 			style: {
 				["--sidebar-width"]: widthToCss(sidebarWidth),
 				paddingTop: "env(safe-area-inset-top)",
@@ -4960,7 +4998,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 				"aria-label": labels.modalHeaderTitle,
 				"data-testid": "copilot-popup",
 				"data-copilot-popup": true,
-				className: cn("cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground", "cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out", "cpk:md:transition-transform cpk:md:transition-opacity", "cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0", "cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]", "cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]", "cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40", popupAnimationClass),
+				className: cn("copilotKitPopup copilotKitWindow", "cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground", "cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out", "cpk:md:transition-transform cpk:md:transition-opacity", "cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0", "cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]", "cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]", "cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40", popupAnimationClass),
 				style: popupStyle,
 				children: [headerElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "cpk:flex-1 cpk:overflow-hidden",