system_update/plan_3.md

Plan de développement — Tâche 3

Suivi vivant du développement lié à tache3.md. Objectif : faire évoluer la webapp vers les tuiles machine extensibles, paramètres frontend et layout dashboard cible.

---

0. Position actuelle

• Date de démarrage dev : 2026-06-05.
• État : démarrage après validation tâche 3.
• Validation disponible : validation_tache3.md, verdict accepté avec réserves.
• Périmètre immédiat : webapp React, design system, tuiles machine.

---

1. Réserves à traiter

• Clarifier logos officiels : favicon/app icon original, logos officiels uniquement pour types/outils si autorisés.
• Ajouter ou décider le composant Checkbox/sélection profil post-install.
• Prévoir spec mobile dédiée.
• Aligner largeurs min/max Hermes/terminal avec design system.
• Ajouter état machine erreur/hors ligne dans les maquettes et l'UI.
• Trancher sauvegarde paramètres : auto-save ou bouton save.
• Prévoir composants Select/Dropdown design system.

---

2. Jalons

3.0 — Reprise et cadrage

• Vérifier que plan_8.md est à jour.
• Mettre la tâche 8 en pause.
• Relire tache3.md et validation_tache3.md.
• Inspecter MachineTile, Dashboard, App, ui-kit, CSS.

3.1 — Tuile machine compacte/extensible

• Remplacer les boutons texte système par IconButton.
• Utiliser StatusLed du ui-kit.
• Afficher OS/type/status/dernier check de façon compacte.
• Ajouter sections repliables Docker et Post-install.
• Ajouter état erreur/hors ligne lisible dans la tuile.
• Ajouter CSS dédié sans inline styles excessifs.
• Vérifier TypeScript/build.

3.2 — Layout global webapp

• Ajouter header webapp.
• Ajouter footer/barre de tâche avec métriques minimales.
• Vérifier que Hermes/centre/terminal ne se chevauchent pas.
• Préparer largeurs bornées et future redimension.

3.3 — Paramètres frontend

• Créer vue Paramètres.
• Apparence/thème/zoom/tuiles.
• Layout volets Hermes/terminal.
• Scripts custom, Docker roots, nettoyage logs.
• Persistance backend à préparer, pas localStorage seul.

3.4 — Mode smartphone

• Brainstorm UX dédiée.
• Décider onglets/bottom nav.
• Définir vues prioritaires mobile.

---

3. Avancement du tour en cours

• Contexte tâche 8 vérifié.
• Tâche 3 relue.
• Réserves de validation listées.
• Refonte MachineTile premier incrément terminée.

---

4. Premier incrément — Tuile machine

Fichiers modifiés :

• client/src/features/machines/MachineTile.tsx
• client/src/styles/app.css
• client/src/components/ui-kit.tsx

Ce qui est en place :

• tuile compacte plus dense ;
• actions système en icônes avec tooltips ;
• statut via StatusLed ;
• résumé updates/reboot/dernier check ;
• alerte visible pour état error ou unknown ;
• sections repliables Docker et Post-install ;
• placeholders UI tant que les données Docker/Post-install ne sont pas exposées par le backend ;
• nouveaux alias icônes utiles dans ICON_MAP.

Vérifications :

• tsc --noEmit : OK.
• vitest run : OK, 16 fichiers de test, 42 tests.
• vite build && tsup : OK.

Note :

• Vite signale un warning de chunk JS > 500 kB. Non bloquant pour ce jalon, à traiter plus tard par découpage dynamique si nécessaire.

---

5. Deuxième incrément — Layout global

Fichiers modifiés :

• client/src/App.tsx
• client/src/panels/Dashboard.tsx
• client/src/lib/api.ts
• client/src/styles/app.css

Ce qui est en place :

• header webapp avec identité, résumé machines/updates/jobs/erreurs et toggle thème ;
• footer/barre de tâche style terminal avec machines, apt, jobs, métriques process et load ;
• appel frontend vers /api/system/metrics ;
• largeurs Hermes et terminal bornées avec clamp(...) ;
• Dashboard remonte un résumé à App.

Vérifications :

• tsc --noEmit : OK.
• vitest run : OK, 16 fichiers de test, 42 tests.
• vite build && tsup : OK.

Note :

• warning Vite chunk > 500 kB toujours présent, non bloquant.

---

6. Troisième incrément — Paramètres frontend

Fichiers modifiés :

• client/src/App.tsx
• client/src/panels/SettingsModal.tsx
• client/src/styles/app.css

Ce qui est en place :

• bouton Paramètres dans le header ;
• modale Paramètres avec navigation latérale ;
• catégories Apparence, Tuiles, Volets, Docker, Scripts, Hermes, Terminal, Nettoyage ;
• contrôles prêts à brancher à une future API /api/settings ;
• mention explicite côté UI que la persistance backend reste à venir.

Vérifications :

• tsc --noEmit : OK.
• vitest run : OK, 16 fichiers de test, 42 tests.
• vite build && tsup : OK.

Note :

• warning Vite chunk > 500 kB toujours présent, non bloquant.