pxengine 0.1.46 → 0.1.48

package/dist/index.cjs

@@ -122,6 +122,7 @@ __export(index_exports, {
   CountrySelectEdit: () => CountrySelectEdit,
   CreatorActionHeader: () => CreatorActionHeader,
   CreatorCompactView: () => CreatorCompactView,
+  CreatorExpandedPanel: () => CreatorExpandedPanel,
   CreatorGridCard: () => CreatorGridCard,
   CreatorImageList: () => CreatorImageList,
   CreatorProfileSummary: () => CreatorProfileSummary,
@@ -307,6 +308,8 @@ __export(index_exports, {
   VideoAtom: () => VideoAtom,
   WorkflowVisualizer: () => WorkflowVisualizer,
   cn: () => cn,
+  defaultFetchSelections: () => defaultFetchSelections,
+  defaultPersistSelection: () => defaultPersistSelection,
   generateFieldsFromData: () => generateFieldsFromData,
   generateFieldsFromPropDefinitions: () => generateFieldsFromPropDefinitions,
   useCreatorWidgetPolling: () => useCreatorWidgetPolling
@@ -314,7 +317,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/render/PXEngineRenderer.tsx
-var import_react75 = __toESM(require("react"), 1);
+var import_react79 = __toESM(require("react"), 1);
 
 // src/atoms/index.ts
 var atoms_exports = {};
@@ -33598,6 +33601,7 @@ __export(molecules_exports, {
   CountrySelectEdit: () => CountrySelectEdit,
   CreatorActionHeader: () => CreatorActionHeader,
   CreatorCompactView: () => CreatorCompactView,
+  CreatorExpandedPanel: () => CreatorExpandedPanel,
   CreatorGridCard: () => CreatorGridCard,
   CreatorImageList: () => CreatorImageList,
   CreatorProfileSummary: () => CreatorProfileSummary,
@@ -33633,6 +33637,8 @@ __export(molecules_exports, {
   TopPostsGrid: () => TopPostsGrid,
   UIComponentSelector: () => UIComponentSelector,
   WorkflowVisualizer: () => WorkflowVisualizer,
+  defaultFetchSelections: () => defaultFetchSelections,
+  defaultPersistSelection: () => defaultPersistSelection,
   useCreatorWidgetPolling: () => useCreatorWidgetPolling
 });
 
@@ -35705,12 +35711,16 @@ var CampaignSeedCard = import_react60.default.memo(
     fields: providedFields,
     data,
     onAction,
+    sendMessage,
     ...formCardProps
   }) => {
     const fields = (0, import_react60.useMemo)(() => {
       return providedFields || buildCampaignSeedFields(data);
     }, [providedFields, data]);
     const handleProceed = () => {
+      if (sendMessage) {
+        sendMessage("Continue to concepts");
+      }
       onAction?.({
         type: "brief_confirmation",
         value: "Continue to concepts",
@@ -35867,6 +35877,7 @@ var SearchSpecCard = import_react61.default.memo(
     data,
     specData,
     onAction,
+    sendMessage,
     ...formCardProps
   }) => {
     const resolvedData = data || specData;
@@ -35874,6 +35885,9 @@ var SearchSpecCard = import_react61.default.memo(
       return providedFields || buildSearchSpecFields(resolvedData ?? {});
     }, [providedFields, resolvedData]);
     const handleProceed = () => {
+      if (sendMessage) {
+        sendMessage("Continue with search");
+      }
       onAction?.({
         type: "search_spec_confirmation",
         value: "Continue with search",
@@ -35904,6 +35918,41 @@ SearchSpecCard.displayName = "SearchSpecCard";
 
 // src/molecules/creator-discovery/MCQCard/MCQCard.tsx
 var import_react62 = __toESM(require("react"), 1);
+
+// src/molecules/creator-discovery/MCQCard/defaultFetchers.ts
+async function defaultFetchSelections(sessionId) {
+  try {
+    const res = await fetch(
+      `/api/agents-proxy/custom-agents/sessions/${sessionId}/mcq-selections/get`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: "{}"
+      }
+    );
+    if (!res.ok) return {};
+    const data = await res.json();
+    return data.selections || {};
+  } catch {
+    return {};
+  }
+}
+async function defaultPersistSelection(sessionId, questionKey, value) {
+  try {
+    await fetch(
+      `/api/agents-proxy/custom-agents/sessions/${sessionId}/mcq-selections`,
+      {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ question_key: questionKey, value })
+      }
+    );
+  } catch (err) {
+    console.warn("[MCQ persist failed]", err);
+  }
+}
+
+// src/molecules/creator-discovery/MCQCard/MCQCard.tsx
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var MCQCard = import_react62.default.memo(
   ({
@@ -35916,22 +35965,39 @@ var MCQCard = import_react62.default.memo(
     isLatestMessage = true,
     isLoading = false,
     className,
-    // selectionStatus,
     onAction,
     disabled = false,
-    disableContinueInDiscovery
-    // optional prop
+    disableContinueInDiscovery,
+    // Self-contained props
+    sessionId,
+    sendMessage,
+    fetchSelections = defaultFetchSelections,
+    persistSelection = defaultPersistSelection
   }) => {
     const [selectedOption, setSelectedOption] = import_react62.default.useState(
       propsSelectedOption
     );
     const [isProceeded, setIsProceeded] = import_react62.default.useState(false);
+    const fetchedSessionRef = import_react62.default.useRef("");
     import_react62.default.useEffect(() => {
       if (propsSelectedOption) {
         setSelectedOption(propsSelectedOption);
         setIsProceeded(true);
       }
     }, [propsSelectedOption]);
+    import_react62.default.useEffect(() => {
+      if (!sessionId || fetchedSessionRef.current === sessionId) return;
+      if (propsSelectedOption) return;
+      fetchedSessionRef.current = sessionId;
+      const questionKey = question || "unknown";
+      fetchSelections(sessionId).then((selections) => {
+        const stored = selections[questionKey];
+        if (stored) {
+          setSelectedOption(stored);
+          setIsProceeded(true);
+        }
+      });
+    }, [sessionId, question, propsSelectedOption, fetchSelections]);
     const isDiscovery = disableContinueInDiscovery !== void 0 ? disableContinueInDiscovery : typeof window !== "undefined" && window.location.pathname.includes("creator-discovery");
     const handleOptionClick = (key, e) => {
       e.preventDefault();
@@ -35946,12 +36012,20 @@ var MCQCard = import_react62.default.memo(
       e.stopPropagation();
       if ((selectedOption || recommended) && !disabled && !isProceeded) {
         const result = selectedOption || recommended || "";
+        const label = options && options[result] || result;
         setIsProceeded(true);
+        if (sessionId) {
+          const questionKey = question || "unknown";
+          persistSelection(sessionId, questionKey, result);
+        }
+        if (sendMessage) {
+          sendMessage(`Selected: ${label}`);
+        }
         onProceed?.(result);
         onAction?.({
           type: "mcq_selection",
           value: result,
-          label: options && options[result] || result
+          label
         });
       }
     };
@@ -36956,7 +37030,7 @@ var CampaignConceptCard = import_react64.default.memo(
 CampaignConceptCard.displayName = "CampaignConceptCard";
 
 // src/molecules/creator-discovery/CreatorWidget/CreatorWidget.tsx
-var import_react68 = require("react");
+var import_react72 = require("react");
 
 // src/molecules/creator-discovery/CreatorWidget/CreatorImageList.tsx
 var import_react65 = require("react");
@@ -37214,8 +37288,1679 @@ function CreatorCompactView({
   ] }) });
 }
 
-// src/molecules/creator-discovery/CreatorWidget/useCreatorWidgetPolling.ts
+// src/molecules/creator-discovery/CreatorWidget/CreatorExpandedPanel.tsx
+var import_react70 = require("react");
+var import_react_dom2 = __toESM(require("react-dom"), 1);
+var import_framer_motion5 = require("framer-motion");
+
+// src/molecules/creator-discovery/CreatorWidget/defaultFetchers.ts
+async function defaultFetchVersions(params) {
+  const versionParam = params.version ? `&version=${params.version}` : "";
+  const res = await fetch(
+    `/api/get-creator-versions?sessionId=${params.sessionId}${versionParam}&validated=${params.validated}`
+  );
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+async function defaultFetchStatus(params) {
+  const res = await fetch(
+    `/api/get-creator-detail-status?session_id=${params.sessionId}&version_no=${params.versionNo}`
+  );
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+async function defaultFetchCreatorDetails(params) {
+  const res = await fetch("/api/get-creator-details-by-id", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      creator_ids: params.creatorIds,
+      session_id: params.sessionId,
+      version_no: params.versionNo
+    })
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+// src/molecules/creator-discovery/CreatorWidget/countries.ts
+var countries2 = [
+  { code: "AF", name: "Afghanistan", flag: "\u{1F1E6}\u{1F1EB}" },
+  { code: "AL", name: "Albania", flag: "\u{1F1E6}\u{1F1F1}" },
+  { code: "DZ", name: "Algeria", flag: "\u{1F1E9}\u{1F1FF}" },
+  { code: "AD", name: "Andorra", flag: "\u{1F1E6}\u{1F1E9}" },
+  { code: "AO", name: "Angola", flag: "\u{1F1E6}\u{1F1F4}" },
+  { code: "AG", name: "Antigua and Barbuda", flag: "\u{1F1E6}\u{1F1EC}" },
+  { code: "AR", name: "Argentina", flag: "\u{1F1E6}\u{1F1F7}" },
+  { code: "AM", name: "Armenia", flag: "\u{1F1E6}\u{1F1F2}" },
+  { code: "AU", name: "Australia", flag: "\u{1F1E6}\u{1F1FA}" },
+  { code: "AT", name: "Austria", flag: "\u{1F1E6}\u{1F1F9}" },
+  { code: "AZ", name: "Azerbaijan", flag: "\u{1F1E6}\u{1F1FF}" },
+  { code: "BS", name: "Bahamas", flag: "\u{1F1E7}\u{1F1F8}" },
+  { code: "BH", name: "Bahrain", flag: "\u{1F1E7}\u{1F1ED}" },
+  { code: "BD", name: "Bangladesh", flag: "\u{1F1E7}\u{1F1E9}" },
+  { code: "BB", name: "Barbados", flag: "\u{1F1E7}\u{1F1E7}" },
+  { code: "BY", name: "Belarus", flag: "\u{1F1E7}\u{1F1FE}" },
+  { code: "BE", name: "Belgium", flag: "\u{1F1E7}\u{1F1EA}" },
+  { code: "BZ", name: "Belize", flag: "\u{1F1E7}\u{1F1FF}" },
+  { code: "BJ", name: "Benin", flag: "\u{1F1E7}\u{1F1EF}" },
+  { code: "BT", name: "Bhutan", flag: "\u{1F1E7}\u{1F1F9}" },
+  { code: "BO", name: "Bolivia", flag: "\u{1F1E7}\u{1F1F4}" },
+  { code: "BA", name: "Bosnia and Herzegovina", flag: "\u{1F1E7}\u{1F1E6}" },
+  { code: "BW", name: "Botswana", flag: "\u{1F1E7}\u{1F1FC}" },
+  { code: "BR", name: "Brazil", flag: "\u{1F1E7}\u{1F1F7}" },
+  { code: "BN", name: "Brunei", flag: "\u{1F1E7}\u{1F1F3}" },
+  { code: "BG", name: "Bulgaria", flag: "\u{1F1E7}\u{1F1EC}" },
+  { code: "BF", name: "Burkina Faso", flag: "\u{1F1E7}\u{1F1EB}" },
+  { code: "BI", name: "Burundi", flag: "\u{1F1E7}\u{1F1EE}" },
+  { code: "CV", name: "Cabo Verde", flag: "\u{1F1E8}\u{1F1FB}" },
+  { code: "KH", name: "Cambodia", flag: "\u{1F1F0}\u{1F1ED}" },
+  { code: "CM", name: "Cameroon", flag: "\u{1F1E8}\u{1F1F2}" },
+  { code: "CA", name: "Canada", flag: "\u{1F1E8}\u{1F1E6}" },
+  { code: "CF", name: "Central African Republic", flag: "\u{1F1E8}\u{1F1EB}" },
+  { code: "TD", name: "Chad", flag: "\u{1F1F9}\u{1F1E9}" },
+  { code: "CL", name: "Chile", flag: "\u{1F1E8}\u{1F1F1}" },
+  { code: "CN", name: "China", flag: "\u{1F1E8}\u{1F1F3}" },
+  { code: "CO", name: "Colombia", flag: "\u{1F1E8}\u{1F1F4}" },
+  { code: "KM", name: "Comoros", flag: "\u{1F1F0}\u{1F1F2}" },
+  { code: "CG", name: "Congo", flag: "\u{1F1E8}\u{1F1EC}" },
+  { code: "CD", name: "Democratic Republic of the Congo", flag: "\u{1F1E8}\u{1F1E9}" },
+  { code: "CR", name: "Costa Rica", flag: "\u{1F1E8}\u{1F1F7}" },
+  { code: "HR", name: "Croatia", flag: "\u{1F1ED}\u{1F1F7}" },
+  { code: "CU", name: "Cuba", flag: "\u{1F1E8}\u{1F1FA}" },
+  { code: "CY", name: "Cyprus", flag: "\u{1F1E8}\u{1F1FE}" },
+  { code: "CZ", name: "Czech Republic", flag: "\u{1F1E8}\u{1F1FF}" },
+  { code: "CI", name: "Ivory Coast", flag: "\u{1F1E8}\u{1F1EE}" },
+  { code: "DK", name: "Denmark", flag: "\u{1F1E9}\u{1F1F0}" },
+  { code: "DJ", name: "Djibouti", flag: "\u{1F1E9}\u{1F1EF}" },
+  { code: "DM", name: "Dominica", flag: "\u{1F1E9}\u{1F1F2}" },
+  { code: "DO", name: "Dominican Republic", flag: "\u{1F1E9}\u{1F1F4}" },
+  { code: "EC", name: "Ecuador", flag: "\u{1F1EA}\u{1F1E8}" },
+  { code: "EG", name: "Egypt", flag: "\u{1F1EA}\u{1F1EC}" },
+  { code: "SV", name: "El Salvador", flag: "\u{1F1F8}\u{1F1FB}" },
+  { code: "GQ", name: "Equatorial Guinea", flag: "\u{1F1EC}\u{1F1F6}" },
+  { code: "ER", name: "Eritrea", flag: "\u{1F1EA}\u{1F1F7}" },
+  { code: "EE", name: "Estonia", flag: "\u{1F1EA}\u{1F1EA}" },
+  { code: "SZ", name: "Eswatini", flag: "\u{1F1F8}\u{1F1FF}" },
+  { code: "ET", name: "Ethiopia", flag: "\u{1F1EA}\u{1F1F9}" },
+  { code: "FJ", name: "Fiji", flag: "\u{1F1EB}\u{1F1EF}" },
+  { code: "FI", name: "Finland", flag: "\u{1F1EB}\u{1F1EE}" },
+  { code: "FR", name: "France", flag: "\u{1F1EB}\u{1F1F7}" },
+  { code: "GA", name: "Gabon", flag: "\u{1F1EC}\u{1F1E6}" },
+  { code: "GM", name: "Gambia", flag: "\u{1F1EC}\u{1F1F2}" },
+  { code: "GE", name: "Georgia", flag: "\u{1F1EC}\u{1F1EA}" },
+  { code: "DE", name: "Germany", flag: "\u{1F1E9}\u{1F1EA}" },
+  { code: "GH", name: "Ghana", flag: "\u{1F1EC}\u{1F1ED}" },
+  { code: "GR", name: "Greece", flag: "\u{1F1EC}\u{1F1F7}" },
+  { code: "GD", name: "Grenada", flag: "\u{1F1EC}\u{1F1E9}" },
+  { code: "GT", name: "Guatemala", flag: "\u{1F1EC}\u{1F1F9}" },
+  { code: "GN", name: "Guinea", flag: "\u{1F1EC}\u{1F1F3}" },
+  { code: "GW", name: "Guinea-Bissau", flag: "\u{1F1EC}\u{1F1FC}" },
+  { code: "GY", name: "Guyana", flag: "\u{1F1EC}\u{1F1FE}" },
+  { code: "HT", name: "Haiti", flag: "\u{1F1ED}\u{1F1F9}" },
+  { code: "HN", name: "Honduras", flag: "\u{1F1ED}\u{1F1F3}" },
+  { code: "HU", name: "Hungary", flag: "\u{1F1ED}\u{1F1FA}" },
+  { code: "HK", name: "Hong Kong", flag: "\u{1F1ED}\u{1F1F0}" },
+  { code: "IS", name: "Iceland", flag: "\u{1F1EE}\u{1F1F8}" },
+  { code: "IN", name: "India", flag: "\u{1F1EE}\u{1F1F3}" },
+  { code: "ID", name: "Indonesia", flag: "\u{1F1EE}\u{1F1E9}" },
+  { code: "IR", name: "Iran", flag: "\u{1F1EE}\u{1F1F7}" },
+  { code: "IQ", name: "Iraq", flag: "\u{1F1EE}\u{1F1F6}" },
+  { code: "IE", name: "Ireland", flag: "\u{1F1EE}\u{1F1EA}" },
+  { code: "IL", name: "Israel", flag: "\u{1F1EE}\u{1F1F1}" },
+  { code: "IT", name: "Italy", flag: "\u{1F1EE}\u{1F1F9}" },
+  { code: "JM", name: "Jamaica", flag: "\u{1F1EF}\u{1F1F2}" },
+  { code: "JP", name: "Japan", flag: "\u{1F1EF}\u{1F1F5}" },
+  { code: "JO", name: "Jordan", flag: "\u{1F1EF}\u{1F1F4}" },
+  { code: "KZ", name: "Kazakhstan", flag: "\u{1F1F0}\u{1F1FF}" },
+  { code: "KE", name: "Kenya", flag: "\u{1F1F0}\u{1F1EA}" },
+  { code: "KI", name: "Kiribati", flag: "\u{1F1F0}\u{1F1EE}" },
+  { code: "KP", name: "North Korea", flag: "\u{1F1F0}\u{1F1F5}" },
+  { code: "KR", name: "South Korea", flag: "\u{1F1F0}\u{1F1F7}" },
+  { code: "KW", name: "Kuwait", flag: "\u{1F1F0}\u{1F1FC}" },
+  { code: "KG", name: "Kyrgyzstan", flag: "\u{1F1F0}\u{1F1EC}" },
+  { code: "LA", name: "Laos", flag: "\u{1F1F1}\u{1F1E6}" },
+  { code: "LV", name: "Latvia", flag: "\u{1F1F1}\u{1F1FB}" },
+  { code: "LB", name: "Lebanon", flag: "\u{1F1F1}\u{1F1E7}" },
+  { code: "LS", name: "Lesotho", flag: "\u{1F1F1}\u{1F1F8}" },
+  { code: "LR", name: "Liberia", flag: "\u{1F1F1}\u{1F1F7}" },
+  { code: "LY", name: "Libya", flag: "\u{1F1F1}\u{1F1FE}" },
+  { code: "LI", name: "Liechtenstein", flag: "\u{1F1F1}\u{1F1EE}" },
+  { code: "LT", name: "Lithuania", flag: "\u{1F1F1}\u{1F1F9}" },
+  { code: "LU", name: "Luxembourg", flag: "\u{1F1F1}\u{1F1FA}" },
+  { code: "MG", name: "Madagascar", flag: "\u{1F1F2}\u{1F1EC}" },
+  { code: "MW", name: "Malawi", flag: "\u{1F1F2}\u{1F1FC}" },
+  { code: "MY", name: "Malaysia", flag: "\u{1F1F2}\u{1F1FE}" },
+  { code: "MV", name: "Maldives", flag: "\u{1F1F2}\u{1F1FB}" },
+  { code: "ML", name: "Mali", flag: "\u{1F1F2}\u{1F1F1}" },
+  { code: "MT", name: "Malta", flag: "\u{1F1F2}\u{1F1F9}" },
+  { code: "MH", name: "Marshall Islands", flag: "\u{1F1F2}\u{1F1ED}" },
+  { code: "MR", name: "Mauritania", flag: "\u{1F1F2}\u{1F1F7}" },
+  { code: "MU", name: "Mauritius", flag: "\u{1F1F2}\u{1F1FA}" },
+  { code: "MX", name: "Mexico", flag: "\u{1F1F2}\u{1F1FD}" },
+  { code: "FM", name: "Micronesia", flag: "\u{1F1EB}\u{1F1F2}" },
+  { code: "MD", name: "Moldova", flag: "\u{1F1F2}\u{1F1E9}" },
+  { code: "MC", name: "Monaco", flag: "\u{1F1F2}\u{1F1E8}" },
+  { code: "MN", name: "Mongolia", flag: "\u{1F1F2}\u{1F1F3}" },
+  { code: "ME", name: "Montenegro", flag: "\u{1F1F2}\u{1F1EA}" },
+  { code: "MA", name: "Morocco", flag: "\u{1F1F2}\u{1F1E6}" },
+  { code: "MZ", name: "Mozambique", flag: "\u{1F1F2}\u{1F1FF}" },
+  { code: "MM", name: "Myanmar", flag: "\u{1F1F2}\u{1F1F2}" },
+  { code: "NA", name: "Namibia", flag: "\u{1F1F3}\u{1F1E6}" },
+  { code: "NR", name: "Nauru", flag: "\u{1F1F3}\u{1F1F7}" },
+  { code: "NP", name: "Nepal", flag: "\u{1F1F3}\u{1F1F5}" },
+  { code: "NL", name: "Netherlands", flag: "\u{1F1F3}\u{1F1F1}" },
+  { code: "NZ", name: "New Zealand", flag: "\u{1F1F3}\u{1F1FF}" },
+  { code: "NI", name: "Nicaragua", flag: "\u{1F1F3}\u{1F1EE}" },
+  { code: "NE", name: "Niger", flag: "\u{1F1F3}\u{1F1EA}" },
+  { code: "NG", name: "Nigeria", flag: "\u{1F1F3}\u{1F1EC}" },
+  { code: "MK", name: "North Macedonia", flag: "\u{1F1F2}\u{1F1F0}" },
+  { code: "NO", name: "Norway", flag: "\u{1F1F3}\u{1F1F4}" },
+  { code: "OM", name: "Oman", flag: "\u{1F1F4}\u{1F1F2}" },
+  { code: "PK", name: "Pakistan", flag: "\u{1F1F5}\u{1F1F0}" },
+  { code: "PW", name: "Palau", flag: "\u{1F1F5}\u{1F1FC}" },
+  { code: "PS", name: "Palestine", flag: "\u{1F1F5}\u{1F1F8}" },
+  { code: "PA", name: "Panama", flag: "\u{1F1F5}\u{1F1E6}" },
+  { code: "PG", name: "Papua New Guinea", flag: "\u{1F1F5}\u{1F1EC}" },
+  { code: "PY", name: "Paraguay", flag: "\u{1F1F5}\u{1F1FE}" },
+  { code: "PE", name: "Peru", flag: "\u{1F1F5}\u{1F1EA}" },
+  { code: "PH", name: "Philippines", flag: "\u{1F1F5}\u{1F1ED}" },
+  { code: "PL", name: "Poland", flag: "\u{1F1F5}\u{1F1F1}" },
+  { code: "PT", name: "Portugal", flag: "\u{1F1F5}\u{1F1F9}" },
+  { code: "QA", name: "Qatar", flag: "\u{1F1F6}\u{1F1E6}" },
+  { code: "RO", name: "Romania", flag: "\u{1F1F7}\u{1F1F4}" },
+  { code: "RU", name: "Russia", flag: "\u{1F1F7}\u{1F1FA}" },
+  { code: "RW", name: "Rwanda", flag: "\u{1F1F7}\u{1F1FC}" },
+  { code: "KN", name: "Saint Kitts and Nevis", flag: "\u{1F1F0}\u{1F1F3}" },
+  { code: "LC", name: "Saint Lucia", flag: "\u{1F1F1}\u{1F1E8}" },
+  { code: "VC", name: "Saint Vincent and the Grenadines", flag: "\u{1F1FB}\u{1F1E8}" },
+  { code: "WS", name: "Samoa", flag: "\u{1F1FC}\u{1F1F8}" },
+  { code: "SM", name: "San Marino", flag: "\u{1F1F8}\u{1F1F2}" },
+  { code: "ST", name: "Sao Tome and Principe", flag: "\u{1F1F8}\u{1F1F9}" },
+  { code: "SA", name: "Saudi Arabia", flag: "\u{1F1F8}\u{1F1E6}" },
+  { code: "SN", name: "Senegal", flag: "\u{1F1F8}\u{1F1F3}" },
+  { code: "RS", name: "Serbia", flag: "\u{1F1F7}\u{1F1F8}" },
+  { code: "SC", name: "Seychelles", flag: "\u{1F1F8}\u{1F1E8}" },
+  { code: "SL", name: "Sierra Leone", flag: "\u{1F1F8}\u{1F1F1}" },
+  { code: "SG", name: "Singapore", flag: "\u{1F1F8}\u{1F1EC}" },
+  { code: "SK", name: "Slovakia", flag: "\u{1F1F8}\u{1F1F0}" },
+  { code: "SI", name: "Slovenia", flag: "\u{1F1F8}\u{1F1EE}" },
+  { code: "SB", name: "Solomon Islands", flag: "\u{1F1F8}\u{1F1E7}" },
+  { code: "SO", name: "Somalia", flag: "\u{1F1F8}\u{1F1F4}" },
+  { code: "ZA", name: "South Africa", flag: "\u{1F1FF}\u{1F1E6}" },
+  { code: "SS", name: "South Sudan", flag: "\u{1F1F8}\u{1F1F8}" },
+  { code: "ES", name: "Spain", flag: "\u{1F1EA}\u{1F1F8}" },
+  { code: "LK", name: "Sri Lanka", flag: "\u{1F1F1}\u{1F1F0}" },
+  { code: "SD", name: "Sudan", flag: "\u{1F1F8}\u{1F1E9}" },
+  { code: "SR", name: "Suriname", flag: "\u{1F1F8}\u{1F1F7}" },
+  { code: "SE", name: "Sweden", flag: "\u{1F1F8}\u{1F1EA}" },
+  { code: "CH", name: "Switzerland", flag: "\u{1F1E8}\u{1F1ED}" },
+  { code: "SY", name: "Syria", flag: "\u{1F1F8}\u{1F1FE}" },
+  { code: "TW", name: "Taiwan", flag: "\u{1F1F9}\u{1F1FC}" },
+  { code: "TJ", name: "Tajikistan", flag: "\u{1F1F9}\u{1F1EF}" },
+  { code: "TZ", name: "Tanzania", flag: "\u{1F1F9}\u{1F1FF}" },
+  { code: "TH", name: "Thailand", flag: "\u{1F1F9}\u{1F1ED}" },
+  { code: "TL", name: "Timor-Leste", flag: "\u{1F1F9}\u{1F1F1}" },
+  { code: "TG", name: "Togo", flag: "\u{1F1F9}\u{1F1EC}" },
+  { code: "TO", name: "Tonga", flag: "\u{1F1F9}\u{1F1F4}" },
+  { code: "TT", name: "Trinidad and Tobago", flag: "\u{1F1F9}\u{1F1F9}" },
+  { code: "TN", name: "Tunisia", flag: "\u{1F1F9}\u{1F1F3}" },
+  { code: "TR", name: "Turkey", flag: "\u{1F1F9}\u{1F1F7}" },
+  { code: "TM", name: "Turkmenistan", flag: "\u{1F1F9}\u{1F1F2}" },
+  { code: "TV", name: "Tuvalu", flag: "\u{1F1F9}\u{1F1FB}" },
+  { code: "UG", name: "Uganda", flag: "\u{1F1FA}\u{1F1EC}" },
+  { code: "UA", name: "Ukraine", flag: "\u{1F1FA}\u{1F1E6}" },
+  { code: "AE", name: "United Arab Emirates", flag: "\u{1F1E6}\u{1F1EA}" },
+  { code: "GB", name: "United Kingdom", flag: "\u{1F1EC}\u{1F1E7}" },
+  { code: "US", name: "United States", flag: "\u{1F1FA}\u{1F1F8}" },
+  { code: "UY", name: "Uruguay", flag: "\u{1F1FA}\u{1F1FE}" },
+  { code: "UZ", name: "Uzbekistan", flag: "\u{1F1FA}\u{1F1FF}" },
+  { code: "VU", name: "Vanuatu", flag: "\u{1F1FB}\u{1F1FA}" },
+  { code: "VA", name: "Vatican City", flag: "\u{1F1FB}\u{1F1E6}" },
+  { code: "VE", name: "Venezuela", flag: "\u{1F1FB}\u{1F1EA}" },
+  { code: "VN", name: "Vietnam", flag: "\u{1F1FB}\u{1F1F3}" },
+  { code: "YE", name: "Yemen", flag: "\u{1F1FE}\u{1F1EA}" },
+  { code: "ZM", name: "Zambia", flag: "\u{1F1FF}\u{1F1F2}" },
+  { code: "ZW", name: "Zimbabwe", flag: "\u{1F1FF}\u{1F1FC}" }
+];
+var codeToMeta = Object.fromEntries(countries2.map((c) => [c.code, { name: c.name, flag: c.flag }]));
+var nameToCode = Object.fromEntries(countries2.map((c) => [c.name, c.code]));
+var normalizeToIso2 = (input) => {
+  if (!input) return "US";
+  const trimmed = String(input).trim();
+  const upper = trimmed.toUpperCase();
+  if (upper.length === 2 && codeToMeta[upper]) return upper;
+  const fromName = nameToCode[trimmed];
+  if (fromName) return fromName;
+  return "US";
+};
+
+// src/molecules/creator-discovery/CreatorWidget/EngagedAudienceDemographics.tsx
+var import_jsx_runtime126 = require("react/jsx-runtime");
+function EngagedAudienceDemographics({
+  audienceDemographics
+}) {
+  if (!audienceDemographics) return null;
+  const hasCities = audienceDemographics?.cities && Object.keys(audienceDemographics.cities).length > 0;
+  const hasCountries = audienceDemographics?.countries && Object.keys(audienceDemographics.countries).length > 0;
+  const hasAges = audienceDemographics?.ages && Object.keys(audienceDemographics.ages).length > 0;
+  const hasGenders = audienceDemographics?.genders && Object.keys(audienceDemographics.genders).length > 0;
+  if (!hasCities && !hasCountries && !hasAges && !hasGenders) {
+    return null;
+  }
+  const columns = [];
+  if (hasCities) columns.push("1fr");
+  if (hasCountries) columns.push("1fr");
+  if (hasAges) columns.push("1fr");
+  if (hasGenders) columns.push("0.4fr");
+  const gridTemplate = columns.join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "text-purpleText text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "rounded-md bg-purple200 px-2 py-[4px] font-sans", children: "ENGAGED AUDIENCE" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+      "div",
+      {
+        className: "flex flex-col sm:col-span-3 sm:grid gap-6",
+        style: { gridTemplateColumns: gridTemplate },
+        children: [
+          hasCities && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("h4", { className: "text-xs text-gray700 mb-3", children: "Cities" }),
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex flex-col gap-3", children: Object.entries(audienceDemographics?.cities || {}).map(
+              ([code, value]) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+                "div",
+                {
+                  className: "flex items-center gap-3 text-sm text-gray700",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "w-[90px]", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex gap-1 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { children: code.split(",")[0] }) }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex-1 bg-gray200 h-[6px] rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                      "div",
+                      {
+                        className: "h-[6px] bg-purple100 rounded-full",
+                        style: { width: `${value}%` }
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { className: "w-10 text-right font-medium", children: [
+                      value,
+                      "%"
+                    ] })
+                  ]
+                },
+                code
+              )
+            ) })
+          ] }),
+          hasCountries && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("h4", { className: "text-xs text-gray700 mb-3", children: "Countries" }),
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex flex-col gap-3", children: Object.entries(audienceDemographics?.countries || {}).map(
+              ([code, value]) => {
+                const iso2 = normalizeToIso2(code);
+                const meta = codeToMeta[iso2];
+                return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+                  "div",
+                  {
+                    className: "flex items-center gap-3 text-sm text-gray700",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "w-10", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex gap-1 items-center", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "text-base", children: meta?.flag }),
+                        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { children: code })
+                      ] }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex-1 bg-gray200 h-[6px] rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                        "div",
+                        {
+                          className: "h-[6px] bg-purple100 rounded-full",
+                          style: { width: `${value}%` }
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { className: "w-10 text-right font-medium", children: [
+                        value,
+                        "%"
+                      ] })
+                    ]
+                  },
+                  code
+                );
+              }
+            ) })
+          ] }),
+          hasAges && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("h4", { className: "text-xs text-gray700 mb-3", children: "Ages" }),
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex flex-col gap-3", children: Object.entries(audienceDemographics?.ages || {}).map(
+              ([ageRange, value]) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+                "div",
+                {
+                  className: "flex items-center gap-3 text-sm text-gray700",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "w-12", children: ageRange }),
+                    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex-1 bg-gray200 h-[6px] rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+                      "div",
+                      {
+                        className: "h-[6px] bg-purple100 rounded-full",
+                        style: { width: `${value}%` }
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { className: "w-10 text-right font-medium", children: [
+                      value,
+                      "%"
+                    ] })
+                  ]
+                },
+                ageRange
+              )
+            ) })
+          ] }),
+          hasGenders && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex sm:flex-col gap-3", children: Object.entries(audienceDemographics?.genders || {}).map(
+            ([gender, value]) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+              "div",
+              {
+                className: "flex flex-col justify-center text-sm",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex items-center gap-1 mb-1", children: [
+                    gender === "female" ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Venus, { className: "text-red-500", strokeWidth: 3 }) : /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Mars, { className: "text-blue-500", strokeWidth: 3 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("span", { className: "capitalize text-gray800 text-xl", children: [
+                      value,
+                      "%"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "text-lg text-gray700", children: gender.charAt(0).toUpperCase() + gender.slice(1) })
+                ]
+              },
+              gender
+            )
+          ) }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/PlatformIcons.tsx
+var import_jsx_runtime127 = require("react/jsx-runtime");
+function InstagramIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" })
+    }
+  );
+}
+function YouTubeIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("path", { d: "M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" })
+    }
+  );
+}
+function TikTokIcon3({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("path", { d: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" })
+    }
+  );
+}
+function getPlatformIcon(platform) {
+  const key = platform.toLowerCase().replace(/metrics$/i, "");
+  if (key === "instagram") return InstagramIcon;
+  if (key === "tiktok") return TikTokIcon3;
+  if (key === "youtube") return YouTubeIcon;
+  return InstagramIcon;
+}
+function getPlatformName(platform) {
+  const key = platform.toLowerCase().replace(/metrics$/i, "");
+  if (key === "instagram") return "Instagram";
+  if (key === "tiktok") return "TikTok";
+  if (key === "youtube") return "YouTube";
+  return platform;
+}
+function getPlatformBgColor(platform) {
+  const key = platform.toLowerCase().replace(/metrics$/i, "");
+  if (key === "instagram") return "#C4338680";
+  if (key === "tiktok") return "#EBEBEB40";
+  if (key === "youtube") return "#ff000080";
+  return "#ccc";
+}
+function getPlatformIconColor(platform) {
+  const key = platform.toLowerCase().replace(/metrics$/i, "");
+  if (key === "instagram") return "text-[#7b1551]";
+  if (key === "tiktok") return "text-pink-500";
+  if (key === "youtube") return "text-red-600";
+  return "text-primary";
+}
+
+// src/molecules/creator-discovery/CreatorWidget/PostCard.tsx
 var import_react67 = require("react");
+var import_jsx_runtime128 = require("react/jsx-runtime");
+var formatFollowerCount = (count) => {
+  if (count >= 1e6) {
+    const millions = count / 1e6;
+    return `${millions % 1 === 0 ? Math.floor(millions) : millions.toFixed(1)}M`;
+  } else if (count >= 1e4) {
+    return `${Math.floor(count / 1e3)}k`;
+  } else if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}k`;
+  }
+  return Math.floor(count).toString();
+};
+function PostCard({ post, platformUsername }) {
+  const [expanded, setExpanded] = (0, import_react67.useState)(false);
+  const [errored, setErrored] = (0, import_react67.useState)(false);
+  const thumbnail = post.thumbnail_url || post.thumbnail || post.image || "";
+  const likes = post.engagement?.likes ?? post.likes ?? null;
+  const comments = post.engagement?.comments ?? post.comments ?? null;
+  const views = post.engagement?.views ?? post.engagement?.plays ?? post.views ?? post.plays ?? null;
+  const impressions = post.impressions ?? null;
+  const reach = post.reach ?? null;
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+    "div",
+    {
+      className: "rounded-xl overflow-hidden border border-gray500 bg-transparent shadow-sm cursor-pointer",
+      onClick: (e) => {
+        e.stopPropagation();
+        window.open(post.url, "_blank", "noopener,noreferrer");
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "w-full aspect-square relative bg-gray25", children: thumbnail && !errored ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          "img",
+          {
+            src: thumbnail,
+            alt: post.title || "post",
+            className: "w-full h-full object-cover",
+            onError: () => setErrored(true)
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "w-full h-full flex items-center justify-center text-gray500 text-sm", children: "No preview" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "p-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-4 text-sm text-gray600 mb-2", children: [
+            likes !== null && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { children: formatFollowerCount(likes) }),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Heart, { size: 14 })
+            ] }),
+            comments !== null && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { children: formatFollowerCount(comments) }),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MessageCircle, { size: 14 })
+            ] }),
+            views !== null && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { children: formatFollowerCount(views) }),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Eye, { size: 14 })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex gap-4 text-sm text-gray800 mb-2", children: [
+            impressions !== null && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-gray500 font-bold", children: formatFollowerCount(impressions) }),
+              " ",
+              "est.Impressions"
+            ] }),
+            reach !== null && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-gray500 font-bold", children: formatFollowerCount(reach) }),
+              " ",
+              "est.Reach"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "text-sm mb-1", children: [
+            platformUsername && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "text-md font-semibold text-gray500", children: [
+              "@",
+              platformUsername
+            ] }),
+            ["instagram", "tiktok"].includes(
+              post.platform?.toLowerCase() || ""
+            ) ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_jsx_runtime128.Fragment, { children: (() => {
+              const text = post.title || post.description || "";
+              return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  "div",
+                  {
+                    className: `text-gray900 font-light mt-2 text-sm ${!expanded ? "line-clamp-3" : ""}`,
+                    children: text
+                  }
+                ),
+                text.length > 100 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setExpanded((s) => !s);
+                    },
+                    className: "text-xs text-purpleText mt-2",
+                    children: expanded ? "Show less" : "Show more"
+                  }
+                )
+              ] });
+            })() }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+              post.title && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "text-gray900 font-light", children: post.title }),
+              post.description && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                "div",
+                {
+                  className: "mt-2 text-sm text-gray900 overflow-hidden font-light",
+                  style: { maxHeight: expanded ? void 0 : 200 },
+                  children: post.description
+                }
+              ),
+              post.description && post.description.length > 200 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setExpanded((s) => !s);
+                  },
+                  className: "text-xs text-purpleText mt-2",
+                  children: expanded ? "Show less" : "Show more"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/molecules/creator-discovery/CreatorWidget/PlatformPostsSection.tsx
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var formatFollowerCount2 = (count) => {
+  if (count >= 1e6) {
+    const millions = count / 1e6;
+    return `${millions % 1 === 0 ? Math.floor(millions) : millions.toFixed(1)}M`;
+  } else if (count >= 1e4) {
+    return `${Math.floor(count / 1e3)}k`;
+  } else if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}k`;
+  }
+  return Math.floor(count).toString();
+};
+function filterPostsByPlatform(posts, platform) {
+  const postsArr = (posts ?? []).slice();
+  const shortKey = platform.replace(/Metrics$/i, "").toLowerCase();
+  return postsArr.filter((p) => (p.platform || "").toLowerCase() === shortKey).slice(0, 3);
+}
+function PlatformMetricsBanner({
+  platform,
+  metrics
+}) {
+  const platformName = getPlatformName(platform);
+  const bgColor = getPlatformBgColor(platform);
+  const IconComponent = getPlatformIcon(platform);
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+    "div",
+    {
+      className: "\n        flex overflow-x-auto gap-6 rounded-l-xl py-4 px-4 shadow-sm\n        md:grid md:grid-cols-[0.5fr_1fr_1fr_1fr_1fr] md:items-center md:gap-0 md:px-0 md:ml-8\n      ",
+      style: { backgroundColor: bgColor },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col items-center min-w-[90px] md:min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(IconComponent, { className: "w-5 h-5 md:w-6 md:h-6 text-gray900" }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-lg md:text-xl font-bold text-gray900", children: platform === "youtubeMetrics" ? formatFollowerCount2(metrics.subscribers || 0) : formatFollowerCount2(metrics.followers || 0) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col items-start min-w-[130px] md:min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+            "span",
+            {
+              className: "text-base md:text-lg dark:text-white max-w-[90%] truncate cursor-default",
+              title: `@${platform === "youtubeMetrics" ? metrics.channelName : metrics.username}`,
+              children: [
+                "@",
+                platform === "youtubeMetrics" ? metrics.channelName : metrics.username
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-xs md:text-sm text-gray900 opacity-90", children: platformName })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col items-start min-w-[100px] md:min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { className: "text-sm md:text-md font-semibold text-gray900", children: [
+            (metrics.engagementRate * 100).toFixed(2),
+            "%"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-xs text-gray900 opacity-80", children: "Engagement Rate" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col items-start min-w-[100px] md:min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-sm md:text-md font-semibold text-gray900", children: Math.round(metrics.avgLikes)?.toLocaleString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-xs text-gray900 opacity-80", children: "Avg Likes" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col items-start min-w-[100px] md:min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-sm md:text-md font-semibold text-gray900", children: Math.round(metrics.avgComments)?.toLocaleString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-xs text-gray900 opacity-80", children: "Avg Comments" })
+        ] })
+      ]
+    }
+  );
+}
+function PlatformPostsSection({
+  platformMetrics,
+  posts = []
+}) {
+  if (!platformMetrics) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex flex-col gap-8", children: Object.entries(platformMetrics || {}).map(
+    ([platform, metrics]) => {
+      if (!metrics) return null;
+      if (metrics.followers === 0 && metrics.subscribers === 0)
+        return null;
+      const platformPosts = filterPostsByPlatform(posts, platform);
+      const platformUsername = metrics.username ?? metrics.channelName ?? "";
+      return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "w-full flex flex-col gap-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(PlatformMetricsBanner, { platform, metrics }),
+        platformPosts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "pr-6 sm:ml-8 sm:pr-7", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: platformPosts.map((post, idx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+          PostCard,
+          {
+            post,
+            platformUsername
+          },
+          post.post_id ?? post.url ?? idx
+        )) }) })
+      ] }, platform);
+    }
+  ) }) });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/BrandCollaborationsList.tsx
+var import_react68 = require("react");
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_framer_motion3 = require("framer-motion");
+var import_jsx_runtime130 = require("react/jsx-runtime");
+var getSentimentRank = (score) => {
+  if (score >= 80) {
+    return {
+      rank: "STRONG FIT",
+      bgColor: "bg-greenBackground",
+      textColor: "text-greenText",
+      scoreColor: "text-[#499C54]"
+    };
+  } else if (score >= 50) {
+    return {
+      rank: "MODERATE FIT",
+      bgColor: "bg-orangeBackground",
+      textColor: "text-orangeText",
+      scoreColor: "text-[#B3512F]"
+    };
+  } else if (score >= 0) {
+    return {
+      rank: "POOR FIT",
+      bgColor: "bg-redBackground",
+      textColor: "text-redText",
+      scoreColor: "text-[#BE2C35]"
+    };
+  }
+  return {
+    rank: "Unranked",
+    bgColor: "bg-gray500",
+    textColor: "text-gray200",
+    scoreColor: "text-gray500"
+  };
+};
+function BrandMentionDetails({
+  open,
+  onClose,
+  brandBreakdown,
+  selectedBrand
+}) {
+  const brandStats = brandBreakdown?.insights?.brandBreakdown?.find(
+    (b) => b.brand.toLowerCase() === selectedBrand?.toLowerCase()
+  );
+  const brandMentions = brandBreakdown?.mentions?.filter(
+    (m) => m.normalizedBrand?.toLowerCase() === selectedBrand?.toLowerCase() || m.brand?.toLowerCase() === selectedBrand?.toLowerCase()
+  ) || [];
+  if (typeof window === "undefined") return null;
+  return import_react_dom.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_framer_motion3.AnimatePresence, { mode: "sync", children: open && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+        import_framer_motion3.motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.2 },
+          className: "fixed inset-0 bg-black bg-opacity-50 z-[80]",
+          onClick: (e) => {
+            e.stopPropagation();
+            onClose();
+          }
+        },
+        "brand-overlay"
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+        import_framer_motion3.motion.div,
+        {
+          initial: { opacity: 0, scale: 0.95 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.95 },
+          transition: { duration: 0.2 },
+          className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[90] w-full max-w-lg bg-background rounded-xl border border-gray300 shadow-2xl",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex justify-between items-center p-4 border-b border-gray300", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("h3", { className: "text-lg font-bold text-gray900", children: [
+                "Brand Mention Details: ",
+                selectedBrand
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "p-1 rounded-full hover:bg-gray200 transition-colors",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(X, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex flex-col gap-6 max-h-[70vh] overflow-y-auto p-4", children: [
+              brandStats && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "bg-gray25 border-2 border-gray200 rounded-xl p-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("h3", { className: "text-lg font-bold text-gray900 mb-4", children: "Overview" }),
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "bg-background rounded-lg p-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-xs text-gray600", children: "Total Mentions" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-2xl font-bold text-gray900", children: brandStats.mentions })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "bg-background rounded-lg p-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-xs text-gray600", children: "Posts Count" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-2xl font-bold text-gray900", children: brandStats.postCount })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "bg-background rounded-lg p-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-xs text-gray600", children: "Avg Engagement" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "text-2xl font-bold text-gray900", children: [
+                      brandStats.averageEngagementRate?.toFixed(2),
+                      "%"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "bg-background rounded-lg p-3", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-xs text-gray600", children: "Effectiveness" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+                      "div",
+                      {
+                        className: `text-2xl font-bold ${getSentimentRank(brandStats.effectivenessPercent).scoreColor}`,
+                        children: [
+                          brandStats.effectivenessPercent,
+                          "%"
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "mt-3 flex gap-2 flex-wrap", children: brandStats.collaborationTypes?.map(
+                  (type, idx) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                    "span",
+                    {
+                      className: "px-3 py-1 rounded-md text-xs font-medium bg-[#1D4324] text-[#72E285]",
+                      children: type
+                    },
+                    idx
+                  )
+                ) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("h3", { className: "text-lg font-bold text-gray900 mb-3", children: [
+                  "Individual Mentions (",
+                  brandMentions.length,
+                  ")"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex flex-col gap-3", children: brandMentions.map((mention, index) => {
+                  const IconComponent = getPlatformIcon(mention?.platform);
+                  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+                    "div",
+                    {
+                      className: "bg-gray50 border-2 border-gray200 rounded-xl p-4 hover:border-purple100 transition-colors",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(IconComponent, { className: "w-5 h-5 text-gray900" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-sm font-medium text-gray700 capitalize", children: mention.platform })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "px-2 py-1 rounded-md text-xs font-medium bg-[#1D4324] text-[#72E285]", children: mention.collaborationType }),
+                            /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("span", { className: "text-xs text-gray600", children: [
+                              Math.round(mention.confidence * 100),
+                              "% confidence"
+                            ] })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "mb-2", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("span", { className: "text-xs text-gray500", children: [
+                            "Post ID:",
+                            " "
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-xs font-mono text-gray700", children: mention.post_id })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "bg-background rounded-lg p-3 border border-gray300", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-xs text-gray600 mb-1", children: "Evidence:" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("p", { className: "text-sm text-gray800 italic", children: [
+                            "\u201C",
+                            mention.evidence,
+                            "\u201D"
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "mt-2 text-xs text-gray500", children: [
+                          "Source:",
+                          " ",
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "font-medium", children: mention.source }),
+                          mention.handle && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("span", { className: "ml-2", children: [
+                            "Handle:",
+                            " ",
+                            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "font-medium", children: mention.handle })
+                          ] })
+                        ] })
+                      ]
+                    },
+                    index
+                  );
+                }) })
+              ] }),
+              brandMentions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-center py-8 text-gray500", children: "No mentions found for this brand" })
+            ] })
+          ]
+        },
+        "brand-modal"
+      )
+    ] }) }),
+    document.body
+  );
+}
+function BrandCollaborationsList({
+  brandBreakdown
+}) {
+  const [openDetails, setOpenDetails] = (0, import_react68.useState)(false);
+  const [selectedBrand, setSelectedBrand] = (0, import_react68.useState)("");
+  if (!brandBreakdown?.insights?.brandBreakdown || brandBreakdown.insights.brandBreakdown.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-purpleText text-xs mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "rounded-md bg-purple200 px-2 py-[4px] font-sans", children: "BRAND MENTIONS" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex flex-col gap-2 max-h-[220px] overflow-y-auto", children: brandBreakdown.insights.brandBreakdown.map(
+        (item, index) => /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          "div",
+          {
+            className: "flex gap-4 bg-gray50 border-2 border-gray25 rounded-xl px-3 py-3 shadow-sm cursor-pointer hover:border-purple100 transition-colors",
+            onClick: (e) => {
+              e.stopPropagation();
+              setSelectedBrand(item?.brand);
+              setOpenDetails(true);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-10 h-10 rounded-full bg-gray200 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-sm font-bold text-gray700", children: item.brand?.charAt(0)?.toUpperCase() || "?" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-gray900 text-sm", children: item.brand }),
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex gap-2 text-xs text-gray600", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-gray900", children: item?.mentions }),
+                    " ",
+                    "Mention"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                      "span",
+                      {
+                        className: `${getSentimentRank(item.effectivenessPercent).scoreColor} font-bold`,
+                        children: item.effectivenessPercent ? `${item.effectivenessPercent}%` : "N/A"
+                      }
+                    ),
+                    " ",
+                    "Effectiveness"
+                  ] })
+                ] })
+              ] })
+            ]
+          },
+          index
+        )
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      BrandMentionDetails,
+      {
+        open: openDetails,
+        onClose: () => setOpenDetails(false),
+        brandBreakdown,
+        selectedBrand
+      }
+    )
+  ] });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorGridView.tsx
+var import_react69 = require("react");
+var import_framer_motion4 = require("framer-motion");
+var import_jsx_runtime131 = require("react/jsx-runtime");
+var formatFollowerCount3 = (count) => {
+  if (count >= 1e6) {
+    const millions = count / 1e6;
+    return `${millions % 1 === 0 ? Math.floor(millions) : millions.toFixed(1)}M`;
+  } else if (count >= 1e4) {
+    return `${Math.floor(count / 1e3)}k`;
+  } else if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}k`;
+  }
+  return Math.floor(count).toString();
+};
+var getSentimentRank2 = (score) => {
+  if (score >= 80) {
+    return {
+      bgColor: "bg-greenBackground",
+      textColor: "text-greenText",
+      scoreColor: "text-[#499C54]"
+    };
+  } else if (score >= 50) {
+    return {
+      bgColor: "bg-orangeBackground",
+      textColor: "text-orangeText",
+      scoreColor: "text-[#B3512F]"
+    };
+  } else if (score >= 0) {
+    return {
+      bgColor: "bg-redBackground",
+      textColor: "text-redText",
+      scoreColor: "text-[#BE2C35]"
+    };
+  }
+  return {
+    bgColor: "bg-gray500",
+    textColor: "text-gray200",
+    scoreColor: "text-gray200"
+  };
+};
+var itemsExplanation = [
+  { key: "contentRelevance", label: "Content Relevance" },
+  { key: "audienceMatch", label: "Audience Match" },
+  { key: "authorityExpertise", label: "Expertise" },
+  { key: "contentQuality", label: "Content Quality" },
+  { key: "authenticity", label: "Authenticity" },
+  { key: "brandSafety", label: "Brand Safety" }
+];
+function CreatorGridViewCard({ creator }) {
+  const [isExpanded, setIsExpanded] = (0, import_react69.useState)(false);
+  const [showFullDescription, setShowFullDescription] = (0, import_react69.useState)(false);
+  const [isDescriptionOverflowing, setIsDescriptionOverflowing] = (0, import_react69.useState)(false);
+  const descriptionRef = (0, import_react69.useRef)(null);
+  const cardRef = (0, import_react69.useRef)(null);
+  const checkDescriptionOverflow = (0, import_react69.useCallback)(() => {
+    const el = descriptionRef.current;
+    if (!el) return;
+    setIsDescriptionOverflowing(el.scrollHeight > el.clientHeight + 1);
+  }, []);
+  (0, import_react69.useEffect)(() => {
+    checkDescriptionOverflow();
+  }, [checkDescriptionOverflow, isExpanded, showFullDescription]);
+  (0, import_react69.useEffect)(() => {
+    const onResize = () => checkDescriptionOverflow();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [checkDescriptionOverflow]);
+  const platformStats = (0, import_react69.useMemo)(() => {
+    return [
+      {
+        platform: "instagram",
+        icon: InstagramIcon,
+        followers: creator.metrics?.instagram?.followers || 0,
+        engagement: creator.metrics?.instagram?.engagement || 0
+      },
+      {
+        platform: "youtube",
+        icon: YouTubeIcon,
+        followers: creator.metrics?.youtube?.followers || 0,
+        engagement: creator.metrics?.youtube?.engagement || 0
+      },
+      {
+        platform: "tiktok",
+        icon: TikTokIcon3,
+        followers: creator.metrics?.tiktok?.followers || 0,
+        engagement: creator.metrics?.tiktok?.engagement || 0
+      }
+    ];
+  }, [creator]);
+  const toggleExpanded = () => {
+    const willExpand = !isExpanded;
+    setIsExpanded(willExpand);
+    setTimeout(() => {
+      if (cardRef.current) {
+        cardRef.current.scrollIntoView({
+          behavior: "smooth",
+          block: willExpand ? "center" : "nearest"
+        });
+      }
+    }, 100);
+  };
+  const iso2 = normalizeToIso2(creator.country);
+  const meta = codeToMeta[iso2];
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_framer_motion4.motion.div,
+    {
+      ref: cardRef,
+      layout: "position",
+      initial: { opacity: 0, y: 10 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3 },
+      className: `bg-paperBackground dark:bg-gray50 rounded-[10px] border border-gray300 hover:border-purple100 shadow-sm cursor-pointer transition-all duration-300 ease-in-out ${isExpanded ? "col-span-full border-purple100" : ""}`,
+      style: isExpanded ? { gridColumn: "1 / -1" } : {},
+      onClick: toggleExpanded,
+      children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: `${isExpanded ? "w-1/3" : "w-full"}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "relative w-full aspect-square mb-2", children: [
+            creator.profile_pic ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              "img",
+              {
+                src: creator.profile_pic,
+                alt: creator.name,
+                className: "w-full h-full object-cover bg-primary/10",
+                style: { borderRadius: "10px 10px 0 0" }
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              "div",
+              {
+                className: "w-full h-full bg-primary/10 flex items-center justify-center",
+                style: { borderRadius: "10px 10px 0 0" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-2xl text-primary", children: creator.name?.charAt(0) || "?" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              "div",
+              {
+                className: `absolute bottom-2 right-2 ${getSentimentRank2(creator.sentiment?.matchScore || 0).bgColor} ${getSentimentRank2(creator.sentiment?.matchScore || 0).textColor} px-2 py-1 rounded-md text-md font-medium`,
+                children: creator.sentiment ? `${creator.sentiment?.matchScore?.toFixed(1)}%` : "N/A"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "px-3 pb-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                "h3",
+                {
+                  className: `${isExpanded ? "text-md" : "text-sm"} font-normal text-gray900 mb-1 line-clamp-2 text-start`,
+                  children: creator.name || "Unnamed"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+                "div",
+                {
+                  className: `${isExpanded ? "text-sm" : "text-xs"} text-gray700 mb-1 text-start flex items-center gap-1`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-base", children: meta?.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { children: meta?.name || creator.country || "Unknown" })
+                  ]
+                }
+              ),
+              isExpanded && creator?.sentiment?.detailedScores && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "mt-2 w-[150px] flex gap-2", children: Object.entries(creator.sentiment.detailedScores).map(
+                ([key, value]) => {
+                  const itemRank = getSentimentRank2(value);
+                  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+                    "div",
+                    {
+                      className: "flex flex-col items-center w-[100px]",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+                          "span",
+                          {
+                            className: `text-[14px] font-bold ${itemRank.scoreColor}`,
+                            children: [
+                              value,
+                              "%"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex items-center justify-center gap-1 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-xs dark:text-gray500 text-center px-1", children: itemsExplanation.find(
+                          (item) => item.key === key
+                        )?.label }) })
+                      ]
+                    },
+                    key
+                  );
+                }
+              ) }) })
+            ] }),
+            !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex gap-2 justify-between", children: platformStats.map(
+              ({ platform, icon: Icon3, followers }) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+                "div",
+                {
+                  className: "flex flex-col items-center gap-1",
+                  title: `${formatFollowerCount3(followers)} followers`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                      Icon3,
+                      {
+                        className: `w-5 h-5 ${getPlatformIconColor(platform)}`
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-xs dark:text-gray500", children: followers > 0 && formatFollowerCount3(followers) })
+                  ]
+                },
+                platform
+              )
+            ) })
+          ] })
+        ] }),
+        isExpanded && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex-1 border-l border-gray300 p-6 overflow-hidden transition-all duration-300 ease-in-out", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+              "div",
+              {
+                ref: descriptionRef,
+                className: `${showFullDescription ? "" : "max-h-[80px] overflow-hidden"} relative`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-sm text-gray700 leading-relaxed", children: creator.description || "No description provided." }),
+                  !showFullDescription && isDescriptionOverflowing && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-gray25 to-transparent" })
+                ]
+              }
+            ),
+            (isDescriptionOverflowing || showFullDescription) && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShowFullDescription((v) => !v);
+                },
+                className: "mt-1 px-3 py-1 rounded border border-gray300 text-sm text-gray700 hover:text-gray900",
+                children: showFullDescription ? "Show less" : "Show more"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex gap-6 justify-start items-center", children: platformStats.map(
+            ({ platform, icon: Icon3, followers, engagement }) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+                "div",
+                {
+                  className: "flex items-center gap-1",
+                  title: `${formatFollowerCount3(followers)} followers`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                      Icon3,
+                      {
+                        className: `w-5 h-5 ${getPlatformIconColor(platform)}`
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-xs dark:text-gray500", children: followers > 0 ? formatFollowerCount3(followers) : "0" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ChartColumn, { className: "w-5 h-5 dark:text-gray500" }),
+                /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("span", { className: "text-sm dark:text-gray500 w-[40px]", children: [
+                  (engagement * 100).toFixed(1),
+                  "%"
+                ] })
+              ] })
+            ] }, platform)
+          ) }),
+          creator.posts?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "w-full overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h3", { className: "mb-2 text-sm font-medium text-gray900", children: "Recent Posts" }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex gap-3 overflow-x-auto", children: creator.posts.filter(
+              (post) => post.thumbnail || post.thumbnail_url
+            ).slice(0, 8).map((post, idx) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              "a",
+              {
+                href: post.url || "#",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "block flex-shrink-0",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  "img",
+                  {
+                    src: post.thumbnail_url || post.thumbnail,
+                    alt: post.title || `Post ${idx + 1}`,
+                    className: "rounded-md object-cover w-[120px] h-[120px]"
+                  }
+                )
+              },
+              idx
+            )) })
+          ] }),
+          creator?.sentiment?.aiReasoning && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "text-gray700 max-h-[200px] overflow-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h4", { className: "font-semibold text-sm", children: "AI Analysis" }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-sm", children: creator.sentiment.aiReasoning })
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+}
+function CreatorGridView({
+  creatorData
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 [&>*]:transition-all [&>*]:duration-300 auto-rows-min relative grid-flow-dense", children: creatorData.map((creator) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(CreatorGridViewCard, { creator }, creator._id)) });
+}
+
+// src/molecules/creator-discovery/CreatorWidget/CreatorExpandedPanel.tsx
+var import_jsx_runtime132 = require("react/jsx-runtime");
+var formatFollowerCount4 = (count) => {
+  if (count >= 1e6) {
+    const millions = count / 1e6;
+    return `${millions % 1 === 0 ? Math.floor(millions) : millions.toFixed(1)}M`;
+  } else if (count >= 1e4) {
+    return `${Math.floor(count / 1e3)}k`;
+  } else if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}k`;
+  }
+  return Math.floor(count).toString();
+};
+var getSentimentRank3 = (score) => {
+  if (score >= 80) {
+    return {
+      rank: "STRONG FIT",
+      bgColor: "bg-greenBackground",
+      textColor: "text-greenText",
+      scoreColor: "text-[#499C54]"
+    };
+  } else if (score >= 50) {
+    return {
+      rank: "MODERATE FIT",
+      bgColor: "bg-orangeBackground",
+      textColor: "text-orangeText",
+      scoreColor: "text-[#B3512F]"
+    };
+  } else if (score >= 0) {
+    return {
+      rank: "POOR FIT",
+      bgColor: "bg-redBackground",
+      textColor: "text-redText",
+      scoreColor: "text-[#BE2C35]"
+    };
+  }
+  return {
+    rank: "Unranked",
+    bgColor: "bg-gray500",
+    textColor: "text-gray200",
+    scoreColor: "text-gray500"
+  };
+};
+function formatCreator(raw) {
+  return {
+    _id: raw.creator_id || raw.profile?.upfluenceId,
+    name: raw.profile?.name || "",
+    description: raw.profile?.description || "",
+    isVerified: raw.profile?.isVerified || false,
+    country: raw.profile?.country || "",
+    profile_pic: raw.profile?.profilePicture || "",
+    platforms: raw.profile?.platforms,
+    platformMetrics: raw.platformMetrics || {},
+    metrics: {
+      instagram: {
+        engagement: raw.platformMetrics?.instagramMetrics?.engagementRate || 0,
+        followers: raw.platformMetrics?.instagramMetrics?.followers || 0,
+        avgLikes: raw.platformMetrics?.instagramMetrics?.avgLikes || 0,
+        avgComments: raw.platformMetrics?.instagramMetrics?.avgComments || 0
+      },
+      youtube: {
+        engagement: raw.platformMetrics?.youtubeMetrics?.engagementRate || 0,
+        followers: raw.platformMetrics?.youtubeMetrics?.subscribers || 0,
+        avgLikes: raw.platformMetrics?.youtubeMetrics?.avgLikes || 0,
+        avgComments: raw.platformMetrics?.youtubeMetrics?.avgComments || 0
+      },
+      tiktok: {
+        engagement: raw.platformMetrics?.tiktokMetrics?.engagementRate || 0,
+        followers: raw.platformMetrics?.tiktokMetrics?.followers || 0,
+        avgLikes: raw.platformMetrics?.tiktokMetrics?.avgLikes || 0,
+        avgComments: raw.platformMetrics?.tiktokMetrics?.avgComments || 0
+      }
+    },
+    posts: raw.posts || [],
+    sentiment: raw.sentiment || null,
+    audienceDemographics: raw.audienceDemographics || null,
+    brandCollaborations: raw.brandCollaborations || null,
+    profile: raw.profile || {}
+  };
+}
+var truncateName2 = (name, maxLen) => {
+  if (!name) return "";
+  return name.length > maxLen ? name.slice(0, maxLen) + "..." : name;
+};
+function SearchSpecDisplay({ spec }) {
+  if (!spec) return null;
+  const priorityOneBundles = Array.isArray(spec?.keyword_bundles) ? spec.keyword_bundles.filter((b) => b?.priority !== void 0 ? b.priority === 1 : true).flatMap((b) => b?.keywords || []) : [];
+  const textClass = "text-sm text-white dark:text-gray900";
+  const paddingClass = "px-4 py-1";
+  const roundedClass = "rounded-lg";
+  const tagClass = `${textClass} ${paddingClass} bg-[#85888f] dark:bg-[rgba(249,249,249,0.2)] ${roundedClass} border border-[#85888f] dark:border-gray800 font-medium`;
+  const items = [
+    {
+      key: "platforms",
+      title: "Platforms",
+      content: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex flex-wrap gap-2", children: (spec.platforms || []).filter((p) => ["instagram", "youtube", "tiktok"].includes(p.toLowerCase())).map((p, idx) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: `${tagClass} flex items-center justify-center`, children: p.charAt(0).toUpperCase() + p.slice(1).toLowerCase() }, idx)) })
+    },
+    {
+      key: "follower_range",
+      title: "Follower Range",
+      content: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: `inline-block ${tagClass} font-grotesk`, children: [
+        formatFollowerCount4(spec?.follower_range?.min ?? 0),
+        " -",
+        " ",
+        formatFollowerCount4(spec?.follower_range?.max ?? 0)
+      ] })
+    },
+    {
+      key: "geography",
+      title: "Geography",
+      content: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: `inline-block ${tagClass} font-grotesk`, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        "div",
+        {
+          className: "max-w-[200px] overflow-x-auto whitespace-nowrap",
+          style: { scrollbarWidth: "none", textOverflow: "ellipsis", overflow: "hidden" },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.textOverflow = "clip";
+            e.currentTarget.style.overflow = "auto";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.textOverflow = "ellipsis";
+            e.currentTarget.style.overflow = "hidden";
+            e.currentTarget.scrollLeft = 0;
+          },
+          children: (spec.geography || []).map((g, idx) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { children: [
+            g,
+            idx < spec.geography.length - 1 ? ", " : ""
+          ] }, idx))
+        }
+      ) })
+    },
+    {
+      key: "keyword_bundles",
+      title: "Keyword",
+      content: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex gap-2 font-grotesk font-medium max-w-[500px] overflow-x-auto whitespace-nowrap", style: { scrollbarWidth: "none" }, children: priorityOneBundles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: `${textClass} text-white/70`, children: "No priority 1 keywords" }) : priorityOneBundles.map((kw, idx) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: tagClass, children: kw }, idx)) })
+    }
+  ];
+  const itemsToShow = ["platforms", "follower_range", "geography", "keyword_bundles"];
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex gap-4 pr-[30px] overflow-x-auto", style: { scrollbarWidth: "none" }, children: items.filter(({ key }) => itemsToShow.includes(key) && spec?.[key] !== void 0 && spec?.[key] !== null).map(({ key, title, content }) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex-none p-5 bg-paperBackground rounded-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "text-purpleText text-sm mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "rounded-md bg-purple200 px-2 py-[4px] font-sans", children: title.toUpperCase() }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: `flex text-gray900 ${textClass}`, children: content })
+  ] }, key)) }) });
+}
+function SentimentScoreRank({
+  score,
+  isValidationComplete,
+  showMinialView = false
+}) {
+  const sentimentScoreRank = getSentimentRank3(score);
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: `flex flex-col justify-end ${showMinialView ? "w-[120px]" : "w-[150px]"} text-sm`, children: [
+    score !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex justify-center items-center mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+      "span",
+      {
+        className: `${isValidationComplete ? sentimentScoreRank.bgColor : "bg-gray500"} ${isValidationComplete ? sentimentScoreRank.textColor : "text-gray200"} text-center rounded-md ${showMinialView ? "text-xs px-[6px] py-[2px]" : "text-sm px-2 py-[2px]"}`,
+        children: isValidationComplete ? sentimentScoreRank.rank : "Unranked"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: `flex justify-center ${showMinialView ? "text-[24px]" : "text-[28px]"} font-bold mb-3 ${sentimentScoreRank.scoreColor}`, children: isValidationComplete ? score >= 0 ? `${score}%` : "0%" : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "w-6 h-6 border-2 border-purple100 border-t-transparent rounded-full animate-spin" }) }) }),
+    !showMinialView && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-gray600 dark:text-gray500 text-center", children: "Match Score" })
+  ] }) });
+}
+function BrandMentionPerformance({ creator }) {
+  const insights = creator?.brandCollaborations?.insights;
+  if (!insights) return null;
+  const isValid2 = (val) => val !== null && val !== void 0 && val !== 0 && val !== "0" && val !== "" && !Number.isNaN(val);
+  if (!isValid2(insights.averageBrandEngagementRate) && !isValid2(insights.effectivenessPercent) && !isValid2(insights.saturationRate)) {
+    return null;
+  }
+  const metrics = [
+    { title: "Avg engagement rate", subtitle: "on brand mention", value: `${insights?.averageBrandEngagementRate || 0} %` },
+    { title: "Effectiveness", subtitle: "compared to all posts", value: `${insights?.effectivenessPercent || 0} %` },
+    { title: "Saturation Rate", subtitle: "on brand mention", value: `${insights?.saturationRate || 0} %` }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "text-purpleText text-xs mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "rounded-md bg-purple200 px-2 py-[4px] font-sans", children: "BRAND MENTION PERFORMANCE" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex flex-col gap-3", children: metrics.map((item) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex justify-between items-center text-gray700 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h5", { children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-xs", children: item.subtitle })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-purpleText text-lg", children: item.value })
+    ] }, item.title)) })
+  ] });
+}
+function CreatorFitSummary({ creator, showBrandPerformance }) {
+  const hasDeepAnalysis = creator?.sentiment?.deepAnalysis?.deepAnalysis;
+  const title = hasDeepAnalysis ? "CREATOR DEEP ANALYSIS" : "CREATOR FIT SUMMARY";
+  const content = hasDeepAnalysis ? creator.sentiment.deepAnalysis.deepAnalysis : creator?.sentiment?.aiReasoning || "No data available.";
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: showBrandPerformance ? "col-span-1" : "col-span-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "text-purpleText text-xs mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "rounded-md bg-purple200 px-2 py-[4px] font-sans", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "max-h-[140px] overflow-y-auto slim-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-gray700 text-sm", children: content }) })
+  ] });
+}
+function ProfileSection({ creator, isValidationComplete }) {
+  const username = creator.platformMetrics?.instagramMetrics?.username ? `@${creator.platformMetrics.instagramMetrics.username}` : creator.platformMetrics?.youtubeMetrics?.channelName ? `@${creator.platformMetrics.youtubeMetrics.channelName}` : creator.platformMetrics?.tiktokMetrics?.username ? `@${creator.platformMetrics.tiktokMetrics.username}` : "";
+  const iso2 = normalizeToIso2(creator.country);
+  const meta = codeToMeta[iso2];
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex items-start gap-1 md:gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex flex-col items-center gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "w-[5rem] h-[5rem] rounded-[10px] bg-primary/10 flex items-center justify-center flex-shrink-0 relative overflow-hidden", children: creator.profile_pic ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          "img",
+          {
+            src: creator.profile_pic,
+            alt: creator.name,
+            className: "object-cover w-[5rem] h-[5rem] rounded-[15px]"
+          }
+        ),
+        creator?.profile?.isVerified && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          BadgeCheck,
+          {
+            size: 35,
+            className: "absolute -top-2 -right-2 text-blue-500 drop-shadow-sm fill-blue-300"
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "text-2xl text-primary", children: creator.name?.charAt(0) || "?" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "block sm:hidden", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(SentimentScoreRank, { score: creator?.sentiment?.matchScore || -1, isValidationComplete, showMinialView: true }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex flex-col gap-3 truncate", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h4", { className: "text-lg text-gray900 max-w-[150px]", title: creator.name, children: truncateName2(creator.name, 100) }) }),
+      username && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "text-xs text-gray700", children: username }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "text-sm text-gray700 flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "text-base", children: meta?.flag }),
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { children: meta?.name || creator.country || "Unknown" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "text-xs text-gray700 text-wrap", children: truncateName2(creator.description, 100) })
+    ] })
+  ] });
+}
+function CreatorCardExpandedSection({
+  creator
+}) {
+  const hasBrandBreakdown = creator?.brandCollaborations?.insights?.brandBreakdown && creator?.sentiment?.deepAnalysis;
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+    import_framer_motion5.motion.div,
+    {
+      initial: { y: 20, opacity: 0 },
+      animate: { y: 0, opacity: 1 },
+      transition: { duration: 0.3, delay: 0.1 },
+      className: "md:mt-6 space-y-5",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "md:grid md:grid-cols-[1.3fr_1fr_2fr_120px] gap-8 py-4 pr-7", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "col-span-4 sm:col-span-1", children: hasBrandBreakdown ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+            BrandCollaborationsList,
+            {
+              brandBreakdown: creator?.brandCollaborations
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "hidden sm:block" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "col-span-4 sm:col-span-3", children: creator?.audienceDemographics ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+            EngagedAudienceDemographics,
+            {
+              audienceDemographics: creator.audienceDemographics
+            }
+          ) : null })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          PlatformPostsSection,
+          {
+            platformMetrics: creator.platformMetrics,
+            posts: creator.posts ?? creator.post
+          }
+        )
+      ]
+    }
+  );
+}
+function CreatorCard({
+  creator,
+  isValidationComplete
+}) {
+  const [detailsExpanded, setDetailsExpanded] = (0, import_react70.useState)(false);
+  const hasValidBrandMention = (() => {
+    const insights = creator?.brandCollaborations?.insights;
+    if (!insights) return false;
+    const isValid2 = (val) => val !== null && val !== void 0 && val !== 0 && val !== "0" && val !== "" && !Number.isNaN(val);
+    return isValid2(insights.averageBrandEngagementRate) || isValid2(insights.effectivenessPercent) || isValid2(insights.saturationRate);
+  })();
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+    import_framer_motion5.motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -20 },
+      transition: { duration: 0.4, ease: [0.22, 1, 0.36, 1] },
+      className: `flex flex-col bg-paperBackground rounded-[25px] py-5 pl-7 border-2 shadow-sm cursor-pointer transition-all ${detailsExpanded ? "border-purple100" : "border-gray300"}`,
+      onClick: () => setDetailsExpanded((prev) => !prev),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex flex-col gap-4 sm:grid sm:grid-cols-[1.3fr_1fr_2fr_120px] gap-8 items-start w-full pr-7", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ProfileSection, { creator, isValidationComplete }),
+          hasValidBrandMention && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(BrandMentionPerformance, { creator }),
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(CreatorFitSummary, { creator, showBrandPerformance: hasValidBrandMention }),
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(SentimentScoreRank, { score: creator?.sentiment?.matchScore || -1, isValidationComplete }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_framer_motion5.AnimatePresence, { children: detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          import_framer_motion5.motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1, transition: { height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] }, opacity: { duration: 0.3, delay: 0.1 } } },
+            exit: { height: 0, opacity: 0, transition: { height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }, opacity: { duration: 0.2 } } },
+            className: "overflow-hidden mt-4",
+            children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(CreatorCardExpandedSection, { creator })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function CreatorDisplay({
+  creators,
+  isValidationComplete
+}) {
+  const [viewMode, setViewMode] = (0, import_react70.useState)("list");
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex justify-end items-center my-3 gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "text-xs text-gray600 mr-2", children: [
+        creators.length,
+        " creators"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        "button",
+        {
+          className: `h-7 w-7 flex items-center justify-center rounded ${viewMode === "list" ? "bg-gray200" : ""}`,
+          onClick: () => setViewMode("list"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+            AlignJustify,
+            {
+              className: `h-5 w-5 ${viewMode === "list" ? "text-gray900 dark:text-white" : "text-gray500"}`
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        "button",
+        {
+          className: `h-7 w-7 flex items-center justify-center rounded ${viewMode === "grid" ? "bg-gray200" : ""}`,
+          onClick: () => setViewMode("grid"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+            LayoutGrid,
+            {
+              className: `h-5 w-5 ${viewMode === "grid" ? "text-gray900 dark:text-white" : "text-gray500"}`
+            }
+          )
+        }
+      )
+    ] }),
+    creators.length > 0 ? viewMode === "list" ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "space-y-4", children: creators.map((creator) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(CreatorCard, { creator, isValidationComplete }, creator._id)) }) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(CreatorGridView, { creatorData: creators }) : /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "text-center py-8 bg-gray100 rounded-lg border border-gray300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Users, { className: "w-6 h-6 text-primary" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h3", { className: "text-base font-medium text-gray900", children: "No creators found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "mt-1 text-sm text-gray600", children: "Try adjusting your search criteria" })
+    ] })
+  ] });
+}
+function CreatorExpandedPanel({
+  isOpen,
+  onClose,
+  sessionId,
+  creatorIds,
+  version,
+  searchSpec,
+  fetchCreatorDetails
+}) {
+  const [creators, setCreators] = (0, import_react70.useState)([]);
+  const [loading, setLoading] = (0, import_react70.useState)(false);
+  const fetcher = fetchCreatorDetails ?? defaultFetchCreatorDetails;
+  const loadCreators = (0, import_react70.useCallback)(async () => {
+    if (!creatorIds.length) return;
+    setLoading(true);
+    try {
+      const data = await fetcher({ creatorIds, sessionId, versionNo: version });
+      setCreators((data.creatorData || []).map(formatCreator));
+    } catch (err) {
+      console.error("Failed to fetch creator details:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [creatorIds, sessionId, version, fetcher]);
+  (0, import_react70.useEffect)(() => {
+    if (isOpen && creatorIds.length > 0) {
+      loadCreators();
+    }
+  }, [isOpen, loadCreators]);
+  if (typeof window === "undefined") return null;
+  return import_react_dom2.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_framer_motion5.AnimatePresence, { mode: "sync", children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_jsx_runtime132.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        import_framer_motion5.motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0, display: "none" },
+          transition: { duration: 0.3 },
+          className: "fixed inset-0 bg-black bg-opacity-50 z-[60]",
+          onClick: (e) => {
+            e.stopPropagation();
+            onClose();
+          }
+        },
+        "overlay"
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        import_framer_motion5.motion.div,
+        {
+          initial: { x: "100%" },
+          animate: { x: 0 },
+          exit: { x: "100%" },
+          transition: { type: "spring", damping: 30, stiffness: 400 },
+          className: "fixed top-0 right-0 h-full w-full max-w-7xl bg-background dark:bg-gray25 z-[70] shadow-2xl overflow-y-auto border border-gray300",
+          children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "py-4 font-noto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex justify-between items-center w-full mb-4 pl-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("button", { onClick: onClose, className: "p-2 rounded-full transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(X, { className: "w-5 h-5" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex-1 flex flex-col w-[80%]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex flex-col md:flex-row justify-between gap-2 md:gap-0 md:items-center pr-16", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "w-fit rounded-md bg-purple200 px-2 py-[4px] mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h4", { className: "text-xs font-medium text-purpleText", children: "VERIFIED SEARCH RESULTS" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h2", { className: "text-xl font-bold mb-1", children: "Creators Search Results" })
+                ] }) }),
+                searchSpec && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(SearchSpecDisplay, { spec: searchSpec })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "border-b border-gray300" }),
+            loading ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex flex-col items-center justify-center py-16 gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "w-8 h-8 border-3 border-purple100 border-t-transparent rounded-full animate-spin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-sm text-gray600", children: "Fetching Creators" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(CreatorDisplay, { creators, isValidationComplete: version !== void 0 })
+          ] })
+        },
+        "creator-panel"
+      )
+    ] }) }),
+    document.body
+  );
+}
+
+// src/molecules/creator-discovery/CreatorWidget/useCreatorWidgetPolling.ts
+var import_react71 = require("react");
 var DEFAULT_POLLING_CONFIG = {
   pollInterval: 5e3,
   maxDuration: 15 * 60 * 1e3,
@@ -37225,27 +38970,29 @@ var DEFAULT_POLLING_CONFIG = {
 function useCreatorWidgetPolling({
   sessionId,
   currentVersion,
-  fetchVersions,
-  fetchStatus,
+  fetchVersions: fetchVersionsProp,
+  fetchStatus: fetchStatusProp,
   pollingConfig,
   onStatusChange
 }) {
-  const config = (0, import_react67.useMemo)(
+  const fetchVersions = fetchVersionsProp ?? defaultFetchVersions;
+  const fetchStatus = fetchStatusProp ?? defaultFetchStatus;
+  const config = (0, import_react71.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 [versionData, setVersionData] = (0, import_react71.useState)(null);
+  const [totalVersions, setTotalVersions] = (0, import_react71.useState)(0);
+  const [selectedVersion, setSelectedVersion] = (0, import_react71.useState)();
+  const [isLoadingVersion, setIsLoadingVersion] = (0, import_react71.useState)(false);
+  const [isValidationComplete, setIsValidationComplete] = (0, import_react71.useState)(false);
+  const [versionStatus, setVersionStatus] = (0, import_react71.useState)("checking");
+  const [statusDetails, setStatusDetails] = (0, import_react71.useState)();
+  const [timeDisplay, setTimeDisplay] = (0, import_react71.useState)("");
+  const [loadingStatus, setLoadingStatus] = (0, import_react71.useState)(true);
+  const remainingTimeRef = (0, import_react71.useRef)(0);
   const requestedVersion = selectedVersion ?? currentVersion ?? versionData?.currentVersion;
-  const fetchVersionData = (0, import_react67.useCallback)(async () => {
+  const fetchVersionData = (0, import_react71.useCallback)(async () => {
     if (!sessionId) return;
     if (!versionData) setIsLoadingVersion(true);
     try {
@@ -37266,17 +39013,17 @@ function useCreatorWidgetPolling({
       setIsLoadingVersion(false);
     }
   }, [sessionId, requestedVersion, isValidationComplete, fetchVersions, versionData]);
-  (0, import_react67.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     fetchVersionData();
   }, [sessionId, requestedVersion, isValidationComplete]);
-  (0, import_react67.useEffect)(() => {
+  (0, import_react71.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)(() => {
+  (0, import_react71.useEffect)(() => {
     if (!selectedVersion && !requestedVersion) return;
     const activeVersion = selectedVersion ?? requestedVersion;
     let isMounted = true;
@@ -37359,7 +39106,7 @@ function useCreatorWidgetPolling({
       stopPolling();
     };
   }, [selectedVersion, requestedVersion, sessionId]);
-  const versionNumbers = (0, import_react67.useMemo)(() => {
+  const versionNumbers = (0, import_react71.useMemo)(() => {
     if (!totalVersions) return [];
     return Array.from({ length: totalVersions }, (_, i) => i + 1);
   }, [totalVersions]);
@@ -37386,18 +39133,20 @@ function useCreatorWidgetPolling({
 }
 
 // src/molecules/creator-discovery/CreatorWidget/CreatorWidget.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 function CreatorWidgetInner({
   sessionId,
   currentVersion,
   isAgentOutput = false,
   fetchVersions,
   fetchStatus,
+  fetchCreatorDetails,
   pollingConfig,
   onStatusChange,
   onAction,
   className
 }) {
+  const [isExpanded, setIsExpanded] = (0, import_react72.useState)(false);
   const {
     versionNumbers,
     selectedVersion,
@@ -37418,11 +39167,12 @@ function CreatorWidgetInner({
     pollingConfig,
     onStatusChange
   });
-  const handleVersionSelect = (0, import_react68.useCallback)(
+  const handleVersionSelect = (0, import_react72.useCallback)(
     (version) => setSelectedVersion(version),
     [setSelectedVersion]
   );
-  const handleViewCreators = (0, import_react68.useCallback)(() => {
+  const handleViewCreators = (0, import_react72.useCallback)(() => {
+    setIsExpanded(true);
     onAction?.({
       type: "view-creators",
       sessionId,
@@ -37431,30 +39181,41 @@ function CreatorWidgetInner({
       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
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      CreatorCompactView,
+      {
+        versions: versionNumbers,
+        selectedVersion,
+        creatorImages,
+        creatorLength,
+        isAgentOutput,
+        onVersionSelect: handleVersionSelect,
+        onViewCreators: handleViewCreators,
+        versionStatus,
+        statusDetails,
+        timeDisplay,
+        isLoading
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      CreatorExpandedPanel,
+      {
+        isOpen: isExpanded,
+        onClose: () => setIsExpanded(false),
+        sessionId,
+        creatorIds,
+        version: selectedVersion,
+        searchSpec,
+        fetchCreatorDetails
+      }
+    )
+  ] });
 }
-var CreatorWidget = (0, import_react68.memo)(CreatorWidgetInner);
+var CreatorWidget = (0, import_react72.memo)(CreatorWidgetInner);
 
 // src/molecules/workstream-builder/ToolListCard/ToolListCard.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var FONT_STYLE = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -37525,7 +39286,7 @@ var ToolListCard = ({
     grouped[cat].push(tool);
   }
   const categories = Object.keys(grouped);
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
     "div",
     {
       className: cn(
@@ -37534,34 +39295,34 @@ var ToolListCard = ({
       ),
       style: FONT_STYLE,
       children: [
-        /* @__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_runtime134.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_runtime134.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Wrench, { className: "w-3.5 h-3.5 text-interactive" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.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.jsx)("div", { className: "divide-y divide-[var(--border-color)]", children: categories.map((cat) => {
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "divide-y divide-[var(--border-color)]", children: categories.map((cat) => {
           const CatIcon = resolveCategoryIcon(cat);
           const headerBg = CATEGORY_HEADER_BG[cat.toLowerCase()] || CATEGORY_HEADER_BG.general;
-          return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: cn("flex items-center gap-2 mb-2.5 -mx-4 px-4 py-1.5", headerBg), 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 })
+          return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: cn("flex items-center gap-2 mb-2.5 -mx-4 px-4 py-1.5", headerBg), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "space-y-1.5", children: grouped[cat].map((tool) => {
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "space-y-1.5", children: grouped[cat].map((tool) => {
               const ToolIcon = resolveIcon(tool);
-              return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime134.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_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 })
+                    /* @__PURE__ */ (0, import_jsx_runtime134.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_runtime134.jsx)(ToolIcon, { className: "w-3 h-3 text-interactive/60" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                        tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)] truncate max-w-full", children: tool.display_name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime134.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_runtime127.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_runtime134.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5 break-words whitespace-normal", children: tool.description })
                     ] })
                   ]
                 },
@@ -37576,8 +39337,8 @@ var ToolListCard = ({
 };
 
 // src/molecules/workstream-builder/AgentCard/AgentCard.tsx
-var import_react69 = require("react");
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_react73 = require("react");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var FONT_STYLE2 = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -37588,15 +39349,15 @@ var AgentCard = ({
   onSave,
   className
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react69.useState)(false);
-  const [isSaving, setIsSaving] = (0, import_react69.useState)(false);
-  const [editState, setEditState] = (0, import_react69.useState)({
+  const [isEditing, setIsEditing] = (0, import_react73.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react73.useState)(false);
+  const [editState, setEditState] = (0, import_react73.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_react69.useCallback)(() => {
+  const handleEdit = (0, import_react73.useCallback)(() => {
     setEditState({
       display_name: agent.display_name,
       description: agent.description,
@@ -37604,10 +39365,10 @@ var AgentCard = ({
     });
     setIsEditing(true);
   }, [agent]);
-  const handleCancel = (0, import_react69.useCallback)(() => {
+  const handleCancel = (0, import_react73.useCallback)(() => {
     setIsEditing(false);
   }, []);
-  const handleSave = (0, import_react69.useCallback)(async () => {
+  const handleSave = (0, import_react73.useCallback)(async () => {
     if (!onSave) return;
     const updates = {};
     if (editState.display_name !== agent.display_name)
@@ -37631,7 +39392,7 @@ var AgentCard = ({
     }
   }, [onSave, agent, editState]);
   if (compact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
       "div",
       {
         className: cn(
@@ -37640,14 +39401,14 @@ var AgentCard = ({
         ),
         style: FONT_STYLE2,
         children: [
-          /* @__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_runtime135.jsxs)(Avatar, { className: "h-8 w-8 shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-xs font-bold", children: agent.display_name.charAt(0) })
           ] }),
-          /* @__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.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
                 "span",
                 {
                   className: cn(
@@ -37655,7 +39416,7 @@ var AgentCard = ({
                     agent.enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: cn(
+                    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: cn(
                       "w-1.5 h-1.5 rounded-full",
                       agent.enabled ? "bg-emerald-500" : "bg-red-500"
                     ) }),
@@ -37664,13 +39425,13 @@ var AgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "text-[var(--foreground)]/50 text-xs truncate", children: agent.description })
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-[var(--foreground)]/50 text-xs truncate", children: agent.description })
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
     "div",
     {
       className: cn(
@@ -37679,14 +39440,14 @@ var AgentCard = ({
       ),
       style: FONT_STYLE2,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4 bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", 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_runtime135.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4 bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
+            /* @__PURE__ */ (0, import_jsx_runtime135.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-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)(
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-2", children: [
+              isEditing ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                 "input",
                 {
                   type: "text",
@@ -37696,9 +39457,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_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.jsxs)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime135.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_runtime135.jsxs)(
                 "span",
                 {
                   className: cn(
@@ -37706,7 +39467,7 @@ var AgentCard = ({
                     agent.enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: cn(
+                    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: cn(
                       "w-1.5 h-1.5 rounded-full",
                       agent.enabled ? "bg-emerald-500" : "bg-red-500"
                     ) }),
@@ -37715,7 +39476,7 @@ var AgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "mt-1", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "mt-1", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
               "textarea",
               {
                 value: editState.description,
@@ -37725,10 +39486,10 @@ var AgentCard = ({
                 rows: 2,
                 placeholder: "Describe this agent..."
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed whitespace-normal", 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)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed whitespace-normal", children: agent.description }) }),
+            isEditing && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold", children: "Avatar:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                 "input",
                 {
                   type: "text",
@@ -37741,8 +39502,8 @@ var AgentCard = ({
               )
             ] })
           ] }),
-          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)(
+          editable && onSave && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex items-center gap-1.5 shrink-0", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
               "button",
               {
                 onClick: handleCancel,
@@ -37751,7 +39512,7 @@ var AgentCard = ({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
               "button",
               {
                 onClick: handleSave,
@@ -37760,7 +39521,7 @@ var AgentCard = ({
                 children: isSaving ? "Saving..." : "Save"
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
             "button",
             {
               onClick: handleEdit,
@@ -37769,18 +39530,18 @@ var AgentCard = ({
             }
           ) })
         ] }),
-        /* @__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: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-3 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("span", { className: "text-[var(--foreground)]/40", children: [
           "Model:",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "font-mono text-[var(--foreground)]/70", children: agent.model })
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "font-mono text-[var(--foreground)]/70", children: agent.model })
         ] }) }),
-        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: [
+        agent.tools && agent.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.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_runtime128.jsx)("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
             "span",
             {
               className: "text-[11px] px-2 py-0.5 rounded-md bg-interactive/10 text-interactive font-mono border border-interactive/20",
@@ -37795,7 +39556,7 @@ var AgentCard = ({
 };
 
 // src/molecules/workstream-builder/AgentDataTable/AgentDataTable.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 var FONT_STYLE3 = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -37806,7 +39567,7 @@ var AgentDataTable = ({
 }) => {
   const renderCell = (value) => {
     if (typeof value === "boolean") {
-      return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
         "span",
         {
           className: cn(
@@ -37814,18 +39575,18 @@ var AgentDataTable = ({
             value ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
           ),
           children: [
-            value ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            value ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
             ] }),
             value ? "Yes" : "No"
           ]
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-[var(--foreground)]", children: String(value) });
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "text-[var(--foreground)]", children: String(value) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     "div",
     {
       className: cn(
@@ -37833,8 +39594,8 @@ var AgentDataTable = ({
         className
       ),
       style: FONT_STYLE3,
-      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)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("table", { className: "w-full text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("tr", { className: "border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
           "th",
           {
             className: "text-left px-4 py-2.5 text-[11px] font-semibold text-[var(--foreground)]/60 uppercase tracking-wide whitespace-nowrap",
@@ -37842,14 +39603,14 @@ var AgentDataTable = ({
           },
           header
         )) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
           "tr",
           {
             className: cn(
               "border-b border-[var(--border-color)] last:border-b-0 hover:bg-[var(--foreground)]/[0.03] transition-colors",
               rowIdx % 2 === 1 && "bg-[var(--foreground)]/[0.015]"
             ),
-            children: row.map((cell, cellIdx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            children: row.map((cell, cellIdx) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
               "td",
               {
                 className: "px-4 py-2.5 text-xs whitespace-nowrap",
@@ -37866,8 +39627,8 @@ var AgentDataTable = ({
 };
 
 // src/molecules/workstream-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
-var import_react70 = require("react");
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_react74 = require("react");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 var FONT_STYLE4 = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -37875,10 +39636,10 @@ var WorkflowVisualizer = ({
   steps,
   className
 }) => {
-  const [expandedStep, setExpandedStep] = (0, import_react70.useState)(
+  const [expandedStep, setExpandedStep] = (0, import_react74.useState)(
     steps[0]?.id || null
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
     "div",
     {
       className: cn(
@@ -37887,8 +39648,8 @@ var WorkflowVisualizer = ({
       ),
       style: FONT_STYLE4,
       children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime137.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_runtime137.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
             "svg",
             {
               width: "14",
@@ -37900,24 +39661,24 @@ var WorkflowVisualizer = ({
               className: "text-interactive",
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
             }
           ) }),
-          /* @__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: [
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Workflow" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.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_runtime130.jsx)("div", { className: "px-4 py-3", children: steps.map((step, idx) => {
+        /* @__PURE__ */ (0, import_jsx_runtime137.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_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" })
+          return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime137.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_runtime137.jsx)("span", { className: "text-[10px] font-bold text-interactive", children: idx + 1 }) }),
+              !isLast && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "w-0.5 flex-1 min-h-[16px] bg-interactive/15" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
               "div",
               {
                 className: cn(
@@ -37925,14 +39686,14 @@ var WorkflowVisualizer = ({
                   isExpanded ? "bg-[var(--foreground)]/[0.02] shadow-sm" : "hover:bg-[var(--foreground)]/[0.02] hover:shadow-sm hover:-translate-y-0.5"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
                     "button",
                     {
                       onClick: () => setExpandedStep(isExpanded ? null : step.id),
                       className: "w-full text-left px-3 py-2.5 flex items-center gap-2 whitespace-normal",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("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 }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: step.name }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
                           "svg",
                           {
                             width: "12",
@@ -37945,28 +39706,28 @@ var WorkflowVisualizer = ({
                               "shrink-0 text-[var(--foreground)]/30 transition-transform",
                               isExpanded && "rotate-180"
                             ),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("polyline", { points: "6 9 12 15 18 9" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("polyline", { points: "6 9 12 15 18 9" })
                           }
                         )
                       ]
                     }
                   ),
-                  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 whitespace-normal", 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)(
+                  isExpanded && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "px-3 pb-3 space-y-2.5", children: [
+                    step.description && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed whitespace-normal", children: step.description }),
+                    step.sub_steps && step.sub_steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "space-y-1", children: step.sub_steps.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
                       "div",
                       {
                         className: "flex items-start gap-2 text-xs",
                         children: [
-                          /* @__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 })
+                          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-interactive/40" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-[var(--foreground)]/60", children: sub.action })
                         ]
                       },
                       sub.id
                     )) }),
-                    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)(
+                    step.tools && step.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold tracking-wider", children: "Tools:" }),
+                      step.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime137.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",
@@ -37975,9 +39736,9 @@ var WorkflowVisualizer = ({
                         tool
                       ))
                     ] }),
-                    step.on_failure && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-start gap-2 text-xs bg-[var(--redBackground,_#ef4444)]/[0.06] border border-[var(--redText,_#ef4444)]/10 rounded-md px-2.5 py-2 whitespace-normal", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "shrink-0 text-[10px] font-semibold text-[var(--redText,_#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 })
+                    step.on_failure && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex items-start gap-2 text-xs bg-[var(--redBackground,_#ef4444)]/[0.06] border border-[var(--redText,_#ef4444)]/10 rounded-md px-2.5 py-2 whitespace-normal", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "shrink-0 text-[10px] font-semibold text-[var(--redText,_#ef4444)]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-[var(--foreground)]/50", children: step.on_failure })
                     ] })
                   ] })
                 ]
@@ -37991,8 +39752,8 @@ var WorkflowVisualizer = ({
 };
 
 // src/molecules/workstream-builder/InstructionPreview/InstructionPreview.tsx
-var import_react71 = require("react");
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_react75 = require("react");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 var FONT_STYLE5 = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -38004,12 +39765,12 @@ var InstructionPreview = ({
   tools,
   className
 }) => {
-  const [isExpanded, setIsExpanded] = (0, import_react71.useState)(false);
-  const [copied, setCopied] = (0, import_react71.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react75.useState)(false);
+  const [copied, setCopied] = (0, import_react75.useState)(false);
   const previewLength = 300;
   const isLong = instruction.length > previewLength;
   const displayText = isExpanded || !isLong ? instruction : instruction.slice(0, previewLength) + "...";
-  const handleCopy = (0, import_react71.useCallback)(async () => {
+  const handleCopy = (0, import_react75.useCallback)(async () => {
     try {
       await navigator.clipboard.writeText(instruction);
       setCopied(true);
@@ -38027,7 +39788,7 @@ var InstructionPreview = ({
       setTimeout(() => setCopied(false), 2e3);
     }
   }, [instruction]);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
     "div",
     {
       className: cn(
@@ -38036,8 +39797,8 @@ var InstructionPreview = ({
       ),
       style: FONT_STYLE5,
       children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
             "svg",
             {
               width: "14",
@@ -38050,24 +39811,24 @@ var InstructionPreview = ({
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
-                /* @__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_runtime138.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_runtime138.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("polyline", { points: "10 9 9 9 8 9" })
               ]
             }
           ) }),
-          /* @__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 whitespace-normal", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: agent_name }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-[11px] text-[var(--foreground)]/40 mt-0.5 whitespace-normal", children: description })
           ] })
         ] }) }),
-        /* @__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.jsxs)("div", { className: "flex items-center justify-between mb-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider", children: "Instruction" }),
-              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "px-4 py-3 space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex items-center justify-between mb-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider", children: "Instruction" }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
                 "button",
                 {
                   onClick: handleCopy,
@@ -38076,14 +39837,14 @@ var InstructionPreview = ({
                 }
               )
             ] }),
-            /* @__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.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime138.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_runtime138.jsxs)(
               "button",
               {
                 onClick: () => setIsExpanded(!isExpanded),
                 className: "inline-flex items-center gap-1 text-[11px] text-interactive hover:underline mt-1",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
                     "svg",
                     {
                       width: "12",
@@ -38093,7 +39854,7 @@ var InstructionPreview = ({
                       stroke: "currentColor",
                       strokeWidth: "2",
                       className: cn("transition-transform", isExpanded && "rotate-180"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("polyline", { points: "6 9 12 15 18 9" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("polyline", { points: "6 9 12 15 18 9" })
                     }
                   ),
                   isExpanded ? "Show less" : "Show full instruction"
@@ -38101,16 +39862,16 @@ var InstructionPreview = ({
               }
             )
           ] }),
-          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 })
+          workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "space-y-1", children: workflow_summary.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex items-start gap-2 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.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_runtime138.jsx)("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
             ] }, idx)) })
           ] }),
-          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)(
+          tools && tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Tools" }),
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
               "span",
               {
                 className: "text-[10px] font-mono px-2 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
@@ -38126,8 +39887,8 @@ var InstructionPreview = ({
 };
 
 // src/molecules/workstream-builder/UIComponentSelector/UIComponentSelector.tsx
-var import_react72 = require("react");
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_react76 = require("react");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 var FONT_STYLE6 = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -38138,11 +39899,11 @@ function UIComponentSelector({
   className,
   isLatestMessage = true
 }) {
-  const [selected, setSelected] = (0, import_react72.useState)(() => {
+  const [selected, setSelected] = (0, import_react76.useState)(() => {
     const recommended = components.filter((c) => c.recommended).map((c) => c.name);
     return new Set(recommended);
   });
-  const [submitted, setSubmitted] = (0, import_react72.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react76.useState)(false);
   const grouped = components.reduce(
     (acc, comp) => {
       const cat = comp.category || "Other";
@@ -38166,43 +39927,63 @@ function UIComponentSelector({
     onSelect?.(Array.from(selected));
   };
   const categoryOrder = Object.keys(grouped).sort();
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
     "div",
     {
       className: cn(
-        "rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        "my-3 rounded-xl border border-border bg-card overflow-hidden shadow-sm",
         className
       ),
       style: FONT_STYLE6,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h3", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Select UI Components" }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 mt-0.5", children: "Choose which visual components this agent can use in its responses." })
-        ] }),
-        /* @__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-[var(--foreground)]/50 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)(
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "px-4 py-3 border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "w-5 h-5 rounded-md bg-interactive/15 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: "text-interactive",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("h3", { className: "text-xs font-semibold text-foreground", children: "Select UI Components" }),
+            /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("h4", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2", children: category }),
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
             "label",
             {
               className: cn(
-                "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors",
-                submitted || !isLatestMessage ? "cursor-default opacity-70" : "hover:bg-[var(--foreground)]/[0.03]",
+                "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all",
+                submitted || !isLatestMessage ? "cursor-default opacity-60" : "hover:bg-muted/80",
                 selected.has(comp.name) && !submitted && "bg-interactive/5 border border-interactive/20",
                 selected.has(comp.name) && submitted && "bg-interactive/5"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                   "div",
                   {
                     className: cn(
                       "mt-0.5 w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
-                      selected.has(comp.name) ? "bg-interactive border-interactive" : "border-[var(--foreground)]/20"
+                      selected.has(comp.name) ? "bg-interactive border-interactive" : "border-muted-foreground/30"
                     ),
                     onClick: (e) => {
                       e.preventDefault();
                       toggle(comp.name);
                     },
-                    children: selected.has(comp.name) && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                    children: selected.has(comp.name) && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                       "svg",
                       {
                         width: "10",
@@ -38211,12 +39992,12 @@ function UIComponentSelector({
                         fill: "none",
                         stroke: "white",
                         strokeWidth: "3",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("polyline", { points: "20 6 9 17 4 12" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("polyline", { points: "20 6 9 17 4 12" })
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -38226,11 +40007,11 @@ function UIComponentSelector({
                     className: "sr-only"
                   }
                 ),
-                /* @__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-[var(--foreground)]", children: comp.display_name }),
-                    comp.recommended && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20", children: "Recommended" }),
-                    onPreview && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
+                    comp.recommended && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20", children: "Recommended" }),
+                    onPreview && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                       "button",
                       {
                         type: "button",
@@ -38239,9 +40020,9 @@ function UIComponentSelector({
                           e.stopPropagation();
                           onPreview(comp.name);
                         },
-                        className: "shrink-0 p-0.5 rounded hover:bg-[var(--foreground)]/10 transition-colors",
+                        className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
                         title: `Preview ${comp.display_name}`,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
                           "svg",
                           {
                             width: "14",
@@ -38252,30 +40033,30 @@ function UIComponentSelector({
                             strokeWidth: "2",
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
-                            className: "text-[var(--foreground)]/40 hover:text-interactive",
+                            className: "text-muted-foreground hover:text-interactive",
                             children: [
-                              /* @__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_runtime139.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
                             ]
                           }
                         )
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ml-0 text-xs text-[var(--foreground)]/50", children: comp.description })
+                  /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
                 ] })
               ]
             },
             comp.name
           )) })
         ] }, category)) }),
-        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4 py-3 border-t border-[var(--border-color)] flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "text-xs text-[var(--foreground)]/50", children: [
+        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "px-4 py-3 border-t border-border/60 flex items-center justify-between bg-muted/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
             selected.size,
             " selected"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
             "button",
             {
               onClick: handleContinue,
@@ -38283,14 +40064,15 @@ function UIComponentSelector({
               children: "Continue"
             }
           )
-        ] })
+        ] }),
+        submitted && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5", children: "Selections confirmed" }) })
       ]
     }
   );
 }
 
 // src/molecules/workstream-builder/MultiAgentCard/MultiAgentCard.tsx
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 var FONT_STYLE7 = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -38303,7 +40085,7 @@ var MultiAgentCard = ({
   className
 }) => {
   const avatarUrl = `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
     "div",
     {
       className: cn(
@@ -38312,14 +40094,14 @@ var MultiAgentCard = ({
       ),
       style: FONT_STYLE7,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4 bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", 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-2 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4 bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime140.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_runtime140.jsx)("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime140.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_runtime140.jsx)("span", { className: "text-[10px] px-2 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
                 "span",
                 {
                   className: cn(
@@ -38327,7 +40109,7 @@ var MultiAgentCard = ({
                     enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: cn(
+                    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("span", { className: cn(
                       "w-1.5 h-1.5 rounded-full",
                       enabled ? "bg-emerald-500" : "bg-red-500"
                     ) }),
@@ -38336,18 +40118,18 @@ var MultiAgentCard = ({
                 }
               )
             ] }),
-            /* @__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 })
+            /* @__PURE__ */ (0, import_jsx_runtime140.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_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.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-3", children: [
             "Stages (",
             stages.length,
             ")"
           ] }),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "flex flex-col items-center mr-3 w-5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
                 "div",
                 {
                   className: cn(
@@ -38357,20 +40139,20 @@ var MultiAgentCard = ({
                   children: idx + 1
                 }
               ),
-              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "w-px flex-1 min-h-[16px] border-l border-dashed border-interactive/30" })
+              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { className: "w-px flex-1 min-h-[16px] border-l border-dashed border-interactive/30" })
             ] }),
-            /* @__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 bg-[var(--foreground)]/[0.04] px-1.5 py-0.5 rounded", children: stage.agent_name })
+            /* @__PURE__ */ (0, import_jsx_runtime140.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_runtime140.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("span", { className: "text-[10px] font-mono text-[var(--foreground)]/30 bg-[var(--foreground)]/[0.04] px-1.5 py-0.5 rounded", children: stage.agent_name })
               ] }),
-              /* @__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: [
+              /* @__PURE__ */ (0, import_jsx_runtime140.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_runtime140.jsxs)("span", { children: [
                   stage.tools.length,
                   " tool",
                   stage.tools.length !== 1 ? "s" : ""
                 ] }),
-                stage.ui_components && stage.ui_components.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("span", { children: [
+                stage.ui_components && stage.ui_components.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("span", { children: [
                   stage.ui_components.length,
                   " component",
                   stage.ui_components.length !== 1 ? "s" : ""
@@ -38385,7 +40167,7 @@ var MultiAgentCard = ({
 };
 
 // src/molecules/workstream-builder/MultiAgentPlan/MultiAgentPlan.tsx
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime141 = require("react/jsx-runtime");
 var FONT_STYLE8 = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -38393,7 +40175,7 @@ var MultiAgentPlan = ({
   stages = [],
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
     "div",
     {
       className: cn(
@@ -38402,8 +40184,8 @@ var MultiAgentPlan = ({
       ),
       style: FONT_STYLE8,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", 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)(
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { className: "w-4 h-4 rounded bg-violet-500/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
             "svg",
             {
               width: "10",
@@ -38413,20 +40195,20 @@ var MultiAgentPlan = ({
               stroke: "currentColor",
               strokeWidth: "2",
               className: "text-violet-600",
-              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("path", { d: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("path", { d: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" })
             }
           ) }),
-          /* @__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_runtime141.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "Proposed Multi-Agent Workflow" }),
+          /* @__PURE__ */ (0, import_jsx_runtime141.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)("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 min-h-[12px] border-l border-dashed border-interactive/30" })
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "flex items-stretch min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "flex flex-col items-center mr-3 w-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.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_runtime141.jsx)("div", { className: "w-px flex-1 min-h-[12px] border-l border-dashed border-interactive/30" })
           ] }),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
+            stage.description && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
               "p",
               {
                 className: "text-[11px] text-foreground/50 mt-0.5 whitespace-normal",
@@ -38434,7 +40216,7 @@ var MultiAgentPlan = ({
                 children: stage.description
               }
             ),
-            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)(
+            stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
               "span",
               {
                 className: "text-[10px] px-1.5 py-0.5 rounded bg-interactive/10 text-interactive font-mono",
@@ -38450,8 +40232,8 @@ var MultiAgentPlan = ({
 };
 
 // src/molecules/workstream-builder/MultiAgentUISelector/MultiAgentUISelector.tsx
-var import_react73 = require("react");
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_react77 = require("react");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 var FONT_STYLE9 = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -38463,8 +40245,8 @@ var MultiAgentUISelector = ({
   className,
   isLatestMessage = true
 }) => {
-  const [activeStageId, setActiveStageId] = (0, import_react73.useState)(stages[0]?.id || "");
-  const [selections, setSelections] = (0, import_react73.useState)(
+  const [activeStageId, setActiveStageId] = (0, import_react77.useState)(stages[0]?.id || "");
+  const [selections, setSelections] = (0, import_react77.useState)(
     () => {
       const init = {};
       const recommendedNames = components.filter((c) => c.recommended).map((c) => c.name);
@@ -38475,14 +40257,14 @@ var MultiAgentUISelector = ({
       return init;
     }
   );
-  const [submitted, setSubmitted] = (0, import_react73.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react77.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_react73.useCallback)(
+  const toggleComponent = (0, import_react77.useCallback)(
     (stageId, compName) => {
       if (submitted || !isLatestMessage) return;
       setSelections((prev) => {
@@ -38499,7 +40281,7 @@ var MultiAgentUISelector = ({
     },
     [submitted]
   );
-  const selectAll = (0, import_react73.useCallback)(
+  const selectAll = (0, import_react77.useCallback)(
     (stageId) => {
       if (submitted || !isLatestMessage) return;
       setSelections((prev) => {
@@ -38510,7 +40292,7 @@ var MultiAgentUISelector = ({
     },
     [submitted, isLatestMessage, components]
   );
-  const clearAll = (0, import_react73.useCallback)(
+  const clearAll = (0, import_react77.useCallback)(
     (stageId) => {
       if (submitted || !isLatestMessage) return;
       setSelections((prev) => {
@@ -38521,7 +40303,7 @@ var MultiAgentUISelector = ({
     },
     [submitted, isLatestMessage]
   );
-  const handleContinue = (0, import_react73.useCallback)(() => {
+  const handleContinue = (0, import_react77.useCallback)(() => {
     setSubmitted(true);
     if (onSelect) {
       const result = {};
@@ -38532,59 +40314,59 @@ var MultiAgentUISelector = ({
     }
   }, [onSelect, selections]);
   const activeStage = stages.find((s) => s.id === activeStageId);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
     "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 shadow-sm",
+        "my-3 rounded-xl border border-border bg-card overflow-hidden shadow-sm",
         className
       ),
       style: FONT_STYLE9,
       children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: "px-4 py-3 border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: "w-5 h-5 rounded-md bg-interactive/15 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
             "svg",
             {
-              width: "10",
-              height: "10",
+              width: "12",
+              height: "12",
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
               strokeWidth: "2",
               className: "text-interactive",
               children: [
-                /* @__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_runtime142.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" })
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
+          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("span", { className: "text-xs font-semibold text-foreground", children: "UI Components per Stage" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex gap-1 border-b border-[var(--border-color)] px-4 py-2 bg-[var(--foreground)]/[0.01]", children: stages.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: "flex gap-1 border-b border-border/60 px-4 py-2 bg-muted/20", children: stages.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
           "button",
           {
             onClick: () => setActiveStageId(stage.id),
             className: cn(
               "px-3 py-1.5 text-[11px] font-medium rounded-full transition-colors",
-              activeStageId === stage.id ? "bg-interactive text-white" : "text-[var(--foreground)]/50 hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/[0.05]"
+              activeStageId === stage.id ? "bg-interactive text-white" : "text-muted-foreground hover:text-foreground hover:bg-muted"
             ),
             children: stage.name
           },
           stage.id
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "px-4 py-3", children: [
-          activeStage && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("p", { className: "text-[10px] text-[var(--foreground)]/40", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { className: "px-4 py-3", children: [
+          activeStage && /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("p", { className: "text-[10px] text-muted-foreground", children: [
               "Select components for ",
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("strong", { children: activeStage.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("strong", { className: "text-foreground", children: activeStage.name }),
               " (",
               activeStage.agent_name,
               ")"
             ] }),
-            !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+            !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
                 "button",
                 {
                   onClick: () => selectAll(activeStageId),
@@ -38592,22 +40374,22 @@ var MultiAgentUISelector = ({
                   children: "Select All"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-[var(--foreground)]/20", children: "|" }),
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("span", { className: "text-muted-foreground/40", children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
                 "button",
                 {
                   onClick: () => clearAll(activeStageId),
-                  className: "text-[10px] text-[var(--foreground)]/40 hover:text-[var(--foreground)]/60 font-medium",
+                  className: "text-[10px] text-muted-foreground hover:text-foreground font-medium",
                   children: "Clear"
                 }
               )
             ] })
           ] }),
-          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) => {
+          Object.entries(grouped).map(([category, comps]) => /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { className: "mb-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: category }),
+            /* @__PURE__ */ (0, import_jsx_runtime142.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_runtime135.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
                 "div",
                 {
                   role: "button",
@@ -38621,19 +40403,19 @@ var MultiAgentUISelector = ({
                   },
                   className: cn(
                     "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",
+                    isSelected ? "border-interactive bg-interactive/5" : "border-border hover:border-interactive/50",
                     (submitted || !isLatestMessage) && "opacity-60 cursor-default"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime142.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"
+                            isSelected ? "bg-interactive border-interactive" : "border-muted-foreground/30"
                           ),
-                          children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+                          children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
                             "svg",
                             {
                               width: "8",
@@ -38642,14 +40424,14 @@ var MultiAgentUISelector = ({
                               fill: "none",
                               stroke: "white",
                               strokeWidth: "3",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("polyline", { points: "20 6 9 17 4 12" })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("polyline", { points: "20 6 9 17 4 12" })
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
-                      comp.recommended && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "px-1 py-px text-[8px] font-semibold uppercase tracking-wider rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 leading-tight", children: "Rec" }),
-                      onPreview && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("span", { className: "font-medium text-foreground", children: comp.display_name }),
+                      comp.recommended && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("span", { className: "px-1 py-px text-[8px] font-semibold uppercase tracking-wider rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 leading-tight", children: "Rec" }),
+                      onPreview && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
                         "button",
                         {
                           type: "button",
@@ -38657,9 +40439,9 @@ var MultiAgentUISelector = ({
                             e.stopPropagation();
                             onPreview(comp.name);
                           },
-                          className: "ml-auto shrink-0 p-0.5 rounded hover:bg-[var(--foreground)]/10 transition-colors",
+                          className: "ml-auto shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
                           title: `Preview ${comp.display_name}`,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
                             "svg",
                             {
                               width: "14",
@@ -38670,18 +40452,18 @@ var MultiAgentUISelector = ({
                               strokeWidth: "2",
                               strokeLinecap: "round",
                               strokeLinejoin: "round",
-                              className: "text-[var(--foreground)]/40 hover:text-[var(--primary-color)]",
+                              className: "text-muted-foreground hover:text-primary",
                               children: [
-                                /* @__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_runtime142.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
                               ]
                             }
                           )
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
+                    /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("p", { className: "text-[10px] text-muted-foreground mt-0.5 ml-5 whitespace-normal", children: comp.description })
                   ]
                 },
                 comp.name
@@ -38689,7 +40471,7 @@ var MultiAgentUISelector = ({
             }) })
           ] }, category))
         ] }),
-        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: "px-4 py-3 border-t border-border/60 bg-muted/30", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
           "button",
           {
             onClick: handleContinue,
@@ -38697,14 +40479,14 @@ var MultiAgentUISelector = ({
             children: "Continue"
           }
         ) }),
-        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" }) })
+        submitted && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5", children: "Selections confirmed" }) })
       ]
     }
   );
 };
 
 // src/molecules/workstream-builder/StageIndicator/StageIndicator.tsx
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime143 = require("react/jsx-runtime");
 var FONT_STYLE10 = {
   fontFamily: "Inter, system-ui, sans-serif"
 };
@@ -38713,7 +40495,7 @@ var StageIndicator = ({
   agent_name,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
     "div",
     {
       className: cn(
@@ -38722,12 +40504,12 @@ var StageIndicator = ({
       ),
       style: { ...FONT_STYLE10, animation: "fadeIn 0.3s ease-out" },
       children: [
-        /* @__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_runtime143.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime143.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_runtime143.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime143.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_runtime143.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" })
       ]
     }
   );
@@ -39025,7 +40807,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_runtime137 = require("react/jsx-runtime");
+var import_jsx_runtime144 = 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",
   {
@@ -39045,7 +40827,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
     "div",
     {
       role: "group",
@@ -39062,7 +40844,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? import_react_slot4.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
     Comp,
     {
       className: cn(
@@ -39078,7 +40860,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
     Separator2,
     {
       "data-slot": "button-group-separator",
@@ -39094,9 +40876,9 @@ function ButtonGroupSeparator({
 
 // src/components/ui/empty.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime145 = require("react/jsx-runtime");
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
     "div",
     {
       "data-slot": "empty",
@@ -39109,7 +40891,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
     "div",
     {
       "data-slot": "empty-header",
@@ -39140,7 +40922,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
     "div",
     {
       "data-slot": "empty-icon",
@@ -39151,7 +40933,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
     "div",
     {
       "data-slot": "empty-title",
@@ -39161,7 +40943,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
     "div",
     {
       "data-slot": "empty-description",
@@ -39174,7 +40956,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
     "div",
     {
       "data-slot": "empty-content",
@@ -39188,11 +40970,11 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-var import_react74 = require("react");
+var import_react78 = require("react");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime139 = require("react/jsx-runtime");
+var import_jsx_runtime146 = require("react/jsx-runtime");
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -39210,7 +40992,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     "legend",
     {
       "data-slot": "field-legend",
@@ -39226,7 +41008,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     "div",
     {
       "data-slot": "field-group",
@@ -39266,7 +41048,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     "div",
     {
       role: "group",
@@ -39278,7 +41060,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     "div",
     {
       "data-slot": "field-content",
@@ -39294,7 +41076,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     Label,
     {
       "data-slot": "field-label",
@@ -39309,7 +41091,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     "div",
     {
       "data-slot": "field-label",
@@ -39322,7 +41104,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     "p",
     {
       "data-slot": "field-description",
@@ -39341,7 +41123,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
     "div",
     {
       "data-slot": "field-separator",
@@ -39352,8 +41134,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
           "span",
           {
             className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
@@ -39371,7 +41153,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = (0, import_react74.useMemo)(() => {
+  const content = (0, import_react78.useMemo)(() => {
     if (children) {
       return children;
     }
@@ -39381,14 +41163,14 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    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)
+    return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     "div",
     {
       role: "alert",
@@ -39402,9 +41184,9 @@ function FieldError({
 
 // src/components/ui/input-group.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime147 = require("react/jsx-runtime");
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
     "div",
     {
       "data-slot": "input-group",
@@ -39448,7 +41230,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
     "div",
     {
       role: "group",
@@ -39488,7 +41270,7 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
     Button,
     {
       type,
@@ -39500,7 +41282,7 @@ function InputGroupButton({
   );
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
     "span",
     {
       className: cn(
@@ -39515,7 +41297,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
     Input,
     {
       "data-slot": "input-group-control",
@@ -39531,7 +41313,7 @@ function InputGroupTextarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -39547,9 +41329,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_runtime141 = require("react/jsx-runtime");
+var import_jsx_runtime148 = require("react/jsx-runtime");
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     "div",
     {
       role: "list",
@@ -39563,7 +41345,7 @@ function ItemSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     Separator2,
     {
       "data-slot": "item-separator",
@@ -39601,7 +41383,7 @@ function Item8({
   ...props
 }) {
   const Comp = asChild ? import_react_slot5.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     Comp,
     {
       "data-slot": "item",
@@ -39632,7 +41414,7 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     "div",
     {
       "data-slot": "item-media",
@@ -39643,7 +41425,7 @@ function ItemMedia({
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     "div",
     {
       "data-slot": "item-content",
@@ -39656,7 +41438,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     "div",
     {
       "data-slot": "item-title",
@@ -39669,7 +41451,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     "p",
     {
       "data-slot": "item-description",
@@ -39683,7 +41465,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     "div",
     {
       "data-slot": "item-actions",
@@ -39693,7 +41475,7 @@ function ItemActions({ className, ...props }) {
   );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     "div",
     {
       "data-slot": "item-header",
@@ -39706,7 +41488,7 @@ function ItemHeader({ className, ...props }) {
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
     "div",
     {
       "data-slot": "item-footer",
@@ -39720,9 +41502,9 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/kbd.tsx
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_jsx_runtime149 = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
     "kbd",
     {
       "data-slot": "kbd",
@@ -39737,7 +41519,7 @@ function Kbd({ className, ...props }) {
   );
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
     "kbd",
     {
       "data-slot": "kbd-group",
@@ -39770,7 +41552,7 @@ function useIsMobile() {
 }
 
 // src/components/ui/sidebar.tsx
-var import_jsx_runtime143 = require("react/jsx-runtime");
+var import_jsx_runtime150 = require("react/jsx-runtime");
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
@@ -39837,7 +41619,7 @@ var SidebarProvider = React100.forwardRef(
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     );
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
       "div",
       {
         style: {
@@ -39868,7 +41650,7 @@ var Sidebar = React100.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
         "div",
         {
           className: cn(
@@ -39882,7 +41664,7 @@ var Sidebar = React100.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -39893,16 +41675,16 @@ var Sidebar = React100.forwardRef(
           },
           side,
           children: [
-            /* @__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_runtime150.jsxs)(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { className: "flex h-full w-full flex-col", children })
+            /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "flex h-full w-full flex-col", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(
       "div",
       {
         ref,
@@ -39912,7 +41694,7 @@ var Sidebar = React100.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
             "div",
             {
               className: cn(
@@ -39923,7 +41705,7 @@ var Sidebar = React100.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
             "div",
             {
               className: cn(
@@ -39934,7 +41716,7 @@ var Sidebar = React100.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -39952,7 +41734,7 @@ var Sidebar = React100.forwardRef(
 Sidebar.displayName = "Sidebar";
 var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(
     Button,
     {
       ref,
@@ -39966,8 +41748,8 @@ var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(PanelLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(PanelLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
@@ -39975,7 +41757,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_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     "button",
     {
       ref,
@@ -39999,7 +41781,7 @@ var SidebarRail = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarRail.displayName = "SidebarRail";
 var SidebarInset = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     "main",
     {
       ref,
@@ -40014,7 +41796,7 @@ var SidebarInset = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInset.displayName = "SidebarInset";
 var SidebarInput = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     Input,
     {
       ref,
@@ -40029,7 +41811,7 @@ var SidebarInput = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInput.displayName = "SidebarInput";
 var SidebarHeader = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     "div",
     {
       ref,
@@ -40041,7 +41823,7 @@ var SidebarHeader = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarFooter = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     "div",
     {
       ref,
@@ -40053,7 +41835,7 @@ var SidebarFooter = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarFooter.displayName = "SidebarFooter";
 var SidebarSeparator = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     Separator2,
     {
       ref,
@@ -40065,7 +41847,7 @@ var SidebarSeparator = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarSeparator.displayName = "SidebarSeparator";
 var SidebarContent = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     "div",
     {
       ref,
@@ -40080,7 +41862,7 @@ var SidebarContent = React100.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarContent.displayName = "SidebarContent";
 var SidebarGroup = React100.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     "div",
     {
       ref,
@@ -40093,7 +41875,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_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     Comp,
     {
       ref,
@@ -40110,7 +41892,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_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     Comp,
     {
       ref,
@@ -40127,7 +41909,7 @@ var SidebarGroupAction = React100.forwardRef(({ className, asChild = false, ...p
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
   "div",
   {
     ref,
@@ -40137,7 +41919,7 @@ var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
   "ul",
   {
     ref,
@@ -40147,7 +41929,7 @@ var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+var SidebarMenuItem = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
   "li",
   {
     ref,
@@ -40189,7 +41971,7 @@ var SidebarMenuButton = React100.forwardRef(
   }, ref) => {
     const Comp = asChild ? import_react_slot6.Slot : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
       Comp,
       {
         ref,
@@ -40208,9 +41990,9 @@ var SidebarMenuButton = React100.forwardRef(
         children: tooltip
       };
     }
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
         TooltipContent,
         {
           side: "right",
@@ -40225,7 +42007,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_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     Comp,
     {
       ref,
@@ -40246,7 +42028,7 @@ var SidebarMenuAction = React100.forwardRef(({ className, asChild = false, showO
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+var SidebarMenuBadge = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
   "div",
   {
     ref,
@@ -40268,7 +42050,7 @@ var SidebarMenuSkeleton = React100.forwardRef(({ className, showIcon = false, ..
   const width = React100.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(
     "div",
     {
       ref,
@@ -40276,14 +42058,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_runtime143.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
           Skeleton,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
@@ -40298,7 +42080,7 @@ var SidebarMenuSkeleton = React100.forwardRef(({ className, showIcon = false, ..
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
   "ul",
   {
     ref,
@@ -40312,11 +42094,11 @@ var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React100.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("li", { ref, ...props }));
+var SidebarMenuSubItem = React100.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime150.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_runtime143.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     Comp,
     {
       ref,
@@ -40340,20 +42122,20 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner = require("sonner");
-var import_jsx_runtime144 = require("react/jsx-runtime");
+var import_jsx_runtime151 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = (0, import_next_themes.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
     import_sonner.Toaster,
     {
       theme,
       className: "toaster group",
       icons: {
-        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" })
+        success: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(CircleCheck, { className: "h-4 w-4" }),
+        info: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(Info, { className: "h-4 w-4" }),
+        warning: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(TriangleAlert, { className: "h-4 w-4" }),
+        error: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(OctagonX, { className: "h-4 w-4" }),
+        loading: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -40371,24 +42153,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_runtime145 = require("react/jsx-runtime");
+var import_jsx_runtime152 = 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_runtime145.jsx)(
+var ToggleGroup = React101.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime152.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_runtime145.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -40407,7 +42189,7 @@ var ToggleGroupItem = React101.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
-var import_jsx_runtime146 = require("react/jsx-runtime");
+var import_jsx_runtime153 = require("react/jsx-runtime");
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -40499,24 +42281,24 @@ var COMPONENT_SUGGESTIONS = {
 };
 var renderContextDependentError = (componentName, normalizedName, key) => {
   const suggestion = COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom (if available)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime153.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_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: [
+        /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
               "Invalid Component: ",
               componentName
             ] }),
-            /* @__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_runtime153.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.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 })
+        /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
         ] })
       ]
     },
@@ -40596,7 +42378,7 @@ var PXEngineRenderer = ({
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
-    if (import_react75.default.isValidElement(component)) {
+    if (import_react79.default.isValidElement(component)) {
       return component;
     }
     if (!component || typeof component !== "object") return null;
@@ -40675,7 +42457,7 @@ var PXEngineRenderer = ({
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
-      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -40687,7 +42469,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -40699,7 +42481,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ (0, import_jsx_runtime153.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 = {
@@ -40795,6 +42577,7 @@ var PXEngineRenderer = ({
   CountrySelectEdit,
   CreatorActionHeader,
   CreatorCompactView,
+  CreatorExpandedPanel,
   CreatorGridCard,
   CreatorImageList,
   CreatorProfileSummary,
@@ -40980,6 +42763,8 @@ var PXEngineRenderer = ({
   VideoAtom,
   WorkflowVisualizer,
   cn,
+  defaultFetchSelections,
+  defaultPersistSelection,
   generateFieldsFromData,
   generateFieldsFromPropDefinitions,
   useCreatorWidgetPolling