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

package/dist/src/components/assistant-ui/messages/assistant-message.d.ts

@@ -1,6 +1,4 @@
-import { ToolCallMessagePartComponent } from '@assistant-ui/react';
 export interface AssistantMessageProps {
-    ToolFallback?: ToolCallMessagePartComponent;
     hasModelList?: boolean;
 }
-export declare const AssistantMessage: ({ ToolFallback: ToolFallbackCustom, hasModelList }: AssistantMessageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AssistantMessage: ({ hasModelList }: AssistantMessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/assistant-ui/thread.d.ts

@@ -1,12 +1,10 @@
-import { ToolCallMessagePartComponent } from '@assistant-ui/react';
 export interface ThreadProps {
-    ToolFallback?: ToolCallMessagePartComponent;
     agentName?: string;
     agentId?: string;
     hasMemory?: boolean;
     hasModelList?: boolean;
 }
-export declare const Thread: ({ ToolFallback, agentName, agentId, hasMemory, hasModelList }: ThreadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Thread: ({ agentName, agentId, hasMemory, hasModelList }: ThreadProps) => import("react/jsx-runtime").JSX.Element;
 export interface ThreadWelcomeProps {
     agentName?: string;
 }

package/dist/src/components/assistant-ui/tools/badges/agent-badge.d.ts

@@ -1,3 +1,4 @@
+import { MastraUIMessage } from '@mastra/react';
 type TextMessage = {
     type: 'text';
     content: string;
@@ -5,20 +6,16 @@ type TextMessage = {
 type ToolMessage = {
     type: 'tool';
     toolName: string;
-    toolInput?: any;
     toolOutput?: any;
     args?: any;
     toolCallId: string;
     result?: any;
 };
-export type BadgeMessage = TextMessage | ToolMessage;
+export type AgentMessage = TextMessage | ToolMessage;
 export interface AgentBadgeProps {
     agentId: string;
-    messages: BadgeMessage[];
-    networkMetadata?: {
-        selectionReason?: string;
-        input?: string | Record<string, unknown>;
-    };
+    messages: AgentMessage[];
+    metadata?: MastraUIMessage['metadata'];
 }
-export declare const AgentBadge: ({ agentId, messages, networkMetadata }: AgentBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AgentBadge: ({ agentId, messages, metadata }: AgentBadgeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/assistant-ui/tools/badges/tool-badge.d.ts

@@ -1,13 +1,11 @@
+import { MastraUIMessage } from '@mastra/react';
 export interface ToolBadgeProps {
     toolName: string;
     args: Record<string, unknown> | string;
     result: any;
-    networkMetadata?: {
-        input?: string | Record<string, unknown>;
-        selectionReason?: string;
-    };
+    metadata?: MastraUIMessage['metadata'];
     toolOutput: Array<{
         toolId: string;
     }>;
 }
-export declare const ToolBadge: ({ toolName, args, result, networkMetadata, toolOutput }: ToolBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolBadge: ({ toolName, args, result, metadata, toolOutput }: ToolBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/assistant-ui/tools/badges/workflow-badge.d.ts

@@ -1,14 +1,12 @@
 import { GetWorkflowResponse } from '@mastra/client-js';
 import { WorkflowRunStreamResult } from '../../../../domains/workflows/context/workflow-run-context';
+import { MastraUIMessage } from '@mastra/react';
 export interface WorkflowBadgeProps {
     workflow: GetWorkflowResponse;
     workflowId: string;
     runId?: string;
     isStreaming?: boolean;
-    networkMetadata?: {
-        input?: string | Record<string, unknown>;
-        selectionReason?: string;
-    };
+    metadata?: MastraUIMessage['metadata'];
 }
-export declare const WorkflowBadge: ({ workflow, runId, workflowId, isStreaming, networkMetadata }: WorkflowBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WorkflowBadge: ({ workflow, runId, workflowId, isStreaming, metadata }: WorkflowBadgeProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useWorkflowStream: (workflowFullState?: WorkflowRunStreamResult) => void;

package/dist/src/components/assistant-ui/tools/tool-fallback.d.ts

@@ -1,2 +1,6 @@
-import { ToolCallMessagePartComponent } from '@assistant-ui/react';
-export declare const ToolFallback: ToolCallMessagePartComponent;
+import { ToolCallMessagePartProps } from '@assistant-ui/react';
+import { MastraUIMessage } from '@mastra/react';
+export interface ToolFallbackProps extends ToolCallMessagePartProps<any, any> {
+    metadata?: MastraUIMessage['metadata'];
+}
+export declare const ToolFallback: ({ toolName, result, args, ...props }: ToolFallbackProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { Column } from './types';
+export type EntryListEntriesSkeletonProps = {
+    columns?: Column[];
+    numberOfRows?: number;
+};
+export declare function EntryListEntriesSkeleton({ columns, numberOfRows }: EntryListEntriesSkeletonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { default as React } from '../../../../../node_modules/@types/react';
+type EntryListEntriesProps = {
+    children?: React.ReactNode;
+};
+export declare function EntryListEntries({ children }: EntryListEntriesProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,11 @@
+import { Column } from './types';
+type EntryListEntryProps = {
+    entry?: any;
+    isSelected?: boolean;
+    children?: React.ReactNode;
+    onClick?: (itemId: string) => void;
+    columns?: Column[];
+    isLoading?: boolean;
+};
+export declare function EntryListEntry({ entry, isSelected, onClick, children, columns }: EntryListEntryProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { Column } from './types';
+type EntryListHeaderProps = {
+    columns?: Column[];
+};
+export declare function EntryListHeader({ columns }: EntryListHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+type EntryListMessageProps = {
+    children?: React.ReactNode;
+    message?: string;
+    className?: string;
+    type?: 'info' | 'error';
+};
+export declare function EntryListMessage({ children, message, className, type }: EntryListMessageProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,9 @@
+type EntryListNextPageLoadingProps = {
+    isLoading?: boolean;
+    hasMore?: boolean;
+    setEndOfListElement?: (element: HTMLDivElement | null) => void;
+    loadingText?: string;
+    noMoreDataText?: string;
+};
+export declare function EntryListNextPageLoading({ isLoading, hasMore, setEndOfListElement, loadingText, noMoreDataText, }: EntryListNextPageLoadingProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,8 @@
+type EntryListPaginationProps = {
+    currentPage?: number;
+    hasMore?: boolean;
+    onNextPage?: () => void;
+    onPrevPage?: () => void;
+};
+export declare function EntryListPagination({ currentPage, hasMore, onNextPage, onPrevPage }: EntryListPaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { default as React } from '../../../../../node_modules/@types/react';
+type EntryListRootProps = {
+    children: React.ReactNode;
+};
+export declare function EntryListRoot({ children }: EntryListRootProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import { EntryListEntriesSkeletonProps } from './entry-list-entries-skeleton';
+export declare function EntryListSkeleton({ columns, numberOfRows }: EntryListEntriesSkeletonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { default as React } from '../../../../../node_modules/@types/react';
+type EntryListTrimProps = {
+    children: React.ReactNode;
+};
+export declare function EntryListTrim({ children }: EntryListTrimProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,18 +1,20 @@
-import { Column } from './shared';
-export declare function EntryList({ items: dataItems, selectedItemId, onItemClick, isLoading, isLoadingNextPage, total, page, hasMore, onNextPage, onPrevPage, perPage, columns, searchTerm, setEndOfListElement, errorMsg, }: {
-    items: Record<string, any>[];
-    selectedItemId?: string;
-    onItemClick?: (item: string) => void;
-    isLoading?: boolean;
-    isLoadingNextPage?: boolean;
-    total?: number;
-    page?: number;
-    hasMore?: boolean;
-    onNextPage?: () => void;
-    onPrevPage?: () => void;
-    perPage?: number;
-    columns?: Column[];
-    searchTerm?: string;
-    setEndOfListElement?: (element: HTMLDivElement | null) => void;
-    errorMsg?: string;
-}): import("react/jsx-runtime").JSX.Element;
+import { EntryListRoot } from './entry-list-root';
+import { EntryListHeader } from './entry-list-header';
+import { EntryListEntries } from './entry-list-entries';
+import { EntryListTrim } from './entry-list-trim';
+import { EntryListEntry } from './entry-list-entry';
+import { EntryListMessage } from './entry-list-message';
+import { EntryListNextPageLoading } from './entry-list-next-page-loading';
+import { EntryListPagination } from './entry-list-pagination';
+import { EntryListEntryStatusCol, EntryListEntryTextCol } from './entry-list-entry-col';
+export declare const EntryList: typeof EntryListRoot & {
+    Header: typeof EntryListHeader;
+    Trim: typeof EntryListTrim;
+    Entries: typeof EntryListEntries;
+    Entry: typeof EntryListEntry;
+    Message: typeof EntryListMessage;
+    NextPageLoading: typeof EntryListNextPageLoading;
+    Pagination: typeof EntryListPagination;
+    EntryText: typeof EntryListEntryTextCol;
+    EntryStatus: typeof EntryListEntryStatusCol;
+};

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

@@ -0,0 +1,10 @@
+type getToEntryFnParams = {
+    entries: {
+        id: string;
+    }[];
+    id: string | undefined;
+    update: (id: string) => void;
+};
+export declare function getToNextEntryFn({ entries, id, update }: getToEntryFnParams): (() => void) | undefined;
+export declare function getToPreviousEntryFn({ entries, id, update }: getToEntryFnParams): (() => void) | undefined;
+export {};

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

@@ -1,6 +1,5 @@
 export * from './entry-list';
-export * from './entry-list-item';
-export * from './entry-list-cell';
-export * from './entry-list-toolbar';
-export * from './entry-list-page-header';
+export * from './entry-list-skeleton';
 export * from './shared';
+export * from './types';
+export * from './helpers';

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

@@ -1,6 +1,2 @@
-export type Column = {
-    name: string;
-    label: string;
-    size: string;
-};
+import { Column } from './types';
 export declare function getColumnTemplate(columns?: Column[]): string;

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

@@ -0,0 +1,5 @@
+export type Column = {
+    name: string;
+    label: string;
+    size: string;
+};

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

@@ -1,6 +1,6 @@
 type PageHeaderProps = {
-    title?: string;
-    description?: string;
+    title?: string | 'loading';
+    description?: string | 'loading';
     icon?: React.ReactNode;
     className?: string;
 };

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/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,4 @@ export * from './trace-timeline-span';
 export * from './shared';
 export * from './trace-dialog';
 export * from './traces-tools';
+export * from './traces-list';

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

@@ -0,0 +1,18 @@
+import { AISpanRecord } from '@mastra/core';
+export declare const tracesListColumns: {
+    name: string;
+    label: string;
+    size: string;
+}[];
+type TracesListProps = {
+    selectedTraceId?: string;
+    onTraceClick?: (id: string) => void;
+    traces?: AISpanRecord[];
+    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/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/index.d.ts

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

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.0",
   "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.0",
+    "@mastra/client-js": "^0.16.0-alpha.0"
   },
   "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",
@@ -124,12 +124,12 @@
     "rollup-plugin-node-externals": "^8.0.1",
     "storybook": "^9.1.8",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^3.4.18",
     "typescript": "^5.8.3",
     "vite": "^6.3.6",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@mastra/core": "0.20.2"
+    "@mastra/core": "0.21.0-alpha.0"
   },
   "homepage": "https://mastra.ai",
   "repository": {

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/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;
-};