fix(vwb): resolve frontend services from runtime host

visual_workflow_builder/frontend/src/hooks/useApiClient.ts

@@ -8,7 +8,7 @@
  */
 
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import { apiClient, ApiError, ConnectionState } from '../services/apiClient';
+import { apiClient, ApiError, ConnectionState, getApiHost } from '../services/apiClient';
 import { WorkflowApiData } from '../types';
 
 // Types pour les états de requête
@@ -215,7 +215,7 @@ export function useConnectionState() {
     // Vérification DIRECTE au montage (SANS passer par apiClient singleton)
     const checkOnMount = async () => {
       try {
-        const response = await fetch('http://localhost:5001/api/health', {
+        const response = await fetch(`${getApiHost()}/health`, {
           headers: { 'Accept': 'application/json' },
         });
 

visual_workflow_builder/frontend/src/hooks/useCoachingWebSocket.ts

@@ -10,6 +10,7 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { io, Socket } from 'socket.io-client';
+import { getApiOrigin } from '../services/apiClient';
 
 // Types for COACHING mode
 export type CoachingDecision = 'accept' | 'reject' | 'correct' | 'manual' | 'skip';
@@ -106,7 +107,7 @@ const convertStats = (backendStats: Record<string, any>): CoachingStats => {
 export function useCoachingWebSocket(
   options: UseCoachingWebSocketOptions = {}
 ): UseCoachingWebSocketReturn {
-  const { serverUrl = 'http://localhost:5001', autoConnect = true } = options;
+  const { serverUrl = getApiOrigin(), autoConnect = true } = options;
 
   const [isConnected, setIsConnected] = useState(false);
   const [isSubscribed, setIsSubscribed] = useState(false);

visual_workflow_builder/frontend/src/hooks/useConnectionStatus.ts

@@ -11,7 +11,7 @@
  */
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { apiClient, ConnectionState } from '../services/apiClient';
+import { apiClient, ConnectionState, getApiHost } from '../services/apiClient';
 
 interface ConnectionStatusState {
   /** État actuel de la connexion */
@@ -130,7 +130,7 @@ export function useConnectionStatus(options: UseConnectionStatusOptions = {}): C
     // Vérification DIRECTE au démarrage
     const checkOnMount = async () => {
       try {
-        const response = await fetch('http://localhost:5001/api/health', {
+        const response = await fetch(`${getApiHost()}/health`, {
           headers: { 'Accept': 'application/json' },
         });
 

visual_workflow_builder/frontend/src/hooks/useCorrectionPacks.ts

@@ -5,6 +5,7 @@
  */
 
 import { useState, useCallback, useEffect } from 'react';
+import { getApiHost } from '../services/apiClient';
 
 // Types
 export interface Correction {
@@ -68,7 +69,8 @@ interface UseCorrectionPacksReturn {
   selectPack: (pack: CorrectionPack | null) => void;
 }
 
-const API_BASE = 'http://localhost:5001/api';
+// Base URL de l'API résolue dynamiquement (compatible IP DGX / accès distant).
+const API_BASE = getApiHost();
 
 export function useCorrectionPacks(): UseCorrectionPacksReturn {
   const [packs, setPacks] = useState<CorrectionPack[]>([]);