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

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

@@ -4,8 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_spanRows = require('./span-rows.cjs.js');
-const domains_traces_components_spanTimelineCol = require('./span-timeline-col.cjs.js');
-const domains_traces_components_spanTreeRow = require('./span-tree-row.cjs.js');
+const domains_traces_components_spanTimelineRow = require('./span-timeline-row.cjs.js');
 const domains_traces_components_spanTypeLegend = require('./span-type-legend.cjs.js');
 const domains_traces_components_traceSpanTree = require('./trace-span-tree.cjs.js');
 
@@ -13,7 +12,6 @@ const TICKS = [0, 0.25, 0.5, 0.75, 1];
 function formatTick(ms) {
   return ms < 1e3 ? `${Math.round(ms)} ms` : `${(ms / 1e3).toFixed(2)} s`;
 }
-const defaultTrailing = (ctx) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTimelineCol.SpanTimelineCol, { ctx });
 function TraceSpanTimeline({
   hierarchicalSpans = [],
   onSpanClick,
@@ -24,23 +22,19 @@ function TraceSpanTimeline({
   setExpandedSpanIds,
   featuredSpanIds,
   revealSpanId,
-  leadingSlot,
-  renderTrailing = defaultTrailing
+  leadingSlot
 }) {
   if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceSpanTree.TraceSpanTreeLoading, {});
   const overallLatency = hierarchicalSpans[0]?.latency || 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    leadingSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pt-1.5", children: leadingSlot }),
+    leadingSlot,
     /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTypeLegend.SpanTypeLegend, { spans: hierarchicalSpans }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(12rem,1fr)] content-start items-start gap-y-px overflow-hidden py-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "aria-label": "Trace time axis",
-          className: "text-ui-xs text-neutral3 col-start-3 flex justify-between px-1 pr-2 pb-1",
-          children: TICKS.map((tick) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTick(overallLatency * tick) }, tick))
-        }
-      ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-label": "Trace time axis", className: "grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-ui-xs text-neutral3 flex justify-between tabular-nums", children: TICKS.map((tick) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTick(overallLatency * tick) }, tick)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12" })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         domains_traces_components_spanRows.SpanRows,
         {
@@ -52,7 +46,7 @@ function TraceSpanTimeline({
           featuredSpanIds,
           expandedSpanIds,
           setExpandedSpanIds,
-          renderRow: (ctx) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTreeRow.SpanTreeRow, { ctx, trailing: renderTrailing })
+          renderRow: (ctx) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTimelineRow.SpanTimelineRow, { ctx })
         }
       )
     ] })

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineCol } from './span-timeline-col';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\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  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** End-of-row cell. Defaults to the span bar on the shared time axis (`SpanTimelineCol`). */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\nconst defaultTrailing = (ctx: SpanRowContext) => <SpanTimelineCol ctx={ctx} />;\n\n/** Same hierarchy as `TraceSpanTree` (name + expansion controls) with a trailing column of bars on a shared time axis. */\nexport function TraceSpanTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing = defaultTrailing,\n}: TraceSpanTimelineProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  const overallLatency = hierarchicalSpans[0]?.latency || 0;\n\n  return (\n    <>\n      {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(0,1fr)_auto_minmax(12rem,1fr)] content-start items-start gap-y-px overflow-hidden py-1\">\n        <div\n          aria-label=\"Trace time axis\"\n          className=\"text-ui-xs text-neutral3 col-start-3 flex justify-between px-1 pr-2 pb-1\"\n        >\n          {TICKS.map(tick => (\n            <span key={tick}>{formatTick(overallLatency * tick)}</span>\n          ))}\n        </div>\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["jsx","SpanTimelineCol","TraceSpanTreeLoading","jsxs","Fragment","SpanTypeLegend","SpanRows","SpanTreeRow"],"mappings":";;;;;;;;;;;AA0BA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;AAEA,MAAM,eAAA,GAAkB,CAAC,GAAA,qBAAwBA,cAAA,CAACC,6DAAgB,GAAA,EAAU,CAAA;AAGrE,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA,GAAiB;AACnB,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAOD,cAAA,CAACE,4DAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAeJ,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAC1DA,cAAA,CAACK,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+GAAA,EACb,QAAA,EAAA;AAAA,sBAAAH,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAW,iBAAA;AAAA,UACX,SAAA,EAAU,0EAAA;AAAA,UAET,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAA,IAAA,qBACTA,cAAA,CAAC,MAAA,EAAA,EAAiB,qBAAW,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD;AAAA;AAAA,OACH;AAAA,sBACAA,cAAA;AAAA,QAACM,2CAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,WAAW,CAAA,GAAA,qBAAON,cAAA,CAACO,iDAAA,EAAA,EAAY,GAAA,EAAU,UAAU,cAAA,EAAgB;AAAA;AAAA;AACrE,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineRow } from './span-timeline-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\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  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * Gantt-style view of a trace: the same hierarchy and expansion state as `TraceSpanTree`,\n * but each row is a compact name cell plus a bar on a shared time axis. Rendered with its\n * own row component (`SpanTimelineRow`), independent from the tree's rows.\n */\nexport function TraceSpanTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n}: TraceSpanTimelineProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  const overallLatency = hierarchicalSpans[0]?.latency || 0;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1\">\n        {/* Header row: empty name cell, then the axis aligned with the bars (same horizontal padding, minus the duration label). */}\n        <div />\n        <div aria-label=\"Trace time axis\" className=\"grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1\">\n          <div className=\"text-ui-xs text-neutral3 flex justify-between tabular-nums\">\n            {TICKS.map(tick => (\n              <span key={tick}>{formatTick(overallLatency * tick)}</span>\n            ))}\n          </div>\n          <div className=\"w-12\" />\n        </div>\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTimelineRow ctx={ctx} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["jsx","TraceSpanTreeLoading","jsxs","Fragment","SpanTypeLegend","SpanRows","SpanTimelineRow"],"mappings":";;;;;;;;;;AAsBA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAOA,cAAA,CAACC,4DAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACDH,cAAA,CAACI,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EAEb,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,CAAA;AAAA,sBACLE,eAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAW,iBAAA,EAAkB,WAAU,qDAAA,EAC1C,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4DAAA,EACZ,QAAA,EAAA,KAAA,CAAM,IAAI,CAAA,IAAA,qBACTA,cAAA,CAAC,MAAA,EAAA,EAAiB,QAAA,EAAA,UAAA,CAAW,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD,CAAA,EACH,CAAA;AAAA,wBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO;AAAA,OAAA,EACxB,CAAA;AAAA,sBACAA,cAAA;AAAA,QAACK,2CAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA,EAAW,CAAA,GAAA,qBAAOL,cAAA,CAACM,yDAAA,EAAA,EAAgB,GAAA,EAAU;AAAA;AAAA;AAC/C,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SpanRows } from './span-rows.es.js';
-import { SpanTimelineCol } from './span-timeline-col.es.js';
-import { SpanTreeRow } from './span-tree-row.es.js';
+import { SpanTimelineRow } from './span-timeline-row.es.js';
 import { SpanTypeLegend } from './span-type-legend.es.js';
 import { TraceSpanTreeLoading } from './trace-span-tree.es.js';
 
@@ -9,7 +8,6 @@ const TICKS = [0, 0.25, 0.5, 0.75, 1];
 function formatTick(ms) {
   return ms < 1e3 ? `${Math.round(ms)} ms` : `${(ms / 1e3).toFixed(2)} s`;
 }
-const defaultTrailing = (ctx) => /* @__PURE__ */ jsx(SpanTimelineCol, { ctx });
 function TraceSpanTimeline({
   hierarchicalSpans = [],
   onSpanClick,
@@ -20,23 +18,19 @@ function TraceSpanTimeline({
   setExpandedSpanIds,
   featuredSpanIds,
   revealSpanId,
-  leadingSlot,
-  renderTrailing = defaultTrailing
+  leadingSlot
 }) {
   if (isLoading) return /* @__PURE__ */ jsx(TraceSpanTreeLoading, {});
   const overallLatency = hierarchicalSpans[0]?.latency || 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    leadingSlot && /* @__PURE__ */ jsx("div", { className: "px-2 pt-1.5", children: leadingSlot }),
+    leadingSlot,
     /* @__PURE__ */ jsx(SpanTypeLegend, { spans: hierarchicalSpans }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(12rem,1fr)] content-start items-start gap-y-px overflow-hidden py-1", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "Trace time axis",
-          className: "text-ui-xs text-neutral3 col-start-3 flex justify-between px-1 pr-2 pb-1",
-          children: TICKS.map((tick) => /* @__PURE__ */ jsx("span", { children: formatTick(overallLatency * tick) }, tick))
-        }
-      ),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1", children: [
+      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsxs("div", { "aria-label": "Trace time axis", className: "grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-ui-xs text-neutral3 flex justify-between tabular-nums", children: TICKS.map((tick) => /* @__PURE__ */ jsx("span", { children: formatTick(overallLatency * tick) }, tick)) }),
+        /* @__PURE__ */ jsx("div", { className: "w-12" })
+      ] }),
       /* @__PURE__ */ jsx(
         SpanRows,
         {
@@ -48,7 +42,7 @@ function TraceSpanTimeline({
           featuredSpanIds,
           expandedSpanIds,
           setExpandedSpanIds,
-          renderRow: (ctx) => /* @__PURE__ */ jsx(SpanTreeRow, { ctx, trailing: renderTrailing })
+          renderRow: (ctx) => /* @__PURE__ */ jsx(SpanTimelineRow, { ctx })
         }
       )
     ] })

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineCol } from './span-timeline-col';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\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  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** End-of-row cell. Defaults to the span bar on the shared time axis (`SpanTimelineCol`). */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\nconst defaultTrailing = (ctx: SpanRowContext) => <SpanTimelineCol ctx={ctx} />;\n\n/** Same hierarchy as `TraceSpanTree` (name + expansion controls) with a trailing column of bars on a shared time axis. */\nexport function TraceSpanTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing = defaultTrailing,\n}: TraceSpanTimelineProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  const overallLatency = hierarchicalSpans[0]?.latency || 0;\n\n  return (\n    <>\n      {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(0,1fr)_auto_minmax(12rem,1fr)] content-start items-start gap-y-px overflow-hidden py-1\">\n        <div\n          aria-label=\"Trace time axis\"\n          className=\"text-ui-xs text-neutral3 col-start-3 flex justify-between px-1 pr-2 pb-1\"\n        >\n          {TICKS.map(tick => (\n            <span key={tick}>{formatTick(overallLatency * tick)}</span>\n          ))}\n        </div>\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA0BA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;AAEA,MAAM,eAAA,GAAkB,CAAC,GAAA,qBAAwB,GAAA,CAAC,mBAAgB,GAAA,EAAU,CAAA;AAGrE,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA,GAAiB;AACnB,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAe,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAC1D,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+GAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAW,iBAAA;AAAA,UACX,SAAA,EAAU,0EAAA;AAAA,UAET,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAA,IAAA,qBACT,GAAA,CAAC,MAAA,EAAA,EAAiB,qBAAW,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD;AAAA;AAAA,OACH;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,WAAW,CAAA,GAAA,qBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,GAAA,EAAU,UAAU,cAAA,EAAgB;AAAA;AAAA;AACrE,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineRow } from './span-timeline-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\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  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * Gantt-style view of a trace: the same hierarchy and expansion state as `TraceSpanTree`,\n * but each row is a compact name cell plus a bar on a shared time axis. Rendered with its\n * own row component (`SpanTimelineRow`), independent from the tree's rows.\n */\nexport function TraceSpanTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n}: TraceSpanTimelineProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  const overallLatency = hierarchicalSpans[0]?.latency || 0;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1\">\n        {/* Header row: empty name cell, then the axis aligned with the bars (same horizontal padding, minus the duration label). */}\n        <div />\n        <div aria-label=\"Trace time axis\" className=\"grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1\">\n          <div className=\"text-ui-xs text-neutral3 flex justify-between tabular-nums\">\n            {TICKS.map(tick => (\n              <span key={tick}>{formatTick(overallLatency * tick)}</span>\n            ))}\n          </div>\n          <div className=\"w-12\" />\n        </div>\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTimelineRow ctx={ctx} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACD,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EAEb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,CAAA;AAAA,sBACL,IAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAW,iBAAA,EAAkB,WAAU,qDAAA,EAC1C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4DAAA,EACZ,QAAA,EAAA,KAAA,CAAM,IAAI,CAAA,IAAA,qBACT,GAAA,CAAC,MAAA,EAAA,EAAiB,QAAA,EAAA,UAAA,CAAW,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO;AAAA,OAAA,EACxB,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA,EAAW,CAAA,GAAA,qBAAO,GAAA,CAAC,eAAA,EAAA,EAAgB,GAAA,EAAU;AAAA;AAAA;AAC/C,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const domains_traces_components_spanDurationCol = require('./span-duration-col.cjs.js');
 const domains_traces_components_spanRows = require('./span-rows.cjs.js');
 const domains_traces_components_spanTreeRow = require('./span-tree-row.cjs.js');
 const domains_traces_components_spanTypeLegend = require('./span-type-legend.cjs.js');
-const spinner = require('../../../spinner-Bj7FQzLQ.cjs');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
+const spinner = require('../../../spinner-DcDI1lhS.cjs');
+const utils_cn = require('../../../cn-DPfV6E6L.cjs');
 
 function TraceSpanTreeLoading() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -25,7 +24,10 @@ function TraceSpanTreeLoading() {
     }
   );
 }
-const defaultTrailing = (ctx) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanDurationCol.SpanDurationCol, { span: ctx.span, isSelected: ctx.isSelected, isFaded: ctx.isFaded });
+const durationMeta = (ctx) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  (ctx.span.latency / 1e3).toFixed(3),
+  " s"
+] });
 function TraceSpanTree({
   hierarchicalSpans = [],
   onSpanClick,
@@ -37,26 +39,35 @@ function TraceSpanTree({
   featuredSpanIds,
   revealSpanId,
   leadingSlot,
-  renderTrailing = defaultTrailing
+  renderTrailing
 }) {
   if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(TraceSpanTreeLoading, {});
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    leadingSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pt-1.5", children: leadingSlot }),
+    leadingSlot,
     /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTypeLegend.SpanTypeLegend, { spans: hierarchicalSpans }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-      domains_traces_components_spanRows.SpanRows,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        spans: hierarchicalSpans,
-        onSpanClick,
-        selectedSpanId,
-        revealSpanId,
-        fadedTypes,
-        featuredSpanIds,
-        expandedSpanIds,
-        setExpandedSpanIds,
-        renderRow: (ctx) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTreeRow.SpanTreeRow, { ctx, trailing: renderTrailing })
+        className: utils_cn.cn("grid content-start items-start gap-y-px overflow-hidden py-1", {
+          "grid-cols-[minmax(0,1fr)]": !renderTrailing,
+          "grid-cols-[minmax(0,1fr)_auto]": !!renderTrailing
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          domains_traces_components_spanRows.SpanRows,
+          {
+            spans: hierarchicalSpans,
+            onSpanClick,
+            selectedSpanId,
+            revealSpanId,
+            fadedTypes,
+            featuredSpanIds,
+            expandedSpanIds,
+            setExpandedSpanIds,
+            renderRow: (ctx) => /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanTreeRow.SpanTreeRow, { ctx, meta: durationMeta, trailing: renderTrailing })
+          }
+        )
       }
-    ) })
+    )
   ] });
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanDurationCol } from './span-duration-col';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\nexport type TraceSpanTreeProps = {\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  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** End-of-row cell. Defaults to the span duration as `X.XXX s`. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return (\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\nconst defaultTrailing = (ctx: SpanRowContext) => (\n  <SpanDurationCol span={ctx.span} isSelected={ctx.isSelected} isFaded={ctx.isFaded} />\n);\n\n/** Hierarchical span tree: name, expansion controls and a trailing cell per row. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing = defaultTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["jsxs","cn","jsx","Spinner","SpanDurationCol","Fragment","SpanTypeLegend","SpanRows","SpanTreeRow"],"mappings":";;;;;;;;;;;;AA2BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,+FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,eAAA,EAAA,EAAQ,CAAA;AAAA,QAAE;AAAA;AAAA;AAAA,GACb;AAEJ;AAEA,MAAM,eAAA,GAAkB,CAAC,GAAA,qBACvBD,cAAA,CAACE,yDAAA,EAAA,EAAgB,IAAA,EAAM,GAAA,CAAI,IAAA,EAAM,UAAA,EAAY,GAAA,CAAI,UAAA,EAAY,OAAA,EAAS,IAAI,OAAA,EAAS,CAAA;AAI9E,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA,GAAiB;AACnB,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAOF,cAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACEF,eAAA,CAAAK,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAeH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAC1DA,cAAA,CAACI,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CJ,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,MAACK,2CAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,iBAAA;AAAA,QACP,WAAA;AAAA,QACA,cAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,QACA,eAAA;AAAA,QACA,eAAA;AAAA,QACA,kBAAA;AAAA,QACA,WAAW,CAAA,GAAA,qBAAOL,cAAA,CAACM,iDAAA,EAAA,EAAY,GAAA,EAAU,UAAU,cAAA,EAAgB;AAAA;AAAA,KACrE,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"trace-span-tree.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\nexport type TraceSpanTreeProps = {\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  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return (\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\nconst durationMeta = (ctx: SpanRowContext) => <>{(ctx.span.latency / 1000).toFixed(3)}&nbsp;s</>;\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden py-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["jsxs","cn","jsx","Spinner","Fragment","SpanTypeLegend","SpanRows","SpanTreeRow"],"mappings":";;;;;;;;;;;AA0BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,+FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,eAAA,EAAA,EAAQ,CAAA;AAAA,QAAE;AAAA;AAAA;AAAA,GACb;AAEJ;AAEA,MAAM,YAAA,GAAe,CAAC,GAAA,qBAAwBH,eAAA,CAAAI,mBAAA,EAAA,EAAI,QAAA,EAAA;AAAA,EAAA,CAAA,GAAA,CAAI,IAAA,CAAK,OAAA,GAAU,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EAAE;AAAA,CAAA,EAAO,CAAA;AAGtF,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAOF,cAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACEF,eAAA,CAAAI,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACDF,cAAA,CAACG,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CH,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWD,YAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAAC,cAAA;AAAA,UAACI,2CAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAOJ,cAAA,CAACK,iDAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;;"}

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

@@ -1,10 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { SpanDurationCol } from './span-duration-col.es.js';
 import { SpanRows } from './span-rows.es.js';
 import { SpanTreeRow } from './span-tree-row.es.js';
 import { SpanTypeLegend } from './span-type-legend.es.js';
-import { S as Spinner } from '../../../spinner-CUkNhTKC.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { S as Spinner } from '../../../spinner-RdQ_iJAG.js';
+import { c as cn } from '../../../cn-Dxjsbr9n.js';
 
 function TraceSpanTreeLoading() {
   return /* @__PURE__ */ jsxs(
@@ -21,7 +20,10 @@ function TraceSpanTreeLoading() {
     }
   );
 }
-const defaultTrailing = (ctx) => /* @__PURE__ */ jsx(SpanDurationCol, { span: ctx.span, isSelected: ctx.isSelected, isFaded: ctx.isFaded });
+const durationMeta = (ctx) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  (ctx.span.latency / 1e3).toFixed(3),
+  " s"
+] });
 function TraceSpanTree({
   hierarchicalSpans = [],
   onSpanClick,
@@ -33,26 +35,35 @@ function TraceSpanTree({
   featuredSpanIds,
   revealSpanId,
   leadingSlot,
-  renderTrailing = defaultTrailing
+  renderTrailing
 }) {
   if (isLoading) return /* @__PURE__ */ jsx(TraceSpanTreeLoading, {});
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    leadingSlot && /* @__PURE__ */ jsx("div", { className: "px-2 pt-1.5", children: leadingSlot }),
+    leadingSlot,
     /* @__PURE__ */ jsx(SpanTypeLegend, { spans: hierarchicalSpans }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1", children: /* @__PURE__ */ jsx(
-      SpanRows,
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        spans: hierarchicalSpans,
-        onSpanClick,
-        selectedSpanId,
-        revealSpanId,
-        fadedTypes,
-        featuredSpanIds,
-        expandedSpanIds,
-        setExpandedSpanIds,
-        renderRow: (ctx) => /* @__PURE__ */ jsx(SpanTreeRow, { ctx, trailing: renderTrailing })
+        className: cn("grid content-start items-start gap-y-px overflow-hidden py-1", {
+          "grid-cols-[minmax(0,1fr)]": !renderTrailing,
+          "grid-cols-[minmax(0,1fr)_auto]": !!renderTrailing
+        }),
+        children: /* @__PURE__ */ jsx(
+          SpanRows,
+          {
+            spans: hierarchicalSpans,
+            onSpanClick,
+            selectedSpanId,
+            revealSpanId,
+            fadedTypes,
+            featuredSpanIds,
+            expandedSpanIds,
+            setExpandedSpanIds,
+            renderRow: (ctx) => /* @__PURE__ */ jsx(SpanTreeRow, { ctx, meta: durationMeta, trailing: renderTrailing })
+          }
+        )
       }
-    ) })
+    )
   ] });
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanDurationCol } from './span-duration-col';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\nexport type TraceSpanTreeProps = {\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  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** End-of-row cell. Defaults to the span duration as `X.XXX s`. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return (\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\nconst defaultTrailing = (ctx: SpanRowContext) => (\n  <SpanDurationCol span={ctx.span} isSelected={ctx.isSelected} isFaded={ctx.isFaded} />\n);\n\n/** Hierarchical span tree: name, expansion controls and a trailing cell per row. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing = defaultTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot && <div className=\"px-2 pt-1.5\">{leadingSlot}</div>}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] content-start items-start gap-y-px overflow-hidden py-1\">\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA2BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,+FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,CAAA;AAAA,QAAE;AAAA;AAAA;AAAA,GACb;AAEJ;AAEA,MAAM,eAAA,GAAkB,CAAC,GAAA,qBACvB,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAA,EAAM,GAAA,CAAI,IAAA,EAAM,UAAA,EAAY,GAAA,CAAI,UAAA,EAAY,OAAA,EAAS,IAAI,OAAA,EAAS,CAAA;AAI9E,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA,GAAiB;AACnB,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAe,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,oBAC1D,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EACb,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,iBAAA;AAAA,QACP,WAAA;AAAA,QACA,cAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,QACA,eAAA;AAAA,QACA,eAAA;AAAA,QACA,kBAAA;AAAA,QACA,WAAW,CAAA,GAAA,qBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,GAAA,EAAU,UAAU,cAAA,EAAgB;AAAA;AAAA,KACrE,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-tree.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\nexport type TraceSpanTreeProps = {\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  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return (\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\nconst durationMeta = (ctx: SpanRowContext) => <>{(ctx.span.latency / 1000).toFixed(3)}&nbsp;s</>;\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden py-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA0BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,+FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,CAAA;AAAA,QAAE;AAAA;AAAA;AAAA,GACb;AAEJ;AAEA,MAAM,YAAA,GAAe,CAAC,GAAA,qBAAwB,IAAA,CAAA,QAAA,EAAA,EAAI,QAAA,EAAA;AAAA,EAAA,CAAA,GAAA,CAAI,IAAA,CAAK,OAAA,GAAU,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EAAE;AAAA,CAAA,EAAO,CAAA;AAGtF,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACD,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-status-value.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const shimmer = require('../../../shimmer-GOCqjnzu.cjs');
+const shimmer = require('../../../shimmer-erjPu8YL.cjs');
 
 const STATUS_LABELS = {
   success: "Success",

package/dist/domains/traces/components/trace-status-value.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { S as Shimmer } from '../../../shimmer-Bt9INFuE.js';
+import { S as Shimmer } from '../../../shimmer-R2LMMF5x.js';
 
 const STATUS_LABELS = {
   success: "Success",

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

@@ -6,35 +6,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
 const domains_metrics_components_metricsUtils = require('../../metrics/components/metrics-utils.cjs.js');
-const tooltip = require('../../../tooltip-BsSNtmxl.cjs');
+const dataPanel = require('../../../data-panel-BmQlOkMA.cjs');
 const icons_AgentIcon = require('../../../icons/AgentIcon.cjs.js');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
 const icons_WorkflowIcon = require('../../../icons/WorkflowIcon.cjs.js');
 
 function formatEntityType(entityType) {
   return entityType.split("_").map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`).join(" ");
 }
-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 TraceSummaryDescription({
-  rootSpan,
-  usage,
-  entityHref,
-  LinkComponent,
-  className
-}) {
+function TraceSummaryDescription({ rootSpan, usage, entityHref, LinkComponent }) {
   const startedAt = rootSpan.startedAt ? new Date(rootSpan.startedAt) : null;
   const endedAt = rootSpan.endedAt ? new Date(rootSpan.endedAt) : null;
   const duration = domains_traces_utils_spanUtils.formatSpanDuration(startedAt, endedAt);
@@ -45,58 +24,25 @@ function TraceSummaryDescription({
   const entityType = rootSpan.entityType;
   const formattedEntityType = entityType ? formatEntityType(entityType) : "Entity";
   const EntityIcon = entityType?.includes("workflow") ? icons_WorkflowIcon.WorkflowIcon : icons_AgentIcon.AgentIcon;
-  const Link = LinkComponent ?? "a";
-  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: [
-        entityName && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: entityHref ? /* @__PURE__ */ jsxRuntime.jsxs(
-            Link,
-            {
-              href: entityHref,
-              className: "text-neutral4 hover:text-neutral5 flex shrink-0 items-center gap-1 whitespace-nowrap hover:underline",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: entityName }),
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, { className: "size-3 shrink-0", "aria-hidden": "true" })
-              ]
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { tabIndex: 0, className: "flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: entityName })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: formattedEntityType })
-        ] }),
-        startedAtTimestamp && exactStartedAtTimestamp && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Started at ${exactStartedAtTimestamp}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarClockIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: startedAtTimestamp })
-        ] }),
-        duration && exactDuration && /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: `Duration ${exactDuration}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TimerIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: duration })
-        ] }),
-        usage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: "Input tokens", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownToLineIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: usage.inputTokens === void 0 ? "—" : domains_metrics_components_metricsUtils.formatCompact(usage.inputTokens) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: "Output tokens", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpFromLineIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: usage.outputTokens === void 0 ? "—" : domains_metrics_components_metricsUtils.formatCompact(usage.outputTokens) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SummaryItem, { label: "Estimated cost", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDollarSignIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: usage.estimatedCost === void 0 ? "—" : domains_metrics_components_metricsUtils.formatCost(usage.estimatedCost, usage.costUnit) })
-          ] })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Metadata, { children: [
+    entityName && (entityHref ? /* @__PURE__ */ jsxRuntime.jsx(
+      dataPanel.DataPanel.Meta,
+      {
+        as: LinkComponent ?? "a",
+        href: entityHref,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, {}),
+        tooltip: formattedEntityType,
+        children: entityName
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, {}), tooltip: formattedEntityType, children: entityName })),
+    startedAtTimestamp && exactStartedAtTimestamp && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarClockIcon, {}), tooltip: `Started at ${exactStartedAtTimestamp}`, children: startedAtTimestamp }),
+    duration && exactDuration && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TimerIcon, {}), tooltip: `Duration ${exactDuration}`, children: duration }),
+    usage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownToLineIcon, {}), tooltip: "Input tokens", children: usage.inputTokens === void 0 ? "—" : domains_metrics_components_metricsUtils.formatCompact(usage.inputTokens) }),
+      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpFromLineIcon, {}), tooltip: "Output tokens", children: usage.outputTokens === void 0 ? "—" : domains_metrics_components_metricsUtils.formatCompact(usage.outputTokens) }),
+      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDollarSignIcon, {}), tooltip: "Estimated cost", children: usage.estimatedCost === void 0 ? "—" : domains_metrics_components_metricsUtils.formatCost(usage.estimatedCost, usage.costUnit) })
+    ] })
+  ] });
 }
 
 exports.TraceSummaryDescription = TraceSummaryDescription;

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

@@ -1 +1 @@
-{"version":3,"file":"trace-summary-description.cjs.js","sources":["../../../../src/domains/traces/components/trace-summary-description.tsx"],"sourcesContent":["import {\n  ArrowDownToLineIcon,\n  ArrowUpFromLineIcon,\n  CalendarClockIcon,\n  CircleDollarSignIcon,\n  ExternalLinkIcon,\n  TimerIcon,\n} from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport {\n  formatSpanDuration,\n  formatSpanDurationExact,\n  formatSpanTimestamp,\n  formatSpanTimestampExact,\n} from '../utils/span-utils';\nimport { formatCompact, formatCost } from '@/domains/metrics/components/metrics-utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { AgentIcon, WorkflowIcon } from '@/ds/icons';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { cn } from '@/lib/utils';\n\nfunction formatEntityType(entityType: string): string {\n  return entityType\n    .split('_')\n    .map(word => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)\n    .join(' ');\n}\n\n/** Lightweight root-span fields available from `useTraceLightSpans`. */\ntype RootSpanSummary = {\n  entityId?: string | null;\n  entityName?: string | null;\n  entityType?: string | null;\n  startedAt: Date | string;\n  endedAt?: Date | string | null;\n};\n\nexport interface TraceSummaryDescriptionProps {\n  rootSpan: RootSpanSummary;\n  usage?: TraceUsageSummary;\n  /** When provided (with `LinkComponent`), the entity name links to the entity's page. */\n  entityHref?: string;\n  LinkComponent?: LinkComponent;\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 trace metadata shown under the trace side-panel heading. */\nexport function TraceSummaryDescription({\n  rootSpan,\n  usage,\n  entityHref,\n  LinkComponent,\n  className,\n}: TraceSummaryDescriptionProps) {\n  const startedAt = rootSpan.startedAt ? new Date(rootSpan.startedAt) : null;\n  const endedAt = rootSpan.endedAt ? new Date(rootSpan.endedAt) : null;\n  const duration = formatSpanDuration(startedAt, endedAt);\n  const exactDuration = formatSpanDurationExact(startedAt, endedAt);\n  const startedAtTimestamp = formatSpanTimestamp(startedAt);\n  const exactStartedAtTimestamp = formatSpanTimestampExact(startedAt);\n\n  const entityName = rootSpan.entityName || rootSpan.entityId;\n  const entityType = rootSpan.entityType;\n  const formattedEntityType = entityType ? formatEntityType(entityType) : 'Entity';\n  const EntityIcon = entityType?.includes('workflow') ? WorkflowIcon : AgentIcon;\n  const Link = LinkComponent ?? 'a';\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      {entityName && (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            {entityHref ? (\n              <Link\n                href={entityHref}\n                className=\"text-neutral4 hover:text-neutral5 flex shrink-0 items-center gap-1 whitespace-nowrap hover:underline\"\n              >\n                <EntityIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                <span>{entityName}</span>\n                <ExternalLinkIcon className=\"size-3 shrink-0\" aria-hidden=\"true\" />\n              </Link>\n            ) : (\n              <span tabIndex={0} className=\"flex shrink-0 cursor-help items-center gap-1 whitespace-nowrap\">\n                <EntityIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                <span>{entityName}</span>\n              </span>\n            )}\n          </TooltipTrigger>\n          <TooltipContent>{formattedEntityType}</TooltipContent>\n        </Tooltip>\n      )}\n      {startedAtTimestamp && exactStartedAtTimestamp && (\n        <SummaryItem label={`Started at ${exactStartedAtTimestamp}`}>\n          <CalendarClockIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{startedAtTimestamp}</span>\n        </SummaryItem>\n      )}\n      {duration && exactDuration && (\n        <SummaryItem label={`Duration ${exactDuration}`}>\n          <TimerIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          <span>{duration}</span>\n        </SummaryItem>\n      )}\n      {usage && (\n        <>\n          <SummaryItem label=\"Input tokens\">\n            <ArrowDownToLineIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n            <span>{usage.inputTokens === undefined ? '—' : formatCompact(usage.inputTokens)}</span>\n          </SummaryItem>\n          <SummaryItem label=\"Output tokens\">\n            <ArrowUpFromLineIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n            <span>{usage.outputTokens === undefined ? '—' : formatCompact(usage.outputTokens)}</span>\n          </SummaryItem>\n          <SummaryItem label=\"Estimated cost\">\n            <CircleDollarSignIcon className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n            <span>{usage.estimatedCost === undefined ? '—' : formatCost(usage.estimatedCost, usage.costUnit)}</span>\n          </SummaryItem>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["Tooltip","jsx","TooltipTrigger","TooltipContent","formatSpanDuration","formatSpanDurationExact","formatSpanTimestamp","formatSpanTimestampExact","WorkflowIcon","AgentIcon","jsxs","cn","ExternalLinkIcon","CalendarClockIcon","TimerIcon","Fragment","ArrowDownToLineIcon","formatCompact","ArrowUpFromLineIcon","CircleDollarSignIcon","formatCost"],"mappings":"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"}
+{"version":3,"file":"trace-summary-description.cjs.js","sources":["../../../../src/domains/traces/components/trace-summary-description.tsx"],"sourcesContent":["import {\n  ArrowDownToLineIcon,\n  ArrowUpFromLineIcon,\n  CalendarClockIcon,\n  CircleDollarSignIcon,\n  TimerIcon,\n} from 'lucide-react';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport {\n  formatSpanDuration,\n  formatSpanDurationExact,\n  formatSpanTimestamp,\n  formatSpanTimestampExact,\n} from '../utils/span-utils';\nimport { formatCompact, formatCost } from '@/domains/metrics/components/metrics-utils';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { AgentIcon, WorkflowIcon } from '@/ds/icons';\nimport type { LinkComponent } from '@/ds/types/link-component';\n\nfunction formatEntityType(entityType: string): string {\n  return entityType\n    .split('_')\n    .map(word => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)\n    .join(' ');\n}\n\n/** Lightweight root-span fields available from `useTraceLightSpans`. */\ntype RootSpanSummary = {\n  entityId?: string | null;\n  entityName?: string | null;\n  entityType?: string | null;\n  startedAt: Date | string;\n  endedAt?: Date | string | null;\n};\n\nexport interface TraceSummaryDescriptionProps {\n  rootSpan: RootSpanSummary;\n  usage?: TraceUsageSummary;\n  /** When provided (with `LinkComponent`), the entity name links to the entity's page. */\n  entityHref?: string;\n  LinkComponent?: LinkComponent;\n}\n\n/** Compact trace metadata shown under the trace side-panel heading. */\nexport function TraceSummaryDescription({ rootSpan, usage, entityHref, LinkComponent }: TraceSummaryDescriptionProps) {\n  const startedAt = rootSpan.startedAt ? new Date(rootSpan.startedAt) : null;\n  const endedAt = rootSpan.endedAt ? new Date(rootSpan.endedAt) : null;\n  const duration = formatSpanDuration(startedAt, endedAt);\n  const exactDuration = formatSpanDurationExact(startedAt, endedAt);\n  const startedAtTimestamp = formatSpanTimestamp(startedAt);\n  const exactStartedAtTimestamp = formatSpanTimestampExact(startedAt);\n\n  const entityName = rootSpan.entityName || rootSpan.entityId;\n  const entityType = rootSpan.entityType;\n  const formattedEntityType = entityType ? formatEntityType(entityType) : 'Entity';\n  const EntityIcon = entityType?.includes('workflow') ? WorkflowIcon : AgentIcon;\n\n  return (\n    <DataPanel.Metadata>\n      {entityName &&\n        (entityHref ? (\n          <DataPanel.Meta\n            as={LinkComponent ?? 'a'}\n            href={entityHref}\n            icon={<EntityIcon />}\n            tooltip={formattedEntityType}\n          >\n            {entityName}\n          </DataPanel.Meta>\n        ) : (\n          <DataPanel.Meta icon={<EntityIcon />} tooltip={formattedEntityType}>\n            {entityName}\n          </DataPanel.Meta>\n        ))}\n      {startedAtTimestamp && exactStartedAtTimestamp && (\n        <DataPanel.Meta icon={<CalendarClockIcon />} tooltip={`Started at ${exactStartedAtTimestamp}`}>\n          {startedAtTimestamp}\n        </DataPanel.Meta>\n      )}\n      {duration && exactDuration && (\n        <DataPanel.Meta icon={<TimerIcon />} tooltip={`Duration ${exactDuration}`}>\n          {duration}\n        </DataPanel.Meta>\n      )}\n      {usage && (\n        <>\n          <DataPanel.Meta icon={<ArrowDownToLineIcon />} tooltip=\"Input tokens\">\n            {usage.inputTokens === undefined ? '—' : formatCompact(usage.inputTokens)}\n          </DataPanel.Meta>\n          <DataPanel.Meta icon={<ArrowUpFromLineIcon />} tooltip=\"Output tokens\">\n            {usage.outputTokens === undefined ? '—' : formatCompact(usage.outputTokens)}\n          </DataPanel.Meta>\n          <DataPanel.Meta icon={<CircleDollarSignIcon />} tooltip=\"Estimated cost\">\n            {usage.estimatedCost === undefined ? '—' : formatCost(usage.estimatedCost, usage.costUnit)}\n          </DataPanel.Meta>\n        </>\n      )}\n    </DataPanel.Metadata>\n  );\n}\n"],"names":["formatSpanDuration","formatSpanDurationExact","formatSpanTimestamp","formatSpanTimestampExact","WorkflowIcon","AgentIcon","jsxs","DataPanel","jsx","CalendarClockIcon","TimerIcon","Fragment","ArrowDownToLineIcon","formatCompact","ArrowUpFromLineIcon","CircleDollarSignIcon","formatCost"],"mappings":"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"}