@mastra/playground-ui 5.1.13 → 5.1.14-alpha.1

package/dist/src/components/ui/entity-header.d.ts

@@ -0,0 +1,7 @@
+export interface EntityHeaderProps {
+    icon: React.ReactNode;
+    title: string;
+    isLoading?: boolean;
+    children?: React.ReactNode;
+}
+export declare const EntityHeader: ({ icon, title, isLoading, children }: EntityHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/playground-tabs.d.ts

@@ -0,0 +1,20 @@
+export interface PlaygroundTabsProps<T extends string> {
+    children: React.ReactNode;
+    defaultTab: T;
+}
+export declare const PlaygroundTabs: <T extends string>({ children, defaultTab }: PlaygroundTabsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface TabListProps {
+    children: React.ReactNode;
+}
+export declare const TabList: ({ children }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+export interface TabProps {
+    children: React.ReactNode;
+    value: string;
+    onClick?: () => void;
+}
+export declare const Tab: ({ children, value, onClick }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export interface TabContentProps {
+    children: React.ReactNode;
+    value: string;
+}
+export declare const TabContent: ({ children, value }: TabContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,8 +3,8 @@ import { GetAgentResponse } from '@mastra/client-js';
 export interface AgentsTableProps {
     agents: Record<string, GetAgentResponse>;
     isLoading: boolean;
-    onClickRow: (agentId: string) => void;
+    computeLink: (agentId: string) => string;
 }
-export declare function AgentsTable({ agents, isLoading, onClickRow }: AgentsTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentsTable({ agents, isLoading, computeLink }: 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,18 +1,6 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { AgentTableData } from './types';
 
-export declare const providerMapToIcon: {
-    'openai.chat': import("react/jsx-runtime").JSX.Element;
-    'anthropic.chat': import("react/jsx-runtime").JSX.Element;
-    'anthropic.messages': import("react/jsx-runtime").JSX.Element;
-    AZURE: import("react/jsx-runtime").JSX.Element;
-    AMAZON: import("react/jsx-runtime").JSX.Element;
-    GOOGLE: import("react/jsx-runtime").JSX.Element;
-    COHERE: import("react/jsx-runtime").JSX.Element;
-    GROQ: import("react/jsx-runtime").JSX.Element;
-    X_GROK: import("react/jsx-runtime").JSX.Element;
-    MISTRAL: import("react/jsx-runtime").JSX.Element;
-};
 export type AgentTableColumn = {
     repoUrl: string;
     executedAt: Date | null;

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

@@ -9,4 +9,5 @@ export type AgentTableData = {
     provider: string;
     instructions: string;
     tools?: Record<string, GetToolResponse>;
+    link: string;
 };

package/dist/src/domains/agents/components/provider-map-icon.d.ts

@@ -0,0 +1,12 @@
+export declare const providerMapToIcon: {
+    'openai.chat': import("react/jsx-runtime").JSX.Element;
+    'anthropic.chat': import("react/jsx-runtime").JSX.Element;
+    'anthropic.messages': import("react/jsx-runtime").JSX.Element;
+    AZURE: import("react/jsx-runtime").JSX.Element;
+    AMAZON: import("react/jsx-runtime").JSX.Element;
+    GOOGLE: import("react/jsx-runtime").JSX.Element;
+    COHERE: import("react/jsx-runtime").JSX.Element;
+    GROQ: import("react/jsx-runtime").JSX.Element;
+    X_GROK: import("react/jsx-runtime").JSX.Element;
+    MISTRAL: import("react/jsx-runtime").JSX.Element;
+};

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

@@ -1,7 +1,7 @@
 export * from './components/agent-chat';
 export * from './components/agent-evals';
-export * from './components/agent-traces';
 export * from './context';
 export * from './components/agent-settings';
 export * from './components/agent-table/agent-table';
 export * from './components/runtime-context';
+export * from './components/provider-map-icon';

package/dist/src/domains/networks/components/network-table/network-table.d.ts

@@ -4,8 +4,8 @@ export interface NetworkTableProps {
     legacyNetworks: GetNetworkResponse[];
     networks: GetVNextNetworkResponse[];
     isLoading: boolean;
-    onClickRow: (networkId: string, isVNext: boolean) => void;
+    computeLink: (networkId: string, isVNext: boolean) => string;
 }
-export declare const NetworkTable: ({ legacyNetworks, networks, isLoading, onClickRow }: NetworkTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NetworkTable: ({ legacyNetworks, networks, isLoading, computeLink }: NetworkTableProps) => import("react/jsx-runtime").JSX.Element;
 export declare const NetworkTableEmpty: () => import("react/jsx-runtime").JSX.Element;
 export declare const NetworkTableSkeleton: () => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,9 @@ export interface ToolListProps {
     isLoading: boolean;
     tools: Record<string, GetToolResponse>;
     agents: Record<string, GetAgentResponse>;
+    computeLink: (toolId: string, agentId?: string) => string;
+    computeAgentLink: (toolId: string, agentId: string) => string;
 }
-export declare const ToolList: ({ tools, agents, isLoading }: ToolListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolList: ({ tools, agents, isLoading, computeLink, computeAgentLink }: 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/traces/{traces-table.d.ts → components/traces-table.d.ts}

@@ -1,4 +1,4 @@
-import { RefinedTrace } from './types';
+import { RefinedTrace } from '../types';
 
 export interface TracesTableProps {
     traces: RefinedTrace[];

package/dist/src/domains/traces/components/traces-view.d.ts

@@ -0,0 +1,13 @@
+import { RefinedTrace } from '../types';
+
+export interface TracesViewProps {
+    isLoading: boolean;
+    error: Error | null;
+    traces: RefinedTrace[];
+    runId?: string;
+    stepName?: string;
+    className?: string;
+    setEndOfListElement: (element: HTMLDivElement | null) => void;
+}
+export declare function TracesView({ isLoading, error, traces, runId, stepName, className, setEndOfListElement, }: TracesViewProps): import("react/jsx-runtime").JSX.Element;
+export declare const TracesViewSkeleton: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from './components/traces-view';
+export * from './utils';

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

@@ -4,8 +4,8 @@ export interface WorkflowTableProps {
     workflows?: Record<string, GetWorkflowResponse>;
     legacyWorkflows?: Record<string, GetLegacyWorkflowResponse>;
     isLoading: boolean;
-    onClickRow: (agentId: string) => void;
+    computeLink: (agentId: string) => string;
 }
-export declare function WorkflowTable({ workflows, legacyWorkflows, isLoading, onClickRow }: WorkflowTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowTable({ workflows, legacyWorkflows, isLoading, computeLink }: 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/index.d.ts

@@ -1,4 +1,3 @@
-export * from './workflow/workflow-traces';
 export * from './workflow/legacy-workflow-graph';
 export * from './workflow/legacy-workflow-trigger';
 export * from './context/workflow-run-context';

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

@@ -12,5 +12,6 @@ export interface WorkflowStepActionBarProps {
     onShowNestedGraph?: () => void;
     onSendEvent?: WorkflowSendEventFormProps['onSendEvent'];
     runId?: string;
+    status?: 'running' | 'success' | 'failed' | 'suspended' | 'waiting';
 }
-export declare const WorkflowStepActionBar: ({ input, output, resumeData, error, mapConfig, stepName, event, onShowTrace, onShowNestedGraph, onSendEvent, runId, }: WorkflowStepActionBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WorkflowStepActionBar: ({ input, output, resumeData, error, mapConfig, stepName, event, onShowTrace, onShowNestedGraph, onSendEvent, runId, status, }: WorkflowStepActionBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/tokens/colors.d.ts

@@ -9,6 +9,17 @@ export declare const Colors: {
     accent3: string;
     accent4: string;
     accent5: string;
+    accent6: string;
+    accent1Dark: string;
+    accent2Dark: string;
+    accent3Dark: string;
+    accent5Dark: string;
+    accent6Dark: string;
+    accent1Darker: string;
+    accent2Darker: string;
+    accent3Darker: string;
+    accent5Darker: string;
+    accent6Darker: string;
 };
 export declare const BorderColors: {
     border1: string;

package/dist/src/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-in-view';

package/dist/src/hooks/use-in-view.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tracks whether or not the given element is currently in view.
+ * This is to replace framer-motion's `useInView` which has issues
+ * tracking a ref that is set at a time other than mount.
+ */
+export declare const useInView: () => {
+    inView: boolean;
+    setRef: (node: HTMLDivElement | null) => (() => void) | undefined;
+};

package/dist/src/index.d.ts

@@ -4,11 +4,14 @@ export * from './domains/agents/index';
 export * from './domains/networks/index';
 export * from './domains/tools/index';
 export * from './domains/workflows/index';
+export * from './domains/traces/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/threads';
+export * from './components/ui/entity-header';
+export * from './components/ui/playground-tabs';
 export * from './types';
 export * from './ds/components/Badge/index';
 export * from './ds/components/Button/index';
@@ -24,6 +27,8 @@ export * from './lib/polls';
 export * from './hooks/use-speech-recognition';
 export * from './components/ui/radio-group';
 export * from './components/ui/entry';
+export * from './hooks';
+export * from './lib/tanstack-query';
 export type { TraceContextType } from './domains/traces/context/trace-context';
 export * from './store/playground-store';
 export * from './lib/framework';

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

@@ -5,8 +5,10 @@ export type LinkComponent = ForwardRefExoticComponent<LinkComponentProps & RefAt
 export interface LinkComponentProviderProps {
     children: React.ReactNode;
     Link: LinkComponent;
+    navigate: (path: string) => void;
 }
-export declare const LinkComponentProvider: ({ children, Link }: LinkComponentProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LinkComponentProvider: ({ children, Link, navigate }: LinkComponentProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useLinkComponent: () => {
     Link: LinkComponent;
+    navigate: (path: string) => void;
 };

package/dist/src/lib/tanstack-query.d.ts

@@ -0,0 +1,4 @@
+export declare const PlaygroundQueryClient: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export * from '@tanstack/react-query';

package/dist/tokens.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const colors = require('./colors-BjoU9dWU.cjs');
+const colors = require('./colors-DLwJ7rFA.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-BauMYA7t.js';
+export { B as BorderColors, C as Colors, I as IconColors } from './colors-DrbbnW3f.js';
 
 const BorderWidth = {
   sm: "0.5px"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "5.1.13",
+  "version": "5.1.14-alpha.1",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -94,7 +94,7 @@
     "use-debounce": "^10.0.5",
     "zod": "^3.25.67",
     "zustand": "^5.0.5",
-    "@mastra/client-js": "^0.10.14"
+    "@mastra/client-js": "^0.10.15-alpha.1"
   },
   "peerDependencies": {
     "@mastra/core": ">=0.10.11-0 <0.11.0-0",
@@ -119,7 +119,7 @@
     "vite": "^6.3.5",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "@mastra/core": "0.10.15"
+    "@mastra/core": "0.11.0-alpha.1"
   },
   "scripts": {
     "dev": "vite",

package/dist/colors-BauMYA7t.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors-BauMYA7t.js","sources":["../src/ds/tokens/colors.ts"],"sourcesContent":["export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n  accent5: '#4A9DF2',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n"],"names":[],"mappings":"AAAO,MAAM,MAAA,GAAS;AAAA,EACpB,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,uBAAA;AAAA,EACV,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,YAAA,GAAe;AAAA,EAC1B,OAAA,EAAS,qBAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,UAAA,GAAa;AAAA,EACxB,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO;AACT;;;;"}

package/dist/colors-BjoU9dWU.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors-BjoU9dWU.cjs","sources":["../src/ds/tokens/colors.ts"],"sourcesContent":["export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent4: '#9E57B3',\n  accent5: '#4A9DF2',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n\nexport const IconColors = {\n  icon1: '#5C5C5C',\n  icon2: '#707070',\n  icon3: '#939393',\n  icon4: '#A9A9A9',\n  icon5: '#E6E6E6',\n  icon6: '#FFFFFF',\n};\n"],"names":[],"mappings":";;AAAO,MAAM,MAAA,GAAS;AAAA,EACpB,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,SAAA;AAAA,EACV,QAAA,EAAU,uBAAA;AAAA,EACV,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,YAAA,GAAe;AAAA,EAC1B,OAAA,EAAS,qBAAA;AAAA,EACT,OAAA,EAAS;AACX;AAEO,MAAM,UAAA,GAAa;AAAA,EACxB,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,KAAA,EAAO;AACT;;;;;;"}

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

@@ -1,10 +0,0 @@
-import { RefinedTrace } from '../../traces/types';
-
-export interface AgentTracesProps {
-    className?: string;
-    traces: RefinedTrace[];
-    error: {
-        message: string;
-    } | null;
-}
-export declare function AgentTraces({ className, traces, error }: AgentTracesProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +0,0 @@
-import { RefinedTrace } from '../../traces/types';
-
-export interface WorkflowTracesProps {
-    traces: RefinedTrace[];
-    error: {
-        message: string;
-    } | null;
-    runId?: string;
-    stepName?: string;
-}
-export declare function WorkflowTraces({ traces, error, runId, stepName }: WorkflowTracesProps): import("react/jsx-runtime").JSX.Element;