serv_benchmark/erreur_restore.md

# Synthèse de la session - Corrections et améliorations

## Date
11 janvier 2026

---

## 1. Système d'icônes personnalisables

### Problème initial
Les boutons utilisaient des chemins d'images codés en dur (`<img src="icons/icons8-save-48.png">`), empêchant le changement de pack d'icônes.

### Solution appliquée
- Remplacement des `<img>` par `data-icon="..."` + `<span class="btn-icon-wrapper"></span>`
- Ajout de `initializeButtonIcons()` après chaque rendu dynamique
- Passage aux SVG inline pour FontAwesome avec `currentColor` (permet la coloration selon le thème)
- Migration des boutons : save, edit, delete, close, check, download, image, pdf

### Fichiers modifiés
- `frontend/js/devices.js`
- `frontend/js/icon-manager.js`
- `frontend/js/utils.js`
- `frontend/css/components.css`

---

## 2. Modernisation des boutons icon-btn

### Problème
Cercle autour des boutons, style daté, icônes forcées en blanc.

### Solution appliquée
- Forme rectangulaire arrondie avec coins doux
- Ombres légères et effets hover/active/focus modernes
- Taille responsive via variables CSS
- Suppression du forçage blanc sur les icônes
- Coloration automatique via `currentColor` (SVG FontAwesome)

### Fichiers modifiés
- `frontend/css/main.css`
- `frontend/css/components.css`

---

## 3. Intégration complète des données mémoire (dmidecode)

### Objectif
Stocker et afficher toutes les informations dmidecode -t memory en base de données.

### Implémentation
- Stockage du résultat brut complet dans `raw_info_json`
- Affichage divisé en :
  - **Général** : capacité max, ECC, nombre de slots (en gras)
  - **Par barrette** : détails spécifiques à chaque DIMM (en gras)
  - **Valeurs non renseignées** : conservées et affichées barrées dans un popup au survol de l'icône "Mémoire"

### Fichiers modifiés
- `backend/app/models/hardware.py`
- `backend/app/api/devices.py`
- `frontend/js/devices.js`
- `frontend/js/device_detail.js`
- `frontend/css/memory-slots.css`

---

## 4. Barres de visualisation RAM/SWAP

### Implémentation
- **Barre RAM** segmentée : utilisée / partagée / libre, avec couleurs du thème
- **Barre SWAP** : utilisée / libre
- Pourcentages affichés au-dessus de la jauge
- Légende en dessous
- Réorganisation des cartes mémoire :
  1. Capacité max carte mère
  2. RAM totale
  3. RAM libre
  4. RAM utilisée
  5. RAM partagée
  6. Slots utilisés / total
  7. ECC (oui/non)

### Fichiers modifiés
- `frontend/js/devices.js`
- `frontend/js/device_detail.js`
- `frontend/css/memory-slots.css`
- `frontend/css/components.css`

---

## 5. Affichage des slots mémoire

### Design appliqué
```
+-----------------------------------------+
dimm0 | 16GB | occupé
+------------------------------------------+
DDR4 3200 MT/s | Unregistered
Form Factor | Voltage | Fabricant
Serial Number (petit)
Part Number (petit)
+-------------------------------------------+
```

### Tooltip complet
- Toutes les infos dmidecode au survol du slot
- Placement intelligent (gauche/droite selon position sur la page)
- Popup en `position: fixed` pour éviter masquage par sections

### Fichiers modifiés
- `frontend/css/memory-slots.css`
- `frontend/js/devices.js`
- `frontend/js/device_detail.js`

---

## 6. Adresses IP et URL personnalisées

### Fonctionnalités ajoutées
- Affichage des IP (hors 127.0.0.1) dans l'en-tête du panneau détail
- Bouton "Éditer lien" sous l'IP pour saisir une URL personnalisée
- Sauvegarde en base de données (champ `ip_url`)
- Clic sur l'IP ouvre l'URL dans un nouvel onglet
- Auto-préfixe `http://` si non spécifié

### Fichiers modifiés
- `backend/app/models/device.py`
- `backend/app/api/devices.py`
- `backend/migrations/018_add_device_ip_url.sql`
- `frontend/js/devices.js`
- `frontend/css/main.css`

---

## 7. Score global avec affichage étoilé

### Design
- Badge avec valeur numérique du score
- Barre de 4 étoiles (pleines/demi/vides)
- Couleur du fond et des étoiles selon le niveau (high/medium/low) et le thème
- Bordure fine colorée selon le résultat

### Calcul
- Échelle 0-4 étoiles selon score / seuil high
- Pas de 0,5 étoile

### Fichiers modifiés
- `frontend/js/devices.js`
- `frontend/css/main.css`

---

## 8. Popup détail du score

### Contenu
- Tableau comparatif "Ce PC" vs "PC standard"
- Lignes : CPU, Mémoire, Disque, Réseau
- Explications de la configuration PC standard en dessous

### Références PC standard (base 100)
```javascript
REF_CPU_SINGLE = 2000
REF_CPU_MULTI = 3500
REF_RAM_SPEED = 2500
REF_DISK_SPEED = 1.5
REF_NETWORK_SPEED = 950
```

### Placement intelligent
- Position `fixed` au premier plan (`z-index: 10002`)
- Voile d'ombre sur le reste de la page
- Ajustement automatique gauche/droite/haut selon place disponible
- Recalcul au frame suivant pour éviter tronquage en bas de page

### Fichiers modifiés
- `frontend/js/devices.js`
- `frontend/css/components.css`

---

## 9. Section Motherboard (carte mère)

### Champs indispensables (affichés en dur, cochés)
- ✅ Fabricant système
- ✅ Nom du produit
- ✅ Famille
- ✅ Type
- ✅ Châssis
- ✅ BIOS fabricant
- ✅ Version BIOS
- ✅ Date publication
- ✅ Révision BIOS
- ✅ UEFI supporté
- ✅ État démarrage
- ✅ État alimentation
- ✅ État thermique
- ✅ Sécurité
- ✅ Nombre câbles alimentation
- ✅ Langue installée

### Autres infos
Affichées dans un popup au survol de l'icône "Motherboard" (placement intelligent).

### Fichiers modifiés
- `frontend/js/devices.js`
- `frontend/js/device_detail.js`

---

## 10. Support multi-CPU

### Détection
- Parsing de tous les processeurs (dmidecode type 4)
- Détection multi-socket (Proc 1, Proc 2, etc.)

### Affichage
- Grille de CPU avec pour chaque socket :
  - Désignation socket
  - Modèle CPU
  - Cores / Threads
  - Fréquences (max / actuelle)
  - Tension

### Champs CPU ajoutés
- ✅ Signature CPU : Family, Model, Stepping
- ✅ Socket
- ✅ Famille
- ✅ Fréquence maximale
- ✅ Fréquence actuelle
- ✅ Tension

### Fichiers modifiés
- `frontend/js/devices.js`
- `frontend/js/device_detail.js`
- `frontend/css/main.css`

---

## 11. Recherche Web du modèle

### Fonctionnalité
- Bouton "recherche web" (icône globe) à droite du modèle
- Tooltip "Recherche sur le Web"
- Moteur de recherche paramétrable dans Settings (Google par défaut, DuckDuckGo, Bing)
- Ouverture dans un nouvel onglet avec le texte du modèle

### Fichiers modifiés
- `frontend/js/devices.js`
- `frontend/js/icon-manager.js`
- `frontend/html/settings.html`
- `frontend/js/settings.js`

---

## 12. Scrollbars personnalisées

### Style appliqué
- Couleurs cohérentes avec le thème actif
- Largeur confortable (10px)
- Séparation fine (1px)
- Effet hover (couleur --color-info)

### Fichiers modifiés
- `frontend/css/main.css`

---

## 13. Page Settings modernisée

### Améliorations
- Style moderne des boutons (gradient, bordure, ombre légère, hover fluide)
- Aperçu des icônes corrigé (inline SVG via `IconManager.inlineSvgIcons()`)
- Toast déplacé sous le header dynamique

### Fichiers modifiés
- `frontend/html/settings.html`
- `frontend/js/settings.js`
- `frontend/css/main.css`
- `frontend/js/utils.js`

---

## 14. Page test-icons.html

### Modernisation
- Structure revue avec classes dédiées
- Style cohérent avec le thème
- Interface user-friendly
- Aperçu compact des icônes par pack

### Fichiers modifiés
- `frontend/test-icons.html`
- `frontend/css/main.css`

---

## 15. Gestion des images

### Amélioration
- Affichage en entier dans la case (`object-fit: contain`)
- Clic ouvre un popup avec l'image en grand
- Suppression des `onclick` inline (remplacés par `data-*` + binding JS)

### Fichiers modifiés
- `frontend/js/devices.js`

---

## 16. Corrections diverses

### CORS backend
- Fix allow_credentials=False pour autoriser allow_origins=["*"]

### Header non permanent
- Suppression du scroll interne "plein écran" dans devices.html pour permettre le scroll de page normal

### Bouton "Éditer lien IP"
- Déplacé sous l'IP (et non à droite)

### Fichiers modifiés
- `backend/app/main.py`
- `frontend/html/devices.html`
- `frontend/css/main.css`

---

## 17. Versions

### Incrémentation appliquée
- **Script bench** : v2.2.0 (dans `scripts/bench.sh`)
- **Backend** : v2.2.0
- **Frontend** : v2.2.0 (dans `frontend/version.json`)
- Affichage des versions dans le header

### Fichiers modifiés
- `scripts/bench.sh`
- `backend/app/api/benchmark.py`
- `frontend/version.json`

---

## Migrations à appliquer

```bash
sqlite3 backend/data/data.db < backend/migrations/018_add_device_ip_url.sql
```

---

## Prochaines étapes possibles

1. Tester le changement de pack d'icônes dans Settings
2. Lancer un bench avec `raw_info.dmidecode` complet pour vérifier l'affichage
3. Vérifier le placement des popups (score, motherboard, mémoire) en bas de page
4. Ajuster les seuils de score si nécessaire
5. Étendre la même édition d'URL IP dans `device_detail.html`
6. Migrer les icônes de sections (carte mère, CPU, etc.) vers des packs personnalisables

---

## Fichiers principaux modifiés

### Backend
- `backend/app/main.py`
- `backend/app/models/device.py`
- `backend/app/models/hardware.py`
- `backend/app/api/devices.py`
- `backend/app/api/benchmark.py`
- `backend/migrations/018_add_device_ip_url.sql`
- `scripts/bench.sh`

### Frontend
- `frontend/html/devices.html`
- `frontend/html/settings.html`
- `frontend/test-icons.html`
- `frontend/js/devices.js`
- `frontend/js/device_detail.js`
- `frontend/js/settings.js`
- `frontend/js/icon-manager.js`
- `frontend/js/utils.js`
- `frontend/css/main.css`
- `frontend/css/components.css`
- `frontend/css/memory-slots.css`
- `frontend/version.json`

---

## Notes techniques

- Les icônes PNG (Icons8) ne peuvent pas être teintées via `currentColor` - utiliser les packs FontAwesome pour la coloration thème
- Les popups utilisent `position: fixed` + `z-index` élevé pour rester au premier plan
- Le placement "intelligent" des tooltips utilise `getBoundingClientRect()` + `requestAnimationFrame()`
- Les scrollbars personnalisées utilisent les pseudo-éléments `::-webkit-scrollbar` (WebKit uniquement)

---

**Fin de la synthèse**