@mastra/playground-ui 23.0.2 → 24.0.0-alpha.0

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

@@ -0,0 +1,8 @@
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './trace-filters';
+export type { UISpan, UISpanStyle, TraceDatePreset, EntityOptions } from './types';
+export { CONTEXT_FIELD_IDS } from './types';
+/** Tab identifier for SpanDataPanelView. */
+export type SpanTab = 'details' | 'scoring';

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

@@ -0,0 +1,121 @@
+import { EntityType } from '@mastra/core/observability';
+import { ListTracesArgs } from '@mastra/core/storage';
+import { TraceDatePreset } from './types';
+import { PropertyFilterField, PropertyFilterToken } from '../../ds/components/PropertyFilter/types';
+export type EntityOptions = {
+    label: string;
+    entityType: EntityType;
+};
+export declare const ROOT_ENTITY_TYPES: {
+    readonly AGENT: EntityType.AGENT;
+    readonly WORKFLOW: EntityType.WORKFLOW_RUN;
+    readonly SCORER: EntityType.SCORER;
+    readonly INGEST: EntityType.RAG_INGESTION;
+};
+export declare const ROOT_ENTITY_TYPE_OPTIONS: readonly [{
+    readonly label: "Agent";
+    readonly entityType: EntityType.AGENT;
+}, {
+    readonly label: "Workflow";
+    readonly entityType: EntityType.WORKFLOW_RUN;
+}, {
+    readonly label: "Scorer";
+    readonly entityType: EntityType.SCORER;
+}, {
+    readonly label: "Ingest";
+    readonly entityType: EntityType.RAG_INGESTION;
+}];
+export type TraceStatusFilter = 'running' | 'success' | 'error';
+export declare const TRACE_STATUS_OPTIONS: readonly [{
+    readonly label: "Running";
+    readonly value: "running";
+}, {
+    readonly label: "Success";
+    readonly value: "success";
+}, {
+    readonly label: "Error";
+    readonly value: "error";
+}];
+/** 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"];
+export declare const TRACE_ROOT_ENTITY_TYPE_PARAM = "rootEntityType";
+export declare const TRACE_STATUS_PARAM = "status";
+export declare const TRACE_DATE_PRESET_PARAM = "datePreset";
+export declare const TRACE_DATE_FROM_PARAM = "dateFrom";
+export declare const TRACE_DATE_TO_PARAM = "dateTo";
+export declare const TRACE_DATE_PRESET_VALUES: Set<TraceDatePreset>;
+export declare const TRACE_PROPERTY_FILTER_PARAM_BY_FIELD: {
+    readonly tags: "filterTags";
+    readonly entityId: "filterEntityId";
+    readonly entityName: "filterEntityName";
+    readonly traceId: "filterTraceId";
+    readonly runId: "filterRunId";
+    readonly threadId: "filterThreadId";
+    readonly sessionId: "filterSessionId";
+    readonly requestId: "filterRequestId";
+    readonly resourceId: "filterResourceId";
+    readonly userId: "filterUserId";
+    readonly organizationId: "filterOrganizationId";
+    readonly serviceName: "filterServiceName";
+    readonly environment: "filterEnvironment";
+    readonly experimentId: "filterExperimentId";
+};
+export declare const TRACE_PROPERTY_FILTER_FIELD_IDS: Array<keyof typeof TRACE_PROPERTY_FILTER_PARAM_BY_FIELD>;
+export declare const TRACE_STATUS_VALUES: Set<TraceStatusFilter>;
+export declare const DEFAULT_TRACE_FILTERS_STORAGE_KEY = "mastra:traces:saved-filters";
+/** Serialize the filter-related URL params (date + rootEntityType + status +
+ *  generic filterX set) to localStorage so the user can restore them on next
+ *  visit. Throws no errors — storage being unavailable is fine. */
+export declare function saveTraceFiltersToStorage(params: URLSearchParams, storageKey?: string): void;
+/** Forget any previously saved filter set. Called from the "Remove filters"
+ *  action so the next plain sidebar nav lands on an empty page. */
+export declare function clearSavedTraceFilters(storageKey?: string): void;
+/** Read a previously saved filter set and return it as URLSearchParams, or
+ *  null if nothing is saved or storage is unavailable. */
+export declare function loadTraceFiltersFromStorage(storageKey?: string): URLSearchParams | null;
+/** True when `params` carries any filter-related key — used to decide whether
+ *  to hydrate from localStorage on page mount (we only hydrate when the URL is
+ *  filter-clean, i.e. the user landed here via a plain sidebar nav). */
+export declare function hasAnyTraceFilterParams(params: URLSearchParams): boolean;
+export declare function createTracePropertyFilterFields({ availableTags, availableRootEntityNames, availableServiceNames, availableEnvironments, loading, }: {
+    availableTags: string[];
+    availableRootEntityNames: string[];
+    availableServiceNames: string[];
+    availableEnvironments: string[];
+    loading?: {
+        tags?: boolean;
+        entityNames?: boolean;
+        serviceNames?: boolean;
+        environments?: boolean;
+    };
+}): PropertyFilterField[];
+/**
+ * Read filter tokens from URL search params preserving the order in which each
+ * filter was first added (URLSearchParams iterates in insertion order). This
+ * is used by the Filter popover + PropertyFilterApplied pills so the UI reflects the
+ * order the user created the filters in.
+ */
+export declare function getTracePropertyFilterTokens(searchParams: URLSearchParams): PropertyFilterToken[];
+export declare function getPreservedTraceFilterParams(searchParams: URLSearchParams): URLSearchParams;
+/**
+ * Clear all filter params from `params` and re-add them in the given `tokens`
+ * order so the URL (and therefore the PropertyFilterApplied pills) reflects the
+ * creation order of filters. Handles the generic `filterX` params plus the
+ * dedicated synthetic params (rootEntityType, status).
+ */
+export declare function applyTracePropertyFilterTokens(params: URLSearchParams, tokens: PropertyFilterToken[]): void;
+export declare function buildTraceListFilters({ rootEntityType, status, dateFrom, dateTo, tokens, }: {
+    rootEntityType?: string;
+    status?: TraceStatusFilter;
+    dateFrom?: Date;
+    dateTo?: Date;
+    tokens: PropertyFilterToken[];
+}): ListTracesArgs['filters'];
+/**
+ * "Clear" semantics: keep all filter pills but neutralize each value.
+ * '' for text fields, 'Any' for single-select pick-multi, [] for multi-select pick-multi.
+ * Date range is intentionally NOT touched here — that's a separate concern.
+ */
+export declare function neutralizeFilterTokens(filterFields: PropertyFilterField[], filterTokens: PropertyFilterToken[]): PropertyFilterToken[];

package/dist/src/domains/traces/types.d.ts

@@ -0,0 +1,35 @@
+import { EntityType } from '@mastra/core/observability';
+import { ReactNode } from '../../../node_modules/@types/react';
+export type UISpan = {
+    id: string;
+    name: string;
+    type: string;
+    latency: number;
+    startTime: string;
+    endTime?: string;
+    spans?: UISpan[];
+    parentSpanId?: string | null;
+};
+export type UISpanStyle = {
+    icon?: ReactNode;
+    color?: string;
+    label?: string;
+    bgColor?: string;
+    typePrefix: string;
+};
+export type EntityOptions = {
+    value: string;
+    label: string;
+    type: EntityType.AGENT;
+} | {
+    value: string;
+    label: string;
+    type: EntityType.WORKFLOW_RUN;
+} | {
+    value: string;
+    label: string;
+    type: 'all';
+};
+export type TraceDatePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';
+/** Canonical list of context field IDs used for trace filtering and value extraction */
+export declare const CONTEXT_FIELD_IDS: readonly ["environment", "serviceName", "source", "scope", "userId", "organizationId", "resourceId", "runId", "sessionId", "threadId", "requestId", "experimentId", "spanType", "entityName", "parentEntityType", "parentEntityId", "parentEntityName", "rootEntityType", "rootEntityId", "rootEntityName"];

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

@@ -0,0 +1,20 @@
+/** 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>;

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

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

package/dist/src/domains/traces/utils/span-utils.d.ts

@@ -0,0 +1,15 @@
+import { SpanRecord } from '@mastra/core/storage';
+/**
+ * Extract a truncated text preview from a span's input field.
+ * Agent traces store `input` as an array of message objects.
+ * Returns the text content of all user messages joined, truncated to maxLength.
+ */
+export declare function getInputPreview(input: unknown, maxLength?: number): string;
+/**
+ * Check if a span indicates that the token limit was exceeded
+ */
+export declare function isTokenLimitExceeded(span?: SpanRecord): boolean;
+/**
+ * Get a human-readable message for token limit exceeded
+ */
+export declare function getTokenLimitMessage(span?: SpanRecord): string;

package/dist/src/index.d.ts

@@ -117,4 +117,7 @@ export * from './lib/resize';
 export * from './lib/file';
 export * from './lib/template';
 export { usePlaygroundStore, useIsDarkMode, type PlaygroundTheme } from './store/playground-store';
+export * from './domains/metrics';
+export * from './domains/traces';
+export * from './domains/logs';
 export type { LinkComponent, LinkComponentProps } from './ds/types/link-component';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "23.0.2",
+  "version": "24.0.0-alpha.0",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -94,15 +94,17 @@
   },
   "peerDependencies": {
     "@mastra/core": ">=1.7.1-0 <2.0.0-0",
+    "@tanstack/react-query": "^5.90.21",
     "lucide-react": "^0.474.0",
     "react": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.14.2",
-    "@mastra/react": "0.2.29"
+    "@mastra/client-js": "^1.15.0-alpha.0",
+    "@mastra/react": "0.2.30-alpha.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.20",
-    "@storybook/react-vite": "^9.1.20",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@tanstack/react-query": "^5.90.21",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "4.2.2",
@@ -119,7 +121,7 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "jsdom": "^26.1.0",
     "rollup-plugin-node-externals": "^8.1.2",
-    "storybook": "^9.1.20",
+    "storybook": "^10.3.5",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "4.2.2",
     "tw-animate-css": "^1.4.0",
@@ -128,10 +130,11 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.5",
+    "eslint-plugin-storybook": "^10.3.5",
     "@internal/lint": "0.0.86",
-    "@mastra/client-js": "^1.14.2",
-    "@mastra/core": "1.28.0",
-    "@mastra/react": "0.2.29"
+    "@mastra/client-js": "^1.15.0-alpha.0",
+    "@mastra/react": "0.2.30-alpha.0",
+    "@mastra/core": "1.29.0-alpha.0"
   },
   "homepage": "https://mastra.ai",
   "repository": {