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

package/dist/index.es.js

@@ -1,24 +1,21 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
+import { CheckIcon, CopyIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Footprints, CircleCheck, CircleX, AlertCircleIcon, X, Plus, CalendarIcon, Check, Loader2 } from 'lucide-react';
 import * as React from 'react';
-import React__default, { useState, useRef, useCallback, useEffect, useLayoutEffect, Suspense, useMemo, forwardRef, memo, createContext, useContext, Fragment as Fragment$1 } from 'react';
-import { useSWRConfig } from 'swr';
-import { MastraClient } from '@mastra/client-js';
-import { Check, Copy, X, FileIcon, Paperclip, Square, ArrowUp, Dot, ArrowDown, CheckIcon, CopyIcon, ChevronLeftIcon, ChevronRightIcon, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Footprints, AlertCircleIcon, Plus, CalendarIcon, Loader2 } from 'lucide-react';
+import React__default, { forwardRef, memo, useState, useEffect, createContext, useContext, useRef, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { omit } from 'remeda';
-import { motion, AnimatePresence } from 'motion/react';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { unstable_memoizeMarkdownComponents, useIsMarkdownCodeBlock, MarkdownTextPrimitive } from '@assistant-ui/react-markdown';
 import '@assistant-ui/react-markdown/styles/dot.css';
+import remarkGfm from 'remark-gfm';
 import { makePrismAsyncSyntaxHighlighter } from '@assistant-ui/react-syntax-highlighter';
 import { coldarkDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { MastraClient } from '@mastra/client-js';
 import { format, formatDistanceToNow, isValid } from 'date-fns';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { toast } from 'sonner';
+import { AnimatePresence } from 'motion/react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { jsonLanguage } from '@codemirror/lang-json';
 import { tags } from '@lezer/highlight';
@@ -44,7 +41,7 @@ import { DayPicker } from 'react-day-picker';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { v4 } from '@lukeed/uuid';
-import { CodeBlock as CodeBlock$1 } from 'react-code-block';
+import { CodeBlock } from 'react-code-block';
 
 import './index.css';function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2837,877 +2834,6 @@ const Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-function useCopyToClipboard$2({ text, copyMessage = "Copied to clipboard!" }) {
-  const [isCopied, setIsCopied] = useState(false);
-  const [error, setError] = useState("");
-  const timeoutRef = useRef(null);
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(text).then(() => {
-      setIsCopied(true);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-      timeoutRef.current = setTimeout(() => {
-        setIsCopied(false);
-      }, 2e3);
-    }).catch(() => {
-      setError("Failed to copy to clipboard.");
-    });
-  }, [text, copyMessage]);
-  return { isCopied, handleCopy, error };
-}
-
-function CopyButton$1({ content, copyMessage, classname }) {
-  const { isCopied, handleCopy } = useCopyToClipboard$2({
-    text: content,
-    copyMessage
-  });
-  return /* @__PURE__ */ jsxs("button", { className: cn("relative h-6 w-6", classname), "aria-label": "Copy to clipboard", onClick: handleCopy, children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-100" : "scale-0") }) }),
-    /* @__PURE__ */ jsx(Copy, { className: cn("h-4 w-4 transition-transform ease-in-out", isCopied ? "scale-0" : "scale-100") })
-  ] });
-}
-
-const ACTIVATION_THRESHOLD = 50;
-function useAutoScroll(dependencies) {
-  const containerRef = useRef(null);
-  const previousScrollTop = useRef(null);
-  const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
-  const scrollToBottom = () => {
-    if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-    }
-  };
-  const handleScroll = () => {
-    if (containerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-      const isScrollingUp = previousScrollTop.current ? scrollTop < previousScrollTop.current : false;
-      if (isScrollingUp) {
-        setShouldAutoScroll(false);
-      } else {
-        const isScrolledToBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < ACTIVATION_THRESHOLD;
-        setShouldAutoScroll(isScrolledToBottom);
-      }
-      previousScrollTop.current = scrollTop;
-    }
-  };
-  const handleTouchStart = () => {
-    setShouldAutoScroll(false);
-  };
-  useEffect(() => {
-    if (containerRef.current) {
-      previousScrollTop.current = containerRef.current.scrollTop;
-    }
-  }, []);
-  useEffect(() => {
-    if (shouldAutoScroll) {
-      scrollToBottom();
-    }
-  }, dependencies);
-  return {
-    containerRef,
-    scrollToBottom,
-    handleScroll,
-    shouldAutoScroll,
-    handleTouchStart
-  };
-}
-
-const FilePreview = React__default.forwardRef((props, ref) => {
-  if (props.file.type.startsWith("image/")) {
-    return /* @__PURE__ */ jsx(ImageFilePreview, { ...props, ref });
-  }
-  if (props.file.type.startsWith("text/") || props.file.name.endsWith(".txt") || props.file.name.endsWith(".md")) {
-    return /* @__PURE__ */ jsx(TextFilePreview, { ...props, ref });
-  }
-  return /* @__PURE__ */ jsx(GenericFilePreview, { ...props, ref });
-});
-FilePreview.displayName = "FilePreview";
-const ImageFilePreview = React__default.forwardRef(({ file, onRemove }, ref) => {
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      ref,
-      className: "relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
-      layout: true,
-      initial: { opacity: 0, y: "100%" },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: "100%" },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center space-x-2", children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              alt: `Attachment ${file.name}`,
-              className: "bg-muted grid h-10 w-10 shrink-0 place-items-center rounded-sm border object-cover",
-              src: URL.createObjectURL(file)
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-full truncate", children: file.name })
-        ] }),
-        onRemove ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "bg-background absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border",
-            type: "button",
-            onClick: onRemove,
-            "aria-label": "Remove attachment",
-            children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
-          }
-        ) : null
-      ]
-    }
-  );
-});
-ImageFilePreview.displayName = "ImageFilePreview";
-const TextFilePreview = React__default.forwardRef(({ file, onRemove }, ref) => {
-  const [preview, setPreview] = React__default.useState("");
-  useEffect(() => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const text = e.target?.result;
-      setPreview(text.slice(0, 50) + (text.length > 50 ? "..." : ""));
-    };
-    reader.readAsText(file);
-  }, [file]);
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      ref,
-      className: "relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
-      layout: true,
-      initial: { opacity: 0, y: "100%" },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: "100%" },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center space-x-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-muted grid h-10 w-10 shrink-0 place-items-center rounded-sm border p-0.5", children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground h-full w-full overflow-hidden text-[6px] leading-none", children: preview || "Loading..." }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-full truncate", children: file.name })
-        ] }),
-        onRemove ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "bg-background absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border",
-            type: "button",
-            onClick: onRemove,
-            "aria-label": "Remove attachment",
-            children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
-          }
-        ) : null
-      ]
-    }
-  );
-});
-TextFilePreview.displayName = "TextFilePreview";
-const GenericFilePreview = React__default.forwardRef(({ file, onRemove }, ref) => {
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      ref,
-      className: "relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
-      layout: true,
-      initial: { opacity: 0, y: "100%" },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: "100%" },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center space-x-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-muted grid h-10 w-10 shrink-0 place-items-center rounded-sm border", children: /* @__PURE__ */ jsx(FileIcon, { className: "text-foreground h-6 w-6" }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-full truncate", children: file.name })
-        ] }),
-        onRemove ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "bg-background absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border",
-            type: "button",
-            onClick: onRemove,
-            "aria-label": "Remove attachment",
-            children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
-          }
-        ) : null
-      ]
-    }
-  );
-});
-GenericFilePreview.displayName = "GenericFilePreview";
-
-function useAutosizeTextArea({
-  ref,
-  maxHeight = Number.MAX_SAFE_INTEGER,
-  borderWidth = 0,
-  dependencies
-}) {
-  const originalHeight = useRef(null);
-  useLayoutEffect(() => {
-    if (!ref.current) return;
-    const currentRef = ref.current;
-    const borderAdjustment = borderWidth * 2;
-    if (originalHeight.current === null) {
-      originalHeight.current = currentRef.scrollHeight - borderAdjustment;
-    }
-    currentRef.style.removeProperty("height");
-    const scrollHeight = currentRef.scrollHeight;
-    const clampedToMax = Math.min(scrollHeight, maxHeight);
-    const clampedToMin = Math.max(clampedToMax, originalHeight.current);
-    currentRef.style.height = `${clampedToMin + borderAdjustment}px`;
-  }, [maxHeight, ref, ...dependencies]);
-}
-
-function MessageInput({
-  placeholder = "Ask AI...",
-  className,
-  onKeyDown: onKeyDownProp,
-  submitOnEnter = true,
-  stop,
-  isGenerating,
-  ...props
-}) {
-  const [isDragging, setIsDragging] = useState(false);
-  const addFiles = (files) => {
-    if (props.allowAttachments) {
-      props.setFiles((currentFiles) => {
-        if (currentFiles === null) {
-          return files;
-        }
-        if (files === null) {
-          return currentFiles;
-        }
-        return [...currentFiles, ...files];
-      });
-    }
-  };
-  const onDragOver = (event) => {
-    if (props.allowAttachments !== true) return;
-    event.preventDefault();
-    setIsDragging(true);
-  };
-  const onDragLeave = (event) => {
-    if (props.allowAttachments !== true) return;
-    event.preventDefault();
-    setIsDragging(false);
-  };
-  const onDrop = (event) => {
-    setIsDragging(false);
-    if (props.allowAttachments !== true) return;
-    event.preventDefault();
-    const dataTransfer = event.dataTransfer;
-    if (dataTransfer.files.length) {
-      addFiles(Array.from(dataTransfer.files));
-    }
-  };
-  const onPaste = (event) => {
-    const items = event.clipboardData?.items;
-    if (!items) return;
-    const files = Array.from(items).map((item) => item.getAsFile()).filter((file) => file !== null);
-    if (props.allowAttachments && files.length > 0) {
-      addFiles(files);
-    }
-  };
-  const onKeyDown = (event) => {
-    if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault();
-      event.currentTarget.form?.requestSubmit();
-    }
-    onKeyDownProp?.(event);
-  };
-  const textAreaRef = useRef(null);
-  const showFileList = props.allowAttachments && props.files && props.files.length > 0;
-  useAutosizeTextArea({
-    ref: textAreaRef,
-    maxHeight: 240,
-    borderWidth: 1,
-    dependencies: [props.value, showFileList]
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "relative mx-auto flex w-full", onDragOver, onDragLeave, onDrop, children: [
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        "aria-label": "Write your prompt here",
-        placeholder,
-        ref: textAreaRef,
-        onPaste,
-        onKeyDown,
-        className: cn(
-          "ring-offset-background placeholder:text-muted-foreground focus-visible:border-primary h-[98px] w-full grow resize-none rounded-2xl border-[0.5px] border-[#424242] bg-[#141414] p-3 pr-24 text-sm shadow-[0px_2px_8.1px_0px_rgba(0,0,0,0.20);] transition-[border] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-          showFileList && "pb-16",
-          className
-        ),
-        ...props.allowAttachments ? omit(props, ["allowAttachments", "files", "setFiles"]) : omit(props, ["allowAttachments"])
-      }
-    ),
-    props.allowAttachments && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-3 bottom-0 overflow-x-scroll py-3", children: /* @__PURE__ */ jsx("div", { className: "flex space-x-3", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: props.files?.map((file) => {
-      return /* @__PURE__ */ jsx(
-        FilePreview,
-        {
-          file,
-          onRemove: () => {
-            props.setFiles((files) => {
-              if (!files) return null;
-              const filtered = Array.from(files).filter((f) => f !== file);
-              if (filtered.length === 0) return null;
-              return filtered;
-            });
-          }
-        },
-        file.name + String(file.lastModified)
-      );
-    }) }) }) }),
-    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 right-3 flex gap-2", children: [
-      props.allowAttachments && /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          size: "icon",
-          variant: "outline",
-          className: "h-8 w-8",
-          "aria-label": "Attach a file",
-          onClick: async () => {
-            const files = await showFileUploadDialog();
-            addFiles(files);
-          },
-          children: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" })
-        }
-      ),
-      isGenerating && stop ? /* @__PURE__ */ jsx(Button, { type: "button", size: "icon", className: "h-8 w-8", "aria-label": "Stop generating", onClick: stop, children: /* @__PURE__ */ jsx(Square, { className: "h-3 w-3 animate-pulse", fill: "currentColor" }) }) : /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "submit",
-          variant: "secondary",
-          size: "icon",
-          className: "mt-0 h-8 w-8 rounded-full transition-opacity",
-          "aria-label": "Send message",
-          disabled: props.value === "" || isGenerating,
-          children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-6 w-6" })
-        }
-      )
-    ] }),
-    props.allowAttachments && /* @__PURE__ */ jsx(FileUploadOverlay, { isDragging })
-  ] });
-}
-MessageInput.displayName = "MessageInput";
-function FileUploadOverlay({ isDragging }) {
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: isDragging && /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      className: "border-border bg-background text-muted-foreground pointer-events-none absolute inset-0 flex items-center justify-center space-x-2 rounded-xl border border-dashed text-sm",
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 0.2 },
-      "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx("span", { children: "Drop your files here to attach them." })
-      ]
-    }
-  ) });
-}
-function showFileUploadDialog() {
-  const input = document.createElement("input");
-  input.type = "file";
-  input.multiple = true;
-  input.accept = "*/*";
-  input.click();
-  return new Promise((resolve) => {
-    input.onchange = (e) => {
-      const files = e.currentTarget.files;
-      if (files) {
-        resolve(Array.from(files));
-        return;
-      }
-      resolve(null);
-    };
-  });
-}
-
-async function highlight(code, language) {
-  const { codeToTokens, bundledLanguages } = await import('shiki');
-  if (!(language in bundledLanguages)) return null;
-  const { tokens } = await codeToTokens(code, {
-    lang: language,
-    defaultColor: false,
-    themes: {
-      light: "github-light",
-      dark: "github-dark"
-    }
-  });
-  return tokens;
-}
-
-function MarkdownRenderer({ children }) {
-  const processedText = children?.replace(/\\n/g, "\n");
-  return /* @__PURE__ */ jsx(Markdown, { remarkPlugins: [remarkGfm], components: COMPONENTS, className: "space-y-3", children: processedText });
-}
-const HighlightedPre = React__default.memo(({ children, language, ...props }) => {
-  const [tokens, setTokens] = useState([]);
-  useEffect(() => {
-    highlight(children, language).then((tokens2) => {
-      if (tokens2) setTokens(tokens2);
-    });
-  }, [children, language]);
-  if (!tokens.length) {
-    return /* @__PURE__ */ jsx("pre", { ...props, children });
-  }
-  return /* @__PURE__ */ jsx("pre", { ...props, children: /* @__PURE__ */ jsx("code", { children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { children: line.map((token, tokenIndex) => {
-      const style = typeof token.htmlStyle === "string" ? void 0 : token.htmlStyle;
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg",
-          style,
-          children: token.content
-        },
-        tokenIndex
-      );
-    }) }, lineIndex),
-    lineIndex !== tokens.length - 1 && "\n"
-  ] })) }) });
-});
-HighlightedPre.displayName = "HighlightedCode";
-const CodeBlock = ({ children, className, language, ...restProps }) => {
-  const code = typeof children === "string" ? children : childrenTakeAllStringContents(children);
-  const preClass = cn(
-    "overflow-x-scroll rounded-md border bg-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
-    className
-  );
-  return /* @__PURE__ */ jsxs("div", { className: "group/code relative mb-4", children: [
-    /* @__PURE__ */ jsx(
-      Suspense,
-      {
-        fallback: /* @__PURE__ */ jsx("pre", { className: preClass, ...restProps, children }),
-        children: /* @__PURE__ */ jsx(HighlightedPre, { language, className: preClass, children: code })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100", children: /* @__PURE__ */ jsx(CopyButton$1, { content: code, copyMessage: "Copied code to clipboard" }) })
-  ] });
-};
-function childrenTakeAllStringContents(element) {
-  if (typeof element === "string") {
-    return element;
-  }
-  if (element && typeof element === "object" && "props" in element) {
-    const el = element;
-    const children = el.props.children;
-    if (Array.isArray(children)) {
-      return children.map((child) => childrenTakeAllStringContents(child)).join("");
-    } else {
-      return childrenTakeAllStringContents(children);
-    }
-  }
-  return "";
-}
-const COMPONENTS = {
-  h1: withClass("h1", "text-2xl font-semibold"),
-  h2: withClass("h2", "font-semibold text-xl"),
-  h3: withClass("h3", "font-semibold text-lg"),
-  h4: withClass("h4", "font-semibold text-base"),
-  h5: withClass("h5", "font-medium"),
-  strong: withClass("strong", "font-semibold"),
-  a: withClass("a", "text-primary underline underline-offset-2"),
-  blockquote: withClass("blockquote", "border-l-2 border-primary pl-4"),
-  code: ({ children, className, ...rest }) => {
-    const match = /language-(\w+)/.exec(className || "");
-    return match ? /* @__PURE__ */ jsx(CodeBlock, { className, language: match[1], ...rest, children }) : /* @__PURE__ */ jsx(
-      "code",
-      {
-        className: cn(
-          "[:not(pre)>&]:bg-background/50 font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
-        ),
-        ...rest,
-        children
-      }
-    );
-  },
-  pre: ({ children }) => children,
-  ol: withClass("ol", "list-decimal space-y-2 pl-6"),
-  ul: withClass("ul", "list-disc space-y-2 pl-6"),
-  li: withClass("li", "my-1.5"),
-  table: withClass("table", "w-full border-collapse overflow-y-auto rounded-md border border-foreground/20"),
-  th: withClass(
-    "th",
-    "border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
-  ),
-  td: withClass(
-    "td",
-    "border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
-  ),
-  tr: withClass("tr", "m-0 border-t p-0 even:bg-muted"),
-  p: withClass("p", "whitespace-pre-wrap leading-relaxed"),
-  hr: withClass("hr", "border-foreground/20")
-};
-function withClass(Tag, classes) {
-  const Component = ({ node, ...props }) => /* @__PURE__ */ jsx(Tag, { className: classes, ...props });
-  Component.displayName = Tag;
-  return Component;
-}
-
-const chatBubbleVariants = cva("group/message relative break-words rounded-xl px-3 py-2 text-sm sm:max-w-[70%]", {
-  variants: {
-    isUser: {
-      true: "bg-primary text-primary-foreground",
-      false: "bg-muted text-foreground"
-    },
-    isError: {
-      true: "bg-red-100 dark:bg-red-900/20",
-      false: ""
-    },
-    animation: {
-      none: "",
-      slide: "duration-300 animate-in fade-in-0",
-      scale: "duration-300 animate-in fade-in-0 zoom-in-75",
-      fade: "duration-500 animate-in fade-in-0"
-    }
-  },
-  compoundVariants: [
-    {
-      isUser: true,
-      animation: "slide",
-      class: "slide-in-from-right"
-    },
-    {
-      isUser: false,
-      animation: "slide",
-      class: "slide-in-from-left"
-    },
-    {
-      isUser: true,
-      animation: "scale",
-      class: "origin-bottom-right"
-    },
-    {
-      isUser: false,
-      animation: "scale",
-      class: "origin-bottom-left"
-    }
-  ]
-});
-const ChatMessage = ({
-  role,
-  content,
-  createdAt,
-  showTimeStamp = false,
-  animation = "scale",
-  actions,
-  className,
-  experimental_attachments,
-  isError = false
-}) => {
-  const isUser = role === "user";
-  const files = useMemo(() => {
-    return experimental_attachments?.map((attachment) => {
-      const dataArray = dataUrlToUint8Array(attachment.url);
-      const file = new File([dataArray], attachment.name ?? "Unknown");
-      return file;
-    });
-  }, [experimental_attachments]);
-  const formattedTime = createdAt?.toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit"
-  });
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", isUser ? "items-end" : "items-start"), children: [
-    files ? /* @__PURE__ */ jsx("div", { className: "mb-1 flex flex-wrap gap-2", children: files.map((file, index) => {
-      return /* @__PURE__ */ jsx(FilePreview, { file }, index);
-    }) }) : null,
-    /* @__PURE__ */ jsxs("div", { className: cn(chatBubbleVariants({ isUser, isError, animation: "none" }), className), children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MarkdownRenderer, { children: content }) }),
-      role === "assistant" && actions ? /* @__PURE__ */ jsx("div", { className: "bg-background text-foreground absolute -bottom-4 right-2 flex space-x-1 rounded-lg border p-1 opacity-0 transition-opacity group-hover/message:opacity-100", children: actions }) : null
-    ] }),
-    showTimeStamp && createdAt ? /* @__PURE__ */ jsx(
-      "time",
-      {
-        dateTime: createdAt.toISOString(),
-        className: cn(
-          "mt-1 block px-1 text-xs opacity-50",
-          animation !== "none" && "animate-in fade-in-0 duration-500"
-        ),
-        children: formattedTime
-      }
-    ) : null
-  ] });
-};
-function dataUrlToUint8Array(data) {
-  const base64 = data.split(",")[1];
-  const buf = Buffer.from(base64 ?? "", "base64");
-  return new Uint8Array(buf);
-}
-
-function TypingIndicator() {
-  return /* @__PURE__ */ jsx("div", { className: "justify-left flex space-x-1", children: /* @__PURE__ */ jsx("div", { className: "bg-muted flex items-center gap-1 rounded-lg px-2 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex -space-x-2.5", children: [
-    /* @__PURE__ */ jsx(Dot, { className: "animate-typing-dot-bounce h-5 w-5" }),
-    /* @__PURE__ */ jsx(Dot, { className: "animate-typing-dot-bounce h-5 w-5 delay-200" }),
-    /* @__PURE__ */ jsx(Dot, { className: "animate-typing-dot-bounce h-5 w-5 delay-500" })
-  ] }) }) });
-}
-
-function MessageList({ messages, showTimeStamps = true, isTyping = false, messageOptions }) {
-  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-4 px-3 pt-3", children: [
-    messages.map((message, index) => {
-      const additionalOptions = typeof messageOptions === "function" ? messageOptions(message) : messageOptions;
-      if (message.role === "assistant" && !message.content.trim()) {
-        return null;
-      }
-      return /* @__PURE__ */ jsx(ChatMessage, { showTimeStamp: showTimeStamps, ...message, ...additionalOptions }, index);
-    }),
-    isTyping && /* @__PURE__ */ jsx(TypingIndicator, {})
-  ] });
-}
-
-function PromptSuggestions({ append, suggestions, memoryIsPresent }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex gap-6 text-sm", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => append({ role: "user", content: suggestion }),
-      className: "h-max rounded-[0.4rem] bg-[#141414] p-4 py-[0.6rem]",
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn("text-[#939393] transition-colors hover:text-white", memoryIsPresent ? "text-xs" : "text-sm"),
-          children: suggestion
-        }
-      )
-    },
-    suggestion
-  )) });
-}
-
-function ChatMessages({
-  messages,
-  children
-}) {
-  const { scrollToBottom, shouldAutoScroll } = useAutoScroll([messages]);
-  return /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-scroll pb-4", children: [
-    children,
-    /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-end justify-end [grid-column:1/1] [grid-row:1/1]", children: !shouldAutoScroll && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 left-0 flex w-full justify-end", children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: scrollToBottom,
-        className: "animate-in fade-in-0 slide-in-from-bottom-1 h-8 w-8 rounded-full ease-in-out",
-        size: "icon",
-        variant: "ghost",
-        children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" })
-      }
-    ) }) })
-  ] });
-}
-const ChatContainer = forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props });
-  }
-);
-ChatContainer.displayName = "ChatContainer";
-const ChatForm = forwardRef(
-  ({ children, handleSubmit, isPending, className }, ref) => {
-    const [files, setFiles] = useState(null);
-    const onSubmit = (event) => {
-      if (isPending) {
-        event.preventDefault();
-        return;
-      }
-      if (!files) {
-        handleSubmit(event);
-        return;
-      }
-      const fileList = createFileList(files);
-      handleSubmit(event, { experimental_attachments: fileList });
-      setFiles(null);
-    };
-    return /* @__PURE__ */ jsx("form", { ref, onSubmit, className, children: children({ files, setFiles }) });
-  }
-);
-ChatForm.displayName = "ChatForm";
-function createFileList(files) {
-  const dataTransfer = new DataTransfer();
-  for (const file of Array.from(files)) {
-    dataTransfer.items.add(file);
-  }
-  return dataTransfer.files;
-}
-
-function Chat({ agentId, initialMessages = [], agentName, threadId, memory, buildUrl }) {
-  const [messages, setMessages] = useState(initialMessages);
-  const [input, setInput] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const { mutate } = useSWRConfig();
-  const { containerRef, handleScroll, handleTouchStart } = useAutoScroll([messages]);
-  useEffect(() => {
-    setMessages(initialMessages);
-  }, [initialMessages]);
-  const handleInputChange = useCallback((e) => {
-    setInput(e.target.value);
-  }, []);
-  const handleSubmit = useCallback(
-    async (event) => {
-      event?.preventDefault?.();
-      if (!input.trim() || isLoading) return;
-      const userMessage = input;
-      setInput("");
-      setIsLoading(true);
-      const newUserMessage = {
-        id: Date.now().toString(),
-        role: "user",
-        content: userMessage
-      };
-      const newAssistantMessage = {
-        id: (Date.now() + 1).toString(),
-        role: "assistant",
-        content: ""
-      };
-      setMessages((prev) => [...prev, newUserMessage, newAssistantMessage]);
-      const newThreadId = threadId ? threadId : crypto.randomUUID();
-      try {
-        const client = new MastraClient({
-          baseUrl: buildUrl || ""
-        });
-        const response = await client.getAgent(agentId).stream({
-          messages: [userMessage],
-          threadId: newThreadId,
-          resourceId: agentId
-        });
-        if (!response.body) return;
-        if (response.status !== 200) {
-          const error = await response.json();
-          setMessages((prev) => [
-            ...prev.slice(0, -1),
-            {
-              ...prev[prev.length - 1],
-              content: error.error,
-              isError: true
-            }
-          ]);
-          return;
-        }
-        await mutate(`${buildUrl}/api/memory/threads?resourceid=${agentId}`);
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = "";
-        let assistantMessage = "";
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) {
-            break;
-          }
-          const chunk = decoder.decode(value);
-          buffer += chunk;
-          if (buffer?.toLocaleLowerCase()?.includes("an error occurred")) {
-            setMessages((prev) => [
-              ...prev.slice(0, -1),
-              {
-                ...prev[prev.length - 1],
-                content: "An error occurred while processing your request.",
-                isError: true
-              }
-            ]);
-            return;
-          }
-          const matches = buffer.matchAll(/0:"([^"]*)"/g);
-          for (const match of matches) {
-            const content = match[1];
-            assistantMessage += content;
-            setMessages((prev) => [...prev.slice(0, -1), { ...prev[prev.length - 1], content: assistantMessage }]);
-          }
-          buffer = "";
-        }
-      } catch (error) {
-        console.error("Error:", error);
-        setMessages((prev) => [
-          ...prev.slice(0, -1),
-          {
-            ...prev[prev.length - 1],
-            content: "An error occurred while processing your request.",
-            isError: true
-          }
-        ]);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [input, isLoading, buildUrl, agentId, threadId, mutate]
-  );
-  const lastMessage = messages.at(-1);
-  const isEmpty = messages.length === 0;
-  const isTyping = isLoading && lastMessage?.role === "assistant" && !lastMessage?.content.trim();
-  const append = useCallback(
-    (message) => {
-      setInput(message.content);
-      handleSubmit();
-    },
-    [handleSubmit]
-  );
-  const suggestions = ["What capabilities do you have?", "How can you help me?", "Tell me about yourself"];
-  return /* @__PURE__ */ jsxs(ChatContainer, { className: "relative flex h-full w-full flex-col overflow-y-clip pb-9", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        onScroll: handleScroll,
-        onTouchStart: handleTouchStart,
-        className: "h-full overflow-y-clip bg-transparent pb-[calc(98px+2rem)]",
-        children: /* @__PURE__ */ jsx(ChatMessages, { messages, children: /* @__PURE__ */ jsx(MessageList, { messages, isTyping }) })
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-8 left-1/2 flex w-full max-w-3xl -translate-x-1/2 flex-col gap-2 bg-[#0f0f0f] pb-3", children: [
-      isEmpty ? /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl", children: /* @__PURE__ */ jsx(
-        PromptSuggestions,
-        {
-          memoryIsPresent: memory,
-          label: `Chat with ${agentName}`,
-          append,
-          suggestions
-        }
-      ) }) : null,
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ChatForm, { isPending: isLoading || isTyping, handleSubmit, children: ({ files, setFiles }) => /* @__PURE__ */ jsx(
-        MessageInput,
-        {
-          value: input,
-          onChange: handleInputChange,
-          files,
-          setFiles,
-          isGenerating: isLoading,
-          placeholder: `Enter your message...`
-        }
-      ) }) }),
-      !memory && /* @__PURE__ */ jsxs("div", { className: "text-mastra-el-5 flex items-center gap-1 text-sm", children: [
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "14",
-            height: "14",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            className: "text-purple-400",
-            children: [
-              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
-              /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-300/60", children: [
-          "Agent will not remember previous messages. To enable memory for agent see",
-          " ",
-          /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: "https://mastra.ai/docs/agents/01-agent-memory",
-              target: "_blank",
-              rel: "noopener",
-              className: "text-gray-300/60 underline hover:text-gray-100",
-              children: "docs."
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
-}
-
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
@@ -4378,7 +3504,7 @@ function MastraRuntimeProvider({
         refreshThreadList?.();
       }
     } catch (error) {
-      console.error("Error occured in MastraRuntimeProvider", error);
+      console.error("Error occurred in MastraRuntimeProvider", error);
       setIsRunning(false);
     }
   };
@@ -4523,7 +3649,7 @@ const Table = React.forwardRef(
 );
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b-[0.5px]", className), ...props })
 );
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(
@@ -4616,7 +3742,7 @@ const useEvalsByAgentId = (agentId, type, baseUrl) => {
 };
 
 const AgentEvalsContext = createContext({ handleRefresh: () => {
-}, isLoading: false });
+}, isLoading: true });
 const scrollableContentClass = cn(
   "relative overflow-y-auto overflow-x-hidden invisible hover:visible focus:visible",
   "[&::-webkit-scrollbar]:w-1",
@@ -4648,6 +3774,13 @@ function AgentEvals({ agentId, baseUrl }) {
     handleRefresh,
     isLoading: activeTab === "live" ? isLiveLoading : isCiLoading
   };
+  function handleRefresh() {
+    if (activeTab === "live") {
+      refetchLiveEvals();
+    } else {
+      refetchCiEvals();
+    }
+  }
   return /* @__PURE__ */ jsx(AgentEvalsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     Tabs,
     {
@@ -4655,7 +3788,7 @@ function AgentEvals({ agentId, baseUrl }) {
       onValueChange: (value) => setActiveTab(value),
       className: "grid grid-rows-[auto_1fr] h-full min-h-0 pb-2",
       children: [
-        /* @__PURE__ */ jsx("div", { className: "bg-mastra-bg-2 border-b border-mastra-border/10", children: /* @__PURE__ */ jsxs(TabsList, { className: "bg-transparent border-0 h-auto mx-4 pt-5", children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-mastra-border/10", children: /* @__PURE__ */ jsxs(TabsList, { className: "bg-transparent border-0 h-auto mx-4", children: [
           /* @__PURE__ */ jsx(TabsTrigger, { value: "live", className: tabIndicatorClass, children: "Live" }),
           /* @__PURE__ */ jsx(TabsTrigger, { value: "ci", className: tabIndicatorClass, children: "CI" })
         ] }) }),
@@ -4664,32 +3797,14 @@ function AgentEvals({ agentId, baseUrl }) {
       ]
     }
   ) });
-  function handleRefresh() {
-    if (activeTab === "live") {
-      refetchLiveEvals();
-    } else {
-      refetchCiEvals();
-    }
-  }
 }
 function EvalTable({ evals, isCIMode = false }) {
   const { handleRefresh, isLoading: isTableLoading } = useContext(AgentEvalsContext);
   const [expandedMetrics, setExpandedMetrics] = useState(/* @__PURE__ */ new Set());
   const [searchTerm, setSearchTerm] = useState("");
   const [sortConfig, setSortConfig] = useState({ field: "metricName", direction: "asc" });
-  const [showLoading, setShowLoading] = useState(false);
-  useEffect(() => {
-    if (isTableLoading) {
-      const timer = setTimeout(() => {
-        setShowLoading(true);
-      }, 200);
-      return () => clearTimeout(timer);
-    } else {
-      setShowLoading(false);
-    }
-  }, [isTableLoading]);
   return /* @__PURE__ */ jsxs("div", { className: "min-h-0 grid grid-rows-[auto_1fr]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 p-4 bg-mastra-bg-2 rounded-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 p-4 rounded-lg", children: [
       /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
         /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-mastra-el-3" }),
         /* @__PURE__ */ jsx(
@@ -4707,11 +3822,11 @@ function EvalTable({ evals, isCIMode = false }) {
         evals.length,
         " Total Evaluations"
       ] }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: handleRefresh, disabled: showLoading, className: "h-9 w-9", children: showLoading ? /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: handleRefresh, disabled: isTableLoading, className: "h-9 w-9", children: isTableLoading ? /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4" }) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs(Table, { className: "w-full", children: [
-      /* @__PURE__ */ jsx(TableHeader, { className: "bg-mastra-bg-2 sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-        /* @__PURE__ */ jsx(TableHead, { className: "w-12" }),
+      /* @__PURE__ */ jsx(TableHeader, { className: "bg-mastra-bg-2 h-[var(--table-header-height)] sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
+        /* @__PURE__ */ jsx(TableHead, { className: "w-12 h-12" }),
         /* @__PURE__ */ jsx(
           TableHead,
           {
@@ -4730,17 +3845,20 @@ function EvalTable({ evals, isCIMode = false }) {
         ] }) }),
         /* @__PURE__ */ jsx(TableHead, { className: "w-48 text-mastra-el-3", children: "Evaluations" })
       ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: showLoading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-        /* @__PURE__ */ jsx(TableCell, { className: "w-12", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-full" }) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "min-w-[200px]", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }) }),
+      /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: isTableLoading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "w-12 h-12", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-full" }) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "min-w-[200px] max-w-[30%]", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }) }),
         /* @__PURE__ */ jsx(TableCell, { className: "flex-1", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }),
         /* @__PURE__ */ jsx(TableCell, { className: "w-48", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "w-48", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }) })
-      ] }, i)) : groupEvals(evals).length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 5, className: "h-32 text-center text-mastra-el-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Search, { className: "h-8 w-8" }),
-        /* @__PURE__ */ jsx("p", { children: "No evaluations found" }),
-        searchTerm && /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Try adjusting your search terms" })
-      ] }) }) }) : groupEvals(evals).map((group) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "w-48", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }) })
+      ] }, i)) : groupEvals(evals).length === 0 ? /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "h-12 w-16" }),
+        /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-32 px-4 text-center text-mastra-el-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Search, { className: "size-5" }),
+          /* @__PURE__ */ jsx("p", { children: "No evaluations found" }),
+          searchTerm && /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Try adjusting your search terms" })
+        ] }) })
+      ] }) : groupEvals(evals).map((group) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
         /* @__PURE__ */ jsxs(
           TableRow,
           {
@@ -4859,20 +3977,103 @@ function EvalTable({ evals, isCIMode = false }) {
         )
       );
     }
-    groups.sort((a, b) => {
-      const direction = sortConfig.direction === "asc" ? 1 : -1;
-      switch (sortConfig.field) {
-        case "metricName":
-          return direction * a.metricName.localeCompare(b.metricName);
-        case "averageScore":
-          return direction * (a.averageScore - b.averageScore);
-        default:
-          return 0;
+    groups.sort((a, b) => {
+      const direction = sortConfig.direction === "asc" ? 1 : -1;
+      switch (sortConfig.field) {
+        case "metricName":
+          return direction * a.metricName.localeCompare(b.metricName);
+        case "averageScore":
+          return direction * (a.averageScore - b.averageScore);
+        default:
+          return 0;
+      }
+    });
+    return groups;
+  }
+}
+
+const useResizeColumn = ({
+  defaultWidth,
+  minimumWidth,
+  maximumWidth,
+  setCurrentWidth
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
+  const containerRef = useRef(null);
+  const dragStartXRef = useRef(0);
+  const initialWidthRef = useRef(0);
+  const handleMouseDown = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+    dragStartXRef.current = e.clientX;
+    initialWidthRef.current = sidebarWidth;
+  };
+  useEffect(() => {
+    setSidebarWidth(defaultWidth);
+    setCurrentWidth?.(defaultWidth);
+  }, [defaultWidth]);
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isDragging || !containerRef.current) return;
+      const containerWidth = containerRef.current.offsetWidth;
+      const deltaX = dragStartXRef.current - e.clientX;
+      const deltaPercentage = deltaX / containerWidth * 100;
+      const newWidth = Math.min(Math.max(initialWidthRef.current + deltaPercentage, minimumWidth), maximumWidth);
+      setSidebarWidth(newWidth);
+      setCurrentWidth?.(newWidth);
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+  return { sidebarWidth, isDragging, handleMouseDown, containerRef };
+};
+
+const MastraResizablePanel = ({
+  children,
+  defaultWidth,
+  minimumWidth,
+  maximumWidth,
+  className,
+  disabled = false,
+  setCurrentWidth,
+  dividerPosition = "left"
+}) => {
+  const { sidebarWidth, isDragging, handleMouseDown, containerRef } = useResizeColumn({
+    defaultWidth: disabled ? 100 : defaultWidth,
+    minimumWidth,
+    maximumWidth,
+    setCurrentWidth
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full h-full relative", className), ref: containerRef, style: { width: `${sidebarWidth}%` }, children: [
+    !disabled && dividerPosition === "left" ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-1 bg-mastra-bg-1 bg-[#121212] h-full cursor-col-resize hover:w-1.5 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
+          ${isDragging ? "bg-mastra-border-2 bg-[#424242] w-1.5 cursor- col-resize" : ""}`,
+        onMouseDown: handleMouseDown
       }
-    });
-    return groups;
-  }
-}
+    ) : null,
+    children,
+    !disabled && dividerPosition === "right" ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-1 bg-mastra-bg-1 bg-[#121212] h-full cursor-col-resize hover:w-1.5 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
+          ${isDragging ? "bg-mastra-border-2 bg-[#424242] w-1.5 cursor- col-resize" : ""}`,
+        onMouseDown: handleMouseDown
+      }
+    ) : null
+  ] });
+};
 
 const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
   /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
@@ -5052,11 +4253,18 @@ const allowedAiSpanAttributes = [
 ];
 
 function Traces({ traces }) {
-  const { setTraces, trace: currentTrace } = useContext(TraceContext);
-  const currentTraceParentSpan = currentTrace?.find((span) => span.parentSpanId === void 0) || currentTrace?.[0];
+  const { trace: currentTrace } = useContext(TraceContext);
+  const [prevTracesId, setPrevTracesId] = useState(/* @__PURE__ */ new Set());
   useEffect(() => {
-    setTraces(traces);
+    if (!prevTracesId.size && traces) {
+      setPrevTracesId(new Set(traces.map((trace) => trace.traceId)));
+    }
   }, [traces]);
+  const isNew = (traceId) => {
+    if (!prevTracesId.size) return false;
+    return !prevTracesId.has(traceId);
+  };
+  const currentTraceParentSpan = currentTrace?.find((span) => span.parentSpanId === void 0) || currentTrace?.[0];
   return /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(Table, { children: [
     /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", style: { outline: "1px solid 0_0%_20.4%" }, children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
       /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
@@ -5070,9 +4278,13 @@ function Traces({ traces }) {
     /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: !traces.length ? /* @__PURE__ */ jsx(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-24 text-center", children: "No traces found" }) }) : traces.map((trace, index) => /* @__PURE__ */ jsxs(
       TableRow,
       {
-        className: cn("border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", {
-          "bg-muted/50": currentTraceParentSpan?.traceId === trace.traceId
-        }),
+        className: cn(
+          "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]",
+          isNew(trace.traceId) ? "animate-fade-in" : "not-new",
+          {
+            "bg-muted/50": currentTraceParentSpan?.traceId === trace.traceId
+          }
+        ),
         children: [
           /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
             TraceButton,
@@ -5461,59 +4673,14 @@ function AttributesValues({ attributes, depth = 0 }) {
   return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: String(processedValue) });
 }
 
-const useResizeColumn = ({
-  defaultWidth,
-  minimumWidth,
-  maximumWidth
-}) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
-  const { isOpen } = useContext(TraceContext);
-  const containerRef = useRef(null);
-  const dragStartXRef = useRef(0);
-  const initialWidthRef = useRef(0);
-  const handleMouseDown = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-    dragStartXRef.current = e.clientX;
-    initialWidthRef.current = sidebarWidth;
-  };
-  useEffect(() => {
-    if (!isOpen) {
-      setSidebarWidth(defaultWidth);
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      if (!isDragging || !containerRef.current) return;
-      const containerWidth = containerRef.current.offsetWidth;
-      const deltaX = dragStartXRef.current - e.clientX;
-      const deltaPercentage = deltaX / containerWidth * 100;
-      const newWidth = Math.min(Math.max(initialWidthRef.current + deltaPercentage, minimumWidth), maximumWidth);
-      setSidebarWidth(newWidth);
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-    };
-    if (isDragging) {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-    }
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging]);
-  return { sidebarWidth, isDragging, handleMouseDown, containerRef };
-};
-
 function usePolling({
   fetchFn,
   interval = 3e3,
   enabled = false,
   onSuccess,
   onError,
-  shouldContinue = () => true
+  shouldContinue = () => true,
+  restartPolling = false
 }) {
   const [isPolling, setIsPolling] = useState(enabled);
   const [error, setError] = useState(null);
@@ -5522,6 +4689,7 @@ function usePolling({
   const [firstCallLoading, setFirstCallLoading] = useState(false);
   const timeoutRef = useRef(null);
   const mountedRef = useRef(true);
+  const [restart, setRestart] = useState(restartPolling);
   const cleanup = useCallback(() => {
     console.log("cleanup");
     if (timeoutRef.current) {
@@ -5540,17 +4708,15 @@ function usePolling({
     setError(null);
   }, []);
   const executePoll = useCallback(
-    async (fistCall = false) => {
+    async (refetch2 = true) => {
       if (!mountedRef.current) return;
       setIsLoading(true);
-      setFirstCallLoading(fistCall);
       try {
         const result = await fetchFn();
         setData(result);
         setError(null);
         onSuccess?.(result);
-        setFirstCallLoading(false);
-        if (shouldContinue(result)) {
+        if (shouldContinue(result) && refetch2) {
           timeoutRef.current = setTimeout(executePoll, interval);
         } else {
           stopPolling();
@@ -5569,6 +4735,18 @@ function usePolling({
     },
     [fetchFn, interval, onSuccess, onError, shouldContinue, stopPolling]
   );
+  const refetch = useCallback(
+    (withPolling = false) => {
+      console.log("refetch", { withPolling });
+      if (withPolling) {
+        setIsPolling(true);
+      } else {
+        executePoll(false);
+      }
+      setError(null);
+    },
+    [executePoll]
+  );
   useEffect(() => {
     mountedRef.current = true;
     if (enabled && isPolling) {
@@ -5580,6 +4758,16 @@ function usePolling({
       cleanup();
     };
   }, [enabled, isPolling, executePoll, cleanup]);
+  useEffect(() => {
+    setRestart(restartPolling);
+  }, [restartPolling]);
+  useEffect(() => {
+    if (restart && !isPolling) {
+      setIsPolling(true);
+      executePoll();
+      setRestart(false);
+    }
+  }, [restart]);
   return {
     isPolling,
     isLoading,
@@ -5587,15 +4775,19 @@ function usePolling({
     data,
     startPolling,
     stopPolling,
-    firstCallLoading
+    firstCallLoading,
+    refetch
   };
 }
 
 const useTraces = (componentName, baseUrl, isWorkflow = false) => {
-  const [traces, setTraces] = useState(null);
-  const client = new MastraClient({
-    baseUrl: baseUrl || ""
-  });
+  const [traces, setTraces] = useState([]);
+  const client = useMemo(
+    () => new MastraClient({
+      baseUrl: baseUrl || ""
+    }),
+    [baseUrl]
+  );
   const fetchFn = useCallback(async () => {
     try {
       const res = await client.getTelemetry({
@@ -5611,7 +4803,7 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
     } catch (error2) {
       throw error2;
     }
-  }, [componentName]);
+  }, [client, componentName, isWorkflow]);
   const onSuccess = useCallback((newTraces) => {
     if (newTraces.length > 0) {
       setTraces(() => newTraces);
@@ -5620,8 +4812,8 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   const onError = useCallback((error2) => {
     toast.error(error2.message);
   }, []);
-  const shouldContinue = useCallback(() => {
-    return true;
+  const shouldContinue = useCallback((result) => {
+    return result.length > 0;
   }, []);
   const { firstCallLoading, error } = usePolling({
     fetchFn,
@@ -5648,11 +4840,6 @@ function AgentTracesInner({
 }) {
   const { traces, error, firstCallLoading } = useTraces(agentName, baseUrl);
   const { isOpen: open } = useContext(TraceContext);
-  const { sidebarWidth, isDragging, handleMouseDown, containerRef } = useResizeColumn({
-    defaultWidth: 60,
-    minimumWidth: 50,
-    maximumWidth: 90
-  });
   if (firstCallLoading) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 relative overflow-hidden h-full", children: [
       /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
@@ -5672,7 +4859,7 @@ function AgentTracesInner({
           /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
         ] }) })
       ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild })
+      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[400px]" })
     ] });
   }
   if (!traces || traces.length === 0) {
@@ -5689,59 +4876,28 @@ function AgentTracesInner({
         ] }) }),
         /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsx(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-24 text-center", children: error?.message || "No traces found" }) }) })
       ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild })
+      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[400px]" })
     ] });
   }
-  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
     /* @__PURE__ */ jsx(Traces, { traces }),
-    /* @__PURE__ */ jsx(
-      SidebarItems$1,
-      {
-        sidebarWidth,
-        className: cn(open ? "grid grid-cols-2 w-[60%]" : ""),
-        isDragging,
-        handleMouseDown,
-        sidebarChild
-      }
-    )
+    /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[400px]") })
   ] });
 }
-function SidebarItems$1({
-  sidebarChild,
-  className,
-  sidebarWidth,
-  isDragging,
-  handleMouseDown
-}) {
+function SidebarItems$1({ sidebarChild, className }) {
   const { openDetail, isOpen: open } = useContext(TraceContext);
-  const {
-    sidebarWidth: rightSidebarWidth,
-    isDragging: innerIsDragging,
-    handleMouseDown: handleInnerMouseDown,
-    containerRef: innerContainerRef
-  } = useResizeColumn({
-    defaultWidth: 50,
-    minimumWidth: 30,
-    maximumWidth: 80
-  });
+  const [rightSidebarWidth, setRightSidebarWidth] = useState(40);
   return /* @__PURE__ */ jsxs(
-    "aside",
+    MastraResizablePanel,
     {
       className: cn(
-        "absolute right-0 top-0 h-full w-[400px] z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
+        "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
         className
       ),
-      style: { width: open ? `${sidebarWidth}%` : void 0 },
-      ref: innerContainerRef,
+      defaultWidth: open ? 60 : 30,
+      minimumWidth: open ? 50 : 30,
+      maximumWidth: open ? 90 : 50,
       children: [
-        open ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `w-1 bg-mastra-bg-1 bg-[#121212] h-full cursor-col-resize hover:w-2 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
-          ${isDragging ? "bg-mastra-border-2 bg-[#424242] w-2 cursor-col-resize" : ""}`,
-            onMouseDown: handleMouseDown
-          }
-        ) : null,
         open && /* @__PURE__ */ jsx(
           "div",
           {
@@ -5750,22 +4906,19 @@ function SidebarItems$1({
             children: /* @__PURE__ */ jsx(TraceDetails, {})
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx(
+          MastraResizablePanel,
           {
-            className: "h-full overflow-y-hidden border-l-[0.5px] absolute right-0 top-0 z-20 bg-mastra-bg-1 bg-[#121212]",
-            style: { width: `${openDetail ? rightSidebarWidth : 100}%` },
-            children: [
-              openDetail ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `w-1 h-full bg-mastra-bg-1 bg-[#121212] cursor-col-resize hover:w-2 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
-            ${innerIsDragging ? "bg-mastra-border-2 bg-[#424242] w-2 cursor-col-resize" : ""}`,
-                  onMouseDown: handleInnerMouseDown
-                }
-              ) : null,
-              /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? sidebarChild : /* @__PURE__ */ jsx(SpanDetail, {}) })
-            ]
+            defaultWidth: 50,
+            minimumWidth: 30,
+            maximumWidth: 80,
+            className: cn("h-full overflow-y-hidden border-l-[0.5px] right-0 top-0 z-20 bg-mastra-bg-1 bg-[#121212]", {
+              absolute: open,
+              "unset-position": !open
+            }),
+            disabled: !open,
+            setCurrentWidth: setRightSidebarWidth,
+            children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? sidebarChild : /* @__PURE__ */ jsx(SpanDetail, {}) })
           }
         )
       ]
@@ -5823,7 +4976,8 @@ const DataTable = ({
   emptyStateHeight,
   getRowId,
   selectedRowId,
-  isLoading
+  isLoading,
+  emptyText
 }) => {
   const [sorting, setSorting] = useState([]);
   const [{ pageIndex, pageSize }, setPagination] = useState({
@@ -5898,7 +5052,10 @@ const DataTable = ({
           },
           cell.id
         ))
-      ] }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: cn("h-24 text-center", emptyStateHeight), children: "No results." }) }) })
+      ] }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsxs(TableCell, { colSpan: columns.length, className: cn("h-24 text-center", emptyStateHeight), children: [
+        "No ",
+        emptyText || "results"
+      ] }) }) })
     ] }) }),
     pagination && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between px-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-sm", children: [
@@ -5928,6 +5085,7 @@ const AgentsTable = ({
   return /* @__PURE__ */ jsx(
     DataTable,
     {
+      emptyText: "Agents",
       title,
       isLoading,
       withoutBorder: true,
@@ -5935,7 +5093,7 @@ const AgentsTable = ({
       icon: /* @__PURE__ */ jsx(AgentIcon, { className: "h-4 w-4" }),
       columns,
       data: agentsList,
-      className: "border-t-0' border-[0.5px] border-x-0"
+      className: "!border-t-0 border-[0.5px] border-x-0"
     }
   );
 };
@@ -5954,11 +5112,6 @@ function WorkflowTracesInner({
 }) {
   const { traces, error, firstCallLoading } = useTraces(workflowName, baseUrl, true);
   const { isOpen: open } = useContext(TraceContext);
-  const { sidebarWidth, isDragging, handleMouseDown, containerRef } = useResizeColumn({
-    defaultWidth: 60,
-    minimumWidth: 50,
-    maximumWidth: 90
-  });
   if (firstCallLoading) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
       /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
@@ -5978,7 +5131,7 @@ function WorkflowTracesInner({
           /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
         ] }) })
       ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild })
+      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[400px]" })
     ] });
   }
   if (!traces || traces.length === 0) {
@@ -5995,59 +5148,28 @@ function WorkflowTracesInner({
         ] }) }),
         /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsx(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-24 text-center", children: error?.message || "No traces found" }) }) })
       ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild })
+      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[400px]" })
     ] });
   }
-  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
     /* @__PURE__ */ jsx(Traces, { traces }),
-    /* @__PURE__ */ jsx(
-      SidebarItems,
-      {
-        sidebarWidth,
-        className: cn(open ? "grid grid-cols-2 w-[60%]" : ""),
-        isDragging,
-        handleMouseDown,
-        sidebarChild
-      }
-    )
+    /* @__PURE__ */ jsx(SidebarItems, { className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[400px]"), sidebarChild })
   ] });
 }
-function SidebarItems({
-  sidebarChild,
-  className,
-  sidebarWidth,
-  isDragging,
-  handleMouseDown
-}) {
+function SidebarItems({ sidebarChild, className }) {
   const { openDetail, isOpen: open } = useContext(TraceContext);
-  const {
-    sidebarWidth: rightSidebarWidth,
-    isDragging: innerIsDragging,
-    handleMouseDown: handleInnerMouseDown,
-    containerRef: innerContainerRef
-  } = useResizeColumn({
-    defaultWidth: 50,
-    minimumWidth: 30,
-    maximumWidth: 80
-  });
+  const [rightSidebarWidth, setRightSidebarWidth] = useState(40);
   return /* @__PURE__ */ jsxs(
-    "aside",
+    MastraResizablePanel,
     {
       className: cn(
-        "absolute right-0 top-0 h-full w-[400px] z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
+        "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
         className
       ),
-      style: { width: open ? `${sidebarWidth}%` : void 0 },
-      ref: innerContainerRef,
+      defaultWidth: open ? 60 : 30,
+      minimumWidth: open ? 50 : 30,
+      maximumWidth: open ? 90 : 50,
       children: [
-        open ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `w-1 bg-mastra-bg-1 bg-[#121212] h-full cursor-col-resize hover:w-2 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
-          ${isDragging ? "bg-mastra-border-2 bg-[#424242] w-2 cursor-col-resize" : ""}`,
-            onMouseDown: handleMouseDown
-          }
-        ) : null,
         open && /* @__PURE__ */ jsx(
           "div",
           {
@@ -6056,22 +5178,19 @@ function SidebarItems({
             children: /* @__PURE__ */ jsx(TraceDetails, {})
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx(
+          MastraResizablePanel,
           {
-            className: "h-full overflow-y-hidden border-l-[0.5px] absolute right-0 top-0 z-20 bg-mastra-bg-1 bg-[#121212]",
-            style: { width: `${openDetail ? rightSidebarWidth : 100}%` },
-            children: [
-              openDetail ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `w-1 h-full bg-mastra-bg-1 bg-[#121212] cursor-col-resize hover:w-2 hover:bg-mastra-border-2 hover:bg-[#424242] active:bg-mastra-border-3 active:bg-[#3e3e3e] transition-colors absolute inset-y-0 -left-1 -right-1 z-10
-            ${innerIsDragging ? "bg-mastra-border-2 bg-[#424242] w-2 cursor-col-resize" : ""}`,
-                  onMouseDown: handleInnerMouseDown
-                }
-              ) : null,
-              /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? sidebarChild : /* @__PURE__ */ jsx(SpanDetail, {}) })
-            ]
+            defaultWidth: 50,
+            minimumWidth: 30,
+            maximumWidth: 80,
+            className: cn("h-full overflow-y-hidden border-l-[0.5px] right-0 top-0 z-20 bg-mastra-bg-1 bg-[#121212]", {
+              absolute: open,
+              "unset-position": !open
+            }),
+            disabled: !open,
+            setCurrentWidth: setRightSidebarWidth,
+            children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? sidebarChild : /* @__PURE__ */ jsx(SpanDetail, {}) })
           }
         )
       ]
@@ -6131,16 +5250,26 @@ const useExecuteWorkflow = (baseUrl) => {
       setIsExecutingWorkflow(false);
     }
   };
-  const createWorkflowRun = async ({ workflowId, input }) => {
+  const createWorkflowRun = async ({ workflowId, prevRunId }) => {
     try {
-      const response = await client.getWorkflow(workflowId).startRun(input || {});
-      return response;
+      const workflow = client.getWorkflow(workflowId);
+      const { runId: newRunId } = await workflow.createRun({ runId: prevRunId });
+      return { runId: newRunId };
     } catch (error) {
       console.error("Error creating workflow run:", error);
       throw error;
     }
   };
-  return { executeWorkflow, createWorkflowRun, isExecutingWorkflow };
+  const startWorkflowRun = async ({ workflowId, runId, input }) => {
+    try {
+      const workflow = client.getWorkflow(workflowId);
+      await workflow.start({ runId, triggerData: input || {} });
+    } catch (error) {
+      console.error("Error starting workflow run:", error);
+      throw error;
+    }
+  };
+  return { executeWorkflow, startWorkflowRun, createWorkflowRun, isExecutingWorkflow };
 };
 const useWatchWorkflow = (baseUrl) => {
   const [isWatchingWorkflow, setIsWatchingWorkflow] = useState(false);
@@ -6151,13 +5280,10 @@ const useWatchWorkflow = (baseUrl) => {
       const client = new MastraClient({
         baseUrl
       });
-      const watchSubscription = client.getWorkflow(workflowId).watch({ runId });
-      if (!watchSubscription) {
-        throw new Error("Error watching workflow");
-      }
-      for await (const record of watchSubscription) {
+      const workflow = client.getWorkflow(workflowId);
+      workflow.watch({ runId }, (record) => {
         setWatchResult(record);
-      }
+      });
     } catch (error) {
       console.error("Error watching workflow:", error);
       throw error;
@@ -6230,6 +5356,9 @@ function extractConditions(group, type) {
           recurse({ ...subGroup }, "or");
         }
       }
+      if ("not" in group2) {
+        recurse({ ...group2.not }, "not");
+      }
     }
   }
   recurse(group);
@@ -6279,19 +5408,21 @@ const contructNodesAndEdges = ({
   }
   let nodes = [];
   let edges = [];
+  let allSteps = [];
   for (const [_index, _step] of initial.entries()) {
     const step = _step.step;
     const stepId = step.id;
     const steps = [_step, ...stepsList?.[stepId] || []]?.reduce((acc, step2, i) => {
-      const newStep = {
+      let newStep = {
         ...step2.step,
         label: step2.step.id,
+        originalId: step2.step.id,
         type: "default-node",
         id: nodes.some((node) => node.id === step2.step.id) ? `${step2.step.id}-${i}` : step2.step.id
       };
       let conditionType = "when";
       if (step2.config?.serializedWhen) {
-        conditionType = step2.step.id === "__start_if" ? "if" : step2.step.id === "__start_else" ? "else" : "when";
+        conditionType = step2.step.id?.endsWith("_if") ? "if" : step2.step.id?.endsWith("_else") ? "else" : "when";
         const conditions = extractConditions(step2.config.serializedWhen, conditionType);
         const conditionStep = {
           id: crypto.randomUUID(),
@@ -6301,11 +5432,20 @@ const contructNodesAndEdges = ({
         };
         acc.push(conditionStep);
       }
-      if (conditionType === "when") {
-        acc.push(newStep);
+      if (conditionType === "if" || conditionType === "else") {
+        newStep = {
+          ...newStep,
+          label: conditionType === "if" ? "start if" : "start else"
+        };
       }
+      newStep = {
+        ...newStep,
+        label: step2.config?.loopLabel || newStep.label
+      };
+      acc.push(newStep);
       return acc;
     }, []);
+    allSteps = [...allSteps, ...steps];
     const newNodes = [...steps].map((step2, index) => {
       const subscriberGraph = stepSubscriberGraph?.[step2.id];
       return {
@@ -6338,21 +5478,26 @@ const contructNodesAndEdges = ({
   }
   for (const [connectingStepId, stepInfoGraph] of Object.entries(stepSubscriberGraph)) {
     const { initial: initial2, ...stepsList2 } = stepInfoGraph;
+    let untilOrWhileConditionId;
+    const loopResultSteps = [];
+    let finishedLoopStep;
+    let otherLoopStep;
     if (initial2.length) {
       for (const [_index, _step] of initial2.entries()) {
         const step = _step.step;
         const stepId = step.id;
-        const originalSteps = [_step, ...stepsList2?.[stepId] || []]?.map((step2) => step2.step);
         const steps = [_step, ...stepsList2?.[stepId] || []]?.reduce((acc, step2, i) => {
-          const newStep = {
+          let newStep = {
             ...step2.step,
+            originalId: step2.step.id,
             label: step2.step.id,
             type: "default-node",
             id: nodes.some((node) => node.id === step2.step.id) ? `${step2.step.id}-${i}` : step2.step.id
           };
           let conditionType = "when";
-          if (step2.config?.serializedWhen) {
-            conditionType = step2.step.id === "__start_if" ? "if" : step2.step.id === "__start_else" ? "else" : "when";
+          const isFinishedLoop = step2.config?.loopLabel?.endsWith("loop finished");
+          if (step2.config?.serializedWhen && !isFinishedLoop) {
+            conditionType = step2.step.id?.endsWith("_if") ? "if" : step2.step.id?.endsWith("_else") ? "else" : step2.config?.loopType ?? "when";
             const conditions = extractConditions(step2.config.serializedWhen, conditionType);
             const conditionStep = {
               id: crypto.randomUUID(),
@@ -6360,15 +5505,67 @@ const contructNodesAndEdges = ({
               type: "condition-node",
               isLarge: (conditions?.length > 1 || conditions.some(({ fnString }) => !!fnString)) && conditionType !== "else"
             };
+            if (conditionType === "until" || conditionType === "while") {
+              untilOrWhileConditionId = conditionStep.id;
+            }
             acc.push(conditionStep);
           }
-          if (conditionType === "when") {
-            acc.push(newStep);
+          if (isFinishedLoop) {
+            const loopResultStep = {
+              id: crypto.randomUUID(),
+              type: "loop-result-node",
+              loopType: "finished",
+              loopResult: step2.config.loopType === "until" ? true : false
+            };
+            loopResultSteps.push(loopResultStep);
+            acc.push(loopResultStep);
+          }
+          if (!isFinishedLoop && step2.config?.loopType) {
+            const loopResultStep = {
+              id: crypto.randomUUID(),
+              type: "loop-result-node",
+              loopType: step2.config.loopType,
+              loopResult: step2.config.loopType === "until" ? false : true
+            };
+            loopResultSteps.push(loopResultStep);
+            acc.push(loopResultStep);
+          }
+          if (conditionType === "if" || conditionType === "else") {
+            newStep = {
+              ...newStep,
+              label: conditionType === "if" ? "start if" : "start else"
+            };
           }
+          if (step2.config.loopType) {
+            if (isFinishedLoop) {
+              finishedLoopStep = newStep;
+            } else {
+              otherLoopStep = newStep;
+            }
+          }
+          newStep = {
+            ...newStep,
+            loopType: isFinishedLoop ? "finished" : step2.config.loopType,
+            label: step2.config?.loopLabel || newStep.label
+          };
+          acc.push(newStep);
           return acc;
         }, []);
-        const newNodes = [...steps].map((step2, index) => {
+        let afterStep = [];
+        let afterStepStepList = connectingStepId?.includes("&&") ? connectingStepId.split("&&") : [];
+        if (connectingStepId?.includes("&&")) {
+          afterStep = [
+            {
+              id: connectingStepId,
+              label: connectingStepId,
+              type: "after-node",
+              steps: afterStepStepList
+            }
+          ];
+        }
+        const newNodes = [...steps, ...afterStep].map((step2, index) => {
           const subscriberGraph = stepSubscriberGraph?.[step2.id];
+          const withBottomHandle = step2.originalId === connectingStepId || subscriberGraph;
           return {
             id: step2.id,
             position: { x: _index * 300 + 300, y: index * 100 + 100 },
@@ -6377,19 +5574,37 @@ const contructNodesAndEdges = ({
               conditions: step2.conditions,
               label: step2.label,
               description: step2.description,
-              withoutBottomHandle: originalSteps.some(({ id }) => id === step2.label && id !== step2.id) || subscriberGraph ? false : index === steps.length - 1,
+              result: step2.loopResult,
+              loopType: step2.loopType,
+              steps: step2.steps,
+              withoutBottomHandle: withBottomHandle ? false : index === steps.length - 1,
               isLarge: step2.isLarge
             }
           };
         });
-        nodes = [...nodes, ...newNodes];
+        nodes = [...nodes, ...newNodes].map((node) => ({
+          ...node,
+          data: {
+            ...node.data,
+            withoutBottomHandle: afterStepStepList.includes(node.id) ? false : node.data.withoutBottomHandle
+          }
+        }));
         const edgeSteps = [...steps].slice(0, -1);
+        const afterEdges = afterStepStepList.map((step2) => ({
+          id: `e${step2}-${connectingStepId}`,
+          source: step2,
+          target: connectingStepId,
+          ...defaultEdgeOptions
+        }));
+        const finishedLoopResult = loopResultSteps?.find((step2) => step2.loopType === "finished");
         const newEdges = edgeSteps.map((step2, index) => ({
           id: `e${step2.id}-${steps[index + 1].id}`,
           source: step2.id,
           target: steps[index + 1].id,
+          remove: finishedLoopResult?.id === steps[index + 1].id,
+          //remove if target is a finished loop result
           ...defaultEdgeOptions
-        }));
+        }))?.filter((edge) => !edge.remove);
         const firstEdgeStep = steps[0];
         const lastEdgeStep = steps[steps.length - 1];
         const connectingEdge = connectingStepId === firstEdgeStep.id ? [] : [
@@ -6397,10 +5612,11 @@ const contructNodesAndEdges = ({
             id: `e${connectingStepId}-${firstEdgeStep.id}`,
             source: connectingStepId,
             target: firstEdgeStep.id,
+            remove: finishedLoopResult?.id === firstEdgeStep.id,
             ...defaultEdgeOptions
           }
-        ];
-        const lastEdge = originalSteps.some(({ id }) => id === lastEdgeStep.label && id !== lastEdgeStep.id) ? [
+        ]?.filter((edge) => !edge.remove);
+        const lastEdge = lastEdgeStep.originalId === connectingStepId ? [
           {
             id: `e${lastEdgeStep.id}-${connectingStepId}`,
             source: lastEdgeStep.id,
@@ -6408,7 +5624,31 @@ const contructNodesAndEdges = ({
             ...defaultEdgeOptions
           }
         ] : [];
-        edges = [...edges, ...connectingEdge, ...newEdges, ...lastEdge];
+        edges = [...edges, ...afterEdges, ...connectingEdge, ...newEdges, ...lastEdge];
+        allSteps = [...allSteps, ...steps];
+      }
+      if (untilOrWhileConditionId && loopResultSteps.length && finishedLoopStep && otherLoopStep) {
+        const loopResultStepsEdges = loopResultSteps.map((step) => ({
+          id: `e${untilOrWhileConditionId}-${step.id}`,
+          source: untilOrWhileConditionId,
+          target: step.id,
+          ...defaultEdgeOptions
+        }));
+        const finishedLoopResult = loopResultSteps?.find((res) => res.loopType === "finished");
+        const otherLoopResult = loopResultSteps?.find((res) => res.loopType !== "finished");
+        const otherLoopEdge = {
+          id: `e${otherLoopResult?.id}-${otherLoopStep?.id}`,
+          source: otherLoopResult?.id,
+          target: otherLoopStep.id,
+          ...defaultEdgeOptions
+        };
+        const finishedLoopEdge = {
+          id: `e${finishedLoopResult?.id}-${finishedLoopStep?.id}`,
+          source: finishedLoopResult?.id,
+          target: finishedLoopStep.id,
+          ...defaultEdgeOptions
+        };
+        edges = [...edges, ...loopResultStepsEdges, otherLoopEdge, finishedLoopEdge];
       }
     }
   }
@@ -6476,7 +5716,7 @@ function WorkflowConditionNode({ data }) {
               size: "xs",
               weight: "medium",
               className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px] w-fit",
-              children: type.toUpperCase()
+              children: type?.toUpperCase()
             }
           ),
           isCollapsible && /* @__PURE__ */ jsx(
@@ -6537,14 +5777,72 @@ function WorkflowDefaultNode({ data }) {
   ] });
 }
 
+function WorkflowAfterNode({ data }) {
+  const { steps } = data;
+  const [open, setOpen] = useState(true);
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open,
+      onOpenChange: setOpen,
+      className: cn("bg-mastra-bg-3 rounded-md w-[274px] flex flex-col p-2 gap-2"),
+      children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
+        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              weight: "medium",
+              className: "text-mastra-el-3 bg-mastra-bg-11 my-auto block rounded-[0.125rem] px-2 py-1 text-[10px] w-fit",
+              children: "AFTER"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn("w-4 h-4 transition-transform", {
+                "transform rotate-180": open
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: "flex flex-col gap-2", children: steps.map((step) => /* @__PURE__ */ jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-[6px] rounded-sm  p-2", children: [
+          /* @__PURE__ */ jsx(Footprints, { className: "text-current w-4 h-4" }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: step })
+        ] }, step)) }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
+      ]
+    }
+  );
+}
+
+function WorkflowLoopResultNode({ data }) {
+  const { result } = data;
+  return /* @__PURE__ */ jsxs("div", { className: cn("bg-mastra-bg-8 rounded-md w-[274px]"), children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: { visibility: "hidden" } }),
+    /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxs("div", { className: "text-sm bg-mastra-bg-9 flex items-center gap-[6px] rounded-sm  p-2", children: [
+      result ? /* @__PURE__ */ jsx(CircleCheck, { className: "text-current w-4 h-4" }) : /* @__PURE__ */ jsx(CircleX, { className: "text-current w-4 h-4" }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", weight: "medium", className: "text-mastra-el-6 capitalize", children: String(result) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: { visibility: "hidden" } })
+  ] });
+}
+
 function WorkflowGraphInner({ workflow }) {
-  const { nodes: initialNodes, edges: initialEdges } = contructNodesAndEdges(workflow);
+  const { nodes: initialNodes, edges: initialEdges } = contructNodesAndEdges({
+    stepGraph: workflow.serializedStepGraph,
+    stepSubscriberGraph: workflow.serializedStepSubscriberGraph
+  });
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
   const nodeTypes = {
     "default-node": WorkflowDefaultNode,
-    "condition-node": WorkflowConditionNode
+    "condition-node": WorkflowConditionNode,
+    "after-node": WorkflowAfterNode,
+    "loop-result-node": WorkflowLoopResultNode
   };
+  console.log("nodes===>", nodes);
   return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxs(
     ReactFlow,
     {
@@ -6623,6 +5921,7 @@ const WorkflowsTable = ({
   return /* @__PURE__ */ jsx(
     DataTable,
     {
+      emptyText: "Workflows",
       title,
       withoutBorder: true,
       withoutRadius: true,
@@ -7885,15 +7184,15 @@ function CodeBlockDemo({
   filename,
   className
 }) {
-  return /* @__PURE__ */ jsxs(CodeBlock$1, { code, language, theme: themes.oneDark, children: [
+  return /* @__PURE__ */ jsxs(CodeBlock, { code, language, theme: themes.oneDark, children: [
     filename ? /* @__PURE__ */ jsx("div", { className: "absolute w-full px-6 py-2 pl-4 text-sm rounded bg-mastra-bg-2 text-mastra-el-6/50", children: filename }) : null,
     /* @__PURE__ */ jsx(
-      CodeBlock$1.Code,
+      CodeBlock.Code,
       {
         className: cn("bg-transparent h-full p-6 rounded-xl whitespace-pre-wrap", filename ? "pt-10" : "", className),
         children: /* @__PURE__ */ jsx("div", { className: "table-row", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx(CodeBlock$1.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
-          /* @__PURE__ */ jsx(CodeBlock$1.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock$1.Token, { className: "font-mono text-sm mastra-token" }) })
+          /* @__PURE__ */ jsx(CodeBlock.LineNumber, { className: "table-cell pr-4 text-sm text-right select-none text-gray-500/50" }),
+          /* @__PURE__ */ jsx(CodeBlock.LineContent, { className: "flex", children: /* @__PURE__ */ jsx(CodeBlock.Token, { className: "font-mono text-sm mastra-token" }) })
         ] }) })
       }
     )
@@ -7972,36 +7271,49 @@ function WorkflowTrigger({
 }) {
   const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
   const { isLoading, workflow } = useWorkflow(workflowId, baseUrl);
-  const { createWorkflowRun } = useExecuteWorkflow(baseUrl);
+  const { createWorkflowRun, startWorkflowRun } = useExecuteWorkflow(baseUrl);
   const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow(baseUrl);
   const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow(baseUrl);
   const [suspendedSteps, setSuspendedSteps] = useState([]);
+  const [isRunning, setIsRunning] = useState(false);
   const triggerSchema = workflow?.triggerSchema;
   const handleExecuteWorkflow = async (data) => {
-    if (!workflow) return;
-    setResult(null);
-    const { runId } = await createWorkflowRun({ workflowId, input: data });
-    setRunId?.(runId);
-    watchWorkflow({ workflowId, runId });
+    try {
+      if (!workflow) return;
+      setIsRunning(true);
+      setResult(null);
+      const { runId } = await createWorkflowRun({ workflowId });
+      setRunId?.(runId);
+      watchWorkflow({ workflowId, runId });
+      startWorkflowRun({ workflowId, runId, input: data });
+    } catch (err) {
+      setIsRunning(false);
+      toast.error("Error executing workflow");
+    }
   };
   const handleResumeWorkflow = async (step) => {
     if (!workflow) return;
-    const { stepId, runId, context } = step;
-    resumeWorkflow({
+    const { stepId, runId: prevRunId, context } = step;
+    const { runId } = await createWorkflowRun({ workflowId, prevRunId });
+    watchWorkflow({ workflowId, runId });
+    await resumeWorkflow({
       stepId,
       runId,
       context,
       workflowId
     });
-    watchWorkflow({ workflowId, runId });
   };
   const watchResultToUse = result ?? watchResult;
   const workflowActivePaths = watchResultToUse?.activePaths ?? [];
+  useEffect(() => {
+    setIsRunning(isWatchingWorkflow);
+  }, [isWatchingWorkflow]);
   useEffect(() => {
     if (!watchResultToUse?.activePaths || !result?.runId) return;
     const suspended = watchResultToUse.activePaths.filter((path) => watchResultToUse.context?.steps?.[path.stepId]?.status === "suspended").map((path) => ({
       stepId: path.stepId,
-      runId: result.runId
+      runId: result.runId,
+      suspendPayload: watchResultToUse.context?.steps?.[path.stepId]?.suspendPayload
     }));
     setSuspendedSteps(suspended);
   }, [watchResultToUse, result]);
@@ -8018,14 +7330,14 @@ function WorkflowTrigger({
   }
   if (!workflow) return null;
   if (!triggerSchema) {
-    return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-[400px]", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "space-y-4 px-4", children: /* @__PURE__ */ jsx(Button, { className: "w-full", disabled: isWatchingWorkflow, onClick: () => handleExecuteWorkflow(null), children: isWatchingWorkflow ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Trigger" }) }),
+    return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-4 space-y-4", children: /* @__PURE__ */ jsx(Button, { className: "w-full", disabled: isRunning, onClick: () => handleExecuteWorkflow(null), children: isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : "Trigger" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3  px-4", size: "xs", children: "Output" }),
+        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Output" }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
           CopyButton,
           {
-            classname: "absolute z-40 top-4 right-4 w-8 h-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150 ease-in-out",
+            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(result ?? {}, null, 2)
           }
         ) }),
@@ -8041,30 +7353,13 @@ function WorkflowTrigger({
     ] }) });
   }
   const zodInputSchema = resolveSerializedZodOutput(jsonSchemaToZod(parse(triggerSchema)));
-  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-[400px]", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      suspendedSteps.length > 0 ? suspendedSteps?.map((step) => /* @__PURE__ */ jsxs("div", { className: "px-4", children: [
-        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
-        /* @__PURE__ */ jsx(
-          DynamicForm,
-          {
-            schema: z$1.record(z$1.string(), z$1.any()),
-            isSubmitLoading: isResumingWorkflow,
-            submitButtonLabel: "Resume",
-            onSubmit: (data) => {
-              handleResumeWorkflow({
-                stepId: step.stepId,
-                runId: step.runId,
-                context: data
-              });
-            }
-          }
-        )
-      ] })) : /* @__PURE__ */ jsx(Fragment, {}),
+  const isSuspendedSteps = suspendedSteps.length > 0;
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    !isSuspendedSteps && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
-        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3 px-4", size: "xs", children: "Input" }),
+        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Input" }),
         isResumingWorkflow ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(Loader2, { className: "animate-spin w-3 h-3 text-mastra-el-accent" }),
+          /* @__PURE__ */ jsx(Loader2, { className: "w-3 h-3 animate-spin text-mastra-el-accent" }),
           " Resuming workflow"
         ] }) : /* @__PURE__ */ jsx(Fragment, {})
       ] }),
@@ -8081,12 +7376,12 @@ function WorkflowTrigger({
         }
       )
     ] }),
-    workflowActivePaths.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3  px-4", size: "xs", children: "Status" }),
+    workflowActivePaths.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Status" }),
       /* @__PURE__ */ jsx("div", { className: "px-4", children: workflowActivePaths?.map((activePath, idx) => {
-        return /* @__PURE__ */ jsx("div", { className: "flex flex-col mt-2 border  overflow-hidden", children: activePath?.stepPath?.map((sp, idx2) => {
+        return /* @__PURE__ */ jsx("div", { className: "flex flex-col mt-2 overflow-hidden border", children: activePath?.stepPath?.map((sp, idx2) => {
           const status = activePath?.status === "completed" ? "Completed" : sp === activePath?.stepId ? activePath?.status.charAt(0).toUpperCase() + activePath?.status.slice(1) : "Completed";
-          const statusIcon = status === "Completed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-yellow-500 animate-pulse rounded-full" });
+          const statusIcon = status === "Completed" ? /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-yellow-500 rounded-full animate-pulse" });
           return /* @__PURE__ */ jsxs(
             "div",
             {
@@ -8108,12 +7403,39 @@ function WorkflowTrigger({
         }) }, idx);
       }) })
     ] }),
-    result && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3  px-4", size: "xs", children: "Output" }),
+    isSuspendedSteps && suspendedSteps?.map((step) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
+      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
+      step.suspendPayload && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        CodeBlockDemo,
+        {
+          className: "w-[300px] overflow-x-auto",
+          code: JSON.stringify(step.suspendPayload, null, 2),
+          language: "json"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        DynamicForm,
+        {
+          schema: z$1.record(z$1.string(), z$1.any()),
+          isSubmitLoading: isResumingWorkflow,
+          submitButtonLabel: "Resume",
+          onSubmit: (data) => {
+            handleResumeWorkflow({
+              stepId: step.stepId,
+              runId: step.runId,
+              suspendPayload: step.suspendPayload,
+              context: data
+            });
+          }
+        }
+      )
+    ] })),
+    result && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Output" }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
         CopyButton,
         {
-          classname: "absolute z-40 top-4 right-4 w-8 h-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity duration-150 ease-in-out",
+          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(result, null, 2)
         }
       ) }),
@@ -8129,5 +7451,5 @@ function WorkflowTrigger({
   ] }) });
 }
 
-export { AgentChat, AgentEvals, AgentTraces, AgentsTable, Chat, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
+export { AgentChat, AgentEvals, AgentTraces, AgentsTable, MastraResizablePanel, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
 //# sourceMappingURL=index.es.js.map