@localstack/appinspector-ui 1.0.33 → 1.0.35

package/dist/index.cjs

@@ -36,9 +36,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
-var import_material8 = require("@mui/material");
-var import_react10 = require("react");
-var import_react_router_dom2 = require("react-router-dom");
+var import_material21 = require("@mui/material");
+var import_react21 = require("react");
 
 // src/api/use-api.tsx
 var import_react = require("react");
@@ -3270,169 +3269,10 @@ var StatusMessage = ({
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_jsx_runtime128.Fragment, {});
 };
 
-// src/context.tsx
-var import_react5 = require("react");
-var import_react6 = require("react");
-
-// src/constants/error-messages.ts
-var ERROR_MESSAGES = {
-  APP_INSPECTOR_DISABLED: "App Inspector is currently disabled.",
-  APP_INSPECTOR_NOT_FOUND: "App Inspector extension not found. Please ensure App Inspector is licensed and enabled.",
-  CONNECTION_FAILED: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible."
-};
-
-// src/api/client.ts
-var apiLogger = createScopedLogger("API");
-var makeRequest = async (options) => {
-  const url = getAppInspectorApiUrl(options.localstackEndpoint, options.endpoint);
-  try {
-    apiLogger.info("Making request to:", { options, url });
-    const headers = new Headers(options.request?.headers);
-    headers.set("Content-Type", "application/json");
-    const response = await fetch(url, {
-      ...options.request,
-      headers
-    });
-    if (!response.ok) {
-      if (response.status === 404) {
-        throw new AppInspectorNotFoundError(
-          ERROR_MESSAGES.APP_INSPECTOR_NOT_FOUND,
-          new Error(`404 from ${url}: ${response.statusText}`)
-        );
-      }
-      throw new Error(`API request failed: ${response.status.toString()} ${response.statusText}`);
-    }
-    return await response.json();
-  } catch (error) {
-    if (error instanceof TypeError) {
-      const message = error.message.toLowerCase();
-      const isNetworkError = message.includes("fetch") || message.includes("network") || message.includes("failed to fetch");
-      if (isNetworkError) {
-        throw new ConnectionError(ERROR_MESSAGES.CONNECTION_FAILED, error);
-      }
-    }
-    if (error instanceof Error) {
-      throw error;
-    }
-    throw new Error("Unknown error occurred");
-  }
-};
-var buildSpansEndpoint = (request) => {
-  if (!request) {
-    return API_ENDPOINTS.SPANS;
-  }
-  const queryParameters = new URLSearchParams();
-  if (request.limit !== void 0) {
-    queryParameters.set("limit", request.limit.toString());
-  }
-  if (request.pagination_token) {
-    queryParameters.set("pagination_token", request.pagination_token);
-  }
-  for (const [key, value] of Object.entries(request)) {
-    if (value !== void 0 && key !== "limit" && key !== "pagination_token" && value !== null) {
-      queryParameters.set(key, String(value));
-    }
-  }
-  const queryString = queryParameters.toString();
-  return queryString ? `${API_ENDPOINTS.SPANS}?${queryString}` : API_ENDPOINTS.SPANS;
-};
-var buildEventsEndpoint = (request) => {
-  if (!request) {
-    return API_ENDPOINTS.EVENTS;
-  }
-  const basePath = API_ENDPOINTS.EVENTS;
-  const queryParameters = new URLSearchParams();
-  if (request.limit !== void 0) {
-    queryParameters.set("limit", request.limit.toString());
-  }
-  if (request.pagination_token) {
-    queryParameters.set("pagination_token", request.pagination_token);
-  }
-  for (const [key, value] of Object.entries(request)) {
-    if (value !== void 0 && key !== "limit" && key !== "pagination_token" && value !== null) {
-      queryParameters.set(key, String(value));
-    }
-  }
-  const queryString = queryParameters.toString();
-  return queryString ? `${basePath}?${queryString}` : basePath;
-};
-var createApiClient = ({ localstackEndpoint }) => {
-  return {
-    deleteSpans: async (_request) => {
-      return makeRequest({
-        endpoint: API_ENDPOINTS.SPANS,
-        localstackEndpoint,
-        request: {
-          method: "DELETE"
-        }
-      });
-    },
-    getEvents: async (request) => {
-      const endpoint = buildEventsEndpoint(request);
-      return makeRequest({ endpoint, localstackEndpoint });
-    },
-    getIamEvents: async (request) => {
-      const iamEventsRequest = {
-        ...request,
-        event_type: "iam.policy_evaluation"
-      };
-      const endpoint = buildEventsEndpoint(iamEventsRequest);
-      return makeRequest({ endpoint, localstackEndpoint });
-    },
-    getSpans: async (request) => {
-      const endpoint = buildSpansEndpoint(request);
-      return makeRequest({ endpoint, localstackEndpoint });
-    },
-    getStatus: async () => {
-      return makeRequest({
-        endpoint: API_ENDPOINTS.STATUS,
-        localstackEndpoint
-      });
-    }
-  };
-};
-
-// src/context.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
-var AppInspectorContext = (0, import_react5.createContext)(void 0);
-var useAppInspector = () => {
-  const context = (0, import_react5.useContext)(AppInspectorContext);
-  if (!context) {
-    throw new Error("@localstack-studio/ui: components must be used within a <AppInspectorContextProvider>");
-  }
-  return context;
-};
-var AppInspectorContextProvider = (props) => {
-  const api = (0, import_react6.useMemo)(() => {
-    return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
-  }, [props.localstackEndpoint]);
-  const resolveLink = (0, import_react6.useCallback)(
-    (options) => {
-      if (options.to === "settings") {
-        return `${props.routePrefix}/settings`;
-      }
-      if (options.to === "trace-graph") {
-        return `${props.routePrefix}/traces/${options.traceId}`;
-      }
-      return `${props.routePrefix}/spans`;
-    },
-    [props.routePrefix]
-  );
-  const contextValue = (0, import_react6.useMemo)(
-    () => ({
-      linkComponent: props.linkComponent,
-      localstackEndpoint: props.localstackEndpoint,
-      resolveLink
-    }),
-    [props.linkComponent, props.localstackEndpoint, resolveLink]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(AppInspectorContext.Provider, { value: contextValue, children: props.children }) });
-};
-
 // src/hooks/use-local-storage.tsx
-var import_react7 = require("react");
+var import_react5 = require("react");
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = (0, import_react7.useState)(() => {
+  const [storedValue, setStoredValue] = (0, import_react5.useState)(() => {
     try {
       const item = globalThis.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -3441,7 +3281,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = (0, import_react7.useCallback)((value) => {
+  const setValue = (0, import_react5.useCallback)((value) => {
     try {
       setStoredValue(value);
       globalThis.localStorage.setItem(key, JSON.stringify(value));
@@ -3453,7 +3293,7 @@ function useLocalStorage(key, initialValue) {
       console.error(`Error setting localStorage key "${key}":`, error);
     }
   }, [key]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const handleStorageChange = (event) => {
       if (event.key === key && event.newValue !== null) {
         try {
@@ -3472,15 +3312,15 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-status.tsx
-var import_react8 = require("react");
+var import_react6 = require("react");
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = (0, import_react8.useState)(true);
-  const [status, setStatus] = (0, import_react8.useState)();
-  const [error, setError] = (0, import_react8.useState)();
-  const hasFetchedReference = (0, import_react8.useRef)(false);
-  const abortControllerReference = (0, import_react8.useRef)(null);
-  const checkStatus = (0, import_react8.useCallback)(async () => {
+  const [checking, setChecking] = (0, import_react6.useState)(true);
+  const [status, setStatus] = (0, import_react6.useState)();
+  const [error, setError] = (0, import_react6.useState)();
+  const hasFetchedReference = (0, import_react6.useRef)(false);
+  const abortControllerReference = (0, import_react6.useRef)(null);
+  const checkStatus = (0, import_react6.useCallback)(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
     }
@@ -3504,7 +3344,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -3513,191 +3353,16 @@ var useStatus = () => {
   return { checking, checkStatus, error, status };
 };
 
-// src/utils/use-search-param-codec.ts
-var import_react9 = require("react");
-var import_react_router_dom = require("react-router-dom");
-var useSearchParamCodec = (key, codec) => {
-  const [searchParams, setSearchParams] = (0, import_react_router_dom.useSearchParams)();
-  const raw = searchParams.get(key) ?? void 0;
-  const value = (0, import_react9.useMemo)(() => {
-    return codec.decode(raw);
-  }, [raw, codec]);
-  const setValue = (0, import_react9.useCallback)(
-    (next) => {
-      setSearchParams((previous) => {
-        const nextParams = new URLSearchParams(previous);
-        nextParams.set(key, codec.encode(next));
-        return nextParams;
-      });
-    },
-    [key, codec, setSearchParams]
-  );
-  return [value, setValue];
-};
-
-// src/pages/spans-list-page.tsx
-var import_jsx_runtime130 = require("react/jsx-runtime");
-var spansPerPageOptions = [25, 50, 100];
-var SpansListPage = () => {
-  const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react10.useState)();
-  const [loading, setLoading] = (0, import_react10.useState)(false);
-  const hasFetched = (0, import_react10.useRef)(false);
-  const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
-  const mapPageToNextCursor = (0, import_react10.useRef)({});
-  const [page, setPage] = useSearchParamCodec("page", {
-    decode: (raw) => {
-      const defaultPage = 0;
-      if (!raw) {
-        return defaultPage;
-      }
-      const parsed = Number.parseInt(raw, 10);
-      return Number.isNaN(parsed) || parsed < 0 ? defaultPage : parsed;
-    },
-    encode: (value) => value.toString()
-  });
-  const [pageSize, setPageSize] = useSearchParamCodec("pageSize", {
-    decode: (raw) => {
-      const defaultPageSize = 100;
-      if (!raw) {
-        return defaultPageSize;
-      }
-      const parsed = Number.parseInt(raw, 10);
-      return spansPerPageOptions.includes(parsed) ? parsed : defaultPageSize;
-    },
-    encode: (value) => value.toString()
-  });
-  const [spanCount, setSpanCount] = (0, import_react10.useState)(0);
-  const queryOptions = (0, import_react10.useMemo)(() => {
-    return {
-      is_write_operation: filterWriteOperations ? true : void 0,
-      limit: pageSize,
-      pagination_token: mapPageToNextCursor.current[page - 1]
-    };
-  }, [filterWriteOperations, pageSize, page]);
-  const [fetchError, setFetchError] = (0, import_react10.useState)();
-  const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = (0, import_react10.useCallback)(async () => {
-    setLoading(true);
-    try {
-      const response = await api.getSpans(queryOptions);
-      setSpans(response.spans);
-      setSpanCount(response.pagination.total_count);
-      setFetchError(void 0);
-      if (response.pagination.cursor) {
-        mapPageToNextCursor.current[page] = response.pagination.cursor;
-      }
-    } catch (error) {
-      console.error(error);
-      setFetchError(error instanceof Error ? error : new Error("Unknown error", { cause: error }));
-    } finally {
-      setLoading(false);
-    }
-  }, [api, page, queryOptions]);
-  const fetchSpansSync = (0, import_react10.useCallback)(() => {
-    void fetchSpans();
-  }, [fetchSpans]);
-  (0, import_react10.useEffect)(() => {
-    if (hasFetched.current) return;
-    if (status?.status !== "ENABLED") return;
-    hasFetched.current = true;
-    void fetchSpans();
-  }, [fetchSpans, status]);
-  (0, import_react10.useEffect)(() => {
-    if (!hasFetched.current) return;
-    void fetchSpans();
-  }, [fetchSpans]);
-  const navigate = (0, import_react_router_dom2.useNavigate)();
-  const { resolveLink } = useAppInspector();
-  const navigateToSpan = (0, import_react10.useCallback)((span) => {
-    const url = resolveLink({ to: "trace-graph", traceId: span.trace_id });
-    const searchParams = new URLSearchParams({
-      page: String(page),
-      pageSize: String(pageSize),
-      spanId: span.span_id
-    });
-    navigate(`${url}?${searchParams.toString()}`);
-  }, [navigate, resolveLink, page, pageSize]);
-  const clearSpans = (0, import_react10.useCallback)(async () => {
-    setLoading(true);
-    try {
-      await api.deleteSpans();
-      setSpans([]);
-      setFetchError(void 0);
-      await fetchSpans();
-    } catch (error) {
-      console.error("Failed to delete spans:", error);
-      setFetchError(error instanceof Error ? error : new Error("Failed to delete spans", { cause: error }));
-    } finally {
-      setLoading(false);
-    }
-  }, [api, fetchSpans]);
-  const handleRetry = (0, import_react10.useCallback)(() => {
-    void checkStatus();
-  }, [checkStatus]);
-  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-    import_material8.Box,
-    {
-      "data-testid": "spans-list-page",
-      sx: {
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        width: "100%"
-      },
-      children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-        StatusMessage,
-        {
-          error: statusError,
-          onRetry: handleRetry,
-          status
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-        SpansList,
-        {
-          filterWriteOperations,
-          onClearSpans: () => {
-            void clearSpans();
-          },
-          onFilterWriteOperationsChange: (value) => {
-            setFilterWriteOperations(value);
-          },
-          onPageChange: setPage,
-          onPageSizeChange: setPageSize,
-          onRefresh: () => {
-            fetchSpansSync();
-          },
-          onSpanClick: (span) => {
-            navigateToSpan(span);
-          },
-          page,
-          pageSize,
-          spanCount,
-          spans: {
-            data: spans,
-            error: fetchError,
-            loading
-          },
-          spansPerPageOptions
-        }
-      )
-    }
-  );
-};
-
 // src/pages/trace-graph-page.tsx
 var import_icons_material11 = require("@mui/icons-material");
-var import_material21 = require("@mui/material");
+var import_material20 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react23 = require("@xyflow/react");
-var import_react24 = require("react");
-var import_react_router_dom3 = require("react-router-dom");
+var import_react19 = require("@xyflow/react");
+var import_react20 = require("react");
 
 // src/components/event-details/event-details.tsx
-var import_material16 = require("@mui/material");
-var import_react14 = require("react");
+var import_material15 = require("@mui/material");
+var import_react10 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3895,11 +3560,11 @@ var getEventGroupsByType = (events) => {
 
 // src/components/event-details/event-details-header.tsx
 var import_icons_material3 = require("@mui/icons-material");
-var import_material9 = require("@mui/material");
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_material8 = require("@mui/material");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var EventDetailsHeader = ({ event, onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
-    import_material9.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+    import_material8.Box,
     {
       sx: {
         alignItems: "center",
@@ -3910,60 +3575,60 @@ var EventDetailsHeader = ({ event, onClose }) => {
         p: 2
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material9.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material9.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material9.Typography, { color: "text.secondary", variant: "body2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.Typography, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_material8.Typography, { color: "text.secondary", variant: "body2", children: [
             event.service_name,
             " ",
             "-",
             event.operation_name
           ] })
         ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material9.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material3.Close, {}) })
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material8.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material3.Close, {}) })
       ]
     }
   );
 };
 
 // src/components/event-details/event-section.tsx
-var import_material15 = require("@mui/material");
+var import_material14 = require("@mui/material");
 
 // src/components/event-details/event-detail.tsx
 var import_icons_material7 = require("@mui/icons-material");
-var import_material13 = require("@mui/material");
-var import_react12 = require("react");
+var import_material12 = require("@mui/material");
+var import_react8 = require("react");
 
 // src/components/status-icon.tsx
 var import_icons_material4 = require("@mui/icons-material");
-var import_material10 = require("@mui/material");
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_material9 = require("@mui/material");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var StatusIcon = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Cancel, { sx: { color: "red" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.Cancel, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.Error, { sx: { color: "orange" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.Error, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material4.CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_icons_material4.CheckCircle, { sx: { color: "lightgray" } });
     }
   }
 };
 
 // src/components/event-details/iam-event-detail.tsx
 var import_icons_material5 = require("@mui/icons-material");
-var import_material11 = require("@mui/material");
-var import_jsx_runtime133 = require("react/jsx-runtime");
-var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-    import_material11.Typography,
+var import_material10 = require("@mui/material");
+var import_jsx_runtime131 = require("react/jsx-runtime");
+var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_material10.Typography,
     {
       sx: {
         color: "text.secondary",
@@ -3973,8 +3638,8 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime13
       children: label
     }
   ) }),
-  /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-    import_material11.Typography,
+  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_material10.Typography,
     {
       sx: {
         color: "text.primary",
@@ -3989,30 +3654,30 @@ var PermissionIcon = ({ status }) => {
   switch (status) {
     case "explicitly_allowed":
     case "implicitly_allowed": {
-      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.CheckCircle, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material5.CheckCircle, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.Error, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material5.Error, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material5.Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_icons_material5.Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { p: 2 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-      import_material11.Chip,
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { sx: { p: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+      import_material10.Chip,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -4022,13 +3687,13 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
-    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
+    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       DetailRow,
       {
-        content: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-          import_material11.Typography,
+        content: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          import_material10.Typography,
           {
             sx: {
               color: "text.primary"
@@ -4041,11 +3706,11 @@ var IAMEventDetail = ({ event }) => {
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       DetailRow,
       {
-        content: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-          import_material11.Typography,
+        content: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Box, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          import_material10.Typography,
           {
             sx: {
               color: "text.primary",
@@ -4059,20 +3724,20 @@ var IAMEventDetail = ({ event }) => {
         label: "Resources"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Grid, { container: true, spacing: 2, children: [
-        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Grid, { container: true, spacing: 2, children: [
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
         ] }) }),
-        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
         ] }) }),
-        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material11.Box, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Grid, { item: true, xs: 4, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_material10.Box, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material10.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
         ] }) })
       ] })
     ] })
@@ -4081,9 +3746,9 @@ var IAMEventDetail = ({ event }) => {
 
 // src/components/event-details/iam-permission-detail.tsx
 var import_icons_material6 = require("@mui/icons-material");
-var import_material12 = require("@mui/material");
-var import_react11 = require("react");
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_material11 = require("@mui/material");
+var import_react7 = require("react");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
   return {
@@ -4092,8 +3757,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
-  const parsedData = (0, import_react11.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+  const parsedData = (0, import_react7.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -4111,13 +3776,13 @@ var IAMPermissionItem = ({ event }) => {
     return null;
   }
   const { chipColors, parsedIAM } = parsedData;
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { sx: { alignItems: "center", display: "flex" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.IconButton, { onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { sx: { alignItems: "center", display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.IconButton, { onClick: () => {
         setIsOpen(!isOpen);
-      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.KeyboardArrowRight, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-        import_material12.Chip,
+      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material6.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_icons_material6.KeyboardArrowRight, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        import_material11.Chip,
         {
           label: formatPermissionStatus(parsedIAM.permission),
           size: "small",
@@ -4128,19 +3793,19 @@ var IAMPermissionItem = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Box, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Typography, { variant: "body2", children: parsedIAM.principal })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material11.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Typography, { variant: "body2", children: parsedIAM.principal })
     ] }) })
   ] });
 };
-var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material12.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material11.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/event-detail.tsx
-var import_jsx_runtime135 = require("react/jsx-runtime");
-var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-    import_material13.Typography,
+var import_jsx_runtime133 = require("react/jsx-runtime");
+var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Grid, { container: true, spacing: 0, sx: { mb: 1 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Grid, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    import_material12.Typography,
     {
       sx: {
         color: "text.primary",
@@ -4150,8 +3815,8 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
       children: label
     }
   ) }),
-  /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-    import_material13.Typography,
+  /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Grid, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    import_material12.Typography,
     {
       sx: {
         color: "text.primary",
@@ -4163,15 +3828,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react12.useState)(false);
-  const textReference = (0, import_react12.useRef)(null);
-  const parsedMessage = (0, import_react12.useMemo)(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = (0, import_react12.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react8.useState)(false);
+  const textReference = (0, import_react8.useRef)(null);
+  const parsedMessage = (0, import_react8.useMemo)(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = (0, import_react8.useMemo)(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -4184,29 +3849,29 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = (0, import_react12.useMemo)(
+  const hasAdditionalContent = (0, import_react8.useMemo)(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = (0, import_react12.useMemo)(
+  const shouldShowToggle = (0, import_react8.useMemo)(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { sx: { alignItems: "flex-start", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-        import_material13.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { sx: { alignItems: "flex-start", display: "flex" }, children: [
+      Boolean(shouldShowToggle) && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        import_material12.IconButton,
         {
           onClick: () => {
             setIsOpen(!isOpen);
           },
           size: "small",
           sx: { mr: 1, mt: -0.5, p: 0 },
-          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material7.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material7.KeyboardArrowRight, {})
+          children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material7.KeyboardArrowDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_icons_material7.KeyboardArrowRight, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-        import_material13.Typography,
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        import_material12.Typography,
         {
           ref: textReference,
           sx: {
@@ -4223,9 +3888,9 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IAMEventDetail, { event }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DetailRow2, { content: parsedMessage.details, label: "Details:" })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Box, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IAMEventDetail, { event }) : /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DetailRow2, { content: parsedMessage.details, label: "Details:" })
     ] }) })
   ] });
 };
@@ -4254,17 +3919,17 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-        import_material13.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        import_material12.Box,
         {
           sx: {
             alignItems: "left",
             display: "flex",
             mb: 1
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-            import_material13.Typography,
+          children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            import_material12.Typography,
             {
               sx: {
                 alignItems: "left",
@@ -4278,13 +3943,13 @@ var EventDetail = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(IAMPermissionDetail, { events })
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(IAMPermissionDetail, { events })
     ] });
   }
   const eventLevel = getEventLevelFromGroup(type);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
-      import_material13.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+      import_material12.Box,
       {
         sx: {
           alignItems: "left",
@@ -4293,9 +3958,9 @@ var EventDetail = ({
           mb: 1
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(StatusIcon, { errorLevel: eventLevel }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-            import_material13.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(StatusIcon, { errorLevel: eventLevel }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            import_material12.Typography,
             {
               sx: {
                 alignItems: "left",
@@ -4313,14 +3978,14 @@ var EventDetail = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material13.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-      import_material13.Box,
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material12.Box, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      import_material12.Box,
       {
         sx: {
           maxWidth: "100%",
           mb: 1
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EventMessage, { event })
+        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(EventMessage, { event })
       },
       `${event.span_id}-${event.event_id}`
     )) })
@@ -4329,14 +3994,14 @@ var EventDetail = ({
 
 // src/components/event-details/toggle-section.tsx
 var import_icons_material8 = require("@mui/icons-material");
-var import_material14 = require("@mui/material");
-var import_react13 = require("react");
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_material13 = require("@mui/material");
+var import_react9 = require("react");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(initialOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material14.Box, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-      import_material14.Box,
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(initialOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material13.Box, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+      import_material13.Box,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -4345,8 +4010,8 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
           cursor: "pointer",
           mb: 1
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
-          import_material14.Box,
+        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+          import_material13.Box,
           {
             role: "button",
             sx: {
@@ -4355,24 +4020,24 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
               gap: 1
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-              isOpen ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Typography, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+              isOpen ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material8.KeyboardArrowDown, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material8.KeyboardArrowRight, { sx: { color: "text.secondary", height: 20, width: 20 } })
             ]
           }
         )
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Box, { children })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Box, { children })
   ] });
 };
 
 // src/components/event-details/event-section.tsx
-var import_jsx_runtime137 = require("react/jsx-runtime");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var EventSection = ({
   eventGroups,
   headline
-}) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToggleSection, { headline, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material15.Box, { children: [
-  eventGroups.errors && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToggleSection, { headline, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material14.Box, { children: [
+  eventGroups.errors && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     EventDetail,
     {
       displayText: "Error",
@@ -4380,7 +4045,7 @@ var EventSection = ({
       type: "error"
     }
   ),
-  eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  eventGroups.warnings && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     EventDetail,
     {
       displayText: "Warning",
@@ -4388,7 +4053,7 @@ var EventSection = ({
       type: "warning"
     }
   ),
-  eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  eventGroups.permissions && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     EventDetail,
     {
       displayText: "IAM Permission",
@@ -4396,7 +4061,7 @@ var EventSection = ({
       type: "permission"
     }
   ),
-  eventGroups.info && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  eventGroups.info && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     EventDetail,
     {
       displayText: "Info",
@@ -4407,77 +4072,77 @@ var EventSection = ({
 ] }) });
 
 // src/components/event-details/event-details.tsx
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = (0, import_react14.useMemo)(() => {
+  const attributes = (0, import_react10.useMemo)(() => {
     const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
     return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
   }, [selectedEvent?.attributes]);
   if (!selectedEvent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(EventDetailsHeader, { event: selectedEvent, onClose }),
-    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { spacing: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.span_id })
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(EventDetailsHeader, { event: selectedEvent, onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Box, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Stack, { spacing: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.span_id })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.trace_id })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.trace_id })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.operation_name })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.operation_name })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.service_name })
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.service_name })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.resource_name })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
-        Boolean(selectedEvent.region) && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.region })
+        Boolean(selectedEvent.region) && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.region })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Stack, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
         ] }),
-        Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Typography, { variant: "body2", children: [
+        Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Typography, { variant: "body2", children: [
             ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
             " ",
             "ms"
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Stack, { direction: "row", spacing: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-          import_material16.Chip,
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ToggleSection, { headline: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+          import_material15.Chip,
           {
             color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
             label: selectedEvent.status_code === 2 ? "Error" : selectedEvent.status_code === 1 ? "OK" : "Unset",
             size: "small"
           }
         ),
-        Boolean(selectedEvent.status_message) && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: selectedEvent.status_message })
+        Boolean(selectedEvent.status_message) && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: selectedEvent.status_message })
       ] }) }),
-      selectedEvent.events.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+      selectedEvent.events.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
           EventSection,
           {
             eventGroups: getEventGroupsByType(selectedEvent.events),
@@ -4485,10 +4150,10 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           }
         )
       ] }),
-      attributes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Stack, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
+      attributes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Stack, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
           renderKeyValue(key, value)
         ] }, key)) }) })
       ] })
@@ -4497,46 +4162,46 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 };
 function renderKeyValue(key, value) {
   if (typeof value === "string" && (key === "localstack.aws.service.request" || key === "localstack.aws.service.response" || key === "localstack.aws.service.exception")) {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Box, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Box, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
   }
   if (typeof value === "boolean") {
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: value ? "yes" : "no" });
+    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: value ? "yes" : "no" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: value });
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Typography, { variant: "body2", children: value });
 }
 
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
-var import_material20 = require("@mui/material");
-var import_react21 = require("@xyflow/react");
-var import_react22 = require("react");
+var import_material19 = require("@mui/material");
+var import_react17 = require("@xyflow/react");
+var import_react18 = require("react");
 
 // src/components/trace-graph/service-node.tsx
-var import_material18 = require("@mui/material");
+var import_material17 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react16 = require("@xyflow/react");
-var import_react17 = require("react");
+var import_react12 = require("@xyflow/react");
+var import_react13 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material9 = require("@mui/icons-material");
-var import_material17 = require("@mui/material");
-var import_react15 = require("react");
-var import_jsx_runtime139 = require("react/jsx-runtime");
+var import_material16 = require("@mui/material");
+var import_react11 = require("react");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react15.useMemo)(() => {
+  const icon = (0, import_react11.useMemo)(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material9.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Warning, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material9.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Info, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
-  const color = (0, import_react15.useMemo)(() => {
+  const color = (0, import_react11.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4549,8 +4214,8 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_material17.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
-    import_material17.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material16.Tooltip, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    import_material16.Box,
     {
       sx: {
         alignItems: "center",
@@ -4569,17 +4234,17 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
+var ServiceNode = (0, import_react13.memo)(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { sx: { maxWidth: 200 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-      import_material18.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material17.Box, { sx: { maxWidth: 200 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+      import_material17.Box,
       {
         role: "button",
         sx: {
@@ -4599,9 +4264,9 @@ var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react16.Handle, { position: import_react16.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react16.Handle, { position: import_react16.Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react12.Handle, { position: import_react12.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react12.Handle, { position: import_react12.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             ServiceCell,
             {
               height: "32px",
@@ -4614,8 +4279,8 @@ var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-      import_material18.Stack,
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+      import_material17.Stack,
       {
         alignItems: "center",
         direction: "row",
@@ -4625,8 +4290,8 @@ var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
           mt: 0.5
         },
         children: [
-          hasErrors && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-            import_material18.Stack,
+          hasErrors && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+            import_material17.Stack,
             {
               direction: "row",
               spacing: 0.5,
@@ -4634,11 +4299,11 @@ var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
                 flexWrap: "wrap",
                 gap: "2px"
               },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ProblemIndicator, { error }, error.span_id))
+              children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ProblemIndicator, { error }, error.span_id))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-            import_material18.Typography,
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+            import_material17.Typography,
             {
               sx: {
                 fontSize: "0.9rem",
@@ -4660,7 +4325,7 @@ var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react18 = require("@xyflow/react");
+var import_react14 = require("@xyflow/react");
 var generateNodesAndEdges = (event, parentId) => {
   const nodes = [];
   const edges = [];
@@ -4676,8 +4341,8 @@ var generateNodesAndEdges = (event, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react18.Position.Right,
-    targetPosition: import_react18.Position.Left,
+    sourcePosition: import_react14.Position.Right,
+    targetPosition: import_react14.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -4687,7 +4352,7 @@ var generateNodesAndEdges = (event, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react18.MarkerType.Arrow,
+        type: import_react14.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -4754,9 +4419,9 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
-var import_material19 = require("@mui/material");
-var import_react19 = require("@xyflow/react");
-var import_react20 = require("react");
+var import_material18 = require("@mui/material");
+var import_react15 = require("@xyflow/react");
+var import_react16 = require("react");
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -4797,15 +4462,15 @@ function shallow$1(objA, objB) {
 }
 
 // src/components/trace-graph/xyflow/controls.tsx
-var import_jsx_runtime141 = require("react/jsx-runtime");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 var selector = (s) => ({
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = (0, import_react20.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react19.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react19.useReactFlow)();
+var Controls = (0, import_react16.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react15.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react15.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -4815,8 +4480,8 @@ var Controls = (0, import_react20.memo)(() => {
   const onFitViewHandler = () => {
     void fitView();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
-    import_material19.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+    import_material18.Box,
     {
       sx: {
         bottom: 0,
@@ -4829,33 +4494,33 @@ var Controls = (0, import_react20.memo)(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
-          import_material19.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+          import_material18.IconButton,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.Add, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material10.Add, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
-          import_material19.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+          import_material18.IconButton,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.Remove, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material10.Remove, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
-          import_material19.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+          import_material18.IconButton,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material10.FitScreen, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_icons_material10.FitScreen, {})
           }
         )
       ]
@@ -4864,7 +4529,7 @@ var Controls = (0, import_react20.memo)(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 var nodeTypes = {
   service: ServiceNode
 };
@@ -4875,17 +4540,11 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = (0, import_react22.useState)([]);
-  const [edges, setEdges] = (0, import_react22.useState)([]);
-  const [initialViewSet, setInitialViewSet] = (0, import_react22.useState)(false);
-  const { fitView, setCenter } = (0, import_react21.useReactFlow)();
-  const updateSelectedNode = (0, import_react22.useCallback)((nodeId) => {
-    const toSelect = new Set(nodeId ? [nodeId] : []);
-    setNodes((previousNodes) => {
-      return previousNodes.map((node) => ({ ...node, selected: toSelect.has(node.id) }));
-    });
-  }, []);
-  (0, import_react22.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react17.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react18.useState)([]);
+  const [initialViewSet, setInitialViewSet] = (0, import_react18.useState)(false);
+  const { fitView, setCenter } = (0, import_react17.useReactFlow)();
+  (0, import_react18.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -4919,8 +4578,8 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId]);
-  (0, import_react22.useEffect)(() => {
+  }, [spans.data, initialFocusEventId, setNodes]);
+  (0, import_react18.useEffect)(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -4940,21 +4599,12 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  (0, import_react22.useEffect)(() => {
-    if (initialFocusEventId) {
-      updateSelectedNode(initialFocusEventId);
-    }
-  }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = (0, import_react22.useCallback)((_event, node) => {
-    onEventSelect(node.data.event);
-    updateSelectedNode(node.id);
-  }, [onEventSelect, updateSelectedNode]);
-  const theme = (0, import_material20.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [
-    spans.error && /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
-      import_material20.Alert,
+  const theme = (0, import_material19.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
+    spans.error && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+      import_material19.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material20.Button, { onClick: () => {
+        action: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material19.Button, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -4965,8 +4615,8 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
-      import_react21.ReactFlow,
+    /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+      import_react17.ReactFlow,
       {
         "data-testid": "trace-graph",
         defaultViewport: { x: 0, y: 0, zoom: 1 },
@@ -4976,12 +4626,15 @@ var TraceGraph = ({
         minZoom: 0.1,
         nodes,
         nodeTypes,
-        onNodeClick,
+        onNodeClick: (_event, node) => {
+          onEventSelect(node.data.event);
+        },
+        onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Controls, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
-            import_react21.Background,
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Controls, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+            import_react17.Background,
             {
               bgColor: theme.palette.background.paper,
               color: theme.palette.text.disabled
@@ -4994,7 +4647,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-var import_jsx_runtime143 = require("react/jsx-runtime");
+var import_jsx_runtime141 = require("react/jsx-runtime");
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -5012,7 +4665,7 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
     })
   }
 }));
-var StyledDrawer = (0, import_styles.styled)(import_material21.Drawer)(() => ({
+var StyledDrawer = (0, import_styles.styled)(import_material20.Drawer)(() => ({
   "& .MuiDrawer-paper": {
     bottom: 0,
     boxSizing: "border-box",
@@ -5043,8 +4696,8 @@ var TraceGraphView = ({
   viewPortPixelWidth
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
-    import_material21.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
+    import_material20.Box,
     {
       "data-testid": "trace-graph-page",
       sx: {
@@ -5056,14 +4709,14 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_material21.Box, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material21.Button, { onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_material20.Box, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material20.Button, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_icons_material11.ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material21.Box, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_icons_material11.ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material20.Box, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-          import_material21.Paper,
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+          import_material20.Paper,
           {
             sx: {
               display: "flex",
@@ -5072,22 +4725,22 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
               StatusMessage,
               {
                 error: statusError,
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-                import_material21.Box,
+            ) : /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(import_jsx_runtime141.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+                import_material20.Box,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react23.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react19.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -5105,7 +4758,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -5113,15 +4766,12 @@ var TraceGraphView = ({
     }
   );
 };
-var TraceGraphPage = () => {
-  const { traceId } = (0, import_react_router_dom3.useParams)();
-  const [searchParameters] = (0, import_react_router_dom3.useSearchParams)();
-  const spanId = searchParameters.get("spanId");
+var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react24.useState)();
-  const [loading, setLoading] = (0, import_react24.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react24.useState)();
-  const fetchSpans = (0, import_react24.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react20.useState)();
+  const [loading, setLoading] = (0, import_react20.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react20.useState)();
+  const fetchSpans = (0, import_react20.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -5136,14 +4786,14 @@ var TraceGraphPage = () => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react24.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react24.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react24.useState)(0);
+  const [open, setOpen] = (0, import_react20.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react20.useState)();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react20.useState)(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react24.useCallback)(() => {
+  const calculateDrawerWidth = (0, import_react20.useCallback)(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -5151,7 +4801,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -5165,24 +4815,17 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react24.useCallback)((event) => {
+  const handleEventSelect = (0, import_react20.useCallback)((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = (0, import_react24.useCallback)(() => {
+  const handleRetry = (0, import_react20.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigate = (0, import_react_router_dom3.useNavigate)();
-  const { resolveLink } = useAppInspector();
-  const navigateToSpansList = (0, import_react24.useCallback)(() => {
-    const url = resolveLink({ to: "spans-list" });
-    const searchParams = new URLSearchParams({
-      page: searchParameters.get("page") ?? "",
-      pageSize: searchParameters.get("pageSize") ?? ""
-    });
-    navigate(`${url}?${searchParams.toString()}`);
-  }, [navigate, resolveLink, searchParameters]);
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+  const navigateToSpansList = (0, import_react20.useCallback)(() => {
+    onClose?.();
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     TraceGraphView,
     {
       fetchError,
@@ -5206,16 +4849,302 @@ var TraceGraphPage = () => {
   );
 };
 
+// src/pages/spans-list-page.tsx
+var import_jsx_runtime142 = require("react/jsx-runtime");
+var spansPerPageOptions = [25, 50, 100];
+var SpansListPage = () => {
+  const api = useAppInspectorApi();
+  const [spans, setSpans] = (0, import_react21.useState)();
+  const [loading, setLoading] = (0, import_react21.useState)(false);
+  const hasFetched = (0, import_react21.useRef)(false);
+  const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
+  const mapPageToNextCursor = (0, import_react21.useRef)({});
+  const [page, setPage] = (0, import_react21.useState)(0);
+  const [pageSize, setPageSize] = (0, import_react21.useState)(100);
+  const [spanCount, setSpanCount] = (0, import_react21.useState)(0);
+  const queryOptions = (0, import_react21.useMemo)(() => {
+    return {
+      is_write_operation: filterWriteOperations ? true : void 0,
+      limit: pageSize,
+      pagination_token: mapPageToNextCursor.current[page - 1]
+    };
+  }, [filterWriteOperations, pageSize, page]);
+  const [fetchError, setFetchError] = (0, import_react21.useState)();
+  const { checkStatus, error: statusError, status } = useStatus();
+  const fetchSpans = (0, import_react21.useCallback)(async () => {
+    setLoading(true);
+    try {
+      const response = await api.getSpans(queryOptions);
+      setSpans(response.spans);
+      setSpanCount(response.pagination.total_count);
+      setFetchError(void 0);
+      if (response.pagination.cursor) {
+        mapPageToNextCursor.current[page] = response.pagination.cursor;
+      }
+    } catch (error) {
+      console.error(error);
+      setFetchError(error instanceof Error ? error : new Error("Unknown error", { cause: error }));
+    } finally {
+      setLoading(false);
+    }
+  }, [api, page, queryOptions]);
+  const fetchSpansSync = (0, import_react21.useCallback)(() => {
+    void fetchSpans();
+  }, [fetchSpans]);
+  (0, import_react21.useEffect)(() => {
+    if (hasFetched.current) return;
+    if (status?.status !== "ENABLED") return;
+    hasFetched.current = true;
+    void fetchSpans();
+  }, [fetchSpans, status]);
+  (0, import_react21.useEffect)(() => {
+    if (!hasFetched.current) return;
+    void fetchSpans();
+  }, [fetchSpans]);
+  const [selectedTraceId, setSelectedTraceId] = (0, import_react21.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react21.useState)();
+  const navigateToSpan = (0, import_react21.useCallback)((span) => {
+    setSelectedTraceId(span.trace_id);
+    setSelectedSpanId(span.span_id);
+  }, []);
+  const clearSpans = (0, import_react21.useCallback)(async () => {
+    setLoading(true);
+    try {
+      await api.deleteSpans();
+      setSpans([]);
+      setFetchError(void 0);
+      await fetchSpans();
+    } catch (error) {
+      console.error("Failed to delete spans:", error);
+      setFetchError(error instanceof Error ? error : new Error("Failed to delete spans", { cause: error }));
+    } finally {
+      setLoading(false);
+    }
+  }, [api, fetchSpans]);
+  const handleRetry = (0, import_react21.useCallback)(() => {
+    void checkStatus();
+  }, [checkStatus]);
+  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+      import_material21.Box,
+      {
+        "data-testid": "spans-list-page",
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          // Do not consume vertical space if trace graph is open
+          flexGrow: selectedTraceId ? 0 : 1,
+          height: selectedTraceId ? 0 : void 0,
+          // Do not show if trace graph is open
+          visibility: selectedTraceId ? "hidden" : "visible",
+          width: "100%"
+        },
+        children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+          StatusMessage,
+          {
+            error: statusError,
+            onRetry: handleRetry,
+            status
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+          SpansList,
+          {
+            filterWriteOperations,
+            onClearSpans: () => {
+              void clearSpans();
+            },
+            onFilterWriteOperationsChange: (value) => {
+              setFilterWriteOperations(value);
+            },
+            onPageChange: setPage,
+            onPageSizeChange: setPageSize,
+            onRefresh: () => {
+              fetchSpansSync();
+            },
+            onSpanClick: (span) => {
+              navigateToSpan(span);
+            },
+            page,
+            pageSize,
+            spanCount,
+            spans: {
+              data: spans,
+              error: fetchError,
+              loading
+            },
+            spansPerPageOptions
+          }
+        )
+      }
+    ),
+    selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(TraceGraphPage, { onClose: () => {
+      setSelectedTraceId(void 0);
+    }, spanId: selectedSpanId, traceId: selectedTraceId })
+  ] });
+};
+
 // src/routes.ts
 var routes = {
-  APP_INSPECTOR_SPANS_LIST: "spans",
-  APP_INSPECTOR_TRACE_GRAPH: "traces/:traceId"
+  APP_INSPECTOR_SPANS_LIST: "spans"
+};
+
+// src/context.tsx
+var import_react22 = require("react");
+var import_react23 = require("react");
+
+// src/constants/error-messages.ts
+var ERROR_MESSAGES = {
+  APP_INSPECTOR_DISABLED: "App Inspector is currently disabled.",
+  APP_INSPECTOR_NOT_FOUND: "App Inspector extension not found. Please ensure App Inspector is licensed and enabled.",
+  CONNECTION_FAILED: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible."
+};
+
+// src/api/client.ts
+var apiLogger = createScopedLogger("API");
+var makeRequest = async (options) => {
+  const url = getAppInspectorApiUrl(options.localstackEndpoint, options.endpoint);
+  try {
+    apiLogger.info("Making request to:", { options, url });
+    const headers = new Headers(options.request?.headers);
+    headers.set("Content-Type", "application/json");
+    const response = await fetch(url, {
+      ...options.request,
+      headers
+    });
+    if (!response.ok) {
+      if (response.status === 404) {
+        throw new AppInspectorNotFoundError(
+          ERROR_MESSAGES.APP_INSPECTOR_NOT_FOUND,
+          new Error(`404 from ${url}: ${response.statusText}`)
+        );
+      }
+      throw new Error(`API request failed: ${response.status.toString()} ${response.statusText}`);
+    }
+    return await response.json();
+  } catch (error) {
+    if (error instanceof TypeError) {
+      const message = error.message.toLowerCase();
+      const isNetworkError = message.includes("fetch") || message.includes("network") || message.includes("failed to fetch");
+      if (isNetworkError) {
+        throw new ConnectionError(ERROR_MESSAGES.CONNECTION_FAILED, error);
+      }
+    }
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error("Unknown error occurred");
+  }
+};
+var buildSpansEndpoint = (request) => {
+  if (!request) {
+    return API_ENDPOINTS.SPANS;
+  }
+  const queryParameters = new URLSearchParams();
+  if (request.limit !== void 0) {
+    queryParameters.set("limit", request.limit.toString());
+  }
+  if (request.pagination_token) {
+    queryParameters.set("pagination_token", request.pagination_token);
+  }
+  for (const [key, value] of Object.entries(request)) {
+    if (value !== void 0 && key !== "limit" && key !== "pagination_token" && value !== null) {
+      queryParameters.set(key, String(value));
+    }
+  }
+  const queryString = queryParameters.toString();
+  return queryString ? `${API_ENDPOINTS.SPANS}?${queryString}` : API_ENDPOINTS.SPANS;
+};
+var buildEventsEndpoint = (request) => {
+  if (!request) {
+    return API_ENDPOINTS.EVENTS;
+  }
+  const basePath = API_ENDPOINTS.EVENTS;
+  const queryParameters = new URLSearchParams();
+  if (request.limit !== void 0) {
+    queryParameters.set("limit", request.limit.toString());
+  }
+  if (request.pagination_token) {
+    queryParameters.set("pagination_token", request.pagination_token);
+  }
+  for (const [key, value] of Object.entries(request)) {
+    if (value !== void 0 && key !== "limit" && key !== "pagination_token" && value !== null) {
+      queryParameters.set(key, String(value));
+    }
+  }
+  const queryString = queryParameters.toString();
+  return queryString ? `${basePath}?${queryString}` : basePath;
+};
+var createApiClient = ({ localstackEndpoint }) => {
+  return {
+    deleteSpans: async (_request) => {
+      return makeRequest({
+        endpoint: API_ENDPOINTS.SPANS,
+        localstackEndpoint,
+        request: {
+          method: "DELETE"
+        }
+      });
+    },
+    getEvents: async (request) => {
+      const endpoint = buildEventsEndpoint(request);
+      return makeRequest({ endpoint, localstackEndpoint });
+    },
+    getIamEvents: async (request) => {
+      const iamEventsRequest = {
+        ...request,
+        event_type: "iam.policy_evaluation"
+      };
+      const endpoint = buildEventsEndpoint(iamEventsRequest);
+      return makeRequest({ endpoint, localstackEndpoint });
+    },
+    getSpans: async (request) => {
+      const endpoint = buildSpansEndpoint(request);
+      return makeRequest({ endpoint, localstackEndpoint });
+    },
+    getStatus: async () => {
+      return makeRequest({
+        endpoint: API_ENDPOINTS.STATUS,
+        localstackEndpoint
+      });
+    }
+  };
+};
+
+// src/context.tsx
+var import_jsx_runtime143 = require("react/jsx-runtime");
+var AppInspectorContext = (0, import_react22.createContext)(void 0);
+var AppInspectorContextProvider = (props) => {
+  const api = (0, import_react23.useMemo)(() => {
+    return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
+  }, [props.localstackEndpoint]);
+  const resolveLink = (0, import_react23.useCallback)(
+    (options) => {
+      if (options.to === "settings") {
+        return `${props.routePrefix}/settings`;
+      }
+      if (options.to === "trace-graph") {
+        return `${props.routePrefix}/traces/${options.traceId}`;
+      }
+      return `${props.routePrefix}/spans`;
+    },
+    [props.routePrefix]
+  );
+  const contextValue = (0, import_react23.useMemo)(
+    () => ({
+      linkComponent: props.linkComponent,
+      localstackEndpoint: props.localstackEndpoint,
+      resolveLink
+    }),
+    [props.linkComponent, props.localstackEndpoint, resolveLink]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(AppInspectorContext.Provider, { value: contextValue, children: props.children }) });
 };
 
 // src/index.ts
 var pages = {
-  APP_INSPECTOR_SPANS_LIST: [routes.APP_INSPECTOR_SPANS_LIST, SpansListPage],
-  APP_INSPECTOR_TRACE_GRAPH: [routes.APP_INSPECTOR_TRACE_GRAPH, TraceGraphPage]
+  APP_INSPECTOR_SPANS_LIST: [routes.APP_INSPECTOR_SPANS_LIST, SpansListPage]
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {