@localstack/appinspector-ui 1.0.133 → 1.0.135

package/dist/index.js

@@ -2422,7 +2422,7 @@ var init_event_streams = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box20 } from "@mui/material";
-import { useCallback as useCallback12, useEffect as useEffect22, useRef as useRef16, useState as useState18 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect22, useRef as useRef16, useState as useState18 } from "react";
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -2586,7 +2586,7 @@ var EmulatorVersionBanner = ({
 import { Alert as Alert2, Box as Box6, Button as Button3 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
-import { DeleteForeverOutlined, PauseOutlined, PlayArrowOutlined } from "@mui/icons-material";
+import { DeleteForeverOutlined } from "@mui/icons-material";
 import {
   Box as Box5,
   Button as Button2,
@@ -15562,14 +15562,9 @@ var newSpanBackgroundColor = {
 var LABEL_BEGINNING_OF_STREAM = "This is the beginning of the stream";
 var LABEL_END_OF_STREAM = "This is the end of the stream";
 var LABEL_NO_SPANS = "There are no operations";
-var LABEL_LOAD_OLDER = "Load older operations";
-var LABEL_LOAD_NEWER = "Load newer operations";
 var STICK_TO_EDGE_THRESHOLD_PX = 4;
 var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127("span", { children: label }) }) });
-var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsxs121(TableCell, { colSpan, sx: { textAlign: "center" }, children: [
-  !fetching && /* @__PURE__ */ jsx127(Button2, { onClick: onFetch, sx: { my: 1 }, children: label }),
-  fetching && /* @__PURE__ */ jsx127(CircularProgress, { size: 24, sx: { m: 2 } })
-] }) });
+var LoadingRow = ({ colSpan }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 24, sx: { m: 2 } }) }) });
 var SpansDataGridRow = memo9(
   ({ isNew, onSpanClick, row }) => {
     const theme = useTheme2();
@@ -15636,14 +15631,10 @@ var SpansDataGrid = ({
   hasMoreForward,
   licenseLimit,
   onClearSpans,
-  onFetchBackward,
-  onFetchForward,
   onOrderChange,
   onSpanClick,
-  onToggleStream,
   order: order2,
   spans,
-  streamPaused,
   systemLimit,
   totalCount,
   warningCount
@@ -15811,21 +15802,6 @@ var SpansDataGrid = ({
         ) })
       ] }),
       /* @__PURE__ */ jsx127(Box5, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx127(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ jsx127(
-            Button2,
-            {
-              onClick: onToggleStream,
-              startIcon: streamPaused ? /* @__PURE__ */ jsx127(PlayArrowOutlined, {}) : /* @__PURE__ */ jsx127(PauseOutlined, {}),
-              variant: "text",
-              children: streamPaused ? "Resume Stream" : "Pause Stream"
-            }
-          ),
-          label: ""
-        }
-      ),
       /* @__PURE__ */ jsx127(
         FormControlLabel,
         {
@@ -15888,7 +15864,7 @@ var SpansDataGrid = ({
                 (spans === void 0 || clearingSpans) && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
                 !clearingSpans && spans?.length === 0 && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
                 !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs121(Fragment5, { children: [
-                  hasRows && hasMoreForward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
                   hasRows && paddingTop > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
@@ -15897,12 +15873,12 @@ var SpansDataGrid = ({
                     return /* @__PURE__ */ jsx127(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
                   hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
                 !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs121(Fragment5, { children: [
                   hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
                   hasRows && paddingTop > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
@@ -15910,7 +15886,7 @@ var SpansDataGrid = ({
                     return /* @__PURE__ */ jsx127(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
                   hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreForward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
               ] })
@@ -15949,14 +15925,10 @@ var SpansList = (props) => {
         hasMoreForward: props.hasMoreForward,
         licenseLimit: props.licenseLimit,
         onClearSpans: props.onClearSpans,
-        onFetchBackward: props.onFetchBackward,
-        onFetchForward: props.onFetchForward,
         onOrderChange: props.onOrderChange,
         onSpanClick: props.onSpanClick,
-        onToggleStream: props.onToggleStream,
         order: props.order,
         spans: props.spans,
-        streamPaused: props.streamPaused,
         systemLimit: props.systemLimit,
         totalCount: props.totalCount,
         warningCount: props.warningCount
@@ -15971,11 +15943,10 @@ import { Alert as Alert3, AlertTitle, Box as Box7, Button as Button4, CircularPr
 import { useState as useState5 } from "react";
 import { Fragment as Fragment6, jsx as jsx129, jsxs as jsxs123 } from "react/jsx-runtime";
 var StatusMessage = ({
-  error,
   localstackVersion,
   onEnable,
   onRetry,
-  status
+  phase
 }) => {
   const [enabling, setEnabling] = useState5(false);
   const [enableError, setEnableError] = useState5();
@@ -15991,8 +15962,23 @@ var StatusMessage = ({
       setEnabling(false);
     }
   };
-  const isBelowMinimum = localstackVersion !== void 0 && checkEmulatorVersion(localstackVersion) === "below-minimum";
-  if (isBelowMinimum || error instanceof AppInspectorNotFoundError) {
+  if (phase === "CHECKING_STATUS" || phase === "CONNECTING_WS") {
+    return /* @__PURE__ */ jsx129(
+      Box7,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ jsx129(CircularProgress2, { size: 32 })
+      }
+    );
+  }
+  if (phase === "INCOMPATIBLE") {
     return /* @__PURE__ */ jsx129(
       Box7,
       {
@@ -16012,7 +15998,7 @@ var StatusMessage = ({
             sx: { maxWidth: 600, width: "100%" },
             children: [
               /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
-              /* @__PURE__ */ jsx129(Typography5, { sx: { mb: 2 }, variant: "body2", children: isBelowMinimum ? `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. You are running version ${localstackVersion}. Please update LocalStack.` : `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. Please update LocalStack.` }),
+              /* @__PURE__ */ jsx129(Typography5, { sx: { mb: 2 }, variant: "body2", children: localstackVersion === void 0 ? `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. Please update LocalStack.` : `App Inspector requires LocalStack ${MINIMUM_EMULATOR_VERSION} or later. You are running version ${localstackVersion}. Please update LocalStack.` }),
               /* @__PURE__ */ jsx129(Typography5, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ jsx129("strong", { children: "Update LocalStack:" }) }),
               /* @__PURE__ */ jsx129(
                 Box7,
@@ -16027,11 +16013,10 @@ var StatusMessage = ({
                   children: "localstack update docker-images"
                 }
               ),
-              /* @__PURE__ */ jsx129(Box7, { sx: { display: "flex", gap: 1, mt: 2 }, children: onRetry && /* @__PURE__ */ jsx129(
+              onRetry && /* @__PURE__ */ jsx129(Box7, { sx: { display: "flex", gap: 1, mt: 2 }, children: /* @__PURE__ */ jsx129(
                 Button4,
                 {
                   "aria-label": "Check App Inspector status again",
-                  disabled: enabling,
                   onClick: onRetry,
                   variant: "outlined",
                   children: "Check Again"
@@ -16043,7 +16028,7 @@ var StatusMessage = ({
       }
     );
   }
-  if (error instanceof ConnectionError) {
+  if (phase === "UNREACHABLE") {
     return /* @__PURE__ */ jsx129(
       Box7,
       {
@@ -16105,7 +16090,7 @@ var StatusMessage = ({
       }
     );
   }
-  if (error instanceof AppInspectorDisabledError || status?.status === "DISABLED") {
+  if (phase === "DISABLED") {
     return /* @__PURE__ */ jsx129(
       Box7,
       {
@@ -16160,102 +16145,99 @@ var StatusMessage = ({
       }
     );
   }
-  if (error) {
-    return /* @__PURE__ */ jsx129(
-      Box7,
-      {
-        sx: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column",
-          gap: 2,
-          justifyContent: "center",
-          p: 4
-        },
-        children: /* @__PURE__ */ jsxs123(
-          Alert3,
-          {
-            icon: /* @__PURE__ */ jsx129(ErrorOutline, { fontSize: "large" }),
-            severity: "error",
-            sx: { maxWidth: 600, width: "100%" },
-            children: [
-              /* @__PURE__ */ jsx129(AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
-              /* @__PURE__ */ jsx129(Typography5, { sx: { mb: 2 }, variant: "body2", children: error.message }),
-              onRetry && /* @__PURE__ */ jsx129(Box7, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ jsx129(
-                Button4,
-                {
-                  "aria-label": "Retry operation",
-                  onClick: onRetry,
-                  variant: "outlined",
-                  children: "Retry"
-                }
-              ) })
-            ]
-          }
-        )
-      }
-    );
-  }
   return /* @__PURE__ */ jsx129(Fragment6, {});
 };
 
 // src/hooks/status-provider.tsx
-import { createContext as createContext8, useCallback as useCallback4, useContext as useContext14, useMemo as useMemo5 } from "react";
+import { createContext as createContext8, useContext as useContext14 } from "react";
 
-// src/hooks/use-status.tsx
+// src/hooks/use-connection-state-machine.ts
 import { useCallback as useCallback3, useEffect as useEffect12, useRef as useRef7, useState as useState6 } from "react";
-var useStatus = () => {
+var POLL_INTERVAL_MS = 5e3;
+function useConnectionStateMachine() {
   const api = useAppInspectorApi();
+  const [phase, setPhase] = useState6("CHECKING_STATUS");
   const [checking, setChecking] = useState6(true);
   const [status, setStatus] = useState6();
-  const [error, setError] = useState6();
-  const hasFetchedReference = useRef7(false);
-  const abortControllerReference = useRef7(null);
-  const checkStatus = useCallback3(async () => {
-    if (abortControllerReference.current !== null) {
-      abortControllerReference.current.abort();
+  const [statusError, setStatusError] = useState6();
+  const abortControllerRef = useRef7(null);
+  const dispatchStatus = useCallback3((result, error) => {
+    if (result === void 0) {
+      setStatus(void 0);
+      setStatusError(error);
+      setPhase(error instanceof AppInspectorNotFoundError ? "INCOMPATIBLE" : "UNREACHABLE");
+      return;
+    }
+    setStatus(result);
+    setStatusError(void 0);
+    if (checkEmulatorVersion(result.localstackVersion) === "below-minimum") {
+      setPhase("INCOMPATIBLE");
+      return;
+    }
+    setPhase(result.status === "ENABLED" ? "CONNECTING_WS" : "DISABLED");
+  }, []);
+  const runCheck = useCallback3(async () => {
+    if (abortControllerRef.current !== null) {
+      abortControllerRef.current.abort();
     }
     const abortController = new AbortController();
-    abortControllerReference.current = abortController;
+    abortControllerRef.current = abortController;
     setChecking(true);
     try {
-      const response = await api.getStatus();
+      const result = await api.getStatus();
       if (!abortController.signal.aborted) {
-        setStatus(response);
-        setError(void 0);
+        dispatchStatus(result);
       }
-    } catch (error_) {
+    } catch (error) {
       if (!abortController.signal.aborted) {
-        setError(error_ instanceof Error ? error_ : new Error("Unknown error"));
-        setStatus(void 0);
+        dispatchStatus(void 0, error instanceof Error ? error : new Error("Unknown error"));
       }
     } finally {
       if (!abortController.signal.aborted) {
         setChecking(false);
       }
     }
-  }, [api]);
+  }, [api, dispatchStatus]);
   useEffect12(() => {
-    if (!hasFetchedReference.current) {
-      hasFetchedReference.current = true;
-      void checkStatus();
-    }
-  }, [checkStatus]);
-  return { checking, checkStatus, error, status };
-};
+    void runCheck();
+  }, [runCheck]);
+  useEffect12(() => {
+    if (phase !== "UNREACHABLE" && phase !== "DISABLED") return;
+    const intervalId = globalThis.setInterval(() => {
+      void runCheck();
+    }, POLL_INTERVAL_MS);
+    return () => {
+      globalThis.clearInterval(intervalId);
+    };
+  }, [phase, runCheck]);
+  const checkStatus = useCallback3(() => {
+    void runCheck();
+  }, [runCheck]);
+  const onWsOpen = useCallback3(() => {
+    setPhase("LIVE");
+  }, []);
+  const onWsClose = useCallback3(() => {
+    setPhase("CHECKING_STATUS");
+    void runCheck();
+  }, [runCheck]);
+  const wsEnabled = phase === "CONNECTING_WS" || phase === "LIVE";
+  return {
+    checking,
+    checkStatus,
+    onWsClose,
+    onWsOpen,
+    phase,
+    status,
+    statusError,
+    wsEnabled
+  };
+}
 
 // src/hooks/status-provider.tsx
 import { jsx as jsx130 } from "react/jsx-runtime";
 var AppInspectorStatusContext = createContext8(void 0);
 var StatusProvider = ({ children }) => {
-  const { checking, checkStatus, error, status } = useStatus();
-  const reportDisabled = useCallback4(() => {
-    void checkStatus();
-  }, [checkStatus]);
-  const value = useMemo5(
-    () => ({ checking, checkStatus, reportDisabled, status, statusError: error }),
-    [checking, checkStatus, reportDisabled, status, error]
-  );
+  const value = useConnectionStateMachine();
   return /* @__PURE__ */ jsx130(AppInspectorStatusContext.Provider, { value, children });
 };
 var useAppInspectorStatus = () => {
@@ -16267,7 +16249,7 @@ var useAppInspectorStatus = () => {
 };
 
 // src/hooks/use-local-storage.tsx
-import { useCallback as useCallback5, useEffect as useEffect13, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect13, useState as useState7 } from "react";
 function useLocalStorage(key, initialValue) {
   const [storedValue, setStoredValue] = useState7(() => {
     try {
@@ -16278,7 +16260,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = useCallback5((value) => {
+  const setValue = useCallback4((value) => {
     try {
       setStoredValue((previousState) => {
         const next = typeof value === "function" ? value(previousState) : value;
@@ -16312,7 +16294,7 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-spans.ts
-import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef10, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef10, useState as useState9 } from "react";
 
 // src/utils/pagination-buffer.ts
 var insertSorted = (array, item, compareFunction, hint = "back") => {
@@ -16493,7 +16475,7 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback7, useEffect as useEffect15, useRef as useRef9, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef9, useState as useState8 } from "react";
 
 // src/config.ts
 var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
@@ -16523,7 +16505,7 @@ var LOCALSTACK_INFO_PATH = "/_localstack/info";
 
 // src/context.tsx
 import { createContext as createContext9, useContext as useContext15 } from "react";
-import { useCallback as useCallback6, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo5 } from "react";
 
 // src/api/client.ts
 var import_semver2 = __toESM(require_semver2(), 1);
@@ -18689,11 +18671,11 @@ var AppInspectorAnalyticsBoundary = ({ children }) => {
   return /* @__PURE__ */ jsx131(Fragment7, { children });
 };
 var AppInspectorContextProvider = (props) => {
-  const api = useMemo6(
+  const api = useMemo5(
     () => createApiClient({ localstackEndpoint: props.localstackEndpoint }),
     [props.localstackEndpoint]
   );
-  const resolveLink = useCallback6(
+  const resolveLink = useCallback5(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -18705,11 +18687,11 @@ var AppInspectorContextProvider = (props) => {
     },
     [props.routePrefix]
   );
-  const deploymentContainer = useMemo6(
+  const deploymentContainer = useMemo5(
     () => props.deploymentContainer ?? { source: "web" },
     [props.deploymentContainer]
   );
-  const contextValue = useMemo6(
+  const contextValue = useMemo5(
     () => ({
       deploymentContainer,
       linkComponent: props.linkComponent,
@@ -18723,35 +18705,45 @@ var AppInspectorContextProvider = (props) => {
 
 // src/hooks/use-spans-ws.tsx
 function useSpansWebSocket(options) {
-  const { onMessage } = options;
+  const { enabled, onClose, onMessage, onOpen } = options;
   const onMessageRef = useRef9(onMessage);
+  const onOpenRef = useRef9(onOpen);
+  const onCloseRef = useRef9(onClose);
   useEffect15(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
+  useEffect15(() => {
+    onOpenRef.current = onOpen;
+  }, [onOpen]);
+  useEffect15(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
   const [connected, setConnected] = useState8(false);
   const wsRef = useRef9(void 0);
-  const reconnectRef = useRef9(void 0);
   const { localstackEndpoint } = useAppInspector();
-  const connect = useCallback7(() => {
+  const connect = useCallback6(() => {
     if (wsRef.current !== void 0) return;
     const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
     url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
     const ws = new WebSocket(url);
     wsRef.current = ws;
     ws.addEventListener("open", () => {
+      if (wsRef.current !== ws) return;
       setConnected(true);
+      onOpenRef.current();
     });
     ws.addEventListener("message", () => {
+      if (wsRef.current !== ws) return;
       onMessageRef.current();
     });
     ws.addEventListener("close", () => {
+      if (wsRef.current !== ws) return;
       setConnected(false);
       wsRef.current = void 0;
-      reconnectRef.current = globalThis.setTimeout(() => {
-        connect();
-      }, 2e3);
+      onCloseRef.current();
     });
     ws.addEventListener("error", () => {
+      if (wsRef.current !== ws) return;
       try {
         ws.close();
       } catch {
@@ -18759,26 +18751,34 @@ function useSpansWebSocket(options) {
     });
   }, [localstackEndpoint]);
   useEffect15(() => {
+    if (!enabled) {
+      if (wsRef.current !== void 0) {
+        wsRef.current.close();
+        wsRef.current = void 0;
+        setConnected(false);
+      }
+      return;
+    }
     connect();
     return () => {
-      if (reconnectRef.current !== void 0) clearTimeout(reconnectRef.current);
       if (wsRef.current !== void 0) {
         try {
           wsRef.current.close();
         } catch {
         }
         wsRef.current = void 0;
+        setConnected(false);
       }
     };
-  }, [connect]);
+  }, [enabled, connect]);
   return { connected };
 }
 
 // src/hooks/use-spans.ts
-var PAGE_SIZE = 30;
+var PAGE_SIZE = 100;
 var useSpans = () => {
   const api = useAppInspectorApi();
-  const { reportDisabled } = useAppInspectorStatus();
+  const { onWsClose, onWsOpen, wsEnabled } = useAppInspectorStatus();
   const [spans, setSpans] = useState9();
   const [fetchError, setFetchError] = useState9();
   const [fetchingForward, setFetchingForward] = useState9(false);
@@ -18829,17 +18829,17 @@ var useSpans = () => {
   const [warningCount, setWarningCount] = useState9();
   const [hasMoreBackward, setHasMoreBackward] = useState9();
   const [hasMoreForward, setHasMoreForward] = useState9();
-  const fetchForward = useCallback8(() => {
+  const fetchForward = useCallback7(() => {
     void paginationBufferRef.current.fetchForward();
   }, []);
-  const fetchBackward = useCallback8(() => {
+  const fetchBackward = useCallback7(() => {
     void paginationBufferRef.current.fetchBackward();
   }, []);
   useEffect16(() => {
     fetchForward();
   }, [fetchForward]);
   const [clearingSpans, setClearingSpans] = useState9(false);
-  const clearSpans = useCallback8(async () => {
+  const clearSpans = useCallback7(async () => {
     if (clearingSpans) {
       return;
     }
@@ -18856,37 +18856,35 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [clearingSpans, api]);
-  const [streamPaused, setStreamPaused] = useState9(false);
-  const toggleStream = useCallback8(() => {
-    setStreamPaused((previous) => !previous);
-  }, []);
   useEffect16(() => {
-    if (hasMoreForward === true && !fetchingForward && !streamPaused) {
+    if (hasMoreForward === true && !fetchingForward) {
       void paginationBufferRef.current.fetchForward();
     }
-  }, [hasMoreForward, fetchingForward, streamPaused]);
+  }, [hasMoreForward, fetchingForward]);
+  useEffect16(() => {
+    if (hasMoreBackward === true && !fetchingBackward && !fetchingForward) {
+      void paginationBufferRef.current.fetchBackward();
+    }
+  }, [hasMoreBackward, fetchingBackward, fetchingForward]);
   useSpansWebSocket({
+    enabled: wsEnabled,
+    onClose: onWsClose,
     onMessage: () => {
       if (clearingSpans) {
         return;
       }
       if (!hasMoreForward) {
-        if (streamPaused) {
-          paginationBufferRef.current.checkIfThereAreMoreItemsForward();
-        } else {
-          void paginationBufferRef.current.fetchForward();
-        }
+        void paginationBufferRef.current.fetchForward();
       }
+    },
+    onOpen: () => {
+      onWsOpen();
+      fetchForward();
     }
   });
-  const clearFetchError = useCallback8(() => {
+  const clearFetchError = useCallback7(() => {
     setFetchError(void 0);
   }, []);
-  useEffect16(() => {
-    if (fetchError instanceof AppInspectorDisabledError || fetchError instanceof ConnectionError) {
-      reportDisabled();
-    }
-  }, [fetchError, reportDisabled]);
   return {
     clearFetchError,
     clearingSpans,
@@ -18901,9 +18899,7 @@ var useSpans = () => {
     hasMoreForward,
     licenseLimit,
     spans,
-    streamPaused,
     systemLimit,
-    toggleStream,
     totalCount,
     warningCount
   };
@@ -18914,12 +18910,12 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box19, Button as Button6, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef15, useState as useState17 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect21, useRef as useRef15, useState as useState17 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Close as Close2 } from "@mui/icons-material";
 import { Alert as Alert4, Box as Box16, Chip as Chip3, Divider as Divider4, FormControlLabel as FormControlLabel2, IconButton as IconButton4, Stack as Stack3, Switch, Typography as Typography11 } from "@mui/material";
-import { useMemo as useMemo11, useState as useState15 } from "react";
+import { useMemo as useMemo10, useState as useState15 } from "react";
 
 // src/utils/event-utils.ts
 var iamEventParser = (eventName, attributes) => {
@@ -19032,11 +19028,11 @@ var getEventGroupsByType = (events) => {
 // src/components/event-details/copy-button.tsx
 import { Check, ContentCopy } from "@mui/icons-material";
 import { IconButton as IconButton2, Tooltip as Tooltip5 } from "@mui/material";
-import { useCallback as useCallback9, useState as useState10 } from "react";
+import { useCallback as useCallback8, useState as useState10 } from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
 var CopyButton = ({ value }) => {
   const [copied, setCopied] = useState10(false);
-  const handleCopy = useCallback9(() => {
+  const handleCopy = useCallback8(() => {
     const text2 = typeof value === "string" ? value : JSON.stringify(value, void 0, 2);
     void navigator.clipboard.writeText(text2).then(() => {
       setCopied(true);
@@ -19060,7 +19056,7 @@ var CopyButton = ({ value }) => {
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
 import { Box as Box13, IconButton as IconButton3, Typography as Typography8 } from "@mui/material";
-import { useEffect as useEffect18, useMemo as useMemo9, useRef as useRef12, useState as useState12 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo8, useRef as useRef12, useState as useState12 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel as Cancel2, CheckCircle, Error as Error3, Info, RemoveCircle } from "@mui/icons-material";
@@ -19169,7 +19165,7 @@ var IAMEventDetail = ({ event }) => {
 
 // src/components/event-details/iam-permission-detail.tsx
 import { Box as Box10, Chip as Chip2, Stack, Typography as Typography7 } from "@mui/material";
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo6 } from "react";
 import { jsx as jsx135, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColor = (isAllowed, spanStatusCode) => {
   if (isAllowed) return "success.main";
@@ -19177,7 +19173,7 @@ var getChipColor = (isAllowed, spanStatusCode) => {
   return "warning.main";
 };
 var IAMPermissionItem = ({ event, spanStatusCode }) => {
-  const parsedData = useMemo7(() => {
+  const parsedData = useMemo6(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) return;
     const parsedIAM2 = parseIAMEvent(payloadString);
@@ -19226,7 +19222,7 @@ import { Box as Box12, useTheme as useTheme3 } from "@mui/material";
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
 import { jsx as jsx136, jsxs as jsxs126, Fragment as Fragment8 } from "react/jsx-runtime";
 import { Box as Box11, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
-import { createContext as createContext10, useContext as useContext16, useState as useState11, useRef as useRef11, useCallback as useCallback10, useMemo as useMemo8, useEffect as useEffect17, memo as memo10 } from "react";
+import { createContext as createContext10, useContext as useContext16, useState as useState11, useRef as useRef11, useCallback as useCallback9, useMemo as useMemo7, useEffect as useEffect17, memo as memo10 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t, f2, n = "";
@@ -19472,7 +19468,7 @@ function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
   const [copied, setCopied] = useState11(false);
   const copyTimeout = useRef11(null);
-  const handleCopyResult = useCallback10((value) => {
+  const handleCopyResult = useCallback9((value) => {
     const current = copyTimeout.current;
     if (current) {
       window.clearTimeout(current);
@@ -19483,7 +19479,7 @@ function useClipboard() {
     timeout
   ]);
   const onCopy = useJsonViewerStore((store) => store.onCopy);
-  const copy = useCallback10(async (path, value) => {
+  const copy = useCallback9(async (path, value) => {
     if (typeof onCopy === "function") {
       try {
         await onCopy(path, value, copyString);
@@ -19504,7 +19500,7 @@ function useClipboard() {
     handleCopyResult,
     onCopy
   ]);
-  const reset = useCallback10(() => {
+  const reset = useCallback9(() => {
     setCopied(false);
     if (copyTimeout.current) {
       clearTimeout(copyTimeout.current);
@@ -19518,7 +19514,7 @@ function useClipboard() {
 }
 function useIsCycleReference(path, value) {
   const rootValue = useJsonViewerStore((store) => store.value);
-  return useMemo8(() => isCycleReference(rootValue, path, value), [
+  return useMemo7(() => isCycleReference(rootValue, path, value), [
     path,
     value,
     rootValue
@@ -19563,7 +19559,7 @@ function useInspect(path, value, nestedIndex) {
     }
     return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
   });
-  const setInspect = useCallback10((apply) => {
+  const setInspect = useCallback9((apply) => {
     set((oldState) => {
       const newState = typeof apply === "boolean" ? apply : apply(oldState);
       setInspectCache(path, newState, nestedIndex);
@@ -19640,7 +19636,7 @@ function defineEasyType(param) {
   const EasyTypeEditor = (param2) => {
     let { value, setValue, abortEditing, commitEditing } = param2;
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
-    const handleKeyDown = useCallback10((event) => {
+    const handleKeyDown = useCallback9((event) => {
       if (event.key === "Enter") {
         event.preventDefault();
         commitEditing(value);
@@ -19654,7 +19650,7 @@ function defineEasyType(param) {
       commitEditing,
       value
     ]);
-    const handleChange = useCallback10((event) => {
+    const handleChange = useCallback9((event) => {
       setValue(event.target.value);
     }, [
       setValue
@@ -19979,17 +19975,17 @@ function inspectMetadata(value) {
 var PreObjectType = (props) => {
   const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
   const textColor = useTextColor();
-  const isArrayLike = useMemo8(() => Array.isArray(props.value) || props.value instanceof Set, [
+  const isArrayLike = useMemo7(() => Array.isArray(props.value) || props.value instanceof Set, [
     props.value
   ]);
-  const isEmptyValue = useMemo8(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = useMemo7(() => getValueSize(props.value) === 0, [
     props.value
   ]);
-  const sizeOfValue = useMemo8(() => inspectMetadata(props.value), [
+  const sizeOfValue = useMemo7(() => inspectMetadata(props.value), [
     props.value
   ]);
   const displaySize = useJsonViewerStore((store) => store.displaySize);
-  const shouldDisplaySize = useMemo8(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+  const shouldDisplaySize = useMemo7(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
     displaySize,
     props.path,
     props.value
@@ -20037,17 +20033,17 @@ var PreObjectType = (props) => {
 var PostObjectType = (props) => {
   const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
   const textColor = useTextColor();
-  const isArrayLike = useMemo8(() => Array.isArray(props.value) || props.value instanceof Set, [
+  const isArrayLike = useMemo7(() => Array.isArray(props.value) || props.value instanceof Set, [
     props.value
   ]);
-  const isEmptyValue = useMemo8(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = useMemo7(() => getValueSize(props.value) === 0, [
     props.value
   ]);
-  const sizeOfValue = useMemo8(() => inspectMetadata(props.value), [
+  const sizeOfValue = useMemo7(() => inspectMetadata(props.value), [
     props.value
   ]);
   const displaySize = useJsonViewerStore((store) => store.displaySize);
-  const shouldDisplaySize = useMemo8(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+  const shouldDisplaySize = useMemo7(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
     displaySize,
     props.path,
     props.value
@@ -20086,7 +20082,7 @@ var ObjectType = (props) => {
   const isTrap = useIsCycleReference(props.path, props.value);
   const [displayLength, setDisplayLength] = useState11(useJsonViewerStore((store) => store.maxDisplayLength));
   const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
-  const elements = useMemo8(() => {
+  const elements = useMemo7(() => {
     if (!props.inspect) {
       return null;
     }
@@ -20247,7 +20243,7 @@ var ObjectType = (props) => {
   const marginLeft = props.inspect ? 0.6 : 0;
   const width = useJsonViewerStore((store) => store.indentWidth);
   const indentWidth = props.inspect ? width - marginLeft : width;
-  const isEmptyValue = useMemo8(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = useMemo7(() => getValueSize(props.value) === 0, [
     props.value
   ]);
   if (isEmptyValue) {
@@ -20406,7 +20402,7 @@ function matchTypeComponents(value, path, registry) {
 }
 function useTypeComponents(value, path) {
   const registry = useTypeRegistryStore((store) => store.registry);
-  return useMemo8(() => matchTypeComponents(value, path, registry), [
+  return useMemo7(() => matchTypeComponents(value, path, registry), [
     value,
     path,
     registry
@@ -20427,7 +20423,7 @@ var DataKeyPair = (props) => {
   var _props_editable;
   const propsEditable = (_props_editable = props.editable) !== null && _props_editable !== void 0 ? _props_editable : void 0;
   const storeEditable = useJsonViewerStore((store) => store.editable);
-  const editable = useMemo8(() => {
+  const editable = useMemo7(() => {
     if (storeEditable === false) {
       return false;
     }
@@ -20448,7 +20444,7 @@ var DataKeyPair = (props) => {
   const depth = path.length;
   const key = path[depth - 1];
   const hoverPath = useJsonViewerStore((store) => store.hoverPath);
-  const isHover = useMemo8(() => {
+  const isHover = useMemo7(() => {
     return hoverPath && path.every((value2, index) => value2 === hoverPath.path[index] && nestedIndex === hoverPath.nestedIndex);
   }, [
     hoverPath,
@@ -20470,7 +20466,7 @@ var DataKeyPair = (props) => {
   const isNumberKey = Number.isInteger(Number(key));
   const storeEnableAdd = useJsonViewerStore((store) => store.enableAdd);
   const onAdd = useJsonViewerStore((store) => store.onAdd);
-  const enableAdd = useMemo8(() => {
+  const enableAdd = useMemo7(() => {
     if (!onAdd || nestedIndex !== void 0) return false;
     if (storeEnableAdd === false) {
       return false;
@@ -20495,7 +20491,7 @@ var DataKeyPair = (props) => {
   ]);
   const storeEnableDelete = useJsonViewerStore((store) => store.enableDelete);
   const onDelete = useJsonViewerStore((store) => store.onDelete);
-  const enableDelete = useMemo8(() => {
+  const enableDelete = useMemo7(() => {
     if (!onDelete || nestedIndex !== void 0) return false;
     if (isRoot) {
       return false;
@@ -20522,7 +20518,7 @@ var DataKeyPair = (props) => {
   const enableClipboard = useJsonViewerStore((store) => store.enableClipboard);
   const { copy, copied } = useClipboard();
   const highlightUpdates = useJsonViewerStore((store) => store.highlightUpdates);
-  const isHighlight = useMemo8(() => {
+  const isHighlight = useMemo7(() => {
     if (!highlightUpdates || prevValue === void 0) return false;
     if (typeof value !== typeof prevValue) {
       return true;
@@ -20567,7 +20563,7 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const startEditing = useCallback10((event) => {
+  const startEditing = useCallback9((event) => {
     event.preventDefault();
     if (serialize) setTempValue(serialize(value));
     setEditing(true);
@@ -20575,14 +20571,14 @@ var DataKeyPair = (props) => {
     serialize,
     value
   ]);
-  const abortEditing = useCallback10(() => {
+  const abortEditing = useCallback9(() => {
     setEditing(false);
     setTempValue("");
   }, [
     setEditing,
     setTempValue
   ]);
-  const commitEditing = useCallback10((newValue) => {
+  const commitEditing = useCallback9((newValue) => {
     setEditing(false);
     if (!deserialize) return;
     try {
@@ -20596,7 +20592,7 @@ var DataKeyPair = (props) => {
     path,
     value
   ]);
-  const actionIcons = useMemo8(() => {
+  const actionIcons = useMemo7(() => {
     if (editing) {
       return /* @__PURE__ */ jsxs126(Fragment8, {
         children: [
@@ -20692,12 +20688,12 @@ var DataKeyPair = (props) => {
     abortEditing,
     commitEditing
   ]);
-  const isEmptyValue = useMemo8(() => getValueSize(value) === 0, [
+  const isEmptyValue = useMemo7(() => getValueSize(value) === 0, [
     value
   ]);
   const expandable = !isEmptyValue && !!(PreComponent && PostComponent);
   const KeyRenderer = useJsonViewerStore((store) => store.keyRenderer);
-  const downstreamProps = useMemo8(() => ({
+  const downstreamProps = useMemo7(() => ({
     path,
     inspect,
     setInspect,
@@ -20718,7 +20714,7 @@ var DataKeyPair = (props) => {
     sx: {
       userSelect: "text"
     },
-    onMouseEnter: useCallback10(() => setHover(path, nestedIndex), [
+    onMouseEnter: useCallback9(() => setHover(path, nestedIndex), [
       setHover,
       path,
       nestedIndex
@@ -20733,7 +20729,7 @@ var DataKeyPair = (props) => {
           letterSpacing: 0.5,
           opacity: 0.8
         },
-        onClick: useCallback10((event) => {
+        onClick: useCallback9((event) => {
           if (event.isDefaultPrevented()) {
             return;
           }
@@ -20915,7 +20911,7 @@ var JsonViewerInner = (props) => {
     setState,
     props.theme
   ]);
-  const themeCls = useMemo8(() => {
+  const themeCls = useMemo7(() => {
     if (typeof props.theme === "object") return "json-viewer-theme-custom";
     return props.theme === "dark" ? "json-viewer-theme-dark" : "json-viewer-theme-light";
   }, [
@@ -20947,9 +20943,9 @@ var JsonViewerInner = (props) => {
   ]);
   const value = useJsonViewerStore((store) => store.value);
   const prevValue = useJsonViewerStore((store) => store.prevValue);
-  const emptyPath = useMemo8(() => [], []);
+  const emptyPath = useMemo7(() => [], []);
   const setHover = useJsonViewerStore((store) => store.setHover);
-  const onMouseLeave = useCallback10(() => setHover(null), [
+  const onMouseLeave = useCallback9(() => setHover(null), [
     setHover
   ]);
   return /* @__PURE__ */ jsx136(Paper2, {
@@ -20978,14 +20974,14 @@ var JsonViewer = function JsonViewer2(props) {
     }
   }
   const isAutoDarkTheme = useThemeDetector();
-  const themeType = useMemo8(() => {
+  const themeType = useMemo7(() => {
     var _props_theme;
     return props.theme === "auto" ? isAutoDarkTheme ? "dark" : "light" : (_props_theme = props.theme) !== null && _props_theme !== void 0 ? _props_theme : "light";
   }, [
     isAutoDarkTheme,
     props.theme
   ]);
-  const theme = useMemo8(() => {
+  const theme = useMemo7(() => {
     const backgroundColor = typeof themeType === "object" ? themeType.base00 : themeType === "dark" ? darkColorspace.base00 : lightColorspace.base00;
     const foregroundColor = typeof themeType === "object" ? themeType.base07 : themeType === "dark" ? darkColorspace.base07 : lightColorspace.base07;
     return createTheme({
@@ -21013,8 +21009,8 @@ var JsonViewer = function JsonViewer2(props) {
     ...props,
     theme: themeType
   };
-  const jsonViewerStore = useMemo8(() => createJsonViewerStore(props), []);
-  const typeRegistryStore = useMemo8(() => createTypeRegistryStore(), []);
+  const jsonViewerStore = useMemo7(() => createJsonViewerStore(props), []);
+  const typeRegistryStore = useMemo7(() => createTypeRegistryStore(), []);
   return /* @__PURE__ */ jsx136(ThemeProvider, {
     theme,
     children: /* @__PURE__ */ jsx136(TypeRegistryStoreContext.Provider, {
@@ -21067,8 +21063,8 @@ var EventMessage = ({ event }) => {
   const [isOpen, setIsOpen] = useState12(false);
   const [isOverflowing, setIsOverflowing] = useState12(false);
   const textReference = useRef12(null);
-  const parsedMessage = useMemo9(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = useMemo9(
+  const parsedMessage = useMemo8(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = useMemo8(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
@@ -21085,11 +21081,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = useMemo9(
+  const hasAdditionalContent = useMemo8(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = useMemo9(
+  const shouldShowToggle = useMemo8(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -31128,9 +31124,9 @@ var QueryStatus = {
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
 import { Box as Box14, CircularProgress as CircularProgress3, Stack as Stack2, Typography as Typography9 } from "@mui/material";
-import { useEffect as useEffect19, useMemo as useMemo10, useRef as useRef13, useState as useState13 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo9, useRef as useRef13, useState as useState13 } from "react";
 import { jsx as jsx139, jsxs as jsxs128 } from "react/jsx-runtime";
-var POLL_INTERVAL_MS = 1e3;
+var POLL_INTERVAL_MS2 = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
 }
@@ -31146,7 +31142,7 @@ async function startLambdaLogsQuery(client, functionName2, requestId, startTimeS
 }
 function useCloudWatchLogsClient(region) {
   const { localstackEndpoint } = useAppInspector();
-  const client = useMemo10(() => new CloudWatchLogsClient({
+  const client = useMemo9(() => new CloudWatchLogsClient({
     credentials: {
       accessKeyId: "test",
       secretAccessKey: "test"
@@ -31191,7 +31187,7 @@ function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, en
               setError(new Error(`Query ended with status: ${status}`));
               setLoading(false);
             } else {
-              pollTimerRef.current = setTimeout(() => void poll(), POLL_INTERVAL_MS);
+              pollTimerRef.current = setTimeout(() => void poll(), POLL_INTERVAL_MS2);
             }
           } catch (error_) {
             if (!cancelled) {
@@ -31296,7 +31292,7 @@ var checkIsSqsSendMessage = (span) => {
   return span.operation_name.startsWith("SendMessage");
 };
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const eventGroups = useMemo11(
+  const eventGroups = useMemo10(
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
@@ -31528,7 +31524,7 @@ import { Box as Box17, Divider as Divider5, Stack as Stack4, Tooltip as Tooltip6
 import { Handle, Position } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import "react";
-import { memo as memo12, useMemo as useMemo12, useRef as useRef14, useState as useState16 } from "react";
+import { memo as memo12, useMemo as useMemo11, useRef as useRef14, useState as useState16 } from "react";
 import { Fragment as Fragment11, jsx as jsx142, jsxs as jsxs131 } from "react/jsx-runtime";
 var handleStyle = {
   backgroundColor: "white",
@@ -31616,7 +31612,7 @@ var ServiceNode = memo12(({ data, selected }) => {
   const [isHovered, setIsHovered] = useState16(false);
   const nodeRef = useRef14(null);
   const isError = data.event.status_code === 2;
-  const hasPermissionEvents = useMemo12(
+  const hasPermissionEvents = useMemo11(
     () => data.event.events.some(
       (event) => event.event_type === "iam.policy_evaluation" && event.name === "iam.policy.denied"
     ),
@@ -31964,7 +31960,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment13, jsx as jsx145, jsxs as jsxs134 } from "react/jsx-runtime";
+import { jsx as jsx145, jsxs as jsxs134 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -31999,90 +31995,75 @@ var TraceGraphView = ({
   fetchError,
   fetchSpans,
   handleClose,
-  handleEnable,
   handleEventSelect,
-  handleRetry,
   loading,
   navigateToSpansList,
   open,
   selectedEvent,
   spanId,
   spans,
-  status,
-  statusError,
   traceId
-}) => {
-  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  return /* @__PURE__ */ jsxs134(
-    Box19,
-    {
-      "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
-      sx: {
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        gap: 2,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxs134(Box19, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx145(Button6, { onClick: () => {
-            navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx145(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx145(Box19, { sx: { flexGrow: 1 } })
-        ] }),
-        /* @__PURE__ */ jsx145(
-          Paper3,
-          {
-            sx: {
-              display: "flex",
-              flexGrow: 1,
-              overflow: "hidden",
-              position: "relative",
-              width: "100%"
-            },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx145(
-              StatusMessage,
+}) => /* @__PURE__ */ jsxs134(
+  Box19,
+  {
+    "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
+    sx: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      flexGrow: 1,
+      gap: 2,
+      overflow: "hidden"
+    },
+    children: [
+      /* @__PURE__ */ jsxs134(Box19, { sx: { display: "flex", width: "100%" }, children: [
+        /* @__PURE__ */ jsx145(Button6, { onClick: () => {
+          navigateToSpansList();
+        }, startIcon: /* @__PURE__ */ jsx145(ArrowBack, {}), children: "Go back" }),
+        /* @__PURE__ */ jsx145(Box19, { sx: { flexGrow: 1 } })
+      ] }),
+      /* @__PURE__ */ jsxs134(
+        Paper3,
+        {
+          sx: {
+            display: "flex",
+            flexGrow: 1,
+            overflow: "hidden",
+            position: "relative",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsx145(Main, { open, children: /* @__PURE__ */ jsx145(
+              Box19,
               {
-                error: statusError,
-                onEnable: handleEnable,
-                onRetry: handleRetry,
-                status
-              }
-            ) : /* @__PURE__ */ jsxs134(Fragment13, { children: [
-              /* @__PURE__ */ jsx145(Main, { open, children: /* @__PURE__ */ jsx145(
-                Box19,
-                {
-                  sx: {
-                    height: "100%",
-                    overflow: "auto"
-                  },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx145(ReactFlowProvider, { children: /* @__PURE__ */ jsx145(
-                    TraceGraph,
-                    {
-                      initialFocusEventId: spanId,
-                      onEventSelect: handleEventSelect,
-                      onRefresh: () => {
-                        fetchSpans();
-                      },
-                      spans: {
-                        data: spans,
-                        error: fetchError,
-                        loading
-                      }
+                sx: {
+                  height: "100%",
+                  overflow: "auto"
+                },
+                children: traceId !== void 0 && /* @__PURE__ */ jsx145(ReactFlowProvider, { children: /* @__PURE__ */ jsx145(
+                  TraceGraph,
+                  {
+                    initialFocusEventId: spanId,
+                    onEventSelect: handleEventSelect,
+                    onRefresh: () => {
+                      fetchSpans();
+                    },
+                    spans: {
+                      data: spans,
+                      error: fetchError,
+                      loading
                     }
-                  ) })
-                }
-              ) }),
-              /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-};
+                  }
+                ) })
+              }
+            ) }),
+            /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
+          ]
+        }
+      )
+    ]
+  }
+);
 async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ new Map(), processedTraceIds = /* @__PURE__ */ new Set()) {
   const newTraceIds = traceIds.filter((id2) => !processedTraceIds.has(id2));
   if (newTraceIds.length === 0) {
@@ -32122,7 +32103,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const [spans, setSpans] = useState17();
   const [loading, setLoading] = useState17(false);
   const [fetchError, setFetchError] = useState17();
-  const fetchSpans = useCallback11(async () => {
+  const fetchSpans = useCallback10(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -32147,25 +32128,12 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       spansReference.current = spans;
     }
   }, [spans, setSelectedEvent, spanId]);
-  const { checkStatus, reportDisabled, status, statusError } = useAppInspectorStatus();
-  useEffect21(() => {
-    if (fetchError instanceof AppInspectorDisabledError || fetchError instanceof ConnectionError) {
-      reportDisabled();
-    }
-  }, [fetchError, reportDisabled]);
-  const handleEnable = useCallback11(async () => {
-    await api.setStatus({ status: "ENABLED" });
-    void checkStatus();
-  }, [api, checkStatus]);
-  const handleEventSelect = useCallback11((spanId2) => {
+  const handleEventSelect = useCallback10((spanId2) => {
     const span = spans?.find((s) => s.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = useCallback11(() => {
-    void checkStatus();
-  }, [checkStatus]);
-  const navigateToSpansList = useCallback11(() => {
+  const navigateToSpansList = useCallback10(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ jsx145(
@@ -32176,24 +32144,20 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       handleClose: () => {
         setOpen(false);
       },
-      handleEnable,
       handleEventSelect,
-      handleRetry,
       loading,
       navigateToSpansList,
       open,
       selectedEvent,
       spanId: spanId ?? void 0,
       spans,
-      status,
-      statusError,
       traceId
     }
   );
 };
 
 // src/pages/spans-list-page.tsx
-import { Fragment as Fragment14, jsx as jsx146, jsxs as jsxs135 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx146, jsxs as jsxs135 } from "react/jsx-runtime";
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -32201,7 +32165,6 @@ var SpansListPage = () => {
     clearingSpans,
     clearSpans,
     errorCount,
-    fetchBackward,
     fetchError,
     fetchForward,
     fetchingBackward,
@@ -32210,14 +32173,12 @@ var SpansListPage = () => {
     hasMoreForward,
     licenseLimit,
     spans,
-    streamPaused,
     systemLimit,
-    toggleStream,
     totalCount,
     warningCount
   } = useSpans();
-  const { checking, checkStatus, status, statusError } = useAppInspectorStatus();
-  const clearSpansSync = useCallback12(() => {
+  const { checkStatus, phase, status, statusError } = useAppInspectorStatus();
+  const clearSpansSync = useCallback11(() => {
     void clearSpans();
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
@@ -32226,18 +32187,18 @@ var SpansListPage = () => {
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
   const [selectedTraceId, setSelectedTraceId] = useState18();
   const [selectedSpanId, setSelectedSpanId] = useState18();
-  const navigateToSpan = useCallback12((span) => {
+  const navigateToSpan = useCallback11((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = useCallback12(() => {
-    void checkStatus();
+  const handleRetry = useCallback11(() => {
+    checkStatus();
     fetchForward();
   }, [checkStatus, fetchForward]);
-  const handleEnable = useCallback12(async () => {
+  const handleEnable = useCallback11(async () => {
     await api.setStatus({ status: "ENABLED" });
     clearFetchError();
-    void checkStatus();
+    checkStatus();
   }, [api, checkStatus, clearFetchError]);
   const isDelayedRefetchRef = useRef16(false);
   const delayedRefetchTimerRef = useRef16();
@@ -32260,29 +32221,44 @@ var SpansListPage = () => {
       clearTimeout(delayedRefetchTimerRef.current);
     };
   }, [fetchingForward, fetchForward]);
-  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  if (versionCompatibility === "below-minimum") {
-    return /* @__PURE__ */ jsx146(
-      StatusMessage,
-      {
-        localstackVersion,
-        onRetry: handleRetry
-      }
-    );
-  }
-  if (shouldShowStatusMessage) {
-    return /* @__PURE__ */ jsx146(
-      StatusMessage,
-      {
-        error: statusError,
-        localstackVersion,
-        onEnable: handleEnable,
-        onRetry: handleRetry,
-        status
-      }
-    );
+  switch (phase) {
+    case "CHECKING_STATUS":
+    case "CONNECTING_WS": {
+      return /* @__PURE__ */ jsx146(StatusMessage, { phase });
+    }
+    case "DISABLED": {
+      return /* @__PURE__ */ jsx146(
+        StatusMessage,
+        {
+          onEnable: handleEnable,
+          phase
+        }
+      );
+    }
+    case "INCOMPATIBLE": {
+      return /* @__PURE__ */ jsx146(
+        StatusMessage,
+        {
+          localstackVersion,
+          onRetry: handleRetry,
+          phase
+        }
+      );
+    }
+    case "LIVE": {
+      break;
+    }
+    case "UNREACHABLE": {
+      return /* @__PURE__ */ jsx146(
+        StatusMessage,
+        {
+          onRetry: handleRetry,
+          phase
+        }
+      );
+    }
   }
-  return /* @__PURE__ */ jsxs135(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs135(Fragment13, { children: [
     /* @__PURE__ */ jsxs135(
       Box20,
       {
@@ -32299,7 +32275,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          !checking && /* @__PURE__ */ jsx146(
+          /* @__PURE__ */ jsx146(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -32321,14 +32297,11 @@ var SpansListPage = () => {
               hasMoreForward,
               licenseLimit,
               onClearSpans: clearSpansSync,
-              onFetchBackward: fetchBackward,
               onFetchForward: fetchForward,
               onOrderChange: setOrder,
               onSpanClick: navigateToSpan,
-              onToggleStream: toggleStream,
               order: order2,
               spans,
-              streamPaused,
               systemLimit,
               totalCount,
               warningCount