@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

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

@@ -10,7 +10,7 @@ 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');
-const Button = require('../../../Button-CIwF6NHM.cjs');
+const Button = require('../../../Button-BnmR2HRc.cjs');
 const lib_framework = require('../../../lib/framework.cjs.js');
 const domains_scores_hooks_useTraceSpanScores = require('../../scores/hooks/use-trace-span-scores.cjs.js');
 const domains_traces_components_threadTrace = require('./thread-trace.cjs.js');
@@ -18,7 +18,6 @@ const domains_traces_components_threadViewSkeleton = require('./thread-view-skel
 const domains_traces_components_traceFeedbackTab = require('./trace-feedback-tab.cjs.js');
 const domains_traces_components_traceThreadItemView = require('./trace-thread-item-view.cjs.js');
 const domains_traces_components_tracesErrorContent = require('./traces-error-content.cjs.js');
-const domains_traces_hooks_useThreadRailTurns = require('../hooks/use-thread-rail-turns.cjs.js');
 const domains_traces_hooks_useTraceFeedback = require('../hooks/use-trace-feedback.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');
@@ -76,13 +75,11 @@ function LoadedThreadViewByTrace({
   anchorTraceId: requestedAnchorTraceId,
   onOpenScore
 }) {
-  const railTurns = domains_traces_hooks_useThreadRailTurns.useThreadRailTurns(traceIds);
   const [anchorTraceId] = React.useState(
     () => requestedAnchorTraceId && traceIds.includes(requestedAnchorTraceId) ? requestedAnchorTraceId : null
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace, { traceIds, anchorTraceId, onSelectedSpanChange, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.List, { "data-testid": "thread-view-by-trace", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.Rail, { turns: railTurns }),
       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.LoadMoreSentinel, { ref: setEndOfListElement })
     ] }),
@@ -95,6 +92,7 @@ function ThreadTraceRowContent({
 }) {
   const { traceId, highlightSpans } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
   const { Link, paths } = lib_framework.useLinkComponent();
+  const traceHref = paths.traceLink(traceId);
   const { data: feedbackData } = domains_traces_hooks_useTraceFeedback.useTraceFeedback({ traceId, enabled: withFeedback });
   const { data: traceData } = domains_traces_hooks_useTraceSpans.useTraceSpans(traceId, { passive: true });
   const rootSpanId = traceData?.spans.find((span) => span.parentSpanId == null)?.spanId;
@@ -128,8 +126,8 @@ function ThreadTraceRowContent({
         ] })
       ] }) }),
       /* @__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 pl-2", 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 pl-2", children: rootSpanId ? /* @__PURE__ */ jsxRuntime.jsx(
+      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,
@@ -140,16 +138,7 @@ function ThreadTraceRowContent({
       ) : null })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(domains_traces_components_threadTrace.ThreadTrace.Details, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.DetailsHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace.ThreadTrace.DetailsActions, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        Button.Button,
-        {
-          render: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.traceLink(traceId) }),
-          variant: "ghost",
-          size: "sm",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, {}),
-          children: "Go to trace"
-        }
-      ) }) }),
+      /* @__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, {})
     ] })
   ] });

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 { useState } from 'react';\nimport { useTraceSpanScores, 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 { useThreadRailTurns } from '@/domains/traces/hooks/use-thread-rail-turns';\nimport { useTraceFeedback } from '@/domains/traces/hooks/use-trace-feedback';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } 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\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  /** Trace to expand and scroll to on mount (first page only). */\n  anchorTraceId?: string;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}\n\n/**\n * A memory thread rendered as its traces: one row per agent turn (oldest first), with the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens\n * its detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  anchorTraceId,\n  onOpenScore,\n}: ThreadViewByTraceProps) {\n  const { rows, isLoading, setEndOfListElement, error } = useTracesListSource({\n    initialAutoRefetch: false,\n    withQueryTrace,\n    query: now => ({\n      timeRange: {\n        from: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString(),\n        to: now.toISOString(),\n      },\n      where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n      orderBy: [{ field: 'startedAt', direction: 'asc' }],\n    }),\n  });\n  const traceIds = rows.map(trace => trace.traceId);\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    <LoadedThreadViewByTrace\n      key={threadId}\n      traceIds={traceIds}\n      setEndOfListElement={setEndOfListElement}\n      withFeedback={withFeedback}\n      onSelectedSpanChange={onSelectedSpanChange}\n      anchorTraceId={anchorTraceId}\n      onOpenScore={onOpenScore}\n    />\n  );\n}\n\ninterface LoadedThreadViewByTraceProps {\n  traceIds: string[];\n  setEndOfListElement: (node: HTMLDivElement | null) => void;\n  withFeedback: boolean;\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  anchorTraceId?: string;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}\n\n/** Mounts once the first page is in, so state seeded from `traces` at mount only sees that page. */\nfunction LoadedThreadViewByTrace({\n  traceIds,\n  setEndOfListElement,\n  withFeedback,\n  onSelectedSpanChange,\n  anchorTraceId: requestedAnchorTraceId,\n  onOpenScore,\n}: LoadedThreadViewByTraceProps) {\n  const railTurns = useThreadRailTurns(traceIds);\n\n  // \"Open full thread\" lands here with the originating trace: that row starts expanded and\n  // scrolls into view when it mounts. Best effort on the first page only: resolved once at mount,\n  // so a row that arrives on a later page is left alone.\n  const [anchorTraceId] = useState(() =>\n    requestedAnchorTraceId && traceIds.includes(requestedAnchorTraceId) ? requestedAnchorTraceId : null,\n  );\n\n  return (\n    <ThreadTrace traceIds={traceIds} anchorTraceId={anchorTraceId} onSelectedSpanChange={onSelectedSpanChange}>\n      <ThreadTrace.List data-testid=\"thread-view-by-trace\">\n        <ThreadTrace.Rail turns={railTurns} />\n        {traceIds.map(traceId => (\n          <ThreadTrace.Row key={traceId} traceId={traceId}>\n            <ThreadTraceRowContent withFeedback={withFeedback} onOpenScore={onOpenScore} />\n          </ThreadTrace.Row>\n        ))}\n        <ThreadTrace.LoadMoreSentinel ref={setEndOfListElement} />\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  // First page only, for the tab badges; the Feedback and Scores bodies own their own pagination\n  // and share these queries through the React Query cache.\n  const { data: feedbackData } = useTraceFeedback({ traceId, enabled: withFeedback });\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  const { data: spanScoresData } = useTraceSpanScores({ traceId, spanId: rootSpanId });\n  const feedbackTotal = feedbackData?.pagination?.total;\n  const scoresTotal = spanScoresData?.pagination?.total;\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{feedbackTotal != null && <> ({feedbackTotal})</>}\n              </ThreadTrace.Tab>\n            )}\n            <ThreadTrace.Tab value=\"scores\">\n              <Icon size=\"xs\">\n                <ScorersIcon />\n              </Icon>\n              Scores{scoresTotal != null && <> ({scoresTotal})</>}\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 pl-2\">\n            <TraceFeedbackTab key={traceId} traceId={traceId} variant=\"thread\" />\n          </ThreadTrace.TabContent>\n        )}\n        <ThreadTrace.TabContent value=\"scores\" className=\"min-h-0 py-3 pl-2\">\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          <ThreadTrace.DetailsActions>\n            <Button\n              render={<Link href={paths.traceLink(traceId)} />}\n\n              variant=\"ghost\"\n              size=\"sm\"\n              icon={<ExternalLinkIcon />}\n            >\n              Go to trace\n            </Button>\n          </ThreadTrace.DetailsActions>\n        </ThreadTrace.DetailsHeader>\n        <ThreadTrace.Spans />\n      </ThreadTrace.Details>\n    </>\n  );\n}\n"],"names":["useTracesListSource","jsx","TracesErrorContent","ThreadViewSkeleton","Txt","useThreadRailTurns","useState","jsxs","ThreadTrace","useThreadTraceRow","useLinkComponent","useTraceFeedback","useTraceSpans","useTraceSpanScores","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 { ExternalLinkIcon, MessageSquareReplyIcon, MessageSquareTextIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport { useTraceSpanScores, 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 { useTraceFeedback } from '@/domains/traces/hooks/use-trace-feedback';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } 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\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  /** Trace to expand and scroll to on mount (first page only). */\n  anchorTraceId?: string;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}\n\n/**\n * A memory thread rendered as its traces: one row per agent turn (oldest first), with the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens\n * its detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  anchorTraceId,\n  onOpenScore,\n}: ThreadViewByTraceProps) {\n  const { rows, isLoading, setEndOfListElement, error } = useTracesListSource({\n    initialAutoRefetch: false,\n    withQueryTrace,\n    query: now => ({\n      timeRange: {\n        from: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString(),\n        to: now.toISOString(),\n      },\n      where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n      orderBy: [{ field: 'startedAt', direction: 'asc' }],\n    }),\n  });\n  const traceIds = rows.map(trace => trace.traceId);\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    <LoadedThreadViewByTrace\n      key={threadId}\n      traceIds={traceIds}\n      setEndOfListElement={setEndOfListElement}\n      withFeedback={withFeedback}\n      onSelectedSpanChange={onSelectedSpanChange}\n      anchorTraceId={anchorTraceId}\n      onOpenScore={onOpenScore}\n    />\n  );\n}\n\ninterface LoadedThreadViewByTraceProps {\n  traceIds: string[];\n  setEndOfListElement: (node: HTMLDivElement | null) => void;\n  withFeedback: boolean;\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  anchorTraceId?: string;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}\n\n/** Mounts once the first page is in, so state seeded from `traces` at mount only sees that page. */\nfunction LoadedThreadViewByTrace({\n  traceIds,\n  setEndOfListElement,\n  withFeedback,\n  onSelectedSpanChange,\n  anchorTraceId: requestedAnchorTraceId,\n  onOpenScore,\n}: LoadedThreadViewByTraceProps) {\n  // \"Open full thread\" lands here with the originating trace: that row starts expanded and\n  // scrolls into view when it mounts. Best effort on the first page only: resolved once at mount,\n  // so a row that arrives on a later page is left alone.\n  const [anchorTraceId] = useState(() =>\n    requestedAnchorTraceId && traceIds.includes(requestedAnchorTraceId) ? requestedAnchorTraceId : null,\n  );\n\n  return (\n    <ThreadTrace traceIds={traceIds} anchorTraceId={anchorTraceId} onSelectedSpanChange={onSelectedSpanChange}>\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.LoadMoreSentinel ref={setEndOfListElement} />\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  // First page only, for the tab badges; the Feedback and Scores bodies own their own pagination\n  // and share these queries through the React Query cache.\n  const { data: feedbackData } = useTraceFeedback({ traceId, enabled: withFeedback });\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  const { data: spanScoresData } = useTraceSpanScores({ traceId, spanId: rootSpanId });\n  const feedbackTotal = feedbackData?.pagination?.total;\n  const scoresTotal = spanScoresData?.pagination?.total;\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{feedbackTotal != null && <> ({feedbackTotal})</>}\n              </ThreadTrace.Tab>\n            )}\n            <ThreadTrace.Tab value=\"scores\">\n              <Icon size=\"xs\">\n                <ScorersIcon />\n              </Icon>\n              Scores{scoresTotal != null && <> ({scoresTotal})</>}\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":["useTracesListSource","jsx","TracesErrorContent","ThreadViewSkeleton","Txt","useState","jsxs","ThreadTrace","useThreadTraceRow","useLinkComponent","useTraceFeedback","useTraceSpans","useTraceSpanScores","Fragment","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","TraceThreadItemView","TraceFeedbackTab","TraceScoresTab","Button","ExternalLinkIcon"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ import '@tanstack/react-query';
 import '@base-ui/react/combobox';
 import { TraceScoresTab } from '../../scores/components/trace-scores-tab.es.js';
 import '@mastra/core/utils/safe-stringify';
-import { B as Button } from '../../../Button-BY9qlu8K.js';
+import { B as Button } from '../../../Button-C6eUqcPI.js';
 import { useLinkComponent } from '../../../lib/framework.es.js';
 import { useTraceSpanScores } from '../../scores/hooks/use-trace-span-scores.es.js';
 import { ThreadTrace } from './thread-trace.es.js';
@@ -14,7 +14,6 @@ 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 { useThreadRailTurns } from '../hooks/use-thread-rail-turns.es.js';
 import { useTraceFeedback } from '../hooks/use-trace-feedback.es.js';
 import { useTraceSpans } from '../hooks/use-trace-spans.es.js';
 import { useTracesListSource } from '../hooks/use-traces-list-source.es.js';
@@ -72,13 +71,11 @@ function LoadedThreadViewByTrace({
   anchorTraceId: requestedAnchorTraceId,
   onOpenScore
 }) {
-  const railTurns = useThreadRailTurns(traceIds);
   const [anchorTraceId] = useState(
     () => requestedAnchorTraceId && traceIds.includes(requestedAnchorTraceId) ? requestedAnchorTraceId : null
   );
   return /* @__PURE__ */ jsxs(ThreadTrace, { traceIds, anchorTraceId, onSelectedSpanChange, children: [
     /* @__PURE__ */ jsxs(ThreadTrace.List, { "data-testid": "thread-view-by-trace", children: [
-      /* @__PURE__ */ jsx(ThreadTrace.Rail, { turns: railTurns }),
       traceIds.map((traceId) => /* @__PURE__ */ jsx(ThreadTrace.Row, { traceId, children: /* @__PURE__ */ jsx(ThreadTraceRowContent, { withFeedback, onOpenScore }) }, traceId)),
       /* @__PURE__ */ jsx(ThreadTrace.LoadMoreSentinel, { ref: setEndOfListElement })
     ] }),
@@ -91,6 +88,7 @@ function ThreadTraceRowContent({
 }) {
   const { traceId, highlightSpans } = useThreadTraceRow();
   const { Link, paths } = useLinkComponent();
+  const traceHref = paths.traceLink(traceId);
   const { data: feedbackData } = useTraceFeedback({ traceId, enabled: withFeedback });
   const { data: traceData } = useTraceSpans(traceId, { passive: true });
   const rootSpanId = traceData?.spans.find((span) => span.parentSpanId == null)?.spanId;
@@ -124,8 +122,8 @@ function ThreadTraceRowContent({
         ] })
       ] }) }),
       /* @__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 pl-2", children: /* @__PURE__ */ jsx(TraceFeedbackTab, { traceId, variant: "thread" }, traceId) }),
-      /* @__PURE__ */ jsx(ThreadTrace.TabContent, { value: "scores", className: "min-h-0 py-3 pl-2", children: rootSpanId ? /* @__PURE__ */ jsx(
+      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,
@@ -136,16 +134,7 @@ function ThreadTraceRowContent({
       ) : null })
     ] }),
     /* @__PURE__ */ jsxs(ThreadTrace.Details, { children: [
-      /* @__PURE__ */ jsx(ThreadTrace.DetailsHeader, { children: /* @__PURE__ */ jsx(ThreadTrace.DetailsActions, { children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          render: /* @__PURE__ */ jsx(Link, { href: paths.traceLink(traceId) }),
-          variant: "ghost",
-          size: "sm",
-          icon: /* @__PURE__ */ jsx(ExternalLinkIcon, {}),
-          children: "Go to trace"
-        }
-      ) }) }),
+      /* @__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, {})
     ] })
   ] });

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 { useState } from 'react';\nimport { useTraceSpanScores, 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 { useThreadRailTurns } from '@/domains/traces/hooks/use-thread-rail-turns';\nimport { useTraceFeedback } from '@/domains/traces/hooks/use-trace-feedback';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } 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\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  /** Trace to expand and scroll to on mount (first page only). */\n  anchorTraceId?: string;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}\n\n/**\n * A memory thread rendered as its traces: one row per agent turn (oldest first), with the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens\n * its detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  anchorTraceId,\n  onOpenScore,\n}: ThreadViewByTraceProps) {\n  const { rows, isLoading, setEndOfListElement, error } = useTracesListSource({\n    initialAutoRefetch: false,\n    withQueryTrace,\n    query: now => ({\n      timeRange: {\n        from: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString(),\n        to: now.toISOString(),\n      },\n      where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n      orderBy: [{ field: 'startedAt', direction: 'asc' }],\n    }),\n  });\n  const traceIds = rows.map(trace => trace.traceId);\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    <LoadedThreadViewByTrace\n      key={threadId}\n      traceIds={traceIds}\n      setEndOfListElement={setEndOfListElement}\n      withFeedback={withFeedback}\n      onSelectedSpanChange={onSelectedSpanChange}\n      anchorTraceId={anchorTraceId}\n      onOpenScore={onOpenScore}\n    />\n  );\n}\n\ninterface LoadedThreadViewByTraceProps {\n  traceIds: string[];\n  setEndOfListElement: (node: HTMLDivElement | null) => void;\n  withFeedback: boolean;\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  anchorTraceId?: string;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}\n\n/** Mounts once the first page is in, so state seeded from `traces` at mount only sees that page. */\nfunction LoadedThreadViewByTrace({\n  traceIds,\n  setEndOfListElement,\n  withFeedback,\n  onSelectedSpanChange,\n  anchorTraceId: requestedAnchorTraceId,\n  onOpenScore,\n}: LoadedThreadViewByTraceProps) {\n  const railTurns = useThreadRailTurns(traceIds);\n\n  // \"Open full thread\" lands here with the originating trace: that row starts expanded and\n  // scrolls into view when it mounts. Best effort on the first page only: resolved once at mount,\n  // so a row that arrives on a later page is left alone.\n  const [anchorTraceId] = useState(() =>\n    requestedAnchorTraceId && traceIds.includes(requestedAnchorTraceId) ? requestedAnchorTraceId : null,\n  );\n\n  return (\n    <ThreadTrace traceIds={traceIds} anchorTraceId={anchorTraceId} onSelectedSpanChange={onSelectedSpanChange}>\n      <ThreadTrace.List data-testid=\"thread-view-by-trace\">\n        <ThreadTrace.Rail turns={railTurns} />\n        {traceIds.map(traceId => (\n          <ThreadTrace.Row key={traceId} traceId={traceId}>\n            <ThreadTraceRowContent withFeedback={withFeedback} onOpenScore={onOpenScore} />\n          </ThreadTrace.Row>\n        ))}\n        <ThreadTrace.LoadMoreSentinel ref={setEndOfListElement} />\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  // First page only, for the tab badges; the Feedback and Scores bodies own their own pagination\n  // and share these queries through the React Query cache.\n  const { data: feedbackData } = useTraceFeedback({ traceId, enabled: withFeedback });\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  const { data: spanScoresData } = useTraceSpanScores({ traceId, spanId: rootSpanId });\n  const feedbackTotal = feedbackData?.pagination?.total;\n  const scoresTotal = spanScoresData?.pagination?.total;\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{feedbackTotal != null && <> ({feedbackTotal})</>}\n              </ThreadTrace.Tab>\n            )}\n            <ThreadTrace.Tab value=\"scores\">\n              <Icon size=\"xs\">\n                <ScorersIcon />\n              </Icon>\n              Scores{scoresTotal != null && <> ({scoresTotal})</>}\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 pl-2\">\n            <TraceFeedbackTab key={traceId} traceId={traceId} variant=\"thread\" />\n          </ThreadTrace.TabContent>\n        )}\n        <ThreadTrace.TabContent value=\"scores\" className=\"min-h-0 py-3 pl-2\">\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          <ThreadTrace.DetailsActions>\n            <Button\n              render={<Link href={paths.traceLink(traceId)} />}\n\n              variant=\"ghost\"\n              size=\"sm\"\n              icon={<ExternalLinkIcon />}\n            >\n              Go to trace\n            </Button>\n          </ThreadTrace.DetailsActions>\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 { ExternalLinkIcon, MessageSquareReplyIcon, MessageSquareTextIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport { useTraceSpanScores, 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 { useTraceFeedback } from '@/domains/traces/hooks/use-trace-feedback';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { useTracesListSource } 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\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  /** Trace to expand and scroll to on mount (first page only). */\n  anchorTraceId?: string;\n  /** Opens a score from a trace's Scores tab; the app owns routing. */\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}\n\n/**\n * A memory thread rendered as its traces: one row per agent turn (oldest first), with the\n * reconstructed messages on the left and the span tree on the right. Clicking a span opens\n * its detail panel on the side so the conversation stays readable.\n */\nexport function ThreadViewByTrace({\n  threadId,\n  withQueryTrace,\n  withFeedback,\n  onSelectedSpanChange,\n  anchorTraceId,\n  onOpenScore,\n}: ThreadViewByTraceProps) {\n  const { rows, isLoading, setEndOfListElement, error } = useTracesListSource({\n    initialAutoRefetch: false,\n    withQueryTrace,\n    query: now => ({\n      timeRange: {\n        from: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString(),\n        to: now.toISOString(),\n      },\n      where: { op: 'eq', left: { path: 'threadId' }, right: { literal: threadId } },\n      orderBy: [{ field: 'startedAt', direction: 'asc' }],\n    }),\n  });\n  const traceIds = rows.map(trace => trace.traceId);\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    <LoadedThreadViewByTrace\n      key={threadId}\n      traceIds={traceIds}\n      setEndOfListElement={setEndOfListElement}\n      withFeedback={withFeedback}\n      onSelectedSpanChange={onSelectedSpanChange}\n      anchorTraceId={anchorTraceId}\n      onOpenScore={onOpenScore}\n    />\n  );\n}\n\ninterface LoadedThreadViewByTraceProps {\n  traceIds: string[];\n  setEndOfListElement: (node: HTMLDivElement | null) => void;\n  withFeedback: boolean;\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n  anchorTraceId?: string;\n  onOpenScore: (traceId: string, scoreId: string) => void;\n}\n\n/** Mounts once the first page is in, so state seeded from `traces` at mount only sees that page. */\nfunction LoadedThreadViewByTrace({\n  traceIds,\n  setEndOfListElement,\n  withFeedback,\n  onSelectedSpanChange,\n  anchorTraceId: requestedAnchorTraceId,\n  onOpenScore,\n}: LoadedThreadViewByTraceProps) {\n  // \"Open full thread\" lands here with the originating trace: that row starts expanded and\n  // scrolls into view when it mounts. Best effort on the first page only: resolved once at mount,\n  // so a row that arrives on a later page is left alone.\n  const [anchorTraceId] = useState(() =>\n    requestedAnchorTraceId && traceIds.includes(requestedAnchorTraceId) ? requestedAnchorTraceId : null,\n  );\n\n  return (\n    <ThreadTrace traceIds={traceIds} anchorTraceId={anchorTraceId} onSelectedSpanChange={onSelectedSpanChange}>\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.LoadMoreSentinel ref={setEndOfListElement} />\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  // First page only, for the tab badges; the Feedback and Scores bodies own their own pagination\n  // and share these queries through the React Query cache.\n  const { data: feedbackData } = useTraceFeedback({ traceId, enabled: withFeedback });\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  const { data: spanScoresData } = useTraceSpanScores({ traceId, spanId: rootSpanId });\n  const feedbackTotal = feedbackData?.pagination?.total;\n  const scoresTotal = spanScoresData?.pagination?.total;\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{feedbackTotal != null && <> ({feedbackTotal})</>}\n              </ThreadTrace.Tab>\n            )}\n            <ThreadTrace.Tab value=\"scores\">\n              <Icon size=\"xs\">\n                <ScorersIcon />\n              </Icon>\n              Scores{scoresTotal != null && <> ({scoresTotal})</>}\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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"}

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

@@ -14,8 +14,8 @@ function ThreadViewSkeleton() {
       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-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceMessagesSkeleton.TraceMessagesSkeleton, { className: "border-x border-border pr-4 pl-0" }),
+      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" }),

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-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14\">\n          <TraceMessagesSkeleton className=\"border-x border-border pr-4 pl-0\" />\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,wEAAA,EACvB,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAACE,qEAAA,EAAA,EAAsB,WAAU,kCAAA,EAAmC,CAAA;AAAA,wBACpED,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 { 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;;;;"}

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

@@ -10,8 +10,8 @@ function ThreadViewSkeleton() {
       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-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14", children: [
-        /* @__PURE__ */ jsx(TraceMessagesSkeleton, { className: "border-x border-border pr-4 pl-0" }),
+      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" }),

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-[24rem_minmax(0,1fr)] border-b border-border pr-4 pl-14\">\n          <TraceMessagesSkeleton className=\"border-x border-border pr-4 pl-0\" />\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,wEAAA,EACvB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAU,kCAAA,EAAmC,CAAA;AAAA,wBACpE,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 { 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;;;;"}

package/dist/domains/traces/components/timeline-name-col.cjs.js

@@ -6,6 +6,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
+const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const primitives_transitions = require('../../../primitives/transitions.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function TimelineNameCol({
@@ -52,7 +54,7 @@ function TimelineNameCol({
             type: "button",
             className: utils_cn.cn(
               "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground",
-              "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset"
+              primitives_transitions.focusRingInset
             ),
             children: [
               spanUI?.color && /* @__PURE__ */ jsxRuntime.jsx(
@@ -75,7 +77,7 @@ function TimelineNameCol({
                     children: span.name
                   }
                 ),
-                meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-meta text-muted-foreground lg:tabular-nums", children: meta })
+                meta && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", className: "shrink-0 lg:tabular-nums", children: meta })
               ] })
             ]
           }
@@ -93,7 +95,7 @@ function TimelineNameCol({
             className: utils_cn.cn(
               "flex size-5 cursor-pointer items-center justify-center rounded-md",
               "hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50",
-              "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1"
+              primitives_transitions.focusRing
             ),
             children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
           }

package/dist/domains/traces/components/timeline-name-col.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  numOfChildren?: number;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n  toggleChildren?: () => void;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: ReactNode;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren,\n  numOfChildren = 0,\n  isRootSpan,\n  isExpanded,\n  toggleChildren,\n  meta,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        {/* Duration stacks under the name on narrow layouts and moves inline at the end of the row from lg. */}\n        <span className=\"flex min-w-0 flex-1 flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2\">\n          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n          {meta && <span className=\"shrink-0 text-meta text-muted-foreground lg:tabular-nums\">{meta}</span>}\n        </span>\n      </button>\n\n      {/* Expand toggle sits at the end of the row; the slot is always present so names stay aligned. */}\n      <div className=\"flex w-8 shrink-0 items-center justify-center self-stretch pr-1\">\n        {hasChildren && (\n          <button\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation();\n              toggleChildren?.();\n            }}\n            aria-label={toggleLabel}\n            aria-expanded={isExpanded}\n            className={cn(\n              'flex size-5 cursor-pointer items-center justify-center rounded-md',\n              'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n              'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1',\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","TimelineStructureSign","ChevronDownIcon","ChevronRightIcon"],"mappings":"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"}
+{"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  numOfChildren?: number;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n  toggleChildren?: () => void;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: ReactNode;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren,\n  numOfChildren = 0,\n  isRootSpan,\n  isExpanded,\n  toggleChildren,\n  meta,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground',\n          focusRingInset,\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        {/* Duration stacks under the name on narrow layouts and moves inline at the end of the row from lg. */}\n        <span className=\"flex min-w-0 flex-1 flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2\">\n          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n          {meta && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 lg:tabular-nums\">\n              {meta}\n            </Txt>\n          )}\n        </span>\n      </button>\n\n      {/* Expand toggle sits at the end of the row; the slot is always present so names stay aligned. */}\n      <div className=\"flex w-8 shrink-0 items-center justify-center self-stretch pr-1\">\n        {hasChildren && (\n          <button\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation();\n              toggleChildren?.();\n            }}\n            aria-label={toggleLabel}\n            aria-expanded={isExpanded}\n            className={cn(\n              'flex size-5 cursor-pointer items-center justify-center rounded-md',\n              'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n              focusRing,\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","TimelineStructureSign","focusRingInset","Txt","focusRing","ChevronDownIcon","ChevronRightIcon"],"mappings":"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"}

package/dist/domains/traces/components/timeline-name-col.es.js

@@ -2,6 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
 import { useRef, useEffect } from 'react';
 import { TimelineStructureSign } from './timeline-structure-sign.es.js';
+import { T as Txt } from '../../../Txt-BP1SRHmL.js';
+import { focusRingInset, focusRing } from '../../../primitives/transitions.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function TimelineNameCol({
@@ -48,7 +50,7 @@ function TimelineNameCol({
             type: "button",
             className: cn(
               "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground",
-              "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset"
+              focusRingInset
             ),
             children: [
               spanUI?.color && /* @__PURE__ */ jsx(
@@ -71,7 +73,7 @@ function TimelineNameCol({
                     children: span.name
                   }
                 ),
-                meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-meta text-muted-foreground lg:tabular-nums", children: meta })
+                meta && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", className: "shrink-0 lg:tabular-nums", children: meta })
               ] })
             ]
           }
@@ -89,7 +91,7 @@ function TimelineNameCol({
             className: cn(
               "flex size-5 cursor-pointer items-center justify-center rounded-md",
               "hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50",
-              "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1"
+              focusRing
             ),
             children: isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {})
           }

package/dist/domains/traces/components/timeline-name-col.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  numOfChildren?: number;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n  toggleChildren?: () => void;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: ReactNode;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren,\n  numOfChildren = 0,\n  isRootSpan,\n  isExpanded,\n  toggleChildren,\n  meta,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        {/* Duration stacks under the name on narrow layouts and moves inline at the end of the row from lg. */}\n        <span className=\"flex min-w-0 flex-1 flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2\">\n          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n          {meta && <span className=\"shrink-0 text-meta text-muted-foreground lg:tabular-nums\">{meta}</span>}\n        </span>\n      </button>\n\n      {/* Expand toggle sits at the end of the row; the slot is always present so names stay aligned. */}\n      <div className=\"flex w-8 shrink-0 items-center justify-center self-stretch pr-1\">\n        {hasChildren && (\n          <button\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation();\n              toggleChildren?.();\n            }}\n            aria-label={toggleLabel}\n            aria-expanded={isExpanded}\n            className={cn(\n              'flex size-5 cursor-pointer items-center justify-center rounded-md',\n              'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n              'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1',\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAyBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA,GAAgB,CAAA;AAAA,EAChB,UAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,MAAM,cAAc,UAAA,GAAa,CAAA,mBAAA,EAAsB,aAAa,CAAA,CAAA,CAAA,GAAM,oBAAoB,aAAa,CAAA,CAAA,CAAA;AAE3G,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,eAAA,EAAe,UAAA;AAAA,MAEf,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,MACpC,SAAA,EAAW,GAAG,sFAAA,EAAwF;AAAA,QACpG,2EAAA,EAA6E,OAAA;AAAA,QAC7E,eAAA,EAAiB;AAAA,OAClB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,SAAA,EAAW,EAAA;AAAA,cACT,kIAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAMF,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sFAAA,EACd,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,oBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,oBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,oBAClF,SAAA,EAAU,kBAAA;AAAA,oBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,iBACR;AAAA,gBACC,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,4DAA4D,QAAA,EAAA,IAAA,EAAK;AAAA,eAAA,EAC5F;AAAA;AAAA;AAAA,SACF;AAAA,wBAGA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iEAAA,EACZ,QAAA,EAAA,WAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,SAAS,CAAA,CAAA,KAAK;AACZ,cAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,cAAA,cAAA,IAAiB;AAAA,YACnB,CAAA;AAAA,YACA,YAAA,EAAY,WAAA;AAAA,YACZ,eAAA,EAAe,UAAA;AAAA,YACf,SAAA,EAAW,EAAA;AAAA,cACT,mEAAA;AAAA,cACA,2EAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA,UAAA,mBAAa,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,uBAAM,gBAAA,EAAA,EAAiB;AAAA;AAAA,SACxD,EAEJ;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  numOfChildren?: number;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n  toggleChildren?: () => void;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: ReactNode;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren,\n  numOfChildren = 0,\n  isRootSpan,\n  isExpanded,\n  toggleChildren,\n  meta,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground',\n          focusRingInset,\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        {/* Duration stacks under the name on narrow layouts and moves inline at the end of the row from lg. */}\n        <span className=\"flex min-w-0 flex-1 flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2\">\n          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n          {meta && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 lg:tabular-nums\">\n              {meta}\n            </Txt>\n          )}\n        </span>\n      </button>\n\n      {/* Expand toggle sits at the end of the row; the slot is always present so names stay aligned. */}\n      <div className=\"flex w-8 shrink-0 items-center justify-center self-stretch pr-1\">\n        {hasChildren && (\n          <button\n            type=\"button\"\n            onClick={e => {\n              e.stopPropagation();\n              toggleChildren?.();\n            }}\n            aria-label={toggleLabel}\n            aria-expanded={isExpanded}\n            className={cn(\n              'flex size-5 cursor-pointer items-center justify-center rounded-md',\n              'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n              focusRing,\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/traces/components/trace-columns-menu.cjs.js

@@ -6,12 +6,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
-const Button = require('../../../Button-CIwF6NHM.cjs');
-const combobox = require('../../../combobox-CJBXDMDk.cjs');
+const Button = require('../../../Button-BnmR2HRc.cjs');
+const combobox = require('../../../combobox-rKV-Lksj.cjs');
 require('@base-ui/react/combobox');
-const dialog = require('../../../dialog-CDg8uu4t.cjs');
+const dialog = require('../../../dialog-DYpOpj9s.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
-const fieldBlock = require('../../../field-block-BG5E7u9v.cjs');
+const fieldBlock = require('../../../field-block-BIDi9Bvc.cjs');
+const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const dialogAction = require('../../../dialog-action-B3AHq7mU.cjs');
 
 const METADATA_KEY_FIELD_NAME = "trace-metadata-key";
 const EMPTY_KEYS = [];
@@ -99,7 +101,7 @@ function TraceColumnsMenu({
           },
           column
         )),
-        usageDisabledReason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-1 text-meta text-placeholder", role: "note", children: usageDisabledReason }),
+        usageDisabledReason && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "meta", tone: "faint", className: "px-2 py-1", role: "note", children: usageDisabledReason }),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Label, { children: "Custom columns" }),
         domains_traces_traceListColumns.TRACE_CUSTOM_COLUMN_FIELDS.map((field) => {
@@ -163,8 +165,8 @@ function TraceColumnsMenu({
         )
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), type: "button", onClick: () => handleDialogOpenChange(false), children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns3, {}), type: "submit", variant: "primary", children: "Add column" })
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogCancel, { children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(dialogAction.DialogAction, { type: "submit", children: "Add column" })
       ] })
     ] }) }) })
   ] });