agentic-ui-libs 1.2.0-beta.18 → 1.2.0-beta.19

package/dist/ui-libs.umd.js

@@ -36647,6 +36647,140 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       ] }) })
     ] });
   }
+  const CopyButton$1 = ({
+    text,
+    className = "",
+    iconClassName = "",
+    iconStyle,
+    title = "Copy to clipboard",
+    onCopySuccess,
+    onCopyError,
+    tooltipText = "Copied!",
+    tooltipPosition = "bottom",
+    size = "md"
+  }) => {
+    const [showTooltip, setShowTooltip] = React.useState(false);
+    const getSizeClasses = () => {
+      switch (size) {
+        case "sm":
+          return {
+            button: "p-1",
+            icon: "w-[12px] h-[12px]",
+            tooltip: "text-xs py-1 px-2"
+          };
+        case "lg":
+          return {
+            button: "p-2",
+            icon: "w-[20px] h-[20px]",
+            tooltip: "text-sm py-2 px-3"
+          };
+        default:
+          return {
+            button: "p-1.5",
+            icon: "w-[16px] h-[16px]",
+            tooltip: "text-xs py-1 px-2"
+          };
+      }
+    };
+    const getTooltipPositionClasses = () => {
+      const baseClasses = "absolute bg-gray-800 text-white rounded whitespace-nowrap z-50";
+      switch (tooltipPosition) {
+        case "bottom":
+          return `${baseClasses} top-full mt-1 left-1/2 -translate-x-1/2`;
+        case "left":
+          return `${baseClasses} right-full mr-1 top-1/2 -translate-y-1/2`;
+        case "right":
+          return `${baseClasses} left-full ml-1 top-1/2 -translate-y-1/2`;
+        default:
+          return `${baseClasses} bottom-full mb-1 left-1/2 -translate-x-1/2`;
+      }
+    };
+    const sizeClasses2 = getSizeClasses();
+    const showCopyTooltip = React.useCallback(() => {
+      setShowTooltip(true);
+      setTimeout(() => setShowTooltip(false), 1e3);
+    }, []);
+    const copyToClipboard2 = React.useCallback(async () => {
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          await navigator.clipboard.writeText(text);
+          showCopyTooltip();
+          onCopySuccess == null ? void 0 : onCopySuccess();
+          return;
+        }
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        textArea.style.top = "-999999px";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+          document.execCommand("copy");
+          showCopyTooltip();
+          onCopySuccess == null ? void 0 : onCopySuccess();
+        } catch (err) {
+          const error = err instanceof Error ? err : new Error("Copy failed");
+          console.warn("Copy to clipboard failed:", error);
+          onCopyError == null ? void 0 : onCopyError(error);
+        } finally {
+          document.body.removeChild(textArea);
+        }
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error("Copy failed");
+        console.warn("Copy to clipboard failed:", error);
+        onCopyError == null ? void 0 : onCopyError(error);
+      }
+    }, [text, showCopyTooltip, onCopySuccess, onCopyError]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: copyToClipboard2,
+          className: `${sizeClasses2.button} hover:bg-gray-100 rounded transition-colors ${className}`,
+          title,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `${sizeClasses2.icon} text-gray-400 ${iconClassName}`, style: iconStyle })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `${getTooltipPositionClasses()} ${sizeClasses2.tooltip} transition-opacity duration-150 ${showTooltip ? "opacity-100 animate-fade-in" : "opacity-0 pointer-events-none"}`,
+          style: {
+            visibility: showTooltip ? "visible" : "hidden"
+          },
+          children: tooltipText
+        }
+      )
+    ] });
+  };
+  function CopyableId({ value, truncateLength = 30 }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "copyable-id-wrapper", title: value, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900 truncate", children: TracingUtils.truncate(value, truncateLength) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: "copyable-id-btn",
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          onMouseDown: (e) => e.stopPropagation(),
+          onMouseUp: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CopyButton$1,
+            {
+              text: value,
+              size: "sm",
+              title: "Copy to clipboard",
+              iconClassName: "text-[#667085]"
+            }
+          )
+        }
+      )
+    ] });
+  }
   function Shimmer$2({ className = "", children }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `animate-pulse bg-[#F2F4F7] rounded ${className}`, children });
   }
@@ -104657,6 +104791,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     }, [columns]);
     const handleRowClick = React.useCallback(
       (event) => {
+        var _a;
+        const target = (_a = event.event) == null ? void 0 : _a.target;
+        if (target == null ? void 0 : target.closest(".copyable-id-btn")) return;
         if (onRowClick && event.data) {
           onRowClick(event.data);
         }
@@ -104831,9 +104968,12 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       timeRangePresetLabel,
       onTimeRangeChange,
       filters,
+      filterColumns: filterColumnsProp,
       onFiltersClick,
       onModifyColumnsClick,
       showModifyColumns = true,
+      onClearFilters,
+      onRemoveFilter,
       onRefresh,
       isRefreshing = false
     } = props;
@@ -104878,6 +105018,50 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       }
       return `Searches in ${fields}.`;
     };
+    const activeFilters = filters.filter(TracingUtils.isFilterActive);
+    const [filtersExpanded, setFiltersExpanded] = React.useState(false);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const chipsContainerRef = React.useRef(null);
+    const checkOverflow = React.useCallback(() => {
+      const el = chipsContainerRef.current;
+      if (!el) return;
+      setIsOverflowing(el.scrollHeight > el.clientHeight);
+    }, []);
+    React.useEffect(() => {
+      checkOverflow();
+      window.addEventListener("resize", checkOverflow);
+      return () => window.removeEventListener("resize", checkOverflow);
+    }, [checkOverflow, activeFilters.length]);
+    const getFilterChipLabel = (filter) => {
+      const col = filterColumnsProp == null ? void 0 : filterColumnsProp.find((c2) => c2.field === filter.column);
+      const label = (col == null ? void 0 : col.label) ?? filter.column;
+      let valueText;
+      if (filter.type === "datetime") {
+        valueText = new Date(filter.value).toLocaleDateString();
+      } else if (filter.type === "number") {
+        valueText = parseFloat(filter.value).toLocaleString();
+      } else if (Array.isArray(filter.value)) {
+        valueText = filter.value.length <= 2 ? filter.value.join(", ") : `${filter.value.length} selected`;
+      } else {
+        valueText = String(filter.value ?? "");
+      }
+      const shortOp = {
+        "=": "",
+        "!=": "≠ ",
+        ">": "> ",
+        ">=": "≥ ",
+        "<": "< ",
+        "<=": "≤ ",
+        "contains": "~ ",
+        "does not contain": "!~ ",
+        "starts with": "starts ",
+        "ends with": "ends ",
+        "any of": "",
+        "none of": "not "
+      };
+      const op = shortOp[filter.operator] ?? `${filter.operator} `;
+      return `${label}: ${op}${valueText}`;
+    };
     const handleDateRangeChange = (dateRange, presetLabel) => {
       if (dateRange && dateRange.from && dateRange.to) {
         const fromDate = dateRange.from;
@@ -105030,7 +105214,66 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             }
           )
         ] })
-      ] })
+      ] }),
+      activeFilters.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: "flex items-start gap-[8px] border border-gray-200 rounded-[8px] px-[12px] py-[8px]",
+          "data-test-id": "tracing-filter-chips",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] font-medium leading-[28px] text-gray-500 shrink-0", children: "Filters" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                ref: chipsContainerRef,
+                className: `flex items-center gap-[8px] flex-wrap flex-1 min-w-0 ${!filtersExpanded ? "max-h-[28px] overflow-hidden" : ""}`,
+                children: activeFilters.map((filter, idx) => {
+                  const originalIndex = filters.indexOf(filter);
+                  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: "inline-flex items-center gap-[4px] h-[28px] px-[10px] py-[4px] bg-blue-50 border border-blue-200 rounded-[6px] text-[12px] leading-[16px] text-blue-800 max-w-[260px]",
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-medium", children: getFilterChipLabel(filter) }),
+                        onRemoveFilter && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "button",
+                          {
+                            onClick: () => onRemoveFilter(originalIndex),
+                            className: "flex items-center justify-center shrink-0 text-blue-400 hover:text-blue-700 transition-colors",
+                            title: "Remove filter",
+                            children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[14px] h-[14px]", strokeWidth: 2 })
+                          }
+                        )
+                      ]
+                    },
+                    `chip-${idx}`
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] shrink-0 leading-[28px]", children: [
+              (isOverflowing || filtersExpanded) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setFiltersExpanded((prev) => !prev),
+                  className: "text-[12px] font-medium text-blue-600 hover:text-blue-800 transition-colors whitespace-nowrap",
+                  "data-test-id": "tracing-filter-toggle",
+                  children: filtersExpanded ? "View less" : "View all"
+                }
+              ),
+              onClearFilters && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: onClearFilters,
+                  className: "text-[12px] font-medium text-gray-500 hover:text-gray-700 transition-colors whitespace-nowrap",
+                  "data-test-id": "tracing-filter-clear-all",
+                  children: "Clear all"
+                }
+              )
+            ] })
+          ]
+        }
+      )
     ] });
   }
   function ColumnCustomization(props) {
@@ -106109,6 +106352,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
      * Observations are loaded separately per trace when user expands
      */
     async fetchSessionDetail(sessionId) {
+      var _a, _b;
       const sessionResponse = await this.apiService.fetchSessionById({
         sessionId,
         projectId: this.projectId
@@ -106123,6 +106367,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         );
         traceDetails = traceResponses.map((trace) => this.transformToTraceDetailData(trace));
       }
+      const firstTraceForSource = (_a = sessionResponse.traces) == null ? void 0 : _a[0];
+      const sessionLevelSource = typeof sessionResponse.source === "string" && sessionResponse.source.length > 0 ? sessionResponse.source : void 0;
+      const firstTraceSource = firstTraceForSource && typeof firstTraceForSource.source === "string" && firstTraceForSource.source.length > 0 ? firstTraceForSource.source : void 0;
+      const resolvedSource = sessionLevelSource ?? firstTraceSource ?? ((_b = traceDetails[0]) == null ? void 0 : _b.source);
       return {
         id: sessionResponse.id,
         projectId: sessionResponse.projectId,
@@ -106130,7 +106378,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         bookmarked: false,
         public: false,
         traces: traceDetails,
-        scores: []
+        scores: [],
+        source: resolvedSource
       };
     }
     /**
@@ -106202,15 +106451,21 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
      * @param onRemainingTrace - Callback for each additional trace as it loads (updates skeleton)
      */
     async fetchSessionDetailProgressive(sessionId, onSessionMeta, onFirstTrace, onRemainingTrace) {
+      var _a, _b;
       const sessionResponse = await this.apiService.fetchSessionById({
         sessionId,
         projectId: this.projectId
       });
       const traceIds = (sessionResponse.traces || []).map((t) => t.id);
+      const firstTrace = (_a = sessionResponse.traces) == null ? void 0 : _a[0];
+      const firstTraceSource = firstTrace && typeof firstTrace.source === "string" && firstTrace.source.length > 0 ? firstTrace.source : void 0;
+      const sessionLevelSource = typeof sessionResponse.source === "string" && sessionResponse.source.length > 0 ? sessionResponse.source : void 0;
+      const resolvedSessionSource = sessionLevelSource ?? firstTraceSource;
       onSessionMeta({
         id: sessionResponse.id,
         traceCount: traceIds.length,
-        traceIds
+        traceIds,
+        source: resolvedSessionSource
       });
       if (traceIds.length === 0) {
         return {
@@ -106220,7 +106475,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           bookmarked: false,
           public: false,
           traces: [],
-          scores: []
+          scores: [],
+          source: resolvedSessionSource
         };
       }
       const firstTraceId = traceIds[0];
@@ -106267,7 +106523,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         bookmarked: false,
         public: false,
         traces: allTraces,
-        scores: []
+        scores: [],
+        source: resolvedSessionSource ?? ((_b = allTraces[0]) == null ? void 0 : _b.source)
       };
     }
     // ============================================================================
@@ -106361,6 +106618,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         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)
         ),
@@ -106769,6 +107027,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     onNodeSelect,
     onExpandToggle,
     showTraceId = true,
+    onTraceIdClick,
     isLoading = false,
     defaultExpandedNodeIds,
     runHeaderInputMode = "display"
@@ -106829,7 +107088,16 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[4px] w-full mb-[8px]", children: [
       showTraceId && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-[8px] items-center px-0 py-[4px] w-full", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] leading-[12px] text-[#98A2B3]", children: "Trace ID" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-[10px] leading-[12px] text-[#667085]", children: trace.id }),
+        onTraceIdClick ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            onClick: () => onTraceIdClick(trace.id),
+            className: "font-medium text-[10px] leading-[12px] text-[#155EEF] hover:underline cursor-pointer bg-transparent border-none p-0",
+            title: "View Trace Details",
+            "data-test-id": `trace-tree-id-link-${trace.id}`,
+            children: trace.id
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium text-[10px] leading-[12px] text-[#667085]", children: trace.id }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -106948,114 +107216,6 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       ] })
     ] });
   }
-  const CopyButton$1 = ({
-    text,
-    className = "",
-    iconClassName = "",
-    iconStyle,
-    title = "Copy to clipboard",
-    onCopySuccess,
-    onCopyError,
-    tooltipText = "Copied!",
-    tooltipPosition = "bottom",
-    size = "md"
-  }) => {
-    const [showTooltip, setShowTooltip] = React.useState(false);
-    const getSizeClasses = () => {
-      switch (size) {
-        case "sm":
-          return {
-            button: "p-1",
-            icon: "w-[12px] h-[12px]",
-            tooltip: "text-xs py-1 px-2"
-          };
-        case "lg":
-          return {
-            button: "p-2",
-            icon: "w-[20px] h-[20px]",
-            tooltip: "text-sm py-2 px-3"
-          };
-        default:
-          return {
-            button: "p-1.5",
-            icon: "w-[16px] h-[16px]",
-            tooltip: "text-xs py-1 px-2"
-          };
-      }
-    };
-    const getTooltipPositionClasses = () => {
-      const baseClasses = "absolute bg-gray-800 text-white rounded whitespace-nowrap z-50";
-      switch (tooltipPosition) {
-        case "bottom":
-          return `${baseClasses} top-full mt-1 left-1/2 -translate-x-1/2`;
-        case "left":
-          return `${baseClasses} right-full mr-1 top-1/2 -translate-y-1/2`;
-        case "right":
-          return `${baseClasses} left-full ml-1 top-1/2 -translate-y-1/2`;
-        default:
-          return `${baseClasses} bottom-full mb-1 left-1/2 -translate-x-1/2`;
-      }
-    };
-    const sizeClasses2 = getSizeClasses();
-    const showCopyTooltip = React.useCallback(() => {
-      setShowTooltip(true);
-      setTimeout(() => setShowTooltip(false), 1e3);
-    }, []);
-    const copyToClipboard2 = React.useCallback(async () => {
-      try {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          await navigator.clipboard.writeText(text);
-          showCopyTooltip();
-          onCopySuccess == null ? void 0 : onCopySuccess();
-          return;
-        }
-        const textArea = document.createElement("textarea");
-        textArea.value = text;
-        textArea.style.position = "fixed";
-        textArea.style.left = "-999999px";
-        textArea.style.top = "-999999px";
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        try {
-          document.execCommand("copy");
-          showCopyTooltip();
-          onCopySuccess == null ? void 0 : onCopySuccess();
-        } catch (err) {
-          const error = err instanceof Error ? err : new Error("Copy failed");
-          console.warn("Copy to clipboard failed:", error);
-          onCopyError == null ? void 0 : onCopyError(error);
-        } finally {
-          document.body.removeChild(textArea);
-        }
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error("Copy failed");
-        console.warn("Copy to clipboard failed:", error);
-        onCopyError == null ? void 0 : onCopyError(error);
-      }
-    }, [text, showCopyTooltip, onCopySuccess, onCopyError]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative inline-flex", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          onClick: copyToClipboard2,
-          className: `${sizeClasses2.button} hover:bg-gray-100 rounded transition-colors ${className}`,
-          title,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `${sizeClasses2.icon} text-gray-400 ${iconClassName}`, style: iconStyle })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: `${getTooltipPositionClasses()} ${sizeClasses2.tooltip} transition-opacity duration-150 ${showTooltip ? "opacity-100 animate-fade-in" : "opacity-0 pointer-events-none"}`,
-          style: {
-            visibility: showTooltip ? "visible" : "hidden"
-          },
-          children: tooltipText
-        }
-      )
-    ] });
-  };
   function __awaiter(thisArg, _arguments, P2, generator) {
     function adopt(value) {
       return value instanceof P2 ? value : new P2(function(resolve) {
@@ -108812,10 +108972,12 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           showHeader: true,
           useEnhancedJsonView: true,
           collapseStringsAfterLength: 500,
-          collapseObjectsAfterLength: 20,
+          collapseObjectsAfterLength: selectedTab === "metadata" ? 100 : 20,
+          defaultExpanded: selectedTab === "metadata",
           maxHeight: "100%",
           className: "h-full border-0 rounded-none"
-        }
+        },
+        selectedTab
       ) })
     ] });
   }
@@ -109184,6 +109346,521 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       )
     ] });
   }
+  const MicIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { flexShrink: 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",
+        style: { 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",
+        style: { stroke: "#155EEF", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        d: "M8 9V11",
+        style: { stroke: "#155EEF", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        d: "M6.5 11H9.5",
+        style: { 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",
+        xmlns: "http://www.w3.org/2000/svg",
+        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",
+        xmlns: "http://www.w3.org/2000/svg",
+        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 d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return "--:--:--:---";
+    const hh = String(d.getHours()).padStart(2, "0");
+    const mm = String(d.getMinutes()).padStart(2, "0");
+    const ss = String(d.getSeconds()).padStart(2, "0");
+    const ms = String(d.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] = React.useState("json");
+    const [fullscreen, setFullscreen] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const displayText = viewMode === "json" ? payload : compactText;
+    const handleCopy = React.useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(displayText);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      } catch {
+      }
+    }, [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 = React.useMemo(() => stringifyPayload(event.payload), [event.payload]);
+    const compactText = React.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] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [expandedIds, setExpandedIds] = React.useState(() => /* @__PURE__ */ new Set());
+    React.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 = React.useMemo(() => flattenEvents(rawData), [rawData]);
+    React.useEffect(() => {
+      if (!isOpen) return;
+      const handleKey = (e) => {
+        if (e.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handleKey);
+      return () => document.removeEventListener("keydown", handleKey);
+    }, [isOpen, onClose]);
+    React.useEffect(() => {
+      if (!isOpen) {
+        setExpandedIds(/* @__PURE__ */ new Set());
+        setRawData(null);
+        setError(null);
+      }
+    }, [isOpen]);
+    const toggleRow = React.useCallback((id) => {
+      setExpandedIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    }, []);
+    const expandAll = React.useCallback(() => {
+      setExpandedIds(new Set(events.map((e) => e.id)));
+    }, [events]);
+    const collapseAll = React.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: (e) => e.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
+              ))
+            ] }) })
+          ]
+        }
+      )
+    ] }) });
+  }
+  const SESSION_SOURCES_WITH_EVENT_LOGS = /* @__PURE__ */ new Set(["AIS-CC", "XO"]);
+  function sessionSourceShowsEventLogs(source) {
+    if (source === void 0 || source === "") {
+      return false;
+    }
+    return SESSION_SOURCES_WITH_EVENT_LOGS.has(source);
+  }
   function DetailPage({
     mode: initialMode,
     sessionId: initialSessionId,
@@ -109196,7 +109873,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     batchSize = DEFAULT_BATCH_SIZE,
     initialTraceCount,
     initialSessionData,
-    runHeaderInputMode = "display"
+    runHeaderInputMode = "display",
+    onViewEventLogs,
+    fetchEventLogs
   }) {
     const [currentMode, setCurrentMode] = React.useState(initialMode);
     const [currentSessionId, setCurrentSessionId] = React.useState(initialSessionId);
@@ -109206,6 +109885,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     const traceId = currentTraceId;
     const [selectedNode, setSelectedNode] = React.useState(null);
     const [copiedId, setCopiedId] = React.useState(false);
+    const [isEventLogsOpen, setIsEventLogsOpen] = React.useState(false);
     const minObservationLevel = "DEFAULT";
     const [hasAutoSelected, setHasAutoSelected] = React.useState(false);
     const hasInitialData = mode === "session" && initialSessionData;
@@ -109251,7 +109931,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                   bookmarked: false,
                   public: false,
                   traces: [],
-                  scores: []
+                  scores: [],
+                  source: meta.source
                 });
                 setLoadingState("success");
               },
@@ -109259,7 +109940,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               (trace, observations) => {
                 setSessionData((prev) => prev ? {
                   ...prev,
-                  traces: [trace]
+                  traces: [trace],
+                  source: prev.source ?? trace.source
                 } : prev);
                 setTraceObservations((prev) => ({
                   ...prev,
@@ -109435,6 +110117,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         } : null
       };
     }, [mode, sessionData, traceData, sessionId, traceId, initialSessionData]);
+    const sessionSourceForEventLogs = React.useMemo(() => {
+      return (initialSessionData == null ? void 0 : initialSessionData.source) ?? (sessionData == null ? void 0 : sessionData.source);
+    }, [initialSessionData == null ? void 0 : initialSessionData.source, sessionData == null ? void 0 : sessionData.source]);
+    const showEventLogsBanner = mode === "session" && sessionSourceShowsEventLogs(sessionSourceForEventLogs);
     const traces = React.useMemo(() => {
       if (mode === "session" && sessionData) {
         const sorted = [...sessionData.traces].sort((a2, b) => {
@@ -109483,6 +110169,16 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       mode,
       traceData
     ]);
+    const handleViewEventLogs = React.useCallback(() => {
+      setIsEventLogsOpen(true);
+      if (onViewEventLogs && sessionId) {
+        const firstTraceId = traces.length > 0 ? traces[0].id : void 0;
+        onViewEventLogs(sessionId, firstTraceId);
+      }
+    }, [onViewEventLogs, sessionId, traces]);
+    const handleCloseEventLogs = React.useCallback(() => {
+      setIsEventLogsOpen(false);
+    }, []);
     const handleNodeSelect = React.useCallback((node) => {
       setSelectedNode(node);
     }, []);
@@ -109531,6 +110227,23 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         firstTraceId: null
       });
     }, []);
+    const handleNavigateToTrace = React.useCallback((targetTraceId) => {
+      setSelectedNode(null);
+      setSessionData(null);
+      setTraceData(null);
+      setTraceObservations({});
+      setLoadingState("idle");
+      setError(null);
+      setHasAutoSelected(false);
+      setCurrentMode("trace");
+      setCurrentTraceId(targetTraceId);
+      setProgressiveState({
+        traceCount: 0,
+        pendingTraceIds: [],
+        firstTraceLoaded: false,
+        firstTraceId: null
+      });
+    }, []);
     if (loadingState === "loading") {
       const canShowHeader = mode === "session" && initialSessionData;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col bg-white ${className}`, children: [
@@ -109682,6 +110395,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       ] }),
       /* @__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;
@@ -109699,6 +110413,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
                 onNodeSelect: handleNodeSelect,
                 onExpandToggle: () => handleTraceExpand(trace.id, trace.timestamp),
                 showTraceId: mode === "session",
+                onTraceIdClick: mode === "session" ? handleNavigateToTrace : void 0,
                 isLoading: isLoadingObservations,
                 defaultExpandedNodeIds: autoExpandIds,
                 runHeaderInputMode
@@ -109730,7 +110445,16 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             generationSummaryInputOverride
           }
         )
-      ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EventLogsSlideout,
+        {
+          isOpen: isEventLogsOpen,
+          onClose: handleCloseEventLogs,
+          sessionId: sessionId ?? null,
+          fetchEventLogs
+        }
+      )
     ] });
   }
   const trace1Observations = [
@@ -110144,8 +110868,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     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 { environments } = useEnvironment();
+    const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId, onViewEventLogs, fetchEventLogs } = props;
+    const { environments, resolveEnvironmentName } = useEnvironment();
     const [selectedSessionId, setSelectedSessionId] = React.useState(() => initialSessionId ?? null);
     const [selectedSessionData, setSelectedSessionData] = React.useState(null);
     const [isModalOpen, setIsModalOpen] = React.useState(() => !!initialSessionId);
@@ -110153,6 +110877,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     const [totalCount, setTotalCount] = React.useState(0);
     const [loading, setLoading] = React.useState(true);
     const [hasInitiallyLoaded, setHasInitiallyLoaded] = React.useState(false);
+    const [appVersionOptions, setAppVersionOptions] = React.useState([]);
+    const [searchTerm, setSearchTerm] = React.useState("");
     const initialFilters = React.useMemo(() => {
       const hasEnvFilter = defaultFilters.some((f) => f.column === "envId");
       const base2 = hasEnvFilter ? defaultFilters : [createDraftEnvironmentFilter$1(), ...defaultFilters];
@@ -110175,6 +110901,26 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         setIsModalOpen(true);
       }
     }, [initialSessionId]);
+    React.useEffect(() => {
+      const fetchAppVersions = async () => {
+        try {
+          const filterOptionsData = await apiService.fetchFilterOptions({
+            projectId: apiConfig.projectId
+          });
+          if ((filterOptionsData == null ? void 0 : filterOptionsData.appvIds) && Array.isArray(filterOptionsData.appvIds)) {
+            setAppVersionOptions(
+              filterOptionsData.appvIds.map((item) => ({
+                value: item.value,
+                label: item.value
+              }))
+            );
+          }
+        } catch (error) {
+          console.warn("Failed to fetch app version filter options:", error);
+        }
+      };
+      fetchAppVersions();
+    }, [apiService, apiConfig.projectId]);
     const convertPresetToDateRange = (preset) => {
       const now2 = /* @__PURE__ */ new Date();
       let pastDate;
@@ -110236,7 +110982,6 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         });
       }
       const allFilters = [...timeFilters, ...filters];
-      if (apiConfig.projectId) ;
       return allFilters;
     }, [timeRange, filters]);
     const fetchSessions = React.useCallback(async () => {
@@ -110296,6 +111041,28 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     React.useEffect(() => {
       fetchSessions();
     }, [fetchSessions]);
+    const filteredSessions = React.useMemo(() => {
+      const term = searchTerm.trim().toLowerCase();
+      if (!term) return sessions;
+      return sessions.filter((session) => {
+        var _a;
+        const envName = ((_a = resolveEnvironmentName(session.envId)) == null ? void 0 : _a.toLowerCase()) || "";
+        const searchableFields = [
+          session.id,
+          envName,
+          session.envId,
+          session.appvId,
+          session.source,
+          session.environment,
+          session.sessionReference,
+          session.userReference,
+          ...session.userIds || []
+        ];
+        return searchableFields.some(
+          (field) => field && String(field).toLowerCase().includes(term)
+        );
+      });
+    }, [sessions, searchTerm, resolveEnvironmentName]);
     const defaultColumns = React.useMemo(
       () => [
         {
@@ -110304,8 +111071,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           width: 320,
           pinned: "left",
           hide: false,
-          // Pinned columns should always be visible
-          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900", title: params.value, children: TracingUtils.truncate(params.value, 30) })
+          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableId, { value: params.value, truncateLength: 30 })
         },
         {
           field: "envId",
@@ -110432,6 +111198,20 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           disabled: true,
           valueFormatter: (params) => TracingUtils.formatTokens(params.value),
           cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", children: TracingUtils.formatTokens(params.value) })
+        },
+        {
+          field: "sessionReference",
+          headerName: "Session Reference",
+          width: 180,
+          hide: true,
+          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: params.value || "-", children: params.value || "-" })
+        },
+        {
+          field: "identity",
+          headerName: "User Reference",
+          width: 180,
+          hide: true,
+          cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: params.value || "-", children: params.value || "-" })
         }
         // {
         //   field: 'traceTags',
@@ -110551,8 +111331,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           // User-friendly label
           apiColumnName: "App Version ID",
           // API expects "App Version ID" (koretracing uiTableName)
-          type: "string",
-          operators: ["=", "!=", "contains"]
+          type: "stringOptions",
+          operators: ["any of", "none of"],
+          options: appVersionOptions
         },
         {
           field: "source",
@@ -110604,10 +111385,27 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           // API expects "Output Tokens" (koretracing uiTableName)
           type: "number",
           operators: ["=", ">", ">=", "<", "<="]
+        },
+        {
+          field: "sessionReference",
+          label: "Session Reference",
+          apiColumnName: "Session Reference",
+          type: "string",
+          operators: ["=", "!=", "contains"]
+        },
+        {
+          field: "identity",
+          label: "User Reference",
+          apiColumnName: "User Reference",
+          type: "string",
+          operators: ["=", "!=", "contains"]
         }
       ],
-      [environments]
+      [environments, appVersionOptions]
     );
+    const handleSearch = React.useCallback((term) => {
+      setSearchTerm(term);
+    }, []);
     const handleTimeRangeChange = (value, presetLabel) => {
       console.log("🗓️ SessionsList: Time range change requested:", value, presetLabel);
       setTimeRange(value);
@@ -110631,7 +111429,8 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         totalCost: session.totalCost,
         totalTokens: session.totalTokens,
         sessionDuration: session.sessionDuration,
-        createdAt: session.createdAt
+        createdAt: session.createdAt,
+        source: session.source
       });
       setIsModalOpen(true);
       if (onSessionClick) {
@@ -110649,6 +111448,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     };
     const handleClearFilters = () => {
       setFilters([]);
+      setSearchTerm("");
       setTimeRange("24 hours");
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col w-full ${className}`, children: [
@@ -110657,11 +111457,19 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
         {
           title: "Sessions",
           description: "Review session logs and trace details to analyze conversation logs and app behavior.",
-          showSearch: false,
+          searchPlaceholder: "Search sessions...",
+          showSearch: true,
+          searchConfig: {
+            metadataSearchFields: ["Session ID", "Environment", "App Version", "User ID", "Source"],
+            updateQuery: handleSearch,
+            currentQuery: searchTerm,
+            tableAllowsFullTextSearch: false
+          },
           timeRange,
           timeRangePresetLabel,
           onTimeRangeChange: handleTimeRangeChange,
           filters,
+          filterColumns,
           onFiltersClick: () => setShowFilterPanel(!showFilterPanel),
           onModifyColumnsClick: () => setShowColumnCustomization(true),
           onExportClick: handleExport,
@@ -110712,10 +111520,10 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto p-[24px] pt-[8px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         TracingTable,
         {
-          data: sessions,
+          data: filteredSessions,
           columns,
           loading,
-          totalCount,
+          totalCount: searchTerm.trim() ? filteredSessions.length : totalCount,
           pagination,
           onPaginationChange: setPagination,
           onRowClick: handleRowClick,
@@ -110732,7 +111540,9 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           sessionId: selectedSessionId,
           apiConfig,
           onClose: handleModalClose,
-          initialSessionData: selectedSessionData || void 0
+          initialSessionData: selectedSessionData || void 0,
+          onViewEventLogs,
+          fetchEventLogs
         }
       ) })
     ] });
@@ -110773,7 +111583,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
     const [loading, setLoading] = React.useState(true);
     const [hasInitiallyLoaded, setHasInitiallyLoaded] = React.useState(false);
     const [searchTerm, setSearchTerm] = React.useState("");
-    const [searchType, setSearchType] = React.useState(["id"]);
+    const [searchType, setSearchType] = React.useState(["id", "content"]);
     const initialFilters = React.useMemo(() => {
       const hasEnvFilter = defaultFilters.some((f) => f.column === "envId");
       const base2 = hasEnvFilter ? defaultFilters : [createDraftEnvironmentFilter(), ...defaultFilters];
@@ -111005,8 +111815,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             width: 320,
             pinned: "left",
             hide: false,
-            // Pinned columns should always be visible
-            cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-900", title: params.value, children: TracingUtils.truncate(params.value, 30) })
+            cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableId, { value: params.value, truncateLength: 30 })
           }
         ];
         {
@@ -111198,6 +112007,20 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
               return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", children: source || "-" });
             }
           },
+          {
+            field: "sessionReference",
+            headerName: "Session Reference",
+            width: 180,
+            hide: true,
+            cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: params.value || "-", children: params.value || "-" })
+          },
+          {
+            field: "identity",
+            headerName: "User Reference",
+            width: 180,
+            hide: true,
+            cellRenderer: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-700", title: params.value || "-", children: params.value || "-" })
+          },
           {
             field: "promptTokens",
             headerName: "Input Tokens",
@@ -111467,6 +112290,20 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
             label: "Output Tokens",
             type: "number",
             operators: ["=", ">", ">=", "<", "<="]
+          },
+          {
+            field: "sessionReference",
+            label: "Session Reference",
+            apiColumnName: "Session Reference",
+            type: "string",
+            operators: ["=", "!=", "contains"]
+          },
+          {
+            field: "identity",
+            label: "User Reference",
+            apiColumnName: "User Reference",
+            type: "string",
+            operators: ["=", "!=", "contains"]
           }
         );
         return baseColumns;
@@ -111533,6 +112370,7 @@ For more info see: https://www.ag-grid.com/javascript-grid/modules/`;
           timeRangePresetLabel,
           onTimeRangeChange: handleTimeRangeChange,
           filters,
+          filterColumns,
           onFiltersClick: () => setShowFilterPanel(!showFilterPanel),
           onModifyColumnsClick: () => setShowColumnCustomization(true),
           onExportClick: handleExport,