v2026.5.44 — Refonte topbar, personnalisation Apparence, onboarding équipe, fix #1

Refresh / cache / verdicts ghost :
- Rafraîchissement séquentiel (1 fiche à la fois) avec arrêt instantané
  via AbortController.
- Re-fetch checksum frais (basicAutoComplete + redirectHeader).
- Cache merge robuste avec fallback cachedByRef ; cache écrit toutes les
  5 fiches (incrémental).
- Verdicts ghost unifiés : ✓✓ clos/résolu, ✓ Fait (pending), ✓ jaune
  Suspendu, retrait silencieux pour cancelled.
- Statuts EV configurables depuis Paramètres → EasyVista (matching
  insensible à la casse, accents, conjugaisons).
- Mode diagnostic optionnel (Diagnostics) qui logge tout sans rien retirer.

Topbar (vue classique) :
- Sélecteur de date du planning ancré au centre absolu (ne se décale
  plus quand le bouton Arrêter apparaît).
- Bouton Aujourd'hui en toutes lettres.
- Horloge contextuelle réduite à côté.

Personnalisation (Paramètres → Apparence) :
- Couleur de la topbar : 12 presets cliquables + picker custom + champ
  hex. Texte topbar adapté automatiquement (luminance) pour rester lisible.
- Police de l'application : 28 choix (Arial, Helvetica, Verdana, Tahoma,
  Trebuchet, Calibri, Segoe UI, Times New Roman, Georgia, Cambria,
  Garamond, Palatino, Courier, Consolas, Comic Sans, Impact, …) appliquée
  à toute la page (cards, popups, panel admin) avec preview live.
- Export / import du cache et de admin_config.

Vue horizontale :
- Bloc Aujourd'hui + horloge empilé verticalement dans la sidebar.
- Date sélectionnée mise en avant (taille augmentée, gras), date du jour
  + heure réduites à la même petite taille.
- Barre verticale verte à droite des mini-cards clos/résolu (✓✓), avec
  décalage du ✓✓ pour ne pas chevaucher.
- Sidebar adopte la couleur de topbar custom (titre, horloge, today-block,
  date sélectionnée, boutons, theme-toggle, séparateurs translucides
  cohérents via color-mix).

Stats globales :
- Nouveau compteur 'X faits / Y clos' entre (matin · après-midi) et
  tech. dispo.
- Vue classique : séparateur '//' après clos.
- Vue horizontale (sidebar) : barre horizontale 1px de séparation.

Onboarding équipe :
- Carte centrée propre (icône, titre, description, bouton 'Ouvrir
  paramètres') quand aucun technicien n'est sélectionné. Bouton ouvre
  directement la section Équipe du panel admin.

Bugfix :
- Issue #1 (Pompier + Absence) : les deux badges s'affichent désormais
  avec '/' au lieu de masquer l'absence.
- Absences récurrentes restaurées au switch de groupe (étaient invisibles
  alors qu'en storage).
- Barre de progression / bannière session expirée suivent la hauteur
  dynamique de la topbar (--topbar-height via ResizeObserver).
- STATUS_FR regex limite 30 → 200 chars.
- Description action décodée proprement (\u0022, <br>, HTML strippé) ;
  préfixe 'login:' retiré du commentaire technicien.
- Flèche '↗' retirée des références cliquables.

CHANGELOG.md

@@ -9,6 +9,134 @@
 
 ---
 
+## v2026.5.44 — Refonte topbar, personnalisation Apparence, onboarding équipe, refresh séquentiel
+
+> Refonte visuelle de la topbar (vue classique + horizontale), nouveau panneau
+> de personnalisation (couleur de la barre du haut + police de l'application
+> sur toute la page), nouvelle expérience d'onboarding quand aucun technicien
+> n'est sélectionné, refonte du système de verdicts ghost (✓✓ clos / ✓ Fait /
+> ✓ Suspendu), refresh strictement séquentiel avec arrêt instantané, et
+> plusieurs corrections.
+
+### Refresh / cache / verdicts ghost
+
+- Rafraîchissement **séquentiel** (1 fiche à la fois) au lieu de 5 workers
+  parallèles → arrêt instantané via le bouton « ✕ Arrêter » (AbortController),
+  plus de races DOM, ordre d'affichage cohérent (pompier d'abord, puis alpha,
+  puis matin → après-midi).
+- Re-fetch du checksum frais via `basicAutoComplete` + `redirectHeader`
+  (plus de fiche périmée entre sessions).
+- Cache merge robuste (fallback `cachedByRef` quand `actionId` change) et
+  cache écrit toutes les 5 fiches pendant le refresh (incrémental).
+- **Système de verdicts ghost unifié** : ✓✓ vert (clos / résolu officiel),
+  ✓ gris « Fait » (terminated-pending), ✓ jaune « Suspendu »
+  (terminated-suspended), retrait silencieux pour cancelled / cancelled-
+  reservation / cancelled-absence.
+- Statuts EV (clos / résolu / annulé / suspendu) éditables depuis Paramètres
+  → EasyVista avec matching insensible à la casse, accents et conjugaisons.
+- Mise à jour live du tooltip et du popup épinglé après un verdict (plus
+  besoin de fermer/réouvrir).
+- Clic immédiat sur la carte dès que le verdict tombe (avant la fin du
+  refresh complet).
+- Boutons « Actualiser » (rapide, ne re-télécharge pas les fiches déjà
+  connues) vs « Tout recharger » (force tout sauf les ✓✓ déjà clos).
+- **Mode diagnostic optionnel** (Paramètres → Diagnostics) : aucune
+  intervention disparue n'est retirée silencieusement, tout est tracé sous
+  le préfixe `[disparition]` dans la console F12 pour debug. En PROD
+  (par défaut), les iv `cancelled` sont bien retirées comme avant.
+
+### Topbar — vue classique
+
+- Sélecteur de date du planning **ancré au centre absolu** : il ne se décale
+  plus quand le bouton « ✕ Arrêter » apparaît à droite pendant un
+  rafraîchissement.
+- Bouton **« Aujourd'hui »** affiché en toutes lettres (au lieu de « Auj. »).
+- Horloge contextuelle (date du jour + heure) réduite et discrète, à côté
+  du bouton Aujourd'hui dans un cadre encadré.
+- Date du planning agrandie et neutre (couleur stable, plus de bascule
+  selon la date sélectionnée).
+
+### Personnalisation — Paramètres → Apparence
+
+- **Couleur de la barre du haut** : 12 presets cliquables (Défaut, Blanc,
+  Gris clair, Anthracite, Bleu DGNSI, Marine, Vert sapin, Brique, Violet,
+  Rouge, Bleu pastel, Vert pastel) + picker custom + champ hex `#rrggbb`
+  + bouton « Réinitialiser ».
+- La couleur s'applique uniquement à la topbar (et à la sidebar quand on
+  est en vue horizontale).
+- Le texte de la topbar (titre, horloge, date, capture-info, badges,
+  boutons) s'adapte automatiquement (clair/foncé) selon la **luminance**
+  de la couleur choisie pour rester toujours lisible.
+- **Police de l'application** : 28 choix organisés en familles
+  (sans-serif : Arial, Helvetica, Verdana, Tahoma, Trebuchet, Calibri,
+  Segoe UI, Gill Sans, Futura, Optima ; serif : Times New Roman, Georgia,
+  Cambria, Garamond, Palatino, Bookman ; monospace : Courier New, Consolas,
+  Lucida Console, JetBrains Mono ; display : Comic Sans MS, Impact,
+  Brush Script, Copperplate ; condensée : Arial Narrow). La police choisie
+  s'applique à **toute la page** (topbar, cards, popups, tooltips, panel
+  admin) et chaque option du select s'affiche dans sa propre police pour
+  prévisualiser le rendu, avec un aperçu live à droite.
+- Export / import du cache et de `admin_config` depuis Paramètres →
+  Diagnostics.
+
+### Vue horizontale
+
+- Bloc « Aujourd'hui + horloge » empilé verticalement dans la sidebar, dans
+  le même cadre encadré que la vue classique.
+- Date sélectionnée mise en avant (taille augmentée, en gras), date du
+  jour et heure réduites à la même petite taille pour rester discrètes.
+- **Barre verticale verte** ajoutée à droite des mini-cards quand le
+  ticket est officiellement clôturé / résolu (✓✓), avec léger décalage du
+  ✓✓ pour ne pas chevaucher la barre.
+- Quand l'utilisateur a choisi une couleur de topbar, la sidebar prend
+  aussi la couleur : titre, horloge, capture-info, stats, today-block,
+  date sélectionnée, boutons, theme-toggle et séparateurs adoptent une
+  teinte translucide cohérente (via `color-mix`) qui contraste correctement
+  sur n'importe quel fond.
+
+### Statistiques globales
+
+- Nouveau compteur **« X faits / Y clos »** entre `(matin · après-midi)`
+  et `tech. dispo`. Inclut tous les tickets terminés (clos/résolus officiels
+  + verdicts ghost « Fait » / « Suspendu »).
+- En vue classique, séparateur `//` après `clos` (au lieu de `·`).
+- En vue horizontale (sidebar), une **barre horizontale 1px** sépare le
+  bloc interventions/faits/clos du bloc tech. dispo + pompiers / absents.
+
+### Onboarding équipe (1ʳᵉ install ou config vide)
+
+- L'erreur générique « Aucun technicien sélectionné » est remplacée par une
+  **carte d'onboarding centrée** comprenant :
+  - icône (👥) cerclée en couleur accent du thème ;
+  - titre « Aucune équipe configurée » ;
+  - description claire ;
+  - bouton primary **« Ouvrir paramètres »** qui ouvre directement le panel
+    admin sur la section Équipe.
+- Carte centrée verticalement et horizontalement dans la zone disponible,
+  identique en vue classique et horizontale.
+
+### Bugfix
+
+- **Issue #1 (Pompier + Absence)** : si un tech est à la fois pompier ET
+  absent, les deux badges s'affichent désormais avec un séparateur `/` au
+  lieu de masquer l'absence derrière le badge pompier.
+- **Absences récurrentes** : quand on changeait de groupe puis revenait au
+  groupe initial, les jours d'absence cochés pour les techniciens
+  disparaissaient visuellement (la donnée elle-même restait en storage).
+  Correction : restauration depuis `cfg.recurringAbsences` à chaque
+  re-render.
+- **Barre de progression / bannière session expirée** : suivent désormais
+  la hauteur dynamique de la topbar (variable CSS `--topbar-height` mesurée
+  par un `ResizeObserver`). Plus de chevauchement quand on scrolle.
+- **STATUS_FR regex** : limite augmentée de 30 à 200 caractères (battait
+  sur « Suspendu : Attente info bénéficiaire/demandeur »).
+- **Description action** : décodage `" → "`, `<br> → \n`, HTML
+  strippé. Préfixe « login: » retiré du commentaire technicien dans le
+  tooltip / popup.
+- **Tooltip référence** : flèche « ↗ » retirée du lien cliquable.
+
+---
+
 ## v2026.5.43 — Fix Firefox : positionnement menu dock + stabilité popup pin/unpin
 
 ### Menu hover sur pastille du dock (popup réduit)

firefox-updates.json

@@ -2,10 +2,15 @@
   "addons": {
     "planification-dgnsi@netaplaid.ch": {
       "updates": [
+        {
+          "version": "2026.5.44",
+          "update_link": "https://gitea.netaplaid.ch/FroSteel/Planification/releases/download/v2026.5.44/planification-v2026.5.44-firefox.xpi",
+          "update_hash": "sha256:e56e87d59c465e5df828b18d74376f561bf34e81e21bf4d70989a709e89217e0"
+        },
         {
           "version": "2026.5.43",
           "update_link": "https://gitea.netaplaid.ch/FroSteel/Planification/releases/download/v2026.5.43/planification-v2026.5.43-firefox.xpi",
-          "update_hash": "sha256:2bdf1b0a781080f4a86600579eb8c2049e060b9e8a0439212f3f29d280d5b93e"
+          "update_hash": "sha256:7052200fab3c9266d5b809398a00dac768679ab2e96e4e147e4bb86c4ab648e5"
         },
         {
           "version": "2026.5.42",

src/background.js

@@ -299,14 +299,39 @@ async function fetchPlanningXml(origin, phpsessid, unixDate) {
  * @param {string} origin - origine EasyVista (pour construire le Referer)
  * @param {object} [opts] - options fetch (method, body, headers supplémentaires)
  */
+// registre global des AbortController des fetchs EV en vol. Permet
+// au foreground (viewer.js) d'envoyer un message "abortAllFetches" pour
+// tuer instantanément les requêtes en cours quand l'user clique "Arrêter".
+const _evFetchControllers = new Set();
+function _abortAllEvFetches() {
+  for (const c of _evFetchControllers) {
+    try { c.abort(); } catch (e) { /* ignore */ }
+  }
+  _evFetchControllers.clear();
+}
+
 async function evFetch(url, origin, opts = {}) {
   const defaultHeaders = {
     "Referer": `${origin}/index.php?eventName=HelpDesk_PlanningItem`,
     "X-Requested-With": "XMLHttpRequest"
   };
   const headers = Object.assign({}, defaultHeaders, opts.headers || {});
-  const fetchOpts = Object.assign({ credentials: "include" }, opts, { headers });
-  return await fetch(url, fetchOpts);
+  // on ne remplace pas un signal explicitement passé par l'appelant.
+  let controller = null;
+  if (!opts.signal) {
+    controller = new AbortController();
+    _evFetchControllers.add(controller);
+  }
+  const fetchOpts = Object.assign(
+    { credentials: "include" },
+    opts,
+    { headers, signal: opts.signal || (controller && controller.signal) }
+  );
+  try {
+    return await fetch(url, fetchOpts);
+  } finally {
+    if (controller) _evFetchControllers.delete(controller);
+  }
 }
 
 /**
@@ -376,10 +401,10 @@ async function fetchFicheHtml(origin, phpsessid, formLink) {
       continue;
     }
 
-    // Sinon : on retourne ce qu'on a
-    return html;
+    // on signale au foreground si la dernière réponse est tronquée pour
+    // qu'il puisse afficher un ⚠ et probe la session.
+    return { html, truncated: html.length < MIN_VALID_SIZE, size: html.length };
   }
-  // Ne devrait pas arriver (la boucle fait return avant)
   throw new Error("fetchFicheHtml: max retries reached");
 }
 
@@ -1225,6 +1250,13 @@ async function detectTeamFromEV(origin, phpsessid, groupIdArg, supportIdsArg) {
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
   (async () => {
     try {
+      // abort de toutes les requêtes EV en vol (clic sur "Arrêter").
+      if (msg.type === "abortAllFetches") {
+        _abortAllEvFetches();
+        sendResponse({ ok: true });
+        return;
+      }
+
       if (msg.type === "getSession") {
         const session = await findEasyVistaSession();
         sendResponse({ ok: true, session });
@@ -1282,12 +1314,14 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
           return;
         }
         try {
-          const html = await fetchFicheHtml(session.origin, session.phpsessid, msg.formLink);
+          // fetchFicheHtml renvoie maintenant { html, truncated, size }.
+          const result = await fetchFicheHtml(session.origin, session.phpsessid, msg.formLink);
+          const html = result.html;
           if (looksLikeLoginPage(html)) {
             sendResponse({ ok: false, error: "session_expired" });
             return;
           }
-          sendResponse({ ok: true, html, session });
+          sendResponse({ ok: true, html, session, truncated: !!result.truncated, size: result.size });
         } catch (err) {
           sendResponse({
             ok: false,
@@ -1299,6 +1333,34 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
         return;
       }
 
+      // probe rapide de session — fetch un endpoint léger pour vérifier
+      // que PHPSESSID est toujours valide. Renvoie ok=false/error=session_expired
+      // si la session est morte.
+      if (msg.type === "checkSession") {
+        const session = await findEasyVistaSession();
+        if (!session) {
+          sendResponse({ ok: false, error: "no_session" });
+          return;
+        }
+        try {
+          const url = `${session.origin}/index.php?eventName=HelpDesk_PlanningItem&PHPSESSID=${encodeURIComponent(session.phpsessid)}`;
+          const r = await evFetch(url, session.origin);
+          if (!r.ok) {
+            sendResponse({ ok: false, error: classifyHttpStatus(r.status), httpStatus: r.status });
+            return;
+          }
+          const txt = await r.text();
+          if (looksLikeLoginPage(txt) || txt.length < 5000) {
+            sendResponse({ ok: false, error: "session_expired" });
+            return;
+          }
+          sendResponse({ ok: true });
+        } catch (err) {
+          sendResponse({ ok: false, error: "fetch_failed", detail: err.message || String(err) });
+        }
+        return;
+      }
+
       if (msg.type === "fetchTimelineApi") {
         const session = await findEasyVistaSession();
         if (!session) {

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Planification",
-  "version": "2026.5.43",
+  "version": "2026.5.44",
   "description": "Vue claire et rapide du planning des techniciens EasyVista. Développé par Quentin Rouiller — DGNSI, Canton de Vaud.",
   "permissions": [
     "activeTab",

src/viewer.html

@@ -28,26 +28,28 @@
               type="button" aria-label="Utilisateur connecté"
               title="Utilisateur — cliquer pour accéder aux paramètres">?</button>
       <h1 id="app-title">Planification</h1>
+      <!-- R13u : bloc "Aujourd'hui + horloge" encadré, suivi DIRECTEMENT
+           du statut d'actualisation (MAJ + ✓), puis le sélecteur de date
+           du planning. -->
+      <div id="today-block" class="today-block">
+        <button id="nav-today" class="btn btn-today" title="Revenir au jour courant">Aujourd'hui</button>
+        <div id="app-clock" class="app-clock" title="Date et heure actuelles">
+          <div id="app-clock-date" class="app-clock-date"></div>
+          <div id="app-clock-time" class="app-clock-time"></div>
+        </div>
+      </div>
+      <span id="capture-info" class="capture-info"></span>
+      <span id="refresh-check" class="refresh-check hidden" title="Mise à jour terminée">✓</span>
       <div class="date-nav">
         <button id="nav-prev" class="btn btn-nav" title="Jour précédent" aria-label="Jour précédent">◀</button>
-        <!-- v2026.5.17 : input date custom qui affiche "Vendredi 24.04.2026" -->
         <div class="date-custom-wrapper">
-          <div id="date-custom" class="date-custom" role="button" tabindex="0" title="Choisir une date">
+          <div id="date-custom" class="date-custom" role="button" tabindex="0" title="Choisir une date du planning">
             <span id="date-custom-label"></span>
-            <span class="date-custom-icon">📅</span>
           </div>
           <input type="date" id="date-picker" class="date-input-hidden">
         </div>
         <button id="nav-next" class="btn btn-nav" title="Jour suivant" aria-label="Jour suivant">▶</button>
-        <button id="nav-today" class="btn btn-today" title="Aujourd'hui">Auj.</button>
       </div>
-      <span id="capture-info" class="capture-info"></span>
-      <span id="refresh-check" class="refresh-check hidden" title="Mise à jour terminée">✓</span>
-    </div>
-    <!-- v2026.5.16 : date complète du jour au-dessus de l'heure dans la topbar -->
-    <div id="app-clock" class="app-clock" title="Date et heure actuelles">
-      <div id="app-clock-date" class="app-clock-date"></div>
-      <div id="app-clock-time" class="app-clock-time"></div>
     </div>
     <!-- v5.0.9 : compteur de session EasyVista (visible < 5 min restantes) -->
     <div id="app-session" class="app-session hidden"></div>