@mastra/playground-ui 28.0.1-alpha.0 → 28.0.1-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @mastra/playground-ui
 
+## 28.0.1-alpha.2
+
+### Patch Changes
+
+- Updated dependencies [[`816b974`](https://github.com/mastra-ai/mastra/commit/816b974b424e4a1bfae3af30cc41263b6f1c0344), [`816b974`](https://github.com/mastra-ai/mastra/commit/816b974b424e4a1bfae3af30cc41263b6f1c0344), [`b32ba5f`](https://github.com/mastra-ai/mastra/commit/b32ba5fde524b46a4ff1bdf38e30d62a2bb29b04)]:
+  - @mastra/core@1.35.0-alpha.2
+  - @mastra/client-js@1.19.1-alpha.2
+  - @mastra/react@0.3.3-alpha.2
+
+## 28.0.1-alpha.1
+
+### Patch Changes
+
+- Fixed the Observability traces page on storage providers that don't support the Branches list mode. The page now falls back to Traces mode, hides the Branches option in the filter, and shows a dismissible notice instead of a full-screen error. ([#16601](https://github.com/mastra-ai/mastra/pull/16601))
+
+- Improved the Observability traces list to make the with-subtraces view more discoverable. ([#16643](https://github.com/mastra-ai/mastra/pull/16643))
+  - **Added:** A **Level** column whose icon distinguishes top-level **Trace** rows from nested **Subtrace** rows.
+  - **Added:** A tooltip legend on the **Level** header showing both icons side by side.
+  - **Added:** A standalone **Show subtraces** toggle next to **Add Filter** — off keeps the default top-level view, on includes subtraces.
+  - **Removed:** The **List mode** entry from the **Add Filter** menu (now driven by the toggle).
+
+  **Usage:** Open Observability → Traces → switch **Show subtraces** on. The **Level** column updates: top-level rows keep the Trace icon, nested rows show the Subtrace (↳) icon. The toggle is hidden automatically when the active storage provider doesn't support subtraces.
+
+- Removed the "Group traces by thread" option from the Observability traces page. The list now always displays a flat view of traces, without thread-id subheaders. To narrow results to a specific thread, use the Thread ID property in the Add filter menu (open Observability → Traces → Add filter → Thread ID → paste the threadId). ([#16633](https://github.com/mastra-ai/mastra/pull/16633))
+
+- Polished the property filter dropdown so the chevron icon next to each option keeps the same shape when its side panel opens ([#16635](https://github.com/mastra-ai/mastra/pull/16635))
+
+- Updated dependencies [[`bad08e9`](https://github.com/mastra-ai/mastra/commit/bad08e99c5291884c3ac76743c78c74f53a302c2)]:
+  - @mastra/core@1.35.0-alpha.1
+  - @mastra/client-js@1.19.1-alpha.1
+  - @mastra/react@0.3.3-alpha.1
+
 ## 28.0.1-alpha.0
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -8637,7 +8637,7 @@ function PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose })
               });
             },
             children: [
-              open && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "h-4 w-4 text-neutral3 shrink-0" }),
+              open && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-4 w-4 text-neutral3 shrink-0" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: field.label }),
               !open && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-4 w-4 ml-auto text-neutral3 shrink-0" })
             ]
@@ -13238,6 +13238,12 @@ 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") : "-" });
@@ -13295,12 +13301,14 @@ function TracesDataListRoot(props) {
 const TracesDataList = Object.assign(TracesDataListRoot, {
   Top: DataListTop,
   TopCell: DataListTopCell,
+  TopCellWithTooltip: DataListTopCellWithTooltip,
   RowButton: DataListRowButton,
   NoMatch: DataListNoMatch,
   Subheader: DataListSubheader,
   SubHeading: DataListSubHeading,
   Spacer: DataListSpacer,
   IdCell: TracesDataListIdCell,
+  KindCell: TracesDataListKindCell,
   DateCell: TracesDataListDateCell,
   TimeCell: TracesDataListTimeCell,
   NameCell: TracesDataListNameCell,
@@ -15461,6 +15469,12 @@ function is403ForbiddenError(error) {
   }
   return false;
 }
+function isBranchesNotSupportedError(error) {
+  if (!error || typeof error !== "object" || !("message" in error)) return false;
+  const message = error.message;
+  if (typeof message !== "string") return false;
+  return message.includes("does not support listing trace branches");
+}
 function isNonRetryableError(error) {
   if (!error || typeof error !== "object") return false;
   if ("status" in error) {
@@ -18119,7 +18133,7 @@ const TRACE_STATUS_OPTIONS = [
   { label: "Success", value: "success" },
   { label: "Error", value: "error" }
 ];
-const TRACE_SYNTHETIC_FILTER_FIELD_IDS = ["rootEntityType", "status", "mode"];
+const TRACE_SYNTHETIC_FILTER_FIELD_IDS = ["rootEntityType", "status"];
 const TRACE_ROOT_ENTITY_TYPE_PARAM = "rootEntityType";
 const TRACE_STATUS_PARAM = "status";
 const TRACE_LIST_MODE_PARAM = "listMode";
@@ -18218,17 +18232,6 @@ function createTracePropertyFilterFields({
       placeholder: "Choose entity type",
       emptyText: "No entity types."
     },
-    {
-      id: "mode",
-      label: "List mode",
-      kind: "pick-multi",
-      searchable: false,
-      options: TRACE_LIST_MODE_OPTIONS.map((o) => ({ label: o.label, value: o.value })),
-      placeholder: "Choose list mode",
-      emptyText: "No list modes.",
-      omitAnyOption: true,
-      defaultValue: "traces"
-    },
     {
       id: "entityName",
       label: "Primitive Name",
@@ -18287,17 +18290,15 @@ function createTracePropertyFilterFields({
     { id: "experimentId", label: "Experiment ID", kind: "text" }
   ];
   const byLabel = (a, b) => a.label.localeCompare(b.label);
-  const mode = fields.filter((f) => f.id === "mode");
-  const pickMulti = fields.filter((f) => f.kind === "pick-multi" && f.id !== "mode").sort(byLabel);
+  const pickMulti = fields.filter((f) => f.kind === "pick-multi").sort(byLabel);
   const text = fields.filter((f) => f.kind === "text").sort(byLabel);
-  return [...mode, ...pickMulti, ...text];
+  return [...pickMulti, ...text];
 }
 function getTracePropertyFilterTokens(searchParams) {
   const tokens = [];
   const paramToFieldId = /* @__PURE__ */ new Map([
     [TRACE_ROOT_ENTITY_TYPE_PARAM, "rootEntityType"],
-    [TRACE_STATUS_PARAM, "status"],
-    [TRACE_LIST_MODE_PARAM, "mode"]
+    [TRACE_STATUS_PARAM, "status"]
   ]);
   for (const fieldId of TRACE_PROPERTY_FILTER_FIELD_IDS) {
     paramToFieldId.set(TRACE_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId], fieldId);
@@ -18344,7 +18345,6 @@ function getPreservedTraceFilterParams(searchParams) {
 function applyTracePropertyFilterTokens(params, tokens) {
   params.delete(TRACE_ROOT_ENTITY_TYPE_PARAM);
   params.delete(TRACE_STATUS_PARAM);
-  params.delete(TRACE_LIST_MODE_PARAM);
   for (const fieldId of TRACE_PROPERTY_FILTER_FIELD_IDS) {
     params.delete(TRACE_PROPERTY_FILTER_PARAM_BY_FIELD[fieldId]);
   }
@@ -18357,10 +18357,6 @@ function applyTracePropertyFilterTokens(params, tokens) {
       params.set(TRACE_STATUS_PARAM, token.value);
       continue;
     }
-    if (token.fieldId === "mode" && typeof token.value === "string") {
-      params.set(TRACE_LIST_MODE_PARAM, token.value);
-      continue;
-    }
     const param = TRACE_PROPERTY_FILTER_PARAM_BY_FIELD[token.fieldId];
     if (!param) continue;
     if (token.fieldId === "tags" && Array.isArray(token.value)) {
@@ -20037,34 +20033,7 @@ function TracesLayout({
   );
 }
 
-function groupTracesByThread(traces) {
-  const threadMap = /* @__PURE__ */ new Map();
-  const ungrouped = [];
-  for (const trace of traces) {
-    if (trace.threadId) {
-      const existing = threadMap.get(trace.threadId);
-      if (existing) {
-        existing.push(trace);
-      } else {
-        threadMap.set(trace.threadId, [trace]);
-      }
-    } else {
-      ungrouped.push(trace);
-    }
-  }
-  const groups = Array.from(threadMap.entries()).map(([threadId, traces2]) => ({
-    threadId,
-    traces: traces2
-  }));
-  groups.sort((a, b) => {
-    const aLatest = Math.max(...a.traces.map((t) => new Date(t.createdAt).getTime()));
-    const bLatest = Math.max(...b.traces.map((t) => new Date(t.createdAt).getTime()));
-    return bLatest - aLatest;
-  });
-  return { groups, ungrouped };
-}
-
-const COLUMNS$1 = "7rem 6rem 9rem 14rem minmax(8rem,1fr) 14rem 6rem";
+const COLUMNS$1 = "4rem 6rem 9rem 14rem minmax(8rem,1fr) 14rem 6rem";
 const ROW_HEIGHT$1 = 36;
 const OVERSCAN$1 = 8;
 function TracesListView({
@@ -20076,65 +20045,11 @@ function TracesListView({
   filtersApplied,
   featuredTraceId,
   featuredSpanId,
-  onTraceClick,
-  groupByThread,
-  threadTitles
+  onTraceClick
 }) {
   const scrollRef = React.useRef(null);
-  const items = React.useMemo(() => {
-    if (traces.length === 0) return [];
-    if (!groupByThread) {
-      return traces.map((trace) => ({ kind: "row", key: `${trace.traceId}:${trace.spanId ?? ""}`, trace }));
-    }
-    const { groups, ungrouped } = groupTracesByThread(traces);
-    const result = [];
-    for (const group of groups) {
-      result.push({
-        kind: "subheader",
-        key: `header-${group.threadId}`,
-        node: /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.SubHeading, { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase", children: "Thread" }),
-          threadTitles?.[group.threadId] && /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
-            "'",
-            threadTitles[group.threadId],
-            "'"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
-            "# ",
-            group.threadId
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
-            "(",
-            group.traces.length,
-            ")"
-          ] })
-        ] })
-      });
-      for (const trace of group.traces) {
-        result.push({ kind: "row", key: `${trace.traceId}:${trace.spanId ?? ""}`, trace });
-      }
-    }
-    if (ungrouped.length > 0) {
-      result.push({
-        kind: "subheader",
-        key: "header-ungrouped",
-        node: /* @__PURE__ */ jsxRuntime.jsxs(TracesDataList.SubHeading, { className: "flex gap-2 uppercase", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No thread" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral2", children: [
-            "(",
-            ungrouped.length,
-            ")"
-          ] })
-        ] })
-      });
-      for (const trace of ungrouped) {
-        result.push({ kind: "row", key: `${trace.traceId}:${trace.spanId ?? ""}`, trace });
-      }
-    }
-    return result;
-  }, [traces, groupByThread, threadTitles]);
   const virtualizer = reactVirtual.useVirtualizer({
-    count: items.length,
+    count: traces.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => ROW_HEIGHT$1,
     overscan: OVERSCAN$1
@@ -20155,7 +20070,22 @@ 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.TopCell, { children: "ID" }),
+      /* @__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" }),
@@ -20163,7 +20093,7 @@ function TracesListView({
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Entity" }),
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TopCell, { children: "Status" })
     ] }),
-    items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    traces.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       TracesDataList.NoMatch,
       {
         message: filtersApplied ? "No traces found for applied filters" : "No traces found yet"
@@ -20171,12 +20101,8 @@ function TracesListView({
     ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Spacer, { height: paddingTop }),
       virtualItems.map((vi) => {
-        const item = items[vi.index];
-        if (!item) return null;
-        if (item.kind === "subheader") {
-          return /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Subheader, { ref: virtualizer.measureElement, "data-index": vi.index, children: item.node }, item.key);
-        }
-        const trace = item.trace;
+        const trace = traces[vi.index];
+        if (!trace) return null;
         const isFeatured = trace.traceId === featuredTraceId && (featuredSpanId == null || trace.spanId === featuredSpanId);
         const displayDate = trace.startedAt ?? trace.createdAt;
         const entityName = trace.entityName || trace.entityId || trace.attributes?.agentId || trace.attributes?.workflowId;
@@ -20188,7 +20114,7 @@ function TracesListView({
             onClick: () => onTraceClick(trace),
             className: cn(isFeatured && "bg-surface4"),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.IdCell, { traceId: trace.traceId }),
+              /* @__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 }),
@@ -20197,7 +20123,7 @@ function TracesListView({
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.StatusCell, { status: trace.attributes?.status })
             ]
           },
-          trace.traceId
+          `${trace.traceId}:${trace.spanId ?? ""}`
         );
       }),
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Spacer, { height: paddingBottom }),
@@ -20446,13 +20372,7 @@ function selectUniqueTraces(data) {
     seen.add(key);
     return true;
   });
-  const threadTitles = {};
-  for (const page of data.pages) {
-    if (page.threadTitles) {
-      Object.assign(threadTitles, page.threadTitles);
-    }
-  }
-  return { spans, threadTitles };
+  return { spans };
 }
 const useTraces = ({ filters, listMode = "traces" }) => {
   const client = react.useMastraClient();
@@ -22042,7 +21962,6 @@ exports.getToPreviousEntryFn = getToPreviousEntryFn;
 exports.getToPreviousItemFn = getToPreviousItemFn;
 exports.getTokenLimitMessage = getTokenLimitMessage;
 exports.getTracePropertyFilterTokens = getTracePropertyFilterTokens;
-exports.groupTracesByThread = groupTracesByThread;
 exports.hasAnyLogsFilterParams = hasAnyLogsFilterParams;
 exports.hasAnyMetricsFilterParams = hasAnyMetricsFilterParams;
 exports.hasAnyTraceFilterParams = hasAnyTraceFilterParams;
@@ -22051,6 +21970,7 @@ exports.hoverEffects = hoverEffects;
 exports.inputVariants = inputVariants;
 exports.is401UnauthorizedError = is401UnauthorizedError;
 exports.is403ForbiddenError = is403ForbiddenError;
+exports.isBranchesNotSupportedError = isBranchesNotSupportedError;
 exports.isNonRetryableError = isNonRetryableError;
 exports.isObjectEmpty = isObjectEmpty;
 exports.isRule = isRule;