diff --git a/docs/superpowers/specs/2026-06-05-jalon2-polish-design-system-design.md b/docs/superpowers/specs/2026-06-05-jalon2-polish-design-system-design.md index 946098c..b9cdf0d 100644 --- a/docs/superpowers/specs/2026-06-05-jalon2-polish-design-system-design.md +++ b/docs/superpowers/specs/2026-06-05-jalon2-polish-design-system-design.md @@ -63,6 +63,8 @@ Le design system impose (consigne) : variables CSS uniquement, composants exista `App.tsx` orchestre : `
` en haut, la rangée 3 volets au milieu (flex:1), `` 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 `` ; footer = `` + `` ; champs en inputs tokenisés ; erreur affichée avec `` + 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` + `` (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 : `` + `.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──────── () ────────\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.