pxengine 0.1.43 → 0.1.45

package/dist/index.mjs

@@ -35870,13 +35870,14 @@ var TikTokIcon2 = ({ className }) => /* @__PURE__ */ jsx113(Video, { className }
 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;
@@ -35890,6 +35891,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__ */ jsxs72(
     Card,
     {
@@ -35903,7 +35907,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__ */ jsx113("div", { className: "h-full w-full bg-gradient-to-br from-purple-500 to-indigo-600" }),
@@ -35911,17 +35915,17 @@ var CreatorGridCard = ({
         ] }),
         /* @__PURE__ */ jsxs72(CardContent, { className: "relative pt-0 px-5 pb-6", children: [
           /* @__PURE__ */ jsx113("div", { className: "absolute -top-10 left-5", children: /* @__PURE__ */ jsxs72(Avatar, { className: "h-20 w-20 border-4 border-[var(--card-background)] shadow-lg ring-2 ring-purple-100/20", children: [
-            /* @__PURE__ */ jsx113(AvatarImage, { src: avatarSrc, alt: name }),
-            /* @__PURE__ */ jsx113(AvatarFallback, { className: "bg-purple-500/10 text-purple-500 font-bold text-xl", children: name.charAt(0) })
+            /* @__PURE__ */ jsx113(AvatarImage, { src: avatarSrc, alt: displayName }),
+            /* @__PURE__ */ jsx113(AvatarFallback, { className: "bg-purple-500/10 text-purple-500 font-bold text-xl", children: displayName.charAt(0) || "?" })
           ] }) }),
           /* @__PURE__ */ jsxs72("div", { className: "mt-12 flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx113("h3", { className: "text-xl font-bold text-[var(--foreground)] truncate", children: name }),
+            /* @__PURE__ */ jsx113("h3", { className: "text-xl font-bold text-[var(--foreground)] truncate", children: displayName }),
             /* @__PURE__ */ jsxs72("p", { className: "text-sm text-[var(--foreground)]/60 font-medium", children: [
               "@",
               handle
             ] })
           ] }),
-          /* @__PURE__ */ jsx113("div", { className: "mt-4 flex gap-2", children: platforms.map((p) => {
+          /* @__PURE__ */ jsx113("div", { className: "mt-4 flex gap-2", children: safePlatforms.map((p, i) => {
             const Icon3 = getIcon(p);
             return Icon3 ? /* @__PURE__ */ jsx113(
               "div",
@@ -35929,10 +35933,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__ */ jsx113(Icon3, { className: "h-4 w-4" })
               },
-              p
+              typeof p === "string" ? p : i
             ) : null;
           }) }),
-          /* @__PURE__ */ jsx113("div", { className: "mt-6 grid grid-cols-2 gap-4 border-t border-[var(--border-color)] pt-4", children: metrics.map((m, i) => /* @__PURE__ */ jsxs72("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx113("div", { className: "mt-6 grid grid-cols-2 gap-4 border-t border-[var(--border-color)] pt-4", children: safeMetrics.map((m, i) => /* @__PURE__ */ jsxs72("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ jsx113("span", { className: "text-[10px] font-bold uppercase tracking-wider text-[var(--foreground)]/40", children: m.label }),
             /* @__PURE__ */ jsx113("span", { className: "text-sm font-bold text-[var(--primary-color)]", children: m.value })
           ] }, i)) })
@@ -37128,8 +37132,11 @@ function CreatorWidgetInner({
 }
 var CreatorWidget = memo(CreatorWidgetInner);
 
-// src/molecules/agent-builder/ToolListCard/ToolListCard.tsx
+// src/molecules/workstream-builder/ToolListCard/ToolListCard.tsx
 import { jsx as jsx127, jsxs as jsxs85 } from "react/jsx-runtime";
+var FONT_STYLE = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var ICON_MAP = {
   Search,
   Database,
@@ -37166,6 +37173,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()])
@@ -37193,6 +37211,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__ */ jsxs85("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
           /* @__PURE__ */ jsx127("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx127(Wrench, { className: "w-3.5 h-3.5 text-interactive" }) }),
@@ -37201,8 +37220,9 @@ var ToolListCard = ({
         ] }),
         /* @__PURE__ */ jsx127("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__ */ jsxs85("div", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ jsxs85("div", { className: "flex items-center gap-2 mb-2.5", children: [
+            /* @__PURE__ */ jsxs85("div", { className: cn("flex items-center gap-2 mb-2.5 -mx-4 px-4 py-1.5", headerBg), children: [
               /* @__PURE__ */ jsx127(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
               /* @__PURE__ */ jsx127("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
               /* @__PURE__ */ jsx127("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
@@ -37234,9 +37254,12 @@ var ToolListCard = ({
   );
 };
 
-// src/molecules/agent-builder/AgentCard/AgentCard.tsx
+// src/molecules/workstream-builder/AgentCard/AgentCard.tsx
 import { useState as useState13, useCallback as useCallback6 } from "react";
 import { Fragment as Fragment6, jsx as jsx128, jsxs as jsxs86 } from "react/jsx-runtime";
+var FONT_STYLE2 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var AgentCard = ({
   agent,
   editable = true,
@@ -37294,6 +37317,7 @@ var AgentCard = ({
           "flex items-center gap-3 py-1",
           className
         ),
+        style: FONT_STYLE2,
         children: [
           /* @__PURE__ */ jsxs86(Avatar, { className: "h-8 w-8 shrink-0", children: [
             /* @__PURE__ */ jsx128(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
@@ -37302,14 +37326,20 @@ var AgentCard = ({
           /* @__PURE__ */ jsxs86("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxs86("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx128("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
-              /* @__PURE__ */ jsx128(
+              /* @__PURE__ */ jsxs86(
                 "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__ */ jsx128("span", { className: cn(
+                      "w-1.5 h-1.5 rounded-full",
+                      agent.enabled ? "bg-emerald-500" : "bg-red-500"
+                    ) }),
+                    agent.enabled ? "Active" : "Disabled"
+                  ]
                 }
               )
             ] }),
@@ -37326,8 +37356,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__ */ jsxs86("div", { className: "flex items-start gap-4 px-5 py-4", children: [
+        /* @__PURE__ */ jsxs86("div", { className: "flex items-start gap-4 px-5 py-4 bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", children: [
           /* @__PURE__ */ jsxs86(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
             /* @__PURE__ */ jsx128(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
             /* @__PURE__ */ jsx128(AvatarFallback, { className: "bg-interactive/10 text-interactive text-lg font-bold", children: agent.display_name.charAt(0) })
@@ -37346,14 +37377,20 @@ var AgentCard = ({
                 }
               ) : /* @__PURE__ */ jsx128("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
               /* @__PURE__ */ jsx128("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: agent.name }),
-              /* @__PURE__ */ jsx128(
+              /* @__PURE__ */ jsxs86(
                 "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__ */ jsx128("span", { className: cn(
+                      "w-1.5 h-1.5 rounded-full",
+                      agent.enabled ? "bg-emerald-500" : "bg-red-500"
+                    ) }),
+                    agent.enabled ? "Active" : "Disabled"
+                  ]
                 }
               )
             ] }),
@@ -37436,8 +37473,11 @@ var AgentCard = ({
   );
 };
 
-// src/molecules/agent-builder/AgentDataTable/AgentDataTable.tsx
+// src/molecules/workstream-builder/AgentDataTable/AgentDataTable.tsx
 import { jsx as jsx129, jsxs as jsxs87 } from "react/jsx-runtime";
+var FONT_STYLE3 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var AgentDataTable = ({
   headers,
   rows,
@@ -37449,19 +37489,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__ */ jsx129(
-              "span",
-              {
-                className: cn(
-                  "w-1.5 h-1.5 rounded-full",
-                  value ? "bg-emerald-500" : "bg-red-500"
-                )
-              }
-            ),
+            value ? /* @__PURE__ */ jsx129("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx129("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs87("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx129("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx129("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] }),
             value ? "Yes" : "No"
           ]
         }
@@ -37476,6 +37511,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__ */ jsx129("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs87("table", { className: "w-full text-xs", children: [
         /* @__PURE__ */ jsx129("thead", { children: /* @__PURE__ */ jsx129("tr", { className: "border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: headers.map((header) => /* @__PURE__ */ jsx129(
           "th",
@@ -37488,7 +37524,10 @@ var AgentDataTable = ({
         /* @__PURE__ */ jsx129("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ jsx129(
           "tr",
           {
-            className: "border-b border-[var(--border-color)] last:border-b-0 hover:bg-[var(--foreground)]/[0.02] transition-colors",
+            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__ */ jsx129(
               "td",
               {
@@ -37505,9 +37544,12 @@ var AgentDataTable = ({
   );
 };
 
-// src/molecules/agent-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
+// src/molecules/workstream-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
 import { useState as useState14 } from "react";
 import { jsx as jsx130, jsxs as jsxs88 } from "react/jsx-runtime";
+var FONT_STYLE4 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var WorkflowVisualizer = ({
   steps,
   className
@@ -37522,6 +37564,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__ */ jsxs88("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
           /* @__PURE__ */ jsx130("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx130(
@@ -37557,8 +37600,8 @@ 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__ */ jsxs88(
@@ -37611,8 +37654,8 @@ var WorkflowVisualizer = ({
                         tool
                       ))
                     ] }),
-                    step.on_failure && /* @__PURE__ */ jsxs88("div", { className: "flex items-start gap-2 text-xs bg-[#ef4444]/[0.06] border border-[#ef4444]/10 rounded-md px-2.5 py-2 whitespace-normal", children: [
-                      /* @__PURE__ */ jsx130("span", { className: "shrink-0 text-[10px] font-semibold text-[#ef4444]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
+                    step.on_failure && /* @__PURE__ */ jsxs88("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__ */ jsx130("span", { className: "shrink-0 text-[10px] font-semibold text-[var(--redText,_#ef4444)]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
                       /* @__PURE__ */ jsx130("span", { className: "text-[var(--foreground)]/50", children: step.on_failure })
                     ] })
                   ] })
@@ -37626,9 +37669,12 @@ var WorkflowVisualizer = ({
   );
 };
 
-// src/molecules/agent-builder/InstructionPreview/InstructionPreview.tsx
-import { useState as useState15 } from "react";
+// src/molecules/workstream-builder/InstructionPreview/InstructionPreview.tsx
+import { useState as useState15, useCallback as useCallback7 } from "react";
 import { jsx as jsx131, jsxs as jsxs89 } from "react/jsx-runtime";
+var FONT_STYLE5 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var InstructionPreview = ({
   agent_name,
   description,
@@ -37638,9 +37684,28 @@ var InstructionPreview = ({
   className
 }) => {
   const [isExpanded, setIsExpanded] = useState15(false);
+  const [copied, setCopied] = useState15(false);
   const previewLength = 300;
   const isLong = instruction.length > previewLength;
   const displayText = isExpanded || !isLong ? instruction : instruction.slice(0, previewLength) + "...";
+  const handleCopy = useCallback7(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__ */ jsxs89(
     "div",
     {
@@ -37648,6 +37713,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__ */ jsx131("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ jsxs89("div", { className: "flex items-center gap-2.5", children: [
           /* @__PURE__ */ jsx131("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsxs89(
@@ -37678,14 +37744,39 @@ var InstructionPreview = ({
         ] }) }),
         /* @__PURE__ */ jsxs89("div", { className: "px-4 py-3 space-y-3", children: [
           /* @__PURE__ */ jsxs89("div", { children: [
-            /* @__PURE__ */ jsx131("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Instruction" }),
+            /* @__PURE__ */ jsxs89("div", { className: "flex items-center justify-between mb-1.5", children: [
+              /* @__PURE__ */ jsx131("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider", children: "Instruction" }),
+              /* @__PURE__ */ jsx131(
+                "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__ */ jsx131("div", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed whitespace-pre-wrap font-mono bg-[var(--foreground)]/[0.02] border border-[var(--border-color)] rounded-lg p-3", children: displayText }),
-            isLong && /* @__PURE__ */ jsx131(
+            isLong && /* @__PURE__ */ jsxs89(
               "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__ */ jsx131(
+                    "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__ */ jsx131("polyline", { points: "6 9 12 15 18 9" })
+                    }
+                  ),
+                  isExpanded ? "Show less" : "Show full instruction"
+                ]
               }
             )
           ] }),
@@ -37713,9 +37804,12 @@ var InstructionPreview = ({
   );
 };
 
-// src/molecules/agent-builder/UIComponentSelector/UIComponentSelector.tsx
+// src/molecules/workstream-builder/UIComponentSelector/UIComponentSelector.tsx
 import { useState as useState16 } from "react";
 import { jsx as jsx132, jsxs as jsxs90 } from "react/jsx-runtime";
+var FONT_STYLE6 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 function UIComponentSelector({
   components,
   onSelect,
@@ -37723,7 +37817,10 @@ function UIComponentSelector({
   className,
   isLatestMessage = true
 }) {
-  const [selected, setSelected] = useState16(/* @__PURE__ */ new Set());
+  const [selected, setSelected] = useState16(() => {
+    const recommended = components.filter((c) => c.recommended).map((c) => c.name);
+    return new Set(recommended);
+  });
   const [submitted, setSubmitted] = useState16(false);
   const grouped = components.reduce(
     (acc, comp) => {
@@ -37752,26 +37849,52 @@ 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__ */ jsxs90("div", { className: "px-4 py-3 border-b border-border bg-muted/50", children: [
-          /* @__PURE__ */ jsx132("h3", { className: "text-sm font-semibold text-foreground", children: "Select UI Components" }),
-          /* @__PURE__ */ jsx132("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
+        /* @__PURE__ */ jsxs90("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
+          /* @__PURE__ */ jsx132("h3", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Select UI Components" }),
+          /* @__PURE__ */ jsx132("p", { className: "text-xs text-[var(--foreground)]/50 mt-0.5", children: "Choose which visual components this agent can use in its responses." })
         ] }),
         /* @__PURE__ */ jsx132("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ jsxs90("div", { children: [
-          /* @__PURE__ */ jsx132("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2", children: category }),
+          /* @__PURE__ */ jsx132("h4", { className: "text-xs font-medium text-[var(--foreground)]/50 uppercase tracking-wider mb-2", children: category }),
           /* @__PURE__ */ jsx132("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ jsxs90(
             "label",
             {
               className: cn(
                 "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors",
-                submitted || !isLatestMessage ? "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__ */ jsx132(
+                  "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__ */ jsx132(
+                      "svg",
+                      {
+                        width: "10",
+                        height: "10",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "white",
+                        strokeWidth: "3",
+                        children: /* @__PURE__ */ jsx132("polyline", { points: "20 6 9 17 4 12" })
+                      }
+                    )
+                  }
+                ),
                 /* @__PURE__ */ jsx132(
                   "input",
                   {
@@ -37779,12 +37902,13 @@ function UIComponentSelector({
                     checked: selected.has(comp.name),
                     onChange: () => toggle(comp.name),
                     disabled: submitted || !isLatestMessage,
-                    className: "mt-0.5 h-4 w-4 rounded border-border text-interactive focus:ring-interactive/50 disabled:opacity-50"
+                    className: "sr-only"
                   }
                 ),
                 /* @__PURE__ */ jsxs90("div", { className: "flex-1 min-w-0", children: [
                   /* @__PURE__ */ jsxs90("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx132("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
+                    /* @__PURE__ */ jsx132("span", { className: "text-sm font-medium text-[var(--foreground)]", children: comp.display_name }),
+                    comp.recommended && /* @__PURE__ */ jsx132("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__ */ jsx132(
                       "button",
                       {
@@ -37794,7 +37918,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__ */ jsxs90(
                           "svg",
@@ -37807,7 +37931,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__ */ jsx132("circle", { cx: "12", cy: "12", r: "10" }),
                               /* @__PURE__ */ jsx132("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
@@ -37818,15 +37942,15 @@ function UIComponentSelector({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx132("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
+                  /* @__PURE__ */ jsx132("span", { className: "ml-0 text-xs text-[var(--foreground)]/50", children: comp.description })
                 ] })
               ]
             },
             comp.name
           )) })
         ] }, category)) }),
-        !submitted && isLatestMessage && /* @__PURE__ */ jsxs90("div", { className: "px-4 py-3 border-t border-border flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs90("span", { className: "text-xs text-muted-foreground", children: [
+        !submitted && isLatestMessage && /* @__PURE__ */ jsxs90("div", { className: "px-4 py-3 border-t border-[var(--border-color)] flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs90("span", { className: "text-xs text-[var(--foreground)]/50", children: [
             selected.size,
             " selected"
           ] }),
@@ -37844,8 +37968,11 @@ function UIComponentSelector({
   );
 }
 
-// src/molecules/agent-builder/MultiAgentCard/MultiAgentCard.tsx
+// src/molecules/workstream-builder/MultiAgentCard/MultiAgentCard.tsx
 import { jsx as jsx133, jsxs as jsxs91 } from "react/jsx-runtime";
+var FONT_STYLE7 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var MultiAgentCard = ({
   name,
   display_name,
@@ -37862,22 +37989,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__ */ jsxs91("div", { className: "flex items-start gap-4 px-5 py-4", children: [
+        /* @__PURE__ */ jsxs91("div", { className: "flex items-start gap-4 px-5 py-4 bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", children: [
           /* @__PURE__ */ jsx133("div", { className: "h-12 w-12 shrink-0 rounded-full border-2 border-interactive/20 overflow-hidden bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx133("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
           /* @__PURE__ */ jsxs91("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxs91("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx133("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
               /* @__PURE__ */ jsx133("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: name }),
-              /* @__PURE__ */ jsx133("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
-              /* @__PURE__ */ jsx133(
+              /* @__PURE__ */ jsx133("span", { className: "text-[10px] px-2 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
+              /* @__PURE__ */ jsxs91(
                 "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__ */ jsx133("span", { className: cn(
+                      "w-1.5 h-1.5 rounded-full",
+                      enabled ? "bg-emerald-500" : "bg-red-500"
+                    ) }),
+                    enabled ? "Active" : "Disabled"
+                  ]
                 }
               )
             ] }),
@@ -37902,12 +38036,12 @@ var MultiAgentCard = ({
                   children: idx + 1
                 }
               ),
-              idx < stages.length - 1 && /* @__PURE__ */ jsx133("div", { className: "w-px flex-1 bg-interactive/20 min-h-[16px]" })
+              idx < stages.length - 1 && /* @__PURE__ */ jsx133("div", { className: "w-px flex-1 min-h-[16px] border-l border-dashed border-interactive/30" })
             ] }),
             /* @__PURE__ */ jsxs91("div", { className: "flex-1 mb-2 p-3 rounded-lg border border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
               /* @__PURE__ */ jsxs91("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx133("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
-                /* @__PURE__ */ jsx133("span", { className: "text-[10px] font-mono text-[var(--foreground)]/30", children: stage.agent_name })
+                /* @__PURE__ */ jsx133("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__ */ jsxs91("div", { className: "flex items-center gap-3 mt-1.5 text-[10px] text-[var(--foreground)]/50", children: [
                 stage.tools && stage.tools.length > 0 && /* @__PURE__ */ jsxs91("span", { children: [
@@ -37929,8 +38063,11 @@ var MultiAgentCard = ({
   );
 };
 
-// src/molecules/agent-builder/MultiAgentPlan/MultiAgentPlan.tsx
+// src/molecules/workstream-builder/MultiAgentPlan/MultiAgentPlan.tsx
 import { jsx as jsx134, jsxs as jsxs92 } from "react/jsx-runtime";
+var FONT_STYLE8 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var MultiAgentPlan = ({
   stages = [],
   className
@@ -37942,8 +38079,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__ */ jsx134("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs92("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx134("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", children: /* @__PURE__ */ jsxs92("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx134("div", { className: "w-4 h-4 rounded bg-violet-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsx134(
             "svg",
             {
@@ -37963,7 +38101,7 @@ var MultiAgentPlan = ({
         /* @__PURE__ */ jsx134("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx134("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ jsxs92("div", { className: "flex items-stretch min-w-0", children: [
           /* @__PURE__ */ jsxs92("div", { className: "flex flex-col items-center mr-3 w-6", children: [
             /* @__PURE__ */ jsx134("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-interactive/10 text-interactive border border-interactive/30", children: idx + 1 }),
-            idx < stages.length - 1 && /* @__PURE__ */ jsx134("div", { className: "w-px flex-1 bg-interactive/20 min-h-[12px]" })
+            idx < stages.length - 1 && /* @__PURE__ */ jsx134("div", { className: "w-px flex-1 min-h-[12px] border-l border-dashed border-interactive/30" })
           ] }),
           /* @__PURE__ */ jsxs92("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
             /* @__PURE__ */ jsx134("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
@@ -37990,9 +38128,12 @@ var MultiAgentPlan = ({
   );
 };
 
-// src/molecules/agent-builder/MultiAgentUISelector/MultiAgentUISelector.tsx
-import { useState as useState17, useCallback as useCallback7 } from "react";
+// src/molecules/workstream-builder/MultiAgentUISelector/MultiAgentUISelector.tsx
+import { useState as useState17, useCallback as useCallback8 } from "react";
 import { jsx as jsx135, jsxs as jsxs93 } from "react/jsx-runtime";
+var FONT_STYLE9 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var MultiAgentUISelector = ({
   stages = [],
   components = [],
@@ -38005,8 +38146,10 @@ var MultiAgentUISelector = ({
   const [selections, setSelections] = useState17(
     () => {
       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;
     }
@@ -38018,7 +38161,7 @@ var MultiAgentUISelector = ({
     acc[cat].push(comp);
     return acc;
   }, {});
-  const toggleComponent = useCallback7(
+  const toggleComponent = useCallback8(
     (stageId, compName) => {
       if (submitted || !isLatestMessage) return;
       setSelections((prev) => {
@@ -38035,7 +38178,29 @@ var MultiAgentUISelector = ({
     },
     [submitted]
   );
-  const handleContinue = useCallback7(() => {
+  const selectAll = useCallback8(
+    (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 = useCallback8(
+    (stageId) => {
+      if (submitted || !isLatestMessage) return;
+      setSelections((prev) => {
+        const updated = { ...prev };
+        updated[stageId] = /* @__PURE__ */ new Set();
+        return updated;
+      });
+    },
+    [submitted, isLatestMessage]
+  );
+  const handleContinue = useCallback8(() => {
     setSubmitted(true);
     if (onSelect) {
       const result = {};
@@ -38053,6 +38218,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__ */ jsx135("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs93("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx135("div", { className: "w-4 h-4 rounded bg-interactive/20 flex items-center justify-center", children: /* @__PURE__ */ jsxs93(
@@ -38075,25 +38241,46 @@ var MultiAgentUISelector = ({
           ) }),
           /* @__PURE__ */ jsx135("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
         ] }) }),
-        /* @__PURE__ */ jsx135("div", { className: "flex border-b border-[var(--border-color)] px-4", children: stages.map((stage) => /* @__PURE__ */ jsx135(
+        /* @__PURE__ */ jsx135("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__ */ jsx135(
           "button",
           {
             onClick: () => setActiveStageId(stage.id),
             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)]"
+              "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__ */ jsxs93("div", { className: "px-4 py-3", children: [
-          activeStage && /* @__PURE__ */ jsxs93("p", { className: "text-[10px] text-[var(--foreground)]/40 mb-3", children: [
-            "Select components for ",
-            /* @__PURE__ */ jsx135("strong", { children: activeStage.name }),
-            " (",
-            activeStage.agent_name,
-            ")"
+          activeStage && /* @__PURE__ */ jsxs93("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ jsxs93("p", { className: "text-[10px] text-[var(--foreground)]/40", children: [
+              "Select components for ",
+              /* @__PURE__ */ jsx135("strong", { children: activeStage.name }),
+              " (",
+              activeStage.agent_name,
+              ")"
+            ] }),
+            !submitted && isLatestMessage && /* @__PURE__ */ jsxs93("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx135(
+                "button",
+                {
+                  onClick: () => selectAll(activeStageId),
+                  className: "text-[10px] text-interactive hover:underline font-medium",
+                  children: "Select All"
+                }
+              ),
+              /* @__PURE__ */ jsx135("span", { className: "text-[var(--foreground)]/20", children: "|" }),
+              /* @__PURE__ */ jsx135(
+                "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__ */ jsxs93("div", { className: "mb-3", children: [
             /* @__PURE__ */ jsx135("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-1.5", children: category }),
@@ -38140,6 +38327,7 @@ var MultiAgentUISelector = ({
                         }
                       ),
                       /* @__PURE__ */ jsx135("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
+                      comp.recommended && /* @__PURE__ */ jsx135("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__ */ jsx135(
                         "button",
                         {
@@ -38194,8 +38382,11 @@ var MultiAgentUISelector = ({
   );
 };
 
-// src/molecules/agent-builder/StageIndicator/StageIndicator.tsx
+// src/molecules/workstream-builder/StageIndicator/StageIndicator.tsx
 import { jsx as jsx136, jsxs as jsxs94 } from "react/jsx-runtime";
+var FONT_STYLE10 = {
+  fontFamily: "Inter, system-ui, sans-serif"
+};
 var StageIndicator = ({
   stage_name,
   agent_name,
@@ -38208,6 +38399,7 @@ var StageIndicator = ({
         "flex items-center gap-3 my-4",
         className
       ),
+      style: { ...FONT_STYLE10, animation: "fadeIn 0.3s ease-out" },
       children: [
         /* @__PURE__ */ jsx136("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
         /* @__PURE__ */ jsxs94("div", { className: "flex items-center gap-1.5 px-3 py-1 rounded-full bg-violet-500/10 border border-violet-500/20", children: [
@@ -40053,7 +40245,7 @@ var normalizeProps = (props) => {
       normalized[key] = value;
       return;
     }
-    if (["type", "component", "name"].includes(key)) {
+    if (key === "type" || key === "component") {
       return;
     }
     if (value === "true") {