@mastra/playground-ui 6.2.2-alpha.0 → 6.2.2-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/dist/index.cjs.js +574 -167
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.es.js +574 -168
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/src/components/assistant-ui/tools/badges/tool-badge.d.ts +4 -1
  7. package/dist/src/components/ui/dropdown-menu.d.ts +42 -0
  8. package/dist/src/components/ui/syntax-highlighter.d.ts +2 -2
  9. package/dist/src/domains/agents/components/agent-metadata/agent-metadata-model-switcher.d.ts +3 -1
  10. package/dist/src/domains/agents/hooks/use-agent.d.ts +1 -1
  11. package/dist/src/domains/observability/components/span-details.d.ts +5 -2
  12. package/dist/src/domains/observability/components/span-dialog.d.ts +3 -1
  13. package/dist/src/domains/observability/components/trace-dialog.d.ts +5 -1
  14. package/dist/src/domains/scores/components/score-dialog.d.ts +2 -1
  15. package/dist/src/domains/scores/components/score-table.d.ts +11 -0
  16. package/dist/src/domains/scores/components/scorers-dropdown.d.ts +8 -0
  17. package/dist/src/domains/scores/hooks/use-scorers.d.ts +2 -8
  18. package/dist/src/domains/scores/hooks/use-trigger-scorer.d.ts +10 -0
  19. package/dist/src/hooks/use-workflows.d.ts +1 -1
  20. package/package.json +10 -9
package/dist/src/components/assistant-ui/tools/badges/tool-badge.d.ts CHANGED
@@ -6,5 +6,8 @@ export interface ToolBadgeProps {
6
6
  input?: string | Record<string, unknown>;
7
7
  selectionReason?: string;
8
8
  };
9
+ toolOutput: Array<{
10
+ toolId: string;
11
+ }>;
9
12
  }
10
- export declare const ToolBadge: ({ toolName, args, result, networkMetadata }: ToolBadgeProps) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const ToolBadge: ({ toolName, args, result, networkMetadata, toolOutput }: ToolBadgeProps) => import("react/jsx-runtime").JSX.Element;
package/dist/src/components/ui/dropdown-menu.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
2
+ import * as React from 'react';
3
+ /**
4
+ *
5
+ * Right now, these are the props mostly used for the menu
6
+ * if we find out, consumers need more props, we can just extend it
7
+ * with componentProps
8
+ */
9
+ declare function Dropdown({ open, onOpenChange, children, modal, }: {
10
+ open?: boolean;
11
+ onOpenChange?: (open: boolean) => void;
12
+ children: React.ReactNode;
13
+ modal?: boolean;
14
+ }): import("react/jsx-runtime").JSX.Element;
15
+ declare namespace Dropdown {
16
+ var Trigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
17
+ var Content: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
18
+ container?: HTMLElement;
19
+ } & React.RefAttributes<HTMLDivElement>>;
20
+ var Group: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
21
+ var Portal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
22
+ var Item: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
23
+ inset?: boolean;
24
+ } & React.RefAttributes<HTMLDivElement>>;
25
+ var CheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
26
+ var RadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
27
+ var Label: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
28
+ inset?: boolean;
29
+ } & React.RefAttributes<HTMLDivElement>>;
30
+ var Separator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
31
+ var Shortcut: {
32
+ ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
33
+ displayName: string;
34
+ };
35
+ var Sub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
36
+ var SubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
37
+ var SubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
38
+ inset?: boolean;
39
+ } & React.RefAttributes<HTMLDivElement>>;
40
+ var RadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
41
+ }
42
+ export { Dropdown };
package/dist/src/components/ui/syntax-highlighter.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const useCodemirrorTheme: () => import('@uiw/react-codemirror').Extension;
2
- export declare const SyntaxHighlighter: ({ data, className }: {
3
- data: Record<string, unknown>;
2
+ export declare const SyntaxHighlighter: ({ data, className, }: {
3
+ data: Record<string, unknown> | Array<Record<string, unknown>>;
4
4
  className?: string;
5
5
  }) => import("react/jsx-runtime").JSX.Element;
6
6
  export declare function highlight(code: string, language: string): Promise<import('shiki').ThemedToken[][] | null>;
package/dist/src/domains/agents/components/agent-metadata/agent-metadata-model-switcher.d.ts CHANGED
@@ -7,5 +7,7 @@ export interface AgentMetadataModelSwitcherProps {
7
7
  }>;
8
8
  closeEditor: () => void;
9
9
  modelProviders: string[];
10
+ autoSave?: boolean;
11
+ selectProviderPlaceholder?: string;
10
12
  }
11
- export declare const AgentMetadataModelSwitcher: ({ defaultProvider, defaultModel, updateModel, closeEditor, modelProviders, }: AgentMetadataModelSwitcherProps) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const AgentMetadataModelSwitcher: ({ defaultProvider, defaultModel, updateModel, closeEditor, modelProviders, autoSave, selectProviderPlaceholder, }: AgentMetadataModelSwitcherProps) => import("react/jsx-runtime").JSX.Element;
package/dist/src/domains/agents/hooks/use-agent.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const useAgent: (agentId: string) => import('@tanstack/react-query').UseQueryResult<import('@mastra/client-js').GetAgentResponse, Error>;
1
+ export declare const useAgent: (agentId?: string) => import('@tanstack/react-query').UseQueryResult<import('@mastra/client-js').GetAgentResponse | null, Error>;
package/dist/src/domains/observability/components/span-details.d.ts CHANGED
@@ -1,4 +1,7 @@
1
1
  import { AISpanRecord } from '@mastra/core';
2
- export declare function SpanDetails({ span }: {
2
+ interface SpanDetailsProps {
3
3
  span?: AISpanRecord;
4
- }): import("react/jsx-runtime").JSX.Element | null;
4
+ onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void;
5
+ }
6
+ export declare function SpanDetails({ span, onScorerTriggered }: SpanDetailsProps): import("react/jsx-runtime").JSX.Element | null;
7
+ export {};
package/dist/src/domains/observability/components/span-dialog.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { KeyValueListItemData } from '../../../components/ui/elements';
2
2
  import { AISpanRecord } from '@mastra/core';
3
3
  type SpanDialogProps = {
4
+ trace: AISpanRecord;
4
5
  span?: AISpanRecord;
5
6
  spanInfo?: KeyValueListItemData[];
6
7
  isOpen: boolean;
@@ -8,6 +9,7 @@ type SpanDialogProps = {
8
9
  onNext?: () => void;
9
10
  onPrevious?: () => void;
10
11
  onViewToggle?: () => void;
12
+ onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void;
11
13
  };
12
- export declare function SpanDialog({ span, isOpen, onClose, onNext, onPrevious, onViewToggle, spanInfo, }: SpanDialogProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function SpanDialog({ trace, span, isOpen, onClose, onNext, onPrevious, onViewToggle, spanInfo, onScorerTriggered, }: SpanDialogProps): import("react/jsx-runtime").JSX.Element;
13
15
  export {};
package/dist/src/domains/observability/components/trace-dialog.d.ts CHANGED
@@ -8,6 +8,10 @@ type TraceDialogProps = {
8
8
  onNext?: () => void;
9
9
  onPrevious?: () => void;
10
10
  isLoadingSpans?: boolean;
11
+ computeAgentsLink?: () => string;
12
+ computeWorkflowsLink?: () => string;
13
+ onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void;
14
+ initialSpanId?: string;
11
15
  };
12
- export declare function TraceDialog({ traceId, traceSpans, traceDetails, isOpen, onClose, onNext, onPrevious, isLoadingSpans, }: TraceDialogProps): import("react/jsx-runtime").JSX.Element;
16
+ export declare function TraceDialog({ traceId, traceSpans, traceDetails, isOpen, onClose, onNext, onPrevious, isLoadingSpans, computeAgentsLink, computeWorkflowsLink, onScorerTriggered, initialSpanId, }: TraceDialogProps): import("react/jsx-runtime").JSX.Element;
13
17
  export {};
package/dist/src/domains/scores/components/score-dialog.d.ts CHANGED
@@ -7,6 +7,7 @@ type ScoreDialogProps = {
7
7
  onClose: () => void;
8
8
  onNext?: () => void;
9
9
  onPrevious?: () => void;
10
+ computeTraceLink: (traceId: string, spanId?: string) => string;
10
11
  };
11
- export declare function ScoreDialog({ scorer, score, isOpen, onClose, onNext, onPrevious }: ScoreDialogProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare function ScoreDialog({ scorer, score, isOpen, onClose, onNext, onPrevious, computeTraceLink, }: ScoreDialogProps): import("react/jsx-runtime").JSX.Element;
12
13
  export {};
package/dist/src/domains/scores/components/score-table.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ export interface ScoreTableProps {
2
+ scores: Array<{
3
+ type: string;
4
+ scoreId: string;
5
+ scorerName: string;
6
+ score: number;
7
+ createdAt: string;
8
+ }>;
9
+ onItemClick: (scorerName: string) => void;
10
+ }
11
+ export declare const ScoreTable: ({ scores, onItemClick }: ScoreTableProps) => import("react/jsx-runtime").JSX.Element;
package/dist/src/domains/scores/components/scorers-dropdown.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { AISpanRecord } from '@mastra/core';
2
+ export interface ScorersDropdownProps {
3
+ trace: AISpanRecord;
4
+ spanId?: string;
5
+ onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void;
6
+ entityType?: string;
7
+ }
8
+ export declare const ScorersDropdown: ({ trace, spanId, onScorerTriggered, entityType }: ScorersDropdownProps) => import("react/jsx-runtime").JSX.Element;
package/dist/src/domains/scores/hooks/use-scorers.d.ts CHANGED
@@ -9,16 +9,10 @@ type UseScoresByScorerIdProps = {
9
9
  entityId?: string;
10
10
  entityType?: string;
11
11
  };
12
- export declare const useScoresByScorerId: ({ scorerId, page, entityId, entityType }: UseScoresByScorerIdProps) => {
13
- scores: GetScoresResponse | null;
14
- isLoading: boolean;
15
- };
12
+ export declare const useScoresByScorerId: ({ scorerId, page, entityId, entityType }: UseScoresByScorerIdProps) => import('@tanstack/react-query').UseQueryResult<GetScoresResponse, Error>;
16
13
  export declare const useScorer: (scorerId: string) => {
17
14
  scorer: GetScorerResponse | null;
18
15
  isLoading: boolean;
19
16
  };
20
- export declare const useScorers: () => {
21
- scorers: Record<string, GetScorerResponse>;
22
- isLoading: boolean;
23
- };
17
+ export declare const useScorers: () => import('@tanstack/react-query').UseQueryResult<Record<string, GetScorerResponse>, Error>;
24
18
  export {};
package/dist/src/domains/scores/hooks/use-trigger-scorer.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ interface TriggerScoreArgs {
2
+ scorerName: string;
3
+ traceId: string;
4
+ spanId?: string;
5
+ }
6
+ export declare const useTriggerScorer: (onScorerTriggered: (scorerName: string, traceId: string, spanId?: string) => void) => import('@tanstack/react-query').UseMutationResult<{
7
+ status: string;
8
+ message: string;
9
+ }, Error, TriggerScoreArgs, unknown>;
10
+ export {};
package/dist/src/hooks/use-workflows.d.ts CHANGED
@@ -14,7 +14,7 @@ export type ExtendedWorkflowWatchResult = WorkflowWatchResult & {
14
14
  stack?: string;
15
15
  } | null;
16
16
  };
17
- export declare const useWorkflow: (workflowId: string, enabled?: boolean) => import('@tanstack/react-query').UseQueryResult<import('@mastra/client-js').GetWorkflowResponse, Error>;
17
+ export declare const useWorkflow: (workflowId?: string) => import('@tanstack/react-query').UseQueryResult<import('@mastra/client-js').GetWorkflowResponse | null, Error>;
18
18
  export declare const useLegacyWorkflow: (workflowId: string) => {
19
19
  legacyWorkflow: LegacyWorkflow<import('@mastra/core/workflows/legacy').LegacyStep<string, any, any, import('@mastra/core/workflows/legacy').StepExecutionContext<any, import('@mastra/core/workflows/legacy').WorkflowContext<any, import('@mastra/core/workflows/legacy').LegacyStep<string, any, any, any>[], Record<string, any>>>>[], string, any, any> | null;
20
20
  isLoading: boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mastra/playground-ui",
3
3
  "type": "module",
4
- "version": "6.2.2-alpha.0",
4
+ "version": "6.2.2-alpha.3",
5
5
  "description": "Mastra Playground components",
6
6
  "main": "dist/index.umd.js",
7
7
  "module": "dist/index.es.js",
@@ -55,6 +55,7 @@
55
55
  "@radix-ui/react-checkbox": "^1.3.2",
56
56
  "@radix-ui/react-collapsible": "^1.1.11",
57
57
  "@radix-ui/react-dialog": "^1.1.14",
58
+ "@radix-ui/react-dropdown-menu": "^2.1.16",
58
59
  "@radix-ui/react-hover-card": "^1.1.14",
59
60
  "@radix-ui/react-label": "^2.1.7",
60
61
  "@radix-ui/react-popover": "^1.1.14",
@@ -73,11 +74,11 @@
73
74
  "@types/react-syntax-highlighter": "^15.5.13",
74
75
  "@uiw/codemirror-theme-dracula": "^4.23.14",
75
76
  "@uiw/react-codemirror": "^4.23.14",
76
- "@xyflow/react": "^12.8.4",
77
+ "@xyflow/react": "^12.8.5",
77
78
  "cmdk": "^1.1.1",
78
79
  "date-fns": "^4.1.0",
79
80
  "json-schema-to-zod": "^2.6.1",
80
- "motion": "^12.23.12",
81
+ "motion": "^12.23.13",
81
82
  "prettier": "^3.6.2",
82
83
  "prism-react-renderer": "^2.4.1",
83
84
  "react-code-block": "1.1.3",
@@ -96,19 +97,19 @@
96
97
  "tailwindcss-animate": "^1.0.7",
97
98
  "unified": "^11.0.5",
98
99
  "use-debounce": "^10.0.6",
99
- "zod": "^4.1.8",
100
+ "zod": "^4.1.9",
100
101
  "zustand": "^5.0.8",
101
- "@mastra/client-js": "^0.13.2-alpha.0"
102
+ "@mastra/client-js": "^0.13.2-alpha.3"
102
103
  },
103
104
  "peerDependencies": {
104
- "@mastra/core": ">=0.17.2-0 <0.18.0-0",
105
+ "@mastra/core": ">=0.18.0-0 <0.19.0-0",
105
106
  "lucide-react": "^0.474.0",
106
107
  "react": ">=19.0.0",
107
108
  "react-dom": ">=19.0.0",
108
109
  "tailwindcss": "^3.0.0"
109
110
  },
110
111
  "devDependencies": {
111
- "@storybook/addon-docs": "^9.1.5",
112
+ "@storybook/addon-docs": "^9.1.7",
112
113
  "@storybook/react-vite": "^9.1.6",
113
114
  "@types/node": "^20.19.0",
114
115
  "@types/react": "^19.1.9",
@@ -119,14 +120,14 @@
119
120
  "clsx": "^2.1.1",
120
121
  "postcss": "^8.5.6",
121
122
  "rollup-plugin-node-externals": "^8.0.1",
122
- "storybook": "^9.1.5",
123
+ "storybook": "^9.1.6",
123
124
  "tailwind-merge": "^3.3.1",
124
125
  "tailwindcss": "^3.4.17",
125
126
  "typescript": "^5.8.3",
126
127
  "vite": "^6.3.6",
127
128
  "vite-plugin-dts": "^4.5.4",
128
129
  "vite-plugin-lib-inject-css": "^2.2.2",
129
- "@mastra/core": "0.17.2-alpha.0"
130
+ "@mastra/core": "0.18.0-alpha.3"
130
131
  },
131
132
  "homepage": "https://mastra.ai",
132
133
  "repository": {