@copilotkit/react-core 1.9.1 → 1.9.2-next.1

package/dist/index.js

@@ -158,7 +158,7 @@ var emptyCopilotContext = {
   },
   removeChatSuggestionConfiguration: () => {
   },
-  showDevConsole: "auto",
+  showDevConsole: false,
   coagentStates: {},
   setCoagentStates: () => {
   },
@@ -333,7 +333,7 @@ function setsHaveIntersection(setA, setB) {
 
 // src/components/copilot-provider/copilotkit.tsx
 var import_react_dom = require("react-dom");
-var import_shared8 = require("@copilotkit/shared");
+var import_shared10 = require("@copilotkit/shared");
 
 // src/hooks/use-flat-category-store.ts
 var import_react3 = require("react");
@@ -402,7 +402,7 @@ function setsHaveIntersection2(setA, setB) {
 }
 
 // src/components/copilot-provider/copilot-messages.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/context/copilot-messages-context.tsx
 var import_react4 = __toESM(require("react"));
@@ -423,175 +423,58 @@ function useCopilotMessagesContext() {
 
 // src/components/copilot-provider/copilot-messages.tsx
 var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
-var import_jsx_runtime = require("react/jsx-runtime");
-function CopilotMessages({ children }) {
-  const [messages, setMessages] = (0, import_react5.useState)([]);
-  const lastLoadedThreadId = (0, import_react5.useRef)();
-  const lastLoadedAgentName = (0, import_react5.useRef)();
-  const lastLoadedMessages = (0, import_react5.useRef)();
-  const { threadId, agentSession, runtimeClient } = useCopilotContext();
-  (0, import_react5.useEffect)(() => {
-    if (!threadId || threadId === lastLoadedThreadId.current)
-      return;
-    if (threadId === lastLoadedThreadId.current && (agentSession == null ? void 0 : agentSession.agentName) === lastLoadedAgentName.current) {
-      return;
-    }
-    const fetchMessages = () => __async(this, null, function* () {
-      var _a, _b, _c, _d;
-      if (!(agentSession == null ? void 0 : agentSession.agentName))
-        return;
-      const result = yield runtimeClient.loadAgentState({
-        threadId,
-        agentName: agentSession == null ? void 0 : agentSession.agentName
-      });
-      const newMessages = (_b = (_a = result.data) == null ? void 0 : _a.loadAgentState) == null ? void 0 : _b.messages;
-      if (newMessages === lastLoadedMessages.current)
-        return;
-      if ((_d = (_c = result.data) == null ? void 0 : _c.loadAgentState) == null ? void 0 : _d.threadExists) {
-        lastLoadedMessages.current = newMessages;
-        lastLoadedThreadId.current = threadId;
-        lastLoadedAgentName.current = agentSession == null ? void 0 : agentSession.agentName;
-        const messages2 = (0, import_runtime_client_gql.loadMessagesFromJsonRepresentation)(JSON.parse(newMessages || "[]"));
-        setMessages(messages2);
-      }
-    });
-    void fetchMessages();
-  }, [threadId, agentSession == null ? void 0 : agentSession.agentName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    CopilotMessagesContext.Provider,
-    {
-      value: {
-        messages,
-        setMessages
-      },
-      children
-    }
-  );
-}
 
 // src/components/toast/toast-provider.tsx
-var import_react7 = require("react");
-
-// src/components/error-boundary/error-utils.tsx
-var import_react6 = require("react");
-
-// src/components/toast/exclamation-mark-icon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ExclamationMarkIcon = ({
-  className,
-  style
-}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: `lucide lucide-circle-alert ${className ? className : ""}`,
-    style,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
-    ]
-  }
-);
-
-// src/components/error-boundary/error-utils.tsx
-var import_react_markdown = __toESM(require("react-markdown"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function ErrorToast({ errors }) {
-  const errorsToRender = errors.map((error, idx) => {
-    var _a, _b, _c;
-    const originalError = "extensions" in error ? (_a = error.extensions) == null ? void 0 : _a.originalError : {};
-    const message = (_b = originalError == null ? void 0 : originalError.message) != null ? _b : error.message;
-    const code = "extensions" in error ? (_c = error.extensions) == null ? void 0 : _c.code : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "div",
-      {
-        style: {
-          marginTop: idx === 0 ? 0 : 10,
-          marginBottom: 14
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ExclamationMarkIcon, { style: { marginBottom: 4 } }),
-          code && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "div",
-            {
-              style: {
-                fontWeight: "600",
-                marginBottom: 4
-              },
-              children: [
-                "Copilot Cloud Error:",
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontFamily: "monospace", fontWeight: "normal" }, children: code })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_markdown.default, { children: message })
-        ]
-      },
-      idx
-    );
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      style: {
-        fontSize: "13px",
-        maxWidth: "600px"
-      },
-      children: [
-        errorsToRender,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "11px", opacity: 0.75 }, children: "NOTE: This error only displays during local development." })
-      ]
+var import_react5 = require("react");
+var import_shared3 = require("@copilotkit/shared");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToastContext = (0, import_react5.createContext)(void 0);
+function getErrorSeverity(error) {
+  if (error.severity) {
+    switch (error.severity) {
+      case import_shared3.Severity.CRITICAL:
+        return "critical";
+      case import_shared3.Severity.WARNING:
+        return "warning";
+      case import_shared3.Severity.INFO:
+        return "info";
+      default:
+        return "info";
     }
-  );
-}
-function useErrorToast() {
-  const { addToast } = useToast();
-  return (0, import_react6.useCallback)(
-    (error) => {
-      const errorId = error.map((err) => {
-        var _a, _b;
-        const message = "extensions" in err ? ((_b = (_a = err.extensions) == null ? void 0 : _a.originalError) == null ? void 0 : _b.message) || err.message : err.message;
-        const stack = err.stack || "";
-        return btoa(message + stack).slice(0, 32);
-      }).join("|");
-      addToast({
-        type: "error",
-        id: errorId,
-        // Toast libraries typically dedupe by id
-        message: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorToast, { errors: error })
-      });
-    },
-    [addToast]
-  );
+  }
+  const message = error.message.toLowerCase();
+  if (message.includes("api key") || message.includes("401") || message.includes("unauthorized") || message.includes("authentication") || message.includes("incorrect api key")) {
+    return "critical";
+  }
+  return "info";
 }
-function useAsyncCallback(callback, deps) {
-  const addErrorToast = useErrorToast();
-  return (0, import_react6.useCallback)((...args) => __async(this, null, function* () {
-    try {
-      return yield callback(...args);
-    } catch (error) {
-      console.error("Error in async callback:", error);
-      addErrorToast([error]);
-      throw error;
-    }
-  }), deps);
+function getErrorColors(severity) {
+  switch (severity) {
+    case "critical":
+      return {
+        background: "#fee2e2",
+        border: "#dc2626",
+        text: "#7f1d1d",
+        icon: "#dc2626"
+      };
+    case "warning":
+      return {
+        background: "#fef3c7",
+        border: "#d97706",
+        text: "#78350f",
+        icon: "#d97706"
+      };
+    case "info":
+      return {
+        background: "#dbeafe",
+        border: "#2563eb",
+        text: "#1e3a8a",
+        icon: "#2563eb"
+      };
+  }
 }
-
-// src/components/toast/toast-provider.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ToastContext = (0, import_react7.createContext)(void 0);
 function useToast() {
-  const context = (0, import_react7.useContext)(ToastContext);
+  const context = (0, import_react5.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -601,8 +484,12 @@ function ToastProvider({
   enabled,
   children
 }) {
-  const [toasts, setToasts] = (0, import_react7.useState)([]);
-  const addToast = (0, import_react7.useCallback)(
+  const [toasts, setToasts] = (0, import_react5.useState)([]);
+  const [bannerError, setBannerErrorState] = (0, import_react5.useState)(null);
+  const removeToast = (0, import_react5.useCallback)((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const addToast = (0, import_react5.useCallback)(
     (toast) => {
       var _a;
       if (!enabled) {
@@ -620,144 +507,413 @@ function ToastProvider({
         }, toast.duration);
       }
     },
+    [enabled, removeToast]
+  );
+  const setBannerError = (0, import_react5.useCallback)(
+    (error) => {
+      if (!enabled && error !== null) {
+        return;
+      }
+      setBannerErrorState(error);
+    },
     [enabled]
   );
-  const addGraphQLErrorsToast = (0, import_react7.useCallback)((errors) => {
-    addToast({
-      type: "error",
-      message: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorToast, { errors })
-    });
-  }, []);
-  const removeToast = (0, import_react7.useCallback)((id) => {
-    setToasts((currentToasts) => currentToasts.filter((toast) => toast.id !== id));
+  const addGraphQLErrorsToast = (0, import_react5.useCallback)((errors) => {
+    console.warn("addGraphQLErrorsToast is deprecated. All errors now show as banners.");
   }, []);
   const value = {
     toasts,
     addToast,
     addGraphQLErrorsToast,
     removeToast,
-    enabled
+    enabled,
+    bannerError,
+    setBannerError
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ToastContext.Provider, { value, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          bottom: "1rem",
-          left: "50%",
-          transform: "translateX(-50%)",
-          zIndex: 50,
-          display: "flex",
-          flexDirection: "column",
-          gap: "0.5rem"
-        },
-        children: [
-          toasts.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "right" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastContext.Provider, { value, children: [
+    bannerError && (() => {
+      const severity = getErrorSeverity(bannerError);
+      const colors = getErrorColors(severity);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            bottom: "20px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 9999,
+            backgroundColor: colors.background,
+            border: `1px solid ${colors.border}`,
+            borderLeft: `4px solid ${colors.border}`,
+            borderRadius: "8px",
+            padding: "10px 14px",
+            fontSize: "13px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            backdropFilter: "blur(8px)",
+            maxWidth: "500px",
+            minWidth: "350px"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
             {
-              onClick: () => setToasts([]),
               style: {
-                padding: "4px 8px",
-                fontSize: "12px",
-                cursor: "pointer",
-                background: "white",
-                border: "1px solid rgba(0,0,0,0.2)",
-                borderRadius: "4px"
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: "10px"
               },
-              children: "Close All"
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      style: {
+                        width: "12px",
+                        height: "12px",
+                        borderRadius: "50%",
+                        backgroundColor: colors.border,
+                        flexShrink: 0
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px", flex: 1 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          color: colors.text,
+                          lineHeight: "1.4",
+                          fontWeight: "400",
+                          fontSize: "13px",
+                          flex: 1,
+                          wordWrap: "break-word",
+                          overflowWrap: "break-word",
+                          hyphens: "auto"
+                        },
+                        children: (() => {
+                          const message = bannerError.message;
+                          const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+                          const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
+                          let cleanMessage = message.replace(markdownLinkRegex, "").replace(plainUrlRegex, "").replace(/See more:\s*/g, "").replace(/\s+/g, " ").trim();
+                          if (cleanMessage.length > 120) {
+                            cleanMessage = cleanMessage.substring(0, 117) + "...";
+                          }
+                          return cleanMessage;
+                        })()
+                      }
+                    ),
+                    (() => {
+                      const message = bannerError.message;
+                      const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+                      const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
+                      let url = null;
+                      let buttonText = "See More";
+                      const markdownMatch = markdownLinkRegex.exec(message);
+                      if (markdownMatch) {
+                        url = markdownMatch[2];
+                        buttonText = "See More";
+                      } else {
+                        const urlMatch = plainUrlRegex.exec(message);
+                        if (urlMatch) {
+                          url = urlMatch[0];
+                          buttonText = "See More";
+                        }
+                      }
+                      if (!url)
+                        return null;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          onClick: () => window.open(url, "_blank", "noopener,noreferrer"),
+                          style: {
+                            background: colors.border,
+                            color: "white",
+                            border: "none",
+                            borderRadius: "5px",
+                            padding: "4px 10px",
+                            fontSize: "11px",
+                            fontWeight: "500",
+                            cursor: "pointer",
+                            transition: "all 0.2s ease",
+                            flexShrink: 0
+                          },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.opacity = "0.9";
+                            e.currentTarget.style.transform = "translateY(-1px)";
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.opacity = "1";
+                            e.currentTarget.style.transform = "translateY(0)";
+                          },
+                          children: buttonText
+                        }
+                      );
+                    })()
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    onClick: () => setBannerError(null),
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      color: colors.text,
+                      cursor: "pointer",
+                      padding: "2px",
+                      borderRadius: "3px",
+                      fontSize: "14px",
+                      lineHeight: "1",
+                      opacity: 0.6,
+                      transition: "all 0.2s ease",
+                      flexShrink: 0
+                    },
+                    title: "Dismiss",
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.opacity = "1";
+                      e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.opacity = "0.6";
+                      e.currentTarget.style.background = "transparent";
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ]
             }
-          ) }),
-          toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Toast,
-            {
-              message: toast.message,
-              type: toast.type,
-              onClose: () => removeToast(toast.id)
-            },
-            toast.id
-          ))
-        ]
-      }
-    ),
+          )
+        }
+      );
+    })(),
     children
   ] });
 }
-function Toast({
-  message,
-  type = "info",
-  onClose
-}) {
-  const bgColors = {
-    info: "#3b82f6",
-    success: "#22c55e",
-    warning: "#eab308",
-    error: "#ef4444"
+
+// src/utils/dev-console.ts
+function shouldShowDevConsole(showDevConsole) {
+  return showDevConsole;
+}
+
+// src/components/copilot-provider/copilot-messages.tsx
+var import_shared4 = require("@copilotkit/shared");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CopilotMessages({ children }) {
+  const [messages, setMessages] = (0, import_react6.useState)([]);
+  const lastLoadedThreadId = (0, import_react6.useRef)();
+  const lastLoadedAgentName = (0, import_react6.useRef)();
+  const lastLoadedMessages = (0, import_react6.useRef)();
+  const { threadId, agentSession, runtimeClient, showDevConsole } = useCopilotContext();
+  const { setBannerError } = useToast();
+  const createStructuredError2 = (gqlError) => {
+    const extensions = gqlError.extensions;
+    const originalError = extensions == null ? void 0 : extensions.originalError;
+    if (originalError == null ? void 0 : originalError.stack) {
+      if (originalError.stack.includes("CopilotApiDiscoveryError")) {
+        return new import_shared4.CopilotKitApiDiscoveryError({ message: originalError.message });
+      }
+      if (originalError.stack.includes("CopilotKitRemoteEndpointDiscoveryError")) {
+        return new import_shared4.CopilotKitRemoteEndpointDiscoveryError({ message: originalError.message });
+      }
+      if (originalError.stack.includes("CopilotKitAgentDiscoveryError")) {
+        return new import_shared4.CopilotKitAgentDiscoveryError({
+          agentName: "",
+          availableAgents: []
+        });
+      }
+    }
+    const message = (originalError == null ? void 0 : originalError.message) || gqlError.message;
+    const code = extensions == null ? void 0 : extensions.code;
+    if (code) {
+      return new import_shared4.CopilotKitError({ message, code });
+    }
+    return null;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
+  const handleGraphQLErrors = (0, import_react6.useCallback)(
+    (error) => {
+      var _a;
+      if ((_a = error.graphQLErrors) == null ? void 0 : _a.length) {
+        const graphQLErrors = error.graphQLErrors;
+        const routeError = (gqlError) => {
+          const extensions = gqlError.extensions;
+          const visibility = extensions == null ? void 0 : extensions.visibility;
+          const isDev = shouldShowDevConsole(showDevConsole);
+          if (!isDev) {
+            console.error("CopilotKit Error (hidden in production):", gqlError.message);
+            return;
+          }
+          if (visibility === import_shared4.ErrorVisibility.SILENT) {
+            console.error("CopilotKit Silent Error:", gqlError.message);
+            return;
+          }
+          const ckError = createStructuredError2(gqlError);
+          if (ckError) {
+            setBannerError(ckError);
+          } else {
+            const fallbackError = new import_shared4.CopilotKitError({
+              message: gqlError.message,
+              code: import_shared4.CopilotKitErrorCode.UNKNOWN
+            });
+            setBannerError(fallbackError);
+          }
+        };
+        graphQLErrors.forEach(routeError);
+      } else {
+        const isDev = shouldShowDevConsole(showDevConsole);
+        if (!isDev) {
+          console.error("CopilotKit Error (hidden in production):", error);
+        } else {
+          const fallbackError = new import_shared4.CopilotKitError({
+            message: (error == null ? void 0 : error.message) || String(error),
+            code: import_shared4.CopilotKitErrorCode.UNKNOWN
+          });
+          setBannerError(fallbackError);
+        }
+      }
+    },
+    [setBannerError, showDevConsole]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (!threadId || threadId === lastLoadedThreadId.current)
+      return;
+    if (threadId === lastLoadedThreadId.current && (agentSession == null ? void 0 : agentSession.agentName) === lastLoadedAgentName.current) {
+      return;
+    }
+    const fetchMessages = () => __async(this, null, function* () {
+      var _a, _b, _c, _d;
+      if (!(agentSession == null ? void 0 : agentSession.agentName))
+        return;
+      const result = yield runtimeClient.loadAgentState({
+        threadId,
+        agentName: agentSession == null ? void 0 : agentSession.agentName
+      });
+      if (result.error) {
+        lastLoadedThreadId.current = threadId;
+        lastLoadedAgentName.current = agentSession == null ? void 0 : agentSession.agentName;
+        handleGraphQLErrors(result.error);
+        return;
+      }
+      const newMessages = (_b = (_a = result.data) == null ? void 0 : _a.loadAgentState) == null ? void 0 : _b.messages;
+      if (newMessages === lastLoadedMessages.current)
+        return;
+      if ((_d = (_c = result.data) == null ? void 0 : _c.loadAgentState) == null ? void 0 : _d.threadExists) {
+        lastLoadedMessages.current = newMessages;
+        lastLoadedThreadId.current = threadId;
+        lastLoadedAgentName.current = agentSession == null ? void 0 : agentSession.agentName;
+        const messages2 = (0, import_runtime_client_gql.loadMessagesFromJsonRepresentation)(JSON.parse(newMessages || "[]"));
+        setMessages(messages2);
+      }
+    });
+    void fetchMessages();
+  }, [threadId, agentSession == null ? void 0 : agentSession.agentName, runtimeClient]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    CopilotMessagesContext.Provider,
     {
-      style: {
-        backgroundColor: bgColors[type],
-        color: "white",
-        padding: "0.5rem 1.5rem",
-        borderRadius: "0.25rem",
-        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-        position: "relative",
-        minWidth: "200px"
+      value: {
+        messages,
+        setMessages
       },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: message }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            onClick: onClose,
-            style: {
-              position: "absolute",
-              top: "0",
-              right: "0",
-              background: "none",
-              border: "none",
-              color: "white",
-              cursor: "pointer",
-              padding: "0.5rem",
-              fontSize: "1rem"
-            },
-            children: "\u2715"
-          }
-        )
-      ]
+      children
     }
   );
 }
 
 // src/hooks/use-copilot-runtime-client.ts
 var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
-var import_react8 = require("react");
+var import_react7 = require("react");
+var import_shared5 = require("@copilotkit/shared");
 var useCopilotRuntimeClient = (options) => {
-  const { addGraphQLErrorsToast } = useToast();
-  const addErrorToast = useErrorToast();
-  const { addToast } = useToast();
-  const runtimeClient = (0, import_react8.useMemo)(() => {
-    return new import_runtime_client_gql2.CopilotRuntimeClient(__spreadProps(__spreadValues({}, options), {
+  const { setBannerError } = useToast();
+  const _a = options, { showDevConsole } = _a, runtimeOptions = __objRest(_a, ["showDevConsole"]);
+  const lastStructuredErrorRef = (0, import_react7.useRef)(null);
+  const runtimeClient = (0, import_react7.useMemo)(() => {
+    return new import_runtime_client_gql2.CopilotRuntimeClient(__spreadProps(__spreadValues({}, runtimeOptions), {
       handleGQLErrors: (error) => {
-        if (error.graphQLErrors.length) {
-          addGraphQLErrorsToast(error.graphQLErrors);
+        var _a2;
+        if ((_a2 = error.graphQLErrors) == null ? void 0 : _a2.length) {
+          const graphQLErrors = error.graphQLErrors;
+          const routeError = (gqlError) => {
+            const extensions = gqlError.extensions;
+            const visibility = extensions == null ? void 0 : extensions.visibility;
+            const isDev = shouldShowDevConsole(showDevConsole != null ? showDevConsole : false);
+            if (visibility === import_shared5.ErrorVisibility.SILENT) {
+              console.error("CopilotKit Silent Error:", gqlError.message);
+              return;
+            }
+            if (!isDev) {
+              console.error("CopilotKit Error (hidden in production):", gqlError.message);
+              return;
+            }
+            const now = Date.now();
+            const errorMessage = gqlError.message;
+            if (lastStructuredErrorRef.current && lastStructuredErrorRef.current.message === errorMessage && now - lastStructuredErrorRef.current.timestamp < 150) {
+              return;
+            }
+            lastStructuredErrorRef.current = { message: errorMessage, timestamp: now };
+            const ckError = createStructuredError(gqlError);
+            if (ckError) {
+              setBannerError(ckError);
+            } else {
+              const fallbackError = new import_shared5.CopilotKitError({
+                message: gqlError.message,
+                code: import_shared5.CopilotKitErrorCode.UNKNOWN
+              });
+              setBannerError(fallbackError);
+            }
+          };
+          graphQLErrors.forEach(routeError);
         } else {
-          addErrorToast([error]);
+          const isDev = shouldShowDevConsole(showDevConsole != null ? showDevConsole : false);
+          if (!isDev) {
+            console.error("CopilotKit Error (hidden in production):", error);
+          } else {
+            const fallbackError = new import_shared5.CopilotKitError({
+              message: (error == null ? void 0 : error.message) || String(error),
+              code: import_shared5.CopilotKitErrorCode.UNKNOWN
+            });
+            setBannerError(fallbackError);
+          }
         }
       },
       handleGQLWarning: (message) => {
         console.warn(message);
-        addToast({ type: "warning", message });
+        const warningError = new import_shared5.CopilotKitError({
+          message,
+          code: import_shared5.CopilotKitErrorCode.UNKNOWN
+        });
+        setBannerError(warningError);
       }
     }));
-  }, [options, addGraphQLErrorsToast, addToast]);
+  }, [runtimeOptions, setBannerError, showDevConsole]);
   return runtimeClient;
 };
+function createStructuredError(gqlError) {
+  var _a, _b, _c;
+  const extensions = gqlError.extensions;
+  const originalError = extensions == null ? void 0 : extensions.originalError;
+  const message = (originalError == null ? void 0 : originalError.message) || gqlError.message;
+  const code = extensions == null ? void 0 : extensions.code;
+  if (code) {
+    return new import_shared5.CopilotKitError({ message, code });
+  }
+  if ((_a = originalError == null ? void 0 : originalError.stack) == null ? void 0 : _a.includes("CopilotApiDiscoveryError")) {
+    return new import_shared5.CopilotKitApiDiscoveryError({ message });
+  }
+  if ((_b = originalError == null ? void 0 : originalError.stack) == null ? void 0 : _b.includes("CopilotKitRemoteEndpointDiscoveryError")) {
+    return new import_shared5.CopilotKitRemoteEndpointDiscoveryError({ message });
+  }
+  if ((_c = originalError == null ? void 0 : originalError.stack) == null ? void 0 : _c.includes("CopilotKitAgentDiscoveryError")) {
+    return new import_shared5.CopilotKitAgentDiscoveryError({
+      agentName: "",
+      availableAgents: []
+    });
+  }
+  return null;
+}
 
 // src/utils/extract.ts
-var import_shared3 = require("@copilotkit/shared");
+var import_shared6 = require("@copilotkit/shared");
 var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
 var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
 function extract(_0) {
@@ -806,7 +962,7 @@ function extract(_0) {
               {
                 name: action.name,
                 description: action.description || "",
-                jsonSchema: JSON.stringify((0, import_shared3.actionParametersToJsonSchema)(action.parameters || []))
+                jsonSchema: JSON.stringify((0, import_shared6.actionParametersToJsonSchema)(action.parameters || []))
               }
             ],
             url: window.location.href
@@ -890,26 +1046,12 @@ This is not a conversation, so please do not ask questions. Just call the functi
 `;
 }
 
-// src/utils/dev-console.ts
-function shouldShowDevConsole(showDevConsole) {
-  if (typeof showDevConsole === "boolean") {
-    return showDevConsole;
-  }
-  return getHostname() === "localhost" || getHostname() === "127.0.0.1" || getHostname() === "0.0.0.0" || getHostname() === "::1";
-}
-function getHostname() {
-  if (typeof window !== "undefined" && window.location) {
-    return window.location.hostname;
-  }
-  return "";
-}
-
 // src/components/error-boundary/error-boundary.tsx
 var import_react9 = __toESM(require("react"));
-var import_shared6 = require("@copilotkit/shared");
+var import_shared9 = require("@copilotkit/shared");
 
 // src/lib/status-checker.ts
-var import_shared4 = require("@copilotkit/shared");
+var import_shared7 = require("@copilotkit/shared");
 var STATUS_CHECK_INTERVAL = 1e3 * 60 * 5;
 var StatusChecker = class {
   constructor() {
@@ -927,10 +1069,10 @@ var StatusChecker = class {
         clearInterval(this.intervalId);
       const checkStatus = () => __async(this, null, function* () {
         try {
-          const response = yield fetch(`${import_shared4.COPILOT_CLOUD_API_URL}/ciu`, {
+          const response = yield fetch(`${import_shared7.COPILOT_CLOUD_API_URL}/ciu`, {
             method: "GET",
             headers: {
-              [import_shared4.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey
+              [import_shared7.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey
             }
           }).then((response2) => response2.json());
           this.lastResponse = response;
@@ -963,203 +1105,475 @@ var StatusChecker = class {
 };
 
 // src/components/usage-banner.tsx
-var import_shared5 = require("@copilotkit/shared");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_shared8 = require("@copilotkit/shared");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultIcons = {
-  [import_shared5.Severity.Error]: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  [import_shared8.Severity.CRITICAL]: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
     {
       viewBox: "0 0 24 24",
-      width: "20",
-      height: "20",
+      width: "18",
+      height: "18",
       stroke: "currentColor",
-      strokeWidth: "2",
+      strokeWidth: "2.5",
       fill: "none",
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+      ]
+    }
+  ),
+  [import_shared8.Severity.WARNING]: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "18",
+      height: "18",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
+    }
+  ),
+  [import_shared8.Severity.INFO]: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "18",
+      height: "18",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
       ]
     }
   )
 };
 function UsageBanner({
-  severity = import_shared5.Severity.Error,
+  severity = import_shared8.Severity.CRITICAL,
   message = "",
   icon,
+  onClose,
   actions
 }) {
   if (!message || !severity) {
     return null;
   }
+  const parseMessage = (rawMessage) => {
+    const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+    const matches = Array.from(rawMessage.matchAll(linkRegex));
+    if (matches.length > 0) {
+      let cleanMessage2 = rawMessage.replace(/\.\s*See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, ".").replace(/See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, "").trim();
+      return cleanMessage2;
+    }
+    return rawMessage;
+  };
+  const cleanMessage = parseMessage(message);
   const Icon = icon || defaultIcons[severity];
-  const bgColor = {
-    info: "#dbeafe",
-    warning: "#fef3c7",
-    error: "#fee2e2"
-  }[severity];
-  const textColor = {
-    info: "#1e40af",
-    warning: "#854d0e",
-    error: "#991b1b"
-  }[severity];
-  const iconColor = {
-    info: "#3b82f6",
-    warning: "#eab308",
-    error: "#ef4444"
-  }[severity];
-  const primaryButtonColor = {
-    info: "#3b82f6",
-    warning: "#eab308",
-    error: "#ef4444"
-  }[severity];
-  const primaryButtonHoverColor = {
-    info: "#2563eb",
-    warning: "#ca8a04",
-    error: "#dc2626"
-  }[severity];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const themeConfigs = {
+    [import_shared8.Severity.INFO]: {
+      bg: "linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)",
+      border: "#93c5fd",
+      text: "#1e40af",
+      icon: "#3b82f6",
+      primaryBtn: "#3b82f6",
+      primaryBtnHover: "#2563eb"
+    },
+    [import_shared8.Severity.WARNING]: {
+      bg: "linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)",
+      border: "#fbbf24",
+      text: "#92400e",
+      icon: "#f59e0b",
+      primaryBtn: "#f59e0b",
+      primaryBtnHover: "#d97706"
+    },
+    [import_shared8.Severity.CRITICAL]: {
+      bg: "linear-gradient(135deg, #fef2f2 0%, #fecaca 100%)",
+      border: "#f87171",
+      text: "#991b1b",
+      icon: "#ef4444",
+      primaryBtn: "#ef4444",
+      primaryBtnHover: "#dc2626"
+    }
+  };
+  const themeConfig = themeConfigs[severity] || themeConfigs[import_shared8.Severity.CRITICAL];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       style: {
         position: "fixed",
-        bottom: "16px",
+        bottom: "20px",
         left: "50%",
         transform: "translateX(-50%)",
-        maxWidth: "90%",
-        zIndex: 9999
+        maxWidth: "min(95vw, 680px)",
+        width: "100%",
+        zIndex: 1e4,
+        animation: "bannerSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexWrap: "wrap",
-            alignItems: "center",
-            gap: "12px",
-            borderRadius: "9999px",
-            border: "1px solid #e5e7eb",
-            backgroundColor: bgColor,
-            padding: "8px 16px",
-            boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { color: iconColor }, children: Icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              "span",
-              {
-                style: {
-                  flex: 1,
-                  fontSize: "14px",
-                  fontWeight: 500,
-                  color: textColor,
-                  whiteSpace: "normal",
-                  wordBreak: "break-word"
-                },
-                children: message
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  gap: "8px",
-                  flexWrap: "wrap"
-                },
-                children: [
-                  (actions == null ? void 0 : actions.secondary) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                    "button",
-                    {
-                      onClick: actions.secondary.onClick,
-                      style: {
-                        borderRadius: "9999px",
-                        padding: "4px 12px",
-                        fontSize: "14px",
-                        fontWeight: 500,
-                        color: textColor,
-                        backgroundColor: "transparent",
-                        border: "none",
-                        cursor: "pointer",
-                        transition: "background-color 0.2s"
-                      },
-                      onMouseOver: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.5)",
-                      onMouseOut: (e) => e.currentTarget.style.backgroundColor = "transparent",
-                      children: actions.secondary.label
-                    }
-                  ),
-                  (actions == null ? void 0 : actions.primary) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                    "button",
-                    {
-                      onClick: actions.primary.onClick,
-                      style: {
-                        borderRadius: "9999px",
-                        padding: "4px 12px",
-                        fontSize: "14px",
-                        fontWeight: 500,
-                        color: "#fff",
-                        backgroundColor: primaryButtonColor,
-                        border: "none",
-                        cursor: "pointer",
-                        transition: "background-color 0.2s"
-                      },
-                      onMouseOver: (e) => e.currentTarget.style.backgroundColor = primaryButtonHoverColor,
-                      onMouseOut: (e) => e.currentTarget.style.backgroundColor = primaryButtonColor,
-                      children: actions.primary.label
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+          @keyframes bannerSlideIn {
+            from {
+              opacity: 0;
+              transform: translateX(-50%) translateY(10px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(-50%) translateY(0);
+            }
+          }
+        ` }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "14px",
+              borderRadius: "16px",
+              border: `1px solid ${themeConfig.border}`,
+              background: themeConfig.bg,
+              padding: "18px 20px",
+              boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+              position: "relative",
+              backdropFilter: "blur(10px)",
+              WebkitBackdropFilter: "blur(10px)"
+            },
+            children: [
+              onClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    position: "absolute",
+                    top: "12px",
+                    right: "12px",
+                    background: "rgba(255, 255, 255, 0.8)",
+                    border: "none",
+                    color: themeConfig.text,
+                    cursor: "pointer",
+                    fontSize: "18px",
+                    lineHeight: "1",
+                    padding: "6px",
+                    borderRadius: "8px",
+                    opacity: 0.7,
+                    transition: "all 0.2s ease",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "28px",
+                    height: "28px"
+                  },
+                  title: "Close",
+                  onMouseOver: (e) => {
+                    e.currentTarget.style.opacity = "1";
+                    e.currentTarget.style.background = "rgba(255, 255, 255, 1)";
+                    e.currentTarget.style.transform = "scale(1.05)";
+                  },
+                  onMouseOut: (e) => {
+                    e.currentTarget.style.opacity = "0.7";
+                    e.currentTarget.style.background = "rgba(255, 255, 255, 0.8)";
+                    e.currentTarget.style.transform = "scale(1)";
+                  },
+                  children: "\xD7"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    color: themeConfig.icon,
+                    flexShrink: 0,
+                    marginTop: "1px",
+                    padding: "6px",
+                    borderRadius: "10px",
+                    background: "rgba(255, 255, 255, 0.7)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: Icon
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, paddingRight: onClose ? "40px" : "0" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "15px",
+                      fontWeight: 600,
+                      color: themeConfig.text,
+                      lineHeight: "1.5",
+                      marginBottom: actions ? "12px" : "0",
+                      fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+                    },
+                    children: cleanMessage
+                  }
+                ),
+                actions && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      gap: "10px",
+                      flexWrap: "wrap"
+                    },
+                    children: [
+                      actions.secondary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          onClick: actions.secondary.onClick,
+                          style: {
+                            borderRadius: "10px",
+                            padding: "8px 16px",
+                            fontSize: "14px",
+                            fontWeight: 500,
+                            color: themeConfig.text,
+                            backgroundColor: "rgba(255, 255, 255, 0.8)",
+                            border: `1.5px solid ${themeConfig.border}`,
+                            cursor: "pointer",
+                            transition: "all 0.2s ease",
+                            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+                          },
+                          onMouseOver: (e) => {
+                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
+                            e.currentTarget.style.transform = "translateY(-1px)";
+                            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+                          },
+                          onMouseOut: (e) => {
+                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
+                            e.currentTarget.style.transform = "translateY(0)";
+                            e.currentTarget.style.boxShadow = "none";
+                          },
+                          children: actions.secondary.label
+                        }
+                      ),
+                      actions.primary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "button",
+                        {
+                          onClick: actions.primary.onClick,
+                          style: {
+                            borderRadius: "10px",
+                            padding: "8px 16px",
+                            fontSize: "14px",
+                            fontWeight: 600,
+                            color: "#fff",
+                            backgroundColor: themeConfig.primaryBtn,
+                            border: "none",
+                            cursor: "pointer",
+                            transition: "all 0.2s ease",
+                            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+                          },
+                          onMouseOver: (e) => {
+                            e.currentTarget.style.backgroundColor = themeConfig.primaryBtnHover;
+                            e.currentTarget.style.transform = "translateY(-1px)";
+                            e.currentTarget.style.boxShadow = "0 6px 16px rgba(0, 0, 0, 0.2)";
+                          },
+                          onMouseOut: (e) => {
+                            e.currentTarget.style.backgroundColor = themeConfig.primaryBtn;
+                            e.currentTarget.style.transform = "translateY(0)";
+                            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+                          },
+                          children: actions.primary.label
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
     }
   );
 }
-function renderCopilotKitUsage(error) {
-  switch (error.name) {
-    case import_shared5.ERROR_NAMES.CONFIGURATION_ERROR:
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UsageBanner, { severity: error.severity, message: error.message });
-    case import_shared5.ERROR_NAMES.MISSING_PUBLIC_API_KEY_ERROR:
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        UsageBanner,
-        {
-          severity: error.severity,
-          message: error.message,
-          actions: {
-            primary: {
-              label: "Sign In",
-              onClick: () => {
-                window.location.href = "https://cloud.copilotkit.ai";
-              }
-            }
+function renderCopilotKitUsage(error, onClose) {
+  if (error.visibility !== import_shared8.ErrorVisibility.BANNER) {
+    return null;
+  }
+  const extractUrlFromMessage = (message) => {
+    const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+    const match = linkRegex.exec(message);
+    return match ? match[2] : null;
+  };
+  const getErrorActions = (error2) => {
+    switch (error2.name) {
+      case import_shared8.ERROR_NAMES.MISSING_PUBLIC_API_KEY_ERROR:
+        return {
+          primary: {
+            label: "Sign In",
+            onClick: () => window.location.href = "https://cloud.copilotkit.ai"
           }
-        }
-      );
-    case import_shared5.ERROR_NAMES.UPGRADE_REQUIRED_ERROR:
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        UsageBanner,
-        {
-          severity: error.severity,
-          message: error.message,
-          actions: {
-            primary: {
-              label: "Upgrade",
-              onClick: () => {
-                window.location.href = "https://copilotkit.ai/";
-              }
+        };
+      case import_shared8.ERROR_NAMES.UPGRADE_REQUIRED_ERROR:
+        return {
+          primary: {
+            label: "Upgrade",
+            onClick: () => window.location.href = "https://copilotkit.ai/"
+          }
+        };
+      case import_shared8.ERROR_NAMES.COPILOT_API_DISCOVERY_ERROR:
+      case import_shared8.ERROR_NAMES.COPILOT_REMOTE_ENDPOINT_DISCOVERY_ERROR:
+      case import_shared8.ERROR_NAMES.COPILOT_KIT_AGENT_DISCOVERY_ERROR:
+        return {
+          primary: {
+            label: "View Docs",
+            onClick: () => {
+              var _a;
+              const urlFromMessage = extractUrlFromMessage(error2.message);
+              const urlFromExtensions = (_a = error2.extensions) == null ? void 0 : _a.troubleshootingUrl;
+              const url = urlFromMessage || urlFromExtensions || "https://docs.copilotkit.ai/troubleshooting/common-issues";
+              window.open(url, "_blank");
             }
           }
-        }
-      );
+        };
+      default:
+        return void 0;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    UsageBanner,
+    {
+      severity: error.severity || import_shared8.Severity.CRITICAL,
+      message: error.message,
+      onClose,
+      actions: getErrorActions(error)
+    }
+  );
+}
+
+// src/components/error-boundary/error-utils.tsx
+var import_react8 = require("react");
+
+// src/components/toast/exclamation-mark-icon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ExclamationMarkIcon = ({
+  className,
+  style
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: `lucide lucide-circle-alert ${className ? className : ""}`,
+    style,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+    ]
   }
+);
+
+// src/components/error-boundary/error-utils.tsx
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ErrorToast({ errors }) {
+  const errorsToRender = errors.map((error, idx) => {
+    var _a, _b, _c;
+    const originalError = "extensions" in error ? (_a = error.extensions) == null ? void 0 : _a.originalError : {};
+    const message = (_b = originalError == null ? void 0 : originalError.message) != null ? _b : error.message;
+    const code = "extensions" in error ? (_c = error.extensions) == null ? void 0 : _c.code : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        style: {
+          marginTop: idx === 0 ? 0 : 10,
+          marginBottom: 14
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExclamationMarkIcon, { style: { marginBottom: 4 } }),
+          code && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                fontWeight: "600",
+                marginBottom: 4
+              },
+              children: [
+                "Copilot Runtime Error:",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { fontFamily: "monospace", fontWeight: "normal" }, children: code })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_markdown.default, { children: message })
+        ]
+      },
+      idx
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      style: {
+        fontSize: "13px",
+        maxWidth: "600px"
+      },
+      children: [
+        errorsToRender,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "11px", opacity: 0.75 }, children: "NOTE: This error only displays during local development." })
+      ]
+    }
+  );
+}
+function useErrorToast() {
+  const { addToast } = useToast();
+  return (0, import_react8.useCallback)(
+    (error) => {
+      const errorId = error.map((err) => {
+        var _a, _b;
+        const message = "extensions" in err ? ((_b = (_a = err.extensions) == null ? void 0 : _a.originalError) == null ? void 0 : _b.message) || err.message : err.message;
+        const stack = err.stack || "";
+        return btoa(message + stack).slice(0, 32);
+      }).join("|");
+      addToast({
+        type: "error",
+        id: errorId,
+        // Toast libraries typically dedupe by id
+        message: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorToast, { errors: error })
+      });
+    },
+    [addToast]
+  );
+}
+function useAsyncCallback(callback, deps) {
+  const addErrorToast = useErrorToast();
+  return (0, import_react8.useCallback)((...args) => __async(this, null, function* () {
+    try {
+      return yield callback(...args);
+    } catch (error) {
+      console.error("Error in async callback:", error);
+      addErrorToast([error]);
+      throw error;
+    }
+  }), deps);
 }
 
 // src/components/error-boundary/error-boundary.tsx
-var import_shared7 = require("@copilotkit/shared");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var statusChecker = new StatusChecker();
 var CopilotErrorBoundary = class extends import_react9.default.Component {
@@ -1194,9 +1608,12 @@ var CopilotErrorBoundary = class extends import_react9.default.Component {
   render() {
     var _a, _b;
     if (this.state.hasError) {
-      if (this.state.error instanceof import_shared6.CopilotKitError) {
-        if (import_shared7.COPILOT_CLOUD_ERROR_NAMES.includes(this.state.error.name)) {
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorToast2, { error: this.state.error, children: renderCopilotKitUsage(this.state.error) });
+      if (this.state.error instanceof import_shared9.CopilotKitError) {
+        if (this.state.error.visibility === import_shared9.ErrorVisibility.BANNER) {
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorToast2, { error: this.state.error, children: renderCopilotKitUsage(
+            this.state.error,
+            () => this.setState({ hasError: false, error: void 0 })
+          ) });
         }
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
           this.props.children,
@@ -1230,14 +1647,16 @@ function ErrorToast2({ error, children }) {
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function CopilotKit(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const showDevConsole = props.showDevConsole === void 0 ? "auto" : props.showDevConsole;
+  var _a2;
+  const showDevConsole = (_a2 = props.showDevConsole) != null ? _a2 : false;
   const enabled = shouldShowDevConsole(showDevConsole);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastProvider, { enabled, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopilotErrorBoundary, { publicApiKey: props.publicApiKey, showUsageBanner: enabled, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopilotKitInternal, __spreadProps(__spreadValues({}, props), { children })) }) });
 }
 function CopilotKitInternal(cpkProps) {
+  var _b, _c;
   const _a = cpkProps, { children } = _a, props = __objRest(_a, ["children"]);
   validateProps(cpkProps);
-  const chatApiEndpoint = props.runtimeUrl || import_shared8.COPILOT_CLOUD_CHAT_URL;
+  const chatApiEndpoint = props.runtimeUrl || import_shared10.COPILOT_CLOUD_CHAT_URL;
   const [actions, setActions] = (0, import_react10.useState)({});
   const [coAgentStateRenders, setCoAgentStateRenders] = (0, import_react10.useState)({});
   const chatComponentsCache = (0, import_react10.useRef)({
@@ -1255,6 +1674,8 @@ function CopilotKitInternal(cpkProps) {
     removeElement: removeDocument,
     allElements: allDocuments
   } = use_flat_category_store_default();
+  const statusChecker2 = (0, import_react10.useMemo)(() => new StatusChecker(), []);
+  const [usageBannerStatus, setUsageBannerStatus] = (0, import_react10.useState)(null);
   const setAction = (0, import_react10.useCallback)((id, action) => {
     setActions((prevPoints) => {
       return __spreadProps(__spreadValues({}, prevPoints), {
@@ -1336,7 +1757,7 @@ ${nonDocumentStrings}`;
     [removeDocument]
   );
   const copilotApiConfig = (0, import_react10.useMemo)(() => {
-    var _a2, _b;
+    var _a2, _b2;
     let cloud = void 0;
     if (props.publicApiKey) {
       cloud = {
@@ -1345,7 +1766,7 @@ ${nonDocumentStrings}`;
             restrictToTopic: {
               enabled: Boolean(props.guardrails_c),
               validTopics: ((_a2 = props.guardrails_c) == null ? void 0 : _a2.validTopics) || [],
-              invalidTopics: ((_b = props.guardrails_c) == null ? void 0 : _b.invalidTopics) || []
+              invalidTopics: ((_b2 = props.guardrails_c) == null ? void 0 : _b2.invalidTopics) || []
             }
           }
         }
@@ -1383,13 +1804,14 @@ ${nonDocumentStrings}`;
       }
       return acc;
     }, {});
-    return __spreadValues(__spreadValues(__spreadValues({}, copilotApiConfig.headers || {}), copilotApiConfig.publicApiKey ? { [import_shared8.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: copilotApiConfig.publicApiKey } : {}), authHeaders);
+    return __spreadValues(__spreadValues(__spreadValues({}, copilotApiConfig.headers || {}), copilotApiConfig.publicApiKey ? { [import_shared10.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: copilotApiConfig.publicApiKey } : {}), authHeaders);
   }, [copilotApiConfig.headers, copilotApiConfig.publicApiKey, authStates]);
   const runtimeClient = useCopilotRuntimeClient({
     url: copilotApiConfig.chatApiEndpoint,
     publicApiKey: copilotApiConfig.publicApiKey,
     headers,
-    credentials: copilotApiConfig.credentials
+    credentials: copilotApiConfig.credentials,
+    showDevConsole: (_b = props.showDevConsole) != null ? _b : false
   });
   const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = (0, import_react10.useState)({});
   const addChatSuggestionConfiguration = (id, suggestion) => {
@@ -1444,7 +1866,7 @@ ${nonDocumentStrings}`;
       setAgentSession(null);
     }
   }, [props.agent]);
-  const [internalThreadId, setInternalThreadId] = (0, import_react10.useState)(props.threadId || (0, import_shared8.randomUUID)());
+  const [internalThreadId, setInternalThreadId] = (0, import_react10.useState)(props.threadId || (0, import_shared10.randomUUID)());
   const setThreadId = (0, import_react10.useCallback)(
     (value) => {
       if (props.threadId) {
@@ -1461,7 +1883,7 @@ ${nonDocumentStrings}`;
   }, [props.threadId]);
   const [runId, setRunId] = (0, import_react10.useState)(null);
   const chatAbortControllerRef = (0, import_react10.useRef)(null);
-  const showDevConsole = props.showDevConsole === void 0 ? "auto" : props.showDevConsole;
+  const showDevConsole = (_c = props.showDevConsole) != null ? _c : false;
   const [langGraphInterruptAction, _setLangGraphInterruptAction] = (0, import_react10.useState)(null);
   const setLangGraphInterruptAction = (0, import_react10.useCallback)((action) => {
     _setLangGraphInterruptAction((prev) => {
@@ -1569,10 +1991,10 @@ function formatFeatureName(featureName) {
 function validateProps(props) {
   const cloudFeatures = Object.keys(props).filter((key) => key.endsWith("_c"));
   if (!props.runtimeUrl && !props.publicApiKey) {
-    throw new import_shared8.ConfigurationError("Missing required prop: 'runtimeUrl' or 'publicApiKey'");
+    throw new import_shared10.ConfigurationError("Missing required prop: 'runtimeUrl' or 'publicApiKey'");
   }
   if (cloudFeatures.length > 0 && !props.publicApiKey) {
-    throw new import_shared8.MissingPublicApiKeyError(
+    throw new import_shared10.MissingPublicApiKeyError(
       `Missing required prop: 'publicApiKey' to use cloud features: ${cloudFeatures.map(formatFeatureName).join(", ")}`
     );
   }
@@ -1584,12 +2006,12 @@ var import_runtime_client_gql7 = require("@copilotkit/runtime-client-gql");
 
 // src/hooks/use-chat.ts
 var import_react11 = require("react");
-var import_shared10 = require("@copilotkit/shared");
+var import_shared12 = require("@copilotkit/shared");
 var import_runtime_client_gql6 = require("@copilotkit/runtime-client-gql");
 
 // src/types/frontend-action.ts
 var import_runtime_client_gql5 = require("@copilotkit/runtime-client-gql");
-var import_shared9 = require("@copilotkit/shared");
+var import_shared11 = require("@copilotkit/shared");
 function processActionsForRuntimeRequest(actions) {
   const filteredActions = actions.filter(
     (action) => action.available !== import_runtime_client_gql5.ActionInputAvailability.Disabled && action.disabled !== true && action.name !== "*" && action.available != "frontend" && !action.pairedAction
@@ -1605,7 +2027,7 @@ function processActionsForRuntimeRequest(actions) {
     return {
       name: action.name,
       description: action.description || "",
-      jsonSchema: JSON.stringify((0, import_shared9.actionParametersToJsonSchema)(action.parameters || [])),
+      jsonSchema: JSON.stringify((0, import_shared11.actionParametersToJsonSchema)(action.parameters || [])),
       available
     };
   });
@@ -1649,12 +2071,14 @@ function useChat(options) {
   const extensionsRef = (0, import_react11.useRef)(extensions);
   extensionsRef.current = extensions;
   const publicApiKey = copilotConfig.publicApiKey;
-  const headers = __spreadValues(__spreadValues({}, copilotConfig.headers || {}), publicApiKey ? { [import_shared10.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {});
+  const headers = __spreadValues(__spreadValues({}, copilotConfig.headers || {}), publicApiKey ? { [import_shared12.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {});
+  const { showDevConsole } = useCopilotContext();
   const runtimeClient = useCopilotRuntimeClient({
     url: copilotConfig.chatApiEndpoint,
     publicApiKey: copilotConfig.publicApiKey,
     headers,
-    credentials: copilotConfig.credentials
+    credentials: copilotConfig.credentials,
+    showDevConsole
   });
   const pendingAppendsRef = (0, import_react11.useRef)([]);
   const runChatCompletion = useAsyncCallback(
@@ -1772,7 +2196,7 @@ function useChat(options) {
           (metaEvents != null ? metaEvents : []).forEach((ev) => {
             if (ev.name === import_runtime_client_gql6.MetaEventName.LangGraphInterruptEvent) {
               let eventValue = (0, import_runtime_client_gql6.langGraphInterruptEvent)(ev).value;
-              eventValue = (0, import_shared10.parseJson)(eventValue, eventValue);
+              eventValue = (0, import_shared12.parseJson)(eventValue, eventValue);
               setLangGraphInterruptAction({
                 event: __spreadProps(__spreadValues({}, (0, import_runtime_client_gql6.langGraphInterruptEvent)(ev)), {
                   value: eventValue
@@ -1846,7 +2270,7 @@ function useChat(options) {
               } else {
                 if (agentLock) {
                   setAgentSession({
-                    threadId: (0, import_shared10.randomId)(),
+                    threadId: (0, import_shared12.randomId)(),
                     agentName: agentLock,
                     nodeName: void 0
                   });
@@ -1907,7 +2331,7 @@ function useChat(options) {
               if (pairedFeAction) {
                 const newExecutionMessage = new import_runtime_client_gql6.ActionExecutionMessage({
                   name: pairedFeAction.name,
-                  arguments: (0, import_shared10.parseJson)(resultMessage.result, resultMessage.result),
+                  arguments: (0, import_shared12.parseJson)(resultMessage.result, resultMessage.result),
                   status: message.status,
                   createdAt: message.createdAt,
                   parentMessageId: message.parentMessageId
@@ -1917,7 +2341,7 @@ function useChat(options) {
             } else if (message.isResultMessage() && currentResultMessagePairedFeAction) {
               const newExecutionMessage = new import_runtime_client_gql6.ActionExecutionMessage({
                 name: currentResultMessagePairedFeAction.name,
-                arguments: (0, import_shared10.parseJson)(message.result, message.result),
+                arguments: (0, import_shared12.parseJson)(message.result, message.result),
                 status: message.status,
                 createdAt: message.createdAt
               });
@@ -2367,11 +2791,11 @@ ${additionalInstructions}` : "");
 }
 
 // src/hooks/use-copilot-action.ts
-var import_shared11 = require("@copilotkit/shared");
+var import_shared13 = require("@copilotkit/shared");
 var import_react13 = require("react");
 function useCopilotAction(action, dependencies) {
   const { setAction, removeAction, actions, chatComponentsCache } = useCopilotContext();
-  const idRef = (0, import_react13.useRef)((0, import_shared11.randomId)());
+  const idRef = (0, import_react13.useRef)((0, import_shared13.randomId)());
   const renderAndWaitRef = (0, import_react13.useRef)(null);
   const { addToast } = useToast();
   action = __spreadValues({}, action);
@@ -2473,7 +2897,7 @@ function isFrontendAction(action) {
 
 // src/hooks/use-coagent-state-render.ts
 var import_react14 = require("react");
-var import_shared12 = require("@copilotkit/shared");
+var import_shared14 = require("@copilotkit/shared");
 function useCoAgentStateRender(action, dependencies) {
   const {
     setCoAgentStateRender,
@@ -2482,12 +2906,16 @@ function useCoAgentStateRender(action, dependencies) {
     chatComponentsCache,
     availableAgents
   } = (0, import_react14.useContext)(CopilotContext);
-  const idRef = (0, import_react14.useRef)((0, import_shared12.randomId)());
-  const { addToast } = useToast();
+  const idRef = (0, import_react14.useRef)((0, import_shared14.randomId)());
+  const { setBannerError, addToast } = useToast();
   (0, import_react14.useEffect)(() => {
     if ((availableAgents == null ? void 0 : availableAgents.length) && !availableAgents.some((a) => a.name === action.name)) {
       const message = `(useCoAgentStateRender): Agent "${action.name}" not found. Make sure the agent exists and is properly configured.`;
-      addToast({ type: "warning", message });
+      const agentError = new import_shared14.CopilotKitAgentDiscoveryError({
+        agentName: action.name,
+        availableAgents: availableAgents.map((a) => ({ name: a.name, id: a.id }))
+      });
+      setBannerError(agentError);
     }
   }, [availableAgents]);
   const key = `${action.name}-${action.nodeName || "global"}`;
@@ -2590,11 +3018,11 @@ function useCopilotReadable({
 
 // src/hooks/use-coagent.ts
 var import_react17 = require("react");
-var import_shared13 = require("@copilotkit/shared");
+var import_shared15 = require("@copilotkit/shared");
 function useCoAgent(options) {
   const generalContext = useCopilotContext();
   const { availableAgents } = generalContext;
-  const { addToast } = useToast();
+  const { setBannerError } = useToast();
   const lastLoadedThreadId = (0, import_react17.useRef)();
   const lastLoadedState = (0, import_react17.useRef)();
   const { name } = options;
@@ -2602,7 +3030,11 @@ function useCoAgent(options) {
     if ((availableAgents == null ? void 0 : availableAgents.length) && !availableAgents.some((a) => a.name === name)) {
       const message = `(useCoAgent): Agent "${name}" not found. Make sure the agent exists and is properly configured.`;
       console.warn(message);
-      addToast({ type: "warning", message });
+      const agentError = new import_shared15.CopilotKitAgentDiscoveryError({
+        agentName: name,
+        availableAgents: availableAgents.map((a) => ({ name: a.name, id: a.id }))
+      });
+      setBannerError(agentError);
     }
   }, [availableAgents]);
   const messagesContext = useCopilotMessagesContext();
@@ -2614,7 +3046,8 @@ function useCoAgent(options) {
     url: copilotApiConfig.chatApiEndpoint,
     publicApiKey: copilotApiConfig.publicApiKey,
     headers,
-    credentials: copilotApiConfig.credentials
+    credentials: copilotApiConfig.credentials,
+    showDevConsole: context.showDevConsole
   });
   const setState = (0, import_react17.useCallback)(
     (newState) => {
@@ -2643,7 +3076,7 @@ function useCoAgent(options) {
       if (((_d = (_c = result.data) == null ? void 0 : _c.loadAgentState) == null ? void 0 : _d.threadExists) && newState && newState != "{}") {
         lastLoadedState.current = newState;
         lastLoadedThreadId.current = threadId;
-        const fetchedState = (0, import_shared13.parseJson)(newState, {});
+        const fetchedState = (0, import_shared15.parseJson)(newState, {});
         isExternalStateManagement(options) ? options.setState(fetchedState) : setState(fetchedState);
       }
     });
@@ -2808,13 +3241,13 @@ function useCopilotAuthenticatedAction_c(action, dependencies) {
 
 // src/hooks/use-langgraph-interrupt.ts
 var import_react20 = require("react");
-var import_shared14 = require("@copilotkit/shared");
+var import_shared16 = require("@copilotkit/shared");
 function useLangGraphInterrupt(action, dependencies) {
   var _a;
   const { setLangGraphInterruptAction, removeLangGraphInterruptAction, langGraphInterruptAction } = (0, import_react20.useContext)(CopilotContext);
   const { runChatCompletion } = useCopilotChat();
   const { addToast } = useToast();
-  const actionId = (0, import_shared14.dataToUUID)(JSON.stringify(action), "lgAction");
+  const actionId = (0, import_shared16.dataToUUID)(JSON.stringify(action), "lgAction");
   const hasAction = (0, import_react20.useMemo)(
     () => Boolean(langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.id),
     [langGraphInterruptAction]