Add EN/FR language toggle, English by default

Interface is now in English by default with a FR button in the
top-right corner to switch to French. All UI labels, placeholders,
error messages, and analysis scores are translated. The toggle
switches instantly without page reload.

https://claude.ai/code/session_015z3yZxNNfXF63JuQDuPbEG

static/app.js

@@ -6,6 +6,105 @@
 (function () {
     "use strict";
 
+    /* ===== i18n ===== */
+    var LANG = {
+        en: {
+            subtitle: "Socratic Learning Companion",
+            topicLabel: "Exploration topic",
+            topicPlaceholder: "E.g.: Artificial intelligence in professional training",
+            docsLabel: "Reference documents (optional)",
+            uploadText: "Drag your files here or click to select",
+            uploadHint: "PDF, PPTX, TXT or ZIP \u2014 multiple files allowed",
+            modeLabel: "Mode",
+            modeTutor: "Tutor",
+            modeTutorDesc: "Supportive guidance, open-ended questions",
+            modeCritic: "Critic",
+            modeCriticDesc: "Devil's advocate, tests logical weaknesses",
+            btnStart: "Start session",
+            btnEnd: "End session",
+            btnRestart: "Restart",
+            chatPlaceholder: "Type your thoughts here...",
+            btnSend: "Send",
+            reportTitle: "Session Report",
+            summaryTitle: "Summary",
+            strengthsTitle: "Key strengths",
+            weaknessesTitle: "Areas for improvement",
+            rhythmTitle: "Pace",
+            rhythmText: "Responses under 8 seconds:",
+            btnExport: "Export JSON",
+            btnNewSession: "New session",
+            modeBadgeTutor: "Tutor",
+            modeBadgeCritic: "Critic",
+            errorEmpty: "No response from server. Check API configuration.",
+            errorConnection: "Connection error. Please try again.",
+            errorNoExchange: "No exchanges to analyze.",
+            errorAnalysis: "Analysis error. Please try again.",
+            startMessage: "Hello, I would like to explore the topic: ",
+            scoreLabels: ["Reasoning", "Clarity", "Skepticism", "Process", "Reflection", "Integrity"],
+            noSummary: "No summary available.",
+            langBtn: "FR"
+        },
+        fr: {
+            subtitle: "Compagnon socratique d'apprentissage",
+            topicLabel: "Sujet d'exploration",
+            topicPlaceholder: "Ex : L'intelligence artificielle en formation professionnelle",
+            docsLabel: "Documents de reference (optionnel)",
+            uploadText: "Glisse tes fichiers ici ou clique pour selectionner",
+            uploadHint: "PDF, PPTX, TXT ou ZIP \u2014 plusieurs fichiers possibles",
+            modeLabel: "Mode",
+            modeTutor: "Tuteur",
+            modeTutorDesc: "Accompagnement bienveillant, questions ouvertes",
+            modeCritic: "Critique",
+            modeCriticDesc: "Avocat du diable, teste les failles logiques",
+            btnStart: "Commencer la session",
+            btnEnd: "Terminer la session",
+            btnRestart: "Recommencer",
+            chatPlaceholder: "Tape ta reflexion ici...",
+            btnSend: "Envoyer",
+            reportTitle: "Rapport de session",
+            summaryTitle: "Bilan",
+            strengthsTitle: "Points forts",
+            weaknessesTitle: "Axes d'amelioration",
+            rhythmTitle: "Rythme",
+            rhythmText: "Reponses en moins de 8 secondes :",
+            btnExport: "Exporter JSON",
+            btnNewSession: "Nouvelle session",
+            modeBadgeTutor: "Tuteur",
+            modeBadgeCritic: "Critique",
+            errorEmpty: "Reponse vide du serveur. Verifiez la configuration API.",
+            errorConnection: "Erreur de connexion. Veuillez reessayer.",
+            errorNoExchange: "Aucun echange a analyser.",
+            errorAnalysis: "Erreur lors de l'analyse. Veuillez reessayer.",
+            startMessage: "Bonjour, je souhaite explorer le sujet : ",
+            scoreLabels: ["Raisonnement", "Clarte", "Scepticisme", "Processus", "Reflexion", "Integrite"],
+            noSummary: "Aucun bilan disponible.",
+            langBtn: "EN"
+        }
+    };
+
+    var currentLang = "en";
+
+    function t(key) {
+        return LANG[currentLang][key] || key;
+    }
+
+    function applyLanguage() {
+        document.querySelectorAll("[data-i18n]").forEach(function (el) {
+            el.textContent = t(el.dataset.i18n);
+        });
+        document.querySelectorAll("[data-i18n-placeholder]").forEach(function (el) {
+            el.placeholder = t(el.dataset.i18nPlaceholder);
+        });
+        document.getElementById("btn-lang").textContent = t("langBtn");
+        document.documentElement.lang = currentLang === "fr" ? "fr" : "en";
+        document.title = currentLang === "en" ? "AIM - Learning Companion" : "AIM - Compagnon d'apprentissage";
+    }
+
+    document.getElementById("btn-lang").addEventListener("click", function () {
+        currentLang = currentLang === "en" ? "fr" : "en";
+        applyLanguage();
+    });
+
     /* ===== State (in-memory only, lost on tab close) ===== */
     var state = {
         mode: "TUTOR",
@@ -275,7 +374,7 @@
         .then(function (data) {
             setTyping(false);
             if (!data.reply) {
-                addMessage("assistant", "Reponse vide du serveur. Verifiez la configuration API.");
+                addMessage("assistant", t("errorEmpty"));
                 btnSend.disabled = false;
                 return;
             }
@@ -291,7 +390,7 @@
         .catch(function (err) {
             setTyping(false);
             console.error("sendMessage error:", err);
-            addMessage("assistant", "Erreur: " + (err.message || "Connexion impossible. Veuillez reessayer."));
+            addMessage("assistant", err.message || t("errorConnection"));
             btnSend.disabled = false;
         });
     }
@@ -318,20 +417,17 @@
         .catch(function () {
             setTyping(false);
             btnEnd.disabled = false;
-            alert("Erreur lors de l'analyse. Veuillez reessayer.");
+            alert(t("errorAnalysis"));
         });
     }
 
     /* ===== Analysis rendering ===== */
     function renderAnalysis(data) {
-        var scores = [
-            { key: "reasoningScore", label: "Raisonnement" },
-            { key: "clarityScore", label: "Clarte" },
-            { key: "skepticismScore", label: "Scepticisme" },
-            { key: "processScore", label: "Processus" },
-            { key: "reflectionScore", label: "Reflexion" },
-            { key: "integrityScore", label: "Integrite" }
-        ];
+        var scoreKeys = ["reasoningScore", "clarityScore", "skepticismScore", "processScore", "reflectionScore", "integrityScore"];
+        var labels = t("scoreLabels");
+        var scores = scoreKeys.map(function (key, i) {
+            return { key: key, label: labels[i] };
+        });
 
         scoresGrid.innerHTML = "";
         scores.forEach(function (s) {
@@ -345,7 +441,7 @@
             scoresGrid.appendChild(card);
         });
 
-        summaryEl.textContent = data.summary || "Aucun bilan disponible.";
+        summaryEl.textContent = data.summary || t("noSummary");
 
         strengthsEl.innerHTML = "";
         (data.keyStrengths || []).forEach(function (s) {
@@ -452,7 +548,7 @@
         state.phaseTurns = 0;
         state.history = [];
         state.timestamps = [];
-        modeBadge.textContent = state.mode === "TUTOR" ? "Tuteur" : "Critique";
+        modeBadge.textContent = state.mode === "TUTOR" ? t("modeBadgeTutor") : t("modeBadgeCritic");
         topicBadge.textContent = topic;
 
         // Show doc count badge
@@ -479,7 +575,7 @@
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
-                message: "Bonjour, je souhaite explorer le sujet : " + state.topic,
+                message: t("startMessage") + state.topic,
                 mode: state.mode,
                 topic: state.topic,
                 phase: state.phase,
@@ -498,7 +594,7 @@
         .then(function (data) {
             setTyping(false);
             if (!data.reply) {
-                addMessage("assistant", "Reponse vide du serveur. Verifiez la configuration API.");
+                addMessage("assistant", t("errorEmpty"));
                 btnSend.disabled = false;
                 return;
             }
@@ -514,7 +610,7 @@
         .catch(function (err) {
             setTyping(false);
             console.error("startSession error:", err);
-            addMessage("assistant", "Erreur: " + (err.message || "Connexion impossible. Veuillez reessayer."));
+            addMessage("assistant", err.message || t("errorConnection"));
             btnSend.disabled = false;
         });
     }
@@ -535,7 +631,7 @@
     // End session -> analysis
     btnEnd.addEventListener("click", function () {
         if (state.history.length === 0) {
-            alert("Aucun echange a analyser.");
+            alert(t("errorNoExchange"));
             return;
         }
         requestAnalysis();
@@ -553,4 +649,7 @@
     // Load existing docs on startup
     loadDocumentList();
 
+    // Apply default language
+    applyLanguage();
+
 })();

static/index.html

@@ -1,29 +1,32 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AIM - Compagnon d'apprentissage</title>
+    <title>AIM - Learning Companion</title>
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
 
+    <!-- Language toggle (visible on all screens) -->
+    <button id="btn-lang" class="btn-lang" title="Switch language">FR</button>
+
     <!-- ===== Setup Screen ===== -->
     <div id="setup-screen" class="screen active">
         <h1>AIM</h1>
-        <p class="subtitle">Compagnon socratique d'apprentissage</p>
+        <p class="subtitle" data-i18n="subtitle">Socratic Learning Companion</p>
 
         <div class="form-group">
-            <label for="topic-input">Sujet d'exploration</label>
-            <input type="text" id="topic-input" placeholder="Ex : L'intelligence artificielle en formation professionnelle">
+            <label for="topic-input" data-i18n="topicLabel">Exploration topic</label>
+            <input type="text" id="topic-input" data-i18n-placeholder="topicPlaceholder" placeholder="E.g.: Artificial intelligence in professional training">
         </div>
 
         <div class="form-group">
-            <label>Documents de reference (optionnel)</label>
+            <label data-i18n="docsLabel">Reference documents (optional)</label>
             <div class="upload-zone" id="upload-zone">
                 <div class="upload-icon">+</div>
-                <div class="upload-text">Glisse tes fichiers ici ou clique pour selectionner</div>
-                <div class="upload-hint">PDF, PPTX, TXT ou ZIP — plusieurs fichiers possibles</div>
+                <div class="upload-text" data-i18n="uploadText">Drag your files here or click to select</div>
+                <div class="upload-hint" data-i18n="uploadHint">PDF, PPTX, TXT or ZIP — multiple files allowed</div>
                 <input type="file" id="file-input" multiple accept=".pdf,.pptx,.ppt,.txt,.zip" hidden>
             </div>
             <div class="upload-list" id="upload-list"></div>
@@ -31,20 +34,20 @@
         </div>
 
         <div class="form-group">
-            <label>Mode</label>
+            <label data-i18n="modeLabel">Mode</label>
             <div class="mode-selector">
                 <div class="mode-btn selected" data-mode="TUTOR">
-                    <div class="mode-title">Tuteur</div>
-                    <div class="mode-desc">Accompagnement bienveillant, questions ouvertes</div>
+                    <div class="mode-title" data-i18n="modeTutor">Tutor</div>
+                    <div class="mode-desc" data-i18n="modeTutorDesc">Supportive guidance, open-ended questions</div>
                 </div>
                 <div class="mode-btn" data-mode="CRITIC">
-                    <div class="mode-title">Critique</div>
-                    <div class="mode-desc">Avocat du diable, teste les failles logiques</div>
+                    <div class="mode-title" data-i18n="modeCritic">Critic</div>
+                    <div class="mode-desc" data-i18n="modeCriticDesc">Devil's advocate, tests logical weaknesses</div>
                 </div>
             </div>
         </div>
 
-        <button id="btn-start" class="btn-primary" disabled>Commencer la session</button>
+        <button id="btn-start" class="btn-primary" disabled data-i18n="btnStart">Start session</button>
     </div>
 
     <!-- ===== Chat Screen ===== -->
@@ -56,8 +59,8 @@
                 <span id="docs-badge" class="badge badge-docs" style="display:none"></span>
             </div>
             <div class="chat-header-right">
-                <button id="btn-end-session" class="btn-end">Terminer la session</button>
-                <button id="btn-reset" class="btn-reset">Recommencer</button>
+                <button id="btn-end-session" class="btn-end" data-i18n="btnEnd">End session</button>
+                <button id="btn-reset" class="btn-reset" data-i18n="btnRestart">Restart</button>
             </div>
         </div>
 
@@ -71,40 +74,40 @@
         </div>
 
         <div class="input-bar">
-            <input type="text" id="chat-input" placeholder="Tape ta reflexion ici...">
-            <button id="btn-send" class="btn-send">Envoyer</button>
+            <input type="text" id="chat-input" data-i18n-placeholder="chatPlaceholder" placeholder="Type your thoughts here...">
+            <button id="btn-send" class="btn-send" data-i18n="btnSend">Send</button>
         </div>
     </div>
 
     <!-- ===== Analysis Screen ===== -->
     <div id="analysis-screen" class="screen">
-        <h2>Rapport de session</h2>
+        <h2 data-i18n="reportTitle">Session Report</h2>
 
         <div class="scores-grid" id="scores-grid"></div>
 
         <div class="analysis-section">
-            <h3>Bilan</h3>
+            <h3 data-i18n="summaryTitle">Summary</h3>
             <p id="analysis-summary"></p>
         </div>
 
         <div class="analysis-section">
-            <h3>Points forts</h3>
+            <h3 data-i18n="strengthsTitle">Key strengths</h3>
             <ul id="analysis-strengths"></ul>
         </div>
 
         <div class="analysis-section">
-            <h3>Axes d'amelioration</h3>
+            <h3 data-i18n="weaknessesTitle">Areas for improvement</h3>
             <ul id="analysis-weaknesses"></ul>
         </div>
 
         <div class="analysis-section">
-            <h3>Rythme</h3>
-            <p>Reponses en moins de 8 secondes : <span id="rhythm-count" class="rhythm-badge">0</span></p>
+            <h3 data-i18n="rhythmTitle">Pace</h3>
+            <p><span data-i18n="rhythmText">Responses under 8 seconds:</span> <span id="rhythm-count" class="rhythm-badge">0</span></p>
         </div>
 
         <div class="analysis-actions">
-            <button id="btn-export" class="btn-secondary">Exporter JSON</button>
-            <button id="btn-new-session" class="btn-primary">Nouvelle session</button>
+            <button id="btn-export" class="btn-secondary" data-i18n="btnExport">Export JSON</button>
+            <button id="btn-new-session" class="btn-primary" data-i18n="btnNewSession">New session</button>
         </div>
     </div>
 

static/style.css

@@ -15,6 +15,25 @@
     --radius-sm: 8px;
 }
 
+.btn-lang {
+    position: fixed;
+    top: 12px;
+    right: 16px;
+    z-index: 100;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 6px 14px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.btn-lang:hover {
+    background: var(--accent);
+}
+
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {