@agentmark-ai/ui-components 0.1.0 → 0.3.0

package/dist/index.js

@@ -212,7 +212,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment4 = REACT_FRAGMENT_TYPE;
+        var Fragment5 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -271,7 +271,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element;
         exports2.ForwardRef = ForwardRef2;
-        exports2.Fragment = Fragment4;
+        exports2.Fragment = Fragment5;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo2;
         exports2.Portal = Portal;
@@ -1220,11 +1220,17 @@ __export(index_exports, {
   SpanInfoProvider: () => SpanInfoProvider,
   SpanInfoTabs: () => SpanInfoTabs,
   SpanInfoTitle: () => SpanInfoTitle,
+  TIMELINE_CONSTANTS: () => TIMELINE_CONSTANTS,
   TableEmptyRows: () => TableEmptyRows,
   TableHeadCustom: () => TableHeadCustom,
   TablePaginationCustom: () => TablePaginationCustom,
   TableSelectedAction: () => TableSelectedAction,
   TableSkeleton: () => TableSkeleton,
+  TimelineBar: () => TimelineBar,
+  TimelineErrorBoundary: () => TimelineErrorBoundary,
+  TimelineLegend: () => TimelineLegend,
+  TimelineRuler: () => TimelineRuler,
+  TimelineTooltip: () => TimelineTooltip,
   TraceDrawer: () => TraceDrawer,
   TraceDrawerCloseButton: () => TraceDrawerCloseButton,
   TraceDrawerContainer: () => TraceDrawerContainer,
@@ -1241,11 +1247,14 @@ __export(index_exports, {
   TraceLabel: () => TraceLabel,
   TraceListItem: () => TraceListItem,
   TraceListProvider: () => TraceListProvider,
+  TraceTimeline: () => TraceTimeline,
   TraceTree: () => TraceTree,
   TraceTreeItem: () => TraceTreeItem,
   TracesList: () => TracesList,
   applyDagreLayout: () => applyDagreLayout,
   calculateBranchFamilies: () => calculateBranchFamilies,
+  computeTimelineLayout: () => computeTimelineLayout,
+  formatDuration: () => formatDuration,
   getBranchColor: () => getBranchColor,
   getDisplayName: () => getDisplayName2,
   getNodeTypeStyle: () => getNodeTypeStyle,
@@ -1256,6 +1265,9 @@ __export(index_exports, {
   useEvaluationContext: () => useEvaluationContext,
   useSpanInfoContext: () => useSpanInfoContext,
   useTable: () => useTable,
+  useTimelineLayout: () => useTimelineLayout,
+  useTimelineViewPreference: () => useTimelineViewPreference,
+  useTimelineZoom: () => useTimelineZoom,
   useTraceDrawer: () => useTraceDrawer,
   useTraceDrawerContext: () => useTraceDrawerContext,
   useTraceListContext: () => useTraceListContext
@@ -3582,7 +3594,7 @@ function createBox(options = {}) {
   const BoxRoot = styled2("div", {
     shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
   })(styleFunctionSx_default);
-  const Box24 = /* @__PURE__ */ React3.forwardRef(function Box25(inProps, ref) {
+  const Box29 = /* @__PURE__ */ React3.forwardRef(function Box30(inProps, ref) {
     const theme2 = useTheme_default(defaultTheme2);
     const {
       className,
@@ -3597,7 +3609,7 @@ function createBox(options = {}) {
       ...other
     });
   });
-  return Box24;
+  return Box29;
 }
 
 // ../../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js
@@ -3661,29 +3673,29 @@ var Box_default = Box7;
 
 // ../../node_modules/@mui/utils/esm/getDisplayName/getDisplayName.js
 var import_react_is2 = __toESM(require_react_is2(), 1);
-function getFunctionComponentName(Component, fallback = "") {
-  return Component.displayName || Component.name || fallback;
+function getFunctionComponentName(Component2, fallback = "") {
+  return Component2.displayName || Component2.name || fallback;
 }
 function getWrappedName(outerType, innerType, wrapperName) {
   const functionName = getFunctionComponentName(innerType);
   return outerType.displayName || (functionName !== "" ? `${wrapperName}(${functionName})` : wrapperName);
 }
-function getDisplayName(Component) {
-  if (Component == null) {
+function getDisplayName(Component2) {
+  if (Component2 == null) {
     return void 0;
   }
-  if (typeof Component === "string") {
-    return Component;
+  if (typeof Component2 === "string") {
+    return Component2;
   }
-  if (typeof Component === "function") {
-    return getFunctionComponentName(Component, "Component");
+  if (typeof Component2 === "function") {
+    return getFunctionComponentName(Component2, "Component");
   }
-  if (typeof Component === "object") {
-    switch (Component.$$typeof) {
+  if (typeof Component2 === "object") {
+    switch (Component2.$$typeof) {
       case import_react_is2.ForwardRef:
-        return getWrappedName(Component, Component.render, "ForwardRef");
+        return getWrappedName(Component2, Component2.render, "ForwardRef");
       case import_react_is2.Memo:
-        return getWrappedName(Component, Component.type, "memo");
+        return getWrappedName(Component2, Component2.type, "memo");
       default:
         return void 0;
     }
@@ -3897,14 +3909,14 @@ function createStyled(input = {}) {
         expressionsHead.unshift(outputStrings);
       }
       const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
-      const Component = defaultStyledResolver(...expressions);
+      const Component2 = defaultStyledResolver(...expressions);
       if (tag.muiName) {
-        Component.muiName = tag.muiName;
+        Component2.muiName = tag.muiName;
       }
       if (process.env.NODE_ENV !== "production") {
-        Component.displayName = generateDisplayName(componentName, componentSlot, tag);
+        Component2.displayName = generateDisplayName(componentName, componentSlot, tag);
       }
-      return Component;
+      return Component2;
     };
     if (defaultStyledResolver.withConfig) {
       muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
@@ -4168,7 +4180,7 @@ function createStack(options = {}) {
     return composeClasses(slots, (slot) => generateUtilityClass(componentName, slot), {});
   };
   const StackRoot = createStyledComponent(style3);
-  const Stack15 = /* @__PURE__ */ React4.forwardRef(function Grid(inProps, ref) {
+  const Stack14 = /* @__PURE__ */ React4.forwardRef(function Grid(inProps, ref) {
     const themeProps = useThemeProps2(inProps);
     const props = extendSxProp(themeProps);
     const {
@@ -4196,14 +4208,14 @@ function createStack(options = {}) {
       children: divider ? joinChildren(children, divider) : children
     });
   });
-  process.env.NODE_ENV !== "production" ? Stack15.propTypes = {
+  process.env.NODE_ENV !== "production" ? Stack14.propTypes = {
     children: import_prop_types3.default.node,
     direction: import_prop_types3.default.oneOfType([import_prop_types3.default.oneOf(["column-reverse", "column", "row-reverse", "row"]), import_prop_types3.default.arrayOf(import_prop_types3.default.oneOf(["column-reverse", "column", "row-reverse", "row"])), import_prop_types3.default.object]),
     divider: import_prop_types3.default.node,
     spacing: import_prop_types3.default.oneOfType([import_prop_types3.default.arrayOf(import_prop_types3.default.oneOfType([import_prop_types3.default.number, import_prop_types3.default.string])), import_prop_types3.default.number, import_prop_types3.default.object, import_prop_types3.default.string]),
     sx: import_prop_types3.default.oneOfType([import_prop_types3.default.arrayOf(import_prop_types3.default.oneOfType([import_prop_types3.default.func, import_prop_types3.default.object, import_prop_types3.default.bool])), import_prop_types3.default.func, import_prop_types3.default.object])
   } : void 0;
-  return Stack15;
+  return Stack14;
 }
 
 // ../../node_modules/@mui/system/esm/Stack/Stack.js
@@ -19982,7 +19994,7 @@ var TraceDrawerCloseButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material10.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Iconify, { icon: "eva:close-fill" }) });
 };
 var TraceDrawerHeader = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material10.Box, { p: 2, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_material10.Box, { p: 2, sx: { flexShrink: 0, borderBottom: 1, borderColor: "divider" }, children });
 };
 
 // src/sections/traces/trace-drawer/trace-drawer-main.tsx
@@ -20110,7 +20122,18 @@ var import_jsx_runtime33 = require("react/jsx-runtime");
 var TraceDrawerContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material14.Stack, { height: "100%", divider: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material14.Divider, {}), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_material14.Box,
+    {
+      sx: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children
+    }
+  );
 };
 
 // src/sections/traces/trace-drawer/trace-tree/trace-tree.tsx
@@ -20362,13 +20385,12 @@ var TraceTree = () => {
     setSelectedSpanId,
     traces,
     findCostAndTokens,
-    traceId,
-    treeHeight
+    traceId
   } = useTraceDrawerContext();
   const tree = (0, import_react11.useMemo)(() => {
     return spanTree.map((node) => renderTree(node, findCostAndTokens));
   }, [spanTree]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material17.Box, { sx: { height: treeHeight, overflowY: "auto", p: 2 }, children: selectedSpan?.id && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_material17.Box, { sx: { height: "100%", overflowY: "auto", p: 2 }, children: selectedSpan?.id && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     import_x_tree_view.SimpleTreeView,
     {
       expansionTrigger: "iconContainer",
@@ -21140,168 +21162,1759 @@ function TraceGraphCanvas({
   );
 }
 
-// src/sections/traces/trace-drawer/span-info/span-info-content.tsx
-var import_material21 = require("@mui/material");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var SpanInfoTitle = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material21.Typography, { variant: "h6", gutterBottom: true, children });
-};
-var SpanInfoContent = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_material21.Stack, { width: "100%", height: "100%", overflow: "hidden", children });
+// src/sections/traces/trace-drawer/trace-timeline/timeline-types.ts
+var TIMELINE_CONSTANTS = {
+  /** Height of each span row in pixels */
+  ROW_HEIGHT: 28,
+  /** Minimum bar width in pixels (for very short spans) */
+  MIN_BAR_WIDTH: 4,
+  /** Indentation per depth level in pixels */
+  DEPTH_INDENT: 16,
+  /** Bar height as ratio of row height */
+  BAR_HEIGHT_RATIO: 0.7,
+  /** Minimum zoom scale */
+  MIN_SCALE: 0.5,
+  /** Maximum zoom scale */
+  MAX_SCALE: 10,
+  /** Height of the time ruler in pixels */
+  RULER_HEIGHT: 24,
+  /** Padding around the timeline content */
+  PADDING: 8,
+  /** Label area width for span names */
+  LABEL_WIDTH: 120
 };
 
-// src/sections/traces/trace-drawer/span-info/span-info-header.tsx
-var import_material22 = require("@mui/material");
-
-// src/sections/traces/trace-drawer/span-info/span-info-provider.tsx
-var import_react19 = require("react");
-
-// src/sections/traces/trace-drawer/span-info/hooks/use-span-info.ts
-var import_react18 = require("react");
-var useSpanInfo = ({ span }) => {
-  const [activeTab, setActiveTab] = (0, import_react18.useState)("attributes");
-  const [tabs, setTabs] = (0, import_react18.useState)([]);
-  const isLLMCall = (0, import_react18.useMemo)(() => {
-    return span?.data?.type === "GENERATION" || !!span?.data?.model;
-  }, [span?.data?.type, span?.data?.model]);
-  (0, import_react18.useEffect)(() => {
-    if (span?.id) {
-      const newTabs = [];
-      if (isLLMCall) {
-        newTabs.push({
-          value: "inputOutput",
-          label: "Input/Output"
+// src/sections/traces/trace-drawer/trace-timeline/compute-timeline-layout.ts
+function formatDuration(ms) {
+  if (ms < 1e3) {
+    return `${Math.round(ms)}ms`;
+  }
+  if (ms < 6e4) {
+    return `${(ms / 1e3).toFixed(1)}s`;
+  }
+  const minutes = Math.floor(ms / 6e4);
+  const seconds = Math.round(ms % 6e4 / 1e3);
+  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+}
+function calculateTickIntervals(totalMs) {
+  const targetMajorTicks = 6;
+  const idealInterval = totalMs / targetMajorTicks;
+  const niceIntervals = [
+    1,
+    2,
+    5,
+    10,
+    20,
+    50,
+    100,
+    200,
+    500,
+    1e3,
+    2e3,
+    5e3,
+    1e4,
+    2e4,
+    3e4,
+    6e4,
+    12e4,
+    3e5,
+    6e5
+  ];
+  let major = niceIntervals[0];
+  for (const interval of niceIntervals) {
+    if (interval >= idealInterval) {
+      major = interval;
+      break;
+    }
+    major = interval;
+  }
+  const minor = major / 5;
+  return { major, minor };
+}
+function hasErrorStatus(span) {
+  const status = span.data?.status?.toLowerCase();
+  return status === "error" || status === "failed" || status === "failure";
+}
+function buildSpanLookup(spans) {
+  const lookup = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    lookup.set(span.id, span);
+  }
+  return lookup;
+}
+function buildChildrenMap(spans) {
+  const childrenMap = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    const parentId = span.parentId;
+    const children = childrenMap.get(parentId) || [];
+    children.push(span);
+    childrenMap.set(parentId, children);
+  }
+  for (const [, children] of childrenMap) {
+    children.sort((a, b) => a.timestamp - b.timestamp);
+  }
+  return childrenMap;
+}
+function spanHasChildren(spanId, childrenMap) {
+  const children = childrenMap.get(spanId);
+  return children !== void 0 && children.length > 0;
+}
+function sanitizeSpan(span) {
+  if (!span || typeof span.id !== "string" || !span.id) {
+    return null;
+  }
+  const timestamp = typeof span.timestamp === "number" && Number.isFinite(span.timestamp) ? span.timestamp : Date.now();
+  const duration = typeof span.duration === "number" && Number.isFinite(span.duration) && span.duration >= 0 ? span.duration : 0;
+  const name = typeof span.name === "string" ? span.name : String(span.id);
+  return {
+    ...span,
+    timestamp,
+    duration,
+    name
+  };
+}
+function computeTimelineLayout(spans) {
+  if (!Array.isArray(spans) || spans.length === 0) {
+    return {
+      layouts: [],
+      metrics: {
+        totalDurationMs: 0,
+        startTimeMs: 0,
+        endTimeMs: 0,
+        spanCount: 0,
+        maxDepth: 0,
+        typeBreakdown: {}
+      },
+      rulerTicks: []
+    };
+  }
+  const sanitizedSpans = spans.map(sanitizeSpan).filter((span) => span !== null);
+  if (sanitizedSpans.length === 0) {
+    return {
+      layouts: [],
+      metrics: {
+        totalDurationMs: 0,
+        startTimeMs: 0,
+        endTimeMs: 0,
+        spanCount: 0,
+        maxDepth: 0,
+        typeBreakdown: {}
+      },
+      rulerTicks: []
+    };
+  }
+  const spanLookup = buildSpanLookup(sanitizedSpans);
+  const childrenMap = buildChildrenMap(sanitizedSpans);
+  let minTimestamp = Infinity;
+  let maxEndTime = -Infinity;
+  for (const span of sanitizedSpans) {
+    const startTime = span.timestamp;
+    const endTime = span.timestamp + Math.max(0, span.duration);
+    if (startTime < minTimestamp) {
+      minTimestamp = startTime;
+    }
+    if (endTime > maxEndTime) {
+      maxEndTime = endTime;
+    }
+  }
+  const totalDurationMs = maxEndTime - minTimestamp;
+  const normalizeTime = (timestamp) => {
+    if (totalDurationMs === 0) return 0;
+    return (timestamp - minTimestamp) / totalDurationMs;
+  };
+  const normalizeDuration = (duration) => {
+    if (totalDurationMs === 0) return 1;
+    return Math.max(0, duration) / totalDurationMs;
+  };
+  const layouts = [];
+  let rowIndex = 0;
+  let maxDepth = 0;
+  const typeBreakdown = {};
+  function traverse(parentId, depth) {
+    const children = childrenMap.get(parentId) || [];
+    for (const span of children) {
+      if (depth > maxDepth) {
+        maxDepth = depth;
+      }
+      const hasChildren = spanHasChildren(span.id, childrenMap);
+      const nodeType = inferNodeType(
+        {
+          spanId: span.id,
+          parentSpanId: span.parentId,
+          name: span.name,
+          startTime: span.timestamp,
+          type: span.data?.type,
+          data: span.data
+        },
+        hasChildren
+      );
+      typeBreakdown[nodeType] = (typeBreakdown[nodeType] || 0) + 1;
+      const startTimeMs = span.timestamp - minTimestamp;
+      const durationMs = Math.max(0, span.duration);
+      const percentOfTrace = totalDurationMs > 0 ? durationMs / totalDurationMs * 100 : 100;
+      const layout = {
+        spanId: span.id,
+        name: span.name,
+        x: normalizeTime(span.timestamp),
+        width: normalizeDuration(durationMs),
+        row: rowIndex,
+        depth,
+        durationMs,
+        startTimeMs,
+        percentOfTrace,
+        nodeType,
+        hasError: hasErrorStatus(span),
+        span
+      };
+      layouts.push(layout);
+      rowIndex++;
+      traverse(span.id, depth + 1);
+    }
+  }
+  traverse(void 0, 0);
+  for (const span of sanitizedSpans) {
+    if (span.parentId && !spanLookup.has(span.parentId)) {
+      const hasChildren = spanHasChildren(span.id, childrenMap);
+      const nodeType = inferNodeType(
+        {
+          spanId: span.id,
+          parentSpanId: span.parentId,
+          name: span.name,
+          startTime: span.timestamp,
+          type: span.data?.type,
+          data: span.data
+        },
+        hasChildren
+      );
+      if (!layouts.find((l) => l.spanId === span.id)) {
+        typeBreakdown[nodeType] = (typeBreakdown[nodeType] || 0) + 1;
+        const startTimeMs = span.timestamp - minTimestamp;
+        const durationMs = Math.max(0, span.duration);
+        const percentOfTrace = totalDurationMs > 0 ? durationMs / totalDurationMs * 100 : 100;
+        layouts.push({
+          spanId: span.id,
+          name: span.name,
+          x: normalizeTime(span.timestamp),
+          width: normalizeDuration(durationMs),
+          row: rowIndex,
+          depth: 0,
+          // Treat as root since parent is missing
+          durationMs,
+          startTimeMs,
+          percentOfTrace,
+          nodeType,
+          hasError: hasErrorStatus(span),
+          span
         });
-        setActiveTab("inputOutput");
-      } else {
-        setActiveTab("evaluation");
+        rowIndex++;
+        traverse(span.id, 1);
       }
-      newTabs.push({
-        value: "evaluation",
-        label: `Evaluations`
+    }
+  }
+  const { major, minor } = calculateTickIntervals(totalDurationMs);
+  const rulerTicks = [];
+  if (totalDurationMs > 0) {
+    for (let time = 0; time <= totalDurationMs; time += minor) {
+      const isMajor = time % major === 0;
+      rulerTicks.push({
+        position: time / totalDurationMs,
+        label: isMajor ? formatDuration(time) : "",
+        isMajor
       });
-      newTabs.push({
-        value: "attributes",
-        label: "Attributes"
+    }
+    if (rulerTicks.length === 0 || rulerTicks[rulerTicks.length - 1].position < 1) {
+      rulerTicks.push({
+        position: 1,
+        label: formatDuration(totalDurationMs),
+        isMajor: true
       });
-      setTabs(newTabs);
     }
-  }, [span?.id, isLLMCall]);
-  (0, import_react18.useEffect)(() => {
-    const isTabValid = activeTab === "inputOutput" && isLLMCall || activeTab === "evaluation" || activeTab === "attributes";
-    if (!isTabValid) {
-      if (isLLMCall) {
-        setActiveTab("inputOutput");
-      } else {
-        setActiveTab("evaluation");
+  }
+  const metrics = {
+    totalDurationMs,
+    startTimeMs: minTimestamp,
+    endTimeMs: maxEndTime,
+    spanCount: sanitizedSpans.length,
+    maxDepth,
+    typeBreakdown
+  };
+  return { layouts, metrics, rulerTicks };
+}
+
+// src/sections/traces/trace-drawer/trace-timeline/use-timeline-layout.ts
+var import_react18 = require("react");
+function useTimelineLayout(spans) {
+  return (0, import_react18.useMemo)(() => computeTimelineLayout(spans), [spans]);
+}
+
+// src/sections/traces/trace-drawer/trace-timeline/use-timeline-zoom.ts
+var import_react19 = require("react");
+var { MIN_SCALE, MAX_SCALE } = TIMELINE_CONSTANTS;
+var ZOOM_FACTOR = 1.2;
+function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
+  const [viewState, setViewState] = (0, import_react19.useState)(() => ({
+    viewBox: {
+      x: 0,
+      y: 0,
+      width: contentWidth,
+      height: contentHeight
+    },
+    scale: 1,
+    isPanning: false
+  }));
+  const panStartRef = (0, import_react19.useRef)(
+    null
+  );
+  const clampScale = (0, import_react19.useCallback)((scale) => {
+    return Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
+  }, []);
+  const zoomIn = (0, import_react19.useCallback)(() => {
+    setViewState((prev) => {
+      const newScale = clampScale(prev.scale * ZOOM_FACTOR);
+      const scaleRatio = prev.scale / newScale;
+      const centerX = prev.viewBox.x + prev.viewBox.width / 2;
+      const centerY = prev.viewBox.y + prev.viewBox.height / 2;
+      const newWidth = prev.viewBox.width * scaleRatio;
+      const newHeight = prev.viewBox.height * scaleRatio;
+      return {
+        ...prev,
+        viewBox: {
+          x: centerX - newWidth / 2,
+          y: centerY - newHeight / 2,
+          width: newWidth,
+          height: newHeight
+        },
+        scale: newScale
+      };
+    });
+  }, [clampScale]);
+  const zoomOut = (0, import_react19.useCallback)(() => {
+    setViewState((prev) => {
+      const newScale = clampScale(prev.scale / ZOOM_FACTOR);
+      const scaleRatio = prev.scale / newScale;
+      const centerX = prev.viewBox.x + prev.viewBox.width / 2;
+      const centerY = prev.viewBox.y + prev.viewBox.height / 2;
+      const newWidth = prev.viewBox.width * scaleRatio;
+      const newHeight = prev.viewBox.height * scaleRatio;
+      return {
+        ...prev,
+        viewBox: {
+          x: centerX - newWidth / 2,
+          y: centerY - newHeight / 2,
+          width: newWidth,
+          height: newHeight
+        },
+        scale: newScale
+      };
+    });
+  }, [clampScale]);
+  const resetZoom = (0, import_react19.useCallback)(() => {
+    setViewState({
+      viewBox: {
+        x: 0,
+        y: 0,
+        width: contentWidth,
+        height: contentHeight
+      },
+      scale: 1,
+      isPanning: false
+    });
+  }, [contentWidth, contentHeight]);
+  const setScale = (0, import_react19.useCallback)(
+    (scale) => {
+      setViewState((prev) => {
+        const newScale = clampScale(scale);
+        const scaleRatio = prev.scale / newScale;
+        const centerX = prev.viewBox.x + prev.viewBox.width / 2;
+        const centerY = prev.viewBox.y + prev.viewBox.height / 2;
+        const newWidth = prev.viewBox.width * scaleRatio;
+        const newHeight = prev.viewBox.height * scaleRatio;
+        return {
+          ...prev,
+          viewBox: {
+            x: centerX - newWidth / 2,
+            y: centerY - newHeight / 2,
+            width: newWidth,
+            height: newHeight
+          },
+          scale: newScale
+        };
+      });
+    },
+    [clampScale]
+  );
+  const onWheel = (0, import_react19.useCallback)(
+    (event) => {
+      if (!event.ctrlKey && !event.metaKey) {
+        return;
+      }
+      try {
+        event.preventDefault();
+      } catch {
       }
+      const svg2 = event.currentTarget;
+      if (!svg2) return;
+      const rect = svg2.getBoundingClientRect();
+      if (!rect || rect.width === 0 || rect.height === 0) return;
+      const delta = event.deltaY;
+      const zoomDirection = delta > 0 ? -1 : 1;
+      setViewState((prev) => {
+        const factor = zoomDirection > 0 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;
+        const newScale = clampScale(prev.scale * factor);
+        if (newScale === prev.scale) {
+          return prev;
+        }
+        const scaleRatio = prev.scale / newScale;
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        const viewBoxMouseX = prev.viewBox.x + mouseX / rect.width * prev.viewBox.width;
+        const viewBoxMouseY = prev.viewBox.y + mouseY / rect.height * prev.viewBox.height;
+        const newWidth = prev.viewBox.width * scaleRatio;
+        const newHeight = prev.viewBox.height * scaleRatio;
+        const newX = viewBoxMouseX - mouseX / rect.width * newWidth;
+        const newY = viewBoxMouseY - mouseY / rect.height * newHeight;
+        return {
+          ...prev,
+          viewBox: {
+            x: newX,
+            y: newY,
+            width: newWidth,
+            height: newHeight
+          },
+          scale: newScale
+        };
+      });
+    },
+    [clampScale]
+  );
+  const onMouseDown = (0, import_react19.useCallback)((event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    setViewState((prev) => {
+      panStartRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+        viewBoxX: prev.viewBox.x,
+        viewBoxY: prev.viewBox.y
+      };
+      return {
+        ...prev,
+        isPanning: true
+      };
+    });
+  }, []);
+  const onMouseMove = (0, import_react19.useCallback)((event) => {
+    if (!panStartRef.current) return;
+    const svg2 = event.currentTarget;
+    const rect = svg2.getBoundingClientRect();
+    const deltaX = event.clientX - panStartRef.current.x;
+    const deltaY = event.clientY - panStartRef.current.y;
+    setViewState((prev) => {
+      const viewBoxDeltaX = deltaX / rect.width * prev.viewBox.width;
+      const viewBoxDeltaY = deltaY / rect.height * prev.viewBox.height;
+      return {
+        ...prev,
+        viewBox: {
+          ...prev.viewBox,
+          x: panStartRef.current.viewBoxX - viewBoxDeltaX,
+          y: panStartRef.current.viewBoxY - viewBoxDeltaY
+        }
+      };
+    });
+  }, []);
+  const onMouseUp = (0, import_react19.useCallback)(() => {
+    panStartRef.current = null;
+    setViewState((prev) => ({
+      ...prev,
+      isPanning: false
+    }));
+  }, []);
+  const onMouseLeave = (0, import_react19.useCallback)(() => {
+    if (panStartRef.current) {
+      panStartRef.current = null;
+      setViewState((prev) => ({
+        ...prev,
+        isPanning: false
+      }));
     }
-  }, [activeTab, isLLMCall]);
+  }, []);
   return {
-    activeTab,
-    setActiveTab,
-    tabs,
-    isLLMCall
+    viewState,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    setScale,
+    onWheel,
+    panHandlers: {
+      onMouseDown,
+      onMouseMove,
+      onMouseUp,
+      onMouseLeave
+    }
   };
-};
+}
 
-// src/sections/traces/trace-drawer/span-info/span-info-provider.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var SpanInfoContext = (0, import_react19.createContext)(
-  void 0
-);
-var SpanInfoProvider = ({
-  children
-}) => {
-  const { selectedSpan } = useTraceDrawerContext();
-  const { activeTab, setActiveTab, tabs } = useSpanInfo({
-    span: selectedSpan || void 0
+// src/sections/traces/trace-drawer/trace-timeline/use-timeline-view-preference.ts
+var import_react20 = require("react");
+var STORAGE_KEY = "agentmark-trace-view-preference";
+var DEFAULT_VIEW = "graph";
+function useTimelineViewPreference() {
+  const [view, setViewState] = (0, import_react20.useState)(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === "graph" || stored === "timeline") {
+          return stored;
+        }
+      } catch {
+      }
+    }
+    return DEFAULT_VIEW;
   });
-  if (!selectedSpan) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    SpanInfoContext.Provider,
-    {
-      value: {
-        span: selectedSpan,
-        activeTab,
-        setActiveTab,
-        tabs
-      },
-      children
+  (0, import_react20.useEffect)(() => {
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem(STORAGE_KEY, view);
+      } catch {
+      }
     }
-  );
-};
-var useSpanInfoContext = () => {
-  const context = (0, import_react19.useContext)(SpanInfoContext);
-  if (!context) {
-    throw new Error("useSpanInfo must be used within a SpanInfoProvider");
-  }
-  return context;
-};
+  }, [view]);
+  const setView = (0, import_react20.useCallback)((newView) => {
+    setViewState(newView);
+  }, []);
+  const toggleView = (0, import_react20.useCallback)(() => {
+    setViewState((current) => current === "graph" ? "timeline" : "graph");
+  }, []);
+  return {
+    /** Current view type */
+    view,
+    /** Set view to specific type */
+    setView,
+    /** Toggle between graph and timeline */
+    toggleView,
+    /** Whether current view is timeline */
+    isTimeline: view === "timeline",
+    /** Whether current view is graph */
+    isGraph: view === "graph"
+  };
+}
 
-// src/sections/traces/trace-drawer/span-info/span-info-header.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var SpanInfoHeader = () => {
-  const { span } = useSpanInfoContext();
-  const { t } = useTraceDrawerContext();
-  const modelName = span.data.model;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    import_material22.Stack,
+// src/sections/traces/trace-drawer/trace-timeline/trace-timeline.tsx
+var import_react26 = require("react");
+var import_material24 = require("@mui/material");
+var import_styles10 = require("@mui/material/styles");
+
+// src/sections/traces/trace-drawer/trace-timeline/timeline-bar.tsx
+var import_react21 = require("react");
+var import_styles6 = require("@mui/material/styles");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var { ROW_HEIGHT, MIN_BAR_WIDTH, BAR_HEIGHT_RATIO } = TIMELINE_CONSTANTS;
+function formatBarDuration(ms) {
+  if (ms < 1e3) {
+    return `${Math.round(ms)}ms`;
+  }
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
+var TimelineBar = (0, import_react21.memo)(function TimelineBar2({
+  layout,
+  isSelected,
+  isFocused = false,
+  onSelect,
+  onMouseEnter,
+  onMouseLeave,
+  timelineWidth
+}) {
+  const theme2 = (0, import_styles6.useTheme)();
+  const nodeStyle = getNodeTypeStyle(layout.nodeType, theme2);
+  const barHeight = ROW_HEIGHT * BAR_HEIGHT_RATIO;
+  const barY = layout.row * ROW_HEIGHT + (ROW_HEIGHT - barHeight) / 2;
+  const xPixels = layout.x * timelineWidth;
+  const widthPixels = Math.max(MIN_BAR_WIDTH, layout.width * timelineWidth);
+  let barColor = nodeStyle.color;
+  if (layout.hasError) {
+    barColor = theme2.palette.error.main;
+  }
+  const strokeColor = isSelected ? theme2.palette.primary.main : isFocused ? theme2.palette.action.focus : "transparent";
+  const strokeWidth = isSelected || isFocused ? 2 : 0;
+  const opacity = layout.hasError ? 1 : 0.85;
+  const handleClick = (event) => {
+    event.stopPropagation();
+    onSelect?.(layout.spanId);
+  };
+  const handleMouseEnter = (event) => {
+    onMouseEnter?.(layout, event);
+  };
+  const showLabel = widthPixels > 60;
+  const durationLabel = formatBarDuration(layout.durationMs);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    "g",
     {
-      direction: "row",
-      spacing: 3,
-      sx: {
-        px: 2,
-        py: 1.5,
-        borderBottom: 1,
-        borderColor: "divider"
-      },
+      className: "timeline-bar",
+      "data-span-id": layout.spanId,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave,
+      style: { cursor: "pointer" },
+      role: "gridcell",
+      "aria-label": `${layout.name}: ${durationLabel}, ${layout.percentOfTrace.toFixed(1)}% of trace`,
+      tabIndex: -1,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material22.Typography, { variant: "subtitle2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material22.Typography, { component: "span", color: "text.secondary", variant: "subtitle2", children: [
-            t("spanId"),
-            ":"
-          ] }),
-          " ",
-          span.id
-        ] }),
-        modelName && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material22.Typography, { variant: "subtitle2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-            import_material22.Typography,
-            {
-              component: "span",
-              color: "text.secondary",
-              variant: "subtitle2",
-              children: [
-                t("modelName"),
-                ":"
-              ]
-            }
-          ),
-          " ",
-          modelName
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "rect",
+          {
+            x: xPixels,
+            y: barY,
+            width: widthPixels,
+            height: barHeight,
+            rx: 3,
+            ry: 3,
+            fill: barColor,
+            opacity,
+            stroke: strokeColor,
+            strokeWidth
+          }
+        ),
+        showLabel && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "text",
+          {
+            x: xPixels + widthPixels / 2,
+            y: barY + barHeight / 2,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            fontSize: 10,
+            fill: theme2.palette.getContrastText(barColor),
+            style: { pointerEvents: "none", userSelect: "none" },
+            children: durationLabel
+          }
+        ),
+        layout.hasError && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "circle",
+          {
+            cx: xPixels + widthPixels - 8,
+            cy: barY + barHeight / 2,
+            r: 4,
+            fill: theme2.palette.error.contrastText,
+            style: { pointerEvents: "none" }
+          }
+        )
       ]
     }
   );
+});
+
+// src/sections/traces/trace-drawer/trace-timeline/timeline-ruler.tsx
+var import_react22 = require("react");
+var import_styles7 = require("@mui/material/styles");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var { RULER_HEIGHT } = TIMELINE_CONSTANTS;
+var TimelineRuler = (0, import_react22.memo)(function TimelineRuler2({
+  ticks,
+  width: width2,
+  height: height2 = RULER_HEIGHT
+}) {
+  const theme2 = (0, import_styles7.useTheme)();
+  const majorTickHeight = height2 * 0.6;
+  const minorTickHeight = height2 * 0.3;
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("g", { className: "timeline-ruler", role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "rect",
+      {
+        x: 0,
+        y: 0,
+        width: width2,
+        height: height2,
+        fill: theme2.palette.background.paper
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "line",
+      {
+        x1: 0,
+        y1: height2,
+        x2: width2,
+        y2: height2,
+        stroke: theme2.palette.divider,
+        strokeWidth: 1
+      }
+    ),
+    ticks.map((tick, index) => {
+      const x = tick.position * width2;
+      const tickHeight = tick.isMajor ? majorTickHeight : minorTickHeight;
+      const y1 = height2 - tickHeight;
+      const y2 = height2;
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "line",
+          {
+            x1: x,
+            y1,
+            x2: x,
+            y2,
+            stroke: theme2.palette.text.secondary,
+            strokeWidth: tick.isMajor ? 1 : 0.5,
+            opacity: tick.isMajor ? 0.8 : 0.4
+          }
+        ),
+        tick.isMajor && tick.label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "text",
+          {
+            x,
+            y: y1 - 4,
+            textAnchor: "middle",
+            fontSize: 10,
+            fill: theme2.palette.text.secondary,
+            style: { userSelect: "none" },
+            children: tick.label
+          }
+        )
+      ] }, index);
+    })
+  ] });
+});
+
+// src/sections/traces/trace-drawer/trace-timeline/timeline-tooltip.tsx
+var import_react23 = require("react");
+var import_material21 = require("@mui/material");
+var import_styles8 = require("@mui/material/styles");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function formatDuration2(ms) {
+  if (ms < 1) {
+    return "<1ms";
+  }
+  if (ms < 1e3) {
+    return `${Math.round(ms)}ms`;
+  }
+  if (ms < 6e4) {
+    return `${(ms / 1e3).toFixed(2)}s`;
+  }
+  const minutes = Math.floor(ms / 6e4);
+  const seconds = (ms % 6e4 / 1e3).toFixed(1);
+  return `${minutes}m ${seconds}s`;
+}
+function formatStartTime(ms) {
+  if (ms < 1e3) {
+    return `+${Math.round(ms)}ms`;
+  }
+  return `+${(ms / 1e3).toFixed(2)}s`;
+}
+function formatCost(cost) {
+  if (cost < 0.01) {
+    return `$${cost.toFixed(6)}`;
+  }
+  if (cost < 1) {
+    return `$${cost.toFixed(4)}`;
+  }
+  return `$${cost.toFixed(2)}`;
+}
+function formatTokens(tokens) {
+  if (tokens >= 1e6) {
+    return `${(tokens / 1e6).toFixed(1)}M`;
+  }
+  if (tokens >= 1e3) {
+    return `${(tokens / 1e3).toFixed(1)}K`;
+  }
+  return String(tokens);
+}
+function truncateText(text, maxLength) {
+  if (!text) return "";
+  const cleanText = text.replace(/\n/g, " ").trim();
+  if (cleanText.length <= maxLength) return cleanText;
+  return cleanText.slice(0, maxLength) + "...";
+}
+var TimelineTooltip = (0, import_react23.memo)(function TimelineTooltip2({
+  layout,
+  position,
+  visible
+}) {
+  const theme2 = (0, import_styles8.useTheme)();
+  const parsedAttributes = (0, import_react23.useMemo)(() => {
+    const attributes = layout?.span?.data?.attributes;
+    if (!attributes) return null;
+    try {
+      return typeof attributes === "string" ? JSON.parse(attributes) : attributes;
+    } catch {
+      return null;
+    }
+  }, [layout?.span?.data?.attributes]);
+  if (!visible || !layout || !position) {
+    return null;
+  }
+  const nodeStyle = getNodeTypeStyle(layout.nodeType, theme2);
+  const spanData = layout.span.data;
+  const hasModelInfo = spanData.model || spanData.totalTokens || spanData.cost;
+  const hasInputOutput = spanData.input || spanData.output;
+  const hasToolCalls = spanData.toolCalls;
+  const hasAttributes = parsedAttributes && Object.keys(parsedAttributes).length > 0;
+  const tooltipWidth = 340;
+  const tooltipHeight = 280;
+  const padding2 = 12;
+  let left = position.x + padding2;
+  let top2 = position.y + padding2;
+  if (typeof window !== "undefined") {
+    if (left + tooltipWidth > window.innerWidth - padding2) {
+      left = position.x - tooltipWidth - padding2;
+    }
+    if (top2 + tooltipHeight > window.innerHeight - padding2) {
+      top2 = position.y - tooltipHeight - padding2;
+    }
+    left = Math.max(padding2, left);
+    top2 = Math.max(padding2, top2);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    import_material21.Paper,
+    {
+      elevation: 8,
+      sx: {
+        position: "fixed",
+        left,
+        top: top2,
+        zIndex: theme2.zIndex.tooltip,
+        p: 1.5,
+        maxWidth: tooltipWidth,
+        maxHeight: 400,
+        overflow: "auto",
+        pointerEvents: "none",
+        backgroundColor: theme2.palette.background.paper,
+        border: `1px solid ${theme2.palette.divider}`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material21.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_material21.Box,
+            {
+              sx: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                backgroundColor: nodeStyle.color,
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_material21.Typography,
+            {
+              variant: "subtitle2",
+              sx: {
+                fontWeight: 600,
+                wordBreak: "break-word",
+                color: theme2.palette.text.primary
+              },
+              children: layout.name
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          import_material21.Box,
+          {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: "auto 1fr",
+              gap: 0.5,
+              rowGap: 0.25
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "text.secondary", children: "Duration:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", fontWeight: 500, children: formatDuration2(layout.durationMs) }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "text.secondary", children: "Start:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", children: formatStartTime(layout.startTimeMs) }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "text.secondary", children: "% of trace:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material21.Typography, { variant: "caption", children: [
+                layout.percentOfTrace.toFixed(1),
+                "%"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "text.secondary", children: "Type:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", sx: { textTransform: "capitalize" }, children: layout.nodeType }),
+              layout.hasError && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "error.main", children: "Status:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "error.main", fontWeight: 500, children: spanData.statusMessage || "Error" })
+              ] })
+            ]
+          }
+        ),
+        hasModelInfo && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Divider, { sx: { my: 1 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+            import_material21.Box,
+            {
+              sx: {
+                display: "grid",
+                gridTemplateColumns: "auto 1fr",
+                gap: 0.5,
+                rowGap: 0.25
+              },
+              children: [
+                spanData.model && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "text.secondary", children: "Model:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", fontWeight: 500, children: spanData.model })
+                ] }),
+                (spanData.inputTokens || spanData.outputTokens) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "text.secondary", children: "Tokens:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material21.Typography, { variant: "caption", children: [
+                    spanData.inputTokens ? `${formatTokens(spanData.inputTokens)} in` : "",
+                    spanData.inputTokens && spanData.outputTokens ? " / " : "",
+                    spanData.outputTokens ? `${formatTokens(spanData.outputTokens)} out` : "",
+                    spanData.totalTokens && ` (${formatTokens(spanData.totalTokens)} total)`
+                  ] })
+                ] }),
+                spanData.reasoningTokens && spanData.reasoningTokens > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "text.secondary", children: "Reasoning:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material21.Typography, { variant: "caption", children: [
+                    formatTokens(spanData.reasoningTokens),
+                    " tokens"
+                  ] })
+                ] }),
+                spanData.cost != null && spanData.cost > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "text.secondary", children: "Cost:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", fontWeight: 500, children: formatCost(spanData.cost) })
+                ] }),
+                spanData.finishReason && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", color: "text.secondary", children: "Finish:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Typography, { variant: "caption", children: spanData.finishReason })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        hasInputOutput && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Divider, { sx: { my: 1 } }),
+          spanData.input && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material21.Box, { sx: { mb: 0.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              import_material21.Typography,
+              {
+                variant: "caption",
+                color: "text.secondary",
+                sx: { display: "block", mb: 0.25 },
+                children: "Input:"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              import_material21.Typography,
+              {
+                variant: "caption",
+                sx: {
+                  display: "block",
+                  backgroundColor: theme2.palette.action.hover,
+                  borderRadius: 0.5,
+                  p: 0.5,
+                  fontFamily: "monospace",
+                  fontSize: "0.7rem",
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word"
+                },
+                children: truncateText(spanData.input, 100)
+              }
+            )
+          ] }),
+          spanData.output && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material21.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              import_material21.Typography,
+              {
+                variant: "caption",
+                color: "text.secondary",
+                sx: { display: "block", mb: 0.25 },
+                children: "Output:"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              import_material21.Typography,
+              {
+                variant: "caption",
+                sx: {
+                  display: "block",
+                  backgroundColor: theme2.palette.action.hover,
+                  borderRadius: 0.5,
+                  p: 0.5,
+                  fontFamily: "monospace",
+                  fontSize: "0.7rem",
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word"
+                },
+                children: truncateText(spanData.output, 100)
+              }
+            )
+          ] })
+        ] }),
+        hasToolCalls && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Divider, { sx: { my: 1 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_material21.Typography,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              sx: { display: "block", mb: 0.25 },
+              children: "Tool Calls:"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_material21.Typography,
+            {
+              variant: "caption",
+              sx: {
+                display: "block",
+                backgroundColor: theme2.palette.action.hover,
+                borderRadius: 0.5,
+                p: 0.5,
+                fontFamily: "monospace",
+                fontSize: "0.7rem",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word"
+              },
+              children: truncateText(spanData.toolCalls, 80)
+            }
+          )
+        ] }),
+        hasAttributes && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_material21.Divider, { sx: { my: 1 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_material21.Typography,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              sx: { display: "block", mb: 0.5 },
+              children: "Attributes:"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_material21.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: [
+            Object.entries(parsedAttributes).slice(0, 5).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              import_material21.Chip,
+              {
+                label: `${key}: ${truncateText(String(value), 20)}`,
+                size: "small",
+                variant: "outlined",
+                sx: {
+                  height: 20,
+                  fontSize: "0.65rem",
+                  "& .MuiChip-label": { px: 0.75 }
+                }
+              },
+              key
+            )),
+            Object.keys(parsedAttributes).length > 5 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              import_material21.Chip,
+              {
+                label: `+${Object.keys(parsedAttributes).length - 5} more`,
+                size: "small",
+                sx: {
+                  height: 20,
+                  fontSize: "0.65rem",
+                  "& .MuiChip-label": { px: 0.75 }
+                }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/sections/traces/trace-drawer/trace-timeline/timeline-legend.tsx
+var import_react24 = require("react");
+var import_material22 = require("@mui/material");
+var import_styles9 = require("@mui/material/styles");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var NODE_TYPE_LABELS = {
+  llm: "LLM",
+  tool: "Tool",
+  agent: "Agent",
+  retrieval: "Retrieval",
+  router: "Router",
+  memory: "Memory",
+  default: "Other",
+  start: "Start",
+  end: "End"
 };
+var NODE_TYPE_ORDER = [
+  "llm",
+  "tool",
+  "agent",
+  "retrieval",
+  "router",
+  "memory",
+  "default"
+];
+var TimelineLegend = (0, import_react24.memo)(function TimelineLegend2({
+  typeBreakdown,
+  showCounts = false
+}) {
+  const theme2 = (0, import_styles9.useTheme)();
+  const visibleTypes = NODE_TYPE_ORDER.filter(
+    (type) => typeBreakdown[type] !== void 0 && typeBreakdown[type] > 0
+  );
+  if (visibleTypes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_material22.Box,
+    {
+      sx: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 1.5,
+        px: 1,
+        py: 0.5,
+        borderTop: `1px solid ${theme2.palette.divider}`,
+        backgroundColor: theme2.palette.background.paper
+      },
+      role: "legend",
+      "aria-label": "Span type legend",
+      children: visibleTypes.map((type) => {
+        const style4 = getNodeTypeStyle(type, theme2);
+        const count = typeBreakdown[type] || 0;
+        const label = NODE_TYPE_LABELS[type];
+        return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          import_material22.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                import_material22.Box,
+                {
+                  sx: {
+                    width: 12,
+                    height: 12,
+                    borderRadius: 0.5,
+                    backgroundColor: style4.color,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                import_material22.Typography,
+                {
+                  variant: "caption",
+                  sx: {
+                    color: theme2.palette.text.secondary,
+                    lineHeight: 1,
+                    whiteSpace: "nowrap"
+                  },
+                  children: [
+                    label,
+                    showCounts && count > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                      import_material22.Typography,
+                      {
+                        component: "span",
+                        variant: "caption",
+                        sx: {
+                          color: theme2.palette.text.disabled,
+                          ml: 0.5
+                        },
+                        children: [
+                          "(",
+                          count,
+                          ")"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          type
+        );
+      })
+    }
+  );
+});
 
-// src/sections/traces/trace-drawer/span-info/span-info-tabs.tsx
+// src/sections/traces/trace-drawer/trace-timeline/timeline-error-boundary.tsx
+var import_react25 = require("react");
 var import_material23 = require("@mui/material");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var TimelineErrorBoundary = class extends import_react25.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("Timeline rendering error:", error, errorInfo);
+  }
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        import_material23.Box,
+        {
+          sx: {
+            p: 3,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            minHeight: 200,
+            color: "text.secondary",
+            textAlign: "center"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material23.Typography, { variant: "body1", color: "error", gutterBottom: true, children: "Failed to render timeline" }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material23.Typography, { variant: "body2", sx: { mb: 2 }, children: "There was an error processing the span data." }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              import_material23.Button,
+              {
+                variant: "outlined",
+                size: "small",
+                onClick: this.handleRetry,
+                children: "Retry"
+              }
+            )
+          ]
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+// src/sections/traces/trace-drawer/trace-timeline/trace-timeline.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var { ROW_HEIGHT: ROW_HEIGHT2, RULER_HEIGHT: RULER_HEIGHT2, PADDING, LABEL_WIDTH } = TIMELINE_CONSTANTS;
+var VIRTUALIZATION_THRESHOLD = 100;
+var VIRTUALIZATION_OVERSCAN = 5;
+var TraceTimeline = (0, import_react26.memo)(function TraceTimeline2({
+  spans,
+  selectedSpanId,
+  onSelectSpan,
+  showRuler = true,
+  showLegend = true,
+  enableZoom = true,
+  enablePan = true,
+  sx,
+  isLoading = false
+}) {
+  const theme2 = (0, import_styles10.useTheme)();
+  const containerRef = (0, import_react26.useRef)(null);
+  const [containerWidth, setContainerWidth] = (0, import_react26.useState)(800);
+  const prevSelectedSpanIdRef = (0, import_react26.useRef)(void 0);
+  const [tooltipData, setTooltipData] = (0, import_react26.useState)({ layout: null, position: null });
+  const [scrollTop, setScrollTop] = (0, import_react26.useState)(0);
+  const [containerHeight, setContainerHeight] = (0, import_react26.useState)(400);
+  const { layouts, metrics, rulerTicks } = useTimelineLayout(spans);
+  const timelineWidth = Math.max(400, containerWidth - LABEL_WIDTH - PADDING * 2);
+  const contentHeight = layouts.length * ROW_HEIGHT2;
+  const totalHeight = contentHeight + (showRuler ? RULER_HEIGHT2 : 0) + PADDING * 2;
+  const {
+    viewState,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    onWheel,
+    panHandlers
+  } = useTimelineZoom(timelineWidth, contentHeight);
+  const { visibleLayouts } = (0, import_react26.useMemo)(() => {
+    if (layouts.length < VIRTUALIZATION_THRESHOLD) {
+      return {
+        visibleLayouts: layouts,
+        startIndex: 0,
+        endIndex: layouts.length
+      };
+    }
+    const headerOffset = showRuler ? RULER_HEIGHT2 : 0;
+    const firstVisibleRow = Math.floor(
+      (scrollTop - headerOffset - PADDING) / ROW_HEIGHT2
+    );
+    const visibleRowCount = Math.ceil(containerHeight / ROW_HEIGHT2);
+    const start = Math.max(0, firstVisibleRow - VIRTUALIZATION_OVERSCAN);
+    const end = Math.min(
+      layouts.length,
+      firstVisibleRow + visibleRowCount + VIRTUALIZATION_OVERSCAN
+    );
+    return {
+      visibleLayouts: layouts.slice(start, end),
+      startIndex: start,
+      endIndex: end
+    };
+  }, [layouts, scrollTop, containerHeight, showRuler]);
+  (0, import_react26.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+        setContainerHeight(entry.contentRect.height);
+      }
+    });
+    const handleScroll = () => {
+      setScrollTop(container.scrollTop);
+    };
+    resizeObserver.observe(container);
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    setContainerWidth(container.offsetWidth);
+    setContainerHeight(container.offsetHeight);
+    return () => {
+      resizeObserver.disconnect();
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  (0, import_react26.useEffect)(() => {
+    if (!selectedSpanId || selectedSpanId === prevSelectedSpanIdRef.current) {
+      prevSelectedSpanIdRef.current = selectedSpanId;
+      return;
+    }
+    prevSelectedSpanIdRef.current = selectedSpanId;
+    const container = containerRef.current;
+    if (!container) return;
+    const selectedLayout = layouts.find((l) => l.spanId === selectedSpanId);
+    if (!selectedLayout) return;
+    const spanY = PADDING + (showRuler ? RULER_HEIGHT2 : 0) + selectedLayout.row * ROW_HEIGHT2;
+    const containerRect = container.getBoundingClientRect();
+    const scrollTop2 = container.scrollTop;
+    const viewportTop = scrollTop2;
+    const viewportBottom = scrollTop2 + containerRect.height;
+    if (spanY < viewportTop || spanY + ROW_HEIGHT2 > viewportBottom) {
+      container.scrollTo({
+        top: spanY - containerRect.height / 2 + ROW_HEIGHT2 / 2,
+        behavior: "smooth"
+      });
+    }
+  }, [selectedSpanId, layouts, showRuler]);
+  const handleSelectSpan = (0, import_react26.useCallback)(
+    (spanId) => {
+      onSelectSpan?.(spanId);
+    },
+    [onSelectSpan]
+  );
+  const handleBarMouseEnter = (0, import_react26.useCallback)(
+    (layout, event) => {
+      setTooltipData({
+        layout,
+        position: { x: event.clientX, y: event.clientY }
+      });
+    },
+    []
+  );
+  const handleBarMouseLeave = (0, import_react26.useCallback)(() => {
+    setTooltipData({ layout: null, position: null });
+  }, []);
+  const [focusedIndex, setFocusedIndex] = (0, import_react26.useState)(-1);
+  const handleKeyDown = (0, import_react26.useCallback)(
+    (event) => {
+      if (layouts.length === 0) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setFocusedIndex(
+            (prev) => prev < layouts.length - 1 ? prev + 1 : prev
+          );
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setFocusedIndex((prev) => prev > 0 ? prev - 1 : 0);
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < layouts.length) {
+            const focusedLayout = layouts[focusedIndex];
+            if (focusedLayout) {
+              handleSelectSpan(focusedLayout.spanId);
+            }
+          }
+          break;
+        case "Home":
+          event.preventDefault();
+          setFocusedIndex(0);
+          break;
+        case "End":
+          event.preventDefault();
+          setFocusedIndex(layouts.length - 1);
+          break;
+      }
+    },
+    [layouts, focusedIndex, handleSelectSpan]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material24.Box, { sx: { p: 2, ...sx }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material24.Skeleton, { variant: "rectangular", height: 200 }) });
+  }
+  if (spans.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      import_material24.Box,
+      {
+        sx: {
+          p: 4,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "text.secondary",
+          ...sx
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material24.Typography, { variant: "body2", children: "No spans to display" })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TimelineErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_material24.Box,
+    {
+      ref: containerRef,
+      sx: {
+        width: "100%",
+        height: "100%",
+        minHeight: 0,
+        flex: 1,
+        overflow: "auto",
+        backgroundColor: theme2.palette.background.default,
+        position: "relative",
+        ...sx
+      },
+      children: [
+        enableZoom && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          import_material24.Box,
+          {
+            sx: {
+              position: "sticky",
+              top: 4,
+              right: 4,
+              zIndex: 10,
+              display: "flex",
+              gap: 0.5,
+              justifyContent: "flex-end",
+              pr: 1,
+              pt: 0.5
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material24.Tooltip, { title: "Zoom in", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_material24.IconButton,
+                {
+                  size: "small",
+                  onClick: zoomIn,
+                  sx: {
+                    backgroundColor: theme2.palette.background.paper,
+                    "&:hover": { backgroundColor: theme2.palette.action.hover },
+                    fontSize: 16,
+                    fontWeight: "bold"
+                  },
+                  "aria-label": "Zoom in",
+                  children: "+"
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material24.Tooltip, { title: "Zoom out", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_material24.IconButton,
+                {
+                  size: "small",
+                  onClick: zoomOut,
+                  sx: {
+                    backgroundColor: theme2.palette.background.paper,
+                    "&:hover": { backgroundColor: theme2.palette.action.hover },
+                    fontSize: 16,
+                    fontWeight: "bold"
+                  },
+                  "aria-label": "Zoom out",
+                  children: "\u2212"
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material24.Tooltip, { title: "Fit all", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_material24.IconButton,
+                {
+                  size: "small",
+                  onClick: resetZoom,
+                  sx: {
+                    backgroundColor: theme2.palette.background.paper,
+                    "&:hover": { backgroundColor: theme2.palette.action.hover },
+                    fontSize: 12
+                  },
+                  "aria-label": "Fit all",
+                  children: "\u22A1"
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          "svg",
+          {
+            width: containerWidth,
+            height: totalHeight,
+            viewBox: viewState.scale !== 1 ? `${viewState.viewBox.x} ${viewState.viewBox.y} ${viewState.viewBox.width} ${viewState.viewBox.height}` : void 0,
+            style: {
+              display: "block",
+              cursor: enablePan && viewState.isPanning ? "grabbing" : enablePan ? "grab" : "default",
+              outline: "none"
+            },
+            role: "grid",
+            "aria-label": "Trace timeline",
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+            onWheel: enableZoom ? onWheel : void 0,
+            ...enablePan ? panHandlers : {},
+            children: [
+              showRuler && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("g", { transform: `translate(${LABEL_WIDTH + PADDING}, ${PADDING})`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TimelineRuler, { ticks: rulerTicks, width: timelineWidth }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                "g",
+                {
+                  transform: `translate(${PADDING}, ${PADDING + (showRuler ? RULER_HEIGHT2 : 0)})`,
+                  children: visibleLayouts.map((layout) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    "text",
+                    {
+                      x: layout.depth * 12,
+                      y: layout.row * ROW_HEIGHT2 + ROW_HEIGHT2 / 2,
+                      dominantBaseline: "central",
+                      fontSize: 11,
+                      fill: theme2.palette.text.primary,
+                      style: {
+                        userSelect: "none",
+                        cursor: "pointer"
+                      },
+                      onClick: () => handleSelectSpan(layout.spanId),
+                      children: truncateLabel(layout.name, LABEL_WIDTH - layout.depth * 12 - 8)
+                    }
+                  ) }, `label-${layout.spanId}`))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                "g",
+                {
+                  transform: `translate(${LABEL_WIDTH + PADDING}, ${PADDING + (showRuler ? RULER_HEIGHT2 : 0)})`,
+                  children: [
+                    rulerTicks.filter((tick) => tick.isMajor).map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                      "line",
+                      {
+                        x1: tick.position * timelineWidth,
+                        y1: 0,
+                        x2: tick.position * timelineWidth,
+                        y2: contentHeight,
+                        stroke: theme2.palette.divider,
+                        strokeWidth: 0.5,
+                        opacity: 0.5
+                      },
+                      `grid-${index}`
+                    )),
+                    visibleLayouts.map((layout) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                      "rect",
+                      {
+                        x: 0,
+                        y: layout.row * ROW_HEIGHT2,
+                        width: timelineWidth,
+                        height: ROW_HEIGHT2,
+                        fill: layout.row % 2 === 0 ? "transparent" : theme2.palette.action.hover,
+                        opacity: 0.3
+                      },
+                      `row-bg-${layout.spanId}`
+                    )),
+                    visibleLayouts.map((layout) => {
+                      const layoutIndex = layouts.findIndex((l) => l.spanId === layout.spanId);
+                      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                        TimelineBar,
+                        {
+                          layout,
+                          isSelected: selectedSpanId === layout.spanId,
+                          isFocused: focusedIndex === layoutIndex,
+                          onSelect: handleSelectSpan,
+                          onMouseEnter: handleBarMouseEnter,
+                          onMouseLeave: handleBarMouseLeave,
+                          timelineWidth
+                        },
+                        layout.spanId
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        showLegend && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          TimelineLegend,
+          {
+            typeBreakdown: metrics.typeBreakdown,
+            showCounts: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          TimelineTooltip,
+          {
+            layout: tooltipData.layout,
+            position: tooltipData.position,
+            visible: tooltipData.layout !== null
+          }
+        )
+      ]
+    }
+  ) });
+});
+function truncateLabel(label, maxWidth2) {
+  const maxChars = Math.floor(maxWidth2 / 6);
+  if (label.length <= maxChars) {
+    return label;
+  }
+  return label.slice(0, maxChars - 3) + "...";
+}
+
+// src/sections/traces/trace-drawer/span-info/span-info-content.tsx
+var import_material25 = require("@mui/material");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var SpanInfoTitle = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material25.Typography, { variant: "h6", gutterBottom: true, children });
+};
+var SpanInfoContent = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_material25.Stack, { width: "100%", height: "100%", overflow: "hidden", children });
+};
+
+// src/sections/traces/trace-drawer/span-info/span-info-header.tsx
+var import_material26 = require("@mui/material");
+
+// src/sections/traces/trace-drawer/span-info/span-info-provider.tsx
+var import_react28 = require("react");
+
+// src/sections/traces/trace-drawer/span-info/hooks/use-span-info.ts
+var import_react27 = require("react");
+var useSpanInfo = ({ span }) => {
+  const [activeTab, setActiveTab] = (0, import_react27.useState)("attributes");
+  const [tabs, setTabs] = (0, import_react27.useState)([]);
+  const isLLMCall = (0, import_react27.useMemo)(() => {
+    return span?.data?.type === "GENERATION" || !!span?.data?.model;
+  }, [span?.data?.type, span?.data?.model]);
+  (0, import_react27.useEffect)(() => {
+    if (span?.id) {
+      const newTabs = [];
+      if (isLLMCall) {
+        newTabs.push({
+          value: "inputOutput",
+          label: "Input/Output"
+        });
+        setActiveTab("inputOutput");
+      } else {
+        setActiveTab("evaluation");
+      }
+      newTabs.push({
+        value: "evaluation",
+        label: `Evaluations`
+      });
+      newTabs.push({
+        value: "attributes",
+        label: "Attributes"
+      });
+      setTabs(newTabs);
+    }
+  }, [span?.id, isLLMCall]);
+  (0, import_react27.useEffect)(() => {
+    const isTabValid = activeTab === "inputOutput" && isLLMCall || activeTab === "evaluation" || activeTab === "attributes";
+    if (!isTabValid) {
+      if (isLLMCall) {
+        setActiveTab("inputOutput");
+      } else {
+        setActiveTab("evaluation");
+      }
+    }
+  }, [activeTab, isLLMCall]);
+  return {
+    activeTab,
+    setActiveTab,
+    tabs,
+    isLLMCall
+  };
+};
+
+// src/sections/traces/trace-drawer/span-info/span-info-provider.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var SpanInfoContext = (0, import_react28.createContext)(
+  void 0
+);
+var SpanInfoProvider = ({
+  children
+}) => {
+  const { selectedSpan } = useTraceDrawerContext();
+  const { activeTab, setActiveTab, tabs } = useSpanInfo({
+    span: selectedSpan || void 0
+  });
+  if (!selectedSpan) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    SpanInfoContext.Provider,
+    {
+      value: {
+        span: selectedSpan,
+        activeTab,
+        setActiveTab,
+        tabs
+      },
+      children
+    }
+  );
+};
+var useSpanInfoContext = () => {
+  const context = (0, import_react28.useContext)(SpanInfoContext);
+  if (!context) {
+    throw new Error("useSpanInfo must be used within a SpanInfoProvider");
+  }
+  return context;
+};
+
+// src/sections/traces/trace-drawer/span-info/span-info-header.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var SpanInfoHeader = () => {
+  const { span } = useSpanInfoContext();
+  const { t } = useTraceDrawerContext();
+  const modelName = span.data.model;
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    import_material26.Stack,
+    {
+      direction: "row",
+      spacing: 3,
+      sx: {
+        px: 2,
+        py: 1.5,
+        borderBottom: 1,
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_material26.Typography, { variant: "subtitle2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_material26.Typography, { component: "span", color: "text.secondary", variant: "subtitle2", children: [
+            t("spanId"),
+            ":"
+          ] }),
+          " ",
+          span.id
+        ] }),
+        modelName && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_material26.Typography, { variant: "subtitle2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            import_material26.Typography,
+            {
+              component: "span",
+              color: "text.secondary",
+              variant: "subtitle2",
+              children: [
+                t("modelName"),
+                ":"
+              ]
+            }
+          ),
+          " ",
+          modelName
+        ] })
+      ]
+    }
+  );
+};
+
+// src/sections/traces/trace-drawer/span-info/span-info-tabs.tsx
+var import_material27 = require("@mui/material");
 var import_lab = require("@mui/lab");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var SpanInfoTabs = ({ children }) => {
   const { activeTab, tabs, setActiveTab } = useSpanInfoContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_lab.TabContext, { value: activeTab, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_lab.TabContext, { value: activeTab, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       import_lab.TabList,
       {
         onChange: (_, value) => setActiveTab(value),
         scrollButtons: false,
         sx: { borderBottom: 1, borderColor: "divider" },
-        children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material23.Tab, { label: tab.label, value: tab.value }, tab.value))
+        children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material27.Tab, { label: tab.label, value: tab.value }, tab.value))
       }
     ),
     children
@@ -21312,7 +22925,7 @@ var SpanInfoTabs = ({ children }) => {
 var import_lab2 = require("@mui/lab");
 
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-attributes.ts
-var import_react20 = require("react");
+var import_react29 = require("react");
 
 // src/sections/traces/trace-drawer/span-info/tabs/attribute-transformer-registry.ts
 var AttributeTransformerRegistry = class {
@@ -21618,7 +23231,7 @@ var transformAttributes = (attributes, normalizedData) => {
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-attributes.ts
 var useSpanAttributes = () => {
   const { selectedSpan } = useTraceDrawerContext();
-  const rawAttributes = (0, import_react20.useMemo)(() => {
+  const rawAttributes = (0, import_react29.useMemo)(() => {
     if (!selectedSpan?.data?.attributes) return {};
     try {
       return JSON.parse(selectedSpan.data.attributes);
@@ -21626,7 +23239,7 @@ var useSpanAttributes = () => {
       return {};
     }
   }, [selectedSpan]);
-  const transformedAttributes = (0, import_react20.useMemo)(() => {
+  const transformedAttributes = (0, import_react29.useMemo)(() => {
     return transformAttributes(rawAttributes, selectedSpan?.data);
   }, [rawAttributes, selectedSpan?.data]);
   return {
@@ -21637,12 +23250,12 @@ var useSpanAttributes = () => {
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/attributes-tab/attributes-viewer.tsx
-var import_material24 = require("@mui/material");
+var import_material28 = require("@mui/material");
 var import_react_codemirror2 = __toESM(require("@uiw/react-codemirror"));
 var import_lang_json2 = require("@codemirror/lang-json");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var AttributesViewer = ({ attributes }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material24.Box, { position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-  import_material24.Box,
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var AttributesViewer = ({ attributes }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_material28.Box, { position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  import_material28.Box,
   {
     position: "absolute",
     left: 0,
@@ -21657,7 +23270,7 @@ var AttributesViewer = ({ attributes }) => /* @__PURE__ */ (0, import_jsx_runtim
         overflow: "hidden"
       }
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_react_codemirror2.default,
       {
         value: JSON.stringify(attributes, null, 2),
@@ -21680,11 +23293,11 @@ var AttributesViewer = ({ attributes }) => /* @__PURE__ */ (0, import_jsx_runtim
 ) });
 
 // src/sections/traces/trace-drawer/span-info/tabs/attributes-tab/attributes-tab.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var AttributesTab = () => {
   const { transformedAttributes } = useSpanAttributes();
   const Panel = ({ children }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       import_lab2.TabPanel,
       {
         value: "attributes",
@@ -21698,11 +23311,11 @@ var AttributesTab = () => {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AttributesViewer, { attributes: transformedAttributes }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AttributesViewer, { attributes: transformedAttributes }) });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-prompts.ts
-var import_react21 = require("react");
+var import_react30 = require("react");
 var extractPromptsFromSpan = (span) => {
   if (!span?.data?.input) return [];
   try {
@@ -21745,10 +23358,10 @@ var extractOutputFromSpan = (span) => {
 };
 var useSpanPrompts = () => {
   const { selectedSpan } = useTraceDrawerContext();
-  const prompts = (0, import_react21.useMemo)(() => {
+  const prompts = (0, import_react30.useMemo)(() => {
     return extractPromptsFromSpan(selectedSpan);
   }, [selectedSpan]);
-  const outputData = (0, import_react21.useMemo)(() => {
+  const outputData = (0, import_react30.useMemo)(() => {
     return extractOutputFromSpan(selectedSpan);
   }, [selectedSpan]);
   return {
@@ -21759,18 +23372,18 @@ var useSpanPrompts = () => {
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/input-output-tab/prompt-list.tsx
-var import_material27 = require("@mui/material");
+var import_material31 = require("@mui/material");
 
 // src/sections/traces/trace-drawer/span-info/tabs/span-prompt.tsx
-var import_material26 = require("@mui/material");
+var import_material30 = require("@mui/material");
 
 // src/sections/traces/trace-drawer/span-info/tabs/markdown-renderer.tsx
-var import_material25 = require("@mui/material");
+var import_material29 = require("@mui/material");
 var import_react_markdown = __toESM(require("react-markdown"));
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var CodeBlock = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_material25.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    import_material29.Box,
     {
       component: "pre",
       sx: {
@@ -21785,16 +23398,16 @@ var CodeBlock = ({ children }) => {
           display: "block"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("code", { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("code", { children })
     }
   );
 };
-var MarkdownRenderer = ({ content }) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var MarkdownRenderer = ({ content }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   import_react_markdown.default,
   {
     components: {
-      p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        import_material25.Typography,
+      p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        import_material29.Typography,
         {
           variant: "body2",
           sx: {
@@ -21804,10 +23417,10 @@ var MarkdownRenderer = ({ content }) => /* @__PURE__ */ (0, import_jsx_runtime45
           children
         }
       ),
-      pre: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CodeBlock, { children }),
+      pre: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CodeBlock, { children }),
       code: (props) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          import_material25.Typography,
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          import_material29.Typography,
           {
             component: "code",
             sx: {
@@ -21820,8 +23433,8 @@ var MarkdownRenderer = ({ content }) => /* @__PURE__ */ (0, import_jsx_runtime45
           }
         );
       },
-      strong: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        import_material25.Typography,
+      strong: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        import_material29.Typography,
         {
           component: "span",
           sx: {
@@ -21837,7 +23450,7 @@ var MarkdownRenderer = ({ content }) => /* @__PURE__ */ (0, import_jsx_runtime45
 );
 
 // src/sections/traces/trace-drawer/span-info/tabs/span-prompt.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var formatToolCall = (content) => {
   if (content.type === "tool-call") {
     return `**Tool Call**: \`${content.toolName}\`
@@ -21885,38 +23498,38 @@ var SpanPrompt = ({ prompt }) => {
         return role;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_material26.Accordion, { sx: { backgroundColor: "white" }, defaultExpanded: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-      import_material26.AccordionSummary,
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_material30.Accordion, { sx: { backgroundColor: "white" }, defaultExpanded: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      import_material30.AccordionSummary,
       {
-        expandIcon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Iconify, { icon: "mdi:chevron-down" }),
+        expandIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Iconify, { icon: "mdi:chevron-down" }),
         sx: {
           "& .MuiAccordionSummary-content": {
             alignItems: "center"
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_material26.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_material30.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             Iconify,
             {
               icon: prompt.role === "system" ? "mdi:cog" : prompt.role === "user" ? "mdi:account" : prompt.role === "assistant" ? "mdi:robot" : prompt.role === "tool" ? "mdi:tools" : "mdi:message"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_material26.Typography, { fontWeight: 700, variant: "body2", children: getTitle(prompt.role) })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_material30.Typography, { fontWeight: 700, variant: "body2", children: getTitle(prompt.role) })
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_material26.AccordionDetails, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MarkdownRenderer, { content }) })
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_material30.AccordionDetails, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(MarkdownRenderer, { content }) })
   ] });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/input-output-tab/prompt-list.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var PromptList = ({ prompts }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_material27.Box, { children: prompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SpanPrompt, { prompt }, index)) });
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var PromptList = ({ prompts }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_material31.Box, { children: prompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SpanPrompt, { prompt }, index)) });
 
 // src/sections/traces/trace-drawer/span-info/tabs/output-accordion.tsx
-var import_material28 = require("@mui/material");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_material32 = require("@mui/material");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var formatToolCalls = (toolCallsStr) => {
   if (!toolCallsStr) return null;
   try {
@@ -22000,46 +23613,46 @@ var OutputAccordion = ({ outputData }) => {
   const content = outputData?.text || toolCallsText || toolCallText || objectResponse;
   const isObjectResponse = !!outputData?.objectResponse;
   const isToolResponse = !!(outputData?.toolCall?.name || outputData?.toolCall?.toolName);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material28.Accordion, { sx: { backgroundColor: "white" }, defaultExpanded: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      import_material28.AccordionSummary,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_material32.Accordion, { sx: { backgroundColor: "white" }, defaultExpanded: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      import_material32.AccordionSummary,
       {
-        expandIcon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Iconify, { icon: "mdi:chevron-down" }),
+        expandIcon: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Iconify, { icon: "mdi:chevron-down" }),
         sx: {
           "& .MuiAccordionSummary-content": {
             alignItems: "center"
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_material28.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_material32.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             Iconify,
             {
               icon: isToolResponse ? "mdi:tools" : isObjectResponse ? "mdi:code-json" : "mdi:robot"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material28.Typography, { fontWeight: 700, variant: "body2", children: isToolResponse ? t("tool") : t("assistant") })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.Typography, { fontWeight: 700, variant: "body2", children: isToolResponse ? t("tool") : t("assistant") })
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material28.AccordionDetails, { children: content ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MarkdownRenderer, { content }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_material28.Typography, { variant: "body2", children: t("noOutput") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.AccordionDetails, { children: content ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(MarkdownRenderer, { content }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.Typography, { variant: "body2", children: t("noOutput") }) })
   ] });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/input-output-tab/output-display.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var OutputDisplay = ({ outputData }) => {
   if (!outputData) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(OutputAccordion, { outputData });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OutputAccordion, { outputData });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/input-output-tab/input-output-tab.tsx
 var import_lab3 = require("@mui/lab");
-var import_material29 = require("@mui/material");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_material33 = require("@mui/material");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var InputOutputTab = () => {
   const { prompts, outputData } = useSpanPrompts();
   const { span } = useSpanInfoContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     import_lab3.TabPanel,
     {
       sx: {
@@ -22052,9 +23665,9 @@ var InputOutputTab = () => {
       },
       value: "inputOutput",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PromptList, { prompts }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(OutputDisplay, { outputData }),
-        span.data.statusMessage && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_material29.Alert, { severity: "error", sx: { mt: 2 }, children: span.data.statusMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PromptList, { prompts }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OutputDisplay, { outputData }),
+        span.data.statusMessage && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_material33.Alert, { severity: "error", sx: { mt: 2 }, children: span.data.statusMessage })
       ]
     }
   );
@@ -22062,9 +23675,9 @@ var InputOutputTab = () => {
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-tab.tsx
 var import_lab4 = require("@mui/lab");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var EvaluationTab = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     import_lab4.TabPanel,
     {
       value: "evaluation",
@@ -22080,12 +23693,12 @@ var EvaluationTab = ({ children }) => {
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-list.tsx
-var import_material33 = require("@mui/material");
+var import_material37 = require("@mui/material");
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-item.tsx
-var import_material30 = require("@mui/material");
-var import_material31 = require("@mui/material");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_material34 = require("@mui/material");
+var import_material35 = require("@mui/material");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var EvaluationItem = ({
   name,
   score,
@@ -22093,13 +23706,13 @@ var EvaluationItem = ({
   reason,
   source
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_material31.TableRow, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_material30.TableCell, { children: name || "-" }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_material30.TableCell, { children: score }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_material30.TableCell, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_material30.TableCell, { sx: { whiteSpace: "pre-wrap" }, children: reason }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_material30.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      import_material30.Chip,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_material35.TableRow, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_material34.TableCell, { children: name || "-" }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_material34.TableCell, { children: score }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_material34.TableCell, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_material34.TableCell, { sx: { whiteSpace: "pre-wrap" }, children: reason }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_material34.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      import_material34.Chip,
       {
         size: "small",
         label: source || "eval",
@@ -22111,13 +23724,13 @@ var EvaluationItem = ({
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-provider.tsx
-var import_react22 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var EvaluationContext = (0, import_react22.createContext)(
+var import_react31 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var EvaluationContext = (0, import_react31.createContext)(
   void 0
 );
 var useEvaluationContext = () => {
-  const context = (0, import_react22.useContext)(EvaluationContext);
+  const context = (0, import_react31.useContext)(EvaluationContext);
   if (!context) {
     throw new Error(
       "useEvaluationContext must be used within EvaluationProvider"
@@ -22131,8 +23744,8 @@ var EvaluationProvider = ({
   scores,
   isLoading
 }) => {
-  const [openAddAnnotationDialog, setOpenAddAnnotationDialog] = (0, import_react22.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  const [openAddAnnotationDialog, setOpenAddAnnotationDialog] = (0, import_react31.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     EvaluationContext.Provider,
     {
       value: {
@@ -22148,67 +23761,67 @@ var EvaluationProvider = ({
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-skeleton.tsx
-var import_material32 = require("@mui/material");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_material36 = require("@mui/material");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var EvaluationSkeleton = () => {
   const { canAddAnnotation, isLoading, scores } = useEvaluationContext();
   const { t } = useTraceDrawerContext();
   if (!isLoading || scores.length > 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_material32.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-      import_material32.Stack,
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_material36.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+      import_material36.Stack,
       {
         direction: "row",
         justifyContent: "space-between",
         alignItems: "center",
         sx: { mb: 1 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.Box, {}),
-          canAddAnnotation && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.Skeleton, { variant: "rounded", width: 120, height: 32 })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.Box, {}),
+          canAddAnnotation && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.Skeleton, { variant: "rounded", width: 120, height: 32 })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableContainer, { component: import_material32.Paper, variant: "outlined", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_material32.Table, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_material32.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { children: t("evaluationName") }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { children: t("evaluationScore") }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { children: t("evaluationLabel") }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { children: t("evaluationReason") }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { width: 120, children: "Source" })
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableContainer, { component: import_material36.Paper, variant: "outlined", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_material36.Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_material36.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { children: t("evaluationName") }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { children: t("evaluationScore") }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { children: t("evaluationLabel") }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { children: t("evaluationReason") }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { width: 120, children: "Source" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableBody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_material32.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.Skeleton, { variant: "text", width: "60%" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.Skeleton, { variant: "text", width: "40%" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.Skeleton, { variant: "text", width: "50%" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.Skeleton, { variant: "text", width: "80%" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_material32.Skeleton, { variant: "text", width: "60%" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableBody, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_material36.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.Skeleton, { variant: "text", width: "60%" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.Skeleton, { variant: "text", width: "40%" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.Skeleton, { variant: "text", width: "50%" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.Skeleton, { variant: "text", width: "80%" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_material36.Skeleton, { variant: "text", width: "60%" }) })
       ] }, index)) })
     ] }) })
   ] });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-list.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var EvaluationList = ({
   emptyContentImgUrl
 }) => {
   const { scores, isLoading } = useEvaluationContext();
   const { t } = useTraceDrawerContext();
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(EvaluationSkeleton, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_material33.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_material33.TableContainer, { component: import_material33.Paper, variant: "outlined", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_material33.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_material33.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_material33.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_material33.TableCell, { children: t("evaluationName") }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_material33.TableCell, { children: t("evaluationScore") }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_material33.TableCell, { children: t("evaluationLabel") }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_material33.TableCell, { children: t("evaluationReason") }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_material33.TableCell, { width: 120, children: "Source" })
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(EvaluationSkeleton, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_material37.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_material37.TableContainer, { component: import_material37.Paper, variant: "outlined", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_material37.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_material37.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_material37.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_material37.TableCell, { children: t("evaluationName") }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_material37.TableCell, { children: t("evaluationScore") }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_material37.TableCell, { children: t("evaluationLabel") }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_material37.TableCell, { children: t("evaluationReason") }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_material37.TableCell, { width: 120, children: "Source" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_material33.TableBody, { children: [
-      scores.map((scoreData, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_material37.TableBody, { children: [
+      scores.map((scoreData, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         EvaluationItem,
         {
           name: scoreData.name,
@@ -22219,7 +23832,7 @@ var EvaluationList = ({
         },
         index
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         TableNoData,
         {
           title: t("noEvaluationData"),
@@ -22233,8 +23846,8 @@ var EvaluationList = ({
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/add-annotations.tsx
-var import_material34 = require("@mui/material");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_material38 = require("@mui/material");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var AddAnnotations = () => {
   const { t } = useTraceDrawerContext();
   const { setOpenAddAnnotationDialog, canAddAnnotation } = useEvaluationContext();
@@ -22244,16 +23857,16 @@ var AddAnnotations = () => {
   if (!canAddAnnotation) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_material34.Button, { size: "small", variant: "outlined", onClick: handleAddAnnotation, children: t("addAnnotation") }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_jsx_runtime62.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_material38.Button, { size: "small", variant: "outlined", onClick: handleAddAnnotation, children: t("addAnnotation") }) });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/add-annotation-dialog.tsx
-var import_material35 = require("@mui/material");
+var import_material39 = require("@mui/material");
 var import_lab5 = require("@mui/lab");
 var Yup = __toESM(require("yup"));
 var import_yup = require("@hookform/resolvers/yup");
 var import_react_hook_form7 = require("react-hook-form");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function AddAnnotationDialog({ saveAnnotation }) {
   const {
     setOpenAddAnnotationDialog,
@@ -22300,18 +23913,18 @@ function AddAnnotationDialog({ saveAnnotation }) {
       setOpenAddAnnotationDialog(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-    import_material35.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+    import_material39.Dialog,
     {
       open: openAddAnnotationDialog,
       onClose: handleClose,
       fullWidth: true,
       maxWidth: "sm",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_material35.DialogTitle, { children: t("addAnnotationTitle") }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(FormProvider, { methods, onSubmit, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_material35.DialogContent, { dividers: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_material35.Stack, { spacing: 2, sx: { mt: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material39.DialogTitle, { children: t("addAnnotationTitle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(FormProvider, { methods, onSubmit, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material39.DialogContent, { dividers: true, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_material39.Stack, { spacing: 2, sx: { mt: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               RHFTextField,
               {
                 name: "name",
@@ -22319,7 +23932,7 @@ function AddAnnotationDialog({ saveAnnotation }) {
                 placeholder: t("annotationNamePlaceholder")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               RHFTextField,
               {
                 name: "label",
@@ -22327,7 +23940,7 @@ function AddAnnotationDialog({ saveAnnotation }) {
                 placeholder: t("annotationLabelPlaceholder")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               RHFTextField,
               {
                 name: "score",
@@ -22336,7 +23949,7 @@ function AddAnnotationDialog({ saveAnnotation }) {
                 inputProps: { step: "0.01" }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               RHFTextField,
               {
                 name: "reason",
@@ -22347,9 +23960,9 @@ function AddAnnotationDialog({ saveAnnotation }) {
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_material35.DialogActions, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_material35.Button, { onClick: handleClose, disabled: isSubmitting, children: t("annotationCancel") }),
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_material39.DialogActions, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material39.Button, { onClick: handleClose, disabled: isSubmitting, children: t("annotationCancel") }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               import_lab5.LoadingButton,
               {
                 type: "submit",
@@ -22396,11 +24009,17 @@ function AddAnnotationDialog({ saveAnnotation }) {
   SpanInfoProvider,
   SpanInfoTabs,
   SpanInfoTitle,
+  TIMELINE_CONSTANTS,
   TableEmptyRows,
   TableHeadCustom,
   TablePaginationCustom,
   TableSelectedAction,
   TableSkeleton,
+  TimelineBar,
+  TimelineErrorBoundary,
+  TimelineLegend,
+  TimelineRuler,
+  TimelineTooltip,
   TraceDrawer,
   TraceDrawerCloseButton,
   TraceDrawerContainer,
@@ -22417,11 +24036,14 @@ function AddAnnotationDialog({ saveAnnotation }) {
   TraceLabel,
   TraceListItem,
   TraceListProvider,
+  TraceTimeline,
   TraceTree,
   TraceTreeItem,
   TracesList,
   applyDagreLayout,
   calculateBranchFamilies,
+  computeTimelineLayout,
+  formatDuration,
   getBranchColor,
   getDisplayName,
   getNodeTypeStyle,
@@ -22432,6 +24054,9 @@ function AddAnnotationDialog({ saveAnnotation }) {
   useEvaluationContext,
   useSpanInfoContext,
   useTable,
+  useTimelineLayout,
+  useTimelineViewPreference,
+  useTimelineZoom,
   useTraceDrawer,
   useTraceDrawerContext,
   useTraceListContext