@mastra/playground-ui 6.1.1-alpha.0 → 6.1.1-alpha.2

package/dist/index.cjs.js

@@ -21,6 +21,7 @@ const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const CodeMirror = require('@uiw/react-codemirror');
 const sonner = require('sonner');
 const useDebounce = require('use-debounce');
+const reactQuery = require('@tanstack/react-query');
 const react = require('@xyflow/react');
 require('@xyflow/react/dist/style.css');
 const Dagre = require('@dagrejs/dagre');
@@ -53,6 +54,7 @@ const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 const reactTable = require('@tanstack/react-table');
 const shallow = require('zustand/shallow');
 const di = require('@mastra/core/di');
+const reactDom = require('react-dom');
 const react$3 = require('motion/react');
 const TabsPrimitive = require('@radix-ui/react-tabs');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
@@ -62,7 +64,6 @@ const runtimeContext = require('@mastra/core/runtime-context');
 const VisuallyHidden = require('@radix-ui/react-visually-hidden');
 const HoverCard = require('@radix-ui/react-hover-card');
 const format = require('date-fns/format');
-const reactQuery = require('@tanstack/react-query');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -3471,54 +3472,6 @@ const defaultComponents = reactMarkdown.unstable_memoizeMarkdownComponents({
   img: ImageWithFallback
 });
 
-const AgentContext = React.createContext({ isLoading: true, agentDetails: null });
-function AgentProvider({ agentId, children }) {
-  const [agentDetails, setAgentDetails] = React.useState({ isLoading: true, agentDetails: null });
-  const client = useMastraClient();
-  React.useEffect(() => {
-    if (!agentId) return;
-    client.getAgent(agentId).details().then((agentDetails2) => setAgentDetails({ isLoading: false, agentDetails: agentDetails2 }));
-  }, [agentId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentContext.Provider, { value: agentDetails, children });
-}
-function useAgent() {
-  return React.useContext(AgentContext);
-}
-
-const sizes = {
-  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
-  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
-  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
-};
-const Icon = ({ children, className, size = "default", ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx("block", sizes[size], className), ...props, children });
-};
-
-const variantClasses$2 = {
-  default: "text-icon3",
-  success: "text-accent1",
-  error: "text-accent2",
-  info: "text-accent3"
-};
-const Badge$1 = ({ icon, variant = "default", className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: clsx(
-        "bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md",
-        icon ? "pl-md pr-1.5" : "px-1.5",
-        icon || variant === "default" ? "text-icon5" : variantClasses$2[variant],
-        className
-      ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses$2[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
-        children
-      ]
-    }
-  );
-};
-
 const AgentIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -3931,6 +3884,15 @@ const HomeIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "13"
   )
 ] });
 
+const sizes = {
+  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
+  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
+  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
+};
+const Icon = ({ children, className, size = "default", ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx("block", sizes[size], className), ...props, children });
+};
+
 const InfoIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -4364,7 +4326,7 @@ const SyntaxHighlighter$2 = ({ data, className }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$2();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2" }),
+    /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-[9999]" }),
     /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] })
   ] });
 };
@@ -4382,8 +4344,58 @@ async function highlight(code, language) {
   return tokens;
 }
 
+const variantClasses$2 = {
+  default: "text-icon3",
+  success: "text-accent1",
+  error: "text-accent2",
+  info: "text-accent3"
+};
+const Badge$1 = ({ icon, variant = "default", className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx(
+        "bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md",
+        icon ? "pl-md pr-1.5" : "px-1.5",
+        icon || variant === "default" ? "text-icon5" : variantClasses$2[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses$2[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
+        children
+      ]
+    }
+  );
+};
+
+const BadgeWrapper = ({
+  children,
+  initialCollapsed = true,
+  icon,
+  title,
+  collapsible = true
+}) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(initialCollapsed);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: collapsible ? () => setIsCollapsed((s) => !s) : void 0,
+        className: "flex items-center gap-2 disabled:cursor-not-allowed",
+        disabled: !collapsible,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon, children: title })
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 rounded-lg bg-surface2", children }) })
+  ] });
+};
+
 const ToolBadge = ({ toolName, argsText, result }) => {
-  const [isCollapsed, setIsCollapsed] = React.useState(true);
   let argSlot;
   try {
     const parsedArgs = JSON.parse(argsText);
@@ -4391,51 +4403,16 @@ const ToolBadge = ({ toolName, argsText, result }) => {
   } catch {
     argSlot = /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: argsText });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => setIsCollapsed((s) => !s), className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: toolName })
+  return /* @__PURE__ */ jsxRuntime.jsx(BadgeWrapper, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }), title: toolName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
+      argSlot
     ] }),
-    !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-sm border-border1 rounded-lg bg-surface4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 border-b-sm border-border1 py-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
-        argSlot
-      ] }),
-      result !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
-        typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result })
-      ] })
-    ] }) })
-  ] });
-};
-
-const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
-  const [runs, setRuns] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const client = useMastraClient();
-  React.useEffect(() => {
-    if (!enabled) return;
-    const fetchWorkflow = async () => {
-      setIsLoading(true);
-      try {
-        if (!workflowId) {
-          setRuns(null);
-          setIsLoading(false);
-          return;
-        }
-        const res = await client.getWorkflow(workflowId).runs({ limit: 50 });
-        setRuns(res);
-      } catch (error) {
-        setRuns(null);
-        console.error("Error fetching workflow", error);
-        sonner.toast.error("Error fetching workflow");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchWorkflow();
-  }, [workflowId, enabled]);
-  return { runs, isLoading };
+    result !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
+      typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result })
+    ] })
+  ] }) });
 };
 
 function Skeleton({ className, ...props }) {
@@ -4443,37 +4420,12 @@ function Skeleton({ className, ...props }) {
 }
 
 const useWorkflow = (workflowId) => {
-  const [workflow, setWorkflow] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
   const client = useMastraClient();
-  React.useEffect(() => {
-    const fetchWorkflow = async () => {
-      setIsLoading(true);
-      try {
-        if (!workflowId) {
-          setWorkflow(null);
-          setIsLoading(false);
-          return;
-        }
-        const res = await client.getWorkflow(workflowId).details();
-        if (!res) {
-          setWorkflow(null);
-          console.error("Error fetching workflow");
-          sonner.toast.error("Error fetching workflow");
-          return;
-        }
-        setWorkflow(res);
-      } catch (error) {
-        setWorkflow(null);
-        console.error("Error fetching workflow", error);
-        sonner.toast.error("Error fetching workflow");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchWorkflow();
-  }, [workflowId]);
-  return { workflow, isLoading };
+  return reactQuery.useQuery({
+    queryKey: ["workflow", workflowId],
+    queryFn: () => client.getWorkflow(workflowId).details(),
+    retry: false
+  });
 };
 const useLegacyWorkflow = (workflowId) => {
   const [legacyWorkflow, setLegacyWorkflow] = React.useState(null);
@@ -5525,6 +5477,154 @@ function determineWorkflowStatus(steps) {
   }
   return "running";
 }
+const mapWorkflowStreamChunkToWatchResult = (prev, chunk) => {
+  if (chunk.type === "workflow-start") {
+    return {
+      ...prev,
+      runId: chunk.runId,
+      eventTimestamp: /* @__PURE__ */ new Date(),
+      payload: {
+        ...prev?.payload || {},
+        workflowState: {
+          ...prev?.payload?.workflowState,
+          status: "running",
+          steps: {}
+        }
+      }
+    };
+  }
+  if (chunk.type === "workflow-step-start") {
+    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
+    return {
+      ...prev,
+      payload: {
+        ...prev.payload,
+        currentStep: {
+          id: chunk.payload.id,
+          ...chunk.payload
+        },
+        workflowState: {
+          ...prev.payload.workflowState,
+          steps: {
+            ...prev.payload.workflowState.steps,
+            [chunk.payload.id]: {
+              ...current || {},
+              ...chunk.payload
+            }
+          }
+        }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+  }
+  if (chunk.type === "workflow-step-suspended") {
+    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
+    return {
+      ...prev,
+      payload: {
+        ...prev.payload,
+        currentStep: {
+          id: chunk.payload.id,
+          ...prev?.payload?.currentStep || {},
+          ...chunk.payload
+        },
+        workflowState: {
+          ...prev.payload.workflowState,
+          status: "suspended",
+          steps: {
+            ...prev.payload.workflowState.steps,
+            [chunk.payload.id]: {
+              ...current || {},
+              ...chunk.payload
+            }
+          }
+        }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+  }
+  if (chunk.type === "workflow-step-waiting") {
+    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
+    return {
+      ...prev,
+      payload: {
+        ...prev.payload,
+        currentStep: {
+          id: chunk.payload.id,
+          ...prev?.payload?.currentStep || {},
+          ...chunk.payload
+        },
+        workflowState: {
+          ...prev.payload.workflowState,
+          status: "waiting",
+          steps: {
+            ...prev.payload.workflowState.steps,
+            [chunk.payload.id]: {
+              ...current,
+              ...chunk.payload
+            }
+          }
+        }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+  }
+  if (chunk.type === "workflow-step-result") {
+    const status = chunk.payload.status;
+    const current = prev?.payload?.workflowState?.steps?.[chunk.payload.id] || {};
+    return {
+      ...prev,
+      payload: {
+        ...prev.payload,
+        currentStep: {
+          id: chunk.payload.id,
+          ...prev?.payload?.currentStep || {},
+          ...chunk.payload
+        },
+        workflowState: {
+          ...prev.payload.workflowState,
+          status,
+          steps: {
+            ...prev.payload.workflowState.steps,
+            [chunk.payload.id]: {
+              ...current,
+              ...chunk.payload
+            }
+          }
+        }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+  }
+  if (chunk.type === "workflow-canceled") {
+    return {
+      ...prev,
+      payload: {
+        ...prev.payload,
+        workflowState: {
+          ...prev.payload.workflowState,
+          status: "canceled"
+        }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+  }
+  if (chunk.type === "workflow-finish") {
+    return {
+      ...prev,
+      payload: {
+        ...prev.payload,
+        currentStep: void 0,
+        workflowState: {
+          ...prev.payload.workflowState,
+          status: chunk.payload.workflowStatus
+        }
+      },
+      eventTimestamp: /* @__PURE__ */ new Date()
+    };
+  }
+  return prev;
+};
 
 const WorkflowRunContext = React.createContext({});
 function WorkflowRunProvider({
@@ -6133,7 +6233,7 @@ function Spinner({ color = "#fff", className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("animate-spin duration-700", className),
+      className: clsx("animate-spin duration-700", className),
       xmlns: "http://www.w3.org/2000/svg",
       width: "24",
       height: "24",
@@ -6184,7 +6284,6 @@ function LegacyWorkflowNestedGraph({
       onNodesChange,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Controls, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Lines, gap: 12, size: 0.5 })
       ]
     }
@@ -6287,7 +6386,6 @@ function LegacyWorkflowGraphInner({ workflow }) {
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.Controls, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Dots, gap: 12, size: 0.5 })
       ]
     }
@@ -7485,7 +7583,6 @@ function WorkflowNestedGraph({
       onNodesChange,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ZoomSlider, { position: "bottom-left" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Lines, gap: 12, size: 0.5 })
       ]
     }
@@ -7663,7 +7760,6 @@ function WorkflowGraphInner({ workflow, onShowTrace, onSendEvent }) {
       maxZoom: 1,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ZoomSlider, { position: "bottom-left" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Dots, gap: 12, size: 0.5 })
       ]
     }
@@ -8442,44 +8538,83 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { classN
   }
 ) });
 
-const WorkflowBadge = ({ workflow, result, workflowId }) => {
-  const [isCollapsed, setIsCollapsed] = React.useState(true);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick: () => setIsCollapsed((s) => !s),
-        className: "flex items-center gap-2 disabled:cursor-not-allowed",
-        type: "button",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name })
-        ]
-      }
-    ),
-    !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(WorkflowBadgeExtended, { workflowId, workflow, runId: result?.runId })
+const useHandleAgentWorkflowStream = (workflowOutput) => {
+  const [streamResult, setStreamResult] = React.useState({});
+  React.useEffect(() => {
+    if (!workflowOutput) return;
+    setStreamResult((prev) => mapWorkflowStreamChunkToWatchResult(prev, workflowOutput));
+  }, [workflowOutput]);
+  return streamResult;
+};
+
+const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
+  const client = useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["workflow-runs", workflowId],
+    queryFn: () => client.getWorkflow(workflowId).runs({ limit: 50 }),
+    enabled
+  });
+};
+
+const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming }) => {
+  const { data: runs, isLoading: isRunsLoading } = useWorkflowRuns(workflowId, {
+    enabled: Boolean(runId) && !isStreaming
+  });
+  const run = runs?.runs.find((run2) => run2.runId === runId);
+  const isLoading = isRunsLoading || !run;
+  const snapshot = typeof run?.snapshot === "object" ? run?.snapshot : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(BadgeWrapper, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), title: workflow.name, initialCollapsed: false, children: [
+    !isStreaming && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunProvider, { snapshot, children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }) }),
+    isStreaming && /* @__PURE__ */ jsxRuntime.jsx(WorkflowBadgeExtended, { workflowId, workflow, runId })
   ] });
 };
 const WorkflowBadgeExtended = ({ workflowId, workflow, runId }) => {
   const { Link } = useLinkComponent();
-  const { runs, isLoading: isRunsLoading } = useWorkflowRuns(workflowId, { enabled: Boolean(runId) });
-  const run = runs?.runs.find((run2) => run2.runId === runId);
-  const isLoading = isRunsLoading || !run;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-sm border-border1 rounded-lg bg-surface4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b-sm border-border1", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[50vh]", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph`, children: "Go to workflow" }),
       /* @__PURE__ */ jsxRuntime.jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph/${runId}`, children: "See run" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md overflow-hidden h-[60vh] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunProvider, { snapshot: typeof run?.snapshot === "object" ? run.snapshot : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowGraph, { workflowId, workflow }) }) })
-  ] }) }) }) });
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md overflow-hidden h-[60vh] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowGraph, { workflowId, workflow }) })
+  ] });
+};
+const useWorkflowStream = (partialWorkflowOutput) => {
+  const streamResult = useHandleAgentWorkflowStream(partialWorkflowOutput);
+  const { setResult } = React.useContext(WorkflowRunContext);
+  React.useEffect(() => {
+    if (!streamResult) return;
+    setResult(streamResult);
+  }, [streamResult]);
 };
 
-const ToolFallback$1 = ({ toolName, argsText, result, ...props }) => {
-  const { agentDetails, isLoading } = useAgent();
-  const workflow = agentDetails?.workflows[toolName];
-  if (isLoading) return null;
+const LoadingBadge = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BadgeWrapper,
+    {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: colors.IconColors.icon3 }),
+      title: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "ml-2 w-12 h-2" }),
+      collapsible: false
+    }
+  );
+};
+
+const ToolFallback$1 = ({ toolName, argsText, result, args, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackInner, { toolName, argsText, result, args, ...props }) });
+};
+const ToolFallbackInner = ({ toolName, argsText, result, args }) => {
+  useWorkflowStream(args.__mastraMetadata?.partialChunk);
+  const { data: workflow, isLoading } = useWorkflow(toolName);
+  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(LoadingBadge, {});
   if (workflow) {
-    return /* @__PURE__ */ jsxRuntime.jsx(WorkflowBadge, { workflowId: toolName, workflow, result });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      WorkflowBadge,
+      {
+        workflowId: toolName,
+        workflow,
+        isStreaming: args.__mastraMetadata?.isStreaming,
+        runId: result?.runId
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ToolBadge, { toolName, argsText, result });
 };
@@ -9091,7 +9226,7 @@ const Thread = ({ ToolFallback, agentName, agentId, hasMemory, onInputChange })
   const WrappedAssistantMessage = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, ToolFallback });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentProvider, { agentId, children: /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper$1, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper$1, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react$2.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome$1, { agentName }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9107,7 +9242,7 @@ const Thread = ({ ToolFallback, agentName, agentId, hasMemory, onInputChange })
       /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Composer$1, { hasMemory, onInputChange, agentId })
-  ] }) });
+  ] });
 };
 const ThreadWrapper$1 = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react$2.ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
@@ -9793,6 +9928,37 @@ function MastraRuntimeProvider({
                   updater();
                   break;
                 }
+                case "tool-output": {
+                  if (!chunk.payload.output?.type.startsWith("workflow-")) return;
+                  reactDom.flushSync(() => {
+                    setMessages((currentConversation) => {
+                      const lastMessage = currentConversation[currentConversation.length - 1];
+                      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
+                      const newMessage = {
+                        ...lastMessage,
+                        content: contentArray.map((part) => {
+                          if (part.type === "tool-call") {
+                            return {
+                              ...part,
+                              ...chunk.payload,
+                              args: {
+                                ...part.args,
+                                __mastraMetadata: {
+                                  ...part.args?.__mastraMetadata,
+                                  partialChunk: chunk?.payload?.output,
+                                  isStreaming: true
+                                }
+                              }
+                            };
+                          }
+                          return part;
+                        })
+                      };
+                      return [...currentConversation.slice(0, -1), newMessage];
+                    });
+                  });
+                  break;
+                }
                 case "tool-call": {
                   setMessages((currentConversation) => {
                     const lastMessage = currentConversation[currentConversation.length - 1];
@@ -9805,7 +9971,13 @@ function MastraRuntimeProvider({
                             type: "tool-call",
                             toolCallId: chunk.payload.toolCallId,
                             toolName: chunk.payload.toolName,
-                            args: chunk.payload.args
+                            args: {
+                              ...chunk.payload.args,
+                              __mastraMetadata: {
+                                ...chunk.payload.args?.__mastraMetadata,
+                                isStreaming: true
+                              }
+                            }
                           }
                         ] : [
                           ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
@@ -9813,7 +9985,13 @@ function MastraRuntimeProvider({
                             type: "tool-call",
                             toolCallId: chunk.payload.toolCallId,
                             toolName: chunk.payload.toolName,
-                            args: chunk.payload.args
+                            args: {
+                              ...chunk.payload.args,
+                              __mastraMetadata: {
+                                ...chunk.payload.args?.__mastraMetadata,
+                                isStreaming: true
+                              }
+                            }
                           }
                         ]
                       };
@@ -9829,7 +10007,10 @@ function MastraRuntimeProvider({
                           type: "tool-call",
                           toolCallId: chunk.payload.toolCallId,
                           toolName: chunk.payload.toolName,
-                          args: chunk.payload.args
+                          args: {
+                            ...chunk.payload.args,
+                            __mastraMetadata: { ...chunk.payload.args?.__mastraMetadata, isStreaming: true }
+                          }
                         }
                       ]
                     };
@@ -12992,8 +13173,8 @@ const StepEntry = ({ stepId, step, runId }) => {
   ] });
 };
 const WorkflowStepResultDialog = ({ open, onOpenChange, workflowId, runId }) => {
-  const { runs } = useWorkflowRuns(workflowId);
-  const { workflow, isLoading } = useWorkflow(workflowId);
+  const { data: runs } = useWorkflowRuns(workflowId);
+  const { data: workflow, isLoading } = useWorkflow(workflowId);
   const run = runs?.runs.find((run2) => run2.runId === runId);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "h-[90vh] w-[90%] max-w-[unset]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 h-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Workflow details" }),
@@ -14603,7 +14784,8 @@ function EntryList({
   perPage,
   columns,
   searchTerm,
-  setEndOfListElement
+  setEndOfListElement,
+  errorMsg
 }) {
   const loadingItems = Array.from({ length: 3 }).map((_, index) => {
     return {
@@ -14627,8 +14809,24 @@ function EntryList({
         children: columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.label || col.name }, col.name))
       }
     ) }),
-    !isLoading && items?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 text-[0.875rem] text-center h-[3.5rem] items-center flex justify-center", children: searchTerm ? `No results found for "${searchTerm}"` : "No entries found" }) }),
-    items?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    errorMsg && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: cn(
+          "text-[0.875rem] text-center items-center flex justify-center p-[2.5rem] gap-[1rem] text-icon3",
+          "[&>svg]:w-[1.5em]",
+          "[&>svg]:h-[1.5em]",
+          "[&>svg]:text-red-500"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}),
+          " ",
+          errorMsg || "Something went wrong while fetching the data."
+        ]
+      }
+    ) }),
+    !isLoading && !errorMsg && items?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 text-[0.875rem] text-center h-[3.5rem] items-center flex justify-center", children: searchTerm ? `No results found for "${searchTerm}"` : "No entries found" }) }),
+    !errorMsg && items?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none overflow-y-auto", children: items.map((item) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           EntryListItem,
@@ -14961,8 +15159,8 @@ function SideDialogHeading({ children, className, as = "h1" }) {
     HeadingTag,
     {
       className: cn(
-        "flex items-start text-icon4 text-[1.125rem] font-semibold gap-[1rem]",
-        "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em]",
+        "flex items-start text-icon4 text-[1.125rem] font-semibold gap-[.5rem]",
+        "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0 [&>svg]:mt-[.2em] [&>svg]:opacity-70",
         {
           "text-[1.125rem]": as === "h1",
           "text-[1rem]": as === "h2"
@@ -15367,7 +15565,7 @@ const DefaultTrigger = React__namespace.forwardRef(
   ({ value, placeholder, className, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Button, { ref, variant: "outline", className: cn("justify-start", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "h-4 w-4" }),
-      value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white", children: dateFns.format(value, "PPP p") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
+      value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white", children: dateFns.format(value, "PP p") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
     ] });
   }
 );
@@ -15377,8 +15575,8 @@ function TextAndIcon({ children, className }) {
     "span",
     {
       className: cn(
-        "flex items-center gap-[0.25rem] text-icon4 text-[0.875rem]",
-        "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
+        "flex items-center gap-[0.5em] text-icon4 text-[0.875rem]",
+        "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50 [&_svg]:flex-shrink-0",
         className
       ),
       children
@@ -16856,7 +17054,8 @@ function TraceTimelineSpan({
   selectedSpanId,
   isLastChild,
   overallLatency,
-  overallStartTime
+  overallStartTime,
+  overallEndTime
 }) {
   const { Link } = useLinkComponent();
   const [isHovered, setIsHovered] = React.useState(false);
@@ -16911,7 +17110,7 @@ function TraceTimelineSpan({
           onMouseEnter: () => setIsHovered(true),
           onMouseLeave: () => setIsHovered(false),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left text-[0.75rem] relative w-full h-[1.4rem] ", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left text-[0.75rem] relative w-full h-[1.4rem] min-w-[6rem]", children: /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
                 className: cn(
@@ -17066,6 +17265,7 @@ function TraceTimeline({
 }) {
   const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
   const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  const overallEndTime = hierarchicalSpans?.[0]?.endTime || "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-[1rem]", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between pr-[2.5rem]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", children: [
@@ -17089,10 +17289,10 @@ function TraceTimeline({
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn(
-          "overflow-y-auto grid items-start content-start gap-y-[2px] xl:py-[1rem]",
-          "xl:grid-cols-[3fr_2fr] xl:gap-x-[1rem]"
-        ),
+        className: cn("grid items-start content-start gap-y-[2px]", "xl:gap-x-[1rem] xl:py-[1rem]", {
+          "xl:grid-cols-[3fr_auto]": !overallEndTime,
+          "xl:grid-cols-[3fr_2fr]": overallEndTime
+        }),
         children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
           TraceTimelineSpan,
           {
@@ -17100,7 +17300,8 @@ function TraceTimeline({
             onSpanClick,
             selectedSpanId,
             overallLatency,
-            overallStartTime
+            overallStartTime,
+            overallEndTime
           },
           span.id
         ))
@@ -17290,7 +17491,7 @@ function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
   if (withSpanId) {
     baseInfo.unshift({
       key: "spanId",
-      label: "Span Id",
+      label: "#",
       value: span?.spanId
     });
   }
@@ -17327,7 +17528,7 @@ function SpanDialog({
       isOpen,
       onClose,
       hasCloseButton: true,
-      className: cn("w-[calc(100vw-20rem)] max-w-[60%]", "3xl:max-w-[50rem]", "4xl:max-w-[40%]"),
+      className: cn("w-[calc(100vw-25rem)] max-w-[65%]", "3xl:max-w-[50%]", "4xl:max-w-[40%]"),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pr-[1.5rem]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
@@ -17435,7 +17636,7 @@ function TraceDialog({
         isOpen,
         onClose,
         hasCloseButton: !dialogIsOpen || combinedView,
-        className: cn("w-[calc(100vw-20rem)] max-w-[75%]", "3xl:max-w-[60rem]", "4xl:max-w-[60%]"),
+        className: cn("w-[calc(100vw-20rem)] max-w-[80%]", "3xl:max-w-[65%]", "4xl:max-w-[55%]"),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
@@ -17461,7 +17662,7 @@ function TraceDialog({
                     traceId
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto pb-[2.5rem]", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("overflow-y-auto pb-[2.5rem]"), children: [
                   traceDetails?.metadata?.usage && /* @__PURE__ */ jsxRuntime.jsx(
                     TraceSpanUsage,
                     {
@@ -17501,7 +17702,7 @@ function TraceDialog({
                           ] }),
                           "›",
                           /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
                             " ",
                             getShortId(selectedSpanId)
                           ] })
@@ -17588,7 +17789,7 @@ function TracesTools({
           value: selectedDateFrom,
           maxValue: selectedDateTo,
           onValueChange: (date) => onDateChange?.(date, "from"),
-          className: "min-w-[15rem]",
+          className: "min-w-[13rem]",
           defaultTimeStrValue: "12:00 AM",
           disabled: isLoading
         }
@@ -17600,7 +17801,7 @@ function TracesTools({
           value: selectedDateTo,
           minValue: selectedDateFrom,
           onValueChange: (date) => onDateChange?.(date, "to"),
-          className: "min-w-[15rem]",
+          className: "min-w-[13rem]",
           defaultTimeStrValue: "11:59 PM",
           disabled: isLoading
         }
@@ -18406,6 +18607,7 @@ exports.WorkingMemoryContext = WorkingMemoryContext;
 exports.WorkingMemoryProvider = WorkingMemoryProvider;
 exports.allowedAiSpanAttributes = allowedAiSpanAttributes;
 exports.cleanString = cleanString;
+exports.convertWorkflowRunStateToWatchResult = convertWorkflowRunStateToWatchResult;
 exports.formatDuration = formatDuration;
 exports.formatHierarchicalSpans = formatHierarchicalSpans;
 exports.formatOtelTimestamp = formatOtelTimestamp;
@@ -18413,6 +18615,7 @@ exports.formatOtelTimestamp2 = formatOtelTimestamp2;
 exports.getColumnTemplate = getColumnTemplate;
 exports.getShortId = getShortId;
 exports.getSpanTypeUi = getSpanTypeUi;
+exports.mapWorkflowStreamChunkToWatchResult = mapWorkflowStreamChunkToWatchResult;
 exports.providerMapToIcon = providerMapToIcon;
 exports.spanTypePrefixes = spanTypePrefixes;
 exports.transformKey = transformKey;