@mastra/playground-ui 7.0.0-beta.7 → 7.0.0-beta.9

package/dist/index.cjs.js

@@ -6304,13 +6304,6 @@ const StringField = ({ inputProps, error, field, id }) => {
 
 const NumberField = ({ inputProps, error, field, id }) => {
   const { key, ...props } = inputProps;
-  React.useEffect(() => {
-    if (field.default !== void 0) {
-      props.onChange({
-        target: { value: Number(field.default), name: inputProps.name }
-      });
-    }
-  }, [field.default]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
@@ -8584,7 +8577,7 @@ const WorkflowCard = ({ header, children, footer }) => {
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: header }),
       /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn("text-icon3 transition-transform -rotate-90", expanded && "rotate-0") }) })
     ] }),
-    children && expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t-sm border-border1", children }),
+    children && expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t-sm border-border1 max-h-[400px] overflow-y-auto", children }),
     footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1 px-2 border-t-sm border-border1", children: footer })
   ] });
 };
@@ -8703,7 +8696,7 @@ function WorkflowTrigger({
   const workflowActivePaths = streamResultToUse?.steps ?? {};
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   const doneStatuses = ["success", "failed", "canceled"];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full pt-3 pb-12", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full pt-3 pb-12 overflow-y-auto", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
       isSuspendedSteps && isStreamingWorkflow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin text-icon6" }) }),
@@ -12795,19 +12788,31 @@ const AgentMetadataWrapper = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 overflow-y-auto h-full px-5", children });
 };
 
-function SearchField(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InputField,
-    {
-      labelIsHidden: true,
-      ...props,
-      className: "[&>input]:pl-[2.5rem]",
-      style: {
-        background: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='gray' viewBox='0 0 24 24'><path d='M21 20l-5.6-5.6a7 7 0 1 0-1.4 1.4L20 21zM4 10a6 6 0 1 1 12 0 6 6 0 0 1-12 0z'/></svg>") no-repeat 8px center`,
-        backgroundSize: "1.5rem 1.5rem"
+function SearchField({ onReset, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputField,
+      {
+        labelIsHidden: true,
+        ...props,
+        className: "[&>input]:pl-[2.5rem]",
+        style: {
+          background: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='gray' viewBox='0 0 24 24'><path d='M21 20l-5.6-5.6a7 7 0 1 0-1.4 1.4L20 21zM4 10a6 6 0 1 1 12 0 6 6 0 0 1-12 0z'/></svg>") no-repeat 8px center`,
+          backgroundSize: "1.5rem 1.5rem",
+          paddingRight: onReset ? "3rem" : void 0
+        }
       }
-    }
-  );
+    ),
+    onReset && props.value && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onReset,
+        className: cn("absolute top-1/2 right-2 -translate-y-1/2 p-1", "[&:hover>svg]:text-icon5"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "text-icon3 w-[1rem] h-[1rem]" })
+      }
+    )
+  ] });
 }
 
 function InputField({
@@ -13297,7 +13302,7 @@ function SideDialogRoot({
 }
 
 const Button = React.forwardRef(
-  ({ className, variant = "outline", ...props }, ref) => {
+  ({ className, variant = "outline", isFaded, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -13313,7 +13318,8 @@ const Button = React.forwardRef(
             "bg-ui-primaryBtnBg text-ui-primaryBtnText hover:bg-surface6 leading-[0] font-semibold": variant === "primary",
             "min-h-[2rem]": variant === "ghost",
             "min-h-[2.5rem]": variant !== "ghost",
-            "border-[rgba(255,255,255,0.15)]": variant === "outline"
+            "border-[rgba(255,255,255,0.15)]": variant === "outline",
+            "opacity-40": isFaded
           }
         ),
         ...props
@@ -13323,6 +13329,21 @@ const Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
+const CombinedButtons = ({ className, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center  text-[0.75rem] border border-border1 rounded-lg overflow-hidden",
+        "[&>button]:border-0 [&>button:not(:first-child)]:border-l [&>button:not(:first-child)]:border-border1",
+        "[&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg",
+        className
+      ),
+      children
+    }
+  );
+};
+
 function MainContentLayout({
   children,
   className,
@@ -13496,16 +13517,13 @@ function SideDialogHeader({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-between items-center pb-[1rem]", className), children });
 }
 
-function SideDialogTop({ children, withTopSeparator, className }) {
+function SideDialogTop({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
         `flex h-[3.5rem] items-center text-icon5 text-[.875rem] pl-[1.5rem] relative gap-[1rem]`,
         '[&:after]:content-[""] [&:after]:absolute [&:after]:left-[1.5rem] [&:after]:right-[1.5rem] [&:after]:bottom-0 [&:after]:border-b [&:after]:border-border1',
-        {
-          '[&:before]:content-[""] [&:before]:absolute [&:before]:left-[1.5rem] [&:before]:right-[1.5rem] [&:before]:top-0 [&:before]:border-t [&:before]:border-border1': withTopSeparator
-        },
         className
       ),
       children
@@ -17729,7 +17747,8 @@ const formatHierarchicalSpans = (spans) => {
       latency: endDate ? endDate.getTime() - startDate.getTime() : 0,
       startTime: startDate.toISOString(),
       endTime: endDate ? endDate.toISOString() : void 0,
-      spans: []
+      spans: [],
+      parentSpanId: spanRecord.parentSpanId
     };
     spanMap.set(spanRecord.spanId, uiSpan);
   });
@@ -17768,198 +17787,410 @@ const formatHierarchicalSpans = (spans) => {
   return sortedRootSpans;
 };
 
-const spanTypePrefixes = ["agent", "workflow", "llm", "tool"];
+const spanTypePrefixes = ["agent", "workflow", "model", "tool", "other"];
 function getSpanTypeUi(type) {
   const typePrefix = type?.toLowerCase().split("_")[0];
   const spanTypeToUiElements = {
     agent: {
       icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}),
       color: "oklch(0.75 0.15 250)",
-      label: "Agent"
+      label: "Agent",
+      bgColor: "bg-oklch(0.75 0.15 250 / 0.1)",
+      typePrefix: "agent"
     },
     workflow: {
       icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, {}),
       color: "oklch(0.75 0.15 200)",
-      label: "Workflow"
+      label: "Workflow",
+      bgColor: "bg-oklch(0.75 0.15 200 / 0.1)",
+      typePrefix: "workflow"
     },
-    llm: {
+    model: {
       icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BrainIcon, {}),
       color: "oklch(0.75 0.15 320)",
-      label: "LLM"
+      label: "Model",
+      bgColor: "bg-oklch(0.75 0.15 320 / 0.1)",
+      typePrefix: "model"
     },
     tool: {
       icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, {}),
       color: "oklch(0.75 0.15 100)",
-      label: "Tool"
+      label: "Tool",
+      bgColor: "bg-oklch(0.75 0.15 100 / 0.1)",
+      typePrefix: "tool"
     }
   };
   if (typePrefix in spanTypeToUiElements) {
     return spanTypeToUiElements[typePrefix];
+  } else {
+    return {
+      typePrefix: "other"
+    };
   }
-  return null;
 }
 
-function TraceTimelineSpan({
+function getSpanDescendantIds(span) {
+  if (!span.spans || span.spans.length === 0) {
+    return [];
+  }
+  const descendantIds = [];
+  span.spans.forEach((childSpan) => {
+    descendantIds.push(childSpan.id);
+    descendantIds.push(...getSpanDescendantIds(childSpan));
+  });
+  return descendantIds;
+}
+
+function TimelineStructureSign({
+  isLastChild,
+  hasChildren = false,
+  expanded = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "w-[3rem] h-[2.8rem] relative opacity-100",
+        'after:content-[""] after:absolute after:left-[-1px] after:top-0 after:bottom-0 after:w-[0px] after:border-l-[1px] after:border-icon3 after:border-dashed ',
+        'before:content-[""] before:absolute before:left-0 before:top-[50%] before:w-full before:h-[0px] before:border-b-[1px] before:border-icon3 before:border-dashed',
+        "[&_svg]:transition-all",
+        "[&:hover_svg]:text-yellow-500 [&:hover_svg]:scale-[1.3] [&:hover_svg]:opacity-100",
+        {
+          "after:bottom-[50%]": isLastChild
+        }
+      ),
+      children: hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            "flex absolute left-[50%] top-[50%] translate-y-[-50%] translate-x-[-50%] items-center justify-center bg-surface2 p-[0.25rem]",
+            "[&>svg]:shrink-0 [&>svg]:opacity-60 [&>svg]:w-[0.8rem] [&>svg]:h-[0.8rem]"
+          ),
+          children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleChevronDownIcon, {})
+        }
+      )
+    }
+  );
+}
+
+function SpanTypeIcon({ icon, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "flex w-[1.1rem] h-[1.1rem] shrink-0 rounded-md  items-center justify-center",
+        "[&>svg]:w-[.9rem] [&>svg]:h-[.9rem] [&>svg]:text-surface2"
+      ),
+      style: { backgroundColor: color },
+      children: icon
+    }
+  );
+}
+
+function TimelineNameCol({
   span,
+  spanUI,
+  isFaded,
   depth = 0,
   onSpanClick,
   selectedSpanId,
   isLastChild,
+  hasChildren,
+  isRootSpan,
+  isExpanded,
+  toggleChildren
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-label": `View details for span ${span.name}`,
+      className: cn(
+        "rounded-md transition-colors flex opacity-80 min-h-[3rem] items-center rounded-l-lg",
+        "mt-[1rem] xl:mt-0",
+        {
+          "opacity-30 [&:hover]:opacity-60": isFaded,
+          "bg-surface4": selectedSpanId === span.id
+        }
+      ),
+      style: { paddingLeft: `${depth * 1.5}rem` },
+      children: [
+        !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => toggleChildren?.(),
+            disabled: !hasChildren,
+            className: cn({
+              "cursor-default": !hasChildren,
+              "cursor-pointer": hasChildren
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(TimelineStructureSign, { isLastChild, hasChildren: Boolean(hasChildren), expanded: isExpanded })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => onSpanClick?.(span.id),
+            className: cn(
+              "text-[0.875rem] flex items-center text-left break-all gap-[0.5rem] text-white w-full rounded-lg  h-full px-3 py-2 transition-colors",
+              "[&>svg]:transition-all [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:ml-auto",
+              "hover:bg-surface4 [&:hover>svg]:opacity-60"
+            ),
+            children: [
+              spanUI?.icon && /* @__PURE__ */ jsxRuntime.jsx(SpanTypeIcon, { icon: spanUI.icon, color: spanUI.color ? spanUI.color : void 0 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("p-0 px-1 rounded-md"), children: span.name }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, {})
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+function TimelineExpandCol({
+  isSelected,
+  isFaded,
+  isExpanded,
+  toggleChildren,
+  expandAllDescendants,
+  totalDescendants = 0,
+  allDescendantsExpanded,
+  numOfChildren
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end h-full px-3", {
+        "opacity-30 [&:hover]:opacity-60": isFaded,
+        "bg-surface4": isSelected
+      }),
+      children: numOfChildren && numOfChildren > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex  gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => toggleChildren?.(), children: [
+          allDescendantsExpanded ? totalDescendants : numOfChildren,
+          " ",
+          isExpanded ? allDescendantsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
+        ] }),
+        totalDescendants > numOfChildren && !allDescendantsExpanded && /* @__PURE__ */ jsxRuntime.jsxs(ExpandButton, { onClick: () => expandAllDescendants?.(), children: [
+          totalDescendants,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownIcon, {})
+        ] })
+      ] }) : null
+    }
+  );
+}
+function ExpandButton({ onClick, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: cn("h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-[0.1rem] text-[0.75rem] text-icon5 border border-border1 pl-2 pr-1 rounded-lg transition-all",
+        "hover:text-yellow-500",
+        "[&>svg]:shrink-0 [&>svg]:opacity-80 [&>svg]:w-[1rem] [&>svg]:h-[1rem] [&>svg]:transition-all"
+      ),
+      children
+    }
+  ) });
+}
+
+function TimelineTimingCol({
+  span,
+  selectedSpanId,
+  isFaded,
   overallLatency,
   overallStartTime,
-  overallEndTime
+  color
 }) {
   const { Link } = useLinkComponent();
-  const [isHovered, setIsHovered] = React.useState(false);
-  const hasChildren = span.spans && span.spans.length > 0;
-  const isRootSpan = depth === 0;
   const percentageSpanLatency = overallLatency ? Math.ceil(span.latency / overallLatency * 100) : 0;
   const overallStartTimeDate = overallStartTime ? new Date(overallStartTime) : null;
   const spanStartTimeDate = span.startTime ? new Date(span.startTime) : null;
   const spanStartTimeShift = spanStartTimeDate && overallStartTimeDate ? spanStartTimeDate.getTime() - overallStartTimeDate.getTime() : 0;
   const percentageSpanStartTime = overallLatency && Math.floor(spanStartTimeShift / overallLatency * 100);
-  const spanUI = getSpanTypeUi(span?.type);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+  return /* @__PURE__ */ jsxRuntime.jsxs(HoverCard__namespace.Root, { openDelay: 250, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      HoverCard__namespace.Trigger,
       {
-        onClick: () => onSpanClick?.(span.id),
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
-        type: "button",
-        "aria-label": `View details for span ${span.name}`,
         className: cn(
-          "rounded-md transition-colors cursor-pointer flex py-[0.5rem] opacity-80 min-h-[3.5rem]",
-          "mt-[1rem] xl:mt-0",
+          "h-[3rem] p-[0.5rem] grid grid-cols-[1fr_auto] gap-4 items-center cursor-help pr-3 rounded-r-lg col-span-2 xl:col-span-1",
+          "[&:hover>div]:bg-surface5",
           {
-            "bg-icon1/30 text-white": selectedSpanId === span.id,
-            "bg-icon1/10 opacity-100": isHovered
+            "opacity-30 [&:hover]:opacity-60": isFaded,
+            "bg-surface4": selectedSpanId === span.id
           }
         ),
-        style: { paddingLeft: `${depth * 1.4}rem` },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] w-full", children: [
-          !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx(TreePositionMark, { isLastChild, hasChildren: Boolean(hasChildren) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-[0.875rem] flex items-center text-left break-all gap-[0.5rem] text-[#fff]  w-full"), children: [
-            spanUI?.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0", style: { color: spanUI?.color }, children: spanUI?.icon }),
-            span.name
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full p-[0.6rem] rounded-lg bg-surface4 transition-colors duration-[1s]"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-[0.4rem] rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("bg-icon1 absolute rounded-sm h-[0.4rem] top-0"),
+              style: {
+                width: percentageSpanLatency ? `${percentageSpanLatency}%` : "2px",
+                left: `${percentageSpanStartTime || 0}%`,
+                backgroundColor: color
+              }
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-end text-icon3 text-[0.75rem]"), children: [
+            (span.latency / 1e3).toFixed(3),
+            " s"
           ] })
-        ] })
+        ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(HoverCard__namespace.Root, { openDelay: 250, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        HoverCard__namespace.Trigger,
-        {
-          className: cn(
-            "rounded-md transition-colors content-center cursor-help grid min-h-[3.5rem] opacity-80 px-[2.5rem] items-center relative",
-            "bg-surface2 xl:bg-surface3",
-            'xl:last-of-type:before:content-[""] last-of-type:before:absolute last-of-type:before:bottom-[-1rem] last-of-type:before:h-[1rem] last-of-type:before:w-full last-of-type:before:bg-surface3',
-            'xl:first-of-type:before:content-[""] first-of-type:before:absolute first-of-type:before:top-[-1rem] first-of-type:before:h-[1rem] first-of-type:before:w-full first-of-type:before:bg-surface3',
+    /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      HoverCard__namespace.Content,
+      {
+        className: "z-[100] w-auto max-w-[25rem] rounded-md bg-[#222] p-[.5rem] px-[1rem] pr-[1.5rem] text-[.75rem] text-icon5 text-center border border-border1",
+        sideOffset: 5,
+        side: "top",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              "bg-icon1/10 xl:bg-icon1/10 opacity-100": isHovered
+              className: cn(
+                "text-[0.875rem] flex items-center gap-[0.5rem] mb-[1rem]",
+                "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0 [&>svg]:opacity-50"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TimerIcon, {}),
+                " Span Timing"
+              ]
             }
           ),
-          onMouseEnter: () => setIsHovered(true),
-          onMouseLeave: () => setIsHovered(false),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-left text-[0.75rem] relative w-full h-[1.4rem] min-w-[6rem]", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: cn(
-                  "absolute flex pt-[0.1rem] items-center gap-[0.5rem] text-icon5",
-                  "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0 [&>svg]:opacity-50 mb-[0.1em] [&>svg]:mb-[0.1rem]"
-                ),
-                style: { width: `${percentageSpanLatency}%`, left: `${percentageSpanStartTime}%` },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRight, {}),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "span",
-                    {
-                      style: {
-                        transform: percentageSpanStartTime && percentageSpanStartTime > 70 ? "translateX(calc((100% + 2rem) * -1))" : "none"
-                      },
-                      children: [
-                        (span.latency / 1e3).toFixed(3),
-                        " s"
-                      ]
-                    }
-                  )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full bg-surface5  h-[3px] ", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn("bg-icon1 h-full absolute rounded-full"),
-                style: {
-                  width: percentageSpanLatency ? `${percentageSpanLatency}%` : "2px",
-                  left: `${percentageSpanStartTime}%`,
-                  backgroundColor: spanUI?.color
+          /* @__PURE__ */ jsxRuntime.jsx(
+            KeyValueList,
+            {
+              className: " [&>dd]:text-[0.875rem] [&>dt]:text-[0.875rem] [&>dt]:min-h-0 [&>dd]:min-h-0",
+              data: [
+                {
+                  key: "Latency",
+                  label: "Latency",
+                  value: `${span.latency} ms`,
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightIcon, {})
+                },
+                {
+                  key: "startTime",
+                  label: "Started at",
+                  value: span.startTime ? format.format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronFirstIcon, {})
+                },
+                {
+                  key: "endTime",
+                  label: "Ended at",
+                  value: span.endTime ? format.format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLastIcon, {})
+                },
+                {
+                  key: "startShift",
+                  label: "Start Shift",
+                  value: `${spanStartTimeShift}ms`,
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
                 }
-              }
-            ) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        HoverCard__namespace.Content,
-        {
-          className: "z-[100] w-auto max-w-[25rem] rounded-md bg-[#222] p-[.5rem] px-[1rem] pr-[1.5rem] text-[.75rem] text-icon5 text-center border border-border1",
-          sideOffset: 5,
-          side: "top",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn(
-                  "text-[0.875rem] flex items-center gap-[0.5rem] mb-[1rem]",
-                  "[&>svg]:w-[1.25em] [&>svg]:h-[1.25em] [&>svg]:shrink-0 [&>svg]:opacity-50"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TimerIcon, {}),
-                  " Span Timing"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              KeyValueList,
-              {
-                className: " [&>dd]:text-[0.875rem] [&>dt]:text-[0.875rem] [&>dt]:min-h-0 [&>dd]:min-h-0",
-                data: [
-                  {
-                    key: "Latency",
-                    label: "Latency",
-                    value: `${span.latency} ms`,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightIcon, {})
-                  },
-                  {
-                    key: "startTime",
-                    label: "Started at",
-                    value: span.startTime ? format.format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-",
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronFirstIcon, {})
-                  },
-                  {
-                    key: "endTime",
-                    label: "Ended at",
-                    value: span.endTime ? format.format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-",
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLastIcon, {})
-                  },
-                  {
-                    key: "startShift",
-                    label: "Start Shift",
-                    value: `${spanStartTimeShift}ms`,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
-                  }
-                ],
-                LinkComponent: Link
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Arrow, { className: "fill-surface5" })
-          ]
-        }
-      ) })
-    ] }),
-    hasChildren && span.spans?.map((childSpan, idx, array) => {
+              ],
+              LinkComponent: Link
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Arrow, { className: "fill-surface5" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+function TraceTimelineSpan({
+  span,
+  depth = 0,
+  onSpanClick,
+  selectedSpanId,
+  isLastChild,
+  overallLatency,
+  overallStartTime,
+  overallEndTime,
+  fadedTypes,
+  searchPhrase,
+  featuredSpanIds,
+  expandedSpanIds,
+  setExpandedSpanIds
+}) {
+  const hasChildren = span.spans && span.spans.length > 0;
+  const numOfChildren = span.spans ? span.spans.length : 0;
+  const allDescendantIds = getSpanDescendantIds(span);
+  const totalDescendants = allDescendantIds.length;
+  const isRootSpan = depth === 0;
+  const spanUI = getSpanTypeUi(span?.type);
+  const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;
+  const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;
+  const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix || "") : false;
+  const isFaded = isFadedByType || isFadedBySearch;
+  React.useEffect(() => {
+    isRootSpan && setExpandedSpanIds?.([span.id]);
+  }, [isRootSpan, span.id, setExpandedSpanIds]);
+  React.useEffect(() => {
+    if (!featuredSpanIds || !span.spans || span.spans.length === 0) return;
+    const hasFeaturedChildren = span.spans.some((childSpan) => featuredSpanIds.includes(childSpan.id));
+    if (!isExpanded && hasFeaturedChildren) {
+      toggleChildren();
+    }
+  }, [featuredSpanIds, span.spans, span.id, isExpanded, setExpandedSpanIds, expandedSpanIds]);
+  const toggleChildren = () => {
+    if (!setExpandedSpanIds || !expandedSpanIds) return;
+    if (isExpanded) {
+      const idsToRemove = [span.id, ...allDescendantIds];
+      setExpandedSpanIds(expandedSpanIds.filter((id) => !idsToRemove.includes(id)));
+    } else {
+      setExpandedSpanIds([...expandedSpanIds, span.id]);
+    }
+  };
+  const expandAllDescendants = () => {
+    if (!setExpandedSpanIds || !expandedSpanIds) return;
+    setExpandedSpanIds([...expandedSpanIds, span.id, ...allDescendantIds]);
+  };
+  const allDescendantsExpanded = allDescendantIds.every((id) => expandedSpanIds?.includes(id));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineNameCol,
+      {
+        span,
+        spanUI,
+        isFaded,
+        depth,
+        onSpanClick,
+        selectedSpanId,
+        isLastChild,
+        hasChildren,
+        isRootSpan,
+        isExpanded,
+        toggleChildren
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineExpandCol,
+      {
+        isSelected: selectedSpanId === span.id,
+        isFaded,
+        isExpanded,
+        toggleChildren,
+        expandAllDescendants,
+        expandedSpanIds,
+        totalDescendants,
+        allDescendantsExpanded,
+        numOfChildren
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineTimingCol,
+      {
+        span,
+        selectedSpanId,
+        isFaded,
+        overallLatency,
+        overallStartTime,
+        overallEndTime,
+        color: spanUI?.color
+      }
+    ),
+    hasChildren && isExpanded && span.spans?.map((childSpan, idx, array) => {
       const isLastChild2 = idx === array.length - 1;
       return /* @__PURE__ */ jsxRuntime.jsx(
         TraceTimelineSpan,
@@ -17970,31 +18201,29 @@ function TraceTimelineSpan({
           selectedSpanId,
           isLastChild: isLastChild2,
           overallLatency,
-          overallStartTime
+          overallStartTime,
+          fadedTypes,
+          searchPhrase,
+          expandedSpanIds,
+          setExpandedSpanIds,
+          featuredSpanIds
         },
         childSpan.id
       );
     })
   ] });
 }
-function TreePositionMark({ isLastChild, hasChildren = false }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "w-[1.5rem] h-[2.2rem] relative opacity-50 ",
-        'after:content-[""] after:absolute after:left-0 after:top-0 after:bottom-0 after:w-[0px] after:border-r-[0.5px] after:border-white after:border-dashed',
-        'before:content-[""] before:absolute before:left-0  before:top-[50%] before:w-full before:h-[0px] before:border-b-[0.5px] before:border-white before:border-dashed',
-        {
-          "after:bottom-[50%]": isLastChild
-        }
-      ),
-      children: hasChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-[1px] top-[50%] bottom-0 w-[0px]  border-r-[0.5px] border-white border-dashed" })
-    }
-  );
-}
 
-function TraceTimeline({ hierarchicalSpans = [], onSpanClick, selectedSpanId, isLoading }) {
+function TraceTimeline({
+  hierarchicalSpans = [],
+  onSpanClick,
+  selectedSpanId,
+  isLoading,
+  fadedTypes,
+  expandedSpanIds,
+  setExpandedSpanIds,
+  featuredSpanIds
+}) {
   const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
   const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
   const overallEndTime = hierarchicalSpans?.[0]?.endTime || "";
@@ -18013,10 +18242,13 @@ function TraceTimeline({ hierarchicalSpans = [], onSpanClick, selectedSpanId, is
   ) : /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: cn("grid items-start content-start gap-y-[2px] overflow-hidden", "xl:gap-x-[1rem] xl:py-[1rem]", {
-        "xl:grid-cols-[3fr_auto]": !overallEndTime,
-        "xl:grid-cols-[3fr_2fr]": overallEndTime
-      }),
+      className: cn(
+        "grid items-start content-start gap-y-[2px] overflow-hidden grid-cols-[1fr_auto] xl:py-[1rem]",
+        {
+          "xl:grid-cols-[1fr_auto_auto]": !overallEndTime,
+          "xl:grid-cols-[2fr_auto_1fr]": overallEndTime
+        }
+      ),
       children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
         TraceTimelineSpan,
         {
@@ -18025,7 +18257,11 @@ function TraceTimeline({ hierarchicalSpans = [], onSpanClick, selectedSpanId, is
           selectedSpanId,
           overallLatency,
           overallStartTime,
-          overallEndTime
+          overallEndTime,
+          fadedTypes,
+          featuredSpanIds,
+          expandedSpanIds,
+          setExpandedSpanIds
         },
         span.id
       ))
@@ -18033,19 +18269,235 @@ function TraceTimeline({ hierarchicalSpans = [], onSpanClick, selectedSpanId, is
   ) });
 }
 
-function TraceTimelineLegend({ spans = [] }) {
-  const activeSpanTypes = spanTypePrefixes.filter(
-    (typePrefix) => spans.some((span) => span?.spanType?.startsWith(typePrefix))
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-start gap-[2rem] mb-2 text-[0.75rem] opacity-90"), children: activeSpanTypes.map((item) => {
-    const spanUI = getSpanTypeUi(item);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-[.5rem]"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("[&>svg]:w-[1.2em] [&>svg]:h-[1.2em]"), style: { color: spanUI?.color }, children: spanUI?.icon && spanUI.icon }),
-      spanUI?.label
-    ] }, item);
-  }) });
+function TraceTimelineTools({
+  spans = [],
+  fadedTypes,
+  onLegendClick,
+  onLegendReset,
+  onSearchPhraseChange,
+  traceId
+}) {
+  const [localSearchPhrase, setLocalSearchPhrase] = React.useState("");
+  React.useEffect(() => {
+    setLocalSearchPhrase("");
+  }, [traceId]);
+  const usedSpanTypes = spanTypePrefixes.filter((typePrefix) => spans.some((span) => span?.spanType?.startsWith(typePrefix))) || [];
+  const hasOtherSpanTypes = spans.some((span) => {
+    const isKnownType = spanTypePrefixes.some((typePrefix) => span?.spanType?.startsWith(typePrefix));
+    return !isKnownType;
+  });
+  const handleToggle = (type) => {
+    onLegendClick?.(type);
+  };
+  React.useEffect(() => {
+    handleSearchPhraseChange(localSearchPhrase);
+  }, [localSearchPhrase, onSearchPhraseChange]);
+  const handleSearchPhraseChange = useDebounce.useThrottledCallback((value) => {
+    onSearchPhraseChange?.(value);
+  }, 1e3);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+      SearchField,
+      {
+        value: localSearchPhrase,
+        onChange: (e) => {
+          setLocalSearchPhrase(e.target.value);
+        },
+        label: "Find span by name",
+        placeholder: "Look for span name",
+        onReset: () => setLocalSearchPhrase("")
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CombinedButtons, { children: [
+      usedSpanTypes.map((item, idx) => {
+        const spanUI = getSpanTypeUi(item);
+        const isFaded = fadedTypes?.includes(item);
+        return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            onClick: () => handleToggle(item),
+            isFaded,
+            style: { color: !isFaded ? spanUI?.color : void 0, backgroundColor: spanUI?.bgColor },
+            children: [
+              spanUI?.icon && spanUI.icon,
+              spanUI?.label
+            ]
+          }
+        ) }, item);
+      }),
+      hasOtherSpanTypes && /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          onClick: () => handleToggle("other"),
+          isFaded: fadedTypes?.includes("other"),
+          style: { color: !fadedTypes?.includes("other") ? void 0 : void 0, backgroundColor: void 0 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashedIcon, {}),
+            "Other"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onLegendReset, disabled: fadedTypes?.length === 0, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) })
+    ] })
+  ] });
 }
 
+function useTraceInfo(trace) {
+  const { paths } = useLinkComponent();
+  if (!trace) {
+    return [];
+  }
+  const agentsLink = paths.agentsLink();
+  const workflowsLink = paths.workflowsLink();
+  const agentLink = paths.agentLink(trace?.metadata?.resourceId);
+  const workflowLink = paths.workflowLink(trace?.attributes?.workflowId);
+  return [
+    {
+      key: "entityId",
+      label: "Entity Id",
+      value: [
+        {
+          id: trace?.metadata?.resourceId,
+          name: trace?.attributes?.agentId || trace?.attributes?.workflowId || "-",
+          path: trace?.attributes?.agentId ? agentLink : trace?.attributes?.workflowId ? workflowLink : void 0
+        }
+      ]
+    },
+    {
+      key: "entityType",
+      label: "Entity Type",
+      value: [
+        {
+          id: trace?.attributes?.agentId || trace?.attributes?.workflowId,
+          name: trace?.attributes?.agentId ? "Agent" : trace?.attributes?.workflowId ? "Workflow" : "-",
+          path: trace?.attributes?.agentId ? agentsLink : trace?.attributes?.workflowId ? workflowsLink : void 0
+        }
+      ]
+    },
+    {
+      key: "status",
+      label: "Status",
+      value: trace?.attributes?.status || "-"
+    },
+    {
+      key: "startedAt",
+      label: "Started at",
+      value: trace?.startedAt ? dateFns.format(new Date(trace?.startedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
+    },
+    {
+      key: "endedAt",
+      label: "Ended at",
+      value: trace?.endedAt ? dateFns.format(new Date(trace?.endedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
+    }
+  ];
+}
+function getSpanInfo({ span }) {
+  if (!span) {
+    return [];
+  }
+  const baseInfo = [
+    {
+      key: "spanType",
+      label: "Span Type",
+      value: span?.spanType
+    },
+    {
+      key: "startedAt",
+      label: "Started At",
+      value: span?.startedAt ? dateFns.format(new Date(span.startedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
+    },
+    {
+      key: "endedAt",
+      label: "Ended At",
+      value: span?.endedAt ? dateFns.format(new Date(span.endedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
+    }
+  ];
+  if (span?.attributes?.finishReason) {
+    baseInfo.push({
+      key: "finishReason",
+      label: "Finish Reason",
+      value: span.attributes.finishReason
+    });
+  }
+  return baseInfo;
+}
+
+const TabsRoot = ({
+  children,
+  defaultTab,
+  value,
+  onValueChange,
+  className
+}) => {
+  const [internalTab, setInternalTab] = React.useState(defaultTab);
+  const isControlled = value !== void 0 && onValueChange !== void 0;
+  const currentTab = isControlled ? value : internalTab;
+  const handleTabChange = (newValue) => {
+    const typedValue = newValue;
+    if (isControlled) {
+      onValueChange(typedValue);
+    } else {
+      setInternalTab(typedValue);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Root,
+    {
+      value: currentTab,
+      onValueChange: handleTabChange,
+      className: cn("grid gap-8 overflow-y-auto", className),
+      children
+    }
+  );
+};
+
+const TabList = ({ children, variant = "default", className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      className: cn(
+        "flex items-center",
+        {
+          // variant: default
+          "text-[0.9375rem]": variant === "default",
+          "[&>button]:py-[0.5rem] [&>button]:px-[1.5rem] [&>button]:font-normal [&>button]:text-icon3 [&>button]:flex-1 [&>button]:border-b [&>button]:border-border1": variant === "default",
+          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:transition-colors [&>button[data-state=active]]:duration-200 [&>button[data-state=active]]:border-icon3": variant === "default",
+          // variant: buttons
+          "border border-border1 flex justify-stretch rounded-md overflow-hidden text-[0.875rem] min-h-[2.5rem]": variant === "buttons",
+          "[&>button]:flex-1 [&>button]:py-[0.5rem] [&>button]:px-[1rem] [&>button]:text-icon3": variant === "buttons",
+          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:bg-[#222]": variant === "buttons"
+        },
+        className
+      ),
+      children
+    }
+  ) });
+};
+
+const Tab = ({ children, value, onClick, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, className: cn("hover:text-icon5", className), onClick, children });
+};
+
+const TabContent = ({ children, value, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
+    {
+      value,
+      className: cn(
+        "grid overflow-y-auto ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:none",
+        className
+      ),
+      children
+    }
+  );
+};
+
+const Tabs = Object.assign(TabsRoot, {
+  List: TabList,
+  Tab,
+  Content: TabContent
+});
+
 function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
   if (!traceUsage && !spanUsage) {
     console.warn("No usage data available");
@@ -18208,169 +18660,6 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
   )) });
 }
 
-function useTraceInfo(trace) {
-  const { paths } = useLinkComponent();
-  if (!trace) {
-    return [];
-  }
-  const agentsLink = paths.agentsLink();
-  const workflowsLink = paths.workflowsLink();
-  const agentLink = paths.agentLink(trace?.metadata?.resourceId);
-  const workflowLink = paths.workflowLink(trace?.attributes?.workflowId);
-  return [
-    {
-      key: "entityId",
-      label: "Entity Id",
-      value: [
-        {
-          id: trace?.metadata?.resourceId,
-          name: trace?.attributes?.agentId || trace?.attributes?.workflowId || "-",
-          path: trace?.attributes?.agentId ? agentLink : trace?.attributes?.workflowId ? workflowLink : void 0
-        }
-      ]
-    },
-    {
-      key: "entityType",
-      label: "Entity Type",
-      value: [
-        {
-          id: trace?.attributes?.agentId || trace?.attributes?.workflowId,
-          name: trace?.attributes?.agentId ? "Agent" : trace?.attributes?.workflowId ? "Workflow" : "-",
-          path: trace?.attributes?.agentId ? agentsLink : trace?.attributes?.workflowId ? workflowsLink : void 0
-        }
-      ]
-    },
-    {
-      key: "status",
-      label: "Status",
-      value: trace?.attributes?.status || "-"
-    },
-    {
-      key: "startedAt",
-      label: "Started at",
-      value: trace?.startedAt ? dateFns.format(new Date(trace?.startedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
-    },
-    {
-      key: "endedAt",
-      label: "Ended at",
-      value: trace?.endedAt ? dateFns.format(new Date(trace?.endedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
-    }
-  ];
-}
-function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
-  if (!span) {
-    return [];
-  }
-  const baseInfo = [
-    {
-      key: "spanType",
-      label: "Span Type",
-      value: span?.spanType
-    },
-    {
-      key: "startedAt",
-      label: "Started At",
-      value: span?.startedAt ? dateFns.format(new Date(span.startedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
-    },
-    {
-      key: "endedAt",
-      label: "Ended At",
-      value: span?.endedAt ? dateFns.format(new Date(span.endedAt), "MMM dd, h:mm:ss.SSS aaa") : "-"
-    }
-  ];
-  if (span?.attributes?.finishReason) {
-    baseInfo.push({
-      key: "finishReason",
-      label: "Finish Reason",
-      value: span.attributes.finishReason
-    });
-  }
-  if (withSpanId) {
-    baseInfo.unshift({
-      key: "spanId",
-      label: "#",
-      value: span?.spanId
-    });
-  }
-  return baseInfo;
-}
-
-const TabsRoot = ({
-  children,
-  defaultTab,
-  value,
-  onValueChange,
-  className
-}) => {
-  const [internalTab, setInternalTab] = React.useState(defaultTab);
-  const isControlled = value !== void 0 && onValueChange !== void 0;
-  const currentTab = isControlled ? value : internalTab;
-  const handleTabChange = (newValue) => {
-    const typedValue = newValue;
-    if (isControlled) {
-      onValueChange(typedValue);
-    } else {
-      setInternalTab(typedValue);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TabsPrimitive__namespace.Root,
-    {
-      value: currentTab,
-      onValueChange: handleTabChange,
-      className: cn("grid gap-[3rem] overflow-y-auto", className),
-      children
-    }
-  );
-};
-
-const TabList = ({ children, variant = "default", className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-    TabsPrimitive__namespace.List,
-    {
-      className: cn(
-        "flex items-center",
-        {
-          // variant: default
-          "text-[0.9375rem]": variant === "default",
-          "[&>button]:py-[0.5rem] [&>button]:px-[1.5rem] [&>button]:font-normal [&>button]:text-icon3 [&>button]:flex-1 [&>button]:border-b [&>button]:border-border1": variant === "default",
-          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:transition-colors [&>button[data-state=active]]:duration-200 [&>button[data-state=active]]:border-icon3": variant === "default",
-          // variant: buttons
-          "border border-border1 flex justify-stretch rounded-md overflow-hidden text-[0.875rem] min-h-[2.5rem]": variant === "buttons",
-          "[&>button]:flex-1 [&>button]:py-[0.5rem] [&>button]:px-[1rem] [&>button]:text-icon3": variant === "buttons",
-          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:bg-[#222]": variant === "buttons"
-        },
-        className
-      ),
-      children
-    }
-  ) });
-};
-
-const Tab = ({ children, value, onClick, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, className: cn("hover:text-icon5", className), onClick, children });
-};
-
-const TabContent = ({ children, value, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TabsPrimitive__namespace.Content,
-    {
-      value,
-      className: cn(
-        "grid overflow-y-auto ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:none",
-        className
-      ),
-      children
-    }
-  );
-};
-
-const Tabs = Object.assign(TabsRoot, {
-  List: TabList,
-  Tab,
-  Content: TabContent
-});
-
 function isTokenLimitExceeded(span) {
   return span?.attributes?.finishReason === "length";
 }
@@ -18447,7 +18736,9 @@ function SpanTabs({
   spanInfo = [],
   defaultActiveTab = "details",
   initialScoreId,
-  computeTraceLink
+  computeTraceLink,
+  scorers,
+  isLoadingScorers
 }) {
   const { Link } = useLinkComponent();
   let entityType;
@@ -18481,7 +18772,9 @@ function SpanTabs({
             traceId: trace?.traceId,
             isTopLevelSpan: span?.parentSpanId === null,
             spanId: span?.spanId,
-            entityType
+            entityType,
+            scorers,
+            isLoadingScorers
           }
         )
       ] }),
@@ -18521,7 +18814,9 @@ function SpanDialog({
   spanInfo = [],
   defaultActiveTab = "details",
   initialScoreId,
-  computeTraceLink
+  computeTraceLink,
+  scorers,
+  isLoadingScorers
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SideDialog,
@@ -18574,7 +18869,9 @@ function SpanDialog({
               spanInfo,
               defaultActiveTab,
               initialScoreId,
-              computeTraceLink
+              computeTraceLink,
+              scorers,
+              isLoadingScorers
             }
           )
         ] })
@@ -18592,12 +18889,12 @@ function TraceDialog({
   onNext,
   onPrevious,
   isLoadingSpans,
-  computeAgentsLink,
-  computeWorkflowsLink,
   computeTraceLink,
   initialSpanId,
   initialSpanTab,
-  initialScoreId
+  initialScoreId,
+  scorers,
+  isLoadingScorers
 }) {
   const { Link, navigate } = useLinkComponent();
   const [dialogIsOpen, setDialogIsOpen] = React.useState(Boolean(initialSpanId));
@@ -18607,6 +18904,19 @@ function TraceDialog({
   const selectedSpan = traceSpans.find((span) => span.spanId === selectedSpanId);
   const traceInfo = useTraceInfo(traceDetails);
   const [spanScoresPage, setSpanScoresPage] = React.useState(0);
+  const [searchPhrase, setSearchPhrase] = React.useState("");
+  const [fadedSpanTypes, setFadedSpanTypes] = React.useState([]);
+  const [featuredSpanIds, setFeaturedSpanIds] = React.useState([]);
+  const [expandedSpanIds, setExpandedSpanIds] = React.useState([]);
+  React.useEffect(() => {
+    if (searchPhrase.trim() === "") {
+      setFeaturedSpanIds([]);
+      return;
+    }
+    const lowerCaseSearch = searchPhrase.toLowerCase();
+    const newFeaturedSpanIds = traceSpans.filter((span) => span.name.toLowerCase().includes(lowerCaseSearch)).map((span) => span.spanId);
+    setFeaturedSpanIds(newFeaturedSpanIds);
+  }, [searchPhrase]);
   React.useEffect(() => {
     if (initialSpanId) {
       setSelectedSpanId(initialSpanId);
@@ -18641,9 +18951,13 @@ function TraceDialog({
     page: spanScoresPage
   });
   const handleSpanClick = (id) => {
-    setSelectedSpanId(id);
-    setSpanDialogDefaultTab("details");
-    setDialogIsOpen(true);
+    if (selectedSpanId === id) {
+      setSelectedSpanId(void 0);
+    } else {
+      setSelectedSpanId(id);
+      setSpanDialogDefaultTab("details");
+      setDialogIsOpen(true);
+    }
   };
   const handleToScoring = () => {
     setSelectedSpanId(hierarchicalSpans[0]?.id);
@@ -18664,9 +18978,53 @@ function TraceDialog({
       );
     }
   };
-  const selectedSpanInfo = getSpanInfo({ span: selectedSpan, withTraceId: !combinedView, withSpanId: combinedView });
-  const toNextSpan = getToNextEntryFn({ entries: flatSpans, id: selectedSpanId, update: setSelectedSpanId });
-  const toPreviousSpan = getToPreviousEntryFn({ entries: flatSpans, id: selectedSpanId, update: setSelectedSpanId });
+  const handleLegendClick = (type) => {
+    setFadedSpanTypes((prev) => {
+      if (prev.includes(type)) {
+        return prev.filter((t) => t !== type);
+      } else {
+        return [...prev, type];
+      }
+    });
+  };
+  const handleLegendReset = () => {
+    setFadedSpanTypes([]);
+  };
+  const selectedSpanInfo = getSpanInfo({ span: selectedSpan });
+  const getVisibleSpans = () => {
+    const visibleSpans = [];
+    const collectVisibleSpans = (spans, parentId) => {
+      spans.forEach((span) => {
+        const isVisible = !parentId || parentId === null || expandedSpanIds.includes(parentId);
+        if (isVisible) {
+          visibleSpans.push(span);
+          if (expandedSpanIds.includes(span.id) && span.spans) {
+            collectVisibleSpans(span.spans, span.id);
+          }
+        }
+      });
+    };
+    collectVisibleSpans(hierarchicalSpans);
+    return visibleSpans;
+  };
+  const toNextSpan = () => {
+    if (!selectedSpanId) return void 0;
+    const visibleSpans = getVisibleSpans();
+    const currentIndex = visibleSpans.findIndex((span) => span.id === selectedSpanId);
+    if (currentIndex >= 0 && currentIndex < visibleSpans.length - 1) {
+      return () => setSelectedSpanId(visibleSpans[currentIndex + 1].id);
+    }
+    return void 0;
+  };
+  const toPreviousSpan = () => {
+    if (!selectedSpanId) return void 0;
+    const visibleSpans = getVisibleSpans();
+    const currentIndex = visibleSpans.findIndex((span) => span.id === selectedSpanId);
+    if (currentIndex > 0) {
+      return () => setSelectedSpanId(visibleSpans[currentIndex - 1].id);
+    }
+    return void 0;
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       SideDialog,
@@ -18728,57 +19086,66 @@ function TraceDialog({
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(Section.Header, { children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, {}),
-                          " Timeline"
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx(TraceTimelineLegend, { spans: traceSpans })
-                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Section.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, {}),
+                        " Timeline"
+                      ] }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TraceTimelineTools,
+                        {
+                          spans: traceSpans,
+                          fadedTypes: fadedSpanTypes,
+                          onLegendClick: handleLegendClick,
+                          onLegendReset: handleLegendReset,
+                          searchPhrase,
+                          onSearchPhraseChange: setSearchPhrase,
+                          traceId
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         TraceTimeline,
                         {
                           hierarchicalSpans,
                           onSpanClick: handleSpanClick,
                           selectedSpanId,
-                          isLoading: isLoadingSpans
+                          isLoading: isLoadingSpans,
+                          fadedTypes: fadedSpanTypes,
+                          expandedSpanIds,
+                          setExpandedSpanIds,
+                          featuredSpanIds
                         }
                       )
                     ] })
                   ] })
                 ] }),
-                selectedSpan && combinedView && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-rows-[auto_1fr] relative overflow-y-auto", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { withTopSeparator: true, children: [
+                selectedSpan && combinedView && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-rows-[auto_1fr] relative overflow-y-auto rounded-xl mx-[2rem] mb-[2rem] bg-surface4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
                       " ",
                       getShortId(selectedSpanId)
                     ] }),
                     "|",
-                    /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext: toNextSpan, onPrevious: toPreviousSpan }),
+                    /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext: toNextSpan(), onPrevious: toPreviousSpan() }),
                     /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "ml-auto mr-[2rem]", onClick: () => setCombinedView(false), children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {}),
                       " ",
                       /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Switch to dialog view" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-full overflow-y-auto grid gap-[2rem] grid-cols-[20rem_1fr]"), children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto grid content-start p-[2rem] gap-[2rem]", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { as: "h2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
-                        " ",
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full overflow-y-auto pb-[2rem] pl-[2rem]"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto pr-[2rem] pt-[2rem] h-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Header, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
                         selectedSpan?.name
                       ] }),
-                      selectedSpan?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(
-                        TraceSpanUsage,
-                        {
-                          spanUsage: selectedSpan.attributes.usage,
-                          className: "xl:grid-cols-1 xl:gap-[1rem]"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: selectedSpanInfo, LinkComponent: Link })
+                      /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
+                        " ",
+                        selectedSpanId
+                      ] })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto pr-[2rem] pt-[2rem] h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       SpanTabs,
                       {
                         trace: traceDetails,
@@ -18791,8 +19158,8 @@ function TraceDialog({
                         initialScoreId,
                         computeTraceLink
                       }
-                    ) })
-                  ] })
+                    )
+                  ] }) })
                 ] })
               ]
             }
@@ -18812,15 +19179,16 @@ function TraceDialog({
         onClose: () => {
           navigate(computeTraceLink(traceId || ""));
           setDialogIsOpen(false);
-          setSelectedSpanId(void 0);
         },
-        onNext: toNextSpan,
-        onPrevious: toPreviousSpan,
+        onNext: toNextSpan(),
+        onPrevious: toPreviousSpan(),
         onViewToggle: () => setCombinedView(!combinedView),
         spanInfo: selectedSpanInfo,
         defaultActiveTab: spanDialogDefaultTab,
         initialScoreId,
-        computeTraceLink
+        computeTraceLink,
+        scorers,
+        isLoadingScorers
       }
     )
   ] });
@@ -19080,8 +19448,14 @@ const useTriggerScorer = () => {
   });
 };
 
-const SpanScoring = ({ traceId, spanId, entityType, isTopLevelSpan }) => {
-  const { data: scorers = {}, isLoading, error } = useScorers();
+const SpanScoring = ({
+  traceId,
+  spanId,
+  entityType,
+  isTopLevelSpan,
+  scorers,
+  isLoadingScorers
+}) => {
   const [selectedScorer, setSelectedScorer] = React.useState(null);
   const { mutate: triggerScorer, isPending, isSuccess } = useTriggerScorer();
   const [notificationIsVisible, setNotificationIsVisible] = React.useState(false);
@@ -19090,7 +19464,7 @@ const SpanScoring = ({ traceId, spanId, entityType, isTopLevelSpan }) => {
       setNotificationIsVisible(true);
     }
   }, [isSuccess]);
-  let scorerList = Object.entries(scorers).map(([key, scorer]) => ({
+  let scorerList = Object.entries(scorers || {}).map(([key, scorer]) => ({
     id: key,
     name: scorer.scorer.config.name,
     description: scorer.scorer.config.description,
@@ -19100,7 +19474,7 @@ const SpanScoring = ({ traceId, spanId, entityType, isTopLevelSpan }) => {
   if (entityType !== "Agent" || !isTopLevelSpan) {
     scorerList = scorerList.filter((scorer) => scorer.type !== "agent");
   }
-  const isWaiting = isPending || isLoading;
+  const isWaiting = isPending || isLoadingScorers;
   const handleStartScoring = () => {
     if (selectedScorer) {
       setNotificationIsVisible(false);
@@ -19116,11 +19490,10 @@ const SpanScoring = ({ traceId, spanId, entityType, isTopLevelSpan }) => {
     setNotificationIsVisible(false);
   };
   const selectedScorerDescription = scorerList.find((s) => s.name === selectedScorer)?.description || "";
-  if (error) {
+  if (scorers === void 0 && !isLoadingScorers) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Notification, { isVisible: true, autoDismiss: false, type: "error", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
-      " ",
-      error?.message ? error.message : "Failed to load scorers."
+      " Failed to load scorers."
     ] });
   }
   if (scorerList.length === 0) {
@@ -19729,6 +20102,22 @@ function MCPServerCombobox({
   );
 }
 
+const getMastraInstanceStatus = async (endpoint = "http://localhost:4111") => {
+  try {
+    const response = await fetch(endpoint);
+    return { status: response.ok ? "active" : "inactive" };
+  } catch {
+    return { status: "inactive" };
+  }
+};
+const useMastraInstanceStatus = (endpoint = "http://localhost:4111") => {
+  return reactQuery.useQuery({
+    queryKey: ["mastra-instance-status", endpoint],
+    queryFn: () => getMastraInstanceStatus(endpoint),
+    retry: false
+  });
+};
+
 const StudioConfigContext = React.createContext({
   baseUrl: "",
   headers: {},
@@ -19740,13 +20129,16 @@ const useStudioConfig = () => {
   return React.useContext(StudioConfigContext);
 };
 const LOCAL_STORAGE_KEY = "mastra-studio-config";
-const StudioConfigProvider = ({ children }) => {
+const StudioConfigProvider = ({ children, endpoint = "http://localhost:4111" }) => {
+  const { data: instanceStatus } = useMastraInstanceStatus(endpoint);
   const [config, setConfig] = React.useState({
     baseUrl: "",
     headers: {},
     isLoading: true
   });
+  console.log("instanceStatus", instanceStatus);
   React.useLayoutEffect(() => {
+    if (!instanceStatus?.status) return;
     const storedConfig = localStorage.getItem(LOCAL_STORAGE_KEY);
     if (storedConfig) {
       const parsedConfig = JSON.parse(storedConfig);
@@ -19754,8 +20146,11 @@ const StudioConfigProvider = ({ children }) => {
         return setConfig({ ...parsedConfig, isLoading: false });
       }
     }
+    if (instanceStatus.status === "active") {
+      return setConfig((prev) => ({ ...prev, baseUrl: endpoint, isLoading: false }));
+    }
     return setConfig({ baseUrl: "", headers: {}, isLoading: false });
-  }, []);
+  }, [instanceStatus, endpoint]);
   const doSetConfig = (partialNewConfig) => {
     setConfig((prev) => {
       const nextConfig = { ...prev, ...partialNewConfig };
@@ -19837,13 +20232,14 @@ const StudioConfigForm = ({ initialConfig }) => {
   const handleSubmit = (e) => {
     e.preventDefault();
     const formData = new FormData(e.target);
+    const url = formData.get("url");
     const formHeaders = {};
     for (let i = 0; i < headers.length; i++) {
       const headerName = formData.get(`headers.${i}.name`);
       const headerValue = formData.get(`headers.${i}.value`);
       formHeaders[headerName] = headerValue;
     }
-    setConfig({ headers: formHeaders });
+    setConfig({ headers: formHeaders, baseUrl: url });
     sonner.toast.success("Configuration saved");
   };
   const handleAddHeader = (header) => {
@@ -19853,6 +20249,16 @@ const StudioConfigForm = ({ initialConfig }) => {
     setHeaders((prev) => prev.filter((_, i) => i !== index));
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InputField,
+      {
+        name: "url",
+        label: "Mastra instance URL",
+        placeholder: "e.g: http://localhost:4111",
+        required: true,
+        defaultValue: initialConfig?.baseUrl
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(HeaderListForm, { headers, onAddHeader: handleAddHeader, onRemoveHeader: handleRemoveHeader }),
     /* @__PURE__ */ jsxRuntime.jsxs(Button$1, { type: "submit", variant: "light", className: "w-full", size: "lg", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, {}) }),
@@ -19861,6 +20267,13 @@ const StudioConfigForm = ({ initialConfig }) => {
   ] });
 };
 
+const PlaygroundConfigGuard = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-screen w-full items-center justify-center bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md w-full mx-auto px-4 pt-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(LogoWithoutText, { className: "size-32" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(StudioConfigForm, {})
+  ] }) });
+};
+
 Object.defineProperty(exports, "Toaster", {
   enumerable: true,
   get: () => sonner.Toaster
@@ -19970,6 +20383,7 @@ exports.MemorySearch = MemorySearch;
 exports.Notification = Notification;
 exports.OpenAIIcon = OpenAIIcon;
 exports.PageHeader = PageHeader;
+exports.PlaygroundConfigGuard = PlaygroundConfigGuard;
 exports.PlaygroundQueryClient = PlaygroundQueryClient;
 exports.PlaygroundTabs = PlaygroundTabs;
 exports.PromptIcon = PromptIcon;
@@ -20036,8 +20450,8 @@ exports.TooltipTrigger = TooltipTrigger;
 exports.TraceDialog = TraceDialog;
 exports.TraceIcon = TraceIcon;
 exports.TraceTimeline = TraceTimeline;
-exports.TraceTimelineLegend = TraceTimelineLegend;
 exports.TraceTimelineSpan = TraceTimelineSpan;
+exports.TraceTimelineTools = TraceTimelineTools;
 exports.TracesList = TracesList;
 exports.TracesTools = TracesTools;
 exports.TracingSettingsContext = TracingSettingsContext;