Fonctionnement de l'interface Web

• Démarrage & routage

  • apps/web/src/main.tsx crée le router (@tanstack/react-router) et fournit React Query.
  • apps/web/src/routes/__root.tsx initialise les contextes (ORPC/React Query) et compose les layouts.
  • Regroupement des routes : (public)/, (auth)/, (protected)/.

• Appels de données (ORPC)

  • apps/web/src/utils/orpc.ts :
    • Crée RPCLink vers ${VITE_SERVER_URL}/rpc (getServerUrl() depuis utils/runtime-env.ts).
    • Ajoute credentials: 'include' pour les cookies de session.
    • Configure QueryClient avec gestion d'erreurs globale via sonner.

• Authentification & RBAC

  • apps/web/src/lib/auth-client.ts configure Better Auth (plugins admin si nécessaire).
  • Les routes (protected) vérifient l'état d'authentification côté client et consomment des endpoints sécurisés.

• Données documentaires

  • Les pages protégées exposent : tableau de bord (dashboard), gestion des fichiers (files), visualisation de chunks/QA (chunk-visualisation.$fileId.tsx, admin/qa-visualisation.$fileId.tsx).
  • Les interactions déclenchent des requêtes/mutations ORPC, puis invalidations de cache React Query.

• Environnements au runtime

  • apps/web/vite.config.ts injecte window.RUNTIME_ENV (server/chatbot/auth callback URLs).
  • apps/web/src/utils/runtime-env.ts harmonise l'accès (getRuntimeEnv, getServerUrl, getChatbotUrl).

Image suggérée: schéma des flux entre Web -> Serveur -> Chatbot/DB

Architecture et implémentation

• Router + Query: séparation claire des responsabilités (navigation, data fetching, cache).
• ORPC: client typé → contrats stables avec le serveur.
• Runtime env: injecté au build pour déployer le même bundle avec des URLs différentes.

Fonctionnalités et responsabilités

• Gérer l'auth côté client, protéger les routes, orchestrer les appels ORPC.
• Afficher et gérer les workflows: fichiers, chunks, QA, admin.
• Centraliser erreurs et feedback UX (toasts, loaders, invalidations Query).

Utilisation et extension

• Nouvelle page: créez un fichier dans apps/web/src/routes/(protected)/votre-page.tsx avec un loader/action si besoin.
• Appels API: utilisez utils/orpc.ts pour créer une mutation/query; invalidez les clés pertinentes après succès.
• Garde Auth/RBAC: appliquez vos contrôles dans les loaders et composants, selon getMe() et le rôle.
• Env runtime: vérifiez getServerUrl()/getChatbotUrl() avant d'appeler l'API.

Attention Better Auth: createAuthClient prend VITE_SERVER_URL comme base. Si le backend n'expose pas /api/auth, les endpoints seront /sign-in/email, etc. Alignez la config entre local et prod.

Personnalisation et optimisation

• UX: modifiez composants UI, thèmes, messages, et toasts dans les features.
• Performances: ajustez staleTime/gcTime, suspense et pagination côté Query.
• Observabilité: ajoutez logs de navigation/erreurs, profiling et mesure de latence des appels ORPC.