@mastra/playground-ui 7.0.0-beta.4 → 7.0.0-beta.6

package/dist/src/components/dynamic-form/index.d.ts

@@ -7,6 +7,7 @@ interface DynamicFormProps<T extends z.ZodSchema> {
     submitButtonLabel?: string;
     className?: string;
     readOnly?: boolean;
+    children?: React.ReactNode;
 }
-export declare function DynamicForm<T extends z.ZodSchema>({ schema, onSubmit, defaultValues, isSubmitLoading, submitButtonLabel, className, readOnly, }: DynamicFormProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function DynamicForm<T extends z.ZodSchema>({ schema, onSubmit, defaultValues, isSubmitLoading, submitButtonLabel, className, readOnly, children, }: DynamicFormProps<T>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/src/components/ui/autoform/CustomAutoForm.d.ts

@@ -0,0 +1,2 @@
+import { AutoFormProps } from '@autoform/react';
+export declare function CustomAutoForm<T extends Record<string, any>>({ schema, onSubmit, defaultValues, values, children, uiComponents, formComponents, withSubmit, onFormInit, formProps, }: AutoFormProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const inputVariants: (props?: ({
-    variant?: "default" | "filled" | "unstyled" | null | undefined;
+    variant?: "default" | "unstyled" | "filled" | null | undefined;
     customSize?: "default" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {

package/dist/src/domains/observability/components/tracing-run-options.d.ts

@@ -0,0 +1 @@
+export declare const TracingRunOptions: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/observability/context/tracing-settings-context.d.ts

@@ -0,0 +1,18 @@
+import { TracingOptions } from '@mastra/core/observability';
+import { ReactNode } from '../../../../node_modules/@types/react';
+export type TracingSettings = {
+    tracingOptions?: TracingOptions;
+};
+export type TracingSettingsContextType = {
+    setSettings: (settings: TracingSettings) => void;
+    resetAll: () => void;
+    settings?: TracingSettings;
+};
+export declare const TracingSettingsContext: import('../../../../node_modules/@types/react').Context<TracingSettingsContextType>;
+export interface TracingSettingsProviderProps {
+    children: ReactNode;
+    entityId: string;
+    entityType: 'workflow' | 'agent';
+}
+export declare const TracingSettingsProvider: ({ children, entityId, entityType }: TracingSettingsProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useTracingSettings: () => TracingSettingsContextType;

package/dist/src/domains/observability/hooks/use-tracing-settings-state.d.ts

@@ -0,0 +1,10 @@
+import { TracingSettings } from '../context/tracing-settings-context';
+export interface TracingSettingsStateProps {
+    entityId: string;
+    entityType: 'workflow' | 'agent';
+}
+export declare function useTracingSettingsState({ entityId, entityType }: TracingSettingsStateProps): {
+    settings: TracingSettings | undefined;
+    setSettings: (settingsValue: TracingSettings) => void;
+    resetAll: () => void;
+};

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

@@ -1,3 +1,4 @@
 export * from './utils/format-hierarchical-spans';
 export * from './types';
 export * from './components';
+export * from './context/tracing-settings-context';

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

@@ -1,18 +1,38 @@
 import { WorkflowRunState, WorkflowStreamResult } from '@mastra/core/workflows';
+import { Dispatch, SetStateAction, ReactNode } from '../../../../node_modules/@types/react';
+import { WorkflowTriggerProps } from '../workflow/workflow-trigger';
+import { TimeTravelParams } from '@mastra/client-js';
 export type WorkflowRunStreamResult = WorkflowStreamResult<any, any, any, any>;
 type WorkflowRunContextType = {
     result: WorkflowRunStreamResult | null;
-    setResult: React.Dispatch<React.SetStateAction<WorkflowRunStreamResult | null>>;
+    setResult: Dispatch<SetStateAction<WorkflowRunStreamResult | null>>;
     payload: any;
-    setPayload: React.Dispatch<React.SetStateAction<any>>;
+    setPayload: Dispatch<SetStateAction<any>>;
     clearData: () => void;
     snapshot?: WorkflowRunState;
     runId?: string;
-    setRunId: React.Dispatch<React.SetStateAction<string>>;
-};
+    setRunId: Dispatch<SetStateAction<string>>;
+    workflowError: Error | null;
+    observeWorkflowStream?: ({ workflowId, runId, storeRunResult, }: {
+        workflowId: string;
+        runId: string;
+        storeRunResult: WorkflowRunStreamResult | null;
+    }) => void;
+    closeStreamsAndReset: () => void;
+    timeTravelWorkflowStream: (params: {
+        workflowId: string;
+        requestContext: Record<string, unknown>;
+    } & Omit<TimeTravelParams, 'requestContext'>) => Promise<void>;
+    runSnapshot?: WorkflowRunState;
+    isLoadingRunExecutionResult?: boolean;
+    withoutTimeTravel?: boolean;
+} & Omit<WorkflowTriggerProps, 'paramsRunId' | 'setRunId' | 'observeWorkflowStream'>;
 export declare const WorkflowRunContext: import('../../../../node_modules/@types/react').Context<WorkflowRunContextType>;
-export declare function WorkflowRunProvider({ children, snapshot, }: {
-    children: React.ReactNode;
+export declare function WorkflowRunProvider({ children, snapshot, workflowId, initialRunId, withoutTimeTravel, }: {
+    children: ReactNode;
     snapshot?: WorkflowRunState;
+    workflowId: string;
+    initialRunId?: string;
+    withoutTimeTravel?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/domains/workflows/hooks/use-workflows-actions.d.ts

@@ -1,3 +1,4 @@
+import { TimeTravelParams } from '@mastra/client-js';
 import { WorkflowStreamResult as CoreWorkflowStreamResult } from '@mastra/core/workflows';
 export declare const useExecuteWorkflow: () => {
     startWorkflowRun: import('@tanstack/react-query').UseMutationResult<void, Error, {
@@ -42,6 +43,10 @@ export declare const useStreamWorkflow: () => {
         resumeData: Record<string, unknown>;
         requestContext: Record<string, unknown>;
     }, unknown>;
+    timeTravelWorkflowStream: import('@tanstack/react-query').UseMutationResult<void, Error, {
+        workflowId: string;
+        requestContext: Record<string, unknown>;
+    } & Omit<TimeTravelParams, "requestContext">, unknown>;
 };
 export declare const useCancelWorkflowRun: () => import('@tanstack/react-query').UseMutationResult<{
     message: string;

package/dist/src/domains/workflows/workflow/workflow-input-data.d.ts

@@ -6,5 +6,6 @@ export interface WorkflowInputDataProps {
     submitButtonLabel: string;
     onSubmit: (data: any) => void;
     withoutSubmit?: boolean;
+    children?: React.ReactNode;
 }
-export declare const WorkflowInputData: ({ schema, defaultValues, withoutSubmit, isSubmitLoading, submitButtonLabel, onSubmit, }: WorkflowInputDataProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WorkflowInputData: ({ schema, defaultValues, withoutSubmit, isSubmitLoading, submitButtonLabel, onSubmit, children, }: WorkflowInputDataProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/workflow-step-action-bar.d.ts

@@ -9,5 +9,6 @@ export interface WorkflowStepActionBarProps {
     mapConfig?: string;
     onShowNestedGraph?: () => void;
     status?: 'running' | 'success' | 'failed' | 'suspended' | 'waiting';
+    stepKey?: string;
 }
-export declare const WorkflowStepActionBar: ({ input, output, resumeData, suspendOutput, error, mapConfig, stepName, stepId, onShowNestedGraph, status, }: WorkflowStepActionBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WorkflowStepActionBar: ({ input, output, resumeData, suspendOutput, error, mapConfig, stepName, stepId, onShowNestedGraph, status, stepKey, }: WorkflowStepActionBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/workflows/workflow/workflow-time-travel-form.d.ts

@@ -0,0 +1,5 @@
+export type WorkflowTimeTravelFormProps = {
+    stepKey: string;
+    closeModal: () => void;
+};
+export declare const WorkflowTimeTravelForm: ({ stepKey, closeModal }: WorkflowTimeTravelFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/hooks/use-workflow-runs.d.ts

@@ -1,4 +1,220 @@
 export declare const useWorkflowRuns: (workflowId: string, { enabled }?: {
     enabled?: boolean;
-}) => import('@tanstack/react-query').UseQueryResult<import('@mastra/core/storage').WorkflowRuns, Error>;
-export declare const useWorkflowRunExecutionResult: (workflowId: string, runId: string) => import('@tanstack/react-query').UseQueryResult<import('@mastra/core/workflows').WorkflowState, Error>;
+}) => {
+    setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
+    data: import('@mastra/core/storage').WorkflowRun[];
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    fetchNextPage: (options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchNextPageError: boolean;
+    isFetchingNextPage: boolean;
+    isFetchPreviousPageError: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import('@tanstack/react-query').RefetchOptions) => Promise<import('@tanstack/react-query').QueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchStatus: import('@tanstack/react-query').FetchStatus;
+    promise: Promise<import('@mastra/core/storage').WorkflowRun[]>;
+} | {
+    setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
+    data: import('@mastra/core/storage').WorkflowRun[];
+    error: null;
+    isError: false;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: true;
+    isPlaceholderData: false;
+    status: "success";
+    fetchNextPage: (options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import('@tanstack/react-query').RefetchOptions) => Promise<import('@tanstack/react-query').QueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchStatus: import('@tanstack/react-query').FetchStatus;
+    promise: Promise<import('@mastra/core/storage').WorkflowRun[]>;
+} | {
+    setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
+    data: undefined;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    fetchNextPage: (options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import('@tanstack/react-query').RefetchOptions) => Promise<import('@tanstack/react-query').QueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchStatus: import('@tanstack/react-query').FetchStatus;
+    promise: Promise<import('@mastra/core/storage').WorkflowRun[]>;
+} | {
+    setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoading: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    fetchNextPage: (options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import('@tanstack/react-query').RefetchOptions) => Promise<import('@tanstack/react-query').QueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchStatus: import('@tanstack/react-query').FetchStatus;
+    promise: Promise<import('@mastra/core/storage').WorkflowRun[]>;
+} | {
+    setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    fetchNextPage: (options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isLoading: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import('@tanstack/react-query').RefetchOptions) => Promise<import('@tanstack/react-query').QueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchStatus: import('@tanstack/react-query').FetchStatus;
+    promise: Promise<import('@mastra/core/storage').WorkflowRun[]>;
+} | {
+    setEndOfListElement: (node: HTMLDivElement | null) => (() => void) | undefined;
+    data: import('@mastra/core/storage').WorkflowRun[];
+    isError: false;
+    error: null;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: true;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    status: "success";
+    fetchNextPage: (options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchPreviousPage: (options?: import('@tanstack/react-query').FetchPreviousPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import('@tanstack/react-query').RefetchOptions) => Promise<import('@tanstack/react-query').QueryObserverResult<import('@mastra/core/storage').WorkflowRun[], Error>>;
+    fetchStatus: import('@tanstack/react-query').FetchStatus;
+    promise: Promise<import('@mastra/core/storage').WorkflowRun[]>;
+};
+export declare const useWorkflowRunExecutionResult: (workflowId: string, runId: string, refetchInterval?: number) => import('@tanstack/react-query').UseQueryResult<import('@mastra/core/workflows').WorkflowState, Error>;

package/dist/src/types.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "7.0.0-beta.4",
+  "version": "7.0.0-beta.6",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -82,7 +82,6 @@
     "@xyflow/react": "^12.9.3",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
-    "json-schema-to-zod": "^2.6.1",
     "motion": "^12.23.22",
     "prettier": "^3.6.2",
     "prism-react-renderer": "^2.4.1",
@@ -103,8 +102,7 @@
     "unified": "^11.0.5",
     "use-debounce": "^10.0.6",
     "zod": "^4.1.12",
-    "zustand": "^5.0.8",
-    "@mastra/ai-sdk": "^1.0.0-beta.3"
+    "zustand": "^5.0.8"
   },
   "peerDependencies": {
     "@mastra/core": ">=1.0.0-0 <2.0.0-0",
@@ -113,8 +111,10 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^3.0.0",
-    "@mastra/client-js": "^1.0.0-beta.4",
-    "@mastra/react": "0.1.0-beta.4"
+    "@mastra/react": "0.1.0-beta.6",
+    "@mastra/client-js": "^1.0.0-beta.6",
+    "@mastra/ai-sdk": "^1.0.0-beta.5",
+    "@mastra/schema-compat": "1.0.0-beta.2"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.16",
@@ -124,8 +124,8 @@
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.4",
-    "@vitest/coverage-v8": "4.0.8",
-    "@vitest/ui": "4.0.8",
+    "@vitest/coverage-v8": "4.0.12",
+    "@vitest/ui": "4.0.12",
     "autoprefixer": "^10.4.22",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -138,10 +138,12 @@
     "vite": "^7.1.9",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^4.0.8",
-    "@mastra/client-js": "^1.0.0-beta.4",
-    "@mastra/core": "1.0.0-beta.4",
-    "@mastra/react": "0.1.0-beta.4"
+    "vitest": "4.0.12",
+    "@mastra/ai-sdk": "^1.0.0-beta.5",
+    "@mastra/client-js": "^1.0.0-beta.6",
+    "@mastra/core": "1.0.0-beta.6",
+    "@mastra/schema-compat": "1.0.0-beta.2",
+    "@mastra/react": "0.1.0-beta.6"
   },
   "homepage": "https://mastra.ai",
   "repository": {