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

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, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Loader2, 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, 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';
@@ -26,11 +26,12 @@ import { format, formatDistanceToNow, isValid } from 'date-fns';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { toast } from 'sonner';
 import { AnimatePresence } from 'motion/react';
+import { C as Colors } from './colors-CBG_Mm7P.js';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
 import { useDebouncedCallback } from 'use-debounce';
 import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/runtime-context';
-import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, MiniMap, Background, BackgroundVariant, ReactFlowProvider } from '@xyflow/react';
+import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, MiniMap, Background, BackgroundVariant, ReactFlowProvider, useViewport, useReactFlow, Panel } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
@@ -48,6 +49,7 @@ import { v4 } from '@lukeed/uuid';
 import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
 import './index.css';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}
@@ -4109,7 +4111,7 @@ const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   DialogPrimitive.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
   }
 ));
@@ -4824,23 +4826,47 @@ const defaultModelSettings$1 = {
   topP: 1
 };
 const AgentContext = 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 = 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__ */ jsx(
     AgentContext.Provider,
@@ -5946,7 +5972,7 @@ const useCodemirrorTheme = () => {
         fontSize: "0.8rem",
         lineHighlight: "transparent",
         gutterBackground: "transparent",
-        gutterForeground: "#939393",
+        gutterForeground: Colors.surface3,
         background: "transparent"
       },
       styles: [{ tag: [tags.className, tags.propertyName] }]
@@ -7692,18 +7718,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 = createContext({});
+function WorkflowRunProvider({
+  children,
+  snapshot
+}) {
+  const [legacyResult, setLegacyResult] = useState(null);
+  const [result, setResult] = useState(
+    () => snapshot ? convertWorkflowRunStateToWatchResult(snapshot) : null
+  );
+  const [payload, setPayload] = useState(null);
+  const clearData = () => {
+    setLegacyResult(null);
+    setResult(null);
+    setPayload(null);
+  };
+  useEffect(() => {
+    if (snapshot?.runId) {
+      setResult(convertWorkflowRunStateToWatchResult(snapshot));
+    } else {
+      setResult(null);
+    }
+  }, [snapshot?.runId ?? ""]);
+  return /* @__PURE__ */ jsx(
+    WorkflowRunContext.Provider,
+    {
+      value: {
+        legacyResult,
+        setLegacyResult,
+        result,
+        setResult,
+        payload,
+        setPayload,
+        clearData
+      },
+      children
+    }
+  );
+}
+
+const useCurrentRun = () => {
+  const context = 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] = useState(false);
+  const [isOutputOpen, setIsOutputOpen] = useState(false);
+  const [isErrorOpen, setIsErrorOpen] = useState(false);
+  const { steps, isRunning } = useCurrentRun();
   const { label, description, withoutTopHandle, withoutBottomHandle } = data;
-  return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
-    /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-[6px] rounded-sm  p-2", children: [
-      /* @__PURE__ */ jsx(Footprints, { className: "text-current w-4 h-4" }),
-      /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: label })
-    ] }) }),
-    description && /* @__PURE__ */ jsx("div", { className: "bg-mastra-bg-4 rounded-b-md p-2 text-[10px] text-left text-mastra-el-4", children: description }),
-    !withoutBottomHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 px-3", children: [
+            isRunning && /* @__PURE__ */ jsxs(Icon, { children: [
+              step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
+              step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-icon3" }),
+              step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon6 animate-spin" }),
+              !step && /* @__PURE__ */ jsx(CircleDashed, { className: "text-icon2" })
+            ] }),
+            /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "text-icon6 font-medium inline-flex items-center gap-1 justify-between w-full", children: [
+              label,
+              " ",
+              step?.startedAt && /* @__PURE__ */ jsx(Clock, { startedAt: step.startedAt, endedAt: step.endedAt })
+            ] })
+          ] }),
+          description && /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 px-3 pb-2", children: description }),
+          (step?.input || step?.output) && /* @__PURE__ */ jsxs("div", { className: "flex items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2", children: [
+            step?.input && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsInputOpen(true), children: "Input" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isInputOpen, onOpenChange: setIsInputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " input"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.input }) })
+              ] }) })
+            ] }),
+            step?.output && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsOutputOpen(true), children: "Output" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isOutputOpen, onOpenChange: setIsOutputOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " output"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step.output }) })
+              ] }) })
+            ] }),
+            step?.error && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setIsErrorOpen(true), children: "Error" }),
+              /* @__PURE__ */ jsx(Dialog, { open: isErrorOpen, onOpenChange: setIsErrorOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+                  label,
+                  " error"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: step?.error }) })
+              ] }) })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    !withoutBottomHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden", color: "red" } })
   ] });
 }
+const CodeDialogContent = ({ data }) => {
+  const theme = useCodemirrorTheme();
+  if (typeof data !== "string") {
+    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(data, null, 2) }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: JSON.stringify(data, null, 2), theme, extensions: [jsonLanguage] }) })
+    ] });
+  }
+  try {
+    const json = JSON.parse(data);
+    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: json, theme, extensions: [jsonLanguage] }) })
+    ] });
+  } catch (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "max-h-[500px] overflow-auto relative p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 bg-surface4 rounded-full z-10", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
+      /* @__PURE__ */ jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsx(CodeMirror, { value: data, theme, extensions: [] }) })
+    ] });
+  }
+};
+const Clock = ({ startedAt, endedAt }) => {
+  const [time, setTime] = useState(startedAt);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(Date.now());
+    }, 100);
+    return () => clearInterval(interval);
+  }, [startedAt]);
+  const timeDiff = endedAt ? endedAt - startedAt : time - startedAt;
+  return /* @__PURE__ */ jsxs("span", { className: "text-xs text-icon3", children: [
+    toSigFigs(timeDiff, 3),
+    "ms"
+  ] });
+};
 
 function WorkflowAfterNode({ data }) {
   const { steps } = data;
@@ -8737,33 +8967,6 @@ function CodeBlockDemo({
   ] });
 }
 
-const WorkflowRunContext = createContext({});
-function WorkflowRunProvider({ children }) {
-  const [legacyResult, setLegacyResult] = useState(null);
-  const [result, setResult] = useState(null);
-  const [payload, setPayload] = useState(null);
-  const clearData = () => {
-    setLegacyResult(null);
-    setResult(null);
-    setPayload(null);
-  };
-  return /* @__PURE__ */ jsx(
-    WorkflowRunContext.Provider,
-    {
-      value: {
-        legacyResult,
-        setLegacyResult,
-        result,
-        setResult,
-        payload,
-        setPayload,
-        clearData
-      },
-      children
-    }
-  );
-}
-
 const WorkflowCard = ({ header, children, footer }) => {
   return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface4", children: [
     /* @__PURE__ */ jsx("div", { className: "py-1 px-2 flex items-center gap-3", children: header }),
@@ -8971,6 +9174,48 @@ function LegacyWorkflowTrigger({
   ] }) });
 }
 
+const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.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.Root.displayName;
+
+const ZoomSlider = forwardRef(({ className, ...props }) => {
+  const { zoom } = useViewport();
+  const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
+  return /* @__PURE__ */ jsxs(Panel, { className: cn("flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground", className), ...props, children: [
+    /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: () => zoomOut({ duration: 300 }), children: /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        className: "w-[140px]",
+        value: [zoom],
+        min: 0.01,
+        max: 1,
+        step: 0.01,
+        onValueChange: (values) => {
+          zoomTo(values[0]);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: () => zoomIn({ duration: 300 }), children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs(Button$1, { className: "min-w-20 tabular-nums", variant: "ghost", onClick: () => zoomTo(1, { duration: 300 }), children: [
+      (100 * zoom).toFixed(0),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: () => fitView({ duration: 300, maxZoom: 1 }), children: /* @__PURE__ */ jsx(Maximize, { className: "h-4 w-4" }) })
+  ] });
+});
+ZoomSlider.displayName = "ZoomSlider";
+
 function WorkflowNestedGraph({ stepGraph, open }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
     stepGraph
@@ -8998,11 +9243,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__ */ jsx(Controls, {}),
+        /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
         /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Lines, gap: 12, size: 0.5 })
       ]
@@ -9059,7 +9308,7 @@ function WorkflowNestedGraphProvider({ children }) {
       },
       children: [
         children,
-        /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[40rem] h-[40rem] bg-[#121212] p-[0.5rem]", children: [
+        /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: closeNestedGraph, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-[45rem] h-[45rem] max-w-[unset] bg-[#121212] p-[0.5rem]", children: [
           /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 absolute top-2.5 left-2.5", children: [
             /* @__PURE__ */ jsx(Workflow, { className: "text-current w-4 h-4" }),
             /* @__PURE__ */ jsxs(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: [
@@ -9091,6 +9340,7 @@ function WorkflowGraphInner({ workflow }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
+  const { steps } = useCurrentRun();
   const nodeTypes = {
     "default-node": WorkflowDefaultNode,
     "condition-node": WorkflowConditionNode,
@@ -9098,19 +9348,27 @@ function WorkflowGraphInner({ workflow }) {
     "loop-result-node": WorkflowLoopResultNode,
     "nested-node": WorkflowNestedNode
   };
-  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxs(
     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__ */ jsx(Controls, {}),
+        /* @__PURE__ */ jsx(ZoomSlider, { position: "bottom-left" }),
         /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 12, size: 0.5 })
       ]
@@ -9700,5 +9958,5 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   return { traces, firstCallLoading, error };
 };
 
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceContext, TraceIcon, TraceProvider, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, usePlaygroundStore, usePolling, useSpeechRecognition, useTraces };
+export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceContext, TraceIcon, TraceProvider, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, useCurrentRun, usePlaygroundStore, usePolling, useSpeechRecognition, useTraces };
 //# sourceMappingURL=index.es.js.map