Fusion #69 : Alertes unifiees (tests/draco-alertes.test.js)

app/main.py

@@ -405,7 +405,52 @@ class AuthMiddleware(BaseHTTPMiddleware):
         return RedirectResponse(f"/login?next={quote(target, safe='')}", status_code=303)
 
 
+class DracoAlertesCorsMiddleware(BaseHTTPMiddleware):
+    """CORS Fusion #69, limité à GET /api/events.
+
+    Le panneau Alertes unifiées lit ce journal depuis les autres
+    hôtes dracodev, avec credentials. Seules les origines des
+    applications soeurs (résolues comme les liens de la barre :
+    explicite > hôte de la requête > dérivation > défaut officiel,
+    via resoudre_urls_draco()) reçoivent Access-Control-Allow-Origin.
+    Le preflight OPTIONS ne porte aucune donnée et ne contourne
+    aucune authentification : le GET reste soumis à AuthMiddleware
+    (session ou jeton). Toute autre origine ou route traverse sans
+    en-tête CORS — le navigateur bloque alors la lecture, comme
+    avant. Aucune CSP connect-src n'est à ouvrir ici : Kanbante
+    n'énonce que frame-src (console Spark).
+    """
+
+    async def dispatch(self, request, call_next):
+        if request.url.path != "/api/events":
+            return await call_next(request)
+        from app.config import resoudre_urls_draco
+
+        urls = resoudre_urls_draco(request.headers.get("host"))
+        soeurs = {urls.sso_url, urls.flowdeck_url, urls.tiktak_url,
+                  urls.public_url}
+        origine = request.headers.get("origin", "")
+        if origine not in soeurs:
+            return await call_next(request)
+        headers = {
+            "Access-Control-Allow-Origin": origine,
+            "Access-Control-Allow-Credentials": "true",
+            "Vary": "Origin",
+        }
+        if request.method == "OPTIONS":
+            headers.update({
+                "Access-Control-Allow-Methods": "GET",
+                "Access-Control-Allow-Headers": "Content-Type",
+                "Access-Control-Max-Age": "600",
+            })
+            return JSONResponse({}, status_code=200, headers=headers)
+        response = await call_next(request)
+        response.headers.update(headers)
+        return response
+
+
 app.add_middleware(AuthMiddleware)
+app.add_middleware(DracoAlertesCorsMiddleware)
 
 
 def _safe_next(raw: str) -> str:

app/templates/_draco_bar.html

@@ -10,6 +10,7 @@
    wallboard ni l'écran de connexion, volontaires). #}
 <link rel="stylesheet" href="/static/css/draco-barre.css?v={{ version }}">
 <link rel="stylesheet" href="/static/css/draco-panneau.css?v={{ version }}">
+<link rel="stylesheet" href="/static/css/draco-alertes.css?v={{ version }}">
 <script>document.body.classList.add('has-draco-bar');</script>
 <header class="draco-bar" data-current="kanbante">
     <div class="draco-bar-zone draco-bar-gauche">
@@ -71,8 +72,8 @@
        Phase 1 : navigation entre apps et domaine mémorisé localement ;
        le rail pilote le repli natif de la barre latérale, la palette
        ouvre la recherche & commandes native (Ctrl+K) ; les alertes
-       unifiées, la recherche fédérée et Spark arrivent avec les
-       phases suivantes du programme Fusion. */
+       unifiées passent par le panneau draco-alertes.js (Fusion #69,
+       agrégation à la demande, pas une fédération temps réel). */
     window.DRACO_BAR_CONFIG = {
         current: "kanbante",
         /* v0.1.6 : user = initiale auth_user ou K (draco_avatar). Sans
@@ -96,7 +97,7 @@
             if (act === "domaine") { try { localStorage.setItem("draco_domain", el.dataset.dom); } catch (e) { } return; }
             if (act === "rail") { var b = document.getElementById("side-collapse"); if (b) b.click(); return; }
             if (act === "palette") { var p = document.querySelector(".palette-trigger"); if (p) { p.click(); } else { dire("Recherche & commandes : Ctrl+K."); } return; }
-            if (act === "alertes") { dire("Alertes unifiées : arrive avec la fédération (programme Fusion)."); return; }
+            if (act === "alertes") { if (window.DRACO_ALERTES) { window.DRACO_ALERTES.open(); } else { location.href = "/activity"; } return; }
             /* v0.1.6 : le toast placeholder "fédération" est remplacé
                par le menu par défaut du nouveau JS — retourner false le
                demande explicitement (un onAction existant garde sinon la
@@ -119,3 +120,4 @@
 <script defer src="/static/js/draco-barre.js?v={{ version }}"></script>
 <script>window.DRACO_PANNEAU_CONFIG = { api: "{{ agent_url }}" };</script>
 <script defer src="/static/js/draco-panneau.js?v={{ version }}"></script>
+<script defer src="/static/js/draco-alertes.js?v={{ version }}"></script>

static/css/draco-alertes.css

@@ -0,0 +1,39 @@
+/* Alertes unifiées dracodev — Fusion #69. Styles neutres, variables
+ * d'hôte avec replis sombres (les 4 hôtes sont à dominante sombre). */
+.draco-alertes-overlay {
+  position: fixed; inset: 0; z-index: 30000;
+  display: none; align-items: flex-start; justify-content: center;
+  padding: 8vh 16px 16px;
+  background: rgb(0 0 0 / .55); overflow-y: auto;
+}
+.draco-alertes-box {
+  width: 720px; max-width: 100%;
+  background: var(--bg-primary, #1f1f1f);
+  color: var(--text, #eceee9);
+  border: 1px solid var(--border, #333);
+  border-radius: 14px; box-shadow: 0 16px 48px rgb(0 0 0 / .5);
+  padding: 16px 18px 18px;
+}
+.draco-alertes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.draco-alertes-head h2 { margin: 0; font-size: 18px; }
+.draco-alertes-close {
+  border: 1px solid var(--border, #333); background: transparent;
+  color: inherit; border-radius: 8px; padding: 4px 10px; cursor: pointer;
+}
+.draco-alertes-note { font-size: 12.5px; color: var(--text-dim, #999); margin: 8px 0 14px; }
+.draco-alertes-group { font-size: 15px; margin: 18px 0 6px; }
+.draco-alertes-section h3 { font-size: 14px; margin: 12px 0 6px; }
+.draco-alertes-item {
+  border: 1px solid var(--border, #2a2a2a); border-radius: 10px;
+  padding: 9px 12px; margin: 6px 0;
+}
+.draco-alertes-item.is-active { border-color: #e8762c; }
+.draco-alertes-title { font-weight: 600; color: inherit; text-decoration: none; }
+.draco-alertes-title:hover { text-decoration: underline; }
+.draco-alertes-detail {
+  font-size: 13px; color: var(--text-dim, #bbb); margin-top: 2px;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.draco-alertes-meta { font-size: 11.5px; color: var(--text-tertiary, #777); margin-top: 4px; }
+.draco-alertes-empty { font-size: 13px; color: var(--text-dim, #999); padding: 6px 0; }
+.draco-alertes-empty a { color: inherit; }

static/js/draco-alertes.js

@@ -0,0 +1,427 @@
+/* Alertes unifiées dracodev — Fusion #69 (chantier 2).
+ *
+ * Agrégation À LA DEMANDE, pas une fédération temps réel : à chaque
+ * ouverture du panneau (et au chargement, pour la pastille), le module
+ * interroge les API de notifications réellement exposées par chaque
+ * application, avec les identifiants du navigateur (credentials:
+ * "include"). Aucune alerte n'est inventée : une source injoignable
+ * ou non authentifiée affiche son état réel (« Connexion requise »)
+ * avec un lien profond vers sa page native, jamais du vide déguisé.
+ *
+ * Sources réelles (audit #69, 2026-10-28) :
+ *   - Flowdeck : GET {base}/api/notifications?limit=50
+ *     -> { notifications: [{id, ntype, title, message, url, is_read,
+ *     created_at}], unread } ; active = is_read = 0 ; lien = base + url.
+ *   - TikTak : GET {base}/api/notifications
+ *     -> [{id, kind, title, body, task_id, is_read, created_at}] ;
+ *     active = is_read = 0 ; lien = base + "/?task=" + task_id, sinon
+ *     base + "/notifications".
+ *   - Kanbante : GET {base}/api/events?limit=100
+ *     -> { events: [{repo_full_name, issue_number, event_type,
+ *     from_column, to_column, created_at}] } ; AUCUN état lu/non lu
+ *     n'existe dans Kanbante, donc tout y est historique et rien n'y
+ *     est compté comme actif ; lien = base + "/board/" + repo.
+ *   - ObsiGate : AUCUNE notification entrante consultable. Ses
+ *     /api/notify/* sont des canaux d'envoi sortants (admin, secrets
+ *     masqués), pas un journal lisible par l'utilisateur. La section
+ *     ObsiGate le dit et renvoie vers l'accueil d'ObsiGate.
+ *
+ * Résolution des bases (même ordre que barre-apps v0.1.6) :
+ *   1. window.DRACO_BAR.urls déjà résolue par la barre, sinon
+ *      window.DRACO_BAR_CONFIG.urls (config explicite de l'hôte) ;
+ *   2. dérivation -dev par l'hôte courant (hôte -dev dracodev.net) ;
+ *   3. href rendu de l'onglet .draco-apptab[data-app] ;
+ *   4. défaut officiel (production).
+ * ObsiGate n'a pas de .draco-apptab dans tous les cas : l'étape 3 y
+ * lit aussi window.DRACO_URLS (injecté par son backend).
+ * Aucun nom en -dev n'est un défaut : la dérivée -dev ne s'applique
+ * que sur un hôte -dev, exactement comme la barre.
+ *
+ * Le fichier ne touche à AUCUN fichier ui/barre-apps.* : il consomme
+ * seulement l'action "alertes" relayée par l'hôte et DRACO_BAR.setCounts
+ * pour la pastille (repli : mise à jour directe du badge).
+ * Insertion des données : textContent uniquement, jamais innerHTML
+ * avec une valeur venue du serveur.
+ */
+(function (global) {
+  "use strict";
+
+  var DEFAULT_URLS = {
+    obsigate: "https://og.dracodev.net/",
+    flowdeck: "https://flowdeck.dracodev.net/",
+    tiktak: "https://tiktak.dracodev.net/",
+    kanbante: "https://kanbante.dracodev.net/"
+  };
+  var DEV_URLS = {
+    obsigate: "https://og-dev.dracodev.net/",
+    flowdeck: "https://flowdeck-dev.dracodev.net/",
+    tiktak: "https://tiktak-dev.dracodev.net/",
+    kanbante: "https://kanbante-dev.dracodev.net/"
+  };
+  var APP_LABELS = {
+    obsigate: "ObsiGate", flowdeck: "Flowdeck",
+    tiktak: "TikTak", kanbante: "Kanbante"
+  };
+  var APP_ORDER = ["obsigate", "flowdeck", "tiktak", "kanbante"];
+  var EVENT_LABELS = {
+    created: "créée", moved: "déplacée", closed: "fermée",
+    reopened: "rouverte", commented: "commentée"
+  };
+
+  function isDevHost(hostname) {
+    if (!hostname) return false;
+    var h = String(hostname).toLowerCase();
+    if (h.slice(-13) !== ".dracodev.net") return false;
+    var first = h.split(".")[0];
+    return first.length > 4 && first.slice(-4) === "-dev";
+  }
+  function cleanUrl(u) {
+    if (!u || typeof u !== "string") return null;
+    if (u.indexOf("{{") !== -1) return null;
+    if (!u.replace(/\s/g, "")) return null;
+    return u;
+  }
+  function withSlash(u) {
+    return u.charAt(u.length - 1) !== "/" ? u + "/" : u;
+  }
+  function joinUrl(base, path) {
+    var b = withSlash(base);
+    if (!path) return b;
+    if (/^https?:\/\//.test(path)) return path;
+    return b + String(path).replace(/^\//, "");
+  }
+  function parseDate(s) {
+    if (!s) return null;
+    var t = new Date(String(s).indexOf("T") === -1 && String(s).indexOf("Z") === -1
+      ? String(s).replace(" ", "T") + "Z" : s);
+    return isNaN(t.getTime()) ? null : t;
+  }
+  function fmtDate(s) {
+    var t = parseDate(s);
+    if (!t) return s ? String(s).slice(0, 16) : "";
+    try { return t.toLocaleString("fr-FR"); } catch (e) { return t.toISOString().slice(0, 16); }
+  }
+
+  /* Résolution des bases. `env` permet les tests sans navigateur :
+   * { hostname, barUrls, configUrls, tabHrefs, dracoUrls }. */
+  function resolveUrls(env) {
+    env = env || {};
+    var hostname = env.hostname;
+    if (hostname === undefined) {
+      try { hostname = (global.location && global.location.hostname) || ""; } catch (e) { hostname = ""; }
+    }
+    var dev = isDevHost(hostname);
+    var urls = {};
+    APP_ORDER.forEach(function (app) {
+      var u = cleanUrl(env.barUrls && env.barUrls[app])
+        || cleanUrl(env.configUrls && env.configUrls[app]);
+      if (!u && dev) u = DEV_URLS[app] || null;
+      if (!u) {
+        var href = null;
+        if (env.tabHrefs && env.tabHrefs[app]) href = env.tabHrefs[app];
+        else if (typeof document !== "undefined" && document.querySelector) {
+          var tab = document.querySelector('.draco-apptab[data-app="' + app + '"]');
+          href = tab ? tab.getAttribute("href") : null;
+        }
+        u = cleanUrl(href);
+      }
+      if (!u && env.dracoUrls && env.dracoUrls[app]) u = cleanUrl(env.dracoUrls[app]);
+      if (!u) {
+        /* ObsiGate : window.DRACO_URLS injecté par le backend. */
+        try {
+          if (global.DRACO_URLS && global.DRACO_URLS[app]) u = cleanUrl(global.DRACO_URLS[app]);
+        } catch (e) { /* rien */ }
+      }
+      if (!u) u = DEFAULT_URLS[app];
+      urls[app] = withSlash(u);
+    });
+    return urls;
+  }
+  function browserEnv() {
+    var cfg = global.DRACO_BAR_CONFIG || {};
+    var bar = global.DRACO_BAR || {};
+    var tabs = {};
+    try {
+      if (typeof document !== "undefined" && document.querySelectorAll) {
+        var nodes = document.querySelectorAll(".draco-apptab[data-app]");
+        for (var i = 0; i < nodes.length; i++) {
+          tabs[nodes[i].getAttribute("data-app")] = nodes[i].getAttribute("href");
+        }
+      }
+    } catch (e) { /* rien */ }
+    return {
+      barUrls: bar.urls || null, configUrls: cfg.urls || null,
+      tabHrefs: tabs, dracoUrls: global.DRACO_URLS || null
+    };
+  }
+
+  function normalizeFlowdeck(base, payload) {
+    var list = (payload && payload.notifications) || [];
+    return list.map(function (n) {
+      return {
+        app: "flowdeck", id: n.id, title: n.title || "(sans titre)",
+        detail: n.message || "", date: n.created_at || "",
+        active: !n.is_read, state: n.is_read ? "lue" : "active",
+        kind: n.ntype || "", url: joinUrl(base, n.url || "")
+      };
+    });
+  }
+  function normalizeTiktak(base, payload) {
+    var list = Array.isArray(payload) ? payload : (payload && payload.notifications) || [];
+    return list.map(function (n) {
+      return {
+        app: "tiktak", id: n.id, title: n.title || "(sans titre)",
+        detail: n.body || "", date: n.created_at || "",
+        active: !n.is_read, state: n.is_read ? "lue" : "active",
+        kind: n.kind || "",
+        url: n.task_id ? withSlash(base) + "?task=" + n.task_id : joinUrl(base, "notifications")
+      };
+    });
+  }
+  function normalizeKanbante(base, payload) {
+    var list = (payload && payload.events) || [];
+    return list.map(function (e) {
+      var label = EVENT_LABELS[e.event_type] || e.event_type || "événement";
+      var detail = (e.from_column ? e.from_column + " → " : "") + (e.to_column || "");
+      return {
+        app: "kanbante", id: e.id,
+        title: (e.repo_full_name || "?") + " #" + e.issue_number + " — " + label,
+        detail: detail, date: e.created_at || "",
+        active: false, state: label, kind: e.event_type || "",
+        url: joinUrl(base, "board/" + (e.repo_full_name || ""))
+      };
+    });
+  }
+  /* Actives d'abord, puis date décroissante (sans date en dernier). */
+  function sortAlerts(list) {
+    return list.slice().sort(function (a, b) {
+      if (a.active !== b.active) return a.active ? -1 : 1;
+      var da = parseDate(a.date), db = parseDate(b.date);
+      if (da && db) return db - da;
+      if (da) return -1;
+      if (db) return 1;
+      return 0;
+    });
+  }
+  function countActive(list) {
+    var n = 0;
+    list.forEach(function (a) { if (a.active) n++; });
+    return n;
+  }
+
+  /* ---- Rendu (navigateur seulement) ---- */
+  var panel = null, listEl = null, badgeTimer = null;
+
+  function el(tag, cls, text) {
+    var d = document.createElement(tag);
+    if (cls) d.className = cls;
+    if (text !== undefined && text !== null) d.textContent = text;
+    return d;
+  }
+  function ensurePanel() {
+    if (panel) return panel;
+    var ov = el("div", "draco-alertes-overlay");
+    ov.setAttribute("role", "dialog");
+    ov.setAttribute("aria-label", "Alertes unifiées");
+    var box = el("div", "draco-alertes-box");
+    var head = el("div", "draco-alertes-head");
+    head.appendChild(el("h2", "", "Alertes unifiées"));
+    var note = el("p", "draco-alertes-note",
+      "Agrégation à la demande, pas une fédération temps réel : " +
+      "les alertes sont relues dans chaque application à l'ouverture.");
+    var close = el("button", "draco-alertes-close", "✕");
+    close.setAttribute("aria-label", "Fermer");
+    close.addEventListener("click", closePanel);
+    head.appendChild(close);
+    box.appendChild(head);
+    box.appendChild(note);
+    listEl = el("div", "draco-alertes-list");
+    box.appendChild(listEl);
+    ov.appendChild(box);
+    ov.addEventListener("click", function (ev) { if (ev.target === ov) closePanel(); });
+    document.addEventListener("keydown", function (ev) {
+      if (ev.key === "Escape") closePanel();
+    });
+    document.body.appendChild(ov);
+    panel = ov;
+    return ov;
+  }
+  function closePanel() { if (panel) panel.style.display = "none"; }
+
+  function renderSection(title, items, fallback) {
+    var sec = el("section", "draco-alertes-section");
+    sec.appendChild(el("h3", "", title + " (" + items.length + ")"));
+    if (!items.length) {
+      sec.appendChild(el("p", "draco-alertes-empty", fallback));
+      return sec;
+    }
+    items.forEach(function (a) {
+      var row = el("div", "draco-alertes-item" + (a.active ? " is-active" : ""));
+      var main = el("div", "draco-alertes-main");
+      var link = el("a", "draco-alertes-title", a.title);
+      link.href = a.url;
+      main.appendChild(link);
+      if (a.detail) main.appendChild(el("div", "draco-alertes-detail", a.detail));
+      var meta = el("div", "draco-alertes-meta",
+        APP_LABELS[a.app] + (a.kind ? " · " + a.kind : "") +
+        " · " + (a.date ? fmtDate(a.date) : "sans date") + " · " + a.state);
+      main.appendChild(meta);
+      row.appendChild(main);
+      sec.appendChild(row);
+    });
+    return sec;
+  }
+  function render(results, urls) {
+    ensurePanel();
+    listEl.textContent = "";
+    var all = [];
+    APP_ORDER.forEach(function (app) {
+      (results[app] && results[app].items || []).forEach(function (a) { all.push(a); });
+    });
+    var actives = sortAlerts(all.filter(function (a) { return a.active; }));
+    var history = sortAlerts(all.filter(function (a) { return !a.active; }));
+    listEl.appendChild(el("h3", "draco-alertes-group", "Alertes actives"));
+    APP_ORDER.forEach(function (app) {
+      var items = actives.filter(function (a) { return a.app === app; });
+      if (results[app] && results[app].error) {
+        var sec = renderSection(APP_LABELS[app], [], results[app].error);
+        listEl.appendChild(sec);
+      } else if (app === "obsigate") {
+        listEl.appendChild(renderSection(APP_LABELS[app], [],
+          "ObsiGate n'expose aucune notification entrante consultable " +
+          "(ses canaux /api/notify sont des envois sortants, réservés aux administrateurs)."));
+      } else if (items.length) {
+        listEl.appendChild(renderSection(APP_LABELS[app], items, ""));
+      }
+    });
+    if (!actives.length) {
+      listEl.appendChild(el("p", "draco-alertes-empty", "Aucune alerte active dans les applications joignables."));
+    }
+    listEl.appendChild(el("h3", "draco-alertes-group", "Historique"));
+    APP_ORDER.forEach(function (app) {
+      if (results[app] && results[app].error) return; /* déjà signalé ci-dessus */
+      if (app === "obsigate") {
+        var link = el("div", "draco-alertes-empty");
+        var a = el("a", "", "Ouvrir ObsiGate");
+        a.href = urls.obsigate;
+        link.appendChild(a);
+        var sec = el("section", "draco-alertes-section");
+        sec.appendChild(el("h3", "", "ObsiGate (0)"));
+        sec.appendChild(link);
+        listEl.appendChild(sec);
+        return;
+      }
+      var items = history.filter(function (x) { return x.app === app; });
+      listEl.appendChild(renderSection(APP_LABELS[app], items,
+        "Aucun historique disponible pour cette application."));
+    });
+  }
+
+  function fetchJson(url, timeoutMs) {
+    var ctrl = null, timer = null;
+    try {
+      if (typeof AbortController !== "undefined") {
+        ctrl = new AbortController();
+        timer = setTimeout(function () { ctrl.abort(); }, timeoutMs || 8000);
+      }
+    } catch (e) { ctrl = null; }
+    var opts = { credentials: "include" };
+    if (ctrl) opts.signal = ctrl.signal;
+    return fetch(url, opts).then(function (r) {
+      if (timer) clearTimeout(timer);
+      if (!r.ok) {
+        var err = new Error("HTTP " + r.status);
+        err.status = r.status;
+        throw err;
+      }
+      return r.json();
+    }).catch(function (e) {
+      if (timer) clearTimeout(timer);
+      throw e;
+    });
+  }
+  function loadAll() {
+    var urls = resolveUrls(browserEnv());
+    var jobs = {
+      flowdeck: fetchJson(urls.flowdeck + "api/notifications?limit=50")
+        .then(function (p) { return { items: normalizeFlowdeck(urls.flowdeck, p) }; }),
+      tiktak: fetchJson(urls.tiktak + "api/notifications")
+        .then(function (p) { return { items: normalizeTiktak(urls.tiktak, p) }; }),
+      kanbante: fetchJson(urls.kanbante + "api/events?limit=100")
+        .then(function (p) { return { items: normalizeKanbante(urls.kanbante, p) }; })
+    };
+    var keys = Object.keys(jobs);
+    return Promise.all(keys.map(function (k) {
+      return jobs[k].then(function (v) { return [k, v]; }).catch(function (e) {
+        var msg = (e && e.status === 401)
+          ? "Connexion requise sur " + APP_LABELS[k] + " : ouvrez sa page native pour vous y connecter, puis rouvrez ce panneau."
+          : "Application injoignable depuis cet hôte (" + (e && e.message ? e.message : "erreur réseau") + ").";
+        return [k, { items: [], error: msg }];
+      });
+    })).then(function (pairs) {
+      var results = { obsigate: { items: [] } };
+      pairs.forEach(function (kv) { results[kv[0]] = kv[1]; });
+      return { urls: urls, results: results };
+    });
+  }
+  function setBadge(n) {
+    try {
+      if (global.DRACO_BAR && typeof global.DRACO_BAR.setCounts === "function") {
+        global.DRACO_BAR.setCounts({ alertes: n });
+        return;
+      }
+    } catch (e) { /* repli ci-dessous */ }
+    try {
+      document.querySelectorAll('.draco-badge[data-badge="alertes"]').forEach(function (b) {
+        b.textContent = n;
+        b.hidden = !(n > 0);
+      });
+    } catch (e) { /* rien */ }
+  }
+  function refreshBadge() {
+    return loadAll().then(function (r) {
+      var all = [];
+      APP_ORDER.forEach(function (app) {
+        (r.results[app] && r.results[app].items || []).forEach(function (a) { all.push(a); });
+      });
+      setBadge(countActive(all));
+      return countActive(all);
+    }).catch(function () { /* pastille optionnelle : la barre vit sans */ });
+  }
+  function openPanel() {
+    ensurePanel();
+    panel.style.display = "flex";
+    listEl.textContent = "";
+    listEl.appendChild(el("p", "draco-alertes-empty", "Chargement des alertes…"));
+    loadAll().then(function (r) {
+      render(r.results, r.urls);
+      var all = [];
+      APP_ORDER.forEach(function (app) {
+        (r.results[app] && r.results[app].items || []).forEach(function (a) { all.push(a); });
+      });
+      setBadge(countActive(all));
+    }).catch(function () {
+      render({ obsigate: { items: [] } }, resolveUrls(browserEnv()));
+    });
+  }
+
+  var api = {
+    open: openPanel, close: closePanel, refreshBadge: refreshBadge,
+    _test: {
+      resolveUrls: resolveUrls, normalizeFlowdeck: normalizeFlowdeck,
+      normalizeTiktak: normalizeTiktak, normalizeKanbante: normalizeKanbante,
+      sortAlerts: sortAlerts, countActive: countActive,
+      isDevHost: isDevHost, DEFAULT_URLS: DEFAULT_URLS, DEV_URLS: DEV_URLS
+    }
+  };
+  global.DRACO_ALERTES = api;
+  if (typeof module !== "undefined" && module.exports) module.exports = api._test;
+
+  /* Pastille au chargement (après les scripts defer de la barre). */
+  if (typeof document !== "undefined" && document.addEventListener) {
+    document.addEventListener("DOMContentLoaded", function () {
+      if (badgeTimer) clearTimeout(badgeTimer);
+      badgeTimer = setTimeout(refreshBadge, 300);
+    });
+  }
+})(typeof window !== "undefined" ? window : globalThis);

tests/draco-alertes.test.js

@@ -0,0 +1,84 @@
+// Tests unitaires (node:test) du module partagé draco-alertes.js.
+// Exécutés dans la sandbox : node --test draco-alertes.test.js
+// Aucune donnée inventée : les payloads reprennent la forme exacte
+// des API réelles (Flowdeck /api/notifications, TikTak
+// /api/notifications, Kanbante /api/events).
+const test = require("node:test");
+const assert = require("node:assert/strict");
+const t = require("../static/js/draco-alertes.js");
+
+test("resolveUrls: config explicite > hote -dev > href > defaut prod", () => {
+  const prod = t.resolveUrls({ hostname: "tiktak.dracodev.net", tabHrefs: {} });
+  assert.equal(prod.tiktak, "https://tiktak.dracodev.net/");
+  const dev = t.resolveUrls({ hostname: "tiktak-dev.dracodev.net", tabHrefs: {} });
+  assert.equal(dev.flowdeck, "https://flowdeck-dev.dracodev.net/");
+  assert.equal(dev.obsigate, "https://og-dev.dracodev.net/");
+  const explicit = t.resolveUrls({
+    hostname: "tiktak-dev.dracodev.net",
+    configUrls: { flowdeck: "https://flowdeck.dracodev.net/" },
+  });
+  assert.equal(explicit.flowdeck, "https://flowdeck.dracodev.net/");
+  const href = t.resolveUrls({
+    hostname: "example.org",
+    tabHrefs: { kanbante: "https://kanbante-dev.dracodev.net/" },
+  });
+  assert.equal(href.kanbante, "https://kanbante-dev.dracodev.net/");
+  const token = t.resolveUrls({ hostname: "x", tabHrefs: { tiktak: "{{URL_TIKTAK}}" } });
+  assert.equal(token.tiktak, "https://tiktak.dracodev.net/");
+  assert.equal(t.isDevHost("tiktak-dev.dracodev.net.evil.com"), false);
+  assert.equal(t.isDevHost("x-dev.dracodev.net"), true);
+});
+
+test("normalizeFlowdeck: non lues actives, lien = base + url", () => {
+  const items = t.normalizeFlowdeck("https://flowdeck.dracodev.net/", {
+    notifications: [
+      { id: 1, ntype: "mention", title: "Mention", message: "voir page", url: "/collections/3", is_read: 0, created_at: "2026-10-28T10:00:00" },
+      { id: 2, ntype: "reminder", title: "Rappel", message: "", url: "", is_read: 1, created_at: "2026-10-27T09:00:00" },
+    ],
+    unread: 1,
+  });
+  assert.equal(items.length, 2);
+  assert.equal(items[0].active, true);
+  assert.equal(items[0].state, "active");
+  assert.equal(items[0].url, "https://flowdeck.dracodev.net/collections/3");
+  assert.equal(items[1].active, false);
+  assert.equal(items[1].url, "https://flowdeck.dracodev.net/");
+});
+
+test("normalizeTiktak: lien tache, sinon page notifications", () => {
+  const items = t.normalizeTiktak("https://tiktak.dracodev.net/", [
+    { id: 7, kind: "reminder", title: "Rappel", body: "tache", task_id: 42, is_read: 0, created_at: "2026-10-28T08:00:00" },
+    { id: 8, kind: "share", title: "Partage", body: "", task_id: null, is_read: 1, created_at: "2026-10-26T08:00:00" },
+  ]);
+  assert.equal(items[0].url, "https://tiktak.dracodev.net/?task=42");
+  assert.equal(items[1].url, "https://tiktak.dracodev.net/notifications");
+  assert.equal(items[0].active, true);
+});
+
+test("normalizeKanbante: jamais actif (pas d'etat lu/non lu), lien board", () => {
+  const items = t.normalizeKanbante("https://kanbante.dracodev.net/", {
+    events: [
+      { id: 9, repo_full_name: "Projets/fusion-trois-apps", issue_number: 69, event_type: "commented", from_column: "", to_column: "", created_at: "2026-10-28T11:50:00" },
+      { id: 10, repo_full_name: "Projets/fusion-trois-apps", issue_number: 69, event_type: "moved", from_column: "todo", to_column: "review", created_at: "2026-10-28T12:00:00" },
+    ],
+  });
+  assert.equal(items.length, 2);
+  assert.ok(items.every((i) => i.active === false));
+  assert.equal(items[0].url, "https://kanbante.dracodev.net/board/Projets/fusion-trois-apps");
+  assert.match(items[0].title, /#69/);
+});
+
+test("sortAlerts + countActive: actives d'abord, date decroissante", () => {
+  const list = [
+    { app: "tiktak", active: false, date: "2026-10-28T12:00:00" },
+    { app: "flowdeck", active: true, date: "2026-10-26T12:00:00" },
+    { app: "flowdeck", active: true, date: "2026-10-28T12:00:00" },
+    { app: "kanbante", active: false, date: "" },
+  ];
+  const sorted = t.sortAlerts(list);
+  assert.equal(sorted[0].date, "2026-10-28T12:00:00");
+  assert.equal(sorted[0].active, true);
+  assert.equal(sorted[1].date, "2026-10-26T12:00:00");
+  assert.equal(sorted[3].date, "");
+  assert.equal(t.countActive(list), 2);
+});

tests/test_draco_alertes.py

@@ -0,0 +1,46 @@
+"""Fusion #69 — Alertes unifiées (chantier 2, Kanbante).
+
+Kanbante n'a pas de table de notifications : sa source réelle est le
+journal d'événements, déjà exposé par GET /api/events (aucun nouvel
+endpoint). Kanbante ne porte aucun état lu/non lu : ses événements
+sont donc tous de l'historique et ne sont jamais comptés comme
+actifs par le panneau. Couverts ici : placeholder disparu, module
+servi, CORS limité à /api/events pour les seules origines soeurs.
+"""
+
+SOEUR = "https://flowdeck.dracodev.net"
+
+
+def test_barre_alertes_sans_placeholder_et_module_servi(client):
+    r = client.get("/")
+    assert r.status_code == 200
+    assert "Alertes unifiées : arrive avec la fédération" not in r.text
+    assert "draco-alertes.js" in r.text
+    assert "draco-alertes.css" in r.text
+    js = client.get("/static/js/draco-alertes.js").text
+    assert "DRACO_ALERTES" in js
+    assert "api/events" in js
+
+
+def test_events_forme(client):
+    r = client.get("/api/events")
+    assert r.status_code == 200
+    body = r.json()
+    assert body["ok"] is True
+    assert isinstance(body["events"], list)
+
+
+def test_cors_events_soeur_preflight_get_et_tiers(client):
+    r = client.options("/api/events",
+                       headers={"Origin": SOEUR,
+                                "Access-Control-Request-Method": "GET"})
+    assert r.status_code == 200
+    assert r.headers.get("access-control-allow-origin") == SOEUR
+    assert r.headers.get("access-control-allow-credentials") == "true"
+    r2 = client.get("/api/events", headers={"Origin": SOEUR})
+    assert r2.status_code == 200
+    assert r2.headers.get("access-control-allow-origin") == SOEUR
+    r3 = client.options("/api/events",
+                        headers={"Origin": "https://evil.example",
+                                 "Access-Control-Request-Method": "GET"})
+    assert "access-control-allow-origin" not in r3.headers