@mastra/playground-ui 23.0.2-alpha.2 → 24.0.0-alpha.0

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

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './hooks';
+export * from './log-filters';
+export type { LogRecord, LogLevel } from './types';

package/dist/src/domains/logs/log-filters.d.ts

@@ -0,0 +1,109 @@
+import { EntityType } from '@mastra/core/observability';
+import { ListLogsArgs } from '@mastra/core/storage';
+import { LogLevel } from './types';
+import { PropertyFilterField, PropertyFilterToken } from '../../ds/components/PropertyFilter/types';
+export type LogsDatePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';
+export type LogsEntityOptions = {
+    label: string;
+    entityType: EntityType;
+};
+export declare const LOGS_ROOT_ENTITY_TYPES: {
+    readonly AGENT: EntityType.AGENT;
+    readonly WORKFLOW: EntityType.WORKFLOW_RUN;
+    readonly SCORER: EntityType.SCORER;
+    readonly INGEST: EntityType.RAG_INGESTION;
+};
+export declare const LOGS_ROOT_ENTITY_TYPE_OPTIONS: readonly [{
+    readonly label: "Agent";
+    readonly entityType: EntityType.AGENT;
+}, {
+    readonly label: "Workflow";
+    readonly entityType: EntityType.WORKFLOW_RUN;
+}, {
+    readonly label: "Scorer";
+    readonly entityType: EntityType.SCORER;
+}, {
+    readonly label: "Ingest";
+    readonly entityType: EntityType.RAG_INGESTION;
+}];
+export declare const LOG_LEVEL_VALUES: readonly LogLevel[];
+export declare const LOG_LEVEL_OPTIONS: readonly [{
+    readonly label: "Debug";
+    readonly value: "debug";
+}, {
+    readonly label: "Info";
+    readonly value: "info";
+}, {
+    readonly label: "Warn";
+    readonly value: "warn";
+}, {
+    readonly label: "Error";
+    readonly value: "error";
+}, {
+    readonly label: "Fatal";
+    readonly value: "fatal";
+}];
+export declare const LOGS_ROOT_ENTITY_TYPE_PARAM = "rootEntityType";
+export declare const LOGS_DATE_PRESET_PARAM = "datePreset";
+export declare const LOGS_DATE_FROM_PARAM = "dateFrom";
+export declare const LOGS_DATE_TO_PARAM = "dateTo";
+export declare const LOGS_DATE_PRESET_VALUES: Set<LogsDatePreset>;
+/**
+ * Generic filter URL params (filterX keys). Fields that carry multiple values
+ * (tags, level) use repeated params; everything else is a single string.
+ */
+export declare const LOGS_PROPERTY_FILTER_PARAM_BY_FIELD: {
+    readonly level: "filterLevel";
+    readonly tags: "filterTags";
+    readonly entityName: "filterEntityName";
+    readonly traceId: "filterTraceId";
+    readonly spanId: "filterSpanId";
+    readonly runId: "filterRunId";
+    readonly threadId: "filterThreadId";
+    readonly sessionId: "filterSessionId";
+    readonly requestId: "filterRequestId";
+    readonly resourceId: "filterResourceId";
+    readonly userId: "filterUserId";
+    readonly organizationId: "filterOrganizationId";
+    readonly serviceName: "filterServiceName";
+    readonly environment: "filterEnvironment";
+    readonly experimentId: "filterExperimentId";
+};
+export declare const LOGS_PROPERTY_FILTER_FIELD_IDS: Array<keyof typeof LOGS_PROPERTY_FILTER_PARAM_BY_FIELD>;
+export declare const DEFAULT_LOGS_FILTERS_STORAGE_KEY = "mastra:logs:saved-filters";
+export declare function saveLogsFiltersToStorage(params: URLSearchParams, storageKey?: string): void;
+export declare function clearSavedLogsFilters(storageKey?: string): void;
+export declare function loadLogsFiltersFromStorage(storageKey?: string): URLSearchParams | null;
+export declare function hasAnyLogsFilterParams(params: URLSearchParams): boolean;
+export declare function createLogsPropertyFilterFields({ availableTags, availableRootEntityNames, availableServiceNames, availableEnvironments, loading, }: {
+    availableTags: string[];
+    availableRootEntityNames: string[];
+    availableServiceNames: string[];
+    availableEnvironments: string[];
+    loading?: {
+        tags?: boolean;
+        entityNames?: boolean;
+        serviceNames?: boolean;
+        environments?: boolean;
+    };
+}): PropertyFilterField[];
+/**
+ * Read filter tokens from URL search params preserving the order in which
+ * each filter was first added. Fields in LOGS_ARRAY_FIELD_IDS are read as
+ * string[]; an empty sentinel (`filterX=`) keeps the pill alive post-Reset.
+ */
+export declare function getLogsPropertyFilterTokens(searchParams: URLSearchParams): PropertyFilterToken[];
+export declare function getPreservedLogsFilterParams(searchParams: URLSearchParams): URLSearchParams;
+export declare function applyLogsPropertyFilterTokens(params: URLSearchParams, tokens: PropertyFilterToken[]): void;
+export declare function buildLogsListFilters({ rootEntityType, dateFrom, dateTo, tokens, }: {
+    rootEntityType?: string;
+    dateFrom?: Date;
+    dateTo?: Date;
+    tokens: PropertyFilterToken[];
+}): ListLogsArgs['filters'];
+/**
+ * "Clear" semantics for the logs toolbar: keep all filter pills but neutralize each value.
+ * '' for text fields, 'Any' for single-select pick-multi, [] for multi-select pick-multi.
+ * Date range is intentionally NOT touched here — that's a separate concern.
+ */
+export declare function neutralizeLogsFilterTokens(filterFields: PropertyFilterField[], filterTokens: PropertyFilterToken[]): PropertyFilterToken[];

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

@@ -0,0 +1,35 @@
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'fatal';
+export interface LogRecord {
+    /** Canonical unique id assigned by the storage backend. When present, used directly as the
+     *  row id; otherwise a content hash is derived. */
+    logId?: string | null;
+    timestamp: Date | string;
+    level: LogLevel;
+    message: string;
+    data?: Record<string, unknown> | null;
+    traceId?: string | null;
+    spanId?: string | null;
+    entityType?: string | null;
+    entityId?: string | null;
+    entityName?: string | null;
+    parentEntityType?: string | null;
+    parentEntityId?: string | null;
+    parentEntityName?: string | null;
+    rootEntityType?: string | null;
+    rootEntityId?: string | null;
+    rootEntityName?: string | null;
+    userId?: string | null;
+    organizationId?: string | null;
+    resourceId?: string | null;
+    runId?: string | null;
+    sessionId?: string | null;
+    threadId?: string | null;
+    requestId?: string | null;
+    environment?: string | null;
+    source?: string | null;
+    serviceName?: string | null;
+    scope?: Record<string, unknown> | null;
+    experimentId?: string | null;
+    tags?: string[] | null;
+    metadata?: Record<string, unknown> | null;
+}

package/dist/src/domains/metrics/components/bar-list.d.ts

@@ -0,0 +1,21 @@
+export declare function BarListContent({ data, maxVal, fmt, color, valueLabel, legend, }: {
+    data: Array<{
+        name: string;
+        value: number;
+    }>;
+    maxVal: number;
+    fmt: (v: number) => string;
+    color: string;
+    valueLabel?: string;
+    legend?: Array<{
+        color: string;
+        label: string;
+    }>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function StackedRunsBars({ data }: {
+    data: Array<{
+        name: string;
+        completed: number;
+        errors: number;
+    }>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/metrics/components/date-range-selector.d.ts

@@ -0,0 +1 @@
+export declare function DateRangeSelector(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+export { DateRangeSelector } from './date-range-selector';
+export { formatCompact, formatCost, CHART_COLORS } from './metrics-utils';
+export { BarListContent, StackedRunsBars } from './bar-list';
+export { KpiCardView, type KpiCardViewProps } from './kpi-card-view';
+export { LatencyCardView, type LatencyCardViewProps } from './latency-card-view';
+export { ModelUsageCostCardView, type ModelUsageCostCardViewProps } from './model-usage-cost-card-view';
+export { ScoresCardView, type ScoresCardViewProps } from './scores-card-view';
+export { TokenUsageByAgentCardView, type TokenUsageByAgentCardViewProps } from './token-usage-by-agent-card-view';
+export { TracesVolumeCardView, type TracesVolumeCardViewProps } from './traces-volume-card-view';

package/dist/src/domains/metrics/components/kpi-card-view.d.ts

@@ -0,0 +1,9 @@
+export interface KpiCardViewProps {
+    label: string;
+    value: string | null;
+    prevValue?: string;
+    changePct?: number | null;
+    isLoading: boolean;
+    isError: boolean;
+}
+export declare function KpiCardView({ label, value, prevValue, changePct, isLoading, isError }: KpiCardViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/metrics/components/latency-card-view.d.ts

@@ -0,0 +1,11 @@
+import { LatencyPoint } from '../hooks/use-latency-metrics';
+export interface LatencyCardViewProps {
+    data: {
+        agentData: LatencyPoint[];
+        workflowData: LatencyPoint[];
+        toolData: LatencyPoint[];
+    } | undefined;
+    isLoading: boolean;
+    isError: boolean;
+}
+export declare function LatencyCardView({ data, isLoading, isError }: LatencyCardViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/metrics/components/metrics-utils.d.ts

@@ -0,0 +1,15 @@
+export declare function formatCompact(n: number): string;
+export declare function formatCost(value: number, unit?: string | null): string;
+export declare const CHART_COLORS: {
+    readonly green: "#22c55e";
+    readonly orange: "#fb923c";
+    readonly pink: "#f472b6";
+    readonly purple: "#8b5cf6";
+    readonly blue: "#4f83f1";
+    readonly blueDark: "#2b5cd9";
+    readonly blueLight: "#6b8fe5";
+    readonly red: "#f87171";
+    readonly greenDark: "#15613a";
+    readonly redDark: "#991b1b";
+    readonly yellow: "#facc15";
+};

package/dist/src/domains/metrics/components/model-usage-cost-card-view.d.ts

@@ -0,0 +1,7 @@
+import { ModelUsageRow } from '../hooks/use-model-usage-cost-metrics';
+export interface ModelUsageCostCardViewProps {
+    rows: ModelUsageRow[] | undefined;
+    isLoading: boolean;
+    isError: boolean;
+}
+export declare function ModelUsageCostCardView({ rows, isLoading, isError }: ModelUsageCostCardViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/metrics/components/scores-card-view.d.ts

@@ -0,0 +1,12 @@
+import { ScorerSummary, ScoresOverTimePoint } from '../hooks/use-scores-metrics';
+export interface ScoresCardViewProps {
+    data: {
+        summaryData: ScorerSummary[];
+        overTimeData: ScoresOverTimePoint[];
+        scorerNames: string[];
+        avgScore: number | null;
+    } | undefined;
+    isLoading: boolean;
+    isError: boolean;
+}
+export declare function ScoresCardView({ data, isLoading, isError }: ScoresCardViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/metrics/components/token-usage-by-agent-card-view.d.ts

@@ -0,0 +1,7 @@
+import { TokenUsageByAgentRow } from '../hooks/use-token-usage-by-agent-metrics';
+export interface TokenUsageByAgentCardViewProps {
+    data: TokenUsageByAgentRow[] | undefined;
+    isLoading: boolean;
+    isError: boolean;
+}
+export declare function TokenUsageByAgentCardView({ data, isLoading, isError }: TokenUsageByAgentCardViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { VolumeRow } from '../hooks/use-trace-volume-metrics';
+export interface TracesVolumeCardViewProps {
+    data: {
+        agentData: VolumeRow[];
+        workflowData: VolumeRow[];
+        toolData: VolumeRow[];
+    } | undefined;
+    isLoading: boolean;
+    isError: boolean;
+}
+export declare function TracesVolumeCardView({ data, isLoading, isError }: TracesVolumeCardViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+export { MetricsProvider, useMetrics, isValidPreset, DATE_PRESETS } from './use-metrics';
+export type { DatePreset, DateRange } from './use-metrics';
+export { useMetricsFilters } from './use-metrics-filters';
+export { useAgentRunsKpiMetrics } from './use-agent-runs-kpi-metrics';
+export { useAvgScoreKpiMetrics } from './use-avg-score-kpi-metrics';
+export { useModelCostKpiMetrics } from './use-model-cost-kpi-metrics';
+export { useTotalTokensKpiMetrics } from './use-total-tokens-kpi-metrics';
+export { useModelUsageCostMetrics, type ModelUsageRow } from './use-model-usage-cost-metrics';
+export { useLatencyMetrics, type LatencyPoint } from './use-latency-metrics';
+export { useTraceVolumeMetrics, type VolumeRow } from './use-trace-volume-metrics';
+export { useScoresMetrics, type ScorerSummary, type ScoresOverTimePoint } from './use-scores-metrics';
+export { useTokenUsageByAgentMetrics, type TokenUsageByAgentRow } from './use-token-usage-by-agent-metrics';

package/dist/src/domains/metrics/hooks/use-agent-runs-kpi-metrics.d.ts

@@ -0,0 +1,10 @@
+/** Total Agent Runs — count of agent duration metric observations */
+export declare function useAgentRunsKpiMetrics(): import('@tanstack/react-query').UseQueryResult<{
+    value: number | null;
+    estimatedCost?: number | null | undefined;
+    costUnit?: string | null | undefined;
+    previousEstimatedCost?: number | null | undefined;
+    costChangePercent?: number | null | undefined;
+    previousValue?: number | null | undefined;
+    changePercent?: number | null | undefined;
+}, Error>;

package/dist/src/domains/metrics/hooks/use-avg-score-kpi-metrics.d.ts

@@ -0,0 +1,10 @@
+/** Avg Score — average score across all scorers via aggregate API */
+export declare function useAvgScoreKpiMetrics(): import('@tanstack/react-query').UseQueryResult<{
+    value: null;
+    previousValue: null;
+    changePercent: null;
+} | {
+    value: number;
+    previousValue: null;
+    changePercent: null;
+}, Error>;

package/dist/src/domains/metrics/hooks/use-latency-metrics.d.ts

@@ -0,0 +1,11 @@
+export interface LatencyPoint {
+    [key: string]: unknown;
+    time: string;
+    p50: number;
+    p95: number;
+}
+export declare function useLatencyMetrics(): import('@tanstack/react-query').UseQueryResult<{
+    agentData: LatencyPoint[];
+    workflowData: LatencyPoint[];
+    toolData: LatencyPoint[];
+}, Error>;

package/dist/src/domains/metrics/hooks/use-metrics-filters.d.ts

@@ -0,0 +1,9 @@
+import { DatePreset, DateRange } from './use-metrics';
+export declare function useMetricsFilters(): {
+    datePreset: DatePreset;
+    customRange: DateRange | undefined;
+    timestamp: {
+        start: Date;
+        end: Date;
+    };
+};

package/dist/src/domains/metrics/hooks/use-metrics.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from '../../../../node_modules/@types/react';
+declare const DATE_PRESETS: readonly [{
+    readonly label: "Last 24 hours";
+    readonly value: "24h";
+}, {
+    readonly label: "Last 3 days";
+    readonly value: "3d";
+}, {
+    readonly label: "Last 7 days";
+    readonly value: "7d";
+}, {
+    readonly label: "Last 14 days";
+    readonly value: "14d";
+}, {
+    readonly label: "Last 30 days";
+    readonly value: "30d";
+}];
+export type DatePreset = (typeof DATE_PRESETS)[number]['value'] | 'custom';
+export { DATE_PRESETS };
+export declare function isValidPreset(value: string | null | undefined): value is DatePreset;
+export type DateRange = {
+    from?: Date;
+    to?: Date;
+};
+export declare const MetricsContext: import('../../../../node_modules/@types/react').Context<{
+    datePreset: DatePreset;
+    setDatePreset: (v: DatePreset) => void;
+    customRange: DateRange | undefined;
+    setCustomRange: (v: DateRange | undefined) => void;
+    dateRangeLabel: string;
+}>;
+export declare function useMetrics(): {
+    datePreset: DatePreset;
+    setDatePreset: (v: DatePreset) => void;
+    customRange: DateRange | undefined;
+    setCustomRange: (v: DateRange | undefined) => void;
+    dateRangeLabel: string;
+};
+export declare function MetricsProvider({ children, initialPreset, onPresetChange, }: {
+    children: ReactNode;
+    initialPreset?: DatePreset;
+    onPresetChange?: (preset: DatePreset) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/metrics/hooks/use-model-cost-kpi-metrics.d.ts

@@ -0,0 +1,7 @@
+/** Total Model Cost — sum of estimatedCost across input and output token metrics */
+export declare function useModelCostKpiMetrics(): import('@tanstack/react-query').UseQueryResult<{
+    cost: number | null;
+    costUnit: string | null;
+    previousCost: number | null;
+    costChangePercent: number | null;
+}, Error>;

package/dist/src/domains/metrics/hooks/use-model-usage-cost-metrics.d.ts

@@ -0,0 +1,10 @@
+export interface ModelUsageRow {
+    model: string;
+    input: string;
+    output: string;
+    cacheRead: string;
+    cacheWrite: string;
+    cost: number | null;
+    costUnit: string | null;
+}
+export declare function useModelUsageCostMetrics(): import('@tanstack/react-query').UseQueryResult<ModelUsageRow[], Error>;

package/dist/src/domains/metrics/hooks/use-scores-metrics.d.ts

@@ -0,0 +1,22 @@
+export interface ScorerSummary {
+    scorer: string;
+    avg: number;
+    min: number;
+    max: number;
+    count: number;
+}
+export interface ScoresOverTimePoint {
+    time: string;
+    [scorer: string]: string | number;
+}
+export declare function useScoresMetrics(): import('@tanstack/react-query').UseQueryResult<{
+    summaryData: never[];
+    overTimeData: never[];
+    scorerNames: never[];
+    avgScore: null;
+} | {
+    summaryData: ScorerSummary[];
+    overTimeData: ScoresOverTimePoint[];
+    scorerNames: string[];
+    avgScore: number;
+}, Error>;

package/dist/src/domains/metrics/hooks/use-token-usage-by-agent-metrics.d.ts

@@ -0,0 +1,9 @@
+export interface TokenUsageByAgentRow {
+    name: string;
+    total: number;
+    input: number;
+    output: number;
+    cost: number | null;
+    costUnit: string | null;
+}
+export declare function useTokenUsageByAgentMetrics(): import('@tanstack/react-query').UseQueryResult<TokenUsageByAgentRow[], Error>;

package/dist/src/domains/metrics/hooks/use-total-tokens-kpi-metrics.d.ts

@@ -0,0 +1,6 @@
+/** Total Tokens — sum of all input + output tokens */
+export declare function useTotalTokensKpiMetrics(): import('@tanstack/react-query').UseQueryResult<{
+    value: number | null;
+    previousValue: number | null;
+    changePercent: number | null;
+}, Error>;

package/dist/src/domains/metrics/hooks/use-trace-volume-metrics.d.ts

@@ -0,0 +1,10 @@
+export interface VolumeRow {
+    name: string;
+    completed: number;
+    errors: number;
+}
+export declare function useTraceVolumeMetrics(): import('@tanstack/react-query').UseQueryResult<{
+    agentData: VolumeRow[];
+    workflowData: VolumeRow[];
+    toolData: VolumeRow[];
+}, Error>;

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

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/dist/src/domains/traces/components/format-hierarchical-spans.d.ts

@@ -0,0 +1,12 @@
+import { UISpan } from '../types';
+/** Minimal span fields required for building the hierarchical timeline tree. */
+type TimelineSpan = {
+    spanId: string;
+    name: string;
+    spanType: string;
+    startedAt: Date | string;
+    endedAt?: Date | string | null;
+    parentSpanId?: string | null;
+};
+export declare const formatHierarchicalSpans: (spans: TimelineSpan[]) => UISpan[];
+export {};

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

@@ -0,0 +1,18 @@
+export { formatHierarchicalSpans } from './format-hierarchical-spans';
+export { getSpanTypeUi, spanTypePrefixes } from './shared';
+export { SpanTokenUsage, type TokenUsage } from './span-token-usage';
+export { TimelineExpandCol } from './timeline-expand-col';
+export { TimelineNameCol } from './timeline-name-col';
+export { TimelineStructureSign } from './timeline-structure-sign';
+export { TimelineTimingCol } from './timeline-timing-col';
+export { TraceKeysAndValues, type TraceKeysAndValuesProps } from './trace-keys-and-values';
+export { TraceTimelineSpan } from './trace-timeline-span';
+export { TraceTimeline } from './trace-timeline';
+export { TracesToolbar } from './traces-toolbar';
+export { TraceDataPanelView, type TraceDataPanelViewProps, type TraceDataPanelPlacement, } from './trace-data-panel-view';
+export { SpanDataPanelView, type SpanDataPanelViewProps } from './span-data-panel-view';
+export { SpanDetailsView, type SpanDetailsViewProps } from './span-details-view';
+export { TraceDetailsView, type TraceDetailsViewProps } from './trace-details-view';
+export { TracesLayout, type TracesLayoutProps } from './traces-layout';
+export { TracesListView, type TracesListViewProps, type TracesListViewTrace } from './traces-list-view';
+export { TracesErrorContent, type TracesErrorContentProps } from './traces-error-content';

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

@@ -0,0 +1,3 @@
+import { UISpanStyle } from '../types';
+export declare const spanTypePrefixes: string[];
+export declare function getSpanTypeUi(type: string): UISpanStyle;

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

@@ -0,0 +1,26 @@
+import { SpanRecord } from '@mastra/core/storage';
+import { ReactNode } from '../../../../node_modules/@types/react';
+export interface SpanDataPanelViewProps {
+    traceId: string;
+    spanId: string;
+    /** Full span record. Caller fetches via useSpanDetail. */
+    span: SpanRecord | undefined;
+    isLoading?: boolean;
+    onClose: () => void;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    activeTab?: string;
+    onTabChange?: (tab: string) => void;
+    /**
+     * When provided, a "Scoring" tab appears; the slot receives the loaded span and renders
+     * whatever scoring UI the consumer wants. When undefined, only the "Details" tab renders.
+     */
+    scoringTabSlot?: (args: {
+        span: SpanRecord;
+        traceId: string;
+        spanId: string;
+    }) => ReactNode;
+    /** Optional count shown in the "Scoring" tab label (e.g. number of scores). */
+    scoringTabBadge?: ReactNode;
+}
+export declare function SpanDataPanelView({ traceId, spanId, span, isLoading, onClose, onPrevious, onNext, activeTab, onTabChange, scoringTabSlot, scoringTabBadge, }: SpanDataPanelViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { SpanRecord } from '@mastra/core/storage';
+export interface SpanDetailsViewProps {
+    spanId: string;
+    /** Full span record. Caller fetches via useSpanDetail. */
+    span: SpanRecord | undefined;
+    isLoading?: boolean;
+    onClose: () => void;
+}
+/**
+ * Compact span panel using `DataDetailsPanel` (popover-style). Shows basic span metadata +
+ * input/output/metadata/attributes code sections. Use this for inline span inspection; for the
+ * full-width span view with scoring tab + prev/next nav, use `SpanDataPanelView`.
+ */
+export declare function SpanDetailsView({ spanId, span, isLoading, onClose }: SpanDetailsViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/traces/components/span-token-usage.d.ts

@@ -0,0 +1,22 @@
+import { InputTokenDetails, OutputTokenDetails } from '@mastra/core/observability';
+type V5TokenUsage = {
+    inputTokens: number;
+    outputTokens: number;
+    reasoningTokens?: number;
+    cachedInputTokens?: number;
+    totalTokens: number;
+    inputDetails?: InputTokenDetails;
+    outputDetails?: OutputTokenDetails;
+};
+type LegacyTokenUsage = {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+};
+export type TokenUsage = V5TokenUsage | LegacyTokenUsage;
+type SpanTokenUsageProps = {
+    usage: TokenUsage;
+    className?: string;
+};
+export declare function SpanTokenUsage({ usage, className }: SpanTokenUsageProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,12 @@
+type TimelineExpandColProps = {
+    isSelected?: boolean;
+    isFaded?: boolean;
+    isExpanded?: boolean;
+    toggleChildren?: () => void;
+    expandAllDescendants?: () => void;
+    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/traces/components/timeline-name-col.d.ts

@@ -0,0 +1,15 @@
+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;
+};
+export declare function TimelineNameCol({ span, spanUI: _spanUI, isFaded, depth, onSpanClick, selectedSpanId, isLastChild, hasChildren: _hasChildren, isRootSpan, isExpanded: _isExpanded, }: TimelineNameColProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/src/domains/traces/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;
+    color?: string;
+    chartWidth?: 'wide' | 'default';
+};
+export declare function TimelineTimingCol({ span, selectedSpanId, isFaded, overallLatency, overallStartTime, color, chartWidth, }: TimelineTimingColProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+import { LightSpanRecord } from '@mastra/core/storage';
+import { LinkComponent } from '../../../ds/types/link-component';
+export type TraceDataPanelPlacement = 'traces-list' | 'trace-page';
+export interface TraceDataPanelViewProps {
+    traceId: string;
+    /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */
+    spans: LightSpanRecord[] | undefined;
+    isLoading?: boolean;
+    onClose: () => void;
+    onSpanSelect?: (spanId: string | undefined) => void;
+    onEvaluateTrace?: () => void;
+    /** When set, a "Save as Dataset Item" button appears; the consumer owns the dialog. */
+    onSaveAsDatasetItem?: (args: {
+        traceId: string;
+        rootSpanId: string | undefined;
+    }) => void;
+    initialSpanId?: string | null;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    placement: TraceDataPanelPlacement;
+    timelineChartWidth?: 'wide' | 'default';
+    /** When both are provided, renders an "Open trace page" button. */
+    LinkComponent?: LinkComponent;
+    traceHref?: string;
+}
+export declare function TraceDataPanelView({ traceId, spans, isLoading, onClose, onSpanSelect, onEvaluateTrace, onSaveAsDatasetItem, initialSpanId, onPrevious, onNext, collapsed: controlledCollapsed, onCollapsedChange, placement, timelineChartWidth, LinkComponent, traceHref, }: TraceDataPanelViewProps): import("react/jsx-runtime").JSX.Element;