pxengine 0.1.33 → 0.1.34

package/dist/index.cjs

@@ -36,6 +36,8 @@ __export(index_exports, {
   AccordionItem: () => AccordionItem,
   AccordionTrigger: () => AccordionTrigger,
   ActionButton: () => ActionButton,
+  AgentCard: () => AgentCard,
+  AgentDataTable: () => AgentDataTable,
   Alert: () => Alert,
   AlertAtom: () => AlertAtom,
   AlertDescription: () => AlertDescription,
@@ -180,6 +182,7 @@ __export(index_exports, {
   InputOTPGroup: () => InputOTPGroup,
   InputOTPSeparator: () => InputOTPSeparator,
   InputOTPSlot: () => InputOTPSlot,
+  InstructionPreview: () => InstructionPreview,
   KbdAtom: () => KbdAtom,
   KeywordBundlesDisplay: () => KeywordBundlesDisplay,
   KeywordBundlesEdit: () => KeywordBundlesEdit,
@@ -284,6 +287,7 @@ __export(index_exports, {
   TextareaAtom: () => TextareaAtom,
   TimelineAtom: () => TimelineAtom,
   ToggleAtom: () => ToggleAtom,
+  ToolListCard: () => ToolListCard,
   Tooltip: () => Tooltip,
   TooltipAtom: () => TooltipAtom,
   TooltipContent: () => TooltipContent,
@@ -291,12 +295,13 @@ __export(index_exports, {
   TooltipTrigger: () => TooltipTrigger,
   TopPostsGrid: () => TopPostsGrid,
   VideoAtom: () => VideoAtom,
+  WorkflowVisualizer: () => WorkflowVisualizer,
   cn: () => cn
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/render/PXEngineRenderer.tsx
-var import_react66 = __toESM(require("react"), 1);
+var import_react69 = __toESM(require("react"), 1);
 
 // src/atoms/index.ts
 var atoms_exports = {};
@@ -33568,6 +33573,8 @@ ArrowToggleAtom.displayName = "ArrowToggleAtom";
 var molecules_exports = {};
 __export(molecules_exports, {
   ActionButton: () => ActionButton,
+  AgentCard: () => AgentCard,
+  AgentDataTable: () => AgentDataTable,
   AudienceDemographicsCard: () => AudienceDemographicsCard,
   AudienceMetricCard: () => AudienceMetricCard,
   BrandAffinityGroup: () => BrandAffinityGroup,
@@ -33587,6 +33594,7 @@ __export(molecules_exports, {
   FilterBar: () => FilterBar,
   FormCard: () => FormCard,
   GrowthChartCard: () => GrowthChartCard,
+  InstructionPreview: () => InstructionPreview,
   KeywordBundlesDisplay: () => KeywordBundlesDisplay,
   KeywordBundlesEdit: () => KeywordBundlesEdit,
   LoadingOverlay: () => LoadingOverlay,
@@ -33599,7 +33607,9 @@ __export(molecules_exports, {
   StatsGrid: () => StatsGrid,
   StepWizard: () => StepWizard,
   TagCloud: () => TagCloud,
-  TopPostsGrid: () => TopPostsGrid
+  ToolListCard: () => ToolListCard,
+  TopPostsGrid: () => TopPostsGrid,
+  WorkflowVisualizer: () => WorkflowVisualizer
 });
 
 // src/molecules/generic/EditableField/EditableField.tsx
@@ -36878,6 +36888,590 @@ var CampaignConceptCard = import_react64.default.memo(
 );
 CampaignConceptCard.displayName = "CampaignConceptCard";
 
+// src/molecules/agent-builder/ToolListCard/ToolListCard.tsx
+var import_jsx_runtime122 = require("react/jsx-runtime");
+var ICON_MAP = {
+  Search,
+  Database,
+  Globe,
+  FileText,
+  Zap,
+  Layout: PanelsTopLeft,
+  Wrench,
+  BookOpen,
+  BarChart3: ChartColumn,
+  Link,
+  MessageSquare,
+  Sparkles,
+  FolderOpen,
+  Code,
+  Shield,
+  Image,
+  Mail,
+  Calendar
+};
+var CATEGORY_FALLBACK = {
+  search: Search,
+  data: Database,
+  knowledge: BookOpen,
+  web: Globe,
+  content: FileText,
+  ui: PanelsTopLeft,
+  analytics: ChartColumn,
+  integration: Link,
+  communication: MessageSquare,
+  generation: Sparkles,
+  file: FolderOpen,
+  code: Code,
+  security: Shield,
+  general: Zap
+};
+function resolveIcon(tool) {
+  if (tool.icon && ICON_MAP[tool.icon]) return ICON_MAP[tool.icon];
+  if (tool.category && CATEGORY_FALLBACK[tool.category.toLowerCase()])
+    return CATEGORY_FALLBACK[tool.category.toLowerCase()];
+  return Wrench;
+}
+function resolveCategoryIcon(category) {
+  return CATEGORY_FALLBACK[category.toLowerCase()] || Wrench;
+}
+var ToolListCard = ({
+  tools,
+  className
+}) => {
+  const grouped = {};
+  for (const tool of tools) {
+    const cat = tool.category || "General";
+    if (!grouped[cat]) grouped[cat] = [];
+    grouped[cat].push(tool);
+  }
+  const categories = Object.keys(grouped);
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        className
+      ),
+      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)("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 })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "divide-y divide-[var(--border-color)]", children: categories.map((cat) => {
+          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)("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 })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "space-y-1.5", children: grouped[cat].map((tool) => {
+              const ToolIcon = resolveIcon(tool);
+              return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
+                "div",
+                {
+                  className: "group flex items-start gap-3 px-3 py-2 rounded-lg hover:bg-[var(--foreground)]/[0.03] transition-colors",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_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.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)]", children: tool.display_name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("span", { className: "text-[11px] font-mono px-1.5 py-0.5 rounded bg-[var(--foreground)]/[0.06] text-[var(--foreground)]/50 border border-[var(--foreground)]/[0.06]", children: tool.name })
+                      ] }),
+                      tool.description && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5", children: tool.description })
+                    ] })
+                  ]
+                },
+                tool.name
+              );
+            }) })
+          ] }, cat);
+        }) })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/AgentCard/AgentCard.tsx
+var import_react65 = require("react");
+var import_jsx_runtime123 = require("react/jsx-runtime");
+var AgentCard = ({
+  agent,
+  editable = true,
+  compact = false,
+  onSave,
+  className
+}) => {
+  const [isEditing, setIsEditing] = (0, import_react65.useState)(false);
+  const [isSaving, setIsSaving] = (0, import_react65.useState)(false);
+  const [editState, setEditState] = (0, import_react65.useState)({
+    display_name: agent.display_name,
+    description: agent.description,
+    image: agent.image || ""
+  });
+  const avatarUrl = agent.image || `https://api.dicebear.com/7.x/avataaars/svg?seed=${agent.name}`;
+  const handleEdit = (0, import_react65.useCallback)(() => {
+    setEditState({
+      display_name: agent.display_name,
+      description: agent.description,
+      image: agent.image || ""
+    });
+    setIsEditing(true);
+  }, [agent]);
+  const handleCancel = (0, import_react65.useCallback)(() => {
+    setIsEditing(false);
+  }, []);
+  const handleSave = (0, import_react65.useCallback)(async () => {
+    if (!onSave) return;
+    const updates = {};
+    if (editState.display_name !== agent.display_name)
+      updates.display_name = editState.display_name;
+    if (editState.description !== agent.description)
+      updates.description = editState.description;
+    if (editState.image !== (agent.image || ""))
+      updates.image = editState.image;
+    if (Object.keys(updates).length === 0) {
+      setIsEditing(false);
+      return;
+    }
+    setIsSaving(true);
+    try {
+      await onSave(agent, updates);
+      setIsEditing(false);
+    } catch (err) {
+      console.error("AgentCard save failed:", err);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [onSave, agent, editState]);
+  if (compact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-3 py-1",
+          className
+        ),
+        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.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "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"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-[var(--foreground)]/50 text-xs truncate", children: agent.description })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        className
+      ),
+      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.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)("div", { className: "flex-1 min-w-0", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+              "input",
+              {
+                type: "text",
+                value: editState.display_name,
+                onChange: (e) => setEditState((s) => ({ ...s, display_name: e.target.value })),
+                className: "w-full bg-[var(--card-background)] border border-[var(--border-color)] rounded-lg px-3 py-1.5 text-sm text-[var(--foreground)] font-semibold outline-none focus:border-[var(--primary-color)] transition-colors",
+                placeholder: "Display name"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+              "textarea",
+              {
+                value: editState.description,
+                onChange: (e) => setEditState((s) => ({ ...s, description: e.target.value })),
+                className: "w-full bg-[var(--card-background)] border border-[var(--border-color)] rounded-lg px-3 py-1.5 text-xs text-[var(--foreground)]/70 outline-none focus:border-[var(--primary-color)] transition-colors resize-none",
+                rows: 2,
+                placeholder: "Description"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+              "input",
+              {
+                type: "text",
+                value: editState.image,
+                onChange: (e) => setEditState((s) => ({ ...s, image: e.target.value })),
+                className: "w-full bg-[var(--card-background)] border border-[var(--border-color)] rounded-lg px-3 py-1.5 text-xs text-[var(--foreground)]/70 font-mono outline-none focus:border-[var(--primary-color)] transition-colors",
+                placeholder: "Avatar image URL"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: agent.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "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"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 mt-1 leading-relaxed", children: agent.description })
+          ] }) }),
+          editable && onSave && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex items-center gap-1.5 shrink-0", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+              "button",
+              {
+                onClick: handleCancel,
+                disabled: isSaving,
+                className: "text-[11px] px-2.5 py-1 rounded-md border border-[var(--border-color)] text-[var(--foreground)]/60 hover:text-[var(--foreground)] transition-colors disabled:opacity-50",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+              "button",
+              {
+                onClick: handleSave,
+                disabled: isSaving,
+                className: "text-[11px] px-2.5 py-1 rounded-md bg-[var(--primary-color)] text-white hover:opacity-90 transition-opacity disabled:opacity-50",
+                children: isSaving ? "Saving..." : "Save"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+            "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",
+              children: "Edit"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-3 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("span", { className: "text-[var(--foreground)]/40", children: [
+          "Model:",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "font-mono text-[var(--foreground)]/70", children: agent.model })
+        ] }) }),
+        agent.tools && agent.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-2", children: [
+            "Tools (",
+            agent.tools.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_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",
+              children: tool
+            },
+            tool
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/AgentDataTable/AgentDataTable.tsx
+var import_jsx_runtime124 = require("react/jsx-runtime");
+var AgentDataTable = ({
+  headers,
+  rows,
+  className
+}) => {
+  const renderCell = (value) => {
+    if (typeof value === "boolean") {
+      return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full",
+            value ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+              "span",
+              {
+                className: cn(
+                  "w-1.5 h-1.5 rounded-full",
+                  value ? "bg-emerald-500" : "bg-red-500"
+                )
+              }
+            ),
+            value ? "Yes" : "No"
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "text-[var(--foreground)]", children: String(value) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("table", { className: "w-full text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("tr", { className: "border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "th",
+          {
+            className: "text-left px-4 py-2.5 text-[11px] font-semibold text-[var(--foreground)]/60 uppercase tracking-wide whitespace-nowrap",
+            children: header
+          },
+          header
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "tr",
+          {
+            className: "border-b border-[var(--border-color)] last:border-b-0 hover:bg-[var(--foreground)]/[0.02] transition-colors",
+            children: row.map((cell, cellIdx) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+              "td",
+              {
+                className: "px-4 py-2.5 text-xs whitespace-nowrap",
+                children: renderCell(cell)
+              },
+              cellIdx
+            ))
+          },
+          rowIdx
+        )) })
+      ] }) })
+    }
+  );
+};
+
+// src/molecules/agent-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
+var import_react66 = require("react");
+var import_jsx_runtime125 = require("react/jsx-runtime");
+var WorkflowVisualizer = ({
+  steps,
+  className
+}) => {
+  const [expandedStep, setExpandedStep] = (0, import_react66.useState)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        className
+      ),
+      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)(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "var(--primary-color)",
+              strokeWidth: "2",
+              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" })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Workflow" }),
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("span", { className: "ml-auto text-[11px] font-medium text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.06] px-2 py-0.5 rounded-full", children: [
+            steps.length,
+            " steps"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "px-4 py-3", children: steps.map((step, idx) => {
+          const isLast = idx === steps.length - 1;
+          const isExpanded = expandedStep === step.id;
+          return /* @__PURE__ */ (0, import_jsx_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.jsxs)(
+              "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]"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+                    "button",
+                    {
+                      onClick: () => setExpandedStep(isExpanded ? null : step.id),
+                      className: "w-full text-left px-3 py-2.5 flex items-center gap-2",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: step.name }),
+                          step.description && !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("span", { className: "text-xs text-[var(--foreground)]/40 ml-2", children: [
+                            "\u2014 ",
+                            step.description
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+                          "svg",
+                          {
+                            width: "12",
+                            height: "12",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            className: cn(
+                              "shrink-0 text-[var(--foreground)]/30 transition-transform",
+                              isExpanded && "rotate-180"
+                            ),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("polyline", { points: "6 9 12 15 18 9" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  isExpanded && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "px-3 pb-3 space-y-2.5", children: [
+                    step.description && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed", children: step.description }),
+                    step.sub_steps && step.sub_steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "space-y-1", children: step.sub_steps.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+                      "div",
+                      {
+                        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: "text-[var(--foreground)]/60", children: sub.action })
+                        ]
+                      },
+                      sub.id
+                    )) }),
+                    step.tools && step.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold tracking-wider", children: "Tools:" }),
+                      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",
+                          children: tool
+                        },
+                        tool
+                      ))
+                    ] }),
+                    step.on_failure && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex items-start gap-2 text-xs bg-[#ef4444]/[0.06] border border-[#ef4444]/10 rounded-md px-2.5 py-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "shrink-0 text-[10px] font-semibold text-[#ef4444]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("span", { className: "text-[var(--foreground)]/50", children: step.on_failure })
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ] }, step.id);
+        }) })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/InstructionPreview/InstructionPreview.tsx
+var import_react67 = require("react");
+var import_jsx_runtime126 = require("react/jsx-runtime");
+var InstructionPreview = ({
+  agent_name,
+  description,
+  instruction,
+  workflow_summary,
+  tools,
+  className
+}) => {
+  const [isExpanded, setIsExpanded] = (0, import_react67.useState)(false);
+  const previewLength = 300;
+  const isLong = instruction.length > previewLength;
+  const displayText = isExpanded || !isLong ? instruction : instruction.slice(0, previewLength) + "...";
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        className
+      ),
+      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)(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "var(--primary-color)",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("polyline", { points: "10 9 9 9 8 9" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: agent_name }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { className: "text-[11px] text-[var(--foreground)]/40 mt-0.5", children: description })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: "px-4 py-3 space-y-3", children: [
+          /* @__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: "Instruction" }),
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed whitespace-pre-wrap font-mono bg-[var(--foreground)]/[0.02] border border-[var(--border-color)] rounded-lg p-3", children: displayText }),
+            isLong && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+              "button",
+              {
+                onClick: () => setIsExpanded(!isExpanded),
+                className: "text-[11px] text-[var(--primary-color)] hover:underline mt-1",
+                children: isExpanded ? "Show less" : "Show full instruction"
+              }
+            )
+          ] }),
+          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: "text-[var(--foreground)]/50 mt-0.5", children: step })
+            ] }, idx)) })
+          ] }),
+          tools && tools.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: "Tools" }),
+            /* @__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",
+                children: tool
+              },
+              tool
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
 // src/components/ui/index.ts
 var ui_exports = {};
 __export(ui_exports, {
@@ -37170,7 +37764,7 @@ __export(ui_exports, {
 // src/components/ui/button-group.tsx
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var buttonGroupVariants = (0, import_class_variance_authority8.cva)(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
@@ -37190,7 +37784,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
     "div",
     {
       role: "group",
@@ -37207,7 +37801,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? import_react_slot4.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
     Comp,
     {
       className: cn(
@@ -37223,7 +37817,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
     Separator2,
     {
       "data-slot": "button-group-separator",
@@ -37239,9 +37833,9 @@ function ButtonGroupSeparator({
 
 // src/components/ui/empty.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
     "div",
     {
       "data-slot": "empty",
@@ -37254,7 +37848,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
     "div",
     {
       "data-slot": "empty-header",
@@ -37285,7 +37879,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
     "div",
     {
       "data-slot": "empty-icon",
@@ -37296,7 +37890,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
     "div",
     {
       "data-slot": "empty-title",
@@ -37306,7 +37900,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
     "div",
     {
       "data-slot": "empty-description",
@@ -37319,7 +37913,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
     "div",
     {
       "data-slot": "empty-content",
@@ -37333,11 +37927,11 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-var import_react65 = require("react");
+var import_react68 = require("react");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -37355,7 +37949,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "legend",
     {
       "data-slot": "field-legend",
@@ -37371,7 +37965,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "div",
     {
       "data-slot": "field-group",
@@ -37411,7 +38005,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "div",
     {
       role: "group",
@@ -37423,7 +38017,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "div",
     {
       "data-slot": "field-content",
@@ -37439,7 +38033,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     Label,
     {
       "data-slot": "field-label",
@@ -37454,7 +38048,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "div",
     {
       "data-slot": "field-label",
@@ -37467,7 +38061,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "p",
     {
       "data-slot": "field-description",
@@ -37486,7 +38080,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
     "div",
     {
       "data-slot": "field-separator",
@@ -37497,8 +38091,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
           "span",
           {
             className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
@@ -37516,7 +38110,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = (0, import_react65.useMemo)(() => {
+  const content = (0, import_react68.useMemo)(() => {
     if (children) {
       return children;
     }
@@ -37526,14 +38120,14 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
-      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("li", { children: error.message }, index)
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "div",
     {
       role: "alert",
@@ -37547,9 +38141,9 @@ function FieldError({
 
 // src/components/ui/input-group.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     "div",
     {
       "data-slot": "input-group",
@@ -37593,7 +38187,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     "div",
     {
       role: "group",
@@ -37633,7 +38227,7 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     Button,
     {
       type,
@@ -37645,7 +38239,7 @@ function InputGroupButton({
   );
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     "span",
     {
       className: cn(
@@ -37660,7 +38254,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     Input,
     {
       "data-slot": "input-group-control",
@@ -37676,7 +38270,7 @@ function InputGroupTextarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -37692,9 +38286,9 @@ function InputGroupTextarea({
 // src/components/ui/item.tsx
 var import_react_slot5 = require("@radix-ui/react-slot");
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     "div",
     {
       role: "list",
@@ -37708,7 +38302,7 @@ function ItemSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     Separator2,
     {
       "data-slot": "item-separator",
@@ -37746,7 +38340,7 @@ function Item8({
   ...props
 }) {
   const Comp = asChild ? import_react_slot5.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     Comp,
     {
       "data-slot": "item",
@@ -37777,7 +38371,7 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     "div",
     {
       "data-slot": "item-media",
@@ -37788,7 +38382,7 @@ function ItemMedia({
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     "div",
     {
       "data-slot": "item-content",
@@ -37801,7 +38395,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     "div",
     {
       "data-slot": "item-title",
@@ -37814,7 +38408,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     "p",
     {
       "data-slot": "item-description",
@@ -37828,7 +38422,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     "div",
     {
       "data-slot": "item-actions",
@@ -37838,7 +38432,7 @@ function ItemActions({ className, ...props }) {
   );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     "div",
     {
       "data-slot": "item-header",
@@ -37851,7 +38445,7 @@ function ItemHeader({ className, ...props }) {
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     "div",
     {
       "data-slot": "item-footer",
@@ -37865,9 +38459,9 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/kbd.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     "kbd",
     {
       "data-slot": "kbd",
@@ -37882,7 +38476,7 @@ function Kbd({ className, ...props }) {
   );
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     "kbd",
     {
       "data-slot": "kbd-group",
@@ -37893,16 +38487,16 @@ function KbdGroup({ className, ...props }) {
 }
 
 // src/components/ui/sidebar.tsx
-var React96 = __toESM(require("react"), 1);
+var React99 = __toESM(require("react"), 1);
 var import_react_slot6 = require("@radix-ui/react-slot");
 var import_class_variance_authority13 = require("class-variance-authority");
 
 // src/hooks/use-mobile.tsx
-var React95 = __toESM(require("react"), 1);
+var React98 = __toESM(require("react"), 1);
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React95.useState(void 0);
-  React95.useEffect(() => {
+  const [isMobile, setIsMobile] = React98.useState(void 0);
+  React98.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -37915,22 +38509,22 @@ function useIsMobile() {
 }
 
 // src/components/ui/sidebar.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React96.createContext(null);
+var SidebarContext = React99.createContext(null);
 function useSidebar() {
-  const context = React96.useContext(SidebarContext);
+  const context = React99.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React96.forwardRef(
+var SidebarProvider = React99.forwardRef(
   ({
     defaultOpen = true,
     open: openProp,
@@ -37941,10 +38535,10 @@ var SidebarProvider = React96.forwardRef(
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React96.useState(false);
-    const [_open, _setOpen] = React96.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React99.useState(false);
+    const [_open, _setOpen] = React99.useState(defaultOpen);
     const open = openProp ?? _open;
-    const setOpen = React96.useCallback(
+    const setOpen = React99.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -37956,10 +38550,10 @@ var SidebarProvider = React96.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React96.useCallback(() => {
+    const toggleSidebar = React99.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React96.useEffect(() => {
+    React99.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -37970,7 +38564,7 @@ var SidebarProvider = React96.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React96.useMemo(
+    const contextValue = React99.useMemo(
       () => ({
         state,
         open,
@@ -37982,7 +38576,7 @@ var SidebarProvider = React96.forwardRef(
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       "div",
       {
         style: {
@@ -38002,7 +38596,7 @@ var SidebarProvider = React96.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React96.forwardRef(
+var Sidebar = React99.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -38013,7 +38607,7 @@ var Sidebar = React96.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         "div",
         {
           className: cn(
@@ -38027,7 +38621,7 @@ var Sidebar = React96.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -38038,16 +38632,16 @@ var Sidebar = React96.forwardRef(
           },
           side,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "flex h-full w-full flex-col", children })
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "flex h-full w-full flex-col", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
       "div",
       {
         ref,
@@ -38057,7 +38651,7 @@ var Sidebar = React96.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
             "div",
             {
               className: cn(
@@ -38068,7 +38662,7 @@ var Sidebar = React96.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
             "div",
             {
               className: cn(
@@ -38079,7 +38673,7 @@ var Sidebar = React96.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -38095,9 +38689,9 @@ var Sidebar = React96.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React96.forwardRef(({ className, onClick, ...props }, ref) => {
+var SidebarTrigger = React99.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     Button,
     {
       ref,
@@ -38111,16 +38705,16 @@ var SidebarTrigger = React96.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(PanelLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(PanelLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React96.forwardRef(({ className, ...props }, ref) => {
+var SidebarRail = React99.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "button",
     {
       ref,
@@ -38143,8 +38737,8 @@ var SidebarRail = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarInset = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "main",
     {
       ref,
@@ -38158,8 +38752,8 @@ var SidebarInset = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarInput = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     Input,
     {
       ref,
@@ -38173,8 +38767,8 @@ var SidebarInput = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarHeader = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       ref,
@@ -38185,8 +38779,8 @@ var SidebarHeader = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarFooter = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       ref,
@@ -38197,8 +38791,8 @@ var SidebarFooter = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarSeparator = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     Separator2,
     {
       ref,
@@ -38209,8 +38803,8 @@ var SidebarSeparator = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarContent = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       ref,
@@ -38224,8 +38818,8 @@ var SidebarContent = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarGroup = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       ref,
@@ -38236,9 +38830,9 @@ var SidebarGroup = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React96.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupLabel = React99.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     Comp,
     {
       ref,
@@ -38253,9 +38847,9 @@ var SidebarGroupLabel = React96.forwardRef(({ className, asChild = false, ...pro
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React96.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupAction = React99.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     Comp,
     {
       ref,
@@ -38272,7 +38866,7 @@ var SidebarGroupAction = React96.forwardRef(({ className, asChild = false, ...pr
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarGroupContent = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
   "div",
   {
     ref,
@@ -38282,7 +38876,7 @@ var SidebarGroupContent = React96.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarMenu = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
   "ul",
   {
     ref,
@@ -38292,7 +38886,7 @@ var SidebarMenu = React96.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarMenuItem = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
   "li",
   {
     ref,
@@ -38322,7 +38916,7 @@ var sidebarMenuButtonVariants = (0, import_class_variance_authority13.cva)(
     }
   }
 );
-var SidebarMenuButton = React96.forwardRef(
+var SidebarMenuButton = React99.forwardRef(
   ({
     asChild = false,
     isActive = false,
@@ -38334,7 +38928,7 @@ var SidebarMenuButton = React96.forwardRef(
   }, ref) => {
     const Comp = asChild ? import_react_slot6.Slot : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       Comp,
       {
         ref,
@@ -38353,9 +38947,9 @@ var SidebarMenuButton = React96.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         TooltipContent,
         {
           side: "right",
@@ -38368,9 +38962,9 @@ var SidebarMenuButton = React96.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React96.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+var SidebarMenuAction = React99.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     Comp,
     {
       ref,
@@ -38391,7 +38985,7 @@ var SidebarMenuAction = React96.forwardRef(({ className, asChild = false, showOn
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarMenuBadge = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
   "div",
   {
     ref,
@@ -38409,11 +39003,11 @@ var SidebarMenuBadge = React96.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React96.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-  const width = React96.useMemo(() => {
+var SidebarMenuSkeleton = React99.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+  const width = React99.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     "div",
     {
       ref,
@@ -38421,14 +39015,14 @@ var SidebarMenuSkeleton = React96.forwardRef(({ className, showIcon = false, ...
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
           Skeleton,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
@@ -38443,7 +39037,7 @@ var SidebarMenuSkeleton = React96.forwardRef(({ className, showIcon = false, ...
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var SidebarMenuSub = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
   "ul",
   {
     ref,
@@ -38457,11 +39051,11 @@ var SidebarMenuSub = React96.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React96.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("li", { ref, ...props }));
+var SidebarMenuSubItem = React99.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React96.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+var SidebarMenuSubButton = React99.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     Comp,
     {
       ref,
@@ -38485,20 +39079,20 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner = require("sonner");
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = (0, import_next_themes.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     import_sonner.Toaster,
     {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(CircleCheck, { className: "h-4 w-4" }),
+        info: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Info, { className: "h-4 w-4" }),
+        warning: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TriangleAlert, { className: "h-4 w-4" }),
+        error: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(OctagonX, { className: "h-4 w-4" }),
+        loading: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -38514,26 +39108,26 @@ var Toaster = ({ ...props }) => {
 };
 
 // src/components/ui/toggle-group.tsx
-var React97 = __toESM(require("react"), 1);
+var React100 = __toESM(require("react"), 1);
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
-var import_jsx_runtime130 = require("react/jsx-runtime");
-var ToggleGroupContext = React97.createContext({
+var import_jsx_runtime135 = require("react/jsx-runtime");
+var ToggleGroupContext = React100.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React97.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+var ToggleGroup = React100.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React97.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React97.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+var ToggleGroupItem = React100.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React100.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -38552,7 +39146,7 @@ var ToggleGroupItem = React97.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -38644,24 +39238,24 @@ var COMPONENT_SUGGESTIONS = {
 };
 var renderContextDependentError = (componentName, normalizedName, key) => {
   const suggestion = COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom (if available)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
     "div",
     {
       className: "p-4 border-2 border-amber-500/50 rounded-lg bg-amber-50/80 space-y-2 my-2",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
               "Invalid Component: ",
               componentName
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
+            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
         ] })
       ]
     },
@@ -38741,7 +39335,7 @@ var PXEngineRenderer = ({
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
-    if (import_react66.default.isValidElement(component)) {
+    if (import_react69.default.isValidElement(component)) {
       return component;
     }
     if (!component || typeof component !== "object") return null;
@@ -38819,7 +39413,7 @@ var PXEngineRenderer = ({
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
-      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -38831,7 +39425,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -38843,7 +39437,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -38853,6 +39447,8 @@ var PXEngineRenderer = ({
   AccordionItem,
   AccordionTrigger,
   ActionButton,
+  AgentCard,
+  AgentDataTable,
   Alert,
   AlertAtom,
   AlertDescription,
@@ -38997,6 +39593,7 @@ var PXEngineRenderer = ({
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
+  InstructionPreview,
   KbdAtom,
   KeywordBundlesDisplay,
   KeywordBundlesEdit,
@@ -39101,6 +39698,7 @@ var PXEngineRenderer = ({
   TextareaAtom,
   TimelineAtom,
   ToggleAtom,
+  ToolListCard,
   Tooltip,
   TooltipAtom,
   TooltipContent,
@@ -39108,6 +39706,7 @@ var PXEngineRenderer = ({
   TooltipTrigger,
   TopPostsGrid,
   VideoAtom,
+  WorkflowVisualizer,
   cn
 });
 /*! Bundled license information: