@localstack/appinspector-ui 1.0.23 → 1.0.24

package/dist/index.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material8 = require("@mui/material");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_router_dom = require("react-router-dom");
 
 // src/api/use-api.tsx
@@ -62,7 +62,7 @@ var import_material6 = require("@mui/material");
 var import_icons_material = require("@mui/icons-material");
 var import_material5 = require("@mui/material");
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/components/cells/event-indicator-cell.tsx
 var import_material = require("@mui/material");
@@ -199,6 +199,9 @@ var WrapInComponent = ({ children, wrap, wrapperFn }) => {
   return children;
 };
 
+// src/components/aws-service-icon/icons/index.tsx
+var import_react3 = require("react");
+
 // src/types/service-names.ts
 var SERVICE_NAME = {
   ACCESSANALYZER: "accessanalyzer",
@@ -2388,7 +2391,8 @@ var SvgXray = (props) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("svg",
 ] });
 var xray_default = SvgXray;
 
-// src/components/aws-service-icon/icons/index.ts
+// src/components/aws-service-icon/icons/index.tsx
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var ICONS_MAP = {
   [SERVICE_NAME.ACCOUNT]: account_default,
   [SERVICE_NAME.ACM]: acm_default,
@@ -2511,30 +2515,30 @@ var ICONS_MAP = {
   [SERVICE_NAME.WAFV2]: wafv2_default,
   [SERVICE_NAME.XRAY]: xray_default
 };
-var getIconComponent = (service) => {
-  return ICONS_MAP[service] ?? ICONS_MAP.infrastructure;
-};
+var AwsServiceIconBase = (0, import_react3.memo)((props) => {
+  const Icon = ICONS_MAP[props.service] ?? ICONS_MAP.infrastructure;
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { ...props });
+});
 var supportedServiceNames = Object.keys(ICONS_MAP);
 
 // src/components/aws-service-icon/aws-service-icon.tsx
-var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var sizes = { large: [32, 32], medium: [22, 22], small: [11, 11] };
 var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
   const [width, height] = sizes[size];
-  const Icon = getIconComponent(service);
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
     WrapInComponent,
     {
       wrap: !hideTooltip,
-      wrapperFn: (child) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material2.Tooltip, { placement: "top", title: title ?? service, children: child }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { height, style: { display: "block" }, width })
+      wrapperFn: (child) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material2.Tooltip, { placement: "top", title: title ?? service, children: child }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(AwsServiceIconBase, { height, service, style: { display: "block" }, width })
     }
   );
 };
 
 // src/components/cells/pill-cell.tsx
 var import_material3 = require("@mui/material");
-var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_jsx_runtime124 = require("react/jsx-runtime");
 var PillCell = ({
   backgroundColor,
   borderColor,
@@ -2544,7 +2548,7 @@ var PillCell = ({
   paddingBottom,
   paddingTop
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
     import_material3.Box,
     {
       sx: {
@@ -2567,7 +2571,7 @@ var PillCell = ({
 };
 
 // src/components/cells/service-cell.tsx
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 var ServiceCell = ({
   borderColor,
   borderWidth,
@@ -2577,9 +2581,9 @@ var ServiceCell = ({
   showIcon = true,
   width = "32px"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(PillCell, { borderColor, borderWidth, height, children: [
-    showIcon ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Box, { sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(PillCell, { borderColor, borderWidth, height, children: [
+    showIcon ? /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         import_material4.Box,
         {
           sx: {
@@ -2591,12 +2595,12 @@ var ServiceCell = ({
             padding: 0,
             width
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { orientation: "vertical" })
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Divider, { orientation: "vertical" })
     ] }) : void 0,
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       import_material4.Typography,
       {
         sx: {
@@ -2619,9 +2623,9 @@ var ServiceCell = ({
         children: service
       }
     ),
-    resource ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Divider, { orientation: "vertical" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    resource ? /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Box, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material4.Divider, { orientation: "vertical" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         import_material4.Typography,
         {
           sx: {
@@ -2711,7 +2715,7 @@ var searchInObject = (object, searchTerm, skipKeys = []) => {
 };
 
 // src/components/spans-list/spans-data-grid.tsx
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 var resourceNameComparator = (v1 = "", v2 = "") => {
   return v1.localeCompare(v2);
 };
@@ -2726,7 +2730,7 @@ var columns = [
     field: "trace_id",
     headerName: "Trace",
     renderCell: (parameters) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Tooltip, { arrow: true, title: String(parameters.value), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Tooltip, { arrow: true, title: String(parameters.value), children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
         "span",
         {
           style: {
@@ -2745,7 +2749,7 @@ var columns = [
   {
     field: "start_time_unix_nano",
     headerName: "Time",
-    renderCell: (parameters) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ResponsiveTimestampCell, { value: parameters.value }),
+    renderCell: (parameters) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ResponsiveTimestampCell, { value: parameters.value }),
     type: "string",
     width: 180
   },
@@ -2756,7 +2760,7 @@ var columns = [
       if (!parameters.row.parent_service_name || !parameters.row.parent_resource_name) {
         return;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ServiceCell, { resource: parameters.row.parent_resource_name, service: parameters.row.parent_service_name });
+      return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ServiceCell, { resource: parameters.row.parent_resource_name, service: parameters.row.parent_service_name });
     },
     sortable: true,
     sortComparator: resourceNameComparator,
@@ -2774,7 +2778,7 @@ var columns = [
     headerName: "Consumer",
     maxWidth: 260,
     renderCell: (parameters) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ServiceCell, { resource: parameters.row.resource_name, service: parameters.row.service_name });
+      return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ServiceCell, { resource: parameters.row.resource_name, service: parameters.row.service_name });
     },
     sortComparator: resourceNameComparator
   },
@@ -2783,7 +2787,7 @@ var columns = [
     field: "events",
     headerName: "Events",
     minWidth: 120,
-    renderCell: (parameters) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(EventIndicatorCell, { events: parameters.row.events }),
+    renderCell: (parameters) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(EventIndicatorCell, { events: parameters.row.events }),
     sortable: false
   }
 ];
@@ -2805,8 +2809,8 @@ var SpansDataGrid = ({
   // setRows,
   sortingOption = defaultSortingOption
 }) => {
-  const [searchTerm, setSearchTerm] = (0, import_react3.useState)(() => localStorage.getItem("spansSearchTerm") ?? "");
-  const [sortModel, setSortModel] = (0, import_react3.useState)(() => {
+  const [searchTerm, setSearchTerm] = (0, import_react4.useState)(() => localStorage.getItem("spansSearchTerm") ?? "");
+  const [sortModel, setSortModel] = (0, import_react4.useState)(() => {
     const savedSorting = localStorage.getItem("spansSortModel");
     if (savedSorting) {
       try {
@@ -2822,38 +2826,38 @@ var SpansDataGrid = ({
       }
     ];
   });
-  const handleRowClick = (0, import_react3.useCallback)((parameters) => {
+  const handleRowClick = (0, import_react4.useCallback)((parameters) => {
     onSpanClick(parameters.row);
   }, [onSpanClick]);
-  const handleSearchTermChange = (0, import_react3.useCallback)((span) => {
+  const handleSearchTermChange = (0, import_react4.useCallback)((span) => {
     const newValue = span.target.value;
     setSearchTerm(newValue);
     localStorage.setItem("spansSearchTerm", newValue);
   }, []);
-  const handleSortModelChange = (0, import_react3.useCallback)((newSortModel) => {
+  const handleSortModelChange = (0, import_react4.useCallback)((newSortModel) => {
     setSortModel(newSortModel);
     localStorage.setItem("spansSortModel", JSON.stringify(newSortModel));
   }, []);
-  const filterSpansBySearchTerm = (0, import_react3.useCallback)(
+  const filterSpansBySearchTerm = (0, import_react4.useCallback)(
     (span) => {
       if (searchTerm.length === 0) return true;
       return searchInObject(span, searchTerm);
     },
     [searchTerm]
   );
-  const filtersToApply = (0, import_react3.useMemo)(() => [filterSpansBySearchTerm], [filterSpansBySearchTerm]);
-  const filteredRows = (0, import_react3.useMemo)(
+  const filtersToApply = (0, import_react4.useMemo)(() => [filterSpansBySearchTerm], [filterSpansBySearchTerm]);
+  const filteredRows = (0, import_react4.useMemo)(
     () => rows.filter((row) => filtersToApply.every((filter) => filter(row))),
     [filtersToApply, rows]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
         import_material5.TextField,
         {
-          label: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material5.Box, { sx: { display: "flex", gap: "0.25rem" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material.Search, { fontSize: "small" }),
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Typography, { children: "Search Spans" })
+          label: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material5.Box, { sx: { display: "flex", gap: "0.25rem" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.Search, { fontSize: "small" }),
+            /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Typography, { children: "Search Spans" })
           ] }),
           onChange: handleSearchTermChange,
           size: "small",
@@ -2861,11 +2865,11 @@ var SpansDataGrid = ({
           value: searchTerm
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Box, { sx: { flexGrow: 1 } }),
-      onFilterWriteOperationsChange && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Box, { sx: { flexGrow: 1 } }),
+      onFilterWriteOperationsChange && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
         import_material5.FormControlLabel,
         {
-          control: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+          control: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
             import_material5.Switch,
             {
               checked: filterWriteOperations,
@@ -2878,10 +2882,10 @@ var SpansDataGrid = ({
           label: "Only Write Operations"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Button, { onClick: onClearSpans, startIcon: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material.DeleteForeverOutlined, {}), children: "Clear Spans" }),
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Button, { disabled: loading, onClick: onRefresh, startIcon: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_icons_material.Cached, {}), children: "Refresh" })
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Button, { onClick: onClearSpans, startIcon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.DeleteForeverOutlined, {}), children: "Clear Spans" }),
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Button, { disabled: loading, onClick: onRefresh, startIcon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.Cached, {}), children: "Refresh" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { style: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("div", { style: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
       import_material5.Paper,
       {
         sx: {
@@ -2892,7 +2896,7 @@ var SpansDataGrid = ({
           minHeight: 120,
           p: 2
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
           import_x_data_grid.DataGrid,
           {
             columns,
@@ -2930,13 +2934,13 @@ var SpansDataGrid = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var SpansList = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material6.Box, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
-    props.spans.error && /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
+    props.spans.error && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
       import_material6.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material6.Button, { onClick: props.onRefresh, children: "Retry" }),
+        action: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Button, { onClick: props.onRefresh, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -2945,7 +2949,7 @@ var SpansList = (props) => {
         ]
       }
     ),
-    (props.spans.data !== void 0 || props.spans.loading) && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+    (props.spans.data !== void 0 || props.spans.loading) && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
       SpansDataGrid,
       {
         filterWriteOperations: props.filterWriteOperations,
@@ -3011,14 +3015,14 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
 };
 
 // src/components/status-message/status-message.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var StatusMessage = ({
   error,
   onRetry,
   status
 }) => {
   if (error instanceof AppInspectorNotFoundError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
       import_material7.Box,
       {
         sx: {
@@ -3029,18 +3033,18 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
           import_material7.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material2.ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "To enable App Inspector:" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("strong", { children: "To enable App Inspector:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 import_material7.Box,
                 {
                   component: "pre",
@@ -3053,24 +3057,24 @@ var StatusMessage = ({
                   children: "LOCALSTACK_APPINSPECTOR_ENABLE=1"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.Typography, { sx: { fontStyle: "italic", mb: 1, mt: 2 }, variant: "body2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material7.Typography, { sx: { fontStyle: "italic", mb: 1, mt: 2 }, variant: "body2", children: [
                 "Runtime changes can be made via endpoint",
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("code", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("code", { children: [
                   APPINSPECTOR_API_PREFIX,
                   "/status"
                 ] }),
                 ". For persistent default state across restarts, adjust the",
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("code", { children: "LOCALSTACK_APPINSPECTOR_ENABLE" }),
+                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("code", { children: "LOCALSTACK_APPINSPECTOR_ENABLE" }),
                 " ",
                 "environment variable in your",
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("code", { children: "~/.localstack" }),
+                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("code", { children: "~/.localstack" }),
                 " ",
                 "profile files.",
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                   import_material7.Link,
                   {
                     href: "https://docs.localstack.cloud/aws/capabilities/config/configuration/#profiles",
@@ -3080,8 +3084,8 @@ var StatusMessage = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "For more information:" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("strong", { children: "For more information:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 import_material7.Link,
                 {
                   href: "https://docs.localstack.cloud/user-guide/tools/application-inspector/",
@@ -3090,7 +3094,7 @@ var StatusMessage = ({
                   children: "App Inspector Documentation"
                 }
               ),
-              onRetry && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 import_material7.Button,
                 {
                   "aria-label": "Check App Inspector status again",
@@ -3106,7 +3110,7 @@ var StatusMessage = ({
     );
   }
   if (error instanceof ConnectionError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
       import_material7.Box,
       {
         sx: {
@@ -3117,17 +3121,17 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
           import_material7.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material2.ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "To start LocalStack:" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("strong", { children: "To start LocalStack:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 import_material7.Box,
                 {
                   component: "pre",
@@ -3140,7 +3144,7 @@ var StatusMessage = ({
                   children: "localstack start"
                 }
               ),
-              onRetry && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 import_material7.Button,
                 {
                   "aria-label": "Retry connection to LocalStack",
@@ -3156,7 +3160,7 @@ var StatusMessage = ({
     );
   }
   if (status?.status === "DISABLED") {
-    return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
       import_material7.Box,
       {
         sx: {
@@ -3167,17 +3171,17 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
           import_material7.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.InfoOutlined, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material2.InfoOutlined, { fontSize: "large" }),
             severity: "warning",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "To enable App Inspector at runtime:" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("strong", { children: "To enable App Inspector at runtime:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 import_material7.Box,
                 {
                   component: "pre",
@@ -3188,14 +3192,14 @@ var StatusMessage = ({
                     overflowX: "auto",
                     p: 1
                   },
-                  children: `curl -X PUT http://localhost:4566${APPINSPECTOR_API_PREFIX}/status \\
-  -H "Content-Type: application/json" \\
+                  children: String.raw`curl -X PUT http://localhost:4566${APPINSPECTOR_API_PREFIX}/status \
+  -H "Content-Type: application/json" \
   -d '{"status": "ENABLED"}'`
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 import_material7.Box,
                 {
                   component: "pre",
@@ -3208,8 +3212,8 @@ var StatusMessage = ({
                   children: "APPINSPECTOR=1"
                 }
               ),
-              Boolean(status.note) && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
-              onRetry && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+              Boolean(status.note) && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 import_material7.Button,
                 {
                   "aria-label": "Check if App Inspector is enabled",
@@ -3225,7 +3229,7 @@ var StatusMessage = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
       import_material7.Box,
       {
         sx: {
@@ -3236,16 +3240,16 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
           import_material7.Alert,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material2.ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_icons_material2.ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: error.message }),
-              onRetry && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Typography, { sx: { mb: 2 }, variant: "body2", children: error.message }),
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material7.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                 import_material7.Button,
                 {
                   "aria-label": "Retry operation",
@@ -3260,12 +3264,12 @@ var StatusMessage = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_jsx_runtime127.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_jsx_runtime128.Fragment, {});
 };
 
 // src/context.tsx
-var import_react4 = require("react");
 var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/constants/error-messages.ts
 var ERROR_MESSAGES = {
@@ -3386,20 +3390,20 @@ var createApiClient = ({ localstackEndpoint }) => {
 };
 
 // src/context.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
-var AppInspectorContext = (0, import_react4.createContext)(void 0);
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var AppInspectorContext = (0, import_react5.createContext)(void 0);
 var useAppInspector = () => {
-  const context = (0, import_react4.useContext)(AppInspectorContext);
+  const context = (0, import_react5.useContext)(AppInspectorContext);
   if (!context) {
     throw new Error("@localstack-studio/ui: components must be used within a <AppInspectorContextProvider>");
   }
   return context;
 };
 var AppInspectorContextProvider = (props) => {
-  const api = (0, import_react5.useMemo)(() => {
+  const api = (0, import_react6.useMemo)(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  const resolveLink = (0, import_react5.useCallback)(
+  const resolveLink = (0, import_react6.useCallback)(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -3411,7 +3415,7 @@ var AppInspectorContextProvider = (props) => {
     },
     [props.routePrefix]
   );
-  const contextValue = (0, import_react5.useMemo)(
+  const contextValue = (0, import_react6.useMemo)(
     () => ({
       linkComponent: props.linkComponent,
       localstackEndpoint: props.localstackEndpoint,
@@ -3419,13 +3423,13 @@ var AppInspectorContextProvider = (props) => {
     }),
     [props.linkComponent, props.localstackEndpoint, resolveLink]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(AppInspectorContext.Provider, { value: contextValue, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(AppInspectorContext.Provider, { value: contextValue, children: props.children }) });
 };
 
 // src/hooks/use-local-storage.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = (0, import_react6.useState)(() => {
+  const [storedValue, setStoredValue] = (0, import_react7.useState)(() => {
     try {
       const item = globalThis.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -3434,7 +3438,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = (0, import_react6.useCallback)((value) => {
+  const setValue = (0, import_react7.useCallback)((value) => {
     try {
       setStoredValue(value);
       globalThis.localStorage.setItem(key, JSON.stringify(value));
@@ -3446,7 +3450,7 @@ function useLocalStorage(key, initialValue) {
       console.error(`Error setting localStorage key "${key}":`, error);
     }
   }, [key]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const handleStorageChange = (event) => {
       if (event.key === key && event.newValue !== null) {
         try {
@@ -3465,15 +3469,15 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-status.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = (0, import_react7.useState)(true);
-  const [status, setStatus] = (0, import_react7.useState)();
-  const [error, setError] = (0, import_react7.useState)();
-  const hasFetchedReference = (0, import_react7.useRef)(false);
-  const abortControllerReference = (0, import_react7.useRef)(null);
-  const checkStatus = (0, import_react7.useCallback)(async () => {
+  const [checking, setChecking] = (0, import_react8.useState)(true);
+  const [status, setStatus] = (0, import_react8.useState)();
+  const [error, setError] = (0, import_react8.useState)();
+  const hasFetchedReference = (0, import_react8.useRef)(false);
+  const abortControllerReference = (0, import_react8.useRef)(null);
+  const checkStatus = (0, import_react8.useCallback)(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
     }
@@ -3497,7 +3501,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -3507,28 +3511,28 @@ var useStatus = () => {
 };
 
 // src/pages/spans-list-page.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
+var spansPerPageOptions = [25, 50, 100];
 var SpansListPage = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react8.useState)();
-  const [loading, setLoading] = (0, import_react8.useState)(false);
-  const hasFetched = (0, import_react8.useRef)(false);
+  const [spans, setSpans] = (0, import_react9.useState)();
+  const [loading, setLoading] = (0, import_react9.useState)(false);
+  const hasFetched = (0, import_react9.useRef)(false);
   const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
-  const mapPageToNextCursor = (0, import_react8.useRef)({});
-  const [page, setPage] = (0, import_react8.useState)(0);
-  const [pageSize, setPageSize] = (0, import_react8.useState)(100);
-  const [spansPerPageOptions] = (0, import_react8.useState)(() => [25, 50, 100]);
-  const [spanCount, setSpanCount] = (0, import_react8.useState)(0);
-  const queryOptions = (0, import_react8.useMemo)(() => {
+  const mapPageToNextCursor = (0, import_react9.useRef)({});
+  const [page, setPage] = (0, import_react9.useState)(0);
+  const [pageSize, setPageSize] = (0, import_react9.useState)(100);
+  const [spanCount, setSpanCount] = (0, import_react9.useState)(0);
+  const queryOptions = (0, import_react9.useMemo)(() => {
     return {
       is_write_operation: filterWriteOperations ? true : void 0,
       limit: pageSize,
       pagination_token: mapPageToNextCursor.current[page - 1]
     };
   }, [filterWriteOperations, pageSize, page]);
-  const [fetchError, setFetchError] = (0, import_react8.useState)();
+  const [fetchError, setFetchError] = (0, import_react9.useState)();
   const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = (0, import_react8.useCallback)(async () => {
+  const fetchSpans = (0, import_react9.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans(queryOptions);
@@ -3545,26 +3549,26 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, page, queryOptions]);
-  const fetchSpansSync = (0, import_react8.useCallback)(() => {
+  const fetchSpansSync = (0, import_react9.useCallback)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (hasFetched.current) return;
     if (status?.status !== "ENABLED") return;
     hasFetched.current = true;
     void fetchSpans();
   }, [fetchSpans, status]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!hasFetched.current) return;
     void fetchSpans();
   }, [fetchSpans]);
   const navigate = (0, import_react_router_dom.useNavigate)();
   const { resolveLink } = useAppInspector();
-  const navigateToSpan = (0, import_react8.useCallback)((span) => {
+  const navigateToSpan = (0, import_react9.useCallback)((span) => {
     const url = resolveLink({ to: "trace-graph", traceId: span.trace_id });
     navigate(`${url}?spanId=${span.span_id}`);
   }, [navigate, resolveLink]);
-  const clearSpans = (0, import_react8.useCallback)(async () => {
+  const clearSpans = (0, import_react9.useCallback)(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -3578,11 +3582,11 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  const handleRetry = (0, import_react8.useCallback)(() => {
+  const handleRetry = (0, import_react9.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     import_material8.Box,
     {
       "data-testid": "spans-list-page",
@@ -3593,14 +3597,14 @@ var SpansListPage = () => {
         flexGrow: 1,
         width: "100%"
       },
-      children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
         StatusMessage,
         {
           error: statusError,
           onRetry: handleRetry,
           status
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
         SpansList,
         {
           filterWriteOperations,
@@ -3637,13 +3641,13 @@ var SpansListPage = () => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material21 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react21 = require("@xyflow/react");
-var import_react22 = require("react");
+var import_react22 = require("@xyflow/react");
+var import_react23 = require("react");
 var import_react_router_dom2 = require("react-router-dom");
 
 // src/components/event-details/event-details.tsx
 var import_material16 = require("@mui/material");
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3842,9 +3846,9 @@ var getEventGroupsByType = (events) => {
 // src/components/event-details/event-details-header.tsx
 var import_icons_material3 = require("@mui/icons-material");
 var import_material9 = require("@mui/material");
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var EventDetailsHeader = ({ event, onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
     import_material9.Box,
     {
       sx: {
@@ -3856,16 +3860,16 @@ var EventDetailsHeader = ({ event, onClose }) => {
         p: 2
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material9.Typography, { color: "text.secondary", variant: "body2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material9.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material9.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material9.Typography, { color: "text.secondary", variant: "body2", children: [
             event.service_name,
             " ",
             "-",
             event.operation_name
           ] })
         ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material9.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material3.Close, {}) })
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material9.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material3.Close, {}) })
       ]
     }
   );
@@ -3877,28 +3881,28 @@ var import_material15 = require("@mui/material");
 // src/components/event-details/event-detail.tsx
 var import_icons_material7 = require("@mui/icons-material");
 var import_material13 = require("@mui/material");
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/status-icon.tsx
 var import_icons_material4 = require("@mui/icons-material");
 var import_material10 = require("@mui/material");
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var StatusIcon = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Cancel, { sx: { color: "red" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Cancel, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.Error, { sx: { color: "orange" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Error, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material4.CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.CheckCircle, { sx: { color: "lightgray" } });
     }
   }
 };
@@ -3906,9 +3910,9 @@ var StatusIcon = ({ errorLevel }) => {
 // src/components/event-details/iam-event-detail.tsx
 var import_icons_material5 = require("@mui/icons-material");
 var import_material11 = require("@mui/material");
-var import_jsx_runtime132 = require("react/jsx-runtime");
-var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+var import_jsx_runtime133 = require("react/jsx-runtime");
+var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     import_material11.Typography,
     {
       sx: {
@@ -3919,7 +3923,7 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime13
       children: label
     }
   ) }),
-  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     import_material11.Typography,
     {
       sx: {
@@ -3935,30 +3939,30 @@ var PermissionIcon = ({ status }) => {
   switch (status) {
     case "explicitly_allowed":
     case "implicitly_allowed": {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material5.CheckCircle, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.CheckCircle, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material5.Error, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.Error, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material5.Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { p: 2 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { p: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       import_material11.Chip,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -3968,12 +3972,12 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
-    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
+    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       DetailRow,
       {
-        content: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
           import_material11.Typography,
           {
             sx: {
@@ -3987,10 +3991,10 @@ var IAMEventDetail = ({ event }) => {
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       DetailRow,
       {
-        content: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
           import_material11.Typography,
           {
             sx: {
@@ -4005,20 +4009,20 @@ var IAMEventDetail = ({ event }) => {
         label: "Resources"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Grid, { container: true, spacing: 2, children: [
-        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Grid, { container: true, spacing: 2, children: [
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
         ] }) }),
-        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
         ] }) }),
-        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
         ] }) })
       ] })
     ] })
@@ -4028,8 +4032,8 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 var import_icons_material6 = require("@mui/icons-material");
 var import_material12 = require("@mui/material");
-var import_react9 = require("react");
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
   return {
@@ -4038,8 +4042,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const parsedData = (0, import_react9.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const parsedData = (0, import_react10.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -4057,12 +4061,12 @@ var IAMPermissionItem = ({ event }) => {
     return null;
   }
   const { chipColors, parsedIAM } = parsedData;
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { sx: { alignItems: "center", display: "flex" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.IconButton, { onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { sx: { alignItems: "center", display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.IconButton, { onClick: () => {
         setIsOpen(!isOpen);
-      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material6.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material6.KeyboardArrowRight, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.KeyboardArrowRight, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
         import_material12.Chip,
         {
           label: formatPermissionStatus(parsedIAM.permission),
@@ -4074,18 +4078,18 @@ var IAMPermissionItem = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Box, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Typography, { variant: "body2", children: parsedIAM.principal })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Box, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { variant: "body2", children: parsedIAM.principal })
     ] }) })
   ] });
 };
-var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/event-detail.tsx
-var import_jsx_runtime134 = require("react/jsx-runtime");
-var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material13.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+var import_jsx_runtime135 = require("react/jsx-runtime");
+var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     import_material13.Typography,
     {
       sx: {
@@ -4096,7 +4100,7 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
       children: label
     }
   ) }),
-  /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     import_material13.Typography,
     {
       sx: {
@@ -4109,15 +4113,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react10.useState)(false);
-  const textReference = (0, import_react10.useRef)(null);
-  const parsedMessage = (0, import_react10.useMemo)(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = (0, import_react10.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react11.useState)(false);
+  const textReference = (0, import_react11.useRef)(null);
+  const parsedMessage = (0, import_react11.useMemo)(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = (0, import_react11.useMemo)(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
-    [event.event_type, event.attributes?.payload]
+    [event]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -4130,17 +4134,17 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = (0, import_react10.useMemo)(
+  const hasAdditionalContent = (0, import_react11.useMemo)(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = (0, import_react10.useMemo)(
+  const shouldShowToggle = (0, import_react11.useMemo)(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material13.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material13.Box, { sx: { alignItems: "flex-start", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { sx: { alignItems: "flex-start", display: "flex" }, children: [
+      Boolean(shouldShowToggle) && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         import_material13.IconButton,
         {
           onClick: () => {
@@ -4148,10 +4152,10 @@ var EventMessage = ({ event }) => {
           },
           size: "small",
           sx: { mr: 1, mt: -0.5, p: 0 },
-          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material7.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material7.KeyboardArrowRight, {})
+          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material7.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material7.KeyboardArrowRight, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         import_material13.Typography,
         {
           ref: textReference,
@@ -4169,9 +4173,9 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Box, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IAMEventDetail, { event }) : /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DetailRow2, { content: parsedMessage.details, label: "Details:" })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IAMEventDetail, { event }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DetailRow2, { content: parsedMessage.details, label: "Details:" })
     ] }) })
   ] });
 };
@@ -4200,8 +4204,8 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material13.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         import_material13.Box,
         {
           sx: {
@@ -4209,7 +4213,7 @@ var EventDetail = ({
             display: "flex",
             mb: 1
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
             import_material13.Typography,
             {
               sx: {
@@ -4224,12 +4228,12 @@ var EventDetail = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IAMPermissionDetail, { events })
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IAMPermissionDetail, { events })
     ] });
   }
   const eventLevel = getEventLevelFromGroup(type);
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material13.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
       import_material13.Box,
       {
         sx: {
@@ -4239,8 +4243,8 @@ var EventDetail = ({
           mb: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(StatusIcon, { errorLevel: eventLevel }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(StatusIcon, { errorLevel: eventLevel }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
             import_material13.Typography,
             {
               sx: {
@@ -4259,14 +4263,14 @@ var EventDetail = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
       import_material13.Box,
       {
         sx: {
           maxWidth: "100%",
           mb: 1
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(EventMessage, { event })
+        children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EventMessage, { event })
       },
       `${event.span_id}-${event.event_id}`
     )) })
@@ -4276,12 +4280,12 @@ var EventDetail = ({
 // src/components/event-details/toggle-section.tsx
 var import_icons_material8 = require("@mui/icons-material");
 var import_material14 = require("@mui/material");
-var import_react11 = require("react");
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(initialOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material14.Box, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(initialOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material14.Box, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       import_material14.Box,
       {
         onClick: () => {
@@ -4291,7 +4295,7 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
           cursor: "pointer",
           mb: 1
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
           import_material14.Box,
           {
             role: "button",
@@ -4301,24 +4305,24 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
               gap: 1
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material14.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-              isOpen ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+              isOpen ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
             ]
           }
         )
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material14.Box, { children })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Box, { children })
   ] });
 };
 
 // src/components/event-details/event-section.tsx
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 var EventSection = ({
   eventGroups,
   headline
-}) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ToggleSection, { headline, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
-  eventGroups.errors && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
+  eventGroups.errors && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     EventDetail,
     {
       displayText: "Error",
@@ -4326,7 +4330,7 @@ var EventSection = ({
       type: "error"
     }
   ),
-  eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     EventDetail,
     {
       displayText: "Warning",
@@ -4334,7 +4338,7 @@ var EventSection = ({
       type: "warning"
     }
   ),
-  eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     EventDetail,
     {
       displayText: "IAM Permission",
@@ -4342,7 +4346,7 @@ var EventSection = ({
       type: "permission"
     }
   ),
-  eventGroups.info && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  eventGroups.info && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     EventDetail,
     {
       displayText: "Info",
@@ -4353,65 +4357,65 @@ var EventSection = ({
 ] }) });
 
 // src/components/event-details/event-details.tsx
-var import_jsx_runtime137 = require("react/jsx-runtime");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = (0, import_react12.useMemo)(() => {
+  const attributes = (0, import_react13.useMemo)(() => {
     const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
     return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
   }, [selectedEvent?.attributes]);
   if (!selectedEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(EventDetailsHeader, { event: selectedEvent, onClose }),
-    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Stack, { spacing: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.span_id })
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(EventDetailsHeader, { event: selectedEvent, onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { spacing: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.span_id })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.trace_id })
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.trace_id })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.operation_name })
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.operation_name })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.service_name })
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.service_name })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.resource_name })
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
-        Boolean(selectedEvent.region) && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.region })
+        Boolean(selectedEvent.region) && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.region })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
         ] }),
-        Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Typography, { variant: "body2", children: [
+        Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Typography, { variant: "body2", children: [
             ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
             " ",
             "ms"
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Stack, { direction: "row", spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
           import_material16.Chip,
           {
             color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
@@ -4419,11 +4423,11 @@ var EventDetails = ({ onClose, selectedEvent }) => {
             size: "small"
           }
         ),
-        Boolean(selectedEvent.status_message) && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.status_message })
+        Boolean(selectedEvent.status_message) && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.status_message })
       ] }) }),
-      selectedEvent.events.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+      selectedEvent.events.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
           EventSection,
           {
             eventGroups: getEventGroupsByType(selectedEvent.events),
@@ -4431,11 +4435,11 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         )
       ] }),
-      attributes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_jsx_runtime137.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Stack, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: renderKeyValue(key, value) })
+      attributes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Stack, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: renderKeyValue(key, value) })
         ] }, key)) }) })
       ] })
     ] }) })
@@ -4443,46 +4447,46 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 };
 function renderKeyValue(key, value) {
   if (typeof value === "string" && (key === "localstack.aws.service.request" || key === "localstack.aws.service.response" || key === "localstack.aws.service.exception")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Box, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Box, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
   }
   if (typeof value === "boolean") {
-    return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: value ? "yes" : "no" });
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: value ? "yes" : "no" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Typography, { variant: "body2", children: value });
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: value });
 }
 
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
 var import_material20 = require("@mui/material");
-var import_react19 = require("@xyflow/react");
-var import_react20 = require("react");
+var import_react20 = require("@xyflow/react");
+var import_react21 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material18 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react14 = require("@xyflow/react");
-var import_react15 = require("react");
+var import_react15 = require("@xyflow/react");
+var import_react16 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material9 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
-var import_react13 = require("react");
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react13.useMemo)(() => {
+  const icon = (0, import_react14.useMemo)(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material9.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material9.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_icons_material9.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material9.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
-  const color = (0, import_react13.useMemo)(() => {
+  const color = (0, import_react14.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4495,7 +4499,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material17.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material17.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     import_material17.Box,
     {
       sx: {
@@ -4515,17 +4519,17 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-var import_jsx_runtime139 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react15.memo)(function ServiceNode2({ data, selected }) {
-  const handleClick = (0, import_react15.useCallback)(() => {
+var ServiceNode = (0, import_react16.memo)(function ServiceNode2({ data, selected }) {
+  const handleClick = (0, import_react16.useCallback)(() => {
     data.onEventSelect(data.event);
   }, [data]);
-  const handleKeyPress = (0, import_react15.useCallback)(
+  const handleKeyPress = (0, import_react16.useCallback)(
     (event) => {
       if (event.key === "Enter" || event.key === " ") {
         handleClick();
@@ -4534,8 +4538,8 @@ var ServiceNode = (0, import_react15.memo)(function ServiceNode2({ data, selecte
     [handleClick]
   );
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_material18.Box, { sx: { maxWidth: 200 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { sx: { maxWidth: 200 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
       import_material18.Box,
       {
         onClick: handleClick,
@@ -4558,9 +4562,9 @@ var ServiceNode = (0, import_react15.memo)(function ServiceNode2({ data, selecte
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react14.Handle, { position: import_react14.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react14.Handle, { position: import_react14.Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react15.Handle, { position: import_react15.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react15.Handle, { position: import_react15.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
             ServiceCell,
             {
               borderColor: selected ? "text.primary" : void 0,
@@ -4574,7 +4578,7 @@ var ServiceNode = (0, import_react15.memo)(function ServiceNode2({ data, selecte
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
       import_material18.Stack,
       {
         alignItems: "center",
@@ -4585,7 +4589,7 @@ var ServiceNode = (0, import_react15.memo)(function ServiceNode2({ data, selecte
           mt: 0.5
         },
         children: [
-          hasErrors && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+          hasErrors && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
             import_material18.Stack,
             {
               direction: "row",
@@ -4594,10 +4598,10 @@ var ServiceNode = (0, import_react15.memo)(function ServiceNode2({ data, selecte
                 flexWrap: "wrap",
                 gap: "2px"
               },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(ProblemIndicator, { error }, error.span_id))
+              children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ProblemIndicator, { error }, error.span_id))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
             import_material18.Typography,
             {
               sx: {
@@ -4620,7 +4624,7 @@ var ServiceNode = (0, import_react15.memo)(function ServiceNode2({ data, selecte
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react16 = require("@xyflow/react");
+var import_react17 = require("@xyflow/react");
 var generateNodesAndEdges = (event, onEventSelect, parentId) => {
   const nodes = [];
   const edges = [];
@@ -4637,8 +4641,8 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react16.Position.Right,
-    targetPosition: import_react16.Position.Left,
+    sourcePosition: import_react17.Position.Right,
+    targetPosition: import_react17.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -4648,7 +4652,7 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react16.MarkerType.Arrow,
+        type: import_react17.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -4713,8 +4717,8 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
-var import_react17 = require("@xyflow/react");
-var import_react18 = require("react");
+var import_react18 = require("@xyflow/react");
+var import_react19 = require("react");
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -4755,15 +4759,15 @@ function shallow$1(objA, objB) {
 }
 
 // src/components/trace-graph/xyflow/controls.tsx
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime141 = require("react/jsx-runtime");
 var selector = (s) => ({
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = (0, import_react18.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react17.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react17.useReactFlow)();
+var Controls = (0, import_react19.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react18.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react18.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -4773,7 +4777,7 @@ var Controls = (0, import_react18.memo)(() => {
   const onFitViewHandler = () => {
     void fitView();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
     import_material19.Box,
     {
       sx: {
@@ -4787,33 +4791,33 @@ var Controls = (0, import_react18.memo)(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
           import_material19.IconButton,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material10.Add, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.Add, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
           import_material19.IconButton,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material10.Remove, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.Remove, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
           import_material19.IconButton,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_icons_material10.FitScreen, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.FitScreen, {})
           }
         )
       ]
@@ -4822,7 +4826,7 @@ var Controls = (0, import_react18.memo)(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-var import_jsx_runtime141 = require("react/jsx-runtime");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 var nodeTypes = {
   service: ServiceNode
 };
@@ -4833,12 +4837,12 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = (0, import_react20.useState)([]);
-  const [edges, setEdges] = (0, import_react20.useState)([]);
-  const [initialViewSet, setInitialViewSet] = (0, import_react20.useState)(false);
-  const { fitView, setCenter } = (0, import_react19.useReactFlow)();
-  const store = (0, import_react19.useStoreApi)();
-  const updateSelectedNode = (0, import_react20.useCallback)(
+  const [nodes, setNodes] = (0, import_react21.useState)([]);
+  const [edges, setEdges] = (0, import_react21.useState)([]);
+  const [initialViewSet, setInitialViewSet] = (0, import_react21.useState)(false);
+  const { fitView, setCenter } = (0, import_react20.useReactFlow)();
+  const store = (0, import_react20.useStoreApi)();
+  const updateSelectedNode = (0, import_react21.useCallback)(
     (nodeId) => {
       const { addSelectedNodes } = store.getState();
       if (nodeId) {
@@ -4850,7 +4854,7 @@ var TraceGraph = ({
     },
     [nodes, store]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -4882,7 +4886,7 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [onEventSelect, spans.data]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -4902,20 +4906,20 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (initialFocusEventId) {
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = (0, import_react20.useCallback)((_event, node) => {
+  const onNodeClick = (0, import_react21.useCallback)((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_jsx_runtime141.Fragment, { children: [
-    spans.error && /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [
+    spans.error && /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
       import_material20.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material20.Button, { onClick: () => {
+        action: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material20.Button, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -4926,8 +4930,8 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
-      import_react19.ReactFlow,
+    /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
+      import_react20.ReactFlow,
       {
         "data-testid": "trace-graph",
         defaultViewport: { x: 0, y: 0, zoom: 1 },
@@ -4940,8 +4944,8 @@ var TraceGraph = ({
         onNodeClick,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Controls, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react19.Background, {})
+          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Controls, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react20.Background, {})
         ]
       }
     )
@@ -4949,7 +4953,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_jsx_runtime143 = require("react/jsx-runtime");
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -4998,7 +5002,7 @@ var TraceGraphView = ({
   viewPortPixelWidth
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
     import_material21.Box,
     {
       "data-testid": "trace-graph-page",
@@ -5011,13 +5015,13 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material21.Box, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material21.Button, { onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_material21.Box, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material21.Button, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_icons_material11.ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material21.Box, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material11.ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material21.Box, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
           import_material21.Paper,
           {
             sx: {
@@ -5027,22 +5031,22 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
               StatusMessage,
               {
                 error: statusError,
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
                 import_material21.Box,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_react21.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react22.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -5060,7 +5064,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -5073,10 +5077,10 @@ var TraceGraphPage = () => {
   const [searchParameters] = (0, import_react_router_dom2.useSearchParams)();
   const spanId = searchParameters.get("spanId");
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react22.useState)();
-  const [loading, setLoading] = (0, import_react22.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react22.useState)();
-  const fetchSpans = (0, import_react22.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react23.useState)();
+  const [loading, setLoading] = (0, import_react23.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react23.useState)();
+  const fetchSpans = (0, import_react23.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -5091,14 +5095,14 @@ var TraceGraphPage = () => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react22.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react22.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react22.useState)(0);
+  const [open, setOpen] = (0, import_react23.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react23.useState)();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react23.useState)(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react22.useCallback)(() => {
+  const calculateDrawerWidth = (0, import_react23.useCallback)(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -5106,7 +5110,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -5120,20 +5124,20 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react22.useCallback)((event) => {
+  const handleEventSelect = (0, import_react23.useCallback)((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = (0, import_react22.useCallback)(() => {
+  const handleRetry = (0, import_react23.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const navigate = (0, import_react_router_dom2.useNavigate)();
   const { resolveLink } = useAppInspector();
-  const navigateToSpansList = (0, import_react22.useCallback)(() => {
+  const navigateToSpansList = (0, import_react23.useCallback)(() => {
     const url = resolveLink({ to: "spans-list" });
     navigate(url);
   }, [navigate, resolveLink]);
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
     TraceGraphView,
     {
       fetchError,