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

package/dist/src/domains/traces/components/traces-list-view.d.ts

@@ -10,6 +10,8 @@ export type TracesListViewTrace = {
     traceId: string;
     /** Required for branch rows; absent on plain trace rows (which are root-rooted). */
     spanId?: string | null;
+    /** `null`/missing → root span. Drives the Kind column's icon (top-level trace vs nested branch). */
+    parentSpanId?: string | null;
     name: string;
     entityType?: string | null;
     entityId?: string | null;
@@ -18,7 +20,6 @@ export type TracesListViewTrace = {
     input?: unknown;
     startedAt?: Date | string | null;
     createdAt: Date | string;
-    threadId?: string | null;
 };
 export type TracesListViewProps = {
     traces: TracesListViewTrace[];
@@ -36,12 +37,9 @@ export type TracesListViewProps = {
     featuredSpanId?: string | null;
     /** Called when a row is clicked. The current selection logic (toggle on same id) is the consumer's call. */
     onTraceClick: (trace: TracesListViewTrace) => void;
-    groupByThread?: boolean;
-    threadTitles?: Record<string, string>;
 };
 /**
- * Virtualized presentational list. Flattens optional thread groups into a single
- * indexed item array, renders only the visible window via TanStack Virtual, and
+ * Virtualized presentational list. Renders only the visible window via TanStack Virtual, and
  * uses DataList primitives for layout (CSS Grid with subgrid rows).
  */
-export declare function TracesListView({ traces, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, filtersApplied, featuredTraceId, featuredSpanId, onTraceClick, groupByThread, threadTitles, }: TracesListViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function TracesListView({ traces, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, filtersApplied, featuredTraceId, featuredSpanId, onTraceClick, }: TracesListViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/traces/hooks/use-traces.d.ts

@@ -7,11 +7,8 @@ export interface TracesFilters {
 }
 /** Returns the next page number if the server indicates more pages are available. */
 export declare function getTracesNextPageParam(lastPage: ListTracesResponse | ListBranchesResponse | undefined, _allPages: unknown, lastPageParam: number): number | undefined;
-type TracesPageResponse = (ListTracesResponse | ListBranchesResponse) & {
-    threadTitles?: Record<string, string>;
-};
-/** Deduplicates trace/branch rows by traceId + spanId across all loaded pages.
- *  Also merges threadTitles from all pages for thread grouping display. */
+type TracesPageResponse = ListTracesResponse | ListBranchesResponse;
+/** Deduplicates trace/branch rows by traceId + spanId across all loaded pages. */
 export declare function selectUniqueTraces(data: {
     pages: TracesPageResponse[];
 }): {
@@ -60,7 +57,6 @@ export declare function selectUniqueTraces(data: {
         rootEntityVersionId?: string | null | undefined;
         parentSpanId?: string | null | undefined;
     }[];
-    threadTitles: Record<string, string>;
 };
 export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
     setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
@@ -110,7 +106,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     };
     error: Error;
     isError: true;
@@ -167,7 +162,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<{
         spans: {
@@ -215,7 +209,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     hasNextPage: boolean;
     hasPreviousPage: boolean;
@@ -282,7 +275,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchStatus: import('@tanstack/react-query').FetchStatus;
     promise: Promise<{
@@ -331,7 +323,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }>;
 } | {
     setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
@@ -381,7 +372,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     };
     error: null;
     isError: false;
@@ -440,7 +430,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<{
         spans: {
@@ -488,7 +477,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     hasNextPage: boolean;
     hasPreviousPage: boolean;
@@ -553,7 +541,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchStatus: import('@tanstack/react-query').FetchStatus;
     promise: Promise<{
@@ -602,7 +589,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }>;
 } | {
     setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
@@ -664,7 +650,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<{
         spans: {
@@ -712,7 +697,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     hasNextPage: boolean;
     hasPreviousPage: boolean;
@@ -777,7 +761,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchStatus: import('@tanstack/react-query').FetchStatus;
     promise: Promise<{
@@ -826,7 +809,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }>;
 } | {
     setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
@@ -888,7 +870,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<{
         spans: {
@@ -936,7 +917,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     hasNextPage: boolean;
     hasPreviousPage: boolean;
@@ -1001,7 +981,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchStatus: import('@tanstack/react-query').FetchStatus;
     promise: Promise<{
@@ -1050,7 +1029,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }>;
 } | {
     setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
@@ -1111,7 +1089,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<{
         spans: {
@@ -1159,7 +1136,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     hasNextPage: boolean;
     hasPreviousPage: boolean;
@@ -1225,7 +1201,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchStatus: import('@tanstack/react-query').FetchStatus;
     promise: Promise<{
@@ -1274,7 +1249,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }>;
 } | {
     setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
@@ -1324,7 +1298,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     };
     isError: false;
     error: null;
@@ -1383,7 +1356,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<{
         spans: {
@@ -1431,7 +1403,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     hasNextPage: boolean;
     hasPreviousPage: boolean;
@@ -1496,7 +1467,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }, Error>>;
     fetchStatus: import('@tanstack/react-query').FetchStatus;
     promise: Promise<{
@@ -1545,7 +1515,6 @@ export declare const useTraces: ({ filters, listMode }: TracesFilters) => {
             rootEntityVersionId?: string | null | undefined;
             parentSpanId?: string | null | undefined;
         }[];
-        threadTitles: Record<string, string>;
     }>;
 };
 export {};

package/dist/src/domains/traces/trace-filters.d.ts

@@ -39,7 +39,7 @@ export declare const TRACE_STATUS_OPTIONS: readonly [{
 /** Field ids for "synthetic" filter entries — they live in dedicated URL params
  *  rather than the generic `filter*` set, but appear as rows in the Filter
  *  popover so users can manage all filters from one place. */
-export declare const TRACE_SYNTHETIC_FILTER_FIELD_IDS: readonly ["rootEntityType", "status", "mode"];
+export declare const TRACE_SYNTHETIC_FILTER_FIELD_IDS: readonly ["rootEntityType", "status"];
 export declare const TRACE_ROOT_ENTITY_TYPE_PARAM = "rootEntityType";
 export declare const TRACE_STATUS_PARAM = "status";
 export declare const TRACE_LIST_MODE_PARAM = "listMode";

package/dist/src/domains/traces/utils/index.d.ts

@@ -1,2 +1 @@
-export { groupTracesByThread } from './group-traces-by-thread';
 export { getInputPreview, isTokenLimitExceeded, getTokenLimitMessage } from './span-utils';

package/dist/src/ds/components/DataList/TracesDataList/traces-data-list-cells.d.ts

@@ -2,6 +2,11 @@ export interface TracesDataListIdCellProps {
     traceId: string;
 }
 export declare function TracesDataListIdCell({ traceId }: TracesDataListIdCellProps): import("react/jsx-runtime").JSX.Element;
+export interface TracesDataListKindCellProps {
+    /** `null`/missing → root span (Trace). Set → nested span (Subtrace). */
+    parentSpanId?: string | null;
+}
+export declare function TracesDataListKindCell({ parentSpanId }: TracesDataListKindCellProps): import("react/jsx-runtime").JSX.Element;
 export interface TracesDataListDateCellProps {
     timestamp: Date | string;
 }

package/dist/src/ds/components/DataList/TracesDataList/traces-data-list.d.ts

@@ -5,17 +5,20 @@ import { DataListRoot } from '../data-list-root';
 import { DataListSpacer } from '../data-list-spacer';
 import { DataListSubHeading } from '../data-list-subheading';
 import { DataListTop } from '../data-list-top';
-import { TracesDataListIdCell, TracesDataListDateCell, TracesDataListTimeCell, TracesDataListNameCell, TracesDataListInputCell, TracesDataListEntityCell, TracesDataListStatusCell } from './traces-data-list-cells';
+import { DataListTopCellWithTooltip } from '../data-list-top-cell';
+import { TracesDataListIdCell, TracesDataListKindCell, TracesDataListDateCell, TracesDataListTimeCell, TracesDataListNameCell, TracesDataListInputCell, TracesDataListEntityCell, TracesDataListStatusCell } from './traces-data-list-cells';
 declare function TracesDataListRoot(props: ComponentProps<typeof DataListRoot>): import("react/jsx-runtime").JSX.Element;
 export declare const TracesDataList: typeof TracesDataListRoot & {
     Top: typeof DataListTop;
     TopCell: import('react').ForwardRefExoticComponent<import('../data-list-top-cell').DataListTopCellProps & import('react').RefAttributes<HTMLSpanElement>>;
+    TopCellWithTooltip: typeof DataListTopCellWithTooltip;
     RowButton: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
     NoMatch: typeof DataListNoMatch;
     Subheader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     SubHeading: typeof DataListSubHeading;
     Spacer: typeof DataListSpacer;
     IdCell: typeof TracesDataListIdCell;
+    KindCell: typeof TracesDataListKindCell;
     DateCell: typeof TracesDataListDateCell;
     TimeCell: typeof TracesDataListTimeCell;
     NameCell: typeof TracesDataListNameCell;

package/dist/src/ds/components/DataList/data-list-top-cell.d.ts

@@ -6,7 +6,7 @@ export type DataListTopCellProps = {
 export declare const DataListTopCell: import('react').ForwardRefExoticComponent<DataListTopCellProps & import('react').RefAttributes<HTMLSpanElement>>;
 export type DataListTopCellWithTooltipProps = {
     children: ReactNode;
-    tooltip: string;
+    tooltip: ReactNode;
     className?: string;
 };
 export declare function DataListTopCellWithTooltip({ children, tooltip, className }: DataListTopCellWithTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/query-utils.d.ts

@@ -9,6 +9,14 @@ export declare function is401UnauthorizedError(error: unknown): boolean;
  * Handles both direct status property and client-js error message format.
  */
 export declare function is403ForbiddenError(error: unknown): boolean;
+/**
+ * Check if an error came from a storage provider that does not implement `listBranches`.
+ *
+ * The server's `handleError` strips the original MastraError's `code`/`id` before serializing,
+ * so we can't match on the ID `OBSERVABILITY_STORAGE_LIST_BRANCHES_NOT_IMPLEMENTED` directly —
+ * we match on the message text from `core/.../observability/base.ts` instead.
+ */
+export declare function isBranchesNotSupportedError(error: unknown): boolean;
 /**
  * Check if error has a status code that shouldn't be retried.
  * Used to prevent retrying client errors that won't resolve.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "28.0.0",
+  "version": "28.0.1-alpha.1",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -100,8 +100,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.19.0",
-    "@mastra/react": "0.3.2"
+    "@mastra/client-js": "^1.19.1-alpha.1",
+    "@mastra/react": "0.3.3-alpha.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.3.6",
@@ -137,10 +137,10 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.5",
-    "@mastra/react": "0.3.2",
     "@internal/lint": "0.0.95",
-    "@mastra/core": "1.34.0",
-    "@mastra/client-js": "^1.19.0"
+    "@mastra/client-js": "^1.19.1-alpha.1",
+    "@mastra/core": "1.35.0-alpha.1",
+    "@mastra/react": "0.3.3-alpha.1"
   },
   "homepage": "https://mastra.ai",
   "repository": {

package/dist/src/domains/traces/utils/group-traces-by-thread.d.ts

@@ -1,20 +0,0 @@
-/** Minimal trace shape required by groupTracesByThread */
-export type GroupableTrace = {
-    threadId?: string | null;
-    createdAt: Date | string;
-};
-export type ThreadGroup<T extends GroupableTrace = GroupableTrace> = {
-    threadId: string;
-    traces: T[];
-};
-export type GroupedTraces<T extends GroupableTrace = GroupableTrace> = {
-    groups: ThreadGroup<T>[];
-    ungrouped: T[];
-};
-/**
- * Groups traces by their threadId field.
- * Traces without a threadId are placed in the `ungrouped` bucket.
- * Groups are ordered by the most recent trace's createdAt (descending).
- * Within each group, traces maintain their original order.
- */
-export declare function groupTracesByThread<T extends GroupableTrace>(traces: T[]): GroupedTraces<T>;