@localstack/appinspector-ui 1.0.133 → 1.0.135

package/dist/index.cjs

@@ -15549,14 +15549,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__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { children: label }) }) });
-var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.TableCell, { colSpan, sx: { textAlign: "center" }, children: [
-  !fetching && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
-  fetching && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.CircularProgress, { size: 24, sx: { m: 2 } })
-] }) });
+var LoadingRow = ({ colSpan }) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.CircularProgress, { size: 24, sx: { m: 2 } }) }) });
 var SpansDataGridRow = (0, import_react38.memo)(
   ({ isNew, onSpanClick, row }) => {
     const theme = (0, import_material7.useTheme)();
@@ -15623,14 +15618,10 @@ var SpansDataGrid = ({
   hasMoreForward,
   licenseLimit,
   onClearSpans,
-  onFetchBackward,
-  onFetchForward,
   onOrderChange,
   onSpanClick,
-  onToggleStream,
   order: order2,
   spans,
-  streamPaused,
   systemLimit,
   totalCount,
   warningCount
@@ -15798,21 +15789,6 @@ var SpansDataGrid = ({
         ) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-        import_material7.FormControlLabel,
-        {
-          control: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-            import_material7.Button,
-            {
-              onClick: onToggleStream,
-              startIcon: streamPaused ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material3.PlayArrowOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material3.PauseOutlined, {}),
-              variant: "text",
-              children: streamPaused ? "Resume Stream" : "Pause Stream"
-            }
-          ),
-          label: ""
-        }
-      ),
       /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
         import_material7.FormControlLabel,
         {
@@ -15875,7 +15851,7 @@ var SpansDataGrid = ({
                 (spans === void 0 || clearingSpans) && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
                 !clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
                 !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
                   hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
@@ -15884,12 +15860,12 @@ var SpansDataGrid = ({
                     return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
                   hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
                 !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
                   hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
@@ -15897,7 +15873,7 @@ var SpansDataGrid = ({
                     return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
                   hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
               ] })
@@ -15936,14 +15912,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
@@ -15958,11 +15930,10 @@ var import_material9 = require("@mui/material");
 var import_react39 = require("react");
 var import_jsx_runtime129 = require("react/jsx-runtime");
 var StatusMessage = ({
-  error,
   localstackVersion,
   onEnable,
   onRetry,
-  status
+  phase
 }) => {
   const [enabling, setEnabling] = (0, import_react39.useState)(false);
   const [enableError, setEnableError] = (0, import_react39.useState)();
@@ -15978,8 +15949,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__ */ (0, import_jsx_runtime129.jsx)(
+      import_material9.Box,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          justifyContent: "center",
+          p: 4
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material9.CircularProgress, { size: 32 })
+      }
+    );
+  }
+  if (phase === "INCOMPATIBLE") {
     return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       import_material9.Box,
       {
@@ -15999,7 +15985,7 @@ var StatusMessage = ({
             sx: { maxWidth: 600, width: "100%" },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material9.AlertTitle, { sx: { fontWeight: "bold" }, children: "App Inspector Not Available" }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material9.Typography, { 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__ */ (0, import_jsx_runtime129.jsx)(import_material9.Typography, { 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__ */ (0, import_jsx_runtime129.jsx)(import_material9.Typography, { sx: { mb: 1 }, variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("strong", { children: "Update LocalStack:" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
                 import_material9.Box,
@@ -16014,11 +16000,10 @@ var StatusMessage = ({
                   children: "localstack update docker-images"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material9.Box, { sx: { display: "flex", gap: 1, mt: 2 }, children: onRetry && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+              onRetry && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material9.Box, { sx: { display: "flex", gap: 1, mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
                 import_material9.Button,
                 {
                   "aria-label": "Check App Inspector status again",
-                  disabled: enabling,
                   onClick: onRetry,
                   variant: "outlined",
                   children: "Check Again"
@@ -16030,7 +16015,7 @@ var StatusMessage = ({
       }
     );
   }
-  if (error instanceof ConnectionError) {
+  if (phase === "UNREACHABLE") {
     return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       import_material9.Box,
       {
@@ -16092,7 +16077,7 @@ var StatusMessage = ({
       }
     );
   }
-  if (error instanceof AppInspectorDisabledError || status?.status === "DISABLED") {
+  if (phase === "DISABLED") {
     return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       import_material9.Box,
       {
@@ -16147,102 +16132,99 @@ var StatusMessage = ({
       }
     );
   }
-  if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-      import_material9.Box,
-      {
-        sx: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "column",
-          gap: 2,
-          justifyContent: "center",
-          p: 4
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-          import_material9.Alert,
-          {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_icons_material4.ErrorOutline, { fontSize: "large" }),
-            severity: "error",
-            sx: { maxWidth: 600, width: "100%" },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material9.AlertTitle, { sx: { fontWeight: "bold" }, children: "Error" }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material9.Typography, { sx: { mb: 2 }, variant: "body2", children: error.message }),
-              onRetry && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material9.Box, { sx: { display: "flex", justifyContent: "flex-start", mt: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                import_material9.Button,
-                {
-                  "aria-label": "Retry operation",
-                  onClick: onRetry,
-                  variant: "outlined",
-                  children: "Retry"
-                }
-              ) })
-            ]
-          }
-        )
-      }
-    );
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_jsx_runtime129.Fragment, {});
 };
 
 // src/hooks/status-provider.tsx
 var import_react41 = require("react");
 
-// src/hooks/use-status.tsx
+// src/hooks/use-connection-state-machine.ts
 var import_react40 = require("react");
-var useStatus = () => {
+var POLL_INTERVAL_MS = 5e3;
+function useConnectionStateMachine() {
   const api = useAppInspectorApi();
+  const [phase, setPhase] = (0, import_react40.useState)("CHECKING_STATUS");
   const [checking, setChecking] = (0, import_react40.useState)(true);
   const [status, setStatus] = (0, import_react40.useState)();
-  const [error, setError] = (0, import_react40.useState)();
-  const hasFetchedReference = (0, import_react40.useRef)(false);
-  const abortControllerReference = (0, import_react40.useRef)(null);
-  const checkStatus = (0, import_react40.useCallback)(async () => {
-    if (abortControllerReference.current !== null) {
-      abortControllerReference.current.abort();
+  const [statusError, setStatusError] = (0, import_react40.useState)();
+  const abortControllerRef = (0, import_react40.useRef)(null);
+  const dispatchStatus = (0, import_react40.useCallback)((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 = (0, import_react40.useCallback)(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]);
   (0, import_react40.useEffect)(() => {
-    if (!hasFetchedReference.current) {
-      hasFetchedReference.current = true;
-      void checkStatus();
-    }
-  }, [checkStatus]);
-  return { checking, checkStatus, error, status };
-};
+    void runCheck();
+  }, [runCheck]);
+  (0, import_react40.useEffect)(() => {
+    if (phase !== "UNREACHABLE" && phase !== "DISABLED") return;
+    const intervalId = globalThis.setInterval(() => {
+      void runCheck();
+    }, POLL_INTERVAL_MS);
+    return () => {
+      globalThis.clearInterval(intervalId);
+    };
+  }, [phase, runCheck]);
+  const checkStatus = (0, import_react40.useCallback)(() => {
+    void runCheck();
+  }, [runCheck]);
+  const onWsOpen = (0, import_react40.useCallback)(() => {
+    setPhase("LIVE");
+  }, []);
+  const onWsClose = (0, import_react40.useCallback)(() => {
+    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
 var import_jsx_runtime130 = require("react/jsx-runtime");
 var AppInspectorStatusContext = (0, import_react41.createContext)(void 0);
 var StatusProvider = ({ children }) => {
-  const { checking, checkStatus, error, status } = useStatus();
-  const reportDisabled = (0, import_react41.useCallback)(() => {
-    void checkStatus();
-  }, [checkStatus]);
-  const value = (0, import_react41.useMemo)(
-    () => ({ checking, checkStatus, reportDisabled, status, statusError: error }),
-    [checking, checkStatus, reportDisabled, status, error]
-  );
+  const value = useConnectionStateMachine();
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(AppInspectorStatusContext.Provider, { value, children });
 };
 var useAppInspectorStatus = () => {
@@ -18710,14 +18692,21 @@ var AppInspectorContextProvider = (props) => {
 
 // src/hooks/use-spans-ws.tsx
 function useSpansWebSocket(options) {
-  const { onMessage } = options;
+  const { enabled, onClose, onMessage, onOpen } = options;
   const onMessageRef = (0, import_react46.useRef)(onMessage);
+  const onOpenRef = (0, import_react46.useRef)(onOpen);
+  const onCloseRef = (0, import_react46.useRef)(onClose);
   (0, import_react46.useEffect)(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
+  (0, import_react46.useEffect)(() => {
+    onOpenRef.current = onOpen;
+  }, [onOpen]);
+  (0, import_react46.useEffect)(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
   const [connected, setConnected] = (0, import_react46.useState)(false);
   const wsRef = (0, import_react46.useRef)(void 0);
-  const reconnectRef = (0, import_react46.useRef)(void 0);
   const { localstackEndpoint } = useAppInspector();
   const connect = (0, import_react46.useCallback)(() => {
     if (wsRef.current !== void 0) return;
@@ -18726,19 +18715,22 @@ function useSpansWebSocket(options) {
     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 {
@@ -18746,26 +18738,34 @@ function useSpansWebSocket(options) {
     });
   }, [localstackEndpoint]);
   (0, import_react46.useEffect)(() => {
+    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] = (0, import_react47.useState)();
   const [fetchError, setFetchError] = (0, import_react47.useState)();
   const [fetchingForward, setFetchingForward] = (0, import_react47.useState)(false);
@@ -18843,37 +18843,35 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [clearingSpans, api]);
-  const [streamPaused, setStreamPaused] = (0, import_react47.useState)(false);
-  const toggleStream = (0, import_react47.useCallback)(() => {
-    setStreamPaused((previous) => !previous);
-  }, []);
   (0, import_react47.useEffect)(() => {
-    if (hasMoreForward === true && !fetchingForward && !streamPaused) {
+    if (hasMoreForward === true && !fetchingForward) {
       void paginationBufferRef.current.fetchForward();
     }
-  }, [hasMoreForward, fetchingForward, streamPaused]);
+  }, [hasMoreForward, fetchingForward]);
+  (0, import_react47.useEffect)(() => {
+    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 = (0, import_react47.useCallback)(() => {
     setFetchError(void 0);
   }, []);
-  (0, import_react47.useEffect)(() => {
-    if (fetchError instanceof AppInspectorDisabledError || fetchError instanceof ConnectionError) {
-      reportDisabled();
-    }
-  }, [fetchError, reportDisabled]);
   return {
     clearFetchError,
     clearingSpans,
@@ -18888,9 +18886,7 @@ var useSpans = () => {
     hasMoreForward,
     licenseLimit,
     spans,
-    streamPaused,
     systemLimit,
-    toggleStream,
     totalCount,
     warningCount
   };
@@ -31117,7 +31113,7 @@ var QueryStatus = {
 var import_material17 = require("@mui/material");
 var import_react53 = require("react");
 var import_jsx_runtime139 = require("react/jsx-runtime");
-var POLL_INTERVAL_MS = 1e3;
+var POLL_INTERVAL_MS2 = 1e3;
 async function pollQueryResults(client, queryId) {
   return client.send(new GetQueryResultsCommand({ queryId }));
 }
@@ -31178,7 +31174,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) {
@@ -31986,90 +31982,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__ */ (0, import_jsx_runtime145.jsxs)(
-    import_material23.Box,
-    {
-      "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
-      sx: {
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        gap: 2,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_material23.Box, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material23.Button, { onClick: () => {
-            navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_icons_material13.ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material23.Box, { sx: { flexGrow: 1 } })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
-          import_material23.Paper,
-          {
-            sx: {
-              display: "flex",
-              flexGrow: 1,
-              overflow: "hidden",
-              position: "relative",
-              width: "100%"
-            },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
-              StatusMessage,
+}) => /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
+  import_material23.Box,
+  {
+    "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
+    sx: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      flexGrow: 1,
+      gap: 2,
+      overflow: "hidden"
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_material23.Box, { sx: { display: "flex", width: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material23.Button, { onClick: () => {
+          navigateToSpansList();
+        }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_icons_material13.ArrowBack, {}), children: "Go back" }),
+        /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material23.Box, { sx: { flexGrow: 1 } })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
+        import_material23.Paper,
+        {
+          sx: {
+            display: "flex",
+            flexGrow: 1,
+            overflow: "hidden",
+            position: "relative",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+              import_material23.Box,
               {
-                error: statusError,
-                onEnable: handleEnable,
-                onRetry: handleRetry,
-                status
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_jsx_runtime145.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
-                import_material23.Box,
-                {
-                  sx: {
-                    height: "100%",
-                    overflow: "auto"
-                  },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_react62.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
-                    TraceGraph,
-                    {
-                      initialFocusEventId: spanId,
-                      onEventSelect: handleEventSelect,
-                      onRefresh: () => {
-                        fetchSpans();
-                      },
-                      spans: {
-                        data: spans,
-                        error: fetchError,
-                        loading
-                      }
+                sx: {
+                  height: "100%",
+                  overflow: "auto"
+                },
+                children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_react62.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+                  TraceGraph,
+                  {
+                    initialFocusEventId: spanId,
+                    onEventSelect: handleEventSelect,
+                    onRefresh: () => {
+                      fetchSpans();
+                    },
+                    spans: {
+                      data: spans,
+                      error: fetchError,
+                      loading
                     }
-                  ) })
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-};
+                  }
+                ) })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(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) {
@@ -32134,24 +32115,11 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       spansReference.current = spans;
     }
   }, [spans, setSelectedEvent, spanId]);
-  const { checkStatus, reportDisabled, status, statusError } = useAppInspectorStatus();
-  (0, import_react63.useEffect)(() => {
-    if (fetchError instanceof AppInspectorDisabledError || fetchError instanceof ConnectionError) {
-      reportDisabled();
-    }
-  }, [fetchError, reportDisabled]);
-  const handleEnable = (0, import_react63.useCallback)(async () => {
-    await api.setStatus({ status: "ENABLED" });
-    void checkStatus();
-  }, [api, checkStatus]);
   const handleEventSelect = (0, import_react63.useCallback)((spanId2) => {
     const span = spans?.find((s) => s.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = (0, import_react63.useCallback)(() => {
-    void checkStatus();
-  }, [checkStatus]);
   const navigateToSpansList = (0, import_react63.useCallback)(() => {
     onClose?.();
   }, [onClose]);
@@ -32163,17 +32131,13 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       handleClose: () => {
         setOpen(false);
       },
-      handleEnable,
       handleEventSelect,
-      handleRetry,
       loading,
       navigateToSpansList,
       open,
       selectedEvent,
       spanId: spanId ?? void 0,
       spans,
-      status,
-      statusError,
       traceId
     }
   );
@@ -32188,7 +32152,6 @@ var SpansListPage = () => {
     clearingSpans,
     clearSpans,
     errorCount,
-    fetchBackward,
     fetchError,
     fetchForward,
     fetchingBackward,
@@ -32197,13 +32160,11 @@ var SpansListPage = () => {
     hasMoreForward,
     licenseLimit,
     spans,
-    streamPaused,
     systemLimit,
-    toggleStream,
     totalCount,
     warningCount
   } = useSpans();
-  const { checking, checkStatus, status, statusError } = useAppInspectorStatus();
+  const { checkStatus, phase, status, statusError } = useAppInspectorStatus();
   const clearSpansSync = (0, import_react64.useCallback)(() => {
     void clearSpans();
   }, [clearSpans]);
@@ -32218,13 +32179,13 @@ var SpansListPage = () => {
     setSelectedSpanId(span.span_id);
   }, []);
   const handleRetry = (0, import_react64.useCallback)(() => {
-    void checkStatus();
+    checkStatus();
     fetchForward();
   }, [checkStatus, fetchForward]);
   const handleEnable = (0, import_react64.useCallback)(async () => {
     await api.setStatus({ status: "ENABLED" });
     clearFetchError();
-    void checkStatus();
+    checkStatus();
   }, [api, checkStatus, clearFetchError]);
   const isDelayedRefetchRef = (0, import_react64.useRef)(false);
   const delayedRefetchTimerRef = (0, import_react64.useRef)();
@@ -32247,27 +32208,42 @@ var SpansListPage = () => {
       clearTimeout(delayedRefetchTimerRef.current);
     };
   }, [fetchingForward, fetchForward]);
-  const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
-  if (versionCompatibility === "below-minimum") {
-    return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-      StatusMessage,
-      {
-        localstackVersion,
-        onRetry: handleRetry
-      }
-    );
-  }
-  if (shouldShowStatusMessage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-      StatusMessage,
-      {
-        error: statusError,
-        localstackVersion,
-        onEnable: handleEnable,
-        onRetry: handleRetry,
-        status
-      }
-    );
+  switch (phase) {
+    case "CHECKING_STATUS":
+    case "CONNECTING_WS": {
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(StatusMessage, { phase });
+    }
+    case "DISABLED": {
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+        StatusMessage,
+        {
+          onEnable: handleEnable,
+          phase
+        }
+      );
+    }
+    case "INCOMPATIBLE": {
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+        StatusMessage,
+        {
+          localstackVersion,
+          onRetry: handleRetry,
+          phase
+        }
+      );
+    }
+    case "LIVE": {
+      break;
+    }
+    case "UNREACHABLE": {
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+        StatusMessage,
+        {
+          onRetry: handleRetry,
+          phase
+        }
+      );
+    }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_jsx_runtime146.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
@@ -32286,7 +32262,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          !checking && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -32308,14 +32284,11 @@ var SpansListPage = () => {
               hasMoreForward,
               licenseLimit,
               onClearSpans: clearSpansSync,
-              onFetchBackward: fetchBackward,
               onFetchForward: fetchForward,
               onOrderChange: setOrder,
               onSpanClick: navigateToSpan,
-              onToggleStream: toggleStream,
               order: order2,
               spans,
-              streamPaused,
               systemLimit,
               totalCount,
               warningCount