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

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

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
-const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function TimelineNameCol({
   span,
@@ -39,13 +39,10 @@ function TimelineNameCol({
       "aria-label": `View details for span ${span.name}`,
       "aria-selected": isSelected,
       onClick: () => onSpanClick?.(span.id),
-      className: utils_cn.cn(
-        "flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 transition-colors hover:bg-surface4",
-        {
-          "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
-          "bg-surface4": isSelected
-        }
-      ),
+      className: utils_cn.cn("flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle", {
+        "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
+        "bg-fill-hover": isSelected
+      }),
       style: { paddingLeft: `${depth * 1}rem` },
       children: [
         !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_timelineStructureSign.TimelineStructureSign, { isLastChild }),
@@ -54,7 +51,7 @@ function TimelineNameCol({
           {
             type: "button",
             className: utils_cn.cn(
-              "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-ui-sm text-neutral6",
+              "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground",
               "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset"
             ),
             children: [
@@ -78,7 +75,7 @@ function TimelineNameCol({
                     children: span.name
                   }
                 ),
-                meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-xs text-neutral3 shrink-0 lg:tabular-nums", children: meta })
+                meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-muted-foreground shrink-0 lg:tabular-nums", children: meta })
               ] })
             ]
           }
@@ -94,8 +91,8 @@ function TimelineNameCol({
             "aria-label": toggleLabel,
             "aria-expanded": isExpanded,
             className: utils_cn.cn(
-              "flex size-5 cursor-pointer items-center justify-center rounded-md transition-colors",
-              "hover:bg-surface5 [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50",
+              "flex size-5 cursor-pointer items-center justify-center rounded-md",
+              "hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50",
               "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1"
             ),
             children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})

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

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

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
 import { useRef, useEffect } from 'react';
 import { TimelineStructureSign } from './timeline-structure-sign.es.js';
-import { c as cn } from '../../../cn-C6s2yXwM.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function TimelineNameCol({
   span,
@@ -35,13 +35,10 @@ function TimelineNameCol({
       "aria-label": `View details for span ${span.name}`,
       "aria-selected": isSelected,
       onClick: () => onSpanClick?.(span.id),
-      className: cn(
-        "flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 transition-colors hover:bg-surface4",
-        {
-          "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
-          "bg-surface4": isSelected
-        }
-      ),
+      className: cn("flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle", {
+        "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
+        "bg-fill-hover": isSelected
+      }),
       style: { paddingLeft: `${depth * 1}rem` },
       children: [
         !isRootSpan && /* @__PURE__ */ jsx(TimelineStructureSign, { isLastChild }),
@@ -50,7 +47,7 @@ function TimelineNameCol({
           {
             type: "button",
             className: cn(
-              "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-ui-sm text-neutral6",
+              "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 self-stretch rounded-md px-2 py-1 text-left text-caption text-foreground",
               "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset"
             ),
             children: [
@@ -74,7 +71,7 @@ function TimelineNameCol({
                     children: span.name
                   }
                 ),
-                meta && /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-neutral3 shrink-0 lg:tabular-nums", children: meta })
+                meta && /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground shrink-0 lg:tabular-nums", children: meta })
               ] })
             ]
           }
@@ -90,8 +87,8 @@ function TimelineNameCol({
             "aria-label": toggleLabel,
             "aria-expanded": isExpanded,
             className: cn(
-              "flex size-5 cursor-pointer items-center justify-center rounded-md transition-colors",
-              "hover:bg-surface5 [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50",
+              "flex size-5 cursor-pointer items-center justify-center rounded-md",
+              "hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50",
               "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1"
             ),
             children: isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {})

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

@@ -1 +1 @@
-{"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  numOfChildren?: number;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n  toggleChildren?: () => void;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: ReactNode;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren,\n  numOfChildren = 0,\n  isRootSpan,\n  isExpanded,\n  toggleChildren,\n  meta,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn(\n        'flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 transition-colors hover:bg-surface4',\n        {\n          'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n          'bg-surface4': isSelected,\n        },\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-ui-sm text-neutral6',\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-ui-xs text-neutral3 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 transition-colors',\n              'hover:bg-surface5 [&: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 [&: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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"}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function TimelineStructureSign({ isLastChild }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11,8 +11,8 @@ 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-neutral3 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-neutral3 before: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-neutral3 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-neutral3 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,4IAAA;AAAA,QACA,+JAAA;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,oJAAA;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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { c as cn } from '../../../cn-C6s2yXwM.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function TimelineStructureSign({ isLastChild }) {
   return /* @__PURE__ */ jsx(
@@ -7,8 +7,8 @@ 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-neutral3 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-neutral3 before: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-neutral3 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-neutral3 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,4IAAA;AAAA,QACA,+JAAA;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,oJAAA;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,8 +5,8 @@ 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-BSj1EgQs.cjs');
-const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+const hoverCard = require('../../../hover-card-DdHnkGcs.cjs');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function TimelineTimingCol({
   span,
@@ -25,17 +25,17 @@ function TimelineTimingCol({
         className: utils_cn.cn(
           "grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2",
           chartWidth === "wide" ? "min-w-72" : "min-w-32",
-          "[&:hover>div]:bg-surface5",
+          "[&:hover>div]:bg-fill",
           {
             "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
-            "bg-surface4": selectedSpanId === span.id
+            "bg-fill-hover": selectedSpanId === span.id
           }
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("w-full rounded-md bg-surface4 p-1.5 transition-colors duration-1000"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("w-full rounded-md bg-muted p-1.5"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: utils_cn.cn("absolute top-0 h-1.5 rounded-sm bg-neutral1"),
+              className: utils_cn.cn("absolute top-0 h-1.5 rounded-sm bg-placeholder"),
               style: {
                 width: widthPercent ? `${widthPercent}%` : "2px",
                 left: `${leftPercent}%`,
@@ -43,7 +43,7 @@ function TimelineTimingCol({
               }
             }
           ) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex justify-end text-ui-xs text-neutral3"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex justify-end text-meta text-muted-foreground"), children: [
             (span.latency / 1e3).toFixed(3),
             " s"
           ] })

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-surface5',\n          {\n            'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n            'bg-surface4': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className={cn('w-full rounded-md bg-surface4 p-1.5 transition-colors duration-1000')}>\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-neutral1')}\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-ui-xs text-neutral3')}>{(span.latency / 1000).toFixed(3)}&nbsp;s</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,2BAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,aAAA,EAAe,mBAAmB,IAAA,CAAK;AAAA;AACzC,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAWD,WAAA,CAAG,qEAAqE,GACtF,QAAA,kBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,YAAG,6CAA6C,CAAA;AAAA,cAC3D,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,2CAA2C,CAAA,EAAK,QAAA,EAAA;AAAA,YAAA,CAAA,IAAA,CAAK,OAAA,GAAU,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,YAAE;AAAA,WAAA,EAAO;AAAA;AAAA;AAAA,KAC5G;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 [&: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;;;;"}

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

@@ -1,8 +1,8 @@
 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-Cmh0QRP8.js';
-import { c as cn } from '../../../cn-C6s2yXwM.js';
+import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-Ch5smNcf.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function TimelineTimingCol({
   span,
@@ -21,17 +21,17 @@ function TimelineTimingCol({
         className: cn(
           "grid h-8 cursor-help grid-cols-[1fr_auto] items-center gap-2 rounded-r-md p-1 pr-2",
           chartWidth === "wide" ? "min-w-72" : "min-w-32",
-          "[&:hover>div]:bg-surface5",
+          "[&:hover>div]:bg-fill",
           {
             "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
-            "bg-surface4": selectedSpanId === span.id
+            "bg-fill-hover": selectedSpanId === span.id
           }
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-md bg-surface4 p-1.5 transition-colors duration-1000"), children: /* @__PURE__ */ jsx("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-md bg-muted p-1.5"), children: /* @__PURE__ */ jsx("div", { className: "relative h-1.5 w-full overflow-hidden rounded-sm", children: /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn("absolute top-0 h-1.5 rounded-sm bg-neutral1"),
+              className: cn("absolute top-0 h-1.5 rounded-sm bg-placeholder"),
               style: {
                 width: widthPercent ? `${widthPercent}%` : "2px",
                 left: `${leftPercent}%`,
@@ -39,7 +39,7 @@ function TimelineTimingCol({
               }
             }
           ) }) }),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex justify-end text-ui-xs text-neutral3"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex justify-end text-meta text-muted-foreground"), children: [
             (span.latency / 1e3).toFixed(3),
             " s"
           ] })

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-surface5',\n          {\n            'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n            'bg-surface4': selectedSpanId === span.id,\n          },\n        )}\n      >\n        <div className={cn('w-full rounded-md bg-surface4 p-1.5 transition-colors duration-1000')}>\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-neutral1')}\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-ui-xs text-neutral3')}>{(span.latency / 1000).toFixed(3)}&nbsp;s</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,2BAAA;AAAA,UACA;AAAA,YACE,2EAAA,EAA6E,OAAA;AAAA,YAC7E,aAAA,EAAe,mBAAmB,IAAA,CAAK;AAAA;AACzC,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,qEAAqE,GACtF,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kDAAA,EACb,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,6CAA6C,CAAA;AAAA,cAC3D,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,2CAA2C,CAAA,EAAK,QAAA,EAAA;AAAA,YAAA,CAAA,IAAA,CAAK,OAAA,GAAU,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,YAAE;AAAA,WAAA,EAAO;AAAA;AAAA;AAAA,KAC5G;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 [&: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;;;;"}

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

@@ -6,25 +6,34 @@ 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-C2dx_QZN.cjs');
-const dialog = require('../../../dialog-B3DNnoZ3.cjs');
-const dropdownMenu = require('../../../dropdown-menu-DfX8T0jb.cjs');
-const input = require('../../../input-XEcMP_LL.cjs');
-const label = require('../../../label-DxQoIwES.cjs');
+const Button = require('../../../Button-CVewl8nT.cjs');
+const combobox = require('../../../combobox-BWM3VH-n.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 STANDARD_COLUMNS = ["input", "entity", "duration"];
+const METADATA_KEY_FIELD_NAME = "trace-metadata-key";
+const EMPTY_KEYS = [];
+const STANDARD_COLUMNS = ["type", "input", "duration", "endTime", "environment"];
 const COLUMN_LABELS = {
+  type: "Type",
   input: "Input",
-  entity: "Entity",
   duration: "Duration",
+  endTime: "End",
+  environment: "Environment",
   inputTokens: "Input tokens",
   outputTokens: "Output tokens",
+  totalTokens: "Total tokens",
   estimatedCost: "Estimated cost"
 };
 function TraceColumnsMenu({
   preferences,
+  availableMetadataKeys = EMPTY_KEYS,
   usageDisabledReason,
   onToggleColumn,
+  onAddCustomColumn,
+  onRemoveCustomColumn,
   onAddMetadataColumn,
   onRemoveMetadataColumn,
   onReset
@@ -32,6 +41,11 @@ function TraceColumnsMenu({
   const [isMetadataDialogOpen, setIsMetadataDialogOpen] = React.useState(false);
   const [metadataKey, setMetadataKey] = React.useState("");
   const [metadataError, setMetadataError] = React.useState();
+  const metadataKeyOptions = React.useMemo(() => {
+    const keys = availableMetadataKeys.filter((key) => !preferences.metadataKeys.includes(key));
+    if (metadataKey && !keys.includes(metadataKey)) keys.push(metadataKey);
+    return keys.map((key) => ({ label: key, value: key }));
+  }, [availableMetadataKeys, preferences.metadataKeys, metadataKey]);
   const handleDialogOpenChange = (open) => {
     setIsMetadataDialogOpen(open);
     if (!open) {
@@ -84,7 +98,21 @@ function TraceColumnsMenu({
           },
           column
         )),
-        usageDisabledReason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-xs leading-ui-sm text-neutral2 px-2 py-1", role: "note", children: usageDisabledReason }),
+        usageDisabledReason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-meta text-placeholder px-2 py-1", role: "note", children: usageDisabledReason }),
+        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Label, { children: "Custom columns" }),
+        domains_traces_traceListColumns.TRACE_CUSTOM_COLUMN_FIELDS.map((field) => {
+          const isVisible = preferences.customColumns.includes(field);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            dropdownMenu.DropdownMenu.CheckboxItem,
+            {
+              checked: isVisible,
+              onCheckedChange: () => isVisible ? onRemoveCustomColumn(field) : onAddCustomColumn(field),
+              children: domains_traces_traceListColumns.TRACE_CUSTOM_COLUMN_LABELS[field]
+            },
+            field
+          );
+        }),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Label, { children: "Metadata columns" }),
         preferences.metadataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -108,27 +136,29 @@ function TraceColumnsMenu({
     /* @__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: "Enter a top-level trace metadata key. Only the key is saved, never its values." })
+        /* @__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.jsxs(dialog.DialogBody, { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "trace-metadata-key", children: "Metadata key" }),
+      /* @__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(
-          input.Input,
+          combobox.Combobox,
           {
-            id: "trace-metadata-key",
+            id: `input-${METADATA_KEY_FIELD_NAME}`,
+            name: METADATA_KEY_FIELD_NAME,
+            options: metadataKeyOptions,
             value: metadataKey,
-            onChange: (event) => {
-              setMetadataKey(event.target.value);
+            onValueChange: (key) => {
+              setMetadataKey(key);
               setMetadataError(void 0);
             },
-            placeholder: "tenantId",
-            autoFocus: true,
-            error: Boolean(metadataError),
-            "aria-describedby": metadataError ? "trace-metadata-key-error" : void 0
+            allowCustomValue: true,
+            placeholder: "Select a metadata key…",
+            searchPlaceholder: "Search metadata keys…",
+            emptyText: "No metadata keys observed. Type one to add it.",
+            error: metadataError
           }
-        ),
-        metadataError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: "trace-metadata-key-error", className: "text-ui-xs text-error", role: "alert", children: metadataError })
-      ] }),
+        )
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}), type: "button", variant: "outline", onClick: () => handleDialogOpenChange(false), children: "Cancel" }),
         /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns3, {}), type: "submit", variant: "primary", children: "Add column" })

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 { useState, type FormEvent } from 'react';\nimport { TRACE_USAGE_COLUMNS } from '../trace-list-columns';\nimport type { TraceColumnPreferences, TraceOptionalColumn } from '../trace-list-columns';\nimport { Button } from '@/ds/components/Button';\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 { Input } from '@/ds/components/Input';\nimport { Label } from '@/ds/components/Label';\n\nconst STANDARD_COLUMNS: readonly TraceOptionalColumn[] = ['input', 'entity', 'duration'];\n\nconst COLUMN_LABELS: Record<TraceOptionalColumn, string> = {\n  input: 'Input',\n  entity: 'Entity',\n  duration: 'Duration',\n  inputTokens: 'Input tokens',\n  outputTokens: 'Output tokens',\n  estimatedCost: 'Estimated cost',\n};\n\ntype TraceColumnsMenuProps = {\n  preferences: TraceColumnPreferences;\n  usageDisabledReason?: string;\n  onToggleColumn: (column: TraceOptionalColumn) => void;\n  onAddMetadataColumn: (key: string) => void;\n  onRemoveMetadataColumn: (key: string) => void;\n  onReset: () => void;\n};\n\nexport function TraceColumnsMenu({\n  preferences,\n  usageDisabledReason,\n  onToggleColumn,\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  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-ui-xs leading-ui-sm text-neutral2 px-2 py-1\" role=\"note\">\n              {usageDisabledReason}\n            </p>\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                Enter a top-level trace metadata key. Only the key is saved, never its values.\n              </DialogDescription>\n            </DialogHeader>\n            <DialogBody className=\"space-y-2\">\n              <Label htmlFor=\"trace-metadata-key\">Metadata key</Label>\n              <Input\n                id=\"trace-metadata-key\"\n                value={metadataKey}\n                onChange={event => {\n                  setMetadataKey(event.target.value);\n                  setMetadataError(undefined);\n                }}\n                placeholder=\"tenantId\"\n                autoFocus\n                error={Boolean(metadataError)}\n                aria-describedby={metadataError ? 'trace-metadata-key-error' : undefined}\n              />\n              {metadataError && (\n                <p id=\"trace-metadata-key-error\" className=\"text-ui-xs text-error\" role=\"alert\">\n                  {metadataError}\n                </p>\n              )}\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","jsxs","Fragment","DropdownMenu","jsx","Button","Columns3Icon","TRACE_USAGE_COLUMNS","PlusIcon","Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","Label","Input","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=\"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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"}