test(medium): Fix Real-time HR Display Clock Skew Issue (#8974)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: arii <342438+arii@users.noreply.github.com>

Author: arii

app/client/experimental/components/ExperimentalAnalyticsPage.tsx

@@ -1,7 +1,7 @@
 // app/client/experimental/components/ExperimentalAnalyticsPage.tsx
 'use client'
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
-import { Container, Box, Button } from '@mui/material'
+import { Container, Box, Button, Skeleton } from '@mui/material'
 import dynamic from 'next/dynamic'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { useWorkoutSessionManager } from '@/hooks/useWorkoutSessionManager'
@@ -21,6 +21,11 @@ import CalorieTracker from './CalorieTracker'
 import SessionList from './SessionList'
 import SessionDetail from './SessionDetail'
 
+const HeartRateTimeSeries = dynamic(() => import('./HeartRateTimeSeries'), {
+  ssr: false,
+  loading: () => <Skeleton variant="rectangular" height={300} />,
+})
+
 const defaultTimeInZones: Record<HeartRateZone, number> = {
   ZONE_0: 0,
   ZONE_1: 0,
@@ -31,10 +36,6 @@ const defaultTimeInZones: Record<HeartRateZone, number> = {
   ZONE_6: 0,
 }
 
-const HeartRateTimeSeries = dynamic(() => import('./HeartRateTimeSeries'), {
-  ssr: false,
-})
-
 type View = 'active' | 'list' | 'detail'
 
 const ExperimentalAnalyticsPage = () => {

app/client/experimental/components/HeartRateTimeSeries.tsx

@@ -1,6 +1,7 @@
 // app/client/experimental/components/HeartRateTimeSeries.tsx
 'use client'
-import { Card, CardContent, Typography, Box } from '@mui/material'
+import { useMemo } from 'react'
+import { Card, CardContent, Typography, Box, useTheme } from '@mui/material'
 import { HrDataPoint } from '@/lib/workout-session-storage'
 import {
   LineChart,
@@ -18,28 +19,44 @@ interface HeartRateTimeSeriesProps {
 }
 
 const HeartRateTimeSeries = ({ hrHistory }: HeartRateTimeSeriesProps) => {
+  const theme = useTheme()
+
+  const formatTime = useMemo(() => {
+    const formatter = new Intl.DateTimeFormat(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    })
+    return (time: number) => formatter.format(new Date(time))
+  }, [])
+
   return (
     <Card>
       <CardContent>
         <Typography variant="h5" gutterBottom>
           Heart Rate Over Time
         </Typography>
-        <Box sx={{ height: 300 }} data-testid="hr-time-series-chart">
+        <Box
+          sx={{ height: 300, minHeight: 300 }}
+          data-testid="hr-time-series-chart"
+        >
           <ResponsiveContainer width="100%" height="100%">
             <LineChart data={hrHistory} syncId="anyId">
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis
-                dataKey="time"
-                tickFormatter={(time) => new Date(time).toLocaleTimeString()}
+              <CartesianGrid
+                strokeDasharray="3 3"
+                stroke={theme.palette.divider}
               />
+              <XAxis dataKey="time" tickFormatter={formatTime} />
               <YAxis domain={['auto', 'auto']} />
               <Tooltip />
               <Legend />
               <Line
                 type="monotone"
                 dataKey="hr"
-                stroke="#8884d8"
-                activeDot={{ r: 8 }}
+                stroke={theme.palette.primary.main}
+                strokeWidth={2}
+                dot={false}
+                activeDot={{ r: 6 }}
               />
             </LineChart>
           </ResponsiveContainer>

app/client/experimental/components/SessionDetail.tsx

@@ -1,12 +1,25 @@
 // app/client/experimental/components/SessionDetail.tsx
-import { Card, CardContent, Typography, Button, Box } from '@mui/material'
+'use client'
+import {
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Box,
+  Skeleton,
+} from '@mui/material'
+import dynamic from 'next/dynamic'
 import { WorkoutSessionData } from '@/lib/workout-session-storage'
 import { formatDate } from '@/lib/utils'
 import ZoneDistribution from './ZoneDistribution'
-import HeartRateTimeSeries from './HeartRateTimeSeries'
 import { generateFitFile } from '@/utils/fit-export'
 import { useAppSnackbar } from '@/hooks/useAppSnackbar'
 
+const HeartRateTimeSeries = dynamic(() => import('./HeartRateTimeSeries'), {
+  ssr: false,
+  loading: () => <Skeleton variant="rectangular" height={300} />,
+})
+
 interface SessionDetailProps {
   session: WorkoutSessionData
   onBack: () => void
@@ -81,7 +94,9 @@ const SessionDetail = ({ session, onBack }: SessionDetailProps) => {
             <ZoneDistribution timeInZones={session.timeInZones} />
           </Box>
         </Box>
-        <HeartRateTimeSeries hrHistory={session.hrHistory} />
+        {session.hrHistory.length > 0 && (
+          <HeartRateTimeSeries hrHistory={session.hrHistory} />
+        )}
       </CardContent>
     </Card>
   )

app/layout.tsx

@@ -4,7 +4,7 @@ import localFont from 'next/font/local'
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter'
 import { ThemeProvider } from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
-import theme from '../theme/theme'
+import theme from '@/lib/theme'
 import Main from './main'
 import './globals.css'
 const inter = Inter({

context/webSocketReducer.ts

@@ -48,6 +48,9 @@ export const INITIAL_STATE: WebSocketState = {
   spotifyServiceInitialized: false,
 }
 
+const getClockOffset = (serverTimestamp: number | undefined, now: number) =>
+  serverTimestamp ? now - serverTimestamp : 0
+
 export const reducer = (
   state: WebSocketState,
   message: ServerMessage | { type: 'RESET_STATE' }
@@ -59,9 +62,11 @@ export const reducer = (
       // When the initial state is loaded, ensure all HRM data is marked as connected.
       // We use the client's current time for lastUpdated to prevent clock skew issues.
       const now = Date.now()
+      const offset = getClockOffset(message.serverTimestamp, now)
       const hrmDataWithConnection =
         message.payload.hrmData?.map((d) => ({
           ...d,
+          updatedAt: d.updatedAt ? d.updatedAt + offset : d.updatedAt,
           isConnected: true,
           lastUpdated: now,
         })) || []
@@ -74,6 +79,7 @@ export const reducer = (
     case 'HRM_UPDATE': {
       const payload = message.payload as ServerHrmData[]
       const now = Date.now()
+      const offset = getClockOffset(message.serverTimestamp, now)
 
       // Simplify: The HRM_UPDATE payload from the server is the single source of truth.
       // We map the payload to our local HrmData structure, preserving existing local state
@@ -86,6 +92,9 @@ export const reducer = (
         return {
           ...existingUser,
           ...newUser,
+          updatedAt: newUser.updatedAt
+            ? newUser.updatedAt + offset
+            : newUser.updatedAt,
           isConnected: true,
           lastUpdated: now,
         }
@@ -110,8 +119,15 @@ export const reducer = (
         ...state,
         spotifyData: { ...state.spotifyData, ...message.payload },
       }
-    case 'ACTIVE_ALERTS_UPDATE':
-      return { ...state, activeAlerts: message.payload }
+    case 'ACTIVE_ALERTS_UPDATE': {
+      const now = Date.now()
+      const offset = getClockOffset(message.serverTimestamp, now)
+      const adjustedAlerts = message.payload.map((alert) => ({
+        ...alert,
+        timestamp: alert.timestamp + offset,
+      }))
+      return { ...state, activeAlerts: adjustedAlerts }
+    }
     case 'SPOTIFY_SERVICE_INIT_UPDATE':
       return { ...state, spotifyServiceInitialized: message.payload }
     default:

tests/playwright/clock-skew.spec.ts

@@ -0,0 +1,83 @@
+import { test, expect } from '@playwright/test'
+
+test('should handle clock skew correctly', async ({ page }) => {
+  // Use a long timeout for the initial load and build
+  await page.goto('/?testing=true')
+  await page.waitForSelector('[data-testid="dashboard"]', { timeout: 30000 })
+
+  // Helper to dispatch messages to the reducer
+  const dispatch = async (message: unknown) => {
+    await page.waitForFunction(
+      () =>
+        (
+          window as unknown as {
+            __TEST_CONTROLS__?: { dispatch: (m: unknown) => void }
+          }
+        ).__TEST_CONTROLS__?.dispatch,
+      {
+        timeout: 10000,
+      }
+    )
+    await page.evaluate((msg) => {
+      ;(
+        window as unknown as {
+          __TEST_CONTROLS__: { dispatch: (m: unknown) => void }
+        }
+      ).__TEST_CONTROLS__.dispatch(msg)
+    }, message)
+  }
+
+  // 1. Mock client time to be 60 seconds ahead of "server time"
+  // We'll use a fixed "now" for the client.
+  const baseTime = Date.now()
+  const clientNow = baseTime + 60000
+
+  await page.evaluate((now) => {
+    ;(window as unknown as { __MOCKED_NOW__: number }).__MOCKED_NOW__ = now
+    ;(window as unknown as { Date: { now: () => number } }).Date.now = () =>
+      (window as unknown as { __MOCKED_NOW__: number }).__MOCKED_NOW__
+    // Also need to trigger a re-render or wait for the next useNow tick
+    // But since we are dispatching a new message, it should trigger a re-render anyway.
+  }, clientNow)
+
+  // 2. Dispatch HRM_UPDATE with "server time" (baseTime)
+  // This data is 60 seconds old according to the mocked client clock.
+  // The threshold is 30 seconds, so it SHOULD be filtered out WITHOUT the fix.
+  await dispatch({
+    type: 'HRM_UPDATE',
+    payload: [
+      {
+        clientId: 'skew-test',
+        value: 80,
+        name: 'Skew Test',
+        age: 30,
+        updatedAt: baseTime, // server time
+      },
+    ],
+  })
+
+  // 3. Assert the tile is NOT visible (because it's "stale")
+  // We wait a bit to ensure the reducer processed it and the UI updated.
+  await page.waitForTimeout(1000)
+  const tile = page.locator('text=Skew Test')
+  await expect(tile).not.toBeVisible()
+
+  // 4. Now simulate receiving the same message but WITH a serverTimestamp (the fix)
+  // We'll use baseTime as the serverTimestamp.
+  await dispatch({
+    type: 'HRM_UPDATE',
+    payload: [
+      {
+        clientId: 'skew-test',
+        value: 80,
+        name: 'Skew Test',
+        age: 30,
+        updatedAt: baseTime,
+      },
+    ],
+    serverTimestamp: baseTime,
+  })
+
+  // 5. Assert the tile IS visible (because the reducer compensated for the skew)
+  await expect(tile).toBeVisible()
+})

tests/playwright/stale-tile.spec.ts

@@ -5,7 +5,7 @@ test('should remove tile immediately when missing from HRM_UPDATE', async ({
   page,
 }) => {
   await page.goto('/?testing=true')
-  await page.waitForSelector('[data-ready="true"]', { timeout: 15000 })
+  await page.waitForSelector('[data-testid="dashboard"]', { timeout: 15000 })
 
   // Helper to dispatch messages to the reducer
   const dispatch = async (message: ServerMessage | { type: 'RESET_STATE' }) => {

tests/unit/context/webSocketReducer.test.ts

@@ -166,6 +166,102 @@ describe('webSocketReducer', () => {
       expect(state.hrmData.find((d) => d.clientId === '2')).toBeUndefined()
       expect(state.hrmData[0].clientId).toBe('1')
     })
+
+    it('should compensate for clock skew using serverTimestamp', () => {
+      const serverNow = 1000000
+      const clientNow = 1060000 // Client is 60s ahead
+      const updatedAt = 990000 // Data is 10s old on server
+
+      const dateSpy = jest.spyOn(Date, 'now').mockReturnValue(clientNow)
+
+      const action: ServerMessage = {
+        type: 'HRM_UPDATE',
+        payload: [{ ...baseUser, updatedAt }],
+        serverTimestamp: serverNow,
+      }
+
+      const state = reducer(INITIAL_STATE, action)
+
+      // Expected updatedAt: 990000 + (1060000 - 1000000) = 990000 + 60000 = 1050000
+      // 1050000 is 10s before clientNow, so it correctly preserves the 10s age.
+      expect(state.hrmData[0].updatedAt).toBe(1050000)
+
+      dateSpy.mockRestore()
+    })
+
+    it('should compensate for clock skew for NEW users in HRM_UPDATE', () => {
+      const serverNow = 1000000
+      const clientNow = 1060000
+      const updatedAt = 990000
+
+      const dateSpy = jest.spyOn(Date, 'now').mockReturnValue(clientNow)
+
+      const action: ServerMessage = {
+        type: 'HRM_UPDATE',
+        payload: [{ ...baseUser, clientId: 'new-user', updatedAt }],
+        serverTimestamp: serverNow,
+      }
+
+      const state = reducer(INITIAL_STATE, action)
+      expect(state.hrmData[0].clientId).toBe('new-user')
+      expect(state.hrmData[0].updatedAt).toBe(1050000)
+
+      dateSpy.mockRestore()
+    })
+  })
+
+  describe('INITIAL_STATE action clock skew', () => {
+    it('should compensate for clock skew in INITIAL_STATE', () => {
+      const serverNow = 1000000
+      const clientNow = 1060000
+      const updatedAt = 990000
+
+      const dateSpy = jest.spyOn(Date, 'now').mockReturnValue(clientNow)
+
+      const action: ServerMessage = {
+        type: 'INITIAL_STATE',
+        payload: {
+          hrmData: [{ ...baseUser, updatedAt }] as HrmStreamData[],
+          timerData: INITIAL_STATE.timerData,
+          spotifyData: INITIAL_STATE.spotifyData,
+        },
+        serverTimestamp: serverNow,
+      }
+
+      const state = reducer(INITIAL_STATE, action)
+      expect(state.hrmData[0].updatedAt).toBe(1050000)
+
+      dateSpy.mockRestore()
+    })
+  })
+
+  describe('ACTIVE_ALERTS_UPDATE action clock skew', () => {
+    it('should compensate for clock skew in active alerts', () => {
+      const serverNow = 1000000
+      const clientNow = 1060000
+      const alertTimestamp = 990000
+
+      const dateSpy = jest.spyOn(Date, 'now').mockReturnValue(clientNow)
+
+      const action: ServerMessage = {
+        type: 'ACTIVE_ALERTS_UPDATE',
+        payload: [
+          {
+            clientId: '1',
+            code: 'HRM_STALE',
+            message: 'Stale',
+            severity: 'warning',
+            timestamp: alertTimestamp,
+          },
+        ],
+        serverTimestamp: serverNow,
+      }
+
+      const state = reducer(INITIAL_STATE, action)
+      expect(state.activeAlerts[0].timestamp).toBe(1050000)
+
+      dateSpy.mockRestore()
+    })
   })
 
   describe('DEVICE_OFFLINE action', () => {