Merge origin/leader with conflicts

arii · arii · commit 536ba203ca50 · 2026-02-20T23:22:40.000-08:00
diff --git a/.github/prompts/AGENTS.md b/.github/prompts/AGENTS.md
@@ -29,7 +29,7 @@ Security and Performance: Ensure the refactored code is performant, especially f
 
 **Code Quality and Maintainability:**
 
-- **No Magic Numbers**: Hardcoded values should be defined as constants in a dedicated constants file (`lib/constants.ts` or similar). This improves readability and maintainability.
+- **No Magic Numbers**: Hardcoded values should be defined as constants. While shared constants should be placed in the `constants/` directory, highly module-specific constants (e.g., timing intervals or internal parameters used only within a single hook or component) should be defined at the top of the relevant file. This maintains locality and reduces global namespace clutter.
 - **Modularity and Single Responsibility**: Avoid creating overly long scripts or components. Break down large files like `gemini-client.ts` and `page.tsx` into smaller, reusable functions or components with a single responsibility.
 - **Shared Helper Functions**: Encourage the creation and use of shared helper functions for common tasks. Place these in the `utils` or `lib` directory.
 - **Testing**:
diff --git a/app/client/connect/page.tsx b/app/client/connect/page.tsx
@@ -22,14 +22,18 @@ import {
 import throttle from 'lodash.throttle'
 import { HrmInputMessage } from '@/types/websocket'
 import logger from '@/utils/logger'
-import { useTestPageReady } from '@/hooks/useTestPageReady'
 
 export default function ConnectPage() {
+  const [isReady, setIsReady] = useState(false)
+  useEffect(() => {
+    const timer = setTimeout(() => setIsReady(true), 0)
+    return () => clearTimeout(timer)
+  }, [])
+
   const [userSettings, setUserSettings] = useUserSettings()
   const { userName, userAge, userWeight, gender, unitSystem } = userSettings
 
   const [currentHR, setCurrentHR] = useState(0)
-  const isReady = useTestPageReady()
 
   const [localDisplayWeight, setLocalDisplayWeight] = useState<string | null>(
     null
diff --git a/app/client/control/ControlPanel.tsx b/app/client/control/ControlPanel.tsx
@@ -13,7 +13,6 @@ import Head from 'next/head'
 import { useEffect } from 'react'
 import { useWebSocket } from '@/context/WebSocketContext'
 import dynamic from 'next/dynamic'
-import { useTestPageReady } from '@/hooks/useTestPageReady'
 
 const SpotifyControls = dynamic(() => import('./components/SpotifyControls'), {
   loading: () => (
@@ -28,7 +27,6 @@ import TimerControls from './components/TimerControls'
 
 const ControlPanel = () => {
   const { connectionStatus, connect, sendData } = useWebSocket()
-  const isReady = useTestPageReady()
 
   // Register this client as a controller
   useEffect(() => {
@@ -68,7 +66,6 @@ const ControlPanel = () => {
       </Head>
       <Container
         data-testid="control-panel"
-        data-ready={isReady ? 'true' : 'false'}
         maxWidth="xs"
         sx={{
           py: 1,
diff --git a/app/client/experimental/components/ExperimentalAnalyticsPage.tsx b/app/client/experimental/components/ExperimentalAnalyticsPage.tsx
@@ -13,7 +13,6 @@ import {
 } from '@/lib/workout-session-storage'
 import { HeartRateZone } from '@/lib/shared/hr-zones'
 import { calculateMaxHr } from '@/utils/hrCalculations'
-import { useTestPageReady } from '@/hooks/useTestPageReady'
 
 // Components
 import WorkoutSummary from './WorkoutSummary'
@@ -41,7 +40,6 @@ type View = 'active' | 'list' | 'detail'
 const ExperimentalAnalyticsPage = () => {
   const { hrmData, sendData, connectionStatus } = useWebSocket()
   const [userSettings] = useUserSettings()
-  const isReady = useTestPageReady()
 
   // Use #5110's hooks
   const {
@@ -201,12 +199,7 @@ const ExperimentalAnalyticsPage = () => {
   const defaultDate = useMemo(() => new Date(), [])
 
   return (
-    <Container
-      maxWidth="lg"
-      sx={{ mt: 4, mb: 4 }}
-      data-testid="dashboard"
-      data-ready={isReady ? 'true' : 'false'}
-    >
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }} data-testid="dashboard">
       {view === 'active' && (
         <>
           <Box sx={{ mb: 3, display: 'flex', gap: 2 }}>
diff --git a/app/client/mock/page.tsx b/app/client/mock/page.tsx
@@ -12,7 +12,6 @@ import Typography from '@mui/material/Typography'
 import { useCallback, useEffect, useState } from 'react'
 import BottomNavBar from '../../../components/BottomNavBar'
 import { useWebSocket } from '@/context/WebSocketContext'
-import { useTestPageReady } from '@/hooks/useTestPageReady'
 import {
   HrmInputMessage,
   HrmMetadataUpdateMessage,
@@ -28,7 +27,6 @@ export default function MockPage() {
   const [weight, setWeight] = useState(70) // Add weight state
   const [height, setHeight] = useState(175) // Add height state
   const [gender, setGender] = useState('female') // Add gender state
-  const isReady = useTestPageReady()
   const [intervalId, setIntervalId] = useState<number | null>(null)
 
   const isStreaming = intervalId !== null
@@ -127,11 +125,7 @@ export default function MockPage() {
 
   return (
     <>
-      <Container
-        maxWidth="sm"
-        sx={{ py: 3, pb: 10 }}
-        data-ready={isReady ? 'true' : 'false'}
-      >
+      <Container maxWidth="sm" sx={{ py: 3, pb: 10 }}>
         <Card sx={{ p: 3, textAlign: 'center' }}>
           <Science color="primary" sx={{ fontSize: 60, mb: 2 }} />
           <Typography
diff --git a/app/client/spotify-selection/page.tsx b/app/client/spotify-selection/page.tsx
@@ -11,7 +11,6 @@ import dynamic from 'next/dynamic'
 import { useState } from 'react'
 import { useWebSocket } from '@/context/WebSocketContext'
 import { useSpotifyCommand } from '@/hooks/useSpotifyCommand'
-import { useTestPageReady } from '@/hooks/useTestPageReady'
 
 const PlaylistSelector = dynamic(
   () => import('../../../components/Spotify/PlaylistSelector'),
@@ -37,7 +36,6 @@ const SpotifySelectionPage = () => {
   const [selectedPlaylistId, setSelectedPlaylistId] = useState<string | null>(
     null
   )
-  const isReady = useTestPageReady()
 
   const handlePlaylistSelected = (uri: string) => {
     const playlistId = uri.split(':').pop()
@@ -49,11 +47,7 @@ const SpotifySelectionPage = () => {
   }
 
   return (
-    <Container
-      maxWidth="sm"
-      sx={{ py: 3 }}
-      data-ready={isReady ? 'true' : 'false'}
-    >
+    <Container maxWidth="sm" sx={{ py: 3 }}>
       <Typography variant="h4" component="h1" gutterBottom align="center">
         Spotify Playlist Selector
       </Typography>
diff --git a/app/debug/spotify/page.tsx b/app/debug/spotify/page.tsx
@@ -8,7 +8,6 @@ import { Session } from 'next-auth'
 import { signIn, signOut, useSession } from 'next-auth/react'
 import { useEffect, useState } from 'react'
 import { API_DEBUG_SPOTIFY_TOKEN } from '@/constants/apiEndpoints'
-import { useTestPageReady } from '@/hooks/useTestPageReady'
 
 interface ServerTokenStatus {
   status: string
@@ -25,7 +24,6 @@ interface ServerTokenStatus {
 export default function SpotifyDebugPage() {
   const { data: session } = useSession() as { data: Session | null }
   const [serverToken, setServerToken] = useState<ServerTokenStatus | null>(null)
-  const isReady = useTestPageReady()
 
   const fetchServerToken = async () => {
     const res = await fetch(API_DEBUG_SPOTIFY_TOKEN)
@@ -41,7 +39,7 @@ export default function SpotifyDebugPage() {
   }, [])
 
   return (
-    <Box sx={{ p: 2 }} data-ready={isReady ? 'true' : 'false'}>
+    <Box sx={{ p: 2 }}>
       <Typography variant="h4" gutterBottom>
         Spotify Debug
       </Typography>
diff --git a/app/main.tsx b/app/main.tsx
@@ -26,16 +26,17 @@ export default function Main({ children }: { children: React.ReactNode }) {
               <UserSettingsProvider>
                 <TimerSoundProvider>
                   <AnimatePresence mode="wait">
-                    <motion.div
+                    <motion.main
                       key={pathname}
                       variants={pageVariants}
                       initial="initial"
                       animate="in"
                       exit="out"
                       data-testid="main-content-layout"
+                      role="main"
                     >
                       {children}
-                    </motion.div>
+                    </motion.main>
                   </AnimatePresence>
                 </TimerSoundProvider>
               </UserSettingsProvider>
diff --git a/app/page.tsx b/app/page.tsx
@@ -13,7 +13,6 @@ import { useState, useCallback } from 'react'
 import HrmConnectionPanel from '@/components/HrmConnectionPanel'
 import TimerDisplay from '@/components/TimerDisplay'
 import { useAudio } from '@/hooks/useAudio'
-import { useTestPageReady } from '@/hooks/useTestPageReady'
 
 // Dynamically import SpotifyDisplay with SSR disabled.
 // This prevents the heavy Spotify SDK logic from blocking the initial server HTML or hydration.
@@ -63,6 +62,7 @@ const Dashboard = () => {
 
   const [docIsManuallyShrunk, setDocIsManuallyShrunk] = useState(false)
   const [audioInitialized, setAudioInitialized] = useState(false)
+<<<<<<< HEAD
 
   // Track the readiness of dynamic components to ensure accurate VRT snapshots.
   // data-ready will only be set to true once all critical sections are hydrated.
@@ -99,6 +99,8 @@ const Dashboard = () => {
       : componentLoadStatus.googleDoc)
 
   const isReady = useTestPageReady(allComponentsReady)
+=======
+>>>>>>> origin/leader
   const [refreshKey, setRefreshKey] = useState(0)
   const { initializeAudio } = useAudio()
 
@@ -116,7 +118,6 @@ const Dashboard = () => {
   return (
     <Container
       data-testid="dashboard"
-      data-ready={isReady ? 'true' : 'false'}
       maxWidth="xl"
       onClick={handleInteraction}
       sx={{
diff --git a/constants/bluetooth-config.ts b/constants/bluetooth-config.ts
diff --git a/hooks/useBluetoothHRM.ts b/hooks/useBluetoothHRM.ts
@@ -12,16 +12,22 @@ import { cancellablePromise } from '@/utils/promise'
 import { getCookie, setCookie } from '@/utils/cookies'
 import { BLUETOOTH_MESSAGES } from '@/constants/bluetooth-messages'
 import { BLUETOOTH_MAX_RECONNECT_ATTEMPTS } from '@/constants/bluetooth-reconnection'
-import {
-  HR_SERVICE_UUID,
-  HR_CHARACTERISTIC_UUID,
-  BATTERY_SERVICE_UUID,
-  BATTERY_LEVEL_CHARACTERISTIC_UUID,
-  ROLLING_AVG_HISTORY_LENGTH,
-  MISSED_PACKET_THRESHOLD_BUFFER_MS,
-  MIN_MISSED_PACKET_THRESHOLD_MS,
-  HEARTBEAT_INTERVAL_MS,
-} from '@/constants/bluetooth-config'
+
+const HR_SERVICE_UUID = 'heart_rate'
+const HR_CHARACTERISTIC_UUID = 'heart_rate_measurement'
+const BATTERY_SERVICE_UUID = 'battery_service'
+const BATTERY_LEVEL_CHARACTERISTIC_UUID = 'battery_level'
+
+const ROLLING_AVG_HISTORY_LENGTH = 5
+const MISSED_PACKET_THRESHOLD_BUFFER_MS = 500
+const MIN_MISSED_PACKET_THRESHOLD_MS = 1500
+
+const HEARTBEAT_INTERVAL_MS_test = 500
+const HEARTBEAT_INTERVAL_MS_prod = 1000
+export const HEARTBEAT_INTERVAL_MS =
+  typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
+    ? HEARTBEAT_INTERVAL_MS_test
+    : HEARTBEAT_INTERVAL_MS_prod
 
 const statusMessageMap: Record<BluetoothConnectionStatus, string> = {
   [BluetoothConnectionStatus.DISCONNECTED]: BLUETOOTH_MESSAGES.disconnected,
@@ -44,6 +50,7 @@ interface UseBluetoothHRMProps {
   userAge?: number | null
   onHeartRateUpdate?: (heartRate: number) => void
   onConnect?: () => void
+  heartbeatInterval?: number
 }
 
 const useBluetoothHRM = (props: UseBluetoothHRMProps = {}) => {
@@ -53,6 +60,7 @@ const useBluetoothHRM = (props: UseBluetoothHRMProps = {}) => {
     userAge,
     onHeartRateUpdate,
     onConnect,
+    heartbeatInterval = HEARTBEAT_INTERVAL_MS,
   } = props
   const { sendData, connectionStatus } = useWebSocket()
   const [status, setStatus] = useState<BluetoothConnectionStatus>(
@@ -198,10 +206,15 @@ const useBluetoothHRM = (props: UseBluetoothHRMProps = {}) => {
           }
         }
       }
-    }, HEARTBEAT_INTERVAL_MS)
+    }, heartbeatInterval)
 
     return () => clearInterval(interval)
-  }, [dataLivenessTimeoutMs, isDataStale, updateSignalPeriod])
+  }, [
+    dataLivenessTimeoutMs,
+    isDataStale,
+    updateSignalPeriod,
+    heartbeatInterval,
+  ])
 
   const disconnect = useCallback(() => {
     isManualDisconnect.current = true
diff --git a/tests/playwright/lib/waits.ts b/tests/playwright/lib/waits.ts
@@ -47,26 +47,26 @@ export async function waitForPageReady(
 ): Promise<void> {
   const { timeout = WAIT_TIMEOUTS.TEST_READY } = options
 
-  try {
-    // Wait for custom test readiness signal from the application
-    await page.waitForFunction(
-      () => {
-        return document.querySelector('[data-ready="true"]') !== null
-      },
-      { timeout }
-    )
-  } catch {
-    // Fallback: If custom signal fails, wait for a known stable element
-    console.warn('__TEST_READY__ signal not found, proceeding with UI check')
-    await page
-      .waitForSelector('main, [role="main"], body > div', {
-        state: 'visible',
-        timeout: WAIT_TIMEOUTS.ELEMENT_VISIBLE,
-      })
-      .catch(() => {
-        console.warn('No main element found, continuing anyway')
-      })
-  }
+  // Wait for fonts to be ready
+  await page.evaluate(async () => {
+    await document.fonts.ready
+  })
+
+  // Wait for loading skeletons to disappear
+  await page
+    .waitForSelector('.MuiSkeleton-root', {
+      state: 'hidden',
+      timeout,
+    })
+    .catch(() => {
+      // Ignore errors if skeletons are not found (already hidden/removed)
+    })
+
+  // Wait for actual content to be present
+  await page.waitForSelector('main, [data-testid="dashboard"], [role="main"]', {
+    state: 'visible',
+    timeout,
+  })
 }
 
 /**
diff --git a/tests/unit/app/client/control/__snapshots__/ControlPanel.test.tsx.snap b/tests/unit/app/client/control/__snapshots__/ControlPanel.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`ControlPanel Component should match snapshot 1`] = `
 <DocumentFragment>
   <div
     class="MuiContainer-root MuiContainer-maxWidthXs css-n697ne-MuiContainer-root"
-    data-ready="true"
     data-testid="control-panel"
   >
     <div
diff --git a/tests/unit/hooks/useBluetoothHRM.test.ts b/tests/unit/hooks/useBluetoothHRM.test.ts
@@ -2,8 +2,7 @@
  * @jest-environment jsdom
  */
 import { renderHook, act, waitFor } from '@testing-library/react'
-import useBluetoothHRM from '@/hooks/useBluetoothHRM'
-import { HEARTBEAT_INTERVAL_MS } from '@/constants/bluetooth-config'
+import useBluetoothHRM, { HEARTBEAT_INTERVAL_MS } from '@/hooks/useBluetoothHRM'
 import * as WebSocketContext from '@/context/WebSocketContext'
 import * as cookieUtils from '@/utils/cookies'
 import { env } from '@/lib/env'
@@ -438,7 +437,9 @@ describe('useBluetoothHRM', () => {
     it('should detect data staleness and attempt to reconnect', async () => {
       const dataLivenessTimeoutMs = 5000
       const { result } = renderHook(() =>
-        useBluetoothHRM({ dataLivenessTimeoutMs })
+        useBluetoothHRM({
+          dataLivenessTimeoutMs,
+        })
       )
       let characteristicValueChangedCallback: (event: {
         target: { value: DataView }
