add connection indicator

Author: OliverDudgeon

src/components/eventStream/EventStream.tsx

@@ -13,7 +13,11 @@ import { useSnackbar } from "notistack";
 
 import { useASAuthorizationStatus } from "../../hooks/useIsAuthorized";
 import { getMessageFromEvent } from "../../protobuf/protobuf";
-import { eventStreamEnabledAtom, useEventStream } from "../../state/eventStream";
+import {
+  eventStreamEnabledAtom,
+  useEventStream,
+  webSocketStatusAtom,
+} from "../../state/eventStream";
 import { useUnreadEventCount } from "../../state/notifications";
 import { EventMessage } from "../eventMessages/EventMessage";
 import { useIsEventStreamInstalled } from "./useIsEventStreamInstalled";
@@ -26,6 +30,10 @@ dayjs.extend(utc);
 const buildWebSocketUrl = (location: string): string => {
   const url = new URL(location);
   url.protocol = "wss:";
+
+  // Add ordinal parameter to get all historical messages
+  url.searchParams.set("stream_from_ordinal", "0");
+
   return url.toString();
 };
 
@@ -49,6 +57,7 @@ export const EventStream = () => {
   });
 
   const [eventStreamEnabled] = useAtom(eventStreamEnabledAtom);
+  const [, setWebSocketStatus] = useAtom(webSocketStatusAtom);
 
   const handleWebSocketMessage = useCallback(
     (event: MessageEvent) => {
@@ -101,7 +110,7 @@ export const EventStream = () => {
   // Build WebSocket URL
   const wsUrl = eventStreamEnabled && asRole && location ? buildWebSocketUrl(location) : null;
 
-  useWebSocket(wsUrl, {
+  const { readyState } = useWebSocket(wsUrl, {
     onOpen: handleWebSocketOpen,
     onClose: handleWebSocketClose,
     onError: handleWebSocketError,
@@ -112,6 +121,11 @@ export const EventStream = () => {
     reconnectInterval: 3000,
   });
 
+  // Expose connection status for status indicator
+  useEffect(() => {
+    setWebSocketStatus(readyState);
+  }, [readyState, setWebSocketStatus]);
+
   useEffect(() => {
     if (asRole && data) {
       setLocation(data);

src/components/eventStream/EventStreamMessages.tsx

@@ -2,17 +2,21 @@ import { Box, Divider, Typography } from "@mui/material";
 
 import { EventList } from "./EventList";
 import { EventStreamToggle } from "./EventStreamToggle";
+import { WebSocketStatusIndicator } from "./WebSocketStatusIndicator";
 
 /**
  * Main event stream interface in the user menu popover
  */
 export const EventStreamMessages = () => (
   <Box sx={{ minWidth: 300 }}>
-    <Typography sx={{ mb: 1 }} variant="h6">
+    <Typography sx={{ mb: 2 }} variant="h6">
       Event Stream
     </Typography>
 
-    <EventStreamToggle />
+    <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }}>
+      <EventStreamToggle />
+      <WebSocketStatusIndicator />
+    </Box>
 
     <Divider sx={{ my: 2 }} />
 

src/components/eventStream/EventStreamToggle.tsx

@@ -23,7 +23,11 @@ export const EventStreamToggle = () => {
         />
       }
       label={`Event stream ${isEventStreamInstalled ? "(alpha)" : "(not available)"}`}
-      sx={{ mb: 2 }}
+      sx={{
+        margin: 0,
+        alignItems: "center",
+        "& .MuiFormControlLabel-label": { fontSize: "0.875rem", lineHeight: 1.2 },
+      }}
     />
   );
 };

src/components/eventStream/WebSocketStatusIndicator.tsx

@@ -0,0 +1,90 @@
+import { FiberManualRecord } from "@mui/icons-material";
+import { Box, Tooltip, Typography } from "@mui/material";
+import { useAtom } from "jotai";
+
+import { getWebSocketStatusFlags, webSocketStatusAtom } from "../../state/eventStream";
+
+const STATUS_CONFIG = {
+  connected: {
+    color: "success.main",
+    text: "Connected",
+    tooltip: "Event stream is connected and receiving messages",
+  },
+  connecting: {
+    color: "warning.main",
+    text: "Connecting...",
+    tooltip: "Connecting to event stream...",
+  },
+  reconnecting: {
+    color: "warning.main",
+    text: "Reconnecting...",
+    tooltip: "Reconnecting to event stream...",
+  },
+  disconnected: {
+    color: "error.main",
+    text: "Disconnected",
+    tooltip: "Event stream is disconnected",
+  },
+} as const;
+
+/**
+ * WebSocket connection status indicator
+ */
+export const WebSocketStatusIndicator = () => {
+  const [readyState] = useAtom(webSocketStatusAtom);
+  const status = getWebSocketStatusFlags(readyState);
+
+  const getStatusKey = () => {
+    if (status.isConnected) {
+      return "connected";
+    }
+    if (status.isConnecting) {
+      return "connecting";
+    }
+    if (status.isReconnecting) {
+      return "reconnecting";
+    }
+    return "disconnected";
+  };
+
+  const statusKey = getStatusKey();
+  const config = STATUS_CONFIG[statusKey];
+
+  return (
+    <Tooltip arrow title={config.tooltip}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5,
+          height: "fit-content",
+          minHeight: "40px", // Match switch height
+          justifyContent: "center",
+        }}
+      >
+        <FiberManualRecord
+          sx={{
+            fontSize: 10,
+            color: config.color,
+            animation:
+              status.isConnecting || status.isReconnecting
+                ? "pulse 1.5s ease-in-out infinite"
+                : "none",
+            "@keyframes pulse": {
+              "0%": { opacity: 1 },
+              "50%": { opacity: 0.5 },
+              "100%": { opacity: 1 },
+            },
+          }}
+        />
+        <Typography
+          color="text.secondary"
+          sx={{ fontSize: "0.75rem", lineHeight: 1.2, whiteSpace: "nowrap" }}
+          variant="caption"
+        >
+          {config.text}
+        </Typography>
+      </Box>
+    </Tooltip>
+  );
+};

src/layouts/navigation/UserMenu.tsx

@@ -44,7 +44,7 @@ export const UserMenu = () => {
       <Popper
         transition
         placement="bottom-start"
-        sx={{ "& .MuiPopover-paper": { p: 1 } }}
+        sx={{ "& .MuiPopover-paper": { p: 1 }, zIndex: (theme) => theme.zIndex.appBar + 1 }}
         {...bindPopper(popupState)}
         // anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
         // transformOrigin={{ vertical: "top", horizontal: "left" }}

src/layouts/navigation/UserMenuContent.tsx

@@ -42,7 +42,7 @@ const UserMenuContentInner = () => {
         <Typography sx={{ fontWeight: "bold" }}>{user.username}</Typography>
         <Box>
           Roles:
-          <Chips>
+          <Chips sx={{ justifyContent: "center" }}>
             <Chip label={dmRole ?? "No DM Role"} size="small" />
             <Chip label={asRole ?? "No AS Role"} size="small" />
           </Chips>

src/state/eventStream.ts

@@ -1,3 +1,5 @@
+import { ReadyState } from "react-use-websocket";
+
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { atom, useAtom } from "jotai";
@@ -16,6 +18,21 @@ export const eventsAtom = atom<ChargeMessage[]>([]);
  */
 export const sessionStartTimeAtom = atom<dayjs.Dayjs | null>(null);
 
+/**
+ * Atom to track WebSocket connection status
+ */
+export const webSocketStatusAtom = atom<ReadyState>(ReadyState.CLOSED);
+
+/**
+ * Utility function to derive boolean status flags from ReadyState
+ */
+export const getWebSocketStatusFlags = (readyState: ReadyState) => ({
+  isConnected: readyState === ReadyState.OPEN,
+  isConnecting: readyState === ReadyState.CONNECTING,
+  isDisconnected: readyState === ReadyState.CLOSED,
+  isReconnecting: readyState === ReadyState.CLOSING,
+});
+
 /**
  * Hook to manage events with deduplication and sorting
  */
@@ -56,7 +73,14 @@ export const useEventStream = () => {
     setEvents([]);
   };
 
-  return { events, addEvent, isEventNewerThanSession, initializeSession, clearEvents };
+  return {
+    events,
+    addEvent,
+    isEventNewerThanSession,
+    initializeSession,
+    clearEvents,
+    sessionStartTime,
+  };
 };
 
 /**