@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/src/domains/chat/messages/renderers/status-renderers.d.ts

@@ -1,4 +1,4 @@
-import { ErrorRendererProps, MessageStatusRenderers, TripwireRendererProps, WarningRendererProps } from '@mastra/react';
+import { ErrorRendererProps, MessageStatusRenderers, TripwireRendererProps, WarningRendererProps } from '@mastra/react/ui';
 export declare const ErrorStatusRenderer: ({ text }: ErrorRendererProps) => import("react").JSX.Element;
 export declare const WarningStatusRenderer: ({ text }: WarningRendererProps) => import("react").JSX.Element;
 export declare const TripwireStatusRenderer: ({ text, tripwire }: TripwireRendererProps) => import("react").JSX.Element;

package/dist/src/domains/chat/messages/renderers/tool-part.d.ts

@@ -1,4 +1,4 @@
-import { DynamicToolPart, MessageFactoryPart, ToolInvocationPart } from '@mastra/react';
+import { DynamicToolPart, MessageFactoryPart, ToolInvocationPart } from '@mastra/react/ui';
 export type ToolPart = ToolInvocationPart | DynamicToolPart;
 /** One shape for a call whether it was persisted as a v4 `toolInvocation` or streamed as a v5 dynamic part. */
 export interface ToolPartFields {
@@ -6,7 +6,9 @@ export interface ToolPartFields {
     toolCallId: string;
     input: unknown;
     output: unknown;
+    modelOutput?: unknown;
     state?: string;
+    errorText?: string;
 }
 export declare function isToolPart(part: MessageFactoryPart): part is ToolPart;
 export declare function readToolPart(part: ToolPart): ToolPartFields;

package/dist/src/domains/chat/messages/renderers/user-file-part-renderer.d.ts

@@ -1,12 +1,5 @@
-import { FilePart } from '@mastra/react';
+import { FilePart } from '@mastra/react/ui';
 export interface UserFilePartRendererProps {
     part: FilePart;
 }
-/**
- * Renders a user `MessageFactory` `File` slot. Image parts render an inline image
- * preview when the source is browser-fetchable; video, audio, and cloud-storage
- * URIs (gs://, s3://) render a placeholder chip; everything else renders a
- * document preview, using the URL when it is an http(s) link, otherwise the raw
- * data.
- */
 export declare const UserFilePartRenderer: ({ part }: UserFilePartRendererProps) => import("react").JSX.Element;

package/dist/src/domains/chat/messages/renderers/user-text-part-renderer.d.ts

@@ -1,4 +1,4 @@
-import { TextPart } from '@mastra/react';
+import { TextPart } from '@mastra/react/ui';
 import { MessageMetadata } from '../message-metadata';
 export interface UserTextPartRendererProps {
     part: TextPart;

package/dist/src/domains/chat/stories/attachments.stories.d.ts

@@ -19,3 +19,4 @@ export declare const LongFilename: Story;
 export declare const RemotePdf: Story;
 export declare const CloudStorageFile: Story;
 export declare const InlineBinaryFile: Story;
+export declare const Base64Image: Story;

package/dist/src/domains/chat/stories/composer-attachments.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ComposerAttachmentList } from '../attachments/composer-attachment-list';
+declare const meta: {
+    title: string;
+    component: typeof ComposerAttachmentList;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Images: Story;
+export declare const MixedFiles: Story;
+export declare const PreviewAndRemove: Story;

package/dist/src/domains/chat/stories/reasoning.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ part }: import('../messages/renderers/reasoning-part-renderer').ReasoningPartRendererProps) => import("react").JSX.Element;
+    component: ({ part }: import('../messages/renderers/reasoning-part-renderer').ReasoningPartRendererProps) => import("react").JSX.Element | null;
     parameters: {
         docs: {
             description: {
@@ -18,3 +18,4 @@ export declare const WaitingForText: Story;
 export declare const StreamingText: Story;
 export declare const Redacted: Story;
 export declare const EmptyCompleted: Story;
+export declare const Markdown: Story;

package/dist/src/domains/chat/tools/tool-groups.d.ts

@@ -1,4 +1,4 @@
-import { MessageFactoryPart } from '@mastra/react';
+import { MessageFactoryPart } from '@mastra/react/ui';
 import { ToolPart } from '../messages/renderers/tool-part';
 import { ToolCardContext } from './tool-card-kind';
 import { ConsecutiveGroups } from '../../../ds/components/ai/tool-call';

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

@@ -1,5 +1,6 @@
-import { ListLogsArgs } from '@mastra/core/storage';
+import { MastraClient } from '@mastra/client-js';
 import { LogRecord } from '../types';
+type ListLogsArgs = NonNullable<Parameters<MastraClient['listLogsVNext']>[0]>;
 interface UseLogsReturn {
     data: LogRecord[] | undefined;
     hasNextPage: boolean;

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

@@ -1,7 +1,8 @@
+import { MastraClient } from '@mastra/client-js';
 import { EntityType } from '@mastra/core/observability';
-import { ListLogsArgs } from '@mastra/core/storage';
 import { LogLevel } from './types';
 import { PropertyFilterField, PropertyFilterToken } from '../../ds/components/PropertyFilter/types';
+type ListLogsArgs = NonNullable<Parameters<MastraClient['listLogsVNext']>[0]>;
 export type LogsDatePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';
 type EntityTypeValue = `${EntityType}`;
 export type LogsEntityOptions = {

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

@@ -4,10 +4,10 @@
  *  tens of millions of rows. */
 export declare function useActiveResourcesKpiMetrics(): import('@tanstack/react-query').UseQueryResult<{
     value: number | null;
-    previousValue?: number | null | undefined;
-    changePercent?: number | null | undefined;
-    estimatedCost?: number | null | undefined;
-    costUnit?: string | null | undefined;
-    previousEstimatedCost?: number | null | undefined;
-    costChangePercent?: number | null | undefined;
+    previousValue?: (number | null) | undefined | undefined;
+    changePercent?: (number | null) | undefined | undefined;
+    estimatedCost?: (number | null) | undefined | undefined;
+    costUnit?: (string | null) | undefined | undefined;
+    previousEstimatedCost?: (number | null) | undefined | undefined;
+    costChangePercent?: (number | null) | undefined | undefined;
 }, Error>;

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

@@ -4,10 +4,10 @@
  *  tens of millions of rows. */
 export declare function useActiveThreadsKpiMetrics(): import('@tanstack/react-query').UseQueryResult<{
     value: number | null;
-    previousValue?: number | null | undefined;
-    changePercent?: number | null | undefined;
-    estimatedCost?: number | null | undefined;
-    costUnit?: string | null | undefined;
-    previousEstimatedCost?: number | null | undefined;
-    costChangePercent?: number | null | undefined;
+    previousValue?: (number | null) | undefined | undefined;
+    changePercent?: (number | null) | undefined | undefined;
+    estimatedCost?: (number | null) | undefined | undefined;
+    costUnit?: (string | null) | undefined | undefined;
+    previousEstimatedCost?: (number | null) | undefined | undefined;
+    costChangePercent?: (number | null) | undefined | undefined;
 }, Error>;

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

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

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

@@ -1,7 +1,6 @@
 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';
@@ -10,20 +9,18 @@ export { TraceTimelineSpan } from './trace-timeline-span';
 export { TraceTimeline } from './trace-timeline';
 export { SpanRows, type SpanRowsProps, type SpanRowContext, type SpanRowExpansion } from './span-rows';
 export { SpanTreeRow, type SpanTreeRowProps } from './span-tree-row';
-export { SpanTimelineCol, type SpanTimelineColProps } from './span-timeline-col';
-export { SpanDurationCol } from './span-duration-col';
+export { SpanTimelineRow, type SpanTimelineRowProps } from './span-timeline-row';
 export { SpanTimingHoverCard } from './span-timing-hover-card';
 export { SpanTypeLegend } from './span-type-legend';
 export { TraceSpanTree, type TraceSpanTreeProps } from './trace-span-tree';
 export { TraceSpanTimeline, type TraceSpanTimelineProps } from './trace-span-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 { TracesListModeToggle, type TracesListModeToggleProps } from './traces-list-mode-toggle';
 export { TracesErrorContent, type TracesErrorContentProps } from './traces-error-content';
 export { NoTracesInfo, type NoTracesInfoProps } from './no-traces-info';
 export * from './thread-trace';
+export * from './span-payload';

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

@@ -1,5 +1,5 @@
-import { SpanRecord } from '@mastra/core/storage';
 import { ReactNode } from 'react';
+import { SpanRecord } from '../types';
 export interface SpanDataPanelViewProps {
     traceId: string;
     spanId: string;

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

@@ -1,4 +1,4 @@
-import { SpanRecord } from '@mastra/core/storage';
+import { SpanRecord } from '../types';
 export interface SpanDetailsViewProps {
     spanId: string;
     /** Full span record. Caller fetches via useSpanDetail. */

package/dist/src/domains/traces/components/span-payload/index.d.ts

@@ -0,0 +1,7 @@
+export { SpanInputRenderer, type SpanInputRendererProps } from './span-input-renderers';
+export { SpanOutputRenderer, type SpanOutputRendererProps } from './span-output-renderers';
+export { SpanErrorRenderer, type SpanErrorRendererProps } from './span-error-renderer';
+export { SpanPayloadSection, type SpanPayloadSectionProps, type SpanPayloadView } from './span-payload-section';
+export { SpanPayloadMessages, type SpanPayloadMessagesProps } from './span-payload-messages';
+export { SpanPayloadJson, type SpanPayloadJsonProps } from './span-payload-json';
+export type { PayloadRegistry } from './span-payload-registry';

package/dist/src/domains/traces/components/span-payload/span-error-renderer.d.ts

@@ -0,0 +1,7 @@
+import { SpanRecord } from '../../types';
+export interface SpanErrorRendererProps {
+    span: SpanRecord;
+    className?: string;
+}
+/** The error a span recorded, as a banner; `null` when the span succeeded. */
+export declare function SpanErrorRenderer({ span, className }: SpanErrorRendererProps): import("react").JSX.Element | null;

package/dist/src/domains/traces/components/span-payload/span-input-renderers.d.ts

@@ -0,0 +1,6 @@
+import { SpanRecord } from '../../types';
+export interface SpanInputRendererProps {
+    span: SpanRecord;
+}
+/** Renders a span's input through the registry; `null` when the span recorded none. */
+export declare function SpanInputRenderer({ span }: SpanInputRendererProps): import("react").JSX.Element | null;

package/dist/src/domains/traces/components/span-payload/span-output-renderers.d.ts

@@ -0,0 +1,6 @@
+import { SpanRecord } from '../../types';
+export interface SpanOutputRendererProps {
+    span: SpanRecord;
+}
+/** Renders a span's output through the registry; `null` when the span recorded none. */
+export declare function SpanOutputRenderer({ span }: SpanOutputRendererProps): import("react").JSX.Element | null;

package/dist/src/domains/traces/components/span-payload/span-payload-attachment.d.ts

@@ -0,0 +1,3 @@
+export declare function SpanPayloadAttachment({ value }: {
+    value: unknown;
+}): import("react").JSX.Element;

package/dist/src/domains/traces/components/span-payload/span-payload-json.d.ts

@@ -0,0 +1,6 @@
+export interface SpanPayloadJsonProps {
+    value: unknown;
+    className?: string;
+}
+/** Fallback renderer: pretty-printed JSON for any payload core does not describe in more detail. */
+export declare function SpanPayloadJson({ value, className }: SpanPayloadJsonProps): import("react").JSX.Element;

package/dist/src/domains/traces/components/span-payload/span-payload-messages.d.ts

@@ -0,0 +1,6 @@
+import { SpanInputMessage } from '@mastra/core/observability';
+export interface SpanPayloadMessagesProps {
+    value: SpanInputMessage[];
+}
+/** Renders a span's message list; rich (parts/content arrays) and shallow (`{ role, content: string }`) alike. */
+export declare function SpanPayloadMessages({ value }: SpanPayloadMessagesProps): import("react").JSX.Element;

package/dist/src/domains/traces/components/span-payload/span-payload-primitives.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+/** Small-caps label above a field of a rich payload. */
+export declare function SpanPayloadLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SpanPayloadField({ label, children }: {
+    label: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SpanPayloadMarkdown({ children }: {
+    children: string;
+}): import("react").JSX.Element;
+/** A collapsed block for secondary data (reasoning, steps, warnings…). */
+export declare function SpanPayloadCollapsible({ label, children, defaultOpen, }: {
+    label: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+}): import("react").JSX.Element;
+/** Tool calls as core records them: `{ toolName, args | input }` when they have that shape, JSON otherwise. */
+export declare function SpanPayloadToolCalls({ toolCalls }: {
+    toolCalls: unknown[];
+}): import("react").JSX.Element;

package/dist/src/domains/traces/components/span-payload/span-payload-registry.d.ts

@@ -0,0 +1,31 @@
+import { describeSpanInput } from '@mastra/core/observability';
+import { ComponentType } from 'react';
+import { SpanRecord } from '../../types';
+type CoreSpanRecord = Parameters<typeof describeSpanInput>[0];
+type Described = {
+    type: string;
+    value: unknown;
+};
+/** A component per description tag, typed against the value that tag carries. */
+export type PayloadRegistry<D extends Described> = {
+    [T in D['type']]: ComponentType<{
+        value: Extract<D, {
+            type: T;
+        }>['value'];
+    }>;
+};
+/**
+ * Picks the registry entry for `description.type`. The registry is exhaustive by type,
+ * so the entry always exists; the cast only erases the per-tag prop refinement TS cannot
+ * carry through an indexed lookup.
+ */
+export declare function pickRenderer<D extends Described>(registry: PayloadRegistry<D>, description: D): ComponentType<{
+    value: D['value'];
+}>;
+/**
+ * The client-js span (API response: ISO-string dates, string-literal enums) is the core
+ * span over the wire. `describeSpan*` only read `spanType`, `metadata`, `input`, `output`
+ * and `error`, which are identical in both, so this is the one place the two types meet.
+ */
+export declare function asCoreSpan(span: SpanRecord): CoreSpanRecord;
+export {};

package/dist/src/domains/traces/components/span-payload/span-payload-section.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export type SpanPayloadView = 'rich' | 'raw';
+export interface SpanPayloadSectionProps {
+    title: string;
+    icon?: ReactNode;
+    /** The payload as stored; shown as JSON in the Raw view. */
+    raw: unknown;
+    /** Whether a dedicated presentation exists rather than a JSON fallback. */
+    hasPreview?: boolean;
+    /**
+     * The human-readable rendering. `null` when the payload has no rich form
+     * (JSON fallback): the section then shows Raw only and hides the toggle.
+     */
+    children: ReactNode;
+    /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */
+    layout?: 'panel' | 'details';
+    defaultView?: SpanPayloadView;
+    className?: string;
+}
+/**
+ * A span payload section with a Preview / JSON button group. All JSON views share
+ * the same syntax highlighting while preserving the stored payload.
+ */
+export declare function SpanPayloadSection({ title, icon, raw, hasPreview, children, layout, defaultView, className, }: SpanPayloadSectionProps): import("react").JSX.Element | null;

package/dist/src/domains/traces/components/span-payload/span-payload-tool.d.ts

@@ -0,0 +1,4 @@
+export declare function SpanPayloadTool({ value, showLabel }: {
+    value: unknown;
+    showLabel?: boolean;
+}): import("react").JSX.Element;

package/dist/src/domains/traces/components/span-payload/span-payload.stories.d.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ALL_SPAN_FIXTURES } from './__tests__/fixtures/span-payloads';
+type FixtureName = keyof typeof ALL_SPAN_FIXTURES;
+declare const meta: Meta;
+export default meta;
+export declare const InputRenderers: StoryObj;
+export declare const OutputRenderers: StoryObj;
+export declare const ErrorRenderer: StoryObj;
+export declare const Messages: StoryObj;
+export declare const LongSystemPrompt: StoryObj;
+export declare const MessagesShallow: StoryObj;
+export declare const AgentRunResume: StoryObj;
+export declare const Interrupted: StoryObj;
+export declare const ModelGenerationResult: StoryObj;
+export declare const Tripwire: StoryObj;
+export declare const JsonFallback: StoryObj;
+export declare const LongText: StoryObj;
+export declare const UnknownMessagePart: StoryObj;
+type FixtureArgs = {
+    fixture: FixtureName;
+};
+export declare const FullSpanPanel: StoryObj<FixtureArgs>;
+export declare const CompactSpanDetails: StoryObj<FixtureArgs>;

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

@@ -3,15 +3,7 @@ import { UISpan, UISpanStyle } from '../types';
 export type SpanRowExpansion = {
     hasChildren: boolean;
     numOfChildren: number;
-    totalDescendants: number;
-    allDescendantsExpanded: boolean;
-    siblingsWithChildrenCount: number;
-    siblingsAllExpanded: boolean;
     toggleChildren: () => void;
-    expandAllDescendants: () => void;
-    collapseAllDescendants: () => void;
-    collapseAll: () => void;
-    toggleSiblings: () => void;
 };
 export type SpanRowContext = {
     span: UISpan;

package/dist/src/domains/traces/components/span-summary-description.d.ts

@@ -4,7 +4,6 @@ export interface SpanSummaryDescriptionProps {
         endedAt?: Date | string | null;
         runId?: string | null;
     };
-    className?: string;
 }
 /** Compact span timing + run metadata shown under the span side-panel heading. */
-export declare function SpanSummaryDescription({ span, className }: SpanSummaryDescriptionProps): import("react").JSX.Element;
+export declare function SpanSummaryDescription({ span }: SpanSummaryDescriptionProps): import("react").JSX.Element;

package/dist/src/domains/traces/components/span-timeline-row.d.ts

@@ -0,0 +1,10 @@
+import { SpanRowContext } from './span-rows';
+export type SpanTimelineRowProps = {
+    ctx: SpanRowContext;
+};
+/**
+ * One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the
+ * shared trace time axis. The row spans both grid columns (subgrid) so hover and
+ * selection cover the name and the bar together.
+ */
+export declare function SpanTimelineRow({ ctx }: SpanTimelineRowProps): import("react").JSX.Element;

package/dist/src/domains/traces/components/span-tree-row.d.ts

@@ -2,8 +2,10 @@ import { ReactNode } from 'react';
 import { SpanRowContext } from './span-rows';
 export type SpanTreeRowProps = {
     ctx: SpanRowContext;
-    /** Third grid cell rendered at the end of the row (duration text, timing bar, ...). */
+    /** Secondary line rendered under the span name (duration, ...). */
+    meta?: (ctx: SpanRowContext) => ReactNode;
+    /** Second grid cell rendered at the end of the row (timing bar, ...). */
     trailing?: (ctx: SpanRowContext) => ReactNode;
 };
-/** One hierarchy row: name + expansion controls + an optional trailing cell. Expects a 3-column grid parent. */
-export declare function SpanTreeRow({ ctx, trailing }: SpanTreeRowProps): import("react").JSX.Element;
+/** One hierarchy row: expand toggle + name (+ meta line), then an optional trailing cell. Expects a grid parent with one column per cell. */
+export declare function SpanTreeRow({ ctx, meta, trailing }: SpanTreeRowProps): import("react").JSX.Element;

package/dist/src/domains/traces/components/thread-trace/thread-trace-details.d.ts

@@ -3,15 +3,13 @@ import { TabContentProps, TabListProps, TabProps } from '../../../../ds/componen
 export type ThreadTraceDetailsProps = ComponentProps<'div'>;
 /** The tabbed details column of a row; the spans tab is `ThreadTrace.SpansTab`, others are `ThreadTrace.TabContent`. */
 export declare function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps): import("react").JSX.Element;
-export interface ThreadTraceDetailsHeaderProps extends ComponentProps<'div'> {
-    headerClassName?: string;
-}
+export type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;
 /**
  * Same header/tab layout as the traces page so both surfaces read identically. Children are a
  * `ThreadTrace.TabList` plus an optional `ThreadTrace.DetailsActions`. Measured: its height is
  * taken out of the timeline budget so the details cell never overshoots the messages column.
  */
-export declare function ThreadTraceDetailsHeader({ className, headerClassName, children, ...props }: ThreadTraceDetailsHeaderProps): import("react").JSX.Element;
+export declare function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps): import("react").JSX.Element;
 export type ThreadTraceTabListProps = Omit<TabListProps, 'variant'> & {
     variant?: TabListProps['variant'];
 };

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { UISpan, UISpanStyle } from '../types';
 type TimelineNameColProps = {
     span: UISpan;
@@ -9,8 +10,12 @@ type TimelineNameColProps = {
     revealSpanId?: string;
     isLastChild?: boolean;
     hasChildren?: boolean;
+    numOfChildren?: number;
     isRootSpan?: boolean;
     isExpanded?: boolean;
+    toggleChildren?: () => void;
+    /** Secondary line rendered under the span name (duration, ...). */
+    meta?: ReactNode;
 };
-export declare function TimelineNameCol({ span, spanUI, isFaded, depth, onSpanClick, selectedSpanId, revealSpanId, isLastChild, hasChildren: _hasChildren, isRootSpan, isExpanded: _isExpanded, }: TimelineNameColProps): import("react").JSX.Element;
+export declare function TimelineNameCol({ span, spanUI, isFaded, depth, onSpanClick, selectedSpanId, revealSpanId, isLastChild, hasChildren, numOfChildren, isRootSpan, isExpanded, toggleChildren, meta, }: TimelineNameColProps): import("react").JSX.Element;
 export {};

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

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 import { TraceUsageSummary } from '../trace-list-columns';
 import { SearchableSpan } from '../types';
+import { DataPanelProps } from '../../../ds/components/DataPanel';
 import { LinkComponent } from '../../../ds/types/link-component';
 export type TraceDataPanelPlacement = 'traces-list' | 'trace-page';
 export type TraceDataPanelTab = 'details' | 'timeline' | 'scores' | 'feedback';
 export interface TraceDataPanelViewProps {
-    traceId: string;
+    /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */
+    traceId?: string;
     /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */
     spans: SearchableSpan[] | undefined;
     isLoading?: boolean;
@@ -24,8 +26,14 @@ export interface TraceDataPanelViewProps {
     initialSpanId?: string | null;
     onPrevious?: () => void;
     onNext?: () => void;
-    collapsed?: boolean;
-    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Drawer width; defaults to `wide` since the panel lays out several columns. */
+    size?: DataPanelProps['size'];
+    /** Elevation when opened next to other sibling panels. */
+    depth?: DataPanelProps['depth'];
+    /** Rendered inside the drawer above the trace header (e.g. inbox feedback context). */
+    headerSlot?: ReactNode;
+    /** Accessible drawer name; defaults to the trace id. */
+    title?: string;
     placement: TraceDataPanelPlacement;
     /** @deprecated No longer used: the panel renders the span tree with the duration as text. */
     timelineChartWidth?: 'wide' | 'default';
@@ -84,7 +92,5 @@ export interface TraceDataPanelViewProps {
      * typically the span detail.
      */
     spanPanelSlot?: ReactNode;
-    /** Extra classes applied to the panel root (e.g. `h-full` on the trace page). */
-    className?: string;
 }
-export declare function TraceDataPanelView({ traceId, spans, isLoading, onClose, onSpanSelect, onEvaluateTrace, onSaveAsDatasetItem, onAddTraceMocksToItem, initialSpanId, onPrevious, onNext, collapsed: controlledCollapsed, onCollapsedChange, placement, LinkComponent, traceHref, entityHref, usage, anchorSpanId, showUnavailableFeaturesMsg, scoresTabSlot, scoresTabBadge, feedbackTabSlot, feedbackTabBadge, activeTab, onTabChange, featuredSpanIds, messagesPanelSlot, spanPanelSlot, className, }: TraceDataPanelViewProps): import("react").JSX.Element;
+export declare function TraceDataPanelView({ traceId, spans, isLoading, onClose, onSpanSelect, onEvaluateTrace, onSaveAsDatasetItem, onAddTraceMocksToItem, initialSpanId, onPrevious, onNext, size, depth, headerSlot, title, placement, LinkComponent, traceHref, entityHref, usage, anchorSpanId, showUnavailableFeaturesMsg, scoresTabSlot, scoresTabBadge, feedbackTabSlot, feedbackTabBadge, activeTab, onTabChange, featuredSpanIds, messagesPanelSlot, spanPanelSlot, }: TraceDataPanelViewProps): import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { LightSpanRecord } from '@mastra/core/storage';
+import { LightSpanRecord } from '../types';
 export interface TraceDetailsViewProps {
     traceId: string;
     /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */

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

@@ -1,6 +1,5 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { UISpan } from '../types';
-import { SpanRowContext } from './span-rows';
 export type TraceSpanTimelineProps = {
     hierarchicalSpans: UISpan[];
     onSpanClick: (id: string) => void;
@@ -14,8 +13,10 @@ export type TraceSpanTimelineProps = {
     revealSpanId?: string;
     /** Rendered full-width above the span type legend row. */
     leadingSlot?: ReactNode;
-    /** End-of-row cell. Defaults to the span bar on the shared time axis (`SpanTimelineCol`). */
-    renderTrailing?: (ctx: SpanRowContext) => ReactNode;
 };
-/** Same hierarchy as `TraceSpanTree` (name + expansion controls) with a trailing column of bars on a shared time axis. */
-export declare function TraceSpanTimeline({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, fadedTypes, expandedSpanIds, setExpandedSpanIds, featuredSpanIds, revealSpanId, leadingSlot, renderTrailing, }: TraceSpanTimelineProps): import("react").JSX.Element;
+/**
+ * Gantt-style view of a trace: the same hierarchy and expansion state as `TraceSpanTree`,
+ * but each row is a compact name cell plus a bar on a shared time axis. Rendered with its
+ * own row component (`SpanTimelineRow`), independent from the tree's rows.
+ */
+export declare function TraceSpanTimeline({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, fadedTypes, expandedSpanIds, setExpandedSpanIds, featuredSpanIds, revealSpanId, leadingSlot, }: TraceSpanTimelineProps): import("react").JSX.Element;

package/dist/src/domains/traces/components/trace-span-tree.d.ts

@@ -14,9 +14,9 @@ export type TraceSpanTreeProps = {
     revealSpanId?: string;
     /** Rendered full-width above the span type legend row. */
     leadingSlot?: ReactNode;
-    /** End-of-row cell. Defaults to the span duration as `X.XXX s`. */
+    /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */
     renderTrailing?: (ctx: SpanRowContext) => ReactNode;
 };
 export declare function TraceSpanTreeLoading(): import("react").JSX.Element;
-/** Hierarchical span tree: name, expansion controls and a trailing cell per row. */
+/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */
 export declare function TraceSpanTree({ hierarchicalSpans, onSpanClick, selectedSpanId, isLoading, fadedTypes, expandedSpanIds, setExpandedSpanIds, featuredSpanIds, revealSpanId, leadingSlot, renderTrailing, }: TraceSpanTreeProps): import("react").JSX.Element;

package/dist/src/domains/traces/components/trace-summary-description.d.ts

@@ -14,8 +14,7 @@ export interface TraceSummaryDescriptionProps {
     /** When provided (with `LinkComponent`), the entity name links to the entity's page. */
     entityHref?: string;
     LinkComponent?: LinkComponent;
-    className?: string;
 }
 /** Compact trace metadata shown under the trace side-panel heading. */
-export declare function TraceSummaryDescription({ rootSpan, usage, entityHref, LinkComponent, className, }: TraceSummaryDescriptionProps): import("react").JSX.Element;
+export declare function TraceSummaryDescription({ rootSpan, usage, entityHref, LinkComponent }: TraceSummaryDescriptionProps): import("react").JSX.Element;
 export {};

package/dist/src/domains/traces/components/trace-time-range-chip.d.ts

@@ -0,0 +1,17 @@
+import { DateTimeRangePickerProps } from '../../../ds/components/DateTimeRangePicker';
+import { FilterBarField, FilterBarItem } from '../../../ds/components/FilterBar/types';
+export declare const TRACE_TIME_RANGE_FIELD_ID = "timeRange";
+/**
+ * Synthetic FilterBar field backing the always-present time-range chip. Hidden from the
+ * input's field step (the chip cannot be added twice) but registered so the chip resolves
+ * its label and takes part in keyboard navigation.
+ */
+export declare const TRACE_TIME_RANGE_FIELD: FilterBarField;
+export declare const TRACE_TIME_RANGE_ITEM: FilterBarItem;
+export type TraceTimeRangeChipProps = Pick<DateTimeRangePickerProps, 'preset' | 'onPresetChange' | 'dateFrom' | 'dateTo' | 'onDateChange' | 'onDateRangeChange' | 'disabled' | 'presets'>;
+/**
+ * The trace list's date range rendered as a FilterBar chip: `Time <preset>`. Always
+ * present and non-removable; the value segment opens the regular DateTimeRangePicker
+ * menu/popover.
+ */
+export declare function TraceTimeRangeChip(props: TraceTimeRangeChipProps): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { TraceQueryTrace } from '@mastra/core/storage';
+import { TracesListViewTrace } from './traces-list-view';
+export declare function toTracesListViewTraces(traces: TraceQueryTrace[]): TracesListViewTrace[];

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

@@ -7,6 +7,7 @@ export { useTraceOrBranchSpans, type UseTraceOrBranchSpansArgs, type UseTraceOrB
 export { useTraceSearch, type UseTraceSearchResult } from './use-trace-search';
 export { useTraceSpans } from './use-trace-spans';
 export { useTraces } from './use-traces';
+export { useTraceQuery, type UseTraceQueryArgs, type UseTraceQueryReturn, type TraceQueryArgs, } from './use-trace-query';
 export { useTags } from './use-tags';
 export { useEntityNames } from './use-entity-names';
 export { useEnvironments } from './use-environments';