@mastra/playground-ui 5.1.1 → 5.1.2-alpha.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, ComposerPrimitive, useAttachment, AttachmentPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, X, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Minus, Maximize, CirclePause } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, X, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Minus, Maximize, CirclePause } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useEffect, memo, useMemo, useRef, createContext, useContext, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -3341,8 +3341,8 @@ const ChevronIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "16", height:
   {
     d: "M4.60059 6.30005L8.00098 9.70005L11.3996 6.30142",
     stroke: "currentColor",
-    "stroke-width": "1.5",
-    "stroke-linecap": "round"
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
   }
 ) });
 
@@ -6043,13 +6043,15 @@ const refineTraces = (traces, isWorkflow = false) => {
       parentSpanId: parentSpan?.id === span.id ? null : span?.parentSpanId
     }));
     const failedStatus = value.find((span) => span.status.code !== 0)?.status;
+    const runId = value?.[0]?.attributes?.runId;
     return {
       traceId: key,
       serviceName: parentSpan?.name || key,
       duration: parentSpan?.duration || value.reduce((acc, curr) => acc + curr.duration, 0),
       status: failedStatus || parentSpan?.status || value[0].status,
       started: value[0].startTime,
-      trace: enrichedSpans
+      trace: enrichedSpans,
+      runId: runId ? String(runId) : void 0
     };
   });
   return tracesData;
@@ -6639,12 +6641,25 @@ const NetworkChat = ({ agentId, memory }) => {
   return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, modelSettings, children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(Thread, { ToolFallback }) }) });
 };
 
-function WorkflowTraces({ traces, isLoading, error }) {
-  return /* @__PURE__ */ jsx(WorkflowTracesInner, { traces, isLoading, error });
+function WorkflowTraces({ traces, isLoading, error, runId, stepName }) {
+  return /* @__PURE__ */ jsx(WorkflowTracesInner, { traces, isLoading, error, runId, stepName });
 }
-function WorkflowTracesInner({ traces, isLoading, error }) {
+function WorkflowTracesInner({ traces, isLoading, error, runId, stepName }) {
+  const hasRunRef = useRef(false);
   const [sidebarWidth, setSidebarWidth] = useState(100);
-  const { isOpen: open } = useContext(TraceContext);
+  const { isOpen: open, setTrace, setIsOpen, setSpan } = useContext(TraceContext);
+  useEffect(() => {
+    if (hasRunRef.current) return;
+    if (!runId || !stepName) return;
+    const matchingTrace = traces.find((trace) => trace.runId === runId);
+    if (!matchingTrace) return;
+    const matchingSpan = matchingTrace.trace.find((span) => span.name.includes(stepName));
+    if (!matchingSpan) return;
+    setTrace(matchingTrace.trace);
+    setSpan(matchingSpan);
+    setIsOpen(true);
+    hasRunRef.current = true;
+  }, [runId, traces, setTrace]);
   return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
     /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll w-full", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading, error }) }),
     open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
@@ -7761,7 +7776,88 @@ const useCurrentRun = () => {
       }
     };
   }, {});
-  return { steps, isRunning: Boolean(context.payload) };
+  return { steps, isRunning: Boolean(context.payload), runId: context.result?.runId };
+};
+
+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: [] }) })
+    ] });
+  }
+};
+
+const WorkflowStepActionBar = ({
+  input,
+  output,
+  error,
+  mapConfig,
+  stepName,
+  onShowTrace
+}) => {
+  const [isInputOpen, setIsInputOpen] = useState(false);
+  const [isOutputOpen, setIsOutputOpen] = useState(false);
+  const [isErrorOpen, setIsErrorOpen] = useState(false);
+  const [isMapConfigOpen, setIsMapConfigOpen] = useState(false);
+  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__ */ jsx(Fragment, { children: (input || output || 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: [
+          stepName,
+          " map config"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: mapConfig }) })
+      ] }) })
+    ] }),
+    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: [
+          stepName,
+          " input"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: input }) })
+      ] }) })
+    ] }),
+    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: [
+          stepName,
+          " output"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: output }) })
+      ] }) })
+    ] }),
+    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: [
+          stepName,
+          " error"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: error }) })
+      ] }) })
+    ] }),
+    onShowTrace && /* @__PURE__ */ jsx(Button, { onClick: onShowTrace, children: "Show trace" })
+  ] }) });
 };
 
 function WorkflowConditionNode({ data }) {
@@ -7773,101 +7869,98 @@ function WorkflowConditionNode({ data }) {
   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,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "bg-surface3 rounded-lg w-[300px] border-sm border-border1",
+          previousStep?.status === "success" && nextStep && "ring-2 ring-accent1",
+          previousStep?.status === "failed" && nextStep && "ring-2 ring-accent2"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            Collapsible,
             {
-              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()
+              open: !isCollapsible ? true : open,
+              onOpenChange: (_open) => {
+                if (isCollapsible) {
+                  setOpen(_open);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full px-3 py-2", children: [
+                  /* @__PURE__ */ jsx(Badge$1, { icon: type === "when" ? /* @__PURE__ */ jsx(Network, { className: "text-[#ECB047]" }) : null, children: type?.toUpperCase() }),
+                  isCollapsible && /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      className: cn("transition-transform text-icon3", {
+                        "transform rotate-180": open
+                      })
+                    }
+                  ) })
+                ] }),
+                type === "else" ? null : /* @__PURE__ */ jsx(CollapsibleContent, { className: "flex flex-col gap-2 pb-2", children: conditions.map((condition, index) => {
+                  return condition.fnString ? /* @__PURE__ */ jsxs("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: `${className} relative font-mono p-3 w-full cursor-pointer rounded-lg text-xs !bg-surface4 overflow-scroll`,
+                        onClick: () => setOpenDialog(true),
+                        style,
+                        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-surface2 p-4", children: [
+                      /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Condition Function" }),
+                      /* @__PURE__ */ jsx(ScrollArea, { className: "w-full p-2 pt-4", 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(Badge$1, { icon: /* @__PURE__ */ jsx(Network, { className: "text-[#ECB047]" }), 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}`);
+                }) })
+              ]
             }
           ),
-          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" } })
-      ]
-    }
-  );
+          /* @__PURE__ */ jsx(WorkflowStepActionBar, { stepName: nextStepId, input: previousStep?.output, mapConfig: data.mapConfig })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
+  ] });
 }
 
 const Clock = ({ startedAt, endedAt }) => {
@@ -7885,38 +7978,15 @@ const Clock = ({ startedAt, endedAt }) => {
   ] });
 };
 
-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, 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";
+function WorkflowDefaultNode({
+  data,
+  onShowTrace,
+  parentWorkflowName
+}) {
+  const { steps, isRunning, runId } = useCurrentRun();
+  const { label, description, withoutTopHandle, withoutBottomHandle } = data;
+  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
+  const step = steps[fullLabel];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxs(
@@ -7943,48 +8013,17 @@ function WorkflowDefaultNode({ data }) {
             ] })
           ] }),
           description && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
-          (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: [
-                /* @__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 }) })
-              ] }) })
-            ] })
-          ] })
+          /* @__PURE__ */ jsx(
+            WorkflowStepActionBar,
+            {
+              stepName: label,
+              input: step?.input,
+              output: step?.output,
+              error: step?.error,
+              mapConfig: data.mapConfig,
+              onShowTrace: runId ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0
+            }
+          )
         ]
       }
     ),
@@ -9273,19 +9312,20 @@ const ZoomSlider = forwardRef(({ className, ...props }) => {
 });
 ZoomSlider.displayName = "ZoomSlider";
 
-function WorkflowNestedGraph({ stepGraph, open }) {
+function WorkflowNestedGraph({ stepGraph, open, workflowName }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
     stepGraph
   });
   const [isMounted, setIsMounted] = useState(false);
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
+  const { steps } = useCurrentRun();
   const nodeTypes = {
-    "default-node": WorkflowDefaultNode,
+    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, ...props }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": WorkflowNestedNode
+    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, ...props })
   };
   useEffect(() => {
     if (open) {
@@ -9298,7 +9338,13 @@ function WorkflowNestedGraph({ stepGraph, open }) {
     ReactFlow,
     {
       nodes,
-      edges,
+      edges: edges.map((e) => ({
+        ...e,
+        style: {
+          ...e.style,
+          stroke: steps[`${workflowName}.${e.data?.previousStepId}`]?.status === "success" && steps[`${workflowName}.${e.data?.nextStepId}`] ? "#22c55e" : void 0
+        }
+      })),
       fitView: true,
       fitViewOptions: {
         maxZoom: 1
@@ -9324,6 +9370,7 @@ function WorkflowNestedGraphProvider({ children }) {
   const [parentStepGraphList, setParentStepGraphList] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
   const [label, setLabel] = useState("");
+  const [fullStep, setFullStep] = useState("");
   const [switching, setSwitching] = useState(false);
   const closeNestedGraph = () => {
     if (parentStepGraphList.length) {
@@ -9331,6 +9378,7 @@ function WorkflowNestedGraphProvider({ children }) {
       const lastStepGraph = parentStepGraphList[parentStepGraphList.length - 1];
       setStepGraph(lastStepGraph.stepGraph);
       setLabel(lastStepGraph.label);
+      setFullStep(lastStepGraph.fullStep);
       setParentStepGraphList(parentStepGraphList.slice(0, -1));
       setTimeout(() => {
         setSwitching(false);
@@ -9339,17 +9387,20 @@ function WorkflowNestedGraphProvider({ children }) {
       setOpenDialog(false);
       setStepGraph(null);
       setLabel("");
+      setFullStep("");
     }
   };
   const showNestedGraph = ({
     label: newLabel,
-    stepGraph: newStepGraph
+    stepGraph: newStepGraph,
+    fullStep: newFullStep
   }) => {
     if (stepGraph) {
       setSwitching(true);
-      setParentStepGraphList([...parentStepGraphList, { stepGraph, label }]);
+      setParentStepGraphList([...parentStepGraphList, { stepGraph, label, fullStep }]);
     }
     setLabel(newLabel);
+    setFullStep(newFullStep);
     setStepGraph(newStepGraph);
     setOpenDialog(true);
     setTimeout(() => {
@@ -9373,14 +9424,17 @@ function WorkflowNestedGraphProvider({ children }) {
               " workflow"
             ] })
           ] }),
-          switching ? /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowNestedGraph, { stepGraph, open: openDialog }) })
+          switching ? /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowNestedGraph, { stepGraph, open: openDialog, workflowName: fullStep }) })
         ] }) }) })
       ]
     }
   );
 }
 
-function WorkflowNestedNode({ data }) {
+function WorkflowNestedNode({
+  data,
+  parentWorkflowName
+}) {
   const [isInputOpen, setIsInputOpen] = useState(false);
   const [isOutputOpen, setIsOutputOpen] = useState(false);
   const [isErrorOpen, setIsErrorOpen] = useState(false);
@@ -9388,7 +9442,8 @@ function WorkflowNestedNode({ data }) {
   const { steps, isRunning } = useCurrentRun();
   const { showNestedGraph } = useContext(WorkflowNestedGraphContext);
   const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig } = data;
-  const step = steps[label];
+  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
+  const step = steps[fullLabel];
   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: [
@@ -9418,7 +9473,7 @@ function WorkflowNestedNode({ data }) {
           ] }),
           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" }),
+            /* @__PURE__ */ jsx(Button, { onClick: () => showNestedGraph({ label, fullStep: fullLabel, 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: [
@@ -9467,13 +9522,13 @@ function WorkflowNestedNode({ data }) {
   ] });
 }
 
-function WorkflowGraphInner({ workflow }) {
+function WorkflowGraphInner({ workflow, onShowTrace }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
-  const { steps } = useCurrentRun();
+  const { steps, runId } = useCurrentRun();
   const nodeTypes = {
-    "default-node": WorkflowDefaultNode,
+    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { onShowTrace, ...props }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
@@ -9507,7 +9562,7 @@ function WorkflowGraphInner({ workflow }) {
   ) });
 }
 
-function WorkflowGraph({ workflowId, baseUrl }) {
+function WorkflowGraph({ workflowId, baseUrl, onShowTrace }) {
   const { workflow, isLoading } = useWorkflow(workflowId, baseUrl);
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
@@ -9522,7 +9577,7 @@ function WorkflowGraph({ workflowId, baseUrl }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowGraphInner, { workflow }) }) });
+  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowGraphInner, { workflow, onShowTrace }) }) });
 }
 
 const WorkflowStatus = ({ stepId, status }) => {