@truefoundry/trueforge-ui 0.3.0-rc.0 → 0.3.0-rc.2

package/dist/AgentSessionEventTimelineChart-CUKETHWM.js

@@ -0,0 +1,591 @@
+"use client";
+import {
+  LightTooltip,
+  MAIN_THREAD_ID,
+  SESSION_EVENT_TOOLTIP_HIDE_DURATION,
+  TIMELINE_TYPE,
+  buildTimelineAxisTicks,
+  formatCostUsd,
+  formatDurationMs,
+  formatTimelineAxisDuration,
+  formatTimelineDuration,
+  formatTokenCount,
+  getActiveTimelineMs,
+  getSessionEventColor,
+  getSessionEventHoverColor,
+  getSessionEventLabel,
+  getSessionEventTooltipHeading,
+  getSubAgentHoverGroups,
+  getSubAgentLanes,
+  getTimelineHoverTargetId,
+  getTimelineLayout,
+  getTimelineRange,
+  groupCoincidentTimelineMarkers,
+  groupOverlappingToolCalls,
+  pickLongestNonOverlappingSegments,
+  roundDurationMsToSecond,
+  useThemeMode
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
+import "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-VJ7BZGAF.js";
+import "./chunk-BWHOZFIV.js";
+
+// src/atoms/agent-details/AgentSessionEventTimelineChart.tsx
+import {
+  BarController,
+  BarElement,
+  Chart as ChartJS,
+  LinearScale,
+  PointElement,
+  ScatterController,
+  Tooltip
+} from "chart.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Chart } from "react-chartjs-2";
+
+// src/atoms/agent-details/AgentSessionTimelineTooltip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function hasSessionEventTooltip(segment) {
+  return segment.type !== "system" || segment.description.trim().length > 0;
+}
+function SessionEventTooltip({
+  segment,
+  subAgentLabel
+}) {
+  const showDuration = !segment.isMarker && !SESSION_EVENT_TOOLTIP_HIDE_DURATION.has(segment.type);
+  const content = segment.description.trim();
+  if (segment.type === "system") {
+    if (content.length === 0) return null;
+    return /* @__PURE__ */ jsx("p", { className: "max-w-[25rem] whitespace-normal break-words text-xs font-medium text-text-primary", children: content });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "max-h-72 max-w-[25rem] overflow-auto whitespace-normal break-words text-xs", children: [
+    subAgentLabel != null ? /* @__PURE__ */ jsx("div", { className: "border-b border-border py-1.5 text-text-secondary", children: `Sub-Agent: ${subAgentLabel}` }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 pt-1", children: [
+      /* @__PURE__ */ jsx("span", { className: segment.type === "error" ? "font-medium text-failure-bg" : "font-medium text-text-secondary", children: getSessionEventTooltipHeading(segment.type) }),
+      showDuration ? /* @__PURE__ */ jsx("span", { className: "tabular-nums text-text-secondary", children: formatTimelineDuration(segment.endMs - segment.startMs) }) : null
+    ] }),
+    content.length > 0 ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 line-clamp-6 font-medium text-text-primary", children: content }) : null
+  ] });
+}
+function SessionTurnTooltip({
+  turn,
+  turnNumber,
+  durationMs,
+  segments
+}) {
+  const isDark = useThemeMode() === "dark";
+  return /* @__PURE__ */ jsxs("div", { className: "max-h-72 w-72 max-w-full overflow-auto text-xs text-text-primary", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-semibold", children: `Turn ${turnNumber}` }),
+      /* @__PURE__ */ jsx("span", { className: "tabular-nums text-text-secondary", children: formatDurationMs(durationMs) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col text-text-secondary", children: [
+      turn.totalCostInUsd != null ? /* @__PURE__ */ jsx("span", { children: `Cost: ${formatCostUsd(turn.totalCostInUsd)}` }) : null,
+      turn.totalTokens != null ? /* @__PURE__ */ jsx("span", { children: `Tokens: ${formatTokenCount(turn.totalTokens)}` }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 border-t border-border pt-2", children: segments.map((segment) => {
+      const label = segment.type === "tool_call" || segment.type === "sub_agent" ? segment.description : segment.title;
+      return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "size-1.5 shrink-0 rounded-full",
+            style: { backgroundColor: getSessionEventColor(segment.type, isDark) }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        segment.isMarker ? null : /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 tabular-nums text-text-secondary", children: formatTimelineDuration(segment.endMs - segment.startMs) })
+      ] }, segment.id);
+    }) })
+  ] });
+}
+function SessionToolCallGroupTooltip({ group }) {
+  return /* @__PURE__ */ jsxs("div", { className: "max-h-72 w-80 max-w-full overflow-auto text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-text-secondary", children: "Tool calls" }),
+      /* @__PURE__ */ jsx("span", { className: "tabular-nums text-text-secondary", children: formatTimelineDuration(group.endMs - group.startMs) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1.5 border-t border-border pt-1.5", children: group.segments.map((segment) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium text-text-primary", children: segment.description || segment.title }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-text-secondary", children: formatTimelineDuration(segment.endMs - segment.startMs) })
+    ] }, segment.id)) })
+  ] });
+}
+function SessionMarkerGroupTooltip({ group }) {
+  const isDark = useThemeMode() === "dark";
+  const singleSegment = group.segments.length === 1 ? group.segments[0] : void 0;
+  if (singleSegment != null) return /* @__PURE__ */ jsx(SessionEventTooltip, { segment: singleSegment });
+  return /* @__PURE__ */ jsxs("div", { className: "max-h-72 w-80 max-w-full overflow-auto text-xs", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-text-secondary", children: "Events" }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1.5 border-t border-border pt-1.5", children: group.segments.map((segment) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5 py-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "mt-1 size-1.5 shrink-0 rounded-full",
+          style: { backgroundColor: getSessionEventColor(segment.type, isDark) }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-text-secondary", children: getSessionEventTooltipHeading(segment.type) }),
+        /* @__PURE__ */ jsx("div", { className: "wrap-break-word font-medium text-text-primary", children: segment.description.trim() || segment.title })
+      ] })
+    ] }, segment.id)) })
+  ] });
+}
+function SessionSubAgentGroupTooltip({ group }) {
+  return /* @__PURE__ */ jsxs("div", { className: "max-h-72 w-80 max-w-full overflow-auto text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-text-secondary", children: "Sub-agents" }),
+      /* @__PURE__ */ jsx("span", { className: "tabular-nums text-text-secondary", children: formatTimelineDuration(group.endMs - group.startMs) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1.5 border-t border-border pt-1.5", children: group.segments.map((segment, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 py-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-medium text-text-primary", children: group.segments.length === 1 ? segment.description || segment.title : `Sub-agent ${index + 1}: ${segment.description || segment.title}` }),
+      group.segments.length === 1 ? null : /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-text-secondary", children: formatTimelineDuration(segment.endMs - segment.startMs) })
+    ] }, segment.id)) })
+  ] });
+}
+
+// src/atoms/agent-details/AgentSessionEventTimelineChart.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+ChartJS.register(BarController, BarElement, LinearScale, PointElement, ScatterController, Tooltip);
+var MARKER_PX = 4;
+var TURN_GAP_PX = 12;
+var END_PAD_PX = 12;
+var BAR_RADIUS_PX = 2;
+var ROW_GAP_PX = 8;
+var MARKER_EVENT_GAP_PX = 2;
+var OVERHEAD_PX = 30;
+function rowCenters({ heights, gaps }) {
+  const centers = [];
+  let offset = 0;
+  heights.forEach((height, index) => {
+    centers.push(offset + height / 2);
+    offset += height + (gaps[index] ?? 0);
+  });
+  return { centers, band: offset };
+}
+function eventOrder(type) {
+  if (type === "sub_agent") return 0;
+  if (type === "model") return 2;
+  return 1;
+}
+function turnBarLabelPoint(element) {
+  if (!("x" in element) || !("y" in element) || !("base" in element)) return null;
+  const { x, y, base } = element;
+  if (typeof x !== "number" || typeof y !== "number" || typeof base !== "number") return null;
+  return { x: (x + base) / 2, y };
+}
+function AgentSessionEventTimelineChart({
+  turns,
+  segments,
+  hiddenTypes,
+  onSelectTurn
+}) {
+  const mode = useThemeMode();
+  const isDark = mode === "dark";
+  const axis = isDark ? "#8c8c92" : "#71717a";
+  const grid = isDark ? "#27272a" : "#e4e4e7";
+  const turnFill = isDark ? "#3f3f46" : "#E0ECFD";
+  const turnHover = isDark ? "#52525b" : "#E0ECFD";
+  const wrapperRef = useRef(null);
+  const [widthPx, setWidthPx] = useState(0);
+  const [overheadPx, setOverheadPx] = useState(OVERHEAD_PX);
+  const [tooltipTarget, setTooltipTarget] = useState(null);
+  const [tooltipAnchor, setTooltipAnchor] = useState(null);
+  const tooltipIdRef = useRef("");
+  const tooltipCursorXRef = useRef(null);
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (wrapper == null) return void 0;
+    const update = () => setWidthPx(wrapper.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(wrapper);
+    return () => observer.disconnect();
+  }, []);
+  const refreshTooltipAnchor = useCallback(() => {
+    const wrapper = wrapperRef.current;
+    const left = tooltipCursorXRef.current;
+    if (wrapper == null || left == null) return;
+    setTooltipAnchor({ left, top: wrapper.getBoundingClientRect().bottom });
+  }, []);
+  const clearTooltip = useCallback(() => {
+    tooltipIdRef.current = "";
+    tooltipCursorXRef.current = null;
+    setTooltipTarget(null);
+    setTooltipAnchor(null);
+  }, []);
+  useEffect(() => {
+    if (tooltipTarget == null) return void 0;
+    refreshTooltipAnchor();
+    window.addEventListener("scroll", refreshTooltipAnchor, true);
+    window.addEventListener("resize", refreshTooltipAnchor);
+    return () => {
+      window.removeEventListener("scroll", refreshTooltipAnchor, true);
+      window.removeEventListener("resize", refreshTooltipAnchor);
+    };
+  }, [refreshTooltipAnchor, tooltipTarget]);
+  const segmentTotalMs = Math.max(0, ...segments.map((segment) => segment.endMs));
+  const activeTotalMs = Math.max(1, roundDurationMsToSecond(segmentTotalMs));
+  const { turnStartsMs, turnOrdinals, turnRanges } = useMemo(() => getTimelineLayout(segments), [segments]);
+  const activeTurnStartsMs = useMemo(
+    () => turnStartsMs.filter((startMs, index) => index === 0 || startMs <= activeTotalMs),
+    [activeTotalMs, turnStartsMs]
+  );
+  const gapCount = Math.max(0, activeTurnStartsMs.length - 1);
+  const scaleWidthPx = Math.max(widthPx / 2, widthPx - TURN_GAP_PX * gapCount - END_PAD_PX);
+  const msPerPx = activeTotalMs / Math.max(1, scaleWidthPx);
+  const turnGapMs = TURN_GAP_PX * msPerPx;
+  const totalMs = activeTotalMs + gapCount * turnGapMs;
+  const timelineMaxMs = totalMs + END_PAD_PX * msPerPx;
+  const timelineGaps = useMemo(
+    () => activeTurnStartsMs.slice(1).map((startMs, index) => ({ startMs: startMs + index * turnGapMs, endMs: startMs + (index + 1) * turnGapMs })),
+    [activeTurnStartsMs, turnGapMs]
+  );
+  const visibleSegments = useMemo(
+    () => segments.flatMap((segment) => {
+      if (hiddenTypes.has(segment.type)) return [];
+      const shiftMs = (turnOrdinals.get(segment.turnIndex) ?? 0) * turnGapMs;
+      return [{ ...segment, startMs: segment.startMs + shiftMs, endMs: segment.endMs + shiftMs }];
+    }),
+    [hiddenTypes, segments, turnGapMs, turnOrdinals]
+  );
+  const markerGroups = useMemo(() => groupCoincidentTimelineMarkers(visibleSegments), [visibleSegments]);
+  const durationSegments = useMemo(() => visibleSegments.filter((segment) => !segment.isMarker), [visibleSegments]);
+  const turnBars = useMemo(
+    () => turnRanges.length < 2 ? [] : turnRanges.map((range) => ({
+      ...range,
+      id: `turn-${range.turnIndex}`,
+      durationMs: range.endMs - range.startMs,
+      startMs: range.startMs + range.ordinal * turnGapMs,
+      endMs: range.endMs + range.ordinal * turnGapMs + MARKER_PX * msPerPx
+    })),
+    [msPerPx, turnGapMs, turnRanges]
+  );
+  const subAgentSegments = useMemo(
+    () => durationSegments.filter((segment) => segment.type === "sub_agent"),
+    [durationSegments]
+  );
+  const mainSubAgents = useMemo(() => pickLongestNonOverlappingSegments(subAgentSegments), [subAgentSegments]);
+  const subAgentGroups = useMemo(
+    () => getSubAgentHoverGroups({ bars: mainSubAgents, subAgentSegments }),
+    [mainSubAgents, subAgentSegments]
+  );
+  const subAgentLanes = useMemo(
+    () => getSubAgentLanes({ subAgentSegments, threadSegments: durationSegments, minWidthMs: MARKER_PX * msPerPx }),
+    [durationSegments, msPerPx, subAgentSegments]
+  );
+  const mainCandidates = useMemo(() => {
+    const kept = new Set(mainSubAgents.map((segment) => segment.id));
+    return durationSegments.filter(
+      (segment) => segment.threadId === MAIN_THREAD_ID || segment.type === "sub_agent" && kept.has(segment.id)
+    );
+  }, [durationSegments, mainSubAgents]);
+  const toolCallGroups = useMemo(
+    () => groupOverlappingToolCalls(mainCandidates.filter((segment) => segment.type === "tool_call")).filter(
+      (group) => group.segments.length > 1
+    ),
+    [mainCandidates]
+  );
+  const groupedIds = useMemo(
+    () => new Set(toolCallGroups.flatMap((group) => group.segments.map((segment) => segment.id))),
+    [toolCallGroups]
+  );
+  const mainEventSegments = useMemo(
+    () => mainCandidates.filter((segment) => !groupedIds.has(segment.id)),
+    [groupedIds, mainCandidates]
+  );
+  const laneCount = subAgentLanes.reduce((count, lane) => Math.max(count, lane.lane + 1), 0);
+  const hasTurnRow = turnBars.length > 0;
+  const markerRow = hasTurnRow ? 1 : 0;
+  const eventRow = markerRow + 1;
+  const { centers, band } = useMemo(() => {
+    const heights = [...hasTurnRow ? [16] : [], 10, 28, ...Array.from({ length: laneCount }, () => 12)];
+    const gaps = heights.map((_, index) => {
+      if (index === heights.length - 1) return 0;
+      return index === markerRow ? MARKER_EVENT_GAP_PX : ROW_GAP_PX;
+    });
+    return rowCenters({ heights, gaps });
+  }, [hasTurnRow, laneCount, markerRow]);
+  const chartTargets = useMemo(
+    () => [
+      ...turnBars.map((bar) => ({ type: TIMELINE_TYPE.turn, bar })),
+      ...markerGroups.map((group) => ({ type: TIMELINE_TYPE.markerGroup, group })),
+      ...subAgentLanes.flatMap(
+        (lane) => lane.segments.map((segment) => ({ type: TIMELINE_TYPE.event, segment }))
+      ),
+      ...mainEventSegments.map((segment) => {
+        if (segment.type !== "sub_agent") return { type: TIMELINE_TYPE.event, segment };
+        const group = subAgentGroups.find((candidate) => candidate.barId === segment.id);
+        return group == null ? { type: TIMELINE_TYPE.event, segment } : { type: TIMELINE_TYPE.subAgentGroup, group };
+      }),
+      ...toolCallGroups.map((group) => ({ type: TIMELINE_TYPE.toolCallGroup, group }))
+    ],
+    [mainEventSegments, markerGroups, subAgentGroups, subAgentLanes, toolCallGroups, turnBars]
+  );
+  const barDataset = ({
+    label,
+    range,
+    y,
+    color,
+    hover,
+    thickness,
+    order = 1,
+    inflateAmount
+  }) => ({
+    label,
+    data: [{ x: getTimelineRange(range), y }],
+    backgroundColor: color,
+    hoverBackgroundColor: hover,
+    hoverBorderColor: hover,
+    borderWidth: 0,
+    borderSkipped: false,
+    borderRadius: BAR_RADIUS_PX,
+    minBarLength: MARKER_PX,
+    barThickness: thickness,
+    grouped: false,
+    order,
+    ...inflateAmount == null ? {} : { inflateAmount }
+  });
+  const chartData = useMemo(
+    () => ({
+      datasets: [
+        ...turnBars.map(
+          (bar) => barDataset({
+            label: `Turn ${bar.ordinal + 1}`,
+            range: bar,
+            y: centers[0] ?? 0,
+            color: turnFill,
+            hover: turnHover,
+            thickness: 16
+          })
+        ),
+        ...markerGroups.map((group) => {
+          const type = group.segments.length === 1 ? group.segments[0]?.type : "system";
+          const color = getSessionEventColor(type ?? "system", isDark);
+          return {
+            type: "scatter",
+            label: group.segments.map((segment) => getSessionEventLabel(segment.type)).join(", "),
+            data: [{ x: group.startMs, y: centers[markerRow] ?? 0 }],
+            pointStyle: "rectRot",
+            pointRadius: 5,
+            pointHoverRadius: 6,
+            clip: false,
+            backgroundColor: color,
+            hoverBackgroundColor: getSessionEventHoverColor(type ?? "system", isDark),
+            borderWidth: 0,
+            order: 0
+          };
+        }),
+        ...subAgentLanes.flatMap(
+          (lane) => lane.segments.map(
+            (segment) => barDataset({
+              label: `${getSessionEventLabel(segment.type)}: ${segment.title}`,
+              range: segment,
+              y: centers[eventRow + 1 + lane.lane] ?? 0,
+              color: getSessionEventColor(segment.type, isDark),
+              hover: getSessionEventHoverColor(segment.type, isDark),
+              thickness: 12,
+              order: eventOrder(segment.type),
+              inflateAmount: 0.5
+            })
+          )
+        ),
+        ...mainEventSegments.map(
+          (segment) => barDataset({
+            label: `${getSessionEventLabel(segment.type)}: ${segment.title}`,
+            range: segment,
+            y: centers[eventRow] ?? 0,
+            color: getSessionEventColor(segment.type, isDark),
+            hover: getSessionEventHoverColor(segment.type, isDark),
+            thickness: 28,
+            order: eventOrder(segment.type),
+            inflateAmount: 0.5
+          })
+        ),
+        ...toolCallGroups.map(
+          (group) => barDataset({
+            label: "Parallel tool calls",
+            range: group,
+            y: centers[eventRow] ?? 0,
+            color: getSessionEventColor("tool_call", isDark),
+            hover: getSessionEventHoverColor("tool_call", isDark),
+            thickness: 28,
+            order: eventOrder("tool_call"),
+            inflateAmount: 0.5
+          })
+        )
+      ]
+    }),
+    [
+      centers,
+      eventRow,
+      isDark,
+      mainEventSegments,
+      markerGroups,
+      markerRow,
+      subAgentLanes,
+      toolCallGroups,
+      turnBars,
+      turnFill,
+      turnHover
+    ]
+  );
+  const turnLabelPlugin = useMemo(
+    () => ({
+      id: "turnLabels",
+      afterDatasetsDraw(chart) {
+        const { ctx } = chart;
+        ctx.save();
+        ctx.fillStyle = axis;
+        ctx.font = "500 10px sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        turnBars.forEach((bar, index) => {
+          const element = chart.getDatasetMeta(index).data[0];
+          if (element == null) return;
+          const point = turnBarLabelPoint(element);
+          if (point) ctx.fillText(`T${bar.ordinal + 1}`, point.x, point.y);
+        });
+        ctx.restore();
+      }
+    }),
+    [axis, turnBars]
+  );
+  const overheadPlugin = useMemo(
+    () => ({
+      id: "timelineOverhead",
+      afterLayout(chart) {
+        const next = Math.round(chart.height - chart.chartArea.height);
+        setOverheadPx((previous) => previous === next ? previous : next);
+      }
+    }),
+    []
+  );
+  const chartOptions = useMemo(
+    () => ({
+      indexAxis: "y",
+      animation: false,
+      responsive: true,
+      maintainAspectRatio: false,
+      onClick: (_event, elements) => {
+        const target = chartTargets[elements[0]?.datasetIndex ?? -1];
+        if (target?.type === TIMELINE_TYPE.turn) onSelectTurn?.(target.bar.turnIndex);
+      },
+      onHover: (event, elements) => {
+        const hoveredDatasetIndex = elements[0]?.datasetIndex;
+        const next = hoveredDatasetIndex == null ? null : chartTargets[hoveredDatasetIndex] ?? null;
+        const native = event.native;
+        if (native?.target instanceof HTMLElement) {
+          native.target.style.cursor = next?.type === TIMELINE_TYPE.turn ? "pointer" : "default";
+        }
+        if (native instanceof MouseEvent) {
+          tooltipCursorXRef.current = native.clientX;
+          refreshTooltipAnchor();
+        }
+        if (hoveredDatasetIndex == null) return;
+        const nextId = getTimelineHoverTargetId(next);
+        if (tooltipIdRef.current === nextId) return;
+        tooltipIdRef.current = nextId;
+        setTooltipTarget(next);
+        if (next == null) {
+          setTooltipAnchor(null);
+          return;
+        }
+        refreshTooltipAnchor();
+      },
+      plugins: { legend: { display: false }, tooltip: { enabled: false } },
+      scales: {
+        x: {
+          type: "linear",
+          position: "top",
+          min: 0,
+          max: timelineMaxMs,
+          grid: { color: grid },
+          border: { color: grid },
+          afterBuildTicks: (scale) => {
+            scale.ticks = buildTimelineAxisTicks({ activeTotalMs, turnStartsMs: activeTurnStartsMs, turnGapMs });
+          },
+          ticks: {
+            color: axis,
+            autoSkip: false,
+            includeBounds: false,
+            maxTicksLimit: 9,
+            callback: (value) => {
+              const timelineMs = Number(value);
+              return timelineMs <= totalMs ? formatTimelineAxisDuration(getActiveTimelineMs(timelineMs, timelineGaps)) : "";
+            }
+          }
+        },
+        y: {
+          type: "linear",
+          display: false,
+          reverse: true,
+          offset: false,
+          min: 0,
+          max: band,
+          grid: { display: false }
+        }
+      }
+    }),
+    [
+      activeTotalMs,
+      activeTurnStartsMs,
+      axis,
+      band,
+      chartTargets,
+      grid,
+      onSelectTurn,
+      refreshTooltipAnchor,
+      timelineGaps,
+      timelineMaxMs,
+      totalMs,
+      turnGapMs
+    ]
+  );
+  const tooltipTurn = tooltipTarget?.type === TIMELINE_TYPE.turn ? turns[tooltipTarget.bar.turnIndex] : void 0;
+  const containerStyle = useMemo(() => ({ height: band + overheadPx }), [band, overheadPx]);
+  const tooltipContent = tooltipTarget?.type === TIMELINE_TYPE.turn && tooltipTurn != null ? /* @__PURE__ */ jsx2(
+    SessionTurnTooltip,
+    {
+      turn: tooltipTurn,
+      turnNumber: tooltipTarget.bar.ordinal + 1,
+      durationMs: tooltipTarget.bar.durationMs,
+      segments: segments.filter((segment) => segment.turnIndex === tooltipTarget.bar.turnIndex)
+    }
+  ) : tooltipTarget?.type === TIMELINE_TYPE.event && hasSessionEventTooltip(tooltipTarget.segment) ? /* @__PURE__ */ jsx2(
+    SessionEventTooltip,
+    {
+      segment: tooltipTarget.segment,
+      subAgentLabel: tooltipTarget.segment.type === "sub_agent" ? void 0 : subAgentLanes.find((lane) => lane.threadId === tooltipTarget.segment.threadId)?.track.description
+    }
+  ) : tooltipTarget?.type === TIMELINE_TYPE.toolCallGroup ? /* @__PURE__ */ jsx2(SessionToolCallGroupTooltip, { group: tooltipTarget.group }) : tooltipTarget?.type === TIMELINE_TYPE.markerGroup ? /* @__PURE__ */ jsx2(SessionMarkerGroupTooltip, { group: tooltipTarget.group }) : tooltipTarget?.type === TIMELINE_TYPE.subAgentGroup ? /* @__PURE__ */ jsx2(SessionSubAgentGroupTooltip, { group: tooltipTarget.group }) : null;
+  return /* @__PURE__ */ jsx2("div", { ref: wrapperRef, className: "w-full", "data-slot": "agent-session-event-timeline-chart", children: /* @__PURE__ */ jsx2(
+    LightTooltip,
+    {
+      title: tooltipContent,
+      side: "bottom",
+      triggerClassName: "block w-full",
+      followCursor: true,
+      open: tooltipTarget != null && tooltipContent != null,
+      className: "max-w-[min(25rem,calc(100vw-1rem))] whitespace-normal",
+      anchor: tooltipAnchor,
+      children: /* @__PURE__ */ jsx2("div", { className: "w-full", style: containerStyle, onMouseLeave: clearTooltip, children: /* @__PURE__ */ jsx2(
+        Chart,
+        {
+          type: "bar",
+          data: chartData,
+          options: chartOptions,
+          plugins: [turnLabelPlugin, overheadPlugin]
+        }
+      ) })
+    }
+  ) });
+}
+export {
+  AgentSessionEventTimelineChart
+};
+//# sourceMappingURL=AgentSessionEventTimelineChart-CUKETHWM.js.map