pxengine 0.1.38 → 0.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs +117 -48
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +3 -1
  4. package/dist/index.d.ts +3 -1
  5. package/dist/index.mjs +117 -48
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/registry.json +11 -1
  8. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -36804,7 +36804,7 @@ var CampaignConceptCard = import_react64.default.memo(
36804
36804
  "div",
36805
36805
  {
36806
36806
  className: cn(
36807
- "w-full rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
36807
+ "w-full max-w-[600px] rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
36808
36808
  isSelected || isRecommended ? "border-2 border-green500" : "border-gray400",
36809
36809
  className
36810
36810
  ),
@@ -36812,7 +36812,7 @@ var CampaignConceptCard = import_react64.default.memo(
36812
36812
  /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
36813
36813
  "div",
36814
36814
  {
36815
- className: "p-6 relative flex items-start justify-between cursor-pointer select-none",
36815
+ className: "px-5 py-4 relative flex items-start justify-between cursor-pointer select-none",
36816
36816
  onClick: handleToggle,
36817
36817
  children: [
36818
36818
  /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex-1", children: [
@@ -36857,7 +36857,7 @@ var CampaignConceptCard = import_react64.default.memo(
36857
36857
  exit: { height: 0, opacity: 0 },
36858
36858
  transition: { duration: 0.2, ease: "easeIn" },
36859
36859
  className: "overflow-hidden",
36860
- children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "p-6 w-full overflow-hidden relative", children: [
36860
+ children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "px-4 py-3 w-full overflow-y-auto max-h-[400px] relative", children: [
36861
36861
  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
36862
36862
  "div",
36863
36863
  {
@@ -36965,7 +36965,7 @@ var ToolListCard = ({
36965
36965
  ),
36966
36966
  children: [
36967
36967
  /* @__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: [
36968
- /* @__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)]" }) }),
36968
+ /* @__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" }) }),
36969
36969
  /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
36970
36970
  /* @__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 })
36971
36971
  ] }),
@@ -36973,7 +36973,7 @@ var ToolListCard = ({
36973
36973
  const CatIcon = resolveCategoryIcon(cat);
36974
36974
  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "px-4 py-3", children: [
36975
36975
  /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex items-center gap-2 mb-2.5", children: [
36976
- /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(CatIcon, { className: "w-3.5 h-3.5 text-[var(--primary-color)]/70" }),
36976
+ /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
36977
36977
  /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
36978
36978
  /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
36979
36979
  ] }),
@@ -36984,7 +36984,7 @@ var ToolListCard = ({
36984
36984
  {
36985
36985
  className: "group flex items-start gap-3 px-3 py-2 rounded-lg hover:bg-[var(--foreground)]/[0.03] transition-colors",
36986
36986
  children: [
36987
- /* @__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" }) }),
36987
+ /* @__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" }) }),
36988
36988
  /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex-1 min-w-0", children: [
36989
36989
  /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
36990
36990
  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 = ({
37067
37067
  children: [
37068
37068
  /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Avatar, { className: "h-8 w-8 shrink-0", children: [
37069
37069
  /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
37070
- /* @__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) })
37070
+ /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-xs font-bold", children: agent.display_name.charAt(0) })
37071
37071
  ] }),
37072
37072
  /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex-1 min-w-0", children: [
37073
37073
  /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -37098,9 +37098,9 @@ var AgentCard = ({
37098
37098
  ),
37099
37099
  children: [
37100
37100
  /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", children: [
37101
- /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-[var(--primary-color)]/20", children: [
37101
+ /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
37102
37102
  /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
37103
- /* @__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) })
37103
+ /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-lg font-bold", children: agent.display_name.charAt(0) })
37104
37104
  ] }),
37105
37105
  /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex-1 min-w-0", children: [
37106
37106
  /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -37111,7 +37111,7 @@ var AgentCard = ({
37111
37111
  value: editState.display_name,
37112
37112
  onChange: (e) => setEditState((s) => ({ ...s, display_name: e.target.value })),
37113
37113
  disabled: isSaving,
37114
- 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",
37114
+ className: "flex-1 bg-transparent border-b border-interactive/30 text-sm font-semibold text-foreground outline-none focus:border-interactive transition-all",
37115
37115
  placeholder: "Agent name"
37116
37116
  }
37117
37117
  ) : /* @__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 = ({
37133
37133
  value: editState.description,
37134
37134
  onChange: (e) => setEditState((s) => ({ ...s, description: e.target.value })),
37135
37135
  disabled: isSaving,
37136
- 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]",
37136
+ 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]",
37137
37137
  rows: 2,
37138
37138
  placeholder: "Describe this agent..."
37139
37139
  }
@@ -37147,7 +37147,7 @@ var AgentCard = ({
37147
37147
  value: editState.image,
37148
37148
  onChange: (e) => setEditState((s) => ({ ...s, image: e.target.value })),
37149
37149
  disabled: isSaving,
37150
- 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",
37150
+ 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",
37151
37151
  placeholder: "URL"
37152
37152
  }
37153
37153
  )
@@ -37176,7 +37176,7 @@ var AgentCard = ({
37176
37176
  "button",
37177
37177
  {
37178
37178
  onClick: handleEdit,
37179
- 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",
37179
+ 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",
37180
37180
  children: "Edit"
37181
37181
  }
37182
37182
  ) })
@@ -37195,7 +37195,7 @@ var AgentCard = ({
37195
37195
  /* @__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)(
37196
37196
  "span",
37197
37197
  {
37198
- 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",
37198
+ className: "text-[11px] px-2 py-0.5 rounded-md bg-interactive/10 text-interactive font-mono border border-interactive/20",
37199
37199
  children: tool
37200
37200
  },
37201
37201
  tool
@@ -37292,15 +37292,16 @@ var WorkflowVisualizer = ({
37292
37292
  ),
37293
37293
  children: [
37294
37294
  /* @__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: [
37295
- /* @__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)(
37295
+ /* @__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)(
37296
37296
  "svg",
37297
37297
  {
37298
37298
  width: "14",
37299
37299
  height: "14",
37300
37300
  viewBox: "0 0 24 24",
37301
37301
  fill: "none",
37302
- stroke: "var(--primary-color)",
37302
+ stroke: "currentColor",
37303
37303
  strokeWidth: "2",
37304
+ className: "text-interactive",
37304
37305
  strokeLinecap: "round",
37305
37306
  strokeLinejoin: "round",
37306
37307
  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 = ({
37317
37318
  const isExpanded = expandedStep === step.id;
37318
37319
  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex gap-3", children: [
37319
37320
  /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [
37320
- /* @__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 }) }),
37321
- !isLast && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-0.5 flex-1 min-h-[16px] bg-[var(--primary-color)]/15" })
37321
+ /* @__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 }) }),
37322
+ !isLast && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-0.5 flex-1 min-h-[16px] bg-interactive/15" })
37322
37323
  ] }),
37323
37324
  /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
37324
37325
  "div",
@@ -37367,7 +37368,7 @@ var WorkflowVisualizer = ({
37367
37368
  {
37368
37369
  className: "flex items-start gap-2 text-xs",
37369
37370
  children: [
37370
- /* @__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" }),
37371
+ /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-interactive/40" }),
37371
37372
  /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[var(--foreground)]/60", children: sub.action })
37372
37373
  ]
37373
37374
  },
@@ -37378,7 +37379,7 @@ var WorkflowVisualizer = ({
37378
37379
  step.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
37379
37380
  "span",
37380
37381
  {
37381
- 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",
37382
+ className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
37382
37383
  children: tool
37383
37384
  },
37384
37385
  tool
@@ -37423,15 +37424,16 @@ var InstructionPreview = ({
37423
37424
  ),
37424
37425
  children: [
37425
37426
  /* @__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: [
37426
- /* @__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)(
37427
+ /* @__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)(
37427
37428
  "svg",
37428
37429
  {
37429
37430
  width: "14",
37430
37431
  height: "14",
37431
37432
  viewBox: "0 0 24 24",
37432
37433
  fill: "none",
37433
- stroke: "var(--primary-color)",
37434
+ stroke: "currentColor",
37434
37435
  strokeWidth: "2",
37436
+ className: "text-interactive",
37435
37437
  strokeLinecap: "round",
37436
37438
  strokeLinejoin: "round",
37437
37439
  children: [
@@ -37456,7 +37458,7 @@ var InstructionPreview = ({
37456
37458
  "button",
37457
37459
  {
37458
37460
  onClick: () => setIsExpanded(!isExpanded),
37459
- className: "text-[11px] text-[var(--primary-color)] hover:underline mt-1",
37461
+ className: "text-[11px] text-interactive hover:underline mt-1",
37460
37462
  children: isExpanded ? "Show less" : "Show full instruction"
37461
37463
  }
37462
37464
  )
@@ -37464,7 +37466,7 @@ var InstructionPreview = ({
37464
37466
  workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
37465
37467
  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
37466
37468
  /* @__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: [
37467
- /* @__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 }),
37469
+ /* @__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 }),
37468
37470
  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
37469
37471
  ] }, idx)) })
37470
37472
  ] }),
@@ -37473,7 +37475,7 @@ var InstructionPreview = ({
37473
37475
  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
37474
37476
  "span",
37475
37477
  {
37476
- 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",
37478
+ className: "text-[10px] font-mono px-2 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
37477
37479
  children: tool
37478
37480
  },
37479
37481
  tool
@@ -37491,6 +37493,7 @@ var import_jsx_runtime127 = require("react/jsx-runtime");
37491
37493
  function UIComponentSelector({
37492
37494
  components,
37493
37495
  onSelect,
37496
+ onPreview,
37494
37497
  className
37495
37498
  }) {
37496
37499
  const [selected, setSelected] = (0, import_react68.useState)(/* @__PURE__ */ new Set());
@@ -37538,8 +37541,8 @@ function UIComponentSelector({
37538
37541
  className: cn(
37539
37542
  "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors",
37540
37543
  submitted ? "cursor-default opacity-70" : "hover:bg-muted/50",
37541
- selected.has(comp.name) && !submitted && "bg-primary/5 border border-primary/20",
37542
- selected.has(comp.name) && submitted && "bg-primary/5"
37544
+ selected.has(comp.name) && !submitted && "bg-interactive/5 border border-interactive/20",
37545
+ selected.has(comp.name) && submitted && "bg-interactive/5"
37543
37546
  ),
37544
37547
  children: [
37545
37548
  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
@@ -37549,12 +37552,46 @@ function UIComponentSelector({
37549
37552
  checked: selected.has(comp.name),
37550
37553
  onChange: () => toggle(comp.name),
37551
37554
  disabled: submitted,
37552
- className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/50 disabled:opacity-50"
37555
+ className: "mt-0.5 h-4 w-4 rounded border-border text-interactive focus:ring-interactive/50 disabled:opacity-50"
37553
37556
  }
37554
37557
  ),
37555
37558
  /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex-1 min-w-0", children: [
37556
- /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
37557
- /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "ml-2 text-xs text-muted-foreground", children: comp.description })
37559
+ /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex items-center gap-1", children: [
37560
+ /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
37561
+ onPreview && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
37562
+ "button",
37563
+ {
37564
+ type: "button",
37565
+ onClick: (e) => {
37566
+ e.preventDefault();
37567
+ e.stopPropagation();
37568
+ onPreview(comp.name);
37569
+ },
37570
+ className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
37571
+ title: `Preview ${comp.display_name}`,
37572
+ children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
37573
+ "svg",
37574
+ {
37575
+ width: "14",
37576
+ height: "14",
37577
+ viewBox: "0 0 24 24",
37578
+ fill: "none",
37579
+ stroke: "currentColor",
37580
+ strokeWidth: "2",
37581
+ strokeLinecap: "round",
37582
+ strokeLinejoin: "round",
37583
+ className: "text-muted-foreground hover:text-primary",
37584
+ children: [
37585
+ /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
37586
+ /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
37587
+ /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
37588
+ ]
37589
+ }
37590
+ )
37591
+ }
37592
+ )
37593
+ ] }),
37594
+ /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
37558
37595
  ] })
37559
37596
  ]
37560
37597
  },
@@ -37570,7 +37607,7 @@ function UIComponentSelector({
37570
37607
  "button",
37571
37608
  {
37572
37609
  onClick: handleContinue,
37573
- className: "px-4 py-1.5 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
37610
+ className: "px-4 py-1.5 text-sm font-medium rounded-lg bg-interactive text-white hover:bg-interactive/90 transition-colors",
37574
37611
  children: "Continue"
37575
37612
  }
37576
37613
  )
@@ -37600,12 +37637,12 @@ var MultiAgentCard = ({
37600
37637
  ),
37601
37638
  children: [
37602
37639
  /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", children: [
37603
- /* @__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" }) }),
37640
+ /* @__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" }) }),
37604
37641
  /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 min-w-0", children: [
37605
37642
  /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
37606
37643
  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
37607
37644
  /* @__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 }),
37608
- /* @__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" }),
37645
+ /* @__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" }),
37609
37646
  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
37610
37647
  "span",
37611
37648
  {
@@ -37633,12 +37670,12 @@ var MultiAgentCard = ({
37633
37670
  {
37634
37671
  className: cn(
37635
37672
  "w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0",
37636
- "bg-[var(--primary-color)]/10 text-[var(--primary-color)] border border-[var(--primary-color)]/30"
37673
+ "bg-interactive/10 text-interactive border border-interactive/30"
37637
37674
  ),
37638
37675
  children: idx + 1
37639
37676
  }
37640
37677
  ),
37641
- idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[16px]" })
37678
+ idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[16px]" })
37642
37679
  ] }),
37643
37680
  /* @__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: [
37644
37681
  /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -37698,15 +37735,15 @@ var MultiAgentPlan = ({
37698
37735
  ] }) }),
37699
37736
  /* @__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: [
37700
37737
  /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col items-center mr-3 w-6", children: [
37701
- /* @__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 }),
37702
- idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[12px]" })
37738
+ /* @__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 }),
37739
+ idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-px flex-1 bg-interactive/20 min-h-[12px]" })
37703
37740
  ] }),
37704
37741
  /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
37705
- /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
37742
+ /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
37706
37743
  stage.description && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
37707
37744
  "p",
37708
37745
  {
37709
- className: "text-[11px] text-[var(--foreground)]/50 mt-0.5 whitespace-normal",
37746
+ className: "text-[11px] text-foreground/50 mt-0.5 whitespace-normal",
37710
37747
  style: { textWrap: "auto" },
37711
37748
  children: stage.description
37712
37749
  }
@@ -37714,7 +37751,7 @@ var MultiAgentPlan = ({
37714
37751
  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)(
37715
37752
  "span",
37716
37753
  {
37717
- className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--primary-color)]/10 text-[var(--primary-color)] font-mono",
37754
+ className: "text-[10px] px-1.5 py-0.5 rounded bg-interactive/10 text-interactive font-mono",
37718
37755
  children: tool
37719
37756
  },
37720
37757
  tool
@@ -37733,6 +37770,7 @@ var MultiAgentUISelector = ({
37733
37770
  stages = [],
37734
37771
  components = [],
37735
37772
  onSelect,
37773
+ onPreview,
37736
37774
  className
37737
37775
  }) => {
37738
37776
  const [activeStageId, setActiveStageId] = (0, import_react69.useState)(stages[0]?.id || "");
@@ -37789,7 +37827,7 @@ var MultiAgentUISelector = ({
37789
37827
  ),
37790
37828
  children: [
37791
37829
  /* @__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: [
37792
- /* @__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)(
37830
+ /* @__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)(
37793
37831
  "svg",
37794
37832
  {
37795
37833
  width: "10",
@@ -37798,7 +37836,7 @@ var MultiAgentUISelector = ({
37798
37836
  fill: "none",
37799
37837
  stroke: "currentColor",
37800
37838
  strokeWidth: "2",
37801
- className: "text-[var(--primary-color)]",
37839
+ className: "text-interactive",
37802
37840
  children: [
37803
37841
  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
37804
37842
  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
@@ -37815,8 +37853,8 @@ var MultiAgentUISelector = ({
37815
37853
  onClick: () => setActiveStageId(stage.id),
37816
37854
  disabled: submitted,
37817
37855
  className: cn(
37818
- "px-3 py-2 text-[11px] font-medium border-b-2 transition-colors",
37819
- activeStageId === stage.id ? "border-[var(--primary-color)] text-[var(--primary-color)]" : "border-transparent text-[var(--foreground)]/50 hover:text-[var(--foreground)]",
37856
+ "px-3 py-2 text-[11px] font-medium border-b-2 -mb-px transition-colors",
37857
+ activeStageId === stage.id ? "border-interactive text-interactive" : "border-transparent text-[var(--foreground)]/50 hover:text-[var(--foreground)]",
37820
37858
  submitted && "opacity-60 cursor-default"
37821
37859
  ),
37822
37860
  children: stage.name
@@ -37842,7 +37880,7 @@ var MultiAgentUISelector = ({
37842
37880
  disabled: submitted,
37843
37881
  className: cn(
37844
37882
  "text-left p-2.5 rounded-lg border text-[11px] transition-all overflow-hidden",
37845
- isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]/5" : "border-[var(--border-color)] hover:border-[var(--primary-color)]/50",
37883
+ isSelected ? "border-interactive bg-interactive/5" : "border-[var(--border-color)] hover:border-interactive/50",
37846
37884
  submitted && "opacity-60 cursor-default"
37847
37885
  ),
37848
37886
  children: [
@@ -37852,7 +37890,7 @@ var MultiAgentUISelector = ({
37852
37890
  {
37853
37891
  className: cn(
37854
37892
  "w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0",
37855
- isSelected ? "bg-[var(--primary-color)] border-[var(--primary-color)]" : "border-[var(--foreground)]/20"
37893
+ isSelected ? "bg-interactive border-interactive" : "border-[var(--foreground)]/20"
37856
37894
  ),
37857
37895
  children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
37858
37896
  "svg",
@@ -37868,7 +37906,38 @@ var MultiAgentUISelector = ({
37868
37906
  )
37869
37907
  }
37870
37908
  ),
37871
- /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name })
37909
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
37910
+ onPreview && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
37911
+ "button",
37912
+ {
37913
+ type: "button",
37914
+ onClick: (e) => {
37915
+ e.stopPropagation();
37916
+ onPreview(comp.name);
37917
+ },
37918
+ className: "ml-auto shrink-0 p-0.5 rounded hover:bg-[var(--foreground)]/10 transition-colors",
37919
+ title: `Preview ${comp.display_name}`,
37920
+ children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
37921
+ "svg",
37922
+ {
37923
+ width: "14",
37924
+ height: "14",
37925
+ viewBox: "0 0 24 24",
37926
+ fill: "none",
37927
+ stroke: "currentColor",
37928
+ strokeWidth: "2",
37929
+ strokeLinecap: "round",
37930
+ strokeLinejoin: "round",
37931
+ className: "text-[var(--foreground)]/40 hover:text-[var(--primary-color)]",
37932
+ children: [
37933
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
37934
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
37935
+ /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
37936
+ ]
37937
+ }
37938
+ )
37939
+ }
37940
+ )
37872
37941
  ] }),
37873
37942
  /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
37874
37943
  ]
@@ -37882,7 +37951,7 @@ var MultiAgentUISelector = ({
37882
37951
  "button",
37883
37952
  {
37884
37953
  onClick: handleContinue,
37885
- className: "w-full py-2 rounded-lg bg-[var(--primary-color)] text-white text-xs font-medium hover:opacity-90 transition-opacity",
37954
+ className: "w-full py-2 rounded-lg bg-interactive text-white text-xs font-medium hover:opacity-90 transition-opacity",
37886
37955
  children: "Continue"
37887
37956
  }
37888
37957
  ) }),