agentic-ui-libs 1.2.0-beta.21 → 1.2.0-beta.23

package/dist/index.js

@@ -106506,6 +106506,7 @@ class DetailPageService {
       );
       traceDetails = traceResponses.map((trace) => this.transformToTraceDetailData(trace));
     }
+    const resolvedSessionReference = typeof sessionResponse.sessionReference === "string" && sessionResponse.sessionReference.trim() !== "" ? sessionResponse.sessionReference.trim() : void 0;
     return {
       id: sessionResponse.id,
       projectId: sessionResponse.projectId,
@@ -106513,7 +106514,8 @@ class DetailPageService {
       bookmarked: false,
       public: false,
       traces: traceDetails,
-      scores: []
+      scores: [],
+      sessionReference: resolvedSessionReference
     };
   }
   /**
@@ -106590,10 +106592,12 @@ class DetailPageService {
       projectId: this.projectId
     });
     const traceIds = (sessionResponse.traces || []).map((t2) => t2.id);
+    const resolvedSessionReference = typeof sessionResponse.sessionReference === "string" && sessionResponse.sessionReference.trim() !== "" ? sessionResponse.sessionReference.trim() : void 0;
     onSessionMeta({
       id: sessionResponse.id,
       traceCount: traceIds.length,
-      traceIds
+      traceIds,
+      sessionReference: resolvedSessionReference
     });
     if (traceIds.length === 0) {
       return {
@@ -106603,7 +106607,8 @@ class DetailPageService {
         bookmarked: false,
         public: false,
         traces: [],
-        scores: []
+        scores: [],
+        sessionReference: resolvedSessionReference
       };
     }
     const firstTraceId = traceIds[0];
@@ -106650,7 +106655,8 @@ class DetailPageService {
       bookmarked: false,
       public: false,
       traces: allTraces,
-      scores: []
+      scores: [],
+      sessionReference: resolvedSessionReference
     };
   }
   // ============================================================================
@@ -106744,6 +106750,7 @@ class DetailPageService {
       totalCost: trace.totalCost || trace.calculatedTotalCost,
       totalTokens: trace.totalTokens,
       environment: trace.environment,
+      source: typeof trace.source === "string" && trace.source.length > 0 ? trace.source : void 0,
       observations: (trace.observations || []).map(
         (obs) => this.transformObservation(obs)
       ),
@@ -109471,6 +109478,526 @@ function NodeDetailPanel({
     )
   ] });
 }
+const MicIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "shrink-0", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M8 2C7.60218 2 7.22064 2.15804 6.93934 2.43934C6.65804 2.72064 6.5 3.10218 6.5 3.5V6.5C6.5 6.89782 6.65804 7.27936 6.93934 7.56066C7.22064 7.84196 7.60218 8 8 8C8.39782 8 8.77936 7.84196 9.06066 7.56066C9.34196 7.27936 9.5 6.89782 9.5 6.5V3.5C9.5 3.10218 9.34196 2.72064 9.06066 2.43934C8.77936 2.15804 8.39782 2 8 2Z",
+      fill: "#155EEF"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M5.5 6V6.5C5.5 7.16304 5.76339 7.79893 6.23223 8.26777C6.70107 8.73661 7.33696 9 8 9C8.66304 9 9.29893 8.73661 9.76777 8.26777C10.2366 7.79893 10.5 7.16304 10.5 6.5V6",
+      stroke: "#155EEF",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M8 9V11",
+      stroke: "#155EEF",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M6.5 11H9.5",
+      stroke: "#155EEF",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+function VoiceEventLogsBanner({ onViewEventLogs }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded-[8px] bg-[#FFFFFF] border border-[#D0D5DD] px-[12px] py-[8px] mb-[8px]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(MicIcon, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-[11px] leading-[14px] text-[#98A2B3] uppercase tracking-[0.04em]", children: "Voice-to-Voice Event Logs" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        onClick: onViewEventLogs,
+        className: "text-[12px] font-medium text-[#155EEF] hover:text-[#344054] hover:underline transition-colors cursor-pointer bg-transparent border-none p-0",
+        "data-test-id": "view-event-logs-btn",
+        children: "View Event Logs"
+      }
+    )
+  ] });
+}
+function AlignLeftIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          d: "M10.6667 6.66667H2M13.3333 4H2M13.3333 9.33333H2M10.6667 12H2",
+          stroke: "currentColor",
+          strokeWidth: "1.3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function JsonViewIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          d: "M14 6.16602H8M14 2.66602H2M14 9.83268H8M14 13.3327H2M2.85333 5.70602L5.43111 7.63935C5.62411 7.78409 5.7206 7.85647 5.75511 7.94519C5.78533 8.02291 5.78533 8.10913 5.75511 8.18684C5.7206 8.27556 5.62411 8.34794 5.43111 8.49268L2.85333 10.426C2.57868 10.632 2.44135 10.735 2.3264 10.7326C2.22637 10.7305 2.13256 10.6836 2.07088 10.6048C2 10.5143 2 10.3427 2 9.99935V6.13268C2 5.78937 2 5.61771 2.07088 5.52718C2.13256 5.4484 2.22637 5.4015 2.3264 5.39942C2.44135 5.39703 2.57868 5.50003 2.85333 5.70602Z",
+          stroke: "currentColor",
+          strokeWidth: "1.3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function pickString(obj, keys2) {
+  for (const key of keys2) {
+    const value = obj[key];
+    if (typeof value === "string" && value.length > 0) return value;
+    if (typeof value === "number") return String(value);
+  }
+  return void 0;
+}
+function coerceDirection(raw) {
+  if (raw === "incoming" || raw === "server" || raw === "response") return "in";
+  return "out";
+}
+function normalizeEvent(raw, fallbackId, docTimestamp) {
+  if (!raw || typeof raw !== "object") {
+    return {
+      id: fallbackId,
+      timestamp: docTimestamp,
+      name: "event",
+      direction: "out",
+      payload: raw
+    };
+  }
+  const obj = raw;
+  const id = pickString(obj, ["event_id", "eventId", "_id", "id"]) ?? fallbackId;
+  const name = pickString(obj, ["type", "eventType", "event", "name"]) ?? "event";
+  const direction = coerceDirection(obj.direction);
+  return {
+    id,
+    timestamp: docTimestamp,
+    name,
+    direction,
+    payload: raw
+  };
+}
+function flattenEvents(data) {
+  if (data === null || data === void 0) return [];
+  const out = [];
+  const visitDoc = (doc2, docIdx) => {
+    if (!doc2 || typeof doc2 !== "object") return;
+    const docObj = doc2;
+    const docTimestamp = pickString(docObj, ["createdOn", "sT", "createdAt"]);
+    const events = docObj.events;
+    if (Array.isArray(events)) {
+      events.forEach((ev, evIdx) => {
+        out.push(normalizeEvent(ev, `${docIdx}-${evIdx}`, docTimestamp));
+      });
+    } else {
+      out.push(normalizeEvent(doc2, String(docIdx), docTimestamp));
+    }
+  };
+  if (Array.isArray(data)) {
+    data.forEach((doc2, docIdx) => visitDoc(doc2, docIdx));
+    return out;
+  }
+  if (typeof data === "object") {
+    const obj = data;
+    if (Array.isArray(obj.events)) {
+      visitDoc(obj, 0);
+      return out;
+    }
+    if (Array.isArray(obj.data)) {
+      return flattenEvents(obj.data);
+    }
+  }
+  return [];
+}
+function formatEventTime(iso) {
+  if (!iso) return "--:--:--:---";
+  const d3 = new Date(iso);
+  if (Number.isNaN(d3.getTime())) return "--:--:--:---";
+  const hh = String(d3.getHours()).padStart(2, "0");
+  const mm = String(d3.getMinutes()).padStart(2, "0");
+  const ss = String(d3.getSeconds()).padStart(2, "0");
+  const ms = String(d3.getMilliseconds()).padStart(3, "0");
+  return `${hh}:${mm}:${ss}:${ms}`;
+}
+function stringifyPayload(payload) {
+  if (payload === null || payload === void 0) return "";
+  if (typeof payload === "string") {
+    try {
+      return JSON.stringify(JSON.parse(payload), null, 2);
+    } catch {
+      return payload;
+    }
+  }
+  try {
+    return JSON.stringify(payload, null, 2);
+  } catch {
+    return String(payload);
+  }
+}
+function compactPayload(payload) {
+  if (payload === null || payload === void 0) return "";
+  if (typeof payload === "string") {
+    try {
+      return JSON.stringify(JSON.parse(payload));
+    } catch {
+      return payload;
+    }
+  }
+  try {
+    return JSON.stringify(payload);
+  } catch {
+    return String(payload);
+  }
+}
+function PayloadPanel({ payload, compactText }) {
+  const [viewMode, setViewMode] = useState("json");
+  const [fullscreen, setFullscreen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const displayText = viewMode === "json" ? payload : compactText;
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(displayText);
+      setCopied(true);
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+    } catch {
+    } finally {
+      setCopied(false);
+    }
+  }, [displayText]);
+  const toolbar = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[42px] px-[10px] border-b border-[#D0D5DD] flex items-center justify-between flex-shrink-0 bg-white", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setViewMode("json"),
+          className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "json" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
+          title: "Pretty JSON",
+          "aria-label": "Pretty JSON view",
+          "aria-pressed": viewMode === "json",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewIcon, { className: "w-[16px] h-[16px]" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setViewMode("text"),
+          className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "text" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
+          title: "Compact text",
+          "aria-label": "Compact text view",
+          "aria-pressed": viewMode === "text",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeftIcon, { className: "w-[16px] h-[16px]" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setFullscreen((v) => !v),
+          className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
+          title: fullscreen ? "Exit fullscreen" : "Fullscreen",
+          "aria-label": fullscreen ? "Exit fullscreen" : "Fullscreen",
+          children: fullscreen ? /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize2, { className: "w-[16px] h-[16px]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { className: "w-[16px] h-[16px]" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => void handleCopy(),
+          className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
+          title: "Copy to clipboard",
+          "aria-label": "Copy payload",
+          "data-test-id": "event-logs-row-copy",
+          children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[16px] h-[16px] text-[#12B76A]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-[16px] h-[16px]" })
+        }
+      )
+    ] })
+  ] });
+  if (fullscreen) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[20000] flex flex-col bg-[#F9FAFB]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[48px] px-[16px] border-b border-[#E4E7EC] flex items-center justify-between flex-shrink-0 bg-white", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setViewMode("json"),
+              className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "json" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
+              title: "Pretty JSON",
+              "aria-label": "Pretty JSON view",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewIcon, { className: "w-[16px] h-[16px]" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setViewMode("text"),
+              className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "text" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
+              title: "Compact text",
+              "aria-label": "Compact text view",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeftIcon, { className: "w-[16px] h-[16px]" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void handleCopy(),
+              className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
+              title: "Copy to clipboard",
+              "aria-label": "Copy payload",
+              children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[16px] h-[16px] text-[#12B76A]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-[16px] h-[16px]" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setFullscreen(false),
+              className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
+              title: "Exit fullscreen",
+              "aria-label": "Exit fullscreen",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize2, { className: "w-[16px] h-[16px]" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "flex-1 overflow-auto m-0 p-[20px] text-[13px] leading-[20px] font-mono text-[#344054] whitespace-pre-wrap break-all", children: displayText })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-[10px] border border-[#D0D5DD] overflow-hidden mt-[12px]", children: [
+    toolbar,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "m-0 bg-[#F9FAFB] text-[#344054] p-[12px] text-[12px] leading-[18px] font-mono whitespace-pre-wrap break-all overflow-auto max-h-[360px]", children: displayText })
+  ] });
+}
+function EventRow({ event, isExpanded, onToggle }) {
+  const jsonText = useMemo(() => stringifyPayload(event.payload), [event.payload]);
+  const compactText = useMemo(() => compactPayload(event.payload), [event.payload]);
+  const hasPayload = jsonText.length > 0;
+  const isInput = event.direction === "in";
+  const DirectionIcon = isInput ? ArrowUp : ArrowDown;
+  const directionLabel = isInput ? "Input" : "Output";
+  const circleClasses = isInput ? "border-[#079455] text-[#079455]" : "border-[#D92D20] text-[#D92D20]";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex items-start gap-[12px]", "data-test-id": "event-logs-row", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex-shrink-0 flex flex-col items-center w-[16px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: `relative z-10 w-[16px] h-[16px] rounded-full bg-white border flex items-center justify-center ${circleClasses}`,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(DirectionIcon, { className: "w-[8px] h-[8px]", strokeWidth: 2.5 })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 pb-[24px]", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-[16px]", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[12px] leading-[16px] text-[#667085]", children: directionLabel }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[14px] leading-[20px] font-medium text-[#344054] mt-[2px] break-all", children: event.name }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onToggle,
+              className: "text-[13px] leading-[18px] text-[#155EEF] hover:underline mt-[4px] font-medium",
+              "data-test-id": "event-logs-view-details",
+              children: isExpanded ? "Hide details" : "View details"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0 text-[12px] leading-[18px] text-[#344054] font-mono tabular-nums whitespace-nowrap pt-[2px]", children: formatEventTime(event.timestamp) })
+      ] }),
+      isExpanded && (hasPayload ? /* @__PURE__ */ jsxRuntimeExports.jsx(PayloadPanel, { payload: jsonText, compactText }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-[12px] text-[12px] text-[#667085] italic", children: "No payload recorded for this event." }))
+    ] })
+  ] });
+}
+function EventLogsSlideout({
+  isOpen,
+  onClose,
+  sessionId,
+  fetchEventLogs
+}) {
+  const [rawData, setRawData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (!isOpen || !sessionId || !fetchEventLogs) return;
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setRawData(null);
+    (async () => {
+      try {
+        const data = await fetchEventLogs(sessionId);
+        if (cancelled) return;
+        setRawData(data);
+      } catch (err) {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : "Failed to fetch event logs");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen, sessionId, fetchEventLogs]);
+  const events = useMemo(() => flattenEvents(rawData), [rawData]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e3) => {
+      if (e3.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, onClose]);
+  useEffect(() => {
+    if (!isOpen) {
+      setExpandedIds(/* @__PURE__ */ new Set());
+      setRawData(null);
+      setError(null);
+    }
+  }, [isOpen]);
+  const toggleRow = useCallback((id) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const expandAll = useCallback(() => {
+    setExpandedIds(new Set(events.map((e3) => e3.id)));
+  }, [events]);
+  const collapseAll = useCallback(() => {
+    setExpandedIds(/* @__PURE__ */ new Set());
+  }, []);
+  if (!isOpen) return null;
+  const showToolbar = !loading && !error && events.length > 0;
+  const allExpanded = showToolbar && expandedIds.size === events.length;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[10000]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/40",
+        onClick: onClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "absolute top-0 right-0 bottom-0 bg-white shadow-2xl flex flex-col",
+        style: { width: "720px", maxWidth: "100vw" },
+        role: "dialog",
+        "aria-label": "Event Logs",
+        onClick: (e3) => e3.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between h-[56px] px-[20px] border-b border-[#E4E7EC] flex-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[16px] font-semibold text-[#101828]", children: "Event Logs" }),
+              !loading && !error && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] font-medium text-[#667085] bg-[#F2F4F7] rounded-[10px] px-[8px] py-[2px]", children: events.length })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
+              showToolbar && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: allExpanded ? collapseAll : expandAll,
+                  className: "text-[13px] font-medium text-[#155EEF] hover:underline px-[8px] py-[6px] rounded-[6px] transition-colors",
+                  "data-test-id": "event-logs-toggle-all",
+                  children: allExpanded ? "Collapse all" : "Expand all"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "p-[8px] rounded-[6px] hover:bg-[#F2F4F7] transition-colors",
+                  title: "Close Event Logs",
+                  "aria-label": "Close Event Logs",
+                  "data-test-id": "event-logs-close-btn",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-[#344054]" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-[8px] text-[13px] text-[#667085]", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-[20px] h-[20px] animate-spin text-[#155EEF]" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Loading event logs…" })
+          ] }) : error ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-[8px] text-[13px] text-[#B42318] px-[24px] text-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Couldn't load event logs" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] text-[#667085]", children: error })
+          ] }) : events.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full flex items-center justify-center text-[13px] text-[#667085]", children: "No events recorded for this session yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative px-[24px] pt-[28px] pb-[8px]", children: [
+            events.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: "absolute w-px bg-[#D0D5DD]",
+                style: { left: "32px", top: "36px", bottom: "28px" },
+                "aria-hidden": "true"
+              }
+            ),
+            events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              EventRow,
+              {
+                event,
+                isExpanded: expandedIds.has(event.id),
+                onToggle: () => toggleRow(event.id)
+              },
+              event.id
+            ))
+          ] }) })
+        ]
+      }
+    )
+  ] }) });
+}
+function hasNonEmptySessionReference(ref) {
+  return typeof ref === "string" && ref.trim().length > 0;
+}
 function DetailPage({
   mode: initialMode,
   sessionId: initialSessionId,
@@ -109483,7 +110010,9 @@ function DetailPage({
   batchSize = DEFAULT_BATCH_SIZE,
   initialTraceCount,
   initialSessionData,
-  runHeaderInputMode = "display"
+  runHeaderInputMode = "display",
+  onViewEventLogs,
+  fetchEventLogs
 }) {
   const [currentMode, setCurrentMode] = useState(initialMode);
   const [currentSessionId, setCurrentSessionId] = useState(initialSessionId);
@@ -109493,6 +110022,7 @@ function DetailPage({
   const traceId = currentTraceId;
   const [selectedNode, setSelectedNode] = useState(null);
   const [copiedId, setCopiedId] = useState(false);
+  const [isEventLogsOpen, setIsEventLogsOpen] = useState(false);
   const minObservationLevel = "DEFAULT";
   const [hasAutoSelected, setHasAutoSelected] = useState(false);
   const hasInitialData = mode === "session" && initialSessionData;
@@ -109538,7 +110068,8 @@ function DetailPage({
                 bookmarked: false,
                 public: false,
                 traces: [],
-                scores: []
+                scores: [],
+                sessionReference: meta.sessionReference
               });
               setLoadingState("success");
             },
@@ -109722,6 +110253,10 @@ function DetailPage({
       } : null
     };
   }, [mode, sessionData, traceData, sessionId, traceId, initialSessionData]);
+  const sessionReferenceForEventLogs = useMemo(() => {
+    return (initialSessionData == null ? void 0 : initialSessionData.sessionReference) ?? (sessionData == null ? void 0 : sessionData.sessionReference);
+  }, [initialSessionData == null ? void 0 : initialSessionData.sessionReference, sessionData == null ? void 0 : sessionData.sessionReference]);
+  const showEventLogsBanner = mode === "session" && hasNonEmptySessionReference(sessionReferenceForEventLogs);
   const traces = useMemo(() => {
     if (mode === "session" && sessionData) {
       const sorted = [...sessionData.traces].sort((a4, b2) => {
@@ -109770,6 +110305,16 @@ function DetailPage({
     mode,
     traceData
   ]);
+  const handleViewEventLogs = useCallback(() => {
+    setIsEventLogsOpen(true);
+    if (onViewEventLogs && sessionId) {
+      const firstTraceId = traces.length > 0 ? traces[0].id : void 0;
+      onViewEventLogs(sessionId, firstTraceId);
+    }
+  }, [onViewEventLogs, sessionId, traces]);
+  const handleCloseEventLogs = useCallback(() => {
+    setIsEventLogsOpen(false);
+  }, []);
   const handleNodeSelect = useCallback((node) => {
     setSelectedNode(node);
   }, []);
@@ -109986,6 +110531,7 @@ function DetailPage({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[480px] min-w-[400px] max-w-[600px] border-r border-[#E4E7EC] flex flex-col bg-[#F9FAFB] overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 p-[16px]", children: [
+        showEventLogsBanner && /* @__PURE__ */ jsxRuntimeExports.jsx(VoiceEventLogsBanner, { onViewEventLogs: handleViewEventLogs }),
         traces.length === 0 && loadingState === "success" && progressiveState.traceCount === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[32px] text-center text-[13px] text-[#667085]", children: "No traces available" }),
         traces.map((trace, index) => {
           var _a, _b, _c, _d;
@@ -110035,7 +110581,16 @@ function DetailPage({
           generationSummaryInputOverride
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      EventLogsSlideout,
+      {
+        isOpen: isEventLogsOpen,
+        onClose: handleCloseEventLogs,
+        sessionId: sessionId ?? null,
+        fetchEventLogs
+      }
+    )
   ] });
 }
 const trace1Observations = [
@@ -110449,7 +111004,7 @@ function EnvironmentNameCell$1({ envId }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", title: envId || "-", children: displayName });
 }
 function SessionsListContent(props) {
-  const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId } = props;
+  const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId, onViewEventLogs, fetchEventLogs } = props;
   const { environments, resolveEnvironmentName } = useEnvironment();
   const [selectedSessionId, setSelectedSessionId] = useState(() => initialSessionId ?? null);
   const [selectedSessionData, setSelectedSessionData] = useState(null);
@@ -111010,7 +111565,8 @@ function SessionsListContent(props) {
       totalCost: session.totalCost,
       totalTokens: session.totalTokens,
       sessionDuration: session.sessionDuration,
-      createdAt: session.createdAt
+      createdAt: session.createdAt,
+      sessionReference: session.sessionReference
     });
     setIsModalOpen(true);
     if (onSessionClick) {
@@ -111120,7 +111676,9 @@ function SessionsListContent(props) {
         sessionId: selectedSessionId,
         apiConfig,
         onClose: handleModalClose,
-        initialSessionData: selectedSessionData || void 0
+        initialSessionData: selectedSessionData || void 0,
+        onViewEventLogs,
+        fetchEventLogs
       }
     ) })
   ] });
@@ -112996,6 +113554,57 @@ function calculateNodeMetrics(node) {
   return { totalTokens, totalCost, totalDuration };
 }
 class TreeBuilder {
+  static isPreProcessorNode(node) {
+    const normalizedName = (node.name || "").replace(/[^a-z0-9]/gi, "").toLowerCase();
+    return node.type === "tool" && normalizedName === "preprocessor";
+  }
+  static normalizeNodeName(name) {
+    return (name || "").replace(/[^a-z0-9]/gi, "").toLowerCase();
+  }
+  static normalizeLinkedEventType(node) {
+    var _a;
+    const linkedEventType = (_a = node.metadata) == null ? void 0 : _a.linkedEventType;
+    if (typeof linkedEventType !== "string" || linkedEventType.trim().length === 0) {
+      return null;
+    }
+    return linkedEventType.replace(/[^a-z0-9]/gi, "").toLowerCase();
+  }
+  static normalizeParentId(parentId) {
+    if (typeof parentId !== "string") {
+      return parentId ?? null;
+    }
+    const trimmedParentId = parentId.trim();
+    if (trimmedParentId.length === 0 || trimmedParentId.toLowerCase() === "null" || trimmedParentId.toLowerCase() === "undefined") {
+      return null;
+    }
+    return trimmedParentId;
+  }
+  static isTargetSystemEventNode(node) {
+    const normalizedName = this.normalizeNodeName(node.name || "");
+    if (this.TARGET_EVENT_NAMES.has(normalizedName)) return true;
+    return typeof node.type === "string" && node.type.toLowerCase() === "event";
+  }
+  static compareNodesForDisplay(a4, b2) {
+    const aIsPreProcessor = this.isPreProcessorNode(a4);
+    const bIsPreProcessor = this.isPreProcessorNode(b2);
+    const aIsTargetEvent = this.isTargetSystemEventNode(a4);
+    const bIsTargetEvent = this.isTargetSystemEventNode(b2);
+    const aLinkedEventType = this.normalizeLinkedEventType(a4);
+    const bLinkedEventType = this.normalizeLinkedEventType(b2);
+    const aTargetName = this.normalizeNodeName(a4.name || "");
+    const bTargetName = this.normalizeNodeName(b2.name || "");
+    if (aIsPreProcessor && bIsTargetEvent && aLinkedEventType !== null && aLinkedEventType === bTargetName) {
+      return -1;
+    }
+    if (aIsTargetEvent && bIsPreProcessor && bLinkedEventType !== null && bLinkedEventType === aTargetName) {
+      return 1;
+    }
+    const timestampDiff = new Date(a4.startTime).getTime() - new Date(b2.startTime).getTime();
+    if (timestampDiff !== 0) {
+      return timestampDiff;
+    }
+    return (a4.name || "").localeCompare(b2.name || "");
+  }
   /**
    * Process execution events and build a hierarchical tree structure
    * Session > Run > Node Tree
@@ -113054,6 +113663,7 @@ class TreeBuilder {
       const node = this.createTreeNodeFromEvents(startedEvent, completedEvent, runId);
       nodes.push(node);
     }
+    this.alignEventPreProcessorNodes(nodes);
     const rootNodes = this.buildNodeHierarchy(nodes);
     const runEvents = events.filter((e3) => e3.runId === runId);
     const startTime = Math.min(...runEvents.map((e3) => new Date(e3.data.timestamp).getTime()));
@@ -113136,8 +113746,10 @@ class TreeBuilder {
     nodes.forEach((node) => nodeMap.set(node.id, node));
     const rootNodes = [];
     nodes.forEach((node) => {
-      if (node.parentId && nodeMap.has(node.parentId)) {
-        const parent = nodeMap.get(node.parentId);
+      const normalizedParentId = this.normalizeParentId(node.parentId);
+      node.parentId = normalizedParentId;
+      if (normalizedParentId && nodeMap.has(normalizedParentId)) {
+        const parent = nodeMap.get(normalizedParentId);
         parent.children.push(node);
         node.level = parent.level + 1;
       } else {
@@ -113145,12 +113757,98 @@ class TreeBuilder {
         node.level = 0;
       }
     });
-    rootNodes.sort(
-      (a4, b2) => new Date(a4.startTime).getTime() - new Date(b2.startTime).getTime()
-    );
+    rootNodes.sort((a4, b2) => this.compareNodesForDisplay(a4, b2));
     rootNodes.forEach((root2) => this.sortChildren(root2));
+    this.relocateRootEventPreProcessors(rootNodes);
     return rootNodes;
   }
+  static alignEventPreProcessorNodes(nodes) {
+    const targetEvents = nodes.filter((node) => this.isTargetSystemEventNode(node)).sort((a4, b2) => new Date(a4.startTime).getTime() - new Date(b2.startTime).getTime());
+    if (targetEvents.length === 0) {
+      return;
+    }
+    const orphanPreProcessors = nodes.filter((node) => this.isPreProcessorNode(node) && this.normalizeParentId(node.parentId) === null).sort((a4, b2) => new Date(a4.startTime).getTime() - new Date(b2.startTime).getTime());
+    for (const preProcessorNode of orphanPreProcessors) {
+      const linkedEventType = this.normalizeLinkedEventType(preProcessorNode);
+      if (linkedEventType === null) {
+        continue;
+      }
+      const candidateEvents = targetEvents.filter(
+        (eventNode) => this.normalizeNodeName(eventNode.name || "") === linkedEventType
+      );
+      if (candidateEvents.length === 0) {
+        continue;
+      }
+      const preProcessorTime = new Date(preProcessorNode.startTime).getTime();
+      let selectedTargetEvent = candidateEvents[0];
+      let minDistance = Number.POSITIVE_INFINITY;
+      for (const targetEvent of candidateEvents) {
+        const distance = Math.abs(new Date(targetEvent.startTime).getTime() - preProcessorTime);
+        if (distance < minDistance) {
+          selectedTargetEvent = targetEvent;
+          minDistance = distance;
+        }
+      }
+      preProcessorNode.parentId = this.normalizeParentId(selectedTargetEvent.parentId);
+    }
+  }
+  static relocateRootEventPreProcessors(rootNodes) {
+    var _a;
+    const preprocessorsAtRoot = rootNodes.filter((node) => this.isPreProcessorNode(node));
+    if (preprocessorsAtRoot.length === 0) {
+      return;
+    }
+    const collectTargetNodes = (nodesToSearch, parentNode2, collector) => {
+      nodesToSearch.forEach((node, index) => {
+        if (this.isTargetSystemEventNode(node)) {
+          collector.push({ node, siblings: nodesToSearch, index, parentNode: parentNode2 });
+        }
+        if (node.children.length > 0) {
+          collectTargetNodes(node.children, node, collector);
+        }
+      });
+    };
+    const targetNodes = [];
+    collectTargetNodes(rootNodes, null, targetNodes);
+    if (targetNodes.length === 0) {
+      return;
+    }
+    const rootSet = new Set(rootNodes);
+    for (const preProcessorNode of preprocessorsAtRoot) {
+      if (!rootSet.has(preProcessorNode)) {
+        continue;
+      }
+      const linkedEventType = this.normalizeLinkedEventType(preProcessorNode);
+      if (linkedEventType === null) {
+        continue;
+      }
+      const candidateTargets = targetNodes.filter(
+        (target) => this.normalizeNodeName(target.node.name || "") === linkedEventType
+      );
+      if (candidateTargets.length === 0) {
+        continue;
+      }
+      const preProcessorTime = new Date(preProcessorNode.startTime).getTime();
+      let selectedTarget = candidateTargets[0];
+      let selectedDistance = Number.POSITIVE_INFINITY;
+      for (const candidate of candidateTargets) {
+        const candidateTime = new Date(candidate.node.startTime).getTime();
+        const distance = Math.abs(candidateTime - preProcessorTime);
+        if (distance < selectedDistance) {
+          selectedTarget = candidate;
+          selectedDistance = distance;
+        }
+      }
+      const rootIndex = rootNodes.indexOf(preProcessorNode);
+      if (rootIndex >= 0) {
+        rootNodes.splice(rootIndex, 1);
+        rootSet.delete(preProcessorNode);
+      }
+      preProcessorNode.parentId = ((_a = selectedTarget.parentNode) == null ? void 0 : _a.id) ?? null;
+      selectedTarget.siblings.splice(selectedTarget.index, 0, preProcessorNode);
+      selectedTarget.siblings.sort((a4, b2) => this.compareNodesForDisplay(a4, b2));
+    }
+  }
   /**
    * Extract LLM usage metadata from output and event metadata (configurable path)
    */
@@ -113242,9 +113940,7 @@ class TreeBuilder {
    */
   static sortChildren(node) {
     if (!node) return;
-    node.children.sort(
-      (a4, b2) => new Date(a4.startTime).getTime() - new Date(b2.startTime).getTime()
-    );
+    node.children.sort((a4, b2) => this.compareNodesForDisplay(a4, b2));
     node.children.forEach((child) => this.sortChildren(child));
   }
   /**
@@ -113498,6 +114194,10 @@ class TreeBuilder {
     );
   }
 }
+__publicField(TreeBuilder, "TARGET_EVENT_NAMES", /* @__PURE__ */ new Set([
+  "endofconversation",
+  "agenthandoff"
+]));
 const CodeEditor = ({
   value,
   onChange,
@@ -114436,7 +115136,7 @@ function DebugCard({
     ] });
   };
   const renderTabContent = () => {
-    var _a2;
+    var _a2, _b, _c;
     switch (activeTab) {
       case "summary":
         if (isGuardrailsNode) {
@@ -114543,10 +115243,16 @@ function DebugCard({
             ] }) });
           }
           if (!useFallbackData && (observationData == null ? void 0 : observationData.input)) {
+            const inputData = {
+              model: observationData == null ? void 0 : observationData.model,
+              ...(observationData == null ? void 0 : observationData.modelParameters) || {},
+              message: observationData == null ? void 0 : observationData.input,
+              tools: typeof (observationData == null ? void 0 : observationData.metadata) === "string" ? ((_a2 = JSON.parse(observationData == null ? void 0 : observationData.metadata)) == null ? void 0 : _a2.tools) || [] : ((_b = observationData == null ? void 0 : observationData.metadata) == null ? void 0 : _b.tools) || []
+            };
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               DataViewer,
               {
-                data: observationData.input,
+                data: inputData,
                 title: "Request Data (API)",
                 maxHeight: "250px",
                 defaultExpanded: false,
@@ -114627,7 +115333,7 @@ function DebugCard({
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           DataViewer,
           {
-            data: ((_a2 = node.metadata) == null ? void 0 : _a2["logs"]) || {},
+            data: ((_c = node.metadata) == null ? void 0 : _c["logs"]) || {},
             title: "Execution Logs",
             maxHeight: "250px",
             defaultExpanded: true,