@localstack/appinspector-ui 1.0.140 → 1.0.142

package/dist/index.js

@@ -2421,7 +2421,7 @@ var init_event_streams = __esm({
 });
 
 // src/pages/spans-list-page.tsx
-import { Box as Box20 } from "@mui/material";
+import { Box as Box19 } from "@mui/material";
 import { useCallback as useCallback11, useEffect as useEffect22, useRef as useRef16, useState as useState18 } from "react";
 
 // src/api/errors.ts
@@ -2583,12 +2583,12 @@ var EmulatorVersionBanner = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-import { Alert as Alert2, Box as Box6, Button as Button3 } from "@mui/material";
+import { Alert as Alert2, Box as Box5, Button as Button3 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
 import { DeleteForeverOutlined } from "@mui/icons-material";
 import {
-  Box as Box5,
+  Box as Box4,
   Button as Button2,
   CircularProgress,
   FormControlLabel,
@@ -13061,7 +13061,7 @@ var motion = /* @__PURE__ */ createMotionProxy(function(Component, config) {
 });
 
 // src/components/spans-list/spans-data-grid.tsx
-import { memo as memo9, useCallback as useCallback2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef6 } from "react";
+import { memo as memo8, useCallback as useCallback2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef6 } from "react";
 
 // src/components/cells/responsive-timestamp-cell.tsx
 import { memo as memo3 } from "react";
@@ -13072,8 +13072,8 @@ var ResponsiveTimestampCell = memo3(({ date }) => {
 });
 
 // src/components/cells/service-cell.tsx
-import { Box as Box2, Divider, Typography, useTheme } from "@mui/material";
-import { memo as memo8 } from "react";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { memo as memo7 } from "react";
 
 // src/utils/service-display-name.ts
 var SERVICE_DISPLAY_NAME = {
@@ -15133,125 +15133,54 @@ var AwsServiceIcon = memo6(({ hideTooltip, service, size = "medium", title }) =>
   );
 });
 
-// src/components/cells/pill-cell.tsx
-import { Box } from "@mui/material";
-import { memo as memo7 } from "react";
-import { jsx as jsx123 } from "react/jsx-runtime";
-var PillCell = memo7(({
-  backgroundColor,
-  children,
-  height = "24px",
-  outlineColor,
-  outlineWidth = "1px",
-  paddingBottom,
-  paddingTop
+// src/components/cells/service-cell.tsx
+import { jsx as jsx123, jsxs as jsxs118 } from "react/jsx-runtime";
+var ServiceCell = memo7(({
+  resource,
+  selected,
+  service,
+  showIcon = true
 }) => {
-  return /* @__PURE__ */ jsx123(
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx123(Box, { sx: { ml: -1, width: "100%" }, children: /* @__PURE__ */ jsxs118(
     Box,
     {
       sx: {
         alignItems: "center",
-        backgroundColor: backgroundColor ?? ((theme) => theme.palette.background.paper),
-        borderRadius: "16px",
+        borderRadius: 1,
         display: "inline-flex",
-        height: paddingTop || paddingBottom ? "auto" : height,
+        gap: "8px",
         maxWidth: "100%",
-        outlineColor: outlineColor ?? ((theme) => theme.palette.divider),
-        outlineStyle: "solid",
-        outlineWidth,
-        ...paddingTop && { paddingTop },
-        ...paddingBottom && { paddingBottom },
-        overflow: "hidden"
+        outline: selected ? `2px solid ${theme.palette.primary.main}` : "none",
+        overflow: "hidden",
+        px: "8px",
+        py: "4px"
       },
-      children
-    }
-  );
-});
-
-// src/components/cells/service-cell.tsx
-import { Fragment as Fragment2, jsx as jsx124, jsxs as jsxs118 } from "react/jsx-runtime";
-var ServiceCell = memo8(({
-  height = "24px",
-  resource,
-  selected,
-  service,
-  showIcon = true,
-  width = "32px"
-}) => {
-  const theme = useTheme();
-  const outlineColor = selected ? theme.palette.primary.light : theme.palette.text.secondary;
-  const outlineWidth = selected ? "2px" : void 0;
-  return /* @__PURE__ */ jsx124(Box2, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs118(PillCell, { height, outlineColor, outlineWidth, children: [
-    showIcon ? /* @__PURE__ */ jsxs118(Fragment2, { children: [
-      /* @__PURE__ */ jsx124(
-        Box2,
-        {
-          sx: {
-            alignItems: "center",
-            display: "flex",
-            flexShrink: 0,
-            height,
-            justifyContent: "center",
-            overflow: "hidden",
-            padding: 0,
-            width
-          },
-          children: /* @__PURE__ */ jsx124(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
-        }
-      ),
-      /* @__PURE__ */ jsx124(Divider, { orientation: "vertical" })
-    ] }) : void 0,
-    /* @__PURE__ */ jsx124(
-      Typography,
-      {
-        sx: {
-          flexShrink: 1,
-          fontWeight: "bold",
-          minWidth: 0,
-          overflow: "hidden",
-          padding: "1px 8px",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          ...showIcon ? {} : {
-            borderBottomLeftRadius: "15px",
-            borderTopLeftRadius: "15px",
-            ...!resource && {
-              borderBottomRightRadius: "15px",
-              borderTopRightRadius: "15px"
+      children: [
+        showIcon && /* @__PURE__ */ jsx123(Box, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx123(AwsServiceIcon, { hideTooltip: true, service, size: "medium" }) }),
+        /* @__PURE__ */ jsxs118(Stack, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx123(Typography, { noWrap: true, sx: { fontWeight: 700, lineHeight: 1.25 }, variant: "body2", children: getServiceDisplayName(service) }),
+          resource ? /* @__PURE__ */ jsx123(
+            Typography,
+            {
+              color: "text.secondary",
+              "data-testid": SERVICE_NODE_SERVICE_NAME_TEST_ID,
+              noWrap: true,
+              sx: { lineHeight: 1.2 },
+              variant: "caption",
+              children: resource
             }
-          }
-        },
-        variant: "body2",
-        children: getServiceDisplayName(service)
-      }
-    ),
-    resource ? /* @__PURE__ */ jsxs118(Fragment2, { children: [
-      /* @__PURE__ */ jsx124(Box2, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ jsx124(Divider, { orientation: "vertical" }) }),
-      /* @__PURE__ */ jsx124(
-        Typography,
-        {
-          "data-testid": SERVICE_NODE_SERVICE_NAME_TEST_ID,
-          sx: {
-            borderBottomRightRadius: "15px",
-            borderTopRightRadius: "15px",
-            color: "text.secondary",
-            overflow: "hidden",
-            padding: "1px 8px",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          },
-          variant: "caption",
-          children: resource
-        }
-      )
-    ] }) : void 0
-  ] }) });
+          ) : void 0
+        ] })
+      ]
+    }
+  ) });
 });
 ServiceCell.displayName = "ServiceCell";
 
 // src/components/cells/status-cell.tsx
 import { Cancel, Error as Error2, GppBad } from "@mui/icons-material";
-import { Box as Box3, Divider as Divider2, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
+import { Box as Box2, Divider, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
 
 // src/types/error-levels.ts
 var ErrorLevel = {
@@ -15356,20 +15285,20 @@ function parseIAMEvent(payloadString) {
 }
 
 // src/components/cells/status-cell.tsx
-import { Fragment as Fragment3, jsx as jsx125, jsxs as jsxs119 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx124, jsxs as jsxs119 } from "react/jsx-runtime";
 var StatusIcon = ({ errorLevel, spanStatusCode }) => {
   switch (errorLevel) {
     case ErrorLevel.ERROR: {
-      return /* @__PURE__ */ jsx125(Cancel, { sx: { color: "red" } });
+      return /* @__PURE__ */ jsx124(Cancel, { sx: { color: "red" } });
     }
     case ErrorLevel.IAM_PERMISSION: {
-      return /* @__PURE__ */ jsx125(GppBad, { sx: { color: spanStatusCode === 2 ? "red" : "warning.main" } });
+      return /* @__PURE__ */ jsx124(GppBad, { sx: { color: spanStatusCode === 2 ? "red" : "warning.main" } });
     }
     case ErrorLevel.WARNING: {
-      return /* @__PURE__ */ jsx125(Error2, { sx: { color: "orange" } });
+      return /* @__PURE__ */ jsx124(Error2, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ jsx125(Fragment3, {});
+      return /* @__PURE__ */ jsx124(Fragment2, {});
     }
   }
 };
@@ -15401,30 +15330,30 @@ var buildTooltipContent = (span) => {
   }
   const spanStatusLabel = SPAN_STATUS_LABELS[span.status_code] ?? `Unknown (${span.status_code.toString()})`;
   const iamDenials = span.events.filter((event) => event.event_type?.toLowerCase().includes("iam") && typeof event.attributes?.payload === "string").map((event) => parseIAMEvent(event.attributes.payload)).filter((parsed) => parsed?.permission === "explicitly_denied" || parsed?.permission === "implicitly_denied").filter(Boolean);
-  return /* @__PURE__ */ jsxs119(Box3, { children: [
+  return /* @__PURE__ */ jsxs119(Box2, { children: [
     /* @__PURE__ */ jsxs119(Typography2, { color: "inherit", display: "block", fontWeight: "bold", variant: "caption", children: [
       "Status: ",
       spanStatusLabel
     ] }),
-    messages.map((message, index) => /* @__PURE__ */ jsx125(Typography2, { color: "inherit", display: "block", variant: "caption", children: message }, index)),
-    iamDenials.length > 0 && /* @__PURE__ */ jsxs119(Fragment3, { children: [
-      /* @__PURE__ */ jsx125(Divider2, { sx: { borderColor: "rgba(255,255,255,0.2)", my: 0.5 } }),
-      /* @__PURE__ */ jsx125(Typography2, { color: "inherit", display: "block", fontWeight: "bold", variant: "caption", children: "Permissions" }),
-      iamDenials.map((denial, index) => denial !== void 0 && /* @__PURE__ */ jsx125(Typography2, { color: "inherit", display: "block", variant: "caption", children: `${formatPermissionStatus(denial.permission)}: ${denial.service}.${denial.operation}` }, index))
+    messages.map((message, index) => /* @__PURE__ */ jsx124(Typography2, { color: "inherit", display: "block", variant: "caption", children: message }, index)),
+    iamDenials.length > 0 && /* @__PURE__ */ jsxs119(Fragment2, { children: [
+      /* @__PURE__ */ jsx124(Divider, { sx: { borderColor: "rgba(255,255,255,0.2)", my: 0.5 } }),
+      /* @__PURE__ */ jsx124(Typography2, { color: "inherit", display: "block", fontWeight: "bold", variant: "caption", children: "Permissions" }),
+      iamDenials.map((denial, index) => denial !== void 0 && /* @__PURE__ */ jsx124(Typography2, { color: "inherit", display: "block", variant: "caption", children: `${formatPermissionStatus(denial.permission)}: ${denial.service}.${denial.operation}` }, index))
     ] })
   ] });
 };
 var StatusIconWithTooltip = ({ span }) => {
   const errorLevel = calculateHighestErrorLevel(span);
-  if (errorLevel !== ErrorLevel.ERROR && errorLevel !== ErrorLevel.IAM_PERMISSION) return /* @__PURE__ */ jsx125(Fragment3, {});
-  return /* @__PURE__ */ jsx125(Tooltip2, { title: buildTooltipContent(span), children: /* @__PURE__ */ jsx125(Box3, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: /* @__PURE__ */ jsx125(StatusIcon, { errorLevel, spanStatusCode: span.status_code }) }) });
+  if (errorLevel !== ErrorLevel.ERROR && errorLevel !== ErrorLevel.IAM_PERMISSION) return /* @__PURE__ */ jsx124(Fragment2, {});
+  return /* @__PURE__ */ jsx124(Tooltip2, { title: buildTooltipContent(span), children: /* @__PURE__ */ jsx124(Box2, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: /* @__PURE__ */ jsx124(StatusIcon, { errorLevel, spanStatusCode: span.status_code }) }) });
 };
 
 // src/components/spans-list/span-count-badge.tsx
 import { InfoOutlined, WarningAmberOutlined } from "@mui/icons-material";
-import { Box as Box4, Button, Divider as Divider3, IconButton, Popover, Skeleton, Tooltip as Tooltip3, Typography as Typography3 } from "@mui/material";
+import { Box as Box3, Button, Divider as Divider2, IconButton, Popover, Skeleton, Tooltip as Tooltip3, Typography as Typography3 } from "@mui/material";
 import { useState as useState4 } from "react";
-import { Fragment as Fragment4, jsx as jsx126, jsxs as jsxs120 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx125, jsxs as jsxs120 } from "react/jsx-runtime";
 var resolveBindingLimit = (systemLimit, licenseLimit) => {
   const numericLimits = [systemLimit, licenseLimit].filter((l2) => typeof l2 === "number");
   if (numericLimits.length > 0) return Math.min(...numericLimits);
@@ -15437,28 +15366,28 @@ var fmtLimit = (value) => {
   if (value === "unlimited") return "Unlimited";
   return fmt(value);
 };
-var StatRow = ({ label, value }) => /* @__PURE__ */ jsxs120(Box4, { sx: { alignItems: "baseline", display: "flex", justifyContent: "space-between", minWidth: 220 }, children: [
-  /* @__PURE__ */ jsx126(Typography3, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx126(Typography3, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
+var StatRow = ({ label, value }) => /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "baseline", display: "flex", justifyContent: "space-between", minWidth: 220 }, children: [
+  /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx125(Typography3, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
 ] });
 var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) => {
   const [anchorElement, setAnchorElement] = useState4();
   const bindingLimit = resolveBindingLimit(systemLimit, licenseLimit);
   if (totalCount === void 0 && bindingLimit === void 0) {
-    return /* @__PURE__ */ jsx126(Fragment4, {});
+    return /* @__PURE__ */ jsx125(Fragment3, {});
   }
   if (visibleCount !== void 0) totalCount = Math.max(totalCount ?? 0, visibleCount);
   const isLoading = totalCount === void 0;
   const isOpen = anchorElement !== void 0;
   const systemLimitReached = typeof systemLimit === "number" && totalCount !== void 0 && totalCount >= systemLimit;
   const licenseLimitReached = typeof licenseLimit === "number" && totalCount !== void 0 && totalCount >= licenseLimit;
-  return /* @__PURE__ */ jsxs120(Box4, { sx: { alignItems: "center", display: "flex", gap: 0.25 }, children: [
-    isLoading ? /* @__PURE__ */ jsx126(Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ jsxs120(Box4, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
-      /* @__PURE__ */ jsx126(Typography3, { color: "text.secondary", variant: "caption", children: "Showing" }),
-      /* @__PURE__ */ jsx126(Typography3, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
-      /* @__PURE__ */ jsx126(Typography3, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
+  return /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", display: "flex", gap: 0.25 }, children: [
+    isLoading ? /* @__PURE__ */ jsx125(Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
+      /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", variant: "caption", children: "Showing" }),
+      /* @__PURE__ */ jsx125(Typography3, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
+      /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
     ] }),
-    /* @__PURE__ */ jsx126(Tooltip3, { title: "Operation count details", children: /* @__PURE__ */ jsx126(
+    /* @__PURE__ */ jsx125(Tooltip3, { title: "Operation count details", children: /* @__PURE__ */ jsx125(
       IconButton,
       {
         "aria-describedby": isOpen ? "operation-count-popover" : void 0,
@@ -15467,10 +15396,10 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
         },
         size: "small",
         sx: { color: systemLimitReached || licenseLimitReached ? "warning.main" : "text.disabled" },
-        children: systemLimitReached || licenseLimitReached ? /* @__PURE__ */ jsx126(WarningAmberOutlined, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx126(InfoOutlined, { sx: { fontSize: 14 } })
+        children: systemLimitReached || licenseLimitReached ? /* @__PURE__ */ jsx125(WarningAmberOutlined, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx125(InfoOutlined, { sx: { fontSize: 14 } })
       }
     ) }),
-    /* @__PURE__ */ jsx126(
+    /* @__PURE__ */ jsx125(
       Popover,
       {
         anchorEl: anchorElement,
@@ -15481,54 +15410,54 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
         },
         open: isOpen,
         transformOrigin: { horizontal: "right", vertical: "top" },
-        children: /* @__PURE__ */ jsxs120(Box4, { sx: { minWidth: 240, p: 2 }, children: [
-          /* @__PURE__ */ jsx126(Typography3, { fontWeight: 700, variant: "body2", children: "Storage" }),
-          /* @__PURE__ */ jsx126(Typography3, { color: "text.secondary", sx: { mt: 0.25 }, variant: "caption", children: "How many operations are currently stored." }),
-          /* @__PURE__ */ jsxs120(Box4, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: [
-            /* @__PURE__ */ jsx126(
+        children: /* @__PURE__ */ jsxs120(Box3, { sx: { minWidth: 240, p: 2 }, children: [
+          /* @__PURE__ */ jsx125(Typography3, { fontWeight: 700, variant: "body2", children: "Storage" }),
+          /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", sx: { mt: 0.25 }, variant: "caption", children: "How many operations are currently stored." }),
+          /* @__PURE__ */ jsxs120(Box3, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: [
+            /* @__PURE__ */ jsx125(
               StatRow,
               {
-                label: /* @__PURE__ */ jsx126(Tooltip3, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ jsx126(Box4, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
+                label: /* @__PURE__ */ jsx125(Tooltip3, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ jsx125(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
                 value: visibleCount
               }
             ),
-            /* @__PURE__ */ jsx126(
+            /* @__PURE__ */ jsx125(
               StatRow,
               {
-                label: /* @__PURE__ */ jsx126(Tooltip3, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ jsx126(Box4, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
+                label: /* @__PURE__ */ jsx125(Tooltip3, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ jsx125(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
                 value: totalCount
               }
             )
           ] }),
-          (systemLimitReached || licenseLimit !== void 0 && licenseLimit !== "unlimited") && /* @__PURE__ */ jsxs120(Fragment4, { children: [
-            /* @__PURE__ */ jsx126(Divider3, { sx: { my: 1.5 } }),
-            /* @__PURE__ */ jsx126(Typography3, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
-            /* @__PURE__ */ jsx126(Typography3, { color: "text.secondary", sx: { display: "block", mb: 1.5, mt: 0.25 }, variant: "caption", children: "Limits restrict the total number of operations that can be stored." }),
-            /* @__PURE__ */ jsxs120(Box4, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: [
-              licenseLimit !== void 0 && licenseLimit !== "unlimited" && /* @__PURE__ */ jsx126(
+          (systemLimitReached || licenseLimit !== void 0 && licenseLimit !== "unlimited") && /* @__PURE__ */ jsxs120(Fragment3, { children: [
+            /* @__PURE__ */ jsx125(Divider2, { sx: { my: 1.5 } }),
+            /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
+            /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", sx: { display: "block", mb: 1.5, mt: 0.25 }, variant: "caption", children: "Limits restrict the total number of operations that can be stored." }),
+            /* @__PURE__ */ jsxs120(Box3, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: [
+              licenseLimit !== void 0 && licenseLimit !== "unlimited" && /* @__PURE__ */ jsx125(
                 StatRow,
                 {
-                  label: /* @__PURE__ */ jsx126(Tooltip3, { placement: "left", title: "The maximum number of operations allowed by your current license.", children: /* @__PURE__ */ jsx126(Box4, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "License limit" }) }),
+                  label: /* @__PURE__ */ jsx125(Tooltip3, { placement: "left", title: "The maximum number of operations allowed by your current license.", children: /* @__PURE__ */ jsx125(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "License limit" }) }),
                   value: licenseLimit
                 }
               ),
-              systemLimitReached && /* @__PURE__ */ jsx126(
+              systemLimitReached && /* @__PURE__ */ jsx125(
                 StatRow,
                 {
-                  label: /* @__PURE__ */ jsx126(Tooltip3, { placement: "left", title: "The maximum number of operations that can be stored in the system.", children: /* @__PURE__ */ jsx126(Box4, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "System limit" }) }),
+                  label: /* @__PURE__ */ jsx125(Tooltip3, { placement: "left", title: "The maximum number of operations that can be stored in the system.", children: /* @__PURE__ */ jsx125(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "System limit" }) }),
                   value: systemLimit
                 }
               )
             ] })
           ] }),
-          (systemLimitReached || licenseLimitReached) && /* @__PURE__ */ jsxs120(Box4, { sx: { display: "flex", flexDirection: "column", gap: 1, mt: 1.5 }, children: [
-            licenseLimitReached && /* @__PURE__ */ jsxs120(Box4, { sx: { backgroundColor: "warning.main", borderRadius: 1, p: 1.5 }, children: [
-              /* @__PURE__ */ jsxs120(Box4, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75, mb: 0.75 }, children: [
-                /* @__PURE__ */ jsx126(WarningAmberOutlined, { sx: { color: "warning.contrastText", fontSize: 14, mt: "1px" } }),
-                /* @__PURE__ */ jsx126(Typography3, { color: "warning.contrastText", fontWeight: 600, variant: "caption", children: "License limit reached" })
+          (systemLimitReached || licenseLimitReached) && /* @__PURE__ */ jsxs120(Box3, { sx: { display: "flex", flexDirection: "column", gap: 1, mt: 1.5 }, children: [
+            licenseLimitReached && /* @__PURE__ */ jsxs120(Box3, { sx: { backgroundColor: "warning.main", borderRadius: 1, p: 1.5 }, children: [
+              /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75, mb: 0.75 }, children: [
+                /* @__PURE__ */ jsx125(WarningAmberOutlined, { sx: { color: "warning.contrastText", fontSize: 14, mt: "1px" } }),
+                /* @__PURE__ */ jsx125(Typography3, { color: "warning.contrastText", fontWeight: 600, variant: "caption", children: "License limit reached" })
               ] }),
-              /* @__PURE__ */ jsx126(Typography3, { color: "warning.contrastText", sx: { display: "block", mb: 1 }, variant: "caption", children: "Newer operations are being dropped. Upgrade your license to increase the retention limit." }),
-              /* @__PURE__ */ jsx126(
+              /* @__PURE__ */ jsx125(Typography3, { color: "warning.contrastText", sx: { display: "block", mb: 1 }, variant: "caption", children: "Newer operations are being dropped. Upgrade your license to increase the retention limit." }),
+              /* @__PURE__ */ jsx125(
                 Button,
                 {
                   color: "inherit",
@@ -15541,9 +15470,9 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
                 }
               )
             ] }),
-            systemLimitReached && !licenseLimitReached && /* @__PURE__ */ jsxs120(Box4, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75 }, children: [
-              /* @__PURE__ */ jsx126(WarningAmberOutlined, { color: "warning", sx: { fontSize: 14, mt: "1px" } }),
-              /* @__PURE__ */ jsx126(Typography3, { color: "warning.main", variant: "caption", children: "System limit reached \u2014 newer operations are being dropped." })
+            systemLimitReached && !licenseLimitReached && /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75 }, children: [
+              /* @__PURE__ */ jsx125(WarningAmberOutlined, { color: "warning", sx: { fontSize: 14, mt: "1px" } }),
+              /* @__PURE__ */ jsx125(Typography3, { color: "warning.main", variant: "caption", children: "System limit reached \u2014 newer operations are being dropped." })
             ] })
           ] })
         ] })
@@ -15553,7 +15482,7 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
 };
 
 // src/components/spans-list/spans-data-grid.tsx
-import { Fragment as Fragment5, jsx as jsx127, jsxs as jsxs121 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx126, jsxs as jsxs121 } from "react/jsx-runtime";
 var columnHelper = createColumnHelper();
 var newSpanBackgroundColor = {
   dark: { from: "rgba(136, 123, 2, 1)", to: "rgba(136, 123, 2, 0)" },
@@ -15563,12 +15492,12 @@ var LABEL_BEGINNING_OF_STREAM = "This is the beginning of the stream";
 var LABEL_END_OF_STREAM = "This is the end of the stream";
 var LABEL_NO_SPANS = "There are no operations";
 var STICK_TO_EDGE_THRESHOLD_PX = 4;
-var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127("span", { children: label }) }) });
-var LoadingRow = ({ colSpan }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 24, sx: { m: 2 } }) }) });
-var SpansDataGridRow = memo9(
+var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx126("span", { children: label }) }) });
+var LoadingRow = ({ colSpan }) => /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx126(CircularProgress, { size: 24, sx: { m: 2 } }) }) });
+var SpansDataGridRow = memo8(
   ({ isNew, onSpanClick, row }) => {
     const theme = useTheme2();
-    return /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsx126(
       TableRow,
       {
         animate: {
@@ -15587,16 +15516,16 @@ var SpansDataGridRow = memo9(
           transition: "background-color 1200ms ease-in"
         },
         children: row.getVisibleCells().map((cell) => {
-          return /* @__PURE__ */ jsx127(
+          return /* @__PURE__ */ jsx126(
             TableCell,
             {
               sx: {
-                height: 36,
+                height: 48,
                 maxWidth: `${cell.column.getSize().toString()}px`,
                 minWidth: `${cell.column.getSize().toString()}px`
               },
-              children: /* @__PURE__ */ jsx127(
-                Box5,
+              children: /* @__PURE__ */ jsx126(
+                Box4,
                 {
                   sx: {
                     "alignItems": "center",
@@ -15608,7 +15537,7 @@ var SpansDataGridRow = memo9(
                     },
                     "width": "100%"
                   },
-                  children: /* @__PURE__ */ jsx127(Box5, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+                  children: /* @__PURE__ */ jsx126(Box4, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
                 }
               )
             },
@@ -15641,8 +15570,8 @@ var SpansDataGrid = ({
 }) => {
   const columns = useMemo4(() => [
     columnHelper.accessor("startTime", {
-      cell: (props) => /* @__PURE__ */ jsx127(ResponsiveTimestampCell, { date: props.getValue() }),
-      header: () => /* @__PURE__ */ jsx127(
+      cell: (props) => /* @__PURE__ */ jsx126(ResponsiveTimestampCell, { date: props.getValue() }),
+      header: () => /* @__PURE__ */ jsx126(
         TableSortLabel,
         {
           active: true,
@@ -15659,23 +15588,23 @@ var SpansDataGrid = ({
     columnHelper.display({
       cell: (props) => {
         if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
-          return /* @__PURE__ */ jsx127(Typography4, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
+          return /* @__PURE__ */ jsx126(Typography4, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
         }
-        return /* @__PURE__ */ jsx127(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
+        return /* @__PURE__ */ jsx126(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
       },
       header: "Producer",
       id: "producer",
       size: 180
     }),
     columnHelper.accessor("operation_name", {
-      cell: (props) => /* @__PURE__ */ jsx127(
-        Box5,
+      cell: (props) => /* @__PURE__ */ jsx126(
+        Box4,
         {
           sx: {
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: /* @__PURE__ */ jsx127("span", { title: props.getValue(), children: props.getValue() })
+          children: /* @__PURE__ */ jsx126("span", { title: props.getValue(), children: props.getValue() })
         }
       ),
       header: "Action",
@@ -15684,7 +15613,7 @@ var SpansDataGrid = ({
     }),
     columnHelper.display({
       cell: (props) => {
-        return /* @__PURE__ */ jsx127(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
+        return /* @__PURE__ */ jsx126(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
       },
       header: "Consumer",
       id: "consumer",
@@ -15692,9 +15621,9 @@ var SpansDataGrid = ({
     }),
     columnHelper.display({
       cell: (props) => {
-        return /* @__PURE__ */ jsxs121(Box5, { sx: { alignItems: "center", display: "flex", gap: 0.5, justifyContent: "flex-end" }, children: [
-          /* @__PURE__ */ jsx127(StatusIconWithTooltip, { span: props.row.original }),
-          /* @__PURE__ */ jsx127(
+        return /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", gap: 0.5, justifyContent: "flex-end" }, children: [
+          /* @__PURE__ */ jsx126(StatusIconWithTooltip, { span: props.row.original }),
+          /* @__PURE__ */ jsx126(
             Button2,
             {
               "data-testid": VIEW_SPAN_DETAILS_TEST_ID,
@@ -15770,47 +15699,47 @@ var SpansDataGrid = ({
     if (!element || !isAtLiveEdgeRef.current) return;
     element.scrollTop = element.scrollHeight;
   }, [order2, spans?.length, lastSpanId]);
-  return /* @__PURE__ */ jsxs121(Fragment5, { children: [
-    /* @__PURE__ */ jsx127(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs121(Box5, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-      /* @__PURE__ */ jsx127(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
-      errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ jsxs121(Fragment5, { children: [
-        /* @__PURE__ */ jsx127(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ jsx127(Tooltip4, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ jsxs121(
-          Box5,
+  return /* @__PURE__ */ jsxs121(Fragment4, { children: [
+    /* @__PURE__ */ jsx126(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx126(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
+      errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ jsxs121(Fragment4, { children: [
+        /* @__PURE__ */ jsx126(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
+        /* @__PURE__ */ jsx126(Tooltip4, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ jsxs121(
+          Box4,
           {
             "data-testid": ERROR_COUNT_TEST_ID,
             sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "error.main", cursor: "help", display: "flex", gap: 0.5, mb: "-1px" },
             children: [
-              /* @__PURE__ */ jsx127(Typography4, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
-              /* @__PURE__ */ jsx127(Typography4, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
+              /* @__PURE__ */ jsx126(Typography4, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
+              /* @__PURE__ */ jsx126(Typography4, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
             ]
           }
         ) })
       ] }),
-      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ jsxs121(Fragment5, { children: [
-        /* @__PURE__ */ jsx127(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ jsx127(Tooltip4, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ jsxs121(
-          Box5,
+      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ jsxs121(Fragment4, { children: [
+        /* @__PURE__ */ jsx126(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
+        /* @__PURE__ */ jsx126(Tooltip4, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ jsxs121(
+          Box4,
           {
             "data-testid": WARNING_COUNT_TEST_ID,
             sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "warning.main", cursor: "help", display: "flex", gap: 0.5, mb: "-1px" },
             children: [
-              /* @__PURE__ */ jsx127(Typography4, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
-              /* @__PURE__ */ jsx127(Typography4, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
+              /* @__PURE__ */ jsx126(Typography4, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
+              /* @__PURE__ */ jsx126(Typography4, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
             ]
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx127(Box5, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx127(
+      /* @__PURE__ */ jsx126(Box4, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ jsx126(
         FormControlLabel,
         {
-          control: /* @__PURE__ */ jsx127(
+          control: /* @__PURE__ */ jsx126(
             Button2,
             {
               "data-testid": CLEAR_SPANS_TEST_ID,
               onClick: onClearSpans,
-              startIcon: /* @__PURE__ */ jsx127(DeleteForeverOutlined, {}),
+              startIcon: /* @__PURE__ */ jsx126(DeleteForeverOutlined, {}),
               children: "Clear Operations"
             }
           ),
@@ -15820,7 +15749,7 @@ var SpansDataGrid = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx127(Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ jsx127(
+    /* @__PURE__ */ jsx126(Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ jsx126(
       TableContainer,
       {
         onScroll: handleScroll,
@@ -15845,8 +15774,8 @@ var SpansDataGrid = ({
               "th+th": { pl: "8px !important" }
             },
             children: [
-              /* @__PURE__ */ jsx127(TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
-                return /* @__PURE__ */ jsx127(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx127(
+              /* @__PURE__ */ jsx126(TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
+                return /* @__PURE__ */ jsx126(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx126(
                   TableCell,
                   {
                     colSpan: header.colSpan,
@@ -15862,33 +15791,33 @@ var SpansDataGrid = ({
                 )) }, headerGroup.id);
               }) }),
               /* @__PURE__ */ jsxs121(TableBody, { children: [
-                (spans === void 0 || clearingSpans) && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
-                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs121(Fragment5, { children: [
-                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
-                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
+                (spans === void 0 || clearingSpans) && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx126(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs121(Fragment4, { children: [
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
+                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
                     const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
-                    return /* @__PURE__ */ jsx127(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
+                    return /* @__PURE__ */ jsx126(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
-                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
-                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
+                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
-                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs121(Fragment5, { children: [
-                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
-                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
-                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
+                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs121(Fragment4, { children: [
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
+                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
                     const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
-                    return /* @__PURE__ */ jsx127(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
+                    return /* @__PURE__ */ jsx126(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
-                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
+                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
               ] })
             ]
@@ -15900,13 +15829,13 @@ var SpansDataGrid = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-import { jsx as jsx128, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
 var SpansList = (props) => {
-  return /* @__PURE__ */ jsxs122(Box6, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs122(Box5, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
     props.fetchError && /* @__PURE__ */ jsxs122(
       Alert2,
       {
-        action: /* @__PURE__ */ jsx128(Button3, { onClick: props.onFetchForward, children: "Retry" }),
+        action: /* @__PURE__ */ jsx127(Button3, { onClick: props.onFetchForward, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -15915,7 +15844,7 @@ var SpansList = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx128(
+    /* @__PURE__ */ jsx127(
       SpansDataGrid,
       {
         clearingSpans: props.clearingSpans,
@@ -15940,9 +15869,9 @@ var SpansList = (props) => {
 
 // src/components/status-message/status-message.tsx
 import { ErrorOutline, InfoOutlined as InfoOutlined2 } from "@mui/icons-material";
-import { Alert as Alert3, AlertTitle, Box as Box7, Button as Button4, CircularProgress as CircularProgress2, Link, Typography as Typography5 } from "@mui/material";
+import { Alert as Alert3, AlertTitle, Box as Box6, Button as Button4, CircularProgress as CircularProgress2, Link, Typography as Typography5 } from "@mui/material";
 import { useState as useState5 } from "react";
-import { Fragment as Fragment6, jsx as jsx129, jsxs as jsxs123 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx128, jsxs as jsxs123 } from "react/jsx-runtime";
 var StatusMessage = ({
   localstackVersion,
   onEnable,
@@ -15964,8 +15893,8 @@ var StatusMessage = ({
     }
   };
   if (phase === "CHECKING_STATUS" || phase === "CONNECTING_WS") {
-    return /* @__PURE__ */ jsx129(
-      Box7,
+    return /* @__PURE__ */ jsx128(
+      Box6,
       {
         sx: {
           alignItems: "center",
@@ -15975,13 +15904,13 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsx129(CircularProgress2, { size: 32 })
+        children: /* @__PURE__ */ jsx128(CircularProgress2, { size: 32 })
       }
     );
   }
   if (phase === "INCOMPATIBLE") {
-    return /* @__PURE__ */ jsx129(
-      Box7,
+    return /* @__PURE__ */ jsx128(
+      Box6,
       {
         sx: {
           alignItems: "center",
@@ -15994,15 +15923,15 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs123(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx129(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
-              /* @__PURE__ */ jsx129(Typography5, { sx: { mb: 2 }, variant: "body2", children: localstackVersion === void 0 ? `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. Please update LocalStack.` : `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. You are running version ${localstackVersion}. Please update LocalStack.` }),
-              /* @__PURE__ */ jsx129(Typography5, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx129("strong", { children: "Update LocalStack:" }) }),
-              /* @__PURE__ */ jsx129(
-                Box7,
+              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
+              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 2 }, variant: "body2", children: localstackVersion === void 0 ? `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. Please update LocalStack.` : `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. You are running version ${localstackVersion}. Please update LocalStack.` }),
+              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "Update LocalStack:" }) }),
+              /* @__PURE__ */ jsx128(
+                Box6,
                 {
                   component: "pre",
                   sx: {
@@ -16014,7 +15943,7 @@ var StatusMessage = ({
                   children: "localstack update docker-images"
                 }
               ),
-              onRetry && /* @__PURE__ */ jsx129(Box7, { sx: { display: "flex", gap: 1, mt: 2 }, children: /* @__PURE__ */ jsx129(
+              onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", gap: 1, mt: 2 }, children: /* @__PURE__ */ jsx128(
                 Button4,
                 {
                   "aria-label": "Check App Inspector status again",
@@ -16030,8 +15959,8 @@ var StatusMessage = ({
     );
   }
   if (phase === "UNREACHABLE") {
-    return /* @__PURE__ */ jsx129(
-      Box7,
+    return /* @__PURE__ */ jsx128(
+      Box6,
       {
         sx: {
           alignItems: "center",
@@ -16044,14 +15973,14 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs123(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx129(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
+              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
               /* @__PURE__ */ jsxs123(Typography5, { sx: { mb: 2 }, variant: "body2", children: [
                 "Failed to connect to LocalStack. Ensure ",
-                /* @__PURE__ */ jsx129(
+                /* @__PURE__ */ jsx128(
                   Link,
                   {
                     href: "https://docs.localstack.cloud/aws/getting-started/installation/",
@@ -16062,9 +15991,9 @@ var StatusMessage = ({
                 ),
                 " is running and accessible."
               ] }),
-              /* @__PURE__ */ jsx129(Typography5, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx129("strong", { children: "Start LocalStack:" }) }),
-              /* @__PURE__ */ jsx129(
-                Box7,
+              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "Start LocalStack:" }) }),
+              /* @__PURE__ */ jsx128(
+                Box6,
                 {
                   component: "pre",
                   sx: {
@@ -16076,7 +16005,7 @@ var StatusMessage = ({
                   children: "localstack start"
                 }
               ),
-              onRetry && /* @__PURE__ */ jsx129(Box7, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx129(
+              onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
                 Button4,
                 {
                   "aria-label": "Retry connection to LocalStack",
@@ -16092,8 +16021,8 @@ var StatusMessage = ({
     );
   }
   if (phase === "DISABLED") {
-    return /* @__PURE__ */ jsx129(
-      Box7,
+    return /* @__PURE__ */ jsx128(
+      Box6,
       {
         sx: {
           alignItems: "center",
@@ -16106,13 +16035,13 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs123(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx129(InfoOutlined2, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx128(InfoOutlined2, { fontSize: "large" }),
             severity: "warning",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Is Not Enabled" }),
-              /* @__PURE__ */ jsx129(Typography5, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is not currently enabled in LocalStack. You can enable it now, or at startup." }),
-              /* @__PURE__ */ jsx129(Box7, { sx: { display: "flex", gap: 1, mb: 2 }, children: onEnable && /* @__PURE__ */ jsx129(
+              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Is Not Enabled" }),
+              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is not currently enabled in LocalStack. You can enable it now, or at startup." }),
+              /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", gap: 1, mb: 2 }, children: onEnable && /* @__PURE__ */ jsx128(
                 Button4,
                 {
                   "aria-label": "Enable App Inspector Now",
@@ -16120,14 +16049,14 @@ var StatusMessage = ({
                   onClick: () => {
                     void handleEnable();
                   },
-                  startIcon: enabling ? /* @__PURE__ */ jsx129(CircularProgress2, { size: 16 }) : void 0,
+                  startIcon: enabling ? /* @__PURE__ */ jsx128(CircularProgress2, { size: 16 }) : void 0,
                   variant: "contained",
                   children: "Enable App Inspector Now"
                 }
               ) }),
-              /* @__PURE__ */ jsx129(Typography5, { sx: { mb: 1 }, variant: "body2", children: "If you'd prefer to automatically enable App Inspector at start up, use:" }),
-              /* @__PURE__ */ jsx129(
-                Box7,
+              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 1 }, variant: "body2", children: "If you'd prefer to automatically enable App Inspector at start up, use:" }),
+              /* @__PURE__ */ jsx128(
+                Box6,
                 {
                   component: "pre",
                   sx: {
@@ -16139,14 +16068,14 @@ var StatusMessage = ({
                   children: "LOCALSTACK_APP_INSPECTOR=1 localstack start"
                 }
               ),
-              Boolean(enableError) && /* @__PURE__ */ jsx129(Typography5, { color: "error", sx: { mt: 1 }, variant: "body2", children: enableError })
+              Boolean(enableError) && /* @__PURE__ */ jsx128(Typography5, { color: "error", sx: { mt: 1 }, variant: "body2", children: enableError })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsx129(Fragment6, {});
+  return /* @__PURE__ */ jsx128(Fragment5, {});
 };
 
 // src/hooks/status-provider.tsx
@@ -16235,11 +16164,11 @@ function useConnectionStateMachine() {
 }
 
 // src/hooks/status-provider.tsx
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { jsx as jsx129 } from "react/jsx-runtime";
 var AppInspectorStatusContext = createContext8(void 0);
 var StatusProvider = ({ children }) => {
   const value = useConnectionStateMachine();
-  return /* @__PURE__ */ jsx130(AppInspectorStatusContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx129(AppInspectorStatusContext.Provider, { value, children });
 };
 var useAppInspectorStatus = () => {
   const value = useContext14(AppInspectorStatusContext);
@@ -18658,7 +18587,7 @@ var useAppInspectorOpenAnalytics = () => {
 };
 
 // src/context.tsx
-import { Fragment as Fragment7, jsx as jsx131 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx130 } from "react/jsx-runtime";
 var AppInspectorContext = createContext9(void 0);
 var useAppInspector = () => {
   const context = useContext15(AppInspectorContext);
@@ -18669,7 +18598,7 @@ var useAppInspector = () => {
 };
 var AppInspectorAnalyticsBoundary = ({ children }) => {
   useAppInspectorOpenAnalytics();
-  return /* @__PURE__ */ jsx131(Fragment7, { children });
+  return /* @__PURE__ */ jsx130(Fragment6, { children });
 };
 var AppInspectorContextProvider = (props) => {
   const api = useMemo5(
@@ -18702,7 +18631,7 @@ 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__ */ jsx130(ApiProvider, { api, children: /* @__PURE__ */ jsx130(StatusProvider, { children: /* @__PURE__ */ jsx130(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx130(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
 };
 
 // src/hooks/use-spans-ws.tsx
@@ -18909,14 +18838,14 @@ var useSpans = () => {
 
 // src/pages/trace-graph-page.tsx
 import { ArrowBack } from "@mui/icons-material";
-import { Box as Box19, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
+import { Box as Box18, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useCallback as useCallback10, useEffect as useEffect21, useRef as useRef15, useState as useState17 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Close as Close2 } from "@mui/icons-material";
-import { Alert as Alert4, Box as Box16, Chip as Chip3, Divider as Divider4, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Stack as Stack3, Switch, Typography as Typography11 } from "@mui/material";
+import { Alert as Alert4, Box as Box15, Chip as Chip3, Divider as Divider3, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Stack as Stack4, Switch, Typography as Typography11 } from "@mui/material";
 import { useMemo as useMemo10, useState as useState15 } from "react";
 
 // src/utils/event-utils.ts
@@ -19031,7 +18960,7 @@ var getEventGroupsByType = (events) => {
 import { Check, ContentCopy } from "@mui/icons-material";
 import { IconButton as IconButton2, Tooltip as Tooltip5 } from "@mui/material";
 import { useCallback as useCallback8, useState as useState10 } from "react";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "react/jsx-runtime";
 var CopyButton = ({ value }) => {
   const [copied, setCopied] = useState10(false);
   const handleCopy = useCallback8(() => {
@@ -19043,83 +18972,83 @@ var CopyButton = ({ value }) => {
       }, 1500);
     });
   }, [value]);
-  return /* @__PURE__ */ jsx132(Tooltip5, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx131(Tooltip5, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx131(
     IconButton2,
     {
       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__ */ jsx131(Check, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx131(ContentCopy, { sx: { fontSize: 14 } })
     }
   ) });
 };
 
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box13, IconButton as IconButton3, Typography as Typography8 } from "@mui/material";
+import { Box as Box12, IconButton as IconButton3, Typography as Typography8 } from "@mui/material";
 import { useEffect as useEffect18, useMemo as useMemo8, useRef as useRef12, useState as useState12 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel as Cancel2, 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 Box7 } from "@mui/material";
+import { jsx as jsx132 } from "react/jsx-runtime";
 var StatusIcon2 = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ jsx133(Cancel2, { sx: { color: "red" } });
+      return /* @__PURE__ */ jsx132(Cancel2, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ jsx133(Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ jsx132(Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ jsx133(RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ jsx132(RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ jsx133(Error3, { sx: { color: "orange" } });
+      return /* @__PURE__ */ jsx132(Error3, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ jsx133(CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ jsx132(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 Typography6 } from "@mui/material";
-import { jsx as jsx134, jsxs as jsxs124 } from "react/jsx-runtime";
-var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx134(Box9, { children: typeof content === "string" ? /* @__PURE__ */ jsx134(Typography6, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
+import { Box as Box8, Chip, Typography as Typography6 } from "@mui/material";
+import { jsx as jsx133, jsxs as jsxs124 } from "react/jsx-runtime";
+var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Box8, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx133(Box8, { children: typeof content === "string" ? /* @__PURE__ */ jsx133(Typography6, { 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__ */ jsx133(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ jsx134(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx133(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ jsx134(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx133(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
+    return /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
+    return /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
   }
-  return /* @__PURE__ */ jsxs124(Box9, { children: [
-    /* @__PURE__ */ jsx134(Box9, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsxs124(Box8, { children: [
+    /* @__PURE__ */ jsx133(Box8, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx133(
       Chip,
       {
-        icon: /* @__PURE__ */ jsx134(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ jsx133(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -19129,36 +19058,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__ */ jsx133(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
+    /* @__PURE__ */ jsx133(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
+    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx133(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx134(Typography6, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
+        content: /* @__PURE__ */ jsx133(Box8, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx133(Typography6, { 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__ */ jsx133(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx134(Typography6, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
+        content: /* @__PURE__ */ jsx133(Box8, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx133(Typography6, { 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__ */ jsxs124(Box9, { sx: { mt: 1.5 }, children: [
-      /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
-      /* @__PURE__ */ jsxs124(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
-        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsxs124(Box9, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx134(Typography6, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
+    (parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ jsxs124(Box8, { sx: { mt: 1.5 }, children: [
+      /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ jsxs124(Box8, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx133(Typography6, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
         ] }),
-        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsxs124(Box9, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx134(Typography6, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx133(Typography6, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
         ] }),
-        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsxs124(Box9, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx134(Typography6, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx133(Typography6, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
         ] })
       ] })
     ] })
@@ -19166,9 +19095,9 @@ var IAMEventDetail = ({ event }) => {
 };
 
 // src/components/event-details/iam-permission-detail.tsx
-import { Box as Box10, Chip as Chip2, Stack, Typography as Typography7 } from "@mui/material";
+import { Box as Box9, Chip as Chip2, Stack as Stack2, Typography as Typography7 } from "@mui/material";
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx135, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColor = (isAllowed, spanStatusCode) => {
   if (isAllowed) return "success.main";
   if (spanStatusCode === 2) return "error.main";
@@ -19188,43 +19117,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__ */ jsxs125(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__ */ jsxs125(Stack, { spacing: 1, children: [
-      /* @__PURE__ */ jsxs125(Box10, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: [
-        /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Principal" }),
-        /* @__PURE__ */ jsxs125(Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-          /* @__PURE__ */ jsx135(Typography7, { sx: { wordBreak: "break-all" }, variant: "body2", children: parsedIAM.principal }),
-          /* @__PURE__ */ jsx135(CopyButton, { value: parsedIAM.principal })
+  return /* @__PURE__ */ jsxs125(Box9, { sx: { mb: 0.5 }, children: [
+    /* @__PURE__ */ jsx134(Box9, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ jsx134(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
+    /* @__PURE__ */ jsxs125(Stack2, { spacing: 1, children: [
+      /* @__PURE__ */ jsxs125(Box9, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: [
+        /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Principal" }),
+        /* @__PURE__ */ jsxs125(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx134(Typography7, { sx: { wordBreak: "break-all" }, variant: "body2", children: parsedIAM.principal }),
+          /* @__PURE__ */ jsx134(CopyButton, { value: parsedIAM.principal })
         ] })
       ] }),
-      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs125(Box10, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
-        /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
-        parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsxs125(Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-          /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block" }, variant: "body2", children: action }),
-          /* @__PURE__ */ jsx135(CopyButton, { value: action })
+      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs125(Box9, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
+        /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
+        parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsxs125(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block" }, variant: "body2", children: action }),
+          /* @__PURE__ */ jsx134(CopyButton, { value: action })
         ] }, action))
       ] }),
-      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs125(Box10, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
-        /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
-        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsxs125(Stack, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-          /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }),
-          /* @__PURE__ */ jsx135(CopyButton, { value: resource })
+      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs125(Box9, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
+        /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
+        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsxs125(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }),
+          /* @__PURE__ */ jsx134(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__ */ jsx134(Box9, { children: events.map((event) => /* @__PURE__ */ jsx134(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 Box11, 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 jsxs126, Fragment as Fragment8 } from "react/jsx-runtime";
-import { Box as Box11, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
-import { createContext as createContext10, useContext as useContext16, useState as useState11, useRef as useRef11, useCallback as useCallback9, useMemo as useMemo7, useEffect as useEffect17, memo as memo10 } from "react";
+import { jsx as jsx135, jsxs as jsxs126, Fragment as Fragment7 } from "react/jsx-runtime";
+import { Box as Box10, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
+import { createContext as createContext10, useContext as useContext16, useState as useState11, useRef as useRef11, useCallback as useCallback9, useMemo as useMemo7, useEffect as useEffect17, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t, f2, n = "";
@@ -19577,7 +19506,7 @@ function useInspect(path, value, nestedIndex) {
     setInspect
   ];
 }
-var DataBox = (props) => /* @__PURE__ */ jsx136(Box11, {
+var DataBox = (props) => /* @__PURE__ */ jsx135(Box10, {
   component: "div",
   ...props,
   sx: {
@@ -19588,7 +19517,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__ */ jsx135(DataBox, {
     className: "data-type-label",
     sx: {
       mx: 0.5,
@@ -19601,7 +19530,7 @@ var DataTypeLabel = (param) => {
 };
 function defineEasyType(param) {
   let { is, serialize, deserialize, type, colorKey, displayTypeLabel = true, Renderer } = param;
-  const Render = /* @__PURE__ */ memo10(Renderer);
+  const Render = /* @__PURE__ */ memo9(Renderer);
   const EasyType = (props) => {
     const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
@@ -19612,12 +19541,12 @@ function defineEasyType(param) {
         color: color2
       },
       children: [
-        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx136(DataTypeLabel, {
+        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx135(DataTypeLabel, {
           dataType: type
         }),
-        /* @__PURE__ */ jsx136(DataBox, {
+        /* @__PURE__ */ jsx135(DataBox, {
           className: "".concat(type, "-value"),
-          children: /* @__PURE__ */ jsx136(Render, {
+          children: /* @__PURE__ */ jsx135(Render, {
             path: props.path,
             inspect: props.inspect,
             setInspect: props.setInspect,
@@ -19657,7 +19586,7 @@ function defineEasyType(param) {
     }, [
       setValue
     ]);
-    return /* @__PURE__ */ jsx136(InputBase, {
+    return /* @__PURE__ */ jsx135(InputBase, {
       autoFocus: true,
       value,
       onChange: handleChange,
@@ -19697,7 +19626,7 @@ var booleanType = defineEasyType({
   },
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx135(Fragment7, {
       children: value ? "true" : "false"
     });
   }
@@ -19716,7 +19645,7 @@ var dateType = defineEasyType({
   colorKey: "base0D",
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx135(Fragment7, {
       children: value.toLocaleTimeString("en-us", displayOptions)
     });
   }
@@ -19747,10 +19676,10 @@ var rb = "}";
 var PreFunctionType = (props) => {
   return /* @__PURE__ */ jsxs126(NoSsr, {
     children: [
-      /* @__PURE__ */ jsx136(DataTypeLabel, {
+      /* @__PURE__ */ jsx135(DataTypeLabel, {
         dataType: "function"
       }),
-      /* @__PURE__ */ jsxs126(Box11, {
+      /* @__PURE__ */ jsxs126(Box10, {
         component: "span",
         className: "data-function-start",
         sx: {
@@ -19766,8 +19695,8 @@ var PreFunctionType = (props) => {
   });
 };
 var PostFunctionType = () => {
-  return /* @__PURE__ */ jsx136(NoSsr, {
-    children: /* @__PURE__ */ jsx136(Box11, {
+  return /* @__PURE__ */ jsx135(NoSsr, {
+    children: /* @__PURE__ */ jsx135(Box10, {
       component: "span",
       className: "data-function-end",
       children: rb
@@ -19776,15 +19705,15 @@ var PostFunctionType = () => {
 };
 var FunctionType = (props) => {
   const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
-  return /* @__PURE__ */ jsx136(NoSsr, {
-    children: /* @__PURE__ */ jsx136(Box11, {
+  return /* @__PURE__ */ jsx135(NoSsr, {
+    children: /* @__PURE__ */ jsx135(Box10, {
       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__ */ jsx135(Box10, {
         component: "span",
         className: "data-function-body",
         onClick: () => props.setInspect(true),
@@ -19812,7 +19741,7 @@ var nullType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx136(Box11, {
+    return /* @__PURE__ */ jsx135(Box10, {
       sx: {
         fontSize: "0.8rem",
         backgroundColor,
@@ -19835,7 +19764,7 @@ var nanType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx136(Box11, {
+    return /* @__PURE__ */ jsx135(Box10, {
       sx: {
         backgroundColor,
         fontSize: "0.8rem",
@@ -19855,7 +19784,7 @@ var floatType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx135(Fragment7, {
       children: value
     });
   }
@@ -19869,7 +19798,7 @@ var intType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx135(Fragment7, {
       children: value
     });
   }
@@ -19882,16 +19811,16 @@ var bigIntType = defineEasyType({
   deserialize: (value) => BigInt(value.replace(/\D/g, "")),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx136(Fragment8, {
+    return /* @__PURE__ */ jsx135(Fragment7, {
       children: "".concat(value, "n")
     });
   }
 });
 var BaseIcon = (param) => {
   let { d: d2, ...props } = param;
-  return /* @__PURE__ */ jsx136(SvgIcon, {
+  return /* @__PURE__ */ jsx135(SvgIcon, {
     ...props,
-    children: /* @__PURE__ */ jsx136("path", {
+    children: /* @__PURE__ */ jsx135("path", {
       d: d2
     })
   });
@@ -19906,55 +19835,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__ */ jsx135(BaseIcon, {
     d: AddBox,
     ...props
   });
 };
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx135(BaseIcon, {
     d: Check2,
     ...props
   });
 };
 var ChevronRightIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx135(BaseIcon, {
     d: ChevronRight,
     ...props
   });
 };
 var CircularArrowsIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx135(BaseIcon, {
     d: CircularArrows,
     ...props
   });
 };
 var CloseIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx135(BaseIcon, {
     d: Close,
     ...props
   });
 };
 var ContentCopyIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx135(BaseIcon, {
     d: ContentCopy2,
     ...props
   });
 };
 var EditIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx135(BaseIcon, {
     d: Edit,
     ...props
   });
 };
 var ExpandMoreIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx135(BaseIcon, {
     d: ExpandMore,
     ...props
   });
 };
 var DeleteIcon = (props) => {
-  return /* @__PURE__ */ jsx136(BaseIcon, {
+  return /* @__PURE__ */ jsx135(BaseIcon, {
     d: Delete,
     ...props
   });
@@ -19993,7 +19922,7 @@ var PreObjectType = (props) => {
     props.value
   ]);
   const isTrap = useIsCycleReference(props.path, props.value);
-  return /* @__PURE__ */ jsxs126(Box11, {
+  return /* @__PURE__ */ jsxs126(Box10, {
     component: "span",
     className: "data-object-start",
     sx: {
@@ -20001,7 +19930,7 @@ var PreObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayLb : objectLb,
-      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx136(Box11, {
+      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx135(Box10, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -20011,16 +19940,16 @@ var PreObjectType = (props) => {
         },
         children: sizeOfValue
       }),
-      isTrap && !props.inspect && /* @__PURE__ */ jsxs126(Fragment8, {
+      isTrap && !props.inspect && /* @__PURE__ */ jsxs126(Fragment7, {
         children: [
-          /* @__PURE__ */ jsx136(CircularArrowsIcon, {
+          /* @__PURE__ */ jsx135(CircularArrowsIcon, {
             sx: {
               fontSize: 12,
               color: textColor,
               mx: 0.5
             }
           }),
-          /* @__PURE__ */ jsx136(DataBox, {
+          /* @__PURE__ */ jsx135(DataBox, {
             sx: {
               cursor: "pointer",
               userSelect: "none"
@@ -20050,7 +19979,7 @@ var PostObjectType = (props) => {
     props.path,
     props.value
   ]);
-  return /* @__PURE__ */ jsxs126(Box11, {
+  return /* @__PURE__ */ jsxs126(Box10, {
     component: "span",
     className: "data-object-end",
     sx: {
@@ -20061,7 +19990,7 @@ var PostObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayRb : objectRb,
-      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx136(Box11, {
+      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx135(Box10, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -20101,7 +20030,7 @@ var ObjectType = (props) => {
             ...props.path,
             key
           ];
-          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx135(DataKeyPair, {
             path,
             value: value2,
             prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
@@ -20117,7 +20046,7 @@ var ObjectType = (props) => {
         while (true) {
           const nextResult = iterator2.next();
           var _nextResult_done;
-          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx135(DataKeyPair, {
             path: [
               ...props.path,
               "iterator:".concat(count2)
@@ -20145,7 +20074,7 @@ var ObjectType = (props) => {
             ...props.path,
             index
           ];
-          return /* @__PURE__ */ jsx136(DataKeyPair, {
+          return /* @__PURE__ */ jsx135(DataKeyPair, {
             path,
             value: value2,
             prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
@@ -20177,7 +20106,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__ */ jsx135(DataKeyPair, {
           path: props.path,
           value: list,
           nestedIndex: index,
@@ -20204,7 +20133,7 @@ var ObjectType = (props) => {
         ...props.path,
         key
       ];
-      return /* @__PURE__ */ jsx136(DataKeyPair, {
+      return /* @__PURE__ */ jsx135(DataKeyPair, {
         path,
         value: value2,
         prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
@@ -20251,7 +20180,7 @@ var ObjectType = (props) => {
   if (isEmptyValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx136(Box11, {
+  return /* @__PURE__ */ jsx135(Box10, {
     className: "data-object",
     sx: {
       display: props.inspect ? "block" : "inline-block",
@@ -20260,7 +20189,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__ */ jsx135(Box10, {
       component: "span",
       className: "data-object-body",
       onClick: () => props.setInspect(true),
@@ -20292,7 +20221,7 @@ var stringType = defineEasyType({
     const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
     const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
     const hasRest = props.value.length > collapseStringsAfterLength;
-    return /* @__PURE__ */ jsxs126(Box11, {
+    return /* @__PURE__ */ jsxs126(Box10, {
       component: "span",
       sx: {
         overflowWrap: "anywhere",
@@ -20310,7 +20239,7 @@ var stringType = defineEasyType({
       children: [
         '"',
         value,
-        hasRest && !showRest && /* @__PURE__ */ jsx136(Box11, {
+        hasRest && !showRest && /* @__PURE__ */ jsx135(Box10, {
           component: "span",
           sx: {
             padding: 0.5
@@ -20329,7 +20258,7 @@ var undefinedType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx136(Box11, {
+    return /* @__PURE__ */ jsx135(Box10, {
       sx: {
         fontSize: "0.7rem",
         backgroundColor,
@@ -20345,17 +20274,17 @@ function memorizeDataType(dataType) {
     var _prevProps_path, _nextProps_path;
     return Object.is(prevProps.value, nextProps.value) && prevProps.inspect && nextProps.inspect && ((_prevProps_path = prevProps.path) === null || _prevProps_path === void 0 ? void 0 : _prevProps_path.join(".")) === ((_nextProps_path = nextProps.path) === null || _nextProps_path === void 0 ? void 0 : _nextProps_path.join("."));
   }
-  dataType.Component = /* @__PURE__ */ memo10(dataType.Component, compare);
+  dataType.Component = /* @__PURE__ */ memo9(dataType.Component, compare);
   if (dataType.Editor) {
-    dataType.Editor = /* @__PURE__ */ memo10(dataType.Editor, function compare2(prevProps, nextProps) {
+    dataType.Editor = /* @__PURE__ */ memo9(dataType.Editor, function compare2(prevProps, nextProps) {
       return Object.is(prevProps.value, nextProps.value);
     });
   }
   if (dataType.PreComponent) {
-    dataType.PreComponent = /* @__PURE__ */ memo10(dataType.PreComponent, compare);
+    dataType.PreComponent = /* @__PURE__ */ memo9(dataType.PreComponent, compare);
   }
   if (dataType.PostComponent) {
-    dataType.PostComponent = /* @__PURE__ */ memo10(dataType.PostComponent, compare);
+    dataType.PostComponent = /* @__PURE__ */ memo9(dataType.PostComponent, compare);
   }
   return dataType;
 }
@@ -20410,7 +20339,7 @@ function useTypeComponents(value, path) {
     registry
   ]);
 }
-var IconBox = (props) => /* @__PURE__ */ jsx136(Box11, {
+var IconBox = (props) => /* @__PURE__ */ jsx135(Box10, {
   component: "span",
   ...props,
   sx: {
@@ -20596,18 +20525,18 @@ var DataKeyPair = (props) => {
   ]);
   const actionIcons = useMemo7(() => {
     if (editing) {
-      return /* @__PURE__ */ jsxs126(Fragment8, {
+      return /* @__PURE__ */ jsxs126(Fragment7, {
         children: [
-          /* @__PURE__ */ jsx136(IconBox, {
-            children: /* @__PURE__ */ jsx136(CloseIcon, {
+          /* @__PURE__ */ jsx135(IconBox, {
+            children: /* @__PURE__ */ jsx135(CloseIcon, {
               sx: {
                 fontSize: ".8rem"
               },
               onClick: abortEditing
             })
           }),
-          /* @__PURE__ */ jsx136(IconBox, {
-            children: /* @__PURE__ */ jsx136(CheckIcon, {
+          /* @__PURE__ */ jsx135(IconBox, {
+            children: /* @__PURE__ */ jsx135(CheckIcon, {
               sx: {
                 fontSize: ".8rem"
               },
@@ -20617,9 +20546,9 @@ var DataKeyPair = (props) => {
         ]
       });
     }
-    return /* @__PURE__ */ jsxs126(Fragment8, {
+    return /* @__PURE__ */ jsxs126(Fragment7, {
       children: [
-        enableClipboard && /* @__PURE__ */ jsx136(IconBox, {
+        enableClipboard && /* @__PURE__ */ jsx135(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             try {
@@ -20628,41 +20557,41 @@ var DataKeyPair = (props) => {
               console.error(e2);
             }
           },
-          children: copied ? /* @__PURE__ */ jsx136(CheckIcon, {
+          children: copied ? /* @__PURE__ */ jsx135(CheckIcon, {
             sx: {
               fontSize: ".8rem"
             }
-          }) : /* @__PURE__ */ jsx136(ContentCopyIcon, {
+          }) : /* @__PURE__ */ jsx135(ContentCopyIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx136(IconBox, {
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx135(IconBox, {
           onClick: startEditing,
-          children: /* @__PURE__ */ jsx136(EditIcon, {
+          children: /* @__PURE__ */ jsx135(EditIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableAdd && /* @__PURE__ */ jsx136(IconBox, {
+        enableAdd && /* @__PURE__ */ jsx135(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
           },
-          children: /* @__PURE__ */ jsx136(AddBoxIcon, {
+          children: /* @__PURE__ */ jsx135(AddBoxIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableDelete && /* @__PURE__ */ jsx136(IconBox, {
+        enableDelete && /* @__PURE__ */ jsx135(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
           },
-          children: /* @__PURE__ */ jsx136(DeleteIcon, {
+          children: /* @__PURE__ */ jsx135(DeleteIcon, {
             sx: {
               fontSize: ".9rem"
             }
@@ -20710,7 +20639,7 @@ var DataKeyPair = (props) => {
     prevValue,
     nestedIndex
   ]);
-  return /* @__PURE__ */ jsxs126(Box11, {
+  return /* @__PURE__ */ jsxs126(Box10, {
     className: "data-key-pair",
     "data-testid": "data-key-pair" + path.join("."),
     sx: {
@@ -20743,7 +20672,7 @@ var DataKeyPair = (props) => {
           setInspect
         ]),
         children: [
-          expandable ? inspect ? /* @__PURE__ */ jsx136(ExpandMoreIcon, {
+          expandable ? inspect ? /* @__PURE__ */ jsx135(ExpandMoreIcon, {
             className: "data-key-toggle-expanded",
             sx: {
               fontSize: ".8rem",
@@ -20751,7 +20680,7 @@ var DataKeyPair = (props) => {
                 cursor: "pointer"
               }
             }
-          }) : /* @__PURE__ */ jsx136(ChevronRightIcon, {
+          }) : /* @__PURE__ */ jsx135(ChevronRightIcon, {
             className: "data-key-toggle-collapsed",
             sx: {
               fontSize: ".8rem",
@@ -20760,44 +20689,44 @@ var DataKeyPair = (props) => {
               }
             }
           }) : null,
-          /* @__PURE__ */ jsx136(Box11, {
+          /* @__PURE__ */ jsx135(Box10, {
             ref: highlightContainer,
             className: "data-key-key",
             component: "span",
-            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs126(Fragment8, {
+            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs126(Fragment7, {
               children: [
                 '"',
                 rootName,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx136(Fragment8, {
+            }) : /* @__PURE__ */ jsx135(Fragment7, {
               children: rootName
-            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx136(KeyRenderer, {
+            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx135(KeyRenderer, {
               ...downstreamProps
-            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx136(Box11, {
+            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx135(Box10, {
               component: "span",
               style: {
                 color: numberKeyColor,
                 userSelect: isNumberKey ? "none" : "auto"
               },
               children: key
-            }) : quotesOnKeys ? /* @__PURE__ */ jsxs126(Fragment8, {
+            }) : quotesOnKeys ? /* @__PURE__ */ jsxs126(Fragment7, {
               children: [
                 '"',
                 key,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx136(Fragment8, {
+            }) : /* @__PURE__ */ jsx135(Fragment7, {
               children: key
             }))
           }),
-          isRoot ? rootName !== false && /* @__PURE__ */ jsx136(DataBox, {
+          isRoot ? rootName !== false && /* @__PURE__ */ jsx135(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5
             },
             children: ":"
-          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx136(DataBox, {
+          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx135(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5,
@@ -20808,29 +20737,29 @@ var DataKeyPair = (props) => {
             },
             children: ":"
           }),
-          PreComponent && /* @__PURE__ */ jsx136(PreComponent, {
+          PreComponent && /* @__PURE__ */ jsx135(PreComponent, {
             ...downstreamProps
           }),
           isHover && expandable && inspect && actionIcons
         ]
       }),
-      editing && editable ? Editor && /* @__PURE__ */ jsx136(Editor, {
+      editing && editable ? Editor && /* @__PURE__ */ jsx135(Editor, {
         path,
         value: tempValue,
         setValue: setTempValue,
         abortEditing,
         commitEditing
-      }) : Component ? /* @__PURE__ */ jsx136(Component, {
+      }) : Component ? /* @__PURE__ */ jsx135(Component, {
         ...downstreamProps
-      }) : /* @__PURE__ */ jsx136(Box11, {
+      }) : /* @__PURE__ */ jsx135(Box10, {
         component: "span",
         className: "data-value-fallback",
         children: "fallback: ".concat(value)
       }),
-      PostComponent && /* @__PURE__ */ jsx136(PostComponent, {
+      PostComponent && /* @__PURE__ */ jsx135(PostComponent, {
         ...downstreamProps
       }),
-      !last && displayComma && /* @__PURE__ */ jsx136(DataBox, {
+      !last && displayComma && /* @__PURE__ */ jsx135(DataBox, {
         children: ","
       }),
       isHover && expandable && !inspect && actionIcons,
@@ -20950,7 +20879,7 @@ var JsonViewerInner = (props) => {
   const onMouseLeave = useCallback9(() => setHover(null), [
     setHover
   ]);
-  return /* @__PURE__ */ jsx136(Paper2, {
+  return /* @__PURE__ */ jsx135(Paper2, {
     elevation: 0,
     className: clsx(themeCls, props.className),
     style: props.style,
@@ -20961,7 +20890,7 @@ var JsonViewerInner = (props) => {
       ...props.sx
     },
     onMouseLeave,
-    children: /* @__PURE__ */ jsx136(DataKeyPair, {
+    children: /* @__PURE__ */ jsx135(DataKeyPair, {
       value,
       prevValue,
       path: emptyPath,
@@ -21013,13 +20942,13 @@ var JsonViewer = function JsonViewer2(props) {
   };
   const jsonViewerStore = useMemo7(() => createJsonViewerStore(props), []);
   const typeRegistryStore = useMemo7(() => createTypeRegistryStore(), []);
-  return /* @__PURE__ */ jsx136(ThemeProvider, {
+  return /* @__PURE__ */ jsx135(ThemeProvider, {
     theme,
-    children: /* @__PURE__ */ jsx136(TypeRegistryStoreContext.Provider, {
+    children: /* @__PURE__ */ jsx135(TypeRegistryStoreContext.Provider, {
       value: typeRegistryStore,
-      children: /* @__PURE__ */ jsx136(JsonViewerStoreContext.Provider, {
+      children: /* @__PURE__ */ jsx135(JsonViewerStoreContext.Provider, {
         value: jsonViewerStore,
-        children: /* @__PURE__ */ jsx136(JsonViewerInner, {
+        children: /* @__PURE__ */ jsx135(JsonViewerInner, {
           ...mixedProps
         })
       })
@@ -21028,8 +20957,8 @@ var JsonViewer = function JsonViewer2(props) {
 };
 
 // src/components/event-details/payload-viewer.tsx
-import { memo as memo11 } from "react";
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { memo as memo10 } from "react";
+import { jsx as jsx136 } from "react/jsx-runtime";
 function tryParseJson(value) {
   if (typeof value !== "string") {
     return value;
@@ -21040,9 +20969,9 @@ function tryParseJson(value) {
     return value;
   }
 }
-var PayloadViewer = memo11(({ sx, testId, 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__ */ jsx136(Box11, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ jsx136(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -21056,10 +20985,10 @@ var PayloadViewer = memo11(({ sx, testId, value }) => {
 });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment9, jsx as jsx138, jsxs as jsxs127 } from "react/jsx-runtime";
-var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs127(Box13, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ jsx138(Typography8, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx138(Box13, { children: typeof content === "string" ? /* @__PURE__ */ jsx138(Typography8, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
+import { Fragment as Fragment8, jsx as jsx137, jsxs as jsxs127 } from "react/jsx-runtime";
+var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs127(Box12, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ jsx137(Typography8, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx137(Box12, { children: typeof content === "string" ? /* @__PURE__ */ jsx137(Typography8, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
 ] });
 var EventMessage = ({ event }) => {
   const [isOpen, setIsOpen] = useState12(false);
@@ -21091,9 +21020,9 @@ var EventMessage = ({ event }) => {
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
-  return /* @__PURE__ */ jsxs127(Box13, { sx: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs127(Box13, { sx: { alignItems: "center", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsxs127(Box12, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs127(Box12, { sx: { alignItems: "center", display: "flex" }, children: [
+      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx137(
         IconButton3,
         {
           onClick: () => {
@@ -21101,10 +21030,10 @@ 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__ */ jsx137(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx137(KeyboardArrowRight, { sx: { fontSize: 16 } })
         }
       ),
-      /* @__PURE__ */ jsx138(
+      /* @__PURE__ */ jsx137(
         Typography8,
         {
           ref: textReference,
@@ -21122,12 +21051,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__ */ jsxs127(Fragment9, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx138(DetailRow2, { content: parsedMessage.message, label: "Message" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx138(
+    isOpen && /* @__PURE__ */ jsx137(Box12, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx137(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs127(Fragment8, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx137(DetailRow2, { content: parsedMessage.message, label: "Message" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx137(
         DetailRow2,
         {
-          content: /* @__PURE__ */ jsx138(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
+          content: /* @__PURE__ */ jsx137(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
           label: "Details"
         }
       )
@@ -21160,15 +21089,15 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ jsx138(IAMPermissionDetail, { events, spanStatusCode });
+    return /* @__PURE__ */ jsx137(IAMPermissionDetail, { events, spanStatusCode });
   }
   const eventLevel = getEventLevelFromGroup(type);
-  return /* @__PURE__ */ jsxs127(Box13, { children: [
-    /* @__PURE__ */ jsxs127(Box13, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsx138(StatusIcon2, { errorLevel: eventLevel }),
-      /* @__PURE__ */ jsx138(Typography8, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
+  return /* @__PURE__ */ jsxs127(Box12, { children: [
+    /* @__PURE__ */ jsxs127(Box12, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsx137(StatusIcon2, { errorLevel: eventLevel }),
+      /* @__PURE__ */ jsx137(Typography8, { 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__ */ jsx137(Box12, { children: events.map((event) => /* @__PURE__ */ jsx137(Box12, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ jsx137(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
   ] });
 };
 
@@ -31125,9 +31054,9 @@ var QueryStatus = {
 };
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
-import { Box as Box14, CircularProgress as CircularProgress3, Stack as Stack2, Typography as Typography9 } from "@mui/material";
+import { Box as Box13, CircularProgress as CircularProgress3, Stack as Stack3, Typography as Typography9 } from "@mui/material";
 import { useEffect as useEffect19, useMemo as useMemo9, useRef as useRef13, useState as useState13 } from "react";
-import { jsx as jsx139, jsxs as jsxs128 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs128 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS2 = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
@@ -31217,30 +31146,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__ */ jsxs128(Stack2, { alignItems: "center", direction: "row", spacing: 1, children: [
-      /* @__PURE__ */ jsx139(CircularProgress3, { size: 14 }),
-      /* @__PURE__ */ jsx139(Typography9, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
+    return /* @__PURE__ */ jsxs128(Stack3, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx138(CircularProgress3, { size: 14 }),
+      /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
     ] });
   }
   if (error !== void 0) {
-    return /* @__PURE__ */ jsx139(Typography9, { color: "error", variant: "body2", children: error.message });
+    return /* @__PURE__ */ jsx138(Typography9, { color: "error", variant: "body2", children: error.message });
   }
   if (logs.length === 0) {
-    return /* @__PURE__ */ jsx139(Typography9, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
+    return /* @__PURE__ */ jsx138(Typography9, { 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(Typography9, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
+  return /* @__PURE__ */ jsx138(Box13, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx138("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx138(Typography9, { 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 Typography10 } from "@mui/material";
+import { Box as Box14, Typography as Typography10 } from "@mui/material";
 import { useState as useState14 } from "react";
-import { jsx as jsx140, jsxs as jsxs129 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
   const [isOpen, setIsOpen] = useState14(initialOpen);
-  return /* @__PURE__ */ jsxs129(Box15, { sx: { mt: 4 }, children: [
+  return /* @__PURE__ */ jsxs129(Box14, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ jsxs129(
-      Box15,
+      Box14,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -31254,7 +31183,7 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
         },
         children: [
           /* @__PURE__ */ jsxs129(
-            Box15,
+            Box14,
             {
               role: "button",
               sx: {
@@ -31263,23 +31192,23 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
                 gap: 1
               },
               children: [
-                /* @__PURE__ */ jsx140(Typography10, { 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__ */ jsx139(Typography10, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+                isOpen ? /* @__PURE__ */ jsx139(KeyboardArrowDown2, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx139(KeyboardArrowRight2, { sx: { color: "text.secondary", height: 20, width: 20 } })
               ]
             }
           ),
-          action !== false && /* @__PURE__ */ jsx140(Box15, { onClick: (event) => {
+          action !== false && /* @__PURE__ */ jsx139(Box14, { onClick: (event) => {
             event.stopPropagation();
           }, children: action })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx140(Box15, { children })
+    isOpen && /* @__PURE__ */ jsx139(Box14, { children })
   ] });
 };
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment10, jsx as jsx141, jsxs as jsxs130 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
 var checkIsLambdaInvoke = (span) => {
   if (span.service_name !== "lambda") {
     return false;
@@ -31300,7 +31229,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   );
   const [parseNestedJson, setParseNestedJson] = useState15(true);
   if (!selectedEvent) {
-    return /* @__PURE__ */ jsx141(Box16, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx141(Typography11, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
+    return /* @__PURE__ */ jsx140(Box15, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx140(Typography11, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
   }
   const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
   const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
@@ -31326,9 +31255,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__ */ jsxs130(Box16, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxs130(Box15, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
     /* @__PURE__ */ jsxs130(
-      Box16,
+      Box15,
       {
         sx: {
           alignItems: "center",
@@ -31340,90 +31269,90 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           py: 1
         },
         children: [
-          /* @__PURE__ */ jsx141(Box16, { children: /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ jsx141(IconButton4, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx141(Close2, {}) })
+          /* @__PURE__ */ jsx140(Box15, { children: /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          onClose && /* @__PURE__ */ jsx140(IconButton4, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx140(Close2, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx141(Box16, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs130(Stack3, { spacing: 2, children: [
-      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs130(Stack3, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
-        /* @__PURE__ */ jsxs130(Box16, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs130(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-            /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: getServiceDisplayName(selectedEvent.service_name) })
+    /* @__PURE__ */ jsx140(Box15, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs130(Stack4, { spacing: 2, children: [
+      /* @__PURE__ */ jsx140(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs130(Stack4, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
+        /* @__PURE__ */ jsxs130(Box15, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs130(Box15, { children: [
+            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) }),
+              /* @__PURE__ */ jsx140(CopyButton, { value: getServiceDisplayName(selectedEvent.service_name) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs130(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
-            /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.operation_name })
+          /* @__PURE__ */ jsxs130(Box15, { children: [
+            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
+            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name }),
+              /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.operation_name })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box16, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
-          /* @__PURE__ */ jsxs130(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-            /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography11, { variant: "body2", children: selectedEvent.resource_name }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.resource_name })
+        /* @__PURE__ */ jsxs130(Box15, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
+          /* @__PURE__ */ jsxs130(Box15, { children: [
+            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx140(Typography11, { variant: "body2", children: selectedEvent.resource_name }),
+              /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.resource_name })
             ] })
           ] }),
-          Boolean(cfnResourceType) && /* @__PURE__ */ jsxs130(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
-            /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: cfnResourceType })
+          Boolean(cfnResourceType) && /* @__PURE__ */ jsxs130(Box15, { children: [
+            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
+            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType }),
+              /* @__PURE__ */ jsx140(CopyButton, { value: cfnResourceType })
             ] })
           ] })
         ] }),
-        Boolean(resourceArn) && /* @__PURE__ */ jsxs130(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx141(Typography11, { variant: "body2", children: resourceArn }),
-            /* @__PURE__ */ jsx141(CopyButton, { value: resourceArn })
+        Boolean(resourceArn) && /* @__PURE__ */ jsxs130(Box15, { children: [
+          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
+          /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx140(Typography11, { variant: "body2", children: resourceArn }),
+            /* @__PURE__ */ jsx140(CopyButton, { value: resourceArn })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs130(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
-            /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.account_id })
+        /* @__PURE__ */ jsxs130(Box15, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs130(Box15, { children: [
+            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
+            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id }),
+              /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.account_id })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs130(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-            /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.region })
+          /* @__PURE__ */ jsxs130(Box15, { children: [
+            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region }),
+              /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.region })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs130(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-            /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx141(Typography11, { 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__ */ jsxs130(Box15, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs130(Box15, { children: [
+            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx140(Typography11, { variant: "body2", children: /* @__PURE__ */ jsx140(ResponsiveTimestampCell, { date: unixNanoToDate(selectedEvent.start_time_unix_nano) }) }),
+              /* @__PURE__ */ jsx140(CopyButton, { value: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
             ] })
           ] }),
-          duration !== void 0 && /* @__PURE__ */ jsxs130(Box16, { children: [
-            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-            /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", "data-testid": EVENT_DETAILS_DURATION_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          duration !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
+            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_DURATION_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
               /* @__PURE__ */ jsxs130(Typography11, { variant: "body2", children: [
                 duration,
                 "ms"
               ] }),
-              /* @__PURE__ */ jsx141(CopyButton, { value: `${duration}ms` })
+              /* @__PURE__ */ jsx140(CopyButton, { value: `${duration}ms` })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
-          /* @__PURE__ */ jsx141(Stack3, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsxs130(Box15, { children: [
+          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
+          /* @__PURE__ */ jsx140(Stack4, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx140(
             Chip3,
             {
               color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
@@ -31434,50 +31363,50 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx141(Divider4, {}),
+      /* @__PURE__ */ jsx140(Divider3, {}),
       /* @__PURE__ */ jsxs130(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(Typography11, { 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" })
+        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ jsx140(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__ */ jsx140(Typography11, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
+        eventGroups.permissions && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
+        eventGroups.errors && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
+        eventGroups.warnings && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
       ] }),
-      hasPayloads && /* @__PURE__ */ jsxs130(Fragment10, { children: [
-        /* @__PURE__ */ jsx141(Divider4, {}),
-        /* @__PURE__ */ jsx141(
+      hasPayloads && /* @__PURE__ */ jsxs130(Fragment9, { children: [
+        /* @__PURE__ */ jsx140(Divider3, {}),
+        /* @__PURE__ */ jsx140(
           ToggleSection,
           {
-            action: /* @__PURE__ */ jsx141(
+            action: /* @__PURE__ */ jsx140(
               FormControlLabel2,
               {
-                control: /* @__PURE__ */ jsx141(Switch, { checked: !parseNestedJson, onChange: (event) => {
+                control: /* @__PURE__ */ jsx140(Switch, { checked: !parseNestedJson, onChange: (event) => {
                   setParseNestedJson(!event.target.checked);
                 }, size: "small" }),
-                label: /* @__PURE__ */ jsx141(Typography11, { variant: "caption", children: "View raw data" }),
+                label: /* @__PURE__ */ jsx140(Typography11, { variant: "caption", children: "View raw data" }),
                 sx: { mr: 0 }
               }
             ),
             headline: "Payloads",
-            children: /* @__PURE__ */ jsxs130(Stack3, { spacing: 2, children: [
-              requestPayload !== void 0 && /* @__PURE__ */ jsxs130(Box16, { children: [
-                /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Request" }),
-                /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
+            children: /* @__PURE__ */ jsxs130(Stack4, { spacing: 2, children: [
+              requestPayload !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
+                /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Request" }),
+                /* @__PURE__ */ jsx140(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
-              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ jsxs130(Box16, { children: [
-                /* @__PURE__ */ jsx141(Typography11, { 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__ */ jsxs130(Box15, { children: [
+                /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Response" }),
+                isResponseSuppressed ? /* @__PURE__ */ jsx140(Box15, { sx: { py: 1 }, children: /* @__PURE__ */ jsx140(Alert4, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ jsx140(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
               ] }),
-              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs130(Box16, { children: [
-                /* @__PURE__ */ jsx141(Typography11, { 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__ */ jsxs130(Box15, { children: [
+                /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Exception" }),
+                /* @__PURE__ */ jsx140(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
               ] })
             ] })
           }
         )
       ] }),
-      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs130(Fragment10, { children: [
-        /* @__PURE__ */ jsx141(Divider4, {}),
-        /* @__PURE__ */ jsx141(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx141(
+      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs130(Fragment9, { children: [
+        /* @__PURE__ */ jsx140(Divider3, {}),
+        /* @__PURE__ */ jsx140(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx140(
           LambdaInvokeLogsSection,
           {
             endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
@@ -31488,30 +31417,30 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx141(Divider4, {}),
-      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs130(Stack3, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs130(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id }),
-            /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.span_id })
+      /* @__PURE__ */ jsx140(Divider3, {}),
+      /* @__PURE__ */ jsx140(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs130(Stack4, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs130(Box15, { children: [
+          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id }),
+            /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.span_id })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id }),
-            /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.trace_id })
+        /* @__PURE__ */ jsxs130(Box15, { children: [
+          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id }),
+            /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.trace_id })
           ] })
         ] }),
-        requestId !== void 0 && /* @__PURE__ */ jsxs130(Box16, { children: [
-          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          /* @__PURE__ */ jsxs130(Stack3, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId }),
-            /* @__PURE__ */ jsx141(CopyButton, { value: requestId })
+        requestId !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
+          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
+          /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId }),
+            /* @__PURE__ */ jsx140(CopyButton, { value: requestId })
           ] })
         ] }),
-        eventGroups.info && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
+        eventGroups.info && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
       ] }) })
     ] }) })
   ] });
@@ -31525,12 +31454,12 @@ import { useEffect as useEffect20 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Cancel as Cancel3, GppBad as GppBad2 } from "@mui/icons-material";
-import { Box as Box17, Divider as Divider5, Stack as Stack4, Tooltip as Tooltip6, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
+import { Box as Box16, Divider as Divider4, Stack as Stack5, Tooltip as Tooltip6, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
 import { Handle, Position } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import "react";
-import { memo as memo12, useMemo as useMemo11, useRef as useRef14, useState as useState16 } from "react";
-import { Fragment as Fragment11, jsx as jsx142, jsxs as jsxs131 } from "react/jsx-runtime";
+import { memo as memo11, useMemo as useMemo11, useRef as useRef14, useState as useState16 } from "react";
+import { Fragment as Fragment10, jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
@@ -31538,19 +31467,19 @@ var handleStyle = {
 };
 var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning }) => {
   const theme = useTheme4();
-  return /* @__PURE__ */ jsxs131(Fragment11, { children: [
-    /* @__PURE__ */ jsx142(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-    /* @__PURE__ */ jsx142(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+  return /* @__PURE__ */ jsxs131(Fragment10, { children: [
+    /* @__PURE__ */ jsx141(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+    /* @__PURE__ */ jsx141(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
     /* @__PURE__ */ jsxs131(
-      Stack4,
+      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__ */ jsxs131(Stack4, { sx: expanded ? void 0 : { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx142(
+          /* @__PURE__ */ jsx141(Box16, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx141(AwsServiceIcon, { hideTooltip: true, service: event.service_name, size: "medium" }) }),
+          /* @__PURE__ */ jsxs131(Stack5, { sx: expanded ? void 0 : { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx141(
               Typography12,
               {
                 noWrap: !expanded,
@@ -31559,7 +31488,7 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 children: getServiceDisplayName(event.service_name)
               }
             ),
-            event.resource_name != "" && /* @__PURE__ */ jsx142(
+            event.resource_name != "" && /* @__PURE__ */ jsx141(
               Typography12,
               {
                 color: "text.secondary",
@@ -31573,16 +31502,16 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
         ]
       }
     ),
-    /* @__PURE__ */ jsx142(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+    /* @__PURE__ */ jsx141(Divider4, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
     /* @__PURE__ */ jsxs131(
-      Stack4,
+      Stack5,
       {
         alignItems: "center",
         direction: "row",
         sx: expanded ? { pb: "5px", pr: "8px", pt: "1px" } : { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
         children: [
           /* @__PURE__ */ jsxs131(
-            Box17,
+            Box16,
             {
               sx: {
                 alignItems: "center",
@@ -31592,12 +31521,12 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 width: "38px"
               },
               children: [
-                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip6, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx142(GppBad2, { 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(Cancel3, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx141(Tooltip6, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx141(GppBad2, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
+                isError && !hasPermissionEvents && /* @__PURE__ */ jsx141(Tooltip6, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx141(Cancel3, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx142(
+          /* @__PURE__ */ jsx141(
             Typography12,
             {
               "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
@@ -31612,7 +31541,7 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
     )
   ] });
 };
-var ServiceNode = memo12(({ data, selected }) => {
+var ServiceNode = memo11(({ data, selected }) => {
   const theme = useTheme4();
   const [isHovered, setIsHovered] = useState16(false);
   const nodeRef = useRef14(null);
@@ -31647,7 +31576,7 @@ var ServiceNode = memo12(({ data, selected }) => {
     if (xyNode) xyNode.style.zIndex = "";
   };
   return /* @__PURE__ */ jsxs131(
-    Box17,
+    Box16,
     {
       "data-testid": SERVICE_NODE_TEST_ID,
       onMouseEnter: handleMouseEnter,
@@ -31657,8 +31586,8 @@ var ServiceNode = memo12(({ data, selected }) => {
       sx: { display: "inline-block", position: "relative" },
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx142(
-          Box17,
+        /* @__PURE__ */ jsx141(
+          Box16,
           {
             sx: {
               ...sharedBoxSx,
@@ -31666,11 +31595,11 @@ var ServiceNode = memo12(({ data, selected }) => {
               maxWidth: 220,
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx142(NodeContent, { ...contentProps, expanded: false })
+            children: /* @__PURE__ */ jsx141(NodeContent, { ...contentProps, expanded: false })
           }
         ),
-        /* @__PURE__ */ jsx142(
-          Box17,
+        /* @__PURE__ */ jsx141(
+          Box16,
           {
             onMouseLeave: handleMouseLeave,
             sx: {
@@ -31684,7 +31613,7 @@ var ServiceNode = memo12(({ data, selected }) => {
               width: "max-content",
               zIndex: 10
             },
-            children: /* @__PURE__ */ jsx142(NodeContent, { ...contentProps, expanded: true })
+            children: /* @__PURE__ */ jsx141(NodeContent, { ...contentProps, expanded: true })
           }
         )
       ]
@@ -31779,17 +31708,17 @@ 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 IconButton5 } from "@mui/material";
+import { Box as Box17, IconButton as IconButton5 } from "@mui/material";
 import { useReactFlow, useStore as useStore2 } from "@xyflow/react";
-import { memo as memo13 } from "react";
+import { memo as memo12 } from "react";
 import { shallow } from "zustand/shallow";
-import { jsx as jsx143, jsxs as jsxs132 } from "react/jsx-runtime";
+import { jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
 var selector = (s) => ({
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = memo13(() => {
+var Controls = memo12(() => {
   const { maxZoomReached, minZoomReached } = useStore2(selector, shallow);
   const { fitView, zoomIn, zoomOut } = useReactFlow();
   const onZoomInHandler = () => {
@@ -31802,7 +31731,7 @@ var Controls = memo13(() => {
     void fitView();
   };
   return /* @__PURE__ */ jsxs132(
-    Box18,
+    Box17,
     {
       sx: {
         bottom: 0,
@@ -31815,33 +31744,33 @@ var Controls = memo13(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx142(
           IconButton5,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(Add, {})
+            children: /* @__PURE__ */ jsx142(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx142(
           IconButton5,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(Remove, {})
+            children: /* @__PURE__ */ jsx142(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx142(
           IconButton5,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(FitScreen, {})
+            children: /* @__PURE__ */ jsx142(FitScreen, {})
           }
         )
       ]
@@ -31850,7 +31779,7 @@ var Controls = memo13(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment12, jsx as jsx144, jsxs as jsxs133 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -31917,11 +31846,11 @@ var TraceGraph = ({
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes, setEdges]);
   const theme = useTheme5();
-  return /* @__PURE__ */ jsxs133(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs133(Fragment11, { children: [
     spans.error && /* @__PURE__ */ jsxs133(
       Alert5,
       {
-        action: /* @__PURE__ */ jsx144(Button5, { onClick: () => {
+        action: /* @__PURE__ */ jsx143(Button5, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -31950,8 +31879,8 @@ var TraceGraph = ({
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx144(Controls, {}),
-          /* @__PURE__ */ jsx144(
+          /* @__PURE__ */ jsx143(Controls, {}),
+          /* @__PURE__ */ jsx143(
             Background,
             {
               bgColor: theme.palette.background.default,
@@ -31965,7 +31894,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { jsx as jsx145, jsxs as jsxs134 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs134 } from "react/jsx-runtime";
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
   flexGrow: 1,
@@ -32009,7 +31938,7 @@ var TraceGraphView = ({
   spans,
   traceId
 }) => /* @__PURE__ */ jsxs134(
-  Box19,
+  Box18,
   {
     "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
     sx: {
@@ -32021,11 +31950,11 @@ var TraceGraphView = ({
       overflow: "hidden"
     },
     children: [
-      /* @__PURE__ */ jsxs134(Box19, { sx: { display: "flex", width: "100%" }, children: [
-        /* @__PURE__ */ jsx145(Button6, { onClick: () => {
+      /* @__PURE__ */ jsxs134(Box18, { sx: { display: "flex", width: "100%" }, children: [
+        /* @__PURE__ */ jsx144(Button6, { onClick: () => {
           navigateToSpansList();
-        }, startIcon: /* @__PURE__ */ jsx145(ArrowBack, {}), children: "Go back" }),
-        /* @__PURE__ */ jsx145(Box19, { sx: { flexGrow: 1 } })
+        }, startIcon: /* @__PURE__ */ jsx144(ArrowBack, {}), children: "Go back" }),
+        /* @__PURE__ */ jsx144(Box18, { sx: { flexGrow: 1 } })
       ] }),
       /* @__PURE__ */ jsxs134(
         Paper3,
@@ -32038,14 +31967,14 @@ var TraceGraphView = ({
             width: "100%"
           },
           children: [
-            /* @__PURE__ */ jsx145(Main, { open, children: /* @__PURE__ */ jsx145(
-              Box19,
+            /* @__PURE__ */ jsx144(Main, { open, children: /* @__PURE__ */ jsx144(
+              Box18,
               {
                 sx: {
                   height: "100%",
                   overflow: "auto"
                 },
-                children: traceId !== void 0 && /* @__PURE__ */ jsx145(ReactFlowProvider, { children: /* @__PURE__ */ jsx145(
+                children: traceId !== void 0 && /* @__PURE__ */ jsx144(ReactFlowProvider, { children: /* @__PURE__ */ jsx144(
                   TraceGraph,
                   {
                     initialFocusEventId: spanId,
@@ -32062,7 +31991,7 @@ var TraceGraphView = ({
                 ) })
               }
             ) }),
-            /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", headerHeight, open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
+            /* @__PURE__ */ jsx144(StyledDrawer, { anchor: "right", headerHeight, open, variant: "persistent", children: /* @__PURE__ */ jsx144(EventDetails, { onClose: handleClose, selectedEvent }) })
           ]
         }
       )
@@ -32142,7 +32071,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const navigateToSpansList = useCallback10(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsx145(
+  return /* @__PURE__ */ jsx144(
     TraceGraphView,
     {
       fetchError,
@@ -32164,7 +32093,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-import { Fragment as Fragment13, jsx as jsx146, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx145, jsxs as jsxs135 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -32231,10 +32160,10 @@ var SpansListPage = () => {
   switch (phase) {
     case "CHECKING_STATUS":
     case "CONNECTING_WS": {
-      return /* @__PURE__ */ jsx146(StatusMessage, { phase });
+      return /* @__PURE__ */ jsx145(StatusMessage, { phase });
     }
     case "DISABLED": {
-      return /* @__PURE__ */ jsx146(
+      return /* @__PURE__ */ jsx145(
         StatusMessage,
         {
           onEnable: handleEnable,
@@ -32243,7 +32172,7 @@ var SpansListPage = () => {
       );
     }
     case "INCOMPATIBLE": {
-      return /* @__PURE__ */ jsx146(
+      return /* @__PURE__ */ jsx145(
         StatusMessage,
         {
           localstackVersion,
@@ -32256,7 +32185,7 @@ var SpansListPage = () => {
       break;
     }
     case "UNREACHABLE": {
-      return /* @__PURE__ */ jsx146(
+      return /* @__PURE__ */ jsx145(
         StatusMessage,
         {
           onRetry: handleRetry,
@@ -32265,9 +32194,9 @@ var SpansListPage = () => {
       );
     }
   }
-  return /* @__PURE__ */ jsxs135(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs135(Fragment12, { children: [
     /* @__PURE__ */ jsxs135(
-      Box20,
+      Box19,
       {
         "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
@@ -32282,7 +32211,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          /* @__PURE__ */ jsx146(
+          /* @__PURE__ */ jsx145(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -32292,7 +32221,7 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          /* @__PURE__ */ jsx146(
+          /* @__PURE__ */ jsx145(
             SpansList,
             {
               clearingSpans,
@@ -32317,7 +32246,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ jsx146(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ jsx145(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });