@localstack/appinspector-ui 1.0.116 → 1.0.118

package/dist/index.js

@@ -2413,8 +2413,8 @@ var init_event_streams = __esm({
 });
 
 // src/pages/spans-list-page.tsx
-import { Box as Box21 } from "@mui/material";
-import { useCallback as useCallback12, useState as useState18 } from "react";
+import { Box as Box20 } from "@mui/material";
+import { useCallback as useCallback12, useState as useState17 } from "react";
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -2487,6 +2487,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";
@@ -18608,15 +18611,15 @@ var useSpans = () => {
 
 // src/pages/trace-graph-page.tsx
 import { ArrowBack } from "@mui/icons-material";
-import { Box as Box20, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
+import { Box as Box19, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef17, useState as useState17 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef17, useState as useState16 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Close as Close2 } from "@mui/icons-material";
-import { Alert as Alert4, Box as Box16, Chip as Chip3, Divider as Divider4, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Stack as Stack2, Switch, Typography as Typography11 } from "@mui/material";
-import { useMemo as useMemo12, useState as useState16 } from "react";
+import { Alert as Alert4, Box as Box16, Chip as Chip3, Divider as Divider4, FormControlLabel as FormControlLabel2, IconButton as IconButton3, Stack as Stack3, Switch, Typography as Typography11 } from "@mui/material";
+import { useMemo as useMemo12, useState as useState15 } from "react";
 
 // src/utils/event-utils.ts
 var iamEventParser = (eventName, attributes) => {
@@ -18727,9 +18730,9 @@ var getEventGroupsByType = (events) => {
 };
 
 // src/components/event-details/event-detail.tsx
-import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
-import { Box as Box13, IconButton as IconButton3, Typography as Typography8 } from "@mui/material";
-import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef15, useState as useState13 } from "react";
+import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
+import { Box as Box13, IconButton as IconButton2, Typography as Typography8 } from "@mui/material";
+import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef15, useState as useState12 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel as Cancel2, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
@@ -18837,57 +18840,48 @@ var IAMEventDetail = ({ event }) => {
 };
 
 // src/components/event-details/iam-permission-detail.tsx
-import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box10, Chip as Chip2, IconButton as IconButton2, Typography as Typography7 } from "@mui/material";
-import { useMemo as useMemo8, useState as useState11 } from "react";
+import { Box as Box10, Chip as Chip2, Stack, Typography as Typography7 } from "@mui/material";
+import { useMemo as useMemo8 } from "react";
 import { jsx as jsx135, jsxs as jsxs126 } from "react/jsx-runtime";
-var getChipColors = (status) => ({
-  backgroundColor: getPermissionStatusColor(status),
-  color: "white"
-});
-var LabelValue = ({ label, value }) => /* @__PURE__ */ jsxs126(Box10, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ jsx135(Typography7, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx135(Typography7, { sx: { wordBreak: "break-all" }, variant: "caption", children: value })
+var getChipColor = (isAllowed, spanStatusCode) => {
+  if (isAllowed) return "success.main";
+  if (spanStatusCode === 2) return "error.main";
+  return "warning.main";
+};
+var LabelValue = ({ label, value }) => /* @__PURE__ */ jsxs126(Box10, { children: [
+  /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx135(Typography7, { sx: { wordBreak: "break-all" }, variant: "body2", children: value })
 ] });
-var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = useState11(false);
+var IAMPermissionItem = ({ event, spanStatusCode }) => {
   const parsedData = useMemo8(() => {
     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__ */ jsxs126(Box10, { sx: { mb: 0.5 }, children: [
-    /* @__PURE__ */ jsxs126(Box10, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
-      /* @__PURE__ */ jsx135(IconButton2, { onClick: () => {
-        setIsOpen(!isOpen);
-      }, size: "small", sx: { p: 0 }, children: isOpen ? /* @__PURE__ */ jsx135(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx135(KeyboardArrowRight, { sx: { fontSize: 16 } }) }),
-      /* @__PURE__ */ jsx135(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }),
-      /* @__PURE__ */ jsxs126(Typography7, { color: "text.secondary", noWrap: true, sx: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, variant: "caption", children: [
-        parsedIAM.service,
-        ":",
-        parsedIAM.operation
-      ] })
-    ] }),
-    isOpen && /* @__PURE__ */ jsxs126(Box10, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: [
-      /* @__PURE__ */ jsx135(LabelValue, { label: "Principal", value: parsedIAM.principal }),
-      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs126(Box10, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-        /* @__PURE__ */ jsx135(Typography7, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Actions" }),
-        /* @__PURE__ */ jsx135(Box10, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block" }, variant: "caption", children: action }, action)) })
+    /* @__PURE__ */ jsx135(Box10, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ jsx135(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
+    /* @__PURE__ */ jsxs126(Stack, { spacing: 1, children: [
+      /* @__PURE__ */ jsx135(Box10, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: /* @__PURE__ */ jsx135(LabelValue, { label: "Principal", value: parsedIAM.principal }) }),
+      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
+        /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
+        parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block" }, variant: "body2", children: action }, action))
       ] }),
-      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs126(Box10, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr" }, children: [
-        /* @__PURE__ */ jsx135(Typography7, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: "Resources" }),
-        /* @__PURE__ */ jsx135(Box10, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) })
+      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
+        /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
+        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx135(Typography7, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }, resource))
       ] })
     ] })
   ] });
 };
-var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx135(Box10, { children: events.map((event) => /* @__PURE__ */ jsx135(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ jsx135(Box10, { children: events.map((event) => /* @__PURE__ */ jsx135(IAMPermissionItem, { event, spanStatusCode }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/payload-viewer.tsx
 import { Box as Box12, useTheme as useTheme3 } from "@mui/material";
@@ -18896,7 +18890,7 @@ import { Box as Box12, useTheme as useTheme3 } from "@mui/material";
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
 import { jsx as jsx136, jsxs as jsxs127, Fragment as Fragment9 } from "react/jsx-runtime";
 import { Box as Box11, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
-import { createContext as createContext10, useContext as useContext17, useState as useState12, useRef as useRef14, useCallback as useCallback10, useMemo as useMemo9, useEffect as useEffect17, memo as memo9 } from "react";
+import { createContext as createContext10, useContext as useContext17, useState as useState11, useRef as useRef14, useCallback as useCallback10, useMemo as useMemo9, useEffect as useEffect17, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t2, f2, n2 = "";
@@ -19140,7 +19134,7 @@ async function copyString(value) {
 }
 function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-  const [copied, setCopied] = useState12(false);
+  const [copied, setCopied] = useState11(false);
   const copyTimeout = useRef14(null);
   const handleCopyResult = useCallback10((value) => {
     const current = copyTimeout.current;
@@ -19223,7 +19217,7 @@ function useInspect(path, value, nestedIndex) {
     value,
     setInspectCache
   ]);
-  const [inspect, set] = useState12(() => {
+  const [inspect, set] = useState11(() => {
     const shouldInspect = getInspectCache(path, nestedIndex);
     if (shouldInspect !== void 0) {
       return shouldInspect;
@@ -19754,7 +19748,7 @@ var ObjectType = (props) => {
   const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
   const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
   const isTrap = useIsCycleReference(props.path, props.value);
-  const [displayLength, setDisplayLength] = useState12(useJsonViewerStore((store) => store.maxDisplayLength));
+  const [displayLength, setDisplayLength] = useState11(useJsonViewerStore((store) => store.maxDisplayLength));
   const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
   const elements = useMemo9(() => {
     if (!props.inspect) {
@@ -19960,7 +19954,7 @@ var stringType = defineEasyType({
   serialize: (value) => value,
   deserialize: (value) => value,
   Renderer: (props) => {
-    const [showRest, setShowRest] = useState12(false);
+    const [showRest, setShowRest] = useState11(false);
     const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
     const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
     const hasRest = props.value.length > collapseStringsAfterLength;
@@ -20114,7 +20108,7 @@ var DataKeyPair = (props) => {
     storeEditable,
     value
   ]);
-  const [tempValue, setTempValue] = useState12("");
+  const [tempValue, setTempValue] = useState11("");
   const depth = path.length;
   const key = path[depth - 1];
   const hoverPath = useJsonViewerStore((store) => store.hoverPath);
@@ -20128,7 +20122,7 @@ var DataKeyPair = (props) => {
   const setHover = useJsonViewerStore((store) => store.setHover);
   const root = useJsonViewerStore((store) => store.value);
   const [inspect, setInspect] = useInspect(path, value, nestedIndex);
-  const [editing, setEditing] = useState12(false);
+  const [editing, setEditing] = useState11(false);
   const onChange = useJsonViewerStore((store) => store.onChange);
   const keyColor = useTextColor();
   const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
@@ -20513,7 +20507,7 @@ var DataKeyPair = (props) => {
 };
 var query = "(prefers-color-scheme: dark)";
 function useThemeDetector() {
-  const [isDark, setIsDark] = useState12(false);
+  const [isDark, setIsDark] = useState11(false);
   useEffect17(() => {
     const listener = (e2) => setIsDark(e2.matches);
     setIsDark(window.matchMedia(query).matches);
@@ -20734,8 +20728,8 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs128(Box13, { sx: {
   /* @__PURE__ */ jsx138(Box13, { children: typeof content === "string" ? /* @__PURE__ */ jsx138(Typography8, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState13(false);
-  const [isOverflowing, setIsOverflowing] = useState13(false);
+  const [isOpen, setIsOpen] = useState12(false);
+  const [isOverflowing, setIsOverflowing] = useState12(false);
   const textReference = useRef15(null);
   const parsedMessage = useMemo10(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo10(
@@ -20766,14 +20760,14 @@ var EventMessage = ({ event }) => {
   return /* @__PURE__ */ jsxs128(Box13, { sx: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ jsxs128(Box13, { sx: { alignItems: "center", display: "flex" }, children: [
       Boolean(shouldShowToggle) && /* @__PURE__ */ jsx138(
-        IconButton3,
+        IconButton2,
         {
           onClick: () => {
             setIsOpen(!isOpen);
           },
           size: "small",
           sx: { mr: 1, p: 0 },
-          children: isOpen ? /* @__PURE__ */ jsx138(KeyboardArrowDown2, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx138(KeyboardArrowRight2, { sx: { fontSize: 16 } })
+          children: isOpen ? /* @__PURE__ */ jsx138(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx138(KeyboardArrowRight, { sx: { fontSize: 16 } })
         }
       ),
       /* @__PURE__ */ jsx138(
@@ -20828,10 +20822,11 @@ var getEventLevelFromGroup = (group4) => {
 var EventDetail = ({
   displayText,
   events,
+  spanStatusCode,
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ jsx138(IAMPermissionDetail, { events });
+    return /* @__PURE__ */ jsx138(IAMPermissionDetail, { events, spanStatusCode });
   }
   const eventLevel = getEventLevelFromGroup(type);
   return /* @__PURE__ */ jsxs128(Box13, { children: [
@@ -30530,8 +30525,8 @@ var QueryStatus = {
 };
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
-import { Box as Box14, CircularProgress as CircularProgress3, Stack, Typography as Typography9 } from "@mui/material";
-import { useEffect as useEffect19, useMemo as useMemo11, useRef as useRef16, useState as useState14 } from "react";
+import { Box as Box14, CircularProgress as CircularProgress3, Stack as Stack2, Typography as Typography9 } from "@mui/material";
+import { useEffect as useEffect19, useMemo as useMemo11, useRef as useRef16, useState as useState13 } from "react";
 import { jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
@@ -30560,9 +30555,9 @@ function useCloudWatchLogsClient(region) {
   return client;
 }
 function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
-  const [loading, setLoading] = useState14(true);
-  const [logs, setLogs] = useState14([]);
-  const [error, setError] = useState14();
+  const [loading, setLoading] = useState13(true);
+  const [logs, setLogs] = useState13([]);
+  const [error, setError] = useState13();
   const pollTimerRef = useRef16(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
   useEffect19(() => {
@@ -30622,7 +30617,7 @@ function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, en
 var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, region, requestId, startTimeNano }) => {
   const { error, loading, logs } = useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano);
   if (loading) {
-    return /* @__PURE__ */ jsxs129(Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
+    return /* @__PURE__ */ jsxs129(Stack2, { alignItems: "center", direction: "row", spacing: 1, children: [
       /* @__PURE__ */ jsx139(CircularProgress3, { size: 14 }),
       /* @__PURE__ */ jsx139(Typography9, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
     ] });
@@ -30637,12 +30632,12 @@ var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, regio
 };
 
 // src/components/event-details/toggle-section.tsx
-import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
+import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box15, Typography as Typography10 } from "@mui/material";
-import { useState as useState15 } from "react";
+import { useState as useState14 } from "react";
 import { jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState15(initialOpen);
+  const [isOpen, setIsOpen] = useState14(initialOpen);
   return /* @__PURE__ */ jsxs130(Box15, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ jsxs130(
       Box15,
@@ -30669,7 +30664,7 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
               },
               children: [
                 /* @__PURE__ */ jsx140(Typography10, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-                isOpen ? /* @__PURE__ */ jsx140(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx140(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
+                isOpen ? /* @__PURE__ */ jsx140(KeyboardArrowDown2, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx140(KeyboardArrowRight2, { sx: { color: "text.secondary", height: 20, width: 20 } })
               ]
             }
           ),
@@ -30703,7 +30698,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
-  const [parseNestedJson, setParseNestedJson] = useState16(true);
+  const [parseNestedJson, setParseNestedJson] = useState15(true);
   if (!selectedEvent) {
     return /* @__PURE__ */ jsx141(Box16, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx141(Typography11, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
@@ -30743,12 +30738,12 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         },
         children: [
           /* @__PURE__ */ jsx141(Box16, { children: /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ jsx141(IconButton4, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx141(Close2, {}) })
+          onClose && /* @__PURE__ */ jsx141(IconButton3, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx141(Close2, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx141(Box16, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs131(Stack2, { spacing: 2, children: [
-      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs131(Stack2, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
+    /* @__PURE__ */ jsx141(Box16, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs131(Stack3, { spacing: 2, children: [
+      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs131(Stack3, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
         /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
           /* @__PURE__ */ jsxs131(Box16, { children: [
             /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
@@ -30798,7 +30793,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         ] }),
         /* @__PURE__ */ jsxs131(Box16, { children: [
           /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
-          /* @__PURE__ */ jsx141(Stack2, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx141(
+          /* @__PURE__ */ jsx141(Stack3, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx141(
             Chip3,
             {
               color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
@@ -30813,7 +30808,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
       /* @__PURE__ */ jsxs131(ToggleSection, { headline: "Permissions", children: [
         selectedEvent.iam_errors_suppressed && /* @__PURE__ */ jsx141(Alert4, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
         !selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx141(Typography11, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
-        eventGroups.permissions && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, type: "permission" }),
+        eventGroups.permissions && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
         eventGroups.errors && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
         eventGroups.warnings && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
       ] }),
@@ -30833,7 +30828,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
               }
             ),
             headline: "Payloads",
-            children: /* @__PURE__ */ jsxs131(Stack2, { spacing: 2, children: [
+            children: /* @__PURE__ */ jsxs131(Stack3, { spacing: 2, children: [
               requestPayload !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
                 /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
                 /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
@@ -30864,7 +30859,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         ) })
       ] }),
       /* @__PURE__ */ jsx141(Divider4, {}),
-      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs131(Stack2, { spacing: 1, children: [
+      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs131(Stack3, { spacing: 1, children: [
         /* @__PURE__ */ jsxs131(Box16, { children: [
           /* @__PURE__ */ jsx141(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
           /* @__PURE__ */ jsx141(Typography11, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id })
@@ -30890,64 +30885,12 @@ import { Background, MarkerType, Position as Position2, ReactFlow, useEdgesState
 import { useEffect as useEffect20 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Box as Box18, Divider as Divider5, Stack as Stack3, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
+import { Cancel as Cancel3, GppBad as GppBad2 } from "@mui/icons-material";
+import { Box as Box17, Divider as Divider5, Stack as Stack4, Tooltip as Tooltip5, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
-import { memo as memo11 } from "react";
-
-// src/components/trace-graph/problem-indicator.tsx
-import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
-import { Box as Box17, Tooltip as Tooltip5 } from "@mui/material";
-import { useMemo as useMemo13 } from "react";
-import { jsx as jsx142 } from "react/jsx-runtime";
-var ProblemIndicator = ({ error }) => {
-  const icon = useMemo13(() => {
-    switch (error.level) {
-      case "error": {
-        return /* @__PURE__ */ jsx142(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
-      }
-      case "warning": {
-        return /* @__PURE__ */ jsx142(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
-      }
-      default: {
-        return /* @__PURE__ */ jsx142(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
-      }
-    }
-  }, [error.level]);
-  const color2 = useMemo13(() => {
-    switch (error.level) {
-      case "error": {
-        return "#d32f2f";
-      }
-      case "warning": {
-        return "#ff9800";
-      }
-      default: {
-        return "#2196f3";
-      }
-    }
-  }, [error.level]);
-  return /* @__PURE__ */ jsx142(Tooltip5, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx142(
-    Box17,
-    {
-      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
-import { jsx as jsx143, jsxs as jsxs132 } from "react/jsx-runtime";
+import { memo as memo11, useMemo as useMemo13 } from "react";
+import { jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
@@ -30955,9 +30898,17 @@ var handleStyle = {
 };
 var ServiceNode = memo11(({ data, selected }) => {
   const theme = useTheme4();
-  const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
+  const isError = data.event.status_code === 2;
+  const hasPermissionEvents = useMemo13(
+    () => 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__ */ jsxs132(
-    Box18,
+    Box17,
     {
       "data-testid": SERVICE_NODE_TEST_ID,
       role: "button",
@@ -30966,31 +30917,31 @@ var ServiceNode = memo11(({ 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__ */ jsx143(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-        /* @__PURE__ */ jsx143(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+        /* @__PURE__ */ jsx142(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+        /* @__PURE__ */ jsx142(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
         /* @__PURE__ */ jsxs132(
-          Stack3,
+          Stack4,
           {
             alignItems: "center",
             direction: "row",
             sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
             children: [
-              /* @__PURE__ */ jsx143(Box18, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx143(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
-              /* @__PURE__ */ jsxs132(Stack3, { sx: { minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx143(
+              /* @__PURE__ */ jsx142(Box17, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx142(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
+              /* @__PURE__ */ jsxs132(Stack4, { sx: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx142(
                   Typography12,
                   {
                     noWrap: true,
@@ -30999,7 +30950,7 @@ var ServiceNode = memo11(({ data, selected }) => {
                     children: getServiceDisplayName(data.event.service_name)
                   }
                 ),
-                data.event.resource_name != "" && /* @__PURE__ */ jsx143(
+                data.event.resource_name != "" && /* @__PURE__ */ jsx142(
                   Typography12,
                   {
                     color: "text.secondary",
@@ -31013,16 +30964,16 @@ var ServiceNode = memo11(({ data, selected }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsx143(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+        /* @__PURE__ */ jsx142(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
         /* @__PURE__ */ jsxs132(
-          Stack3,
+          Stack4,
           {
             alignItems: "center",
             direction: "row",
             sx: { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
             children: [
-              /* @__PURE__ */ jsx143(
-                Box18,
+              /* @__PURE__ */ jsxs132(
+                Box17,
                 {
                   sx: {
                     alignItems: "center",
@@ -31031,10 +30982,13 @@ var ServiceNode = memo11(({ data, selected }) => {
                     justifyContent: "center",
                     width: "38px"
                   },
-                  children: hasErrors && data.event.errors?.map((error) => /* @__PURE__ */ jsx143(ProblemIndicator, { error }, error.span_id))
+                  children: [
+                    (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip5, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx142(GppBad2, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
+                    isError && !hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip5, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx142(Cancel3, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsx143(
+              /* @__PURE__ */ jsx142(
                 Typography12,
                 {
                   "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
@@ -31108,11 +31062,11 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box19, IconButton as IconButton5 } from "@mui/material";
+import { Box as Box18, IconButton as IconButton4 } from "@mui/material";
 import { useReactFlow, useStore as useStore2 } from "@xyflow/react";
 import { memo as memo12 } from "react";
 import { shallow } from "zustand/shallow";
-import { jsx as jsx144, jsxs as jsxs133 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
 var selector = (s2) => ({
   isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
@@ -31131,7 +31085,7 @@ var Controls = memo12(() => {
     void fitView();
   };
   return /* @__PURE__ */ jsxs133(
-    Box19,
+    Box18,
     {
       sx: {
         bottom: 0,
@@ -31144,33 +31098,33 @@ var Controls = memo12(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx144(
-          IconButton5,
+        /* @__PURE__ */ jsx143(
+          IconButton4,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx144(Add, {})
+            children: /* @__PURE__ */ jsx143(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx144(
-          IconButton5,
+        /* @__PURE__ */ jsx143(
+          IconButton4,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx144(Remove, {})
+            children: /* @__PURE__ */ jsx143(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx144(
-          IconButton5,
+        /* @__PURE__ */ jsx143(
+          IconButton4,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx144(FitScreen, {})
+            children: /* @__PURE__ */ jsx143(FitScreen, {})
           }
         )
       ]
@@ -31179,7 +31133,7 @@ var Controls = memo12(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment12, jsx as jsx145, jsxs as jsxs134 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx144, jsxs as jsxs134 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -31246,7 +31200,7 @@ var TraceGraph = ({
     spans.error && /* @__PURE__ */ jsxs134(
       Alert5,
       {
-        action: /* @__PURE__ */ jsx145(Button5, { onClick: () => {
+        action: /* @__PURE__ */ jsx144(Button5, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -31275,8 +31229,8 @@ var TraceGraph = ({
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx145(Controls, {}),
-          /* @__PURE__ */ jsx145(
+          /* @__PURE__ */ jsx144(Controls, {}),
+          /* @__PURE__ */ jsx144(
             Background,
             {
               bgColor: theme.palette.background.default,
@@ -31290,7 +31244,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment13, jsx as jsx146, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx145, jsxs as jsxs135 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -31340,7 +31294,7 @@ var TraceGraphView = ({
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   return /* @__PURE__ */ jsxs135(
-    Box20,
+    Box19,
     {
       "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
       sx: {
@@ -31352,13 +31306,13 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs135(Box20, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx146(Button6, { onClick: () => {
+        /* @__PURE__ */ jsxs135(Box19, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ jsx145(Button6, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx146(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx146(Box20, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ jsx145(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx145(Box19, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ jsx146(
+        /* @__PURE__ */ jsx145(
           Paper3,
           {
             sx: {
@@ -31368,7 +31322,7 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx146(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx145(
               StatusMessage,
               {
                 error: statusError,
@@ -31377,14 +31331,14 @@ var TraceGraphView = ({
                 status
               }
             ) : /* @__PURE__ */ jsxs135(Fragment13, { children: [
-              /* @__PURE__ */ jsx146(Main, { open, children: /* @__PURE__ */ jsx146(
-                Box20,
+              /* @__PURE__ */ jsx145(Main, { open, children: /* @__PURE__ */ jsx145(
+                Box19,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx146(ReactFlowProvider, { children: /* @__PURE__ */ jsx146(
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx145(ReactFlowProvider, { children: /* @__PURE__ */ jsx145(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -31401,7 +31355,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx146(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx146(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -31445,9 +31399,9 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState17();
-  const [loading, setLoading] = useState17(false);
-  const [fetchError, setFetchError] = useState17();
+  const [spans, setSpans] = useState16();
+  const [loading, setLoading] = useState16(false);
+  const [fetchError, setFetchError] = useState16();
   const fetchSpans = useCallback11(async () => {
     setLoading(true);
     try {
@@ -31464,8 +31418,8 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   useEffect21(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState17(true);
-  const [selectedEvent, setSelectedEvent] = useState17(() => spans?.find((span) => span.span_id === spanId));
+  const [open, setOpen] = useState16(true);
+  const [selectedEvent, setSelectedEvent] = useState16(() => spans?.find((span) => span.span_id === spanId));
   const spansReference = useRef17();
   useEffect21(() => {
     if (!spansReference.current && spans) {
@@ -31494,7 +31448,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const navigateToSpansList = useCallback11(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsx146(
+  return /* @__PURE__ */ jsx145(
     TraceGraphView,
     {
       fetchError,
@@ -31519,7 +31473,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-import { Fragment as Fragment14, jsx as jsx147, jsxs as jsxs136 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx146, jsxs as jsxs136 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -31548,10 +31502,10 @@ var SpansListPage = () => {
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
   const versionCompatibility = checkEmulatorVersion(localstackVersion);
-  const [bannerDismissed, setBannerDismissed] = useState18(false);
+  const [bannerDismissed, setBannerDismissed] = useState17(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = useState18();
-  const [selectedSpanId, setSelectedSpanId] = useState18();
+  const [selectedTraceId, setSelectedTraceId] = useState17();
+  const [selectedSpanId, setSelectedSpanId] = useState17();
   const navigateToSpan = useCallback12((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
@@ -31568,7 +31522,7 @@ var SpansListPage = () => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   return /* @__PURE__ */ jsxs136(Fragment14, { children: [
     /* @__PURE__ */ jsxs136(
-      Box21,
+      Box20,
       {
         "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
@@ -31583,7 +31537,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          !checking && !shouldShowStatusMessage && /* @__PURE__ */ jsx147(
+          !checking && !shouldShowStatusMessage && /* @__PURE__ */ jsx146(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -31593,7 +31547,7 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          shouldShowStatusMessage ? /* @__PURE__ */ jsx147(
+          shouldShowStatusMessage ? /* @__PURE__ */ jsx146(
             StatusMessage,
             {
               error: statusError,
@@ -31602,7 +31556,7 @@ var SpansListPage = () => {
               onRetry: handleRetry,
               status
             }
-          ) : /* @__PURE__ */ jsx147(
+          ) : /* @__PURE__ */ jsx146(
             SpansList,
             {
               clearingSpans,
@@ -31630,7 +31584,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ jsx147(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ jsx146(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });