pxengine 0.1.42 → 0.1.44

package/dist/index.cjs

@@ -36156,13 +36156,14 @@ var TikTokIcon2 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime113.j
 var CreatorGridCard = ({
   bannerSrc,
   avatarSrc,
-  name,
-  handle,
-  metrics,
-  platforms,
+  name = "",
+  handle = "",
+  metrics = [],
+  platforms = [],
   className
 }) => {
   const getIcon = (p) => {
+    if (typeof p !== "string") return null;
     switch (p.toLowerCase()) {
       case "instagram":
         return Instagram;
@@ -36176,6 +36177,9 @@ var CreatorGridCard = ({
         return null;
     }
   };
+  const safePlatforms = Array.isArray(platforms) ? platforms : [];
+  const safeMetrics = Array.isArray(metrics) ? metrics : [];
+  const displayName = typeof name === "string" ? name : String(name || "");
   return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
     Card,
     {
@@ -36189,7 +36193,7 @@ var CreatorGridCard = ({
             "img",
             {
               src: bannerSrc,
-              alt: name,
+              alt: displayName,
               className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "h-full w-full bg-gradient-to-br from-purple-500 to-indigo-600" }),
@@ -36197,17 +36201,17 @@ var CreatorGridCard = ({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(CardContent, { className: "relative pt-0 px-5 pb-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "absolute -top-10 left-5", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(Avatar, { className: "h-20 w-20 border-4 border-[var(--card-background)] shadow-lg ring-2 ring-purple-100/20", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(AvatarImage, { src: avatarSrc, alt: name }),
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(AvatarFallback, { className: "bg-purple-500/10 text-purple-500 font-bold text-xl", children: name.charAt(0) })
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(AvatarImage, { src: avatarSrc, alt: displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(AvatarFallback, { className: "bg-purple-500/10 text-purple-500 font-bold text-xl", children: displayName.charAt(0) || "?" })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "mt-12 flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("h3", { className: "text-xl font-bold text-[var(--foreground)] truncate", children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("h3", { className: "text-xl font-bold text-[var(--foreground)] truncate", children: displayName }),
             /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("p", { className: "text-sm text-[var(--foreground)]/60 font-medium", children: [
               "@",
               handle
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "mt-4 flex gap-2", children: platforms.map((p) => {
+          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "mt-4 flex gap-2", children: safePlatforms.map((p, i) => {
             const Icon3 = getIcon(p);
             return Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
               "div",
@@ -36215,10 +36219,10 @@ var CreatorGridCard = ({
                 className: "p-1.5 rounded-lg bg-[var(--foreground)]/5 text-[var(--foreground)]/60 hover:text-purple-500 hover:bg-purple-500/10 transition-colors",
                 children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Icon3, { className: "h-4 w-4" })
               },
-              p
+              typeof p === "string" ? p : i
             ) : null;
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "mt-6 grid grid-cols-2 gap-4 border-t border-[var(--border-color)] pt-4", children: metrics.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "mt-6 grid grid-cols-2 gap-4 border-t border-[var(--border-color)] pt-4", children: safeMetrics.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wider text-[var(--foreground)]/40", children: m.label }),
             /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: "text-sm font-bold text-[var(--primary-color)]", children: m.value })
           ] }, i)) })
@@ -37414,8 +37418,11 @@ function CreatorWidgetInner({
 }
 var CreatorWidget = (0, import_react68.memo)(CreatorWidgetInner);
 
-// src/molecules/agent-builder/ToolListCard/ToolListCard.tsx
+// src/molecules/workstream-builder/ToolListCard/ToolListCard.tsx
 var import_jsx_runtime127 = require("react/jsx-runtime");
+var FONT_STYLE = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var ICON_MAP = {
   Search,
   Database,
@@ -37452,6 +37459,17 @@ var CATEGORY_FALLBACK = {
   security: Shield,
   general: Zap
 };
+var CATEGORY_HEADER_BG = {
+  search: "bg-blue-500/[0.04]",
+  data: "bg-emerald-500/[0.04]",
+  knowledge: "bg-purple-500/[0.04]",
+  web: "bg-cyan-500/[0.04]",
+  content: "bg-pink-500/[0.04]",
+  ui: "bg-violet-500/[0.04]",
+  analytics: "bg-orange-500/[0.04]",
+  integration: "bg-amber-500/[0.04]",
+  general: "bg-[var(--foreground)]/[0.02]"
+};
 function resolveIcon(tool) {
   if (tool.icon && ICON_MAP[tool.icon]) return ICON_MAP[tool.icon];
   if (tool.category && CATEGORY_FALLBACK[tool.category.toLowerCase()])
@@ -37479,6 +37497,7 @@ var ToolListCard = ({
         "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",
         className
       ),
+      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" }) }),
@@ -37487,8 +37506,9 @@ var ToolListCard = ({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime127.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: "flex items-center gap-2 mb-2.5", 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 })
@@ -37520,9 +37540,12 @@ var ToolListCard = ({
   );
 };
 
-// src/molecules/agent-builder/AgentCard/AgentCard.tsx
+// src/molecules/workstream-builder/AgentCard/AgentCard.tsx
 var import_react69 = require("react");
 var import_jsx_runtime128 = require("react/jsx-runtime");
+var FONT_STYLE2 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var AgentCard = ({
   agent,
   editable = true,
@@ -37580,6 +37603,7 @@ var AgentCard = ({
           "flex items-center gap-3 py-1",
           className
         ),
+        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 }),
@@ -37588,14 +37612,20 @@ var AgentCard = ({
           /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
                 "span",
                 {
                   className: cn(
-                    "text-[10px] px-1.5 py-0.5 rounded-full font-medium",
+                    "inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full font-medium",
                     agent.enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
                   ),
-                  children: agent.enabled ? "Active" : "Disabled"
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: cn(
+                      "w-1.5 h-1.5 rounded-full",
+                      agent.enabled ? "bg-emerald-500" : "bg-red-500"
+                    ) }),
+                    agent.enabled ? "Active" : "Disabled"
+                  ]
                 }
               )
             ] }),
@@ -37612,8 +37642,9 @@ var AgentCard = ({
         "text-foreground hover:bg-muted/50 hover:text-foreground my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
         className
       ),
+      style: FONT_STYLE2,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", 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) })
@@ -37632,14 +37663,20 @@ var AgentCard = ({
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
               /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: agent.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
                 "span",
                 {
                   className: cn(
-                    "text-[10px] px-1.5 py-0.5 rounded-full font-medium",
+                    "inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full font-medium",
                     agent.enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
                   ),
-                  children: agent.enabled ? "Active" : "Disabled"
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: cn(
+                      "w-1.5 h-1.5 rounded-full",
+                      agent.enabled ? "bg-emerald-500" : "bg-red-500"
+                    ) }),
+                    agent.enabled ? "Active" : "Disabled"
+                  ]
                 }
               )
             ] }),
@@ -37653,7 +37690,7 @@ var AgentCard = ({
                 rows: 2,
                 placeholder: "Describe this agent..."
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed", children: agent.description }) }),
+            ) : /* @__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)(
@@ -37722,8 +37759,11 @@ var AgentCard = ({
   );
 };
 
-// src/molecules/agent-builder/AgentDataTable/AgentDataTable.tsx
+// src/molecules/workstream-builder/AgentDataTable/AgentDataTable.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
+var FONT_STYLE3 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var AgentDataTable = ({
   headers,
   rows,
@@ -37735,19 +37775,14 @@ var AgentDataTable = ({
         "span",
         {
           className: cn(
-            "inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full",
+            "inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-0.5 rounded-full",
             value ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-              "span",
-              {
-                className: cn(
-                  "w-1.5 h-1.5 rounded-full",
-                  value ? "bg-emerald-500" : "bg-red-500"
-                )
-              }
-            ),
+            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 ? "Yes" : "No"
           ]
         }
@@ -37762,6 +37797,7 @@ var AgentDataTable = ({
         "text-foreground hover:bg-muted/50 hover:text-foreground my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
         className
       ),
+      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)(
           "th",
@@ -37774,7 +37810,10 @@ var AgentDataTable = ({
         /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
           "tr",
           {
-            className: "border-b border-[var(--border-color)] last:border-b-0 hover:bg-[var(--foreground)]/[0.02] transition-colors",
+            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)(
               "td",
               {
@@ -37791,14 +37830,19 @@ var AgentDataTable = ({
   );
 };
 
-// src/molecules/agent-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
+// src/molecules/workstream-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
 var import_react70 = require("react");
 var import_jsx_runtime130 = require("react/jsx-runtime");
+var FONT_STYLE4 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var WorkflowVisualizer = ({
   steps,
   className
 }) => {
-  const [expandedStep, setExpandedStep] = (0, import_react70.useState)(null);
+  const [expandedStep, setExpandedStep] = (0, import_react70.useState)(
+    steps[0]?.id || null
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
     "div",
     {
@@ -37806,6 +37850,7 @@ var WorkflowVisualizer = ({
         "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",
         className
       ),
+      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)(
@@ -37841,23 +37886,17 @@ var WorkflowVisualizer = ({
               "div",
               {
                 className: cn(
-                  "flex-1 mb-3 rounded-lg border border-[var(--border-color)] transition-colors",
-                  isExpanded ? "bg-[var(--foreground)]/[0.02]" : "hover:bg-[var(--foreground)]/[0.02]"
+                  "flex-1 mb-3 rounded-lg border border-[var(--border-color)] transition-all",
+                  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)(
                     "button",
                     {
                       onClick: () => setExpandedStep(isExpanded ? null : step.id),
-                      className: "w-full text-left px-3 py-2.5 flex items-center gap-2",
+                      className: "w-full text-left px-3 py-2.5 flex items-center gap-2 whitespace-normal",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: step.name }),
-                          step.description && !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("span", { className: "text-xs text-[var(--foreground)]/40 ml-2", children: [
-                            "\u2014 ",
-                            step.description
-                          ] })
-                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_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)(
                           "svg",
                           {
@@ -37878,7 +37917,7 @@ var WorkflowVisualizer = ({
                     }
                   ),
                   isExpanded && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "px-3 pb-3 space-y-2.5", children: [
-                    step.description && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed", children: step.description }),
+                    step.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)(
                       "div",
                       {
@@ -37901,8 +37940,8 @@ var WorkflowVisualizer = ({
                         tool
                       ))
                     ] }),
-                    step.on_failure && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-start gap-2 text-xs bg-[#ef4444]/[0.06] border border-[#ef4444]/10 rounded-md px-2.5 py-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "shrink-0 text-[10px] font-semibold text-[#ef4444]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
+                    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 })
                     ] })
                   ] })
@@ -37916,9 +37955,12 @@ var WorkflowVisualizer = ({
   );
 };
 
-// src/molecules/agent-builder/InstructionPreview/InstructionPreview.tsx
+// src/molecules/workstream-builder/InstructionPreview/InstructionPreview.tsx
 var import_react71 = require("react");
 var import_jsx_runtime131 = require("react/jsx-runtime");
+var FONT_STYLE5 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var InstructionPreview = ({
   agent_name,
   description,
@@ -37928,9 +37970,28 @@ var InstructionPreview = ({
   className
 }) => {
   const [isExpanded, setIsExpanded] = (0, import_react71.useState)(false);
+  const [copied, setCopied] = (0, import_react71.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 () => {
+    try {
+      await navigator.clipboard.writeText(instruction);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = instruction;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  }, [instruction]);
   return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
     "div",
     {
@@ -37938,6 +37999,7 @@ var InstructionPreview = ({
         "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",
         className
       ),
+      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)(
@@ -37963,19 +38025,44 @@ var InstructionPreview = ({
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: agent_name }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-[11px] text-[var(--foreground)]/40 mt-0.5", children: description })
+            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_runtime131.jsxs)("div", { className: "px-4 py-3 space-y-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Instruction" }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.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)(
+                "button",
+                {
+                  onClick: handleCopy,
+                  className: "text-[10px] px-2 py-0.5 rounded-md text-interactive hover:bg-interactive/10 transition-colors font-medium",
+                  children: copied ? "Copied!" : "Copy"
+                }
+              )
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed whitespace-pre-wrap font-mono bg-[var(--foreground)]/[0.02] border border-[var(--border-color)] rounded-lg p-3", children: displayText }),
-            isLong && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+            isLong && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
               "button",
               {
                 onClick: () => setIsExpanded(!isExpanded),
-                className: "text-[11px] text-interactive hover:underline mt-1",
-                children: isExpanded ? "Show less" : "Show full instruction"
+                className: "inline-flex items-center gap-1 text-[11px] text-interactive hover:underline mt-1",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+                    "svg",
+                    {
+                      width: "12",
+                      height: "12",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      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" })
+                    }
+                  ),
+                  isExpanded ? "Show less" : "Show full instruction"
+                ]
               }
             )
           ] }),
@@ -38003,16 +38090,23 @@ var InstructionPreview = ({
   );
 };
 
-// src/molecules/agent-builder/UIComponentSelector/UIComponentSelector.tsx
+// src/molecules/workstream-builder/UIComponentSelector/UIComponentSelector.tsx
 var import_react72 = require("react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
+var FONT_STYLE6 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 function UIComponentSelector({
   components,
   onSelect,
   onPreview,
-  className
+  className,
+  isLatestMessage = true
 }) {
-  const [selected, setSelected] = (0, import_react72.useState)(/* @__PURE__ */ new Set());
+  const [selected, setSelected] = (0, import_react72.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 grouped = components.reduce(
     (acc, comp) => {
@@ -38024,7 +38118,7 @@ function UIComponentSelector({
     {}
   );
   const toggle = (name) => {
-    if (submitted) return;
+    if (submitted || !isLatestMessage) return;
     setSelected((prev) => {
       const next = new Set(prev);
       if (next.has(name)) next.delete(name);
@@ -38041,39 +38135,66 @@ function UIComponentSelector({
     "div",
     {
       className: cn(
-        "rounded-xl border border-border bg-card overflow-hidden",
+        "rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
         className
       ),
+      style: FONT_STYLE6,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4 py-3 border-b border-border bg-muted/50", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: "Select UI Components" }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
+        /* @__PURE__ */ (0, import_jsx_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-muted-foreground uppercase tracking-wider mb-2", children: category }),
+          /* @__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)(
             "label",
             {
               className: cn(
                 "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors",
-                submitted ? "cursor-default opacity-70" : "hover:bg-muted/50",
+                submitted || !isLatestMessage ? "cursor-default opacity-70" : "hover:bg-[var(--foreground)]/[0.03]",
                 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)(
+                  "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"
+                    ),
+                    onClick: (e) => {
+                      e.preventDefault();
+                      toggle(comp.name);
+                    },
+                    children: selected.has(comp.name) && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                      "svg",
+                      {
+                        width: "10",
+                        height: "10",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "white",
+                        strokeWidth: "3",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("polyline", { points: "20 6 9 17 4 12" })
+                      }
+                    )
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                   "input",
                   {
                     type: "checkbox",
                     checked: selected.has(comp.name),
                     onChange: () => toggle(comp.name),
-                    disabled: submitted,
-                    className: "mt-0.5 h-4 w-4 rounded border-border text-interactive focus:ring-interactive/50 disabled:opacity-50"
+                    disabled: submitted || !isLatestMessage,
+                    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-foreground", children: comp.display_name }),
+                    /* @__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)(
                       "button",
                       {
@@ -38083,7 +38204,7 @@ function UIComponentSelector({
                           e.stopPropagation();
                           onPreview(comp.name);
                         },
-                        className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
+                        className: "shrink-0 p-0.5 rounded hover:bg-[var(--foreground)]/10 transition-colors",
                         title: `Preview ${comp.display_name}`,
                         children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
                           "svg",
@@ -38096,7 +38217,7 @@ function UIComponentSelector({
                             strokeWidth: "2",
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
-                            className: "text-muted-foreground hover:text-primary",
+                            className: "text-[var(--foreground)]/40 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" }),
@@ -38107,15 +38228,15 @@ function UIComponentSelector({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ml-0 text-xs text-[var(--foreground)]/50", children: comp.description })
                 ] })
               ]
             },
             comp.name
           )) })
         ] }, category)) }),
-        !submitted && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4 py-3 border-t border-border flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+        !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: [
             selected.size,
             " selected"
           ] }),
@@ -38133,8 +38254,11 @@ function UIComponentSelector({
   );
 }
 
-// src/molecules/agent-builder/MultiAgentCard/MultiAgentCard.tsx
+// src/molecules/workstream-builder/MultiAgentCard/MultiAgentCard.tsx
 var import_jsx_runtime133 = require("react/jsx-runtime");
+var FONT_STYLE7 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var MultiAgentCard = ({
   name,
   display_name,
@@ -38151,22 +38275,29 @@ var MultiAgentCard = ({
         "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",
         className
       ),
+      style: FONT_STYLE7,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", 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-1.5 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+              /* @__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)(
                 "span",
                 {
                   className: cn(
-                    "text-[10px] px-1.5 py-0.5 rounded-full font-medium",
+                    "inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full font-medium",
                     enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
                   ),
-                  children: enabled ? "Active" : "Disabled"
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: cn(
+                      "w-1.5 h-1.5 rounded-full",
+                      enabled ? "bg-emerald-500" : "bg-red-500"
+                    ) }),
+                    enabled ? "Active" : "Disabled"
+                  ]
                 }
               )
             ] }),
@@ -38191,12 +38322,12 @@ var MultiAgentCard = ({
                   children: idx + 1
                 }
               ),
-              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[16px]" })
+              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "w-px flex-1 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", children: stage.agent_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_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: [
@@ -38218,8 +38349,11 @@ var MultiAgentCard = ({
   );
 };
 
-// src/molecules/agent-builder/MultiAgentPlan/MultiAgentPlan.tsx
+// src/molecules/workstream-builder/MultiAgentPlan/MultiAgentPlan.tsx
 var import_jsx_runtime134 = require("react/jsx-runtime");
+var FONT_STYLE8 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var MultiAgentPlan = ({
   stages = [],
   className
@@ -38231,8 +38365,9 @@ var MultiAgentPlan = ({
         "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",
         className
       ),
+      style: FONT_STYLE8,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "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)(
             "svg",
             {
@@ -38252,7 +38387,7 @@ var MultiAgentPlan = ({
         /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-stretch min-w-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex flex-col items-center mr-3 w-6", children: [
             /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-interactive/10 text-interactive border border-interactive/30", children: idx + 1 }),
-            idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[12px]" })
+            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_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 }),
@@ -38279,22 +38414,28 @@ var MultiAgentPlan = ({
   );
 };
 
-// src/molecules/agent-builder/MultiAgentUISelector/MultiAgentUISelector.tsx
+// src/molecules/workstream-builder/MultiAgentUISelector/MultiAgentUISelector.tsx
 var import_react73 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
+var FONT_STYLE9 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var MultiAgentUISelector = ({
   stages = [],
   components = [],
   onSelect,
   onPreview,
-  className
+  className,
+  isLatestMessage = true
 }) => {
   const [activeStageId, setActiveStageId] = (0, import_react73.useState)(stages[0]?.id || "");
   const [selections, setSelections] = (0, import_react73.useState)(
     () => {
       const init = {};
+      const recommendedNames = components.filter((c) => c.recommended).map((c) => c.name);
       for (const stage of stages) {
-        init[stage.id] = /* @__PURE__ */ new Set();
+        const stageRecs = stage.recommended_components?.length ? stage.recommended_components : recommendedNames;
+        init[stage.id] = new Set(stageRecs);
       }
       return init;
     }
@@ -38308,7 +38449,7 @@ var MultiAgentUISelector = ({
   }, {});
   const toggleComponent = (0, import_react73.useCallback)(
     (stageId, compName) => {
-      if (submitted) return;
+      if (submitted || !isLatestMessage) return;
       setSelections((prev) => {
         const updated = { ...prev };
         const set = new Set(updated[stageId] || []);
@@ -38323,6 +38464,28 @@ var MultiAgentUISelector = ({
     },
     [submitted]
   );
+  const selectAll = (0, import_react73.useCallback)(
+    (stageId) => {
+      if (submitted || !isLatestMessage) return;
+      setSelections((prev) => {
+        const updated = { ...prev };
+        updated[stageId] = new Set(components.map((c) => c.name));
+        return updated;
+      });
+    },
+    [submitted, isLatestMessage, components]
+  );
+  const clearAll = (0, import_react73.useCallback)(
+    (stageId) => {
+      if (submitted || !isLatestMessage) return;
+      setSelections((prev) => {
+        const updated = { ...prev };
+        updated[stageId] = /* @__PURE__ */ new Set();
+        return updated;
+      });
+    },
+    [submitted, isLatestMessage]
+  );
   const handleContinue = (0, import_react73.useCallback)(() => {
     setSubmitted(true);
     if (onSelect) {
@@ -38341,6 +38504,7 @@ var MultiAgentUISelector = ({
         "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",
         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)(
@@ -38363,27 +38527,46 @@ var MultiAgentUISelector = ({
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex border-b border-[var(--border-color)] px-4", children: stages.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+        /* @__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)(
           "button",
           {
             onClick: () => setActiveStageId(stage.id),
-            disabled: submitted,
             className: cn(
-              "px-3 py-2 text-[11px] font-medium border-b-2 -mb-px transition-colors",
-              activeStageId === stage.id ? "border-interactive text-interactive" : "border-transparent text-[var(--foreground)]/50 hover:text-[var(--foreground)]",
-              submitted && "opacity-60 cursor-default"
+              "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]"
             ),
             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)("p", { className: "text-[10px] text-[var(--foreground)]/40 mb-3", children: [
-            "Select components for ",
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("strong", { children: activeStage.name }),
-            " (",
-            activeStage.agent_name,
-            ")"
+          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: [
+              "Select components for ",
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("strong", { 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)(
+                "button",
+                {
+                  onClick: () => selectAll(activeStageId),
+                  className: "text-[10px] text-interactive hover:underline font-medium",
+                  children: "Select All"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-[var(--foreground)]/20", children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+                "button",
+                {
+                  onClick: () => clearAll(activeStageId),
+                  className: "text-[10px] text-[var(--foreground)]/40 hover:text-[var(--foreground)]/60 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 }),
@@ -38404,7 +38587,7 @@ 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",
-                    submitted && "opacity-60 cursor-default pointer-events-none"
+                    (submitted || !isLatestMessage) && "opacity-60 cursor-default"
                   ),
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-1.5", children: [
@@ -38430,6 +38613,7 @@ var MultiAgentUISelector = ({
                         }
                       ),
                       /* @__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)(
                         "button",
                         {
@@ -38470,7 +38654,7 @@ var MultiAgentUISelector = ({
             }) })
           ] }, category))
         ] }),
-        !submitted && /* @__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_runtime135.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
           "button",
           {
             onClick: handleContinue,
@@ -38484,8 +38668,11 @@ var MultiAgentUISelector = ({
   );
 };
 
-// src/molecules/agent-builder/StageIndicator/StageIndicator.tsx
+// src/molecules/workstream-builder/StageIndicator/StageIndicator.tsx
 var import_jsx_runtime136 = require("react/jsx-runtime");
+var FONT_STYLE10 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var StageIndicator = ({
   stage_name,
   agent_name,
@@ -38498,6 +38685,7 @@ var StageIndicator = ({
         "flex items-center gap-3 my-4",
         className
       ),
+      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: [
@@ -40343,7 +40531,7 @@ var normalizeProps = (props) => {
       normalized[key] = value;
       return;
     }
-    if (["type", "component", "name"].includes(key)) {
+    if (key === "type" || key === "component") {
       return;
     }
     if (value === "true") {