@mastra/playground-ui 53.0.0-alpha.2 → 53.0.0-alpha.4

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

@@ -1,5 +1,203 @@
+import { MastraClient } from '@mastra/client-js';
 import { UseQueryResult } from '@tanstack/react-query';
 import { SearchableSpan } from '../types';
+/**
+ * Key, fetcher and stale policy of the `trace-spans` query. Every observer of this key must
+ * share these (rather than only the key) so one observer with a stricter `staleTime` does not
+ * refetch data another one considers fresh.
+ */
+export declare const traceSpansQueryOptions: (client: MastraClient, traceId: string | null | undefined) => import('@tanstack/react-query').OmitKeyof<import('@tanstack/react-query').UseQueryOptions<{
+    traceId: string;
+    spans: {
+        createdAt: Date;
+        updatedAt: Date | null;
+        traceId: string;
+        spanId: string;
+        name: string;
+        spanType: import('@mastra/core/observability').SpanType;
+        isEvent: boolean;
+        startedAt: Date;
+        entityType?: import('@mastra/core/observability').EntityType | null | undefined;
+        entityId?: string | null | undefined;
+        entityName?: string | null | undefined;
+        parentEntityType?: import('@mastra/core/observability').EntityType | null | undefined;
+        parentEntityId?: string | null | undefined;
+        parentEntityName?: string | null | undefined;
+        rootEntityType?: import('@mastra/core/observability').EntityType | null | undefined;
+        rootEntityId?: string | null | undefined;
+        rootEntityName?: string | null | undefined;
+        userId?: string | null | undefined;
+        organizationId?: string | null | undefined;
+        resourceId?: string | null | undefined;
+        runId?: string | null | undefined;
+        sessionId?: string | null | undefined;
+        threadId?: string | null | undefined;
+        requestId?: string | null | undefined;
+        environment?: string | null | undefined;
+        serviceName?: string | null | undefined;
+        scope?: Record<string, unknown> | null | undefined;
+        entityVersionId?: string | null | undefined;
+        parentEntityVersionId?: string | null | undefined;
+        rootEntityVersionId?: string | null | undefined;
+        source?: string | null | undefined;
+        metadata?: Record<string, unknown> | null | undefined;
+        tags?: string[] | null | undefined;
+        parentSpanId?: string | null | undefined;
+        experimentId?: string | null | undefined;
+        attributes?: Record<string, unknown> | null | undefined;
+        links?: unknown[] | null | undefined;
+        input?: unknown;
+        output?: unknown;
+        error?: unknown;
+        endedAt?: Date | null | undefined;
+        requestContext?: Record<string, unknown> | null | undefined;
+    }[];
+}, Error, {
+    traceId: string;
+    spans: {
+        createdAt: Date;
+        updatedAt: Date | null;
+        traceId: string;
+        spanId: string;
+        name: string;
+        spanType: import('@mastra/core/observability').SpanType;
+        isEvent: boolean;
+        startedAt: Date;
+        entityType?: import('@mastra/core/observability').EntityType | null | undefined;
+        entityId?: string | null | undefined;
+        entityName?: string | null | undefined;
+        parentEntityType?: import('@mastra/core/observability').EntityType | null | undefined;
+        parentEntityId?: string | null | undefined;
+        parentEntityName?: string | null | undefined;
+        rootEntityType?: import('@mastra/core/observability').EntityType | null | undefined;
+        rootEntityId?: string | null | undefined;
+        rootEntityName?: string | null | undefined;
+        userId?: string | null | undefined;
+        organizationId?: string | null | undefined;
+        resourceId?: string | null | undefined;
+        runId?: string | null | undefined;
+        sessionId?: string | null | undefined;
+        threadId?: string | null | undefined;
+        requestId?: string | null | undefined;
+        environment?: string | null | undefined;
+        serviceName?: string | null | undefined;
+        scope?: Record<string, unknown> | null | undefined;
+        entityVersionId?: string | null | undefined;
+        parentEntityVersionId?: string | null | undefined;
+        rootEntityVersionId?: string | null | undefined;
+        source?: string | null | undefined;
+        metadata?: Record<string, unknown> | null | undefined;
+        tags?: string[] | null | undefined;
+        parentSpanId?: string | null | undefined;
+        experimentId?: string | null | undefined;
+        attributes?: Record<string, unknown> | null | undefined;
+        links?: unknown[] | null | undefined;
+        input?: unknown;
+        output?: unknown;
+        error?: unknown;
+        endedAt?: Date | null | undefined;
+        requestContext?: Record<string, unknown> | null | undefined;
+    }[];
+}, (string | null | undefined)[]>, "queryFn"> & {
+    queryFn?: import('@tanstack/react-query').QueryFunction<{
+        traceId: string;
+        spans: {
+            createdAt: Date;
+            updatedAt: Date | null;
+            traceId: string;
+            spanId: string;
+            name: string;
+            spanType: import('@mastra/core/observability').SpanType;
+            isEvent: boolean;
+            startedAt: Date;
+            entityType?: import('@mastra/core/observability').EntityType | null | undefined;
+            entityId?: string | null | undefined;
+            entityName?: string | null | undefined;
+            parentEntityType?: import('@mastra/core/observability').EntityType | null | undefined;
+            parentEntityId?: string | null | undefined;
+            parentEntityName?: string | null | undefined;
+            rootEntityType?: import('@mastra/core/observability').EntityType | null | undefined;
+            rootEntityId?: string | null | undefined;
+            rootEntityName?: string | null | undefined;
+            userId?: string | null | undefined;
+            organizationId?: string | null | undefined;
+            resourceId?: string | null | undefined;
+            runId?: string | null | undefined;
+            sessionId?: string | null | undefined;
+            threadId?: string | null | undefined;
+            requestId?: string | null | undefined;
+            environment?: string | null | undefined;
+            serviceName?: string | null | undefined;
+            scope?: Record<string, unknown> | null | undefined;
+            entityVersionId?: string | null | undefined;
+            parentEntityVersionId?: string | null | undefined;
+            rootEntityVersionId?: string | null | undefined;
+            source?: string | null | undefined;
+            metadata?: Record<string, unknown> | null | undefined;
+            tags?: string[] | null | undefined;
+            parentSpanId?: string | null | undefined;
+            experimentId?: string | null | undefined;
+            attributes?: Record<string, unknown> | null | undefined;
+            links?: unknown[] | null | undefined;
+            input?: unknown;
+            output?: unknown;
+            error?: unknown;
+            endedAt?: Date | null | undefined;
+            requestContext?: Record<string, unknown> | null | undefined;
+        }[];
+    }, (string | null | undefined)[], never> | undefined;
+} & {
+    queryKey: (string | null | undefined)[] & {
+        [dataTagSymbol]: {
+            traceId: string;
+            spans: {
+                createdAt: Date;
+                updatedAt: Date | null;
+                traceId: string;
+                spanId: string;
+                name: string;
+                spanType: import('@mastra/core/observability').SpanType;
+                isEvent: boolean;
+                startedAt: Date;
+                entityType?: import('@mastra/core/observability').EntityType | null | undefined;
+                entityId?: string | null | undefined;
+                entityName?: string | null | undefined;
+                parentEntityType?: import('@mastra/core/observability').EntityType | null | undefined;
+                parentEntityId?: string | null | undefined;
+                parentEntityName?: string | null | undefined;
+                rootEntityType?: import('@mastra/core/observability').EntityType | null | undefined;
+                rootEntityId?: string | null | undefined;
+                rootEntityName?: string | null | undefined;
+                userId?: string | null | undefined;
+                organizationId?: string | null | undefined;
+                resourceId?: string | null | undefined;
+                runId?: string | null | undefined;
+                sessionId?: string | null | undefined;
+                threadId?: string | null | undefined;
+                requestId?: string | null | undefined;
+                environment?: string | null | undefined;
+                serviceName?: string | null | undefined;
+                scope?: Record<string, unknown> | null | undefined;
+                entityVersionId?: string | null | undefined;
+                parentEntityVersionId?: string | null | undefined;
+                rootEntityVersionId?: string | null | undefined;
+                source?: string | null | undefined;
+                metadata?: Record<string, unknown> | null | undefined;
+                tags?: string[] | null | undefined;
+                parentSpanId?: string | null | undefined;
+                experimentId?: string | null | undefined;
+                attributes?: Record<string, unknown> | null | undefined;
+                links?: unknown[] | null | undefined;
+                input?: unknown;
+                output?: unknown;
+                error?: unknown;
+                endedAt?: Date | null | undefined;
+                requestContext?: Record<string, unknown> | null | undefined;
+            }[];
+        };
+        [dataTagErrorSymbol]: Error;
+    };
+};
 /**
  * Every span of a single trace, with its full payload.
  *
@@ -13,3 +211,9 @@ export declare function useTraceSpans(traceId: string | null | undefined): UseQu
     traceId: string;
     spans: SearchableSpan[];
 } | null>;
+export type TraceSpansData = Awaited<ReturnType<MastraClient['getTrace']>>;
+/**
+ * Observes the `trace-spans` query of several traces at once and projects each one with `select`.
+ * Traces still loading (or failed) yield `fallback(traceId)` so the result always lines up with `traceIds`.
+ */
+export declare function useTraceSpansQueries<T>(traceIds: string[], select: (traceId: string, data: TraceSpansData) => T, fallback: (traceId: string) => T): T[];

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

@@ -28,6 +28,8 @@ export interface UseTraceUrlStateResult {
     anchorSpanIdParam: string | undefined;
     spanTabParam: SpanTab | undefined;
     scoreIdParam: string | undefined;
+    /** Span ids featured in the timeline (e.g. the spans behind a reconstructed message). Empty when unset. */
+    highlightSpanIdsParam: string[];
     listMode: TraceListMode;
     selectedEntityOption: EntityOptions | undefined;
     selectedStatus: TraceStatusFilter | undefined;
@@ -52,6 +54,8 @@ export interface UseTraceUrlStateResult {
      *  of the two changes is lost on the first click. */
     handleSpanChangeWithTab: (spanId: string, tab: SpanTab) => void;
     handleScoreChange: (scoreId: string | null) => void;
+    /** Features `spanIds` in the timeline and selects the first one. An empty array clears the highlight. */
+    handleHighlightSpans: (spanIds: string[]) => void;
     /** Switches the list view between traces and branches. Clears the current selection. */
     handleListModeChange: (mode: TraceListMode) => void;
     handleFilterTokensChange: (nextTokens: PropertyFilterToken[]) => void;

package/dist/style.css

@@ -3134,6 +3134,14 @@
     grid-template-columns: 0 repeat(9, 1fr);
   }
 
+  .grid-cols-\[0fr_1fr_0fr\] {
+    grid-template-columns: 0fr 1fr 0fr;
+  }
+
+  .grid-cols-\[0fr_1fr_1fr\] {
+    grid-template-columns: 0fr 1fr 1fr;
+  }
+
   .grid-cols-\[1\.625rem_1\.625rem_1\.625rem\] {
     grid-template-columns: 1.625rem 1.625rem 1.625rem;
   }
@@ -3146,6 +3154,14 @@
     grid-template-columns: 1fr 1fr;
   }
 
+  .grid-cols-\[1fr_1fr_0fr\] {
+    grid-template-columns: 1fr 1fr 0fr;
+  }
+
+  .grid-cols-\[1fr_1fr_1fr\] {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
   .grid-cols-\[1fr_2fr\] {
     grid-template-columns: 1fr 2fr;
   }
@@ -10405,6 +10421,14 @@
     overflow: hidden;
   }
 
+  .\[\&\>\*\]\:rounded-lg > * {
+    border-radius: var(--radius-lg);
+  }
+
+  .\[\&\>\*\]\:bg-surface3 > * {
+    background-color: var(--color-surface3);
+  }
+
   .\[\&\>\*\]\:text-ellipsis > * {
     text-overflow: ellipsis;
   }
@@ -10413,6 +10437,11 @@
     white-space: nowrap;
   }
 
+  .\[\&\>\*\]\:shadow-lg > * {
+    --tw-shadow: 0 10px 15px var(--tw-shadow-color, oklch(0% 0 0 / .4));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .\[\&\>\*\:focus-visible\]\:relative > :focus-visible {
     position: relative;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "53.0.0-alpha.2",
+  "version": "53.0.0-alpha.4",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -144,7 +144,7 @@
     "react-day-picker": "^8.10.1",
     "react-markdown": "^9.1.0",
     "react-resizable-panels": "^4.7.3",
-    "recharts": "^3.8.0",
+    "recharts": "^3.10.1",
     "remark-gfm": "^4.0.1",
     "remend": "^1.3.0",
     "shiki": "^1.29.2",
@@ -160,8 +160,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/react": "1.4.11-alpha.2",
-    "@mastra/client-js": "^1.44.0-alpha.2"
+    "@mastra/client-js": "^1.44.0-alpha.4",
+    "@mastra/react": "1.4.11-alpha.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -203,10 +203,10 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.10",
     "@internal/lint": "0.0.130",
-    "@mastra/client-js": "^1.44.0-alpha.2",
-    "@mastra/core": "1.65.0-alpha.2",
-    "@mastra/memory": "1.28.3-alpha.1",
-    "@mastra/react": "1.4.11-alpha.2"
+    "@mastra/client-js": "^1.44.0-alpha.4",
+    "@mastra/memory": "1.28.3-alpha.2",
+    "@mastra/react": "1.4.11-alpha.4",
+    "@mastra/core": "1.65.0-alpha.4"
   },
   "homepage": "https://mastra.ai",
   "repository": {