@mastra/playground-ui 7.0.0-beta.8 → 7.0.0-beta.9

package/dist/src/components/ui/elements/buttons/button.d.ts

@@ -3,5 +3,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     className?: string;
     children: React.ReactNode;
     variant?: 'primary' | 'outline' | 'ghost';
+    isFaded?: boolean;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/ui/elements/buttons/combined-buttons.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from '../../../../../node_modules/@types/react';
+export interface CombinedButtonsProps {
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const CombinedButtons: ({ className, children }: CombinedButtonsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/buttons/index.d.ts

@@ -1 +1,2 @@
 export * from './button';
+export * from './combined-buttons';

package/dist/src/components/ui/elements/form-fields/search-field.d.ts

@@ -1,2 +1,5 @@
 import { InputFieldProps } from '..';
-export declare function SearchField(props: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+export type SearchFieldProps = InputFieldProps & {
+    onReset?: () => void;
+};
+export declare function SearchField({ onReset, ...props }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/side-dialog/side-dialog-top.d.ts

@@ -1,6 +1,5 @@
 export type SideDialogTopProps = {
     children?: React.ReactNode;
-    withTopSeparator?: boolean;
     className?: string;
 };
-export declare function SideDialogTop({ children, withTopSeparator, className }: SideDialogTopProps): import("react/jsx-runtime").JSX.Element;
+export declare function SideDialogTop({ children, className }: SideDialogTopProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/configuration/components/playground-config-guard.d.ts

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

package/dist/src/domains/configuration/context/studio-config-context.d.ts

@@ -7,5 +7,6 @@ export declare const StudioConfigContext: import('../../../../node_modules/@type
 export declare const useStudioConfig: () => StudioConfigContextType;
 export interface StudioConfigProviderProps {
     children: React.ReactNode;
+    endpoint?: string;
 }
-export declare const StudioConfigProvider: ({ children }: StudioConfigProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StudioConfigProvider: ({ children, endpoint }: StudioConfigProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/configuration/hooks/use-mastra-instance-status.d.ts

@@ -0,0 +1,4 @@
+export type UseMastraInstanceStatusResponse = {
+    status: 'active' | 'inactive';
+};
+export declare const useMastraInstanceStatus: (endpoint?: string) => import('@tanstack/react-query').UseQueryResult<UseMastraInstanceStatusResponse, Error>;

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

@@ -1,3 +1,4 @@
 export * from './context/studio-config-context';
 export * from './components/studio-config-form';
 export * from './types';
+export * from './components/playground-config-guard';

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

@@ -6,10 +6,8 @@ export declare function useTraceInfo(trace: SpanRecord | undefined): {
 }[];
 type getSpanInfoProps = {
     span: SpanRecord | undefined;
-    withTraceId?: boolean;
-    withSpanId?: boolean;
 };
-export declare function getSpanInfo({ span, withTraceId, withSpanId }: getSpanInfoProps): {
+export declare function getSpanInfo({ span }: getSpanInfoProps): {
     key: string;
     label: string;
     value: string;

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

@@ -1,5 +1,5 @@
 export * from './trace-timeline';
-export * from './trace-timeline-legend';
+export * from './trace-timeline-tools';
 export * from './trace-timeline-span';
 export * from './shared';
 export * from './trace-dialog';

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

@@ -1,6 +1,3 @@
+import { UISpanStyle } from '../types';
 export declare const spanTypePrefixes: string[];
-export declare function getSpanTypeUi(type: string): {
-    icon: React.ReactNode;
-    color: string;
-    label: string;
-} | null;
+export declare function getSpanTypeUi(type: string): UISpanStyle | null;

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

@@ -1,6 +1,6 @@
 import { KeyValueListItemData } from '../../../components/ui/elements';
 import { SpanRecord } from '@mastra/core/storage';
-import { ListScoresResponse } from '@mastra/client-js';
+import { ListScoresResponse, GetScorerResponse } from '@mastra/client-js';
 type SpanDialogProps = {
     trace: SpanRecord;
     span?: SpanRecord;
@@ -16,6 +16,8 @@ type SpanDialogProps = {
     defaultActiveTab?: string;
     initialScoreId?: string;
     computeTraceLink: (traceId: string, spanId?: string) => string;
+    scorers?: Record<string, GetScorerResponse>;
+    isLoadingScorers?: boolean;
 };
-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 declare function SpanDialog({ trace, span, spanScoresData, onSpanScoresPageChange, isLoadingSpanScoresData, isOpen, onClose, onNext, onPrevious, onViewToggle, spanInfo, defaultActiveTab, initialScoreId, computeTraceLink, scorers, isLoadingScorers, }: SpanDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,10 @@
+import { GetScorerResponse } from '@mastra/client-js';
 export interface SpanScoringProps {
     traceId?: string;
     spanId?: string;
     entityType?: string;
     isTopLevelSpan?: boolean;
+    scorers?: Record<string, GetScorerResponse>;
+    isLoadingScorers?: boolean;
 }
-export declare const SpanScoring: ({ traceId, spanId, entityType, isTopLevelSpan }: SpanScoringProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SpanScoring: ({ traceId, spanId, entityType, isTopLevelSpan, scorers, isLoadingScorers, }: SpanScoringProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { KeyValueListItemData } from '../../../index';
-import { ListScoresResponse } from '@mastra/client-js';
+import { ListScoresResponse, GetScorerResponse } from '@mastra/client-js';
 import { SpanRecord } from '@mastra/core/storage';
 type SpanTabsProps = {
     trace?: SpanRecord;
@@ -11,6 +11,8 @@ type SpanTabsProps = {
     defaultActiveTab?: string;
     initialScoreId?: string;
     computeTraceLink: (traceId: string, spanId?: string) => string;
+    scorers?: Record<string, GetScorerResponse>;
+    isLoadingScorers?: boolean;
 };
-export declare function SpanTabs({ trace, span, spanScoresData, onSpanScoresPageChange, isLoadingSpanScoresData, spanInfo, defaultActiveTab, initialScoreId, computeTraceLink, }: SpanTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function SpanTabs({ trace, span, spanScoresData, onSpanScoresPageChange, isLoadingSpanScoresData, spanInfo, defaultActiveTab, initialScoreId, computeTraceLink, scorers, isLoadingScorers, }: SpanTabsProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,6 @@
+type SpanTypeIconProps = {
+    icon: React.ReactNode;
+    color?: string;
+};
+export declare function SpanTypeIcon({ icon, color }: SpanTypeIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+type TimelineExpandColProps = {
+    isSelected?: boolean;
+    isFaded?: boolean;
+    isExpanded?: boolean;
+    toggleChildren?: () => void;
+    expandAllDescendants?: () => void;
+    expandedSpanIds?: string[];
+    totalDescendants?: number;
+    allDescendantsExpanded?: boolean;
+    numOfChildren?: number;
+};
+export declare function TimelineExpandCol({ isSelected, isFaded, isExpanded, toggleChildren, expandAllDescendants, totalDescendants, allDescendantsExpanded, numOfChildren, }: TimelineExpandColProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { UISpan, UISpanStyle } from '../types';
+type TimelineNameColProps = {
+    span: UISpan;
+    spanUI?: UISpanStyle | null;
+    isFaded?: boolean;
+    depth?: number;
+    onSpanClick?: (id: string) => void;
+    selectedSpanId?: string;
+    isLastChild?: boolean;
+    hasChildren?: boolean;
+    isRootSpan?: boolean;
+    isExpanded?: boolean;
+    toggleChildren?: () => void;
+};
+export declare function TimelineNameCol({ span, spanUI, isFaded, depth, onSpanClick, selectedSpanId, isLastChild, hasChildren, isRootSpan, isExpanded, toggleChildren, }: TimelineNameColProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+type TimelineStructureSignProps = {
+    isLastChild?: boolean;
+    hasChildren?: boolean;
+    expanded?: boolean;
+};
+export declare function TimelineStructureSign({ isLastChild, hasChildren, expanded, }: TimelineStructureSignProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { UISpan } from '../types';
+type TimelineTimingColProps = {
+    span: UISpan;
+    selectedSpanId?: string;
+    isFaded?: boolean;
+    overallLatency?: number;
+    overallStartTime?: string;
+    overallEndTime?: string;
+    color?: string;
+};
+export declare function TimelineTimingCol({ span, selectedSpanId, isFaded, overallLatency, overallStartTime, color, }: TimelineTimingColProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,4 +1,5 @@
 import { SpanRecord } from '@mastra/core/storage';
+import { GetScorerResponse } from '@mastra/client-js';
 type TraceDialogProps = {
     traceSpans?: SpanRecord[];
     traceId?: string;
@@ -14,6 +15,8 @@ type TraceDialogProps = {
     initialSpanId?: string;
     initialSpanTab?: string;
     initialScoreId?: string;
+    scorers?: Record<string, GetScorerResponse>;
+    isLoadingScorers?: boolean;
 };
-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 declare function TraceDialog({ traceId, traceSpans, traceDetails, isOpen, onClose, onNext, onPrevious, isLoadingSpans, computeTraceLink, initialSpanId, initialSpanTab, initialScoreId, scorers, isLoadingScorers, }: TraceDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,6 +8,11 @@ type TraceTimelineSpanProps = {
     overallLatency?: number;
     overallStartTime?: string;
     overallEndTime?: string;
+    fadedTypes?: string[];
+    searchPhrase?: string;
+    featuredSpanIds?: string[];
+    expandedSpanIds?: string[];
+    setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;
 };
-export declare function TraceTimelineSpan({ span, depth, onSpanClick, selectedSpanId, isLastChild, overallLatency, overallStartTime, overallEndTime, }: TraceTimelineSpanProps): import("react/jsx-runtime").JSX.Element;
+export declare function TraceTimelineSpan({ span, depth, onSpanClick, selectedSpanId, isLastChild, overallLatency, overallStartTime, overallEndTime, fadedTypes, searchPhrase, featuredSpanIds, expandedSpanIds, setExpandedSpanIds, }: TraceTimelineSpanProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,12 @@
+import { SpanRecord } from '@mastra/core/storage';
+type TraceTimelineLegendProps = {
+    spans?: SpanRecord[];
+    fadedTypes?: string[];
+    onLegendClick?: (val: string) => void;
+    onLegendReset?: () => void;
+    searchPhrase?: string;
+    onSearchPhraseChange?: (val: string) => void;
+    traceId?: string;
+};
+export declare function TraceTimelineTools({ spans, fadedTypes, onLegendClick, onLegendReset, onSearchPhraseChange, traceId, }: TraceTimelineLegendProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -4,6 +4,10 @@ type TraceTimelineProps = {
     onSpanClick: (id: string) => void;
     selectedSpanId?: string;
     isLoading?: boolean;
+    fadedTypes?: string[];
+    expandedSpanIds?: string[];
+    setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;
+    featuredSpanIds?: string[];
 };
-export declare function TraceTimeline({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading }: TraceTimelineProps): import("react/jsx-runtime").JSX.Element;
+export declare function TraceTimeline({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, fadedTypes, expandedSpanIds, setExpandedSpanIds, featuredSpanIds, }: TraceTimelineProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,4 +6,17 @@ export type UISpan = {
     startTime: string;
     endTime?: string;
     spans?: UISpan[];
+    parentSpanId?: string | null;
 };
+export type UISpanStyle = {
+    icon?: React.ReactNode;
+    color?: string;
+    label?: string;
+    bgColor?: string;
+    typePrefix: string;
+};
+export type UISpanState = {
+    spanId: string;
+    expanded: boolean;
+};
+export type UISpanType = 'agent' | 'workflow' | 'tool' | 'model' | 'other';

package/dist/src/domains/observability/utils/get-descendant-ids.d.ts

@@ -0,0 +1,2 @@
+import { UISpan } from '../types';
+export declare function getSpanDescendantIds(span: UISpan): string[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "7.0.0-beta.8",
+  "version": "7.0.0-beta.9",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -111,10 +111,10 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^3.0.0",
-    "@mastra/ai-sdk": "^1.0.0-beta.6",
-    "@mastra/client-js": "^1.0.0-beta.8",
+    "@mastra/ai-sdk": "^1.0.0-beta.7",
     "@mastra/schema-compat": "1.0.0-beta.2",
-    "@mastra/react": "0.1.0-beta.8"
+    "@mastra/react": "0.1.0-beta.9",
+    "@mastra/client-js": "^1.0.0-beta.9"
   },
   "devDependencies": {
     "@storybook/addon-docs": "^9.1.16",
@@ -139,10 +139,10 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.0.12",
-    "@mastra/ai-sdk": "^1.0.0-beta.6",
-    "@mastra/react": "0.1.0-beta.8",
-    "@mastra/core": "1.0.0-beta.8",
-    "@mastra/client-js": "^1.0.0-beta.8",
+    "@mastra/ai-sdk": "^1.0.0-beta.7",
+    "@mastra/core": "1.0.0-beta.9",
+    "@mastra/client-js": "^1.0.0-beta.9",
+    "@mastra/react": "0.1.0-beta.9",
     "@mastra/schema-compat": "1.0.0-beta.2"
   },
   "homepage": "https://mastra.ai",

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

@@ -1,6 +0,0 @@
-import { SpanRecord } from '@mastra/core/storage';
-type TraceTimelineLegendProps = {
-    spans?: SpanRecord[];
-};
-export declare function TraceTimelineLegend({ spans }: TraceTimelineLegendProps): import("react/jsx-runtime").JSX.Element;
-export {};