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

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

package/dist/AgentSessionEventTimelineChart-CGCU7WBK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentSessionEventTimelineChart.tsx","../src/atoms/agent-details/AgentSessionTimelineTooltip.tsx"],"sourcesContent":["'use client';\n\nimport {\n  BarElement,\n  Chart as ChartJS,\n  LinearScale,\n  Tooltip,\n  type ChartData,\n  type ChartOptions,\n  type Plugin,\n} from 'chart.js';\nimport { useCallback, useEffect, useMemo, useRef, useState, type ComponentType, type CSSProperties } from 'react';\nimport { Bar } from 'react-chartjs-2';\n\nimport { useThemeMode } from '../../theme/SlotsProvider.js';\nimport {\n  formatTimelineDuration,\n  getSessionEventColor,\n  getSessionEventHoverColor,\n  getSessionEventLabel,\n  MAIN_THREAD_ID,\n  type SessionEventTimelineSegment,\n} from '../../utils/sessionEventTimeline.js';\nimport {\n  buildTimelineAxisTicks,\n  getActiveTimelineMs,\n  getSubAgentHoverGroups,\n  getSubAgentLanes,\n  getTimelineHoverTargetId,\n  getTimelineLayout,\n  getTimelineRange,\n  groupOverlappingToolCalls,\n  pickLongestNonOverlappingSegments,\n  TIMELINE_TYPE,\n  type TimelineGap,\n  type TimelineHoverTarget,\n  type TimelineTurnBar,\n} from '../../utils/sessionEventTimelineChart.js';\nimport { LightTooltip } from '../primitives/Tooltip.js';\nimport {\n  hasSessionEventTooltip,\n  SessionEventTooltip,\n  SessionSubAgentGroupTooltip,\n  SessionToolCallGroupTooltip,\n  SessionTurnTooltip,\n} from './AgentSessionTimelineTooltip.js';\nimport type { AgentSessionEventTimelineChartProps } from './types.js';\n\nChartJS.register(LinearScale, BarElement, Tooltip);\n\nconst MARKER_PX = 4;\nconst TURN_GAP_PX = 12;\nconst END_PAD_PX = 12;\nconst BAR_RADIUS_PX = 2;\nconst ROW_GAP_PX = 8;\nconst OVERHEAD_PX = 30;\n\ntype BarPoint = { x: [number, number]; y: number };\n\nfunction rowCenters(heights: number[], gap: number): { centers: number[]; band: number } {\n  const centers: number[] = [];\n  let offset = 0;\n  for (const height of heights) {\n    centers.push(offset + height / 2);\n    offset += height + gap;\n  }\n  return { centers, band: Math.max(0, offset - gap) };\n}\n\nfunction eventOrder(type: SessionEventTimelineSegment['type']): number {\n  if (type === 'sub_agent') return 0;\n  if (type === 'model') return 2;\n  return 1;\n}\n\nfunction turnBarLabelPoint(element: object): { x: number; y: number } | null {\n  if (!('x' in element) || !('y' in element) || !('base' in element)) return null;\n  const { x, y, base } = element;\n  if (typeof x !== 'number' || typeof y !== 'number' || typeof base !== 'number') return null;\n  return { x: (x + base) / 2, y };\n}\n\nexport function AgentSessionEventTimelineChart({\n  turns,\n  segments,\n  hiddenTypes,\n  onSelectTurn,\n}: AgentSessionEventTimelineChartProps) {\n  const mode = useThemeMode();\n  const isDark = mode === 'dark';\n  const axis = isDark ? '#8c8c92' : '#71717a';\n  const grid = isDark ? '#27272a' : '#e4e4e7';\n  const turnFill = isDark ? '#3f3f46' : '#e4e4e7';\n  const turnHover = isDark ? '#52525b' : '#d4d4d8';\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [widthPx, setWidthPx] = useState(0);\n  const [overheadPx, setOverheadPx] = useState(OVERHEAD_PX);\n  const [tooltipTarget, setTooltipTarget] = useState<TimelineHoverTarget | null>(null);\n  const [tooltipAnchor, setTooltipAnchor] = useState<{ left: number; top: number } | null>(null);\n  const tooltipIdRef = useRef('');\n  const tooltipCursorXRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (wrapper == null) return undefined;\n    const update = () => setWidthPx(wrapper.clientWidth);\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, []);\n\n  const refreshTooltipAnchor = useCallback(() => {\n    const wrapper = wrapperRef.current;\n    const left = tooltipCursorXRef.current;\n    if (wrapper == null || left == null) return;\n    setTooltipAnchor({ left, top: wrapper.getBoundingClientRect().bottom });\n  }, []);\n\n  const clearTooltip = useCallback(() => {\n    tooltipIdRef.current = '';\n    tooltipCursorXRef.current = null;\n    setTooltipTarget(null);\n    setTooltipAnchor(null);\n  }, []);\n\n  useEffect(() => {\n    if (tooltipTarget == null) return undefined;\n    // Anchors use viewport coordinates, so remeasure the chart whenever any\n    // scroll ancestor or the viewport moves it.\n    refreshTooltipAnchor();\n    window.addEventListener('scroll', refreshTooltipAnchor, true);\n    window.addEventListener('resize', refreshTooltipAnchor);\n    return () => {\n      window.removeEventListener('scroll', refreshTooltipAnchor, true);\n      window.removeEventListener('resize', refreshTooltipAnchor);\n    };\n  }, [refreshTooltipAnchor, tooltipTarget]);\n\n  const activeTotalMs = Math.max(1, ...segments.map(segment => segment.endMs));\n  const { turnStartsMs, turnOrdinals, turnRanges } = useMemo(() => getTimelineLayout(segments), [segments]);\n  const gapCount = Math.max(0, turnStartsMs.length - 1);\n  const scaleWidthPx = Math.max(widthPx / 2, widthPx - TURN_GAP_PX * gapCount - END_PAD_PX);\n  const msPerPx = activeTotalMs / Math.max(1, scaleWidthPx);\n  const turnGapMs = TURN_GAP_PX * msPerPx;\n  const totalMs = activeTotalMs + gapCount * turnGapMs;\n  const timelineMaxMs = totalMs + END_PAD_PX * msPerPx;\n  const timelineGaps = useMemo<TimelineGap[]>(\n    () =>\n      turnStartsMs\n        .slice(1)\n        .map((startMs, index) => ({ startMs: startMs + index * turnGapMs, endMs: startMs + (index + 1) * turnGapMs })),\n    [turnGapMs, turnStartsMs],\n  );\n\n  const visibleSegments = useMemo(\n    () =>\n      segments.flatMap(segment => {\n        if (hiddenTypes.has(segment.type)) return [];\n        const shiftMs = (turnOrdinals.get(segment.turnIndex) ?? 0) * turnGapMs;\n        return [{ ...segment, startMs: segment.startMs + shiftMs, endMs: segment.endMs + shiftMs }];\n      }),\n    [hiddenTypes, segments, turnGapMs, turnOrdinals],\n  );\n  const turnBars = useMemo<TimelineTurnBar[]>(\n    () =>\n      turnRanges.length < 2\n        ? []\n        : turnRanges.map(range => ({\n            ...range,\n            id: `turn-${range.turnIndex}`,\n            durationMs: range.endMs - range.startMs,\n            startMs: range.startMs + range.ordinal * turnGapMs,\n            endMs: range.endMs + range.ordinal * turnGapMs + MARKER_PX * msPerPx,\n          })),\n    [msPerPx, turnGapMs, turnRanges],\n  );\n  const subAgentSegments = useMemo(\n    () => visibleSegments.filter(segment => segment.type === 'sub_agent'),\n    [visibleSegments],\n  );\n  const mainSubAgents = useMemo(() => pickLongestNonOverlappingSegments(subAgentSegments), [subAgentSegments]);\n  const subAgentGroups = useMemo(\n    () => getSubAgentHoverGroups({ bars: mainSubAgents, subAgentSegments }),\n    [mainSubAgents, subAgentSegments],\n  );\n  const subAgentLanes = useMemo(\n    () => getSubAgentLanes({ subAgentSegments, threadSegments: visibleSegments, minWidthMs: MARKER_PX * msPerPx }),\n    [msPerPx, subAgentSegments, visibleSegments],\n  );\n  const mainCandidates = useMemo(() => {\n    const kept = new Set(mainSubAgents.map(segment => segment.id));\n    return visibleSegments.filter(\n      segment => segment.threadId === MAIN_THREAD_ID || (segment.type === 'sub_agent' && kept.has(segment.id)),\n    );\n  }, [mainSubAgents, visibleSegments]);\n  const toolCallGroups = useMemo(\n    () =>\n      groupOverlappingToolCalls(mainCandidates.filter(segment => segment.type === 'tool_call')).filter(\n        group => group.segments.length > 1,\n      ),\n    [mainCandidates],\n  );\n  const groupedIds = useMemo(\n    () => new Set(toolCallGroups.flatMap(group => group.segments.map(segment => segment.id))),\n    [toolCallGroups],\n  );\n  const mainEventSegments = useMemo(\n    () => mainCandidates.filter(segment => !groupedIds.has(segment.id)),\n    [groupedIds, mainCandidates],\n  );\n  const laneCount = subAgentLanes.reduce((count, lane) => Math.max(count, lane.lane + 1), 0);\n  const hasTurnRow = turnBars.length > 0;\n  const eventRow = hasTurnRow ? 1 : 0;\n  const { centers, band } = useMemo(\n    () => rowCenters([...(hasTurnRow ? [16] : []), 28, ...Array.from({ length: laneCount }, () => 12)], ROW_GAP_PX),\n    [hasTurnRow, laneCount],\n  );\n\n  const chartTargets = useMemo<Array<TimelineHoverTarget | null>>(\n    () => [\n      ...turnBars.map((bar): TimelineHoverTarget => ({ type: TIMELINE_TYPE.turn, bar })),\n      ...subAgentLanes.flatMap(lane =>\n        lane.segments.map((segment): TimelineHoverTarget => ({ type: TIMELINE_TYPE.event, segment })),\n      ),\n      ...mainEventSegments.map((segment): TimelineHoverTarget | null => {\n        if (segment.type !== 'sub_agent') return { type: TIMELINE_TYPE.event, segment };\n        const group = subAgentGroups.find(candidate => candidate.barId === segment.id);\n        return group == null ? { type: TIMELINE_TYPE.event, segment } : { type: TIMELINE_TYPE.subAgentGroup, group };\n      }),\n      ...toolCallGroups.map((group): TimelineHoverTarget => ({ type: TIMELINE_TYPE.toolCallGroup, group })),\n    ],\n    [mainEventSegments, subAgentGroups, subAgentLanes, toolCallGroups, turnBars],\n  );\n\n  const barDataset = ({\n    label,\n    range,\n    y,\n    color,\n    hover,\n    thickness,\n    order = 1,\n    inflateAmount,\n  }: {\n    label: string;\n    range: TimelineGap;\n    y: number;\n    color: string;\n    hover: string;\n    thickness: number;\n    order?: number;\n    inflateAmount?: number;\n  }) => ({\n    label,\n    data: [{ x: getTimelineRange(range), y }] satisfies BarPoint[],\n    backgroundColor: color,\n    hoverBackgroundColor: hover,\n    hoverBorderColor: hover,\n    borderWidth: 0,\n    borderSkipped: false,\n    borderRadius: BAR_RADIUS_PX,\n    minBarLength: MARKER_PX,\n    barThickness: thickness,\n    grouped: false,\n    order,\n    ...(inflateAmount == null ? {} : { inflateAmount }),\n  });\n\n  const chartData = useMemo<ChartData<'bar', BarPoint[], string>>(\n    () => ({\n      datasets: [\n        ...turnBars.map(bar =>\n          barDataset({\n            label: `Turn ${bar.ordinal + 1}`,\n            range: bar,\n            y: centers[0] ?? 0,\n            color: turnFill,\n            hover: turnHover,\n            thickness: 16,\n          }),\n        ),\n        ...subAgentLanes.flatMap(lane =>\n          lane.segments.map(segment =>\n            barDataset({\n              label: `${getSessionEventLabel(segment.type)}: ${segment.title}`,\n              range: segment,\n              y: centers[eventRow + 1 + lane.lane] ?? 0,\n              color: getSessionEventColor(segment.type),\n              hover: getSessionEventHoverColor(segment.type),\n              thickness: 12,\n              order: eventOrder(segment.type),\n              inflateAmount: 0.5,\n            }),\n          ),\n        ),\n        ...mainEventSegments.map(segment =>\n          barDataset({\n            label: `${getSessionEventLabel(segment.type)}: ${segment.title}`,\n            range: segment,\n            y: centers[eventRow] ?? 0,\n            color: getSessionEventColor(segment.type),\n            hover: getSessionEventHoverColor(segment.type),\n            thickness: 28,\n            order: eventOrder(segment.type),\n            inflateAmount: 0.5,\n          }),\n        ),\n        ...toolCallGroups.map(group =>\n          barDataset({\n            label: 'Parallel tool calls',\n            range: group,\n            y: centers[eventRow] ?? 0,\n            color: getSessionEventColor('tool_call'),\n            hover: getSessionEventHoverColor('tool_call'),\n            thickness: 28,\n            order: eventOrder('tool_call'),\n            inflateAmount: 0.5,\n          }),\n        ),\n      ],\n    }),\n    [centers, eventRow, mainEventSegments, subAgentLanes, toolCallGroups, turnBars, turnFill, turnHover],\n  );\n\n  const turnLabelPlugin = useMemo<Plugin<'bar'>>(\n    () => ({\n      id: 'turnLabels',\n      afterDatasetsDraw(chart) {\n        const { ctx } = chart;\n        ctx.save();\n        ctx.fillStyle = axis;\n        ctx.font = '500 10px sans-serif';\n        ctx.textAlign = 'center';\n        ctx.textBaseline = 'middle';\n        turnBars.forEach((bar, index) => {\n          const element = chart.getDatasetMeta(index).data[0];\n          if (element == null) return;\n          const point = turnBarLabelPoint(element);\n          if (point) ctx.fillText(`T${bar.ordinal + 1}`, point.x, point.y);\n        });\n        ctx.restore();\n      },\n    }),\n    [axis, turnBars],\n  );\n  const overheadPlugin = useMemo<Plugin<'bar'>>(\n    () => ({\n      id: 'timelineOverhead',\n      afterLayout(chart) {\n        const next = Math.round(chart.height - chart.chartArea.height);\n        setOverheadPx(previous => (previous === next ? previous : next));\n      },\n    }),\n    [],\n  );\n\n  const chartOptions = useMemo<ChartOptions<'bar'>>(\n    () => ({\n      indexAxis: 'y',\n      animation: false,\n      responsive: true,\n      maintainAspectRatio: false,\n      onClick: (_event, elements) => {\n        const target = chartTargets[elements[0]?.datasetIndex ?? -1];\n        if (target?.type === TIMELINE_TYPE.turn) onSelectTurn?.(target.bar.turnIndex);\n      },\n      onHover: (event, elements) => {\n        const hoveredDatasetIndex = elements[0]?.datasetIndex;\n        const next = hoveredDatasetIndex == null ? null : (chartTargets[hoveredDatasetIndex] ?? null);\n        const native = event.native;\n        if (native?.target instanceof HTMLElement) {\n          native.target.style.cursor = next?.type === TIMELINE_TYPE.turn ? 'pointer' : 'default';\n        }\n        if (native instanceof MouseEvent) {\n          tooltipCursorXRef.current = native.clientX;\n          refreshTooltipAnchor();\n        }\n        // Pointer between bars keeps the current tooltip; a bar without a tooltip dismisses it.\n        if (hoveredDatasetIndex == null) return;\n        const nextId = getTimelineHoverTargetId(next);\n        if (tooltipIdRef.current === nextId) return;\n        tooltipIdRef.current = nextId;\n        setTooltipTarget(next);\n        if (next == null) {\n          setTooltipAnchor(null);\n          return;\n        }\n        refreshTooltipAnchor();\n      },\n      plugins: { legend: { display: false }, tooltip: { enabled: false } },\n      scales: {\n        x: {\n          type: 'linear',\n          position: 'top',\n          min: 0,\n          max: timelineMaxMs,\n          grid: { color: grid },\n          border: { color: grid },\n          afterBuildTicks: scale => {\n            scale.ticks = buildTimelineAxisTicks({\n              ticks: scale.ticks,\n              totalMs,\n              timelineMaxMs,\n            });\n          },\n          ticks: {\n            color: axis,\n            autoSkip: false,\n            includeBounds: true,\n            maxTicksLimit: 9,\n            stepSize: timelineMaxMs / 8,\n            callback: value => {\n              const timelineMs = Number(value);\n              return timelineMs <= totalMs ? formatTimelineDuration(getActiveTimelineMs(timelineMs, timelineGaps)) : '';\n            },\n          },\n        },\n        y: {\n          type: 'linear',\n          display: false,\n          reverse: true,\n          offset: false,\n          min: 0,\n          max: band,\n          grid: { display: false },\n        },\n      },\n    }),\n    [axis, band, chartTargets, grid, onSelectTurn, refreshTooltipAnchor, timelineGaps, timelineMaxMs, totalMs],\n  );\n\n  const tooltipTurn = tooltipTarget?.type === TIMELINE_TYPE.turn ? turns[tooltipTarget.bar.turnIndex] : undefined;\n  const containerStyle = useMemo<CSSProperties>(() => ({ height: band + overheadPx }), [band, overheadPx]);\n  const tooltipContent =\n    tooltipTarget?.type === TIMELINE_TYPE.turn && tooltipTurn != null ? (\n      <SessionTurnTooltip\n        turn={tooltipTurn}\n        turnNumber={tooltipTarget.bar.ordinal + 1}\n        durationMs={tooltipTarget.bar.durationMs}\n        segments={segments.filter(segment => segment.turnIndex === tooltipTarget.bar.turnIndex)}\n      />\n    ) : tooltipTarget?.type === TIMELINE_TYPE.event && hasSessionEventTooltip(tooltipTarget.segment) ? (\n      <SessionEventTooltip\n        segment={tooltipTarget.segment}\n        subAgentLabel={\n          tooltipTarget.segment.type === 'sub_agent'\n            ? undefined\n            : subAgentLanes.find(lane => lane.threadId === tooltipTarget.segment.threadId)?.track.description\n        }\n      />\n    ) : tooltipTarget?.type === TIMELINE_TYPE.toolCallGroup ? (\n      <SessionToolCallGroupTooltip group={tooltipTarget.group} />\n    ) : tooltipTarget?.type === TIMELINE_TYPE.subAgentGroup ? (\n      <SessionSubAgentGroupTooltip group={tooltipTarget.group} />\n    ) : null;\n\n  return (\n    <div ref={wrapperRef} className=\"w-full\" data-slot=\"agent-session-event-timeline-chart\">\n      <LightTooltip\n        title={tooltipContent}\n        side=\"bottom\"\n        triggerClassName=\"block w-full\"\n        followCursor\n        open={tooltipTarget != null && tooltipContent != null}\n        className=\"max-w-[min(25rem,calc(100vw-1rem))] whitespace-normal\"\n        anchor={tooltipAnchor}\n      >\n        <div className=\"w-full\" style={containerStyle} onMouseLeave={clearTooltip}>\n          <Bar data={chartData} options={chartOptions} plugins={[turnLabelPlugin, overheadPlugin]} />\n        </div>\n      </LightTooltip>\n    </div>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentSessionEventTimelineChart: ComponentType<AgentSessionEventTimelineChartProps>;\n  }\n}\n","'use client';\n\nimport { formatCostUsd, formatDurationMs, formatTokenCount } from '../../utils/sessionDisplayFormat.js';\nimport {\n  formatTimelineDuration,\n  getSessionEventColor,\n  getSessionEventTooltipHeading,\n  SESSION_EVENT_TOOLTIP_HIDE_DURATION,\n  type SessionEventTimelineSegment,\n} from '../../utils/sessionEventTimeline.js';\nimport type { TimelineSubAgentGroup, TimelineToolCallGroup } from '../../utils/sessionEventTimelineChart.js';\nimport type { SessionTurnView } from '../../utils/sessionTurnViews.js';\n\nexport function hasSessionEventTooltip(segment: SessionEventTimelineSegment): boolean {\n  return segment.type !== 'system' || segment.description.trim().length > 0;\n}\n\nexport function SessionEventTooltip({\n  segment,\n  subAgentLabel,\n}: {\n  segment: SessionEventTimelineSegment;\n  subAgentLabel?: string;\n}) {\n  const showDuration = !segment.isMarker && !SESSION_EVENT_TOOLTIP_HIDE_DURATION.has(segment.type);\n  const content = segment.description.trim();\n  if (segment.type === 'system') {\n    if (content.length === 0) return null;\n    return (\n      <p className=\"max-w-[25rem] whitespace-normal break-words text-xs font-medium text-text-primary\">{content}</p>\n    );\n  }\n\n  return (\n    <div className=\"max-h-72 max-w-[25rem] overflow-auto whitespace-normal break-words text-xs\">\n      {subAgentLabel != null ? (\n        <div className=\"border-b border-border py-1.5 text-text-secondary\">{`Sub-Agent: ${subAgentLabel}`}</div>\n      ) : null}\n      <div className=\"flex items-center justify-between gap-3 pt-1\">\n        <span className={segment.type === 'error' ? 'font-medium text-failure-bg' : 'font-medium text-text-secondary'}>\n          {getSessionEventTooltipHeading(segment.type)}\n        </span>\n        {showDuration ? (\n          <span className=\"tabular-nums text-text-secondary\">\n            {formatTimelineDuration(segment.endMs - segment.startMs)}\n          </span>\n        ) : null}\n      </div>\n      {content.length > 0 ? <p className=\"mt-1.5 line-clamp-6 font-medium text-text-primary\">{content}</p> : null}\n    </div>\n  );\n}\n\nexport function SessionTurnTooltip({\n  turn,\n  turnNumber,\n  durationMs,\n  segments,\n}: {\n  turn: SessionTurnView;\n  turnNumber: number;\n  durationMs: number;\n  segments: SessionEventTimelineSegment[];\n}) {\n  return (\n    <div className=\"max-h-72 w-72 max-w-full overflow-auto text-xs text-text-primary\">\n      <div className=\"flex items-center justify-between gap-3\">\n        <span className=\"font-semibold\">{`Turn ${turnNumber}`}</span>\n        <span className=\"tabular-nums text-text-secondary\">{formatDurationMs(durationMs)}</span>\n      </div>\n      <div className=\"mt-1 flex flex-col text-text-secondary\">\n        {turn.totalCostInUsd != null ? <span>{`Cost: ${formatCostUsd(turn.totalCostInUsd)}`}</span> : null}\n        {turn.totalTokens != null ? <span>{`Tokens: ${formatTokenCount(turn.totalTokens)}`}</span> : null}\n      </div>\n      <div className=\"mt-2 border-t border-border pt-2\">\n        {segments.map(segment => {\n          const label =\n            segment.type === 'tool_call' || segment.type === 'sub_agent' ? segment.description : segment.title;\n          return (\n            <div key={segment.id} className=\"flex min-w-0 items-center gap-1.5\">\n              <span\n                className=\"size-1.5 shrink-0 rounded-full\"\n                style={{ backgroundColor: getSessionEventColor(segment.type) }}\n              />\n              <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n              {segment.isMarker ? null : (\n                <span className=\"ml-auto shrink-0 tabular-nums text-text-secondary\">\n                  {formatTimelineDuration(segment.endMs - segment.startMs)}\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nexport function SessionToolCallGroupTooltip({ group }: { group: TimelineToolCallGroup }) {\n  return (\n    <div className=\"max-h-72 w-80 max-w-full overflow-auto text-xs\">\n      <div className=\"flex items-center justify-between gap-3\">\n        <span className=\"font-medium text-text-secondary\">Tool calls</span>\n        <span className=\"tabular-nums text-text-secondary\">{formatTimelineDuration(group.endMs - group.startMs)}</span>\n      </div>\n      <div className=\"mt-1.5 border-t border-border pt-1.5\">\n        {group.segments.map(segment => (\n          <div key={segment.id} className=\"flex items-center justify-between gap-2 py-0.5\">\n            <span className=\"min-w-0 truncate font-medium text-text-primary\">\n              {segment.description || segment.title}\n            </span>\n            <span className=\"shrink-0 tabular-nums text-text-secondary\">\n              {formatTimelineDuration(segment.endMs - segment.startMs)}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport function SessionSubAgentGroupTooltip({ group }: { group: TimelineSubAgentGroup }) {\n  return (\n    <div className=\"max-h-72 w-80 max-w-full overflow-auto text-xs\">\n      <div className=\"flex items-center justify-between gap-3\">\n        <span className=\"font-medium text-text-secondary\">Sub-agents</span>\n        <span className=\"tabular-nums text-text-secondary\">{formatTimelineDuration(group.endMs - group.startMs)}</span>\n      </div>\n      <div className=\"mt-1.5 border-t border-border pt-1.5\">\n        {group.segments.map((segment, index) => (\n          <div key={segment.id} className=\"flex items-center justify-between gap-2 py-0.5\">\n            <span className=\"min-w-0 truncate font-medium text-text-primary\">\n              {`Sub-agent ${index + 1}: ${segment.description || segment.title}`}\n            </span>\n            <span className=\"shrink-0 tabular-nums text-text-secondary\">\n              {formatTimelineDuration(segment.endMs - segment.startMs)}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx"]}