Metrics side-by-side overview; CRAG arch diagram; clear pipeline steps

BUILD_STAMP.txt

@@ -1,2 +1,2 @@
-# Build stamp — force Space rebuild 2026-09-18d
-BUILD_ID=20260918d
+# Build stamp — force Space rebuild 2026-09-18e
+BUILD_ID=20260918e

static/app.js

@@ -178,11 +178,19 @@ function renderContext(data) {
 
   const traceList = document.getElementById("trace-list");
   traceList.innerHTML = "";
-  (data.trace || []).forEach((t) => {
-    const li = document.createElement("li");
-    li.textContent = t;
-    traceList.appendChild(li);
-  });
+  const steps = data.trace || [];
+  if (!steps.length) {
+    traceList.innerHTML =
+      '<li class="muted">En attente — posez une question</li>';
+  } else {
+    steps.forEach((t, i) => {
+      const li = document.createElement("li");
+      li.innerHTML =
+        `<span class="step-idx">${i + 1}</span>` +
+        `<span class="step-text">${escapeHtml(t)}</span>`;
+      traceList.appendChild(li);
+    });
+  }
 
   document.getElementById("diag-supported").textContent = data.supported
     ? "Oui"

static/index.html

@@ -7,7 +7,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap" rel="stylesheet" />
-<link rel="stylesheet" href="/static/styles.css?v=20260918d" />
+<link rel="stylesheet" href="/static/styles.css?v=20260918e" />
 </head>
 <body>
 <div class="app-shell">
@@ -98,9 +98,9 @@
           </div>
 
           <div class="insight-block">
-            <div class="insight-label">Étapes</div>
-            <ol class="plain-list numbered" id="trace-list">
-              <li class="muted">—</li>
+            <div class="insight-label">Étapes du pipeline</div>
+            <ol class="step-list" id="trace-list">
+              <li class="muted">En attente — posez une question</li>
             </ol>
           </div>
 
@@ -137,30 +137,36 @@
           <span id="metrics-generated"></span>
         </p>
 
-        <h2 class="section-title">Retrieval</h2>
-        <div class="score-row" id="retrieval-grid"></div>
-
-        <h2 class="section-title">Qualité de réponse</h2>
-        <div class="score-row" id="quality-grid"></div>
-
-        <h2 class="section-title">Temps</h2>
-        <div class="score-row" id="time-grid"></div>
-
-        <h2 class="section-title">Vue d’ensemble</h2>
-        <div class="result-table-wrap">
-          <table class="result-table">
-            <thead>
-              <tr>
-                <th>Mesure</th>
-                <th>Classique</th>
-                <th>Corrective</th>
-                <th>Écart</th>
-              </tr>
-            </thead>
-            <tbody id="metrics-tbody"></tbody>
-          </table>
+        <div class="metrics-layout">
+          <div class="metrics-cards">
+            <h2 class="section-title">Retrieval</h2>
+            <div class="score-row" id="retrieval-grid"></div>
+
+            <h2 class="section-title">Qualité de réponse</h2>
+            <div class="score-row" id="quality-grid"></div>
+
+            <h2 class="section-title">Temps</h2>
+            <div class="score-row score-row-tight" id="time-grid"></div>
+          </div>
+
+          <aside class="metrics-overview">
+            <h2 class="section-title">Vue d’ensemble</h2>
+            <div class="result-table-wrap">
+              <table class="result-table">
+                <thead>
+                  <tr>
+                    <th>Mesure</th>
+                    <th>Classique</th>
+                    <th>Corrective</th>
+                    <th>Écart</th>
+                  </tr>
+                </thead>
+                <tbody id="metrics-tbody"></tbody>
+              </table>
+            </div>
+            <p class="footnote" id="metrics-footnote"></p>
+          </aside>
         </div>
-        <p class="footnote" id="metrics-footnote"></p>
       </div>
     </section>
 
@@ -168,40 +174,59 @@
       <div class="intro">
         <h1>Architecture</h1>
         <p>
-          Quatre étapes. Si la recherche est faible, le système corrige
-          avant d’écrire.
+          Pipeline Corrective RAG : la récupération est contrôlée et corrigée
+          avant la génération.
         </p>
       </div>
-      <ol class="flow">
-        <li>
-          <span class="flow-num">01</span>
-          <div>
-            <h2>Recherche</h2>
-            <p>Documents internes (PDF, MD, CSV) via embeddings.</p>
-          </div>
-        </li>
-        <li>
-          <span class="flow-num">02</span>
-          <div>
-            <h2>Jugement</h2>
-            <p>Chaque passage est noté : assez bon, ambigu, ou trop faible.</p>
+
+      <div class="arch-flow" aria-label="Schéma Corrective RAG">
+        <div class="arch-node">
+          <div class="arch-title">Question utilisateur</div>
+        </div>
+        <div class="arch-arrow" aria-hidden="true"><span></span></div>
+
+        <div class="arch-node">
+          <div class="arch-kicker">1</div>
+          <div class="arch-title">Recherche vectorielle interne</div>
+          <div class="arch-note">Embeddings · index local</div>
+        </div>
+        <div class="arch-arrow" aria-hidden="true"><span></span></div>
+
+        <div class="arch-node">
+          <div class="arch-kicker">2</div>
+          <div class="arch-title">Évaluateur de pertinence</div>
+          <div class="arch-note">LLM structured output</div>
+        </div>
+        <div class="arch-arrow" aria-hidden="true"><span></span></div>
+
+        <div class="arch-branches">
+          <div class="arch-branch correct">
+            <div class="arch-branch-label">CORRECT</div>
+            <p>3A · Filtrer / reranker les passages</p>
+            <div class="arch-mini-arrow" aria-hidden="true"><span></span></div>
+            <p>4 · Génération sourcée</p>
           </div>
-        </li>
-        <li>
-          <span class="flow-num">03</span>
-          <div>
-            <h2>Correction</h2>
-            <p>Filtrage, reformulation, ou SQL lecture seule sur les ventes.</p>
+          <div class="arch-branch ambiguous">
+            <div class="arch-branch-label">AMBIGUOUS</div>
+            <p>3B · Réécrire la requête</p>
+            <div class="arch-mini-arrow" aria-hidden="true"><span></span></div>
+            <p>Recherche complémentaire</p>
+            <div class="arch-mini-arrow" aria-hidden="true"><span></span></div>
+            <p>Fusion sources</p>
+            <div class="arch-mini-arrow" aria-hidden="true"><span></span></div>
+            <p>4 · Génération sourcée</p>
           </div>
-        </li>
-        <li>
-          <span class="flow-num">04</span>
-          <div>
-            <h2>Réponse contrôlée</h2>
-            <p>Génération sourcée, vérification, ou refus si non soutenu.</p>
+          <div class="arch-branch incorrect">
+            <div class="arch-branch-label">INCORRECT</div>
+            <p>3C · Écarter le contexte faible</p>
+            <div class="arch-mini-arrow" aria-hidden="true"><span></span></div>
+            <p>Recherche SQL / autre corpus</p>
+            <div class="arch-mini-arrow" aria-hidden="true"><span></span></div>
+            <p>Réponse ou refus justifié</p>
           </div>
-        </li>
-      </ol>
+        </div>
+      </div>
+
       <p class="closing-note">
         Données locales · SQL SQLite sécurisé · pas d’invention hors preuves.
       </p>
@@ -209,6 +234,6 @@
 
   </main>
 </div>
-<script src="/static/app.js?v=20260918d"></script>
+<script src="/static/app.js?v=20260918e"></script>
 </body>
 </html>

static/styles.css

@@ -472,6 +472,204 @@ body {
     gap: 12px;
 }
 
+.score-row-tight {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.metrics-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
+    gap: 20px;
+    align-items: start;
+}
+
+.metrics-overview {
+    position: sticky;
+    top: 16px;
+}
+
+.metrics-overview .section-title {
+    margin-top: 0;
+}
+
+.step-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.step-list li {
+    display: grid;
+    grid-template-columns: 22px 1fr;
+    gap: 8px;
+    align-items: start;
+    font-size: 0.8rem;
+    line-height: 1.4;
+    color: var(--ink-2);
+}
+
+.step-idx {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: rgba(27, 79, 70, 0.12);
+    color: var(--accent);
+    font-size: 0.7rem;
+    font-weight: 700;
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+}
+
+.step-text {
+    min-width: 0;
+    word-break: break-word;
+}
+
+/* Architecture flowchart */
+.arch-flow {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+    max-width: 980px;
+}
+
+.arch-node {
+    width: min(100%, 420px);
+    background: var(--surface);
+    border: 1px solid var(--line);
+    padding: 14px 16px;
+    text-align: center;
+}
+
+.arch-kicker {
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: var(--accent);
+    margin-bottom: 4px;
+}
+
+.arch-title {
+    font-family: var(--font-display);
+    font-weight: 700;
+    font-size: 1rem;
+}
+
+.arch-note {
+    margin-top: 4px;
+    font-size: 0.8rem;
+    color: var(--ink-3);
+}
+
+.arch-arrow {
+    width: 2px;
+    height: 28px;
+    background: var(--line);
+    position: relative;
+    margin: 4px 0;
+}
+
+.arch-arrow span,
+.arch-mini-arrow span {
+    position: absolute;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid var(--accent);
+    border-bottom: 2px solid var(--accent);
+    transform: translateX(-50%) rotate(45deg);
+    animation: arrow-pulse 1.4s ease-in-out infinite;
+}
+
+.arch-arrow span {
+    bottom: -2px;
+}
+
+.arch-mini-arrow {
+    width: 2px;
+    height: 18px;
+    background: var(--line);
+    position: relative;
+    margin: 6px auto;
+}
+
+.arch-mini-arrow span {
+    bottom: -2px;
+}
+
+.arch-branches {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px;
+    width: 100%;
+    margin-top: 8px;
+}
+
+.arch-branch {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    padding: 14px 12px;
+    text-align: center;
+    font-size: 0.82rem;
+    color: var(--ink-2);
+    line-height: 1.4;
+}
+
+.arch-branch p {
+    margin: 0;
+}
+
+.arch-branch-label {
+    font-weight: 800;
+    font-size: 0.75rem;
+    letter-spacing: 0.06em;
+    margin-bottom: 8px;
+}
+
+.arch-branch.correct {
+    border-color: rgba(27, 79, 70, 0.35);
+    background: rgba(27, 79, 70, 0.06);
+}
+
+.arch-branch.correct .arch-branch-label {
+    color: var(--accent);
+}
+
+.arch-branch.ambiguous {
+    border-color: rgba(106, 79, 29, 0.35);
+    background: rgba(241, 235, 224, 0.7);
+}
+
+.arch-branch.ambiguous .arch-branch-label {
+    color: var(--warn-ink);
+}
+
+.arch-branch.incorrect {
+    border-color: rgba(139, 46, 46, 0.3);
+    background: rgba(139, 46, 46, 0.06);
+}
+
+.arch-branch.incorrect .arch-branch-label {
+    color: #8b2e2e;
+}
+
+@keyframes arrow-pulse {
+    0%,
+    100% {
+        opacity: 0.35;
+        transform: translateX(-50%) translateY(0) rotate(45deg);
+    }
+    50% {
+        opacity: 1;
+        transform: translateX(-50%) translateY(3px) rotate(45deg);
+    }
+}
+
 .score-card {
     background: var(--surface);
     border: 1px solid var(--line);
@@ -614,10 +812,16 @@ body {
 }
 
 @media (max-width: 980px) {
-    .workspace {
+    .workspace,
+    .metrics-layout,
+    .arch-branches {
         grid-template-columns: 1fr;
     }
 
+    .metrics-overview {
+        position: static;
+    }
+
     .insight-panel {
         min-height: 0;
     }