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

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @mastra/playground-ui
 
+## 29.0.0-alpha.1
+
+### Patch Changes
+
+- Moved the Level icon from its own column into the Name column, next to the trace name, on the Observability traces list. ([#16712](https://github.com/mastra-ai/mastra/pull/16712))
+
+- Added `align` and `stack` variants to `PageLayout.Row`. Use `stack="responsive"` for top bars that should collapse to a vertical stack on narrow viewports, and `align="center"` to vertically center children. Applied the new variants to the Prompts and Workflows top bars so the search field and primary action share a single row on desktop and stack on mobile. ([#16714](https://github.com/mastra-ai/mastra/pull/16714))
+
+  ```tsx
+  <PageLayout.Row align="center" stack="responsive">
+    <ListSearch ... />
+    <Button ...>Create</Button>
+  </PageLayout.Row>
+  ```
+
+- Fixed double-counted cache token costs in the Metrics dashboard. The Model Usage & Cost table and the Token Usage by Agent table were summing cache read/write costs on top of the total input cost, which already includes them. ([#16737](https://github.com/mastra-ai/mastra/pull/16737))
+
+- Migrated the Tooltip primitive to Base UI while preserving the existing API. The popup explicitly sets `role="tooltip"` so consumers can keep querying it via `getByRole('tooltip')` (Base UI does not add this role automatically). Existing `<TooltipTrigger asChild>` usage continues to work unchanged, and Base UI's native `render` prop is now also supported on `TooltipTrigger` so consumers wrapping anchors, custom router links, or icons can pass the element directly without an `asChild` adapter: ([#16713](https://github.com/mastra-ai/mastra/pull/16713))
+
+  ```tsx
+  // Still supported
+  <TooltipTrigger asChild>
+    <Button>Save</Button>
+  </TooltipTrigger>
+
+  // New: pass the element via Base UI's native API
+  <TooltipTrigger render={<Button>Save</Button>} />
+  ```
+
+  Also fixed the arrow rendering so the diagonal stroke meets the popup outline at the exact same pixel center on every side, removing the ~1px seam previously visible where the arrow joined the popup edge.
+
+- Updated dependencies [[`8cdb86c`](https://github.com/mastra-ai/mastra/commit/8cdb86ceed1137bc2768e147dce85a0692b9fb26), [`9692d60`](https://github.com/mastra-ai/mastra/commit/9692d60298e8f629d10de54867642a38955fb708), [`eda90c5`](https://github.com/mastra-ai/mastra/commit/eda90c5bfd7de11805ecc9f4552716c895fbaf78), [`afc004f`](https://github.com/mastra-ai/mastra/commit/afc004f5cc7e30697809e7021820b9f5881e6719), [`408be73`](https://github.com/mastra-ai/mastra/commit/408be73449dfab92b51eab8c6623b6c443debc25)]:
+  - @mastra/core@1.36.0-alpha.1
+  - @mastra/client-js@1.20.0-alpha.1
+  - @mastra/react@0.4.0-alpha.1
+
 ## 29.0.0-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 require('./index.css');const jsxRuntime = require('react/jsx-runtime');
 const tokens = require('./tokens.cjs.js');
 const React = require('react');
-const TooltipPrimitive = require('@radix-ui/react-tooltip');
+const tooltip = require('@base-ui/react/tooltip');
 const langJson = require('@codemirror/lang-json');
 const langMarkdown = require('@codemirror/lang-markdown');
 const language = require('@codemirror/language');
@@ -73,7 +73,6 @@ function _interopNamespaceDefault(e) {
 }
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-const TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
 const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
 const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
 const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
@@ -3553,26 +3552,88 @@ const cva = (base, config)=>(props)=>{
         return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
     };
 
-const TooltipProvider = TooltipPrimitive__namespace.Provider;
-const Tooltip = TooltipPrimitive__namespace.Root;
-const TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-const TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-  TooltipPrimitive__namespace.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-lg border border-border1 bg-surface3 px-2.5 py-1.5 text-ui-sm leading-ui-sm text-neutral5 shadow-dialog animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "fill-surface3" })
-    ]
+function TooltipProvider({ delay, delayDuration, timeout, skipDelayDuration, ...props }) {
+  const resolvedDelay = delay ?? delayDuration;
+  const resolvedTimeout = timeout ?? skipDelayDuration;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Provider,
+    {
+      ...resolvedDelay !== void 0 ? { delay: resolvedDelay } : {},
+      ...resolvedTimeout !== void 0 ? { timeout: resolvedTimeout } : {},
+      ...props
+    }
+  );
+}
+const Tooltip = tooltip.Tooltip.Root;
+const TooltipTrigger = React__namespace.forwardRef(
+  ({ asChild, render, children, ...props }, ref) => {
+    if (asChild && React__namespace.isValidElement(children)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { ref, render: children, ...props });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { ref, render, ...props, children });
   }
-) }));
-TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
+);
+TooltipTrigger.displayName = "TooltipTrigger";
+const TooltipContent = React__namespace.forwardRef(
+  ({ className, side = "top", sideOffset = 8, align = "center", alignOffset = 0, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      arrowPadding: 10,
+      className: "isolate z-[100]",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        tooltip.Tooltip.Popup,
+        {
+          ref,
+          role: "tooltip",
+          className: cn(
+            "relative z-[100] flex flex-col origin-(--transform-origin) rounded-lg border border-border1 bg-surface3 px-2.5 py-1.5 text-ui-sm leading-ui-sm text-neutral5 shadow-dialog transition-[transform,scale,opacity] duration-150",
+            "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+            "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+            "data-[instant]:transition-none",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              tooltip.Tooltip.Arrow,
+              {
+                className: cn(
+                  "flex",
+                  "data-[side=top]:-bottom-[8px] data-[side=top]:rotate-180",
+                  "data-[side=bottom]:-top-[8px]",
+                  "data-[side=left]:-right-[10px] data-[side=left]:rotate-90",
+                  "data-[side=right]:-left-[10px] data-[side=right]:-rotate-90"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(TooltipArrowSvg, {})
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) })
+);
+TooltipContent.displayName = "TooltipContent";
+function TooltipArrowSvg() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", overflow: "visible", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z", className: "fill-surface3" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M0 7.5L4 2.5Q6 0.5 8 2.5L12 7.5",
+        className: "fill-none stroke-border1",
+        strokeWidth: "1",
+        strokeLinejoin: "round",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
 
 const formElementSizes = {
   sm: "h-form-sm",
@@ -10820,14 +10881,14 @@ function MainSidebarNavLink({
       /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavLabel, { state, children: link.name }),
       children,
       link.isExperimental && !isCollapsed && !needsTooltip && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlertIcon, { className: "ml-auto stroke-accent5" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: "ml-4", children: "Experimental Feature" })
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlertIcon, { className: "ml-auto stroke-accent5" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", sideOffset: 16, children: "Experimental Feature" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: cn("flex relative min-w-0", className), children: link && needsTooltip && interactiveEl ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: interactiveEl }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: "ml-4", children: link.tooltipMsg ? isCollapsed ? `${link.name} | ${link.tooltipMsg}` : link.tooltipMsg : link.name })
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: cn("flex relative min-w-0", className), children: link && needsTooltip && React.isValidElement(interactiveEl) ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { render: interactiveEl }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", sideOffset: 16, children: link.tooltipMsg ? isCollapsed ? `${link.name} | ${link.tooltipMsg}` : link.tooltipMsg : link.name })
   ] }) : interactiveEl ?? children });
 }
 
@@ -11132,39 +11193,42 @@ function MainSidebarTrigger({ className, onClick, ...props }) {
   const { desktopState, toggleSidebar } = useMainSidebar();
   const isCollapsed = desktopState === "collapsed";
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TooltipTrigger,
       {
-        type: "button",
-        "aria-label": "Toggle sidebar",
-        "aria-expanded": !isCollapsed,
-        ...props,
-        onClick: (event) => {
-          onClick?.(event);
-          if (!event.defaultPrevented) toggleSidebar();
-        },
-        className: cn(
-          "flex items-center justify-center text-neutral3 rounded-md",
-          // Both states share size-9 (36px) — matches NavLink height,
-          // so toggling collapse never shifts surrounding rows.
-          "size-9",
-          isCollapsed ? "mx-auto" : "ml-auto",
-          "hover:bg-sidebar-nav-hover hover:text-neutral6",
-          "transition-all duration-normal ease-out-custom",
-          "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring",
-          "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-neutral3 [&:hover_svg]:text-neutral5 [&_svg]:transition-transform [&_svg]:duration-normal",
-          className
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.PanelRightIcon,
+        render: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
           {
-            className: cn({
-              "rotate-180": isCollapsed
-            })
+            type: "button",
+            "aria-label": "Toggle sidebar",
+            "aria-expanded": !isCollapsed,
+            ...props,
+            onClick: (event) => {
+              onClick?.(event);
+              if (!event.defaultPrevented) toggleSidebar();
+            },
+            className: cn(
+              "flex items-center justify-center text-neutral3 rounded-md",
+              "size-9",
+              isCollapsed ? "mx-auto" : "ml-auto",
+              "hover:bg-sidebar-nav-hover hover:text-neutral6",
+              "transition-all duration-normal ease-out-custom",
+              "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring",
+              "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-neutral3 [&:hover_svg]:text-neutral5 [&_svg]:transition-transform [&_svg]:duration-normal",
+              className
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.PanelRightIcon,
+              {
+                className: cn({
+                  "rotate-180": isCollapsed
+                })
+              }
+            )
           }
         )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
       "Toggle Sidebar",
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 [&>svg]:w-[1em] [&>svg]:h-[1em]", children: [
@@ -13238,12 +13302,6 @@ function getShortId(id) {
 function TracesDataListIdCell({ traceId }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3", children: getShortId(traceId) });
 }
-function TracesDataListKindCell({ parentSpanId }) {
-  const isRoot = parentSpanId == null;
-  const Icon = isRoot ? lucideReact.ListTreeIcon : lucideReact.CornerDownRightIcon;
-  const label = isRoot ? "Trace" : "Subtrace";
-  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { title: label, "aria-label": label, className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("shrink-0", isRoot ? "size-4 text-neutral3" : "size-3 text-neutral3"), "aria-hidden": true }) }) });
-}
 function TracesDataListDateCell({ timestamp }) {
   const date = toDate$2(timestamp);
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
@@ -13258,8 +13316,18 @@ function TracesDataListTimeCell({ timestamp }) {
     ] })
   ] }) : "-" });
 }
-function TracesDataListNameCell({ name }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-neutral4 text-ui-smd min-w-0 truncate", children: name || "-" });
+function TracesDataListNameCell({ name, parentSpanId, showLevelTooltip }) {
+  const isRoot = parentSpanId == null;
+  const Icon = isRoot ? lucideReact.ListTreeIcon : lucideReact.CornerDownRightIcon;
+  const label = isRoot ? "Trace" : "Subtrace";
+  const icon = /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": label, className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("size-4 shrink-0", isRoot ? "text-neutral3" : "text-neutral2"), "aria-hidden": true }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(DataListCell, { height: "compact", className: "text-neutral4 text-ui-smd min-w-0 flex items-center gap-2", children: [
+    showLevelTooltip ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: label })
+    ] }) : icon,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: name || "-" })
+  ] });
 }
 function TracesDataListInputCell({ input }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-neutral3 text-ui-smd font-mono truncate", children: input || "-" }) });
@@ -13308,7 +13376,6 @@ const TracesDataList = Object.assign(TracesDataListRoot, {
   SubHeading: DataListSubHeading,
   Spacer: DataListSpacer,
   IdCell: TracesDataListIdCell,
-  KindCell: TracesDataListKindCell,
   DateCell: TracesDataListDateCell,
   TimeCell: TracesDataListTimeCell,
   NameCell: TracesDataListNameCell,
@@ -13691,8 +13758,36 @@ function PageLayoutRoot({
   );
 }
 
-function PageLayoutRow({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-start justify-between", className), children });
+const pageLayoutRowVariants = cva("flex justify-between gap-3", {
+  variants: {
+    align: {
+      start: "items-start",
+      center: "items-center"
+    },
+    stack: {
+      horizontal: "flex-row",
+      responsive: "flex-col items-stretch sm:flex-row"
+    }
+  },
+  compoundVariants: [
+    {
+      stack: "responsive",
+      align: "start",
+      class: "sm:items-start"
+    },
+    {
+      stack: "responsive",
+      align: "center",
+      class: "sm:items-center"
+    }
+  ],
+  defaultVariants: {
+    align: "start",
+    stack: "horizontal"
+  }
+});
+function PageLayoutRow({ children, className, align, stack }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(pageLayoutRowVariants({ align, stack }), className), children });
 }
 
 function PageLayoutTopArea({ children, className }) {
@@ -17312,14 +17407,13 @@ function useModelUsageCostMetrics() {
   return reactQuery.useQuery({
     queryKey: ["metrics", "model-usage-cost", filterKey],
     queryFn: async () => {
-      const metrics = [
-        "mastra_model_total_input_tokens",
-        "mastra_model_total_output_tokens",
-        "mastra_model_input_cache_read_tokens",
-        "mastra_model_input_cache_write_tokens"
-      ];
       const [inputRes, outputRes, cacheReadRes, cacheWriteRes] = await Promise.all(
-        metrics.map(
+        [
+          "mastra_model_total_input_tokens",
+          "mastra_model_total_output_tokens",
+          "mastra_model_input_cache_read_tokens",
+          "mastra_model_input_cache_write_tokens"
+        ].map(
           (name) => client.getMetricBreakdown({
             name: [name],
             groupBy: ["model"],
@@ -17358,13 +17452,11 @@ function useModelUsageCostMetrics() {
         const m = group.dimensions.model ?? "unknown";
         const entry = ensureModel(m);
         entry.cacheRead = group.value;
-        addCost(entry, group);
       }
       for (const group of cacheWriteRes.groups) {
         const m = group.dimensions.model ?? "unknown";
         const entry = ensureModel(m);
         entry.cacheWrite = group.value;
-        addCost(entry, group);
       }
       return Array.from(modelMap.entries()).map(([model, vals]) => ({
         model,
@@ -17562,11 +17654,9 @@ function useTokenUsageByAgentMetrics() {
         orderDirection: "DESC",
         filters
       };
-      const [inputRes, outputRes, cacheReadRes, cacheWriteRes] = await Promise.all([
+      const [inputRes, outputRes] = await Promise.all([
         client.getMetricBreakdown({ ...breakdownBase, name: ["mastra_model_total_input_tokens"] }),
-        client.getMetricBreakdown({ ...breakdownBase, name: ["mastra_model_total_output_tokens"] }),
-        client.getMetricBreakdown({ ...breakdownBase, name: ["mastra_model_input_cache_read_tokens"] }),
-        client.getMetricBreakdown({ ...breakdownBase, name: ["mastra_model_input_cache_write_tokens"] })
+        client.getMetricBreakdown({ ...breakdownBase, name: ["mastra_model_total_output_tokens"] })
       ]);
       const agentMap = /* @__PURE__ */ new Map();
       const ensure = (name) => {
@@ -17593,16 +17683,6 @@ function useTokenUsageByAgentMetrics() {
         entry.output = group.value;
         addCost(entry, group);
       }
-      for (const group of cacheReadRes.groups) {
-        const name = group.dimensions.entityName ?? "unknown";
-        const entry = ensure(name);
-        addCost(entry, group);
-      }
-      for (const group of cacheWriteRes.groups) {
-        const name = group.dimensions.entityName ?? "unknown";
-        const entry = ensure(name);
-        addCost(entry, group);
-      }
       return Array.from(agentMap.entries()).map(([name, vals]) => ({
         name,
         input: vals.input,
@@ -20033,7 +20113,7 @@ function TracesLayout({
   );
 }
 
-const COLUMNS$1 = "4rem 6rem 9rem 14rem minmax(8rem,1fr) 14rem 6rem";
+const COLUMNS$1 = "6rem 9rem 14rem minmax(8rem,1fr) 14rem 6rem";
 const ROW_HEIGHT$1 = 36;
 const OVERSCAN$1 = 8;
 function TracesListView({
@@ -20045,6 +20125,7 @@ function TracesListView({
   filtersApplied,
   featuredTraceId,
   featuredSpanId,
+  isBranchesMode,
   onTraceClick
 }) {
   const scrollRef = React.useRef(null);
@@ -20070,22 +20151,6 @@ function TracesListView({
   const paddingBottom = virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList, { columns: COLUMNS$1, scrollRef, className: "min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.Top, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        TracesDataList.TopCellWithTooltip,
-        {
-          tooltip: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, { className: "size-4 shrink-0", "aria-hidden": true }),
-              "Trace"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownRightIcon, { className: "size-4 shrink-0", "aria-hidden": true }),
-              "Subtrace"
-            ] })
-          ] }),
-          children: "Level"
-        }
-      ),
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Date" }),
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Time" }),
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Name" }),
@@ -20114,10 +20179,16 @@ function TracesListView({
             onClick: () => onTraceClick(trace),
             className: cn(isFeatured && "bg-surface4"),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.KindCell, { parentSpanId: trace.parentSpanId }),
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.DateCell, { timestamp: displayDate }),
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TimeCell, { timestamp: displayDate }),
-              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.NameCell, { name: trace.name }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TracesDataList.NameCell,
+                {
+                  name: trace.name,
+                  parentSpanId: trace.parentSpanId,
+                  showLevelTooltip: isBranchesMode
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.InputCell, { input: getInputPreview(trace.input) }),
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.EntityCell, { entityType: trace.entityType, entityName }),
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.StatusCell, { status: trace.attributes?.status })