# coding: utf-8 import os content = """# Audit UX / Visuel — Entropyk Web Workbench **Date :** 2026-07-18 **Périmètre :** `apps/web/src` (Next.js 15 + React 19 + React Flow + Tailwind) **Méthode :** lecture intégrale du code source, capture d'écran locale, heuristiques Nielsen + spécifiques outils CAO/simulation. **Langue du rapport :** français (le destinataire est Sepehr). --- ## 1. Vue d'ensemble du produit Entropyk Web est un éditeur de schémas thermodynamiques couplé à un solveur stationnaire Rust. Il vise le même usage que les workbenches Modelica (Dymola, OpenModelica, Wolfram System Modeler) ou les outils HVAC spécialisés : construire un cycle frigorifique / pompe à chaleur, paramétrer les composants, résoudre et inspecter les résultats. L'application est structurée en trois surfaces principales : une palette de composants à gauche, un canvas React Flow au centre, un panneau de propriétés / résultats à droite, et une barre d'outils en haut. Le positionnement technique est solide (IR ScenarioConfig partagé avec le CLI, backend Rust via l'API, modèles de composants riches), mais l'interface visuelle donne actuellement l'impression d'un prototype avancé : beaucoup de fonctionnalités, peu de cohérence graphique, et des signaux visuels qui ne correspondent pas toujours à la sémantique d'un outil d'ingénierie. --- ## 2. Architecture de l'information actuelle La disposition globale est celle d'un IDE classique : - **Top bar** (`Toolbar.tsx:159-422`) : choix du fluide, backend, solver, contrôles d'orientation, import/export, exemples, solve. - **Left sidebar** (`ComponentPalette.tsx:28-118`) : onglets Composants / Bibliothèque, liste pliée par catégories. - **Center canvas** (`Canvas.tsx:259-335`) : grille React Flow, nœuds, arêtes, légende des milieux, barre d'orientation flottante. - **Right panel** (`page.tsx:262-271`) : pile verticale `PropertiesPanel` + `ResultsPanel` (w-96). - **Bottom bar** (`DofStatusBar.tsx:81-228`) : indicateur DoF (degrés de liberté) repliable. Cette architecture est fonctionnelle et assez proche de Dymola / OMEdit : palette + canvas + panneau de paramètres + barre de statut. Le problème n'est donc pas la structure, mais la façon dont chaque surface est habillée et articulée. --- ## 3. Inventaire des écrans / composants clés | Écran / Composant | Fichier | Rôle | Observations initiales | |---|---|---|---| | Page principale | `app/page.tsx:18-285` | Layout global, module editor, empty hint | Langue mêlée FR/EN dans le hint (Start your cycle + texte français). | | Toolbar | `components/Toolbar.tsx` | Barre d'action principale | Badges verts/oranges, emojis, styles inlines. | | Palette atomique | `components/palette/ComponentPalette.tsx` | Catalogue de composants | Catégories en anglais, items textuels, noms tronqués. | | Bibliothèque de modules | `components/palette/ModuleLibraryPanel.tsx` | Modules .ekmod | Cartes claires mais badges et couleurs inconsistantes. | | Canvas | `components/canvas/Canvas.tsx` | Schéma interactif | Grille React Flow, couleurs de milieu, flottante orientation. | | Nœud | `components/canvas/EntropykNode.tsx` | Rendu d'un composant | Icônes SVG propres, labels en dessous, handles carrés. | | Icônes | `components/canvas/ComponentIcon.tsx` | Glyphes P&ID | Style technique-dessin cohérent. | | Propriétés | `components/panels/PropertiesPanel.tsx` | Paramètres du nœud sélectionné | Tableau à onglets, bug Modèle : Modèle, colonnes étroites. | | Résultats | `components/panels/ResultsPanel.tsx` | Bench, edges, solver, debug | Residual trace confus, onglets inégaux. | | DoF status | `components/DofStatusBar.tsx` | Indicateur équations/inconnues | Bonne idée, couleurs décalées. | | Modales | `modals/NewModelModal.tsx`, `WorkspaceHelpModal.tsx`, `CreateModuleModal.tsx` | Assistants et aide | Styles différents : indigo/violet vs bleu accent. | --- ## 4. Analyse heuristique ### 4.1. Visibilité du statut système (solve, DoF, erreurs) - **Points positifs :** la barre DoF est présente en permanence avec un code couleur et une explication 19 eqs = 19 unk (`DofStatusBar.tsx:103-114`). L'état de solve est visible dans le bench (`ResultsPanel.tsx:176-198`). - **Points faibles :** - Le statut de solve utilise un indicateur graphique à barres verticales (`ResidualTrace`, `ResultsPanel.tsx:663-685`) qui ne ressemble à aucun pattern conventionnel et ne communique pas clairement la convergence. - Les erreurs sont affichées dans un bloc rouge en bas du panneau résultats, mais l'utilisateur n'est pas guidé vers le composant en cause. - Le badge WORKSPACE SCÉNARIO vert dans la toolbar est redondant avec le titre de la fenêtre et occupe de la place précieuse. ### 4.2. Cohérence visuelle (typo, couleurs, espacements, bordures, arrondis) C'est le domaine le plus fragilisé. Le système de variables CSS dans `globals.css:11-48` est bien pensé (`--chrome`, `--panel`, `--ink`, `--accent`, `--line`), mais il est constamment contourné par des utilitaires Tailwind directs : - `emerald-500`, `amber-500`, `indigo-600`, `slate-950`, `blue-500` apparaissent dans `Toolbar.tsx`, `NewModelModal.tsx`, `WorkspaceHelpModal.tsx`, `EntropykNode.tsx`. - Les arrondis varient : `rounded-[2px]` dans la palette, `rounded-lg` dans les modales, `rounded-[4px]` dans la toolbar, `rounded-md` dans ResultsPanel. - Les bordures alternent `var(--line)` (gris clair) et `slate-200`/`slate-300` (gris froid). - Les tailles de police sont très fines : 8 px, 9 px, 9.5 px, 10 px, 10.5 px, 11 px. À 8 px, certains labels de port (`portLabel`) et badges deviennent difficiles à lire sur un écran standard. - Les ombres sont soit absentes, soit très présentes (`shadow-2xl` dans les modales), sans hiérarchie claire. ### 4.3. Mapping mental Modelica (workspace, classes, modèles, instances, ports, icônes vs schéma) - **Points positifs :** l'application s'efforce explicitement de mapper les concepts Modelica : `NewModelModal` est intitulé Assistant Nouveau Modèle / Classe Modelica (`NewModelModal.tsx:99`), le module node a un mode icône / mode schéma (`EntropykNode.tsx:323-338`), les ports sont des handles carrés comme en Modelica, les paramètres sont classés en onglets General/Model/Calibration (`PropertiesPanel.tsx:53-90`). - **Points faibles :** - Le passage Workspace ↔ Édition de classe est signalé par un badge vert/orange dans la toolbar, mais il n'y a pas d'arborescence de classes, ni d'onglets de navigation, ni d'indicateur de profondeur (breadcrumbs). Un utilisateur Dymola s'attend à un package browser. - L'icône du module est un SVG hardcodé `ChillerIconSchematic` (`EntropykNode.tsx:457-471`) qui représente un chiller générique, quel que soit le module. Cela rompt le modèle mental icône personnalisée par classe. - Les instances de modules n'ont pas de distinction visuelle claire avec les composants atomiques, hormis la bannière interne. ### 4.4. Liberté et contrôle de l'utilisateur (undo, navigation, édition de modules) - **Undo/redo :** absent du store. L'utilisateur ne peut pas annuler un déplacement, une suppression ou une modification de paramètre. C'est un gap majeur pour un éditeur de schéma. - **Module editor :** le backup du workspace est en mémoire (`page.tsx:27-30`), sans historique. La sauvegarde se fait via `alert` (`page.tsx:219`), ce qui est abrupt. - **Navigation :** pas de breadcrumbs, pas d'onglets multiples, pas de vue d'ensemble du projet. ### 4.5. Prévention des erreurs (validation, feedback) - **Points positifs :** `validateConfig` (`lib/configBuilder.ts:638-723`) vérifie les paramètres requis, les doublons de noms, les ports secondaires incomplets. Le DoF coach donne des conseils actionnables (`lib/dofCoach.ts`). - **Points faibles :** - Les erreurs sont des listes de texte dans `issues` de la toolbar (`Toolbar.tsx:284-291`) et un `ErrorCard` dans ResultsPanel. Elles ne sont pas reliées aux nœuds concernés (pas de highlight, pas de badge sur le composant). - Certains warnings DoF sont difficiles à comprendre pour un utilisateur non expert (Modelica MassFlowSource_T : décoche