fix(client): complete simulation mode hardening for Vercel

- Simplify simulation detection logic with better HTTPS/local IP checks
- Prevent all WebSocket and HTTP calls when in simulation mode
- Fix infinite re-render loop in useRobotControl with useMemo
- Update UI to show 'Offline' with red indicators in mock mode
- Add debug logging for simulation mode activation
- Skip ESP reset calls in simulation mode

Author: bert27

client/src/components/Menu/sidenavbar.tsx

@@ -11,6 +11,7 @@ import { NavItem } from "./models/navigation-model";
 import { useConnectivity } from "@/context/connectivity-context";
 import { Chip } from "@mui/material";
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import { isSimulationMode } from "@/utils/simulation";
 
 const iconsPages = [
   { name: "menu.robot", linkTo: "/", icon: <SmartToyIcon /> },
@@ -33,7 +34,10 @@ export const SideNavBar = (): React.ReactElement => {
   };
 
   const connectionInfo = getContextInfo();
-  const isConnected = connectionInfo.status === 'connected';
+  // Force disconnected style if in simulation mode, as simulation has its own alert
+  const isSimulated = isSimulationMode();
+  const isConnected = connectionInfo.status === 'connected' && !isSimulated;
+  const displayLabel = isSimulated ? "Offline" : (connectionInfo.ip || "Offline");
 
   const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -81,7 +85,7 @@ export const SideNavBar = (): React.ReactElement => {
         >
           <Chip
             icon={<FiberManualRecordIcon style={{ fontSize: '0.8rem', color: isConnected ? '#4caf50' : '#f44336' }} />}
-            label={connectionInfo.ip || "Offline"}
+            label={displayLabel}
             sx={{
               backgroundColor: 'rgba(255, 255, 255, 0.05)',
               color: 'var(--text-color)',

client/src/pages/car/car-page.tsx

@@ -74,6 +74,7 @@ export const CarPage: React.FC = () => {
       <CarHeader
         connectedRobot={connectedRobot}
         connectedRemote={connectedRemote}
+        isMock={isMock}
         ledState={dashboardState.robot.ledState || false}
         onToggleLed={toggleLED}
         onPing={() => sendWSMessage("ping")}

client/src/pages/car/components/car-header.tsx

@@ -6,13 +6,22 @@ import { useTranslation } from "react-i18next";
 interface HeaderProps {
   connectedRobot: boolean;
   connectedRemote: boolean;
+  isMock: boolean;
   ledState: boolean;
   onToggleLed: () => void;
   onPing: () => void;
   height: string;
 }
 
-export const CarHeader: React.FC<HeaderProps> = ({ connectedRobot, connectedRemote, ledState, onToggleLed, onPing, height }) => {
+export const CarHeader: React.FC<HeaderProps> = ({
+  connectedRobot,
+  connectedRemote,
+  isMock,
+  ledState,
+  onToggleLed,
+  onPing,
+  height
+}) => {
   const { t } = useTranslation();
   return (
     <Box
@@ -30,7 +39,7 @@ export const CarHeader: React.FC<HeaderProps> = ({ connectedRobot, connectedRemo
         <Typography variant="h4" className="tech-text neon-glow" sx={{ fontWeight: 800, color: 'var(--text-main)', lineHeight: 1 }}>
           {t('car.header.title')}<span style={{ color: 'var(--primary)' }}>CORE</span>
         </Typography>
-        <ConnectInfo connectedRobot={connectedRobot} connectedRemote={connectedRemote} />
+        <ConnectInfo connectedRobot={connectedRobot} connectedRemote={connectedRemote} isMock={isMock} />
       </Box>
 
       <Box display="flex" gap={2}>

client/src/pages/car/components/connect-info.tsx

@@ -1,37 +1,45 @@
 import { Box, Typography } from "@mui/material";
-import WifiIcon from '@mui/icons-material/Wifi';
-import SensorsOffIcon from '@mui/icons-material/SensorsOff';
 import { useTranslation } from "react-i18next";
 
 interface ConnectInfoProps {
   connectedRobot: boolean;
   connectedRemote: boolean;
+  isMock?: boolean;
 }
 
-export const ConnectInfo = ({ connectedRobot, connectedRemote }: ConnectInfoProps) => {
+export const ConnectInfo = ({ connectedRobot, connectedRemote, isMock }: ConnectInfoProps) => {
   const { t } = useTranslation();
 
-  const StatusBadge = ({ label, active }: { label: string, active: boolean }) => (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-      <Box
-        className={active ? "status-pulse" : ""}
-        sx={{
-          width: 8,
-          height: 8,
-          borderRadius: "50%",
-          backgroundColor: active ? 'var(--success)' : 'var(--error)',
-          boxShadow: `0 0 8px ${active ? 'var(--success-glow)' : 'var(--error-glow)'}`,
-        }}
-      />
-      <Typography sx={{
-        fontSize: '0.7rem',
-        fontWeight: 700,
-        color: active ? 'var(--text-main)' : 'var(--text-muted)'
-      }}>
-        {label}
-      </Typography>
-    </Box>
-  );
+  const StatusBadge = ({ label, active, simulated }: { label: string, active: boolean, simulated?: boolean }) => {
+    // If simulated, it should look disconnected (Red/Offline) as per user request
+    const isActuallyConnected = active && !simulated;
+
+    const color = isActuallyConnected ? 'var(--success)' : 'var(--error)';
+    const glow = isActuallyConnected ? 'var(--success-glow)' : 'var(--error-glow)';
+    const textLabel = isActuallyConnected ? label : "OFFLINE";
+
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Box
+          className={isActuallyConnected ? "status-pulse" : ""}
+          sx={{
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            backgroundColor: color,
+            boxShadow: `0 0 8px ${glow}`,
+          }}
+        />
+        <Typography sx={{
+          fontSize: '0.7rem',
+          fontWeight: 700,
+          color: isActuallyConnected ? 'var(--text-main)' : 'var(--text-muted)'
+        }}>
+          {textLabel}
+        </Typography>
+      </Box>
+    );
+  };
 
   return (
     <Box
@@ -46,9 +54,9 @@ export const ConnectInfo = ({ connectedRobot, connectedRemote }: ConnectInfoProp
         background: `rgba(0,0,0,0.2)`,
       }}
     >
-      <StatusBadge label="ROBOT" active={connectedRobot} />
+      <StatusBadge label="ROBOT" active={connectedRobot} simulated={isMock} />
       <Box sx={{ width: '1px', height: '12px', background: 'rgba(255,255,255,0.1)' }} />
-      <StatusBadge label="REMOTE" active={connectedRemote} />
+      <StatusBadge label="REMOTE" active={connectedRemote} simulated={isMock} />
     </Box>
   );
 };

client/src/pages/car/hooks/use-robot-control.ts

@@ -1,19 +1,17 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { IDashboardState } from '@/pages/car/models/model';
 import { robotService } from '@/services/robot.service';
 import { directionWebRobot } from "@/config/api.config";
 import { useRemoteControl } from '@/context/remote-control-context';
 import { isSimulationMode } from '@/utils/simulation';
 
 export const useRobotControl = () => {
-  // Convert http/https to ws/wss
-  const urlRobot = directionWebRobot.replace(/^http/, 'ws') + '/ws';
+  // Convert http/https to ws/wss - memoized to prevent infinite loops
+  const urlRobot = useMemo(() => directionWebRobot.replace(/^http/, 'ws') + '/ws', []);
 
   // Use Global Remote Context
   const { remoteState, connectedRemote } = useRemoteControl();
 
-  console.log('[useRobotControl] URLs:', { urlRobot });
-
   const [dashboardState, setDashboardState] = useState<IDashboardState>({
     robot: {
       ledState: false,
@@ -60,8 +58,8 @@ export const useRobotControl = () => {
   ) => {
     // Mixed Content / HTTPS Detection
     if ((window.location.protocol === 'https:' && url.startsWith('ws:')) || isSimulationMode()) {
-      console.warn(`[MockMode] Activation Request. Secure: ${window.location.protocol === 'https:'}, Simulation: ${isSimulationMode()}`);
-      setIsMock(true);
+      console.warn(`[MockMode] WebSocket Setup Blocked. Protocol: ${window.location.protocol}, Mock: ${isSimulationMode()}`);
+      setConnectedRobot(true);
       return { cleanup: () => { } };
     }
 
@@ -179,7 +177,7 @@ export const useRobotControl = () => {
       setWsRobot
     );
     return cleanup;
-  }, [urlRobot, setupSocket]);
+  }, [urlRobot, setupSocket, isMock]);
 
   // Actions
   const handleColorChange = useCallback(async (newColor: string) => {

client/src/pages/drinks/hooks/use-drinks-page.ts

@@ -50,6 +50,10 @@ export const useDrinksPage = () => {
 
   // Reset ESP8266 state when entering the page
   useEffect(() => {
+    if (isMock) {
+      console.log("[useDrinksPage] Skipping ESP reset in simulation mode");
+      return;
+    }
     const resetEsp = async () => {
       try {
         await drinksService.sendControlCommand("cancel");
@@ -58,7 +62,7 @@ export const useDrinksPage = () => {
       }
     };
     resetEsp();
-  }, []);
+  }, [isMock]);
 
   const handleTabChange = (tab: TabType) => {
     setActiveTab(tab);

client/src/pages/drinks/hooks/use-socket-sync.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 import useWebSocket, { ReadyState } from 'react-use-websocket';
 import { directionWebDrinks } from "@/config/api.config";
+import { isSimulationMode } from "@/utils/simulation";
 import { Cocktail } from "@/pages/drinks/models/drinks-model";
 import { useConnectivity } from "@/context/connectivity-context";
 
@@ -25,6 +26,13 @@ export const useSocketSync = ({
     const [socketUrl, setSocketUrl] = useState<string | null>(null);
 
     useEffect(() => {
+        // CRITICAL: Never attempt WebSocket connection in simulation mode
+        if (isSimulationMode()) {
+            console.log("[useSocketSync] Simulation mode detected, skipping WebSocket setup");
+            setConnectionStatus('drinks', 'disconnected', 'Offline');
+            return;
+        }
+
         if (!loading) {
             console.log("Starting WS Connection Sequence...");
             const timer = setTimeout(() => {
@@ -33,7 +41,6 @@ export const useSocketSync = ({
                 setSocketUrl(url);
 
                 // Step 2: "Nudge" the ESP network stack to force event loop processing
-                // We use a dedicated /drinks/ping endpoint to force the ESP event loop to cycle
                 console.log("Step 2: Nudging ESP network stack (ping)...");
                 [100, 400, 800].forEach(delay => {
                     setTimeout(() => {
@@ -46,7 +53,7 @@ export const useSocketSync = ({
         } else {
             setSocketUrl(null);
         }
-    }, [loading]);
+    }, [loading, setConnectionStatus]);
 
     const socketOptions = useMemo(() => ({
         shouldReconnect: () => true,

client/src/services/drinks.service.ts

@@ -3,7 +3,7 @@ import {
     directionWebDrinks,
     handleResponse,
 } from "../config/api.config";
-import { isSimulationMode, activateReactiveSimulation } from "../utils/simulation";
+import { isSimulationMode, activateReactiveSimulation, withTimeout } from "../utils/simulation";
 import { availableCocktails } from "../pages/drinks/data/cocktails.data";
 
 const USE_MOCK = isSimulationMode();
@@ -19,7 +19,10 @@ export const drinksService = {
             return { success: true };
         }
         try {
-            const response = await axios.get(`${directionWebDrinks}/drinks/navigation`, { params: { direction } });
+            const response = await withTimeout(
+                axios.get(`${directionWebDrinks}/drinks/navigation`, { params: { direction } }),
+                2000
+            );
             return handleResponse(response);
         } catch (error) {
             console.error("Drinks navigation error, triggering simulation fallback:", error);
@@ -39,7 +42,10 @@ export const drinksService = {
             }));
         }
         try {
-            const response = await axios.get(`${directionWebDrinks}/drinks/cocktails`);
+            const response = await withTimeout(
+                axios.get(`${directionWebDrinks}/drinks/cocktails`),
+                3000
+            );
             return handleResponse(response);
         } catch (error) {
             console.error("Failed to fetch cocktails, triggering simulation mode:", error);
@@ -51,10 +57,13 @@ export const drinksService = {
     saveCocktail: async (name: string, ingredients: any[]): Promise<any> => {
         if (USE_MOCK) return { success: true };
         try {
-            const response = await axios.post(`${directionWebDrinks}/drinks/save-cocktail`, {
-                name,
-                ingredients
-            });
+            const response = await withTimeout(
+                axios.post(`${directionWebDrinks}/drinks/save-cocktail`, {
+                    name,
+                    ingredients
+                }),
+                5000
+            );
             return handleResponse(response);
         } catch (error) {
             console.error("Failed to save cocktail, triggering simulation mode:", error);