@mastra/playground-ui 5.0.4 → 5.1.0-alpha.1

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, X, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, PlusIcon, TrashIcon, Plus, Loader2 } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, X, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, PlusIcon, TrashIcon, Plus, Loader2, CirclePause } from 'lucide-react';
 import * as React from 'react';
-import React__default, { forwardRef, memo, useState, useMemo, useRef, useEffect, createContext, useContext, useCallback, Suspense, Fragment as Fragment$1 } 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';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -38,13 +38,13 @@ import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
 import z$1, { z, ZodObject } from 'zod';
 import { AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
 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 { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
@@ -2890,6 +2890,46 @@ const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
+const ImageWithFallback = ({ alt, src, ...rest }) => {
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    setError(false);
+  }, [src]);
+  return error || !src ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        width: "150",
+        height: "150",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-xs italic text-muted-foreground -mt-[0.625rem] mb-[0.625rem]", children: "Image link is broken" })
+  ] }) : /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      ...rest,
+      onError: () => {
+        setError(true);
+      }
+    }
+  );
+};
+
 const SyntaxHighlighter$2 = makePrismAsyncSyntaxHighlighter({
   style: coldarkDark,
   customStyle: {
@@ -3109,10 +3149,12 @@ const defaultComponents = unstable_memoizeMarkdownComponents({
     );
   },
   CodeHeader,
-  SyntaxHighlighter: SyntaxHighlighter$2
+  SyntaxHighlighter: SyntaxHighlighter$2,
+  img: ImageWithFallback
 });
 
 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"
 };
@@ -3491,10 +3533,10 @@ const GithubIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "15", height:
     "path",
     {
       d: "M7.5 0.75C3.6325 0.75 0.5 3.8825 0.5 7.75C0.5 10.8475 2.50375 13.4637 5.28625 14.3912C5.63625 14.4525 5.7675 14.2425 5.7675 14.0587C5.7675 13.8925 5.75875 13.3412 5.75875 12.755C4 13.0787 3.545 12.3262 3.405 11.9325C3.32625 11.7312 2.985 11.11 2.6875 10.9437C2.4425 10.8125 2.0925 10.4887 2.67875 10.48C3.23 10.4712 3.62375 10.9875 3.755 11.1975C4.385 12.2562 5.39125 11.9587 5.79375 11.775C5.855 11.32 6.03875 11.0137 6.24 10.8387C4.6825 10.6637 3.055 10.06 3.055 7.3825C3.055 6.62125 3.32625 5.99125 3.7725 5.50125C3.7025 5.32625 3.4575 4.60875 3.8425 3.64625C3.8425 3.64625 4.42875 3.4625 5.7675 4.36375C6.3275 4.20625 6.9225 4.1275 7.5175 4.1275C8.1125 4.1275 8.7075 4.20625 9.2675 4.36375C10.6062 3.45375 11.1925 3.64625 11.1925 3.64625C11.5775 4.60875 11.3325 5.32625 11.2625 5.50125C11.7087 5.99125 11.98 6.6125 11.98 7.3825C11.98 10.0687 10.3438 10.6637 8.78625 10.8387C9.04 11.0575 9.25875 11.4775 9.25875 12.1337C9.25875 13.07 9.25 13.8225 9.25 14.0587C9.25 14.2425 9.38125 14.4612 9.73125 14.3912C11.1209 13.9221 12.3284 13.029 13.1839 11.8377C14.0393 10.6463 14.4996 9.21668 14.5 7.75C14.5 3.8825 11.3675 0.75 7.5 0.75Z",
-      fill: "white"
+      fill: "currentColor"
     }
   ) }),
-  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_21999_22095", children: /* @__PURE__ */ jsx("rect", { width: "14", height: "14", fill: "white", transform: "translate(0.5 0.75)" }) }) })
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_21999_22095", children: /* @__PURE__ */ jsx("rect", { width: "14", height: "14", fill: "currentColor", transform: "translate(0.5 0.75)" }) }) })
 ] });
 
 const GoogleIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
@@ -3723,7 +3765,7 @@ const WorkflowIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "17", height
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.24388 2.4018C6.24388 2.0394 6.53767 1.74561 6.90008 1.74561H10.0991C10.4614 1.74561 10.7553 2.0394 10.7553 2.4018V4.57546C10.7553 4.93787 10.4614 5.23166 10.0991 5.23166H9.31982V7.35469L10.0033 9.22664C9.90442 9.20146 9.80035 9.1761 9.6915 9.14986L9.62652 9.13422C9.30473 9.05687 8.92256 8.96501 8.61993 8.84491C8.5819 8.82981 8.54147 8.81292 8.49957 8.79391C8.45767 8.81292 8.41724 8.82981 8.3792 8.84491C8.07657 8.96501 7.6944 9.05687 7.37261 9.13422L7.30763 9.14986C7.19879 9.1761 7.09471 9.20146 6.99577 9.22664L7.67932 7.35469V5.23166H6.90008C6.53767 5.23166 6.24388 4.93787 6.24388 4.57546V2.4018ZM6.99577 9.22664C6.99577 9.22664 6.99578 9.22664 6.99577 9.22664L6.43283 10.7683H6.81806C7.18047 10.7683 7.47426 11.0622 7.47426 11.4245V13.5982C7.47426 13.9606 7.18047 14.2544 6.81806 14.2544H3.61909C3.25668 14.2544 2.96289 13.9606 2.96289 13.5982V11.4245C2.96289 11.0622 3.25668 10.7683 3.61909 10.7683H4.26617C4.2921 10.4663 4.32783 10.1494 4.37744 9.85171C4.43762 9.49063 4.52982 9.08135 4.68998 8.76102C4.93975 8.2615 5.44743 8.01751 5.7771 7.88788C6.14684 7.74249 6.57537 7.63889 6.92317 7.55505C7.24707 7.47696 7.49576 7.41679 7.67932 7.35469L6.99577 9.22664ZM6.43283 10.7683L6.99577 9.22664C6.75846 9.28705 6.55067 9.34646 6.37745 9.41458C6.22784 9.47341 6.1623 9.51712 6.14023 9.53254C6.09752 9.63631 6.04409 9.83055 5.99562 10.1214C5.96201 10.3231 5.93498 10.5439 5.91341 10.7683H6.43283ZM10.0033 9.22664L9.31982 7.35469C9.50338 7.41679 9.75206 7.47696 10.076 7.55505C10.4238 7.63889 10.8523 7.74249 11.2221 7.88788C11.5517 8.01751 12.0594 8.2615 12.3091 8.76102C12.4693 9.08135 12.5615 9.49063 12.6217 9.85171C12.6713 10.1494 12.707 10.4663 12.733 10.7683H13.38C13.7424 10.7683 14.0362 11.0622 14.0362 11.4245V13.5982C14.0362 13.9606 13.7424 14.2544 13.38 14.2544H10.1811C9.81867 14.2544 9.52488 13.9606 9.52488 13.5982V11.4245C9.52488 11.0622 9.81867 10.7683 10.1811 10.7683H10.5663L10.0033 9.22664ZM10.0033 9.22664L10.5663 10.7683H11.0857C11.0642 10.5439 11.0372 10.3231 11.0035 10.1214C10.9551 9.83055 10.9016 9.63631 10.8589 9.53254C10.8369 9.51712 10.7713 9.47341 10.6217 9.41458C10.4485 9.34646 10.2407 9.28705 10.0033 9.22664Z",
-    fill: "white"
+    fill: "currentColor"
   }
 ) });
 
@@ -3856,7 +3898,10 @@ const AssistantMessage = ({
     /* @__PURE__ */ jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsx(
       MessagePrimitive.Content,
       {
-        components: { Text: MarkdownText, tools: { Fallback: ToolFallbackCustom || ToolFallback$1 } }
+        components: {
+          Text: MarkdownText,
+          tools: { Fallback: ToolFallbackCustom || ToolFallback$1 }
+        }
       }
     ) }),
     /* @__PURE__ */ jsx("div", { className: "h-6 pt-1", children: !isSolelyToolCall && /* @__PURE__ */ jsx(AssistantActionBar, {}) })
@@ -3920,13 +3965,27 @@ const useAutoscroll = (ref, { enabled = true }) => {
   }, [enabled, ref]);
 };
 
-const Thread = ({ ToolFallback, agentName }) => {
+const variants = {
+  "header-md": "text-header-md leading-header-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-xs": "text-ui-xs leading-ui-xs"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
+
+const Thread = ({ ToolFallback, agentName, hasMemory }) => {
   const areaRef = useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
     return /* @__PURE__ */ jsx(AssistantMessage, { ...props, ToolFallback });
   };
-  return /* @__PURE__ */ jsxs(ThreadPrimitive.Root, { className: "max-w-[568px] w-full mx-auto h-[calc(100%-100px)] px-4", children: [
+  return /* @__PURE__ */ jsxs(ThreadPrimitive.Root, { className: "max-w-[568px] w-full mx-auto h-[calc(100%-110px)] px-4", children: [
     /* @__PURE__ */ jsxs(ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(ThreadWelcome, { agentName }),
@@ -3943,7 +4002,7 @@ const Thread = ({ ToolFallback, agentName }) => {
       ] }),
       /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsx(Composer, {})
+    /* @__PURE__ */ jsx(Composer, { hasMemory })
   ] });
 };
 const ThreadWelcome = ({ agentName }) => {
@@ -3962,19 +4021,25 @@ const ThreadWelcome = ({ agentName }) => {
     /* @__PURE__ */ jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer = () => {
-  return /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
-    /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none",
-        autoFocus: true,
-        placeholder: "Enter your message...",
-        name: "",
-        id: ""
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(ComposerAction, {}) })
+const Composer = ({ hasMemory }) => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
+      /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none",
+          autoFocus: true,
+          placeholder: "Enter your message...",
+          name: "",
+          id: ""
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(ComposerAction, {}) })
+    ] }),
+    !hasMemory && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3 flex items-center gap-2 pt-0.5", children: [
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
+      "Memory is not enabled. The conversation will not be persisted."
+    ] })
   ] });
 };
 const ComposerAction = () => {
@@ -4316,6 +4381,20 @@ function MastraRuntimeProvider({
   ] });
 }
 
+const useAgentStore = create()(
+  persist(
+    (set) => ({
+      modelSettings: {},
+      setModelSettings: (modelSettings) => set((state) => ({ modelSettings: { ...state.modelSettings, ...modelSettings } })),
+      chatWithGenerate: {},
+      setChatWithGenerate: (chatWithGenerate) => set((state) => ({ chatWithGenerate: { ...state.chatWithGenerate, ...chatWithGenerate } }))
+    }),
+    {
+      name: "mastra-agent-store"
+    }
+  )
+);
+
 const defaultModelSettings$1 = {
   maxRetries: 2,
   maxSteps: 5,
@@ -4323,12 +4402,24 @@ const defaultModelSettings$1 = {
   topP: 1
 };
 const AgentContext = createContext({});
-function AgentProvider({ children }) {
-  const [modelSettings, setModelSettings] = useState(defaultModelSettings$1);
-  const [chatWithGenerate, setChatWithGenerate] = useState(false);
+function AgentProvider({ agentId, children }) {
+  const {
+    modelSettings: modelSettingsStore,
+    setModelSettings: setModelSettingsStore,
+    chatWithGenerate: chatWithGenerateStore,
+    setChatWithGenerate: setChatWithGenerateStore
+  } = useAgentStore();
+  const modelSettings = modelSettingsStore[agentId] || defaultModelSettings$1;
+  const setModelSettings = (modelSettings2) => {
+    setModelSettingsStore({ [agentId]: modelSettings2 });
+  };
   const resetModelSettings = () => {
     setModelSettings(defaultModelSettings$1);
   };
+  const chatWithGenerate = chatWithGenerateStore[agentId] || false;
+  const setChatWithGenerate = (chatWithGenerate2) => {
+    setChatWithGenerateStore({ [agentId]: chatWithGenerate2 });
+  };
   return /* @__PURE__ */ jsx(
     AgentContext.Provider,
     {
@@ -4380,7 +4471,7 @@ const AgentChat = ({
       modelSettings,
       chatWithGenerate,
       runtimeContext,
-      children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "" }) })
+      children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4 bg-surface1", children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory }) })
     }
   );
 };
@@ -4440,18 +4531,18 @@ function FormattedDate({ date }) {
 }
 
 const inputVariants = cva(
-  "flex w-full text-mastra-el-6 rounded-sm border bg-transparent shadow-sm focus-visible:ring-ring transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full text-icon6 rounded-lg border bg-transparent shadow-sm focus-visible:ring-ring transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "border-mastra-border-1 border-border-1 placeholder:text-muted-foreground",
-        filled: "bg-inputFill border-border-1 placeholder:text-muted-foreground",
-        unstyled: "border-0 bg-transparent placeholder:text-muted-foreground focus-visible:ring-transparent focus-visible:outline-none"
+        default: "border-sm border-border1 placeholder:text-icon3",
+        filled: "border-sm bg-inputFill border-border1 placeholder:text-icon3",
+        unstyled: "border-0 bg-transparent placeholder:text-icon3 focus-visible:ring-transparent focus-visible:outline-none"
       },
       customSize: {
-        default: "px-[13px] text-[calc(13_/_16_*_1rem)] h-[34px]",
+        default: "px-[13px] text-[calc(13_/_16_*_1rem)] h-8",
         sm: "h-[30px] px-[13px] text-xs",
-        lg: "h-10 px-[17px] rounded-md text-[calc(13_/_16_*_1rem)]"
+        lg: "h-10 px-[17px] text-[calc(13_/_16_*_1rem)]"
       }
     },
     defaultVariants: {
@@ -4930,20 +5021,6 @@ const Row = ({ className, children, selected = false, onClick }) => {
   );
 };
 
-const variants = {
-  "header-md": "text-header-md leading-header-md",
-  "ui-lg": "text-ui-lg leading-ui-lg",
-  "ui-md": "text-ui-md leading-ui-md",
-  "ui-sm": "text-ui-sm leading-ui-sm",
-  "ui-xs": "text-ui-xs leading-ui-xs"
-};
-const fonts = {
-  mono: "font-mono"
-};
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
-};
-
 const formatDateCell = (date) => {
   const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date).toUpperCase();
   const day = date.getDate();
@@ -5166,11 +5243,17 @@ const TraceTree = ({ children }) => {
 const variantClasses = {
   agent: "bg-accent1"
 };
-const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
+const Time = ({ durationMs, tokenCount, variant, progressPercent, offsetPercent }) => {
   const variantClass = variant ? variantClasses[variant] : "bg-accent3";
   const percent = Math.min(100, progressPercent);
   return /* @__PURE__ */ jsxs("div", { className: "w-[80px] xl:w-[166px] shrink-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: clsx("absolute h-1 rounded-full", variantClass), style: { width: `${percent}%` } }) }),
+    /* @__PURE__ */ jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx("absolute h-1 rounded-full", variantClass),
+        style: { width: `${percent}%`, left: `${offsetPercent}%` }
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
       /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
         toSigFigs(durationMs, 3),
@@ -5184,14 +5267,6 @@ const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
   ] });
 };
 
-const TraceDurationContext = createContext(0);
-const useTraceDuration = () => {
-  return useContext(TraceDurationContext);
-};
-const TraceDurationProvider = ({ children, durationMs }) => {
-  return /* @__PURE__ */ jsx(TraceDurationContext.Provider, { value: durationMs, children });
-};
-
 const spanIconMap = {
   tool: ToolsIcon,
   agent: AgentIcon,
@@ -5212,14 +5287,25 @@ const spanVariantClasses = {
   eval: "text-accent4",
   other: "text-icon6"
 };
-const Span = ({ children, durationMs, variant, tokenCount, spans, isRoot, onClick, isActive }) => {
+const Span = ({
+  children,
+  durationMs,
+  variant,
+  tokenCount,
+  spans,
+  isRoot,
+  onClick,
+  isActive,
+  offsetMs,
+  totalDurationMs
+}) => {
   const [isExpanded, setIsExpanded] = useState(true);
-  const traceDuration = useTraceDuration();
   const VariantIcon = spanIconMap[variant];
   const variantClass = spanVariantClasses[variant];
-  const progressPercent = durationMs / traceDuration * 100;
+  const progressPercent = durationMs / totalDurationMs * 100;
+  const offsetPercent = offsetMs / totalDurationMs * 100;
   const TextEl = onClick ? "button" : "div";
-  return /* @__PURE__ */ jsx(TraceDurationProvider, { durationMs, children: /* @__PURE__ */ jsxs("li", { children: [
+  return /* @__PURE__ */ jsxs("li", { children: [
     /* @__PURE__ */ jsxs("div", { className: clsx("flex justify-between items-center gap-2 rounded-md pl-2", isActive && "bg-surface4"), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1 min-w-0", children: [
         spans ? /* @__PURE__ */ jsx(
@@ -5244,20 +5330,30 @@ const Span = ({ children, durationMs, variant, tokenCount, spans, isRoot, onClic
           durationMs,
           tokenCount,
           variant: variant === "agent" ? "agent" : void 0,
-          progressPercent
+          progressPercent,
+          offsetPercent
         }
       )
     ] }),
     isExpanded && spans && /* @__PURE__ */ jsx("div", { className: "ml-4", children: spans })
-  ] }) });
+  ] });
 };
 
 const Spans = ({ children }) => {
   return /* @__PURE__ */ jsx("ol", { children });
 };
 
-const Trace = ({ name, spans, durationMs, tokenCount, onClick, variant, isActive }) => {
-  return /* @__PURE__ */ jsx(TraceDurationProvider, { durationMs, children: /* @__PURE__ */ jsx(
+const Trace = ({
+  name,
+  spans,
+  durationMs,
+  tokenCount,
+  onClick,
+  variant,
+  isActive,
+  totalDurationMs
+}) => {
+  return /* @__PURE__ */ jsx(
     Span,
     {
       isRoot: true,
@@ -5266,9 +5362,11 @@ const Trace = ({ name, spans, durationMs, tokenCount, onClick, variant, isActive
       spans: /* @__PURE__ */ jsx(Spans, { children: spans }),
       onClick,
       isActive,
+      offsetMs: 0,
+      totalDurationMs,
       children: name
     }
-  ) });
+  );
 };
 
 const getSpanVariant = (span) => {
@@ -5293,40 +5391,71 @@ const getSpanVariant = (span) => {
   return "other";
 };
 
-function buildTree(items, parentSpanId = null) {
-  return items.filter((item) => item.parentSpanId === parentSpanId).map((item) => ({
-    ...item,
-    children: buildTree(items, item.id)
-  }));
+function buildTree(spans, minStartTime, totalDurationMs, parentSpanId = null) {
+  return spans.filter((span) => span.parentSpanId === parentSpanId).map((span) => {
+    return {
+      ...span,
+      children: buildTree(spans, minStartTime, totalDurationMs, span.id),
+      offset: (span.startTime - minStartTime) / 1e3,
+      // ns to ms
+      duration: span.duration / 1e3,
+      totalDurationMs
+    };
+  });
 }
-const NestedSpans = ({ spans }) => {
+const createSpanTree = (spans) => {
+  if (spans.length === 0) return [];
+  let minStartTime;
+  let maxEndTime;
+  const orderedTree = [];
+  const listSize = spans.length;
+  for (let i = listSize - 1; i >= 0; i--) {
+    const span = spans[i];
+    if (!minStartTime || span.startTime < minStartTime) {
+      minStartTime = span.startTime;
+    }
+    if (!maxEndTime || span.endTime > maxEndTime) {
+      maxEndTime = span.endTime;
+    }
+    if (span.name !== ".insert" && span.name !== "mastra.getStorage") {
+      orderedTree.push(span);
+    }
+  }
+  if (!minStartTime || !maxEndTime) return [];
+  const totalDurationMs = (maxEndTime - minStartTime) / 1e3;
+  return buildTree(orderedTree, minStartTime, totalDurationMs);
+};
+
+const NestedSpans = ({ spanNodes }) => {
   const { span: activeSpan, setSpan } = useContext(TraceContext);
-  return /* @__PURE__ */ jsx(Spans, { children: spans.map((span) => {
-    const isActive = span.id === activeSpan?.id;
+  return /* @__PURE__ */ jsx(Spans, { children: spanNodes.map((spanNode) => {
+    const isActive = spanNode.id === activeSpan?.id;
     return /* @__PURE__ */ jsx(
       Span,
       {
-        spans: span.children.length > 0 && /* @__PURE__ */ jsx(NestedSpans, { spans: span.children }),
-        durationMs: span.duration / 1e3,
-        variant: getSpanVariant(span),
+        spans: spanNode.children.length > 0 && /* @__PURE__ */ jsx(NestedSpans, { spanNodes: spanNode.children }),
+        durationMs: spanNode.duration,
+        offsetMs: spanNode.offset,
+        variant: getSpanVariant(spanNode),
         isActive,
-        onClick: () => setSpan(span),
-        children: span.name
+        onClick: () => setSpan(spanNode),
+        totalDurationMs: spanNode.totalDurationMs,
+        children: spanNode.name
       },
-      span.id
+      spanNode.id
     );
   }) });
 };
 function SpanView({ trace }) {
-  const shallowCopy = [...trace];
-  const tree = buildTree(shallowCopy.reverse());
   const { span: activeSpan, setSpan } = useContext(TraceContext);
+  const tree = createSpanTree(trace);
   return /* @__PURE__ */ jsx(TraceTree, { children: tree.map((node) => /* @__PURE__ */ jsx(
     Trace,
     {
       name: node.name,
-      durationMs: node.duration / 1e3,
-      spans: /* @__PURE__ */ jsx(NestedSpans, { spans: node.children }),
+      durationMs: node.duration,
+      totalDurationMs: node.totalDurationMs,
+      spans: /* @__PURE__ */ jsx(NestedSpans, { spanNodes: node.children }),
       variant: getSpanVariant(node),
       isActive: node.id === activeSpan?.id,
       onClick: () => setSpan(node)
@@ -5462,8 +5591,7 @@ const refineTraces = (traces, isWorkflow = false) => {
     const parentSpan = value.find((span) => !span.parentSpanId || !listOfSpanIds.has(span.parentSpanId));
     const enrichedSpans = value.map((span) => ({
       ...span,
-      parentSpanId: parentSpan?.id === span.id ? null : span?.parentSpanId,
-      relativePercentage: parentSpan ? span.duration / parentSpan.duration : 0
+      parentSpanId: parentSpan?.id === span.id ? null : span?.parentSpanId
     }));
     const failedStatus = value.find((span) => span.status.code !== 0)?.status;
     return {
@@ -6074,7 +6202,7 @@ function WorkflowTracesInner({ traces, isLoading, error }) {
   ] });
 }
 
-const sanitizeVNexWorkflowWatchResult = (record) => {
+const sanitizeWorkflowWatchResult = (record) => {
   const formattedResults = Object.entries(record.payload.workflowState.steps || {}).reduce(
     (acc, [key, value]) => {
       let output = value.status === "success" ? value.output : void 0;
@@ -6109,8 +6237,8 @@ const sanitizeVNexWorkflowWatchResult = (record) => {
   };
   return sanitizedRecord;
 };
-const useWorkflow = (workflowId, baseUrl) => {
-  const [workflow, setWorkflow] = useState(null);
+const useLegacyWorkflow = (workflowId, baseUrl) => {
+  const [legacyWorkflow, setLegacyWorkflow] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const client = createMastraClient(baseUrl);
   useEffect(() => {
@@ -6118,22 +6246,22 @@ const useWorkflow = (workflowId, baseUrl) => {
       setIsLoading(true);
       try {
         if (!workflowId) {
-          setWorkflow(null);
+          setLegacyWorkflow(null);
           setIsLoading(false);
           return;
         }
-        const res = await client.getWorkflow(workflowId).details();
+        const res = await client.getLegacyWorkflow(workflowId).details();
         if (!res) {
-          setWorkflow(null);
-          console.error("Error fetching workflow");
-          toast.error("Error fetching workflow");
+          setLegacyWorkflow(null);
+          console.error("Error fetching legacy workflow");
+          toast.error("Error fetching legacy workflow");
           return;
         }
         const steps = res.steps;
         const stepsWithWorkflow = await Promise.all(
           Object.values(steps)?.map(async (step) => {
             if (!step.workflowId) return step;
-            const wFlow = await client.getWorkflow(step.workflowId).details();
+            const wFlow = await client.getLegacyWorkflow(step.workflowId).details();
             if (!wFlow) return step;
             return { ...step, stepGraph: wFlow.stepGraph, stepSubscriberGraph: wFlow.stepSubscriberGraph };
           })
@@ -6141,21 +6269,21 @@ const useWorkflow = (workflowId, baseUrl) => {
         const _steps = stepsWithWorkflow.reduce((acc, b) => {
           return { ...acc, [b.id]: b };
         }, {});
-        setWorkflow({ ...res, steps: _steps });
+        setLegacyWorkflow({ ...res, steps: _steps });
       } catch (error) {
-        setWorkflow(null);
-        console.error("Error fetching workflow", error);
-        toast.error("Error fetching workflow");
+        setLegacyWorkflow(null);
+        console.error("Error fetching legacy workflow", error);
+        toast.error("Error fetching legacy workflow");
       } finally {
         setIsLoading(false);
       }
     };
     fetchWorkflow();
   }, [workflowId]);
-  return { workflow, isLoading };
+  return { legacyWorkflow, isLoading };
 };
-const useVNextWorkflow = (workflowId, baseUrl) => {
-  const [vNextWorkflow, setVNextWorkflow] = useState(null);
+const useWorkflow = (workflowId, baseUrl) => {
+  const [workflow, setWorkflow] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const client = createMastraClient(baseUrl);
   useEffect(() => {
@@ -6163,14 +6291,14 @@ const useVNextWorkflow = (workflowId, baseUrl) => {
       setIsLoading(true);
       try {
         if (!workflowId) {
-          setVNextWorkflow(null);
+          setWorkflow(null);
           setIsLoading(false);
           return;
         }
-        const res = await client.getVNextWorkflow(workflowId).details();
-        setVNextWorkflow(res);
+        const res = await client.getWorkflow(workflowId).details();
+        setWorkflow(res);
       } catch (error) {
-        setVNextWorkflow(null);
+        setWorkflow(null);
         console.error("Error fetching workflow", error);
         toast.error("Error fetching workflow");
       } finally {
@@ -6179,13 +6307,13 @@ const useVNextWorkflow = (workflowId, baseUrl) => {
     };
     fetchWorkflow();
   }, [workflowId]);
-  return { vNextWorkflow, isLoading };
+  return { workflow, isLoading };
 };
 const useExecuteWorkflow = (baseUrl) => {
   const client = createMastraClient(baseUrl);
-  const createWorkflowRun = async ({ workflowId, prevRunId }) => {
+  const createLegacyWorkflowRun = async ({ workflowId, prevRunId }) => {
     try {
-      const workflow = client.getWorkflow(workflowId);
+      const workflow = client.getLegacyWorkflow(workflowId);
       const { runId: newRunId } = await workflow.createRun({ runId: prevRunId });
       return { runId: newRunId };
     } catch (error) {
@@ -6193,9 +6321,9 @@ const useExecuteWorkflow = (baseUrl) => {
       throw error;
     }
   };
-  const createVNextWorkflowRun = async ({ workflowId, prevRunId }) => {
+  const createWorkflowRun = async ({ workflowId, prevRunId }) => {
     try {
-      const workflow = client.getVNextWorkflow(workflowId);
+      const workflow = client.getWorkflow(workflowId);
       const { runId: newRunId } = await workflow.createRun({ runId: prevRunId });
       return { runId: newRunId };
     } catch (error) {
@@ -6203,16 +6331,20 @@ const useExecuteWorkflow = (baseUrl) => {
       throw error;
     }
   };
-  const startWorkflowRun = async ({ workflowId, runId, input }) => {
+  const startLegacyWorkflowRun = async ({
+    workflowId,
+    runId,
+    input
+  }) => {
     try {
-      const workflow = client.getWorkflow(workflowId);
+      const workflow = client.getLegacyWorkflow(workflowId);
       await workflow.start({ runId, triggerData: input || {} });
     } catch (error) {
       console.error("Error starting workflow run:", error);
       throw error;
     }
   };
-  const startVNextWorkflowRun = async ({
+  const startWorkflowRun = async ({
     workflowId,
     runId,
     input,
@@ -6223,14 +6355,14 @@ const useExecuteWorkflow = (baseUrl) => {
       Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
         runtimeContext.set(key, value);
       });
-      const workflow = client.getVNextWorkflow(workflowId);
+      const workflow = client.getWorkflow(workflowId);
       await workflow.start({ runId, inputData: input || {}, runtimeContext });
     } catch (error) {
       console.error("Error starting workflow run:", error);
       throw error;
     }
   };
-  const startAsyncVNextWorkflowRun = async ({
+  const startAsyncWorkflowRun = async ({
     workflowId,
     runId,
     input,
@@ -6241,7 +6373,7 @@ const useExecuteWorkflow = (baseUrl) => {
       Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
         runtimeContext.set(key, value);
       });
-      const workflow = client.getVNextWorkflow(workflowId);
+      const workflow = client.getWorkflow(workflowId);
       const result = await workflow.startAsync({ runId, inputData: input || {}, runtimeContext });
       return result;
     } catch (error) {
@@ -6252,17 +6384,17 @@ const useExecuteWorkflow = (baseUrl) => {
   return {
     startWorkflowRun,
     createWorkflowRun,
-    startVNextWorkflowRun,
-    createVNextWorkflowRun,
-    startAsyncVNextWorkflowRun
+    startLegacyWorkflowRun,
+    createLegacyWorkflowRun,
+    startAsyncWorkflowRun
   };
 };
 const useWatchWorkflow = (baseUrl) => {
+  const [isWatchingLegacyWorkflow, setIsWatchingLegacyWorkflow] = useState(false);
   const [isWatchingWorkflow, setIsWatchingWorkflow] = useState(false);
-  const [isWatchingVNextWorkflow, setIsWatchingVNextWorkflow] = useState(false);
+  const [legacyWatchResult, setLegacyWatchResult] = useState(null);
   const [watchResult, setWatchResult] = useState(null);
-  const [watchVNextResult, setWatchVNextResult] = useState(null);
-  const debouncedSetWatchResult = useDebouncedCallback((record) => {
+  const debouncedSetLegacyWorkflowWatchResult = useDebouncedCallback((record) => {
     const formattedResults = Object.entries(record.results || {}).reduce(
       (acc, [key, value]) => {
         let output = value.status === "success" ? value.output : void 0;
@@ -6285,19 +6417,19 @@ const useWatchWorkflow = (baseUrl) => {
       ...record,
       sanitizedOutput: record ? JSON.stringify({ ...record, results: formattedResults }, null, 2).slice(0, 5e4) : null
     };
-    setWatchResult(sanitizedRecord);
+    setLegacyWatchResult(sanitizedRecord);
   }, 100);
-  const watchWorkflow = async ({ workflowId, runId }) => {
+  const watchLegacyWorkflow = async ({ workflowId, runId }) => {
     try {
-      setIsWatchingWorkflow(true);
+      setIsWatchingLegacyWorkflow(true);
       const client = createMastraClient(baseUrl);
-      const workflow = client.getWorkflow(workflowId);
+      const workflow = client.getLegacyWorkflow(workflowId);
       await workflow.watch({ runId }, (record) => {
         try {
-          debouncedSetWatchResult(record);
+          debouncedSetLegacyWorkflowWatchResult(record);
         } catch (err) {
           console.error("Error processing workflow record:", err);
-          setWatchResult({
+          setLegacyWatchResult({
             ...record
           });
         }
@@ -6306,24 +6438,24 @@ const useWatchWorkflow = (baseUrl) => {
       console.error("Error watching workflow:", error);
       throw error;
     } finally {
-      setIsWatchingWorkflow(false);
+      setIsWatchingLegacyWorkflow(false);
     }
   };
-  const debouncedSetVNextWatchResult = useDebouncedCallback((record) => {
-    const sanitizedRecord = sanitizeVNexWorkflowWatchResult(record);
-    setWatchVNextResult(sanitizedRecord);
+  const debouncedSetWorkflowWatchResult = useDebouncedCallback((record) => {
+    const sanitizedRecord = sanitizeWorkflowWatchResult(record);
+    setWatchResult(sanitizedRecord);
   }, 100);
-  const watchVNextWorkflow = async ({ workflowId, runId }) => {
+  const watchWorkflow = async ({ workflowId, runId }) => {
     try {
-      setIsWatchingVNextWorkflow(true);
+      setIsWatchingWorkflow(true);
       const client = createMastraClient(baseUrl);
-      const workflow = client.getVNextWorkflow(workflowId);
+      const workflow = client.getWorkflow(workflowId);
       await workflow.watch({ runId }, (record) => {
         try {
-          debouncedSetVNextWatchResult(record);
+          debouncedSetWorkflowWatchResult(record);
         } catch (err) {
           console.error("Error processing workflow record:", err);
-          setWatchVNextResult({
+          setWatchResult({
             ...record
           });
         }
@@ -6332,40 +6464,40 @@ const useWatchWorkflow = (baseUrl) => {
       console.error("Error watching workflow:", error);
       throw error;
     } finally {
-      setIsWatchingVNextWorkflow(false);
+      setIsWatchingWorkflow(false);
     }
   };
   return {
+    watchLegacyWorkflow,
+    isWatchingLegacyWorkflow,
+    legacyWatchResult,
     watchWorkflow,
     isWatchingWorkflow,
-    watchResult,
-    watchVNextWorkflow,
-    isWatchingVNextWorkflow,
-    watchVNextResult
+    watchResult
   };
 };
 const useResumeWorkflow = (baseUrl) => {
+  const [isResumingLegacyWorkflow, setIsResumingLegacyWorkflow] = useState(false);
   const [isResumingWorkflow, setIsResumingWorkflow] = useState(false);
-  const [isResumingVNextWorkflow, setIsResumingVNextWorkflow] = useState(false);
-  const resumeWorkflow = async ({
+  const resumeLegacyWorkflow = async ({
     workflowId,
     stepId,
     runId,
     context
   }) => {
     try {
-      setIsResumingWorkflow(true);
+      setIsResumingLegacyWorkflow(true);
       const client = createMastraClient(baseUrl);
-      const response = await client.getWorkflow(workflowId).resume({ stepId, runId, context });
+      const response = await client.getLegacyWorkflow(workflowId).resume({ stepId, runId, context });
       return response;
     } catch (error) {
       console.error("Error resuming workflow:", error);
       throw error;
     } finally {
-      setIsResumingWorkflow(false);
+      setIsResumingLegacyWorkflow(false);
     }
   };
-  const resumeVNextWorkflow = async ({
+  const resumeWorkflow = async ({
     workflowId,
     step,
     runId,
@@ -6373,26 +6505,26 @@ const useResumeWorkflow = (baseUrl) => {
     runtimeContext: playgroundRuntimeContext
   }) => {
     try {
-      setIsResumingVNextWorkflow(true);
+      setIsResumingWorkflow(true);
       const client = createMastraClient(baseUrl);
       const runtimeContext = new RuntimeContext$1();
       Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
         runtimeContext.set(key, value);
       });
-      const response = await client.getVNextWorkflow(workflowId).resume({ step, runId, resumeData, runtimeContext });
+      const response = await client.getWorkflow(workflowId).resume({ step, runId, resumeData, runtimeContext });
       return response;
     } catch (error) {
       console.error("Error resuming workflow:", error);
       throw error;
     } finally {
-      setIsResumingVNextWorkflow(false);
+      setIsResumingWorkflow(false);
     }
   };
   return {
+    resumeLegacyWorkflow,
+    isResumingLegacyWorkflow,
     resumeWorkflow,
-    isResumingWorkflow,
-    resumeVNextWorkflow,
-    isResumingVNextWorkflow
+    isResumingWorkflow
   };
 };
 
@@ -6479,7 +6611,7 @@ const defaultEdgeOptions = {
     color: "#8e8e8e"
   }
 };
-const contructNodesAndEdges = ({
+const contructLegacyNodesAndEdges = ({
   stepGraph,
   stepSubscriberGraph,
   steps: mainSteps = {}
@@ -6930,7 +7062,7 @@ const getStepNodeAndEdge = ({
   }
   return { nodes: [], edges: [], nextPrevNodeIds: [] };
 };
-const constructVNextNodesAndEdges = ({
+const constructNodesAndEdges = ({
   stepGraph
 }) => {
   if (!stepGraph) {
@@ -7269,12 +7401,12 @@ function Spinner({ color = "#fff", className }) {
   );
 }
 
-function WorkflowNestedGraph({
+function LegacyWorkflowNestedGraph({
   stepGraph,
   stepSubscriberGraph,
   open
 }) {
-  const { nodes: initialNodes, edges: initialEdges } = contructNodesAndEdges({
+  const { nodes: initialNodes, edges: initialEdges } = contructLegacyNodesAndEdges({
     stepGraph,
     stepSubscriberGraph
   });
@@ -7312,10 +7444,10 @@ function WorkflowNestedGraph({
   ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
 }
 
-const WorkflowNestedGraphContext = createContext(
+const LegacyWorkflowNestedGraphContext = createContext(
   {}
 );
-function WorkflowNestedGraphProvider({ children }) {
+function LegacyWorkflowNestedGraphProvider({ children }) {
   const [stepGraph, setStepGraph] = useState(null);
   const [stepSubscriberGraph, setStepSubscriberGraph] = useState(null);
   const [openDialog, setOpenDialog] = useState(false);
@@ -7337,7 +7469,7 @@ function WorkflowNestedGraphProvider({ children }) {
     setOpenDialog(true);
   };
   return /* @__PURE__ */ jsxs(
-    WorkflowNestedGraphContext.Provider,
+    LegacyWorkflowNestedGraphContext.Provider,
     {
       value: {
         showNestedGraph,
@@ -7353,16 +7485,23 @@ function WorkflowNestedGraphProvider({ children }) {
               " workflow"
             ] })
           ] }),
-          /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowNestedGraph, { stepGraph, open: openDialog, stepSubscriberGraph }) })
+          /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+            LegacyWorkflowNestedGraph,
+            {
+              stepGraph,
+              open: openDialog,
+              stepSubscriberGraph
+            }
+          ) })
         ] }) }) })
       ]
     }
   );
 }
 
-function WorkflowNestedNode({ data }) {
+function LegacyWorkflowNestedNode({ data }) {
   const { label, withoutTopHandle, withoutBottomHandle, stepGraph, stepSubscriberGraph } = data;
-  const { showNestedGraph } = useContext(WorkflowNestedGraphContext);
+  const { showNestedGraph } = useContext(LegacyWorkflowNestedGraphContext);
   return /* @__PURE__ */ jsxs("div", { className: cn("bg-[rgba(29,29,29,0.5)] rounded-md h-full overflow-scroll w-[274px]"), children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsx("div", { className: "p-2 cursor-pointer", onClick: () => showNestedGraph({ label, stepGraph, stepSubscriberGraph }), children: /* @__PURE__ */ jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-1.5 rounded-sm p-2 cursor-pointer", children: [
@@ -7373,8 +7512,8 @@ function WorkflowNestedNode({ data }) {
   ] });
 }
 
-function WorkflowGraphInner({ workflow }) {
-  const { nodes: initialNodes, edges: initialEdges } = contructNodesAndEdges({
+function LegacyWorkflowGraphInner({ workflow }) {
+  const { nodes: initialNodes, edges: initialEdges } = contructLegacyNodesAndEdges({
     stepGraph: workflow.serializedStepGraph || workflow.stepGraph,
     stepSubscriberGraph: workflow.serializedStepSubscriberGraph || workflow.stepSubscriberGraph,
     steps: workflow.steps
@@ -7386,7 +7525,7 @@ function WorkflowGraphInner({ workflow }) {
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": WorkflowNestedNode
+    "nested-node": LegacyWorkflowNestedNode
   };
   return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxs(
     ReactFlow,
@@ -7413,12 +7552,12 @@ const lodashTitleCase = (str) => {
   return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
 };
 
-function WorkflowGraph({ workflowId, baseUrl }) {
-  const { workflow, isLoading } = useWorkflow(workflowId, baseUrl);
+function LegacyWorkflowGraph({ workflowId, baseUrl }) {
+  const { legacyWorkflow, isLoading } = useLegacyWorkflow(workflowId, baseUrl);
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
   }
-  if (!workflow) {
+  if (!legacyWorkflow) {
     return /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
       /* @__PURE__ */ jsx(AlertCircleIcon, {}),
       /* @__PURE__ */ jsxs("div", { children: [
@@ -7428,28 +7567,24 @@ function WorkflowGraph({ workflowId, baseUrl }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowGraphInner, { workflow }) }) });
+  return /* @__PURE__ */ jsx(LegacyWorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(LegacyWorkflowGraphInner, { workflow: legacyWorkflow }) }) });
 }
 
 const Form = React__default.forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx("form", { ref, className: "space-y-4", ...props, children });
 });
 
-const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
-Label.displayName = LabelPrimitive.Root.displayName;
-
 const DISABLED_LABELS = ["boolean", "object", "array"];
 const FieldWrapper = ({ label, children, id, field, error }) => {
   const isDisabled = DISABLED_LABELS.includes(field.type);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    !isDisabled && /* @__PURE__ */ jsxs(Label, { htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "pb-4 last:pb-0", children: [
+    !isDisabled && /* @__PURE__ */ jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3 pb-1 block", htmlFor: id, children: [
       label,
-      field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+      field.required && /* @__PURE__ */ jsx("span", { className: "text-accent2", children: " *" })
     ] }),
     children,
-    field.fieldConfig?.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.fieldConfig.description }),
-    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error })
+    field.fieldConfig?.description && /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon6", children: field.fieldConfig.description }),
+    error && /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-accent2", children: error })
   ] });
 };
 
@@ -7558,9 +7693,9 @@ const BooleanField = ({ field, label, id, inputProps, value }) => /* @__PURE__ *
       defaultChecked: field.default
     }
   ),
-  /* @__PURE__ */ jsxs(Label, { htmlFor: id, children: [
+  /* @__PURE__ */ jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3", htmlFor: id, children: [
     label,
-    field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+    field.required && /* @__PURE__ */ jsx("span", { className: "text-accent2", children: " *" })
   ] })
 ] });
 
@@ -7907,34 +8042,53 @@ const SelectField = ({ field, inputProps, error, id, value }) => {
 };
 
 const ObjectWrapper = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 border p-2 rounded-md", children: [
-    label === "​" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: label }),
-    children
-  ] });
-};
-
-const ArrayWrapper = ({ label, children, onAddItem }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: label }),
-    children,
+  const hasLabel = label !== "​" && label !== "";
+  return /* @__PURE__ */ jsxs("div", { className: "", children: [
+    hasLabel && /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 flex items-center gap-1 pb-2", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Braces, {}) }),
+      label
+    ] }),
     /* @__PURE__ */ jsx(
-      Button$1,
+      "div",
       {
-        className: "w-full flex items-center justify-center",
-        onClick: onAddItem,
-        variant: "outline",
-        size: "sm",
-        type: "button",
-        children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" })
+        className: hasLabel ? "flex flex-col gap-1 [&>*]:border-dashed [&>*]:border-l [&>*]:border-l-border1 [&>*]:pl-4" : "",
+        children
       }
     )
   ] });
 };
 
+const ArrayWrapper = ({ label, children, onAddItem }) => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-between", children: [
+      /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 pb-2 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Brackets, {}) }),
+        label
+      ] }),
+      /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onAddItem,
+            type: "button",
+            className: "text-icon3 bg-surface3 rounded-md p-1 hover:bg-surface4 hover:text-icon6 h-icon-sm w-icon-sm",
+            children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(PlusIcon, {}) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: "Add item" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children })
+  ] });
+};
+
 const ArrayElementWrapper = ({ children, onRemove }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "relative border p-4 rounded-md mt-2", children: [
-    /* @__PURE__ */ jsx(Button$1, { onClick: onRemove, variant: "ghost", className: "absolute top-2 right-2", type: "button", children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }) }),
-    children
+  return /* @__PURE__ */ jsxs("div", { className: "pl-4 border-l border-border1", children: [
+    children,
+    /* @__PURE__ */ jsxs(Button, { onClick: onRemove, type: "button", children: [
+      /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
+      "Delete"
+    ] })
   ] });
 };
 
@@ -8133,6 +8287,10 @@ class CustomZodProvider extends ZodProvider {
   }
 }
 
+const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
 function isEmptyZodObject(schema) {
   if (schema instanceof ZodObject) {
     return Object.keys(schema.shape).length === 0;
@@ -8144,7 +8302,7 @@ function DynamicForm({
   onSubmit,
   defaultValues,
   isSubmitLoading,
-  submitButtonLabel = "Submit"
+  submitButtonLabel
 }) {
   if (!schema) {
     console.error("no form schema found");
@@ -8166,17 +8324,17 @@ function DynamicForm({
     },
     defaultValues: defaultValues ? { "​": defaultValues } : void 0,
     formProps: {
-      className: "space-y-4 p-4"
+      className: ""
     },
     uiComponents: {
-      SubmitButton: ({ children }) => /* @__PURE__ */ jsx(Button$1, { className: "w-full", type: "submit", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : children || submitButtonLabel })
+      SubmitButton: ({ children }) => /* @__PURE__ */ jsx(Button, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children })
     },
     formComponents: {
       Label: ({ value }) => /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal", children: value })
     },
     withSubmit: true
   };
-  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsx(AutoForm, { ...formProps }) });
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsx(AutoForm, { ...formProps }) });
 }
 
 function resolveSerializedZodOutput(obj) {
@@ -8206,22 +8364,22 @@ function CodeBlockDemo({
 
 const WorkflowRunContext = createContext({});
 function WorkflowRunProvider({ children }) {
+  const [legacyResult, setLegacyResult] = useState(null);
   const [result, setResult] = useState(null);
-  const [vNextResult, setVNextResult] = useState(null);
   const [payload, setPayload] = useState(null);
   const clearData = () => {
+    setLegacyResult(null);
     setResult(null);
-    setVNextResult(null);
     setPayload(null);
   };
   return /* @__PURE__ */ jsx(
     WorkflowRunContext.Provider,
     {
       value: {
+        legacyResult,
+        setLegacyResult,
         result,
         setResult,
-        vNextResult,
-        setVNextResult,
         payload,
         setPayload,
         clearData
@@ -8231,16 +8389,81 @@ function WorkflowRunProvider({ children }) {
   );
 }
 
-function WorkflowTrigger({
+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 }),
+    children && /* @__PURE__ */ jsx("div", { className: "border-t-sm border-border1", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "py-1 px-2 border-t-sm border-border1", children: footer })
+  ] });
+};
+
+const LegacyWorkflowStatus = ({ stepId, pathStatus, path }) => {
+  const status = pathStatus === "completed" ? "Completed" : stepId === path ? pathStatus.charAt(0).toUpperCase() + pathStatus.slice(1) : pathStatus === "executing" ? "Executing" : "Completed";
+  return /* @__PURE__ */ jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(Icon, { children: [
+          status === "Completed" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
+          status === "Failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
+          status === "Executing" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon3 animate-spin" })
+        ] }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: path })
+      ] })
+    }
+  );
+};
+
+const WorkflowResult = ({ jsonResult, sanitizedJsonResult }) => {
+  const { handleCopy } = useCopyToClipboard({ text: jsonResult });
+  const [expanded, setExpanded] = useState(false);
+  return /* @__PURE__ */ jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-between w-full", children: [
+        /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "text-icon6 flex items-center gap-3 font-medium", children: [
+          /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(DeploymentIcon, {}) }),
+          "Results"
+        ] }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "p-2 rounded-lg hover:bg-surface5 transition-colors duration-150 ease-in-out text-icon3 hover:text-icon6",
+              onClick: () => handleCopy(),
+              children: /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(CopyIcon, {}) })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Copy result" })
+        ] })
+      ] }),
+      footer: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "w-full h-full text-center text-icon2 hover:text-icon6 text-ui-md",
+          onClick: () => setExpanded((s) => !s),
+          children: expanded ? "collapse" : "expand"
+        }
+      ),
+      children: expanded ? /* @__PURE__ */ jsx(CodeBlockDemo, { className: "w-full overflow-x-auto", code: sanitizedJsonResult || jsonResult, language: "json" }) : null
+    }
+  );
+};
+
+function LegacyWorkflowTrigger({
   workflowId,
   baseUrl,
   setRunId
 }) {
-  const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
-  const { isLoading, workflow } = useWorkflow(workflowId, baseUrl);
-  const { createWorkflowRun, startWorkflowRun } = useExecuteWorkflow(baseUrl);
-  const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow(baseUrl);
-  const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow(baseUrl);
+  const { legacyResult: result, setLegacyResult: setResult, payload, setPayload } = useContext(WorkflowRunContext);
+  const { isLoading, legacyWorkflow: workflow } = useLegacyWorkflow(workflowId, baseUrl);
+  const { createLegacyWorkflowRun: createWorkflowRun, startLegacyWorkflowRun: startWorkflowRun } = useExecuteWorkflow(baseUrl);
+  const {
+    watchLegacyWorkflow: watchWorkflow,
+    legacyWatchResult: watchResult,
+    isWatchingLegacyWorkflow: isWatchingWorkflow
+  } = useWatchWorkflow(baseUrl);
+  const { resumeLegacyWorkflow: resumeWorkflow, isResumingLegacyWorkflow: isResumingWorkflow } = useResumeWorkflow(baseUrl);
   const [suspendedSteps, setSuspendedSteps] = useState([]);
   const [isRunning, setIsRunning] = useState(false);
   const triggerSchema = workflow?.triggerSchema;
@@ -8271,7 +8494,7 @@ function WorkflowTrigger({
     });
   };
   const watchResultToUse = result ?? watchResult;
-  const workflowActivePaths = watchResultToUse?.activePaths ?? [];
+  const workflowActivePaths = watchResultToUse?.activePaths ?? {};
   useEffect(() => {
     setIsRunning(isWatchingWorkflow);
   }, [isWatchingWorkflow]);
@@ -8299,50 +8522,34 @@ function WorkflowTrigger({
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
   const { sanitizedOutput, ...restResult } = result ?? {};
-  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
-        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Input" }),
-        isResumingWorkflow ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
-          " Resuming workflow"
-        ] }) : /* @__PURE__ */ jsx(Fragment, {})
-      ] }),
-      /* @__PURE__ */ jsx(
-        DynamicForm,
-        {
-          schema: zodInputSchema,
-          defaultValues: payload,
-          isSubmitLoading: isWatchingWorkflow,
-          onSubmit: (data) => {
-            setPayload(data);
-            handleExecuteWorkflow(data);
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "px-4 space-y-4", children: [
-      isResumingWorkflow ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
-        " Resuming workflow"
-      ] }) : /* @__PURE__ */ jsx(Fragment, {}),
-      /* @__PURE__ */ jsx(Button$1, { className: "w-full", disabled: isRunning, onClick: () => handleExecuteWorkflow(null), children: isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : "Trigger" })
-    ] }) }),
-    Object.values(workflowActivePaths).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
-      /* @__PURE__ */ jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.map(([stepId, { status: pathStatus, stepPath }]) => {
-        return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: stepPath?.map((path, idx) => {
-          const status = pathStatus === "completed" ? "Completed" : stepId === path ? pathStatus.charAt(0).toUpperCase() + pathStatus.slice(1) : "Completed";
-          const statusIcon = status === "Completed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : status === "Failed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-yellow-500 rounded-full animate-pulse" });
-          return /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between p-3`, children: [
-            /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: path.charAt(0).toUpperCase() + path.slice(1) }),
-            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: statusIcon }),
-              status
-            ] })
-          ] }) }, idx);
-        }) });
-      }) })
+  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
+  return /* @__PURE__ */ jsx("div", { className: "h-full px-5 pt-3 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    isResumingWorkflow && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
+      /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
     ] }),
+    !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
+      DynamicForm,
+      {
+        schema: zodInputSchema,
+        defaultValues: payload,
+        isSubmitLoading: isWatchingWorkflow,
+        submitButtonLabel: "Run",
+        onSubmit: (data) => {
+          setPayload(data);
+          handleExecuteWorkflow(data);
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "w-full",
+        variant: "light",
+        disabled: isRunning,
+        onClick: () => handleExecuteWorkflow(null),
+        children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
+      }
+    ) }),
     isSuspendedSteps && suspendedSteps?.map((step) => {
       const stepDefinition = workflow.steps[step.stepId];
       const stepSchema = stepDefinition?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.inputSchema))) : z.record(z.string(), z.any());
@@ -8374,29 +8581,23 @@ function WorkflowTrigger({
         )
       ] });
     }),
-    result && /* @__PURE__ */ jsxs("div", { className: "flex flex-col group relative", children: [
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Output" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
-        CopyButton,
-        {
-          classname: "absolute z-40 w-8 h-8 p-0 transition-opacity duration-150 ease-in-out opacity-0 top-4 right-4 group-hover:opacity-100",
-          content: JSON.stringify(restResult, null, 2)
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        CodeBlockDemo,
-        {
-          className: "w-full overflow-x-auto",
-          code: sanitizedOutput || JSON.stringify(restResult, null, 2),
-          language: "json"
-        }
-      )
+    hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.map(([stepId, { status: pathStatus, stepPath }]) => {
+        return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: stepPath?.map((path, idx) => {
+          return /* @__PURE__ */ jsx(LegacyWorkflowStatus, { stepId, pathStatus, path }, idx);
+        }) }, stepId);
+      }) })
+    ] }),
+    result && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsx(WorkflowResult, { sanitizedJsonResult: sanitizedOutput, jsonResult: JSON.stringify(restResult, null, 2) })
     ] })
   ] }) });
 }
 
-function VNextWorkflowNestedGraph({ stepGraph, open }) {
-  const { nodes: initialNodes, edges: initialEdges } = constructVNextNodesAndEdges({
+function WorkflowNestedGraph({ stepGraph, open }) {
+  const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
     stepGraph
   });
   const [isMounted, setIsMounted] = useState(false);
@@ -8407,7 +8608,7 @@ function VNextWorkflowNestedGraph({ stepGraph, open }) {
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": VNextWorkflowNestedNode
+    "nested-node": WorkflowNestedNode
   };
   useEffect(() => {
     if (open) {
@@ -8434,10 +8635,10 @@ function VNextWorkflowNestedGraph({ stepGraph, open }) {
   ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
 }
 
-const VNextWorkflowNestedGraphContext = createContext(
+const WorkflowNestedGraphContext = createContext(
   {}
 );
-function VNextWorkflowNestedGraphProvider({ children }) {
+function WorkflowNestedGraphProvider({ children }) {
   const [stepGraph, setStepGraph] = useState(null);
   const [parentStepGraphList, setParentStepGraphList] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
@@ -8475,7 +8676,7 @@ function VNextWorkflowNestedGraphProvider({ children }) {
     }, 500);
   };
   return /* @__PURE__ */ jsxs(
-    VNextWorkflowNestedGraphContext.Provider,
+    WorkflowNestedGraphContext.Provider,
     {
       value: {
         showNestedGraph,
@@ -8491,16 +8692,16 @@ function VNextWorkflowNestedGraphProvider({ children }) {
               " workflow"
             ] })
           ] }),
-          switching ? /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(VNextWorkflowNestedGraph, { stepGraph, open: openDialog }) })
+          switching ? /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowNestedGraph, { stepGraph, open: openDialog }) })
         ] }) }) })
       ]
     }
   );
 }
 
-function VNextWorkflowNestedNode({ data }) {
+function WorkflowNestedNode({ data }) {
   const { label, withoutTopHandle, withoutBottomHandle, stepGraph } = data;
-  const { showNestedGraph } = useContext(VNextWorkflowNestedGraphContext);
+  const { showNestedGraph } = useContext(WorkflowNestedGraphContext);
   return /* @__PURE__ */ jsxs("div", { className: cn("bg-[rgba(29,29,29,0.5)] rounded-md h-full overflow-scroll w-[274px]"), children: [
     !withoutTopHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsx("div", { className: "p-2 cursor-pointer", onClick: () => showNestedGraph({ label, stepGraph }), children: /* @__PURE__ */ jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-1.5 rounded-sm p-2 cursor-pointer", children: [
@@ -8511,8 +8712,8 @@ function VNextWorkflowNestedNode({ data }) {
   ] });
 }
 
-function VNextWorkflowGraphInner({ workflow }) {
-  const { nodes: initialNodes, edges: initialEdges } = constructVNextNodesAndEdges(workflow);
+function WorkflowGraphInner({ workflow }) {
+  const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
   const nodeTypes = {
@@ -8520,7 +8721,7 @@ function VNextWorkflowGraphInner({ workflow }) {
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": VNextWorkflowNestedNode
+    "nested-node": WorkflowNestedNode
   };
   return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxs(
     ReactFlow,
@@ -8542,12 +8743,12 @@ function VNextWorkflowGraphInner({ workflow }) {
   ) });
 }
 
-function VNextWorkflowGraph({ workflowId, baseUrl }) {
-  const { vNextWorkflow, isLoading } = useVNextWorkflow(workflowId, baseUrl);
+function WorkflowGraph({ workflowId, baseUrl }) {
+  const { workflow, isLoading } = useWorkflow(workflowId, baseUrl);
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
   }
-  if (!vNextWorkflow) {
+  if (!workflow) {
     return /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
       /* @__PURE__ */ jsx(AlertCircleIcon, {}),
       /* @__PURE__ */ jsxs("div", { children: [
@@ -8557,43 +8758,60 @@ function VNextWorkflowGraph({ workflowId, baseUrl }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx(VNextWorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(VNextWorkflowGraphInner, { workflow: vNextWorkflow }) }) });
+  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowGraphInner, { workflow }) }) });
 }
 
-function VNextWorkflowTrigger({
+const WorkflowStatus = ({ stepId, status }) => {
+  return /* @__PURE__ */ jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(Icon, { children: [
+          status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
+          status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
+          status === "suspended" && /* @__PURE__ */ jsx(CirclePause, { className: "text-icon3" }),
+          status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon3 animate-spin" })
+        ] }),
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-lg", className: "text-icon6 font-medium", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) })
+      ] })
+    }
+  );
+};
+
+function WorkflowTrigger({
   workflowId,
   baseUrl,
   setRunId
 }) {
   const { runtimeContext } = usePlaygroundStore();
-  const { vNextResult, setVNextResult, payload, setPayload } = useContext(WorkflowRunContext);
-  const { isLoading, vNextWorkflow } = useVNextWorkflow(workflowId, baseUrl);
-  const { createVNextWorkflowRun, startVNextWorkflowRun } = useExecuteWorkflow(baseUrl);
-  const { watchVNextWorkflow, watchVNextResult, isWatchingVNextWorkflow } = useWatchWorkflow(baseUrl);
-  const { resumeVNextWorkflow, isResumingVNextWorkflow } = useResumeWorkflow(baseUrl);
+  const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
+  const { isLoading, workflow } = useWorkflow(workflowId, baseUrl);
+  const { createWorkflowRun, startWorkflowRun } = useExecuteWorkflow(baseUrl);
+  const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow(baseUrl);
+  const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow(baseUrl);
   const [suspendedSteps, setSuspendedSteps] = useState([]);
   const [isRunning, setIsRunning] = useState(false);
-  const triggerSchema = vNextWorkflow?.inputSchema;
+  const triggerSchema = workflow?.inputSchema;
   const handleExecuteWorkflow = async (data) => {
     try {
-      if (!vNextWorkflow) return;
+      if (!workflow) return;
       setIsRunning(true);
-      setVNextResult(null);
-      const { runId } = await createVNextWorkflowRun({ workflowId });
+      setResult(null);
+      const { runId } = await createWorkflowRun({ workflowId });
       setRunId?.(runId);
-      watchVNextWorkflow({ workflowId, runId });
-      startVNextWorkflowRun({ workflowId, runId, input: data, runtimeContext });
+      watchWorkflow({ workflowId, runId });
+      startWorkflowRun({ workflowId, runId, input: data, runtimeContext });
     } catch (err) {
       setIsRunning(false);
       toast.error("Error executing workflow");
     }
   };
   const handleResumeWorkflow = async (step) => {
-    if (!vNextWorkflow) return;
+    if (!workflow) return;
     const { stepId, runId: prevRunId, resumeData } = step;
-    const { runId } = await createVNextWorkflowRun({ workflowId, prevRunId });
-    watchVNextWorkflow({ workflowId, runId });
-    await resumeVNextWorkflow({
+    const { runId } = await createWorkflowRun({ workflowId, prevRunId });
+    watchWorkflow({ workflowId, runId });
+    await resumeWorkflow({
       step: stepId,
       runId,
       resumeData,
@@ -8601,78 +8819,65 @@ function VNextWorkflowTrigger({
       runtimeContext
     });
   };
-  const watchResultToUse = vNextResult ?? watchVNextResult;
+  const watchResultToUse = result ?? watchResult;
   const workflowActivePaths = watchResultToUse?.payload?.workflowState?.steps ?? {};
   useEffect(() => {
-    setIsRunning(isWatchingVNextWorkflow);
-  }, [isWatchingVNextWorkflow]);
+    setIsRunning(isWatchingWorkflow);
+  }, [isWatchingWorkflow]);
   useEffect(() => {
-    if (!watchResultToUse?.payload?.workflowState?.steps || !vNextResult?.runId) return;
+    if (!watchResultToUse?.payload?.workflowState?.steps || !result?.runId) return;
     const suspended = Object.entries(watchResultToUse.payload.workflowState.steps).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
       stepId,
-      runId: vNextResult.runId,
+      runId: result.runId,
       suspendPayload: payload2
     }));
     setSuspendedSteps(suspended);
-  }, [watchResultToUse, vNextResult]);
+  }, [watchResultToUse, result]);
   useEffect(() => {
-    if (watchVNextResult) {
-      setVNextResult(watchVNextResult);
+    if (watchResult) {
+      setResult(watchResult);
     }
-  }, [watchVNextResult]);
+  }, [watchResult]);
   if (isLoading) {
     return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "h-10" })
     ] }) });
   }
-  if (!vNextWorkflow) return null;
+  if (!workflow) return null;
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema))) : null;
-  const { sanitizedOutput, ...restResult } = vNextResult ?? {};
-  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
-        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Input" }),
-        isResumingVNextWorkflow ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
-          " Resuming workflow"
-        ] }) : /* @__PURE__ */ jsx(Fragment, {})
-      ] }),
-      /* @__PURE__ */ jsx(
-        DynamicForm,
-        {
-          schema: zodInputSchema,
-          defaultValues: payload,
-          isSubmitLoading: isWatchingVNextWorkflow,
-          onSubmit: (data) => {
-            setPayload(data);
-            handleExecuteWorkflow(data);
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "px-4 space-y-4", children: [
-      isResumingVNextWorkflow ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
-        " Resuming workflow"
-      ] }) : /* @__PURE__ */ jsx(Fragment, {}),
-      /* @__PURE__ */ jsx(Button$1, { className: "w-full", disabled: isRunning, onClick: () => handleExecuteWorkflow(null), children: isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : "Trigger" })
-    ] }) }),
-    Object.values(workflowActivePaths).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
-      /* @__PURE__ */ jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.filter(([key, _]) => key !== "input" && !key.endsWith(".input"))?.map(([stepId, { status }]) => {
-        const statusIcon = status === "success" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : status === "failed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-yellow-500 rounded-full animate-pulse" });
-        return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between p-3`, children: [
-          /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) }),
-          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 capitalize", children: [
-            /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: statusIcon }),
-            status
-          ] })
-        ] }) }, stepId) });
-      }) })
+  const { sanitizedOutput, ...restResult } = result ?? {};
+  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
+  return /* @__PURE__ */ jsx("div", { className: "h-full px-5 pt-3 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    isResumingWorkflow && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
+      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
+      /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
     ] }),
-    !isWatchingVNextWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
-      const stepDefinition = vNextWorkflow.steps[step.stepId];
+    !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
+      DynamicForm,
+      {
+        schema: zodInputSchema,
+        defaultValues: payload,
+        isSubmitLoading: isWatchingWorkflow,
+        submitButtonLabel: "Run",
+        onSubmit: (data) => {
+          setPayload(data);
+          handleExecuteWorkflow(data);
+        }
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "w-full",
+        variant: "light",
+        disabled: isRunning,
+        onClick: () => handleExecuteWorkflow(null),
+        children: isRunning ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : "Trigger"
+      }
+    ) }),
+    !isWatchingWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
+      const stepDefinition = workflow.steps[step.stepId];
       const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.resumeSchema))) : z.record(z.string(), z.any());
       return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
         /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
@@ -8688,7 +8893,7 @@ function VNextWorkflowTrigger({
           DynamicForm,
           {
             schema: stepSchema,
-            isSubmitLoading: isResumingVNextWorkflow,
+            isSubmitLoading: isResumingWorkflow,
             submitButtonLabel: "Resume",
             onSubmit: (data) => {
               handleResumeWorkflow({
@@ -8702,23 +8907,18 @@ function VNextWorkflowTrigger({
         )
       ] });
     }),
-    vNextResult && /* @__PURE__ */ jsxs("div", { className: "flex flex-col group relative", children: [
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Output" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
-        CopyButton,
-        {
-          classname: "absolute z-40 w-8 h-8 p-0 transition-opacity duration-150 ease-in-out opacity-0 top-4 right-4 group-hover:opacity-100",
-          content: JSON.stringify(restResult, null, 2)
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        CodeBlockDemo,
-        {
-          className: "w-full overflow-x-auto",
-          code: sanitizedOutput || JSON.stringify(restResult, null, 2),
-          language: "json"
-        }
-      )
+    hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.filter(([key, _]) => key !== "input" && !key.endsWith(".input"))?.map(([stepId, { status }]) => {
+          return /* @__PURE__ */ jsx(WorkflowStatus, { stepId, status });
+        }) })
+      ] })
+    ] }),
+    result && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsx(WorkflowResult, { sanitizedJsonResult: sanitizedOutput, jsonResult: JSON.stringify(restResult, null, 2) })
     ] })
   ] }) });
 }
@@ -8732,7 +8932,8 @@ const DataTable = ({
   getRowId,
   selectedRowId,
   isLoading,
-  emptyText
+  emptyText,
+  onClick
 }) => {
   const [sorting, setSorting] = useState([]);
   const [{ pageIndex, pageSize }, setPagination] = useState({
@@ -8774,7 +8975,16 @@ const DataTable = ({
         const meta = header.column.columnDef.meta;
         return /* @__PURE__ */ jsx(Th, { style: { width: meta?.width || size || "auto" }, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
       }) }),
-      /* @__PURE__ */ jsx(Tbody, { children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 3 }).map((_, rowIndex) => /* @__PURE__ */ jsx(Row, { children: Array.from({ length: columns.length }).map((_2, cellIndex) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }, `row-${rowIndex}-cell-${cellIndex}`)) }, rowIndex)) }) : rows?.length > 0 ? rows.map((row) => /* @__PURE__ */ jsx(Row, { "data-state": (row.getIsSelected() || row.id === selectedRowId) && "selected", children: row.getVisibleCells().map((cell) => flexRender(cell.column.columnDef.cell, cell.getContext())) }, row.id)) : emptyNode })
+      /* @__PURE__ */ jsx(Tbody, { children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 3 }).map((_, rowIndex) => /* @__PURE__ */ jsx(Row, { onClick: () => {
+      }, children: Array.from({ length: columns.length }).map((_2, cellIndex) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }) }, `row-${rowIndex}-cell-${cellIndex}`)) }, rowIndex)) }) : rows?.length > 0 ? rows.map((row) => /* @__PURE__ */ jsx(
+        Row,
+        {
+          "data-state": (row.getIsSelected() || row.id === selectedRowId) && "selected",
+          onClick: () => onClick?.(row.original),
+          children: row.getVisibleCells().map((cell) => flexRender(cell.column.columnDef.cell, cell.getContext()))
+        },
+        row.id
+      )) : emptyNode })
     ] }),
     pagination && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between px-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-sm", children: [
@@ -8911,6 +9121,41 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
   )
 ] });
 
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (!onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      },
+      className: clsx(
+        "flex gap-3 group/entity bg-surface3 rounded-lg border-sm border-border1 py-3 px-4",
+        onClick && "cursor-pointer hover:bg-surface4 transition-all",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+};
+const EntityIcon = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsx("div", { className, children });
+};
+
 function usePolling({
   fetchFn,
   interval = 3e3,
@@ -9065,5 +9310,5 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   return { traces, firstCallLoading, error };
 };
 
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, 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, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LogsIcon, MastraResizablePanel, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolsIcon, TraceContext, TraceIcon, TraceProvider, TsIcon, Txt, TxtCell, UnitCell, VNextWorkflowGraph, VNextWorkflowTrigger, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, usePlaygroundStore, usePolling, useTraces };
+export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, 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, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraResizablePanel, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolsIcon, TraceContext, TraceIcon, TraceProvider, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, usePlaygroundStore, usePolling, useTraces };
 //# sourceMappingURL=index.es.js.map