ui(htr-united): afficher le badge "Mode démo" quand le catalogue distant fallback

Phase 4.4 du chantier post-rewrite avait exposé ``is_demo`` dans la
réponse de ``/api/htr-united/catalogue`` (true quand le serveur ne
peut pas joindre le catalogue distant et bascule sur l'échantillon
embarqué), mais le frontend n'utilisait pas ce flag — l'utilisateur
voyait toujours "Catalogue HTR-United" sans distinguer démo vs remote.

Ajouté :
- ``_view_import.html`` : bandeau ``#htr-demo-banner`` (display:none
par défaut) sous le titre HTR-United, avec i18n keys
``htr_demo_badge`` (titre) et ``htr_demo_note`` (explication).
- ``web-app.js`` : helper ``_updateHtrDemoBanner(isDemo)`` qui
toggle l'affichage du bandeau ; appelé depuis ``initHTRFilters``
(au chargement) et ``searchHTRUnited`` (après chaque recherche)
avec ``Boolean(d.is_demo)``.
- i18n FR + EN pour les nouveaux labels.

Tests : ``TestHtrUnitedDemoBadgeBinding`` (2 tests) vérifie la
présence du bandeau dans le template + l'appel correct au binding
depuis le JS.

https://claude.ai/code/session_01ArfZ8kcgv7Cyda7VbJVmpn

picarones/interfaces/web/static/web-app.js

@@ -116,6 +116,8 @@ const T = {
     engines_llm_title: "LLMs disponibles",
     import_htr_title: "Import HTR-United",
     import_htr_desc: "Catalogue communautaire de corpus HTR/OCR pour documents patrimoniaux.",
+    htr_demo_badge: "Mode démo",
+    htr_demo_note: "le catalogue distant est inaccessible ; affichage d'un échantillon embarqué.  Pour le catalogue complet, vérifier la connectivité réseau du serveur.",
     import_hf_title: "Import HuggingFace Datasets",
     import_hf_desc: "Datasets OCR/HTR publics depuis HuggingFace Hub (IAM, RIMES, CATMuS, Gallica…).",
     import_search_label: "Recherche",
@@ -200,6 +202,8 @@ const T = {
     engines_llm_title: "Available LLMs",
     import_htr_title: "Import from HTR-United",
     import_htr_desc: "Community catalogue of HTR/OCR datasets for heritage documents.",
+    htr_demo_badge: "Demo mode",
+    htr_demo_note: "the remote catalogue is unreachable; showing an embedded sample.  For the full catalogue, check the server's network connectivity.",
     import_hf_title: "Import from HuggingFace Datasets",
     import_hf_desc: "Public OCR/HTR datasets from HuggingFace Hub (IAM, RIMES, CATMuS, Gallica…).",
     import_search_label: "Search",
@@ -866,10 +870,25 @@ async function loadEngines() {
 }
 
 // ─── HTR-United ──────────────────────────────────────────────────────────────
+function _updateHtrDemoBanner(isDemo) {
+  /** Affiche / masque le bandeau "Mode démo" sous le titre HTR-United.
+   *
+   * Phase 4.4 du chantier post-rewrite : l'endpoint
+   * ``/api/htr-united/catalogue`` retourne désormais le champ
+   * ``is_demo`` (``true`` quand le serveur ne peut pas joindre le
+   * catalogue distant et fallback sur l'échantillon embarqué).  Avant,
+   * l'UI annonçait "Catalogue HTR-United" sans distinguer mode démo
+   * vs catalogue complet, vecteur de confusion utilisateur. */
+  const el = document.getElementById("htr-demo-banner");
+  if (!el) return;
+  el.style.display = isDemo ? "block" : "none";
+}
+
 async function initHTRFilters() {
   try {
     const r = await fetch("/api/htr-united/catalogue");
     const d = await r.json();
+    _updateHtrDemoBanner(Boolean(d.is_demo));
     const langSel = document.getElementById("htr-lang-filter");
     const scriptSel = document.getElementById("htr-script-filter");
     langSel.innerHTML = `<option value="">${t("all")}</option>`;
@@ -893,6 +912,7 @@ async function searchHTRUnited() {
     const url = `/api/htr-united/catalogue?query=${encodeURIComponent(q)}&language=${encodeURIComponent(lang2)}&script=${encodeURIComponent(script)}`;
     const r = await fetch(url);
     const d = await r.json();
+    _updateHtrDemoBanner(Boolean(d.is_demo));
     if (d.entries.length === 0) {
       container.innerHTML = `<div style="color: var(--text-muted); font-size:12px;">${lang==="fr"?"Aucun résultat.":"No results."}</div>`;
       return;

picarones/interfaces/web/templates/_view_import.html

@@ -7,6 +7,12 @@
       <p style="font-size:12px; color:var(--text-muted); margin-bottom:12px;" data-i18n="import_htr_desc">
         Catalogue communautaire de corpus HTR/OCR pour documents patrimoniaux.
       </p>
+      <!-- Badge mode démo (Phase 4.4 chantier post-rewrite) — affiché
+           si le serveur ne peut pas joindre le catalogue distant. -->
+      <div id="htr-demo-banner" style="display:none; padding:8px 12px; margin-bottom:12px; background:#fef3c7; border:1px solid #f59e0b; border-radius:4px; font-size:12px; color:#78350f;">
+        <strong data-i18n="htr_demo_badge">Mode démo</strong> :
+        <span data-i18n="htr_demo_note">le catalogue distant est inaccessible ; affichage d'un échantillon embarqué.  Pour le catalogue complet, vérifier la connectivité réseau du serveur.</span>
+      </div>
       <div class="form-row">
         <div class="form-group" style="flex:2;">
           <label data-i18n="import_search_label">Recherche</label>

tests/security/test_phase1_post_rewrite_wiring.py

@@ -1097,3 +1097,54 @@ class TestPipelineConfigEngineNameRename:
                 "Le router refuse le payload avec engine_name : "
                 f"{r.text}"
             )
+
+
+# ──────────────────────────────────────────────────────────────────────
+# 10. Phase 4.4 — JS is_demo HTR-United badge
+# ──────────────────────────────────────────────────────────────────────
+
+
+class TestHtrUnitedDemoBadgeBinding:
+    """Phase 4.4 du chantier post-rewrite : l'API
+    ``/api/htr-united/catalogue`` retourne ``is_demo`` ; le frontend
+    doit afficher un badge visible quand le serveur a fallback sur
+    le catalogue embarqué (réseau distant indisponible).
+
+    Avant : l'UI annonçait "Catalogue HTR-United" sans distinguer
+    démo vs remote — vecteur de confusion utilisateur."""
+
+    def test_template_exposes_demo_banner(self) -> None:
+        from pathlib import Path
+
+        tmpl = (
+            Path(__file__).resolve().parents[2]
+            / "picarones/interfaces/web/templates/_view_import.html"
+        )
+        html = tmpl.read_text(encoding="utf-8")
+        assert "htr-demo-banner" in html, (
+            "Le bandeau ``htr-demo-banner`` doit exister dans "
+            "_view_import.html pour afficher le mode démo"
+        )
+        assert "htr_demo_badge" in html, (
+            "L'i18n key ``htr_demo_badge`` doit être présente"
+        )
+
+    def test_js_updates_banner_from_is_demo_flag(self) -> None:
+        from pathlib import Path
+
+        js = (
+            Path(__file__).resolve().parents[2]
+            / "picarones/interfaces/web/static/web-app.js"
+        )
+        src = js.read_text(encoding="utf-8")
+        assert "function _updateHtrDemoBanner" in src, (
+            "_updateHtrDemoBanner doit être défini"
+        )
+        # initHTRFilters et searchHTRUnited doivent l'appeler.
+        assert "_updateHtrDemoBanner(Boolean(d.is_demo))" in src, (
+            "initHTRFilters et searchHTRUnited doivent passer "
+            "le flag is_demo au binding UI"
+        )
+        # i18n key déclarée FR + EN.
+        assert "htr_demo_badge:" in src
+        assert "htr_demo_note:" in src