pxengine 0.1.37 → 0.1.39

package/dist/index.cjs

@@ -36804,7 +36804,7 @@ var CampaignConceptCard = import_react64.default.memo(
       "div",
       {
         className: cn(
-          "w-full rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
+          "w-full max-w-[600px] rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
           isSelected || isRecommended ? "border-2 border-green500" : "border-gray400",
           className
         ),
@@ -36812,7 +36812,7 @@ var CampaignConceptCard = import_react64.default.memo(
           /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
             "div",
             {
-              className: "p-6 relative flex items-start justify-between cursor-pointer select-none",
+              className: "px-5 py-4 relative flex items-start justify-between cursor-pointer select-none",
               onClick: handleToggle,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex-1", children: [
@@ -36857,7 +36857,7 @@ var CampaignConceptCard = import_react64.default.memo(
               exit: { height: 0, opacity: 0 },
               transition: { duration: 0.2, ease: "easeIn" },
               className: "overflow-hidden",
-              children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "p-6 w-full overflow-hidden relative", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "px-4 py-3 w-full overflow-y-auto max-h-[400px] relative", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                   "div",
                   {
@@ -36965,7 +36965,7 @@ var ToolListCard = ({
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "w-6 h-6 rounded-md bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Wrench, { className: "w-3.5 h-3.5 text-[var(--primary-color)]" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Wrench, { className: "w-3.5 h-3.5 text-interactive" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
           /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "ml-auto text-[11px] font-medium text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.06] px-2 py-0.5 rounded-full", children: tools.length })
         ] }),
@@ -36973,7 +36973,7 @@ var ToolListCard = ({
           const CatIcon = resolveCategoryIcon(cat);
           return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "px-4 py-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex items-center gap-2 mb-2.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(CatIcon, { className: "w-3.5 h-3.5 text-[var(--primary-color)]/70" }),
+              /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
               /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
               /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
             ] }),
@@ -36984,7 +36984,7 @@ var ToolListCard = ({
                 {
                   className: "group flex items-start gap-3 px-3 py-2 rounded-lg hover:bg-[var(--foreground)]/[0.03] transition-colors",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-[var(--primary-color)]/[0.08]", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ToolIcon, { className: "w-3 h-3 text-[var(--primary-color)]/60" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-interactive/[0.08]", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ToolIcon, { className: "w-3 h-3 text-interactive/60" }) }),
                     /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex-1 min-w-0", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
                         tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)] truncate max-w-full", children: tool.display_name }),
@@ -37067,7 +37067,7 @@ var AgentCard = ({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Avatar, { className: "h-8 w-8 shrink-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarFallback, { className: "bg-[var(--primary-color)]/10 text-[var(--primary-color)] text-xs font-bold", children: agent.display_name.charAt(0) })
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-xs font-bold", children: agent.display_name.charAt(0) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -37098,9 +37098,9 @@ var AgentCard = ({
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-[var(--primary-color)]/20", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
             /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
-            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarFallback, { className: "bg-[var(--primary-color)]/10 text-[var(--primary-color)] text-lg font-bold", children: agent.display_name.charAt(0) })
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-lg font-bold", children: agent.display_name.charAt(0) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -37111,7 +37111,7 @@ var AgentCard = ({
                   value: editState.display_name,
                   onChange: (e) => setEditState((s) => ({ ...s, display_name: e.target.value })),
                   disabled: isSaving,
-                  className: "flex-1 bg-transparent border-b border-[var(--primary-color)]/30 text-sm font-semibold text-[var(--foreground)] outline-none focus:border-[var(--primary-color)] transition-all",
+                  className: "flex-1 bg-transparent border-b border-interactive/30 text-sm font-semibold text-foreground outline-none focus:border-interactive transition-all",
                   placeholder: "Agent name"
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
@@ -37133,7 +37133,7 @@ var AgentCard = ({
                 value: editState.description,
                 onChange: (e) => setEditState((s) => ({ ...s, description: e.target.value })),
                 disabled: isSaving,
-                className: "w-full bg-transparent border-b border-[var(--primary-color)]/30 text-xs text-[var(--foreground)]/70 outline-none focus:border-[var(--primary-color)] transition-all resize-none leading-relaxed min-h-[40px]",
+                className: "w-full bg-transparent border-b border-interactive/30 text-xs text-foreground/70 outline-none focus:border-interactive transition-all resize-none leading-relaxed min-h-[40px]",
                 rows: 2,
                 placeholder: "Describe this agent..."
               }
@@ -37147,7 +37147,7 @@ var AgentCard = ({
                   value: editState.image,
                   onChange: (e) => setEditState((s) => ({ ...s, image: e.target.value })),
                   disabled: isSaving,
-                  className: "flex-1 bg-[var(--foreground)]/[0.03] border border-[var(--border-color)] rounded px-2 py-0.5 text-[10px] text-[var(--foreground)]/50 font-mono outline-none focus:border-[var(--primary-color)]/50 transition-colors",
+                  className: "flex-1 bg-foreground/[0.03] border border-[var(--border-color)] rounded px-2 py-0.5 text-[10px] text-foreground/50 font-mono outline-none focus:border-interactive/50 transition-colors",
                   placeholder: "URL"
                 }
               )
@@ -37176,7 +37176,7 @@ var AgentCard = ({
             "button",
             {
               onClick: handleEdit,
-              className: "text-[11px] px-2.5 py-1 rounded-md border border-[var(--border-color)] text-[var(--foreground)]/50 hover:text-[var(--foreground)] hover:border-[var(--primary-color)]/50 transition-colors",
+              className: "text-[11px] px-2.5 py-1 rounded-md border border-[var(--border-color)] text-foreground/50 hover:text-foreground hover:border-interactive/50 transition-colors",
               children: "Edit"
             }
           ) })
@@ -37195,7 +37195,7 @@ var AgentCard = ({
           /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
             "span",
             {
-              className: "text-[11px] px-2 py-0.5 rounded-md bg-[var(--primary-color)]/10 text-[var(--primary-color)] font-mono border border-[var(--primary-color)]/20",
+              className: "text-[11px] px-2 py-0.5 rounded-md bg-interactive/10 text-interactive font-mono border border-interactive/20",
               children: tool
             },
             tool
@@ -37292,15 +37292,16 @@ var WorkflowVisualizer = ({
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-6 h-6 rounded-md bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
             "svg",
             {
               width: "14",
               height: "14",
               viewBox: "0 0 24 24",
               fill: "none",
-              stroke: "var(--primary-color)",
+              stroke: "currentColor",
               strokeWidth: "2",
+              className: "text-interactive",
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
@@ -37317,8 +37318,8 @@ var WorkflowVisualizer = ({
           const isExpanded = expandedStep === step.id;
           return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex gap-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-7 h-7 rounded-full bg-[var(--primary-color)]/10 border-2 border-[var(--primary-color)]/30 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[10px] font-bold text-[var(--primary-color)]", children: idx + 1 }) }),
-              !isLast && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-0.5 flex-1 min-h-[16px] bg-[var(--primary-color)]/15" })
+              /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-7 h-7 rounded-full bg-interactive/10 border-2 border-interactive/30 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[10px] font-bold text-interactive", children: idx + 1 }) }),
+              !isLast && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-0.5 flex-1 min-h-[16px] bg-interactive/15" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
               "div",
@@ -37367,7 +37368,7 @@ var WorkflowVisualizer = ({
                       {
                         className: "flex items-start gap-2 text-xs",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-[var(--primary-color)]/40" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-interactive/40" }),
                           /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[var(--foreground)]/60", children: sub.action })
                         ]
                       },
@@ -37378,7 +37379,7 @@ var WorkflowVisualizer = ({
                       step.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
                         "span",
                         {
-                          className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-[var(--primary-color)]/[0.08] text-[var(--primary-color)]/70 border border-[var(--primary-color)]/10",
+                          className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
                           children: tool
                         },
                         tool
@@ -37423,15 +37424,16 @@ var InstructionPreview = ({
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "w-6 h-6 rounded-md bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
             "svg",
             {
               width: "14",
               height: "14",
               viewBox: "0 0 24 24",
               fill: "none",
-              stroke: "var(--primary-color)",
+              stroke: "currentColor",
               strokeWidth: "2",
+              className: "text-interactive",
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
@@ -37456,7 +37458,7 @@ var InstructionPreview = ({
               "button",
               {
                 onClick: () => setIsExpanded(!isExpanded),
-                className: "text-[11px] text-[var(--primary-color)] hover:underline mt-1",
+                className: "text-[11px] text-interactive hover:underline mt-1",
                 children: isExpanded ? "Show less" : "Show full instruction"
               }
             )
@@ -37464,7 +37466,7 @@ var InstructionPreview = ({
           workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
             /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "space-y-1", children: workflow_summary.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex items-start gap-2 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "shrink-0 w-5 h-5 rounded-full bg-[var(--primary-color)]/10 flex items-center justify-center text-[10px] font-bold text-[var(--primary-color)]", children: idx + 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "shrink-0 w-5 h-5 rounded-full bg-interactive/10 flex items-center justify-center text-[10px] font-bold text-interactive", children: idx + 1 }),
               /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
             ] }, idx)) })
           ] }),
@@ -37473,7 +37475,7 @@ var InstructionPreview = ({
             /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
               "span",
               {
-                className: "text-[10px] font-mono px-2 py-0.5 rounded bg-[var(--primary-color)]/[0.08] text-[var(--primary-color)]/70 border border-[var(--primary-color)]/10",
+                className: "text-[10px] font-mono px-2 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
                 children: tool
               },
               tool
@@ -37491,6 +37493,7 @@ var import_jsx_runtime127 = require("react/jsx-runtime");
 function UIComponentSelector({
   components,
   onSelect,
+  onPreview,
   className
 }) {
   const [selected, setSelected] = (0, import_react68.useState)(/* @__PURE__ */ new Set());
@@ -37538,8 +37541,8 @@ function UIComponentSelector({
               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",
-                selected.has(comp.name) && !submitted && "bg-primary/5 border border-primary/20",
-                selected.has(comp.name) && submitted && "bg-primary/5"
+                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_runtime127.jsx)(
@@ -37549,12 +37552,46 @@ function UIComponentSelector({
                     checked: selected.has(comp.name),
                     onChange: () => toggle(comp.name),
                     disabled: submitted,
-                    className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/50 disabled:opacity-50"
+                    className: "mt-0.5 h-4 w-4 rounded border-border text-interactive focus:ring-interactive/50 disabled:opacity-50"
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "ml-2 text-xs text-muted-foreground", children: comp.description })
+                  /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
+                    onPreview && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          onPreview(comp.name);
+                        },
+                        className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
+                        title: `Preview ${comp.display_name}`,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+                          "svg",
+                          {
+                            width: "14",
+                            height: "14",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            className: "text-muted-foreground hover:text-primary",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
                 ] })
               ]
             },
@@ -37570,7 +37607,7 @@ function UIComponentSelector({
             "button",
             {
               onClick: handleContinue,
-              className: "px-4 py-1.5 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+              className: "px-4 py-1.5 text-sm font-medium rounded-lg bg-interactive text-white hover:bg-interactive/90 transition-colors",
               children: "Continue"
             }
           )
@@ -37600,12 +37637,12 @@ var MultiAgentCard = ({
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "h-12 w-12 shrink-0 rounded-full border-2 border-[var(--primary-color)]/20 overflow-hidden bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "h-12 w-12 shrink-0 rounded-full border-2 border-interactive/20 overflow-hidden bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
               /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: name }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-violet-500/10 text-violet-600", children: "Multi-Agent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
               /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 "span",
                 {
@@ -37617,7 +37654,7 @@ var MultiAgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed mt-1", children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed mt-1 whitespace-normal", style: { textWrap: "auto" }, children: description })
           ] })
         ] }),
         stages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-4", children: [
@@ -37633,12 +37670,12 @@ var MultiAgentCard = ({
                 {
                   className: cn(
                     "w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0",
-                    "bg-[var(--primary-color)]/10 text-[var(--primary-color)] border border-[var(--primary-color)]/30"
+                    "bg-interactive/10 text-interactive border border-interactive/30"
                   ),
                   children: idx + 1
                 }
               ),
-              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[16px]" })
+              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[16px]" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 mb-2 p-3 rounded-lg border border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
               /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -37696,18 +37733,25 @@ var MultiAgentPlan = ({
           /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "Proposed Multi-Agent Workflow" }),
           /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 font-medium", children: "Draft" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex items-stretch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex items-stretch min-w-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col items-center mr-3 w-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-[var(--primary-color)]/10 text-[var(--primary-color)] border border-[var(--primary-color)]/30", children: idx + 1 }),
-            idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[12px]" })
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-interactive/10 text-interactive border border-interactive/30", children: idx + 1 }),
+            idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[12px]" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex-1 mb-2 pb-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
-            stage.description && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "text-[11px] text-[var(--foreground)]/50 mt-0.5", children: stage.description }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
+            stage.description && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+              "p",
+              {
+                className: "text-[11px] text-foreground/50 mt-0.5 whitespace-normal",
+                style: { textWrap: "auto" },
+                children: stage.description
+              }
+            ),
             stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
               "span",
               {
-                className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--primary-color)]/10 text-[var(--primary-color)] font-mono",
+                className: "text-[10px] px-1.5 py-0.5 rounded bg-interactive/10 text-interactive font-mono",
                 children: tool
               },
               tool
@@ -37726,6 +37770,7 @@ var MultiAgentUISelector = ({
   stages = [],
   components = [],
   onSelect,
+  onPreview,
   className
 }) => {
   const [activeStageId, setActiveStageId] = (0, import_react69.useState)(stages[0]?.id || "");
@@ -37782,7 +37827,7 @@ var MultiAgentUISelector = ({
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-4 h-4 rounded bg-[var(--primary-color)]/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-4 h-4 rounded bg-interactive/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
             "svg",
             {
               width: "10",
@@ -37791,7 +37836,7 @@ var MultiAgentUISelector = ({
               fill: "none",
               stroke: "currentColor",
               strokeWidth: "2",
-              className: "text-[var(--primary-color)]",
+              className: "text-interactive",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
                 /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
@@ -37808,8 +37853,8 @@ var MultiAgentUISelector = ({
             onClick: () => setActiveStageId(stage.id),
             disabled: submitted,
             className: cn(
-              "px-3 py-2 text-[11px] font-medium border-b-2 transition-colors",
-              activeStageId === stage.id ? "border-[var(--primary-color)] text-[var(--primary-color)]" : "border-transparent text-[var(--foreground)]/50 hover:text-[var(--foreground)]",
+              "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"
             ),
             children: stage.name
@@ -37835,7 +37880,7 @@ var MultiAgentUISelector = ({
                   disabled: submitted,
                   className: cn(
                     "text-left p-2.5 rounded-lg border text-[11px] transition-all overflow-hidden",
-                    isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]/5" : "border-[var(--border-color)] hover:border-[var(--primary-color)]/50",
+                    isSelected ? "border-interactive bg-interactive/5" : "border-[var(--border-color)] hover:border-interactive/50",
                     submitted && "opacity-60 cursor-default"
                   ),
                   children: [
@@ -37845,7 +37890,7 @@ var MultiAgentUISelector = ({
                         {
                           className: cn(
                             "w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0",
-                            isSelected ? "bg-[var(--primary-color)] border-[var(--primary-color)]" : "border-[var(--foreground)]/20"
+                            isSelected ? "bg-interactive border-interactive" : "border-[var(--foreground)]/20"
                           ),
                           children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                             "svg",
@@ -37861,7 +37906,38 @@ var MultiAgentUISelector = ({
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name })
+                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
+                      onPreview && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            onPreview(comp.name);
+                          },
+                          className: "ml-auto shrink-0 p-0.5 rounded hover:bg-[var(--foreground)]/10 transition-colors",
+                          title: `Preview ${comp.display_name}`,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+                            "svg",
+                            {
+                              width: "14",
+                              height: "14",
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "2",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              className: "text-[var(--foreground)]/40 hover:text-[var(--primary-color)]",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+                              ]
+                            }
+                          )
+                        }
+                      )
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
                   ]
@@ -37875,7 +37951,7 @@ var MultiAgentUISelector = ({
           "button",
           {
             onClick: handleContinue,
-            className: "w-full py-2 rounded-lg bg-[var(--primary-color)] text-white text-xs font-medium hover:opacity-90 transition-opacity",
+            className: "w-full py-2 rounded-lg bg-interactive text-white text-xs font-medium hover:opacity-90 transition-opacity",
             children: "Continue"
           }
         ) }),