@mastra/playground-ui 65.0.0-alpha.3 → 65.0.0-alpha.4

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

@@ -5,20 +5,26 @@ 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 domains_traces_components_spanTreeRail = require('./span-tree-rail.cjs.js');
+const domains_traces_components_spanTypeBadge = require('./span-type-badge.cjs.js');
 const Txt = require('../../../Txt-CIS2G5Jx.cjs');
 const primitives_transitions = require('../../../primitives/transitions.cjs.js');
 const utils_cn = require('../../../cn-DlOJCxrS.cjs');
 
+function splitSpanName(name) {
+  const index = name.indexOf(": ");
+  if (index < 0) return [null, name];
+  return [name.slice(0, index), name.slice(index + 2).replace(/^'(.*)'$/, "$1")];
+}
 function TimelineNameCol({
   span,
   spanUI,
   isFaded,
-  depth = 0,
   onSpanClick,
   selectedSpanId,
   revealSpanId,
   isLastChild,
+  guides,
   hasChildren,
   numOfChildren = 0,
   isRootSpan,
@@ -35,6 +41,8 @@ function TimelineNameCol({
       rowRef.current?.scrollIntoView({ block: isRevealed ? "center" : "nearest", behavior: "smooth" });
   }, [shouldScrollIntoView, isRevealed]);
   const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
+  const depth = isRootSpan ? 0 : (guides?.length ?? 0) + 1;
+  const [kind, value] = splitSpanName(span.name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -42,51 +50,69 @@ 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 hover:bg-fill-subtle", {
+      className: utils_cn.cn("relative flex cursor-pointer items-stretch rounded-md pl-1 hover:bg-fill-subtle", {
         "opacity-40 dark:opacity-30 [&:hover]:opacity-70 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 }),
+        /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTreeRail.SpanTreeRail, { depth, guides: guides ?? [], isLastChild, hasStem: hasChildren && isExpanded }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            className: utils_cn.cn(
-              "text-foreground",
-              "flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left",
-              primitives_transitions.focusRingInset
-            ),
+            className: "flex min-w-0 flex-1",
+            style: { paddingLeft: depth * domains_traces_components_spanTreeRail.SPAN_TREE_INDENT, paddingBlock: domains_traces_components_spanTreeRail.SPAN_TREE_PAD_Y },
             children: [
-              spanUI?.color && /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  "aria-hidden": true,
-                  title: spanUI.label,
-                  style: { backgroundColor: spanUI.color },
-                  className: "mt-[5px] inline-block size-2 shrink-0 rounded-full"
+                  className: "flex shrink-0 items-center justify-center",
+                  style: { width: domains_traces_components_spanTreeRail.SPAN_TREE_INDENT, height: domains_traces_components_spanTreeRail.SPAN_TREE_LINE },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTypeBadge.SpanTypeBadge, { type: span.type, spanUI })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "timeline-name-line", className: "flex min-w-0 items-center", style: { height: domains_traces_components_spanTreeRail.SPAN_TREE_LINE }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: utils_cn.cn(
+                      "flex min-w-0 flex-1 cursor-pointer rounded-md px-2 text-left text-foreground",
+                      primitives_transitions.focusRingInset
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Txt.Txt,
+                      {
+                        as: "span",
+                        variant: "body-sm",
+                        "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 font-[450]",
+                        children: kind ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                          kind,
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "px-1 text-foreground/70", children: "›" }),
+                          value
+                        ] }) : span.name
+                      }
+                    )
+                  }
+                ) }),
+                meta && /* @__PURE__ */ jsxRuntime.jsx(
                   Txt.Txt,
                   {
                     as: "span",
                     variant: "caption",
-                    "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
+                    tone: "muted",
+                    style: { marginTop: domains_traces_components_spanTreeRail.SPAN_TREE_META_GAP },
+                    className: "truncate pl-2 leading-4 tabular-nums",
+                    children: meta
                   }
-                ),
-                meta && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", className: "shrink-0 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(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-8 shrink-0 justify-center pr-1", style: { paddingTop: domains_traces_components_spanTreeRail.SPAN_TREE_PAD_Y }, children: hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",

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 { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\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)\n      rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView, isRevealed]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'text-foreground',\n          'flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left',\n          focusRingInset,\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            style={{ backgroundColor: spanUI.color }}\n            className=\"mt-[5px] inline-block size-2 shrink-0 rounded-full\"\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 always stacks under the name. */}\n        <span className=\"flex min-w-0 flex-1 flex-col\">\n          <Txt\n            as=\"span\"\n            variant=\"caption\"\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          </Txt>\n          {meta && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n              {meta}\n            </Txt>\n          )}\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              focusRing,\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","TimelineStructureSign","focusRingInset","Txt","focusRing","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 { SPAN_TREE_INDENT, SPAN_TREE_LINE, SPAN_TREE_META_GAP, SPAN_TREE_PAD_Y, SpanTreeRail } from './span-tree-rail';\nimport { SpanTypeBadge } from './span-type-badge';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  guides?: 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\n/** `agent run: 'chef-agent'` → `['agent run', 'chef-agent']`; names without a `kind: ` prefix stay whole. */\nfunction splitSpanName(name: string): [kind: string | null, value: string] {\n  const index = name.indexOf(': ');\n  if (index < 0) return [null, name];\n  return [name.slice(0, index), name.slice(index + 2).replace(/^'(.*)'$/, '$1')];\n}\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  guides,\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)\n      rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView, isRevealed]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n  const depth = isRootSpan ? 0 : (guides?.length ?? 0) + 1;\n  const [kind, value] = splitSpanName(span.name);\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('relative flex cursor-pointer items-stretch rounded-md pl-1 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n    >\n      <SpanTreeRail depth={depth} guides={guides ?? []} isLastChild={isLastChild} hasStem={hasChildren && isExpanded} />\n\n      <div\n        className=\"flex min-w-0 flex-1\"\n        style={{ paddingLeft: depth * SPAN_TREE_INDENT, paddingBlock: SPAN_TREE_PAD_Y }}\n      >\n        <span\n          className=\"flex shrink-0 items-center justify-center\"\n          style={{ width: SPAN_TREE_INDENT, height: SPAN_TREE_LINE }}\n        >\n          <SpanTypeBadge type={span.type} spanUI={spanUI} />\n        </span>\n\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <div data-slot=\"timeline-name-line\" className=\"flex min-w-0 items-center\" style={{ height: SPAN_TREE_LINE }}>\n            <button\n              type=\"button\"\n              className={cn(\n                'flex min-w-0 flex-1 cursor-pointer rounded-md px-2 text-left text-foreground',\n                focusRingInset,\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              <Txt\n                as=\"span\"\n                variant=\"body-sm\"\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 font-[450]\"\n              >\n                {kind ? (\n                  <>\n                    {kind}\n                    <span aria-hidden className=\"px-1 text-foreground/70\">\n                      ›\n                    </span>\n                    {value}\n                  </>\n                ) : (\n                  span.name\n                )}\n              </Txt>\n            </button>\n          </div>\n\n          {/* Duration always stacks under the name. */}\n          {meta && (\n            <Txt\n              as=\"span\"\n              variant=\"caption\"\n              tone=\"muted\"\n              style={{ marginTop: SPAN_TREE_META_GAP }}\n              className=\"truncate pl-2 leading-4 tabular-nums\"\n            >\n              {meta}\n            </Txt>\n          )}\n        </div>\n      </div>\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 justify-center pr-1\" style={{ paddingTop: SPAN_TREE_PAD_Y }}>\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              focusRing,\n            )}\n          >\n            {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","SpanTreeRail","SPAN_TREE_INDENT","SPAN_TREE_PAD_Y","SPAN_TREE_LINE","SpanTypeBadge","focusRingInset","Txt","Fragment","SPAN_TREE_META_GAP","focusRing","ChevronDownIcon","ChevronRightIcon"],"mappings":"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"}

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

@@ -1,20 +1,26 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
 import { useRef, useEffect } from 'react';
-import { TimelineStructureSign } from './timeline-structure-sign.es.js';
+import { SpanTreeRail, SPAN_TREE_PAD_Y, SPAN_TREE_LINE, SPAN_TREE_INDENT, SPAN_TREE_META_GAP } from './span-tree-rail.es.js';
+import { SpanTypeBadge } from './span-type-badge.es.js';
 import { T as Txt } from '../../../Txt-BtIGLRk1.js';
 import { focusRingInset, focusRing } from '../../../primitives/transitions.es.js';
 import { c as cn } from '../../../cn-CQUhN5Jx.js';
 
+function splitSpanName(name) {
+  const index = name.indexOf(": ");
+  if (index < 0) return [null, name];
+  return [name.slice(0, index), name.slice(index + 2).replace(/^'(.*)'$/, "$1")];
+}
 function TimelineNameCol({
   span,
   spanUI,
   isFaded,
-  depth = 0,
   onSpanClick,
   selectedSpanId,
   revealSpanId,
   isLastChild,
+  guides,
   hasChildren,
   numOfChildren = 0,
   isRootSpan,
@@ -31,6 +37,8 @@ function TimelineNameCol({
       rowRef.current?.scrollIntoView({ block: isRevealed ? "center" : "nearest", behavior: "smooth" });
   }, [shouldScrollIntoView, isRevealed]);
   const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;
+  const depth = isRootSpan ? 0 : (guides?.length ?? 0) + 1;
+  const [kind, value] = splitSpanName(span.name);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -38,51 +46,69 @@ 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 hover:bg-fill-subtle", {
+      className: cn("relative flex cursor-pointer items-stretch rounded-md pl-1 hover:bg-fill-subtle", {
         "opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60": isFaded,
         "bg-fill-hover": isSelected
       }),
-      style: { paddingLeft: `${depth * 1}rem` },
       children: [
-        !isRootSpan && /* @__PURE__ */ jsx(TimelineStructureSign, { isLastChild }),
+        /* @__PURE__ */ jsx(SpanTreeRail, { depth, guides: guides ?? [], isLastChild, hasStem: hasChildren && isExpanded }),
         /* @__PURE__ */ jsxs(
-          "button",
+          "div",
           {
-            type: "button",
-            className: cn(
-              "text-foreground",
-              "flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left",
-              focusRingInset
-            ),
+            className: "flex min-w-0 flex-1",
+            style: { paddingLeft: depth * SPAN_TREE_INDENT, paddingBlock: SPAN_TREE_PAD_Y },
             children: [
-              spanUI?.color && /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 "span",
                 {
-                  "aria-hidden": true,
-                  title: spanUI.label,
-                  style: { backgroundColor: spanUI.color },
-                  className: "mt-[5px] inline-block size-2 shrink-0 rounded-full"
+                  className: "flex shrink-0 items-center justify-center",
+                  style: { width: SPAN_TREE_INDENT, height: SPAN_TREE_LINE },
+                  children: /* @__PURE__ */ jsx(SpanTypeBadge, { type: span.type, spanUI })
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-                /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                /* @__PURE__ */ jsx("div", { "data-slot": "timeline-name-line", className: "flex min-w-0 items-center", style: { height: SPAN_TREE_LINE }, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn(
+                      "flex min-w-0 flex-1 cursor-pointer rounded-md px-2 text-left text-foreground",
+                      focusRingInset
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      Txt,
+                      {
+                        as: "span",
+                        variant: "body-sm",
+                        "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 font-[450]",
+                        children: kind ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          kind,
+                          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-1 text-foreground/70", children: "›" }),
+                          value
+                        ] }) : span.name
+                      }
+                    )
+                  }
+                ) }),
+                meta && /* @__PURE__ */ jsx(
                   Txt,
                   {
                     as: "span",
                     variant: "caption",
-                    "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
+                    tone: "muted",
+                    style: { marginTop: SPAN_TREE_META_GAP },
+                    className: "truncate pl-2 leading-4 tabular-nums",
+                    children: meta
                   }
-                ),
-                meta && /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "muted", className: "shrink-0 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(
+        /* @__PURE__ */ jsx("div", { className: "flex w-8 shrink-0 justify-center pr-1", style: { paddingTop: SPAN_TREE_PAD_Y }, children: hasChildren && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",

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 { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\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)\n      rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView, isRevealed]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn('flex min-h-8 cursor-pointer items-stretch rounded-md opacity-80 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        type=\"button\"\n        className={cn(\n          'text-foreground',\n          'flex min-w-0 flex-1 cursor-pointer items-start gap-1.5 self-stretch rounded-md px-2 py-1 text-left',\n          focusRingInset,\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            style={{ backgroundColor: spanUI.color }}\n            className=\"mt-[5px] inline-block size-2 shrink-0 rounded-full\"\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 always stacks under the name. */}\n        <span className=\"flex min-w-0 flex-1 flex-col\">\n          <Txt\n            as=\"span\"\n            variant=\"caption\"\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          </Txt>\n          {meta && (\n            <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"shrink-0 tabular-nums\">\n              {meta}\n            </Txt>\n          )}\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              focusRing,\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 { SPAN_TREE_INDENT, SPAN_TREE_LINE, SPAN_TREE_META_GAP, SPAN_TREE_PAD_Y, SpanTreeRail } from './span-tree-rail';\nimport { SpanTypeBadge } from './span-type-badge';\nimport { Txt } from '@/ds/components/Txt';\nimport { focusRing, focusRingInset } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  guides?: 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\n/** `agent run: 'chef-agent'` → `['agent run', 'chef-agent']`; names without a `kind: ` prefix stay whole. */\nfunction splitSpanName(name: string): [kind: string | null, value: string] {\n  const index = name.indexOf(': ');\n  if (index < 0) return [null, name];\n  return [name.slice(0, index), name.slice(index + 2).replace(/^'(.*)'$/, '$1')];\n}\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  guides,\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)\n      rowRef.current?.scrollIntoView({ block: isRevealed ? 'center' : 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView, isRevealed]);\n\n  const toggleLabel = isExpanded ? `Collapse children (${numOfChildren})` : `Expand children (${numOfChildren})`;\n  const depth = isRootSpan ? 0 : (guides?.length ?? 0) + 1;\n  const [kind, value] = splitSpanName(span.name);\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('relative flex cursor-pointer items-stretch rounded-md pl-1 hover:bg-fill-subtle', {\n        'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n        'bg-fill-hover': isSelected,\n      })}\n    >\n      <SpanTreeRail depth={depth} guides={guides ?? []} isLastChild={isLastChild} hasStem={hasChildren && isExpanded} />\n\n      <div\n        className=\"flex min-w-0 flex-1\"\n        style={{ paddingLeft: depth * SPAN_TREE_INDENT, paddingBlock: SPAN_TREE_PAD_Y }}\n      >\n        <span\n          className=\"flex shrink-0 items-center justify-center\"\n          style={{ width: SPAN_TREE_INDENT, height: SPAN_TREE_LINE }}\n        >\n          <SpanTypeBadge type={span.type} spanUI={spanUI} />\n        </span>\n\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <div data-slot=\"timeline-name-line\" className=\"flex min-w-0 items-center\" style={{ height: SPAN_TREE_LINE }}>\n            <button\n              type=\"button\"\n              className={cn(\n                'flex min-w-0 flex-1 cursor-pointer rounded-md px-2 text-left text-foreground',\n                focusRingInset,\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              <Txt\n                as=\"span\"\n                variant=\"body-sm\"\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 font-[450]\"\n              >\n                {kind ? (\n                  <>\n                    {kind}\n                    <span aria-hidden className=\"px-1 text-foreground/70\">\n                      ›\n                    </span>\n                    {value}\n                  </>\n                ) : (\n                  span.name\n                )}\n              </Txt>\n            </button>\n          </div>\n\n          {/* Duration always stacks under the name. */}\n          {meta && (\n            <Txt\n              as=\"span\"\n              variant=\"caption\"\n              tone=\"muted\"\n              style={{ marginTop: SPAN_TREE_META_GAP }}\n              className=\"truncate pl-2 leading-4 tabular-nums\"\n            >\n              {meta}\n            </Txt>\n          )}\n        </div>\n      </div>\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 justify-center pr-1\" style={{ paddingTop: SPAN_TREE_PAD_Y }}>\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              focusRing,\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

@@ -5,20 +5,29 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('../../../cn-DlOJCxrS.cjs');
 
-function TimelineStructureSign({ isLastChild }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: utils_cn.cn(
-        "relative w-2 shrink-0 self-stretch opacity-100",
-        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[""]',
-        '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
-        }
-      )
-    }
-  );
+const column = "flex w-4 shrink-0 flex-col items-center self-stretch";
+const vertical = "w-0 flex-1 border-l border-dashed border-surface-overlay-strong";
+function TimelineStructureSign({
+  guides = [],
+  isRootSpan,
+  isLastChild,
+  hasStem,
+  dot
+}) {
+  const isHead = dot !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    guides.map((show, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: column, children: show && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "timeline-structure-guide", className: vertical }) }, index)),
+    !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: utils_cn.cn(column, "relative"), children: isHead ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: vertical }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn(vertical, isLastChild && "invisible") }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-1/2 -right-1 left-1/2 border-t border-dashed border-surface-overlay-strong" })
+    ] }) : !isLastChild && /* @__PURE__ */ jsxRuntime.jsx("span", { className: vertical }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: column, children: isHead ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-0.5 flex-1" }),
+      dot,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn(vertical, "mt-0.5", !hasStem && "invisible") })
+    ] }) : hasStem && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: vertical }) })
+  ] });
 }
 
 exports.TimelineStructureSign = TimelineStructureSign;

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

@@ -1 +1 @@
-{"version":3,"file":"timeline-structure-sign.cjs.js","sources":["../../../../src/domains/traces/components/timeline-structure-sign.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\ntype TimelineStructureSignProps = {\n  isLastChild?: boolean;\n};\n\nexport function TimelineStructureSign({ isLastChild }: TimelineStructureSignProps) {\n  return (\n    <div\n      className={cn(\n        'relative w-2 shrink-0 self-stretch opacity-100',\n        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[\"\"]',\n        'before:absolute before:top-[50%] before:left-0 before:h-0 before:w-full before:border-b-[1px] before:border-dashed before:border-muted-foreground before:content-[\"\"]',\n        {\n          'after:bottom-[50%]': isLastChild,\n        },\n      )}\n    />\n  );\n}\n"],"names":["jsx","cn"],"mappings":";;;;;;;AAMO,SAAS,qBAAA,CAAsB,EAAE,WAAA,EAAY,EAA+B;AACjF,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,gDAAA;AAAA,QACA,mJAAA;AAAA,QACA,uKAAA;AAAA,QACA;AAAA,UACE,oBAAA,EAAsB;AAAA;AACxB;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-structure-sign.cjs.js","sources":["../../../../src/domains/traces/components/timeline-structure-sign.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst column = 'flex w-4 shrink-0 flex-col items-center self-stretch';\nconst vertical = 'w-0 flex-1 border-l border-dashed border-surface-overlay-strong';\n\ntype TimelineStructureSignProps = {\n  /** Per ancestor level (shallowest first): whether that level's connector continues past this row. */\n  guides?: boolean[];\n  isRootSpan?: boolean;\n  isLastChild?: boolean;\n  /** Draw the line from this row's dot down to its children. */\n  hasStem?: boolean;\n  /** The status dot. Omit on continuation lines (the part of a row under its first line). */\n  dot?: ReactNode;\n};\n\n/**\n * Tree rail rendered before a span name: one equal-width column per ancestor level, the\n * connector column, then the dot column. Every column centres its line, so a parent's dot\n * column lines up with its children's connector column without any offset math.\n */\nexport function TimelineStructureSign({\n  guides = [],\n  isRootSpan,\n  isLastChild,\n  hasStem,\n  dot,\n}: TimelineStructureSignProps) {\n  const isHead = dot !== undefined;\n\n  return (\n    <>\n      {guides.map((show, index) => (\n        <span key={index} aria-hidden className={column}>\n          {show && <span data-testid=\"timeline-structure-guide\" className={vertical} />}\n        </span>\n      ))}\n\n      {!isRootSpan && (\n        <span aria-hidden className={cn(column, 'relative')}>\n          {isHead ? (\n            <>\n              <span className={vertical} />\n              <span className={cn(vertical, isLastChild && 'invisible')} />\n              <span className=\"absolute top-1/2 -right-1 left-1/2 border-t border-dashed border-surface-overlay-strong\" />\n            </>\n          ) : (\n            !isLastChild && <span className={vertical} />\n          )}\n        </span>\n      )}\n\n      <span className={column}>\n        {isHead ? (\n          <>\n            <span className=\"mb-0.5 flex-1\" />\n            {dot}\n            <span className={cn(vertical, 'mt-0.5', !hasStem && 'invisible')} />\n          </>\n        ) : (\n          hasStem && <span aria-hidden className={vertical} />\n        )}\n      </span>\n    </>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","cn"],"mappings":";;;;;;;AAGA,MAAM,MAAA,GAAS,sDAAA;AACf,MAAM,QAAA,GAAW,iEAAA;AAkBV,SAAS,qBAAA,CAAsB;AAAA,EACpC,SAAS,EAAC;AAAA,EACV,UAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,MAAM,SAAS,GAAA,KAAQ,MAAA;AAEvB,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,MAAA,CAAO,IAAI,CAAC,IAAA,EAAM,0BACjBC,cAAA,CAAC,MAAA,EAAA,EAAiB,eAAW,IAAA,EAAC,SAAA,EAAW,QACtC,QAAA,EAAA,IAAA,oBAAQA,cAAA,CAAC,UAAK,aAAA,EAAY,0BAAA,EAA2B,WAAW,QAAA,EAAU,CAAA,EAAA,EADlE,KAEX,CACD,CAAA;AAAA,IAEA,CAAC,UAAA,oBACAA,cAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAWC,WAAA,CAAG,MAAA,EAAQ,UAAU,CAAA,EAC/C,QAAA,EAAA,MAAA,mBACCH,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,WAAW,QAAA,EAAU,CAAA;AAAA,qCAC1B,MAAA,EAAA,EAAK,SAAA,EAAWC,YAAG,QAAA,EAAU,WAAA,IAAe,WAAW,CAAA,EAAG,CAAA;AAAA,sBAC3DD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yFAAA,EAA0F;AAAA,KAAA,EAC5G,IAEA,CAAC,WAAA,mCAAgB,MAAA,EAAA,EAAK,SAAA,EAAW,UAAU,CAAA,EAE/C,CAAA;AAAA,oBAGFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,EACd,mCACCF,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,eAAA,EAAgB,CAAA;AAAA,MAC/B,GAAA;AAAA,sBACDA,cAAA,CAAC,UAAK,SAAA,EAAWC,WAAA,CAAG,UAAU,QAAA,EAAU,CAAC,OAAA,IAAW,WAAW,CAAA,EAAG;AAAA,KAAA,EACpE,CAAA,GAEA,2BAAWD,cAAA,CAAC,MAAA,EAAA,EAAK,eAAW,IAAA,EAAC,SAAA,EAAW,UAAU,CAAA,EAEtD;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,20 +1,29 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { c as cn } from '../../../cn-CQUhN5Jx.js';
 
-function TimelineStructureSign({ isLastChild }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "relative w-2 shrink-0 self-stretch opacity-100",
-        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[""]',
-        '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
-        }
-      )
-    }
-  );
+const column = "flex w-4 shrink-0 flex-col items-center self-stretch";
+const vertical = "w-0 flex-1 border-l border-dashed border-surface-overlay-strong";
+function TimelineStructureSign({
+  guides = [],
+  isRootSpan,
+  isLastChild,
+  hasStem,
+  dot
+}) {
+  const isHead = dot !== void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    guides.map((show, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: column, children: show && /* @__PURE__ */ jsx("span", { "data-testid": "timeline-structure-guide", className: vertical }) }, index)),
+    !isRootSpan && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(column, "relative"), children: isHead ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: vertical }),
+      /* @__PURE__ */ jsx("span", { className: cn(vertical, isLastChild && "invisible") }),
+      /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 -right-1 left-1/2 border-t border-dashed border-surface-overlay-strong" })
+    ] }) : !isLastChild && /* @__PURE__ */ jsx("span", { className: vertical }) }),
+    /* @__PURE__ */ jsx("span", { className: column, children: isHead ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "mb-0.5 flex-1" }),
+      dot,
+      /* @__PURE__ */ jsx("span", { className: cn(vertical, "mt-0.5", !hasStem && "invisible") })
+    ] }) : hasStem && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: vertical }) })
+  ] });
 }
 
 export { TimelineStructureSign };

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

@@ -1 +1 @@
-{"version":3,"file":"timeline-structure-sign.es.js","sources":["../../../../src/domains/traces/components/timeline-structure-sign.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\ntype TimelineStructureSignProps = {\n  isLastChild?: boolean;\n};\n\nexport function TimelineStructureSign({ isLastChild }: TimelineStructureSignProps) {\n  return (\n    <div\n      className={cn(\n        'relative w-2 shrink-0 self-stretch opacity-100',\n        'after:absolute after:inset-y-0 after:-left-px after:w-0 after:border-l-[1px] after:border-dashed after:border-muted-foreground after:content-[\"\"]',\n        'before:absolute before:top-[50%] before:left-0 before:h-0 before:w-full before:border-b-[1px] before:border-dashed before:border-muted-foreground before:content-[\"\"]',\n        {\n          'after:bottom-[50%]': isLastChild,\n        },\n      )}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,qBAAA,CAAsB,EAAE,WAAA,EAAY,EAA+B;AACjF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,gDAAA;AAAA,QACA,mJAAA;AAAA,QACA,uKAAA;AAAA,QACA;AAAA,UACE,oBAAA,EAAsB;AAAA;AACxB;AACF;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-structure-sign.es.js","sources":["../../../../src/domains/traces/components/timeline-structure-sign.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst column = 'flex w-4 shrink-0 flex-col items-center self-stretch';\nconst vertical = 'w-0 flex-1 border-l border-dashed border-surface-overlay-strong';\n\ntype TimelineStructureSignProps = {\n  /** Per ancestor level (shallowest first): whether that level's connector continues past this row. */\n  guides?: boolean[];\n  isRootSpan?: boolean;\n  isLastChild?: boolean;\n  /** Draw the line from this row's dot down to its children. */\n  hasStem?: boolean;\n  /** The status dot. Omit on continuation lines (the part of a row under its first line). */\n  dot?: ReactNode;\n};\n\n/**\n * Tree rail rendered before a span name: one equal-width column per ancestor level, the\n * connector column, then the dot column. Every column centres its line, so a parent's dot\n * column lines up with its children's connector column without any offset math.\n */\nexport function TimelineStructureSign({\n  guides = [],\n  isRootSpan,\n  isLastChild,\n  hasStem,\n  dot,\n}: TimelineStructureSignProps) {\n  const isHead = dot !== undefined;\n\n  return (\n    <>\n      {guides.map((show, index) => (\n        <span key={index} aria-hidden className={column}>\n          {show && <span data-testid=\"timeline-structure-guide\" className={vertical} />}\n        </span>\n      ))}\n\n      {!isRootSpan && (\n        <span aria-hidden className={cn(column, 'relative')}>\n          {isHead ? (\n            <>\n              <span className={vertical} />\n              <span className={cn(vertical, isLastChild && 'invisible')} />\n              <span className=\"absolute top-1/2 -right-1 left-1/2 border-t border-dashed border-surface-overlay-strong\" />\n            </>\n          ) : (\n            !isLastChild && <span className={vertical} />\n          )}\n        </span>\n      )}\n\n      <span className={column}>\n        {isHead ? (\n          <>\n            <span className=\"mb-0.5 flex-1\" />\n            {dot}\n            <span className={cn(vertical, 'mt-0.5', !hasStem && 'invisible')} />\n          </>\n        ) : (\n          hasStem && <span aria-hidden className={vertical} />\n        )}\n      </span>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,MAAA,GAAS,sDAAA;AACf,MAAM,QAAA,GAAW,iEAAA;AAkBV,SAAS,qBAAA,CAAsB;AAAA,EACpC,SAAS,EAAC;AAAA,EACV,UAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,MAAM,SAAS,GAAA,KAAQ,MAAA;AAEvB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,MAAA,CAAO,IAAI,CAAC,IAAA,EAAM,0BACjB,GAAA,CAAC,MAAA,EAAA,EAAiB,eAAW,IAAA,EAAC,SAAA,EAAW,QACtC,QAAA,EAAA,IAAA,oBAAQ,GAAA,CAAC,UAAK,aAAA,EAAY,0BAAA,EAA2B,WAAW,QAAA,EAAU,CAAA,EAAA,EADlE,KAEX,CACD,CAAA;AAAA,IAEA,CAAC,UAAA,oBACA,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,EAAA,CAAG,MAAA,EAAQ,UAAU,CAAA,EAC/C,QAAA,EAAA,MAAA,mBACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,QAAA,EAAU,CAAA;AAAA,0BAC1B,MAAA,EAAA,EAAK,SAAA,EAAW,GAAG,QAAA,EAAU,WAAA,IAAe,WAAW,CAAA,EAAG,CAAA;AAAA,sBAC3D,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yFAAA,EAA0F;AAAA,KAAA,EAC5G,IAEA,CAAC,WAAA,wBAAgB,MAAA,EAAA,EAAK,SAAA,EAAW,UAAU,CAAA,EAE/C,CAAA;AAAA,oBAGF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,EACd,mCACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,eAAA,EAAgB,CAAA;AAAA,MAC/B,GAAA;AAAA,sBACD,GAAA,CAAC,UAAK,SAAA,EAAW,EAAA,CAAG,UAAU,QAAA,EAAU,CAAC,OAAA,IAAW,WAAW,CAAA,EAAG;AAAA,KAAA,EACpE,CAAA,GAEA,2BAAW,GAAA,CAAC,MAAA,EAAA,EAAK,eAAW,IAAA,EAAC,SAAA,EAAW,UAAU,CAAA,EAEtD;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -6,16 +6,16 @@ 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-DH1aTzbs.cjs');
-const combobox = require('../../../combobox-BNlVCFgY.cjs');
+const Button = require('../../../Button-C4I05uT4.cjs');
+const combobox = require('../../../combobox-DbZAWh8q.cjs');
 require('@base-ui/react/combobox');
-const dialog = require('../../../dialog-BMUfQ9XU.cjs');
+const dialog = require('../../../dialog-SSeOqRnH.cjs');
 const dropdownMenu = require('../../../dropdown-menu-CsynT1aD.cjs');
 const field = require('../../../field-BCU5ZtWV.cjs');
 require('../../../field-control-aria-WzMGs0A4.cjs');
 const form = require('../../../form-Cw-n1rd9.cjs');
 const Txt = require('../../../Txt-CIS2G5Jx.cjs');
-const dialogAction = require('../../../dialog-action-CmFDNyZX.cjs');
+const dialogAction = require('../../../dialog-action-Caa-pb85.cjs');
 
 const EMPTY_KEYS = [];
 const STANDARD_COLUMNS = [

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 } 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  DialogAction,\n  DialogBody,\n  DialogCancel,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { Field, FieldError, FieldLabel } from '@/ds/components/Field';\nimport { Form } from '@/ds/components/Form';\nimport { Txt } from '@/ds/components/Txt';\n\nconst EMPTY_KEYS: readonly string[] = [];\n\nconst STANDARD_COLUMNS: readonly TraceOptionalColumn[] = [\n  'type',\n  'input',\n  'output',\n  'duration',\n  'endTime',\n  'environment',\n];\n\nconst COLUMN_LABELS: Record<TraceOptionalColumn, string> = {\n  type: 'Primitive type',\n  input: 'Input',\n  output: 'Output',\n  duration: 'Duration',\n  endTime: 'End',\n  environment: 'Environment',\n  inputTokens: 'Input tokens',\n  outputTokens: 'Output tokens',\n  totalTokens: 'Total tokens',\n  estimatedCost: 'Estimated cost',\n};\n\ntype TraceColumnsMenuProps = {\n  preferences: TraceColumnPreferences;\n  /** Top-level metadata keys observed on traces in the current time range, offered in the picker. */\n  availableMetadataKeys?: readonly string[];\n  usageDisabledReason?: string;\n  /** When false (server without the trace-query API), metadata columns can't be added. Defaults to true. */\n  withQueryTrace?: boolean;\n  onToggleColumn: (column: TraceOptionalColumn) => void;\n  onAddCustomColumn: (field: TraceCustomColumn) => void;\n  onRemoveCustomColumn: (field: TraceCustomColumn) => void;\n  onAddMetadataColumn: (key: string) => void;\n  onRemoveMetadataColumn: (key: string) => void;\n  onReset: () => void;\n};\n\nexport function TraceColumnsMenu({\n  preferences,\n  availableMetadataKeys = EMPTY_KEYS,\n  usageDisabledReason,\n  withQueryTrace = true,\n  onToggleColumn,\n  onAddCustomColumn,\n  onRemoveCustomColumn,\n  onAddMetadataColumn,\n  onRemoveMetadataColumn,\n  onReset,\n}: TraceColumnsMenuProps) {\n  const [isMetadataDialogOpen, setIsMetadataDialogOpen] = useState(false);\n  const [metadataKey, setMetadataKey] = useState('');\n  const [metadataError, setMetadataError] = useState<string | undefined>();\n\n  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            <Txt variant=\"meta\" tone=\"faint\" className=\"px-2 py-1\" role=\"note\">\n              {usageDisabledReason}\n            </Txt>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Custom columns</DropdownMenu.Label>\n          {TRACE_CUSTOM_COLUMN_FIELDS.map(field => {\n            const isVisible = preferences.customColumns.includes(field);\n            return (\n              <DropdownMenu.CheckboxItem\n                key={field}\n                checked={isVisible}\n                onCheckedChange={() => (isVisible ? onRemoveCustomColumn(field) : onAddCustomColumn(field))}\n              >\n                {TRACE_CUSTOM_COLUMN_LABELS[field]}\n              </DropdownMenu.CheckboxItem>\n            );\n          })}\n\n          {(withQueryTrace || preferences.metadataKeys.length > 0) && (\n            <>\n              <DropdownMenu.Separator />\n              <DropdownMenu.Label>Metadata columns</DropdownMenu.Label>\n              {preferences.metadataKeys.map(key => (\n                <DropdownMenu.CheckboxItem\n                  key={key}\n                  checked\n                  title={key}\n                  onCheckedChange={() => onRemoveMetadataColumn(key)}\n                >\n                  {key}\n                </DropdownMenu.CheckboxItem>\n              ))}\n              {withQueryTrace && (\n                <DropdownMenu.Item onSelect={() => setIsMetadataDialogOpen(true)}>\n                  <PlusIcon aria-hidden />\n                  Add metadata column\n                </DropdownMenu.Item>\n              )}\n            </>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item onSelect={onReset}>Reset to defaults</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      {withQueryTrace && (\n        <Dialog open={isMetadataDialogOpen} onOpenChange={handleDialogOpenChange}>\n          <DialogContent>\n            <Form onSubmit={handleAddMetadata} className=\"gap-0\">\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                <Field invalid={Boolean(metadataError)}>\n                  <FieldLabel>Metadata key</FieldLabel>\n                  <Combobox\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                  />\n                  <FieldError>{metadataError}</FieldError>\n                </Field>\n              </DialogBody>\n              <DialogFooter>\n                <DialogCancel>Cancel</DialogCancel>\n                <DialogAction type=\"submit\">Add column</DialogAction>\n              </DialogFooter>\n            </Form>\n          </DialogContent>\n        </Dialog>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","jsxs","Fragment","DropdownMenu","jsx","Button","Columns3Icon","TRACE_USAGE_COLUMNS","Txt","TRACE_CUSTOM_COLUMN_FIELDS","PlusIcon","Dialog","DialogContent","Form","DialogHeader","DialogTitle","DialogDescription","DialogBody","Field","FieldLabel","Combobox","FieldError","DialogFooter","DialogCancel","DialogAction"],"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 } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport 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  DialogAction,\n  DialogBody,\n  DialogCancel,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { Field, FieldError, FieldLabel } from '@/ds/components/Field';\nimport { Form } from '@/ds/components/Form';\nimport { Txt } from '@/ds/components/Txt';\n\nconst EMPTY_KEYS: readonly string[] = [];\n\nconst STANDARD_COLUMNS: readonly TraceOptionalColumn[] = [\n  'type',\n  'input',\n  'output',\n  'duration',\n  'endTime',\n  'environment',\n];\n\nconst COLUMN_LABELS: Record<TraceOptionalColumn, string> = {\n  type: 'Primitive type',\n  input: 'Input',\n  output: 'Output',\n  duration: 'Duration',\n  endTime: 'End',\n  environment: 'Environment',\n  inputTokens: 'Input tokens',\n  outputTokens: 'Output tokens',\n  totalTokens: 'Total tokens',\n  estimatedCost: 'Estimated cost',\n};\n\ntype TraceColumnsMenuProps = {\n  preferences: TraceColumnPreferences;\n  /** Top-level metadata keys observed on traces in the current time range, offered in the picker. */\n  availableMetadataKeys?: readonly string[];\n  usageDisabledReason?: string;\n  /** When false (server without the trace-query API), metadata columns can't be added. Defaults to true. */\n  withQueryTrace?: boolean;\n  onToggleColumn: (column: TraceOptionalColumn) => void;\n  onAddCustomColumn: (field: TraceCustomColumn) => void;\n  onRemoveCustomColumn: (field: TraceCustomColumn) => void;\n  onAddMetadataColumn: (key: string) => void;\n  onRemoveMetadataColumn: (key: string) => void;\n  onReset: () => void;\n};\n\nexport function TraceColumnsMenu({\n  preferences,\n  availableMetadataKeys = EMPTY_KEYS,\n  usageDisabledReason,\n  withQueryTrace = true,\n  onToggleColumn,\n  onAddCustomColumn,\n  onRemoveCustomColumn,\n  onAddMetadataColumn,\n  onRemoveMetadataColumn,\n  onReset,\n}: TraceColumnsMenuProps) {\n  const [isMetadataDialogOpen, setIsMetadataDialogOpen] = useState(false);\n  const [metadataKey, setMetadataKey] = useState('');\n  const [metadataError, setMetadataError] = useState<string | undefined>();\n\n  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            <Txt variant=\"meta\" tone=\"faint\" className=\"px-2 py-1\" role=\"note\">\n              {usageDisabledReason}\n            </Txt>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Custom columns</DropdownMenu.Label>\n          {TRACE_CUSTOM_COLUMN_FIELDS.map(field => {\n            const isVisible = preferences.customColumns.includes(field);\n            return (\n              <DropdownMenu.CheckboxItem\n                key={field}\n                checked={isVisible}\n                onCheckedChange={() => (isVisible ? onRemoveCustomColumn(field) : onAddCustomColumn(field))}\n              >\n                {TRACE_CUSTOM_COLUMN_LABELS[field]}\n              </DropdownMenu.CheckboxItem>\n            );\n          })}\n\n          {(withQueryTrace || preferences.metadataKeys.length > 0) && (\n            <>\n              <DropdownMenu.Separator />\n              <DropdownMenu.Label>Metadata columns</DropdownMenu.Label>\n              {preferences.metadataKeys.map(key => (\n                <DropdownMenu.CheckboxItem\n                  key={key}\n                  checked\n                  title={key}\n                  onCheckedChange={() => onRemoveMetadataColumn(key)}\n                >\n                  {key}\n                </DropdownMenu.CheckboxItem>\n              ))}\n              {withQueryTrace && (\n                <DropdownMenu.Item onSelect={() => setIsMetadataDialogOpen(true)}>\n                  <PlusIcon aria-hidden />\n                  Add metadata column\n                </DropdownMenu.Item>\n              )}\n            </>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item onSelect={onReset}>Reset to defaults</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      {withQueryTrace && (\n        <Dialog open={isMetadataDialogOpen} onOpenChange={handleDialogOpenChange}>\n          <DialogContent>\n            <Form onSubmit={handleAddMetadata} className=\"gap-0\">\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                <Field invalid={Boolean(metadataError)}>\n                  <FieldLabel>Metadata key</FieldLabel>\n                  <Combobox\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                  />\n                  <FieldError>{metadataError}</FieldError>\n                </Field>\n              </DialogBody>\n              <DialogFooter>\n                <DialogCancel>Cancel</DialogCancel>\n                <DialogAction type=\"submit\">Add column</DialogAction>\n              </DialogFooter>\n            </Form>\n          </DialogContent>\n        </Dialog>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","jsxs","Fragment","DropdownMenu","jsx","Button","Columns3Icon","TRACE_USAGE_COLUMNS","Txt","TRACE_CUSTOM_COLUMN_FIELDS","PlusIcon","Dialog","DialogContent","Form","DialogHeader","DialogTitle","DialogDescription","DialogBody","Field","FieldLabel","Combobox","FieldError","DialogFooter","DialogCancel","DialogAction"],"mappings":"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"}