@mastra/playground-ui 5.0.1-alpha.1 → 5.0.1-alpha.2

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronDown, XIcon, Check, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, X, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, PlusIcon, TrashIcon, Plus, Loader2 } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Check, LoaderCircle, ChevronDownIcon, 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, useMemo, useRef, useEffect, createContext, useContext, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -3116,7 +3116,7 @@ const Icon = ({ children, className, size = "default", ...props }) => {
   return /* @__PURE__ */ jsx("span", { className: clsx("block", sizes[size], className), ...props, children });
 };
 
-const variantClasses$1 = {
+const variantClasses$2 = {
   default: "text-icon3",
   success: "text-accent1",
   error: "text-accent2",
@@ -3129,12 +3129,12 @@ const Badge$1 = ({ icon, variant = "default", className, children, ...props }) =
       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$1[variant],
+        icon || variant === "default" ? "text-icon5" : variantClasses$2[variant],
         className
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: variantClasses$1[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
+        icon && /* @__PURE__ */ jsx("span", { className: variantClasses$2[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
         children
       ]
     }
@@ -3757,6 +3757,30 @@ const WorkflowCoinIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "126",
   )
 ] });
 
+const LatencyIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2.0625 5.99976C2.0625 3.82513 3.82538 2.06226 6 2.06226C6.58712 2.06226 7.14423 2.19076 7.64473 2.42117V1.21042C7.12905 1.03337 6.57575 0.937256 6 0.937256C3.20406 0.937256 0.9375 3.20381 0.9375 5.99976C0.9375 8.7957 3.20406 11.0623 6 11.0623C8.79594 11.0623 11.0625 8.7957 11.0625 5.99976H9.9375C9.9375 8.17438 8.17462 9.93726 6 9.93726C3.82538 9.93726 2.0625 8.17438 2.0625 5.99976Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M9.28577 4.3986C9.08709 4.3986 8.92603 4.23753 8.92603 4.03885V0.978563C8.92603 0.681899 9.16652 0.441406 9.46318 0.441406C9.75985 0.441406 10.0003 0.6819 10.0003 0.978564V3.25858C10.0003 3.33638 10.0634 3.39944 10.1412 3.39944H11.2091C11.485 3.39944 11.7087 3.62311 11.7087 3.89902C11.7087 4.17493 11.485 4.3986 11.2091 4.3986H9.28577Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6.57568 3.69244C6.57568 3.38178 6.32384 3.12994 6.01318 3.12994C5.70252 3.12994 5.45068 3.38178 5.45068 3.69244V6.22272L6.7242 7.88675C6.91301 8.13346 7.26606 8.18039 7.51276 7.99159C7.75946 7.80278 7.8064 7.44973 7.61759 7.20303L6.57568 5.84162V3.69244Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
 const useCodemirrorTheme$1 = () => {
   return useMemo(
     () => draculaInit({
@@ -3898,31 +3922,23 @@ const Thread = ({ ToolFallback }) => {
   const WrappedAssistantMessage = (props) => {
     return /* @__PURE__ */ jsx(AssistantMessage, { ...props, ToolFallback });
   };
-  return /* @__PURE__ */ jsxs(ThreadPrimitive.Root, { className: "max-w-[568px] w-full mx-auto h-[calc(100%-100px)]", children: [
-    /* @__PURE__ */ jsxs(
-      ThreadPrimitive.Viewport,
-      {
-        className: "py-10 overflow-y-auto scroll-smooth h-full px-4",
-        ref: areaRef,
-        autoScroll: false,
-        children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(ThreadWelcome, {}),
-            /* @__PURE__ */ jsx(
-              ThreadPrimitive.Messages,
-              {
-                components: {
-                  UserMessage,
-                  EditComposer,
-                  AssistantMessage: WrappedAssistantMessage
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
-        ]
-      }
-    ),
+  return /* @__PURE__ */ jsxs(ThreadPrimitive.Root, { className: "max-w-[568px] w-full mx-auto h-[calc(100%-100px)] px-4", children: [
+    /* @__PURE__ */ jsxs(ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(ThreadWelcome, {}),
+        /* @__PURE__ */ jsx(
+          ThreadPrimitive.Messages,
+          {
+            components: {
+              UserMessage,
+              EditComposer,
+              AssistantMessage: WrappedAssistantMessage
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
+    ] }),
     /* @__PURE__ */ jsx(Composer, {})
   ] });
 };
@@ -3974,6 +3990,14 @@ const CircleStopIcon = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
+const createMastraClient = (baseUrl) => {
+  return new MastraClient({
+    baseUrl: baseUrl || "",
+    // only add the header if the baseUrl is not provided i.e it's a local dev environment
+    headers: !baseUrl ? { "x-mastra-dev-playground": "true" } : {}
+  });
+};
+
 const convertMessage$1 = (message) => {
   return message;
 };
@@ -4017,9 +4041,7 @@ function MastraRuntimeProvider({
       }
     }
   }, [initialMessages, threadId, memory]);
-  const mastra = new MastraClient({
-    baseUrl: baseUrl || ""
-  });
+  const mastra = createMastraClient(baseUrl);
   const agent = mastra.getAgent(agentId);
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
@@ -4491,9 +4513,7 @@ TabsContent.displayName = TabsPrimitive.Content.displayName;
 const useEvalsByAgentId = (agentId, type, baseUrl) => {
   const [evals, setEvals] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
-  const client = new MastraClient({
-    baseUrl: baseUrl || ""
-  });
+  const client = createMastraClient(baseUrl);
   const fetchEvals = async (_agentId) => {
     setIsLoading(true);
     const activeAgentId = _agentId ?? agentId;
@@ -4772,7 +4792,6 @@ function TraceProvider({ children }) {
   const [traces, setTraces] = useState([]);
   const [currentTraceIndex, setCurrentTraceIndex] = useState(0);
   const [span, setSpan] = useState(null);
-  const [openDetail, setOpenDetail] = useState(false);
   const nextTrace = () => {
     if (currentTraceIndex < traces.length - 1) {
       const nextIndex = currentTraceIndex + 1;
@@ -4797,7 +4816,6 @@ function TraceProvider({ children }) {
     setOpen(false);
     setTrace(null);
     setSpan(null);
-    setOpenDetail(false);
   };
   return /* @__PURE__ */ jsx(
     TraceContext.Provider,
@@ -4815,8 +4833,6 @@ function TraceProvider({ children }) {
         prevTrace,
         span,
         setSpan,
-        openDetail,
-        setOpenDetail,
         clearData
       },
       children
@@ -4966,10 +4982,8 @@ function transformKey(key) {
   if (key.includes(".result")) {
     return "Output";
   }
-  return key.split(".").join(" ").split("_");
-}
-function cleanString(string) {
-  return string.replace(/\\n/g, "").replace(/\n/g, "").replace(/\s+/g, " ").trim();
+  const newKey = key.split(".").join(" ").split("_").join(" ").replaceAll("ai", "AI");
+  return newKey.substring(0, 1).toUpperCase() + newKey.substring(1);
 }
 const refineTraces = (traces, isWorkflow = false) => {
   const listOfSpanIds = /* @__PURE__ */ new Set();
@@ -5006,35 +5020,11 @@ const refineTraces = (traces, isWorkflow = false) => {
   });
   return tracesData;
 };
-const allowedAiSpanAttributes = [
-  "operation.name",
-  "ai.operationId",
-  "ai.model.provider",
-  "ai.model.id",
-  "ai.prompt.format",
-  "ai.prompt.messages",
-  "ai.prompt.tools",
-  "ai.prompt.toolChoice",
-  "ai.settings.toolChoice",
-  "ai.schema",
-  "ai.settings.output",
-  "ai.response.object",
-  "ai.response.text",
-  "ai.response.timestamp",
-  "componentName",
-  "ai.usage.promptTokens",
-  "ai.usage.completionTokens"
-];
 
 const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   const [traces, setTraces] = useState([]);
   const { setTraces: setTraceContextTraces } = useContext(TraceContext);
-  const client = useMemo(
-    () => new MastraClient({
-      baseUrl: baseUrl || ""
-    }),
-    [baseUrl]
-  );
+  const client = useMemo(() => createMastraClient(baseUrl), [baseUrl]);
   const fetchFn = useCallback(async () => {
     try {
       const res = await client.getTelemetry({
@@ -5091,7 +5081,10 @@ 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),
+      className: clsx(
+        "text-icon3 text-ui-sm h-full text-left font-normal uppercase first:pl-5 last:pr-5 whitespace-nowrap",
+        className
+      ),
       ...props,
       children
     }
@@ -5170,7 +5163,6 @@ const useOpenTrace = () => {
     setIsOpen: setOpen,
     trace: currentTrace,
     setSpan,
-    setOpenDetail,
     setCurrentTraceIndex
   } = useContext(TraceContext);
   const openTrace = (trace, traceIndex) => {
@@ -5180,7 +5172,6 @@ const useOpenTrace = () => {
     setCurrentTraceIndex(traceIndex);
     if (open && currentTrace?.[0]?.id !== trace[0].id) return;
     setOpen((prev) => !prev);
-    setOpenDetail((prev) => !prev);
   };
   return { openTrace };
 };
@@ -5194,12 +5185,12 @@ const TracesTableEmpty = ({ colsCount }) => {
 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 TraceRow = ({ trace, index, isActive }) => {
   const { openTrace } = useOpenTrace();
-  return /* @__PURE__ */ jsxs(Row, { children: [
+  return /* @__PURE__ */ jsxs(Row, { className: isActive ? "bg-surface4" : "", 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(UnitCell, { unit: "ms", children: trace.duration / 1e3 }),
     /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("button", { onClick: () => openTrace(trace.trace, index), children: /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(TraceIcon, {}), children: [
       trace.trace.length,
       " span",
@@ -5209,6 +5200,7 @@ const TraceRow = ({ trace, index }) => {
 };
 const TracesTable = ({ traces, isLoading, error }) => {
   const hasNoTraces = !traces || traces.length === 0;
+  const { currentTraceIndex } = useContext(TraceContext);
   const colsCount = 4;
   return /* @__PURE__ */ jsxs(Table, { size: "small", children: [
     /* @__PURE__ */ jsxs(Thead, { children: [
@@ -5217,7 +5209,7 @@ const TracesTable = ({ traces, isLoading, error }) => {
       /* @__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)) })
+    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, isActive: index === currentTraceIndex }, trace.traceId)) })
   ] });
 };
 
@@ -5287,8 +5279,8 @@ const MastraResizablePanel = ({
     !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" : ""}`,
+        className: `w-px bg-border1 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 z-10
+          ${isDragging ? "bg-border2 w-1.5 cursor- col-resize" : ""}`,
         onMouseDown: handleMouseDown
       }
     ) : null,
@@ -5296,183 +5288,257 @@ const MastraResizablePanel = ({
     !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" : ""}`,
+        className: `w-px bg-border1 h-full cursor-col-resize hover:w-1.5 hover:bg-border2 active:bg-border3 transition-colors absolute inset-y-0 z-10
+          ${isDragging ? "bg-border2 w-1.5 cursor- col-resize" : ""}`,
         onMouseDown: handleMouseDown
       }
     ) : null
   ] });
 };
 
-function TreeNode({ node, depth = 0 }) {
-  const [isExpanded, setIsExpanded] = useState(true);
-  const hasChildren = node.children && node.children.length > 0;
-  const { setOpenDetail, setSpan, openDetail, span } = useContext(TraceContext);
-  const containerRef = useRef(null);
-  const widthPercentage = Math.min(node.relativePercentage ? node?.relativePercentage * 100 : 0, 100);
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, children: [
-    /* @__PURE__ */ jsxs(
-      Button$1,
-      {
-        variant: "ghost",
-        className: cn("relative flex w-full items-center justify-start gap-2 py-3 pr-1 text-sm", {
-          "text-accent-foreground bg-accent": span?.id === node.id
-        }),
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setSpan(node);
-          if (openDetail && node.id !== span?.id) return;
-          setOpenDetail(true);
-        },
-        style: { paddingLeft: `${depth > 0 ? depth * 35 + 28 - depth * 3 : 24}px` },
-        children: [
-          hasChildren ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              onClick: () => setIsExpanded(!isExpanded),
-              className: "relative grid h-auto flex-shrink-0 place-items-center rounded-sm bg-mastra-bg-3 p-2",
-              children: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: cn("!h-2 !w-2 transition-transform", isExpanded ? "" : "-rotate-90"),
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "7",
-                  height: "6",
-                  viewBox: "0 0 7 6",
-                  fill: "none",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M3.9338 5.5C3.74135 5.83333 3.26022 5.83333 3.06777 5.5L0.469694 0.999999C0.277244 0.666666 0.517814 0.25 0.902714 0.25L6.09886 0.25C6.48376 0.25 6.72433 0.666666 6.53188 1L3.9338 5.5Z",
-                      fill: "#939393"
-                    }
-                  )
-                }
-              )
-            }
-          ) : null,
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full gap-4 pr-4", children: [
-            /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn("max-w-[250px] text-sm", {
-                  "text-white": node?.status?.code === 0,
-                  "text-[#FF4500]": node?.status?.code !== 0,
-                  "px-1": depth === 0,
-                  truncate: containerRef.current?.offsetWidth && containerRef.current?.offsetWidth < 450 && depth > 1 && node.name?.length > 16
-                }),
-                children: node.name
-              }
-            ),
-            node.duration > 0 && /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute top-[11px] h-px w-full bg-[hsl(220,14%,19%)]" }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    width: `${widthPercentage}%`,
-                    left: 0
-                  },
-                  className: cn(
-                    "absolute top-[9px] z-0 h-[5px] rounded-[5px] bg-white transition-all",
-                    node.name.includes("agent") && "left-1/2 bg-green-500",
-                    node.name.includes("llm") && "bg-[#5699A8]",
-                    node.name.includes("ai") && "left-2/4 w-5 bg-[#F09A56]"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: "absolute left-0 top-3 text-[0.63rem] text-mastra-el-3", children: [
-                formatDuration(node.duration),
-                "ms"
-              ] })
-            ] })
-          ] })
-        ]
-      }
-    ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx(Fragment, { children: node.children.map((child) => /* @__PURE__ */ jsx(TreeNode, { node: child, depth: depth + 1 }, child.id)) })
+const sizeClasses = {
+  md: "h-button-md gap-md",
+  lg: "h-button-lg gap-lg"
+};
+const variantClasses$1 = {
+  default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6",
+  light: "bg-surface3 hover:bg-surface5 text-icon6"
+};
+const Button = ({ className, as, size = "md", variant = "default", ...props }) => {
+  const Component = as || "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: clsx(
+        "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
+        variantClasses$1[variant],
+        sizeClasses[size],
+        className
+      ),
+      ...props
+    }
+  );
+};
+
+const TraceTree = ({ children }) => {
+  return /* @__PURE__ */ jsx("ol", { children });
+};
+
+const variantClasses = {
+  agent: "bg-accent1"
+};
+const Time = ({ durationMs, tokenCount, variant, progressPercent }) => {
+  const variantClass = variant ? variantClasses[variant] : "bg-accent3";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-surface4 relative h-[6px] w-full rounded-full p-px overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: clsx("absolute h-1 rounded-full", variantClass), style: { width: `${progressPercent}%` } }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pt-0.5", children: [
+      /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
+        durationMs,
+        "ms"
+      ] }),
+      tokenCount && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon2 font-medium", children: [
+        tokenCount,
+        "t"
+      ] })
+    ] })
   ] });
-}
+};
+
+const TraceDurationContext = createContext(0);
+const useTraceDuration = () => {
+  return useContext(TraceDurationContext);
+};
+const TraceDurationProvider = ({ children, durationMs }) => {
+  return /* @__PURE__ */ jsx(TraceDurationContext.Provider, { value: durationMs, children });
+};
+
+const spanIconMap = {
+  tool: ToolsIcon,
+  agent: AgentIcon,
+  workflow: WorkflowIcon,
+  memory: MemoryIcon,
+  rag: TraceIcon,
+  storage: DbIcon,
+  eval: ScoreIcon,
+  other: TraceIcon
+};
+const spanVariantClasses = {
+  tool: "text-[#ECB047]",
+  agent: "text-accent1",
+  workflow: "text-accent3",
+  memory: "text-accent2",
+  rag: "text-accent2",
+  storage: "text-accent2",
+  eval: "text-accent4",
+  other: "text-icon6"
+};
+const Span = ({ children, durationMs, variant, tokenCount, spans, isRoot, onClick, isActive }) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const traceDuration = useTraceDuration();
+  const VariantIcon = spanIconMap[variant];
+  const variantClass = spanVariantClasses[variant];
+  const progressPercent = durationMs / traceDuration * 100;
+  const TextEl = onClick ? "button" : "div";
+  return /* @__PURE__ */ jsx(TraceDurationProvider, { durationMs, children: /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("grid grid-cols-2 items-center gap-2 rounded-md pl-2", isActive && "bg-surface4"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-8 items-center gap-1", children: [
+        spans ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": isExpanded ? "Collapse span" : "Expand span",
+            "aria-expanded": isExpanded,
+            className: "text-icon3 flex h-4 w-4",
+            onClick: () => setIsExpanded(!isExpanded),
+            children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronIcon, { className: clsx("transition-transform -rotate-90", { "rotate-0": isExpanded }) }) })
+          }
+        ) : /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-full w-4", children: !isRoot && /* @__PURE__ */ jsx("div", { className: "ml-[7px] h-full w-px rounded-full" }) }),
+        /* @__PURE__ */ jsxs(TextEl, { className: "flex items-center gap-2 min-w-0", onClick, children: [
+          /* @__PURE__ */ jsx("div", { className: clsx("bg-surface4 flex items-center justify-center rounded-md p-[3px]", variantClass), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(VariantIcon, {}) }) }),
+          /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-icon6 truncate", children })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Time,
+        {
+          durationMs,
+          tokenCount,
+          variant: variant === "agent" ? "agent" : void 0,
+          progressPercent
+        }
+      )
+    ] }),
+    isExpanded && spans && /* @__PURE__ */ jsx("div", { className: "ml-4", children: spans })
+  ] }) });
+};
+
+const Spans = ({ children }) => {
+  return /* @__PURE__ */ jsx("ol", { children });
+};
+
+const Trace = ({ name, spans, durationMs, tokenCount, onClick, variant, isActive }) => {
+  return /* @__PURE__ */ jsx(TraceDurationProvider, { durationMs, children: /* @__PURE__ */ jsx(
+    Span,
+    {
+      isRoot: true,
+      durationMs,
+      variant,
+      spans: /* @__PURE__ */ jsx(Spans, { children: spans }),
+      onClick,
+      isActive,
+      children: name
+    }
+  ) });
+};
+
+const getSpanVariant = (span) => {
+  const attributes = Object.keys(span.attributes || {}).map((k) => k.toLowerCase());
+  const lowerCaseName = span.name.toLowerCase();
+  const isAiSpan = lowerCaseName.startsWith("ai.");
+  if (isAiSpan) {
+    const isAiAboutTool = lowerCaseName.includes("tool");
+    if (isAiAboutTool) return "tool";
+    return "other";
+  }
+  const hasMemoryRelatedAttributes = attributes.some((key) => key.includes("memory") || key.includes("storage"));
+  if (hasMemoryRelatedAttributes) return "memory";
+  const hasToolRelatedAttributes = attributes.some((key) => key.includes("tool"));
+  if (hasToolRelatedAttributes) return "tool";
+  const hasAgentRelatedAttributes = attributes.some((key) => key.includes("agent."));
+  if (hasAgentRelatedAttributes) return "agent";
+  if (lowerCaseName.includes(".insert")) {
+    const evalRelatedAttribute = attributes.find((key) => String(span.attributes?.[key])?.includes("mastra_evals"));
+    if (evalRelatedAttribute) return "eval";
+  }
+  return "other";
+};
 
-function TreeView({ tree }) {
-  return /* @__PURE__ */ jsx("ul", { children: tree.map((node) => /* @__PURE__ */ jsx(TreeNode, { node }, node.id)) });
-}
 function buildTree(items, parentSpanId = null) {
   return items.filter((item) => item.parentSpanId === parentSpanId).map((item) => ({
     ...item,
     children: buildTree(items, item.id)
   }));
 }
+const NestedSpans = ({ spans }) => {
+  const { span: activeSpan, setSpan } = useContext(TraceContext);
+  return /* @__PURE__ */ jsx(Spans, { children: spans.map((span) => {
+    const isActive = span.id === activeSpan?.id;
+    return /* @__PURE__ */ jsx(
+      Span,
+      {
+        spans: span.children.length > 0 && /* @__PURE__ */ jsx(NestedSpans, { spans: span.children }),
+        durationMs: span.duration / 1e3,
+        variant: getSpanVariant(span),
+        isActive,
+        onClick: () => setSpan(span),
+        children: span.name
+      },
+      span.id
+    );
+  }) });
+};
 function SpanView({ trace }) {
-  const tree = buildTree(trace.concat([]).reverse());
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(TreeView, { tree }) });
+  const shallowCopy = [...trace];
+  const tree = buildTree(shallowCopy.reverse());
+  const { span: activeSpan, setSpan } = useContext(TraceContext);
+  return /* @__PURE__ */ jsx(TraceTree, { children: tree.map((node) => /* @__PURE__ */ jsx(
+    Trace,
+    {
+      name: node.name,
+      durationMs: node.duration / 1e3,
+      spans: /* @__PURE__ */ jsx(NestedSpans, { spans: node.children }),
+      variant: getSpanVariant(node),
+      isActive: node.id === activeSpan?.id,
+      onClick: () => setSpan(node)
+    }
+  )) });
 }
 
+const Header = ({ children, border = true }) => {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: clsx("h-header-default z-50 flex w-full items-center gap-[18px] bg-transparent px-5", {
+        "border-b-sm border-border1": border
+      }),
+      children
+    }
+  );
+};
+const HeaderTitle = ({ children }) => {
+  return /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white", children });
+};
+const HeaderAction = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "ml-auto", children });
+};
+const HeaderGroup = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "gap-lg flex items-center", children });
+};
+
 function TraceDetails() {
   const { trace, currentTraceIndex, prevTrace, nextTrace, traces, clearData } = useContext(TraceContext);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 pt-[1.56rem]", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("h3", { className: "text-[1.125rem]", children: [
-          "Trace Span",
-          trace?.length && trace.length > 1 ? "s" : ""
-        ] }),
-        /* @__PURE__ */ jsxs("span", { className: "text-xs text-mastra-el-3", children: [
-          trace?.length ? trace.length : 0,
-          " span",
-          trace?.length && trace.length > 1 ? "s" : ""
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            Button$1,
-            {
-              onClick: () => {
-                prevTrace();
-              },
-              disabled: currentTraceIndex === 0,
-              variant: "secondary",
-              size: "icon",
-              className: "!h-3 !w-3 rotate-180 !px-3 py-3 text-mastra-el-3 transition-colors hover:text-white",
-              children: /* @__PURE__ */ jsx(ChevronDown, {})
-            }
-          ),
-          " ",
-          /* @__PURE__ */ jsx(
-            Button$1,
-            {
-              onClick: () => {
-                nextTrace();
-              },
-              disabled: currentTraceIndex === traces.length - 1,
-              variant: "secondary",
-              size: "icon",
-              className: "!h-3 !w-3 !px-3 py-3 text-mastra-el-3 transition-colors hover:text-white",
-              children: /* @__PURE__ */ jsx(ChevronDown, {})
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: "bg-secondary inline-block h-5 w-px" }),
+  const actualTrace = traces[currentTraceIndex];
+  if (!actualTrace || !trace) return null;
+  return /* @__PURE__ */ jsxs("aside", { children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: prevTrace, disabled: currentTraceIndex === 0, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
         /* @__PURE__ */ jsx(
-          Button$1,
+          Button,
           {
-            onClick: () => {
-              clearData();
-            },
-            variant: "secondary",
-            size: "icon",
-            className: "!h-3 !w-3 !px-3 py-3 text-mastra-el-3 transition-colors hover:text-white",
-            children: /* @__PURE__ */ jsx(XIcon, {})
+            className: "bg-transparent border-none",
+            onClick: nextTrace,
+            disabled: currentTraceIndex === traces.length - 1,
+            children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) })
           }
         )
-      ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", children: [
+        "Trace ",
+        /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: actualTrace.traceId.substring(0, 5) })
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "p-6 px-1", children: [
-      " ",
-      trace && /* @__PURE__ */ jsx(SpanView, { trace })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(SpanView, { trace }) })
   ] });
 }
 
@@ -5499,179 +5565,135 @@ const SyntaxHighlighter = ({ data }) => {
 };
 
 function SpanDetail() {
-  const { span } = useContext(TraceContext);
-  const isAiSpan = span?.name?.startsWith("ai.");
-  const aiSpanAttributes = Object.entries(span?.attributes || {}).filter(([key]) => allowedAiSpanAttributes.includes(key)).reduce((acc, [key, value]) => {
-    return {
-      ...acc,
-      [key]: value
-    };
-  }, {});
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 pb-20", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-6 pt-[1.56rem]", children: [
-      /* @__PURE__ */ jsx("span", { className: "rounded bg-[#314431] p-0.5", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "21", height: "20", viewBox: "0 0 21 20", fill: "none", children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M9.3726 2.10787C9.99493 1.48554 11.0066 1.48705 11.6274 2.10787L13.1306 3.61106C13.7529 4.23339 13.7514 5.24504 13.1306 5.86586L11.6274 7.36906C11.0051 7.99138 9.99342 7.98988 9.3726 7.36906L7.86941 5.86586C7.24708 5.24354 7.24858 4.23188 7.86941 3.61106L9.3726 2.10787ZM4.11141 7.36906C4.73374 6.74673 5.74539 6.74824 6.36621 7.36906L7.86941 8.87225C8.49173 9.49458 8.49023 10.5062 7.8694 11.127L6.36621 12.6302C5.74388 13.2526 4.73223 13.2511 4.11141 12.6302L2.60822 11.127C1.98589 10.5047 1.9874 9.49307 2.60822 8.87225L4.11141 7.36906ZM14.6338 7.36906C15.2561 6.74673 16.2678 6.74824 16.8886 7.36906L18.3918 8.87225C19.0141 9.49458 19.0126 10.5062 18.3918 11.127L16.8886 12.6302C16.2663 13.2526 15.2546 13.2511 14.6338 12.6302L13.1306 11.127C12.5083 10.5047 12.5098 9.49307 13.1306 8.87225L14.6338 7.36906ZM9.3726 12.6302C9.99493 12.0079 11.0066 12.0094 11.6274 12.6302L13.1306 14.1334C13.7529 14.7558 13.7514 15.7674 13.1306 16.3882L11.6274 17.8914C11.0051 18.5138 9.99342 18.5123 9.3726 17.8914L7.86941 16.3882C7.24708 15.7659 7.24859 14.7543 7.86941 14.1334L9.3726 12.6302Z",
-          fill: "white"
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx("h3", { className: "text-[0.9rem] font-medium", children: span?.name })
+  const { span, setSpan, trace } = useContext(TraceContext);
+  if (!span || !trace) return null;
+  const prevSpan = () => {
+    const currentIndex = trace.findIndex((t) => t.id === span.id);
+    if (currentIndex !== -1 && currentIndex < trace.length - 1) {
+      setSpan(trace[currentIndex + 1]);
+    }
+  };
+  const nextSpan = () => {
+    const currentIndex = trace.findIndex((t) => t.id === span.id);
+    if (currentIndex !== -1 && currentIndex > 0) {
+      setSpan(trace[currentIndex - 1]);
+    }
+  };
+  const SpanIcon = spanIconMap[getSpanVariant(span)];
+  const variantClass = spanVariantClasses[getSpanVariant(span)];
+  return /* @__PURE__ */ jsxs("aside", { children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: prevSpan, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronUp, {}) }) }),
+        /* @__PURE__ */ jsx(Button, { className: "bg-transparent border-none", onClick: nextSpan, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Txt, { variant: "ui-lg", className: "font-medium text-icon5", as: "h2", children: [
+        "Span ",
+        /* @__PURE__ */ jsx("span", { className: "ml-2 text-icon3", children: span.id.substring(0, 5) })
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-1 px-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-mastra-el-3", children: "Duration" }),
-        /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs", children: [
-          " ",
-          span?.duration ? formatDuration(span?.duration) : "",
-          "ms"
-        ] })
+    /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
+      /* @__PURE__ */ jsxs(Txt, { variant: "header-md", as: "h3", className: "text-icon-6 flex items-center gap-4 pb-3", children: [
+        /* @__PURE__ */ jsx(Icon, { size: "lg", className: "bg-surface4 p-1 rounded-md", children: /* @__PURE__ */ jsx(SpanIcon, { className: variantClass }) }),
+        span.name
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-mastra-el-3", children: "Time" }),
-        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: span?.startTime ? formatOtelTimestamp(span?.startTime) : "" })
+      /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 items-center", children: /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(LatencyIcon, {}), children: [
+        formatDuration(span.duration),
+        "ms"
+      ] }) }),
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "ID" }),
+        /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: span.id }),
+        /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Created at" }),
+        /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: span.startTime ? formatOtelTimestamp(span.startTime) : "" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-mastra-el-3", children: "Status" }),
-        /* @__PURE__ */ jsx("span", { className: cn("font-mono text-xs", span?.status?.code == 0 ? "text-[#6CD063]" : "text-[#FF4500]"), children: span?.status?.code == 0 ? "OK" : "ERROR" })
-      ] })
-    ] }),
-    span?.status?.code !== 0 ? /* @__PURE__ */ jsx("div", { className: "border-t-[0.5px] px-6 pt-4", children: span && span?.events?.length > 0 && /* @__PURE__ */ jsx(Events, { span }) }) : null,
-    /* @__PURE__ */ jsx("div", { className: "border-t-[0.5px] px-6 pt-4", children: span && /* @__PURE__ */ jsx(Attributes, { span: { ...span, attributes: isAiSpan ? aiSpanAttributes : span?.attributes } }) }),
-    span?.status?.code === 0 ? /* @__PURE__ */ jsx("div", { className: "border-t-[0.5px] px-6 pt-4", children: span && span?.events?.length > 0 && /* @__PURE__ */ jsx(Events, { span }) }) : null
+      span.attributes && /* @__PURE__ */ jsx(Attributes, { attributes: span.attributes }),
+      span.events?.length > 0 && /* @__PURE__ */ jsx(Events, { span })
+    ] })
   ] });
 }
+function Attributes({ attributes }) {
+  if (!attributes) return null;
+  const entries = Object.entries(attributes);
+  if (entries.length === 0) return null;
+  const keysToHide = ["http.request_id", "componentName"];
+  return /* @__PURE__ */ jsx("div", { children: entries.filter(([key]) => !keysToHide.includes(key)).map(([key, val]) => {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+      /* @__PURE__ */ jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(key) }),
+      /* @__PURE__ */ jsx(AttributeValue, { value: val })
+    ] }, key);
+  }) });
+}
+const AttributeValue = ({ value }) => {
+  if (!value)
+    return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: "N/A" });
+  if (typeof value === "number" || typeof value === "boolean") {
+    return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
+  }
+  if (typeof value === "object") {
+    return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: value });
+  }
+  try {
+    return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: JSON.parse(value) });
+  } catch {
+    return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
+  }
+};
 function Events({ span }) {
   if (!span.events) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-2", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-lg", children: "Events" }),
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
+    /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6 pb-2", children: "Events" }),
     span.events.map((event) => {
-      const eventAttributes = event?.attributes?.map((att) => ({ [att?.key]: att?.value }));
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn("flex flex-col gap-2 border-b-[0.5px] last:border-b-0 pt-4 pb-2 first:pb-4"),
-          children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-mastra-el-3", children: "Name" }),
-            /* @__PURE__ */ jsx("p", { className: "font-mono text-xs", children: event.name }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-mastra-el-3", children: "Time" }),
-            /* @__PURE__ */ jsx("p", { className: "font-mono text-xs", children: event.timeUnixNano ? formatOtelTimestamp2(Number(event.timeUnixNano)) : "" }),
-            event.attributes?.length > 0 ? /* @__PURE__ */ jsx(AttributesValues, { attributes: eventAttributes }) : null
-          ]
-        },
-        event.name
-      );
+      const isLast = event === span.events[span.events.length - 1];
+      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 justify-between gap-2 pb-2", children: [
+            /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Name" }),
+            /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: event.name }),
+            /* @__PURE__ */ jsx("dt", { className: "font-medium text-ui-md text-icon3", children: "Time" }),
+            /* @__PURE__ */ jsx("dd", { className: "text-ui-md text-icon6", children: event.timeUnixNano ? formatOtelTimestamp2(Number(event.timeUnixNano)) : "N/A" })
+          ] }),
+          event.attributes?.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: event.attributes.filter((attribute) => attribute !== null).map((attribute) => /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx(Txt, { as: "h4", variant: "ui-md", className: "text-icon3 pb-2", children: transformKey(attribute.key) }),
+            /* @__PURE__ */ jsx(AttributeValue, { value: attribute.value })
+          ] }, attribute.key)) }) : null
+        ] }, event.name),
+        !isLast && /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" })
+      ] }, event.name);
     })
   ] });
 }
-function Attributes({ span }) {
-  if (!span.attributes) return null;
-  return /* @__PURE__ */ jsx(AttributesValues, { attributes: span.attributes });
-}
-function AttributesValues({
-  attributes,
-  depth = 0,
-  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) });
-}
 
-const TracesSidebar = ({ className, onResize, width, children }) => {
-  const { openDetail, isOpen: open } = useContext(TraceContext);
-  return /* @__PURE__ */ jsxs(
+const TracesSidebar = ({ onResize }) => {
+  return /* @__PURE__ */ jsx(
     MastraResizablePanel,
     {
-      className: cn(
-        "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 ? 50 : 30,
-      minimumWidth: open ? 50 : 30,
-      maximumWidth: open ? 90 : 50,
+      className: "h-full",
+      defaultWidth: 70,
+      minimumWidth: 50,
+      maximumWidth: 70,
       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: `${width}%` },
-            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,
-            children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-scroll", children: !openDetail ? children : /* @__PURE__ */ jsx(SpanDetail, {}) })
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxs("div", { className: "h-full grid grid-cols-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-scroll w-full h-[calc(100%-40px)]", children: /* @__PURE__ */ jsx(TraceDetails, {}) }),
+        /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-40px)] overflow-x-scroll w-full border-l border-border1", children: /* @__PURE__ */ jsx(SpanDetail, {}) })
+      ] })
     }
   );
 };
 
-function AgentTraces({ agentName, baseUrl, sidebarChild }) {
-  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(AgentTracesInner, { agentName, baseUrl, sidebarChild }) });
+function AgentTraces({ agentName, baseUrl }) {
+  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(AgentTracesInner, { agentName, baseUrl }) });
 }
-function AgentTracesInner({ agentName, baseUrl, sidebarChild }) {
-  const [sidebarWidth, setSidebarWidth] = useState(30);
+function AgentTracesInner({ agentName, baseUrl }) {
+  const [sidebarWidth, setSidebarWidth] = useState(100);
   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
-      }
-    )
+  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
+    /* @__PURE__ */ jsx("div", { className: clsx("h-full", open ? "w-auto" : "w-full"), children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
 
@@ -5698,9 +5720,7 @@ function MastraNetworkRuntimeProvider({
       }
     }
   }, [initialMessages, threadId, memory, messages]);
-  const mastra = new MastraClient({
-    baseUrl: baseUrl || ""
-  });
+  const mastra = createMastraClient(baseUrl);
   console.log("MastraClient initialized");
   console.log(messages, "###");
   const network = mastra.getNetwork(agentId);
@@ -6089,24 +6109,16 @@ const NetworkChat = ({ agentId, memory }) => {
   return /* @__PURE__ */ jsx(MastraNetworkRuntimeProvider, { agentId, memory, children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4", children: /* @__PURE__ */ jsx(Thread, { ToolFallback }) }) });
 };
 
-function WorkflowTraces({ workflowName, baseUrl, sidebarChild }) {
-  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(WorkflowTracesInner, { workflowName, baseUrl, sidebarChild }) });
+function WorkflowTraces({ workflowName, baseUrl }) {
+  return /* @__PURE__ */ jsx(TraceProvider, { children: /* @__PURE__ */ jsx(WorkflowTracesInner, { workflowName, baseUrl }) });
 }
-function WorkflowTracesInner({ workflowName, baseUrl, sidebarChild }) {
-  const [sidebarWidth, setSidebarWidth] = useState(30);
+function WorkflowTracesInner({ workflowName, baseUrl }) {
+  const [sidebarWidth, setSidebarWidth] = useState(100);
   const { traces, error, firstCallLoading } = useTraces(workflowName, baseUrl, true);
   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
-      }
-    )
+  return /* @__PURE__ */ jsxs("main", { className: "h-full relative overflow-hidden flex", children: [
+    /* @__PURE__ */ jsx("div", { className: clsx("h-full", open ? "w-auto" : "w-full"), children: /* @__PURE__ */ jsx(TracesTable, { traces, isLoading: firstCallLoading, error }) }),
+    open && /* @__PURE__ */ jsx(TracesSidebar, { width: sidebarWidth, onResize: setSidebarWidth })
   ] });
 }
 
@@ -6148,9 +6160,7 @@ const sanitizeVNexWorkflowWatchResult = (record) => {
 const useWorkflow = (workflowId, baseUrl) => {
   const [workflow, setWorkflow] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
-  const client = new MastraClient({
-    baseUrl: baseUrl || ""
-  });
+  const client = createMastraClient(baseUrl);
   useEffect(() => {
     const fetchWorkflow = async () => {
       setIsLoading(true);
@@ -6195,9 +6205,7 @@ const useWorkflow = (workflowId, baseUrl) => {
 const useVNextWorkflow = (workflowId, baseUrl) => {
   const [vNextWorkflow, setVNextWorkflow] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
-  const client = new MastraClient({
-    baseUrl: baseUrl || ""
-  });
+  const client = createMastraClient(baseUrl);
   useEffect(() => {
     const fetchWorkflow = async () => {
       setIsLoading(true);
@@ -6222,9 +6230,7 @@ const useVNextWorkflow = (workflowId, baseUrl) => {
   return { vNextWorkflow, isLoading };
 };
 const useExecuteWorkflow = (baseUrl) => {
-  const client = new MastraClient({
-    baseUrl: baseUrl || ""
-  });
+  const client = createMastraClient(baseUrl);
   const createWorkflowRun = async ({ workflowId, prevRunId }) => {
     try {
       const workflow = client.getWorkflow(workflowId);
@@ -6322,12 +6328,9 @@ const useWatchWorkflow = (baseUrl) => {
   const watchWorkflow = async ({ workflowId, runId }) => {
     try {
       setIsWatchingWorkflow(true);
-      const client = new MastraClient({
-        baseUrl
-      });
+      const client = createMastraClient(baseUrl);
       const workflow = client.getWorkflow(workflowId);
       await workflow.watch({ runId }, (record) => {
-        console.log("record in use-workflows==", record);
         try {
           debouncedSetWatchResult(record);
         } catch (err) {
@@ -6351,12 +6354,9 @@ const useWatchWorkflow = (baseUrl) => {
   const watchVNextWorkflow = async ({ workflowId, runId }) => {
     try {
       setIsWatchingVNextWorkflow(true);
-      const client = new MastraClient({
-        baseUrl
-      });
+      const client = createMastraClient(baseUrl);
       const workflow = client.getVNextWorkflow(workflowId);
       await workflow.watch({ runId }, (record) => {
-        console.log("record in use-workflows===", record);
         try {
           debouncedSetVNextWatchResult(record);
         } catch (err) {
@@ -6393,9 +6393,7 @@ const useResumeWorkflow = (baseUrl) => {
   }) => {
     try {
       setIsResumingWorkflow(true);
-      const client = new MastraClient({
-        baseUrl: baseUrl || ""
-      });
+      const client = createMastraClient(baseUrl);
       const response = await client.getWorkflow(workflowId).resume({ stepId, runId, context });
       return response;
     } catch (error) {
@@ -6414,9 +6412,7 @@ const useResumeWorkflow = (baseUrl) => {
   }) => {
     try {
       setIsResumingVNextWorkflow(true);
-      const client = new MastraClient({
-        baseUrl: baseUrl || ""
-      });
+      const client = createMastraClient(baseUrl);
       const response = await client.getVNextWorkflow(workflowId).resume({ step, runId, resumeData, runtimeContext });
       return response;
     } catch (error) {
@@ -7507,12 +7503,12 @@ const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxs(Alert, { variant: "dest
 
 const SubmitButton = ({ children }) => /* @__PURE__ */ jsx(Button$1, { type: "submit", children });
 
-const StringField = ({ inputProps, error, id }) => {
+const StringField = ({ inputProps, error, field, id }) => {
   const { key, ...props } = inputProps;
-  return /* @__PURE__ */ jsx(Input, { id, className: error ? "border-destructive" : "", ...props });
+  return /* @__PURE__ */ jsx(Input, { id, className: error ? "border-destructive" : "", ...props, defaultValue: field.default });
 };
 
-const NumberField = ({ inputProps, error, id }) => {
+const NumberField = ({ inputProps, error, field, id }) => {
   const { key, ...props } = inputProps;
   return /* @__PURE__ */ jsx(
     Input,
@@ -7521,6 +7517,7 @@ const NumberField = ({ inputProps, error, id }) => {
       type: "number",
       className: error ? "border-destructive" : "",
       ...props,
+      defaultValue: field.default,
       onChange: (e) => {
         const value = e.target.value;
         if (value !== "" && !isNaN(Number(value))) {
@@ -7555,7 +7552,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+const BooleanField = ({ field, label, id, inputProps, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
   /* @__PURE__ */ jsx(
     Checkbox,
     {
@@ -7563,13 +7560,13 @@ const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxs(
       onCheckedChange: (checked) => {
         const event = {
           target: {
-            name: field.key,
+            name: inputProps.name,
             value: checked
           }
         };
         inputProps.onChange(event);
       },
-      checked: inputProps.value
+      defaultChecked: field.default
     }
   ),
   /* @__PURE__ */ jsxs(Label, { htmlFor: id, children: [
@@ -7806,9 +7803,17 @@ const DefaultButton = React.forwardRef(
 );
 DefaultButton.displayName = "DefaultButton";
 
-const DateField = ({ inputProps, error, id }) => {
+const DateField = ({ inputProps, field, error, id }) => {
   const { key, ...props } = inputProps;
   const [value, setValue] = useState(null);
+  useEffect(() => {
+    if (field.default) {
+      const date = new Date(field.default);
+      if (isValid(date)) {
+        setValue(date);
+      }
+    }
+  }, [field]);
   return /* @__PURE__ */ jsx(
     DatePicker,
     {
@@ -7888,16 +7893,16 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectField = ({ field, inputProps, error, id }) => {
+const SelectField = ({ field, inputProps, error, id, value }) => {
   const { key, ...props } = inputProps;
   return /* @__PURE__ */ jsxs(
     Select,
     {
       ...props,
-      onValueChange: (value) => {
+      onValueChange: (value2) => {
         const syntheticEvent = {
           target: {
-            value,
+            value: value2,
             name: inputProps.name
           }
         };
@@ -7944,10 +7949,10 @@ const ArrayElementWrapper = ({ children, onRemove }) => {
   ] });
 };
 
-const RecordField = ({ inputProps, error, id }) => {
-  const { key, value = {}, onChange, ...props } = inputProps;
+const RecordField = ({ inputProps, field, error, id }) => {
+  const { key, onChange, ...props } = inputProps;
   const [pairs, setPairs] = React.useState(
-    () => Object.entries(value).map(([key2, val]) => ({
+    () => Object.entries(field.default || {}).map(([key2, val]) => ({
       id: key2 || v4(),
       key: key2,
       value: val
@@ -7975,8 +7980,8 @@ const RecordField = ({ inputProps, error, id }) => {
     },
     [onChange, inputProps.name]
   );
-  const handleChange = (id2, field, newValue) => {
-    setPairs((prev) => prev.map((pair) => pair.id === id2 ? { ...pair, [field]: newValue } : pair));
+  const handleChange = (id2, field2, newValue) => {
+    setPairs((prev) => prev.map((pair) => pair.id === id2 ? { ...pair, [field2]: newValue } : pair));
   };
   const handleBlur = () => {
     updateForm(pairs);
@@ -8161,7 +8166,7 @@ function DynamicForm({
     onSubmit: async (values) => {
       await onSubmit(values["​"]);
     },
-    defaultValues,
+    defaultValues: defaultValues ? { "​": defaultValues } : void 0,
     formProps: {
       className: "space-y-4 p-4"
     },
@@ -8644,7 +8649,7 @@ function VNextWorkflowTrigger({
     ] }),
     isSuspendedSteps && suspendedSteps?.map((step) => {
       const stepDefinition = vNextWorkflow.steps[step.stepId];
-      const stepSchema = stepDefinition?.inputSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.inputSchema))) : z.record(z.string(), z.any());
+      const stepSchema = stepDefinition?.resumeSchema ? resolveSerializedZodOutput(jsonSchemaToZod(parse(stepDefinition.resumeSchema))) : z.record(z.string(), z.any());
       return /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-4", children: [
         /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: step.stepId }),
         step.suspendPayload && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
@@ -8766,30 +8771,6 @@ const DataTable = ({
   ] });
 };
 
-const sizeClasses = {
-  md: "h-button-md gap-md",
-  lg: "h-button-lg gap-lg"
-};
-const variantClasses = {
-  default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6",
-  light: "bg-surface3 hover:bg-surface5 text-icon6"
-};
-const Button = ({ className, as, size = "md", variant = "default", ...props }) => {
-  const Component = as || "button";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: clsx(
-        "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
-        variantClasses[variant],
-        sizeClasses[size],
-        className
-      ),
-      ...props
-    }
-  );
-};
-
 const Breadcrumb = ({ children, label }) => {
   return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-sm flex items-center", children }) });
 };
@@ -8808,27 +8789,6 @@ const Crumb = ({ className, as, isCurrent, ...props }) => {
   ] });
 };
 
-const Header = ({ children, border = true }) => {
-  return /* @__PURE__ */ jsx(
-    "header",
-    {
-      className: clsx("h-header-default z-50 flex w-full items-center gap-[18px] bg-transparent px-5", {
-        "border-b-sm border-border1": border
-      }),
-      children
-    }
-  );
-};
-const HeaderTitle = ({ children }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "h1", variant: "ui-lg", className: "font-medium text-white", children });
-};
-const HeaderAction = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "ml-auto", children });
-};
-const HeaderGroup = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: "gap-lg flex items-center", children });
-};
-
 const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height: "100", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx(
     "path",
@@ -8886,5 +8846,5 @@ const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height:
   )
 ] });
 
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LogsIcon, MastraResizablePanel, MemoryIcon, NetworkChat, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextWorkflowGraph, VNextWorkflowTrigger, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger };
+export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LogsIcon, MastraResizablePanel, MemoryIcon, NetworkChat, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VNextWorkflowGraph, VNextWorkflowTrigger, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger };
 //# sourceMappingURL=index.es.js.map