@localstack/appinspector-ui 1.0.33 → 1.0.35

package/dist/index.js

@@ -1,7 +1,6 @@
 // src/pages/spans-list-page.tsx
-import { Box as Box7 } from "@mui/material";
-import { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState5 } from "react";
-import { useNavigate } from "react-router-dom";
+import { Box as Box19 } from "@mui/material";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef4, useState as useState10 } from "react";
 
 // src/api/use-api.tsx
 import { createContext, useContext } from "react";
@@ -3233,167 +3232,8 @@ var StatusMessage = ({
   return /* @__PURE__ */ jsx128(Fragment4, {});
 };
 
-// src/context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { useCallback as useCallback2, useMemo as useMemo3 } from "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
-import { jsx as jsx129 } from "react/jsx-runtime";
-var AppInspectorContext = createContext2(void 0);
-var useAppInspector = () => {
-  const context = useContext2(AppInspectorContext);
-  if (!context) {
-    throw new Error("@localstack-studio/ui: components must be used within a <AppInspectorContextProvider>");
-  }
-  return context;
-};
-var AppInspectorContextProvider = (props) => {
-  const api = useMemo3(() => {
-    return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
-  }, [props.localstackEndpoint]);
-  const resolveLink = useCallback2(
-    (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 = useMemo3(
-    () => ({
-      linkComponent: props.linkComponent,
-      localstackEndpoint: props.localstackEndpoint,
-      resolveLink
-    }),
-    [props.linkComponent, props.localstackEndpoint, resolveLink]
-  );
-  return /* @__PURE__ */ jsx129(ApiProvider, { api, children: /* @__PURE__ */ jsx129(AppInspectorContext.Provider, { value: contextValue, children: props.children }) });
-};
-
 // src/hooks/use-local-storage.tsx
-import { useCallback as useCallback3, useEffect as useEffect2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
 function useLocalStorage(key, initialValue) {
   const [storedValue, setStoredValue] = useState3(() => {
     try {
@@ -3404,7 +3244,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = useCallback3((value) => {
+  const setValue = useCallback2((value) => {
     try {
       setStoredValue(value);
       globalThis.localStorage.setItem(key, JSON.stringify(value));
@@ -3435,7 +3275,7 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-status.tsx
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 var useStatus = () => {
   const api = useAppInspectorApi();
   const [checking, setChecking] = useState4(true);
@@ -3443,7 +3283,7 @@ var useStatus = () => {
   const [error, setError] = useState4();
   const hasFetchedReference = useRef2(false);
   const abortControllerReference = useRef2(null);
-  const checkStatus = useCallback4(async () => {
+  const checkStatus = useCallback3(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
     }
@@ -3476,191 +3316,16 @@ var useStatus = () => {
   return { checking, checkStatus, error, status };
 };
 
-// src/utils/use-search-param-codec.ts
-import { useCallback as useCallback5, useMemo as useMemo4 } from "react";
-import { useSearchParams } from "react-router-dom";
-var useSearchParamCodec = (key, codec) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const raw = searchParams.get(key) ?? void 0;
-  const value = useMemo4(() => {
-    return codec.decode(raw);
-  }, [raw, codec]);
-  const setValue = useCallback5(
-    (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
-import { jsx as jsx130 } from "react/jsx-runtime";
-var spansPerPageOptions = [25, 50, 100];
-var SpansListPage = () => {
-  const api = useAppInspectorApi();
-  const [spans, setSpans] = useState5();
-  const [loading, setLoading] = useState5(false);
-  const hasFetched = useRef3(false);
-  const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
-  const mapPageToNextCursor = useRef3({});
-  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] = useState5(0);
-  const queryOptions = useMemo5(() => {
-    return {
-      is_write_operation: filterWriteOperations ? true : void 0,
-      limit: pageSize,
-      pagination_token: mapPageToNextCursor.current[page - 1]
-    };
-  }, [filterWriteOperations, pageSize, page]);
-  const [fetchError, setFetchError] = useState5();
-  const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = useCallback6(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 = useCallback6(() => {
-    void fetchSpans();
-  }, [fetchSpans]);
-  useEffect4(() => {
-    if (hasFetched.current) return;
-    if (status?.status !== "ENABLED") return;
-    hasFetched.current = true;
-    void fetchSpans();
-  }, [fetchSpans, status]);
-  useEffect4(() => {
-    if (!hasFetched.current) return;
-    void fetchSpans();
-  }, [fetchSpans]);
-  const navigate = useNavigate();
-  const { resolveLink } = useAppInspector();
-  const navigateToSpan = useCallback6((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 = useCallback6(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 = useCallback6(() => {
-    void checkStatus();
-  }, [checkStatus]);
-  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsx130(
-    Box7,
-    {
-      "data-testid": "spans-list-page",
-      sx: {
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        width: "100%"
-      },
-      children: shouldShowStatusMessage ? /* @__PURE__ */ jsx130(
-        StatusMessage,
-        {
-          error: statusError,
-          onRetry: handleRetry,
-          status
-        }
-      ) : /* @__PURE__ */ jsx130(
-        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
 import { ArrowBack } from "@mui/icons-material";
-import { Box as Box19, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
+import { Box as Box18, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback8, useEffect as useEffect7, useState as useState10 } from "react";
-import { useNavigate as useNavigate2, useParams, useSearchParams as useSearchParams2 } from "react-router-dom";
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState9 } from "react";
 
 // src/components/event-details/event-details.tsx
-import { Box as Box15, Chip as Chip3, Divider as Divider2, Stack as Stack2, Typography as Typography9 } from "@mui/material";
-import { useMemo as useMemo8 } from "react";
+import { Box as Box14, Chip as Chip3, Divider as Divider2, Stack as Stack2, Typography as Typography9 } from "@mui/material";
+import { useMemo as useMemo5 } from "react";
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3858,11 +3523,11 @@ var getEventGroupsByType = (events) => {
 
 // src/components/event-details/event-details-header.tsx
 import { Close } from "@mui/icons-material";
-import { Box as Box8, IconButton, Typography as Typography4 } from "@mui/material";
-import { jsx as jsx131, jsxs as jsxs123 } from "react/jsx-runtime";
+import { Box as Box7, IconButton, Typography as Typography4 } from "@mui/material";
+import { jsx as jsx129, jsxs as jsxs123 } from "react/jsx-runtime";
 var EventDetailsHeader = ({ event, onClose }) => {
   return /* @__PURE__ */ jsxs123(
-    Box8,
+    Box7,
     {
       sx: {
         alignItems: "center",
@@ -3873,8 +3538,8 @@ var EventDetailsHeader = ({ event, onClose }) => {
         p: 2
       },
       children: [
-        /* @__PURE__ */ jsxs123(Box8, { children: [
-          /* @__PURE__ */ jsx131(Typography4, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
+        /* @__PURE__ */ jsxs123(Box7, { children: [
+          /* @__PURE__ */ jsx129(Typography4, { sx: { fontWeight: 600 }, variant: "h6", children: "Event Details" }),
           /* @__PURE__ */ jsxs123(Typography4, { color: "text.secondary", variant: "body2", children: [
             event.service_name,
             " ",
@@ -3882,50 +3547,50 @@ var EventDetailsHeader = ({ event, onClose }) => {
             event.operation_name
           ] })
         ] }),
-        onClose && /* @__PURE__ */ jsx131(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx131(Close, {}) })
+        onClose && /* @__PURE__ */ jsx129(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx129(Close, {}) })
       ]
     }
   );
 };
 
 // src/components/event-details/event-section.tsx
-import { Box as Box14 } from "@mui/material";
+import { Box as Box13 } from "@mui/material";
 
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
-import { Box as Box12, Grid as Grid3, IconButton as IconButton3, Typography as Typography7 } from "@mui/material";
-import { useEffect as useEffect5, useMemo as useMemo7, useRef as useRef4, useState as useState7 } from "react";
+import { Box as Box11, Grid as Grid3, IconButton as IconButton3, Typography as Typography7 } from "@mui/material";
+import { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState6 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
-import { Box as Box9 } from "@mui/material";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { Box as Box8 } from "@mui/material";
+import { jsx as jsx130 } from "react/jsx-runtime";
 var StatusIcon = ({ errorLevel }) => {
   switch (errorLevel) {
     case EventLevel.LevelError: {
-      return /* @__PURE__ */ jsx132(Cancel, { sx: { color: "red" } });
+      return /* @__PURE__ */ jsx130(Cancel, { sx: { color: "red" } });
     }
     case EventLevel.LevelInfo: {
-      return /* @__PURE__ */ jsx132(Info, { sx: { color: "gray" } });
+      return /* @__PURE__ */ jsx130(Info, { sx: { color: "gray" } });
     }
     case EventLevel.LevelPermission: {
-      return /* @__PURE__ */ jsx132(RemoveCircle, { sx: { color: "blue" } });
+      return /* @__PURE__ */ jsx130(RemoveCircle, { sx: { color: "blue" } });
     }
     case EventLevel.LevelWarning: {
-      return /* @__PURE__ */ jsx132(Error2, { sx: { color: "orange" } });
+      return /* @__PURE__ */ jsx130(Error2, { sx: { color: "orange" } });
     }
     default: {
-      return /* @__PURE__ */ jsx132(CheckCircle, { sx: { color: "lightgray" } });
+      return /* @__PURE__ */ jsx130(CheckCircle, { sx: { color: "lightgray" } });
     }
   }
 };
 
 // src/components/event-details/iam-event-detail.tsx
 import { CheckCircle as CheckCircle2, Error as ErrorIcon, Warning } from "@mui/icons-material";
-import { Box as Box10, Chip, Grid as Grid2, Typography as Typography5 } from "@mui/material";
-import { jsx as jsx133, jsxs as jsxs124 } from "react/jsx-runtime";
+import { Box as Box9, Chip, Grid as Grid2, Typography as Typography5 } from "@mui/material";
+import { jsx as jsx131, jsxs as jsxs124 } from "react/jsx-runtime";
 var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ jsx133(Grid2, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx133(
+  /* @__PURE__ */ jsx131(Grid2, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx131(
     Typography5,
     {
       sx: {
@@ -3936,7 +3601,7 @@ var DetailRow = ({ content, label }) => /* @__PURE__ */ jsxs124(Grid2, { contain
       children: label
     }
   ) }),
-  /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx133(
+  /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx131(
     Typography5,
     {
       sx: {
@@ -3952,30 +3617,30 @@ var PermissionIcon = ({ status }) => {
   switch (status) {
     case "explicitly_allowed":
     case "implicitly_allowed": {
-      return /* @__PURE__ */ jsx133(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx131(CheckCircle2, { sx: { color: "success.main", fontSize: "1rem" } });
     }
     case "explicitly_denied": {
-      return /* @__PURE__ */ jsx133(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx131(ErrorIcon, { sx: { color: "error.main", fontSize: "1rem" } });
     }
     case "implicitly_denied": {
-      return /* @__PURE__ */ jsx133(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
+      return /* @__PURE__ */ jsx131(Warning, { sx: { color: "warning.main", fontSize: "1rem" } });
     }
   }
 };
 var IAMEventDetail = ({ event }) => {
   const payloadString = event.attributes?.payload;
   if (!payloadString) {
-    return /* @__PURE__ */ jsx133(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
+    return /* @__PURE__ */ jsx131(Box9, { sx: { p: 2 }, children: /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "No IAM policy evaluation data available" }) });
   }
   const parsedIAM = parseIAMEvent(payloadString);
   if (!parsedIAM) {
-    return /* @__PURE__ */ jsx133(Box10, { sx: { p: 2 }, children: /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
+    return /* @__PURE__ */ jsx131(Box9, { sx: { p: 2 }, children: /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "body2", children: "Failed to parse IAM event data" }) });
   }
-  return /* @__PURE__ */ jsxs124(Box10, { sx: { p: 2 }, children: [
-    /* @__PURE__ */ jsx133(Box10, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsxs124(Box9, { sx: { p: 2 }, children: [
+    /* @__PURE__ */ jsx131(Box9, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx131(
       Chip,
       {
-        icon: /* @__PURE__ */ jsx133(PermissionIcon, { status: parsedIAM.permission }),
+        icon: /* @__PURE__ */ jsx131(PermissionIcon, { status: parsedIAM.permission }),
         label: formatPermissionStatus(parsedIAM.permission),
         size: "small",
         sx: {
@@ -3985,12 +3650,12 @@ var IAMEventDetail = ({ event }) => {
         variant: "outlined"
       }
     ) }),
-    /* @__PURE__ */ jsx133(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
-    /* @__PURE__ */ jsx133(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
-    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx133(
+    /* @__PURE__ */ jsx131(DetailRow, { content: `${parsedIAM.service}:${parsedIAM.operation}`, label: "Operation" }),
+    /* @__PURE__ */ jsx131(DetailRow, { content: parsedIAM.principal, label: "Principal" }),
+    parsedIAM.details.actions && parsedIAM.details.actions.length > 0 && /* @__PURE__ */ jsx131(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx133(Box10, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx133(
+        content: /* @__PURE__ */ jsx131(Box9, { children: parsedIAM.details.actions.map((action) => /* @__PURE__ */ jsx131(
           Typography5,
           {
             sx: {
@@ -4004,10 +3669,10 @@ var IAMEventDetail = ({ event }) => {
         label: "Actions"
       }
     ),
-    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx133(
+    parsedIAM.details.resources && parsedIAM.details.resources.length > 0 && /* @__PURE__ */ jsx131(
       DetailRow,
       {
-        content: /* @__PURE__ */ jsx133(Box10, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx133(
+        content: /* @__PURE__ */ jsx131(Box9, { children: parsedIAM.details.resources.map((resource) => /* @__PURE__ */ jsx131(
           Typography5,
           {
             sx: {
@@ -4022,20 +3687,20 @@ var IAMEventDetail = ({ event }) => {
         label: "Resources"
       }
     ),
-    /* @__PURE__ */ jsxs124(Box10, { sx: { mt: 2 }, children: [
-      /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
+    /* @__PURE__ */ jsxs124(Box9, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600, mb: 1 }, variant: "caption", children: "Policy Evaluation" }),
       /* @__PURE__ */ jsxs124(Grid2, { container: true, spacing: 2, children: [
-        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx133(Typography5, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
-          /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
+        parsedIAM.details.explicitAllows !== void 0 && /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box9, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx131(Typography5, { color: "success.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitAllows }),
+          /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Allows" })
         ] }) }),
-        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx133(Typography5, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
-          /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
+        parsedIAM.details.explicitDenies !== void 0 && /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box9, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx131(Typography5, { color: "error.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.explicitDenies }),
+          /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Explicit Denies" })
         ] }) }),
-        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsx133(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box10, { sx: { textAlign: "center" }, children: [
-          /* @__PURE__ */ jsx133(Typography5, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
-          /* @__PURE__ */ jsx133(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
+        parsedIAM.details.implicitDenies !== void 0 && /* @__PURE__ */ jsx131(Grid2, { item: true, xs: 4, children: /* @__PURE__ */ jsxs124(Box9, { sx: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx131(Typography5, { color: "warning.main", sx: { fontWeight: "bold" }, variant: "h6", children: parsedIAM.details.implicitDenies }),
+          /* @__PURE__ */ jsx131(Typography5, { sx: { fontWeight: 600 }, variant: "caption", children: "Implicit Denies" })
         ] }) })
       ] })
     ] })
@@ -4044,9 +3709,9 @@ var IAMEventDetail = ({ event }) => {
 
 // src/components/event-details/iam-permission-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { Box as Box11, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
-import { useMemo as useMemo6, useState as useState6 } from "react";
-import { jsx as jsx134, jsxs as jsxs125 } from "react/jsx-runtime";
+import { Box as Box10, Chip as Chip2, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
+import { useMemo as useMemo3, useState as useState5 } from "react";
+import { jsx as jsx132, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
   return {
@@ -4055,8 +3720,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = useState6(false);
-  const parsedData = useMemo6(() => {
+  const [isOpen, setIsOpen] = useState5(false);
+  const parsedData = useMemo3(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -4074,12 +3739,12 @@ var IAMPermissionItem = ({ event }) => {
     return null;
   }
   const { chipColors, parsedIAM } = parsedData;
-  return /* @__PURE__ */ jsxs125(Box11, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ jsxs125(Box11, { sx: { alignItems: "center", display: "flex" }, children: [
-      /* @__PURE__ */ jsx134(IconButton2, { onClick: () => {
+  return /* @__PURE__ */ jsxs125(Box10, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxs125(Box10, { sx: { alignItems: "center", display: "flex" }, children: [
+      /* @__PURE__ */ jsx132(IconButton2, { onClick: () => {
         setIsOpen(!isOpen);
-      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ jsx134(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx134(KeyboardArrowRight, {}) }),
-      /* @__PURE__ */ jsx134(
+      }, size: "small", sx: { mr: 1, p: 0 }, children: isOpen ? /* @__PURE__ */ jsx132(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx132(KeyboardArrowRight, {}) }),
+      /* @__PURE__ */ jsx132(
         Chip2,
         {
           label: formatPermissionStatus(parsedIAM.permission),
@@ -4091,18 +3756,18 @@ var IAMPermissionItem = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx134(Box11, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ jsxs125(Box11, { children: [
-      /* @__PURE__ */ jsx134(Typography6, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
-      /* @__PURE__ */ jsx134(Typography6, { variant: "body2", children: parsedIAM.principal })
+    isOpen && /* @__PURE__ */ jsx132(Box10, { sx: { ml: 4, mt: 1 }, children: /* @__PURE__ */ jsxs125(Box10, { children: [
+      /* @__PURE__ */ jsx132(Typography6, { sx: { fontWeight: 600 }, variant: "caption", children: "Principal" }),
+      /* @__PURE__ */ jsx132(Typography6, { variant: "body2", children: parsedIAM.principal })
     ] }) })
   ] });
 };
-var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx134(Box11, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx134(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
+var IAMPermissionDetail = ({ events }) => /* @__PURE__ */ jsx132(Box10, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx132(IAMPermissionItem, { event }, `${event.span_id}-${event.event_id}`)) });
 
 // src/components/event-details/event-detail.tsx
-import { Fragment as Fragment5, jsx as jsx135, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx133, jsxs as jsxs126 } from "react/jsx-runtime";
 var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { container: true, spacing: 0, sx: { mb: 1 }, children: [
-  /* @__PURE__ */ jsx135(Grid3, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx135(
+  /* @__PURE__ */ jsx133(Grid3, { item: true, sx: { pr: 1 }, xs: 3, children: /* @__PURE__ */ jsx133(
     Typography7,
     {
       sx: {
@@ -4113,7 +3778,7 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
       children: label
     }
   ) }),
-  /* @__PURE__ */ jsx135(Grid3, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx135(
+  /* @__PURE__ */ jsx133(Grid3, { item: true, xs: 9, children: typeof content === "string" ? /* @__PURE__ */ jsx133(
     Typography7,
     {
       sx: {
@@ -4126,15 +3791,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState7(false);
-  const [isOverflowing, setIsOverflowing] = useState7(false);
-  const textReference = useRef4(null);
-  const parsedMessage = useMemo7(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = useMemo7(
+  const [isOpen, setIsOpen] = useState6(false);
+  const [isOverflowing, setIsOverflowing] = useState6(false);
+  const textReference = useRef3(null);
+  const parsedMessage = useMemo4(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = useMemo4(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  useEffect5(() => {
+  useEffect4(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -4147,17 +3812,17 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = useMemo7(
+  const hasAdditionalContent = useMemo4(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = useMemo7(
+  const shouldShowToggle = useMemo4(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
-  return /* @__PURE__ */ jsxs126(Box12, { sx: { display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs126(Box12, { sx: { alignItems: "flex-start", display: "flex" }, children: [
-      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsxs126(Box11, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs126(Box11, { sx: { alignItems: "flex-start", display: "flex" }, children: [
+      Boolean(shouldShowToggle) && /* @__PURE__ */ jsx133(
         IconButton3,
         {
           onClick: () => {
@@ -4165,10 +3830,10 @@ var EventMessage = ({ event }) => {
           },
           size: "small",
           sx: { mr: 1, mt: -0.5, p: 0 },
-          children: isOpen ? /* @__PURE__ */ jsx135(KeyboardArrowDown2, {}) : /* @__PURE__ */ jsx135(KeyboardArrowRight2, {})
+          children: isOpen ? /* @__PURE__ */ jsx133(KeyboardArrowDown2, {}) : /* @__PURE__ */ jsx133(KeyboardArrowRight2, {})
         }
       ),
-      /* @__PURE__ */ jsx135(
+      /* @__PURE__ */ jsx133(
         Typography7,
         {
           ref: textReference,
@@ -4186,9 +3851,9 @@ var EventMessage = ({ event }) => {
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx135(Box12, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx135(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment5, { children: [
-      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx135(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
-      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx135(DetailRow2, { content: parsedMessage.details, label: "Details:" })
+    isOpen && /* @__PURE__ */ jsx133(Box11, { sx: { ml: 4, mt: 1 }, children: isIAMPolicyEvent ? /* @__PURE__ */ jsx133(IAMEventDetail, { event }) : /* @__PURE__ */ jsxs126(Fragment5, { children: [
+      Boolean(parsedMessage.message) && /* @__PURE__ */ jsx133(DetailRow2, { content: parsedMessage.message, label: "Message:" }),
+      Boolean(parsedMessage.details) && /* @__PURE__ */ jsx133(DetailRow2, { content: parsedMessage.details, label: "Details:" })
     ] }) })
   ] });
 };
@@ -4217,16 +3882,16 @@ var EventDetail = ({
   type
 }) => {
   if (type === "permission") {
-    return /* @__PURE__ */ jsxs126(Box12, { children: [
-      /* @__PURE__ */ jsx135(
-        Box12,
+    return /* @__PURE__ */ jsxs126(Box11, { children: [
+      /* @__PURE__ */ jsx133(
+        Box11,
         {
           sx: {
             alignItems: "left",
             display: "flex",
             mb: 1
           },
-          children: /* @__PURE__ */ jsx135(
+          children: /* @__PURE__ */ jsx133(
             Typography7,
             {
               sx: {
@@ -4241,13 +3906,13 @@ var EventDetail = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx135(IAMPermissionDetail, { events })
+      /* @__PURE__ */ jsx133(IAMPermissionDetail, { events })
     ] });
   }
   const eventLevel = getEventLevelFromGroup(type);
-  return /* @__PURE__ */ jsxs126(Box12, { children: [
+  return /* @__PURE__ */ jsxs126(Box11, { children: [
     /* @__PURE__ */ jsxs126(
-      Box12,
+      Box11,
       {
         sx: {
           alignItems: "left",
@@ -4256,8 +3921,8 @@ var EventDetail = ({
           mb: 1
         },
         children: [
-          /* @__PURE__ */ jsx135(StatusIcon, { errorLevel: eventLevel }),
-          /* @__PURE__ */ jsx135(
+          /* @__PURE__ */ jsx133(StatusIcon, { errorLevel: eventLevel }),
+          /* @__PURE__ */ jsx133(
             Typography7,
             {
               sx: {
@@ -4276,14 +3941,14 @@ var EventDetail = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx135(Box12, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx135(
-      Box12,
+    /* @__PURE__ */ jsx133(Box11, { sx: { mt: 2 }, children: events.map((event) => /* @__PURE__ */ jsx133(
+      Box11,
       {
         sx: {
           maxWidth: "100%",
           mb: 1
         },
-        children: /* @__PURE__ */ jsx135(EventMessage, { event })
+        children: /* @__PURE__ */ jsx133(EventMessage, { event })
       },
       `${event.span_id}-${event.event_id}`
     )) })
@@ -4292,14 +3957,14 @@ var EventDetail = ({
 
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
-import { Box as Box13, Typography as Typography8 } from "@mui/material";
-import { useState as useState8 } from "react";
-import { jsx as jsx136, jsxs as jsxs127 } from "react/jsx-runtime";
+import { Box as Box12, Typography as Typography8 } from "@mui/material";
+import { useState as useState7 } from "react";
+import { jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState8(initialOpen);
-  return /* @__PURE__ */ jsxs127(Box13, { sx: { mt: 4 }, children: [
-    /* @__PURE__ */ jsx136(
-      Box13,
+  const [isOpen, setIsOpen] = useState7(initialOpen);
+  return /* @__PURE__ */ jsxs127(Box12, { sx: { mt: 4 }, children: [
+    /* @__PURE__ */ jsx134(
+      Box12,
       {
         onClick: () => {
           setIsOpen(!isOpen);
@@ -4309,7 +3974,7 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
           mb: 1
         },
         children: /* @__PURE__ */ jsxs127(
-          Box13,
+          Box12,
           {
             role: "button",
             sx: {
@@ -4318,24 +3983,24 @@ var ToggleSection = ({ children, headline, initialOpen = true }) => {
               gap: 1
             },
             children: [
-              /* @__PURE__ */ jsx136(Typography8, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
-              isOpen ? /* @__PURE__ */ jsx136(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx136(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
+              /* @__PURE__ */ jsx134(Typography8, { sx: { fontWeight: 600 }, variant: "subtitle2", children: headline }),
+              isOpen ? /* @__PURE__ */ jsx134(KeyboardArrowDown3, { sx: { color: "text.secondary", height: 20, width: 20 } }) : /* @__PURE__ */ jsx134(KeyboardArrowRight3, { sx: { color: "text.secondary", height: 20, width: 20 } })
             ]
           }
         )
       }
     ),
-    isOpen && /* @__PURE__ */ jsx136(Box13, { children })
+    isOpen && /* @__PURE__ */ jsx134(Box12, { children })
   ] });
 };
 
 // src/components/event-details/event-section.tsx
-import { jsx as jsx137, jsxs as jsxs128 } from "react/jsx-runtime";
+import { jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
 var EventSection = ({
   eventGroups,
   headline
-}) => /* @__PURE__ */ jsx137(ToggleSection, { headline, children: /* @__PURE__ */ jsxs128(Box14, { children: [
-  eventGroups.errors && /* @__PURE__ */ jsx137(
+}) => /* @__PURE__ */ jsx135(ToggleSection, { headline, children: /* @__PURE__ */ jsxs128(Box13, { children: [
+  eventGroups.errors && /* @__PURE__ */ jsx135(
     EventDetail,
     {
       displayText: "Error",
@@ -4343,7 +4008,7 @@ var EventSection = ({
       type: "error"
     }
   ),
-  eventGroups.warnings && /* @__PURE__ */ jsx137(
+  eventGroups.warnings && /* @__PURE__ */ jsx135(
     EventDetail,
     {
       displayText: "Warning",
@@ -4351,7 +4016,7 @@ var EventSection = ({
       type: "warning"
     }
   ),
-  eventGroups.permissions && /* @__PURE__ */ jsx137(
+  eventGroups.permissions && /* @__PURE__ */ jsx135(
     EventDetail,
     {
       displayText: "IAM Permission",
@@ -4359,7 +4024,7 @@ var EventSection = ({
       type: "permission"
     }
   ),
-  eventGroups.info && /* @__PURE__ */ jsx137(
+  eventGroups.info && /* @__PURE__ */ jsx135(
     EventDetail,
     {
       displayText: "Info",
@@ -4370,55 +4035,55 @@ var EventSection = ({
 ] }) });
 
 // src/components/event-details/event-details.tsx
-import { Fragment as Fragment6, jsx as jsx138, jsxs as jsxs129 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx136, jsxs as jsxs129 } from "react/jsx-runtime";
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = useMemo8(() => {
+  const attributes = useMemo5(() => {
     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__ */ jsx138(Box15, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx138(Typography9, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
+    return /* @__PURE__ */ jsx136(Box14, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx136(Typography9, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
-  return /* @__PURE__ */ jsxs129(Box15, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsx138(EventDetailsHeader, { event: selectedEvent, onClose }),
-    /* @__PURE__ */ jsx138(Box15, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
-      /* @__PURE__ */ jsx138(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
-          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.span_id })
+  return /* @__PURE__ */ jsxs129(Box14, { "data-testid": "event-details", sx: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsx136(EventDetailsHeader, { event: selectedEvent, onClose }),
+    /* @__PURE__ */ jsx136(Box14, { sx: { flexGrow: 1, overflow: "auto", p: 2 }, children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 2, children: [
+      /* @__PURE__ */ jsx136(ToggleSection, { headline: "Basic Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs129(Box14, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Span ID" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.span_id })
         ] }),
-        /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
-          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.trace_id })
+        /* @__PURE__ */ jsxs129(Box14, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Trace ID" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.trace_id })
         ] }),
-        /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
-          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.operation_name })
+        /* @__PURE__ */ jsxs129(Box14, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Operation" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.operation_name })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx138(Divider2, {}),
-      /* @__PURE__ */ jsx138(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
-          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.service_name })
+      /* @__PURE__ */ jsx136(Divider2, {}),
+      /* @__PURE__ */ jsx136(ToggleSection, { headline: "Service Information", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs129(Box14, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Service" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.service_name })
         ] }),
-        /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
-          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.resource_name })
+        /* @__PURE__ */ jsxs129(Box14, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Resource" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.resource_name })
         ] }),
-        Boolean(selectedEvent.region) && /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
-          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.region })
+        Boolean(selectedEvent.region) && /* @__PURE__ */ jsxs129(Box14, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Region" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.region })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx138(Divider2, {}),
-      /* @__PURE__ */ jsx138(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
-          /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
+      /* @__PURE__ */ jsx136(Divider2, {}),
+      /* @__PURE__ */ jsx136(ToggleSection, { headline: "Timing", children: /* @__PURE__ */ jsxs129(Stack2, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs129(Box14, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Start Time" }),
+          /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: unixNanoToDate(selectedEvent.start_time_unix_nano)?.toISOString() })
         ] }),
-        Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
+        Boolean(selectedEvent.end_time_unix_nano) && /* @__PURE__ */ jsxs129(Box14, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: "Duration" }),
           /* @__PURE__ */ jsxs129(Typography9, { variant: "body2", children: [
             ((BigInt(selectedEvent.end_time_unix_nano) - BigInt(selectedEvent.start_time_unix_nano)) / BigInt("1000000")).toString(),
             " ",
@@ -4426,9 +4091,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx138(Divider2, {}),
-      /* @__PURE__ */ jsx138(ToggleSection, { headline: "Status", children: /* @__PURE__ */ jsxs129(Stack2, { direction: "row", spacing: 1, children: [
-        /* @__PURE__ */ jsx138(
+      /* @__PURE__ */ jsx136(Divider2, {}),
+      /* @__PURE__ */ jsx136(ToggleSection, { headline: "Status", children: /* @__PURE__ */ jsxs129(Stack2, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsx136(
           Chip3,
           {
             color: selectedEvent.status_code === 2 ? "error" : selectedEvent.status_code === 1 ? "success" : "default",
@@ -4436,11 +4101,11 @@ var EventDetails = ({ onClose, selectedEvent }) => {
             size: "small"
           }
         ),
-        Boolean(selectedEvent.status_message) && /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: selectedEvent.status_message })
+        Boolean(selectedEvent.status_message) && /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: selectedEvent.status_message })
       ] }) }),
       selectedEvent.events.length > 0 && /* @__PURE__ */ jsxs129(Fragment6, { children: [
-        /* @__PURE__ */ jsx138(Divider2, {}),
-        /* @__PURE__ */ jsx138(
+        /* @__PURE__ */ jsx136(Divider2, {}),
+        /* @__PURE__ */ jsx136(
           EventSection,
           {
             eventGroups: getEventGroupsByType(selectedEvent.events),
@@ -4449,9 +4114,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         )
       ] }),
       attributes.length > 0 && /* @__PURE__ */ jsxs129(Fragment6, { children: [
-        /* @__PURE__ */ jsx138(Divider2, {}),
-        /* @__PURE__ */ jsx138(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx138(Stack2, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ jsxs129(Box15, { children: [
-          /* @__PURE__ */ jsx138(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
+        /* @__PURE__ */ jsx136(Divider2, {}),
+        /* @__PURE__ */ jsx136(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ jsx136(Stack2, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ jsxs129(Box14, { children: [
+          /* @__PURE__ */ jsx136(Typography9, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
           renderKeyValue(key, value)
         ] }, key)) }) })
       ] })
@@ -4460,46 +4125,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__ */ jsx138(Box15, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx138("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
+    return /* @__PURE__ */ jsx136(Box14, { sx: { backgroundColor: (theme) => theme.palette.background.default, borderRadius: 1, p: 1 }, children: /* @__PURE__ */ jsx136("pre", { style: { margin: 0, overflow: "auto" }, children: /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: JSON.stringify(JSON.parse(value), void 0, 2) }) }) });
   }
   if (typeof value === "boolean") {
-    return /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: value ? "yes" : "no" });
+    return /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: value ? "yes" : "no" });
   }
-  return /* @__PURE__ */ jsx138(Typography9, { variant: "body2", children: value });
+  return /* @__PURE__ */ jsx136(Typography9, { variant: "body2", children: value });
 }
 
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4, useTheme as useTheme2 } from "@mui/material";
-import { Background, ReactFlow, useReactFlow as useReactFlow2 } from "@xyflow/react";
-import { useCallback as useCallback7, useEffect as useEffect6, useState as useState9 } from "react";
+import { Background, ReactFlow, useNodesState, useReactFlow as useReactFlow2 } from "@xyflow/react";
+import { useEffect as useEffect5, useState as useState8 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Box as Box17, Stack as Stack3, Typography as Typography10 } from "@mui/material";
+import { Box as Box16, Stack as Stack3, Typography as Typography10 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
 import { memo as memo2 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
-import { Box as Box16, Tooltip as Tooltip4 } from "@mui/material";
-import { useMemo as useMemo9 } from "react";
-import { jsx as jsx139 } from "react/jsx-runtime";
+import { Box as Box15, Tooltip as Tooltip4 } from "@mui/material";
+import { useMemo as useMemo6 } from "react";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var ProblemIndicator = ({ error }) => {
-  const icon = useMemo9(() => {
+  const icon = useMemo6(() => {
     switch (error.level) {
       case "error": {
-        return /* @__PURE__ */ jsx139(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx137(ErrorIcon2, { sx: { color: "#d32f2f", fontSize: "14px" } });
       }
       case "warning": {
-        return /* @__PURE__ */ jsx139(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx137(Warning2, { sx: { color: "#ff9800", fontSize: "14px" } });
       }
       default: {
-        return /* @__PURE__ */ jsx139(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
+        return /* @__PURE__ */ jsx137(Info2, { sx: { color: "#2196f3", fontSize: "14px" } });
       }
     }
   }, [error.level]);
-  const color = useMemo9(() => {
+  const color = useMemo6(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4512,8 +4177,8 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  return /* @__PURE__ */ jsx139(Tooltip4, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx139(
-    Box16,
+  return /* @__PURE__ */ jsx137(Tooltip4, { arrow: true, title: error.message ?? "Issue detected", children: /* @__PURE__ */ jsx137(
+    Box15,
     {
       sx: {
         alignItems: "center",
@@ -4532,7 +4197,7 @@ var ProblemIndicator = ({ error }) => {
 };
 
 // src/components/trace-graph/service-node.tsx
-import { jsx as jsx140, jsxs as jsxs130 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs130 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
   borderColor: "lightgray",
@@ -4540,9 +4205,9 @@ var handleStyle = {
 };
 var ServiceNode = memo2(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ jsxs130(Box17, { sx: { maxWidth: 200 }, children: [
+  return /* @__PURE__ */ jsxs130(Box16, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ jsxs130(
-      Box17,
+      Box16,
       {
         role: "button",
         sx: {
@@ -4562,9 +4227,9 @@ var ServiceNode = memo2(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ jsx140(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ jsx140(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ jsx140(
+          /* @__PURE__ */ jsx138(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ jsx138(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ jsx138(
             ServiceCell,
             {
               height: "32px",
@@ -4588,7 +4253,7 @@ var ServiceNode = memo2(({ data, selected }) => {
           mt: 0.5
         },
         children: [
-          hasErrors && /* @__PURE__ */ jsx140(
+          hasErrors && /* @__PURE__ */ jsx138(
             Stack3,
             {
               direction: "row",
@@ -4597,10 +4262,10 @@ var ServiceNode = memo2(({ data, selected }) => {
                 flexWrap: "wrap",
                 gap: "2px"
               },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx140(ProblemIndicator, { error }, error.span_id))
+              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx138(ProblemIndicator, { error }, error.span_id))
             }
           ),
-          /* @__PURE__ */ jsx140(
+          /* @__PURE__ */ jsx138(
             Typography10,
             {
               sx: {
@@ -4717,7 +4382,7 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 
 // src/components/trace-graph/xyflow/controls.tsx
 import { Add, FitScreen, Remove } from "@mui/icons-material";
-import { Box as Box18, IconButton as IconButton4 } from "@mui/material";
+import { Box as Box17, IconButton as IconButton4 } from "@mui/material";
 import { useReactFlow, useStore } from "@xyflow/react";
 import { memo as memo3 } from "react";
 
@@ -4760,7 +4425,7 @@ function shallow$1(objA, objB) {
 }
 
 // src/components/trace-graph/xyflow/controls.tsx
-import { jsx as jsx141, jsxs as jsxs131 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs131 } from "react/jsx-runtime";
 var selector = (s) => ({
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   maxZoomReached: s.transform[2] >= s.maxZoom,
@@ -4779,7 +4444,7 @@ var Controls = memo3(() => {
     void fitView();
   };
   return /* @__PURE__ */ jsxs131(
-    Box18,
+    Box17,
     {
       sx: {
         bottom: 0,
@@ -4792,33 +4457,33 @@ var Controls = memo3(() => {
         zIndex: 5
       },
       children: [
-        /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx139(
           IconButton4,
           {
             className: "react-flow__controls-zoomin",
             disabled: maxZoomReached,
             onClick: onZoomInHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx141(Add, {})
+            children: /* @__PURE__ */ jsx139(Add, {})
           }
         ),
-        /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx139(
           IconButton4,
           {
             className: "react-flow__controls-zoomout",
             disabled: minZoomReached,
             onClick: onZoomOutHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx141(Remove, {})
+            children: /* @__PURE__ */ jsx139(Remove, {})
           }
         ),
-        /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx139(
           IconButton4,
           {
             className: "react-flow__controls-fitview",
             onClick: onFitViewHandler,
             size: "small",
-            children: /* @__PURE__ */ jsx141(FitScreen, {})
+            children: /* @__PURE__ */ jsx139(FitScreen, {})
           }
         )
       ]
@@ -4827,7 +4492,7 @@ var Controls = memo3(() => {
 });
 
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment7, jsx as jsx142, jsxs as jsxs132 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx140, jsxs as jsxs132 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -4838,17 +4503,11 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = useState9([]);
-  const [edges, setEdges] = useState9([]);
-  const [initialViewSet, setInitialViewSet] = useState9(false);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges] = useState8([]);
+  const [initialViewSet, setInitialViewSet] = useState8(false);
   const { fitView, setCenter } = useReactFlow2();
-  const updateSelectedNode = useCallback7((nodeId) => {
-    const toSelect = new Set(nodeId ? [nodeId] : []);
-    setNodes((previousNodes) => {
-      return previousNodes.map((node) => ({ ...node, selected: toSelect.has(node.id) }));
-    });
-  }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -4882,8 +4541,8 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId]);
-  useEffect6(() => {
+  }, [spans.data, initialFocusEventId, setNodes]);
+  useEffect5(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -4903,21 +4562,12 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  useEffect6(() => {
-    if (initialFocusEventId) {
-      updateSelectedNode(initialFocusEventId);
-    }
-  }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = useCallback7((_event, node) => {
-    onEventSelect(node.data.event);
-    updateSelectedNode(node.id);
-  }, [onEventSelect, updateSelectedNode]);
   const theme = useTheme2();
   return /* @__PURE__ */ jsxs132(Fragment7, { children: [
     spans.error && /* @__PURE__ */ jsxs132(
       Alert3,
       {
-        action: /* @__PURE__ */ jsx142(Button4, { onClick: () => {
+        action: /* @__PURE__ */ jsx140(Button4, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -4939,11 +4589,14 @@ var TraceGraph = ({
         minZoom: 0.1,
         nodes,
         nodeTypes,
-        onNodeClick,
+        onNodeClick: (_event, node) => {
+          onEventSelect(node.data.event);
+        },
+        onNodesChange,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx142(Controls, {}),
-          /* @__PURE__ */ jsx142(
+          /* @__PURE__ */ jsx140(Controls, {}),
+          /* @__PURE__ */ jsx140(
             Background,
             {
               bgColor: theme.palette.background.paper,
@@ -4957,7 +4610,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment8, jsx as jsx143, jsxs as jsxs133 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx141, jsxs as jsxs133 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -5007,7 +4660,7 @@ var TraceGraphView = ({
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   return /* @__PURE__ */ jsxs133(
-    Box19,
+    Box18,
     {
       "data-testid": "trace-graph-page",
       sx: {
@@ -5019,13 +4672,13 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs133(Box19, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx143(Button5, { onClick: () => {
+        /* @__PURE__ */ jsxs133(Box18, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ jsx141(Button5, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx143(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx143(Box19, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ jsx141(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx141(Box18, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ jsx143(
+        /* @__PURE__ */ jsx141(
           Paper2,
           {
             sx: {
@@ -5035,7 +4688,7 @@ var TraceGraphView = ({
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx143(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx141(
               StatusMessage,
               {
                 error: statusError,
@@ -5043,14 +4696,14 @@ var TraceGraphView = ({
                 status
               }
             ) : /* @__PURE__ */ jsxs133(Fragment8, { children: [
-              /* @__PURE__ */ jsx143(Main, { open, children: /* @__PURE__ */ jsx143(
-                Box19,
+              /* @__PURE__ */ jsx141(Main, { open, children: /* @__PURE__ */ jsx141(
+                Box18,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx143(ReactFlowProvider, { children: /* @__PURE__ */ jsx143(
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx141(ReactFlowProvider, { children: /* @__PURE__ */ jsx141(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -5068,7 +4721,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx143(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx143(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ jsx141(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx141(EventDetails, { onClose: handleClose, selectedEvent }) })
             ] })
           }
         )
@@ -5076,15 +4729,12 @@ var TraceGraphView = ({
     }
   );
 };
-var TraceGraphPage = () => {
-  const { traceId } = useParams();
-  const [searchParameters] = useSearchParams2();
-  const spanId = searchParameters.get("spanId");
+var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState10();
-  const [loading, setLoading] = useState10(false);
-  const [fetchError, setFetchError] = useState10();
-  const fetchSpans = useCallback8(async () => {
+  const [spans, setSpans] = useState9();
+  const [loading, setLoading] = useState9(false);
+  const [fetchError, setFetchError] = useState9();
+  const fetchSpans = useCallback4(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -5099,14 +4749,14 @@ var TraceGraphPage = () => {
       setLoading(false);
     }
   }, [api, traceId]);
-  useEffect7(() => {
+  useEffect6(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState10(true);
-  const [selectedEvent, setSelectedEvent] = useState10();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = useState10(0);
+  const [open, setOpen] = useState9(true);
+  const [selectedEvent, setSelectedEvent] = useState9();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = useState9(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = useCallback8(() => {
+  const calculateDrawerWidth = useCallback4(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -5114,7 +4764,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  useEffect7(() => {
+  useEffect6(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -5128,24 +4778,17 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = useCallback8((event) => {
+  const handleEventSelect = useCallback4((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = useCallback8(() => {
+  const handleRetry = useCallback4(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigate = useNavigate2();
-  const { resolveLink } = useAppInspector();
-  const navigateToSpansList = useCallback8(() => {
-    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__ */ jsx143(
+  const navigateToSpansList = useCallback4(() => {
+    onClose?.();
+  }, [onClose]);
+  return /* @__PURE__ */ jsx141(
     TraceGraphView,
     {
       fetchError,
@@ -5169,16 +4812,302 @@ var TraceGraphPage = () => {
   );
 };
 
+// src/pages/spans-list-page.tsx
+import { Fragment as Fragment9, jsx as jsx142, jsxs as jsxs134 } from "react/jsx-runtime";
+var spansPerPageOptions = [25, 50, 100];
+var SpansListPage = () => {
+  const api = useAppInspectorApi();
+  const [spans, setSpans] = useState10();
+  const [loading, setLoading] = useState10(false);
+  const hasFetched = useRef4(false);
+  const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
+  const mapPageToNextCursor = useRef4({});
+  const [page, setPage] = useState10(0);
+  const [pageSize, setPageSize] = useState10(100);
+  const [spanCount, setSpanCount] = useState10(0);
+  const queryOptions = useMemo7(() => {
+    return {
+      is_write_operation: filterWriteOperations ? true : void 0,
+      limit: pageSize,
+      pagination_token: mapPageToNextCursor.current[page - 1]
+    };
+  }, [filterWriteOperations, pageSize, page]);
+  const [fetchError, setFetchError] = useState10();
+  const { checkStatus, error: statusError, status } = useStatus();
+  const fetchSpans = useCallback5(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 = useCallback5(() => {
+    void fetchSpans();
+  }, [fetchSpans]);
+  useEffect7(() => {
+    if (hasFetched.current) return;
+    if (status?.status !== "ENABLED") return;
+    hasFetched.current = true;
+    void fetchSpans();
+  }, [fetchSpans, status]);
+  useEffect7(() => {
+    if (!hasFetched.current) return;
+    void fetchSpans();
+  }, [fetchSpans]);
+  const [selectedTraceId, setSelectedTraceId] = useState10();
+  const [selectedSpanId, setSelectedSpanId] = useState10();
+  const navigateToSpan = useCallback5((span) => {
+    setSelectedTraceId(span.trace_id);
+    setSelectedSpanId(span.span_id);
+  }, []);
+  const clearSpans = useCallback5(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 = useCallback5(() => {
+    void checkStatus();
+  }, [checkStatus]);
+  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
+  return /* @__PURE__ */ jsxs134(Fragment9, { children: [
+    /* @__PURE__ */ jsx142(
+      Box19,
+      {
+        "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__ */ jsx142(
+          StatusMessage,
+          {
+            error: statusError,
+            onRetry: handleRetry,
+            status
+          }
+        ) : /* @__PURE__ */ jsx142(
+          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__ */ jsx142(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
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo8 } from "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
+import { jsx as jsx143 } from "react/jsx-runtime";
+var AppInspectorContext = createContext2(void 0);
+var AppInspectorContextProvider = (props) => {
+  const api = useMemo8(() => {
+    return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
+  }, [props.localstackEndpoint]);
+  const resolveLink = useCallback6(
+    (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 = useMemo8(
+    () => ({
+      linkComponent: props.linkComponent,
+      localstackEndpoint: props.localstackEndpoint,
+      resolveLink
+    }),
+    [props.linkComponent, props.localstackEndpoint, resolveLink]
+  );
+  return /* @__PURE__ */ jsx143(ApiProvider, { api, children: /* @__PURE__ */ jsx143(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]
 };
 export {
   AppInspectorContextProvider,