@mastra/playground-ui 4.0.4-alpha.4 → 4.0.4-alpha.6

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Check, LoaderCircle, ExternalLinkIcon, X, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, PlusIcon, TrashIcon, Plus, Loader2 } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronDown, XIcon, Check, LoaderCircle, ExternalLinkIcon, X, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, PlusIcon, TrashIcon, Plus, Loader2 } from 'lucide-react';
 import * as React from 'react';
-import React__default, { forwardRef, memo, useState, useRef, useEffect, createContext, useContext, useMemo, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, memo, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -16,7 +16,6 @@ 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';
 import { githubDarkInit } from '@uiw/codemirror-theme-github';
@@ -30,6 +29,7 @@ import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
 import z$1, { z } from 'zod';
@@ -4275,126 +4275,6 @@ function EvalTable({ evals, isCIMode = false }) {
   }
 }
 
-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
-  ] });
-};
-
-const ScrollArea = React.forwardRef(
-  ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
-    const areaRef = React.useRef(null);
-    useAutoscroll(areaRef, { enabled: autoScroll });
-    return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
-      /* @__PURE__ */ jsx(
-        ScrollAreaPrimitive.Viewport,
-        {
-          ref: areaRef,
-          className: cn("h-full w-full rounded-[inherit] [&>div]:!block", viewPortClassName),
-          style: maxHeight ? { maxHeight } : void 0,
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx(ScrollBar, {}),
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-    ] });
-  }
-);
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
-  }
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
 const TraceContext = createContext({});
 function TraceProvider({ children }) {
   const [open, setOpen] = useState(false);
@@ -4454,6 +4334,113 @@ function TraceProvider({ children }) {
   );
 }
 
+function usePolling({
+  fetchFn,
+  interval = 3e3,
+  enabled = false,
+  onSuccess,
+  onError,
+  shouldContinue = () => true,
+  restartPolling = false
+}) {
+  const [isPolling, setIsPolling] = useState(enabled);
+  const [error, setError] = useState(null);
+  const [data, setData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  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) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  const stopPolling = useCallback(() => {
+    console.log("stopPolling");
+    setIsPolling(false);
+    cleanup();
+  }, [cleanup]);
+  const startPolling = useCallback(() => {
+    console.log("startPolling");
+    setIsPolling(true);
+    setError(null);
+  }, []);
+  const executePoll = useCallback(
+    async (refetch2 = true) => {
+      if (!mountedRef.current) return;
+      setIsLoading(true);
+      try {
+        const result = await fetchFn();
+        setData(result);
+        setError(null);
+        onSuccess?.(result);
+        if (shouldContinue(result) && refetch2) {
+          timeoutRef.current = setTimeout(executePoll, interval);
+        } else {
+          stopPolling();
+        }
+      } catch (err) {
+        if (!mountedRef.current) return;
+        setError(err);
+        onError?.(err);
+        stopPolling();
+      } finally {
+        if (mountedRef.current) {
+          setFirstCallLoading(false);
+          setIsLoading(false);
+        }
+      }
+    },
+    [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) {
+      executePoll(true);
+    }
+    return () => {
+      console.log("cleanup poll");
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, [enabled, isPolling, executePoll, cleanup]);
+  useEffect(() => {
+    setRestart(restartPolling);
+  }, [restartPolling]);
+  useEffect(() => {
+    if (restart && !isPolling) {
+      setIsPolling(true);
+      executePoll();
+      setRestart(false);
+    }
+  }, [restart]);
+  return {
+    isPolling,
+    isLoading,
+    error,
+    data,
+    startPolling,
+    stopPolling,
+    firstCallLoading,
+    refetch
+  };
+}
+
 function formatDuration(duration, fixedPoint = 2) {
   const durationInSecs = duration / 1e3;
   return durationInSecs.toFixed(fixedPoint);
@@ -4549,68 +4536,187 @@ const allowedAiSpanAttributes = [
   "ai.usage.completionTokens"
 ];
 
-function Traces({ traces }) {
-  const { trace: currentTrace } = useContext(TraceContext);
-  const [prevTracesId, setPrevTracesId] = useState(/* @__PURE__ */ new Set());
-  useEffect(() => {
-    if (!prevTracesId.size && traces) {
-      setPrevTracesId(new Set(traces.map((trace) => trace.traceId)));
+const useTraces = (componentName, baseUrl, isWorkflow = false) => {
+  const [traces, setTraces] = useState([]);
+  const { setTraces: setTraceContextTraces } = useContext(TraceContext);
+  const client = useMemo(
+    () => new MastraClient({
+      baseUrl: baseUrl || ""
+    }),
+    [baseUrl]
+  );
+  const fetchFn = useCallback(async () => {
+    try {
+      const res = await client.getTelemetry({
+        attribute: {
+          componentName
+        }
+      });
+      if (!res.traces) {
+        throw new Error("Error fetching traces");
+      }
+      const refinedTraces = refineTraces(res?.traces || [], isWorkflow);
+      return refinedTraces;
+    } catch (error2) {
+      throw error2;
     }
-  }, [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%_-_325px)]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(Table$1, { 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" }),
-      /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-        /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-        " Trace Id"
-      ] }),
-      /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-      /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-    ] }) }),
-    /* @__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]",
-          isNew(trace.traceId) ? "animate-fade-in" : "not-new",
-          {
-            "bg-muted/50": currentTraceParentSpan?.traceId === trace.traceId
-          }
-        ),
-        children: [
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
-            TraceButton,
-            {
-              trace: trace.trace,
-              name: trace.serviceName,
-              traceIndex: index,
-              status: trace.status
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TableCell, { className: "text-mastra-el-5", children: trace.traceId }),
-          /* @__PURE__ */ jsx(TableCell, { className: "text-mastra-el-5 text-sm", children: formatOtelTimestamp(trace.started) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-[#F1CA5E]", children: [
-            /* @__PURE__ */ jsx(Clock1, { className: "h-3 w-3" }),
-            formatDuration(trace.duration, 3),
-            "ms"
-          ] }) })
-        ]
-      },
-      trace.traceId
-    )) })
-  ] }) }) });
-}
-function TraceButton({
-  trace,
-  name,
-  traceIndex,
-  status
-}) {
+  }, [client, componentName, isWorkflow]);
+  const onSuccess = useCallback(
+    (newTraces) => {
+      if (newTraces.length > 0) {
+        setTraces(() => newTraces);
+        setTraceContextTraces(() => newTraces);
+      }
+    },
+    [setTraceContextTraces]
+  );
+  const onError = useCallback((error2) => {
+    toast.error(error2.message);
+  }, []);
+  const shouldContinue = useCallback(() => {
+    return true;
+  }, []);
+  const { firstCallLoading, error } = usePolling({
+    fetchFn,
+    interval: 3e3,
+    onSuccess,
+    onError,
+    shouldContinue,
+    enabled: true
+  });
+  return { traces, firstCallLoading, error };
+};
+
+const rowSize = {
+  default: "[&>tbody>tr]:h-table-row",
+  small: "[&>tbody>tr]:h-table-row-small"
+};
+const Table = ({ className, children, size = "default" }) => {
+  return /* @__PURE__ */ jsx("table", { className: clsx("w-full", rowSize[size], className), children });
+};
+const Thead = ({ className, children }) => {
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: clsx("h-table-header border-b-sm border-border1", className), children }) });
+};
+const Th = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: clsx("text-icon3 text-ui-sm h-full text-left font-normal uppercase first:pl-5 last:pr-5", className),
+      ...props,
+      children
+    }
+  );
+};
+const Tbody = ({ className, children }) => {
+  return /* @__PURE__ */ jsx("tbody", { className: clsx("", className), children });
+};
+const Row = ({ className, children, selected = false }) => {
+  return /* @__PURE__ */ jsx("tr", { className: clsx("border-b-sm border-border1 hover:bg-surface3", selected && "bg-surface4", className), children });
+};
+
+const sizes = {
+  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
+  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
+};
+const Icon = ({ children, className, size = "default", ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx(sizes[size], className), ...props, children });
+};
+
+const variants = {
+  "header-md": "text-header-md leading-header-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-xs": "text-ui-xs leading-ui-xs"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
+
+const formatDateCell = (date) => {
+  const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date).toUpperCase();
+  const day = date.getDate();
+  const formattedDay = `${month} ${day}`;
+  const time = new Intl.DateTimeFormat("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+    // Use 24-hour format
+  }).format(date);
+  return { day: formattedDay, time };
+};
+
+const Cell = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsx("td", { className: clsx("text-icon5 first:pl-5 last:pr-5", className), ...props, children: /* @__PURE__ */ jsx("div", { className: clsx("flex h-full w-full shrink-0 items-center"), children }) });
+};
+const TxtCell = ({ className, children }) => {
+  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "w-full truncate", children }) });
+};
+const UnitCell = ({ className, children, unit }) => {
+  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "shrink-0", children }),
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3 w-full truncate", children: unit })
+  ] }) });
+};
+const DateTimeCell = ({ dateTime, ...props }) => {
+  const { day, time } = formatDateCell(dateTime);
+  return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3", children: day }),
+    " ",
+    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", children: time })
+  ] }) });
+};
+const EntryCell = ({ name, description, icon, meta, ...props }) => {
+  return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[14px]", children: [
+    /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-icon5", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "text-icon6 font-medium !leading-tight", children: name }),
+      description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", className: "text-icon3 w-full max-w-[300px] truncate !leading-tight", children: description })
+    ] }),
+    meta
+  ] }) });
+};
+
+const variantClasses = {
+  default: "text-icon3",
+  success: "text-accent1",
+  error: "text-accent2",
+  info: "text-accent3"
+};
+const Badge = ({ icon, variant = "default", className, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md",
+        icon ? "pl-md pr-1.5" : "px-1.5",
+        icon || variant === "default" ? "text-icon5" : variantClasses[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: variantClasses[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
+        children
+      ]
+    }
+  );
+};
+
+const SpanIcon = (props) => /* @__PURE__ */ jsx("svg", { width: "15", height: "8", viewBox: "0 0 15 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.17473 0.385409C5.45323 0.663917 5.45323 1.11547 5.17473 1.39397L3.62152 2.94718C3.49553 3.07317 3.58476 3.2886 3.76294 3.2886L11.2361 3.2886C11.4142 3.2886 11.5035 3.07317 11.3775 2.94718L9.82428 1.39397C9.54577 1.11547 9.54577 0.663917 9.82428 0.385409C10.1028 0.106902 10.5543 0.106902 10.8328 0.385409L14.0956 3.64821C14.2909 3.84347 14.2909 4.16006 14.0956 4.35532L10.8363 7.61462C10.5578 7.89313 10.1063 7.89313 9.82778 7.61462C9.54927 7.33611 9.54927 6.88456 9.82778 6.60605L11.3775 5.05635C11.5035 4.93036 11.4142 4.71493 11.2361 4.71493L3.76294 4.71493C3.58476 4.71493 3.49553 4.93036 3.62152 5.05635L5.17123 6.60605C5.44973 6.88456 5.44973 7.33611 5.17123 7.61462C4.89272 7.89313 4.44117 7.89313 4.16266 7.61462L0.903358 4.35532C0.708096 4.16006 0.708096 3.84347 0.903358 3.64821L4.16616 0.385409C4.44467 0.106902 4.89622 0.106902 5.17473 0.385409Z",
+    fill: "currentColor"
+  }
+) });
+
+const useOpenTrace = () => {
   const {
     setTrace,
     isOpen: open,
@@ -4620,53 +4726,136 @@ function TraceButton({
     setOpenDetail,
     setCurrentTraceIndex
   } = useContext(TraceContext);
-  return /* @__PURE__ */ jsxs(
-    Button$1,
-    {
-      variant: "ghost",
-      className: "flex h-0 items-center gap-2 p-0",
-      onClick: () => {
-        setTrace(trace);
-        const parentSpan = trace.find((span) => span.parentSpanId === null) || trace[0];
-        setSpan(parentSpan);
-        setCurrentTraceIndex(traceIndex);
-        if (open && currentTrace?.[0]?.id !== trace[0].id) return;
-        setOpen((prev) => !prev);
-        setOpenDetail((prev) => !prev);
-      },
-      children: [
-        status.code === 0 ? /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "h-3 w-3",
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "13",
-            height: "12",
-            viewBox: "0 0 13 12",
-            fill: "none",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                d: "M6.37695 12C9.69067 12 12.377 9.31371 12.377 6C12.377 2.68629 9.69067 0 6.37695 0C3.06325 0 0.376953 2.68629 0.376953 6C0.376953 9.31371 3.06325 12 6.37695 12ZM9.62004 4.65344C9.87907 4.36036 9.8651 3.90005 9.58884 3.6253C9.3125 3.35055 8.87861 3.3654 8.61958 3.65847L5.6477 7.02105L4.08967 5.55197C3.80661 5.28508 3.37319 5.31213 3.12159 5.61237C2.87 5.91262 2.89549 6.37239 3.17854 6.63927L4.90294 8.26517C5.36588 8.70171 6.07235 8.6676 6.49598 8.18829L9.62004 4.65344Z",
-                fill: "#6CD063"
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#FF4500", width: "13", height: "12", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            fillRule: "evenodd",
-            d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z",
-            clipRule: "evenodd"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("span", { className: "truncate max-w-[150px]", children: name })
-      ]
+  const openTrace = (trace, traceIndex) => {
+    setTrace(trace);
+    const parentSpan = trace.find((span) => span.parentSpanId === null) || trace[0];
+    setSpan(parentSpan);
+    setCurrentTraceIndex(traceIndex);
+    if (open && currentTrace?.[0]?.id !== trace[0].id) return;
+    setOpen((prev) => !prev);
+    setOpenDetail((prev) => !prev);
+  };
+  return { openTrace };
+};
+
+const TracesTableSkeleton = ({ colsCount }) => {
+  return /* @__PURE__ */ jsx(Tbody, { children: /* @__PURE__ */ jsx(Row, { children: Array.from({ length: colsCount }).map((_, index) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "w-1/2" }) }, index)) }) });
+};
+const TracesTableEmpty = ({ colsCount }) => {
+  return /* @__PURE__ */ jsx(Tbody, { children: /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsx(Txt, { children: "No traces found" }) }) }) });
+};
+const TracesTableError = ({ error, colsCount }) => {
+  return /* @__PURE__ */ jsx(Tbody, { children: /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, { colSpan: colsCount, className: "text-center py-4", children: /* @__PURE__ */ jsx(Txt, { children: error.message }) }) }) });
+};
+const TraceRow = ({ trace, index }) => {
+  const { openTrace } = useOpenTrace();
+  return /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(DateTimeCell, { dateTime: new Date(trace.started / 1e3) }),
+    /* @__PURE__ */ jsx(TxtCell, { children: trace.traceId }),
+    /* @__PURE__ */ jsx(UnitCell, { unit: "ms", children: trace.duration }),
+    /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsxs(Badge, { icon: /* @__PURE__ */ jsx(SpanIcon, {}), children: [
+      trace.trace.length,
+      " span",
+      trace.trace.length > 1 ? "s" : ""
+    ] }) }) })
+  ] });
+};
+const TracesTable = ({ traces, isLoading, error }) => {
+  const hasNoTraces = !traces || traces.length === 0;
+  const colsCount = 4;
+  return /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+    /* @__PURE__ */ jsxs(Thead, { children: [
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Time" }),
+      /* @__PURE__ */ jsx(Th, { width: "auto", children: "Trace Id" }),
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Duration" }),
+      /* @__PURE__ */ jsx(Th, { width: 160, children: "Spans" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(TracesTableSkeleton, { colsCount }) : error ? /* @__PURE__ */ jsx(TracesTableError, { error, colsCount }) : hasNoTraces ? /* @__PURE__ */ jsx(TracesTableEmpty, { colsCount }) : /* @__PURE__ */ jsx(Tbody, { children: traces.map((trace, index) => /* @__PURE__ */ jsx(TraceRow, { trace, index }, trace.traceId)) })
+  ] });
+};
+
+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 TreeNode({ node, depth = 0 }) {
   const [isExpanded, setIsExpanded] = useState(true);
@@ -4942,278 +5131,62 @@ function AttributesValues({
   keyName
 }) {
   if (attributes === null || attributes === void 0 || Array.isArray(attributes) && attributes.length === 0 || typeof attributes === "object" && attributes !== null && Object.keys(attributes).length === 0) {
-    return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: "N/A" });
-  }
-  if (typeof attributes === "string") {
-    try {
-      const attr = JSON.parse(attributes);
-      if (typeof attr === "object" || Array.isArray(attr)) {
-        return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: attr });
-      }
-    } catch {
-      const val = attributes ? cleanString(attributes.toString()) : "N/A";
-      if (keyName === "Input" && val === "[Not Serializable]") {
-        return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: "No input" });
-      }
-      return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: attributes ? cleanString(attributes.toString()) : "N/A" });
-    }
-  }
-  const processedValue = attributes;
-  if (Array.isArray(processedValue)) {
-    if (processedValue.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mt-1 gap-3", children: processedValue.map((item, index) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx(AttributesValues, { attributes: item, depth: depth + 1 }, index) }, index)) }) });
-  }
-  if (typeof processedValue === "object") {
-    const entries = Object.entries(processedValue);
-    if (entries.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mt-1", children: entries.map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-2 pl-0", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm capitalize text-mastra-el-3", children: transformKey(key) }),
-      /* @__PURE__ */ jsx(AttributesValues, { attributes: val, depth: depth + 1, keyName: transformKey(key) })
-    ] }, key)) }) });
-  }
-  if (typeof processedValue === "boolean")
-    return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue.toString() || "N/A" });
-  if (typeof processedValue === "number") return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue.toString() });
-  if (typeof processedValue === "string")
-    return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue ? cleanString(processedValue.toString()) : "N/A" });
-  return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: String(processedValue) });
-}
-
-function usePolling({
-  fetchFn,
-  interval = 3e3,
-  enabled = false,
-  onSuccess,
-  onError,
-  shouldContinue = () => true,
-  restartPolling = false
-}) {
-  const [isPolling, setIsPolling] = useState(enabled);
-  const [error, setError] = useState(null);
-  const [data, setData] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  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) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-  const stopPolling = useCallback(() => {
-    console.log("stopPolling");
-    setIsPolling(false);
-    cleanup();
-  }, [cleanup]);
-  const startPolling = useCallback(() => {
-    console.log("startPolling");
-    setIsPolling(true);
-    setError(null);
-  }, []);
-  const executePoll = useCallback(
-    async (refetch2 = true) => {
-      if (!mountedRef.current) return;
-      setIsLoading(true);
-      try {
-        const result = await fetchFn();
-        setData(result);
-        setError(null);
-        onSuccess?.(result);
-        if (shouldContinue(result) && refetch2) {
-          timeoutRef.current = setTimeout(executePoll, interval);
-        } else {
-          stopPolling();
-        }
-      } catch (err) {
-        if (!mountedRef.current) return;
-        setError(err);
-        onError?.(err);
-        stopPolling();
-      } finally {
-        if (mountedRef.current) {
-          setFirstCallLoading(false);
-          setIsLoading(false);
-        }
-      }
-    },
-    [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) {
-      executePoll(true);
-    }
-    return () => {
-      console.log("cleanup poll");
-      mountedRef.current = false;
-      cleanup();
-    };
-  }, [enabled, isPolling, executePoll, cleanup]);
-  useEffect(() => {
-    setRestart(restartPolling);
-  }, [restartPolling]);
-  useEffect(() => {
-    if (restart && !isPolling) {
-      setIsPolling(true);
-      executePoll();
-      setRestart(false);
-    }
-  }, [restart]);
-  return {
-    isPolling,
-    isLoading,
-    error,
-    data,
-    startPolling,
-    stopPolling,
-    firstCallLoading,
-    refetch
-  };
-}
-
-const useTraces = (componentName, baseUrl, isWorkflow = false) => {
-  const [traces, setTraces] = useState([]);
-  const { setTraces: setTraceContextTraces } = useContext(TraceContext);
-  const client = useMemo(
-    () => new MastraClient({
-      baseUrl: baseUrl || ""
-    }),
-    [baseUrl]
-  );
-  const fetchFn = useCallback(async () => {
-    try {
-      const res = await client.getTelemetry({
-        attribute: {
-          componentName
-        }
-      });
-      if (!res.traces) {
-        throw new Error("Error fetching traces");
-      }
-      const refinedTraces = refineTraces(res?.traces || [], isWorkflow);
-      return refinedTraces;
-    } catch (error2) {
-      throw error2;
-    }
-  }, [client, componentName, isWorkflow]);
-  const onSuccess = useCallback(
-    (newTraces) => {
-      if (newTraces.length > 0) {
-        setTraces(() => newTraces);
-        setTraceContextTraces(() => newTraces);
-      }
-    },
-    [setTraceContextTraces]
-  );
-  const onError = useCallback((error2) => {
-    toast.error(error2.message);
-  }, []);
-  const shouldContinue = useCallback(() => {
-    return true;
-  }, []);
-  const { firstCallLoading, error } = usePolling({
-    fetchFn,
-    interval: 3e3,
-    onSuccess,
-    onError,
-    shouldContinue,
-    enabled: true
-  });
-  return { traces, firstCallLoading, error };
-};
-
-function AgentTraces({
-  agentName,
-  baseUrl,
-  sidebarChild
-}) {
-  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(AgentTracesInner, { agentName, baseUrl, sidebarChild }) });
-}
-function AgentTracesInner({
-  agentName,
-  baseUrl,
-  sidebarChild
-}) {
-  const { traces, error, firstCallLoading } = useTraces(agentName, baseUrl);
-  const { isOpen: open } = useContext(TraceContext);
-  if (firstCallLoading) {
-    return /* @__PURE__ */ jsxs("main", { className: "flex-1 relative overflow-hidden h-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", 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" }),
-          /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-            /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-            " Trace Id"
-          ] }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-        ] }) }),
-        /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
-        ] }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[325px]" })
-    ] });
+    return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: "N/A" });
   }
-  if (!traces || traces.length === 0) {
-    return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", 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" }),
-          /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-            /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-            " Trace Id"
-          ] }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-        ] }) }),
-        /* @__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, className: "min-w-[325px]" })
-    ] });
+  if (typeof attributes === "string") {
+    try {
+      const attr = JSON.parse(attributes);
+      if (typeof attr === "object" || Array.isArray(attr)) {
+        return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: attr });
+      }
+    } catch {
+      const val = attributes ? cleanString(attributes.toString()) : "N/A";
+      if (keyName === "Input" && val === "[Not Serializable]") {
+        return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: "No input" });
+      }
+      return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: attributes ? cleanString(attributes.toString()) : "N/A" });
+    }
   }
-  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-    /* @__PURE__ */ jsx(Traces, { traces }),
-    /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]") })
-  ] });
+  const processedValue = attributes;
+  if (Array.isArray(processedValue)) {
+    if (processedValue.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mt-1 gap-3", children: processedValue.map((item, index) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx(AttributesValues, { attributes: item, depth: depth + 1 }, index) }, index)) }) });
+  }
+  if (typeof processedValue === "object") {
+    const entries = Object.entries(processedValue);
+    if (entries.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mt-1", children: entries.map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-2 pl-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm capitalize text-mastra-el-3", children: transformKey(key) }),
+      /* @__PURE__ */ jsx(AttributesValues, { attributes: val, depth: depth + 1, keyName: transformKey(key) })
+    ] }, key)) }) });
+  }
+  if (typeof processedValue === "boolean")
+    return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue.toString() || "N/A" });
+  if (typeof processedValue === "number") return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue.toString() });
+  if (typeof processedValue === "string")
+    return /* @__PURE__ */ jsx("span", { className: "font-mono text-sm", children: processedValue ? cleanString(processedValue.toString()) : "N/A" });
+  return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: String(processedValue) });
 }
-function SidebarItems$1({ sidebarChild, className }) {
+
+const TracesSidebar = ({ className, onResize, width, children }) => {
   const { openDetail, isOpen: open } = useContext(TraceContext);
-  const [rightSidebarWidth, setRightSidebarWidth] = useState(40);
   return /* @__PURE__ */ jsxs(
     MastraResizablePanel,
     {
       className: cn(
-        "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
+        "absolute top-0 bottom-0 right-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
         className
       ),
-      defaultWidth: open ? 60 : 20,
-      minimumWidth: open ? 50 : 20,
-      maximumWidth: open ? 90 : 60,
+      defaultWidth: open ? 50 : 30,
+      minimumWidth: open ? 50 : 30,
+      maximumWidth: open ? 90 : 50,
+      setCurrentWidth: onResize,
       children: [
         open && /* @__PURE__ */ jsx(
           "div",
           {
             className: "h-full overflow-x-scroll px-0 absolute left-0 top-0 min-w-[50%] bg-mastra-bg-1 bg-[#121212]",
-            style: { width: `${100 - rightSidebarWidth}%` },
+            style: { width: `${width}%` },
             children: /* @__PURE__ */ jsx(TraceDetails, {})
           }
         ),
@@ -5228,13 +5201,33 @@ function SidebarItems$1({ sidebarChild, className }) {
               "unset-position": !open
             }),
             disabled: !open,
-            setCurrentWidth: setRightSidebarWidth,
-            children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? sidebarChild : /* @__PURE__ */ jsx(SpanDetail, {}) })
+            children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? children : /* @__PURE__ */ jsx(SpanDetail, {}) })
           }
         )
       ]
     }
   );
+};
+
+function AgentTraces({ agentName, baseUrl, sidebarChild }) {
+  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(AgentTracesInner, { agentName, baseUrl, sidebarChild }) });
+}
+function AgentTracesInner({ agentName, baseUrl, sidebarChild }) {
+  const [sidebarWidth, setSidebarWidth] = useState(30);
+  const { traces, firstCallLoading, error } = useTraces(agentName, baseUrl);
+  const { isOpen: open } = useContext(TraceContext);
+  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex flex-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 block mr-[30%]", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsx(
+      TracesSidebar,
+      {
+        className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]"),
+        width: 100 - sidebarWidth,
+        onResize: setSidebarWidth,
+        children: sidebarChild
+      }
+    )
+  ] });
 }
 
 const convertMessage = (message) => {
@@ -5665,105 +5658,26 @@ const NetworkChat = ({ agentId, memory }) => {
   return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, children: /* @__PURE__ */ jsx(Thread, { memory, ToolFallback }) });
 };
 
-function WorkflowTraces({
-  workflowName,
-  baseUrl,
-  sidebarChild
-}) {
+function WorkflowTraces({ workflowName, baseUrl, sidebarChild }) {
   return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(WorkflowTracesInner, { workflowName, baseUrl, sidebarChild }) });
 }
-function WorkflowTracesInner({
-  workflowName,
-  baseUrl,
-  sidebarChild
-}) {
+function WorkflowTracesInner({ workflowName, baseUrl, sidebarChild }) {
+  const [sidebarWidth, setSidebarWidth] = useState(30);
   const { traces, error, firstCallLoading } = useTraces(workflowName, baseUrl, true);
   const { isOpen: open } = useContext(TraceContext);
-  if (firstCallLoading) {
-    return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", 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" }),
-          /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-            /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-            " Trace Id"
-          ] }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-        ] }) }),
-        /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) }),
-          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
-        ] }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[325px]" })
-    ] });
-  }
-  if (!traces || traces.length === 0) {
-    return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table$1, { children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", 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" }),
-          /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
-            /* @__PURE__ */ jsx(Braces, { className: "h-3 w-3" }),
-            " Trace Id"
-          ] }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Started" }),
-          /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Total Duration" })
-        ] }) }),
-        /* @__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, className: "min-w-[325px]" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-    /* @__PURE__ */ jsx(Traces, { traces }),
-    /* @__PURE__ */ jsx(SidebarItems, { className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]"), sidebarChild })
+  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex flex-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 block mr-[30%]", children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    /* @__PURE__ */ jsx(
+      TracesSidebar,
+      {
+        className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]"),
+        width: 100 - sidebarWidth,
+        onResize: setSidebarWidth,
+        children: sidebarChild
+      }
+    )
   ] });
 }
-function SidebarItems({ sidebarChild, className }) {
-  const { openDetail, isOpen: open } = useContext(TraceContext);
-  const [rightSidebarWidth, setRightSidebarWidth] = useState(40);
-  return /* @__PURE__ */ jsxs(
-    MastraResizablePanel,
-    {
-      className: cn(
-        "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
-        className
-      ),
-      defaultWidth: open ? 60 : 20,
-      minimumWidth: open ? 50 : 20,
-      maximumWidth: open ? 90 : 60,
-      children: [
-        open && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "h-full overflow-x-scroll px-0 absolute left-0 top-0 min-w-[50%] bg-mastra-bg-1 bg-[#121212]",
-            style: { width: `${100 - rightSidebarWidth}%` },
-            children: /* @__PURE__ */ jsx(TraceDetails, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MastraResizablePanel,
-          {
-            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, {}) })
-          }
-        )
-      ]
-    }
-  );
-}
 
 const useWorkflow = (workflowId, baseUrl) => {
   const [workflow, setWorkflow] = useState(null);
@@ -6360,6 +6274,43 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
+const ScrollArea = React.forwardRef(
+  ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
+    const areaRef = React.useRef(null);
+    useAutoscroll(areaRef, { enabled: autoScroll });
+    return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.Viewport,
+        {
+          ref: areaRef,
+          className: cn("h-full w-full rounded-[inherit] [&>div]:!block", viewPortClassName),
+          style: maxHeight ? { maxHeight } : void 0,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ] });
+  }
+);
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
 function WorkflowConditionNode({ data }) {
   const { conditions } = data;
   const [open, setOpen] = useState(true);
@@ -7150,7 +7101,7 @@ const SelectField = ({ field, inputProps, error, id }) => {
         const syntheticEvent = {
           target: {
             value,
-            name: field.key
+            name: inputProps.name
           }
         };
         props.onChange(syntheticEvent);
@@ -7639,100 +7590,6 @@ function WorkflowTrigger({
   ] }) });
 }
 
-const rowSize = {
-  default: "[&>tbody>tr]:h-table-row",
-  small: "[&>tbody>tr]:h-table-row-small"
-};
-const Table = ({ className, children, size = "default" }) => {
-  return /* @__PURE__ */ jsx("table", { className: clsx("w-full", rowSize[size], className), children });
-};
-const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: clsx("h-table-header border-b-sm border-border1", className), children }) });
-};
-const Th = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsx(
-    "th",
-    {
-      className: clsx("text-icon3 text-ui-sm h-full text-left font-normal uppercase first:pl-5 last:pr-5", className),
-      ...props,
-      children
-    }
-  );
-};
-const Tbody = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("tbody", { className: clsx("", className), children });
-};
-const Row = ({ className, children, selected = false }) => {
-  return /* @__PURE__ */ jsx("tr", { className: clsx("border-b-sm border-border1 hover:bg-surface3", selected && "bg-surface4", className), children });
-};
-
-const sizes = {
-  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
-  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
-};
-const Icon = ({ children, className, size = "default", ...props }) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx(sizes[size], className), ...props, children });
-};
-
-const variants = {
-  "header-md": "text-header-md leading-header-md",
-  "ui-lg": "text-ui-lg leading-ui-lg",
-  "ui-md": "text-ui-md leading-ui-md",
-  "ui-sm": "text-ui-sm leading-ui-sm",
-  "ui-xs": "text-ui-xs leading-ui-xs"
-};
-const fonts = {
-  mono: "font-mono"
-};
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
-};
-
-const formatDateCell = (date) => {
-  const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date).toUpperCase();
-  const day = date.getDate();
-  const formattedDay = `${month} ${day}`;
-  const time = new Intl.DateTimeFormat("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-    // Use 24-hour format
-  }).format(date);
-  return { day: formattedDay, time };
-};
-
-const Cell = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsx("td", { className: clsx("text-icon5 first:pl-5 last:pr-5", className), ...props, children: /* @__PURE__ */ jsx("div", { className: clsx("flex h-full w-full shrink-0 items-center"), children }) });
-};
-const TxtCell = ({ className, children }) => {
-  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "w-full truncate", children }) });
-};
-const UnitCell = ({ className, children, unit }) => {
-  return /* @__PURE__ */ jsx(Cell, { className, children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "shrink-0", children }),
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3 w-full truncate", children: unit })
-  ] }) });
-};
-const DateTimeCell = ({ dateTime, ...props }) => {
-  const { day, time } = formatDateCell(dateTime);
-  return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-icon3", children: day }),
-    " ",
-    /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", children: time })
-  ] }) });
-};
-const EntryCell = ({ name, description, icon, meta, ...props }) => {
-  return /* @__PURE__ */ jsx(Cell, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[14px]", children: [
-    /* @__PURE__ */ jsx(Icon, { size: "lg", className: "text-icon5", children: icon }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
-      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-md", className: "text-icon6 font-medium !leading-tight", children: name }),
-      description && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", className: "text-icon3 w-full max-w-[300px] truncate !leading-tight", children: description })
-    ] }),
-    meta
-  ] }) });
-};
-
 const DataTable = ({
   columns,
   data,
@@ -7805,31 +7662,6 @@ const DataTable = ({
   ] });
 };
 
-const variantClasses = {
-  default: "text-icon3",
-  success: "text-accent1",
-  error: "text-accent2",
-  info: "text-accent3"
-};
-const Badge = ({ icon, variant = "default", className, children, ...props }) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md",
-        icon ? "pl-md pr-1.5" : "px-1.5",
-        icon || variant === "default" ? "text-icon5" : variantClasses[variant],
-        className
-      ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { className: variantClasses[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
-        children
-      ]
-    }
-  );
-};
-
 const Button = ({ className, as, ...props }) => {
   const Component = as || "button";
   return /* @__PURE__ */ jsx(