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

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

@@ -1,5 +1,6 @@
 export interface ReasoningProps {
     text: string;
     redacted?: boolean;
+    streaming?: boolean;
 }
-export declare const Reasoning: ({ text, redacted }: ReasoningProps) => import("react").JSX.Element | null;
+export declare const Reasoning: ({ text, redacted, streaming }: ReasoningProps) => import("react").JSX.Element | null;

package/dist/src/domains/chat/messages/renderers/assistant-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 AssistantTextPartRendererProps {
     part: TextPart;

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

@@ -1,4 +1,4 @@
-import { DataPart } from '@mastra/react';
+import { DataPart } from '@mastra/react/ui';
 export interface DataPartRendererProps {
     part: DataPart;
 }

package/dist/src/domains/chat/messages/renderers/in-message-attachment.d.ts

@@ -3,11 +3,6 @@ export interface InMessageAttachmentProps {
     contentType?: string;
     src?: string;
     data?: string;
-    /** Display label for `file` chips (filename or URI). */
     name?: string;
 }
-/**
- * Renders an attachment preview inline in a message: image, PDF, plain text, or a
- * placeholder chip for media the browser cannot preview (video, gs://, s3://).
- */
 export declare const InMessageAttachment: ({ type, contentType, src, data, name }: InMessageAttachmentProps) => import("react").JSX.Element;

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

@@ -1,17 +1,5 @@
-import { ReasoningPart } from '@mastra/react';
+import { ReasoningPart } from '@mastra/react/ui';
 export interface ReasoningPartRendererProps {
     part: ReasoningPart;
 }
-/**
- * Renders a `MessageFactory` `Reasoning` slot. Reasoning parts may carry the
- * text under `text` (streamed) or `reasoning` (persisted), so read whichever is
- * present before handing it to the plain `Reasoning` primitive.
- *
- * While a reasoning part is still streaming but has not produced any text yet
- * (e.g. a `reasoning-start` chunk with `reasoning: ''` and `state: 'streaming'`),
- * show a shimmering "Reasoning..." line so the user sees the model is thinking.
- * Once text arrives it switches to the collapsible panel. An empty, non-streaming
- * reasoning part renders nothing, so it does not leave a dangling "Hide reasoning"
- * toggle over an empty box.
- */
-export declare const ReasoningPartRenderer: ({ part }: ReasoningPartRendererProps) => import("react").JSX.Element;
+export declare const ReasoningPartRenderer: ({ part }: ReasoningPartRendererProps) => import("react").JSX.Element | null;

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,19 @@ 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 { TracesPageSkeleton, type TracesPageSkeletonProps } from './traces-page-skeleton';
 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,12 +1,11 @@
-import { SpanRecord } from '@mastra/core/storage';
 import { ReactNode } from 'react';
+import { SpanRecord } from '../types';
 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;
@@ -31,4 +30,4 @@ export interface SpanDataPanelViewProps {
     /** Extra classes for the panel root (e.g. flattening the card when nested in the trace panel). */
     className?: string;
 }
-export declare function SpanDataPanelView({ traceId, spanId, span, isLoading, onClose, onPrevious, onNext, activeTab, onTabChange, feedbackTabSlot, feedbackTabBadge, isAnchor, className, }: SpanDataPanelViewProps): import("react").JSX.Element;
+export declare function SpanDataPanelView({ traceId, spanId, span, isLoading, onPrevious, onNext, activeTab, onTabChange, feedbackTabSlot, feedbackTabBadge, isAnchor, className, }: SpanDataPanelViewProps): import("react").JSX.Element;

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/span-type-legend.d.ts

@@ -1,6 +1,8 @@
 import { UISpan } from '../types';
-export declare function useUsedSpanTypes(spans: UISpan[]): string[];
-/** Colored-dot legend of the span types present in `spans`. Renders nothing when empty. */
+/**
+ * Legend of the span types present in `spans`, one small badge per type carrying the
+ * type's own color dot. Sits in its own bordered section above the rows. Renders nothing when empty.
+ */
 export declare function SpanTypeLegend({ spans }: {
     spans: UISpan[];
 }): import("react").JSX.Element | null;

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

@@ -1,12 +1,12 @@
-import { ThreadTraceDetails, ThreadTraceDetailsActions, ThreadTraceDetailsHeader, ThreadTraceTabList } from './thread-trace-details';
+import { ThreadTraceDetails, ThreadTraceDetailsActions, ThreadTraceDetailsHeader } from './thread-trace-details';
 import { ThreadTraceList } from './thread-trace-list';
 import { ThreadTraceLoadMoreSentinel } from './thread-trace-load-more-sentinel';
-import { ThreadTraceMessages } from './thread-trace-messages';
+import { ThreadTraceMessages, ThreadTraceMessagesHeader, ThreadTraceTabContent, ThreadTraceTabList } from './thread-trace-messages';
 import { ThreadTraceRail } from './thread-trace-rail';
 import { ThreadTraceRoot } from './thread-trace-root';
 import { ThreadTraceRow } from './thread-trace-row';
 import { ThreadTraceSpanPanel } from './thread-trace-span-panel';
-import { ThreadTraceSpansTab } from './thread-trace-spans-tab';
+import { ThreadTraceSpans } from './thread-trace-spans';
 /**
  * A memory thread rendered as its traces: one row per agent turn (oldest first), with the
  * messages on the left and the span tree on the right. Clicking a span opens its detail panel on
@@ -19,15 +19,20 @@ import { ThreadTraceSpansTab } from './thread-trace-spans-tab';
  *     <ThreadTrace.Rail turns={turns} />
  *     <ThreadTrace.LoadMoreSentinel ref={setEndOfListElement} />
  *     {ids.map((traceId, i) => (
- *       <ThreadTrace.Row key={traceId} traceId={traceId} isFirst={i === 0}>
- *         <ThreadTrace.Messages>…</ThreadTrace.Messages>
- *         <ThreadTrace.Details>
- *           <ThreadTrace.DetailsHeader>
+ *       <ThreadTrace.Row key={traceId} traceId={traceId}>
+ *         <ThreadTrace.Messages>
+ *           <ThreadTrace.MessagesHeader>
  *             <ThreadTrace.TabList>
- *               <ThreadTrace.Tab value="spans">Spans</ThreadTrace.Tab>
+ *               <ThreadTrace.Tab value="messages">Messages</ThreadTrace.Tab>
  *             </ThreadTrace.TabList>
+ *           </ThreadTrace.MessagesHeader>
+ *           <ThreadTrace.TabContent value="messages">…</ThreadTrace.TabContent>
+ *         </ThreadTrace.Messages>
+ *         <ThreadTrace.Details>
+ *           <ThreadTrace.DetailsHeader>
+ *             <ThreadTrace.DetailsActions>…</ThreadTrace.DetailsActions>
  *           </ThreadTrace.DetailsHeader>
- *           <ThreadTrace.SpansTab />
+ *           <ThreadTrace.Spans />
  *         </ThreadTrace.Details>
  *       </ThreadTrace.Row>
  *     ))}
@@ -41,26 +46,27 @@ export declare const ThreadTrace: typeof ThreadTraceRoot & {
     LoadMoreSentinel: typeof ThreadTraceLoadMoreSentinel;
     Row: typeof ThreadTraceRow;
     Messages: typeof ThreadTraceMessages;
+    MessagesHeader: typeof ThreadTraceMessagesHeader;
+    TabList: typeof ThreadTraceTabList;
+    Tab: ({ children, value, onClick, onClose, disabled, disabledTooltip, attention, className, }: import('../../../../ds/components/Tabs').TabProps) => import("react").JSX.Element;
+    TabContent: typeof ThreadTraceTabContent;
     Details: typeof ThreadTraceDetails;
     DetailsHeader: typeof ThreadTraceDetailsHeader;
     DetailsActions: typeof ThreadTraceDetailsActions;
-    TabList: typeof ThreadTraceTabList;
-    Tab: ({ children, value, onClick, onClose, disabled, disabledTooltip, attention, className, }: import('../../../../ds/components/Tabs').TabProps) => import("react").JSX.Element;
-    TabContent: ({ children, value, flush, keepMounted, className }: import('../../../../ds/components/Tabs').TabContentProps) => import("react").JSX.Element;
-    SpansTab: typeof ThreadTraceSpansTab;
+    Spans: typeof ThreadTraceSpans;
     SpanPanel: typeof ThreadTraceSpanPanel;
 };
 export { useThreadTrace } from './thread-trace-context';
 export type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';
 export { useThreadTraceRow } from './thread-trace-row-context';
 export type { ThreadTraceRowContextValue } from './thread-trace-row-context';
-export { THREAD_TRACE_SPANS_TAB } from './thread-trace-row';
+export { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';
 export type { ThreadTraceRootProps } from './thread-trace-root';
 export type { ThreadTraceListProps } from './thread-trace-list';
 export type { ThreadTraceRailProps } from './thread-trace-rail';
 export type { ThreadTraceLoadMoreSentinelProps } from './thread-trace-load-more-sentinel';
 export type { ThreadTraceRowProps } from './thread-trace-row';
-export type { ThreadTraceMessagesProps } from './thread-trace-messages';
-export type { ThreadTraceDetailsProps, ThreadTraceDetailsHeaderProps, ThreadTraceDetailsActionsProps, ThreadTraceTabListProps, ThreadTraceTabProps, ThreadTraceTabContentProps, } from './thread-trace-details';
-export type { ThreadTraceSpansTabProps } from './thread-trace-spans-tab';
+export type { ThreadTraceMessagesProps, ThreadTraceMessagesHeaderProps, ThreadTraceTabListProps, ThreadTraceTabProps, ThreadTraceTabContentProps, } from './thread-trace-messages';
+export type { ThreadTraceDetailsProps, ThreadTraceDetailsHeaderProps, ThreadTraceDetailsActionsProps, } from './thread-trace-details';
+export type { ThreadTraceSpansProps } from './thread-trace-spans';
 export type { ThreadTraceSpanPanelProps } from './thread-trace-span-panel';

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

@@ -9,7 +9,7 @@ export interface ThreadTraceHighlight {
 }
 export interface ThreadTraceContextValue {
     traceIds: string[];
-    /** The row the reader came from (e.g. "View full thread"); starts expanded and scrolls into view on mount. */
+    /** The row the reader came from (e.g. "Open full thread"); starts expanded and scrolls into view on mount. */
     anchorTraceId: string | null;
     selected: ThreadTraceSelectedSpan | null;
     /** Select a span (opens the side panel) or pass `undefined` to close it. */