fix(web): URGENT — vues empilees + sidebar a 10 entrees (etape 6/N)

3 bugs critiques signales par l'utilisateur :

1. **Toutes les vues empilees sur la premiere page.**
picarones.css n'avait aucune regle pour `.view` — toutes les
sections .view restaient visibles a la fois. Ajoute :
```
.view { display: none; }
.view.active { display: flex; flex-direction: column; gap: 18px; }
```
Sans ces regles le SPA etait non-fonctionnel : showView() ajoutait
bien la class .active mais aucun style CSS ne masquait les autres.

2. **Sidebar polluee (10 entrees au lieu de 3).**
La maquette XerOCR a 3 vues uniquement : Bibliotheque, Benchmark,
Rapports. J'avais ajoute Engines + History + Diagnose + Economics
+ Edition + Robustness + Compare en nav items, en deviant du
design. Sidebar reduite aux 3 vues principales. Le bouton
"Systeme · details" en bas du rail ouvre Engines comme proxy
panneau Systeme. Les autres vues secondaires (history, diagnose,
etc.) restent dans le DOM, navigables par showView('xxx') mais
ne polluent plus la sidebar.

3. **"Boutons immondes a droite" du bench-run.**
Les boutons "Sauvegarder/Charger config" etaient places dans le
`.sec-aside` du sec-head (Section 04 Run) — section non prevue
pour heberger des boutons. Deplaces dans le sec-body en footer
ligne avec le bouton "Lancer le benchmark" — alignement bouton
primary a gauche, ghost btn a droite.

i18n FR/EN : cle `sys_details` ajoutee pour le bouton sidebar.
test_nav_buttons_present adapte (3 nav entries, nav_engines retire).

Tests verts (521 web + smoke OK : sidebar 3 entries, vue active
unique = benchmark, bouton Systeme present).

https://claude.ai/code/session_01G1dCPpMJykxTg1uvLrBmCQ

picarones/interfaces/web/static/picarones.css

@@ -316,6 +316,16 @@ a { color: inherit; }
   gap: 18px;
 }
 
+/* === SPA view visibility — critique : sans ces regles toutes les vues
+   s'empilent.  Le rendu serveur place les 10 sections dans le DOM ;
+   showView() ajoute .active sur la seule visible. === */
+.view { display: none; }
+.view.active {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
 /* === The application window — one big rounded frame per view, no titlebar === */
 .window-frame {
   background: var(--raised);

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

@@ -73,6 +73,7 @@ const T = {
     sys_pipeline: "Pipeline",
     sys_engines_online: "Moteurs en ligne",
     sys_llms_online: "LLM en ligne",
+    sys_details: "Système · détails",
     loading: "Chargement…",
     search: "Rechercher",
     all: "Tous",
@@ -232,6 +233,7 @@ const T = {
     sys_pipeline: "Pipeline",
     sys_engines_online: "Engines online",
     sys_llms_online: "LLMs online",
+    sys_details: "System · details",
     loading: "Loading…",
     search: "Search",
     all: "All",
@@ -389,6 +391,13 @@ function setLang(next) {
 }
 function toggleLang() { setLang(lang === "fr" ? "en" : "fr"); }
 
+// Bouton "Systeme · details" en bas de la sidebar — ouvre la vue
+// Engines comme proxy panneau Systeme (regroupera plus tard
+// engines + history + autres workflows secondaires).
+function openSystemPanel() {
+  showView("engines");
+}
+
 // ─── Navigation ──────────────────────────────────────────────────────────────
 function showView(name) {
   document.querySelectorAll(".view").forEach(v => v.classList.remove("active"));

picarones/interfaces/web/templates/_rail.html

@@ -1,7 +1,10 @@
-{# Sidebar gauche — wordmark + nav + system block + lang toggle.
- # Remplace l'ancien _header_nav.html (barre horizontale).
- # Les boutons nav portent les class `nav-item` (XerOCR) ET `nav-btn`
- # (legacy) pour conserver la compat avec showView() côté web-app.js.
+{# Sidebar XerOCR — calque sur la maquette demo : 3 entrees nav
+ # uniquement (Bibliotheque, Benchmark, Rapports), un sys-block
+ # qui resume l'etat, et un bouton "Systeme · details" qui ouvre
+ # le panneau Engines.  Les vues secondaires (history, diagnose,
+ # economics, edition, robustness, compare) restent dans le DOM
+ # et navigables via showView('xxx') mais ne polluent pas la
+ # sidebar.
 #}
 <aside class="rail">
 
@@ -16,28 +19,28 @@
   <nav class="rail-nav-window">
     <div class="rail-nav" id="nav">
 
-      <button class="nav-item nav-btn active" data-view="benchmark" onclick="showView('benchmark')">
+      <button class="nav-item nav-btn" data-view="import" type="button" onclick="showView('import')">
         <span class="nav-glyph" aria-hidden="true">
           <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="11" cy="11" r="7"/>
-            <path d="M11 6v5l3 2"/>
+            <path d="M3 6h7l2 2h7v10H3z"/>
           </svg>
         </span>
-        <span class="nav-label" data-i18n="nav_benchmark">Benchmark</span>
-        <span class="nav-meta" id="nav-meta-benchmark"></span>
+        <span class="nav-label" data-i18n="nav_library">Bibliothèque</span>
+        <span class="nav-meta" id="nav-meta-library"></span>
       </button>
 
-      <button class="nav-item nav-btn" data-view="import" onclick="showView('import')">
+      <button class="nav-item nav-btn active" data-view="benchmark" type="button" onclick="showView('benchmark')">
         <span class="nav-glyph" aria-hidden="true">
           <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M3 6h7l2 2h7v10H3z"/>
+            <circle cx="11" cy="11" r="7"/>
+            <path d="M11 6v5l3 2"/>
           </svg>
         </span>
-        <span class="nav-label" data-i18n="nav_library">Bibliothèque</span>
-        <span class="nav-meta" id="nav-meta-library"></span>
+        <span class="nav-label" data-i18n="nav_benchmark">Benchmark</span>
+        <span class="nav-meta" id="nav-meta-benchmark"></span>
       </button>
 
-      <button class="nav-item nav-btn" data-view="reports" onclick="showView('reports')">
+      <button class="nav-item nav-btn" data-view="reports" type="button" onclick="showView('reports')">
         <span class="nav-glyph" aria-hidden="true">
           <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
             <path d="M5 3h9l4 4v12H5z"/>
@@ -49,77 +52,6 @@
         <span class="nav-meta" id="nav-meta-reports"></span>
       </button>
 
-      <button class="nav-item nav-btn" data-view="engines" onclick="showView('engines')">
-        <span class="nav-glyph" aria-hidden="true">
-          <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="11" cy="11" r="3"/>
-            <path d="M11 2v3M11 17v3M2 11h3M17 11h3M4.5 4.5l2.1 2.1M15.4 15.4l2.1 2.1M4.5 17.5l2.1-2.1M15.4 6.6l2.1-2.1"/>
-          </svg>
-        </span>
-        <span class="nav-label" data-i18n="nav_engines">Moteurs</span>
-        <span class="nav-meta" id="nav-meta-engines"></span>
-      </button>
-
-      <button class="nav-item nav-btn" data-view="history" onclick="showView('history')">
-        <span class="nav-glyph" aria-hidden="true">
-          <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M3 11a8 8 0 1 0 2.3-5.6"/>
-            <path d="M3 4v5h5"/>
-            <path d="M11 7v4l3 2"/>
-          </svg>
-        </span>
-        <span class="nav-label" data-i18n="nav_history">Historique</span>
-        <span class="nav-meta" id="nav-meta-history"></span>
-      </button>
-
-      <button class="nav-item nav-btn" data-view="diagnose" onclick="showView('diagnose')">
-        <span class="nav-glyph" aria-hidden="true">
-          <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M3 11h4l2-4 4 8 2-4h4"/>
-          </svg>
-        </span>
-        <span class="nav-label" data-i18n="nav_diagnose">Diagnostic</span>
-      </button>
-
-      <button class="nav-item nav-btn" data-view="economics" onclick="showView('economics')">
-        <span class="nav-glyph" aria-hidden="true">
-          <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="11" cy="11" r="8"/>
-            <path d="M11 6v10M14 8.5c0-1.4-1.4-2.5-3-2.5s-3 1.1-3 2.5S9.4 11 11 11s3 1.1 3 2.5S12.6 16 11 16s-3-1.1-3-2.5"/>
-          </svg>
-        </span>
-        <span class="nav-label" data-i18n="nav_economics">Coûts</span>
-      </button>
-
-      <button class="nav-item nav-btn" data-view="edition" onclick="showView('edition')">
-        <span class="nav-glyph" aria-hidden="true">
-          <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M4 17.5V19h1.5L16 8.5 14.5 7z"/>
-            <path d="M14.5 7l2-2 1.5 1.5-2 2z"/>
-          </svg>
-        </span>
-        <span class="nav-label" data-i18n="nav_edition">Édition</span>
-      </button>
-
-      <button class="nav-item nav-btn" data-view="robustness" onclick="showView('robustness')">
-        <span class="nav-glyph" aria-hidden="true">
-          <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M11 3l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V6z"/>
-          </svg>
-        </span>
-        <span class="nav-label" data-i18n="nav_robustness">Robustesse</span>
-      </button>
-
-      <button class="nav-item nav-btn" data-view="compare" onclick="showView('compare')">
-        <span class="nav-glyph" aria-hidden="true">
-          <svg viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M5 4v14M17 4v14"/>
-            <path d="M5 8h12M5 14h12"/>
-          </svg>
-        </span>
-        <span class="nav-label" data-i18n="nav_compare">Comparer</span>
-      </button>
-
     </div>
   </nav>
 
@@ -159,14 +91,25 @@
       </div>
     </div>
 
+    <button class="system-trigger" type="button" onclick="openSystemPanel()">
+      <span style="display: inline-flex; align-items: center; gap: 8px;">
+        <svg viewBox="0 0 14 14" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="7" cy="7" r="2"/>
+          <path d="M7 1.5v1.8M7 10.7v1.8M1.5 7h1.8M10.7 7h1.8M3.1 3.1l1.3 1.3M9.6 9.6l1.3 1.3M3.1 10.9l1.3-1.3M9.6 4.4l1.3-1.3"/>
+        </svg>
+        <span data-i18n="sys_details">Système · détails</span>
+      </span>
+      <span>→</span>
+    </button>
+
   </div>
 
   <div class="rail-foot">
     <div class="lang-toggle" id="lang-toggle">
-      <button class="on" id="lang-btn-fr" onclick="setLang('fr')">FR</button>
-      <button id="lang-btn-en" onclick="setLang('en')">EN</button>
+      <button class="on" id="lang-btn-fr" type="button" onclick="setLang('fr')">FR</button>
+      <button id="lang-btn-en" type="button" onclick="setLang('en')">EN</button>
     </div>
-    <button id="lang-btn" style="display:none" onclick="toggleLang()" aria-hidden="true">EN</button>
+    <button id="lang-btn" style="display:none" type="button" onclick="toggleLang()" aria-hidden="true">EN</button>
     <span class="foot-meta">v2 · XerOCR</span>
   </div>
 

picarones/interfaces/web/templates/_view_benchmark.html

@@ -255,26 +255,28 @@
         <div class="sec-title" data-i18n="bench_run_title">Exécuter</div>
         <div class="sec-sub" data-i18n="bench_run_desc">Lancer le benchmark sur la file de concurrents</div>
       </div>
-      <div class="sec-aside" style="display:flex; gap:6px;">
-        <button class="btn btn-ghost btn-sm" id="config-save-btn" type="button" onclick="saveConfigToFile()" title="Télécharger la configuration courante en JSON">
-          <span data-i18n="bench_config_save">Sauvegarder config</span>
-        </button>
-        <button class="btn btn-ghost btn-sm" id="config-load-btn" type="button" onclick="loadConfigFromFile()" title="Charger une configuration depuis un fichier JSON">
-          <span data-i18n="bench_config_load">Charger config</span>
-        </button>
-        <input type="file" id="config-file-input" accept=".json" style="display:none;" onchange="onConfigFileSelected(event)" />
-      </div>
     </div>
     <div class="sec-body">
 
-      <div class="row">
-        <button class="btn btn-primary" id="start-btn" type="button" onclick="startBenchmark()" style="padding:12px 24px; font-size:14px;">
-          <span data-i18n="bench_start">▶ Lancer le benchmark</span>
-        </button>
-        <button class="btn btn-danger" id="cancel-btn" type="button" style="display:none;" onclick="cancelBenchmark()">
-          <span data-i18n="bench_cancel">✕ Annuler</span>
-        </button>
-        <span id="bench-status-text" class="foot"></span>
+      <div class="row" style="justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;">
+        <div class="row">
+          <button class="btn btn-primary" id="start-btn" type="button" onclick="startBenchmark()" style="padding:12px 24px; font-size:14px;">
+            <span data-i18n="bench_start">▶ Lancer le benchmark</span>
+          </button>
+          <button class="btn btn-danger" id="cancel-btn" type="button" style="display:none;" onclick="cancelBenchmark()">
+            <span data-i18n="bench_cancel">✕ Annuler</span>
+          </button>
+          <span id="bench-status-text" class="foot"></span>
+        </div>
+        <div class="row" style="gap: 6px;">
+          <button class="btn btn-ghost btn-sm" id="config-save-btn" type="button" onclick="saveConfigToFile()" title="Télécharger la configuration courante en JSON">
+            <span data-i18n="bench_config_save">Sauvegarder config</span>
+          </button>
+          <button class="btn btn-ghost btn-sm" id="config-load-btn" type="button" onclick="loadConfigFromFile()" title="Charger une configuration depuis un fichier JSON">
+            <span data-i18n="bench_config_load">Charger config</span>
+          </button>
+          <input type="file" id="config-file-input" accept=".json" style="display:none;" onchange="onConfigFileSelected(event)" />
+        </div>
       </div>
 
       <div id="bench-progress-section" style="display:none; margin-top:18px;">

tests/web/test_web_jinja_refactor.py

@@ -134,11 +134,12 @@ class TestStructuralElementsPresent:
         )
 
     def test_nav_buttons_present(self, html):
-        # Sidebar XerOCR : benchmark + library + reports + engines.
-        # La vue est toujours `view-import` côté DOM mais le label nav
-        # est `nav_library` (l'ancien import est fusionné dans la
-        # bibliothèque).
-        for label in ("nav_benchmark", "nav_library", "nav_reports", "nav_engines"):
+        # Sidebar XerOCR : 3 entrees seulement, calque sur la maquette
+        # demo (Bibliotheque, Benchmark, Rapports).  Engines est
+        # accessible via le bouton "Systeme · details" en bas du
+        # rail (openSystemPanel → showView('engines')), pas dans la
+        # nav principale.
+        for label in ("nav_benchmark", "nav_library", "nav_reports"):
             assert f'data-i18n="{label}"' in html
 
     def test_import_modal_present(self, html):