@mastra/playground-ui 6.4.1 → 6.5.0-alpha.1

package/dist/src/components/ui/elements/tabs/tabs-list.d.ts

@@ -0,0 +1,7 @@
+type TabListProps = {
+    children: React.ReactNode;
+    className?: string;
+    variant?: 'default' | 'buttons';
+};
+export declare const TabList: ({ children, variant, className }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/tabs/tabs-root.d.ts

@@ -0,0 +1,9 @@
+type TabsRootProps<T extends string> = {
+    children: React.ReactNode;
+    defaultTab: T;
+    value?: T;
+    onValueChange?: (value: T) => void;
+    className?: string;
+};
+export declare const TabsRoot: <T extends string>({ children, defaultTab, value, onValueChange, className, }: TabsRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/tabs/tabs-tab.d.ts

@@ -0,0 +1,8 @@
+type TabProps = {
+    children: React.ReactNode;
+    value: string;
+    onClick?: () => void;
+    className?: string;
+};
+export declare const Tab: ({ children, value, onClick, className }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/elements/tabs/tabs.d.ts

@@ -1,40 +1,24 @@
-type TabsProps<T extends string> = {
+export declare const Tabs: (<T extends string>({ children, defaultTab, value, onValueChange, className, }: {
     children: React.ReactNode;
     defaultTab: T;
-    value?: T;
-    onValueChange?: (value: T) => void;
+    value?: T | undefined;
+    onValueChange?: ((value: T) => void) | undefined;
     className?: string;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    List: ({ children, variant, className }: {
+        children: React.ReactNode;
+        className?: string;
+        variant?: "default" | "buttons";
+    }) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ children, value, onClick, className }: {
+        children: React.ReactNode;
+        value: string;
+        onClick?: () => void;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, value, className }: {
+        children: React.ReactNode;
+        value: string;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
-type TabListProps = {
-    children: React.ReactNode;
-    className?: string;
-    variant?: 'default' | 'buttons';
-};
-type TabProps = {
-    children: React.ReactNode;
-    value: string;
-    onClick?: () => void;
-    className?: string;
-};
-type TabContentProps = {
-    children: React.ReactNode;
-    value: string;
-    className?: string;
-};
-declare const Tabs: {
-    <T extends string>({ children, defaultTab, value, onValueChange, className }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-    Tab: {
-        ({ children, value, onClick, className }: TabProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    List: {
-        ({ children, variant, className }: TabListProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Content: {
-        ({ children, value, className }: TabContentProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-};
-export { Tabs };

package/dist/src/domains/agents/components/agent-chat.d.ts

@@ -1,2 +1,2 @@
 import { ChatProps } from '../../../types';
-export declare const AgentChat: ({ agentId, agentName, threadId, initialMessages, memory, refreshThreadList, modelVersion, modelList, }: ChatProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AgentChat: ({ agentId, agentName, threadId, initialMessages, initialLegacyMessages, memory, refreshThreadList, modelVersion, modelList, }: ChatProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -8,3 +8,4 @@ export * from './components/provider-map-icon';
 export * from './components/agent-metadata';
 export * from './components/agent-entity-header';
 export * from './components/chat-threads';
+export * from './utils/extractPrompt';

package/dist/src/domains/agents/utils/__tests__/extractPrompt.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/domains/agents/utils/extractPrompt.d.ts

@@ -0,0 +1,2 @@
+import { AgentInstructions } from '@mastra/core/agent';
+export declare const extractPrompt: (instructions?: AgentInstructions) => string;

package/dist/src/domains/observability/components/index.d.ts

@@ -4,3 +4,7 @@ export * from './trace-timeline-span';
 export * from './shared';
 export * from './trace-dialog';
 export * from './traces-tools';
+export * from './traces-list';
+export * from './span-score-list';
+export * from './span-scoring';
+export * from './span-tabs';

package/dist/src/domains/observability/components/span-details.d.ts

@@ -1,7 +1,6 @@
 import { AISpanRecord } from '@mastra/core';
 interface SpanDetailsProps {
     span?: AISpanRecord;
-    onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void;
 }
-export declare function SpanDetails({ span, onScorerTriggered }: SpanDetailsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SpanDetails({ span }: SpanDetailsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/src/domains/observability/components/span-dialog.d.ts

@@ -1,15 +1,21 @@
 import { KeyValueListItemData } from '../../../components/ui/elements';
 import { AISpanRecord } from '@mastra/core';
+import { GetScoresResponse } from '@mastra/client-js';
 type SpanDialogProps = {
     trace: AISpanRecord;
     span?: AISpanRecord;
+    spanScoresData?: GetScoresResponse | null;
+    onSpanScoresPageChange?: (page: number) => void;
+    isLoadingSpanScoresData?: boolean;
     spanInfo?: KeyValueListItemData[];
     isOpen: boolean;
     onClose?: () => void;
     onNext?: () => void;
     onPrevious?: () => void;
     onViewToggle?: () => void;
-    onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void;
+    defaultActiveTab?: string;
+    initialScoreId?: string;
+    computeTraceLink: (traceId: string, spanId?: string) => string;
 };
-export declare function SpanDialog({ trace, span, isOpen, onClose, onNext, onPrevious, onViewToggle, spanInfo, onScorerTriggered, }: SpanDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SpanDialog({ trace, span, spanScoresData, onSpanScoresPageChange, isLoadingSpanScoresData, isOpen, onClose, onNext, onPrevious, onViewToggle, spanInfo, defaultActiveTab, initialScoreId, computeTraceLink, }: SpanDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/domains/observability/components/span-score-list.d.ts

@@ -0,0 +1,17 @@
+import { GetScoresResponse } from '@mastra/client-js';
+export declare const traceScoresListColumns: {
+    name: string;
+    label: string;
+    size: string;
+}[];
+type SpanScoreListProps = {
+    scoresData?: GetScoresResponse | null;
+    isLoadingScoresData?: boolean;
+    initialScoreId?: string;
+    traceId?: string;
+    spanId?: string;
+    onPageChange?: (page: number) => void;
+    computeTraceLink: (traceId: string, spanId?: string) => string;
+};
+export declare function SpanScoreList({ scoresData, isLoadingScoresData, traceId, spanId, initialScoreId, onPageChange, computeTraceLink, }: SpanScoreListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/domains/observability/components/span-scoring.d.ts

@@ -0,0 +1,6 @@
+export interface SpanScoringProps {
+    traceId?: string;
+    spanId?: string;
+    entityType?: string;
+}
+export declare const SpanScoring: ({ traceId, spanId, entityType }: SpanScoringProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/observability/components/span-tabs.d.ts

@@ -0,0 +1,16 @@
+import { KeyValueListItemData } from '../../../index';
+import { GetScoresResponse } from '@mastra/client-js';
+import { AISpanRecord } from '@mastra/core';
+type SpanTabsProps = {
+    trace?: AISpanRecord;
+    span?: AISpanRecord;
+    spanScoresData?: GetScoresResponse | null;
+    onSpanScoresPageChange?: (page: number) => void;
+    isLoadingSpanScoresData?: boolean;
+    spanInfo?: KeyValueListItemData[];
+    defaultActiveTab?: string;
+    initialScoreId?: string;
+    computeTraceLink: (traceId: string, spanId?: string) => string;
+};
+export declare function SpanTabs({ trace, span, spanScoresData, onSpanScoresPageChange, isLoadingSpanScoresData, spanInfo, defaultActiveTab, initialScoreId, computeTraceLink, }: SpanTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/domains/observability/components/trace-dialog.d.ts

@@ -10,8 +10,10 @@ type TraceDialogProps = {
     isLoadingSpans?: boolean;
     computeAgentsLink?: () => string;
     computeWorkflowsLink?: () => string;
-    onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void;
+    computeTraceLink: (traceId: string, spanId?: string, tab?: string) => string;
     initialSpanId?: string;
+    initialSpanTab?: string;
+    initialScoreId?: string;
 };
-export declare function TraceDialog({ traceId, traceSpans, traceDetails, isOpen, onClose, onNext, onPrevious, isLoadingSpans, computeAgentsLink, computeWorkflowsLink, onScorerTriggered, initialSpanId, }: TraceDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function TraceDialog({ traceId, traceSpans, traceDetails, isOpen, onClose, onNext, onPrevious, isLoadingSpans, computeAgentsLink, computeWorkflowsLink, computeTraceLink, initialSpanId, initialSpanTab, initialScoreId, }: TraceDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/domains/observability/components/trace-timeline.d.ts

@@ -1,12 +1,9 @@
-import { AISpanRecord } from '@mastra/core';
 import { UISpan } from '../types';
 type TraceTimelineProps = {
-    spans?: AISpanRecord[];
     hierarchicalSpans: UISpan[];
     onSpanClick: (id: string) => void;
     selectedSpanId?: string;
     isLoading?: boolean;
-    className?: string;
 };
-export declare function TraceTimeline({ spans, hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, className, }: TraceTimelineProps): import("react/jsx-runtime").JSX.Element;
+export declare function TraceTimeline({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading }: TraceTimelineProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,22 @@
+import { AISpanRecord } from '@mastra/core';
+export declare const tracesListColumns: {
+    name: string;
+    label: string;
+    size: string;
+}[];
+type AITrace = Pick<AISpanRecord, 'traceId' | 'name'> & {
+    attributes?: Record<string, any> | null;
+    createdAt: Date | string;
+};
+type TracesListProps = {
+    selectedTraceId?: string;
+    onTraceClick?: (id: string) => void;
+    traces?: AITrace[];
+    errorMsg?: string;
+    setEndOfListElement?: (element: HTMLDivElement | null) => void;
+    filtersApplied?: boolean;
+    isFetchingNextPage?: boolean;
+    hasNextPage?: boolean;
+};
+export declare function TracesList({ traces, selectedTraceId, onTraceClick, errorMsg, setEndOfListElement, filtersApplied, isFetchingNextPage, hasNextPage, }: TracesListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/domains/scores/components/score-dialog.d.ts

@@ -1,13 +1,15 @@
-import { MastraScorer } from '@mastra/core/scores';
+import { SideDialogRootProps } from '../../../components/ui/elements';
 import { ClientScoreRowData } from '@mastra/client-js';
 type ScoreDialogProps = {
     score?: ClientScoreRowData;
-    scorer?: MastraScorer;
+    scorerName?: string;
     isOpen: boolean;
     onClose: () => void;
     onNext?: () => void;
     onPrevious?: () => void;
     computeTraceLink: (traceId: string, spanId?: string) => string;
+    dialogLevel?: SideDialogRootProps['level'];
+    usageContext?: 'scorerPage' | 'aiSpanDialog';
 };
-export declare function ScoreDialog({ scorer, score, isOpen, onClose, onNext, onPrevious, computeTraceLink, }: ScoreDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScoreDialog({ score, scorerName, isOpen, onClose, onNext, onPrevious, computeTraceLink, dialogLevel, usageContext, }: ScoreDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/domains/scores/components/scores-list.d.ts

@@ -0,0 +1,21 @@
+import { ClientScoreRowData } from '@mastra/client-js';
+export declare const scoresListColumns: {
+    name: string;
+    label: string;
+    size: string;
+}[];
+type ScoresListProps = {
+    selectedScoreId?: string;
+    onScoreClick?: (id: string) => void;
+    scores?: ClientScoreRowData[];
+    pagination?: {
+        total: number;
+        hasMore: boolean;
+        perPage: number;
+        page: number;
+    };
+    onPageChange?: (page: number) => void;
+    errorMsg?: string;
+};
+export declare function ScoresList({ scores, pagination, onScoreClick, onPageChange, errorMsg, selectedScoreId, }: ScoresListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/domains/scores/hooks/use-trace-span-scores.d.ts

@@ -0,0 +1,7 @@
+type useTraceSpanScoresProps = {
+    traceId?: string;
+    spanId?: string;
+    page?: number;
+};
+export declare const useTraceSpanScores: ({ traceId, spanId, page }: useTraceSpanScoresProps) => import('@tanstack/react-query').UseQueryResult<import('@mastra/client-js').GetScoresResponse, Error>;
+export {};

package/dist/src/domains/scores/hooks/use-trigger-scorer.d.ts

@@ -3,7 +3,7 @@ interface TriggerScoreArgs {
     traceId: string;
     spanId?: string;
 }
-export declare const useTriggerScorer: (onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void) => import('@tanstack/react-query').UseMutationResult<{
+export declare const useTriggerScorer: () => import('@tanstack/react-query').UseMutationResult<{
     status: string;
     message: string;
 }, Error, TriggerScoreArgs, unknown>;

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

@@ -1,4 +1,6 @@
+export * from './components/scores-list';
 export * from './components/score-dialog';
 export * from './components/scores-tools';
 export * from './hooks/use-scorers';
 export * from './components/scorers-table/scorers-table';
+export * from './hooks/use-trace-span-scores';

package/dist/src/index.d.ts

@@ -37,6 +37,7 @@ export * from './lib/framework';
 export { MemorySearch } from './components/assistant-ui/memory-search';
 export * from './components/ui/alert-dialog';
 export * from './components/ui/searchbar';
+export * from './components/ui/tooltip';
 export * from './components/ui/kbd';
 export * from './components/ui/collapsible';
 export * from './domains/conversation/index';

package/dist/src/services/mastra-runtime-provider.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from '../../node_modules/@types/react';
 import { ChatProps } from '../types';
-export declare function MastraRuntimeProvider({ children, agentId, initialMessages, memory, threadId, refreshThreadList, settings, runtimeContext, modelVersion, }: Readonly<{
+export declare function MastraRuntimeProvider({ children, agentId, initialMessages, initialLegacyMessages, memory, threadId, refreshThreadList, settings, runtimeContext, modelVersion, }: Readonly<{
     children: ReactNode;
 }> & ChatProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/types.d.ts

@@ -1,6 +1,7 @@
 import { GetAgentResponse } from '@mastra/client-js';
 import { AiMessageType } from '@mastra/core/memory';
 import { LLMStepResult } from '@mastra/core/agent';
+import { MastraUIMessage } from '@mastra/react';
 export type Message = AiMessageType;
 export interface AssistantMessage {
     id: string;
@@ -47,7 +48,8 @@ export interface ChatProps {
     agentName?: string;
     modelVersion?: string;
     threadId?: string;
-    initialMessages?: Message[];
+    initialMessages?: MastraUIMessage[];
+    initialLegacyMessages?: Message[];
     memory?: boolean;
     refreshThreadList?: () => void;
     settings?: AgentSettingsType;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "6.4.1",
+  "version": "6.5.0-alpha.1",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -98,13 +98,13 @@
     "tailwindcss-animate": "^1.0.7",
     "unified": "^11.0.5",
     "use-debounce": "^10.0.6",
-    "zod": "^4.1.9",
+    "zod": "^4.1.12",
     "zustand": "^5.0.8",
-    "@mastra/react": "0.0.5",
-    "@mastra/client-js": "^0.15.2"
+    "@mastra/react": "0.0.6-alpha.1",
+    "@mastra/client-js": "^0.16.0-alpha.1"
   },
   "peerDependencies": {
-    "@mastra/core": ">=0.20.1-0 <0.21.0-0",
+    "@mastra/core": ">=0.21.0-0 <0.22.0-0",
     "lucide-react": "^0.474.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
@@ -116,20 +116,21 @@
     "@types/node": "^20.19.0",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^5.0.4",
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "postcss": "^8.5.6",
     "rollup-plugin-node-externals": "^8.0.1",
-    "storybook": "^9.1.8",
+    "storybook": "^9.1.10",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^3.4.18",
     "typescript": "^5.8.3",
-    "vite": "^6.3.6",
+    "vite": "^7.1.9",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@mastra/core": "0.20.2"
+    "vitest": "^3.2.4",
+    "@mastra/core": "0.21.0-alpha.1"
   },
   "homepage": "https://mastra.ai",
   "repository": {
@@ -143,6 +144,7 @@
   "scripts": {
     "build": "tsc && vite build",
     "dev": "vite build --watch",
+    "test": "vitest",
     "build:publish": "pnpm build && yalc push",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006 --no-open",

package/dist/src/components/ui/elements/entry-list/entry-list-cell.d.ts

@@ -1,7 +0,0 @@
-export declare function EntryListTextCell({ children, isLoading }: {
-    children: React.ReactNode;
-    isLoading?: boolean;
-}): import("react/jsx-runtime").JSX.Element | null;
-export declare function EntryListStatusCell({ status }: {
-    status?: 'success' | 'failed';
-}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/entry-list/entry-list-item.d.ts

@@ -1,9 +0,0 @@
-import { Column } from './shared';
-export declare function EntryListItem({ item, selectedItemId, onClick, children, columns, isLoading, }: {
-    item: any;
-    selectedItemId?: string;
-    onClick?: (itemId: string) => void;
-    children?: React.ReactNode;
-    columns?: Column[];
-    isLoading?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/entry-list/entry-list-page-header.d.ts

@@ -1,8 +0,0 @@
-type EntryListPageHeaderProps = {
-    title: string;
-    description?: string;
-    children?: React.ReactNode;
-    icon?: React.ReactNode;
-};
-export declare function EntryListPageHeader({ title, description, icon, children }: EntryListPageHeaderProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/domains/scores/components/scorers-dropdown.d.ts

@@ -1,8 +0,0 @@
-import { AISpanRecord } from '@mastra/core';
-export interface ScorersDropdownProps {
-    trace: AISpanRecord;
-    spanId?: string;
-    onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void;
-    entityType?: string;
-}
-export declare const ScorersDropdown: ({ trace, spanId, onScorerTriggered, entityType }: ScorersDropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/services/agent-network-message.d.ts

@@ -1,2 +0,0 @@
-import { ThreadMessageLike } from '@assistant-ui/react';
-export declare const handleNetworkMessageFromMemory: (content: any) => ThreadMessageLike;

package/dist/src/services/stream-chunk-message.d.ts

@@ -1,32 +0,0 @@
-import { ThreadMessageLike } from '@assistant-ui/react';
-import { ChunkType } from '@mastra/core';
-export interface HandleStreamChunkOptions {
-    conversation: ThreadMessageLike[];
-    chunk: ChunkType;
-}
-export declare const handleStreamChunk: ({ chunk, conversation }: HandleStreamChunkOptions) => ThreadMessageLike[];
-interface HandleWorkflowChunkOptions {
-    workflowChunk: object;
-    conversation: ThreadMessageLike[];
-    entityName?: string;
-}
-export declare const handleWorkflowChunk: ({ workflowChunk, conversation, entityName, }: HandleWorkflowChunkOptions) => ThreadMessageLike[];
-interface HandleAgentChunkOptions {
-    agentChunk: any;
-    conversation: ThreadMessageLike[];
-    entityName: string;
-}
-export declare const handleAgentChunk: ({ agentChunk, conversation, entityName, }: HandleAgentChunkOptions) => ThreadMessageLike[];
-interface CreateRootToolAssistantMessageOptions {
-    chunk: any;
-    entityName: string;
-    conversation: ThreadMessageLike[];
-    runId: string;
-    from: 'AGENT' | 'WORKFLOW';
-    networkMetadata: {
-        selectionReason?: string;
-        input?: string | Record<string, unknown>;
-    };
-}
-export declare const createRootToolAssistantMessage: ({ chunk, entityName, conversation, runId, from, networkMetadata, }: CreateRootToolAssistantMessageOptions) => ThreadMessageLike[];
-export {};

package/dist/src/services/vnext-message-provider.d.ts

@@ -1,10 +0,0 @@
-import { default as React, ReactNode } from '../../node_modules/@types/react';
-import { ThreadMessageLike } from '@assistant-ui/react';
-export declare const MessagesProvider: ({ children }: {
-    children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const useMessages: () => {
-    messages: ThreadMessageLike[];
-    setMessages: React.Dispatch<React.SetStateAction<ThreadMessageLike[]>>;
-    appendToLastMessage: (partial: string) => void;
-};