@localstack/appinspector-ui 1.0.23 → 1.0.25

package/dist/index.js

@@ -162,6 +162,9 @@ var WrapInComponent = ({ children, wrap, wrapperFn }) => {
   return children;
 };
 
+// src/components/aws-service-icon/icons/index.tsx
+import { memo } from "react";
+
 // src/types/service-names.ts
 var SERVICE_NAME = {
   ACCESSANALYZER: "accessanalyzer",
@@ -2351,7 +2354,8 @@ var SvgXray = (props) => /* @__PURE__ */ jsxs118("svg", { xmlns: "http://www.w3.
 ] });
 var xray_default = SvgXray;
 
-// src/components/aws-service-icon/icons/index.ts
+// src/components/aws-service-icon/icons/index.tsx
+import { jsx as jsx122 } from "react/jsx-runtime";
 var ICONS_MAP = {
   [SERVICE_NAME.ACCOUNT]: account_default,
   [SERVICE_NAME.ACM]: acm_default,
@@ -2474,30 +2478,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 = memo((props) => {
+  const Icon = ICONS_MAP[props.service] ?? ICONS_MAP.infrastructure;
+  return /* @__PURE__ */ jsx122(Icon, { ...props });
+});
 var supportedServiceNames = Object.keys(ICONS_MAP);
 
 // src/components/aws-service-icon/aws-service-icon.tsx
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "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__ */ jsx122(
+  return /* @__PURE__ */ jsx123(
     WrapInComponent,
     {
       wrap: !hideTooltip,
-      wrapperFn: (child) => /* @__PURE__ */ jsx122(Tooltip2, { placement: "top", title: title ?? service, children: child }),
-      children: /* @__PURE__ */ jsx122(Icon, { height, style: { display: "block" }, width })
+      wrapperFn: (child) => /* @__PURE__ */ jsx123(Tooltip2, { placement: "top", title: title ?? service, children: child }),
+      children: /* @__PURE__ */ jsx123(AwsServiceIconBase, { height, service, style: { display: "block" }, width })
     }
   );
 };
 
 // src/components/cells/pill-cell.tsx
 import { Box as Box2 } from "@mui/material";
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
 var PillCell = ({
   backgroundColor,
   borderColor,
@@ -2507,7 +2511,7 @@ var PillCell = ({
   paddingBottom,
   paddingTop
 }) => {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx124(
     Box2,
     {
       sx: {
@@ -2530,7 +2534,7 @@ var PillCell = ({
 };
 
 // src/components/cells/service-cell.tsx
-import { Fragment as Fragment2, jsx as jsx124, jsxs as jsxs119 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx125, jsxs as jsxs119 } from "react/jsx-runtime";
 var ServiceCell = ({
   borderColor,
   borderWidth,
@@ -2540,26 +2544,27 @@ var ServiceCell = ({
   showIcon = true,
   width = "32px"
 }) => {
-  return /* @__PURE__ */ jsx124(Box3, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs119(PillCell, { borderColor, borderWidth, height, children: [
+  return /* @__PURE__ */ jsx125(Box3, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs119(PillCell, { borderColor, borderWidth, height, children: [
     showIcon ? /* @__PURE__ */ jsxs119(Fragment2, { children: [
-      /* @__PURE__ */ jsx124(
+      /* @__PURE__ */ jsx125(
         Box3,
         {
           sx: {
             alignItems: "center",
             display: "flex",
+            flexShrink: 0,
             height,
             justifyContent: "center",
             overflow: "hidden",
             padding: 0,
             width
           },
-          children: /* @__PURE__ */ jsx124(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
+          children: /* @__PURE__ */ jsx125(AwsServiceIcon, { hideTooltip: true, service, size: "large" })
         }
       ),
-      /* @__PURE__ */ jsx124(Divider, { orientation: "vertical" })
+      /* @__PURE__ */ jsx125(Divider, { orientation: "vertical" })
     ] }) : void 0,
-    /* @__PURE__ */ jsx124(
+    /* @__PURE__ */ jsx125(
       Typography,
       {
         sx: {
@@ -2583,8 +2588,8 @@ var ServiceCell = ({
       }
     ),
     resource ? /* @__PURE__ */ jsxs119(Fragment2, { children: [
-      /* @__PURE__ */ jsx124(Box3, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ jsx124(Divider, { orientation: "vertical" }) }),
-      /* @__PURE__ */ jsx124(
+      /* @__PURE__ */ jsx125(Box3, { sx: { height: "100%", paddingY: 0.5 }, children: /* @__PURE__ */ jsx125(Divider, { orientation: "vertical" }) }),
+      /* @__PURE__ */ jsx125(
         Typography,
         {
           sx: {
@@ -2674,7 +2679,7 @@ var searchInObject = (object, searchTerm, skipKeys = []) => {
 };
 
 // src/components/spans-list/spans-data-grid.tsx
-import { Fragment as Fragment3, jsx as jsx125, jsxs as jsxs120 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx126, jsxs as jsxs120 } from "react/jsx-runtime";
 var resourceNameComparator = (v1 = "", v2 = "") => {
   return v1.localeCompare(v2);
 };
@@ -2689,7 +2694,7 @@ var columns = [
     field: "trace_id",
     headerName: "Trace",
     renderCell: (parameters) => {
-      return /* @__PURE__ */ jsx125(Tooltip3, { arrow: true, title: String(parameters.value), children: /* @__PURE__ */ jsx125(
+      return /* @__PURE__ */ jsx126(Tooltip3, { arrow: true, title: String(parameters.value), children: /* @__PURE__ */ jsx126(
         "span",
         {
           style: {
@@ -2708,7 +2713,7 @@ var columns = [
   {
     field: "start_time_unix_nano",
     headerName: "Time",
-    renderCell: (parameters) => /* @__PURE__ */ jsx125(ResponsiveTimestampCell, { value: parameters.value }),
+    renderCell: (parameters) => /* @__PURE__ */ jsx126(ResponsiveTimestampCell, { value: parameters.value }),
     type: "string",
     width: 180
   },
@@ -2719,7 +2724,7 @@ var columns = [
       if (!parameters.row.parent_service_name || !parameters.row.parent_resource_name) {
         return;
       }
-      return /* @__PURE__ */ jsx125(ServiceCell, { resource: parameters.row.parent_resource_name, service: parameters.row.parent_service_name });
+      return /* @__PURE__ */ jsx126(ServiceCell, { resource: parameters.row.parent_resource_name, service: parameters.row.parent_service_name });
     },
     sortable: true,
     sortComparator: resourceNameComparator,
@@ -2737,7 +2742,7 @@ var columns = [
     headerName: "Consumer",
     maxWidth: 260,
     renderCell: (parameters) => {
-      return /* @__PURE__ */ jsx125(ServiceCell, { resource: parameters.row.resource_name, service: parameters.row.service_name });
+      return /* @__PURE__ */ jsx126(ServiceCell, { resource: parameters.row.resource_name, service: parameters.row.service_name });
     },
     sortComparator: resourceNameComparator
   },
@@ -2746,7 +2751,7 @@ var columns = [
     field: "events",
     headerName: "Events",
     minWidth: 120,
-    renderCell: (parameters) => /* @__PURE__ */ jsx125(EventIndicatorCell, { events: parameters.row.events }),
+    renderCell: (parameters) => /* @__PURE__ */ jsx126(EventIndicatorCell, { events: parameters.row.events }),
     sortable: false
   }
 ];
@@ -2810,13 +2815,13 @@ var SpansDataGrid = ({
     [filtersToApply, rows]
   );
   return /* @__PURE__ */ jsxs120(Fragment3, { children: [
-    /* @__PURE__ */ jsx125(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs120(Box4, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-      /* @__PURE__ */ jsx125(
+    /* @__PURE__ */ jsx126(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs120(Box4, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx126(
         TextField,
         {
           label: /* @__PURE__ */ jsxs120(Box4, { sx: { display: "flex", gap: "0.25rem" }, children: [
-            /* @__PURE__ */ jsx125(Search, { fontSize: "small" }),
-            /* @__PURE__ */ jsx125(Typography2, { children: "Search Spans" })
+            /* @__PURE__ */ jsx126(Search, { fontSize: "small" }),
+            /* @__PURE__ */ jsx126(Typography2, { children: "Search Spans" })
           ] }),
           onChange: handleSearchTermChange,
           size: "small",
@@ -2824,11 +2829,11 @@ var SpansDataGrid = ({
           value: searchTerm
         }
       ),
-      /* @__PURE__ */ jsx125(Box4, { sx: { flexGrow: 1 } }),
-      onFilterWriteOperationsChange && /* @__PURE__ */ jsx125(
+      /* @__PURE__ */ jsx126(Box4, { sx: { flexGrow: 1 } }),
+      onFilterWriteOperationsChange && /* @__PURE__ */ jsx126(
         FormControlLabel,
         {
-          control: /* @__PURE__ */ jsx125(
+          control: /* @__PURE__ */ jsx126(
             Switch,
             {
               checked: filterWriteOperations,
@@ -2841,10 +2846,10 @@ var SpansDataGrid = ({
           label: "Only Write Operations"
         }
       ),
-      /* @__PURE__ */ jsx125(Button, { onClick: onClearSpans, startIcon: /* @__PURE__ */ jsx125(DeleteForeverOutlined, {}), children: "Clear Spans" }),
-      /* @__PURE__ */ jsx125(Button, { disabled: loading, onClick: onRefresh, startIcon: /* @__PURE__ */ jsx125(Cached, {}), children: "Refresh" })
+      /* @__PURE__ */ jsx126(Button, { onClick: onClearSpans, startIcon: /* @__PURE__ */ jsx126(DeleteForeverOutlined, {}), children: "Clear Spans" }),
+      /* @__PURE__ */ jsx126(Button, { disabled: loading, onClick: onRefresh, startIcon: /* @__PURE__ */ jsx126(Cached, {}), children: "Refresh" })
     ] }) }),
-    /* @__PURE__ */ jsx125("div", { style: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: /* @__PURE__ */ jsx125(
+    /* @__PURE__ */ jsx126("div", { style: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: /* @__PURE__ */ jsx126(
       Paper,
       {
         sx: {
@@ -2855,7 +2860,7 @@ var SpansDataGrid = ({
           minHeight: 120,
           p: 2
         },
-        children: /* @__PURE__ */ jsx125(
+        children: /* @__PURE__ */ jsx126(
           DataGrid,
           {
             columns,
@@ -2893,13 +2898,13 @@ var SpansDataGrid = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-import { jsx as jsx126, jsxs as jsxs121 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs121 } from "react/jsx-runtime";
 var SpansList = (props) => {
   return /* @__PURE__ */ jsxs121(Box5, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
     props.spans.error && /* @__PURE__ */ jsxs121(
       Alert,
       {
-        action: /* @__PURE__ */ jsx126(Button2, { onClick: props.onRefresh, children: "Retry" }),
+        action: /* @__PURE__ */ jsx127(Button2, { onClick: props.onRefresh, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -2908,7 +2913,7 @@ var SpansList = (props) => {
         ]
       }
     ),
-    (props.spans.data !== void 0 || props.spans.loading) && /* @__PURE__ */ jsx126(
+    (props.spans.data !== void 0 || props.spans.loading) && /* @__PURE__ */ jsx127(
       SpansDataGrid,
       {
         filterWriteOperations: props.filterWriteOperations,
@@ -2974,14 +2979,14 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
 };
 
 // src/components/status-message/status-message.tsx
-import { Fragment as Fragment4, jsx as jsx127, jsxs as jsxs122 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx128, jsxs as jsxs122 } from "react/jsx-runtime";
 var StatusMessage = ({
   error,
   onRetry,
   status
 }) => {
   if (error instanceof AppInspectorNotFoundError) {
-    return /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsx128(
       Box6,
       {
         sx: {
@@ -2995,15 +3000,15 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs122(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx127(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx127(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "To enable App Inspector:" }) }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
-              /* @__PURE__ */ jsx127(
+              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "To enable App Inspector:" }) }),
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
+              /* @__PURE__ */ jsx128(
                 Box6,
                 {
                   component: "pre",
@@ -3025,15 +3030,15 @@ var StatusMessage = ({
                 ] }),
                 ". For persistent default state across restarts, adjust the",
                 " ",
-                /* @__PURE__ */ jsx127("code", { children: "LOCALSTACK_APPINSPECTOR_ENABLE" }),
+                /* @__PURE__ */ jsx128("code", { children: "LOCALSTACK_APPINSPECTOR_ENABLE" }),
                 " ",
                 "environment variable in your",
                 " ",
-                /* @__PURE__ */ jsx127("code", { children: "~/.localstack" }),
+                /* @__PURE__ */ jsx128("code", { children: "~/.localstack" }),
                 " ",
                 "profile files.",
                 " ",
-                /* @__PURE__ */ jsx127(
+                /* @__PURE__ */ jsx128(
                   Link,
                   {
                     href: "https://docs.localstack.cloud/aws/capabilities/config/configuration/#profiles",
@@ -3043,8 +3048,8 @@ var StatusMessage = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "For more information:" }) }),
-              /* @__PURE__ */ jsx127(
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "For more information:" }) }),
+              /* @__PURE__ */ jsx128(
                 Link,
                 {
                   href: "https://docs.localstack.cloud/user-guide/tools/application-inspector/",
@@ -3053,7 +3058,7 @@ var StatusMessage = ({
                   children: "App Inspector Documentation"
                 }
               ),
-              onRetry && /* @__PURE__ */ jsx127(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx127(
+              onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
                 Button3,
                 {
                   "aria-label": "Check App Inspector status again",
@@ -3069,7 +3074,7 @@ var StatusMessage = ({
     );
   }
   if (error instanceof ConnectionError) {
-    return /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsx128(
       Box6,
       {
         sx: {
@@ -3083,14 +3088,14 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs122(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx127(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx127(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "To start LocalStack:" }) }),
-              /* @__PURE__ */ jsx127(
+              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "To start LocalStack:" }) }),
+              /* @__PURE__ */ jsx128(
                 Box6,
                 {
                   component: "pre",
@@ -3103,7 +3108,7 @@ var StatusMessage = ({
                   children: "localstack start"
                 }
               ),
-              onRetry && /* @__PURE__ */ jsx127(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx127(
+              onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
                 Button3,
                 {
                   "aria-label": "Retry connection to LocalStack",
@@ -3119,7 +3124,7 @@ var StatusMessage = ({
     );
   }
   if (status?.status === "DISABLED") {
-    return /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsx128(
       Box6,
       {
         sx: {
@@ -3133,14 +3138,14 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs122(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx127(InfoOutlined, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx128(InfoOutlined, { fontSize: "large" }),
             severity: "warning",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx127(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "To enable App Inspector at runtime:" }) }),
-              /* @__PURE__ */ jsx127(
+              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "To enable App Inspector at runtime:" }) }),
+              /* @__PURE__ */ jsx128(
                 Box6,
                 {
                   component: "pre",
@@ -3151,14 +3156,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__ */ jsx127(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
-              /* @__PURE__ */ jsx127(
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx128("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
+              /* @__PURE__ */ jsx128(
                 Box6,
                 {
                   component: "pre",
@@ -3171,8 +3176,8 @@ var StatusMessage = ({
                   children: "APPINSPECTOR=1"
                 }
               ),
-              Boolean(status.note) && /* @__PURE__ */ jsx127(Typography3, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
-              onRetry && /* @__PURE__ */ jsx127(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx127(
+              Boolean(status.note) && /* @__PURE__ */ jsx128(Typography3, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
+              onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
                 Button3,
                 {
                   "aria-label": "Check if App Inspector is enabled",
@@ -3188,7 +3193,7 @@ var StatusMessage = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsx128(
       Box6,
       {
         sx: {
@@ -3202,13 +3207,13 @@ var StatusMessage = ({
         children: /* @__PURE__ */ jsxs122(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx127(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx128(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx127(AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
-              /* @__PURE__ */ jsx127(Typography3, { sx: { mb: 2 }, variant: "body2", children: error.message }),
-              onRetry && /* @__PURE__ */ jsx127(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx127(
+              /* @__PURE__ */ jsx128(AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
+              /* @__PURE__ */ jsx128(Typography3, { sx: { mb: 2 }, variant: "body2", children: error.message }),
+              onRetry && /* @__PURE__ */ jsx128(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx128(
                 Button3,
                 {
                   "aria-label": "Retry operation",
@@ -3223,7 +3228,7 @@ var StatusMessage = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx127(Fragment4, {});
+  return /* @__PURE__ */ jsx128(Fragment4, {});
 };
 
 // src/context.tsx
@@ -3349,7 +3354,7 @@ var createApiClient = ({ localstackEndpoint }) => {
 };
 
 // src/context.tsx
-import { jsx as jsx128 } from "react/jsx-runtime";
+import { jsx as jsx129 } from "react/jsx-runtime";
 var AppInspectorContext = createContext2(void 0);
 var useAppInspector = () => {
   const context = useContext2(AppInspectorContext);
@@ -3382,7 +3387,7 @@ var AppInspectorContextProvider = (props) => {
     }),
     [props.linkComponent, props.localstackEndpoint, resolveLink]
   );
-  return /* @__PURE__ */ jsx128(ApiProvider, { api, children: /* @__PURE__ */ jsx128(AppInspectorContext.Provider, { value: contextValue, children: props.children }) });
+  return /* @__PURE__ */ jsx129(ApiProvider, { api, children: /* @__PURE__ */ jsx129(AppInspectorContext.Provider, { value: contextValue, children: props.children }) });
 };
 
 // src/hooks/use-local-storage.tsx
@@ -3470,7 +3475,8 @@ var useStatus = () => {
 };
 
 // src/pages/spans-list-page.tsx
-import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx130 } from "react/jsx-runtime";
+var spansPerPageOptions = [25, 50, 100];
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const [spans, setSpans] = useState5();
@@ -3480,7 +3486,6 @@ var SpansListPage = () => {
   const mapPageToNextCursor = useRef3({});
   const [page, setPage] = useState5(0);
   const [pageSize, setPageSize] = useState5(100);
-  const [spansPerPageOptions] = useState5(() => [25, 50, 100]);
   const [spanCount, setSpanCount] = useState5(0);
   const queryOptions = useMemo4(() => {
     return {
@@ -3545,7 +3550,7 @@ var SpansListPage = () => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx130(
     Box7,
     {
       "data-testid": "spans-list-page",
@@ -3556,14 +3561,14 @@ var SpansListPage = () => {
         flexGrow: 1,
         width: "100%"
       },
-      children: shouldShowStatusMessage ? /* @__PURE__ */ jsx129(
+      children: shouldShowStatusMessage ? /* @__PURE__ */ jsx130(
         StatusMessage,
         {
           error: statusError,
           onRetry: handleRetry,
           status
         }
-      ) : /* @__PURE__ */ jsx129(
+      ) : /* @__PURE__ */ jsx130(
         SpansList,
         {
           filterWriteOperations,
@@ -3805,7 +3810,7 @@ var getEventGroupsByType = (events) => {
 // src/components/event-details/event-details-header.tsx
 import { Close } from "@mui/icons-material";
 import { Box as Box8, IconButton, Typography as Typography4 } from "@mui/material";
-import { jsx as jsx130, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs123 } from "react/jsx-runtime";
 var EventDetailsHeader = ({ event, onClose }) => {
   return /* @__PURE__ */ jsxs123(
     Box8,
@@ -3820,7 +3825,7 @@ var EventDetailsHeader = ({ event, onClose }) => {
       },
       children: [
         /* @__PURE__ */ jsxs123(Box8, { children: [
-          /* @__PURE__ */ jsx130(Typography4, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
+          /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
           /* @__PURE__ */ jsxs123(Typography4, { color: "text.secondary", variant: "body2", children: [
             event.service_name,
             " ",
@@ -3828,7 +3833,7 @@ var EventDetailsHeader = ({ event, onClose }) => {
             event.operation_name
           ] })
         ] }),
-        onClose && /* @__PURE__ */ jsx130(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx130(Close, {}) })
+        onClose && /* @__PURE__ */ jsx131(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx131(Close, {}) })
       ]
     }
   );
@@ -3845,23 +3850,23 @@ import { useEffect as useEffect5, useMemo as useMemo6, useRef as useRef4, useSta
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
 import { Box as Box9 } from "@mui/material";
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
 var StatusIcon = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ jsx131(Cancel, { sx: { color: "red" } });
+      return /* @__PURE__ */ jsx132(Cancel, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ jsx131(Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ jsx132(Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ jsx131(RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ jsx132(RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ jsx131(Error2, { sx: { color: "orange" } });
+      return /* @__PURE__ */ jsx132(Error2, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ jsx131(CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ jsx132(CheckCircle, { sx: { color: "lightgray" } });
     }
   }
 };
@@ -3869,9 +3874,9 @@ var StatusIcon = ({ errorLevel }) => {
 // src/components/event-details/iam-event-detail.tsx
 import { CheckCircle as CheckCircle2, Error as ErrorIcon, Warning } from "@mui/icons-material";
 import { Box as Box10, Chip, Grid as Grid2, Typography as Typography5 } from "@mui/material";
-import { jsx as jsx132, jsxs as jsxs124 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs124 } from "react/jsx-runtime";
 var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ jsx132(Grid2, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx132(
+  /* @__PURE__ */ jsx133(Grid2, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx133(
     Typography5,
     {
       sx: {
@@ -3882,7 +3887,7 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { contain
       children: label
     }
   ) }),
-  /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx132(
+  /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx133(
     Typography5,
     {
       sx: {
@@ -3898,30 +3903,30 @@ var PermissionIcon = ({ status }) => {
   switch (status) {
     case "explicitly_allowed":
     case "implicitly_allowed": {
-      return /* @__PURE__ */ jsx132(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx133(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ jsx132(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx133(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ jsx132(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx133(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx132(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
+    return /* @__PURE__ */ jsx133(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx132(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
+    return /* @__PURE__ */ jsx133(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
   }
   return /* @__PURE__ */ jsxs124(Box10, { sx: { p: 2 }, children: [
-    /* @__PURE__ */ jsx132(Box10, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx132(
+    /* @__PURE__ */ jsx133(Box10, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx133(
       Chip,
       {
-        icon: /* @__PURE__ */ jsx132(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ jsx133(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -3931,12 +3936,12 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__PURE__ */ jsx132(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
-    /* @__PURE__ */ jsx132(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
-    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx132(
+    /* @__PURE__ */ jsx133(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
+    /* @__PURE__ */ jsx133(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
+    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx133(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx132(Box10, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx132(
+        content: /* @__PURE__ */ jsx133(Box10, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx133(
           Typography5,
           {
             sx: {
@@ -3950,10 +3955,10 @@ var IAMEventDetail = ({ event }) => {
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx132(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx133(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx132(Box10, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx132(
+        content: /* @__PURE__ */ jsx133(Box10, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx133(
           Typography5,
           {
             sx: {
@@ -3969,19 +3974,19 @@ var IAMEventDetail = ({ event }) => {
       }
     ),
     /* @__PURE__ */ jsxs124(Box10, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
       /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 2, children: [
-        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx132(Typography5, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx133(Typography5, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
         ] }) }),
-        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx132(Typography5, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx133(Typography5, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
         ] }) }),
-        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx132(Typography5, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx133(Typography5, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
         ] }) })
       ] })
     ] })
@@ -3992,7 +3997,7 @@ var IAMEventDetail = ({ event }) => {
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
 import { Box as Box11, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
 import { useMemo as useMemo5, useState as useState6 } from "react";
-import { jsx as jsx133, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
   return {
@@ -4022,10 +4027,10 @@ var IAMPermissionItem = ({ event }) => {
   const { chipColors, parsedIAM } = parsedData;
   return /* @__PURE__ */ jsxs125(Box11, { sx: { mb: 1 }, children: [
     /* @__PURE__ */ jsxs125(Box11, { sx: { alignItems: "center", display: "flex" }, children: [
-      /* @__PURE__ */ jsx133(IconButton2, { onClick: () => {
+      /* @__PURE__ */ jsx134(IconButton2, { onClick: () => {
         setIsOpen(!isOpen);
-      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ jsx133(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx133(KeyboardArrowRight, {}) }),
-      /* @__PURE__ */ jsx133(
+      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ jsx134(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx134(KeyboardArrowRight, {}) }),
+      /* @__PURE__ */ jsx134(
         Chip2,
         {
           label: formatPermissionStatus(parsedIAM.permission),
@@ -4037,18 +4042,18 @@ var IAMPermissionItem = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx133(Box11, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ jsxs125(Box11, { children: [
-      /* @__PURE__ */ jsx133(Typography6, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
-      /* @__PURE__ */ jsx133(Typography6, { variant: "body2", children: parsedIAM.principal })
+    isOpen && /* @__PURE__ */ jsx134(Box11, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ jsxs125(Box11, { children: [
+      /* @__PURE__ */ jsx134(Typography6, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
+      /* @__PURE__ */ jsx134(Typography6, { variant: "body2", children: parsedIAM.principal })
     ] }) })
   ] });
 };
-var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx133(Box11, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx133(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx134(Box11, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx134(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment5, jsx as jsx134, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx135, jsxs as jsxs126 } from "react/jsx-runtime";
 var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ jsx134(Grid3, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx134(
+  /* @__PURE__ */ jsx135(Grid3, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx135(
     Typography7,
     {
       sx: {
@@ -4059,7 +4064,7 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
       children: label
     }
   ) }),
-  /* @__PURE__ */ jsx134(Grid3, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx134(
+  /* @__PURE__ */ jsx135(Grid3, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx135(
     Typography7,
     {
       sx: {
@@ -4078,7 +4083,7 @@ var EventMessage = ({ event }) => {
   const parsedMessage = useMemo6(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo6(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
-    [event.event_type, event.attributes?.payload]
+    [event]
   );
   useEffect5(() => {
     const checkOverflow = () => {
@@ -4103,7 +4108,7 @@ var EventMessage = ({ event }) => {
   );
   return /* @__PURE__ */ jsxs126(Box12, { sx: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ jsxs126(Box12, { sx: { alignItems: "flex-start", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx134(
+      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx135(
         IconButton3,
         {
           onClick: () => {
@@ -4111,10 +4116,10 @@ var EventMessage = ({ event }) => {
           },
           size: "small",
           sx: { mr: 1, mt: -0.5, p: 0 },
-          children: isOpen ? /* @__PURE__ */ jsx134(KeyboardArrowDown2, {}) : /* @__PURE__ */ jsx134(KeyboardArrowRight2, {})
+          children: isOpen ? /* @__PURE__ */ jsx135(KeyboardArrowDown2, {}) : /* @__PURE__ */ jsx135(KeyboardArrowRight2, {})
         }
       ),
-      /* @__PURE__ */ jsx134(
+      /* @__PURE__ */ jsx135(
         Typography7,
         {
           ref: textReference,
@@ -4132,9 +4137,9 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx134(Box12, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx134(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment5, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx134(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx134(DetailRow2, { content: parsedMessage.details, label: "Details:" })
+    isOpen && /* @__PURE__ */ jsx135(Box12, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx135(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment5, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx135(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx135(DetailRow2, { content: parsedMessage.details, label: "Details:" })
     ] }) })
   ] });
 };
@@ -4164,7 +4169,7 @@ var EventDetail = ({
 }) => {
   if (type === "permission") {
     return /* @__PURE__ */ jsxs126(Box12, { children: [
-      /* @__PURE__ */ jsx134(
+      /* @__PURE__ */ jsx135(
         Box12,
         {
           sx: {
@@ -4172,7 +4177,7 @@ var EventDetail = ({
             display: "flex",
             mb: 1
           },
-          children: /* @__PURE__ */ jsx134(
+          children: /* @__PURE__ */ jsx135(
             Typography7,
             {
               sx: {
@@ -4187,7 +4192,7 @@ var EventDetail = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx134(IAMPermissionDetail, { events })
+      /* @__PURE__ */ jsx135(IAMPermissionDetail, { events })
     ] });
   }
   const eventLevel = getEventLevelFromGroup(type);
@@ -4202,8 +4207,8 @@ var EventDetail = ({
           mb: 1
         },
         children: [
-          /* @__PURE__ */ jsx134(StatusIcon, { errorLevel: eventLevel }),
-          /* @__PURE__ */ jsx134(
+          /* @__PURE__ */ jsx135(StatusIcon, { errorLevel: eventLevel }),
+          /* @__PURE__ */ jsx135(
             Typography7,
             {
               sx: {
@@ -4222,14 +4227,14 @@ var EventDetail = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx134(Box12, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx134(
+    /* @__PURE__ */ jsx135(Box12, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx135(
       Box12,
       {
         sx: {
           maxWidth: "100%",
           mb: 1
         },
-        children: /* @__PURE__ */ jsx134(EventMessage, { event })
+        children: /* @__PURE__ */ jsx135(EventMessage, { event })
       },
       `${event.span_id}-${event.event_id}`
     )) })
@@ -4240,11 +4245,11 @@ var EventDetail = ({
 import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
 import { Box as Box13, Typography as Typography8 } from "@mui/material";
 import { useState as useState8 } from "react";
-import { jsx as jsx135, jsxs as jsxs127 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs127 } from "react/jsx-runtime";
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
   const [isOpen, setIsOpen] = useState8(initialOpen);
   return /* @__PURE__ */ jsxs127(Box13, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ jsx135(
+    /* @__PURE__ */ jsx136(
       Box13,
       {
         onClick: () => {
@@ -4264,24 +4269,24 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
               gap: 1
             },
             children: [
-              /* @__PURE__ */ jsx135(Typography8, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-              isOpen ? /* @__PURE__ */ jsx135(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx135(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
+              /* @__PURE__ */ jsx136(Typography8, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+              isOpen ? /* @__PURE__ */ jsx136(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx136(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
             ]
           }
         )
       }
     ),
-    isOpen && /* @__PURE__ */ jsx135(Box13, { children })
+    isOpen && /* @__PURE__ */ jsx136(Box13, { children })
   ] });
 };
 
 // src/components/event-details/event-section.tsx
-import { jsx as jsx136, jsxs as jsxs128 } from "react/jsx-runtime";
+import { jsx as jsx137, jsxs as jsxs128 } from "react/jsx-runtime";
 var EventSection = ({
   eventGroups,
   headline
-}) => /* @__PURE__ */ jsx136(ToggleSection, { headline, children: /* @__PURE__ */ jsxs128(Box14, { children: [
-  eventGroups.errors && /* @__PURE__ */ jsx136(
+}) => /* @__PURE__ */ jsx137(ToggleSection, { headline, children: /* @__PURE__ */ jsxs128(Box14, { children: [
+  eventGroups.errors && /* @__PURE__ */ jsx137(
     EventDetail,
     {
       displayText: "Error",
@@ -4289,7 +4294,7 @@ var EventSection = ({
       type: "error"
     }
   ),
-  eventGroups.warnings && /* @__PURE__ */ jsx136(
+  eventGroups.warnings && /* @__PURE__ */ jsx137(
     EventDetail,
     {
       displayText: "Warning",
@@ -4297,7 +4302,7 @@ var EventSection = ({
       type: "warning"
     }
   ),
-  eventGroups.permissions && /* @__PURE__ */ jsx136(
+  eventGroups.permissions && /* @__PURE__ */ jsx137(
     EventDetail,
     {
       displayText: "IAM Permission",
@@ -4305,7 +4310,7 @@ var EventSection = ({
       type: "permission"
     }
   ),
-  eventGroups.info && /* @__PURE__ */ jsx136(
+  eventGroups.info && /* @__PURE__ */ jsx137(
     EventDetail,
     {
       displayText: "Info",
@@ -4316,55 +4321,55 @@ var EventSection = ({
 ] }) });
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment6, jsx as jsx137, jsxs as jsxs129 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx138, jsxs as jsxs129 } from "react/jsx-runtime";
 var EventDetails = ({ onClose, selectedEvent }) => {
   const attributes = useMemo7(() => {
     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__ */ jsx137(Box15, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx137(Typography9, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ jsx138(Box15, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
   return /* @__PURE__ */ jsxs129(Box15, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsx137(EventDetailsHeader, { event: selectedEvent, onClose }),
-    /* @__PURE__ */ jsx137(Box15, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
-      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
+    /* @__PURE__ */ jsx138(EventDetailsHeader, { event: selectedEvent, onClose }),
+    /* @__PURE__ */ jsx138(Box15, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
+      /* @__PURE__ */ jsx138(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.span_id })
+          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.span_id })
         ] }),
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.trace_id })
+          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.trace_id })
         ] }),
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
-          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.operation_name })
+          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
+          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.operation_name })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx137(Divider2, {}),
-      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
+      /* @__PURE__ */ jsx138(Divider2, {}),
+      /* @__PURE__ */ jsx138(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.service_name })
+          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.service_name })
         ] }),
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.resource_name })
+          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
         Boolean(selectedEvent.region) && /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.region })
+          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.region })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx137(Divider2, {}),
-      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
+      /* @__PURE__ */ jsx138(Divider2, {}),
+      /* @__PURE__ */ jsx138(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
         /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
         ] }),
         Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
           /* @__PURE__ */ jsxs129(Typography9, { variant: "body2", children: [
             ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
             " ",
@@ -4372,9 +4377,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx137(Divider2, {}),
-      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Status", children: /* @__PURE__ */ jsxs129(Stack2, { direction: "row", spacing: 1, children: [
-        /* @__PURE__ */ jsx137(
+      /* @__PURE__ */ jsx138(Divider2, {}),
+      /* @__PURE__ */ jsx138(ToggleSection, { headline: "Status", children: /* @__PURE__ */ jsxs129(Stack2, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsx138(
           Chip3,
           {
             color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
@@ -4382,11 +4387,11 @@ var EventDetails = ({ onClose, selectedEvent }) => {
             size: "small"
           }
         ),
-        Boolean(selectedEvent.status_message) && /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: selectedEvent.status_message })
+        Boolean(selectedEvent.status_message) && /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.status_message })
       ] }) }),
       selectedEvent.events.length > 0 && /* @__PURE__ */ jsxs129(Fragment6, { children: [
-        /* @__PURE__ */ jsx137(Divider2, {}),
-        /* @__PURE__ */ jsx137(
+        /* @__PURE__ */ jsx138(Divider2, {}),
+        /* @__PURE__ */ jsx138(
           EventSection,
           {
             eventGroups: getEventGroupsByType(selectedEvent.events),
@@ -4395,10 +4400,10 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         )
       ] }),
       attributes.length > 0 && /* @__PURE__ */ jsxs129(Fragment6, { children: [
-        /* @__PURE__ */ jsx137(Divider2, {}),
-        /* @__PURE__ */ jsx137(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx137(Stack2, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx137(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
-          /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: renderKeyValue(key, value) })
+        /* @__PURE__ */ jsx138(Divider2, {}),
+        /* @__PURE__ */ jsx138(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx138(Stack2, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ jsxs129(Box15, { children: [
+          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
+          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: renderKeyValue(key, value) })
         ] }, key)) }) })
       ] })
     ] }) })
@@ -4406,12 +4411,12 @@ 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__ */ jsx137(Box15, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx137("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
+    return /* @__PURE__ */ jsx138(Box15, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx138("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
   }
   if (typeof value === "boolean") {
-    return /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: value ? "yes" : "no" });
+    return /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: value ? "yes" : "no" });
   }
-  return /* @__PURE__ */ jsx137(Typography9, { variant: "body2", children: value });
+  return /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: value });
 }
 
 // src/components/trace-graph/trace-graph.tsx
@@ -4424,24 +4429,24 @@ import { useCallback as useCallback7, useEffect as useEffect6, useState as useSt
 import { Box as Box17, Stack as Stack3, Typography as Typography10 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
-import { memo, useCallback as useCallback6 } from "react";
+import { memo as memo2, useCallback as useCallback6 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
 import { Box as Box16, Tooltip as Tooltip4 } from "@mui/material";
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx138 } from "react/jsx-runtime";
+import { jsx as jsx139 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
   const icon = useMemo8(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ jsx138(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx139(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ jsx138(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx139(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ jsx138(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx139(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
@@ -4458,7 +4463,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ jsx138(Tooltip4, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx139(Tooltip4, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx139(
     Box16,
     {
       sx: {
@@ -4478,13 +4483,13 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-import { jsx as jsx139, jsxs as jsxs130 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = memo(function ServiceNode2({ data, selected }) {
+var ServiceNode = memo2(function ServiceNode2({ data, selected }) {
   const handleClick = useCallback6(() => {
     data.onEventSelect(data.event);
   }, [data]);
@@ -4521,9 +4526,9 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ jsx139(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ jsx139(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ jsx139(
+          /* @__PURE__ */ jsx140(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ jsx140(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ jsx140(
             ServiceCell,
             {
               borderColor: selected ? "text.primary" : void 0,
@@ -4548,7 +4553,7 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
           mt: 0.5
         },
         children: [
-          hasErrors && /* @__PURE__ */ jsx139(
+          hasErrors && /* @__PURE__ */ jsx140(
             Stack3,
             {
               direction: "row",
@@ -4557,10 +4562,10 @@ var ServiceNode = memo(function ServiceNode2({ data, selected }) {
                 flexWrap: "wrap",
                 gap: "2px"
               },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx139(ProblemIndicator, { error }, error.span_id))
+              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx140(ProblemIndicator, { error }, error.span_id))
             }
           ),
-          /* @__PURE__ */ jsx139(
+          /* @__PURE__ */ jsx140(
             Typography10,
             {
               sx: {
@@ -4677,7 +4682,7 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 import { Add, FitScreen, Remove } from "@mui/icons-material";
 import { Box as Box18, IconButton as IconButton4 } from "@mui/material";
 import { useReactFlow, useStore } from "@xyflow/react";
-import { memo as memo2 } from "react";
+import { memo as memo3 } from "react";
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -4718,13 +4723,13 @@ function shallow$1(objA, objB) {
 }
 
 // src/components/trace-graph/xyflow/controls.tsx
-import { jsx as jsx140, jsxs as jsxs131 } from "react/jsx-runtime";
+import { jsx as jsx141, jsxs as jsxs131 } from "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 = memo2(() => {
+var Controls = memo3(() => {
   const { maxZoomReached, minZoomReached } = useStore(selector, shallow$1);
   const { fitView, zoomIn, zoomOut } = useReactFlow();
   const onZoomInHandler = () => {
@@ -4750,33 +4755,33 @@ var Controls = memo2(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsx141(
           IconButton4,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx140(Add, {})
+            children: /* @__PURE__ */ jsx141(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsx141(
           IconButton4,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx140(Remove, {})
+            children: /* @__PURE__ */ jsx141(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx140(
+        /* @__PURE__ */ jsx141(
           IconButton4,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx140(FitScreen, {})
+            children: /* @__PURE__ */ jsx141(FitScreen, {})
           }
         )
       ]
@@ -4785,7 +4790,7 @@ var Controls = memo2(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment7, jsx as jsx141, jsxs as jsxs132 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -4878,7 +4883,7 @@ var TraceGraph = ({
     spans.error && /* @__PURE__ */ jsxs132(
       Alert3,
       {
-        action: /* @__PURE__ */ jsx141(Button4, { onClick: () => {
+        action: /* @__PURE__ */ jsx142(Button4, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -4903,8 +4908,8 @@ var TraceGraph = ({
         onNodeClick,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx141(Controls, {}),
-          /* @__PURE__ */ jsx141(Background, {})
+          /* @__PURE__ */ jsx142(Controls, {}),
+          /* @__PURE__ */ jsx142(Background, {})
         ]
       }
     )
@@ -4912,7 +4917,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment8, jsx as jsx142, jsxs as jsxs133 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -4975,12 +4980,12 @@ var TraceGraphView = ({
       },
       children: [
         /* @__PURE__ */ jsxs133(Box19, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx142(Button5, { onClick: () => {
+          /* @__PURE__ */ jsx143(Button5, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx142(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx142(Box19, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ jsx143(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx143(Box19, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ jsx142(
+        /* @__PURE__ */ jsx143(
           Paper2,
           {
             sx: {
@@ -4990,7 +4995,7 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx142(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx143(
               StatusMessage,
               {
                 error: statusError,
@@ -4998,14 +5003,14 @@ var TraceGraphView = ({
                 status
               }
             ) : /* @__PURE__ */ jsxs133(Fragment8, { children: [
-              /* @__PURE__ */ jsx142(Main, { open, children: /* @__PURE__ */ jsx142(
+              /* @__PURE__ */ jsx143(Main, { open, children: /* @__PURE__ */ jsx143(
                 Box19,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx142(ReactFlowProvider, { children: /* @__PURE__ */ jsx142(
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx143(ReactFlowProvider, { children: /* @__PURE__ */ jsx143(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -5023,7 +5028,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx142(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx142(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ jsx143(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx143(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -5096,7 +5101,7 @@ var TraceGraphPage = () => {
     const url = resolveLink({ to: "spans-list" });
     navigate(url);
   }, [navigate, resolveLink]);
-  return /* @__PURE__ */ jsx142(
+  return /* @__PURE__ */ jsx143(
     TraceGraphView,
     {
       fetchError,