pxengine 0.1.40 → 0.1.42

package/dist/index.cjs

@@ -121,9 +121,14 @@ __export(index_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,
   Dialog: () => Dialog,
   DialogAtom: () => DialogAtom,
@@ -301,12 +306,13 @@ __export(index_exports, {
   UIComponentSelector: () => UIComponentSelector,
   VideoAtom: () => VideoAtom,
   WorkflowVisualizer: () => WorkflowVisualizer,
-  cn: () => cn
+  cn: () => cn,
+  useCreatorWidgetPolling: () => useCreatorWidgetPolling
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/render/PXEngineRenderer.tsx
-var import_react71 = __toESM(require("react"), 1);
+var import_react75 = __toESM(require("react"), 1);
 
 // src/atoms/index.ts
 var atoms_exports = {};
@@ -33589,9 +33595,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,
@@ -33619,7 +33630,8 @@ __export(molecules_exports, {
   ToolListCard: () => ToolListCard,
   TopPostsGrid: () => TopPostsGrid,
   UIComponentSelector: () => UIComponentSelector,
-  WorkflowVisualizer: () => WorkflowVisualizer
+  WorkflowVisualizer: () => WorkflowVisualizer,
+  useCreatorWidgetPolling: () => useCreatorWidgetPolling
 });
 
 // src/molecules/generic/EditableField/EditableField.tsx
@@ -36629,7 +36641,8 @@ var CampaignConceptCard = import_react64.default.memo(
             ...field,
             label: "Budget Allocation",
             renderDisplay: (val) => {
-              if (!val) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
+              if (!val)
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
               if (Array.isArray(val)) {
                 return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "space-y-2", children: val.map((item, idx) => {
                   const label = item?.label ?? item?.key ?? `Item ${idx + 1}`;
@@ -36647,7 +36660,8 @@ var CampaignConceptCard = import_react64.default.memo(
               }
               if (typeof val === "object") {
                 const entries = Object.entries(val);
-                if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
+                if (entries.length === 0)
+                  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
                 return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "space-y-2", children: entries.map(([k, v], idx) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("span", { className: "text-muted-foreground font-medium", children: [
                     idx + 1,
@@ -36694,7 +36708,8 @@ var CampaignConceptCard = import_react64.default.memo(
             ...field,
             label: "Estimated Creators",
             renderDisplay: (val) => {
-              if (!val) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
+              if (!val)
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("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__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground text-sm", children: displayValue });
             },
@@ -36759,13 +36774,7 @@ var CampaignConceptCard = import_react64.default.memo(
           return {
             ...field,
             renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(PlatformSelectDisplay, { value: v }),
-            renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-              PlatformSelectEdit,
-              {
-                value: v,
-                onChange
-              }
-            )
+            renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(PlatformSelectEdit, { value: v, onChange })
           };
         }
         if (field.key === "description" || field.key === "creator_strategy" || field.key === "creatorStrategy") {
@@ -36779,7 +36788,8 @@ var CampaignConceptCard = import_react64.default.memo(
           ...field,
           renderDisplay: (val) => {
             if (Array.isArray(val)) {
-              if (val.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
+              if (val.length === 0)
+                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
               return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("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__ */ (0, import_jsx_runtime121.jsx)(
@@ -36804,7 +36814,7 @@ var CampaignConceptCard = import_react64.default.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
         ),
@@ -36819,7 +36829,8 @@ var CampaignConceptCard = import_react64.default.memo(
                   /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("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__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
@@ -36827,25 +36838,32 @@ var CampaignConceptCard = import_react64.default.memo(
                     !effectiveIsLatest && selectionStatus && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest text-[#3B82F6]", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("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__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex items-center gap-2 ml-3", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                  "button",
+                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                  "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__ */ (0, import_jsx_runtime121.jsx)(
-                      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__ */ (0, import_jsx_runtime121.jsx)(
+                          ChevronDown,
+                          {
+                            className: `h-4 w-4 transition-transform ${isOpen ? "rotate-0" : "-rotate-90"}`
+                          }
+                        )
                       }
                     )
                   }
-                ) })
+                )
               ]
             }
           ),
@@ -36857,7 +36875,7 @@ var CampaignConceptCard = import_react64.default.memo(
               exit: { height: 0, opacity: 0 },
               transition: { duration: 0.2, ease: "easeIn" },
               className: "overflow-hidden",
-              children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "px-4 py-3 w-full overflow-y-auto max-h-[400px] relative", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "px-4 py-3 w-full relative", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                   "div",
                   {
@@ -36898,8 +36916,506 @@ var CampaignConceptCard = import_react64.default.memo(
 );
 CampaignConceptCard.displayName = "CampaignConceptCard";
 
-// src/molecules/agent-builder/ToolListCard/ToolListCard.tsx
+// src/molecules/creator-discovery/CreatorWidget/CreatorWidget.tsx
+var import_react68 = require("react");
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorImageList.tsx
+var import_react65 = require("react");
 var import_jsx_runtime122 = require("react/jsx-runtime");
+function useMediaQuery(query) {
+  const [matches, setMatches] = (0, import_react65.useState)(false);
+  (0, import_react65.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "relative w-8 h-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      "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__ */ (0, import_jsx_runtime122.jsx)("div", { className: "absolute inset-0 bg-black/50 rounded-full pointer-events-none" }),
+    isCurrentlyProcessing && /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+        "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__ */ (0, import_jsx_runtime122.jsx)("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__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex flex-nowrap sm:flex-wrap -space-x-2 w-fit", children: [
+    creatorImages.slice(0, visibleCount).map((img, idx) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      CreatorImage,
+      {
+        img,
+        idx,
+        creatorsPercentage: initialCreatorsPercentage || 0,
+        totalCreators: creatorLength
+      },
+      idx
+    )),
+    creatorLength > visibleCount && /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
+      "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
+var import_react66 = require("react");
+var import_framer_motion2 = require("framer-motion");
+var import_jsx_runtime123 = require("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] = (0, import_react66.useState)(true);
+  (0, import_react66.useEffect)(() => {
+    if (overallPercentage && overallPercentage >= 100) {
+      setShowTooltip(false);
+    }
+  }, [overallPercentage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "relative w-full", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "md:w-full dark:bg-purple500 bg-gray-200 rounded-full h-[6px]", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+    import_framer_motion2.motion.div,
+    {
+      className: "bg-purple100 h-[6px] rounded-full relative",
+      initial: { width: 0 },
+      animate: { width: `${overallPercentage}%` },
+      transition: { duration: 0.5, ease: "easeOut" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_framer_motion2.AnimatePresence, { children: showTooltip && /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+        import_framer_motion2.motion.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__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "absolute left-1/2 top-full -translate-x-1/2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "w-0 h-0 border-l-[6px] border-r-[6px] border-t-[6px] border-transparent border-t-gray300" }),
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("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__ */ (0, import_jsx_runtime123.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ProgressBar, { overallPercentage: statusDetails?.overall_percentage }),
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "dark:text-gray400 text-gray-500 text-xs mt-2", children: (statusDetails?.overall_percentage ?? 0) < 100 && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: statusDetails?.thinking_message ? truncateName(statusDetails.thinking_message, 200) : "Processing..." }) })
+  ] });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorWidgetSkeleton.tsx
+var import_jsx_runtime124 = require("react/jsx-runtime");
+function CreatorWidgetSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "bg-background dark:bg-gray50 rounded-[25px] border border-gray300 overflow-hidden shadow-sm w-full relative", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "p-4 md:p-6 space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4 relative", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex flex-col gap-2 md:gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "w-40 h-6 bg-purple200 rounded-md animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "w-64 h-7 bg-gray200 dark:bg-gray300 rounded animate-pulse" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("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__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex flex-col gap-4 md:gap-6 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "flex -space-x-2", children: Array.from({ length: 10 }).map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "div",
+          {
+            className: "w-8 h-8 md:w-10 md:h-10 rounded-full border-2 border-gray300 bg-gray200 animate-pulse"
+          },
+          idx
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "w-full max-w-xs bg-gray200 rounded-full h-2 animate-pulse" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "px-6 py-2 bg-gray200 rounded-[30px] animate-pulse h-10 w-48" })
+    ] })
+  ] }) });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorCompactView.tsx
+var import_jsx_runtime125 = require("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__ */ (0, import_jsx_runtime125.jsx)(CreatorWidgetSkeleton, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "bg-background dark:bg-gray100 rounded-[25px] border border-gray300 overflow-hidden shadow-sm w-full relative", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "p-4 md:p-6 space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4 relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex flex-col gap-2 md:gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("h4", { className: "w-fit rounded-md bg-purple200 px-2 py-[4px] text-xs font-medium text-purpleText", children: "VERIFIED CREATORS LIST" }),
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("h3", { className: "text-gray900 md:text-lg font-bold", children: statusTitle })
+      ] }),
+      versions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "relative md:self-start", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+          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__ */ (0, import_jsx_runtime125.jsx)(ChevronDown, { className: "w-3 h-3 md:w-4 md:h-4 transition-transform" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(DropdownMenuContent, { className: "bg-gray25 border-2 border-gray400 min-w-[120px] max-h-[150px] overflow-y-auto", children: versions.map((v) => /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+          DropdownMenuItem,
+          {
+            onClick: () => onVersionSelect(v),
+            className: "cursor-pointer text-sm",
+            children: [
+              "Version ",
+              v
+            ]
+          },
+          v
+        )) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("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__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex flex-col items-center justify-center w-full py-6 md:py-8 text-center text-red-500", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("p", { className: "text-base md:text-lg font-semibold mb-2", children: "Creator Search Failed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("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__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex flex-col gap-4 md:gap-6 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+          CreatorImageList,
+          {
+            creatorImages,
+            creatorLength,
+            isAgentOutput,
+            initialCreatorsPercentage: statusDetails?.social_fetch_percentage
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+          CreatorProgressBar,
+          {
+            statusDetails,
+            timeRemaining: timeDisplay
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+        "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__ */ (0, import_jsx_runtime125.jsx)(Triangle, { className: "w-3 h-3 md:w-4 md:h-4 rotate-90 font-bold" })
+          ]
+        }
+      )
+    ] }) })
+  ] }) });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/useCreatorWidgetPolling.ts
+var import_react67 = require("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 = (0, import_react67.useMemo)(
+    () => ({ ...DEFAULT_POLLING_CONFIG, ...pollingConfig }),
+    [pollingConfig]
+  );
+  const [versionData, setVersionData] = (0, import_react67.useState)(null);
+  const [totalVersions, setTotalVersions] = (0, import_react67.useState)(0);
+  const [selectedVersion, setSelectedVersion] = (0, import_react67.useState)();
+  const [isLoadingVersion, setIsLoadingVersion] = (0, import_react67.useState)(false);
+  const [isValidationComplete, setIsValidationComplete] = (0, import_react67.useState)(false);
+  const [versionStatus, setVersionStatus] = (0, import_react67.useState)("checking");
+  const [statusDetails, setStatusDetails] = (0, import_react67.useState)();
+  const [timeDisplay, setTimeDisplay] = (0, import_react67.useState)("");
+  const [loadingStatus, setLoadingStatus] = (0, import_react67.useState)(true);
+  const remainingTimeRef = (0, import_react67.useRef)(0);
+  const requestedVersion = selectedVersion ?? currentVersion ?? versionData?.currentVersion;
+  const fetchVersionData = (0, import_react67.useCallback)(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]);
+  (0, import_react67.useEffect)(() => {
+    fetchVersionData();
+  }, [sessionId, requestedVersion, isValidationComplete]);
+  (0, import_react67.useEffect)(() => {
+    if (totalVersions > 0 || !sessionId) return;
+    const interval = setInterval(() => {
+      if (totalVersions === 0) fetchVersionData();
+    }, config.pollInterval);
+    return () => clearInterval(interval);
+  }, [totalVersions, sessionId, fetchVersionData, config.pollInterval]);
+  (0, import_react67.useEffect)(() => {
+    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 = (0, import_react67.useMemo)(() => {
+    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
+var import_jsx_runtime126 = require("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 = (0, import_react68.useCallback)(
+    (version) => setSelectedVersion(version),
+    [setSelectedVersion]
+  );
+  const handleViewCreators = (0, import_react68.useCallback)(() => {
+    onAction?.({
+      type: "view-creators",
+      sessionId,
+      creatorIds,
+      version: selectedVersion,
+      searchSpec
+    });
+  }, [onAction, sessionId, creatorIds, selectedVersion, searchSpec]);
+  if (!fetchVersions || !fetchStatus) {
+    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(CreatorWidgetSkeleton, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+    CreatorCompactView,
+    {
+      versions: versionNumbers,
+      selectedVersion,
+      creatorImages,
+      creatorLength,
+      isAgentOutput,
+      onVersionSelect: handleVersionSelect,
+      onViewCreators: handleViewCreators,
+      versionStatus,
+      statusDetails,
+      timeDisplay,
+      isLoading
+    }
+  ) });
+}
+var CreatorWidget = (0, import_react68.memo)(CreatorWidgetInner);
+
+// src/molecules/agent-builder/ToolListCard/ToolListCard.tsx
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var ICON_MAP = {
   Search,
   Database,
@@ -36956,7 +37472,7 @@ var ToolListCard = ({
     grouped[cat].push(tool);
   }
   const categories = Object.keys(grouped);
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
     "div",
     {
       className: cn(
@@ -36964,33 +37480,33 @@ var ToolListCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("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__ */ (0, import_jsx_runtime122.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Wrench, { className: "w-3.5 h-3.5 text-interactive" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
-          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("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__ */ (0, import_jsx_runtime127.jsxs)("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__ */ (0, import_jsx_runtime127.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Wrench, { className: "w-3.5 h-3.5 text-interactive" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("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__ */ (0, import_jsx_runtime122.jsx)("div", { className: "divide-y divide-[var(--border-color)]", children: categories.map((cat) => {
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "divide-y divide-[var(--border-color)]", children: categories.map((cat) => {
           const CatIcon = resolveCategoryIcon(cat);
-          return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex items-center gap-2 mb-2.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
-              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
-              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
+          return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex items-center gap-2 mb-2.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "space-y-1.5", children: grouped[cat].map((tool) => {
+            /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "space-y-1.5", children: grouped[cat].map((tool) => {
               const ToolIcon = resolveIcon(tool);
-              return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
                 "div",
                 {
                   className: "group flex items-start gap-3 px-3 py-2 rounded-lg hover:bg-[var(--foreground)]/[0.03] transition-colors",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-interactive/[0.08]", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ToolIcon, { className: "w-3 h-3 text-interactive/60" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                        tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)] truncate max-w-full", children: tool.display_name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("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__ */ (0, import_jsx_runtime127.jsx)("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-interactive/[0.08]", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ToolIcon, { className: "w-3 h-3 text-interactive/60" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                        tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)] truncate max-w-full", children: tool.display_name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("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__ */ (0, import_jsx_runtime122.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5 break-words whitespace-normal", children: tool.description })
+                      tool.description && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5 break-words whitespace-normal", children: tool.description })
                     ] })
                   ]
                 },
@@ -37005,8 +37521,8 @@ var ToolListCard = ({
 };
 
 // src/molecules/agent-builder/AgentCard/AgentCard.tsx
-var import_react65 = require("react");
-var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_react69 = require("react");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var AgentCard = ({
   agent,
   editable = true,
@@ -37014,15 +37530,15 @@ var AgentCard = ({
   onSave,
   className
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react65.useState)(false);
-  const [isSaving, setIsSaving] = (0, import_react65.useState)(false);
-  const [editState, setEditState] = (0, import_react65.useState)({
+  const [isEditing, setIsEditing] = (0, import_react69.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react69.useState)(false);
+  const [editState, setEditState] = (0, import_react69.useState)({
     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 = (0, import_react65.useCallback)(() => {
+  const handleEdit = (0, import_react69.useCallback)(() => {
     setEditState({
       display_name: agent.display_name,
       description: agent.description,
@@ -37030,10 +37546,10 @@ var AgentCard = ({
     });
     setIsEditing(true);
   }, [agent]);
-  const handleCancel = (0, import_react65.useCallback)(() => {
+  const handleCancel = (0, import_react69.useCallback)(() => {
     setIsEditing(false);
   }, []);
-  const handleSave = (0, import_react65.useCallback)(async () => {
+  const handleSave = (0, import_react69.useCallback)(async () => {
     if (!onSave) return;
     const updates = {};
     if (editState.display_name !== agent.display_name)
@@ -37057,7 +37573,7 @@ var AgentCard = ({
     }
   }, [onSave, agent, editState]);
   if (compact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
       "div",
       {
         className: cn(
@@ -37065,14 +37581,14 @@ var AgentCard = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Avatar, { className: "h-8 w-8 shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-xs font-bold", children: agent.display_name.charAt(0) })
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(Avatar, { className: "h-8 w-8 shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-xs font-bold", children: agent.display_name.charAt(0) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
-              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 "span",
                 {
                   className: cn(
@@ -37083,13 +37599,13 @@ var AgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-[var(--foreground)]/50 text-xs truncate", children: agent.description })
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "text-[var(--foreground)]/50 text-xs truncate", children: agent.description })
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
     "div",
     {
       className: cn(
@@ -37097,14 +37613,14 @@ var AgentCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-lg font-bold", children: agent.display_name.charAt(0) })
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-lg font-bold", children: agent.display_name.charAt(0) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
-              isEditing ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
+              isEditing ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 "input",
                 {
                   type: "text",
@@ -37114,9 +37630,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__ */ (0, import_jsx_runtime123.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
-              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("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__ */ (0, import_jsx_runtime123.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("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__ */ (0, import_jsx_runtime128.jsx)(
                 "span",
                 {
                   className: cn(
@@ -37127,7 +37643,7 @@ var AgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "mt-1", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "mt-1", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
               "textarea",
               {
                 value: editState.description,
@@ -37137,10 +37653,10 @@ var AgentCard = ({
                 rows: 2,
                 placeholder: "Describe this agent..."
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed", children: agent.description }) }),
-            isEditing && /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold", children: "Avatar:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed", children: agent.description }) }),
+            isEditing && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold", children: "Avatar:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 "input",
                 {
                   type: "text",
@@ -37153,8 +37669,8 @@ var AgentCard = ({
               )
             ] })
           ] }),
-          editable && onSave && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex items-center gap-1.5 shrink-0", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          editable && onSave && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "flex items-center gap-1.5 shrink-0", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
               "button",
               {
                 onClick: handleCancel,
@@ -37163,7 +37679,7 @@ var AgentCard = ({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
               "button",
               {
                 onClick: handleSave,
@@ -37172,7 +37688,7 @@ var AgentCard = ({
                 children: isSaving ? "Saving..." : "Save"
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
             "button",
             {
               onClick: handleEdit,
@@ -37181,18 +37697,18 @@ var AgentCard = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-3 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("span", { className: "text-[var(--foreground)]/40", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-3 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { className: "text-[var(--foreground)]/40", children: [
           "Model:",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "font-mono text-[var(--foreground)]/70", children: agent.model })
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "font-mono text-[var(--foreground)]/70", children: agent.model })
         ] }) }),
-        agent.tools && agent.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-2", children: [
+        agent.tools && agent.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-2", children: [
             "Tools (",
             agent.tools.length,
             ")"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
             "span",
             {
               className: "text-[11px] px-2 py-0.5 rounded-md bg-interactive/10 text-interactive font-mono border border-interactive/20",
@@ -37207,7 +37723,7 @@ var AgentCard = ({
 };
 
 // src/molecules/agent-builder/AgentDataTable/AgentDataTable.tsx
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var AgentDataTable = ({
   headers,
   rows,
@@ -37215,7 +37731,7 @@ var AgentDataTable = ({
 }) => {
   const renderCell = (value) => {
     if (typeof value === "boolean") {
-      return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
         "span",
         {
           className: cn(
@@ -37223,7 +37739,7 @@ var AgentDataTable = ({
             value ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
               "span",
               {
                 className: cn(
@@ -37237,17 +37753,17 @@ var AgentDataTable = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "text-[var(--foreground)]", children: String(value) });
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-[var(--foreground)]", children: String(value) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "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__ */ (0, import_jsx_runtime124.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("table", { className: "w-full text-xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("tr", { className: "border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("table", { className: "w-full text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tr", { className: "border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
           "th",
           {
             className: "text-left px-4 py-2.5 text-[11px] font-semibold text-[var(--foreground)]/60 uppercase tracking-wide whitespace-nowrap",
@@ -37255,11 +37771,11 @@ var AgentDataTable = ({
           },
           header
         )) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
           "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__ */ (0, import_jsx_runtime124.jsx)(
+            children: row.map((cell, cellIdx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
               "td",
               {
                 className: "px-4 py-2.5 text-xs whitespace-nowrap",
@@ -37276,14 +37792,14 @@ var AgentDataTable = ({
 };
 
 // src/molecules/agent-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
-var import_react66 = require("react");
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_react70 = require("react");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var WorkflowVisualizer = ({
   steps,
   className
 }) => {
-  const [expandedStep, setExpandedStep] = (0, import_react66.useState)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+  const [expandedStep, setExpandedStep] = (0, import_react70.useState)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
     "div",
     {
       className: cn(
@@ -37291,8 +37807,8 @@ var WorkflowVisualizer = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("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__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("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__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
             "svg",
             {
               width: "14",
@@ -37304,24 +37820,24 @@ var WorkflowVisualizer = ({
               className: "text-interactive",
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Workflow" }),
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("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__ */ (0, import_jsx_runtime130.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Workflow" }),
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("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__ */ (0, import_jsx_runtime125.jsx)("div", { className: "px-4 py-3", children: steps.map((step, idx) => {
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "px-4 py-3", children: steps.map((step, idx) => {
           const isLast = idx === steps.length - 1;
           const isExpanded = expandedStep === step.id;
-          return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-7 h-7 rounded-full bg-interactive/10 border-2 border-interactive/30 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[10px] font-bold text-interactive", children: idx + 1 }) }),
-              !isLast && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-0.5 flex-1 min-h-[16px] bg-interactive/15" })
+          return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-7 h-7 rounded-full bg-interactive/10 border-2 border-interactive/30 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-[10px] font-bold text-interactive", children: idx + 1 }) }),
+              !isLast && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-0.5 flex-1 min-h-[16px] bg-interactive/15" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
               "div",
               {
                 className: cn(
@@ -37329,20 +37845,20 @@ var WorkflowVisualizer = ({
                   isExpanded ? "bg-[var(--foreground)]/[0.02]" : "hover:bg-[var(--foreground)]/[0.02]"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                     "button",
                     {
                       onClick: () => setExpandedStep(isExpanded ? null : step.id),
                       className: "w-full text-left px-3 py-2.5 flex items-center gap-2",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: step.name }),
-                          step.description && !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("span", { className: "text-xs text-[var(--foreground)]/40 ml-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: step.name }),
+                          step.description && !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("span", { className: "text-xs text-[var(--foreground)]/40 ml-2", children: [
                             "\u2014 ",
                             step.description
                           ] })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           "svg",
                           {
                             width: "12",
@@ -37355,28 +37871,28 @@ var WorkflowVisualizer = ({
                               "shrink-0 text-[var(--foreground)]/30 transition-transform",
                               isExpanded && "rotate-180"
                             ),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("polyline", { points: "6 9 12 15 18 9" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("polyline", { points: "6 9 12 15 18 9" })
                           }
                         )
                       ]
                     }
                   ),
-                  isExpanded && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "px-3 pb-3 space-y-2.5", children: [
-                    step.description && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed", children: step.description }),
-                    step.sub_steps && step.sub_steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "space-y-1", children: step.sub_steps.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+                  isExpanded && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "px-3 pb-3 space-y-2.5", children: [
+                    step.description && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed", children: step.description }),
+                    step.sub_steps && step.sub_steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "space-y-1", children: step.sub_steps.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                       "div",
                       {
                         className: "flex items-start gap-2 text-xs",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-interactive/40" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[var(--foreground)]/60", children: sub.action })
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-interactive/40" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-[var(--foreground)]/60", children: sub.action })
                         ]
                       },
                       sub.id
                     )) }),
-                    step.tools && step.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold tracking-wider", children: "Tools:" }),
-                      step.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+                    step.tools && step.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold tracking-wider", children: "Tools:" }),
+                      step.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                         "span",
                         {
                           className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
@@ -37385,9 +37901,9 @@ var WorkflowVisualizer = ({
                         tool
                       ))
                     ] }),
-                    step.on_failure && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("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__ */ (0, import_jsx_runtime125.jsx)("span", { className: "shrink-0 text-[10px] font-semibold text-[#ef4444]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[var(--foreground)]/50", children: step.on_failure })
+                    step.on_failure && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("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__ */ (0, import_jsx_runtime130.jsx)("span", { className: "shrink-0 text-[10px] font-semibold text-[#ef4444]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-[var(--foreground)]/50", children: step.on_failure })
                     ] })
                   ] })
                 ]
@@ -37401,8 +37917,8 @@ var WorkflowVisualizer = ({
 };
 
 // src/molecules/agent-builder/InstructionPreview/InstructionPreview.tsx
-var import_react67 = require("react");
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_react71 = require("react");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var InstructionPreview = ({
   agent_name,
   description,
@@ -37411,11 +37927,11 @@ var InstructionPreview = ({
   tools,
   className
 }) => {
-  const [isExpanded, setIsExpanded] = (0, import_react67.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react71.useState)(false);
   const previewLength = 300;
   const isLong = instruction.length > previewLength;
   const displayText = isExpanded || !isLong ? instruction : instruction.slice(0, previewLength) + "...";
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
     "div",
     {
       className: cn(
@@ -37423,8 +37939,8 @@ var InstructionPreview = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
             "svg",
             {
               width: "14",
@@ -37437,24 +37953,24 @@ var InstructionPreview = ({
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("polyline", { points: "14 2 14 8 20 8" }),
-                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
-                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
-                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("polyline", { points: "10 9 9 9 8 9" })
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("polyline", { points: "10 9 9 9 8 9" })
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: agent_name }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { className: "text-[11px] text-[var(--foreground)]/40 mt-0.5", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: agent_name }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-[11px] text-[var(--foreground)]/40 mt-0.5", children: description })
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "px-4 py-3 space-y-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Instruction" }),
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("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__ */ (0, import_jsx_runtime126.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "px-4 py-3 space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Instruction" }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("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__ */ (0, import_jsx_runtime131.jsx)(
               "button",
               {
                 onClick: () => setIsExpanded(!isExpanded),
@@ -37463,16 +37979,16 @@ var InstructionPreview = ({
               }
             )
           ] }),
-          workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "space-y-1", children: workflow_summary.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex items-start gap-2 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("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__ */ (0, import_jsx_runtime126.jsx)("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
+          workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "space-y-1", children: workflow_summary.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-start gap-2 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("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__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
             ] }, idx)) })
           ] }),
-          tools && tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Tools" }),
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+          tools && tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Tools" }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
               "span",
               {
                 className: "text-[10px] font-mono px-2 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
@@ -37488,16 +38004,16 @@ var InstructionPreview = ({
 };
 
 // src/molecules/agent-builder/UIComponentSelector/UIComponentSelector.tsx
-var import_react68 = require("react");
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_react72 = require("react");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 function UIComponentSelector({
   components,
   onSelect,
   onPreview,
   className
 }) {
-  const [selected, setSelected] = (0, import_react68.useState)(/* @__PURE__ */ new Set());
-  const [submitted, setSubmitted] = (0, import_react68.useState)(false);
+  const [selected, setSelected] = (0, import_react72.useState)(/* @__PURE__ */ new Set());
+  const [submitted, setSubmitted] = (0, import_react72.useState)(false);
   const grouped = components.reduce(
     (acc, comp) => {
       const cat = comp.category || "Other";
@@ -37521,7 +38037,7 @@ function UIComponentSelector({
     onSelect?.(Array.from(selected));
   };
   const categoryOrder = Object.keys(grouped).sort();
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
     "div",
     {
       className: cn(
@@ -37529,13 +38045,13 @@ function UIComponentSelector({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "px-4 py-3 border-b border-border bg-muted/50", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: "Select UI Components" }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4 py-3 border-b border-border bg-muted/50", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: "Select UI Components" }),
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2", children: category }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2", children: category }),
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
             "label",
             {
               className: cn(
@@ -37545,7 +38061,7 @@ function UIComponentSelector({
                 selected.has(comp.name) && submitted && "bg-interactive/5"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -37555,10 +38071,10 @@ function UIComponentSelector({
                     className: "mt-0.5 h-4 w-4 rounded border-border text-interactive focus:ring-interactive/50 disabled:opacity-50"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
-                    onPreview && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
+                    onPreview && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                       "button",
                       {
                         type: "button",
@@ -37569,7 +38085,7 @@ function UIComponentSelector({
                         },
                         className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
                         title: `Preview ${comp.display_name}`,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
                           "svg",
                           {
                             width: "14",
@@ -37582,28 +38098,28 @@ function UIComponentSelector({
                             strokeLinejoin: "round",
                             className: "text-muted-foreground hover:text-primary",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+                              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
                             ]
                           }
                         )
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
                 ] })
               ]
             },
             comp.name
           )) })
         ] }, category)) }),
-        !submitted && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "px-4 py-3 border-t border-border flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+        !submitted && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4 py-3 border-t border-border flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
             selected.size,
             " selected"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
             "button",
             {
               onClick: handleContinue,
@@ -37618,7 +38134,7 @@ function UIComponentSelector({
 }
 
 // src/molecules/agent-builder/MultiAgentCard/MultiAgentCard.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var MultiAgentCard = ({
   name,
   display_name,
@@ -37628,7 +38144,7 @@ var MultiAgentCard = ({
   className
 }) => {
   const avatarUrl = `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     "div",
     {
       className: cn(
@@ -37636,14 +38152,14 @@ var MultiAgentCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("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__ */ (0, import_jsx_runtime128.jsx)("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("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__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("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__ */ (0, import_jsx_runtime133.jsx)("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("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__ */ (0, import_jsx_runtime133.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                 "span",
                 {
                   className: cn(
@@ -37654,18 +38170,18 @@ var MultiAgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed mt-1 whitespace-normal", style: { textWrap: "auto" }, children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed mt-1 whitespace-normal", style: { textWrap: "auto" }, children: description })
           ] })
         ] }),
-        stages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-3", children: [
+        stages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-3", children: [
             "Stages (",
             stages.length,
             ")"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-stretch", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex flex-col items-center mr-3 w-5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex flex-col items-center mr-3 w-5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                 "div",
                 {
                   className: cn(
@@ -37675,20 +38191,20 @@ var MultiAgentCard = ({
                   children: idx + 1
                 }
               ),
-              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[16px]" })
+              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[16px]" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 mb-2 p-3 rounded-lg border border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[10px] font-mono text-[var(--foreground)]/30", children: stage.agent_name })
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex-1 mb-2 p-3 rounded-lg border border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "text-[10px] font-mono text-[var(--foreground)]/30", children: stage.agent_name })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-3 mt-1.5 text-[10px] text-[var(--foreground)]/50", children: [
-                stage.tools && stage.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex items-center gap-3 mt-1.5 text-[10px] text-[var(--foreground)]/50", children: [
+                stage.tools && stage.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("span", { children: [
                   stage.tools.length,
                   " tool",
                   stage.tools.length !== 1 ? "s" : ""
                 ] }),
-                stage.ui_components && stage.ui_components.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { children: [
+                stage.ui_components && stage.ui_components.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("span", { children: [
                   stage.ui_components.length,
                   " component",
                   stage.ui_components.length !== 1 ? "s" : ""
@@ -37703,12 +38219,12 @@ var MultiAgentCard = ({
 };
 
 // src/molecules/agent-builder/MultiAgentPlan/MultiAgentPlan.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var MultiAgentPlan = ({
   stages = [],
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
     "div",
     {
       className: cn(
@@ -37716,8 +38232,8 @@ var MultiAgentPlan = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-4 h-4 rounded bg-violet-500/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "w-4 h-4 rounded bg-violet-500/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
             "svg",
             {
               width: "10",
@@ -37727,20 +38243,20 @@ var MultiAgentPlan = ({
               stroke: "currentColor",
               strokeWidth: "2",
               className: "text-violet-600",
-              children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("path", { d: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("path", { d: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "Proposed Multi-Agent Workflow" }),
-          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 font-medium", children: "Draft" })
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "Proposed Multi-Agent Workflow" }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 font-medium", children: "Draft" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex items-stretch min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col items-center mr-3 w-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("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__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[12px]" })
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-stretch min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex flex-col items-center mr-3 w-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("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__ */ (0, import_jsx_runtime134.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[12px]" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
-            stage.description && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
+            stage.description && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "p",
               {
                 className: "text-[11px] text-foreground/50 mt-0.5 whitespace-normal",
@@ -37748,7 +38264,7 @@ var MultiAgentPlan = ({
                 children: stage.description
               }
             ),
-            stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "span",
               {
                 className: "text-[10px] px-1.5 py-0.5 rounded bg-interactive/10 text-interactive font-mono",
@@ -37764,8 +38280,8 @@ var MultiAgentPlan = ({
 };
 
 // src/molecules/agent-builder/MultiAgentUISelector/MultiAgentUISelector.tsx
-var import_react69 = require("react");
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_react73 = require("react");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var MultiAgentUISelector = ({
   stages = [],
   components = [],
@@ -37773,8 +38289,8 @@ var MultiAgentUISelector = ({
   onPreview,
   className
 }) => {
-  const [activeStageId, setActiveStageId] = (0, import_react69.useState)(stages[0]?.id || "");
-  const [selections, setSelections] = (0, import_react69.useState)(
+  const [activeStageId, setActiveStageId] = (0, import_react73.useState)(stages[0]?.id || "");
+  const [selections, setSelections] = (0, import_react73.useState)(
     () => {
       const init = {};
       for (const stage of stages) {
@@ -37783,14 +38299,14 @@ var MultiAgentUISelector = ({
       return init;
     }
   );
-  const [submitted, setSubmitted] = (0, import_react69.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react73.useState)(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 = (0, import_react69.useCallback)(
+  const toggleComponent = (0, import_react73.useCallback)(
     (stageId, compName) => {
       if (submitted) return;
       setSelections((prev) => {
@@ -37807,7 +38323,7 @@ var MultiAgentUISelector = ({
     },
     [submitted]
   );
-  const handleContinue = (0, import_react69.useCallback)(() => {
+  const handleContinue = (0, import_react73.useCallback)(() => {
     setSubmitted(true);
     if (onSelect) {
       const result = {};
@@ -37818,7 +38334,7 @@ var MultiAgentUISelector = ({
     }
   }, [onSelect, selections]);
   const activeStage = stages.find((s) => s.id === activeStageId);
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
     "div",
     {
       className: cn(
@@ -37826,8 +38342,8 @@ var MultiAgentUISelector = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-4 h-4 rounded bg-interactive/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "w-4 h-4 rounded bg-interactive/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
             "svg",
             {
               width: "10",
@@ -37838,16 +38354,16 @@ var MultiAgentUISelector = ({
               strokeWidth: "2",
               className: "text-interactive",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" })
+                /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" })
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex border-b border-[var(--border-color)] px-4", children: stages.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex border-b border-[var(--border-color)] px-4", children: stages.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
           "button",
           {
             onClick: () => setActiveStageId(stage.id),
@@ -37861,38 +38377,45 @@ var MultiAgentUISelector = ({
           },
           stage.id
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "px-4 py-3", children: [
-          activeStage && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("p", { className: "text-[10px] text-[var(--foreground)]/40 mb-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "px-4 py-3", children: [
+          activeStage && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("p", { className: "text-[10px] text-[var(--foreground)]/40 mb-3", children: [
             "Select components for ",
-            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("strong", { children: activeStage.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("strong", { children: activeStage.name }),
             " (",
             activeStage.agent_name,
             ")"
           ] }),
-          Object.entries(grouped).map(([category, comps]) => /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "mb-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-1.5", children: category }),
-            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "grid grid-cols-2 gap-1.5", children: comps.map((comp) => {
+          Object.entries(grouped).map(([category, comps]) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "mb-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-1.5", children: category }),
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "grid grid-cols-2 gap-1.5", children: comps.map((comp) => {
               const isSelected = selections[activeStageId]?.has(comp.name) || false;
-              return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
-                "button",
+              return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+                "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__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                         "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__ */ (0, import_jsx_runtime130.jsx)(
+                          children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                             "svg",
                             {
                               width: "8",
@@ -37901,13 +38424,13 @@ var MultiAgentUISelector = ({
                               fill: "none",
                               stroke: "white",
                               strokeWidth: "3",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("polyline", { points: "20 6 9 17 4 12" })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("polyline", { points: "20 6 9 17 4 12" })
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
-                      onPreview && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
+                      onPreview && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                         "button",
                         {
                           type: "button",
@@ -37917,7 +38440,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__ */ (0, import_jsx_runtime130.jsxs)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
                             "svg",
                             {
                               width: "14",
@@ -37930,16 +38453,16 @@ var MultiAgentUISelector = ({
                               strokeLinejoin: "round",
                               className: "text-[var(--foreground)]/40 hover:text-[var(--primary-color)]",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+                                /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
                               ]
                             }
                           )
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
+                    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
                   ]
                 },
                 comp.name
@@ -37947,7 +38470,7 @@ var MultiAgentUISelector = ({
             }) })
           ] }, category))
         ] }),
-        !submitted && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+        !submitted && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
           "button",
           {
             onClick: handleContinue,
@@ -37955,20 +38478,20 @@ var MultiAgentUISelector = ({
             children: "Continue"
           }
         ) }),
-        submitted && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5 ", children: "Selections confirmed" }) })
+        submitted && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5 ", children: "Selections confirmed" }) })
       ]
     }
   );
 };
 
 // src/molecules/agent-builder/StageIndicator/StageIndicator.tsx
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 var StageIndicator = ({
   stage_name,
   agent_name,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
     "div",
     {
       className: cn(
@@ -37976,12 +38499,12 @@ var StageIndicator = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("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__ */ (0, import_jsx_runtime131.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-[10px] font-medium text-violet-600", children: stage_name || agent_name })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("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__ */ (0, import_jsx_runtime136.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "text-[10px] font-medium text-violet-600", children: stage_name || agent_name })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" })
       ]
     }
   );
@@ -38279,7 +38802,7 @@ __export(ui_exports, {
 // src/components/ui/button-group.tsx
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 var buttonGroupVariants = (0, import_class_variance_authority8.cva)(
   "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",
   {
@@ -38299,7 +38822,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     "div",
     {
       role: "group",
@@ -38316,7 +38839,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? import_react_slot4.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     Comp,
     {
       className: cn(
@@ -38332,7 +38855,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     Separator2,
     {
       "data-slot": "button-group-separator",
@@ -38348,9 +38871,9 @@ function ButtonGroupSeparator({
 
 // src/components/ui/empty.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       "data-slot": "empty",
@@ -38363,7 +38886,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       "data-slot": "empty-header",
@@ -38394,7 +38917,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       "data-slot": "empty-icon",
@@ -38405,7 +38928,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       "data-slot": "empty-title",
@@ -38415,7 +38938,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       "data-slot": "empty-description",
@@ -38428,7 +38951,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       "data-slot": "empty-content",
@@ -38442,11 +38965,11 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-var import_react70 = require("react");
+var import_react74 = require("react");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -38464,7 +38987,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     "legend",
     {
       "data-slot": "field-legend",
@@ -38480,7 +39003,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     "div",
     {
       "data-slot": "field-group",
@@ -38520,7 +39043,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     "div",
     {
       role: "group",
@@ -38532,7 +39055,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     "div",
     {
       "data-slot": "field-content",
@@ -38548,7 +39071,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     Label,
     {
       "data-slot": "field-label",
@@ -38563,7 +39086,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     "div",
     {
       "data-slot": "field-label",
@@ -38576,7 +39099,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     "p",
     {
       "data-slot": "field-description",
@@ -38595,7 +39118,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
     "div",
     {
       "data-slot": "field-separator",
@@ -38606,8 +39129,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
           "span",
           {
             className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
@@ -38625,7 +39148,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = (0, import_react70.useMemo)(() => {
+  const content = (0, import_react74.useMemo)(() => {
     if (children) {
       return children;
     }
@@ -38635,14 +39158,14 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
-      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("li", { children: error.message }, index)
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     "div",
     {
       role: "alert",
@@ -38656,9 +39179,9 @@ function FieldError({
 
 // src/components/ui/input-group.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
     "div",
     {
       "data-slot": "input-group",
@@ -38702,7 +39225,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
     "div",
     {
       role: "group",
@@ -38742,7 +39265,7 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
     Button,
     {
       type,
@@ -38754,7 +39277,7 @@ function InputGroupButton({
   );
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
     "span",
     {
       className: cn(
@@ -38769,7 +39292,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
     Input,
     {
       "data-slot": "input-group-control",
@@ -38785,7 +39308,7 @@ function InputGroupTextarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -38801,9 +39324,9 @@ function InputGroupTextarea({
 // src/components/ui/item.tsx
 var import_react_slot5 = require("@radix-ui/react-slot");
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime141 = require("react/jsx-runtime");
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     "div",
     {
       role: "list",
@@ -38817,7 +39340,7 @@ function ItemSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     Separator2,
     {
       "data-slot": "item-separator",
@@ -38855,7 +39378,7 @@ function Item8({
   ...props
 }) {
   const Comp = asChild ? import_react_slot5.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     Comp,
     {
       "data-slot": "item",
@@ -38886,7 +39409,7 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     "div",
     {
       "data-slot": "item-media",
@@ -38897,7 +39420,7 @@ function ItemMedia({
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     "div",
     {
       "data-slot": "item-content",
@@ -38910,7 +39433,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     "div",
     {
       "data-slot": "item-title",
@@ -38923,7 +39446,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     "p",
     {
       "data-slot": "item-description",
@@ -38937,7 +39460,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     "div",
     {
       "data-slot": "item-actions",
@@ -38947,7 +39470,7 @@ function ItemActions({ className, ...props }) {
   );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     "div",
     {
       "data-slot": "item-header",
@@ -38960,7 +39483,7 @@ function ItemHeader({ className, ...props }) {
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     "div",
     {
       "data-slot": "item-footer",
@@ -38974,9 +39497,9 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/kbd.tsx
-var import_jsx_runtime137 = require("react/jsx-runtime");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
     "kbd",
     {
       "data-slot": "kbd",
@@ -38991,7 +39514,7 @@ function Kbd({ className, ...props }) {
   );
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
     "kbd",
     {
       "data-slot": "kbd-group",
@@ -39024,7 +39547,7 @@ function useIsMobile() {
 }
 
 // src/components/ui/sidebar.tsx
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime143 = require("react/jsx-runtime");
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
@@ -39091,7 +39614,7 @@ var SidebarProvider = React100.forwardRef(
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
       "div",
       {
         style: {
@@ -39122,7 +39645,7 @@ var Sidebar = React100.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
         "div",
         {
           className: cn(
@@ -39136,7 +39659,7 @@ var Sidebar = React100.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -39147,16 +39670,16 @@ var Sidebar = React100.forwardRef(
           },
           side,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex h-full w-full flex-col", children })
+            /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "flex h-full w-full flex-col", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
       "div",
       {
         ref,
@@ -39166,7 +39689,7 @@ var Sidebar = React100.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
             "div",
             {
               className: cn(
@@ -39177,7 +39700,7 @@ var Sidebar = React100.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
             "div",
             {
               className: cn(
@@ -39188,7 +39711,7 @@ var Sidebar = React100.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -39206,7 +39729,7 @@ var Sidebar = React100.forwardRef(
 Sidebar.displayName = "Sidebar";
 var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
     Button,
     {
       ref,
@@ -39220,8 +39743,8 @@ var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(PanelLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(PanelLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
@@ -39229,7 +39752,7 @@ var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref)
 SidebarTrigger.displayName = "SidebarTrigger";
 var SidebarRail = React100.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     "button",
     {
       ref,
@@ -39253,7 +39776,7 @@ var SidebarRail = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarRail.displayName = "SidebarRail";
 var SidebarInset = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     "main",
     {
       ref,
@@ -39268,7 +39791,7 @@ var SidebarInset = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInset.displayName = "SidebarInset";
 var SidebarInput = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     Input,
     {
       ref,
@@ -39283,7 +39806,7 @@ var SidebarInput = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInput.displayName = "SidebarInput";
 var SidebarHeader = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     "div",
     {
       ref,
@@ -39295,7 +39818,7 @@ var SidebarHeader = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarFooter = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     "div",
     {
       ref,
@@ -39307,7 +39830,7 @@ var SidebarFooter = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarFooter.displayName = "SidebarFooter";
 var SidebarSeparator = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     Separator2,
     {
       ref,
@@ -39319,7 +39842,7 @@ var SidebarSeparator = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarSeparator.displayName = "SidebarSeparator";
 var SidebarContent = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     "div",
     {
       ref,
@@ -39334,7 +39857,7 @@ var SidebarContent = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarContent.displayName = "SidebarContent";
 var SidebarGroup = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     "div",
     {
       ref,
@@ -39347,7 +39870,7 @@ var SidebarGroup = React100.forwardRef(({ className, ...props }, ref) => {
 SidebarGroup.displayName = "SidebarGroup";
 var SidebarGroupLabel = React100.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     Comp,
     {
       ref,
@@ -39364,7 +39887,7 @@ var SidebarGroupLabel = React100.forwardRef(({ className, asChild = false, ...pr
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
 var SidebarGroupAction = React100.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     Comp,
     {
       ref,
@@ -39381,7 +39904,7 @@ var SidebarGroupAction = React100.forwardRef(({ className, asChild = false, ...p
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
   "div",
   {
     ref,
@@ -39391,7 +39914,7 @@ var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
   "ul",
   {
     ref,
@@ -39401,7 +39924,7 @@ var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+var SidebarMenuItem = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
   "li",
   {
     ref,
@@ -39443,7 +39966,7 @@ var SidebarMenuButton = React100.forwardRef(
   }, ref) => {
     const Comp = asChild ? import_react_slot6.Slot : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
       Comp,
       {
         ref,
@@ -39462,9 +39985,9 @@ var SidebarMenuButton = React100.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
         TooltipContent,
         {
           side: "right",
@@ -39479,7 +40002,7 @@ var SidebarMenuButton = React100.forwardRef(
 SidebarMenuButton.displayName = "SidebarMenuButton";
 var SidebarMenuAction = React100.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     Comp,
     {
       ref,
@@ -39500,7 +40023,7 @@ var SidebarMenuAction = React100.forwardRef(({ className, asChild = false, showO
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+var SidebarMenuBadge = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
   "div",
   {
     ref,
@@ -39522,7 +40045,7 @@ var SidebarMenuSkeleton = React100.forwardRef(({ className, showIcon = false, ..
   const width = React100.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
     "div",
     {
       ref,
@@ -39530,14 +40053,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__ */ (0, import_jsx_runtime138.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
           Skeleton,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
@@ -39552,7 +40075,7 @@ var SidebarMenuSkeleton = React100.forwardRef(({ className, showIcon = false, ..
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
   "ul",
   {
     ref,
@@ -39566,11 +40089,11 @@ var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React100.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("li", { ref, ...props }));
+var SidebarMenuSubItem = React100.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 var SidebarMenuSubButton = React100.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     Comp,
     {
       ref,
@@ -39594,20 +40117,20 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner = require("sonner");
-var import_jsx_runtime139 = require("react/jsx-runtime");
+var import_jsx_runtime144 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = (0, import_next_themes.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
     import_sonner.Toaster,
     {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(CircleCheck, { className: "h-4 w-4" }),
+        info: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Info, { className: "h-4 w-4" }),
+        warning: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(TriangleAlert, { className: "h-4 w-4" }),
+        error: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(OctagonX, { className: "h-4 w-4" }),
+        loading: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -39625,24 +40148,24 @@ var Toaster = ({ ...props }) => {
 // src/components/ui/toggle-group.tsx
 var React101 = __toESM(require("react"), 1);
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime145 = require("react/jsx-runtime");
 var ToggleGroupContext = React101.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React101.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+var ToggleGroup = React101.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(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__ */ (0, import_jsx_runtime140.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -39661,7 +40184,7 @@ var ToggleGroupItem = React101.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
-var import_jsx_runtime141 = require("react/jsx-runtime");
+var import_jsx_runtime146 = require("react/jsx-runtime");
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -39753,24 +40276,24 @@ var COMPONENT_SUGGESTIONS = {
 };
 var renderContextDependentError = (componentName, normalizedName, key) => {
   const suggestion = COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom (if available)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
     "div",
     {
       className: "p-4 border-2 border-amber-500/50 rounded-lg bg-amber-50/80 space-y-2 my-2",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
               "Invalid Component: ",
               componentName
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
+            /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
         ] })
       ]
     },
@@ -39850,7 +40373,7 @@ var PXEngineRenderer = ({
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
-    if (import_react71.default.isValidElement(component)) {
+    if (import_react75.default.isValidElement(component)) {
       return component;
     }
     if (!component || typeof component !== "object") return null;
@@ -39929,7 +40452,7 @@ var PXEngineRenderer = ({
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
-      return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -39941,7 +40464,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -39953,7 +40476,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -40048,9 +40571,14 @@ var PXEngineRenderer = ({
   CountrySelectDisplay,
   CountrySelectEdit,
   CreatorActionHeader,
+  CreatorCompactView,
   CreatorGridCard,
+  CreatorImageList,
   CreatorProfileSummary,
+  CreatorProgressBar,
   CreatorSearch,
+  CreatorWidget,
+  CreatorWidgetSkeleton,
   DataGrid,
   Dialog,
   DialogAtom,
@@ -40228,7 +40756,8 @@ var PXEngineRenderer = ({
   UIComponentSelector,
   VideoAtom,
   WorkflowVisualizer,
-  cn
+  cn,
+  useCreatorWidgetPolling
 });
 /*! Bundled license information: