@localstack/appinspector-ui 1.0.116 → 1.0.118

package/dist/index.cjs

@@ -2417,8 +2417,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
-var import_material24 = require("@mui/material");
-var import_react69 = require("react");
+var import_material23 = require("@mui/material");
+var import_react68 = require("react");
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -2491,6 +2491,9 @@ var EVENT_DETAILS_REQUEST_PAYLOAD = "event-details-request-payload";
 var EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID = "event-details-response-payload";
 var EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID = "event-details-exception-payload";
 var EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID = "event-details-iam-errors-suppressed";
+var EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID = "event-details-iam-principal";
+var EVENT_DETAILS_IAM_ACTIONS_TEST_ID = "event-details-iam-actions";
+var EVENT_DETAILS_IAM_RESOURCES_TEST_ID = "event-details-iam-resources";
 var ERROR_COUNT_TEST_ID = "error-count";
 var WARNING_COUNT_TEST_ID = "warning-count";
 var SERVICE_NODE_TEST_ID = "service-node";
@@ -18594,14 +18597,14 @@ var useSpans = () => {
 };
 
 // src/pages/trace-graph-page.tsx
-var import_icons_material13 = require("@mui/icons-material");
-var import_material23 = require("@mui/material");
+var import_icons_material12 = require("@mui/icons-material");
+var import_material22 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react67 = require("@xyflow/react");
-var import_react68 = require("react");
+var import_react66 = require("@xyflow/react");
+var import_react67 = require("react");
 
 // src/components/event-details/event-details.tsx
-var import_icons_material10 = require("@mui/icons-material");
+var import_icons_material9 = require("@mui/icons-material");
 var import_material18 = require("@mui/material");
 var import_react59 = require("react");
 
@@ -18714,7 +18717,7 @@ var getEventGroupsByType = (events) => {
 };
 
 // src/components/event-details/event-detail.tsx
-var import_icons_material8 = require("@mui/icons-material");
+var import_icons_material7 = require("@mui/icons-material");
 var import_material15 = require("@mui/material");
 var import_react56 = require("react");
 
@@ -18824,57 +18827,48 @@ var IAMEventDetail = ({ event }) => {
 };
 
 // src/components/event-details/iam-permission-detail.tsx
-var import_icons_material7 = require("@mui/icons-material");
 var import_material12 = require("@mui/material");
 var import_react53 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
-var getChipColors = (status) => ({
-  backgroundColor: getPermissionStatusColor(status),
-  color: "white"
-});
-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 getChipColor = (isAllowed, spanStatusCode) => {
+  if (isAllowed) return "success.main";
+  if (spanStatusCode === 2) return "error.main";
+  return "warning.main";
+};
+var LabelValue = ({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { wordBreak: "break-all" }, variant: "body2", children: value })
 ] });
-var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react53.useState)(false);
+var IAMPermissionItem = ({ event, spanStatusCode }) => {
   const parsedData = (0, import_react53.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) return;
     const parsedIAM2 = parseIAMEvent(payloadString);
     if (!parsedIAM2) return;
-    return { chipColors: getChipColors(parsedIAM2.permission), parsedIAM: parsedIAM2 };
+    return { parsedIAM: parsedIAM2 };
   }, [event.attributes?.payload]);
   if (!parsedData) {
     return null;
   }
-  const { chipColors, parsedIAM } = parsedData;
+  const { parsedIAM } = parsedData;
+  const isAllowed = parsedIAM.permission === "explicitly_allowed" || parsedIAM.permission === "implicitly_allowed";
+  const chipColors = { backgroundColor: getChipColor(isAllowed, spanStatusCode), color: "white" };
   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_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_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)) })
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__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.Stack, { spacing: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, 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, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
+        parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block" }, variant: "body2", children: action }, action))
       ] }),
-      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)) })
+      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material12.Box, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
+        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Typography, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }, resource))
       ] })
     ] })
   ] });
 };
-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}`)) });
+var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material12.Box, { children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IAMPermissionItem, { event, spanStatusCode }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/payload-viewer.tsx
 var import_material14 = require("@mui/material");
@@ -20760,7 +20754,7 @@ var EventMessage = ({ event }) => {
           },
           size: "small",
           sx: { mr: 1, p: 0 },
-          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 } })
+          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material7.KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material7.KeyboardArrowRight, { sx: { fontSize: 16 } })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
@@ -20815,10 +20809,11 @@ var getEventLevelFromGroup = (group4) => {
 var EventDetail = ({
   displayText,
   events,
+  spanStatusCode,
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IAMPermissionDetail, { events });
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(IAMPermissionDetail, { events, spanStatusCode });
   }
   const eventLevel = getEventLevelFromGroup(type);
   return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material15.Box, { children: [
@@ -30624,7 +30619,7 @@ var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, regio
 };
 
 // src/components/event-details/toggle-section.tsx
-var import_icons_material9 = require("@mui/icons-material");
+var import_icons_material8 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
 var import_react58 = require("react");
 var import_jsx_runtime140 = require("react/jsx-runtime");
@@ -30656,7 +30651,7 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
               },
               children: [
                 /* @__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 } })
+                isOpen ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
               ]
             }
           ),
@@ -30730,7 +30725,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         },
         children: [
           /* @__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, {}) })
+          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_material9.Close, {}) })
         ]
       }
     ),
@@ -30800,7 +30795,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
       /* @__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.permissions && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, 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" })
       ] }),
@@ -30872,79 +30867,35 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
-var import_material22 = require("@mui/material");
-var import_react65 = require("@xyflow/react");
-var import_react66 = require("react");
+var import_material21 = require("@mui/material");
+var import_react64 = require("@xyflow/react");
+var import_react65 = require("react");
 
 // src/components/trace-graph/service-node.tsx
-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_material11 = require("@mui/icons-material");
+var import_icons_material10 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
-var import_react60 = require("react");
+var import_style = require("@xyflow/react/dist/style.css");
+var import_react60 = require("@xyflow/react");
+var import_react61 = require("react");
 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_runtime142.jsx)(import_icons_material11.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
-      }
-      case "warning": {
-        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
-      }
-      default: {
-        return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
-      }
-    }
-  }, [error.level]);
-  const color2 = (0, import_react60.useMemo)(() => {
-    switch (error.level) {
-      case "error": {
-        return "#d32f2f";
-      }
-      case "warning": {
-        return "#ff9800";
-      }
-      default: {
-        return "#2196f3";
-      }
-    }
-  }, [error.level]);
-  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",
-        backgroundColor: `${color2}15`,
-        border: `1px solid ${color2}`,
-        borderRadius: "50%",
-        cursor: "pointer",
-        display: "inline-flex",
-        height: "18px",
-        justifyContent: "center",
-        width: "18px"
-      },
-      children: icon
-    }
-  ) });
-};
-
-// src/components/trace-graph/service-node.tsx
-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_material20.useTheme)();
-  const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
-    import_material20.Box,
+var ServiceNode = (0, import_react61.memo)(({ data, selected }) => {
+  const theme = (0, import_material19.useTheme)();
+  const isError = data.event.status_code === 2;
+  const hasPermissionEvents = (0, import_react61.useMemo)(
+    () => data.event.events.some(
+      (event) => event.event_type === "iam.policy_evaluation" && event.name === "iam.policy.denied"
+    ),
+    [data.event.events]
+  );
+  const isWarning = !isError && data.event.status_code === 1 && hasPermissionEvents;
+  const outlineColor = isError ? theme.palette.error.main : isWarning ? theme.palette.warning.main : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
+    import_material19.Box,
     {
       "data-testid": SERVICE_NODE_TEST_ID,
       role: "button",
@@ -30953,32 +30904,32 @@ var ServiceNode = (0, import_react62.memo)(({ data, selected }) => {
           boxShadow: theme.palette.mode === "dark" ? "0 4px 12px rgba(0,0,0,0.6)" : "0 4px 12px rgba(0,0,0,0.22)"
         },
         "backgroundColor": theme.palette.background.paper,
-        "borderLeft": `3px solid ${hasErrors ? theme.palette.error.main : "transparent"}`,
+        "borderLeft": `3px solid ${outlineColor ?? "transparent"}`,
         "borderRadius": 1,
         "boxShadow": theme.palette.mode === "dark" ? "0 1px 4px rgba(0,0,0,0.5)" : "0 1px 4px rgba(0,0,0,0.13)",
         "cursor": "pointer",
         "maxWidth": 220,
         "minWidth": 140,
-        "outline": selected ? `2px solid ${hasErrors ? theme.palette.error.main : theme.palette.primary.main}` : hasErrors ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
+        "outline": selected ? `2px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
         "overflow": "hidden",
         "position": "relative",
         "transition": "all 0.3s ease"
       },
       tabIndex: 0,
       children: [
-        /* @__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,
+        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react60.Handle, { position: import_react60.Position.Left, style: handleStyle, type: "target" }),
+        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react60.Handle, { position: import_react60.Position.Right, style: handleStyle, type: "source" }),
+        /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
+          import_material19.Stack,
           {
             alignItems: "center",
             direction: "row",
             sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
             children: [
-              /* @__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,
+              /* @__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,
                   {
                     noWrap: true,
                     sx: { fontWeight: 700, lineHeight: 1.25 },
@@ -30986,8 +30937,8 @@ var ServiceNode = (0, import_react62.memo)(({ data, selected }) => {
                     children: getServiceDisplayName(data.event.service_name)
                   }
                 ),
-                data.event.resource_name != "" && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-                  import_material20.Typography,
+                data.event.resource_name != "" && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+                  import_material19.Typography,
                   {
                     color: "text.secondary",
                     noWrap: true,
@@ -31000,16 +30951,16 @@ var ServiceNode = (0, import_react62.memo)(({ data, selected }) => {
             ]
           }
         ),
-        /* @__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,
+        /* @__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,
           {
             alignItems: "center",
             direction: "row",
             sx: { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-                import_material20.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
+                import_material19.Box,
                 {
                   sx: {
                     alignItems: "center",
@@ -31018,11 +30969,14 @@ var ServiceNode = (0, import_react62.memo)(({ data, selected }) => {
                     justifyContent: "center",
                     width: "38px"
                   },
-                  children: hasErrors && data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(ProblemIndicator, { error }, error.span_id))
+                  children: [
+                    (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Tooltip, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material10.GppBad, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
+                    isError && !hasPermissionEvents && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material19.Tooltip, { arrow: true, title: "Error", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material10.Cancel, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                  ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-                import_material20.Typography,
+              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+                import_material19.Typography,
                 {
                   "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
                   noWrap: true,
@@ -31094,20 +31048,20 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 };
 
 // src/components/trace-graph/xyflow/controls.tsx
-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_icons_material11 = require("@mui/icons-material");
+var import_material20 = require("@mui/material");
+var import_react62 = require("@xyflow/react");
+var import_react63 = require("react");
 var import_shallow = require("zustand/shallow");
-var import_jsx_runtime144 = require("react/jsx-runtime");
+var import_jsx_runtime143 = require("react/jsx-runtime");
 var selector = (s2) => ({
   isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
   minZoomReached: s2.transform[2] <= s2.minZoom
 });
-var Controls = (0, import_react64.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react63.useStore)(selector, import_shallow.shallow);
-  const { fitView, zoomIn, zoomOut } = (0, import_react63.useReactFlow)();
+var Controls = (0, import_react63.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react62.useStore)(selector, import_shallow.shallow);
+  const { fitView, zoomIn, zoomOut } = (0, import_react62.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -31117,8 +31071,8 @@ var Controls = (0, import_react64.memo)(() => {
   const onFitViewHandler = () => {
     void fitView();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
-    import_material21.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+    import_material20.Box,
     {
       sx: {
         bottom: 0,
@@ -31131,33 +31085,33 @@ var Controls = (0, import_react64.memo)(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
-          import_material21.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+          import_material20.IconButton,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material12.Add, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material11.Add, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
-          import_material21.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+          import_material20.IconButton,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material12.Remove, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material11.Remove, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
-          import_material21.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+          import_material20.IconButton,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material12.FitScreen, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material11.FitScreen, {})
           }
         )
       ]
@@ -31166,7 +31120,7 @@ var Controls = (0, import_react64.memo)(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-var import_jsx_runtime145 = require("react/jsx-runtime");
+var import_jsx_runtime144 = require("react/jsx-runtime");
 var nodeTypes = {
   service: ServiceNode
 };
@@ -31176,9 +31130,9 @@ var TraceGraph = ({
   onRefresh,
   spans
 }) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_react65.useNodesState)([]);
-  const [edges, setEdges] = (0, import_react65.useEdgesState)([]);
-  (0, import_react66.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react64.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react64.useEdgesState)([]);
+  (0, import_react65.useEffect)(() => {
     const allNodes = [];
     const allEdges = [];
     for (const span of spans.data ?? []) {
@@ -31193,15 +31147,15 @@ var TraceGraph = ({
         },
         id: span.span_id,
         position: { x: 0, y: 0 },
-        sourcePosition: import_react65.Position.Right,
-        targetPosition: import_react65.Position.Left,
+        sourcePosition: import_react64.Position.Right,
+        targetPosition: import_react64.Position.Left,
         type: "service"
       });
       if (span.parent_span_id !== null) {
         allEdges.push({
           animated: false,
           id: `e-${span.parent_span_id}-${span.span_id}`,
-          markerEnd: { color: "lightgray", height: 16, type: import_react65.MarkerType.Arrow, width: 16 },
+          markerEnd: { color: "lightgray", height: 16, type: import_react64.MarkerType.Arrow, width: 16 },
           source: span.parent_span_id,
           style: { stroke: "lightgray", strokeWidth: 1 },
           target: span.span_id
@@ -31210,7 +31164,7 @@ var TraceGraph = ({
       for (const outgoingLinkSpanId of span.outgoing_link_span_ids ?? []) {
         allEdges.push({
           id: `e-link-${outgoingLinkSpanId}-${span.span_id}`,
-          markerEnd: { color: "lightgray", height: 16, type: import_react65.MarkerType.Arrow, width: 16 },
+          markerEnd: { color: "lightgray", height: 16, type: import_react64.MarkerType.Arrow, width: 16 },
           source: outgoingLinkSpanId,
           style: { stroke: "lightgray", strokeWidth: 1 },
           // animated: true,
@@ -31228,12 +31182,12 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes, setEdges]);
-  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,
+  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,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material22.Button, { onClick: () => {
+        action: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_material21.Button, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -31244,8 +31198,8 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
-      import_react65.ReactFlow,
+    /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
+      import_react64.ReactFlow,
       {
         "data-testid": TRACE_GRAPH_TEST_ID,
         edges,
@@ -31262,9 +31216,9 @@ var TraceGraph = ({
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Controls, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
-            import_react65.Background,
+          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Controls, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+            import_react64.Background,
             {
               bgColor: theme.palette.background.default,
               color: theme.palette.text.disabled
@@ -31277,7 +31231,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-var import_jsx_runtime146 = require("react/jsx-runtime");
+var import_jsx_runtime145 = 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 }) => ({
@@ -31295,7 +31249,7 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
     })
   }
 }));
-var StyledDrawer = (0, import_styles.styled)(import_material23.Drawer)(() => ({
+var StyledDrawer = (0, import_styles.styled)(import_material22.Drawer)(() => ({
   "& .MuiDrawer-paper": {
     bottom: 0,
     boxSizing: "border-box",
@@ -31326,8 +31280,8 @@ var TraceGraphView = ({
   traceId
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
-    import_material23.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
+    import_material22.Box,
     {
       "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
       sx: {
@@ -31339,14 +31293,14 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__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: () => {
+        /* @__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: () => {
             navigateToSpansList();
-          }, 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 } })
+          }, 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 } })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-          import_material23.Paper,
+        /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+          import_material22.Paper,
           {
             sx: {
               display: "flex",
@@ -31355,7 +31309,7 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
               StatusMessage,
               {
                 error: statusError,
@@ -31363,15 +31317,15 @@ var TraceGraphView = ({
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__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,
+            ) : /* @__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,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_react67.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_react66.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -31388,7 +31342,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -31432,10 +31386,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react68.useState)();
-  const [loading, setLoading] = (0, import_react68.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react68.useState)();
-  const fetchSpans = (0, import_react68.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react67.useState)();
+  const [loading, setLoading] = (0, import_react67.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react67.useState)();
+  const fetchSpans = (0, import_react67.useCallback)(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -31448,40 +31402,40 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react68.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react68.useState)(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = (0, import_react68.useRef)();
-  (0, import_react68.useEffect)(() => {
+  const [open, setOpen] = (0, import_react67.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react67.useState)(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = (0, import_react67.useRef)();
+  (0, import_react67.useEffect)(() => {
     if (!spansReference.current && spans) {
       setSelectedEvent(spans.find((span) => span.span_id === spanId));
       spansReference.current = spans;
     }
   }, [spans, setSelectedEvent, spanId]);
   const { checkStatus, reportDisabled, status, statusError } = useAppInspectorStatus();
-  (0, import_react68.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     if (fetchError instanceof AppInspectorDisabledError || fetchError instanceof ConnectionError) {
       reportDisabled();
     }
   }, [fetchError, reportDisabled]);
-  const handleEnable = (0, import_react68.useCallback)(async () => {
+  const handleEnable = (0, import_react67.useCallback)(async () => {
     await api.setStatus({ status: "ENABLED" });
     void checkStatus();
   }, [api, checkStatus]);
-  const handleEventSelect = (0, import_react68.useCallback)((spanId2) => {
+  const handleEventSelect = (0, import_react67.useCallback)((spanId2) => {
     const span = spans?.find((s2) => s2.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = (0, import_react68.useCallback)(() => {
+  const handleRetry = (0, import_react67.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = (0, import_react68.useCallback)(() => {
+  const navigateToSpansList = (0, import_react67.useCallback)(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
     TraceGraphView,
     {
       fetchError,
@@ -31506,7 +31460,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-var import_jsx_runtime147 = require("react/jsx-runtime");
+var import_jsx_runtime146 = require("react/jsx-runtime");
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -31530,32 +31484,32 @@ var SpansListPage = () => {
     warningCount
   } = useSpans();
   const { checking, checkStatus, status, statusError } = useAppInspectorStatus();
-  const clearSpansSync = (0, import_react69.useCallback)(() => {
+  const clearSpansSync = (0, import_react68.useCallback)(() => {
     void clearSpans();
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
   const versionCompatibility = checkEmulatorVersion(localstackVersion);
-  const [bannerDismissed, setBannerDismissed] = (0, import_react69.useState)(false);
+  const [bannerDismissed, setBannerDismissed] = (0, import_react68.useState)(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = (0, import_react69.useState)();
-  const [selectedSpanId, setSelectedSpanId] = (0, import_react69.useState)();
-  const navigateToSpan = (0, import_react69.useCallback)((span) => {
+  const [selectedTraceId, setSelectedTraceId] = (0, import_react68.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react68.useState)();
+  const navigateToSpan = (0, import_react68.useCallback)((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = (0, import_react69.useCallback)(() => {
+  const handleRetry = (0, import_react68.useCallback)(() => {
     void checkStatus();
     fetchForward();
   }, [checkStatus, fetchForward]);
-  const handleEnable = (0, import_react69.useCallback)(async () => {
+  const handleEnable = (0, import_react68.useCallback)(async () => {
     await api.setStatus({ status: "ENABLED" });
     clearFetchError();
     void checkStatus();
   }, [api, checkStatus, clearFetchError]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(import_jsx_runtime147.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
-      import_material24.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_jsx_runtime146.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
+      import_material23.Box,
       {
         "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
@@ -31570,7 +31524,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          !checking && !shouldShowStatusMessage && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+          !checking && !shouldShowStatusMessage && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -31580,7 +31534,7 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+          shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
             StatusMessage,
             {
               error: statusError,
@@ -31589,7 +31543,7 @@ var SpansListPage = () => {
               onRetry: handleRetry,
               status
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
             SpansList,
             {
               clearingSpans,
@@ -31617,7 +31571,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });