Merge branch 'websocket_context' into staging_environment

src/pages/Device.tsx

@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid2';
 import { Component, Device, Interaction, User } from "models";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { useDeviceAPI, useGlobalState, useSnackbar } from "providers";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
 import PageContainer from "./PageContainer";
 import { useHTTP, useMobile } from "hooks";
@@ -38,7 +38,7 @@ export default function DevicePage() {
   const isMobile = useMobile()
   const deviceID = useParams<{ deviceID: string }>()?.deviceID ?? "";
   const groupID = useParams<{ groupID: string }>()?.groupID ?? "";
-  const { state } = useLocation();
+  const { state, pathname: locationPathname } = useLocation();
   const [{ as, team, user }] = useGlobalState()
   // console.log(state)
   const [device, setDevice] = useState<Device>(state?.device ? Device.create(state.device) : Device.create())
@@ -68,6 +68,14 @@ export default function DevicePage() {
 
   const { token } = useHTTP();
 
+  const liveContextKeys = useMemo(() => getContextKeys(), [locationPathname]);
+  const liveContextTypes = useMemo(() => getContextTypes(), [locationPathname]);
+  /** Matches getDevicePageData: omit ?as= when first context type is "team". */
+  const liveAs =
+    as && !(liveContextTypes.length > 0 && liveContextTypes[0] === "team")
+      ? as
+      : undefined;
+
   const loadDevice = () => {
     if (loading) return
     if (state?.devicePageData) {
@@ -173,7 +181,7 @@ export default function DevicePage() {
   // When the backend receives a new reading and updates a component,
   // this fires and updates the component in state without a page refresh.
   useWebSocket<{ key: string; component: Component } | null>({
-    path: `/live/devices/${deviceID}/components`,
+    path: `/v1/live/devices/${deviceID}/components`,
     parse: (e) => {
       try {
         const raw = JSON.parse(e.data);
@@ -197,6 +205,9 @@ export default function DevicePage() {
         return updated;
       });
     },
+    keys: liveContextKeys,
+    types: liveContextTypes,
+    as: liveAs,
     token,
     enabled: !!deviceID,
   });
@@ -204,7 +215,7 @@ export default function DevicePage() {
   // --- Real-time device updates (optional) ---
   // Updates device-level info (name, status, lastActive, etc.)
   useWebSocket<Device | null>({
-    path: `/live/devices/${deviceID}`,
+    path: `/v1/live/devices/${deviceID}`,
     parse: (e) => {
       try {
         const raw = JSON.parse(e.data);
@@ -223,6 +234,9 @@ export default function DevicePage() {
       if (!updatedDevice) return;
       setDevice(updatedDevice);
     },
+    keys: liveContextKeys,
+    types: liveContextTypes,
+    as: liveAs,
     token,
     enabled: !!deviceID,
   });

src/pages/Devices.tsx

@@ -264,10 +264,50 @@ export default function Devices() {
     )
   }, [])
 
+  /** Same context chain as deviceAPI.list / GetContext on the backend (path + group tab + ?as=). */
+  const statusStreamKeys = useMemo(() => {
+    if (tab !== "all") {
+      const g = groups[parseInt(tab)]
+      if (g) {
+        const keys = [...getContextKeys()]
+        keys.push(g.id().toString())
+        return keys
+      }
+    }
+    return getContextKeys()
+  }, [tab, groups, location.pathname])
+
+  const statusStreamTypes = useMemo(() => {
+    if (tab !== "all") {
+      const g = groups[parseInt(tab)]
+      if (g) {
+        const types = [...getContextTypes()]
+        types.push("group")
+        return types
+      }
+    }
+    return getContextTypes()
+  }, [tab, groups, location.pathname])
+
+  /** Match Device page / getDevicePageData: omit ?as= when URL context already starts with team. */
+  const statusStreamAs = useMemo(() => {
+    const types =
+      tab !== "all" && groups[parseInt(tab)]
+        ? [...getContextTypes(), "group"]
+        : getContextTypes()
+    if (as && !(types.length > 0 && types[0] === "team")) {
+      return as
+    }
+    return undefined
+  }, [as, tab, groups, location.pathname])
+
   useDeviceStatusStreams({
     deviceIds,
     onStatusUpdate: handleStatusUpdate,
     token,
+    keys: statusStreamKeys,
+    types: statusStreamTypes,
+    as: statusStreamAs,
     enabled: devices.length > 0 && !!token,
   })