@localstack/appinspector-ui 1.0.113 → 1.0.115

package/dist/index.cjs

@@ -2417,7 +2417,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
-var import_material23 = require("@mui/material");
+var import_material24 = require("@mui/material");
 var import_react69 = require("react");
 
 // src/api/errors.ts
@@ -2576,11 +2576,11 @@ var EmulatorVersionBanner = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-var import_material7 = require("@mui/material");
+var import_material8 = require("@mui/material");
 
 // src/components/spans-list/spans-data-grid.tsx
-var import_icons_material2 = require("@mui/icons-material");
-var import_material6 = require("@mui/material");
+var import_icons_material3 = require("@mui/icons-material");
+var import_material7 = require("@mui/material");
 
 // node_modules/@tanstack/react-table/build/lib/index.mjs
 var React = __toESM(require("react"), 1);
@@ -14868,11 +14868,182 @@ var ServiceCell = (0, import_react40.memo)(({
 });
 ServiceCell.displayName = "ServiceCell";
 
-// src/components/spans-list/span-count-badge.tsx
+// src/components/cells/status-cell.tsx
 var import_icons_material = require("@mui/icons-material");
 var import_material5 = require("@mui/material");
-var import_react41 = require("react");
+
+// 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
 var import_jsx_runtime126 = require("react/jsx-runtime");
+var StatusIcon = ({ errorLevel, spanStatusCode }) => {
+  switch (errorLevel) {
+    case ErrorLevel.ERROR: {
+      return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.Cancel, { sx: { color: "red" } });
+    }
+    case ErrorLevel.IAM_PERMISSION: {
+      return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.GppBad, { sx: { color: spanStatusCode === 2 ? "red" : "warning.main" } });
+    }
+    case ErrorLevel.WARNING: {
+      return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.Error, { sx: { color: "orange" } });
+    }
+    default: {
+      return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_jsx_runtime126.Fragment, {});
+    }
+  }
+};
+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__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Typography, { color: "inherit", display: "block", fontWeight: "bold", variant: "caption", children: [
+      "Status: ",
+      spanStatusLabel
+    ] }),
+    messages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { color: "inherit", display: "block", variant: "caption", children: message }, index)),
+    iamDenials.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Divider, { sx: { borderColor: "rgba(255,255,255,0.2)", my: 0.5 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { color: "inherit", display: "block", fontWeight: "bold", variant: "caption", children: "Permissions" }),
+      iamDenials.map((denial, index) => denial !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { 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__ */ (0, import_jsx_runtime126.jsx)(import_jsx_runtime126.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Tooltip, { title: buildTooltipContent(span), children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Box, { sx: { alignItems: "center", cursor: "default", display: "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(StatusIcon, { errorLevel, spanStatusCode: span.status_code }) }) });
+};
+
+// src/components/spans-list/span-count-badge.tsx
+var import_icons_material2 = require("@mui/icons-material");
+var import_material6 = require("@mui/material");
+var import_react41 = require("react");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var resolveBindingLimit = (systemLimit, licenseLimit) => {
   const numericLimits = [systemLimit, licenseLimit].filter((l2) => typeof l2 === "number");
   if (numericLimits.length > 0) return Math.min(...numericLimits);
@@ -14885,29 +15056,29 @@ var fmtLimit = (value) => {
   if (value === "unlimited") return "Unlimited";
   return fmt(value);
 };
-var StatRow = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { alignItems: "baseline", display: "flex", justifyContent: "space-between", minWidth: 220 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
+var StatRow = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { alignItems: "baseline", display: "flex", justifyContent: "space-between", minWidth: 220 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
 ] });
 var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) => {
   const [anchorElement, setAnchorElement] = (0, import_react41.useState)();
   const bindingLimit = resolveBindingLimit(systemLimit, licenseLimit);
   if (totalCount === void 0 && bindingLimit === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_jsx_runtime126.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_jsx_runtime127.Fragment, {});
   }
   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__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { alignItems: "center", display: "flex", gap: 0.25 }, children: [
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { color: "text.secondary", variant: "caption", children: "Showing" }),
-      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
-      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { alignItems: "center", display: "flex", gap: 0.25 }, children: [
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "text.secondary", variant: "caption", children: "Showing" }),
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
+      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Tooltip, { title: "Operation count details", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
-      import_material5.IconButton,
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { title: "Operation count details", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+      import_material6.IconButton,
       {
         "aria-describedby": isOpen ? "operation-count-popover" : void 0,
         onClick: (event) => {
@@ -14915,11 +15086,11 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
         },
         size: "small",
         sx: { color: systemLimitReached || licenseLimitReached ? "warning.main" : "text.disabled" },
-        children: systemLimitReached || licenseLimitReached ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.WarningAmberOutlined, { sx: { fontSize: 14 } }) : /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.InfoOutlined, { sx: { fontSize: 14 } })
+        children: systemLimitReached || licenseLimitReached ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.WarningAmberOutlined, { sx: { fontSize: 14 } }) : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.InfoOutlined, { sx: { fontSize: 14 } })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
-      import_material5.Popover,
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+      import_material6.Popover,
       {
         anchorEl: anchorElement,
         anchorOrigin: { horizontal: "right", vertical: "bottom" },
@@ -14929,55 +15100,55 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
         },
         open: isOpen,
         transformOrigin: { horizontal: "right", vertical: "top" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { minWidth: 240, p: 2 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { fontWeight: 700, variant: "body2", children: "Storage" }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { color: "text.secondary", sx: { mt: 0.25 }, variant: "caption", children: "How many operations are currently stored." }),
-          /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { minWidth: 240, p: 2 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { fontWeight: 700, variant: "body2", children: "Storage" }),
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "text.secondary", sx: { mt: 0.25 }, variant: "caption", children: "How many operations are currently stored." }),
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
               StatRow,
               {
-                label: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Tooltip, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
+                label: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
                 value: visibleCount
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
               StatRow,
               {
-                label: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Tooltip, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
+                label: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
                 value: totalCount
               }
             )
           ] }),
-          (systemLimit !== void 0 || licenseLimit !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Divider, { sx: { my: 1.5 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
-            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { 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__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: [
-              licenseLimit !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+          (systemLimit !== void 0 || licenseLimit !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Divider, { sx: { my: 1.5 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
+            /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { 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__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: [
+              licenseLimit !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
                 StatRow,
                 {
-                  label: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Tooltip, { placement: "left", title: "The maximum number of operations allowed by your current license.", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "License limit" }) }),
+                  label: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { placement: "left", title: "The maximum number of operations allowed by your current license.", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "License limit" }) }),
                   value: licenseLimit
                 }
               ),
-              systemLimit !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+              systemLimit !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
                 StatRow,
                 {
-                  label: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Tooltip, { placement: "left", title: "The maximum number of operations that can be stored in the system.", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "System limit" }) }),
+                  label: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { placement: "left", title: "The maximum number of operations that can be stored in the system.", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Box, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "System limit" }) }),
                   value: systemLimit
                 }
               )
             ] })
           ] }),
-          (systemLimitReached || licenseLimitReached) && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { display: "flex", flexDirection: "column", gap: 1, mt: 1.5 }, children: [
-            licenseLimitReached && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { backgroundColor: "warning.main", borderRadius: 1, p: 1.5 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75, mb: 0.75 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.WarningAmberOutlined, { sx: { color: "warning.contrastText", fontSize: 14, mt: "1px" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { color: "warning.contrastText", fontWeight: 600, variant: "caption", children: "License limit reached" })
+          (systemLimitReached || licenseLimitReached) && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { display: "flex", flexDirection: "column", gap: 1, mt: 1.5 }, children: [
+            licenseLimitReached && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { backgroundColor: "warning.main", borderRadius: 1, p: 1.5 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75, mb: 0.75 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.WarningAmberOutlined, { sx: { color: "warning.contrastText", fontSize: 14, mt: "1px" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "warning.contrastText", fontWeight: 600, variant: "caption", children: "License limit reached" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { 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__ */ (0, import_jsx_runtime126.jsx)(
-                import_material5.Button,
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { 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__ */ (0, import_jsx_runtime127.jsx)(
+                import_material6.Button,
                 {
                   color: "inherit",
                   href: "https://localstack.cloud/pricing",
@@ -14989,9 +15160,9 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
                 }
               )
             ] }),
-            systemLimitReached && !licenseLimitReached && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.WarningAmberOutlined, { color: "warning", sx: { fontSize: 14, mt: "1px" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { color: "warning.main", variant: "caption", children: "System limit reached \u2014 newer operations are being dropped." })
+            systemLimitReached && !licenseLimitReached && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.WarningAmberOutlined, { color: "warning", sx: { fontSize: 14, mt: "1px" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "warning.main", variant: "caption", children: "System limit reached \u2014 newer operations are being dropped." })
             ] })
           ] })
         ] })
@@ -15001,7 +15172,7 @@ var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) =
 };
 
 // src/components/spans-list/spans-data-grid.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var columnHelper = createColumnHelper();
 var newSpanBackgroundColor = {
   dark: { from: "rgba(136, 123, 2, 1)", to: "rgba(136, 123, 2, 0)" },
@@ -15013,16 +15184,16 @@ 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__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { children: label }) }) });
-var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.TableCell, { colSpan, sx: { textAlign: "center" }, children: [
-  !fetching && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
-  fetching && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.CircularProgress, { size: 24, sx: { m: 2 } })
+var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { children: label }) }) });
+var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.TableCell, { colSpan, sx: { textAlign: "center" }, children: [
+  !fetching && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
+  fetching && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.CircularProgress, { size: 24, sx: { m: 2 } })
 ] }) });
 var SpansDataGridRow = (0, import_react42.memo)(
-  ({ row }) => {
-    const theme = (0, import_material6.useTheme)();
-    return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-      import_material6.TableRow,
+  ({ onSpanClick, row }) => {
+    const theme = (0, import_material7.useTheme)();
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+      import_material7.TableRow,
       {
         animate: {
           backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light.to : newSpanBackgroundColor.dark.to
@@ -15032,20 +15203,24 @@ var SpansDataGridRow = (0, import_react42.memo)(
         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__ */ (0, import_jsx_runtime127.jsx)(
-            import_material6.TableCell,
+          return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+            import_material7.TableCell,
             {
               sx: {
                 height: 36,
                 maxWidth: `${cell.column.getSize().toString()}px`,
                 minWidth: `${cell.column.getSize().toString()}px`
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-                import_material6.Box,
+              children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                import_material7.Box,
                 {
                   sx: {
                     "alignItems": "center",
@@ -15057,7 +15232,7 @@ var SpansDataGridRow = (0, import_react42.memo)(
                     },
                     "width": "100%"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Box, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Box, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
                 }
               )
             },
@@ -15094,9 +15269,9 @@ var SpansDataGrid = ({
 }) => {
   const columns = (0, import_react42.useMemo)(() => [
     columnHelper.accessor("startTime", {
-      cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ResponsiveTimestampCell, { date: props.getValue() }),
-      header: () => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-        import_material6.TableSortLabel,
+      cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(ResponsiveTimestampCell, { date: props.getValue() }),
+      header: () => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        import_material7.TableSortLabel,
         {
           active: true,
           direction: order2 === "newest_first" ? "asc" : "desc",
@@ -15112,23 +15287,23 @@ var SpansDataGrid = ({
     columnHelper.display({
       cell: (props) => {
         if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
-          return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
+          return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
+        return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(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__ */ (0, import_jsx_runtime127.jsx)(
-        import_material6.Box,
+      cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        import_material7.Box,
         {
           sx: {
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { title: props.getValue(), children: props.getValue() })
+          children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { title: props.getValue(), children: props.getValue() })
         }
       ),
       header: "Action",
@@ -15137,7 +15312,7 @@ var SpansDataGrid = ({
     }),
     columnHelper.display({
       cell: (props) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
+        return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
       },
       header: "Consumer",
       id: "consumer",
@@ -15145,23 +15320,26 @@ var SpansDataGrid = ({
     }),
     columnHelper.display({
       cell: (props) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-          import_material6.Button,
-          {
-            "data-testid": VIEW_SPAN_DETAILS_TEST_ID,
-            onClick: () => {
-              onSpanClick(props.row.original);
-            },
-            size: "small",
-            sx: { px: 1 },
-            variant: "text",
-            children: "View Details"
-          }
-        ) });
+        return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.Box, { sx: { alignItems: "center", display: "flex", gap: 0.5, justifyContent: "flex-end" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StatusIconWithTooltip, { span: props.row.original }),
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+            import_material7.Button,
+            {
+              "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({
@@ -15194,46 +15372,46 @@ var SpansDataGrid = ({
     if (!element || !isAtLiveEdgeRef.current) return;
     element.scrollTop = element.scrollHeight;
   }, [order2, spans?.length, lastSpanId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
-      errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
-          import_material6.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
+      errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Tooltip, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+          import_material7.Box,
           {
             "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__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
             ]
           }
         ) })
       ] }),
-      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Tooltip, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
-          import_material6.Box,
+      warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Tooltip, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+          import_material7.Box,
           {
             "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__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Typography, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
             ]
           }
         ) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Box, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-        import_material6.FormControlLabel,
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Box, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        import_material7.FormControlLabel,
         {
-          control: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-            import_material6.Button,
+          control: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+            import_material7.Button,
             {
               onClick: onToggleStream,
-              startIcon: streamPaused ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.PlayArrowOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.PauseOutlined, {}),
+              startIcon: streamPaused ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material3.PlayArrowOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material3.PauseOutlined, {}),
               variant: "text",
               children: streamPaused ? "Resume Stream" : "Pause Stream"
             }
@@ -15241,15 +15419,15 @@ var SpansDataGrid = ({
           label: ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-        import_material6.FormControlLabel,
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        import_material7.FormControlLabel,
         {
-          control: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-            import_material6.Button,
+          control: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+            import_material7.Button,
             {
               "data-testid": CLEAR_SPANS_TEST_ID,
               onClick: onClearSpans,
-              startIcon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.DeleteForeverOutlined, {}),
+              startIcon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material3.DeleteForeverOutlined, {}),
               children: "Clear Operations"
             }
           ),
@@ -15258,8 +15436,8 @@ var SpansDataGrid = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-      import_material6.TableContainer,
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+      import_material7.TableContainer,
       {
         onScroll: handleScroll,
         ref: containerRef,
@@ -15271,8 +15449,8 @@ var SpansDataGrid = ({
           right: 0,
           top: 0
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
-          import_material6.Table,
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+          import_material7.Table,
           {
             stickyHeader: true,
             sx: {
@@ -15283,9 +15461,9 @@ var SpansDataGrid = ({
               "th+th": { pl: "8px !important" }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-                  import_material6.TableCell,
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  import_material7.TableCell,
                   {
                     colSpan: header.colSpan,
                     sx: {
@@ -15299,31 +15477,31 @@ var SpansDataGrid = ({
                   header.id
                 )) }, headerGroup.id);
               }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.TableBody, { children: [
-                (spans === void 0 || clearingSpans) && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
-                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
-                  hasRows && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(AnimatePresence, { initial: false, children: (() => {
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.TableBody, { children: [
+                (spans === void 0 || clearingSpans) && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
+                  hasRows && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(AnimatePresence, { initial: false, children: (() => {
                     const reversed = [];
                     for (let index = rows.length - 1; index >= 0; index--) {
                       const row = rows.at(index);
                       reversed.push(
-                        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SpansDataGridRow, { row }, row.original.span_id)
+                        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SpansDataGridRow, { onSpanClick, row }, row.original.span_id)
                       );
                     }
                     return reversed;
                   })() }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
-                  hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
+                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
-                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-                  hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
-                  hasRows && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SpansDataGridRow, { row }, row.original.span_id)) }),
-                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
+                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
+                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(SpansDataGridRow, { onSpanClick, row }, row.original.span_id)) }),
+                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
               ] })
             ]
@@ -15335,13 +15513,13 @@ var SpansDataGrid = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var SpansList = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.Box, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
-    props.fetchError && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
-      import_material7.Alert,
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Box, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
+    props.fetchError && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+      import_material8.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Button, { onClick: props.onFetchForward, children: "Retry" }),
+        action: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Button, { onClick: props.onFetchForward, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -15350,7 +15528,7 @@ var SpansList = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       SpansDataGrid,
       {
         clearingSpans: props.clearingSpans,
@@ -15378,10 +15556,10 @@ var SpansList = (props) => {
 };
 
 // src/components/status-message/status-message.tsx
-var import_icons_material3 = require("@mui/icons-material");
-var import_material8 = require("@mui/material");
+var import_icons_material4 = require("@mui/icons-material");
+var import_material9 = require("@mui/material");
 var import_react43 = require("react");
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var StatusMessage = ({
   error,
   localstackVersion,
@@ -15405,8 +15583,8 @@ var StatusMessage = ({
   };
   if (error instanceof AppInspectorNotFoundError) {
     const isBelowMinimum = localstackVersion !== void 0 && checkEmulatorVersion(localstackVersion) === "below-minimum";
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-      import_material8.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      import_material9.Box,
       {
         sx: {
           alignItems: "center",
@@ -15416,18 +15594,18 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-          import_material8.Alert,
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          import_material9.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { 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__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("strong", { children: "Update LocalStack:" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                import_material8.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { 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__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("strong", { children: "Update LocalStack:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                import_material9.Box,
                 {
                   component: "pre",
                   sx: {
@@ -15439,8 +15617,8 @@ var StatusMessage = ({
                   children: "localstack update docker-images"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Box, { sx: { display: "flex", gap: 1, mt: 2 }, children: onRetry && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                import_material8.Button,
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { sx: { display: "flex", gap: 1, mt: 2 }, children: onRetry && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                import_material9.Button,
                 {
                   "aria-label": "Check App Inspector status again",
                   disabled: enabling,
@@ -15456,8 +15634,8 @@ var StatusMessage = ({
     );
   }
   if (error instanceof ConnectionError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-      import_material8.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      import_material9.Box,
       {
         sx: {
           alignItems: "center",
@@ -15467,18 +15645,18 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-          import_material8.Alert,
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          import_material9.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Typography, { sx: { mb: 2 }, variant: "body2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Typography, { sx: { mb: 2 }, variant: "body2", children: [
                 "Failed to connect to LocalStack. Ensure ",
-                /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                  import_material8.Link,
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                  import_material9.Link,
                   {
                     href: "https://docs.localstack.cloud/aws/getting-started/installation/",
                     rel: "noopener noreferrer",
@@ -15488,9 +15666,9 @@ var StatusMessage = ({
                 ),
                 " is running and accessible."
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("strong", { children: "Start LocalStack:" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                import_material8.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("strong", { children: "Start LocalStack:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                import_material9.Box,
                 {
                   component: "pre",
                   sx: {
@@ -15502,8 +15680,8 @@ var StatusMessage = ({
                   children: "localstack start"
                 }
               ),
-              onRetry && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                import_material8.Button,
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                import_material9.Button,
                 {
                   "aria-label": "Retry connection to LocalStack",
                   onClick: onRetry,
@@ -15518,8 +15696,8 @@ var StatusMessage = ({
     );
   }
   if (error instanceof AppInspectorDisabledError || status?.status === "DISABLED") {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-      import_material8.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      import_material9.Box,
       {
         sx: {
           alignItems: "center",
@@ -15529,31 +15707,31 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-          import_material8.Alert,
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          import_material9.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.InfoOutlined, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.InfoOutlined, { fontSize: "large" }),
             severity: "warning",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Is Not Enabled" }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is not currently enabled in LocalStack. You can enable it now, or at startup." }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Box, { sx: { display: "flex", gap: 1, mb: 2 }, children: [
-                onEnable && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                  import_material8.Button,
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Is Not Enabled" }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is not currently enabled in LocalStack. You can enable it now, or at startup." }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { sx: { display: "flex", gap: 1, mb: 2 }, children: [
+                onEnable && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                  import_material9.Button,
                   {
                     "aria-label": "Enable App Inspector Now",
                     disabled: enabling,
                     onClick: () => {
                       void handleEnable();
                     },
-                    startIcon: enabling ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.CircularProgress, { size: 16 }) : void 0,
+                    startIcon: enabling ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.CircularProgress, { size: 16 }) : void 0,
                     variant: "contained",
                     children: "Enable App Inspector Now"
                   }
                 ),
-                onRetry && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                  import_material8.Button,
+                onRetry && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                  import_material9.Button,
                   {
                     "aria-label": "Check if App Inspector is enabled",
                     disabled: enabling,
@@ -15563,9 +15741,9 @@ var StatusMessage = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { mb: 1 }, variant: "body2", children: "If you'd prefer to automatically enable App Inspector at start up, use:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                import_material8.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { mb: 1 }, variant: "body2", children: "If you'd prefer to automatically enable App Inspector at start up, use:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                import_material9.Box,
                 {
                   component: "pre",
                   sx: {
@@ -15577,7 +15755,7 @@ var StatusMessage = ({
                   children: "LOCALSTACK_APP_INSPECTOR=1 localstack start"
                 }
               ),
-              Boolean(enableError) && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { color: "error", sx: { mt: 1 }, variant: "body2", children: enableError })
+              Boolean(enableError) && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { color: "error", sx: { mt: 1 }, variant: "body2", children: enableError })
             ]
           }
         )
@@ -15585,8 +15763,8 @@ var StatusMessage = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-      import_material8.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      import_material9.Box,
       {
         sx: {
           alignItems: "center",
@@ -15596,17 +15774,17 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-          import_material8.Alert,
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          import_material9.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { mb: 2 }, variant: "body2", children: error.message }),
-              onRetry && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                import_material8.Button,
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { mb: 2 }, variant: "body2", children: error.message }),
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                import_material9.Button,
                 {
                   "aria-label": "Retry operation",
                   onClick: onRetry,
@@ -15620,7 +15798,7 @@ var StatusMessage = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_jsx_runtime129.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_jsx_runtime130.Fragment, {});
 };
 
 // src/hooks/status-provider.tsx
@@ -15669,7 +15847,7 @@ var useStatus = () => {
 };
 
 // src/hooks/status-provider.tsx
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var AppInspectorStatusContext = (0, import_react45.createContext)(void 0);
 var StatusProvider = ({ children }) => {
   const { checking, checkStatus, error, status } = useStatus();
@@ -15680,7 +15858,7 @@ var StatusProvider = ({ children }) => {
     () => ({ checking, checkStatus, reportDisabled, status, statusError: error }),
     [checking, checkStatus, reportDisabled, status, error]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(AppInspectorStatusContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(AppInspectorStatusContext.Provider, { value, children });
 };
 var useAppInspectorStatus = () => {
   const value = (0, import_react45.useContext)(AppInspectorStatusContext);
@@ -18099,7 +18277,7 @@ var useAppInspectorOpenAnalytics = () => {
 };
 
 // src/context.tsx
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var AppInspectorContext = (0, import_react48.createContext)(void 0);
 var useAppInspector = () => {
   const context = (0, import_react48.useContext)(AppInspectorContext);
@@ -18110,7 +18288,7 @@ var useAppInspector = () => {
 };
 var AppInspectorAnalyticsBoundary = ({ children }) => {
   useAppInspectorOpenAnalytics();
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_jsx_runtime132.Fragment, { children });
 };
 var AppInspectorContextProvider = (props) => {
   const api = (0, import_react49.useMemo)(
@@ -18142,7 +18320,7 @@ var AppInspectorContextProvider = (props) => {
     }),
     [deploymentContainer, props.linkComponent, props.localstackEndpoint, resolveLink]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(StatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(StatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
 };
 
 // src/hooks/use-spans-ws.tsx
@@ -18428,103 +18606,17 @@ var useSpans = () => {
 };
 
 // src/pages/trace-graph-page.tsx
-var import_icons_material12 = require("@mui/icons-material");
-var import_material22 = require("@mui/material");
+var import_icons_material13 = require("@mui/icons-material");
+var import_material23 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
 var import_react67 = require("@xyflow/react");
 var import_react68 = require("react");
 
 // src/components/event-details/event-details.tsx
-var import_icons_material9 = require("@mui/icons-material");
-var import_material17 = require("@mui/material");
+var import_icons_material10 = require("@mui/icons-material");
+var import_material18 = require("@mui/material");
 var import_react59 = require("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") {
@@ -18634,70 +18726,70 @@ var getEventGroupsByType = (events) => {
 };
 
 // src/components/event-details/event-detail.tsx
-var import_icons_material7 = require("@mui/icons-material");
-var import_material14 = require("@mui/material");
+var import_icons_material8 = require("@mui/icons-material");
+var import_material15 = require("@mui/material");
 var import_react56 = require("react");
 
 // src/components/status-icon.tsx
-var import_icons_material4 = require("@mui/icons-material");
-var import_material9 = require("@mui/material");
-var import_jsx_runtime132 = require("react/jsx-runtime");
-var StatusIcon = ({ errorLevel }) => {
+var import_icons_material5 = require("@mui/icons-material");
+var import_material10 = require("@mui/material");
+var import_jsx_runtime133 = require("react/jsx-runtime");
+var StatusIcon2 = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Cancel, { sx: { color: "red" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.Cancel, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Error, { sx: { color: "orange" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.Error, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.CheckCircle, { sx: { color: "lightgray" } });
     }
   }
 };
 
 // src/components/event-details/iam-event-detail.tsx
-var import_icons_material5 = require("@mui/icons-material");
-var import_material10 = require("@mui/material");
-var import_jsx_runtime133 = require("react/jsx-runtime");
-var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material10.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Box, { children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
+var import_icons_material6 = require("@mui/icons-material");
+var import_material11 = require("@mui/material");
+var import_jsx_runtime134 = require("react/jsx-runtime");
+var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Box, { children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { 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__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.CheckCircle, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.CheckCircle, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.Error, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.Error, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
+    return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
+    return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material10.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Box, { sx: { mb: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-      import_material10.Chip,
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Box, { sx: { mb: 1.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      import_material11.Chip,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -18707,36 +18799,36 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
-    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
+    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       DetailRow,
       {
-        content: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
+        content: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       DetailRow,
       {
-        content: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
+        content: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { 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__ */ (0, import_jsx_runtime133.jsxs)(import_material10.Box, { sx: { mt: 1.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material10.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
-        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material10.Box, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
+    (parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { mt: 1.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
         ] }),
-        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material10.Box, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
         ] }),
-        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material10.Box, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material10.Typography, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
         ] })
       ] })
     ] })
@@ -18744,17 +18836,17 @@ var IAMEventDetail = ({ event }) => {
 };
 
 // src/components/event-details/iam-permission-detail.tsx
-var import_icons_material6 = require("@mui/icons-material");
-var import_material11 = require("@mui/material");
+var import_icons_material7 = require("@mui/icons-material");
+var import_material12 = require("@mui/material");
 var import_react53 = require("react");
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var getChipColors = (status) => ({
   backgroundColor: getPermissionStatusColor(status),
   color: "white"
 });
-var LabelValue = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { sx: { wordBreak: "break-all" }, variant: "caption", children: value })
+var LabelValue = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { wordBreak: "break-all" }, variant: "caption", children: value })
 ] });
 var IAMPermissionItem = ({ event }) => {
   const [isOpen, setIsOpen] = (0, import_react53.useState)(false);
@@ -18769,39 +18861,39 @@ var IAMPermissionItem = ({ event }) => {
     return null;
   }
   const { chipColors, parsedIAM } = parsedData;
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { mb: 0.5 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.IconButton, { onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { mb: 0.5 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.IconButton, { onClick: () => {
         setIsOpen(!isOpen);
-      }, size: "small", sx: { p: 0 }, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.KeyboardArrowRight, { sx: { fontSize: 16 } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Chip, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Typography, { color: "text.secondary", noWrap: true, sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, variant: "caption", children: [
+      }, size: "small", sx: { p: 0 }, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material7.KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material7.KeyboardArrowRight, { sx: { fontSize: 16 } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Chip, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Typography, { color: "text.secondary", noWrap: true, sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, variant: "caption", children: [
         parsedIAM.service,
         ":",
         parsedIAM.operation
       ] })
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(LabelValue, { label: "Principal", value: parsedIAM.principal }),
-      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Actions" }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { sx: { display: "block" }, variant: "caption", children: action }, action)) })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LabelValue, { label: "Principal", value: parsedIAM.principal }),
+      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Actions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block" }, variant: "caption", children: action }, action)) })
       ] }),
-      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material11.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Resources" }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Typography, { sx: { display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) })
+      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Resources" }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) })
       ] })
     ] })
   ] });
 };
-var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material11.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/payload-viewer.tsx
-var import_material13 = require("@mui/material");
+var import_material14 = require("@mui/material");
 
 // node_modules/@textea/json-viewer/dist/index.mjs
-var import_jsx_runtime135 = require("react/jsx-runtime");
-var import_material12 = require("@mui/material");
+var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_material13 = require("@mui/material");
 var import_react54 = require("react");
 var import_zustand = require("zustand");
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
@@ -19156,7 +19248,7 @@ function useInspect(path, value, nestedIndex) {
     setInspect
   ];
 }
-var DataBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+var DataBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
   component: "div",
   ...props,
   sx: {
@@ -19167,7 +19259,7 @@ var DataBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_m
 var DataTypeLabel = (param) => {
   let { dataType, enable = true } = param;
   if (!enable) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataBox, {
     className: "data-type-label",
     sx: {
       mx: 0.5,
@@ -19185,18 +19277,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__ */ (0, import_jsx_runtime135.jsxs)(DataBox, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(DataBox, {
       onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(props.path, props.value),
       sx: {
         color: color2
       },
       children: [
-        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataTypeLabel, {
+        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataTypeLabel, {
           dataType: type
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataBox, {
           className: "".concat(type, "-value"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Render, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Render, {
             path: props.path,
             inspect: props.inspect,
             setInspect: props.setInspect,
@@ -19236,7 +19328,7 @@ function defineEasyType(param) {
     }, [
       setValue
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.InputBase, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.InputBase, {
       autoFocus: true,
       value,
       onChange: handleChange,
@@ -19276,7 +19368,7 @@ var booleanType = defineEasyType({
   },
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_jsx_runtime136.Fragment, {
       children: value ? "true" : "false"
     });
   }
@@ -19295,7 +19387,7 @@ var dateType = defineEasyType({
   colorKey: "base0D",
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_jsx_runtime136.Fragment, {
       children: value.toLocaleTimeString("en-us", displayOptions)
     });
   }
@@ -19324,12 +19416,12 @@ var functionName = (func) => {
 var lb = "{";
 var rb = "}";
 var PreFunctionType = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.NoSsr, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material13.NoSsr, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataTypeLabel, {
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataTypeLabel, {
         dataType: "function"
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, {
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material13.Box, {
         component: "span",
         className: "data-function-start",
         sx: {
@@ -19345,8 +19437,8 @@ var PreFunctionType = (props) => {
   });
 };
 var PostFunctionType = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.NoSsr, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.NoSsr, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
       component: "span",
       className: "data-function-end",
       children: rb
@@ -19355,15 +19447,15 @@ var PostFunctionType = () => {
 };
 var FunctionType = (props) => {
   const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.NoSsr, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.NoSsr, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
       className: "data-function",
       sx: {
         display: props.inspect ? "block" : "inline-block",
         pl: props.inspect ? 2 : 0,
         color: functionColor
       },
-      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
         component: "span",
         className: "data-function-body",
         onClick: () => props.setInspect(true),
@@ -19391,7 +19483,7 @@ var nullType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
       sx: {
         fontSize: "0.8rem",
         backgroundColor,
@@ -19414,7 +19506,7 @@ var nanType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
       sx: {
         backgroundColor,
         fontSize: "0.8rem",
@@ -19434,7 +19526,7 @@ var floatType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_jsx_runtime136.Fragment, {
       children: value
     });
   }
@@ -19448,7 +19540,7 @@ var intType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_jsx_runtime136.Fragment, {
       children: value
     });
   }
@@ -19461,16 +19553,16 @@ var bigIntType = defineEasyType({
   deserialize: (value) => BigInt(value.replace(/\D/g, "")),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_jsx_runtime136.Fragment, {
       children: "".concat(value, "n")
     });
   }
 });
 var BaseIcon = (param) => {
   let { d: d2, ...props } = param;
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.SvgIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.SvgIcon, {
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("path", {
+    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("path", {
       d: d2
     })
   });
@@ -19485,55 +19577,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__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BaseIcon, {
     d: AddBox,
     ...props
   });
 };
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BaseIcon, {
     d: Check,
     ...props
   });
 };
 var ChevronRightIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BaseIcon, {
     d: ChevronRight,
     ...props
   });
 };
 var CircularArrowsIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BaseIcon, {
     d: CircularArrows,
     ...props
   });
 };
 var CloseIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BaseIcon, {
     d: Close,
     ...props
   });
 };
 var ContentCopyIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BaseIcon, {
     d: ContentCopy,
     ...props
   });
 };
 var EditIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BaseIcon, {
     d: Edit,
     ...props
   });
 };
 var ExpandMoreIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BaseIcon, {
     d: ExpandMore,
     ...props
   });
 };
 var DeleteIcon = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(BaseIcon, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BaseIcon, {
     d: Delete,
     ...props
   });
@@ -19572,7 +19664,7 @@ var PreObjectType = (props) => {
     props.value
   ]);
   const isTrap = useIsCycleReference(props.path, props.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material13.Box, {
     component: "span",
     className: "data-object-start",
     sx: {
@@ -19580,7 +19672,7 @@ var PreObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayLb : objectLb,
-      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -19590,16 +19682,16 @@ var PreObjectType = (props) => {
         },
         children: sizeOfValue
       }),
-      isTrap && !props.inspect && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
+      isTrap && !props.inspect && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CircularArrowsIcon, {
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CircularArrowsIcon, {
             sx: {
               fontSize: 12,
               color: textColor,
               mx: 0.5
             }
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataBox, {
             sx: {
               cursor: "pointer",
               userSelect: "none"
@@ -19629,7 +19721,7 @@ var PostObjectType = (props) => {
     props.path,
     props.value
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material13.Box, {
     component: "span",
     className: "data-object-end",
     sx: {
@@ -19640,7 +19732,7 @@ var PostObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayRb : objectRb,
-      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -19680,7 +19772,7 @@ var ObjectType = (props) => {
             ...props.path,
             key
           ];
-          elements3.push(/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataKeyPair, {
             path,
             value: value2,
             prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
@@ -19696,7 +19788,7 @@ var ObjectType = (props) => {
         while (true) {
           const nextResult = iterator2.next();
           var _nextResult_done;
-          elements3.push(/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataKeyPair, {
             path: [
               ...props.path,
               "iterator:".concat(count2)
@@ -19724,7 +19816,7 @@ var ObjectType = (props) => {
             ...props.path,
             index
           ];
-          return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
+          return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataKeyPair, {
             path,
             value: value2,
             prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
@@ -19733,7 +19825,7 @@ var ObjectType = (props) => {
         });
         if (value.length > displayLength) {
           const rest = value.length - displayLength;
-          elements4.push(/* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(DataBox, {
+          elements4.push(/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(DataBox, {
             sx: {
               cursor: "pointer",
               lineHeight: 1.5,
@@ -19756,7 +19848,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__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
+        return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataKeyPair, {
           path: props.path,
           value: list,
           nestedIndex: index,
@@ -19783,7 +19875,7 @@ var ObjectType = (props) => {
         ...props.path,
         key
       ];
-      return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
+      return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataKeyPair, {
         path,
         value: value2,
         prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
@@ -19792,7 +19884,7 @@ var ObjectType = (props) => {
     });
     if (entries.length > displayLength) {
       const rest = entries.length - displayLength;
-      elements2.push(/* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(DataBox, {
+      elements2.push(/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(DataBox, {
         sx: {
           cursor: "pointer",
           lineHeight: 1.5,
@@ -19830,7 +19922,7 @@ var ObjectType = (props) => {
   if (isEmptyValue) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
     className: "data-object",
     sx: {
       display: props.inspect ? "block" : "inline-block",
@@ -19839,7 +19931,7 @@ var ObjectType = (props) => {
       color: keyColor,
       borderLeft: props.inspect ? "1px solid ".concat(borderColor) : "none"
     },
-    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
       component: "span",
       className: "data-object-body",
       onClick: () => props.setInspect(true),
@@ -19871,7 +19963,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__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material13.Box, {
       component: "span",
       sx: {
         overflowWrap: "anywhere",
@@ -19889,7 +19981,7 @@ var stringType = defineEasyType({
       children: [
         '"',
         value,
-        hasRest && !showRest && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+        hasRest && !showRest && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
           component: "span",
           sx: {
             padding: 0.5
@@ -19908,7 +20000,7 @@ var undefinedType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
       sx: {
         fontSize: "0.7rem",
         backgroundColor,
@@ -19989,7 +20081,7 @@ function useTypeComponents(value, path) {
     registry
   ]);
 }
-var IconBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+var IconBox = (props) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
   component: "span",
   ...props,
   sx: {
@@ -20175,18 +20267,18 @@ var DataKeyPair = (props) => {
   ]);
   const actionIcons = (0, import_react54.useMemo)(() => {
     if (editing) {
-      return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
+      return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CloseIcon, {
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconBox, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CloseIcon, {
               sx: {
                 fontSize: ".8rem"
               },
               onClick: abortEditing
             })
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CheckIcon, {
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconBox, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckIcon, {
               sx: {
                 fontSize: ".8rem"
               },
@@ -20196,9 +20288,9 @@ var DataKeyPair = (props) => {
         ]
       });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, {
       children: [
-        enableClipboard && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
+        enableClipboard && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             try {
@@ -20207,41 +20299,41 @@ var DataKeyPair = (props) => {
               console.error(e2);
             }
           },
-          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CheckIcon, {
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(CheckIcon, {
             sx: {
               fontSize: ".8rem"
             }
-          }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ContentCopyIcon, {
+          }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ContentCopyIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        Editor && editable && serialize && deserialize && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconBox, {
           onClick: startEditing,
-          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EditIcon, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(EditIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableAdd && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
+        enableAdd && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(AddBoxIcon, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(AddBoxIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableDelete && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IconBox, {
+        enableDelete && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DeleteIcon, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DeleteIcon, {
             sx: {
               fontSize: ".9rem"
             }
@@ -20289,7 +20381,7 @@ var DataKeyPair = (props) => {
     prevValue,
     nestedIndex
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material13.Box, {
     className: "data-key-pair",
     "data-testid": "data-key-pair" + path.join("."),
     sx: {
@@ -20301,7 +20393,7 @@ var DataKeyPair = (props) => {
       nestedIndex
     ]),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(DataBox, {
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(DataBox, {
         component: "span",
         className: "data-key",
         sx: {
@@ -20322,7 +20414,7 @@ var DataKeyPair = (props) => {
           setInspect
         ]),
         children: [
-          expandable ? inspect ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ExpandMoreIcon, {
+          expandable ? inspect ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ExpandMoreIcon, {
             className: "data-key-toggle-expanded",
             sx: {
               fontSize: ".8rem",
@@ -20330,7 +20422,7 @@ var DataKeyPair = (props) => {
                 cursor: "pointer"
               }
             }
-          }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ChevronRightIcon, {
+          }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ChevronRightIcon, {
             className: "data-key-toggle-collapsed",
             sx: {
               fontSize: ".8rem",
@@ -20339,44 +20431,44 @@ var DataKeyPair = (props) => {
               }
             }
           }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
             ref: highlightContainer,
             className: "data-key-key",
             component: "span",
-            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
+            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, {
               children: [
                 '"',
                 rootName,
                 '"'
               ]
-            }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
+            }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_jsx_runtime136.Fragment, {
               children: rootName
-            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(KeyRenderer, {
+            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(KeyRenderer, {
               ...downstreamProps
-            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
               component: "span",
               style: {
                 color: numberKeyColor,
                 userSelect: isNumberKey ? "none" : "auto"
               },
               children: key
-            }) : quotesOnKeys ? /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, {
+            }) : quotesOnKeys ? /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, {
               children: [
                 '"',
                 key,
                 '"'
               ]
-            }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_jsx_runtime135.Fragment, {
+            }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_jsx_runtime136.Fragment, {
               children: key
             }))
           }),
-          isRoot ? rootName !== false && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
+          isRoot ? rootName !== false && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5
             },
             children: ":"
-          }) : nestedIndex === void 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
+          }) : nestedIndex === void 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5,
@@ -20387,29 +20479,29 @@ var DataKeyPair = (props) => {
             },
             children: ":"
           }),
-          PreComponent && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(PreComponent, {
+          PreComponent && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PreComponent, {
             ...downstreamProps
           }),
           isHover && expandable && inspect && actionIcons
         ]
       }),
-      editing && editable ? Editor && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Editor, {
+      editing && editable ? Editor && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Editor, {
         path,
         value: tempValue,
         setValue: setTempValue,
         abortEditing,
         commitEditing
-      }) : Component ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Component, {
+      }) : Component ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Component, {
         ...downstreamProps
-      }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, {
+      }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, {
         component: "span",
         className: "data-value-fallback",
         children: "fallback: ".concat(value)
       }),
-      PostComponent && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(PostComponent, {
+      PostComponent && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(PostComponent, {
         ...downstreamProps
       }),
-      !last && displayComma && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataBox, {
+      !last && displayComma && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataBox, {
         children: ","
       }),
       isHover && expandable && !inspect && actionIcons,
@@ -20529,7 +20621,7 @@ var JsonViewerInner = (props) => {
   const onMouseLeave = (0, import_react54.useCallback)(() => setHover(null), [
     setHover
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Paper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Paper, {
     elevation: 0,
     className: clsx(themeCls, props.className),
     style: props.style,
@@ -20540,7 +20632,7 @@ var JsonViewerInner = (props) => {
       ...props.sx
     },
     onMouseLeave,
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DataKeyPair, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(DataKeyPair, {
       value,
       prevValue,
       path: emptyPath,
@@ -20565,7 +20657,7 @@ var JsonViewer = function JsonViewer2(props) {
   const theme = (0, import_react54.useMemo)(() => {
     const backgroundColor = typeof themeType === "object" ? themeType.base00 : themeType === "dark" ? darkColorspace.base00 : lightColorspace.base00;
     const foregroundColor = typeof themeType === "object" ? themeType.base07 : themeType === "dark" ? darkColorspace.base07 : lightColorspace.base07;
-    return (0, import_material12.createTheme)({
+    return (0, import_material13.createTheme)({
       components: {
         MuiPaper: {
           styleOverrides: {
@@ -20592,13 +20684,13 @@ var JsonViewer = function JsonViewer2(props) {
   };
   const jsonViewerStore = (0, import_react54.useMemo)(() => createJsonViewerStore(props), []);
   const typeRegistryStore = (0, import_react54.useMemo)(() => createTypeRegistryStore(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.ThemeProvider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.ThemeProvider, {
     theme,
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(TypeRegistryStoreContext.Provider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(TypeRegistryStoreContext.Provider, {
       value: typeRegistryStore,
-      children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(JsonViewerStoreContext.Provider, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(JsonViewerStoreContext.Provider, {
         value: jsonViewerStore,
-        children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(JsonViewerInner, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(JsonViewerInner, {
           ...mixedProps
         })
       })
@@ -20608,7 +20700,7 @@ var JsonViewer = function JsonViewer2(props) {
 
 // src/components/event-details/payload-viewer.tsx
 var import_react55 = require("react");
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 function tryParseJson(value) {
   if (typeof value !== "string") {
     return value;
@@ -20620,8 +20712,8 @@ function tryParseJson(value) {
   }
 }
 var PayloadViewer = (0, import_react55.memo)(({ sx, testId, value }) => {
-  const theme = (0, import_material13.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material13.Box, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  const theme = (0, import_material14.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material14.Box, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -20635,10 +20727,10 @@ var PayloadViewer = (0, import_react55.memo)(({ sx, testId, value }) => {
 });
 
 // src/components/event-details/event-detail.tsx
-var import_jsx_runtime137 = require("react/jsx-runtime");
-var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material14.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material14.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material14.Box, { children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material14.Typography, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
+var import_jsx_runtime138 = require("react/jsx-runtime");
+var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material15.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Typography, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Box, { children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Typography, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
 ] });
 var EventMessage = ({ event }) => {
   const [isOpen, setIsOpen] = (0, import_react56.useState)(false);
@@ -20670,21 +20762,21 @@ var EventMessage = ({ event }) => {
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material14.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material14.Box, { sx: { alignItems: "center", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
-        import_material14.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material15.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material15.Box, { sx: { alignItems: "center", display: "flex" }, children: [
+      Boolean(shouldShowToggle) && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+        import_material15.IconButton,
         {
           onClick: () => {
             setIsOpen(!isOpen);
           },
           size: "small",
           sx: { mr: 1, p: 0 },
-          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material7.KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material7.KeyboardArrowRight, { sx: { fontSize: 16 } })
+          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { fontSize: 16 } })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
-        import_material14.Typography,
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+        import_material15.Typography,
         {
           ref: textReference,
           sx: {
@@ -20701,12 +20793,12 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material14.Box, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IAMEventDetail, { event }) : /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(DetailRow2, { content: parsedMessage.message, label: "Message" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Box, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IAMEventDetail, { event }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(DetailRow2, { content: parsedMessage.message, label: "Message" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
         DetailRow2,
         {
-          content: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
           label: "Details"
         }
       )
@@ -20738,15 +20830,15 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(IAMPermissionDetail, { events });
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IAMPermissionDetail, { events });
   }
   const eventLevel = getEventLevelFromGroup(type);
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material14.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material14.Box, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(StatusIcon, { errorLevel: eventLevel }),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material14.Typography, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material15.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material15.Box, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(StatusIcon2, { errorLevel: eventLevel }),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Typography, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material14.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material14.Box, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Box, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
   ] });
 };
 
@@ -25128,16 +25220,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) {
@@ -30437,9 +30529,9 @@ var QueryStatus = {
 };
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
-var import_material15 = require("@mui/material");
+var import_material16 = require("@mui/material");
 var import_react57 = require("react");
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
@@ -30529,30 +30621,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__ */ (0, import_jsx_runtime138.jsxs)(import_material15.Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.CircularProgress, { size: 14 }),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Typography, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_material16.Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material16.CircularProgress, { size: 14 }),
+      /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material16.Typography, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
     ] });
   }
   if (error !== void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Typography, { color: "error", variant: "body2", children: error.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material16.Typography, { color: "error", variant: "body2", children: error.message });
   }
   if (logs.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Typography, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material16.Typography, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Box, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material15.Typography, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material16.Box, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material16.Typography, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
 };
 
 // src/components/event-details/toggle-section.tsx
-var import_icons_material8 = require("@mui/icons-material");
-var import_material16 = require("@mui/material");
+var import_icons_material9 = require("@mui/icons-material");
+var import_material17 = require("@mui/material");
 var import_react58 = require("react");
-var import_jsx_runtime139 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
   const [isOpen, setIsOpen] = (0, import_react58.useState)(initialOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_material16.Box, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
-      import_material16.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+      import_material17.Box,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -30565,8 +30657,8 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
           mb: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
-            import_material16.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+            import_material17.Box,
             {
               role: "button",
               sx: {
@@ -30575,23 +30667,23 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
                 gap: 1
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-                isOpen ? /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
+                /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+                isOpen ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material9.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material9.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
               ]
             }
           ),
-          action !== false && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material16.Box, { onClick: (event) => {
+          action !== false && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Box, { onClick: (event) => {
             event.stopPropagation();
           }, children: action })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material16.Box, { children })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Box, { children })
   ] });
 };
 
 // src/components/event-details/event-details.tsx
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime141 = require("react/jsx-runtime");
 var checkIsLambdaInvoke = (span) => {
   if (span.service_name !== "lambda") {
     return false;
@@ -30612,7 +30704,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   );
   const [parseNestedJson, setParseNestedJson] = (0, import_react59.useState)(true);
   if (!selectedEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
   const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
   const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
@@ -30635,9 +30727,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__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-      import_material17.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
+      import_material18.Box,
       {
         sx: {
           alignItems: "center",
@@ -30649,64 +30741,64 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           py: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.IconButton, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material9.Close, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.IconButton, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.Close, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Stack, { spacing: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Stack, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) })
+    /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Stack, { spacing: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Stack, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name })
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, variant: "body2", children: selectedEvent.resource_name })
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, variant: "body2", children: selectedEvent.resource_name })
           ] }),
-          Boolean(cfnResourceType) && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType })
+          Boolean(cfnResourceType) && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType })
           ] })
         ] }),
-        Boolean(resourceArn) && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, variant: "body2", children: resourceArn })
+        Boolean(resourceArn) && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, variant: "body2", children: resourceArn })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id })
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region })
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
           ] }),
-          duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-            /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Typography, { "data-testid": EVENT_DETAILS_DURATION_TEST_ID, variant: "body2", children: [
+          duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Typography, { "data-testid": EVENT_DETAILS_DURATION_TEST_ID, variant: "body2", children: [
               duration,
               "ms"
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Stack, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-            import_material17.Chip,
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Stack, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+            import_material18.Chip,
             {
               color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
               "data-testid": EVENT_DETAILS_STATUS_TEST_ID,
@@ -30716,50 +30808,50 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ) })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(ToggleSection, { headline: "Permissions", children: [
-        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Alert, { "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__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
-        eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, type: "permission" }),
-        eventGroups.errors && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
-        eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
+      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(ToggleSection, { headline: "Permissions", children: [
+        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Alert, { "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__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
+        eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, type: "permission" }),
+        eventGroups.errors && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
+        eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
       ] }),
-      hasPayloads && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+      hasPayloads && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_jsx_runtime141.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
           ToggleSection,
           {
-            action: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-              import_material17.FormControlLabel,
+            action: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+              import_material18.FormControlLabel,
               {
-                control: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Switch, { checked: !parseNestedJson, onChange: (event) => {
+                control: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Switch, { checked: !parseNestedJson, onChange: (event) => {
                   setParseNestedJson(!event.target.checked);
                 }, size: "small" }),
-                label: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { variant: "caption", children: "View raw data" }),
+                label: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { variant: "caption", children: "View raw data" }),
                 sx: { mr: 0 }
               }
             ),
             headline: "Payloads",
-            children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Stack, { spacing: 2, children: [
-              requestPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
-                /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
+            children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Stack, { spacing: 2, children: [
+              requestPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
-              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
-                isResponseSuppressed ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Box, { sx: { py: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Alert, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
+              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
+                isResponseSuppressed ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Box, { sx: { py: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Alert, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
               ] }),
-              exceptionPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
-                /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
+              exceptionPayload !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
               ] })
             ] })
           }
         )
       ] }),
-      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_jsx_runtime141.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
           LambdaInvokeLogsSection,
           {
             endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
@@ -30770,21 +30862,21 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         ) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id })
+      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id })
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id })
         ] }),
-        requestId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material17.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material17.Typography, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId })
+        requestId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material18.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Typography, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId })
         ] }),
-        eventGroups.info && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
+        eventGroups.info && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
       ] }) })
     ] }) })
   ] });
@@ -30792,32 +30884,32 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
-var import_material21 = require("@mui/material");
+var import_material22 = require("@mui/material");
 var import_react65 = require("@xyflow/react");
 var import_react66 = require("react");
 
 // src/components/trace-graph/service-node.tsx
-var import_material19 = require("@mui/material");
+var import_material20 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
 var import_react61 = require("@xyflow/react");
 var import_react62 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
-var import_icons_material10 = require("@mui/icons-material");
-var import_material18 = require("@mui/material");
+var import_icons_material11 = require("@mui/icons-material");
+var import_material19 = require("@mui/material");
 var import_react60 = require("react");
-var import_jsx_runtime141 = require("react/jsx-runtime");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
   const icon = (0, import_react60.useMemo)(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
@@ -30834,8 +30926,8 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material18.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
-    import_material18.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+    import_material19.Box,
     {
       sx: {
         alignItems: "center",
@@ -30854,17 +30946,17 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_jsx_runtime143 = require("react/jsx-runtime");
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
   opacity: 0
 };
 var ServiceNode = (0, import_react62.memo)(({ data, selected }) => {
-  const theme = (0, import_material19.useTheme)();
+  const theme = (0, import_material20.useTheme)();
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
-    import_material19.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+    import_material20.Box,
     {
       "data-testid": SERVICE_NODE_TEST_ID,
       role: "button",
@@ -30886,19 +30978,19 @@ var ServiceNode = (0, import_react62.memo)(({ data, selected }) => {
       },
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react61.Handle, { position: import_react61.Position.Left, style: handleStyle, type: "target" }),
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react61.Handle, { position: import_react61.Position.Right, style: handleStyle, type: "source" }),
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
-          import_material19.Stack,
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react61.Handle, { position: import_react61.Position.Left, style: handleStyle, type: "target" }),
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react61.Handle, { position: import_react61.Position.Right, style: handleStyle, type: "source" }),
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+          import_material20.Stack,
           {
             alignItems: "center",
             direction: "row",
             sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Box, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material19.Stack, { sx: { minWidth: 0 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
-                  import_material19.Typography,
+              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Box, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_material20.Stack, { sx: { minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                  import_material20.Typography,
                   {
                     noWrap: true,
                     sx: { fontWeight: 700, lineHeight: 1.25 },
@@ -30906,8 +30998,8 @@ var ServiceNode = (0, import_react62.memo)(({ data, selected }) => {
                     children: getServiceDisplayName(data.event.service_name)
                   }
                 ),
-                data.event.resource_name != "" && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
-                  import_material19.Typography,
+                data.event.resource_name != "" && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                  import_material20.Typography,
                   {
                     color: "text.secondary",
                     noWrap: true,
@@ -30920,16 +31012,16 @@ var ServiceNode = (0, import_react62.memo)(({ data, selected }) => {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Divider, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
-          import_material19.Stack,
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material20.Divider, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+          import_material20.Stack,
           {
             alignItems: "center",
             direction: "row",
             sx: { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
-                import_material19.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                import_material20.Box,
                 {
                   sx: {
                     alignItems: "center",
@@ -30938,11 +31030,11 @@ var ServiceNode = (0, import_react62.memo)(({ data, selected }) => {
                     justifyContent: "center",
                     width: "38px"
                   },
-                  children: hasErrors && data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(ProblemIndicator, { error }, error.span_id))
+                  children: hasErrors && data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(ProblemIndicator, { error }, error.span_id))
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
-                import_material19.Typography,
+              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                import_material20.Typography,
                 {
                   "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
                   noWrap: true,
@@ -31014,12 +31106,12 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 };
 
 // src/components/trace-graph/xyflow/controls.tsx
-var import_icons_material11 = require("@mui/icons-material");
-var import_material20 = require("@mui/material");
+var import_icons_material12 = require("@mui/icons-material");
+var import_material21 = require("@mui/material");
 var import_react63 = require("@xyflow/react");
 var import_react64 = require("react");
 var import_shallow = require("zustand/shallow");
-var import_jsx_runtime143 = require("react/jsx-runtime");
+var import_jsx_runtime144 = require("react/jsx-runtime");
 var selector = (s2) => ({
   isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
@@ -31037,8 +31129,8 @@ var Controls = (0, import_react64.memo)(() => {
   const onFitViewHandler = () => {
     void fitView();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
-    import_material20.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
+    import_material21.Box,
     {
       sx: {
         bottom: 0,
@@ -31051,33 +31143,33 @@ var Controls = (0, import_react64.memo)(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-          import_material20.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+          import_material21.IconButton,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material11.Add, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material12.Add, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-          import_material20.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+          import_material21.IconButton,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material11.Remove, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material12.Remove, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-          import_material20.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+          import_material21.IconButton,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material11.FitScreen, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material12.FitScreen, {})
           }
         )
       ]
@@ -31086,7 +31178,7 @@ var Controls = (0, import_react64.memo)(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-var import_jsx_runtime144 = require("react/jsx-runtime");
+var import_jsx_runtime145 = require("react/jsx-runtime");
 var nodeTypes = {
   service: ServiceNode
 };
@@ -31148,12 +31240,12 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes, setEdges]);
-  const theme = (0, import_material21.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_jsx_runtime144.Fragment, { children: [
-    spans.error && /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
-      import_material21.Alert,
+  const theme = (0, import_material22.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_jsx_runtime145.Fragment, { children: [
+    spans.error && /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
+      import_material22.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_material21.Button, { onClick: () => {
+        action: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material22.Button, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -31164,7 +31256,7 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
       import_react65.ReactFlow,
       {
         "data-testid": TRACE_GRAPH_TEST_ID,
@@ -31182,8 +31274,8 @@ var TraceGraph = ({
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Controls, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Controls, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
             import_react65.Background,
             {
               bgColor: theme.palette.background.default,
@@ -31197,7 +31289,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-var import_jsx_runtime145 = require("react/jsx-runtime");
+var import_jsx_runtime146 = require("react/jsx-runtime");
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -31215,7 +31307,7 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
     })
   }
 }));
-var StyledDrawer = (0, import_styles.styled)(import_material22.Drawer)(() => ({
+var StyledDrawer = (0, import_styles.styled)(import_material23.Drawer)(() => ({
   "& .MuiDrawer-paper": {
     bottom: 0,
     boxSizing: "border-box",
@@ -31246,8 +31338,8 @@ var TraceGraphView = ({
   traceId
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
-    import_material22.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
+    import_material23.Box,
     {
       "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
       sx: {
@@ -31259,14 +31351,14 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_material22.Box, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material22.Button, { onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_material23.Box, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_material23.Button, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_icons_material12.ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material22.Box, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_icons_material13.ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_material23.Box, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
-          import_material22.Paper,
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+          import_material23.Paper,
           {
             sx: {
               display: "flex",
@@ -31275,7 +31367,7 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
               StatusMessage,
               {
                 error: statusError,
@@ -31283,15 +31375,15 @@ var TraceGraphView = ({
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_jsx_runtime145.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
-                import_material22.Box,
+            ) : /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_jsx_runtime146.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+                import_material23.Box,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_react67.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_react67.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -31308,7 +31400,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -31401,7 +31493,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const navigateToSpansList = (0, import_react68.useCallback)(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
     TraceGraphView,
     {
       fetchError,
@@ -31426,7 +31518,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-var import_jsx_runtime146 = require("react/jsx-runtime");
+var import_jsx_runtime147 = require("react/jsx-runtime");
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -31473,9 +31565,9 @@ var SpansListPage = () => {
     void checkStatus();
   }, [api, checkStatus, clearFetchError]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_jsx_runtime146.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
-      import_material23.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(import_jsx_runtime147.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+      import_material24.Box,
       {
         "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
@@ -31490,7 +31582,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          !checking && !shouldShowStatusMessage && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+          !checking && !shouldShowStatusMessage && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -31500,7 +31592,7 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+          shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
             StatusMessage,
             {
               error: statusError,
@@ -31509,7 +31601,7 @@ var SpansListPage = () => {
               onRetry: handleRetry,
               status
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
             SpansList,
             {
               clearingSpans,
@@ -31537,7 +31629,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });