@mastra/playground-ui 26.0.0-alpha.2 → 26.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 26.0.0-alpha.3
+
+### Patch Changes
+
+- Improved trace timeline span controls. Added tooltips with row counts to the expand-children, expand-all-descendants, and expand-at-this-level buttons. The expand-children button now collapses only the direct children rather than the entire subtree, and the descendants column gained a matching collapse-all-descendants action. Root spans show a single Expand all / Collapse all button using outward/inward double-chevrons. ([#16173](https://github.com/mastra-ai/mastra/pull/16173))
+
+- Updated dependencies [[`ca28c23`](https://github.com/mastra-ai/mastra/commit/ca28c232a2f18801a6cf20fe053479237b4d4fb0), [`39162cb`](https://github.com/mastra-ai/mastra/commit/39162cb952c0053fdd4ed7217ec7802a2027b19d)]:
+  - @mastra/core@1.32.0-alpha.3
+  - @mastra/client-js@1.17.0-alpha.3
+  - @mastra/react@0.2.34-alpha.3
+
 ## 26.0.0-alpha.2
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -16155,12 +16155,24 @@ function TimelineExpandCol({
   isSelected,
   isFaded,
   isExpanded,
+  isRootSpan,
   toggleChildren,
   expandAllDescendants,
+  collapseAllDescendants,
+  collapseAll,
   totalDescendants = 0,
   allDescendantsExpanded,
-  numOfChildren
+  numOfChildren = 0,
+  toggleSiblings,
+  siblingsAllExpanded,
+  siblingsWithChildrenCount = 0
 }) {
+  const toggleTooltip = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
+  const showToggleChildren = !isRootSpan && !!numOfChildren && numOfChildren > 0;
+  const showDescendantsButton = !isRootSpan && showToggleChildren && totalDescendants > numOfChildren;
+  const showToggleSiblings = !isRootSpan && siblingsWithChildrenCount >= 2;
+  const showRootToggleAll = !!isRootSpan && !!numOfChildren && numOfChildren > 0;
+  const fullyExpanded = !!isExpanded && !!allDescendantsExpanded;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -16168,33 +16180,53 @@ function TimelineExpandCol({
         "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, {})
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1.625rem_1.625rem_1.625rem] gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: showToggleChildren && /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { onClick: () => toggleChildren?.(), tooltip: toggleTooltip, children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: showDescendantsButton && /* @__PURE__ */ jsxRuntime.jsx(
+          ExpandButton,
+          {
+            onClick: () => allDescendantsExpanded ? collapseAllDescendants?.() : expandAllDescendants?.(),
+            tooltip: allDescendantsExpanded ? `Collapse all descendants (${totalDescendants})` : `Expand all descendants (${totalDescendants})`,
+            children: allDescendantsExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          showToggleSiblings && /* @__PURE__ */ jsxRuntime.jsx(
+            ExpandButton,
+            {
+              onClick: () => toggleSiblings?.(),
+              tooltip: siblingsAllExpanded ? "Collapse at this level" : "Expand at this level",
+              children: siblingsAllExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FoldVerticalIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UnfoldVerticalIcon, {})
+            }
+          ),
+          showRootToggleAll && /* @__PURE__ */ jsxRuntime.jsx(
+            ExpandButton,
+            {
+              onClick: () => fullyExpanded ? collapseAll?.() : expandAllDescendants?.(),
+              tooltip: fullyExpanded ? "Collapse all" : "Expand all",
+              children: fullyExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {})
+            }
+          )
         ] })
-      ] }) : 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-ui-xs text-neutral5 border border-border1 pl-1.5 pr-0.5 rounded-md transition-all",
-        "hover:text-yellow-500",
-        "[&>svg]:shrink-0 [&>svg]:opacity-80 [&>svg]:w-[0.85rem] [&>svg]:h-[0.85rem] [&>svg]:transition-all"
-      ),
-      children
-    }
-  ) });
+function ExpandButton({ onClick, children, className, tooltip }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: cn("h-full shrink-0 cursor-pointer", className), "aria-label": tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-[0.1rem] rounded-md transition-all p-1",
+          "hover:bg-surface5",
+          "[&>svg]:shrink-0 [&>svg]:opacity-50 [&:hover>svg]:opacity-100 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:transition-all"
+        ),
+        children
+      }
+    ) }) }),
+    tooltip && /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltip })
+  ] });
 }
 
 function TimelineStructureSign({ isLastChild }) {
@@ -16401,6 +16433,7 @@ function getAllSpanIds(spans) {
 
 function TraceTimelineSpan({
   span,
+  siblings,
   depth = 0,
   onSpanClick,
   selectedSpanId,
@@ -16436,8 +16469,7 @@ function TraceTimelineSpan({
     if (!setExpandedSpanIds) return;
     setExpandedSpanIds((prev) => {
       if (!prev) return prev;
-      const idsToRemove = /* @__PURE__ */ new Set([span.id, ...allDescendantIds]);
-      return isExpanded ? prev.filter((id) => !idsToRemove.has(id)) : [...prev, span.id];
+      return isExpanded ? prev.filter((id) => id !== span.id) : [...prev, span.id];
     });
   };
   const expandAllDescendants = () => {
@@ -16447,7 +16479,41 @@ function TraceTimelineSpan({
       return Array.from(/* @__PURE__ */ new Set([...prev, span.id, ...allDescendantIds]));
     });
   };
+  const collapseAllDescendants = () => {
+    if (!setExpandedSpanIds) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      const idsToRemove = new Set(allDescendantIds);
+      return prev.filter((id) => !idsToRemove.has(id));
+    });
+  };
+  const collapseAll = () => {
+    if (!setExpandedSpanIds) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      const idsToRemove = /* @__PURE__ */ new Set([span.id, ...allDescendantIds]);
+      return prev.filter((id) => !idsToRemove.has(id));
+    });
+  };
   const allDescendantsExpanded = allDescendantIds.every((id) => expandedSpanIds?.includes(id));
+  const siblingsWithChildren = (siblings ?? []).filter((s) => s.spans && s.spans.length > 0);
+  const siblingsWithChildrenCount = siblingsWithChildren.length;
+  const siblingsAllExpanded = siblingsWithChildrenCount > 0 && siblingsWithChildren.every((s) => expandedSpanIds?.includes(s.id));
+  const toggleSiblings = () => {
+    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      if (siblingsAllExpanded) {
+        const idsToRemove = /* @__PURE__ */ new Set();
+        siblingsWithChildren.forEach((s) => {
+          idsToRemove.add(s.id);
+          getSpanDescendantIds(s).forEach((id) => idsToRemove.add(id));
+        });
+        return prev.filter((id) => !idsToRemove.has(id));
+      }
+      return Array.from(/* @__PURE__ */ new Set([...prev, ...siblingsWithChildren.map((s) => s.id)]));
+    });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       TimelineNameCol,
@@ -16470,11 +16536,17 @@ function TraceTimelineSpan({
         isSelected: selectedSpanId === span.id,
         isFaded,
         isExpanded,
+        isRootSpan,
         toggleChildren,
         expandAllDescendants,
+        collapseAllDescendants,
+        collapseAll,
         totalDescendants,
         allDescendantsExpanded,
-        numOfChildren
+        numOfChildren,
+        toggleSiblings,
+        siblingsAllExpanded,
+        siblingsWithChildrenCount
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -16495,6 +16567,7 @@ function TraceTimelineSpan({
         TraceTimelineSpan,
         {
           span: childSpan,
+          siblings: array,
           depth: depth + 1,
           onSpanClick,
           selectedSpanId,
@@ -16575,6 +16648,7 @@ function TraceTimeline({
       TraceTimelineSpan,
       {
         span,
+        siblings: hierarchicalSpans,
         onSpanClick,
         selectedSpanId,
         overallLatency,