@mastra/playground-ui 6.1.0 → 6.1.1-alpha.0

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

@@ -1,12 +1,7 @@
 import { default as React } from '../../../../../node_modules/@types/react';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    as?: React.ElementType;
     className?: string;
-    href?: string;
-    to?: string;
-    prefetch?: boolean | null;
     children: React.ReactNode;
     variant?: 'primary' | 'outline' | 'ghost';
-    target?: string;
 }
-export declare const Button: ({ className, as, variant, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/ui/elements/date-time-picker/date-picker.d.ts

@@ -0,0 +1,4 @@
+import { DayPicker } from 'react-day-picker';
+import * as React from 'react';
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+export declare function DatePicker({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/date-time-picker/date-time-picker.d.ts

@@ -0,0 +1,31 @@
+import { DayPickerSingleProps } from 'react-day-picker';
+import * as React from 'react';
+type CommonProps = Omit<DayPickerSingleProps, 'mode' | 'selected' | 'onSelect'> & {
+    value: Date | undefined | null;
+    minValue?: Date | null;
+    maxValue?: Date | null;
+    defaultTimeStrValue?: string;
+    onValueChange: (date: Date | undefined) => void;
+};
+export type DateTimePickerProps = (CommonProps & {
+    children?: never;
+    className?: string;
+    placeholder?: string;
+}) | (CommonProps & {
+    children: React.ReactNode;
+    className?: never;
+    placeholder?: string;
+});
+export declare const DateTimePicker: React.FC<DateTimePickerProps>;
+export declare const DateTimePickerContent: ({ value, minValue, maxValue, onValueChange, setOpenPopover, placeholder, className, defaultTimeStrValue, ...props }: CommonProps & {
+    setOpenPopover?: (open: boolean) => void;
+    placeholder?: string;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+type DefaultButtonProps = {
+    className?: string;
+    placeholder?: string;
+    value: Date | undefined | null;
+};
+export declare const DefaultTrigger: React.ForwardRefExoticComponent<DefaultButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/src/components/ui/elements/date-time-picker/index.d.ts

@@ -0,0 +1 @@
+export * from './date-time-picker';

package/dist/src/components/ui/elements/date-time-picker/time-picker.d.ts

@@ -0,0 +1,7 @@
+type TimePickerProps = {
+    defaultValue?: string;
+    onValueChange: (value: string) => void;
+    className?: string;
+};
+export declare function TimePicker({ defaultValue, onValueChange, className }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,3 +1,7 @@
-export declare function EntryListCell({ children }: {
+export declare function EntryListTextCell({ children, isLoading }: {
     children: React.ReactNode;
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+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,8 +1,9 @@
 import { Column } from './shared';
-export declare function EntryListItem({ item, selectedItem, onClick, children, columns, }: {
+export declare function EntryListItem({ item, selectedItemId, onClick, children, columns, isLoading, }: {
     item: any;
-    selectedItem: any | null;
-    onClick?: (score: string) => void;
+    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.d.ts

@@ -1,9 +1,10 @@
 import { Column } from './shared';
-export declare function EntryList({ items, selectedItem, onItemClick, isLoading, total, page, hasMore, onNextPage, onPrevPage, perPage, columns, searchTerm, }: {
-    items: any[];
-    selectedItem: Record<string, any> | null;
+export declare function EntryList({ items: dataItems, selectedItemId, onItemClick, isLoading, isLoadingNextPage, total, page, hasMore, onNextPage, onPrevPage, perPage, columns, searchTerm, setEndOfListElement, }: {
+    items: Record<string, any>[];
+    selectedItemId?: string;
     onItemClick?: (item: string) => void;
     isLoading?: boolean;
+    isLoadingNextPage?: boolean;
     total?: number;
     page?: number;
     hasMore?: boolean;
@@ -12,4 +13,5 @@ export declare function EntryList({ items, selectedItem, onItemClick, isLoading,
     perPage?: number;
     columns?: Column[];
     searchTerm?: string;
+    setEndOfListElement: (element: HTMLDivElement | null) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,2 @@
 export * from './entity-main-header';
+export * from './page-header';

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

@@ -0,0 +1,8 @@
+type PageHeaderProps = {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+    className?: string;
+};
+export declare function PageHeader({ title, description, icon, className }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,2 +1,7 @@
 export * from './form-fields';
 export * from './key-value-list';
+export * from './entry-list';
+export * from './side-dialog';
+export * from './headers';
+export * from './date-time-picker';
+export * from './text';

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

@@ -3,3 +3,5 @@ export * from './side-dialog-header';
 export * from './side-dialog-footer';
 export * from './side-dialog-content';
 export * from './side-dialog-top';
+export * from './side-dialog-code-section';
+export * from './side-dialog-heading';

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

@@ -0,0 +1,5 @@
+export type SideDialogCodeSectionProps = {
+    title: string;
+    codeStr?: string;
+};
+export declare function SideDialogCodeSection({ codeStr, title }: SideDialogCodeSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export type SideDialogHeadingProps = {
+    children?: React.ReactNode;
+    className?: string;
+    as?: 'h1' | 'h2';
+};
+export declare function SideDialogHeading({ children, className, as }: SideDialogHeadingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,5 +3,6 @@ export type SideDialogTopProps = {
     onNext?: (() => void) | null;
     onPrevious?: (() => void) | null;
     showInnerNav?: boolean;
+    className?: string;
 };
-export declare function SideDialogTop({ children, onNext, onPrevious, showInnerNav }: SideDialogTopProps): import("react/jsx-runtime").JSX.Element;
+export declare function SideDialogTop({ children, onNext, onPrevious, showInnerNav, className }: SideDialogTopProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,12 @@
-export declare function SideDialog({ dialogTitle, isOpen, onClose, children, variant, hasCloseButton, }: {
+export declare function SideDialog({ dialogTitle, dialogDescription, isOpen, onClose, children, variant, hasCloseButton, className, }: {
     variant?: 'default' | 'confirmation';
     dialogTitle: string;
+    dialogDescription: string;
     isOpen: boolean;
     onClose?: () => void;
     onNext?: (() => void) | null;
     onPrevious?: (() => void) | null;
     children?: React.ReactNode;
     hasCloseButton?: boolean;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/elements/text/formatters/get-short-id.d.ts

@@ -0,0 +1 @@
+export declare function getShortId(id: string | undefined): string | undefined;

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

@@ -0,0 +1,2 @@
+export * from './text-and-icon';
+export * from './formatters/get-short-id';

package/dist/src/components/ui/elements/text/text-and-icon.d.ts

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

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

@@ -0,0 +1,17 @@
+import { AISpanRecord } from '@mastra/core';
+export declare function getTraceInfo(trace: AISpanRecord | undefined): {
+    key: string;
+    label: string;
+    value: any;
+}[];
+type getSpanInfoProps = {
+    span: AISpanRecord | undefined;
+    withTraceId?: boolean;
+    withSpanId?: boolean;
+};
+export declare function getSpanInfo({ span, withTraceId, withSpanId }: getSpanInfoProps): {
+    key: string;
+    label: string;
+    value: string;
+}[];
+export {};

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

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

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

@@ -0,0 +1,6 @@
+export declare const spanTypePrefixes: string[];
+export declare function getSpanTypeUi(type: string): {
+    icon: React.ReactNode;
+    color: string;
+    label: string;
+} | null;

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

@@ -0,0 +1,4 @@
+import { AISpanRecord } from '@mastra/core';
+export declare function SpanDetails({ span }: {
+    span?: AISpanRecord;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,13 @@
+import { KeyValueListItemData } from '../../../components/ui/elements';
+import { AISpanRecord } from '@mastra/core';
+type SpanDialogProps = {
+    span?: AISpanRecord;
+    spanInfo?: KeyValueListItemData[];
+    isOpen: boolean;
+    onClose?: () => void;
+    onNext?: () => void;
+    onPrevious?: () => void;
+    onViewToggle?: () => void;
+};
+export declare function SpanDialog({ span, isOpen, onClose, onNext, onPrevious, onViewToggle, spanInfo, }: SpanDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import { AISpanRecord } from '@mastra/core';
+type TraceDialogProps = {
+    traceSpans?: AISpanRecord[];
+    traceId?: string;
+    traceDetails?: AISpanRecord;
+    isOpen: boolean;
+    onClose?: () => void;
+    onNext?: () => void;
+    onPrevious?: () => void;
+    isLoadingSpans?: boolean;
+};
+export declare function TraceDialog({ traceId, traceSpans, traceDetails, isOpen, onClose, onNext, onPrevious, isLoadingSpans, }: TraceDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+type TraceSpanUsageProps = {
+    traceUsage?: {
+        [key: string]: any;
+    };
+    traceSpans?: any[];
+    className?: string;
+    spanUsage?: {
+        [key: string]: any;
+    };
+};
+export declare function TraceSpanUsage({ traceUsage, traceSpans, spanUsage, className }: TraceSpanUsageProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

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

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

@@ -0,0 +1,12 @@
+import { UISpan } from '../types';
+type TraceTimelineSpanProps = {
+    span: UISpan;
+    depth?: number;
+    onSpanClick?: (id: string) => void;
+    selectedSpanId?: string;
+    isLastChild?: boolean;
+    overallLatency?: number;
+    overallStartTime?: string;
+};
+export declare function TraceTimelineSpan({ span, depth, onSpanClick, selectedSpanId, isLastChild, overallLatency, overallStartTime, }: TraceTimelineSpanProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { AISpanRecord } from '@mastra/core';
+import { UISpan } from '../types';
+type TraceTimelineProps = {
+    spans?: AISpanRecord[];
+    hierarchicalSpans: UISpan[];
+    onSpanClick: (id: string) => void;
+    selectedSpanId?: string;
+    isLoading?: boolean;
+    className?: string;
+};
+export declare function TraceTimeline({ spans, hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, className, }: TraceTimelineProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+export type EntityOptions = {
+    value: string;
+    label: string;
+    type: 'agent' | 'workflow' | 'all';
+};
+type TracesToolsProps = {
+    selectedEntity?: EntityOptions;
+    entityOptions?: EntityOptions[];
+    onEntityChange: (val: EntityOptions) => void;
+    selectedDateFrom?: Date | undefined;
+    selectedDateTo?: Date | undefined;
+    onReset?: () => void;
+    onDateChange?: (value: Date | undefined, type: 'from' | 'to') => void;
+    isLoading?: boolean;
+};
+export declare function TracesTools({ onEntityChange, onReset, selectedEntity, entityOptions, onDateChange, selectedDateFrom, selectedDateTo, isLoading, }: TracesToolsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+export * from './utils/format-hierarchical-spans';
+export * from './types';
+export * from './components';

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

@@ -0,0 +1,9 @@
+export type UISpan = {
+    id: string;
+    name: string;
+    type: string;
+    latency: number;
+    startTime: string;
+    endTime?: string;
+    spans?: UISpan[];
+};

package/dist/src/domains/observability/utils/format-hierarchical-spans.d.ts

@@ -0,0 +1,3 @@
+import { AISpanRecord } from '@mastra/core';
+import { UISpan } from '../types';
+export declare const formatHierarchicalSpans: (spans: AISpanRecord[]) => UISpan[];

package/dist/src/index.d.ts

@@ -6,10 +6,12 @@ export * from './domains/tools/index';
 export * from './domains/workflows/index';
 export * from './domains/templates/index';
 export * from './domains/traces/index';
+export * from './domains/observability/index';
 export * from './domains/resizable-panel';
 export * from './components/dynamic-form/index';
 export * from './components/ui/data-table';
 export * from './components/ui/containers';
+export * from './components/ui/elements';
 export * from './components/threads';
 export * from './components/ui/entity-header';
 export * from './components/ui/playground-tabs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "6.1.0",
+  "version": "6.1.1-alpha.0",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -99,7 +99,7 @@
     "use-debounce": "^10.0.5",
     "zod": "^4.1.5",
     "zustand": "^5.0.7",
-    "@mastra/client-js": "^0.12.0"
+    "@mastra/client-js": "^0.12.1-alpha.0"
   },
   "peerDependencies": {
     "@mastra/core": ">=0.16.0-0 <0.17.0-0",
@@ -109,7 +109,7 @@
     "tailwindcss": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.4",
     "@storybook/react-vite": "^9.1.2",
     "@types/node": "^20.19.0",
     "@types/react": "^19.1.9",
@@ -127,7 +127,7 @@
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@mastra/core": "0.16.0"
+    "@mastra/core": "0.16.1-alpha.0"
   },
   "homepage": "https://mastra.ai",
   "repository": {

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

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Button } from './button';
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story = StoryObj<typeof Button>;
-export declare const Default: Story;
-export declare const Primary: Story;
-export declare const Outline: Story;
-export declare const Ghost: Story;
-export declare const WithIcon: Story;
-export declare const IconOnly: Story;
-export declare const Disabled: Story;
-export declare const AsLink: Story;