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

package/dist/domains/resizable-panel.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from '../../node_modules/@types/react';
+
+export declare const MastraResizablePanel: ({ children, defaultWidth, minimumWidth, maximumWidth, className, disabled, setCurrentWidth, dividerPosition, }: {
+    children: ReactNode;
+    defaultWidth: number;
+    minimumWidth: number;
+    maximumWidth: number;
+    className?: string;
+    disabled?: boolean;
+    setCurrentWidth?: (width: number) => void;
+    dividerPosition?: "left" | "right";
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/hooks/use-resize-column.d.ts

@@ -1,9 +1,10 @@
 import { MouseEvent as ReactMouseEvent } from '../../node_modules/@types/react';
 
-export declare const useResizeColumn: ({ defaultWidth, minimumWidth, maximumWidth, }: {
+export declare const useResizeColumn: ({ defaultWidth, minimumWidth, maximumWidth, setCurrentWidth, }: {
     defaultWidth: number;
     minimumWidth: number;
     maximumWidth: number;
+    setCurrentWidth?: (width: number) => void;
 }) => {
     sidebarWidth: number;
     isDragging: boolean;

package/dist/index.css

@@ -9,3 +9,7 @@
 [hidden]:where(:not([hidden=until-found])) {
   display: none !important;
 }
+
+.unset-position {
+  position: unset;
+}

package/dist/index.d.ts

@@ -2,3 +2,4 @@
 export * from './chat-ui/chat';
 export * from './domains/agents/index';
 export * from './domains/workflows/index';
+export * from './domains/resizable-panel';

package/dist/index.es.js

@@ -4616,7 +4616,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 +4648,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 +4662,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 +4671,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 +4696,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 +4719,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,
           {
@@ -5461,52 +5453,6 @@ 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,
@@ -5634,6 +5580,89 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   return { traces, firstCallLoading, error };
 };
 
+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
+      }
+    ) : 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
+  ] });
+};
+
 function AgentTraces({
   agentName,
   baseUrl,
@@ -5648,11 +5677,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 +5696,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 +5713,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 +5743,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, {}) })
           }
         )
       ]
@@ -5954,11 +5944,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 +5963,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 +5980,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 +6010,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, {}) })
           }
         )
       ]
@@ -7976,13 +7927,20 @@ function WorkflowTrigger({
   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, input: data });
+      setRunId?.(runId);
+      watchWorkflow({ workflowId, runId });
+    } catch (err) {
+      setIsRunning(false);
+      toast.error("Error executing workflow");
+    }
   };
   const handleResumeWorkflow = async (step) => {
     if (!workflow) return;
@@ -7997,6 +7955,9 @@ function WorkflowTrigger({
   };
   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) => ({
@@ -8018,8 +7979,8 @@ 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: "space-y-4 px-4", children: /* @__PURE__ */ jsx(Button, { className: "w-full", disabled: isRunning, onClick: () => handleExecuteWorkflow(null), children: isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-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("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
@@ -8041,7 +8002,7 @@ 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: [
+  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__ */ 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 }),
@@ -8073,7 +8034,7 @@ function WorkflowTrigger({
         {
           schema: zodInputSchema,
           defaultValues: payload,
-          isSubmitLoading: isWatchingWorkflow,
+          isSubmitLoading: isRunning,
           onSubmit: (data) => {
             setPayload(data);
             handleExecuteWorkflow(data);
@@ -8129,5 +8090,5 @@ function WorkflowTrigger({
   ] }) });
 }
 
-export { AgentChat, AgentEvals, AgentTraces, AgentsTable, Chat, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
+export { AgentChat, AgentEvals, AgentTraces, AgentsTable, Chat, MastraResizablePanel, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
 //# sourceMappingURL=index.es.js.map