@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 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-DnbTIGXa.cjs');
+const utils_cn = require('../../../cn-DPfV6E6L.cjs');
 
 function TimelineNameCol({
   span,
@@ -16,9 +17,12 @@ function TimelineNameCol({
   selectedSpanId,
   revealSpanId,
   isLastChild,
-  hasChildren: _hasChildren,
+  hasChildren,
+  numOfChildren = 0,
   isRootSpan,
-  isExpanded: _isExpanded
+  isExpanded,
+  toggleChildren,
+  meta
 }) {
   const rowRef = React.useRef(null);
   const isSelected = selectedSpanId === span.id;
@@ -27,26 +31,30 @@ function TimelineNameCol({
   React.useEffect(() => {
     if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
   }, [shouldScrollIntoView]);
+  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: rowRef,
       "aria-label": `View details for span ${span.name}`,
-      className: utils_cn.cn("flex min-h-8 items-center rounded-md rounded-l-lg opacity-80", {
-        "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
-        "bg-surface4": isSelected
-      }),
+      "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
+        }
+      ),
       style: { paddingLeft: `${depth * 1}rem` },
       children: [
         !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_timelineStructureSign.TimelineStructureSign, { isLastChild }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
-            onClick: () => onSpanClick?.(span.id),
+            type: "button",
             className: utils_cn.cn(
-              "flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors",
-              "[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all",
-              "hover:bg-surface4 [&:hover>svg]:opacity-60",
+              "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",
               "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset"
             ),
             children: [
@@ -59,19 +67,40 @@ function TimelineNameCol({
                   style: { backgroundColor: spanUI.color }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
-                  "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
-                  title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
-                  className: "min-w-0 truncate",
-                  children: span.name
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
+                    "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
+                    title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
+                    className: "min-w-0 truncate",
+                    children: span.name
+                  }
+                ),
+                meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-xs text-neutral3 shrink-0 lg:tabular-nums", children: meta })
+              ] })
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-8 shrink-0 items-center justify-center self-stretch pr-1", children: hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              toggleChildren?.();
+            },
+            "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",
+              "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 { 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  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\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  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\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        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","TimelineStructureSign"],"mappings":";;;;;;;;;AAmBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAASA,aAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAWC,YAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAcC,cAAA,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjEH,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAWC,WAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACPC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKFA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"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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"}

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

@@ -1,7 +1,8 @@
 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-ByEbywDh.js';
+import { c as cn } from '../../../cn-Dxjsbr9n.js';
 
 function TimelineNameCol({
   span,
@@ -12,9 +13,12 @@ function TimelineNameCol({
   selectedSpanId,
   revealSpanId,
   isLastChild,
-  hasChildren: _hasChildren,
+  hasChildren,
+  numOfChildren = 0,
   isRootSpan,
-  isExpanded: _isExpanded
+  isExpanded,
+  toggleChildren,
+  meta
 }) {
   const rowRef = useRef(null);
   const isSelected = selectedSpanId === span.id;
@@ -23,26 +27,30 @@ function TimelineNameCol({
   useEffect(() => {
     if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
   }, [shouldScrollIntoView]);
+  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: rowRef,
       "aria-label": `View details for span ${span.name}`,
-      className: cn("flex min-h-8 items-center rounded-md rounded-l-lg opacity-80", {
-        "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
-        "bg-surface4": isSelected
-      }),
+      "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
+        }
+      ),
       style: { paddingLeft: `${depth * 1}rem` },
       children: [
         !isRootSpan && /* @__PURE__ */ jsx(TimelineStructureSign, { isLastChild }),
         /* @__PURE__ */ jsxs(
           "button",
           {
-            onClick: () => onSpanClick?.(span.id),
+            type: "button",
             className: cn(
-              "flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors",
-              "[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all",
-              "hover:bg-surface4 [&:hover>svg]:opacity-60",
+              "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",
               "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset"
             ),
             children: [
@@ -55,19 +63,40 @@ function TimelineNameCol({
                   style: { backgroundColor: spanUI.color }
                 }
               ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
-                  "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
-                  title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
-                  className: "min-w-0 truncate",
-                  children: span.name
-                }
-              )
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
+                    "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
+                    title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
+                    className: "min-w-0 truncate",
+                    children: span.name
+                  }
+                ),
+                meta && /* @__PURE__ */ jsx("span", { className: "text-ui-xs text-neutral3 shrink-0 lg:tabular-nums", children: meta })
+              ] })
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex w-8 shrink-0 items-center justify-center self-stretch pr-1", children: hasChildren && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              toggleChildren?.();
+            },
+            "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",
+              "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 { 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  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\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  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\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        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAW,EAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKF,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"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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"}

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
+const utils_cn = require('../../../cn-DPfV6E6L.cjs');
 
 function TimelineStructureSign({ isLastChild }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: utils_cn.cn(
-        "relative h-[1.8rem] w-2 shrink-0 opacity-100",
+        "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-[""]',
         {

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 h-[1.8rem] w-2 shrink-0 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,8CAAA;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-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;;;;"}

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

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { c as cn } from '../../../cn-Dxjsbr9n.js';
 
 function TimelineStructureSign({ isLastChild }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "relative h-[1.8rem] w-2 shrink-0 opacity-100",
+        "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-[""]',
         {

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 h-[1.8rem] w-2 shrink-0 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,8CAAA;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-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;;;;"}

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-B_Wz_e0F.cjs');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
+const hoverCard = require('../../../hover-card-Cc3NmZ4K.cjs');
+const utils_cn = require('../../../cn-DPfV6E6L.cjs');
 
 function TimelineTimingCol({
   span,

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-B5zQKp9k.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-CM9fAKvc.js';
+import { c as cn } from '../../../cn-Dxjsbr9n.js';
 
 function TimelineTimingCol({
   span,

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

@@ -6,11 +6,11 @@ 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-BJOVwaxp.cjs');
-const dialog = require('../../../dialog-B1DwyLJJ.cjs');
-const dropdownMenu = require('../../../dropdown-menu-Bfh5ROWe.cjs');
-const input = require('../../../input-D3SUXvgI.cjs');
-const label = require('../../../label-BICQQTjz.cjs');
+const Button = require('../../../Button-B1TWWXCy.cjs');
+const dialog = require('../../../dialog-h9MPZQgc.cjs');
+const dropdownMenu = require('../../../dropdown-menu-CP2LVgOe.cjs');
+const input = require('../../../input-BCrGOM5G.cjs');
+const label = require('../../../label-DzQOqIjw.cjs');
 
 const STANDARD_COLUMNS = ["input", "entity", "duration"];
 const COLUMN_LABELS = {
@@ -58,7 +58,7 @@ function TraceColumnsMenu({
       /* @__PURE__ */ jsxRuntime.jsx(
         dropdownMenu.DropdownMenu.Trigger,
         {
-          render: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outline", size: "md", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns3Icon, { "aria-hidden": true }), children: "Columns" })
+          render: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "ghost", size: "md", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns3Icon, { "aria-hidden": true }), children: "Columns" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Content, { align: "end", className: "min-w-56", children: [

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=\"outline\" 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 { 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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"}

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

@@ -2,11 +2,11 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Columns3Icon, PlusIcon, X, Columns3 } from 'lucide-react';
 import { useState } from 'react';
 import { TRACE_USAGE_COLUMNS } from '../trace-list-columns.es.js';
-import { B as Button } from '../../../Button-BVGwYwHT.js';
-import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, d as DialogDescription, e as DialogBody, f as DialogFooter } from '../../../dialog-Dfrt_JCJ.js';
-import { D as DropdownMenu } from '../../../dropdown-menu-C853KwJJ.js';
-import { I as Input } from '../../../input-DinpgQXj.js';
-import { L as Label } from '../../../label-BKfZzqfr.js';
+import { B as Button } from '../../../Button-XSiL3zvL.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-BUcAVIly.js';
+import { D as DropdownMenu } from '../../../dropdown-menu-BYns1-0U.js';
+import { I as Input } from '../../../input-DtmX7xH7.js';
+import { L as Label } from '../../../label-BBPnGszd.js';
 
 const STANDARD_COLUMNS = ["input", "entity", "duration"];
 const COLUMN_LABELS = {
@@ -54,7 +54,7 @@ function TraceColumnsMenu({
       /* @__PURE__ */ jsx(
         DropdownMenu.Trigger,
         {
-          render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", icon: /* @__PURE__ */ jsx(Columns3Icon, { "aria-hidden": true }), children: "Columns" })
+          render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", icon: /* @__PURE__ */ jsx(Columns3Icon, { "aria-hidden": true }), children: "Columns" })
         }
       ),
       /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", className: "min-w-56", children: [

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 { 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=\"outline\" 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":[],"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 { 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":[],"mappings":"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"}