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

package/dist/colors-CBG_Mm7P.js

@@ -0,0 +1,26 @@
+const Colors = {
+  surface1: "#000000",
+  surface2: "#0F0F0F",
+  surface3: "#141414",
+  surface4: "#1A1A1A",
+  surface5: "rgba(46, 46, 46, 0.9)",
+  accent1: "#1AFB6F",
+  accent2: "#FF4931",
+  accent3: "#267AD2",
+  accent4: "#9E57B3"
+};
+const BorderColors = {
+  border1: "rgba(48, 48, 48, 1)",
+  border2: "rgba(66, 66, 66, 1)"
+};
+const IconColors = {
+  icon1: "#5C5C5C",
+  icon2: "#707070",
+  icon3: "#939393",
+  icon4: "#A9A9A9",
+  icon5: "#E6E6E6",
+  icon6: "#FFFFFF"
+};
+
+export { BorderColors as B, Colors as C, IconColors as I };
+//# sourceMappingURL=colors-CBG_Mm7P.js.map

package/dist/colors-CBG_Mm7P.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors-CBG_Mm7P.js","sources":["../src/ds/tokens/colors.ts"],"sourcesContent":["export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n"],"names":[],"mappings":"AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,uBAAA;AAAA,EACV,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,OAAS,EAAA,qBAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,UAAa,GAAA;AAAA,EACxB,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA;AACT;;;;"}

package/dist/colors-Du4i-E0i.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+const Colors = {
+  surface1: "#000000",
+  surface2: "#0F0F0F",
+  surface3: "#141414",
+  surface4: "#1A1A1A",
+  surface5: "rgba(46, 46, 46, 0.9)",
+  accent1: "#1AFB6F",
+  accent2: "#FF4931",
+  accent3: "#267AD2",
+  accent4: "#9E57B3"
+};
+const BorderColors = {
+  border1: "rgba(48, 48, 48, 1)",
+  border2: "rgba(66, 66, 66, 1)"
+};
+const IconColors = {
+  icon1: "#5C5C5C",
+  icon2: "#707070",
+  icon3: "#939393",
+  icon4: "#A9A9A9",
+  icon5: "#E6E6E6",
+  icon6: "#FFFFFF"
+};
+
+exports.BorderColors = BorderColors;
+exports.Colors = Colors;
+exports.IconColors = IconColors;
+//# sourceMappingURL=colors-Du4i-E0i.cjs.map

package/dist/colors-Du4i-E0i.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors-Du4i-E0i.cjs","sources":["../src/ds/tokens/colors.ts"],"sourcesContent":["export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n"],"names":[],"mappings":";;AAAO,MAAM,MAAS,GAAA;AAAA,EACpB,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,QAAU,EAAA,uBAAA;AAAA,EACV,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,YAAe,GAAA;AAAA,EAC1B,OAAS,EAAA,qBAAA;AAAA,EACT,OAAS,EAAA;AACX;AAEO,MAAM,UAAa,GAAA;AAAA,EACxB,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,KAAO,EAAA;AACT;;;;;;"}

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] }]
@@ -7723,18 +7750,222 @@ function WorkflowConditionNode({ data }) {
   );
 }
 
+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 WorkflowDefaultNode({ data }) {
+  const [isInputOpen, setIsInputOpen] = React.useState(false);
+  const [isOutputOpen, setIsOutputOpen] = React.useState(false);
+  const [isErrorOpen, setIsErrorOpen] = React.useState(false);
+  const { steps, isRunning } = useCurrentRun();
   const { label, description, withoutTopHandle, withoutBottomHandle } = data;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("bg-mastra-bg-8 rounded-md w-[274px]"), children: [
+  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: clsx(
+          "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: "flex items-center gap-2 px-3", 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) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2", children: [
+            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" } })
   ] });
 }
+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, 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: [] }) })
+    ] });
+  }
+};
+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"
+  ] });
+};
 
 function WorkflowAfterNode({ data }) {
   const { steps } = data;
@@ -8768,33 +8999,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 +9206,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
@@ -9029,11 +9275,15 @@ function WorkflowNestedGraph({ stepGraph, open }) {
       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 +9340,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: [
@@ -9122,6 +9372,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 +9380,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.source]?.status === "success" ? "#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 +10086,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;