@localstack/appinspector-ui 1.0.134 → 1.0.135

package/dist/index.cjs

@@ -15930,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)();
@@ -15950,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,
       {
@@ -15971,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,
@@ -15986,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"
@@ -16002,7 +16015,7 @@ var StatusMessage = ({
       }
     );
   }
-  if (error instanceof ConnectionError) {
+  if (phase === "UNREACHABLE") {
     return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       import_material9.Box,
       {
@@ -16064,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,
       {
@@ -16119,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 = () => {
@@ -18682,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;
@@ -18698,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 {
@@ -18718,18 +18738,26 @@ 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 };
 }
 
@@ -18737,7 +18765,7 @@ function useSpansWebSocket(options) {
 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);
@@ -18826,6 +18854,8 @@ var useSpans = () => {
     }
   }, [hasMoreBackward, fetchingBackward, fetchingForward]);
   useSpansWebSocket({
+    enabled: wsEnabled,
+    onClose: onWsClose,
     onMessage: () => {
       if (clearingSpans) {
         return;
@@ -18833,16 +18863,15 @@ var useSpans = () => {
       if (!hasMoreForward) {
         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,
@@ -31084,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 }));
 }
@@ -31145,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) {
@@ -31953,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) {
@@ -32101,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]);
@@ -32130,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
     }
   );
@@ -32167,7 +32164,7 @@ var SpansListPage = () => {
     totalCount,
     warningCount
   } = useSpans();
-  const { checking, checkStatus, status, statusError } = useAppInspectorStatus();
+  const { checkStatus, phase, status, statusError } = useAppInspectorStatus();
   const clearSpansSync = (0, import_react64.useCallback)(() => {
     void clearSpans();
   }, [clearSpans]);
@@ -32182,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)();
@@ -32211,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)(
@@ -32250,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,