@mastra/playground-ui 27.0.0-alpha.7 → 27.0.0

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

@@ -8,5 +8,11 @@ type TimelineSpan = {
     endedAt?: Date | string | null;
     parentSpanId?: string | null;
 };
-export declare const formatHierarchicalSpans: (spans: TimelineSpan[]) => UISpan[];
+/**
+ * When `anchorSpanId` is provided, that span is treated as the displayed root
+ * regardless of its `parentSpanId` -- the branch-subtree case from `getBranch`,
+ * where the anchor has a real parent that's outside the returned set. Without
+ * it, the displayed roots are the spans with no parent (the trace case).
+ */
+export declare const formatHierarchicalSpans: (spans: TimelineSpan[], anchorSpanId?: string) => UISpan[];
 export {};

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

@@ -15,5 +15,6 @@ 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';

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

@@ -33,5 +33,11 @@ export interface SpanDataPanelViewProps {
     }) => ReactNode;
     /** Optional count shown in the "Feedback" tab label. */
     feedbackTabBadge?: ReactNode;
+    /**
+     * Whether this span is the displayed root of the current view (trace root or
+     * branch anchor). Controls visibility of trace-level metadata fields. Defaults
+     * to `span.parentSpanId == null` (trace case) when omitted.
+     */
+    isAnchor?: boolean;
 }
-export declare function SpanDataPanelView({ traceId, spanId, span, isLoading, onClose, onPrevious, onNext, activeTab, onTabChange, scoringTabSlot, scoringTabBadge, feedbackTabSlot, feedbackTabBadge, }: SpanDataPanelViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SpanDataPanelView({ traceId, spanId, span, isLoading, onClose, onPrevious, onNext, activeTab, onTabChange, scoringTabSlot, scoringTabBadge, feedbackTabSlot, feedbackTabBadge, isAnchor, }: SpanDataPanelViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -24,5 +24,11 @@ export interface TraceDataPanelViewProps {
     /** When both are provided, renders an "Open trace page" button. */
     LinkComponent?: LinkComponent;
     traceHref?: string;
+    /**
+     * Span treated as the displayed root of the timeline. Required for branch
+     * subtrees from `getBranch` where the anchor has a real parent that's outside
+     * `spans`. When omitted, the span with no parent is used (trace case).
+     */
+    anchorSpanId?: 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;
+export declare function TraceDataPanelView({ traceId, spans, isLoading, onClose, onSpanSelect, onEvaluateTrace, onSaveAsDatasetItem, initialSpanId, onPrevious, onNext, collapsed: controlledCollapsed, onCollapsedChange, placement, timelineChartWidth, LinkComponent, traceHref, anchorSpanId, }: TraceDataPanelViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/domains/traces/components/traces-list-mode-toggle.d.ts

@@ -0,0 +1,12 @@
+import { TraceListMode } from '../trace-filters';
+export interface TracesListModeToggleProps {
+    value: TraceListMode;
+    onChange: (mode: TraceListMode) => void;
+    disabled?: boolean;
+}
+/**
+ * Dropdown switcher between the two list modes on the Observability traces page:
+ * - `traces` — one row per top-level run (each trace's root anchor).
+ * - `branches` — one row per anchor span, including ones nested inside other runs.
+ */
+export declare function TracesListModeToggle({ value, onChange, disabled }: TracesListModeToggleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,6 +8,8 @@ export type TraceAttributes = {
 };
 export type TracesListViewTrace = {
     traceId: string;
+    /** Required for branch rows; absent on plain trace rows (which are root-rooted). */
+    spanId?: string | null;
     name: string;
     entityType?: string | null;
     entityId?: string | null;
@@ -27,6 +29,11 @@ export type TracesListViewProps = {
     filtersApplied?: boolean;
     /** Currently featured/selected trace — its row gets the highlighted background. */
     featuredTraceId?: string | null;
+    /**
+     * Required in branches mode to disambiguate rows sharing a `traceId`. When set,
+     * a row is featured only when both `traceId` and `spanId` match.
+     */
+    featuredSpanId?: string | null;
     /** Called when a row is clicked. The current selection logic (toggle on same id) is the consumer's call. */
     onTraceClick: (trace: TracesListViewTrace) => void;
     groupByThread?: boolean;
@@ -37,4 +44,4 @@ export type TracesListViewProps = {
  * indexed item array, renders only the visible window via TanStack Virtual, and
  * uses DataList primitives for layout (CSS Grid with subgrid rows).
  */
-export declare function TracesListView({ traces, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, filtersApplied, featuredTraceId, onTraceClick, groupByThread, threadTitles, }: TracesListViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function TracesListView({ traces, isLoading, isFetchingNextPage, hasNextPage, setEndOfListElement, filtersApplied, featuredTraceId, featuredSpanId, onTraceClick, groupByThread, threadTitles, }: TracesListViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { ReactNode } from '../../../../node_modules/@types/react';
 import { PropertyFilterField, PropertyFilterToken } from '../../../ds/components/PropertyFilter/types';
 type TracesToolbarProps = {
     /** Keep all filter pills but reset each value to its neutral state
@@ -14,6 +15,9 @@ type TracesToolbarProps = {
     filterTokens: PropertyFilterToken[];
     onFilterTokensChange: (tokens: PropertyFilterToken[]) => void;
     autoFocusFilterFieldId?: string;
+    /** Field ids rendered as read-only pills (cannot be edited or removed). */
+    lockedFieldIds?: readonly string[];
+    lockedTooltipContent?: ReactNode;
 };
-export declare function TracesToolbar({ onClear, onRemoveAll, onSave, onRemoveSaved, isLoading, filterFields, filterTokens, onFilterTokensChange, autoFocusFilterFieldId, }: TracesToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function TracesToolbar({ onClear, onRemoveAll, onSave, onRemoveSaved, isLoading, filterFields, filterTokens, onFilterTokensChange, autoFocusFilterFieldId, lockedFieldIds, lockedTooltipContent, }: TracesToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,8 @@
 export { getAllSpanIds, getSpanDescendantIds } from './get-all-span-ids';
+export { useBranch, type UseBranchArgs } from './use-branch';
 export { useSpanDetail } from './use-span-detail';
 export { useTraceLightSpans } from './use-trace-light-spans';
+export { useTraceOrBranchSpans, type UseTraceOrBranchSpansArgs, type UseTraceOrBranchSpansResult, } from './use-trace-or-branch-spans';
 export { useTraceSpans } from './use-trace-spans';
 export { useTraces } from './use-traces';
 export { useTags } from './use-tags';

package/dist/src/domains/traces/hooks/use-branch.d.ts

@@ -0,0 +1,52 @@
+export interface UseBranchArgs {
+    traceId: string | null | undefined;
+    spanId: string | null | undefined;
+    depth?: number;
+}
+export declare function useBranch({ traceId, spanId, depth }: UseBranchArgs): import('@tanstack/react-query').UseQueryResult<{
+    traceId: string;
+    spans: {
+        createdAt: Date;
+        updatedAt: Date | null;
+        name: string;
+        spanType: import('@mastra/core/observability').SpanType;
+        isEvent: boolean;
+        startedAt: Date;
+        traceId: string;
+        spanId: string;
+        experimentId?: string | null | undefined;
+        attributes?: Record<string, unknown> | null | undefined;
+        links?: unknown[] | null | undefined;
+        input?: unknown;
+        output?: unknown;
+        error?: unknown;
+        endedAt?: Date | null | undefined;
+        requestContext?: Record<string, unknown> | null | undefined;
+        metadata?: Record<string, unknown> | null | undefined;
+        tags?: string[] | null | undefined;
+        source?: string | null | undefined;
+        entityType?: import('@mastra/core/storage').EntityType | null | undefined;
+        entityId?: string | null | undefined;
+        entityName?: string | null | undefined;
+        parentEntityType?: import('@mastra/core/storage').EntityType | null | undefined;
+        parentEntityId?: string | null | undefined;
+        parentEntityName?: string | null | undefined;
+        rootEntityType?: import('@mastra/core/storage').EntityType | null | undefined;
+        rootEntityId?: string | null | undefined;
+        rootEntityName?: string | null | undefined;
+        userId?: string | null | undefined;
+        organizationId?: string | null | undefined;
+        resourceId?: string | null | undefined;
+        runId?: string | null | undefined;
+        sessionId?: string | null | undefined;
+        threadId?: string | null | undefined;
+        requestId?: string | null | undefined;
+        environment?: string | null | undefined;
+        serviceName?: string | null | undefined;
+        scope?: Record<string, unknown> | null | undefined;
+        entityVersionId?: string | null | undefined;
+        parentEntityVersionId?: string | null | undefined;
+        rootEntityVersionId?: string | null | undefined;
+        parentSpanId?: string | null | undefined;
+    }[];
+}, Error>;

package/dist/src/domains/traces/hooks/use-trace-list-navigation.d.ts

@@ -1,11 +1,16 @@
 /**
  * Derives previous/next *trace* navigation handlers from the current traces list and the featured
- * trace id. Returns undefined for handlers that are out of bounds so the consumer can render
+ * row. Returns undefined for handlers that are out of bounds so the consumer can render
  * disabled UI. Mirrors the shape of `useTraceSpanNavigation`.
+ *
+ * In branches mode rows share a `traceId`, so the consumer can pass a `featuredSpanId` to
+ * disambiguate the active row (and receive the new row's `spanId` on prev/next). In traces
+ * mode `featuredSpanId` should be null/undefined; only the `traceId` is used.
  */
 export declare function useTraceListNavigation<T extends {
     traceId: string;
-}>(traces: T[], featuredTraceId: string | undefined, onTraceChange: (traceId: string) => void): {
+    spanId?: string | null;
+}>(traces: T[], featuredTraceId: string | undefined, featuredSpanId: string | null | undefined, onTraceChange: (traceId: string, spanId?: string) => void): {
     featuredTraceIdx: number;
     handlePreviousTrace: (() => void) | undefined;
     handleNextTrace: (() => void) | undefined;

package/dist/src/domains/traces/hooks/use-trace-or-branch-spans.d.ts

@@ -0,0 +1,25 @@
+import { LightSpanRecord } from '@mastra/core/storage';
+import { TraceListMode } from '../trace-filters';
+export interface UseTraceOrBranchSpansArgs {
+    traceId: string | null | undefined;
+    /** Required when `listMode === 'branches'` — the anchor span identifying the displayed
+     *  subtree. The hook fetches `getBranch(traceId, anchorSpanId)`. Intra-panel span selection
+     *  is separate (the caller's `spanIdParam`); the anchor stays put while it changes. */
+    anchorSpanId?: string | null;
+    listMode: TraceListMode;
+    depth?: number;
+}
+export interface UseTraceOrBranchSpansResult {
+    spans: LightSpanRecord[] | undefined;
+    /** Set in branches mode; undefined in traces mode (which uses parentSpanId == null). */
+    anchorSpanId: string | undefined;
+    isLoading: boolean;
+    isError: boolean;
+    error: unknown;
+}
+/**
+ * Unified data source for the trace/span detail panel. Returns trace spans (full tree from the
+ * root) in traces mode, or branch spans (subtree rooted at `anchorSpanId`) in branches mode.
+ * Only the active query fires; the inactive one is disabled via its `enabled` flag.
+ */
+export declare function useTraceOrBranchSpans({ traceId, anchorSpanId, listMode, depth, }: UseTraceOrBranchSpansArgs): UseTraceOrBranchSpansResult;

package/dist/src/domains/traces/hooks/use-trace-url-state.d.ts

@@ -23,13 +23,22 @@ export interface UseTraceUrlStateResult {
     datePresetRef: React.MutableRefObject<TraceDatePreset>;
     traceIdParam: string | undefined;
     spanIdParam: string | undefined;
+    /** Branch-mode only: the anchor span that defines the displayed subtree. Stable while the
+     *  user navigates between spans inside the panel (which only changes `spanIdParam`). */
+    anchorSpanIdParam: string | undefined;
     spanTabParam: SpanTab | undefined;
     scoreIdParam: string | undefined;
     listMode: TraceListMode;
     selectedEntityOption: EntityOptions | undefined;
     selectedStatus: TraceStatusFilter | undefined;
     filterTokens: PropertyFilterToken[];
-    handleTraceClick: (traceId: string) => void;
+    /**
+     * Selects a row. In traces mode pass just `traceId` (and optionally a `spanId` for an
+     * initial span selection in the panel). In branches mode also pass `anchorSpanId` — the
+     * branch identity, kept stable while the user navigates between spans inside the panel.
+     * Branch rows are identified by (traceId, anchorSpanId); trace rows by traceId alone.
+     */
+    handleTraceClick: (traceId: string, spanId?: string, anchorSpanId?: string) => void;
     /** Convenience: clears the featured trace selection. Equivalent to `handleTraceClick('')`. */
     handleTraceClose: () => void;
     handleSpanChange: (spanId: string | null) => void;
@@ -37,6 +46,8 @@ export interface UseTraceUrlStateResult {
     handleSpanClose: () => void;
     handleSpanTabChange: (tab: SpanTab) => void;
     handleScoreChange: (scoreId: string | null) => void;
+    /** Switches the list view between traces and branches. Clears the current selection. */
+    handleListModeChange: (mode: TraceListMode) => void;
     handleFilterTokensChange: (nextTokens: PropertyFilterToken[]) => void;
     handleDateChange: (value: Date | undefined, type: 'from' | 'to') => void;
     handleDatePresetChange: (preset: TraceDatePreset) => void;

package/dist/src/domains/traces/trace-filters.d.ts

@@ -43,6 +43,9 @@ export declare const TRACE_SYNTHETIC_FILTER_FIELD_IDS: readonly ["rootEntityType
 export declare const TRACE_ROOT_ENTITY_TYPE_PARAM = "rootEntityType";
 export declare const TRACE_STATUS_PARAM = "status";
 export declare const TRACE_LIST_MODE_PARAM = "listMode";
+/** Branch-mode only: identifies the anchor span that defines the displayed subtree.
+ *  Stable across intra-panel span navigation (which only changes `spanId`). */
+export declare const TRACE_ANCHOR_SPAN_ID_PARAM = "anchorSpanId";
 export declare const TRACE_LIST_MODE_VALUES: Set<"traces" | "branches">;
 export type TraceListMode = 'traces' | 'branches';
 export declare const TRACE_DATE_PRESET_PARAM = "datePreset";

package/dist/src/ds/components/Button/Button.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { default as React } from '../../../../node_modules/@types/react';
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "primary" | "cta" | "ghost" | "outline" | null | undefined;
-    size?: "default" | "lg" | "sm" | "md" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
 export type ButtonVariant = NonNullable<ButtonVariantsProps['variant']>;

package/dist/src/ds/components/ButtonsGroup/buttons-group.d.ts

@@ -1,6 +1,31 @@
-export type ButtonsGroupProps = {
-    children: React.ReactNode;
-    className?: string;
-    spacing?: 'default' | 'close';
+import { VariantProps } from 'class-variance-authority';
+import { FormElementSize } from '../../primitives/form-element';
+import * as React from 'react';
+type Orientation = 'horizontal' | 'vertical';
+declare const buttonsGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    spacing?: "default" | "close" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ButtonsGroupVariantsProps = VariantProps<typeof buttonsGroupVariants>;
+export type ButtonsGroupSpacing = NonNullable<ButtonsGroupVariantsProps['spacing']>;
+export type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {
+    orientation?: Orientation;
+    spacing?: ButtonsGroupSpacing;
 };
-export declare function ButtonsGroup({ children, className, spacing }: ButtonsGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const ButtonsGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    orientation?: Orientation;
+    spacing?: ButtonsGroupSpacing;
+} & React.RefAttributes<HTMLDivElement>>;
+export type ButtonsGroupSeparatorProps = React.ComponentPropsWithoutRef<'div'> & {
+    orientation?: Orientation;
+};
+export declare const ButtonsGroupSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    orientation?: Orientation;
+} & React.RefAttributes<HTMLDivElement>>;
+export type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'> & {
+    size?: FormElementSize;
+};
+export declare const ButtonsGroupText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    size?: FormElementSize;
+} & React.RefAttributes<HTMLDivElement>>;
+export { buttonsGroupVariants };

package/dist/src/ds/components/ButtonsGroup/buttons-group.stories.d.ts

@@ -7,3 +7,8 @@ export declare const Default: Story;
 export declare const DefaultSpacing: Story;
 export declare const CloseSpacing: Story;
 export declare const AsSplitButton: Story;
+export declare const Vertical: Story;
+export declare const VerticalCloseSpacing: Story;
+export declare const WithSeparator: Story;
+export declare const VerticalWithSeparator: Story;
+export declare const WithText: Story;

package/dist/src/ds/components/Combobox/combobox-styles.d.ts

@@ -1,8 +1,14 @@
 export declare const comboboxStyles: {
     /** Root wrapper */
     readonly root: "flex flex-col gap-1.5";
-    /** Trigger — form input look, sized to mirror SelectTrigger. */
+    /** Trigger base — shared layout/typography for all variants. */
     readonly trigger: string;
+    /** Variant: default — bordered form input look. */
+    readonly triggerDefault: string;
+    /** Variant: ghost — borderless, hover-only surface. */
+    readonly triggerGhost: string;
+    /** Variant: link — text-only trigger. */
+    readonly triggerLink: string;
     /** Trigger with error state */
     readonly triggerError: "border-accent2 hover:border-accent2 focus-visible:border-accent2";
     /** Chevron icon in trigger */
@@ -20,19 +26,21 @@ export declare const comboboxStyles: {
     /** Search input */
     readonly searchInput: string;
     /** Empty state */
-    readonly empty: "not-empty:block hidden py-6 text-center text-ui-smd text-neutral3";
+    readonly empty: "not-empty:block hidden py-4 text-center text-ui-smd text-neutral3";
     /** Options list */
     readonly list: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1";
-    /** Option item base — rounded-lg (8px) sits concentrically inside rounded-xl + p-1. */
+    /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */
     readonly item: string;
-    /** Option item with selected state (single select) — quiet emphasis, no accent fill. */
-    readonly itemSelected: "data-selected:text-neutral6";
-    /** Check indicator container */
-    readonly checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center";
+    /** Multi-select item — keeps the left checkbox slot, no right indicator. */
+    readonly itemMulti: string;
+    /** Right-aligned slot grouping end content + selection check. */
+    readonly itemRightSlot: "ml-auto flex items-center gap-2 shrink-0";
+    /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */
+    readonly checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center text-accent1";
     /** Check icon (single select) */
-    readonly checkIcon: string;
+    readonly checkIcon: "h-3.5 w-3.5";
     /** Checkbox container (multi select) */
-    readonly checkbox: "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border";
+    readonly checkbox: "flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border";
     /** Checkbox selected state */
     readonly checkboxSelected: "bg-accent1 border-accent1";
     /** Checkbox unselected state */
@@ -47,8 +55,8 @@ export declare const comboboxStyles: {
     readonly optionLabel: "truncate";
     /** Option description */
     readonly optionDescription: "text-ui-sm text-neutral3 truncate";
-    /** Option end slot */
-    readonly optionEnd: "ml-auto";
+    /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
+    readonly optionEnd: "ml-auto flex items-center shrink-0";
     /** Error message */
     readonly error: "text-ui-sm text-accent2";
 };

package/dist/src/ds/components/Combobox/combobox.d.ts

@@ -7,6 +7,7 @@ export type ComboboxOption = {
     start?: React.ReactNode;
     end?: React.ReactNode;
 };
+export type ComboboxVariant = 'default' | 'ghost' | 'link';
 export type ComboboxProps = {
     options: ComboboxOption[];
     value?: string;
@@ -16,12 +17,11 @@ export type ComboboxProps = {
     emptyText?: string;
     className?: string;
     disabled?: boolean;
-    /** Kept for API compatibility; trigger styling is intrinsic to the Combobox now. */
-    variant?: 'default' | 'ghost' | 'link';
+    variant?: ComboboxVariant;
     size?: Exclude<FormElementSize, 'lg'>;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;
     error?: string;
 };
-export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, className, disabled, size, open, onOpenChange, container, error, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, className, disabled, variant, size, open, onOpenChange, container, error, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/Combobox/combobox.stories.d.ts

@@ -10,4 +10,5 @@ export declare const Disabled: Story;
 export declare const CustomEmptyText: Story;
 export declare const ManyOptions: Story;
 export declare const Variants: Story;
+export declare const WithDescriptions: Story;
 export declare const Sizes: Story;

package/dist/src/ds/components/Combobox/index.d.ts

@@ -1,3 +1,4 @@
 export * from './combobox';
 export * from './multi-combobox';
 export { comboboxStyles } from './combobox-styles';
+export { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';

package/dist/src/ds/components/Command/command.d.ts

@@ -26,7 +26,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/src/ds/components/Input/input.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const inputVariants: (props?: ({
     variant?: "default" | "unstyled" | null | undefined;
-    size?: "default" | "lg" | "sm" | "md" | null | undefined;
+    size?: "default" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants> & {
     testId?: string;
@@ -10,7 +10,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<(props?: ({
     variant?: "default" | "unstyled" | null | undefined;
-    size?: "default" | "lg" | "sm" | "md" | null | undefined;
+    size?: "default" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     testId?: string;
     error?: boolean;

package/dist/src/ds/components/InputGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './input-group';

package/dist/src/ds/components/InputGroup/input-group.d.ts

@@ -0,0 +1,44 @@
+import { VariantProps } from 'class-variance-authority';
+import { ButtonProps } from '../Button/Button';
+import { FormElementSize } from '../../primitives/form-element';
+import * as React from 'react';
+export type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {
+    size?: FormElementSize;
+};
+declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    size?: FormElementSize;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type InputGroupAddonProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof inputGroupAddonVariants>;
+declare const InputGroupAddon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export type InputGroupInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    testId?: string;
+    error?: boolean;
+};
+declare const InputGroupInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    testId?: string;
+    error?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+export type InputGroupTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    testId?: string;
+    error?: boolean;
+};
+declare const InputGroupTextarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    testId?: string;
+    error?: boolean;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export type InputGroupTextProps = React.ComponentPropsWithoutRef<'span'>;
+declare const InputGroupText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type InputGroupButtonProps = Omit<ButtonProps, 'size' | 'variant'> & {
+    size?: ButtonProps['size'];
+    variant?: ButtonProps['variant'];
+};
+declare const InputGroupButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant"> & {
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+} & React.RefAttributes<HTMLButtonElement>>;
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };

package/dist/src/ds/components/InputGroup/input-group.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InputGroup } from './input-group';
+declare const meta: Meta<typeof InputGroup>;
+export default meta;
+type Story = StoryObj<typeof InputGroup>;
+export declare const Default: Story;
+export declare const WithInlineStartIcon: Story;
+export declare const WithInlineEndButton: Story;
+export declare const WithLeadingAndTrailing: Story;
+export declare const WithText: Story;
+export declare const WithKbd: Story;
+export declare const BlockStartAddon: Story;
+export declare const BlockEndAddon: Story;
+export declare const Sizes: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const Textarea: Story;

package/dist/src/ds/components/PropertyFilter/property-filter-applied.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from '../../../../node_modules/@types/react';
 import { PropertyFilterField, PropertyFilterToken } from './types';
 export type PropertyFilterAppliedProps = {
     fields: PropertyFilterField[];
@@ -9,6 +10,15 @@ export type PropertyFilterAppliedProps = {
      * its input so the user can start typing immediately.
      */
     autoFocusFieldId?: string;
+    /**
+     * Field ids whose pills must remain visible and read-only — value stays
+     * displayed but cannot be edited or removed. Use when an upstream context
+     * (e.g. agent-scoped traces tab) pre-applies a filter that the user must
+     * not be able to clear.
+     */
+    lockedFieldIds?: readonly string[];
+    /** Tooltip content shown on hover/focus of any locked pill. */
+    lockedTooltipContent?: ReactNode;
 };
 /**
  * Applied filter pills. Text/id-style tokens render with an always-active
@@ -18,4 +28,4 @@ export type PropertyFilterAppliedProps = {
  * popover as the Filter Creator so the user can update selections in place.
  * Creation lives in a separate component (PropertyFilterCreator).
  */
-export declare function PropertyFilterApplied({ fields, tokens, onTokensChange, disabled, autoFocusFieldId, }: PropertyFilterAppliedProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PropertyFilterApplied({ fields, tokens, onTokensChange, disabled, autoFocusFieldId, lockedFieldIds, lockedTooltipContent, }: PropertyFilterAppliedProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/ds/components/PropertyFilter/property-filter-creator.d.ts

@@ -14,6 +14,12 @@ export type PropertyFilterCreatorProps = {
      * can type the value inline instead of in this popover.
      */
     onStartTextFilter?: (fieldId: string) => void;
+    /**
+     * Field ids hidden from the Add Filter dropdown. Use to prevent users from
+     * recreating a filter that an upstream context already owns (e.g. the agent
+     * id when viewing the agent-scoped traces tab).
+     */
+    hiddenFieldIds?: readonly string[];
 };
 /**
  * Minimal Linear-style filter creator: a `+ Filter` button whose popover walks
@@ -23,4 +29,4 @@ export type PropertyFilterCreatorProps = {
  * separate side popover with checkboxes — each check adds its own applied
  * filter and the main popover stays open so users can pick many.
  */
-export declare function PropertyFilterCreator({ fields, tokens, onTokensChange, label, disabled, size, onStartTextFilter, }: PropertyFilterCreatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function PropertyFilterCreator({ fields, tokens, onTokensChange, label, disabled, size, onStartTextFilter, hiddenFieldIds, }: PropertyFilterCreatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/ScrollArea/scroll-area.d.ts

@@ -1,20 +1,41 @@
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 import * as React from 'react';
+type Orientation = 'vertical' | 'horizontal' | 'both';
+export type MaskSides = {
+    top?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    right?: boolean;
+    /** Shorthand: sets both `left` and `right`. Per-side keys override. */
+    x?: boolean;
+    /** Shorthand: sets both `top` and `bottom`. Per-side keys override. */
+    y?: boolean;
+};
+/**
+ * - `true` / omitted: fade the edges that match `orientation`.
+ * - `false`: no fade.
+ * - object: per-side override on top of the orientation default.
+ */
+export type ScrollAreaMask = boolean | MaskSides;
 export type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
     viewPortClassName?: string;
     maxHeight?: string;
     autoScroll?: boolean;
-    orientation?: 'vertical' | 'horizontal' | 'both';
-    /** Fade content at the edges where it's clipped by overflow. */
+    orientation?: Orientation;
+    /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */
+    mask?: ScrollAreaMask;
+    /** @deprecated Use `mask` instead. Retained for backward compatibility. */
     showMask?: boolean;
 };
-declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react/scroll-area').ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
     viewPortClassName?: string;
     maxHeight?: string;
     autoScroll?: boolean;
-    orientation?: "vertical" | "horizontal" | "both";
-    /** Fade content at the edges where it's clipped by overflow. */
+    orientation?: Orientation;
+    /** Fade content at the edges where it's clipped by overflow. Defaults to the axes matching `orientation`. */
+    mask?: ScrollAreaMask;
+    /** @deprecated Use `mask` instead. Retained for backward compatibility. */
     showMask?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react/scroll-area').ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ScrollArea, ScrollBar };

package/dist/src/ds/components/ScrollArea/scroll-area.stories.d.ts

@@ -8,3 +8,7 @@ export declare const WithMaxHeight: Story;
 export declare const HorizontalScroll: Story;
 export declare const CodeBlock: Story;
 export declare const ChatMessages: Story;
+export declare const MaskDisabled: Story;
+export declare const MaskTopOnly: Story;
+export declare const MaskBothAxes: Story;
+export declare const MaskYOnly: Story;