@copilotkit/react-core 1.51.4-next.7 → 1.51.4

package/dist/components/dev-console/console-trigger.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   DeveloperConsoleModal
-} from "../../chunk-YCG6SNAU.mjs";
+} from "../../chunk-SBRCWA4S.mjs";
 import {
   CopilotKitIcon
-} from "../../chunk-PIF5KJYI.mjs";
+} from "../../chunk-7PJKPWMD.mjs";
 import {
   useCopilotContext
-} from "../../chunk-AFNWX62Q.mjs";
+} from "../../chunk-C7HSVDHD.mjs";
 import "../../chunk-DMLQZG75.mjs";
 import "../../chunk-SKC7AJIV.mjs";
 
@@ -15,7 +15,9 @@ import "../../chunk-SKC7AJIV.mjs";
 import { useState, useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var INSPECTOR_HIDE_KEY = "cpk:inspector:hidden";
-function ConsoleTrigger({ position = "bottom-right" }) {
+function ConsoleTrigger({
+  position = "bottom-right"
+}) {
   const context = useCopilotContext();
   const hasApiKey = Boolean(context.copilotApiConfig.publicApiKey);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -79,10 +81,18 @@ function ConsoleTrigger({ position = "bottom-right" }) {
       setIsDragging(false);
       dragRef.current = null;
     };
-    document.addEventListener("mousemove", handleMouseMove, { capture: true, passive: false });
-    document.addEventListener("mouseup", handleMouseUp, { capture: true, passive: false });
+    document.addEventListener("mousemove", handleMouseMove, {
+      capture: true,
+      passive: false
+    });
+    document.addEventListener("mouseup", handleMouseUp, {
+      capture: true,
+      passive: false
+    });
     return () => {
-      document.removeEventListener("mousemove", handleMouseMove, { capture: true });
+      document.removeEventListener("mousemove", handleMouseMove, {
+        capture: true
+      });
       document.removeEventListener("mouseup", handleMouseUp, { capture: true });
     };
   }, [isDragging]);
@@ -211,7 +221,13 @@ function ConsoleTrigger({ position = "bottom-right" }) {
                 boxShadow: "0 2px 8px rgba(255, 107, 107, 0.4)",
                 border: "2px solid white"
               },
-              children: /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", color: "white", fontWeight: "bold" }, children: "!" })
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: { fontSize: "10px", color: "white", fontWeight: "bold" },
+                  children: "!"
+                }
+              )
             }
           )
         ]

package/dist/components/dev-console/console-trigger.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/dev-console/console-trigger.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { useCopilotContext } from \"../../context/copilot-context\";\nimport { CopilotKitIcon } from \"./icons\";\nimport { DeveloperConsoleModal } from \"./developer-console-modal\";\n\n// Storage key for hiding the Inspector trigger/modal\nconst INSPECTOR_HIDE_KEY = \"cpk:inspector:hidden\";\n\ninterface ConsoleTriggerProps {\n  position?: \"bottom-left\" | \"bottom-right\";\n}\n\nexport function ConsoleTrigger({ position = \"bottom-right\" }: ConsoleTriggerProps) {\n  const context = useCopilotContext();\n  const hasApiKey = Boolean(context.copilotApiConfig.publicApiKey);\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isDragging, setIsDragging] = useState(false);\n  const [buttonPosition, setButtonPosition] = useState<{ x: number; y: number } | null>(null);\n  const [mounted, setMounted] = useState(false);\n  const [isHidden, setIsHidden] = useState(false);\n\n  const dragRef = useRef<{\n    startX: number;\n    startY: number;\n    buttonX: number;\n    buttonY: number;\n  } | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Initialize on client side only\n  useEffect(() => {\n    setMounted(true);\n    try {\n      const hidden =\n        typeof window !== \"undefined\" ? localStorage.getItem(INSPECTOR_HIDE_KEY) : null;\n      if (hidden === \"1\" || hidden === \"true\") {\n        setIsHidden(true);\n      }\n    } catch {\n      // ignore\n    }\n    if (typeof window !== \"undefined\" && !buttonPosition) {\n      const buttonSize = 60;\n      const margin = 24;\n\n      const initialPosition = {\n        x: margin,\n        y: window.innerHeight - buttonSize - margin,\n      };\n\n      setButtonPosition(initialPosition);\n    }\n  }, [position]);\n\n  const handleMouseDown = (e: React.MouseEvent) => {\n    e.preventDefault();\n    if (!buttonPosition) return;\n\n    dragRef.current = {\n      startX: e.clientX,\n      startY: e.clientY,\n      buttonX: buttonPosition.x,\n      buttonY: buttonPosition.y,\n    };\n    setIsDragging(true);\n  };\n\n  useEffect(() => {\n    if (!isDragging) return;\n\n    const handleMouseMove = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (!dragRef.current) return;\n\n      const deltaX = e.clientX - dragRef.current.startX;\n      const deltaY = e.clientY - dragRef.current.startY;\n\n      // Calculate new position\n      let newX = dragRef.current.buttonX + deltaX;\n      let newY = dragRef.current.buttonY + deltaY;\n\n      // Keep button within viewport bounds\n      newX = Math.max(0, Math.min(newX, window.innerWidth - 60));\n      newY = Math.max(0, Math.min(newY, window.innerHeight - 60));\n\n      setButtonPosition({ x: newX, y: newY });\n    };\n\n    const handleMouseUp = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragging(false);\n      dragRef.current = null;\n    };\n\n    // Use capture phase to intercept events before they reach other handlers\n    document.addEventListener(\"mousemove\", handleMouseMove, { capture: true, passive: false });\n    document.addEventListener(\"mouseup\", handleMouseUp, { capture: true, passive: false });\n\n    return () => {\n      document.removeEventListener(\"mousemove\", handleMouseMove, { capture: true });\n      document.removeEventListener(\"mouseup\", handleMouseUp, { capture: true });\n    };\n  }, [isDragging]);\n\n  // Don't render until mounted and position is initialized\n  if (!mounted || !buttonPosition || isHidden) {\n    return null;\n  }\n\n  return (\n    <>\n      <button\n        ref={buttonRef}\n        onClick={(e) => {\n          if (!isDragging) {\n            // Modifier-click hides\n            if (e.metaKey || e.altKey) {\n              try {\n                localStorage.setItem(INSPECTOR_HIDE_KEY, \"1\");\n              } catch {}\n              setIsHidden(true);\n              return;\n            }\n            setIsModalOpen(true);\n          }\n        }}\n        onContextMenu={(e) => {\n          e.preventDefault();\n          try {\n            localStorage.setItem(INSPECTOR_HIDE_KEY, \"1\");\n          } catch {}\n          setIsHidden(true);\n        }}\n        onMouseDown={handleMouseDown}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        style={{\n          position: \"fixed\",\n          left: `${buttonPosition.x}px`,\n          top: `${buttonPosition.y}px`,\n          zIndex: 2147483647,\n          width: \"60px\",\n          height: \"60px\",\n          background: isDragging ? \"#000000\" : isHovered ? \"#111111\" : \"#000000\",\n          color: \"white\",\n          borderRadius: \"50%\",\n          boxShadow: isDragging\n            ? \"0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4)\"\n            : isHovered\n              ? \"0 12px 40px rgba(0, 0, 0, 0.7), 0 6px 20px rgba(0, 0, 0, 0.5)\"\n              : \"0 6px 20px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3)\",\n          transition: isDragging ? \"none\" : \"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          border: \"none\",\n          cursor: isDragging ? \"grabbing\" : \"grab\",\n          opacity: 1,\n          userSelect: \"none\",\n          transform: isDragging ? \"scale(1.05)\" : isHovered ? \"scale(1.1)\" : \"scale(1)\",\n          backdropFilter: \"blur(10px)\",\n          pointerEvents: \"auto\",\n          isolation: \"isolate\",\n        }}\n        title={\n          hasApiKey\n            ? \"Open Inspector (Drag to move)\"\n            : \"Inspector (License Key Required, Drag to move)\"\n        }\n      >\n        {/* Close (hide) control */}\n        <div\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n            try {\n              localStorage.setItem(INSPECTOR_HIDE_KEY, \"1\");\n            } catch {\n              // ignore\n            }\n            setIsHidden(true);\n          }}\n          style={{\n            position: \"absolute\",\n            bottom: \"2px\",\n            right: \"2px\",\n            width: \"20px\",\n            height: \"20px\",\n            borderRadius: \"50%\",\n            background: \"#ffffff\",\n            color: \"#ef4444\",\n            fontSize: \"14px\",\n            lineHeight: \"18px\",\n            textAlign: \"center\",\n            boxShadow: \"0 2px 6px rgba(0,0,0,0.35)\",\n            cursor: \"pointer\",\n            border: \"1px solid #e5e7eb\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            zIndex: 1,\n          }}\n          title=\"Hide Inspector\"\n        >\n          ×\n        </div>\n        <div\n          style={{\n            width: \"28px\",\n            height: \"28px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            filter: \"drop-shadow(0 2px 4px rgba(0,0,0,0.2))\",\n          }}\n        >\n          <CopilotKitIcon />\n        </div>\n        {!hasApiKey && (\n          <div\n            style={{\n              position: \"absolute\",\n              top: \"-2px\",\n              right: \"-2px\",\n              width: \"18px\",\n              height: \"18px\",\n              background: \"linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%)\",\n              borderRadius: \"50%\",\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              boxShadow: \"0 2px 8px rgba(255, 107, 107, 0.4)\",\n              border: \"2px solid white\",\n            }}\n          >\n            <span style={{ fontSize: \"10px\", color: \"white\", fontWeight: \"bold\" }}>!</span>\n          </div>\n        )}\n      </button>\n\n      <DeveloperConsoleModal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        hasApiKey={hasApiKey}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":["e"]}
+{"version":3,"sources":["../../../src/components/dev-console/console-trigger.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { useCopilotContext } from \"../../context/copilot-context\";\nimport { CopilotKitIcon } from \"./icons\";\nimport { DeveloperConsoleModal } from \"./developer-console-modal\";\n\n// Storage key for hiding the Inspector trigger/modal\nconst INSPECTOR_HIDE_KEY = \"cpk:inspector:hidden\";\n\ninterface ConsoleTriggerProps {\n  position?: \"bottom-left\" | \"bottom-right\";\n}\n\nexport function ConsoleTrigger({\n  position = \"bottom-right\",\n}: ConsoleTriggerProps) {\n  const context = useCopilotContext();\n  const hasApiKey = Boolean(context.copilotApiConfig.publicApiKey);\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isDragging, setIsDragging] = useState(false);\n  const [buttonPosition, setButtonPosition] = useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n  const [mounted, setMounted] = useState(false);\n  const [isHidden, setIsHidden] = useState(false);\n\n  const dragRef = useRef<{\n    startX: number;\n    startY: number;\n    buttonX: number;\n    buttonY: number;\n  } | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Initialize on client side only\n  useEffect(() => {\n    setMounted(true);\n    try {\n      const hidden =\n        typeof window !== \"undefined\"\n          ? localStorage.getItem(INSPECTOR_HIDE_KEY)\n          : null;\n      if (hidden === \"1\" || hidden === \"true\") {\n        setIsHidden(true);\n      }\n    } catch {\n      // ignore\n    }\n    if (typeof window !== \"undefined\" && !buttonPosition) {\n      const buttonSize = 60;\n      const margin = 24;\n\n      const initialPosition = {\n        x: margin,\n        y: window.innerHeight - buttonSize - margin,\n      };\n\n      setButtonPosition(initialPosition);\n    }\n  }, [position]);\n\n  const handleMouseDown = (e: React.MouseEvent) => {\n    e.preventDefault();\n    if (!buttonPosition) return;\n\n    dragRef.current = {\n      startX: e.clientX,\n      startY: e.clientY,\n      buttonX: buttonPosition.x,\n      buttonY: buttonPosition.y,\n    };\n    setIsDragging(true);\n  };\n\n  useEffect(() => {\n    if (!isDragging) return;\n\n    const handleMouseMove = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (!dragRef.current) return;\n\n      const deltaX = e.clientX - dragRef.current.startX;\n      const deltaY = e.clientY - dragRef.current.startY;\n\n      // Calculate new position\n      let newX = dragRef.current.buttonX + deltaX;\n      let newY = dragRef.current.buttonY + deltaY;\n\n      // Keep button within viewport bounds\n      newX = Math.max(0, Math.min(newX, window.innerWidth - 60));\n      newY = Math.max(0, Math.min(newY, window.innerHeight - 60));\n\n      setButtonPosition({ x: newX, y: newY });\n    };\n\n    const handleMouseUp = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragging(false);\n      dragRef.current = null;\n    };\n\n    // Use capture phase to intercept events before they reach other handlers\n    document.addEventListener(\"mousemove\", handleMouseMove, {\n      capture: true,\n      passive: false,\n    });\n    document.addEventListener(\"mouseup\", handleMouseUp, {\n      capture: true,\n      passive: false,\n    });\n\n    return () => {\n      document.removeEventListener(\"mousemove\", handleMouseMove, {\n        capture: true,\n      });\n      document.removeEventListener(\"mouseup\", handleMouseUp, { capture: true });\n    };\n  }, [isDragging]);\n\n  // Don't render until mounted and position is initialized\n  if (!mounted || !buttonPosition || isHidden) {\n    return null;\n  }\n\n  return (\n    <>\n      <button\n        ref={buttonRef}\n        onClick={(e) => {\n          if (!isDragging) {\n            // Modifier-click hides\n            if (e.metaKey || e.altKey) {\n              try {\n                localStorage.setItem(INSPECTOR_HIDE_KEY, \"1\");\n              } catch {}\n              setIsHidden(true);\n              return;\n            }\n            setIsModalOpen(true);\n          }\n        }}\n        onContextMenu={(e) => {\n          e.preventDefault();\n          try {\n            localStorage.setItem(INSPECTOR_HIDE_KEY, \"1\");\n          } catch {}\n          setIsHidden(true);\n        }}\n        onMouseDown={handleMouseDown}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        style={{\n          position: \"fixed\",\n          left: `${buttonPosition.x}px`,\n          top: `${buttonPosition.y}px`,\n          zIndex: 2147483647,\n          width: \"60px\",\n          height: \"60px\",\n          background: isDragging\n            ? \"#000000\"\n            : isHovered\n              ? \"#111111\"\n              : \"#000000\",\n          color: \"white\",\n          borderRadius: \"50%\",\n          boxShadow: isDragging\n            ? \"0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4)\"\n            : isHovered\n              ? \"0 12px 40px rgba(0, 0, 0, 0.7), 0 6px 20px rgba(0, 0, 0, 0.5)\"\n              : \"0 6px 20px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3)\",\n          transition: isDragging\n            ? \"none\"\n            : \"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          border: \"none\",\n          cursor: isDragging ? \"grabbing\" : \"grab\",\n          opacity: 1,\n          userSelect: \"none\",\n          transform: isDragging\n            ? \"scale(1.05)\"\n            : isHovered\n              ? \"scale(1.1)\"\n              : \"scale(1)\",\n          backdropFilter: \"blur(10px)\",\n          pointerEvents: \"auto\",\n          isolation: \"isolate\",\n        }}\n        title={\n          hasApiKey\n            ? \"Open Inspector (Drag to move)\"\n            : \"Inspector (License Key Required, Drag to move)\"\n        }\n      >\n        {/* Close (hide) control */}\n        <div\n          onClick={(e) => {\n            e.preventDefault();\n            e.stopPropagation();\n            try {\n              localStorage.setItem(INSPECTOR_HIDE_KEY, \"1\");\n            } catch {\n              // ignore\n            }\n            setIsHidden(true);\n          }}\n          style={{\n            position: \"absolute\",\n            bottom: \"2px\",\n            right: \"2px\",\n            width: \"20px\",\n            height: \"20px\",\n            borderRadius: \"50%\",\n            background: \"#ffffff\",\n            color: \"#ef4444\",\n            fontSize: \"14px\",\n            lineHeight: \"18px\",\n            textAlign: \"center\",\n            boxShadow: \"0 2px 6px rgba(0,0,0,0.35)\",\n            cursor: \"pointer\",\n            border: \"1px solid #e5e7eb\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            zIndex: 1,\n          }}\n          title=\"Hide Inspector\"\n        >\n          ×\n        </div>\n        <div\n          style={{\n            width: \"28px\",\n            height: \"28px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            filter: \"drop-shadow(0 2px 4px rgba(0,0,0,0.2))\",\n          }}\n        >\n          <CopilotKitIcon />\n        </div>\n        {!hasApiKey && (\n          <div\n            style={{\n              position: \"absolute\",\n              top: \"-2px\",\n              right: \"-2px\",\n              width: \"18px\",\n              height: \"18px\",\n              background: \"linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%)\",\n              borderRadius: \"50%\",\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              boxShadow: \"0 2px 8px rgba(255, 107, 107, 0.4)\",\n              border: \"2px solid white\",\n            }}\n          >\n            <span\n              style={{ fontSize: \"10px\", color: \"white\", fontWeight: \"bold\" }}\n            >\n              !\n            </span>\n          </div>\n        )}\n      </button>\n\n      <DeveloperConsoleModal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        hasApiKey={hasApiKey}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":["e"]}

package/dist/components/dev-console/developer-console-modal.d.ts

@@ -5,6 +5,6 @@ interface DeveloperConsoleModalProps {
     onClose: () => void;
     hasApiKey: boolean;
 }
-declare function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }: DeveloperConsoleModalProps): react_jsx_runtime.JSX.Element | null;
+declare function DeveloperConsoleModal({ isOpen, onClose, hasApiKey, }: DeveloperConsoleModalProps): react_jsx_runtime.JSX.Element | null;
 
 export { DeveloperConsoleModal };

package/dist/components/dev-console/developer-console-modal.js

@@ -86,7 +86,9 @@ var emptyCopilotContext = {
   },
   copilotApiConfig: new class {
     get chatApiEndpoint() {
-      throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
+      throw new Error(
+        "Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!"
+      );
     }
     get headers() {
       return {};
@@ -148,12 +150,16 @@ var CopilotContext = import_react.default.createContext(emptyCopilotContext);
 function useCopilotContext() {
   const context = import_react.default.useContext(CopilotContext);
   if (context === emptyCopilotContext) {
-    throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
+    throw new Error(
+      "Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!"
+    );
   }
   return context;
 }
 function returnAndThrowInDebug(_value) {
-  throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
+  throw new Error(
+    "Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!"
+  );
 }
 
 // src/context/copilot-messages-context.tsx
@@ -207,13 +213,22 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     viewBox: "0 0 14 14",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "Group-2", transform: "translate(-118, 0)", fill: "#1BC030", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "Group", transform: "translate(118, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "path",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "g",
       {
-        d: "M0,7 C0,3.13384615 3.13384615,0 7,0 C10.8661538,0 14,3.13384615 14,7 C14,10.8661538 10.8661538,14 7,14 C3.13384615,14 0,10.8661538 0,7 Z M9.59179487,5.69764103 C9.70905818,5.54139023 9.73249341,5.33388318 9.65303227,5.15541491 C9.57357113,4.97694665 9.40367989,4.85551619 9.20909814,4.83811118 C9.01451638,4.82070616 8.82577109,4.91005717 8.71589744,5.07158974 L6.39261538,8.32389744 L5.22666667,7.15794872 C5.01450582,6.96025518 4.68389046,6.9660885 4.47883563,7.17114332 C4.27378081,7.37619815 4.26794748,7.70681351 4.46564103,7.91897436 L6.08102564,9.53435897 C6.19289944,9.64614839 6.3482622,9.70310251 6.50588106,9.69010587 C6.66349993,9.67710922 6.80743532,9.59547613 6.89948718,9.46687179 L9.59179487,5.69764103 L9.59179487,5.69764103 Z",
-        id: "Shape"
+        id: "Group-2",
+        transform: "translate(-118, 0)",
+        fill: "#1BC030",
+        fillRule: "nonzero",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "Group", transform: "translate(118, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M0,7 C0,3.13384615 3.13384615,0 7,0 C10.8661538,0 14,3.13384615 14,7 C14,10.8661538 10.8661538,14 7,14 C3.13384615,14 0,10.8661538 0,7 Z M9.59179487,5.69764103 C9.70905818,5.54139023 9.73249341,5.33388318 9.65303227,5.15541491 C9.57357113,4.97694665 9.40367989,4.85551619 9.20909814,4.83811118 C9.01451638,4.82070616 8.82577109,4.91005717 8.71589744,5.07158974 L6.39261538,8.32389744 L5.22666667,7.15794872 C5.01450582,6.96025518 4.68389046,6.9660885 4.47883563,7.17114332 C4.27378081,7.37619815 4.26794748,7.70681351 4.46564103,7.91897436 L6.08102564,9.53435897 C6.19289944,9.64614839 6.3482622,9.70310251 6.50588106,9.69010587 C6.66349993,9.67710922 6.80743532,9.59547613 6.89948718,9.46687179 L9.59179487,5.69764103 L9.59179487,5.69764103 Z",
+            id: "Shape"
+          }
+        ) })
       }
-    ) }) }) })
+    ) })
   }
 );
 var CopilotKitIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -242,7 +257,11 @@ var CopilotKitIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
 
 // src/components/dev-console/developer-console-modal.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }) {
+function DeveloperConsoleModal({
+  isOpen,
+  onClose,
+  hasApiKey
+}) {
   const context = useCopilotContext();
   const messagesContext = useCopilotMessagesContext();
   const [activeTab, setActiveTab] = (0, import_react3.useState)("actions");
@@ -265,9 +284,18 @@ function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }) {
     return null;
   const displayContext = hasApiKey ? context : {
     actions: {
-      search_web: { name: "search_web", description: "Search the web for information" },
-      send_email: { name: "send_email", description: "Send an email to a contact" },
-      create_document: { name: "create_document", description: "Create a new document" },
+      search_web: {
+        name: "search_web",
+        description: "Search the web for information"
+      },
+      send_email: {
+        name: "send_email",
+        description: "Send an email to a contact"
+      },
+      create_document: {
+        name: "create_document",
+        description: "Create a new document"
+      },
       analyze_code: {
         name: "analyze_code",
         description: "Analyze code for issues and improvements"
@@ -297,7 +325,10 @@ function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }) {
     ],
     coagentStates: {
       "main-agent": { status: "active", lastUpdate: Date.now() },
-      "code-assistant": { status: "active", lastUpdate: Date.now() - 15e3 },
+      "code-assistant": {
+        status: "active",
+        lastUpdate: Date.now() - 15e3
+      },
       "search-agent": { status: "idle", lastUpdate: Date.now() - 6e4 }
     },
     getDocumentsContext: () => [
@@ -327,13 +358,21 @@ function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }) {
         role: "assistant",
         content: "I'll help you create a todo list with drag and drop. Let me start by setting up the basic components and then add the drag and drop functionality using React DnD."
       },
-      { id: "3", role: "user", content: "Can you also add priority levels and due dates?" },
+      {
+        id: "3",
+        role: "user",
+        content: "Can you also add priority levels and due dates?"
+      },
       {
         id: "4",
         role: "assistant",
         content: "Absolutely! I'll enhance the todo items with priority levels (high, medium, low) and due date functionality. This will make your todo list much more powerful for task management."
       },
-      { id: "5", role: "user", content: "Perfect! How about adding categories or tags?" }
+      {
+        id: "5",
+        role: "user",
+        content: "Perfect! How about adding categories or tags?"
+      }
     ]
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -450,14 +489,26 @@ function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }) {
                   opacity: !hasApiKey ? 0.9 : 1
                 },
                 children: [
-                  { id: "actions", label: "Actions", count: Object.keys(displayContext.actions).length },
-                  { id: "readables", label: "Readables", count: displayContext.getAllContext().length },
+                  {
+                    id: "actions",
+                    label: "Actions",
+                    count: Object.keys(displayContext.actions).length
+                  },
+                  {
+                    id: "readables",
+                    label: "Readables",
+                    count: displayContext.getAllContext().length
+                  },
                   {
                     id: "agent",
                     label: "Agent Status",
                     count: Object.keys(displayContext.coagentStates).length
                   },
-                  { id: "messages", label: "Messages", count: displayMessagesContext.messages.length },
+                  {
+                    id: "messages",
+                    label: "Messages",
+                    count: displayMessagesContext.messages.length
+                  },
                   {
                     id: "context",
                     label: "Context",
@@ -683,11 +734,35 @@ function ActionsTab({ context }) {
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
-          style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" },
+          style: {
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between"
+          },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { fontWeight: "600", color: "#1f2937", margin: "0 0 4px 0" }, children: action.name }),
-              action.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { fontSize: "14px", color: "#4b5563", margin: "0 0 12px 0" }, children: action.description }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "h3",
+                {
+                  style: {
+                    fontWeight: "600",
+                    color: "#1f2937",
+                    margin: "0 0 4px 0"
+                  },
+                  children: action.name
+                }
+              ),
+              action.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "p",
+                {
+                  style: {
+                    fontSize: "14px",
+                    color: "#4b5563",
+                    margin: "0 0 12px 0"
+                  },
+                  children: action.description
+                }
+              ),
               action.parameters && action.parameters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "12px" }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "p",
@@ -702,15 +777,56 @@ function ActionsTab({ context }) {
                     children: "Parameters:"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: action.parameters.map((param, pIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: "14px" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontFamily: "monospace", color: "#374151" }, children: param.name }),
-                  param.required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { marginLeft: "4px", fontSize: "12px", color: "#ef4444" }, children: "*required" }),
-                  param.type && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { marginLeft: "8px", fontSize: "12px", color: "#6b7280" }, children: [
-                    "(",
-                    param.type,
-                    ")"
-                  ] })
-                ] }, pIndex)) })
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "4px"
+                    },
+                    children: action.parameters.map(
+                      (param, pIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: "14px" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: "monospace",
+                              color: "#374151"
+                            },
+                            children: param.name
+                          }
+                        ),
+                        param.required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "span",
+                          {
+                            style: {
+                              marginLeft: "4px",
+                              fontSize: "12px",
+                              color: "#ef4444"
+                            },
+                            children: "*required"
+                          }
+                        ),
+                        param.type && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                          "span",
+                          {
+                            style: {
+                              marginLeft: "8px",
+                              fontSize: "12px",
+                              color: "#6b7280"
+                            },
+                            children: [
+                              "(",
+                              param.type,
+                              ")"
+                            ]
+                          }
+                        )
+                      ] }, pIndex)
+                    )
+                  }
+                )
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginLeft: "16px" }, children: action.status === "available" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExclamationMarkTriangleIcon, {}) })
@@ -742,10 +858,34 @@ function ReadablesTab({ context }) {
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "div",
         {
-          style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" },
+          style: {
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between"
+          },
           children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { fontWeight: "600", color: "#1f2937", margin: "0 0 4px 0" }, children: readable.name || `Readable ${index + 1}` }),
-            readable.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { fontSize: "14px", color: "#4b5563", margin: "0 0 12px 0" }, children: readable.description }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "h3",
+              {
+                style: {
+                  fontWeight: "600",
+                  color: "#1f2937",
+                  margin: "0 0 4px 0"
+                },
+                children: readable.name || `Readable ${index + 1}`
+              }
+            ),
+            readable.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "p",
+              {
+                style: {
+                  fontSize: "14px",
+                  color: "#4b5563",
+                  margin: "0 0 12px 0"
+                },
+                children: readable.description
+              }
+            ),
             readable.value && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "pre",
               {
@@ -798,7 +938,18 @@ function AgentStatusTab({ context }) {
               marginBottom: "16px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { fontWeight: "600", fontSize: "18px", color: "#1f2937", margin: 0 }, children: agentName }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "h3",
+                {
+                  style: {
+                    fontWeight: "600",
+                    fontSize: "18px",
+                    color: "#1f2937",
+                    margin: 0
+                  },
+                  children: agentName
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "span",
                 {
@@ -889,7 +1040,9 @@ function AgentStatusTab({ context }) {
     agentName
   )) });
 }
-function MessagesTab({ messagesContext }) {
+function MessagesTab({
+  messagesContext
+}) {
   const messages = messagesContext.messages || [];
   if (messages.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "center", padding: "48px 0", color: "#6b7280" }, children: [
@@ -935,7 +1088,17 @@ function MessagesTab({ messagesContext }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "14px", color: "#1f2937", whiteSpace: "pre-wrap" }, children: message.content || "" })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              fontSize: "14px",
+              color: "#1f2937",
+              whiteSpace: "pre-wrap"
+            },
+            children: message.content || ""
+          }
+        )
       ]
     },
     index
@@ -960,7 +1123,13 @@ function ContextTab({ context }) {
         border: "1px solid #e5e7eb"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { fontWeight: "600", color: "#1f2937", margin: "0 0 8px 0" }, children: doc.name || `Document ${index + 1}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "h3",
+          {
+            style: { fontWeight: "600", color: "#1f2937", margin: "0 0 8px 0" },
+            children: doc.name || `Document ${index + 1}`
+          }
+        ),
         doc.content && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "pre",
           {