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

package/dist/index.css

@@ -999,10 +999,6 @@
     margin-left: var(--spacing-2);
   }
 
-  .ml-4 {
-    margin-left: var(--spacing-4);
-  }
-
   .ml-8 {
     margin-left: var(--spacing-8);
   }
@@ -3198,6 +3194,10 @@
     fill: currentColor;
   }
 
+  .fill-none {
+    fill: none;
+  }
+
   .fill-surface3 {
     fill: var(--color-surface3);
   }
@@ -3210,6 +3210,10 @@
     stroke: var(--color-accent5);
   }
 
+  .stroke-border1 {
+    stroke: var(--color-border1);
+  }
+
   .stroke-3 {
     stroke-width: 3px;
   }
@@ -3258,6 +3262,10 @@
     padding: var(--spacing-8);
   }
 
+  .p-12 {
+    padding: var(--spacing-12);
+  }
+
   .p-\[24px\] {
     padding: 24px;
   }
@@ -3983,6 +3991,10 @@
     color: var(--color-white) !important;
   }
 
+  .capitalize {
+    text-transform: capitalize;
+  }
+
   .uppercase {
     text-transform: uppercase;
   }
@@ -4276,10 +4288,6 @@
     user-select: none;
   }
 
-  .zoom-in-95 {
-    --tw-enter-scale: .95;
-  }
-
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -5359,6 +5367,17 @@
     opacity: .5;
   }
 
+  .data-\[ending-style\]\:scale-95[data-ending-style] {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  .data-\[ending-style\]\:opacity-0[data-ending-style] {
+    opacity: 0;
+  }
+
   .data-\[highlighted\]\:bg-surface4[data-highlighted] {
     background-color: var(--color-surface4);
   }
@@ -5371,6 +5390,10 @@
     opacity: 1;
   }
 
+  .data-\[instant\]\:transition-none[data-instant] {
+    transition-property: none;
+  }
+
   .data-\[overflow-x-end\]\:mask-r-from-\[calc\(100\%-2rem\)\][data-overflow-x-end] {
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
     -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
@@ -5452,6 +5475,10 @@
     color: var(--color-neutral6);
   }
 
+  .data-\[side\=bottom\]\:-top-\[8px\][data-side="bottom"] {
+    top: -8px;
+  }
+
   .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
     --tw-translate-y: var(--spacing-1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -5461,33 +5488,68 @@
     --tw-enter-translate-y: calc(1*var(--spacing)*-1);
   }
 
+  .data-\[side\=left\]\:-right-\[10px\][data-side="left"] {
+    right: -10px;
+  }
+
   .data-\[side\=left\]\:-translate-x-1[data-side="left"] {
     --tw-translate-x: calc(var(--spacing-1) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .data-\[side\=left\]\:rotate-90[data-side="left"] {
+    rotate: 90deg;
+  }
+
   .data-\[side\=left\]\:slide-in-from-right-1[data-side="left"] {
     --tw-enter-translate-x: calc(1*var(--spacing));
   }
 
+  .data-\[side\=right\]\:-left-\[10px\][data-side="right"] {
+    left: -10px;
+  }
+
   .data-\[side\=right\]\:translate-x-1[data-side="right"] {
     --tw-translate-x: var(--spacing-1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .data-\[side\=right\]\:-rotate-90[data-side="right"] {
+    rotate: -90deg;
+  }
+
   .data-\[side\=right\]\:slide-in-from-left-1[data-side="right"] {
     --tw-enter-translate-x: calc(1*var(--spacing)*-1);
   }
 
+  .data-\[side\=top\]\:-bottom-\[8px\][data-side="top"] {
+    bottom: -8px;
+  }
+
   .data-\[side\=top\]\:-translate-y-1[data-side="top"] {
     --tw-translate-y: calc(var(--spacing-1) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .data-\[side\=top\]\:rotate-180[data-side="top"] {
+    rotate: 180deg;
+  }
+
   .data-\[side\=top\]\:slide-in-from-bottom-1[data-side="top"] {
     --tw-enter-translate-y: calc(1*var(--spacing));
   }
 
+  .data-\[starting-style\]\:scale-95[data-starting-style] {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  .data-\[starting-style\]\:opacity-0[data-starting-style] {
+    opacity: 0;
+  }
+
   .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
     --tw-translate-x: var(--spacing-4);
     translate: var(--tw-translate-x) var(--tw-translate-y);

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { Shadows, Glows, BorderColors, Colors, Sizes, FontSizes, LineHeights, Bo
 import './index.css';export { Animations } from './tokens.es.js';
 import * as React from 'react';
 import React__default, { useState, useRef, useCallback, createContext, useContext, useSyncExternalStore, useMemo, useEffect, useLayoutEffect, forwardRef, useId, Suspense, Fragment as Fragment$1 } from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { jsonLanguage, json } from '@codemirror/lang-json';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
@@ -48,7 +48,7 @@ import { MergeView } from '@codemirror/merge';
 import { format as format$1 } from 'date-fns/format';
 import { isToday } from 'date-fns/isToday';
 import { SearchCursor } from '@codemirror/search';
-import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Line } from 'recharts';
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$2, Line } from 'recharts';
 import { usePanelRef, Panel, Separator as Separator$1 } from 'react-resizable-panels';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
@@ -3521,26 +3521,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.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  TooltipPrimitive.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__ */ jsx(TooltipPrimitive.Arrow, { className: "fill-surface3" })
-    ]
+function TooltipProvider({ delay, delayDuration, timeout, skipDelayDuration, ...props }) {
+  const resolvedDelay = delay ?? delayDuration;
+  const resolvedTimeout = timeout ?? skipDelayDuration;
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      ...resolvedDelay !== void 0 ? { delay: resolvedDelay } : {},
+      ...resolvedTimeout !== void 0 ? { timeout: resolvedTimeout } : {},
+      ...props
+    }
+  );
+}
+const Tooltip = Tooltip$1.Root;
+const TooltipTrigger = React.forwardRef(
+  ({ asChild, render, children, ...props }, ref) => {
+    if (asChild && React.isValidElement(children)) {
+      return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { ref, render: children, ...props });
+    }
+    return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { ref, render, ...props, children });
   }
-) }));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+);
+TooltipTrigger.displayName = "TooltipTrigger";
+const TooltipContent = React.forwardRef(
+  ({ className, side = "top", sideOffset = 8, align = "center", alignOffset = 0, children, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+    Tooltip$1.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      arrowPadding: 10,
+      className: "isolate z-[100]",
+      children: /* @__PURE__ */ jsxs(
+        Tooltip$1.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__ */ jsx(
+              Tooltip$1.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__ */ jsx(TooltipArrowSvg, {})
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) })
+);
+TooltipContent.displayName = "TooltipContent";
+function TooltipArrowSvg() {
+  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", overflow: "visible", children: [
+    /* @__PURE__ */ jsx("path", { d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z", className: "fill-surface3" }),
+    /* @__PURE__ */ 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",
@@ -10788,14 +10850,14 @@ function MainSidebarNavLink({
       /* @__PURE__ */ jsx(MainSidebarNavLabel, { state, children: link.name }),
       children,
       link.isExperimental && !isCollapsed && !needsTooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CircleAlertIcon, { className: "ml-auto stroke-accent5" }) }),
-        /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", className: "ml-4", children: "Experimental Feature" })
+        /* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(CircleAlertIcon, { className: "ml-auto stroke-accent5" }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", sideOffset: 16, children: "Experimental Feature" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx("li", { ...props, className: cn("flex relative min-w-0", className), children: link && needsTooltip && interactiveEl ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: interactiveEl }),
-    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", className: "ml-4", children: link.tooltipMsg ? isCollapsed ? `${link.name} | ${link.tooltipMsg}` : link.tooltipMsg : link.name })
+  return /* @__PURE__ */ jsx("li", { ...props, className: cn("flex relative min-w-0", className), children: link && needsTooltip && React__default.isValidElement(interactiveEl) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: interactiveEl }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", sideOffset: 16, children: link.tooltipMsg ? isCollapsed ? `${link.name} | ${link.tooltipMsg}` : link.tooltipMsg : link.name })
   ] }) : interactiveEl ?? children });
 }
 
@@ -11100,39 +11162,42 @@ function MainSidebarTrigger({ className, onClick, ...props }) {
   const { desktopState, toggleSidebar } = useMainSidebar();
   const isCollapsed = desktopState === "collapsed";
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "button",
+    /* @__PURE__ */ 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__ */ jsx(
-          PanelRightIcon,
+        render: /* @__PURE__ */ 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__ */ jsx(
+              PanelRightIcon,
+              {
+                className: cn({
+                  "rotate-180": isCollapsed
+                })
+              }
+            )
           }
         )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsxs(TooltipContent, { children: [
       "Toggle Sidebar",
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 [&>svg]:w-[1em] [&>svg]:h-[1em]", children: [
@@ -13206,12 +13271,6 @@ function getShortId(id) {
 function TracesDataListIdCell({ traceId }) {
   return /* @__PURE__ */ 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 ? ListTreeIcon : CornerDownRightIcon;
-  const label = isRoot ? "Trace" : "Subtrace";
-  return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { title: label, "aria-label": label, className: "inline-flex", children: /* @__PURE__ */ 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__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? isToday$1(date) ? "Today" : format(date, "MMM dd") : "-" });
@@ -13226,8 +13285,18 @@ function TracesDataListTimeCell({ timestamp }) {
     ] })
   ] }) : "-" });
 }
-function TracesDataListNameCell({ name }) {
-  return /* @__PURE__ */ 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 ? ListTreeIcon : CornerDownRightIcon;
+  const label = isRoot ? "Trace" : "Subtrace";
+  const icon = /* @__PURE__ */ jsx("span", { "aria-label": label, className: "inline-flex shrink-0", children: /* @__PURE__ */ jsx(Icon, { className: cn("size-4 shrink-0", isRoot ? "text-neutral3" : "text-neutral2"), "aria-hidden": true }) });
+  return /* @__PURE__ */ jsxs(DataListCell, { height: "compact", className: "text-neutral4 text-ui-smd min-w-0 flex items-center gap-2", children: [
+    showLevelTooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: icon }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: label })
+    ] }) : icon,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: name || "-" })
+  ] });
 }
 function TracesDataListInputCell({ input }) {
   return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block text-neutral3 text-ui-smd font-mono truncate", children: input || "-" }) });
@@ -13276,7 +13345,6 @@ const TracesDataList = Object.assign(TracesDataListRoot, {
   SubHeading: DataListSubHeading,
   Spacer: DataListSpacer,
   IdCell: TracesDataListIdCell,
-  KindCell: TracesDataListKindCell,
   DateCell: TracesDataListDateCell,
   TimeCell: TracesDataListTimeCell,
   NameCell: TracesDataListNameCell,
@@ -13659,8 +13727,36 @@ function PageLayoutRoot({
   );
 }
 
-function PageLayoutRow({ children, className }) {
-  return /* @__PURE__ */ 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__ */ jsx("div", { className: cn(pageLayoutRowVariants({ align, stack }), className), children });
 }
 
 function PageLayoutTopArea({ children, className }) {
@@ -15062,7 +15158,7 @@ function MetricsLineChart({
           domain: yDomain
         }
       ),
-      /* @__PURE__ */ jsx(Tooltip$1, { content: /* @__PURE__ */ jsx(MetricsLineChartTooltip, {}) }),
+      /* @__PURE__ */ jsx(Tooltip$2, { content: /* @__PURE__ */ jsx(MetricsLineChartTooltip, {}) }),
       series.map((s) => /* @__PURE__ */ jsx(
         Line,
         {
@@ -17280,14 +17376,13 @@ function useModelUsageCostMetrics() {
   return 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"],
@@ -17326,13 +17421,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,
@@ -17530,11 +17623,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) => {
@@ -17561,16 +17652,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,
@@ -20001,7 +20082,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({
@@ -20013,6 +20094,7 @@ function TracesListView({
   filtersApplied,
   featuredTraceId,
   featuredSpanId,
+  isBranchesMode,
   onTraceClick
 }) {
   const scrollRef = useRef(null);
@@ -20038,22 +20120,6 @@ function TracesListView({
   const paddingBottom = virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;
   return /* @__PURE__ */ jsxs(TracesDataList, { columns: COLUMNS$1, scrollRef, className: "min-w-0", children: [
     /* @__PURE__ */ jsxs(TracesDataList.Top, { children: [
-      /* @__PURE__ */ jsx(
-        TracesDataList.TopCellWithTooltip,
-        {
-          tooltip: /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
-            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(ListTreeIcon, { className: "size-4 shrink-0", "aria-hidden": true }),
-              "Trace"
-            ] }),
-            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(CornerDownRightIcon, { className: "size-4 shrink-0", "aria-hidden": true }),
-              "Subtrace"
-            ] })
-          ] }),
-          children: "Level"
-        }
-      ),
       /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Date" }),
       /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Time" }),
       /* @__PURE__ */ jsx(TracesDataList.TopCell, { children: "Name" }),
@@ -20082,10 +20148,16 @@ function TracesListView({
             onClick: () => onTraceClick(trace),
             className: cn(isFeatured && "bg-surface4"),
             children: [
-              /* @__PURE__ */ jsx(TracesDataList.KindCell, { parentSpanId: trace.parentSpanId }),
               /* @__PURE__ */ jsx(TracesDataList.DateCell, { timestamp: displayDate }),
               /* @__PURE__ */ jsx(TracesDataList.TimeCell, { timestamp: displayDate }),
-              /* @__PURE__ */ jsx(TracesDataList.NameCell, { name: trace.name }),
+              /* @__PURE__ */ jsx(
+                TracesDataList.NameCell,
+                {
+                  name: trace.name,
+                  parentSpanId: trace.parentSpanId,
+                  showLevelTooltip: isBranchesMode
+                }
+              ),
               /* @__PURE__ */ jsx(TracesDataList.InputCell, { input: getInputPreview(trace.input) }),
               /* @__PURE__ */ jsx(TracesDataList.EntityCell, { entityType: trace.entityType, entityName }),
               /* @__PURE__ */ jsx(TracesDataList.StatusCell, { status: trace.attributes?.status })