@localstack/appinspector-ui 1.0.113 → 1.0.115

package/dist/index.js

@@ -2413,7 +2413,7 @@ var init_event_streams = __esm({
 });
 
 // src/pages/spans-list-page.tsx
-import { Box as Box20 } from "@mui/material";
+import { Box as Box21 } from "@mui/material";
 import { useCallback as useCallback12, useState as useState18 } from "react";
 
 // src/api/errors.ts
@@ -2572,12 +2572,12 @@ var EmulatorVersionBanner = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-import { Alert as Alert2, Box as Box5, Button as Button3 } from "@mui/material";
+import { Alert as Alert2, Box as Box6, Button as Button3 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
 import { DeleteForeverOutlined, PauseOutlined, PlayArrowOutlined } from "@mui/icons-material";
 import {
-  Box as Box4,
+  Box as Box5,
   Button as Button2,
   CircularProgress,
   FormControlLabel,
@@ -2590,8 +2590,8 @@ import {
   TableHead,
   TableRow,
   TableSortLabel,
-  Tooltip as Tooltip3,
-  Typography as Typography3,
+  Tooltip as Tooltip4,
+  Typography as Typography4,
   useTheme as useTheme2
 } from "@mui/material";
 
@@ -14881,11 +14881,182 @@ var ServiceCell = memo7(({
 });
 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";
+
+// src/types/error-levels.ts
+var ErrorLevel = {
+  ERROR: 3,
+  // General error
+  IAM_PERMISSION: 5,
+  // IAM permission issues
+  OK: 2,
+  // OK
+  // Standard OTEL status codes
+  UNSET: 1,
+  // Unset
+  // Extended custom levels
+  WARNING: 4
+  // Warning
+};
+
+// src/utils/iam-utils.ts
+function determinePermissionStatus(payload) {
+  if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {
+    return "explicitly_denied";
+  }
+  if (payload.is_allowed && payload.explicit_allow_count && payload.explicit_allow_count > 0) {
+    return "explicitly_allowed";
+  }
+  if (payload.is_allowed) {
+    return "implicitly_allowed";
+  }
+  return "implicitly_denied";
+}
+function formatPermissionStatus(status) {
+  switch (status) {
+    case "explicitly_allowed": {
+      return "Explicitly Allowed";
+    }
+    case "explicitly_denied": {
+      return "Explicitly Denied";
+    }
+    case "implicitly_allowed": {
+      return "Implicitly Allowed";
+    }
+    case "implicitly_denied": {
+      return "Implicitly Denied";
+    }
+  }
+}
+function getPermissionStatusColor(status) {
+  switch (status) {
+    case "explicitly_allowed":
+    case "implicitly_allowed": {
+      return "success.main";
+    }
+    case "explicitly_denied": {
+      return "error.main";
+    }
+    case "implicitly_denied": {
+      return "warning.main";
+    }
+  }
+}
+function parseIAMEvent(payloadString) {
+  try {
+    const payload = JSON.parse(payloadString);
+    const permission = determinePermissionStatus(payload);
+    const actions = [];
+    const resources = [];
+    if (payload.explicit_allows) {
+      for (const allow of payload.explicit_allows) {
+        if (!actions.includes(allow.action)) actions.push(allow.action);
+        if (!resources.includes(allow.resource)) resources.push(allow.resource);
+      }
+    }
+    if (payload.explicit_denies) {
+      for (const deny of payload.explicit_denies) {
+        if (!actions.includes(deny.action)) actions.push(deny.action);
+        if (!resources.includes(deny.resource)) resources.push(deny.resource);
+      }
+    }
+    if (payload.implicit_denies) {
+      for (const deny of payload.implicit_denies) {
+        if (!actions.includes(deny.action)) actions.push(deny.action);
+        if (!resources.includes(deny.resource)) resources.push(deny.resource);
+      }
+    }
+    return {
+      details: {
+        actions,
+        explicitAllows: payload.explicit_allow_count,
+        explicitDenies: payload.explicit_deny_count,
+        implicitDenies: payload.implicit_deny_count,
+        resources
+      },
+      operation: payload.operation,
+      permission,
+      principal: payload.principal_arn,
+      service: payload.service
+    };
+  } catch (error) {
+    console.error("Error parsing IAM event payload:", error);
+    return void 0;
+  }
+}
+
+// src/components/cells/status-cell.tsx
+import { Fragment as Fragment4, jsx as jsx126, jsxs as jsxs120 } from "react/jsx-runtime";
+var StatusIcon = ({ errorLevel, spanStatusCode }) => {
+  switch (errorLevel) {
+    case ErrorLevel.ERROR: {
+      return /* @__PURE__ */ jsx126(Cancel, { sx: { color: "red" } });
+    }
+    case ErrorLevel.IAM_PERMISSION: {
+      return /* @__PURE__ */ jsx126(GppBad, { sx: { color: spanStatusCode === 2 ? "red" : "warning.main" } });
+    }
+    case ErrorLevel.WARNING: {
+      return /* @__PURE__ */ jsx126(Error2, { sx: { color: "orange" } });
+    }
+    default: {
+      return /* @__PURE__ */ jsx126(Fragment4, {});
+    }
+  }
+};
+var calculateHighestErrorLevel = (span) => {
+  const hasIamDenial = span.events.some((event) => {
+    if (!event.event_type?.toLowerCase().includes("iam")) return false;
+    if (typeof event.attributes?.payload !== "string") return false;
+    const parsed = parseIAMEvent(event.attributes.payload);
+    return parsed?.permission === "explicitly_denied" || parsed?.permission === "implicitly_denied";
+  });
+  if (hasIamDenial) return ErrorLevel.IAM_PERMISSION;
+  if (span.status_code === 2) return ErrorLevel.ERROR;
+  const hasErrorInErrors = span.errors?.some((error) => error.level === "error");
+  if (hasErrorInErrors) return ErrorLevel.ERROR;
+  const hasWarning = span.errors?.some((error) => error.level === "warning");
+  if (hasWarning) return ErrorLevel.WARNING;
+  return span.status_code || ErrorLevel.UNSET;
+};
+var SPAN_STATUS_LABELS = {
+  0: "Unset",
+  1: "OK",
+  2: "Error"
+};
+var buildTooltipContent = (span) => {
+  const messages = [];
+  if (span.status_message) messages.push(span.status_message);
+  for (const error of span.errors ?? []) {
+    if (error.message) messages.push(error.message);
+  }
+  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__ */ jsxs120(Box3, { children: [
+    /* @__PURE__ */ jsxs120(Typography2, { color: "inherit", display: "block", fontWeight: "bold", variant: "caption", children: [
+      "Status: ",
+      spanStatusLabel
+    ] }),
+    messages.map((message, index) => /* @__PURE__ */ jsx126(Typography2, { color: "inherit", display: "block", variant: "caption", children: message }, index)),
+    iamDenials.length > 0 && /* @__PURE__ */ jsxs120(Fragment4, { children: [
+      /* @__PURE__ */ jsx126(Divider2, { sx: { borderColor: "rgba(255,255,255,0.2)", my: 0.5 } }),
+      /* @__PURE__ */ jsx126(Typography2, { color: "inherit", display: "block", fontWeight: "bold", variant: "caption", children: "Permissions" }),
+      iamDenials.map((denial, index) => denial !== void 0 && /* @__PURE__ */ jsx126(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__ */ jsx126(Fragment4, {});
+  return /* @__PURE__ */ jsx126(Tooltip2, { title: buildTooltipContent(span), children: /* @__PURE__ */ jsx126(Box3, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: /* @__PURE__ */ jsx126(StatusIcon, { errorLevel, spanStatusCode: span.status_code }) }) });
+};
+
 // src/components/spans-list/span-count-badge.tsx
 import { InfoOutlined, WarningAmberOutlined } from "@mui/icons-material";
-import { Box as Box3, Button, Divider as Divider2, IconButton, Popover, Skeleton, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
+import { Box as Box4, Button, Divider as Divider3, 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 Fragment5, jsx as jsx127, jsxs as jsxs121 } 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);
@@ -14898,28 +15069,28 @@ var fmtLimit = (value) => {
   if (value === "unlimited") return "Unlimited";
   return fmt(value);
 };
-var StatRow = ({ label, value }) => /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "baseline", display: "flex", justifyContent: "space-between", minWidth: 220 }, children: [
-  /* @__PURE__ */ jsx126(Typography2, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx126(Typography2, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
+var StatRow = ({ label, value }) => /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "baseline", display: "flex", justifyContent: "space-between", minWidth: 220 }, children: [
+  /* @__PURE__ */ jsx127(Typography3, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx127(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__ */ jsx127(Fragment5, {});
   }
   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(Box3, { sx: { alignItems: "center", display: "flex", gap: 0.25 }, children: [
-    isLoading ? /* @__PURE__ */ jsx126(Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
-      /* @__PURE__ */ jsx126(Typography2, { color: "text.secondary", variant: "caption", children: "Showing" }),
-      /* @__PURE__ */ jsx126(Typography2, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
-      /* @__PURE__ */ jsx126(Typography2, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
+  return /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", gap: 0.25 }, children: [
+    isLoading ? /* @__PURE__ */ jsx127(Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
+      /* @__PURE__ */ jsx127(Typography3, { color: "text.secondary", variant: "caption", children: "Showing" }),
+      /* @__PURE__ */ jsx127(Typography3, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
+      /* @__PURE__ */ jsx127(Typography3, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
     ] }),
-    /* @__PURE__ */ jsx126(Tooltip2, { title: "Operation count details", children: /* @__PURE__ */ jsx126(
+    /* @__PURE__ */ jsx127(Tooltip3, { title: "Operation count details", children: /* @__PURE__ */ jsx127(
       IconButton,
       {
         "aria-describedby": isOpen ? "operation-count-popover" : void 0,
@@ -14928,10 +15099,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__ */ jsx127(WarningAmberOutlined, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx127(InfoOutlined, { sx: { fontSize: 14 } })
       }
     ) }),
-    /* @__PURE__ */ jsx126(
+    /* @__PURE__ */ jsx127(
       Popover,
       {
         anchorEl: anchorElement,
@@ -14942,54 +15113,54 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
         },
         open: isOpen,
         transformOrigin: { horizontal: "right", vertical: "top" },
-        children: /* @__PURE__ */ jsxs120(Box3, { sx: { minWidth: 240, p: 2 }, children: [
-          /* @__PURE__ */ jsx126(Typography2, { fontWeight: 700, variant: "body2", children: "Storage" }),
-          /* @__PURE__ */ jsx126(Typography2, { 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__ */ jsx126(
+        children: /* @__PURE__ */ jsxs121(Box4, { sx: { minWidth: 240, p: 2 }, children: [
+          /* @__PURE__ */ jsx127(Typography3, { fontWeight: 700, variant: "body2", children: "Storage" }),
+          /* @__PURE__ */ jsx127(Typography3, { color: "text.secondary", sx: { mt: 0.25 }, variant: "caption", children: "How many operations are currently stored." }),
+          /* @__PURE__ */ jsxs121(Box4, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: [
+            /* @__PURE__ */ jsx127(
               StatRow,
               {
-                label: /* @__PURE__ */ jsx126(Tooltip2, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ jsx126(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
+                label: /* @__PURE__ */ jsx127(Tooltip3, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ jsx127(Box4, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
                 value: visibleCount
               }
             ),
-            /* @__PURE__ */ jsx126(
+            /* @__PURE__ */ jsx127(
               StatRow,
               {
-                label: /* @__PURE__ */ jsx126(Tooltip2, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ jsx126(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
+                label: /* @__PURE__ */ jsx127(Tooltip3, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ jsx127(Box4, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
                 value: totalCount
               }
             )
           ] }),
-          (systemLimit !== void 0 || licenseLimit !== void 0) && /* @__PURE__ */ jsxs120(Fragment4, { children: [
-            /* @__PURE__ */ jsx126(Divider2, { sx: { my: 1.5 } }),
-            /* @__PURE__ */ jsx126(Typography2, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
-            /* @__PURE__ */ jsx126(Typography2, { 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 && /* @__PURE__ */ jsx126(
+          (systemLimit !== void 0 || licenseLimit !== void 0) && /* @__PURE__ */ jsxs121(Fragment5, { children: [
+            /* @__PURE__ */ jsx127(Divider3, { sx: { my: 1.5 } }),
+            /* @__PURE__ */ jsx127(Typography3, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
+            /* @__PURE__ */ jsx127(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__ */ jsxs121(Box4, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: [
+              licenseLimit !== void 0 && /* @__PURE__ */ jsx127(
                 StatRow,
                 {
-                  label: /* @__PURE__ */ jsx126(Tooltip2, { placement: "left", title: "The maximum number of operations allowed by your current license.", children: /* @__PURE__ */ jsx126(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "License limit" }) }),
+                  label: /* @__PURE__ */ jsx127(Tooltip3, { placement: "left", title: "The maximum number of operations allowed by your current license.", children: /* @__PURE__ */ jsx127(Box4, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "License limit" }) }),
                   value: licenseLimit
                 }
               ),
-              systemLimit !== void 0 && /* @__PURE__ */ jsx126(
+              systemLimit !== void 0 && /* @__PURE__ */ jsx127(
                 StatRow,
                 {
-                  label: /* @__PURE__ */ jsx126(Tooltip2, { placement: "left", title: "The maximum number of operations that can be stored in the system.", children: /* @__PURE__ */ jsx126(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "System limit" }) }),
+                  label: /* @__PURE__ */ jsx127(Tooltip3, { placement: "left", title: "The maximum number of operations that can be stored in the system.", children: /* @__PURE__ */ jsx127(Box4, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "System limit" }) }),
                   value: systemLimit
                 }
               )
             ] })
           ] }),
-          (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__ */ jsx126(WarningAmberOutlined, { sx: { color: "warning.contrastText", fontSize: 14, mt: "1px" } }),
-                /* @__PURE__ */ jsx126(Typography2, { color: "warning.contrastText", fontWeight: 600, variant: "caption", children: "License limit reached" })
+          (systemLimitReached || licenseLimitReached) && /* @__PURE__ */ jsxs121(Box4, { sx: { display: "flex", flexDirection: "column", gap: 1, mt: 1.5 }, children: [
+            licenseLimitReached && /* @__PURE__ */ jsxs121(Box4, { sx: { backgroundColor: "warning.main", borderRadius: 1, p: 1.5 }, children: [
+              /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75, mb: 0.75 }, children: [
+                /* @__PURE__ */ jsx127(WarningAmberOutlined, { sx: { color: "warning.contrastText", fontSize: 14, mt: "1px" } }),
+                /* @__PURE__ */ jsx127(Typography3, { color: "warning.contrastText", fontWeight: 600, variant: "caption", children: "License limit reached" })
               ] }),
-              /* @__PURE__ */ jsx126(Typography2, { 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__ */ jsx127(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__ */ jsx127(
                 Button,
                 {
                   color: "inherit",
@@ -15002,9 +15173,9 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
                 }
               )
             ] }),
-            systemLimitReached && !licenseLimitReached && /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75 }, children: [
-              /* @__PURE__ */ jsx126(WarningAmberOutlined, { color: "warning", sx: { fontSize: 14, mt: "1px" } }),
-              /* @__PURE__ */ jsx126(Typography2, { color: "warning.main", variant: "caption", children: "System limit reached \u2014 newer operations are being dropped." })
+            systemLimitReached && !licenseLimitReached && /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75 }, children: [
+              /* @__PURE__ */ jsx127(WarningAmberOutlined, { color: "warning", sx: { fontSize: 14, mt: "1px" } }),
+              /* @__PURE__ */ jsx127(Typography3, { color: "warning.main", variant: "caption", children: "System limit reached \u2014 newer operations are being dropped." })
             ] })
           ] })
         ] })
@@ -15014,7 +15185,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 Fragment6, jsx as jsx128, jsxs as jsxs122 } from "react/jsx-runtime";
 var columnHelper = createColumnHelper();
 var newSpanBackgroundColor = {
   dark: { from: "rgba(136, 123, 2, 1)", to: "rgba(136, 123, 2, 0)" },
@@ -15026,15 +15197,15 @@ var LABEL_NO_SPANS = "There are no operations";
 var LABEL_LOAD_OLDER = "Load older operations";
 var LABEL_LOAD_NEWER = "Load newer 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 LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsxs121(TableCell, { colSpan, sx: { textAlign: "center" }, children: [
-  !fetching && /* @__PURE__ */ jsx127(Button2, { onClick: onFetch, sx: { my: 1 }, children: label }),
-  fetching && /* @__PURE__ */ jsx127(CircularProgress, { size: 24, sx: { m: 2 } })
+var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx128(TableRow, { children: /* @__PURE__ */ jsx128(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx128("span", { children: label }) }) });
+var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ jsx128(TableRow, { children: /* @__PURE__ */ jsxs122(TableCell, { colSpan, sx: { textAlign: "center" }, children: [
+  !fetching && /* @__PURE__ */ jsx128(Button2, { onClick: onFetch, sx: { my: 1 }, children: label }),
+  fetching && /* @__PURE__ */ jsx128(CircularProgress, { size: 24, sx: { m: 2 } })
 ] }) });
 var SpansDataGridRow = memo8(
-  ({ row }) => {
+  ({ onSpanClick, row }) => {
     const theme = useTheme2();
-    return /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsx128(
       TableRow,
       {
         animate: {
@@ -15045,11 +15216,15 @@ var SpansDataGridRow = memo8(
         initial: {
           backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.from : newSpanBackgroundColor.dark.from
         },
+        onClick: () => {
+          onSpanClick(row.original);
+        },
         sx: {
+          cursor: "pointer",
           transition: "background-color 1200ms ease-in"
         },
         children: row.getVisibleCells().map((cell) => {
-          return /* @__PURE__ */ jsx127(
+          return /* @__PURE__ */ jsx128(
             TableCell,
             {
               sx: {
@@ -15057,8 +15232,8 @@ var SpansDataGridRow = memo8(
                 maxWidth: `${cell.column.getSize().toString()}px`,
                 minWidth: `${cell.column.getSize().toString()}px`
               },
-              children: /* @__PURE__ */ jsx127(
-                Box4,
+              children: /* @__PURE__ */ jsx128(
+                Box5,
                 {
                   sx: {
                     "alignItems": "center",
@@ -15070,7 +15245,7 @@ var SpansDataGridRow = memo8(
                     },
                     "width": "100%"
                   },
-                  children: /* @__PURE__ */ jsx127(Box4, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+                  children: /* @__PURE__ */ jsx128(Box5, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
                 }
               )
             },
@@ -15107,8 +15282,8 @@ var SpansDataGrid = ({
 }) => {
   const columns = useMemo5(() => [
     columnHelper.accessor("startTime", {
-      cell: (props) => /* @__PURE__ */ jsx127(ResponsiveTimestampCell, { date: props.getValue() }),
-      header: () => /* @__PURE__ */ jsx127(
+      cell: (props) => /* @__PURE__ */ jsx128(ResponsiveTimestampCell, { date: props.getValue() }),
+      header: () => /* @__PURE__ */ jsx128(
         TableSortLabel,
         {
           active: true,
@@ -15125,23 +15300,23 @@ var SpansDataGrid = ({
     columnHelper.display({
       cell: (props) => {
         if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
-          return /* @__PURE__ */ jsx127(Typography3, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
+          return /* @__PURE__ */ jsx128(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__ */ jsx128(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(
-        Box4,
+      cell: (props) => /* @__PURE__ */ jsx128(
+        Box5,
         {
           sx: {
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: /* @__PURE__ */ jsx127("span", { title: props.getValue(), children: props.getValue() })
+          children: /* @__PURE__ */ jsx128("span", { title: props.getValue(), children: props.getValue() })
         }
       ),
       header: "Action",
@@ -15150,7 +15325,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__ */ jsx128(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
       },
       header: "Consumer",
       id: "consumer",
@@ -15158,23 +15333,26 @@ var SpansDataGrid = ({
     }),
     columnHelper.display({
       cell: (props) => {
-        return /* @__PURE__ */ jsx127(Box4, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx127(
-          Button2,
-          {
-            "data-testid": VIEW_SPAN_DETAILS_TEST_ID,
-            onClick: () => {
-              onSpanClick(props.row.original);
-            },
-            size: "small",
-            sx: { px: 1 },
-            variant: "text",
-            children: "View Details"
-          }
-        ) });
+        return /* @__PURE__ */ jsxs122(Box5, { sx: { alignItems: "center", display: "flex", gap: 0.5, justifyContent: "flex-end" }, children: [
+          /* @__PURE__ */ jsx128(StatusIconWithTooltip, { span: props.row.original }),
+          /* @__PURE__ */ jsx128(
+            Button2,
+            {
+              "data-testid": VIEW_SPAN_DETAILS_TEST_ID,
+              onClick: (event) => {
+                event.stopPropagation();
+                onSpanClick(props.row.original);
+              },
+              size: "small",
+              sx: { px: 1 },
+              variant: "text",
+              children: "View Details"
+            }
+          )
+        ] });
       },
       id: "actions",
-      // The actions column doesn't need more space
-      size: 96
+      size: 128
     })
   ], [onSpanClick, onOrderChange, order2]);
   const table = useReactTable({
@@ -15207,46 +15385,46 @@ 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(Box4, { 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(Typography3, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ jsx127(Tooltip3, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ jsxs121(
-          Box4,
+  return /* @__PURE__ */ jsxs122(Fragment6, { children: [
+    /* @__PURE__ */ jsx128(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs122(Box5, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx128(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
+      errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ jsxs122(Fragment6, { children: [
+        /* @__PURE__ */ jsx128(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
+        /* @__PURE__ */ jsx128(Tooltip4, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ jsxs122(
+          Box5,
           {
             "data-testid": ERROR_COUNT_TEST_ID,
             sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "error.main", cursor: "default", display: "flex", gap: 0.5, mb: "-1px" },
             children: [
-              /* @__PURE__ */ jsx127(Typography3, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
-              /* @__PURE__ */ jsx127(Typography3, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
+              /* @__PURE__ */ jsx128(Typography4, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
+              /* @__PURE__ */ jsx128(Typography4, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
             ]
           }
         ) })
       ] }),
-      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ jsxs121(Fragment5, { children: [
-        /* @__PURE__ */ jsx127(Typography3, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ jsx127(Tooltip3, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ jsxs121(
-          Box4,
+      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ jsxs122(Fragment6, { children: [
+        /* @__PURE__ */ jsx128(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
+        /* @__PURE__ */ jsx128(Tooltip4, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ jsxs122(
+          Box5,
           {
             "data-testid": WARNING_COUNT_TEST_ID,
             sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "warning.main", cursor: "default", display: "flex", gap: 0.5, mb: "-1px" },
             children: [
-              /* @__PURE__ */ jsx127(Typography3, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
-              /* @__PURE__ */ jsx127(Typography3, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
+              /* @__PURE__ */ jsx128(Typography4, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
+              /* @__PURE__ */ jsx128(Typography4, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
             ]
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx127(Box4, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx127(
+      /* @__PURE__ */ jsx128(Box5, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ jsx128(
         FormControlLabel,
         {
-          control: /* @__PURE__ */ jsx127(
+          control: /* @__PURE__ */ jsx128(
             Button2,
             {
               onClick: onToggleStream,
-              startIcon: streamPaused ? /* @__PURE__ */ jsx127(PlayArrowOutlined, {}) : /* @__PURE__ */ jsx127(PauseOutlined, {}),
+              startIcon: streamPaused ? /* @__PURE__ */ jsx128(PlayArrowOutlined, {}) : /* @__PURE__ */ jsx128(PauseOutlined, {}),
               variant: "text",
               children: streamPaused ? "Resume Stream" : "Pause Stream"
             }
@@ -15254,15 +15432,15 @@ var SpansDataGrid = ({
           label: ""
         }
       ),
-      /* @__PURE__ */ jsx127(
+      /* @__PURE__ */ jsx128(
         FormControlLabel,
         {
-          control: /* @__PURE__ */ jsx127(
+          control: /* @__PURE__ */ jsx128(
             Button2,
             {
               "data-testid": CLEAR_SPANS_TEST_ID,
               onClick: onClearSpans,
-              startIcon: /* @__PURE__ */ jsx127(DeleteForeverOutlined, {}),
+              startIcon: /* @__PURE__ */ jsx128(DeleteForeverOutlined, {}),
               children: "Clear Operations"
             }
           ),
@@ -15271,7 +15449,7 @@ var SpansDataGrid = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx127(Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ jsx127(
+    /* @__PURE__ */ jsx128(Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ jsx128(
       TableContainer,
       {
         onScroll: handleScroll,
@@ -15284,7 +15462,7 @@ var SpansDataGrid = ({
           right: 0,
           top: 0
         },
-        children: /* @__PURE__ */ jsxs121(
+        children: /* @__PURE__ */ jsxs122(
           Table,
           {
             stickyHeader: true,
@@ -15296,8 +15474,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__ */ jsx128(TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
+                return /* @__PURE__ */ jsx128(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx128(
                   TableCell,
                   {
                     colSpan: header.colSpan,
@@ -15312,31 +15490,31 @@ var SpansDataGrid = ({
                   header.id
                 )) }, 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 && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
-                  hasRows && /* @__PURE__ */ jsx127(AnimatePresence, { initial: false, children: (() => {
+              /* @__PURE__ */ jsxs122(TableBody, { children: [
+                (spans === void 0 || clearingSpans) && /* @__PURE__ */ jsx128(TableRow, { children: /* @__PURE__ */ jsx128(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx128(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ jsx128(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs122(Fragment6, { children: [
+                  hasRows && hasMoreForward && /* @__PURE__ */ jsx128(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx128(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
+                  hasRows && /* @__PURE__ */ jsx128(AnimatePresence, { initial: false, children: (() => {
                     const reversed = [];
                     for (let index = rows.length - 1; index >= 0; index--) {
                       const row = rows.at(index);
                       reversed.push(
-                        /* @__PURE__ */ jsx127(SpansDataGridRow, { row }, row.original.span_id)
+                        /* @__PURE__ */ jsx128(SpansDataGridRow, { onSpanClick, row }, row.original.span_id)
                       );
                     }
                     return reversed;
                   })() }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
-                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
+                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx128(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx128(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 && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
-                  hasRows && /* @__PURE__ */ jsx127(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx127(SpansDataGridRow, { row }, row.original.span_id)) }),
-                  hasRows && hasMoreForward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
+                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs122(Fragment6, { children: [
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx128(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
+                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx128(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && /* @__PURE__ */ jsx128(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx128(SpansDataGridRow, { onSpanClick, row }, row.original.span_id)) }),
+                  hasRows && hasMoreForward && /* @__PURE__ */ jsx128(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx128(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
               ] })
             ]
@@ -15348,13 +15526,13 @@ var SpansDataGrid = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-import { jsx as jsx128, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx129, jsxs as jsxs123 } from "react/jsx-runtime";
 var SpansList = (props) => {
-  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(
+  return /* @__PURE__ */ jsxs123(Box6, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
+    props.fetchError && /* @__PURE__ */ jsxs123(
       Alert2,
       {
-        action: /* @__PURE__ */ jsx128(Button3, { onClick: props.onFetchForward, children: "Retry" }),
+        action: /* @__PURE__ */ jsx129(Button3, { onClick: props.onFetchForward, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -15363,7 +15541,7 @@ var SpansList = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx128(
+    /* @__PURE__ */ jsx129(
       SpansDataGrid,
       {
         clearingSpans: props.clearingSpans,
@@ -15392,9 +15570,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 Box6, Button as Button4, CircularProgress as CircularProgress2, Link, Typography as Typography4 } from "@mui/material";
+import { Alert as Alert3, AlertTitle, Box as Box7, 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 Fragment7, jsx as jsx130, jsxs as jsxs124 } from "react/jsx-runtime";
 var StatusMessage = ({
   error,
   localstackVersion,
@@ -15418,8 +15596,8 @@ var StatusMessage = ({
   };
   if (error instanceof AppInspectorNotFoundError) {
     const isBelowMinimum = localstackVersion !== void 0 && checkEmulatorVersion(localstackVersion) === "below-minimum";
-    return /* @__PURE__ */ jsx129(
-      Box6,
+    return /* @__PURE__ */ jsx130(
+      Box7,
       {
         sx: {
           alignItems: "center",
@@ -15429,18 +15607,18 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs123(
+        children: /* @__PURE__ */ jsxs124(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx129(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx130(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
-              /* @__PURE__ */ jsx129(Typography4, { sx: { mb: 2 }, variant: "body2", children: isBelowMinimum ? `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. You are running version ${localstackVersion}. Please update LocalStack.` : "App Inspector is not available in LocalStack. Ensure LocalStack is up-to-date." }),
-              /* @__PURE__ */ jsx129(Typography4, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx129("strong", { children: "Update LocalStack:" }) }),
-              /* @__PURE__ */ jsx129(
-                Box6,
+              /* @__PURE__ */ jsx130(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
+              /* @__PURE__ */ jsx130(Typography5, { sx: { mb: 2 }, variant: "body2", children: isBelowMinimum ? `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. You are running version ${localstackVersion}. Please update LocalStack.` : "App Inspector is not available in LocalStack. Ensure LocalStack is up-to-date." }),
+              /* @__PURE__ */ jsx130(Typography5, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx130("strong", { children: "Update LocalStack:" }) }),
+              /* @__PURE__ */ jsx130(
+                Box7,
                 {
                   component: "pre",
                   sx: {
@@ -15452,7 +15630,7 @@ var StatusMessage = ({
                   children: "localstack update docker-images"
                 }
               ),
-              /* @__PURE__ */ jsx129(Box6, { sx: { display: "flex", gap: 1, mt: 2 }, children: onRetry && /* @__PURE__ */ jsx129(
+              /* @__PURE__ */ jsx130(Box7, { sx: { display: "flex", gap: 1, mt: 2 }, children: onRetry && /* @__PURE__ */ jsx130(
                 Button4,
                 {
                   "aria-label": "Check App Inspector status again",
@@ -15469,8 +15647,8 @@ var StatusMessage = ({
     );
   }
   if (error instanceof ConnectionError) {
-    return /* @__PURE__ */ jsx129(
-      Box6,
+    return /* @__PURE__ */ jsx130(
+      Box7,
       {
         sx: {
           alignItems: "center",
@@ -15480,17 +15658,17 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs123(
+        children: /* @__PURE__ */ jsxs124(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx129(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx130(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
-              /* @__PURE__ */ jsxs123(Typography4, { sx: { mb: 2 }, variant: "body2", children: [
+              /* @__PURE__ */ jsx130(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
+              /* @__PURE__ */ jsxs124(Typography5, { sx: { mb: 2 }, variant: "body2", children: [
                 "Failed to connect to LocalStack. Ensure ",
-                /* @__PURE__ */ jsx129(
+                /* @__PURE__ */ jsx130(
                   Link,
                   {
                     href: "https://docs.localstack.cloud/aws/getting-started/installation/",
@@ -15501,9 +15679,9 @@ var StatusMessage = ({
                 ),
                 " is running and accessible."
               ] }),
-              /* @__PURE__ */ jsx129(Typography4, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx129("strong", { children: "Start LocalStack:" }) }),
-              /* @__PURE__ */ jsx129(
-                Box6,
+              /* @__PURE__ */ jsx130(Typography5, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx130("strong", { children: "Start LocalStack:" }) }),
+              /* @__PURE__ */ jsx130(
+                Box7,
                 {
                   component: "pre",
                   sx: {
@@ -15515,7 +15693,7 @@ var StatusMessage = ({
                   children: "localstack start"
                 }
               ),
-              onRetry && /* @__PURE__ */ jsx129(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx129(
+              onRetry && /* @__PURE__ */ jsx130(Box7, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx130(
                 Button4,
                 {
                   "aria-label": "Retry connection to LocalStack",
@@ -15531,8 +15709,8 @@ var StatusMessage = ({
     );
   }
   if (error instanceof AppInspectorDisabledError || status?.status === "DISABLED") {
-    return /* @__PURE__ */ jsx129(
-      Box6,
+    return /* @__PURE__ */ jsx130(
+      Box7,
       {
         sx: {
           alignItems: "center",
@@ -15542,17 +15720,17 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs123(
+        children: /* @__PURE__ */ jsxs124(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx129(InfoOutlined2, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx130(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(Typography4, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is not currently enabled in LocalStack. You can enable it now, or at startup." }),
-              /* @__PURE__ */ jsxs123(Box6, { sx: { display: "flex", gap: 1, mb: 2 }, children: [
-                onEnable && /* @__PURE__ */ jsx129(
+              /* @__PURE__ */ jsx130(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Is Not Enabled" }),
+              /* @__PURE__ */ jsx130(Typography5, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is not currently enabled in LocalStack. You can enable it now, or at startup." }),
+              /* @__PURE__ */ jsxs124(Box7, { sx: { display: "flex", gap: 1, mb: 2 }, children: [
+                onEnable && /* @__PURE__ */ jsx130(
                   Button4,
                   {
                     "aria-label": "Enable App Inspector Now",
@@ -15560,12 +15738,12 @@ var StatusMessage = ({
                     onClick: () => {
                       void handleEnable();
                     },
-                    startIcon: enabling ? /* @__PURE__ */ jsx129(CircularProgress2, { size: 16 }) : void 0,
+                    startIcon: enabling ? /* @__PURE__ */ jsx130(CircularProgress2, { size: 16 }) : void 0,
                     variant: "contained",
                     children: "Enable App Inspector Now"
                   }
                 ),
-                onRetry && /* @__PURE__ */ jsx129(
+                onRetry && /* @__PURE__ */ jsx130(
                   Button4,
                   {
                     "aria-label": "Check if App Inspector is enabled",
@@ -15576,9 +15754,9 @@ var StatusMessage = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx129(Typography4, { sx: { mb: 1 }, variant: "body2", children: "If you'd prefer to automatically enable App Inspector at start up, use:" }),
-              /* @__PURE__ */ jsx129(
-                Box6,
+              /* @__PURE__ */ jsx130(Typography5, { sx: { mb: 1 }, variant: "body2", children: "If you'd prefer to automatically enable App Inspector at start up, use:" }),
+              /* @__PURE__ */ jsx130(
+                Box7,
                 {
                   component: "pre",
                   sx: {
@@ -15590,7 +15768,7 @@ var StatusMessage = ({
                   children: "LOCALSTACK_APP_INSPECTOR=1 localstack start"
                 }
               ),
-              Boolean(enableError) && /* @__PURE__ */ jsx129(Typography4, { color: "error", sx: { mt: 1 }, variant: "body2", children: enableError })
+              Boolean(enableError) && /* @__PURE__ */ jsx130(Typography5, { color: "error", sx: { mt: 1 }, variant: "body2", children: enableError })
             ]
           }
         )
@@ -15598,8 +15776,8 @@ var StatusMessage = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx129(
-      Box6,
+    return /* @__PURE__ */ jsx130(
+      Box7,
       {
         sx: {
           alignItems: "center",
@@ -15609,16 +15787,16 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs123(
+        children: /* @__PURE__ */ jsxs124(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx129(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx130(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
-              /* @__PURE__ */ jsx129(Typography4, { sx: { mb: 2 }, variant: "body2", children: error.message }),
-              onRetry && /* @__PURE__ */ jsx129(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx129(
+              /* @__PURE__ */ jsx130(AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
+              /* @__PURE__ */ jsx130(Typography5, { sx: { mb: 2 }, variant: "body2", children: error.message }),
+              onRetry && /* @__PURE__ */ jsx130(Box7, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx130(
                 Button4,
                 {
                   "aria-label": "Retry operation",
@@ -15633,7 +15811,7 @@ var StatusMessage = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx129(Fragment6, {});
+  return /* @__PURE__ */ jsx130(Fragment7, {});
 };
 
 // src/hooks/status-provider.tsx
@@ -15682,7 +15860,7 @@ var useStatus = () => {
 };
 
 // src/hooks/status-provider.tsx
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "react/jsx-runtime";
 var AppInspectorStatusContext = createContext8(void 0);
 var StatusProvider = ({ children }) => {
   const { checking, checkStatus, error, status } = useStatus();
@@ -15693,7 +15871,7 @@ var StatusProvider = ({ children }) => {
     () => ({ checking, checkStatus, reportDisabled, status, statusError: error }),
     [checking, checkStatus, reportDisabled, status, error]
   );
-  return /* @__PURE__ */ jsx130(AppInspectorStatusContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx131(AppInspectorStatusContext.Provider, { value, children });
 };
 var useAppInspectorStatus = () => {
   const value = useContext15(AppInspectorStatusContext);
@@ -18112,7 +18290,7 @@ var useAppInspectorOpenAnalytics = () => {
 };
 
 // src/context.tsx
-import { Fragment as Fragment7, jsx as jsx131 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx132 } from "react/jsx-runtime";
 var AppInspectorContext = createContext9(void 0);
 var useAppInspector = () => {
   const context = useContext16(AppInspectorContext);
@@ -18123,7 +18301,7 @@ var useAppInspector = () => {
 };
 var AppInspectorAnalyticsBoundary = ({ children }) => {
   useAppInspectorOpenAnalytics();
-  return /* @__PURE__ */ jsx131(Fragment7, { children });
+  return /* @__PURE__ */ jsx132(Fragment8, { children });
 };
 var AppInspectorContextProvider = (props) => {
   const api = useMemo7(
@@ -18155,7 +18333,7 @@ var AppInspectorContextProvider = (props) => {
     }),
     [deploymentContainer, props.linkComponent, props.localstackEndpoint, resolveLink]
   );
-  return /* @__PURE__ */ jsx131(ApiProvider, { api, children: /* @__PURE__ */ jsx131(StatusProvider, { children: /* @__PURE__ */ jsx131(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx131(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
+  return /* @__PURE__ */ jsx132(ApiProvider, { api, children: /* @__PURE__ */ jsx132(StatusProvider, { children: /* @__PURE__ */ jsx132(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx132(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
 };
 
 // src/hooks/use-spans-ws.tsx
@@ -18442,102 +18620,16 @@ 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 Box20, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef17, 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 Box15, Chip as Chip3, Divider as Divider3, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Stack as Stack2, Switch, Typography as Typography10 } from "@mui/material";
+import { Alert as Alert4, Box as Box16, Chip as Chip3, Divider as Divider4, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Stack as Stack2, Switch, Typography as Typography11 } from "@mui/material";
 import { useMemo as useMemo12, useState as useState16 } from "react";
 
-// src/utils/iam-utils.ts
-function determinePermissionStatus(payload) {
-  if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {
-    return "explicitly_denied";
-  }
-  if (payload.is_allowed && payload.explicit_allow_count && payload.explicit_allow_count > 0) {
-    return "explicitly_allowed";
-  }
-  if (payload.is_allowed) {
-    return "implicitly_allowed";
-  }
-  return "implicitly_denied";
-}
-function formatPermissionStatus(status) {
-  switch (status) {
-    case "explicitly_allowed": {
-      return "Explicitly Allowed";
-    }
-    case "explicitly_denied": {
-      return "Explicitly Denied";
-    }
-    case "implicitly_allowed": {
-      return "Implicitly Allowed";
-    }
-    case "implicitly_denied": {
-      return "Implicitly Denied";
-    }
-  }
-}
-function getPermissionStatusColor(status) {
-  switch (status) {
-    case "explicitly_allowed":
-    case "implicitly_allowed": {
-      return "success.main";
-    }
-    case "explicitly_denied": {
-      return "error.main";
-    }
-    case "implicitly_denied": {
-      return "warning.main";
-    }
-  }
-}
-function parseIAMEvent(payloadString) {
-  try {
-    const payload = JSON.parse(payloadString);
-    const permission = determinePermissionStatus(payload);
-    const actions = [];
-    const resources = [];
-    if (payload.explicit_allows) {
-      for (const allow of payload.explicit_allows) {
-        if (!actions.includes(allow.action)) actions.push(allow.action);
-        if (!resources.includes(allow.resource)) resources.push(allow.resource);
-      }
-    }
-    if (payload.explicit_denies) {
-      for (const deny of payload.explicit_denies) {
-        if (!actions.includes(deny.action)) actions.push(deny.action);
-        if (!resources.includes(deny.resource)) resources.push(deny.resource);
-      }
-    }
-    if (payload.implicit_denies) {
-      for (const deny of payload.implicit_denies) {
-        if (!actions.includes(deny.action)) actions.push(deny.action);
-        if (!resources.includes(deny.resource)) resources.push(deny.resource);
-      }
-    }
-    return {
-      details: {
-        actions,
-        explicitAllows: payload.explicit_allow_count,
-        explicitDenies: payload.explicit_deny_count,
-        implicitDenies: payload.implicit_deny_count,
-        resources
-      },
-      operation: payload.operation,
-      permission,
-      principal: payload.principal_arn,
-      service: payload.service
-    };
-  } catch (error) {
-    console.error("Error parsing IAM event payload:", error);
-    return void 0;
-  }
-}
-
 // src/utils/event-utils.ts
 var iamEventParser = (eventName, attributes) => {
   if (attributes?.payload && typeof attributes.payload === "string") {
@@ -18648,69 +18740,69 @@ var getEventGroupsByType = (events) => {
 
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
-import { Box as Box12, IconButton as IconButton3, Typography as Typography7 } from "@mui/material";
+import { Box as Box13, IconButton as IconButton3, Typography as Typography8 } from "@mui/material";
 import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef15, useState as useState13 } from "react";
 
 // src/components/status-icon.tsx
-import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
-import { Box as Box7 } from "@mui/material";
-import { jsx as jsx132 } from "react/jsx-runtime";
-var StatusIcon = ({ errorLevel }) => {
+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";
+var StatusIcon2 = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ jsx132(Cancel, { sx: { color: "red" } });
+      return /* @__PURE__ */ jsx133(Cancel2, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ jsx132(Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ jsx133(Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ jsx132(RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ jsx133(RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ jsx132(Error2, { sx: { color: "orange" } });
+      return /* @__PURE__ */ jsx133(Error3, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ jsx132(CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ jsx133(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 Box8, Chip, Typography as Typography5 } 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(Typography5, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx133(Box8, { children: typeof content === "string" ? /* @__PURE__ */ jsx133(Typography5, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
+import { Box as Box9, Chip, Typography as Typography6 } from "@mui/material";
+import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
+var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs125(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ jsx134(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 })
 ] });
 var PermissionIcon = ({ status }) => {
   switch (status) {
     case "explicitly_allowed":
     case "implicitly_allowed": {
-      return /* @__PURE__ */ jsx133(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx134(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ jsx133(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx134(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ jsx133(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx134(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx133(Typography5, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
+    return /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx133(Typography5, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
+    return /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
   }
-  return /* @__PURE__ */ jsxs124(Box8, { children: [
-    /* @__PURE__ */ jsx133(Box8, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsxs125(Box9, { children: [
+    /* @__PURE__ */ jsx134(Box9, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx134(
       Chip,
       {
-        icon: /* @__PURE__ */ jsx133(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ jsx134(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -18720,36 +18812,36 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__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(
+    /* @__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(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx133(Box8, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx133(Typography5, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
+        content: /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx134(Typography6, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx133(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx134(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx133(Box8, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx133(Typography5, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
+        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)) }),
         label: "Resources"
       }
     ),
-    (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(Typography5, { 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(Typography5, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx133(Typography5, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
+    (parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ jsxs125(Box9, { sx: { mt: 1.5 }, children: [
+      /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ jsxs125(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx134(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.explicitDenies !== void 0 && /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx133(Typography5, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx133(Typography5, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsxs125(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.implicitDenies !== void 0 && /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx133(Typography5, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx133(Typography5, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsxs125(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" })
         ] })
       ] })
     ] })
@@ -18758,16 +18850,16 @@ var IAMEventDetail = ({ event }) => {
 
 // src/components/event-details/iam-permission-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box9, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
+import { Box as Box10, Chip as Chip2, IconButton as IconButton2, Typography as Typography7 } from "@mui/material";
 import { useMemo as useMemo8, useState as useState11 } from "react";
-import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx135, jsxs as jsxs126 } from "react/jsx-runtime";
 var getChipColors = (status) => ({
   backgroundColor: getPermissionStatusColor(status),
   color: "white"
 });
-var LabelValue = ({ label, value }) => /* @__PURE__ */ jsxs125(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(Typography6, { sx: { wordBreak: "break-all" }, variant: "caption", children: value })
+var LabelValue = ({ label, value }) => /* @__PURE__ */ jsxs126(Box10, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ jsx135(Typography7, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx135(Typography7, { sx: { wordBreak: "break-all" }, variant: "caption", children: value })
 ] });
 var IAMPermissionItem = ({ event }) => {
   const [isOpen, setIsOpen] = useState11(false);
@@ -18782,40 +18874,40 @@ var IAMPermissionItem = ({ event }) => {
     return null;
   }
   const { chipColors, parsedIAM } = parsedData;
-  return /* @__PURE__ */ jsxs125(Box9, { sx: { mb: 0.5 }, children: [
-    /* @__PURE__ */ jsxs125(Box9, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
-      /* @__PURE__ */ jsx134(IconButton2, { onClick: () => {
+  return /* @__PURE__ */ jsxs126(Box10, { sx: { mb: 0.5 }, children: [
+    /* @__PURE__ */ jsxs126(Box10, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
+      /* @__PURE__ */ jsx135(IconButton2, { onClick: () => {
         setIsOpen(!isOpen);
-      }, size: "small", sx: { p: 0 }, children: isOpen ? /* @__PURE__ */ jsx134(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx134(KeyboardArrowRight, { sx: { fontSize: 16 } }) }),
-      /* @__PURE__ */ jsx134(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }),
-      /* @__PURE__ */ jsxs125(Typography6, { color: "text.secondary", noWrap: true, sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, variant: "caption", children: [
+      }, size: "small", sx: { p: 0 }, children: isOpen ? /* @__PURE__ */ jsx135(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx135(KeyboardArrowRight, { sx: { fontSize: 16 } }) }),
+      /* @__PURE__ */ jsx135(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }),
+      /* @__PURE__ */ jsxs126(Typography7, { color: "text.secondary", noWrap: true, sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, variant: "caption", children: [
         parsedIAM.service,
         ":",
         parsedIAM.operation
       ] })
     ] }),
-    isOpen && /* @__PURE__ */ jsxs125(Box9, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: [
-      /* @__PURE__ */ jsx134(LabelValue, { label: "Principal", value: parsedIAM.principal }),
-      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs125(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: "Actions" }),
-        /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx134(Typography6, { sx: { display: "block" }, variant: "caption", children: action }, action)) })
+    isOpen && /* @__PURE__ */ jsxs126(Box10, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: [
+      /* @__PURE__ */ jsx135(LabelValue, { label: "Principal", value: parsedIAM.principal }),
+      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs126(Box10, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+        /* @__PURE__ */ jsx135(Typography7, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Actions" }),
+        /* @__PURE__ */ jsx135(Box10, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block" }, variant: "caption", children: action }, action)) })
       ] }),
-      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr" }, children: [
-        /* @__PURE__ */ jsx134(Typography6, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Resources" }),
-        /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx134(Typography6, { sx: { display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) })
+      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs126(Box10, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr" }, children: [
+        /* @__PURE__ */ jsx135(Typography7, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Resources" }),
+        /* @__PURE__ */ jsx135(Box10, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) })
       ] })
     ] })
   ] });
 };
-var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx134(Box9, { children: events.map((event) => /* @__PURE__ */ jsx134(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx135(Box10, { children: events.map((event) => /* @__PURE__ */ jsx135(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/payload-viewer.tsx
-import { Box as Box11, useTheme as useTheme3 } from "@mui/material";
+import { Box as Box12, useTheme as useTheme3 } from "@mui/material";
 
 // node_modules/@textea/json-viewer/dist/index.mjs
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
-import { jsx as jsx135, jsxs as jsxs126, Fragment as Fragment8 } from "react/jsx-runtime";
-import { Box as Box10, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
+import { jsx as jsx136, jsxs as jsxs127, Fragment as Fragment9 } 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 useContext17, useState as useState12, useRef as useRef14, useCallback as useCallback10, useMemo as useMemo9, useEffect as useEffect17, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
@@ -19169,7 +19261,7 @@ function useInspect(path, value, nestedIndex) {
     setInspect
   ];
 }
-var DataBox = (props) => /* @__PURE__ */ jsx135(Box10, {
+var DataBox = (props) => /* @__PURE__ */ jsx136(Box11, {
   component: "div",
   ...props,
   sx: {
@@ -19180,7 +19272,7 @@ var DataBox = (props) => /* @__PURE__ */ jsx135(Box10, {
 var DataTypeLabel = (param) => {
   let { dataType, enable = true } = param;
   if (!enable) return null;
-  return /* @__PURE__ */ jsx135(DataBox, {
+  return /* @__PURE__ */ jsx136(DataBox, {
     className: "data-type-label",
     sx: {
       mx: 0.5,
@@ -19198,18 +19290,18 @@ function defineEasyType(param) {
     const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
     const onSelect = useJsonViewerStore((store) => store.onSelect);
-    return /* @__PURE__ */ jsxs126(DataBox, {
+    return /* @__PURE__ */ jsxs127(DataBox, {
       onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(props.path, props.value),
       sx: {
         color: color2
       },
       children: [
-        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx135(DataTypeLabel, {
+        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx136(DataTypeLabel, {
           dataType: type
         }),
-        /* @__PURE__ */ jsx135(DataBox, {
+        /* @__PURE__ */ jsx136(DataBox, {
           className: "".concat(type, "-value"),
-          children: /* @__PURE__ */ jsx135(Render, {
+          children: /* @__PURE__ */ jsx136(Render, {
             path: props.path,
             inspect: props.inspect,
             setInspect: props.setInspect,
@@ -19249,7 +19341,7 @@ function defineEasyType(param) {
     }, [
       setValue
     ]);
-    return /* @__PURE__ */ jsx135(InputBase, {
+    return /* @__PURE__ */ jsx136(InputBase, {
       autoFocus: true,
       value,
       onChange: handleChange,
@@ -19289,7 +19381,7 @@ var booleanType = defineEasyType({
   },
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment8, {
+    return /* @__PURE__ */ jsx136(Fragment9, {
       children: value ? "true" : "false"
     });
   }
@@ -19308,7 +19400,7 @@ var dateType = defineEasyType({
   colorKey: "base0D",
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment8, {
+    return /* @__PURE__ */ jsx136(Fragment9, {
       children: value.toLocaleTimeString("en-us", displayOptions)
     });
   }
@@ -19337,12 +19429,12 @@ var functionName = (func) => {
 var lb = "{";
 var rb = "}";
 var PreFunctionType = (props) => {
-  return /* @__PURE__ */ jsxs126(NoSsr, {
+  return /* @__PURE__ */ jsxs127(NoSsr, {
     children: [
-      /* @__PURE__ */ jsx135(DataTypeLabel, {
+      /* @__PURE__ */ jsx136(DataTypeLabel, {
         dataType: "function"
       }),
-      /* @__PURE__ */ jsxs126(Box10, {
+      /* @__PURE__ */ jsxs127(Box11, {
         component: "span",
         className: "data-function-start",
         sx: {
@@ -19358,8 +19450,8 @@ var PreFunctionType = (props) => {
   });
 };
 var PostFunctionType = () => {
-  return /* @__PURE__ */ jsx135(NoSsr, {
-    children: /* @__PURE__ */ jsx135(Box10, {
+  return /* @__PURE__ */ jsx136(NoSsr, {
+    children: /* @__PURE__ */ jsx136(Box11, {
       component: "span",
       className: "data-function-end",
       children: rb
@@ -19368,15 +19460,15 @@ var PostFunctionType = () => {
 };
 var FunctionType = (props) => {
   const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
-  return /* @__PURE__ */ jsx135(NoSsr, {
-    children: /* @__PURE__ */ jsx135(Box10, {
+  return /* @__PURE__ */ jsx136(NoSsr, {
+    children: /* @__PURE__ */ jsx136(Box11, {
       className: "data-function",
       sx: {
         display: props.inspect ? "block" : "inline-block",
         pl: props.inspect ? 2 : 0,
         color: functionColor
       },
-      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx135(Box10, {
+      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx136(Box11, {
         component: "span",
         className: "data-function-body",
         onClick: () => props.setInspect(true),
@@ -19404,7 +19496,7 @@ var nullType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx135(Box10, {
+    return /* @__PURE__ */ jsx136(Box11, {
       sx: {
         fontSize: "0.8rem",
         backgroundColor,
@@ -19427,7 +19519,7 @@ var nanType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx135(Box10, {
+    return /* @__PURE__ */ jsx136(Box11, {
       sx: {
         backgroundColor,
         fontSize: "0.8rem",
@@ -19447,7 +19539,7 @@ var floatType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment8, {
+    return /* @__PURE__ */ jsx136(Fragment9, {
       children: value
     });
   }
@@ -19461,7 +19553,7 @@ var intType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment8, {
+    return /* @__PURE__ */ jsx136(Fragment9, {
       children: value
     });
   }
@@ -19474,16 +19566,16 @@ var bigIntType = defineEasyType({
   deserialize: (value) => BigInt(value.replace(/\D/g, "")),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment8, {
+    return /* @__PURE__ */ jsx136(Fragment9, {
       children: "".concat(value, "n")
     });
   }
 });
 var BaseIcon = (param) => {
   let { d: d2, ...props } = param;
-  return /* @__PURE__ */ jsx135(SvgIcon, {
+  return /* @__PURE__ */ jsx136(SvgIcon, {
     ...props,
-    children: /* @__PURE__ */ jsx135("path", {
+    children: /* @__PURE__ */ jsx136("path", {
       d: d2
     })
   });
@@ -19498,55 +19590,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__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: AddBox,
     ...props
   });
 };
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: Check,
     ...props
   });
 };
 var ChevronRightIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: ChevronRight,
     ...props
   });
 };
 var CircularArrowsIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: CircularArrows,
     ...props
   });
 };
 var CloseIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: Close,
     ...props
   });
 };
 var ContentCopyIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: ContentCopy,
     ...props
   });
 };
 var EditIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: Edit,
     ...props
   });
 };
 var ExpandMoreIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: ExpandMore,
     ...props
   });
 };
 var DeleteIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: Delete,
     ...props
   });
@@ -19585,7 +19677,7 @@ var PreObjectType = (props) => {
     props.value
   ]);
   const isTrap = useIsCycleReference(props.path, props.value);
-  return /* @__PURE__ */ jsxs126(Box10, {
+  return /* @__PURE__ */ jsxs127(Box11, {
     component: "span",
     className: "data-object-start",
     sx: {
@@ -19593,7 +19685,7 @@ var PreObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayLb : objectLb,
-      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx135(Box10, {
+      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx136(Box11, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -19603,16 +19695,16 @@ var PreObjectType = (props) => {
         },
         children: sizeOfValue
       }),
-      isTrap && !props.inspect && /* @__PURE__ */ jsxs126(Fragment8, {
+      isTrap && !props.inspect && /* @__PURE__ */ jsxs127(Fragment9, {
         children: [
-          /* @__PURE__ */ jsx135(CircularArrowsIcon, {
+          /* @__PURE__ */ jsx136(CircularArrowsIcon, {
             sx: {
               fontSize: 12,
               color: textColor,
               mx: 0.5
             }
           }),
-          /* @__PURE__ */ jsx135(DataBox, {
+          /* @__PURE__ */ jsx136(DataBox, {
             sx: {
               cursor: "pointer",
               userSelect: "none"
@@ -19642,7 +19734,7 @@ var PostObjectType = (props) => {
     props.path,
     props.value
   ]);
-  return /* @__PURE__ */ jsxs126(Box10, {
+  return /* @__PURE__ */ jsxs127(Box11, {
     component: "span",
     className: "data-object-end",
     sx: {
@@ -19653,7 +19745,7 @@ var PostObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayRb : objectRb,
-      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx135(Box10, {
+      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx136(Box11, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -19693,7 +19785,7 @@ var ObjectType = (props) => {
             ...props.path,
             key
           ];
-          elements3.push(/* @__PURE__ */ jsx135(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
             path,
             value: value2,
             prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
@@ -19709,7 +19801,7 @@ var ObjectType = (props) => {
         while (true) {
           const nextResult = iterator2.next();
           var _nextResult_done;
-          elements3.push(/* @__PURE__ */ jsx135(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
             path: [
               ...props.path,
               "iterator:".concat(count2)
@@ -19737,7 +19829,7 @@ var ObjectType = (props) => {
             ...props.path,
             index
           ];
-          return /* @__PURE__ */ jsx135(DataKeyPair, {
+          return /* @__PURE__ */ jsx136(DataKeyPair, {
             path,
             value: value2,
             prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
@@ -19746,7 +19838,7 @@ var ObjectType = (props) => {
         });
         if (value.length > displayLength) {
           const rest = value.length - displayLength;
-          elements4.push(/* @__PURE__ */ jsxs126(DataBox, {
+          elements4.push(/* @__PURE__ */ jsxs127(DataBox, {
             sx: {
               cursor: "pointer",
               lineHeight: 1.5,
@@ -19769,7 +19861,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__ */ jsx135(DataKeyPair, {
+        return /* @__PURE__ */ jsx136(DataKeyPair, {
           path: props.path,
           value: list,
           nestedIndex: index,
@@ -19796,7 +19888,7 @@ var ObjectType = (props) => {
         ...props.path,
         key
       ];
-      return /* @__PURE__ */ jsx135(DataKeyPair, {
+      return /* @__PURE__ */ jsx136(DataKeyPair, {
         path,
         value: value2,
         prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
@@ -19805,7 +19897,7 @@ var ObjectType = (props) => {
     });
     if (entries.length > displayLength) {
       const rest = entries.length - displayLength;
-      elements2.push(/* @__PURE__ */ jsxs126(DataBox, {
+      elements2.push(/* @__PURE__ */ jsxs127(DataBox, {
         sx: {
           cursor: "pointer",
           lineHeight: 1.5,
@@ -19843,7 +19935,7 @@ var ObjectType = (props) => {
   if (isEmptyValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx135(Box10, {
+  return /* @__PURE__ */ jsx136(Box11, {
     className: "data-object",
     sx: {
       display: props.inspect ? "block" : "inline-block",
@@ -19852,7 +19944,7 @@ var ObjectType = (props) => {
       color: keyColor,
       borderLeft: props.inspect ? "1px solid ".concat(borderColor) : "none"
     },
-    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx135(Box10, {
+    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx136(Box11, {
       component: "span",
       className: "data-object-body",
       onClick: () => props.setInspect(true),
@@ -19884,7 +19976,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(Box10, {
+    return /* @__PURE__ */ jsxs127(Box11, {
       component: "span",
       sx: {
         overflowWrap: "anywhere",
@@ -19902,7 +19994,7 @@ var stringType = defineEasyType({
       children: [
         '"',
         value,
-        hasRest && !showRest && /* @__PURE__ */ jsx135(Box10, {
+        hasRest && !showRest && /* @__PURE__ */ jsx136(Box11, {
           component: "span",
           sx: {
             padding: 0.5
@@ -19921,7 +20013,7 @@ var undefinedType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx135(Box10, {
+    return /* @__PURE__ */ jsx136(Box11, {
       sx: {
         fontSize: "0.7rem",
         backgroundColor,
@@ -20002,7 +20094,7 @@ function useTypeComponents(value, path) {
     registry
   ]);
 }
-var IconBox = (props) => /* @__PURE__ */ jsx135(Box10, {
+var IconBox = (props) => /* @__PURE__ */ jsx136(Box11, {
   component: "span",
   ...props,
   sx: {
@@ -20188,18 +20280,18 @@ var DataKeyPair = (props) => {
   ]);
   const actionIcons = useMemo9(() => {
     if (editing) {
-      return /* @__PURE__ */ jsxs126(Fragment8, {
+      return /* @__PURE__ */ jsxs127(Fragment9, {
         children: [
-          /* @__PURE__ */ jsx135(IconBox, {
-            children: /* @__PURE__ */ jsx135(CloseIcon, {
+          /* @__PURE__ */ jsx136(IconBox, {
+            children: /* @__PURE__ */ jsx136(CloseIcon, {
               sx: {
                 fontSize: ".8rem"
               },
               onClick: abortEditing
             })
           }),
-          /* @__PURE__ */ jsx135(IconBox, {
-            children: /* @__PURE__ */ jsx135(CheckIcon, {
+          /* @__PURE__ */ jsx136(IconBox, {
+            children: /* @__PURE__ */ jsx136(CheckIcon, {
               sx: {
                 fontSize: ".8rem"
               },
@@ -20209,9 +20301,9 @@ var DataKeyPair = (props) => {
         ]
       });
     }
-    return /* @__PURE__ */ jsxs126(Fragment8, {
+    return /* @__PURE__ */ jsxs127(Fragment9, {
       children: [
-        enableClipboard && /* @__PURE__ */ jsx135(IconBox, {
+        enableClipboard && /* @__PURE__ */ jsx136(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             try {
@@ -20220,41 +20312,41 @@ var DataKeyPair = (props) => {
               console.error(e2);
             }
           },
-          children: copied ? /* @__PURE__ */ jsx135(CheckIcon, {
+          children: copied ? /* @__PURE__ */ jsx136(CheckIcon, {
             sx: {
               fontSize: ".8rem"
             }
-          }) : /* @__PURE__ */ jsx135(ContentCopyIcon, {
+          }) : /* @__PURE__ */ jsx136(ContentCopyIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx135(IconBox, {
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx136(IconBox, {
           onClick: startEditing,
-          children: /* @__PURE__ */ jsx135(EditIcon, {
+          children: /* @__PURE__ */ jsx136(EditIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableAdd && /* @__PURE__ */ jsx135(IconBox, {
+        enableAdd && /* @__PURE__ */ jsx136(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
           },
-          children: /* @__PURE__ */ jsx135(AddBoxIcon, {
+          children: /* @__PURE__ */ jsx136(AddBoxIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableDelete && /* @__PURE__ */ jsx135(IconBox, {
+        enableDelete && /* @__PURE__ */ jsx136(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
           },
-          children: /* @__PURE__ */ jsx135(DeleteIcon, {
+          children: /* @__PURE__ */ jsx136(DeleteIcon, {
             sx: {
               fontSize: ".9rem"
             }
@@ -20302,7 +20394,7 @@ var DataKeyPair = (props) => {
     prevValue,
     nestedIndex
   ]);
-  return /* @__PURE__ */ jsxs126(Box10, {
+  return /* @__PURE__ */ jsxs127(Box11, {
     className: "data-key-pair",
     "data-testid": "data-key-pair" + path.join("."),
     sx: {
@@ -20314,7 +20406,7 @@ var DataKeyPair = (props) => {
       nestedIndex
     ]),
     children: [
-      /* @__PURE__ */ jsxs126(DataBox, {
+      /* @__PURE__ */ jsxs127(DataBox, {
         component: "span",
         className: "data-key",
         sx: {
@@ -20335,7 +20427,7 @@ var DataKeyPair = (props) => {
           setInspect
         ]),
         children: [
-          expandable ? inspect ? /* @__PURE__ */ jsx135(ExpandMoreIcon, {
+          expandable ? inspect ? /* @__PURE__ */ jsx136(ExpandMoreIcon, {
             className: "data-key-toggle-expanded",
             sx: {
               fontSize: ".8rem",
@@ -20343,7 +20435,7 @@ var DataKeyPair = (props) => {
                 cursor: "pointer"
               }
             }
-          }) : /* @__PURE__ */ jsx135(ChevronRightIcon, {
+          }) : /* @__PURE__ */ jsx136(ChevronRightIcon, {
             className: "data-key-toggle-collapsed",
             sx: {
               fontSize: ".8rem",
@@ -20352,44 +20444,44 @@ var DataKeyPair = (props) => {
               }
             }
           }) : null,
-          /* @__PURE__ */ jsx135(Box10, {
+          /* @__PURE__ */ jsx136(Box11, {
             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__ */ jsxs127(Fragment9, {
               children: [
                 '"',
                 rootName,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx135(Fragment8, {
+            }) : /* @__PURE__ */ jsx136(Fragment9, {
               children: rootName
-            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx135(KeyRenderer, {
+            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx136(KeyRenderer, {
               ...downstreamProps
-            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx135(Box10, {
+            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx136(Box11, {
               component: "span",
               style: {
                 color: numberKeyColor,
                 userSelect: isNumberKey ? "none" : "auto"
               },
               children: key
-            }) : quotesOnKeys ? /* @__PURE__ */ jsxs126(Fragment8, {
+            }) : quotesOnKeys ? /* @__PURE__ */ jsxs127(Fragment9, {
               children: [
                 '"',
                 key,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx135(Fragment8, {
+            }) : /* @__PURE__ */ jsx136(Fragment9, {
               children: key
             }))
           }),
-          isRoot ? rootName !== false && /* @__PURE__ */ jsx135(DataBox, {
+          isRoot ? rootName !== false && /* @__PURE__ */ jsx136(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5
             },
             children: ":"
-          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx135(DataBox, {
+          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx136(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5,
@@ -20400,29 +20492,29 @@ var DataKeyPair = (props) => {
             },
             children: ":"
           }),
-          PreComponent && /* @__PURE__ */ jsx135(PreComponent, {
+          PreComponent && /* @__PURE__ */ jsx136(PreComponent, {
             ...downstreamProps
           }),
           isHover && expandable && inspect && actionIcons
         ]
       }),
-      editing && editable ? Editor && /* @__PURE__ */ jsx135(Editor, {
+      editing && editable ? Editor && /* @__PURE__ */ jsx136(Editor, {
         path,
         value: tempValue,
         setValue: setTempValue,
         abortEditing,
         commitEditing
-      }) : Component ? /* @__PURE__ */ jsx135(Component, {
+      }) : Component ? /* @__PURE__ */ jsx136(Component, {
         ...downstreamProps
-      }) : /* @__PURE__ */ jsx135(Box10, {
+      }) : /* @__PURE__ */ jsx136(Box11, {
         component: "span",
         className: "data-value-fallback",
         children: "fallback: ".concat(value)
       }),
-      PostComponent && /* @__PURE__ */ jsx135(PostComponent, {
+      PostComponent && /* @__PURE__ */ jsx136(PostComponent, {
         ...downstreamProps
       }),
-      !last && displayComma && /* @__PURE__ */ jsx135(DataBox, {
+      !last && displayComma && /* @__PURE__ */ jsx136(DataBox, {
         children: ","
       }),
       isHover && expandable && !inspect && actionIcons,
@@ -20542,7 +20634,7 @@ var JsonViewerInner = (props) => {
   const onMouseLeave = useCallback10(() => setHover(null), [
     setHover
   ]);
-  return /* @__PURE__ */ jsx135(Paper2, {
+  return /* @__PURE__ */ jsx136(Paper2, {
     elevation: 0,
     className: clsx(themeCls, props.className),
     style: props.style,
@@ -20553,7 +20645,7 @@ var JsonViewerInner = (props) => {
       ...props.sx
     },
     onMouseLeave,
-    children: /* @__PURE__ */ jsx135(DataKeyPair, {
+    children: /* @__PURE__ */ jsx136(DataKeyPair, {
       value,
       prevValue,
       path: emptyPath,
@@ -20605,13 +20697,13 @@ var JsonViewer = function JsonViewer2(props) {
   };
   const jsonViewerStore = useMemo9(() => createJsonViewerStore(props), []);
   const typeRegistryStore = useMemo9(() => createTypeRegistryStore(), []);
-  return /* @__PURE__ */ jsx135(ThemeProvider, {
+  return /* @__PURE__ */ jsx136(ThemeProvider, {
     theme,
-    children: /* @__PURE__ */ jsx135(TypeRegistryStoreContext.Provider, {
+    children: /* @__PURE__ */ jsx136(TypeRegistryStoreContext.Provider, {
       value: typeRegistryStore,
-      children: /* @__PURE__ */ jsx135(JsonViewerStoreContext.Provider, {
+      children: /* @__PURE__ */ jsx136(JsonViewerStoreContext.Provider, {
         value: jsonViewerStore,
-        children: /* @__PURE__ */ jsx135(JsonViewerInner, {
+        children: /* @__PURE__ */ jsx136(JsonViewerInner, {
           ...mixedProps
         })
       })
@@ -20621,7 +20713,7 @@ var JsonViewer = function JsonViewer2(props) {
 
 // src/components/event-details/payload-viewer.tsx
 import { memo as memo10 } from "react";
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 function tryParseJson(value) {
   if (typeof value !== "string") {
     return value;
@@ -20634,7 +20726,7 @@ function tryParseJson(value) {
 }
 var PayloadViewer = memo10(({ sx, testId, value }) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ jsx136(Box11, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx137(Box12, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ jsx137(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -20648,10 +20740,10 @@ var PayloadViewer = memo10(({ sx, testId, value }) => {
 });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment9, 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(Typography7, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx137(Box12, { children: typeof content === "string" ? /* @__PURE__ */ jsx137(Typography7, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
+import { Fragment as Fragment10, jsx as jsx138, jsxs as jsxs128 } from "react/jsx-runtime";
+var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs128(Box13, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ jsx138(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 })
 ] });
 var EventMessage = ({ event }) => {
   const [isOpen, setIsOpen] = useState13(false);
@@ -20683,9 +20775,9 @@ var EventMessage = ({ event }) => {
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
-  return /* @__PURE__ */ jsxs127(Box12, { sx: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs127(Box12, { sx: { alignItems: "center", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsxs128(Box13, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs128(Box13, { sx: { alignItems: "center", display: "flex" }, children: [
+      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx138(
         IconButton3,
         {
           onClick: () => {
@@ -20693,11 +20785,11 @@ var EventMessage = ({ event }) => {
           },
           size: "small",
           sx: { mr: 1, p: 0 },
-          children: isOpen ? /* @__PURE__ */ jsx137(KeyboardArrowDown2, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx137(KeyboardArrowRight2, { sx: { fontSize: 16 } })
+          children: isOpen ? /* @__PURE__ */ jsx138(KeyboardArrowDown2, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx138(KeyboardArrowRight2, { sx: { fontSize: 16 } })
         }
       ),
-      /* @__PURE__ */ jsx137(
-        Typography7,
+      /* @__PURE__ */ jsx138(
+        Typography8,
         {
           ref: textReference,
           sx: {
@@ -20714,12 +20806,12 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    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(Fragment9, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx137(DetailRow2, { content: parsedMessage.message, label: "Message" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx137(
+    isOpen && /* @__PURE__ */ jsx138(Box13, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx138(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs128(Fragment10, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx138(DetailRow2, { content: parsedMessage.message, label: "Message" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx138(
         DetailRow2,
         {
-          content: /* @__PURE__ */ jsx137(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
+          content: /* @__PURE__ */ jsx138(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
           label: "Details"
         }
       )
@@ -20751,15 +20843,15 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ jsx137(IAMPermissionDetail, { events });
+    return /* @__PURE__ */ jsx138(IAMPermissionDetail, { events });
   }
   const eventLevel = getEventLevelFromGroup(type);
-  return /* @__PURE__ */ jsxs127(Box12, { children: [
-    /* @__PURE__ */ jsxs127(Box12, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsx137(StatusIcon, { errorLevel: eventLevel }),
-      /* @__PURE__ */ jsx137(Typography7, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
+  return /* @__PURE__ */ jsxs128(Box13, { children: [
+    /* @__PURE__ */ jsxs128(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 })
     ] }),
-    /* @__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}`)) })
+    /* @__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}`)) })
   ] });
 };
 
@@ -25141,16 +25233,16 @@ var ProtocolLib = class {
     if (output !== void 0 && queryErrorHeader != null) {
       const [Code, Type] = queryErrorHeader.split(";");
       const entries = Object.entries(output);
-      const Error3 = {
+      const Error4 = {
         Code,
         Type
       };
-      Object.assign(output, Error3);
+      Object.assign(output, Error4);
       for (const [k2, v2] of entries) {
-        Error3[k2 === "message" ? "Message" : k2] = v2;
+        Error4[k2 === "message" ? "Message" : k2] = v2;
       }
-      delete Error3.__type;
-      output.Error = Error3;
+      delete Error4.__type;
+      output.Error = Error4;
     }
   }
   queryCompatOutput(queryCompatErrorData, errorData) {
@@ -30450,9 +30542,9 @@ var QueryStatus = {
 };
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
-import { Box as Box13, CircularProgress as CircularProgress3, Stack, Typography as Typography8 } from "@mui/material";
+import { Box as Box14, CircularProgress as CircularProgress3, Stack, Typography as Typography9 } from "@mui/material";
 import { useEffect as useEffect19, useMemo as useMemo11, useRef as useRef16, useState as useState14 } from "react";
-import { jsx as jsx138, jsxs as jsxs128 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
@@ -30542,30 +30634,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(Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
-      /* @__PURE__ */ jsx138(CircularProgress3, { size: 14 }),
-      /* @__PURE__ */ jsx138(Typography8, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
+    return /* @__PURE__ */ jsxs129(Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx139(CircularProgress3, { size: 14 }),
+      /* @__PURE__ */ jsx139(Typography9, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
     ] });
   }
   if (error !== void 0) {
-    return /* @__PURE__ */ jsx138(Typography8, { color: "error", variant: "body2", children: error.message });
+    return /* @__PURE__ */ jsx139(Typography9, { color: "error", variant: "body2", children: error.message });
   }
   if (logs.length === 0) {
-    return /* @__PURE__ */ jsx138(Typography8, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
+    return /* @__PURE__ */ jsx139(Typography9, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
   }
-  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(Typography8, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
+  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)) }) });
 };
 
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
-import { Box as Box14, Typography as Typography9 } from "@mui/material";
+import { Box as Box15, Typography as Typography10 } from "@mui/material";
 import { useState as useState15 } from "react";
-import { jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
   const [isOpen, setIsOpen] = useState15(initialOpen);
-  return /* @__PURE__ */ jsxs129(Box14, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ jsxs129(
-      Box14,
+  return /* @__PURE__ */ jsxs130(Box15, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ jsxs130(
+      Box15,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -30578,8 +30670,8 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
           mb: 1
         },
         children: [
-          /* @__PURE__ */ jsxs129(
-            Box14,
+          /* @__PURE__ */ jsxs130(
+            Box15,
             {
               role: "button",
               sx: {
@@ -30588,23 +30680,23 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
                 gap: 1
               },
               children: [
-                /* @__PURE__ */ jsx139(Typography9, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-                isOpen ? /* @__PURE__ */ jsx139(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx139(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
+                /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+                isOpen ? /* @__PURE__ */ jsx140(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx140(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
               ]
             }
           ),
-          action !== false && /* @__PURE__ */ jsx139(Box14, { onClick: (event) => {
+          action !== false && /* @__PURE__ */ jsx140(Box15, { onClick: (event) => {
             event.stopPropagation();
           }, children: action })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx139(Box14, { children })
+    isOpen && /* @__PURE__ */ jsx140(Box15, { children })
   ] });
 };
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment10, jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
 var checkIsLambdaInvoke = (span) => {
   if (span.service_name !== "lambda") {
     return false;
@@ -30625,7 +30717,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   );
   const [parseNestedJson, setParseNestedJson] = useState16(true);
   if (!selectedEvent) {
-    return /* @__PURE__ */ jsx140(Box15, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx140(Typography10, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ jsx141(Box16, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx141(Typography11, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
   const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
   const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
@@ -30648,9 +30740,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(Box15, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs130(
-      Box15,
+  return /* @__PURE__ */ jsxs131(Box16, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs131(
+      Box16,
       {
         sx: {
           alignItems: "center",
@@ -30662,63 +30754,63 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           py: 1
         },
         children: [
-          /* @__PURE__ */ jsx140(Box15, { children: /* @__PURE__ */ jsx140(Typography10, { 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, { 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, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 2, children: [
-      /* @__PURE__ */ jsx140(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs130(Stack2, { "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(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-            /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) })
+    /* @__PURE__ */ jsx141(Box16, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs131(Stack2, { spacing: 2, children: [
+      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs131(Stack2, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
+        /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) })
           ] }),
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
-            /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name })
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
+            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-            /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, variant: "body2", children: selectedEvent.resource_name })
+        /* @__PURE__ */ jsxs131(Box16, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, variant: "body2", children: selectedEvent.resource_name })
           ] }),
-          Boolean(cfnResourceType) && /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
-            /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType })
+          Boolean(cfnResourceType) && /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
+            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType })
           ] })
         ] }),
-        Boolean(resourceArn) && /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, variant: "body2", children: resourceArn })
+        Boolean(resourceArn) && /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
+          /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, variant: "body2", children: resourceArn })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
-            /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id })
+        /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
+            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id })
           ] }),
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-            /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region })
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-            /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+        /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+            /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
           ] }),
-          duration !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-            /* @__PURE__ */ jsxs130(Typography10, { "data-testid": EVENT_DETAILS_DURATION_TEST_ID, variant: "body2", children: [
+          duration !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+            /* @__PURE__ */ jsxs131(Typography11, { "data-testid": EVENT_DETAILS_DURATION_TEST_ID, variant: "body2", children: [
               duration,
               "ms"
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
-          /* @__PURE__ */ jsx140(Stack2, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
+          /* @__PURE__ */ jsx141(Stack2, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx141(
             Chip3,
             {
               color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
@@ -30729,50 +30821,50 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx140(Divider3, {}),
-      /* @__PURE__ */ jsxs130(ToggleSection, { headline: "Permissions", children: [
-        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(Typography10, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
-        eventGroups.permissions && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, 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" })
+      /* @__PURE__ */ jsx141(Divider4, {}),
+      /* @__PURE__ */ jsxs131(ToggleSection, { headline: "Permissions", children: [
+        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ jsx141(Alert4, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
+        !selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx141(Typography11, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
+        eventGroups.permissions && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, 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" })
       ] }),
-      hasPayloads && /* @__PURE__ */ jsxs130(Fragment10, { children: [
-        /* @__PURE__ */ jsx140(Divider3, {}),
-        /* @__PURE__ */ jsx140(
+      hasPayloads && /* @__PURE__ */ jsxs131(Fragment11, { children: [
+        /* @__PURE__ */ jsx141(Divider4, {}),
+        /* @__PURE__ */ jsx141(
           ToggleSection,
           {
-            action: /* @__PURE__ */ jsx140(
+            action: /* @__PURE__ */ jsx141(
               FormControlLabel2,
               {
-                control: /* @__PURE__ */ jsx140(Switch, { checked: !parseNestedJson, onChange: (event) => {
+                control: /* @__PURE__ */ jsx141(Switch, { checked: !parseNestedJson, onChange: (event) => {
                   setParseNestedJson(!event.target.checked);
                 }, size: "small" }),
-                label: /* @__PURE__ */ jsx140(Typography10, { variant: "caption", children: "View raw data" }),
+                label: /* @__PURE__ */ jsx141(Typography11, { variant: "caption", children: "View raw data" }),
                 sx: { mr: 0 }
               }
             ),
             headline: "Payloads",
-            children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 2, children: [
-              requestPayload !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
-                /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
-                /* @__PURE__ */ jsx140(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
+            children: /* @__PURE__ */ jsxs131(Stack2, { spacing: 2, children: [
+              requestPayload !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
+                /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
+                /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
-              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ jsxs130(Box15, { children: [
-                /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, 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 })
+              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ jsxs131(Box16, { children: [
+                /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, 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 })
               ] }),
-              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
-                /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
-                /* @__PURE__ */ jsx140(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
+              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
+                /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
+                /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
               ] })
             ] })
           }
         )
       ] }),
-      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs130(Fragment10, { children: [
-        /* @__PURE__ */ jsx140(Divider3, {}),
-        /* @__PURE__ */ jsx140(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx140(
+      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs131(Fragment11, { children: [
+        /* @__PURE__ */ jsx141(Divider4, {}),
+        /* @__PURE__ */ jsx141(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx141(
           LambdaInvokeLogsSection,
           {
             endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
@@ -30783,21 +30875,21 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx140(Divider3, {}),
-      /* @__PURE__ */ jsx140(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id })
+      /* @__PURE__ */ jsx141(Divider4, {}),
+      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs131(Stack2, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id })
+        /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id })
         ] }),
-        requestId !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          /* @__PURE__ */ jsx140(Typography10, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId })
+        requestId !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
+          /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId })
         ] }),
-        eventGroups.info && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
+        eventGroups.info && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
       ] }) })
     ] }) })
   ] });
@@ -30810,27 +30902,27 @@ import { Background, MarkerType, Position as Position2, ReactFlow, useEdgesState
 import { useEffect as useEffect20 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Box as Box17, Divider as Divider4, Stack as Stack3, Typography as Typography11, useTheme as useTheme4 } from "@mui/material";
+import { Box as Box18, Divider as Divider5, Stack as Stack3, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
 import { memo as memo11 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
-import { Box as Box16, Tooltip as Tooltip4 } from "@mui/material";
+import { Box as Box17, Tooltip as Tooltip5 } from "@mui/material";
 import { useMemo as useMemo13 } from "react";
-import { jsx as jsx141 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
   const icon = useMemo13(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ jsx141(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx142(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ jsx141(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx142(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ jsx141(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx142(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
@@ -30847,8 +30939,8 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ jsx141(Tooltip4, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx141(
-    Box16,
+  return /* @__PURE__ */ jsx142(Tooltip5, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx142(
+    Box17,
     {
       sx: {
         alignItems: "center",
@@ -30867,7 +30959,7 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-import { jsx as jsx142, jsxs as jsxs131 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs132 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
@@ -30876,8 +30968,8 @@ var handleStyle = {
 var ServiceNode = memo11(({ data, selected }) => {
   const theme = useTheme4();
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ jsxs131(
-    Box17,
+  return /* @__PURE__ */ jsxs132(
+    Box18,
     {
       "data-testid": SERVICE_NODE_TEST_ID,
       role: "button",
@@ -30899,19 +30991,19 @@ var ServiceNode = memo11(({ data, selected }) => {
       },
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx142(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-        /* @__PURE__ */ jsx142(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
-        /* @__PURE__ */ jsxs131(
+        /* @__PURE__ */ jsx143(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+        /* @__PURE__ */ jsx143(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+        /* @__PURE__ */ jsxs132(
           Stack3,
           {
             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: data.event.service_name, size: "medium" }) }),
-              /* @__PURE__ */ jsxs131(Stack3, { sx: { minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx142(
-                  Typography11,
+              /* @__PURE__ */ jsx143(Box18, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx143(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
+              /* @__PURE__ */ jsxs132(Stack3, { sx: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx143(
+                  Typography12,
                   {
                     noWrap: true,
                     sx: { fontWeight: 700, lineHeight: 1.25 },
@@ -30919,8 +31011,8 @@ var ServiceNode = memo11(({ data, selected }) => {
                     children: getServiceDisplayName(data.event.service_name)
                   }
                 ),
-                data.event.resource_name != "" && /* @__PURE__ */ jsx142(
-                  Typography11,
+                data.event.resource_name != "" && /* @__PURE__ */ jsx143(
+                  Typography12,
                   {
                     color: "text.secondary",
                     noWrap: true,
@@ -30933,16 +31025,16 @@ var ServiceNode = memo11(({ data, selected }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsx142(Divider4, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
-        /* @__PURE__ */ jsxs131(
+        /* @__PURE__ */ jsx143(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+        /* @__PURE__ */ jsxs132(
           Stack3,
           {
             alignItems: "center",
             direction: "row",
             sx: { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
             children: [
-              /* @__PURE__ */ jsx142(
-                Box17,
+              /* @__PURE__ */ jsx143(
+                Box18,
                 {
                   sx: {
                     alignItems: "center",
@@ -30951,11 +31043,11 @@ var ServiceNode = memo11(({ data, selected }) => {
                     justifyContent: "center",
                     width: "38px"
                   },
-                  children: hasErrors && data.event.errors?.map((error) => /* @__PURE__ */ jsx142(ProblemIndicator, { error }, error.span_id))
+                  children: hasErrors && data.event.errors?.map((error) => /* @__PURE__ */ jsx143(ProblemIndicator, { error }, error.span_id))
                 }
               ),
-              /* @__PURE__ */ jsx142(
-                Typography11,
+              /* @__PURE__ */ jsx143(
+                Typography12,
                 {
                   "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
                   noWrap: true,
@@ -31028,11 +31120,11 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box18, IconButton as IconButton5 } from "@mui/material";
+import { Box as Box19, IconButton as IconButton5 } from "@mui/material";
 import { useReactFlow, useStore as useStore2 } from "@xyflow/react";
 import { memo as memo12 } from "react";
 import { shallow } from "zustand/shallow";
-import { jsx as jsx143, jsxs as jsxs132 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs133 } from "react/jsx-runtime";
 var selector = (s2) => ({
   isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
@@ -31050,8 +31142,8 @@ var Controls = memo12(() => {
   const onFitViewHandler = () => {
     void fitView();
   };
-  return /* @__PURE__ */ jsxs132(
-    Box18,
+  return /* @__PURE__ */ jsxs133(
+    Box19,
     {
       sx: {
         bottom: 0,
@@ -31064,33 +31156,33 @@ var Controls = memo12(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx144(
           IconButton5,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(Add, {})
+            children: /* @__PURE__ */ jsx144(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx144(
           IconButton5,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(Remove, {})
+            children: /* @__PURE__ */ jsx144(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx144(
           IconButton5,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx143(FitScreen, {})
+            children: /* @__PURE__ */ jsx144(FitScreen, {})
           }
         )
       ]
@@ -31099,7 +31191,7 @@ var Controls = memo12(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment11, jsx as jsx144, jsxs as jsxs133 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx145, jsxs as jsxs134 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -31162,11 +31254,11 @@ var TraceGraph = ({
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes, setEdges]);
   const theme = useTheme5();
-  return /* @__PURE__ */ jsxs133(Fragment11, { children: [
-    spans.error && /* @__PURE__ */ jsxs133(
+  return /* @__PURE__ */ jsxs134(Fragment12, { children: [
+    spans.error && /* @__PURE__ */ jsxs134(
       Alert5,
       {
-        action: /* @__PURE__ */ jsx144(Button5, { onClick: () => {
+        action: /* @__PURE__ */ jsx145(Button5, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -31177,7 +31269,7 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs133(
+    /* @__PURE__ */ jsxs134(
       ReactFlow,
       {
         "data-testid": TRACE_GRAPH_TEST_ID,
@@ -31195,8 +31287,8 @@ var TraceGraph = ({
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx144(Controls, {}),
-          /* @__PURE__ */ jsx144(
+          /* @__PURE__ */ jsx145(Controls, {}),
+          /* @__PURE__ */ jsx145(
             Background,
             {
               bgColor: theme.palette.background.default,
@@ -31210,7 +31302,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment12, jsx as jsx145, jsxs as jsxs134 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx146, jsxs as jsxs135 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -31259,8 +31351,8 @@ var TraceGraphView = ({
   traceId
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsxs134(
-    Box19,
+  return /* @__PURE__ */ jsxs135(
+    Box20,
     {
       "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
       sx: {
@@ -31272,13 +31364,13 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs134(Box19, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx145(Button6, { onClick: () => {
+        /* @__PURE__ */ jsxs135(Box20, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ jsx146(Button6, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx145(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx145(Box19, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ jsx146(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx146(Box20, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ jsx145(
+        /* @__PURE__ */ jsx146(
           Paper3,
           {
             sx: {
@@ -31288,7 +31380,7 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx145(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx146(
               StatusMessage,
               {
                 error: statusError,
@@ -31296,15 +31388,15 @@ var TraceGraphView = ({
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__PURE__ */ jsxs134(Fragment12, { children: [
-              /* @__PURE__ */ jsx145(Main, { open, children: /* @__PURE__ */ jsx145(
-                Box19,
+            ) : /* @__PURE__ */ jsxs135(Fragment13, { children: [
+              /* @__PURE__ */ jsx146(Main, { open, children: /* @__PURE__ */ jsx146(
+                Box20,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx145(ReactFlowProvider, { children: /* @__PURE__ */ jsx145(
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx146(ReactFlowProvider, { children: /* @__PURE__ */ jsx146(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -31321,7 +31413,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ jsx146(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx146(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -31414,7 +31506,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const navigateToSpansList = useCallback11(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsx145(
+  return /* @__PURE__ */ jsx146(
     TraceGraphView,
     {
       fetchError,
@@ -31439,7 +31531,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 Fragment14, jsx as jsx147, jsxs as jsxs136 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -31486,9 +31578,9 @@ var SpansListPage = () => {
     void checkStatus();
   }, [api, checkStatus, clearFetchError]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsxs135(Fragment13, { children: [
-    /* @__PURE__ */ jsxs135(
-      Box20,
+  return /* @__PURE__ */ jsxs136(Fragment14, { children: [
+    /* @__PURE__ */ jsxs136(
+      Box21,
       {
         "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
@@ -31503,7 +31595,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          !checking && !shouldShowStatusMessage && /* @__PURE__ */ jsx146(
+          !checking && !shouldShowStatusMessage && /* @__PURE__ */ jsx147(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -31513,7 +31605,7 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          shouldShowStatusMessage ? /* @__PURE__ */ jsx146(
+          shouldShowStatusMessage ? /* @__PURE__ */ jsx147(
             StatusMessage,
             {
               error: statusError,
@@ -31522,7 +31614,7 @@ var SpansListPage = () => {
               onRetry: handleRetry,
               status
             }
-          ) : /* @__PURE__ */ jsx146(
+          ) : /* @__PURE__ */ jsx147(
             SpansList,
             {
               clearingSpans,
@@ -31550,7 +31642,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ jsx146(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ jsx147(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });