feat(medium): Improve SignalQualityIndicator responsiveness for BLE failure detection (#9317)

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

.github/actions/setup-env/action.yml

@@ -32,6 +32,7 @@ runs:
     - name: 'Setup pnpm'
       uses: pnpm/action-setup@v4
 
+
     - name: 'Setup Node.js'
       uses: actions/setup-node@v4
       with:

.github/copilot-instructions.md

@@ -137,6 +137,28 @@ if (spotifyService._test_) {
 const interval = (spotifyService as any).pollInterval // NO!
 ```
 
+#### Testing Hooks & Components
+
+```typescript
+// Good: window.__TEST_CONTROLS__ pattern (Double Underscore)
+useEffect(() => {
+  if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_TESTING === 'true') {
+    window.__TEST_CONTROLS__ = {
+      ...window.__TEST_CONTROLS__,
+      myControl: setMyState
+    }
+  }
+  return () => {
+    if (typeof window !== 'undefined' && window.__TEST_CONTROLS__?.myControl === setMyState) {
+      delete window.__TEST_CONTROLS__.myControl
+    }
+  }
+}, [setMyState])
+
+// Bad: Using window.TEST_CONTROLS (Single Underscore or No Underscore)
+window.TEST_CONTROLS = { ... } // NO!
+```
+
 ### 3. Linting: Assume Pre-commit Hooks Handle It
 
 - **Rule**: Do not suggest adding manual linting steps to developer workflows or CI scripts.

.github/workflows/deploy.yml

@@ -23,6 +23,7 @@ jobs:
       - name: 📦 Setup pnpm
         uses: pnpm/action-setup@v4
 
+
       - name: 🟢 Setup Node.js
         uses: actions/setup-node@v6
         with:

.github/workflows/gemini-coder.yml

@@ -312,15 +312,15 @@ jobs:
           PROMPTEOF
       - name: 'Gemini: Setup pnpm'
         if: env.AGENT_PROVIDER == 'gemini'
-        uses: pnpm/action-setup@v3
-        with:
-          version: 9
+        uses: pnpm/action-setup@v4
+
 
       - name: 'Gemini: Setup Node.js'
         if: env.AGENT_PROVIDER == 'gemini'
         uses: actions/setup-node@v6
         with:
           node-version: '20'
+          cache: 'pnpm'
 
       - name: 'Gemini: Install Dependencies'
         if: env.AGENT_PROVIDER == 'gemini'

.github/workflows/gemini-triage.yml

@@ -30,6 +30,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
+
       - uses: actions/setup-node@v6
         with:
           node-version: '20'

.github/workflows/manual-release-local.yml

@@ -31,9 +31,8 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: 📦 Setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
+
 
       # Caching is disabled for self-hosted runners to improve performance.
       - name: 🟢 Setup Node.js

.github/workflows/reusable-gemini-tasks.yml

@@ -20,9 +20,8 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: pnpm/action-setup@v3
-        with:
-          version: 9
+      - uses: pnpm/action-setup@v4
+
       - uses: actions/setup-node@v6
         with:
           node-version: '20'

.npmrc

@@ -4,4 +4,9 @@ ANALYZE=false
 # Force users to use pnpm instead of npm
 # This prevents accidental creation of package-lock.json
 engine-strict=true
-package-manager=pnpm
+
+# Increase resilience against transient registry errors
+fetch-retries=5
+fetch-retry-factor=2
+fetch-retry-mintimeout=10000
+fetch-retry-maxtimeout=60000

app/client/connect/ConnectView.tsx

@@ -35,6 +35,7 @@ interface ConnectViewProps {
   onForgetDevice: () => Promise<void>
   isSupported: boolean
   signalPeriodMs: number
+  lastPeriodMs: number
   currentHR: number
   hrZoneData: HrZoneData
   connectionStatus: string
@@ -60,6 +61,7 @@ export default function ConnectView({
   onForgetDevice,
   isSupported,
   signalPeriodMs,
+  lastPeriodMs,
   currentHR,
   hrZoneData,
   connectionStatus,
@@ -213,6 +215,7 @@ export default function ConnectView({
                 )}
                 <SignalQualityIndicator
                   periodMs={signalPeriodMs}
+                  lastPeriodMs={lastPeriodMs}
                   isConnected={isConnected}
                 />
               </Box>

app/client/connect/SignalQualityIndicator.tsx

@@ -1,15 +1,95 @@
-import { Box, Tooltip, Typography, useTheme } from '@mui/material'
+import { Box, Palette, Tooltip, Typography, useTheme } from '@mui/material'
 import SignalCellularAltIcon from '@mui/icons-material/SignalCellularAlt'
 import SignalCellularAlt2BarIcon from '@mui/icons-material/SignalCellularAlt2Bar'
 import SignalCellularAlt1BarIcon from '@mui/icons-material/SignalCellularAlt1Bar'
 import SignalCellularConnectedNoInternet0BarIcon from '@mui/icons-material/SignalCellularConnectedNoInternet0Bar'
+import { useMemo } from 'react'
+import {
+  STABILITY_THRESHOLD_MS,
+  CRITICAL_THRESHOLD_MS,
+  EXCELLENT_SIGNAL_THRESHOLD_MS,
+  GOOD_SIGNAL_THRESHOLD_MS,
+  SIGNAL_PULSE_DURATION_S,
+  SIGNAL_LABEL_MIN_WIDTH_PX,
+} from '@/constants/bluetooth'
+
+type SignalStatusKey =
+  | 'critical'
+  | 'warning'
+  | 'excellent'
+  | 'good'
+  | 'poor'
+  | 'none'
+
+interface StatusConfig {
+  color: string
+  icon: typeof SignalCellularAltIcon
+  isAnimated: boolean
+  label?: string
+}
+
+const getStatusConfig = (
+  key: SignalStatusKey,
+  palette: Palette,
+  periodMs: number,
+  isConnected: boolean
+): StatusConfig => {
+  switch (key) {
+    case 'critical':
+      return {
+        color: palette.error.main,
+        label: 'Signal Lost',
+        icon: SignalCellularConnectedNoInternet0BarIcon,
+        isAnimated: true,
+      }
+    case 'warning':
+      return {
+        color: palette.warning.main,
+        label: 'Weak Signal',
+        icon: SignalCellularAlt1BarIcon,
+        isAnimated: true,
+      }
+    case 'excellent':
+      return {
+        color: palette.success.main,
+        label: `${periodMs}ms`,
+        icon: SignalCellularAltIcon,
+        isAnimated: false,
+      }
+    case 'good':
+      return {
+        color: palette.warning.main,
+        label: `${periodMs}ms`,
+        icon: SignalCellularAlt2BarIcon,
+        isAnimated: false,
+      }
+    case 'poor':
+      return {
+        color: palette.error.main,
+        label: `${periodMs}ms`,
+        icon: SignalCellularAlt1BarIcon,
+        isAnimated: false,
+      }
+    default:
+      return {
+        color: palette.text.disabled,
+        label: isConnected ? 'Waiting...' : 'Disconnected',
+        icon: SignalCellularConnectedNoInternet0BarIcon,
+        isAnimated: false,
+      }
+  }
+}
 
 interface SignalQualityIndicatorProps {
   /**
    * The average time in milliseconds between received Bluetooth packets.
    * Standard BLE HR profile is typically ~1000ms (1Hz).
    */
   periodMs: number
+  /**
+   * The most recent packet inter-arrival time for real-time jitter detection.
+   */
+  lastPeriodMs?: number
   isConnected: boolean
 }
 
@@ -18,77 +98,70 @@ interface SignalQualityIndicatorProps {
  */
 export const SignalQualityIndicator = ({
   periodMs,
+  lastPeriodMs = 0,
   isConnected,
 }: SignalQualityIndicatorProps) => {
-  const theme = useTheme()
-
-  // Determine signal quality tier
-  // Ideally: ~1000ms.
-  // Acceptable jitter: +/- 20% (800ms - 1200ms)
-  // Dropped packet: > 1800ms
-  let quality: 'excellent' | 'good' | 'poor' | 'none' = 'none'
-  let color = theme.palette.text.disabled
+  const { palette } = useTheme()
 
-  if (isConnected && periodMs > 0) {
-    if (periodMs < 1200) {
-      quality = 'excellent'
-      color = theme.palette.success.main
-    } else if (periodMs < 2200) {
-      // Likely missing every other packet
-      quality = 'good'
-      color = theme.palette.warning.main
-    } else {
-      // Missing multiple packets in a row
-      quality = 'poor'
-      color = theme.palette.error.main
-    }
-  }
+  const currentStatusKey = useMemo((): SignalStatusKey => {
+    if (!isConnected || periodMs === 0) return 'none'
+    if (lastPeriodMs > CRITICAL_THRESHOLD_MS) return 'critical'
+    if (lastPeriodMs > STABILITY_THRESHOLD_MS) return 'warning'
 
-  const getIcon = () => {
-    switch (quality) {
-      case 'excellent':
-        return <SignalCellularAltIcon sx={{ color }} />
-      case 'good':
-        return <SignalCellularAlt2BarIcon sx={{ color }} />
-      case 'poor':
-        return <SignalCellularAlt1BarIcon sx={{ color }} />
-      default:
-        return <SignalCellularConnectedNoInternet0BarIcon sx={{ color }} />
-    }
-  }
+    if (periodMs < EXCELLENT_SIGNAL_THRESHOLD_MS) return 'excellent'
+    if (periodMs < GOOD_SIGNAL_THRESHOLD_MS) return 'good'
+    return 'poor'
+  }, [isConnected, periodMs, lastPeriodMs])
 
-  // Calculate an approximate "Packet Success Rate" for the tooltip
-  // Assuming 1000ms target.
-  // 1000ms avg = ~100% success. 2000ms avg = ~50% success.
-  const estimatedReliability = Math.min(
-    100,
-    Math.round((1000 / periodMs) * 100)
+  const config = useMemo(
+    () => getStatusConfig(currentStatusKey, palette, periodMs, isConnected),
+    [currentStatusKey, palette, periodMs, isConnected]
   )
 
+  const Icon = config.icon
+  const reliability =
+    periodMs > 0 ? Math.min(100, Math.round(100000 / periodMs)) : 0
+
   return (
     <Tooltip
+      arrow
       title={
         isConnected
-          ? `Signal Quality: ${periodMs}ms avg period (~${estimatedReliability}% capture)`
+          ? `Signal Quality: ${periodMs}ms avg (~${reliability}% capture)${
+              currentStatusKey === 'warning' || currentStatusKey === 'critical'
+                ? ` | Latency: ${lastPeriodMs}ms`
+                : ''
+            }`
           : 'No Signal'
       }
-      arrow
     >
       <Box
         sx={{
           display: 'flex',
           alignItems: 'center',
           gap: 0.5,
           opacity: isConnected ? 1 : 0.5,
+          color: config.color,
+          animation: config.isAnimated
+            ? `pulse-signal ${SIGNAL_PULSE_DURATION_S}s infinite`
+            : 'none',
+          // Keyframes are defined in global styles to avoid re-parsing on every render
         }}
       >
-        {getIcon()}
+        <Icon />
         {isConnected && (
           <Typography
             variant="caption"
-            sx={{ color: 'text.secondary', minWidth: 35 }}
+            sx={{
+              color: config.isAnimated ? config.color : 'text.secondary',
+              // Set a minWidth for ms labels to prevent jitter, but allow text labels to expand
+              minWidth: config.label?.endsWith('ms')
+                ? SIGNAL_LABEL_MIN_WIDTH_PX
+                : 'auto',
+              fontWeight: config.isAnimated ? 'bold' : 'normal',
+            }}
           >
-            {periodMs}ms
+            {config.label}
           </Typography>
         )}
       </Box>