@mastra/playground-ui 56.0.0 → 57.0.0-alpha.1

package/dist/domains/traces/components/span-timeline-row.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-timeline-row.es.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\nexport type SpanTimelineRowProps = {\n  ctx: SpanRowContext;\n};\n\nfunction formatDuration(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n */\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n  const {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected,\n    isFaded,\n    isRevealed,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion,\n  } = ctx;\n  const rowRef = useRef<HTMLDivElement>(null);\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n  useEffect(() => {\n    if (!shouldScrollIntoView) return;\n    rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n  const toggleLabel = isExpanded\n    ? `Collapse children (${expansion.numOfChildren})`\n    : `Expand children (${expansion.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(\n        'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n        {\n          'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n          'bg-fill-hover': isSelected,\n        },\n      )}\n    >\n      <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\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 rounded-md px-2 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          <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        </button>\n\n        {/* Slot is always present so names stay aligned whether or not the span has children. */}\n        <div className=\"flex w-7 shrink-0 items-center justify-center\">\n          {expansion.hasChildren && (\n            <button\n              type=\"button\"\n              onClick={e => {\n                e.stopPropagation();\n                expansion.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      <HoverCard>\n        <HoverCardTrigger\n          render={<div />}\n          className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n        >\n          <div className=\"bg-fill-subtle relative h-4 w-full rounded-sm\">\n            <div\n              data-testid=\"span-timeline-bar\"\n              className=\"absolute inset-y-0 rounded-sm\"\n              style={{\n                left: `${leftPercent}%`,\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                backgroundColor: spanUI?.color,\n              }}\n            />\n          </div>\n          <div className=\"text-meta text-muted-foreground w-12 text-right tabular-nums\">\n            {formatDuration(span.latency)}\n          </div>\n        </HoverCardTrigger>\n        <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n      </HoverCard>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"span-timeline-row.es.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\nexport type SpanTimelineRowProps = {\n  ctx: SpanRowContext;\n};\n\nfunction formatDuration(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n */\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n  const {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected,\n    isFaded,\n    isRevealed,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion,\n  } = ctx;\n  const rowRef = useRef<HTMLDivElement>(null);\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n  useEffect(() => {\n    if (!shouldScrollIntoView) return;\n    rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n  const toggleLabel = isExpanded\n    ? `Collapse children (${expansion.numOfChildren})`\n    : `Expand children (${expansion.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(\n        'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n        {\n          'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n          'bg-fill-hover': isSelected,\n        },\n      )}\n    >\n      <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\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 rounded-md px-2 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          <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        </button>\n\n        {/* Slot is always present so names stay aligned whether or not the span has children. */}\n        <div className=\"flex w-7 shrink-0 items-center justify-center\">\n          {expansion.hasChildren && (\n            <button\n              type=\"button\"\n              onClick={e => {\n                e.stopPropagation();\n                expansion.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      <HoverCard>\n        <HoverCardTrigger\n          render={<div />}\n          className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n        >\n          <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n            <div\n              data-testid=\"span-timeline-bar\"\n              className=\"absolute inset-y-0 rounded-sm\"\n              style={{\n                left: `${leftPercent}%`,\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                backgroundColor: spanUI?.color,\n              }}\n            />\n          </div>\n          <div className=\"w-12 text-right text-meta text-muted-foreground tabular-nums\">\n            {formatDuration(span.latency)}\n          </div>\n        </HoverCardTrigger>\n        <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n      </HoverCard>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/traces/components/span-timing-hover-card.cjs.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const format = require('date-fns/format');
-const dataKeysAndValues = require('../../../data-keys-and-values-4pYpSbqS.cjs');
-const hoverCard = require('../../../hover-card-DdHnkGcs.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-BduKvvC5.cjs');
+const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function SpanTimingHoverCard({ span, startShiftMs }) {

package/dist/domains/traces/components/span-timing-hover-card.es.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { format } from 'date-fns/format';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-j0NVKPOl.js';
-import { a as HoverCardContent } from '../../../hover-card-Ch5smNcf.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-DhC4U4Yl.js';
+import { a as HoverCardContent } from '../../../hover-card-B1-n3amu.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function SpanTimingHoverCard({ span, startShiftMs }) {

package/dist/domains/traces/components/span-token-usage.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_spanTokenUsage_utils = require('./span-token-usage.utils.cjs.js');
-const dataKeysAndValues = require('../../../data-keys-and-values-4pYpSbqS.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-BduKvvC5.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 const detailKeyLabels = {
@@ -24,17 +24,17 @@ function SpanTokenUsage({ usage, className }) {
   const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12", className), children: [
     showSplit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-placeholder flex items-baseline gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-3 text-placeholder", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body", children: "Tokens Used" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-subheading text-muted-foreground", children: total.toLocaleString() }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-caption ml-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto text-caption", children: [
           Math.round(inputPct),
           "% Input vs ",
           Math.round(outputPct),
           "% Output"
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted mt-2 rounded-md p-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 rounded-md bg-muted p-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -64,7 +64,7 @@ function UsageColumn({
   details
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-placeholder mb-2 flex items-baseline gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-baseline gap-3 text-placeholder", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body", children: label }),
       typeof value === "number" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-baseline gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-subheading text-muted-foreground", children: value.toLocaleString() }),

package/dist/domains/traces/components/span-token-usage.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-token-usage.cjs.js","sources":["../../../../src/domains/traces/components/span-token-usage.tsx"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\nimport { Fragment } from 'react';\nimport { getTokenUsageView } from './span-token-usage.utils';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nconst detailKeyLabels: Record<string, string> = {\n  text: 'Text',\n  cacheRead: 'Cache read',\n  cacheWrite: 'Cache write',\n  audio: 'Audio',\n  image: 'Image',\n  reasoning: 'Reasoning',\n};\n\ntype SpanTokenUsageProps = {\n  usage: UsageStats;\n  className?: string;\n};\n\nconst INPUT_COLOR = 'var(--chart-soft-3)';\nconst OUTPUT_COLOR = 'var(--chart-soft-1)';\n\nexport function SpanTokenUsage({ usage, className }: SpanTokenUsageProps) {\n  const view = getTokenUsageView(usage);\n  if (!view) return null;\n\n  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;\n\n  return (\n    <div className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12', className)}>\n      {showSplit && (\n        <div className=\"mb-2\">\n          <div className=\"text-placeholder flex items-baseline gap-3\">\n            <span className=\"text-body\">Tokens Used</span>\n            <span className=\"text-subheading text-muted-foreground\">{total.toLocaleString()}</span>\n            <span className=\"text-caption ml-auto\">\n              {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n            </span>\n          </div>\n          <div className=\"bg-muted mt-2 rounded-md p-1.5\">\n            <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n              <div\n                className=\"absolute top-0 left-0 h-1.5\"\n                style={{ width: `${inputPct}%`, backgroundColor: INPUT_COLOR }}\n              />\n              <div\n                className=\"absolute top-0 h-1.5\"\n                style={{ left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-6\">\n        <UsageColumn label=\"Input\" color={INPUT_COLOR} value={inputValue} details={inputDetails} />\n        <UsageColumn label=\"Output\" color={OUTPUT_COLOR} value={outputValue} details={outputDetails} />\n      </div>\n    </div>\n  );\n}\n\nfunction UsageColumn({\n  label,\n  color,\n  value,\n  details,\n}: {\n  label: string;\n  color: string;\n  value?: number;\n  details?: TokenDetailsObject;\n}) {\n  return (\n    <div>\n      <div className=\"text-placeholder mb-2 flex items-baseline gap-3\">\n        <span className=\"text-body\">{label}</span>\n        {typeof value === 'number' && (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className=\"text-subheading text-muted-foreground\">{value.toLocaleString()}</span>\n            <span className=\"size-2 self-center rounded-full\" style={{ backgroundColor: color }} />\n          </span>\n        )}\n      </div>\n      {details && <DetailsList details={details} />}\n    </div>\n  );\n}\n\nfunction DetailsList({ details }: { details: TokenDetailsObject }) {\n  return (\n    <DataKeysAndValues density=\"dense\">\n      {Object.entries(details).map(([detailKey, detailValue]) => {\n        if (typeof detailValue !== 'number') return null;\n        return (\n          <Fragment key={detailKey}>\n            <DataKeysAndValues.Key>{detailKeyLabels[detailKey] || detailKey}</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n          </Fragment>\n        );\n      })}\n    </DataKeysAndValues>\n  );\n}\n"],"names":["getTokenUsageView","cn","jsxs","jsx","DataKeysAndValues","Fragment"],"mappings":"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"}
+{"version":3,"file":"span-token-usage.cjs.js","sources":["../../../../src/domains/traces/components/span-token-usage.tsx"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\nimport { Fragment } from 'react';\nimport { getTokenUsageView } from './span-token-usage.utils';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nconst detailKeyLabels: Record<string, string> = {\n  text: 'Text',\n  cacheRead: 'Cache read',\n  cacheWrite: 'Cache write',\n  audio: 'Audio',\n  image: 'Image',\n  reasoning: 'Reasoning',\n};\n\ntype SpanTokenUsageProps = {\n  usage: UsageStats;\n  className?: string;\n};\n\nconst INPUT_COLOR = 'var(--chart-soft-3)';\nconst OUTPUT_COLOR = 'var(--chart-soft-1)';\n\nexport function SpanTokenUsage({ usage, className }: SpanTokenUsageProps) {\n  const view = getTokenUsageView(usage);\n  if (!view) return null;\n\n  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;\n\n  return (\n    <div className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12', className)}>\n      {showSplit && (\n        <div className=\"mb-2\">\n          <div className=\"flex items-baseline gap-3 text-placeholder\">\n            <span className=\"text-body\">Tokens Used</span>\n            <span className=\"text-subheading text-muted-foreground\">{total.toLocaleString()}</span>\n            <span className=\"ml-auto text-caption\">\n              {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n            </span>\n          </div>\n          <div className=\"mt-2 rounded-md bg-muted p-1.5\">\n            <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n              <div\n                className=\"absolute top-0 left-0 h-1.5\"\n                style={{ width: `${inputPct}%`, backgroundColor: INPUT_COLOR }}\n              />\n              <div\n                className=\"absolute top-0 h-1.5\"\n                style={{ left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-6\">\n        <UsageColumn label=\"Input\" color={INPUT_COLOR} value={inputValue} details={inputDetails} />\n        <UsageColumn label=\"Output\" color={OUTPUT_COLOR} value={outputValue} details={outputDetails} />\n      </div>\n    </div>\n  );\n}\n\nfunction UsageColumn({\n  label,\n  color,\n  value,\n  details,\n}: {\n  label: string;\n  color: string;\n  value?: number;\n  details?: TokenDetailsObject;\n}) {\n  return (\n    <div>\n      <div className=\"mb-2 flex items-baseline gap-3 text-placeholder\">\n        <span className=\"text-body\">{label}</span>\n        {typeof value === 'number' && (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className=\"text-subheading text-muted-foreground\">{value.toLocaleString()}</span>\n            <span className=\"size-2 self-center rounded-full\" style={{ backgroundColor: color }} />\n          </span>\n        )}\n      </div>\n      {details && <DetailsList details={details} />}\n    </div>\n  );\n}\n\nfunction DetailsList({ details }: { details: TokenDetailsObject }) {\n  return (\n    <DataKeysAndValues density=\"dense\">\n      {Object.entries(details).map(([detailKey, detailValue]) => {\n        if (typeof detailValue !== 'number') return null;\n        return (\n          <Fragment key={detailKey}>\n            <DataKeysAndValues.Key>{detailKeyLabels[detailKey] || detailKey}</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n          </Fragment>\n        );\n      })}\n    </DataKeysAndValues>\n  );\n}\n"],"names":["getTokenUsageView","cn","jsxs","jsx","DataKeysAndValues","Fragment"],"mappings":"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"}

package/dist/domains/traces/components/span-token-usage.es.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { getTokenUsageView } from './span-token-usage.utils.es.js';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-j0NVKPOl.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-DhC4U4Yl.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 const detailKeyLabels = {
@@ -20,17 +20,17 @@ function SpanTokenUsage({ usage, className }) {
   const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;
   return /* @__PURE__ */ jsxs("div", { className: cn("mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12", className), children: [
     showSplit && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-placeholder flex items-baseline gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3 text-placeholder", children: [
         /* @__PURE__ */ jsx("span", { className: "text-body", children: "Tokens Used" }),
         /* @__PURE__ */ jsx("span", { className: "text-subheading text-muted-foreground", children: total.toLocaleString() }),
-        /* @__PURE__ */ jsxs("span", { className: "text-caption ml-auto", children: [
+        /* @__PURE__ */ jsxs("span", { className: "ml-auto text-caption", children: [
           Math.round(inputPct),
           "% Input vs ",
           Math.round(outputPct),
           "% Output"
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "bg-muted mt-2 rounded-md p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-md bg-muted p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -60,7 +60,7 @@ function UsageColumn({
   details
 }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-placeholder mb-2 flex items-baseline gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-baseline gap-3 text-placeholder", children: [
       /* @__PURE__ */ jsx("span", { className: "text-body", children: label }),
       typeof value === "number" && /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1.5", children: [
         /* @__PURE__ */ jsx("span", { className: "text-subheading text-muted-foreground", children: value.toLocaleString() }),

package/dist/domains/traces/components/span-token-usage.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-token-usage.es.js","sources":["../../../../src/domains/traces/components/span-token-usage.tsx"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\nimport { Fragment } from 'react';\nimport { getTokenUsageView } from './span-token-usage.utils';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nconst detailKeyLabels: Record<string, string> = {\n  text: 'Text',\n  cacheRead: 'Cache read',\n  cacheWrite: 'Cache write',\n  audio: 'Audio',\n  image: 'Image',\n  reasoning: 'Reasoning',\n};\n\ntype SpanTokenUsageProps = {\n  usage: UsageStats;\n  className?: string;\n};\n\nconst INPUT_COLOR = 'var(--chart-soft-3)';\nconst OUTPUT_COLOR = 'var(--chart-soft-1)';\n\nexport function SpanTokenUsage({ usage, className }: SpanTokenUsageProps) {\n  const view = getTokenUsageView(usage);\n  if (!view) return null;\n\n  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;\n\n  return (\n    <div className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12', className)}>\n      {showSplit && (\n        <div className=\"mb-2\">\n          <div className=\"text-placeholder flex items-baseline gap-3\">\n            <span className=\"text-body\">Tokens Used</span>\n            <span className=\"text-subheading text-muted-foreground\">{total.toLocaleString()}</span>\n            <span className=\"text-caption ml-auto\">\n              {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n            </span>\n          </div>\n          <div className=\"bg-muted mt-2 rounded-md p-1.5\">\n            <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n              <div\n                className=\"absolute top-0 left-0 h-1.5\"\n                style={{ width: `${inputPct}%`, backgroundColor: INPUT_COLOR }}\n              />\n              <div\n                className=\"absolute top-0 h-1.5\"\n                style={{ left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-6\">\n        <UsageColumn label=\"Input\" color={INPUT_COLOR} value={inputValue} details={inputDetails} />\n        <UsageColumn label=\"Output\" color={OUTPUT_COLOR} value={outputValue} details={outputDetails} />\n      </div>\n    </div>\n  );\n}\n\nfunction UsageColumn({\n  label,\n  color,\n  value,\n  details,\n}: {\n  label: string;\n  color: string;\n  value?: number;\n  details?: TokenDetailsObject;\n}) {\n  return (\n    <div>\n      <div className=\"text-placeholder mb-2 flex items-baseline gap-3\">\n        <span className=\"text-body\">{label}</span>\n        {typeof value === 'number' && (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className=\"text-subheading text-muted-foreground\">{value.toLocaleString()}</span>\n            <span className=\"size-2 self-center rounded-full\" style={{ backgroundColor: color }} />\n          </span>\n        )}\n      </div>\n      {details && <DetailsList details={details} />}\n    </div>\n  );\n}\n\nfunction DetailsList({ details }: { details: TokenDetailsObject }) {\n  return (\n    <DataKeysAndValues density=\"dense\">\n      {Object.entries(details).map(([detailKey, detailValue]) => {\n        if (typeof detailValue !== 'number') return null;\n        return (\n          <Fragment key={detailKey}>\n            <DataKeysAndValues.Key>{detailKeyLabels[detailKey] || detailKey}</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n          </Fragment>\n        );\n      })}\n    </DataKeysAndValues>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"span-token-usage.es.js","sources":["../../../../src/domains/traces/components/span-token-usage.tsx"],"sourcesContent":["import type { InputTokenDetails, OutputTokenDetails, UsageStats } from '@mastra/core/observability';\nimport { Fragment } from 'react';\nimport { getTokenUsageView } from './span-token-usage.utils';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { cn } from '@/lib/utils';\n\nexport type TokenUsage = UsageStats;\n\ntype TokenDetailsObject = InputTokenDetails | OutputTokenDetails;\n\nconst detailKeyLabels: Record<string, string> = {\n  text: 'Text',\n  cacheRead: 'Cache read',\n  cacheWrite: 'Cache write',\n  audio: 'Audio',\n  image: 'Image',\n  reasoning: 'Reasoning',\n};\n\ntype SpanTokenUsageProps = {\n  usage: UsageStats;\n  className?: string;\n};\n\nconst INPUT_COLOR = 'var(--chart-soft-3)';\nconst OUTPUT_COLOR = 'var(--chart-soft-1)';\n\nexport function SpanTokenUsage({ usage, className }: SpanTokenUsageProps) {\n  const view = getTokenUsageView(usage);\n  if (!view) return null;\n\n  const { inputValue, outputValue, total, showSplit, inputPct, outputPct, inputDetails, outputDetails } = view;\n\n  return (\n    <div className={cn('mt-2 mb-8 grid grid-cols-1 border-b border-border pb-3 4xl:grid-cols-2 4xl:gap-12', className)}>\n      {showSplit && (\n        <div className=\"mb-2\">\n          <div className=\"flex items-baseline gap-3 text-placeholder\">\n            <span className=\"text-body\">Tokens Used</span>\n            <span className=\"text-subheading text-muted-foreground\">{total.toLocaleString()}</span>\n            <span className=\"ml-auto text-caption\">\n              {Math.round(inputPct)}% Input vs {Math.round(outputPct)}% Output\n            </span>\n          </div>\n          <div className=\"mt-2 rounded-md bg-muted p-1.5\">\n            <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n              <div\n                className=\"absolute top-0 left-0 h-1.5\"\n                style={{ width: `${inputPct}%`, backgroundColor: INPUT_COLOR }}\n              />\n              <div\n                className=\"absolute top-0 h-1.5\"\n                style={{ left: `${inputPct}%`, width: `${outputPct}%`, backgroundColor: OUTPUT_COLOR }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-6\">\n        <UsageColumn label=\"Input\" color={INPUT_COLOR} value={inputValue} details={inputDetails} />\n        <UsageColumn label=\"Output\" color={OUTPUT_COLOR} value={outputValue} details={outputDetails} />\n      </div>\n    </div>\n  );\n}\n\nfunction UsageColumn({\n  label,\n  color,\n  value,\n  details,\n}: {\n  label: string;\n  color: string;\n  value?: number;\n  details?: TokenDetailsObject;\n}) {\n  return (\n    <div>\n      <div className=\"mb-2 flex items-baseline gap-3 text-placeholder\">\n        <span className=\"text-body\">{label}</span>\n        {typeof value === 'number' && (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className=\"text-subheading text-muted-foreground\">{value.toLocaleString()}</span>\n            <span className=\"size-2 self-center rounded-full\" style={{ backgroundColor: color }} />\n          </span>\n        )}\n      </div>\n      {details && <DetailsList details={details} />}\n    </div>\n  );\n}\n\nfunction DetailsList({ details }: { details: TokenDetailsObject }) {\n  return (\n    <DataKeysAndValues density=\"dense\">\n      {Object.entries(details).map(([detailKey, detailValue]) => {\n        if (typeof detailValue !== 'number') return null;\n        return (\n          <Fragment key={detailKey}>\n            <DataKeysAndValues.Key>{detailKeyLabels[detailKey] || detailKey}</DataKeysAndValues.Key>\n            <DataKeysAndValues.Value className=\"text-right\">{detailValue.toLocaleString()}</DataKeysAndValues.Value>\n          </Fragment>\n        );\n      })}\n    </DataKeysAndValues>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const dataPanel = require('../../../../data-panel-CWZJKBeW.cjs');
+const dataPanel = require('../../../../data-panel-CM3N_4M7.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceDetails({ className, children, ...props }) {
@@ -28,7 +28,7 @@ function ThreadTraceDetails({ className, children, ...props }) {
 }
 function ThreadTraceDetailsHeader({ className, children, ...props }) {
   const { detailsHeaderRef } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: detailsHeaderRef, "data-slot": "thread-trace-details-header", className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "border-border border-b", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: detailsHeaderRef, "data-slot": "thread-trace-details-header", className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "border-b border-border", children }) });
 }
 function ThreadTraceDetailsActions({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-details.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-border border-b\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["useThreadTraceRow","jsx","cn","DataPanel"],"mappings":";;;;;;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIA,6EAAA,EAAkB;AACzC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAIF,6EAAA,EAAkB;AAC/C,EAAA,sCACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAAC,cAAA,CAACE,oBAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACEF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;;;"}
+{"version":3,"file":"thread-trace-details.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-b border-border\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["useThreadTraceRow","jsx","cn","DataPanel"],"mappings":";;;;;;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIA,6EAAA,EAAkB;AACzC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAIF,6EAAA,EAAkB;AAC/C,EAAA,sCACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAAC,cAAA,CAACE,oBAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACEF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;;;"}

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { D as DataPanel } from '../../../../data-panel-CWjgS1Gh.js';
+import { D as DataPanel } from '../../../../data-panel-D3UfzCoE.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceDetails({ className, children, ...props }) {
@@ -24,7 +24,7 @@ function ThreadTraceDetails({ className, children, ...props }) {
 }
 function ThreadTraceDetailsHeader({ className, children, ...props }) {
   const { detailsHeaderRef } = useThreadTraceRow();
-  return /* @__PURE__ */ jsx("div", { ref: detailsHeaderRef, "data-slot": "thread-trace-details-header", className, ...props, children: /* @__PURE__ */ jsx(DataPanel.Header, { className: "border-border border-b", children }) });
+  return /* @__PURE__ */ jsx("div", { ref: detailsHeaderRef, "data-slot": "thread-trace-details-header", className, ...props, children: /* @__PURE__ */ jsx(DataPanel.Header, { className: "border-b border-border", children }) });
 }
 function ThreadTraceDetailsActions({ className, ...props }) {
   return /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-details.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-border border-b\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,iBAAA,EAAkB;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,iBAAA,EAAkB;AAC/C,EAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAA,GAAA,CAAC,UAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-details.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-b border-border\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,iBAAA,EAAkB;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,iBAAA,EAAkB;AAC/C,EAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAA,GAAA,CAAC,UAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_threadTrace_threadTraceRow = require('./thread-trace-row.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const dataPanel = require('../../../../data-panel-CWZJKBeW.cjs');
-const tabsRoot = require('../../../../tabs-root-C5ABfm1F.cjs');
-const tabsTab = require('../../../../tabs-tab-DA466DbX.cjs');
-const tabsContent = require('../../../../tabs-content-Bz6CZuv9.cjs');
+const dataPanel = require('../../../../data-panel-CM3N_4M7.cjs');
+const tabsRoot = require('../../../../tabs-root-BiV8irc3.cjs');
+const tabsTab = require('../../../../tabs-tab-J91Szy3Q.cjs');
+const tabsContent = require('../../../../tabs-content-Cdu6HP8U.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {

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

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row.es.js';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { D as DataPanel } from '../../../../data-panel-CWjgS1Gh.js';
-import { T as TabList, a as Tabs } from '../../../../tabs-root-CcEQrwTM.js';
-import { T as Tab } from '../../../../tabs-tab-BycF4dvx.js';
-import { T as TabContent } from '../../../../tabs-content-CKC4kIpH.js';
+import { D as DataPanel } from '../../../../data-panel-D3UfzCoE.js';
+import { T as TabList, a as Tabs } from '../../../../tabs-root-CJ3GkDzi.js';
+import { T as Tab } from '../../../../tabs-tab-CoSCf5Ku.js';
+import { T as TabContent } from '../../../../tabs-content-BeFlc4E_.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
-const threadRail = require('../../../../thread-rail-b-8RHNX_.cjs');
+const threadRail = require('../../../../thread-rail-BVpfkSyT.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceRail({ turns, className, railClassName, ...props }) {

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { useThreadTrace } from './thread-trace-context.es.js';
-import { T as ThreadRail } from '../../../../thread-rail-vsR5C0j4.js';
+import { T as ThreadRail } from '../../../../thread-rail-DV89nFnn.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceRail({ turns, className, railClassName, ...props }) {

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

@@ -11,7 +11,7 @@ const domains_traces_components_formatHierarchicalSpans = require('../format-hie
 const domains_traces_components_traceSpanTree = require('../trace-span-tree.cjs.js');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const Button = require('../../../../Button-CVewl8nT.cjs');
+const Button = require('../../../../Button-C0DBEBcJ.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceSpans({ className, timelineClassName, ...props }) {
@@ -58,7 +58,7 @@ function ThreadTraceSpans({ className, timelineClassName, ...props }) {
               isLoading
             }
           ) }),
-          overflows && isClamped && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "from-sidebar via-sidebar/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
+          overflows && isClamped && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t from-sidebar via-sidebar/80 to-transparent pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
         ]
       }
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-spans.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"from-sidebar via-sidebar/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["useThreadTrace","useThreadTraceRow","useTraceSpans","useMemo","formatHierarchicalSpans","useExpandedSpanIds","jsxs","Fragment","cn","jsx","TraceSpanTree","Button","ChevronDown","ChevronUp"],"mappings":"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"}
+{"version":3,"file":"thread-trace-spans.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t from-sidebar via-sidebar/80 to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":["useThreadTrace","useThreadTraceRow","useTraceSpans","useMemo","formatHierarchicalSpans","useExpandedSpanIds","jsxs","Fragment","cn","jsx","TraceSpanTree","Button","ChevronDown","ChevronUp"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ import { formatHierarchicalSpans } from '../format-hierarchical-spans.es.js';
 import { TraceSpanTree } from '../trace-span-tree.es.js';
 import { useThreadTrace } from './thread-trace-context.es.js';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { B as Button } from '../../../../Button-cWcBEd-G.js';
+import { B as Button } from '../../../../Button-C9cvaVFG.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceSpans({ className, timelineClassName, ...props }) {
@@ -54,7 +54,7 @@ function ThreadTraceSpans({ className, timelineClassName, ...props }) {
               isLoading
             }
           ) }),
-          overflows && isClamped && /* @__PURE__ */ jsx("div", { className: "from-sidebar via-sidebar/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2", children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
+          overflows && isClamped && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t from-sidebar via-sidebar/80 to-transparent pb-2", children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ChevronDown, {}), variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: "Show more" }) })
         ]
       }
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-spans.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"from-sidebar via-sidebar/80 absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAwBO,SAAS,iBAAiB,EAAE,SAAA,EAAW,iBAAA,EAAmB,GAAG,OAAM,EAA0B;AAClG,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,cAAA,EAAe;AACtC,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,MACE,iBAAA,EAAkB;AAGtB,EAAA,MAAM,EAAE,MAAM,SAAA,EAAU,GAAI,cAAc,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AACpE,EAAA,MAAM,iBAAA,GAAoB,OAAA,CAAQ,MAAM,uBAAA,CAAwB,IAAA,EAAM,KAAA,IAAS,EAAE,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAC1F,EAAA,MAAM,EAAE,eAAA,EAAiB,kBAAA,EAAmB,GAAI,mBAAmB,iBAAiB,CAAA;AAIpF,EAAA,MAAM,iBACJ,cAAA,KAAmB,IAAA,IAAQ,mBAAA,KAAwB,IAAA,GAAO,iBAAiB,mBAAA,GAAsB,IAAA;AACnG,EAAA,MAAM,SAAA,GAAY,cAAA,KAAmB,IAAA,IAAQ,cAAA,KAAmB,QAAQ,cAAA,GAAiB,cAAA;AACzF,EAAA,MAAM,SAAA,GAAY,aAAa,CAAC,UAAA;AAEhC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EAIE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,oBAAA;AAAA,QACV,SAAA,EAAW,EAAA,CAAG,0BAAA,EAA4B,SAAS,CAAA;AAAA,QACnD,KAAA,EAAO,CAAC,UAAA,IAAc,cAAA,KAAmB,OAAO,EAAE,SAAA,EAAW,gBAAe,GAAI,MAAA;AAAA,QAChF,aAAA,EAAY,oBAAA;AAAA,QACX,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAI,GAAA,EAAK,WAAA,EAAa,WAAW,EAAA,CAAG,gBAAA,EAAkB,iBAAiB,CAAA,EACtE,QAAA,kBAAA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,iBAAA;AAAA,cACA,cAAA;AAAA,cACA,eAAA;AAAA,cACA,YAAA;AAAA,cACA,aAAa,CAAA,EAAA,KAAM,UAAA,CAAW,SAAS,cAAA,KAAmB,EAAA,GAAK,SAAY,EAAE,CAAA;AAAA,cAC7E,eAAA;AAAA,cACA,kBAAA;AAAA,cACA;AAAA;AAAA,WACF,EACF,CAAA;AAAA,UACC,SAAA,IAAa,6BACZ,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+HAAA,EACb,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,kBAAM,GAAA,CAAC,WAAA,EAAA,EAAY,GAAI,OAAA,EAAQ,OAAA,EAAQ,MAAK,IAAA,EAAK,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,CAAA,EAAG,QAAA,EAAA,WAAA,EAE3F,CAAA,EACF;AAAA;AAAA;AAAA,KAEJ;AAAA,IAEC,SAAA,IAAa,CAAC,SAAA,IAAa,CAAC,QAAA,wBAC1B,KAAA,EAAA,EAAI,SAAA,EAAU,0BAAA,EACb,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,sBAAO,SAAA,EAAA,EAAU,CAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,OAAA,EAAS,MAAM,WAAA,CAAY,KAAK,CAAA,EAAG,QAAA,EAAA,WAAA,EAE1F,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-spans.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-spans.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useExpandedSpanIds } from '../../hooks/use-expanded-span-ids';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { formatHierarchicalSpans } from '../format-hierarchical-spans';\nimport { TraceSpanTree } from '../trace-span-tree';\nimport { useThreadTrace } from './thread-trace-context';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Button } from '@/ds/components/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpansProps extends Omit<ComponentProps<'div'>, 'children'> {\n  /** Class name of the measured wrapper around the timeline. */\n  timelineClassName?: string;\n}\n\n/**\n * The span tree of a row, clamped to the messages column while the row is collapsed with a\n * \"Show more\" control (and \"Show less\" once expanded, hidden while a span of the row is open).\n * Clamping needs the measured heights from `ThreadTrace.Messages` and `ThreadTrace.DetailsHeader`;\n * without them the timeline is shown in full.\n */\nexport function ThreadTraceSpans({ className, timelineClassName, ...props }: ThreadTraceSpansProps) {\n  const { selectSpan } = useThreadTrace();\n  const {\n    traceId,\n    isActive,\n    isExpanded,\n    selectedSpanId,\n    featuredSpanIds,\n    revealSpanId,\n    setExpanded,\n    timelineRef,\n    messagesHeight,\n    timelineHeight,\n    detailsHeaderHeight,\n  } = useThreadTraceRow();\n\n  // Passive: deduped with the (non-passive) fetch inside the consumer's messages slot and the side panel.\n  const { data, isLoading } = useTraceSpans(traceId, { passive: true });\n  const hierarchicalSpans = useMemo(() => formatHierarchicalSpans(data?.spans ?? []), [data]);\n  const { expandedSpanIds, setExpandedSpanIds } = useExpandedSpanIds(hierarchicalSpans);\n\n  // The tab header sits above the timeline, so the timeline budget is what's left of the\n  // messages height once the header is taken out — otherwise the right cell overshoots the left.\n  const timelineBudget =\n    messagesHeight !== null && detailsHeaderHeight !== null ? messagesHeight - detailsHeaderHeight : null;\n  const overflows = timelineBudget !== null && timelineHeight !== null && timelineHeight > timelineBudget;\n  const isClamped = overflows && !isExpanded;\n\n  return (\n    <>\n      {/* The clamp is applied whenever the row is collapsed, not only once `overflows` is known:\n          the measurement lags a frame on mount, which would otherwise let the cell grow and\n          snap back. A short timeline ignores it anyway. */}\n      <div\n        data-slot=\"thread-trace-spans\"\n        className={cn('relative overflow-hidden', className)}\n        style={!isExpanded && timelineBudget !== null ? { maxHeight: timelineBudget } : undefined}\n        data-testid=\"trace-row-timeline\"\n        {...props}\n      >\n        <div ref={timelineRef} className={cn('px-4 pt-2 pb-4', timelineClassName)}>\n          <TraceSpanTree\n            hierarchicalSpans={hierarchicalSpans}\n            selectedSpanId={selectedSpanId}\n            featuredSpanIds={featuredSpanIds}\n            revealSpanId={revealSpanId}\n            onSpanClick={id => selectSpan(traceId, selectedSpanId === id ? undefined : id)}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n            isLoading={isLoading}\n          />\n        </div>\n        {overflows && isClamped && (\n          <div className=\"absolute inset-x-0 bottom-0 flex h-20 items-end justify-center bg-linear-to-t from-sidebar via-sidebar/80 to-transparent pb-2\">\n            <Button icon={<ChevronDown />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(true)}>\n              Show more\n            </Button>\n          </div>\n        )}\n      </div>\n      {/* Collapsing would hide the selected span, so the control waits until the panel closes. */}\n      {overflows && !isClamped && !isActive && (\n        <div className=\"flex justify-center py-2\">\n          <Button icon={<ChevronUp />} variant=\"ghost\" size=\"sm\" onClick={() => setExpanded(false)}>\n            Show less\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -40,7 +40,7 @@ function TimelineNameCol({
       "aria-selected": isSelected,
       onClick: () => onSpanClick?.(span.id),
       className: utils_cn.cn("flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle", {
-        "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
+        "opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60": isFaded,
         "bg-fill-hover": isSelected
       }),
       style: { paddingLeft: `${depth * 1}rem` },
@@ -75,7 +75,7 @@ function TimelineNameCol({
                     children: span.name
                   }
                 ),
-                meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-muted-foreground shrink-0 lg:tabular-nums", children: meta })
+                meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-meta text-muted-foreground lg: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 { 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 [&:hover]:opacity-70 dark:opacity-30 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=\"text-meta text-muted-foreground shrink-0 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 { 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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"}

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

@@ -36,7 +36,7 @@ function TimelineNameCol({
       "aria-selected": isSelected,
       onClick: () => onSpanClick?.(span.id),
       className: cn("flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle", {
-        "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
+        "opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60": isFaded,
         "bg-fill-hover": isSelected
       }),
       style: { paddingLeft: `${depth * 1}rem` },
@@ -71,7 +71,7 @@ function TimelineNameCol({
                     children: span.name
                   }
                 ),
-                meta && /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground shrink-0 lg:tabular-nums", children: meta })
+                meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-meta text-muted-foreground lg:tabular-nums", children: meta })
               ] })
             ]
           }