@mastra/playground-ui 6.3.0 → 6.3.1-alpha.2

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

@@ -1,4 +1,5 @@
-import { GetWorkflowResponse, WorkflowWatchResult } from '@mastra/client-js';
+import { GetWorkflowResponse } from '@mastra/client-js';
+import { WorkflowRunStreamResult } from '../../../../domains/workflows/context/workflow-run-context';
 export interface WorkflowBadgeProps {
     workflow: GetWorkflowResponse;
     workflowId: string;
@@ -10,4 +11,4 @@ export interface WorkflowBadgeProps {
     };
 }
 export declare const WorkflowBadge: ({ workflow, runId, workflowId, isStreaming, networkMetadata }: WorkflowBadgeProps) => import("react/jsx-runtime").JSX.Element;
-export declare const useWorkflowStream: (workflowFullState?: WorkflowWatchResult) => void;
+export declare const useWorkflowStream: (workflowFullState?: WorkflowRunStreamResult) => void;

package/dist/src/components/threads.d.ts

@@ -19,8 +19,9 @@ export declare const ThreadList: ({ children }: ThreadListProps) => import("reac
 export interface ThreadItemProps {
     children: React.ReactNode;
     isActive?: boolean;
+    className?: string;
 }
-export declare const ThreadItem: ({ children, isActive }: ThreadItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThreadItem: ({ children, isActive, className }: ThreadItemProps) => import("react/jsx-runtime").JSX.Element;
 export interface ThreadDeleteButtonProps {
     onClick: () => void;
 }

package/dist/src/components/ui/searchbar.d.ts

@@ -4,3 +4,6 @@ export interface SearchbarProps {
     placeholder: string;
 }
 export declare const Searchbar: ({ onSearch, label, placeholder }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchbarWrapper: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,10 @@
 export interface AgentMetadataSectionProps {
-    title: string;
+    title: string | React.ReactNode;
     children: React.ReactNode;
     hint?: {
         link: string;
         title: string;
+        icon?: React.ReactNode;
     };
 }
 export declare const AgentMetadataSection: ({ title, children, hint }: AgentMetadataSectionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -8,6 +8,7 @@ export interface AgentMetadataProps {
     promptSlot: ReactNode;
     hasMemoryEnabled: boolean;
     modelProviders: string[];
+    modelVersion: string;
     updateModel: AgentMetadataModelSwitcherProps['updateModel'];
     updateModelInModelList: AgentMetadataModelListProps['updateModelInModelList'];
     reorderModelList: AgentMetadataModelListProps['reorderModelList'];
@@ -19,7 +20,7 @@ export interface AgentMetadataNetworkListProps {
     }[];
 }
 export declare const AgentMetadataNetworkList: ({ agents }: AgentMetadataNetworkListProps) => import("react/jsx-runtime").JSX.Element;
-export declare const AgentMetadata: ({ agentId, agent, promptSlot, hasMemoryEnabled, updateModel, modelProviders, updateModelInModelList, reorderModelList, }: AgentMetadataProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AgentMetadata: ({ agentId, agent, promptSlot, hasMemoryEnabled, updateModel, modelProviders, updateModelInModelList, reorderModelList, modelVersion, }: AgentMetadataProps) => import("react/jsx-runtime").JSX.Element;
 export interface AgentMetadataToolListProps {
     tools: GetToolResponse[];
     agentId: string;

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

@@ -4,5 +4,3 @@ export interface AgentsTableProps {
     isLoading: boolean;
 }
 export declare function AgentsTable({ agents, isLoading }: AgentsTableProps): import("react/jsx-runtime").JSX.Element;
-export declare const AgentsTableSkeleton: () => import("react/jsx-runtime").JSX.Element;
-export declare const EmptyAgentsTable: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,6 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { AgentTableData } from './types';
 export type AgentTableColumn = {
-    repoUrl: string;
-    executedAt: Date | null;
-    modelId: string;
-    link: string;
+    id: string;
 } & AgentTableData;
 export declare const columns: ColumnDef<AgentTableColumn>[];

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

@@ -1,13 +1,4 @@
-import { GetAgentResponse, GetToolResponse } from '@mastra/client-js';
-export type AgentTableData = {
-    branch?: string;
-    executedAt?: Date;
-    modelId: string;
+import { GetAgentResponse } from '@mastra/client-js';
+export type AgentTableData = GetAgentResponse & {
     id: string;
-    name: string;
-    provider: string;
-    instructions: string;
-    tools?: Record<string, GetToolResponse>;
-    link: string;
-    modelList: GetAgentResponse['modelList'];
 };

package/dist/src/domains/mcps/components/mcp-table/columns.d.ts

@@ -0,0 +1,3 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { MCPTableColumn } from './types';
+export declare const columns: ColumnDef<MCPTableColumn>[];

package/dist/src/domains/mcps/components/mcp-table/mcp-table.d.ts

@@ -0,0 +1,6 @@
+import { McpServerListResponse } from '@mastra/client-js';
+export interface MCPTableProps {
+    mcpServers: McpServerListResponse['servers'];
+    isLoading: boolean;
+}
+export declare function MCPTable({ mcpServers, isLoading }: MCPTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/mcps/components/mcp-table/types.d.ts

@@ -0,0 +1,2 @@
+import { McpServerListResponse } from '@mastra/client-js';
+export type MCPTableColumn = McpServerListResponse['servers'][number];

package/dist/src/domains/mcps/hooks/useMCPServerTools.d.ts

@@ -0,0 +1,3 @@
+import { ServerInfo } from '@mastra/core/mcp';
+import { McpToolInfo as SdkMcpToolInfo } from '@mastra/client-js';
+export declare const useMCPServerTools: (selectedServer: ServerInfo) => import('@tanstack/react-query').UseQueryResult<Record<string, SdkMcpToolInfo>, Error>;

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

@@ -0,0 +1,2 @@
+export * from './components/mcp-table/mcp-table';
+export * from './hooks/useMCPServerTools';

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

@@ -4,5 +4,3 @@ export interface ScorersTableProps {
     isLoading: boolean;
 }
 export declare function ScorersTable({ scorers, isLoading }: ScorersTableProps): import("react/jsx-runtime").JSX.Element;
-export declare const ScorersTableSkeleton: () => import("react/jsx-runtime").JSX.Element;
-export declare const EmptyScorersTable: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,4 @@
-export type ScorerTableData = {
+import { GetScorerResponse } from '@mastra/client-js';
+export type ScorerTableData = GetScorerResponse & {
     id: string;
-    name: string;
-    description: string;
 };

package/dist/src/domains/tools/components/tool-table/columns.d.ts

@@ -0,0 +1,3 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { ToolWithAgents } from '../../utils/prepareToolsTable';
+export declare const columns: ColumnDef<ToolWithAgents>[];

package/dist/src/domains/tools/components/tool-table/tool-table.d.ts

@@ -0,0 +1,7 @@
+import { GetAgentResponse, GetToolResponse } from '@mastra/client-js';
+export interface ToolTableProps {
+    tools: Record<string, GetToolResponse>;
+    agents: Record<string, GetAgentResponse>;
+    isLoading: boolean;
+}
+export declare function ToolTable({ tools, agents, isLoading }: ToolTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/tools/components/tool-table/types.d.ts

@@ -0,0 +1,2 @@
+import { GetToolResponse } from '@mastra/client-js';
+export type ToolTableData = GetToolResponse;

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

@@ -1 +1 @@
-export * from './components/tool-list';
+export * from './components/tool-table/tool-table';

package/dist/src/domains/tools/utils/prepareToolsTable.d.ts

@@ -0,0 +1,7 @@
+import { GetAgentResponse, GetToolResponse } from '@mastra/client-js';
+export interface ToolWithAgents extends GetToolResponse {
+    agents: Array<GetAgentResponse & {
+        id: string;
+    }>;
+}
+export declare const prepareToolsTable: (tools: Record<string, GetToolResponse>, agents: Record<string, GetAgentResponse>) => ToolWithAgents[];

package/dist/src/domains/workflows/components/workflow-table/types.d.ts

@@ -1,6 +1,4 @@
-export type WorkflowTableData = {
+import { GetWorkflowResponse } from '@mastra/client-js';
+export type WorkflowTableData = GetWorkflowResponse & {
     id: string;
-    name: string;
-    stepsCount: number;
-    link: string;
 };

package/dist/src/domains/workflows/components/workflow-table/workflow-table.d.ts

@@ -1,8 +1,6 @@
 import { GetWorkflowResponse } from '@mastra/client-js';
 export interface WorkflowTableProps {
-    workflows?: Record<string, GetWorkflowResponse>;
+    workflows: Record<string, GetWorkflowResponse>;
     isLoading: boolean;
 }
 export declare function WorkflowTable({ workflows, isLoading }: WorkflowTableProps): import("react/jsx-runtime").JSX.Element;
-export declare const WorkflowTableSkeleton: () => import("react/jsx-runtime").JSX.Element;
-export declare const EmptyWorkflowsTable: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/context/workflow-run-context.d.ts

@@ -1,12 +1,14 @@
-import { WorkflowRunState } from '@mastra/core/workflows';
-import { WorkflowWatchResult } from '@mastra/client-js';
+import { WorkflowRunState, WorkflowStreamResult } from '@mastra/core/workflows';
+export type WorkflowRunStreamResult = WorkflowStreamResult<any, any, any, any>;
 type WorkflowRunContextType = {
-    result: WorkflowWatchResult | null;
-    setResult: React.Dispatch<React.SetStateAction<any>>;
+    result: WorkflowRunStreamResult | null;
+    setResult: React.Dispatch<React.SetStateAction<WorkflowRunStreamResult | null>>;
     payload: any;
     setPayload: React.Dispatch<React.SetStateAction<any>>;
     clearData: () => void;
     snapshot?: WorkflowRunState;
+    runId?: string;
+    setRunId: React.Dispatch<React.SetStateAction<string>>;
 };
 export declare const WorkflowRunContext: import('../../../../node_modules/@types/react').Context<WorkflowRunContextType>;
 export declare function WorkflowRunProvider({ children, snapshot, }: {

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

@@ -2,6 +2,6 @@ export * from './context/workflow-run-context';
 export * from './workflow/workflow-graph';
 export * from './workflow/workflow-trigger';
 export * from './context/use-current-run';
-export * from './runs/workflow-runs';
+export * from './runs/workflow-run-details';
 export * from './components/workflow-table/workflow-table';
 export * from './utils';

package/dist/src/domains/workflows/runs/workflow-run-details.d.ts

@@ -0,0 +1,12 @@
+import { WorkflowTriggerProps } from '../workflow/workflow-trigger';
+import { WorkflowRunStreamResult } from '../context/workflow-run-context';
+export interface WorkflowRunDetailProps extends Omit<WorkflowTriggerProps, 'paramsRunId' | 'workflowId' | 'observeWorkflowStream'> {
+    workflowId: string;
+    runId?: string;
+    observeWorkflowStream?: ({ workflowId, runId, storeRunResult, }: {
+        workflowId: string;
+        runId: string;
+        storeRunResult: WorkflowRunStreamResult | null;
+    }) => void;
+}
+export declare const WorkflowRunDetail: ({ workflowId, runId, observeWorkflowStream, ...triggerProps }: WorkflowRunDetailProps) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/src/domains/workflows/runs/workflow-run-list.d.ts

@@ -0,0 +1,5 @@
+export interface WorkflowRunListProps {
+    workflowId: string;
+    runId?: string;
+}
+export declare const WorkflowRunList: ({ workflowId, runId }: WorkflowRunListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/utils.d.ts

@@ -1,5 +1,3 @@
 import { WorkflowRunState } from '@mastra/core/workflows';
-import { WorkflowWatchResult } from '@mastra/client-js';
-import { StreamChunk } from '../../types';
-export declare function convertWorkflowRunStateToWatchResult(runState: WorkflowRunState): WorkflowWatchResult;
-export declare const mapWorkflowStreamChunkToWatchResult: (prev: WorkflowWatchResult, chunk: StreamChunk) => WorkflowWatchResult;
+import { WorkflowRunStreamResult } from './context/workflow-run-context';
+export declare function convertWorkflowRunStateToStreamResult(runState: WorkflowRunState): WorkflowRunStreamResult;

package/dist/src/domains/workflows/workflow/workflow-trigger.d.ts

@@ -1,4 +1,5 @@
-import { GetWorkflowResponse, WorkflowWatchResult } from '@mastra/client-js';
+import { WorkflowRunStreamResult } from '../context/workflow-run-context';
+import { GetWorkflowResponse } from '@mastra/client-js';
 export interface WorkflowTriggerProps {
     workflowId: string;
     paramsRunId?: string;
@@ -29,7 +30,7 @@ export interface WorkflowTriggerProps {
         resumeData: Record<string, unknown>;
         runtimeContext: Record<string, unknown>;
     }) => Promise<void>;
-    streamResult: WorkflowWatchResult | null;
+    streamResult: WorkflowRunStreamResult | null;
     isCancellingWorkflowRun: boolean;
     cancelWorkflowRun: ({ workflowId, runId }: {
         workflowId: string;

package/dist/src/ds/components/Table/Cells.d.ts

@@ -15,7 +15,7 @@ export declare const DateTimeCell: ({ dateTime, ...props }: DateTimeCellProps) =
 export interface EntryCellProps extends Omit<CellProps, 'children'> {
     name: React.ReactNode;
     description?: React.ReactNode;
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
     meta?: React.ReactNode;
 }
 export declare const EntryCell: ({ name, description, icon, meta, ...props }: EntryCellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -42,3 +42,5 @@ export * from './components/ui/collapsible';
 export * from './domains/conversation/index';
 export * from './lib/errors';
 export * from './components/assistant-ui/tools/tool-fallback';
+export * from './domains/mcps/index';
+export * from './domains/workflows/runs/workflow-run-list';

package/dist/src/lib/framework.d.ts

@@ -14,6 +14,8 @@ type LinkComponentPaths = {
     networkThreadLink: (networkId: string, threadId: string) => string;
     scorerLink: (scorerId: string) => string;
     toolLink: (toolId: string) => string;
+    mcpServerLink: (serverId: string) => string;
+    workflowRunLink: (workflowId: string, runId: string) => string;
 };
 export interface LinkComponentProviderProps {
     children: React.ReactNode;

package/dist/tokens.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const colors = require('./colors-DLwJ7rFA.cjs');
+const colors = require('./colors-B_l6leHd.cjs');
 
 const BorderWidth = {
   sm: "0.5px"

package/dist/tokens.es.js

@@ -1,4 +1,4 @@
-export { B as BorderColors, C as Colors, I as IconColors } from './colors-DrbbnW3f.js';
+export { B as BorderColors, C as Colors, I as IconColors } from './colors-Br49332d.js';
 
 const BorderWidth = {
   sm: "0.5px"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "6.3.0",
+  "version": "6.3.1-alpha.2",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -100,19 +100,19 @@
     "use-debounce": "^10.0.6",
     "zod": "^4.1.9",
     "zustand": "^5.0.8",
-    "@mastra/react": "0.0.3",
-    "@mastra/client-js": "^0.15.0"
+    "@mastra/react": "0.0.4-alpha.2",
+    "@mastra/client-js": "^0.15.1-alpha.2"
   },
   "peerDependencies": {
-    "@mastra/core": ">=0.20.0-0 <0.21.0-0",
+    "@mastra/core": ">=0.20.1-0 <0.21.0-0",
     "lucide-react": "^0.474.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.8",
-    "@storybook/react-vite": "^9.1.8",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
     "@types/node": "^20.19.0",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
@@ -129,7 +129,7 @@
     "vite": "^6.3.6",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@mastra/core": "0.20.0"
+    "@mastra/core": "0.20.1-alpha.2"
   },
   "homepage": "https://mastra.ai",
   "repository": {

package/dist/src/domains/tools/components/tool-list.d.ts

@@ -1,9 +0,0 @@
-import { GetAgentResponse, GetToolResponse } from '@mastra/client-js';
-export interface ToolListProps {
-    isLoading: boolean;
-    tools: Record<string, GetToolResponse>;
-    agents: Record<string, GetAgentResponse>;
-}
-export declare const ToolList: ({ tools, agents, isLoading }: ToolListProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ToolListSkeleton: () => import("react/jsx-runtime").JSX.Element;
-export declare const ToolListEmpty: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/runs/workflow-runs.d.ts

@@ -1,11 +0,0 @@
-import { WorkflowTriggerProps } from '../workflow/workflow-trigger';
-export interface WorkflowRunsProps extends Omit<WorkflowTriggerProps, 'paramsRunId' | 'workflowId'> {
-    workflowId: string;
-    runId?: string;
-    onPressRun: ({ workflowId, runId }: {
-        workflowId: string;
-        runId: string;
-    }) => void;
-    onPressBackToRuns: () => void;
-}
-export declare const WorkflowRuns: ({ workflowId, runId, onPressRun, onPressBackToRuns, observeWorkflowStream, ...triggerProps }: WorkflowRunsProps) => import("react/jsx-runtime").JSX.Element;