@mastra/playground-ui 58.1.0-alpha.0 → 59.0.0

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

@@ -9,11 +9,10 @@ const domains_traces_utils_spanTiming = require('../utils/span-timing.cjs.js');
 const domains_traces_components_spanTimingHoverCard = require('./span-timing-hover-card.cjs.js');
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
 const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
+const Txt = require('../../../Txt-DPmEpNbp.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const utils_duration = require('../../../utils/duration.cjs.js');
 
-function formatDuration(ms) {
-  return ms < 1e3 ? `${Math.round(ms)} ms` : `${(ms / 1e3).toFixed(2)} s`;
-}
 function SpanTimelineRow({ ctx }) {
   const {
     span,
@@ -124,7 +123,7 @@ function SpanTimelineRow({ ctx }) {
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 text-right text-meta text-muted-foreground tabular-nums", children: formatDuration(span.latency) })
+                /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "div", variant: "meta", tone: "muted", font: "mono", className: "w-12 text-right", children: utils_duration.formatDurationPrecise(span.latency) })
               ]
             }
           ),

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

@@ -1 +1 @@
-{"version":3,"file":"span-timeline-row.cjs.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":["useRef","useEffect","getSpanTimingLayout","jsxs","cn","jsx","TimelineStructureSign","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","SpanTimingHoverCard"],"mappings":"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"}
+{"version":3,"file":"span-timeline-row.cjs.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 { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n  ctx: SpanRowContext;\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          <Txt as=\"div\" variant=\"meta\" tone=\"muted\" font=\"mono\" className=\"w-12 text-right\">\n            {formatDurationPrecise(span.latency)}\n          </Txt>\n        </HoverCardTrigger>\n        <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n      </HoverCard>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","getSpanTimingLayout","jsxs","cn","jsx","TimelineStructureSign","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","Txt","formatDurationPrecise","SpanTimingHoverCard"],"mappings":"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"}

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

@@ -5,11 +5,10 @@ import { getSpanTimingLayout } from '../utils/span-timing.es.js';
 import { SpanTimingHoverCard } from './span-timing-hover-card.es.js';
 import { TimelineStructureSign } from './timeline-structure-sign.es.js';
 import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-B1-n3amu.js';
+import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
+import { formatDurationPrecise } from '../../../utils/duration.es.js';
 
-function formatDuration(ms) {
-  return ms < 1e3 ? `${Math.round(ms)} ms` : `${(ms / 1e3).toFixed(2)} s`;
-}
 function SpanTimelineRow({ ctx }) {
   const {
     span,
@@ -120,7 +119,7 @@ function SpanTimelineRow({ ctx }) {
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsx("div", { className: "w-12 text-right text-meta text-muted-foreground tabular-nums", children: formatDuration(span.latency) })
+                /* @__PURE__ */ jsx(Txt, { as: "div", variant: "meta", tone: "muted", font: "mono", className: "w-12 text-right", children: formatDurationPrecise(span.latency) })
               ]
             }
           ),

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 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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"}
+{"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 { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type SpanTimelineRowProps = {\n  ctx: SpanRowContext;\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          <Txt as=\"div\" variant=\"meta\" tone=\"muted\" font=\"mono\" className=\"w-12 text-right\">\n            {formatDurationPrecise(span.latency)}\n          </Txt>\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

@@ -3,29 +3,24 @@
 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-CMJ9zHKm.cjs');
 const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const utils_dateFormat = require('../../../utils/date-format.cjs.js');
+const utils_duration = require('../../../utils/duration.cjs.js');
 
 function SpanTimingHoverCard({ span, startShiftMs }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(hoverCard.HoverCardContent, { className: "pr-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("mt-1 mb-2 flex items-center gap-2 text-caption"), children: "Span Timing" }),
     /* @__PURE__ */ jsxRuntime.jsxs(dataKeysAndValues.DataKeysAndValues, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Latency" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(dataKeysAndValues.DataKeysAndValues.Value, { children: [
-        span.latency,
-        " ms"
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: utils_duration.formatDurationPrecise(span.latency) ?? "-" }),
       /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Started at" }),
-      /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: span.startTime ? format.format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-" }),
+      /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: utils_dateFormat.formatTimestampPrecise(span.startTime) ?? "-" }),
       /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Ended at" }),
-      /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: span.endTime ? format.format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-" }),
+      /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: utils_dateFormat.formatTimestampPrecise(span.endTime) ?? "-" }),
       /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Key, { children: "Start Shift" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(dataKeysAndValues.DataKeysAndValues.Value, { children: [
-        startShiftMs,
-        "ms"
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(dataKeysAndValues.DataKeysAndValues.Value, { children: utils_duration.formatDurationPrecise(startShiftMs) ?? "-" })
     ] })
   ] });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"span-timing-hover-card.cjs.js","sources":["../../../../src/domains/traces/components/span-timing-hover-card.tsx"],"sourcesContent":["import { format } from 'date-fns/format';\nimport type { UISpan } from '../types';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { HoverCardContent } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\ntype SpanTimingHoverCardProps = {\n  span: UISpan;\n  startShiftMs: number;\n};\n\nexport function SpanTimingHoverCard({ span, startShiftMs }: SpanTimingHoverCardProps) {\n  return (\n    <HoverCardContent className=\"pr-6\">\n      <div className={cn('mt-1 mb-2 flex items-center gap-2 text-caption')}>Span Timing</div>\n      <DataKeysAndValues>\n        <DataKeysAndValues.Key>Latency</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{span.latency} ms</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Started at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>\n          {span.startTime ? format(new Date(span.startTime), 'hh:mm:ss:SSS a') : '-'}\n        </DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Ended at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>\n          {span.endTime ? format(new Date(span.endTime), 'hh:mm:ss:SSS a') : '-'}\n        </DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Start Shift</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{startShiftMs}ms</DataKeysAndValues.Value>\n      </DataKeysAndValues>\n    </HoverCardContent>\n  );\n}\n"],"names":["jsxs","HoverCardContent","jsx","cn","DataKeysAndValues","format"],"mappings":";;;;;;;;;;AAWO,SAAS,mBAAA,CAAoB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA6B;AACpF,EAAA,uBACEA,eAAA,CAACC,0BAAA,EAAA,EAAiB,SAAA,EAAU,MAAA,EAC1B,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,WAAA,CAAG,gDAAgD,GAAG,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,oCAChFC,mCAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC9BJ,eAAA,CAACI,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,OAAA;AAAA,QAAQ;AAAA,OAAA,EAAG,CAAA;AAAA,sBAC1CF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,sBACjCF,cAAA,CAACE,mCAAA,CAAkB,KAAA,EAAlB,EACE,eAAK,SAAA,GAAYC,aAAA,CAAO,IAAI,IAAA,CAAK,IAAA,CAAK,SAAS,CAAA,EAAG,gBAAgB,IAAI,GAAA,EACzE,CAAA;AAAA,sBACAH,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,sBAC/BF,cAAA,CAACE,mCAAA,CAAkB,KAAA,EAAlB,EACE,eAAK,OAAA,GAAUC,aAAA,CAAO,IAAI,IAAA,CAAK,IAAA,CAAK,OAAO,CAAA,EAAG,gBAAgB,IAAI,GAAA,EACrE,CAAA;AAAA,sBACAH,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,sBAClCJ,eAAA,CAACI,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QAAa;AAAA,OAAA,EAAE;AAAA,KAAA,EAC3C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"span-timing-hover-card.cjs.js","sources":["../../../../src/domains/traces/components/span-timing-hover-card.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { HoverCardContent } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype SpanTimingHoverCardProps = {\n  span: UISpan;\n  startShiftMs: number;\n};\n\nexport function SpanTimingHoverCard({ span, startShiftMs }: SpanTimingHoverCardProps) {\n  return (\n    <HoverCardContent className=\"pr-6\">\n      <div className={cn('mt-1 mb-2 flex items-center gap-2 text-caption')}>Span Timing</div>\n      <DataKeysAndValues>\n        <DataKeysAndValues.Key>Latency</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(span.latency) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Started at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.startTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Ended at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.endTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Start Shift</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(startShiftMs) ?? '-'}</DataKeysAndValues.Value>\n      </DataKeysAndValues>\n    </HoverCardContent>\n  );\n}\n"],"names":["jsxs","HoverCardContent","jsx","cn","DataKeysAndValues","formatDurationPrecise"],"mappings":";;;;;;;;;;;AAYO,SAAS,mBAAA,CAAoB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA6B;AACpF,EAAA,uBACEA,eAAA,CAACC,0BAAA,EAAA,EAAiB,SAAA,EAAU,MAAA,EAC1B,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,WAAA,CAAG,gDAAgD,GAAG,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,oCAChFC,mCAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC9BF,cAAA,CAACE,oCAAkB,KAAA,EAAlB,EAAyB,+CAAsB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACrEF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,sBACjCF,cAAA,CAACE,oCAAkB,KAAA,EAAlB,EAAyB,kDAAuB,IAAA,CAAK,SAAS,KAAK,GAAA,EAAI,CAAA;AAAA,sBACxEF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,sBAC/BF,cAAA,CAACE,oCAAkB,KAAA,EAAlB,EAAyB,kDAAuB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACtEF,cAAA,CAACE,mCAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,qCACjCA,mCAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAAC,oCAAA,CAAsB,YAAY,KAAK,GAAA,EAAI;AAAA,KAAA,EACvE;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,27 +1,22 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { format } from 'date-fns/format';
 import { D as DataKeysAndValues } from '../../../data-keys-and-values-BTYDB-K2.js';
 import { a as HoverCardContent } from '../../../hover-card-B1-n3amu.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
+import { formatTimestampPrecise } from '../../../utils/date-format.es.js';
+import { formatDurationPrecise } from '../../../utils/duration.es.js';
 
 function SpanTimingHoverCard({ span, startShiftMs }) {
   return /* @__PURE__ */ jsxs(HoverCardContent, { className: "pr-6", children: [
     /* @__PURE__ */ jsx("div", { className: cn("mt-1 mb-2 flex items-center gap-2 text-caption"), children: "Span Timing" }),
     /* @__PURE__ */ jsxs(DataKeysAndValues, { children: [
       /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Latency" }),
-      /* @__PURE__ */ jsxs(DataKeysAndValues.Value, { children: [
-        span.latency,
-        " ms"
-      ] }),
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: formatDurationPrecise(span.latency) ?? "-" }),
       /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Started at" }),
-      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.startTime ? format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-" }),
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: formatTimestampPrecise(span.startTime) ?? "-" }),
       /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Ended at" }),
-      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: span.endTime ? format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-" }),
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: formatTimestampPrecise(span.endTime) ?? "-" }),
       /* @__PURE__ */ jsx(DataKeysAndValues.Key, { children: "Start Shift" }),
-      /* @__PURE__ */ jsxs(DataKeysAndValues.Value, { children: [
-        startShiftMs,
-        "ms"
-      ] })
+      /* @__PURE__ */ jsx(DataKeysAndValues.Value, { children: formatDurationPrecise(startShiftMs) ?? "-" })
     ] })
   ] });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"span-timing-hover-card.es.js","sources":["../../../../src/domains/traces/components/span-timing-hover-card.tsx"],"sourcesContent":["import { format } from 'date-fns/format';\nimport type { UISpan } from '../types';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { HoverCardContent } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\ntype SpanTimingHoverCardProps = {\n  span: UISpan;\n  startShiftMs: number;\n};\n\nexport function SpanTimingHoverCard({ span, startShiftMs }: SpanTimingHoverCardProps) {\n  return (\n    <HoverCardContent className=\"pr-6\">\n      <div className={cn('mt-1 mb-2 flex items-center gap-2 text-caption')}>Span Timing</div>\n      <DataKeysAndValues>\n        <DataKeysAndValues.Key>Latency</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{span.latency} ms</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Started at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>\n          {span.startTime ? format(new Date(span.startTime), 'hh:mm:ss:SSS a') : '-'}\n        </DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Ended at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>\n          {span.endTime ? format(new Date(span.endTime), 'hh:mm:ss:SSS a') : '-'}\n        </DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Start Shift</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{startShiftMs}ms</DataKeysAndValues.Value>\n      </DataKeysAndValues>\n    </HoverCardContent>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAWO,SAAS,mBAAA,CAAoB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA6B;AACpF,EAAA,uBACE,IAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAU,MAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,gDAAgD,GAAG,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,yBAChF,iBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC9B,IAAA,CAAC,iBAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,OAAA;AAAA,QAAQ;AAAA,OAAA,EAAG,CAAA;AAAA,sBAC1C,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,sBACjC,GAAA,CAAC,iBAAA,CAAkB,KAAA,EAAlB,EACE,eAAK,SAAA,GAAY,MAAA,CAAO,IAAI,IAAA,CAAK,IAAA,CAAK,SAAS,CAAA,EAAG,gBAAgB,IAAI,GAAA,EACzE,CAAA;AAAA,sBACA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,sBAC/B,GAAA,CAAC,iBAAA,CAAkB,KAAA,EAAlB,EACE,eAAK,OAAA,GAAU,MAAA,CAAO,IAAI,IAAA,CAAK,IAAA,CAAK,OAAO,CAAA,EAAG,gBAAgB,IAAI,GAAA,EACrE,CAAA;AAAA,sBACA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,sBAClC,IAAA,CAAC,iBAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QAAa;AAAA,OAAA,EAAE;AAAA,KAAA,EAC3C;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"span-timing-hover-card.es.js","sources":["../../../../src/domains/traces/components/span-timing-hover-card.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { DataKeysAndValues } from '@/ds/components/DataKeysAndValues';\nimport { HoverCardContent } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\nimport { formatTimestampPrecise } from '@/utils/date-format';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype SpanTimingHoverCardProps = {\n  span: UISpan;\n  startShiftMs: number;\n};\n\nexport function SpanTimingHoverCard({ span, startShiftMs }: SpanTimingHoverCardProps) {\n  return (\n    <HoverCardContent className=\"pr-6\">\n      <div className={cn('mt-1 mb-2 flex items-center gap-2 text-caption')}>Span Timing</div>\n      <DataKeysAndValues>\n        <DataKeysAndValues.Key>Latency</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(span.latency) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Started at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.startTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Ended at</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatTimestampPrecise(span.endTime) ?? '-'}</DataKeysAndValues.Value>\n        <DataKeysAndValues.Key>Start Shift</DataKeysAndValues.Key>\n        <DataKeysAndValues.Value>{formatDurationPrecise(startShiftMs) ?? '-'}</DataKeysAndValues.Value>\n      </DataKeysAndValues>\n    </HoverCardContent>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAYO,SAAS,mBAAA,CAAoB,EAAE,IAAA,EAAM,YAAA,EAAa,EAA6B;AACpF,EAAA,uBACE,IAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAU,MAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,gDAAgD,GAAG,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,yBAChF,iBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC9B,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAyB,gCAAsB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACrE,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,sBACjC,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAyB,iCAAuB,IAAA,CAAK,SAAS,KAAK,GAAA,EAAI,CAAA;AAAA,sBACxE,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,sBAC/B,GAAA,CAAC,kBAAkB,KAAA,EAAlB,EAAyB,iCAAuB,IAAA,CAAK,OAAO,KAAK,GAAA,EAAI,CAAA;AAAA,sBACtE,GAAA,CAAC,iBAAA,CAAkB,GAAA,EAAlB,EAAsB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,0BACjC,iBAAA,CAAkB,KAAA,EAAlB,EAAyB,QAAA,EAAA,qBAAA,CAAsB,YAAY,KAAK,GAAA,EAAI;AAAA,KAAA,EACvE;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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-XPXrhYJI.cjs');
+const dataPanel = require('../../../../data-panel-C_BqhzeL.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceDetails({ className, children, ...props }) {

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-BQVTKo86.js';
+import { D as DataPanel } from '../../../../data-panel-BWgExbHs.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceDetails({ className, children, ...props }) {

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

@@ -5,7 +5,7 @@ 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-XPXrhYJI.cjs');
+const dataPanel = require('../../../../data-panel-C_BqhzeL.cjs');
 const tabsRoot = require('../../../../tabs-root-COCL6jcx.cjs');
 const tabsTab = require('../../../../tabs-tab-DFmRMdi3.cjs');
 const tabsContent = require('../../../../tabs-content-DlCJoQUW.cjs');

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

@@ -1,7 +1,7 @@
 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-BQVTKo86.js';
+import { D as DataPanel } from '../../../../data-panel-BWgExbHs.js';
 import { T as TabList, a as Tabs } from '../../../../tabs-root-UNPxoGhW.js';
 import { T as Tab } from '../../../../tabs-tab-DluwCnDF.js';
 import { T as TabContent } from '../../../../tabs-content-7ODUUdQ0.js';

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

@@ -6,7 +6,9 @@ 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 utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const utils_duration = require('../../../utils/duration.cjs.js');
 
 function TimelineTimingCol({
   span,
@@ -43,10 +45,7 @@ function TimelineTimingCol({
               }
             }
           ) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex justify-end text-meta text-muted-foreground"), children: [
-            (span.latency / 1e3).toFixed(3),
-            " s"
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex justify-end text-meta text-muted-foreground"), children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", font: "mono", children: utils_duration.formatDurationPrecise(span.latency) }) })
         ]
       }
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"timeline-timing-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-timing-col.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\ntype TimelineTimingColProps = {\n  span: UISpan;\n  selectedSpanId?: string;\n  isFaded?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  color?: string;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TimelineTimingCol({\n  span,\n  selectedSpanId,\n  isFaded,\n  overallLatency,\n  overallStartTime,\n  color,\n  chartWidth = 'default',\n}: TimelineTimingColProps) {\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        className={cn(\n          'grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2',\n          chartWidth === 'wide' ? 'min-w-72' : 'min-w-32',\n          '[&:hover>div]:bg-fill',\n          {\n            'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n            'bg-fill-hover': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className={cn('w-full rounded-md bg-muted p-1.5')}>\n          <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n            <div\n              className={cn('absolute top-0 h-1.5 rounded-sm bg-placeholder')}\n              style={{\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                left: `${leftPercent}%`,\n                backgroundColor: color,\n              }}\n            ></div>\n          </div>\n        </div>\n\n        <div className={cn('flex justify-end text-meta text-muted-foreground')}>\n          {(span.latency / 1000).toFixed(3)}&nbsp;s\n        </div>\n      </HoverCardTrigger>\n      <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n    </HoverCard>\n  );\n}\n"],"names":["getSpanTimingLayout","HoverCard","jsxs","HoverCardTrigger","cn","jsx","SpanTimingHoverCard"],"mappings":";;;;;;;;;;AAgBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAA2B;AACzB,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiBA,mDAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAE9G,EAAA,uCACGC,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA;AAAA,MAACC,0BAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,oFAAA;AAAA,UACA,UAAA,KAAe,SAAS,UAAA,GAAa,UAAA;AAAA,UACrC,uBAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,eAAA,EAAiB,mBAAmB,IAAA,CAAK;AAAA;AAC3C,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAWD,WAAA,CAAG,kCAAkC,GACnD,QAAA,kBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,YAAG,gDAAgD,CAAA;AAAA,cAC9D,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,gBAC3C,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,gBACpB,eAAA,EAAiB;AAAA;AACnB;AAAA,aAEJ,CAAA,EACF,CAAA;AAAA,0BAEAF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWE,WAAA,CAAG,kDAAkD,CAAA,EACjE,QAAA,EAAA;AAAA,YAAA,CAAA,IAAA,CAAK,OAAA,GAAU,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,YAAE;AAAA,WAAA,EACpC;AAAA;AAAA;AAAA,KACF;AAAA,oBACAC,cAAA,CAACC,iEAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,GAAA,EAC/D,CAAA;AAEJ;;;;"}
+{"version":3,"file":"timeline-timing-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-timing-col.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype TimelineTimingColProps = {\n  span: UISpan;\n  selectedSpanId?: string;\n  isFaded?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  color?: string;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TimelineTimingCol({\n  span,\n  selectedSpanId,\n  isFaded,\n  overallLatency,\n  overallStartTime,\n  color,\n  chartWidth = 'default',\n}: TimelineTimingColProps) {\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        className={cn(\n          'grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2',\n          chartWidth === 'wide' ? 'min-w-72' : 'min-w-32',\n          '[&:hover>div]:bg-fill',\n          {\n            'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n            'bg-fill-hover': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className={cn('w-full rounded-md bg-muted p-1.5')}>\n          <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n            <div\n              className={cn('absolute top-0 h-1.5 rounded-sm bg-placeholder')}\n              style={{\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                left: `${leftPercent}%`,\n                backgroundColor: color,\n              }}\n            ></div>\n          </div>\n        </div>\n\n        <div className={cn('flex justify-end text-meta text-muted-foreground')}>\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n            {formatDurationPrecise(span.latency)}\n          </Txt>\n        </div>\n      </HoverCardTrigger>\n      <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n    </HoverCard>\n  );\n}\n"],"names":["getSpanTimingLayout","HoverCard","jsxs","HoverCardTrigger","cn","jsx","Txt","SpanTimingHoverCard"],"mappings":";;;;;;;;;;;;AAkBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAA2B;AACzB,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiBA,mDAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAE9G,EAAA,uCACGC,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,eAAA;AAAA,MAACC,0BAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,oFAAA;AAAA,UACA,UAAA,KAAe,SAAS,UAAA,GAAa,UAAA;AAAA,UACrC,uBAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,eAAA,EAAiB,mBAAmB,IAAA,CAAK;AAAA;AAC3C,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAWD,WAAA,CAAG,kCAAkC,GACnD,QAAA,kBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,YAAG,gDAAgD,CAAA;AAAA,cAC9D,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,gBAC3C,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,gBACpB,eAAA,EAAiB;AAAA;AACnB;AAAA,aAEJ,CAAA,EACF,CAAA;AAAA,yCAEC,KAAA,EAAA,EAAI,SAAA,EAAWA,YAAG,kDAAkD,CAAA,EACnE,yCAACE,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,QAAO,IAAA,EAAK,MAAA,EAChC,+CAAsB,IAAA,CAAK,OAAO,GACrC,CAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,oBACAD,cAAA,CAACE,iEAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,GAAA,EAC/D,CAAA;AAEJ;;;;"}

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

@@ -2,7 +2,9 @@ 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 { c as cn } from '../../../cn-65Adrsfj.js';
+import { formatDurationPrecise } from '../../../utils/duration.es.js';
 
 function TimelineTimingCol({
   span,
@@ -39,10 +41,7 @@ function TimelineTimingCol({
               }
             }
           ) }) }),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex justify-end text-meta text-muted-foreground"), children: [
-            (span.latency / 1e3).toFixed(3),
-            " s"
-          ] })
+          /* @__PURE__ */ jsx("div", { className: cn("flex justify-end text-meta text-muted-foreground"), children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", font: "mono", children: formatDurationPrecise(span.latency) }) })
         ]
       }
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"timeline-timing-col.es.js","sources":["../../../../src/domains/traces/components/timeline-timing-col.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\ntype TimelineTimingColProps = {\n  span: UISpan;\n  selectedSpanId?: string;\n  isFaded?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  color?: string;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TimelineTimingCol({\n  span,\n  selectedSpanId,\n  isFaded,\n  overallLatency,\n  overallStartTime,\n  color,\n  chartWidth = 'default',\n}: TimelineTimingColProps) {\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        className={cn(\n          'grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2',\n          chartWidth === 'wide' ? 'min-w-72' : 'min-w-32',\n          '[&:hover>div]:bg-fill',\n          {\n            'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n            'bg-fill-hover': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className={cn('w-full rounded-md bg-muted p-1.5')}>\n          <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n            <div\n              className={cn('absolute top-0 h-1.5 rounded-sm bg-placeholder')}\n              style={{\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                left: `${leftPercent}%`,\n                backgroundColor: color,\n              }}\n            ></div>\n          </div>\n        </div>\n\n        <div className={cn('flex justify-end text-meta text-muted-foreground')}>\n          {(span.latency / 1000).toFixed(3)}&nbsp;s\n        </div>\n      </HoverCardTrigger>\n      <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAgBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAA2B;AACzB,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiB,mBAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAE9G,EAAA,4BACG,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,oFAAA;AAAA,UACA,UAAA,KAAe,SAAS,UAAA,GAAa,UAAA;AAAA,UACrC,uBAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,eAAA,EAAiB,mBAAmB,IAAA,CAAK;AAAA;AAC3C,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,kCAAkC,GACnD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,gDAAgD,CAAA;AAAA,cAC9D,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,gBAC3C,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,gBACpB,eAAA,EAAiB;AAAA;AACnB;AAAA,aAEJ,CAAA,EACF,CAAA;AAAA,0BAEA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,kDAAkD,CAAA,EACjE,QAAA,EAAA;AAAA,YAAA,CAAA,IAAA,CAAK,OAAA,GAAU,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,YAAE;AAAA,WAAA,EACpC;AAAA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,mBAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,GAAA,EAC/D,CAAA;AAEJ;;;;"}
+{"version":3,"file":"timeline-timing-col.es.js","sources":["../../../../src/domains/traces/components/timeline-timing-col.tsx"],"sourcesContent":["import type { UISpan } from '../types';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\ntype TimelineTimingColProps = {\n  span: UISpan;\n  selectedSpanId?: string;\n  isFaded?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  color?: string;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TimelineTimingCol({\n  span,\n  selectedSpanId,\n  isFaded,\n  overallLatency,\n  overallStartTime,\n  color,\n  chartWidth = 'default',\n}: TimelineTimingColProps) {\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n\n  return (\n    <HoverCard>\n      <HoverCardTrigger\n        className={cn(\n          'grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2',\n          chartWidth === 'wide' ? 'min-w-72' : 'min-w-32',\n          '[&:hover>div]:bg-fill',\n          {\n            'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n            'bg-fill-hover': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className={cn('w-full rounded-md bg-muted p-1.5')}>\n          <div className=\"relative h-1.5 w-full overflow-hidden rounded-sm\">\n            <div\n              className={cn('absolute top-0 h-1.5 rounded-sm bg-placeholder')}\n              style={{\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                left: `${leftPercent}%`,\n                backgroundColor: color,\n              }}\n            ></div>\n          </div>\n        </div>\n\n        <div className={cn('flex justify-end text-meta text-muted-foreground')}>\n          <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n            {formatDurationPrecise(span.latency)}\n          </Txt>\n        </div>\n      </HoverCardTrigger>\n      <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n    </HoverCard>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAkBO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA,GAAa;AACf,CAAA,EAA2B;AACzB,EAAA,MAAM,EAAE,cAAc,WAAA,EAAa,YAAA,KAAiB,mBAAA,CAAoB,IAAA,EAAM,gBAAgB,gBAAgB,CAAA;AAE9G,EAAA,4BACG,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,oFAAA;AAAA,UACA,UAAA,KAAe,SAAS,UAAA,GAAa,UAAA;AAAA,UACrC,uBAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,eAAA,EAAiB,mBAAmB,IAAA,CAAK;AAAA;AAC3C,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,kCAAkC,GACnD,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,gDAAgD,CAAA;AAAA,cAC9D,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,YAAA,GAAe,CAAA,EAAG,YAAY,CAAA,CAAA,CAAA,GAAM,KAAA;AAAA,gBAC3C,IAAA,EAAM,GAAG,WAAW,CAAA,CAAA,CAAA;AAAA,gBACpB,eAAA,EAAiB;AAAA;AACnB;AAAA,aAEJ,CAAA,EACF,CAAA;AAAA,8BAEC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,kDAAkD,CAAA,EACnE,8BAAC,GAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,QAAO,IAAA,EAAK,MAAA,EAChC,gCAAsB,IAAA,CAAK,OAAO,GACrC,CAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,mBAAA,EAAA,EAAoB,IAAA,EAAY,YAAA,EAA4B;AAAA,GAAA,EAC/D,CAAA;AAEJ;;;;"}

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

@@ -7,11 +7,11 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
 const Button = require('../../../Button-BAMnPqos.cjs');
-const combobox = require('../../../combobox-BoSB-muq.cjs');
+const combobox = require('../../../combobox-B19HJqE-.cjs');
 require('@base-ui/react/combobox');
 const dialog = require('../../../dialog-Vvcjm0rZ.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
-const fieldErrorId = require('../../../field-error-id-6EfqmQ4C.cjs');
+const fieldErrorId = require('../../../field-error-id-V_WejsRL.cjs');
 
 const METADATA_KEY_FIELD_NAME = "trace-metadata-key";
 const EMPTY_KEYS = [];
@@ -31,6 +31,7 @@ function TraceColumnsMenu({
   preferences,
   availableMetadataKeys = EMPTY_KEYS,
   usageDisabledReason,
+  withQueryTrace = true,
   onToggleColumn,
   onAddCustomColumn,
   onRemoveCustomColumn,
@@ -113,27 +114,29 @@ function TraceColumnsMenu({
             field
           );
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Label, { children: "Metadata columns" }),
-        preferences.metadataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
-          dropdownMenu.DropdownMenu.CheckboxItem,
-          {
-            checked: true,
-            title: key,
-            onCheckedChange: () => onRemoveMetadataColumn(key),
-            children: key
-          },
-          key
-        )),
-        /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => setIsMetadataDialogOpen(true), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { "aria-hidden": true }),
-          "Add metadata column"
+        (withQueryTrace || preferences.metadataKeys.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Label, { children: "Metadata columns" }),
+          preferences.metadataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+            dropdownMenu.DropdownMenu.CheckboxItem,
+            {
+              checked: true,
+              title: key,
+              onCheckedChange: () => onRemoveMetadataColumn(key),
+              children: key
+            },
+            key
+          )),
+          withQueryTrace && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => setIsMetadataDialogOpen(true), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { "aria-hidden": true }),
+            "Add metadata column"
+          ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Item, { onSelect: onReset, children: "Reset to defaults" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isMetadataDialogOpen, onOpenChange: handleDialogOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleAddMetadata, children: [
+    withQueryTrace && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isMetadataDialogOpen, onOpenChange: handleDialogOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleAddMetadata, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Add metadata column" }),
         /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Pick a top-level trace metadata key observed in the current time range, or type one. Only the key is saved, never its values." })

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

@@ -1 +1 @@
-{"version":3,"file":"trace-columns-menu.cjs.js","sources":["../../../../src/domains/traces/components/trace-columns-menu.tsx"],"sourcesContent":["import { Columns3Icon, PlusIcon, Columns3, X } from 'lucide-react';\nimport { useMemo, useState, type FormEvent } from 'react';\nimport { TRACE_CUSTOM_COLUMN_FIELDS, TRACE_CUSTOM_COLUMN_LABELS, TRACE_USAGE_COLUMNS } from '../trace-list-columns';\nimport type { TraceColumnPreferences, TraceCustomColumn, TraceOptionalColumn } from '../trace-list-columns';\nimport { Button } from '@/ds/components/Button';\nimport { Combobox } from '@/ds/components/Combobox';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { FieldBlock } from '@/ds/components/FormFieldBlocks';\n\nconst METADATA_KEY_FIELD_NAME = 'trace-metadata-key';\nconst EMPTY_KEYS: readonly string[] = [];\n\nconst STANDARD_COLUMNS: readonly TraceOptionalColumn[] = ['type', 'input', 'duration', 'endTime', 'environment'];\n\nconst COLUMN_LABELS: Record<TraceOptionalColumn, string> = {\n  type: 'Type',\n  input: 'Input',\n  duration: 'Duration',\n  endTime: 'End',\n  environment: 'Environment',\n  inputTokens: 'Input tokens',\n  outputTokens: 'Output tokens',\n  totalTokens: 'Total tokens',\n  estimatedCost: 'Estimated cost',\n};\n\ntype TraceColumnsMenuProps = {\n  preferences: TraceColumnPreferences;\n  /** Top-level metadata keys observed on traces in the current time range, offered in the picker. */\n  availableMetadataKeys?: readonly string[];\n  usageDisabledReason?: string;\n  onToggleColumn: (column: TraceOptionalColumn) => void;\n  onAddCustomColumn: (field: TraceCustomColumn) => void;\n  onRemoveCustomColumn: (field: TraceCustomColumn) => void;\n  onAddMetadataColumn: (key: string) => void;\n  onRemoveMetadataColumn: (key: string) => void;\n  onReset: () => void;\n};\n\nexport function TraceColumnsMenu({\n  preferences,\n  availableMetadataKeys = EMPTY_KEYS,\n  usageDisabledReason,\n  onToggleColumn,\n  onAddCustomColumn,\n  onRemoveCustomColumn,\n  onAddMetadataColumn,\n  onRemoveMetadataColumn,\n  onReset,\n}: TraceColumnsMenuProps) {\n  const [isMetadataDialogOpen, setIsMetadataDialogOpen] = useState(false);\n  const [metadataKey, setMetadataKey] = useState('');\n  const [metadataError, setMetadataError] = useState<string | undefined>();\n\n  // Keys already shown as columns are left out; a typed key that discovery\n  // hasn't seen is kept in the list so the trigger can display it once picked.\n  const metadataKeyOptions = useMemo(() => {\n    const keys = availableMetadataKeys.filter(key => !preferences.metadataKeys.includes(key));\n    if (metadataKey && !keys.includes(metadataKey)) keys.push(metadataKey);\n    return keys.map(key => ({ label: key, value: key }));\n  }, [availableMetadataKeys, preferences.metadataKeys, metadataKey]);\n\n  const handleDialogOpenChange = (open: boolean) => {\n    setIsMetadataDialogOpen(open);\n    if (!open) {\n      setMetadataKey('');\n      setMetadataError(undefined);\n    }\n  };\n\n  const handleAddMetadata = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const normalizedKey = metadataKey.trim();\n    if (!normalizedKey) {\n      setMetadataError('Enter a metadata key.');\n      return;\n    }\n    if (preferences.metadataKeys.includes(normalizedKey)) {\n      setMetadataError('That metadata column is already visible.');\n      return;\n    }\n\n    onAddMetadataColumn(normalizedKey);\n    handleDialogOpenChange(false);\n  };\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenu.Trigger\n          render={\n            <Button variant=\"ghost\" size=\"md\" icon={<Columns3Icon aria-hidden />}>\n              Columns\n            </Button>\n          }\n        />\n        <DropdownMenu.Content align=\"end\" className=\"min-w-56\">\n          <DropdownMenu.Label>Standard columns</DropdownMenu.Label>\n          {STANDARD_COLUMNS.map(column => (\n            <DropdownMenu.CheckboxItem\n              key={column}\n              checked={preferences.visibleColumns.includes(column)}\n              onCheckedChange={() => onToggleColumn(column)}\n            >\n              {COLUMN_LABELS[column]}\n            </DropdownMenu.CheckboxItem>\n          ))}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Usage columns</DropdownMenu.Label>\n          {TRACE_USAGE_COLUMNS.map(column => (\n            <DropdownMenu.CheckboxItem\n              key={column}\n              checked={preferences.visibleColumns.includes(column)}\n              disabled={Boolean(usageDisabledReason)}\n              onCheckedChange={() => onToggleColumn(column)}\n            >\n              {COLUMN_LABELS[column]}\n            </DropdownMenu.CheckboxItem>\n          ))}\n          {usageDisabledReason && (\n            <p className=\"px-2 py-1 text-meta text-placeholder\" role=\"note\">\n              {usageDisabledReason}\n            </p>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Custom columns</DropdownMenu.Label>\n          {TRACE_CUSTOM_COLUMN_FIELDS.map(field => {\n            const isVisible = preferences.customColumns.includes(field);\n            return (\n              <DropdownMenu.CheckboxItem\n                key={field}\n                checked={isVisible}\n                onCheckedChange={() => (isVisible ? onRemoveCustomColumn(field) : onAddCustomColumn(field))}\n              >\n                {TRACE_CUSTOM_COLUMN_LABELS[field]}\n              </DropdownMenu.CheckboxItem>\n            );\n          })}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Metadata columns</DropdownMenu.Label>\n          {preferences.metadataKeys.map(key => (\n            <DropdownMenu.CheckboxItem\n              key={key}\n              checked\n              title={key}\n              onCheckedChange={() => onRemoveMetadataColumn(key)}\n            >\n              {key}\n            </DropdownMenu.CheckboxItem>\n          ))}\n          <DropdownMenu.Item onSelect={() => setIsMetadataDialogOpen(true)}>\n            <PlusIcon aria-hidden />\n            Add metadata column\n          </DropdownMenu.Item>\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item onSelect={onReset}>Reset to defaults</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <Dialog open={isMetadataDialogOpen} onOpenChange={handleDialogOpenChange}>\n        <DialogContent>\n          <form onSubmit={handleAddMetadata}>\n            <DialogHeader>\n              <DialogTitle>Add metadata column</DialogTitle>\n              <DialogDescription>\n                Pick a top-level trace metadata key observed in the current time range, or type one. Only the key is\n                saved, never its values.\n              </DialogDescription>\n            </DialogHeader>\n            <DialogBody>\n              <FieldBlock.Column>\n                <FieldBlock.Label name={METADATA_KEY_FIELD_NAME}>Metadata key</FieldBlock.Label>\n                <Combobox\n                  id={`input-${METADATA_KEY_FIELD_NAME}`}\n                  name={METADATA_KEY_FIELD_NAME}\n                  options={metadataKeyOptions}\n                  value={metadataKey}\n                  onValueChange={key => {\n                    setMetadataKey(key);\n                    setMetadataError(undefined);\n                  }}\n                  allowCustomValue\n                  placeholder=\"Select a metadata key…\"\n                  searchPlaceholder=\"Search metadata keys…\"\n                  emptyText=\"No metadata keys observed. Type one to add it.\"\n                  error={metadataError}\n                />\n              </FieldBlock.Column>\n            </DialogBody>\n            <DialogFooter>\n              <Button icon={<X />} type=\"button\" onClick={() => handleDialogOpenChange(false)}>\n                Cancel\n              </Button>\n              <Button icon={<Columns3 />} type=\"submit\" variant=\"primary\">\n                Add column\n              </Button>\n            </DialogFooter>\n          </form>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"names":["useState","useMemo","jsxs","Fragment","DropdownMenu","jsx","Button","Columns3Icon","TRACE_USAGE_COLUMNS","TRACE_CUSTOM_COLUMN_FIELDS","PlusIcon","Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","FieldBlock","Combobox","DialogFooter","X","Columns3"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,uBAAA,GAA0B,oBAAA;AAChC,MAAM,aAAgC,EAAC;AAEvC,MAAM,mBAAmD,CAAC,MAAA,EAAQ,OAAA,EAAS,UAAA,EAAY,WAAW,aAAa,CAAA;AAE/G,MAAM,aAAA,GAAqD;AAAA,EACzD,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,OAAA;AAAA,EACP,QAAA,EAAU,UAAA;AAAA,EACV,OAAA,EAAS,KAAA;AAAA,EACT,WAAA,EAAa,aAAA;AAAA,EACb,WAAA,EAAa,cAAA;AAAA,EACb,YAAA,EAAc,eAAA;AAAA,EACd,WAAA,EAAa,cAAA;AAAA,EACb,aAAA,EAAe;AACjB,CAAA;AAeO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,WAAA;AAAA,EACA,qBAAA,GAAwB,UAAA;AAAA,EACxB,mBAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,oBAAA;AAAA,EACA,mBAAA;AAAA,EACA,sBAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAIA,eAAS,KAAK,CAAA;AACtE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAS,EAAE,CAAA;AACjD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,cAAA,EAA6B;AAIvE,EAAA,MAAM,kBAAA,GAAqBC,cAAQ,MAAM;AACvC,IAAA,MAAM,IAAA,GAAO,sBAAsB,MAAA,CAAO,CAAA,GAAA,KAAO,CAAC,WAAA,CAAY,YAAA,CAAa,QAAA,CAAS,GAAG,CAAC,CAAA;AACxF,IAAA,IAAI,WAAA,IAAe,CAAC,IAAA,CAAK,QAAA,CAAS,WAAW,CAAA,EAAG,IAAA,CAAK,KAAK,WAAW,CAAA;AACrE,IAAA,OAAO,IAAA,CAAK,IAAI,CAAA,GAAA,MAAQ,EAAE,OAAO,GAAA,EAAK,KAAA,EAAO,KAAI,CAAE,CAAA;AAAA,EACrD,GAAG,CAAC,qBAAA,EAAuB,WAAA,CAAY,YAAA,EAAc,WAAW,CAAC,CAAA;AAEjE,EAAA,MAAM,sBAAA,GAAyB,CAAC,IAAA,KAAkB;AAChD,IAAA,uBAAA,CAAwB,IAAI,CAAA;AAC5B,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,cAAA,CAAe,EAAE,CAAA;AACjB,MAAA,gBAAA,CAAiB,MAAS,CAAA;AAAA,IAC5B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAsC;AAC/D,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,MAAM,aAAA,GAAgB,YAAY,IAAA,EAAK;AACvC,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA,gBAAA,CAAiB,uBAAuB,CAAA;AACxC,MAAA;AAAA,IACF;AACA,IAAA,IAAI,WAAA,CAAY,YAAA,CAAa,QAAA,CAAS,aAAa,CAAA,EAAG;AACpD,MAAA,gBAAA,CAAiB,0CAA0C,CAAA;AAC3D,MAAA;AAAA,IACF;AAEA,IAAA,mBAAA,CAAoB,aAAa,CAAA;AACjC,IAAA,sBAAA,CAAuB,KAAK,CAAA;AAAA,EAC9B,CAAA;AAEA,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAACE,yBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAC,cAAA;AAAA,QAACD,yBAAA,CAAa,OAAA;AAAA,QAAb;AAAA,UACC,MAAA,kBACEC,cAAA,CAACC,aAAA,EAAA,EAAO,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,IAAA,kBAAMD,cAAA,CAACE,wBAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC,GAAI,QAAA,EAAA,SAAA,EAEtE;AAAA;AAAA,OAEJ;AAAA,sCACCH,yBAAA,CAAa,OAAA,EAAb,EAAqB,KAAA,EAAM,KAAA,EAAM,WAAU,UAAA,EAC1C,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACD,yBAAA,CAAa,KAAA,EAAb,EAAmB,QAAA,EAAA,kBAAA,EAAgB,CAAA;AAAA,QACnC,gBAAA,CAAiB,IAAI,CAAA,MAAA,qBACpBC,cAAA;AAAA,UAACD,yBAAA,CAAa,YAAA;AAAA,UAAb;AAAA,YAEC,OAAA,EAAS,WAAA,CAAY,cAAA,CAAe,QAAA,CAAS,MAAM,CAAA;AAAA,YACnD,eAAA,EAAiB,MAAM,cAAA,CAAe,MAAM,CAAA;AAAA,YAE3C,wBAAc,MAAM;AAAA,WAAA;AAAA,UAJhB;AAAA,SAMR,CAAA;AAAA,wBAEDC,cAAA,CAACD,yBAAA,CAAa,SAAA,EAAb,EAAuB,CAAA;AAAA,wBACxBC,cAAA,CAACD,yBAAA,CAAa,KAAA,EAAb,EAAmB,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,QAChCI,mDAAA,CAAoB,IAAI,CAAA,MAAA,qBACvBH,cAAA;AAAA,UAACD,yBAAA,CAAa,YAAA;AAAA,UAAb;AAAA,YAEC,OAAA,EAAS,WAAA,CAAY,cAAA,CAAe,QAAA,CAAS,MAAM,CAAA;AAAA,YACnD,QAAA,EAAU,QAAQ,mBAAmB,CAAA;AAAA,YACrC,eAAA,EAAiB,MAAM,cAAA,CAAe,MAAM,CAAA;AAAA,YAE3C,wBAAc,MAAM;AAAA,WAAA;AAAA,UALhB;AAAA,SAOR,CAAA;AAAA,QACA,uCACCC,cAAA,CAAC,GAAA,EAAA,EAAE,WAAU,sCAAA,EAAuC,IAAA,EAAK,QACtD,QAAA,EAAA,mBAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAACD,yBAAA,CAAa,SAAA,EAAb,EAAuB,CAAA;AAAA,wBACxBC,cAAA,CAACD,yBAAA,CAAa,KAAA,EAAb,EAAmB,QAAA,EAAA,gBAAA,EAAc,CAAA;AAAA,QACjCK,0DAAA,CAA2B,IAAI,CAAA,KAAA,KAAS;AACvC,UAAA,MAAM,SAAA,GAAY,WAAA,CAAY,aAAA,CAAc,QAAA,CAAS,KAAK,CAAA;AAC1D,UAAA,uBACEJ,cAAA;AAAA,YAACD,yBAAA,CAAa,YAAA;AAAA,YAAb;AAAA,cAEC,OAAA,EAAS,SAAA;AAAA,cACT,iBAAiB,MAAO,SAAA,GAAY,qBAAqB,KAAK,CAAA,GAAI,kBAAkB,KAAK,CAAA;AAAA,cAExF,qEAA2B,KAAK;AAAA,aAAA;AAAA,YAJ5B;AAAA,WAKP;AAAA,QAEJ,CAAC,CAAA;AAAA,wBAEDC,cAAA,CAACD,yBAAA,CAAa,SAAA,EAAb,EAAuB,CAAA;AAAA,wBACxBC,cAAA,CAACD,yBAAA,CAAa,KAAA,EAAb,EAAmB,QAAA,EAAA,kBAAA,EAAgB,CAAA;AAAA,QACnC,WAAA,CAAY,YAAA,CAAa,GAAA,CAAI,CAAA,GAAA,qBAC5BC,cAAA;AAAA,UAACD,yBAAA,CAAa,YAAA;AAAA,UAAb;AAAA,YAEC,OAAA,EAAO,IAAA;AAAA,YACP,KAAA,EAAO,GAAA;AAAA,YACP,eAAA,EAAiB,MAAM,sBAAA,CAAuB,GAAG,CAAA;AAAA,YAEhD,QAAA,EAAA;AAAA,WAAA;AAAA,UALI;AAAA,SAOR,CAAA;AAAA,wBACDF,eAAA,CAACE,0BAAa,IAAA,EAAb,EAAkB,UAAU,MAAM,uBAAA,CAAwB,IAAI,CAAA,EAC7D,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACK,oBAAA,EAAA,EAAS,eAAW,IAAA,EAAC,CAAA;AAAA,UAAE;AAAA,SAAA,EAE1B,CAAA;AAAA,wBAEAL,cAAA,CAACD,yBAAA,CAAa,SAAA,EAAb,EAAuB,CAAA;AAAA,uCACvBA,yBAAA,CAAa,IAAA,EAAb,EAAkB,QAAA,EAAU,SAAS,QAAA,EAAA,mBAAA,EAAiB;AAAA,OAAA,EACzD;AAAA,KAAA,EACF,CAAA;AAAA,oBAEAC,cAAA,CAACM,aAAA,EAAA,EAAO,IAAA,EAAM,oBAAA,EAAsB,YAAA,EAAc,sBAAA,EAChD,QAAA,kBAAAN,cAAA,CAACO,oBAAA,EAAA,EACC,QAAA,kBAAAV,eAAA,CAAC,MAAA,EAAA,EAAK,QAAA,EAAU,iBAAA,EACd,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAACW,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAR,cAAA,CAACS,sBAAY,QAAA,EAAA,qBAAA,EAAmB,CAAA;AAAA,wBAChCT,cAAA,CAACU,4BAAkB,QAAA,EAAA,+HAAA,EAGnB;AAAA,OAAA,EACF,CAAA;AAAA,sBACAV,cAAA,CAACW,iBAAA,EAAA,EACC,QAAA,kBAAAd,eAAA,CAACe,uBAAA,CAAW,QAAX,EACC,QAAA,EAAA;AAAA,wBAAAZ,cAAA,CAACY,uBAAA,CAAW,KAAA,EAAX,EAAiB,IAAA,EAAM,yBAAyB,QAAA,EAAA,cAAA,EAAY,CAAA;AAAA,wBAC7DZ,cAAA;AAAA,UAACa,iBAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,SAAS,uBAAuB,CAAA,CAAA;AAAA,YACpC,IAAA,EAAM,uBAAA;AAAA,YACN,OAAA,EAAS,kBAAA;AAAA,YACT,KAAA,EAAO,WAAA;AAAA,YACP,eAAe,CAAA,GAAA,KAAO;AACpB,cAAA,cAAA,CAAe,GAAG,CAAA;AAClB,cAAA,gBAAA,CAAiB,MAAS,CAAA;AAAA,YAC5B,CAAA;AAAA,YACA,gBAAA,EAAgB,IAAA;AAAA,YAChB,WAAA,EAAY,wBAAA;AAAA,YACZ,iBAAA,EAAkB,uBAAA;AAAA,YAClB,SAAA,EAAU,gDAAA;AAAA,YACV,KAAA,EAAO;AAAA;AAAA;AACT,OAAA,EACF,CAAA,EACF,CAAA;AAAA,sCACCC,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAd,cAAA,CAACC,aAAA,EAAA,EAAO,IAAA,kBAAMD,cAAA,CAACe,aAAA,EAAA,EAAE,CAAA,EAAI,IAAA,EAAK,QAAA,EAAS,OAAA,EAAS,MAAM,sBAAA,CAAuB,KAAK,CAAA,EAAG,QAAA,EAAA,QAAA,EAEjF,CAAA;AAAA,wBACAf,cAAA,CAACC,aAAA,EAAA,EAAO,IAAA,kBAAMD,cAAA,CAACgB,oBAAA,EAAA,EAAS,GAAI,IAAA,EAAK,QAAA,EAAS,OAAA,EAAQ,SAAA,EAAU,QAAA,EAAA,YAAA,EAE5D;AAAA,OAAA,EACF;AAAA,KAAA,EACF,GACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-columns-menu.cjs.js","sources":["../../../../src/domains/traces/components/trace-columns-menu.tsx"],"sourcesContent":["import { Columns3Icon, PlusIcon, Columns3, X } from 'lucide-react';\nimport { useMemo, useState, type FormEvent } from 'react';\nimport { TRACE_CUSTOM_COLUMN_FIELDS, TRACE_CUSTOM_COLUMN_LABELS, TRACE_USAGE_COLUMNS } from '../trace-list-columns';\nimport type { TraceColumnPreferences, TraceCustomColumn, TraceOptionalColumn } from '../trace-list-columns';\nimport { Button } from '@/ds/components/Button';\nimport { Combobox } from '@/ds/components/Combobox';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { FieldBlock } from '@/ds/components/FormFieldBlocks';\n\nconst METADATA_KEY_FIELD_NAME = 'trace-metadata-key';\nconst EMPTY_KEYS: readonly string[] = [];\n\nconst STANDARD_COLUMNS: readonly TraceOptionalColumn[] = ['type', 'input', 'duration', 'endTime', 'environment'];\n\nconst COLUMN_LABELS: Record<TraceOptionalColumn, string> = {\n  type: 'Type',\n  input: 'Input',\n  duration: 'Duration',\n  endTime: 'End',\n  environment: 'Environment',\n  inputTokens: 'Input tokens',\n  outputTokens: 'Output tokens',\n  totalTokens: 'Total tokens',\n  estimatedCost: 'Estimated cost',\n};\n\ntype TraceColumnsMenuProps = {\n  preferences: TraceColumnPreferences;\n  /** Top-level metadata keys observed on traces in the current time range, offered in the picker. */\n  availableMetadataKeys?: readonly string[];\n  usageDisabledReason?: string;\n  /** When false (server without the trace-query API), metadata columns can't be added. Defaults to true. */\n  withQueryTrace?: boolean;\n  onToggleColumn: (column: TraceOptionalColumn) => void;\n  onAddCustomColumn: (field: TraceCustomColumn) => void;\n  onRemoveCustomColumn: (field: TraceCustomColumn) => void;\n  onAddMetadataColumn: (key: string) => void;\n  onRemoveMetadataColumn: (key: string) => void;\n  onReset: () => void;\n};\n\nexport function TraceColumnsMenu({\n  preferences,\n  availableMetadataKeys = EMPTY_KEYS,\n  usageDisabledReason,\n  withQueryTrace = true,\n  onToggleColumn,\n  onAddCustomColumn,\n  onRemoveCustomColumn,\n  onAddMetadataColumn,\n  onRemoveMetadataColumn,\n  onReset,\n}: TraceColumnsMenuProps) {\n  const [isMetadataDialogOpen, setIsMetadataDialogOpen] = useState(false);\n  const [metadataKey, setMetadataKey] = useState('');\n  const [metadataError, setMetadataError] = useState<string | undefined>();\n\n  // Keys already shown as columns are left out; a typed key that discovery\n  // hasn't seen is kept in the list so the trigger can display it once picked.\n  const metadataKeyOptions = useMemo(() => {\n    const keys = availableMetadataKeys.filter(key => !preferences.metadataKeys.includes(key));\n    if (metadataKey && !keys.includes(metadataKey)) keys.push(metadataKey);\n    return keys.map(key => ({ label: key, value: key }));\n  }, [availableMetadataKeys, preferences.metadataKeys, metadataKey]);\n\n  const handleDialogOpenChange = (open: boolean) => {\n    setIsMetadataDialogOpen(open);\n    if (!open) {\n      setMetadataKey('');\n      setMetadataError(undefined);\n    }\n  };\n\n  const handleAddMetadata = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const normalizedKey = metadataKey.trim();\n    if (!normalizedKey) {\n      setMetadataError('Enter a metadata key.');\n      return;\n    }\n    if (preferences.metadataKeys.includes(normalizedKey)) {\n      setMetadataError('That metadata column is already visible.');\n      return;\n    }\n\n    onAddMetadataColumn(normalizedKey);\n    handleDialogOpenChange(false);\n  };\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenu.Trigger\n          render={\n            <Button variant=\"ghost\" size=\"md\" icon={<Columns3Icon aria-hidden />}>\n              Columns\n            </Button>\n          }\n        />\n        <DropdownMenu.Content align=\"end\" className=\"min-w-56\">\n          <DropdownMenu.Label>Standard columns</DropdownMenu.Label>\n          {STANDARD_COLUMNS.map(column => (\n            <DropdownMenu.CheckboxItem\n              key={column}\n              checked={preferences.visibleColumns.includes(column)}\n              onCheckedChange={() => onToggleColumn(column)}\n            >\n              {COLUMN_LABELS[column]}\n            </DropdownMenu.CheckboxItem>\n          ))}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Usage columns</DropdownMenu.Label>\n          {TRACE_USAGE_COLUMNS.map(column => (\n            <DropdownMenu.CheckboxItem\n              key={column}\n              checked={preferences.visibleColumns.includes(column)}\n              disabled={Boolean(usageDisabledReason)}\n              onCheckedChange={() => onToggleColumn(column)}\n            >\n              {COLUMN_LABELS[column]}\n            </DropdownMenu.CheckboxItem>\n          ))}\n          {usageDisabledReason && (\n            <p className=\"px-2 py-1 text-meta text-placeholder\" role=\"note\">\n              {usageDisabledReason}\n            </p>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Custom columns</DropdownMenu.Label>\n          {TRACE_CUSTOM_COLUMN_FIELDS.map(field => {\n            const isVisible = preferences.customColumns.includes(field);\n            return (\n              <DropdownMenu.CheckboxItem\n                key={field}\n                checked={isVisible}\n                onCheckedChange={() => (isVisible ? onRemoveCustomColumn(field) : onAddCustomColumn(field))}\n              >\n                {TRACE_CUSTOM_COLUMN_LABELS[field]}\n              </DropdownMenu.CheckboxItem>\n            );\n          })}\n\n          {(withQueryTrace || preferences.metadataKeys.length > 0) && (\n            <>\n              <DropdownMenu.Separator />\n              <DropdownMenu.Label>Metadata columns</DropdownMenu.Label>\n              {preferences.metadataKeys.map(key => (\n                <DropdownMenu.CheckboxItem\n                  key={key}\n                  checked\n                  title={key}\n                  onCheckedChange={() => onRemoveMetadataColumn(key)}\n                >\n                  {key}\n                </DropdownMenu.CheckboxItem>\n              ))}\n              {withQueryTrace && (\n                <DropdownMenu.Item onSelect={() => setIsMetadataDialogOpen(true)}>\n                  <PlusIcon aria-hidden />\n                  Add metadata column\n                </DropdownMenu.Item>\n              )}\n            </>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item onSelect={onReset}>Reset to defaults</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      {withQueryTrace && (\n        <Dialog open={isMetadataDialogOpen} onOpenChange={handleDialogOpenChange}>\n          <DialogContent>\n            <form onSubmit={handleAddMetadata}>\n              <DialogHeader>\n                <DialogTitle>Add metadata column</DialogTitle>\n                <DialogDescription>\n                  Pick a top-level trace metadata key observed in the current time range, or type one. Only the key is\n                  saved, never its values.\n                </DialogDescription>\n              </DialogHeader>\n              <DialogBody>\n                <FieldBlock.Column>\n                  <FieldBlock.Label name={METADATA_KEY_FIELD_NAME}>Metadata key</FieldBlock.Label>\n                  <Combobox\n                    id={`input-${METADATA_KEY_FIELD_NAME}`}\n                    name={METADATA_KEY_FIELD_NAME}\n                    options={metadataKeyOptions}\n                    value={metadataKey}\n                    onValueChange={key => {\n                      setMetadataKey(key);\n                      setMetadataError(undefined);\n                    }}\n                    allowCustomValue\n                    placeholder=\"Select a metadata key…\"\n                    searchPlaceholder=\"Search metadata keys…\"\n                    emptyText=\"No metadata keys observed. Type one to add it.\"\n                    error={metadataError}\n                  />\n                </FieldBlock.Column>\n              </DialogBody>\n              <DialogFooter>\n                <Button icon={<X />} type=\"button\" onClick={() => handleDialogOpenChange(false)}>\n                  Cancel\n                </Button>\n                <Button icon={<Columns3 />} type=\"submit\" variant=\"primary\">\n                  Add column\n                </Button>\n              </DialogFooter>\n            </form>\n          </DialogContent>\n        </Dialog>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","jsxs","Fragment","DropdownMenu","jsx","Button","Columns3Icon","TRACE_USAGE_COLUMNS","TRACE_CUSTOM_COLUMN_FIELDS","PlusIcon","Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","FieldBlock","Combobox","DialogFooter","X","Columns3"],"mappings":"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"}