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

package/dist/index.es.js

@@ -19,7 +19,9 @@ import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { toast } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
-import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, MiniMap, Background, BackgroundVariant, ReactFlowProvider, useViewport, useReactFlow, Panel } from '@xyflow/react';
+import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import './index.css';export * from '@tanstack/react-query';
+import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, 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';
@@ -29,7 +31,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import prettier from 'prettier';
 import prettierPluginBabel from 'prettier/plugins/babel';
 import prettierPluginEstree from 'prettier/plugins/estree';
-import { C as Colors } from './colors-DrbbnW3f.js';
+import { C as Colors, I as IconColors } from './colors-DrbbnW3f.js';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
 import z$2, { z, ZodObject } from 'zod';
@@ -51,6 +53,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { useShallow } from 'zustand/shallow';
 import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/di';
+import { flushSync } from 'react-dom';
 import { AnimatePresence } from 'motion/react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -61,8 +64,6 @@ import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { VisuallyHidden as VisuallyHidden$1 } from '@radix-ui/react-visually-hidden';
 import * as HoverCard from '@radix-ui/react-hover-card';
 import { format as format$1 } from 'date-fns/format';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import './index.css';export * from '@tanstack/react-query';
 
 const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
   return new MastraClient({
@@ -3437,54 +3438,6 @@ const defaultComponents = unstable_memoizeMarkdownComponents({
   img: ImageWithFallback
 });
 
-const AgentContext = createContext({ isLoading: true, agentDetails: null });
-function AgentProvider({ agentId, children }) {
-  const [agentDetails, setAgentDetails] = useState({ isLoading: true, agentDetails: null });
-  const client = useMastraClient();
-  useEffect(() => {
-    if (!agentId) return;
-    client.getAgent(agentId).details().then((agentDetails2) => setAgentDetails({ isLoading: false, agentDetails: agentDetails2 }));
-  }, [agentId]);
-  return /* @__PURE__ */ jsx(AgentContext.Provider, { value: agentDetails, children });
-}
-function useAgent() {
-  return 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__ */ 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__ */ 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__ */ jsx("span", { className: variantClasses$2[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
-        children
-      ]
-    }
-  );
-};
-
 const AgentIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx(
     "path",
@@ -3897,6 +3850,15 @@ const HomeIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "13", height: "
   )
 ] });
 
+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__ */ jsx("span", { className: clsx("block", sizes[size], className), ...props, children });
+};
+
 const InfoIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx(
     "path",
@@ -4330,7 +4292,7 @@ const SyntaxHighlighter$2 = ({ data, className }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$2();
   return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
-    /* @__PURE__ */ jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2" }),
+    /* @__PURE__ */ jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-[9999]" }),
     /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] })
   ] });
 };
@@ -4348,8 +4310,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__ */ 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__ */ jsx("span", { className: variantClasses$2[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
+        children
+      ]
+    }
+  );
+};
+
+const BadgeWrapper = ({
+  children,
+  initialCollapsed = true,
+  icon,
+  title,
+  collapsible = true
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+    /* @__PURE__ */ 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__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
+          /* @__PURE__ */ jsx(Badge$1, { icon, children: title })
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx("div", { className: "p-4 rounded-lg bg-surface2", children }) })
+  ] });
+};
+
 const ToolBadge = ({ toolName, argsText, result }) => {
-  const [isCollapsed, setIsCollapsed] = useState(true);
   let argSlot;
   try {
     const parsedArgs = JSON.parse(argsText);
@@ -4357,51 +4369,16 @@ const ToolBadge = ({ toolName, argsText, result }) => {
   } catch {
     argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: argsText });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-    /* @__PURE__ */ jsxs("button", { onClick: () => setIsCollapsed((s) => !s), className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
-      /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: toolName })
+  return /* @__PURE__ */ jsx(BadgeWrapper, { icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }), title: toolName, children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
+      argSlot
     ] }),
-    !isCollapsed && /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxs("div", { className: "border-sm border-border1 rounded-lg bg-surface4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "px-4 border-b-sm border-border1 py-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool arguments" }),
-        argSlot
-      ] }),
-      result !== void 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
-        typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result })
-      ] })
-    ] }) })
-  ] });
-};
-
-const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
-  const [runs, setRuns] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const client = useMastraClient();
-  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);
-        toast.error("Error fetching workflow");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchWorkflow();
-  }, [workflowId, enabled]);
-  return { runs, isLoading };
+    result !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
+      typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result })
+    ] })
+  ] }) });
 };
 
 function Skeleton({ className, ...props }) {
@@ -4409,37 +4386,12 @@ function Skeleton({ className, ...props }) {
 }
 
 const useWorkflow = (workflowId) => {
-  const [workflow, setWorkflow] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
   const client = useMastraClient();
-  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");
-          toast.error("Error fetching workflow");
-          return;
-        }
-        setWorkflow(res);
-      } catch (error) {
-        setWorkflow(null);
-        console.error("Error fetching workflow", error);
-        toast.error("Error fetching workflow");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchWorkflow();
-  }, [workflowId]);
-  return { workflow, isLoading };
+  return useQuery({
+    queryKey: ["workflow", workflowId],
+    queryFn: () => client.getWorkflow(workflowId).details(),
+    retry: false
+  });
 };
 const useLegacyWorkflow = (workflowId) => {
   const [legacyWorkflow, setLegacyWorkflow] = useState(null);
@@ -5491,6 +5443,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 = createContext({});
 function WorkflowRunProvider({
@@ -6099,7 +6199,7 @@ function Spinner({ color = "#fff", className }) {
   return /* @__PURE__ */ 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",
@@ -6150,7 +6250,6 @@ function LegacyWorkflowNestedGraph({
       onNodesChange,
       children: [
         /* @__PURE__ */ jsx(Controls, {}),
-        /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Lines, gap: 12, size: 0.5 })
       ]
     }
@@ -6253,7 +6352,6 @@ function LegacyWorkflowGraphInner({ workflow }) {
       },
       children: [
         /* @__PURE__ */ jsx(Controls, {}),
-        /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "#121212", bgColor: "#171717", nodeColor: "#2c2c2c" }),
         /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 12, size: 0.5 })
       ]
     }
@@ -7451,7 +7549,6 @@ function WorkflowNestedGraph({
       onNodesChange,
       children: [
         /* @__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 })
       ]
     }
@@ -7629,7 +7726,6 @@ function WorkflowGraphInner({ workflow, onShowTrace, onSendEvent }) {
       maxZoom: 1,
       children: [
         /* @__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 })
       ]
     }
@@ -8408,44 +8504,83 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsx("div", { className: "flex
   }
 ) });
 
-const WorkflowBadge = ({ workflow, result, workflowId }) => {
-  const [isCollapsed, setIsCollapsed] = useState(true);
-  return /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => setIsCollapsed((s) => !s),
-        className: "flex items-center gap-2 disabled:cursor-not-allowed",
-        type: "button",
-        children: [
-          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("transition-all", isCollapsed ? "rotate-90" : "rotate-180") }) }),
-          /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name })
-        ]
-      }
-    ),
-    !isCollapsed && /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId: result?.runId })
+const useHandleAgentWorkflowStream = (workflowOutput) => {
+  const [streamResult, setStreamResult] = useState({});
+  useEffect(() => {
+    if (!workflowOutput) return;
+    setStreamResult((prev) => mapWorkflowStreamChunkToWatchResult(prev, workflowOutput));
+  }, [workflowOutput]);
+  return streamResult;
+};
+
+const useWorkflowRuns = (workflowId, { enabled = true } = {}) => {
+  const client = useMastraClient();
+  return 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__ */ jsxs(BadgeWrapper, { icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), title: workflow.name, initialCollapsed: false, children: [
+    !isStreaming && !isLoading && /* @__PURE__ */ jsx(WorkflowRunProvider, { snapshot, children: /* @__PURE__ */ jsx(WorkflowBadgeExtended, { workflowId, workflow, runId }) }),
+    isStreaming && /* @__PURE__ */ 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__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx("div", { className: "border-sm border-border1 rounded-lg bg-surface4", children: /* @__PURE__ */ jsx("div", { className: "p-4 border-b-sm border-border1", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[50vh]", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2", children: [
       /* @__PURE__ */ jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph`, children: "Go to workflow" }),
       /* @__PURE__ */ jsx(Button$1, { as: Link, href: `/workflows/${workflowId}/graph/${runId}`, children: "See run" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "rounded-md overflow-hidden h-[60vh] w-full", children: /* @__PURE__ */ jsx(WorkflowRunProvider, { snapshot: typeof run?.snapshot === "object" ? run.snapshot : void 0, children: /* @__PURE__ */ jsx(WorkflowGraph, { workflowId, workflow }) }) })
-  ] }) }) }) });
+    /* @__PURE__ */ jsx("div", { className: "rounded-md overflow-hidden h-[60vh] w-full", children: /* @__PURE__ */ jsx(WorkflowGraph, { workflowId, workflow }) })
+  ] });
+};
+const useWorkflowStream = (partialWorkflowOutput) => {
+  const streamResult = useHandleAgentWorkflowStream(partialWorkflowOutput);
+  const { setResult } = useContext(WorkflowRunContext);
+  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__ */ jsx(
+    BadgeWrapper,
+    {
+      icon: /* @__PURE__ */ jsx(Spinner, { color: IconColors.icon3 }),
+      title: /* @__PURE__ */ jsx(Skeleton, { className: "ml-2 w-12 h-2" }),
+      collapsible: false
+    }
+  );
+};
+
+const ToolFallback$1 = ({ toolName, argsText, result, args, ...props }) => {
+  return /* @__PURE__ */ jsx(WorkflowRunProvider, { children: /* @__PURE__ */ 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__ */ jsx(LoadingBadge, {});
   if (workflow) {
-    return /* @__PURE__ */ jsx(WorkflowBadge, { workflowId: toolName, workflow, result });
+    return /* @__PURE__ */ jsx(
+      WorkflowBadge,
+      {
+        workflowId: toolName,
+        workflow,
+        isStreaming: args.__mastraMetadata?.isStreaming,
+        runId: result?.runId
+      }
+    );
   }
   return /* @__PURE__ */ jsx(ToolBadge, { toolName, argsText, result });
 };
@@ -9057,7 +9192,7 @@ const Thread = ({ ToolFallback, agentName, agentId, hasMemory, onInputChange })
   const WrappedAssistantMessage = (props) => {
     return /* @__PURE__ */ jsx(AssistantMessage, { ...props, ToolFallback });
   };
-  return /* @__PURE__ */ jsx(AgentProvider, { agentId, children: /* @__PURE__ */ jsxs(ThreadWrapper$1, { children: [
+  return /* @__PURE__ */ jsxs(ThreadWrapper$1, { children: [
     /* @__PURE__ */ jsxs(ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
       /* @__PURE__ */ jsx(ThreadWelcome$1, { agentName }),
       /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto px-4 pb-7", children: /* @__PURE__ */ jsx(
@@ -9073,7 +9208,7 @@ const Thread = ({ ToolFallback, agentName, agentId, hasMemory, onInputChange })
       /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
     ] }),
     /* @__PURE__ */ jsx(Composer$1, { hasMemory, onInputChange, agentId })
-  ] }) });
+  ] });
 };
 const ThreadWrapper$1 = ({ children }) => {
   return /* @__PURE__ */ jsx(ThreadPrimitive.Root, { className: "grid grid-rows-[1fr_auto] h-full overflow-y-auto", children });
@@ -9759,6 +9894,37 @@ function MastraRuntimeProvider({
                   updater();
                   break;
                 }
+                case "tool-output": {
+                  if (!chunk.payload.output?.type.startsWith("workflow-")) return;
+                  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];
@@ -9771,7 +9937,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 }] : [],
@@ -9779,7 +9951,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
+                              }
+                            }
                           }
                         ]
                       };
@@ -9795,7 +9973,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 }
+                          }
                         }
                       ]
                     };
@@ -12958,8 +13139,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__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsx(DialogContent, { className: "h-[90vh] w-[90%] max-w-[unset]", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 h-full", children: [
     /* @__PURE__ */ jsx(DialogTitle, { children: "Workflow details" }),
@@ -14569,7 +14750,8 @@ function EntryList({
   perPage,
   columns,
   searchTerm,
-  setEndOfListElement
+  setEndOfListElement,
+  errorMsg
 }) {
   const loadingItems = Array.from({ length: 3 }).map((_, index) => {
     return {
@@ -14593,8 +14775,24 @@ function EntryList({
         children: columns?.map((col) => /* @__PURE__ */ jsx("span", { children: col.label || col.name }, col.name))
       }
     ) }),
-    !isLoading && items?.length === 0 && /* @__PURE__ */ jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    errorMsg && !isLoading && /* @__PURE__ */ jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ 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__ */ jsx(TriangleAlertIcon, {}),
+          " ",
+          errorMsg || "Something went wrong while fetching the data."
+        ]
+      }
+    ) }),
+    !isLoading && !errorMsg && items?.length === 0 && /* @__PURE__ */ jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ 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__ */ jsx(
           EntryListItem,
@@ -14927,8 +15125,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"
@@ -15333,7 +15531,7 @@ const DefaultTrigger = React.forwardRef(
   ({ value, placeholder, className, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(Button, { ref, variant: "outline", className: cn("justify-start", className), ...props, children: [
       /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" }),
-      value ? /* @__PURE__ */ jsx("span", { className: "text-white", children: format(value, "PPP p") }) : /* @__PURE__ */ jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
+      value ? /* @__PURE__ */ jsx("span", { className: "text-white", children: format(value, "PP p") }) : /* @__PURE__ */ jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
     ] });
   }
 );
@@ -15343,8 +15541,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
@@ -16822,7 +17020,8 @@ function TraceTimelineSpan({
   selectedSpanId,
   isLastChild,
   overallLatency,
-  overallStartTime
+  overallStartTime,
+  overallEndTime
 }) {
   const { Link } = useLinkComponent();
   const [isHovered, setIsHovered] = useState(false);
@@ -16877,7 +17076,7 @@ function TraceTimelineSpan({
           onMouseEnter: () => setIsHovered(true),
           onMouseLeave: () => setIsHovered(false),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "text-left text-[0.75rem] relative w-full h-[1.4rem] ", children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("div", { className: "text-left text-[0.75rem] relative w-full h-[1.4rem] min-w-[6rem]", children: /* @__PURE__ */ jsxs(
               "span",
               {
                 className: cn(
@@ -17032,6 +17231,7 @@ function TraceTimeline({
 }) {
   const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
   const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  const overallEndTime = hierarchicalSpans?.[0]?.endTime || "";
   return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-[1rem]", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between pr-[2.5rem]", children: [
       /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", children: [
@@ -17055,10 +17255,10 @@ function TraceTimeline({
     ) : /* @__PURE__ */ 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__ */ jsx(
           TraceTimelineSpan,
           {
@@ -17066,7 +17266,8 @@ function TraceTimeline({
             onSpanClick,
             selectedSpanId,
             overallLatency,
-            overallStartTime
+            overallStartTime,
+            overallEndTime
           },
           span.id
         ))
@@ -17256,7 +17457,7 @@ function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
   if (withSpanId) {
     baseInfo.unshift({
       key: "spanId",
-      label: "Span Id",
+      label: "#",
       value: span?.spanId
     });
   }
@@ -17293,7 +17494,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__ */ jsxs("div", { className: "flex items-center justify-between pr-[1.5rem]", children: [
           /* @__PURE__ */ jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
@@ -17401,7 +17602,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__ */ jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxs(TextAndIcon, { children: [
             /* @__PURE__ */ jsx(EyeIcon, {}),
@@ -17427,7 +17628,7 @@ function TraceDialog({
                     traceId
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto pb-[2.5rem]", children: [
+                /* @__PURE__ */ jsxs("div", { className: cn("overflow-y-auto pb-[2.5rem]"), children: [
                   traceDetails?.metadata?.usage && /* @__PURE__ */ jsx(
                     TraceSpanUsage,
                     {
@@ -17467,7 +17668,7 @@ function TraceDialog({
                           ] }),
                           "›",
                           /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-                            /* @__PURE__ */ jsx(EyeIcon, {}),
+                            /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
                             " ",
                             getShortId(selectedSpanId)
                           ] })
@@ -17554,7 +17755,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
         }
@@ -17566,7 +17767,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
         }
@@ -18181,5 +18382,5 @@ const MemorySearch = ({
   ] });
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorerList, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorerList, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListItem, EntryListPageHeader, EntryListStatusCell, EntryListTextCell, EntryListToolbar, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, SearchField, Searchbar, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToWatchResult, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, mapWorkflowStreamChunkToWatchResult, providerMapToIcon, spanTypePrefixes, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map