@agentmark-ai/ui-components 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -206,7 +206,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;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment4;
+        exports.Fragment = Fragment5;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -3510,7 +3510,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,
@@ -3525,7 +3525,7 @@ function createBox(options = {}) {
       ...other
     });
   });
-  return Box24;
+  return Box29;
 }
 
 // ../../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js
@@ -3589,29 +3589,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;
     }
@@ -3825,14 +3825,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;
@@ -4096,7 +4096,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 {
@@ -4124,14 +4124,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
@@ -19924,7 +19924,7 @@ var TraceDrawerCloseButton = ({
   return /* @__PURE__ */ jsx26(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx26(Iconify, { icon: "eva:close-fill" }) });
 };
 var TraceDrawerHeader = ({ children }) => {
-  return /* @__PURE__ */ jsx26(Box9, { p: 2, children });
+  return /* @__PURE__ */ jsx26(Box9, { p: 2, sx: { flexShrink: 0, borderBottom: 1, borderColor: "divider" }, children });
 };
 
 // src/sections/traces/trace-drawer/trace-drawer-main.tsx
@@ -20047,22 +20047,33 @@ var TraceInfoSkeleton = () => /* @__PURE__ */ jsxs16(
 );
 
 // src/sections/traces/trace-drawer/trace-drawer-container.tsx
-import { Divider as Divider2, Stack as Stack8 } from "@mui/material";
+import { Box as Box12 } from "@mui/material";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var TraceDrawerContainer = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx30(Stack8, { height: "100%", divider: /* @__PURE__ */ jsx30(Divider2, {}), children });
+  return /* @__PURE__ */ jsx30(
+    Box12,
+    {
+      sx: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children
+    }
+  );
 };
 
 // src/sections/traces/trace-drawer/trace-tree/trace-tree.tsx
 import { SimpleTreeView } from "@mui/x-tree-view";
-import { Box as Box14, Stack as Stack10 } from "@mui/material";
+import { Box as Box15, Stack as Stack9 } from "@mui/material";
 
 // src/sections/traces/trace-drawer/trace-tree/trace-tree-item.tsx
 import * as React6 from "react";
 import { styled as styled4, useTheme as useTheme4, alpha as alpha3 } from "@mui/material/styles";
-import Box12 from "@mui/material/Box";
+import Box13 from "@mui/material/Box";
 import Typography6 from "@mui/material/Typography";
 import {
   TreeItemContent,
@@ -20161,7 +20172,7 @@ var TraceTreeItem = React6.forwardRef(function TraceTreeItem2({ hasChildren, ...
           })
         }),
         children: /* @__PURE__ */ jsxs17(
-          Box12,
+          Box13,
           {
             sx: {
               display: "flex",
@@ -20172,7 +20183,7 @@ var TraceTreeItem = React6.forwardRef(function TraceTreeItem2({ hasChildren, ...
             },
             children: [
               /* @__PURE__ */ jsx31(
-                Box12,
+                Box13,
                 {
                   component: LabelIcon,
                   color: "inherit",
@@ -20216,7 +20227,7 @@ var TraceTreeItem = React6.forwardRef(function TraceTreeItem2({ hasChildren, ...
 });
 
 // src/sections/traces/trace-drawer/trace-tree/trace-label.tsx
-import { Stack as Stack9, Typography as Typography7, Box as Box13, Tooltip } from "@mui/material";
+import { Stack as Stack8, Typography as Typography7, Box as Box14, Tooltip } from "@mui/material";
 import { useTheme as useTheme5 } from "@mui/material/styles";
 import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var TraceLabel = ({
@@ -20228,8 +20239,8 @@ var TraceLabel = ({
 }) => {
   const theme2 = useTheme5();
   const { t } = useTraceDrawerContext();
-  return /* @__PURE__ */ jsxs18(Stack9, { spacing: 0.3, children: [
-    /* @__PURE__ */ jsxs18(Stack9, { direction: "row", alignItems: "center", spacing: 1, children: [
+  return /* @__PURE__ */ jsxs18(Stack8, { spacing: 0.3, children: [
+    /* @__PURE__ */ jsxs18(Stack8, { direction: "row", alignItems: "center", spacing: 1, children: [
       /* @__PURE__ */ jsx32(
         Typography7,
         {
@@ -20238,7 +20249,7 @@ var TraceLabel = ({
           children: label
         }
       ),
-      /* @__PURE__ */ jsx32(Box13, { minWidth: 16, maxHeight: 16, children: /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx32(Box14, { minWidth: 16, maxHeight: 16, children: /* @__PURE__ */ jsx32(
         Iconify,
         {
           width: 16,
@@ -20247,7 +20258,7 @@ var TraceLabel = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs18(Stack9, { direction: "row", spacing: 0.5, flexWrap: "wrap", children: [
+    /* @__PURE__ */ jsxs18(Stack8, { direction: "row", spacing: 0.5, flexWrap: "wrap", children: [
       /* @__PURE__ */ jsx32(Tooltip, { title: t("latency"), children: /* @__PURE__ */ jsxs18(
         label_default,
         {
@@ -20281,7 +20292,7 @@ var renderTree = (node, findCostAndTokens) => {
     return null;
   }
   const { cost, tokens } = findCostAndTokens(node);
-  return /* @__PURE__ */ jsx33(Stack10, { children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx33(Stack9, { children: /* @__PURE__ */ jsx33(
     TraceTreeItem,
     {
       itemId: node.id,
@@ -20310,13 +20321,12 @@ var TraceTree = () => {
     setSelectedSpanId,
     traces,
     findCostAndTokens,
-    traceId,
-    treeHeight
+    traceId
   } = useTraceDrawerContext();
   const tree = useMemo3(() => {
     return spanTree.map((node) => renderTree(node, findCostAndTokens));
   }, [spanTree]);
-  return /* @__PURE__ */ jsx33(Box14, { sx: { height: treeHeight, overflowY: "auto", p: 2 }, children: selectedSpan?.id && /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx33(Box15, { sx: { height: "100%", overflowY: "auto", p: 2 }, children: selectedSpan?.id && /* @__PURE__ */ jsx33(
     SimpleTreeView,
     {
       expansionTrigger: "iconContainer",
@@ -20338,7 +20348,7 @@ var TraceTree = () => {
 };
 
 // src/sections/traces/trace-drawer/trace-graph/trace-graph-canvas.tsx
-import { Box as Box16, CircularProgress, useTheme as useTheme8 } from "@mui/material";
+import { Box as Box17, CircularProgress, useTheme as useTheme8 } from "@mui/material";
 import { useCallback as useCallback3, useEffect as useEffect3, useState as useState5, useMemo as useMemo6 } from "react";
 
 // src/sections/traces/trace-drawer/trace-graph/use-trace-graph.ts
@@ -20638,7 +20648,7 @@ import {
 // src/sections/traces/trace-drawer/trace-graph/trace-node.tsx
 import { memo } from "react";
 import { Handle, Position } from "@xyflow/react";
-import { Box as Box15, Typography as Typography8, useTheme as useTheme6 } from "@mui/material";
+import { Box as Box16, Typography as Typography8, useTheme as useTheme6 } from "@mui/material";
 import { Fragment as Fragment2, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 function TraceNodeComponent(props) {
   const { id, data } = props;
@@ -20667,7 +20677,7 @@ function TraceNodeComponent(props) {
         }
       ),
       /* @__PURE__ */ jsx34(
-        Box15,
+        Box16,
         {
           sx: {
             width: 40,
@@ -20711,7 +20721,7 @@ function TraceNodeComponent(props) {
       }
     ),
     /* @__PURE__ */ jsxs19(
-      Box15,
+      Box16,
       {
         sx: {
           minWidth: 120,
@@ -20743,7 +20753,7 @@ function TraceNodeComponent(props) {
               style: { flexShrink: 0 }
             }
           ),
-          /* @__PURE__ */ jsxs19(Box15, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs19(Box16, { sx: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ jsx34(
               Typography8,
               {
@@ -20989,7 +20999,7 @@ function TraceGraphCanvas({
   }, [focusedNodeIndex, nodes.length]);
   if (isLoading) {
     return /* @__PURE__ */ jsx35(
-      Box16,
+      Box17,
       {
         sx: {
           display: "flex",
@@ -21003,7 +21013,7 @@ function TraceGraphCanvas({
   }
   if (!nodes.length) {
     return /* @__PURE__ */ jsx35(
-      Box16,
+      Box17,
       {
         sx: {
           display: "flex",
@@ -21017,7 +21027,7 @@ function TraceGraphCanvas({
     );
   }
   return /* @__PURE__ */ jsx35(
-    Box16,
+    Box17,
     {
       sx: {
         flexGrow: 1,
@@ -21030,7 +21040,7 @@ function TraceGraphCanvas({
         minHeight: 0
       },
       children: /* @__PURE__ */ jsx35(
-        Box16,
+        Box17,
         {
           sx: { width: "100%", height: "100%" },
           tabIndex: 0,
@@ -21095,31 +21105,1622 @@ function TraceGraphCanvas({
   );
 }
 
+// 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/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
+        });
+        rowIndex++;
+        traverse(span.id, 1);
+      }
+    }
+  }
+  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
+      });
+    }
+    if (rulerTicks.length === 0 || rulerTicks[rulerTicks.length - 1].position < 1) {
+      rulerTicks.push({
+        position: 1,
+        label: formatDuration(totalDurationMs),
+        isMajor: true
+      });
+    }
+  }
+  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
+import { useMemo as useMemo7 } from "react";
+function useTimelineLayout(spans) {
+  return useMemo7(() => computeTimelineLayout(spans), [spans]);
+}
+
+// src/sections/traces/trace-drawer/trace-timeline/use-timeline-zoom.ts
+import { useState as useState6, useCallback as useCallback4, useRef } from "react";
+var { MIN_SCALE, MAX_SCALE } = TIMELINE_CONSTANTS;
+var ZOOM_FACTOR = 1.2;
+function useTimelineZoom(contentWidth = 1e3, contentHeight = 500) {
+  const [viewState, setViewState] = useState6(() => ({
+    viewBox: {
+      x: 0,
+      y: 0,
+      width: contentWidth,
+      height: contentHeight
+    },
+    scale: 1,
+    isPanning: false
+  }));
+  const panStartRef = useRef(
+    null
+  );
+  const clampScale = useCallback4((scale) => {
+    return Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
+  }, []);
+  const zoomIn = useCallback4(() => {
+    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 = useCallback4(() => {
+    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 = useCallback4(() => {
+    setViewState({
+      viewBox: {
+        x: 0,
+        y: 0,
+        width: contentWidth,
+        height: contentHeight
+      },
+      scale: 1,
+      isPanning: false
+    });
+  }, [contentWidth, contentHeight]);
+  const setScale = useCallback4(
+    (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 = useCallback4(
+    (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 = useCallback4((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 = useCallback4((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 = useCallback4(() => {
+    panStartRef.current = null;
+    setViewState((prev) => ({
+      ...prev,
+      isPanning: false
+    }));
+  }, []);
+  const onMouseLeave = useCallback4(() => {
+    if (panStartRef.current) {
+      panStartRef.current = null;
+      setViewState((prev) => ({
+        ...prev,
+        isPanning: false
+      }));
+    }
+  }, []);
+  return {
+    viewState,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    setScale,
+    onWheel,
+    panHandlers: {
+      onMouseDown,
+      onMouseMove,
+      onMouseUp,
+      onMouseLeave
+    }
+  };
+}
+
+// src/sections/traces/trace-drawer/trace-timeline/use-timeline-view-preference.ts
+import { useState as useState7, useCallback as useCallback5, useEffect as useEffect4 } from "react";
+var STORAGE_KEY = "agentmark-trace-view-preference";
+var DEFAULT_VIEW = "graph";
+function useTimelineViewPreference() {
+  const [view, setViewState] = useState7(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === "graph" || stored === "timeline") {
+          return stored;
+        }
+      } catch {
+      }
+    }
+    return DEFAULT_VIEW;
+  });
+  useEffect4(() => {
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem(STORAGE_KEY, view);
+      } catch {
+      }
+    }
+  }, [view]);
+  const setView = useCallback5((newView) => {
+    setViewState(newView);
+  }, []);
+  const toggleView = useCallback5(() => {
+    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/trace-timeline/trace-timeline.tsx
+import { memo as memo6, useRef as useRef2, useState as useState8, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo9 } from "react";
+import { Box as Box21, Skeleton as Skeleton3, Typography as Typography12, IconButton as IconButton3, Tooltip as Tooltip2 } from "@mui/material";
+import { useTheme as useTheme13 } from "@mui/material/styles";
+
+// src/sections/traces/trace-drawer/trace-timeline/timeline-bar.tsx
+import { memo as memo2 } from "react";
+import { useTheme as useTheme9 } from "@mui/material/styles";
+import { jsx as jsx36, jsxs as jsxs21 } from "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 = memo2(function TimelineBar2({
+  layout,
+  isSelected,
+  isFocused = false,
+  onSelect,
+  onMouseEnter,
+  onMouseLeave,
+  timelineWidth
+}) {
+  const theme2 = useTheme9();
+  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__ */ jsxs21(
+    "g",
+    {
+      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__ */ jsx36(
+          "rect",
+          {
+            x: xPixels,
+            y: barY,
+            width: widthPixels,
+            height: barHeight,
+            rx: 3,
+            ry: 3,
+            fill: barColor,
+            opacity,
+            stroke: strokeColor,
+            strokeWidth
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsx36(
+          "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__ */ jsx36(
+          "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
+import { memo as memo3 } from "react";
+import { useTheme as useTheme10 } from "@mui/material/styles";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+var { RULER_HEIGHT } = TIMELINE_CONSTANTS;
+var TimelineRuler = memo3(function TimelineRuler2({
+  ticks,
+  width: width2,
+  height: height2 = RULER_HEIGHT
+}) {
+  const theme2 = useTheme10();
+  const majorTickHeight = height2 * 0.6;
+  const minorTickHeight = height2 * 0.3;
+  return /* @__PURE__ */ jsxs22("g", { className: "timeline-ruler", role: "presentation", children: [
+    /* @__PURE__ */ jsx37(
+      "rect",
+      {
+        x: 0,
+        y: 0,
+        width: width2,
+        height: height2,
+        fill: theme2.palette.background.paper
+      }
+    ),
+    /* @__PURE__ */ jsx37(
+      "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__ */ jsxs22("g", { children: [
+        /* @__PURE__ */ jsx37(
+          "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__ */ jsx37(
+          "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
+import { memo as memo4, useMemo as useMemo8 } from "react";
+import { Box as Box18, Typography as Typography9, Paper, Divider as Divider2, Chip as Chip2 } from "@mui/material";
+import { useTheme as useTheme11 } from "@mui/material/styles";
+import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs23 } from "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 = memo4(function TimelineTooltip2({
+  layout,
+  position,
+  visible
+}) {
+  const theme2 = useTheme11();
+  const parsedAttributes = useMemo8(() => {
+    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__ */ jsxs23(
+    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__ */ jsxs23(Box18, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1 }, children: [
+          /* @__PURE__ */ jsx38(
+            Box18,
+            {
+              sx: {
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                backgroundColor: nodeStyle.color,
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx38(
+            Typography9,
+            {
+              variant: "subtitle2",
+              sx: {
+                fontWeight: 600,
+                wordBreak: "break-word",
+                color: theme2.palette.text.primary
+              },
+              children: layout.name
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs23(
+          Box18,
+          {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: "auto 1fr",
+              gap: 0.5,
+              rowGap: 0.25
+            },
+            children: [
+              /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "text.secondary", children: "Duration:" }),
+              /* @__PURE__ */ jsx38(Typography9, { variant: "caption", fontWeight: 500, children: formatDuration2(layout.durationMs) }),
+              /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "text.secondary", children: "Start:" }),
+              /* @__PURE__ */ jsx38(Typography9, { variant: "caption", children: formatStartTime(layout.startTimeMs) }),
+              /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "text.secondary", children: "% of trace:" }),
+              /* @__PURE__ */ jsxs23(Typography9, { variant: "caption", children: [
+                layout.percentOfTrace.toFixed(1),
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "text.secondary", children: "Type:" }),
+              /* @__PURE__ */ jsx38(Typography9, { variant: "caption", sx: { textTransform: "capitalize" }, children: layout.nodeType }),
+              layout.hasError && /* @__PURE__ */ jsxs23(Fragment3, { children: [
+                /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "error.main", children: "Status:" }),
+                /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "error.main", fontWeight: 500, children: spanData.statusMessage || "Error" })
+              ] })
+            ]
+          }
+        ),
+        hasModelInfo && /* @__PURE__ */ jsxs23(Fragment3, { children: [
+          /* @__PURE__ */ jsx38(Divider2, { sx: { my: 1 } }),
+          /* @__PURE__ */ jsxs23(
+            Box18,
+            {
+              sx: {
+                display: "grid",
+                gridTemplateColumns: "auto 1fr",
+                gap: 0.5,
+                rowGap: 0.25
+              },
+              children: [
+                spanData.model && /* @__PURE__ */ jsxs23(Fragment3, { children: [
+                  /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "text.secondary", children: "Model:" }),
+                  /* @__PURE__ */ jsx38(Typography9, { variant: "caption", fontWeight: 500, children: spanData.model })
+                ] }),
+                (spanData.inputTokens || spanData.outputTokens) && /* @__PURE__ */ jsxs23(Fragment3, { children: [
+                  /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "text.secondary", children: "Tokens:" }),
+                  /* @__PURE__ */ jsxs23(Typography9, { 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__ */ jsxs23(Fragment3, { children: [
+                  /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "text.secondary", children: "Reasoning:" }),
+                  /* @__PURE__ */ jsxs23(Typography9, { variant: "caption", children: [
+                    formatTokens(spanData.reasoningTokens),
+                    " tokens"
+                  ] })
+                ] }),
+                spanData.cost != null && spanData.cost > 0 && /* @__PURE__ */ jsxs23(Fragment3, { children: [
+                  /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "text.secondary", children: "Cost:" }),
+                  /* @__PURE__ */ jsx38(Typography9, { variant: "caption", fontWeight: 500, children: formatCost(spanData.cost) })
+                ] }),
+                spanData.finishReason && /* @__PURE__ */ jsxs23(Fragment3, { children: [
+                  /* @__PURE__ */ jsx38(Typography9, { variant: "caption", color: "text.secondary", children: "Finish:" }),
+                  /* @__PURE__ */ jsx38(Typography9, { variant: "caption", children: spanData.finishReason })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        hasInputOutput && /* @__PURE__ */ jsxs23(Fragment3, { children: [
+          /* @__PURE__ */ jsx38(Divider2, { sx: { my: 1 } }),
+          spanData.input && /* @__PURE__ */ jsxs23(Box18, { sx: { mb: 0.5 }, children: [
+            /* @__PURE__ */ jsx38(
+              Typography9,
+              {
+                variant: "caption",
+                color: "text.secondary",
+                sx: { display: "block", mb: 0.25 },
+                children: "Input:"
+              }
+            ),
+            /* @__PURE__ */ jsx38(
+              Typography9,
+              {
+                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__ */ jsxs23(Box18, { children: [
+            /* @__PURE__ */ jsx38(
+              Typography9,
+              {
+                variant: "caption",
+                color: "text.secondary",
+                sx: { display: "block", mb: 0.25 },
+                children: "Output:"
+              }
+            ),
+            /* @__PURE__ */ jsx38(
+              Typography9,
+              {
+                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__ */ jsxs23(Fragment3, { children: [
+          /* @__PURE__ */ jsx38(Divider2, { sx: { my: 1 } }),
+          /* @__PURE__ */ jsx38(
+            Typography9,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              sx: { display: "block", mb: 0.25 },
+              children: "Tool Calls:"
+            }
+          ),
+          /* @__PURE__ */ jsx38(
+            Typography9,
+            {
+              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__ */ jsxs23(Fragment3, { children: [
+          /* @__PURE__ */ jsx38(Divider2, { sx: { my: 1 } }),
+          /* @__PURE__ */ jsx38(
+            Typography9,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              sx: { display: "block", mb: 0.5 },
+              children: "Attributes:"
+            }
+          ),
+          /* @__PURE__ */ jsxs23(Box18, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: [
+            Object.entries(parsedAttributes).slice(0, 5).map(([key, value]) => /* @__PURE__ */ jsx38(
+              Chip2,
+              {
+                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__ */ jsx38(
+              Chip2,
+              {
+                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
+import { memo as memo5 } from "react";
+import { Box as Box19, Typography as Typography10 } from "@mui/material";
+import { useTheme as useTheme12 } from "@mui/material/styles";
+import { jsx as jsx39, jsxs as jsxs24 } from "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 = memo5(function TimelineLegend2({
+  typeBreakdown,
+  showCounts = false
+}) {
+  const theme2 = useTheme12();
+  const visibleTypes = NODE_TYPE_ORDER.filter(
+    (type) => typeBreakdown[type] !== void 0 && typeBreakdown[type] > 0
+  );
+  if (visibleTypes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx39(
+    Box19,
+    {
+      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__ */ jsxs24(
+          Box19,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsx39(
+                Box19,
+                {
+                  sx: {
+                    width: 12,
+                    height: 12,
+                    borderRadius: 0.5,
+                    backgroundColor: style4.color,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs24(
+                Typography10,
+                {
+                  variant: "caption",
+                  sx: {
+                    color: theme2.palette.text.secondary,
+                    lineHeight: 1,
+                    whiteSpace: "nowrap"
+                  },
+                  children: [
+                    label,
+                    showCounts && count > 0 && /* @__PURE__ */ jsxs24(
+                      Typography10,
+                      {
+                        component: "span",
+                        variant: "caption",
+                        sx: {
+                          color: theme2.palette.text.disabled,
+                          ml: 0.5
+                        },
+                        children: [
+                          "(",
+                          count,
+                          ")"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          type
+        );
+      })
+    }
+  );
+});
+
+// src/sections/traces/trace-drawer/trace-timeline/timeline-error-boundary.tsx
+import { Component } from "react";
+import { Box as Box20, Typography as Typography11, Button } from "@mui/material";
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+var TimelineErrorBoundary = class extends 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__ */ jsxs25(
+        Box20,
+        {
+          sx: {
+            p: 3,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            minHeight: 200,
+            color: "text.secondary",
+            textAlign: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx40(Typography11, { variant: "body1", color: "error", gutterBottom: true, children: "Failed to render timeline" }),
+            /* @__PURE__ */ jsx40(Typography11, { variant: "body2", sx: { mb: 2 }, children: "There was an error processing the span data." }),
+            /* @__PURE__ */ jsx40(
+              Button,
+              {
+                variant: "outlined",
+                size: "small",
+                onClick: this.handleRetry,
+                children: "Retry"
+              }
+            )
+          ]
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+// src/sections/traces/trace-drawer/trace-timeline/trace-timeline.tsx
+import { jsx as jsx41, jsxs as jsxs26 } from "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 = memo6(function TraceTimeline2({
+  spans,
+  selectedSpanId,
+  onSelectSpan,
+  showRuler = true,
+  showLegend = true,
+  enableZoom = true,
+  enablePan = true,
+  sx,
+  isLoading = false
+}) {
+  const theme2 = useTheme13();
+  const containerRef = useRef2(null);
+  const [containerWidth, setContainerWidth] = useState8(800);
+  const prevSelectedSpanIdRef = useRef2(void 0);
+  const [tooltipData, setTooltipData] = useState8({ layout: null, position: null });
+  const [scrollTop, setScrollTop] = useState8(0);
+  const [containerHeight, setContainerHeight] = useState8(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 } = useMemo9(() => {
+    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]);
+  useEffect5(() => {
+    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);
+    };
+  }, []);
+  useEffect5(() => {
+    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 = useCallback6(
+    (spanId) => {
+      onSelectSpan?.(spanId);
+    },
+    [onSelectSpan]
+  );
+  const handleBarMouseEnter = useCallback6(
+    (layout, event) => {
+      setTooltipData({
+        layout,
+        position: { x: event.clientX, y: event.clientY }
+      });
+    },
+    []
+  );
+  const handleBarMouseLeave = useCallback6(() => {
+    setTooltipData({ layout: null, position: null });
+  }, []);
+  const [focusedIndex, setFocusedIndex] = useState8(-1);
+  const handleKeyDown = useCallback6(
+    (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__ */ jsx41(Box21, { sx: { p: 2, ...sx }, children: /* @__PURE__ */ jsx41(Skeleton3, { variant: "rectangular", height: 200 }) });
+  }
+  if (spans.length === 0) {
+    return /* @__PURE__ */ jsx41(
+      Box21,
+      {
+        sx: {
+          p: 4,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "text.secondary",
+          ...sx
+        },
+        children: /* @__PURE__ */ jsx41(Typography12, { variant: "body2", children: "No spans to display" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx41(TimelineErrorBoundary, { children: /* @__PURE__ */ jsxs26(
+    Box21,
+    {
+      ref: containerRef,
+      sx: {
+        width: "100%",
+        height: "100%",
+        minHeight: 0,
+        flex: 1,
+        overflow: "auto",
+        backgroundColor: theme2.palette.background.default,
+        position: "relative",
+        ...sx
+      },
+      children: [
+        enableZoom && /* @__PURE__ */ jsxs26(
+          Box21,
+          {
+            sx: {
+              position: "sticky",
+              top: 4,
+              right: 4,
+              zIndex: 10,
+              display: "flex",
+              gap: 0.5,
+              justifyContent: "flex-end",
+              pr: 1,
+              pt: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsx41(Tooltip2, { title: "Zoom in", children: /* @__PURE__ */ jsx41(
+                IconButton3,
+                {
+                  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__ */ jsx41(Tooltip2, { title: "Zoom out", children: /* @__PURE__ */ jsx41(
+                IconButton3,
+                {
+                  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__ */ jsx41(Tooltip2, { title: "Fit all", children: /* @__PURE__ */ jsx41(
+                IconButton3,
+                {
+                  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__ */ jsxs26(
+          "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__ */ jsx41("g", { transform: `translate(${LABEL_WIDTH + PADDING}, ${PADDING})`, children: /* @__PURE__ */ jsx41(TimelineRuler, { ticks: rulerTicks, width: timelineWidth }) }),
+              /* @__PURE__ */ jsx41(
+                "g",
+                {
+                  transform: `translate(${PADDING}, ${PADDING + (showRuler ? RULER_HEIGHT2 : 0)})`,
+                  children: visibleLayouts.map((layout) => /* @__PURE__ */ jsx41("g", { children: /* @__PURE__ */ jsx41(
+                    "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__ */ jsxs26(
+                "g",
+                {
+                  transform: `translate(${LABEL_WIDTH + PADDING}, ${PADDING + (showRuler ? RULER_HEIGHT2 : 0)})`,
+                  children: [
+                    rulerTicks.filter((tick) => tick.isMajor).map((tick, index) => /* @__PURE__ */ jsx41(
+                      "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__ */ jsx41(
+                      "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__ */ jsx41(
+                        TimelineBar,
+                        {
+                          layout,
+                          isSelected: selectedSpanId === layout.spanId,
+                          isFocused: focusedIndex === layoutIndex,
+                          onSelect: handleSelectSpan,
+                          onMouseEnter: handleBarMouseEnter,
+                          onMouseLeave: handleBarMouseLeave,
+                          timelineWidth
+                        },
+                        layout.spanId
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx41(
+          TimelineLegend,
+          {
+            typeBreakdown: metrics.typeBreakdown,
+            showCounts: true
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          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
-import { Stack as Stack11, Typography as Typography9 } from "@mui/material";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { Stack as Stack10, Typography as Typography13 } from "@mui/material";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var SpanInfoTitle = ({ children }) => {
-  return /* @__PURE__ */ jsx36(Typography9, { variant: "h6", gutterBottom: true, children });
+  return /* @__PURE__ */ jsx42(Typography13, { variant: "h6", gutterBottom: true, children });
 };
 var SpanInfoContent = ({ children }) => {
-  return /* @__PURE__ */ jsx36(Stack11, { width: "100%", height: "100%", overflow: "hidden", children });
+  return /* @__PURE__ */ jsx42(Stack10, { width: "100%", height: "100%", overflow: "hidden", children });
 };
 
 // src/sections/traces/trace-drawer/span-info/span-info-header.tsx
-import { Typography as Typography10, Stack as Stack12 } from "@mui/material";
+import { Typography as Typography14, Stack as Stack11 } from "@mui/material";
 
 // src/sections/traces/trace-drawer/span-info/span-info-provider.tsx
 import { createContext as createContext3, useContext as useContext4 } from "react";
 
 // src/sections/traces/trace-drawer/span-info/hooks/use-span-info.ts
-import { useState as useState6, useEffect as useEffect4, useMemo as useMemo7 } from "react";
+import { useState as useState9, useEffect as useEffect6, useMemo as useMemo10 } from "react";
 var useSpanInfo = ({ span }) => {
-  const [activeTab, setActiveTab] = useState6("attributes");
-  const [tabs, setTabs] = useState6([]);
-  const isLLMCall = useMemo7(() => {
+  const [activeTab, setActiveTab] = useState9("attributes");
+  const [tabs, setTabs] = useState9([]);
+  const isLLMCall = useMemo10(() => {
     return span?.data?.type === "GENERATION" || !!span?.data?.model;
   }, [span?.data?.type, span?.data?.model]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (span?.id) {
       const newTabs = [];
       if (isLLMCall) {
@@ -21142,7 +22743,7 @@ var useSpanInfo = ({ span }) => {
       setTabs(newTabs);
     }
   }, [span?.id, isLLMCall]);
-  useEffect4(() => {
+  useEffect6(() => {
     const isTabValid = activeTab === "inputOutput" && isLLMCall || activeTab === "evaluation" || activeTab === "attributes";
     if (!isTabValid) {
       if (isLLMCall) {
@@ -21161,7 +22762,7 @@ var useSpanInfo = ({ span }) => {
 };
 
 // src/sections/traces/trace-drawer/span-info/span-info-provider.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var SpanInfoContext = createContext3(
   void 0
 );
@@ -21175,7 +22776,7 @@ var SpanInfoProvider = ({
   if (!selectedSpan) {
     return null;
   }
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx43(
     SpanInfoContext.Provider,
     {
       value: {
@@ -21197,13 +22798,13 @@ var useSpanInfoContext = () => {
 };
 
 // src/sections/traces/trace-drawer/span-info/span-info-header.tsx
-import { jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsxs as jsxs27 } from "react/jsx-runtime";
 var SpanInfoHeader = () => {
   const { span } = useSpanInfoContext();
   const { t } = useTraceDrawerContext();
   const modelName = span.data.model;
-  return /* @__PURE__ */ jsxs21(
-    Stack12,
+  return /* @__PURE__ */ jsxs27(
+    Stack11,
     {
       direction: "row",
       spacing: 3,
@@ -21214,17 +22815,17 @@ var SpanInfoHeader = () => {
         borderColor: "divider"
       },
       children: [
-        /* @__PURE__ */ jsxs21(Typography10, { variant: "subtitle2", children: [
-          /* @__PURE__ */ jsxs21(Typography10, { component: "span", color: "text.secondary", variant: "subtitle2", children: [
+        /* @__PURE__ */ jsxs27(Typography14, { variant: "subtitle2", children: [
+          /* @__PURE__ */ jsxs27(Typography14, { component: "span", color: "text.secondary", variant: "subtitle2", children: [
             t("spanId"),
             ":"
           ] }),
           " ",
           span.id
         ] }),
-        modelName && /* @__PURE__ */ jsxs21(Typography10, { variant: "subtitle2", children: [
-          /* @__PURE__ */ jsxs21(
-            Typography10,
+        modelName && /* @__PURE__ */ jsxs27(Typography14, { variant: "subtitle2", children: [
+          /* @__PURE__ */ jsxs27(
+            Typography14,
             {
               component: "span",
               color: "text.secondary",
@@ -21246,17 +22847,17 @@ var SpanInfoHeader = () => {
 // src/sections/traces/trace-drawer/span-info/span-info-tabs.tsx
 import { Tab } from "@mui/material";
 import { TabContext, TabList } from "@mui/lab";
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 var SpanInfoTabs = ({ children }) => {
   const { activeTab, tabs, setActiveTab } = useSpanInfoContext();
-  return /* @__PURE__ */ jsxs22(TabContext, { value: activeTab, children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs28(TabContext, { value: activeTab, children: [
+    /* @__PURE__ */ jsx44(
       TabList,
       {
         onChange: (_, value) => setActiveTab(value),
         scrollButtons: false,
         sx: { borderBottom: 1, borderColor: "divider" },
-        children: tabs.map((tab) => /* @__PURE__ */ jsx38(Tab, { label: tab.label, value: tab.value }, tab.value))
+        children: tabs.map((tab) => /* @__PURE__ */ jsx44(Tab, { label: tab.label, value: tab.value }, tab.value))
       }
     ),
     children
@@ -21267,7 +22868,7 @@ var SpanInfoTabs = ({ children }) => {
 import { TabPanel } from "@mui/lab";
 
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-attributes.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo11 } from "react";
 
 // src/sections/traces/trace-drawer/span-info/tabs/attribute-transformer-registry.ts
 var AttributeTransformerRegistry = class {
@@ -21573,7 +23174,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 = useMemo8(() => {
+  const rawAttributes = useMemo11(() => {
     if (!selectedSpan?.data?.attributes) return {};
     try {
       return JSON.parse(selectedSpan.data.attributes);
@@ -21581,7 +23182,7 @@ var useSpanAttributes = () => {
       return {};
     }
   }, [selectedSpan]);
-  const transformedAttributes = useMemo8(() => {
+  const transformedAttributes = useMemo11(() => {
     return transformAttributes(rawAttributes, selectedSpan?.data);
   }, [rawAttributes, selectedSpan?.data]);
   return {
@@ -21592,12 +23193,12 @@ var useSpanAttributes = () => {
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/attributes-tab/attributes-viewer.tsx
-import { Box as Box17 } from "@mui/material";
+import { Box as Box22 } from "@mui/material";
 import CodeMirror2 from "@uiw/react-codemirror";
 import { json as json2 } from "@codemirror/lang-json";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var AttributesViewer = ({ attributes }) => /* @__PURE__ */ jsx39(Box17, { position: "relative", children: /* @__PURE__ */ jsx39(
-  Box17,
+import { jsx as jsx45 } from "react/jsx-runtime";
+var AttributesViewer = ({ attributes }) => /* @__PURE__ */ jsx45(Box22, { position: "relative", children: /* @__PURE__ */ jsx45(
+  Box22,
   {
     position: "absolute",
     left: 0,
@@ -21612,7 +23213,7 @@ var AttributesViewer = ({ attributes }) => /* @__PURE__ */ jsx39(Box17, { positi
         overflow: "hidden"
       }
     },
-    children: /* @__PURE__ */ jsx39(
+    children: /* @__PURE__ */ jsx45(
       CodeMirror2,
       {
         value: JSON.stringify(attributes, null, 2),
@@ -21635,11 +23236,11 @@ var AttributesViewer = ({ attributes }) => /* @__PURE__ */ jsx39(Box17, { positi
 ) });
 
 // src/sections/traces/trace-drawer/span-info/tabs/attributes-tab/attributes-tab.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var AttributesTab = () => {
   const { transformedAttributes } = useSpanAttributes();
   const Panel = ({ children }) => {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx46(
       TabPanel,
       {
         value: "attributes",
@@ -21653,11 +23254,11 @@ var AttributesTab = () => {
       }
     );
   };
-  return /* @__PURE__ */ jsx40(Panel, { children: /* @__PURE__ */ jsx40(AttributesViewer, { attributes: transformedAttributes }) });
+  return /* @__PURE__ */ jsx46(Panel, { children: /* @__PURE__ */ jsx46(AttributesViewer, { attributes: transformedAttributes }) });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/hooks/use-span-prompts.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo12 } from "react";
 var extractPromptsFromSpan = (span) => {
   if (!span?.data?.input) return [];
   try {
@@ -21700,10 +23301,10 @@ var extractOutputFromSpan = (span) => {
 };
 var useSpanPrompts = () => {
   const { selectedSpan } = useTraceDrawerContext();
-  const prompts = useMemo9(() => {
+  const prompts = useMemo12(() => {
     return extractPromptsFromSpan(selectedSpan);
   }, [selectedSpan]);
-  const outputData = useMemo9(() => {
+  const outputData = useMemo12(() => {
     return extractOutputFromSpan(selectedSpan);
   }, [selectedSpan]);
   return {
@@ -21714,24 +23315,24 @@ var useSpanPrompts = () => {
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/input-output-tab/prompt-list.tsx
-import { Box as Box20 } from "@mui/material";
+import { Box as Box25 } from "@mui/material";
 
 // src/sections/traces/trace-drawer/span-info/tabs/span-prompt.tsx
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Typography as Typography12,
-  Box as Box19
+  Typography as Typography16,
+  Box as Box24
 } from "@mui/material";
 
 // src/sections/traces/trace-drawer/span-info/tabs/markdown-renderer.tsx
-import { Box as Box18, Typography as Typography11 } from "@mui/material";
+import { Box as Box23, Typography as Typography15 } from "@mui/material";
 import ReactMarkdown from "react-markdown";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var CodeBlock = ({ children }) => {
-  return /* @__PURE__ */ jsx41(
-    Box18,
+  return /* @__PURE__ */ jsx47(
+    Box23,
     {
       component: "pre",
       sx: {
@@ -21746,16 +23347,16 @@ var CodeBlock = ({ children }) => {
           display: "block"
         }
       },
-      children: /* @__PURE__ */ jsx41("code", { children })
+      children: /* @__PURE__ */ jsx47("code", { children })
     }
   );
 };
-var MarkdownRenderer = ({ content }) => /* @__PURE__ */ jsx41(
+var MarkdownRenderer = ({ content }) => /* @__PURE__ */ jsx47(
   ReactMarkdown,
   {
     components: {
-      p: ({ children }) => /* @__PURE__ */ jsx41(
-        Typography11,
+      p: ({ children }) => /* @__PURE__ */ jsx47(
+        Typography15,
         {
           variant: "body2",
           sx: {
@@ -21765,10 +23366,10 @@ var MarkdownRenderer = ({ content }) => /* @__PURE__ */ jsx41(
           children
         }
       ),
-      pre: ({ children }) => /* @__PURE__ */ jsx41(CodeBlock, { children }),
+      pre: ({ children }) => /* @__PURE__ */ jsx47(CodeBlock, { children }),
       code: (props) => {
-        return /* @__PURE__ */ jsx41(
-          Typography11,
+        return /* @__PURE__ */ jsx47(
+          Typography15,
           {
             component: "code",
             sx: {
@@ -21781,8 +23382,8 @@ var MarkdownRenderer = ({ content }) => /* @__PURE__ */ jsx41(
           }
         );
       },
-      strong: ({ children }) => /* @__PURE__ */ jsx41(
-        Typography11,
+      strong: ({ children }) => /* @__PURE__ */ jsx47(
+        Typography15,
         {
           component: "span",
           sx: {
@@ -21798,7 +23399,7 @@ var MarkdownRenderer = ({ content }) => /* @__PURE__ */ jsx41(
 );
 
 // src/sections/traces/trace-drawer/span-info/tabs/span-prompt.tsx
-import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
 var formatToolCall = (content) => {
   if (content.type === "tool-call") {
     return `**Tool Call**: \`${content.toolName}\`
@@ -21846,44 +23447,44 @@ var SpanPrompt = ({ prompt }) => {
         return role;
     }
   };
-  return /* @__PURE__ */ jsxs23(Accordion, { sx: { backgroundColor: "white" }, defaultExpanded: true, children: [
-    /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs29(Accordion, { sx: { backgroundColor: "white" }, defaultExpanded: true, children: [
+    /* @__PURE__ */ jsx48(
       AccordionSummary,
       {
-        expandIcon: /* @__PURE__ */ jsx42(Iconify, { icon: "mdi:chevron-down" }),
+        expandIcon: /* @__PURE__ */ jsx48(Iconify, { icon: "mdi:chevron-down" }),
         sx: {
           "& .MuiAccordionSummary-content": {
             alignItems: "center"
           }
         },
-        children: /* @__PURE__ */ jsxs23(Box19, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ jsx42(
+        children: /* @__PURE__ */ jsxs29(Box24, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx48(
             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__ */ jsx42(Typography12, { fontWeight: 700, variant: "body2", children: getTitle(prompt.role) })
+          /* @__PURE__ */ jsx48(Typography16, { fontWeight: 700, variant: "body2", children: getTitle(prompt.role) })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx42(AccordionDetails, { children: /* @__PURE__ */ jsx42(MarkdownRenderer, { content }) })
+    /* @__PURE__ */ jsx48(AccordionDetails, { children: /* @__PURE__ */ jsx48(MarkdownRenderer, { content }) })
   ] });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/input-output-tab/prompt-list.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
-var PromptList = ({ prompts }) => /* @__PURE__ */ jsx43(Box20, { children: prompts.map((prompt, index) => /* @__PURE__ */ jsx43(SpanPrompt, { prompt }, index)) });
+import { jsx as jsx49 } from "react/jsx-runtime";
+var PromptList = ({ prompts }) => /* @__PURE__ */ jsx49(Box25, { children: prompts.map((prompt, index) => /* @__PURE__ */ jsx49(SpanPrompt, { prompt }, index)) });
 
 // src/sections/traces/trace-drawer/span-info/tabs/output-accordion.tsx
 import {
   Accordion as Accordion2,
   AccordionDetails as AccordionDetails2,
   AccordionSummary as AccordionSummary2,
-  Typography as Typography13,
-  Box as Box21
+  Typography as Typography17,
+  Box as Box26
 } from "@mui/material";
-import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
 var formatToolCalls = (toolCallsStr) => {
   if (!toolCallsStr) return null;
   try {
@@ -21967,46 +23568,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__ */ jsxs24(Accordion2, { sx: { backgroundColor: "white" }, defaultExpanded: true, children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs30(Accordion2, { sx: { backgroundColor: "white" }, defaultExpanded: true, children: [
+    /* @__PURE__ */ jsx50(
       AccordionSummary2,
       {
-        expandIcon: /* @__PURE__ */ jsx44(Iconify, { icon: "mdi:chevron-down" }),
+        expandIcon: /* @__PURE__ */ jsx50(Iconify, { icon: "mdi:chevron-down" }),
         sx: {
           "& .MuiAccordionSummary-content": {
             alignItems: "center"
           }
         },
-        children: /* @__PURE__ */ jsxs24(Box21, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ jsx44(
+        children: /* @__PURE__ */ jsxs30(Box26, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx50(
             Iconify,
             {
               icon: isToolResponse ? "mdi:tools" : isObjectResponse ? "mdi:code-json" : "mdi:robot"
             }
           ),
-          /* @__PURE__ */ jsx44(Typography13, { fontWeight: 700, variant: "body2", children: isToolResponse ? t("tool") : t("assistant") })
+          /* @__PURE__ */ jsx50(Typography17, { fontWeight: 700, variant: "body2", children: isToolResponse ? t("tool") : t("assistant") })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx44(AccordionDetails2, { children: content ? /* @__PURE__ */ jsx44(MarkdownRenderer, { content }) : /* @__PURE__ */ jsx44(Typography13, { variant: "body2", children: t("noOutput") }) })
+    /* @__PURE__ */ jsx50(AccordionDetails2, { children: content ? /* @__PURE__ */ jsx50(MarkdownRenderer, { content }) : /* @__PURE__ */ jsx50(Typography17, { variant: "body2", children: t("noOutput") }) })
   ] });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/input-output-tab/output-display.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var OutputDisplay = ({ outputData }) => {
   if (!outputData) return null;
-  return /* @__PURE__ */ jsx45(OutputAccordion, { outputData });
+  return /* @__PURE__ */ jsx51(OutputAccordion, { outputData });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/input-output-tab/input-output-tab.tsx
 import { TabPanel as TabPanel2 } from "@mui/lab";
 import { Alert } from "@mui/material";
-import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 var InputOutputTab = () => {
   const { prompts, outputData } = useSpanPrompts();
   const { span } = useSpanInfoContext();
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs31(
     TabPanel2,
     {
       sx: {
@@ -22019,9 +23620,9 @@ var InputOutputTab = () => {
       },
       value: "inputOutput",
       children: [
-        /* @__PURE__ */ jsx46(PromptList, { prompts }),
-        /* @__PURE__ */ jsx46(OutputDisplay, { outputData }),
-        span.data.statusMessage && /* @__PURE__ */ jsx46(Alert, { severity: "error", sx: { mt: 2 }, children: span.data.statusMessage })
+        /* @__PURE__ */ jsx52(PromptList, { prompts }),
+        /* @__PURE__ */ jsx52(OutputDisplay, { outputData }),
+        span.data.statusMessage && /* @__PURE__ */ jsx52(Alert, { severity: "error", sx: { mt: 2 }, children: span.data.statusMessage })
       ]
     }
   );
@@ -22029,9 +23630,9 @@ var InputOutputTab = () => {
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-tab.tsx
 import { TabPanel as TabPanel3 } from "@mui/lab";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var EvaluationTab = ({ children }) => {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx53(
     TabPanel3,
     {
       value: "evaluation",
@@ -22048,20 +23649,20 @@ var EvaluationTab = ({ children }) => {
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-list.tsx
 import {
-  Box as Box23,
+  Box as Box28,
   Table as Table4,
   TableBody as TableBody4,
   TableCell as TableCell9,
   TableContainer as TableContainer4,
   TableHead as TableHead3,
   TableRow as TableRow9,
-  Paper as Paper2
+  Paper as Paper3
 } from "@mui/material";
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-item.tsx
-import { Chip as Chip2, TableCell as TableCell7 } from "@mui/material";
+import { Chip as Chip3, TableCell as TableCell7 } from "@mui/material";
 import { TableRow as TableRow7 } from "@mui/material";
-import { jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
 var EvaluationItem = ({
   name,
   score,
@@ -22069,13 +23670,13 @@ var EvaluationItem = ({
   reason,
   source
 }) => {
-  return /* @__PURE__ */ jsxs26(TableRow7, { children: [
-    /* @__PURE__ */ jsx48(TableCell7, { children: name || "-" }),
-    /* @__PURE__ */ jsx48(TableCell7, { children: score }),
-    /* @__PURE__ */ jsx48(TableCell7, { children: label }),
-    /* @__PURE__ */ jsx48(TableCell7, { sx: { whiteSpace: "pre-wrap" }, children: reason }),
-    /* @__PURE__ */ jsx48(TableCell7, { children: /* @__PURE__ */ jsx48(
-      Chip2,
+  return /* @__PURE__ */ jsxs32(TableRow7, { children: [
+    /* @__PURE__ */ jsx54(TableCell7, { children: name || "-" }),
+    /* @__PURE__ */ jsx54(TableCell7, { children: score }),
+    /* @__PURE__ */ jsx54(TableCell7, { children: label }),
+    /* @__PURE__ */ jsx54(TableCell7, { sx: { whiteSpace: "pre-wrap" }, children: reason }),
+    /* @__PURE__ */ jsx54(TableCell7, { children: /* @__PURE__ */ jsx54(
+      Chip3,
       {
         size: "small",
         label: source || "eval",
@@ -22090,9 +23691,9 @@ var EvaluationItem = ({
 import {
   createContext as createContext4,
   useContext as useContext5,
-  useState as useState7
+  useState as useState10
 } from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var EvaluationContext = createContext4(
   void 0
 );
@@ -22111,8 +23712,8 @@ var EvaluationProvider = ({
   scores,
   isLoading
 }) => {
-  const [openAddAnnotationDialog, setOpenAddAnnotationDialog] = useState7(false);
-  return /* @__PURE__ */ jsx49(
+  const [openAddAnnotationDialog, setOpenAddAnnotationDialog] = useState10(false);
+  return /* @__PURE__ */ jsx55(
     EvaluationContext.Provider,
     {
       value: {
@@ -22129,77 +23730,77 @@ var EvaluationProvider = ({
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-skeleton.tsx
 import {
-  Box as Box22,
+  Box as Box27,
   Table as Table3,
   TableBody as TableBody3,
   TableCell as TableCell8,
   TableContainer as TableContainer3,
   TableHead as TableHead2,
   TableRow as TableRow8,
-  Paper,
-  Stack as Stack13,
-  Skeleton as Skeleton3
+  Paper as Paper2,
+  Stack as Stack12,
+  Skeleton as Skeleton4
 } from "@mui/material";
-import { jsx as jsx50, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs33 } from "react/jsx-runtime";
 var EvaluationSkeleton = () => {
   const { canAddAnnotation, isLoading, scores } = useEvaluationContext();
   const { t } = useTraceDrawerContext();
   if (!isLoading || scores.length > 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs27(Box22, { children: [
-    /* @__PURE__ */ jsxs27(
-      Stack13,
+  return /* @__PURE__ */ jsxs33(Box27, { children: [
+    /* @__PURE__ */ jsxs33(
+      Stack12,
       {
         direction: "row",
         justifyContent: "space-between",
         alignItems: "center",
         sx: { mb: 1 },
         children: [
-          /* @__PURE__ */ jsx50(Box22, {}),
-          canAddAnnotation && /* @__PURE__ */ jsx50(Skeleton3, { variant: "rounded", width: 120, height: 32 })
+          /* @__PURE__ */ jsx56(Box27, {}),
+          canAddAnnotation && /* @__PURE__ */ jsx56(Skeleton4, { variant: "rounded", width: 120, height: 32 })
         ]
       }
     ),
-    /* @__PURE__ */ jsx50(TableContainer3, { component: Paper, variant: "outlined", children: /* @__PURE__ */ jsxs27(Table3, { children: [
-      /* @__PURE__ */ jsx50(TableHead2, { children: /* @__PURE__ */ jsxs27(TableRow8, { children: [
-        /* @__PURE__ */ jsx50(TableCell8, { children: t("evaluationName") }),
-        /* @__PURE__ */ jsx50(TableCell8, { children: t("evaluationScore") }),
-        /* @__PURE__ */ jsx50(TableCell8, { children: t("evaluationLabel") }),
-        /* @__PURE__ */ jsx50(TableCell8, { children: t("evaluationReason") }),
-        /* @__PURE__ */ jsx50(TableCell8, { width: 120, children: "Source" })
+    /* @__PURE__ */ jsx56(TableContainer3, { component: Paper2, variant: "outlined", children: /* @__PURE__ */ jsxs33(Table3, { children: [
+      /* @__PURE__ */ jsx56(TableHead2, { children: /* @__PURE__ */ jsxs33(TableRow8, { children: [
+        /* @__PURE__ */ jsx56(TableCell8, { children: t("evaluationName") }),
+        /* @__PURE__ */ jsx56(TableCell8, { children: t("evaluationScore") }),
+        /* @__PURE__ */ jsx56(TableCell8, { children: t("evaluationLabel") }),
+        /* @__PURE__ */ jsx56(TableCell8, { children: t("evaluationReason") }),
+        /* @__PURE__ */ jsx56(TableCell8, { width: 120, children: "Source" })
       ] }) }),
-      /* @__PURE__ */ jsx50(TableBody3, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs27(TableRow8, { children: [
-        /* @__PURE__ */ jsx50(TableCell8, { children: /* @__PURE__ */ jsx50(Skeleton3, { variant: "text", width: "60%" }) }),
-        /* @__PURE__ */ jsx50(TableCell8, { children: /* @__PURE__ */ jsx50(Skeleton3, { variant: "text", width: "40%" }) }),
-        /* @__PURE__ */ jsx50(TableCell8, { children: /* @__PURE__ */ jsx50(Skeleton3, { variant: "text", width: "50%" }) }),
-        /* @__PURE__ */ jsx50(TableCell8, { children: /* @__PURE__ */ jsx50(Skeleton3, { variant: "text", width: "80%" }) }),
-        /* @__PURE__ */ jsx50(TableCell8, { children: /* @__PURE__ */ jsx50(Skeleton3, { variant: "text", width: "60%" }) })
+      /* @__PURE__ */ jsx56(TableBody3, { children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs33(TableRow8, { children: [
+        /* @__PURE__ */ jsx56(TableCell8, { children: /* @__PURE__ */ jsx56(Skeleton4, { variant: "text", width: "60%" }) }),
+        /* @__PURE__ */ jsx56(TableCell8, { children: /* @__PURE__ */ jsx56(Skeleton4, { variant: "text", width: "40%" }) }),
+        /* @__PURE__ */ jsx56(TableCell8, { children: /* @__PURE__ */ jsx56(Skeleton4, { variant: "text", width: "50%" }) }),
+        /* @__PURE__ */ jsx56(TableCell8, { children: /* @__PURE__ */ jsx56(Skeleton4, { variant: "text", width: "80%" }) }),
+        /* @__PURE__ */ jsx56(TableCell8, { children: /* @__PURE__ */ jsx56(Skeleton4, { variant: "text", width: "60%" }) })
       ] }, index)) })
     ] }) })
   ] });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/evaluation-list.tsx
-import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
 var EvaluationList = ({
   emptyContentImgUrl
 }) => {
   const { scores, isLoading } = useEvaluationContext();
   const { t } = useTraceDrawerContext();
   if (isLoading) {
-    return /* @__PURE__ */ jsx51(EvaluationSkeleton, {});
-  }
-  return /* @__PURE__ */ jsx51(Box23, { children: /* @__PURE__ */ jsx51(TableContainer4, { component: Paper2, variant: "outlined", children: /* @__PURE__ */ jsxs28(Table4, { children: [
-    /* @__PURE__ */ jsx51(TableHead3, { children: /* @__PURE__ */ jsxs28(TableRow9, { children: [
-      /* @__PURE__ */ jsx51(TableCell9, { children: t("evaluationName") }),
-      /* @__PURE__ */ jsx51(TableCell9, { children: t("evaluationScore") }),
-      /* @__PURE__ */ jsx51(TableCell9, { children: t("evaluationLabel") }),
-      /* @__PURE__ */ jsx51(TableCell9, { children: t("evaluationReason") }),
-      /* @__PURE__ */ jsx51(TableCell9, { width: 120, children: "Source" })
+    return /* @__PURE__ */ jsx57(EvaluationSkeleton, {});
+  }
+  return /* @__PURE__ */ jsx57(Box28, { children: /* @__PURE__ */ jsx57(TableContainer4, { component: Paper3, variant: "outlined", children: /* @__PURE__ */ jsxs34(Table4, { children: [
+    /* @__PURE__ */ jsx57(TableHead3, { children: /* @__PURE__ */ jsxs34(TableRow9, { children: [
+      /* @__PURE__ */ jsx57(TableCell9, { children: t("evaluationName") }),
+      /* @__PURE__ */ jsx57(TableCell9, { children: t("evaluationScore") }),
+      /* @__PURE__ */ jsx57(TableCell9, { children: t("evaluationLabel") }),
+      /* @__PURE__ */ jsx57(TableCell9, { children: t("evaluationReason") }),
+      /* @__PURE__ */ jsx57(TableCell9, { width: 120, children: "Source" })
     ] }) }),
-    /* @__PURE__ */ jsxs28(TableBody4, { children: [
-      scores.map((scoreData, index) => /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsxs34(TableBody4, { children: [
+      scores.map((scoreData, index) => /* @__PURE__ */ jsx57(
         EvaluationItem,
         {
           name: scoreData.name,
@@ -22210,7 +23811,7 @@ var EvaluationList = ({
         },
         index
       )),
-      /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx57(
         TableNoData,
         {
           title: t("noEvaluationData"),
@@ -22224,8 +23825,8 @@ var EvaluationList = ({
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/add-annotations.tsx
-import { Button } from "@mui/material";
-import { Fragment as Fragment3, jsx as jsx52 } from "react/jsx-runtime";
+import { Button as Button2 } from "@mui/material";
+import { Fragment as Fragment4, jsx as jsx58 } from "react/jsx-runtime";
 var AddAnnotations = () => {
   const { t } = useTraceDrawerContext();
   const { setOpenAddAnnotationDialog, canAddAnnotation } = useEvaluationContext();
@@ -22235,7 +23836,7 @@ var AddAnnotations = () => {
   if (!canAddAnnotation) {
     return null;
   }
-  return /* @__PURE__ */ jsx52(Fragment3, { children: /* @__PURE__ */ jsx52(Button, { size: "small", variant: "outlined", onClick: handleAddAnnotation, children: t("addAnnotation") }) });
+  return /* @__PURE__ */ jsx58(Fragment4, { children: /* @__PURE__ */ jsx58(Button2, { size: "small", variant: "outlined", onClick: handleAddAnnotation, children: t("addAnnotation") }) });
 };
 
 // src/sections/traces/trace-drawer/span-info/tabs/evaluation-tab/add-annotation-dialog.tsx
@@ -22244,14 +23845,14 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
-  Button as Button2,
-  Stack as Stack14
+  Button as Button3,
+  Stack as Stack13
 } from "@mui/material";
 import { LoadingButton } from "@mui/lab";
 import * as Yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
-import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs35 } from "react/jsx-runtime";
 function AddAnnotationDialog({ saveAnnotation }) {
   const {
     setOpenAddAnnotationDialog,
@@ -22298,7 +23899,7 @@ function AddAnnotationDialog({ saveAnnotation }) {
       setOpenAddAnnotationDialog(false);
     }
   };
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs35(
     Dialog,
     {
       open: openAddAnnotationDialog,
@@ -22306,10 +23907,10 @@ function AddAnnotationDialog({ saveAnnotation }) {
       fullWidth: true,
       maxWidth: "sm",
       children: [
-        /* @__PURE__ */ jsx53(DialogTitle, { children: t("addAnnotationTitle") }),
-        /* @__PURE__ */ jsxs29(FormProvider, { methods, onSubmit, children: [
-          /* @__PURE__ */ jsx53(DialogContent, { dividers: true, children: /* @__PURE__ */ jsxs29(Stack14, { spacing: 2, sx: { mt: 1 }, children: [
-            /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx59(DialogTitle, { children: t("addAnnotationTitle") }),
+        /* @__PURE__ */ jsxs35(FormProvider, { methods, onSubmit, children: [
+          /* @__PURE__ */ jsx59(DialogContent, { dividers: true, children: /* @__PURE__ */ jsxs35(Stack13, { spacing: 2, sx: { mt: 1 }, children: [
+            /* @__PURE__ */ jsx59(
               RHFTextField,
               {
                 name: "name",
@@ -22317,7 +23918,7 @@ function AddAnnotationDialog({ saveAnnotation }) {
                 placeholder: t("annotationNamePlaceholder")
               }
             ),
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx59(
               RHFTextField,
               {
                 name: "label",
@@ -22325,7 +23926,7 @@ function AddAnnotationDialog({ saveAnnotation }) {
                 placeholder: t("annotationLabelPlaceholder")
               }
             ),
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx59(
               RHFTextField,
               {
                 name: "score",
@@ -22334,7 +23935,7 @@ function AddAnnotationDialog({ saveAnnotation }) {
                 inputProps: { step: "0.01" }
               }
             ),
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx59(
               RHFTextField,
               {
                 name: "reason",
@@ -22345,9 +23946,9 @@ function AddAnnotationDialog({ saveAnnotation }) {
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsxs29(DialogActions, { children: [
-            /* @__PURE__ */ jsx53(Button2, { onClick: handleClose, disabled: isSubmitting, children: t("annotationCancel") }),
-            /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsxs35(DialogActions, { children: [
+            /* @__PURE__ */ jsx59(Button3, { onClick: handleClose, disabled: isSubmitting, children: t("annotationCancel") }),
+            /* @__PURE__ */ jsx59(
               LoadingButton,
               {
                 type: "submit",
@@ -22393,11 +23994,17 @@ export {
   SpanInfoProvider,
   SpanInfoTabs,
   SpanInfoTitle,
+  TIMELINE_CONSTANTS,
   TableEmptyRows,
   TableHeadCustom,
   TablePaginationCustom,
   TableSelectedAction,
   TableSkeleton,
+  TimelineBar,
+  TimelineErrorBoundary,
+  TimelineLegend,
+  TimelineRuler,
+  TimelineTooltip,
   TraceDrawer,
   TraceDrawerCloseButton,
   TraceDrawerContainer,
@@ -22414,11 +24021,14 @@ export {
   TraceLabel,
   TraceListItem,
   TraceListProvider,
+  TraceTimeline,
   TraceTree,
   TraceTreeItem,
   TracesList,
   applyDagreLayout,
   calculateBranchFamilies,
+  computeTimelineLayout,
+  formatDuration,
   getBranchColor,
   getDisplayName2 as getDisplayName,
   getNodeTypeStyle,
@@ -22429,6 +24039,9 @@ export {
   useEvaluationContext,
   useSpanInfoContext,
   useTable,
+  useTimelineLayout,
+  useTimelineViewPreference,
+  useTimelineZoom,
   useTraceDrawer,
   useTraceDrawerContext,
   useTraceListContext