7.79.0 — Panneau Spark v2 (Lot 1)

- draco-panneau vendangé v2 (identique dans les 4 apps) : Markdown
  rendu par le service, largeur réglable, thème aligné, discussions
  façon Muse (principale + parallèles)
- 25 tests du périmètre verts

static/js/draco-panneau.js

@@ -1,43 +1,129 @@
-/* Panneau Spark — branchement au service d'agents (Fusion, J1 → J5).
+/* Panneau Spark — branchement au service d'agents (Fusion, J1 → Panneau v2).
  *
  * Parle à l'API du service d'agents (contrat de dracodev-commons) :
  *   GET  /api/v1/me               — identité (cookie draco_session)
  *   POST /api/v1/chat             — conversation réelle du noyau (J2) :
- *                                   LLM DeepSeek + outils MCP des apps
- *   GET  /api/v1/conversations/…  — historique de la conversation
- *   GET  /api/v1/executors       — registre (noyau, sous-agents J3,
+ *                                   LLM DeepSeek + outils MCP des apps ;
+ *                                   la réponse arrive avec son HTML
+ *                                   Markdown rendu côté service (v2)
+ *   GET  /api/v1/conversations    — discussions façon Muse (v2) : une
+ *                                   principale perpétuelle + des
+ *                                   parallèles créées/archivées/
+ *                                   supprimées par l'utilisateur
+ *   GET  /api/v1/conversations/…  — historique d'une discussion (les
+ *                                   messages agent portent leur html)
+ *   GET  /api/v1/executors        — registre (noyau, sous-agents J3,
  *                                   externes J4 : état de configuration)
- *   POST /api/v1/missions         — missions longues (J5) : lancement,
- *                                   suivi, rapport, annulation
+ *   POST /api/v1/missions         — missions longues (J5)
+ * Panneau v2 (Lot 1) : rendu Markdown, largeur réglable à la souris
+ * (persistée), thème clair/sombre aligné sur l'app hôte
+ * (html[data-theme], repli prefers-color-scheme, suivi en direct).
  * États honnêtes : service injoignable / session non reconnue / LLM non
  * configuré / exécuteur non configuré sont affichés tels quels. */
 (function () {
   "use strict";
   var API = "https://agent.dracodev.net";
   var convId = null;
-  try { convId = sessionStorage.getItem("draco_panneau_conv") || null; } catch (e) { /* stockage indispo */ }
+  var convKind = null;      // 'principale' | 'parallele'
+  var convTitre = "";
   var etatConnu = false;
-  var historiqueCharge = false;
   var root = null, msgsEl = null, etatEl = null, inputEl = null, sendBtn = null;
+  var titreEl = null, tiroirEl = null;
 
   function domaine() {
     try { return localStorage.getItem("draco_domain") || "pro"; } catch (e) { return "pro"; }
   }
+  function stockerConv() {
+    try {
+      if (convId) sessionStorage.setItem("draco_panneau_conv", convId);
+      else sessionStorage.removeItem("draco_panneau_conv");
+    } catch (e) { /* stockage indisponible */ }
+  }
+  function convStockee() {
+    try { return sessionStorage.getItem("draco_panneau_conv") || null; }
+    catch (e) { return null; }
+  }
+
+  /* ── Thème : suivre l'app hôte ─────────────────────────────── */
+  function themeHote() {
+    var t = document.documentElement.getAttribute("data-theme");
+    if (t === "dark" || t === "light") return t;
+    if (document.documentElement.classList.contains("dark") ||
+        document.body.classList.contains("dark")) return "dark";
+    try {
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+    } catch (e) { /* pas de matchMedia */ }
+    return "light";
+  }
+  function appliquerTheme() {
+    if (root) root.setAttribute("data-draco-theme", themeHote());
+  }
+  function surveillerTheme() {
+    try {
+      new MutationObserver(appliquerTheme).observe(document.documentElement,
+        { attributes: true, attributeFilter: ["data-theme", "class"] });
+      window.matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", appliquerTheme);
+    } catch (e) { /* surveillance facultative */ }
+  }
+
+  /* ── Largeur réglable ──────────────────────────────────────── */
+  function largeurStockee() {
+    try {
+      var v = parseInt(localStorage.getItem("draco_panneau_largeur") || "", 10);
+      return isNaN(v) ? null : v;
+    } catch (e) { return null; }
+  }
+  function appliquerLargeur() {
+    if (!root) return;
+    var v = largeurStockee();
+    root.style.width = v ? Math.min(v, Math.round(window.innerWidth * 0.96)) + "px" : "";
+  }
+  function brancherPoignee(poignee) {
+    poignee.addEventListener("pointerdown", function (ev) {
+      if (window.innerWidth <= 700) return;  // mobile : pleine largeur
+      ev.preventDefault();
+      var x0 = ev.clientX, w0 = root.getBoundingClientRect().width;
+      function bouger(e2) {
+        var w = Math.max(300, Math.min(760, w0 + (x0 - e2.clientX)));
+        root.style.width = w + "px";
+      }
+      function lacher(e2) {
+        document.removeEventListener("pointermove", bouger);
+        document.removeEventListener("pointerup", lacher);
+        var w = Math.round(root.getBoundingClientRect().width);
+        try { localStorage.setItem("draco_panneau_largeur", String(w)); } catch (e) { /* ok */ }
+      }
+      document.addEventListener("pointermove", bouger);
+      document.addEventListener("pointerup", lacher);
+    });
+    poignee.addEventListener("dblclick", function () {
+      try { localStorage.removeItem("draco_panneau_largeur"); } catch (e) { /* ok */ }
+      appliquerLargeur();
+    });
+  }
 
   function construire() {
     root = document.createElement("aside");
     root.className = "draco-panneau";
     root.setAttribute("aria-label", "Spark, l'agent commun");
     root.innerHTML =
+      '<div class="draco-poignee" title="Glisser pour régler la largeur — double-clic : largeur par défaut"></div>' +
       '<div class="draco-panneau-hd">' +
       '  <span style="font-size:19px;color:#7c5cd6">✦</span>' +
       '  <div><div class="titre">Spark — agent commun</div>' +
       '  <div class="soustitre">Service d\'agents dracodev</div></div>' +
       '  <button type="button" class="fermer" aria-label="Fermer le panneau">✕</button>' +
       '</div>' +
-      '<div class="draco-panneau-hd draco-panneau-etat" style="border-bottom:1px solid #e4e5e0;padding-top:8px;padding-bottom:8px">' +
+      '<div class="draco-panneau-hd draco-panneau-etat" style="padding-top:8px;padding-bottom:8px">' +
       '  <span class="point"></span><span class="txt">Connexion au service…</span>' +
       '</div>' +
+      '<div class="draco-disc-bar">' +
+      '  <span class="d-titre">Discussion principale</span>' +
+      '  <button type="button" class="d-btn" data-disc="liste">☰ Discussions</button>' +
+      '  <button type="button" class="d-btn" data-disc="nouvelle">＋ Nouvelle</button>' +
+      '</div>' +
+      '<div class="draco-discussions" hidden></div>' +
       '<div class="draco-panneau-outils">' +
       '  <button type="button" data-outil="aujourdhui">☀ Aujourd\'hui</button>' +
       '  <button type="button" data-outil="approbations">Approbations</button>' +
@@ -54,15 +140,23 @@
     etatEl = root.querySelector(".draco-panneau-etat");
     inputEl = root.querySelector("input");
     sendBtn = root.querySelector("button[type=submit]");
+    titreEl = root.querySelector(".d-titre");
+    tiroirEl = root.querySelector(".draco-discussions");
     root.querySelector(".fermer").addEventListener("click", fermer);
+    root.querySelector('[data-disc="liste"]').addEventListener("click", basculerTiroir);
+    root.querySelector('[data-disc="nouvelle"]').addEventListener("click", nouvelleDiscussion);
     root.querySelector('[data-outil="aujourdhui"]').addEventListener("click", chargerAujourdhui);
     root.querySelector('[data-outil="approbations"]').addEventListener("click", chargerApprobations);
     root.querySelector('[data-outil="missions"]').addEventListener("click", ouvrirMissions);
     root.querySelector("form").addEventListener("submit", envoyer);
+    brancherPoignee(root.querySelector(".draco-poignee"));
+    appliquerTheme();
+    surveillerTheme();
+    appliquerLargeur();
+    window.addEventListener("resize", appliquerLargeur);
     document.addEventListener("keydown", function (ev) {
       if (ev.key === "Escape" && root.classList.contains("open")) fermer();
     });
-    ajouterMsg("sys", "Conversation avec le service d'agents — domaine : " + domaine() + ".");
   }
 
   function ajouterMsg(kind, texte) {
@@ -74,10 +168,26 @@
     return d;
   }
 
+  /* Message agent rendu en Markdown : le HTML vient du service
+   * (rendu + sanitizer côté serveur) ; repli texte si absent. */
+  function ajouterMsgMd(texte, html) {
+    var d = document.createElement("div");
+    d.className = "draco-msg agent md";
+    if (html) d.innerHTML = html;
+    else d.textContent = texte;
+    msgsEl.appendChild(d);
+    msgsEl.scrollTop = msgsEl.scrollHeight;
+    return d;
+  }
+
   function majEtat(cls, texte) {
     etatEl.className = "draco-panneau-hd draco-panneau-etat " + cls;
     etatEl.querySelector(".txt").textContent = texte;
   }
+  function majTitre() {
+    titreEl.textContent = convTitre || "Discussion principale";
+    titreEl.title = titreEl.textContent;
+  }
 
   function verifierIdentite() {
     if (etatConnu) return;
@@ -109,6 +219,200 @@
     });
   }
 
+  /* ── Discussions (façon Muse) ────────────────────────────── */
+  function chargerListeDiscussions() {
+    return fetch(API + "/api/v1/conversations?domain=" + encodeURIComponent(domaine()),
+                 { credentials: "include" })
+      .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); });
+  }
+
+  function demarrerDiscussions() {
+    chargerListeDiscussions()
+      .then(function (d) {
+        var precedente = convStockee();
+        var candidates = (d.paralleles || []).concat(d.principale ? [d.principale] : []);
+        var trouvee = candidates.filter(function (c) { return c.id === precedente; })[0];
+        var active = trouvee || d.principale;
+        if (!active) return;
+        convId = active.id; convKind = active.kind; convTitre = active.title;
+        stockerConv(); majTitre();
+        chargerHistorique();
+      })
+      .catch(function () {
+        ajouterMsg("sys", "Discussions : service injoignable pour le moment.");
+      });
+  }
+
+  function basculerDiscussion(c) {
+    convId = c.id; convKind = c.kind; convTitre = c.title;
+    stockerConv(); majTitre();
+    tiroirEl.hidden = true;
+    msgsEl.innerHTML = "";
+    ajouterMsg("sys", (c.kind === "principale"
+      ? "Discussion principale — le fil sans fin."
+      : "Discussion parallèle : " + c.title) + " · domaine : " + domaine() + ".");
+    chargerHistorique();
+    inputEl.focus();
+  }
+
+  function nouvelleDiscussion() {
+    fetch(API + "/api/v1/conversations", {
+      method: "POST", credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ domain: domaine() })
+    })
+      .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
+      .then(function (c) {
+        basculerDiscussion(c);
+        ajouterMsg("sys", "Nouvelle discussion parallèle créée — elle prendra le titre de ton premier message.");
+      })
+      .catch(function () { ajouterMsg("sys", "Création impossible (service injoignable ?)."); });
+  }
+
+  function actionDiscussion(id, action) {
+    var methode = action === "supprimer" ? "DELETE" : "POST";
+    var url = API + "/api/v1/conversations/" + id + (action === "supprimer" ? "" : "/" + action);
+    return fetch(url, { method: methode, credentials: "include" })
+      .then(function (r) {
+        if (!r.ok) return r.json().catch(function () { return null; }).then(function (e) {
+          throw new Error(e && e.detail ? e.detail : "HTTP " + r.status);
+        });
+        return r.json();
+      });
+  }
+
+  function ligneDiscussion(c, actions) {
+    var ligne = document.createElement("div");
+    ligne.className = "d-item" + (c.id === convId ? " actif" : "");
+    var meta = document.createElement("div");
+    meta.className = "d-meta";
+    var quand = "";
+    try {
+      quand = new Date(c.updated_at * 1000).toLocaleDateString("fr-CA",
+        { day: "numeric", month: "short" });
+    } catch (e) { /* date illisible */ }
+    meta.textContent = (c.kind === "principale" ? "📌 " : "") + c.title;
+    ligne.appendChild(meta);
+    var sous = document.createElement("div");
+    sous.className = "d-sous";
+    sous.textContent = c.nb_messages + " message(s)" + (quand ? " · " + quand : "") +
+      (c.kind === "principale" ? " · perpétuelle" : "");
+    ligne.appendChild(sous);
+    meta.addEventListener("click", function () { basculerDiscussion(c); });
+    sous.addEventListener("click", function () { basculerDiscussion(c); });
+    if (actions && actions.length) {
+      var btns = document.createElement("div");
+      btns.className = "d-actions";
+      actions.forEach(function (a) {
+        var b = document.createElement("button");
+        b.type = "button"; b.textContent = a.label;
+        if (a.danger) b.className = "danger";
+        b.addEventListener("click", function (ev) {
+          ev.stopPropagation();
+          if (a.confirmer && !window.confirm(a.confirmer)) return;
+          actionDiscussion(c.id, a.action)
+            .then(function () {
+              if (c.id === convId && a.action !== "desarchiver") {
+                chargerListeDiscussions().then(function (d) {
+                  if (d.principale) {
+                    basculerDiscussion(d.principale);
+                    ajouterMsg("sys", a.action === "supprimer"
+                      ? "Discussion supprimée — retour à la discussion principale."
+                      : "Discussion archivée — retour à la discussion principale.");
+                  }
+                });
+              }
+              remplirTiroir();
+            })
+            .catch(function (e) { ajouterMsg("sys", "Action refusée : " + e.message); });
+        });
+        btns.appendChild(b);
+      });
+      ligne.appendChild(btns);
+    }
+    return ligne;
+  }
+
+  function remplirTiroir() {
+    tiroirEl.innerHTML = "<div class='d-chargement'>Chargement des discussions…</div>";
+    chargerListeDiscussions()
+      .then(function (d) {
+        tiroirEl.innerHTML = "";
+        var h = document.createElement("div");
+        h.className = "d-section";
+        h.textContent = "Discussion principale";
+        tiroirEl.appendChild(h);
+        if (d.principale) tiroirEl.appendChild(ligneDiscussion(d.principale, []));
+        h = document.createElement("div");
+        h.className = "d-section";
+        h.textContent = "Discussions parallèles";
+        tiroirEl.appendChild(h);
+        if (!d.paralleles.length) {
+          var vide = document.createElement("div");
+          vide.className = "d-vide";
+          vide.textContent = "Aucune pour le moment — bouton « ＋ Nouvelle ».";
+          tiroirEl.appendChild(vide);
+        }
+        d.paralleles.forEach(function (c) {
+          tiroirEl.appendChild(ligneDiscussion(c, [
+            { label: "Archiver", action: "archive" },
+            { label: "Supprimer", action: "supprimer", danger: true,
+              confirmer: "Supprimer définitivement la discussion « " + c.title + " » ?" }
+          ]));
+        });
+        if (d.archivees && d.archivees.length) {
+          h = document.createElement("div");
+          h.className = "d-section";
+          h.textContent = "Archivées";
+          tiroirEl.appendChild(h);
+          d.archivees.forEach(function (c) {
+            tiroirEl.appendChild(ligneDiscussion(c, [
+              { label: "Désarchiver", action: "desarchiver" },
+              { label: "Supprimer", action: "supprimer", danger: true,
+                confirmer: "Supprimer définitivement la discussion « " + c.title + " » ?" }
+            ]));
+          });
+        }
+      })
+      .catch(function () {
+        tiroirEl.innerHTML = "<div class='d-chargement'>Discussions : service injoignable.</div>";
+      });
+  }
+
+  function basculerTiroir() {
+    tiroirEl.hidden = !tiroirEl.hidden;
+    if (!tiroirEl.hidden) remplirTiroir();
+  }
+
+  function chargerHistorique() {
+    if (!convId) return;
+    fetch(API + "/api/v1/conversations/" + convId, { credentials: "include" })
+      .then(function (r) {
+        if (r.status === 404) { convId = null; stockerConv(); return null; }
+        if (!r.ok) return null;
+        return r.json();
+      })
+      .then(function (d) {
+        if (!d) return;
+        convKind = d.kind; convTitre = d.title || convTitre;
+        majTitre();
+        if (!msgsEl.querySelector(".draco-msg")) {
+          ajouterMsg("sys", (d.kind === "principale"
+            ? "Discussion principale — le fil sans fin."
+            : "Discussion parallèle : " + (d.title || "")) + " · domaine : " + domaine() + ".");
+        }
+        var sys = msgsEl.querySelector(".draco-msg.sys");
+        (d.messages || []).forEach(function (m) {
+          var el = m.role === "user"
+            ? ajouterMsg("user", m.content)
+            : ajouterMsgMd(m.content, m.html);
+          if (sys) { msgsEl.insertBefore(el, sys.nextSibling); sys = el; }
+        });
+        msgsEl.scrollTop = msgsEl.scrollHeight;
+      })
+      .catch(function () { /* historique indisponible : on repart à neuf */ });
+  }
+
   function chargerAujourdhui() {
     var bloc = document.createElement("div");
     bloc.className = "draco-auj";
@@ -178,7 +482,7 @@
       .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
       .then(function (d) {
         bloc.style.opacity = ".55";
-        bloc.querySelector(".btns").innerHTML = "<span style='font-size:12.5px;color:#6c7268'>Décision enregistrée : " + esc(d.status) + "</span>";
+        bloc.querySelector(".btns").innerHTML = "<span style='font-size:12.5px'>Décision enregistrée : " + esc(d.status) + "</span>";
       })
       .catch(function () { ajouterMsg("sys", "La décision n'a pas pu être envoyée (service injoignable ?)."); });
   }
@@ -239,12 +543,24 @@
         d.missions.slice(0, 10).forEach(function (m) {
           var ligne = document.createElement("div");
           ligne.className = "m-item";
-          var rapport = m.result ? "<div class='m-rapport'>" + esc(String(m.result).slice(0, 700)) + "</div>" : "";
-          ligne.innerHTML = "<div class='m-entete'><b>" + esc(m.title) + "</b>" +
-            "<span class='m-statut st-" + esc(m.status) + "'>" + esc(STATUTS_MISSION[m.status] || m.status) + "</span></div>" +
-            "<div class='m-meta'>" + esc(m.executor) +
-            (m.meta && m.meta.duree_s ? " · " + esc(m.meta.duree_s) + " s" : "") +
-            (m.meta && m.meta.cout ? " · coût : " + esc(m.meta.cout) : "") + "</div>" + rapport;
+          var entete = document.createElement("div");
+          entete.className = "m-entete";
+          entete.innerHTML = "<b>" + esc(m.title) + "</b>" +
+            "<span class='m-statut st-" + esc(m.status) + "'>" + esc(STATUTS_MISSION[m.status] || m.status) + "</span>";
+          ligne.appendChild(entete);
+          var meta = document.createElement("div");
+          meta.className = "m-meta";
+          meta.textContent = m.executor +
+            (m.meta && m.meta.duree_s ? " · " + m.meta.duree_s + " s" : "") +
+            (m.meta && m.meta.cout ? " · coût : " + m.meta.cout : "");
+          ligne.appendChild(meta);
+          if (m.result) {
+            var rapport = document.createElement("div");
+            rapport.className = "m-rapport md";
+            if (m.result_html) rapport.innerHTML = m.result_html;
+            else rapport.textContent = String(m.result).slice(0, 1200);
+            ligne.appendChild(rapport);
+          }
           if (m.status === "queued" || m.status === "running" || m.status === "paused_question") {
             var btn = document.createElement("button");
             btn.type = "button"; btn.className = "m-annuler"; btn.textContent = "Annuler";
@@ -290,31 +606,6 @@
       .catch(function (e) { ajouterMsg("sys", "Lancement refusé : " + e.message); });
   }
 
-  function chargerHistorique() {
-    if (historiqueCharge || !convId) return;
-    historiqueCharge = true;
-    fetch(API + "/api/v1/conversations/" + convId, { credentials: "include" })
-      .then(function (r) {
-        if (r.status === 404) {
-          convId = null;
-          try { sessionStorage.removeItem("draco_panneau_conv"); } catch (e) { /* ok */ }
-          return null;
-        }
-        if (!r.ok) return null;
-        return r.json();
-      })
-      .then(function (d) {
-        if (!d || !d.messages || !d.messages.length) return;
-        var sys = msgsEl.querySelector(".draco-msg.sys");
-        d.messages.forEach(function (m) {
-          var el = ajouterMsg(m.role === "user" ? "user" : "agent", m.content);
-          if (sys) msgsEl.insertBefore(el, sys.nextSibling), sys = el;
-        });
-        msgsEl.scrollTop = msgsEl.scrollHeight;
-      })
-      .catch(function () { /* historique indisponible : la conversation repart à neuf */ });
-  }
-
   function envoyer(ev) {
     ev.preventDefault();
     var texte = inputEl.value.trim();
@@ -347,8 +638,16 @@
       .then(function (d) {
         if (!d) return;
         convId = d.conversation_id;
-        try { sessionStorage.setItem("draco_panneau_conv", convId); } catch (e) { /* ok */ }
-        attente.textContent = d.reply;
+        convKind = d.kind || convKind;
+        if (d.title) convTitre = d.title;
+        stockerConv(); majTitre();
+        if (d.html) {
+          attente.className = "draco-msg agent md";
+          attente.innerHTML = d.html;
+        } else {
+          attente.textContent = d.reply;
+        }
+        msgsEl.scrollTop = msgsEl.scrollHeight;
         if (d.tools_used && d.tools_used.length) {
           ajouterMsg("sys", "Outils utilisés : " + d.tools_used.join(", ") + " · modèle : " + (d.model || "?"));
         }
@@ -362,10 +661,10 @@
   }
 
   function ouvrir() {
-    if (!root) construire();
+    if (!root) { construire(); demarrerDiscussions(); }
     root.classList.add("open");
+    appliquerTheme();
     verifierIdentite();
-    chargerHistorique();
     setTimeout(function () { inputEl.focus(); }, 300);
   }
   function fermer() { if (root) root.classList.remove("open"); }