pxengine 0.1.40 → 0.1.42

package/dist/index.mjs

@@ -33309,9 +33309,14 @@ __export(molecules_exports, {
   CountrySelectDisplay: () => CountrySelectDisplay,
   CountrySelectEdit: () => CountrySelectEdit,
   CreatorActionHeader: () => CreatorActionHeader,
+  CreatorCompactView: () => CreatorCompactView,
   CreatorGridCard: () => CreatorGridCard,
+  CreatorImageList: () => CreatorImageList,
   CreatorProfileSummary: () => CreatorProfileSummary,
+  CreatorProgressBar: () => CreatorProgressBar,
   CreatorSearch: () => CreatorSearch,
+  CreatorWidget: () => CreatorWidget,
+  CreatorWidgetSkeleton: () => CreatorWidgetSkeleton,
   DataGrid: () => DataGrid,
   EditableField: () => EditableField,
   EmptyState: () => EmptyState,
@@ -33339,7 +33344,8 @@ __export(molecules_exports, {
   ToolListCard: () => ToolListCard,
   TopPostsGrid: () => TopPostsGrid,
   UIComponentSelector: () => UIComponentSelector,
-  WorkflowVisualizer: () => WorkflowVisualizer
+  WorkflowVisualizer: () => WorkflowVisualizer,
+  useCreatorWidgetPolling: () => useCreatorWidgetPolling
 });
 
 // src/molecules/generic/EditableField/EditableField.tsx
@@ -36349,7 +36355,8 @@ var CampaignConceptCard = React94.memo(
             ...field,
             label: "Budget Allocation",
             renderDisplay: (val) => {
-              if (!val) return /* @__PURE__ */ jsx121("span", { className: "text-muted-foreground text-sm", children: "-" });
+              if (!val)
+                return /* @__PURE__ */ jsx121("span", { className: "text-muted-foreground text-sm", children: "-" });
               if (Array.isArray(val)) {
                 return /* @__PURE__ */ jsx121("div", { className: "space-y-2", children: val.map((item, idx) => {
                   const label = item?.label ?? item?.key ?? `Item ${idx + 1}`;
@@ -36367,7 +36374,8 @@ var CampaignConceptCard = React94.memo(
               }
               if (typeof val === "object") {
                 const entries = Object.entries(val);
-                if (entries.length === 0) return /* @__PURE__ */ jsx121("span", { className: "text-muted-foreground text-sm", children: "-" });
+                if (entries.length === 0)
+                  return /* @__PURE__ */ jsx121("span", { className: "text-muted-foreground text-sm", children: "-" });
                 return /* @__PURE__ */ jsx121("div", { className: "space-y-2", children: entries.map(([k, v], idx) => /* @__PURE__ */ jsxs80("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxs80("span", { className: "text-muted-foreground font-medium", children: [
                     idx + 1,
@@ -36414,7 +36422,8 @@ var CampaignConceptCard = React94.memo(
             ...field,
             label: "Estimated Creators",
             renderDisplay: (val) => {
-              if (!val) return /* @__PURE__ */ jsx121("span", { className: "text-muted-foreground text-sm", children: "-" });
+              if (!val)
+                return /* @__PURE__ */ jsx121("span", { className: "text-muted-foreground text-sm", children: "-" });
               const displayValue = typeof val === "object" && !Array.isArray(val) ? `${val.min ?? 0}-${val.max ?? 0}` : String(val);
               return /* @__PURE__ */ jsx121("span", { className: "text-foreground text-sm", children: displayValue });
             },
@@ -36479,13 +36488,7 @@ var CampaignConceptCard = React94.memo(
           return {
             ...field,
             renderDisplay: (v) => /* @__PURE__ */ jsx121(PlatformSelectDisplay, { value: v }),
-            renderEdit: (v, onChange) => /* @__PURE__ */ jsx121(
-              PlatformSelectEdit,
-              {
-                value: v,
-                onChange
-              }
-            )
+            renderEdit: (v, onChange) => /* @__PURE__ */ jsx121(PlatformSelectEdit, { value: v, onChange })
           };
         }
         if (field.key === "description" || field.key === "creator_strategy" || field.key === "creatorStrategy") {
@@ -36499,7 +36502,8 @@ var CampaignConceptCard = React94.memo(
           ...field,
           renderDisplay: (val) => {
             if (Array.isArray(val)) {
-              if (val.length === 0) return /* @__PURE__ */ jsx121("span", { className: "text-muted-foreground text-sm", children: "-" });
+              if (val.length === 0)
+                return /* @__PURE__ */ jsx121("span", { className: "text-muted-foreground text-sm", children: "-" });
               return /* @__PURE__ */ jsx121("div", { className: "flex flex-wrap gap-2 pt-1", children: val.map((item, idx) => {
                 const label = typeof item === "object" && item !== null ? item.label || item.value || item.name || JSON.stringify(item) : String(item);
                 return /* @__PURE__ */ jsx121(
@@ -36524,7 +36528,7 @@ var CampaignConceptCard = React94.memo(
       "div",
       {
         className: cn(
-          "w-full max-w-[600px] rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
+          "w-full rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
           isSelected || isRecommended ? "border-2 border-green500" : "border-gray400",
           className
         ),
@@ -36539,7 +36543,8 @@ var CampaignConceptCard = React94.memo(
                   /* @__PURE__ */ jsxs80("h3", { className: "mb-1 py-1 text-txtColor font-bold text-lg", children: [
                     "Concept ",
                     index !== void 0 ? index : "",
-                    " : ",
+                    " :",
+                    " ",
                     typeof cardTitle === "object" ? JSON.stringify(cardTitle) : String(cardTitle)
                   ] }),
                   /* @__PURE__ */ jsxs80("div", { className: "flex flex-wrap gap-2", children: [
@@ -36547,25 +36552,32 @@ var CampaignConceptCard = React94.memo(
                     !effectiveIsLatest && selectionStatus && /* @__PURE__ */ jsx121("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest text-[#3B82F6]", children: /* @__PURE__ */ jsx121("span", { className: "bg-[#3B82F6]/10 px-2 py-0.5 rounded border border-[#3B82F6]/20", children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by You" }) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx121("div", { className: "flex items-center gap-2 ml-3", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx121(
-                  "button",
+                /* @__PURE__ */ jsx121(
+                  "div",
                   {
-                    onClick: (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleToggle();
-                    },
-                    className: "p-2 bg-background hover:bg-gray200 dark:hover:bg-gray200 text-foreground rounded-lg shadow-lg",
-                    "aria-label": isOpen ? "Collapse" : "Expand",
-                    title: isOpen ? "Collapse" : "Expand",
+                    className: "flex items-center gap-2 ml-3",
+                    onClick: (e) => e.stopPropagation(),
                     children: /* @__PURE__ */ jsx121(
-                      ChevronDown,
+                      "button",
                       {
-                        className: `h-4 w-4 transition-transform ${isOpen ? "rotate-0" : "-rotate-90"}`
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleToggle();
+                        },
+                        className: "p-2 bg-background hover:bg-gray200 dark:hover:bg-gray200 text-foreground rounded-lg shadow-lg",
+                        "aria-label": isOpen ? "Collapse" : "Expand",
+                        title: isOpen ? "Collapse" : "Expand",
+                        children: /* @__PURE__ */ jsx121(
+                          ChevronDown,
+                          {
+                            className: `h-4 w-4 transition-transform ${isOpen ? "rotate-0" : "-rotate-90"}`
+                          }
+                        )
                       }
                     )
                   }
-                ) })
+                )
               ]
             }
           ),
@@ -36577,7 +36589,7 @@ var CampaignConceptCard = React94.memo(
               exit: { height: 0, opacity: 0 },
               transition: { duration: 0.2, ease: "easeIn" },
               className: "overflow-hidden",
-              children: /* @__PURE__ */ jsxs80("div", { className: "px-4 py-3 w-full overflow-y-auto max-h-[400px] relative", children: [
+              children: /* @__PURE__ */ jsxs80("div", { className: "px-4 py-3 w-full relative", children: [
                 /* @__PURE__ */ jsx121(
                   "div",
                   {
@@ -36618,8 +36630,506 @@ var CampaignConceptCard = React94.memo(
 );
 CampaignConceptCard.displayName = "CampaignConceptCard";
 
+// src/molecules/creator-discovery/CreatorWidget/CreatorWidget.tsx
+import { useCallback as useCallback5, memo } from "react";
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorImageList.tsx
+import { useEffect as useEffect7, useState as useState10 } from "react";
+import { Fragment as Fragment4, jsx as jsx122, jsxs as jsxs81 } from "react/jsx-runtime";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState10(false);
+  useEffect7(() => {
+    const media = window.matchMedia(query);
+    const listener = () => setMatches(media.matches);
+    listener();
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+}
+function CreatorImage({
+  img,
+  idx,
+  creatorsPercentage,
+  totalCreators
+}) {
+  const processedCount = Math.floor(creatorsPercentage / 100 * totalCreators);
+  const isProcessed = idx < processedCount;
+  const isCurrentlyProcessing = idx === processedCount;
+  return /* @__PURE__ */ jsxs81("div", { className: "relative w-8 h-8", children: [
+    /* @__PURE__ */ jsx122(
+      "img",
+      {
+        src: img,
+        alt: `Creator ${idx + 1}`,
+        className: `w-8 h-8 rounded-full border-2 ${isProcessed ? "border-green-600" : "border-foreground"} object-cover transition-all duration-300`
+      }
+    ),
+    !isProcessed && /* @__PURE__ */ jsx122("div", { className: "absolute inset-0 bg-black/50 rounded-full pointer-events-none" }),
+    isCurrentlyProcessing && /* @__PURE__ */ jsxs81(Fragment4, { children: [
+      /* @__PURE__ */ jsx122(
+        "div",
+        {
+          className: "absolute inset-0 bg-black/50 rounded-full pointer-events-none",
+          style: {
+            background: `conic-gradient(
+                from 0deg,
+                #FFFFFF80 0deg,
+                #FFFFFF80 60deg,
+                #000000bf 60deg,
+                #000000bf 360deg
+              )`,
+            opacity: 0.9
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx122("div", { className: "absolute inset-0 rounded-full border-2 border-[#9CA3AF]/30 pointer-events-none" })
+    ] })
+  ] });
+}
+function CreatorImageList({
+  creatorImages = [],
+  creatorLength = 0,
+  isAgentOutput,
+  initialCreatorsPercentage
+}) {
+  const isMobile = useMediaQuery("(max-width: 640px)");
+  const isTablet = useMediaQuery("(min-width: 641px) and (max-width: 1024px)");
+  const visibleCount = isMobile ? 7 : isTablet ? 10 : isAgentOutput ? 6 : 15;
+  return /* @__PURE__ */ jsxs81("div", { className: "flex flex-nowrap sm:flex-wrap -space-x-2 w-fit", children: [
+    creatorImages.slice(0, visibleCount).map((img, idx) => /* @__PURE__ */ jsx122(
+      CreatorImage,
+      {
+        img,
+        idx,
+        creatorsPercentage: initialCreatorsPercentage || 0,
+        totalCreators: creatorLength
+      },
+      idx
+    )),
+    creatorLength > visibleCount && /* @__PURE__ */ jsxs81(
+      "div",
+      {
+        className: `relative w-8 h-8 rounded-full text-white flex items-center justify-center text-sm font-medium border-2 ${initialCreatorsPercentage === 100 ? "border-green-600 bg-sliderFill" : "border-foreground bg-black/50"}`,
+        children: [
+          "+",
+          creatorLength - visibleCount
+        ]
+      }
+    )
+  ] });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorProgressBar.tsx
+import { useEffect as useEffect8, useState as useState11 } from "react";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "framer-motion";
+import { jsx as jsx123, jsxs as jsxs82 } from "react/jsx-runtime";
+function truncateName(name, maxLength) {
+  if (!name || name.length <= maxLength) return name || "";
+  return name.substring(0, maxLength) + "...";
+}
+function ProgressBar({ overallPercentage }) {
+  const [showTooltip, setShowTooltip] = useState11(true);
+  useEffect8(() => {
+    if (overallPercentage && overallPercentage >= 100) {
+      setShowTooltip(false);
+    }
+  }, [overallPercentage]);
+  return /* @__PURE__ */ jsx123("div", { className: "relative w-full", children: /* @__PURE__ */ jsx123("div", { className: "md:w-full dark:bg-purple500 bg-gray-200 rounded-full h-[6px]", children: /* @__PURE__ */ jsx123(
+    motion2.div,
+    {
+      className: "bg-purple100 h-[6px] rounded-full relative",
+      initial: { width: 0 },
+      animate: { width: `${overallPercentage}%` },
+      transition: { duration: 0.5, ease: "easeOut" },
+      children: /* @__PURE__ */ jsx123(AnimatePresence2, { children: showTooltip && /* @__PURE__ */ jsxs82(
+        motion2.div,
+        {
+          initial: { opacity: 0, y: 5 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: 5 },
+          className: "absolute -top-10 right-[-25px] bg-gray50 text-gray900 text-lg px-1 rounded-[6px] shadow-lg whitespace-nowrap border-2 border-gray300",
+          children: [
+            overallPercentage ? Math.round(overallPercentage) : 0,
+            "%",
+            /* @__PURE__ */ jsxs82("div", { className: "absolute left-1/2 top-full -translate-x-1/2", children: [
+              /* @__PURE__ */ jsx123("div", { className: "w-0 h-0 border-l-[6px] border-r-[6px] border-t-[6px] border-transparent border-t-gray300" }),
+              /* @__PURE__ */ jsx123("div", { className: "absolute left-1/2 top-[-1px] -translate-x-1/2 w-0 h-0 border-l-[5px] border-r-[5px] border-t-[5px] border-transparent border-t-gray50" })
+            ] })
+          ]
+        }
+      ) })
+    }
+  ) }) });
+}
+function CreatorProgressBar({
+  statusDetails,
+  timeRemaining: _timeRemaining
+}) {
+  return /* @__PURE__ */ jsxs82("div", { children: [
+    /* @__PURE__ */ jsx123(ProgressBar, { overallPercentage: statusDetails?.overall_percentage }),
+    /* @__PURE__ */ jsx123("div", { className: "dark:text-gray400 text-gray-500 text-xs mt-2", children: (statusDetails?.overall_percentage ?? 0) < 100 && /* @__PURE__ */ jsx123("span", { children: statusDetails?.thinking_message ? truncateName(statusDetails.thinking_message, 200) : "Processing..." }) })
+  ] });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorWidgetSkeleton.tsx
+import { jsx as jsx124, jsxs as jsxs83 } from "react/jsx-runtime";
+function CreatorWidgetSkeleton() {
+  return /* @__PURE__ */ jsx124("div", { className: "bg-background dark:bg-gray50 rounded-[25px] border border-gray300 overflow-hidden shadow-sm w-full relative", children: /* @__PURE__ */ jsxs83("div", { className: "p-4 md:p-6 space-y-4", children: [
+    /* @__PURE__ */ jsx124("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4 relative", children: /* @__PURE__ */ jsxs83("div", { className: "flex flex-col gap-2 md:gap-4", children: [
+      /* @__PURE__ */ jsx124("div", { className: "w-40 h-6 bg-purple200 rounded-md animate-pulse" }),
+      /* @__PURE__ */ jsx124("div", { className: "w-64 h-7 bg-gray200 dark:bg-gray300 rounded animate-pulse" })
+    ] }) }),
+    /* @__PURE__ */ jsxs83("div", { className: "bg-paperBackground rounded-lg px-3 md:px-4 py-4 md:py-5 flex flex-col md:flex-row md:items-center md:justify-between gap-4 md:gap-0", children: [
+      /* @__PURE__ */ jsxs83("div", { className: "flex flex-col gap-4 md:gap-6 min-w-0", children: [
+        /* @__PURE__ */ jsx124("div", { className: "flex -space-x-2", children: Array.from({ length: 10 }).map((_, idx) => /* @__PURE__ */ jsx124(
+          "div",
+          {
+            className: "w-8 h-8 md:w-10 md:h-10 rounded-full border-2 border-gray300 bg-gray200 animate-pulse"
+          },
+          idx
+        )) }),
+        /* @__PURE__ */ jsx124("div", { className: "space-y-2", children: /* @__PURE__ */ jsx124("div", { className: "w-full max-w-xs bg-gray200 rounded-full h-2 animate-pulse" }) })
+      ] }),
+      /* @__PURE__ */ jsx124("div", { className: "px-6 py-2 bg-gray200 rounded-[30px] animate-pulse h-10 w-48" })
+    ] })
+  ] }) });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorCompactView.tsx
+import { Fragment as Fragment5, jsx as jsx125, jsxs as jsxs84 } from "react/jsx-runtime";
+function CreatorCompactView({
+  versions,
+  selectedVersion,
+  creatorImages,
+  creatorLength,
+  isAgentOutput,
+  onVersionSelect,
+  onViewCreators,
+  versionStatus,
+  statusDetails,
+  timeDisplay,
+  isLoading
+}) {
+  const isComplete = versionStatus === "completed" || versionStatus === "complete";
+  const statusTitle = isComplete ? "Creator Search Complete" : versionStatus === "failed" ? "Creator Search Failed" : "Creator Search Processing";
+  if (isLoading) {
+    return /* @__PURE__ */ jsx125(CreatorWidgetSkeleton, {});
+  }
+  return /* @__PURE__ */ jsx125("div", { className: "bg-background dark:bg-gray100 rounded-[25px] border border-gray300 overflow-hidden shadow-sm w-full relative", children: /* @__PURE__ */ jsxs84("div", { className: "p-4 md:p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs84("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4 relative", children: [
+      /* @__PURE__ */ jsxs84("div", { className: "flex flex-col gap-2 md:gap-4", children: [
+        /* @__PURE__ */ jsx125("h4", { className: "w-fit rounded-md bg-purple200 px-2 py-[4px] text-xs font-medium text-purpleText", children: "VERIFIED CREATORS LIST" }),
+        /* @__PURE__ */ jsx125("h3", { className: "text-gray900 md:text-lg font-bold", children: statusTitle })
+      ] }),
+      versions.length > 1 && /* @__PURE__ */ jsx125("div", { className: "relative md:self-start", children: /* @__PURE__ */ jsxs84(DropdownMenu, { children: [
+        /* @__PURE__ */ jsxs84(
+          DropdownMenuTrigger,
+          {
+            disabled: !isComplete,
+            className: `flex items-center gap-2 border-2 border-gray400 px-3 md:px-4 py-1 rounded-full text-xs md:text-sm outline-none ${!isComplete ? "bg-gray100 text-gray400 cursor-not-allowed opacity-60" : "text-gray600 hover:bg-purple100/20 cursor-pointer"}`,
+            children: [
+              "Version ",
+              selectedVersion ?? "-",
+              /* @__PURE__ */ jsx125(ChevronDown, { className: "w-3 h-3 md:w-4 md:h-4 transition-transform" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx125(DropdownMenuContent, { className: "bg-gray25 border-2 border-gray400 min-w-[120px] max-h-[150px] overflow-y-auto", children: versions.map((v) => /* @__PURE__ */ jsxs84(
+          DropdownMenuItem,
+          {
+            onClick: () => onVersionSelect(v),
+            className: "cursor-pointer text-sm",
+            children: [
+              "Version ",
+              v
+            ]
+          },
+          v
+        )) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx125("div", { className: "bg-paperBackground rounded-lg px-3 md:px-4 py-4 md:py-5 flex flex-col md:flex-row md:items-center md:justify-between gap-4 md:gap-0", children: versionStatus === "failed" ? /* @__PURE__ */ jsxs84("div", { className: "flex flex-col items-center justify-center w-full py-6 md:py-8 text-center text-red-500", children: [
+      /* @__PURE__ */ jsx125("p", { className: "text-base md:text-lg font-semibold mb-2", children: "Creator Search Failed" }),
+      /* @__PURE__ */ jsx125("p", { className: "text-xs md:text-sm text-gray600 px-2", children: "Something went wrong while fetching creators. Please try again later or regenerate a new version." })
+    ] }) : /* @__PURE__ */ jsxs84(Fragment5, { children: [
+      /* @__PURE__ */ jsxs84("div", { className: "flex flex-col gap-4 md:gap-6 min-w-0", children: [
+        /* @__PURE__ */ jsx125(
+          CreatorImageList,
+          {
+            creatorImages,
+            creatorLength,
+            isAgentOutput,
+            initialCreatorsPercentage: statusDetails?.social_fetch_percentage
+          }
+        ),
+        /* @__PURE__ */ jsx125(
+          CreatorProgressBar,
+          {
+            statusDetails,
+            timeRemaining: timeDisplay
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs84(
+        "button",
+        {
+          className: `px-4 py-2 text-xs md:text-sm rounded-[30px] shadow flex items-center justify-center gap-2 w-full md:w-auto md:flex-shrink-0 whitespace-nowrap ${!isComplete ? "bg-gray300 text-gray500 border-2 border-gray300 cursor-not-allowed" : "bg-purpleLight dark:bg-purple200 text-purpleText2 dark:text-purpleText border-2 border-purple100 cursor-pointer hover:bg-purpleText1 dark:hover:bg-purple100 dark:hover:text-background"}`,
+          onClick: onViewCreators,
+          disabled: !isComplete,
+          children: [
+            "View ",
+            creatorLength,
+            " Verified Creators",
+            /* @__PURE__ */ jsx125(Triangle, { className: "w-3 h-3 md:w-4 md:h-4 rotate-90 font-bold" })
+          ]
+        }
+      )
+    ] }) })
+  ] }) });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/useCreatorWidgetPolling.ts
+import { useState as useState12, useEffect as useEffect9, useCallback as useCallback4, useMemo as useMemo9, useRef as useRef6 } from "react";
+var DEFAULT_POLLING_CONFIG = {
+  pollInterval: 5e3,
+  maxDuration: 15 * 60 * 1e3,
+  maxErrors: 10,
+  secondsPerCreator: 13
+};
+function useCreatorWidgetPolling({
+  sessionId,
+  currentVersion,
+  fetchVersions,
+  fetchStatus,
+  pollingConfig,
+  onStatusChange
+}) {
+  const config = useMemo9(
+    () => ({ ...DEFAULT_POLLING_CONFIG, ...pollingConfig }),
+    [pollingConfig]
+  );
+  const [versionData, setVersionData] = useState12(null);
+  const [totalVersions, setTotalVersions] = useState12(0);
+  const [selectedVersion, setSelectedVersion] = useState12();
+  const [isLoadingVersion, setIsLoadingVersion] = useState12(false);
+  const [isValidationComplete, setIsValidationComplete] = useState12(false);
+  const [versionStatus, setVersionStatus] = useState12("checking");
+  const [statusDetails, setStatusDetails] = useState12();
+  const [timeDisplay, setTimeDisplay] = useState12("");
+  const [loadingStatus, setLoadingStatus] = useState12(true);
+  const remainingTimeRef = useRef6(0);
+  const requestedVersion = selectedVersion ?? currentVersion ?? versionData?.currentVersion;
+  const fetchVersionData = useCallback4(async () => {
+    if (!sessionId) return;
+    if (!versionData) setIsLoadingVersion(true);
+    try {
+      const data = await fetchVersions({
+        sessionId,
+        version: requestedVersion,
+        validated: isValidationComplete
+      });
+      if (data.success !== false) {
+        setVersionData(data);
+        setTotalVersions(data.totalVersions || 0);
+      }
+    } catch (err) {
+      if (err.name !== "AbortError") {
+        console.error("Error fetching creator version:", err);
+      }
+    } finally {
+      setIsLoadingVersion(false);
+    }
+  }, [sessionId, requestedVersion, isValidationComplete, fetchVersions, versionData]);
+  useEffect9(() => {
+    fetchVersionData();
+  }, [sessionId, requestedVersion, isValidationComplete]);
+  useEffect9(() => {
+    if (totalVersions > 0 || !sessionId) return;
+    const interval = setInterval(() => {
+      if (totalVersions === 0) fetchVersionData();
+    }, config.pollInterval);
+    return () => clearInterval(interval);
+  }, [totalVersions, sessionId, fetchVersionData, config.pollInterval]);
+  useEffect9(() => {
+    if (!selectedVersion && !requestedVersion) return;
+    const activeVersion = selectedVersion ?? requestedVersion;
+    let isMounted = true;
+    let intervalId = null;
+    let timerIntervalId = null;
+    let elapsed = 0;
+    let errorCount = 0;
+    setLoadingStatus(true);
+    setStatusDetails(void 0);
+    setVersionStatus("checking");
+    const creatorLength2 = versionData?.length || 0;
+    remainingTimeRef.current = creatorLength2 > 0 ? creatorLength2 * config.secondsPerCreator : 60;
+    const formatTime = (seconds) => {
+      if (seconds <= 0) return "to complete";
+      const minutes = Math.floor(seconds / 60);
+      return minutes >= 1 ? `${minutes} min remaining...` : `${seconds} sec remaining...`;
+    };
+    setTimeDisplay(formatTime(remainingTimeRef.current));
+    timerIntervalId = setInterval(() => {
+      if (remainingTimeRef.current > 0) remainingTimeRef.current -= 1;
+      setTimeDisplay(formatTime(remainingTimeRef.current));
+    }, 1e3);
+    const updateStatus = (status) => {
+      setVersionStatus(status);
+      onStatusChange?.(status);
+    };
+    const stopPolling = () => {
+      if (intervalId) clearInterval(intervalId);
+      if (timerIntervalId) clearInterval(timerIntervalId);
+      setTimeDisplay("");
+    };
+    const pollStatus = async () => {
+      try {
+        const data = await fetchStatus({
+          sessionId,
+          versionNo: activeVersion
+        });
+        if (!isMounted) return;
+        if (data?.status) setStatusDetails(data.status);
+        const s = data?.status?.status;
+        if (s === "completed" || s === "complete") {
+          updateStatus(s);
+          setIsValidationComplete(true);
+          stopPolling();
+          return;
+        }
+        if (s === "failed") {
+          updateStatus("failed");
+          stopPolling();
+          return;
+        }
+        errorCount = 0;
+        updateStatus(s || "in-progress");
+      } catch (err) {
+        console.error("Error fetching status:", err);
+        errorCount++;
+        if (errorCount >= config.maxErrors) {
+          console.error(`Polling failed after ${config.maxErrors} consecutive errors`);
+          updateStatus("failed");
+          setLoadingStatus(false);
+          stopPolling();
+          return;
+        }
+      } finally {
+        setLoadingStatus(false);
+      }
+    };
+    pollStatus();
+    intervalId = setInterval(() => {
+      elapsed += config.pollInterval;
+      if (elapsed >= config.maxDuration) {
+        console.warn("Stopped polling after max duration");
+        stopPolling();
+      } else {
+        pollStatus();
+      }
+    }, config.pollInterval);
+    return () => {
+      isMounted = false;
+      stopPolling();
+    };
+  }, [selectedVersion, requestedVersion, sessionId]);
+  const versionNumbers = useMemo9(() => {
+    if (!totalVersions) return [];
+    return Array.from({ length: totalVersions }, (_, i) => i + 1);
+  }, [totalVersions]);
+  const creatorIds = versionData?.ids || [];
+  const creatorImages = versionData?.images || [];
+  const creatorLength = versionData?.length || 0;
+  const searchSpec = versionData?.searchSpec || {};
+  const displayVersion = versionData?.currentVersion ?? requestedVersion;
+  return {
+    versionData,
+    versionNumbers,
+    selectedVersion: displayVersion,
+    setSelectedVersion,
+    creatorImages,
+    creatorLength,
+    creatorIds,
+    searchSpec,
+    versionStatus,
+    statusDetails,
+    timeDisplay,
+    isLoading: loadingStatus || isLoadingVersion,
+    isValidationComplete
+  };
+}
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorWidget.tsx
+import { jsx as jsx126 } from "react/jsx-runtime";
+function CreatorWidgetInner({
+  sessionId,
+  currentVersion,
+  isAgentOutput = false,
+  fetchVersions,
+  fetchStatus,
+  pollingConfig,
+  onStatusChange,
+  onAction,
+  className
+}) {
+  const {
+    versionNumbers,
+    selectedVersion,
+    setSelectedVersion,
+    creatorImages,
+    creatorLength,
+    creatorIds,
+    searchSpec,
+    versionStatus,
+    statusDetails,
+    timeDisplay,
+    isLoading
+  } = useCreatorWidgetPolling({
+    sessionId,
+    currentVersion,
+    fetchVersions,
+    fetchStatus,
+    pollingConfig,
+    onStatusChange
+  });
+  const handleVersionSelect = useCallback5(
+    (version) => setSelectedVersion(version),
+    [setSelectedVersion]
+  );
+  const handleViewCreators = useCallback5(() => {
+    onAction?.({
+      type: "view-creators",
+      sessionId,
+      creatorIds,
+      version: selectedVersion,
+      searchSpec
+    });
+  }, [onAction, sessionId, creatorIds, selectedVersion, searchSpec]);
+  if (!fetchVersions || !fetchStatus) {
+    return /* @__PURE__ */ jsx126(CreatorWidgetSkeleton, {});
+  }
+  return /* @__PURE__ */ jsx126("div", { className, children: /* @__PURE__ */ jsx126(
+    CreatorCompactView,
+    {
+      versions: versionNumbers,
+      selectedVersion,
+      creatorImages,
+      creatorLength,
+      isAgentOutput,
+      onVersionSelect: handleVersionSelect,
+      onViewCreators: handleViewCreators,
+      versionStatus,
+      statusDetails,
+      timeDisplay,
+      isLoading
+    }
+  ) });
+}
+var CreatorWidget = memo(CreatorWidgetInner);
+
 // src/molecules/agent-builder/ToolListCard/ToolListCard.tsx
-import { jsx as jsx122, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs85 } from "react/jsx-runtime";
 var ICON_MAP = {
   Search,
   Database,
@@ -36676,7 +37186,7 @@ var ToolListCard = ({
     grouped[cat].push(tool);
   }
   const categories = Object.keys(grouped);
-  return /* @__PURE__ */ jsxs81(
+  return /* @__PURE__ */ jsxs85(
     "div",
     {
       className: cn(
@@ -36684,33 +37194,33 @@ var ToolListCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs81("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
-          /* @__PURE__ */ jsx122("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx122(Wrench, { className: "w-3.5 h-3.5 text-interactive" }) }),
-          /* @__PURE__ */ jsx122("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
-          /* @__PURE__ */ jsx122("span", { className: "ml-auto text-[11px] font-medium text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.06] px-2 py-0.5 rounded-full", children: tools.length })
+        /* @__PURE__ */ jsxs85("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx127("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx127(Wrench, { className: "w-3.5 h-3.5 text-interactive" }) }),
+          /* @__PURE__ */ jsx127("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
+          /* @__PURE__ */ jsx127("span", { className: "ml-auto text-[11px] font-medium text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.06] px-2 py-0.5 rounded-full", children: tools.length })
         ] }),
-        /* @__PURE__ */ jsx122("div", { className: "divide-y divide-[var(--border-color)]", children: categories.map((cat) => {
+        /* @__PURE__ */ jsx127("div", { className: "divide-y divide-[var(--border-color)]", children: categories.map((cat) => {
           const CatIcon = resolveCategoryIcon(cat);
-          return /* @__PURE__ */ jsxs81("div", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ jsxs81("div", { className: "flex items-center gap-2 mb-2.5", children: [
-              /* @__PURE__ */ jsx122(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
-              /* @__PURE__ */ jsx122("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
-              /* @__PURE__ */ jsx122("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
+          return /* @__PURE__ */ jsxs85("div", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ jsxs85("div", { className: "flex items-center gap-2 mb-2.5", children: [
+              /* @__PURE__ */ jsx127(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
+              /* @__PURE__ */ jsx127("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
+              /* @__PURE__ */ jsx127("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
             ] }),
-            /* @__PURE__ */ jsx122("div", { className: "space-y-1.5", children: grouped[cat].map((tool) => {
+            /* @__PURE__ */ jsx127("div", { className: "space-y-1.5", children: grouped[cat].map((tool) => {
               const ToolIcon = resolveIcon(tool);
-              return /* @__PURE__ */ jsxs81(
+              return /* @__PURE__ */ jsxs85(
                 "div",
                 {
                   className: "group flex items-start gap-3 px-3 py-2 rounded-lg hover:bg-[var(--foreground)]/[0.03] transition-colors",
                   children: [
-                    /* @__PURE__ */ jsx122("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-interactive/[0.08]", children: /* @__PURE__ */ jsx122(ToolIcon, { className: "w-3 h-3 text-interactive/60" }) }),
-                    /* @__PURE__ */ jsxs81("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ jsxs81("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                        tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ jsx122("span", { className: "text-[13px] font-medium text-[var(--foreground)] truncate max-w-full", children: tool.display_name }),
-                        /* @__PURE__ */ jsx122("span", { className: "text-[11px] font-mono px-1.5 py-0.5 rounded bg-[var(--foreground)]/[0.06] text-[var(--foreground)]/50 border border-[var(--foreground)]/[0.06] truncate", children: tool.name })
+                    /* @__PURE__ */ jsx127("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-interactive/[0.08]", children: /* @__PURE__ */ jsx127(ToolIcon, { className: "w-3 h-3 text-interactive/60" }) }),
+                    /* @__PURE__ */ jsxs85("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsxs85("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                        tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ jsx127("span", { className: "text-[13px] font-medium text-[var(--foreground)] truncate max-w-full", children: tool.display_name }),
+                        /* @__PURE__ */ jsx127("span", { className: "text-[11px] font-mono px-1.5 py-0.5 rounded bg-[var(--foreground)]/[0.06] text-[var(--foreground)]/50 border border-[var(--foreground)]/[0.06] truncate", children: tool.name })
                       ] }),
-                      tool.description && /* @__PURE__ */ jsx122("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5 break-words whitespace-normal", children: tool.description })
+                      tool.description && /* @__PURE__ */ jsx127("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5 break-words whitespace-normal", children: tool.description })
                     ] })
                   ]
                 },
@@ -36725,8 +37235,8 @@ var ToolListCard = ({
 };
 
 // src/molecules/agent-builder/AgentCard/AgentCard.tsx
-import { useState as useState10, useCallback as useCallback4 } from "react";
-import { Fragment as Fragment4, jsx as jsx123, jsxs as jsxs82 } from "react/jsx-runtime";
+import { useState as useState13, useCallback as useCallback6 } from "react";
+import { Fragment as Fragment6, jsx as jsx128, jsxs as jsxs86 } from "react/jsx-runtime";
 var AgentCard = ({
   agent,
   editable = true,
@@ -36734,15 +37244,15 @@ var AgentCard = ({
   onSave,
   className
 }) => {
-  const [isEditing, setIsEditing] = useState10(false);
-  const [isSaving, setIsSaving] = useState10(false);
-  const [editState, setEditState] = useState10({
+  const [isEditing, setIsEditing] = useState13(false);
+  const [isSaving, setIsSaving] = useState13(false);
+  const [editState, setEditState] = useState13({
     display_name: agent.display_name,
     description: agent.description,
     image: agent.image || ""
   });
   const avatarUrl = agent.image || `https://api.dicebear.com/7.x/avataaars/svg?seed=${agent.name}`;
-  const handleEdit = useCallback4(() => {
+  const handleEdit = useCallback6(() => {
     setEditState({
       display_name: agent.display_name,
       description: agent.description,
@@ -36750,10 +37260,10 @@ var AgentCard = ({
     });
     setIsEditing(true);
   }, [agent]);
-  const handleCancel = useCallback4(() => {
+  const handleCancel = useCallback6(() => {
     setIsEditing(false);
   }, []);
-  const handleSave = useCallback4(async () => {
+  const handleSave = useCallback6(async () => {
     if (!onSave) return;
     const updates = {};
     if (editState.display_name !== agent.display_name)
@@ -36777,7 +37287,7 @@ var AgentCard = ({
     }
   }, [onSave, agent, editState]);
   if (compact) {
-    return /* @__PURE__ */ jsxs82(
+    return /* @__PURE__ */ jsxs86(
       "div",
       {
         className: cn(
@@ -36785,14 +37295,14 @@ var AgentCard = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs82(Avatar, { className: "h-8 w-8 shrink-0", children: [
-            /* @__PURE__ */ jsx123(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
-            /* @__PURE__ */ jsx123(AvatarFallback, { className: "bg-interactive/10 text-interactive text-xs font-bold", children: agent.display_name.charAt(0) })
+          /* @__PURE__ */ jsxs86(Avatar, { className: "h-8 w-8 shrink-0", children: [
+            /* @__PURE__ */ jsx128(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
+            /* @__PURE__ */ jsx128(AvatarFallback, { className: "bg-interactive/10 text-interactive text-xs font-bold", children: agent.display_name.charAt(0) })
           ] }),
-          /* @__PURE__ */ jsxs82("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx123("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
-              /* @__PURE__ */ jsx123(
+          /* @__PURE__ */ jsxs86("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs86("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx128("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
+              /* @__PURE__ */ jsx128(
                 "span",
                 {
                   className: cn(
@@ -36803,13 +37313,13 @@ var AgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx123("p", { className: "text-[var(--foreground)]/50 text-xs truncate", children: agent.description })
+            /* @__PURE__ */ jsx128("p", { className: "text-[var(--foreground)]/50 text-xs truncate", children: agent.description })
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs86(
     "div",
     {
       className: cn(
@@ -36817,14 +37327,14 @@ var AgentCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs82("div", { className: "flex items-start gap-4 px-5 py-4", children: [
-          /* @__PURE__ */ jsxs82(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
-            /* @__PURE__ */ jsx123(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
-            /* @__PURE__ */ jsx123(AvatarFallback, { className: "bg-interactive/10 text-interactive text-lg font-bold", children: agent.display_name.charAt(0) })
+        /* @__PURE__ */ jsxs86("div", { className: "flex items-start gap-4 px-5 py-4", children: [
+          /* @__PURE__ */ jsxs86(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
+            /* @__PURE__ */ jsx128(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
+            /* @__PURE__ */ jsx128(AvatarFallback, { className: "bg-interactive/10 text-interactive text-lg font-bold", children: agent.display_name.charAt(0) })
           ] }),
-          /* @__PURE__ */ jsxs82("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-2", children: [
-              isEditing ? /* @__PURE__ */ jsx123(
+          /* @__PURE__ */ jsxs86("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs86("div", { className: "flex items-center gap-2", children: [
+              isEditing ? /* @__PURE__ */ jsx128(
                 "input",
                 {
                   type: "text",
@@ -36834,9 +37344,9 @@ var AgentCard = ({
                   className: "flex-1 bg-transparent border-b border-interactive/30 text-sm font-semibold text-foreground outline-none focus:border-interactive transition-all",
                   placeholder: "Agent name"
                 }
-              ) : /* @__PURE__ */ jsx123("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
-              /* @__PURE__ */ jsx123("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: agent.name }),
-              /* @__PURE__ */ jsx123(
+              ) : /* @__PURE__ */ jsx128("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
+              /* @__PURE__ */ jsx128("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: agent.name }),
+              /* @__PURE__ */ jsx128(
                 "span",
                 {
                   className: cn(
@@ -36847,7 +37357,7 @@ var AgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx123("div", { className: "mt-1", children: isEditing ? /* @__PURE__ */ jsx123(
+            /* @__PURE__ */ jsx128("div", { className: "mt-1", children: isEditing ? /* @__PURE__ */ jsx128(
               "textarea",
               {
                 value: editState.description,
@@ -36857,10 +37367,10 @@ var AgentCard = ({
                 rows: 2,
                 placeholder: "Describe this agent..."
               }
-            ) : /* @__PURE__ */ jsx123("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed", children: agent.description }) }),
-            isEditing && /* @__PURE__ */ jsxs82("div", { className: "mt-2 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx123("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold", children: "Avatar:" }),
-              /* @__PURE__ */ jsx123(
+            ) : /* @__PURE__ */ jsx128("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed", children: agent.description }) }),
+            isEditing && /* @__PURE__ */ jsxs86("div", { className: "mt-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx128("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold", children: "Avatar:" }),
+              /* @__PURE__ */ jsx128(
                 "input",
                 {
                   type: "text",
@@ -36873,8 +37383,8 @@ var AgentCard = ({
               )
             ] })
           ] }),
-          editable && onSave && /* @__PURE__ */ jsx123("div", { className: "flex items-center gap-1.5 shrink-0", children: isEditing ? /* @__PURE__ */ jsxs82(Fragment4, { children: [
-            /* @__PURE__ */ jsx123(
+          editable && onSave && /* @__PURE__ */ jsx128("div", { className: "flex items-center gap-1.5 shrink-0", children: isEditing ? /* @__PURE__ */ jsxs86(Fragment6, { children: [
+            /* @__PURE__ */ jsx128(
               "button",
               {
                 onClick: handleCancel,
@@ -36883,7 +37393,7 @@ var AgentCard = ({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx123(
+            /* @__PURE__ */ jsx128(
               "button",
               {
                 onClick: handleSave,
@@ -36892,7 +37402,7 @@ var AgentCard = ({
                 children: isSaving ? "Saving..." : "Save"
               }
             )
-          ] }) : /* @__PURE__ */ jsx123(
+          ] }) : /* @__PURE__ */ jsx128(
             "button",
             {
               onClick: handleEdit,
@@ -36901,18 +37411,18 @@ var AgentCard = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx123("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-3 text-xs", children: /* @__PURE__ */ jsxs82("span", { className: "text-[var(--foreground)]/40", children: [
+        /* @__PURE__ */ jsx128("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-3 text-xs", children: /* @__PURE__ */ jsxs86("span", { className: "text-[var(--foreground)]/40", children: [
           "Model:",
           " ",
-          /* @__PURE__ */ jsx123("span", { className: "font-mono text-[var(--foreground)]/70", children: agent.model })
+          /* @__PURE__ */ jsx128("span", { className: "font-mono text-[var(--foreground)]/70", children: agent.model })
         ] }) }),
-        agent.tools && agent.tools.length > 0 && /* @__PURE__ */ jsxs82("div", { className: "border-t border-[var(--border-color)] px-5 py-3", children: [
-          /* @__PURE__ */ jsxs82("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-2", children: [
+        agent.tools && agent.tools.length > 0 && /* @__PURE__ */ jsxs86("div", { className: "border-t border-[var(--border-color)] px-5 py-3", children: [
+          /* @__PURE__ */ jsxs86("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-2", children: [
             "Tools (",
             agent.tools.length,
             ")"
           ] }),
-          /* @__PURE__ */ jsx123("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ jsx123(
+          /* @__PURE__ */ jsx128("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ jsx128(
             "span",
             {
               className: "text-[11px] px-2 py-0.5 rounded-md bg-interactive/10 text-interactive font-mono border border-interactive/20",
@@ -36927,7 +37437,7 @@ var AgentCard = ({
 };
 
 // src/molecules/agent-builder/AgentDataTable/AgentDataTable.tsx
-import { jsx as jsx124, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx129, jsxs as jsxs87 } from "react/jsx-runtime";
 var AgentDataTable = ({
   headers,
   rows,
@@ -36935,7 +37445,7 @@ var AgentDataTable = ({
 }) => {
   const renderCell = (value) => {
     if (typeof value === "boolean") {
-      return /* @__PURE__ */ jsxs83(
+      return /* @__PURE__ */ jsxs87(
         "span",
         {
           className: cn(
@@ -36943,7 +37453,7 @@ var AgentDataTable = ({
             value ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
           ),
           children: [
-            /* @__PURE__ */ jsx124(
+            /* @__PURE__ */ jsx129(
               "span",
               {
                 className: cn(
@@ -36957,17 +37467,17 @@ var AgentDataTable = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx124("span", { className: "text-[var(--foreground)]", children: String(value) });
+    return /* @__PURE__ */ jsx129("span", { className: "text-[var(--foreground)]", children: String(value) });
   };
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     "div",
     {
       className: cn(
         "text-foreground hover:bg-muted/50 hover:text-foreground my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
         className
       ),
-      children: /* @__PURE__ */ jsx124("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs83("table", { className: "w-full text-xs", children: [
-        /* @__PURE__ */ jsx124("thead", { children: /* @__PURE__ */ jsx124("tr", { className: "border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: headers.map((header) => /* @__PURE__ */ jsx124(
+      children: /* @__PURE__ */ jsx129("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs87("table", { className: "w-full text-xs", children: [
+        /* @__PURE__ */ jsx129("thead", { children: /* @__PURE__ */ jsx129("tr", { className: "border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: headers.map((header) => /* @__PURE__ */ jsx129(
           "th",
           {
             className: "text-left px-4 py-2.5 text-[11px] font-semibold text-[var(--foreground)]/60 uppercase tracking-wide whitespace-nowrap",
@@ -36975,11 +37485,11 @@ var AgentDataTable = ({
           },
           header
         )) }) }),
-        /* @__PURE__ */ jsx124("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ jsx124(
+        /* @__PURE__ */ jsx129("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ jsx129(
           "tr",
           {
             className: "border-b border-[var(--border-color)] last:border-b-0 hover:bg-[var(--foreground)]/[0.02] transition-colors",
-            children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx124(
+            children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx129(
               "td",
               {
                 className: "px-4 py-2.5 text-xs whitespace-nowrap",
@@ -36996,14 +37506,14 @@ var AgentDataTable = ({
 };
 
 // src/molecules/agent-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
-import { useState as useState11 } from "react";
-import { jsx as jsx125, jsxs as jsxs84 } from "react/jsx-runtime";
+import { useState as useState14 } from "react";
+import { jsx as jsx130, jsxs as jsxs88 } from "react/jsx-runtime";
 var WorkflowVisualizer = ({
   steps,
   className
 }) => {
-  const [expandedStep, setExpandedStep] = useState11(null);
-  return /* @__PURE__ */ jsxs84(
+  const [expandedStep, setExpandedStep] = useState14(null);
+  return /* @__PURE__ */ jsxs88(
     "div",
     {
       className: cn(
@@ -37011,8 +37521,8 @@ var WorkflowVisualizer = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs84("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
-          /* @__PURE__ */ jsx125("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx125(
+        /* @__PURE__ */ jsxs88("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx130("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx130(
             "svg",
             {
               width: "14",
@@ -37024,24 +37534,24 @@ var WorkflowVisualizer = ({
               className: "text-interactive",
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              children: /* @__PURE__ */ jsx125("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
+              children: /* @__PURE__ */ jsx130("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
             }
           ) }),
-          /* @__PURE__ */ jsx125("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Workflow" }),
-          /* @__PURE__ */ jsxs84("span", { className: "ml-auto text-[11px] font-medium text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.06] px-2 py-0.5 rounded-full", children: [
+          /* @__PURE__ */ jsx130("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Workflow" }),
+          /* @__PURE__ */ jsxs88("span", { className: "ml-auto text-[11px] font-medium text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.06] px-2 py-0.5 rounded-full", children: [
             steps.length,
             " steps"
           ] })
         ] }),
-        /* @__PURE__ */ jsx125("div", { className: "px-4 py-3", children: steps.map((step, idx) => {
+        /* @__PURE__ */ jsx130("div", { className: "px-4 py-3", children: steps.map((step, idx) => {
           const isLast = idx === steps.length - 1;
           const isExpanded = expandedStep === step.id;
-          return /* @__PURE__ */ jsxs84("div", { className: "flex gap-3", children: [
-            /* @__PURE__ */ jsxs84("div", { className: "flex flex-col items-center shrink-0", children: [
-              /* @__PURE__ */ jsx125("div", { className: "w-7 h-7 rounded-full bg-interactive/10 border-2 border-interactive/30 flex items-center justify-center", children: /* @__PURE__ */ jsx125("span", { className: "text-[10px] font-bold text-interactive", children: idx + 1 }) }),
-              !isLast && /* @__PURE__ */ jsx125("div", { className: "w-0.5 flex-1 min-h-[16px] bg-interactive/15" })
+          return /* @__PURE__ */ jsxs88("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsxs88("div", { className: "flex flex-col items-center shrink-0", children: [
+              /* @__PURE__ */ jsx130("div", { className: "w-7 h-7 rounded-full bg-interactive/10 border-2 border-interactive/30 flex items-center justify-center", children: /* @__PURE__ */ jsx130("span", { className: "text-[10px] font-bold text-interactive", children: idx + 1 }) }),
+              !isLast && /* @__PURE__ */ jsx130("div", { className: "w-0.5 flex-1 min-h-[16px] bg-interactive/15" })
             ] }),
-            /* @__PURE__ */ jsxs84(
+            /* @__PURE__ */ jsxs88(
               "div",
               {
                 className: cn(
@@ -37049,20 +37559,20 @@ var WorkflowVisualizer = ({
                   isExpanded ? "bg-[var(--foreground)]/[0.02]" : "hover:bg-[var(--foreground)]/[0.02]"
                 ),
                 children: [
-                  /* @__PURE__ */ jsxs84(
+                  /* @__PURE__ */ jsxs88(
                     "button",
                     {
                       onClick: () => setExpandedStep(isExpanded ? null : step.id),
                       className: "w-full text-left px-3 py-2.5 flex items-center gap-2",
                       children: [
-                        /* @__PURE__ */ jsxs84("div", { className: "flex-1 min-w-0", children: [
-                          /* @__PURE__ */ jsx125("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: step.name }),
-                          step.description && !isExpanded && /* @__PURE__ */ jsxs84("span", { className: "text-xs text-[var(--foreground)]/40 ml-2", children: [
+                        /* @__PURE__ */ jsxs88("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx130("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: step.name }),
+                          step.description && !isExpanded && /* @__PURE__ */ jsxs88("span", { className: "text-xs text-[var(--foreground)]/40 ml-2", children: [
                             "\u2014 ",
                             step.description
                           ] })
                         ] }),
-                        /* @__PURE__ */ jsx125(
+                        /* @__PURE__ */ jsx130(
                           "svg",
                           {
                             width: "12",
@@ -37075,28 +37585,28 @@ var WorkflowVisualizer = ({
                               "shrink-0 text-[var(--foreground)]/30 transition-transform",
                               isExpanded && "rotate-180"
                             ),
-                            children: /* @__PURE__ */ jsx125("polyline", { points: "6 9 12 15 18 9" })
+                            children: /* @__PURE__ */ jsx130("polyline", { points: "6 9 12 15 18 9" })
                           }
                         )
                       ]
                     }
                   ),
-                  isExpanded && /* @__PURE__ */ jsxs84("div", { className: "px-3 pb-3 space-y-2.5", children: [
-                    step.description && /* @__PURE__ */ jsx125("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed", children: step.description }),
-                    step.sub_steps && step.sub_steps.length > 0 && /* @__PURE__ */ jsx125("div", { className: "space-y-1", children: step.sub_steps.map((sub) => /* @__PURE__ */ jsxs84(
+                  isExpanded && /* @__PURE__ */ jsxs88("div", { className: "px-3 pb-3 space-y-2.5", children: [
+                    step.description && /* @__PURE__ */ jsx130("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed", children: step.description }),
+                    step.sub_steps && step.sub_steps.length > 0 && /* @__PURE__ */ jsx130("div", { className: "space-y-1", children: step.sub_steps.map((sub) => /* @__PURE__ */ jsxs88(
                       "div",
                       {
                         className: "flex items-start gap-2 text-xs",
                         children: [
-                          /* @__PURE__ */ jsx125("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-interactive/40" }),
-                          /* @__PURE__ */ jsx125("span", { className: "text-[var(--foreground)]/60", children: sub.action })
+                          /* @__PURE__ */ jsx130("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-interactive/40" }),
+                          /* @__PURE__ */ jsx130("span", { className: "text-[var(--foreground)]/60", children: sub.action })
                         ]
                       },
                       sub.id
                     )) }),
-                    step.tools && step.tools.length > 0 && /* @__PURE__ */ jsxs84("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
-                      /* @__PURE__ */ jsx125("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold tracking-wider", children: "Tools:" }),
-                      step.tools.map((tool) => /* @__PURE__ */ jsx125(
+                    step.tools && step.tools.length > 0 && /* @__PURE__ */ jsxs88("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+                      /* @__PURE__ */ jsx130("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold tracking-wider", children: "Tools:" }),
+                      step.tools.map((tool) => /* @__PURE__ */ jsx130(
                         "span",
                         {
                           className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
@@ -37105,9 +37615,9 @@ var WorkflowVisualizer = ({
                         tool
                       ))
                     ] }),
-                    step.on_failure && /* @__PURE__ */ jsxs84("div", { className: "flex items-start gap-2 text-xs bg-[#ef4444]/[0.06] border border-[#ef4444]/10 rounded-md px-2.5 py-2", children: [
-                      /* @__PURE__ */ jsx125("span", { className: "shrink-0 text-[10px] font-semibold text-[#ef4444]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
-                      /* @__PURE__ */ jsx125("span", { className: "text-[var(--foreground)]/50", children: step.on_failure })
+                    step.on_failure && /* @__PURE__ */ jsxs88("div", { className: "flex items-start gap-2 text-xs bg-[#ef4444]/[0.06] border border-[#ef4444]/10 rounded-md px-2.5 py-2", children: [
+                      /* @__PURE__ */ jsx130("span", { className: "shrink-0 text-[10px] font-semibold text-[#ef4444]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
+                      /* @__PURE__ */ jsx130("span", { className: "text-[var(--foreground)]/50", children: step.on_failure })
                     ] })
                   ] })
                 ]
@@ -37121,8 +37631,8 @@ var WorkflowVisualizer = ({
 };
 
 // src/molecules/agent-builder/InstructionPreview/InstructionPreview.tsx
-import { useState as useState12 } from "react";
-import { jsx as jsx126, jsxs as jsxs85 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { jsx as jsx131, jsxs as jsxs89 } from "react/jsx-runtime";
 var InstructionPreview = ({
   agent_name,
   description,
@@ -37131,11 +37641,11 @@ var InstructionPreview = ({
   tools,
   className
 }) => {
-  const [isExpanded, setIsExpanded] = useState12(false);
+  const [isExpanded, setIsExpanded] = useState15(false);
   const previewLength = 300;
   const isLong = instruction.length > previewLength;
   const displayText = isExpanded || !isLong ? instruction : instruction.slice(0, previewLength) + "...";
-  return /* @__PURE__ */ jsxs85(
+  return /* @__PURE__ */ jsxs89(
     "div",
     {
       className: cn(
@@ -37143,8 +37653,8 @@ var InstructionPreview = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx126("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ jsxs85("div", { className: "flex items-center gap-2.5", children: [
-          /* @__PURE__ */ jsx126("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsxs85(
+        /* @__PURE__ */ jsx131("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ jsxs89("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx131("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsxs89(
             "svg",
             {
               width: "14",
@@ -37157,24 +37667,24 @@ var InstructionPreview = ({
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ jsx126("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-                /* @__PURE__ */ jsx126("polyline", { points: "14 2 14 8 20 8" }),
-                /* @__PURE__ */ jsx126("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
-                /* @__PURE__ */ jsx126("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
-                /* @__PURE__ */ jsx126("polyline", { points: "10 9 9 9 8 9" })
+                /* @__PURE__ */ jsx131("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                /* @__PURE__ */ jsx131("polyline", { points: "14 2 14 8 20 8" }),
+                /* @__PURE__ */ jsx131("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+                /* @__PURE__ */ jsx131("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+                /* @__PURE__ */ jsx131("polyline", { points: "10 9 9 9 8 9" })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs85("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx126("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: agent_name }),
-            description && /* @__PURE__ */ jsx126("p", { className: "text-[11px] text-[var(--foreground)]/40 mt-0.5", children: description })
+          /* @__PURE__ */ jsxs89("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx131("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: agent_name }),
+            description && /* @__PURE__ */ jsx131("p", { className: "text-[11px] text-[var(--foreground)]/40 mt-0.5", children: description })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxs85("div", { className: "px-4 py-3 space-y-3", children: [
-          /* @__PURE__ */ jsxs85("div", { children: [
-            /* @__PURE__ */ jsx126("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Instruction" }),
-            /* @__PURE__ */ jsx126("div", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed whitespace-pre-wrap font-mono bg-[var(--foreground)]/[0.02] border border-[var(--border-color)] rounded-lg p-3", children: displayText }),
-            isLong && /* @__PURE__ */ jsx126(
+        /* @__PURE__ */ jsxs89("div", { className: "px-4 py-3 space-y-3", children: [
+          /* @__PURE__ */ jsxs89("div", { children: [
+            /* @__PURE__ */ jsx131("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Instruction" }),
+            /* @__PURE__ */ jsx131("div", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed whitespace-pre-wrap font-mono bg-[var(--foreground)]/[0.02] border border-[var(--border-color)] rounded-lg p-3", children: displayText }),
+            isLong && /* @__PURE__ */ jsx131(
               "button",
               {
                 onClick: () => setIsExpanded(!isExpanded),
@@ -37183,16 +37693,16 @@ var InstructionPreview = ({
               }
             )
           ] }),
-          workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ jsxs85("div", { children: [
-            /* @__PURE__ */ jsx126("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
-            /* @__PURE__ */ jsx126("div", { className: "space-y-1", children: workflow_summary.map((step, idx) => /* @__PURE__ */ jsxs85("div", { className: "flex items-start gap-2 text-xs", children: [
-              /* @__PURE__ */ jsx126("span", { className: "shrink-0 w-5 h-5 rounded-full bg-interactive/10 flex items-center justify-center text-[10px] font-bold text-interactive", children: idx + 1 }),
-              /* @__PURE__ */ jsx126("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
+          workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ jsxs89("div", { children: [
+            /* @__PURE__ */ jsx131("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
+            /* @__PURE__ */ jsx131("div", { className: "space-y-1", children: workflow_summary.map((step, idx) => /* @__PURE__ */ jsxs89("div", { className: "flex items-start gap-2 text-xs", children: [
+              /* @__PURE__ */ jsx131("span", { className: "shrink-0 w-5 h-5 rounded-full bg-interactive/10 flex items-center justify-center text-[10px] font-bold text-interactive", children: idx + 1 }),
+              /* @__PURE__ */ jsx131("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
             ] }, idx)) })
           ] }),
-          tools && tools.length > 0 && /* @__PURE__ */ jsxs85("div", { children: [
-            /* @__PURE__ */ jsx126("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Tools" }),
-            /* @__PURE__ */ jsx126("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ jsx126(
+          tools && tools.length > 0 && /* @__PURE__ */ jsxs89("div", { children: [
+            /* @__PURE__ */ jsx131("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Tools" }),
+            /* @__PURE__ */ jsx131("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ jsx131(
               "span",
               {
                 className: "text-[10px] font-mono px-2 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
@@ -37208,16 +37718,16 @@ var InstructionPreview = ({
 };
 
 // src/molecules/agent-builder/UIComponentSelector/UIComponentSelector.tsx
-import { useState as useState13 } from "react";
-import { jsx as jsx127, jsxs as jsxs86 } from "react/jsx-runtime";
+import { useState as useState16 } from "react";
+import { jsx as jsx132, jsxs as jsxs90 } from "react/jsx-runtime";
 function UIComponentSelector({
   components,
   onSelect,
   onPreview,
   className
 }) {
-  const [selected, setSelected] = useState13(/* @__PURE__ */ new Set());
-  const [submitted, setSubmitted] = useState13(false);
+  const [selected, setSelected] = useState16(/* @__PURE__ */ new Set());
+  const [submitted, setSubmitted] = useState16(false);
   const grouped = components.reduce(
     (acc, comp) => {
       const cat = comp.category || "Other";
@@ -37241,7 +37751,7 @@ function UIComponentSelector({
     onSelect?.(Array.from(selected));
   };
   const categoryOrder = Object.keys(grouped).sort();
-  return /* @__PURE__ */ jsxs86(
+  return /* @__PURE__ */ jsxs90(
     "div",
     {
       className: cn(
@@ -37249,13 +37759,13 @@ function UIComponentSelector({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs86("div", { className: "px-4 py-3 border-b border-border bg-muted/50", children: [
-          /* @__PURE__ */ jsx127("h3", { className: "text-sm font-semibold text-foreground", children: "Select UI Components" }),
-          /* @__PURE__ */ jsx127("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
+        /* @__PURE__ */ jsxs90("div", { className: "px-4 py-3 border-b border-border bg-muted/50", children: [
+          /* @__PURE__ */ jsx132("h3", { className: "text-sm font-semibold text-foreground", children: "Select UI Components" }),
+          /* @__PURE__ */ jsx132("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
         ] }),
-        /* @__PURE__ */ jsx127("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ jsxs86("div", { children: [
-          /* @__PURE__ */ jsx127("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2", children: category }),
-          /* @__PURE__ */ jsx127("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ jsxs86(
+        /* @__PURE__ */ jsx132("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ jsxs90("div", { children: [
+          /* @__PURE__ */ jsx132("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2", children: category }),
+          /* @__PURE__ */ jsx132("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ jsxs90(
             "label",
             {
               className: cn(
@@ -37265,7 +37775,7 @@ function UIComponentSelector({
                 selected.has(comp.name) && submitted && "bg-interactive/5"
               ),
               children: [
-                /* @__PURE__ */ jsx127(
+                /* @__PURE__ */ jsx132(
                   "input",
                   {
                     type: "checkbox",
@@ -37275,10 +37785,10 @@ function UIComponentSelector({
                     className: "mt-0.5 h-4 w-4 rounded border-border text-interactive focus:ring-interactive/50 disabled:opacity-50"
                   }
                 ),
-                /* @__PURE__ */ jsxs86("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxs86("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx127("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
-                    onPreview && /* @__PURE__ */ jsx127(
+                /* @__PURE__ */ jsxs90("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxs90("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx132("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
+                    onPreview && /* @__PURE__ */ jsx132(
                       "button",
                       {
                         type: "button",
@@ -37289,7 +37799,7 @@ function UIComponentSelector({
                         },
                         className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
                         title: `Preview ${comp.display_name}`,
-                        children: /* @__PURE__ */ jsxs86(
+                        children: /* @__PURE__ */ jsxs90(
                           "svg",
                           {
                             width: "14",
@@ -37302,28 +37812,28 @@ function UIComponentSelector({
                             strokeLinejoin: "round",
                             className: "text-muted-foreground hover:text-primary",
                             children: [
-                              /* @__PURE__ */ jsx127("circle", { cx: "12", cy: "12", r: "10" }),
-                              /* @__PURE__ */ jsx127("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-                              /* @__PURE__ */ jsx127("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+                              /* @__PURE__ */ jsx132("circle", { cx: "12", cy: "12", r: "10" }),
+                              /* @__PURE__ */ jsx132("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                              /* @__PURE__ */ jsx132("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
                             ]
                           }
                         )
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx127("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
+                  /* @__PURE__ */ jsx132("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
                 ] })
               ]
             },
             comp.name
           )) })
         ] }, category)) }),
-        !submitted && /* @__PURE__ */ jsxs86("div", { className: "px-4 py-3 border-t border-border flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs86("span", { className: "text-xs text-muted-foreground", children: [
+        !submitted && /* @__PURE__ */ jsxs90("div", { className: "px-4 py-3 border-t border-border flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs90("span", { className: "text-xs text-muted-foreground", children: [
             selected.size,
             " selected"
           ] }),
-          /* @__PURE__ */ jsx127(
+          /* @__PURE__ */ jsx132(
             "button",
             {
               onClick: handleContinue,
@@ -37338,7 +37848,7 @@ function UIComponentSelector({
 }
 
 // src/molecules/agent-builder/MultiAgentCard/MultiAgentCard.tsx
-import { jsx as jsx128, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs91 } from "react/jsx-runtime";
 var MultiAgentCard = ({
   name,
   display_name,
@@ -37348,7 +37858,7 @@ var MultiAgentCard = ({
   className
 }) => {
   const avatarUrl = `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}`;
-  return /* @__PURE__ */ jsxs87(
+  return /* @__PURE__ */ jsxs91(
     "div",
     {
       className: cn(
@@ -37356,14 +37866,14 @@ var MultiAgentCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs87("div", { className: "flex items-start gap-4 px-5 py-4", children: [
-          /* @__PURE__ */ jsx128("div", { className: "h-12 w-12 shrink-0 rounded-full border-2 border-interactive/20 overflow-hidden bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx128("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
-          /* @__PURE__ */ jsxs87("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs87("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx128("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
-              /* @__PURE__ */ jsx128("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: name }),
-              /* @__PURE__ */ jsx128("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
-              /* @__PURE__ */ jsx128(
+        /* @__PURE__ */ jsxs91("div", { className: "flex items-start gap-4 px-5 py-4", children: [
+          /* @__PURE__ */ jsx133("div", { className: "h-12 w-12 shrink-0 rounded-full border-2 border-interactive/20 overflow-hidden bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx133("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
+          /* @__PURE__ */ jsxs91("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs91("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx133("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
+              /* @__PURE__ */ jsx133("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: name }),
+              /* @__PURE__ */ jsx133("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
+              /* @__PURE__ */ jsx133(
                 "span",
                 {
                   className: cn(
@@ -37374,18 +37884,18 @@ var MultiAgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx128("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed mt-1 whitespace-normal", style: { textWrap: "auto" }, children: description })
+            /* @__PURE__ */ jsx133("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed mt-1 whitespace-normal", style: { textWrap: "auto" }, children: description })
           ] })
         ] }),
-        stages.length > 0 && /* @__PURE__ */ jsxs87("div", { className: "border-t border-[var(--border-color)] px-5 py-4", children: [
-          /* @__PURE__ */ jsxs87("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-3", children: [
+        stages.length > 0 && /* @__PURE__ */ jsxs91("div", { className: "border-t border-[var(--border-color)] px-5 py-4", children: [
+          /* @__PURE__ */ jsxs91("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-3", children: [
             "Stages (",
             stages.length,
             ")"
           ] }),
-          /* @__PURE__ */ jsx128("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ jsxs87("div", { className: "flex items-stretch", children: [
-            /* @__PURE__ */ jsxs87("div", { className: "flex flex-col items-center mr-3 w-5", children: [
-              /* @__PURE__ */ jsx128(
+          /* @__PURE__ */ jsx133("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ jsxs91("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ jsxs91("div", { className: "flex flex-col items-center mr-3 w-5", children: [
+              /* @__PURE__ */ jsx133(
                 "div",
                 {
                   className: cn(
@@ -37395,20 +37905,20 @@ var MultiAgentCard = ({
                   children: idx + 1
                 }
               ),
-              idx < stages.length - 1 && /* @__PURE__ */ jsx128("div", { className: "w-px flex-1 bg-interactive/20 min-h-[16px]" })
+              idx < stages.length - 1 && /* @__PURE__ */ jsx133("div", { className: "w-px flex-1 bg-interactive/20 min-h-[16px]" })
             ] }),
-            /* @__PURE__ */ jsxs87("div", { className: "flex-1 mb-2 p-3 rounded-lg border border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
-              /* @__PURE__ */ jsxs87("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx128("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
-                /* @__PURE__ */ jsx128("span", { className: "text-[10px] font-mono text-[var(--foreground)]/30", children: stage.agent_name })
+            /* @__PURE__ */ jsxs91("div", { className: "flex-1 mb-2 p-3 rounded-lg border border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
+              /* @__PURE__ */ jsxs91("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx133("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
+                /* @__PURE__ */ jsx133("span", { className: "text-[10px] font-mono text-[var(--foreground)]/30", children: stage.agent_name })
               ] }),
-              /* @__PURE__ */ jsxs87("div", { className: "flex items-center gap-3 mt-1.5 text-[10px] text-[var(--foreground)]/50", children: [
-                stage.tools && stage.tools.length > 0 && /* @__PURE__ */ jsxs87("span", { children: [
+              /* @__PURE__ */ jsxs91("div", { className: "flex items-center gap-3 mt-1.5 text-[10px] text-[var(--foreground)]/50", children: [
+                stage.tools && stage.tools.length > 0 && /* @__PURE__ */ jsxs91("span", { children: [
                   stage.tools.length,
                   " tool",
                   stage.tools.length !== 1 ? "s" : ""
                 ] }),
-                stage.ui_components && stage.ui_components.length > 0 && /* @__PURE__ */ jsxs87("span", { children: [
+                stage.ui_components && stage.ui_components.length > 0 && /* @__PURE__ */ jsxs91("span", { children: [
                   stage.ui_components.length,
                   " component",
                   stage.ui_components.length !== 1 ? "s" : ""
@@ -37423,12 +37933,12 @@ var MultiAgentCard = ({
 };
 
 // src/molecules/agent-builder/MultiAgentPlan/MultiAgentPlan.tsx
-import { jsx as jsx129, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs92 } from "react/jsx-runtime";
 var MultiAgentPlan = ({
   stages = [],
   className
 }) => {
-  return /* @__PURE__ */ jsxs88(
+  return /* @__PURE__ */ jsxs92(
     "div",
     {
       className: cn(
@@ -37436,8 +37946,8 @@ var MultiAgentPlan = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx129("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs88("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx129("div", { className: "w-4 h-4 rounded bg-violet-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsx129(
+        /* @__PURE__ */ jsx134("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs92("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx134("div", { className: "w-4 h-4 rounded bg-violet-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsx134(
             "svg",
             {
               width: "10",
@@ -37447,20 +37957,20 @@ var MultiAgentPlan = ({
               stroke: "currentColor",
               strokeWidth: "2",
               className: "text-violet-600",
-              children: /* @__PURE__ */ jsx129("path", { d: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" })
+              children: /* @__PURE__ */ jsx134("path", { d: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" })
             }
           ) }),
-          /* @__PURE__ */ jsx129("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "Proposed Multi-Agent Workflow" }),
-          /* @__PURE__ */ jsx129("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 font-medium", children: "Draft" })
+          /* @__PURE__ */ jsx134("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "Proposed Multi-Agent Workflow" }),
+          /* @__PURE__ */ jsx134("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 font-medium", children: "Draft" })
         ] }) }),
-        /* @__PURE__ */ jsx129("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx129("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ jsxs88("div", { className: "flex items-stretch min-w-0", children: [
-          /* @__PURE__ */ jsxs88("div", { className: "flex flex-col items-center mr-3 w-6", children: [
-            /* @__PURE__ */ jsx129("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-interactive/10 text-interactive border border-interactive/30", children: idx + 1 }),
-            idx < stages.length - 1 && /* @__PURE__ */ jsx129("div", { className: "w-px flex-1 bg-interactive/20 min-h-[12px]" })
+        /* @__PURE__ */ jsx134("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx134("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ jsxs92("div", { className: "flex items-stretch min-w-0", children: [
+          /* @__PURE__ */ jsxs92("div", { className: "flex flex-col items-center mr-3 w-6", children: [
+            /* @__PURE__ */ jsx134("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-interactive/10 text-interactive border border-interactive/30", children: idx + 1 }),
+            idx < stages.length - 1 && /* @__PURE__ */ jsx134("div", { className: "w-px flex-1 bg-interactive/20 min-h-[12px]" })
           ] }),
-          /* @__PURE__ */ jsxs88("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
-            /* @__PURE__ */ jsx129("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
-            stage.description && /* @__PURE__ */ jsx129(
+          /* @__PURE__ */ jsxs92("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
+            /* @__PURE__ */ jsx134("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
+            stage.description && /* @__PURE__ */ jsx134(
               "p",
               {
                 className: "text-[11px] text-foreground/50 mt-0.5 whitespace-normal",
@@ -37468,7 +37978,7 @@ var MultiAgentPlan = ({
                 children: stage.description
               }
             ),
-            stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ jsx129("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ jsx129(
+            stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ jsx134("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ jsx134(
               "span",
               {
                 className: "text-[10px] px-1.5 py-0.5 rounded bg-interactive/10 text-interactive font-mono",
@@ -37484,8 +37994,8 @@ var MultiAgentPlan = ({
 };
 
 // src/molecules/agent-builder/MultiAgentUISelector/MultiAgentUISelector.tsx
-import { useState as useState14, useCallback as useCallback5 } from "react";
-import { jsx as jsx130, jsxs as jsxs89 } from "react/jsx-runtime";
+import { useState as useState17, useCallback as useCallback7 } from "react";
+import { jsx as jsx135, jsxs as jsxs93 } from "react/jsx-runtime";
 var MultiAgentUISelector = ({
   stages = [],
   components = [],
@@ -37493,8 +38003,8 @@ var MultiAgentUISelector = ({
   onPreview,
   className
 }) => {
-  const [activeStageId, setActiveStageId] = useState14(stages[0]?.id || "");
-  const [selections, setSelections] = useState14(
+  const [activeStageId, setActiveStageId] = useState17(stages[0]?.id || "");
+  const [selections, setSelections] = useState17(
     () => {
       const init = {};
       for (const stage of stages) {
@@ -37503,14 +38013,14 @@ var MultiAgentUISelector = ({
       return init;
     }
   );
-  const [submitted, setSubmitted] = useState14(false);
+  const [submitted, setSubmitted] = useState17(false);
   const grouped = components.reduce((acc, comp) => {
     const cat = comp.category || "Other";
     if (!acc[cat]) acc[cat] = [];
     acc[cat].push(comp);
     return acc;
   }, {});
-  const toggleComponent = useCallback5(
+  const toggleComponent = useCallback7(
     (stageId, compName) => {
       if (submitted) return;
       setSelections((prev) => {
@@ -37527,7 +38037,7 @@ var MultiAgentUISelector = ({
     },
     [submitted]
   );
-  const handleContinue = useCallback5(() => {
+  const handleContinue = useCallback7(() => {
     setSubmitted(true);
     if (onSelect) {
       const result = {};
@@ -37538,7 +38048,7 @@ var MultiAgentUISelector = ({
     }
   }, [onSelect, selections]);
   const activeStage = stages.find((s) => s.id === activeStageId);
-  return /* @__PURE__ */ jsxs89(
+  return /* @__PURE__ */ jsxs93(
     "div",
     {
       className: cn(
@@ -37546,8 +38056,8 @@ var MultiAgentUISelector = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx130("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs89("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx130("div", { className: "w-4 h-4 rounded bg-interactive/20 flex items-center justify-center", children: /* @__PURE__ */ jsxs89(
+        /* @__PURE__ */ jsx135("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs93("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx135("div", { className: "w-4 h-4 rounded bg-interactive/20 flex items-center justify-center", children: /* @__PURE__ */ jsxs93(
             "svg",
             {
               width: "10",
@@ -37558,16 +38068,16 @@ var MultiAgentUISelector = ({
               strokeWidth: "2",
               className: "text-interactive",
               children: [
-                /* @__PURE__ */ jsx130("rect", { x: "3", y: "3", width: "7", height: "7" }),
-                /* @__PURE__ */ jsx130("rect", { x: "14", y: "3", width: "7", height: "7" }),
-                /* @__PURE__ */ jsx130("rect", { x: "3", y: "14", width: "7", height: "7" }),
-                /* @__PURE__ */ jsx130("rect", { x: "14", y: "14", width: "7", height: "7" })
+                /* @__PURE__ */ jsx135("rect", { x: "3", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ jsx135("rect", { x: "14", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ jsx135("rect", { x: "3", y: "14", width: "7", height: "7" }),
+                /* @__PURE__ */ jsx135("rect", { x: "14", y: "14", width: "7", height: "7" })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx130("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
+          /* @__PURE__ */ jsx135("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
         ] }) }),
-        /* @__PURE__ */ jsx130("div", { className: "flex border-b border-[var(--border-color)] px-4", children: stages.map((stage) => /* @__PURE__ */ jsx130(
+        /* @__PURE__ */ jsx135("div", { className: "flex border-b border-[var(--border-color)] px-4", children: stages.map((stage) => /* @__PURE__ */ jsx135(
           "button",
           {
             onClick: () => setActiveStageId(stage.id),
@@ -37581,38 +38091,45 @@ var MultiAgentUISelector = ({
           },
           stage.id
         )) }),
-        /* @__PURE__ */ jsxs89("div", { className: "px-4 py-3", children: [
-          activeStage && /* @__PURE__ */ jsxs89("p", { className: "text-[10px] text-[var(--foreground)]/40 mb-3", children: [
+        /* @__PURE__ */ jsxs93("div", { className: "px-4 py-3", children: [
+          activeStage && /* @__PURE__ */ jsxs93("p", { className: "text-[10px] text-[var(--foreground)]/40 mb-3", children: [
             "Select components for ",
-            /* @__PURE__ */ jsx130("strong", { children: activeStage.name }),
+            /* @__PURE__ */ jsx135("strong", { children: activeStage.name }),
             " (",
             activeStage.agent_name,
             ")"
           ] }),
-          Object.entries(grouped).map(([category, comps]) => /* @__PURE__ */ jsxs89("div", { className: "mb-3", children: [
-            /* @__PURE__ */ jsx130("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-1.5", children: category }),
-            /* @__PURE__ */ jsx130("div", { className: "grid grid-cols-2 gap-1.5", children: comps.map((comp) => {
+          Object.entries(grouped).map(([category, comps]) => /* @__PURE__ */ jsxs93("div", { className: "mb-3", children: [
+            /* @__PURE__ */ jsx135("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-1.5", children: category }),
+            /* @__PURE__ */ jsx135("div", { className: "grid grid-cols-2 gap-1.5", children: comps.map((comp) => {
               const isSelected = selections[activeStageId]?.has(comp.name) || false;
-              return /* @__PURE__ */ jsxs89(
-                "button",
+              return /* @__PURE__ */ jsxs93(
+                "div",
                 {
+                  role: "button",
+                  tabIndex: 0,
                   onClick: () => toggleComponent(activeStageId, comp.name),
-                  disabled: submitted,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      toggleComponent(activeStageId, comp.name);
+                    }
+                  },
                   className: cn(
-                    "text-left p-2.5 rounded-lg border text-[11px] transition-all overflow-hidden",
+                    "text-left p-2.5 rounded-lg border text-[11px] transition-all overflow-hidden cursor-pointer",
                     isSelected ? "border-interactive bg-interactive/5" : "border-[var(--border-color)] hover:border-interactive/50",
-                    submitted && "opacity-60 cursor-default"
+                    submitted && "opacity-60 cursor-default pointer-events-none"
                   ),
                   children: [
-                    /* @__PURE__ */ jsxs89("div", { className: "flex items-center gap-1.5", children: [
-                      /* @__PURE__ */ jsx130(
+                    /* @__PURE__ */ jsxs93("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx135(
                         "div",
                         {
                           className: cn(
                             "w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0",
                             isSelected ? "bg-interactive border-interactive" : "border-[var(--foreground)]/20"
                           ),
-                          children: isSelected && /* @__PURE__ */ jsx130(
+                          children: isSelected && /* @__PURE__ */ jsx135(
                             "svg",
                             {
                               width: "8",
@@ -37621,13 +38138,13 @@ var MultiAgentUISelector = ({
                               fill: "none",
                               stroke: "white",
                               strokeWidth: "3",
-                              children: /* @__PURE__ */ jsx130("polyline", { points: "20 6 9 17 4 12" })
+                              children: /* @__PURE__ */ jsx135("polyline", { points: "20 6 9 17 4 12" })
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx130("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
-                      onPreview && /* @__PURE__ */ jsx130(
+                      /* @__PURE__ */ jsx135("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
+                      onPreview && /* @__PURE__ */ jsx135(
                         "button",
                         {
                           type: "button",
@@ -37637,7 +38154,7 @@ var MultiAgentUISelector = ({
                           },
                           className: "ml-auto shrink-0 p-0.5 rounded hover:bg-[var(--foreground)]/10 transition-colors",
                           title: `Preview ${comp.display_name}`,
-                          children: /* @__PURE__ */ jsxs89(
+                          children: /* @__PURE__ */ jsxs93(
                             "svg",
                             {
                               width: "14",
@@ -37650,16 +38167,16 @@ var MultiAgentUISelector = ({
                               strokeLinejoin: "round",
                               className: "text-[var(--foreground)]/40 hover:text-[var(--primary-color)]",
                               children: [
-                                /* @__PURE__ */ jsx130("circle", { cx: "12", cy: "12", r: "10" }),
-                                /* @__PURE__ */ jsx130("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-                                /* @__PURE__ */ jsx130("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+                                /* @__PURE__ */ jsx135("circle", { cx: "12", cy: "12", r: "10" }),
+                                /* @__PURE__ */ jsx135("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                                /* @__PURE__ */ jsx135("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
                               ]
                             }
                           )
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx130("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
+                    /* @__PURE__ */ jsx135("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
                   ]
                 },
                 comp.name
@@ -37667,7 +38184,7 @@ var MultiAgentUISelector = ({
             }) })
           ] }, category))
         ] }),
-        !submitted && /* @__PURE__ */ jsx130("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx130(
+        !submitted && /* @__PURE__ */ jsx135("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx135(
           "button",
           {
             onClick: handleContinue,
@@ -37675,20 +38192,20 @@ var MultiAgentUISelector = ({
             children: "Continue"
           }
         ) }),
-        submitted && /* @__PURE__ */ jsx130("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx130("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5 ", children: "Selections confirmed" }) })
+        submitted && /* @__PURE__ */ jsx135("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx135("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5 ", children: "Selections confirmed" }) })
       ]
     }
   );
 };
 
 // src/molecules/agent-builder/StageIndicator/StageIndicator.tsx
-import { jsx as jsx131, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs94 } from "react/jsx-runtime";
 var StageIndicator = ({
   stage_name,
   agent_name,
   className
 }) => {
-  return /* @__PURE__ */ jsxs90(
+  return /* @__PURE__ */ jsxs94(
     "div",
     {
       className: cn(
@@ -37696,12 +38213,12 @@ var StageIndicator = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx131("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
-        /* @__PURE__ */ jsxs90("div", { className: "flex items-center gap-1.5 px-3 py-1 rounded-full bg-violet-500/10 border border-violet-500/20", children: [
-          /* @__PURE__ */ jsx131("div", { className: "w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" }),
-          /* @__PURE__ */ jsx131("span", { className: "text-[10px] font-medium text-violet-600", children: stage_name || agent_name })
+        /* @__PURE__ */ jsx136("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
+        /* @__PURE__ */ jsxs94("div", { className: "flex items-center gap-1.5 px-3 py-1 rounded-full bg-violet-500/10 border border-violet-500/20", children: [
+          /* @__PURE__ */ jsx136("div", { className: "w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" }),
+          /* @__PURE__ */ jsx136("span", { className: "text-[10px] font-medium text-violet-600", children: stage_name || agent_name })
         ] }),
-        /* @__PURE__ */ jsx131("div", { className: "flex-1 h-px bg-[var(--border-color)]" })
+        /* @__PURE__ */ jsx136("div", { className: "flex-1 h-px bg-[var(--border-color)]" })
       ]
     }
   );
@@ -37999,7 +38516,7 @@ __export(ui_exports, {
 // src/components/ui/button-group.tsx
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { cva as cva8 } from "class-variance-authority";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var buttonGroupVariants = cva8(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
@@ -38019,7 +38536,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx137(
     "div",
     {
       role: "group",
@@ -38036,7 +38553,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? Slot4 : "div";
-  return /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx137(
     Comp,
     {
       className: cn(
@@ -38052,7 +38569,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx137(
     Separator2,
     {
       "data-slot": "button-group-separator",
@@ -38068,9 +38585,9 @@ function ButtonGroupSeparator({
 
 // src/components/ui/empty.tsx
 import { cva as cva9 } from "class-variance-authority";
-import { jsx as jsx133 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       "data-slot": "empty",
@@ -38083,7 +38600,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       "data-slot": "empty-header",
@@ -38114,7 +38631,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       "data-slot": "empty-icon",
@@ -38125,7 +38642,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       "data-slot": "empty-title",
@@ -38135,7 +38652,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       "data-slot": "empty-description",
@@ -38148,7 +38665,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       "data-slot": "empty-content",
@@ -38162,11 +38679,11 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 import { cva as cva10 } from "class-variance-authority";
-import { jsx as jsx134, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs95 } from "react/jsx-runtime";
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -38184,7 +38701,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     "legend",
     {
       "data-slot": "field-legend",
@@ -38200,7 +38717,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     "div",
     {
       "data-slot": "field-group",
@@ -38240,7 +38757,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     "div",
     {
       role: "group",
@@ -38252,7 +38769,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     "div",
     {
       "data-slot": "field-content",
@@ -38268,7 +38785,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     Label,
     {
       "data-slot": "field-label",
@@ -38283,7 +38800,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     "div",
     {
       "data-slot": "field-label",
@@ -38296,7 +38813,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     "p",
     {
       "data-slot": "field-description",
@@ -38315,7 +38832,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs91(
+  return /* @__PURE__ */ jsxs95(
     "div",
     {
       "data-slot": "field-separator",
@@ -38326,8 +38843,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx134(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ jsx134(
+        /* @__PURE__ */ jsx139(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx139(
           "span",
           {
             className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
@@ -38345,7 +38862,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = useMemo9(() => {
+  const content = useMemo10(() => {
     if (children) {
       return children;
     }
@@ -38355,14 +38872,14 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    return /* @__PURE__ */ jsx134("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
-      (error, index) => error?.message && /* @__PURE__ */ jsx134("li", { children: error.message }, index)
+    return /* @__PURE__ */ jsx139("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsx139("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     "div",
     {
       role: "alert",
@@ -38376,9 +38893,9 @@ function FieldError({
 
 // src/components/ui/input-group.tsx
 import { cva as cva11 } from "class-variance-authority";
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx140 } from "react/jsx-runtime";
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx140(
     "div",
     {
       "data-slot": "input-group",
@@ -38422,7 +38939,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx140(
     "div",
     {
       role: "group",
@@ -38462,7 +38979,7 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx140(
     Button,
     {
       type,
@@ -38474,7 +38991,7 @@ function InputGroupButton({
   );
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx140(
     "span",
     {
       className: cn(
@@ -38489,7 +39006,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx140(
     Input,
     {
       "data-slot": "input-group-control",
@@ -38505,7 +39022,7 @@ function InputGroupTextarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx140(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -38521,9 +39038,9 @@ function InputGroupTextarea({
 // src/components/ui/item.tsx
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { cva as cva12 } from "class-variance-authority";
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx141 } from "react/jsx-runtime";
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     "div",
     {
       role: "list",
@@ -38537,7 +39054,7 @@ function ItemSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     Separator2,
     {
       "data-slot": "item-separator",
@@ -38575,7 +39092,7 @@ function Item8({
   ...props
 }) {
   const Comp = asChild ? Slot5 : "div";
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     Comp,
     {
       "data-slot": "item",
@@ -38606,7 +39123,7 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     "div",
     {
       "data-slot": "item-media",
@@ -38617,7 +39134,7 @@ function ItemMedia({
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     "div",
     {
       "data-slot": "item-content",
@@ -38630,7 +39147,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     "div",
     {
       "data-slot": "item-title",
@@ -38643,7 +39160,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     "p",
     {
       "data-slot": "item-description",
@@ -38657,7 +39174,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     "div",
     {
       "data-slot": "item-actions",
@@ -38667,7 +39184,7 @@ function ItemActions({ className, ...props }) {
   );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     "div",
     {
       "data-slot": "item-header",
@@ -38680,7 +39197,7 @@ function ItemHeader({ className, ...props }) {
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx141(
     "div",
     {
       "data-slot": "item-footer",
@@ -38694,9 +39211,9 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/kbd.tsx
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx142(
     "kbd",
     {
       "data-slot": "kbd",
@@ -38711,7 +39228,7 @@ function Kbd({ className, ...props }) {
   );
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx142(
     "kbd",
     {
       "data-slot": "kbd-group",
@@ -38744,7 +39261,7 @@ function useIsMobile() {
 }
 
 // src/components/ui/sidebar.tsx
-import { jsx as jsx138, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs96 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
@@ -38811,7 +39328,7 @@ var SidebarProvider = React100.forwardRef(
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     );
-    return /* @__PURE__ */ jsx138(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx138(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx138(
+    return /* @__PURE__ */ jsx143(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx143(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx143(
       "div",
       {
         style: {
@@ -38842,7 +39359,7 @@ var Sidebar = React100.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ jsx138(
+      return /* @__PURE__ */ jsx143(
         "div",
         {
           className: cn(
@@ -38856,7 +39373,7 @@ var Sidebar = React100.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ jsx138(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs92(
+      return /* @__PURE__ */ jsx143(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs96(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -38867,16 +39384,16 @@ var Sidebar = React100.forwardRef(
           },
           side,
           children: [
-            /* @__PURE__ */ jsxs92(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ jsx138(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ jsx138(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ jsxs96(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ jsx143(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ jsx143(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ jsx138("div", { className: "flex h-full w-full flex-col", children })
+            /* @__PURE__ */ jsx143("div", { className: "flex h-full w-full flex-col", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ jsxs92(
+    return /* @__PURE__ */ jsxs96(
       "div",
       {
         ref,
@@ -38886,7 +39403,7 @@ var Sidebar = React100.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ jsx138(
+          /* @__PURE__ */ jsx143(
             "div",
             {
               className: cn(
@@ -38897,7 +39414,7 @@ var Sidebar = React100.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ jsx138(
+          /* @__PURE__ */ jsx143(
             "div",
             {
               className: cn(
@@ -38908,7 +39425,7 @@ var Sidebar = React100.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ jsx138(
+              children: /* @__PURE__ */ jsx143(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -38926,7 +39443,7 @@ var Sidebar = React100.forwardRef(
 Sidebar.displayName = "Sidebar";
 var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsxs92(
+  return /* @__PURE__ */ jsxs96(
     Button,
     {
       ref,
@@ -38940,8 +39457,8 @@ var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx138(PanelLeft, {}),
-        /* @__PURE__ */ jsx138("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx143(PanelLeft, {}),
+        /* @__PURE__ */ jsx143("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
@@ -38949,7 +39466,7 @@ var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref)
 SidebarTrigger.displayName = "SidebarTrigger";
 var SidebarRail = React100.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     "button",
     {
       ref,
@@ -38973,7 +39490,7 @@ var SidebarRail = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarRail.displayName = "SidebarRail";
 var SidebarInset = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     "main",
     {
       ref,
@@ -38988,7 +39505,7 @@ var SidebarInset = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInset.displayName = "SidebarInset";
 var SidebarInput = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     Input,
     {
       ref,
@@ -39003,7 +39520,7 @@ var SidebarInput = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInput.displayName = "SidebarInput";
 var SidebarHeader = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     "div",
     {
       ref,
@@ -39015,7 +39532,7 @@ var SidebarHeader = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarFooter = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     "div",
     {
       ref,
@@ -39027,7 +39544,7 @@ var SidebarFooter = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarFooter.displayName = "SidebarFooter";
 var SidebarSeparator = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     Separator2,
     {
       ref,
@@ -39039,7 +39556,7 @@ var SidebarSeparator = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarSeparator.displayName = "SidebarSeparator";
 var SidebarContent = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     "div",
     {
       ref,
@@ -39054,7 +39571,7 @@ var SidebarContent = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarContent.displayName = "SidebarContent";
 var SidebarGroup = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     "div",
     {
       ref,
@@ -39067,7 +39584,7 @@ var SidebarGroup = React100.forwardRef(({ className, ...props }, ref) => {
 SidebarGroup.displayName = "SidebarGroup";
 var SidebarGroupLabel = React100.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot6 : "div";
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     Comp,
     {
       ref,
@@ -39084,7 +39601,7 @@ var SidebarGroupLabel = React100.forwardRef(({ className, asChild = false, ...pr
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
 var SidebarGroupAction = React100.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot6 : "button";
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     Comp,
     {
       ref,
@@ -39101,7 +39618,7 @@ var SidebarGroupAction = React100.forwardRef(({ className, asChild = false, ...p
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
+var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx143(
   "div",
   {
     ref,
@@ -39111,7 +39628,7 @@ var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
+var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx143(
   "ul",
   {
     ref,
@@ -39121,7 +39638,7 @@ var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
+var SidebarMenuItem = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx143(
   "li",
   {
     ref,
@@ -39163,7 +39680,7 @@ var SidebarMenuButton = React100.forwardRef(
   }, ref) => {
     const Comp = asChild ? Slot6 : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ jsx138(
+    const button = /* @__PURE__ */ jsx143(
       Comp,
       {
         ref,
@@ -39182,9 +39699,9 @@ var SidebarMenuButton = React100.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ jsxs92(Tooltip, { children: [
-      /* @__PURE__ */ jsx138(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ jsx138(
+    return /* @__PURE__ */ jsxs96(Tooltip, { children: [
+      /* @__PURE__ */ jsx143(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx143(
         TooltipContent,
         {
           side: "right",
@@ -39199,7 +39716,7 @@ var SidebarMenuButton = React100.forwardRef(
 SidebarMenuButton.displayName = "SidebarMenuButton";
 var SidebarMenuAction = React100.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? Slot6 : "button";
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     Comp,
     {
       ref,
@@ -39220,7 +39737,7 @@ var SidebarMenuAction = React100.forwardRef(({ className, asChild = false, showO
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
+var SidebarMenuBadge = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx143(
   "div",
   {
     ref,
@@ -39242,7 +39759,7 @@ var SidebarMenuSkeleton = React100.forwardRef(({ className, showIcon = false, ..
   const width = React100.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
-  return /* @__PURE__ */ jsxs92(
+  return /* @__PURE__ */ jsxs96(
     "div",
     {
       ref,
@@ -39250,14 +39767,14 @@ var SidebarMenuSkeleton = React100.forwardRef(({ className, showIcon = false, ..
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx138(
+        showIcon && /* @__PURE__ */ jsx143(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ jsx138(
+        /* @__PURE__ */ jsx143(
           Skeleton,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
@@ -39272,7 +39789,7 @@ var SidebarMenuSkeleton = React100.forwardRef(({ className, showIcon = false, ..
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
+var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx143(
   "ul",
   {
     ref,
@@ -39286,11 +39803,11 @@ var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React100.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx138("li", { ref, ...props }));
+var SidebarMenuSubItem = React100.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx143("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 var SidebarMenuSubButton = React100.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
   const Comp = asChild ? Slot6 : "a";
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx143(
     Comp,
     {
       ref,
@@ -39314,20 +39831,20 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 // src/components/ui/sonner.tsx
 import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
-import { jsx as jsx139 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
-  return /* @__PURE__ */ jsx139(
+  return /* @__PURE__ */ jsx144(
     Sonner,
     {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsx139(CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ jsx139(Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ jsx139(TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ jsx139(OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ jsx139(LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ jsx144(CircleCheck, { className: "h-4 w-4" }),
+        info: /* @__PURE__ */ jsx144(Info, { className: "h-4 w-4" }),
+        warning: /* @__PURE__ */ jsx144(TriangleAlert, { className: "h-4 w-4" }),
+        error: /* @__PURE__ */ jsx144(OctagonX, { className: "h-4 w-4" }),
+        loading: /* @__PURE__ */ jsx144(LoaderCircle, { className: "h-4 w-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -39345,24 +39862,24 @@ var Toaster = ({ ...props }) => {
 // src/components/ui/toggle-group.tsx
 import * as React101 from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { jsx as jsx140 } from "react/jsx-runtime";
+import { jsx as jsx145 } from "react/jsx-runtime";
 var ToggleGroupContext = React101.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React101.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx140(
+var ToggleGroup = React101.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx145(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx140(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ jsx145(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 var ToggleGroupItem = React101.forwardRef(({ className, children, variant, size, ...props }, ref) => {
   const context = React101.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx140(
+  return /* @__PURE__ */ jsx145(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -39381,7 +39898,7 @@ var ToggleGroupItem = React101.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
-import { jsx as jsx141, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx146, jsxs as jsxs97 } from "react/jsx-runtime";
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -39473,24 +39990,24 @@ var COMPONENT_SUGGESTIONS = {
 };
 var renderContextDependentError = (componentName, normalizedName, key) => {
   const suggestion = COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom (if available)`;
-  return /* @__PURE__ */ jsxs93(
+  return /* @__PURE__ */ jsxs97(
     "div",
     {
       className: "p-4 border-2 border-amber-500/50 rounded-lg bg-amber-50/80 space-y-2 my-2",
       children: [
-        /* @__PURE__ */ jsxs93("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsx141("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ jsxs93("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxs93("p", { className: "text-sm font-semibold text-amber-900", children: [
+        /* @__PURE__ */ jsxs97("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx146("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsxs97("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxs97("p", { className: "text-sm font-semibold text-amber-900", children: [
               "Invalid Component: ",
               componentName
             ] }),
-            /* @__PURE__ */ jsx141("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
+            /* @__PURE__ */ jsx146("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs93("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
-          /* @__PURE__ */ jsx141("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
-          /* @__PURE__ */ jsx141("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
+        /* @__PURE__ */ jsxs97("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
+          /* @__PURE__ */ jsx146("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
+          /* @__PURE__ */ jsx146("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
         ] })
       ]
     },
@@ -39649,7 +40166,7 @@ var PXEngineRenderer = ({
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
-      return /* @__PURE__ */ jsx141(
+      return /* @__PURE__ */ jsx146(
         TargetComponent,
         {
           ...finalProps,
@@ -39661,7 +40178,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ jsx141(
+      return /* @__PURE__ */ jsx146(
         TargetComponent,
         {
           ...finalProps,
@@ -39673,7 +40190,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ jsx141("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ jsx146("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
 };
 export {
   Accordion,
@@ -39767,9 +40284,14 @@ export {
   CountrySelectDisplay,
   CountrySelectEdit,
   CreatorActionHeader,
+  CreatorCompactView,
   CreatorGridCard,
+  CreatorImageList,
   CreatorProfileSummary,
+  CreatorProgressBar,
   CreatorSearch,
+  CreatorWidget,
+  CreatorWidgetSkeleton,
   DataGrid,
   Dialog,
   DialogAtom,
@@ -39947,7 +40469,8 @@ export {
   UIComponentSelector,
   VideoAtom,
   WorkflowVisualizer,
-  cn
+  cn,
+  useCreatorWidgetPolling
 };
 /*! Bundled license information: