@mastra/playground-ui 60.2.1-alpha.0 → 61.0.0-alpha.2

package/dist/domains/traces/components/thread-view-by-trace.cjs.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('@mastra/react');
+const reactQuery = require('@tanstack/react-query');
 const lucideReact = require('lucide-react');
 const React = require('react');
-require('@mastra/react');
-require('@tanstack/react-query');
 require('@base-ui/react/combobox');
 const domains_scores_components_traceScoresTab = require('../../scores/components/trace-scores-tab.cjs.js');
 require('@mastra/core/utils/safe-stringify');
@@ -20,7 +20,7 @@ const domains_traces_components_traceThreadItemView = require('./trace-thread-it
 const domains_traces_components_tracesErrorContent = require('./traces-error-content.cjs.js');
 const domains_traces_hooks_useTraceSpans = require('../hooks/use-trace-spans.cjs.js');
 const domains_traces_hooks_useTracesListSource = require('../hooks/use-traces-list-source.cjs.js');
-const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const Txt = require('../../../Txt-DNnvlrBo.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const icons_ScorersIcon = require('../../../icons/ScorersIcon.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace/thread-trace-row-context.cjs.js');
@@ -35,7 +35,7 @@ function ThreadViewByTrace({
   pageSize = 10
 }) {
   const legacyFilters = React.useMemo(() => ({ threadId }), [threadId]);
-  const { rows, isLoading, error, hasNextPage, isFetchingNextPage, fetchNextPage } = domains_traces_hooks_useTracesListSource.useTracesListSource({
+  const { rows, isLoading, isPlaceholderData, error, hasNextPage, isFetchingNextPage, fetchNextPage } = domains_traces_hooks_useTracesListSource.useTracesListSource({
     initialAutoRefetch: false,
     withQueryTrace,
     legacyFilters,
@@ -50,10 +50,24 @@ function ThreadViewByTrace({
     })
   });
   const traceIds = rows.map((trace) => trace.traceId).reverse();
+  const listSettled = !isLoading && !isPlaceholderData;
+  const client = react.useMastraClient();
+  const [readyThreadId, setReadyThreadId] = React.useState(null);
+  const isReady = readyThreadId === threadId;
+  const firstPageSpansSettled = reactQuery.useQueries({
+    queries: (isReady || !listSettled ? [] : traceIds).map((traceId) => ({
+      ...domains_traces_hooks_useTraceSpans.traceSpansQueryOptions(client, traceId),
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false
+    })),
+    combine: (results) => results.every((result) => !result.isPending)
+  });
+  if (!isReady && listSettled && firstPageSpansSettled) setReadyThreadId(threadId);
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_tracesErrorContent.TracesErrorContent, { error, resource: "traces", errorTitle: "Failed to load traces" }) });
   }
-  if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadViewSkeleton.ThreadViewSkeleton, {});
+  if (!isReady) return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadViewSkeleton.ThreadViewSkeleton, { withFeedback });
   if (traceIds.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "body", tone: "muted", children: "No traces found for this thread." }) });
   }
@@ -66,7 +80,7 @@ function ThreadViewByTrace({
         if (hasNextPage && !isFetchingNextPage) fetchNextPage();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.List, { "data-testid": "thread-view-by-trace", children: traceIds.map((traceId) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Row, { traceId, children: /* @__PURE__ */ jsxRuntime.jsx(ThreadTraceRowContent, { withFeedback, onOpenScore }) }, traceId)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.List, { "data-testid": "thread-view-by-trace", children: traceIds.map((traceId, index) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Row, { traceId, children: /* @__PURE__ */ jsxRuntime.jsx(ThreadTraceRowContent, { turn: index + 1, withFeedback, onOpenScore }) }, traceId)) }),
         /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.SpanPanel, {})
       ]
     },
@@ -74,6 +88,7 @@ function ThreadViewByTrace({
   );
 }
 function ThreadTraceRowContent({
+  turn,
   withFeedback,
   onOpenScore
 }) {
@@ -83,8 +98,12 @@ function ThreadTraceRowContent({
   const { data: traceData } = domains_traces_hooks_useTraceSpans.useTraceSpans(traceId, { passive: true });
   const rootSpanId = traceData?.spans.find((span) => span.parentSpanId == null)?.spanId;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Messages, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.MessagesHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.TabList, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Divider, { label: `Turn ${turn}`, children: [
+      traceHref && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { render: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: traceHref }), variant: "ghost", size: "sm", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, {}), children: "Go to trace" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "h-4 w-px bg-border" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.TabList, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Tab, { value: "messages", children: [
           /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareTextIcon, {}) }),
           "Messages"
@@ -97,22 +116,23 @@ function ThreadTraceRowContent({
           /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(icons_ScorersIcon.ScorersIcon, {}) }),
           "Scores"
         ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "messages", flush: true, children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceThreadItemView.TraceThreadItemView, { traceId, onHighlightSpans: highlightSpans }) }),
-      withFeedback && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "feedback", className: "min-h-0 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceFeedbackTab.TraceFeedbackTab, { traceId, variant: "thread" }, traceId) }),
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "scores", className: "min-h-0 py-3", children: rootSpanId ? /* @__PURE__ */ jsxRuntime.jsx(
-        domains_scores_components_traceScoresTab.TraceScoresTab,
-        {
-          traceId,
-          spanId: rootSpanId,
-          onScoreSelect: (scoreId) => onOpenScore(traceId, scoreId)
-        },
-        traceId
-      ) : null })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Details, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.DetailsHeader, { children: traceHref && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.DetailsActions, { children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { render: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: traceHref }), variant: "ghost", size: "sm", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, {}), children: "Go to trace" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Spans, {})
+    /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.RowBody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Messages, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "messages", flush: true, children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceThreadItemView.TraceThreadItemView, { traceId, onHighlightSpans: highlightSpans }) }),
+        withFeedback && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "feedback", className: "min-h-0 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceFeedbackTab.TraceFeedbackTab, { traceId, variant: "thread" }, traceId) }),
+        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.TabContent, { value: "scores", className: "min-h-0 py-3", children: rootSpanId ? /* @__PURE__ */ jsxRuntime.jsx(
+          domains_scores_components_traceScoresTab.TraceScoresTab,
+          {
+            traceId,
+            spanId: rootSpanId,
+            onScoreSelect: (scoreId) => onOpenScore(traceId, scoreId)
+          },
+          traceId
+        ) : null })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Details, { children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Spans, {}) })
     ] })
   ] });
 }

package/dist/domains/traces/components/thread-view-by-trace.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-view-by-trace.cjs.js","sources":["../../../../src/domains/traces/components/thread-view-by-trace.tsx"],"sourcesContent":["import { ExternalLinkIcon, MessageSquareReplyIcon, MessageSquareTextIcon } from 'lucide-react';\nimport { useMemo } from 'react';\nimport { TraceScoresTab } from '@/domains/scores';\nimport { ThreadTrace, useThreadTraceRow } from '@/domains/traces/components/thread-trace';\nimport type { ThreadTraceSelectedSpan } from '@/domains/traces/components/thread-trace';\n\nimport { ThreadViewSkeleton } from '@/domains/traces/components/thread-view-skeleton';\nimport { TraceFeedbackTab } from '@/domains/traces/components/trace-feedback-tab';\nimport { TraceThreadItemView } from '@/domains/traces/components/trace-thread-item-view';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } from '@/domains/traces/hooks/use-traces-list-source';\nimport type { UseTracesListSourceArgs } from '@/domains/traces/hooks/use-traces-list-source';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { useLinkComponent } from '@/lib/framework';\n\n// `queryTraces` requires a time range and rejects ranges over 31 days; the legacy endpoint is left unbounded.\nconst THREAD_WINDOW_MS = 31 * 24 * 60 * 60 * 1000;\n\nexport interface ThreadViewByTraceProps {\n  threadId: string;\n  /** Lists the thread through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Shows the per-trace Feedback tab and fetches its feedback. */\n  withFeedback: boolean;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  /** Turns loaded per page: the latest ones on open, then older ones as the reader scrolls up. */\n  pageSize?: number;\n}\n\n/**\n * A memory thread rendered as its traces, like a chat: one row per agent turn (oldest at the top),\n * opened on the latest turns, with older turns loaded as the reader scrolls up. Each row shows the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens its\n * detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  onOpenScore,\n  pageSize = 10,\n}: ThreadViewByTraceProps) {\n  const legacyFilters = useMemo<UseTracesListSourceArgs['legacyFilters']>(() => ({ threadId }), [threadId]);\n  const { rows, isLoading, error, hasNextPage, isFetchingNextPage, fetchNextPage } = useTracesListSource({\n    initialAutoRefetch: false,\n    withQueryTrace,\n    legacyFilters,\n    limit: pageSize,\n    query: now => ({\n      timeRange: {\n        from: new Date(now.getTime() - THREAD_WINDOW_MS).toISOString(),\n        to: now.toISOString(),\n      },\n      where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n      orderBy: [{ field: 'startedAt', direction: 'desc' }],\n    }),\n  });\n  // Pages come newest first; the conversation reads oldest first.\n  const traceIds = rows.map(trace => trace.traceId).reverse();\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"traces\" errorTitle=\"Failed to load traces\" />\n      </div>\n    );\n  }\n\n  if (isLoading) return <ThreadViewSkeleton />;\n\n  if (traceIds.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No traces found for this thread.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <ThreadTrace\n      key={threadId}\n      traceIds={traceIds}\n      onSelectedSpanChange={onSelectedSpanChange}\n      onLoadOlder={() => {\n        if (hasNextPage && !isFetchingNextPage) fetchNextPage();\n      }}\n    >\n      <ThreadTrace.List data-testid=\"thread-view-by-trace\">\n        {traceIds.map(traceId => (\n          <ThreadTrace.Row key={traceId} traceId={traceId}>\n            <ThreadTraceRowContent withFeedback={withFeedback} onOpenScore={onOpenScore} />\n          </ThreadTrace.Row>\n        ))}\n      </ThreadTrace.List>\n      <ThreadTrace.SpanPanel />\n    </ThreadTrace>\n  );\n}\n\nfunction ThreadTraceRowContent({\n  withFeedback,\n  onOpenScore,\n}: {\n  withFeedback: boolean;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}) {\n  const { traceId, highlightSpans } = useThreadTraceRow();\n  const { Link, paths } = useLinkComponent();\n  const traceHref = paths.traceLink(traceId);\n  // Same query the span tree observes (passive: the tree drives refetches).\n  const { data: traceData } = useTraceSpans(traceId, { passive: true });\n  const rootSpanId = traceData?.spans.find(span => span.parentSpanId == null)?.spanId;\n\n  return (\n    <>\n      <ThreadTrace.Messages>\n        <ThreadTrace.MessagesHeader>\n          <ThreadTrace.TabList>\n            <ThreadTrace.Tab value=\"messages\">\n              <Icon size=\"xs\">\n                <MessageSquareTextIcon />\n              </Icon>\n              Messages\n            </ThreadTrace.Tab>\n            {withFeedback && (\n              <ThreadTrace.Tab value=\"feedback\">\n                <Icon size=\"xs\">\n                  <MessageSquareReplyIcon />\n                </Icon>\n                Feedback\n              </ThreadTrace.Tab>\n            )}\n            <ThreadTrace.Tab value=\"scores\">\n              <Icon size=\"xs\">\n                <ScorersIcon />\n              </Icon>\n              Scores\n            </ThreadTrace.Tab>\n          </ThreadTrace.TabList>\n        </ThreadTrace.MessagesHeader>\n        <ThreadTrace.TabContent value=\"messages\" flush>\n          <TraceThreadItemView traceId={traceId} onHighlightSpans={highlightSpans} />\n        </ThreadTrace.TabContent>\n        {withFeedback && (\n          <ThreadTrace.TabContent value=\"feedback\" className=\"min-h-0 py-3\">\n            <TraceFeedbackTab key={traceId} traceId={traceId} variant=\"thread\" />\n          </ThreadTrace.TabContent>\n        )}\n        <ThreadTrace.TabContent value=\"scores\" className=\"min-h-0 py-3\">\n          {rootSpanId ? (\n            <TraceScoresTab\n              key={traceId}\n              traceId={traceId}\n              spanId={rootSpanId}\n              onScoreSelect={scoreId => onOpenScore(traceId, scoreId)}\n            />\n          ) : null}\n        </ThreadTrace.TabContent>\n      </ThreadTrace.Messages>\n      <ThreadTrace.Details>\n        <ThreadTrace.DetailsHeader>\n          {traceHref && (\n            <ThreadTrace.DetailsActions>\n              <Button render={<Link href={traceHref} />} variant=\"ghost\" size=\"sm\" icon={<ExternalLinkIcon />}>\n                Go to trace\n              </Button>\n            </ThreadTrace.DetailsActions>\n          )}\n        </ThreadTrace.DetailsHeader>\n        <ThreadTrace.Spans />\n      </ThreadTrace.Details>\n    </>\n  );\n}\n"],"names":["useMemo","useTracesListSource","jsx","TracesErrorContent","ThreadViewSkeleton","Txt","jsxs","ThreadTrace","useThreadTraceRow","useLinkComponent","useTraceSpans","Fragment","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","TraceThreadItemView","TraceFeedbackTab","TraceScoresTab","Button","ExternalLinkIcon"],"mappings":"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"}
+{"version":3,"file":"thread-view-by-trace.cjs.js","sources":["../../../../src/domains/traces/components/thread-view-by-trace.tsx"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQueries } from '@tanstack/react-query';\nimport { ExternalLinkIcon, MessageSquareReplyIcon, MessageSquareTextIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport { TraceScoresTab } from '@/domains/scores';\nimport { ThreadTrace, useThreadTraceRow } from '@/domains/traces/components/thread-trace';\nimport type { ThreadTraceSelectedSpan } from '@/domains/traces/components/thread-trace';\n\nimport { ThreadViewSkeleton } from '@/domains/traces/components/thread-view-skeleton';\nimport { TraceFeedbackTab } from '@/domains/traces/components/trace-feedback-tab';\nimport { TraceThreadItemView } from '@/domains/traces/components/trace-thread-item-view';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { traceSpansQueryOptions, useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } from '@/domains/traces/hooks/use-traces-list-source';\nimport type { UseTracesListSourceArgs } from '@/domains/traces/hooks/use-traces-list-source';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { useLinkComponent } from '@/lib/framework';\n\n// `queryTraces` requires a time range and rejects ranges over 31 days; the legacy endpoint is left unbounded.\nconst THREAD_WINDOW_MS = 31 * 24 * 60 * 60 * 1000;\n\nexport interface ThreadViewByTraceProps {\n  threadId: string;\n  /** Lists the thread through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Shows the per-trace Feedback tab and fetches its feedback. */\n  withFeedback: boolean;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  /** Turns loaded per page: the latest ones on open, then older ones as the reader scrolls up. */\n  pageSize?: number;\n}\n\n/**\n * A memory thread rendered as its traces, like a chat: one row per agent turn (oldest at the top),\n * opened on the latest turns, with older turns loaded as the reader scrolls up. Each row shows the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens its\n * detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  onOpenScore,\n  pageSize = 10,\n}: ThreadViewByTraceProps) {\n  const legacyFilters = useMemo<UseTracesListSourceArgs['legacyFilters']>(() => ({ threadId }), [threadId]);\n  const { rows, isLoading, isPlaceholderData, error, hasNextPage, isFetchingNextPage, fetchNextPage } =\n    useTracesListSource({\n      initialAutoRefetch: false,\n      withQueryTrace,\n      legacyFilters,\n      limit: pageSize,\n      query: now => ({\n        timeRange: {\n          from: new Date(now.getTime() - THREAD_WINDOW_MS).toISOString(),\n          to: now.toISOString(),\n        },\n        where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n        orderBy: [{ field: 'startedAt', direction: 'desc' }],\n      }),\n    });\n  // Pages come newest first; the conversation reads oldest first.\n  const traceIds = rows.map(trace => trace.traceId).reverse();\n  const listSettled = !isLoading && !isPlaceholderData;\n\n  // The first page is shown only once its turns' spans have settled too, so the rows mount complete\n  // instead of each one loading on its own. Older pages keep their per-row loading.\n  const client = useMastraClient();\n  const [readyThreadId, setReadyThreadId] = useState<string | null>(null);\n  const isReady = readyThreadId === threadId;\n  const firstPageSpansSettled = useQueries({\n    queries: (isReady || !listSettled ? [] : traceIds).map(traceId => ({\n      ...traceSpansQueryOptions(client, traceId),\n      refetchOnMount: false,\n      refetchOnWindowFocus: false,\n      refetchOnReconnect: false,\n    })),\n    combine: results => results.every(result => !result.isPending),\n  });\n  if (!isReady && listSettled && firstPageSpansSettled) setReadyThreadId(threadId);\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"traces\" errorTitle=\"Failed to load traces\" />\n      </div>\n    );\n  }\n\n  if (!isReady) return <ThreadViewSkeleton withFeedback={withFeedback} />;\n\n  if (traceIds.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No traces found for this thread.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <ThreadTrace\n      key={threadId}\n      traceIds={traceIds}\n      onSelectedSpanChange={onSelectedSpanChange}\n      onLoadOlder={() => {\n        if (hasNextPage && !isFetchingNextPage) fetchNextPage();\n      }}\n    >\n      <ThreadTrace.List data-testid=\"thread-view-by-trace\">\n        {traceIds.map((traceId, index) => (\n          <ThreadTrace.Row key={traceId} traceId={traceId}>\n            <ThreadTraceRowContent turn={index + 1} withFeedback={withFeedback} onOpenScore={onOpenScore} />\n          </ThreadTrace.Row>\n        ))}\n      </ThreadTrace.List>\n      <ThreadTrace.SpanPanel />\n    </ThreadTrace>\n  );\n}\n\nfunction ThreadTraceRowContent({\n  turn,\n  withFeedback,\n  onOpenScore,\n}: {\n  /** 1-based position among the loaded turns. */\n  turn: number;\n  withFeedback: boolean;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}) {\n  const { traceId, highlightSpans } = useThreadTraceRow();\n  const { Link, paths } = useLinkComponent();\n  const traceHref = paths.traceLink(traceId);\n  // Same query the span tree observes (passive: the tree drives refetches).\n  const { data: traceData } = useTraceSpans(traceId, { passive: true });\n  const rootSpanId = traceData?.spans.find(span => span.parentSpanId == null)?.spanId;\n\n  return (\n    <>\n      <ThreadTrace.Divider label={`Turn ${turn}`}>\n        {traceHref && (\n          <>\n            <Button render={<Link href={traceHref} />} variant=\"ghost\" size=\"sm\" icon={<ExternalLinkIcon />}>\n              Go to trace\n            </Button>\n            <span aria-hidden className=\"h-4 w-px bg-border\" />\n          </>\n        )}\n        <ThreadTrace.TabList>\n          <ThreadTrace.Tab value=\"messages\">\n            <Icon size=\"xs\">\n              <MessageSquareTextIcon />\n            </Icon>\n            Messages\n          </ThreadTrace.Tab>\n          {withFeedback && (\n            <ThreadTrace.Tab value=\"feedback\">\n              <Icon size=\"xs\">\n                <MessageSquareReplyIcon />\n              </Icon>\n              Feedback\n            </ThreadTrace.Tab>\n          )}\n          <ThreadTrace.Tab value=\"scores\">\n            <Icon size=\"xs\">\n              <ScorersIcon />\n            </Icon>\n            Scores\n          </ThreadTrace.Tab>\n        </ThreadTrace.TabList>\n      </ThreadTrace.Divider>\n      <ThreadTrace.RowBody>\n        <ThreadTrace.Messages>\n          <ThreadTrace.TabContent value=\"messages\" flush>\n            <TraceThreadItemView traceId={traceId} onHighlightSpans={highlightSpans} />\n          </ThreadTrace.TabContent>\n          {withFeedback && (\n            <ThreadTrace.TabContent value=\"feedback\" className=\"min-h-0 py-3\">\n              <TraceFeedbackTab key={traceId} traceId={traceId} variant=\"thread\" />\n            </ThreadTrace.TabContent>\n          )}\n          <ThreadTrace.TabContent value=\"scores\" className=\"min-h-0 py-3\">\n            {rootSpanId ? (\n              <TraceScoresTab\n                key={traceId}\n                traceId={traceId}\n                spanId={rootSpanId}\n                onScoreSelect={scoreId => onOpenScore(traceId, scoreId)}\n              />\n            ) : null}\n          </ThreadTrace.TabContent>\n        </ThreadTrace.Messages>\n        <ThreadTrace.Details>\n          <ThreadTrace.Spans />\n        </ThreadTrace.Details>\n      </ThreadTrace.RowBody>\n    </>\n  );\n}\n"],"names":["useMemo","useTracesListSource","useMastraClient","useState","useQueries","traceSpansQueryOptions","jsx","TracesErrorContent","ThreadViewSkeleton","Txt","jsxs","ThreadTrace","useThreadTraceRow","useLinkComponent","useTraceSpans","Fragment","Button","ExternalLinkIcon","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","TraceThreadItemView","TraceFeedbackTab","TraceScoresTab"],"mappings":"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"}

package/dist/domains/traces/components/thread-view-by-trace.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { MessageSquareTextIcon, MessageSquareReplyIcon, ExternalLinkIcon } from 'lucide-react';
-import { useMemo } from 'react';
-import '@mastra/react';
-import '@tanstack/react-query';
+import { useMastraClient } from '@mastra/react';
+import { useQueries } from '@tanstack/react-query';
+import { ExternalLinkIcon, MessageSquareTextIcon, MessageSquareReplyIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import '@base-ui/react/combobox';
 import { TraceScoresTab } from '../../scores/components/trace-scores-tab.es.js';
 import '@mastra/core/utils/safe-stringify';
@@ -14,9 +14,9 @@ import { ThreadViewSkeleton } from './thread-view-skeleton.es.js';
 import { TraceFeedbackTab } from './trace-feedback-tab.es.js';
 import { TraceThreadItemView } from './trace-thread-item-view.es.js';
 import { TracesErrorContent } from './traces-error-content.es.js';
-import { useTraceSpans } from '../hooks/use-trace-spans.es.js';
+import { traceSpansQueryOptions, useTraceSpans } from '../hooks/use-trace-spans.es.js';
 import { useTracesListSource } from '../hooks/use-traces-list-source.es.js';
-import { T as Txt } from '../../../Txt-BP1SRHmL.js';
+import { T as Txt } from '../../../Txt-C3cYJgKU.js';
 import { Icon } from '../../../icons/Icon.es.js';
 import { ScorersIcon } from '../../../icons/ScorersIcon.es.js';
 import { useThreadTraceRow } from './thread-trace/thread-trace-row-context.es.js';
@@ -31,7 +31,7 @@ function ThreadViewByTrace({
   pageSize = 10
 }) {
   const legacyFilters = useMemo(() => ({ threadId }), [threadId]);
-  const { rows, isLoading, error, hasNextPage, isFetchingNextPage, fetchNextPage } = useTracesListSource({
+  const { rows, isLoading, isPlaceholderData, error, hasNextPage, isFetchingNextPage, fetchNextPage } = useTracesListSource({
     initialAutoRefetch: false,
     withQueryTrace,
     legacyFilters,
@@ -46,10 +46,24 @@ function ThreadViewByTrace({
     })
   });
   const traceIds = rows.map((trace) => trace.traceId).reverse();
+  const listSettled = !isLoading && !isPlaceholderData;
+  const client = useMastraClient();
+  const [readyThreadId, setReadyThreadId] = useState(null);
+  const isReady = readyThreadId === threadId;
+  const firstPageSpansSettled = useQueries({
+    queries: (isReady || !listSettled ? [] : traceIds).map((traceId) => ({
+      ...traceSpansQueryOptions(client, traceId),
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false
+    })),
+    combine: (results) => results.every((result) => !result.isPending)
+  });
+  if (!isReady && listSettled && firstPageSpansSettled) setReadyThreadId(threadId);
   if (error) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx(TracesErrorContent, { error, resource: "traces", errorTitle: "Failed to load traces" }) });
   }
-  if (isLoading) return /* @__PURE__ */ jsx(ThreadViewSkeleton, {});
+  if (!isReady) return /* @__PURE__ */ jsx(ThreadViewSkeleton, { withFeedback });
   if (traceIds.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx(Txt, { variant: "body", tone: "muted", children: "No traces found for this thread." }) });
   }
@@ -62,7 +76,7 @@ function ThreadViewByTrace({
         if (hasNextPage && !isFetchingNextPage) fetchNextPage();
       },
       children: [
-        /* @__PURE__ */ jsx(ThreadTrace.List, { "data-testid": "thread-view-by-trace", children: traceIds.map((traceId) => /* @__PURE__ */ jsx(ThreadTrace.Row, { traceId, children: /* @__PURE__ */ jsx(ThreadTraceRowContent, { withFeedback, onOpenScore }) }, traceId)) }),
+        /* @__PURE__ */ jsx(ThreadTrace.List, { "data-testid": "thread-view-by-trace", children: traceIds.map((traceId, index) => /* @__PURE__ */ jsx(ThreadTrace.Row, { traceId, children: /* @__PURE__ */ jsx(ThreadTraceRowContent, { turn: index + 1, withFeedback, onOpenScore }) }, traceId)) }),
         /* @__PURE__ */ jsx(ThreadTrace.SpanPanel, {})
       ]
     },
@@ -70,6 +84,7 @@ function ThreadViewByTrace({
   );
 }
 function ThreadTraceRowContent({
+  turn,
   withFeedback,
   onOpenScore
 }) {
@@ -79,8 +94,12 @@ function ThreadTraceRowContent({
   const { data: traceData } = useTraceSpans(traceId, { passive: true });
   const rootSpanId = traceData?.spans.find((span) => span.parentSpanId == null)?.spanId;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(ThreadTrace.Messages, { children: [
-      /* @__PURE__ */ jsx(ThreadTrace.MessagesHeader, { children: /* @__PURE__ */ jsxs(ThreadTrace.TabList, { children: [
+    /* @__PURE__ */ jsxs(ThreadTrace.Divider, { label: `Turn ${turn}`, children: [
+      traceHref && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { render: /* @__PURE__ */ jsx(Link, { href: traceHref }), variant: "ghost", size: "sm", icon: /* @__PURE__ */ jsx(ExternalLinkIcon, {}), children: "Go to trace" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-4 w-px bg-border" })
+      ] }),
+      /* @__PURE__ */ jsxs(ThreadTrace.TabList, { children: [
         /* @__PURE__ */ jsxs(ThreadTrace.Tab, { value: "messages", children: [
           /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(MessageSquareTextIcon, {}) }),
           "Messages"
@@ -93,22 +112,23 @@ function ThreadTraceRowContent({
           /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(ScorersIcon, {}) }),
           "Scores"
         ] })
-      ] }) }),
-      /* @__PURE__ */ jsx(ThreadTrace.TabContent, { value: "messages", flush: true, children: /* @__PURE__ */ jsx(TraceThreadItemView, { traceId, onHighlightSpans: highlightSpans }) }),
-      withFeedback && /* @__PURE__ */ jsx(ThreadTrace.TabContent, { value: "feedback", className: "min-h-0 py-3", children: /* @__PURE__ */ jsx(TraceFeedbackTab, { traceId, variant: "thread" }, traceId) }),
-      /* @__PURE__ */ jsx(ThreadTrace.TabContent, { value: "scores", className: "min-h-0 py-3", children: rootSpanId ? /* @__PURE__ */ jsx(
-        TraceScoresTab,
-        {
-          traceId,
-          spanId: rootSpanId,
-          onScoreSelect: (scoreId) => onOpenScore(traceId, scoreId)
-        },
-        traceId
-      ) : null })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs(ThreadTrace.Details, { children: [
-      /* @__PURE__ */ jsx(ThreadTrace.DetailsHeader, { children: traceHref && /* @__PURE__ */ jsx(ThreadTrace.DetailsActions, { children: /* @__PURE__ */ jsx(Button, { render: /* @__PURE__ */ jsx(Link, { href: traceHref }), variant: "ghost", size: "sm", icon: /* @__PURE__ */ jsx(ExternalLinkIcon, {}), children: "Go to trace" }) }) }),
-      /* @__PURE__ */ jsx(ThreadTrace.Spans, {})
+    /* @__PURE__ */ jsxs(ThreadTrace.RowBody, { children: [
+      /* @__PURE__ */ jsxs(ThreadTrace.Messages, { children: [
+        /* @__PURE__ */ jsx(ThreadTrace.TabContent, { value: "messages", flush: true, children: /* @__PURE__ */ jsx(TraceThreadItemView, { traceId, onHighlightSpans: highlightSpans }) }),
+        withFeedback && /* @__PURE__ */ jsx(ThreadTrace.TabContent, { value: "feedback", className: "min-h-0 py-3", children: /* @__PURE__ */ jsx(TraceFeedbackTab, { traceId, variant: "thread" }, traceId) }),
+        /* @__PURE__ */ jsx(ThreadTrace.TabContent, { value: "scores", className: "min-h-0 py-3", children: rootSpanId ? /* @__PURE__ */ jsx(
+          TraceScoresTab,
+          {
+            traceId,
+            spanId: rootSpanId,
+            onScoreSelect: (scoreId) => onOpenScore(traceId, scoreId)
+          },
+          traceId
+        ) : null })
+      ] }),
+      /* @__PURE__ */ jsx(ThreadTrace.Details, { children: /* @__PURE__ */ jsx(ThreadTrace.Spans, {}) })
     ] })
   ] });
 }

package/dist/domains/traces/components/thread-view-by-trace.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-view-by-trace.es.js","sources":["../../../../src/domains/traces/components/thread-view-by-trace.tsx"],"sourcesContent":["import { ExternalLinkIcon, MessageSquareReplyIcon, MessageSquareTextIcon } from 'lucide-react';\nimport { useMemo } from 'react';\nimport { TraceScoresTab } from '@/domains/scores';\nimport { ThreadTrace, useThreadTraceRow } from '@/domains/traces/components/thread-trace';\nimport type { ThreadTraceSelectedSpan } from '@/domains/traces/components/thread-trace';\n\nimport { ThreadViewSkeleton } from '@/domains/traces/components/thread-view-skeleton';\nimport { TraceFeedbackTab } from '@/domains/traces/components/trace-feedback-tab';\nimport { TraceThreadItemView } from '@/domains/traces/components/trace-thread-item-view';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } from '@/domains/traces/hooks/use-traces-list-source';\nimport type { UseTracesListSourceArgs } from '@/domains/traces/hooks/use-traces-list-source';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { useLinkComponent } from '@/lib/framework';\n\n// `queryTraces` requires a time range and rejects ranges over 31 days; the legacy endpoint is left unbounded.\nconst THREAD_WINDOW_MS = 31 * 24 * 60 * 60 * 1000;\n\nexport interface ThreadViewByTraceProps {\n  threadId: string;\n  /** Lists the thread through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Shows the per-trace Feedback tab and fetches its feedback. */\n  withFeedback: boolean;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  /** Turns loaded per page: the latest ones on open, then older ones as the reader scrolls up. */\n  pageSize?: number;\n}\n\n/**\n * A memory thread rendered as its traces, like a chat: one row per agent turn (oldest at the top),\n * opened on the latest turns, with older turns loaded as the reader scrolls up. Each row shows the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens its\n * detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  onOpenScore,\n  pageSize = 10,\n}: ThreadViewByTraceProps) {\n  const legacyFilters = useMemo<UseTracesListSourceArgs['legacyFilters']>(() => ({ threadId }), [threadId]);\n  const { rows, isLoading, error, hasNextPage, isFetchingNextPage, fetchNextPage } = useTracesListSource({\n    initialAutoRefetch: false,\n    withQueryTrace,\n    legacyFilters,\n    limit: pageSize,\n    query: now => ({\n      timeRange: {\n        from: new Date(now.getTime() - THREAD_WINDOW_MS).toISOString(),\n        to: now.toISOString(),\n      },\n      where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n      orderBy: [{ field: 'startedAt', direction: 'desc' }],\n    }),\n  });\n  // Pages come newest first; the conversation reads oldest first.\n  const traceIds = rows.map(trace => trace.traceId).reverse();\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"traces\" errorTitle=\"Failed to load traces\" />\n      </div>\n    );\n  }\n\n  if (isLoading) return <ThreadViewSkeleton />;\n\n  if (traceIds.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No traces found for this thread.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <ThreadTrace\n      key={threadId}\n      traceIds={traceIds}\n      onSelectedSpanChange={onSelectedSpanChange}\n      onLoadOlder={() => {\n        if (hasNextPage && !isFetchingNextPage) fetchNextPage();\n      }}\n    >\n      <ThreadTrace.List data-testid=\"thread-view-by-trace\">\n        {traceIds.map(traceId => (\n          <ThreadTrace.Row key={traceId} traceId={traceId}>\n            <ThreadTraceRowContent withFeedback={withFeedback} onOpenScore={onOpenScore} />\n          </ThreadTrace.Row>\n        ))}\n      </ThreadTrace.List>\n      <ThreadTrace.SpanPanel />\n    </ThreadTrace>\n  );\n}\n\nfunction ThreadTraceRowContent({\n  withFeedback,\n  onOpenScore,\n}: {\n  withFeedback: boolean;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}) {\n  const { traceId, highlightSpans } = useThreadTraceRow();\n  const { Link, paths } = useLinkComponent();\n  const traceHref = paths.traceLink(traceId);\n  // Same query the span tree observes (passive: the tree drives refetches).\n  const { data: traceData } = useTraceSpans(traceId, { passive: true });\n  const rootSpanId = traceData?.spans.find(span => span.parentSpanId == null)?.spanId;\n\n  return (\n    <>\n      <ThreadTrace.Messages>\n        <ThreadTrace.MessagesHeader>\n          <ThreadTrace.TabList>\n            <ThreadTrace.Tab value=\"messages\">\n              <Icon size=\"xs\">\n                <MessageSquareTextIcon />\n              </Icon>\n              Messages\n            </ThreadTrace.Tab>\n            {withFeedback && (\n              <ThreadTrace.Tab value=\"feedback\">\n                <Icon size=\"xs\">\n                  <MessageSquareReplyIcon />\n                </Icon>\n                Feedback\n              </ThreadTrace.Tab>\n            )}\n            <ThreadTrace.Tab value=\"scores\">\n              <Icon size=\"xs\">\n                <ScorersIcon />\n              </Icon>\n              Scores\n            </ThreadTrace.Tab>\n          </ThreadTrace.TabList>\n        </ThreadTrace.MessagesHeader>\n        <ThreadTrace.TabContent value=\"messages\" flush>\n          <TraceThreadItemView traceId={traceId} onHighlightSpans={highlightSpans} />\n        </ThreadTrace.TabContent>\n        {withFeedback && (\n          <ThreadTrace.TabContent value=\"feedback\" className=\"min-h-0 py-3\">\n            <TraceFeedbackTab key={traceId} traceId={traceId} variant=\"thread\" />\n          </ThreadTrace.TabContent>\n        )}\n        <ThreadTrace.TabContent value=\"scores\" className=\"min-h-0 py-3\">\n          {rootSpanId ? (\n            <TraceScoresTab\n              key={traceId}\n              traceId={traceId}\n              spanId={rootSpanId}\n              onScoreSelect={scoreId => onOpenScore(traceId, scoreId)}\n            />\n          ) : null}\n        </ThreadTrace.TabContent>\n      </ThreadTrace.Messages>\n      <ThreadTrace.Details>\n        <ThreadTrace.DetailsHeader>\n          {traceHref && (\n            <ThreadTrace.DetailsActions>\n              <Button render={<Link href={traceHref} />} variant=\"ghost\" size=\"sm\" icon={<ExternalLinkIcon />}>\n                Go to trace\n              </Button>\n            </ThreadTrace.DetailsActions>\n          )}\n        </ThreadTrace.DetailsHeader>\n        <ThreadTrace.Spans />\n      </ThreadTrace.Details>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-view-by-trace.es.js","sources":["../../../../src/domains/traces/components/thread-view-by-trace.tsx"],"sourcesContent":["import { useMastraClient } from '@mastra/react';\nimport { useQueries } from '@tanstack/react-query';\nimport { ExternalLinkIcon, MessageSquareReplyIcon, MessageSquareTextIcon } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport { TraceScoresTab } from '@/domains/scores';\nimport { ThreadTrace, useThreadTraceRow } from '@/domains/traces/components/thread-trace';\nimport type { ThreadTraceSelectedSpan } from '@/domains/traces/components/thread-trace';\n\nimport { ThreadViewSkeleton } from '@/domains/traces/components/thread-view-skeleton';\nimport { TraceFeedbackTab } from '@/domains/traces/components/trace-feedback-tab';\nimport { TraceThreadItemView } from '@/domains/traces/components/trace-thread-item-view';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { traceSpansQueryOptions, useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } from '@/domains/traces/hooks/use-traces-list-source';\nimport type { UseTracesListSourceArgs } from '@/domains/traces/hooks/use-traces-list-source';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport { useLinkComponent } from '@/lib/framework';\n\n// `queryTraces` requires a time range and rejects ranges over 31 days; the legacy endpoint is left unbounded.\nconst THREAD_WINDOW_MS = 31 * 24 * 60 * 60 * 1000;\n\nexport interface ThreadViewByTraceProps {\n  threadId: string;\n  /** Lists the thread through the trace-query API; `false` falls back to `listTracesLight`. */\n  withQueryTrace: boolean;\n  /** Shows the per-trace Feedback tab and fetches its feedback. */\n  withFeedback: boolean;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n  /** Turns loaded per page: the latest ones on open, then older ones as the reader scrolls up. */\n  pageSize?: number;\n}\n\n/**\n * A memory thread rendered as its traces, like a chat: one row per agent turn (oldest at the top),\n * opened on the latest turns, with older turns loaded as the reader scrolls up. Each row shows the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens its\n * detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  onOpenScore,\n  pageSize = 10,\n}: ThreadViewByTraceProps) {\n  const legacyFilters = useMemo<UseTracesListSourceArgs['legacyFilters']>(() => ({ threadId }), [threadId]);\n  const { rows, isLoading, isPlaceholderData, error, hasNextPage, isFetchingNextPage, fetchNextPage } =\n    useTracesListSource({\n      initialAutoRefetch: false,\n      withQueryTrace,\n      legacyFilters,\n      limit: pageSize,\n      query: now => ({\n        timeRange: {\n          from: new Date(now.getTime() - THREAD_WINDOW_MS).toISOString(),\n          to: now.toISOString(),\n        },\n        where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n        orderBy: [{ field: 'startedAt', direction: 'desc' }],\n      }),\n    });\n  // Pages come newest first; the conversation reads oldest first.\n  const traceIds = rows.map(trace => trace.traceId).reverse();\n  const listSettled = !isLoading && !isPlaceholderData;\n\n  // The first page is shown only once its turns' spans have settled too, so the rows mount complete\n  // instead of each one loading on its own. Older pages keep their per-row loading.\n  const client = useMastraClient();\n  const [readyThreadId, setReadyThreadId] = useState<string | null>(null);\n  const isReady = readyThreadId === threadId;\n  const firstPageSpansSettled = useQueries({\n    queries: (isReady || !listSettled ? [] : traceIds).map(traceId => ({\n      ...traceSpansQueryOptions(client, traceId),\n      refetchOnMount: false,\n      refetchOnWindowFocus: false,\n      refetchOnReconnect: false,\n    })),\n    combine: results => results.every(result => !result.isPending),\n  });\n  if (!isReady && listSettled && firstPageSpansSettled) setReadyThreadId(threadId);\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"traces\" errorTitle=\"Failed to load traces\" />\n      </div>\n    );\n  }\n\n  if (!isReady) return <ThreadViewSkeleton withFeedback={withFeedback} />;\n\n  if (traceIds.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No traces found for this thread.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <ThreadTrace\n      key={threadId}\n      traceIds={traceIds}\n      onSelectedSpanChange={onSelectedSpanChange}\n      onLoadOlder={() => {\n        if (hasNextPage && !isFetchingNextPage) fetchNextPage();\n      }}\n    >\n      <ThreadTrace.List data-testid=\"thread-view-by-trace\">\n        {traceIds.map((traceId, index) => (\n          <ThreadTrace.Row key={traceId} traceId={traceId}>\n            <ThreadTraceRowContent turn={index + 1} withFeedback={withFeedback} onOpenScore={onOpenScore} />\n          </ThreadTrace.Row>\n        ))}\n      </ThreadTrace.List>\n      <ThreadTrace.SpanPanel />\n    </ThreadTrace>\n  );\n}\n\nfunction ThreadTraceRowContent({\n  turn,\n  withFeedback,\n  onOpenScore,\n}: {\n  /** 1-based position among the loaded turns. */\n  turn: number;\n  withFeedback: boolean;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}) {\n  const { traceId, highlightSpans } = useThreadTraceRow();\n  const { Link, paths } = useLinkComponent();\n  const traceHref = paths.traceLink(traceId);\n  // Same query the span tree observes (passive: the tree drives refetches).\n  const { data: traceData } = useTraceSpans(traceId, { passive: true });\n  const rootSpanId = traceData?.spans.find(span => span.parentSpanId == null)?.spanId;\n\n  return (\n    <>\n      <ThreadTrace.Divider label={`Turn ${turn}`}>\n        {traceHref && (\n          <>\n            <Button render={<Link href={traceHref} />} variant=\"ghost\" size=\"sm\" icon={<ExternalLinkIcon />}>\n              Go to trace\n            </Button>\n            <span aria-hidden className=\"h-4 w-px bg-border\" />\n          </>\n        )}\n        <ThreadTrace.TabList>\n          <ThreadTrace.Tab value=\"messages\">\n            <Icon size=\"xs\">\n              <MessageSquareTextIcon />\n            </Icon>\n            Messages\n          </ThreadTrace.Tab>\n          {withFeedback && (\n            <ThreadTrace.Tab value=\"feedback\">\n              <Icon size=\"xs\">\n                <MessageSquareReplyIcon />\n              </Icon>\n              Feedback\n            </ThreadTrace.Tab>\n          )}\n          <ThreadTrace.Tab value=\"scores\">\n            <Icon size=\"xs\">\n              <ScorersIcon />\n            </Icon>\n            Scores\n          </ThreadTrace.Tab>\n        </ThreadTrace.TabList>\n      </ThreadTrace.Divider>\n      <ThreadTrace.RowBody>\n        <ThreadTrace.Messages>\n          <ThreadTrace.TabContent value=\"messages\" flush>\n            <TraceThreadItemView traceId={traceId} onHighlightSpans={highlightSpans} />\n          </ThreadTrace.TabContent>\n          {withFeedback && (\n            <ThreadTrace.TabContent value=\"feedback\" className=\"min-h-0 py-3\">\n              <TraceFeedbackTab key={traceId} traceId={traceId} variant=\"thread\" />\n            </ThreadTrace.TabContent>\n          )}\n          <ThreadTrace.TabContent value=\"scores\" className=\"min-h-0 py-3\">\n            {rootSpanId ? (\n              <TraceScoresTab\n                key={traceId}\n                traceId={traceId}\n                spanId={rootSpanId}\n                onScoreSelect={scoreId => onOpenScore(traceId, scoreId)}\n              />\n            ) : null}\n          </ThreadTrace.TabContent>\n        </ThreadTrace.Messages>\n        <ThreadTrace.Details>\n          <ThreadTrace.Spans />\n        </ThreadTrace.Details>\n      </ThreadTrace.RowBody>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/traces/components/thread-view-skeleton.cjs.js

@@ -4,29 +4,44 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_traceMessagesSkeleton = require('./trace-messages-skeleton.cjs.js');
+const domains_traces_components_traceSpanTreeSkeleton = require('./trace-span-tree-skeleton.cjs.js');
+const Card = require('../../../Card-BQsKHkyB.cjs');
 const skeleton = require('../../../skeleton-cXUjPrq9.cjs');
+const primitives_controlSize = require('../../../primitives/control-size.cjs.js');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 const ROWS = [0, 1, 2];
-function ThreadViewSkeleton() {
+function ThreadViewSkeleton({ withFeedback = false }) {
+  const tabWidths = withFeedback ? ["w-24", "w-22", "w-18"] : ["w-24", "w-18"];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       role: "status",
       "aria-label": "Loading thread",
       className: "min-h-0 animate-in overflow-hidden delay-500 duration-200 fade-in-0 fill-mode-backwards",
-      children: ROWS.map((idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceMessagesSkeleton.TraceMessagesSkeleton, { className: "border-r border-border px-4" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 overflow-hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-header-default items-center gap-2 border-b border-border px-2 py-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-16 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-20 rounded-full" }),
-            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-16 rounded-full" })
+      children: ROWS.map((idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col pb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "thread-trace-divider-skeleton", className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-3 py-3 pl-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: utils_cn.cn("w-26 rounded-md", primitives_controlSize.controlSizeClasses.sm) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-px bg-border" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: tabWidths.map((width) => /* @__PURE__ */ jsxRuntime.jsx(
+                skeleton.Skeleton,
+                {
+                  "data-slot": "thread-tab-skeleton",
+                  className: utils_cn.cn("rounded-full", primitives_controlSize.controlSizeClasses.sm, width)
+                },
+                width
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-px p-2", children: [0, 1, 2, 1, 0].map((depth, row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-8 items-center gap-2", style: { paddingLeft: `${depth}rem` }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-4 shrink-0 rounded" }),
-            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 flex-1 rounded", style: { maxWidth: `${60 - depth * 12}%` } }),
-            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "ml-auto h-3 w-10 rounded" })
-          ] }, row)) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center pr-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-messages-skeleton", className: "min-w-0 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceMessagesSkeleton.TraceMessagesSkeleton, { delayed: false }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Card.Card, { elevation: "raised", className: "mx-4 h-0 min-h-full min-w-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pt-2 pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceSpanTreeSkeleton.TraceSpanTreeSkeleton, {}) }) })
         ] })
       ] }, idx))
     }

package/dist/domains/traces/components/thread-view-skeleton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-view-skeleton.cjs.js","sources":["../../../../src/domains/traces/components/thread-view-skeleton.tsx"],"sourcesContent":["import { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { Skeleton } from '@/ds/components/Skeleton';\n\nconst ROWS = [0, 1, 2];\n\n/**\n * Same geometry as the resolved `ThreadTrace` rows — the rail gutter on the left, a `24rem`\n * messages column closed by a right border, then the details column with its header, each row\n * underlined — so the panel does not reflow once the thread's traces arrive.\n */\nexport function ThreadViewSkeleton() {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading thread\"\n      className=\"min-h-0 animate-in overflow-hidden delay-500 duration-200 fade-in-0 fill-mode-backwards\"\n    >\n      {ROWS.map(idx => (\n        <div key={idx} className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border\">\n          <TraceMessagesSkeleton className=\"border-r border-border px-4\" />\n          <div className=\"min-w-0 overflow-hidden\">\n            <div className=\"flex min-h-header-default items-center gap-2 border-b border-border px-2 py-1.5\">\n              <Skeleton className=\"h-6 w-16 rounded-full\" />\n              <Skeleton className=\"h-6 w-20 rounded-full\" />\n              <Skeleton className=\"h-6 w-16 rounded-full\" />\n            </div>\n            <div className=\"flex flex-col gap-px p-2\">\n              {[0, 1, 2, 1, 0].map((depth, row) => (\n                <div key={row} className=\"flex min-h-8 items-center gap-2\" style={{ paddingLeft: `${depth}rem` }}>\n                  <Skeleton className=\"size-4 shrink-0 rounded\" />\n                  <Skeleton className=\"h-3.5 flex-1 rounded\" style={{ maxWidth: `${60 - depth * 12}%` }} />\n                  <Skeleton className=\"ml-auto h-3 w-10 rounded\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["jsx","jsxs","TraceMessagesSkeleton","Skeleton"],"mappings":";;;;;;;;AAGA,MAAM,IAAA,GAAO,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAOd,SAAS,kBAAA,GAAqB;AACnC,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAW,gBAAA;AAAA,MACX,SAAA,EAAU,yFAAA;AAAA,MAET,eAAK,GAAA,CAAI,CAAA,GAAA,qBACRC,eAAA,CAAC,KAAA,EAAA,EAAc,WAAU,qEAAA,EACvB,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAACE,qEAAA,EAAA,EAAsB,WAAU,6BAAA,EAA8B,CAAA;AAAA,wBAC/DD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iFAAA,EACb,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAACG,iBAAA,EAAA,EAAS,WAAU,uBAAA,EAAwB,CAAA;AAAA,4BAC5CH,cAAA,CAACG,iBAAA,EAAA,EAAS,SAAA,EAAU,uBAAA,EAAwB,CAAA;AAAA,4BAC5CH,cAAA,CAACG,iBAAA,EAAA,EAAS,SAAA,EAAU,uBAAA,EAAwB;AAAA,WAAA,EAC9C,CAAA;AAAA,0BACAH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAAA,EACZ,QAAA,EAAA,CAAC,GAAG,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,EAAO,GAAA,qBAC3BC,eAAA,CAAC,KAAA,EAAA,EAAc,SAAA,EAAU,iCAAA,EAAkC,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EAC7F,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAACG,iBAAA,EAAA,EAAS,WAAU,yBAAA,EAA0B,CAAA;AAAA,4BAC9CH,cAAA,CAACG,iBAAA,EAAA,EAAS,SAAA,EAAU,sBAAA,EAAuB,KAAA,EAAO,EAAE,QAAA,EAAU,CAAA,EAAG,EAAA,GAAK,KAAA,GAAQ,EAAE,CAAA,CAAA,CAAA,EAAI,EAAG,CAAA;AAAA,4BACvFH,cAAA,CAACG,iBAAA,EAAA,EAAS,SAAA,EAAU,0BAAA,EAA2B;AAAA,WAAA,EAAA,EAHvC,GAIV,CACD,CAAA,EACH;AAAA,SAAA,EACF;AAAA,OAAA,EAAA,EAjBQ,GAkBV,CACD;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"thread-view-skeleton.cjs.js","sources":["../../../../src/domains/traces/components/thread-view-skeleton.tsx"],"sourcesContent":["import { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { Card } from '@/ds/components/Card';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nconst ROWS = [0, 1, 2];\n\nexport interface ThreadViewSkeletonProps {\n  /** Mirrors the resolved rows: adds the Feedback tab between Messages and Scores. */\n  withFeedback?: boolean;\n}\n\n/**\n * Same geometry as the resolved `ThreadTrace` rows — the `ThreadTraceDivider` grid with the trace link and tabs\n * centered over the messages column, then the `px-4` messages column next to a details card that is clamped to it\n * (`h-0 min-h-full`) and holds the span tree — so the panel does not reflow once the thread's traces arrive.\n *\n * The whole skeleton waits 500ms before fading in, so fast responses swap straight to content without a flash.\n */\nexport function ThreadViewSkeleton({ withFeedback = false }: ThreadViewSkeletonProps) {\n  const tabWidths = withFeedback ? ['w-24', 'w-22', 'w-18'] : ['w-24', 'w-18'];\n\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading thread\"\n      className=\"min-h-0 animate-in overflow-hidden delay-500 duration-200 fade-in-0 fill-mode-backwards\"\n    >\n      {ROWS.map(idx => (\n        <div key={idx} className=\"flex flex-col pb-4\">\n          <div data-slot=\"thread-trace-divider-skeleton\" className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]\">\n            <div className=\"flex min-w-0 items-center gap-3 py-3 pl-4\">\n              <span className=\"h-px flex-1 bg-border\" />\n              <div className=\"flex shrink-0 items-center gap-2\">\n                <Skeleton className={cn('w-26 rounded-md', controlSizeClasses.sm)} />\n                <span className=\"h-4 w-px bg-border\" />\n                <div className=\"flex items-center gap-0.5\">\n                  {tabWidths.map(width => (\n                    <Skeleton\n                      key={width}\n                      data-slot=\"thread-tab-skeleton\"\n                      className={cn('rounded-full', controlSizeClasses.sm, width)}\n                    />\n                  ))}\n                </div>\n              </div>\n              <span className=\"h-px flex-1 bg-border\" />\n            </div>\n            <div className=\"flex items-center pr-4\">\n              <span className=\"h-px flex-1 bg-border\" />\n            </div>\n          </div>\n          <div className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]\">\n            <div data-slot=\"thread-messages-skeleton\" className=\"min-w-0 px-4\">\n              <TraceMessagesSkeleton delayed={false} />\n            </div>\n            <Card elevation=\"raised\" className=\"mx-4 h-0 min-h-full min-w-0 overflow-hidden\">\n              <div className=\"px-4 pt-2 pb-4\">\n                <TraceSpanTreeSkeleton />\n              </div>\n            </Card>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["jsx","jsxs","Skeleton","cn","controlSizeClasses","TraceMessagesSkeleton","Card","TraceSpanTreeSkeleton"],"mappings":";;;;;;;;;;;;AAOA,MAAM,IAAA,GAAO,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAcd,SAAS,kBAAA,CAAmB,EAAE,YAAA,GAAe,KAAA,EAAM,EAA4B;AACpF,EAAA,MAAM,SAAA,GAAY,eAAe,CAAC,MAAA,EAAQ,QAAQ,MAAM,CAAA,GAAI,CAAC,MAAA,EAAQ,MAAM,CAAA;AAE3E,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAW,gBAAA;AAAA,MACX,SAAA,EAAU,yFAAA;AAAA,MAET,eAAK,GAAA,CAAI,CAAA,GAAA,qBACRC,eAAA,CAAC,KAAA,EAAA,EAAc,WAAU,oBAAA,EACvB,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,+BAAA,EAAgC,SAAA,EAAU,8CAAA,EACvD,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2CAAA,EACb,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,uBAAA,EAAwB,CAAA;AAAA,4BACxCC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kCAAA,EACb,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAACE,qBAAS,SAAA,EAAWC,WAAA,CAAG,iBAAA,EAAmBC,yCAAA,CAAmB,EAAE,CAAA,EAAG,CAAA;AAAA,8BACnEJ,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oBAAA,EAAqB,CAAA;AAAA,6CACpC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,SAAA,CAAU,IAAI,CAAA,KAAA,qBACbA,cAAA;AAAA,gBAACE,iBAAA;AAAA,gBAAA;AAAA,kBAEC,WAAA,EAAU,qBAAA;AAAA,kBACV,SAAA,EAAWC,WAAA,CAAG,cAAA,EAAgBC,yCAAA,CAAmB,IAAI,KAAK;AAAA,iBAAA;AAAA,gBAFrD;AAAA,eAIR,CAAA,EACH;AAAA,aAAA,EACF,CAAA;AAAA,4BACAJ,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAwB;AAAA,WAAA,EAC1C,CAAA;AAAA,0BACAA,cAAA,CAAC,SAAI,SAAA,EAAU,wBAAA,EACb,yCAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAwB,CAAA,EAC1C;AAAA,SAAA,EACF,CAAA;AAAA,wBACAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8CAAA,EACb,QAAA,EAAA;AAAA,0BAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,aAAU,0BAAA,EAA2B,SAAA,EAAU,gBAClD,QAAA,kBAAAA,cAAA,CAACK,qEAAA,EAAA,EAAsB,OAAA,EAAS,KAAA,EAAO,CAAA,EACzC,CAAA;AAAA,0BACAL,cAAA,CAACM,SAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,SAAA,EAAU,6CAAA,EACjC,QAAA,kBAAAN,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,kBAAAA,cAAA,CAACO,qEAAA,EAAA,EAAsB,GACzB,CAAA,EACF;AAAA,SAAA,EACF;AAAA,OAAA,EAAA,EAhCQ,GAiCV,CACD;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/domains/traces/components/thread-view-skeleton.es.js

@@ -1,28 +1,43 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { TraceMessagesSkeleton } from './trace-messages-skeleton.es.js';
+import { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton.es.js';
+import { C as Card } from '../../../Card-DVy0QS4m.js';
 import { S as Skeleton } from '../../../skeleton-BsRAXyh5.js';
+import { controlSizeClasses } from '../../../primitives/control-size.es.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
 
 const ROWS = [0, 1, 2];
-function ThreadViewSkeleton() {
+function ThreadViewSkeleton({ withFeedback = false }) {
+  const tabWidths = withFeedback ? ["w-24", "w-22", "w-18"] : ["w-24", "w-18"];
   return /* @__PURE__ */ jsx(
     "div",
     {
       role: "status",
       "aria-label": "Loading thread",
       className: "min-h-0 animate-in overflow-hidden delay-500 duration-200 fade-in-0 fill-mode-backwards",
-      children: ROWS.map((idx) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border", children: [
-        /* @__PURE__ */ jsx(TraceMessagesSkeleton, { className: "border-r border-border px-4" }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-hidden", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-h-header-default items-center gap-2 border-b border-border px-2 py-1.5", children: [
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-16 rounded-full" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20 rounded-full" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-16 rounded-full" })
+      children: ROWS.map((idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col pb-4", children: [
+        /* @__PURE__ */ jsxs("div", { "data-slot": "thread-trace-divider-skeleton", className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3 py-3 pl-4", children: [
+            /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: cn("w-26 rounded-md", controlSizeClasses.sm) }),
+              /* @__PURE__ */ jsx("span", { className: "h-4 w-px bg-border" }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", children: tabWidths.map((width) => /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  "data-slot": "thread-tab-skeleton",
+                  className: cn("rounded-full", controlSizeClasses.sm, width)
+                },
+                width
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-px p-2", children: [0, 1, 2, 1, 0].map((depth, row) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-8 items-center gap-2", style: { paddingLeft: `${depth}rem` }, children: [
-            /* @__PURE__ */ jsx(Skeleton, { className: "size-4 shrink-0 rounded" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 flex-1 rounded", style: { maxWidth: `${60 - depth * 12}%` } }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-3 w-10 rounded" })
-          ] }, row)) })
+          /* @__PURE__ */ jsx("div", { className: "flex items-center pr-4", children: /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "thread-messages-skeleton", className: "min-w-0 px-4", children: /* @__PURE__ */ jsx(TraceMessagesSkeleton, { delayed: false }) }),
+          /* @__PURE__ */ jsx(Card, { elevation: "raised", className: "mx-4 h-0 min-h-full min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "px-4 pt-2 pb-4", children: /* @__PURE__ */ jsx(TraceSpanTreeSkeleton, {}) }) })
         ] })
       ] }, idx))
     }

package/dist/domains/traces/components/thread-view-skeleton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-view-skeleton.es.js","sources":["../../../../src/domains/traces/components/thread-view-skeleton.tsx"],"sourcesContent":["import { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { Skeleton } from '@/ds/components/Skeleton';\n\nconst ROWS = [0, 1, 2];\n\n/**\n * Same geometry as the resolved `ThreadTrace` rows — the rail gutter on the left, a `24rem`\n * messages column closed by a right border, then the details column with its header, each row\n * underlined — so the panel does not reflow once the thread's traces arrive.\n */\nexport function ThreadViewSkeleton() {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading thread\"\n      className=\"min-h-0 animate-in overflow-hidden delay-500 duration-200 fade-in-0 fill-mode-backwards\"\n    >\n      {ROWS.map(idx => (\n        <div key={idx} className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border\">\n          <TraceMessagesSkeleton className=\"border-r border-border px-4\" />\n          <div className=\"min-w-0 overflow-hidden\">\n            <div className=\"flex min-h-header-default items-center gap-2 border-b border-border px-2 py-1.5\">\n              <Skeleton className=\"h-6 w-16 rounded-full\" />\n              <Skeleton className=\"h-6 w-20 rounded-full\" />\n              <Skeleton className=\"h-6 w-16 rounded-full\" />\n            </div>\n            <div className=\"flex flex-col gap-px p-2\">\n              {[0, 1, 2, 1, 0].map((depth, row) => (\n                <div key={row} className=\"flex min-h-8 items-center gap-2\" style={{ paddingLeft: `${depth}rem` }}>\n                  <Skeleton className=\"size-4 shrink-0 rounded\" />\n                  <Skeleton className=\"h-3.5 flex-1 rounded\" style={{ maxWidth: `${60 - depth * 12}%` }} />\n                  <Skeleton className=\"ml-auto h-3 w-10 rounded\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAGA,MAAM,IAAA,GAAO,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAOd,SAAS,kBAAA,GAAqB;AACnC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAW,gBAAA;AAAA,MACX,SAAA,EAAU,yFAAA;AAAA,MAET,eAAK,GAAA,CAAI,CAAA,GAAA,qBACR,IAAA,CAAC,KAAA,EAAA,EAAc,WAAU,qEAAA,EACvB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAU,6BAAA,EAA8B,CAAA;AAAA,wBAC/D,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iFAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,uBAAA,EAAwB,CAAA;AAAA,4BAC5C,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,uBAAA,EAAwB,CAAA;AAAA,4BAC5C,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,uBAAA,EAAwB;AAAA,WAAA,EAC9C,CAAA;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAAA,EACZ,QAAA,EAAA,CAAC,GAAG,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,EAAO,GAAA,qBAC3B,IAAA,CAAC,KAAA,EAAA,EAAc,SAAA,EAAU,iCAAA,EAAkC,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,CAAA,EAAM,EAC7F,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,yBAAA,EAA0B,CAAA;AAAA,4BAC9C,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,sBAAA,EAAuB,KAAA,EAAO,EAAE,QAAA,EAAU,CAAA,EAAG,EAAA,GAAK,KAAA,GAAQ,EAAE,CAAA,CAAA,CAAA,EAAI,EAAG,CAAA;AAAA,4BACvF,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,0BAAA,EAA2B;AAAA,WAAA,EAAA,EAHvC,GAIV,CACD,CAAA,EACH;AAAA,SAAA,EACF;AAAA,OAAA,EAAA,EAjBQ,GAkBV,CACD;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"thread-view-skeleton.es.js","sources":["../../../../src/domains/traces/components/thread-view-skeleton.tsx"],"sourcesContent":["import { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { Card } from '@/ds/components/Card';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nconst ROWS = [0, 1, 2];\n\nexport interface ThreadViewSkeletonProps {\n  /** Mirrors the resolved rows: adds the Feedback tab between Messages and Scores. */\n  withFeedback?: boolean;\n}\n\n/**\n * Same geometry as the resolved `ThreadTrace` rows — the `ThreadTraceDivider` grid with the trace link and tabs\n * centered over the messages column, then the `px-4` messages column next to a details card that is clamped to it\n * (`h-0 min-h-full`) and holds the span tree — so the panel does not reflow once the thread's traces arrive.\n *\n * The whole skeleton waits 500ms before fading in, so fast responses swap straight to content without a flash.\n */\nexport function ThreadViewSkeleton({ withFeedback = false }: ThreadViewSkeletonProps) {\n  const tabWidths = withFeedback ? ['w-24', 'w-22', 'w-18'] : ['w-24', 'w-18'];\n\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading thread\"\n      className=\"min-h-0 animate-in overflow-hidden delay-500 duration-200 fade-in-0 fill-mode-backwards\"\n    >\n      {ROWS.map(idx => (\n        <div key={idx} className=\"flex flex-col pb-4\">\n          <div data-slot=\"thread-trace-divider-skeleton\" className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]\">\n            <div className=\"flex min-w-0 items-center gap-3 py-3 pl-4\">\n              <span className=\"h-px flex-1 bg-border\" />\n              <div className=\"flex shrink-0 items-center gap-2\">\n                <Skeleton className={cn('w-26 rounded-md', controlSizeClasses.sm)} />\n                <span className=\"h-4 w-px bg-border\" />\n                <div className=\"flex items-center gap-0.5\">\n                  {tabWidths.map(width => (\n                    <Skeleton\n                      key={width}\n                      data-slot=\"thread-tab-skeleton\"\n                      className={cn('rounded-full', controlSizeClasses.sm, width)}\n                    />\n                  ))}\n                </div>\n              </div>\n              <span className=\"h-px flex-1 bg-border\" />\n            </div>\n            <div className=\"flex items-center pr-4\">\n              <span className=\"h-px flex-1 bg-border\" />\n            </div>\n          </div>\n          <div className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]\">\n            <div data-slot=\"thread-messages-skeleton\" className=\"min-w-0 px-4\">\n              <TraceMessagesSkeleton delayed={false} />\n            </div>\n            <Card elevation=\"raised\" className=\"mx-4 h-0 min-h-full min-w-0 overflow-hidden\">\n              <div className=\"px-4 pt-2 pb-4\">\n                <TraceSpanTreeSkeleton />\n              </div>\n            </Card>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAOA,MAAM,IAAA,GAAO,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAcd,SAAS,kBAAA,CAAmB,EAAE,YAAA,GAAe,KAAA,EAAM,EAA4B;AACpF,EAAA,MAAM,SAAA,GAAY,eAAe,CAAC,MAAA,EAAQ,QAAQ,MAAM,CAAA,GAAI,CAAC,MAAA,EAAQ,MAAM,CAAA;AAE3E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAW,gBAAA;AAAA,MACX,SAAA,EAAU,yFAAA;AAAA,MAET,eAAK,GAAA,CAAI,CAAA,GAAA,qBACR,IAAA,CAAC,KAAA,EAAA,EAAc,WAAU,oBAAA,EACvB,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,+BAAA,EAAgC,SAAA,EAAU,8CAAA,EACvD,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2CAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,uBAAA,EAAwB,CAAA;AAAA,4BACxC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kCAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,YAAS,SAAA,EAAW,EAAA,CAAG,iBAAA,EAAmB,kBAAA,CAAmB,EAAE,CAAA,EAAG,CAAA;AAAA,8BACnE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oBAAA,EAAqB,CAAA;AAAA,kCACpC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,SAAA,CAAU,IAAI,CAAA,KAAA,qBACb,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBAEC,WAAA,EAAU,qBAAA;AAAA,kBACV,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,kBAAA,CAAmB,IAAI,KAAK;AAAA,iBAAA;AAAA,gBAFrD;AAAA,eAIR,CAAA,EACH;AAAA,aAAA,EACF,CAAA;AAAA,4BACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAwB;AAAA,WAAA,EAC1C,CAAA;AAAA,0BACA,GAAA,CAAC,SAAI,SAAA,EAAU,wBAAA,EACb,8BAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAwB,CAAA,EAC1C;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8CAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAU,0BAAA,EAA2B,SAAA,EAAU,gBAClD,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,OAAA,EAAS,KAAA,EAAO,CAAA,EACzC,CAAA;AAAA,0BACA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,SAAA,EAAU,6CAAA,EACjC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,GACzB,CAAA,EACF;AAAA,SAAA,EACF;AAAA,OAAA,EAAA,EAhCQ,GAiCV,CACD;AAAA;AAAA,GACH;AAEJ;;;;"}