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

package/dist/index.cjs.js

@@ -28,6 +28,7 @@ const dateFns = require('date-fns');
 const TabsPrimitive = require('@radix-ui/react-tabs');
 const sonner = require('sonner');
 const react$1 = require('motion/react');
+const colors = require('./colors-Du4i-E0i.cjs');
 const uiUtils = require('@ai-sdk/ui-utils');
 const Markdown = require('react-markdown');
 const useDebounce = require('use-debounce');
@@ -50,6 +51,7 @@ const uuid = require('@lukeed/uuid');
 const zod = require('@autoform/zod');
 const LabelPrimitive = require('@radix-ui/react-label');
 const reactCodeBlock = require('react-code-block');
+const SliderPrimitive = require('@radix-ui/react-slider');
 const reactTable = require('@tanstack/react-table');
 
 function _interopNamespaceDefault(e) {
@@ -80,6 +82,7 @@ const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(Check
 const PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
 const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
+const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -4140,7 +4143,7 @@ const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) =
   DialogPrimitive__namespace.Title,
   {
     ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    className: clsx("text-lg font-semibold leading-none tracking-tight", className),
     ...props
   }
 ));
@@ -4855,23 +4858,47 @@ const defaultModelSettings$1 = {
   topP: 1
 };
 const AgentContext = React.createContext({});
-function AgentProvider({ agentId, children }) {
+function AgentProvider({
+  agentId,
+  defaultGenerateOptions,
+  defaultStreamOptions,
+  children
+}) {
   const {
     modelSettings: modelSettingsStore,
     setModelSettings: setModelSettingsStore,
     chatWithGenerate: chatWithGenerateStore,
     setChatWithGenerate: setChatWithGenerateStore
   } = useAgentStore();
-  const modelSettings = modelSettingsStore[agentId] || defaultModelSettings$1;
+  const chatWithGenerate = chatWithGenerateStore[agentId] || false;
+  const setChatWithGenerate = (chatWithGenerate2) => {
+    setChatWithGenerateStore({ [agentId]: chatWithGenerate2 });
+  };
+  const modelSettings = React.useMemo(() => {
+    if (modelSettingsStore[agentId]) return modelSettingsStore[agentId];
+    if (chatWithGenerate) {
+      return {
+        maxRetries: defaultGenerateOptions?.maxRetries ?? defaultModelSettings$1.maxRetries,
+        maxSteps: defaultGenerateOptions?.maxSteps ?? defaultModelSettings$1.maxSteps,
+        temperature: defaultGenerateOptions?.temperature ?? defaultModelSettings$1.temperature,
+        topP: defaultGenerateOptions?.topP ?? defaultModelSettings$1.topP,
+        ...defaultGenerateOptions
+      };
+    } else {
+      return {
+        maxRetries: defaultStreamOptions?.maxRetries ?? defaultModelSettings$1.maxRetries,
+        maxSteps: defaultStreamOptions?.maxSteps ?? defaultModelSettings$1.maxSteps,
+        temperature: defaultStreamOptions?.temperature ?? defaultModelSettings$1.temperature,
+        topP: defaultStreamOptions?.topP ?? defaultModelSettings$1.topP,
+        ...defaultStreamOptions
+      };
+    }
+  }, [agentId, defaultGenerateOptions, defaultStreamOptions, chatWithGenerate, modelSettingsStore]);
   const setModelSettings = (modelSettings2) => {
     setModelSettingsStore({ [agentId]: modelSettings2 });
   };
   const resetModelSettings = () => {
-    setModelSettings(defaultModelSettings$1);
-  };
-  const chatWithGenerate = chatWithGenerateStore[agentId] || false;
-  const setChatWithGenerate = (chatWithGenerate2) => {
-    setChatWithGenerateStore({ [agentId]: chatWithGenerate2 });
+    setModelSettingsStore({ [agentId]: null });
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     AgentContext.Provider,
@@ -5977,7 +6004,7 @@ const useCodemirrorTheme = () => {
         fontSize: "0.8rem",
         lineHighlight: "transparent",
         gutterBackground: "transparent",
-        gutterForeground: "#939393",
+        gutterForeground: colors.Colors.surface3,
         background: "transparent"
       },
       styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
@@ -7345,14 +7372,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) => {
@@ -7360,9 +7390,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";
@@ -7375,6 +7407,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,
@@ -7391,38 +7425,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;
@@ -7446,6 +7485,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,
@@ -7454,67 +7496,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
@@ -7528,23 +7588,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);
@@ -7624,12 +7688,123 @@ const ScrollBar = React__namespace.forwardRef(({ className, orientation = "verti
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
 
+function convertWorkflowRunStateToWatchResult(runState) {
+  const runId = runState.runId;
+  const steps = {};
+  const context = runState.context || {};
+  Object.entries(context).forEach(([stepId, stepResult]) => {
+    if (stepId !== "input" && "status" in stepResult) {
+      const result = stepResult;
+      steps[stepId] = {
+        status: result.status,
+        output: "output" in result ? result.output : void 0,
+        payload: "payload" in result ? result.payload : void 0,
+        resumePayload: "resumePayload" in result ? result.resumePayload : void 0,
+        error: "error" in result ? result.error : void 0,
+        startedAt: "startedAt" in result ? result.startedAt : Date.now(),
+        endedAt: "endedAt" in result ? result.endedAt : void 0,
+        suspendedAt: "suspendedAt" in result ? result.suspendedAt : void 0,
+        resumedAt: "resumedAt" in result ? result.resumedAt : void 0
+      };
+    }
+  });
+  const status = determineWorkflowStatus(steps);
+  return {
+    type: "watch",
+    payload: {
+      workflowState: {
+        status,
+        steps,
+        output: runState.value,
+        payload: context.input,
+        error: void 0
+      }
+    },
+    eventTimestamp: new Date(runState.timestamp),
+    runId
+  };
+}
+function determineWorkflowStatus(steps) {
+  const stepStatuses = Object.values(steps).map((step) => step.status);
+  if (stepStatuses.includes("failed")) {
+    return "failed";
+  }
+  if (stepStatuses.includes("suspended")) {
+    return "suspended";
+  }
+  if (stepStatuses.every((status) => status === "success")) {
+    return "success";
+  }
+  return "running";
+}
+
+const WorkflowRunContext = React.createContext({});
+function WorkflowRunProvider({
+  children,
+  snapshot
+}) {
+  const [legacyResult, setLegacyResult] = React.useState(null);
+  const [result, setResult] = React.useState(
+    () => snapshot ? convertWorkflowRunStateToWatchResult(snapshot) : null
+  );
+  const [payload, setPayload] = React.useState(null);
+  const clearData = () => {
+    setLegacyResult(null);
+    setResult(null);
+    setPayload(null);
+  };
+  React.useEffect(() => {
+    if (snapshot?.runId) {
+      setResult(convertWorkflowRunStateToWatchResult(snapshot));
+    } else {
+      setResult(null);
+    }
+  }, [snapshot?.runId ?? ""]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WorkflowRunContext.Provider,
+    {
+      value: {
+        legacyResult,
+        setLegacyResult,
+        result,
+        setResult,
+        payload,
+        setPayload,
+        clearData
+      },
+      children
+    }
+  );
+}
+
+const useCurrentRun = () => {
+  const context = React.useContext(WorkflowRunContext);
+  const workflowCurrentSteps = context.result?.payload?.workflowState?.steps ?? {};
+  const steps = Object.entries(workflowCurrentSteps).reduce((acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: {
+        error: value.error,
+        startedAt: value.startedAt,
+        endedAt: value.endedAt,
+        status: value.status,
+        output: value.output,
+        input: value.payload
+      }
+    };
+  }, {});
+  return { steps, isRunning: Boolean(context.payload) };
+};
+
 function WorkflowConditionNode({ data }) {
-  const { conditions } = data;
+  const { conditions, previousStepId, nextStepId } = data;
   const [open, setOpen] = React.useState(true);
   const [openDialog, setOpenDialog] = React.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__ */ jsxRuntime.jsxs(
     Collapsible,
     {
@@ -7639,7 +7814,11 @@ function WorkflowConditionNode({ data }) {
           setOpen(_open);
         }
       },
-      className: cn("bg-mastra-bg-3 rounded-md w-[274px] flex flex-col p-2 gap-2"),
+      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__ */ jsxRuntime.jsx(react$2.Handle, { type: "target", position: react$2.Position.Top, style: { visibility: "hidden" } }),
         /* @__PURE__ */ jsxRuntime.jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [
@@ -7723,16 +7902,125 @@ function WorkflowConditionNode({ data }) {
   );
 }
 
+const Clock = ({ startedAt, endedAt }) => {
+  const [time, setTime] = React.useState(startedAt);
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(Date.now());
+    }, 100);
+    return () => clearInterval(interval);
+  }, [startedAt]);
+  const timeDiff = endedAt ? endedAt - startedAt : time - startedAt;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-icon3", children: [
+    toSigFigs(timeDiff, 3),
+    "ms"
+  ] });
+};
+
+const CodeDialogContent = ({ data }) => {
+  const theme = useCodemirrorTheme();
+  if (typeof data !== "string") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: JSON.stringify(data, null, 2) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: JSON.stringify(data, null, 2), theme, extensions: [langJson.jsonLanguage] }) })
+    ] });
+  }
+  try {
+    const json = JSON.parse(data);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: data }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: JSON.stringify(json, null, 2), theme, extensions: [langJson.jsonLanguage] }) })
+    ] });
+  } catch (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: data }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: data, theme, extensions: [] }) })
+    ] });
+  }
+};
+
 function WorkflowDefaultNode({ data }) {
-  const { label, description, withoutTopHandle, withoutBottomHandle } = data;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("bg-mastra-bg-8 rounded-md w-[274px]"), children: [
+  const [isInputOpen, setIsInputOpen] = React.useState(false);
+  const [isOutputOpen, setIsOutputOpen] = React.useState(false);
+  const [isErrorOpen, setIsErrorOpen] = React.useState(false);
+  const [isMapConfigOpen, setIsMapConfigOpen] = React.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";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react$2.Handle, { type: "target", position: react$2.Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-[6px] rounded-sm  p-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, { className: "text-current w-4 h-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: label })
-    ] }) }),
-    description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-mastra-bg-4 rounded-b-md p-2 text-[10px] text-left text-mastra-el-4", children: description }),
-    !withoutBottomHandle && /* @__PURE__ */ jsxRuntime.jsx(react$2.Handle, { type: "source", position: react$2.Position.Bottom, style: { visibility: "hidden" } })
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
+            isRunning && /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+              step?.status === "failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
+              step?.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "text-icon3" }),
+              step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon6 animate-spin" }),
+              !step && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashed, { className: "text-icon2" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Clock, { startedAt: step.startedAt, endedAt: step.endedAt })
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
+          (step?.input || step?.output || step?.error || mapConfig) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " map config"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: mapConfig }) })
+              ] }) })
+            ] }),
+            step?.input && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " input"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: step.input }) })
+              ] }) })
+            ] }),
+            step?.output && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " output"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: step.output }) })
+              ] }) })
+            ] }),
+            step?.error && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " error"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: step?.error }) })
+              ] }) })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    !withoutBottomHandle && /* @__PURE__ */ jsxRuntime.jsx(react$2.Handle, { type: "source", position: react$2.Position.Bottom, style: { visibility: "hidden", color: "red" } })
   ] });
 }
 
@@ -8768,33 +9056,6 @@ function CodeBlockDemo({
   ] });
 }
 
-const WorkflowRunContext = React.createContext({});
-function WorkflowRunProvider({ children }) {
-  const [legacyResult, setLegacyResult] = React.useState(null);
-  const [result, setResult] = React.useState(null);
-  const [payload, setPayload] = React.useState(null);
-  const clearData = () => {
-    setLegacyResult(null);
-    setResult(null);
-    setPayload(null);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    WorkflowRunContext.Provider,
-    {
-      value: {
-        legacyResult,
-        setLegacyResult,
-        result,
-        setResult,
-        payload,
-        setPayload,
-        clearData
-      },
-      children
-    }
-  );
-}
-
 const WorkflowCard = ({ header, children, footer }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface4", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1 px-2 flex items-center gap-3", children: header }),
@@ -9002,6 +9263,48 @@ function LegacyWorkflowTrigger({
   ] }) });
 }
 
+const Slider = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SliderPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary/50" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive__namespace.Root.displayName;
+
+const ZoomSlider = React.forwardRef(({ className, ...props }) => {
+  const { zoom } = react$2.useViewport();
+  const { zoomTo, zoomIn, zoomOut, fitView } = react$2.useReactFlow();
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$2.Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "ghost", size: "icon", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Slider,
+      {
+        className: "w-[140px]",
+        value: [zoom],
+        min: 0.01,
+        max: 1,
+        step: 0.01,
+        onValueChange: (values) => {
+          zoomTo(values[0]);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button$1, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
+      (100 * zoom).toFixed(0),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "ghost", size: "icon", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { className: "h-4 w-4" }) })
+  ] });
+});
+ZoomSlider.displayName = "ZoomSlider";
+
 function WorkflowNestedGraph({ stepGraph, open }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
     stepGraph
@@ -9023,17 +9326,21 @@ function WorkflowNestedGraph({ stepGraph, open }) {
       }, 500);
     }
   }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full relative", children: isMounted ? /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full relative bg-surface1", children: isMounted ? /* @__PURE__ */ jsxRuntime.jsxs(
     react$2.ReactFlow,
     {
       nodes,
       edges,
       fitView: true,
-      fitViewOptions: { maxZoom: 0.85 },
+      fitViewOptions: {
+        maxZoom: 1
+      },
+      minZoom: 0.01,
+      maxZoom: 1,
       nodeTypes,
       onNodesChange,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.Controls, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ZoomSlider, { position: "bottom-left" }),
         /* @__PURE__ */ jsxRuntime.jsx(react$2.MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsxRuntime.jsx(react$2.Background, { variant: react$2.BackgroundVariant.Lines, gap: 12, size: 0.5 })
       ]
@@ -9090,7 +9397,7 @@ function WorkflowNestedGraphProvider({ children }) {
       },
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-[40rem] h-[40rem] bg-[#121212] p-[0.5rem]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-[45rem] h-[45rem] max-w-[unset] bg-[#121212] p-[0.5rem]", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-2.5 left-2.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Workflow, { className: "text-current w-4 h-4" }),
             /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: [
@@ -9106,14 +9413,88 @@ function WorkflowNestedGraphProvider({ children }) {
 }
 
 function WorkflowNestedNode({ data }) {
-  const { label, withoutTopHandle, withoutBottomHandle, stepGraph } = data;
+  const [isInputOpen, setIsInputOpen] = React.useState(false);
+  const [isOutputOpen, setIsOutputOpen] = React.useState(false);
+  const [isErrorOpen, setIsErrorOpen] = React.useState(false);
+  const [isMapConfigOpen, setIsMapConfigOpen] = React.useState(false);
+  const { steps, isRunning } = useCurrentRun();
   const { showNestedGraph } = React.useContext(WorkflowNestedGraphContext);
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react$2.Handle, { type: "target", position: react$2.Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 cursor-pointer", onClick: () => showNestedGraph({ label, stepGraph }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-1.5 rounded-sm p-2 cursor-pointer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Workflow, { className: "text-current w-4 h-4" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: label })
-    ] }) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
+            isRunning && /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+              step?.status === "failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
+              step?.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "text-icon3" }),
+              step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon6 animate-spin" }),
+              !step && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashed, { className: "text-icon2" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Clock, { startedAt: step.startedAt, endedAt: step.endedAt })
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Button, { onClick: () => showNestedGraph({ label, stepGraph }), children: "View workflow" }),
+            mapConfig && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isMapConfigOpen, onOpenChange: setIsMapConfigOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " map config"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: mapConfig }) })
+              ] }) })
+            ] }),
+            step?.input && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " input"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: step.input }) })
+              ] }) })
+            ] }),
+            step?.output && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " output"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: step.output }) })
+              ] }) })
+            ] }),
+            step?.error && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " error"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: step?.error }) })
+              ] }) })
+            ] })
+          ] })
+        ]
+      }
+    ),
     !withoutBottomHandle && /* @__PURE__ */ jsxRuntime.jsx(react$2.Handle, { type: "source", position: react$2.Position.Bottom, style: { visibility: "hidden" } })
   ] });
 }
@@ -9122,6 +9503,7 @@ function WorkflowGraphInner({ workflow }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
   const [nodes, _, onNodesChange] = react$2.useNodesState(initialNodes);
   const [edges] = react$2.useEdgesState(initialEdges);
+  const { steps } = useCurrentRun();
   const nodeTypes = {
     "default-node": WorkflowDefaultNode,
     "condition-node": WorkflowConditionNode,
@@ -9129,19 +9511,27 @@ function WorkflowGraphInner({ workflow }) {
     "loop-result-node": WorkflowLoopResultNode,
     "nested-node": WorkflowNestedNode
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsxs(
     react$2.ReactFlow,
     {
       nodes,
-      edges,
+      edges: edges.map((e) => ({
+        ...e,
+        style: {
+          ...e.style,
+          stroke: steps[e.data?.previousStepId]?.status === "success" && steps[e.data?.nextStepId] ? "#22c55e" : void 0
+        }
+      })),
       nodeTypes,
       onNodesChange,
       fitView: true,
       fitViewOptions: {
-        maxZoom: 0.85
+        maxZoom: 1
       },
+      minZoom: 0.01,
+      maxZoom: 1,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react$2.Controls, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ZoomSlider, { position: "bottom-left" }),
         /* @__PURE__ */ jsxRuntime.jsx(react$2.MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsxRuntime.jsx(react$2.Background, { variant: react$2.BackgroundVariant.Dots, gap: 12, size: 0.5 })
       ]
@@ -9827,6 +10217,7 @@ exports.WorkflowRunProvider = WorkflowRunProvider;
 exports.WorkflowTraces = WorkflowTraces;
 exports.WorkflowTrigger = WorkflowTrigger;
 exports.refineTraces = refineTraces;
+exports.useCurrentRun = useCurrentRun;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
 exports.useSpeechRecognition = useSpeechRecognition;