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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,7 +6,7 @@ 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 Txt = require('../../../Txt-DNnvlrBo.cjs');
 const primitives_transitions = require('../../../primitives/transitions.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
@@ -53,7 +53,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",
+              "flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground",
               primitives_transitions.focusRingInset
             ),
             children: [
@@ -62,11 +62,11 @@ function TimelineNameCol({
                 {
                   "aria-hidden": true,
                   title: spanUI.label,
-                  className: "inline-block size-2 shrink-0 rounded-full",
+                  className: "mt-[5px] inline-block size-2 shrink-0 rounded-full",
                   style: { backgroundColor: spanUI.color }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -77,7 +77,7 @@ function TimelineNameCol({
                     children: span.name
                   }
                 ),
-                meta && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", className: "shrink-0 lg:tabular-nums", children: meta })
+                meta && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", className: "shrink-0 tabular-nums", children: meta })
               ] })
             ]
           }

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 { 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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"}
+{"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-start 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=\"mt-[5px] 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 always stacks under the name. */}\n        <span className=\"flex min-w-0 flex-1 flex-col\">\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 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,7 +2,7 @@ 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 { T as Txt } from '../../../Txt-C3cYJgKU.js';
 import { focusRingInset, focusRing } from '../../../primitives/transitions.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
@@ -49,7 +49,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",
+              "flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground",
               focusRingInset
             ),
             children: [
@@ -58,11 +58,11 @@ function TimelineNameCol({
                 {
                   "aria-hidden": true,
                   title: spanUI.label,
-                  className: "inline-block size-2 shrink-0 rounded-full",
+                  className: "mt-[5px] inline-block size-2 shrink-0 rounded-full",
                   style: { backgroundColor: spanUI.color }
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2", children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
                 /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -73,7 +73,7 @@ function TimelineNameCol({
                     children: span.name
                   }
                 ),
-                meta && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", className: "shrink-0 lg:tabular-nums", children: meta })
+                meta && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", className: "shrink-0 tabular-nums", children: meta })
               ] })
             ]
           }

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 { 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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"}
+{"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-start 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=\"mt-[5px] 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 always stacks under the name. */}\n        <span className=\"flex min-w-0 flex-1 flex-col\">\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 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/timeline-timing-col.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_utils_spanTiming = require('../utils/span-timing.cjs.js');
 const domains_traces_components_spanTimingHoverCard = require('./span-timing-hover-card.cjs.js');
 const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
-const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const Txt = require('../../../Txt-DNnvlrBo.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const utils_duration = require('../../../utils/duration.cjs.js');
 

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { getSpanTimingLayout } from '../utils/span-timing.es.js';
 import { SpanTimingHoverCard } from './span-timing-hover-card.es.js';
 import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-B1-n3amu.js';
-import { T as Txt } from '../../../Txt-BP1SRHmL.js';
+import { T as Txt } from '../../../Txt-C3cYJgKU.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';