@mastra/playground-ui 60.2.0 → 61.0.0-alpha.1

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

@@ -1,32 +1,22 @@
 import { ComponentProps } from 'react';
-import { DataPanelHeaderProps } from '../../../../ds/components/DataPanel';
 import { TabContentProps, TabListProps, TabProps } from '../../../../ds/components/Tabs';
 export interface ThreadTraceMessagesProps extends ComponentProps<'div'> {
     /** Class name of the sticky, measured wrapper around the children. */
     innerClassName?: string;
 }
 /**
- * The left column of a row: the same Messages / Feedback / Scores tabs as the trace panel's side
- * column, one set per turn. Children are a `ThreadTrace.MessagesHeader` (holding the
- * `ThreadTrace.TabList`) followed by one `ThreadTrace.TabContent` per view. Like the trace
- * panel's side column it is framed by a left border (closing the rail gutter) and a right border,
- * which every row continues so they read as one line down the thread. Its measured height is the
- * clamp budget of the span tree.
+ * The left column of a row: one `ThreadTrace.TabContent` per view (Messages / Feedback / Scores),
+ * switched by the `ThreadTrace.TabList` in the row's divider. Its measured height is the clamp
+ * budget of the span tree.
  */
 export declare function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps): import("react").JSX.Element;
-export type ThreadTraceMessagesHeaderProps = DataPanelHeaderProps;
-/**
- * The bordered tab row at the top of the messages column, same chrome as the trace panel's side
- * column; its border spans the column and continues into the details header's border as one line.
- */
-export declare function ThreadTraceMessagesHeader({ className, ...props }: ThreadTraceMessagesHeaderProps): import("react").JSX.Element;
 export type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {
     variant?: TabListProps['variant'];
     size?: TabListProps['size'];
 };
 export declare function ThreadTraceTabList({ variant, size, ...props }: ThreadTraceTabListProps): import("react").JSX.Element;
 export type ThreadTraceTabProps = TabProps;
-export declare const ThreadTraceTab: ({ children, value, onClick, onClose, disabled, disabledTooltip, attention, className, }: TabProps) => import("react").JSX.Element;
+export declare const ThreadTraceTab: ({ children, value, onClick, onClose, disabled, disabledTooltip, tooltip, attention, className, }: TabProps) => import("react").JSX.Element;
 export type ThreadTraceTabContentProps = TabContentProps;
-/** One view of the messages column; keeps a gutter before the column's right border. */
+/** One view of the messages column. */
 export declare function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps): import("react").JSX.Element;

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

@@ -11,7 +11,7 @@ export interface ThreadTraceRootProps extends ComponentProps<'div'> {
 /**
  * Owns the interaction state of a thread rendered as its traces: the selected span, the
  * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it
- * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a
- * side column while a span is selected.
+ * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the resizable panel group that
+ * gains a span column while a span is selected.
  */
 export declare function ThreadTraceRoot({ traceIds, onLoadOlder, onSelectedSpanChange, className, children, ...props }: ThreadTraceRootProps): import("react").JSX.Element;

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

@@ -1,11 +1,26 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 export declare const THREAD_TRACE_MESSAGES_TAB = "messages";
 export interface ThreadTraceRowProps extends ComponentProps<'div'> {
     traceId: string;
 }
 /**
- * One agent turn: the messages column on the left and the details column on the right. The whole
+ * One agent turn: a `ThreadTrace.Divider` (turn label + tabs) above a `ThreadTrace.RowBody` holding
+ * the messages column on the left and the details card on the right. The whole
  * row is dimmed unless it is the first one in view, hovered, or its span is open in the side panel,
  * so the reader keeps track of which turn they are on without hovering.
  */
 export declare function ThreadTraceRow({ traceId, className, children, ...props }: ThreadTraceRowProps): import("react").JSX.Element;
+export type ThreadTraceRowBodyProps = ComponentProps<'div'>;
+/** The two columns of a row: the messages on the left and the details card on the right, each padded on x. */
+export declare function ThreadTraceRowBody({ className, ...props }: ThreadTraceRowBodyProps): import("react").JSX.Element;
+export interface ThreadTraceDividerProps {
+    /** Names the turn, e.g. `Turn 1`. Used as the accessible name; not shown. */
+    label: string;
+    /** Typically the row's `ThreadTrace.TabList`. */
+    children?: ReactNode;
+}
+/**
+ * The rule above a row: a full-width line, with its content (e.g. a trace link and tabs) centered over the messages
+ * column only, so the line runs on uninterrupted above the details card.
+ */
+export declare function ThreadTraceDivider({ label, children }: ThreadTraceDividerProps): import("react").JSX.Element;

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

@@ -3,7 +3,7 @@ export interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, '
     panelClassName?: string;
 }
 /**
- * The side panel with the selected span's detail. The cell stays mounted (empty) while no span
- * is selected so the root grid can animate its column open and closed.
+ * The resizable side column with the selected span's detail; rendered only while a
+ * span is selected.
  */
-export declare function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps): import("react").JSX.Element;
+export declare function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps): import("react").JSX.Element | null;

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

@@ -4,9 +4,8 @@ export interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'chil
     timelineClassName?: string;
 }
 /**
- * The span tree of a row, clamped to the messages column while the row is collapsed with a
- * "Show more" control (and "Show less" once expanded, hidden while a span of the row is open).
- * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;
- * without them the timeline is shown in full.
+ * The span tree of a row, clamped (and faded) to the messages column while the row is collapsed.
+ * Clicking the fade or its Expand button expands it; a Collapse button sits under the expanded tree
+ * (hidden while a span of the row is open). Clamping needs the measured height of `ThreadTrace.Messages`.
  */
 export declare function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps): import("react").JSX.Element;

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

@@ -1,6 +1,12 @@
+export interface ThreadViewSkeletonProps {
+    /** Mirrors the resolved rows: adds the Feedback tab between Messages and Scores. */
+    withFeedback?: boolean;
+}
 /**
- * Same geometry as the resolved `ThreadTrace` rows — the rail gutter on the left, a `24rem`
- * messages column closed by a right border, then the details column with its header, each row
- * underlined — so the panel does not reflow once the thread's traces arrive.
+ * Same geometry as the resolved `ThreadTrace` rows — the `ThreadTraceDivider` grid with the trace link and tabs
+ * centered over the messages column, then the `px-4` messages column next to a details card that is clamped to it
+ * (`h-0 min-h-full`) and holds the span tree — so the panel does not reflow once the thread's traces arrive.
+ *
+ * The whole skeleton waits 500ms before fading in, so fast responses swap straight to content without a flash.
  */
-export declare function ThreadViewSkeleton(): import("react").JSX.Element;
+export declare function ThreadViewSkeleton({ withFeedback }: ThreadViewSkeletonProps): import("react").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { TraceUsageSummary } from '../trace-list-columns';
-import { SearchableSpan } from '../types';
+import { LightSpanRecord } from '../types';
 import { DataPanelProps } from '../../../ds/components/DataPanel';
 import { LinkComponent } from '../../../ds/types/link-component';
 export type TraceDataPanelPlacement = 'traces-list' | 'trace-page';
@@ -11,7 +11,7 @@ export interface TraceDataPanelViewProps {
     /** 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;
+    spans: LightSpanRecord[] | undefined;
     isLoading?: boolean;
     onClose: () => void;
     onSpanSelect?: (spanId: string | undefined) => void;
@@ -86,6 +86,13 @@ export interface TraceDataPanelViewProps {
      * trace as one reconstructed agent turn). Rendered without content padding.
      */
     messagesPanelSlot?: ReactNode;
+    /**
+     * Actions rendered at the end of the side column's tab row (e.g. "Open full thread").
+     * `compact` is true when the side column is narrow and controls collapse to icons.
+     */
+    sideHeaderActions?: (options: {
+        compact: boolean;
+    }) => ReactNode;
     /** Controlled span view (tree or timeline); falls back to local state starting on the tree. */
     spanView?: TraceSpanView;
     onSpanViewChange?: (view: TraceSpanView) => void;
@@ -98,4 +105,4 @@ export interface TraceDataPanelViewProps {
      */
     spanPanelSlot?: ReactNode;
 }
-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, featuredSpanIds, messagesPanelSlot, sideView: controlledSideView, onSideViewChange, spanView: controlledSpanView, onSpanViewChange, spanPanelSlot, }: 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, featuredSpanIds, messagesPanelSlot, sideHeaderActions, sideView: controlledSideView, onSideViewChange, spanView: controlledSpanView, onSpanViewChange, spanPanelSlot, }: TraceDataPanelViewProps): import("react").JSX.Element;

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

@@ -1,11 +1,12 @@
 import { StoryObj } from '@storybook/react-vite';
+import { LightSpanRecord } from '../types';
 import { TraceDataPanelView } from './trace-data-panel-view';
 declare const meta: {
     title: string;
     component: typeof TraceDataPanelView;
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
         traceId?: string | undefined;
-        spans: import('../types').SearchableSpan[] | undefined;
+        spans: LightSpanRecord[] | undefined;
         isLoading?: boolean | undefined;
         onClose: () => void;
         onSpanSelect?: ((spanId: string | undefined) => void) | undefined;
@@ -43,6 +44,9 @@ declare const meta: {
         feedbackTabBadge?: import('react').ReactNode;
         featuredSpanIds?: string[] | undefined;
         messagesPanelSlot?: import('react').ReactNode;
+        sideHeaderActions?: ((options: {
+            compact: boolean;
+        }) => import('react').ReactNode) | undefined;
         spanView?: import('./trace-data-panel-view').TraceSpanView | undefined;
         onSpanViewChange?: ((view: import('./trace-data-panel-view').TraceSpanView) => void) | undefined;
         sideView?: import('./trace-data-panel-view').TraceSideView | undefined;
@@ -54,7 +58,7 @@ declare const meta: {
     };
     args: {
         traceId: string;
-        spans: ({
+        spans: {
             traceId: string;
             spanId: string;
             name: string;
@@ -76,9 +80,7 @@ declare const meta: {
             inputPreview?: (string | null) | undefined | undefined;
             createdAt: string;
             updatedAt: string | null;
-        } & {
-            searchText: string;
-        })[];
+        }[];
         usage: {
             inputTokens: number;
             outputTokens: number;

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

@@ -1,16 +1,8 @@
 export interface TraceMessagesPanelProps {
     traceId: string;
-    /** Memory thread the trace belongs to; used to decide whether a full-thread action is worth showing. */
-    threadId?: string;
     className?: string;
-    /** Opens the full thread in place. */
-    onViewFullThread?: () => void;
     /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */
     onHighlightSpans?: (spanIds: string[]) => void;
 }
-/**
- * The "Messages" view of the trace side column: the trace rendered as one
- * reconstructed agent turn, with an "Open full thread" entry point at the top of
- * the conversation when the thread has more turns than this one.
- */
-export declare function TraceMessagesPanel({ traceId, threadId, className, onViewFullThread, onHighlightSpans, }: TraceMessagesPanelProps): import("react").JSX.Element;
+/** The "Messages" view of the trace side column: the trace rendered as one reconstructed agent turn. */
+export declare function TraceMessagesPanel({ traceId, className, onHighlightSpans }: TraceMessagesPanelProps): import("react").JSX.Element;

package/dist/src/domains/traces/components/trace-messages-skeleton.d.ts

@@ -1,11 +1,14 @@
 export interface TraceMessagesSkeletonProps {
     className?: string;
+    /**
+     * Hold the skeleton invisible for its first 500ms (`delay-500` + `fill-mode-backwards`) so cached or fast
+     * responses swap straight to content without a flash. Turn off when a parent skeleton already handles the delay.
+     */
+    delayed?: boolean;
 }
 /**
- * Same layout as `TraceThreadItemView` once it resolves — `p-4`, `max-w-3xl`, a user bubble on
- * the right then assistant text on the left — so the column keeps its shape while spans load.
- *
- * Stays invisible for the first 500ms (`delay-500` + `fill-mode-backwards`) so cached or fast
- * responses swap straight to content without a skeleton flash.
+ * Same layout as `TraceThreadItemView` once it resolves — `p-4`, `max-w-3xl`, a user bubble on the right
+ * (`Message`: `px-4 py-2` + border around one body line, `my-3` with the leading margin stripped), assistant
+ * body lines, then a one-line tool activity (`py-1` + caption line) — so the column keeps its shape while spans load.
  */
-export declare function TraceMessagesSkeleton({ className }: TraceMessagesSkeletonProps): import("react").JSX.Element;
+export declare function TraceMessagesSkeleton({ className, delayed }: TraceMessagesSkeletonProps): import("react").JSX.Element;

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

@@ -27,7 +27,7 @@ export interface TraceSpanPanelProps {
     featuredSpanIds?: string[];
     /** Called with the span ids behind a reconstructed message when the user asks to highlight them. */
     onHighlightSpans?: (spanIds: string[]) => void;
-    /** When true, the whole panel shows the trace's thread (every turn) instead of the trace timeline. */
+    /** When true, opens the trace's thread (every turn) in a stacked drawer above the trace panel. */
     isFullThreadOpen?: boolean;
     /** Enables the in-place "Open full thread" swap; without it the action falls back to a link. */
     onFullThreadOpenChange?: (open: boolean) => void;

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

@@ -1,11 +1,9 @@
 export interface TraceSpanTreeSkeletonProps {
-    /** Mirrors `leadingSlot`: the search field rendered above the tree. */
-    withSearch?: boolean;
     className?: string;
 }
 /**
- * Same boxes as the resolved tree — search field, type legend, then one `min-h-8` row per span
- * indented by depth with the dot + name + duration of `TimelineNameCol` — so nothing jumps
- * when the spans land.
+ * Same boxes as the resolved tree — the `SpanTypeLegend` pills, then one `TimelineNameCol` row per span
+ * (structure sign for children, top-aligned dot, caption name stacked over the meta duration, `w-8` toggle slot) —
+ * so nothing jumps when the spans land.
  */
-export declare function TraceSpanTreeSkeleton({ withSearch, className }: TraceSpanTreeSkeletonProps): import("react").JSX.Element;
+export declare function TraceSpanTreeSkeleton({ className }: TraceSpanTreeSkeletonProps): import("react").JSX.Element;

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

@@ -1,14 +1,16 @@
 export interface TraceThreadPanelProps {
+    /** Keep the panel mounted and toggle `open` so the drawer animates in and out. */
+    open: boolean;
     threadId: string;
     withQueryTrace: boolean;
     withFeedback: boolean;
     onOpenScore: (traceId: string, scoreId: string) => void;
-    /** Return to the trace panel this thread view replaced. */
-    onBack: () => void;
-    /** Close the whole side panel. */
+    /** Close the thread drawer, revealing the trace panel underneath. */
     onClose: () => void;
+    /** Sibling-drawer elevation (see `DataPanel`); defaults to 2, above the trace panel. */
+    depth?: 1 | 2 | 3;
     /** Accessible drawer name; defaults to the thread id. */
     title?: string;
 }
-/** The trace drawer swapped for the full thread: every turn as traces, opened on the latest one. */
-export declare function TraceThreadPanel({ threadId, withQueryTrace, withFeedback, onOpenScore, onBack, onClose, title, }: TraceThreadPanelProps): import("react").JSX.Element;
+/** The full thread in its own drawer, stacked above the trace panel: every turn as traces, opened on the latest one. */
+export declare function TraceThreadPanel({ open, threadId, withQueryTrace, withFeedback, onOpenScore, onClose, depth, title, }: TraceThreadPanelProps): import("react").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { UseQueryResult } from '@tanstack/react-query';
-import { SearchableSpan } from '../types';
+import { LightSpanRecord } from '../types';
 export interface UseBranchArgs {
     traceId: string | null | undefined;
     spanId: string | null | undefined;
@@ -7,5 +7,5 @@ export interface UseBranchArgs {
 }
 export declare function useBranch({ traceId, spanId, depth, }: UseBranchArgs): UseQueryResult<{
     traceId: string;
-    spans: SearchableSpan[];
+    spans: LightSpanRecord[];
 } | null>;

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

@@ -1,6 +1,6 @@
 import { UseQueryResult } from '@tanstack/react-query';
-import { SearchableSpan } from '../types';
+import { LightSpanRecord } from '../types';
 export declare function useTraceLightSpans(traceId: string | null | undefined): UseQueryResult<{
     traceId: string;
-    spans: SearchableSpan[];
+    spans: LightSpanRecord[];
 } | null>;

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

@@ -1,5 +1,5 @@
 import { TraceListMode } from '../trace-filters';
-import { SearchableSpan } from '../types';
+import { LightSpanRecord } from '../types';
 export interface UseTraceOrBranchSpansArgs {
     traceId: string | null | undefined;
     /** Required when `listMode === 'branches'` — the anchor span identifying the displayed
@@ -10,7 +10,7 @@ export interface UseTraceOrBranchSpansArgs {
     depth?: number;
 }
 export interface UseTraceOrBranchSpansResult {
-    spans: SearchableSpan[] | undefined;
+    spans: LightSpanRecord[] | undefined;
     /** Set in branches mode; undefined in traces mode (which uses parentSpanId == null). */
     anchorSpanId: string | undefined;
     isLoading: boolean;

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

@@ -23,6 +23,8 @@ export interface UseTraceQueryReturn {
     isFetchingNextPage: boolean;
     fetchNextPage: () => void;
     isLoading: boolean;
+    /** The rows belong to the previous query key (e.g. another thread) while the new one loads. */
+    isPlaceholderData: boolean;
     isFetching: boolean;
     isRefetching: boolean;
     fetchStatus: 'idle' | 'fetching' | 'paused';

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

@@ -1,10 +1,10 @@
-import { SearchableSpan } from '../types';
-export interface UseTraceSearchResult {
+import { LightSpanRecord } from '../types';
+export interface UseTraceSearchResult<Span extends LightSpanRecord = LightSpanRecord> {
     /** The immediate, user-facing input value. Bind this to the search field. */
     query: string;
     setQuery: (query: string) => void;
     /** Rows matching the deferred query. An empty query returns the input array reference. */
-    results: SearchableSpan[];
+    results: Span[];
     /**
      * Spans that matched somewhere other than their name — in `metadata`, `attributes` or
      * `error`. Their row shows no visible occurrence of the term, so the surface needs to say
@@ -18,10 +18,13 @@ export interface UseTraceSearchResult {
 /**
  * Client-side search over a flat span list.
  *
- * Matching is a substring test against `searchText`, the haystack built once per span when
- * the query resolved (see `toSearchableSpans`). That is what makes the open-ended `metadata`
- * and `error` payloads searchable: their shapes are unknown, so no fixed list of fields can
- * read them. Both sides are already lowercased, so the test is a bare `includes`.
+ * Matching is a substring test against a lowercased haystack built once per `spans` array
+ * (see `toSearchableSpans`). That is what makes the open-ended `metadata` and `error`
+ * payloads searchable: their shapes are unknown, so no fixed list of fields can read them.
+ *
+ * The haystack lives here, not in the data hooks, so only a mounted search surface pays for
+ * flattening. Views that merely render spans (e.g. the thread view, which shows every trace
+ * of a thread at once) never build it.
  *
  * Filtering is keyed on a deferred copy of the query, so typing stays responsive while a
  * large list re-filters at lower priority — bind the input to `query`, not to the deferred
@@ -31,4 +34,4 @@ export interface UseTraceSearchResult {
  * `spans` is required. Resolving the loading/empty state is the caller's job — a component
  * holding a query result passes `data?.spans ?? []`.
  */
-export declare function useTraceSearch(spans: SearchableSpan[]): UseTraceSearchResult;
+export declare function useTraceSearch<Span extends LightSpanRecord>(spans: Span[]): UseTraceSearchResult<Span>;

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

@@ -243,17 +243,11 @@ export declare const traceSpansQueryOptions: (client: MastraClient, traceId: str
  * projection would only hide content the reader is looking at.
  */
 export type TraceSpansData = Awaited<ReturnType<MastraClient['getTrace']>>;
-type SearchableTraceSpansData = Omit<NonNullable<TraceSpansData>, 'spans'> & {
-    spans: Array<NonNullable<TraceSpansData>['spans'][number] & {
-        searchText: string;
-    }>;
-};
 export declare function useTraceSpans(traceId: string | null | undefined, { passive }?: {
     passive?: boolean;
-}): UseQueryResult<SearchableTraceSpansData | null>;
+}): UseQueryResult<TraceSpansData>;
 /**
  * Observes the `trace-spans` query of several traces at once and projects each one with `select`.
  * Traces still loading (or failed) yield `fallback(traceId)` so the result always lines up with `traceIds`.
  */
 export declare function useTraceSpansQueries<T>(traceIds: string[], select: (traceId: string, data: TraceSpansData) => T, fallback: (traceId: string) => T): T[];
-export {};

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

@@ -38,6 +38,7 @@ export declare function useTracesListSource({ query: buildQuery, orderBy, rollin
     isFetchingNextPage: boolean;
     fetchNextPage: () => void;
     isLoading: boolean;
+    isPlaceholderData: boolean;
     isFetching: boolean;
     isRefetching: boolean;
     fetchStatus: "idle" | "fetching" | "paused";

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

@@ -1,5 +1,5 @@
 export { filterSpansKeepingAncestors } from './filter-spans-keeping-ancestors';
 export { flattenToSearchText } from './flatten-to-search-text';
-export { selectSearchableSpans, toSearchableSpans } from './to-searchable-spans';
+export { toSearchableSpans } from './to-searchable-spans';
 export { getSpanTimingLayout, type SpanTimingLayout } from './span-timing';
 export { getSpanDurationMs, getInputPreview, isTokenLimitExceeded, getTokenLimitMessage } from './span-utils';

package/dist/src/domains/traces/utils/to-searchable-spans.d.ts

@@ -1,8 +1,8 @@
-import { LightSpanRecord, SearchableSpan } from '../types';
+import { LightSpanRecord } from '../types';
 /**
  * Attach a precomputed search haystack to each span.
  *
- * Run this once, where the span list is resolved — not per keystroke. Flattening
+ * Run this once per span list — not per keystroke. Flattening
  * walks every nested payload, so doing it inside a filter would repeat the whole
  * walk for every character typed.
  *
@@ -16,27 +16,3 @@ import { LightSpanRecord, SearchableSpan } from '../types';
 export declare function toSearchableSpans<Span extends LightSpanRecord>(spans: Span[]): Array<Span & {
     searchText: string;
 }>;
-/**
- * React Query `select` for the `{ traceId, spans }` payload returned by
- * `getTraceLight` and `getBranch`.
- *
- * Enriching here rather than in a component means the flattening runs once per
- * fetch and is cached with the query, so it survives the panel unmounting and
- * remounting. Keep this a module-level reference: React Query re-runs `select`
- * whenever its identity changes, and an inline arrow would re-flatten the whole
- * trace on every render.
- *
- * Deliberately not generic: TypeScript cannot infer a query's `TData` from a
- * generic function passed as `select`, and silently falls back to the unselected
- * type — which would leave `searchText` missing at the call sites.
- *
- * `null` is passed through because a query may resolve to it. `undefined` is not
- * in the signature: React Query only runs `select` once data exists.
- */
-export declare function selectSearchableSpans(data: {
-    traceId: string;
-    spans: LightSpanRecord[];
-} | null): {
-    traceId: string;
-    spans: SearchableSpan[];
-} | null;

package/dist/src/domains/workspace/components/frontmatter.d.ts

@@ -0,0 +1,4 @@
+export declare function splitFrontmatter(content: string): {
+    frontmatter: string | null;
+    body: string;
+};

package/dist/src/domains/workspace/components/mount-icon.d.ts

@@ -0,0 +1,6 @@
+import { WorkspaceFsListResponse } from '@mastra/client-js';
+export type WorkspaceMount = NonNullable<WorkspaceFsListResponse['entries'][number]['mount']>;
+/** Provider glyph for a mounted folder; falls back to a generic cloud. */
+export declare function MountIcon({ mount }: {
+    mount: WorkspaceMount;
+}): import("react").JSX.Element;

package/dist/src/domains/workspace/components/use-workspace-context.d.ts

@@ -0,0 +1,32 @@
+import { WorkspaceAddSkillOptions } from './workspace-add-skill';
+export interface WorkspaceEntryRef {
+    path: string;
+    type: 'file' | 'directory';
+}
+/** Called after the user confirms a deletion. For directories, delete recursively. */
+export type WorkspaceDeleteHandler = (entry: WorkspaceEntryRef) => void | Promise<void>;
+/** Called with the workspace-relative path of the directory to create. */
+export type WorkspaceCreateDirectoryHandler = (path: string) => void | Promise<void>;
+export interface WorkspaceContextValue {
+    workspaceId: string;
+    activeFilePath?: string;
+    setActiveFilePath: (path: string | undefined) => void;
+    isSearching: boolean;
+    setSearching: (searching: boolean) => void;
+    query: string;
+    setQuery: (query: string) => void;
+    onDelete?: WorkspaceDeleteHandler;
+    onCreateDirectory?: WorkspaceCreateDirectoryHandler;
+    /** Whether a path is (inside) a read-only folder. */
+    isReadOnly: (path: string) => boolean;
+    searchFiles: boolean;
+    searchSkills: boolean;
+    fileCount?: number;
+    skillCount?: number;
+    addSkill?: WorkspaceAddSkillOptions;
+    /** Expanded folders; the active file's parents are added whenever it changes. */
+    openFolders: ReadonlySet<string>;
+    setFolderOpen: (path: string, open: boolean) => void;
+}
+export declare const WorkspaceContext: import('react').Context<WorkspaceContextValue | null>;
+export declare function useWorkspaceContext(): WorkspaceContextValue;

package/dist/src/domains/workspace/components/workspace-active-file.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface WorkspaceFilePreview {
+    path: string;
+    /** Base64 for images and videos, text otherwise. */
+    content: string;
+    mimeType?: string;
+}
+/** Return a node to take over the preview of a file, or `undefined` to keep the built-in rendering. */
+export type WorkspacePreviewFactory = (file: WorkspaceFilePreview) => ReactNode | undefined;
+export declare function WorkspaceFilePath(): import("react").JSX.Element | null;
+export declare function WorkspaceActiveFileContent({ renderPreview }: {
+    renderPreview?: WorkspacePreviewFactory;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null;

package/dist/src/domains/workspace/components/workspace-add-skill-dialog.d.ts

@@ -0,0 +1,39 @@
+export interface WritableMount {
+    path: string;
+    displayName?: string;
+    icon?: string;
+    provider?: string;
+    name?: string;
+}
+export interface AddSkillDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    workspaceId: string;
+    onInstall: (params: {
+        repository: string;
+        skillName: string;
+        mount?: string;
+    }) => void;
+    isInstalling?: boolean;
+    /**
+     * Unique IDs of skills installed via skills.sh (format: "owner/repo/skillName").
+     * Used for precise matching - only the exact source/skill combo shows as installed.
+     */
+    installedSkillIds?: string[];
+    /**
+     * Names of skills that are already installed (fallback when source info unavailable).
+     * Skills matching by name only will show as installed regardless of source.
+     */
+    installedSkillNames?: string[];
+    /**
+     * Writable mounts available for skill installation (for CompositeFilesystem).
+     * When more than one is provided, a dropdown is shown to pick the mount.
+     */
+    writableMounts?: WritableMount[];
+    /**
+     * Map of skill name to its installed path (for showing mount location on "Installed" badge).
+     * Only needed when multiple mounts exist.
+     */
+    installedSkillPaths?: Record<string, string>;
+}
+export declare function WorkspaceAddSkillDialog({ open, onOpenChange, workspaceId, onInstall, isInstalling, installedSkillIds, installedSkillNames, writableMounts, installedSkillPaths, }: AddSkillDialogProps): import("react").JSX.Element;

package/dist/src/domains/workspace/components/workspace-add-skill.d.ts

@@ -0,0 +1,10 @@
+import { AddSkillDialogProps } from './workspace-add-skill-dialog';
+export type WorkspaceSkillInstallParams = Parameters<AddSkillDialogProps['onInstall']>[0];
+export interface WorkspaceAddSkillOptions extends Omit<AddSkillDialogProps, 'open' | 'onOpenChange' | 'workspaceId' | 'onInstall' | 'isInstalling'> {
+    /** Installs the picked skill. The dialog closes when it resolves and stays open when it rejects. */
+    onInstall: (params: WorkspaceSkillInstallParams) => Promise<void>;
+}
+/** "Add skill" button that opens the skills.sh dialog. Renders nothing without `addSkill` options. */
+export declare function WorkspaceAddSkill({ labeled }: {
+    labeled?: boolean;
+}): import("react").JSX.Element | null;

package/dist/src/domains/workspace/components/workspace-context.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { WorkspaceCreateDirectoryHandler, WorkspaceDeleteHandler } from './use-workspace-context';
+import { WorkspaceAddSkillOptions } from './workspace-add-skill';
+export interface WorkspaceProviderProps {
+    workspaceId: string;
+    /** The open file. The component is controlled: the parent owns this value. */
+    activeFilePath?: string;
+    /** Called when the user opens (or a delete closes) a file; update `activeFilePath` in response. */
+    onActiveFileChange: (path: string | undefined) => void;
+    /** Enables the delete action on tree rows. */
+    onDelete?: WorkspaceDeleteHandler;
+    /** Enables the "New folder" action. */
+    onCreateDirectory?: WorkspaceCreateDirectoryHandler;
+    /** Folders (and their contents) where delete / new folder are hidden. */
+    readOnlyPaths?: string[];
+    /** Include file search. Defaults to true. */
+    searchFiles?: boolean;
+    /** Include skill search. Defaults to true. */
+    searchSkills?: boolean;
+    /** Shown as `N Files` in the aside title. */
+    fileCount?: number;
+    /** Shown as `N Skills` in the aside title. */
+    skillCount?: number;
+    /** Enables the "Add skill" action and its skills.sh dialog. Omit to hide it. */
+    addSkill?: WorkspaceAddSkillOptions;
+    children: ReactNode;
+}
+export declare function WorkspaceProvider({ workspaceId, activeFilePath, onDelete, onCreateDirectory, onActiveFileChange, readOnlyPaths, searchFiles, searchSkills, fileCount, skillCount, addSkill, children, }: WorkspaceProviderProps): import("react").JSX.Element;

package/dist/src/domains/workspace/components/workspace-create-directory.d.ts

@@ -0,0 +1,4 @@
+/** "New folder" icon button; renders nothing unless `onCreateDirectory` is provided. */
+export declare function WorkspaceCreateDirectory({ labeled }?: {
+    labeled?: boolean;
+}): import("react").JSX.Element | null;

package/dist/src/domains/workspace/components/workspace-error.d.ts

@@ -0,0 +1,5 @@
+export declare function WorkspaceError({ error, fallback, className, }: {
+    error: unknown;
+    fallback: string;
+    className?: string;
+}): import("react").JSX.Element;