@remoraflow/ui 0.4.0 → 0.5.0

package/dist/index.js

@@ -128,13 +128,135 @@ function ReplaySlider({
     ]
   });
 }
+// src/components/step-palette.tsx
+import {
+  Bot,
+  FileOutput,
+  GitBranch,
+  Hand,
+  Moon,
+  Play,
+  Repeat,
+  Sparkles,
+  Timer,
+  Wrench
+} from "lucide-react";
+import { useCallback, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var STEP_TYPES = [
+  {
+    type: "start",
+    label: "Start",
+    color: "text-green-600 dark:text-green-400",
+    icon: Play
+  },
+  {
+    type: "end",
+    label: "End",
+    color: "text-muted-foreground",
+    icon: Hand
+  },
+  {
+    type: "tool-call",
+    label: "Tool Call",
+    color: "text-blue-600 dark:text-blue-400",
+    icon: Wrench
+  },
+  {
+    type: "llm-prompt",
+    label: "LLM Prompt",
+    color: "text-violet-600 dark:text-violet-400",
+    icon: Sparkles
+  },
+  {
+    type: "extract-data",
+    label: "Extract Data",
+    color: "text-purple-600 dark:text-purple-400",
+    icon: FileOutput
+  },
+  {
+    type: "switch-case",
+    label: "Switch Case",
+    color: "text-amber-600 dark:text-amber-400",
+    icon: GitBranch
+  },
+  {
+    type: "for-each",
+    label: "For Each",
+    color: "text-emerald-600 dark:text-emerald-400",
+    icon: Repeat
+  },
+  {
+    type: "sleep",
+    label: "Sleep",
+    color: "text-yellow-600 dark:text-yellow-400",
+    icon: Moon
+  },
+  {
+    type: "wait-for-condition",
+    label: "Wait",
+    color: "text-orange-600 dark:text-orange-400",
+    icon: Timer
+  },
+  {
+    type: "agent-loop",
+    label: "Agent Loop",
+    color: "text-teal-600 dark:text-teal-400",
+    icon: Bot
+  }
+];
+function StepPalette({ onAddStep }) {
+  const [collapsed, setCollapsed] = useState(false);
+  const onDragStart = useCallback((event, type) => {
+    event.dataTransfer.setData("application/remora-step-type", type);
+    event.dataTransfer.effectAllowed = "move";
+  }, []);
+  return /* @__PURE__ */ jsxs2("div", {
+    className: "bg-card border border-border rounded-lg shadow-md overflow-hidden w-[160px]",
+    children: [
+      /* @__PURE__ */ jsxs2("button", {
+        type: "button",
+        onClick: () => setCollapsed(!collapsed),
+        className: "w-full px-3 py-1.5 text-xs font-medium text-foreground flex items-center justify-between hover:bg-muted/50 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx3("span", {
+            children: "Add Steps"
+          }),
+          /* @__PURE__ */ jsx3("span", {
+            className: `text-[10px] text-muted-foreground transition-transform ${collapsed ? "" : "rotate-180"}`,
+            children: "▲"
+          })
+        ]
+      }),
+      !collapsed && /* @__PURE__ */ jsx3("div", {
+        className: "border-t border-border",
+        children: STEP_TYPES.map((entry) => /* @__PURE__ */ jsxs2("button", {
+          type: "button",
+          onClick: () => onAddStep(entry.type),
+          draggable: true,
+          onDragStart: (e) => onDragStart(e, entry.type),
+          className: "w-full px-3 py-1 text-left hover:bg-muted/50 transition-colors cursor-grab active:cursor-grabbing flex items-center gap-1.5",
+          children: [
+            /* @__PURE__ */ jsx3(entry.icon, {
+              className: `w-3.5 h-3.5 shrink-0 ${entry.color}`
+            }),
+            /* @__PURE__ */ jsx3("span", {
+              className: `text-[10px] font-semibold uppercase tracking-wide ${entry.color}`,
+              children: entry.label
+            })
+          ]
+        }, entry.type))
+      })
+    ]
+  });
+}
 // src/components/ui/collapsible.tsx
 import { Collapsible as CollapsiblePrimitive } from "radix-ui";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(CollapsiblePrimitive.Root, {
+  return /* @__PURE__ */ jsx4(CollapsiblePrimitive.Root, {
     "data-slot": "collapsible",
     ...props
   });
@@ -142,7 +264,7 @@ function Collapsible({
 function CollapsibleTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(CollapsiblePrimitive.CollapsibleTrigger, {
+  return /* @__PURE__ */ jsx4(CollapsiblePrimitive.CollapsibleTrigger, {
     "data-slot": "collapsible-trigger",
     ...props
   });
@@ -150,7 +272,7 @@ function CollapsibleTrigger({
 function CollapsibleContent({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(CollapsiblePrimitive.CollapsibleContent, {
+  return /* @__PURE__ */ jsx4(CollapsiblePrimitive.CollapsibleContent, {
     "data-slot": "collapsible-content",
     ...props
   });
@@ -158,12 +280,12 @@ function CollapsibleContent({
 // src/components/ui/dropdown-menu.tsx
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 "use client";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Root, {
+  return /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Root, {
     "data-slot": "dropdown-menu",
     ...props
   });
@@ -171,7 +293,7 @@ function DropdownMenu({
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Trigger, {
     "data-slot": "dropdown-menu-trigger",
     ...props
   });
@@ -181,8 +303,8 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Content, {
+  return /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Content, {
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
@@ -196,7 +318,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Item, {
+  return /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Item, {
     "data-slot": "dropdown-menu-item",
     "data-inset": inset,
     "data-variant": variant,
@@ -209,7 +331,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Label, {
+  return /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Label, {
     "data-slot": "dropdown-menu-label",
     "data-inset": inset,
     className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
@@ -220,16 +342,16 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Separator, {
+  return /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Separator, {
     "data-slot": "dropdown-menu-separator",
     className: cn("-mx-1 my-1 h-px bg-border", className),
     ...props
   });
 }
 // src/components/ui/input.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx5("input", {
+  return /* @__PURE__ */ jsx6("input", {
     type,
     "data-slot": "input",
     className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
@@ -238,13 +360,13 @@ function Input({ className, type, ...props }) {
 }
 // src/components/ui/label.tsx
 import { Label as LabelPrimitive } from "radix-ui";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 "use client";
 function Label({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(LabelPrimitive.Root, {
+  return /* @__PURE__ */ jsx7(LabelPrimitive.Root, {
     "data-slot": "label",
     className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
     ...props
@@ -253,11 +375,11 @@ function Label({
 // src/components/ui/select.tsx
 import { CheckIcon as CheckIcon2, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { Select as SelectPrimitive } from "radix-ui";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(SelectPrimitive.Root, {
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Root, {
     "data-slot": "select",
     ...props
   });
@@ -265,7 +387,7 @@ function Select({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(SelectPrimitive.Value, {
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Value, {
     "data-slot": "select-value",
     ...props
   });
@@ -276,16 +398,16 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs3(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ jsxs4(SelectPrimitive.Trigger, {
     "data-slot": "select-trigger",
     "data-size": size,
     className: cn("flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx7(SelectPrimitive.Icon, {
+      /* @__PURE__ */ jsx8(SelectPrimitive.Icon, {
         asChild: true,
-        children: /* @__PURE__ */ jsx7(ChevronDownIcon, {
+        children: /* @__PURE__ */ jsx8(ChevronDownIcon, {
           className: "size-4 opacity-50"
         })
       })
@@ -299,20 +421,20 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(SelectPrimitive.Portal, {
-    children: /* @__PURE__ */ jsxs3(SelectPrimitive.Content, {
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Portal, {
+    children: /* @__PURE__ */ jsxs4(SelectPrimitive.Content, {
       "data-slot": "select-content",
       className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
       position,
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx7(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx7(SelectPrimitive.Viewport, {
+        /* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx8(SelectPrimitive.Viewport, {
           className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
           children
         }),
-        /* @__PURE__ */ jsx7(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx8(SelectScrollDownButton, {})
       ]
     })
   });
@@ -322,21 +444,21 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs3(SelectPrimitive.Item, {
+  return /* @__PURE__ */ jsxs4(SelectPrimitive.Item, {
     "data-slot": "select-item",
     className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx7("span", {
+      /* @__PURE__ */ jsx8("span", {
         "data-slot": "select-item-indicator",
         className: "absolute right-2 flex size-3.5 items-center justify-center",
-        children: /* @__PURE__ */ jsx7(SelectPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx7(CheckIcon2, {
+        children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsx8(CheckIcon2, {
             className: "size-4"
           })
         })
       }),
-      /* @__PURE__ */ jsx7(SelectPrimitive.ItemText, {
+      /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, {
         children
       })
     ]
@@ -346,11 +468,11 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(SelectPrimitive.ScrollUpButton, {
+  return /* @__PURE__ */ jsx8(SelectPrimitive.ScrollUpButton, {
     "data-slot": "select-scroll-up-button",
     className: cn("flex cursor-default items-center justify-center py-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx7(ChevronUpIcon, {
+    children: /* @__PURE__ */ jsx8(ChevronUpIcon, {
       className: "size-4"
     })
   });
@@ -359,54 +481,54 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx7(SelectPrimitive.ScrollDownButton, {
+  return /* @__PURE__ */ jsx8(SelectPrimitive.ScrollDownButton, {
     "data-slot": "select-scroll-down-button",
     className: cn("flex cursor-default items-center justify-center py-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx7(ChevronDownIcon, {
+    children: /* @__PURE__ */ jsx8(ChevronDownIcon, {
       className: "size-4"
     })
   });
 }
 // src/components/ui/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Switch({
   className,
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(SwitchPrimitive.Root, {
+  return /* @__PURE__ */ jsx9(SwitchPrimitive.Root, {
     "data-slot": "switch",
     "data-size": size,
     className: cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className),
     ...props,
-    children: /* @__PURE__ */ jsx8(SwitchPrimitive.Thumb, {
+    children: /* @__PURE__ */ jsx9(SwitchPrimitive.Thumb, {
       "data-slot": "switch-thumb",
       className: cn("pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground")
     })
   });
 }
 // src/components/ui/textarea.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx9("textarea", {
+  return /* @__PURE__ */ jsx10("textarea", {
     "data-slot": "textarea",
     className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className),
     ...props
   });
 }
 // src/editors/expression-editor.tsx
-import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/components/ui/tabs.tsx
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Tabs({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(TabsPrimitive.Root, {
+  return /* @__PURE__ */ jsx11(TabsPrimitive.Root, {
     "data-slot": "tabs",
     className: cn("flex flex-col gap-2", className),
     ...props
@@ -416,7 +538,7 @@ function TabsList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(TabsPrimitive.List, {
+  return /* @__PURE__ */ jsx11(TabsPrimitive.List, {
     "data-slot": "tabs-list",
     className: cn("inline-flex w-fit items-center justify-center rounded-lg bg-muted/50 p-0.5 text-muted-foreground", className),
     ...props
@@ -426,7 +548,7 @@ function TabsTrigger({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(TabsPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx11(TabsPrimitive.Trigger, {
     "data-slot": "tabs-trigger",
     className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-2.5 py-1 text-[11px] font-medium transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:shadow-sm", className),
     ...props
@@ -436,7 +558,7 @@ function TabsContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(TabsPrimitive.Content, {
+  return /* @__PURE__ */ jsx11(TabsPrimitive.Content, {
     "data-slot": "tabs-content",
     className: cn("flex-1 outline-none", className),
     ...props
@@ -568,7 +690,7 @@ function buildEditorTheme(dark, scrollerMaxHeight) {
 }
 
 // src/editors/json-code-editor.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function JsonCodeEditor({
   value,
   onChange,
@@ -660,14 +782,14 @@ function JsonCodeEditor({
     observer.observe(el, { attributes: true, attributeFilter: ["class"] });
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx11("div", {
+  return /* @__PURE__ */ jsx12("div", {
     ref: containerRef,
     className: cn("json-code-editor", className)
   });
 }
 
 // src/editors/expression-editor.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function inferLiteralType(value) {
   if (typeof value === "string")
     return "string";
@@ -719,7 +841,7 @@ function ExpressionEditor({
   const hintedLiteralType = schemaTypeToLiteralType(schemaHint?.type);
   const hasEnum = schemaHint?.enum && schemaHint.enum.length > 0;
   const allowTemplate = !schemaHint?.type || schemaHint.type === "string";
-  const [literalType, setLiteralType] = useState(hintedLiteralType ?? (value.type === "literal" ? inferLiteralType(value.value) : "string"));
+  const [literalType, setLiteralType] = useState2(hintedLiteralType ?? (value.type === "literal" ? inferLiteralType(value.value) : "string"));
   const prevExprType = useRef2(value.type);
   useEffect2(() => {
     if (value.type === "literal" && prevExprType.current !== "literal") {
@@ -727,7 +849,7 @@ function ExpressionEditor({
     }
     prevExprType.current = value.type;
   }, [value, hintedLiteralType]);
-  const handleTypeChange = useCallback((newType) => {
+  const handleTypeChange = useCallback2((newType) => {
     switch (newType) {
       case "literal":
         if (hasEnum) {
@@ -756,7 +878,7 @@ function ExpressionEditor({
         break;
     }
   }, [value, onChange, hasEnum, schemaHint]);
-  const handleLiteralChange = useCallback((raw, type) => {
+  const handleLiteralChange = useCallback2((raw, type) => {
     let parsed;
     switch (type) {
       case "string":
@@ -778,7 +900,7 @@ function ExpressionEditor({
     }
     onChange({ type: "literal", value: parsed });
   }, [onChange]);
-  const handleLiteralTypeChange = useCallback((lt) => {
+  const handleLiteralTypeChange = useCallback2((lt) => {
     const newType = lt;
     setLiteralType(newType);
     switch (newType) {
@@ -796,38 +918,38 @@ function ExpressionEditor({
         break;
     }
   }, [onChange]);
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs5("div", {
     className: "space-y-1.5",
     children: [
-      label && /* @__PURE__ */ jsx12("div", {
+      label && /* @__PURE__ */ jsx13("div", {
         className: "text-[11px] font-medium text-muted-foreground mb-1",
         children: label
       }),
       (() => {
         const litVal = value.type === "literal" ? value.value : undefined;
-        return /* @__PURE__ */ jsxs4(Tabs, {
+        return /* @__PURE__ */ jsxs5(Tabs, {
           value: value.type,
           onValueChange: handleTypeChange,
           children: [
-            /* @__PURE__ */ jsxs4(TabsList, {
+            /* @__PURE__ */ jsxs5(TabsList, {
               children: [
-                /* @__PURE__ */ jsx12(TabsTrigger, {
+                /* @__PURE__ */ jsx13(TabsTrigger, {
                   value: "literal",
                   children: "Literal"
                 }),
-                /* @__PURE__ */ jsx12(TabsTrigger, {
+                /* @__PURE__ */ jsx13(TabsTrigger, {
                   value: "jmespath",
                   children: "Expression"
                 }),
-                allowTemplate && /* @__PURE__ */ jsx12(TabsTrigger, {
+                allowTemplate && /* @__PURE__ */ jsx13(TabsTrigger, {
                   value: "template",
                   children: "String Template"
                 })
               ]
             }),
-            /* @__PURE__ */ jsx12(TabsContent, {
+            /* @__PURE__ */ jsx13(TabsContent, {
               value: "literal",
-              children: hasEnum ? /* @__PURE__ */ jsxs4(Select, {
+              children: hasEnum ? /* @__PURE__ */ jsxs5(Select, {
                 value: String(litVal ?? ""),
                 onValueChange: (val) => {
                   const match = schemaHint?.enum?.find((e) => String(e) === val);
@@ -837,51 +959,51 @@ function ExpressionEditor({
                   });
                 },
                 children: [
-                  /* @__PURE__ */ jsx12(SelectTrigger, {
+                  /* @__PURE__ */ jsx13(SelectTrigger, {
                     className: "h-8 text-xs font-mono w-full",
-                    children: /* @__PURE__ */ jsx12(SelectValue, {
+                    children: /* @__PURE__ */ jsx13(SelectValue, {
                       placeholder: "-- select --"
                     })
                   }),
-                  /* @__PURE__ */ jsx12(SelectContent, {
-                    children: schemaHint?.enum?.map((v) => /* @__PURE__ */ jsx12(SelectItem, {
+                  /* @__PURE__ */ jsx13(SelectContent, {
+                    children: schemaHint?.enum?.map((v) => /* @__PURE__ */ jsx13(SelectItem, {
                       value: String(v),
                       children: String(v)
                     }, String(v)))
                   })
                 ]
-              }) : hintedLiteralType ? /* @__PURE__ */ jsx12(LiteralWidget, {
+              }) : hintedLiteralType ? /* @__PURE__ */ jsx13(LiteralWidget, {
                 type: hintedLiteralType,
                 value: litVal,
                 onChange: (raw) => handleLiteralChange(raw, hintedLiteralType),
                 onValueChange: onChange
-              }) : /* @__PURE__ */ jsxs4(Tabs, {
+              }) : /* @__PURE__ */ jsxs5(Tabs, {
                 value: literalType,
                 onValueChange: handleLiteralTypeChange,
                 children: [
-                  /* @__PURE__ */ jsxs4(TabsList, {
+                  /* @__PURE__ */ jsxs5(TabsList, {
                     children: [
-                      /* @__PURE__ */ jsx12(TabsTrigger, {
+                      /* @__PURE__ */ jsx13(TabsTrigger, {
                         value: "string",
                         children: "string"
                       }),
-                      /* @__PURE__ */ jsx12(TabsTrigger, {
+                      /* @__PURE__ */ jsx13(TabsTrigger, {
                         value: "number",
                         children: "number"
                       }),
-                      /* @__PURE__ */ jsx12(TabsTrigger, {
+                      /* @__PURE__ */ jsx13(TabsTrigger, {
                         value: "boolean",
                         children: "boolean"
                       }),
-                      /* @__PURE__ */ jsx12(TabsTrigger, {
+                      /* @__PURE__ */ jsx13(TabsTrigger, {
                         value: "json",
                         children: "json"
                       })
                     ]
                   }),
-                  /* @__PURE__ */ jsx12(TabsContent, {
+                  /* @__PURE__ */ jsx13(TabsContent, {
                     value: "string",
-                    children: /* @__PURE__ */ jsx12(Input, {
+                    children: /* @__PURE__ */ jsx13(Input, {
                       type: "text",
                       value: String(litVal ?? ""),
                       onChange: (e) => handleLiteralChange(e.target.value, "string"),
@@ -889,9 +1011,9 @@ function ExpressionEditor({
                       placeholder: "Enter value..."
                     })
                   }),
-                  /* @__PURE__ */ jsx12(TabsContent, {
+                  /* @__PURE__ */ jsx13(TabsContent, {
                     value: "number",
-                    children: /* @__PURE__ */ jsx12(Input, {
+                    children: /* @__PURE__ */ jsx13(Input, {
                       type: "number",
                       value: String(litVal ?? ""),
                       onChange: (e) => handleLiteralChange(e.target.value, "number"),
@@ -899,26 +1021,26 @@ function ExpressionEditor({
                       placeholder: "0"
                     })
                   }),
-                  /* @__PURE__ */ jsx12(TabsContent, {
+                  /* @__PURE__ */ jsx13(TabsContent, {
                     value: "boolean",
-                    children: /* @__PURE__ */ jsxs4(Select, {
+                    children: /* @__PURE__ */ jsxs5(Select, {
                       value: litVal === true ? "true" : "false",
                       onValueChange: (val) => onChange({
                         type: "literal",
                         value: val === "true"
                       }),
                       children: [
-                        /* @__PURE__ */ jsx12(SelectTrigger, {
+                        /* @__PURE__ */ jsx13(SelectTrigger, {
                           className: "h-8 text-xs font-mono w-full",
-                          children: /* @__PURE__ */ jsx12(SelectValue, {})
+                          children: /* @__PURE__ */ jsx13(SelectValue, {})
                         }),
-                        /* @__PURE__ */ jsxs4(SelectContent, {
+                        /* @__PURE__ */ jsxs5(SelectContent, {
                           children: [
-                            /* @__PURE__ */ jsx12(SelectItem, {
+                            /* @__PURE__ */ jsx13(SelectItem, {
                               value: "true",
                               children: "true"
                             }),
-                            /* @__PURE__ */ jsx12(SelectItem, {
+                            /* @__PURE__ */ jsx13(SelectItem, {
                               value: "false",
                               children: "false"
                             })
@@ -927,9 +1049,9 @@ function ExpressionEditor({
                       ]
                     })
                   }),
-                  /* @__PURE__ */ jsx12(TabsContent, {
+                  /* @__PURE__ */ jsx13(TabsContent, {
                     value: "json",
-                    children: /* @__PURE__ */ jsx12(JsonCodeEditor, {
+                    children: /* @__PURE__ */ jsx13(JsonCodeEditor, {
                       value: typeof litVal === "string" ? litVal : JSON.stringify(litVal, null, 2),
                       onChange: (val) => handleLiteralChange(val, "json"),
                       placeholderText: '{"key": "value"}'
@@ -938,9 +1060,9 @@ function ExpressionEditor({
                 ]
               })
             }),
-            /* @__PURE__ */ jsx12(TabsContent, {
+            /* @__PURE__ */ jsx13(TabsContent, {
               value: "jmespath",
-              children: /* @__PURE__ */ jsx12(Input, {
+              children: /* @__PURE__ */ jsx13(Input, {
                 value: value.type === "jmespath" ? value.expression : "",
                 onChange: (e) => onChange({
                   type: "jmespath",
@@ -950,9 +1072,9 @@ function ExpressionEditor({
                 placeholder: "stepId.outputKey"
               })
             }),
-            allowTemplate && /* @__PURE__ */ jsx12(TabsContent, {
+            allowTemplate && /* @__PURE__ */ jsx13(TabsContent, {
               value: "template",
-              children: /* @__PURE__ */ jsx12(Textarea, {
+              children: /* @__PURE__ */ jsx13(Textarea, {
                 value: value.type === "template" ? value.template : "",
                 onChange: (e) => onChange({
                   type: "template",
@@ -977,7 +1099,7 @@ function LiteralWidget({
 }) {
   switch (type) {
     case "string":
-      return /* @__PURE__ */ jsx12(Input, {
+      return /* @__PURE__ */ jsx13(Input, {
         type: "text",
         value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
@@ -985,7 +1107,7 @@ function LiteralWidget({
         placeholder: "Enter value..."
       });
     case "number":
-      return /* @__PURE__ */ jsx12(Input, {
+      return /* @__PURE__ */ jsx13(Input, {
         type: "number",
         value: String(value ?? ""),
         onChange: (e) => onChange(e.target.value),
@@ -993,24 +1115,24 @@ function LiteralWidget({
         placeholder: "0"
       });
     case "boolean":
-      return /* @__PURE__ */ jsxs4(Select, {
+      return /* @__PURE__ */ jsxs5(Select, {
         value: value === true ? "true" : "false",
         onValueChange: (val) => onValueChange({
           type: "literal",
           value: val === "true"
         }),
         children: [
-          /* @__PURE__ */ jsx12(SelectTrigger, {
+          /* @__PURE__ */ jsx13(SelectTrigger, {
             className: "h-8 text-xs font-mono w-full",
-            children: /* @__PURE__ */ jsx12(SelectValue, {})
+            children: /* @__PURE__ */ jsx13(SelectValue, {})
           }),
-          /* @__PURE__ */ jsxs4(SelectContent, {
+          /* @__PURE__ */ jsxs5(SelectContent, {
             children: [
-              /* @__PURE__ */ jsx12(SelectItem, {
+              /* @__PURE__ */ jsx13(SelectItem, {
                 value: "true",
                 children: "true"
               }),
-              /* @__PURE__ */ jsx12(SelectItem, {
+              /* @__PURE__ */ jsx13(SelectItem, {
                 value: "false",
                 children: "false"
               })
@@ -1019,7 +1141,7 @@ function LiteralWidget({
         ]
       });
     case "json":
-      return /* @__PURE__ */ jsx12(JsonCodeEditor, {
+      return /* @__PURE__ */ jsx13(JsonCodeEditor, {
         value: typeof value === "string" ? value : JSON.stringify(value, null, 2),
         onChange,
         placeholderText: '{"key": "value"}'
@@ -1032,7 +1154,7 @@ import { syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language"
 import { Compartment as Compartment2, EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView3 } from "@codemirror/view";
 import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function buildViewerTheme(dark) {
   const viewerTheme = EditorView3.theme({
     "&": {
@@ -1120,7 +1242,7 @@ function JsonViewer({ value, className }) {
     observer.observe(el, { attributes: true, attributeFilter: ["class"] });
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx14("div", {
     ref: containerRef,
     className: cn("json-viewer", className),
     style: hidden ? { display: "none" } : undefined
@@ -1963,13 +2085,13 @@ function buildEditableLayout(workflow, diagnostics = [], executionState, positio
 }
 // src/hooks/use-workflow-execution.ts
 import { hashWorkflow } from "@remoraflow/core";
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
 function useWorkflowExecution(workflow, options) {
-  const [executionState, setExecutionState] = useState2(null);
-  const [stateHistory, setStateHistory] = useState2([]);
-  const [isRunning, setIsRunning] = useState2(false);
-  const [replayIndex, setReplayIndex] = useState2(null);
-  const [pausedState, setPausedState] = useState2(() => {
+  const [executionState, setExecutionState] = useState3(null);
+  const [stateHistory, setStateHistory] = useState3([]);
+  const [isRunning, setIsRunning] = useState3(false);
+  const [replayIndex, setReplayIndex] = useState3(null);
+  const [pausedState, setPausedState] = useState3(() => {
     if (!workflow)
       return null;
     return options.persist?.load(hashWorkflow(workflow)) ?? null;
@@ -1989,7 +2111,7 @@ function useWorkflowExecution(workflow, options) {
       options.persist?.clear(hash);
     }
   }, [workflow, pausedState, options.persist]);
-  const startStreaming = useCallback2(async (inputs, initialState) => {
+  const startStreaming = useCallback3(async (inputs, initialState) => {
     if (!workflow)
       return;
     const ac = new AbortController;
@@ -2026,7 +2148,7 @@ function useWorkflowExecution(workflow, options) {
       abortRef.current = null;
     }
   }, [workflow, options]);
-  const run = useCallback2((inputs) => {
+  const run = useCallback3((inputs) => {
     if (!workflow || isRunning)
       return;
     const resolvedInputs = inputs ?? {};
@@ -2041,7 +2163,7 @@ function useWorkflowExecution(workflow, options) {
     setIsRunning(true);
     startStreaming(resolvedInputs);
   }, [workflow, isRunning, startStreaming, options]);
-  const pause = useCallback2(() => {
+  const pause = useCallback3(() => {
     if (!workflow || !isRunning)
       return;
     const wfHash = hashWorkflow(workflow);
@@ -2053,7 +2175,7 @@ function useWorkflowExecution(workflow, options) {
     abortRef.current?.abort();
     setIsRunning(false);
   }, [workflow, isRunning, options]);
-  const resume = useCallback2(() => {
+  const resume = useCallback3(() => {
     if (!workflow || !pausedState || isRunning)
       return;
     const wfHash = hashWorkflow(workflow);
@@ -2067,7 +2189,7 @@ function useWorkflowExecution(workflow, options) {
     setIsRunning(true);
     startStreaming(lastInputsRef.current, pausedState);
   }, [workflow, pausedState, isRunning, startStreaming, options]);
-  const reset = useCallback2(() => {
+  const reset = useCallback3(() => {
     abortRef.current?.abort();
     setExecutionState(null);
     setStateHistory([]);
@@ -2078,14 +2200,14 @@ function useWorkflowExecution(workflow, options) {
     if (workflow)
       options.persist?.clear(hashWorkflow(workflow));
   }, [workflow, options]);
-  const seekTo = useCallback2((index) => {
+  const seekTo = useCallback3((index) => {
     const isAtEnd = index === stateHistoryRef.current.length - 1;
     setReplayIndex(isAtEnd ? null : index);
     const target = stateHistoryRef.current[index];
     if (target)
       setExecutionState(target);
   }, []);
-  const goLive = useCallback2(() => {
+  const goLive = useCallback3(() => {
     setReplayIndex(null);
     const latest = stateHistoryRef.current[stateHistoryRef.current.length - 1] ?? null;
     setExecutionState(latest);
@@ -2106,86 +2228,86 @@ function useWorkflowExecution(workflow, options) {
 }
 // src/panels/shared.tsx
 import {
-  Bot,
-  FileOutput,
-  GitBranch,
-  Hand,
-  Moon,
-  Play,
-  Repeat,
-  Sparkles,
-  Timer,
-  Wrench
+  Bot as Bot2,
+  FileOutput as FileOutput2,
+  GitBranch as GitBranch2,
+  Hand as Hand2,
+  Moon as Moon2,
+  Play as Play2,
+  Repeat as Repeat2,
+  Sparkles as Sparkles2,
+  Timer as Timer2,
+  Wrench as Wrench2
 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var STEP_TYPE_META = {
   start: {
     label: "Start",
     color: "text-green-600 dark:text-green-400",
-    icon: Play
+    icon: Play2
   },
   end: {
     label: "End",
     color: "text-muted-foreground",
-    icon: Hand
+    icon: Hand2
   },
   "tool-call": {
     label: "Tool Call",
     color: "text-blue-600 dark:text-blue-400",
-    icon: Wrench
+    icon: Wrench2
   },
   "llm-prompt": {
     label: "LLM Prompt",
     color: "text-violet-600 dark:text-violet-400",
-    icon: Sparkles
+    icon: Sparkles2
   },
   "extract-data": {
     label: "Extract Data",
     color: "text-purple-600 dark:text-purple-400",
-    icon: FileOutput
+    icon: FileOutput2
   },
   "switch-case": {
     label: "Switch Case",
     color: "text-amber-600 dark:text-amber-400",
-    icon: GitBranch
+    icon: GitBranch2
   },
   "for-each": {
     label: "For Each",
     color: "text-emerald-600 dark:text-emerald-400",
-    icon: Repeat
+    icon: Repeat2
   },
   sleep: {
     label: "Sleep",
     color: "text-yellow-600 dark:text-yellow-400",
-    icon: Moon
+    icon: Moon2
   },
   "wait-for-condition": {
     label: "Wait",
     color: "text-orange-600 dark:text-orange-400",
-    icon: Timer
+    icon: Timer2
   },
   "agent-loop": {
     label: "Agent Loop",
     color: "text-teal-600 dark:text-teal-400",
-    icon: Bot
+    icon: Bot2
   }
 };
 function TypeBadge({ type }) {
   const meta = STEP_TYPE_META[type];
   if (!meta) {
-    return /* @__PURE__ */ jsx14("span", {
+    return /* @__PURE__ */ jsx15("span", {
       className: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground",
       children: type
     });
   }
   const Icon = meta.icon;
-  return /* @__PURE__ */ jsxs5("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: `inline-flex items-center gap-1.5 shrink-0 ${meta.color}`,
     children: [
-      /* @__PURE__ */ jsx14(Icon, {
+      /* @__PURE__ */ jsx15(Icon, {
         className: "w-3.5 h-3.5"
       }),
-      /* @__PURE__ */ jsx14("span", {
+      /* @__PURE__ */ jsx15("span", {
         className: "text-[10px] font-semibold uppercase tracking-wide",
         children: meta.label
       })
@@ -2193,20 +2315,20 @@ function TypeBadge({ type }) {
   });
 }
 function SectionHeader({ children }) {
-  return /* @__PURE__ */ jsx14("div", {
+  return /* @__PURE__ */ jsx15("div", {
     className: "text-xs font-semibold text-foreground mb-2",
     children
   });
 }
 function Label2({ children }) {
-  return /* @__PURE__ */ jsx14("div", {
+  return /* @__PURE__ */ jsx15("div", {
     className: "text-[11px] font-medium text-muted-foreground mb-1",
     children
   });
 }
 
 // src/panels/step-detail-panel.tsx
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function jsonString(value) {
   return typeof value === "string" ? value : JSON.stringify(value, null, 2);
 }
@@ -2225,7 +2347,7 @@ function StatusBadge({ summary }) {
     failed: "bg-red-50 text-red-700 border border-red-200 dark:bg-red-950/40 dark:text-red-300 dark:border-red-800",
     skipped: "bg-muted text-muted-foreground border border-border"
   };
-  return /* @__PURE__ */ jsx15("span", {
+  return /* @__PURE__ */ jsx16("span", {
     className: `text-[11px] font-semibold px-2.5 py-0.5 rounded-full ${colors[summary.status]}`,
     children: summary.status
   });
@@ -2236,13 +2358,13 @@ function ResolvedCode({
 }) {
   const display = jsonString(value);
   if (typeof value === "string") {
-    return /* @__PURE__ */ jsx15("pre", {
+    return /* @__PURE__ */ jsx16("pre", {
       className: "text-xs text-emerald-700 bg-emerald-50 dark:text-emerald-300 dark:bg-emerald-950/40 rounded-md p-2.5 whitespace-pre-wrap font-mono overflow-auto max-h-[200px] cursor-default border border-emerald-200/60 dark:border-emerald-900/50",
       title: expression,
       children: display
     });
   }
-  return /* @__PURE__ */ jsx15(JsonViewer, {
+  return /* @__PURE__ */ jsx16(JsonViewer, {
     value: display
   });
 }
@@ -2253,42 +2375,42 @@ function StepParams({
   const resolved = resolvedInputs;
   switch (step.type) {
     case "tool-call":
-      return /* @__PURE__ */ jsxs6("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: "space-y-3",
         children: [
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Tool"
               }),
-              /* @__PURE__ */ jsx15("div", {
+              /* @__PURE__ */ jsx16("div", {
                 className: "text-xs font-mono font-medium text-foreground bg-muted/40 rounded px-2 py-1 inline-block",
                 children: step.params.toolName
               })
             ]
           }),
-          Object.keys(step.params.toolInput).length > 0 && /* @__PURE__ */ jsxs6("div", {
+          Object.keys(step.params.toolInput).length > 0 && /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Inputs"
               }),
-              /* @__PURE__ */ jsx15("div", {
+              /* @__PURE__ */ jsx16("div", {
                 className: "space-y-1.5",
                 children: Object.entries(step.params.toolInput).map(([key, val]) => {
                   const resolvedVal = resolved?.[key];
                   const hasResolved = resolvedVal !== undefined;
-                  return /* @__PURE__ */ jsxs6("div", {
+                  return /* @__PURE__ */ jsxs7("div", {
                     className: "flex gap-2 text-xs items-baseline",
                     children: [
-                      /* @__PURE__ */ jsx15("span", {
+                      /* @__PURE__ */ jsx16("span", {
                         className: "font-mono font-medium text-muted-foreground shrink-0",
                         children: key
                       }),
-                      /* @__PURE__ */ jsx15("span", {
+                      /* @__PURE__ */ jsx16("span", {
                         className: "text-muted-foreground/40",
                         children: "="
                       }),
-                      /* @__PURE__ */ jsx15("span", {
+                      /* @__PURE__ */ jsx16("span", {
                         className: `font-mono ${hasResolved ? "text-emerald-700 dark:text-emerald-300" : "text-foreground"}`,
                         title: hasResolved ? renderExpression2(val) : undefined,
                         children: hasResolved ? typeof resolvedVal === "string" ? resolvedVal : JSON.stringify(resolvedVal) : renderExpression2(val)
@@ -2302,29 +2424,29 @@ function StepParams({
         ]
       });
     case "llm-prompt":
-      return /* @__PURE__ */ jsxs6("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: "space-y-2",
         children: [
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Prompt"
               }),
-              resolved?.prompt ? /* @__PURE__ */ jsx15(ResolvedCode, {
+              resolved?.prompt ? /* @__PURE__ */ jsx16(ResolvedCode, {
                 value: resolved.prompt,
                 expression: step.params.prompt
-              }) : /* @__PURE__ */ jsx15("pre", {
+              }) : /* @__PURE__ */ jsx16("pre", {
                 className: "text-xs rounded p-2 whitespace-pre-wrap font-mono text-foreground bg-muted",
                 children: step.params.prompt
               })
             ]
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Output Format"
               }),
-              /* @__PURE__ */ jsx15(JsonViewer, {
+              /* @__PURE__ */ jsx16(JsonViewer, {
                 value: JSON.stringify(step.params.outputFormat, null, 2)
               })
             ]
@@ -2332,28 +2454,28 @@ function StepParams({
         ]
       });
     case "extract-data":
-      return /* @__PURE__ */ jsxs6("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: "space-y-2",
         children: [
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Source"
               }),
-              resolved?.sourceData !== undefined ? /* @__PURE__ */ jsx15(ResolvedCode, {
+              resolved?.sourceData !== undefined ? /* @__PURE__ */ jsx16(ResolvedCode, {
                 value: resolved.sourceData,
                 expression: renderExpression2(step.params.sourceData)
-              }) : /* @__PURE__ */ jsx15(Code, {
+              }) : /* @__PURE__ */ jsx16(Code, {
                 children: renderExpression2(step.params.sourceData)
               })
             ]
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Output Format"
               }),
-              /* @__PURE__ */ jsx15(JsonViewer, {
+              /* @__PURE__ */ jsx16(JsonViewer, {
                 value: JSON.stringify(step.params.outputFormat, null, 2)
               })
             ]
@@ -2361,41 +2483,41 @@ function StepParams({
         ]
       });
     case "switch-case":
-      return /* @__PURE__ */ jsxs6("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: "space-y-3",
         children: [
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Switch On"
               }),
-              resolved?.switchOn !== undefined ? /* @__PURE__ */ jsx15(ResolvedCode, {
+              resolved?.switchOn !== undefined ? /* @__PURE__ */ jsx16(ResolvedCode, {
                 value: resolved.switchOn,
                 expression: renderExpression2(step.params.switchOn)
-              }) : /* @__PURE__ */ jsx15(Code, {
+              }) : /* @__PURE__ */ jsx16(Code, {
                 children: renderExpression2(step.params.switchOn)
               })
             ]
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Cases"
               }),
-              /* @__PURE__ */ jsx15("div", {
+              /* @__PURE__ */ jsx16("div", {
                 className: "space-y-1.5",
-                children: step.params.cases.map((c) => /* @__PURE__ */ jsxs6("div", {
+                children: step.params.cases.map((c) => /* @__PURE__ */ jsxs7("div", {
                   className: "text-xs flex items-center gap-2 bg-muted/30 rounded-md px-2.5 py-1.5",
                   children: [
-                    /* @__PURE__ */ jsx15("span", {
+                    /* @__PURE__ */ jsx16("span", {
                       className: "font-mono font-medium text-muted-foreground",
                       children: c.value.type === "default" ? "default" : renderExpression2(c.value)
                     }),
-                    /* @__PURE__ */ jsx15("span", {
+                    /* @__PURE__ */ jsx16("span", {
                       className: "text-muted-foreground/40",
                       children: "→"
                     }),
-                    /* @__PURE__ */ jsx15("span", {
+                    /* @__PURE__ */ jsx16("span", {
                       className: "font-mono font-medium text-foreground",
                       children: c.branchBodyStepId
                     })
@@ -2407,38 +2529,38 @@ function StepParams({
         ]
       });
     case "for-each":
-      return /* @__PURE__ */ jsxs6("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: "space-y-2",
         children: [
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Target"
               }),
-              resolved?.target !== undefined ? /* @__PURE__ */ jsx15(ResolvedCode, {
+              resolved?.target !== undefined ? /* @__PURE__ */ jsx16(ResolvedCode, {
                 value: resolved.target,
                 expression: renderExpression2(step.params.target)
-              }) : /* @__PURE__ */ jsx15(Code, {
+              }) : /* @__PURE__ */ jsx16(Code, {
                 children: renderExpression2(step.params.target)
               })
             ]
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Item Variable"
               }),
-              /* @__PURE__ */ jsx15(Code, {
+              /* @__PURE__ */ jsx16(Code, {
                 children: step.params.itemName
               })
             ]
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Loop Body"
               }),
-              /* @__PURE__ */ jsx15(Code, {
+              /* @__PURE__ */ jsx16(Code, {
                 children: step.params.loopBodyStepId
               })
             ]
@@ -2446,17 +2568,17 @@ function StepParams({
         ]
       });
     case "sleep":
-      return /* @__PURE__ */ jsx15("div", {
+      return /* @__PURE__ */ jsx16("div", {
         className: "space-y-2",
-        children: /* @__PURE__ */ jsxs6("div", {
+        children: /* @__PURE__ */ jsxs7("div", {
           children: [
-            /* @__PURE__ */ jsx15(Label3, {
+            /* @__PURE__ */ jsx16(Label3, {
               children: "Duration"
             }),
-            resolved?.durationMs !== undefined ? /* @__PURE__ */ jsx15(ResolvedCode, {
+            resolved?.durationMs !== undefined ? /* @__PURE__ */ jsx16(ResolvedCode, {
               value: `${resolved.durationMs}ms`,
               expression: renderExpression2(step.params.durationMs)
-            }) : /* @__PURE__ */ jsxs6(Code, {
+            }) : /* @__PURE__ */ jsxs7(Code, {
               children: [
                 renderExpression2(step.params.durationMs),
                 "ms"
@@ -2466,48 +2588,48 @@ function StepParams({
         })
       });
     case "wait-for-condition":
-      return /* @__PURE__ */ jsxs6("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: "space-y-2",
         children: [
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Condition"
               }),
-              resolved?.condition !== undefined ? /* @__PURE__ */ jsx15(ResolvedCode, {
+              resolved?.condition !== undefined ? /* @__PURE__ */ jsx16(ResolvedCode, {
                 value: resolved.condition,
                 expression: renderExpression2(step.params.condition)
-              }) : /* @__PURE__ */ jsx15(Code, {
+              }) : /* @__PURE__ */ jsx16(Code, {
                 children: renderExpression2(step.params.condition)
               })
             ]
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Condition Step"
               }),
-              /* @__PURE__ */ jsx15(Code, {
+              /* @__PURE__ */ jsx16(Code, {
                 children: step.params.conditionStepId
               })
             ]
           }),
-          step.params.maxAttempts && /* @__PURE__ */ jsxs6("div", {
+          step.params.maxAttempts && /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Max Attempts"
               }),
-              /* @__PURE__ */ jsx15(Code, {
+              /* @__PURE__ */ jsx16(Code, {
                 children: renderExpression2(step.params.maxAttempts)
               })
             ]
           }),
-          step.params.intervalMs && /* @__PURE__ */ jsxs6("div", {
+          step.params.intervalMs && /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Interval"
               }),
-              /* @__PURE__ */ jsxs6(Code, {
+              /* @__PURE__ */ jsxs7(Code, {
                 children: [
                   renderExpression2(step.params.intervalMs),
                   "ms"
@@ -2515,12 +2637,12 @@ function StepParams({
               })
             ]
           }),
-          step.params.timeoutMs && /* @__PURE__ */ jsxs6("div", {
+          step.params.timeoutMs && /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Timeout"
               }),
-              /* @__PURE__ */ jsxs6(Code, {
+              /* @__PURE__ */ jsxs7(Code, {
                 children: [
                   renderExpression2(step.params.timeoutMs),
                   "ms"
@@ -2531,46 +2653,46 @@ function StepParams({
         ]
       });
     case "agent-loop":
-      return /* @__PURE__ */ jsxs6("div", {
+      return /* @__PURE__ */ jsxs7("div", {
         className: "space-y-2",
         children: [
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Instructions"
               }),
-              /* @__PURE__ */ jsx15("pre", {
+              /* @__PURE__ */ jsx16("pre", {
                 className: "text-xs rounded p-2 whitespace-pre-wrap font-mono text-foreground bg-muted",
                 children: step.params.instructions
               })
             ]
           }),
-          step.params.tools.length > 0 && /* @__PURE__ */ jsxs6("div", {
+          step.params.tools.length > 0 && /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Tools"
               }),
-              /* @__PURE__ */ jsx15(Code, {
+              /* @__PURE__ */ jsx16(Code, {
                 children: step.params.tools.join(", ")
               })
             ]
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Output Format"
               }),
-              /* @__PURE__ */ jsx15(JsonViewer, {
+              /* @__PURE__ */ jsx16(JsonViewer, {
                 value: JSON.stringify(step.params.outputFormat, null, 2)
               })
             ]
           }),
-          step.params.maxSteps && /* @__PURE__ */ jsxs6("div", {
+          step.params.maxSteps && /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Max Steps"
               }),
-              /* @__PURE__ */ jsx15(Code, {
+              /* @__PURE__ */ jsx16(Code, {
                 children: renderExpression2(step.params.maxSteps)
               })
             ]
@@ -2581,17 +2703,17 @@ function StepParams({
       return null;
     case "end":
       if (step.params?.output) {
-        return /* @__PURE__ */ jsx15("div", {
+        return /* @__PURE__ */ jsx16("div", {
           className: "space-y-2",
-          children: /* @__PURE__ */ jsxs6("div", {
+          children: /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Output"
               }),
-              resolved?.output !== undefined ? /* @__PURE__ */ jsx15(ResolvedCode, {
+              resolved?.output !== undefined ? /* @__PURE__ */ jsx16(ResolvedCode, {
                 value: resolved.output,
                 expression: renderExpression2(step.params.output)
-              }) : /* @__PURE__ */ jsx15(Code, {
+              }) : /* @__PURE__ */ jsx16(Code, {
                 children: renderExpression2(step.params.output)
               })
             ]
@@ -2602,13 +2724,13 @@ function StepParams({
   }
 }
 function Label3({ children }) {
-  return /* @__PURE__ */ jsx15("div", {
+  return /* @__PURE__ */ jsx16("div", {
     className: "text-[11px] font-medium text-muted-foreground mb-1",
     children
   });
 }
 function Code({ children }) {
-  return /* @__PURE__ */ jsx15("pre", {
+  return /* @__PURE__ */ jsx16("pre", {
     className: "text-xs rounded-md p-2.5 whitespace-pre-wrap font-mono overflow-auto max-h-[200px] text-foreground bg-muted/60 border border-border/50",
     children
   });
@@ -2638,10 +2760,10 @@ var recordStatusColors = {
 function TraceSection({ trace }) {
   if (trace.length === 0)
     return null;
-  return /* @__PURE__ */ jsxs6("details", {
+  return /* @__PURE__ */ jsxs7("details", {
     className: "text-xs group",
     children: [
-      /* @__PURE__ */ jsxs6("summary", {
+      /* @__PURE__ */ jsxs7("summary", {
         className: "text-[11px] font-medium text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors py-0.5",
         children: [
           "Agent Trace (",
@@ -2651,9 +2773,9 @@ function TraceSection({ trace }) {
           ")"
         ]
       }),
-      /* @__PURE__ */ jsx15("div", {
+      /* @__PURE__ */ jsx16("div", {
         className: "mt-1.5",
-        children: /* @__PURE__ */ jsx15(JsonViewer, {
+        children: /* @__PURE__ */ jsx16(JsonViewer, {
           value: JSON.stringify(trace, null, 2)
         })
       })
@@ -2662,28 +2784,28 @@ function TraceSection({ trace }) {
 }
 function ExecutionRecordCard({ record }) {
   const pathLabel = record.path.length > 0 ? record.path.map(formatPathSegment).join(" > ") : null;
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "border border-border rounded-lg p-3 space-y-2 bg-card",
     children: [
-      pathLabel && /* @__PURE__ */ jsx15("div", {
+      pathLabel && /* @__PURE__ */ jsx16("div", {
         className: "text-[11px] font-medium text-muted-foreground",
         children: pathLabel
       }),
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "flex items-center gap-2",
         children: [
-          /* @__PURE__ */ jsx15("span", {
+          /* @__PURE__ */ jsx16("span", {
             className: `text-[11px] font-semibold px-2.5 py-0.5 rounded-full ${recordStatusColors[record.status]}`,
             children: record.status
           }),
-          record.durationMs !== undefined && /* @__PURE__ */ jsxs6("span", {
+          record.durationMs !== undefined && /* @__PURE__ */ jsxs7("span", {
             className: "text-[11px] text-muted-foreground tabular-nums",
             children: [
               record.durationMs,
               "ms"
             ]
           }),
-          record.retries.length > 0 && /* @__PURE__ */ jsxs6("span", {
+          record.retries.length > 0 && /* @__PURE__ */ jsxs7("span", {
             className: "text-[11px] font-medium text-amber-600 dark:text-amber-400",
             children: [
               record.retries.length,
@@ -2693,47 +2815,47 @@ function ExecutionRecordCard({ record }) {
           })
         ]
       }),
-      record.resolvedInputs !== undefined && /* @__PURE__ */ jsxs6("details", {
+      record.resolvedInputs !== undefined && /* @__PURE__ */ jsxs7("details", {
         className: "text-xs group",
         children: [
-          /* @__PURE__ */ jsx15("summary", {
+          /* @__PURE__ */ jsx16("summary", {
             className: "text-[11px] font-medium text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors py-0.5",
             children: "Resolved Inputs"
           }),
-          /* @__PURE__ */ jsx15("div", {
+          /* @__PURE__ */ jsx16("div", {
             className: "mt-1.5",
-            children: /* @__PURE__ */ jsx15(ResolvedCode, {
+            children: /* @__PURE__ */ jsx16(ResolvedCode, {
               value: record.resolvedInputs
             })
           })
         ]
       }),
-      record.output !== undefined && /* @__PURE__ */ jsxs6("details", {
+      record.output !== undefined && /* @__PURE__ */ jsxs7("details", {
         className: "text-xs group",
         children: [
-          /* @__PURE__ */ jsx15("summary", {
+          /* @__PURE__ */ jsx16("summary", {
             className: "text-[11px] font-medium text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors py-0.5",
             children: "Output"
           }),
-          /* @__PURE__ */ jsx15("div", {
+          /* @__PURE__ */ jsx16("div", {
             className: "mt-1.5",
-            children: /* @__PURE__ */ jsx15(JsonViewer, {
+            children: /* @__PURE__ */ jsx16(JsonViewer, {
               value: jsonString(record.output)
             })
           })
         ]
       }),
-      record.trace && record.trace.length > 0 && /* @__PURE__ */ jsx15(TraceSection, {
+      record.trace && record.trace.length > 0 && /* @__PURE__ */ jsx16(TraceSection, {
         trace: record.trace
       }),
-      record.error && /* @__PURE__ */ jsxs6("div", {
+      record.error && /* @__PURE__ */ jsxs7("div", {
         className: "text-xs p-2.5 rounded-md bg-red-50 text-red-700 border border-red-200/80 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800/60",
         children: [
-          /* @__PURE__ */ jsx15("div", {
+          /* @__PURE__ */ jsx16("div", {
             className: "font-semibold font-mono",
             children: record.error.code
           }),
-          /* @__PURE__ */ jsx15("div", {
+          /* @__PURE__ */ jsx16("div", {
             className: "mt-1 leading-relaxed",
             children: record.error.message
           })
@@ -2749,16 +2871,16 @@ function StepDetailPanel({
   executionRecords,
   onClose
 }) {
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "w-[360px] border-l h-full min-h-0 overflow-y-auto bg-card border-border",
     children: [
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "sticky top-0 z-10 border-b px-4 py-3 flex items-center justify-between bg-card/95 backdrop-blur-sm border-border",
         children: [
-          /* @__PURE__ */ jsx15(TypeBadge, {
+          /* @__PURE__ */ jsx16(TypeBadge, {
             type: step.type
           }),
-          /* @__PURE__ */ jsx15("button", {
+          /* @__PURE__ */ jsx16("button", {
             type: "button",
             onClick: onClose,
             className: "text-lg leading-none text-muted-foreground hover:text-foreground shrink-0 rounded-md w-7 h-7 flex items-center justify-center hover:bg-muted transition-colors",
@@ -2766,84 +2888,84 @@ function StepDetailPanel({
           })
         ]
       }),
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "px-4 py-4 space-y-5",
         children: [
-          /* @__PURE__ */ jsx15("div", {
+          /* @__PURE__ */ jsx16("div", {
             className: "font-medium text-sm text-foreground",
             children: step.name
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Step ID"
               }),
-              /* @__PURE__ */ jsx15("div", {
+              /* @__PURE__ */ jsx16("div", {
                 className: "text-xs font-mono text-muted-foreground bg-muted/40 rounded px-2 py-1 inline-block",
                 children: step.id
               })
             ]
           }),
-          step.description && /* @__PURE__ */ jsxs6("div", {
+          step.description && /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Description"
               }),
-              /* @__PURE__ */ jsx15("div", {
+              /* @__PURE__ */ jsx16("div", {
                 className: "text-xs text-muted-foreground leading-relaxed",
                 children: step.description
               })
             ]
           }),
-          step.nextStepId && /* @__PURE__ */ jsxs6("div", {
+          step.nextStepId && /* @__PURE__ */ jsxs7("div", {
             children: [
-              /* @__PURE__ */ jsx15(Label3, {
+              /* @__PURE__ */ jsx16(Label3, {
                 children: "Next Step"
               }),
-              /* @__PURE__ */ jsx15("div", {
+              /* @__PURE__ */ jsx16("div", {
                 className: "text-xs font-mono text-muted-foreground bg-muted/40 rounded px-2 py-1 inline-block",
                 children: step.nextStepId
               })
             ]
           }),
-          /* @__PURE__ */ jsxs6("div", {
+          /* @__PURE__ */ jsxs7("div", {
             className: "border-t pt-4 border-border",
             children: [
-              /* @__PURE__ */ jsx15(SectionHeader, {
+              /* @__PURE__ */ jsx16(SectionHeader, {
                 children: "Parameters"
               }),
-              /* @__PURE__ */ jsx15("div", {
+              /* @__PURE__ */ jsx16("div", {
                 className: "mt-1",
-                children: /* @__PURE__ */ jsx15(StepParams, {
+                children: /* @__PURE__ */ jsx16(StepParams, {
                   step,
                   resolvedInputs: executionRecords?.length ? executionRecords[executionRecords.length - 1]?.resolvedInputs : undefined
                 })
               })
             ]
           }),
-          executionSummary && /* @__PURE__ */ jsxs6("div", {
+          executionSummary && /* @__PURE__ */ jsxs7("div", {
             className: "border-t border-border pt-4",
             children: [
-              /* @__PURE__ */ jsx15(SectionHeader, {
+              /* @__PURE__ */ jsx16(SectionHeader, {
                 children: "Execution"
               }),
-              /* @__PURE__ */ jsxs6("div", {
+              /* @__PURE__ */ jsxs7("div", {
                 className: "mt-1 space-y-3",
                 children: [
-                  /* @__PURE__ */ jsxs6("div", {
+                  /* @__PURE__ */ jsxs7("div", {
                     className: "flex items-center gap-2 flex-wrap",
                     children: [
-                      /* @__PURE__ */ jsx15(StatusBadge, {
+                      /* @__PURE__ */ jsx16(StatusBadge, {
                         summary: executionSummary
                       }),
-                      executionSummary.latestDurationMs !== undefined && /* @__PURE__ */ jsxs6("span", {
+                      executionSummary.latestDurationMs !== undefined && /* @__PURE__ */ jsxs7("span", {
                         className: "text-[11px] text-muted-foreground tabular-nums",
                         children: [
                           executionSummary.latestDurationMs,
                           "ms"
                         ]
                       }),
-                      executionSummary.executionCount > 1 && /* @__PURE__ */ jsxs6("span", {
+                      executionSummary.executionCount > 1 && /* @__PURE__ */ jsxs7("span", {
                         className: "text-[11px] text-muted-foreground",
                         children: [
                           "(",
@@ -2855,33 +2977,33 @@ function StepDetailPanel({
                       })
                     ]
                   }),
-                  /* @__PURE__ */ jsxs6("div", {
+                  /* @__PURE__ */ jsxs7("div", {
                     children: [
-                      /* @__PURE__ */ jsx15(Label3, {
+                      /* @__PURE__ */ jsx16(Label3, {
                         children: "Output"
                       }),
-                      /* @__PURE__ */ jsx15(JsonViewer, {
+                      /* @__PURE__ */ jsx16(JsonViewer, {
                         value: executionSummary.latestOutput !== undefined ? jsonString(executionSummary.latestOutput) : undefined
                       })
                     ]
                   }),
-                  executionSummary.latestTrace && executionSummary.latestTrace.length > 0 && /* @__PURE__ */ jsx15(TraceSection, {
+                  executionSummary.latestTrace && executionSummary.latestTrace.length > 0 && /* @__PURE__ */ jsx16(TraceSection, {
                     trace: executionSummary.latestTrace
                   }),
-                  executionSummary.latestError && /* @__PURE__ */ jsxs6("div", {
+                  executionSummary.latestError && /* @__PURE__ */ jsxs7("div", {
                     className: "text-xs p-2.5 rounded-md bg-red-50 text-red-700 border border-red-200/80 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800/60",
                     children: [
-                      /* @__PURE__ */ jsx15("div", {
+                      /* @__PURE__ */ jsx16("div", {
                         className: "font-semibold font-mono",
                         children: executionSummary.latestError.code
                       }),
-                      /* @__PURE__ */ jsx15("div", {
+                      /* @__PURE__ */ jsx16("div", {
                         className: "mt-1 leading-relaxed",
                         children: executionSummary.latestError.message
                       })
                     ]
                   }),
-                  executionSummary.totalRetries > 0 && /* @__PURE__ */ jsxs6("div", {
+                  executionSummary.totalRetries > 0 && /* @__PURE__ */ jsxs7("div", {
                     className: "text-[11px] font-medium text-amber-600 dark:text-amber-400",
                     children: [
                       executionSummary.totalRetries,
@@ -2895,36 +3017,36 @@ function StepDetailPanel({
               })
             ]
           }),
-          executionRecords && executionRecords.length > 0 && /* @__PURE__ */ jsxs6("div", {
+          executionRecords && executionRecords.length > 0 && /* @__PURE__ */ jsxs7("div", {
             className: "border-t border-border pt-4",
             children: [
-              /* @__PURE__ */ jsx15(SectionHeader, {
+              /* @__PURE__ */ jsx16(SectionHeader, {
                 children: "Execution History"
               }),
-              /* @__PURE__ */ jsx15("div", {
+              /* @__PURE__ */ jsx16("div", {
                 className: "space-y-2 mt-1",
-                children: executionRecords.map((record, i) => /* @__PURE__ */ jsx15(ExecutionRecordCard, {
+                children: executionRecords.map((record, i) => /* @__PURE__ */ jsx16(ExecutionRecordCard, {
                   record
                 }, `${record.stepId}-${i}`))
               })
             ]
           }),
-          diagnostics.length > 0 && /* @__PURE__ */ jsxs6("div", {
+          diagnostics.length > 0 && /* @__PURE__ */ jsxs7("div", {
             className: "border-t pt-4 border-border",
             children: [
-              /* @__PURE__ */ jsx15(SectionHeader, {
+              /* @__PURE__ */ jsx16(SectionHeader, {
                 children: "Diagnostics"
               }),
-              /* @__PURE__ */ jsx15("div", {
+              /* @__PURE__ */ jsx16("div", {
                 className: "space-y-2 mt-1",
-                children: diagnostics.map((d) => /* @__PURE__ */ jsxs6("div", {
+                children: diagnostics.map((d) => /* @__PURE__ */ jsxs7("div", {
                   className: `text-xs p-2.5 rounded-md ${d.severity === "error" ? "bg-red-50 text-red-700 border border-red-200/80 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800/60" : "bg-amber-50 text-amber-700 border border-amber-200/80 dark:bg-amber-950/30 dark:text-amber-300 dark:border-amber-800/60"}`,
                   children: [
-                    /* @__PURE__ */ jsx15("div", {
+                    /* @__PURE__ */ jsx16("div", {
                       className: "font-semibold font-mono",
                       children: d.code
                     }),
-                    /* @__PURE__ */ jsx15("div", {
+                    /* @__PURE__ */ jsx16("div", {
                       className: "mt-1 leading-relaxed",
                       children: d.message
                     })
@@ -2939,20 +3061,20 @@ function StepDetailPanel({
   });
 }
 // src/editors/shared-editors.tsx
-import { useCallback as useCallback3, useEffect as useEffect5, useState as useState3 } from "react";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState4 } from "react";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var ID_REGEX = /^[a-zA-Z_][a-zA-Z0-9_]+$/;
 function StepIdInput({
   value,
   onChange
 }) {
-  const [draft, setDraft] = useState3(value);
-  const [error, setError] = useState3("");
+  const [draft, setDraft] = useState4(value);
+  const [error, setError] = useState4("");
   useEffect5(() => {
     setDraft(value);
     setError("");
   }, [value]);
-  const handleBlur = useCallback3(() => {
+  const handleBlur = useCallback4(() => {
     if (!draft || !ID_REGEX.test(draft)) {
       setError("Must start with letter/underscore, contain only letters, digits, underscores (min 2 chars)");
       return;
@@ -2962,19 +3084,19 @@ function StepIdInput({
       onChange(draft);
     }
   }, [draft, value, onChange]);
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     children: [
-      /* @__PURE__ */ jsx16(Label2, {
+      /* @__PURE__ */ jsx17(Label2, {
         children: "Step ID"
       }),
-      /* @__PURE__ */ jsx16(Input, {
+      /* @__PURE__ */ jsx17(Input, {
         value: draft,
         onChange: (e) => setDraft(e.target.value),
         onBlur: handleBlur,
         className: cn("h-8 text-xs font-mono", error && "border-red-500 focus-visible:ring-red-500/50"),
         placeholder: "step_id"
       }),
-      error && /* @__PURE__ */ jsx16("div", {
+      error && /* @__PURE__ */ jsx17("div", {
         className: "text-[10px] text-red-500 mt-0.5",
         children: error
       })
@@ -2988,28 +3110,28 @@ function StepIdDropdown({
   stepIds,
   allowEmpty
 }) {
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     children: [
-      /* @__PURE__ */ jsx16(Label2, {
+      /* @__PURE__ */ jsx17(Label2, {
         children: label
       }),
-      /* @__PURE__ */ jsxs7(Select, {
+      /* @__PURE__ */ jsxs8(Select, {
         value: value || "__empty__",
         onValueChange: (val) => onChange(val === "__empty__" ? "" : val),
         children: [
-          /* @__PURE__ */ jsx16(SelectTrigger, {
+          /* @__PURE__ */ jsx17(SelectTrigger, {
             className: "h-8 text-xs font-mono w-full",
-            children: /* @__PURE__ */ jsx16(SelectValue, {
+            children: /* @__PURE__ */ jsx17(SelectValue, {
               placeholder: "— none —"
             })
           }),
-          /* @__PURE__ */ jsxs7(SelectContent, {
+          /* @__PURE__ */ jsxs8(SelectContent, {
             children: [
-              (allowEmpty || !value) && /* @__PURE__ */ jsx16(SelectItem, {
+              (allowEmpty || !value) && /* @__PURE__ */ jsx17(SelectItem, {
                 value: "__empty__",
                 children: "— none —"
               }),
-              stepIds.map((id) => /* @__PURE__ */ jsx16(SelectItem, {
+              stepIds.map((id) => /* @__PURE__ */ jsx17(SelectItem, {
                 value: id,
                 children: id
               }, id))
@@ -3025,22 +3147,22 @@ function JsonEditor({
   value,
   onChange
 }) {
-  const [draft, setDraft] = useState3(JSON.stringify(value, null, 2));
+  const [draft, setDraft] = useState4(JSON.stringify(value, null, 2));
   useEffect5(() => {
     setDraft(JSON.stringify(value, null, 2));
   }, [value]);
-  const handleBlur = useCallback3(() => {
+  const handleBlur = useCallback4(() => {
     try {
       const parsed = JSON.parse(draft);
       onChange(parsed);
     } catch {}
   }, [draft, onChange]);
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     children: [
-      /* @__PURE__ */ jsx16(Label2, {
+      /* @__PURE__ */ jsx17(Label2, {
         children: label
       }),
-      /* @__PURE__ */ jsx16(JsonCodeEditor, {
+      /* @__PURE__ */ jsx17(JsonCodeEditor, {
         value: draft,
         onChange: setDraft,
         onBlur: handleBlur
@@ -3050,21 +3172,21 @@ function JsonEditor({
 }
 
 // src/editors/params/agent-loop-params.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function AgentLoopParams({
   step,
   onChange,
   availableToolNames
 }) {
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     className: "space-y-3",
     children: [
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs9("div", {
         children: [
-          /* @__PURE__ */ jsx17(Label2, {
+          /* @__PURE__ */ jsx18(Label2, {
             children: "Instructions"
           }),
-          /* @__PURE__ */ jsx17(Textarea, {
+          /* @__PURE__ */ jsx18(Textarea, {
             value: step.params.instructions,
             onChange: (e) => onChange({
               params: {
@@ -3078,17 +3200,17 @@ function AgentLoopParams({
           })
         ]
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs9("div", {
         children: [
-          /* @__PURE__ */ jsx17(Label2, {
+          /* @__PURE__ */ jsx18(Label2, {
             children: "Tools"
           }),
-          availableToolNames.length > 0 ? /* @__PURE__ */ jsx17("div", {
+          availableToolNames.length > 0 ? /* @__PURE__ */ jsx18("div", {
             className: "space-y-1",
-            children: availableToolNames.map((name) => /* @__PURE__ */ jsxs8("label", {
+            children: availableToolNames.map((name) => /* @__PURE__ */ jsxs9("label", {
               className: "flex items-center gap-2.5 text-xs text-foreground cursor-pointer select-none",
               children: [
-                /* @__PURE__ */ jsx17("input", {
+                /* @__PURE__ */ jsx18("input", {
                   type: "checkbox",
                   className: "rounded border-border accent-foreground",
                   checked: step.params.tools.includes(name),
@@ -3102,7 +3224,7 @@ function AgentLoopParams({
                 name
               ]
             }, name))
-          }) : /* @__PURE__ */ jsx17(Input, {
+          }) : /* @__PURE__ */ jsx18(Input, {
             value: step.params.tools.join(", "),
             onChange: (e) => onChange({
               params: {
@@ -3115,7 +3237,7 @@ function AgentLoopParams({
           })
         ]
       }),
-      /* @__PURE__ */ jsx17(JsonEditor, {
+      /* @__PURE__ */ jsx18(JsonEditor, {
         label: "Output Format (JSON Schema)",
         value: step.params.outputFormat,
         onChange: (val) => onChange({ params: { ...step.params, outputFormat: val } })
@@ -3125,7 +3247,7 @@ function AgentLoopParams({
 }
 
 // src/editors/params/end-params.tsx
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function EndParams({
   step,
   onChange,
@@ -3134,13 +3256,13 @@ function EndParams({
 }) {
   const hasOutput = !!step.params?.output;
   const hasSchema = !!workflowOutputSchema;
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     className: "space-y-3",
     children: [
-      /* @__PURE__ */ jsxs9("label", {
+      /* @__PURE__ */ jsxs10("label", {
         className: "flex items-center gap-2.5 text-xs text-foreground cursor-pointer select-none group",
         children: [
-          /* @__PURE__ */ jsx18("input", {
+          /* @__PURE__ */ jsx19("input", {
             type: "checkbox",
             checked: hasOutput,
             onChange: (e) => {
@@ -3159,15 +3281,15 @@ function EndParams({
           "Has output expression"
         ]
       }),
-      hasOutput && step.params?.output && /* @__PURE__ */ jsx18(ExpressionEditor, {
+      hasOutput && step.params?.output && /* @__PURE__ */ jsx19(ExpressionEditor, {
         label: "Output",
         value: step.params.output,
         onChange: (val) => onChange({ params: { output: val } })
       }),
-      /* @__PURE__ */ jsxs9("label", {
+      /* @__PURE__ */ jsxs10("label", {
         className: "flex items-center gap-2.5 text-xs text-foreground cursor-pointer select-none group",
         children: [
-          /* @__PURE__ */ jsx18("input", {
+          /* @__PURE__ */ jsx19("input", {
             type: "checkbox",
             checked: hasSchema,
             onChange: (e) => {
@@ -3189,7 +3311,7 @@ function EndParams({
           "Workflow has output schema"
         ]
       }),
-      hasSchema && workflowOutputSchema && /* @__PURE__ */ jsx18(JsonEditor, {
+      hasSchema && workflowOutputSchema && /* @__PURE__ */ jsx19(JsonEditor, {
         label: "Output Schema (JSON Schema)",
         value: workflowOutputSchema,
         onChange: (val) => onWorkflowMetaChange?.({ outputSchema: val })
@@ -3199,20 +3321,20 @@ function EndParams({
 }
 
 // src/editors/params/extract-data-params.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function ExtractDataParams({
   step,
   onChange
 }) {
-  return /* @__PURE__ */ jsxs10("div", {
+  return /* @__PURE__ */ jsxs11("div", {
     className: "space-y-3",
     children: [
-      /* @__PURE__ */ jsx19(ExpressionEditor, {
+      /* @__PURE__ */ jsx20(ExpressionEditor, {
         label: "Source Data",
         value: step.params.sourceData,
         onChange: (val) => onChange({ params: { ...step.params, sourceData: val } })
       }),
-      /* @__PURE__ */ jsx19(JsonEditor, {
+      /* @__PURE__ */ jsx20(JsonEditor, {
         label: "Output Format (JSON Schema)",
         value: step.params.outputFormat,
         onChange: (val) => onChange({ params: { ...step.params, outputFormat: val } })
@@ -3222,26 +3344,26 @@ function ExtractDataParams({
 }
 
 // src/editors/params/for-each-params.tsx
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function ForEachParams({
   step,
   onChange,
   allStepIds
 }) {
-  return /* @__PURE__ */ jsxs11("div", {
+  return /* @__PURE__ */ jsxs12("div", {
     className: "space-y-3",
     children: [
-      /* @__PURE__ */ jsx20(ExpressionEditor, {
+      /* @__PURE__ */ jsx21(ExpressionEditor, {
         label: "Target Array",
         value: step.params.target,
         onChange: (val) => onChange({ params: { ...step.params, target: val } })
       }),
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs12("div", {
         children: [
-          /* @__PURE__ */ jsx20(Label2, {
+          /* @__PURE__ */ jsx21(Label2, {
             children: "Item Variable Name"
           }),
-          /* @__PURE__ */ jsx20(Input, {
+          /* @__PURE__ */ jsx21(Input, {
             value: step.params.itemName,
             onChange: (e) => onChange({
               params: { ...step.params, itemName: e.target.value }
@@ -3251,7 +3373,7 @@ function ForEachParams({
           })
         ]
       }),
-      /* @__PURE__ */ jsx20(StepIdDropdown, {
+      /* @__PURE__ */ jsx21(StepIdDropdown, {
         label: "Loop Body Step",
         value: step.params.loopBodyStepId,
         onChange: (id) => onChange({
@@ -3268,20 +3390,20 @@ function ForEachParams({
 }
 
 // src/editors/params/llm-prompt-params.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function LlmPromptParams({
   step,
   onChange
 }) {
-  return /* @__PURE__ */ jsxs12("div", {
+  return /* @__PURE__ */ jsxs13("div", {
     className: "space-y-3",
     children: [
-      /* @__PURE__ */ jsxs12("div", {
+      /* @__PURE__ */ jsxs13("div", {
         children: [
-          /* @__PURE__ */ jsx21(Label2, {
+          /* @__PURE__ */ jsx22(Label2, {
             children: "Prompt"
           }),
-          /* @__PURE__ */ jsx21(Textarea, {
+          /* @__PURE__ */ jsx22(Textarea, {
             value: step.params.prompt,
             onChange: (e) => onChange({
               params: { ...step.params, prompt: e.target.value }
@@ -3292,7 +3414,7 @@ function LlmPromptParams({
           })
         ]
       }),
-      /* @__PURE__ */ jsx21(JsonEditor, {
+      /* @__PURE__ */ jsx22(JsonEditor, {
         label: "Output Format (JSON Schema)",
         value: step.params.outputFormat,
         onChange: (val) => onChange({ params: { ...step.params, outputFormat: val } })
@@ -3302,12 +3424,12 @@ function LlmPromptParams({
 }
 
 // src/editors/params/sleep-params.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function SleepParams({
   step,
   onChange
 }) {
-  return /* @__PURE__ */ jsx22(ExpressionEditor, {
+  return /* @__PURE__ */ jsx23(ExpressionEditor, {
     label: "Duration (ms)",
     value: step.params.durationMs,
     onChange: (val) => onChange({ params: { ...step.params, durationMs: val } })
@@ -3315,19 +3437,19 @@ function SleepParams({
 }
 
 // src/editors/params/start-params.tsx
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function StartParams({
   workflowInputSchema,
   onWorkflowMetaChange
 }) {
   const hasSchema = !!workflowInputSchema;
-  return /* @__PURE__ */ jsxs13("div", {
+  return /* @__PURE__ */ jsxs14("div", {
     className: "space-y-3",
     children: [
-      /* @__PURE__ */ jsxs13("label", {
+      /* @__PURE__ */ jsxs14("label", {
         className: "flex items-center gap-2.5 text-xs text-foreground cursor-pointer select-none group",
         children: [
-          /* @__PURE__ */ jsx23("input", {
+          /* @__PURE__ */ jsx24("input", {
             type: "checkbox",
             checked: hasSchema,
             className: "rounded border-border accent-foreground",
@@ -3349,7 +3471,7 @@ function StartParams({
           "Workflow has input schema"
         ]
       }),
-      hasSchema && workflowInputSchema && /* @__PURE__ */ jsx23(JsonEditor, {
+      hasSchema && workflowInputSchema && /* @__PURE__ */ jsx24(JsonEditor, {
         label: "Input Schema (JSON Schema)",
         value: workflowInputSchema,
         onChange: (val) => onWorkflowMetaChange?.({ inputSchema: val })
@@ -3359,42 +3481,42 @@ function StartParams({
 }
 
 // src/editors/params/switch-case-params.tsx
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 function SwitchCaseParams({
   step,
   onChange,
   allStepIds
 }) {
-  return /* @__PURE__ */ jsxs14("div", {
+  return /* @__PURE__ */ jsxs15("div", {
     className: "space-y-3",
     children: [
-      /* @__PURE__ */ jsx24(ExpressionEditor, {
+      /* @__PURE__ */ jsx25(ExpressionEditor, {
         label: "Switch On",
         value: step.params.switchOn,
         onChange: (val) => onChange({ params: { ...step.params, switchOn: val } })
       }),
-      /* @__PURE__ */ jsxs14("div", {
+      /* @__PURE__ */ jsxs15("div", {
         children: [
-          /* @__PURE__ */ jsx24(Label2, {
+          /* @__PURE__ */ jsx25(Label2, {
             children: "Cases"
           }),
-          /* @__PURE__ */ jsxs14("div", {
+          /* @__PURE__ */ jsxs15("div", {
             className: "space-y-2",
             children: [
-              step.params.cases.map((c, i) => /* @__PURE__ */ jsxs14("div", {
+              step.params.cases.map((c, i) => /* @__PURE__ */ jsxs15("div", {
                 className: "border border-border/70 rounded-lg p-3 space-y-2 bg-muted/20",
                 children: [
-                  /* @__PURE__ */ jsxs14("div", {
+                  /* @__PURE__ */ jsxs15("div", {
                     className: "flex items-center justify-between",
                     children: [
-                      /* @__PURE__ */ jsxs14("span", {
+                      /* @__PURE__ */ jsxs15("span", {
                         className: "text-xs font-semibold text-foreground",
                         children: [
                           "Case ",
                           i + 1
                         ]
                       }),
-                      /* @__PURE__ */ jsx24(Button, {
+                      /* @__PURE__ */ jsx25(Button, {
                         variant: "ghost",
                         size: "xs",
                         className: "text-red-500 hover:text-red-700",
@@ -3408,10 +3530,10 @@ function SwitchCaseParams({
                       })
                     ]
                   }),
-                  c.value.type === "default" ? /* @__PURE__ */ jsx24("div", {
+                  c.value.type === "default" ? /* @__PURE__ */ jsx25("div", {
                     className: "text-xs text-muted-foreground italic",
                     children: "default case"
-                  }) : /* @__PURE__ */ jsx24(ExpressionEditor, {
+                  }) : /* @__PURE__ */ jsx25(ExpressionEditor, {
                     label: "Value",
                     value: c.value,
                     onChange: (val) => {
@@ -3422,7 +3544,7 @@ function SwitchCaseParams({
                       });
                     }
                   }),
-                  /* @__PURE__ */ jsx24(StepIdDropdown, {
+                  /* @__PURE__ */ jsx25(StepIdDropdown, {
                     label: "Branch Body Step",
                     value: c.branchBodyStepId,
                     onChange: (id) => {
@@ -3440,10 +3562,10 @@ function SwitchCaseParams({
                   })
                 ]
               }, `case-${c.branchBodyStepId || "empty"}-${i}`)),
-              /* @__PURE__ */ jsxs14("div", {
+              /* @__PURE__ */ jsxs15("div", {
                 className: "flex gap-1",
                 children: [
-                  /* @__PURE__ */ jsx24(Button, {
+                  /* @__PURE__ */ jsx25(Button, {
                     variant: "secondary",
                     size: "sm",
                     onClick: () => {
@@ -3463,7 +3585,7 @@ function SwitchCaseParams({
                     },
                     children: "Add Case"
                   }),
-                  /* @__PURE__ */ jsx24(Button, {
+                  /* @__PURE__ */ jsx25(Button, {
                     variant: "secondary",
                     size: "sm",
                     onClick: () => {
@@ -3495,7 +3617,7 @@ function SwitchCaseParams({
 
 // src/editors/params/tool-call-params.tsx
 import { useEffect as useEffect6, useRef as useRef5 } from "react";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 function ToolCallParams({
   step,
   onChange,
@@ -3529,34 +3651,34 @@ function ToolCallParams({
     step.params
   ]);
   const displayKeys = schemaKeys ?? Object.keys(step.params.toolInput);
-  return /* @__PURE__ */ jsxs15("div", {
+  return /* @__PURE__ */ jsxs16("div", {
     className: "space-y-3",
     children: [
-      /* @__PURE__ */ jsxs15("div", {
+      /* @__PURE__ */ jsxs16("div", {
         children: [
-          /* @__PURE__ */ jsx25(Label2, {
+          /* @__PURE__ */ jsx26(Label2, {
             children: "Tool Name"
           }),
-          availableToolNames.length > 0 ? /* @__PURE__ */ jsxs15(Select, {
+          availableToolNames.length > 0 ? /* @__PURE__ */ jsxs16(Select, {
             value: step.params.toolName,
             onValueChange: (val) => onChange({
               params: { ...step.params, toolName: val }
             }),
             children: [
-              /* @__PURE__ */ jsx25(SelectTrigger, {
+              /* @__PURE__ */ jsx26(SelectTrigger, {
                 className: "h-8 text-xs font-mono w-full",
-                children: /* @__PURE__ */ jsx25(SelectValue, {
+                children: /* @__PURE__ */ jsx26(SelectValue, {
                   placeholder: "-- select tool --"
                 })
               }),
-              /* @__PURE__ */ jsx25(SelectContent, {
-                children: availableToolNames.map((name) => /* @__PURE__ */ jsx25(SelectItem, {
+              /* @__PURE__ */ jsx26(SelectContent, {
+                children: availableToolNames.map((name) => /* @__PURE__ */ jsx26(SelectItem, {
                   value: name,
                   children: name
                 }, name))
               })
             ]
-          }) : /* @__PURE__ */ jsx25(Input, {
+          }) : /* @__PURE__ */ jsx26(Input, {
             value: step.params.toolName,
             onChange: (e) => onChange({
               params: { ...step.params, toolName: e.target.value }
@@ -3566,42 +3688,42 @@ function ToolCallParams({
           })
         ]
       }),
-      schema?.description && /* @__PURE__ */ jsx25("p", {
+      schema?.description && /* @__PURE__ */ jsx26("p", {
         className: "text-[11px] text-muted-foreground leading-snug",
         children: schema.description
       }),
-      displayKeys.length > 0 && /* @__PURE__ */ jsxs15("div", {
+      displayKeys.length > 0 && /* @__PURE__ */ jsxs16("div", {
         children: [
-          /* @__PURE__ */ jsx25(Label2, {
+          /* @__PURE__ */ jsx26(Label2, {
             children: "Tool Inputs"
           }),
-          /* @__PURE__ */ jsx25("div", {
+          /* @__PURE__ */ jsx26("div", {
             className: "space-y-2",
             children: displayKeys.map((key) => {
               const expr = step.params.toolInput[key];
               const isRequired = requiredKeys.has(key);
               const propSchema = schema?.inputSchema.properties?.[key];
-              return /* @__PURE__ */ jsxs15("div", {
+              return /* @__PURE__ */ jsxs16("div", {
                 className: "border border-border/70 rounded-lg p-3 bg-muted/20",
                 children: [
-                  /* @__PURE__ */ jsxs15("div", {
+                  /* @__PURE__ */ jsxs16("div", {
                     className: "flex items-center gap-1.5 mb-1.5",
                     children: [
-                      /* @__PURE__ */ jsx25("span", {
+                      /* @__PURE__ */ jsx26("span", {
                         className: "text-xs font-mono font-medium text-foreground",
                         children: key
                       }),
-                      isRequired && /* @__PURE__ */ jsx25("span", {
+                      isRequired && /* @__PURE__ */ jsx26("span", {
                         className: "text-[10px] font-semibold text-red-500 bg-red-50 dark:bg-red-950/30 px-1.5 py-0.5 rounded",
                         children: "required"
                       })
                     ]
                   }),
-                  propSchema?.description && /* @__PURE__ */ jsx25("p", {
+                  propSchema?.description && /* @__PURE__ */ jsx26("p", {
                     className: "text-[10px] text-muted-foreground mb-2 leading-relaxed",
                     children: propSchema.description
                   }),
-                  /* @__PURE__ */ jsx25(ExpressionEditor, {
+                  /* @__PURE__ */ jsx26(ExpressionEditor, {
                     value: expr ?? { type: "literal", value: "" },
                     onChange: (val) => onChange({
                       params: {
@@ -3625,16 +3747,16 @@ function ToolCallParams({
 }
 
 // src/editors/params/wait-for-condition-params.tsx
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function WaitForConditionParams({
   step,
   onChange,
   allStepIds
 }) {
-  return /* @__PURE__ */ jsxs16("div", {
+  return /* @__PURE__ */ jsxs17("div", {
     className: "space-y-3",
     children: [
-      /* @__PURE__ */ jsx26(StepIdDropdown, {
+      /* @__PURE__ */ jsx27(StepIdDropdown, {
         label: "Condition Step",
         value: step.params.conditionStepId,
         onChange: (id) => onChange({
@@ -3646,19 +3768,19 @@ function WaitForConditionParams({
         stepIds: allStepIds,
         allowEmpty: true
       }),
-      /* @__PURE__ */ jsx26(ExpressionEditor, {
+      /* @__PURE__ */ jsx27(ExpressionEditor, {
         label: "Condition",
         value: step.params.condition,
         onChange: (val) => onChange({ params: { ...step.params, condition: val } })
       }),
-      step.params.maxAttempts && /* @__PURE__ */ jsx26(ExpressionEditor, {
+      step.params.maxAttempts && /* @__PURE__ */ jsx27(ExpressionEditor, {
         label: "Max Attempts",
         value: step.params.maxAttempts,
         onChange: (val) => onChange({
           params: { ...step.params, maxAttempts: val }
         })
       }),
-      step.params.intervalMs && /* @__PURE__ */ jsx26(ExpressionEditor, {
+      step.params.intervalMs && /* @__PURE__ */ jsx27(ExpressionEditor, {
         label: "Interval (ms)",
         value: step.params.intervalMs,
         onChange: (val) => onChange({
@@ -3670,7 +3792,7 @@ function WaitForConditionParams({
 }
 
 // src/panels/step-editor-panel.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function StepParamsEditor({
   step,
   onChange,
@@ -3683,60 +3805,60 @@ function StepParamsEditor({
 }) {
   switch (step.type) {
     case "tool-call":
-      return /* @__PURE__ */ jsx27(ToolCallParams, {
+      return /* @__PURE__ */ jsx28(ToolCallParams, {
         step,
         onChange,
         availableToolNames,
         toolSchemas
       });
     case "llm-prompt":
-      return /* @__PURE__ */ jsx27(LlmPromptParams, {
+      return /* @__PURE__ */ jsx28(LlmPromptParams, {
         step,
         onChange
       });
     case "extract-data":
-      return /* @__PURE__ */ jsx27(ExtractDataParams, {
+      return /* @__PURE__ */ jsx28(ExtractDataParams, {
         step,
         onChange
       });
     case "switch-case":
-      return /* @__PURE__ */ jsx27(SwitchCaseParams, {
+      return /* @__PURE__ */ jsx28(SwitchCaseParams, {
         step,
         onChange,
         allStepIds
       });
     case "for-each":
-      return /* @__PURE__ */ jsx27(ForEachParams, {
+      return /* @__PURE__ */ jsx28(ForEachParams, {
         step,
         onChange,
         allStepIds
       });
     case "sleep":
-      return /* @__PURE__ */ jsx27(SleepParams, {
+      return /* @__PURE__ */ jsx28(SleepParams, {
         step,
         onChange
       });
     case "wait-for-condition":
-      return /* @__PURE__ */ jsx27(WaitForConditionParams, {
+      return /* @__PURE__ */ jsx28(WaitForConditionParams, {
         step,
         onChange,
         allStepIds
       });
     case "agent-loop":
-      return /* @__PURE__ */ jsx27(AgentLoopParams, {
+      return /* @__PURE__ */ jsx28(AgentLoopParams, {
         step,
         onChange,
         availableToolNames
       });
     case "end":
-      return /* @__PURE__ */ jsx27(EndParams, {
+      return /* @__PURE__ */ jsx28(EndParams, {
         step,
         onChange,
         workflowOutputSchema,
         onWorkflowMetaChange
       });
     case "start":
-      return /* @__PURE__ */ jsx27(StartParams, {
+      return /* @__PURE__ */ jsx28(StartParams, {
         workflowInputSchema,
         onWorkflowMetaChange
       });
@@ -3747,30 +3869,30 @@ function DiagnosticsSection({ diagnostics }) {
     return null;
   const errors = diagnostics.filter((d) => d.severity === "error");
   const warnings = diagnostics.filter((d) => d.severity === "warning");
-  return /* @__PURE__ */ jsxs17("div", {
+  return /* @__PURE__ */ jsxs18("div", {
     className: "space-y-1.5",
     children: [
-      errors.map((d, i) => /* @__PURE__ */ jsxs17("div", {
+      errors.map((d, i) => /* @__PURE__ */ jsxs18("div", {
         className: "flex gap-2 items-start text-[11px] text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/30 rounded-md px-2.5 py-2 border border-red-200/80 dark:border-red-900/60",
         children: [
-          /* @__PURE__ */ jsx27("span", {
+          /* @__PURE__ */ jsx28("span", {
             className: "shrink-0 font-semibold bg-red-100 dark:bg-red-900/50 px-1.5 py-0.5 rounded text-[10px]",
             children: "Error"
           }),
-          /* @__PURE__ */ jsx27("span", {
+          /* @__PURE__ */ jsx28("span", {
             className: "leading-relaxed",
             children: d.message
           })
         ]
       }, `err-${d.code}-${i}`)),
-      warnings.map((d, i) => /* @__PURE__ */ jsxs17("div", {
+      warnings.map((d, i) => /* @__PURE__ */ jsxs18("div", {
         className: "flex gap-2 items-start text-[11px] text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30 rounded-md px-2.5 py-2 border border-amber-200/80 dark:border-amber-900/60",
         children: [
-          /* @__PURE__ */ jsx27("span", {
+          /* @__PURE__ */ jsx28("span", {
             className: "shrink-0 font-semibold bg-amber-100 dark:bg-amber-900/50 px-1.5 py-0.5 rounded text-[10px]",
             children: "Warn"
           }),
-          /* @__PURE__ */ jsx27("span", {
+          /* @__PURE__ */ jsx28("span", {
             className: "leading-relaxed",
             children: d.message
           })
@@ -3791,16 +3913,16 @@ function StepEditorPanel({
   onWorkflowMetaChange,
   onClose
 }) {
-  return /* @__PURE__ */ jsxs17("div", {
+  return /* @__PURE__ */ jsxs18("div", {
     className: "w-[360px] border-l h-full min-h-0 overflow-y-auto bg-card border-border",
     children: [
-      /* @__PURE__ */ jsxs17("div", {
+      /* @__PURE__ */ jsxs18("div", {
         className: "sticky top-0 z-10 border-b px-4 py-3 flex items-center justify-between bg-card/95 backdrop-blur-sm border-border",
         children: [
-          /* @__PURE__ */ jsx27(TypeBadge, {
+          /* @__PURE__ */ jsx28(TypeBadge, {
             type: step.type
           }),
-          /* @__PURE__ */ jsx27("button", {
+          /* @__PURE__ */ jsx28("button", {
             type: "button",
             onClick: onClose,
             className: "text-lg leading-none text-muted-foreground hover:text-foreground shrink-0 rounded-md w-7 h-7 flex items-center justify-center hover:bg-muted transition-colors",
@@ -3808,18 +3930,18 @@ function StepEditorPanel({
           })
         ]
       }),
-      /* @__PURE__ */ jsxs17("div", {
+      /* @__PURE__ */ jsxs18("div", {
         className: "px-4 py-4 space-y-5",
         children: [
-          /* @__PURE__ */ jsx27(DiagnosticsSection, {
+          /* @__PURE__ */ jsx28(DiagnosticsSection, {
             diagnostics
           }),
-          /* @__PURE__ */ jsxs17("div", {
+          /* @__PURE__ */ jsxs18("div", {
             children: [
-              /* @__PURE__ */ jsx27(Label2, {
+              /* @__PURE__ */ jsx28(Label2, {
                 children: "Name"
               }),
-              /* @__PURE__ */ jsx27(Input, {
+              /* @__PURE__ */ jsx28(Input, {
                 value: step.name,
                 onChange: (e) => onChange({ name: e.target.value }),
                 className: "h-9 text-sm",
@@ -3827,16 +3949,16 @@ function StepEditorPanel({
               })
             ]
           }),
-          /* @__PURE__ */ jsx27(StepIdInput, {
+          /* @__PURE__ */ jsx28(StepIdInput, {
             value: step.id,
             onChange: (id) => onChange({ id })
           }),
-          /* @__PURE__ */ jsxs17("div", {
+          /* @__PURE__ */ jsxs18("div", {
             children: [
-              /* @__PURE__ */ jsx27(Label2, {
+              /* @__PURE__ */ jsx28(Label2, {
                 children: "Description"
               }),
-              /* @__PURE__ */ jsx27(Textarea, {
+              /* @__PURE__ */ jsx28(Textarea, {
                 value: step.description,
                 onChange: (e) => onChange({ description: e.target.value }),
                 rows: 2,
@@ -3845,13 +3967,13 @@ function StepEditorPanel({
               })
             ]
           }),
-          /* @__PURE__ */ jsxs17("div", {
+          /* @__PURE__ */ jsxs18("div", {
             className: "border-t pt-4 border-border",
             children: [
-              /* @__PURE__ */ jsx27(SectionHeader, {
+              /* @__PURE__ */ jsx28(SectionHeader, {
                 children: "Parameters"
               }),
-              /* @__PURE__ */ jsx27(StepParamsEditor, {
+              /* @__PURE__ */ jsx28(StepParamsEditor, {
                 step,
                 onChange,
                 availableToolNames,
@@ -3869,9 +3991,9 @@ function StepEditorPanel({
   });
 }
 // src/theme.tsx
-import { useEffect as useEffect7, useMemo, useState as useState4 } from "react";
+import { useEffect as useEffect7, useMemo, useState as useState5 } from "react";
 function useDarkMode() {
-  const [dark, setDark] = useState4(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
+  const [dark, setDark] = useState5(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
   useEffect7(() => {
     const el = document.documentElement;
     const observer = new MutationObserver(() => {
@@ -3896,7 +4018,7 @@ function resolveCssColor(varName, fallback) {
 }
 function useThemeColors() {
   const dark = useDarkMode();
-  const [revision, setRevision] = useState4(0);
+  const [revision, setRevision] = useState5(0);
   useEffect7(() => {
     if (typeof document === "undefined")
       return;
@@ -4054,36 +4176,35 @@ import {
   useEdgesState,
   useNodesState
 } from "@xyflow/react";
-import"@xyflow/react/dist/style.css";
 import { Braces, LayoutGrid } from "lucide-react";
 import { useCallback as useCallback9, useEffect as useEffect11, useMemo as useMemo3, useRef as useRef9, useState as useState10 } from "react";
 
 // src/components/canvas-context-menu.tsx
 import {
-  Bot as Bot2,
-  FileOutput as FileOutput2,
-  GitBranch as GitBranch2,
-  Hand as Hand2,
-  Moon as Moon2,
-  Play as Play2,
-  Repeat as Repeat2,
-  Sparkles as Sparkles2,
-  Timer as Timer2,
-  Wrench as Wrench2
+  Bot as Bot3,
+  FileOutput as FileOutput3,
+  GitBranch as GitBranch3,
+  Hand as Hand3,
+  Moon as Moon3,
+  Play as Play3,
+  Repeat as Repeat3,
+  Sparkles as Sparkles3,
+  Timer as Timer3,
+  Wrench as Wrench3
 } from "lucide-react";
 import { useEffect as useEffect8, useRef as useRef6 } from "react";
-import { jsx as jsx28, jsxs as jsxs18, Fragment } from "react/jsx-runtime";
-var STEP_TYPES = [
-  { type: "start", label: "Start", icon: Play2 },
-  { type: "end", label: "End", icon: Hand2 },
-  { type: "tool-call", label: "Tool Call", icon: Wrench2 },
-  { type: "llm-prompt", label: "LLM Prompt", icon: Sparkles2 },
-  { type: "extract-data", label: "Extract Data", icon: FileOutput2 },
-  { type: "switch-case", label: "Switch Case", icon: GitBranch2 },
-  { type: "for-each", label: "For Each", icon: Repeat2 },
-  { type: "sleep", label: "Sleep", icon: Moon2 },
-  { type: "wait-for-condition", label: "Wait for Condition", icon: Timer2 },
-  { type: "agent-loop", label: "Agent Loop", icon: Bot2 }
+import { jsx as jsx29, jsxs as jsxs19, Fragment } from "react/jsx-runtime";
+var STEP_TYPES2 = [
+  { type: "start", label: "Start", icon: Play3 },
+  { type: "end", label: "End", icon: Hand3 },
+  { type: "tool-call", label: "Tool Call", icon: Wrench3 },
+  { type: "llm-prompt", label: "LLM Prompt", icon: Sparkles3 },
+  { type: "extract-data", label: "Extract Data", icon: FileOutput3 },
+  { type: "switch-case", label: "Switch Case", icon: GitBranch3 },
+  { type: "for-each", label: "For Each", icon: Repeat3 },
+  { type: "sleep", label: "Sleep", icon: Moon3 },
+  { type: "wait-for-condition", label: "Wait for Condition", icon: Timer3 },
+  { type: "agent-loop", label: "Agent Loop", icon: Bot3 }
 ];
 function CanvasContextMenu({
   position,
@@ -4118,40 +4239,40 @@ function CanvasContextMenu({
     top: position.y,
     zIndex: 50
   };
-  return /* @__PURE__ */ jsxs18("div", {
+  return /* @__PURE__ */ jsxs19("div", {
     ref: menuRef,
     style: menuStyle,
     className: "bg-card border border-border rounded-lg shadow-xl py-1 min-w-[180px] text-sm",
     children: [
-      targetNodeId && /* @__PURE__ */ jsxs18(Fragment, {
+      targetNodeId && /* @__PURE__ */ jsxs19(Fragment, {
         children: [
-          onEditNode && /* @__PURE__ */ jsx28("button", {
+          onEditNode && /* @__PURE__ */ jsx29("button", {
             type: "button",
             onClick: () => onEditNode(targetNodeId),
             className: "w-full px-3 py-1.5 text-left text-foreground hover:bg-muted/50 transition-colors",
             children: "Edit Step"
           }),
-          onDeleteNode && /* @__PURE__ */ jsx28("button", {
+          onDeleteNode && /* @__PURE__ */ jsx29("button", {
             type: "button",
             onClick: () => onDeleteNode(targetNodeId),
             className: "w-full px-3 py-1.5 text-left text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors",
             children: "Delete Step"
           }),
-          /* @__PURE__ */ jsx28("div", {
+          /* @__PURE__ */ jsx29("div", {
             className: "border-t border-border my-1"
           })
         ]
       }),
-      /* @__PURE__ */ jsx28("div", {
+      /* @__PURE__ */ jsx29("div", {
         className: "px-3 py-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground",
         children: "Add Step"
       }),
-      STEP_TYPES.map((entry) => /* @__PURE__ */ jsxs18("button", {
+      STEP_TYPES2.map((entry) => /* @__PURE__ */ jsxs19("button", {
         type: "button",
         onClick: () => onAddStep(entry.type, canvasPosition),
         className: "w-full px-3 py-1.5 text-left text-foreground hover:bg-muted/50 transition-colors flex items-center gap-2",
         children: [
-          /* @__PURE__ */ jsx28(entry.icon, {
+          /* @__PURE__ */ jsx29(entry.icon, {
             className: "w-3.5 h-3.5 text-muted-foreground shrink-0"
           }),
           entry.label
@@ -4161,129 +4282,6 @@ function CanvasContextMenu({
   });
 }
 
-// src/components/step-palette.tsx
-import {
-  Bot as Bot3,
-  FileOutput as FileOutput3,
-  GitBranch as GitBranch3,
-  Hand as Hand3,
-  Moon as Moon3,
-  Play as Play3,
-  Repeat as Repeat3,
-  Sparkles as Sparkles3,
-  Timer as Timer3,
-  Wrench as Wrench3
-} from "lucide-react";
-import { useCallback as useCallback4, useState as useState5 } from "react";
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
-var STEP_TYPES2 = [
-  {
-    type: "start",
-    label: "Start",
-    color: "text-green-600 dark:text-green-400",
-    icon: Play3
-  },
-  {
-    type: "end",
-    label: "End",
-    color: "text-muted-foreground",
-    icon: Hand3
-  },
-  {
-    type: "tool-call",
-    label: "Tool Call",
-    color: "text-blue-600 dark:text-blue-400",
-    icon: Wrench3
-  },
-  {
-    type: "llm-prompt",
-    label: "LLM Prompt",
-    color: "text-violet-600 dark:text-violet-400",
-    icon: Sparkles3
-  },
-  {
-    type: "extract-data",
-    label: "Extract Data",
-    color: "text-purple-600 dark:text-purple-400",
-    icon: FileOutput3
-  },
-  {
-    type: "switch-case",
-    label: "Switch Case",
-    color: "text-amber-600 dark:text-amber-400",
-    icon: GitBranch3
-  },
-  {
-    type: "for-each",
-    label: "For Each",
-    color: "text-emerald-600 dark:text-emerald-400",
-    icon: Repeat3
-  },
-  {
-    type: "sleep",
-    label: "Sleep",
-    color: "text-yellow-600 dark:text-yellow-400",
-    icon: Moon3
-  },
-  {
-    type: "wait-for-condition",
-    label: "Wait",
-    color: "text-orange-600 dark:text-orange-400",
-    icon: Timer3
-  },
-  {
-    type: "agent-loop",
-    label: "Agent Loop",
-    color: "text-teal-600 dark:text-teal-400",
-    icon: Bot3
-  }
-];
-function StepPalette({ onAddStep }) {
-  const [collapsed, setCollapsed] = useState5(false);
-  const onDragStart = useCallback4((event, type) => {
-    event.dataTransfer.setData("application/remora-step-type", type);
-    event.dataTransfer.effectAllowed = "move";
-  }, []);
-  return /* @__PURE__ */ jsxs19("div", {
-    className: "bg-card border border-border rounded-lg shadow-md overflow-hidden w-[160px]",
-    children: [
-      /* @__PURE__ */ jsxs19("button", {
-        type: "button",
-        onClick: () => setCollapsed(!collapsed),
-        className: "w-full px-3 py-1.5 text-xs font-medium text-foreground flex items-center justify-between hover:bg-muted/50 transition-colors",
-        children: [
-          /* @__PURE__ */ jsx29("span", {
-            children: "Add Steps"
-          }),
-          /* @__PURE__ */ jsx29("span", {
-            className: `text-[10px] text-muted-foreground transition-transform ${collapsed ? "" : "rotate-180"}`,
-            children: "▲"
-          })
-        ]
-      }),
-      !collapsed && /* @__PURE__ */ jsx29("div", {
-        className: "border-t border-border",
-        children: STEP_TYPES2.map((entry) => /* @__PURE__ */ jsxs19("button", {
-          type: "button",
-          onClick: () => onAddStep(entry.type),
-          draggable: true,
-          onDragStart: (e) => onDragStart(e, entry.type),
-          className: "w-full px-3 py-1 text-left hover:bg-muted/50 transition-colors cursor-grab active:cursor-grabbing flex items-center gap-1.5",
-          children: [
-            /* @__PURE__ */ jsx29(entry.icon, {
-              className: `w-3.5 h-3.5 shrink-0 ${entry.color}`
-            }),
-            /* @__PURE__ */ jsx29("span", {
-              className: `text-[10px] font-semibold uppercase tracking-wide ${entry.color}`,
-              children: entry.label
-            })
-          ]
-        }, entry.type))
-      })
-    ]
-  });
-}
-
 // src/components/workflow-json-dialog.tsx
 import { Copy, X } from "lucide-react";
 import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef7, useState as useState6 } from "react";
@@ -6069,7 +6067,8 @@ function WorkflowViewer({
   isEditing = false,
   onWorkflowChange,
   tools,
-  toolSchemas: toolSchemasProp
+  toolSchemas: toolSchemasProp,
+  hideDetailPanel = false
 }) {
   const theme = useThemeColors();
   const containerRef = useRef9(null);
@@ -6528,7 +6527,7 @@ function WorkflowViewer({
               })
             ]
           }),
-          selectedStep && (isEditing ? /* @__PURE__ */ jsx45(StepEditorPanel, {
+          !hideDetailPanel && selectedStep && (isEditing ? /* @__PURE__ */ jsx45(StepEditorPanel, {
             step: selectedStep,
             availableToolNames,
             allStepIds,
@@ -6568,6 +6567,7 @@ export {
   WorkflowViewer,
   Textarea,
   Switch,
+  StepPalette,
   StepEditorPanel,
   StepDetailPanel,
   SelectValue,
@@ -6593,4 +6593,4 @@ export {
   Button
 };
 
-//# debugId=45DF01B400BCF1F964756E2164756E21
+//# debugId=DDBA2E62E0B449AE64756E2164756E21