@localstack/appinspector-ui 1.0.162 → 1.0.164

package/dist/index.js

@@ -2421,8 +2421,8 @@ var init_event_streams = __esm({
 });
 
 // src/pages/spans-list-page.tsx
-import { Box as Box20, Paper as Paper3 } from "@mui/material";
-import { useCallback as useCallback12, useEffect as useEffect22, useRef as useRef17, useState as useState21 } from "react";
+import { Box as Box21, Paper as Paper3 } from "@mui/material";
+import { useCallback as useCallback13, useEffect as useEffect23, useRef as useRef18, useState as useState22 } from "react";
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -2448,6 +2448,13 @@ var ConnectionError = class extends Error {
     this.cause = cause;
   }
 };
+var StaleTokenError = class extends Error {
+  constructor(message, cause) {
+    super(message);
+    this.name = "StaleTokenError";
+    this.cause = cause;
+  }
+};
 
 // src/api/use-api.tsx
 import { createContext, useContext } from "react";
@@ -7405,10 +7412,10 @@ var createHtmlRenderState = function() {
 };
 
 // node_modules/.pnpm/framer-motion@6.5.1_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/framer-motion/dist/es/render/html/use-props.mjs
-function copyRawValuesOnly(target, source, props) {
-  for (var key in source) {
-    if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
-      target[key] = source[key];
+function copyRawValuesOnly(target, source2, props) {
+  for (var key in source2) {
+    if (!isMotionValue(source2[key]) && !isForcedMotionValue(key, props)) {
+      target[key] = source2[key];
     }
   }
 }
@@ -10194,22 +10201,22 @@ function isNear(value, target, maxDistance) {
   }
   return distance(value, target) < maxDistance;
 }
-function calcAxisDelta(delta, source, target, origin) {
+function calcAxisDelta(delta, source2, target, origin) {
   if (origin === void 0) {
     origin = 0.5;
   }
   delta.origin = origin;
-  delta.originPoint = mix(source.min, source.max, delta.origin);
-  delta.scale = calcLength(target) / calcLength(source);
+  delta.originPoint = mix(source2.min, source2.max, delta.origin);
+  delta.scale = calcLength(target) / calcLength(source2);
   if (isNear(delta.scale, 1, 1e-4) || isNaN(delta.scale))
     delta.scale = 1;
   delta.translate = mix(target.min, target.max, delta.origin) - delta.originPoint;
   if (isNear(delta.translate) || isNaN(delta.translate))
     delta.translate = 0;
 }
-function calcBoxDelta(delta, source, target, origin) {
-  calcAxisDelta(delta.x, source.x, target.x, origin === null || origin === void 0 ? void 0 : origin.originX);
-  calcAxisDelta(delta.y, source.y, target.y, origin === null || origin === void 0 ? void 0 : origin.originY);
+function calcBoxDelta(delta, source2, target, origin) {
+  calcAxisDelta(delta.x, source2.x, target.x, origin === null || origin === void 0 ? void 0 : origin.originX);
+  calcAxisDelta(delta.y, source2.y, target.y, origin === null || origin === void 0 ? void 0 : origin.originY);
 }
 function calcRelativeAxis(target, relative, parent) {
   target.min = parent.min + relative.min;
@@ -10266,14 +10273,14 @@ function calcViewportConstraints(layoutBox, constraintsBox) {
     y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y)
   };
 }
-function calcOrigin2(source, target) {
+function calcOrigin2(source2, target) {
   var origin = 0.5;
-  var sourceLength = calcLength(source);
+  var sourceLength = calcLength(source2);
   var targetLength = calcLength(target);
   if (targetLength > sourceLength) {
-    origin = progress(target.min, target.max - sourceLength, source.min);
+    origin = progress(target.min, target.max - sourceLength, source2.min);
   } else if (sourceLength > targetLength) {
-    origin = progress(source.min, source.max - targetLength, target.min);
+    origin = progress(source2.min, source2.max - targetLength, target.min);
   }
   return clamp2(0, 1, origin);
 }
@@ -13087,22 +13094,6 @@ var ResponsiveTimestampCell = memo3(({ date }) => {
   return /* @__PURE__ */ jsx3("span", { style: { display: "inline-block", width: "100%" }, children: formattedTime });
 });
 
-// src/types/error-levels.ts
-var ErrorLevel = {
-  ERROR: 3,
-  // General error
-  IAM_PERMISSION: 5,
-  // IAM permission issues
-  OK: 2,
-  // OK
-  // Standard OTEL status codes
-  UNSET: 1,
-  // Unset
-  // Extended custom levels
-  WARNING: 4
-  // Warning
-};
-
 // src/utils/service-display-name.ts
 var SERVICE_DISPLAY_NAME = {
   "account": "Account",
@@ -15215,6 +15206,22 @@ ServiceCell.displayName = "ServiceCell";
 import { Cancel, Error as Error2, GppBad } from "@mui/icons-material";
 import { Box as Box2, Divider, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
 
+// src/types/error-levels.ts
+var ErrorLevel = {
+  ERROR: 3,
+  // General error
+  IAM_PERMISSION: 5,
+  // IAM permission issues
+  OK: 2,
+  // OK
+  // Standard OTEL status codes
+  UNSET: 1,
+  // Unset
+  // Extended custom levels
+  WARNING: 4
+  // Warning
+};
+
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
   if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {
@@ -15301,25 +15308,7 @@ function parseIAMEvent(payloadString) {
   }
 }
 
-// src/components/cells/status-cell.tsx
-import { Fragment as Fragment2, jsx as jsx124, jsxs as jsxs119 } from "react/jsx-runtime";
-var StatusIcon = ({ errorLevel, operationStatus, spanStatusCode }) => {
-  switch (errorLevel) {
-    case ErrorLevel.ERROR: {
-      return /* @__PURE__ */ jsx124(Cancel, { sx: { color: "red" } });
-    }
-    case ErrorLevel.IAM_PERMISSION: {
-      const isDenial = operationStatus ? operationStatus === "iam_explicit_deny" || operationStatus === "iam_implicit_deny" : spanStatusCode === 2;
-      return /* @__PURE__ */ jsx124(GppBad, { sx: { color: isDenial ? "red" : "warning.main" } });
-    }
-    case ErrorLevel.WARNING: {
-      return /* @__PURE__ */ jsx124(Error2, { sx: { color: "orange" } });
-    }
-    default: {
-      return /* @__PURE__ */ jsx124(Fragment2, {});
-    }
-  }
-};
+// src/utils/error-level.ts
 var calculateHighestErrorLevel = (span) => {
   if (span.operation_status) {
     switch (span.operation_status) {
@@ -15351,6 +15340,26 @@ var calculateHighestErrorLevel = (span) => {
   if (hasWarning) return ErrorLevel.WARNING;
   return span.status_code || ErrorLevel.UNSET;
 };
+
+// src/components/cells/status-cell.tsx
+import { Fragment as Fragment2, jsx as jsx124, jsxs as jsxs119 } from "react/jsx-runtime";
+var StatusIcon = ({ errorLevel, operationStatus, spanStatusCode }) => {
+  switch (errorLevel) {
+    case ErrorLevel.ERROR: {
+      return /* @__PURE__ */ jsx124(Cancel, { sx: { color: "red" } });
+    }
+    case ErrorLevel.IAM_PERMISSION: {
+      const isDenial = operationStatus ? operationStatus === "iam_explicit_deny" || operationStatus === "iam_implicit_deny" : spanStatusCode === 2;
+      return /* @__PURE__ */ jsx124(GppBad, { sx: { color: isDenial ? "red" : "warning.main" } });
+    }
+    case ErrorLevel.WARNING: {
+      return /* @__PURE__ */ jsx124(Error2, { sx: { color: "orange" } });
+    }
+    default: {
+      return /* @__PURE__ */ jsx124(Fragment2, {});
+    }
+  }
+};
 var SPAN_STATUS_LABELS = {
   0: "Unset",
   1: "OK",
@@ -15520,47 +15529,26 @@ import {
   Typography as Typography4
 } from "@mui/material";
 import { useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx126, jsxs as jsxs121 } from "react/jsx-runtime";
+
+// src/utils/spans-filters.ts
 var EMPTY_FILTERS = {
   consumerService: [],
   producerService: [],
   status: []
 };
 var EXTERNAL_PRODUCER_VALUE = "__external__";
-function applyFilters(spans, filters) {
-  if (isFiltersEmpty(filters)) return spans;
-  return spans.filter((span) => {
-    if (filters.consumerService.length > 0 && !filters.consumerService.includes(span.service_name)) {
-      return false;
-    }
-    if (filters.producerService.length > 0) {
-      const includesExternal = filters.producerService.includes(EXTERNAL_PRODUCER_VALUE);
-      const namedServices = filters.producerService.filter((value) => value !== EXTERNAL_PRODUCER_VALUE);
-      const matchesExternal = includesExternal && !span.parent_service_name;
-      const matchesNamed = namedServices.length > 0 && !!span.parent_service_name && namedServices.includes(span.parent_service_name);
-      if (!matchesExternal && !matchesNamed) return false;
-    }
-    if (filters.status.length > 0) {
-      if (!span.operation_status) return false;
-      if (!filters.status.includes(collapseStatusValue(span.operation_status))) return false;
-    }
-    return true;
-  });
-}
 function isFiltersEmpty(filters) {
   return filters.consumerService.length === 0 && filters.producerService.length === 0 && filters.status.length === 0;
 }
+
+// src/components/spans-list/spans-filter-bar.tsx
+import { Fragment as Fragment4, jsx as jsx126, jsxs as jsxs121 } from "react/jsx-runtime";
 var STATUS_LABELS = {
   error: "Error",
   iam_deny: "IAM Deny",
   iam_warn: "IAM Warning",
   ok: "Success"
 };
-var collapseStatusValue = (status) => {
-  if (status === "iam_explicit_deny" || status === "iam_implicit_deny") return "iam_deny";
-  if (status === "iam_explicit_warn" || status === "iam_implicit_warn") return "iam_warn";
-  return status;
-};
 var statusOptionIcon = (value) => {
   switch (value) {
     case "error": {
@@ -15860,21 +15848,29 @@ var SpansDataGridRow = memo8(
 );
 var SpansDataGrid = ({
   clearingSpans,
+  consumerValues,
   errorCount: _errorCount,
   fetchingBackward,
   fetchingForward,
+  filteredErrorCount,
+  filteredSpans,
+  filteredWarningCount,
+  filters,
+  hasExternalProducer,
   hasMoreBackward,
   hasMoreForward,
   licenseLimit,
   onClearSpans,
+  onFiltersChange,
   onOrderChange,
   onSearchChange,
   onSpanClick,
   order: order2,
+  producerValues,
   search,
   searching,
   searchSupported,
-  spans,
+  statusValues,
   systemLimit,
   totalCount,
   warningCount: _warningCount
@@ -15889,7 +15885,6 @@ var SpansDataGrid = ({
       clearTimeout(handle);
     };
   }, [searchDraft, onSearchChange]);
-  const [filters, setFilters] = useState6(EMPTY_FILTERS);
   const filtersActive = !isFiltersEmpty(filters);
   const activeFilterNames = [
     filters.producerService.length > 0 && "Producer",
@@ -15904,17 +15899,15 @@ var SpansDataGrid = ({
   const handleClearAll = useCallback2(() => {
     setSearchDraft("");
     onSearchChange("");
-    setFilters(EMPTY_FILTERS);
-  }, [onSearchChange]);
+    onFiltersChange(EMPTY_FILTERS);
+  }, [onSearchChange, onFiltersChange]);
   const handleClearSpans = useCallback2(() => {
     setSearchDraft("");
-    setFilters(EMPTY_FILTERS);
+    onFiltersChange(EMPTY_FILTERS);
     onClearSpans();
-  }, [onClearSpans]);
+  }, [onClearSpans, onFiltersChange]);
   const producerOptions = useMemo4(() => {
-    const services = new Set(
-      spans?.map((span) => span.parent_service_name).filter(Boolean) ?? []
-    );
+    const services = new Set(producerValues);
     for (const value of filters.producerService) {
       if (value !== EXTERNAL_PRODUCER_VALUE) services.add(value);
     }
@@ -15923,48 +15916,29 @@ var SpansDataGrid = ({
       serviceCode: service,
       value: service
     }));
-    const hasExternalProducer = spans?.some((span) => !span.parent_service_name);
     if (hasExternalProducer || filters.producerService.includes(EXTERNAL_PRODUCER_VALUE)) {
       options.push({ label: "External producer", value: EXTERNAL_PRODUCER_VALUE });
     }
     return options;
-  }, [spans, filters.producerService]);
+  }, [producerValues, hasExternalProducer, filters.producerService]);
   const consumerOptions = useMemo4(() => {
-    const services = new Set(spans?.map((span) => span.service_name) ?? []);
+    const services = new Set(consumerValues);
     for (const value of filters.consumerService) services.add(value);
     return [...services].toSorted().map((service) => ({
       label: getServiceDisplayName(service),
       serviceCode: service,
       value: service
     }));
-  }, [spans, filters.consumerService]);
+  }, [consumerValues, filters.consumerService]);
   const statusOptions = useMemo4(() => {
-    const statuses = new Set(
-      spans?.map((span) => span.operation_status).filter(Boolean).map((s) => collapseStatusValue(s))
-    );
+    const statuses = new Set(statusValues);
     for (const value of filters.status) statuses.add(value);
     return [...statuses].toSorted().map((status) => ({
       icon: statusOptionIcon(status),
       label: STATUS_LABELS[status] ?? status,
       value: status
     }));
-  }, [spans, filters.status]);
-  const filteredSpans = useMemo4(() => {
-    if (!spans) return;
-    if (!filtersActive) return spans;
-    return applyFilters(spans, filters);
-  }, [spans, filters, filtersActive]);
-  const filteredErrorCount = useMemo4(
-    () => filteredSpans?.filter((span) => {
-      const level = calculateHighestErrorLevel(span);
-      return level === ErrorLevel.ERROR || level === ErrorLevel.IAM_PERMISSION;
-    }).length,
-    [filteredSpans]
-  );
-  const filteredWarningCount = useMemo4(
-    () => filteredSpans?.filter((span) => calculateHighestErrorLevel(span) === ErrorLevel.WARNING).length,
-    [filteredSpans]
-  );
+  }, [statusValues, filters.status]);
   const columns = useMemo4(() => [
     columnHelper.accessor("startTime", {
       cell: (props) => /* @__PURE__ */ jsx127(ResponsiveTimestampCell, { date: props.getValue() }),
@@ -16101,7 +16075,7 @@ var SpansDataGrid = ({
     const element = containerRef.current;
     if (!element || !isAtLiveEdgeRef.current) return;
     element.scrollTop = element.scrollHeight;
-  }, [order2, spans?.length, lastSpanId]);
+  }, [order2, filteredSpans?.length, lastSpanId]);
   return /* @__PURE__ */ jsxs122(Fragment5, { children: [
     /* @__PURE__ */ jsx127(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs122(Box5, { sx: { display: "flex", flexDirection: "column", gap: "0.5rem", pt: 1, px: 1 }, children: [
       /* @__PURE__ */ jsxs122(Box5, { sx: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
@@ -16119,7 +16093,7 @@ var SpansDataGrid = ({
           {
             consumerOptions,
             filters,
-            onFiltersChange: setFilters,
+            onFiltersChange,
             producerOptions,
             statusOptions
           }
@@ -16238,7 +16212,7 @@ var SpansDataGrid = ({
                 )) }, headerGroup.id);
               }) }),
               /* @__PURE__ */ jsxs122(TableBody, { children: [
-                (spans === void 0 || clearingSpans || searching) && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                (filteredSpans === void 0 || clearingSpans || searching) && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
                 !clearingSpans && !searching && filteredSpans?.length === 0 && (searchActive || filtersActive ? /* @__PURE__ */ jsx127(
                   NoMatchRow,
                   {
@@ -16345,21 +16319,29 @@ var SpansList = (props) => {
       SpansDataGrid,
       {
         clearingSpans: props.clearingSpans,
+        consumerValues: props.consumerValues,
         errorCount: props.errorCount,
         fetchingBackward: props.fetchingBackward,
         fetchingForward: props.fetchingForward,
+        filteredErrorCount: props.filteredErrorCount,
+        filteredSpans: props.filteredSpans,
+        filteredWarningCount: props.filteredWarningCount,
+        filters: props.filters,
+        hasExternalProducer: props.hasExternalProducer,
         hasMoreBackward: props.hasMoreBackward,
         hasMoreForward: props.hasMoreForward,
         licenseLimit: props.licenseLimit,
         onClearSpans: props.onClearSpans,
+        onFiltersChange: props.onFiltersChange,
         onOrderChange: props.onOrderChange,
         onSearchChange: props.onSearchChange,
         onSpanClick: props.onSpanClick,
         order: props.order,
+        producerValues: props.producerValues,
         search: props.search,
         searching: props.searching,
         searchSupported: props.searchSupported,
-        spans: props.spans,
+        statusValues: props.statusValues,
         systemLimit: props.systemLimit,
         totalCount: props.totalCount,
         warningCount: props.warningCount
@@ -16579,6 +16561,46 @@ var StatusMessage = ({
   return /* @__PURE__ */ jsx129(Fragment6, {});
 };
 
+// src/components/worker-error-message/worker-error-message.tsx
+import { ErrorOutline as ErrorOutline2 } from "@mui/icons-material";
+import { Alert as Alert4, AlertTitle as AlertTitle2, Box as Box8, Button as Button6, Typography as Typography7 } from "@mui/material";
+import { jsx as jsx130, jsxs as jsxs125 } from "react/jsx-runtime";
+var WorkerErrorMessage = ({ error, onRetry }) => /* @__PURE__ */ jsx130(
+  Box8,
+  {
+    sx: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      justifyContent: "center",
+      p: 4
+    },
+    children: /* @__PURE__ */ jsxs125(
+      Alert4,
+      {
+        icon: /* @__PURE__ */ jsx130(ErrorOutline2, { fontSize: "large" }),
+        severity: "error",
+        sx: { maxWidth: 600, width: "100%" },
+        children: [
+          /* @__PURE__ */ jsx130(AlertTitle2, { sx: { fontWeight: "bold" }, children: "Unable to Start Span Filtering" }),
+          /* @__PURE__ */ jsx130(Typography7, { sx: { mb: 2 }, variant: "body2", children: "App Inspector couldn't start the background worker that filters and sorts operations. This is usually caused by a Content-Security-Policy blocking Web Workers in this environment." }),
+          /* @__PURE__ */ jsx130(Typography7, { sx: { fontFamily: "monospace", mb: 2 }, variant: "caption", children: error.message }),
+          onRetry && /* @__PURE__ */ jsx130(Box8, { sx: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsx130(
+            Button6,
+            {
+              "aria-label": "Retry starting the spans filter worker",
+              onClick: onRetry,
+              variant: "outlined",
+              children: "Retry"
+            }
+          ) })
+        ]
+      }
+    )
+  }
+);
+
 // src/hooks/status-provider.tsx
 import { createContext as createContext8, useContext as useContext14 } from "react";
 
@@ -16665,11 +16687,11 @@ function useConnectionStateMachine() {
 }
 
 // src/hooks/status-provider.tsx
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "react/jsx-runtime";
 var AppInspectorStatusContext = createContext8(void 0);
 var StatusProvider = ({ children }) => {
   const value = useConnectionStateMachine();
-  return /* @__PURE__ */ jsx130(AppInspectorStatusContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx131(AppInspectorStatusContext.Provider, { value, children });
 };
 var useAppInspectorStatus = () => {
   const value = useContext14(AppInspectorStatusContext);
@@ -16725,7 +16747,7 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-spans.ts
-import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef10, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect17, useMemo as useMemo6, useRef as useRef11, useState as useState12 } from "react";
 
 // src/utils/pagination-buffer.ts
 var insertSorted = (array, item, compareFunction, hint = "back") => {
@@ -16840,6 +16862,7 @@ var createPaginationBuffer = (options) => {
       nextForwardToken = newPage.nextForwardToken;
       hasMoreBackward ??= newPage.hasMoreBackward;
       nextBackwardToken ??= newPage.nextBackwardToken;
+      options.onPageFetched?.("forward", newPage.items);
       reportDataChange();
     } catch (error) {
       if (controller.signal.aborted) {
@@ -16877,6 +16900,7 @@ var createPaginationBuffer = (options) => {
       nextBackwardToken = newPage.nextBackwardToken;
       hasMoreForward ??= newPage.hasMoreForward;
       nextForwardToken ??= newPage.nextForwardToken;
+      options.onPageFetched?.("backward", newPage.items);
       reportDataChange();
     } catch (error) {
       if (controller.signal.aborted) {
@@ -16941,8 +16965,92 @@ var createPaginationBuffer = (options) => {
   };
 };
 
+// src/workers/spans-reducer.ts
+var toSpanFilterProjection = (span) => ({
+  errors: span.errors?.map((error) => ({ level: error.level })),
+  events: span.events.map((event) => ({
+    attributes: typeof event.attributes?.payload === "string" ? { payload: event.attributes.payload } : void 0,
+    event_type: event.event_type
+  })),
+  operation_status: span.operation_status,
+  parent_service_name: span.parent_service_name,
+  service_name: span.service_name,
+  span_id: span.span_id,
+  start_time_unix_nano: span.start_time_unix_nano,
+  status_code: span.status_code
+});
+
+// src/hooks/use-spans-compute.ts
+import { useCallback as useCallback5, useEffect as useEffect14, useRef as useRef8, useState as useState10 } from "react";
+
+// inline-worker:/home/runner/work/localstack-appinspector-ui/localstack-appinspector-ui/src/workers/spans-worker.worker.ts
+var source = '(() => {\n  // src/types/error-levels.ts\n  var ErrorLevel = {\n    ERROR: 3,\n    // General error\n    IAM_PERMISSION: 5,\n    // IAM permission issues\n    OK: 2,\n    // OK\n    // Standard OTEL status codes\n    UNSET: 1,\n    // Unset\n    // Extended custom levels\n    WARNING: 4\n    // Warning\n  };\n\n  // src/utils/iam-utils.ts\n  function determinePermissionStatus(payload) {\n    if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {\n      return "explicitly_denied";\n    }\n    if (payload.is_allowed && payload.explicit_allow_count && payload.explicit_allow_count > 0) {\n      return "explicitly_allowed";\n    }\n    if (payload.is_allowed) {\n      return "implicitly_allowed";\n    }\n    return "implicitly_denied";\n  }\n  function parseIAMEvent(payloadString) {\n    try {\n      const payload = JSON.parse(payloadString);\n      const permission = determinePermissionStatus(payload);\n      const actions = [];\n      const resources = [];\n      if (payload.explicit_allows) {\n        for (const allow of payload.explicit_allows) {\n          if (!actions.includes(allow.action)) actions.push(allow.action);\n          if (!resources.includes(allow.resource)) resources.push(allow.resource);\n        }\n      }\n      if (payload.explicit_denies) {\n        for (const deny of payload.explicit_denies) {\n          if (!actions.includes(deny.action)) actions.push(deny.action);\n          if (!resources.includes(deny.resource)) resources.push(deny.resource);\n        }\n      }\n      if (payload.implicit_denies) {\n        for (const deny of payload.implicit_denies) {\n          if (!actions.includes(deny.action)) actions.push(deny.action);\n          if (!resources.includes(deny.resource)) resources.push(deny.resource);\n        }\n      }\n      return {\n        details: {\n          actions,\n          explicitAllows: payload.explicit_allow_count,\n          explicitDenies: payload.explicit_deny_count,\n          implicitDenies: payload.implicit_deny_count,\n          resources\n        },\n        operation: payload.operation,\n        permission,\n        principal: payload.principal_arn,\n        service: payload.service\n      };\n    } catch (error) {\n      console.error("Error parsing IAM event payload:", error);\n      return void 0;\n    }\n  }\n\n  // src/utils/error-level.ts\n  var calculateHighestErrorLevel = (span) => {\n    if (span.operation_status) {\n      switch (span.operation_status) {\n        case "error": {\n          return ErrorLevel.ERROR;\n        }\n        case "iam_explicit_deny":\n        case "iam_explicit_warn":\n        case "iam_implicit_deny":\n        case "iam_implicit_warn": {\n          return ErrorLevel.IAM_PERMISSION;\n        }\n        default: {\n          return ErrorLevel.OK;\n        }\n      }\n    }\n    const hasIamDenial = span.events.some((event) => {\n      if (!event.event_type?.toLowerCase().includes("iam")) return false;\n      if (typeof event.attributes?.payload !== "string") return false;\n      const parsed = parseIAMEvent(event.attributes.payload);\n      return parsed?.permission === "explicitly_denied" || parsed?.permission === "implicitly_denied";\n    });\n    if (hasIamDenial) return ErrorLevel.IAM_PERMISSION;\n    if (span.status_code === 2) return ErrorLevel.ERROR;\n    const hasErrorInErrors = span.errors?.some((error) => error.level === "error");\n    if (hasErrorInErrors) return ErrorLevel.ERROR;\n    const hasWarning = span.errors?.some((error) => error.level === "warning");\n    if (hasWarning) return ErrorLevel.WARNING;\n    return span.status_code || ErrorLevel.UNSET;\n  };\n\n  // src/utils/spans-filters.ts\n  var EMPTY_FILTERS = {\n    consumerService: [],\n    producerService: [],\n    status: []\n  };\n  var EXTERNAL_PRODUCER_VALUE = "__external__";\n  function isFiltersEmpty(filters) {\n    return filters.consumerService.length === 0 && filters.producerService.length === 0 && filters.status.length === 0;\n  }\n  var collapseStatusValue = (status) => {\n    if (status === "iam_explicit_deny" || status === "iam_implicit_deny") return "iam_deny";\n    if (status === "iam_explicit_warn" || status === "iam_implicit_warn") return "iam_warn";\n    return status;\n  };\n  function applyFilters(spans, filters) {\n    if (isFiltersEmpty(filters)) return spans;\n    return spans.filter((span) => {\n      if (filters.consumerService.length > 0 && !filters.consumerService.includes(span.service_name)) {\n        return false;\n      }\n      if (filters.producerService.length > 0) {\n        const includesExternal = filters.producerService.includes(EXTERNAL_PRODUCER_VALUE);\n        const namedServices = filters.producerService.filter((value) => value !== EXTERNAL_PRODUCER_VALUE);\n        const matchesExternal = includesExternal && !span.parent_service_name;\n        const matchesNamed = namedServices.length > 0 && !!span.parent_service_name && namedServices.includes(span.parent_service_name);\n        if (!matchesExternal && !matchesNamed) return false;\n      }\n      if (filters.status.length > 0) {\n        if (!span.operation_status) return false;\n        if (!filters.status.includes(collapseStatusValue(span.operation_status))) return false;\n      }\n      return true;\n    });\n  }\n\n  // src/workers/spans-reducer.ts\n  var compareByStartTime = (a, b) => a.start_time_unix_nano < b.start_time_unix_nano ? -1 : 1;\n  var insertSorted = (array, item, compareFunction, hint) => {\n    let left;\n    let right;\n    if (hint === "back") {\n      left = array.length;\n      right = array.length;\n      let step = 1;\n      while (left > 0 && compareFunction(array[left - 1], item) > 0) {\n        right = left;\n        left = Math.max(0, left - step);\n        step *= 2;\n      }\n    } else {\n      left = 0;\n      right = 0;\n      let step = 1;\n      while (right < array.length && compareFunction(array[right], item) <= 0) {\n        left = right + 1;\n        right = Math.min(array.length, right + step);\n        step *= 2;\n      }\n    }\n    while (left < right) {\n      const mid = left + right >>> 1;\n      if (compareFunction(array[mid], item) <= 0) {\n        left = mid + 1;\n      } else {\n        right = mid;\n      }\n    }\n    array.splice(left, 0, item);\n  };\n  var createSpansReducer = () => {\n    let corpus = [];\n    let filters = EMPTY_FILTERS;\n    const computeResult = () => {\n      const filtered = applyFilters(corpus, filters);\n      let errorCount = 0;\n      let warningCount = 0;\n      const orderedFilteredIds = [];\n      for (const entry of filtered) {\n        orderedFilteredIds.push(entry.span_id);\n        if (entry.errorLevel === ErrorLevel.ERROR || entry.errorLevel === ErrorLevel.IAM_PERMISSION) {\n          errorCount++;\n        } else if (entry.errorLevel === ErrorLevel.WARNING) {\n          warningCount++;\n        }\n      }\n      const producers = /* @__PURE__ */ new Set();\n      const consumers = /* @__PURE__ */ new Set();\n      const statuses = /* @__PURE__ */ new Set();\n      let hasExternalProducer = false;\n      for (const entry of corpus) {\n        if (entry.parent_service_name) producers.add(entry.parent_service_name);\n        else hasExternalProducer = true;\n        consumers.add(entry.service_name);\n        if (entry.operation_status) statuses.add(collapseStatusValue(entry.operation_status));\n      }\n      return {\n        consumerValues: [...consumers].toSorted(),\n        errorCount,\n        hasExternalProducer,\n        orderedFilteredIds,\n        producerValues: [...producers].toSorted(),\n        statusValues: [...statuses].toSorted(),\n        warningCount\n      };\n    };\n    return {\n      addPage: (direction, projections) => {\n        const hint = direction === "forward" ? "back" : "front";\n        const sorted = projections.toSorted(compareByStartTime);\n        for (const projection of sorted) {\n          insertSorted(corpus, { ...projection, errorLevel: calculateHighestErrorLevel(projection) }, compareByStartTime, hint);\n        }\n        return computeResult();\n      },\n      clear: () => {\n        corpus = [];\n        filters = EMPTY_FILTERS;\n        return computeResult();\n      },\n      setFilters: (next) => {\n        filters = next;\n        return computeResult();\n      }\n    };\n  };\n\n  // src/workers/spans-worker.worker.ts\n  var context = globalThis;\n  var reducer = createSpansReducer();\n  context.addEventListener("message", (event) => {\n    const request = event.data;\n    const result = request.op === "addPage" ? reducer.addPage(request.direction, request.projections) : request.op === "setFilters" ? reducer.setFilters(request.filters) : reducer.clear();\n    context.postMessage({ result, seq: request.seq });\n  });\n})();\n';
+function createInlineWorker() {
+  const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
+  try {
+    return new Worker(url);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+// src/hooks/use-spans-compute.ts
+var EMPTY_RESULT = {
+  consumerValues: [],
+  errorCount: 0,
+  hasExternalProducer: false,
+  orderedFilteredIds: [],
+  producerValues: [],
+  statusValues: [],
+  warningCount: 0
+};
+var useSpansCompute = () => {
+  const [result, setResult] = useState10(EMPTY_RESULT);
+  const [workerError, setWorkerError] = useState10();
+  const [retryCount, setRetryCount] = useState10(0);
+  const workerRef = useRef8();
+  const seqRef = useRef8(0);
+  const lastAppliedRef = useRef8(0);
+  useEffect14(() => {
+    try {
+      const worker = createInlineWorker();
+      worker.addEventListener("message", (event) => {
+        const { result: nextResult, seq } = event.data;
+        if (seq < lastAppliedRef.current) return;
+        lastAppliedRef.current = seq;
+        setResult(nextResult);
+      });
+      worker.addEventListener("error", (event) => {
+        setWorkerError(new Error(event.message || "Spans filter worker crashed."));
+      });
+      workerRef.current = worker;
+      return () => {
+        worker.terminate();
+        workerRef.current = void 0;
+      };
+    } catch (error) {
+      setWorkerError(error instanceof Error ? error : new Error("Failed to start the spans filter worker."));
+      return;
+    }
+  }, [retryCount]);
+  const retryWorker = useCallback5(() => {
+    setWorkerError(void 0);
+    setRetryCount((count2) => count2 + 1);
+  }, []);
+  const addPage = useCallback5((direction, projections) => {
+    workerRef.current?.postMessage({ direction, op: "addPage", projections, seq: ++seqRef.current });
+  }, []);
+  const setFilters = useCallback5((filters) => {
+    workerRef.current?.postMessage({ filters, op: "setFilters", seq: ++seqRef.current });
+  }, []);
+  const clear = useCallback5(() => {
+    workerRef.current?.postMessage({ op: "clear", seq: ++seqRef.current });
+  }, []);
+  return { addPage, clear, result, retryWorker, setFilters, workerError };
+};
+
 // src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef9, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef10, useState as useState11 } from "react";
 
 // src/config.ts
 var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
@@ -16972,7 +17080,7 @@ var LOCALSTACK_INFO_PATH = "/_localstack/info";
 
 // src/context.tsx
 import { createContext as createContext9, useContext as useContext15 } from "react";
-import { useCallback as useCallback5, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo5 } from "react";
 
 // src/api/client.ts
 var import_semver2 = __toESM(require_semver2(), 1);
@@ -16981,7 +17089,8 @@ var import_semver2 = __toESM(require_semver2(), 1);
 var ERROR_MESSAGES = {
   APP_INSPECTOR_DISABLED: "App Inspector is currently disabled.",
   APP_INSPECTOR_NOT_FOUND: "App Inspector API not found. Please ensure App Inspector is licensed and enabled.",
-  CONNECTION_FAILED: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible."
+  CONNECTION_FAILED: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible.",
+  STALE_PAGINATION_TOKEN: "Pagination token is from a previous session."
 };
 
 // src/utils/logger.ts
@@ -17044,6 +17153,16 @@ function unixNanoToMilliseconds(unixNanoString) {
 // src/api/client.ts
 var apiLogger = createScopedLogger("API");
 var analyticsLogger = createScopedLogger("ANALYTICS");
+var isStalePaginationTokenMessage = (body) => {
+  let candidate = body;
+  try {
+    const parsed = JSON.parse(body);
+    const messageField = [parsed.message, parsed.error, parsed.detail].find((value) => typeof value === "string");
+    candidate = typeof messageField === "string" ? messageField : body;
+  } catch {
+  }
+  return candidate.toLowerCase().includes("previous session");
+};
 var makeRequest = async (options) => {
   const url = getAppInspectorApiUrl(options.localstackEndpoint, options.endpoint);
   try {
@@ -17067,6 +17186,15 @@ var makeRequest = async (options) => {
           new Error(`503 from ${url}: ${response.statusText}`)
         );
       }
+      if (response.status === 400) {
+        const body = await response.text().catch(() => "");
+        if (isStalePaginationTokenMessage(body)) {
+          throw new StaleTokenError(
+            ERROR_MESSAGES.STALE_PAGINATION_TOKEN,
+            new Error(`400 from ${url}: ${response.statusText}`)
+          );
+        }
+      }
       throw new Error(`API request failed: ${response.status.toString()} ${response.statusText}`);
     }
     options.captureHeaders?.(response.headers);
@@ -17221,7 +17349,7 @@ var createApiClient = ({ localstackEndpoint }) => {
 };
 
 // src/hooks/use-appinspector-open-analytics.ts
-import { useEffect as useEffect14, useRef as useRef8 } from "react";
+import { useEffect as useEffect15, useRef as useRef9 } from "react";
 
 // node_modules/.pnpm/ua-parser-js@2.0.9/node_modules/ua-parser-js/src/main/ua-parser.mjs
 var LIBVERSION = "2.0.9";
@@ -19103,8 +19231,8 @@ var useAppInspectorOpenAnalytics = () => {
   const api = useAppInspectorApi();
   const { deploymentContainer } = useAppInspector();
   const { status, statusError } = useAppInspectorStatus();
-  const firedRef = useRef8(false);
-  useEffect14(() => {
+  const firedRef = useRef9(false);
+  useEffect15(() => {
     if (firedRef.current) {
       return;
     }
@@ -19124,7 +19252,7 @@ var useAppInspectorOpenAnalytics = () => {
 };
 
 // src/context.tsx
-import { Fragment as Fragment7, jsx as jsx131 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx132 } from "react/jsx-runtime";
 var AppInspectorContext = createContext9(void 0);
 var useAppInspector = () => {
   const context = useContext15(AppInspectorContext);
@@ -19135,14 +19263,14 @@ var useAppInspector = () => {
 };
 var AppInspectorAnalyticsBoundary = ({ children }) => {
   useAppInspectorOpenAnalytics();
-  return /* @__PURE__ */ jsx131(Fragment7, { children });
+  return /* @__PURE__ */ jsx132(Fragment7, { children });
 };
 var AppInspectorContextProvider = (props) => {
   const api = useMemo5(
     () => createApiClient({ localstackEndpoint: props.localstackEndpoint }),
     [props.localstackEndpoint]
   );
-  const resolveLink = useCallback5(
+  const resolveLink = useCallback6(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -19168,31 +19296,61 @@ var AppInspectorContextProvider = (props) => {
     }),
     [deploymentContainer, props.headerHeight, props.linkComponent, props.localstackEndpoint, resolveLink]
   );
-  return /* @__PURE__ */ jsx131(ApiProvider, { api, children: /* @__PURE__ */ jsx131(StatusProvider, { children: /* @__PURE__ */ jsx131(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx131(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
+  return /* @__PURE__ */ jsx132(ApiProvider, { api, children: /* @__PURE__ */ jsx132(StatusProvider, { children: /* @__PURE__ */ jsx132(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx132(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
 };
 
 // src/hooks/use-spans-ws.tsx
+var wsLogger = createScopedLogger("WS");
+var isLegacySpanFields = (value) => {
+  return typeof value.span_id === "string" && typeof value.trace_id === "string" && typeof value.timestamp === "string";
+};
+var parseSpansWebSocketMessage = (raw) => {
+  const parsed = JSON.parse(raw);
+  if (typeof parsed !== "object" || parsed === null) {
+    return void 0;
+  }
+  const record = parsed;
+  if (record.type === void 0) {
+    return isLegacySpanFields(record) ? { data: record, type: "span" } : void 0;
+  }
+  if (record.type === "epoch" || record.type === "reset") {
+    return typeof record.epoch === "string" ? { epoch: record.epoch, type: record.type } : void 0;
+  }
+  if (record.type === "span") {
+    const data = record.data;
+    if (typeof data !== "object" || data === null || !isLegacySpanFields(data)) {
+      return void 0;
+    }
+    return {
+      data,
+      epoch: typeof record.epoch === "string" ? record.epoch : void 0,
+      type: "span"
+    };
+  }
+  return void 0;
+};
 function useSpansWebSocket(options) {
   const { enabled, onClose, onMessage, onOpen } = options;
-  const onMessageRef = useRef9(onMessage);
-  const onOpenRef = useRef9(onOpen);
-  const onCloseRef = useRef9(onClose);
-  useEffect15(() => {
+  const onMessageRef = useRef10(onMessage);
+  const onOpenRef = useRef10(onOpen);
+  const onCloseRef = useRef10(onClose);
+  useEffect16(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
-  useEffect15(() => {
+  useEffect16(() => {
     onOpenRef.current = onOpen;
   }, [onOpen]);
-  useEffect15(() => {
+  useEffect16(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const [connected, setConnected] = useState10(false);
-  const wsRef = useRef9(void 0);
+  const [connected, setConnected] = useState11(false);
+  const wsRef = useRef10(void 0);
   const { localstackEndpoint } = useAppInspector();
-  const connect = useCallback6(() => {
+  const connect = useCallback7(() => {
     if (wsRef.current !== void 0) return;
     const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
     url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
+    url.searchParams.set("epoch", "1");
     const ws = new WebSocket(url);
     wsRef.current = ws;
     ws.addEventListener("open", () => {
@@ -19200,9 +19358,20 @@ function useSpansWebSocket(options) {
       setConnected(true);
       onOpenRef.current();
     });
-    ws.addEventListener("message", () => {
+    ws.addEventListener("message", (event) => {
       if (wsRef.current !== ws) return;
-      onMessageRef.current();
+      let message;
+      try {
+        message = parseSpansWebSocketMessage(event.data);
+      } catch (error) {
+        wsLogger.warn("Failed to parse WS message:", { error });
+        return;
+      }
+      if (message === void 0) {
+        wsLogger.warn("Received unrecognized WS message shape:", { data: String(event.data) });
+        return;
+      }
+      onMessageRef.current(message);
     });
     ws.addEventListener("close", () => {
       if (wsRef.current !== ws) return;
@@ -19218,7 +19387,7 @@ function useSpansWebSocket(options) {
       }
     });
   }, [localstackEndpoint]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!enabled) {
       if (wsRef.current !== void 0) {
         wsRef.current.close();
@@ -19246,30 +19415,69 @@ function useSpansWebSocket(options) {
 var PAGE_SIZE = 100;
 var useSpans = () => {
   const api = useAppInspectorApi();
-  const { onWsClose, onWsOpen, wsEnabled } = useAppInspectorStatus();
-  const [spans, setSpans] = useState11();
-  const [fetchError, setFetchError] = useState11();
-  const [fetchingForward, setFetchingForward] = useState11(false);
-  const [fetchingBackward, setFetchingBackward] = useState11(false);
-  const [search, setSearch] = useState11("");
-  const searchRef = useRef10("");
-  const [searching, setSearching] = useState11(false);
-  const searchSeqRef = useRef10(0);
-  const paginationBufferRef = useRef10();
-  const [totalCount, setTotalCount] = useState11();
-  const [licenseLimit, setLicenseLimit] = useState11();
-  const [systemLimit, setSystemLimit] = useState11();
-  const [errorCount, setErrorCount] = useState11();
-  const [warningCount, setWarningCount] = useState11();
-  const [hasMoreBackward, setHasMoreBackward] = useState11();
-  const [hasMoreForward, setHasMoreForward] = useState11();
-  const fetchForward = useCallback7(() => {
+  const { onWsClose, onWsOpen, status, wsEnabled } = useAppInspectorStatus();
+  const { addPage, clear: clearCompute, result: computeResult, retryWorker, setFilters: setComputeFilters, workerError } = useSpansCompute();
+  const spanMapRef = useRef11(/* @__PURE__ */ new Map());
+  const [filters, setFiltersState] = useState12(EMPTY_FILTERS);
+  const setFilters = useCallback8((next) => {
+    setFiltersState(next);
+    setComputeFilters(next);
+  }, [setComputeFilters]);
+  const [fetchError, setFetchError] = useState12();
+  const [fetchingForward, setFetchingForward] = useState12(false);
+  const [fetchingBackward, setFetchingBackward] = useState12(false);
+  const [search, setSearch] = useState12("");
+  const searchRef = useRef11("");
+  const [searching, setSearching] = useState12(false);
+  const searchSeqRef = useRef11(0);
+  const paginationBufferRef = useRef11();
+  const [totalCount, setTotalCount] = useState12();
+  const [licenseLimit, setLicenseLimit] = useState12();
+  const [systemLimit, setSystemLimit] = useState12();
+  const [errorCount, setErrorCount] = useState12();
+  const [warningCount, setWarningCount] = useState12();
+  const [hasMoreBackward, setHasMoreBackward] = useState12();
+  const [hasMoreForward, setHasMoreForward] = useState12();
+  const [spansLoaded, setSpansLoaded] = useState12(false);
+  const fetchForward = useCallback8(() => {
     void paginationBufferRef.current?.fetchForward();
   }, []);
-  const fetchBackward = useCallback7(() => {
+  const fetchBackward = useCallback8(() => {
     void paginationBufferRef.current?.fetchBackward();
   }, []);
-  const applySearch = useCallback7((term) => {
+  const resetCorpus = useCallback8(() => {
+    spanMapRef.current.clear();
+    clearCompute();
+  }, [clearCompute]);
+  const [epoch, setEpoch] = useState12();
+  const onEpochSeen = useCallback8((observedEpoch) => {
+    if (observedEpoch === null || observedEpoch === void 0) {
+      return;
+    }
+    setEpoch(observedEpoch);
+  }, []);
+  const clearCache = useCallback8(() => {
+    paginationBufferRef.current?.clear();
+    resetCorpus();
+    setTotalCount(void 0);
+    setErrorCount(void 0);
+    setWarningCount(void 0);
+    void paginationBufferRef.current?.fetchForward();
+  }, [resetCorpus]);
+  const hasFetchedWithoutEpochRef = useRef11(false);
+  const previousEpochRef = useRef11();
+  useEffect17(() => {
+    if (epoch === void 0) {
+      return;
+    }
+    const isEpochChange = previousEpochRef.current !== void 0 && previousEpochRef.current !== epoch;
+    const isFirstEpochAfterUnknownBackend = previousEpochRef.current === void 0 && hasFetchedWithoutEpochRef.current;
+    if (isEpochChange || isFirstEpochAfterUnknownBackend) {
+      clearCache();
+    }
+    previousEpochRef.current = epoch;
+  }, [epoch, clearCache]);
+  const applySearch = useCallback8((term) => {
     const normalized = term.trim();
     if (normalized === searchRef.current) {
       return;
@@ -19279,58 +19487,76 @@ var useSpans = () => {
     const seq = ++searchSeqRef.current;
     setSearching(true);
     paginationBufferRef.current?.clear();
+    resetCorpus();
     void paginationBufferRef.current?.fetchForward().finally(() => {
       if (searchSeqRef.current === seq) {
         setSearching(false);
       }
     });
-  }, []);
-  useEffect16(() => {
+  }, [resetCorpus]);
+  useEffect17(() => {
     const buffer = createPaginationBuffer({
       async fetchPage(token, signal) {
-        const response = await api.getSpans({
-          limit: PAGE_SIZE,
-          pagination_token: token,
-          search: searchRef.current || void 0
-        }, { signal });
-        setTotalCount(response.pagination.total_count);
-        setLicenseLimit(response.limits.span_count_limit_license);
-        setSystemLimit(response.limits.span_count_limit_system);
-        setErrorCount(response.error_count);
-        setWarningCount(response.warning_count);
-        return {
-          hasMoreBackward: response.pagination.has_prev,
-          hasMoreForward: response.pagination.has_next,
-          items: response.spans,
-          nextBackwardToken: response.pagination.prev_cursor ?? void 0,
-          nextForwardToken: response.pagination.next_cursor ?? void 0
+        const requestPage = async (paginationToken) => {
+          const response = await api.getSpans({
+            limit: PAGE_SIZE,
+            pagination_token: paginationToken,
+            search: searchRef.current || void 0
+          }, { signal });
+          if (!response.pagination.epoch) {
+            hasFetchedWithoutEpochRef.current = true;
+          }
+          onEpochSeen(response.pagination.epoch);
+          setTotalCount(response.pagination.total_count);
+          setLicenseLimit(response.limits.span_count_limit_license);
+          setSystemLimit(response.limits.span_count_limit_system);
+          setErrorCount(response.error_count);
+          setWarningCount(response.warning_count);
+          return {
+            hasMoreBackward: response.pagination.has_prev,
+            hasMoreForward: response.pagination.has_next,
+            items: response.spans,
+            nextBackwardToken: response.pagination.prev_cursor ?? void 0,
+            nextForwardToken: response.pagination.next_cursor ?? void 0
+          };
         };
+        try {
+          return await requestPage(token);
+        } catch (error) {
+          if (error instanceof StaleTokenError && token !== void 0) {
+            return await requestPage();
+          }
+          throw error;
+        }
       },
-      onDataChange: ({ hasMoreBackward: hasMoreBackward2, hasMoreForward: hasMoreForward2, items }) => {
+      onDataChange: ({ hasMoreBackward: hasMoreBackward2, hasMoreForward: hasMoreForward2 }) => {
         setFetchError(void 0);
-        setSpans(items);
         setHasMoreBackward(hasMoreBackward2);
         setHasMoreForward(hasMoreForward2);
+        setSpansLoaded(true);
       },
       onError: (error) => {
         setFetchError(error);
       },
-      onStatusChange(status) {
-        setFetchingBackward(status.fetchingBackward);
-        setFetchingForward(status.fetchingForward);
+      // Each fetched page streams into the corpus: full spans into the Map (for render
+      // lookup) and lean projections into the compute backend (for merge/filter/count).
+      // Ordering is owned by the compute backend, so no main-thread sortComparator is needed.
+      onPageFetched: (direction, items) => {
+        for (const span of items) {
+          spanMapRef.current.set(span.span_id, span);
+        }
+        addPage(direction, items.map((span) => toSpanFilterProjection(span)));
       },
-      // The spans endpoint is sorted by span ingestion time, which might differ from
-      // the span timestamp. In order to accomodate for this, we will sort the spans
-      // in the frontend with the following sort comparator.
-      sortComparator(a3, b3) {
-        return a3.start_time_unix_nano < b3.start_time_unix_nano ? -1 : 1;
+      onStatusChange(status2) {
+        setFetchingBackward(status2.fetchingBackward);
+        setFetchingForward(status2.fetchingForward);
       }
     });
     paginationBufferRef.current = buffer;
     void buffer.fetchForward();
-  }, [api]);
-  const [clearingSpans, setClearingSpans] = useState11(false);
-  const clearSpans = useCallback7(async () => {
+  }, [api, addPage, onEpochSeen, resetCorpus]);
+  const [clearingSpans, setClearingSpans] = useState12(false);
+  const clearSpans = useCallback8(async () => {
     if (clearingSpans) {
       return;
     }
@@ -19342,6 +19568,7 @@ var useSpans = () => {
       setSearch("");
       setSearching(false);
       paginationBufferRef.current?.clear();
+      resetCorpus();
       await paginationBufferRef.current?.fetchForward();
     } catch (error) {
       console.error("Failed to delete spans:", error);
@@ -19349,21 +19576,30 @@ var useSpans = () => {
     } finally {
       setClearingSpans(false);
     }
-  }, [clearingSpans, api]);
-  useEffect16(() => {
+  }, [clearingSpans, api, resetCorpus]);
+  useEffect17(() => {
     if (hasMoreForward === true && !fetchingForward) {
       void paginationBufferRef.current?.fetchForward();
     }
   }, [hasMoreForward, fetchingForward]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (hasMoreBackward === true && !fetchingBackward && !fetchingForward) {
       void paginationBufferRef.current?.fetchBackward();
     }
   }, [hasMoreBackward, fetchingBackward, fetchingForward]);
+  const [previousStatusEpoch, setPreviousStatusEpoch] = useState12();
+  if (status !== void 0 && status.epoch !== previousStatusEpoch) {
+    setPreviousStatusEpoch(status.epoch);
+    onEpochSeen(status.epoch);
+  }
   useSpansWebSocket({
     enabled: wsEnabled,
     onClose: onWsClose,
-    onMessage: () => {
+    onMessage: (message) => {
+      onEpochSeen(message.epoch);
+      if (message.type !== "span") {
+        return;
+      }
       if (clearingSpans) {
         return;
       }
@@ -19376,43 +19612,58 @@ var useSpans = () => {
       fetchForward();
     }
   });
-  const clearFetchError = useCallback7(() => {
+  const clearFetchError = useCallback8(() => {
     setFetchError(void 0);
   }, []);
+  const filteredSpans = useMemo6(() => {
+    if (!spansLoaded) return;
+    const spanMap = spanMapRef.current;
+    return computeResult.orderedFilteredIds.map((id2) => spanMap.get(id2)).filter((span) => span !== void 0);
+  }, [computeResult, spansLoaded]);
   return {
     clearFetchError,
     clearingSpans,
     clearSpans,
+    consumerValues: computeResult.consumerValues,
     errorCount,
     fetchBackward,
     fetchError,
     fetchForward,
     fetchingBackward,
     fetchingForward,
+    filteredErrorCount: computeResult.errorCount,
+    filteredSpans,
+    filteredWarningCount: computeResult.warningCount,
+    filters,
+    hasExternalProducer: computeResult.hasExternalProducer,
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    producerValues: computeResult.producerValues,
+    retryWorker,
     search,
     searching,
+    setFilters,
     setSearch: applySearch,
-    spans,
+    statusValues: computeResult.statusValues,
     systemLimit,
     totalCount,
-    warningCount
+    warningCount,
+    workerError
   };
 };
 
 // src/pages/trace-graph-page.tsx
 import { ArrowBack } from "@mui/icons-material";
-import { Box as Box19, Button as Button7, Drawer, Paper as Paper2 } from "@mui/material";
+import { Box as Box20, Button as Button8, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef16, useState as useState20 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect22, useRef as useRef17, useState as useState21 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Close as Close3 } from "@mui/icons-material";
-import { Alert as Alert4, Box as Box16, Chip as Chip3, Divider as Divider4, FormControlLabel, IconButton as IconButton5, Stack as Stack4, Switch, Typography as Typography12 } from "@mui/material";
-import { useMemo as useMemo10, useState as useState17 } from "react";
+import { Alert as Alert5, Box as Box17, Chip as Chip3, Divider as Divider4, FormControlLabel, IconButton as IconButton5, Stack as Stack4, Switch, Typography as Typography13 } from "@mui/material";
+import { useMemo as useMemo11, useState as useState18 } from "react";
 
 // src/utils/event-utils.ts
 var iamEventParser = (eventName, attributes) => {
@@ -19525,11 +19776,11 @@ var getEventGroupsByType = (events) => {
 // src/components/event-details/copy-button.tsx
 import { Check, ContentCopy } from "@mui/icons-material";
 import { IconButton as IconButton3, Tooltip as Tooltip5 } from "@mui/material";
-import { useCallback as useCallback8, useState as useState12 } from "react";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { useCallback as useCallback9, useState as useState13 } from "react";
+import { jsx as jsx133 } from "react/jsx-runtime";
 var CopyButton = ({ value }) => {
-  const [copied, setCopied] = useState12(false);
-  const handleCopy = useCallback8(() => {
+  const [copied, setCopied] = useState13(false);
+  const handleCopy = useCallback9(() => {
     const text2 = typeof value === "string" ? value : JSON.stringify(value, void 0, 2);
     void navigator.clipboard.writeText(text2).then(() => {
       setCopied(true);
@@ -19538,83 +19789,83 @@ var CopyButton = ({ value }) => {
       }, 1500);
     });
   }, [value]);
-  return /* @__PURE__ */ jsx132(Tooltip5, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx133(Tooltip5, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx133(
     IconButton3,
     {
       className: "copy-btn",
       onClick: handleCopy,
       size: "small",
       sx: { ml: 0.5, opacity: copied ? 1 : 0, p: 0.25, transition: "opacity 0.15s" },
-      children: copied ? /* @__PURE__ */ jsx132(Check, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx132(ContentCopy, { sx: { fontSize: 14 } })
+      children: copied ? /* @__PURE__ */ jsx133(Check, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx133(ContentCopy, { sx: { fontSize: 14 } })
     }
   ) });
 };
 
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box13, IconButton as IconButton4, Typography as Typography9 } from "@mui/material";
-import { useEffect as useEffect18, useMemo as useMemo8, useRef as useRef12, useState as useState14 } from "react";
+import { Box as Box14, IconButton as IconButton4, Typography as Typography10 } from "@mui/material";
+import { useEffect as useEffect19, useMemo as useMemo9, useRef as useRef13, useState as useState15 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel as Cancel3, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
-import { Box as Box8 } from "@mui/material";
-import { jsx as jsx133 } from "react/jsx-runtime";
+import { Box as Box9 } from "@mui/material";
+import { jsx as jsx134 } from "react/jsx-runtime";
 var StatusIcon2 = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ jsx133(Cancel3, { sx: { color: "red" } });
+      return /* @__PURE__ */ jsx134(Cancel3, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ jsx133(Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ jsx134(Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ jsx133(RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ jsx134(RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ jsx133(Error3, { sx: { color: "orange" } });
+      return /* @__PURE__ */ jsx134(Error3, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ jsx133(CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ jsx134(CheckCircle, { sx: { color: "lightgray" } });
     }
   }
 };
 
 // src/components/event-details/iam-event-detail.tsx
 import { CheckCircle as CheckCircle2, Error as ErrorIcon, Warning } from "@mui/icons-material";
-import { Box as Box9, Chip, Typography as Typography7 } from "@mui/material";
-import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
-var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs125(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx134(Box9, { children: typeof content === "string" ? /* @__PURE__ */ jsx134(Typography7, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
+import { Box as Box10, Chip, Typography as Typography8 } from "@mui/material";
+import { jsx as jsx135, jsxs as jsxs126 } from "react/jsx-runtime";
+var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs126(Box10, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ jsx135(Typography8, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx135(Box10, { children: typeof content === "string" ? /* @__PURE__ */ jsx135(Typography8, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
 ] });
 var PermissionIcon = ({ status }) => {
   switch (status) {
     case "explicitly_allowed":
     case "implicitly_allowed": {
-      return /* @__PURE__ */ jsx134(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx135(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ jsx134(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx135(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ jsx134(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx135(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
+    return /* @__PURE__ */ jsx135(Typography8, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
+    return /* @__PURE__ */ jsx135(Typography8, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
   }
-  return /* @__PURE__ */ jsxs125(Box9, { children: [
-    /* @__PURE__ */ jsx134(Box9, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsxs126(Box10, { children: [
+    /* @__PURE__ */ jsx135(Box10, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx135(
       Chip,
       {
-        icon: /* @__PURE__ */ jsx134(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ jsx135(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -19624,36 +19875,36 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__PURE__ */ jsx134(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
-    /* @__PURE__ */ jsx134(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
-    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx134(
+    /* @__PURE__ */ jsx135(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
+    /* @__PURE__ */ jsx135(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
+    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx135(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx134(Typography7, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
+        content: /* @__PURE__ */ jsx135(Box10, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx135(Typography8, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx134(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx135(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx134(Typography7, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
+        content: /* @__PURE__ */ jsx135(Box10, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx135(Typography8, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
         label: "Resources"
       }
     ),
-    (parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ jsxs125(Box9, { sx: { mt: 1.5 }, children: [
-      /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
-      /* @__PURE__ */ jsxs125(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
-        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx134(Typography7, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
+    (parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ jsxs126(Box10, { sx: { mt: 1.5 }, children: [
+      /* @__PURE__ */ jsx135(Typography8, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ jsxs126(Box10, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsxs126(Box10, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx135(Typography8, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ jsx135(Typography8, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
         ] }),
-        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx134(Typography7, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsxs126(Box10, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx135(Typography8, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ jsx135(Typography8, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
         ] }),
-        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx134(Typography7, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsxs126(Box10, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx135(Typography8, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ jsx135(Typography8, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
         ] })
       ] })
     ] })
@@ -19661,16 +19912,16 @@ var IAMEventDetail = ({ event }) => {
 };
 
 // src/components/event-details/iam-permission-detail.tsx
-import { Box as Box10, Chip as Chip2, Stack as Stack2, Typography as Typography8 } from "@mui/material";
-import { useMemo as useMemo6 } from "react";
-import { jsx as jsx135, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Box as Box11, Chip as Chip2, Stack as Stack2, Typography as Typography9 } from "@mui/material";
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx136, jsxs as jsxs127 } from "react/jsx-runtime";
 var getChipColor = (isAllowed, spanStatusCode) => {
   if (isAllowed) return "success.main";
   if (spanStatusCode === 2) return "error.main";
   return "warning.main";
 };
 var IAMPermissionItem = ({ event, spanStatusCode }) => {
-  const parsedData = useMemo6(() => {
+  const parsedData = useMemo7(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) return;
     const parsedIAM2 = parseIAMEvent(payloadString);
@@ -19683,43 +19934,43 @@ var IAMPermissionItem = ({ event, spanStatusCode }) => {
   const { parsedIAM } = parsedData;
   const isAllowed = parsedIAM.permission === "explicitly_allowed" || parsedIAM.permission === "implicitly_allowed";
   const chipColors = { backgroundColor: getChipColor(isAllowed, spanStatusCode), color: "white" };
-  return /* @__PURE__ */ jsxs126(Box10, { sx: { mb: 0.5 }, children: [
-    /* @__PURE__ */ jsx135(Box10, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ jsx135(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
-    /* @__PURE__ */ jsxs126(Stack2, { spacing: 1, children: [
-      /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: [
-        /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Principal" }),
-        /* @__PURE__ */ jsxs126(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-          /* @__PURE__ */ jsx135(Typography8, { sx: { wordBreak: "break-all" }, variant: "body2", children: parsedIAM.principal }),
-          /* @__PURE__ */ jsx135(CopyButton, { value: parsedIAM.principal })
+  return /* @__PURE__ */ jsxs127(Box11, { sx: { mb: 0.5 }, children: [
+    /* @__PURE__ */ jsx136(Box11, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ jsx136(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
+    /* @__PURE__ */ jsxs127(Stack2, { spacing: 1, children: [
+      /* @__PURE__ */ jsxs127(Box11, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: [
+        /* @__PURE__ */ jsx136(Typography9, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Principal" }),
+        /* @__PURE__ */ jsxs127(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { wordBreak: "break-all" }, variant: "body2", children: parsedIAM.principal }),
+          /* @__PURE__ */ jsx136(CopyButton, { value: parsedIAM.principal })
         ] })
       ] }),
-      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
-        /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
-        parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsxs126(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-          /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block" }, variant: "body2", children: action }),
-          /* @__PURE__ */ jsx135(CopyButton, { value: action })
+      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs127(Box11, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
+        /* @__PURE__ */ jsx136(Typography9, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
+        parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsxs127(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { display: "block" }, variant: "body2", children: action }),
+          /* @__PURE__ */ jsx136(CopyButton, { value: action })
         ] }, action))
       ] }),
-      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
-        /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
-        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsxs126(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-          /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }),
-          /* @__PURE__ */ jsx135(CopyButton, { value: resource })
+      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs127(Box11, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
+        /* @__PURE__ */ jsx136(Typography9, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
+        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsxs127(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }),
+          /* @__PURE__ */ jsx136(CopyButton, { value: resource })
         ] }, resource))
       ] })
     ] })
   ] });
 };
-var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ jsx135(Box10, { children: events.map((event) => /* @__PURE__ */ jsx135(IAMPermissionItem, { event, spanStatusCode }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ jsx136(Box11, { children: events.map((event) => /* @__PURE__ */ jsx136(IAMPermissionItem, { event, spanStatusCode }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/payload-viewer.tsx
-import { Box as Box12, useTheme as useTheme3 } from "@mui/material";
+import { Box as Box13, useTheme as useTheme3 } from "@mui/material";
 
 // node_modules/.pnpm/@textea+json-viewer@3.5.0_@emotion+react@11.14.0_@types+react@17.0.91_react@17.0.2__@em_040507e953752247cb848fd3f764690c/node_modules/@textea/json-viewer/dist/index.mjs
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
-import { jsx as jsx136, jsxs as jsxs127, Fragment as Fragment8 } from "react/jsx-runtime";
-import { Box as Box11, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper } from "@mui/material";
-import { createContext as createContext10, useContext as useContext16, useState as useState13, useRef as useRef11, useCallback as useCallback9, useMemo as useMemo7, useEffect as useEffect17, memo as memo9 } from "react";
+import { jsx as jsx137, jsxs as jsxs128, Fragment as Fragment8 } from "react/jsx-runtime";
+import { Box as Box12, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper } from "@mui/material";
+import { createContext as createContext10, useContext as useContext16, useState as useState14, useRef as useRef12, useCallback as useCallback10, useMemo as useMemo8, useEffect as useEffect18, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t, f2, n = "";
@@ -19963,9 +20214,9 @@ async function copyString(value) {
 }
 function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-  const [copied, setCopied] = useState13(false);
-  const copyTimeout = useRef11(null);
-  const handleCopyResult = useCallback9((value) => {
+  const [copied, setCopied] = useState14(false);
+  const copyTimeout = useRef12(null);
+  const handleCopyResult = useCallback10((value) => {
     const current = copyTimeout.current;
     if (current) {
       window.clearTimeout(current);
@@ -19976,7 +20227,7 @@ function useClipboard() {
     timeout
   ]);
   const onCopy = useJsonViewerStore((store) => store.onCopy);
-  const copy = useCallback9(async (path, value) => {
+  const copy = useCallback10(async (path, value) => {
     if (typeof onCopy === "function") {
       try {
         await onCopy(path, value, copyString);
@@ -19997,7 +20248,7 @@ function useClipboard() {
     handleCopyResult,
     onCopy
   ]);
-  const reset = useCallback9(() => {
+  const reset = useCallback10(() => {
     setCopied(false);
     if (copyTimeout.current) {
       clearTimeout(copyTimeout.current);
@@ -20011,7 +20262,7 @@ function useClipboard() {
 }
 function useIsCycleReference(path, value) {
   const rootValue = useJsonViewerStore((store) => store.value);
-  return useMemo7(() => isCycleReference(rootValue, path, value), [
+  return useMemo8(() => isCycleReference(rootValue, path, value), [
     path,
     value,
     rootValue
@@ -20024,7 +20275,7 @@ function useInspect(path, value, nestedIndex) {
   const setInspectCache = useJsonViewerStore((store) => store.setInspectCache);
   const defaultInspectDepth = useJsonViewerStore((store) => store.defaultInspectDepth);
   const defaultInspectControl = useJsonViewerStore((store) => store.defaultInspectControl);
-  useEffect17(() => {
+  useEffect18(() => {
     const inspect2 = getInspectCache(path, nestedIndex);
     if (inspect2 !== void 0) {
       return;
@@ -20046,7 +20297,7 @@ function useInspect(path, value, nestedIndex) {
     value,
     setInspectCache
   ]);
-  const [inspect, set] = useState13(() => {
+  const [inspect, set] = useState14(() => {
     const shouldInspect = getInspectCache(path, nestedIndex);
     if (shouldInspect !== void 0) {
       return shouldInspect;
@@ -20056,7 +20307,7 @@ function useInspect(path, value, nestedIndex) {
     }
     return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
   });
-  const setInspect = useCallback9((apply) => {
+  const setInspect = useCallback10((apply) => {
     set((oldState) => {
       const newState = typeof apply === "boolean" ? apply : apply(oldState);
       setInspectCache(path, newState, nestedIndex);
@@ -20072,7 +20323,7 @@ function useInspect(path, value, nestedIndex) {
     setInspect
   ];
 }
-var DataBox = (props) => /* @__PURE__ */ jsx136(Box11, {
+var DataBox = (props) => /* @__PURE__ */ jsx137(Box12, {
   component: "div",
   ...props,
   sx: {
@@ -20083,7 +20334,7 @@ var DataBox = (props) => /* @__PURE__ */ jsx136(Box11, {
 var DataTypeLabel = (param) => {
   let { dataType, enable = true } = param;
   if (!enable) return null;
-  return /* @__PURE__ */ jsx136(DataBox, {
+  return /* @__PURE__ */ jsx137(DataBox, {
     className: "data-type-label",
     sx: {
       mx: 0.5,
@@ -20101,18 +20352,18 @@ function defineEasyType(param) {
     const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
     const onSelect = useJsonViewerStore((store) => store.onSelect);
-    return /* @__PURE__ */ jsxs127(DataBox, {
+    return /* @__PURE__ */ jsxs128(DataBox, {
       onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(props.path, props.value),
       sx: {
         color: color2
       },
       children: [
-        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx136(DataTypeLabel, {
+        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx137(DataTypeLabel, {
           dataType: type
         }),
-        /* @__PURE__ */ jsx136(DataBox, {
+        /* @__PURE__ */ jsx137(DataBox, {
           className: "".concat(type, "-value"),
-          children: /* @__PURE__ */ jsx136(Render, {
+          children: /* @__PURE__ */ jsx137(Render, {
             path: props.path,
             inspect: props.inspect,
             setInspect: props.setInspect,
@@ -20133,7 +20384,7 @@ function defineEasyType(param) {
   const EasyTypeEditor = (param2) => {
     let { value, setValue, abortEditing, commitEditing } = param2;
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
-    const handleKeyDown = useCallback9((event) => {
+    const handleKeyDown = useCallback10((event) => {
       if (event.key === "Enter") {
         event.preventDefault();
         commitEditing(value);
@@ -20147,12 +20398,12 @@ function defineEasyType(param) {
       commitEditing,
       value
     ]);
-    const handleChange = useCallback9((event) => {
+    const handleChange = useCallback10((event) => {
       setValue(event.target.value);
     }, [
       setValue
     ]);
-    return /* @__PURE__ */ jsx136(InputBase, {
+    return /* @__PURE__ */ jsx137(InputBase, {
       autoFocus: true,
       value,
       onChange: handleChange,
@@ -20192,7 +20443,7 @@ var booleanType = defineEasyType({
   },
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx137(Fragment8, {
       children: value ? "true" : "false"
     });
   }
@@ -20211,7 +20462,7 @@ var dateType = defineEasyType({
   colorKey: "base0D",
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx137(Fragment8, {
       children: value.toLocaleTimeString("en-us", displayOptions)
     });
   }
@@ -20240,12 +20491,12 @@ var functionName = (func) => {
 var lb = "{";
 var rb = "}";
 var PreFunctionType = (props) => {
-  return /* @__PURE__ */ jsxs127(NoSsr, {
+  return /* @__PURE__ */ jsxs128(NoSsr, {
     children: [
-      /* @__PURE__ */ jsx136(DataTypeLabel, {
+      /* @__PURE__ */ jsx137(DataTypeLabel, {
         dataType: "function"
       }),
-      /* @__PURE__ */ jsxs127(Box11, {
+      /* @__PURE__ */ jsxs128(Box12, {
         component: "span",
         className: "data-function-start",
         sx: {
@@ -20261,8 +20512,8 @@ var PreFunctionType = (props) => {
   });
 };
 var PostFunctionType = () => {
-  return /* @__PURE__ */ jsx136(NoSsr, {
-    children: /* @__PURE__ */ jsx136(Box11, {
+  return /* @__PURE__ */ jsx137(NoSsr, {
+    children: /* @__PURE__ */ jsx137(Box12, {
       component: "span",
       className: "data-function-end",
       children: rb
@@ -20271,15 +20522,15 @@ var PostFunctionType = () => {
 };
 var FunctionType = (props) => {
   const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
-  return /* @__PURE__ */ jsx136(NoSsr, {
-    children: /* @__PURE__ */ jsx136(Box11, {
+  return /* @__PURE__ */ jsx137(NoSsr, {
+    children: /* @__PURE__ */ jsx137(Box12, {
       className: "data-function",
       sx: {
         display: props.inspect ? "block" : "inline-block",
         pl: props.inspect ? 2 : 0,
         color: functionColor
       },
-      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx136(Box11, {
+      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx137(Box12, {
         component: "span",
         className: "data-function-body",
         onClick: () => props.setInspect(true),
@@ -20307,7 +20558,7 @@ var nullType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx136(Box11, {
+    return /* @__PURE__ */ jsx137(Box12, {
       sx: {
         fontSize: "0.8rem",
         backgroundColor,
@@ -20330,7 +20581,7 @@ var nanType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx136(Box11, {
+    return /* @__PURE__ */ jsx137(Box12, {
       sx: {
         backgroundColor,
         fontSize: "0.8rem",
@@ -20350,7 +20601,7 @@ var floatType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx137(Fragment8, {
       children: value
     });
   }
@@ -20364,7 +20615,7 @@ var intType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx137(Fragment8, {
       children: value
     });
   }
@@ -20377,16 +20628,16 @@ var bigIntType = defineEasyType({
   deserialize: (value) => BigInt(value.replace(/\D/g, "")),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx137(Fragment8, {
       children: "".concat(value, "n")
     });
   }
 });
 var BaseIcon = (param) => {
   let { d: d2, ...props } = param;
-  return /* @__PURE__ */ jsx136(SvgIcon, {
+  return /* @__PURE__ */ jsx137(SvgIcon, {
     ...props,
-    children: /* @__PURE__ */ jsx136("path", {
+    children: /* @__PURE__ */ jsx137("path", {
       d: d2
     })
   });
@@ -20401,55 +20652,55 @@ var Edit = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.3
 var ExpandMore = "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z";
 var Delete = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z";
 var AddBoxIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: AddBox,
     ...props
   });
 };
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: Check2,
     ...props
   });
 };
 var ChevronRightIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: ChevronRight,
     ...props
   });
 };
 var CircularArrowsIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: CircularArrows,
     ...props
   });
 };
 var CloseIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: Close2,
     ...props
   });
 };
 var ContentCopyIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: ContentCopy2,
     ...props
   });
 };
 var EditIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: Edit,
     ...props
   });
 };
 var ExpandMoreIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: ExpandMore,
     ...props
   });
 };
 var DeleteIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx137(BaseIcon, {
     d: Delete,
     ...props
   });
@@ -20472,23 +20723,23 @@ function inspectMetadata(value) {
 var PreObjectType = (props) => {
   const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
   const textColor = useTextColor();
-  const isArrayLike = useMemo7(() => Array.isArray(props.value) || props.value instanceof Set, [
+  const isArrayLike = useMemo8(() => Array.isArray(props.value) || props.value instanceof Set, [
     props.value
   ]);
-  const isEmptyValue = useMemo7(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = useMemo8(() => getValueSize(props.value) === 0, [
     props.value
   ]);
-  const sizeOfValue = useMemo7(() => inspectMetadata(props.value), [
+  const sizeOfValue = useMemo8(() => inspectMetadata(props.value), [
     props.value
   ]);
   const displaySize = useJsonViewerStore((store) => store.displaySize);
-  const shouldDisplaySize = useMemo7(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+  const shouldDisplaySize = useMemo8(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
     displaySize,
     props.path,
     props.value
   ]);
   const isTrap = useIsCycleReference(props.path, props.value);
-  return /* @__PURE__ */ jsxs127(Box11, {
+  return /* @__PURE__ */ jsxs128(Box12, {
     component: "span",
     className: "data-object-start",
     sx: {
@@ -20496,7 +20747,7 @@ var PreObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayLb : objectLb,
-      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx136(Box11, {
+      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx137(Box12, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -20506,16 +20757,16 @@ var PreObjectType = (props) => {
         },
         children: sizeOfValue
       }),
-      isTrap && !props.inspect && /* @__PURE__ */ jsxs127(Fragment8, {
+      isTrap && !props.inspect && /* @__PURE__ */ jsxs128(Fragment8, {
         children: [
-          /* @__PURE__ */ jsx136(CircularArrowsIcon, {
+          /* @__PURE__ */ jsx137(CircularArrowsIcon, {
             sx: {
               fontSize: 12,
               color: textColor,
               mx: 0.5
             }
           }),
-          /* @__PURE__ */ jsx136(DataBox, {
+          /* @__PURE__ */ jsx137(DataBox, {
             sx: {
               cursor: "pointer",
               userSelect: "none"
@@ -20530,22 +20781,22 @@ var PreObjectType = (props) => {
 var PostObjectType = (props) => {
   const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
   const textColor = useTextColor();
-  const isArrayLike = useMemo7(() => Array.isArray(props.value) || props.value instanceof Set, [
+  const isArrayLike = useMemo8(() => Array.isArray(props.value) || props.value instanceof Set, [
     props.value
   ]);
-  const isEmptyValue = useMemo7(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = useMemo8(() => getValueSize(props.value) === 0, [
     props.value
   ]);
-  const sizeOfValue = useMemo7(() => inspectMetadata(props.value), [
+  const sizeOfValue = useMemo8(() => inspectMetadata(props.value), [
     props.value
   ]);
   const displaySize = useJsonViewerStore((store) => store.displaySize);
-  const shouldDisplaySize = useMemo7(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+  const shouldDisplaySize = useMemo8(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
     displaySize,
     props.path,
     props.value
   ]);
-  return /* @__PURE__ */ jsxs127(Box11, {
+  return /* @__PURE__ */ jsxs128(Box12, {
     component: "span",
     className: "data-object-end",
     sx: {
@@ -20556,7 +20807,7 @@ var PostObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayRb : objectRb,
-      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx136(Box11, {
+      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx137(Box12, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -20577,9 +20828,9 @@ var ObjectType = (props) => {
   const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
   const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
   const isTrap = useIsCycleReference(props.path, props.value);
-  const [displayLength, setDisplayLength] = useState13(useJsonViewerStore((store) => store.maxDisplayLength));
+  const [displayLength, setDisplayLength] = useState14(useJsonViewerStore((store) => store.maxDisplayLength));
   const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
-  const elements = useMemo7(() => {
+  const elements = useMemo8(() => {
     if (!props.inspect) {
       return null;
     }
@@ -20596,7 +20847,7 @@ var ObjectType = (props) => {
             ...props.path,
             key
           ];
-          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx137(DataKeyPair, {
             path,
             value: value2,
             prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
@@ -20612,7 +20863,7 @@ var ObjectType = (props) => {
         while (true) {
           const nextResult = iterator2.next();
           var _nextResult_done;
-          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx137(DataKeyPair, {
             path: [
               ...props.path,
               "iterator:".concat(count2)
@@ -20640,7 +20891,7 @@ var ObjectType = (props) => {
             ...props.path,
             index
           ];
-          return /* @__PURE__ */ jsx136(DataKeyPair, {
+          return /* @__PURE__ */ jsx137(DataKeyPair, {
             path,
             value: value2,
             prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
@@ -20649,7 +20900,7 @@ var ObjectType = (props) => {
         });
         if (value.length > displayLength) {
           const rest = value.length - displayLength;
-          elements4.push(/* @__PURE__ */ jsxs127(DataBox, {
+          elements4.push(/* @__PURE__ */ jsxs128(DataBox, {
             sx: {
               cursor: "pointer",
               lineHeight: 1.5,
@@ -20672,7 +20923,7 @@ var ObjectType = (props) => {
       const prevElements = Array.isArray(props.prevValue) ? segmentArray(props.prevValue, groupArraysAfterLength) : void 0;
       const elementsLastIndex = elements3.length - 1;
       return elements3.map((list, index) => {
-        return /* @__PURE__ */ jsx136(DataKeyPair, {
+        return /* @__PURE__ */ jsx137(DataKeyPair, {
           path: props.path,
           value: list,
           nestedIndex: index,
@@ -20699,7 +20950,7 @@ var ObjectType = (props) => {
         ...props.path,
         key
       ];
-      return /* @__PURE__ */ jsx136(DataKeyPair, {
+      return /* @__PURE__ */ jsx137(DataKeyPair, {
         path,
         value: value2,
         prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
@@ -20708,7 +20959,7 @@ var ObjectType = (props) => {
     });
     if (entries.length > displayLength) {
       const rest = entries.length - displayLength;
-      elements2.push(/* @__PURE__ */ jsxs127(DataBox, {
+      elements2.push(/* @__PURE__ */ jsxs128(DataBox, {
         sx: {
           cursor: "pointer",
           lineHeight: 1.5,
@@ -20740,13 +20991,13 @@ var ObjectType = (props) => {
   const marginLeft = props.inspect ? 0.6 : 0;
   const width = useJsonViewerStore((store) => store.indentWidth);
   const indentWidth = props.inspect ? width - marginLeft : width;
-  const isEmptyValue = useMemo7(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = useMemo8(() => getValueSize(props.value) === 0, [
     props.value
   ]);
   if (isEmptyValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx136(Box11, {
+  return /* @__PURE__ */ jsx137(Box12, {
     className: "data-object",
     sx: {
       display: props.inspect ? "block" : "inline-block",
@@ -20755,7 +21006,7 @@ var ObjectType = (props) => {
       color: keyColor,
       borderLeft: props.inspect ? "1px solid ".concat(borderColor) : "none"
     },
-    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx136(Box11, {
+    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx137(Box12, {
       component: "span",
       className: "data-object-body",
       onClick: () => props.setInspect(true),
@@ -20783,11 +21034,11 @@ var stringType = defineEasyType({
   serialize: (value) => value,
   deserialize: (value) => value,
   Renderer: (props) => {
-    const [showRest, setShowRest] = useState13(false);
+    const [showRest, setShowRest] = useState14(false);
     const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
     const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
     const hasRest = props.value.length > collapseStringsAfterLength;
-    return /* @__PURE__ */ jsxs127(Box11, {
+    return /* @__PURE__ */ jsxs128(Box12, {
       component: "span",
       sx: {
         overflowWrap: "anywhere",
@@ -20805,7 +21056,7 @@ var stringType = defineEasyType({
       children: [
         '"',
         value,
-        hasRest && !showRest && /* @__PURE__ */ jsx136(Box11, {
+        hasRest && !showRest && /* @__PURE__ */ jsx137(Box12, {
           component: "span",
           sx: {
             padding: 0.5
@@ -20824,7 +21075,7 @@ var undefinedType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx136(Box11, {
+    return /* @__PURE__ */ jsx137(Box12, {
       sx: {
         fontSize: "0.7rem",
         backgroundColor,
@@ -20899,13 +21150,13 @@ function matchTypeComponents(value, path, registry) {
 }
 function useTypeComponents(value, path) {
   const registry = useTypeRegistryStore((store) => store.registry);
-  return useMemo7(() => matchTypeComponents(value, path, registry), [
+  return useMemo8(() => matchTypeComponents(value, path, registry), [
     value,
     path,
     registry
   ]);
 }
-var IconBox = (props) => /* @__PURE__ */ jsx136(Box11, {
+var IconBox = (props) => /* @__PURE__ */ jsx137(Box12, {
   component: "span",
   ...props,
   sx: {
@@ -20920,7 +21171,7 @@ var DataKeyPair = (props) => {
   var _props_editable;
   const propsEditable = (_props_editable = props.editable) !== null && _props_editable !== void 0 ? _props_editable : void 0;
   const storeEditable = useJsonViewerStore((store) => store.editable);
-  const editable = useMemo7(() => {
+  const editable = useMemo8(() => {
     if (storeEditable === false) {
       return false;
     }
@@ -20937,11 +21188,11 @@ var DataKeyPair = (props) => {
     storeEditable,
     value
   ]);
-  const [tempValue, setTempValue] = useState13("");
+  const [tempValue, setTempValue] = useState14("");
   const depth = path.length;
   const key = path[depth - 1];
   const hoverPath = useJsonViewerStore((store) => store.hoverPath);
-  const isHover = useMemo7(() => {
+  const isHover = useMemo8(() => {
     return hoverPath && path.every((value2, index) => value2 === hoverPath.path[index] && nestedIndex === hoverPath.nestedIndex);
   }, [
     hoverPath,
@@ -20951,7 +21202,7 @@ var DataKeyPair = (props) => {
   const setHover = useJsonViewerStore((store) => store.setHover);
   const root2 = useJsonViewerStore((store) => store.value);
   const [inspect, setInspect] = useInspect(path, value, nestedIndex);
-  const [editing, setEditing] = useState13(false);
+  const [editing, setEditing] = useState14(false);
   const onChange = useJsonViewerStore((store) => store.onChange);
   const keyColor = useTextColor();
   const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
@@ -20963,7 +21214,7 @@ var DataKeyPair = (props) => {
   const isNumberKey = Number.isInteger(Number(key));
   const storeEnableAdd = useJsonViewerStore((store) => store.enableAdd);
   const onAdd = useJsonViewerStore((store) => store.onAdd);
-  const enableAdd = useMemo7(() => {
+  const enableAdd = useMemo8(() => {
     if (!onAdd || nestedIndex !== void 0) return false;
     if (storeEnableAdd === false) {
       return false;
@@ -20988,7 +21239,7 @@ var DataKeyPair = (props) => {
   ]);
   const storeEnableDelete = useJsonViewerStore((store) => store.enableDelete);
   const onDelete = useJsonViewerStore((store) => store.onDelete);
-  const enableDelete = useMemo7(() => {
+  const enableDelete = useMemo8(() => {
     if (!onDelete || nestedIndex !== void 0) return false;
     if (isRoot) {
       return false;
@@ -21015,7 +21266,7 @@ var DataKeyPair = (props) => {
   const enableClipboard = useJsonViewerStore((store) => store.enableClipboard);
   const { copy, copied } = useClipboard();
   const highlightUpdates = useJsonViewerStore((store) => store.highlightUpdates);
-  const isHighlight = useMemo7(() => {
+  const isHighlight = useMemo8(() => {
     if (!highlightUpdates || prevValue === void 0) return false;
     if (typeof value !== typeof prevValue) {
       return true;
@@ -21039,8 +21290,8 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const highlightContainer = useRef11();
-  useEffect17(() => {
+  const highlightContainer = useRef12();
+  useEffect18(() => {
     if (highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
       highlightContainer.current.animate([
         {
@@ -21060,7 +21311,7 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const startEditing = useCallback9((event) => {
+  const startEditing = useCallback10((event) => {
     event.preventDefault();
     if (serialize) setTempValue(serialize(value));
     setEditing(true);
@@ -21068,14 +21319,14 @@ var DataKeyPair = (props) => {
     serialize,
     value
   ]);
-  const abortEditing = useCallback9(() => {
+  const abortEditing = useCallback10(() => {
     setEditing(false);
     setTempValue("");
   }, [
     setEditing,
     setTempValue
   ]);
-  const commitEditing = useCallback9((newValue) => {
+  const commitEditing = useCallback10((newValue) => {
     setEditing(false);
     if (!deserialize) return;
     try {
@@ -21089,20 +21340,20 @@ var DataKeyPair = (props) => {
     path,
     value
   ]);
-  const actionIcons = useMemo7(() => {
+  const actionIcons = useMemo8(() => {
     if (editing) {
-      return /* @__PURE__ */ jsxs127(Fragment8, {
+      return /* @__PURE__ */ jsxs128(Fragment8, {
         children: [
-          /* @__PURE__ */ jsx136(IconBox, {
-            children: /* @__PURE__ */ jsx136(CloseIcon, {
+          /* @__PURE__ */ jsx137(IconBox, {
+            children: /* @__PURE__ */ jsx137(CloseIcon, {
               sx: {
                 fontSize: ".8rem"
               },
               onClick: abortEditing
             })
           }),
-          /* @__PURE__ */ jsx136(IconBox, {
-            children: /* @__PURE__ */ jsx136(CheckIcon, {
+          /* @__PURE__ */ jsx137(IconBox, {
+            children: /* @__PURE__ */ jsx137(CheckIcon, {
               sx: {
                 fontSize: ".8rem"
               },
@@ -21112,9 +21363,9 @@ var DataKeyPair = (props) => {
         ]
       });
     }
-    return /* @__PURE__ */ jsxs127(Fragment8, {
+    return /* @__PURE__ */ jsxs128(Fragment8, {
       children: [
-        enableClipboard && /* @__PURE__ */ jsx136(IconBox, {
+        enableClipboard && /* @__PURE__ */ jsx137(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             try {
@@ -21123,41 +21374,41 @@ var DataKeyPair = (props) => {
               console.error(e2);
             }
           },
-          children: copied ? /* @__PURE__ */ jsx136(CheckIcon, {
+          children: copied ? /* @__PURE__ */ jsx137(CheckIcon, {
             sx: {
               fontSize: ".8rem"
             }
-          }) : /* @__PURE__ */ jsx136(ContentCopyIcon, {
+          }) : /* @__PURE__ */ jsx137(ContentCopyIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx136(IconBox, {
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx137(IconBox, {
           onClick: startEditing,
-          children: /* @__PURE__ */ jsx136(EditIcon, {
+          children: /* @__PURE__ */ jsx137(EditIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableAdd && /* @__PURE__ */ jsx136(IconBox, {
+        enableAdd && /* @__PURE__ */ jsx137(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
           },
-          children: /* @__PURE__ */ jsx136(AddBoxIcon, {
+          children: /* @__PURE__ */ jsx137(AddBoxIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableDelete && /* @__PURE__ */ jsx136(IconBox, {
+        enableDelete && /* @__PURE__ */ jsx137(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
           },
-          children: /* @__PURE__ */ jsx136(DeleteIcon, {
+          children: /* @__PURE__ */ jsx137(DeleteIcon, {
             sx: {
               fontSize: ".9rem"
             }
@@ -21185,12 +21436,12 @@ var DataKeyPair = (props) => {
     abortEditing,
     commitEditing
   ]);
-  const isEmptyValue = useMemo7(() => getValueSize(value) === 0, [
+  const isEmptyValue = useMemo8(() => getValueSize(value) === 0, [
     value
   ]);
   const expandable = !isEmptyValue && !!(PreComponent && PostComponent);
   const KeyRenderer = useJsonViewerStore((store) => store.keyRenderer);
-  const downstreamProps = useMemo7(() => ({
+  const downstreamProps = useMemo8(() => ({
     path,
     inspect,
     setInspect,
@@ -21205,19 +21456,19 @@ var DataKeyPair = (props) => {
     prevValue,
     nestedIndex
   ]);
-  return /* @__PURE__ */ jsxs127(Box11, {
+  return /* @__PURE__ */ jsxs128(Box12, {
     className: "data-key-pair",
     "data-testid": "data-key-pair" + path.join("."),
     sx: {
       userSelect: "text"
     },
-    onMouseEnter: useCallback9(() => setHover(path, nestedIndex), [
+    onMouseEnter: useCallback10(() => setHover(path, nestedIndex), [
       setHover,
       path,
       nestedIndex
     ]),
     children: [
-      /* @__PURE__ */ jsxs127(DataBox, {
+      /* @__PURE__ */ jsxs128(DataBox, {
         component: "span",
         className: "data-key",
         sx: {
@@ -21226,7 +21477,7 @@ var DataKeyPair = (props) => {
           letterSpacing: 0.5,
           opacity: 0.8
         },
-        onClick: useCallback9((event) => {
+        onClick: useCallback10((event) => {
           if (event.isDefaultPrevented()) {
             return;
           }
@@ -21238,7 +21489,7 @@ var DataKeyPair = (props) => {
           setInspect
         ]),
         children: [
-          expandable ? inspect ? /* @__PURE__ */ jsx136(ExpandMoreIcon, {
+          expandable ? inspect ? /* @__PURE__ */ jsx137(ExpandMoreIcon, {
             className: "data-key-toggle-expanded",
             sx: {
               fontSize: ".8rem",
@@ -21246,7 +21497,7 @@ var DataKeyPair = (props) => {
                 cursor: "pointer"
               }
             }
-          }) : /* @__PURE__ */ jsx136(ChevronRightIcon, {
+          }) : /* @__PURE__ */ jsx137(ChevronRightIcon, {
             className: "data-key-toggle-collapsed",
             sx: {
               fontSize: ".8rem",
@@ -21255,44 +21506,44 @@ var DataKeyPair = (props) => {
               }
             }
           }) : null,
-          /* @__PURE__ */ jsx136(Box11, {
+          /* @__PURE__ */ jsx137(Box12, {
             ref: highlightContainer,
             className: "data-key-key",
             component: "span",
-            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs127(Fragment8, {
+            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs128(Fragment8, {
               children: [
                 '"',
                 rootName,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx136(Fragment8, {
+            }) : /* @__PURE__ */ jsx137(Fragment8, {
               children: rootName
-            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx136(KeyRenderer, {
+            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx137(KeyRenderer, {
               ...downstreamProps
-            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx136(Box11, {
+            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx137(Box12, {
               component: "span",
               style: {
                 color: numberKeyColor,
                 userSelect: isNumberKey ? "none" : "auto"
               },
               children: key
-            }) : quotesOnKeys ? /* @__PURE__ */ jsxs127(Fragment8, {
+            }) : quotesOnKeys ? /* @__PURE__ */ jsxs128(Fragment8, {
               children: [
                 '"',
                 key,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx136(Fragment8, {
+            }) : /* @__PURE__ */ jsx137(Fragment8, {
               children: key
             }))
           }),
-          isRoot ? rootName !== false && /* @__PURE__ */ jsx136(DataBox, {
+          isRoot ? rootName !== false && /* @__PURE__ */ jsx137(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5
             },
             children: ":"
-          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx136(DataBox, {
+          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx137(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5,
@@ -21303,29 +21554,29 @@ var DataKeyPair = (props) => {
             },
             children: ":"
           }),
-          PreComponent && /* @__PURE__ */ jsx136(PreComponent, {
+          PreComponent && /* @__PURE__ */ jsx137(PreComponent, {
             ...downstreamProps
           }),
           isHover && expandable && inspect && actionIcons
         ]
       }),
-      editing && editable ? Editor && /* @__PURE__ */ jsx136(Editor, {
+      editing && editable ? Editor && /* @__PURE__ */ jsx137(Editor, {
         path,
         value: tempValue,
         setValue: setTempValue,
         abortEditing,
         commitEditing
-      }) : Component ? /* @__PURE__ */ jsx136(Component, {
+      }) : Component ? /* @__PURE__ */ jsx137(Component, {
         ...downstreamProps
-      }) : /* @__PURE__ */ jsx136(Box11, {
+      }) : /* @__PURE__ */ jsx137(Box12, {
         component: "span",
         className: "data-value-fallback",
         children: "fallback: ".concat(value)
       }),
-      PostComponent && /* @__PURE__ */ jsx136(PostComponent, {
+      PostComponent && /* @__PURE__ */ jsx137(PostComponent, {
         ...downstreamProps
       }),
-      !last && displayComma && /* @__PURE__ */ jsx136(DataBox, {
+      !last && displayComma && /* @__PURE__ */ jsx137(DataBox, {
         children: ","
       }),
       isHover && expandable && !inspect && actionIcons,
@@ -21336,8 +21587,8 @@ var DataKeyPair = (props) => {
 };
 var query = "(prefers-color-scheme: dark)";
 function useThemeDetector() {
-  const [isDark, setIsDark] = useState13(false);
-  useEffect17(() => {
+  const [isDark, setIsDark] = useState14(false);
+  useEffect18(() => {
     const listener = (e2) => setIsDark(e2.matches);
     setIsDark(window.matchMedia(query).matches);
     const queryMedia = window.matchMedia(query);
@@ -21348,7 +21599,7 @@ function useThemeDetector() {
 }
 function useSetIfNotUndefinedEffect(key, value) {
   const { setState } = useContext16(JsonViewerStoreContext);
-  useEffect17(() => {
+  useEffect18(() => {
     if (value !== void 0) {
       setState({
         [key]: value
@@ -21362,7 +21613,7 @@ function useSetIfNotUndefinedEffect(key, value) {
 }
 var JsonViewerInner = (props) => {
   const { setState } = useContext16(JsonViewerStoreContext);
-  useEffect17(() => {
+  useEffect18(() => {
     setState((state) => ({
       prevValue: state.value,
       value: props.value
@@ -21390,7 +21641,7 @@ var JsonViewerInner = (props) => {
   useSetIfNotUndefinedEffect("displaySize", props.displaySize);
   useSetIfNotUndefinedEffect("displayComma", props.displayComma);
   useSetIfNotUndefinedEffect("highlightUpdates", props.highlightUpdates);
-  useEffect17(() => {
+  useEffect18(() => {
     if (props.theme === "light") {
       setState({
         colorspace: lightColorspace
@@ -21408,13 +21659,13 @@ var JsonViewerInner = (props) => {
     setState,
     props.theme
   ]);
-  const themeCls = useMemo7(() => {
+  const themeCls = useMemo8(() => {
     if (typeof props.theme === "object") return "json-viewer-theme-custom";
     return props.theme === "dark" ? "json-viewer-theme-dark" : "json-viewer-theme-light";
   }, [
     props.theme
   ]);
-  const onceRef = useRef11(true);
+  const onceRef = useRef12(true);
   const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
   if (onceRef.current) {
     const allTypes = props.valueTypes ? [
@@ -21426,7 +21677,7 @@ var JsonViewerInner = (props) => {
     registerTypes(allTypes);
     onceRef.current = false;
   }
-  useEffect17(() => {
+  useEffect18(() => {
     const allTypes = props.valueTypes ? [
       ...predefinedTypes,
       ...props.valueTypes
@@ -21440,12 +21691,12 @@ var JsonViewerInner = (props) => {
   ]);
   const value = useJsonViewerStore((store) => store.value);
   const prevValue = useJsonViewerStore((store) => store.prevValue);
-  const emptyPath = useMemo7(() => [], []);
+  const emptyPath = useMemo8(() => [], []);
   const setHover = useJsonViewerStore((store) => store.setHover);
-  const onMouseLeave = useCallback9(() => setHover(null), [
+  const onMouseLeave = useCallback10(() => setHover(null), [
     setHover
   ]);
-  return /* @__PURE__ */ jsx136(Paper, {
+  return /* @__PURE__ */ jsx137(Paper, {
     elevation: 0,
     className: clsx(themeCls, props.className),
     style: props.style,
@@ -21456,7 +21707,7 @@ var JsonViewerInner = (props) => {
       ...props.sx
     },
     onMouseLeave,
-    children: /* @__PURE__ */ jsx136(DataKeyPair, {
+    children: /* @__PURE__ */ jsx137(DataKeyPair, {
       value,
       prevValue,
       path: emptyPath,
@@ -21471,14 +21722,14 @@ var JsonViewer = function JsonViewer2(props) {
     }
   }
   const isAutoDarkTheme = useThemeDetector();
-  const themeType = useMemo7(() => {
+  const themeType = useMemo8(() => {
     var _props_theme;
     return props.theme === "auto" ? isAutoDarkTheme ? "dark" : "light" : (_props_theme = props.theme) !== null && _props_theme !== void 0 ? _props_theme : "light";
   }, [
     isAutoDarkTheme,
     props.theme
   ]);
-  const theme = useMemo7(() => {
+  const theme = useMemo8(() => {
     const backgroundColor = typeof themeType === "object" ? themeType.base00 : themeType === "dark" ? darkColorspace.base00 : lightColorspace.base00;
     const foregroundColor = typeof themeType === "object" ? themeType.base07 : themeType === "dark" ? darkColorspace.base07 : lightColorspace.base07;
     return createTheme({
@@ -21506,15 +21757,15 @@ var JsonViewer = function JsonViewer2(props) {
     ...props,
     theme: themeType
   };
-  const jsonViewerStore = useMemo7(() => createJsonViewerStore(props), []);
-  const typeRegistryStore = useMemo7(() => createTypeRegistryStore(), []);
-  return /* @__PURE__ */ jsx136(ThemeProvider, {
+  const jsonViewerStore = useMemo8(() => createJsonViewerStore(props), []);
+  const typeRegistryStore = useMemo8(() => createTypeRegistryStore(), []);
+  return /* @__PURE__ */ jsx137(ThemeProvider, {
     theme,
-    children: /* @__PURE__ */ jsx136(TypeRegistryStoreContext.Provider, {
+    children: /* @__PURE__ */ jsx137(TypeRegistryStoreContext.Provider, {
       value: typeRegistryStore,
-      children: /* @__PURE__ */ jsx136(JsonViewerStoreContext.Provider, {
+      children: /* @__PURE__ */ jsx137(JsonViewerStoreContext.Provider, {
         value: jsonViewerStore,
-        children: /* @__PURE__ */ jsx136(JsonViewerInner, {
+        children: /* @__PURE__ */ jsx137(JsonViewerInner, {
           ...mixedProps
         })
       })
@@ -21524,7 +21775,7 @@ var JsonViewer = function JsonViewer2(props) {
 
 // src/components/event-details/payload-viewer.tsx
 import { memo as memo10 } from "react";
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
 function tryParseJson(value) {
   if (typeof value !== "string") {
     return value;
@@ -21537,7 +21788,7 @@ function tryParseJson(value) {
 }
 var PayloadViewer = memo10(({ sx, testId, value }) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ jsx137(Box12, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx138(Box13, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ jsx138(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -21551,21 +21802,21 @@ var PayloadViewer = memo10(({ sx, testId, value }) => {
 });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment9, jsx as jsx138, jsxs as jsxs128 } from "react/jsx-runtime";
-var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs128(Box13, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx138(Box13, { children: typeof content === "string" ? /* @__PURE__ */ jsx138(Typography9, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
+import { Fragment as Fragment9, jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
+var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs129(Box14, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ jsx139(Typography10, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx139(Box14, { children: typeof content === "string" ? /* @__PURE__ */ jsx139(Typography10, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState14(false);
-  const [isOverflowing, setIsOverflowing] = useState14(false);
-  const textReference = useRef12(null);
-  const parsedMessage = useMemo8(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = useMemo8(
+  const [isOpen, setIsOpen] = useState15(false);
+  const [isOverflowing, setIsOverflowing] = useState15(false);
+  const textReference = useRef13(null);
+  const parsedMessage = useMemo9(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = useMemo9(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  useEffect18(() => {
+  useEffect19(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -21578,17 +21829,17 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = useMemo8(
+  const hasAdditionalContent = useMemo9(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = useMemo8(
+  const shouldShowToggle = useMemo9(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
-  return /* @__PURE__ */ jsxs128(Box13, { sx: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs128(Box13, { sx: { alignItems: "center", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsxs129(Box14, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs129(Box14, { sx: { alignItems: "center", display: "flex" }, children: [
+      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx139(
         IconButton4,
         {
           onClick: () => {
@@ -21596,11 +21847,11 @@ var EventMessage = ({ event }) => {
           },
           size: "small",
           sx: { mr: 1, p: 0 },
-          children: isOpen ? /* @__PURE__ */ jsx138(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx138(KeyboardArrowRight, { sx: { fontSize: 16 } })
+          children: isOpen ? /* @__PURE__ */ jsx139(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx139(KeyboardArrowRight, { sx: { fontSize: 16 } })
         }
       ),
-      /* @__PURE__ */ jsx138(
-        Typography9,
+      /* @__PURE__ */ jsx139(
+        Typography10,
         {
           ref: textReference,
           sx: {
@@ -21617,12 +21868,12 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx138(Box13, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx138(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs128(Fragment9, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx138(DetailRow2, { content: parsedMessage.message, label: "Message" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx138(
+    isOpen && /* @__PURE__ */ jsx139(Box14, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx139(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs129(Fragment9, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx139(DetailRow2, { content: parsedMessage.message, label: "Message" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx139(
         DetailRow2,
         {
-          content: /* @__PURE__ */ jsx138(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
+          content: /* @__PURE__ */ jsx139(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
           label: "Details"
         }
       )
@@ -21655,15 +21906,15 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ jsx138(IAMPermissionDetail, { events, spanStatusCode });
+    return /* @__PURE__ */ jsx139(IAMPermissionDetail, { events, spanStatusCode });
   }
   const eventLevel = getEventLevelFromGroup(type);
-  return /* @__PURE__ */ jsxs128(Box13, { children: [
-    /* @__PURE__ */ jsxs128(Box13, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsx138(StatusIcon2, { errorLevel: eventLevel }),
-      /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
+  return /* @__PURE__ */ jsxs129(Box14, { children: [
+    /* @__PURE__ */ jsxs129(Box14, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsx139(StatusIcon2, { errorLevel: eventLevel }),
+      /* @__PURE__ */ jsx139(Typography10, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
     ] }),
-    /* @__PURE__ */ jsx138(Box13, { children: events.map((event) => /* @__PURE__ */ jsx138(Box13, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ jsx138(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
+    /* @__PURE__ */ jsx139(Box14, { children: events.map((event) => /* @__PURE__ */ jsx139(Box14, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ jsx139(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
   ] });
 };
 
@@ -22105,18 +22356,18 @@ function toBase64(_input) {
 // node_modules/.pnpm/@smithy+util-stream@4.5.25/node_modules/@smithy/util-stream/dist-es/blob/Uint8ArrayBlobAdapter.js
 init_dist_es();
 var Uint8ArrayBlobAdapter = class _Uint8ArrayBlobAdapter extends Uint8Array {
-  static fromString(source, encoding = "utf-8") {
-    if (typeof source === "string") {
+  static fromString(source2, encoding = "utf-8") {
+    if (typeof source2 === "string") {
       if (encoding === "base64") {
-        return _Uint8ArrayBlobAdapter.mutate(fromBase64(source));
+        return _Uint8ArrayBlobAdapter.mutate(fromBase64(source2));
       }
-      return _Uint8ArrayBlobAdapter.mutate(fromUtf8(source));
+      return _Uint8ArrayBlobAdapter.mutate(fromUtf8(source2));
     }
-    throw new Error(`Unsupported conversion from ${typeof source} to Uint8ArrayBlobAdapter.`);
+    throw new Error(`Unsupported conversion from ${typeof source2} to Uint8ArrayBlobAdapter.`);
   }
-  static mutate(source) {
-    Object.setPrototypeOf(source, _Uint8ArrayBlobAdapter.prototype);
-    return source;
+  static mutate(source2) {
+    Object.setPrototypeOf(source2, _Uint8ArrayBlobAdapter.prototype);
+    return source2;
   }
   transformToString(encoding = "utf-8") {
     if (encoding === "base64") {
@@ -28341,7 +28592,7 @@ var SmithyMessageEncoderStream = class {
 };
 
 // node_modules/.pnpm/@smithy+eventstream-serde-universal@4.2.14/node_modules/@smithy/eventstream-serde-universal/dist-es/getChunkedStream.js
-function getChunkedStream(source) {
+function getChunkedStream(source2) {
   let currentMessageTotalLength = 0;
   let currentMessagePendingLength = 0;
   let currentMessage = null;
@@ -28357,7 +28608,7 @@ function getChunkedStream(source) {
     currentMessageView.setUint32(0, size, false);
   };
   const iterator = async function* () {
-    const sourceIterator = source[Symbol.asyncIterator]();
+    const sourceIterator = source2[Symbol.asyncIterator]();
     while (true) {
       const { value, done } = await sourceIterator.next();
       if (done) {
@@ -31620,9 +31871,9 @@ var QueryStatus = {
 };
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
-import { Box as Box14, CircularProgress as CircularProgress3, Stack as Stack3, Typography as Typography10 } from "@mui/material";
-import { useEffect as useEffect19, useMemo as useMemo9, useRef as useRef13, useState as useState15 } from "react";
-import { jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
+import { Box as Box15, CircularProgress as CircularProgress3, Stack as Stack3, Typography as Typography11 } from "@mui/material";
+import { useEffect as useEffect20, useMemo as useMemo10, useRef as useRef14, useState as useState16 } from "react";
+import { jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS2 = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
@@ -31639,7 +31890,7 @@ async function startLambdaLogsQuery(client, functionName2, requestId, startTimeS
 }
 function useCloudWatchLogsClient(region) {
   const { localstackEndpoint } = useAppInspector();
-  const client = useMemo9(() => new CloudWatchLogsClient({
+  const client = useMemo10(() => new CloudWatchLogsClient({
     credentials: {
       accessKeyId: "test",
       secretAccessKey: "test"
@@ -31650,12 +31901,12 @@ function useCloudWatchLogsClient(region) {
   return client;
 }
 function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
-  const [loading, setLoading] = useState15(true);
-  const [logs, setLogs] = useState15([]);
-  const [error, setError] = useState15();
-  const pollTimerRef = useRef13(null);
+  const [loading, setLoading] = useState16(true);
+  const [logs, setLogs] = useState16([]);
+  const [error, setError] = useState16();
+  const pollTimerRef = useRef14(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
-  useEffect19(() => {
+  useEffect20(() => {
     let cancelled = false;
     const startTimeSec = Math.floor(Number(BigInt(startTimeNano) / BigInt(1e9)));
     const endTimeSec = Math.ceil(Number(BigInt(endTimeNano) / BigInt(1e9)));
@@ -31712,30 +31963,30 @@ function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, en
 var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, region, requestId, startTimeNano }) => {
   const { error, loading, logs } = useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano);
   if (loading) {
-    return /* @__PURE__ */ jsxs129(Stack3, { alignItems: "center", direction: "row", spacing: 1, children: [
-      /* @__PURE__ */ jsx139(CircularProgress3, { size: 14 }),
-      /* @__PURE__ */ jsx139(Typography10, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
+    return /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx140(CircularProgress3, { size: 14 }),
+      /* @__PURE__ */ jsx140(Typography11, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
     ] });
   }
   if (error !== void 0) {
-    return /* @__PURE__ */ jsx139(Typography10, { color: "error", variant: "body2", children: error.message });
+    return /* @__PURE__ */ jsx140(Typography11, { color: "error", variant: "body2", children: error.message });
   }
   if (logs.length === 0) {
-    return /* @__PURE__ */ jsx139(Typography10, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
+    return /* @__PURE__ */ jsx140(Typography11, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
   }
-  return /* @__PURE__ */ jsx139(Box14, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx139("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx139(Typography10, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
+  return /* @__PURE__ */ jsx140(Box15, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx140("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx140(Typography11, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
 };
 
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
-import { Box as Box15, Typography as Typography11 } from "@mui/material";
-import { useState as useState16 } from "react";
-import { jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
+import { Box as Box16, Typography as Typography12 } from "@mui/material";
+import { useState as useState17 } from "react";
+import { jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState16(initialOpen);
-  return /* @__PURE__ */ jsxs130(Box15, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ jsxs130(
-      Box15,
+  const [isOpen, setIsOpen] = useState17(initialOpen);
+  return /* @__PURE__ */ jsxs131(Box16, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ jsxs131(
+      Box16,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -31748,8 +31999,8 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
           mb: 1
         },
         children: [
-          /* @__PURE__ */ jsxs130(
-            Box15,
+          /* @__PURE__ */ jsxs131(
+            Box16,
             {
               role: "button",
               sx: {
@@ -31758,23 +32009,23 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
                 gap: 1
               },
               children: [
-                /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-                isOpen ? /* @__PURE__ */ jsx140(KeyboardArrowDown2, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx140(KeyboardArrowRight2, { sx: { color: "text.secondary", height: 20, width: 20 } })
+                /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+                isOpen ? /* @__PURE__ */ jsx141(KeyboardArrowDown2, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx141(KeyboardArrowRight2, { sx: { color: "text.secondary", height: 20, width: 20 } })
               ]
             }
           ),
-          action !== false && /* @__PURE__ */ jsx140(Box15, { onClick: (event) => {
+          action !== false && /* @__PURE__ */ jsx141(Box16, { onClick: (event) => {
             event.stopPropagation();
           }, children: action })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx140(Box15, { children })
+    isOpen && /* @__PURE__ */ jsx141(Box16, { children })
   ] });
 };
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment10, jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
 var checkIsLambdaInvoke = (span) => {
   if (span.service_name !== "lambda") {
     return false;
@@ -31789,13 +32040,13 @@ var checkIsSqsSendMessage = (span) => {
   return span.operation_name.startsWith("SendMessage");
 };
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const eventGroups = useMemo10(
+  const eventGroups = useMemo11(
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
-  const [parseNestedJson, setParseNestedJson] = useState17(true);
+  const [parseNestedJson, setParseNestedJson] = useState18(true);
   if (!selectedEvent) {
-    return /* @__PURE__ */ jsx141(Box16, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx141(Typography12, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
+    return /* @__PURE__ */ jsx142(Box17, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx142(Typography13, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
   }
   const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
   const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
@@ -31821,9 +32072,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
   const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0 || isResponseSuppressed;
   const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
-  return /* @__PURE__ */ jsxs131(Box16, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs131(
-      Box16,
+  return /* @__PURE__ */ jsxs132(Box17, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs132(
+      Box17,
       {
         sx: {
           alignItems: "center",
@@ -31835,90 +32086,90 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           py: 1
         },
         children: [
-          /* @__PURE__ */ jsx141(Box16, { children: /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ jsx141(IconButton5, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx141(Close3, {}) })
+          /* @__PURE__ */ jsx142(Box17, { children: /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          onClose && /* @__PURE__ */ jsx142(IconButton5, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx142(Close3, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx141(Box16, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs131(Stack4, { spacing: 2, children: [
-      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs131(Stack4, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
-        /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: getServiceDisplayName(selectedEvent.service_name) })
+    /* @__PURE__ */ jsx142(Box17, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs132(Stack4, { spacing: 2, children: [
+      /* @__PURE__ */ jsx142(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs132(Stack4, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
+        /* @__PURE__ */ jsxs132(Box17, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs132(Box17, { children: [
+            /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+            /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography13, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: getServiceDisplayName(selectedEvent.service_name) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
-            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.operation_name })
+          /* @__PURE__ */ jsxs132(Box17, { children: [
+            /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
+            /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography13, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.operation_name })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs131(Box16, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
-          /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography12, { variant: "body2", children: selectedEvent.resource_name }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.resource_name })
+        /* @__PURE__ */ jsxs132(Box17, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
+          /* @__PURE__ */ jsxs132(Box17, { children: [
+            /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+            /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography13, { variant: "body2", children: selectedEvent.resource_name }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.resource_name })
             ] })
           ] }),
-          Boolean(cfnResourceType) && /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
-            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: cfnResourceType })
+          Boolean(cfnResourceType) && /* @__PURE__ */ jsxs132(Box17, { children: [
+            /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
+            /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography13, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: cfnResourceType })
             ] })
           ] })
         ] }),
-        Boolean(resourceArn) && /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx141(Typography12, { variant: "body2", children: resourceArn }),
-            /* @__PURE__ */ jsx141(CopyButton, { value: resourceArn })
+        Boolean(resourceArn) && /* @__PURE__ */ jsxs132(Box17, { children: [
+          /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
+          /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx142(Typography13, { variant: "body2", children: resourceArn }),
+            /* @__PURE__ */ jsx142(CopyButton, { value: resourceArn })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
-            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.account_id })
+        /* @__PURE__ */ jsxs132(Box17, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs132(Box17, { children: [
+            /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
+            /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography13, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.account_id })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.region })
+          /* @__PURE__ */ jsxs132(Box17, { children: [
+            /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+            /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography13, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.region })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography12, { variant: "body2", children: /* @__PURE__ */ jsx141(ResponsiveTimestampCell, { date: unixNanoToDate(selectedEvent.start_time_unix_nano) }) }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+        /* @__PURE__ */ jsxs132(Box17, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs132(Box17, { children: [
+            /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+            /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx142(Typography13, { variant: "body2", children: /* @__PURE__ */ jsx142(ResponsiveTimestampCell, { date: unixNanoToDate(selectedEvent.start_time_unix_nano) }) }),
+              /* @__PURE__ */ jsx142(CopyButton, { value: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
             ] })
           ] }),
-          duration !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_DURATION_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsxs131(Typography12, { variant: "body2", children: [
+          duration !== void 0 && /* @__PURE__ */ jsxs132(Box17, { children: [
+            /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+            /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_DURATION_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsxs132(Typography13, { variant: "body2", children: [
                 duration,
                 "ms"
               ] }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: `${duration}ms` })
+              /* @__PURE__ */ jsx142(CopyButton, { value: `${duration}ms` })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
-          /* @__PURE__ */ jsx141(Stack4, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsxs132(Box17, { children: [
+          /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
+          /* @__PURE__ */ jsx142(Stack4, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx142(
             Chip3,
             {
               color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
@@ -31929,50 +32180,50 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx141(Divider4, {}),
-      /* @__PURE__ */ jsxs131(ToggleSection, { headline: "Permissions", children: [
-        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ jsx141(Alert4, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
-        !selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx141(Typography12, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
-        eventGroups.permissions && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
-        eventGroups.errors && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
-        eventGroups.warnings && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
+      /* @__PURE__ */ jsx142(Divider4, {}),
+      /* @__PURE__ */ jsxs132(ToggleSection, { headline: "Permissions", children: [
+        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ jsx142(Alert5, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
+        !selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx142(Typography13, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
+        eventGroups.permissions && /* @__PURE__ */ jsx142(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
+        eventGroups.errors && /* @__PURE__ */ jsx142(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
+        eventGroups.warnings && /* @__PURE__ */ jsx142(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
       ] }),
-      hasPayloads && /* @__PURE__ */ jsxs131(Fragment10, { children: [
-        /* @__PURE__ */ jsx141(Divider4, {}),
-        /* @__PURE__ */ jsx141(
+      hasPayloads && /* @__PURE__ */ jsxs132(Fragment10, { children: [
+        /* @__PURE__ */ jsx142(Divider4, {}),
+        /* @__PURE__ */ jsx142(
           ToggleSection,
           {
-            action: /* @__PURE__ */ jsx141(
+            action: /* @__PURE__ */ jsx142(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ jsx141(Switch, { checked: !parseNestedJson, onChange: (event) => {
+                control: /* @__PURE__ */ jsx142(Switch, { checked: !parseNestedJson, onChange: (event) => {
                   setParseNestedJson(!event.target.checked);
                 }, size: "small" }),
-                label: /* @__PURE__ */ jsx141(Typography12, { variant: "caption", children: "View raw data" }),
+                label: /* @__PURE__ */ jsx142(Typography13, { variant: "caption", children: "View raw data" }),
                 sx: { mr: 0 }
               }
             ),
             headline: "Payloads",
-            children: /* @__PURE__ */ jsxs131(Stack4, { spacing: 2, children: [
-              requestPayload !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
-                /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Request" }),
-                /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
+            children: /* @__PURE__ */ jsxs132(Stack4, { spacing: 2, children: [
+              requestPayload !== void 0 && /* @__PURE__ */ jsxs132(Box17, { children: [
+                /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Request" }),
+                /* @__PURE__ */ jsx142(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
-              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ jsxs131(Box16, { children: [
-                /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Response" }),
-                isResponseSuppressed ? /* @__PURE__ */ jsx141(Box16, { sx: { py: 1 }, children: /* @__PURE__ */ jsx141(Alert4, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
+              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ jsxs132(Box17, { children: [
+                /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Response" }),
+                isResponseSuppressed ? /* @__PURE__ */ jsx142(Box17, { sx: { py: 1 }, children: /* @__PURE__ */ jsx142(Alert5, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ jsx142(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
               ] }),
-              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
-                /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Exception" }),
-                /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
+              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs132(Box17, { children: [
+                /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Exception" }),
+                /* @__PURE__ */ jsx142(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
               ] })
             ] })
           }
         )
       ] }),
-      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs131(Fragment10, { children: [
-        /* @__PURE__ */ jsx141(Divider4, {}),
-        /* @__PURE__ */ jsx141(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx141(
+      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs132(Fragment10, { children: [
+        /* @__PURE__ */ jsx142(Divider4, {}),
+        /* @__PURE__ */ jsx142(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx142(
           LambdaInvokeLogsSection,
           {
             endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
@@ -31983,30 +32234,30 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx141(Divider4, {}),
-      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs131(Stack4, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id }),
-            /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.span_id })
+      /* @__PURE__ */ jsx142(Divider4, {}),
+      /* @__PURE__ */ jsx142(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs132(Stack4, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs132(Box17, { children: [
+          /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx142(Typography13, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id }),
+            /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.span_id })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id }),
-            /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.trace_id })
+        /* @__PURE__ */ jsxs132(Box17, { children: [
+          /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx142(Typography13, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id }),
+            /* @__PURE__ */ jsx142(CopyButton, { value: selectedEvent.trace_id })
           ] })
         ] }),
-        requestId !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId }),
-            /* @__PURE__ */ jsx141(CopyButton, { value: requestId })
+        requestId !== void 0 && /* @__PURE__ */ jsxs132(Box17, { children: [
+          /* @__PURE__ */ jsx142(Typography13, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
+          /* @__PURE__ */ jsxs132(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx142(Typography13, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId }),
+            /* @__PURE__ */ jsx142(CopyButton, { value: requestId })
           ] })
         ] }),
-        eventGroups.info && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
+        eventGroups.info && /* @__PURE__ */ jsx142(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
       ] }) })
     ] }) })
   ] });
@@ -32014,18 +32265,18 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
-import { Alert as Alert5, Button as Button6, useTheme as useTheme6 } from "@mui/material";
+import { Alert as Alert6, Button as Button7, useTheme as useTheme6 } from "@mui/material";
 import { Background, MarkerType, MiniMap, Position as Position2, ReactFlow, useEdgesState, useNodesState, useStore as useStore4 } from "@xyflow/react";
-import { useCallback as useCallback10, useEffect as useEffect20, useRef as useRef15, useState as useState19 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef16, useState as useState20 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Cancel as Cancel4, GppBad as GppBad3 } from "@mui/icons-material";
-import { Box as Box17, Divider as Divider5, Stack as Stack5, Tooltip as Tooltip6, Typography as Typography13, useTheme as useTheme4 } from "@mui/material";
+import { Box as Box18, Divider as Divider5, Stack as Stack5, Tooltip as Tooltip6, Typography as Typography14, useTheme as useTheme4 } from "@mui/material";
 import { Handle, Position } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import "react";
-import { memo as memo11, useMemo as useMemo11, useRef as useRef14, useState as useState18 } from "react";
-import { Fragment as Fragment11, jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
+import { memo as memo11, useMemo as useMemo12, useRef as useRef15, useState as useState19 } from "react";
+import { Fragment as Fragment11, jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
@@ -32033,20 +32284,20 @@ var handleStyle = {
 };
 var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning }) => {
   const theme = useTheme4();
-  return /* @__PURE__ */ jsxs132(Fragment11, { children: [
-    /* @__PURE__ */ jsx142(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-    /* @__PURE__ */ jsx142(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
-    /* @__PURE__ */ jsxs132(
+  return /* @__PURE__ */ jsxs133(Fragment11, { children: [
+    /* @__PURE__ */ jsx143(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+    /* @__PURE__ */ jsx143(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+    /* @__PURE__ */ jsxs133(
       Stack5,
       {
         alignItems: "center",
         direction: "row",
         sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
         children: [
-          /* @__PURE__ */ jsx142(Box17, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx142(AwsServiceIcon, { hideTooltip: true, service: event.service_name, size: "medium" }) }),
-          /* @__PURE__ */ jsxs132(Stack5, { sx: expanded ? void 0 : { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx142(
-              Typography13,
+          /* @__PURE__ */ jsx143(Box18, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx143(AwsServiceIcon, { hideTooltip: true, service: event.service_name, size: "medium" }) }),
+          /* @__PURE__ */ jsxs133(Stack5, { sx: expanded ? void 0 : { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx143(
+              Typography14,
               {
                 noWrap: !expanded,
                 sx: { fontWeight: 700, lineHeight: 1.25, ...expanded && { whiteSpace: "nowrap" } },
@@ -32054,8 +32305,8 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 children: getServiceDisplayName(event.service_name)
               }
             ),
-            event.resource_name != "" && /* @__PURE__ */ jsx142(
-              Typography13,
+            event.resource_name != "" && /* @__PURE__ */ jsx143(
+              Typography14,
               {
                 color: "text.secondary",
                 noWrap: !expanded,
@@ -32068,16 +32319,16 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
         ]
       }
     ),
-    /* @__PURE__ */ jsx142(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
-    /* @__PURE__ */ jsxs132(
+    /* @__PURE__ */ jsx143(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+    /* @__PURE__ */ jsxs133(
       Stack5,
       {
         alignItems: "center",
         direction: "row",
         sx: expanded ? { pb: "5px", pr: "8px", pt: "1px" } : { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
         children: [
-          /* @__PURE__ */ jsxs132(
-            Box17,
+          /* @__PURE__ */ jsxs133(
+            Box18,
             {
               sx: {
                 alignItems: "center",
@@ -32087,13 +32338,13 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 width: "38px"
               },
               children: [
-                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip6, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx142(GppBad3, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
-                isError && !hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip6, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx142(Cancel4, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx143(GppBad3, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
+                isError && !hasPermissionEvents && /* @__PURE__ */ jsx143(Tooltip6, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx143(Cancel4, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx142(
-            Typography13,
+          /* @__PURE__ */ jsx143(
+            Typography14,
             {
               "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
               noWrap: !expanded,
@@ -32109,10 +32360,10 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
 };
 var ServiceNode = memo11(({ data, selected }) => {
   const theme = useTheme4();
-  const [isHovered, setIsHovered] = useState18(false);
-  const nodeRef = useRef14(null);
+  const [isHovered, setIsHovered] = useState19(false);
+  const nodeRef = useRef15(null);
   const { operation_status } = data.event;
-  const hasPermissionEventsLegacy = useMemo11(
+  const hasPermissionEventsLegacy = useMemo12(
     () => data.event.events.some(
       (event) => event.event_type === "iam.policy_evaluation" && event.name === "iam.policy.denied"
     ),
@@ -32143,8 +32394,8 @@ var ServiceNode = memo11(({ data, selected }) => {
     const xyNode = nodeRef.current?.closest(".react-flow__node");
     if (xyNode) xyNode.style.zIndex = "";
   };
-  return /* @__PURE__ */ jsxs132(
-    Box17,
+  return /* @__PURE__ */ jsxs133(
+    Box18,
     {
       "data-testid": SERVICE_NODE_TEST_ID,
       onMouseEnter: handleMouseEnter,
@@ -32154,8 +32405,8 @@ var ServiceNode = memo11(({ data, selected }) => {
       sx: { display: "inline-block", position: "relative" },
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx142(
-          Box17,
+        /* @__PURE__ */ jsx143(
+          Box18,
           {
             sx: {
               ...sharedBoxSx,
@@ -32163,11 +32414,11 @@ var ServiceNode = memo11(({ data, selected }) => {
               maxWidth: 220,
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx142(NodeContent, { ...contentProps, expanded: false })
+            children: /* @__PURE__ */ jsx143(NodeContent, { ...contentProps, expanded: false })
           }
         ),
-        /* @__PURE__ */ jsx142(
-          Box17,
+        /* @__PURE__ */ jsx143(
+          Box18,
           {
             onMouseLeave: handleMouseLeave,
             sx: {
@@ -32181,7 +32432,7 @@ var ServiceNode = memo11(({ data, selected }) => {
               width: "max-content",
               zIndex: 10
             },
-            children: /* @__PURE__ */ jsx142(NodeContent, { ...contentProps, expanded: true })
+            children: /* @__PURE__ */ jsx143(NodeContent, { ...contentProps, expanded: true })
           }
         )
       ]
@@ -32276,11 +32527,11 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box18, IconButton as IconButton6 } from "@mui/material";
+import { Box as Box19, IconButton as IconButton6 } from "@mui/material";
 import { useReactFlow, useStore as useStore2 } from "@xyflow/react";
 import { memo as memo12 } from "react";
 import { shallow } from "zustand/shallow";
-import { jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs134 } from "react/jsx-runtime";
 var selector = (s) => ({
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   maxZoomReached: s.transform[2] >= s.maxZoom,
@@ -32298,8 +32549,8 @@ var Controls = memo12(() => {
   const onFitViewHandler = () => {
     void fitView();
   };
-  return /* @__PURE__ */ jsxs133(
-    Box18,
+  return /* @__PURE__ */ jsxs134(
+    Box19,
     {
       sx: {
         bottom: 0,
@@ -32312,33 +32563,33 @@ var Controls = memo12(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx144(
           IconButton6,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(Add, {})
+            children: /* @__PURE__ */ jsx144(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx144(
           IconButton6,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(Remove, {})
+            children: /* @__PURE__ */ jsx144(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx144(
           IconButton6,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(FitScreen, {})
+            children: /* @__PURE__ */ jsx144(FitScreen, {})
           }
         )
       ]
@@ -32350,7 +32601,7 @@ var Controls = memo12(() => {
 import { useTheme as useTheme5 } from "@mui/material";
 import { useStore as useStore3 } from "@xyflow/react";
 import { memo as memo13 } from "react";
-import { jsx as jsx144, jsxs as jsxs134 } from "react/jsx-runtime";
+import { jsx as jsx145, jsxs as jsxs135 } from "react/jsx-runtime";
 var ICON_FRACTION = 0.35;
 var PADDING_FRACTION = 0.18;
 var ICON_NATIVE_SIZE = 80;
@@ -32379,10 +32630,10 @@ var MinimapServiceNode = memo13(({
   const dotY = y + height - padding - dotRadius;
   const outlineColor = selected ? isError ? errorColor : "#1a73e8" : "#cccccc";
   const outlineWidth = selected ? 2 : 1;
-  return /* @__PURE__ */ jsxs134("g", { onClick: onClick ? (event2) => {
+  return /* @__PURE__ */ jsxs135("g", { onClick: onClick ? (event2) => {
     onClick(event2, id2);
   } : void 0, children: [
-    /* @__PURE__ */ jsx144(
+    /* @__PURE__ */ jsx145(
       "rect",
       {
         fill: theme.palette.background.paper,
@@ -32396,7 +32647,7 @@ var MinimapServiceNode = memo13(({
         y
       }
     ),
-    isError && /* @__PURE__ */ jsx144(
+    isError && /* @__PURE__ */ jsx145(
       "rect",
       {
         fill: errorColor,
@@ -32408,8 +32659,8 @@ var MinimapServiceNode = memo13(({
         y: y + 3
       }
     ),
-    Icon && /* @__PURE__ */ jsx144("g", { transform: `translate(${String(x + padding)}, ${String(y + padding)}) scale(${String(scale2)})`, children: /* @__PURE__ */ jsx144(Icon, { height: ICON_NATIVE_SIZE, width: ICON_NATIVE_SIZE }) }),
-    isError && Icon && /* @__PURE__ */ jsx144(
+    Icon && /* @__PURE__ */ jsx145("g", { transform: `translate(${String(x + padding)}, ${String(y + padding)}) scale(${String(scale2)})`, children: /* @__PURE__ */ jsx145(Icon, { height: ICON_NATIVE_SIZE, width: ICON_NATIVE_SIZE }) }),
+    isError && Icon && /* @__PURE__ */ jsx145(
       "circle",
       {
         cx: dotX,
@@ -32422,7 +32673,7 @@ var MinimapServiceNode = memo13(({
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment12, jsx as jsx145, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx146, jsxs as jsxs136 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -32430,7 +32681,7 @@ var ExtentUpdater = ({ onUpdate, viewportRef }) => {
   const zoom = useStore4((s) => s.transform[2]);
   const width = useStore4((s) => s.width);
   const height = useStore4((s) => s.height);
-  useEffect20(() => {
+  useEffect21(() => {
     viewportRef.current = { height, width, zoom };
     onUpdate();
   }, [zoom, width, height, onUpdate, viewportRef]);
@@ -32444,10 +32695,10 @@ var TraceGraph = ({
 }) => {
   const [nodes2, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges] = useEdgesState([]);
-  const [translateExtent, setTranslateExtent] = useState19();
-  const nodeBoundsRef = useRef15(null);
-  const viewportRef = useRef15({ height: 0, width: 0, zoom: 1 });
-  const updateExtent = useCallback10(() => {
+  const [translateExtent, setTranslateExtent] = useState20();
+  const nodeBoundsRef = useRef16(null);
+  const viewportRef = useRef16({ height: 0, width: 0, zoom: 1 });
+  const updateExtent = useCallback11(() => {
     const bounds = nodeBoundsRef.current;
     const { height, width, zoom } = viewportRef.current;
     if (!bounds || width === 0 || height === 0) return;
@@ -32460,7 +32711,7 @@ var TraceGraph = ({
       [bounds.maxX + hMargin, bounds.maxY + vMargin]
     ]);
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     const allNodes = [];
     const allEdges = [];
     for (const span of spans.data ?? []) {
@@ -32533,11 +32784,11 @@ var TraceGraph = ({
     }
   }, [spans.data, initialFocusEventId, setNodes, setEdges, updateExtent]);
   const theme = useTheme6();
-  return /* @__PURE__ */ jsxs135(Fragment12, { children: [
-    spans.error && /* @__PURE__ */ jsxs135(
-      Alert5,
+  return /* @__PURE__ */ jsxs136(Fragment12, { children: [
+    spans.error && /* @__PURE__ */ jsxs136(
+      Alert6,
       {
-        action: /* @__PURE__ */ jsx145(Button6, { onClick: () => {
+        action: /* @__PURE__ */ jsx146(Button7, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -32549,7 +32800,7 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs135(
+    /* @__PURE__ */ jsxs136(
       ReactFlow,
       {
         colorMode: theme.palette.mode,
@@ -32569,9 +32820,9 @@ var TraceGraph = ({
         selectNodesOnDrag: false,
         translateExtent,
         children: [
-          /* @__PURE__ */ jsx145(ExtentUpdater, { onUpdate: updateExtent, viewportRef }),
-          /* @__PURE__ */ jsx145(Controls, {}),
-          /* @__PURE__ */ jsx145(
+          /* @__PURE__ */ jsx146(ExtentUpdater, { onUpdate: updateExtent, viewportRef }),
+          /* @__PURE__ */ jsx146(Controls, {}),
+          /* @__PURE__ */ jsx146(
             MiniMap,
             {
               nodeComponent: MinimapServiceNode,
@@ -32579,7 +32830,7 @@ var TraceGraph = ({
               zoomable: true
             }
           ),
-          /* @__PURE__ */ jsx145(
+          /* @__PURE__ */ jsx146(
             Background,
             {
               bgColor: theme.palette.background.default,
@@ -32593,7 +32844,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { jsx as jsx146, jsxs as jsxs136 } from "react/jsx-runtime";
+import { jsx as jsx147, jsxs as jsxs137 } from "react/jsx-runtime";
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
   flexGrow: 1,
@@ -32637,7 +32888,7 @@ var TraceGraphView = ({
   spans,
   traceId
 }) => {
-  return /* @__PURE__ */ jsxs136(
+  return /* @__PURE__ */ jsxs137(
     Paper2,
     {
       "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
@@ -32650,11 +32901,11 @@ var TraceGraphView = ({
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ jsx146(Main, { open, children: /* @__PURE__ */ jsxs136(Box19, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-          /* @__PURE__ */ jsx146(Box19, { sx: { display: "flex", px: 1, py: 1 }, children: /* @__PURE__ */ jsx146(Button7, { onClick: () => {
+        /* @__PURE__ */ jsx147(Main, { open, children: /* @__PURE__ */ jsxs137(Box20, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+          /* @__PURE__ */ jsx147(Box20, { sx: { display: "flex", px: 1, py: 1 }, children: /* @__PURE__ */ jsx147(Button8, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx146(ArrowBack, {}), children: "Go back" }) }),
-          /* @__PURE__ */ jsx146(Box19, { sx: { flexGrow: 1, overflow: "auto" }, children: traceId !== void 0 && /* @__PURE__ */ jsx146(ReactFlowProvider, { children: /* @__PURE__ */ jsx146(
+          }, startIcon: /* @__PURE__ */ jsx147(ArrowBack, {}), children: "Go back" }) }),
+          /* @__PURE__ */ jsx147(Box20, { sx: { flexGrow: 1, overflow: "auto" }, children: traceId !== void 0 && /* @__PURE__ */ jsx147(ReactFlowProvider, { children: /* @__PURE__ */ jsx147(
             TraceGraph,
             {
               initialFocusEventId: spanId,
@@ -32670,7 +32921,7 @@ var TraceGraphView = ({
             }
           ) }) })
         ] }) }),
-        /* @__PURE__ */ jsx146(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx146(EventDetails, { onClose: handleClose, selectedEvent }) })
+        /* @__PURE__ */ jsx147(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx147(EventDetails, { onClose: handleClose, selectedEvent }) })
       ]
     }
   );
@@ -32718,10 +32969,10 @@ async function fetchConnectedTracesWaterfall(api, traceIds, allSpans = /* @__PUR
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState20();
-  const [loading, setLoading] = useState20(false);
-  const [fetchError, setFetchError] = useState20();
-  const fetchSpans = useCallback11(async () => {
+  const [spans, setSpans] = useState21();
+  const [loading, setLoading] = useState21(false);
+  const [fetchError, setFetchError] = useState21();
+  const fetchSpans = useCallback12(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, traceId);
@@ -32734,27 +32985,27 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  useEffect21(() => {
+  useEffect22(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState20(true);
-  const [selectedEvent, setSelectedEvent] = useState20(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = useRef16();
-  useEffect21(() => {
+  const [open, setOpen] = useState21(true);
+  const [selectedEvent, setSelectedEvent] = useState21(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = useRef17();
+  useEffect22(() => {
     if (!spansReference.current && spans) {
       setSelectedEvent(spans.find((span) => span.span_id === spanId));
       spansReference.current = spans;
     }
   }, [spans, setSelectedEvent, spanId]);
-  const handleEventSelect = useCallback11((spanId2) => {
+  const handleEventSelect = useCallback12((spanId2) => {
     const span = spans?.find((s) => s.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const navigateToSpansList = useCallback11(() => {
+  const navigateToSpansList = useCallback12(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsx146(
+  return /* @__PURE__ */ jsx147(
     TraceGraphView,
     {
       fetchError,
@@ -32775,57 +33026,67 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-import { jsx as jsx147, jsxs as jsxs137 } from "react/jsx-runtime";
+import { jsx as jsx148, jsxs as jsxs138 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
     clearFetchError,
     clearingSpans,
     clearSpans,
+    consumerValues,
     errorCount,
     fetchError,
     fetchForward,
     fetchingBackward,
     fetchingForward,
+    filteredErrorCount,
+    filteredSpans,
+    filteredWarningCount,
+    filters,
+    hasExternalProducer,
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    producerValues,
+    retryWorker,
     search,
     searching,
+    setFilters,
     setSearch,
-    spans,
+    statusValues,
     systemLimit,
     totalCount,
-    warningCount
+    warningCount,
+    workerError
   } = useSpans();
   const { checkStatus, phase, status, statusError } = useAppInspectorStatus();
-  const clearSpansSync = useCallback12(() => {
+  const clearSpansSync = useCallback13(() => {
     void clearSpans();
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
   const versionCompatibility = checkEmulatorVersion(localstackVersion);
   const searchSupported = emulatorSupportsSearch(localstackVersion);
-  const [bannerDismissed, setBannerDismissed] = useState21(false);
+  const [bannerDismissed, setBannerDismissed] = useState22(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = useState21();
-  const [selectedSpanId, setSelectedSpanId] = useState21();
-  const navigateToSpan = useCallback12((span) => {
+  const [selectedTraceId, setSelectedTraceId] = useState22();
+  const [selectedSpanId, setSelectedSpanId] = useState22();
+  const navigateToSpan = useCallback13((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = useCallback12(() => {
+  const handleRetry = useCallback13(() => {
     checkStatus();
     fetchForward();
   }, [checkStatus, fetchForward]);
-  const handleEnable = useCallback12(async () => {
+  const handleEnable = useCallback13(async () => {
     await api.setStatus({ status: "ENABLED" });
     clearFetchError();
     checkStatus();
   }, [api, checkStatus, clearFetchError]);
-  const isDelayedRefetchRef = useRef17(false);
-  const delayedRefetchTimerRef = useRef17();
-  const prevFetchingForwardRef = useRef17(false);
-  useEffect22(() => {
+  const isDelayedRefetchRef = useRef18(false);
+  const delayedRefetchTimerRef = useRef18();
+  const prevFetchingForwardRef = useRef18(false);
+  useEffect23(() => {
     const wasFetching = prevFetchingForwardRef.current;
     prevFetchingForwardRef.current = fetchingForward;
     if (wasFetching && !fetchingForward) {
@@ -32846,10 +33107,10 @@ var SpansListPage = () => {
   switch (phase) {
     case "CHECKING_STATUS":
     case "CONNECTING_WS": {
-      return /* @__PURE__ */ jsx147(StatusMessage, { phase });
+      return /* @__PURE__ */ jsx148(StatusMessage, { phase });
     }
     case "DISABLED": {
-      return /* @__PURE__ */ jsx147(
+      return /* @__PURE__ */ jsx148(
         StatusMessage,
         {
           onEnable: handleEnable,
@@ -32858,7 +33119,7 @@ var SpansListPage = () => {
       );
     }
     case "INCOMPATIBLE": {
-      return /* @__PURE__ */ jsx147(
+      return /* @__PURE__ */ jsx148(
         StatusMessage,
         {
           localstackVersion,
@@ -32868,10 +33129,13 @@ var SpansListPage = () => {
       );
     }
     case "LIVE": {
+      if (workerError) {
+        return /* @__PURE__ */ jsx148(WorkerErrorMessage, { error: workerError, onRetry: retryWorker });
+      }
       break;
     }
     case "UNREACHABLE": {
-      return /* @__PURE__ */ jsx147(
+      return /* @__PURE__ */ jsx148(
         StatusMessage,
         {
           onRetry: handleRetry,
@@ -32880,9 +33144,9 @@ var SpansListPage = () => {
       );
     }
   }
-  return /* @__PURE__ */ jsxs137(Paper3, { square: true, sx: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: [
-    /* @__PURE__ */ jsxs137(
-      Box20,
+  return /* @__PURE__ */ jsxs138(Paper3, { square: true, sx: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: [
+    /* @__PURE__ */ jsxs138(
+      Box21,
       {
         "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
@@ -32897,7 +33161,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          /* @__PURE__ */ jsx147(
+          /* @__PURE__ */ jsx148(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -32907,27 +33171,35 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          /* @__PURE__ */ jsx147(
+          /* @__PURE__ */ jsx148(
             SpansList,
             {
               clearingSpans,
+              consumerValues,
               errorCount,
               fetchError,
               fetchingBackward,
               fetchingForward,
+              filteredErrorCount,
+              filteredSpans,
+              filteredWarningCount,
+              filters,
+              hasExternalProducer,
               hasMoreBackward,
               hasMoreForward,
               licenseLimit,
               onClearSpans: clearSpansSync,
               onFetchForward: fetchForward,
+              onFiltersChange: setFilters,
               onOrderChange: setOrder,
               onSearchChange: setSearch,
               onSpanClick: navigateToSpan,
               order: order2,
+              producerValues,
               search,
               searching,
               searchSupported,
-              spans,
+              statusValues,
               systemLimit,
               totalCount,
               warningCount
@@ -32936,7 +33208,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ jsx147(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ jsx148(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });