@mastra/playground-ui 0.0.0-vnext-inngest-20250508122351 → 0.0.0-vnextAgentNetwork-20250527091247

package/dist/index.cjs.js

@@ -18,7 +18,12 @@ const langJson = require('@codemirror/lang-json');
 const highlight$1 = require('@lezer/highlight');
 const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const CodeMirror = require('@uiw/react-codemirror');
+const DialogPrimitive = require('@radix-ui/react-dialog');
+const shallow = require('zustand/shallow');
+const di = require('@mastra/core/di');
 const clientJs = require('@mastra/client-js');
+const zustand = require('zustand');
+const middleware = require('zustand/middleware');
 const dateFns = require('date-fns');
 const TabsPrimitive = require('@radix-ui/react-tabs');
 const sonner = require('sonner');
@@ -26,24 +31,24 @@ const react$1 = require('motion/react');
 const uiUtils = require('@ai-sdk/ui-utils');
 const Markdown = require('react-markdown');
 const useDebounce = require('use-debounce');
+const runtimeContext = require('@mastra/core/runtime-context');
 const react$2 = require('@xyflow/react');
 require('@xyflow/react/dist/style.css');
 const Dagre = require('@dagrejs/dagre');
 const prismReactRenderer = require('prism-react-renderer');
 const CollapsiblePrimitive = require('@radix-ui/react-collapsible');
-const DialogPrimitive = require('@radix-ui/react-dialog');
 const ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 const jsonSchemaToZod = require('json-schema-to-zod');
 const superjson = require('superjson');
 const z = require('zod');
 const react$3 = require('@autoform/react');
-const LabelPrimitive = require('@radix-ui/react-label');
 const CheckboxPrimitive = require('@radix-ui/react-checkbox');
 const reactDayPicker = require('react-day-picker');
 const PopoverPrimitive = require('@radix-ui/react-popover');
 const SelectPrimitive = require('@radix-ui/react-select');
 const uuid = require('@lukeed/uuid');
 const zod = require('@autoform/zod');
+const LabelPrimitive = require('@radix-ui/react-label');
 const reactCodeBlock = require('react-code-block');
 const reactTable = require('@tanstack/react-table');
 
@@ -67,14 +72,14 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
 const AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AvatarPrimitive);
+const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 const TabsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TabsPrimitive);
 const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
-const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 const ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ScrollAreaPrimitive);
-const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
 const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
 const PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
+const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2918,6 +2923,46 @@ const AvatarFallback = React__namespace.forwardRef(({ className, ...props }, ref
 ));
 AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
 
+const ImageWithFallback = ({ alt, src, ...rest }) => {
+  const [error, setError] = React.useState(false);
+  React.useEffect(() => {
+    setError(false);
+  }, [src]);
+  return error || !src ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs italic text-muted-foreground -mt-[0.625rem] mb-[0.625rem]", children: "Image link is broken" })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt,
+      ...rest,
+      onError: () => {
+        setError(true);
+      }
+    }
+  );
+};
+
 const SyntaxHighlighter$2 = reactSyntaxHighlighter.makePrismAsyncSyntaxHighlighter({
   style: prism.coldarkDark,
   customStyle: {
@@ -3137,10 +3182,12 @@ const defaultComponents = reactMarkdown.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"
 };
@@ -3519,10 +3566,10 @@ const GithubIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "1
     "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__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_21999_22095", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "14", height: "14", fill: "white", transform: "translate(0.5 0.75)" }) }) })
+  /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_21999_22095", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "14", height: "14", fill: "currentColor", transform: "translate(0.5 0.75)" }) }) })
 ] });
 
 const GoogleIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
@@ -3751,7 +3798,7 @@ const WorkflowIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "
     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"
   }
 ) });
 
@@ -3813,6 +3860,149 @@ const LatencyIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "
   )
 ] });
 
+const McpServerIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M6.53918 9.32122C6.34324 9.51508 6.02724 9.51338 5.83338 9.31744C5.63952 9.1215 5.6412 8.80551 5.83713 8.61164L10.1958 4.29931C10.7996 3.70186 10.8017 2.72852 10.2041 2.12839L10.1899 2.11428C9.58767 1.52481 8.62251 1.53208 8.0292 2.13052L2.29396 7.91536C2.0999 8.1111 1.78388 8.11246 1.58813 7.9184C1.39239 7.72433 1.39103 7.40831 1.58509 7.21257L7.32036 1.42774C8.30005 0.439581 9.89369 0.427613 10.8881 1.40094L10.9116 1.42425C11.4942 2.00929 11.7316 2.80913 11.6232 3.56922C12.389 3.44866 13.1999 3.67918 13.7961 4.26273C14.804 5.24929 14.8147 6.86824 13.82 7.86808L8.5531 13.1619C8.50045 13.2148 8.50024 13.3002 8.55263 13.3534L9.65448 14.4717C9.84794 14.668 9.8456 14.984 9.64925 15.1775C9.45291 15.3709 9.13691 15.3686 8.94345 15.1723L7.84163 14.054C7.40505 13.6109 7.40677 12.8988 7.8455 12.4579L13.1124 7.16405C13.7161 6.55727 13.7095 5.57478 13.0979 4.97606C12.4925 4.38347 11.4942 4.40725 10.8978 5.00886L6.53918 9.32122Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M8.84622 2.75411C9.04697 2.56188 9.36555 2.56381 9.56395 2.76076C9.76234 2.95771 9.76658 3.27625 9.57582 3.4784L9.56661 3.48794L5.25912 7.82701C4.67023 8.42022 4.672 9.37798 5.26305 9.96904C5.85624 10.5622 6.81818 10.5615 7.41052 9.9675L11.6299 5.73599L11.6395 5.72671C11.8406 5.53493 12.1592 5.53756 12.3572 5.73496C12.5583 5.93548 12.5587 6.26104 12.3582 6.46214L8.13877 10.6937C7.14498 11.6903 5.53105 11.6915 4.53584 10.6963C3.5442 9.70461 3.54127 8.09774 4.52928 7.10248L8.83677 2.76342L8.84622 2.75411Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const FolderIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M1.5 8.5V8C1.5 7.60218 1.65804 7.22064 1.93934 6.93934C2.22064 6.65804 2.60218 6.5 3 6.5H13C13.3978 6.5 13.7794 6.65804 14.0607 6.93934C14.342 7.22064 14.5 7.60218 14.5 8V8.5M8.70667 4.20667L7.29333 2.79333C7.20048 2.70037 7.09022 2.62661 6.96886 2.57628C6.84749 2.52595 6.71739 2.50003 6.586 2.5H3C2.60218 2.5 2.22064 2.65804 1.93934 2.93934C1.65804 3.22064 1.5 3.60218 1.5 4V12C1.5 12.3978 1.65804 12.7794 1.93934 13.0607C2.22064 13.342 2.60218 13.5 3 13.5H13C13.3978 13.5 13.7794 13.342 14.0607 13.0607C14.342 12.7794 14.5 12.3978 14.5 12V6C14.5 5.60218 14.342 5.22064 14.0607 4.93934C13.7794 4.65804 13.3978 4.5 13 4.5H9.414C9.14887 4.49977 8.89402 4.39426 8.70667 4.20667Z",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+
+const McpCoinIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "126", height: "85", viewBox: "0 0 126 85", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641V49.8368C6.67773 65.0327 31.894 77.3514 62.9998 77.3514C94.1055 77.3514 119.322 65.0327 119.322 49.8368V35.1641Z",
+      fill: "#2E2E2E",
+      fillOpacity: "0.9"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641M119.322 35.1641C119.322 19.9681 94.1055 7.64941 62.9998 7.64941C31.894 7.64941 6.67773 19.9681 6.67773 35.1641M119.322 35.1641V49.8368C119.322 65.0327 94.1055 77.3514 62.9998 77.3514C31.894 77.3514 6.67773 65.0327 6.67773 49.8368V35.1641",
+      stroke: "#424242"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M63.0002 0.96875C28.5152 0.96875 0.55957 15.6489 0.55957 33.7578V51.2433C0.55957 69.3522 28.5152 84.0323 63.0002 84.0323C97.4853 84.0323 125.441 69.3522 125.441 51.2433V33.7578C125.441 15.6489 97.4853 0.96875 63.0002 0.96875Z",
+      stroke: "#707070"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M51.5215 39.9726C50.5464 40.4477 48.9738 40.4435 48.009 39.9634C47.0442 39.4833 47.0526 38.709 48.0277 38.2339L69.7191 27.6672C72.7243 26.2032 72.7347 23.8181 69.7605 22.3476L69.6898 22.313C66.6927 20.8686 61.8895 20.8864 58.9368 22.3528L30.3946 36.5278C29.4288 37.0074 27.8561 37.0107 26.882 36.5352C25.9078 36.0597 25.901 35.2853 26.8668 34.8057L55.4092 20.6308C60.2847 18.2094 68.2157 18.1801 73.1645 20.5651L73.2814 20.6222C76.1808 22.0558 77.3624 24.0157 76.8227 25.8782C80.6339 25.5828 84.6694 26.1476 87.6364 27.5775C92.6525 29.9949 92.7059 33.962 87.7554 36.4119L61.5441 49.3836C61.282 49.5133 61.281 49.7227 61.5417 49.853L67.0252 52.5932C67.988 53.0743 67.9763 53.8486 66.9992 54.3226C66.0221 54.7966 64.4495 54.7909 63.4867 54.3098L58.0033 51.5695C55.8306 50.4838 55.8392 48.7391 58.0226 47.6585L84.2339 34.6868C87.2382 33.2 87.2058 30.7925 84.1617 29.3254C81.1488 27.8734 76.1811 27.9317 73.2127 29.4058L51.5215 39.9726Z",
+      fill: "#A9A9A9"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M63.0028 23.8809C64.0019 23.4098 65.5873 23.4146 66.5747 23.8972C67.562 24.3798 67.5831 25.1603 66.6338 25.6556L66.5879 25.679L45.1511 36.3113C42.2204 37.7649 42.2292 40.1117 45.1707 41.56C48.1228 43.0135 52.91 43.0118 55.8578 41.5563L76.8564 31.1875L76.9037 31.1648C77.9049 30.6949 79.4903 30.7013 80.4755 31.185C81.4763 31.6764 81.4785 32.4741 80.4806 32.9669L59.4821 43.3356C54.5363 45.7777 46.5044 45.7806 41.5516 43.342C36.6166 40.9121 36.602 36.9747 41.519 34.5359L62.9558 23.9037L63.0028 23.8809Z",
+      fill: "#A9A9A9"
+    }
+  )
+] });
+
+const ToolCoinIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "126", height: "85", viewBox: "0 0 126 85", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641V49.8368C6.67773 65.0327 31.894 77.3514 62.9998 77.3514C94.1055 77.3514 119.322 65.0327 119.322 49.8368V35.1641Z",
+      fill: "#2E2E2E",
+      fillOpacity: "0.9"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641M119.322 35.1641C119.322 19.9681 94.1055 7.64941 62.9998 7.64941C31.894 7.64941 6.67773 19.9681 6.67773 35.1641M119.322 35.1641V49.8368C119.322 65.0327 94.1055 77.3514 62.9998 77.3514C31.894 77.3514 6.67773 65.0327 6.67773 49.8368V35.1641",
+      stroke: "#424242"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M63.0002 0.96875C28.5152 0.96875 0.55957 15.6489 0.55957 33.7578V51.2433C0.55957 69.3522 28.5152 84.0323 63.0002 84.0323C97.4853 84.0323 125.441 69.3522 125.441 51.2433V33.7578C125.441 15.6489 97.4853 0.96875 63.0002 0.96875Z",
+      stroke: "#707070"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M95.8997 32.6647C98.4806 33.9355 98.4744 36.0012 95.8997 37.2689L89.6657 40.3384C87.0848 41.6091 82.8892 41.6061 80.3146 40.3384L74.0805 37.2689C71.4996 35.9981 71.5059 33.9324 74.0805 32.6647L80.3146 29.5952C82.8955 28.3244 87.091 28.3275 89.6657 29.5952L95.8997 32.6647ZM74.0805 21.9215C76.6614 23.1923 76.6552 25.258 74.0805 26.5257L67.8465 29.5952C65.2656 30.866 61.0701 30.8629 58.4954 29.5952L52.2613 26.5257C49.6804 25.255 49.6867 23.1892 52.2613 21.9215L58.4954 18.852C61.0763 17.5813 65.2718 17.5843 67.8465 18.852L74.0805 21.9215ZM74.0805 43.4079C76.6614 44.6786 76.6552 46.7444 74.0805 48.0121L67.8465 51.0816C65.2656 52.3523 61.0701 52.3493 58.4954 51.0816L52.2613 48.0121C49.6804 46.7413 49.6867 44.6756 52.2613 43.4079L58.4954 40.3384C61.0763 39.0676 65.2718 39.0707 67.8465 40.3384L74.0805 43.4079ZM52.2613 32.6647C54.8422 33.9355 54.836 36.0012 52.2613 37.2689L46.0273 40.3384C43.4464 41.6091 39.2509 41.6061 36.6762 40.3384L30.4422 37.2689C27.8613 35.9981 27.8675 33.9324 30.4422 32.6647L36.6762 29.5952C39.2571 28.3244 43.4526 28.3275 46.0273 29.5952L52.2613 32.6647Z",
+      fill: "#A9A9A9"
+    }
+  )
+] });
+
+const AgentNetworkCoinIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "126", height: "85", viewBox: "0 0 126 85", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641V49.8368C6.67773 65.0327 31.894 77.3514 62.9998 77.3514C94.1055 77.3514 119.322 65.0327 119.322 49.8368V35.1641Z",
+      fill: "#2E2E2E",
+      fillOpacity: "0.9"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641M119.322 35.1641C119.322 19.9681 94.1055 7.64941 62.9998 7.64941C31.894 7.64941 6.67773 19.9681 6.67773 35.1641M119.322 35.1641V49.8368C119.322 65.0327 94.1055 77.3514 62.9998 77.3514C31.894 77.3514 6.67773 65.0327 6.67773 49.8368V35.1641",
+      stroke: "#424242"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M63.0002 0.96875C28.5152 0.96875 0.55957 15.6489 0.55957 33.7578V51.2433C0.55957 69.3522 28.5152 84.0323 63.0002 84.0323C97.4853 84.0323 125.441 69.3522 125.441 51.2433V33.7578C125.441 15.6489 97.4853 0.96875 63.0002 0.96875Z",
+      stroke: "#707070"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_23333_14744)", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M79.2946 17.9539C83.0143 19.7854 83.016 22.7559 79.2979 24.5879C77.0214 25.7087 73.8794 26.1385 70.9301 25.8878L67.5296 30.2202C68.0944 30.3987 68.6321 30.6075 69.1262 30.8507C71.0847 31.815 72.0009 33.0948 71.8979 34.3581L77.2504 35.1977C77.6452 34.8727 78.1174 34.5635 78.6856 34.2835C82.4066 32.4514 88.4403 32.4485 92.1623 34.2803C95.8842 36.1128 95.8805 39.0851 92.159 40.9175C88.4373 42.7488 82.4002 42.7513 78.679 40.9191C76.7415 39.9647 75.8248 38.7009 75.9073 37.4506L70.5219 36.6045C70.1354 36.9168 69.6777 37.2145 69.1295 37.4846C68.345 37.8708 67.4527 38.1705 66.5059 38.3939L67.9312 41.984C70.1507 42.0573 72.3276 42.5087 74.0244 43.3438C77.7444 45.1754 77.7467 48.1458 74.0277 49.9778C70.3071 51.8092 64.2712 51.8095 60.551 49.9778C56.8323 48.1459 56.8351 45.1755 60.5543 43.3438C61.3581 42.9482 62.2741 42.6414 63.247 42.4167L61.8282 38.8428C59.5803 38.7777 57.3696 38.3299 55.6527 37.4846C54.1264 36.7327 53.2395 35.7882 52.9666 34.8103L43.924 34.0469C43.4596 34.6259 42.7547 35.1702 41.8041 35.6385C38.0834 37.4696 32.0473 37.4701 28.3273 35.6385C24.6089 33.8068 24.6123 30.8363 28.3306 29.0046C32.0508 27.1737 38.0806 27.1737 41.8008 29.0046C43.3459 29.7653 44.2412 30.7224 44.5033 31.7129L53.5098 32.4747C53.9742 31.8832 54.6868 31.3279 55.656 30.8507C57.6687 29.8601 60.357 29.4079 62.9902 29.4892L66.5783 24.9218C66.3174 24.8179 66.0637 24.7073 65.8212 24.5879C62.1022 22.7559 62.1045 19.7856 65.8245 17.9539C69.5447 16.1235 75.5747 16.1232 79.2946 17.9539ZM38.4299 30.6643C36.5715 29.75 33.5599 29.75 31.7015 30.6643C29.8447 31.5793 29.8414 33.0638 31.6982 33.9788C33.5565 34.8938 36.5742 34.8933 38.4332 33.9788C40.2906 33.0635 40.2883 31.5793 38.4299 30.6643ZM70.6536 45.0035C68.7951 44.0893 65.7836 44.0893 63.9251 45.0035C62.0676 45.9185 62.0647 47.4029 63.9218 48.318C65.7804 49.2332 68.7979 49.2329 70.6569 48.3181C72.5142 47.4027 72.5119 45.9185 70.6536 45.0035ZM65.7553 32.5104C63.8969 31.5961 60.8853 31.5961 59.0269 32.5104C57.1685 33.4254 57.1662 34.9096 59.0236 35.8249C60.8824 36.7402 63.8998 36.7402 65.7586 35.8249C67.616 34.9096 67.6137 33.4254 65.7553 32.5104ZM88.7915 35.94C86.9338 35.0261 83.9184 35.0264 82.0564 35.9432C80.1965 36.8601 80.1945 38.3451 82.0498 39.2594C83.9067 40.1736 86.9255 40.1738 88.7882 39.2578C90.6507 38.3407 90.649 36.8546 88.7915 35.94ZM75.9238 19.6136C74.0656 18.6995 71.0538 18.6998 69.1953 19.6136C67.3369 20.5286 67.3347 22.0129 69.192 22.9282C71.0509 23.8434 74.0682 23.8434 75.9271 22.9282C77.7836 22.0128 77.7818 20.5285 75.9238 19.6136Z",
+      fill: "#A9A9A9"
+    }
+  ) }),
+  /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_23333_14744", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      width: "59.3185",
+      height: "59.3185",
+      fill: "white",
+      transform: "matrix(0.897148 0.441731 -0.897148 0.441731 65.3042 6.51953)"
+    }
+  ) }) })
+] });
+
 const useCodemirrorTheme$1 = () => {
   return React.useMemo(
     () => codemirrorThemeDracula.draculaInit({
@@ -3884,7 +4074,10 @@ const AssistantMessage = ({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
       react.MessagePrimitive.Content,
       {
-        components: { Text: MarkdownText, tools: { Fallback: ToolFallbackCustom || ToolFallback$1 } }
+        components: {
+          Text: MarkdownText,
+          tools: { Fallback: ToolFallbackCustom || ToolFallback$1 }
+        }
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 pt-1", children: !isSolelyToolCall && /* @__PURE__ */ jsxRuntime.jsx(AssistantActionBar, {}) })
@@ -3906,8 +4099,156 @@ const AssistantActionBar = () => {
   );
 };
 
+const Dialog = DialogPrimitive__namespace.Root;
+const DialogTrigger = DialogPrimitive__namespace.Trigger;
+const DialogPortal = DialogPrimitive__namespace.Portal;
+const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+const DialogContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+
+const useHasAttachments = () => {
+  const composer = react.useComposerRuntime();
+  const [hasAttachments, setHasAttachments] = React.useState(false);
+  React.useEffect(() => {
+    composer.subscribe(() => {
+      const attachments = composer.getState().attachments;
+      setHasAttachments(attachments.length > 0);
+    });
+  }, [composer]);
+  return hasAttachments;
+};
+
+const useFileSrc = (file) => {
+  const [src, setSrc] = React.useState(void 0);
+  React.useEffect(() => {
+    if (!file) {
+      setSrc(void 0);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  return src;
+};
+const useAttachmentSrc = () => {
+  const { file, src } = react.useAttachment(
+    shallow.useShallow((a) => {
+      if (a.type !== "image") return {};
+      if (a.file) return { file: a.file };
+      const src2 = a.content?.filter((c) => c.type === "image")[0]?.image;
+      if (!src2) return {};
+      return { src: src2 };
+    })
+  );
+  return useFileSrc(file) ?? src;
+};
+const AttachmentPreview = ({ src }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden w-full", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, className: "object-contain aspect-ratio h-full w-full", alt: "Preview" }) });
+};
+const AttachmentPreviewDialog = ({ children }) => {
+  const src = useAttachmentSrc();
+  if (!src) return children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { className: "hover:bg-accent/50 cursor-pointer transition-colors", asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-5xl w-full max-h-[80%]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "aui-sr-only", children: "Image Attachment Preview" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { src })
+      ] })
+    ] })
+  ] });
+};
+const AttachmentThumbnail = () => {
+  const isImage = react.useAttachment((a) => a.type === "image");
+  const src = useAttachmentSrc();
+  const canRemove = react.useAttachment((a) => a.source !== "message");
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.AttachmentPrimitive.Root, { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, className: "object-cover aspect-ratio size-16", alt: "Preview", height: 64, width: 64 }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "text-icon3" }) }) }) }) }),
+      canRemove && /* @__PURE__ */ jsxRuntime.jsx(AttachmentRemove, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Name, {}) })
+  ] }) });
+};
+const AttachmentRemove = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipIconButton,
+    {
+      tooltip: "Remove file",
+      className: "absolute -right-3 -top-3 hover:bg-transparent rounded-full bg-surface1 rounded-full p-1",
+      side: "top",
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleXIcon, {}) })
+    }
+  ) });
+};
+const UserMessageAttachments = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Attachments, { components: { Attachment: InMessageAttachment } });
+};
+const InMessageAttachment = () => {
+  const isImage = react.useAttachment((a) => a.type === "image");
+  const src = useAttachmentSrc();
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Root, { className: "relative pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, className: "object-cover aspect-ratio max-h-[140px] max-w-[320px]", alt: "Preview" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "text-icon3" }) }) }) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Name, {}) })
+  ] }) });
+};
+const ComposerAttachments = () => {
+  const hasAttachments = useHasAttachments();
+  if (!hasAttachments) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-row items-center gap-4 h-24", children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
+};
+
 const UserMessage = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Root, { className: "w-full flex justify-end pb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Content, {}) }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Content, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(UserMessageAttachments, {})
+  ] });
 };
 
 const useAutoscroll = (ref, { enabled = true }) => {
@@ -3948,13 +4289,77 @@ 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__ */ jsxRuntime.jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
+
+const useSpeechRecognition = ({ language = "en-US" } = {}) => {
+  const speechRecognitionRef = React.useRef(null);
+  const [state, setState] = React.useState({
+    isListening: false,
+    transcript: "",
+    error: null
+  });
+  const start = () => {
+    if (!speechRecognitionRef.current) return;
+    speechRecognitionRef.current.start();
+  };
+  const stop = () => {
+    if (!speechRecognitionRef.current) return;
+    speechRecognitionRef.current.stop();
+  };
+  React.useEffect(() => {
+    if (!("webkitSpeechRecognition" in window) && !("SpeechRecognition" in window)) {
+      setState((prev) => ({ ...prev, error: "Speech Recognition not supported in this browser" }));
+      return;
+    }
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const recognition = new SpeechRecognition();
+    speechRecognitionRef.current = recognition;
+    recognition.continuous = true;
+    recognition.lang = language;
+    recognition.onstart = () => {
+      setState((prev) => ({ ...prev, isListening: true }));
+    };
+    recognition.onresult = (event) => {
+      let finalTranscript = "";
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const transcript = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+          finalTranscript += transcript + " ";
+        }
+      }
+      setState((prev) => ({ ...prev, transcript: finalTranscript }));
+    };
+    recognition.onerror = (event) => {
+      setState((prev) => ({ ...prev, error: `Error: ${event.error}` }));
+    };
+    recognition.onend = () => setState((prev) => ({ ...prev, isListening: false }));
+  }, [language]);
+  return {
+    ...state,
+    start,
+    stop
+  };
+};
+
+const Thread = ({ ToolFallback, agentName, hasMemory, showFileSupport }) => {
   const areaRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, ToolFallback });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadPrimitive.Root, { className: "max-w-[568px] w-full mx-auto h-[calc(100%-100px)] px-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ThreadWelcome, { agentName }),
@@ -3971,9 +4376,22 @@ const Thread = ({ ToolFallback, agentName }) => {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Composer, {})
+    /* @__PURE__ */ jsxRuntime.jsx(Composer, { hasMemory, showFileSupport })
   ] });
 };
+const ThreadWrapper = ({ children }) => {
+  const hasAttachments = useHasAttachments();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.ThreadPrimitive.Root,
+    {
+      className: clsx(
+        "max-w-[568px] w-full mx-auto px-4",
+        hasAttachments ? "h-[calc(100%-208px)]" : "h-[calc(100%-112px)]"
+      ),
+      children
+    }
+  );
+};
 const ThreadWelcome = ({ agentName }) => {
   const safeAgentName = agentName ?? "";
   const words = safeAgentName.split(" ") ?? [];
@@ -3990,23 +4408,55 @@ const ThreadWelcome = ({ agentName }) => {
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAction, {}) })
+const Composer = ({ hasMemory, showFileSupport }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SpeechInput, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(ComposerAction, { showFileSupport })
+        ] })
+      ] })
+    ] }),
+    !hasMemory && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon3 flex items-center gap-2 pt-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {}) }),
+      "Memory is not enabled. The conversation will not be persisted."
+    ] })
   ] });
 };
-const ComposerAction = () => {
+const SpeechInput = () => {
+  const composerRuntime = react.useComposerRuntime();
+  const { start, stop, isListening, transcript } = useSpeechRecognition();
+  React.useEffect(() => {
+    if (!transcript) return;
+    composerRuntime.setText(transcript);
+  }, [composerRuntime, transcript]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipIconButton,
+    {
+      type: "button",
+      tooltip: isListening ? "Stop dictation" : "Start dictation",
+      variant: "ghost",
+      className: "rounded-full",
+      onClick: () => isListening ? stop() : start(),
+      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+    }
+  );
+};
+const ComposerAction = ({ showFileSupport }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showFileSupport && /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       TooltipIconButton,
       {
@@ -4040,9 +4490,40 @@ const createMastraClient = (baseUrl) => {
   });
 };
 
+const fileToBase64 = async (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result === "string") {
+        resolve(result);
+      } else {
+        reject(new Error("Failed to convert file to base64."));
+      }
+    };
+    reader.onerror = (error) => {
+      reject(error);
+    };
+    reader.readAsDataURL(file);
+  });
+};
+
 const convertMessage$1 = (message) => {
   return message;
 };
+const convertToAIAttachments = async (attachments) => {
+  const promises = attachments.filter((attachment) => attachment.file).map(async (attachment) => ({
+    role: "user",
+    content: [
+      {
+        type: "image",
+        image: await fileToBase64(attachment.file),
+        mimeType: attachment.file.type
+      }
+    ]
+  }));
+  return Promise.all(promises);
+};
 function MastraRuntimeProvider({
   children,
   agentId,
@@ -4053,12 +4534,17 @@ function MastraRuntimeProvider({
   baseUrl,
   refreshThreadList,
   modelSettings = {},
-  chatWithGenerate
+  chatWithGenerate,
+  runtimeContext
 }) {
   const [isRunning, setIsRunning] = React.useState(false);
   const [messages, setMessages] = React.useState([]);
   const [currentThreadId, setCurrentThreadId] = React.useState(threadId);
   const { frequencyPenalty, presencePenalty, maxRetries, maxSteps, maxTokens, temperature, topK, topP, instructions } = modelSettings;
+  const runtimeContextInstance = new di.RuntimeContext();
+  Object.entries(runtimeContext ?? {}).forEach(([key, value]) => {
+    runtimeContextInstance.set(key, value);
+  });
   React.useEffect(() => {
     const hasNewInitialMessages = initialMessages && initialMessages?.length > messages?.length;
     if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
@@ -4067,13 +4553,16 @@ function MastraRuntimeProvider({
           if (message?.toolInvocations?.length > 0) {
             return {
               ...message,
-              content: message.toolInvocations.map((toolInvocation) => ({
-                type: "tool-call",
-                toolCallId: toolInvocation?.toolCallId,
-                toolName: toolInvocation?.toolName,
-                args: toolInvocation?.args,
-                result: toolInvocation?.result
-              }))
+              content: [
+                ...typeof message.content === "string" ? [{ type: "text", text: message.content }] : [],
+                ...message.toolInvocations.map((toolInvocation) => ({
+                  type: "tool-call",
+                  toolCallId: toolInvocation?.toolCallId,
+                  toolName: toolInvocation?.toolName,
+                  args: toolInvocation?.args,
+                  result: toolInvocation?.result
+                }))
+              ]
             };
           }
           return message;
@@ -4087,8 +4576,12 @@ function MastraRuntimeProvider({
   const agent = mastra.getAgent(agentId);
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
+    const attachments = await convertToAIAttachments(message.attachments);
     const input = message.content[0].text;
-    setMessages((currentConversation) => [...currentConversation, { role: "user", content: input }]);
+    setMessages((currentConversation) => [
+      ...currentConversation,
+      { role: "user", content: input, attachments: message.attachments }
+    ]);
     setIsRunning(true);
     try {
       if (chatWithGenerate) {
@@ -4097,7 +4590,8 @@ function MastraRuntimeProvider({
             {
               role: "user",
               content: input
-            }
+            },
+            ...attachments
           ],
           runId: agentId,
           frequencyPenalty,
@@ -4109,6 +4603,7 @@ function MastraRuntimeProvider({
           topK,
           topP,
           instructions,
+          runtimeContext: runtimeContextInstance,
           ...memory ? { threadId, resourceId: agentId } : {}
         });
         if (generateResponse.response) {
@@ -4188,6 +4683,13 @@ function MastraRuntimeProvider({
             };
             if (!assistantMessageAdded) {
               assistantMessageAdded = true;
+              if (assistantToolCallAddedForUpdater) {
+                assistantToolCallAddedForUpdater = false;
+              }
+              return [...currentConversation, message2];
+            }
+            if (assistantToolCallAddedForUpdater) {
+              assistantToolCallAddedForUpdater = false;
               return [...currentConversation, message2];
             }
             return [...currentConversation.slice(0, -1), message2];
@@ -4198,7 +4700,8 @@ function MastraRuntimeProvider({
             {
               role: "user",
               content: input
-            }
+            },
+            ...attachments
           ],
           runId: agentId,
           frequencyPenalty,
@@ -4210,27 +4713,24 @@ function MastraRuntimeProvider({
           topK,
           topP,
           instructions,
+          runtimeContext: runtimeContextInstance,
           ...memory ? { threadId, resourceId: agentId } : {}
         });
         if (!response.body) {
           throw new Error("No response body");
         }
-        const parts = [];
         let content = "";
-        let currentTextPart = null;
         let assistantMessageAdded = false;
+        let assistantToolCallAddedForUpdater = false;
+        let assistantToolCallAddedForContent = false;
         await response.processDataStream({
           onTextPart(value) {
-            if (currentTextPart == null) {
-              currentTextPart = {
-                type: "text",
-                text: value
-              };
-              parts.push(currentTextPart);
+            if (assistantToolCallAddedForContent) {
+              assistantToolCallAddedForContent = false;
+              content = value;
             } else {
-              currentTextPart.text += value;
+              content += value;
             }
-            content += value;
             updater();
           },
           async onToolCallPart(value) {
@@ -4257,6 +4757,8 @@ function MastraRuntimeProvider({
                     }
                   ]
                 };
+                assistantToolCallAddedForUpdater = true;
+                assistantToolCallAddedForContent = true;
                 return [...currentConversation.slice(0, -1), updatedMessage];
               }
               const newMessage = {
@@ -4271,6 +4773,8 @@ function MastraRuntimeProvider({
                   }
                 ]
               };
+              assistantToolCallAddedForUpdater = true;
+              assistantToolCallAddedForContent = true;
               return [...currentConversation, newMessage];
             });
           },
@@ -4318,7 +4822,10 @@ function MastraRuntimeProvider({
     isRunning,
     messages,
     convertMessage: convertMessage$1,
-    onNew
+    onNew,
+    adapters: {
+      attachments: new react.CompositeAttachmentAdapter([new react.SimpleImageAttachmentAdapter()])
+    }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(react.AssistantRuntimeProvider, { runtime, children: [
     " ",
@@ -4327,6 +4834,20 @@ function MastraRuntimeProvider({
   ] });
 }
 
+const useAgentStore = zustand.create()(
+  middleware.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,
@@ -4334,12 +4855,24 @@ const defaultModelSettings$1 = {
   topP: 1
 };
 const AgentContext = React.createContext({});
-function AgentProvider({ children }) {
-  const [modelSettings, setModelSettings] = React.useState(defaultModelSettings$1);
-  const [chatWithGenerate, setChatWithGenerate] = React.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__ */ jsxRuntime.jsx(
     AgentContext.Provider,
     {
@@ -4355,6 +4888,18 @@ function AgentProvider({ children }) {
   );
 }
 
+const usePlaygroundStore = zustand.create()(
+  middleware.persist(
+    (set) => ({
+      runtimeContext: {},
+      setRuntimeContext: (runtimeContext) => set({ runtimeContext })
+    }),
+    {
+      name: "mastra-playground-store"
+    }
+  )
+);
+
 const AgentChat = ({
   agentId,
   agentName,
@@ -4362,9 +4907,11 @@ const AgentChat = ({
   initialMessages,
   memory,
   baseUrl,
-  refreshThreadList
+  refreshThreadList,
+  showFileSupport
 }) => {
   const { modelSettings, chatWithGenerate } = React.useContext(AgentContext);
+  const { runtimeContext } = usePlaygroundStore();
   return /* @__PURE__ */ jsxRuntime.jsx(
     MastraRuntimeProvider,
     {
@@ -4377,7 +4924,8 @@ const AgentChat = ({
       refreshThreadList,
       modelSettings,
       chatWithGenerate,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "" }) })
+      runtimeContext,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full pb-4 bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, showFileSupport }) })
     }
   );
 };
@@ -4437,18 +4985,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: {
@@ -4927,20 +5475,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__ */ jsxRuntime.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();
@@ -5163,11 +5697,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__ */ jsxRuntime.jsxs("div", { className: "w-[80px] xl:w-[166px] shrink-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("absolute h-1 rounded-full", variantClass), style: { width: `${percent}%` } }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx("absolute h-1 rounded-full", variantClass),
+        style: { width: `${percent}%`, left: `${offsetPercent}%` }
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
         toSigFigs(durationMs, 3),
@@ -5181,14 +5721,6 @@ const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
   ] });
 };
 
-const TraceDurationContext = React.createContext(0);
-const useTraceDuration = () => {
-  return React.useContext(TraceDurationContext);
-};
-const TraceDurationProvider = ({ children, durationMs }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TraceDurationContext.Provider, { value: durationMs, children });
-};
-
 const spanIconMap = {
   tool: ToolsIcon,
   agent: AgentIcon,
@@ -5209,14 +5741,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] = React.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__ */ jsxRuntime.jsx(TraceDurationProvider, { durationMs, children: /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("flex justify-between items-center gap-2 rounded-md pl-2", isActive && "bg-surface4"), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-8 items-center gap-1 min-w-0", children: [
         spans ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -5241,20 +5784,30 @@ const Span = ({ children, durationMs, variant, tokenCount, spans, isRoot, onClic
           durationMs,
           tokenCount,
           variant: variant === "agent" ? "agent" : void 0,
-          progressPercent
+          progressPercent,
+          offsetPercent
         }
       )
     ] }),
     isExpanded && spans && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4", children: spans })
-  ] }) });
+  ] });
 };
 
 const Spans = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("ol", { children });
 };
 
-const Trace = ({ name, spans, durationMs, tokenCount, onClick, variant, isActive }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TraceDurationProvider, { durationMs, children: /* @__PURE__ */ jsxRuntime.jsx(
+const Trace = ({
+  name,
+  spans,
+  durationMs,
+  tokenCount,
+  onClick,
+  variant,
+  isActive,
+  totalDurationMs
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Span,
     {
       isRoot: true,
@@ -5263,9 +5816,11 @@ const Trace = ({ name, spans, durationMs, tokenCount, onClick, variant, isActive
       spans: /* @__PURE__ */ jsxRuntime.jsx(Spans, { children: spans }),
       onClick,
       isActive,
+      offsetMs: 0,
+      totalDurationMs,
       children: name
     }
-  ) });
+  );
 };
 
 const getSpanVariant = (span) => {
@@ -5290,40 +5845,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 } = React.useContext(TraceContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(Spans, { children: spans.map((span) => {
-    const isActive = span.id === activeSpan?.id;
+  return /* @__PURE__ */ jsxRuntime.jsx(Spans, { children: spanNodes.map((spanNode) => {
+    const isActive = spanNode.id === activeSpan?.id;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Span,
       {
-        spans: span.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(NestedSpans, { spans: span.children }),
-        durationMs: span.duration / 1e3,
-        variant: getSpanVariant(span),
+        spans: spanNode.children.length > 0 && /* @__PURE__ */ jsxRuntime.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 } = React.useContext(TraceContext);
+  const tree = createSpanTree(trace);
   return /* @__PURE__ */ jsxRuntime.jsx(TraceTree, { children: tree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
     Trace,
     {
       name: node.name,
-      durationMs: node.duration / 1e3,
-      spans: /* @__PURE__ */ jsxRuntime.jsx(NestedSpans, { spans: node.children }),
+      durationMs: node.duration,
+      totalDurationMs: node.totalDurationMs,
+      spans: /* @__PURE__ */ jsxRuntime.jsx(NestedSpans, { spanNodes: node.children }),
       variant: getSpanVariant(node),
       isActive: node.id === activeSpan?.id,
       onClick: () => setSpan(node)
@@ -5459,8 +6045,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 {
@@ -6071,7 +6656,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;
@@ -6106,8 +6691,8 @@ const sanitizeVNexWorkflowWatchResult = (record) => {
   };
   return sanitizedRecord;
 };
-const useWorkflow = (workflowId, baseUrl) => {
-  const [workflow, setWorkflow] = React.useState(null);
+const useLegacyWorkflow = (workflowId, baseUrl) => {
+  const [legacyWorkflow, setLegacyWorkflow] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   const client = createMastraClient(baseUrl);
   React.useEffect(() => {
@@ -6115,22 +6700,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");
-          sonner.toast.error("Error fetching workflow");
+          setLegacyWorkflow(null);
+          console.error("Error fetching legacy workflow");
+          sonner.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 };
           })
@@ -6138,21 +6723,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);
-        sonner.toast.error("Error fetching workflow");
+        setLegacyWorkflow(null);
+        console.error("Error fetching legacy workflow", error);
+        sonner.toast.error("Error fetching legacy workflow");
       } finally {
         setIsLoading(false);
       }
     };
     fetchWorkflow();
   }, [workflowId]);
-  return { workflow, isLoading };
+  return { legacyWorkflow, isLoading };
 };
-const useVNextWorkflow = (workflowId, baseUrl) => {
-  const [vNextWorkflow, setVNextWorkflow] = React.useState(null);
+const useWorkflow = (workflowId, baseUrl) => {
+  const [workflow, setWorkflow] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   const client = createMastraClient(baseUrl);
   React.useEffect(() => {
@@ -6160,14 +6745,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);
         sonner.toast.error("Error fetching workflow");
       } finally {
@@ -6176,13 +6761,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) {
@@ -6190,9 +6775,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) {
@@ -6200,36 +6785,50 @@ 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
+    input,
+    runtimeContext: playgroundRuntimeContext
   }) => {
     try {
-      const workflow = client.getVNextWorkflow(workflowId);
-      await workflow.start({ runId, inputData: input || {} });
+      const runtimeContext$1 = new runtimeContext.RuntimeContext();
+      Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+        runtimeContext$1.set(key, value);
+      });
+      const workflow = client.getWorkflow(workflowId);
+      await workflow.start({ runId, inputData: input || {}, runtimeContext: runtimeContext$1 });
     } catch (error) {
       console.error("Error starting workflow run:", error);
       throw error;
     }
   };
-  const startAsyncVNextWorkflowRun = async ({
+  const startAsyncWorkflowRun = async ({
     workflowId,
     runId,
-    input
+    input,
+    runtimeContext: playgroundRuntimeContext
   }) => {
     try {
-      const workflow = client.getVNextWorkflow(workflowId);
-      const result = await workflow.startAsync({ runId, inputData: input || {} });
+      const runtimeContext$1 = new runtimeContext.RuntimeContext();
+      Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+        runtimeContext$1.set(key, value);
+      });
+      const workflow = client.getWorkflow(workflowId);
+      const result = await workflow.startAsync({ runId, inputData: input || {}, runtimeContext: runtimeContext$1 });
       return result;
     } catch (error) {
       console.error("Error starting workflow run:", error);
@@ -6239,17 +6838,17 @@ const useExecuteWorkflow = (baseUrl) => {
   return {
     startWorkflowRun,
     createWorkflowRun,
-    startVNextWorkflowRun,
-    createVNextWorkflowRun,
-    startAsyncVNextWorkflowRun
+    startLegacyWorkflowRun,
+    createLegacyWorkflowRun,
+    startAsyncWorkflowRun
   };
 };
 const useWatchWorkflow = (baseUrl) => {
+  const [isWatchingLegacyWorkflow, setIsWatchingLegacyWorkflow] = React.useState(false);
   const [isWatchingWorkflow, setIsWatchingWorkflow] = React.useState(false);
-  const [isWatchingVNextWorkflow, setIsWatchingVNextWorkflow] = React.useState(false);
+  const [legacyWatchResult, setLegacyWatchResult] = React.useState(null);
   const [watchResult, setWatchResult] = React.useState(null);
-  const [watchVNextResult, setWatchVNextResult] = React.useState(null);
-  const debouncedSetWatchResult = useDebounce.useDebouncedCallback((record) => {
+  const debouncedSetLegacyWorkflowWatchResult = useDebounce.useDebouncedCallback((record) => {
     const formattedResults = Object.entries(record.results || {}).reduce(
       (acc, [key, value]) => {
         let output = value.status === "success" ? value.output : void 0;
@@ -6272,19 +6871,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
           });
         }
@@ -6293,24 +6892,24 @@ const useWatchWorkflow = (baseUrl) => {
       console.error("Error watching workflow:", error);
       throw error;
     } finally {
-      setIsWatchingWorkflow(false);
+      setIsWatchingLegacyWorkflow(false);
     }
   };
-  const debouncedSetVNextWatchResult = useDebounce.useDebouncedCallback((record) => {
-    const sanitizedRecord = sanitizeVNexWorkflowWatchResult(record);
-    setWatchVNextResult(sanitizedRecord);
+  const debouncedSetWorkflowWatchResult = useDebounce.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
           });
         }
@@ -6319,63 +6918,67 @@ 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] = React.useState(false);
   const [isResumingWorkflow, setIsResumingWorkflow] = React.useState(false);
-  const [isResumingVNextWorkflow, setIsResumingVNextWorkflow] = React.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,
     resumeData,
-    runtimeContext
+    runtimeContext: playgroundRuntimeContext
   }) => {
     try {
-      setIsResumingVNextWorkflow(true);
+      setIsResumingWorkflow(true);
       const client = createMastraClient(baseUrl);
-      const response = await client.getVNextWorkflow(workflowId).resume({ step, runId, resumeData, runtimeContext });
+      const runtimeContext$1 = new runtimeContext.RuntimeContext();
+      Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
+        runtimeContext$1.set(key, value);
+      });
+      const response = await client.getWorkflow(workflowId).resume({ step, runId, resumeData, runtimeContext: runtimeContext$1 });
       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
   };
 };
 
@@ -6462,7 +7065,7 @@ const defaultEdgeOptions = {
     color: "#8e8e8e"
   }
 };
-const contructNodesAndEdges = ({
+const contructLegacyNodesAndEdges = ({
   stepGraph,
   stepSubscriberGraph,
   steps: mainSteps = {}
@@ -6913,7 +7516,7 @@ const getStepNodeAndEdge = ({
   }
   return { nodes: [], edges: [], nextPrevNodeIds: [] };
 };
-const constructVNextNodesAndEdges = ({
+const constructNodesAndEdges = ({
   stepGraph
 }) => {
   if (!stepGraph) {
@@ -6984,54 +7587,6 @@ const Collapsible = CollapsiblePrimitive__namespace.Root;
 const CollapsibleTrigger = CollapsiblePrimitive__namespace.CollapsibleTrigger;
 const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
 
-const Dialog = DialogPrimitive__namespace.Root;
-const DialogPortal = DialogPrimitive__namespace.Portal;
-const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-const DialogContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-
 const ScrollArea = React__namespace.forwardRef(
   ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
     const areaRef = React__namespace.useRef(null);
@@ -7252,12 +7807,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
   });
@@ -7295,10 +7850,10 @@ function WorkflowNestedGraph({
   ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) });
 }
 
-const WorkflowNestedGraphContext = React.createContext(
+const LegacyWorkflowNestedGraphContext = React.createContext(
   {}
 );
-function WorkflowNestedGraphProvider({ children }) {
+function LegacyWorkflowNestedGraphProvider({ children }) {
   const [stepGraph, setStepGraph] = React.useState(null);
   const [stepSubscriberGraph, setStepSubscriberGraph] = React.useState(null);
   const [openDialog, setOpenDialog] = React.useState(false);
@@ -7320,7 +7875,7 @@ function WorkflowNestedGraphProvider({ children }) {
     setOpenDialog(true);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    WorkflowNestedGraphContext.Provider,
+    LegacyWorkflowNestedGraphContext.Provider,
     {
       value: {
         showNestedGraph,
@@ -7336,16 +7891,23 @@ function WorkflowNestedGraphProvider({ children }) {
               " workflow"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraph, { stepGraph, open: openDialog, stepSubscriberGraph }) })
+          /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            LegacyWorkflowNestedGraph,
+            {
+              stepGraph,
+              open: openDialog,
+              stepSubscriberGraph
+            }
+          ) })
         ] }) }) })
       ]
     }
   );
 }
 
-function WorkflowNestedNode({ data }) {
+function LegacyWorkflowNestedNode({ data }) {
   const { label, withoutTopHandle, withoutBottomHandle, stepGraph, stepSubscriberGraph } = data;
-  const { showNestedGraph } = React.useContext(WorkflowNestedGraphContext);
+  const { showNestedGraph } = React.useContext(LegacyWorkflowNestedGraphContext);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("bg-[rgba(29,29,29,0.5)] rounded-md h-full overflow-scroll w-[274px]"), children: [
     !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react$2.Handle, { type: "target", position: react$2.Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 cursor-pointer", onClick: () => showNestedGraph({ label, stepGraph, stepSubscriberGraph }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-1.5 rounded-sm p-2 cursor-pointer", children: [
@@ -7356,8 +7918,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
@@ -7369,7 +7931,7 @@ function WorkflowGraphInner({ workflow }) {
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": WorkflowNestedNode
+    "nested-node": LegacyWorkflowNestedNode
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
     react$2.ReactFlow,
@@ -7396,12 +7958,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__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
   }
-  if (!workflow) {
+  if (!legacyWorkflow) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, {}),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -7411,28 +7973,24 @@ function WorkflowGraph({ workflowId, baseUrl }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowGraphInner, { workflow }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(LegacyWorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LegacyWorkflowGraphInner, { workflow: legacyWorkflow }) }) });
 }
 
 const Form = React.forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive__namespace.Root, { ref, className: cn(labelVariants(), className), ...props }));
-Label.displayName = LabelPrimitive__namespace.Root.displayName;
-
 const DISABLED_LABELS = ["boolean", "object", "array"];
 const FieldWrapper = ({ label, children, id, field, error }) => {
   const isDisabled = DISABLED_LABELS.includes(field.type);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-    !isDisabled && /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: id, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-4 last:pb-0", children: [
+    !isDisabled && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3 pb-1 block", htmlFor: id, children: [
       label,
-      field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: " *" })
+      field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent2", children: " *" })
     ] }),
     children,
-    field.fieldConfig?.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: field.fieldConfig.description }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: error })
+    field.fieldConfig?.description && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-icon6", children: field.fieldConfig.description }),
+    error && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: "text-accent2", children: error })
   ] });
 };
 
@@ -7541,9 +8099,9 @@ const BooleanField = ({ field, label, id, inputProps, value }) => /* @__PURE__ *
       defaultChecked: field.default
     }
   ),
-  /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: id, children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3", htmlFor: id, children: [
     label,
-    field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: " *" })
+    field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent2", children: " *" })
   ] })
 ] });
 
@@ -7890,34 +8448,53 @@ const SelectField = ({ field, inputProps, error, id, value }) => {
 };
 
 const ObjectWrapper = ({ label, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 border p-2 rounded-md", children: [
-    label === "​" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium", children: label }),
-    children
-  ] });
-};
-
-const ArrayWrapper = ({ label, children, onAddItem }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium", children: label }),
-    children,
+  const hasLabel = label !== "​" && label !== "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "", children: [
+    hasLabel && /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 flex items-center gap-1 pb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Braces, {}) }),
+      label
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      Button$1,
+      "div",
       {
-        className: "w-full flex items-center justify-center",
-        onClick: onAddItem,
-        variant: "outline",
-        size: "sm",
-        type: "button",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "h3", variant: "ui-sm", className: "text-icon3 pb-2 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Brackets, {}) }),
+        label
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { delayDuration: 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, {}) })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Add item" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children })
+  ] });
+};
+
 const ArrayElementWrapper = ({ children, onRemove }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative border p-4 rounded-md mt-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: onRemove, variant: "ghost", className: "absolute top-2 right-2", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, { className: "h-4 w-4" }) }),
-    children
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-4 border-l border-border1", children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onRemove, type: "button", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrashIcon, {}) }),
+      "Delete"
+    ] })
   ] });
 };
 
@@ -8116,6 +8693,10 @@ class CustomZodProvider extends zod.ZodProvider {
   }
 }
 
+const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive__namespace.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive__namespace.Root.displayName;
+
 function isEmptyZodObject(schema) {
   if (schema instanceof z.ZodObject) {
     return Object.keys(schema.shape).length === 0;
@@ -8127,7 +8708,7 @@ function DynamicForm({
   onSubmit,
   defaultValues,
   isSubmitLoading,
-  submitButtonLabel = "Submit"
+  submitButtonLabel
 }) {
   if (!schema) {
     console.error("no form schema found");
@@ -8149,17 +8730,17 @@ function DynamicForm({
     },
     defaultValues: defaultValues ? { "​": defaultValues } : void 0,
     formProps: {
-      className: "space-y-4 p-4"
+      className: ""
     },
     uiComponents: {
-      SubmitButton: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "w-full", type: "submit", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : children || submitButtonLabel })
+      SubmitButton: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children })
     },
     formComponents: {
       Label: ({ value }) => /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-normal", children: value })
     },
     withSubmit: true
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(AutoForm, { ...formProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx(AutoForm, { ...formProps }) });
 }
 
 function resolveSerializedZodOutput(obj) {
@@ -8189,22 +8770,22 @@ function CodeBlockDemo({
 
 const WorkflowRunContext = React.createContext({});
 function WorkflowRunProvider({ children }) {
+  const [legacyResult, setLegacyResult] = React.useState(null);
   const [result, setResult] = React.useState(null);
-  const [vNextResult, setVNextResult] = React.useState(null);
   const [payload, setPayload] = React.useState(null);
   const clearData = () => {
+    setLegacyResult(null);
     setResult(null);
-    setVNextResult(null);
     setPayload(null);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     WorkflowRunContext.Provider,
     {
       value: {
+        legacyResult,
+        setLegacyResult,
         result,
         setResult,
-        vNextResult,
-        setVNextResult,
         payload,
         setPayload,
         clearData
@@ -8214,16 +8795,81 @@ function WorkflowRunProvider({ children }) {
   );
 }
 
-function WorkflowTrigger({
+const WorkflowCard = ({ header, children, footer }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border-sm border-border1 bg-surface4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1 px-2 flex items-center gap-3", children: header }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t-sm border-border1", children }),
+    footer && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+          status === "Completed" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
+          status === "Failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
+          status === "Executing" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon3 animate-spin" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 justify-between w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Txt, { variant: "ui-lg", className: "text-icon6 flex items-center gap-3 font-medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(DeploymentIcon, {}) }),
+          "Results"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Copy result" })
+        ] })
+      ] }),
+      footer: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CodeBlockDemo, { className: "w-full overflow-x-auto", code: sanitizedJsonResult || jsonResult, language: "json" }) : null
+    }
+  );
+};
+
+function LegacyWorkflowTrigger({
   workflowId,
   baseUrl,
   setRunId
 }) {
-  const { result, setResult, payload, setPayload } = React.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 } = React.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] = React.useState([]);
   const [isRunning, setIsRunning] = React.useState(false);
   const triggerSchema = workflow?.triggerSchema;
@@ -8254,7 +8900,7 @@ function WorkflowTrigger({
     });
   };
   const watchResultToUse = result ?? watchResult;
-  const workflowActivePaths = watchResultToUse?.activePaths ?? [];
+  const workflowActivePaths = watchResultToUse?.activePaths ?? {};
   React.useEffect(() => {
     setIsRunning(isWatchingWorkflow);
   }, [isWatchingWorkflow]);
@@ -8282,50 +8928,34 @@ function WorkflowTrigger({
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(triggerSchema))) : null;
   const { sanitizedOutput, ...restResult } = result ?? {};
-  return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    !isSuspendedSteps && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Input" }),
-        isResumingWorkflow ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
-          " Resuming workflow"
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicForm,
-        {
-          schema: zodInputSchema,
-          defaultValues: payload,
-          isSubmitLoading: isWatchingWorkflow,
-          onSubmit: (data) => {
-            setPayload(data);
-            handleExecuteWorkflow(data);
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 space-y-4", children: [
-      isResumingWorkflow ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
-        " Resuming workflow"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "w-full", disabled: isRunning, onClick: () => handleExecuteWorkflow(null), children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }) : "Trigger" })
-    ] }) }),
-    Object.values(workflowActivePaths).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.map(([stepId, { status: pathStatus, stepPath }]) => {
-        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : status === "Failed" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-yellow-500 rounded-full animate-pulse" });
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between p-3`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: path.charAt(0).toUpperCase() + path.slice(1) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: statusIcon }),
-              status
-            ] })
-          ] }) }, idx);
-        }) });
-      }) })
+  const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full px-5 pt-3 pb-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    isResumingWorkflow && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin text-icon6" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "Resuming workflow" })
     ] }),
+    !isSuspendedSteps && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicForm,
+      {
+        schema: zodInputSchema,
+        defaultValues: payload,
+        isSubmitLoading: isWatchingWorkflow,
+        submitButtonLabel: "Run",
+        onSubmit: (data) => {
+          setPayload(data);
+          handleExecuteWorkflow(data);
+        }
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        className: "w-full",
+        variant: "light",
+        disabled: isRunning,
+        onClick: () => handleExecuteWorkflow(null),
+        children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : "Trigger"
+      }
+    ) }),
     isSuspendedSteps && suspendedSteps?.map((step) => {
       const stepDefinition = workflow.steps[step.stepId];
       const stepSchema = stepDefinition?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(stepDefinition.inputSchema))) : z.z.record(z.z.string(), z.z.any());
@@ -8357,29 +8987,23 @@ function WorkflowTrigger({
         )
       ] });
     }),
-    result && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col group relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Output" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        CodeBlockDemo,
-        {
-          className: "w-full overflow-x-auto",
-          code: sanitizedOutput || JSON.stringify(restResult, null, 2),
-          language: "json"
-        }
-      )
+    hasWorkflowActivePaths && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: Object.entries(workflowActivePaths)?.map(([stepId, { status: pathStatus, stepPath }]) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: stepPath?.map((path, idx) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(LegacyWorkflowStatus, { stepId, pathStatus, path }, idx);
+        }) }, stepId);
+      }) })
+    ] }),
+    result && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsxRuntime.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] = React.useState(false);
@@ -8390,7 +9014,7 @@ function VNextWorkflowNestedGraph({ stepGraph, open }) {
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": VNextWorkflowNestedNode
+    "nested-node": WorkflowNestedNode
   };
   React.useEffect(() => {
     if (open) {
@@ -8417,10 +9041,10 @@ function VNextWorkflowNestedGraph({ stepGraph, open }) {
   ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) });
 }
 
-const VNextWorkflowNestedGraphContext = React.createContext(
+const WorkflowNestedGraphContext = React.createContext(
   {}
 );
-function VNextWorkflowNestedGraphProvider({ children }) {
+function WorkflowNestedGraphProvider({ children }) {
   const [stepGraph, setStepGraph] = React.useState(null);
   const [parentStepGraphList, setParentStepGraphList] = React.useState([]);
   const [openDialog, setOpenDialog] = React.useState(false);
@@ -8458,7 +9082,7 @@ function VNextWorkflowNestedGraphProvider({ children }) {
     }, 500);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    VNextWorkflowNestedGraphContext.Provider,
+    WorkflowNestedGraphContext.Provider,
     {
       value: {
         showNestedGraph,
@@ -8474,16 +9098,16 @@ function VNextWorkflowNestedGraphProvider({ children }) {
               " workflow"
             ] })
           ] }),
-          switching ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VNextWorkflowNestedGraph, { stepGraph, open: openDialog }) })
+          switching ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraph, { stepGraph, open: openDialog }) })
         ] }) }) })
       ]
     }
   );
 }
 
-function VNextWorkflowNestedNode({ data }) {
+function WorkflowNestedNode({ data }) {
   const { label, withoutTopHandle, withoutBottomHandle, stepGraph } = data;
-  const { showNestedGraph } = React.useContext(VNextWorkflowNestedGraphContext);
+  const { showNestedGraph } = React.useContext(WorkflowNestedGraphContext);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("bg-[rgba(29,29,29,0.5)] rounded-md h-full overflow-scroll w-[274px]"), children: [
     !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react$2.Handle, { type: "target", position: react$2.Position.Top, style: { visibility: "hidden" } }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 cursor-pointer", onClick: () => showNestedGraph({ label, stepGraph }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-1.5 rounded-sm p-2 cursor-pointer", children: [
@@ -8494,8 +9118,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] = react$2.useNodesState(initialNodes);
   const [edges] = react$2.useEdgesState(initialEdges);
   const nodeTypes = {
@@ -8503,7 +9127,7 @@ function VNextWorkflowGraphInner({ workflow }) {
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": VNextWorkflowNestedNode
+    "nested-node": WorkflowNestedNode
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
     react$2.ReactFlow,
@@ -8525,12 +9149,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__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
   }
-  if (!vNextWorkflow) {
+  if (!workflow) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, {}),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -8540,120 +9164,126 @@ function VNextWorkflowGraph({ workflowId, baseUrl }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(VNextWorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VNextWorkflowGraphInner, { workflow: vNextWorkflow }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraphProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowGraphInner, { workflow }) }) });
 }
 
-function VNextWorkflowTrigger({
+const WorkflowStatus = ({ stepId, status }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WorkflowCard,
+    {
+      header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+          status === "success" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
+          status === "failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
+          status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CirclePause, { className: "text-icon3" }),
+          status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon3 animate-spin" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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 { vNextResult, setVNextResult, payload, setPayload } = React.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 { runtimeContext } = usePlaygroundStore();
+  const { result, setResult, payload, setPayload } = React.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] = React.useState([]);
   const [isRunning, setIsRunning] = React.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 });
+      watchWorkflow({ workflowId, runId });
+      startWorkflowRun({ workflowId, runId, input: data, runtimeContext });
     } catch (err) {
       setIsRunning(false);
       sonner.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,
-      workflowId
+      workflowId,
+      runtimeContext
     });
   };
-  const watchResultToUse = vNextResult ?? watchVNextResult;
+  const watchResultToUse = result ?? watchResult;
   const workflowActivePaths = watchResultToUse?.payload?.workflowState?.steps ?? {};
   React.useEffect(() => {
-    setIsRunning(isWatchingVNextWorkflow);
-  }, [isWatchingVNextWorkflow]);
+    setIsRunning(isWatchingWorkflow);
+  }, [isWatchingWorkflow]);
   React.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]);
   React.useEffect(() => {
-    if (watchVNextResult) {
-      setVNextResult(watchVNextResult);
+    if (watchResult) {
+      setResult(watchResult);
     }
-  }, [watchVNextResult]);
+  }, [watchResult]);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-10" }),
       /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-10" })
     ] }) });
   }
-  if (!vNextWorkflow) return null;
+  if (!workflow) return null;
   const isSuspendedSteps = suspendedSteps.length > 0;
   const zodInputSchema = triggerSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(triggerSchema))) : null;
-  const { sanitizedOutput, ...restResult } = vNextResult ?? {};
-  return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    !isSuspendedSteps && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Input" }),
-        isResumingVNextWorkflow ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
-          " Resuming workflow"
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicForm,
-        {
-          schema: zodInputSchema,
-          defaultValues: payload,
-          isSubmitLoading: isWatchingVNextWorkflow,
-          onSubmit: (data) => {
-            setPayload(data);
-            handleExecuteWorkflow(data);
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 space-y-4", children: [
-      isResumingVNextWorkflow ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
-        " Resuming workflow"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(Button$1, { className: "w-full", disabled: isRunning, onClick: () => handleExecuteWorkflow(null), children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }) : "Trigger" })
-    ] }) }),
-    Object.values(workflowActivePaths).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : status === "failed" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-red-500 rounded-full" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-yellow-500 rounded-full animate-pulse" });
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-between p-3`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: stepId.charAt(0).toUpperCase() + stepId.slice(1) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 capitalize", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-full px-5 pt-3 pb-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    isResumingWorkflow && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin text-icon6" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "Resuming workflow" })
     ] }),
-    !isWatchingVNextWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
-      const stepDefinition = vNextWorkflow.steps[step.stepId];
+    !isSuspendedSteps && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicForm,
+      {
+        schema: zodInputSchema,
+        defaultValues: payload,
+        isSubmitLoading: isWatchingWorkflow,
+        submitButtonLabel: "Run",
+        onSubmit: (data) => {
+          setPayload(data);
+          handleExecuteWorkflow(data);
+        }
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        className: "w-full",
+        variant: "light",
+        disabled: isRunning,
+        onClick: () => handleExecuteWorkflow(null),
+        children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : "Trigger"
+      }
+    ) }),
+    !isWatchingWorkflow && isSuspendedSteps && suspendedSteps?.map((step) => {
+      const stepDefinition = workflow.steps[step.stepId];
       const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(stepDefinition.resumeSchema))) : z.z.record(z.z.string(), z.z.any());
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col px-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
@@ -8669,7 +9299,7 @@ function VNextWorkflowTrigger({
           DynamicForm,
           {
             schema: stepSchema,
-            isSubmitLoading: isResumingVNextWorkflow,
+            isSubmitLoading: isResumingWorkflow,
             submitButtonLabel: "Resume",
             onSubmit: (data) => {
               handleResumeWorkflow({
@@ -8683,23 +9313,18 @@ function VNextWorkflowTrigger({
         )
       ] });
     }),
-    vNextResult && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col group relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Output" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        CodeBlockDemo,
-        {
-          className: "w-full overflow-x-auto",
-          code: sanitizedOutput || JSON.stringify(restResult, null, 2),
-          language: "json"
-        }
-      )
+    hasWorkflowActivePaths && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(WorkflowStatus, { stepId, status });
+        }) })
+      ] })
+    ] }),
+    result && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsxRuntime.jsx(WorkflowResult, { sanitizedJsonResult: sanitizedOutput, jsonResult: JSON.stringify(restResult, null, 2) })
     ] })
   ] }) });
 }
@@ -8713,7 +9338,8 @@ const DataTable = ({
   getRowId,
   selectedRowId,
   isLoading,
-  emptyText
+  emptyText,
+  onClick
 }) => {
   const [sorting, setSorting] = React.useState([]);
   const [{ pageIndex, pageSize }, setPagination] = React.useState({
@@ -8755,7 +9381,16 @@ const DataTable = ({
         const meta = header.column.columnDef.meta;
         return /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: meta?.width || size || "auto" }, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 3 }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(Row, { children: Array.from({ length: columns.length }).map((_2, cellIndex) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }, `row-${rowIndex}-cell-${cellIndex}`)) }, rowIndex)) }) : rows?.length > 0 ? rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(Row, { "data-state": (row.getIsSelected() || row.id === selectedRowId) && "selected", children: row.getVisibleCells().map((cell) => reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())) }, row.id)) : emptyNode })
+      /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 3 }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(Row, { onClick: () => {
+      }, children: Array.from({ length: columns.length }).map((_2, cellIndex) => /* @__PURE__ */ jsxRuntime.jsx(Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-1/2" }) }, `row-${rowIndex}-cell-${cellIndex}`)) }, rowIndex)) }) : rows?.length > 0 ? rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+        Row,
+        {
+          "data-state": (row.getIsSelected() || row.id === selectedRowId) && "selected",
+          onClick: () => onClick?.(row.original),
+          children: row.getVisibleCells().map((cell) => reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))
+        },
+        row.id
+      )) : emptyNode })
     ] }),
     pagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between px-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground text-sm", children: [
@@ -8892,6 +9527,56 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100
   )
 ] });
 
+const Entity = ({ children, className, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { size: "lg", className: clsx("text-icon3 mt-1", className), children });
+};
+const EntityName = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-lg", className: clsx("text-icon6 font-medium", className), children });
+};
+const EntityDescription = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-sm", className: clsx("text-icon3", className), children });
+};
+const EntityContent = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+};
+
+const EmptyState = ({
+  iconSlot,
+  titleSlot,
+  descriptionSlot,
+  actionSlot,
+  as: Component = "div"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-[340px] flex-col items-center justify-center text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-auto [&>svg]:w-[126px]", children: iconSlot }),
+    /* @__PURE__ */ jsxRuntime.jsx(Component, { className: "text-icon6 pt-[34px] font-serif text-[1.75rem] font-semibold", children: titleSlot }),
+    /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-lg", className: "text-icon3 pb-[34px]", children: descriptionSlot }),
+    actionSlot
+  ] });
+};
+
 function usePolling({
   fetchFn,
   interval = 3e3,
@@ -9051,6 +9736,7 @@ exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentContext = AgentContext;
 exports.AgentEvals = AgentEvals;
 exports.AgentIcon = AgentIcon;
+exports.AgentNetworkCoinIcon = AgentNetworkCoinIcon;
 exports.AgentProvider = AgentProvider;
 exports.AgentTraces = AgentTraces;
 exports.AiIcon = AiIcon;
@@ -9074,10 +9760,17 @@ exports.DeploymentIcon = DeploymentIcon;
 exports.DividerIcon = DividerIcon;
 exports.DocsIcon = DocsIcon;
 exports.DynamicForm = DynamicForm;
+exports.EmptyState = EmptyState;
+exports.Entity = Entity;
+exports.EntityContent = EntityContent;
+exports.EntityDescription = EntityDescription;
+exports.EntityIcon = EntityIcon;
+exports.EntityName = EntityName;
 exports.EntryCell = EntryCell;
 exports.EnvIcon = EnvIcon;
 exports.EvaluatorCoinIcon = EvaluatorCoinIcon;
 exports.FiltersIcon = FiltersIcon;
+exports.FolderIcon = FolderIcon;
 exports.GithubCoinIcon = GithubCoinIcon;
 exports.GithubIcon = GithubIcon;
 exports.GoogleIcon = GoogleIcon;
@@ -9090,8 +9783,12 @@ exports.Icon = Icon;
 exports.InfoIcon = InfoIcon;
 exports.JudgeIcon = JudgeIcon;
 exports.LatencyIcon = LatencyIcon;
+exports.LegacyWorkflowGraph = LegacyWorkflowGraph;
+exports.LegacyWorkflowTrigger = LegacyWorkflowTrigger;
 exports.LogsIcon = LogsIcon;
 exports.MastraResizablePanel = MastraResizablePanel;
+exports.McpCoinIcon = McpCoinIcon;
+exports.McpServerIcon = McpServerIcon;
 exports.MemoryIcon = MemoryIcon;
 exports.NetworkChat = NetworkChat;
 exports.NetworkContext = NetworkContext;
@@ -9112,6 +9809,7 @@ exports.ThreadItem = ThreadItem;
 exports.ThreadLink = ThreadLink;
 exports.ThreadList = ThreadList;
 exports.Threads = Threads;
+exports.ToolCoinIcon = ToolCoinIcon;
 exports.ToolsIcon = ToolsIcon;
 exports.TraceContext = TraceContext;
 exports.TraceIcon = TraceIcon;
@@ -9120,8 +9818,6 @@ exports.TsIcon = TsIcon;
 exports.Txt = Txt;
 exports.TxtCell = TxtCell;
 exports.UnitCell = UnitCell;
-exports.VNextWorkflowGraph = VNextWorkflowGraph;
-exports.VNextWorkflowTrigger = VNextWorkflowTrigger;
 exports.VariablesIcon = VariablesIcon;
 exports.WorkflowCoinIcon = WorkflowCoinIcon;
 exports.WorkflowGraph = WorkflowGraph;
@@ -9131,6 +9827,8 @@ exports.WorkflowRunProvider = WorkflowRunProvider;
 exports.WorkflowTraces = WorkflowTraces;
 exports.WorkflowTrigger = WorkflowTrigger;
 exports.refineTraces = refineTraces;
+exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
+exports.useSpeechRecognition = useSpeechRecognition;
 exports.useTraces = useTraces;
 //# sourceMappingURL=index.cjs.js.map