@mastra/playground-ui 53.1.0-alpha.2 → 54.0.0-alpha.4

package/dist/components/LogsDataList.cjs.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const logsDataList = require('../logs-data-list-BcPdFb2K.cjs');
 const dataListSkeleton = require('../data-list-skeleton-7eKxso9c.cjs');
-require('react');
 
 
 

package/dist/components/LogsDataList.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"LogsDataList.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/LogsDataList.es.js

@@ -1,4 +1,3 @@
 export { L as LogsDataList } from '../logs-data-list-D7NBF4iw.js';
 export { D as LogsDataListSkeleton } from '../data-list-skeleton-CbjuDDK_.js';
-import 'react';
 //# sourceMappingURL=LogsDataList.es.js.map

package/dist/components/LogsDataList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"LogsDataList.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
 const utils_cn = require('../../../cn-DCPcv4xv.cjs');
 
-const revealRow = (node) => {
-  node?.scrollIntoView({ block: "nearest" });
-};
 function TimelineNameCol({
   span,
   spanUI,
@@ -16,16 +14,23 @@ function TimelineNameCol({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   hasChildren: _hasChildren,
   isRootSpan,
   isExpanded: _isExpanded
 }) {
+  const rowRef = React.useRef(null);
   const isSelected = selectedSpanId === span.id;
+  const isRevealed = revealSpanId === span.id;
+  const shouldScrollIntoView = isSelected || isRevealed;
+  React.useEffect(() => {
+    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: isSelected ? revealRow : void 0,
+      ref: rowRef,
       "aria-label": `View details for span ${span.name}`,
       className: utils_cn.cn("flex min-h-8 items-center rounded-md rounded-l-lg opacity-80", {
         "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,

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 type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\n// Nested rows mount late, once expansion opens their ancestors.\nconst revealRow = (node: HTMLDivElement | null) => {\n  node?.scrollIntoView({ block: 'nearest' });\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n  const isSelected = selectedSpanId === span.id;\n\n  return (\n    <div\n      ref={isSelected ? revealRow : undefined}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","TimelineStructureSign"],"mappings":";;;;;;;;AAkBA,MAAM,SAAA,GAAY,CAAC,IAAA,KAAgC;AACjD,EAAA,IAAA,EAAM,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,CAAA;AAC3C,CAAA;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAE3C,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,aAAa,SAAA,GAAY,MAAA;AAAA,MAC9B,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAWC,YAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAcC,cAAA,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjEH,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAWC,WAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACPC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKFA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-name-col.cjs.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsxs","cn","jsx","TimelineStructureSign"],"mappings":";;;;;;;;;AAmBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAASA,aAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAWC,YAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAcC,cAAA,CAACC,qEAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjEH,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAWC,WAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACPC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKFA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,10 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
 import { TimelineStructureSign } from './timeline-structure-sign.es.js';
 import { c as cn } from '../../../cn-B4oPhFx9.js';
 
-const revealRow = (node) => {
-  node?.scrollIntoView({ block: "nearest" });
-};
 function TimelineNameCol({
   span,
   spanUI,
@@ -12,16 +10,23 @@ function TimelineNameCol({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   hasChildren: _hasChildren,
   isRootSpan,
   isExpanded: _isExpanded
 }) {
+  const rowRef = useRef(null);
   const isSelected = selectedSpanId === span.id;
+  const isRevealed = revealSpanId === span.id;
+  const shouldScrollIntoView = isSelected || isRevealed;
+  useEffect(() => {
+    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: isSelected ? revealRow : void 0,
+      ref: rowRef,
       "aria-label": `View details for span ${span.name}`,
       className: cn("flex min-h-8 items-center rounded-md rounded-l-lg opacity-80", {
         "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,

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 type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\n// Nested rows mount late, once expansion opens their ancestors.\nconst revealRow = (node: HTMLDivElement | null) => {\n  node?.scrollIntoView({ block: 'nearest' });\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n  const isSelected = selectedSpanId === span.id;\n\n  return (\n    <div\n      ref={isSelected ? revealRow : undefined}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAkBA,MAAM,SAAA,GAAY,CAAC,IAAA,KAAgC;AACjD,EAAA,IAAA,EAAM,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,CAAA;AAC3C,CAAA;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAE3C,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,aAAa,SAAA,GAAY,MAAA;AAAA,MAC9B,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAW,EAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKF,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"timeline-name-col.es.js","sources":["../../../../src/domains/traces/components/timeline-name-col.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { cn } from '@/lib/utils';\n\ntype TimelineNameColProps = {\n  span: UISpan;\n  spanUI?: UISpanStyle | null;\n  isFaded?: boolean;\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  hasChildren?: boolean;\n  isRootSpan?: boolean;\n  isExpanded?: boolean;\n};\n\nexport function TimelineNameCol({\n  span,\n  spanUI,\n  isFaded,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  hasChildren: _hasChildren,\n  isRootSpan,\n  isExpanded: _isExpanded,\n}: TimelineNameColProps) {\n  const rowRef = useRef<HTMLDivElement>(null);\n  const isSelected = selectedSpanId === span.id;\n  const isRevealed = revealSpanId === span.id;\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens their ancestors; the effect runs on that\n  // mount as well as when the row becomes the selected / revealed one.\n  useEffect(() => {\n    if (shouldScrollIntoView) rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      className={cn('flex min-h-8 items-center rounded-md rounded-l-lg opacity-80', {\n        'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n        'bg-surface4': isSelected,\n      })}\n      style={{ paddingLeft: `${depth * 1}rem` }}\n    >\n      {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n      <button\n        onClick={() => onSpanClick?.(span.id)}\n        className={cn(\n          'flex size-full min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-left text-ui-smd text-neutral6 transition-colors',\n          '[&>svg]:ml-auto [&>svg]:size-[1em] [&>svg]:shrink-0 [&>svg]:opacity-0 [&>svg]:transition-all',\n          'hover:bg-surface4 [&:hover>svg]:opacity-60',\n          'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n        )}\n      >\n        {spanUI?.color && (\n          <span\n            aria-hidden\n            title={spanUI.label}\n            className=\"inline-block size-2 shrink-0 rounded-full\"\n            style={{ backgroundColor: spanUI.color }}\n          />\n        )}\n        {/* Searchable: the span name is what the timeline search matches on. When the match\n            is in the span's payload instead, the whole name is painted in the indirect color\n            so the row explains its own presence. */}\n        <span\n          data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n          data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n          title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n          className=\"min-w-0 truncate\"\n        >\n          {span.name}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,WAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA,EAAa,YAAA;AAAA,EACb,UAAA;AAAA,EACA,UAAA,EAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,mBAAmB,IAAA,CAAK,EAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,iBAAiB,IAAA,CAAK,EAAA;AACzC,EAAA,MAAM,uBAAuB,UAAA,IAAc,UAAA;AAI3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,oBAAA,SAA6B,OAAA,EAAS,cAAA,CAAe,EAAE,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,CAAA;AAAA,EACnG,CAAA,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,MAAA;AAAA,MACL,YAAA,EAAY,CAAA,sBAAA,EAAyB,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,MAC9C,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,QAC5E,2EAAA,EAA6E,OAAA;AAAA,QAC7E,aAAA,EAAe;AAAA,OAChB,CAAA;AAAA,MACD,OAAO,EAAE,WAAA,EAAa,CAAA,EAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,EAAM;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAC,UAAA,oBAAc,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAA0B,CAAA;AAAA,wBAEjE,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,MAAM,WAAA,GAAc,IAAA,CAAK,EAAE,CAAA;AAAA,YACpC,SAAA,EAAW,EAAA;AAAA,cACT,wHAAA;AAAA,cACA,8FAAA;AAAA,cACA,4CAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,MAAA,EAAQ,KAAA,oBACP,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,OAAO,MAAA,CAAO,KAAA;AAAA,kBACd,SAAA,EAAU,2CAAA;AAAA,kBACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA,CAAO,KAAA;AAAM;AAAA,eACzC;AAAA,8BAKF,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA,EAAgB,IAAA,CAAK,oBAAA,GAAuB,MAAA,GAAY,EAAA;AAAA,kBACxD,yBAAA,EAAyB,IAAA,CAAK,oBAAA,GAAuB,EAAA,GAAK,MAAA;AAAA,kBAC1D,KAAA,EAAO,IAAA,CAAK,oBAAA,GAAuB,4CAAA,GAA+C,MAAA;AAAA,kBAClF,SAAA,EAAU,kBAAA;AAAA,kBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -16,6 +16,7 @@ function TraceTimelineSpan({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   overallLatency,
   overallStartTime,
@@ -103,6 +104,7 @@ function TraceTimelineSpan({
         depth,
         onSpanClick,
         selectedSpanId,
+        revealSpanId,
         isLastChild,
         hasChildren,
         isRootSpan,
@@ -150,6 +152,7 @@ function TraceTimelineSpan({
           depth: depth + 1,
           onSpanClick,
           selectedSpanId,
+          revealSpanId,
           isLastChild: isLast,
           overallLatency,
           overallStartTime,

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

@@ -1 +1 @@
-{"version":3,"file":"trace-timeline-span.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n  span: UISpan;\n  siblings?: UISpan[];\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  isLastChild?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  fadedTypes?: string[];\n  searchPhrase?: string;\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimelineSpan({\n  span,\n  siblings,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  fadedTypes,\n  searchPhrase,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  chartWidth,\n}: TraceTimelineSpanProps) {\n  const hasChildren = span.spans && span.spans.length > 0;\n  const numOfChildren = span.spans ? span.spans.length : 0;\n  const allDescendantIds = getSpanDescendantIds(span);\n  const totalDescendants = allDescendantIds.length;\n  const isRootSpan = depth === 0;\n  const spanUI = getSpanTypeUi(span?.type);\n  const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n  const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n  const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix || '') : false;\n  const isFaded = isFadedByType || isFadedBySearch;\n\n  useEffect(() => {\n    if (!featuredSpanIds || allDescendantIds.length === 0) return;\n    if (isExpanded) return;\n    const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n    if (hasFeaturedDescendant && setExpandedSpanIds) {\n      setExpandedSpanIds(prev => (!prev || prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [featuredSpanIds, allDescendantIds]);\n\n  const toggleChildren = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n    });\n  };\n\n  const expandAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n    });\n  };\n\n  const collapseAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set(allDescendantIds);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const collapseAll = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set([span.id, ...allDescendantIds]);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n  const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n  const siblingsWithChildrenCount = siblingsWithChildren.length;\n  const siblingsAllExpanded =\n    siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n  const toggleSiblings = () => {\n    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      if (siblingsAllExpanded) {\n        const idsToRemove = new Set<string>();\n        siblingsWithChildren.forEach(s => {\n          idsToRemove.add(s.id);\n          getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n        });\n        return prev.filter(id => !idsToRemove.has(id));\n      }\n      return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n    });\n  };\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={selectedSpanId}\n        isLastChild={isLastChild}\n        hasChildren={hasChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n      />\n\n      <TimelineExpandCol\n        isSelected={selectedSpanId === span.id}\n        isFaded={isFaded}\n        isExpanded={isExpanded}\n        isRootSpan={isRootSpan}\n        toggleChildren={toggleChildren}\n        expandAllDescendants={expandAllDescendants}\n        collapseAllDescendants={collapseAllDescendants}\n        collapseAll={collapseAll}\n        totalDescendants={totalDescendants}\n        allDescendantsExpanded={allDescendantsExpanded}\n        numOfChildren={numOfChildren}\n        toggleSiblings={toggleSiblings}\n        siblingsAllExpanded={siblingsAllExpanded}\n        siblingsWithChildrenCount={siblingsWithChildrenCount}\n      />\n\n      <TimelineTimingCol\n        span={span}\n        selectedSpanId={selectedSpanId}\n        isFaded={isFaded}\n        overallLatency={overallLatency}\n        overallStartTime={overallStartTime}\n        color={spanUI?.color}\n        chartWidth={chartWidth}\n      />\n\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n          const isLast = idx === array.length - 1;\n\n          return (\n            <TraceTimelineSpan\n              key={childSpan.id}\n              span={childSpan}\n              siblings={array}\n              depth={depth + 1}\n              onSpanClick={onSpanClick}\n              selectedSpanId={selectedSpanId}\n              isLastChild={isLast}\n              overallLatency={overallLatency}\n              overallStartTime={overallStartTime}\n              fadedTypes={fadedTypes}\n              searchPhrase={searchPhrase}\n              expandedSpanIds={expandedSpanIds}\n              setExpandedSpanIds={setExpandedSpanIds}\n              featuredSpanIds={featuredSpanIds}\n              chartWidth={chartWidth}\n            />\n          );\n        })}\n    </>\n  );\n}\n"],"names":["getSpanDescendantIds","getSpanTypeUi","useEffect","jsxs","Fragment","jsx","TimelineNameCol","TimelineExpandCol","TimelineTimingCol"],"mappings":"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"}
+{"version":3,"file":"trace-timeline-span.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n  span: UISpan;\n  siblings?: UISpan[];\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  fadedTypes?: string[];\n  searchPhrase?: string;\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimelineSpan({\n  span,\n  siblings,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  fadedTypes,\n  searchPhrase,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  chartWidth,\n}: TraceTimelineSpanProps) {\n  const hasChildren = span.spans && span.spans.length > 0;\n  const numOfChildren = span.spans ? span.spans.length : 0;\n  const allDescendantIds = getSpanDescendantIds(span);\n  const totalDescendants = allDescendantIds.length;\n  const isRootSpan = depth === 0;\n  const spanUI = getSpanTypeUi(span?.type);\n  const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n  const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n  const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix || '') : false;\n  const isFaded = isFadedByType || isFadedBySearch;\n\n  useEffect(() => {\n    if (!featuredSpanIds || allDescendantIds.length === 0) return;\n    if (isExpanded) return;\n    const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n    if (hasFeaturedDescendant && setExpandedSpanIds) {\n      setExpandedSpanIds(prev => (!prev || prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [featuredSpanIds, allDescendantIds]);\n\n  const toggleChildren = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n    });\n  };\n\n  const expandAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n    });\n  };\n\n  const collapseAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set(allDescendantIds);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const collapseAll = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set([span.id, ...allDescendantIds]);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n  const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n  const siblingsWithChildrenCount = siblingsWithChildren.length;\n  const siblingsAllExpanded =\n    siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n  const toggleSiblings = () => {\n    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      if (siblingsAllExpanded) {\n        const idsToRemove = new Set<string>();\n        siblingsWithChildren.forEach(s => {\n          idsToRemove.add(s.id);\n          getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n        });\n        return prev.filter(id => !idsToRemove.has(id));\n      }\n      return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n    });\n  };\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={selectedSpanId}\n        revealSpanId={revealSpanId}\n        isLastChild={isLastChild}\n        hasChildren={hasChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n      />\n\n      <TimelineExpandCol\n        isSelected={selectedSpanId === span.id}\n        isFaded={isFaded}\n        isExpanded={isExpanded}\n        isRootSpan={isRootSpan}\n        toggleChildren={toggleChildren}\n        expandAllDescendants={expandAllDescendants}\n        collapseAllDescendants={collapseAllDescendants}\n        collapseAll={collapseAll}\n        totalDescendants={totalDescendants}\n        allDescendantsExpanded={allDescendantsExpanded}\n        numOfChildren={numOfChildren}\n        toggleSiblings={toggleSiblings}\n        siblingsAllExpanded={siblingsAllExpanded}\n        siblingsWithChildrenCount={siblingsWithChildrenCount}\n      />\n\n      <TimelineTimingCol\n        span={span}\n        selectedSpanId={selectedSpanId}\n        isFaded={isFaded}\n        overallLatency={overallLatency}\n        overallStartTime={overallStartTime}\n        color={spanUI?.color}\n        chartWidth={chartWidth}\n      />\n\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n          const isLast = idx === array.length - 1;\n\n          return (\n            <TraceTimelineSpan\n              key={childSpan.id}\n              span={childSpan}\n              siblings={array}\n              depth={depth + 1}\n              onSpanClick={onSpanClick}\n              selectedSpanId={selectedSpanId}\n              revealSpanId={revealSpanId}\n              isLastChild={isLast}\n              overallLatency={overallLatency}\n              overallStartTime={overallStartTime}\n              fadedTypes={fadedTypes}\n              searchPhrase={searchPhrase}\n              expandedSpanIds={expandedSpanIds}\n              setExpandedSpanIds={setExpandedSpanIds}\n              featuredSpanIds={featuredSpanIds}\n              chartWidth={chartWidth}\n            />\n          );\n        })}\n    </>\n  );\n}\n"],"names":["getSpanDescendantIds","getSpanTypeUi","useEffect","jsxs","Fragment","jsx","TimelineNameCol","TimelineExpandCol","TimelineTimingCol"],"mappings":"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"}

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

@@ -12,6 +12,7 @@ function TraceTimelineSpan({
   depth = 0,
   onSpanClick,
   selectedSpanId,
+  revealSpanId,
   isLastChild,
   overallLatency,
   overallStartTime,
@@ -99,6 +100,7 @@ function TraceTimelineSpan({
         depth,
         onSpanClick,
         selectedSpanId,
+        revealSpanId,
         isLastChild,
         hasChildren,
         isRootSpan,
@@ -146,6 +148,7 @@ function TraceTimelineSpan({
           depth: depth + 1,
           onSpanClick,
           selectedSpanId,
+          revealSpanId,
           isLastChild: isLast,
           overallLatency,
           overallStartTime,

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

@@ -1 +1 @@
-{"version":3,"file":"trace-timeline-span.es.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n  span: UISpan;\n  siblings?: UISpan[];\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  isLastChild?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  fadedTypes?: string[];\n  searchPhrase?: string;\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimelineSpan({\n  span,\n  siblings,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  fadedTypes,\n  searchPhrase,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  chartWidth,\n}: TraceTimelineSpanProps) {\n  const hasChildren = span.spans && span.spans.length > 0;\n  const numOfChildren = span.spans ? span.spans.length : 0;\n  const allDescendantIds = getSpanDescendantIds(span);\n  const totalDescendants = allDescendantIds.length;\n  const isRootSpan = depth === 0;\n  const spanUI = getSpanTypeUi(span?.type);\n  const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n  const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n  const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix || '') : false;\n  const isFaded = isFadedByType || isFadedBySearch;\n\n  useEffect(() => {\n    if (!featuredSpanIds || allDescendantIds.length === 0) return;\n    if (isExpanded) return;\n    const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n    if (hasFeaturedDescendant && setExpandedSpanIds) {\n      setExpandedSpanIds(prev => (!prev || prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [featuredSpanIds, allDescendantIds]);\n\n  const toggleChildren = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n    });\n  };\n\n  const expandAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n    });\n  };\n\n  const collapseAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set(allDescendantIds);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const collapseAll = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set([span.id, ...allDescendantIds]);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n  const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n  const siblingsWithChildrenCount = siblingsWithChildren.length;\n  const siblingsAllExpanded =\n    siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n  const toggleSiblings = () => {\n    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      if (siblingsAllExpanded) {\n        const idsToRemove = new Set<string>();\n        siblingsWithChildren.forEach(s => {\n          idsToRemove.add(s.id);\n          getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n        });\n        return prev.filter(id => !idsToRemove.has(id));\n      }\n      return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n    });\n  };\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={selectedSpanId}\n        isLastChild={isLastChild}\n        hasChildren={hasChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n      />\n\n      <TimelineExpandCol\n        isSelected={selectedSpanId === span.id}\n        isFaded={isFaded}\n        isExpanded={isExpanded}\n        isRootSpan={isRootSpan}\n        toggleChildren={toggleChildren}\n        expandAllDescendants={expandAllDescendants}\n        collapseAllDescendants={collapseAllDescendants}\n        collapseAll={collapseAll}\n        totalDescendants={totalDescendants}\n        allDescendantsExpanded={allDescendantsExpanded}\n        numOfChildren={numOfChildren}\n        toggleSiblings={toggleSiblings}\n        siblingsAllExpanded={siblingsAllExpanded}\n        siblingsWithChildrenCount={siblingsWithChildrenCount}\n      />\n\n      <TimelineTimingCol\n        span={span}\n        selectedSpanId={selectedSpanId}\n        isFaded={isFaded}\n        overallLatency={overallLatency}\n        overallStartTime={overallStartTime}\n        color={spanUI?.color}\n        chartWidth={chartWidth}\n      />\n\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n          const isLast = idx === array.length - 1;\n\n          return (\n            <TraceTimelineSpan\n              key={childSpan.id}\n              span={childSpan}\n              siblings={array}\n              depth={depth + 1}\n              onSpanClick={onSpanClick}\n              selectedSpanId={selectedSpanId}\n              isLastChild={isLast}\n              overallLatency={overallLatency}\n              overallStartTime={overallStartTime}\n              fadedTypes={fadedTypes}\n              searchPhrase={searchPhrase}\n              expandedSpanIds={expandedSpanIds}\n              setExpandedSpanIds={setExpandedSpanIds}\n              featuredSpanIds={featuredSpanIds}\n              chartWidth={chartWidth}\n            />\n          );\n        })}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"trace-timeline-span.es.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n  span: UISpan;\n  siblings?: UISpan[];\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  revealSpanId?: string;\n  isLastChild?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  fadedTypes?: string[];\n  searchPhrase?: string;\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimelineSpan({\n  span,\n  siblings,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  fadedTypes,\n  searchPhrase,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  chartWidth,\n}: TraceTimelineSpanProps) {\n  const hasChildren = span.spans && span.spans.length > 0;\n  const numOfChildren = span.spans ? span.spans.length : 0;\n  const allDescendantIds = getSpanDescendantIds(span);\n  const totalDescendants = allDescendantIds.length;\n  const isRootSpan = depth === 0;\n  const spanUI = getSpanTypeUi(span?.type);\n  const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n  const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n  const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix || '') : false;\n  const isFaded = isFadedByType || isFadedBySearch;\n\n  useEffect(() => {\n    if (!featuredSpanIds || allDescendantIds.length === 0) return;\n    if (isExpanded) return;\n    const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n    if (hasFeaturedDescendant && setExpandedSpanIds) {\n      setExpandedSpanIds(prev => (!prev || prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [featuredSpanIds, allDescendantIds]);\n\n  const toggleChildren = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n    });\n  };\n\n  const expandAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n    });\n  };\n\n  const collapseAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set(allDescendantIds);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const collapseAll = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set([span.id, ...allDescendantIds]);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n  const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n  const siblingsWithChildrenCount = siblingsWithChildren.length;\n  const siblingsAllExpanded =\n    siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n  const toggleSiblings = () => {\n    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      if (siblingsAllExpanded) {\n        const idsToRemove = new Set<string>();\n        siblingsWithChildren.forEach(s => {\n          idsToRemove.add(s.id);\n          getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n        });\n        return prev.filter(id => !idsToRemove.has(id));\n      }\n      return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n    });\n  };\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={selectedSpanId}\n        revealSpanId={revealSpanId}\n        isLastChild={isLastChild}\n        hasChildren={hasChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n      />\n\n      <TimelineExpandCol\n        isSelected={selectedSpanId === span.id}\n        isFaded={isFaded}\n        isExpanded={isExpanded}\n        isRootSpan={isRootSpan}\n        toggleChildren={toggleChildren}\n        expandAllDescendants={expandAllDescendants}\n        collapseAllDescendants={collapseAllDescendants}\n        collapseAll={collapseAll}\n        totalDescendants={totalDescendants}\n        allDescendantsExpanded={allDescendantsExpanded}\n        numOfChildren={numOfChildren}\n        toggleSiblings={toggleSiblings}\n        siblingsAllExpanded={siblingsAllExpanded}\n        siblingsWithChildrenCount={siblingsWithChildrenCount}\n      />\n\n      <TimelineTimingCol\n        span={span}\n        selectedSpanId={selectedSpanId}\n        isFaded={isFaded}\n        overallLatency={overallLatency}\n        overallStartTime={overallStartTime}\n        color={spanUI?.color}\n        chartWidth={chartWidth}\n      />\n\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n          const isLast = idx === array.length - 1;\n\n          return (\n            <TraceTimelineSpan\n              key={childSpan.id}\n              span={childSpan}\n              siblings={array}\n              depth={depth + 1}\n              onSpanClick={onSpanClick}\n              selectedSpanId={selectedSpanId}\n              revealSpanId={revealSpanId}\n              isLastChild={isLast}\n              overallLatency={overallLatency}\n              overallStartTime={overallStartTime}\n              fadedTypes={fadedTypes}\n              searchPhrase={searchPhrase}\n              expandedSpanIds={expandedSpanIds}\n              setExpandedSpanIds={setExpandedSpanIds}\n              featuredSpanIds={featuredSpanIds}\n              chartWidth={chartWidth}\n            />\n          );\n        })}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/traces/components/trace-timeline.cjs.js

@@ -18,6 +18,7 @@ function TraceTimeline({
   expandedSpanIds,
   setExpandedSpanIds,
   featuredSpanIds,
+  revealSpanId,
   chartWidth = "default",
   leadingSlot
 }) {
@@ -79,6 +80,7 @@ function TraceTimeline({
         overallStartTime,
         fadedTypes,
         featuredSpanIds,
+        revealSpanId,
         expandedSpanIds,
         setExpandedSpanIds,
         chartWidth

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

@@ -1 +1 @@
-{"version":3,"file":"trace-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  chartWidth?: 'wide' | 'default';\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  chartWidth = 'default',\n  leadingSlot,\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\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(hierarchicalSpans);\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  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n            '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n          {usedSpanTypes.length > 0 && (\n            <div className=\"flex flex-wrap items-center justify-end 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\n                      className=\"inline-block size-1.5 shrink-0 rounded-full\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsxs","cn","jsx","Spinner","Fragment","getSpanTypeUi","TraceTimelineSpan"],"mappings":"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"}
+{"version":3,"file":"trace-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  chartWidth?: 'wide' | 'default';\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  chartWidth = 'default',\n  leadingSlot,\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\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(hierarchicalSpans);\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  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n            '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n          {usedSpanTypes.length > 0 && (\n            <div className=\"flex flex-wrap items-center justify-end 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\n                      className=\"inline-block size-1.5 shrink-0 rounded-full\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                revealSpanId={revealSpanId}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsxs","cn","jsx","Spinner","Fragment","getSpanTypeUi","TraceTimelineSpan"],"mappings":"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"}

package/dist/domains/traces/components/trace-timeline.es.js

@@ -14,6 +14,7 @@ function TraceTimeline({
   expandedSpanIds,
   setExpandedSpanIds,
   featuredSpanIds,
+  revealSpanId,
   chartWidth = "default",
   leadingSlot
 }) {
@@ -75,6 +76,7 @@ function TraceTimeline({
         overallStartTime,
         fadedTypes,
         featuredSpanIds,
+        revealSpanId,
         expandedSpanIds,
         setExpandedSpanIds,
         chartWidth

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

@@ -1 +1 @@
-{"version":3,"file":"trace-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  chartWidth?: 'wide' | 'default';\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  chartWidth = 'default',\n  leadingSlot,\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\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(hierarchicalSpans);\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  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n            '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n          {usedSpanTypes.length > 0 && (\n            <div className=\"flex flex-wrap items-center justify-end 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\n                      className=\"inline-block size-1.5 shrink-0 rounded-full\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["types"],"mappings":"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"}
+{"version":3,"file":"trace-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  chartWidth?: 'wide' | 'default';\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  chartWidth = 'default',\n  leadingSlot,\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\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(hierarchicalSpans);\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  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center justify-center gap-3 rounded-md bg-surface3/50 p-3 text-ui-sm text-neutral3',\n            '[&_svg]:size-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n          {usedSpanTypes.length > 0 && (\n            <div className=\"flex flex-wrap items-center justify-end 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\n                      className=\"inline-block size-1.5 shrink-0 rounded-full\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                revealSpanId={revealSpanId}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["types"],"mappings":"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"}

package/dist/ee/signals/components/entity-index-list.cjs.js

@@ -6,7 +6,6 @@ const jsxRuntime = require('react/jsx-runtime');
 const ee_signals_components_entityIndexModel = require('./entity-index-model.cjs.js');
 const Badge = require('../../../Badge-uc0ydYdy.cjs');
 const dataList = require('../../../data-list-DWOT5t0J.cjs');
-require('react');
 
 const columns = "minmax(12rem,1.5fr) minmax(7rem,0.6fr) minmax(8rem,0.7fr) minmax(8rem,0.7fr) minmax(12rem,1fr)";
 function Status({ entity }) {

package/dist/ee/signals/components/entity-index-list.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"entity-index-list.cjs.js","sources":["../../../../src/ee/signals/components/entity-index-list.tsx"],"sourcesContent":["import type { ThemeLearningEntity } from '@mastra/client-js';\n\nimport { entityIndexMetadata, entityStatusLabel } from './entity-index-model';\nimport { Badge } from '@/ds/components/Badge';\nimport { DataList } from '@/ds/components/DataList';\nimport type { LinkComponent } from '@/ds/types/link-component';\n\nconst columns = 'minmax(12rem,1.5fr) minmax(7rem,0.6fr) minmax(8rem,0.7fr) minmax(8rem,0.7fr) minmax(12rem,1fr)';\n\nexport interface EntityIndexListProps {\n  entities: readonly ThemeLearningEntity[];\n  hasSearch: boolean;\n  getEntityHref: (entity: ThemeLearningEntity) => string;\n  LinkComponent: LinkComponent;\n}\n\nfunction Status({ entity }: { entity: ThemeLearningEntity }) {\n  const label = entityStatusLabel(entity.status);\n  const variant = entity.status === 'ready' ? 'green' : entity.status === 'processing' ? 'blue' : 'neutral';\n  return (\n    <Badge variant={variant} size=\"sm\" indicator={entity.status === undefined ? undefined : 'dot'}>\n      {label}\n    </Badge>\n  );\n}\n\nexport function EntityIndexList({ entities, hasSearch, getEntityHref, LinkComponent }: EntityIndexListProps) {\n  return (\n    <section aria-label=\"Trace Intelligence entities\" className=\"min-h-0\">\n      <DataList columns={columns} fit=\"container\">\n        <DataList.Top>\n          <DataList.TopCell>Entity</DataList.TopCell>\n          <DataList.TopCell>Traces</DataList.TopCell>\n          <DataList.TopCell>Signals set</DataList.TopCell>\n          <DataList.TopCell>Status</DataList.TopCell>\n          <DataList.TopCell>Updated</DataList.TopCell>\n        </DataList.Top>\n        {entities.length === 0 && hasSearch ? <DataList.NoMatch message=\"No entities match your search\" /> : null}\n        {entities.map(entity => {\n          const metadata = entityIndexMetadata(entity);\n          return (\n            <DataList.RowLink\n              key={`${entity.entityType}:${entity.entityId}`}\n              to={getEntityHref(entity)}\n              LinkComponent={LinkComponent}\n              className=\"min-w-0\"\n            >\n              <DataList.Cell className=\"min-w-0 overflow-visible text-left\">\n                <span className=\"sr-only\">Open entity {entity.entityId}</span>\n                <span aria-hidden=\"true\" className=\"block overflow-clip text-ellipsis whitespace-nowrap\">\n                  {entity.entityId}\n                </span>\n              </DataList.Cell>\n              <DataList.NumberCell>{metadata.traceCount}</DataList.NumberCell>\n              <DataList.Cell>{metadata.signalsSet}</DataList.Cell>\n              <DataList.Cell>\n                <Status entity={entity} />\n              </DataList.Cell>\n              <DataList.Cell title={entity.updatedAt}>{metadata.updatedAt}</DataList.Cell>\n            </DataList.RowLink>\n          );\n        })}\n      </DataList>\n    </section>\n  );\n}\n"],"names":["entityStatusLabel","jsx","Badge","jsxs","DataList","entityIndexMetadata"],"mappings":"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"}
+{"version":3,"file":"entity-index-list.cjs.js","sources":["../../../../src/ee/signals/components/entity-index-list.tsx"],"sourcesContent":["import type { ThemeLearningEntity } from '@mastra/client-js';\n\nimport { entityIndexMetadata, entityStatusLabel } from './entity-index-model';\nimport { Badge } from '@/ds/components/Badge';\nimport { DataList } from '@/ds/components/DataList';\nimport type { LinkComponent } from '@/ds/types/link-component';\n\nconst columns = 'minmax(12rem,1.5fr) minmax(7rem,0.6fr) minmax(8rem,0.7fr) minmax(8rem,0.7fr) minmax(12rem,1fr)';\n\nexport interface EntityIndexListProps {\n  entities: readonly ThemeLearningEntity[];\n  hasSearch: boolean;\n  getEntityHref: (entity: ThemeLearningEntity) => string;\n  LinkComponent: LinkComponent;\n}\n\nfunction Status({ entity }: { entity: ThemeLearningEntity }) {\n  const label = entityStatusLabel(entity.status);\n  const variant = entity.status === 'ready' ? 'green' : entity.status === 'processing' ? 'blue' : 'neutral';\n  return (\n    <Badge variant={variant} size=\"sm\" indicator={entity.status === undefined ? undefined : 'dot'}>\n      {label}\n    </Badge>\n  );\n}\n\nexport function EntityIndexList({ entities, hasSearch, getEntityHref, LinkComponent }: EntityIndexListProps) {\n  return (\n    <section aria-label=\"Trace Intelligence entities\" className=\"min-h-0\">\n      <DataList columns={columns} fit=\"container\">\n        <DataList.Top>\n          <DataList.TopCell>Entity</DataList.TopCell>\n          <DataList.TopCell>Traces</DataList.TopCell>\n          <DataList.TopCell>Signals set</DataList.TopCell>\n          <DataList.TopCell>Status</DataList.TopCell>\n          <DataList.TopCell>Updated</DataList.TopCell>\n        </DataList.Top>\n        {entities.length === 0 && hasSearch ? <DataList.NoMatch message=\"No entities match your search\" /> : null}\n        {entities.map(entity => {\n          const metadata = entityIndexMetadata(entity);\n          return (\n            <DataList.RowLink\n              key={`${entity.entityType}:${entity.entityId}`}\n              to={getEntityHref(entity)}\n              LinkComponent={LinkComponent}\n              className=\"min-w-0\"\n            >\n              <DataList.Cell className=\"min-w-0 overflow-visible text-left\">\n                <span className=\"sr-only\">Open entity {entity.entityId}</span>\n                <span aria-hidden=\"true\" className=\"block overflow-clip text-ellipsis whitespace-nowrap\">\n                  {entity.entityId}\n                </span>\n              </DataList.Cell>\n              <DataList.NumberCell>{metadata.traceCount}</DataList.NumberCell>\n              <DataList.Cell>{metadata.signalsSet}</DataList.Cell>\n              <DataList.Cell>\n                <Status entity={entity} />\n              </DataList.Cell>\n              <DataList.Cell title={entity.updatedAt}>{metadata.updatedAt}</DataList.Cell>\n            </DataList.RowLink>\n          );\n        })}\n      </DataList>\n    </section>\n  );\n}\n"],"names":["entityStatusLabel","jsx","Badge","jsxs","DataList","entityIndexMetadata"],"mappings":"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"}

package/dist/ee/signals/components/entity-index-list.es.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { entityIndexMetadata, entityStatusLabel } from './entity-index-model.es.js';
 import { B as Badge } from '../../../Badge-CvgvWjuP.js';
 import { D as DataList } from '../../../data-list-BiEEjaEy.js';
-import 'react';
 
 const columns = "minmax(12rem,1.5fr) minmax(7rem,0.6fr) minmax(8rem,0.7fr) minmax(8rem,0.7fr) minmax(12rem,1fr)";
 function Status({ entity }) {

package/dist/ee/signals/components/entity-index-list.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"entity-index-list.es.js","sources":["../../../../src/ee/signals/components/entity-index-list.tsx"],"sourcesContent":["import type { ThemeLearningEntity } from '@mastra/client-js';\n\nimport { entityIndexMetadata, entityStatusLabel } from './entity-index-model';\nimport { Badge } from '@/ds/components/Badge';\nimport { DataList } from '@/ds/components/DataList';\nimport type { LinkComponent } from '@/ds/types/link-component';\n\nconst columns = 'minmax(12rem,1.5fr) minmax(7rem,0.6fr) minmax(8rem,0.7fr) minmax(8rem,0.7fr) minmax(12rem,1fr)';\n\nexport interface EntityIndexListProps {\n  entities: readonly ThemeLearningEntity[];\n  hasSearch: boolean;\n  getEntityHref: (entity: ThemeLearningEntity) => string;\n  LinkComponent: LinkComponent;\n}\n\nfunction Status({ entity }: { entity: ThemeLearningEntity }) {\n  const label = entityStatusLabel(entity.status);\n  const variant = entity.status === 'ready' ? 'green' : entity.status === 'processing' ? 'blue' : 'neutral';\n  return (\n    <Badge variant={variant} size=\"sm\" indicator={entity.status === undefined ? undefined : 'dot'}>\n      {label}\n    </Badge>\n  );\n}\n\nexport function EntityIndexList({ entities, hasSearch, getEntityHref, LinkComponent }: EntityIndexListProps) {\n  return (\n    <section aria-label=\"Trace Intelligence entities\" className=\"min-h-0\">\n      <DataList columns={columns} fit=\"container\">\n        <DataList.Top>\n          <DataList.TopCell>Entity</DataList.TopCell>\n          <DataList.TopCell>Traces</DataList.TopCell>\n          <DataList.TopCell>Signals set</DataList.TopCell>\n          <DataList.TopCell>Status</DataList.TopCell>\n          <DataList.TopCell>Updated</DataList.TopCell>\n        </DataList.Top>\n        {entities.length === 0 && hasSearch ? <DataList.NoMatch message=\"No entities match your search\" /> : null}\n        {entities.map(entity => {\n          const metadata = entityIndexMetadata(entity);\n          return (\n            <DataList.RowLink\n              key={`${entity.entityType}:${entity.entityId}`}\n              to={getEntityHref(entity)}\n              LinkComponent={LinkComponent}\n              className=\"min-w-0\"\n            >\n              <DataList.Cell className=\"min-w-0 overflow-visible text-left\">\n                <span className=\"sr-only\">Open entity {entity.entityId}</span>\n                <span aria-hidden=\"true\" className=\"block overflow-clip text-ellipsis whitespace-nowrap\">\n                  {entity.entityId}\n                </span>\n              </DataList.Cell>\n              <DataList.NumberCell>{metadata.traceCount}</DataList.NumberCell>\n              <DataList.Cell>{metadata.signalsSet}</DataList.Cell>\n              <DataList.Cell>\n                <Status entity={entity} />\n              </DataList.Cell>\n              <DataList.Cell title={entity.updatedAt}>{metadata.updatedAt}</DataList.Cell>\n            </DataList.RowLink>\n          );\n        })}\n      </DataList>\n    </section>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"entity-index-list.es.js","sources":["../../../../src/ee/signals/components/entity-index-list.tsx"],"sourcesContent":["import type { ThemeLearningEntity } from '@mastra/client-js';\n\nimport { entityIndexMetadata, entityStatusLabel } from './entity-index-model';\nimport { Badge } from '@/ds/components/Badge';\nimport { DataList } from '@/ds/components/DataList';\nimport type { LinkComponent } from '@/ds/types/link-component';\n\nconst columns = 'minmax(12rem,1.5fr) minmax(7rem,0.6fr) minmax(8rem,0.7fr) minmax(8rem,0.7fr) minmax(12rem,1fr)';\n\nexport interface EntityIndexListProps {\n  entities: readonly ThemeLearningEntity[];\n  hasSearch: boolean;\n  getEntityHref: (entity: ThemeLearningEntity) => string;\n  LinkComponent: LinkComponent;\n}\n\nfunction Status({ entity }: { entity: ThemeLearningEntity }) {\n  const label = entityStatusLabel(entity.status);\n  const variant = entity.status === 'ready' ? 'green' : entity.status === 'processing' ? 'blue' : 'neutral';\n  return (\n    <Badge variant={variant} size=\"sm\" indicator={entity.status === undefined ? undefined : 'dot'}>\n      {label}\n    </Badge>\n  );\n}\n\nexport function EntityIndexList({ entities, hasSearch, getEntityHref, LinkComponent }: EntityIndexListProps) {\n  return (\n    <section aria-label=\"Trace Intelligence entities\" className=\"min-h-0\">\n      <DataList columns={columns} fit=\"container\">\n        <DataList.Top>\n          <DataList.TopCell>Entity</DataList.TopCell>\n          <DataList.TopCell>Traces</DataList.TopCell>\n          <DataList.TopCell>Signals set</DataList.TopCell>\n          <DataList.TopCell>Status</DataList.TopCell>\n          <DataList.TopCell>Updated</DataList.TopCell>\n        </DataList.Top>\n        {entities.length === 0 && hasSearch ? <DataList.NoMatch message=\"No entities match your search\" /> : null}\n        {entities.map(entity => {\n          const metadata = entityIndexMetadata(entity);\n          return (\n            <DataList.RowLink\n              key={`${entity.entityType}:${entity.entityId}`}\n              to={getEntityHref(entity)}\n              LinkComponent={LinkComponent}\n              className=\"min-w-0\"\n            >\n              <DataList.Cell className=\"min-w-0 overflow-visible text-left\">\n                <span className=\"sr-only\">Open entity {entity.entityId}</span>\n                <span aria-hidden=\"true\" className=\"block overflow-clip text-ellipsis whitespace-nowrap\">\n                  {entity.entityId}\n                </span>\n              </DataList.Cell>\n              <DataList.NumberCell>{metadata.traceCount}</DataList.NumberCell>\n              <DataList.Cell>{metadata.signalsSet}</DataList.Cell>\n              <DataList.Cell>\n                <Status entity={entity} />\n              </DataList.Cell>\n              <DataList.Cell title={entity.updatedAt}>{metadata.updatedAt}</DataList.Cell>\n            </DataList.RowLink>\n          );\n        })}\n      </DataList>\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;;;AAOA,MAAM,OAAA,GAAU,gGAAA;AAShB,SAAS,MAAA,CAAO,EAAE,MAAA,EAAO,EAAoC;AAC3D,EAAA,MAAM,KAAA,GAAQ,iBAAA,CAAkB,MAAA,CAAO,MAAM,CAAA;AAC7C,EAAA,MAAM,OAAA,GAAU,OAAO,MAAA,KAAW,OAAA,GAAU,UAAU,MAAA,CAAO,MAAA,KAAW,eAAe,MAAA,GAAS,SAAA;AAChG,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAM,OAAA,EAAkB,IAAA,EAAK,IAAA,EAAK,SAAA,EAAW,MAAA,CAAO,MAAA,KAAW,MAAA,GAAY,MAAA,GAAY,KAAA,EACrF,QAAA,EAAA,KAAA,EACH,CAAA;AAEJ;AAEO,SAAS,gBAAgB,EAAE,QAAA,EAAU,SAAA,EAAW,aAAA,EAAe,eAAc,EAAyB;AAC3G,EAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EAAQ,YAAA,EAAW,6BAAA,EAA8B,SAAA,EAAU,WAC1D,QAAA,kBAAA,IAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,GAAA,EAAI,WAAA,EAC9B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAA,CAAS,KAAT,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAA,CAAS,OAAA,EAAT,EAAiB,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBACxB,GAAA,CAAC,QAAA,CAAS,OAAA,EAAT,EAAiB,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBACxB,GAAA,CAAC,QAAA,CAAS,OAAA,EAAT,EAAiB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,sBAC7B,GAAA,CAAC,QAAA,CAAS,OAAA,EAAT,EAAiB,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBACxB,GAAA,CAAC,QAAA,CAAS,OAAA,EAAT,EAAiB,QAAA,EAAA,SAAA,EAAO;AAAA,KAAA,EAC3B,CAAA;AAAA,IACC,QAAA,CAAS,MAAA,KAAW,CAAA,IAAK,SAAA,mBAAY,GAAA,CAAC,SAAS,OAAA,EAAT,EAAiB,OAAA,EAAQ,+BAAA,EAAgC,CAAA,GAAK,IAAA;AAAA,IACpG,QAAA,CAAS,IAAI,CAAA,MAAA,KAAU;AACtB,MAAA,MAAM,QAAA,GAAW,oBAAoB,MAAM,CAAA;AAC3C,MAAA,uBACE,IAAA;AAAA,QAAC,QAAA,CAAS,OAAA;AAAA,QAAT;AAAA,UAEC,EAAA,EAAI,cAAc,MAAM,CAAA;AAAA,UACxB,aAAA;AAAA,UACA,SAAA,EAAU,SAAA;AAAA,UAEV,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,QAAA,CAAS,IAAA,EAAT,EAAc,SAAA,EAAU,oCAAA,EACvB,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,SAAA,EAAU,QAAA,EAAA;AAAA,gBAAA,cAAA;AAAA,gBAAa,MAAA,CAAO;AAAA,eAAA,EAAS,CAAA;AAAA,kCACtD,MAAA,EAAA,EAAK,aAAA,EAAY,QAAO,SAAA,EAAU,qDAAA,EAChC,iBAAO,QAAA,EACV;AAAA,aAAA,EACF,CAAA;AAAA,4BACA,GAAA,CAAC,QAAA,CAAS,UAAA,EAAT,EAAqB,mBAAS,UAAA,EAAW,CAAA;AAAA,4BAC1C,GAAA,CAAC,QAAA,CAAS,IAAA,EAAT,EAAe,mBAAS,UAAA,EAAW,CAAA;AAAA,gCACnC,QAAA,CAAS,IAAA,EAAT,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,QAAgB,CAAA,EAC1B,CAAA;AAAA,4BACA,GAAA,CAAC,SAAS,IAAA,EAAT,EAAc,OAAO,MAAA,CAAO,SAAA,EAAY,mBAAS,SAAA,EAAU;AAAA;AAAA,SAAA;AAAA,QAhBvD,CAAA,EAAG,MAAA,CAAO,UAAU,CAAA,CAAA,EAAI,OAAO,QAAQ,CAAA;AAAA,OAiB9C;AAAA,IAEJ,CAAC;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ;;;;"}