@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/components/Workflow.es.js

@@ -1,27 +1,58 @@
-import { CornerDownRight, GitBranch, RefreshCw, Timer, Repeat, Repeat1, Network, Layers, Clock, PlayCircle, Workflow, List, CalendarClock, ShieldAlert, CircleX, CircleCheck, PauseIcon, HourglassIcon, Loader2, CircleDashed, ChevronDown, Database, Minus, Plus, Maximize, PlayIcon, StepForwardIcon, AlertCircleIcon, MoreVerticalIcon, ShieldAlertIcon, RotateCcwIcon, Clock3Icon, BracesIcon, LayersIcon } from 'lucide-react';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-Vj_jjcxE.js';
-import { Icon } from '../icons/Icon.es.js';
-import { c as cn } from '../cn-ByEbywDh.js';
-import { useState, useEffect, Fragment, forwardRef, useRef } from 'react';
-import { T as Txt } from '../Txt-CfPhlZOu.js';
+import { createContext, useState, useEffect, useId, forwardRef, useRef, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Repeat2, Workflow, GitFork, ArrowRightLeft, CalendarClock, Timer, Bot, Wrench, Braces, CornerDownRight, GitBranch, RefreshCw, Repeat, Repeat1, Network, Layers, Clock, PlayCircle, List, ChevronRight, Database, Minus, Plus, Maximize, Pause, Loader2, StepForwardIcon, PlayIcon, AlertCircleIcon, MoreVerticalIcon, ShieldAlertIcon, RotateCcwIcon, Clock3Icon, BracesIcon, PanelRightIcon } from 'lucide-react';
+import { B as Badge } from '../Badge-5RAaa8U3.js';
+import { T as Txt } from '../Txt-23XtxAlc.js';
 import { toSigFigs } from '../utils/number.es.js';
-import { Highlight, themes } from 'prism-react-renderer';
-import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, d as DialogDescription, e as DialogBody } from '../dialog-Dfrt_JCJ.js';
-import { S as ScrollArea } from '../scroll-area-B0L1nYJS.js';
-import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../collapsible-4eeo2ZU2.js';
+import { C as Code } from '../code-D4Vw_fYq.js';
+import { formatTypeScript } from '../utils/formatting.es.js';
+import { C as CopyButton } from '../copy-button-BBCLrGJB.js';
+import { c as cn } from '../cn-Dxjsbr9n.js';
+import { a as ActivityWick } from '../activity-DP2I8sw_.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../collapsible-cOfcD1BM.js';
+import { S as Shimmer } from '../shimmer-R2LMMF5x.js';
 import { javascript } from '@codemirror/lang-javascript';
 import { jsonLanguage } from '@codemirror/lang-json';
 import { EditorView } from '@codemirror/view';
 import ReactCodeMirror from '@uiw/react-codemirror';
-import { u as useCodemirrorTheme } from '../code-editor-D7BftGSx.js';
-import { C as CopyButton } from '../copy-button-ChUCFd-x.js';
-import { B as Button } from '../Button-BVGwYwHT.js';
-import { Handle, Position, getBezierPath, BaseEdge, EdgeLabelRenderer, useViewport, useReactFlow, Panel, ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
-import { S as Slider } from '../slider-AfRJ3a4W.js';
+import { u as useCodemirrorTheme } from '../code-editor-pVut50_I.js';
+import { B as Button } from '../Button-XSiL3zvL.js';
+import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, e as DialogBody } from '../dialog-BUcAVIly.js';
+import { Handle, Position, useInternalNode, getBezierPath, BaseEdge, EdgeLabelRenderer, useViewport, useReactFlow, useStore, Panel, useNodesInitialized, ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
+import { S as Slider } from '../slider-CP5EfpIm.js';
 import '@xyflow/react/dist/style.css';
-import { S as Skeleton } from '../skeleton-KJCC29GI.js';
-import { D as DropdownMenu } from '../dropdown-menu-C853KwJJ.js';
+import { S as Skeleton } from '../skeleton-D-kHfsjd.js';
+import { D as DropdownMenu } from '../dropdown-menu-BYns1-0U.js';
+
+const WorkflowCanvasInsetContext = createContext(0);
+function workflowFitOptions(leftInset, isInline = false) {
+  return {
+    maxZoom: 1,
+    padding: isInline ? "20px" : { left: `${leftInset + 40}px`, right: "40px", top: "40px", bottom: "64px" }
+  };
+}
+
+function getWorkflowCardBadge(props) {
+  if (props.isForEach) return { label: "For each", tone: "orange", Icon: Repeat2, indicator: "foreach" };
+  if (props.isNestedWorkflowStep || props.stepGraph)
+    return { label: "Workflow", tone: "purple", Icon: Workflow, indicator: "workflow" };
+  if (props.isParallel && !props.nodeKind)
+    return { label: "Parallel", tone: "blue", Icon: GitFork, indicator: "parallel" };
+  if (props.nodeKind === "map" || props.mapConfig)
+    return { label: "Map", tone: "orange", Icon: ArrowRightLeft, indicator: "map" };
+  if (props.nodeKind === "wait-until" || props.date)
+    return { label: "Wait until", tone: "purple", Icon: CalendarClock, indicator: "sleep-until" };
+  if (props.nodeKind === "delay" || props.duration !== void 0)
+    return { label: "Delay", tone: "purple", Icon: Timer, indicator: "sleep" };
+  if (props.nodeKind === "agent") return { label: "Agent", tone: "cyan", Icon: Bot };
+  if (props.nodeKind === "tool") return { label: "Tool", tone: "pink", Icon: Wrench };
+  return { label: "Step", tone: "neutral", Icon: Braces };
+}
+
+function WorkflowTypeBadge(props) {
+  const { label, Icon, tone } = getWorkflowCardBadge(props);
+  return /* @__PURE__ */ jsx(Badge, { size: "xs", variant: tone, icon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }), children: label });
+}
 
 const BADGE_COLORS = {
   sleep: "#A855F7",
@@ -179,288 +210,413 @@ const getNodeIndicators = (props) => {
   }
   return indicators;
 };
-const getWorkflowCardAccentColor = (indicators) => indicators[0]?.color;
 
-const WorkflowCardBadges = ({ indicators, className }) => {
-  if (!indicators.length) {
-    return null;
+const WorkflowClock = ({ startedAt, endedAt, isRunning = false }) => {
+  if (isRunning && endedAt === void 0 && Number.isFinite(startedAt)) {
+    return /* @__PURE__ */ jsx(RunningWorkflowClock, { startedAt }, startedAt);
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), children: indicators.map((indicator) => {
-    const IndicatorIcon = indicator.icon;
-    return /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(
-        TooltipTrigger,
-        {
-          render: /* @__PURE__ */ jsx(
-            "span",
-            {
-              role: "img",
-              tabIndex: 0,
-              "aria-label": indicator.label,
-              "data-testid": `workflow-card-indicator-${indicator.id}`,
-              className: "text-neutral5 focus-visible:ring-accent1 inline-flex size-5 shrink-0 items-center justify-center focus-visible:ring-1 focus-visible:outline-hidden"
-            }
-          ),
-          children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(IndicatorIcon, { className: "text-current", style: { color: indicator.color } }) })
-        }
-      ),
-      /* @__PURE__ */ jsx(TooltipContent, { children: indicator.label })
-    ] }, `badge-${indicator.id}`);
-  }) });
-};
-
-const WorkflowCardStatusIcon = ({ displayStatus, hasStep }) => {
-  const strokeWidth = 2;
-  return /* @__PURE__ */ jsxs(Icon, { size: "sm", className: "inline-flex size-5 shrink-0 items-center justify-center", children: [
-    displayStatus === "tripwire" && /* @__PURE__ */ jsx(ShieldAlert, { className: "text-amber-400", strokeWidth }),
-    displayStatus === "failed" && /* @__PURE__ */ jsx(CircleX, { className: "text-accent2", strokeWidth }),
-    displayStatus === "success" && /* @__PURE__ */ jsx(CircleCheck, { className: "text-accent1", strokeWidth }),
-    displayStatus === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-accent3", strokeWidth }),
-    displayStatus === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5", strokeWidth }),
-    displayStatus === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-accent6 animate-spin", strokeWidth }),
-    !displayStatus && !hasStep && /* @__PURE__ */ jsx(CircleDashed, { className: "text-neutral2", strokeWidth })
-  ] });
+  return /* @__PURE__ */ jsx(ElapsedTime, { startedAt, endedAt });
 };
-
-const WorkflowClock = ({ startedAt, endedAt }) => {
-  const [time, setTime] = useState(startedAt);
+function RunningWorkflowClock({ startedAt }) {
+  const [time, setTime] = useState(() => Date.now());
   useEffect(() => {
-    const interval = setInterval(() => {
-      setTime(Date.now());
-    }, 100);
+    const interval = setInterval(() => setTime(Date.now()), 100);
     return () => clearInterval(interval);
-  }, [startedAt]);
-  const timeDiff = endedAt ? endedAt - startedAt : time - startedAt;
-  return /* @__PURE__ */ jsxs(Txt, { variant: "ui-xs", className: "text-neutral3 font-mono whitespace-nowrap", children: [
-    toSigFigs(timeDiff, 3),
-    "ms"
-  ] });
-};
+  }, []);
+  return /* @__PURE__ */ jsx(ElapsedTime, { startedAt, endedAt: time });
+}
+function ElapsedTime({ startedAt, endedAt }) {
+  const duration = endedAt === void 0 ? NaN : endedAt - startedAt;
+  const timeDiff = Number.isFinite(duration) && duration >= 0 ? duration : void 0;
+  return /* @__PURE__ */ jsx(Txt, { variant: "ui-xs", className: "text-neutral3 font-mono whitespace-nowrap", children: timeDiff === void 0 ? /* @__PURE__ */ jsx("span", { "aria-label": "Timing unavailable", children: "—" }) : `${toSigFigs(timeDiff, 3)}ms` });
+}
 
-const WorkflowConditionCode = ({ condition, onOpen }) => /* @__PURE__ */ jsx("div", { className: "px-3", children: /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
-  "pre",
-  {
-    className: cn(
-      "relative font-mono p-3 w-full cursor-pointer rounded-lg text-ui-sm bg-surface4! whitespace-pre-wrap wrap-break-word",
-      className
-    ),
-    onClick: onOpen,
-    style,
-    children: tokens.map((line, i) => /* @__PURE__ */ jsxs("div", { ...getLineProps({ line }), children: [
-      /* @__PURE__ */ jsx("span", { className: "text-neutral3 mr-2 inline-block", children: i + 1 }),
-      line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
-    ] }, i))
-  }
-) }) });
-const WorkflowConditionDialog = ({ open, onOpenChange, condition }) => /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { style: { maxWidth: "30rem" }, children: [
-  /* @__PURE__ */ jsxs(DialogHeader, { children: [
-    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Condition Function" }),
-    /* @__PURE__ */ jsx(DialogDescription, { children: "View the condition function code" })
-  ] }),
-  /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(ScrollArea, { className: "w-full", maxHeight: "400px", children: condition && /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
-    "pre",
-    {
-      className: `${className} text-ui-md relative mt-2 w-full overflow-x-auto rounded-lg p-3 font-mono dark:bg-zinc-800`,
-      style: {
-        ...style,
-        backgroundColor: "#121212",
-        padding: "0 0.75rem 0 0"
-      },
-      children: tokens.map((line, i) => /* @__PURE__ */ jsxs("div", { ...getLineProps({ line }), children: [
-        /* @__PURE__ */ jsx("span", { className: "text-neutral3 mr-2 inline-block", children: i + 1 }),
-        line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
-      ] }, i))
-    }
-  ) }) }) })
-] }) });
+function conditionExpression(condition) {
+  if (condition.fnString !== void 0) return condition.fnString;
+  return JSON.stringify({ ref: condition.ref, query: condition.query, conj: condition.conj }, null, 2);
+}
+
+const MAX_FORMATTED_SOURCE_CHARS = 1e4;
+function WorkflowConditionSource({ source }) {
+  if (source.length > MAX_FORMATTED_SOURCE_CHARS) return /* @__PURE__ */ jsx(Code, { code: source });
+  return /* @__PURE__ */ jsx(FormattedConditionSource, { source }, source);
+}
+function FormattedConditionSource({ source }) {
+  const [formatted, setFormatted] = useState();
+  useEffect(() => {
+    let cancelled = false;
+    formatTypeScript(source).then((expression) => {
+      if (!cancelled) setFormatted(expression.trim());
+    }).catch(() => void 0);
+    return () => {
+      cancelled = true;
+    };
+  }, [source]);
+  return /* @__PURE__ */ jsx(Code, { code: formatted ?? source, lang: formatted === void 0 ? void 0 : "typescript" });
+}
 
-const isCodeCondition = (condition) => Boolean(condition.fnString);
-const WorkflowConditionCardView = ({
+const surfaceClasses = "rounded-[calc(var(--radius-xl)-2px)] bg-surface3 text-ui-xs";
+function WorkflowConditionCardView({
   type,
   conditions,
   previousDisplayStatus,
-  isOpen,
-  onOpenChange,
-  openDialog,
-  onOpenDialogChange,
-  dialogCondition,
-  onConditionClick,
   actionBar
-}) => {
-  const isCollapsible = (conditions.some((condition) => condition.fnString) || conditions.length > 1) && type !== "else";
-  const conditionIndicator = getConditionIndicator(type);
-  const indicators = conditionIndicator ? [conditionIndicator] : [];
-  const accentColor = getWorkflowCardAccentColor(indicators);
+}) {
+  const indicator = getConditionIndicator(type);
+  const Icon = indicator?.icon ?? Braces;
+  const label = indicator?.label.replace(/ condition$/, "") ?? "Condition";
+  const occurrences = /* @__PURE__ */ new Map();
+  const sources = conditions.map((condition) => {
+    const expression = conditionExpression(condition);
+    const identity = `${condition.type}:${expression}`;
+    const occurrence = occurrences.get(identity) ?? 0;
+    occurrences.set(identity, occurrence + 1);
+    return { condition, expression, key: `${identity}:${occurrence}` };
+  });
+  const copyContent = conditions.length > 1 ? JSON.stringify(conditions, null, 2) : sources.map((source) => source.expression).join("\n");
+  const hasExpression = type !== "else" && sources.some(({ expression }) => expression.trim().length > 0);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      className: "border-border1 bg-surface2 shadow-panel has-focus-visible:outline-accent3 w-[274px] overflow-hidden rounded-xl border p-0.5 has-focus-visible:outline-2 has-focus-visible:outline-offset-4",
       "data-workflow-node": true,
-      "data-workflow-step-status": previousDisplayStatus ?? "idle",
       "data-testid": "workflow-condition-node",
-      style: accentColor ? { borderLeftColor: accentColor } : void 0,
-      className: cn("w-dropdown-max-height rounded-lg border border-border1 bg-surface3", accentColor && "border-l-4"),
+      "data-workflow-step-status": previousDisplayStatus ?? "idle",
       children: [
-        /* @__PURE__ */ jsxs(
-          Collapsible,
+        /* @__PURE__ */ jsxs("div", { className: "text-ui-xs text-neutral3 flex h-[46px] items-center gap-2 px-2.5", children: [
+          /* @__PURE__ */ jsx(Badge, { size: "xs", variant: type === "else" ? "neutral" : "yellow", emphasis: "muted", icon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }), children: label }),
+          hasExpression && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "ml-auto", children: "Expression" }),
+            /* @__PURE__ */ jsx(CopyButton, { content: copyContent, tooltip: "Copy expression", size: "sm", className: "nodrag nopan" })
+          ] })
+        ] }),
+        hasExpression ? /* @__PURE__ */ jsx(
+          "div",
           {
-            open: !isCollapsible ? true : isOpen,
-            onOpenChange: (_open) => {
-              if (isCollapsible) {
-                onOpenChange(_open);
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1 px-3 py-2", children: [
-                isCollapsible && /* @__PURE__ */ jsx(
-                  CollapsibleTrigger,
-                  {
-                    "aria-label": isOpen ? "Collapse condition" : "Expand condition",
-                    className: "text-neutral3 hover:text-neutral5 focus-visible:ring-accent1 inline-flex size-5 items-center justify-center rounded-full focus-visible:ring-1 focus-visible:outline-hidden",
-                    children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(
-                      ChevronDown,
-                      {
-                        className: cn("transition-transform", {
-                          "transform rotate-180": isOpen
-                        })
-                      }
-                    ) })
-                  }
-                ),
-                /* @__PURE__ */ jsx(WorkflowCardBadges, { indicators, className: "shrink-0" }),
-                /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center", children: actionBar })
-              ] }),
-              type === "else" ? null : /* @__PURE__ */ jsx(CollapsibleContent, { className: "flex flex-col gap-2 pb-2", children: conditions.map((condition, index) => {
-                const conjType = condition.conj || type;
-                const conjIndicator = index === 0 ? void 0 : getConditionIndicator(conjType);
-                const conjIndicators = conjIndicator ? [conjIndicator] : [];
-                return isCodeCondition(condition) ? /* @__PURE__ */ jsx(
-                  WorkflowConditionCode,
-                  {
-                    condition,
-                    onOpen: () => onConditionClick(condition)
-                  },
-                  `condition-code-${index}-${condition.fnString}`
-                ) : /* @__PURE__ */ jsx(Fragment, { children: condition.ref?.step ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsx(WorkflowCardBadges, { indicators: conjIndicators }),
-                  /* @__PURE__ */ jsxs(Txt, { variant: "ui-xs", className: "text-neutral3 flex-1", children: [
-                    typeof condition.ref.step === "string" ? condition.ref.step : condition.ref.step.id,
-                    "'s",
-                    " ",
-                    condition.ref.path,
-                    " ",
-                    Object.entries(condition.query).map(([key, value]) => `${key} ${String(value)}`)
-                  ] })
-                ] }) : null }, `condition-ref-${index}-${condition.ref?.path ?? "unknown"}`);
-              }) })
-            ]
+            role: "region",
+            "aria-label": "Condition details",
+            tabIndex: 0,
+            className: `${surfaceClasses} text-neutral5 nodrag nopan nowheel max-h-[220px] overflow-auto p-3.5 [&_pre]:leading-relaxed [&_pre]:whitespace-pre-wrap`,
+            children: sources.map(({ condition, expression, key }) => /* @__PURE__ */ jsxs("div", { children: [
+              condition.conj && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "neutral", children: condition.conj.toUpperCase() }),
+              condition.fnString !== void 0 ? /* @__PURE__ */ jsx(WorkflowConditionSource, { source: condition.fnString }) : /* @__PURE__ */ jsx(Code, { code: expression })
+            ] }, key))
           }
-        ),
-        /* @__PURE__ */ jsx(WorkflowConditionDialog, { open: openDialog, onOpenChange: onOpenDialogChange, condition: dialogCondition })
+        ) : /* @__PURE__ */ jsx("p", { className: `${surfaceClasses} text-neutral3 p-3`, children: type === "else" ? "When no other branch matches" : "Condition expression unavailable" }),
+        actionBar && /* @__PURE__ */ jsx("div", { className: "nodrag nopan flex justify-end px-2.5 py-1.5 empty:hidden", children: actionBar })
       ]
     }
   );
-};
+}
 
-const WorkflowForEachProgress = ({ foreachProgress }) => {
-  if (!foreachProgress) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 pb-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-surface1 h-1.5 flex-1 overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(
-      "div",
+const DIAL_CENTER = 58;
+const CLOCK_TICK_ANGLES = Array.from({ length: 60 }, (_, index) => index * 6);
+const DURATION_TICK_ANGLES = Array.from({ length: 41 }, (_, index) => -120 + index * 6);
+function pointAt(angle, radius) {
+  const radians = angle * Math.PI / 180;
+  return {
+    x: DIAL_CENTER + Math.sin(radians) * radius,
+    y: DIAL_CENTER - Math.cos(radians) * radius
+  };
+}
+function DialTick({ angle, major, className, ...props }) {
+  const outer = pointAt(angle, 49);
+  const inner = pointAt(angle, major ? 38 : 43);
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      x1: inner.x,
+      y1: inner.y,
+      x2: outer.x,
+      y2: outer.y,
+      className: cn(major ? "stroke-neutral2" : "stroke-border2", className),
+      ...props
+    }
+  );
+}
+function DialHand({ angle, length }) {
+  const tip = pointAt(angle, length);
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      x1: DIAL_CENTER,
+      y1: DIAL_CENTER,
+      x2: tip.x,
+      y2: tip.y,
+      className: "stroke-neutral4 stroke-[1.5]",
+      strokeLinecap: "round"
+    }
+  );
+}
+function DialFace({ tickAngles, children }) {
+  return /* @__PURE__ */ jsx("span", { className: "text-neutral4 block size-28 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 116 116", fill: "none", className: "block size-full overflow-visible", children: [
+    tickAngles.map((angle, index) => /* @__PURE__ */ jsx(DialTick, { angle, major: index % 5 === 0 }, angle)),
+    children
+  ] }) });
+}
+function ClockDial({ date }) {
+  const minutes = date.getUTCMinutes();
+  return /* @__PURE__ */ jsxs(DialFace, { tickAngles: CLOCK_TICK_ANGLES, children: [
+    /* @__PURE__ */ jsx(DialHand, { angle: (date.getUTCHours() % 12 + minutes / 60) * 30, length: 26 }),
+    /* @__PURE__ */ jsx(DialHand, { angle: minutes * 6, length: 37 }),
+    /* @__PURE__ */ jsx("circle", { cx: DIAL_CENTER, cy: DIAL_CENTER, r: 2, fill: "currentColor" })
+  ] });
+}
+function DurationDial({ amount, unit }) {
+  const scale = Math.max({ h: 24, ms: 1e3, s: 60, min: 60 }[unit], Math.ceil(amount / 10) * 10);
+  return /* @__PURE__ */ jsxs(DialFace, { tickAngles: DURATION_TICK_ANGLES, children: [
+    /* @__PURE__ */ jsx(
+      DialTick,
       {
-        className: cn(
-          "h-full rounded-full transition-all duration-300",
-          foreachProgress.iterationStatus === "failed" ? "bg-accent2" : "bg-accent1"
-        ),
-        style: {
-          width: `${foreachProgress.totalCount > 0 ? foreachProgress.completedCount / foreachProgress.totalCount * 100 : 0}%`
-        }
+        angle: -120 + amount / scale * 240,
+        major: true,
+        className: "stroke-neutral6 stroke-2",
+        strokeLinecap: "round"
       }
-    ) }),
-    /* @__PURE__ */ jsxs(Txt, { variant: "ui-xs", className: "text-neutral3 whitespace-nowrap", children: [
-      foreachProgress.completedCount,
-      " / ",
-      foreachProgress.totalCount
-    ] })
+    ),
+    /* @__PURE__ */ jsxs("text", { x: DIAL_CENTER, y: 94, textAnchor: "middle", className: "fill-neutral3 text-ui-xs font-sans", children: [
+      scale,
+      " ",
+      unit
+    ] }),
+    /* @__PURE__ */ jsx("text", { x: DIAL_CENTER, y: 106, textAnchor: "middle", className: "fill-neutral2 text-ui-xs font-sans", children: "scale" })
+  ] });
+}
+
+const captionClasses = "text-ui-xs tracking-wider whitespace-nowrap text-neutral3 uppercase";
+function durationReading(duration) {
+  if (duration < 1e3) return { amount: duration, unit: "ms" };
+  if (duration < 6e4) return { amount: duration / 1e3, unit: "s" };
+  if (duration < 36e5) return { amount: duration / 6e4, unit: "min" };
+  return { amount: duration / 36e5, unit: "h" };
+}
+function TimingReading({
+  value,
+  unit,
+  caption,
+  dial
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: "text-neutral6 mt-1 flex min-h-[108px] items-center justify-between gap-1", children: [
+    /* @__PURE__ */ jsxs("span", { className: "z-10 flex min-w-0 flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-header-xl flex items-baseline gap-1 leading-none font-normal tracking-tighter whitespace-nowrap tabular-nums", children: [
+        value,
+        /* @__PURE__ */ jsx("small", { className: "text-ui-xs text-neutral3 font-normal tracking-normal", children: unit })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: captionClasses, children: caption })
+    ] }),
+    dial
   ] });
+}
+function WorkflowTiming({ duration, date }) {
+  if (date) {
+    const scheduled = new Date(date);
+    if (!Number.isFinite(scheduled.getTime())) {
+      return /* @__PURE__ */ jsx("span", { className: captionClasses, children: "Schedule unavailable" });
+    }
+    return /* @__PURE__ */ jsx(
+      TimingReading,
+      {
+        value: scheduled.toLocaleTimeString(void 0, { timeZone: "UTC", hour: "2-digit", minute: "2-digit" }),
+        unit: "UTC",
+        caption: scheduled.toLocaleDateString(void 0, {
+          timeZone: "UTC",
+          day: "numeric",
+          month: "short",
+          year: "numeric"
+        }),
+        dial: /* @__PURE__ */ jsx(ClockDial, { date: scheduled })
+      }
+    );
+  }
+  if (duration === void 0) return null;
+  if (!Number.isFinite(duration) || duration < 0) {
+    return /* @__PURE__ */ jsx("span", { className: captionClasses, children: "Delay unavailable" });
+  }
+  const reading = durationReading(duration);
+  return /* @__PURE__ */ jsx(
+    TimingReading,
+    {
+      value: reading.amount.toLocaleString(void 0, { maximumFractionDigits: 3 }),
+      unit: reading.unit,
+      caption: "Configured delay",
+      dial: /* @__PURE__ */ jsx(DurationDial, { ...reading })
+    }
+  );
+}
+
+const statusLabels = {
+  running: "Running",
+  success: "Completed",
+  failed: "Failed",
+  suspended: "Needs input",
+  waiting: "Waiting",
+  paused: "Paused",
+  skipped: "Skipped",
+  canceled: "Canceled",
+  tripwire: "Tripwire blocked"
 };
-const WorkflowSleepDetails = ({ duration, date }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  duration && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-neutral3 px-3 pb-2", children: [
-    "sleeps for ",
-    /* @__PURE__ */ jsxs("strong", { children: [
-      duration,
-      "ms"
-    ] })
-  ] }),
-  date && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-neutral3 px-3 pb-2", children: [
-    "sleeps until ",
-    /* @__PURE__ */ jsx("strong", { children: new Date(date).toLocaleString() })
-  ] })
-] });
-const WorkflowStepCardView = ({
-  label,
-  description,
-  displayStatus,
-  hasStep,
-  isNestedWorkflowStep,
-  stepKey,
-  isSelected,
-  isWaiting,
-  isHovered,
-  onHoverChange,
-  duration,
-  date,
-  isForEach,
-  foreachProgress,
-  mapConfig,
-  canSuspend,
-  isParallel,
-  stepGraph,
-  startedAt,
-  endedAt,
-  actionBar
-}) => {
-  const badgeProps = { duration, date, isForEach, mapConfig, canSuspend, isParallel, stepGraph };
-  const indicators = getNodeIndicators(badgeProps);
-  const accentColor = getWorkflowCardAccentColor(indicators);
-  return /* @__PURE__ */ jsxs(
+const statusLineClasses = {
+  success: "after:bg-positive1",
+  failed: "after:bg-negative1",
+  tripwire: "after:bg-warning1",
+  waiting: "after:bg-accent5",
+  paused: "after:bg-neutral3",
+  skipped: "after:bg-neutral3"
+};
+const footerStatusClasses = {
+  success: "text-positive1",
+  failed: "text-negative1",
+  suspended: "text-warning1",
+  tripwire: "text-warning1"
+};
+const suspendedWickStyle = { "--belt-hue": "var(--warning1)" };
+function WorkflowStepCardView(props) {
+  const {
+    label,
+    description,
+    displayStatus,
+    stepKey,
+    isSelected,
+    isWaiting,
+    isHovered,
+    onHoverChange,
+    onSelect,
+    isForEach,
+    foreachProgress,
+    startedAt,
+    endedAt,
+    actionBar,
+    body
+  } = props;
+  const [expanded, setExpanded] = useState(props.initiallyOpen ?? false);
+  const isRunning = displayStatus === "running";
+  const isSuspended = displayStatus === "suspended";
+  const reportedStatusLabel = displayStatus && Object.hasOwn(statusLabels, displayStatus) ? statusLabels[displayStatus] : void 0;
+  const statusLabel = displayStatus ? reportedStatusLabel ?? "Status unavailable" : "Not started";
+  const kind = getWorkflowCardBadge(props);
+  const capabilities = getNodeIndicators(props).filter((indicator) => indicator.id !== kind.indicator).map((indicator) => indicator.label.replace(/ step$/, ""));
+  const hasActivity = isRunning || isSuspended;
+  const isStacked = isForEach && !expanded;
+  const isBodyExpanded = Boolean(body) && expanded;
+  const Summary = onSelect ? "button" : "div";
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-workflow-node": true,
-      "data-workflow-step-key": stepKey,
-      "data-workflow-step-status": displayStatus ?? "idle",
-      "data-workflow-step-active": isSelected ? "true" : void 0,
-      "data-workflow-step-waiting": isWaiting ? "true" : void 0,
-      "data-workflow-step-hovered": isHovered ? "true" : void 0,
-      "data-testid": isNestedWorkflowStep ? "workflow-nested-node" : "workflow-default-node",
-      onMouseEnter: () => onHoverChange?.(true),
-      onMouseLeave: () => onHoverChange?.(false),
-      style: accentColor ? { borderLeftColor: accentColor } : void 0,
       className: cn(
-        "w-[274px] rounded-lg border border-border1 bg-surface3 transition-colors hover:border-neutral6",
-        accentColor && "border-l-4",
-        isHovered && !isSelected && "border-neutral6",
-        isWaiting && !isSelected && "border-accent3",
-        isSelected && "border-accent1"
+        "relative isolate w-[274px]",
+        isBodyExpanded && "w-[688px]",
+        isStacked && "pb-3 before:absolute before:inset-x-1.5 before:top-2 before:bottom-1.5 before:-z-10 before:rounded-xl before:border before:border-border1 before:bg-surface3 after:absolute after:inset-x-3 after:top-3.5 after:bottom-0 after:-z-20 after:rounded-xl after:border after:border-border1 after:bg-surface3"
       ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3 pt-2", !description && "pb-2"), children: [
-          /* @__PURE__ */ jsx(WorkflowCardBadges, { indicators, className: "shrink-0" }),
-          /* @__PURE__ */ jsx(WorkflowCardStatusIcon, { displayStatus, hasStep }),
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-neutral6 block truncate font-medium", title: label, children: label }) }),
-          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [
-            startedAt && /* @__PURE__ */ jsx(WorkflowClock, { startedAt, endedAt }),
-            actionBar
-          ] })
-        ] }),
-        description && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-neutral3 px-3 pb-2", children: description }),
-        isForEach && /* @__PURE__ */ jsx(WorkflowForEachProgress, { foreachProgress }),
-        /* @__PURE__ */ jsx(WorkflowSleepDetails, { duration, date })
-      ]
+      children: /* @__PURE__ */ jsxs(
+        Collapsible,
+        {
+          open: expanded,
+          onOpenChange: setExpanded,
+          className: cn(
+            "relative rounded-xl border border-border1 bg-surface2 text-neutral5 shadow-panel transition-[border-color,box-shadow] [--card-radius:calc(var(--radius-xl)-2px)] motion-reduce:transition-none",
+            "after:pointer-events-none after:absolute after:inset-x-4 after:-top-px after:h-px after:mask-x-from-76%",
+            displayStatus && statusLineClasses[displayStatus],
+            "has-focus-visible:outline-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-accent3",
+            isSelected && "outline-1 outline-offset-4 outline-neutral3",
+            isBodyExpanded && "border-dashed border-neutral3/40 shadow-none",
+            isWaiting && "border-accent3",
+            isHovered && !isSelected && "border-border2 shadow-dialog",
+            hasActivity && "border-transparent"
+          ),
+          "data-workflow-node": true,
+          "data-workflow-step-key": stepKey,
+          "data-workflow-step-status": displayStatus ?? "idle",
+          "data-workflow-step-active": isSelected || void 0,
+          "data-workflow-step-waiting": isWaiting || void 0,
+          "data-workflow-step-hovered": isHovered || void 0,
+          "data-testid": props.isNestedWorkflowStep ? "workflow-nested-node" : "workflow-default-node",
+          onMouseEnter: () => onHoverChange?.(true),
+          onMouseLeave: () => onHoverChange?.(false),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "m-0.5 overflow-hidden rounded-(--card-radius)", children: [
+              /* @__PURE__ */ jsxs(
+                Summary,
+                {
+                  className: cn(
+                    "nodrag nopan flex w-full flex-col text-left",
+                    onSelect && "group cursor-pointer focus-visible:outline-hidden"
+                  ),
+                  type: onSelect ? "button" : void 0,
+                  "aria-label": onSelect ? `Inspect ${label}` : void 0,
+                  "aria-pressed": onSelect ? Boolean(isSelected) : void 0,
+                  onClick: onSelect,
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "group-hover:bg-surface4 flex items-start justify-between gap-2.5 rounded-(--card-radius) px-3.5 py-3", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral6 min-w-0 font-semibold wrap-anywhere", title: label, children: /* @__PURE__ */ jsx(Shimmer, { active: isRunning, children: label }) }),
+                      /* @__PURE__ */ jsx(WorkflowTypeBadge, { ...props })
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "bg-surface3 flex flex-col gap-2 rounded-t-(--card-radius) px-3.5 py-3 empty:py-1.5", children: [
+                      description && /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3 wrap-anywhere", children: description }),
+                      /* @__PURE__ */ jsx(WorkflowTiming, { duration: props.duration, date: props.date }),
+                      isWaiting && /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-accent3", children: "Next step in debug" }),
+                      isForEach && foreachProgress && /* @__PURE__ */ jsxs("span", { className: "text-ui-xs flex flex-col gap-2 py-1", children: [
+                        /* @__PURE__ */ jsxs("span", { children: [
+                          /* @__PURE__ */ jsx("strong", { children: foreachProgress.completedCount }),
+                          " of ",
+                          foreachProgress.totalCount,
+                          " items complete"
+                        ] }),
+                        foreachProgress.totalCount > 0 ? /* @__PURE__ */ jsx(
+                          "progress",
+                          {
+                            className: "bg-surface4 accent-positive1 [&::-moz-progress-bar]:bg-positive1 [&::-webkit-progress-bar]:bg-surface4 [&::-webkit-progress-value]:bg-positive1 h-1 w-full appearance-none border-0",
+                            "aria-label": `${label} completed items`,
+                            value: foreachProgress.completedCount,
+                            max: foreachProgress.totalCount
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { children: "No items to process" })
+                      ] }),
+                      capabilities.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-neutral3", children: capabilities.join(" · ") })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "nodrag nopan flex min-h-7 items-center justify-between gap-2 bg-surface3 px-3.5 pb-2.5 text-ui-xs text-neutral3",
+                    displayStatus && footerStatusClasses[displayStatus]
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { role: "status", className: isRunning ? "sr-only motion-reduce:not-sr-only" : void 0, children: statusLabel }),
+                    startedAt !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(WorkflowClock, { startedAt, endedAt, isRunning }) }),
+                    actionBar
+                  ]
+                }
+              ),
+              body && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "nodrag nopan border-border1 bg-surface3 text-ui-sm hover:bg-surface4 flex min-h-11 w-full items-center justify-between border-t px-3.5 py-2.5 focus-visible:shadow-none focus-visible:ring-0", children: [
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    expanded ? "Collapse" : "Expand",
+                    " ",
+                    isForEach ? "loop" : "workflow"
+                  ] }),
+                  /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, size: 14 })
+                ] }),
+                /* @__PURE__ */ jsx(CollapsibleContent, { className: "border-border1 h-[620px] overflow-hidden border-t border-dashed", children: body })
+              ] })
+            ] }),
+            hasActivity && /* @__PURE__ */ jsx(
+              ActivityWick,
+              {
+                status: isSuspended ? "ready" : "working",
+                "aria-hidden": true,
+                className: "before:hidden",
+                style: isSuspended ? suspendedWickStyle : void 0
+              }
+            )
+          ]
+        }
+      )
     }
   );
-};
+}
 
 const WorkflowCodeContent = ({
   data,
@@ -504,21 +660,27 @@ const WorkflowCodeContent = ({
   ] });
 };
 
-const hasPayload = (value) => value !== void 0;
-const WorkflowEdgeDataButton = ({ previousStepId, output, label }) => {
+const WorkflowEdgeDataButton = ({
+  previousStepId,
+  output,
+  label,
+  selected,
+  onInspect
+}) => {
   const [isOpen, setIsOpen] = useState(false);
-  const hasOutput = hasPayload(output);
   const dataLabel = label ?? (previousStepId ? `${previousStepId} output` : "Previous output");
-  if (!hasOutput) {
+  if (output === void 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         size: "sm",
-        onClick: () => setIsOpen(true),
-        className: "border-border1 bg-surface3/95 text-neutral5 hover:bg-surface4 h-7 rounded-full border px-2 shadow-lg",
+        onClick: onInspect ?? (() => setIsOpen(true)),
+        "aria-label": `View ${dataLabel}`,
+        "aria-pressed": selected,
+        className: "border-border1 bg-surface3 text-neutral5 shadow-panel hover:bg-surface4 aria-pressed:border-neutral3 aria-pressed:bg-surface4 h-7 rounded-lg border px-2",
         icon: /* @__PURE__ */ jsx(Database, { className: "text-accent1" }),
         children: "Data"
       }
@@ -538,14 +700,17 @@ const WORKFLOW_BOUNDARY_NODE_TYPE = "workflow-boundary-node";
 
 const WorkflowBoundaryNode = ({ data }) => {
   const isStart = data.boundaryRole === "start";
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     !isStart && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsx(
       "div",
       {
         "data-workflow-boundary-node": true,
         "data-testid": `workflow-boundary-${data.boundaryRole}`,
-        className: "border-border1 bg-surface3 text-neutral5 flex size-14 items-center justify-center rounded-full border",
+        className: cn(
+          "relative flex h-[38px] w-28 items-center justify-center text-neutral4 after:absolute after:inset-x-0 after:mask-x-from-60%",
+          isStart ? "after:bottom-0 after:h-px after:bg-neutral3" : "after:top-0 after:h-1 after:border-y after:border-neutral3"
+        ),
         children: /* @__PURE__ */ jsx(Txt, { variant: "ui-xs", className: "font-medium", children: data.label })
       }
     ),
@@ -553,31 +718,62 @@ const WorkflowBoundaryNode = ({ data }) => {
   ] });
 };
 
-function WorkflowDataEdgeView({ output, label, ...props }) {
-  const [edgePath, labelX, labelY] = getBezierPath(props);
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+function WorkflowDataEdgeView({ output, label, dataControl, ...props }) {
+  const source = useInternalNode(props.source);
+  const target = useInternalNode(props.target);
+  const sourceWidth = source?.measured?.width ?? source?.width;
+  const sourceHeight = source?.measured?.height ?? source?.height;
+  const targetWidth = target?.measured?.width ?? target?.width;
+  const hasBottomSource = source && sourceWidth !== void 0 && sourceHeight !== void 0 && props.sourcePosition === Position.Bottom;
+  const hasTopTarget = target && targetWidth !== void 0 && props.targetPosition === Position.Top;
+  const sourceX = hasBottomSource ? source.internals.positionAbsolute.x + sourceWidth / 2 : props.sourceX;
+  const sourceY = hasBottomSource ? source.internals.positionAbsolute.y + sourceHeight : props.sourceY;
+  const targetX = hasTopTarget ? target.internals.positionAbsolute.x + targetWidth / 2 : props.targetX;
+  const targetY = hasTopTarget ? target.internals.positionAbsolute.y : props.targetY;
+  const [edgePath, midpointX, midpointY] = getBezierPath({
+    ...props,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY
+  });
+  const labelPlacement = props.data?.dataLabelPlacement;
+  const labelX = labelPlacement === "source" ? sourceX : midpointX;
+  const labelY = labelPlacement === "source" ? sourceY + Math.min(24, Math.max(0, (targetY - sourceY) / 4)) : midpointY;
+  const arrowId = useId();
+  const isExecuted = props.data?.edgeStatus === "success";
+  const pathColor = isExecuted ? "color-mix(in oklab, var(--positive1) 82%, var(--neutral6))" : "var(--neutral3)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: arrowId, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M1 1 L9 5 L1 9 Z", fill: pathColor }) }) }),
     /* @__PURE__ */ jsx(
       BaseEdge,
       {
         id: props.id,
         path: edgePath,
-        markerEnd: props.markerEnd,
-        style: props.style,
+        markerEnd: `url(#${arrowId})`,
+        style: {
+          ...props.style,
+          stroke: pathColor,
+          strokeWidth: isExecuted ? 2 : 1,
+          strokeLinecap: "round",
+          strokeDasharray: isExecuted ? "none" : "5 6"
+        },
+        vectorEffect: "non-scaling-stroke",
         "data-edge-status": props.data?.edgeStatus ?? "idle",
         "data-edge-from": props.data?.previousStepId,
         "data-edge-to": props.data?.nextStepId
       }
     ),
-    /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+    labelPlacement !== "hidden" && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: "nodrag nopan",
+        className: "nodrag nopan flex items-center justify-center",
         style: {
           position: "absolute",
           pointerEvents: "all",
           transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`
         },
-        children: /* @__PURE__ */ jsx(
+        children: dataControl ?? /* @__PURE__ */ jsx(
           WorkflowEdgeDataButton,
           {
             previousStepId: props.data?.boundaryPayload ? void 0 : props.data?.previousStepId,
@@ -590,9 +786,49 @@ function WorkflowDataEdgeView({ output, label, ...props }) {
   ] });
 }
 
-const ZoomSlider = forwardRef(({ className, ...props }, ref) => {
+function workflowCameraDuration() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+}
+
+function WorkflowGraphGroups({ nodes, groups }) {
+  const { x, y, zoom } = useViewport();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "pointer-events-none absolute inset-0 z-0 origin-top-left",
+      style: { transform: `translate(${x}px, ${y}px) scale(${zoom})` },
+      children: groups.map((group) => {
+        const members = nodes.flatMap((node) => {
+          if (!group.nodeIds.includes(node.id) || !node.measured?.width || !node.measured.height) return [];
+          return [{ x: node.position.x, y: node.position.y, width: node.measured.width, height: node.measured.height }];
+        });
+        if (!members.length || members.length !== group.nodeIds.length) return null;
+        const left = Math.min(...members.map((node) => node.x)) - 20;
+        const top = Math.min(...members.map((node) => node.y)) - 54;
+        const right = Math.max(...members.map((node) => node.x + node.width)) + 20;
+        const bottom = Math.max(...members.map((node) => node.y + node.height)) + 20;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "border-neutral3/25 bg-neutral3/3 absolute rounded-xl border border-dashed",
+            style: { transform: `translate(${left}px, ${top}px)`, width: right - left, height: bottom - top },
+            children: /* @__PURE__ */ jsxs("div", { className: "text-ui-xs text-neutral3 flex items-center gap-2 px-5 py-4", children: [
+              /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "blue", emphasis: "muted", icon: /* @__PURE__ */ jsx(GitFork, { "aria-hidden": true }), children: group.label }),
+              /* @__PURE__ */ jsx("span", { children: group.description })
+            ] })
+          },
+          group.id
+        );
+      })
+    }
+  );
+}
+
+const ZoomSlider = forwardRef(({ className, compact = false, onFitView, ...props }, ref) => {
   const { zoom } = useViewport();
   const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
+  const minZoom = useStore((state) => state.minZoom);
+  const maxZoom = useStore((state) => state.maxZoom);
   return /* @__PURE__ */ jsxs(
     Panel,
     {
@@ -603,27 +839,65 @@ const ZoomSlider = forwardRef(({ className, ...props }, ref) => {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(Button, { size: "icon-sm", tooltip: "Zoom out", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsx(Minus, {}) }),
         /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon-sm",
+            tooltip: "Zoom out",
+            disabled: zoom <= minZoom,
+            onClick: () => zoomOut({ duration: workflowCameraDuration() }),
+            children: /* @__PURE__ */ jsx(Minus, {})
+          }
+        ),
+        !compact && /* @__PURE__ */ jsx(
           Slider,
           {
-            style: { width: 140 },
+            className: "w-[140px]",
+            "aria-label": "Canvas zoom",
             value: [zoom],
-            min: 0.01,
-            max: 1,
+            min: minZoom,
+            max: maxZoom,
             step: 0.01,
+            largeStep: 0.25,
+            format: { style: "percent" },
             onValueChange: (values) => {
               const [nextZoom] = values;
               if (nextZoom !== void 0) void zoomTo(nextZoom);
             }
           }
         ),
-        /* @__PURE__ */ jsx(Button, { size: "icon-sm", tooltip: "Zoom in", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, {}) }),
-        /* @__PURE__ */ jsxs(Button, { size: "sm", className: "min-w-16 tabular-nums", onClick: () => zoomTo(1, { duration: 300 }), children: [
-          (100 * zoom).toFixed(0),
-          "%"
-        ] }),
-        /* @__PURE__ */ jsx(Button, { size: "icon-sm", tooltip: "Fit view", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsx(Maximize, {}) })
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon-sm",
+            tooltip: "Zoom in",
+            disabled: zoom >= maxZoom,
+            onClick: () => zoomIn({ duration: workflowCameraDuration() }),
+            children: /* @__PURE__ */ jsx(Plus, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            className: "min-w-16 tabular-nums",
+            tooltip: "Reset to actual size (100%)",
+            onClick: () => zoomTo(1, { duration: workflowCameraDuration() }),
+            children: [
+              (100 * zoom).toFixed(0),
+              "%"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon-sm",
+            tooltip: "Fit view",
+            onClick: onFitView ?? (() => fitView({ duration: workflowCameraDuration(), maxZoom: 1 })),
+            children: /* @__PURE__ */ jsx(Maximize, {})
+          }
+        )
       ]
     }
   );
@@ -638,53 +912,97 @@ function WorkflowGraphCanvas({
   onNodesChange,
   onNodeClick,
   focusNodeId,
+  groups,
   variant = "default"
 }) {
   const graphRef = useRef(null);
-  const { getNodes, setCenter } = useReactFlow();
+  const backgroundId = useId();
+  const panelInset = useContext(WorkflowCanvasInsetContext);
+  const leftInset = variant === "default" ? panelInset : 0;
+  const isInline = variant === "inline";
+  const { getNodes, setCenter, fitView } = useReactFlow();
+  const nodesInitialized = useNodesInitialized();
+  const canvasWidth = useStore((state) => state.width);
+  const canvasHeight = useStore((state) => state.height);
+  const hasCompactZoom = canvasWidth - leftInset < 560;
+  const inlineNodeLayout = isInline ? JSON.stringify(
+    nodes?.map((node) => [
+      node.id,
+      node.position.x,
+      node.position.y,
+      node.measured?.width ?? node.width,
+      node.measured?.height ?? node.height
+    ])
+  ) : void 0;
+  useEffect(() => {
+    if (!canvasWidth || !canvasHeight || !nodesInitialized) return;
+    if (variant === "default") return;
+    void fitView({ ...workflowFitOptions(leftInset, isInline), duration: 0 });
+  }, [canvasWidth, canvasHeight, nodesInitialized, inlineNodeLayout, fitView, leftInset, isInline, variant]);
   useEffect(() => {
-    if (!focusNodeId) return;
+    if (!canvasWidth || !canvasHeight || !nodesInitialized || !focusNodeId) return;
     const focusNode = getNodes().find((node) => node.id === focusNodeId);
     if (!focusNode) return;
-    graphRef.current?.focus({ preventScroll: true });
+    if (!graphRef.current?.contains(document.activeElement)) {
+      graphRef.current?.focus({ preventScroll: true });
+    }
     const width = focusNode.measured?.width ?? focusNode.width ?? 274;
     const height = focusNode.measured?.height ?? focusNode.height ?? 100;
-    void setCenter(focusNode.position.x + width / 2, focusNode.position.y + height / 2, {
-      duration: 300,
+    const duration = workflowCameraDuration();
+    const exceedsVisibleWidth = canvasWidth > 0 && width > canvasWidth - leftInset - 80;
+    const exceedsVisibleHeight = canvasHeight > 0 && height > canvasHeight - 104;
+    if (exceedsVisibleWidth || exceedsVisibleHeight) {
+      void fitView({ ...workflowFitOptions(leftInset), nodes: [{ id: focusNode.id }], duration });
+      return;
+    }
+    void setCenter(focusNode.position.x + width / 2 - leftInset / 2, focusNode.position.y + height / 2, {
+      duration,
       zoom: 1
     });
-  }, [focusNodeId, nodes, getNodes, setCenter]);
+  }, [canvasWidth, canvasHeight, nodesInitialized, focusNodeId, getNodes, setCenter, fitView, leftInset]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: graphRef,
       tabIndex: -1,
       "data-testid": "workflow-graph-viewport",
-      className: variant === "nested" ? "bg-surface1 size-full outline-none" : "bg-surface2 size-full outline-none",
+      className: cn("size-full outline-none", variant === "nested" ? "bg-surface1" : "bg-surface2"),
       children: /* @__PURE__ */ jsxs(
         ReactFlow,
         {
+          fitView: variant === "default",
+          fitViewOptions: workflowFitOptions(leftInset),
           nodes,
           edges,
           nodeTypes,
           edgeTypes,
           onNodesChange,
           onNodeClick,
-          fitView: true,
-          fitViewOptions: { maxZoom: 1 },
-          minZoom: 0.01,
-          maxZoom: 1,
+          nodesDraggable: false,
+          nodesConnectable: false,
+          elementsSelectable: false,
+          deleteKeyCode: null,
+          panOnScroll: !isInline,
+          panOnDrag: !isInline,
+          zoomOnPinch: !isInline,
+          zoomOnDoubleClick: !isInline,
+          preventScrolling: !isInline,
+          proOptions: isInline ? { hideAttribution: true } : void 0,
+          zoomOnScroll: false,
+          minZoom: 0.1,
+          maxZoom: 4,
           children: [
-            /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
-            /* @__PURE__ */ jsx(
-              Background,
+            !isInline && /* @__PURE__ */ jsx(
+              ZoomSlider,
               {
-                variant: variant === "nested" ? BackgroundVariant.Lines : BackgroundVariant.Dots,
-                gap: 12,
-                size: 0.5,
-                color: variant === "nested" ? "var(--border1)" : void 0
+                position: "top-right",
+                className: "m-2!",
+                compact: hasCompactZoom,
+                onFitView: () => fitView({ ...workflowFitOptions(leftInset), duration: workflowCameraDuration() })
               }
-            )
+            ),
+            groups && /* @__PURE__ */ jsx(WorkflowGraphGroups, { nodes: nodes ?? [], groups }),
+            !isInline && /* @__PURE__ */ jsx(Background, { id: backgroundId, variant: BackgroundVariant.Dots, gap: 12, size: 0.5 })
           ]
         }
       )
@@ -693,9 +1011,9 @@ function WorkflowGraphCanvas({
 }
 
 function WorkflowNodeFrame({ withoutTopHandle, withoutBottomHandle, children }) {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
-    children,
+    /* @__PURE__ */ jsx("div", { className: "nodrag pointer-events-auto", children }),
     !withoutBottomHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
   ] });
 }
@@ -703,36 +1021,50 @@ function WorkflowNodeFrame({ withoutTopHandle, withoutBottomHandle, children })
 function WorkflowDebugControls({
   isStreaming,
   canRunNextStep,
+  nextStepLabel,
+  disabled,
+  children,
   onRunNextStep,
   onContinueRun
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-testid": "workflow-debug-step-controls", children: [
-    /* @__PURE__ */ jsxs(
-      Button,
-      {
-        type: "button",
-        variant: "primary",
-        className: "w-full",
-        onClick: onRunNextStep,
-        disabled: !canRunNextStep || isStreaming,
-        children: [
-          isStreaming ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(PlayIcon, {}) }),
-          "Run next step"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        className: "w-full",
-        onClick: onContinueRun,
-        disabled: isStreaming,
-        icon: /* @__PURE__ */ jsx(StepForwardIcon, {}),
-        children: "Continue full run"
-      }
-    )
+  const nextStepFallback = canRunNextStep ? "Ready to advance" : "Next step unavailable";
+  const actionsDisabled = !canRunNextStep || isStreaming || disabled;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-3", "data-testid": "workflow-debug-step-controls", children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-border1/50 bg-surface2 rounded-xl border p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-neutral3", children: "Next step" }),
+        /* @__PURE__ */ jsx(Badge, { size: "sm", icon: /* @__PURE__ */ jsx(Pause, {}), emphasis: "muted", children: "Step by step" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-ui-md text-neutral5 font-medium break-words", "aria-live": "polite", children: nextStepLabel || nextStepFallback })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "primary",
+          className: "min-w-0 flex-1",
+          "aria-label": "Run next step",
+          onClick: onRunNextStep,
+          disabled: actionsDisabled,
+          icon: isStreaming ? /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin" }) : /* @__PURE__ */ jsx(StepForwardIcon, {}),
+          children: isStreaming ? "Running step…" : "Run next step"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-md",
+          tooltip: "Continue full run",
+          onClick: onContinueRun,
+          disabled: actionsDisabled,
+          children: /* @__PURE__ */ jsx(PlayIcon, {})
+        }
+      ),
+      children
+    ] })
   ] });
 }
 
@@ -750,27 +1082,8 @@ function WorkflowGraphPlaceholder(props) {
   ] }) });
 }
 
-function WorkflowConditionCard({ conditions, initiallyOpen = true, ...props }) {
-  const [isOpen, setOpen] = useState(initiallyOpen);
-  const [openDialog, setOpenDialog] = useState(false);
-  const [dialogCondition, setDialogCondition] = useState();
-  return /* @__PURE__ */ jsx(
-    WorkflowConditionCardView,
-    {
-      ...props,
-      type: conditions[0]?.type,
-      conditions,
-      isOpen,
-      onOpenChange: setOpen,
-      openDialog,
-      onOpenDialogChange: setOpenDialog,
-      dialogCondition,
-      onConditionClick: (condition) => {
-        setDialogCondition(condition);
-        setOpenDialog(true);
-      }
-    }
-  );
+function WorkflowConditionCard({ conditions, ...props }) {
+  return /* @__PURE__ */ jsx(WorkflowConditionCardView, { ...props, type: conditions[0]?.type, conditions });
 }
 
 function WorkflowStepActions({ children }) {
@@ -796,7 +1109,7 @@ function WorkflowStepActions({ children }) {
 }
 
 const actions = {
-  nested: { icon: LayersIcon, label: "View nested graph", activeLabel: "Hide nested graph" },
+  nested: { icon: PanelRightIcon, label: "View nested graph", activeLabel: "Hide nested graph" },
   map: { icon: BracesIcon, label: "Map config", activeLabel: "Hide map config" },
   timeTravel: { icon: Clock3Icon, label: "Time travel" },
   runStep: { icon: PlayIcon, label: "Run step" },
@@ -815,5 +1128,5 @@ function WorkflowStepAction({ action, isActive, onSelect }) {
   ] });
 }
 
-export { BADGE_COLORS, BADGE_ICONS, WORKFLOW_BOUNDARY_NODE_TYPE, WORKFLOW_DATA_EDGE_TYPE, WorkflowBoundaryNode, WorkflowCardBadges, WorkflowCardStatusIcon, WorkflowClock, WorkflowCodeContent, WorkflowConditionCard, WorkflowConditionCardView, WorkflowConditionCode, WorkflowConditionDialog, WorkflowDataEdgeView, WorkflowDebugControls, WorkflowEdgeDataButton, WorkflowGraphCanvas, WorkflowGraphPlaceholder, WorkflowNodeFrame, WorkflowStepAction, WorkflowStepActions, WorkflowStepCardView, getConditionIconAndColor, getConditionIndicator, getNodeBadgeInfo, getNodeIndicators, getWorkflowCardAccentColor };
+export { BADGE_COLORS, BADGE_ICONS, WORKFLOW_BOUNDARY_NODE_TYPE, WORKFLOW_DATA_EDGE_TYPE, WorkflowBoundaryNode, WorkflowCanvasInsetContext, WorkflowClock, WorkflowCodeContent, WorkflowConditionCard, WorkflowConditionCardView, WorkflowDataEdgeView, WorkflowDebugControls, WorkflowEdgeDataButton, WorkflowGraphCanvas, WorkflowGraphPlaceholder, WorkflowNodeFrame, WorkflowStepAction, WorkflowStepActions, WorkflowStepCardView, WorkflowTypeBadge, getConditionIconAndColor, getConditionIndicator, getNodeBadgeInfo, getNodeIndicators, workflowFitOptions };
 //# sourceMappingURL=Workflow.es.js.map