Product UI redesign (light) + disable API key for public demo

static/app.js

@@ -1,55 +1,44 @@
 const API_BASE = "/api";
 
 const DECISION_HINTS = {
-  CORRECT:
-    "Contexte suffisamment pertinent. Les chunks parasites sont filtrés avant génération.",
-  AMBIGUOUS:
-    "Qualité intermédiaire. Réécriture de requête et recherche complémentaire.",
-  INCORRECT:
-    "Contexte faible. Le pipeline écarte les documents et tente une requête structurée ou un refus.",
+  CORRECT: "Contexte assez solide. Passages inutiles filtrés.",
+  AMBIGUOUS: "Qualité moyenne. Reformulation et recherche complémentaire.",
+  INCORRECT: "Contexte trop faible. SQL ou refus.",
 };
 
 const METRIC_META = {
   context_precision: {
-    label: "Context precision",
-    definition: "Part des passages retenus réellement utiles (vs annotation).",
+    label: "Précision du contexte",
     higherIsBetter: true,
     headline: false,
   },
   context_recall: {
-    label: "Context recall",
-    definition: "Part de l'information nécessaire effectivement récupérée.",
+    label: "Couverture",
     higherIsBetter: true,
     headline: true,
   },
   faithfulness: {
-    label: "Faithfulness",
-    definition: "Réponse soutenue par les documents / données fournis.",
+    label: "Fidélité",
     higherIsBetter: true,
     headline: true,
   },
   answer_relevancy: {
-    label: "Answer relevancy",
-    definition: "Similarité texte question ↔ réponse.",
+    label: "Pertinence",
     higherIsBetter: true,
     headline: false,
   },
   abstention_accuracy: {
-    label: "Abstention accuracy",
-    definition: "Justesse du choix répondre vs refuser quand les preuves manquent.",
+    label: "Refus juste",
     higherIsBetter: true,
     headline: true,
   },
   sql_execution_accuracy: {
-    label: "SQL execution accuracy",
-    definition: "Routage et résultat SQL corrects pour les questions chiffrées.",
+    label: "Exactitude SQL",
     higherIsBetter: true,
     headline: false,
   },
   fallback_rate: {
-    label: "Correction rate",
-    definition:
-      "Fréquence des actions correctives (réécriture, requête structurée, re-recherche). Plus élevé = plus de corrections déclenchées.",
+    label: "Taux de correction",
     higherIsBetter: null,
     headline: false,
   },
@@ -61,60 +50,60 @@ const HEADLINE_ORDER = [
   "context_recall",
 ];
 
-// ---------- Navigation ----------
 const views = {
   chat: "view-chat",
   metrics: "view-metrics",
   about: "view-about",
 };
 
-document.querySelectorAll(".nav-item").forEach((btn) => {
+document.querySelectorAll(".tab").forEach((btn) => {
   btn.addEventListener("click", () => {
-    document.querySelectorAll(".nav-item").forEach((b) => {
-      b.classList.remove("active");
-    });
+    document.querySelectorAll(".tab").forEach((b) => b.classList.remove("active"));
     btn.classList.add("active");
     Object.values(views).forEach((id) => {
       document.getElementById(id).classList.add("hidden");
     });
     document.getElementById(views[btn.dataset.view]).classList.remove("hidden");
-    if (btn.dataset.view === "metrics") {
-      loadMetrics();
-    }
+    if (btn.dataset.view === "metrics") loadMetrics();
   });
 });
 
-// ---------- Statut backend ----------
 async function checkHealth() {
   const dot = document.getElementById("status-dot");
   const text = document.getElementById("status-text");
-  const modelChip = document.getElementById("model-chip");
   try {
     const res = await fetch(`${API_BASE}/health`);
     const data = await res.json();
     dot.classList.add("ok");
-    text.textContent = `${data.chunks_indexed} segments indexés`;
-    modelChip.textContent =
-      data.model + (data.llm_provider === "mock" ? " (mock)" : "");
+    text.textContent = "Prêt";
+    if (data.llm_provider === "mock") text.textContent = "Prêt (mock)";
   } catch (e) {
     dot.classList.add("err");
-    text.textContent = "Backend indisponible";
+    text.textContent = "Hors ligne";
   }
 }
 checkHealth();
 
-// ---------- Chat ----------
 const messagesEl = document.getElementById("messages");
 const form = document.getElementById("composer");
 const input = document.getElementById("question-input");
 const sendBtn = document.getElementById("send-btn");
 
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
 function appendMessage(role, text, options = {}) {
   const wrapper = document.createElement("div");
   const extras = [];
   if (options.isRefusal) extras.push("refusal");
   if (options.thinking) extras.push("thinking");
-  wrapper.className = `message ${role}${extras.length ? " " + extras.join(" ") : ""}`;
+  wrapper.className =
+    `message ${role}` + (extras.length ? " " + extras.join(" ") : "");
   const bubble = document.createElement("div");
   bubble.className = "bubble";
   bubble.textContent = text;
@@ -127,48 +116,33 @@ function appendMessage(role, text, options = {}) {
 function renderGrades(grades) {
   const box = document.getElementById("grades-list");
   box.innerHTML = "";
-  if (!grades || grades.length === 0) {
-    box.innerHTML = '<p class="empty">Aucun grade disponible.</p>';
-    return;
-  }
+  if (!grades || !grades.length) return;
   grades.slice(0, 5).forEach((g) => {
     const row = document.createElement("div");
     row.className = "grade-row";
-    const doc = g.doc_id || g.chunk_id || "chunk";
-    const decision = g.decision || "—";
-    const score = typeof g.score === "number" ? g.score : "—";
-    const reason = g.reason || "";
+    const doc = g.doc_id || g.chunk_id || "passage";
     row.innerHTML = `
       <div class="grade-doc">${escapeHtml(String(doc))}</div>
-      <div class="grade-score">${score}/100</div>
-      <div class="grade-meta">${escapeHtml(decision)}${reason ? " · " + escapeHtml(reason) : ""}</div>
+      <div class="grade-score">${g.score ?? "—"}/100</div>
+      <div class="grade-meta">${escapeHtml(g.decision || "")}${
+        g.reason ? " · " + escapeHtml(g.reason) : ""
+      }</div>
     `;
     box.appendChild(row);
   });
 }
 
-function escapeHtml(value) {
-  return value
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;");
-}
-
 function renderContext(data) {
   const badge = document.getElementById("decision-badge");
   const hint = document.getElementById("decision-hint");
   badge.textContent = data.decision || "—";
-  badge.className = `decision-badge ${data.decision || ""}`;
-  hint.textContent =
-    DECISION_HINTS[data.decision] ||
-    "Décision du retrieval evaluator.";
+  badge.className = `decision ${data.decision || ""}`;
+  hint.textContent = DECISION_HINTS[data.decision] || "";
 
   const sourceList = document.getElementById("source-list");
   sourceList.innerHTML = "";
-  if (!data.sources || data.sources.length === 0) {
-    sourceList.innerHTML =
-      '<li class="empty">Aucune source (réponse structurée ou refus).</li>';
+  if (!data.sources || !data.sources.length) {
+    sourceList.innerHTML = '<li class="muted">Aucune source</li>';
   } else {
     data.sources.forEach((s) => {
       const li = document.createElement("li");
@@ -195,16 +169,16 @@ function renderContext(data) {
   document.getElementById("diag-loops").textContent = data.loop_count;
   document.getElementById("diag-latency").textContent =
     `${data.latency_ms} ms`;
+
+  const drawer = document.getElementById("trace-drawer");
+  if (drawer && !drawer.open) drawer.open = true;
 }
 
 async function sendQuestion(question) {
   appendMessage("user", question);
   input.value = "";
   sendBtn.disabled = true;
-
-  const thinking = appendMessage("assistant", "Analyse en cours…", {
-    thinking: true,
-  });
+  const thinking = appendMessage("assistant", "Analyse…", { thinking: true });
 
   try {
     const res = await fetch(`${API_BASE}/chat`, {
@@ -215,9 +189,11 @@ async function sendQuestion(question) {
     const data = await res.json();
     thinking.remove();
     if (!res.ok) {
-      appendMessage("assistant", data.detail || "Erreur inconnue.", {
-        isRefusal: true,
-      });
+      const detail =
+        typeof data.detail === "string"
+          ? data.detail
+          : "Erreur serveur.";
+      appendMessage("assistant", detail, { isRefusal: true });
       return;
     }
     const isRefusal =
@@ -228,7 +204,7 @@ async function sendQuestion(question) {
     renderContext(data);
   } catch (e) {
     thinking.remove();
-    appendMessage("assistant", "Impossible de contacter le backend.", {
+    appendMessage("assistant", "Impossible de joindre le serveur.", {
       isRefusal: true,
     });
   } finally {
@@ -242,11 +218,10 @@ form.addEventListener("submit", (e) => {
   if (q) sendQuestion(q);
 });
 
-document.querySelectorAll(".suggestion-chip").forEach((chip) => {
+document.querySelectorAll(".suggestion").forEach((chip) => {
   chip.addEventListener("click", () => sendQuestion(chip.dataset.q));
 });
 
-// ---------- Métriques ----------
 let metricsLoaded = false;
 
 function pct(value) {
@@ -259,16 +234,6 @@ function formatPct(value) {
   return p === null ? "—" : `${p.toFixed(1)} %`;
 }
 
-function deltaClass(key, deltaPts) {
-  const meta = METRIC_META[key];
-  if (meta.higherIsBetter === null || Math.abs(deltaPts) < 0.05) {
-    return "neutral";
-  }
-  const improved =
-    meta.higherIsBetter === true ? deltaPts > 0 : deltaPts < 0;
-  return improved ? "up" : "down";
-}
-
 function formatDelta(deltaPts) {
   const sign = deltaPts > 0 ? "+" : "";
   return `${sign}${deltaPts.toFixed(1)} pts`;
@@ -293,9 +258,9 @@ async function loadMetrics() {
   const classic = data.rag_classique || {};
 
   document.getElementById("metrics-n").textContent =
-    `Jeu de test · n = ${data.n_questions ?? "—"}`;
+    `${data.n_questions ?? "—"} questions`;
   document.getElementById("metrics-generated").textContent = data.generated_at
-    ? `Généré le ${data.generated_at.replace("T", " ")}`
+    ? data.generated_at.replace("T", " ")
     : "";
 
   const headlineGrid = document.getElementById("headline-grid");
@@ -306,20 +271,15 @@ async function loadMetrics() {
     const value = pct(crag[key]);
     const baseline = pct(classic[key]);
     const card = document.createElement("article");
-    card.className = "headline-card";
-    let deltaHtml = "";
+    card.className = "score-card";
+    let delta = "";
     if (baseline !== null) {
-      const delta = value - baseline;
-      const cls = deltaClass(key, delta);
-      deltaHtml = `
-        <div class="headline-delta ${cls}">${formatDelta(delta)} vs classique</div>
-        <div class="headline-note">RAG classique : ${baseline.toFixed(1)} %</div>
-      `;
+      delta = `<div class="delta">${formatDelta(value - baseline)} vs classique</div>`;
     }
     card.innerHTML = `
-      <div class="headline-label">${meta.label}</div>
-      <div class="headline-value">${value.toFixed(1)}%</div>
-      ${deltaHtml}
+      <div class="label">${meta.label}</div>
+      <div class="value">${value.toFixed(1)}%</div>
+      ${delta}
     `;
     headlineGrid.appendChild(card);
   });
@@ -330,22 +290,16 @@ async function loadMetrics() {
     if (typeof crag[key] !== "number" && typeof classic[key] !== "number") {
       return;
     }
-    const meta = METRIC_META[key];
     const cVal = pct(classic[key]);
     const rVal = pct(crag[key]);
-    let deltaCell = "—";
-    if (cVal !== null && rVal !== null) {
-      const delta = rVal - cVal;
-      const cls = deltaClass(key, delta);
-      deltaCell = `<span class="delta-pill ${cls}">${formatDelta(delta)}</span>`;
-    }
+    let delta = "—";
+    if (cVal !== null && rVal !== null) delta = formatDelta(rVal - cVal);
     const tr = document.createElement("tr");
     tr.innerHTML = `
-      <td class="metric-name">${meta.label}</td>
-      <td class="metric-def">${meta.definition}</td>
+      <td>${METRIC_META[key].label}</td>
       <td class="num">${formatPct(classic[key])}</td>
       <td class="num">${formatPct(crag[key])}</td>
-      <td class="num">${deltaCell}</td>
+      <td class="num">${delta}</td>
     `;
     tbody.appendChild(tr);
   });
@@ -354,31 +308,20 @@ async function loadMetrics() {
   rows.innerHTML = "";
   Object.keys(METRIC_META).forEach((key) => {
     if (typeof crag[key] !== "number") return;
-    const meta = METRIC_META[key];
     const classicVal = pct(classic[key]) ?? 0;
     const cragVal = pct(crag[key]) ?? 0;
     const row = document.createElement("div");
+    row.className = "bar-item";
     row.innerHTML = `
-      <div class="compare-row-label">${meta.label}</div>
-      <div class="compare-bars">
-        <div class="compare-bar-track">
-          <div class="compare-bar-fill classic" style="width:${Math.max(classicVal, 8)}%">
-            ${classicVal.toFixed(1)}%
-          </div>
-        </div>
-        <div class="compare-bar-track">
-          <div class="compare-bar-fill crag" style="width:${Math.max(cragVal, 8)}%">
-            ${cragVal.toFixed(1)}%
-          </div>
-        </div>
-      </div>
+      <div class="name">${METRIC_META[key].label}</div>
+      <div class="bar-track"><div class="bar-fill classic" style="width:${Math.max(classicVal, 2)}%"></div></div>
+      <div class="bar-caption">Classique ${classicVal.toFixed(1)}%</div>
+      <div class="bar-track"><div class="bar-fill" style="width:${Math.max(cragVal, 2)}%"></div></div>
+      <div class="bar-caption">Corrective ${cragVal.toFixed(1)}%</div>
     `;
     rows.appendChild(row);
   });
 
-  const footnote = document.getElementById("metrics-footnote");
-  footnote.textContent =
-    "Les scores mock (LLM_PROVIDER=mock) sont structurellement valides " +
-    "mais non représentatifs. Relancez eval/evaluate.py avec HF_TOKEN " +
-    "pour des chiffres de production.";
+  document.getElementById("metrics-footnote").textContent =
+    "Scores mock non représentatifs. Relancer evaluate.py avec HF_TOKEN.";
 }