@localstack/appinspector-ui 1.0.157 → 1.0.158

package/dist/index.js

@@ -2421,8 +2421,8 @@ var init_event_streams = __esm({
 });
 
 // src/pages/spans-list-page.tsx
-import { Box as Box19, Paper as Paper3 } from "@mui/material";
-import { useCallback as useCallback12, useEffect as useEffect22, useRef as useRef17, useState as useState20 } from "react";
+import { Box as Box20, Paper as Paper3 } from "@mui/material";
+import { useCallback as useCallback12, useEffect as useEffect22, useRef as useRef17, useState as useState21 } from "react";
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -2507,6 +2507,10 @@ var SERVICE_NODE_TEST_ID = "service-node";
 var SERVICE_NODE_SERVICE_NAME_TEST_ID = "service-node-service-name";
 var SERVICE_NODE_OPERATION_NAME_TEST_ID = "service-node-operation-name";
 var EMULATOR_VERSION_BANNER_TEST_ID = "emulator-version-banner";
+var SPANS_FILTER_PRODUCER_TEST_ID = "spans-filter-producer";
+var SPANS_FILTER_CONSUMER_TEST_ID = "spans-filter-consumer";
+var SPANS_FILTER_STATUS_TEST_ID = "spans-filter-status";
+var SPANS_FILTER_NO_MATCH_TEST_ID = "spans-filter-no-match";
 
 // src/utils/emulator-version.ts
 var import_semver = __toESM(require_semver2(), 1);
@@ -2594,15 +2598,14 @@ var EmulatorVersionBanner = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-import { Alert as Alert2, Box as Box5, Button as Button3 } from "@mui/material";
+import { Alert as Alert2, Box as Box6, Button as Button4 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
 import { Close, DeleteForeverOutlined, Search } from "@mui/icons-material";
 import {
-  Box as Box4,
-  Button as Button2,
+  Box as Box5,
+  Button as Button3,
   CircularProgress,
-  FormControlLabel,
   Grid,
   IconButton as IconButton2,
   InputAdornment,
@@ -2615,7 +2618,7 @@ import {
   TableSortLabel,
   TextField,
   Tooltip as Tooltip4,
-  Typography as Typography4,
+  Typography as Typography5,
   useTheme as useTheme2
 } from "@mui/material";
 
@@ -13074,7 +13077,7 @@ var motion = /* @__PURE__ */ createMotionProxy(function(Component, config) {
 });
 
 // src/components/spans-list/spans-data-grid.tsx
-import { memo as memo8, useCallback as useCallback2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef6, useState as useState5 } from "react";
+import { memo as memo8, useCallback as useCallback2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
 
 // src/components/cells/responsive-timestamp-cell.tsx
 import { memo as memo3 } from "react";
@@ -13084,9 +13087,21 @@ var ResponsiveTimestampCell = memo3(({ date }) => {
   return /* @__PURE__ */ jsx3("div", { style: { width: "100%" }, children: formattedTime });
 });
 
-// src/components/cells/service-cell.tsx
-import { Box, Stack, Typography, useTheme } from "@mui/material";
-import { memo as memo7 } from "react";
+// src/types/error-levels.ts
+var ErrorLevel = {
+  ERROR: 3,
+  // General error
+  IAM_PERMISSION: 5,
+  // IAM permission issues
+  OK: 2,
+  // OK
+  // Standard OTEL status codes
+  UNSET: 1,
+  // Unset
+  // Extended custom levels
+  WARNING: 4
+  // Warning
+};
 
 // src/utils/service-display-name.ts
 var SERVICE_DISPLAY_NAME = {
@@ -13220,6 +13235,10 @@ var getServiceDisplayName = (code) => {
   return SERVICE_DISPLAY_NAME[code] ?? code;
 };
 
+// src/components/cells/service-cell.tsx
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { memo as memo7 } from "react";
+
 // src/components/aws-service-icon/aws-service-icon.tsx
 import { Tooltip } from "@mui/material";
 import { memo as memo6 } from "react";
@@ -15196,22 +15215,6 @@ ServiceCell.displayName = "ServiceCell";
 import { Cancel, Error as Error2, GppBad } from "@mui/icons-material";
 import { Box as Box2, Divider, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
 
-// src/types/error-levels.ts
-var ErrorLevel = {
-  ERROR: 3,
-  // General error
-  IAM_PERMISSION: 5,
-  // IAM permission issues
-  OK: 2,
-  // OK
-  // Standard OTEL status codes
-  UNSET: 1,
-  // Unset
-  // Extended custom levels
-  WARNING: 4
-  // Warning
-};
-
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
   if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {
@@ -15401,7 +15404,7 @@ var StatRow = ({ label, value }) => /* @__PURE__ */ jsxs120(Box3, { sx: { alignI
   /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
   /* @__PURE__ */ jsx125(Typography3, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
 ] });
-var SpanCountBadge = ({ licenseLimit, searchActive = false, systemLimit, totalCount, visibleCount }) => {
+var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) => {
   const [anchorElement, setAnchorElement] = useState4();
   const bindingLimit = resolveBindingLimit(systemLimit, licenseLimit);
   if (totalCount === void 0 && bindingLimit === void 0) {
@@ -15416,7 +15419,7 @@ var SpanCountBadge = ({ licenseLimit, searchActive = false, systemLimit, totalCo
     isLoading ? /* @__PURE__ */ jsx125(Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
       /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", variant: "caption", children: "Showing" }),
       /* @__PURE__ */ jsx125(Typography3, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
-      /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} ${searchActive ? "matches" : "operations"}` })
+      /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", variant: "caption", children: "operations" })
     ] }),
     /* @__PURE__ */ jsx125(Tooltip3, { title: "Operation count details", children: /* @__PURE__ */ jsx125(
       IconButton,
@@ -15444,22 +15447,13 @@ var SpanCountBadge = ({ licenseLimit, searchActive = false, systemLimit, totalCo
         children: /* @__PURE__ */ jsxs120(Box3, { sx: { minWidth: 240, p: 2 }, children: [
           /* @__PURE__ */ jsx125(Typography3, { fontWeight: 700, variant: "body2", children: "Storage" }),
           /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", sx: { mt: 0.25 }, variant: "caption", children: "How many operations are currently stored." }),
-          /* @__PURE__ */ jsxs120(Box3, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: [
-            /* @__PURE__ */ jsx125(
-              StatRow,
-              {
-                label: /* @__PURE__ */ jsx125(Tooltip3, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ jsx125(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
-                value: visibleCount
-              }
-            ),
-            /* @__PURE__ */ jsx125(
-              StatRow,
-              {
-                label: /* @__PURE__ */ jsx125(Tooltip3, { placement: "left", title: searchActive ? "The total number of operations matching the search." : "The total number of operations stored on the server.", children: /* @__PURE__ */ jsx125(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: searchActive ? "Total matches" : "Total stored" }) }),
-                value: totalCount
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsx125(Box3, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: /* @__PURE__ */ jsx125(
+            StatRow,
+            {
+              label: /* @__PURE__ */ jsx125(Tooltip3, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ jsx125(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
+              value: visibleCount
+            }
+          ) }),
           (systemLimitReached || licenseLimit !== void 0 && licenseLimit !== "unlimited") && /* @__PURE__ */ jsxs120(Fragment3, { children: [
             /* @__PURE__ */ jsx125(Divider2, { sx: { my: 1.5 } }),
             /* @__PURE__ */ jsx125(Typography3, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
@@ -15512,8 +15506,239 @@ var SpanCountBadge = ({ licenseLimit, searchActive = false, systemLimit, totalCo
   ] });
 };
 
-// src/components/spans-list/spans-data-grid.tsx
+// src/components/spans-list/spans-filter-bar.tsx
+import { ArrowDropDown, Cancel as Cancel2, FilterList, GppBad as GppBad2 } from "@mui/icons-material";
+import {
+  Box as Box4,
+  Button as Button2,
+  Checkbox,
+  Divider as Divider3,
+  ListItemText,
+  ListSubheader,
+  Menu,
+  MenuItem,
+  Typography as Typography4
+} from "@mui/material";
+import { useState as useState5 } from "react";
 import { Fragment as Fragment4, jsx as jsx126, jsxs as jsxs121 } from "react/jsx-runtime";
+var EMPTY_FILTERS = {
+  consumerService: [],
+  producerService: [],
+  status: []
+};
+var EXTERNAL_PRODUCER_VALUE = "__external__";
+function applyFilters(spans, filters) {
+  if (isFiltersEmpty(filters)) return spans;
+  return spans.filter((span) => {
+    if (filters.consumerService.length > 0 && !filters.consumerService.includes(span.service_name)) {
+      return false;
+    }
+    if (filters.producerService.length > 0) {
+      const includesExternal = filters.producerService.includes(EXTERNAL_PRODUCER_VALUE);
+      const namedServices = filters.producerService.filter((value) => value !== EXTERNAL_PRODUCER_VALUE);
+      const matchesExternal = includesExternal && !span.parent_service_name;
+      const matchesNamed = namedServices.length > 0 && !!span.parent_service_name && namedServices.includes(span.parent_service_name);
+      if (!matchesExternal && !matchesNamed) return false;
+    }
+    if (filters.status.length > 0) {
+      if (!span.operation_status) return false;
+      if (!filters.status.includes(collapseStatusValue(span.operation_status))) return false;
+    }
+    return true;
+  });
+}
+function isFiltersEmpty(filters) {
+  return filters.consumerService.length === 0 && filters.producerService.length === 0 && filters.status.length === 0;
+}
+var STATUS_LABELS = {
+  error: "Error",
+  iam_deny: "IAM Deny",
+  iam_warn: "IAM Warning",
+  ok: "Success"
+};
+var collapseStatusValue = (status) => {
+  if (status === "iam_explicit_deny" || status === "iam_implicit_deny") return "iam_deny";
+  if (status === "iam_explicit_warn" || status === "iam_implicit_warn") return "iam_warn";
+  return status;
+};
+var statusOptionIcon = (value) => {
+  switch (value) {
+    case "error": {
+      return /* @__PURE__ */ jsx126(Cancel2, { sx: { color: "error.main", fontSize: 16 } });
+    }
+    case "iam_deny": {
+      return /* @__PURE__ */ jsx126(GppBad2, { sx: { color: "error.main", fontSize: 16 } });
+    }
+    case "iam_warn": {
+      return /* @__PURE__ */ jsx126(GppBad2, { sx: { color: "warning.main", fontSize: 16 } });
+    }
+    default: {
+      return void 0;
+    }
+  }
+};
+var FilterDropdown = ({ "data-testid": testId, label, onChange, options, selected }) => {
+  const [anchorElement, setAnchorElement] = useState5();
+  const open = Boolean(anchorElement);
+  const hasSelection = selected.length > 0;
+  const handleToggle = (value) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter((item) => item !== value));
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+  return /* @__PURE__ */ jsxs121(Fragment4, { children: [
+    /* @__PURE__ */ jsxs121(
+      Button2,
+      {
+        color: hasSelection ? "primary" : "inherit",
+        "data-testid": testId,
+        endIcon: /* @__PURE__ */ jsx126(ArrowDropDown, {}),
+        onClick: (event) => {
+          setAnchorElement(event.currentTarget);
+        },
+        size: "small",
+        startIcon: /* @__PURE__ */ jsx126(FilterList, { sx: { fontSize: "16px !important" } }),
+        sx: {
+          "& .MuiButton-endIcon": { ml: 0.25 },
+          "color": hasSelection ? "primary.main" : "text.secondary",
+          "flexShrink": 0,
+          "textTransform": "none",
+          "whiteSpace": "nowrap"
+        },
+        variant: hasSelection ? "outlined" : "text",
+        children: [
+          label,
+          hasSelection && /* @__PURE__ */ jsx126(
+            Box4,
+            {
+              component: "span",
+              sx: {
+                bgcolor: "primary.main",
+                borderRadius: "10px",
+                color: "primary.contrastText",
+                fontSize: "0.65rem",
+                fontWeight: 700,
+                lineHeight: 1,
+                ml: 0.5,
+                px: 0.75,
+                py: 0.25
+              },
+              children: selected.length
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs121(
+      Menu,
+      {
+        anchorEl: anchorElement,
+        onClose: () => {
+          setAnchorElement(void 0);
+        },
+        open,
+        slotProps: { paper: { sx: { maxHeight: 320, minWidth: 200 } } },
+        children: [
+          /* @__PURE__ */ jsx126(ListSubheader, { sx: { fontSize: "0.7rem", letterSpacing: "0.08em", lineHeight: "2rem", textTransform: "uppercase" }, children: label }),
+          options.length === 0 && /* @__PURE__ */ jsx126(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx126(Typography4, { color: "text.secondary", variant: "body2", children: "No options available" }) }),
+          options.map((option) => /* @__PURE__ */ jsxs121(
+            MenuItem,
+            {
+              dense: true,
+              onClick: () => {
+                handleToggle(option.value);
+              },
+              children: [
+                /* @__PURE__ */ jsx126(
+                  Checkbox,
+                  {
+                    checked: selected.includes(option.value),
+                    size: "small",
+                    sx: { mr: 1, p: 0.25 }
+                  }
+                ),
+                !!option.serviceCode && /* @__PURE__ */ jsx126(Box4, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, mr: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx126(AwsServiceIcon, { hideTooltip: true, service: option.serviceCode, size: "medium" }) }),
+                !!option.icon && /* @__PURE__ */ jsx126(Box4, { sx: { alignItems: "center", display: "flex", flexShrink: 0, mr: 1 }, children: option.icon }),
+                /* @__PURE__ */ jsx126(
+                  ListItemText,
+                  {
+                    primary: option.label,
+                    primaryTypographyProps: { variant: "body2" }
+                  }
+                )
+              ]
+            },
+            option.value
+          )),
+          hasSelection && /* @__PURE__ */ jsxs121(Fragment4, { children: [
+            /* @__PURE__ */ jsx126(Divider3, {}),
+            /* @__PURE__ */ jsx126(
+              MenuItem,
+              {
+                dense: true,
+                onClick: () => {
+                  onChange([]);
+                },
+                children: /* @__PURE__ */ jsx126(Typography4, { color: "text.secondary", sx: { pl: 4 }, variant: "body2", children: "Clear" })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+var SpansFilterBar = ({
+  consumerOptions,
+  filters,
+  onFiltersChange,
+  producerOptions,
+  statusOptions
+}) => {
+  return /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", gap: 1 }, children: [
+    /* @__PURE__ */ jsx126(
+      FilterDropdown,
+      {
+        "data-testid": SPANS_FILTER_PRODUCER_TEST_ID,
+        label: "Producer",
+        onChange: (producerService) => {
+          onFiltersChange({ ...filters, producerService });
+        },
+        options: producerOptions,
+        selected: filters.producerService
+      }
+    ),
+    /* @__PURE__ */ jsx126(
+      FilterDropdown,
+      {
+        "data-testid": SPANS_FILTER_CONSUMER_TEST_ID,
+        label: "Consumer",
+        onChange: (consumerService) => {
+          onFiltersChange({ ...filters, consumerService });
+        },
+        options: consumerOptions,
+        selected: filters.consumerService
+      }
+    ),
+    /* @__PURE__ */ jsx126(
+      FilterDropdown,
+      {
+        "data-testid": SPANS_FILTER_STATUS_TEST_ID,
+        label: "Status",
+        onChange: (status) => {
+          onFiltersChange({ ...filters, status });
+        },
+        options: statusOptions,
+        selected: filters.status
+      }
+    )
+  ] });
+};
+
+// src/components/spans-list/spans-data-grid.tsx
+import { Fragment as Fragment5, jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
 var columnHelper = createColumnHelper();
 var newSpanBackgroundColor = {
   dark: { from: "rgba(136, 123, 2, 1)", to: "rgba(136, 123, 2, 0)" },
@@ -15525,28 +15750,29 @@ var LABEL_NO_SPANS = "There are no operations";
 var SEARCH_MAX_LENGTH = 512;
 var SEARCH_DEBOUNCE_MS = 300;
 var STICK_TO_EDGE_THRESHOLD_PX = 4;
-var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx126("span", { children: label }) }) });
-var LoadingRow = ({ colSpan }) => /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx126(CircularProgress, { size: 24, sx: { m: 2 } }) }) });
-var NoMatchRow = ({
-  colSpan,
-  onClearSearch,
-  term
-}) => /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan, "data-testid": SPANS_SEARCH_NO_MATCH_TEST_ID, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", flexDirection: "column", gap: 1, py: 3 }, children: [
-  /* @__PURE__ */ jsx126(Typography4, { sx: { fontStyle: "italic" }, variant: "body2", children: `No operations match \u201C${term}\u201D` }),
-  /* @__PURE__ */ jsx126(Button2, { onClick: onClearSearch, size: "small", variant: "text", children: "Clear search" })
-] }) }) });
+var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127("span", { children: label }) }) });
+var LoadingRow = ({ colSpan }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 24, sx: { m: 2 } }) }) });
+var NoMatchRow = ({ colSpan, filtersActive, onClearAll, searchActive, term }) => {
+  const message = searchActive && filtersActive ? `No operations match "${term}" and the active filters` : searchActive ? `No operations match "${term}"` : "No operations match the active filters";
+  const clearLabel = searchActive && filtersActive ? "Clear search and filters" : searchActive ? "Clear search" : "Clear filters";
+  const testId = searchActive ? SPANS_SEARCH_NO_MATCH_TEST_ID : SPANS_FILTER_NO_MATCH_TEST_ID;
+  return /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, "data-testid": testId, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsxs122(Box5, { sx: { alignItems: "center", display: "flex", flexDirection: "column", gap: 1, py: 3 }, children: [
+    /* @__PURE__ */ jsx127(Typography5, { sx: { fontStyle: "italic" }, variant: "body2", children: message }),
+    /* @__PURE__ */ jsx127(Button3, { onClick: onClearAll, size: "small", variant: "text", children: clearLabel })
+  ] }) }) });
+};
 var SpansSearchField = ({ onChange, onClear, searchSupported, value }) => {
-  const field = /* @__PURE__ */ jsx126(
+  const field = /* @__PURE__ */ jsx127(
     TextField,
     {
       disabled: !searchSupported,
       inputProps: {
-        "aria-label": "Search operations",
+        "aria-label": "Search",
         "data-testid": SPANS_SEARCH_INPUT_TEST_ID,
         "maxLength": SEARCH_MAX_LENGTH
       },
       InputProps: {
-        endAdornment: value ? /* @__PURE__ */ jsx126(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx126(
+        endAdornment: value ? /* @__PURE__ */ jsx127(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx127(
           IconButton2,
           {
             "aria-label": "Clear search",
@@ -15554,27 +15780,31 @@ var SpansSearchField = ({ onChange, onClear, searchSupported, value }) => {
             edge: "end",
             onClick: onClear,
             size: "small",
-            children: /* @__PURE__ */ jsx126(Close, { sx: { fontSize: 16 } })
+            children: /* @__PURE__ */ jsx127(Close, { sx: { fontSize: 16 } })
           }
         ) }) : void 0,
-        startAdornment: /* @__PURE__ */ jsx126(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx126(Search, { sx: { fontSize: 18 } }) })
+        startAdornment: /* @__PURE__ */ jsx127(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx127(Search, { sx: { fontSize: 16 } }) })
       },
       onChange: (event) => {
         onChange(event.target.value);
       },
-      placeholder: "Search operations\u2026",
+      placeholder: "Search\u2026",
       size: "small",
-      sx: { minWidth: 260 },
+      sx: {
+        "& .MuiInputBase-input": { fontSize: "0.8125rem", py: "6px" },
+        "minWidth": 160,
+        "width": "100%"
+      },
       value
     }
   );
   if (searchSupported) return field;
-  return /* @__PURE__ */ jsx126(Tooltip4, { title: `Search requires LocalStack \u2265 ${MIN_EMULATOR_VERSION_FOR_SEARCH}`, children: /* @__PURE__ */ jsx126("span", { children: field }) });
+  return /* @__PURE__ */ jsx127(Tooltip4, { title: `Search requires LocalStack \u2265 ${MIN_EMULATOR_VERSION_FOR_SEARCH}`, children: /* @__PURE__ */ jsx127("span", { children: field }) });
 };
 var SpansDataGridRow = memo8(
   ({ isNew, onSpanClick, row }) => {
     const theme = useTheme2();
-    return /* @__PURE__ */ jsx126(
+    return /* @__PURE__ */ jsx127(
       TableRow,
       {
         animate: {
@@ -15593,7 +15823,7 @@ var SpansDataGridRow = memo8(
           transition: "background-color 1200ms ease-in"
         },
         children: row.getVisibleCells().map((cell) => {
-          return /* @__PURE__ */ jsx126(
+          return /* @__PURE__ */ jsx127(
             TableCell,
             {
               sx: {
@@ -15601,8 +15831,8 @@ var SpansDataGridRow = memo8(
                 maxWidth: `${cell.column.getSize().toString()}px`,
                 minWidth: `${cell.column.getSize().toString()}px`
               },
-              children: /* @__PURE__ */ jsx126(
-                Box4,
+              children: /* @__PURE__ */ jsx127(
+                Box5,
                 {
                   sx: {
                     "alignItems": "center",
@@ -15614,7 +15844,7 @@ var SpansDataGridRow = memo8(
                     },
                     "width": "100%"
                   },
-                  children: /* @__PURE__ */ jsx126(Box4, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+                  children: /* @__PURE__ */ jsx127(Box5, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
                 }
               )
             },
@@ -15630,7 +15860,7 @@ var SpansDataGridRow = memo8(
 );
 var SpansDataGrid = ({
   clearingSpans,
-  errorCount,
+  errorCount: _errorCount,
   fetchingBackward,
   fetchingForward,
   hasMoreBackward,
@@ -15647,10 +15877,10 @@ var SpansDataGrid = ({
   spans,
   systemLimit,
   totalCount,
-  warningCount
+  warningCount: _warningCount
 }) => {
   const searchActive = search.length > 0;
-  const [searchDraft, setSearchDraft] = useState5(search);
+  const [searchDraft, setSearchDraft] = useState6(search);
   useEffect11(() => {
     const handle = setTimeout(() => {
       onSearchChange(searchDraft);
@@ -15659,18 +15889,86 @@ var SpansDataGrid = ({
       clearTimeout(handle);
     };
   }, [searchDraft, onSearchChange]);
+  const [filters, setFilters] = useState6(EMPTY_FILTERS);
+  const filtersActive = !isFiltersEmpty(filters);
+  const activeFilterNames = [
+    filters.producerService.length > 0 && "Producer",
+    filters.consumerService.length > 0 && "Consumer",
+    filters.status.length > 0 && "Status"
+  ].filter(Boolean);
+  const filteredByLabel = activeFilterNames.length <= 1 ? activeFilterNames[0] ?? "" : `${activeFilterNames.slice(0, -1).join(", ")} and ${activeFilterNames.at(-1) ?? ""}`;
   const handleClearSearch = useCallback2(() => {
     setSearchDraft("");
     onSearchChange("");
   }, [onSearchChange]);
+  const handleClearAll = useCallback2(() => {
+    setSearchDraft("");
+    onSearchChange("");
+    setFilters(EMPTY_FILTERS);
+  }, [onSearchChange]);
   const handleClearSpans = useCallback2(() => {
     setSearchDraft("");
+    setFilters(EMPTY_FILTERS);
     onClearSpans();
   }, [onClearSpans]);
+  const producerOptions = useMemo4(() => {
+    const services = new Set(
+      spans?.map((span) => span.parent_service_name).filter(Boolean) ?? []
+    );
+    for (const value of filters.producerService) {
+      if (value !== EXTERNAL_PRODUCER_VALUE) services.add(value);
+    }
+    const options = [...services].toSorted().map((service) => ({
+      label: getServiceDisplayName(service),
+      serviceCode: service,
+      value: service
+    }));
+    const hasExternalProducer = spans?.some((span) => !span.parent_service_name);
+    if (hasExternalProducer || filters.producerService.includes(EXTERNAL_PRODUCER_VALUE)) {
+      options.push({ label: "External producer", value: EXTERNAL_PRODUCER_VALUE });
+    }
+    return options;
+  }, [spans, filters.producerService]);
+  const consumerOptions = useMemo4(() => {
+    const services = new Set(spans?.map((span) => span.service_name) ?? []);
+    for (const value of filters.consumerService) services.add(value);
+    return [...services].toSorted().map((service) => ({
+      label: getServiceDisplayName(service),
+      serviceCode: service,
+      value: service
+    }));
+  }, [spans, filters.consumerService]);
+  const statusOptions = useMemo4(() => {
+    const statuses = new Set(
+      spans?.map((span) => span.operation_status).filter(Boolean).map((s) => collapseStatusValue(s))
+    );
+    for (const value of filters.status) statuses.add(value);
+    return [...statuses].toSorted().map((status) => ({
+      icon: statusOptionIcon(status),
+      label: STATUS_LABELS[status] ?? status,
+      value: status
+    }));
+  }, [spans, filters.status]);
+  const filteredSpans = useMemo4(() => {
+    if (!spans) return;
+    if (!filtersActive) return spans;
+    return applyFilters(spans, filters);
+  }, [spans, filters, filtersActive]);
+  const filteredErrorCount = useMemo4(
+    () => filteredSpans?.filter((span) => {
+      const level = calculateHighestErrorLevel(span);
+      return level === ErrorLevel.ERROR || level === ErrorLevel.IAM_PERMISSION;
+    }).length,
+    [filteredSpans]
+  );
+  const filteredWarningCount = useMemo4(
+    () => filteredSpans?.filter((span) => calculateHighestErrorLevel(span) === ErrorLevel.WARNING).length,
+    [filteredSpans]
+  );
   const columns = useMemo4(() => [
     columnHelper.accessor("startTime", {
-      cell: (props) => /* @__PURE__ */ jsx126(ResponsiveTimestampCell, { date: props.getValue() }),
-      header: () => /* @__PURE__ */ jsx126(
+      cell: (props) => /* @__PURE__ */ jsx127(ResponsiveTimestampCell, { date: props.getValue() }),
+      header: () => /* @__PURE__ */ jsx127(
         TableSortLabel,
         {
           active: true,
@@ -15687,9 +15985,9 @@ var SpansDataGrid = ({
     columnHelper.display({
       cell: (props) => {
         if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
-          return /* @__PURE__ */ jsx126(Typography4, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
+          return /* @__PURE__ */ jsx127(Typography5, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
         }
-        return /* @__PURE__ */ jsx126(
+        return /* @__PURE__ */ jsx127(
           ServiceCell,
           {
             resource: props.row.original.parent_resource_name,
@@ -15702,14 +16000,14 @@ var SpansDataGrid = ({
       size: 180
     }),
     columnHelper.accessor("operation_name", {
-      cell: (props) => /* @__PURE__ */ jsx126(
-        Box4,
+      cell: (props) => /* @__PURE__ */ jsx127(
+        Box5,
         {
           sx: {
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: /* @__PURE__ */ jsx126("span", { title: props.getValue(), children: props.getValue() })
+          children: /* @__PURE__ */ jsx127("span", { title: props.getValue(), children: props.getValue() })
         }
       ),
       header: "Action",
@@ -15718,7 +16016,7 @@ var SpansDataGrid = ({
     }),
     columnHelper.display({
       cell: (props) => {
-        return /* @__PURE__ */ jsx126(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
+        return /* @__PURE__ */ jsx127(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
       },
       header: "Consumer",
       id: "consumer",
@@ -15726,10 +16024,10 @@ var SpansDataGrid = ({
     }),
     columnHelper.display({
       cell: (props) => {
-        return /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", gap: 0.5, justifyContent: "flex-end" }, children: [
-          /* @__PURE__ */ jsx126(StatusIconWithTooltip, { span: props.row.original }),
-          /* @__PURE__ */ jsx126(
-            Button2,
+        return /* @__PURE__ */ jsxs122(Box5, { sx: { alignItems: "center", display: "flex", gap: 0.5, justifyContent: "flex-end" }, children: [
+          /* @__PURE__ */ jsx127(StatusIconWithTooltip, { span: props.row.original }),
+          /* @__PURE__ */ jsx127(
+            Button3,
             {
               "data-testid": VIEW_SPAN_DETAILS_TEST_ID,
               onClick: (event) => {
@@ -15750,7 +16048,7 @@ var SpansDataGrid = ({
   ], [onSpanClick, onOrderChange, order2]);
   const table = useReactTable({
     columns,
-    data: spans ?? [],
+    data: filteredSpans ?? [],
     getCoreRowModel: getCoreRowModel()
   });
   const columnCount = table.getAllColumns().length;
@@ -15784,7 +16082,7 @@ var SpansDataGrid = ({
   const paddingTop = virtualItems.length > 0 ? virtualItems[0]?.start ?? 0 : 0;
   const paddingBottom = virtualItems.length > 0 ? totalVirtualSize - (virtualItems.at(-1)?.end ?? 0) : 0;
   const seenSpanIdsRef = useRef6(void 0);
-  seenSpanIdsRef.current ??= new Set((spans ?? []).map((s) => s.span_id));
+  seenSpanIdsRef.current ??= new Set((filteredSpans ?? []).map((span) => span.span_id));
   useLayoutEffect3(() => {
     for (const virtualItem of virtualItems) {
       const row = displayRows[virtualItem.index];
@@ -15792,9 +16090,9 @@ var SpansDataGrid = ({
     }
   });
   useEffect11(() => {
-    if (spans?.length === 0) seenSpanIdsRef.current = void 0;
-  }, [spans?.length]);
-  const lastSpanId = spans?.at(-1)?.span_id;
+    if (filteredSpans?.length === 0) seenSpanIdsRef.current = void 0;
+  }, [filteredSpans?.length]);
+  const lastSpanId = filteredSpans?.at(-1)?.span_id;
   useLayoutEffect3(() => {
     handleScroll();
   }, [handleScroll]);
@@ -15804,91 +16102,101 @@ var SpansDataGrid = ({
     if (!element || !isAtLiveEdgeRef.current) return;
     element.scrollTop = element.scrollHeight;
   }, [order2, spans?.length, lastSpanId]);
-  return /* @__PURE__ */ jsxs121(Fragment4, { children: [
-    /* @__PURE__ */ jsx126(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", gap: "0.5rem", pt: 1, px: 1 }, children: [
-      /* @__PURE__ */ jsx126(
-        SpansSearchField,
-        {
-          onChange: setSearchDraft,
-          onClear: handleClearSearch,
-          searchSupported,
-          value: searchDraft
-        }
-      ),
-      /* @__PURE__ */ jsx126(
-        SpanCountBadge,
-        {
-          licenseLimit,
-          searchActive,
-          systemLimit,
-          totalCount,
-          visibleCount: spans?.length
-        }
-      ),
-      !searchActive && errorCount !== void 0 && errorCount > 0 && /* @__PURE__ */ jsxs121(Fragment4, { children: [
-        /* @__PURE__ */ jsx126(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ jsx126(Tooltip4, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ jsxs121(
-          Box4,
+  return /* @__PURE__ */ jsxs122(Fragment5, { children: [
+    /* @__PURE__ */ jsx127(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs122(Box5, { sx: { display: "flex", flexDirection: "column", gap: "0.5rem", pt: 1, px: 1 }, children: [
+      /* @__PURE__ */ jsxs122(Box5, { sx: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ jsx127(Box5, { sx: { flex: 1, maxWidth: 220, minWidth: 96, order: 1 }, children: /* @__PURE__ */ jsx127(
+          SpansSearchField,
           {
-            "data-testid": ERROR_COUNT_TEST_ID,
-            sx: {
-              alignItems: "center",
-              borderBottom: "1px dotted",
-              borderColor: "error.main",
-              cursor: "help",
-              display: "flex",
-              gap: 0.5,
-              mb: "-1px"
-            },
-            children: [
-              /* @__PURE__ */ jsx126(Typography4, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
-              /* @__PURE__ */ jsx126(Typography4, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
-            ]
+            onChange: setSearchDraft,
+            onClear: handleClearSearch,
+            searchSupported,
+            value: searchDraft
           }
-        ) })
-      ] }),
-      !searchActive && warningCount !== void 0 && warningCount > 0 && /* @__PURE__ */ jsxs121(Fragment4, { children: [
-        /* @__PURE__ */ jsx126(Typography4, { color: "text.disabled", sx: { mr: 0.5 }, variant: "body2", children: "\u2014" }),
-        /* @__PURE__ */ jsx126(Tooltip4, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ jsxs121(
-          Box4,
+        ) }),
+        /* @__PURE__ */ jsx127(Box5, { sx: { order: { md: 2, xs: 4 }, width: { md: "auto", xs: "100%" } }, children: /* @__PURE__ */ jsx127(
+          SpansFilterBar,
           {
-            "data-testid": WARNING_COUNT_TEST_ID,
-            sx: {
-              alignItems: "center",
-              borderBottom: "1px dotted",
-              borderColor: "warning.main",
-              cursor: "help",
-              display: "flex",
-              gap: 0.5,
-              mb: "-1px"
-            },
-            children: [
-              /* @__PURE__ */ jsx126(Typography4, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
-              /* @__PURE__ */ jsx126(Typography4, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
-            ]
+            consumerOptions,
+            filters,
+            onFiltersChange: setFilters,
+            producerOptions,
+            statusOptions
+          }
+        ) }),
+        /* @__PURE__ */ jsx127(Box5, { sx: { flex: 1, order: { md: 3, xs: 2 } } }),
+        /* @__PURE__ */ jsx127(Box5, { sx: { flexShrink: 0, order: { md: 4, xs: 3 } }, children: /* @__PURE__ */ jsx127(
+          Button3,
+          {
+            "data-testid": CLEAR_SPANS_TEST_ID,
+            disabled: clearingSpans,
+            onClick: handleClearSpans,
+            startIcon: /* @__PURE__ */ jsx127(DeleteForeverOutlined, {}),
+            children: "Clear Operations"
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx126(Box4, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx126(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ jsx126(
-            Button2,
+      /* @__PURE__ */ jsxs122(Box5, { sx: { alignItems: "center", display: "flex", gap: "0.5rem", pl: 0.5 }, children: [
+        /* @__PURE__ */ jsx127(
+          SpanCountBadge,
+          {
+            licenseLimit,
+            systemLimit,
+            totalCount: searchActive || filtersActive ? filteredSpans?.length : totalCount,
+            visibleCount: filteredSpans?.length
+          }
+        ),
+        filtersActive && /* @__PURE__ */ jsxs122(Fragment5, { children: [
+          /* @__PURE__ */ jsx127(Typography5, { color: "text.secondary", variant: "caption", children: "\xB7" }),
+          /* @__PURE__ */ jsx127(Typography5, { color: "text.secondary", variant: "caption", children: `Filtered by ${filteredByLabel}` })
+        ] }),
+        filteredErrorCount !== void 0 && filteredErrorCount > 0 && /* @__PURE__ */ jsxs122(Fragment5, { children: [
+          /* @__PURE__ */ jsx127(Typography5, { color: "text.secondary", variant: "caption", children: "\xB7" }),
+          /* @__PURE__ */ jsx127(Tooltip4, { title: "Number of errors detected across all operations", children: /* @__PURE__ */ jsxs122(
+            Box5,
             {
-              "data-testid": CLEAR_SPANS_TEST_ID,
-              onClick: handleClearSpans,
-              startIcon: /* @__PURE__ */ jsx126(DeleteForeverOutlined, {}),
-              children: "Clear Operations"
+              "data-testid": ERROR_COUNT_TEST_ID,
+              sx: {
+                alignItems: "center",
+                borderBottom: "1px dotted",
+                borderColor: "error.main",
+                cursor: "help",
+                display: "flex",
+                gap: 0.5,
+                mb: "-1px"
+              },
+              children: [
+                /* @__PURE__ */ jsx127(Typography5, { color: "error", variant: "body2", children: filteredErrorCount.toLocaleString() }),
+                /* @__PURE__ */ jsx127(Typography5, { color: "error", variant: "caption", children: filteredErrorCount === 1 ? "error" : "errors" })
+              ]
             }
-          ),
-          disabled: clearingSpans,
-          label: "",
-          sx: { marginRight: 0 }
-        }
-      )
+          ) })
+        ] }),
+        filteredWarningCount !== void 0 && filteredWarningCount > 0 && /* @__PURE__ */ jsxs122(Fragment5, { children: [
+          /* @__PURE__ */ jsx127(Typography5, { color: "text.secondary", variant: "caption", children: "\xB7" }),
+          /* @__PURE__ */ jsx127(Tooltip4, { title: "Number of warnings detected across all operations", children: /* @__PURE__ */ jsxs122(
+            Box5,
+            {
+              "data-testid": WARNING_COUNT_TEST_ID,
+              sx: {
+                alignItems: "center",
+                borderBottom: "1px dotted",
+                borderColor: "warning.main",
+                cursor: "help",
+                display: "flex",
+                gap: 0.5,
+                mb: "-1px"
+              },
+              children: [
+                /* @__PURE__ */ jsx127(Typography5, { color: "warning.main", variant: "body2", children: filteredWarningCount.toLocaleString() }),
+                /* @__PURE__ */ jsx127(Typography5, { color: "warning.main", variant: "caption", children: filteredWarningCount === 1 ? "warning" : "warnings" })
+              ]
+            }
+          ) })
+        ] })
+      ] })
     ] }) }),
-    /* @__PURE__ */ jsx126(Box4, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ jsx126(
+    /* @__PURE__ */ jsx127(Box5, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ jsx127(
       TableContainer,
       {
         onScroll: handleScroll,
@@ -15901,7 +16209,7 @@ var SpansDataGrid = ({
           right: 0,
           top: 0
         },
-        children: /* @__PURE__ */ jsxs121(
+        children: /* @__PURE__ */ jsxs122(
           Table,
           {
             stickyHeader: true,
@@ -15913,8 +16221,8 @@ var SpansDataGrid = ({
               "th+th": { pl: "8px !important" }
             },
             children: [
-              /* @__PURE__ */ jsx126(TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
-                return /* @__PURE__ */ jsx126(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx126(
+              /* @__PURE__ */ jsx127(TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
+                return /* @__PURE__ */ jsx127(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx127(
                   TableCell,
                   {
                     colSpan: header.colSpan,
@@ -15929,13 +16237,22 @@ var SpansDataGrid = ({
                   header.id
                 )) }, headerGroup.id);
               }) }),
-              /* @__PURE__ */ jsxs121(TableBody, { children: [
-                (spans === void 0 || clearingSpans || searching) && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx126(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                !clearingSpans && !searching && spans?.length === 0 && (searchActive ? /* @__PURE__ */ jsx126(NoMatchRow, { colSpan: columnCount, onClearSearch: handleClearSearch, term: search }) : /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS })),
-                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs121(Fragment4, { children: [
-                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
-                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(
+              /* @__PURE__ */ jsxs122(TableBody, { children: [
+                (spans === void 0 || clearingSpans || searching) && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                !clearingSpans && !searching && filteredSpans?.length === 0 && (searchActive || filtersActive ? /* @__PURE__ */ jsx127(
+                  NoMatchRow,
+                  {
+                    colSpan: columnCount,
+                    filtersActive,
+                    onClearAll: handleClearAll,
+                    searchActive,
+                    term: search
+                  }
+                ) : /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS })),
+                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs122(Fragment5, { children: [
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
+                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(
                     TableCell,
                     {
                       colSpan: columnCount,
@@ -15945,7 +16262,7 @@ var SpansDataGrid = ({
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
                     const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
-                    return /* @__PURE__ */ jsx126(
+                    return /* @__PURE__ */ jsx127(
                       SpansDataGridRow,
                       {
                         isNew,
@@ -15955,20 +16272,20 @@ var SpansDataGrid = ({
                       row.original.span_id
                     );
                   }),
-                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(
+                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(
                     TableCell,
                     {
                       colSpan: columnCount,
                       sx: { border: 0, height: paddingBottom, p: 0 }
                     }
                   ) }),
-                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
-                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
-                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs121(Fragment4, { children: [
-                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
-                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
-                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(
+                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs122(Fragment5, { children: [
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
+                  hasRows && paddingTop > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(
                     TableCell,
                     {
                       colSpan: columnCount,
@@ -15978,7 +16295,7 @@ var SpansDataGrid = ({
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
                     const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
-                    return /* @__PURE__ */ jsx126(
+                    return /* @__PURE__ */ jsx127(
                       SpansDataGridRow,
                       {
                         isNew,
@@ -15988,15 +16305,15 @@ var SpansDataGrid = ({
                       row.original.span_id
                     );
                   }),
-                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx126(TableRow, { children: /* @__PURE__ */ jsx126(
+                  hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(
                     TableCell,
                     {
                       colSpan: columnCount,
                       sx: { border: 0, height: paddingBottom, p: 0 }
                     }
                   ) }),
-                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx126(LoadingRow, { colSpan: columnCount }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx126(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
               ] })
             ]
@@ -16008,13 +16325,13 @@ var SpansDataGrid = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-import { jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs123 } from "react/jsx-runtime";
 var SpansList = (props) => {
-  return /* @__PURE__ */ jsxs122(Box5, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 1, width: "100%" }, children: [
-    props.fetchError && /* @__PURE__ */ jsxs122(
+  return /* @__PURE__ */ jsxs123(Box6, { "data-testid": SPANS_DATA_GRID_TEST_ID, sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 1, width: "100%" }, children: [
+    props.fetchError && /* @__PURE__ */ jsxs123(
       Alert2,
       {
-        action: /* @__PURE__ */ jsx127(Button3, { onClick: props.onFetchForward, children: "Retry" }),
+        action: /* @__PURE__ */ jsx128(Button4, { onClick: props.onFetchForward, children: "Retry" }),
         severity: "error",
         sx: { mt: 1, mx: 2 },
         children: [
@@ -16024,7 +16341,7 @@ var SpansList = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx127(
+    /* @__PURE__ */ jsx128(
       SpansDataGrid,
       {
         clearingSpans: props.clearingSpans,
@@ -16053,17 +16370,17 @@ var SpansList = (props) => {
 
 // src/components/status-message/status-message.tsx
 import { ErrorOutline, InfoOutlined as InfoOutlined2 } from "@mui/icons-material";
-import { Alert as Alert3, AlertTitle, Box as Box6, Button as Button4, CircularProgress as CircularProgress2, Link, Typography as Typography5 } from "@mui/material";
-import { useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx128, jsxs as jsxs123 } from "react/jsx-runtime";
+import { Alert as Alert3, AlertTitle, Box as Box7, Button as Button5, CircularProgress as CircularProgress2, Link, Typography as Typography6 } from "@mui/material";
+import { useState as useState7 } from "react";
+import { Fragment as Fragment6, jsx as jsx129, jsxs as jsxs124 } from "react/jsx-runtime";
 var StatusMessage = ({
   localstackVersion,
   onEnable,
   onRetry,
   phase
 }) => {
-  const [enabling, setEnabling] = useState6(false);
-  const [enableError, setEnableError] = useState6();
+  const [enabling, setEnabling] = useState7(false);
+  const [enableError, setEnableError] = useState7();
   const handleEnable = async () => {
     if (!onEnable) return;
     setEnabling(true);
@@ -16077,8 +16394,8 @@ var StatusMessage = ({
     }
   };
   if (phase === "CHECKING_STATUS" || phase === "CONNECTING_WS") {
-    return /* @__PURE__ */ jsx128(
-      Box6,
+    return /* @__PURE__ */ jsx129(
+      Box7,
       {
         sx: {
           alignItems: "center",
@@ -16088,13 +16405,13 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsx128(CircularProgress2, { size: 32 })
+        children: /* @__PURE__ */ jsx129(CircularProgress2, { size: 32 })
       }
     );
   }
   if (phase === "INCOMPATIBLE") {
-    return /* @__PURE__ */ jsx128(
-      Box6,
+    return /* @__PURE__ */ jsx129(
+      Box7,
       {
         sx: {
           alignItems: "center",
@@ -16104,18 +16421,18 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs123(
+        children: /* @__PURE__ */ jsxs124(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx129(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
-              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 2 }, variant: "body2", children: localstackVersion === void 0 ? `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. Please update LocalStack.` : `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. You are running version ${localstackVersion}. Please update LocalStack.` }),
-              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "Update LocalStack:" }) }),
-              /* @__PURE__ */ jsx128(
-                Box6,
+              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
+              /* @__PURE__ */ jsx129(Typography6, { sx: { mb: 2 }, variant: "body2", children: localstackVersion === void 0 ? `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. Please update LocalStack.` : `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. You are running version ${localstackVersion}. Please update LocalStack.` }),
+              /* @__PURE__ */ jsx129(Typography6, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx129("strong", { children: "Update LocalStack:" }) }),
+              /* @__PURE__ */ jsx129(
+                Box7,
                 {
                   component: "pre",
                   sx: {
@@ -16127,8 +16444,8 @@ var StatusMessage = ({
                   children: "localstack update docker-images"
                 }
               ),
-              onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", gap: 1, mt: 2 }, children: /* @__PURE__ */ jsx128(
-                Button4,
+              onRetry && /* @__PURE__ */ jsx129(Box7, { sx: { display: "flex", gap: 1, mt: 2 }, children: /* @__PURE__ */ jsx129(
+                Button5,
                 {
                   "aria-label": "Check App Inspector status again",
                   onClick: onRetry,
@@ -16143,8 +16460,8 @@ var StatusMessage = ({
     );
   }
   if (phase === "UNREACHABLE") {
-    return /* @__PURE__ */ jsx128(
-      Box6,
+    return /* @__PURE__ */ jsx129(
+      Box7,
       {
         sx: {
           alignItems: "center",
@@ -16154,17 +16471,17 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs123(
+        children: /* @__PURE__ */ jsxs124(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx129(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
-              /* @__PURE__ */ jsxs123(Typography5, { sx: { mb: 2 }, variant: "body2", children: [
+              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
+              /* @__PURE__ */ jsxs124(Typography6, { sx: { mb: 2 }, variant: "body2", children: [
                 "Failed to connect to LocalStack. Ensure ",
-                /* @__PURE__ */ jsx128(
+                /* @__PURE__ */ jsx129(
                   Link,
                   {
                     href: "https://docs.localstack.cloud/aws/getting-started/installation/",
@@ -16175,9 +16492,9 @@ var StatusMessage = ({
                 ),
                 " is running and accessible."
               ] }),
-              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "Start LocalStack:" }) }),
-              /* @__PURE__ */ jsx128(
-                Box6,
+              /* @__PURE__ */ jsx129(Typography6, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx129("strong", { children: "Start LocalStack:" }) }),
+              /* @__PURE__ */ jsx129(
+                Box7,
                 {
                   component: "pre",
                   sx: {
@@ -16189,8 +16506,8 @@ var StatusMessage = ({
                   children: "localstack start"
                 }
               ),
-              onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
-                Button4,
+              onRetry && /* @__PURE__ */ jsx129(Box7, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx129(
+                Button5,
                 {
                   "aria-label": "Retry connection to LocalStack",
                   onClick: onRetry,
@@ -16205,8 +16522,8 @@ var StatusMessage = ({
     );
   }
   if (phase === "DISABLED") {
-    return /* @__PURE__ */ jsx128(
-      Box6,
+    return /* @__PURE__ */ jsx129(
+      Box7,
       {
         sx: {
           alignItems: "center",
@@ -16216,31 +16533,31 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs123(
+        children: /* @__PURE__ */ jsxs124(
           Alert3,
           {
-            icon: /* @__PURE__ */ jsx128(InfoOutlined2, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx129(InfoOutlined2, { fontSize: "large" }),
             severity: "warning",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Is Not Enabled" }),
-              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is not currently enabled in LocalStack. You can enable it now, or at startup." }),
-              /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", gap: 1, mb: 2 }, children: onEnable && /* @__PURE__ */ jsx128(
-                Button4,
+              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Is Not Enabled" }),
+              /* @__PURE__ */ jsx129(Typography6, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is not currently enabled in LocalStack. You can enable it now, or at startup." }),
+              /* @__PURE__ */ jsx129(Box7, { sx: { display: "flex", gap: 1, mb: 2 }, children: onEnable && /* @__PURE__ */ jsx129(
+                Button5,
                 {
                   "aria-label": "Enable App Inspector Now",
                   disabled: enabling,
                   onClick: () => {
                     void handleEnable();
                   },
-                  startIcon: enabling ? /* @__PURE__ */ jsx128(CircularProgress2, { size: 16 }) : void 0,
+                  startIcon: enabling ? /* @__PURE__ */ jsx129(CircularProgress2, { size: 16 }) : void 0,
                   variant: "contained",
                   children: "Enable App Inspector Now"
                 }
               ) }),
-              /* @__PURE__ */ jsx128(Typography5, { sx: { mb: 1 }, variant: "body2", children: "If you'd prefer to automatically enable App Inspector at start up, use:" }),
-              /* @__PURE__ */ jsx128(
-                Box6,
+              /* @__PURE__ */ jsx129(Typography6, { sx: { mb: 1 }, variant: "body2", children: "If you'd prefer to automatically enable App Inspector at start up, use:" }),
+              /* @__PURE__ */ jsx129(
+                Box7,
                 {
                   component: "pre",
                   sx: {
@@ -16252,28 +16569,28 @@ var StatusMessage = ({
                   children: "LOCALSTACK_APP_INSPECTOR=1 localstack start"
                 }
               ),
-              Boolean(enableError) && /* @__PURE__ */ jsx128(Typography5, { color: "error", sx: { mt: 1 }, variant: "body2", children: enableError })
+              Boolean(enableError) && /* @__PURE__ */ jsx129(Typography6, { color: "error", sx: { mt: 1 }, variant: "body2", children: enableError })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsx128(Fragment5, {});
+  return /* @__PURE__ */ jsx129(Fragment6, {});
 };
 
 // src/hooks/status-provider.tsx
 import { createContext as createContext8, useContext as useContext14 } from "react";
 
 // src/hooks/use-connection-state-machine.ts
-import { useCallback as useCallback3, useEffect as useEffect12, useRef as useRef7, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect12, useRef as useRef7, useState as useState8 } from "react";
 var POLL_INTERVAL_MS = 5e3;
 function useConnectionStateMachine() {
   const api = useAppInspectorApi();
-  const [phase, setPhase] = useState7("CHECKING_STATUS");
-  const [checking, setChecking] = useState7(true);
-  const [status, setStatus] = useState7();
-  const [statusError, setStatusError] = useState7();
+  const [phase, setPhase] = useState8("CHECKING_STATUS");
+  const [checking, setChecking] = useState8(true);
+  const [status, setStatus] = useState8();
+  const [statusError, setStatusError] = useState8();
   const abortControllerRef = useRef7(null);
   const dispatchStatus = useCallback3((result, error) => {
     if (result === void 0) {
@@ -16348,11 +16665,11 @@ function useConnectionStateMachine() {
 }
 
 // src/hooks/status-provider.tsx
-import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx130 } from "react/jsx-runtime";
 var AppInspectorStatusContext = createContext8(void 0);
 var StatusProvider = ({ children }) => {
   const value = useConnectionStateMachine();
-  return /* @__PURE__ */ jsx129(AppInspectorStatusContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx130(AppInspectorStatusContext.Provider, { value, children });
 };
 var useAppInspectorStatus = () => {
   const value = useContext14(AppInspectorStatusContext);
@@ -16363,9 +16680,9 @@ var useAppInspectorStatus = () => {
 };
 
 // src/hooks/use-local-storage.tsx
-import { useCallback as useCallback4, useEffect as useEffect13, useState as useState8 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect13, useState as useState9 } from "react";
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState8(() => {
+  const [storedValue, setStoredValue] = useState9(() => {
     try {
       const item = globalThis.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -16408,7 +16725,7 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-spans.ts
-import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef10, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef10, useState as useState11 } from "react";
 
 // src/utils/pagination-buffer.ts
 var insertSorted = (array, item, compareFunction, hint = "back") => {
@@ -16625,7 +16942,7 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef9, useState as useState9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef9, useState as useState10 } from "react";
 
 // src/config.ts
 var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
@@ -18807,7 +19124,7 @@ var useAppInspectorOpenAnalytics = () => {
 };
 
 // src/context.tsx
-import { Fragment as Fragment6, jsx as jsx130 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx131 } from "react/jsx-runtime";
 var AppInspectorContext = createContext9(void 0);
 var useAppInspector = () => {
   const context = useContext15(AppInspectorContext);
@@ -18818,7 +19135,7 @@ var useAppInspector = () => {
 };
 var AppInspectorAnalyticsBoundary = ({ children }) => {
   useAppInspectorOpenAnalytics();
-  return /* @__PURE__ */ jsx130(Fragment6, { children });
+  return /* @__PURE__ */ jsx131(Fragment7, { children });
 };
 var AppInspectorContextProvider = (props) => {
   const api = useMemo5(
@@ -18851,7 +19168,7 @@ var AppInspectorContextProvider = (props) => {
     }),
     [deploymentContainer, props.headerHeight, props.linkComponent, props.localstackEndpoint, resolveLink]
   );
-  return /* @__PURE__ */ jsx130(ApiProvider, { api, children: /* @__PURE__ */ jsx130(StatusProvider, { children: /* @__PURE__ */ jsx130(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx130(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
+  return /* @__PURE__ */ jsx131(ApiProvider, { api, children: /* @__PURE__ */ jsx131(StatusProvider, { children: /* @__PURE__ */ jsx131(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx131(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
 };
 
 // src/hooks/use-spans-ws.tsx
@@ -18869,7 +19186,7 @@ function useSpansWebSocket(options) {
   useEffect15(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const [connected, setConnected] = useState9(false);
+  const [connected, setConnected] = useState10(false);
   const wsRef = useRef9(void 0);
   const { localstackEndpoint } = useAppInspector();
   const connect = useCallback6(() => {
@@ -18930,22 +19247,22 @@ var PAGE_SIZE = 100;
 var useSpans = () => {
   const api = useAppInspectorApi();
   const { onWsClose, onWsOpen, wsEnabled } = useAppInspectorStatus();
-  const [spans, setSpans] = useState10();
-  const [fetchError, setFetchError] = useState10();
-  const [fetchingForward, setFetchingForward] = useState10(false);
-  const [fetchingBackward, setFetchingBackward] = useState10(false);
-  const [search, setSearch] = useState10("");
+  const [spans, setSpans] = useState11();
+  const [fetchError, setFetchError] = useState11();
+  const [fetchingForward, setFetchingForward] = useState11(false);
+  const [fetchingBackward, setFetchingBackward] = useState11(false);
+  const [search, setSearch] = useState11("");
   const searchRef = useRef10("");
-  const [searching, setSearching] = useState10(false);
+  const [searching, setSearching] = useState11(false);
   const searchSeqRef = useRef10(0);
   const paginationBufferRef = useRef10();
-  const [totalCount, setTotalCount] = useState10();
-  const [licenseLimit, setLicenseLimit] = useState10();
-  const [systemLimit, setSystemLimit] = useState10();
-  const [errorCount, setErrorCount] = useState10();
-  const [warningCount, setWarningCount] = useState10();
-  const [hasMoreBackward, setHasMoreBackward] = useState10();
-  const [hasMoreForward, setHasMoreForward] = useState10();
+  const [totalCount, setTotalCount] = useState11();
+  const [licenseLimit, setLicenseLimit] = useState11();
+  const [systemLimit, setSystemLimit] = useState11();
+  const [errorCount, setErrorCount] = useState11();
+  const [warningCount, setWarningCount] = useState11();
+  const [hasMoreBackward, setHasMoreBackward] = useState11();
+  const [hasMoreForward, setHasMoreForward] = useState11();
   const fetchForward = useCallback7(() => {
     void paginationBufferRef.current?.fetchForward();
   }, []);
@@ -19012,7 +19329,7 @@ var useSpans = () => {
     paginationBufferRef.current = buffer;
     void buffer.fetchForward();
   }, [api]);
-  const [clearingSpans, setClearingSpans] = useState10(false);
+  const [clearingSpans, setClearingSpans] = useState11(false);
   const clearSpans = useCallback7(async () => {
     if (clearingSpans) {
       return;
@@ -19087,15 +19404,15 @@ var useSpans = () => {
 
 // src/pages/trace-graph-page.tsx
 import { ArrowBack } from "@mui/icons-material";
-import { Box as Box18, Button as Button6, Drawer, Paper as Paper2 } from "@mui/material";
+import { Box as Box19, Button as Button7, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef16, useState as useState19 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef16, useState as useState20 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Close as Close3 } from "@mui/icons-material";
-import { Alert as Alert4, Box as Box15, Chip as Chip3, Divider as Divider3, FormControlLabel as FormControlLabel2, IconButton as IconButton5, Stack as Stack4, Switch, Typography as Typography11 } from "@mui/material";
-import { useMemo as useMemo10, useState as useState16 } from "react";
+import { Alert as Alert4, Box as Box16, Chip as Chip3, Divider as Divider4, FormControlLabel, IconButton as IconButton5, Stack as Stack4, Switch, Typography as Typography12 } from "@mui/material";
+import { useMemo as useMemo10, useState as useState17 } from "react";
 
 // src/utils/event-utils.ts
 var iamEventParser = (eventName, attributes) => {
@@ -19208,10 +19525,10 @@ var getEventGroupsByType = (events) => {
 // src/components/event-details/copy-button.tsx
 import { Check, ContentCopy } from "@mui/icons-material";
 import { IconButton as IconButton3, Tooltip as Tooltip5 } from "@mui/material";
-import { useCallback as useCallback8, useState as useState11 } from "react";
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useState as useState12 } from "react";
+import { jsx as jsx132 } from "react/jsx-runtime";
 var CopyButton = ({ value }) => {
-  const [copied, setCopied] = useState11(false);
+  const [copied, setCopied] = useState12(false);
   const handleCopy = useCallback8(() => {
     const text2 = typeof value === "string" ? value : JSON.stringify(value, void 0, 2);
     void navigator.clipboard.writeText(text2).then(() => {
@@ -19221,83 +19538,83 @@ var CopyButton = ({ value }) => {
       }, 1500);
     });
   }, [value]);
-  return /* @__PURE__ */ jsx131(Tooltip5, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx132(Tooltip5, { title: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsx132(
     IconButton3,
     {
       className: "copy-btn",
       onClick: handleCopy,
       size: "small",
       sx: { ml: 0.5, opacity: copied ? 1 : 0, p: 0.25, transition: "opacity 0.15s" },
-      children: copied ? /* @__PURE__ */ jsx131(Check, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx131(ContentCopy, { sx: { fontSize: 14 } })
+      children: copied ? /* @__PURE__ */ jsx132(Check, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx132(ContentCopy, { sx: { fontSize: 14 } })
     }
   ) });
 };
 
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box12, IconButton as IconButton4, Typography as Typography8 } from "@mui/material";
-import { useEffect as useEffect18, useMemo as useMemo8, useRef as useRef12, useState as useState13 } from "react";
+import { Box as Box13, IconButton as IconButton4, Typography as Typography9 } from "@mui/material";
+import { useEffect as useEffect18, useMemo as useMemo8, useRef as useRef12, useState as useState14 } from "react";
 
 // src/components/status-icon.tsx
-import { Cancel as Cancel2, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
-import { Box as Box7 } from "@mui/material";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { Cancel as Cancel3, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
+import { Box as Box8 } from "@mui/material";
+import { jsx as jsx133 } from "react/jsx-runtime";
 var StatusIcon2 = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ jsx132(Cancel2, { sx: { color: "red" } });
+      return /* @__PURE__ */ jsx133(Cancel3, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ jsx132(Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ jsx133(Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ jsx132(RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ jsx133(RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ jsx132(Error3, { sx: { color: "orange" } });
+      return /* @__PURE__ */ jsx133(Error3, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ jsx132(CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ jsx133(CheckCircle, { sx: { color: "lightgray" } });
     }
   }
 };
 
 // src/components/event-details/iam-event-detail.tsx
 import { CheckCircle as CheckCircle2, Error as ErrorIcon, Warning } from "@mui/icons-material";
-import { Box as Box8, Chip, Typography as Typography6 } from "@mui/material";
-import { jsx as jsx133, jsxs as jsxs124 } from "react/jsx-runtime";
-var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Box8, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx133(Box8, { children: typeof content === "string" ? /* @__PURE__ */ jsx133(Typography6, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
+import { Box as Box9, Chip, Typography as Typography7 } from "@mui/material";
+import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
+var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs125(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx134(Box9, { children: typeof content === "string" ? /* @__PURE__ */ jsx134(Typography7, { sx: { color: "text.primary", wordBreak: "break-word" }, variant: "caption", children: content }) : content })
 ] });
 var PermissionIcon = ({ status }) => {
   switch (status) {
     case "explicitly_allowed":
     case "implicitly_allowed": {
-      return /* @__PURE__ */ jsx133(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx134(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ jsx133(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx134(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ jsx133(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx134(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
+    return /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "No IAM policy evaluation data available" });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
+    return /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "Failed to parse IAM event data" });
   }
-  return /* @__PURE__ */ jsxs124(Box8, { children: [
-    /* @__PURE__ */ jsx133(Box8, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsxs125(Box9, { children: [
+    /* @__PURE__ */ jsx134(Box9, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx134(
       Chip,
       {
-        icon: /* @__PURE__ */ jsx133(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ jsx134(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -19307,36 +19624,36 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__PURE__ */ jsx133(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
-    /* @__PURE__ */ jsx133(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
-    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx133(
+    /* @__PURE__ */ jsx134(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
+    /* @__PURE__ */ jsx134(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
+    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx134(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx133(Box8, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx133(Typography6, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
+        content: /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx134(Typography7, { sx: { color: "text.primary", display: "block" }, variant: "caption", children: action }, action)) }),
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx133(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx134(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx133(Box8, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx133(Typography6, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
+        content: /* @__PURE__ */ jsx134(Box9, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx134(Typography7, { sx: { color: "text.primary", display: "block", wordBreak: "break-all" }, variant: "caption", children: resource }, resource)) }),
         label: "Resources"
       }
     ),
-    (parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ jsxs124(Box8, { sx: { mt: 1.5 }, children: [
-      /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
-      /* @__PURE__ */ jsxs124(Box8, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
-        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx133(Typography6, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
+    (parsedIAM.details.explicitAllows !== void 0 || parsedIAM.details.explicitDenies !== void 0 || parsedIAM.details.implicitDenies !== void 0) && /* @__PURE__ */ jsxs125(Box9, { sx: { mt: 1.5 }, children: [
+      /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", sx: { display: "block", fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ jsxs125(Box9, { sx: { display: "grid", gap: 1, gridTemplateColumns: "repeat(3, 1fr)" }, children: [
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx134(Typography7, { color: "success.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "Explicit Allows" })
         ] }),
-        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx133(Typography6, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx134(Typography7, { color: "error.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "Explicit Denies" })
         ] }),
-        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx133(Typography6, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx133(Typography6, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsxs125(Box9, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx134(Typography7, { color: "warning.main", sx: { display: "block", fontWeight: "bold" }, variant: "subtitle2", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "caption", children: "Implicit Denies" })
         ] })
       ] })
     ] })
@@ -19344,9 +19661,9 @@ var IAMEventDetail = ({ event }) => {
 };
 
 // src/components/event-details/iam-permission-detail.tsx
-import { Box as Box9, Chip as Chip2, Stack as Stack2, Typography as Typography7 } from "@mui/material";
+import { Box as Box10, Chip as Chip2, Stack as Stack2, Typography as Typography8 } from "@mui/material";
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx135, jsxs as jsxs126 } from "react/jsx-runtime";
 var getChipColor = (isAllowed, spanStatusCode) => {
   if (isAllowed) return "success.main";
   if (spanStatusCode === 2) return "error.main";
@@ -19366,43 +19683,43 @@ var IAMPermissionItem = ({ event, spanStatusCode }) => {
   const { parsedIAM } = parsedData;
   const isAllowed = parsedIAM.permission === "explicitly_allowed" || parsedIAM.permission === "implicitly_allowed";
   const chipColors = { backgroundColor: getChipColor(isAllowed, spanStatusCode), color: "white" };
-  return /* @__PURE__ */ jsxs125(Box9, { sx: { mb: 0.5 }, children: [
-    /* @__PURE__ */ jsx134(Box9, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ jsx134(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
-    /* @__PURE__ */ jsxs125(Stack2, { spacing: 1, children: [
-      /* @__PURE__ */ jsxs125(Box9, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: [
-        /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Principal" }),
-        /* @__PURE__ */ jsxs125(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-          /* @__PURE__ */ jsx134(Typography7, { sx: { wordBreak: "break-all" }, variant: "body2", children: parsedIAM.principal }),
-          /* @__PURE__ */ jsx134(CopyButton, { value: parsedIAM.principal })
+  return /* @__PURE__ */ jsxs126(Box10, { sx: { mb: 0.5 }, children: [
+    /* @__PURE__ */ jsx135(Box10, { sx: { alignItems: "center", display: "flex", gap: 1, mb: 0.5 }, children: /* @__PURE__ */ jsx135(Chip2, { label: formatPermissionStatus(parsedIAM.permission), size: "small", sx: { ...chipColors, fontWeight: 500 } }) }),
+    /* @__PURE__ */ jsxs126(Stack2, { spacing: 1, children: [
+      /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_PRINCIPAL_TEST_ID, children: [
+        /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Principal" }),
+        /* @__PURE__ */ jsxs126(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx135(Typography8, { sx: { wordBreak: "break-all" }, variant: "body2", children: parsedIAM.principal }),
+          /* @__PURE__ */ jsx135(CopyButton, { value: parsedIAM.principal })
         ] })
       ] }),
-      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs125(Box9, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
-        /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
-        parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsxs125(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-          /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block" }, variant: "body2", children: action }),
-          /* @__PURE__ */ jsx134(CopyButton, { value: action })
+      parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_ACTIONS_TEST_ID, children: [
+        /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Actions" }),
+        parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsxs126(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block" }, variant: "body2", children: action }),
+          /* @__PURE__ */ jsx135(CopyButton, { value: action })
         ] }, action))
       ] }),
-      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs125(Box9, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
-        /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
-        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsxs125(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-          /* @__PURE__ */ jsx134(Typography7, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }),
-          /* @__PURE__ */ jsx134(CopyButton, { value: resource })
+      parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsxs126(Box10, { "data-testid": EVENT_DETAILS_IAM_RESOURCES_TEST_ID, children: [
+        /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block", fontWeight: 600 }, variant: "caption", children: "Resources" }),
+        parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsxs126(Stack2, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+          /* @__PURE__ */ jsx135(Typography8, { sx: { display: "block", wordBreak: "break-all" }, variant: "body2", children: resource }),
+          /* @__PURE__ */ jsx135(CopyButton, { value: resource })
         ] }, resource))
       ] })
     ] })
   ] });
 };
-var IAMPermissionDetail = ({ events, spanStatusCode }) => /* @__PURE__ */ jsx134(Box9, { children: events.map((event) => /* @__PURE__ */ jsx134(IAMPermissionItem, { event, spanStatusCode }, `${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 Box11, useTheme as useTheme3 } from "@mui/material";
+import { Box as Box12, useTheme as useTheme3 } from "@mui/material";
 
 // node_modules/.pnpm/@textea+json-viewer@3.5.0_@emotion+react@11.14.0_@types+react@17.0.91_react@17.0.2__@em_040507e953752247cb848fd3f764690c/node_modules/@textea/json-viewer/dist/index.mjs
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
-import { jsx as jsx135, jsxs as jsxs126, Fragment as Fragment7 } from "react/jsx-runtime";
-import { Box as Box10, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper } from "@mui/material";
-import { createContext as createContext10, useContext as useContext16, useState as useState12, useRef as useRef11, useCallback as useCallback9, useMemo as useMemo7, useEffect as useEffect17, memo as memo9 } from "react";
+import { jsx as jsx136, jsxs as jsxs127, Fragment as Fragment8 } from "react/jsx-runtime";
+import { Box as Box11, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper } from "@mui/material";
+import { createContext as createContext10, useContext as useContext16, useState as useState13, useRef as useRef11, useCallback as useCallback9, useMemo as useMemo7, useEffect as useEffect17, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t, f2, n = "";
@@ -19646,7 +19963,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] = useState13(false);
   const copyTimeout = useRef11(null);
   const handleCopyResult = useCallback9((value) => {
     const current = copyTimeout.current;
@@ -19729,7 +20046,7 @@ function useInspect(path, value, nestedIndex) {
     value,
     setInspectCache
   ]);
-  const [inspect, set] = useState12(() => {
+  const [inspect, set] = useState13(() => {
     const shouldInspect = getInspectCache(path, nestedIndex);
     if (shouldInspect !== void 0) {
       return shouldInspect;
@@ -19755,7 +20072,7 @@ function useInspect(path, value, nestedIndex) {
     setInspect
   ];
 }
-var DataBox = (props) => /* @__PURE__ */ jsx135(Box10, {
+var DataBox = (props) => /* @__PURE__ */ jsx136(Box11, {
   component: "div",
   ...props,
   sx: {
@@ -19766,7 +20083,7 @@ var DataBox = (props) => /* @__PURE__ */ jsx135(Box10, {
 var DataTypeLabel = (param) => {
   let { dataType, enable = true } = param;
   if (!enable) return null;
-  return /* @__PURE__ */ jsx135(DataBox, {
+  return /* @__PURE__ */ jsx136(DataBox, {
     className: "data-type-label",
     sx: {
       mx: 0.5,
@@ -19784,18 +20101,18 @@ function defineEasyType(param) {
     const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
     const onSelect = useJsonViewerStore((store) => store.onSelect);
-    return /* @__PURE__ */ jsxs126(DataBox, {
+    return /* @__PURE__ */ jsxs127(DataBox, {
       onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(props.path, props.value),
       sx: {
         color: color2
       },
       children: [
-        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx135(DataTypeLabel, {
+        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx136(DataTypeLabel, {
           dataType: type
         }),
-        /* @__PURE__ */ jsx135(DataBox, {
+        /* @__PURE__ */ jsx136(DataBox, {
           className: "".concat(type, "-value"),
-          children: /* @__PURE__ */ jsx135(Render, {
+          children: /* @__PURE__ */ jsx136(Render, {
             path: props.path,
             inspect: props.inspect,
             setInspect: props.setInspect,
@@ -19835,7 +20152,7 @@ function defineEasyType(param) {
     }, [
       setValue
     ]);
-    return /* @__PURE__ */ jsx135(InputBase, {
+    return /* @__PURE__ */ jsx136(InputBase, {
       autoFocus: true,
       value,
       onChange: handleChange,
@@ -19875,7 +20192,7 @@ var booleanType = defineEasyType({
   },
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment7, {
+    return /* @__PURE__ */ jsx136(Fragment8, {
       children: value ? "true" : "false"
     });
   }
@@ -19894,7 +20211,7 @@ var dateType = defineEasyType({
   colorKey: "base0D",
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment7, {
+    return /* @__PURE__ */ jsx136(Fragment8, {
       children: value.toLocaleTimeString("en-us", displayOptions)
     });
   }
@@ -19923,12 +20240,12 @@ var functionName = (func) => {
 var lb = "{";
 var rb = "}";
 var PreFunctionType = (props) => {
-  return /* @__PURE__ */ jsxs126(NoSsr, {
+  return /* @__PURE__ */ jsxs127(NoSsr, {
     children: [
-      /* @__PURE__ */ jsx135(DataTypeLabel, {
+      /* @__PURE__ */ jsx136(DataTypeLabel, {
         dataType: "function"
       }),
-      /* @__PURE__ */ jsxs126(Box10, {
+      /* @__PURE__ */ jsxs127(Box11, {
         component: "span",
         className: "data-function-start",
         sx: {
@@ -19944,8 +20261,8 @@ var PreFunctionType = (props) => {
   });
 };
 var PostFunctionType = () => {
-  return /* @__PURE__ */ jsx135(NoSsr, {
-    children: /* @__PURE__ */ jsx135(Box10, {
+  return /* @__PURE__ */ jsx136(NoSsr, {
+    children: /* @__PURE__ */ jsx136(Box11, {
       component: "span",
       className: "data-function-end",
       children: rb
@@ -19954,15 +20271,15 @@ var PostFunctionType = () => {
 };
 var FunctionType = (props) => {
   const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
-  return /* @__PURE__ */ jsx135(NoSsr, {
-    children: /* @__PURE__ */ jsx135(Box10, {
+  return /* @__PURE__ */ jsx136(NoSsr, {
+    children: /* @__PURE__ */ jsx136(Box11, {
       className: "data-function",
       sx: {
         display: props.inspect ? "block" : "inline-block",
         pl: props.inspect ? 2 : 0,
         color: functionColor
       },
-      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx135(Box10, {
+      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx136(Box11, {
         component: "span",
         className: "data-function-body",
         onClick: () => props.setInspect(true),
@@ -19990,7 +20307,7 @@ var nullType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx135(Box10, {
+    return /* @__PURE__ */ jsx136(Box11, {
       sx: {
         fontSize: "0.8rem",
         backgroundColor,
@@ -20013,7 +20330,7 @@ var nanType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx135(Box10, {
+    return /* @__PURE__ */ jsx136(Box11, {
       sx: {
         backgroundColor,
         fontSize: "0.8rem",
@@ -20033,7 +20350,7 @@ var floatType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment7, {
+    return /* @__PURE__ */ jsx136(Fragment8, {
       children: value
     });
   }
@@ -20047,7 +20364,7 @@ var intType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment7, {
+    return /* @__PURE__ */ jsx136(Fragment8, {
       children: value
     });
   }
@@ -20060,16 +20377,16 @@ var bigIntType = defineEasyType({
   deserialize: (value) => BigInt(value.replace(/\D/g, "")),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx135(Fragment7, {
+    return /* @__PURE__ */ jsx136(Fragment8, {
       children: "".concat(value, "n")
     });
   }
 });
 var BaseIcon = (param) => {
   let { d: d2, ...props } = param;
-  return /* @__PURE__ */ jsx135(SvgIcon, {
+  return /* @__PURE__ */ jsx136(SvgIcon, {
     ...props,
-    children: /* @__PURE__ */ jsx135("path", {
+    children: /* @__PURE__ */ jsx136("path", {
       d: d2
     })
   });
@@ -20084,55 +20401,55 @@ var Edit = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.3
 var ExpandMore = "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z";
 var Delete = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z";
 var AddBoxIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: AddBox,
     ...props
   });
 };
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: Check2,
     ...props
   });
 };
 var ChevronRightIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: ChevronRight,
     ...props
   });
 };
 var CircularArrowsIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: CircularArrows,
     ...props
   });
 };
 var CloseIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: Close2,
     ...props
   });
 };
 var ContentCopyIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: ContentCopy2,
     ...props
   });
 };
 var EditIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: Edit,
     ...props
   });
 };
 var ExpandMoreIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: ExpandMore,
     ...props
   });
 };
 var DeleteIcon = (props) => {
-  return /* @__PURE__ */ jsx135(BaseIcon, {
+  return /* @__PURE__ */ jsx136(BaseIcon, {
     d: Delete,
     ...props
   });
@@ -20171,7 +20488,7 @@ var PreObjectType = (props) => {
     props.value
   ]);
   const isTrap = useIsCycleReference(props.path, props.value);
-  return /* @__PURE__ */ jsxs126(Box10, {
+  return /* @__PURE__ */ jsxs127(Box11, {
     component: "span",
     className: "data-object-start",
     sx: {
@@ -20179,7 +20496,7 @@ var PreObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayLb : objectLb,
-      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx135(Box10, {
+      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx136(Box11, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -20189,16 +20506,16 @@ var PreObjectType = (props) => {
         },
         children: sizeOfValue
       }),
-      isTrap && !props.inspect && /* @__PURE__ */ jsxs126(Fragment7, {
+      isTrap && !props.inspect && /* @__PURE__ */ jsxs127(Fragment8, {
         children: [
-          /* @__PURE__ */ jsx135(CircularArrowsIcon, {
+          /* @__PURE__ */ jsx136(CircularArrowsIcon, {
             sx: {
               fontSize: 12,
               color: textColor,
               mx: 0.5
             }
           }),
-          /* @__PURE__ */ jsx135(DataBox, {
+          /* @__PURE__ */ jsx136(DataBox, {
             sx: {
               cursor: "pointer",
               userSelect: "none"
@@ -20228,7 +20545,7 @@ var PostObjectType = (props) => {
     props.path,
     props.value
   ]);
-  return /* @__PURE__ */ jsxs126(Box10, {
+  return /* @__PURE__ */ jsxs127(Box11, {
     component: "span",
     className: "data-object-end",
     sx: {
@@ -20239,7 +20556,7 @@ var PostObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayRb : objectRb,
-      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx135(Box10, {
+      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx136(Box11, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -20260,7 +20577,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] = useState13(useJsonViewerStore((store) => store.maxDisplayLength));
   const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
   const elements = useMemo7(() => {
     if (!props.inspect) {
@@ -20279,7 +20596,7 @@ var ObjectType = (props) => {
             ...props.path,
             key
           ];
-          elements3.push(/* @__PURE__ */ jsx135(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
             path,
             value: value2,
             prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
@@ -20295,7 +20612,7 @@ var ObjectType = (props) => {
         while (true) {
           const nextResult = iterator2.next();
           var _nextResult_done;
-          elements3.push(/* @__PURE__ */ jsx135(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx136(DataKeyPair, {
             path: [
               ...props.path,
               "iterator:".concat(count2)
@@ -20323,7 +20640,7 @@ var ObjectType = (props) => {
             ...props.path,
             index
           ];
-          return /* @__PURE__ */ jsx135(DataKeyPair, {
+          return /* @__PURE__ */ jsx136(DataKeyPair, {
             path,
             value: value2,
             prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
@@ -20332,7 +20649,7 @@ var ObjectType = (props) => {
         });
         if (value.length > displayLength) {
           const rest = value.length - displayLength;
-          elements4.push(/* @__PURE__ */ jsxs126(DataBox, {
+          elements4.push(/* @__PURE__ */ jsxs127(DataBox, {
             sx: {
               cursor: "pointer",
               lineHeight: 1.5,
@@ -20355,7 +20672,7 @@ var ObjectType = (props) => {
       const prevElements = Array.isArray(props.prevValue) ? segmentArray(props.prevValue, groupArraysAfterLength) : void 0;
       const elementsLastIndex = elements3.length - 1;
       return elements3.map((list, index) => {
-        return /* @__PURE__ */ jsx135(DataKeyPair, {
+        return /* @__PURE__ */ jsx136(DataKeyPair, {
           path: props.path,
           value: list,
           nestedIndex: index,
@@ -20382,7 +20699,7 @@ var ObjectType = (props) => {
         ...props.path,
         key
       ];
-      return /* @__PURE__ */ jsx135(DataKeyPair, {
+      return /* @__PURE__ */ jsx136(DataKeyPair, {
         path,
         value: value2,
         prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
@@ -20391,7 +20708,7 @@ var ObjectType = (props) => {
     });
     if (entries.length > displayLength) {
       const rest = entries.length - displayLength;
-      elements2.push(/* @__PURE__ */ jsxs126(DataBox, {
+      elements2.push(/* @__PURE__ */ jsxs127(DataBox, {
         sx: {
           cursor: "pointer",
           lineHeight: 1.5,
@@ -20429,7 +20746,7 @@ var ObjectType = (props) => {
   if (isEmptyValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx135(Box10, {
+  return /* @__PURE__ */ jsx136(Box11, {
     className: "data-object",
     sx: {
       display: props.inspect ? "block" : "inline-block",
@@ -20438,7 +20755,7 @@ var ObjectType = (props) => {
       color: keyColor,
       borderLeft: props.inspect ? "1px solid ".concat(borderColor) : "none"
     },
-    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx135(Box10, {
+    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx136(Box11, {
       component: "span",
       className: "data-object-body",
       onClick: () => props.setInspect(true),
@@ -20466,11 +20783,11 @@ var stringType = defineEasyType({
   serialize: (value) => value,
   deserialize: (value) => value,
   Renderer: (props) => {
-    const [showRest, setShowRest] = useState12(false);
+    const [showRest, setShowRest] = useState13(false);
     const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
     const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
     const hasRest = props.value.length > collapseStringsAfterLength;
-    return /* @__PURE__ */ jsxs126(Box10, {
+    return /* @__PURE__ */ jsxs127(Box11, {
       component: "span",
       sx: {
         overflowWrap: "anywhere",
@@ -20488,7 +20805,7 @@ var stringType = defineEasyType({
       children: [
         '"',
         value,
-        hasRest && !showRest && /* @__PURE__ */ jsx135(Box10, {
+        hasRest && !showRest && /* @__PURE__ */ jsx136(Box11, {
           component: "span",
           sx: {
             padding: 0.5
@@ -20507,7 +20824,7 @@ var undefinedType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx135(Box10, {
+    return /* @__PURE__ */ jsx136(Box11, {
       sx: {
         fontSize: "0.7rem",
         backgroundColor,
@@ -20588,7 +20905,7 @@ function useTypeComponents(value, path) {
     registry
   ]);
 }
-var IconBox = (props) => /* @__PURE__ */ jsx135(Box10, {
+var IconBox = (props) => /* @__PURE__ */ jsx136(Box11, {
   component: "span",
   ...props,
   sx: {
@@ -20620,7 +20937,7 @@ var DataKeyPair = (props) => {
     storeEditable,
     value
   ]);
-  const [tempValue, setTempValue] = useState12("");
+  const [tempValue, setTempValue] = useState13("");
   const depth = path.length;
   const key = path[depth - 1];
   const hoverPath = useJsonViewerStore((store) => store.hoverPath);
@@ -20634,7 +20951,7 @@ var DataKeyPair = (props) => {
   const setHover = useJsonViewerStore((store) => store.setHover);
   const root2 = useJsonViewerStore((store) => store.value);
   const [inspect, setInspect] = useInspect(path, value, nestedIndex);
-  const [editing, setEditing] = useState12(false);
+  const [editing, setEditing] = useState13(false);
   const onChange = useJsonViewerStore((store) => store.onChange);
   const keyColor = useTextColor();
   const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
@@ -20774,18 +21091,18 @@ var DataKeyPair = (props) => {
   ]);
   const actionIcons = useMemo7(() => {
     if (editing) {
-      return /* @__PURE__ */ jsxs126(Fragment7, {
+      return /* @__PURE__ */ jsxs127(Fragment8, {
         children: [
-          /* @__PURE__ */ jsx135(IconBox, {
-            children: /* @__PURE__ */ jsx135(CloseIcon, {
+          /* @__PURE__ */ jsx136(IconBox, {
+            children: /* @__PURE__ */ jsx136(CloseIcon, {
               sx: {
                 fontSize: ".8rem"
               },
               onClick: abortEditing
             })
           }),
-          /* @__PURE__ */ jsx135(IconBox, {
-            children: /* @__PURE__ */ jsx135(CheckIcon, {
+          /* @__PURE__ */ jsx136(IconBox, {
+            children: /* @__PURE__ */ jsx136(CheckIcon, {
               sx: {
                 fontSize: ".8rem"
               },
@@ -20795,9 +21112,9 @@ var DataKeyPair = (props) => {
         ]
       });
     }
-    return /* @__PURE__ */ jsxs126(Fragment7, {
+    return /* @__PURE__ */ jsxs127(Fragment8, {
       children: [
-        enableClipboard && /* @__PURE__ */ jsx135(IconBox, {
+        enableClipboard && /* @__PURE__ */ jsx136(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             try {
@@ -20806,41 +21123,41 @@ var DataKeyPair = (props) => {
               console.error(e2);
             }
           },
-          children: copied ? /* @__PURE__ */ jsx135(CheckIcon, {
+          children: copied ? /* @__PURE__ */ jsx136(CheckIcon, {
             sx: {
               fontSize: ".8rem"
             }
-          }) : /* @__PURE__ */ jsx135(ContentCopyIcon, {
+          }) : /* @__PURE__ */ jsx136(ContentCopyIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx135(IconBox, {
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx136(IconBox, {
           onClick: startEditing,
-          children: /* @__PURE__ */ jsx135(EditIcon, {
+          children: /* @__PURE__ */ jsx136(EditIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableAdd && /* @__PURE__ */ jsx135(IconBox, {
+        enableAdd && /* @__PURE__ */ jsx136(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
           },
-          children: /* @__PURE__ */ jsx135(AddBoxIcon, {
+          children: /* @__PURE__ */ jsx136(AddBoxIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableDelete && /* @__PURE__ */ jsx135(IconBox, {
+        enableDelete && /* @__PURE__ */ jsx136(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
           },
-          children: /* @__PURE__ */ jsx135(DeleteIcon, {
+          children: /* @__PURE__ */ jsx136(DeleteIcon, {
             sx: {
               fontSize: ".9rem"
             }
@@ -20888,7 +21205,7 @@ var DataKeyPair = (props) => {
     prevValue,
     nestedIndex
   ]);
-  return /* @__PURE__ */ jsxs126(Box10, {
+  return /* @__PURE__ */ jsxs127(Box11, {
     className: "data-key-pair",
     "data-testid": "data-key-pair" + path.join("."),
     sx: {
@@ -20900,7 +21217,7 @@ var DataKeyPair = (props) => {
       nestedIndex
     ]),
     children: [
-      /* @__PURE__ */ jsxs126(DataBox, {
+      /* @__PURE__ */ jsxs127(DataBox, {
         component: "span",
         className: "data-key",
         sx: {
@@ -20921,7 +21238,7 @@ var DataKeyPair = (props) => {
           setInspect
         ]),
         children: [
-          expandable ? inspect ? /* @__PURE__ */ jsx135(ExpandMoreIcon, {
+          expandable ? inspect ? /* @__PURE__ */ jsx136(ExpandMoreIcon, {
             className: "data-key-toggle-expanded",
             sx: {
               fontSize: ".8rem",
@@ -20929,7 +21246,7 @@ var DataKeyPair = (props) => {
                 cursor: "pointer"
               }
             }
-          }) : /* @__PURE__ */ jsx135(ChevronRightIcon, {
+          }) : /* @__PURE__ */ jsx136(ChevronRightIcon, {
             className: "data-key-toggle-collapsed",
             sx: {
               fontSize: ".8rem",
@@ -20938,44 +21255,44 @@ var DataKeyPair = (props) => {
               }
             }
           }) : null,
-          /* @__PURE__ */ jsx135(Box10, {
+          /* @__PURE__ */ jsx136(Box11, {
             ref: highlightContainer,
             className: "data-key-key",
             component: "span",
-            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs126(Fragment7, {
+            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs127(Fragment8, {
               children: [
                 '"',
                 rootName,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx135(Fragment7, {
+            }) : /* @__PURE__ */ jsx136(Fragment8, {
               children: rootName
-            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx135(KeyRenderer, {
+            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx136(KeyRenderer, {
               ...downstreamProps
-            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx135(Box10, {
+            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx136(Box11, {
               component: "span",
               style: {
                 color: numberKeyColor,
                 userSelect: isNumberKey ? "none" : "auto"
               },
               children: key
-            }) : quotesOnKeys ? /* @__PURE__ */ jsxs126(Fragment7, {
+            }) : quotesOnKeys ? /* @__PURE__ */ jsxs127(Fragment8, {
               children: [
                 '"',
                 key,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx135(Fragment7, {
+            }) : /* @__PURE__ */ jsx136(Fragment8, {
               children: key
             }))
           }),
-          isRoot ? rootName !== false && /* @__PURE__ */ jsx135(DataBox, {
+          isRoot ? rootName !== false && /* @__PURE__ */ jsx136(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5
             },
             children: ":"
-          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx135(DataBox, {
+          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx136(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5,
@@ -20986,29 +21303,29 @@ var DataKeyPair = (props) => {
             },
             children: ":"
           }),
-          PreComponent && /* @__PURE__ */ jsx135(PreComponent, {
+          PreComponent && /* @__PURE__ */ jsx136(PreComponent, {
             ...downstreamProps
           }),
           isHover && expandable && inspect && actionIcons
         ]
       }),
-      editing && editable ? Editor && /* @__PURE__ */ jsx135(Editor, {
+      editing && editable ? Editor && /* @__PURE__ */ jsx136(Editor, {
         path,
         value: tempValue,
         setValue: setTempValue,
         abortEditing,
         commitEditing
-      }) : Component ? /* @__PURE__ */ jsx135(Component, {
+      }) : Component ? /* @__PURE__ */ jsx136(Component, {
         ...downstreamProps
-      }) : /* @__PURE__ */ jsx135(Box10, {
+      }) : /* @__PURE__ */ jsx136(Box11, {
         component: "span",
         className: "data-value-fallback",
         children: "fallback: ".concat(value)
       }),
-      PostComponent && /* @__PURE__ */ jsx135(PostComponent, {
+      PostComponent && /* @__PURE__ */ jsx136(PostComponent, {
         ...downstreamProps
       }),
-      !last && displayComma && /* @__PURE__ */ jsx135(DataBox, {
+      !last && displayComma && /* @__PURE__ */ jsx136(DataBox, {
         children: ","
       }),
       isHover && expandable && !inspect && actionIcons,
@@ -21019,7 +21336,7 @@ var DataKeyPair = (props) => {
 };
 var query = "(prefers-color-scheme: dark)";
 function useThemeDetector() {
-  const [isDark, setIsDark] = useState12(false);
+  const [isDark, setIsDark] = useState13(false);
   useEffect17(() => {
     const listener = (e2) => setIsDark(e2.matches);
     setIsDark(window.matchMedia(query).matches);
@@ -21128,7 +21445,7 @@ var JsonViewerInner = (props) => {
   const onMouseLeave = useCallback9(() => setHover(null), [
     setHover
   ]);
-  return /* @__PURE__ */ jsx135(Paper, {
+  return /* @__PURE__ */ jsx136(Paper, {
     elevation: 0,
     className: clsx(themeCls, props.className),
     style: props.style,
@@ -21139,7 +21456,7 @@ var JsonViewerInner = (props) => {
       ...props.sx
     },
     onMouseLeave,
-    children: /* @__PURE__ */ jsx135(DataKeyPair, {
+    children: /* @__PURE__ */ jsx136(DataKeyPair, {
       value,
       prevValue,
       path: emptyPath,
@@ -21191,13 +21508,13 @@ var JsonViewer = function JsonViewer2(props) {
   };
   const jsonViewerStore = useMemo7(() => createJsonViewerStore(props), []);
   const typeRegistryStore = useMemo7(() => createTypeRegistryStore(), []);
-  return /* @__PURE__ */ jsx135(ThemeProvider, {
+  return /* @__PURE__ */ jsx136(ThemeProvider, {
     theme,
-    children: /* @__PURE__ */ jsx135(TypeRegistryStoreContext.Provider, {
+    children: /* @__PURE__ */ jsx136(TypeRegistryStoreContext.Provider, {
       value: typeRegistryStore,
-      children: /* @__PURE__ */ jsx135(JsonViewerStoreContext.Provider, {
+      children: /* @__PURE__ */ jsx136(JsonViewerStoreContext.Provider, {
         value: jsonViewerStore,
-        children: /* @__PURE__ */ jsx135(JsonViewerInner, {
+        children: /* @__PURE__ */ jsx136(JsonViewerInner, {
           ...mixedProps
         })
       })
@@ -21207,7 +21524,7 @@ var JsonViewer = function JsonViewer2(props) {
 
 // src/components/event-details/payload-viewer.tsx
 import { memo as memo10 } from "react";
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 function tryParseJson(value) {
   if (typeof value !== "string") {
     return value;
@@ -21220,7 +21537,7 @@ function tryParseJson(value) {
 }
 var PayloadViewer = memo10(({ sx, testId, value }) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ jsx136(Box11, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx137(Box12, { "data-testid": testId, sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1, ...sx }, children: /* @__PURE__ */ jsx137(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -21234,14 +21551,14 @@ var PayloadViewer = memo10(({ sx, testId, value }) => {
 });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment8, jsx as jsx137, jsxs as jsxs127 } from "react/jsx-runtime";
-var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs127(Box12, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
-  /* @__PURE__ */ jsx137(Typography8, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
-  /* @__PURE__ */ jsx137(Box12, { children: typeof content === "string" ? /* @__PURE__ */ jsx137(Typography8, { sx: { color: "text.primary", whiteSpace: "pre-wrap" }, variant: "caption", children: content }) : content })
+import { Fragment as Fragment9, jsx as jsx138, jsxs as jsxs128 } from "react/jsx-runtime";
+var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs128(Box13, { sx: { display: "grid", gap: 1, gridTemplateColumns: "72px 1fr", mb: 0.5 }, children: [
+  /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", sx: { fontWeight: 600 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx138(Box13, { children: typeof content === "string" ? /* @__PURE__ */ jsx138(Typography9, { 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] = useState14(false);
+  const [isOverflowing, setIsOverflowing] = useState14(false);
   const textReference = useRef12(null);
   const parsedMessage = useMemo8(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo8(
@@ -21269,9 +21586,9 @@ var EventMessage = ({ event }) => {
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
-  return /* @__PURE__ */ jsxs127(Box12, { sx: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs127(Box12, { sx: { alignItems: "center", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsxs128(Box13, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs128(Box13, { sx: { alignItems: "center", display: "flex" }, children: [
+      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx138(
         IconButton4,
         {
           onClick: () => {
@@ -21279,11 +21596,11 @@ var EventMessage = ({ event }) => {
           },
           size: "small",
           sx: { mr: 1, p: 0 },
-          children: isOpen ? /* @__PURE__ */ jsx137(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx137(KeyboardArrowRight, { sx: { fontSize: 16 } })
+          children: isOpen ? /* @__PURE__ */ jsx138(KeyboardArrowDown, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx138(KeyboardArrowRight, { sx: { fontSize: 16 } })
         }
       ),
-      /* @__PURE__ */ jsx137(
-        Typography8,
+      /* @__PURE__ */ jsx138(
+        Typography9,
         {
           ref: textReference,
           sx: {
@@ -21300,12 +21617,12 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx137(Box12, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx137(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs127(Fragment8, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx137(DetailRow2, { content: parsedMessage.message, label: "Message" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx137(
+    isOpen && /* @__PURE__ */ jsx138(Box13, { sx: { borderColor: "divider", borderLeft: "2px solid", ml: 1, mt: 0.5, pl: 1.5, py: 0.5 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx138(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs128(Fragment9, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx138(DetailRow2, { content: parsedMessage.message, label: "Message" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx138(
         DetailRow2,
         {
-          content: /* @__PURE__ */ jsx137(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
+          content: /* @__PURE__ */ jsx138(PayloadViewer, { sx: { px: 0 }, value: tryParseJson(parsedMessage.details) }),
           label: "Details"
         }
       )
@@ -21338,15 +21655,15 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ jsx137(IAMPermissionDetail, { events, spanStatusCode });
+    return /* @__PURE__ */ jsx138(IAMPermissionDetail, { events, spanStatusCode });
   }
   const eventLevel = getEventLevelFromGroup(type);
-  return /* @__PURE__ */ jsxs127(Box12, { children: [
-    /* @__PURE__ */ jsxs127(Box12, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsx137(StatusIcon2, { errorLevel: eventLevel }),
-      /* @__PURE__ */ jsx137(Typography8, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
+  return /* @__PURE__ */ jsxs128(Box13, { children: [
+    /* @__PURE__ */ jsxs128(Box13, { sx: { alignItems: "center", display: "flex", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsx138(StatusIcon2, { errorLevel: eventLevel }),
+      /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", sx: { fontWeight: 600, ml: 0.5 }, variant: "caption", children: displayText })
     ] }),
-    /* @__PURE__ */ jsx137(Box12, { children: events.map((event) => /* @__PURE__ */ jsx137(Box12, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ jsx137(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
+    /* @__PURE__ */ jsx138(Box13, { children: events.map((event) => /* @__PURE__ */ jsx138(Box13, { sx: { maxWidth: "100%", mb: 0.5 }, children: /* @__PURE__ */ jsx138(EventMessage, { event }) }, `${event.span_id}-${event.event_id}`)) })
   ] });
 };
 
@@ -31303,9 +31620,9 @@ var QueryStatus = {
 };
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
-import { Box as Box13, CircularProgress as CircularProgress3, Stack as Stack3, Typography as Typography9 } from "@mui/material";
-import { useEffect as useEffect19, useMemo as useMemo9, useRef as useRef13, useState as useState14 } from "react";
-import { jsx as jsx138, jsxs as jsxs128 } from "react/jsx-runtime";
+import { Box as Box14, CircularProgress as CircularProgress3, Stack as Stack3, Typography as Typography10 } from "@mui/material";
+import { useEffect as useEffect19, useMemo as useMemo9, useRef as useRef13, useState as useState15 } from "react";
+import { jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS2 = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
@@ -31333,9 +31650,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] = useState15(true);
+  const [logs, setLogs] = useState15([]);
+  const [error, setError] = useState15();
   const pollTimerRef = useRef13(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
   useEffect19(() => {
@@ -31395,30 +31712,30 @@ function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, en
 var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, region, requestId, startTimeNano }) => {
   const { error, loading, logs } = useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano);
   if (loading) {
-    return /* @__PURE__ */ jsxs128(Stack3, { alignItems: "center", direction: "row", spacing: 1, children: [
-      /* @__PURE__ */ jsx138(CircularProgress3, { size: 14 }),
-      /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
+    return /* @__PURE__ */ jsxs129(Stack3, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx139(CircularProgress3, { size: 14 }),
+      /* @__PURE__ */ jsx139(Typography10, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
     ] });
   }
   if (error !== void 0) {
-    return /* @__PURE__ */ jsx138(Typography9, { color: "error", variant: "body2", children: error.message });
+    return /* @__PURE__ */ jsx139(Typography10, { color: "error", variant: "body2", children: error.message });
   }
   if (logs.length === 0) {
-    return /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
+    return /* @__PURE__ */ jsx139(Typography10, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
   }
-  return /* @__PURE__ */ jsx138(Box13, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx138("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
+  return /* @__PURE__ */ jsx139(Box14, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx139("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx139(Typography10, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
 };
 
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
-import { Box as Box14, Typography as Typography10 } from "@mui/material";
-import { useState as useState15 } from "react";
-import { jsx as jsx139, jsxs as jsxs129 } from "react/jsx-runtime";
+import { Box as Box15, Typography as Typography11 } from "@mui/material";
+import { useState as useState16 } 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);
-  return /* @__PURE__ */ jsxs129(Box14, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ jsxs129(
-      Box14,
+  const [isOpen, setIsOpen] = useState16(initialOpen);
+  return /* @__PURE__ */ jsxs130(Box15, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ jsxs130(
+      Box15,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -31431,8 +31748,8 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
           mb: 1
         },
         children: [
-          /* @__PURE__ */ jsxs129(
-            Box14,
+          /* @__PURE__ */ jsxs130(
+            Box15,
             {
               role: "button",
               sx: {
@@ -31441,23 +31758,23 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
                 gap: 1
               },
               children: [
-                /* @__PURE__ */ jsx139(Typography10, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-                isOpen ? /* @__PURE__ */ jsx139(KeyboardArrowDown2, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx139(KeyboardArrowRight2, { sx: { color: "text.secondary", height: 20, width: 20 } })
+                /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+                isOpen ? /* @__PURE__ */ jsx140(KeyboardArrowDown2, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx140(KeyboardArrowRight2, { sx: { color: "text.secondary", height: 20, width: 20 } })
               ]
             }
           ),
-          action !== false && /* @__PURE__ */ jsx139(Box14, { onClick: (event) => {
+          action !== false && /* @__PURE__ */ jsx140(Box15, { onClick: (event) => {
             event.stopPropagation();
           }, children: action })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx139(Box14, { children })
+    isOpen && /* @__PURE__ */ jsx140(Box15, { children })
   ] });
 };
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment9, jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
 var checkIsLambdaInvoke = (span) => {
   if (span.service_name !== "lambda") {
     return false;
@@ -31476,9 +31793,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
-  const [parseNestedJson, setParseNestedJson] = useState16(true);
+  const [parseNestedJson, setParseNestedJson] = useState17(true);
   if (!selectedEvent) {
-    return /* @__PURE__ */ jsx140(Box15, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx140(Typography11, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
+    return /* @__PURE__ */ jsx141(Box16, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx141(Typography12, { color: "text.secondary", variant: "body2", children: "Select an operation to view graph" }) });
   }
   const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
   const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
@@ -31504,9 +31821,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
   const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0 || isResponseSuppressed;
   const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
-  return /* @__PURE__ */ jsxs130(Box15, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs130(
-      Box15,
+  return /* @__PURE__ */ jsxs131(Box16, { "data-testid": EVENT_DETAILS_TEST_ID, sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs131(
+      Box16,
       {
         sx: {
           alignItems: "center",
@@ -31518,90 +31835,90 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           py: 1
         },
         children: [
-          /* @__PURE__ */ jsx140(Box15, { children: /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ jsx140(IconButton5, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx140(Close3, {}) })
+          /* @__PURE__ */ jsx141(Box16, { children: /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          onClose && /* @__PURE__ */ jsx141(IconButton5, { "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ jsx141(Close3, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx140(Box15, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs130(Stack4, { spacing: 2, children: [
-      /* @__PURE__ */ jsx140(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs130(Stack4, { "data-testid": EVENT_DETAILS_SECTION_BASIC_INFORMATION_TEST_ID, spacing: 1, children: [
-        /* @__PURE__ */ jsxs130(Box15, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) }),
-              /* @__PURE__ */ jsx140(CopyButton, { value: getServiceDisplayName(selectedEvent.service_name) })
+    /* @__PURE__ */ jsx141(Box16, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs131(Stack4, { spacing: 2, children: [
+      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs131(Stack4, { "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(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_SERVICE_NAME_TEST_ID, variant: "body2", children: getServiceDisplayName(selectedEvent.service_name) }),
+              /* @__PURE__ */ jsx141(CopyButton, { value: getServiceDisplayName(selectedEvent.service_name) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
-            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name }),
-              /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.operation_name })
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Action" }),
+            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_OPERATION_NAME_TEST_ID, variant: "body2", children: selectedEvent.operation_name }),
+              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.operation_name })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx140(Typography11, { variant: "body2", children: selectedEvent.resource_name }),
-              /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.resource_name })
+        /* @__PURE__ */ jsxs131(Box16, { sx: cfnResourceType ? { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" } : void 0, children: [
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_NAME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx141(Typography12, { variant: "body2", children: selectedEvent.resource_name }),
+              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.resource_name })
             ] })
           ] }),
-          Boolean(cfnResourceType) && /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
-            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType }),
-              /* @__PURE__ */ jsx140(CopyButton, { value: cfnResourceType })
+          Boolean(cfnResourceType) && /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource Type" }),
+            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_CFN_RESOURCE_TYPE_TEST_ID, variant: "body2", children: cfnResourceType }),
+              /* @__PURE__ */ jsx141(CopyButton, { value: cfnResourceType })
             ] })
           ] })
         ] }),
-        Boolean(resourceArn) && /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx140(Typography11, { variant: "body2", children: resourceArn }),
-            /* @__PURE__ */ jsx140(CopyButton, { value: resourceArn })
+        Boolean(resourceArn) && /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
+          /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_RESOURCE_ARN_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx141(Typography12, { variant: "body2", children: resourceArn }),
+            /* @__PURE__ */ jsx141(CopyButton, { value: resourceArn })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
-            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id }),
-              /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.account_id })
+        /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
+            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_ACCOUNT_TEST_ID, variant: "body2", children: selectedEvent.account_id }),
+              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.account_id })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region }),
-              /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.region })
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_REGION_TEST_ID, variant: "body2", children: selectedEvent.region }),
+              /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.region })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsx140(Typography11, { variant: "body2", children: /* @__PURE__ */ jsx140(ResponsiveTimestampCell, { date: unixNanoToDate(selectedEvent.start_time_unix_nano) }) }),
-              /* @__PURE__ */ jsx140(CopyButton, { value: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+        /* @__PURE__ */ jsxs131(Box16, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_START_TIME_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsx141(Typography12, { variant: "body2", children: /* @__PURE__ */ jsx141(ResponsiveTimestampCell, { date: unixNanoToDate(selectedEvent.start_time_unix_nano) }) }),
+              /* @__PURE__ */ jsx141(CopyButton, { value: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
             ] })
           ] }),
-          duration !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
-            /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-            /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_DURATION_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-              /* @__PURE__ */ jsxs130(Typography11, { variant: "body2", children: [
+          duration !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
+            /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+            /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", "data-testid": EVENT_DETAILS_DURATION_TEST_ID, direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+              /* @__PURE__ */ jsxs131(Typography12, { variant: "body2", children: [
                 duration,
                 "ms"
               ] }),
-              /* @__PURE__ */ jsx140(CopyButton, { value: `${duration}ms` })
+              /* @__PURE__ */ jsx141(CopyButton, { value: `${duration}ms` })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
-          /* @__PURE__ */ jsx140(Stack4, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
+          /* @__PURE__ */ jsx141(Stack4, { 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",
@@ -31612,50 +31929,50 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx140(Divider3, {}),
-      /* @__PURE__ */ jsxs130(ToggleSection, { headline: "Permissions", children: [
-        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ jsx140(Alert4, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
-        !selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx140(Typography11, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
-        eventGroups.permissions && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
-        eventGroups.errors && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
-        eventGroups.warnings && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
+      /* @__PURE__ */ jsx141(Divider4, {}),
+      /* @__PURE__ */ jsxs131(ToggleSection, { headline: "Permissions", children: [
+        selectedEvent.iam_errors_suppressed && /* @__PURE__ */ jsx141(Alert4, { "data-testid": EVENT_DETAILS_IAM_ERRORS_SUPPRESSED_TEST_ID, severity: "warning", sx: { mb: 1 }, children: "IAM errors are suppressed \u2014 upgrade your license to view" }),
+        !selectedEvent.iam_errors_suppressed && !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx141(Typography12, { color: "text.secondary", variant: "body2", children: "There is no permission information available." }),
+        eventGroups.permissions && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, spanStatusCode: selectedEvent.status_code, type: "permission" }),
+        eventGroups.errors && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
+        eventGroups.warnings && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
       ] }),
-      hasPayloads && /* @__PURE__ */ jsxs130(Fragment9, { children: [
-        /* @__PURE__ */ jsx140(Divider3, {}),
-        /* @__PURE__ */ jsx140(
+      hasPayloads && /* @__PURE__ */ jsxs131(Fragment10, { children: [
+        /* @__PURE__ */ jsx141(Divider4, {}),
+        /* @__PURE__ */ jsx141(
           ToggleSection,
           {
-            action: /* @__PURE__ */ jsx140(
-              FormControlLabel2,
+            action: /* @__PURE__ */ jsx141(
+              FormControlLabel,
               {
-                control: /* @__PURE__ */ jsx140(Switch, { checked: !parseNestedJson, onChange: (event) => {
+                control: /* @__PURE__ */ jsx141(Switch, { checked: !parseNestedJson, onChange: (event) => {
                   setParseNestedJson(!event.target.checked);
                 }, size: "small" }),
-                label: /* @__PURE__ */ jsx140(Typography11, { variant: "caption", children: "View raw data" }),
+                label: /* @__PURE__ */ jsx141(Typography12, { variant: "caption", children: "View raw data" }),
                 sx: { mr: 0 }
               }
             ),
             headline: "Payloads",
-            children: /* @__PURE__ */ jsxs130(Stack4, { spacing: 2, children: [
-              requestPayload !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
-                /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Request" }),
-                /* @__PURE__ */ jsx140(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
+            children: /* @__PURE__ */ jsxs131(Stack4, { spacing: 2, children: [
+              requestPayload !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
+                /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Request" }),
+                /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_REQUEST_PAYLOAD, value: requestPayload })
               ] }),
-              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ jsxs130(Box15, { children: [
-                /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Response" }),
-                isResponseSuppressed ? /* @__PURE__ */ jsx140(Box15, { sx: { py: 1 }, children: /* @__PURE__ */ jsx140(Alert4, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ jsx140(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
+              (responsePayload !== void 0 || isResponseSuppressed) && /* @__PURE__ */ jsxs131(Box16, { children: [
+                /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Response" }),
+                isResponseSuppressed ? /* @__PURE__ */ jsx141(Box16, { sx: { py: 1 }, children: /* @__PURE__ */ jsx141(Alert4, { severity: "warning", sx: { mb: 1 }, children: "Response payload is available \u2014 upgrade your license to view" }) }) : /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_RESPONSE_PAYLOAD_TEST_ID, value: responsePayload })
               ] }),
-              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
-                /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Exception" }),
-                /* @__PURE__ */ jsx140(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
+              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
+                /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600, mb: 0.5 }, variant: "caption", children: "Exception" }),
+                /* @__PURE__ */ jsx141(PayloadViewer, { testId: EVENT_DETAILS_EXCEPTION_PAYLOAD_TEST_ID, value: exceptionPayload })
               ] })
             ] })
           }
         )
       ] }),
-      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs130(Fragment9, { children: [
-        /* @__PURE__ */ jsx140(Divider3, {}),
-        /* @__PURE__ */ jsx140(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx140(
+      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs131(Fragment10, { children: [
+        /* @__PURE__ */ jsx141(Divider4, {}),
+        /* @__PURE__ */ jsx141(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx141(
           LambdaInvokeLogsSection,
           {
             endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
@@ -31666,30 +31983,30 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx140(Divider3, {}),
-      /* @__PURE__ */ jsx140(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs130(Stack4, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id }),
-            /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.span_id })
+      /* @__PURE__ */ jsx141(Divider4, {}),
+      /* @__PURE__ */ jsx141(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs131(Stack4, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_SPAN_ID_TEST_ID, variant: "body2", children: selectedEvent.span_id }),
+            /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.span_id })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id }),
-            /* @__PURE__ */ jsx140(CopyButton, { value: selectedEvent.trace_id })
+        /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_TRACE_ID_TEST_ID, variant: "body2", children: selectedEvent.trace_id }),
+            /* @__PURE__ */ jsx141(CopyButton, { value: selectedEvent.trace_id })
           ] })
         ] }),
-        requestId !== void 0 && /* @__PURE__ */ jsxs130(Box15, { children: [
-          /* @__PURE__ */ jsx140(Typography11, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          /* @__PURE__ */ jsxs130(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
-            /* @__PURE__ */ jsx140(Typography11, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId }),
-            /* @__PURE__ */ jsx140(CopyButton, { value: requestId })
+        requestId !== void 0 && /* @__PURE__ */ jsxs131(Box16, { children: [
+          /* @__PURE__ */ jsx141(Typography12, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
+          /* @__PURE__ */ jsxs131(Stack4, { alignItems: "center", direction: "row", sx: { "&:hover .copy-btn": { opacity: 1 } }, children: [
+            /* @__PURE__ */ jsx141(Typography12, { "data-testid": EVENT_DETAILS_REQUEST_ID_TEST_ID, variant: "body2", children: requestId }),
+            /* @__PURE__ */ jsx141(CopyButton, { value: requestId })
           ] })
         ] }),
-        eventGroups.info && /* @__PURE__ */ jsx140(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
+        eventGroups.info && /* @__PURE__ */ jsx141(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
       ] }) })
     ] }) })
   ] });
@@ -31697,18 +32014,18 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
-import { Alert as Alert5, Button as Button5, useTheme as useTheme6 } from "@mui/material";
+import { Alert as Alert5, Button as Button6, useTheme as useTheme6 } from "@mui/material";
 import { Background, MarkerType, MiniMap, Position as Position2, ReactFlow, useEdgesState, useNodesState, useStore as useStore4 } from "@xyflow/react";
-import { useCallback as useCallback10, useEffect as useEffect20, useRef as useRef15, useState as useState18 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect20, useRef as useRef15, useState as useState19 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Cancel as Cancel3, GppBad as GppBad2 } from "@mui/icons-material";
-import { Box as Box16, Divider as Divider4, Stack as Stack5, Tooltip as Tooltip6, Typography as Typography12, useTheme as useTheme4 } from "@mui/material";
+import { Cancel as Cancel4, GppBad as GppBad3 } from "@mui/icons-material";
+import { Box as Box17, Divider as Divider5, Stack as Stack5, Tooltip as Tooltip6, Typography as Typography13, useTheme as useTheme4 } from "@mui/material";
 import { Handle, Position } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import "react";
-import { memo as memo11, useMemo as useMemo11, useRef as useRef14, useState as useState17 } from "react";
-import { Fragment as Fragment10, jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
+import { memo as memo11, useMemo as useMemo11, useRef as useRef14, useState as useState18 } from "react";
+import { Fragment as Fragment11, jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
@@ -31716,20 +32033,20 @@ var handleStyle = {
 };
 var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning }) => {
   const theme = useTheme4();
-  return /* @__PURE__ */ jsxs131(Fragment10, { children: [
-    /* @__PURE__ */ jsx141(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-    /* @__PURE__ */ jsx141(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
-    /* @__PURE__ */ jsxs131(
+  return /* @__PURE__ */ jsxs132(Fragment11, { children: [
+    /* @__PURE__ */ jsx142(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+    /* @__PURE__ */ jsx142(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+    /* @__PURE__ */ jsxs132(
       Stack5,
       {
         alignItems: "center",
         direction: "row",
         sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
         children: [
-          /* @__PURE__ */ jsx141(Box16, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx141(AwsServiceIcon, { hideTooltip: true, service: event.service_name, size: "medium" }) }),
-          /* @__PURE__ */ jsxs131(Stack5, { sx: expanded ? void 0 : { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx141(
-              Typography12,
+          /* @__PURE__ */ jsx142(Box17, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx142(AwsServiceIcon, { hideTooltip: true, service: event.service_name, size: "medium" }) }),
+          /* @__PURE__ */ jsxs132(Stack5, { sx: expanded ? void 0 : { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx142(
+              Typography13,
               {
                 noWrap: !expanded,
                 sx: { fontWeight: 700, lineHeight: 1.25, ...expanded && { whiteSpace: "nowrap" } },
@@ -31737,8 +32054,8 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 children: getServiceDisplayName(event.service_name)
               }
             ),
-            event.resource_name != "" && /* @__PURE__ */ jsx141(
-              Typography12,
+            event.resource_name != "" && /* @__PURE__ */ jsx142(
+              Typography13,
               {
                 color: "text.secondary",
                 noWrap: !expanded,
@@ -31751,16 +32068,16 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
         ]
       }
     ),
-    /* @__PURE__ */ jsx141(Divider4, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
-    /* @__PURE__ */ jsxs131(
+    /* @__PURE__ */ jsx142(Divider5, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+    /* @__PURE__ */ jsxs132(
       Stack5,
       {
         alignItems: "center",
         direction: "row",
         sx: expanded ? { pb: "5px", pr: "8px", pt: "1px" } : { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
         children: [
-          /* @__PURE__ */ jsxs131(
-            Box16,
+          /* @__PURE__ */ jsxs132(
+            Box17,
             {
               sx: {
                 alignItems: "center",
@@ -31770,13 +32087,13 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
                 width: "38px"
               },
               children: [
-                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx141(Tooltip6, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx141(GppBad2, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
-                isError && !hasPermissionEvents && /* @__PURE__ */ jsx141(Tooltip6, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx141(Cancel3, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
+                (isError || isWarning) && hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip6, { arrow: true, title: "Permission denied", children: /* @__PURE__ */ jsx142(GppBad3, { sx: { color: isError ? theme.palette.error.main : theme.palette.warning.main, fontSize: "16px" } }) }),
+                isError && !hasPermissionEvents && /* @__PURE__ */ jsx142(Tooltip6, { arrow: true, title: "Error", children: /* @__PURE__ */ jsx142(Cancel4, { sx: { color: theme.palette.error.main, fontSize: "16px" } }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx141(
-            Typography12,
+          /* @__PURE__ */ jsx142(
+            Typography13,
             {
               "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
               noWrap: !expanded,
@@ -31792,7 +32109,7 @@ var NodeContent = ({ event, expanded, hasPermissionEvents, isError, isWarning })
 };
 var ServiceNode = memo11(({ data, selected }) => {
   const theme = useTheme4();
-  const [isHovered, setIsHovered] = useState17(false);
+  const [isHovered, setIsHovered] = useState18(false);
   const nodeRef = useRef14(null);
   const { operation_status } = data.event;
   const hasPermissionEventsLegacy = useMemo11(
@@ -31826,8 +32143,8 @@ var ServiceNode = memo11(({ data, selected }) => {
     const xyNode = nodeRef.current?.closest(".react-flow__node");
     if (xyNode) xyNode.style.zIndex = "";
   };
-  return /* @__PURE__ */ jsxs131(
-    Box16,
+  return /* @__PURE__ */ jsxs132(
+    Box17,
     {
       "data-testid": SERVICE_NODE_TEST_ID,
       onMouseEnter: handleMouseEnter,
@@ -31837,8 +32154,8 @@ var ServiceNode = memo11(({ data, selected }) => {
       sx: { display: "inline-block", position: "relative" },
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsx141(
-          Box16,
+        /* @__PURE__ */ jsx142(
+          Box17,
           {
             sx: {
               ...sharedBoxSx,
@@ -31846,11 +32163,11 @@ var ServiceNode = memo11(({ data, selected }) => {
               maxWidth: 220,
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx141(NodeContent, { ...contentProps, expanded: false })
+            children: /* @__PURE__ */ jsx142(NodeContent, { ...contentProps, expanded: false })
           }
         ),
-        /* @__PURE__ */ jsx141(
-          Box16,
+        /* @__PURE__ */ jsx142(
+          Box17,
           {
             onMouseLeave: handleMouseLeave,
             sx: {
@@ -31864,7 +32181,7 @@ var ServiceNode = memo11(({ data, selected }) => {
               width: "max-content",
               zIndex: 10
             },
-            children: /* @__PURE__ */ jsx141(NodeContent, { ...contentProps, expanded: true })
+            children: /* @__PURE__ */ jsx142(NodeContent, { ...contentProps, expanded: true })
           }
         )
       ]
@@ -31959,11 +32276,11 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box17, IconButton as IconButton6 } from "@mui/material";
+import { Box as Box18, IconButton as IconButton6 } 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 jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
 var selector = (s) => ({
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   maxZoomReached: s.transform[2] >= s.maxZoom,
@@ -31981,8 +32298,8 @@ var Controls = memo12(() => {
   const onFitViewHandler = () => {
     void fitView();
   };
-  return /* @__PURE__ */ jsxs132(
-    Box17,
+  return /* @__PURE__ */ jsxs133(
+    Box18,
     {
       sx: {
         bottom: 0,
@@ -31995,33 +32312,33 @@ var Controls = memo12(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx142(
+        /* @__PURE__ */ jsx143(
           IconButton6,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx142(Add, {})
+            children: /* @__PURE__ */ jsx143(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx142(
+        /* @__PURE__ */ jsx143(
           IconButton6,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx142(Remove, {})
+            children: /* @__PURE__ */ jsx143(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx142(
+        /* @__PURE__ */ jsx143(
           IconButton6,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx142(FitScreen, {})
+            children: /* @__PURE__ */ jsx143(FitScreen, {})
           }
         )
       ]
@@ -32033,7 +32350,7 @@ var Controls = memo12(() => {
 import { useTheme as useTheme5 } from "@mui/material";
 import { useStore as useStore3 } from "@xyflow/react";
 import { memo as memo13 } from "react";
-import { jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs134 } from "react/jsx-runtime";
 var ICON_FRACTION = 0.35;
 var PADDING_FRACTION = 0.18;
 var ICON_NATIVE_SIZE = 80;
@@ -32062,10 +32379,10 @@ var MinimapServiceNode = memo13(({
   const dotY = y + height - padding - dotRadius;
   const outlineColor = selected ? isError ? errorColor : "#1a73e8" : "#cccccc";
   const outlineWidth = selected ? 2 : 1;
-  return /* @__PURE__ */ jsxs133("g", { onClick: onClick ? (event2) => {
+  return /* @__PURE__ */ jsxs134("g", { onClick: onClick ? (event2) => {
     onClick(event2, id2);
   } : void 0, children: [
-    /* @__PURE__ */ jsx143(
+    /* @__PURE__ */ jsx144(
       "rect",
       {
         fill: "white",
@@ -32079,7 +32396,7 @@ var MinimapServiceNode = memo13(({
         y
       }
     ),
-    isError && /* @__PURE__ */ jsx143(
+    isError && /* @__PURE__ */ jsx144(
       "rect",
       {
         fill: errorColor,
@@ -32091,8 +32408,8 @@ var MinimapServiceNode = memo13(({
         y: y + 3
       }
     ),
-    Icon && /* @__PURE__ */ jsx143("g", { transform: `translate(${String(x + padding)}, ${String(y + padding)}) scale(${String(scale2)})`, children: /* @__PURE__ */ jsx143(Icon, { height: ICON_NATIVE_SIZE, width: ICON_NATIVE_SIZE }) }),
-    isError && Icon && /* @__PURE__ */ jsx143(
+    Icon && /* @__PURE__ */ jsx144("g", { transform: `translate(${String(x + padding)}, ${String(y + padding)}) scale(${String(scale2)})`, children: /* @__PURE__ */ jsx144(Icon, { height: ICON_NATIVE_SIZE, width: ICON_NATIVE_SIZE }) }),
+    isError && Icon && /* @__PURE__ */ jsx144(
       "circle",
       {
         cx: dotX,
@@ -32105,7 +32422,7 @@ var MinimapServiceNode = memo13(({
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment11, jsx as jsx144, jsxs as jsxs134 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx145, jsxs as jsxs135 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -32127,7 +32444,7 @@ var TraceGraph = ({
 }) => {
   const [nodes2, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges] = useEdgesState([]);
-  const [translateExtent, setTranslateExtent] = useState18();
+  const [translateExtent, setTranslateExtent] = useState19();
   const nodeBoundsRef = useRef15(null);
   const viewportRef = useRef15({ height: 0, width: 0, zoom: 1 });
   const updateExtent = useCallback10(() => {
@@ -32216,11 +32533,11 @@ var TraceGraph = ({
     }
   }, [spans.data, initialFocusEventId, setNodes, setEdges, updateExtent]);
   const theme = useTheme6();
-  return /* @__PURE__ */ jsxs134(Fragment11, { children: [
-    spans.error && /* @__PURE__ */ jsxs134(
+  return /* @__PURE__ */ jsxs135(Fragment12, { children: [
+    spans.error && /* @__PURE__ */ jsxs135(
       Alert5,
       {
-        action: /* @__PURE__ */ jsx144(Button5, { onClick: () => {
+        action: /* @__PURE__ */ jsx145(Button6, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -32232,7 +32549,7 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs134(
+    /* @__PURE__ */ jsxs135(
       ReactFlow,
       {
         "data-testid": TRACE_GRAPH_TEST_ID,
@@ -32251,9 +32568,9 @@ var TraceGraph = ({
         selectNodesOnDrag: false,
         translateExtent,
         children: [
-          /* @__PURE__ */ jsx144(ExtentUpdater, { onUpdate: updateExtent, viewportRef }),
-          /* @__PURE__ */ jsx144(Controls, {}),
-          /* @__PURE__ */ jsx144(
+          /* @__PURE__ */ jsx145(ExtentUpdater, { onUpdate: updateExtent, viewportRef }),
+          /* @__PURE__ */ jsx145(Controls, {}),
+          /* @__PURE__ */ jsx145(
             MiniMap,
             {
               nodeComponent: MinimapServiceNode,
@@ -32261,7 +32578,7 @@ var TraceGraph = ({
               zoomable: true
             }
           ),
-          /* @__PURE__ */ jsx144(
+          /* @__PURE__ */ jsx145(
             Background,
             {
               bgColor: theme.palette.background.default,
@@ -32275,7 +32592,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { jsx as jsx145, jsxs as jsxs135 } from "react/jsx-runtime";
+import { jsx as jsx146, jsxs as jsxs136 } from "react/jsx-runtime";
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
   flexGrow: 1,
@@ -32319,7 +32636,7 @@ var TraceGraphView = ({
   spans,
   traceId
 }) => {
-  return /* @__PURE__ */ jsxs135(
+  return /* @__PURE__ */ jsxs136(
     Paper2,
     {
       "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
@@ -32332,11 +32649,11 @@ var TraceGraphView = ({
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ jsx145(Main, { open, children: /* @__PURE__ */ jsxs135(Box18, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-          /* @__PURE__ */ jsx145(Box18, { sx: { display: "flex", px: 1, py: 1 }, children: /* @__PURE__ */ jsx145(Button6, { onClick: () => {
+        /* @__PURE__ */ jsx146(Main, { open, children: /* @__PURE__ */ jsxs136(Box19, { sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+          /* @__PURE__ */ jsx146(Box19, { sx: { display: "flex", px: 1, py: 1 }, children: /* @__PURE__ */ jsx146(Button7, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx145(ArrowBack, {}), children: "Go back" }) }),
-          /* @__PURE__ */ jsx145(Box18, { sx: { flexGrow: 1, overflow: "auto" }, children: traceId !== void 0 && /* @__PURE__ */ jsx145(ReactFlowProvider, { children: /* @__PURE__ */ jsx145(
+          }, startIcon: /* @__PURE__ */ jsx146(ArrowBack, {}), children: "Go back" }) }),
+          /* @__PURE__ */ jsx146(Box19, { sx: { flexGrow: 1, overflow: "auto" }, children: traceId !== void 0 && /* @__PURE__ */ jsx146(ReactFlowProvider, { children: /* @__PURE__ */ jsx146(
             TraceGraph,
             {
               initialFocusEventId: spanId,
@@ -32352,7 +32669,7 @@ var TraceGraphView = ({
             }
           ) }) })
         ] }) }),
-        /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
+        /* @__PURE__ */ jsx146(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx146(EventDetails, { onClose: handleClose, selectedEvent }) })
       ]
     }
   );
@@ -32400,9 +32717,9 @@ async function fetchConnectedTracesWaterfall(api, traceIds, allSpans = /* @__PUR
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState19();
-  const [loading, setLoading] = useState19(false);
-  const [fetchError, setFetchError] = useState19();
+  const [spans, setSpans] = useState20();
+  const [loading, setLoading] = useState20(false);
+  const [fetchError, setFetchError] = useState20();
   const fetchSpans = useCallback11(async () => {
     setLoading(true);
     try {
@@ -32419,8 +32736,8 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   useEffect21(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState19(true);
-  const [selectedEvent, setSelectedEvent] = useState19(() => spans?.find((span) => span.span_id === spanId));
+  const [open, setOpen] = useState20(true);
+  const [selectedEvent, setSelectedEvent] = useState20(() => spans?.find((span) => span.span_id === spanId));
   const spansReference = useRef16();
   useEffect21(() => {
     if (!spansReference.current && spans) {
@@ -32436,7 +32753,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const navigateToSpansList = useCallback11(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsx145(
+  return /* @__PURE__ */ jsx146(
     TraceGraphView,
     {
       fetchError,
@@ -32457,7 +32774,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-import { jsx as jsx146, jsxs as jsxs136 } from "react/jsx-runtime";
+import { jsx as jsx147, jsxs as jsxs137 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -32487,10 +32804,10 @@ var SpansListPage = () => {
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
   const versionCompatibility = checkEmulatorVersion(localstackVersion);
   const searchSupported = emulatorSupportsSearch(localstackVersion);
-  const [bannerDismissed, setBannerDismissed] = useState20(false);
+  const [bannerDismissed, setBannerDismissed] = useState21(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = useState20();
-  const [selectedSpanId, setSelectedSpanId] = useState20();
+  const [selectedTraceId, setSelectedTraceId] = useState21();
+  const [selectedSpanId, setSelectedSpanId] = useState21();
   const navigateToSpan = useCallback12((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
@@ -32528,10 +32845,10 @@ var SpansListPage = () => {
   switch (phase) {
     case "CHECKING_STATUS":
     case "CONNECTING_WS": {
-      return /* @__PURE__ */ jsx146(StatusMessage, { phase });
+      return /* @__PURE__ */ jsx147(StatusMessage, { phase });
     }
     case "DISABLED": {
-      return /* @__PURE__ */ jsx146(
+      return /* @__PURE__ */ jsx147(
         StatusMessage,
         {
           onEnable: handleEnable,
@@ -32540,7 +32857,7 @@ var SpansListPage = () => {
       );
     }
     case "INCOMPATIBLE": {
-      return /* @__PURE__ */ jsx146(
+      return /* @__PURE__ */ jsx147(
         StatusMessage,
         {
           localstackVersion,
@@ -32553,7 +32870,7 @@ var SpansListPage = () => {
       break;
     }
     case "UNREACHABLE": {
-      return /* @__PURE__ */ jsx146(
+      return /* @__PURE__ */ jsx147(
         StatusMessage,
         {
           onRetry: handleRetry,
@@ -32562,9 +32879,9 @@ var SpansListPage = () => {
       );
     }
   }
-  return /* @__PURE__ */ jsxs136(Paper3, { square: true, sx: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: [
-    /* @__PURE__ */ jsxs136(
-      Box19,
+  return /* @__PURE__ */ jsxs137(Paper3, { square: true, sx: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: [
+    /* @__PURE__ */ jsxs137(
+      Box20,
       {
         "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
@@ -32579,7 +32896,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          /* @__PURE__ */ jsx146(
+          /* @__PURE__ */ jsx147(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -32589,7 +32906,7 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          /* @__PURE__ */ jsx146(
+          /* @__PURE__ */ jsx147(
             SpansList,
             {
               clearingSpans,
@@ -32618,7 +32935,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ jsx146(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ jsx147(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });