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

package/dist/domains/traces/components/span-rows.cjs.js

@@ -14,7 +14,6 @@ function SpanRows({ spans, ...rowProps }) {
     SpanRow,
     {
       span,
-      siblings: spans,
       depth: 0,
       isLastChild: idx === spans.length - 1,
       overallLatency,
@@ -26,7 +25,6 @@ function SpanRows({ spans, ...rowProps }) {
 }
 function SpanRow({
   span,
-  siblings,
   depth,
   isLastChild,
   overallLatency,
@@ -43,7 +41,6 @@ function SpanRow({
   const hasChildren = Boolean(span.spans && span.spans.length > 0);
   const numOfChildren = span.spans ? span.spans.length : 0;
   const allDescendantIds = domains_traces_hooks_getAllSpanIds.getSpanDescendantIds(span);
-  const totalDescendants = allDescendantIds.length;
   const isRootSpan = depth === 0;
   const spanUI = domains_traces_components_shared.getSpanTypeUi(span?.type);
   const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;
@@ -65,48 +62,6 @@ function SpanRow({
       return isExpanded ? prev.filter((id) => id !== span.id) : [...prev, span.id];
     });
   };
-  const expandAllDescendants = () => {
-    if (!setExpandedSpanIds) return;
-    setExpandedSpanIds((prev) => {
-      if (!prev) return prev;
-      return Array.from(/* @__PURE__ */ new Set([...prev, span.id, ...allDescendantIds]));
-    });
-  };
-  const collapseAllDescendants = () => {
-    if (!setExpandedSpanIds) return;
-    setExpandedSpanIds((prev) => {
-      if (!prev) return prev;
-      const idsToRemove = new Set(allDescendantIds);
-      return prev.filter((id) => !idsToRemove.has(id));
-    });
-  };
-  const collapseAll = () => {
-    if (!setExpandedSpanIds) return;
-    setExpandedSpanIds((prev) => {
-      if (!prev) return prev;
-      const idsToRemove = /* @__PURE__ */ new Set([span.id, ...allDescendantIds]);
-      return prev.filter((id) => !idsToRemove.has(id));
-    });
-  };
-  const allDescendantsExpanded = allDescendantIds.every((id) => expandedSpanIds?.includes(id));
-  const siblingsWithChildren = siblings.filter((s) => s.spans && s.spans.length > 0);
-  const siblingsWithChildrenCount = siblingsWithChildren.length;
-  const siblingsAllExpanded = siblingsWithChildrenCount > 0 && siblingsWithChildren.every((s) => expandedSpanIds?.includes(s.id));
-  const toggleSiblings = () => {
-    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;
-    setExpandedSpanIds((prev) => {
-      if (!prev) return prev;
-      if (siblingsAllExpanded) {
-        const idsToRemove = /* @__PURE__ */ new Set();
-        siblingsWithChildren.forEach((s) => {
-          idsToRemove.add(s.id);
-          domains_traces_hooks_getAllSpanIds.getSpanDescendantIds(s).forEach((id) => idsToRemove.add(id));
-        });
-        return prev.filter((id) => !idsToRemove.has(id));
-      }
-      return Array.from(/* @__PURE__ */ new Set([...prev, ...siblingsWithChildren.map((s) => s.id)]));
-    });
-  };
   const ctx = {
     span,
     spanUI,
@@ -123,15 +78,7 @@ function SpanRow({
     expansion: {
       hasChildren,
       numOfChildren,
-      totalDescendants,
-      allDescendantsExpanded,
-      siblingsWithChildrenCount,
-      siblingsAllExpanded,
-      toggleChildren,
-      expandAllDescendants,
-      collapseAllDescendants,
-      collapseAll,
-      toggleSiblings
+      toggleChildren
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
@@ -140,7 +87,6 @@ function SpanRow({
       SpanRow,
       {
         span: childSpan,
-        siblings: array,
         depth: depth + 1,
         isLastChild: idx === array.length - 1,
         overallLatency,

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

@@ -1 +1 @@
-{"version":3,"file":"span-rows.cjs.js","sources":["../../../../src/domains/traces/components/span-rows.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { Fragment, useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { getSpanTypeUi } from './shared';\n\nexport type SpanRowExpansion = {\n  hasChildren: boolean;\n  numOfChildren: number;\n  totalDescendants: number;\n  allDescendantsExpanded: boolean;\n  siblingsWithChildrenCount: number;\n  siblingsAllExpanded: boolean;\n  toggleChildren: () => void;\n  expandAllDescendants: () => void;\n  collapseAllDescendants: () => void;\n  collapseAll: () => void;\n  toggleSiblings: () => void;\n};\n\nexport type SpanRowContext = {\n  span: UISpan;\n  spanUI: UISpanStyle | null | undefined;\n  depth: number;\n  isRootSpan: boolean;\n  isLastChild: boolean;\n  isExpanded: boolean;\n  isSelected: boolean;\n  isFaded: boolean;\n  isRevealed: boolean;\n  overallLatency: number;\n  overallStartTime: string;\n  onSpanClick?: (id: string) => void;\n  expansion: SpanRowExpansion;\n};\n\ntype SharedRowProps = {\n  renderRow: (ctx: SpanRowContext) => ReactNode;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  /** Row flagged as revealed once mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  fadedTypes?: string[];\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport type SpanRowsProps = SharedRowProps & {\n  spans: UISpan[];\n};\n\n/**\n * Headless depth-first walker over a span hierarchy. Owns the expansion / fade /\n * reveal state of each row and delegates all markup to `renderRow`. Children are\n * only mounted while their parent is expanded.\n */\nexport function SpanRows({ spans, ...rowProps }: SpanRowsProps) {\n  const overallLatency = spans[0]?.latency || 0;\n  const overallStartTime = spans[0]?.startTime || '';\n\n  return (\n    <>\n      {spans.map((span, idx) => (\n        <SpanRow\n          key={span.id}\n          span={span}\n          siblings={spans}\n          depth={0}\n          isLastChild={idx === spans.length - 1}\n          overallLatency={overallLatency}\n          overallStartTime={overallStartTime}\n          {...rowProps}\n        />\n      ))}\n    </>\n  );\n}\n\ntype SpanRowProps = SharedRowProps & {\n  span: UISpan;\n  siblings: UISpan[];\n  depth: number;\n  isLastChild: boolean;\n  overallLatency: number;\n  overallStartTime: string;\n};\n\nfunction SpanRow({\n  span,\n  siblings,\n  depth,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  renderRow,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  fadedTypes,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n}: SpanRowProps) {\n  const hasChildren = Boolean(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  const ctx: SpanRowContext = {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected: selectedSpanId === span.id,\n    isFaded,\n    isRevealed: revealSpanId === span.id,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion: {\n      hasChildren,\n      numOfChildren,\n      totalDescendants,\n      allDescendantsExpanded,\n      siblingsWithChildrenCount,\n      siblingsAllExpanded,\n      toggleChildren,\n      expandAllDescendants,\n      collapseAllDescendants,\n      collapseAll,\n      toggleSiblings,\n    },\n  };\n\n  return (\n    <Fragment>\n      {renderRow(ctx)}\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan, idx, array) => (\n          <SpanRow\n            key={childSpan.id}\n            span={childSpan}\n            siblings={array}\n            depth={depth + 1}\n            isLastChild={idx === array.length - 1}\n            overallLatency={overallLatency}\n            overallStartTime={overallStartTime}\n            renderRow={renderRow}\n            onSpanClick={onSpanClick}\n            selectedSpanId={selectedSpanId}\n            revealSpanId={revealSpanId}\n            fadedTypes={fadedTypes}\n            featuredSpanIds={featuredSpanIds}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n          />\n        ))}\n    </Fragment>\n  );\n}\n"],"names":["jsx","Fragment","getSpanDescendantIds","getSpanTypeUi","useEffect","jsxs"],"mappings":"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"}
+{"version":3,"file":"span-rows.cjs.js","sources":["../../../../src/domains/traces/components/span-rows.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { Fragment, useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { getSpanTypeUi } from './shared';\n\nexport type SpanRowExpansion = {\n  hasChildren: boolean;\n  numOfChildren: number;\n  toggleChildren: () => void;\n};\n\nexport type SpanRowContext = {\n  span: UISpan;\n  spanUI: UISpanStyle | null | undefined;\n  depth: number;\n  isRootSpan: boolean;\n  isLastChild: boolean;\n  isExpanded: boolean;\n  isSelected: boolean;\n  isFaded: boolean;\n  isRevealed: boolean;\n  overallLatency: number;\n  overallStartTime: string;\n  onSpanClick?: (id: string) => void;\n  expansion: SpanRowExpansion;\n};\n\ntype SharedRowProps = {\n  renderRow: (ctx: SpanRowContext) => ReactNode;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  /** Row flagged as revealed once mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  fadedTypes?: string[];\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport type SpanRowsProps = SharedRowProps & {\n  spans: UISpan[];\n};\n\n/**\n * Headless depth-first walker over a span hierarchy. Owns the expansion / fade /\n * reveal state of each row and delegates all markup to `renderRow`. Children are\n * only mounted while their parent is expanded.\n */\nexport function SpanRows({ spans, ...rowProps }: SpanRowsProps) {\n  const overallLatency = spans[0]?.latency || 0;\n  const overallStartTime = spans[0]?.startTime || '';\n\n  return (\n    <>\n      {spans.map((span, idx) => (\n        <SpanRow\n          key={span.id}\n          span={span}\n          depth={0}\n          isLastChild={idx === spans.length - 1}\n          overallLatency={overallLatency}\n          overallStartTime={overallStartTime}\n          {...rowProps}\n        />\n      ))}\n    </>\n  );\n}\n\ntype SpanRowProps = SharedRowProps & {\n  span: UISpan;\n  depth: number;\n  isLastChild: boolean;\n  overallLatency: number;\n  overallStartTime: string;\n};\n\nfunction SpanRow({\n  span,\n  depth,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  renderRow,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  fadedTypes,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n}: SpanRowProps) {\n  const hasChildren = Boolean(span.spans && span.spans.length > 0);\n  const numOfChildren = span.spans ? span.spans.length : 0;\n  const allDescendantIds = getSpanDescendantIds(span);\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 ctx: SpanRowContext = {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected: selectedSpanId === span.id,\n    isFaded,\n    isRevealed: revealSpanId === span.id,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion: {\n      hasChildren,\n      numOfChildren,\n      toggleChildren,\n    },\n  };\n\n  return (\n    <Fragment>\n      {renderRow(ctx)}\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan, idx, array) => (\n          <SpanRow\n            key={childSpan.id}\n            span={childSpan}\n            depth={depth + 1}\n            isLastChild={idx === array.length - 1}\n            overallLatency={overallLatency}\n            overallStartTime={overallStartTime}\n            renderRow={renderRow}\n            onSpanClick={onSpanClick}\n            selectedSpanId={selectedSpanId}\n            revealSpanId={revealSpanId}\n            fadedTypes={fadedTypes}\n            featuredSpanIds={featuredSpanIds}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n          />\n        ))}\n    </Fragment>\n  );\n}\n"],"names":["jsx","Fragment","getSpanDescendantIds","getSpanTypeUi","useEffect","jsxs"],"mappings":"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"}

package/dist/domains/traces/components/span-rows.es.js

@@ -10,7 +10,6 @@ function SpanRows({ spans, ...rowProps }) {
     SpanRow,
     {
       span,
-      siblings: spans,
       depth: 0,
       isLastChild: idx === spans.length - 1,
       overallLatency,
@@ -22,7 +21,6 @@ function SpanRows({ spans, ...rowProps }) {
 }
 function SpanRow({
   span,
-  siblings,
   depth,
   isLastChild,
   overallLatency,
@@ -39,7 +37,6 @@ function SpanRow({
   const hasChildren = Boolean(span.spans && span.spans.length > 0);
   const numOfChildren = span.spans ? span.spans.length : 0;
   const allDescendantIds = getSpanDescendantIds(span);
-  const totalDescendants = allDescendantIds.length;
   const isRootSpan = depth === 0;
   const spanUI = getSpanTypeUi(span?.type);
   const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;
@@ -61,48 +58,6 @@ function SpanRow({
       return isExpanded ? prev.filter((id) => id !== span.id) : [...prev, span.id];
     });
   };
-  const expandAllDescendants = () => {
-    if (!setExpandedSpanIds) return;
-    setExpandedSpanIds((prev) => {
-      if (!prev) return prev;
-      return Array.from(/* @__PURE__ */ new Set([...prev, span.id, ...allDescendantIds]));
-    });
-  };
-  const collapseAllDescendants = () => {
-    if (!setExpandedSpanIds) return;
-    setExpandedSpanIds((prev) => {
-      if (!prev) return prev;
-      const idsToRemove = new Set(allDescendantIds);
-      return prev.filter((id) => !idsToRemove.has(id));
-    });
-  };
-  const collapseAll = () => {
-    if (!setExpandedSpanIds) return;
-    setExpandedSpanIds((prev) => {
-      if (!prev) return prev;
-      const idsToRemove = /* @__PURE__ */ new Set([span.id, ...allDescendantIds]);
-      return prev.filter((id) => !idsToRemove.has(id));
-    });
-  };
-  const allDescendantsExpanded = allDescendantIds.every((id) => expandedSpanIds?.includes(id));
-  const siblingsWithChildren = siblings.filter((s) => s.spans && s.spans.length > 0);
-  const siblingsWithChildrenCount = siblingsWithChildren.length;
-  const siblingsAllExpanded = siblingsWithChildrenCount > 0 && siblingsWithChildren.every((s) => expandedSpanIds?.includes(s.id));
-  const toggleSiblings = () => {
-    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;
-    setExpandedSpanIds((prev) => {
-      if (!prev) return prev;
-      if (siblingsAllExpanded) {
-        const idsToRemove = /* @__PURE__ */ new Set();
-        siblingsWithChildren.forEach((s) => {
-          idsToRemove.add(s.id);
-          getSpanDescendantIds(s).forEach((id) => idsToRemove.add(id));
-        });
-        return prev.filter((id) => !idsToRemove.has(id));
-      }
-      return Array.from(/* @__PURE__ */ new Set([...prev, ...siblingsWithChildren.map((s) => s.id)]));
-    });
-  };
   const ctx = {
     span,
     spanUI,
@@ -119,15 +74,7 @@ function SpanRow({
     expansion: {
       hasChildren,
       numOfChildren,
-      totalDescendants,
-      allDescendantsExpanded,
-      siblingsWithChildrenCount,
-      siblingsAllExpanded,
-      toggleChildren,
-      expandAllDescendants,
-      collapseAllDescendants,
-      collapseAll,
-      toggleSiblings
+      toggleChildren
     }
   };
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -136,7 +83,6 @@ function SpanRow({
       SpanRow,
       {
         span: childSpan,
-        siblings: array,
         depth: depth + 1,
         isLastChild: idx === array.length - 1,
         overallLatency,

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

@@ -1 +1 @@
-{"version":3,"file":"span-rows.es.js","sources":["../../../../src/domains/traces/components/span-rows.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { Fragment, useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { getSpanTypeUi } from './shared';\n\nexport type SpanRowExpansion = {\n  hasChildren: boolean;\n  numOfChildren: number;\n  totalDescendants: number;\n  allDescendantsExpanded: boolean;\n  siblingsWithChildrenCount: number;\n  siblingsAllExpanded: boolean;\n  toggleChildren: () => void;\n  expandAllDescendants: () => void;\n  collapseAllDescendants: () => void;\n  collapseAll: () => void;\n  toggleSiblings: () => void;\n};\n\nexport type SpanRowContext = {\n  span: UISpan;\n  spanUI: UISpanStyle | null | undefined;\n  depth: number;\n  isRootSpan: boolean;\n  isLastChild: boolean;\n  isExpanded: boolean;\n  isSelected: boolean;\n  isFaded: boolean;\n  isRevealed: boolean;\n  overallLatency: number;\n  overallStartTime: string;\n  onSpanClick?: (id: string) => void;\n  expansion: SpanRowExpansion;\n};\n\ntype SharedRowProps = {\n  renderRow: (ctx: SpanRowContext) => ReactNode;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  /** Row flagged as revealed once mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  fadedTypes?: string[];\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport type SpanRowsProps = SharedRowProps & {\n  spans: UISpan[];\n};\n\n/**\n * Headless depth-first walker over a span hierarchy. Owns the expansion / fade /\n * reveal state of each row and delegates all markup to `renderRow`. Children are\n * only mounted while their parent is expanded.\n */\nexport function SpanRows({ spans, ...rowProps }: SpanRowsProps) {\n  const overallLatency = spans[0]?.latency || 0;\n  const overallStartTime = spans[0]?.startTime || '';\n\n  return (\n    <>\n      {spans.map((span, idx) => (\n        <SpanRow\n          key={span.id}\n          span={span}\n          siblings={spans}\n          depth={0}\n          isLastChild={idx === spans.length - 1}\n          overallLatency={overallLatency}\n          overallStartTime={overallStartTime}\n          {...rowProps}\n        />\n      ))}\n    </>\n  );\n}\n\ntype SpanRowProps = SharedRowProps & {\n  span: UISpan;\n  siblings: UISpan[];\n  depth: number;\n  isLastChild: boolean;\n  overallLatency: number;\n  overallStartTime: string;\n};\n\nfunction SpanRow({\n  span,\n  siblings,\n  depth,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  renderRow,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  fadedTypes,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n}: SpanRowProps) {\n  const hasChildren = Boolean(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  const ctx: SpanRowContext = {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected: selectedSpanId === span.id,\n    isFaded,\n    isRevealed: revealSpanId === span.id,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion: {\n      hasChildren,\n      numOfChildren,\n      totalDescendants,\n      allDescendantsExpanded,\n      siblingsWithChildrenCount,\n      siblingsAllExpanded,\n      toggleChildren,\n      expandAllDescendants,\n      collapseAllDescendants,\n      collapseAll,\n      toggleSiblings,\n    },\n  };\n\n  return (\n    <Fragment>\n      {renderRow(ctx)}\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan, idx, array) => (\n          <SpanRow\n            key={childSpan.id}\n            span={childSpan}\n            siblings={array}\n            depth={depth + 1}\n            isLastChild={idx === array.length - 1}\n            overallLatency={overallLatency}\n            overallStartTime={overallStartTime}\n            renderRow={renderRow}\n            onSpanClick={onSpanClick}\n            selectedSpanId={selectedSpanId}\n            revealSpanId={revealSpanId}\n            fadedTypes={fadedTypes}\n            featuredSpanIds={featuredSpanIds}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n          />\n        ))}\n    </Fragment>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}
+{"version":3,"file":"span-rows.es.js","sources":["../../../../src/domains/traces/components/span-rows.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { Fragment, useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan, UISpanStyle } from '../types';\nimport { getSpanTypeUi } from './shared';\n\nexport type SpanRowExpansion = {\n  hasChildren: boolean;\n  numOfChildren: number;\n  toggleChildren: () => void;\n};\n\nexport type SpanRowContext = {\n  span: UISpan;\n  spanUI: UISpanStyle | null | undefined;\n  depth: number;\n  isRootSpan: boolean;\n  isLastChild: boolean;\n  isExpanded: boolean;\n  isSelected: boolean;\n  isFaded: boolean;\n  isRevealed: boolean;\n  overallLatency: number;\n  overallStartTime: string;\n  onSpanClick?: (id: string) => void;\n  expansion: SpanRowExpansion;\n};\n\ntype SharedRowProps = {\n  renderRow: (ctx: SpanRowContext) => ReactNode;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  /** Row flagged as revealed once mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  fadedTypes?: string[];\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n};\n\nexport type SpanRowsProps = SharedRowProps & {\n  spans: UISpan[];\n};\n\n/**\n * Headless depth-first walker over a span hierarchy. Owns the expansion / fade /\n * reveal state of each row and delegates all markup to `renderRow`. Children are\n * only mounted while their parent is expanded.\n */\nexport function SpanRows({ spans, ...rowProps }: SpanRowsProps) {\n  const overallLatency = spans[0]?.latency || 0;\n  const overallStartTime = spans[0]?.startTime || '';\n\n  return (\n    <>\n      {spans.map((span, idx) => (\n        <SpanRow\n          key={span.id}\n          span={span}\n          depth={0}\n          isLastChild={idx === spans.length - 1}\n          overallLatency={overallLatency}\n          overallStartTime={overallStartTime}\n          {...rowProps}\n        />\n      ))}\n    </>\n  );\n}\n\ntype SpanRowProps = SharedRowProps & {\n  span: UISpan;\n  depth: number;\n  isLastChild: boolean;\n  overallLatency: number;\n  overallStartTime: string;\n};\n\nfunction SpanRow({\n  span,\n  depth,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  renderRow,\n  onSpanClick,\n  selectedSpanId,\n  revealSpanId,\n  fadedTypes,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n}: SpanRowProps) {\n  const hasChildren = Boolean(span.spans && span.spans.length > 0);\n  const numOfChildren = span.spans ? span.spans.length : 0;\n  const allDescendantIds = getSpanDescendantIds(span);\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 ctx: SpanRowContext = {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected: selectedSpanId === span.id,\n    isFaded,\n    isRevealed: revealSpanId === span.id,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion: {\n      hasChildren,\n      numOfChildren,\n      toggleChildren,\n    },\n  };\n\n  return (\n    <Fragment>\n      {renderRow(ctx)}\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan, idx, array) => (\n          <SpanRow\n            key={childSpan.id}\n            span={childSpan}\n            depth={depth + 1}\n            isLastChild={idx === array.length - 1}\n            overallLatency={overallLatency}\n            overallStartTime={overallStartTime}\n            renderRow={renderRow}\n            onSpanClick={onSpanClick}\n            selectedSpanId={selectedSpanId}\n            revealSpanId={revealSpanId}\n            fadedTypes={fadedTypes}\n            featuredSpanIds={featuredSpanIds}\n            expandedSpanIds={expandedSpanIds}\n            setExpandedSpanIds={setExpandedSpanIds}\n          />\n        ))}\n    </Fragment>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/domains/traces/components/span-summary-description.cjs.js

@@ -5,57 +5,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
-const tooltip = require('../../../tooltip-BsSNtmxl.cjs');
+const dataPanel = require('../../../data-panel-BhJ8Lp_j.cjs');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
 
-function SummaryItem({ label, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        tabIndex: 0,
-        className: "flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap",
-        "aria-label": label,
-        children
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: label })
-  ] });
-}
-function SpanSummaryDescription({ span, className }) {
+function SpanSummaryDescription({ span }) {
   const startedAt = domains_traces_utils_spanUtils.formatSpanTimestamp(span.startedAt);
   const exactStartedAt = domains_traces_utils_spanUtils.formatSpanTimestampExact(span.startedAt);
-  const endedAt = domains_traces_utils_spanUtils.formatSpanTimestamp(span.endedAt);
-  const exactEndedAt = domains_traces_utils_spanUtils.formatSpanTimestampExact(span.endedAt);
   const duration = domains_traces_utils_spanUtils.formatSpanDurationSeconds(span.startedAt, span.endedAt);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: utils_cn.cn(
-        "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ui-xs leading-ui-xs text-neutral3",
-        className
-      ),
-      children: [
-        startedAt && exactStartedAt && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Started at ${exactStartedAt}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarClockIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: startedAt })
-        ] }),
-        endedAt && exactEndedAt && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Ended at ${exactEndedAt}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FlagIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: endedAt })
-        ] }),
-        duration && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Duration ${duration}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TimerIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: duration })
-        ] }),
-        span.runId && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Run Id ${span.runId}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: utils_truncateString.truncateString(span.runId, 8) })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Metadata, { children: [
+    startedAt && exactStartedAt && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarClockIcon, {}), tooltip: `Started at ${exactStartedAt}`, children: startedAt }),
+    duration && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TimerIcon, {}), tooltip: `Duration ${duration}`, children: duration }),
+    span.runId && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}), tooltip: `Run Id ${span.runId}`, children: utils_truncateString.truncateString(span.runId, 8) })
+  ] });
 }
 
 exports.SpanSummaryDescription = SpanSummaryDescription;

package/dist/domains/traces/components/span-summary-description.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-summary-description.cjs.js","sources":["../../../../src/domains/traces/components/span-summary-description.tsx"],"sourcesContent":["import { CalendarClockIcon, FlagIcon, HashIcon, TimerIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { formatSpanDurationSeconds, formatSpanTimestamp, formatSpanTimestampExact } from '../utils/span-utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { truncateString } from '@/lib/truncate-string';\nimport { cn } from '@/lib/utils';\n\nexport interface SpanSummaryDescriptionProps {\n  span: {\n    startedAt: Date | string;\n    endedAt?: Date | string | null;\n    runId?: string | null;\n  };\n  className?: string;\n}\n\nfunction SummaryItem({ label, children }: { label: string; children: ReactNode }) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <span\n          tabIndex={0}\n          className=\"flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap\"\n          aria-label={label}\n        >\n          {children}\n        </span>\n      </TooltipTrigger>\n      <TooltipContent>{label}</TooltipContent>\n    </Tooltip>\n  );\n}\n\n/** Compact span timing + run metadata shown under the span side-panel heading. */\nexport function SpanSummaryDescription({ span, className }: SpanSummaryDescriptionProps) {\n  const startedAt = formatSpanTimestamp(span.startedAt);\n  const exactStartedAt = formatSpanTimestampExact(span.startedAt);\n  const endedAt = formatSpanTimestamp(span.endedAt);\n  const exactEndedAt = formatSpanTimestampExact(span.endedAt);\n  const duration = formatSpanDurationSeconds(span.startedAt, span.endedAt);\n\n  return (\n    <div\n      className={cn(\n        'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ui-xs leading-ui-xs text-neutral3',\n        className,\n      )}\n    >\n      {startedAt && exactStartedAt && (\n        <SummaryItem label={`Started at ${exactStartedAt}`}>\n          <CalendarClockIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{startedAt}</span>\n        </SummaryItem>\n      )}\n      {endedAt && exactEndedAt && (\n        <SummaryItem label={`Ended at ${exactEndedAt}`}>\n          <FlagIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{endedAt}</span>\n        </SummaryItem>\n      )}\n      {duration && (\n        <SummaryItem label={`Duration ${duration}`}>\n          <TimerIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{duration}</span>\n        </SummaryItem>\n      )}\n      {span.runId && (\n        <SummaryItem label={`Run Id ${span.runId}`}>\n          <HashIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{truncateString(span.runId, 8)}</span>\n        </SummaryItem>\n      )}\n    </div>\n  );\n}\n"],"names":["Tooltip","jsx","TooltipTrigger","TooltipContent","formatSpanTimestamp","formatSpanTimestampExact","formatSpanDurationSeconds","jsxs","cn","CalendarClockIcon","FlagIcon","TimerIcon","HashIcon","truncateString"],"mappings":";;;;;;;;;;;AAgBA,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,QAAA,EAAS,EAA2C;AAChF,EAAA,uCACGA,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,sBAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAAD,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,CAAA;AAAA,QACV,SAAA,EAAU,gEAAA;AAAA,QACV,YAAA,EAAY,KAAA;AAAA,QAEX;AAAA;AAAA,KACH,EACF,CAAA;AAAA,oBACAA,cAAA,CAACE,0BAAgB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACzB,CAAA;AAEJ;AAGO,SAAS,sBAAA,CAAuB,EAAE,IAAA,EAAM,SAAA,EAAU,EAAgC;AACvF,EAAA,MAAM,SAAA,GAAYC,kDAAA,CAAoB,IAAA,CAAK,SAAS,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiBC,uDAAA,CAAyB,IAAA,CAAK,SAAS,CAAA;AAC9D,EAAA,MAAM,OAAA,GAAUD,kDAAA,CAAoB,IAAA,CAAK,OAAO,CAAA;AAChD,EAAA,MAAM,YAAA,GAAeC,uDAAA,CAAyB,IAAA,CAAK,OAAO,CAAA;AAC1D,EAAA,MAAM,QAAA,GAAWC,wDAAA,CAA0B,IAAA,CAAK,SAAA,EAAW,KAAK,OAAO,CAAA;AAEvE,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,4FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA,IAAa,kCACZD,eAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,CAAA,WAAA,EAAc,cAAc,CAAA,CAAA,EAC9C,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACQ,6BAAA,EAAA,EAAkB,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BACpER,cAAA,CAAC,UAAM,QAAA,EAAA,SAAA,EAAU;AAAA,SAAA,EACnB,CAAA;AAAA,QAED,WAAW,YAAA,oBACVM,eAAA,CAAC,eAAY,KAAA,EAAO,CAAA,SAAA,EAAY,YAAY,CAAA,CAAA,EAC1C,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACS,oBAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BAC3DT,cAAA,CAAC,UAAM,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACjB,CAAA;AAAA,QAED,4BACCM,eAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAA,EACtC,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACU,qBAAA,EAAA,EAAU,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BAC5DV,cAAA,CAAC,UAAM,QAAA,EAAA,QAAA,EAAS;AAAA,SAAA,EAClB,CAAA;AAAA,QAED,IAAA,CAAK,yBACJM,eAAA,CAAC,WAAA,EAAA,EAAY,OAAO,CAAA,OAAA,EAAU,IAAA,CAAK,KAAK,CAAA,CAAA,EACtC,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAACW,oBAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,yCAC1D,MAAA,EAAA,EAAM,QAAA,EAAAC,mCAAA,CAAe,IAAA,CAAK,KAAA,EAAO,CAAC,CAAA,EAAE;AAAA,SAAA,EACvC;AAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"span-summary-description.cjs.js","sources":["../../../../src/domains/traces/components/span-summary-description.tsx"],"sourcesContent":["import { CalendarClockIcon, HashIcon, TimerIcon } from 'lucide-react';\nimport { formatSpanDurationSeconds, formatSpanTimestamp, formatSpanTimestampExact } from '../utils/span-utils';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { truncateString } from '@/lib/truncate-string';\n\nexport interface SpanSummaryDescriptionProps {\n  span: {\n    startedAt: Date | string;\n    endedAt?: Date | string | null;\n    runId?: string | null;\n  };\n}\n\n/** Compact span timing + run metadata shown under the span side-panel heading. */\nexport function SpanSummaryDescription({ span }: SpanSummaryDescriptionProps) {\n  const startedAt = formatSpanTimestamp(span.startedAt);\n  const exactStartedAt = formatSpanTimestampExact(span.startedAt);\n  const duration = formatSpanDurationSeconds(span.startedAt, span.endedAt);\n\n  return (\n    <DataPanel.Metadata>\n      {startedAt && exactStartedAt && (\n        <DataPanel.Meta icon={<CalendarClockIcon />} tooltip={`Started at ${exactStartedAt}`}>\n          {startedAt}\n        </DataPanel.Meta>\n      )}\n      {duration && (\n        <DataPanel.Meta icon={<TimerIcon />} tooltip={`Duration ${duration}`}>\n          {duration}\n        </DataPanel.Meta>\n      )}\n      {span.runId && (\n        <DataPanel.Meta icon={<HashIcon />} tooltip={`Run Id ${span.runId}`}>\n          {truncateString(span.runId, 8)}\n        </DataPanel.Meta>\n      )}\n    </DataPanel.Metadata>\n  );\n}\n"],"names":["formatSpanTimestamp","formatSpanTimestampExact","formatSpanDurationSeconds","jsxs","DataPanel","jsx","CalendarClockIcon","TimerIcon","HashIcon"],"mappings":";;;;;;;;;;AAcO,SAAS,sBAAA,CAAuB,EAAE,IAAA,EAAK,EAAgC;AAC5E,EAAA,MAAM,SAAA,GAAYA,kDAAA,CAAoB,IAAA,CAAK,SAAS,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiBC,uDAAA,CAAyB,IAAA,CAAK,SAAS,CAAA;AAC9D,EAAA,MAAM,QAAA,GAAWC,wDAAA,CAA0B,IAAA,CAAK,SAAA,EAAW,KAAK,OAAO,CAAA;AAEvE,EAAA,uBACEC,eAAA,CAACC,mBAAA,CAAU,QAAA,EAAV,EACE,QAAA,EAAA;AAAA,IAAA,SAAA,IAAa,cAAA,oBACZC,cAAA,CAACD,mBAAA,CAAU,IAAA,EAAV,EAAe,IAAA,kBAAMC,cAAA,CAACC,6BAAA,EAAA,EAAkB,CAAA,EAAI,OAAA,EAAS,CAAA,WAAA,EAAc,cAAc,IAC/E,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,IAED,QAAA,oBACCD,cAAA,CAACD,mBAAA,CAAU,IAAA,EAAV,EAAe,IAAA,kBAAMC,cAAA,CAACE,qBAAA,EAAA,EAAU,CAAA,EAAI,OAAA,EAAS,CAAA,SAAA,EAAY,QAAQ,IAC/D,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,IAED,KAAK,KAAA,oBACJF,cAAA,CAACD,oBAAU,IAAA,EAAV,EAAe,sBAAMC,cAAA,CAACG,oBAAA,EAAA,EAAS,GAAI,OAAA,EAAS,CAAA,OAAA,EAAU,KAAK,KAAK,CAAA,CAAA,EAC9D,8CAAe,IAAA,CAAK,KAAA,EAAO,CAAC,CAAA,EAC/B;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/span-summary-description.es.js

@@ -1,57 +1,18 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { CalendarClockIcon, FlagIcon, TimerIcon, HashIcon } from 'lucide-react';
+import { CalendarClockIcon, TimerIcon, HashIcon } from 'lucide-react';
 import { formatSpanTimestamp, formatSpanTimestampExact, formatSpanDurationSeconds } from '../utils/span-utils.es.js';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-Vj_jjcxE.js';
+import { D as DataPanel } from '../../../data-panel-D2JtbyKg.js';
 import { truncateString } from '../../../utils/truncate-string.es.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
 
-function SummaryItem({ label, children }) {
-  return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "span",
-      {
-        tabIndex: 0,
-        className: "flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap",
-        "aria-label": label,
-        children
-      }
-    ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: label })
-  ] });
-}
-function SpanSummaryDescription({ span, className }) {
+function SpanSummaryDescription({ span }) {
   const startedAt = formatSpanTimestamp(span.startedAt);
   const exactStartedAt = formatSpanTimestampExact(span.startedAt);
-  const endedAt = formatSpanTimestamp(span.endedAt);
-  const exactEndedAt = formatSpanTimestampExact(span.endedAt);
   const duration = formatSpanDurationSeconds(span.startedAt, span.endedAt);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ui-xs leading-ui-xs text-neutral3",
-        className
-      ),
-      children: [
-        startedAt && exactStartedAt && /* @__PURE__ */ jsxs(SummaryItem, { label: `Started at ${exactStartedAt}`, children: [
-          /* @__PURE__ */ jsx(CalendarClockIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { children: startedAt })
-        ] }),
-        endedAt && exactEndedAt && /* @__PURE__ */ jsxs(SummaryItem, { label: `Ended at ${exactEndedAt}`, children: [
-          /* @__PURE__ */ jsx(FlagIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { children: endedAt })
-        ] }),
-        duration && /* @__PURE__ */ jsxs(SummaryItem, { label: `Duration ${duration}`, children: [
-          /* @__PURE__ */ jsx(TimerIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { children: duration })
-        ] }),
-        span.runId && /* @__PURE__ */ jsxs(SummaryItem, { label: `Run Id ${span.runId}`, children: [
-          /* @__PURE__ */ jsx(HashIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { children: truncateString(span.runId, 8) })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(DataPanel.Metadata, { children: [
+    startedAt && exactStartedAt && /* @__PURE__ */ jsx(DataPanel.Meta, { icon: /* @__PURE__ */ jsx(CalendarClockIcon, {}), tooltip: `Started at ${exactStartedAt}`, children: startedAt }),
+    duration && /* @__PURE__ */ jsx(DataPanel.Meta, { icon: /* @__PURE__ */ jsx(TimerIcon, {}), tooltip: `Duration ${duration}`, children: duration }),
+    span.runId && /* @__PURE__ */ jsx(DataPanel.Meta, { icon: /* @__PURE__ */ jsx(HashIcon, {}), tooltip: `Run Id ${span.runId}`, children: truncateString(span.runId, 8) })
+  ] });
 }
 
 export { SpanSummaryDescription };

package/dist/domains/traces/components/span-summary-description.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-summary-description.es.js","sources":["../../../../src/domains/traces/components/span-summary-description.tsx"],"sourcesContent":["import { CalendarClockIcon, FlagIcon, HashIcon, TimerIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { formatSpanDurationSeconds, formatSpanTimestamp, formatSpanTimestampExact } from '../utils/span-utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { truncateString } from '@/lib/truncate-string';\nimport { cn } from '@/lib/utils';\n\nexport interface SpanSummaryDescriptionProps {\n  span: {\n    startedAt: Date | string;\n    endedAt?: Date | string | null;\n    runId?: string | null;\n  };\n  className?: string;\n}\n\nfunction SummaryItem({ label, children }: { label: string; children: ReactNode }) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <span\n          tabIndex={0}\n          className=\"flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap\"\n          aria-label={label}\n        >\n          {children}\n        </span>\n      </TooltipTrigger>\n      <TooltipContent>{label}</TooltipContent>\n    </Tooltip>\n  );\n}\n\n/** Compact span timing + run metadata shown under the span side-panel heading. */\nexport function SpanSummaryDescription({ span, className }: SpanSummaryDescriptionProps) {\n  const startedAt = formatSpanTimestamp(span.startedAt);\n  const exactStartedAt = formatSpanTimestampExact(span.startedAt);\n  const endedAt = formatSpanTimestamp(span.endedAt);\n  const exactEndedAt = formatSpanTimestampExact(span.endedAt);\n  const duration = formatSpanDurationSeconds(span.startedAt, span.endedAt);\n\n  return (\n    <div\n      className={cn(\n        'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-ui-xs leading-ui-xs text-neutral3',\n        className,\n      )}\n    >\n      {startedAt && exactStartedAt && (\n        <SummaryItem label={`Started at ${exactStartedAt}`}>\n          <CalendarClockIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{startedAt}</span>\n        </SummaryItem>\n      )}\n      {endedAt && exactEndedAt && (\n        <SummaryItem label={`Ended at ${exactEndedAt}`}>\n          <FlagIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{endedAt}</span>\n        </SummaryItem>\n      )}\n      {duration && (\n        <SummaryItem label={`Duration ${duration}`}>\n          <TimerIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{duration}</span>\n        </SummaryItem>\n      )}\n      {span.runId && (\n        <SummaryItem label={`Run Id ${span.runId}`}>\n          <HashIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{truncateString(span.runId, 8)}</span>\n        </SummaryItem>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAgBA,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,QAAA,EAAS,EAA2C;AAChF,EAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,CAAA;AAAA,QACV,SAAA,EAAU,gEAAA;AAAA,QACV,YAAA,EAAY,KAAA;AAAA,QAEX;AAAA;AAAA,KACH,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,kBAAgB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACzB,CAAA;AAEJ;AAGO,SAAS,sBAAA,CAAuB,EAAE,IAAA,EAAM,SAAA,EAAU,EAAgC;AACvF,EAAA,MAAM,SAAA,GAAY,mBAAA,CAAoB,IAAA,CAAK,SAAS,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiB,wBAAA,CAAyB,IAAA,CAAK,SAAS,CAAA;AAC9D,EAAA,MAAM,OAAA,GAAU,mBAAA,CAAoB,IAAA,CAAK,OAAO,CAAA;AAChD,EAAA,MAAM,YAAA,GAAe,wBAAA,CAAyB,IAAA,CAAK,OAAO,CAAA;AAC1D,EAAA,MAAM,QAAA,GAAW,yBAAA,CAA0B,IAAA,CAAK,SAAA,EAAW,KAAK,OAAO,CAAA;AAEvE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA,IAAa,kCACZ,IAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,CAAA,WAAA,EAAc,cAAc,CAAA,CAAA,EAC9C,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BACpE,GAAA,CAAC,UAAM,QAAA,EAAA,SAAA,EAAU;AAAA,SAAA,EACnB,CAAA;AAAA,QAED,WAAW,YAAA,oBACV,IAAA,CAAC,eAAY,KAAA,EAAO,CAAA,SAAA,EAAY,YAAY,CAAA,CAAA,EAC1C,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BAC3D,GAAA,CAAC,UAAM,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACjB,CAAA;AAAA,QAED,4BACC,IAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAA,EACtC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BAC5D,GAAA,CAAC,UAAM,QAAA,EAAA,QAAA,EAAS;AAAA,SAAA,EAClB,CAAA;AAAA,QAED,IAAA,CAAK,yBACJ,IAAA,CAAC,WAAA,EAAA,EAAY,OAAO,CAAA,OAAA,EAAU,IAAA,CAAK,KAAK,CAAA,CAAA,EACtC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,8BAC1D,MAAA,EAAA,EAAM,QAAA,EAAA,cAAA,CAAe,IAAA,CAAK,KAAA,EAAO,CAAC,CAAA,EAAE;AAAA,SAAA,EACvC;AAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"span-summary-description.es.js","sources":["../../../../src/domains/traces/components/span-summary-description.tsx"],"sourcesContent":["import { CalendarClockIcon, HashIcon, TimerIcon } from 'lucide-react';\nimport { formatSpanDurationSeconds, formatSpanTimestamp, formatSpanTimestampExact } from '../utils/span-utils';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { truncateString } from '@/lib/truncate-string';\n\nexport interface SpanSummaryDescriptionProps {\n  span: {\n    startedAt: Date | string;\n    endedAt?: Date | string | null;\n    runId?: string | null;\n  };\n}\n\n/** Compact span timing + run metadata shown under the span side-panel heading. */\nexport function SpanSummaryDescription({ span }: SpanSummaryDescriptionProps) {\n  const startedAt = formatSpanTimestamp(span.startedAt);\n  const exactStartedAt = formatSpanTimestampExact(span.startedAt);\n  const duration = formatSpanDurationSeconds(span.startedAt, span.endedAt);\n\n  return (\n    <DataPanel.Metadata>\n      {startedAt && exactStartedAt && (\n        <DataPanel.Meta icon={<CalendarClockIcon />} tooltip={`Started at ${exactStartedAt}`}>\n          {startedAt}\n        </DataPanel.Meta>\n      )}\n      {duration && (\n        <DataPanel.Meta icon={<TimerIcon />} tooltip={`Duration ${duration}`}>\n          {duration}\n        </DataPanel.Meta>\n      )}\n      {span.runId && (\n        <DataPanel.Meta icon={<HashIcon />} tooltip={`Run Id ${span.runId}`}>\n          {truncateString(span.runId, 8)}\n        </DataPanel.Meta>\n      )}\n    </DataPanel.Metadata>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAcO,SAAS,sBAAA,CAAuB,EAAE,IAAA,EAAK,EAAgC;AAC5E,EAAA,MAAM,SAAA,GAAY,mBAAA,CAAoB,IAAA,CAAK,SAAS,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiB,wBAAA,CAAyB,IAAA,CAAK,SAAS,CAAA;AAC9D,EAAA,MAAM,QAAA,GAAW,yBAAA,CAA0B,IAAA,CAAK,SAAA,EAAW,KAAK,OAAO,CAAA;AAEvE,EAAA,uBACE,IAAA,CAAC,SAAA,CAAU,QAAA,EAAV,EACE,QAAA,EAAA;AAAA,IAAA,SAAA,IAAa,cAAA,oBACZ,GAAA,CAAC,SAAA,CAAU,IAAA,EAAV,EAAe,IAAA,kBAAM,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA,EAAI,OAAA,EAAS,CAAA,WAAA,EAAc,cAAc,IAC/E,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,IAED,QAAA,oBACC,GAAA,CAAC,SAAA,CAAU,IAAA,EAAV,EAAe,IAAA,kBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EAAI,OAAA,EAAS,CAAA,SAAA,EAAY,QAAQ,IAC/D,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,IAED,KAAK,KAAA,oBACJ,GAAA,CAAC,UAAU,IAAA,EAAV,EAAe,sBAAM,GAAA,CAAC,QAAA,EAAA,EAAS,GAAI,OAAA,EAAS,CAAA,OAAA,EAAU,KAAK,KAAK,CAAA,CAAA,EAC9D,yBAAe,IAAA,CAAK,KAAA,EAAO,CAAC,CAAA,EAC/B;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const domains_traces_utils_spanTiming = require('../utils/span-timing.cjs.js');
+const domains_traces_components_spanTimingHoverCard = require('./span-timing-hover-card.cjs.js');
+const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
+const hoverCard = require('../../../hover-card-BSj1EgQs.cjs');
+const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+
+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 = React.useRef(null);
+  const shouldScrollIntoView = isSelected || isRevealed;
+  React.useEffect(() => {
+    if (!shouldScrollIntoView) return;
+    rowRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [shouldScrollIntoView]);
+  const { startShiftMs, leftPercent, widthPercent } = domains_traces_utils_spanTiming.getSpanTimingLayout(span, overallLatency, overallStartTime);
+  const toggleLabel = isExpanded ? `Collapse children (${expansion.numOfChildren})` : `Expand children (${expansion.numOfChildren})`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rowRef,
+      "aria-label": `View details for span ${span.name}`,
+      "aria-selected": isSelected,
+      onClick: () => onSpanClick?.(span.id),
+      className: utils_cn.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-stretch", style: { paddingLeft: `${depth}rem` }, children: [
+          !isRootSpan && /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_timelineStructureSign.TimelineStructureSign, { isLastChild }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: utils_cn.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__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    title: spanUI.label,
+                    className: "inline-block size-2 shrink-0 rounded-full",
+                    style: { backgroundColor: spanUI.color }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-highlight": span.matchedInPayloadOnly ? void 0 : "",
+                    "data-highlight-indirect": span.matchedInPayloadOnly ? "" : void 0,
+                    title: span.matchedInPayloadOnly ? "Matches your search in this span’s details" : void 0,
+                    className: "min-w-0 truncate",
+                    children: span.name
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-7 shrink-0 items-center justify-center", children: expansion.hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                expansion.toggleChildren();
+              },
+              "aria-label": toggleLabel,
+              "aria-expanded": isExpanded,
+              className: utils_cn.cn(
+                "flex size-5 cursor-pointer items-center justify-center rounded-md transition-colors",
+                "hover:bg-surface5 [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50",
+                "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1"
+              ),
+              children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(hoverCard.HoverCard, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            hoverCard.HoverCardTrigger,
+            {
+              render: /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+              className: "grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface5/40 relative h-4 w-full rounded-sm", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-ui-xs text-neutral3 w-12 text-right tabular-nums", children: formatDuration(span.latency) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTimingHoverCard.SpanTimingHoverCard, { span, startShiftMs })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.SpanTimelineRow = SpanTimelineRow;
+//# sourceMappingURL=span-timeline-row.cjs.js.map