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

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

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

package/dist/domains/traces/components/timeline-structure-sign.cjs.js

@@ -11,7 +11,7 @@ function TimelineStructureSign({ isLastChild }) {
     {
       className: utils_cn.cn(
         "relative w-2 shrink-0 self-stretch opacity-100",
-        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[""] ',
+        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[""]',
         'before:absolute before:top-[50%] before:left-0 before:h-0 before:w-full before:border-b-[1px] before:border-dashed before:border-muted-foreground before:content-[""]',
         {
           "after:bottom-[50%]": isLastChild

package/dist/domains/traces/components/timeline-structure-sign.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-structure-sign.cjs.js","sources":["../../../../src/domains/traces/components/timeline-structure-sign.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\ntype TimelineStructureSignProps = {\n  isLastChild?: boolean;\n};\n\nexport function TimelineStructureSign({ isLastChild }: TimelineStructureSignProps) {\n  return (\n    <div\n      className={cn(\n        'relative w-2 shrink-0 self-stretch opacity-100',\n        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[\"\"] ',\n        'before:absolute before:top-[50%] before:left-0 before:h-0 before:w-full before:border-b-[1px] before:border-dashed before:border-muted-foreground before:content-[\"\"]',\n        {\n          'after:bottom-[50%]': isLastChild,\n        },\n      )}\n    />\n  );\n}\n"],"names":["jsx","cn"],"mappings":";;;;;;;AAMO,SAAS,qBAAA,CAAsB,EAAE,WAAA,EAAY,EAA+B;AACjF,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,gDAAA;AAAA,QACA,oJAAA;AAAA,QACA,uKAAA;AAAA,QACA;AAAA,UACE,oBAAA,EAAsB;AAAA;AACxB;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-structure-sign.cjs.js","sources":["../../../../src/domains/traces/components/timeline-structure-sign.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\ntype TimelineStructureSignProps = {\n  isLastChild?: boolean;\n};\n\nexport function TimelineStructureSign({ isLastChild }: TimelineStructureSignProps) {\n  return (\n    <div\n      className={cn(\n        'relative w-2 shrink-0 self-stretch opacity-100',\n        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[\"\"]',\n        'before:absolute before:top-[50%] before:left-0 before:h-0 before:w-full before:border-b-[1px] before:border-dashed before:border-muted-foreground before:content-[\"\"]',\n        {\n          'after:bottom-[50%]': isLastChild,\n        },\n      )}\n    />\n  );\n}\n"],"names":["jsx","cn"],"mappings":";;;;;;;AAMO,SAAS,qBAAA,CAAsB,EAAE,WAAA,EAAY,EAA+B;AACjF,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,gDAAA;AAAA,QACA,mJAAA;AAAA,QACA,uKAAA;AAAA,QACA;AAAA,UACE,oBAAA,EAAsB;AAAA;AACxB;AACF;AAAA,GACF;AAEJ;;;;"}

package/dist/domains/traces/components/timeline-structure-sign.es.js

@@ -7,7 +7,7 @@ function TimelineStructureSign({ isLastChild }) {
     {
       className: cn(
         "relative w-2 shrink-0 self-stretch opacity-100",
-        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[""] ',
+        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[""]',
         'before:absolute before:top-[50%] before:left-0 before:h-0 before:w-full before:border-b-[1px] before:border-dashed before:border-muted-foreground before:content-[""]',
         {
           "after:bottom-[50%]": isLastChild

package/dist/domains/traces/components/timeline-structure-sign.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-structure-sign.es.js","sources":["../../../../src/domains/traces/components/timeline-structure-sign.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\ntype TimelineStructureSignProps = {\n  isLastChild?: boolean;\n};\n\nexport function TimelineStructureSign({ isLastChild }: TimelineStructureSignProps) {\n  return (\n    <div\n      className={cn(\n        'relative w-2 shrink-0 self-stretch opacity-100',\n        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[\"\"] ',\n        'before:absolute before:top-[50%] before:left-0 before:h-0 before:w-full before:border-b-[1px] before:border-dashed before:border-muted-foreground before:content-[\"\"]',\n        {\n          'after:bottom-[50%]': isLastChild,\n        },\n      )}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,qBAAA,CAAsB,EAAE,WAAA,EAAY,EAA+B;AACjF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,gDAAA;AAAA,QACA,oJAAA;AAAA,QACA,uKAAA;AAAA,QACA;AAAA,UACE,oBAAA,EAAsB;AAAA;AACxB;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-structure-sign.es.js","sources":["../../../../src/domains/traces/components/timeline-structure-sign.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\ntype TimelineStructureSignProps = {\n  isLastChild?: boolean;\n};\n\nexport function TimelineStructureSign({ isLastChild }: TimelineStructureSignProps) {\n  return (\n    <div\n      className={cn(\n        'relative w-2 shrink-0 self-stretch opacity-100',\n        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[\"\"]',\n        'before:absolute before:top-[50%] before:left-0 before:h-0 before:w-full before:border-b-[1px] before:border-dashed before:border-muted-foreground before:content-[\"\"]',\n        {\n          'after:bottom-[50%]': isLastChild,\n        },\n      )}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,qBAAA,CAAsB,EAAE,WAAA,EAAY,EAA+B;AACjF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,gDAAA;AAAA,QACA,mJAAA;AAAA,QACA,uKAAA;AAAA,QACA;AAAA,UACE,oBAAA,EAAsB;AAAA;AACxB;AACF;AAAA,GACF;AAEJ;;;;"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 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-DdHnkGcs.cjs');
+const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function TimelineTimingCol({
@@ -27,7 +27,7 @@ function TimelineTimingCol({
           chartWidth === "wide" ? "min-w-72" : "min-w-32",
           "[&:hover>div]:bg-fill",
           {
-            "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": selectedSpanId === span.id
           }
         ),

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 [&:hover]:opacity-70 dark:opacity-30 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 { 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;;;;"}

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getSpanTimingLayout } from '../utils/span-timing.es.js';
 import { SpanTimingHoverCard } from './span-timing-hover-card.es.js';
-import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-Ch5smNcf.js';
+import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-B1-n3amu.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function TimelineTimingCol({
@@ -23,7 +23,7 @@ function TimelineTimingCol({
           chartWidth === "wide" ? "min-w-72" : "min-w-32",
           "[&:hover>div]:bg-fill",
           {
-            "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": selectedSpanId === span.id
           }
         ),

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 [&:hover]:opacity-70 dark:opacity-30 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 { 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;;;;"}

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

@@ -6,12 +6,12 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
-const Button = require('../../../Button-CVewl8nT.cjs');
-const combobox = require('../../../combobox-BWM3VH-n.cjs');
+const Button = require('../../../Button-C0DBEBcJ.cjs');
+const combobox = require('../../../combobox-Dw3W6EHS.cjs');
 require('@base-ui/react/combobox');
-const dialog = require('../../../dialog-Dm33cZqt.cjs');
-const dropdownMenu = require('../../../dropdown-menu-DNRCA4Gj.cjs');
-const fieldBlock = require('../../../field-block-Dy1IaWbv.cjs');
+const dialog = require('../../../dialog-Cyj59QsZ.cjs');
+const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
+const fieldErrorId = require('../../../field-error-id-6EfqmQ4C.cjs');
 
 const METADATA_KEY_FIELD_NAME = "trace-metadata-key";
 const EMPTY_KEYS = [];
@@ -98,7 +98,7 @@ function TraceColumnsMenu({
           },
           column
         )),
-        usageDisabledReason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-meta text-placeholder px-2 py-1", role: "note", children: usageDisabledReason }),
+        usageDisabledReason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-1 text-meta text-placeholder", role: "note", children: usageDisabledReason }),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Label, { children: "Custom columns" }),
         domains_traces_traceListColumns.TRACE_CUSTOM_COLUMN_FIELDS.map((field) => {
@@ -138,8 +138,8 @@ function TraceColumnsMenu({
         /* @__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." })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(fieldBlock.FieldBlock.Column, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.Label, { name: METADATA_KEY_FIELD_NAME, children: "Metadata key" }),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogBody, { children: /* @__PURE__ */ jsxRuntime.jsxs(fieldErrorId.FieldBlock.Column, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(fieldErrorId.FieldBlock.Label, { name: METADATA_KEY_FIELD_NAME, children: "Metadata key" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           combobox.Combobox,
           {

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=\"text-meta text-placeholder px-2 py-1\" 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\" variant=\"outline\" 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":"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"}
+{"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\" variant=\"outline\" 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":"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"}

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

@@ -2,12 +2,12 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Columns3Icon, PlusIcon, X, Columns3 } from 'lucide-react';
 import { useState, useMemo } from 'react';
 import { TRACE_USAGE_COLUMNS, TRACE_CUSTOM_COLUMN_FIELDS, TRACE_CUSTOM_COLUMN_LABELS } from '../trace-list-columns.es.js';
-import { B as Button } from '../../../Button-cWcBEd-G.js';
-import { C as Combobox } from '../../../combobox-D7xJFZuO.js';
+import { B as Button } from '../../../Button-C9cvaVFG.js';
+import { C as Combobox } from '../../../combobox-CV-Ue388.js';
 import '@base-ui/react/combobox';
-import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, d as DialogDescription, e as DialogBody, g as DialogFooter } from '../../../dialog-DRpMek34.js';
-import { D as DropdownMenu } from '../../../dropdown-menu-DL0MzjEb.js';
-import { F as FieldBlock } from '../../../field-block-DWkbNcsV.js';
+import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, d as DialogDescription, e as DialogBody, g as DialogFooter } from '../../../dialog-D8fuBETk.js';
+import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
+import { F as FieldBlock } from '../../../field-error-id-DyWx33Fu.js';
 
 const METADATA_KEY_FIELD_NAME = "trace-metadata-key";
 const EMPTY_KEYS = [];
@@ -94,7 +94,7 @@ function TraceColumnsMenu({
           },
           column
         )),
-        usageDisabledReason && /* @__PURE__ */ jsx("p", { className: "text-meta text-placeholder px-2 py-1", role: "note", children: usageDisabledReason }),
+        usageDisabledReason && /* @__PURE__ */ jsx("p", { className: "px-2 py-1 text-meta text-placeholder", role: "note", children: usageDisabledReason }),
         /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
         /* @__PURE__ */ jsx(DropdownMenu.Label, { children: "Custom columns" }),
         TRACE_CUSTOM_COLUMN_FIELDS.map((field) => {

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

@@ -1 +1 @@
-{"version":3,"file":"trace-columns-menu.es.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=\"text-meta text-placeholder px-2 py-1\" 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\" variant=\"outline\" 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":[],"mappings":"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"}
+{"version":3,"file":"trace-columns-menu.es.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\" variant=\"outline\" 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":[],"mappings":"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"}

package/dist/domains/traces/components/trace-data-panel-view.cjs.js

@@ -13,14 +13,14 @@ const domains_traces_components_traceIdButton = require('./trace-id-button.cjs.j
 const domains_traces_components_traceSpanTimeline = require('./trace-span-timeline.cjs.js');
 const domains_traces_components_traceSpanTree = require('./trace-span-tree.cjs.js');
 const domains_traces_components_traceSummaryDescription = require('./trace-summary-description.cjs.js');
-const Button = require('../../../Button-CVewl8nT.cjs');
-const buttonsGroup = require('../../../buttons-group-BiLEV_Ak.cjs');
-const dataPanel = require('../../../data-panel-CWZJKBeW.cjs');
-const dropdownMenu = require('../../../dropdown-menu-DNRCA4Gj.cjs');
-const searchFieldBlock = require('../../../search-field-block-D0PUUCAE.cjs');
-const Notice = require('../../../Notice-Cjti0e0j.cjs');
-const tabsRoot = require('../../../tabs-root-C5ABfm1F.cjs');
-const tabsTab = require('../../../tabs-tab-DA466DbX.cjs');
+const Button = require('../../../Button-C0DBEBcJ.cjs');
+const buttonsGroup = require('../../../buttons-group-CoZP3lJt.cjs');
+const dataPanel = require('../../../data-panel-CM3N_4M7.cjs');
+const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
+const searchFieldBlock = require('../../../search-field-block-ChXCuPrB.cjs');
+const Notice = require('../../../Notice-CoFjo8O6.cjs');
+const tabsRoot = require('../../../tabs-root-BiV8irc3.cjs');
+const tabsTab = require('../../../tabs-tab-J91Szy3Q.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const icons_ScorersIcon = require('../../../icons/ScorersIcon.cjs.js');
 const hooks_useScrollToFirstHighlight = require('../../../hooks/use-scroll-to-first-highlight.cjs.js');
@@ -188,7 +188,7 @@ function TraceDataPanelView({
     ] })
   ] });
   const sideColumn = traceId && sideView ? /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-trace-side-column": true, className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "border-border border-b", children: /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: view.value, children: view.label }, view.value)) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: view.value, children: view.label }, view.value)) }) }) }),
     sideView === "messages" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { className: "p-0", children: messagesPanelSlot }),
     sideView === "feedback" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: feedbackTabSlot?.({ traceId }) }),
     sideView === "scores" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId }) })
@@ -249,7 +249,7 @@ function TraceDataPanelView({
             spanPanelKey: selectedSpanId,
             children: !isLoading && !spans?.length ? /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.NoData, { children: "No spans found for this trace." }) : (() => {
               const isTimeline = spanView === "timeline";
-              const searchHeader = /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Header, { className: "border-border gap-2 border-b", children: [
+              const searchHeader = /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Header, { className: "gap-2 border-b border-border", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   searchFieldBlock.SearchFieldBlock,
                   {
@@ -264,11 +264,10 @@ function TraceDataPanelView({
                     className: "w-full"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { className: "shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { size: "sm", className: "shrink-0", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Button.Button,
                     {
-                      size: "sm",
                       variant: isTimeline ? "default" : "primary",
                       "aria-pressed": !isTimeline,
                       tooltip: "Span tree",
@@ -279,7 +278,6 @@ function TraceDataPanelView({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Button.Button,
                     {
-                      size: "sm",
                       variant: isTimeline ? "primary" : "default",
                       "aria-pressed": isTimeline,
                       tooltip: "Timeline",