@truefoundry/trueforge-ui 0.2.4 → 0.3.0-rc.1

package/dist/AgentSessionEventTimeline-26Z6IB3B.js

@@ -0,0 +1,79 @@
+"use client";
+import {
+  SESSION_EVENT_TYPES,
+  useSlot
+} from "./chunk-ZTMKFZQ3.js";
+import "./chunk-2XPPBEYF.js";
+import "./chunk-XAU7QFG3.js";
+import "./chunk-U7KURWW3.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-MPNSO7E6.js";
+import {
+  cn
+} from "./chunk-7Z2C2K7F.js";
+
+// src/atoms/agent-details/AgentSessionEventTimeline.tsx
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AgentSessionEventTimeline({ turns, segments, onSelectTurn }) {
+  const AgentSessionEventTimelineChart = useSlot("AgentSessionEventTimelineChart");
+  const [hiddenTypes, setHiddenTypes] = useState(() => /* @__PURE__ */ new Set());
+  const availableEventTypes = useMemo(() => {
+    const available = new Set(segments.map((segment) => segment.type));
+    return SESSION_EVENT_TYPES.filter((eventType) => available.has(eventType.id));
+  }, [segments]);
+  const handleToggleType = useCallback((type) => {
+    setHiddenTypes((previous) => {
+      const next = new Set(previous);
+      if (next.has(type)) next.delete(type);
+      else next.add(type);
+      return next;
+    });
+  }, []);
+  if (segments.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", "data-slot": "agent-session-event-timeline", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2",
+        "data-slot": "agent-session-event-types",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase text-text-secondary", children: "Event types" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children: availableEventTypes.map((eventType) => {
+            const isVisible = !hiddenTypes.has(eventType.id);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": isVisible,
+                className: cn(
+                  "flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium",
+                  isVisible ? "border-border text-text-primary" : "border-transparent text-text-secondary opacity-80"
+                ),
+                onClick: () => handleToggleType(eventType.id),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: eventType.color } }),
+                  eventType.label
+                ]
+              },
+              eventType.id
+            );
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "w-full py-2", children: /* @__PURE__ */ jsx(
+      AgentSessionEventTimelineChart,
+      {
+        turns,
+        segments,
+        hiddenTypes,
+        onSelectTurn
+      }
+    ) })
+  ] });
+}
+export {
+  AgentSessionEventTimeline
+};
+//# sourceMappingURL=AgentSessionEventTimeline-26Z6IB3B.js.map

package/dist/AgentSessionEventTimeline-26Z6IB3B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentSessionEventTimeline.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState, type ComponentType } from 'react';\n\nimport { useSlot } from '../../theme/SlotsProvider.js';\nimport { SESSION_EVENT_TYPES, type SessionEventType } from '../../utils/sessionEventTimeline.js';\nimport { cn } from '../lib/cn.js';\nimport type { AgentSessionEventTimelineProps } from './types.js';\n\nexport function AgentSessionEventTimeline({ turns, segments, onSelectTurn }: AgentSessionEventTimelineProps) {\n  const AgentSessionEventTimelineChart = useSlot('AgentSessionEventTimelineChart');\n  const [hiddenTypes, setHiddenTypes] = useState<Set<SessionEventType>>(() => new Set());\n\n  const availableEventTypes = useMemo(() => {\n    const available = new Set(segments.map(segment => segment.type));\n    return SESSION_EVENT_TYPES.filter(eventType => available.has(eventType.id));\n  }, [segments]);\n\n  const handleToggleType = useCallback((type: SessionEventType) => {\n    setHiddenTypes(previous => {\n      const next = new Set(previous);\n      if (next.has(type)) next.delete(type);\n      else next.add(type);\n      return next;\n    });\n  }, []);\n\n  if (segments.length === 0) return null;\n\n  return (\n    <div className=\"w-full\" data-slot=\"agent-session-event-timeline\">\n      <div\n        className=\"flex flex-wrap items-center gap-2 border-b border-border px-3 py-2\"\n        data-slot=\"agent-session-event-types\"\n      >\n        <span className=\"text-xs font-medium uppercase text-text-secondary\">Event types</span>\n        <div className=\"flex flex-wrap items-center gap-1\">\n          {availableEventTypes.map(eventType => {\n            const isVisible = !hiddenTypes.has(eventType.id);\n            return (\n              <button\n                key={eventType.id}\n                type=\"button\"\n                aria-pressed={isVisible}\n                className={cn(\n                  'flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium',\n                  isVisible ? 'border-border text-text-primary' : 'border-transparent text-text-secondary opacity-80',\n                )}\n                onClick={() => handleToggleType(eventType.id)}\n              >\n                <span className=\"size-2 rounded-sm\" style={{ backgroundColor: eventType.color }} />\n                {eventType.label}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"w-full py-2\">\n        <AgentSessionEventTimelineChart\n          turns={turns}\n          segments={segments}\n          hiddenTypes={hiddenTypes}\n          onSelectTurn={onSelectTurn}\n        />\n      </div>\n    </div>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentSessionEventTimeline: ComponentType<AgentSessionEventTimelineProps>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAEA,SAAS,aAAa,SAAS,gBAAoC;AAiC3D,cAKM,YALN;AA1BD,SAAS,0BAA0B,EAAE,OAAO,UAAU,aAAa,GAAmC;AAC3G,QAAM,iCAAiC,QAAQ,gCAAgC;AAC/E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAgC,MAAM,oBAAI,IAAI,CAAC;AAErF,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,YAAY,IAAI,IAAI,SAAS,IAAI,aAAW,QAAQ,IAAI,CAAC;AAC/D,WAAO,oBAAoB,OAAO,eAAa,UAAU,IAAI,UAAU,EAAE,CAAC;AAAA,EAC5E,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAAmB,YAAY,CAAC,SAA2B;AAC/D,mBAAe,cAAY;AACzB,YAAM,OAAO,IAAI,IAAI,QAAQ;AAC7B,UAAI,KAAK,IAAI,IAAI,EAAG,MAAK,OAAO,IAAI;AAAA,UAC/B,MAAK,IAAI,IAAI;AAClB,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,MAAI,SAAS,WAAW,EAAG,QAAO;AAElC,SACE,qBAAC,SAAI,WAAU,UAAS,aAAU,gCAChC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAU;AAAA,QAEV;AAAA,8BAAC,UAAK,WAAU,qDAAoD,yBAAW;AAAA,UAC/E,oBAAC,SAAI,WAAU,qCACZ,8BAAoB,IAAI,eAAa;AACpC,kBAAM,YAAY,CAAC,YAAY,IAAI,UAAU,EAAE;AAC/C,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY,oCAAoC;AAAA,gBAClD;AAAA,gBACA,SAAS,MAAM,iBAAiB,UAAU,EAAE;AAAA,gBAE5C;AAAA,sCAAC,UAAK,WAAU,qBAAoB,OAAO,EAAE,iBAAiB,UAAU,MAAM,GAAG;AAAA,kBAChF,UAAU;AAAA;AAAA;AAAA,cAVN,UAAU;AAAA,YAWjB;AAAA,UAEJ,CAAC,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,SAAI,WAAU,eACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/AgentSessionEventTimelineChart-CGCU7WBK.js

@@ -0,0 +1,504 @@
+"use client";
+import {
+  LightTooltip,
+  MAIN_THREAD_ID,
+  SESSION_EVENT_TOOLTIP_HIDE_DURATION,
+  TIMELINE_TYPE,
+  buildTimelineAxisTicks,
+  formatCostUsd,
+  formatDurationMs,
+  formatTimelineDuration,
+  formatTokenCount,
+  getActiveTimelineMs,
+  getSessionEventColor,
+  getSessionEventHoverColor,
+  getSessionEventLabel,
+  getSessionEventTooltipHeading,
+  getSubAgentHoverGroups,
+  getSubAgentLanes,
+  getTimelineHoverTargetId,
+  getTimelineLayout,
+  getTimelineRange,
+  groupOverlappingToolCalls,
+  pickLongestNonOverlappingSegments,
+  useThemeMode
+} from "./chunk-ZTMKFZQ3.js";
+import "./chunk-2XPPBEYF.js";
+import "./chunk-XAU7QFG3.js";
+import "./chunk-U7KURWW3.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-MPNSO7E6.js";
+import "./chunk-7Z2C2K7F.js";
+
+// src/atoms/agent-details/AgentSessionEventTimelineChart.tsx
+import {
+  BarElement,
+  Chart as ChartJS,
+  LinearScale,
+  Tooltip
+} from "chart.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Bar } 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
+}) {
+  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) }
+          }
+        ),
+        /* @__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 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: `Sub-agent ${index + 1}: ${segment.description || segment.title}` }),
+      /* @__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(LinearScale, BarElement, 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 OVERHEAD_PX = 30;
+function rowCenters(heights, gap) {
+  const centers = [];
+  let offset = 0;
+  for (const height of heights) {
+    centers.push(offset + height / 2);
+    offset += height + gap;
+  }
+  return { centers, band: Math.max(0, offset - gap) };
+}
+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" : "#e4e4e7";
+  const turnHover = isDark ? "#52525b" : "#d4d4d8";
+  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 activeTotalMs = Math.max(1, ...segments.map((segment) => segment.endMs));
+  const { turnStartsMs, turnOrdinals, turnRanges } = useMemo(() => getTimelineLayout(segments), [segments]);
+  const gapCount = Math.max(0, turnStartsMs.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(
+    () => turnStartsMs.slice(1).map((startMs, index) => ({ startMs: startMs + index * turnGapMs, endMs: startMs + (index + 1) * turnGapMs })),
+    [turnGapMs, turnStartsMs]
+  );
+  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 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(
+    () => visibleSegments.filter((segment) => segment.type === "sub_agent"),
+    [visibleSegments]
+  );
+  const mainSubAgents = useMemo(() => pickLongestNonOverlappingSegments(subAgentSegments), [subAgentSegments]);
+  const subAgentGroups = useMemo(
+    () => getSubAgentHoverGroups({ bars: mainSubAgents, subAgentSegments }),
+    [mainSubAgents, subAgentSegments]
+  );
+  const subAgentLanes = useMemo(
+    () => getSubAgentLanes({ subAgentSegments, threadSegments: visibleSegments, minWidthMs: MARKER_PX * msPerPx }),
+    [msPerPx, subAgentSegments, visibleSegments]
+  );
+  const mainCandidates = useMemo(() => {
+    const kept = new Set(mainSubAgents.map((segment) => segment.id));
+    return visibleSegments.filter(
+      (segment) => segment.threadId === MAIN_THREAD_ID || segment.type === "sub_agent" && kept.has(segment.id)
+    );
+  }, [mainSubAgents, visibleSegments]);
+  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 eventRow = hasTurnRow ? 1 : 0;
+  const { centers, band } = useMemo(
+    () => rowCenters([...hasTurnRow ? [16] : [], 28, ...Array.from({ length: laneCount }, () => 12)], ROW_GAP_PX),
+    [hasTurnRow, laneCount]
+  );
+  const chartTargets = useMemo(
+    () => [
+      ...turnBars.map((bar) => ({ type: TIMELINE_TYPE.turn, bar })),
+      ...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, 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
+          })
+        ),
+        ...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),
+              hover: getSessionEventHoverColor(segment.type),
+              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),
+            hover: getSessionEventHoverColor(segment.type),
+            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"),
+            hover: getSessionEventHoverColor("tool_call"),
+            thickness: 28,
+            order: eventOrder("tool_call"),
+            inflateAmount: 0.5
+          })
+        )
+      ]
+    }),
+    [centers, eventRow, mainEventSegments, 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({
+              ticks: scale.ticks,
+              totalMs,
+              timelineMaxMs
+            });
+          },
+          ticks: {
+            color: axis,
+            autoSkip: false,
+            includeBounds: true,
+            maxTicksLimit: 9,
+            stepSize: timelineMaxMs / 8,
+            callback: (value) => {
+              const timelineMs = Number(value);
+              return timelineMs <= totalMs ? formatTimelineDuration(getActiveTimelineMs(timelineMs, timelineGaps)) : "";
+            }
+          }
+        },
+        y: {
+          type: "linear",
+          display: false,
+          reverse: true,
+          offset: false,
+          min: 0,
+          max: band,
+          grid: { display: false }
+        }
+      }
+    }),
+    [axis, band, chartTargets, grid, onSelectTurn, refreshTooltipAnchor, timelineGaps, timelineMaxMs, totalMs]
+  );
+  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.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(Bar, { data: chartData, options: chartOptions, plugins: [turnLabelPlugin, overheadPlugin] }) })
+    }
+  ) });
+}
+export {
+  AgentSessionEventTimelineChart
+};
+//# sourceMappingURL=AgentSessionEventTimelineChart-CGCU7WBK.js.map