@localstack/appinspector-ui 1.0.80 → 1.0.81

package/dist/index.js

@@ -483,17 +483,17 @@ var init_event_streams = __esm({
 });
 
 // src/pages/spans-list-page.tsx
-import { Box as Box18 } from "@mui/material";
-import { useCallback as useCallback10, useState as useState16 } from "react";
+import { Box as Box19 } from "@mui/material";
+import { useCallback as useCallback10, useState as useState17 } from "react";
 
 // src/components/spans-list/spans-list.tsx
-import { Alert, Box as Box4, Button as Button2 } from "@mui/material";
+import { Alert, Box as Box5, Button as Button3 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
 import { DeleteForeverOutlined, PauseOutlined, PlayArrowOutlined } from "@mui/icons-material";
 import {
-  Box as Box3,
-  Button,
+  Box as Box4,
+  Button as Button2,
   CircularProgress,
   FormControlLabel,
   Grid,
@@ -505,8 +505,8 @@ import {
   TableHead,
   TableRow,
   TableSortLabel,
-  Tooltip as Tooltip2,
-  Typography as Typography2,
+  Tooltip as Tooltip3,
+  Typography as Typography3,
   useTheme as useTheme2
 } from "@mui/material";
 
@@ -12661,8 +12661,140 @@ var ServiceCell = memo7(({
 });
 ServiceCell.displayName = "ServiceCell";
 
-// src/components/spans-list/spans-data-grid.tsx
+// src/components/spans-list/span-count-badge.tsx
+import { InfoOutlined, WarningAmberOutlined } from "@mui/icons-material";
+import { Box as Box3, Button, Divider as Divider2, IconButton, Popover, Skeleton, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
+import { useState as useState4 } from "react";
 import { Fragment as Fragment3, jsx as jsx124, jsxs as jsxs120 } from "react/jsx-runtime";
+var resolveBindingLimit = (systemLimit, licenseLimit) => {
+  const numericLimits = [systemLimit, licenseLimit].filter((l2) => typeof l2 === "number");
+  if (numericLimits.length > 0) return Math.min(...numericLimits);
+  if (systemLimit === "unlimited" || licenseLimit === "unlimited") return "unlimited";
+  return void 0;
+};
+var fmt = (n2) => n2.toLocaleString();
+var fmtLimit = (value) => {
+  if (value === void 0) return "\u2014";
+  if (value === "unlimited") return "Unlimited";
+  return fmt(value);
+};
+var StatRow = ({ label, value }) => /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "baseline", display: "flex", justifyContent: "space-between", minWidth: 220 }, children: [
+  /* @__PURE__ */ jsx124(Typography2, { color: "text.secondary", sx: { mr: 4 }, variant: "caption", children: label }),
+  /* @__PURE__ */ jsx124(Typography2, { fontWeight: 600, variant: "body2", children: fmtLimit(value) })
+] });
+var SpanCountBadge = ({ licenseLimit, systemLimit, totalCount, visibleCount }) => {
+  const [anchorElement, setAnchorElement] = useState4();
+  const bindingLimit = resolveBindingLimit(systemLimit, licenseLimit);
+  if (totalCount === void 0 && bindingLimit === void 0) {
+    return /* @__PURE__ */ jsx124(Fragment3, {});
+  }
+  if (visibleCount !== void 0) totalCount = Math.max(totalCount ?? 0, visibleCount);
+  const isLoading = totalCount === void 0;
+  const isOpen = anchorElement !== void 0;
+  const systemLimitReached = typeof systemLimit === "number" && totalCount !== void 0 && totalCount >= systemLimit;
+  const licenseLimitReached = typeof licenseLimit === "number" && totalCount !== void 0 && totalCount >= licenseLimit;
+  return /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", display: "flex", gap: 0.25 }, children: [
+    isLoading ? /* @__PURE__ */ jsx124(Skeleton, { sx: { minWidth: 120 } }) : /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "baseline", display: "flex", gap: 0.5 }, children: [
+      /* @__PURE__ */ jsx124(Typography2, { color: "text.secondary", variant: "caption", children: "Showing" }),
+      /* @__PURE__ */ jsx124(Typography2, { variant: "body2", children: visibleCount === void 0 ? "\u2014" : fmt(visibleCount) }),
+      /* @__PURE__ */ jsx124(Typography2, { color: "text.secondary", variant: "caption", children: `of ${totalCount === void 0 ? "-" : fmt(totalCount)} operations` })
+    ] }),
+    /* @__PURE__ */ jsx124(Tooltip2, { title: "Operation count details", children: /* @__PURE__ */ jsx124(
+      IconButton,
+      {
+        "aria-describedby": isOpen ? "operation-count-popover" : void 0,
+        onClick: (event) => {
+          setAnchorElement(isOpen ? void 0 : event.currentTarget);
+        },
+        size: "small",
+        sx: { color: systemLimitReached || licenseLimitReached ? "warning.main" : "text.disabled" },
+        children: systemLimitReached || licenseLimitReached ? /* @__PURE__ */ jsx124(WarningAmberOutlined, { sx: { fontSize: 14 } }) : /* @__PURE__ */ jsx124(InfoOutlined, { sx: { fontSize: 14 } })
+      }
+    ) }),
+    /* @__PURE__ */ jsx124(
+      Popover,
+      {
+        anchorEl: anchorElement,
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        id: "operation-count-popover",
+        onClose: () => {
+          setAnchorElement(void 0);
+        },
+        open: isOpen,
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        children: /* @__PURE__ */ jsxs120(Box3, { sx: { minWidth: 240, p: 2 }, children: [
+          /* @__PURE__ */ jsx124(Typography2, { fontWeight: 700, variant: "body2", children: "Storage" }),
+          /* @__PURE__ */ jsx124(Typography2, { color: "text.secondary", sx: { mt: 0.25 }, variant: "caption", children: "How many operations are currently stored." }),
+          /* @__PURE__ */ jsxs120(Box3, { sx: { display: "flex", flexDirection: "column", gap: 0.75, mt: 1.5 }, children: [
+            /* @__PURE__ */ jsx124(
+              StatRow,
+              {
+                label: /* @__PURE__ */ jsx124(Tooltip2, { placement: "left", title: "The number of operations currently loaded in the UI.", children: /* @__PURE__ */ jsx124(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Currently visible" }) }),
+                value: visibleCount
+              }
+            ),
+            /* @__PURE__ */ jsx124(
+              StatRow,
+              {
+                label: /* @__PURE__ */ jsx124(Tooltip2, { placement: "left", title: "The total number of operations stored on the server.", children: /* @__PURE__ */ jsx124(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "Total stored" }) }),
+                value: totalCount
+              }
+            )
+          ] }),
+          (systemLimit !== void 0 || licenseLimit !== void 0) && /* @__PURE__ */ jsxs120(Fragment3, { children: [
+            /* @__PURE__ */ jsx124(Divider2, { sx: { my: 1.5 } }),
+            /* @__PURE__ */ jsx124(Typography2, { color: "text.secondary", fontWeight: 600, variant: "caption", children: "Limits" }),
+            /* @__PURE__ */ jsx124(Typography2, { color: "text.secondary", sx: { display: "block", mb: 1.5, mt: 0.25 }, variant: "caption", children: "Limits restrict the total number of operations that can be stored." }),
+            /* @__PURE__ */ jsxs120(Box3, { sx: { display: "flex", flexDirection: "column", gap: 0.75 }, children: [
+              licenseLimit !== void 0 && /* @__PURE__ */ jsx124(
+                StatRow,
+                {
+                  label: /* @__PURE__ */ jsx124(Tooltip2, { placement: "left", title: "The maximum number of operations allowed by your current license.", children: /* @__PURE__ */ jsx124(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "License limit" }) }),
+                  value: licenseLimit
+                }
+              ),
+              systemLimit !== void 0 && /* @__PURE__ */ jsx124(
+                StatRow,
+                {
+                  label: /* @__PURE__ */ jsx124(Tooltip2, { placement: "left", title: "The maximum number of operations that can be stored in the system.", children: /* @__PURE__ */ jsx124(Box3, { component: "span", sx: { borderBottom: "1px dashed", borderColor: "text.secondary", cursor: "help" }, children: "System limit" }) }),
+                  value: systemLimit
+                }
+              )
+            ] })
+          ] }),
+          (systemLimitReached || licenseLimitReached) && /* @__PURE__ */ jsxs120(Box3, { sx: { display: "flex", flexDirection: "column", gap: 1, mt: 1.5 }, children: [
+            licenseLimitReached && /* @__PURE__ */ jsxs120(Box3, { sx: { backgroundColor: "warning.main", borderRadius: 1, p: 1.5 }, children: [
+              /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75, mb: 0.75 }, children: [
+                /* @__PURE__ */ jsx124(WarningAmberOutlined, { sx: { color: "warning.contrastText", fontSize: 14, mt: "1px" } }),
+                /* @__PURE__ */ jsx124(Typography2, { color: "warning.contrastText", fontWeight: 600, variant: "caption", children: "License limit reached" })
+              ] }),
+              /* @__PURE__ */ jsx124(Typography2, { color: "warning.contrastText", sx: { display: "block", mb: 1 }, variant: "caption", children: "Newer operations are being dropped. Upgrade your license to increase the retention limit." }),
+              /* @__PURE__ */ jsx124(
+                Button,
+                {
+                  color: "inherit",
+                  href: "https://localstack.cloud/pricing",
+                  size: "small",
+                  sx: { color: "warning.contrastText", fontWeight: 600, p: 0, textDecoration: "underline" },
+                  target: "_blank",
+                  variant: "text",
+                  children: "Upgrade license \u2192"
+                }
+              )
+            ] }),
+            systemLimitReached && !licenseLimitReached && /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "flex-start", display: "flex", gap: 0.75 }, children: [
+              /* @__PURE__ */ jsx124(WarningAmberOutlined, { color: "warning", sx: { fontSize: 14, mt: "1px" } }),
+              /* @__PURE__ */ jsx124(Typography2, { color: "warning.main", variant: "caption", children: "System limit reached \u2014 newer operations are being dropped." })
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/spans-list/spans-data-grid.tsx
+import { Fragment as Fragment4, jsx as jsx125, jsxs as jsxs121 } from "react/jsx-runtime";
 var columnHelper = createColumnHelper();
 var newSpanBackgroundColor = {
   dark: { from: "rgba(136, 123, 2, 1)", to: "rgba(136, 123, 2, 0)" },
@@ -12673,15 +12805,15 @@ var LABEL_END_OF_STREAM = "This is the end of the stream";
 var LABEL_NO_SPANS = "There are no spans";
 var LABEL_LOAD_OLDER = "Load older spans";
 var LABEL_LOAD_NEWER = "Load newer spans";
-var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124("span", { children: label }) }) });
-var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsxs120(TableCell, { colSpan, sx: { textAlign: "center" }, children: [
-  !fetching && /* @__PURE__ */ jsx124(Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
-  fetching && /* @__PURE__ */ jsx124(CircularProgress, { size: 24, sx: { m: 2 } })
+var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx125(TableRow, { children: /* @__PURE__ */ jsx125(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx125("span", { children: label }) }) });
+var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ jsx125(TableRow, { children: /* @__PURE__ */ jsxs121(TableCell, { colSpan, sx: { textAlign: "center" }, children: [
+  !fetching && /* @__PURE__ */ jsx125(Button2, { onClick: onFetch, sx: { my: 1 }, children: label }),
+  fetching && /* @__PURE__ */ jsx125(CircularProgress, { size: 24, sx: { m: 2 } })
 ] }) });
 var SpansDataGridRow = memo8(
   ({ row }) => {
     const theme = useTheme2();
-    return /* @__PURE__ */ jsx124(
+    return /* @__PURE__ */ jsx125(
       TableRow,
       {
         animate: {
@@ -12695,7 +12827,7 @@ var SpansDataGridRow = memo8(
           transition: "background-color 1200ms ease-in"
         },
         children: row.getVisibleCells().map((cell) => {
-          return /* @__PURE__ */ jsx124(
+          return /* @__PURE__ */ jsx125(
             TableCell,
             {
               sx: {
@@ -12703,8 +12835,8 @@ var SpansDataGridRow = memo8(
                 maxWidth: `${cell.column.getSize().toString()}px`,
                 minWidth: `${cell.column.getSize().toString()}px`
               },
-              children: /* @__PURE__ */ jsx124(
-                Box3,
+              children: /* @__PURE__ */ jsx125(
+                Box4,
                 {
                   sx: {
                     "alignItems": "center",
@@ -12716,7 +12848,7 @@ var SpansDataGridRow = memo8(
                     },
                     "width": "100%"
                   },
-                  children: /* @__PURE__ */ jsx124(Box3, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+                  children: /* @__PURE__ */ jsx125(Box4, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
                 }
               )
             },
@@ -12736,6 +12868,7 @@ var SpansDataGrid = ({
   fetchingForward,
   hasMoreBackward,
   hasMoreForward,
+  licenseLimit,
   onClearSpans,
   onFetchBackward,
   onFetchForward,
@@ -12744,18 +12877,20 @@ var SpansDataGrid = ({
   onToggleStream,
   order: order2,
   spans,
-  streamPaused
+  streamPaused,
+  systemLimit,
+  totalCount
 }) => {
   const columns = useMemo5(() => [
     columnHelper.accessor("trace_id", {
-      cell: (props) => /* @__PURE__ */ jsx124(
-        Box3,
+      cell: (props) => /* @__PURE__ */ jsx125(
+        Box4,
         {
           sx: {
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: /* @__PURE__ */ jsx124(Tooltip2, { arrow: true, title: props.getValue(), children: /* @__PURE__ */ jsx124("span", { children: props.getValue() }) })
+          children: /* @__PURE__ */ jsx125(Tooltip3, { arrow: true, title: props.getValue(), children: /* @__PURE__ */ jsx125("span", { children: props.getValue() }) })
         }
       ),
       header: "Trace",
@@ -12763,8 +12898,8 @@ var SpansDataGrid = ({
       maxSize: 120
     }),
     columnHelper.accessor("startTime", {
-      cell: (props) => /* @__PURE__ */ jsx124(ResponsiveTimestampCell, { date: props.getValue() }),
-      header: () => /* @__PURE__ */ jsx124(
+      cell: (props) => /* @__PURE__ */ jsx125(ResponsiveTimestampCell, { date: props.getValue() }),
+      header: () => /* @__PURE__ */ jsx125(
         TableSortLabel,
         {
           active: true,
@@ -12781,23 +12916,23 @@ var SpansDataGrid = ({
     columnHelper.display({
       cell: (props) => {
         if (!props.row.original.parent_service_name || !props.row.original.parent_resource_name) {
-          return /* @__PURE__ */ jsx124(Typography2, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
+          return /* @__PURE__ */ jsx125(Typography3, { sx: { fontStyle: "italic" }, variant: "body2", children: "External producer" });
         }
-        return /* @__PURE__ */ jsx124(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
+        return /* @__PURE__ */ jsx125(ServiceCell, { resource: props.row.original.parent_resource_name, service: props.row.original.parent_service_name });
       },
       header: "Producer",
       id: "producer",
       size: 180
     }),
     columnHelper.accessor("operation_name", {
-      cell: (props) => /* @__PURE__ */ jsx124(
-        Box3,
+      cell: (props) => /* @__PURE__ */ jsx125(
+        Box4,
         {
           sx: {
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: /* @__PURE__ */ jsx124("span", { title: props.getValue(), children: props.getValue() })
+          children: /* @__PURE__ */ jsx125("span", { title: props.getValue(), children: props.getValue() })
         }
       ),
       header: "Action",
@@ -12806,7 +12941,7 @@ var SpansDataGrid = ({
     }),
     columnHelper.display({
       cell: (props) => {
-        return /* @__PURE__ */ jsx124(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
+        return /* @__PURE__ */ jsx125(ServiceCell, { resource: props.row.original.resource_name, service: props.row.original.service_name });
       },
       header: "Consumer",
       id: "consumer",
@@ -12814,8 +12949,8 @@ var SpansDataGrid = ({
     }),
     columnHelper.display({
       cell: (props) => {
-        return /* @__PURE__ */ jsx124(Box3, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx124(
-          Button,
+        return /* @__PURE__ */ jsx125(Box4, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx125(
+          Button2,
           {
             onClick: () => {
               onSpanClick(props.row.original);
@@ -12840,17 +12975,18 @@ var SpansDataGrid = ({
   const columnCount = table.getAllColumns().length;
   const rows = table.getRowModel().rows;
   const hasRows = rows.length > 0;
-  return /* @__PURE__ */ jsxs120(Fragment3, { children: [
-    /* @__PURE__ */ jsx124(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
-      /* @__PURE__ */ jsx124(Box3, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsxs121(Fragment4, { children: [
+    /* @__PURE__ */ jsx125(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs121(Box4, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx125(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
+      /* @__PURE__ */ jsx125(Box4, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ jsx125(
         FormControlLabel,
         {
-          control: /* @__PURE__ */ jsx124(
-            Button,
+          control: /* @__PURE__ */ jsx125(
+            Button2,
             {
               onClick: onToggleStream,
-              startIcon: streamPaused ? /* @__PURE__ */ jsx124(PlayArrowOutlined, {}) : /* @__PURE__ */ jsx124(PauseOutlined, {}),
+              startIcon: streamPaused ? /* @__PURE__ */ jsx125(PlayArrowOutlined, {}) : /* @__PURE__ */ jsx125(PauseOutlined, {}),
               variant: "text",
               children: streamPaused ? "Resume Stream" : "Pause Stream"
             }
@@ -12858,14 +12994,14 @@ var SpansDataGrid = ({
           label: ""
         }
       ),
-      /* @__PURE__ */ jsx124(
+      /* @__PURE__ */ jsx125(
         FormControlLabel,
         {
-          control: /* @__PURE__ */ jsx124(
-            Button,
+          control: /* @__PURE__ */ jsx125(
+            Button2,
             {
               onClick: onClearSpans,
-              startIcon: /* @__PURE__ */ jsx124(DeleteForeverOutlined, {}),
+              startIcon: /* @__PURE__ */ jsx125(DeleteForeverOutlined, {}),
               children: "Clear Spans"
             }
           ),
@@ -12874,7 +13010,7 @@ var SpansDataGrid = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx124(Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ jsx124(
+    /* @__PURE__ */ jsx125(Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ jsx125(
       TableContainer,
       {
         sx: {
@@ -12885,7 +13021,7 @@ var SpansDataGrid = ({
           right: 0,
           top: 0
         },
-        children: /* @__PURE__ */ jsxs120(
+        children: /* @__PURE__ */ jsxs121(
           Table,
           {
             stickyHeader: true,
@@ -12897,8 +13033,8 @@ var SpansDataGrid = ({
               "th+th": { pl: "8px !important" }
             },
             children: [
-              /* @__PURE__ */ jsx124(TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
-                return /* @__PURE__ */ jsx124(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx124(
+              /* @__PURE__ */ jsx125(TableHead, { children: table.getHeaderGroups().map((headerGroup) => {
+                return /* @__PURE__ */ jsx125(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx125(
                   TableCell,
                   {
                     colSpan: header.colSpan,
@@ -12913,31 +13049,31 @@ var SpansDataGrid = ({
                   header.id
                 )) }, headerGroup.id);
               }) }),
-              /* @__PURE__ */ jsxs120(TableBody, { children: [
-                (spans === void 0 || clearingSpans) && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
-                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs120(Fragment3, { children: [
-                  hasRows && hasMoreForward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
-                  hasRows && /* @__PURE__ */ jsx124(AnimatePresence, { initial: false, children: (() => {
+              /* @__PURE__ */ jsxs121(TableBody, { children: [
+                (spans === void 0 || clearingSpans) && /* @__PURE__ */ jsx125(TableRow, { children: /* @__PURE__ */ jsx125(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx125(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ jsx125(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs121(Fragment4, { children: [
+                  hasRows && hasMoreForward && /* @__PURE__ */ jsx125(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx125(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
+                  hasRows && /* @__PURE__ */ jsx125(AnimatePresence, { initial: false, children: (() => {
                     const reversed = [];
                     for (let index = rows.length - 1; index >= 0; index--) {
                       const row = rows.at(index);
                       reversed.push(
-                        /* @__PURE__ */ jsx124(SpansDataGridRow, { row }, row.original.span_id)
+                        /* @__PURE__ */ jsx125(SpansDataGridRow, { row }, row.original.span_id)
                       );
                     }
                     return reversed;
                   })() }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
-                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
+                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx125(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx125(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
-                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs120(Fragment3, { children: [
-                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
-                  hasRows && /* @__PURE__ */ jsx124(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx124(SpansDataGridRow, { row }, row.original.span_id)) }),
-                  hasRows && hasMoreForward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
-                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
+                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs121(Fragment4, { children: [
+                  hasRows && !hasMoreBackward && /* @__PURE__ */ jsx125(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
+                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx125(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && /* @__PURE__ */ jsx125(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx125(SpansDataGridRow, { row }, row.original.span_id)) }),
+                  hasRows && hasMoreForward && /* @__PURE__ */ jsx125(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && !hasMoreForward && /* @__PURE__ */ jsx125(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
               ] })
             ]
@@ -12949,13 +13085,13 @@ var SpansDataGrid = ({
 };
 
 // src/components/spans-list/spans-list.tsx
-import { jsx as jsx125, jsxs as jsxs121 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs122 } from "react/jsx-runtime";
 var SpansList = (props) => {
-  return /* @__PURE__ */ jsxs121(Box4, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
-    props.fetchError && /* @__PURE__ */ jsxs121(
+  return /* @__PURE__ */ jsxs122(Box5, { "data-testid": "spans-data-grid", sx: { display: "flex", flexDirection: "column", flexGrow: 1, gap: 2, width: "100%" }, children: [
+    props.fetchError && /* @__PURE__ */ jsxs122(
       Alert,
       {
-        action: /* @__PURE__ */ jsx125(Button2, { onClick: props.onFetchForward, children: "Retry" }),
+        action: /* @__PURE__ */ jsx126(Button3, { onClick: props.onFetchForward, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -12964,7 +13100,7 @@ var SpansList = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx125(
+    /* @__PURE__ */ jsx126(
       SpansDataGrid,
       {
         clearingSpans: props.clearingSpans,
@@ -12972,6 +13108,7 @@ var SpansList = (props) => {
         fetchingForward: props.fetchingForward,
         hasMoreBackward: props.hasMoreBackward,
         hasMoreForward: props.hasMoreForward,
+        licenseLimit: props.licenseLimit,
         onClearSpans: props.onClearSpans,
         onFetchBackward: props.onFetchBackward,
         onFetchForward: props.onFetchForward,
@@ -12980,15 +13117,17 @@ var SpansList = (props) => {
         onToggleStream: props.onToggleStream,
         order: props.order,
         spans: props.spans,
-        streamPaused: props.streamPaused
+        streamPaused: props.streamPaused,
+        systemLimit: props.systemLimit,
+        totalCount: props.totalCount
       }
     )
   ] });
 };
 
 // src/components/status-message/status-message.tsx
-import { ErrorOutline, InfoOutlined } from "@mui/icons-material";
-import { Alert as Alert2, AlertTitle, Box as Box5, Button as Button3, Link, Typography as Typography3 } from "@mui/material";
+import { ErrorOutline, InfoOutlined as InfoOutlined2 } from "@mui/icons-material";
+import { Alert as Alert2, AlertTitle, Box as Box6, Button as Button4, Link, Typography as Typography4 } from "@mui/material";
 
 // src/api/errors.ts
 var AppInspectorNotFoundError = class extends Error {
@@ -13031,15 +13170,15 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
 };
 
 // src/components/status-message/status-message.tsx
-import { Fragment as Fragment4, jsx as jsx126, jsxs as jsxs122 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx127, jsxs as jsxs123 } from "react/jsx-runtime";
 var StatusMessage = ({
   error,
   onRetry,
   status
 }) => {
   if (error instanceof AppInspectorNotFoundError) {
-    return /* @__PURE__ */ jsx126(
-      Box5,
+    return /* @__PURE__ */ jsx127(
+      Box6,
       {
         sx: {
           alignItems: "center",
@@ -13049,19 +13188,19 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs122(
+        children: /* @__PURE__ */ jsxs123(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx126(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx127(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx126(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "To enable App Inspector:" }) }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
-              /* @__PURE__ */ jsx126(
-                Box5,
+              /* @__PURE__ */ jsx127(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 2 }, variant: "body2", children: "The App Inspector extension is not licensed or not enabled in LocalStack." }),
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "To enable App Inspector:" }) }),
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable and restart LocalStack:" }),
+              /* @__PURE__ */ jsx127(
+                Box6,
                 {
                   component: "pre",
                   sx: {
@@ -13073,24 +13212,24 @@ var StatusMessage = ({
                   children: "LOCALSTACK_APPINSPECTOR_ENABLE=1"
                 }
               ),
-              /* @__PURE__ */ jsxs122(Typography3, { sx: { fontStyle: "italic", mb: 1, mt: 2 }, variant: "body2", children: [
+              /* @__PURE__ */ jsxs123(Typography4, { sx: { fontStyle: "italic", mb: 1, mt: 2 }, variant: "body2", children: [
                 "Runtime changes can be made via endpoint",
                 " ",
-                /* @__PURE__ */ jsxs122("code", { children: [
+                /* @__PURE__ */ jsxs123("code", { children: [
                   APPINSPECTOR_API_PREFIX,
                   "/status"
                 ] }),
                 ". For persistent default state across restarts, adjust the",
                 " ",
-                /* @__PURE__ */ jsx126("code", { children: "LOCALSTACK_APPINSPECTOR_ENABLE" }),
+                /* @__PURE__ */ jsx127("code", { children: "LOCALSTACK_APPINSPECTOR_ENABLE" }),
                 " ",
                 "environment variable in your",
                 " ",
-                /* @__PURE__ */ jsx126("code", { children: "~/.localstack" }),
+                /* @__PURE__ */ jsx127("code", { children: "~/.localstack" }),
                 " ",
                 "profile files.",
                 " ",
-                /* @__PURE__ */ jsx126(
+                /* @__PURE__ */ jsx127(
                   Link,
                   {
                     href: "https://docs.localstack.cloud/aws/capabilities/config/configuration/#profiles",
@@ -13100,8 +13239,8 @@ var StatusMessage = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "For more information:" }) }),
-              /* @__PURE__ */ jsx126(
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "For more information:" }) }),
+              /* @__PURE__ */ jsx127(
                 Link,
                 {
                   href: "https://docs.localstack.cloud/user-guide/tools/application-inspector/",
@@ -13110,8 +13249,8 @@ var StatusMessage = ({
                   children: "App Inspector Documentation"
                 }
               ),
-              onRetry && /* @__PURE__ */ jsx126(Box5, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx126(
-                Button3,
+              onRetry && /* @__PURE__ */ jsx127(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx127(
+                Button4,
                 {
                   "aria-label": "Check App Inspector status again",
                   onClick: onRetry,
@@ -13126,8 +13265,8 @@ var StatusMessage = ({
     );
   }
   if (error instanceof ConnectionError) {
-    return /* @__PURE__ */ jsx126(
-      Box5,
+    return /* @__PURE__ */ jsx127(
+      Box6,
       {
         sx: {
           alignItems: "center",
@@ -13137,18 +13276,18 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs122(
+        children: /* @__PURE__ */ jsxs123(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx126(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx127(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx126(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "To start LocalStack:" }) }),
-              /* @__PURE__ */ jsx126(
-                Box5,
+              /* @__PURE__ */ jsx127(AlertTitle, { sx: { fontWeight: "bold" }, children: "Connection Error" }),
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 2 }, variant: "body2", children: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible." }),
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "To start LocalStack:" }) }),
+              /* @__PURE__ */ jsx127(
+                Box6,
                 {
                   component: "pre",
                   sx: {
@@ -13160,8 +13299,8 @@ var StatusMessage = ({
                   children: "localstack start"
                 }
               ),
-              onRetry && /* @__PURE__ */ jsx126(Box5, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx126(
-                Button3,
+              onRetry && /* @__PURE__ */ jsx127(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx127(
+                Button4,
                 {
                   "aria-label": "Retry connection to LocalStack",
                   onClick: onRetry,
@@ -13176,8 +13315,8 @@ var StatusMessage = ({
     );
   }
   if (status?.status === "DISABLED") {
-    return /* @__PURE__ */ jsx126(
-      Box5,
+    return /* @__PURE__ */ jsx127(
+      Box6,
       {
         sx: {
           alignItems: "center",
@@ -13187,18 +13326,18 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs122(
+        children: /* @__PURE__ */ jsxs123(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx126(InfoOutlined, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx127(InfoOutlined2, { fontSize: "large" }),
             severity: "warning",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx126(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "To enable App Inspector at runtime:" }) }),
-              /* @__PURE__ */ jsx126(
-                Box5,
+              /* @__PURE__ */ jsx127(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector is Disabled" }),
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 2 }, variant: "body2", children: "App Inspector is currently disabled. Please enable it to view traces and spans." }),
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "To enable App Inspector at runtime:" }) }),
+              /* @__PURE__ */ jsx127(
+                Box6,
                 {
                   component: "pre",
                   sx: {
@@ -13213,10 +13352,10 @@ var StatusMessage = ({
   -d '{"status": "ENABLED"}'`
                 }
               ),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx126("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
-              /* @__PURE__ */ jsx126(
-                Box5,
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 1, mt: 2 }, variant: "body2", children: /* @__PURE__ */ jsx127("strong", { children: "To enable App Inspector persistently across restarts:" }) }),
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 1 }, variant: "body2", children: "Set the environment variable:" }),
+              /* @__PURE__ */ jsx127(
+                Box6,
                 {
                   component: "pre",
                   sx: {
@@ -13228,9 +13367,9 @@ var StatusMessage = ({
                   children: "APPINSPECTOR=1"
                 }
               ),
-              Boolean(status.note) && /* @__PURE__ */ jsx126(Typography3, { sx: { display: "block", fontStyle: "italic", mt: 2 }, variant: "caption", children: status.note }),
-              onRetry && /* @__PURE__ */ jsx126(Box5, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx126(
-                Button3,
+              Boolean(status.note) && /* @__PURE__ */ jsx127(Typography4, { 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(
+                Button4,
                 {
                   "aria-label": "Check if App Inspector is enabled",
                   onClick: onRetry,
@@ -13245,8 +13384,8 @@ var StatusMessage = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx126(
-      Box5,
+    return /* @__PURE__ */ jsx127(
+      Box6,
       {
         sx: {
           alignItems: "center",
@@ -13256,17 +13395,17 @@ var StatusMessage = ({
           justifyContent: "center",
           p: 4
         },
-        children: /* @__PURE__ */ jsxs122(
+        children: /* @__PURE__ */ jsxs123(
           Alert2,
           {
-            icon: /* @__PURE__ */ jsx126(ErrorOutline, { fontSize: "large" }),
+            icon: /* @__PURE__ */ jsx127(ErrorOutline, { fontSize: "large" }),
             severity: "error",
             sx: { maxWidth: 600, width: "100%" },
             children: [
-              /* @__PURE__ */ jsx126(AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
-              /* @__PURE__ */ jsx126(Typography3, { sx: { mb: 2 }, variant: "body2", children: error.message }),
-              onRetry && /* @__PURE__ */ jsx126(Box5, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx126(
-                Button3,
+              /* @__PURE__ */ jsx127(AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
+              /* @__PURE__ */ jsx127(Typography4, { sx: { mb: 2 }, variant: "body2", children: error.message }),
+              onRetry && /* @__PURE__ */ jsx127(Box6, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx127(
+                Button4,
                 {
                   "aria-label": "Retry operation",
                   onClick: onRetry,
@@ -13280,13 +13419,13 @@ var StatusMessage = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx126(Fragment4, {});
+  return /* @__PURE__ */ jsx127(Fragment5, {});
 };
 
 // src/hooks/use-local-storage.tsx
-import { useCallback as useCallback3, useEffect as useEffect11, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect11, useState as useState5 } from "react";
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState4(() => {
+  const [storedValue, setStoredValue] = useState5(() => {
     try {
       const item = globalThis.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -13329,14 +13468,14 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-spans.ts
-import { useCallback as useCallback7, useEffect as useEffect15, useRef as useRef11, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect15, useRef as useRef11, useState as useState9 } from "react";
 
 // src/api/use-api.tsx
 import { createContext as createContext7, useContext as useContext14 } from "react";
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx128 } from "react/jsx-runtime";
 var AppInspectorApiContext = createContext7(void 0);
 var ApiProvider = (props) => {
-  return /* @__PURE__ */ jsx127(AppInspectorApiContext.Provider, { value: props.api, children: props.children });
+  return /* @__PURE__ */ jsx128(AppInspectorApiContext.Provider, { value: props.api, children: props.children });
 };
 var useAppInspectorApi = () => {
   const api = useContext14(AppInspectorApiContext);
@@ -13347,12 +13486,12 @@ var useAppInspectorApi = () => {
 };
 
 // src/hooks/use-status.tsx
-import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef8, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef8, useState as useState6 } from "react";
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = useState5(true);
-  const [status, setStatus] = useState5();
-  const [error, setError] = useState5();
+  const [checking, setChecking] = useState6(true);
+  const [status, setStatus] = useState6();
+  const [error, setError] = useState6();
   const hasFetchedReference = useRef8(false);
   const abortControllerReference = useRef8(null);
   const checkStatus = useCallback4(async () => {
@@ -13567,7 +13706,7 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback6, useEffect as useEffect13, useRef as useRef9, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect13, useRef as useRef9, useState as useState7 } from "react";
 
 // src/context.tsx
 import { createContext as createContext8, useContext as useContext15 } from "react";
@@ -13763,7 +13902,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 = createContext8(void 0);
 var useAppInspector = () => {
   const context = useContext15(AppInspectorContext);
@@ -13797,7 +13936,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-spans-ws.tsx
@@ -13807,7 +13946,7 @@ function useSpansWebSocket(options) {
   useEffect13(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
-  const [connected, setConnected] = useState6(false);
+  const [connected, setConnected] = useState7(false);
   const wsRef = useRef9(void 0);
   const reconnectRef = useRef9(void 0);
   const { localstackEndpoint } = useAppInspector();
@@ -13854,11 +13993,11 @@ function useSpansWebSocket(options) {
 }
 
 // src/hooks/use-throttled-items.ts
-import { useEffect as useEffect14, useRef as useRef10, useState as useState7 } from "react";
+import { useEffect as useEffect14, useRef as useRef10, useState as useState8 } from "react";
 function useThrottledItems(items, getId, catchUpIncrement = 10) {
-  const [displayedItems, setDisplayedItems] = useState7([]);
-  const [isCatchingUpForward, setIsCatchingUpForward] = useState7(false);
-  const [isCatchingUpBackward, setIsCatchingUpBackward] = useState7(false);
+  const [displayedItems, setDisplayedItems] = useState8([]);
+  const [isCatchingUpForward, setIsCatchingUpForward] = useState8(false);
+  const [isCatchingUpBackward, setIsCatchingUpBackward] = useState8(false);
   const targetRef = useRef10([]);
   const rafRef = useRef10(void 0);
   const leftHiddenRef = useRef10(0);
@@ -13950,17 +14089,20 @@ function useThrottledItems(items, getId, catchUpIncrement = 10) {
 var PAGE_SIZE = 30;
 var useSpans = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState8();
+  const [spans, setSpans] = useState9();
   const throttledSpans = useThrottledItems(spans, (span) => span.span_id);
-  const [fetchError, setFetchError] = useState8();
-  const [fetchingForward, setFetchingForward] = useState8(false);
-  const [fetchingBackward, setFetchingBackward] = useState8(false);
+  const [fetchError, setFetchError] = useState9();
+  const [fetchingForward, setFetchingForward] = useState9(false);
+  const [fetchingBackward, setFetchingBackward] = useState9(false);
   const paginationBufferRef = useRef11(createPaginationBuffer({
     async fetchPage(token) {
       const response = await api.getSpans({
         limit: PAGE_SIZE,
         pagination_token: token
       });
+      setTotalCount(response.pagination.total_count);
+      setLicenseLimit(response.limits.span_count_limit_license);
+      setSystemLimit(response.limits.span_count_limit_system);
       return {
         hasMoreBackward: response.pagination.has_prev,
         hasMoreForward: response.pagination.has_next,
@@ -13989,8 +14131,11 @@ var useSpans = () => {
       return a3.start_time_unix_nano < b3.start_time_unix_nano ? -1 : 1;
     }
   }));
-  const [hasMoreBackward, setHasMoreBackward] = useState8();
-  const [hasMoreForward, setHasMoreForward] = useState8();
+  const [totalCount, setTotalCount] = useState9();
+  const [licenseLimit, setLicenseLimit] = useState9();
+  const [systemLimit, setSystemLimit] = useState9();
+  const [hasMoreBackward, setHasMoreBackward] = useState9();
+  const [hasMoreForward, setHasMoreForward] = useState9();
   const fetchForward = useCallback7(() => {
     void paginationBufferRef.current.fetchForward();
   }, []);
@@ -14001,7 +14146,7 @@ var useSpans = () => {
     fetchForward();
   }, [fetchForward]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const [clearingSpans, setClearingSpans] = useState8(false);
+  const [clearingSpans, setClearingSpans] = useState9(false);
   const clearSpans = useCallback7(async () => {
     if (clearingSpans) {
       return;
@@ -14009,6 +14154,7 @@ var useSpans = () => {
     setClearingSpans(true);
     try {
       await api.deleteSpans();
+      setTotalCount(void 0);
       paginationBufferRef.current.clear();
       await paginationBufferRef.current.fetchForward();
     } catch (error) {
@@ -14018,7 +14164,7 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [clearingSpans, api]);
-  const [streamPaused, setStreamPaused] = useState8(false);
+  const [streamPaused, setStreamPaused] = useState9(false);
   const toggleStream = useCallback7(() => {
     setStreamPaused((previous) => !previous);
   }, []);
@@ -14052,30 +14198,33 @@ var useSpans = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
+    licenseLimit,
     spans: throttledSpans.items,
     status,
     statusError,
     streamPaused,
-    toggleStream
+    systemLimit,
+    toggleStream,
+    totalCount
   };
 };
 
 // src/pages/trace-graph-page.tsx
 import { ArrowBack } from "@mui/icons-material";
-import { Box as Box17, Button as Button5, Drawer, Paper as Paper3 } from "@mui/material";
+import { Box as Box18, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback9, useEffect as useEffect20, useRef as useRef15, useState as useState15 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect20, useRef as useRef15, useState as useState16 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Close as Close2 } from "@mui/icons-material";
-import { Box as Box13, Chip as Chip3, Divider as Divider2, FormControlLabel as FormControlLabel2, IconButton as IconButton3, Stack as Stack2, Switch, Typography as Typography9, useTheme as useTheme3 } from "@mui/material";
+import { Box as Box14, Chip as Chip3, Divider as Divider3, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Stack as Stack2, Switch, Typography as Typography10, useTheme as useTheme3 } from "@mui/material";
 
 // node_modules/@textea/json-viewer/dist/index.mjs
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
-import { jsx as jsx129, jsxs as jsxs123, Fragment as Fragment5 } from "react/jsx-runtime";
-import { Box as Box6, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
-import { createContext as createContext9, useContext as useContext16, useState as useState9, useRef as useRef12, useCallback as useCallback8, useMemo as useMemo7, useEffect as useEffect16, memo as memo9 } from "react";
+import { jsx as jsx130, jsxs as jsxs124, Fragment as Fragment6 } from "react/jsx-runtime";
+import { Box as Box7, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
+import { createContext as createContext9, useContext as useContext16, useState as useState10, useRef as useRef12, useCallback as useCallback8, useMemo as useMemo7, useEffect as useEffect16, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t2, f2, n2 = "";
@@ -14319,7 +14468,7 @@ async function copyString(value) {
 }
 function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-  const [copied, setCopied] = useState9(false);
+  const [copied, setCopied] = useState10(false);
   const copyTimeout = useRef12(null);
   const handleCopyResult = useCallback8((value) => {
     const current = copyTimeout.current;
@@ -14402,7 +14551,7 @@ function useInspect(path, value, nestedIndex) {
     value,
     setInspectCache
   ]);
-  const [inspect, set] = useState9(() => {
+  const [inspect, set] = useState10(() => {
     const shouldInspect = getInspectCache(path, nestedIndex);
     if (shouldInspect !== void 0) {
       return shouldInspect;
@@ -14428,7 +14577,7 @@ function useInspect(path, value, nestedIndex) {
     setInspect
   ];
 }
-var DataBox = (props) => /* @__PURE__ */ jsx129(Box6, {
+var DataBox = (props) => /* @__PURE__ */ jsx130(Box7, {
   component: "div",
   ...props,
   sx: {
@@ -14439,7 +14588,7 @@ var DataBox = (props) => /* @__PURE__ */ jsx129(Box6, {
 var DataTypeLabel = (param) => {
   let { dataType, enable = true } = param;
   if (!enable) return null;
-  return /* @__PURE__ */ jsx129(DataBox, {
+  return /* @__PURE__ */ jsx130(DataBox, {
     className: "data-type-label",
     sx: {
       mx: 0.5,
@@ -14457,18 +14606,18 @@ function defineEasyType(param) {
     const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
     const onSelect = useJsonViewerStore((store) => store.onSelect);
-    return /* @__PURE__ */ jsxs123(DataBox, {
+    return /* @__PURE__ */ jsxs124(DataBox, {
       onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(props.path, props.value),
       sx: {
         color: color2
       },
       children: [
-        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx129(DataTypeLabel, {
+        displayTypeLabel && storeDisplayDataTypes && /* @__PURE__ */ jsx130(DataTypeLabel, {
           dataType: type
         }),
-        /* @__PURE__ */ jsx129(DataBox, {
+        /* @__PURE__ */ jsx130(DataBox, {
           className: "".concat(type, "-value"),
-          children: /* @__PURE__ */ jsx129(Render, {
+          children: /* @__PURE__ */ jsx130(Render, {
             path: props.path,
             inspect: props.inspect,
             setInspect: props.setInspect,
@@ -14508,7 +14657,7 @@ function defineEasyType(param) {
     }, [
       setValue
     ]);
-    return /* @__PURE__ */ jsx129(InputBase, {
+    return /* @__PURE__ */ jsx130(InputBase, {
       autoFocus: true,
       value,
       onChange: handleChange,
@@ -14548,7 +14697,7 @@ var booleanType = defineEasyType({
   },
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx129(Fragment5, {
+    return /* @__PURE__ */ jsx130(Fragment6, {
       children: value ? "true" : "false"
     });
   }
@@ -14567,7 +14716,7 @@ var dateType = defineEasyType({
   colorKey: "base0D",
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx129(Fragment5, {
+    return /* @__PURE__ */ jsx130(Fragment6, {
       children: value.toLocaleTimeString("en-us", displayOptions)
     });
   }
@@ -14596,12 +14745,12 @@ var functionName = (func) => {
 var lb = "{";
 var rb = "}";
 var PreFunctionType = (props) => {
-  return /* @__PURE__ */ jsxs123(NoSsr, {
+  return /* @__PURE__ */ jsxs124(NoSsr, {
     children: [
-      /* @__PURE__ */ jsx129(DataTypeLabel, {
+      /* @__PURE__ */ jsx130(DataTypeLabel, {
         dataType: "function"
       }),
-      /* @__PURE__ */ jsxs123(Box6, {
+      /* @__PURE__ */ jsxs124(Box7, {
         component: "span",
         className: "data-function-start",
         sx: {
@@ -14617,8 +14766,8 @@ var PreFunctionType = (props) => {
   });
 };
 var PostFunctionType = () => {
-  return /* @__PURE__ */ jsx129(NoSsr, {
-    children: /* @__PURE__ */ jsx129(Box6, {
+  return /* @__PURE__ */ jsx130(NoSsr, {
+    children: /* @__PURE__ */ jsx130(Box7, {
       component: "span",
       className: "data-function-end",
       children: rb
@@ -14627,15 +14776,15 @@ var PostFunctionType = () => {
 };
 var FunctionType = (props) => {
   const functionColor = useJsonViewerStore((store) => store.colorspace.base05);
-  return /* @__PURE__ */ jsx129(NoSsr, {
-    children: /* @__PURE__ */ jsx129(Box6, {
+  return /* @__PURE__ */ jsx130(NoSsr, {
+    children: /* @__PURE__ */ jsx130(Box7, {
       className: "data-function",
       sx: {
         display: props.inspect ? "block" : "inline-block",
         pl: props.inspect ? 2 : 0,
         color: functionColor
       },
-      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx129(Box6, {
+      children: props.inspect ? functionBody(props.value) : /* @__PURE__ */ jsx130(Box7, {
         component: "span",
         className: "data-function-body",
         onClick: () => props.setInspect(true),
@@ -14663,7 +14812,7 @@ var nullType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx129(Box6, {
+    return /* @__PURE__ */ jsx130(Box7, {
       sx: {
         fontSize: "0.8rem",
         backgroundColor,
@@ -14686,7 +14835,7 @@ var nanType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx129(Box6, {
+    return /* @__PURE__ */ jsx130(Box7, {
       sx: {
         backgroundColor,
         fontSize: "0.8rem",
@@ -14706,7 +14855,7 @@ var floatType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx129(Fragment5, {
+    return /* @__PURE__ */ jsx130(Fragment6, {
       children: value
     });
   }
@@ -14720,7 +14869,7 @@ var intType = defineEasyType({
   deserialize: (value) => parseFloat(value),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx129(Fragment5, {
+    return /* @__PURE__ */ jsx130(Fragment6, {
       children: value
     });
   }
@@ -14733,16 +14882,16 @@ var bigIntType = defineEasyType({
   deserialize: (value) => BigInt(value.replace(/\D/g, "")),
   Renderer: (param) => {
     let { value } = param;
-    return /* @__PURE__ */ jsx129(Fragment5, {
+    return /* @__PURE__ */ jsx130(Fragment6, {
       children: "".concat(value, "n")
     });
   }
 });
 var BaseIcon = (param) => {
   let { d: d2, ...props } = param;
-  return /* @__PURE__ */ jsx129(SvgIcon, {
+  return /* @__PURE__ */ jsx130(SvgIcon, {
     ...props,
-    children: /* @__PURE__ */ jsx129("path", {
+    children: /* @__PURE__ */ jsx130("path", {
       d: d2
     })
   });
@@ -14757,55 +14906,55 @@ var Edit = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.3
 var ExpandMore = "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z";
 var Delete = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM8 9h8v10H8zm7.5-5l-1-1h-5l-1 1H5v2h14V4z";
 var AddBoxIcon = (props) => {
-  return /* @__PURE__ */ jsx129(BaseIcon, {
+  return /* @__PURE__ */ jsx130(BaseIcon, {
     d: AddBox,
     ...props
   });
 };
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ jsx129(BaseIcon, {
+  return /* @__PURE__ */ jsx130(BaseIcon, {
     d: Check,
     ...props
   });
 };
 var ChevronRightIcon = (props) => {
-  return /* @__PURE__ */ jsx129(BaseIcon, {
+  return /* @__PURE__ */ jsx130(BaseIcon, {
     d: ChevronRight,
     ...props
   });
 };
 var CircularArrowsIcon = (props) => {
-  return /* @__PURE__ */ jsx129(BaseIcon, {
+  return /* @__PURE__ */ jsx130(BaseIcon, {
     d: CircularArrows,
     ...props
   });
 };
 var CloseIcon = (props) => {
-  return /* @__PURE__ */ jsx129(BaseIcon, {
+  return /* @__PURE__ */ jsx130(BaseIcon, {
     d: Close,
     ...props
   });
 };
 var ContentCopyIcon = (props) => {
-  return /* @__PURE__ */ jsx129(BaseIcon, {
+  return /* @__PURE__ */ jsx130(BaseIcon, {
     d: ContentCopy,
     ...props
   });
 };
 var EditIcon = (props) => {
-  return /* @__PURE__ */ jsx129(BaseIcon, {
+  return /* @__PURE__ */ jsx130(BaseIcon, {
     d: Edit,
     ...props
   });
 };
 var ExpandMoreIcon = (props) => {
-  return /* @__PURE__ */ jsx129(BaseIcon, {
+  return /* @__PURE__ */ jsx130(BaseIcon, {
     d: ExpandMore,
     ...props
   });
 };
 var DeleteIcon = (props) => {
-  return /* @__PURE__ */ jsx129(BaseIcon, {
+  return /* @__PURE__ */ jsx130(BaseIcon, {
     d: Delete,
     ...props
   });
@@ -14844,7 +14993,7 @@ var PreObjectType = (props) => {
     props.value
   ]);
   const isTrap = useIsCycleReference(props.path, props.value);
-  return /* @__PURE__ */ jsxs123(Box6, {
+  return /* @__PURE__ */ jsxs124(Box7, {
     component: "span",
     className: "data-object-start",
     sx: {
@@ -14852,7 +15001,7 @@ var PreObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayLb : objectLb,
-      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx129(Box6, {
+      shouldDisplaySize && props.inspect && !isEmptyValue && /* @__PURE__ */ jsx130(Box7, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -14862,16 +15011,16 @@ var PreObjectType = (props) => {
         },
         children: sizeOfValue
       }),
-      isTrap && !props.inspect && /* @__PURE__ */ jsxs123(Fragment5, {
+      isTrap && !props.inspect && /* @__PURE__ */ jsxs124(Fragment6, {
         children: [
-          /* @__PURE__ */ jsx129(CircularArrowsIcon, {
+          /* @__PURE__ */ jsx130(CircularArrowsIcon, {
             sx: {
               fontSize: 12,
               color: textColor,
               mx: 0.5
             }
           }),
-          /* @__PURE__ */ jsx129(DataBox, {
+          /* @__PURE__ */ jsx130(DataBox, {
             sx: {
               cursor: "pointer",
               userSelect: "none"
@@ -14901,7 +15050,7 @@ var PostObjectType = (props) => {
     props.path,
     props.value
   ]);
-  return /* @__PURE__ */ jsxs123(Box6, {
+  return /* @__PURE__ */ jsxs124(Box7, {
     component: "span",
     className: "data-object-end",
     sx: {
@@ -14912,7 +15061,7 @@ var PostObjectType = (props) => {
     },
     children: [
       isArrayLike ? arrayRb : objectRb,
-      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx129(Box6, {
+      shouldDisplaySize && (isEmptyValue || !props.inspect) ? /* @__PURE__ */ jsx130(Box7, {
         component: "span",
         sx: {
           pl: 0.5,
@@ -14933,7 +15082,7 @@ var ObjectType = (props) => {
   const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
   const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
   const isTrap = useIsCycleReference(props.path, props.value);
-  const [displayLength, setDisplayLength] = useState9(useJsonViewerStore((store) => store.maxDisplayLength));
+  const [displayLength, setDisplayLength] = useState10(useJsonViewerStore((store) => store.maxDisplayLength));
   const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
   const elements = useMemo7(() => {
     if (!props.inspect) {
@@ -14952,7 +15101,7 @@ var ObjectType = (props) => {
             ...props.path,
             key
           ];
-          elements3.push(/* @__PURE__ */ jsx129(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx130(DataKeyPair, {
             path,
             value: value2,
             prevValue: props.prevValue instanceof Map ? props.prevValue.get(k2) : void 0,
@@ -14968,7 +15117,7 @@ var ObjectType = (props) => {
         while (true) {
           const nextResult = iterator2.next();
           var _nextResult_done;
-          elements3.push(/* @__PURE__ */ jsx129(DataKeyPair, {
+          elements3.push(/* @__PURE__ */ jsx130(DataKeyPair, {
             path: [
               ...props.path,
               "iterator:".concat(count2)
@@ -14996,7 +15145,7 @@ var ObjectType = (props) => {
             ...props.path,
             index
           ];
-          return /* @__PURE__ */ jsx129(DataKeyPair, {
+          return /* @__PURE__ */ jsx130(DataKeyPair, {
             path,
             value: value2,
             prevValue: Array.isArray(props.prevValue) ? props.prevValue[index] : void 0,
@@ -15005,7 +15154,7 @@ var ObjectType = (props) => {
         });
         if (value.length > displayLength) {
           const rest = value.length - displayLength;
-          elements4.push(/* @__PURE__ */ jsxs123(DataBox, {
+          elements4.push(/* @__PURE__ */ jsxs124(DataBox, {
             sx: {
               cursor: "pointer",
               lineHeight: 1.5,
@@ -15028,7 +15177,7 @@ var ObjectType = (props) => {
       const prevElements = Array.isArray(props.prevValue) ? segmentArray(props.prevValue, groupArraysAfterLength) : void 0;
       const elementsLastIndex = elements3.length - 1;
       return elements3.map((list, index) => {
-        return /* @__PURE__ */ jsx129(DataKeyPair, {
+        return /* @__PURE__ */ jsx130(DataKeyPair, {
           path: props.path,
           value: list,
           nestedIndex: index,
@@ -15055,7 +15204,7 @@ var ObjectType = (props) => {
         ...props.path,
         key
       ];
-      return /* @__PURE__ */ jsx129(DataKeyPair, {
+      return /* @__PURE__ */ jsx130(DataKeyPair, {
         path,
         value: value2,
         prevValue: (_props_prevValue = props.prevValue) === null || _props_prevValue === void 0 ? void 0 : _props_prevValue[key],
@@ -15064,7 +15213,7 @@ var ObjectType = (props) => {
     });
     if (entries.length > displayLength) {
       const rest = entries.length - displayLength;
-      elements2.push(/* @__PURE__ */ jsxs123(DataBox, {
+      elements2.push(/* @__PURE__ */ jsxs124(DataBox, {
         sx: {
           cursor: "pointer",
           lineHeight: 1.5,
@@ -15102,7 +15251,7 @@ var ObjectType = (props) => {
   if (isEmptyValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx129(Box6, {
+  return /* @__PURE__ */ jsx130(Box7, {
     className: "data-object",
     sx: {
       display: props.inspect ? "block" : "inline-block",
@@ -15111,7 +15260,7 @@ var ObjectType = (props) => {
       color: keyColor,
       borderLeft: props.inspect ? "1px solid ".concat(borderColor) : "none"
     },
-    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx129(Box6, {
+    children: props.inspect ? elements : !isTrap && /* @__PURE__ */ jsx130(Box7, {
       component: "span",
       className: "data-object-body",
       onClick: () => props.setInspect(true),
@@ -15139,11 +15288,11 @@ var stringType = defineEasyType({
   serialize: (value) => value,
   deserialize: (value) => value,
   Renderer: (props) => {
-    const [showRest, setShowRest] = useState9(false);
+    const [showRest, setShowRest] = useState10(false);
     const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
     const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
     const hasRest = props.value.length > collapseStringsAfterLength;
-    return /* @__PURE__ */ jsxs123(Box6, {
+    return /* @__PURE__ */ jsxs124(Box7, {
       component: "span",
       sx: {
         overflowWrap: "anywhere",
@@ -15161,7 +15310,7 @@ var stringType = defineEasyType({
       children: [
         '"',
         value,
-        hasRest && !showRest && /* @__PURE__ */ jsx129(Box6, {
+        hasRest && !showRest && /* @__PURE__ */ jsx130(Box7, {
           component: "span",
           sx: {
             padding: 0.5
@@ -15180,7 +15329,7 @@ var undefinedType = defineEasyType({
   displayTypeLabel: false,
   Renderer: () => {
     const backgroundColor = useJsonViewerStore((store) => store.colorspace.base02);
-    return /* @__PURE__ */ jsx129(Box6, {
+    return /* @__PURE__ */ jsx130(Box7, {
       sx: {
         fontSize: "0.7rem",
         backgroundColor,
@@ -15261,7 +15410,7 @@ function useTypeComponents(value, path) {
     registry
   ]);
 }
-var IconBox = (props) => /* @__PURE__ */ jsx129(Box6, {
+var IconBox = (props) => /* @__PURE__ */ jsx130(Box7, {
   component: "span",
   ...props,
   sx: {
@@ -15293,7 +15442,7 @@ var DataKeyPair = (props) => {
     storeEditable,
     value
   ]);
-  const [tempValue, setTempValue] = useState9("");
+  const [tempValue, setTempValue] = useState10("");
   const depth = path.length;
   const key = path[depth - 1];
   const hoverPath = useJsonViewerStore((store) => store.hoverPath);
@@ -15307,7 +15456,7 @@ var DataKeyPair = (props) => {
   const setHover = useJsonViewerStore((store) => store.setHover);
   const root = useJsonViewerStore((store) => store.value);
   const [inspect, setInspect] = useInspect(path, value, nestedIndex);
-  const [editing, setEditing] = useState9(false);
+  const [editing, setEditing] = useState10(false);
   const onChange = useJsonViewerStore((store) => store.onChange);
   const keyColor = useTextColor();
   const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
@@ -15447,18 +15596,18 @@ var DataKeyPair = (props) => {
   ]);
   const actionIcons = useMemo7(() => {
     if (editing) {
-      return /* @__PURE__ */ jsxs123(Fragment5, {
+      return /* @__PURE__ */ jsxs124(Fragment6, {
         children: [
-          /* @__PURE__ */ jsx129(IconBox, {
-            children: /* @__PURE__ */ jsx129(CloseIcon, {
+          /* @__PURE__ */ jsx130(IconBox, {
+            children: /* @__PURE__ */ jsx130(CloseIcon, {
               sx: {
                 fontSize: ".8rem"
               },
               onClick: abortEditing
             })
           }),
-          /* @__PURE__ */ jsx129(IconBox, {
-            children: /* @__PURE__ */ jsx129(CheckIcon, {
+          /* @__PURE__ */ jsx130(IconBox, {
+            children: /* @__PURE__ */ jsx130(CheckIcon, {
               sx: {
                 fontSize: ".8rem"
               },
@@ -15468,9 +15617,9 @@ var DataKeyPair = (props) => {
         ]
       });
     }
-    return /* @__PURE__ */ jsxs123(Fragment5, {
+    return /* @__PURE__ */ jsxs124(Fragment6, {
       children: [
-        enableClipboard && /* @__PURE__ */ jsx129(IconBox, {
+        enableClipboard && /* @__PURE__ */ jsx130(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             try {
@@ -15479,41 +15628,41 @@ var DataKeyPair = (props) => {
               console.error(e2);
             }
           },
-          children: copied ? /* @__PURE__ */ jsx129(CheckIcon, {
+          children: copied ? /* @__PURE__ */ jsx130(CheckIcon, {
             sx: {
               fontSize: ".8rem"
             }
-          }) : /* @__PURE__ */ jsx129(ContentCopyIcon, {
+          }) : /* @__PURE__ */ jsx130(ContentCopyIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx129(IconBox, {
+        Editor && editable && serialize && deserialize && /* @__PURE__ */ jsx130(IconBox, {
           onClick: startEditing,
-          children: /* @__PURE__ */ jsx129(EditIcon, {
+          children: /* @__PURE__ */ jsx130(EditIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableAdd && /* @__PURE__ */ jsx129(IconBox, {
+        enableAdd && /* @__PURE__ */ jsx130(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onAdd === null || onAdd === void 0 ? void 0 : onAdd(path);
           },
-          children: /* @__PURE__ */ jsx129(AddBoxIcon, {
+          children: /* @__PURE__ */ jsx130(AddBoxIcon, {
             sx: {
               fontSize: ".8rem"
             }
           })
         }),
-        enableDelete && /* @__PURE__ */ jsx129(IconBox, {
+        enableDelete && /* @__PURE__ */ jsx130(IconBox, {
           onClick: (event) => {
             event.preventDefault();
             onDelete === null || onDelete === void 0 ? void 0 : onDelete(path, value);
           },
-          children: /* @__PURE__ */ jsx129(DeleteIcon, {
+          children: /* @__PURE__ */ jsx130(DeleteIcon, {
             sx: {
               fontSize: ".9rem"
             }
@@ -15561,7 +15710,7 @@ var DataKeyPair = (props) => {
     prevValue,
     nestedIndex
   ]);
-  return /* @__PURE__ */ jsxs123(Box6, {
+  return /* @__PURE__ */ jsxs124(Box7, {
     className: "data-key-pair",
     "data-testid": "data-key-pair" + path.join("."),
     sx: {
@@ -15573,7 +15722,7 @@ var DataKeyPair = (props) => {
       nestedIndex
     ]),
     children: [
-      /* @__PURE__ */ jsxs123(DataBox, {
+      /* @__PURE__ */ jsxs124(DataBox, {
         component: "span",
         className: "data-key",
         sx: {
@@ -15594,7 +15743,7 @@ var DataKeyPair = (props) => {
           setInspect
         ]),
         children: [
-          expandable ? inspect ? /* @__PURE__ */ jsx129(ExpandMoreIcon, {
+          expandable ? inspect ? /* @__PURE__ */ jsx130(ExpandMoreIcon, {
             className: "data-key-toggle-expanded",
             sx: {
               fontSize: ".8rem",
@@ -15602,7 +15751,7 @@ var DataKeyPair = (props) => {
                 cursor: "pointer"
               }
             }
-          }) : /* @__PURE__ */ jsx129(ChevronRightIcon, {
+          }) : /* @__PURE__ */ jsx130(ChevronRightIcon, {
             className: "data-key-toggle-collapsed",
             sx: {
               fontSize: ".8rem",
@@ -15611,44 +15760,44 @@ var DataKeyPair = (props) => {
               }
             }
           }) : null,
-          /* @__PURE__ */ jsx129(Box6, {
+          /* @__PURE__ */ jsx130(Box7, {
             ref: highlightContainer,
             className: "data-key-key",
             component: "span",
-            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs123(Fragment5, {
+            children: isRoot && depth === 0 ? rootName !== false ? quotesOnKeys ? /* @__PURE__ */ jsxs124(Fragment6, {
               children: [
                 '"',
                 rootName,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx129(Fragment5, {
+            }) : /* @__PURE__ */ jsx130(Fragment6, {
               children: rootName
-            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx129(KeyRenderer, {
+            }) : null : KeyRenderer.when(downstreamProps) ? /* @__PURE__ */ jsx130(KeyRenderer, {
               ...downstreamProps
-            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx129(Box6, {
+            }) : nestedIndex === void 0 && (isNumberKey ? /* @__PURE__ */ jsx130(Box7, {
               component: "span",
               style: {
                 color: numberKeyColor,
                 userSelect: isNumberKey ? "none" : "auto"
               },
               children: key
-            }) : quotesOnKeys ? /* @__PURE__ */ jsxs123(Fragment5, {
+            }) : quotesOnKeys ? /* @__PURE__ */ jsxs124(Fragment6, {
               children: [
                 '"',
                 key,
                 '"'
               ]
-            }) : /* @__PURE__ */ jsx129(Fragment5, {
+            }) : /* @__PURE__ */ jsx130(Fragment6, {
               children: key
             }))
           }),
-          isRoot ? rootName !== false && /* @__PURE__ */ jsx129(DataBox, {
+          isRoot ? rootName !== false && /* @__PURE__ */ jsx130(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5
             },
             children: ":"
-          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx129(DataBox, {
+          }) : nestedIndex === void 0 && /* @__PURE__ */ jsx130(DataBox, {
             className: "data-key-colon",
             sx: {
               mr: 0.5,
@@ -15659,29 +15808,29 @@ var DataKeyPair = (props) => {
             },
             children: ":"
           }),
-          PreComponent && /* @__PURE__ */ jsx129(PreComponent, {
+          PreComponent && /* @__PURE__ */ jsx130(PreComponent, {
             ...downstreamProps
           }),
           isHover && expandable && inspect && actionIcons
         ]
       }),
-      editing && editable ? Editor && /* @__PURE__ */ jsx129(Editor, {
+      editing && editable ? Editor && /* @__PURE__ */ jsx130(Editor, {
         path,
         value: tempValue,
         setValue: setTempValue,
         abortEditing,
         commitEditing
-      }) : Component ? /* @__PURE__ */ jsx129(Component, {
+      }) : Component ? /* @__PURE__ */ jsx130(Component, {
         ...downstreamProps
-      }) : /* @__PURE__ */ jsx129(Box6, {
+      }) : /* @__PURE__ */ jsx130(Box7, {
         component: "span",
         className: "data-value-fallback",
         children: "fallback: ".concat(value)
       }),
-      PostComponent && /* @__PURE__ */ jsx129(PostComponent, {
+      PostComponent && /* @__PURE__ */ jsx130(PostComponent, {
         ...downstreamProps
       }),
-      !last && displayComma && /* @__PURE__ */ jsx129(DataBox, {
+      !last && displayComma && /* @__PURE__ */ jsx130(DataBox, {
         children: ","
       }),
       isHover && expandable && !inspect && actionIcons,
@@ -15692,7 +15841,7 @@ var DataKeyPair = (props) => {
 };
 var query = "(prefers-color-scheme: dark)";
 function useThemeDetector() {
-  const [isDark, setIsDark] = useState9(false);
+  const [isDark, setIsDark] = useState10(false);
   useEffect16(() => {
     const listener = (e2) => setIsDark(e2.matches);
     setIsDark(window.matchMedia(query).matches);
@@ -15801,7 +15950,7 @@ var JsonViewerInner = (props) => {
   const onMouseLeave = useCallback8(() => setHover(null), [
     setHover
   ]);
-  return /* @__PURE__ */ jsx129(Paper2, {
+  return /* @__PURE__ */ jsx130(Paper2, {
     elevation: 0,
     className: clsx(themeCls, props.className),
     style: props.style,
@@ -15812,7 +15961,7 @@ var JsonViewerInner = (props) => {
       ...props.sx
     },
     onMouseLeave,
-    children: /* @__PURE__ */ jsx129(DataKeyPair, {
+    children: /* @__PURE__ */ jsx130(DataKeyPair, {
       value,
       prevValue,
       path: emptyPath,
@@ -15864,13 +16013,13 @@ var JsonViewer = function JsonViewer2(props) {
   };
   const jsonViewerStore = useMemo7(() => createJsonViewerStore(props), []);
   const typeRegistryStore = useMemo7(() => createTypeRegistryStore(), []);
-  return /* @__PURE__ */ jsx129(ThemeProvider, {
+  return /* @__PURE__ */ jsx130(ThemeProvider, {
     theme,
-    children: /* @__PURE__ */ jsx129(TypeRegistryStoreContext.Provider, {
+    children: /* @__PURE__ */ jsx130(TypeRegistryStoreContext.Provider, {
       value: typeRegistryStore,
-      children: /* @__PURE__ */ jsx129(JsonViewerStoreContext.Provider, {
+      children: /* @__PURE__ */ jsx130(JsonViewerStoreContext.Provider, {
         value: jsonViewerStore,
-        children: /* @__PURE__ */ jsx129(JsonViewerInner, {
+        children: /* @__PURE__ */ jsx130(JsonViewerInner, {
           ...mixedProps
         })
       })
@@ -15879,7 +16028,7 @@ var JsonViewer = function JsonViewer2(props) {
 };
 
 // src/components/event-details/event-details.tsx
-import { memo as memo10, useMemo as useMemo11, useState as useState14 } from "react";
+import { memo as memo10, useMemo as useMemo11, useState as useState15 } from "react";
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -16077,40 +16226,40 @@ var getEventGroupsByType = (events) => {
 
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
-import { Box as Box10, Grid as Grid3, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
-import { useEffect as useEffect17, useMemo as useMemo9, useRef as useRef13, useState as useState11 } from "react";
+import { Box as Box11, Grid as Grid3, IconButton as IconButton3, Typography as Typography7 } from "@mui/material";
+import { useEffect as useEffect17, useMemo as useMemo9, useRef as useRef13, useState as useState12 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
-import { Box as Box7 } from "@mui/material";
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { Box as Box8 } from "@mui/material";
+import { jsx as jsx131 } from "react/jsx-runtime";
 var StatusIcon = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ jsx130(Cancel, { sx: { color: "red" } });
+      return /* @__PURE__ */ jsx131(Cancel, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ jsx130(Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ jsx131(Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ jsx130(RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ jsx131(RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ jsx130(Error2, { sx: { color: "orange" } });
+      return /* @__PURE__ */ jsx131(Error2, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ jsx130(CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ jsx131(CheckCircle, { sx: { color: "lightgray" } });
     }
   }
 };
 
 // src/components/event-details/iam-event-detail.tsx
 import { CheckCircle as CheckCircle2, Error as ErrorIcon, Warning } from "@mui/icons-material";
-import { Box as Box8, Chip, Grid as Grid2, Typography as Typography4 } from "@mui/material";
-import { jsx as jsx131, jsxs as jsxs124 } from "react/jsx-runtime";
-var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ jsx131(Grid2, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx131(
-    Typography4,
+import { Box as Box9, Chip, Grid as Grid2, Typography as Typography5 } from "@mui/material";
+import { jsx as jsx132, jsxs as jsxs125 } from "react/jsx-runtime";
+var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs125(Grid2, { container: true, spacing: 0, sx: { mb: 1 }, children: [
+  /* @__PURE__ */ jsx132(Grid2, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx132(
+    Typography5,
     {
       sx: {
         color: "text.secondary",
@@ -16120,8 +16269,8 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { contain
       children: label
     }
   ) }),
-  /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx131(
-    Typography4,
+  /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx132(
+    Typography5,
     {
       sx: {
         color: "text.primary",
@@ -16136,30 +16285,30 @@ var PermissionIcon = ({ status }) => {
   switch (status) {
     case "explicitly_allowed":
     case "implicitly_allowed": {
-      return /* @__PURE__ */ jsx131(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx132(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ jsx131(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx132(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ jsx131(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx132(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx131(Box8, { sx: { p: 2 }, children: /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
+    return /* @__PURE__ */ jsx132(Box9, { sx: { p: 2 }, children: /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx131(Box8, { sx: { p: 2 }, children: /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
+    return /* @__PURE__ */ jsx132(Box9, { sx: { p: 2 }, children: /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
   }
-  return /* @__PURE__ */ jsxs124(Box8, { sx: { p: 2 }, children: [
-    /* @__PURE__ */ jsx131(Box8, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsxs125(Box9, { sx: { p: 2 }, children: [
+    /* @__PURE__ */ jsx132(Box9, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx132(
       Chip,
       {
-        icon: /* @__PURE__ */ jsx131(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ jsx132(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -16169,13 +16318,13 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__PURE__ */ jsx131(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
-    /* @__PURE__ */ jsx131(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
-    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx131(
+    /* @__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(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx131(Box8, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx131(
-          Typography4,
+        content: /* @__PURE__ */ jsx132(Box9, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx132(
+          Typography5,
           {
             sx: {
               color: "text.primary"
@@ -16188,11 +16337,11 @@ var IAMEventDetail = ({ event }) => {
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx131(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx132(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx131(Box8, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx131(
-          Typography4,
+        content: /* @__PURE__ */ jsx132(Box9, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx132(
+          Typography5,
           {
             sx: {
               color: "text.primary",
@@ -16206,20 +16355,20 @@ var IAMEventDetail = ({ event }) => {
         label: "Resources"
       }
     ),
-    /* @__PURE__ */ jsxs124(Box8, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
-      /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 2, children: [
-        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx131(Typography4, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
+    /* @__PURE__ */ jsxs125(Box9, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ jsxs125(Grid2, { container: true, spacing: 2, children: [
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs125(Box9, { 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.explicitDenies !== void 0 && /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx131(Typography4, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs125(Box9, { 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.implicitDenies !== void 0 && /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box8, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx131(Typography4, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsx132(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs125(Box9, { 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" })
         ] }) })
       ] })
     ] })
@@ -16228,9 +16377,9 @@ var IAMEventDetail = ({ event }) => {
 
 // src/components/event-details/iam-permission-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box9, Chip as Chip2, IconButton, Typography as Typography5 } from "@mui/material";
-import { useMemo as useMemo8, useState as useState10 } from "react";
-import { jsx as jsx132, jsxs as jsxs125 } from "react/jsx-runtime";
+import { Box as Box10, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
+import { useMemo as useMemo8, useState as useState11 } from "react";
+import { jsx as jsx133, jsxs as jsxs126 } from "react/jsx-runtime";
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
   return {
@@ -16239,7 +16388,7 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = useState10(false);
+  const [isOpen, setIsOpen] = useState11(false);
   const parsedData = useMemo8(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
@@ -16258,12 +16407,12 @@ var IAMPermissionItem = ({ event }) => {
     return null;
   }
   const { chipColors, parsedIAM } = parsedData;
-  return /* @__PURE__ */ jsxs125(Box9, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ jsxs125(Box9, { sx: { alignItems: "center", display: "flex" }, children: [
-      /* @__PURE__ */ jsx132(IconButton, { onClick: () => {
+  return /* @__PURE__ */ jsxs126(Box10, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxs126(Box10, { sx: { alignItems: "center", display: "flex" }, children: [
+      /* @__PURE__ */ jsx133(IconButton2, { onClick: () => {
         setIsOpen(!isOpen);
-      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ jsx132(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx132(KeyboardArrowRight, {}) }),
-      /* @__PURE__ */ jsx132(
+      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ jsx133(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx133(KeyboardArrowRight, {}) }),
+      /* @__PURE__ */ jsx133(
         Chip2,
         {
           label: formatPermissionStatus(parsedIAM.permission),
@@ -16275,19 +16424,19 @@ var IAMPermissionItem = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx132(Box9, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ jsxs125(Box9, { children: [
-      /* @__PURE__ */ jsx132(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
-      /* @__PURE__ */ jsx132(Typography5, { variant: "body2", children: parsedIAM.principal })
+    isOpen && /* @__PURE__ */ jsx133(Box10, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ jsxs126(Box10, { children: [
+      /* @__PURE__ */ jsx133(Typography6, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
+      /* @__PURE__ */ jsx133(Typography6, { variant: "body2", children: parsedIAM.principal })
     ] }) })
   ] });
 };
-var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx132(Box9, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx132(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx133(Box10, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx133(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment6, jsx as jsx133, jsxs as jsxs126 } from "react/jsx-runtime";
-var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ jsx133(Grid3, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx133(
-    Typography6,
+import { Fragment as Fragment7, jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
+var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs127(Grid3, { container: true, spacing: 0, sx: { mb: 1 }, children: [
+  /* @__PURE__ */ jsx134(Grid3, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx134(
+    Typography7,
     {
       sx: {
         color: "text.primary",
@@ -16297,8 +16446,8 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
       children: label
     }
   ) }),
-  /* @__PURE__ */ jsx133(Grid3, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx133(
-    Typography6,
+  /* @__PURE__ */ jsx134(Grid3, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx134(
+    Typography7,
     {
       sx: {
         color: "text.primary",
@@ -16310,8 +16459,8 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState11(false);
-  const [isOverflowing, setIsOverflowing] = useState11(false);
+  const [isOpen, setIsOpen] = useState12(false);
+  const [isOverflowing, setIsOverflowing] = useState12(false);
   const textReference = useRef13(null);
   const parsedMessage = useMemo9(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo9(
@@ -16339,21 +16488,21 @@ var EventMessage = ({ event }) => {
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
-  return /* @__PURE__ */ jsxs126(Box10, { sx: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs126(Box10, { sx: { alignItems: "flex-start", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx133(
-        IconButton2,
+  return /* @__PURE__ */ jsxs127(Box11, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs127(Box11, { sx: { alignItems: "flex-start", display: "flex" }, children: [
+      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx134(
+        IconButton3,
         {
           onClick: () => {
             setIsOpen(!isOpen);
           },
           size: "small",
           sx: { mr: 1, mt: -0.5, p: 0 },
-          children: isOpen ? /* @__PURE__ */ jsx133(KeyboardArrowDown2, {}) : /* @__PURE__ */ jsx133(KeyboardArrowRight2, {})
+          children: isOpen ? /* @__PURE__ */ jsx134(KeyboardArrowDown2, {}) : /* @__PURE__ */ jsx134(KeyboardArrowRight2, {})
         }
       ),
-      /* @__PURE__ */ jsx133(
-        Typography6,
+      /* @__PURE__ */ jsx134(
+        Typography7,
         {
           ref: textReference,
           sx: {
@@ -16370,9 +16519,9 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx133(Box10, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx133(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment6, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx133(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx133(DetailRow2, { content: parsedMessage.details, label: "Details:" })
+    isOpen && /* @__PURE__ */ jsx134(Box11, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx134(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs127(Fragment7, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx134(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx134(DetailRow2, { content: parsedMessage.details, label: "Details:" })
     ] }) })
   ] });
 };
@@ -16401,17 +16550,17 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ jsxs126(Box10, { children: [
-      /* @__PURE__ */ jsx133(
-        Box10,
+    return /* @__PURE__ */ jsxs127(Box11, { children: [
+      /* @__PURE__ */ jsx134(
+        Box11,
         {
           sx: {
             alignItems: "left",
             display: "flex",
             mb: 1
           },
-          children: /* @__PURE__ */ jsx133(
-            Typography6,
+          children: /* @__PURE__ */ jsx134(
+            Typography7,
             {
               sx: {
                 alignItems: "left",
@@ -16425,13 +16574,13 @@ var EventDetail = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx133(IAMPermissionDetail, { events })
+      /* @__PURE__ */ jsx134(IAMPermissionDetail, { events })
     ] });
   }
   const eventLevel = getEventLevelFromGroup(type);
-  return /* @__PURE__ */ jsxs126(Box10, { children: [
-    /* @__PURE__ */ jsxs126(
-      Box10,
+  return /* @__PURE__ */ jsxs127(Box11, { children: [
+    /* @__PURE__ */ jsxs127(
+      Box11,
       {
         sx: {
           alignItems: "left",
@@ -16440,9 +16589,9 @@ var EventDetail = ({
           mb: 1
         },
         children: [
-          /* @__PURE__ */ jsx133(StatusIcon, { errorLevel: eventLevel }),
-          /* @__PURE__ */ jsx133(
-            Typography6,
+          /* @__PURE__ */ jsx134(StatusIcon, { errorLevel: eventLevel }),
+          /* @__PURE__ */ jsx134(
+            Typography7,
             {
               sx: {
                 alignItems: "left",
@@ -16460,14 +16609,14 @@ var EventDetail = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx133(Box10, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx133(
-      Box10,
+    /* @__PURE__ */ jsx134(Box11, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx134(
+      Box11,
       {
         sx: {
           maxWidth: "100%",
           mb: 1
         },
-        children: /* @__PURE__ */ jsx133(EventMessage, { event })
+        children: /* @__PURE__ */ jsx134(EventMessage, { event })
       },
       `${event.span_id}-${event.event_id}`
     )) })
@@ -26161,9 +26310,9 @@ var QueryStatus = {
 };
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
-import { Box as Box11, CircularProgress as CircularProgress2, Stack, Typography as Typography7 } from "@mui/material";
-import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef14, useState as useState12 } from "react";
-import { jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
+import { Box as Box12, CircularProgress as CircularProgress2, Stack, Typography as Typography8 } from "@mui/material";
+import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef14, useState as useState13 } from "react";
+import { jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
@@ -26191,9 +26340,9 @@ function useCloudWatchLogsClient(region) {
   return client;
 }
 function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
-  const [loading, setLoading] = useState12(true);
-  const [logs, setLogs] = useState12([]);
-  const [error, setError] = useState12();
+  const [loading, setLoading] = useState13(true);
+  const [logs, setLogs] = useState13([]);
+  const [error, setError] = useState13();
   const pollTimerRef = useRef14(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
   useEffect18(() => {
@@ -26253,30 +26402,30 @@ function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, en
 var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, region, requestId, startTimeNano }) => {
   const { error, loading, logs } = useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano);
   if (loading) {
-    return /* @__PURE__ */ jsxs127(Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
-      /* @__PURE__ */ jsx134(CircularProgress2, { size: 14 }),
-      /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
+    return /* @__PURE__ */ jsxs128(Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx135(CircularProgress2, { size: 14 }),
+      /* @__PURE__ */ jsx135(Typography8, { color: "text.secondary", variant: "body2", children: "Loading logs\u2026" })
     ] });
   }
   if (error !== void 0) {
-    return /* @__PURE__ */ jsx134(Typography7, { color: "error", variant: "body2", children: error.message });
+    return /* @__PURE__ */ jsx135(Typography8, { color: "error", variant: "body2", children: error.message });
   }
   if (logs.length === 0) {
-    return /* @__PURE__ */ jsx134(Typography7, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
+    return /* @__PURE__ */ jsx135(Typography8, { color: "text.secondary", variant: "body2", children: "No logs found for this invocation." });
   }
-  return /* @__PURE__ */ jsx134(Box11, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx134("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx134(Typography7, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
+  return /* @__PURE__ */ jsx135(Box12, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx135("pre", { style: { margin: 0, overflow: "auto" }, children: logs.map((log) => /* @__PURE__ */ jsx135(Typography8, { variant: "body2", children: `[${log.timestamp}] ${log.message}` }, log.ptr)) }) });
 };
 
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
-import { Box as Box12, Typography as Typography8 } from "@mui/material";
-import { useState as useState13 } from "react";
-import { jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
+import { Box as Box13, Typography as Typography9 } from "@mui/material";
+import { useState as useState14 } from "react";
+import { jsx as jsx136, jsxs as jsxs129 } from "react/jsx-runtime";
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState13(initialOpen);
-  return /* @__PURE__ */ jsxs128(Box12, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ jsxs128(
-      Box12,
+  const [isOpen, setIsOpen] = useState14(initialOpen);
+  return /* @__PURE__ */ jsxs129(Box13, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ jsxs129(
+      Box13,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -26289,8 +26438,8 @@ var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
           mb: 1
         },
         children: [
-          /* @__PURE__ */ jsxs128(
-            Box12,
+          /* @__PURE__ */ jsxs129(
+            Box13,
             {
               role: "button",
               sx: {
@@ -26299,23 +26448,23 @@ var ToggleSection = ({ action, 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(Typography9, { 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 } })
               ]
             }
           ),
-          action !== false && /* @__PURE__ */ jsx135(Box12, { onClick: (event) => {
+          action !== false && /* @__PURE__ */ jsx136(Box13, { onClick: (event) => {
             event.stopPropagation();
           }, children: action })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx135(Box12, { children })
+    isOpen && /* @__PURE__ */ jsx136(Box13, { children })
   ] });
 };
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment7, jsx as jsx136, jsxs as jsxs129 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx137, jsxs as jsxs130 } from "react/jsx-runtime";
 function tryParseJson(value) {
   if (typeof value !== "string") {
     return value;
@@ -26344,9 +26493,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
-  const [parseNestedJson, setParseNestedJson] = useState14(true);
+  const [parseNestedJson, setParseNestedJson] = useState15(true);
   if (!selectedEvent) {
-    return /* @__PURE__ */ jsx136(Box13, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx136(Typography9, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ jsx137(Box14, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx137(Typography10, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
   const isLambdaInvoke = checkIsLambdaInvoke(selectedEvent);
   const isSqsSendMessage = checkIsSqsSendMessage(selectedEvent);
@@ -26367,9 +26516,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
   const exceptionPayload = tryParseJson(selectedEvent.attributes?.["localstack.aws.service.exception"]);
   const hasPayloads = requestPayload !== void 0 || responsePayload !== void 0 || exceptionPayload !== void 0;
   const duration = selectedEvent.end_time_unix_nano ? ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString() : void 0;
-  return /* @__PURE__ */ jsxs129(Box13, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs129(
-      Box13,
+  return /* @__PURE__ */ jsxs130(Box14, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs130(
+      Box14,
       {
         sx: {
           alignItems: "center",
@@ -26381,57 +26530,57 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           py: 1
         },
         children: [
-          /* @__PURE__ */ jsx136(Box13, { children: /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
-          onClose && /* @__PURE__ */ jsx136(IconButton3, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx136(Close2, {}) })
+          /* @__PURE__ */ jsx137(Box14, { children: /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "h6", children: "Operation Details" }) }),
+          onClose && /* @__PURE__ */ jsx137(IconButton4, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx137(Close2, {}) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx136(Box13, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
-      /* @__PURE__ */ jsx136(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs129(Box13, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs129(Box13, { children: [
-            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.service_name })
+    /* @__PURE__ */ jsx137(Box14, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 2, children: [
+      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs130(Box14, { sx: { display: "grid", gap: 2, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs130(Box14, { children: [
+            /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.service_name })
           ] }),
-          /* @__PURE__ */ jsxs129(Box13, { children: [
-            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
-            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.operation_name })
+          /* @__PURE__ */ jsxs130(Box14, { children: [
+            /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
+            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.operation_name })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs129(Box13, { children: [
-          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.resource_name })
+        /* @__PURE__ */ jsxs130(Box14, { children: [
+          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
-        Boolean(resourceArn) && /* @__PURE__ */ jsxs129(Box13, { children: [
-          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
-          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: resourceArn })
+        Boolean(resourceArn) && /* @__PURE__ */ jsxs130(Box14, { children: [
+          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource ARN" }),
+          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: resourceArn })
         ] }),
-        /* @__PURE__ */ jsxs129(Box13, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs129(Box13, { children: [
-            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
-            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.account_id })
+        /* @__PURE__ */ jsxs130(Box14, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs130(Box14, { children: [
+            /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Account" }),
+            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.account_id })
           ] }),
-          /* @__PURE__ */ jsxs129(Box13, { children: [
-            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.region })
+          /* @__PURE__ */ jsxs130(Box14, { children: [
+            /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.region })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs129(Box13, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
-          /* @__PURE__ */ jsxs129(Box13, { children: [
-            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-            /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+        /* @__PURE__ */ jsxs130(Box14, { sx: { display: "grid", gap: 1, gridTemplateColumns: duration === void 0 ? "1fr" : "1.3fr 1fr" }, children: [
+          /* @__PURE__ */ jsxs130(Box14, { children: [
+            /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+            /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
           ] }),
-          duration !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
-            /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-            /* @__PURE__ */ jsxs129(Typography9, { variant: "body2", children: [
+          duration !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
+            /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+            /* @__PURE__ */ jsxs130(Typography10, { variant: "body2", children: [
               duration,
               "ms"
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs129(Box13, { children: [
-          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
-          /* @__PURE__ */ jsx136(Stack2, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx136(
+        /* @__PURE__ */ jsxs130(Box14, { children: [
+          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Status" }),
+          /* @__PURE__ */ jsx137(Stack2, { alignItems: "center", direction: "row", flexWrap: "wrap", gap: 1, sx: { mb: eventGroups.errors || eventGroups.warnings ? 1 : 0 }, children: /* @__PURE__ */ jsx137(
             Chip3,
             {
               color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
@@ -26441,49 +26590,49 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ) })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx136(Divider2, {}),
-      /* @__PURE__ */ jsxs129(ToggleSection, { headline: "Permissions", children: [
-        !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx136(Typography9, { color: "text.secondary", variant: "body2", children: "There is no permission information available. Are IAM Policy Streams enabled?" }),
-        eventGroups.permissions && /* @__PURE__ */ jsx136(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, type: "permission" }),
-        eventGroups.errors && /* @__PURE__ */ jsx136(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
-        eventGroups.warnings && /* @__PURE__ */ jsx136(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
+      /* @__PURE__ */ jsx137(Divider3, {}),
+      /* @__PURE__ */ jsxs130(ToggleSection, { headline: "Permissions", children: [
+        !eventGroups.permissions && !eventGroups.errors && !eventGroups.warnings && /* @__PURE__ */ jsx137(Typography10, { color: "text.secondary", variant: "body2", children: "There is no permission information available. Are IAM Policy Streams enabled?" }),
+        eventGroups.permissions && /* @__PURE__ */ jsx137(EventDetail, { displayText: "Permissions", events: eventGroups.permissions, type: "permission" }),
+        eventGroups.errors && /* @__PURE__ */ jsx137(EventDetail, { displayText: "Error", events: eventGroups.errors, type: "error" }),
+        eventGroups.warnings && /* @__PURE__ */ jsx137(EventDetail, { displayText: "Warning", events: eventGroups.warnings, type: "warning" })
       ] }),
-      hasPayloads && /* @__PURE__ */ jsxs129(Fragment7, { children: [
-        /* @__PURE__ */ jsx136(Divider2, {}),
-        /* @__PURE__ */ jsx136(
+      hasPayloads && /* @__PURE__ */ jsxs130(Fragment8, { children: [
+        /* @__PURE__ */ jsx137(Divider3, {}),
+        /* @__PURE__ */ jsx137(
           ToggleSection,
           {
-            action: /* @__PURE__ */ jsx136(
+            action: /* @__PURE__ */ jsx137(
               FormControlLabel2,
               {
-                control: /* @__PURE__ */ jsx136(Switch, { checked: !parseNestedJson, onChange: (event) => {
+                control: /* @__PURE__ */ jsx137(Switch, { checked: !parseNestedJson, onChange: (event) => {
                   setParseNestedJson(!event.target.checked);
                 }, size: "small" }),
-                label: /* @__PURE__ */ jsx136(Typography9, { variant: "caption", children: "View raw data" }),
+                label: /* @__PURE__ */ jsx137(Typography10, { variant: "caption", children: "View raw data" }),
                 sx: { mr: 0 }
               }
             ),
             headline: "Payloads",
-            children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
-              requestPayload !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
-                /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
-                /* @__PURE__ */ jsx136(PayloadViewer, { value: requestPayload })
+            children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 2, children: [
+              requestPayload !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
+                /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Request" }),
+                /* @__PURE__ */ jsx137(PayloadViewer, { value: requestPayload })
               ] }),
-              responsePayload !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
-                /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
-                /* @__PURE__ */ jsx136(PayloadViewer, { value: responsePayload })
+              responsePayload !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
+                /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Response" }),
+                /* @__PURE__ */ jsx137(PayloadViewer, { value: responsePayload })
               ] }),
-              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
-                /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
-                /* @__PURE__ */ jsx136(PayloadViewer, { value: exceptionPayload })
+              exceptionPayload !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
+                /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Exception" }),
+                /* @__PURE__ */ jsx137(PayloadViewer, { value: exceptionPayload })
               ] })
             ] })
           }
         )
       ] }),
-      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs129(Fragment7, { children: [
-        /* @__PURE__ */ jsx136(Divider2, {}),
-        /* @__PURE__ */ jsx136(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx136(
+      isLambdaInvoke && requestId !== void 0 && /* @__PURE__ */ jsxs130(Fragment8, { children: [
+        /* @__PURE__ */ jsx137(Divider3, {}),
+        /* @__PURE__ */ jsx137(ToggleSection, { headline: "Lambda Logs", children: /* @__PURE__ */ jsx137(
           LambdaInvokeLogsSection,
           {
             endTimeNano: selectedEvent.end_time_unix_nano ?? selectedEvent.start_time_unix_nano,
@@ -26494,28 +26643,28 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx136(Divider2, {}),
-      /* @__PURE__ */ jsx136(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs129(Box13, { children: [
-          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.span_id })
+      /* @__PURE__ */ jsx137(Divider3, {}),
+      /* @__PURE__ */ jsx137(ToggleSection, { headline: "Advanced Information", initialOpen: false, children: /* @__PURE__ */ jsxs130(Stack2, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs130(Box14, { children: [
+          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.span_id })
         ] }),
-        /* @__PURE__ */ jsxs129(Box13, { children: [
-          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.trace_id })
+        /* @__PURE__ */ jsxs130(Box14, { children: [
+          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: selectedEvent.trace_id })
         ] }),
-        requestId !== void 0 && /* @__PURE__ */ jsxs129(Box13, { children: [
-          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
-          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: requestId })
+        requestId !== void 0 && /* @__PURE__ */ jsxs130(Box14, { children: [
+          /* @__PURE__ */ jsx137(Typography10, { sx: { fontWeight: 600 }, variant: "caption", children: "Request ID" }),
+          /* @__PURE__ */ jsx137(Typography10, { variant: "body2", children: requestId })
         ] }),
-        eventGroups.info && /* @__PURE__ */ jsx136(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
+        eventGroups.info && /* @__PURE__ */ jsx137(EventDetail, { displayText: "Info", events: eventGroups.info, type: "info" })
       ] }) })
     ] }) })
   ] });
 };
 var PayloadViewer = memo10(({ value }) => {
   const theme = useTheme3();
-  return /* @__PURE__ */ jsx136(Box13, { sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx137(Box14, { sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ jsx137(
     JsonViewer,
     {
       displayDataTypes: false,
@@ -26530,32 +26679,32 @@ var PayloadViewer = memo10(({ value }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
-import { Alert as Alert3, Button as Button4, useTheme as useTheme4 } from "@mui/material";
+import { Alert as Alert3, Button as Button5, useTheme as useTheme4 } from "@mui/material";
 import { Background, MarkerType, Position as Position2, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
 import { useEffect as useEffect19 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Box as Box15, Stack as Stack3, Typography as Typography10 } from "@mui/material";
+import { Box as Box16, Stack as Stack3, Typography as Typography11 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
 import { memo as memo11 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
-import { Box as Box14, Tooltip as Tooltip3 } from "@mui/material";
+import { Box as Box15, Tooltip as Tooltip4 } from "@mui/material";
 import { useMemo as useMemo12 } from "react";
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
   const icon = useMemo12(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ jsx137(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx138(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ jsx137(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx138(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ jsx137(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx138(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
@@ -26572,8 +26721,8 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ jsx137(Tooltip3, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx137(
-    Box14,
+  return /* @__PURE__ */ jsx138(Tooltip4, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx138(
+    Box15,
     {
       sx: {
         alignItems: "center",
@@ -26592,7 +26741,7 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-import { jsx as jsx138, jsxs as jsxs130 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs131 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
@@ -26600,9 +26749,9 @@ var handleStyle = {
 };
 var ServiceNode = memo11(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ jsxs130(Box15, { sx: { maxWidth: 200 }, children: [
-    /* @__PURE__ */ jsxs130(
-      Box15,
+  return /* @__PURE__ */ jsxs131(Box16, { sx: { maxWidth: 200 }, children: [
+    /* @__PURE__ */ jsxs131(
+      Box16,
       {
         role: "button",
         sx: {
@@ -26622,9 +26771,9 @@ var ServiceNode = memo11(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ jsx138(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ jsx138(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ jsx138(
+          /* @__PURE__ */ jsx139(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ jsx139(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ jsx139(
             ServiceCell,
             {
               height: "32px",
@@ -26637,7 +26786,7 @@ var ServiceNode = memo11(({ data, selected }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs130(
+    /* @__PURE__ */ jsxs131(
       Stack3,
       {
         alignItems: "center",
@@ -26648,7 +26797,7 @@ var ServiceNode = memo11(({ data, selected }) => {
           mt: 0.5
         },
         children: [
-          hasErrors && /* @__PURE__ */ jsx138(
+          hasErrors && /* @__PURE__ */ jsx139(
             Stack3,
             {
               direction: "row",
@@ -26657,11 +26806,11 @@ var ServiceNode = memo11(({ data, selected }) => {
                 flexWrap: "wrap",
                 gap: "2px"
               },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx138(ProblemIndicator, { error }, error.span_id))
+              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx139(ProblemIndicator, { error }, error.span_id))
             }
           ),
-          /* @__PURE__ */ jsx138(
-            Typography10,
+          /* @__PURE__ */ jsx139(
+            Typography11,
             {
               sx: {
                 fontSize: "0.9rem",
@@ -26712,11 +26861,11 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box16, IconButton as IconButton4 } from "@mui/material";
+import { Box as Box17, IconButton as IconButton5 } from "@mui/material";
 import { useReactFlow, useStore as useStore2 } from "@xyflow/react";
 import { memo as memo12 } from "react";
 import { shallow } from "zustand/shallow";
-import { jsx as jsx139, jsxs as jsxs131 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs132 } from "react/jsx-runtime";
 var selector = (s2) => ({
   isInteractive: s2.nodesDraggable || s2.nodesConnectable || s2.elementsSelectable,
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
@@ -26734,8 +26883,8 @@ var Controls = memo12(() => {
   const onFitViewHandler = () => {
     void fitView();
   };
-  return /* @__PURE__ */ jsxs131(
-    Box16,
+  return /* @__PURE__ */ jsxs132(
+    Box17,
     {
       sx: {
         bottom: 0,
@@ -26748,33 +26897,33 @@ var Controls = memo12(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx139(
-          IconButton4,
+        /* @__PURE__ */ jsx140(
+          IconButton5,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx139(Add, {})
+            children: /* @__PURE__ */ jsx140(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx139(
-          IconButton4,
+        /* @__PURE__ */ jsx140(
+          IconButton5,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx139(Remove, {})
+            children: /* @__PURE__ */ jsx140(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx139(
-          IconButton4,
+        /* @__PURE__ */ jsx140(
+          IconButton5,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx139(FitScreen, {})
+            children: /* @__PURE__ */ jsx140(FitScreen, {})
           }
         )
       ]
@@ -26783,7 +26932,7 @@ var Controls = memo12(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment8, jsx as jsx140, jsxs as jsxs132 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx141, jsxs as jsxs133 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -26846,11 +26995,11 @@ var TraceGraph = ({
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes, setEdges]);
   const theme = useTheme4();
-  return /* @__PURE__ */ jsxs132(Fragment8, { children: [
-    spans.error && /* @__PURE__ */ jsxs132(
+  return /* @__PURE__ */ jsxs133(Fragment9, { children: [
+    spans.error && /* @__PURE__ */ jsxs133(
       Alert3,
       {
-        action: /* @__PURE__ */ jsx140(Button4, { onClick: () => {
+        action: /* @__PURE__ */ jsx141(Button5, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -26861,7 +27010,7 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs132(
+    /* @__PURE__ */ jsxs133(
       ReactFlow,
       {
         "data-testid": "trace-graph",
@@ -26879,8 +27028,8 @@ var TraceGraph = ({
         onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx140(Controls, {}),
-          /* @__PURE__ */ jsx140(
+          /* @__PURE__ */ jsx141(Controls, {}),
+          /* @__PURE__ */ jsx141(
             Background,
             {
               bgColor: theme.palette.background.paper,
@@ -26894,7 +27043,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment9, jsx as jsx141, jsxs as jsxs133 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx142, jsxs as jsxs134 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -26942,8 +27091,8 @@ var TraceGraphView = ({
   traceId
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsxs133(
-    Box17,
+  return /* @__PURE__ */ jsxs134(
+    Box18,
     {
       "data-testid": "trace-graph-page",
       sx: {
@@ -26955,13 +27104,13 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs133(Box17, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx141(Button5, { onClick: () => {
+        /* @__PURE__ */ jsxs134(Box18, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ jsx142(Button6, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx141(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx141(Box17, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ jsx142(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx142(Box18, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx142(
           Paper3,
           {
             sx: {
@@ -26971,22 +27120,22 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx141(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx142(
               StatusMessage,
               {
                 error: statusError,
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__PURE__ */ jsxs133(Fragment9, { children: [
-              /* @__PURE__ */ jsx141(Main, { open, children: /* @__PURE__ */ jsx141(
-                Box17,
+            ) : /* @__PURE__ */ jsxs134(Fragment10, { children: [
+              /* @__PURE__ */ jsx142(Main, { open, children: /* @__PURE__ */ jsx142(
+                Box18,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx141(ReactFlowProvider, { children: /* @__PURE__ */ jsx141(
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx142(ReactFlowProvider, { children: /* @__PURE__ */ jsx142(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -27003,7 +27152,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx141(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx141(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ jsx142(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx142(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -27047,9 +27196,9 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState15();
-  const [loading, setLoading] = useState15(false);
-  const [fetchError, setFetchError] = useState15();
+  const [spans, setSpans] = useState16();
+  const [loading, setLoading] = useState16(false);
+  const [fetchError, setFetchError] = useState16();
   const fetchSpans = useCallback9(async () => {
     setLoading(true);
     try {
@@ -27066,8 +27215,8 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   useEffect20(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState15(true);
-  const [selectedEvent, setSelectedEvent] = useState15(() => spans?.find((span) => span.span_id === spanId));
+  const [open, setOpen] = useState16(true);
+  const [selectedEvent, setSelectedEvent] = useState16(() => spans?.find((span) => span.span_id === spanId));
   const spansReference = useRef15();
   useEffect20(() => {
     if (!spansReference.current && spans) {
@@ -27087,7 +27236,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const navigateToSpansList = useCallback9(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ jsx141(
+  return /* @__PURE__ */ jsx142(
     TraceGraphView,
     {
       fetchError,
@@ -27111,7 +27260,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-import { Fragment as Fragment10, jsx as jsx142, jsxs as jsxs134 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx143, jsxs as jsxs135 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const {
     checkStatus,
@@ -27124,18 +27273,21 @@ var SpansListPage = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
+    licenseLimit,
     spans,
     status,
     statusError,
     streamPaused,
-    toggleStream
+    systemLimit,
+    toggleStream,
+    totalCount
   } = useSpans();
   const clearSpansSync = useCallback10(() => {
     void clearSpans();
   }, [clearSpans]);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = useState16();
-  const [selectedSpanId, setSelectedSpanId] = useState16();
+  const [selectedTraceId, setSelectedTraceId] = useState17();
+  const [selectedSpanId, setSelectedSpanId] = useState17();
   const navigateToSpan = useCallback10((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
@@ -27144,9 +27296,9 @@ var SpansListPage = () => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsxs134(Fragment10, { children: [
-    /* @__PURE__ */ jsx142(
-      Box18,
+  return /* @__PURE__ */ jsxs135(Fragment11, { children: [
+    /* @__PURE__ */ jsx143(
+      Box19,
       {
         "data-testid": "spans-list-page",
         sx: {
@@ -27160,14 +27312,14 @@ var SpansListPage = () => {
           visibility: selectedTraceId === void 0 ? "visible" : "hidden",
           width: "100%"
         },
-        children: shouldShowStatusMessage ? /* @__PURE__ */ jsx142(
+        children: shouldShowStatusMessage ? /* @__PURE__ */ jsx143(
           StatusMessage,
           {
             error: statusError,
             onRetry: handleRetry,
             status
           }
-        ) : /* @__PURE__ */ jsx142(
+        ) : /* @__PURE__ */ jsx143(
           SpansList,
           {
             clearingSpans,
@@ -27176,6 +27328,7 @@ var SpansListPage = () => {
             fetchingForward,
             hasMoreBackward,
             hasMoreForward,
+            licenseLimit,
             onClearSpans: clearSpansSync,
             onFetchBackward: fetchBackward,
             onFetchForward: fetchForward,
@@ -27184,12 +27337,14 @@ var SpansListPage = () => {
             onToggleStream: toggleStream,
             order: order2,
             spans,
-            streamPaused
+            streamPaused,
+            systemLimit,
+            totalCount
           }
         )
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ jsx142(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ jsx143(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });