docs: spec jalon 2 - séparation terminal par machine + remontée d'état

Suite au test live: retour d'usage (amelioration.md) sur la séparation
des sorties entre machines distinctes dans le terminal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-05 05:05:27 +02:00
parent 50df83fda1
commit 8d105b63ec
@@ -63,6 +63,8 @@ Le design system impose (consigne) : variables CSS uniquement, composants exista
`App.tsx` orchestre : `<Header>` en haut, la rangée 3 volets au milieu (flex:1), `<StatusBar>` en bas.
**Remontée d'état dans `App`** : la liste des machines, les compteurs d'updates, la machine sélectionnée et le thème vivent désormais dans `App` (le Dashboard les reçoit en props, plus de fetch local autonome). Cela alimente le Header (action Ajouter), la StatusBar (N machines, M updates) et le TerminalPanel (machine sélectionnée). Le chargement des machines + snapshots se fait dans `App` via une fonction `load()` passée au Dashboard pour rafraîchir après action.
## Composants
### Nouveaux
@@ -80,7 +82,7 @@ Le design system impose (consigne) : variables CSS uniquement, composants exista
- **`AddMachineModal.tsx`** : enveloppé dans `<Popup open onClose title="Ajouter une machine" footer={…}>` ; footer = `<Button variant="ghost" onClick={onClose}>Annuler</Button>` + `<Button variant="primary" icon="download" onClick={submit}>Ajouter</Button>` ; champs en inputs tokenisés ; erreur affichée avec `<StatusLed status="err">` + texte `--err`. Logique de soumission inchangée (POST /api/machines).
- **`Dashboard.tsx`** : retirer le bouton « + Ajouter » local (déplacé dans le Header) ; le Dashboard expose l'ouverture de la modale via prop/état remonté à `App`. Grille de tuiles inchangée. État vide : texte `--ink-3`.
- **`HermesPanel.tsx`** : en-tête `.label` + `<Icon name="bell">` (ou autre), texte stub inchangé.
- **`TerminalPanel.tsx`** : ajouter un petit en-tête `.label` « TERMINAL · {machineId ?? "—"} » au-dessus du conteneur xterm. xterm inchangé.
- **`TerminalPanel.tsx`** : recevoir la **machine sélectionnée** (objet `MachineView`, pas juste l'id) depuis `App`. En-tête clair au-dessus du xterm : `<StatusLed status>` + `.label` « TERMINAL » + nom de la machine (`.mono`) + hostname (`--ink-3`). **Séparation franche entre machines** (retour d'usage, `amelioration.md`) : à chaque changement de machine, écrire une bannière de séparation dans le terminal, p. ex. `\n──────── <nom> (<hostname>) ────────\n` (couleur accent), avant de rejouer le flux. Le terminal est déjà recréé par machine (`useEffect` deps) ; l'en-tête nommé + la bannière rendent le passage d'une machine à l'autre non ambigu (fini l'UUID). xterm inchangé sinon.
## Flux thème
@@ -103,5 +105,6 @@ Au montage de `App` : `applyTheme(getInitialTheme())`. État `theme` dans `App`
- [ ] Header avec titre, bouton Ajouter, bascule thème fonctionnelle et persistée.
- [ ] Status bar tmux avec mode, compteurs et horloge live.
- [ ] MachineTile utilise StatusLed + IconButton (tooltips) ; AddMachineModal utilise Popup + Button.
- [ ] Le terminal identifie clairement la machine courante (nom + hostname, plus d'UUID) et marque une séparation franche au passage d'une machine à l'autre.
- [ ] Les deux thèmes sont cohérents et lisibles.
- [ ] `pnpm check`, `pnpm build`, et les tests des helpers passent.