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

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

@@ -0,0 +1 @@
+{"version":3,"file":"span-timeline-row.cjs.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\nexport type SpanTimelineRowProps = {\n  ctx: SpanRowContext;\n};\n\nfunction formatDuration(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n */\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n  const {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected,\n    isFaded,\n    isRevealed,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion,\n  } = ctx;\n  const rowRef = useRef<HTMLDivElement>(null);\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n  useEffect(() => {\n    if (!shouldScrollIntoView) return;\n    rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n  const toggleLabel = isExpanded\n    ? `Collapse children (${expansion.numOfChildren})`\n    : `Expand children (${expansion.numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn(\n        'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 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    >\n      <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n        {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n        <button\n          type=\"button\"\n          className={cn(\n            'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-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          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n        </button>\n\n        {/* Slot is always present so names stay aligned whether or not the span has children. */}\n        <div className=\"flex w-7 shrink-0 items-center justify-center\">\n          {expansion.hasChildren && (\n            <button\n              type=\"button\"\n              onClick={e => {\n                e.stopPropagation();\n                expansion.toggleChildren();\n              }}\n              aria-label={toggleLabel}\n              aria-expanded={isExpanded}\n              className={cn(\n                'flex size-5 cursor-pointer items-center justify-center rounded-md 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      <HoverCard>\n        <HoverCardTrigger\n          render={<div />}\n          className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n        >\n          <div className=\"bg-surface5/40 relative h-4 w-full rounded-sm\">\n            <div\n              data-testid=\"span-timeline-bar\"\n              className=\"absolute inset-y-0 rounded-sm\"\n              style={{\n                left: `${leftPercent}%`,\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                backgroundColor: spanUI?.color,\n              }}\n            />\n          </div>\n          <div className=\"text-ui-xs text-neutral3 w-12 text-right tabular-nums\">{formatDuration(span.latency)}</div>\n        </HoverCardTrigger>\n        <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n      </HoverCard>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","getSpanTimingLayout","jsxs","cn","jsx","TimelineStructureSign","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","SpanTimingHoverCard"],"mappings":"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"}

package/dist/domains/traces/components/span-timeline-row.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/span-timeline-row'
+export {}

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

@@ -0,0 +1,135 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
+import { useRef, useEffect } from 'react';
+import { getSpanTimingLayout } from '../utils/span-timing.es.js';
+import { SpanTimingHoverCard } from './span-timing-hover-card.es.js';
+import { TimelineStructureSign } from './timeline-structure-sign.es.js';
+import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-Cmh0QRP8.js';
+import { c as cn } from '../../../cn-C6s2yXwM.js';
+
+function formatDuration(ms) {
+  return ms < 1e3 ? `${Math.round(ms)} ms` : `${(ms / 1e3).toFixed(2)} s`;
+}
+function SpanTimelineRow({ ctx }) {
+  const {
+    span,
+    spanUI,
+    depth,
+    isRootSpan,
+    isLastChild,
+    isExpanded,
+    isSelected,
+    isFaded,
+    isRevealed,
+    overallLatency,
+    overallStartTime,
+    onSpanClick,
+    expansion
+  } = ctx;
+  const rowRef = useRef(null);
+  const shouldScrollIntoView = isSelected || isRevealed;
+  useEffect(() => {
+    if (!shouldScrollIntoView) return;
+    rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView]);
+  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);
+  const toggleLabel = isExpanded ? `Collapse children (${expansion.numOfChildren})` : `Expand children (${expansion.numOfChildren})`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rowRef,
+      "aria-label": `View details for span ${span.name}`,
+      "aria-selected": isSelected,
+      onClick: () => onSpanClick?.(span.id),
+      className: cn(
+        "col-span-2 grid h-7 cursor-pointer grid-cols-subgrid 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
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-stretch", style: { paddingLeft: `${depth}rem` }, children: [
+          !isRootSpan && /* @__PURE__ */ jsx(TimelineStructureSign, { isLastChild }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-ui-sm text-neutral6",
+                "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset"
+              ),
+              children: [
+                spanUI?.color && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    title: spanUI.label,
+                    className: "inline-block size-2 shrink-0 rounded-full",
+                    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__ */ jsx("div", { className: "flex w-7 shrink-0 items-center justify-center", children: expansion.hasChildren && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                expansion.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, {})
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(HoverCard, { children: [
+          /* @__PURE__ */ jsxs(
+            HoverCardTrigger,
+            {
+              render: /* @__PURE__ */ jsx("div", {}),
+              className: "grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "bg-surface5/40 relative h-4 w-full rounded-sm", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-testid": "span-timeline-bar",
+                    className: "absolute inset-y-0 rounded-sm",
+                    style: {
+                      left: `${leftPercent}%`,
+                      width: widthPercent ? `${widthPercent}%` : "2px",
+                      backgroundColor: spanUI?.color
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: "text-ui-xs text-neutral3 w-12 text-right tabular-nums", children: formatDuration(span.latency) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(SpanTimingHoverCard, { span, startShiftMs })
+        ] })
+      ]
+    }
+  );
+}
+
+export { SpanTimelineRow };
+//# sourceMappingURL=span-timeline-row.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"span-timeline-row.es.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\nexport type SpanTimelineRowProps = {\n  ctx: SpanRowContext;\n};\n\nfunction formatDuration(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n */\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n  const {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected,\n    isFaded,\n    isRevealed,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion,\n  } = ctx;\n  const rowRef = useRef<HTMLDivElement>(null);\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n  useEffect(() => {\n    if (!shouldScrollIntoView) return;\n    rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n  const toggleLabel = isExpanded\n    ? `Collapse children (${expansion.numOfChildren})`\n    : `Expand children (${expansion.numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn(\n        'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 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    >\n      <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n        {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n        <button\n          type=\"button\"\n          className={cn(\n            'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-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          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n        </button>\n\n        {/* Slot is always present so names stay aligned whether or not the span has children. */}\n        <div className=\"flex w-7 shrink-0 items-center justify-center\">\n          {expansion.hasChildren && (\n            <button\n              type=\"button\"\n              onClick={e => {\n                e.stopPropagation();\n                expansion.toggleChildren();\n              }}\n              aria-label={toggleLabel}\n              aria-expanded={isExpanded}\n              className={cn(\n                'flex size-5 cursor-pointer items-center justify-center rounded-md 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      <HoverCard>\n        <HoverCardTrigger\n          render={<div />}\n          className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n        >\n          <div className=\"bg-surface5/40 relative h-4 w-full rounded-sm\">\n            <div\n              data-testid=\"span-timeline-bar\"\n              className=\"absolute inset-y-0 rounded-sm\"\n              style={{\n                left: `${leftPercent}%`,\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                backgroundColor: spanUI?.color,\n              }}\n            />\n          </div>\n          <div className=\"text-ui-xs text-neutral3 w-12 text-right tabular-nums\">{formatDuration(span.latency)}</div>\n        </HoverCardTrigger>\n        <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n      </HoverCard>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const format = require('date-fns/format');
-const dataKeysAndValues = require('../../../data-keys-and-values-CUqVRfqS.cjs');
-const hoverCard = require('../../../hover-card-B_Wz_e0F.cjs');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-CPUfobZS.cjs');
+const hoverCard = require('../../../hover-card-BSj1EgQs.cjs');
+const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
 
 function SpanTimingHoverCard({ span, startShiftMs }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(hoverCard.HoverCardContent, { className: "bg-surface4 pr-6", children: [

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

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { format } from 'date-fns/format';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-778xnwOK.js';
-import { a as HoverCardContent } from '../../../hover-card-B5zQKp9k.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-BxSKCdWQ.js';
+import { a as HoverCardContent } from '../../../hover-card-Cmh0QRP8.js';
+import { c as cn } from '../../../cn-C6s2yXwM.js';
 
 function SpanTimingHoverCard({ span, startShiftMs }) {
   return /* @__PURE__ */ jsxs(HoverCardContent, { className: "bg-surface4 pr-6", children: [

package/dist/domains/traces/components/span-token-usage.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_spanTokenUsage_utils = require('./span-token-usage.utils.cjs.js');
-const dataKeysAndValues = require('../../../data-keys-and-values-CUqVRfqS.cjs');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-CPUfobZS.cjs');
+const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
 
 const detailKeyLabels = {
   text: "Text",

package/dist/domains/traces/components/span-token-usage.es.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { getTokenUsageView } from './span-token-usage.utils.es.js';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-778xnwOK.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-BxSKCdWQ.js';
+import { c as cn } from '../../../cn-C6s2yXwM.js';
 
 const detailKeyLabels = {
   text: "Text",

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const domains_traces_components_timelineExpandCol = require('./timeline-expand-col.cjs.js');
 const domains_traces_components_timelineNameCol = require('./timeline-name-col.cjs.js');
 
-function SpanTreeRow({ ctx, trailing }) {
+function SpanTreeRow({ ctx, meta, trailing }) {
   const { span, spanUI, depth, isRootSpan, isLastChild, isExpanded, isSelected, isFaded, onSpanClick, expansion } = ctx;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -21,27 +20,11 @@ function SpanTreeRow({ ctx, trailing }) {
         revealSpanId: ctx.isRevealed ? span.id : void 0,
         isLastChild,
         hasChildren: expansion.hasChildren,
+        numOfChildren: expansion.numOfChildren,
         isRootSpan,
-        isExpanded
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      domains_traces_components_timelineExpandCol.TimelineExpandCol,
-      {
-        isSelected,
-        isFaded,
         isExpanded,
-        isRootSpan,
         toggleChildren: expansion.toggleChildren,
-        expandAllDescendants: expansion.expandAllDescendants,
-        collapseAllDescendants: expansion.collapseAllDescendants,
-        collapseAll: expansion.collapseAll,
-        totalDescendants: expansion.totalDescendants,
-        allDescendantsExpanded: expansion.allDescendantsExpanded,
-        numOfChildren: expansion.numOfChildren,
-        toggleSiblings: expansion.toggleSiblings,
-        siblingsAllExpanded: expansion.siblingsAllExpanded,
-        siblingsWithChildrenCount: expansion.siblingsWithChildrenCount
+        meta: meta?.(ctx)
       }
     ),
     trailing?.(ctx)

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

@@ -1 +1 @@
-{"version":3,"file":"span-tree-row.cjs.js","sources":["../../../../src/domains/traces/components/span-tree-row.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { SpanRowContext } from './span-rows';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\n\nexport type SpanTreeRowProps = {\n  ctx: SpanRowContext;\n  /** Third grid cell rendered at the end of the row (duration text, timing bar, ...). */\n  trailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\n/** One hierarchy row: name + expansion controls + an optional trailing cell. Expects a 3-column grid parent. */\nexport function SpanTreeRow({ ctx, trailing }: SpanTreeRowProps) {\n  const { span, spanUI, depth, isRootSpan, isLastChild, isExpanded, isSelected, isFaded, onSpanClick, expansion } = ctx;\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={isSelected ? span.id : undefined}\n        revealSpanId={ctx.isRevealed ? span.id : undefined}\n        isLastChild={isLastChild}\n        hasChildren={expansion.hasChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n      />\n\n      <TimelineExpandCol\n        isSelected={isSelected}\n        isFaded={isFaded}\n        isExpanded={isExpanded}\n        isRootSpan={isRootSpan}\n        toggleChildren={expansion.toggleChildren}\n        expandAllDescendants={expansion.expandAllDescendants}\n        collapseAllDescendants={expansion.collapseAllDescendants}\n        collapseAll={expansion.collapseAll}\n        totalDescendants={expansion.totalDescendants}\n        allDescendantsExpanded={expansion.allDescendantsExpanded}\n        numOfChildren={expansion.numOfChildren}\n        toggleSiblings={expansion.toggleSiblings}\n        siblingsAllExpanded={expansion.siblingsAllExpanded}\n        siblingsWithChildrenCount={expansion.siblingsWithChildrenCount}\n      />\n\n      {trailing?.(ctx)}\n    </>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","TimelineNameCol","TimelineExpandCol"],"mappings":";;;;;;;;AAYO,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,QAAA,EAAS,EAAqB;AAC/D,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,KAAA,EAAO,UAAA,EAAY,WAAA,EAAa,UAAA,EAAY,UAAA,EAAY,OAAA,EAAS,WAAA,EAAa,SAAA,EAAU,GAAI,GAAA;AAElH,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,yDAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,cAAA,EAAgB,UAAA,GAAa,IAAA,CAAK,EAAA,GAAK,MAAA;AAAA,QACvC,YAAA,EAAc,GAAA,CAAI,UAAA,GAAa,IAAA,CAAK,EAAA,GAAK,MAAA;AAAA,QACzC,WAAA;AAAA,QACA,aAAa,SAAA,CAAU,WAAA;AAAA,QACvB,UAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,oBAEAD,cAAA;AAAA,MAACE,6DAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAgB,SAAA,CAAU,cAAA;AAAA,QAC1B,sBAAsB,SAAA,CAAU,oBAAA;AAAA,QAChC,wBAAwB,SAAA,CAAU,sBAAA;AAAA,QAClC,aAAa,SAAA,CAAU,WAAA;AAAA,QACvB,kBAAkB,SAAA,CAAU,gBAAA;AAAA,QAC5B,wBAAwB,SAAA,CAAU,sBAAA;AAAA,QAClC,eAAe,SAAA,CAAU,aAAA;AAAA,QACzB,gBAAgB,SAAA,CAAU,cAAA;AAAA,QAC1B,qBAAqB,SAAA,CAAU,mBAAA;AAAA,QAC/B,2BAA2B,SAAA,CAAU;AAAA;AAAA,KACvC;AAAA,IAEC,WAAW,GAAG;AAAA,GAAA,EACjB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"span-tree-row.cjs.js","sources":["../../../../src/domains/traces/components/span-tree-row.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { SpanRowContext } from './span-rows';\nimport { TimelineNameCol } from './timeline-name-col';\n\nexport type SpanTreeRowProps = {\n  ctx: SpanRowContext;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: (ctx: SpanRowContext) => ReactNode;\n  /** Second grid cell rendered at the end of the row (timing bar, ...). */\n  trailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\n/** One hierarchy row: expand toggle + name (+ meta line), then an optional trailing cell. Expects a grid parent with one column per cell. */\nexport function SpanTreeRow({ ctx, meta, trailing }: SpanTreeRowProps) {\n  const { span, spanUI, depth, isRootSpan, isLastChild, isExpanded, isSelected, isFaded, onSpanClick, expansion } = ctx;\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={isSelected ? span.id : undefined}\n        revealSpanId={ctx.isRevealed ? span.id : undefined}\n        isLastChild={isLastChild}\n        hasChildren={expansion.hasChildren}\n        numOfChildren={expansion.numOfChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n        toggleChildren={expansion.toggleChildren}\n        meta={meta?.(ctx)}\n      />\n\n      {trailing?.(ctx)}\n    </>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","TimelineNameCol"],"mappings":";;;;;;;AAaO,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,IAAA,EAAM,UAAS,EAAqB;AACrE,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,KAAA,EAAO,UAAA,EAAY,WAAA,EAAa,UAAA,EAAY,UAAA,EAAY,OAAA,EAAS,WAAA,EAAa,SAAA,EAAU,GAAI,GAAA;AAElH,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,yDAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,cAAA,EAAgB,UAAA,GAAa,IAAA,CAAK,EAAA,GAAK,MAAA;AAAA,QACvC,YAAA,EAAc,GAAA,CAAI,UAAA,GAAa,IAAA,CAAK,EAAA,GAAK,MAAA;AAAA,QACzC,WAAA;AAAA,QACA,aAAa,SAAA,CAAU,WAAA;AAAA,QACvB,eAAe,SAAA,CAAU,aAAA;AAAA,QACzB,UAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAgB,SAAA,CAAU,cAAA;AAAA,QAC1B,IAAA,EAAM,OAAO,GAAG;AAAA;AAAA,KAClB;AAAA,IAEC,WAAW,GAAG;AAAA,GAAA,EACjB,CAAA;AAEJ;;;;"}

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

@@ -1,8 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { TimelineExpandCol } from './timeline-expand-col.es.js';
 import { TimelineNameCol } from './timeline-name-col.es.js';
 
-function SpanTreeRow({ ctx, trailing }) {
+function SpanTreeRow({ ctx, meta, trailing }) {
   const { span, spanUI, depth, isRootSpan, isLastChild, isExpanded, isSelected, isFaded, onSpanClick, expansion } = ctx;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -17,27 +16,11 @@ function SpanTreeRow({ ctx, trailing }) {
         revealSpanId: ctx.isRevealed ? span.id : void 0,
         isLastChild,
         hasChildren: expansion.hasChildren,
+        numOfChildren: expansion.numOfChildren,
         isRootSpan,
-        isExpanded
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TimelineExpandCol,
-      {
-        isSelected,
-        isFaded,
         isExpanded,
-        isRootSpan,
         toggleChildren: expansion.toggleChildren,
-        expandAllDescendants: expansion.expandAllDescendants,
-        collapseAllDescendants: expansion.collapseAllDescendants,
-        collapseAll: expansion.collapseAll,
-        totalDescendants: expansion.totalDescendants,
-        allDescendantsExpanded: expansion.allDescendantsExpanded,
-        numOfChildren: expansion.numOfChildren,
-        toggleSiblings: expansion.toggleSiblings,
-        siblingsAllExpanded: expansion.siblingsAllExpanded,
-        siblingsWithChildrenCount: expansion.siblingsWithChildrenCount
+        meta: meta?.(ctx)
       }
     ),
     trailing?.(ctx)

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

@@ -1 +1 @@
-{"version":3,"file":"span-tree-row.es.js","sources":["../../../../src/domains/traces/components/span-tree-row.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { SpanRowContext } from './span-rows';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\n\nexport type SpanTreeRowProps = {\n  ctx: SpanRowContext;\n  /** Third grid cell rendered at the end of the row (duration text, timing bar, ...). */\n  trailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\n/** One hierarchy row: name + expansion controls + an optional trailing cell. Expects a 3-column grid parent. */\nexport function SpanTreeRow({ ctx, trailing }: SpanTreeRowProps) {\n  const { span, spanUI, depth, isRootSpan, isLastChild, isExpanded, isSelected, isFaded, onSpanClick, expansion } = ctx;\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={isSelected ? span.id : undefined}\n        revealSpanId={ctx.isRevealed ? span.id : undefined}\n        isLastChild={isLastChild}\n        hasChildren={expansion.hasChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n      />\n\n      <TimelineExpandCol\n        isSelected={isSelected}\n        isFaded={isFaded}\n        isExpanded={isExpanded}\n        isRootSpan={isRootSpan}\n        toggleChildren={expansion.toggleChildren}\n        expandAllDescendants={expansion.expandAllDescendants}\n        collapseAllDescendants={expansion.collapseAllDescendants}\n        collapseAll={expansion.collapseAll}\n        totalDescendants={expansion.totalDescendants}\n        allDescendantsExpanded={expansion.allDescendantsExpanded}\n        numOfChildren={expansion.numOfChildren}\n        toggleSiblings={expansion.toggleSiblings}\n        siblingsAllExpanded={expansion.siblingsAllExpanded}\n        siblingsWithChildrenCount={expansion.siblingsWithChildrenCount}\n      />\n\n      {trailing?.(ctx)}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,QAAA,EAAS,EAAqB;AAC/D,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,KAAA,EAAO,UAAA,EAAY,WAAA,EAAa,UAAA,EAAY,UAAA,EAAY,OAAA,EAAS,WAAA,EAAa,SAAA,EAAU,GAAI,GAAA;AAElH,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,cAAA,EAAgB,UAAA,GAAa,IAAA,CAAK,EAAA,GAAK,MAAA;AAAA,QACvC,YAAA,EAAc,GAAA,CAAI,UAAA,GAAa,IAAA,CAAK,EAAA,GAAK,MAAA;AAAA,QACzC,WAAA;AAAA,QACA,aAAa,SAAA,CAAU,WAAA;AAAA,QACvB,UAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,oBAEA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAgB,SAAA,CAAU,cAAA;AAAA,QAC1B,sBAAsB,SAAA,CAAU,oBAAA;AAAA,QAChC,wBAAwB,SAAA,CAAU,sBAAA;AAAA,QAClC,aAAa,SAAA,CAAU,WAAA;AAAA,QACvB,kBAAkB,SAAA,CAAU,gBAAA;AAAA,QAC5B,wBAAwB,SAAA,CAAU,sBAAA;AAAA,QAClC,eAAe,SAAA,CAAU,aAAA;AAAA,QACzB,gBAAgB,SAAA,CAAU,cAAA;AAAA,QAC1B,qBAAqB,SAAA,CAAU,mBAAA;AAAA,QAC/B,2BAA2B,SAAA,CAAU;AAAA;AAAA,KACvC;AAAA,IAEC,WAAW,GAAG;AAAA,GAAA,EACjB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"span-tree-row.es.js","sources":["../../../../src/domains/traces/components/span-tree-row.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { SpanRowContext } from './span-rows';\nimport { TimelineNameCol } from './timeline-name-col';\n\nexport type SpanTreeRowProps = {\n  ctx: SpanRowContext;\n  /** Secondary line rendered under the span name (duration, ...). */\n  meta?: (ctx: SpanRowContext) => ReactNode;\n  /** Second grid cell rendered at the end of the row (timing bar, ...). */\n  trailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\n/** One hierarchy row: expand toggle + name (+ meta line), then an optional trailing cell. Expects a grid parent with one column per cell. */\nexport function SpanTreeRow({ ctx, meta, trailing }: SpanTreeRowProps) {\n  const { span, spanUI, depth, isRootSpan, isLastChild, isExpanded, isSelected, isFaded, onSpanClick, expansion } = ctx;\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={isSelected ? span.id : undefined}\n        revealSpanId={ctx.isRevealed ? span.id : undefined}\n        isLastChild={isLastChild}\n        hasChildren={expansion.hasChildren}\n        numOfChildren={expansion.numOfChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n        toggleChildren={expansion.toggleChildren}\n        meta={meta?.(ctx)}\n      />\n\n      {trailing?.(ctx)}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;AAaO,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,IAAA,EAAM,UAAS,EAAqB;AACrE,EAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,KAAA,EAAO,UAAA,EAAY,WAAA,EAAa,UAAA,EAAY,UAAA,EAAY,OAAA,EAAS,WAAA,EAAa,SAAA,EAAU,GAAI,GAAA;AAElH,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAA;AAAA,QACA,KAAA;AAAA,QACA,WAAA;AAAA,QACA,cAAA,EAAgB,UAAA,GAAa,IAAA,CAAK,EAAA,GAAK,MAAA;AAAA,QACvC,YAAA,EAAc,GAAA,CAAI,UAAA,GAAa,IAAA,CAAK,EAAA,GAAK,MAAA;AAAA,QACzC,WAAA;AAAA,QACA,aAAa,SAAA,CAAU,WAAA;AAAA,QACvB,eAAe,SAAA,CAAU,aAAA;AAAA,QACzB,UAAA;AAAA,QACA,UAAA;AAAA,QACA,gBAAgB,SAAA,CAAU,cAAA;AAAA,QAC1B,IAAA,EAAM,OAAO,GAAG;AAAA;AAAA,KAClB;AAAA,IAEC,WAAW,GAAG;AAAA,GAAA,EACjB,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/span-type-legend.cjs.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_shared = require('./shared.cjs.js');
+const Badge = require('../../../Badge-RWi6V_JT.cjs');
 
 function useUsedSpanTypes(spans) {
   return React.useMemo(() => {
@@ -29,15 +30,20 @@ function useUsedSpanTypes(spans) {
 function SpanTypeLegend({ spans }) {
   const usedSpanTypes = useUsedSpanTypes(spans);
   if (usedSpanTypes.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-start gap-3 px-2 py-1.5", children: usedSpanTypes.map((type) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "span-type-legend", className: "flex flex-wrap items-center gap-1.5 py-3", children: usedSpanTypes.map((type) => {
     const spanUI = domains_traces_components_shared.getSpanTypeUi(type);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-sm text-neutral3 flex shrink-0 items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block size-1.5 shrink-0 rounded-full", style: { backgroundColor: spanUI?.color } }),
-      spanUI?.label || type
-    ] }, type);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Badge.Badge,
+      {
+        size: "sm",
+        emphasis: "muted",
+        icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block size-1.5 rounded-full", style: { backgroundColor: spanUI?.color } }),
+        children: spanUI?.label || type
+      },
+      type
+    );
   }) });
 }
 
 exports.SpanTypeLegend = SpanTypeLegend;
-exports.useUsedSpanTypes = useUsedSpanTypes;
 //# sourceMappingURL=span-type-legend.cjs.js.map

package/dist/domains/traces/components/span-type-legend.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-type-legend.cjs.js","sources":["../../../../src/domains/traces/components/span-type-legend.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi, spanTypePrefixes } from './shared';\n\nexport function useUsedSpanTypes(spans: UISpan[]) {\n  return useMemo(() => {\n    const collectTypes = (list: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of list) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(spans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [spans]);\n}\n\n/** Colored-dot legend of the span types present in `spans`. Renders nothing when empty. */\nexport function SpanTypeLegend({ spans }: { spans: UISpan[] }) {\n  const usedSpanTypes = useUsedSpanTypes(spans);\n  if (usedSpanTypes.length === 0) return null;\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-start gap-3 px-2 py-1.5\">\n      {usedSpanTypes.map(type => {\n        const spanUI = getSpanTypeUi(type);\n        return (\n          <div key={type} className=\"text-ui-sm text-neutral3 flex shrink-0 items-center gap-1\">\n            <span className=\"inline-block size-1.5 shrink-0 rounded-full\" style={{ backgroundColor: spanUI?.color }} />\n            {spanUI?.label || type}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["useMemo","types","spanTypePrefixes","getSpanTypeUi","jsxs","jsx"],"mappings":";;;;;;;;AAIO,SAAS,iBAAiB,KAAA,EAAiB;AAChD,EAAA,OAAOA,cAAQ,MAAM;AACnB,IAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAAgC;AACpD,MAAA,MAAMC,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,IAAA,EAAM;AACvB,QAAA,MAAM,MAAA,GAAS,KAAK,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACpD,QAAA,IAAI,MAAA,EAAQA,MAAAA,CAAM,GAAA,CAAI,MAAM,CAAA;AAC5B,QAAA,IAAI,KAAK,KAAA,EAAO;AACd,UAAA,KAAA,MAAW,CAAA,IAAK,aAAa,IAAA,CAAK,KAAK,GAAGA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QACvD;AAAA,MACF;AACA,MAAA,OAAOA,MAAAA;AAAA,IACT,CAAA;AACA,IAAA,MAAM,KAAA,GAAQ,aAAa,KAAK,CAAA;AAChC,IAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAACC,iDAAA,CAAiB,QAAA,CAAS,CAAC,CAAC,CAAA;AACnE,IAAA,MAAM,KAAA,GAAQA,kDAAiB,MAAA,CAAO,CAAA,CAAA,KAAK,MAAM,OAAA,IAAW,KAAA,CAAM,GAAA,CAAI,CAAC,CAAC,CAAA;AACxE,IAAA,IAAI,QAAA,EAAU,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA;AAChC,IAAA,OAAO,KAAA;AAAA,EACT,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;AAGO,SAAS,cAAA,CAAe,EAAE,KAAA,EAAM,EAAwB;AAC7D,EAAA,MAAM,aAAA,GAAgB,iBAAiB,KAAK,CAAA;AAC5C,EAAA,IAAI,aAAA,CAAc,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAEvC,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,6DAAA,EACZ,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,IAAA,MAAM,MAAA,GAASC,+CAAc,IAAI,CAAA;AACjC,IAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAe,SAAA,EAAU,2DAAA,EACxB,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,6CAAA,EAA8C,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,OAAM,EAAG,CAAA;AAAA,MACxG,QAAQ,KAAA,IAAS;AAAA,KAAA,EAAA,EAFV,IAGV,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"span-type-legend.cjs.js","sources":["../../../../src/domains/traces/components/span-type-legend.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi, spanTypePrefixes } from './shared';\nimport { Badge } from '@/ds/components/Badge';\n\nfunction useUsedSpanTypes(spans: UISpan[]) {\n  return useMemo(() => {\n    const collectTypes = (list: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of list) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(spans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [spans]);\n}\n\n/**\n * Legend of the span types present in `spans`, one small badge per type carrying the\n * type's own color dot. Sits in its own bordered section above the rows. Renders nothing when empty.\n */\nexport function SpanTypeLegend({ spans }: { spans: UISpan[] }) {\n  const usedSpanTypes = useUsedSpanTypes(spans);\n  if (usedSpanTypes.length === 0) return null;\n\n  // Bleeds past the panel's `px-2` so the bottom border reaches the container edges.\n  return (\n    <div data-slot=\"span-type-legend\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n      {usedSpanTypes.map(type => {\n        const spanUI = getSpanTypeUi(type);\n        return (\n          <Badge\n            key={type}\n            size=\"sm\"\n            emphasis=\"muted\"\n            icon={<span className=\"inline-block size-1.5 rounded-full\" style={{ backgroundColor: spanUI?.color }} />}\n          >\n            {spanUI?.label || type}\n          </Badge>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsx","getSpanTypeUi","Badge"],"mappings":";;;;;;;;;AAKA,SAAS,iBAAiB,KAAA,EAAiB;AACzC,EAAA,OAAOA,cAAQ,MAAM;AACnB,IAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAAgC;AACpD,MAAA,MAAMC,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,IAAA,EAAM;AACvB,QAAA,MAAM,MAAA,GAAS,KAAK,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACpD,QAAA,IAAI,MAAA,EAAQA,MAAAA,CAAM,GAAA,CAAI,MAAM,CAAA;AAC5B,QAAA,IAAI,KAAK,KAAA,EAAO;AACd,UAAA,KAAA,MAAW,CAAA,IAAK,aAAa,IAAA,CAAK,KAAK,GAAGA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QACvD;AAAA,MACF;AACA,MAAA,OAAOA,MAAAA;AAAA,IACT,CAAA;AACA,IAAA,MAAM,KAAA,GAAQ,aAAa,KAAK,CAAA;AAChC,IAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAACC,iDAAA,CAAiB,QAAA,CAAS,CAAC,CAAC,CAAA;AACnE,IAAA,MAAM,KAAA,GAAQA,kDAAiB,MAAA,CAAO,CAAA,CAAA,KAAK,MAAM,OAAA,IAAW,KAAA,CAAM,GAAA,CAAI,CAAC,CAAC,CAAA;AACxE,IAAA,IAAI,QAAA,EAAU,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA;AAChC,IAAA,OAAO,KAAA;AAAA,EACT,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;AAMO,SAAS,cAAA,CAAe,EAAE,KAAA,EAAM,EAAwB;AAC7D,EAAA,MAAM,aAAA,GAAgB,iBAAiB,KAAK,CAAA;AAC5C,EAAA,IAAI,aAAA,CAAc,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAGvC,EAAA,uBACEC,cAAA,CAAC,SAAI,WAAA,EAAU,kBAAA,EAAmB,WAAU,0CAAA,EACzC,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,IAAA,MAAM,MAAA,GAASC,+CAAc,IAAI,CAAA;AACjC,IAAA,uBACED,cAAA;AAAA,MAACE,WAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,IAAA;AAAA,QACL,QAAA,EAAS,OAAA;AAAA,QACT,IAAA,kBAAMF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAqC,OAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,KAAA,EAAM,EAAG,CAAA;AAAA,QAErG,kBAAQ,KAAA,IAAS;AAAA,OAAA;AAAA,MALb;AAAA,KAMP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/span-type-legend.es.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { getSpanTypeUi, spanTypePrefixes } from './shared.es.js';
+import { B as Badge } from '../../../Badge-BCwBpIc7.js';
 
 function useUsedSpanTypes(spans) {
   return useMemo(() => {
@@ -25,14 +26,20 @@ function useUsedSpanTypes(spans) {
 function SpanTypeLegend({ spans }) {
   const usedSpanTypes = useUsedSpanTypes(spans);
   if (usedSpanTypes.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-start gap-3 px-2 py-1.5", children: usedSpanTypes.map((type) => {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "span-type-legend", className: "flex flex-wrap items-center gap-1.5 py-3", children: usedSpanTypes.map((type) => {
     const spanUI = getSpanTypeUi(type);
-    return /* @__PURE__ */ jsxs("div", { className: "text-ui-sm text-neutral3 flex shrink-0 items-center gap-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 shrink-0 rounded-full", style: { backgroundColor: spanUI?.color } }),
-      spanUI?.label || type
-    ] }, type);
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        size: "sm",
+        emphasis: "muted",
+        icon: /* @__PURE__ */ jsx("span", { className: "inline-block size-1.5 rounded-full", style: { backgroundColor: spanUI?.color } }),
+        children: spanUI?.label || type
+      },
+      type
+    );
   }) });
 }
 
-export { SpanTypeLegend, useUsedSpanTypes };
+export { SpanTypeLegend };
 //# sourceMappingURL=span-type-legend.es.js.map

package/dist/domains/traces/components/span-type-legend.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-type-legend.es.js","sources":["../../../../src/domains/traces/components/span-type-legend.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi, spanTypePrefixes } from './shared';\n\nexport function useUsedSpanTypes(spans: UISpan[]) {\n  return useMemo(() => {\n    const collectTypes = (list: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of list) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(spans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [spans]);\n}\n\n/** Colored-dot legend of the span types present in `spans`. Renders nothing when empty. */\nexport function SpanTypeLegend({ spans }: { spans: UISpan[] }) {\n  const usedSpanTypes = useUsedSpanTypes(spans);\n  if (usedSpanTypes.length === 0) return null;\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-start gap-3 px-2 py-1.5\">\n      {usedSpanTypes.map(type => {\n        const spanUI = getSpanTypeUi(type);\n        return (\n          <div key={type} className=\"text-ui-sm text-neutral3 flex shrink-0 items-center gap-1\">\n            <span className=\"inline-block size-1.5 shrink-0 rounded-full\" style={{ backgroundColor: spanUI?.color }} />\n            {spanUI?.label || type}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["types"],"mappings":";;;;AAIO,SAAS,iBAAiB,KAAA,EAAiB;AAChD,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAAgC;AACpD,MAAA,MAAMA,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,IAAA,EAAM;AACvB,QAAA,MAAM,MAAA,GAAS,KAAK,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACpD,QAAA,IAAI,MAAA,EAAQA,MAAAA,CAAM,GAAA,CAAI,MAAM,CAAA;AAC5B,QAAA,IAAI,KAAK,KAAA,EAAO;AACd,UAAA,KAAA,MAAW,CAAA,IAAK,aAAa,IAAA,CAAK,KAAK,GAAGA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QACvD;AAAA,MACF;AACA,MAAA,OAAOA,MAAAA;AAAA,IACT,CAAA;AACA,IAAA,MAAM,KAAA,GAAQ,aAAa,KAAK,CAAA;AAChC,IAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAAC,gBAAA,CAAiB,QAAA,CAAS,CAAC,CAAC,CAAA;AACnE,IAAA,MAAM,KAAA,GAAQ,iBAAiB,MAAA,CAAO,CAAA,CAAA,KAAK,MAAM,OAAA,IAAW,KAAA,CAAM,GAAA,CAAI,CAAC,CAAC,CAAA;AACxE,IAAA,IAAI,QAAA,EAAU,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA;AAChC,IAAA,OAAO,KAAA;AAAA,EACT,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;AAGO,SAAS,cAAA,CAAe,EAAE,KAAA,EAAM,EAAwB;AAC7D,EAAA,MAAM,aAAA,GAAgB,iBAAiB,KAAK,CAAA;AAC5C,EAAA,IAAI,aAAA,CAAc,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAEvC,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAU,6DAAA,EACZ,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,IAAA,MAAM,MAAA,GAAS,cAAc,IAAI,CAAA;AACjC,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAe,SAAA,EAAU,2DAAA,EACxB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,6CAAA,EAA8C,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,OAAM,EAAG,CAAA;AAAA,MACxG,QAAQ,KAAA,IAAS;AAAA,KAAA,EAAA,EAFV,IAGV,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"span-type-legend.es.js","sources":["../../../../src/domains/traces/components/span-type-legend.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi, spanTypePrefixes } from './shared';\nimport { Badge } from '@/ds/components/Badge';\n\nfunction useUsedSpanTypes(spans: UISpan[]) {\n  return useMemo(() => {\n    const collectTypes = (list: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of list) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(spans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [spans]);\n}\n\n/**\n * Legend of the span types present in `spans`, one small badge per type carrying the\n * type's own color dot. Sits in its own bordered section above the rows. Renders nothing when empty.\n */\nexport function SpanTypeLegend({ spans }: { spans: UISpan[] }) {\n  const usedSpanTypes = useUsedSpanTypes(spans);\n  if (usedSpanTypes.length === 0) return null;\n\n  // Bleeds past the panel's `px-2` so the bottom border reaches the container edges.\n  return (\n    <div data-slot=\"span-type-legend\" className=\"flex flex-wrap items-center gap-1.5 py-3\">\n      {usedSpanTypes.map(type => {\n        const spanUI = getSpanTypeUi(type);\n        return (\n          <Badge\n            key={type}\n            size=\"sm\"\n            emphasis=\"muted\"\n            icon={<span className=\"inline-block size-1.5 rounded-full\" style={{ backgroundColor: spanUI?.color }} />}\n          >\n            {spanUI?.label || type}\n          </Badge>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["types"],"mappings":";;;;;AAKA,SAAS,iBAAiB,KAAA,EAAiB;AACzC,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAAgC;AACpD,MAAA,MAAMA,MAAAA,uBAAY,GAAA,EAAY;AAC9B,MAAA,KAAA,MAAW,QAAQ,IAAA,EAAM;AACvB,QAAA,MAAM,MAAA,GAAS,KAAK,IAAA,EAAM,WAAA,GAAc,KAAA,CAAM,GAAG,EAAE,CAAC,CAAA;AACpD,QAAA,IAAI,MAAA,EAAQA,MAAAA,CAAM,GAAA,CAAI,MAAM,CAAA;AAC5B,QAAA,IAAI,KAAK,KAAA,EAAO;AACd,UAAA,KAAA,MAAW,CAAA,IAAK,aAAa,IAAA,CAAK,KAAK,GAAGA,MAAAA,CAAM,IAAI,CAAC,CAAA;AAAA,QACvD;AAAA,MACF;AACA,MAAA,OAAOA,MAAAA;AAAA,IACT,CAAA;AACA,IAAA,MAAM,KAAA,GAAQ,aAAa,KAAK,CAAA;AAChC,IAAA,MAAM,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,KAAK,CAAC,gBAAA,CAAiB,QAAA,CAAS,CAAC,CAAC,CAAA;AACnE,IAAA,MAAM,KAAA,GAAQ,iBAAiB,MAAA,CAAO,CAAA,CAAA,KAAK,MAAM,OAAA,IAAW,KAAA,CAAM,GAAA,CAAI,CAAC,CAAC,CAAA;AACxE,IAAA,IAAI,QAAA,EAAU,KAAA,CAAM,IAAA,CAAK,OAAO,CAAA;AAChC,IAAA,OAAO,KAAA;AAAA,EACT,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AACZ;AAMO,SAAS,cAAA,CAAe,EAAE,KAAA,EAAM,EAAwB;AAC7D,EAAA,MAAM,aAAA,GAAgB,iBAAiB,KAAK,CAAA;AAC5C,EAAA,IAAI,aAAA,CAAc,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAGvC,EAAA,uBACE,GAAA,CAAC,SAAI,WAAA,EAAU,kBAAA,EAAmB,WAAU,0CAAA,EACzC,QAAA,EAAA,aAAA,CAAc,IAAI,CAAA,IAAA,KAAQ;AACzB,IAAA,MAAM,MAAA,GAAS,cAAc,IAAI,CAAA;AACjC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,IAAA;AAAA,QACL,QAAA,EAAS,OAAA;AAAA,QACT,IAAA,kBAAM,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAqC,OAAO,EAAE,eAAA,EAAiB,MAAA,EAAQ,KAAA,EAAM,EAAG,CAAA;AAAA,QAErG,kBAAQ,KAAA,IAAS;AAAA,OAAA;AAAA,MALb;AAAA,KAMP;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-context.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface ThreadTraceSelectedSpan {\n  traceId: string;\n  spanId: string;\n}\n\nexport interface ThreadTraceHighlight {\n  traceId: string;\n  spanIds: string[];\n}\n\nexport interface ThreadTraceContextValue {\n  traceIds: string[];\n  /** The row the reader came from (e.g. \"View full thread\"); starts expanded and scrolls into view on mount. */\n  anchorTraceId: string | null;\n  selected: ThreadTraceSelectedSpan | null;\n  /** Select a span (opens the side panel) or pass `undefined` to close it. */\n  selectSpan: (traceId: string, spanId: string | undefined) => void;\n  /** Spans behind the message the user asked to highlight; scoped to one trace since each row has its own tree. */\n  highlight: ThreadTraceHighlight | null;\n  highlightSpans: (traceId: string, spanIds: string[]) => void;\n  /** Rows whose timeline is shown in full rather than clamped to the messages column. */\n  expandedTraceIds: ReadonlySet<string>;\n  setTraceExpanded: (traceId: string, expanded: boolean) => void;\n  /** Rows currently on screen inside the list, oldest first. */\n  visibleTraceIds: string[];\n  /** The topmost visible row. */\n  currentTraceId: string | undefined;\n  scrollToTrace: (traceId: string) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const ThreadTraceContext = createContext<ThreadTraceContextValue | null>(null);\n\nexport function useThreadTrace(): ThreadTraceContextValue {\n  const context = useContext(ThreadTraceContext);\n  if (!context) {\n    throw new Error('ThreadTrace compound components must be rendered inside <ThreadTrace>.');\n  }\n  return context;\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAkCO,MAAM,kBAAA,GAAqBA,oBAA8C,IAAI;AAE7E,SAAS,cAAA,GAA0C;AACxD,EAAA,MAAM,OAAA,GAAUC,iBAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,wEAAwE,CAAA;AAAA,EAC1F;AACA,EAAA,OAAO,OAAA;AACT;;;;;"}
+{"version":3,"file":"thread-trace-context.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface ThreadTraceSelectedSpan {\n  traceId: string;\n  spanId: string;\n}\n\nexport interface ThreadTraceHighlight {\n  traceId: string;\n  spanIds: string[];\n}\n\nexport interface ThreadTraceContextValue {\n  traceIds: string[];\n  /** The row the reader came from (e.g. \"Open full thread\"); starts expanded and scrolls into view on mount. */\n  anchorTraceId: string | null;\n  selected: ThreadTraceSelectedSpan | null;\n  /** Select a span (opens the side panel) or pass `undefined` to close it. */\n  selectSpan: (traceId: string, spanId: string | undefined) => void;\n  /** Spans behind the message the user asked to highlight; scoped to one trace since each row has its own tree. */\n  highlight: ThreadTraceHighlight | null;\n  highlightSpans: (traceId: string, spanIds: string[]) => void;\n  /** Rows whose timeline is shown in full rather than clamped to the messages column. */\n  expandedTraceIds: ReadonlySet<string>;\n  setTraceExpanded: (traceId: string, expanded: boolean) => void;\n  /** Rows currently on screen inside the list, oldest first. */\n  visibleTraceIds: string[];\n  /** The topmost visible row. */\n  currentTraceId: string | undefined;\n  scrollToTrace: (traceId: string) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const ThreadTraceContext = createContext<ThreadTraceContextValue | null>(null);\n\nexport function useThreadTrace(): ThreadTraceContextValue {\n  const context = useContext(ThreadTraceContext);\n  if (!context) {\n    throw new Error('ThreadTrace compound components must be rendered inside <ThreadTrace>.');\n  }\n  return context;\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAkCO,MAAM,kBAAA,GAAqBA,oBAA8C,IAAI;AAE7E,SAAS,cAAA,GAA0C;AACxD,EAAA,MAAM,OAAA,GAAUC,iBAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,wEAAwE,CAAA;AAAA,EAC1F;AACA,EAAA,OAAO,OAAA;AACT;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-context.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface ThreadTraceSelectedSpan {\n  traceId: string;\n  spanId: string;\n}\n\nexport interface ThreadTraceHighlight {\n  traceId: string;\n  spanIds: string[];\n}\n\nexport interface ThreadTraceContextValue {\n  traceIds: string[];\n  /** The row the reader came from (e.g. \"View full thread\"); starts expanded and scrolls into view on mount. */\n  anchorTraceId: string | null;\n  selected: ThreadTraceSelectedSpan | null;\n  /** Select a span (opens the side panel) or pass `undefined` to close it. */\n  selectSpan: (traceId: string, spanId: string | undefined) => void;\n  /** Spans behind the message the user asked to highlight; scoped to one trace since each row has its own tree. */\n  highlight: ThreadTraceHighlight | null;\n  highlightSpans: (traceId: string, spanIds: string[]) => void;\n  /** Rows whose timeline is shown in full rather than clamped to the messages column. */\n  expandedTraceIds: ReadonlySet<string>;\n  setTraceExpanded: (traceId: string, expanded: boolean) => void;\n  /** Rows currently on screen inside the list, oldest first. */\n  visibleTraceIds: string[];\n  /** The topmost visible row. */\n  currentTraceId: string | undefined;\n  scrollToTrace: (traceId: string) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const ThreadTraceContext = createContext<ThreadTraceContextValue | null>(null);\n\nexport function useThreadTrace(): ThreadTraceContextValue {\n  const context = useContext(ThreadTraceContext);\n  if (!context) {\n    throw new Error('ThreadTrace compound components must be rendered inside <ThreadTrace>.');\n  }\n  return context;\n}\n"],"names":[],"mappings":";;AAkCO,MAAM,kBAAA,GAAqB,cAA8C,IAAI;AAE7E,SAAS,cAAA,GAA0C;AACxD,EAAA,MAAM,OAAA,GAAU,WAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,wEAAwE,CAAA;AAAA,EAC1F;AACA,EAAA,OAAO,OAAA;AACT;;;;"}
+{"version":3,"file":"thread-trace-context.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-context.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport type { RefObject } from 'react';\n\nexport interface ThreadTraceSelectedSpan {\n  traceId: string;\n  spanId: string;\n}\n\nexport interface ThreadTraceHighlight {\n  traceId: string;\n  spanIds: string[];\n}\n\nexport interface ThreadTraceContextValue {\n  traceIds: string[];\n  /** The row the reader came from (e.g. \"Open full thread\"); starts expanded and scrolls into view on mount. */\n  anchorTraceId: string | null;\n  selected: ThreadTraceSelectedSpan | null;\n  /** Select a span (opens the side panel) or pass `undefined` to close it. */\n  selectSpan: (traceId: string, spanId: string | undefined) => void;\n  /** Spans behind the message the user asked to highlight; scoped to one trace since each row has its own tree. */\n  highlight: ThreadTraceHighlight | null;\n  highlightSpans: (traceId: string, spanIds: string[]) => void;\n  /** Rows whose timeline is shown in full rather than clamped to the messages column. */\n  expandedTraceIds: ReadonlySet<string>;\n  setTraceExpanded: (traceId: string, expanded: boolean) => void;\n  /** Rows currently on screen inside the list, oldest first. */\n  visibleTraceIds: string[];\n  /** The topmost visible row. */\n  currentTraceId: string | undefined;\n  scrollToTrace: (traceId: string) => void;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const ThreadTraceContext = createContext<ThreadTraceContextValue | null>(null);\n\nexport function useThreadTrace(): ThreadTraceContextValue {\n  const context = useContext(ThreadTraceContext);\n  if (!context) {\n    throw new Error('ThreadTrace compound components must be rendered inside <ThreadTrace>.');\n  }\n  return context;\n}\n"],"names":[],"mappings":";;AAkCO,MAAM,kBAAA,GAAqB,cAA8C,IAAI;AAE7E,SAAS,cAAA,GAA0C;AACxD,EAAA,MAAM,OAAA,GAAU,WAAW,kBAAkB,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,wEAAwE,CAAA;AAAA,EAC1F;AACA,EAAA,OAAO,OAAA;AACT;;;;"}

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

@@ -3,30 +3,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const domains_traces_components_threadTrace_threadTraceRow = require('./thread-trace-row.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const dataPanel = require('../../../../data-panel-tSErqolu.cjs');
-const tabsRoot = require('../../../../tabs-root-Dw7gHsnZ.cjs');
-const tabsTab = require('../../../../tabs-tab-CP-kzlvB.cjs');
-const tabsContent = require('../../../../tabs-content-CV7YrtD1.cjs');
-const utils_cn = require('../../../../cn-DnbTIGXa.cjs');
+const dataPanel = require('../../../../data-panel-BhJ8Lp_j.cjs');
+const utils_cn = require('../../../../cn-BuHW7Wrt.cjs');
 
 function ThreadTraceDetails({ className, children, ...props }) {
-  const { isExpanded, isFirst, tab, setTab } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
+  const { isExpanded } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    tabsRoot.Tabs,
+    "div",
     {
-      defaultTab: domains_traces_components_threadTrace_threadTraceRow.THREAD_TRACE_SPANS_TAB,
-      value: tab,
-      onValueChange: setTab,
       "data-slot": "thread-trace-details",
       className: utils_cn.cn(
-        "min-w-0 overflow-hidden border-x border-b border-border1 group-last:rounded-b-xl",
+        "min-w-0 overflow-hidden",
         // While collapsed the messages column alone sets the row height: `h-0` keeps this
         // cell out of the grid's row sizing (so measurement rounding can't nudge the row by
-        // a pixel between tabs) and `min-h-full` stretches it back to the row afterwards.
+        // a pixel) and `min-h-full` stretches it back to the row afterwards.
         !isExpanded && "h-0 min-h-full",
-        isFirst && "rounded-t-xl border-t",
         className
       ),
       ...props,
@@ -34,28 +26,22 @@ function ThreadTraceDetails({ className, children, ...props }) {
     }
   );
 }
-function ThreadTraceDetailsHeader({
-  className,
-  headerClassName,
-  children,
-  ...props
-}) {
+function ThreadTraceDetailsHeader({ className, children, ...props }) {
   const { detailsHeaderRef } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: detailsHeaderRef, "data-slot": "thread-trace-details-header", className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: utils_cn.cn("min-h-0 border-b border-border1 py-1.5", headerClassName), children }) });
-}
-function ThreadTraceTabList({ variant = "pill-ghost", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { variant, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: detailsHeaderRef, "data-slot": "thread-trace-details-header", className, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "border-border1 border-b", children }) });
 }
 function ThreadTraceDetailsActions({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace-details-actions", className: utils_cn.cn("flex shrink-0 items-center", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "thread-trace-details-actions",
+      className: utils_cn.cn("ml-auto flex shrink-0 items-center", className),
+      ...props
+    }
+  );
 }
-const ThreadTraceTab = tabsTab.Tab;
-const ThreadTraceTabContent = tabsContent.TabContent;
 
 exports.ThreadTraceDetails = ThreadTraceDetails;
 exports.ThreadTraceDetailsActions = ThreadTraceDetailsActions;
 exports.ThreadTraceDetailsHeader = ThreadTraceDetailsHeader;
-exports.ThreadTraceTab = ThreadTraceTab;
-exports.ThreadTraceTabContent = ThreadTraceTabContent;
-exports.ThreadTraceTabList = ThreadTraceTabList;
 //# sourceMappingURL=thread-trace-details.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-details.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { THREAD_TRACE_SPANS_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabContentProps, TabListProps, TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The tabbed details column of a row; the spans tab is `ThreadTrace.SpansTab`, others are `ThreadTrace.TabContent`. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded, isFirst, tab, setTab } = useThreadTraceRow();\n  return (\n    <Tabs<string>\n      defaultTab={THREAD_TRACE_SPANS_TAB}\n      value={tab}\n      onValueChange={setTab}\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden border-x border-b border-border1 group-last:rounded-b-xl',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel between tabs) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        isFirst && 'rounded-t-xl border-t',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Tabs>\n  );\n}\n\nexport interface ThreadTraceDetailsHeaderProps extends ComponentProps<'div'> {\n  headerClassName?: string;\n}\n\n/**\n * Same header/tab layout as the traces page so both surfaces read identically. Children are a\n * `ThreadTrace.TabList` plus an optional `ThreadTrace.DetailsActions`. Measured: its height is\n * taken out of the timeline budget so the details cell never overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({\n  className,\n  headerClassName,\n  children,\n  ...props\n}: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Explicit border: the measuring wrapper makes the header the \"last\" child. */}\n      <DataPanel.Header className={cn('min-h-0 border-b border-border1 py-1.5', headerClassName)}>\n        {children}\n      </DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant'> & { variant?: TabListProps['variant'] };\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} {...props} />;\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), rendered after the tabs. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div data-slot=\"thread-trace-details-actions\" className={cn('flex shrink-0 items-center', className)} {...props} />\n  );\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\nexport const ThreadTraceTabContent = TabContent;\n"],"names":["useThreadTraceRow","jsx","Tabs","THREAD_TRACE_SPANS_TAB","cn","DataPanel","TabList","Tab","TabContent"],"mappings":";;;;;;;;;;;;;AAYO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAY,OAAA,EAAS,GAAA,EAAK,MAAA,KAAWA,6EAAA,EAAkB;AAC/D,EAAA,uBACEC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAYC,2EAAA;AAAA,MACZ,KAAA,EAAO,GAAA;AAAA,MACP,aAAA,EAAe,MAAA;AAAA,MACf,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,kFAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf,OAAA,IAAW,uBAAA;AAAA,QACX;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAWO,SAAS,wBAAA,CAAyB;AAAA,EACvC,SAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkC;AAChC,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAIJ,6EAAA,EAAkB;AAC/C,EAAA,sCACG,KAAA,EAAA,EAAI,GAAA,EAAK,kBAAkB,WAAA,EAAU,6BAAA,EAA8B,WAAuB,GAAG,KAAA,EAE5F,yCAACK,mBAAA,CAAU,MAAA,EAAV,EAAiB,SAAA,EAAWD,WAAA,CAAG,0CAA0C,eAAe,CAAA,EACtF,UACH,CAAA,EACF,CAAA;AAEJ;AAIO,SAAS,mBAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,GAAG,OAAM,EAA4B;AAChG,EAAA,uBAAOH,cAAA,CAACK,gBAAA,EAAA,EAAQ,OAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAC/C;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACEL,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,8BAAA,EAA+B,SAAA,EAAWG,YAAG,4BAAA,EAA8B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAErH;AAGO,MAAM,cAAA,GAAiBG;AAGvB,MAAM,qBAAA,GAAwBC;;;;;;;;;"}
+{"version":3,"file":"thread-trace-details.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-border1 border-b\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["useThreadTraceRow","jsx","cn","DataPanel"],"mappings":";;;;;;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIA,6EAAA,EAAkB;AACzC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAIF,6EAAA,EAAkB;AAC/C,EAAA,sCACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAAC,cAAA,CAACE,oBAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,yBAAA,EAA2B,UAAS,CAAA,EAClE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACEF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;;;"}