@mastra/playground-ui 5.1.1-alpha.4 → 5.1.1-alpha.5

package/dist/index.es.js

@@ -7340,14 +7340,17 @@ const getStepNodeAndEdge = ({
   xIndex,
   yIndex,
   prevNodeIds,
+  prevStepIds,
   nextStepFlow,
   condition,
   allPrevNodeIds
 }) => {
   let nextNodeIds = [];
+  let nextStepIds = [];
   if (nextStepFlow?.type === "step" || nextStepFlow?.type === "foreach" || nextStepFlow?.type === "loop") {
     const nextStepId = allPrevNodeIds?.includes(nextStepFlow.step.id) ? `${nextStepFlow.step.id}-${yIndex + 1}` : nextStepFlow.step.id;
     nextNodeIds = [nextStepId];
+    nextStepIds = [nextStepFlow.step.id];
   }
   if (nextStepFlow?.type === "parallel") {
     nextNodeIds = nextStepFlow?.steps.map((step) => {
@@ -7355,9 +7358,11 @@ const getStepNodeAndEdge = ({
       const nextStepId = allPrevNodeIds?.includes(stepId) ? `${stepId}-${yIndex + 1}` : stepId;
       return nextStepId;
     }) || [];
+    nextStepIds = nextStepFlow?.steps.map((step) => step.step.id) || [];
   }
   if (nextStepFlow?.type === "conditional") {
     nextNodeIds = nextStepFlow?.serializedConditions.map((cond) => cond.id) || [];
+    nextStepIds = nextStepFlow?.steps?.map((step) => step.step.id) || [];
   }
   if (stepFlow.type === "step" || stepFlow.type === "foreach") {
     const hasGraph = stepFlow.step.component === "WORKFLOW";
@@ -7370,6 +7375,8 @@ const getStepNodeAndEdge = ({
           type: "condition-node",
           data: {
             label: condition.id,
+            previousStepId: prevStepIds[prevStepIds.length - 1],
+            nextStepId: stepFlow.step.id,
             withoutTopHandle: false,
             withoutBottomHandle: !nextNodeIds.length,
             isLarge: true,
@@ -7386,38 +7393,43 @@ const getStepNodeAndEdge = ({
           description: stepFlow.step.description,
           withoutTopHandle: condition ? false : !prevNodeIds.length,
           withoutBottomHandle: !nextNodeIds.length,
-          stepGraph: hasGraph ? stepFlow.step.serializedStepFlow : void 0
+          stepGraph: hasGraph ? stepFlow.step.serializedStepFlow : void 0,
+          mapConfig: stepFlow.step.mapConfig
         }
       }
     ];
     const edges = [
       ...!prevNodeIds.length ? [] : condition ? [
-        ...prevNodeIds.map((prevNodeId) => ({
+        ...prevNodeIds.map((prevNodeId, i) => ({
           id: `e${prevNodeId}-${condition.id}`,
           source: prevNodeId,
+          data: { previousStepId: prevStepIds[i], nextStepId: stepFlow.step.id },
           target: condition.id,
           ...defaultEdgeOptions
         })),
         {
           id: `e${condition.id}-${nodeId}`,
           source: condition.id,
+          data: { previousStepId: prevStepIds[prevStepIds.length - 1], nextStepId: stepFlow.step.id },
           target: nodeId,
           ...defaultEdgeOptions
         }
-      ] : prevNodeIds.map((prevNodeId) => ({
+      ] : prevNodeIds.map((prevNodeId, i) => ({
         id: `e${prevNodeId}-${nodeId}`,
         source: prevNodeId,
+        data: { previousStepId: prevStepIds[i], nextStepId: stepFlow.step.id },
         target: nodeId,
         ...defaultEdgeOptions
       })),
-      ...!nextNodeIds.length ? [] : nextNodeIds.map((nextNodeId) => ({
+      ...!nextNodeIds.length ? [] : nextNodeIds.map((nextNodeId, i) => ({
         id: `e${nodeId}-${nextNodeId}`,
         source: nodeId,
+        data: { previousStepId: stepFlow.step.id, nextStepId: nextStepIds[i] },
         target: nextNodeId,
         ...defaultEdgeOptions
       }))
     ];
-    return { nodes, edges, nextPrevNodeIds: [nodeId] };
+    return { nodes, edges, nextPrevNodeIds: [nodeId], nextPrevStepIds: [stepFlow.step.id] };
   }
   if (stepFlow.type === "loop") {
     const { step: _step, serializedCondition, loopType } = stepFlow;
@@ -7441,6 +7453,9 @@ const getStepNodeAndEdge = ({
         type: "condition-node",
         data: {
           label: serializedCondition.id,
+          // conditionStepId: _step.id,
+          previousStepId: _step.id,
+          nextStepId: nextStepIds[0],
           withoutTopHandle: false,
           withoutBottomHandle: !nextNodeIds.length,
           isLarge: true,
@@ -7449,67 +7464,85 @@ const getStepNodeAndEdge = ({
       }
     ];
     const edges = [
-      ...!prevNodeIds.length ? [] : prevNodeIds.map((prevNodeId) => ({
+      ...!prevNodeIds.length ? [] : prevNodeIds.map((prevNodeId, i) => ({
         id: `e${prevNodeId}-${_step.id}`,
         source: prevNodeId,
+        data: { previousStepId: prevStepIds[i], nextStepId: _step.id },
         target: _step.id,
         ...defaultEdgeOptions
       })),
       {
         id: `e${_step.id}-${serializedCondition.id}`,
         source: _step.id,
+        data: { previousStepId: _step.id, nextStepId: nextStepIds[0] },
         target: serializedCondition.id,
         ...defaultEdgeOptions
       },
-      ...!nextNodeIds.length ? [] : nextNodeIds.map((nextNodeId) => ({
+      ...!nextNodeIds.length ? [] : nextNodeIds.map((nextNodeId, i) => ({
         id: `e${serializedCondition.id}-${nextNodeId}`,
         source: serializedCondition.id,
+        data: { previousStepId: _step.id, nextStepId: nextStepIds[i] },
         target: nextNodeId,
         ...defaultEdgeOptions
       }))
     ];
-    return { nodes, edges, nextPrevNodeIds: [serializedCondition.id] };
+    return { nodes, edges, nextPrevNodeIds: [serializedCondition.id], nextPrevStepIds: [_step.id] };
   }
   if (stepFlow.type === "parallel") {
     let nodes = [];
     let edges = [];
+    let nextPrevStepIds = [];
     stepFlow.steps.forEach((_stepFlow, index) => {
-      const { nodes: _nodes, edges: _edges } = getStepNodeAndEdge({
+      const {
+        nodes: _nodes,
+        edges: _edges,
+        nextPrevStepIds: _nextPrevStepIds
+      } = getStepNodeAndEdge({
         stepFlow: _stepFlow,
         xIndex: index,
         yIndex,
         prevNodeIds,
+        prevStepIds,
         nextStepFlow,
         allPrevNodeIds
       });
       nodes.push(..._nodes);
       edges.push(..._edges);
+      nextPrevStepIds.push(..._nextPrevStepIds);
     });
-    return { nodes, edges, nextPrevNodeIds: nodes.map((node) => node.id) };
+    return { nodes, edges, nextPrevNodeIds: nodes.map((node) => node.id), nextPrevStepIds };
   }
   if (stepFlow.type === "conditional") {
     let nodes = [];
     let edges = [];
+    let nextPrevStepIds = [];
     stepFlow.steps.forEach((_stepFlow, index) => {
-      const { nodes: _nodes, edges: _edges } = getStepNodeAndEdge({
+      const {
+        nodes: _nodes,
+        edges: _edges,
+        nextPrevStepIds: _nextPrevStepIds
+      } = getStepNodeAndEdge({
         stepFlow: _stepFlow,
         xIndex: index,
         yIndex,
         prevNodeIds,
+        prevStepIds,
         nextStepFlow,
         condition: stepFlow.serializedConditions[index],
         allPrevNodeIds
       });
       nodes.push(..._nodes);
       edges.push(..._edges);
+      nextPrevStepIds.push(..._nextPrevStepIds);
     });
     return {
       nodes,
       edges,
-      nextPrevNodeIds: nodes.filter(({ type }) => type !== "condition-node").map((node) => node.id)
+      nextPrevNodeIds: nodes.filter(({ type }) => type !== "condition-node").map((node) => node.id),
+      nextPrevStepIds
     };
   }
-  return { nodes: [], edges: [], nextPrevNodeIds: [] };
+  return { nodes: [], edges: [], nextPrevNodeIds: [], nextPrevStepIds: [] };
 };
 const constructNodesAndEdges = ({
   stepGraph
@@ -7523,23 +7556,27 @@ const constructNodesAndEdges = ({
   let nodes = [];
   let edges = [];
   let prevNodeIds = [];
+  let prevStepIds = [];
   let allPrevNodeIds = [];
   for (let index = 0; index < stepGraph.length; index++) {
     const {
       nodes: _nodes,
       edges: _edges,
-      nextPrevNodeIds
+      nextPrevNodeIds,
+      nextPrevStepIds
     } = getStepNodeAndEdge({
       stepFlow: stepGraph[index],
       xIndex: index,
       yIndex: index,
       prevNodeIds,
+      prevStepIds,
       nextStepFlow: index === stepGraph.length - 1 ? void 0 : stepGraph[index + 1],
       allPrevNodeIds
     });
     nodes.push(..._nodes);
     edges.push(..._edges);
     prevNodeIds = nextPrevNodeIds;
+    prevStepIds = nextPrevStepIds;
     allPrevNodeIds.push(...prevNodeIds);
   }
   const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(nodes, edges);
@@ -7619,105 +7656,6 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-function WorkflowConditionNode({ data }) {
-  const { conditions } = data;
-  const [open, setOpen] = useState(true);
-  const [openDialog, setOpenDialog] = useState(false);
-  const type = conditions[0]?.type;
-  const isCollapsible = (conditions.some((condition) => condition.fnString) || conditions?.length > 1) && type !== "else";
-  return /* @__PURE__ */ jsxs(
-    Collapsible,
-    {
-      open: !isCollapsible ? true : open,
-      onOpenChange: (_open) => {
-        if (isCollapsible) {
-          setOpen(_open);
-        }
-      },
-      className: cn("bg-mastra-bg-3 rounded-md w-[274px] flex flex-col p-2 gap-2"),
-      children: [
-        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
-        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: "xs",
-              weight: "medium",
-              className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px] w-fit",
-              children: type?.toUpperCase()
-            }
-          ),
-          isCollapsible && /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: cn("w-4 h-4 transition-transform", {
-                "transform rotate-180": open
-              })
-            }
-          )
-        ] }),
-        type === "else" ? null : /* @__PURE__ */ jsx(CollapsibleContent, { className: "flex flex-col gap-2", children: conditions.map((condition, index) => {
-          return condition.fnString ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
-              "pre",
-              {
-                className: `${className} relative font-mono text-sm overflow-x-auto p-3 w-full cursor-pointer rounded-lg mt-2`,
-                style: {
-                  ...style,
-                  backgroundColor: "transparent",
-                  border: "1px solid #343434",
-                  maxHeight: "9.62rem"
-                },
-                onClick: () => setOpenDialog(true),
-                children: tokens.map((line, i) => /* @__PURE__ */ jsxs("div", { ...getLineProps({ line }), children: [
-                  /* @__PURE__ */ jsx("span", { className: "inline-block mr-2 text-muted-foreground", children: i + 1 }),
-                  line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
-                ] }, i))
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: setOpenDialog, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[30rem] bg-[#121212] p-[0.5rem]", children: [
-              /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Condition Function" }),
-              /* @__PURE__ */ jsx(ScrollArea, { className: "w-full p-2", maxHeight: "400px", children: /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
-                "pre",
-                {
-                  className: `${className} relative font-mono text-sm overflow-x-auto p-3 w-full rounded-lg mt-2 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: "inline-block mr-2 text-muted-foreground", children: i + 1 }),
-                    line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
-                  ] }, i))
-                }
-              ) }) })
-            ] }) })
-          ] }, `${condition.fnString}-${index}`) : /* @__PURE__ */ jsx(Fragment$1, { children: condition.ref?.step ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            index === 0 ? null : /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: "xs",
-                weight: "medium",
-                className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px]",
-                children: condition.conj?.toLocaleUpperCase() || "WHEN"
-              }
-            ),
-            /* @__PURE__ */ jsxs(Text, { size: "xs", className: " text-mastra-el-3 flex-1", children: [
-              condition.ref.step.id || condition.ref.step,
-              "'s ",
-              condition.ref.path,
-              " ",
-              Object.entries(condition.query).map(([key, value]) => `${key} ${String(value)}`)
-            ] })
-          ] }) : null }, `${condition.ref?.path}-${index}`);
-        }) }),
-        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
-      ]
-    }
-  );
-}
-
 function convertWorkflowRunStateToWatchResult(runState) {
   const runId = runState.runId;
   const steps = {};
@@ -7826,12 +7764,156 @@ const useCurrentRun = () => {
   return { steps, isRunning: Boolean(context.payload) };
 };
 
+function WorkflowConditionNode({ data }) {
+  const { conditions, previousStepId, nextStepId } = data;
+  const [open, setOpen] = useState(true);
+  const [openDialog, setOpenDialog] = useState(false);
+  const type = conditions[0]?.type;
+  const isCollapsible = (conditions.some((condition) => condition.fnString) || conditions?.length > 1) && type !== "else";
+  const { steps } = useCurrentRun();
+  const previousStep = steps[previousStepId];
+  const nextStep = steps[nextStepId];
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open: !isCollapsible ? true : open,
+      onOpenChange: (_open) => {
+        if (isCollapsible) {
+          setOpen(_open);
+        }
+      },
+      className: cn(
+        "bg-mastra-bg-3 rounded-md w-[274px] flex flex-col p-2 gap-2 border-sm border-border1",
+        previousStep?.status === "success" && nextStep && "ring-2 ring-accent1",
+        previousStep?.status === "failed" && nextStep && "ring-2 ring-accent2"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
+        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              weight: "medium",
+              className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px] w-fit",
+              children: type?.toUpperCase()
+            }
+          ),
+          isCollapsible && /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn("w-4 h-4 transition-transform", {
+                "transform rotate-180": open
+              })
+            }
+          )
+        ] }),
+        type === "else" ? null : /* @__PURE__ */ jsx(CollapsibleContent, { className: "flex flex-col gap-2", children: conditions.map((condition, index) => {
+          return condition.fnString ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
+              "pre",
+              {
+                className: `${className} relative font-mono text-sm overflow-x-auto p-3 w-full cursor-pointer rounded-lg mt-2`,
+                style: {
+                  ...style,
+                  backgroundColor: "transparent",
+                  border: "1px solid #343434",
+                  maxHeight: "9.62rem"
+                },
+                onClick: () => setOpenDialog(true),
+                children: tokens.map((line, i) => /* @__PURE__ */ jsxs("div", { ...getLineProps({ line }), children: [
+                  /* @__PURE__ */ jsx("span", { className: "inline-block mr-2 text-muted-foreground", children: i + 1 }),
+                  line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
+                ] }, i))
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: setOpenDialog, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[30rem] bg-[#121212] p-[0.5rem]", children: [
+              /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Condition Function" }),
+              /* @__PURE__ */ jsx(ScrollArea, { className: "w-full p-2", maxHeight: "400px", children: /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
+                "pre",
+                {
+                  className: `${className} relative font-mono text-sm overflow-x-auto p-3 w-full rounded-lg mt-2 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: "inline-block mr-2 text-muted-foreground", children: i + 1 }),
+                    line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
+                  ] }, i))
+                }
+              ) }) })
+            ] }) })
+          ] }, `${condition.fnString}-${index}`) : /* @__PURE__ */ jsx(Fragment$1, { children: condition.ref?.step ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            index === 0 ? null : /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "xs",
+                weight: "medium",
+                className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px]",
+                children: condition.conj?.toLocaleUpperCase() || "WHEN"
+              }
+            ),
+            /* @__PURE__ */ jsxs(Text, { size: "xs", className: " text-mastra-el-3 flex-1", children: [
+              condition.ref.step.id || condition.ref.step,
+              "'s ",
+              condition.ref.path,
+              " ",
+              Object.entries(condition.query).map(([key, value]) => `${key} ${String(value)}`)
+            ] })
+          ] }) : null }, `${condition.ref?.path}-${index}`);
+        }) }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
+      ]
+    }
+  );
+}
+
+const Clock = ({ startedAt, endedAt }) => {
+  const [time, setTime] = useState(startedAt);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(Date.now());
+    }, 100);
+    return () => clearInterval(interval);
+  }, [startedAt]);
+  const timeDiff = endedAt ? endedAt - startedAt : time - startedAt;
+  return /* @__PURE__ */ jsxs("span", { className: "text-xs text-icon3", children: [
+    toSigFigs(timeDiff, 3),
+    "ms"
+  ] });
+};
+
+const CodeDialogContent = ({ data }) => {
+  const theme = useCodemirrorTheme();
+  if (typeof data !== "string") {
+    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(data, null, 2) }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: JSON.stringify(data, null, 2), theme, extensions: [jsonLanguage] }) })
+    ] });
+  }
+  try {
+    const json = JSON.parse(data);
+    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: JSON.stringify(json, null, 2), theme, extensions: [jsonLanguage] }) })
+    ] });
+  } catch (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: data, theme, extensions: [] }) })
+    ] });
+  }
+};
+
 function WorkflowDefaultNode({ data }) {
   const [isInputOpen, setIsInputOpen] = useState(false);
   const [isOutputOpen, setIsOutputOpen] = useState(false);
   const [isErrorOpen, setIsErrorOpen] = useState(false);
+  const [isMapConfigOpen, setIsMapConfigOpen] = useState(false);
   const { steps, isRunning } = useCurrentRun();
-  const { label, description, withoutTopHandle, withoutBottomHandle } = data;
+  const { label, description, withoutTopHandle, withoutBottomHandle, mapConfig } = data;
   const step = steps[label];
   const dialogContentClass = "bg-surface2 rounded-lg border-sm border-border1 max-w-4xl w-full px-0";
   const dialogTitleClass = "border-b-sm border-border1 pb-4 px-6";
@@ -7840,13 +7922,13 @@ function WorkflowDefaultNode({ data }) {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx(
+        className: cn(
           "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
           step?.status === "success" && "ring-2 ring-accent1",
           step?.status === "failed" && "ring-2 ring-accent2"
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
             isRunning && /* @__PURE__ */ jsxs(Icon, { children: [
               step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
               step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
@@ -7861,7 +7943,17 @@ function WorkflowDefaultNode({ data }) {
             ] })
           ] }),
           description && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
-          (step?.input || step?.output) && /* @__PURE__ */ jsxs("div", { className: "flex items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2", children: [
+          (step?.input || step?.output || step?.error || mapConfig) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
+            mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " map config"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
+              ] }) })
+            ] }),
             step?.input && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
               /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
@@ -7899,41 +7991,6 @@ function WorkflowDefaultNode({ data }) {
     !withoutBottomHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden", color: "red" } })
   ] });
 }
-const CodeDialogContent = ({ data }) => {
-  const theme = useCodemirrorTheme();
-  if (typeof data !== "string") {
-    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(data, null, 2) }) }),
-      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: JSON.stringify(data, null, 2), theme, extensions: [jsonLanguage] }) })
-    ] });
-  }
-  try {
-    const json = JSON.parse(data);
-    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
-      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: json, theme, extensions: [jsonLanguage] }) })
-    ] });
-  } catch (error) {
-    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
-      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: data, theme, extensions: [] }) })
-    ] });
-  }
-};
-const Clock = ({ startedAt, endedAt }) => {
-  const [time, setTime] = useState(startedAt);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTime(Date.now());
-    }, 100);
-    return () => clearInterval(interval);
-  }, [startedAt]);
-  const timeDiff = endedAt ? endedAt - startedAt : time - startedAt;
-  return /* @__PURE__ */ jsxs("span", { className: "text-xs text-icon3", children: [
-    toSigFigs(timeDiff, 3),
-    "ms"
-  ] });
-};
 
 function WorkflowAfterNode({ data }) {
   const { steps } = data;
@@ -9237,7 +9294,7 @@ function WorkflowNestedGraph({ stepGraph, open }) {
       }, 500);
     }
   }, [open]);
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full relative", children: isMounted ? /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full relative bg-surface1", children: isMounted ? /* @__PURE__ */ jsxs(
     ReactFlow,
     {
       nodes,
@@ -9324,14 +9381,88 @@ function WorkflowNestedGraphProvider({ children }) {
 }
 
 function WorkflowNestedNode({ data }) {
-  const { label, withoutTopHandle, withoutBottomHandle, stepGraph } = data;
+  const [isInputOpen, setIsInputOpen] = useState(false);
+  const [isOutputOpen, setIsOutputOpen] = useState(false);
+  const [isErrorOpen, setIsErrorOpen] = useState(false);
+  const [isMapConfigOpen, setIsMapConfigOpen] = useState(false);
+  const { steps, isRunning } = useCurrentRun();
   const { showNestedGraph } = useContext(WorkflowNestedGraphContext);
-  return /* @__PURE__ */ jsxs("div", { className: cn("bg-[rgba(29,29,29,0.5)] rounded-md h-full overflow-scroll w-[274px]"), children: [
+  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig } = data;
+  const step = steps[label];
+  const dialogContentClass = "bg-surface2 rounded-lg border-sm border-border1 max-w-4xl w-full px-0";
+  const dialogTitleClass = "border-b-sm border-border1 pb-4 px-6";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ jsx("div", { className: "p-2 cursor-pointer", onClick: () => showNestedGraph({ label, stepGraph }), children: /* @__PURE__ */ jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-1.5 rounded-sm p-2 cursor-pointer", children: [
-      /* @__PURE__ */ jsx(Workflow, { className: "text-current w-4 h-4" }),
-      /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: label })
-    ] }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
+          step?.status === "success" && "ring-2 ring-accent1",
+          step?.status === "failed" && "ring-2 ring-accent2"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
+            isRunning && /* @__PURE__ */ jsxs(Icon, { children: [
+              step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
+              step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-icon3" }),
+              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon6 animate-spin" }),
+              !step && /* @__PURE__ */ jsx(CircleDashed, { className: "text-icon2" })
+            ] }),
+            /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "text-icon6 font-medium inline-flex items-center gap-1 justify-between w-full", children: [
+              label,
+              " ",
+              step?.startedAt && /* @__PURE__ */ jsx(Clock, { startedAt: step.startedAt, endedAt: step.endedAt })
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
+            /* @__PURE__ */ jsx(Button, { onClick: () => showNestedGraph({ label, stepGraph }), children: "View workflow" }),
+            mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " map config"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
+              ] }) })
+            ] }),
+            step?.input && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " input"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.input }) })
+              ] }) })
+            ] }),
+            step?.output && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " output"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.output }) })
+              ] }) })
+            ] }),
+            step?.error && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " error"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step?.error }) })
+              ] }) })
+            ] })
+          ] })
+        ]
+      }
+    ),
     !withoutBottomHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
   ] });
 }
@@ -9356,7 +9487,7 @@ function WorkflowGraphInner({ workflow }) {
         ...e,
         style: {
           ...e.style,
-          stroke: steps[e.source]?.status === "success" ? "#22c55e" : void 0
+          stroke: steps[e.data?.previousStepId]?.status === "success" && steps[e.data?.nextStepId] ? "#22c55e" : void 0
         }
       })),
       nodeTypes,