npm - reviewflow - Versions diffs - 3.3.1 → 3.5.0 - Mend

reviewflow 3.3.1 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (225) hide show

package/dist/interface-adapters/views/dashboard/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,67 +14,105 @@
       <h1>Reviewflow</h1>
       <div class="header-actions">
         <button id="check-claude-btn" class="btn btn-primary" onclick="checkClaudeStatus()">
-          <i data-lucide="search"></i> Vérifier Claude
+          <i data-lucide="search"></i> <span id="i18n-check-claude"></span>
         </button>
         <button id="toggle-logs-btn" class="btn btn-secondary" onclick="toggleLogs()">
-          <i data-lucide="scroll-text"></i> Logs
+          <i data-lucide="scroll-text"></i> <span id="i18n-logs-btn"></span>
         </button>
         <div id="server-status" class="status-indicator connecting">
           <span class="status-dot"></span>
-          <span>Connexion...</span>
+          <span id="i18n-server-status"></span>
         </div>
       </div>
     </header>
     <div class="cards">
-      <div class="card">
-        <div class="card-label">En cours</div>
+      <div class="card card-priority">
+        <div class="card-label" id="i18n-card-running"></div>
         <div id="running-count" class="card-value running">-</div>
       </div>
-      <div class="card">
-        <div class="card-label">En attente</div>
+      <div class="card card-priority">
+        <div class="card-label" id="i18n-card-queued"></div>
         <div id="queued-count" class="card-value queued">-</div>
       </div>
       <div class="card">
-        <div class="card-label">Terminées</div>
+        <div class="card-label" id="i18n-card-completed"></div>
         <div id="completed-count" class="card-value">-</div>
       </div>
       <div class="card">
-        <div class="card-label">Claude CLI</div>
+        <div class="card-label" id="i18n-card-claude-cli"></div>
         <div id="claude-status" class="card-claude checking">
-          <span class="status">Vérification...</span>
+          <span class="status" id="i18n-claude-checking"></span>
           <span class="version"></span>
         </div>
       </div>
       <div class="card" id="git-cli-card">
-        <div class="card-label" id="git-cli-label">Git CLI</div>
+        <div class="card-label" id="git-cli-label"></div>
         <div id="git-cli-status" class="card-claude checking">
-          <span class="status">Charger un projet...</span>
+          <span class="status" id="i18n-git-load-project"></span>
           <span class="version"></span>
         </div>
       </div>
       <div class="card">
-        <div class="card-label">Modèle</div>
+        <div class="card-label" id="i18n-card-model"></div>
         <div class="card-model">
           <select id="model-select" class="model-select" onchange="changeModel(this.value)">
-            <option value="opus">Opus (puissant)</option>
-            <option value="sonnet">Sonnet (rapide)</option>
+            <option value="opus" id="i18n-model-opus"></option>
+            <option value="sonnet" id="i18n-model-sonnet"></option>
+          </select>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-label" id="i18n-card-language"></div>
+        <div class="card-model">
+          <select id="language-select" class="model-select" onchange="changeLanguage(this.value)">
+            <option value="en">English</option>
+            <option value="fr">Français</option>
           </select>
         </div>
       </div>
     </div>
+    <div class="focus-strip">
+      <div class="focus-chip focus-now">
+        <div class="focus-copy">
+          <span class="focus-label" id="i18n-strip-now"></span>
+          <span class="focus-meta" id="i18n-strip-now-meta"></span>
+        </div>
+        <span class="focus-value" id="focus-now-count">-</span>
+      </div>
+      <div class="focus-chip focus-next">
+        <div class="focus-copy">
+          <span class="focus-label" id="i18n-strip-next"></span>
+          <span class="focus-meta" id="i18n-strip-next-meta"></span>
+        </div>
+        <span class="focus-value" id="focus-next-count">-</span>
+      </div>
+      <div class="focus-chip focus-blocked">
+        <div class="focus-copy">
+          <span class="focus-label" id="i18n-strip-blocked"></span>
+          <span class="focus-meta" id="i18n-strip-blocked-meta"></span>
+        </div>
+        <span class="focus-value" id="focus-blocked-count">-</span>
+      </div>
+      <button id="focus-strip-toggle" class="focus-toggle-btn" onclick="toggleFocusStripMode()"></button>
+    </div>
+    <div id="data-loading-state" class="data-loading hidden" role="status" aria-live="polite">
+      <i data-lucide="loader-circle"></i>
+      <span id="i18n-loading-data"></span>
+    </div>
     <div class="project-loader">
       <select id="project-select" class="project-input" style="min-width: 350px;" onchange="onProjectSelect(this.value)">
-        <option value="">-- Sélectionner un projet --</option>
+        <option value="" id="i18n-project-placeholder"></option>
       </select>
       <input type="text" id="project-path-input" class="project-input" style="min-width: 250px;"
-             placeholder="Ou entrer un nouveau chemin..."
              value="">
       <button class="btn btn-primary" onclick="loadProjectConfig()">
-        <i data-lucide="folder-open"></i> Charger
+        <i data-lucide="folder-open"></i> <span id="i18n-project-load"></span>
       </button>
-      <button class="btn btn-secondary" onclick="removeCurrentProject()" title="Retirer de la liste">
+      <button id="remove-project-btn" class="btn btn-secondary" onclick="removeCurrentProject()">
         <i data-lucide="trash-2"></i>
       </button>
       <span id="config-status" class="config-status hidden"></span>
@@ -82,108 +120,127 @@
     <div id="config-info" class="config-info hidden"></div>
     <div id="claude-login-section" class="login-instructions hidden">
-      <strong><i data-lucide="alert-triangle"></i> Claude n'est pas authentifié</strong>
-      <p style="margin-top: 0.5rem;">Exécutez cette commande dans un terminal :</p>
+      <strong><i data-lucide="alert-triangle"></i> <span id="i18n-claude-login-title"></span></strong>
+      <p style="margin-top: 0.5rem;" id="i18n-claude-login-instruction"></p>
       <p style="margin-top: 0.5rem;"><code>claude login</code></p>
-      <p style="margin-top: 0.5rem; font-size: 0.875rem; color: #a1a1aa;">Puis rechargez cette page.</p>
+      <p style="margin-top: 0.5rem; font-size: 0.875rem; color: #a1a1aa;" id="i18n-claude-login-reload"></p>
     </div>
     <div id="git-login-section" class="login-instructions hidden">
-      <strong id="git-login-title"><i data-lucide="alert-triangle"></i> CLI non authentifié</strong>
+      <strong id="git-login-title"><i data-lucide="alert-triangle"></i> <span id="i18n-git-login-title"></span></strong>
       <div style="margin-top: 0.75rem;" id="git-login-instructions"></div>
     </div>
     <div id="logs-section" class="section hidden">
       <div class="section-header">
-        <i data-lucide="scroll-text"></i> Logs récents
-        <span id="error-count" class="badge-count hidden">0 erreurs</span>
+        <i data-lucide="scroll-text"></i> <span id="i18n-section-logs"></span>
+        <span id="error-count" class="badge-count hidden"></span>
       </div>
       <div id="logs-content" class="section-content logs">
-        <div class="empty-state">Aucun log</div>
+        <div class="empty-state" id="i18n-empty-logs"></div>
       </div>
     </div>
     <div id="stats-section" class="section hidden">
-      <div class="section-header clickable" onclick="toggleStats()">
-        <i data-lucide="bar-chart-3"></i> Statistiques du projet
+      <div class="section-header clickable" onclick="toggleStats()" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+        <i data-lucide="bar-chart-3"></i> <span id="i18n-section-stats"></span>
         <span id="stats-toggle" class="toggle-icon collapsed"><i data-lucide="chevron-down"></i></span>
       </div>
       <div id="project-stats" class="section-content stats-grid hidden">
-        <div class="empty-state">Charger un projet pour voir les stats</div>
+        <div class="empty-state" id="i18n-empty-stats"></div>
       </div>
     </div>
     <div class="section" id="active-reviews-section">
       <div class="section-header">
-        <i data-lucide="file-search"></i> Reviews actives
+        <i data-lucide="file-search"></i> <span id="i18n-section-active-reviews"></span>
         <span id="active-reviews-count" class="badge-count hidden">0</span>
       </div>
       <div id="active-reviews" class="section-content">
-        <div class="empty-state">Aucune review en cours</div>
+        <div class="empty-state" id="i18n-empty-active-reviews"></div>
       </div>
     </div>
     <div class="section hidden" id="active-followups-section">
-      <div class="section-header">
-        <i data-lucide="refresh-cw"></i> Followups actifs
+      <div class="section-header clickable" onclick="toggleSection('active-followups-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+        <i data-lucide="refresh-cw"></i> <span id="i18n-section-active-followups"></span>
         <span id="active-followups-count" class="badge-count hidden">0</span>
+        <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
       </div>
       <div id="active-followups" class="section-content">
-        <div class="empty-state">Aucun followup en cours</div>
+        <div class="empty-state" id="i18n-empty-active-followups"></div>
       </div>
     </div>
     <div class="section hidden" id="pending-fix-section">
       <div class="section-header">
-        <i data-lucide="wrench"></i> En attente de correctif
+        <i data-lucide="wrench"></i> <span id="i18n-section-pending-fix"></span>
         <span id="pending-fix-count" class="badge-count hidden">0</span>
-        <button id="sync-threads-btn" class="btn-icon btn-sync" title="Synchroniser les threads GitLab" onclick="syncGitLabThreads()">
+        <button id="sync-threads-btn" class="btn-icon btn-sync" onclick="syncGitLabThreads()">
           <i data-lucide="refresh-cw"></i>
         </button>
       </div>
       <div id="pending-fix-reviews" class="section-content">
-        <div class="empty-state">Aucune MR en attente de correctif</div>
+        <div class="empty-state" id="i18n-empty-pending-fix"></div>
       </div>
     </div>
     <div class="section hidden" id="pending-approval-section">
-      <div class="section-header">
-        <i data-lucide="circle-check"></i> En attente d'approbation
+      <div class="section-header clickable" onclick="toggleSection('pending-approval-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+        <i data-lucide="circle-check"></i> <span id="i18n-section-pending-approval"></span>
         <span id="pending-approval-count" class="badge-count hidden">0</span>
+        <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
       </div>
       <div id="pending-approval-reviews" class="section-content">
-        <div class="empty-state">Aucune MR en attente d'approbation</div>
+        <div class="empty-state" id="i18n-empty-pending-approval"></div>
       </div>
     </div>
-    <div class="section">
-      <div class="section-header">
-        <i data-lucide="file-check"></i> Reviews terminées
+    <div class="section" id="completed-reviews-section">
+      <div class="section-header clickable" onclick="toggleSection('completed-reviews-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+        <i data-lucide="file-check"></i> <span id="i18n-section-completed-reviews"></span>
+        <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
       </div>
       <div id="recent-reviews" class="section-content">
-        <div class="empty-state">Chargement...</div>
+        <div class="empty-state" id="i18n-empty-loading"></div>
       </div>
     </div>
     <div class="refresh-info">
-      <span id="connection-mode">WebSocket temps réel</span> • Fallback polling 5s
+      <span id="connection-mode"></span> • <span id="i18n-connection-fallback"></span>
+      <span class="refresh-separator"> • </span>
+      <span id="session-metrics"></span>
     </div>
   </div>
   <div id="cancel-modal" class="modal-overlay hidden" onclick="closeCancelModal(event)">
     <div class="modal-content" onclick="event.stopPropagation()">
       <div class="modal-title" id="cancel-modal-title"></div>
-      <div class="modal-message">Cette action est irréversible. La review sera arrêtée immédiatement.</div>
+      <div class="modal-message" id="i18n-modal-message"></div>
       <div class="modal-actions">
-        <button class="btn-modal-back" onclick="closeCancelModal()">Revenir</button>
-        <button class="btn-modal-confirm" id="cancel-modal-confirm" onclick="confirmCancelReview()">Confirmer</button>
+        <button class="btn-modal-back" onclick="closeCancelModal()" id="i18n-modal-back"></button>
+        <button class="btn-modal-confirm" id="cancel-modal-confirm" onclick="confirmCancelReview()"></button>
       </div>
     </div>
   </div>
   <div id="toast-container" class="toast-container"></div>
-  <script>
+  <script type="module">
+    import { t, setLanguage, getLanguage } from './modules/i18n.js';
+    import { formatTime, formatDuration, formatPhase, formatLogTime } from './modules/formatting.js';
+    import { escapeHtml, markdownToHtml, sanitizeHttpUrl } from './modules/html.js';
+    import { getAgentIcon, icon, refreshIcons } from './modules/icons.js';
+    import { MAX_RECONNECT_ATTEMPTS, RECONNECT_DELAY, STORAGE_KEY_PROJECTS, STORAGE_KEY_CURRENT, STORAGE_KEY_FOCUS_STRIP_MODE, QUALITY_TARGET_SCORE } from './modules/constants.js';
+    import { getDesktopNotificationPayload, shouldNotifyDesktop } from './modules/desktopNotifications.js';
+    import { getLoadingPresentation, getQuietRefreshSectionIdentifiers } from './modules/loading.js';
+    import { collectReviewNotifications, createReviewNotificationState } from './modules/notifications.js';
+    import { resolveReviewAssigneeDisplay } from './modules/assignee.js';
+    import { buildQueueLanesModel } from './modules/queueLanes.js';
+    import { rankPendingFixForNowLane } from './modules/priority.js';
+    import { getQualityProgress, getQualityTrend } from './modules/quality.js';
+    import { createSessionMetricsState, trackSessionAction, updatePriorityItemTracking, getSessionMetricsSnapshot } from './modules/sessionMetrics.js';
     const API_URL = window.location.origin;
     const WS_URL = `ws://${window.location.host}/ws`;
@@ -191,66 +248,280 @@
     let wsConnected = false;
     let reconnectAttempts = 0;
     let logsVisible = false;
-    const MAX_RECONNECT_ATTEMPTS = 10;
-    const RECONNECT_DELAY = 3000;
     let currentData = { activeReviews: [], recentReviews: [], logs: [], reviewFiles: [], pendingFix: [], pendingApproval: [] };
-    let loadedReviews = {}; // Cache for loaded review content
-    let statsCollapsed = true; // Track stats section state (collapsed by default)
-    // Agent status icons (will be replaced with Lucide icons after render)
-    const agentIconNames = { pending: 'clock', running: 'loader', completed: 'check', failed: 'x' };
-    const getAgentIcon = (status) => `<i data-lucide="${agentIconNames[status] || 'help-circle'}"></i>`;
-    function formatTime(dateStr) {
-      if (!dateStr) return '-';
-      const date = new Date(dateStr);
-      const now = new Date();
-      const diff = now - date;
-      if (diff < 60000) return "À l'instant";
-      if (diff < 3600000) return `Il y a ${Math.floor(diff / 60000)} min`;
-      if (diff < 86400000) return `Il y a ${Math.floor(diff / 3600000)}h`;
-      return date.toLocaleDateString('fr-FR');
-    }
-    function formatDuration(startStr, endStr, totalMs) {
-      let diff;
-      if (totalMs !== undefined && totalMs !== null) {
-        diff = Math.floor(totalMs / 1000);
-      } else if (startStr) {
-        const start = new Date(startStr);
-        const end = endStr ? new Date(endStr) : new Date();
-        diff = Math.floor((end - start) / 1000);
+    let loadedReviews = {};
+    let statsCollapsed = true;
+    let focusStripCompact = false;
+    const loadingState = { status: 0, reviewFiles: 0, stats: 0, mrTracking: 0 };
+    let hasLoadedStatusOnce = false;
+    const secondarySections = ['active-followups-section', 'pending-approval-section', 'completed-reviews-section'];
+    const sectionExpandedState = Object.fromEntries(secondarySections.map((sectionIdentifier) => [sectionIdentifier, false]));
+    const quietRefreshSections = [
+      'active-reviews-section',
+      'active-followups-section',
+      'completed-reviews-section',
+      'pending-fix-section',
+    ];
+    const loadingLabelBySource = {
+      status: 'loading.status',
+      reviewFiles: 'loading.reviewFiles',
+      stats: 'loading.stats',
+      mrTracking: 'loading.mrTracking',
+    };
+    let loadingShowTimeout = null;
+    let loadingHideTimeout = null;
+    let loadingVisibleSince = null;
+    const loadingDelayMs = 260;
+    const loadingMinimumVisibleMs = 420;
+    let sessionMetrics = createSessionMetricsState(Date.now());
+    let reviewNotificationState = createReviewNotificationState();
+    function applyFocusStripMode() {
+      const strip = document.querySelector('.focus-strip');
+      if (strip) {
+        strip.classList.toggle('compact', focusStripCompact);
+      }
+      document.body.classList.toggle('compact-density', focusStripCompact);
+      const toggleBtn = document.getElementById('focus-strip-toggle');
+      if (toggleBtn) {
+        toggleBtn.textContent = focusStripCompact ? t('strip.modeDetailed') : t('strip.modeCompact');
+        toggleBtn.setAttribute('aria-pressed', focusStripCompact ? 'true' : 'false');
+      }
+    }
+    function loadFocusStripMode() {
+      const mode = localStorage.getItem(STORAGE_KEY_FOCUS_STRIP_MODE);
+      focusStripCompact = mode === 'compact';
+      applyFocusStripMode();
+    }
+    function toggleFocusStripMode() {
+      focusStripCompact = !focusStripCompact;
+      localStorage.setItem(STORAGE_KEY_FOCUS_STRIP_MODE, focusStripCompact ? 'compact' : 'detailed');
+      applyFocusStripMode();
+    }
+    function applySectionExpansion(sectionIdentifier) {
+      const section = document.getElementById(sectionIdentifier);
+      if (!section) return;
+      const content = section.querySelector('.section-content');
+      const toggle = section.querySelector('.section-toggle');
+      if (!content) return;
+      const expanded = sectionExpandedState[sectionIdentifier] === true;
+      content.classList.toggle('hidden', !expanded);
+      section.classList.toggle('section-collapsed', !expanded);
+      if (toggle) {
+        toggle.classList.toggle('collapsed', !expanded);
+      }
+    }
+    function toggleSection(sectionIdentifier) {
+      if (!(sectionIdentifier in sectionExpandedState)) return;
+      sectionExpandedState[sectionIdentifier] = !sectionExpandedState[sectionIdentifier];
+      applySectionExpansion(sectionIdentifier);
+      refreshIcons();
+    }
+    function setLoadingFlag(source, isLoading) {
+      if (!(source in loadingState)) return;
+      const nextValue = isLoading
+        ? loadingState[source] + 1
+        : Math.max(0, loadingState[source] - 1);
+      loadingState[source] = nextValue;
+      updateLoadingStateUI();
+    }
+    function applyQuietRefreshSectionIndicators(sectionIdentifiers) {
+      quietRefreshSections.forEach((sectionIdentifier) => {
+        const section = document.getElementById(sectionIdentifier);
+        if (!section) return;
+        section.classList.toggle('is-refreshing', sectionIdentifiers.includes(sectionIdentifier));
+      });
+    }
+    function getLoadingMessageKey() {
+      const activeSource = Object.entries(loadingState).find(([, value]) => value > 0)?.[0];
+      return activeSource ? loadingLabelBySource[activeSource] : 'loading.data';
+    }
+    function updateLoadingStateUI() {
+      const isLoading = Object.values(loadingState).some((value) => value > 0);
+      const loadingPresentation = getLoadingPresentation(loadingState, { hasLoadedStatusOnce });
+      const loadingElement = document.getElementById('data-loading-state');
+      if (!loadingElement) return;
+      const loadingLabel = document.getElementById('i18n-loading-data');
+      if (loadingLabel) {
+        loadingLabel.textContent = t(getLoadingMessageKey());
+      }
+      if (isLoading) {
+        document.body.classList.toggle('is-quiet-refresh', loadingPresentation.isQuietRefresh);
+        const quietSectionIdentifiers = getQuietRefreshSectionIdentifiers(loadingState, { hasLoadedStatusOnce });
+        applyQuietRefreshSectionIndicators(quietSectionIdentifiers);
+        if (!loadingPresentation.showGlobalLoading) {
+          if (loadingShowTimeout) {
+            clearTimeout(loadingShowTimeout);
+            loadingShowTimeout = null;
+          }
+          if (loadingHideTimeout) {
+            clearTimeout(loadingHideTimeout);
+            loadingHideTimeout = null;
+          }
+          loadingVisibleSince = null;
+          loadingElement.classList.add('hidden');
+          document.body.classList.remove('is-loading-data');
+          return;
+        }
+        if (loadingHideTimeout) {
+          clearTimeout(loadingHideTimeout);
+          loadingHideTimeout = null;
+        }
+        if (!loadingVisibleSince && !loadingShowTimeout) {
+          loadingShowTimeout = setTimeout(() => {
+            loadingElement.classList.remove('hidden');
+            document.body.classList.add('is-loading-data');
+            loadingVisibleSince = Date.now();
+            loadingShowTimeout = null;
+            refreshIcons();
+          }, loadingDelayMs);
+        }
       } else {
-        return '';
+        document.body.classList.remove('is-quiet-refresh');
+        applyQuietRefreshSectionIndicators([]);
+        if (loadingShowTimeout) {
+          clearTimeout(loadingShowTimeout);
+          loadingShowTimeout = null;
+        }
+        if (!loadingVisibleSince) {
+          loadingElement.classList.add('hidden');
+          document.body.classList.remove('is-loading-data');
+          return;
+        }
+        const elapsed = Date.now() - loadingVisibleSince;
+        const remaining = Math.max(0, loadingMinimumVisibleMs - elapsed);
+        loadingHideTimeout = setTimeout(() => {
+          loadingElement.classList.add('hidden');
+          document.body.classList.remove('is-loading-data');
+          loadingVisibleSince = null;
+          loadingHideTimeout = null;
+          updateUI();
+        }, remaining);
       }
-      if (diff < 60) return `${diff}s`;
-      if (diff < 3600) return `${Math.floor(diff / 60)}m ${diff % 60}s`;
-      return `${Math.floor(diff / 3600)}h ${Math.floor((diff % 3600) / 60)}m`;
-    }
-    function formatPhase(phase) {
-      const labels = {
-        'initializing': 'Initialisation',
-        'agents-running': 'Agents en cours',
-        'synthesizing': 'Synthèse',
-        'publishing': 'Publication',
-        'completed': 'Terminé'
-      };
-      return labels[phase] || phase;
     }
-    function formatLogTime(timestamp) {
-      const date = new Date(timestamp);
-      return date.toLocaleTimeString('fr-FR');
+    function formatSessionDuration(milliseconds) {
+      const seconds = Math.max(0, Math.floor(milliseconds / 1000));
+      if (seconds < 60) return `${seconds}s`;
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = seconds % 60;
+      return `${minutes}m ${remainingSeconds}s`;
+    }
+    function formatActionBreakdown(actionBreakdown) {
+      return `${t('metrics.action.followup')} ${actionBreakdown.followup}, ${t('metrics.action.open')} ${actionBreakdown.open}, ${t('metrics.action.approve')} ${actionBreakdown.approve}, ${t('metrics.action.cancelReview')} ${actionBreakdown.cancelReview}, ${t('metrics.action.syncThreads')} ${actionBreakdown.syncThreads}`;
+    }
+    function updateSessionMetricsUI() {
+      const metricsElement = document.getElementById('session-metrics');
+      if (!metricsElement) return;
+      const metricsSnapshot = getSessionMetricsSnapshot(sessionMetrics);
+      const firstActionLabel = metricsSnapshot.firstUsefulActionDelayMs === null
+        ? t('metrics.pending')
+        : formatSessionDuration(metricsSnapshot.firstUsefulActionDelayMs);
+      const priorityResolutionLabel = metricsSnapshot.averagePriorityResolutionMs === null
+        ? t('metrics.pending')
+        : formatSessionDuration(metricsSnapshot.averagePriorityResolutionMs);
+      const actionBreakdownLabel = formatActionBreakdown(metricsSnapshot.actionBreakdown);
+      metricsElement.textContent = `${t('metrics.session')}: ${t('metrics.firstAction')} ${firstActionLabel} • ${metricsSnapshot.actionCount} ${t('metrics.actions')} • ${t('metrics.priorityResolution')} ${priorityResolutionLabel} • ${t('metrics.breakdown')} ${actionBreakdownLabel}`;
+    }
+    function trackUsefulAction(actionType = 'other') {
+      sessionMetrics = trackSessionAction(sessionMetrics, actionType, Date.now());
+      updateSessionMetricsUI();
+    }
+    function onUsefulLinkAction() {
+      trackUsefulAction('open');
+      return true;
+    }
+    function activateOnKeydown(event) {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+    function safeDecodeURIComponent(value) {
+      try {
+        return decodeURIComponent(String(value ?? ''));
+      } catch {
+        return String(value ?? '');
+      }
+    }
+    function getNotificationMrNumber(review) {
+      return typeof review.mrNumber === 'number' ? String(review.mrNumber) : '?';
+    }
+    function mapNotificationToToast(notification) {
+      const mrNumber = getNotificationMrNumber(notification.review);
+      switch (notification.kind) {
+        case 'reviewStarted':
+          return { message: t('notify.reviewStarted', { mrNumber }), type: 'info' };
+        case 'followupStarted':
+          return { message: t('notify.followupStarted', { mrNumber }), type: 'info' };
+        case 'reviewCompleted':
+          return { message: t('notify.reviewCompleted', { mrNumber }), type: 'success' };
+        case 'followupCompleted':
+          return { message: t('notify.followupCompleted', { mrNumber }), type: 'success' };
+        case 'reviewFailed':
+          return { message: t('notify.reviewFailed', { mrNumber }), type: 'error' };
+        default:
+          return null;
+      }
+    }
+    function maybeShowDesktopNotification(notification) {
+      if (typeof Notification === 'undefined') return;
+      const shouldNotify = shouldNotifyDesktop({
+        permission: Notification.permission,
+        isDocumentHidden: document.visibilityState !== 'visible',
+      });
+      if (!shouldNotify) return;
+      const desktopPayload = getDesktopNotificationPayload(notification, t);
+      if (!desktopPayload) return;
+      new Notification(desktopPayload.title, {
+        body: desktopPayload.body,
+        tag: desktopPayload.tag,
+      });
+    }
+    function dispatchReviewNotifications(activeReviews, recentReviews) {
+      const result = collectReviewNotifications(reviewNotificationState, activeReviews, recentReviews);
+      reviewNotificationState = result.nextState;
+      result.notifications.forEach((notification) => {
+        const toastPayload = mapNotificationToToast(notification);
+        if (!toastPayload) return;
+        showToast(toastPayload.message, toastPayload.type);
+        maybeShowDesktopNotification(notification);
+      });
     }
     function renderAgentTimeline(progress) {
       if (!progress?.agents?.length) return '';
+      const allowedAgentStatuses = new Set(['running', 'completed', 'failed', 'pending', 'queued']);
       const agentsHtml = progress.agents.map(agent => `
-        <div class="agent-box ${agent.status}" title="${agent.displayName}: ${agent.status}">
+        <div class="agent-box ${allowedAgentStatuses.has(agent.status) ? agent.status : 'queued'}" title="${escapeHtml(agent.displayName)}: ${escapeHtml(agent.status)}">
           <span class="agent-icon">${getAgentIcon(agent.status)}</span>
-          <span class="agent-name">${agent.displayName}</span>
+          <span class="agent-name">${escapeHtml(agent.displayName)}</span>
         </div>
       `).join('');
       return `<div class="agent-timeline">${agentsHtml}</div>`;
@@ -258,72 +529,89 @@
     function renderProgressBar(progress) {
       if (!progress) return '';
+      const overallProgress = typeof progress.overallProgress === 'number'
+        ? Math.max(0, Math.min(100, progress.overallProgress))
+        : 0;
       return `
         <div class="progress-container">
           <div class="progress-bar-wrapper">
             <div class="progress-bar">
-              <div class="progress-bar-fill" style="width: ${progress.overallProgress}%"></div>
+              <div class="progress-bar-fill" style="width: ${overallProgress}%"></div>
             </div>
-            <span class="progress-percent">${progress.overallProgress}%</span>
+            <span class="progress-percent">${overallProgress}%</span>
           </div>
           <div class="progress-phase">${formatPhase(progress.currentPhase)}</div>
         </div>
       `;
     }
+    function getReviewStatusPresentation(status) {
+      const statusMap = {
+        running: { icon: 'activity', label: t('review.status.running') },
+        queued: { icon: 'clock-3', label: t('review.status.queued') },
+        completed: { icon: 'check-circle-2', label: t('review.status.completed') },
+        failed: { icon: 'triangle-alert', label: t('review.status.failed') },
+      };
+      return statusMap[status] || { icon: 'circle-help', label: status };
+    }
     function renderReview(review, isActive) {
-      const statusClass = review.status;
+      const statusClass = typeof review.status === 'string' ? review.status : 'queued';
+      const safeStatusClass = ['running', 'queued', 'completed', 'failed'].includes(statusClass) ? statusClass : 'queued';
+      const statusPresentation = getReviewStatusPresentation(statusClass);
       const mrNumber = review.mrNumber;
-      const project = review.project.split('/').pop();
-      const mrPrefix = review.id.startsWith('github') ? '#' : '!';
-      const mrLabel = getMrLabel(review.id.startsWith('github') ? 'github' : 'gitlab');
+      const project = typeof review.project === 'string' ? review.project.split('/').pop() : '';
+      const reviewId = typeof review.id === 'string' ? review.id : '';
+      const reviewIsGitHub = reviewId.startsWith('github');
+      const mrPrefix = reviewIsGitHub ? '#' : '!';
+      const mrLabel = getMrLabel(reviewIsGitHub ? 'github' : 'gitlab');
+      const safeMrUrl = sanitizeHttpUrl(typeof review.mrUrl === 'string' ? review.mrUrl : null);
       const progressHtml = isActive && review.progress ? `
         ${renderAgentTimeline(review.progress)}
         ${renderProgressBar(review.progress)}
       ` : '';
-      // Assignee info with avatar
-      const assignerUsername = review.assignedBy?.username || 'unknown';
-      const assignerDisplay = review.assignedBy?.displayName || assignerUsername;
+      const trackedMergeRequests = [...currentData.pendingFix, ...currentData.pendingApproval];
+      const assignerDisplay = resolveReviewAssigneeDisplay(review, trackedMergeRequests);
       const assignerInitial = assignerDisplay.charAt(0).toUpperCase();
+      const safeReviewAccordionId = reviewId.replace(/[^a-zA-Z0-9-]/g, '-');
+      const safeJobType = review.jobType === 'followup' ? 'followup' : 'review';
-      // Description accordion (for active reviews)
       const descriptionHtml = isActive && review.description ? `
         <div class="review-description-accordion">
-          <div class="review-description-toggle" onclick="toggleReviewDescription('${review.id}')">
-            <i data-lucide="chevron-right"></i> Description
+          <div class="review-description-toggle" onclick="toggleReviewDescription('${safeReviewAccordionId}')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+            <i data-lucide="chevron-right"></i> ${t('review.description')}
           </div>
-          <div class="review-description-content" id="review-desc-${review.id.replace(/[^a-zA-Z0-9-]/g, '-')}">
+          <div class="review-description-content" id="review-desc-${safeReviewAccordionId}">
             <div class="review-description-text">${escapeHtml(review.description)}</div>
           </div>
         </div>
       ` : '';
-      // Title: use MR title if available, else fallback to project name
       const displayTitle = review.title || project;
       return `
-        <div class="review-item" data-job-id="${review.id}">
+        <div class="review-item" data-job-id="${escapeHtml(reviewId)}">
           <div class="review-header">
-            <div class="review-status ${statusClass}"></div>
+            <div class="review-status ${safeStatusClass}" title="${escapeHtml(statusPresentation.label)}"></div>
             <div class="review-info">
               <div class="review-title">
-                <a href="${review.mrUrl}" target="_blank">${mrPrefix}${mrNumber}</a> - ${displayTitle}
+                <a href="${safeMrUrl}" target="_blank" rel="noopener noreferrer">${mrPrefix}${mrNumber}</a> - ${escapeHtml(displayTitle)}
               </div>
               <div class="review-meta">
-                <span class="badge ${statusClass}">${review.status}</span>
+                <span class="badge ${safeStatusClass}"><i data-lucide="${statusPresentation.icon}"></i> ${escapeHtml(statusPresentation.label)}</span>
                 ${isActive ? `<i data-lucide="clock"></i> ${formatDuration(review.startedAt)}` : ''}
               </div>
-              ${review.error ? `<div class="error-message">${review.error}</div>` : ''}
+              ${review.error ? `<div class="error-message">${escapeHtml(review.error)}</div>` : ''}
             </div>
-            ${isActive ? `<button class="btn-cancel-review" onclick="event.stopPropagation(); showCancelModal('${review.id}', ${mrNumber}, '${review.jobType || 'review'}')" title="Annuler"><i data-lucide="x"></i> Annuler</button>` : ''}
+            ${isActive ? `<button class="btn-cancel-review" onclick="event.stopPropagation(); showCancelModal('${encodeURIComponent(reviewId)}', ${mrNumber}, '${safeJobType}')" title="${t('button.cancel')}"><i data-lucide="x"></i> ${t('button.cancel')}</button>` : ''}
             <div class="review-assigner">
               <div class="review-assigner-info">
-                <span class="review-assigner-name">${assignerDisplay}</span>
+                <span class="review-assigner-name">${escapeHtml(assignerDisplay)}</span>
                 <span class="review-assigner-time">${isActive ? formatTime(review.startedAt) : formatTime(review.completedAt)}</span>
               </div>
-              <div class="review-avatar" title="${assignerDisplay}">${assignerInitial}</div>
+              <div class="review-avatar" title="${escapeHtml(assignerDisplay)}">${escapeHtml(assignerInitial)}</div>
             </div>
           </div>
           ${descriptionHtml}
@@ -349,21 +637,16 @@
       }
     }
-    function escapeHtml(text) {
-      if (!text) return '';
-      const div = document.createElement('div');
-      div.textContent = text;
-      return div.innerHTML;
-    }
     function renderLog(log) {
-      const dataStr = log.data ? JSON.stringify(log.data, null, 2) : '';
+      const dataStr = log.data ? escapeHtml(JSON.stringify(log.data, null, 2)) : '';
+      const logLevel = typeof log.level === 'string' ? log.level : 'info';
+      const safeLogLevelClass = logLevel.replace(/[^a-zA-Z0-9-]/g, '-');
       return `
         <div class="log-entry">
           <span class="log-time">${formatLogTime(log.timestamp)}</span>
-          <span class="log-level ${log.level}">${log.level.toUpperCase()}</span>
+          <span class="log-level ${safeLogLevelClass}">${escapeHtml(logLevel.toUpperCase())}</span>
           <div class="log-message">
-            ${log.message}
+            ${escapeHtml(String(log.message ?? ''))}
             ${dataStr ? `<div class="log-data">${dataStr}</div>` : ''}
           </div>
         </div>
@@ -371,31 +654,36 @@
     }
     function updateUI() {
-      // Separate reviews and followups
       const reviews = currentData.activeReviews.filter(r => r.jobType !== 'followup');
       const followups = currentData.activeReviews.filter(r => r.jobType === 'followup');
       const running = currentData.activeReviews.filter(r => r.status === 'running').length;
       const queued = currentData.activeReviews.filter(r => r.status === 'queued').length;
+      const blocked = currentData.pendingFix.length;
+      const nowCount = running + blocked;
+      const nextCount = queued + currentData.pendingApproval.length;
       document.getElementById('running-count').textContent = running;
       document.getElementById('queued-count').textContent = queued;
       document.getElementById('completed-count').textContent = currentData.reviewFiles.length;
+      document.getElementById('focus-now-count').textContent = String(nowCount);
+      document.getElementById('focus-next-count').textContent = String(nextCount);
+      document.getElementById('focus-blocked-count').textContent = String(blocked);
-      // Update Reviews section
       const activeReviewsSection = document.getElementById('active-reviews-section');
       const activeReviewsEl = document.getElementById('active-reviews');
       const activeReviewsCount = document.getElementById('active-reviews-count');
+      activeReviewsSection.classList.remove('hidden');
       if (reviews.length === 0) {
-        activeReviewsSection.classList.add('hidden');
+        const showInitialLoadingState = !hasLoadedStatusOnce && loadingState.status > 0;
+        activeReviewsEl.innerHTML = `<div class="empty-state">${showInitialLoadingState ? t('loading.section') : t('empty.activeReviews')}</div>`;
+        activeReviewsCount.classList.add('hidden');
       } else {
-        activeReviewsSection.classList.remove('hidden');
         activeReviewsEl.innerHTML = reviews.map(r => renderReview(r, true)).join('');
         activeReviewsCount.textContent = reviews.length;
         activeReviewsCount.classList.remove('hidden');
       }
-      // Update Followups section
       const activeFollowupsSection = document.getElementById('active-followups-section');
       const activeFollowupsEl = document.getElementById('active-followups');
       const activeFollowupsCount = document.getElementById('active-followups-count');
@@ -407,10 +695,10 @@
         activeFollowupsEl.innerHTML = followups.map(r => renderReview(r, true)).join('');
         activeFollowupsCount.textContent = followups.length;
         activeFollowupsCount.classList.remove('hidden');
+        applySectionExpansion('active-followups-section');
       }
       refreshIcons();
-      // Note: recent-reviews is managed by updateReviewFilesUI() - don't overwrite here
     }
     function updateLogs() {
@@ -419,112 +707,68 @@
       const errorBadge = document.getElementById('error-count');
       if (errorCount > 0) {
-        errorBadge.textContent = `${errorCount} erreurs`;
+        errorBadge.textContent = t('logs.errorCount', { count: errorCount });
         errorBadge.classList.remove('hidden');
       } else {
         errorBadge.classList.add('hidden');
       }
       if (currentData.logs.length === 0) {
-        logsEl.innerHTML = '<div class="empty-state">Aucun log</div>';
+        logsEl.innerHTML = `<div class="empty-state">${t('empty.logs')}</div>`;
       } else {
         logsEl.innerHTML = currentData.logs.slice().reverse().map(renderLog).join('');
       }
     }
-    function updateConnectionStatus(status, text) {
+    function updateConnectionStatus(status, textKey, textFallback) {
       const statusEl = document.getElementById('server-status');
       statusEl.className = `status-indicator ${status}`;
-      statusEl.innerHTML = `<span class="status-dot"></span><span>${text}</span>`;
+      const displayText = textKey ? t(textKey) : textFallback;
+      statusEl.innerHTML = `<span class="status-dot"></span><span>${escapeHtml(String(displayText ?? ''))}</span>`;
       const modeEl = document.getElementById('connection-mode');
       modeEl.textContent = status === 'online' && wsConnected
-        ? 'WebSocket temps réel'
-        : status === 'online' ? 'Mode polling' : 'Déconnecté';
-    }
-    // Simple markdown to HTML converter
-    function markdownToHtml(md) {
-      let html = md
-        // Escape HTML
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        // Code blocks
-        .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>')
-        // Inline code
-        .replace(/`([^`]+)`/g, '<code>$1</code>')
-        // Headers
-        .replace(/^### (.+)$/gm, '<h3>$1</h3>')
-        .replace(/^## (.+)$/gm, '<h2>$1</h2>')
-        .replace(/^# (.+)$/gm, '<h1>$1</h1>')
-        // Bold
-        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-        // Italic
-        .replace(/\*([^*]+)\*/g, '<em>$1</em>')
-        // Links
-        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
-        // Blockquotes
-        .replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
-        // Unordered lists
-        .replace(/^- (.+)$/gm, '<li>$1</li>')
-        // Ordered lists
-        .replace(/^\d+\. (.+)$/gm, '<li>$1</li>')
-        // Horizontal rules
-        .replace(/^---$/gm, '<hr>')
-        // Tables (simple)
-        .replace(/^\|(.+)\|$/gm, (match, content) => {
-          const cells = content.split('|').map(c => c.trim());
-          if (cells.every(c => c.match(/^-+$/))) return '';
-          const cellTag = match.includes('---') ? 'th' : 'td';
-          return '<tr>' + cells.map(c => `<${cellTag}>${c}</${cellTag}>`).join('') + '</tr>';
-        })
-        // Wrap consecutive table rows
-        .replace(/(<tr>[\s\S]*?<\/tr>)+/g, '<table>$&</table>')
-        // Wrap consecutive list items
-        .replace(/(<li>[\s\S]*?<\/li>)+/g, '<ul>$&</ul>')
-        // Paragraphs
-        .replace(/\n\n/g, '</p><p>')
-        .replace(/\n/g, '<br>');
-      return '<p>' + html + '</p>';
+        ? t('connection.websocket')
+        : status === 'online' ? t('connection.polling') : t('connection.disconnected');
     }
     function renderReviewFile(review) {
       const typeIcon = review.type === 'review' ? 'file-text' : review.type === 'followup' ? 'refresh-cw' : 'file';
-      const typeLabel = review.type === 'review' ? 'Review' : review.type === 'followup' ? 'Followup' : review.type;
+      const typeLabel = review.type === 'review' ? t('review.type.review') : review.type === 'followup' ? t('review.type.followup') : review.type;
       const sizeKb = (review.size / 1024).toFixed(1);
       const mrLabel = getMrLabel();
+      const encodedFilename = encodeURIComponent(String(review.filename ?? ''));
+      const filenameDomId = encodedFilename.replace(/[^a-zA-Z0-9-]/g, '-');
       return `
-        <div class="review-accordion" data-filename="${review.filename}">
+        <div class="review-accordion" data-filename="${encodedFilename}">
           <div class="review-accordion-header">
-            <div class="review-accordion-toggle" onclick="toggleReviewAccordion('${review.filename}')"><i data-lucide="chevron-right"></i></div>
-            <div class="review-status completed" onclick="toggleReviewAccordion('${review.filename}')"></div>
-            <div class="review-info" onclick="toggleReviewAccordion('${review.filename}')" style="cursor: pointer;">
-              <div class="review-title">${mrLabel} ${review.mrNumber}${review.title ? ` - ${review.title}` : ''}</div>
+            <div class="review-accordion-toggle" onclick="toggleReviewAccordion('${encodedFilename}')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)"><i data-lucide="chevron-right"></i></div>
+            <div class="review-status completed" onclick="toggleReviewAccordion('${encodedFilename}')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)"></div>
+            <div class="review-info" onclick="toggleReviewAccordion('${encodedFilename}')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)" style="cursor: pointer;">
+              <div class="review-title">${mrLabel} ${review.mrNumber}${review.title ? ` - ${escapeHtml(String(review.title))}` : ''}</div>
               <div class="review-meta">
                 <span class="badge completed"><i data-lucide="${typeIcon}"></i> ${typeLabel}</span>
                 <span style="margin-left: 0.5rem; color: #71717a;">${sizeKb} KB</span>
               </div>
             </div>
-            <div class="review-time" onclick="toggleReviewAccordion('${review.filename}')" style="cursor: pointer;">${review.date}</div>
-            <button class="btn-delete" onclick="deleteReviewFile('${review.filename}')" title="Supprimer"><i data-lucide="trash-2"></i></button>
+            <div class="review-time" onclick="toggleReviewAccordion('${encodedFilename}')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)" style="cursor: pointer;">${escapeHtml(String(review.date ?? ''))}</div>
+            <button class="btn-delete" onclick="deleteReviewFile('${encodedFilename}')" title="${t('button.delete')}"><i data-lucide="trash-2"></i></button>
           </div>
           <div class="review-accordion-content">
-            <div class="markdown-content" id="review-content-${review.filename.replace(/\./g, '-')}">
-              <div class="empty-state">Chargement...</div>
+            <div class="markdown-content" id="review-content-${filenameDomId}">
+              <div class="empty-state">${t('status.loading')}</div>
             </div>
           </div>
         </div>
       `;
     }
-    async function toggleReviewAccordion(filename) {
-      const accordion = document.querySelector(`.review-accordion[data-filename="${filename}"]`);
+    async function toggleReviewAccordion(encodedFilename) {
+      const filename = safeDecodeURIComponent(encodedFilename);
+      const accordion = document.querySelector(`.review-accordion[data-filename="${encodedFilename}"]`);
       const isOpen = accordion.classList.contains('open');
-      // Close all other accordions
       document.querySelectorAll('.review-accordion.open').forEach(el => {
         if (el !== accordion) el.classList.remove('open');
       });
@@ -535,17 +779,16 @@
       }
       accordion.classList.add('open');
-      const contentId = `review-content-${filename.replace(/\./g, '-')}`;
+      const contentId = `review-content-${encodedFilename.replace(/[^a-zA-Z0-9-]/g, '-')}`;
       const contentEl = document.getElementById(contentId);
-      // Load content if not cached
       if (!loadedReviews[filename]) {
         try {
           const response = await fetch(`${API_URL}/api/reviews/${filename}`);
           const data = await response.json();
           loadedReviews[filename] = data.content;
         } catch (error) {
-          contentEl.innerHTML = '<div class="empty-state">Erreur de chargement</div>';
+          contentEl.innerHTML = `<div class="empty-state">${t('error.loading')}</div>`;
           return;
         }
       }
@@ -554,8 +797,8 @@
     }
     async function fetchReviewFiles() {
+      setLoadingFlag('reviewFiles', true);
       try {
-        // Fetch reviews for current project if loaded, otherwise all
         const url = currentProjectPath
           ? `${API_URL}/api/reviews?path=${encodeURIComponent(currentProjectPath)}`
           : `${API_URL}/api/reviews`;
@@ -565,14 +808,18 @@
         updateReviewFilesUI();
       } catch (error) {
         console.error('Error fetching review files:', error);
+      } finally {
+        setLoadingFlag('reviewFiles', false);
       }
     }
     async function fetchProjectStats() {
       const statsEl = document.getElementById('project-stats');
+      setLoadingFlag('stats', true);
       if (!currentProjectPath) {
-        statsEl.innerHTML = '<div class="empty-state">Charger un projet pour voir les stats</div>';
+        statsEl.innerHTML = `<div class="empty-state">${t('empty.statsNoProject')}</div>`;
+        setLoadingFlag('stats', false);
         return;
       }
@@ -582,58 +829,70 @@
         if (data.summary) {
           const s = data.summary;
-          const trendIcon = (t) => t === 'up' ? '<i data-lucide="trending-up"></i>' : t === 'down' ? '<i data-lucide="trending-down"></i>' : '<i data-lucide="minus"></i>';
+          const trendIcon = (trend) => trend === 'up'
+            ? '<span class="stat-trend up"><i data-lucide="trending-up"></i></span>'
+            : trend === 'down'
+              ? '<span class="stat-trend down"><i data-lucide="trending-down"></i></span>'
+              : '<span class="stat-trend flat"><i data-lucide="minus"></i></span>';
           statsEl.innerHTML = `
-            <div class="stat-card">
-              <div class="stat-value">${s.totalReviews}</div>
-              <div class="stat-label"><i data-lucide="file-search"></i> Reviews</div>
+            <div class="stat-card metric-reviews">
+              <div class="stat-value"><span class="stat-main">${s.totalReviews}</span></div>
+              <div class="stat-label"><i data-lucide="file-search"></i> ${t('stats.reviews')}</div>
             </div>
-            <div class="stat-card">
-              <div class="stat-value">${s.averageScore}/10 ${trendIcon(s.trend.score)}</div>
-              <div class="stat-label"><i data-lucide="star"></i> Score moyen</div>
+            <div class="stat-card metric-score">
+              <div class="stat-value"><span class="stat-main">${s.averageScore}</span><span class="stat-denominator">/10</span>${trendIcon(s.trend.score)}</div>
+              <div class="stat-label"><i data-lucide="star"></i> ${t('stats.averageScore')}</div>
             </div>
-            <div class="stat-card">
-              <div class="stat-value">${s.totalTime}</div>
-              <div class="stat-label"><i data-lucide="timer"></i> Temps total</div>
+            <div class="stat-card metric-time">
+              <div class="stat-value"><span class="stat-main">${s.totalTime}</span></div>
+              <div class="stat-label"><i data-lucide="timer"></i> ${t('stats.totalTime')}</div>
             </div>
-            <div class="stat-card">
-              <div class="stat-value">${s.averageTime}</div>
-              <div class="stat-label"><i data-lucide="clock"></i> Durée moyenne</div>
+            <div class="stat-card metric-average-time">
+              <div class="stat-value"><span class="stat-main">${s.averageTime}</span></div>
+              <div class="stat-label"><i data-lucide="clock"></i> ${t('stats.averageTime')}</div>
             </div>
-            <div class="stat-card warning">
-              <div class="stat-value">${s.totalBlocking} ${trendIcon(s.trend.blocking)}</div>
-              <div class="stat-label"><i data-lucide="octagon-alert"></i> Bloquants</div>
+            <div class="stat-card warning metric-blocking">
+              <div class="stat-value"><span class="stat-main">${s.totalBlocking}</span>${trendIcon(s.trend.blocking)}</div>
+              <div class="stat-label"><i data-lucide="octagon-alert"></i> ${t('stats.blocking')}</div>
             </div>
-            <div class="stat-card">
-              <div class="stat-value">${s.totalWarnings}</div>
-              <div class="stat-label"><i data-lucide="alert-triangle"></i> Importants</div>
+            <div class="stat-card metric-warnings">
+              <div class="stat-value"><span class="stat-main">${s.totalWarnings}</span></div>
+              <div class="stat-label"><i data-lucide="alert-triangle"></i> ${t('stats.warnings')}</div>
             </div>
           `;
           refreshIcons();
         } else {
-          statsEl.innerHTML = '<div class="empty-state">Aucune statistique disponible</div>';
+          statsEl.innerHTML = `<div class="empty-state">${t('empty.statsNoData')}</div>`;
         }
       } catch (error) {
         console.error('Error fetching stats:', error);
-        statsEl.innerHTML = '<div class="empty-state">Erreur de chargement des stats</div>';
+        statsEl.innerHTML = `<div class="empty-state">${t('error.loadingStats')}</div>`;
+      } finally {
+        setLoadingFlag('stats', false);
       }
     }
     function updateReviewFilesUI() {
       const recentEl = document.getElementById('recent-reviews');
+      const completedSection = document.getElementById('completed-reviews-section');
       if (currentData.reviewFiles.length === 0) {
-        recentEl.innerHTML = '<div class="empty-state">Aucun fichier de review</div>';
+        completedSection?.classList.remove('hidden');
+        recentEl.innerHTML = `<div class="empty-state">${loadingState.reviewFiles ? t('loading.section') : t('empty.reviewFiles')}</div>`;
+        applySectionExpansion('completed-reviews-section');
         return;
       }
+      completedSection?.classList.remove('hidden');
       recentEl.innerHTML = currentData.reviewFiles.map(renderReviewFile).join('');
+      applySectionExpansion('completed-reviews-section');
       refreshIcons();
     }
-    async function deleteReviewFile(filename) {
-      if (!confirm(`Supprimer ${filename} ?`)) return;
+    async function deleteReviewFile(encodedFilename) {
+      const filename = safeDecodeURIComponent(encodedFilename);
+      if (!confirm(t('confirm.deleteReview', { filename }))) return;
       try {
         const response = await fetch(`${API_URL}/api/reviews/${filename}`, {
@@ -642,18 +901,16 @@
         const data = await response.json();
         if (data.success) {
-          // Remove from cache
           delete loadedReviews[filename];
-          // Remove from list and update UI
           currentData.reviewFiles = currentData.reviewFiles.filter(r => r.filename !== filename);
           updateReviewFilesUI();
-          updateUI(); // Update count
+          updateUI();
         } else {
-          alert('Erreur: ' + data.error);
+          alert(t('error.deleteReview') + ': ' + data.error);
         }
       } catch (error) {
         console.error('Error deleting review:', error);
-        alert('Erreur lors de la suppression');
+        alert(t('error.deleteReview'));
       }
     }
@@ -662,7 +919,7 @@
       const loginSection = document.getElementById('claude-login-section');
       claudeEl.className = 'card-claude checking';
-      claudeEl.innerHTML = '<span class="status">Vérification...</span>';
+      claudeEl.innerHTML = `<span class="status">${t('status.checking')}</span>`;
       try {
         const response = await fetch(`${API_URL}/api/claude/status`);
@@ -671,29 +928,28 @@
         if (data.available) {
           claudeEl.className = 'card-claude available';
           claudeEl.innerHTML = `
-            <span class="status"><i data-lucide="check-circle"></i> Opérationnel</span>
-            <span class="version">${data.version}</span>
+            <span class="status"><i data-lucide="check-circle"></i> ${t('status.operational')}</span>
+            <span class="version">${escapeHtml(String(data.version ?? ''))}</span>
           `;
           loginSection.classList.add('hidden');
           refreshIcons();
         } else {
           claudeEl.className = 'card-claude unavailable';
           claudeEl.innerHTML = `
-            <span class="status"><i data-lucide="x-circle"></i> ${data.message}</span>
+            <span class="status"><i data-lucide="x-circle"></i> ${escapeHtml(String(data.message ?? ''))}</span>
           `;
           refreshIcons();
-          if (data.message.includes('authentifié') || data.message.includes('login')) {
+          if (data.message.includes('authentifié') || data.message.includes('login') || data.message.includes('authenticated')) {
             loginSection.classList.remove('hidden');
           }
         }
       } catch (error) {
         claudeEl.className = 'card-claude unavailable';
-        claudeEl.innerHTML = '<span class="status"><i data-lucide="x-circle"></i> Erreur de vérification</span>';
+        claudeEl.innerHTML = `<span class="status"><i data-lucide="x-circle"></i> ${t('error.checkStatus')}</span>`;
         refreshIcons();
       }
     }
-    // Active platform from config (gitlab or github)
     let activePlatform = null;
     function updateGitCliUI() {
@@ -702,44 +958,43 @@
       const loginSection = document.getElementById('git-login-section');
       if (!activePlatform) {
-        labelEl.textContent = 'Git CLI';
+        labelEl.textContent = t('card.gitCli');
         statusEl.className = 'card-claude checking';
-        statusEl.innerHTML = '<span class="status">Charger un projet...</span>';
+        statusEl.innerHTML = `<span class="status">${t('status.loadProject')}</span>`;
         loginSection.classList.add('hidden');
         return;
       }
       const isGitlab = activePlatform === 'gitlab';
-      labelEl.textContent = isGitlab ? 'GitLab CLI' : 'GitHub CLI';
+      labelEl.textContent = isGitlab ? t('card.gitlabCli') : t('card.githubCli');
-      // Update login section with CLI + Webhook instructions
       const titleEl = document.getElementById('git-login-title');
       const instructionsEl = document.getElementById('git-login-instructions');
       if (isGitlab) {
-        titleEl.innerHTML = '<i data-lucide="alert-triangle"></i> GitLab CLI non authentifié';
+        titleEl.innerHTML = `<i data-lucide="alert-triangle"></i> ${t('login.gitlab.title')}`;
         instructionsEl.innerHTML = `
-          <p><strong>1. Installer et authentifier glab :</strong></p>
+          <p><strong>${t('setup.installAndAuth', { cli: 'glab' })}</strong></p>
           <p style="margin: 0.5rem 0;"><code>sudo apt install glab</code></p>
           <p style="margin: 0.5rem 0;"><code>glab auth login</code></p>
-          <p style="margin-top: 1rem;"><strong>2. Configurer le webhook GitLab :</strong></p>
-          <p style="margin: 0.5rem 0; font-size: 0.8rem;">Settings → Webhooks → Add webhook</p>
+          <p style="margin-top: 1rem;"><strong>${t('setup.configureWebhook', { platform: 'GitLab' })}</strong></p>
+          <p style="margin: 0.5rem 0; font-size: 0.8rem;">${t('setup.webhookPath')}</p>
           <p style="margin: 0.25rem 0; font-size: 0.8rem;">URL: <code>http://&lt;your-server&gt;:3847/webhooks/gitlab</code></p>
-          <p style="margin: 0.25rem 0; font-size: 0.8rem;">Trigger: Merge request events</p>
-          <p style="margin-top: 0.75rem; font-size: 0.75rem; color: #a1a1aa;">Puis rechargez cette page.</p>
+          <p style="margin: 0.25rem 0; font-size: 0.8rem;">${t('setup.gitlab.trigger')}</p>
+          <p style="margin-top: 0.75rem; font-size: 0.75rem; color: #a1a1aa;">${t('setup.reload')}</p>
         `;
       } else {
-        titleEl.innerHTML = '<i data-lucide="alert-triangle"></i> GitHub CLI non authentifié';
+        titleEl.innerHTML = `<i data-lucide="alert-triangle"></i> ${t('login.github.title')}`;
         instructionsEl.innerHTML = `
-          <p><strong>1. Installer et authentifier gh :</strong></p>
+          <p><strong>${t('setup.installAndAuth', { cli: 'gh' })}</strong></p>
           <p style="margin: 0.5rem 0;"><code>sudo apt install gh</code></p>
           <p style="margin: 0.5rem 0;"><code>gh auth login</code></p>
-          <p style="margin-top: 1rem;"><strong>2. Configurer le webhook GitHub :</strong></p>
-          <p style="margin: 0.5rem 0; font-size: 0.8rem;">Settings → Webhooks → Add webhook</p>
+          <p style="margin-top: 1rem;"><strong>${t('setup.configureWebhook', { platform: 'GitHub' })}</strong></p>
+          <p style="margin: 0.5rem 0; font-size: 0.8rem;">${t('setup.webhookPath')}</p>
           <p style="margin: 0.25rem 0; font-size: 0.8rem;">Payload URL: <code>http://&lt;your-server&gt;:3847/webhooks/github</code></p>
-          <p style="margin: 0.25rem 0; font-size: 0.8rem;">Content type: application/json</p>
-          <p style="margin: 0.25rem 0; font-size: 0.8rem;">Events: Pull requests</p>
-          <p style="margin-top: 0.75rem; font-size: 0.75rem; color: #a1a1aa;">Puis rechargez cette page.</p>
+          <p style="margin: 0.25rem 0; font-size: 0.8rem;">${t('setup.github.contentType')}</p>
+          <p style="margin: 0.25rem 0; font-size: 0.8rem;">${t('setup.github.events')}</p>
+          <p style="margin-top: 0.75rem; font-size: 0.75rem; color: #a1a1aa;">${t('setup.reload')}</p>
         `;
       }
@@ -756,7 +1011,7 @@
       const endpoint = isGitlab ? '/api/gitlab/status' : '/api/github/status';
       statusEl.className = 'card-claude checking';
-      statusEl.innerHTML = '<span class="status">Vérification...</span>';
+      statusEl.innerHTML = `<span class="status">${t('status.checking')}</span>`;
       try {
         const response = await fetch(`${API_URL}${endpoint}`);
@@ -765,25 +1020,25 @@
         if (data.available && data.authenticated) {
           statusEl.className = 'card-claude available';
           statusEl.innerHTML = `
-            <span class="status"><i data-lucide="check-circle"></i> Opérationnel</span>
-            <span class="version">@${data.username}</span>
+            <span class="status"><i data-lucide="check-circle"></i> ${t('status.operational')}</span>
+            <span class="version">@${escapeHtml(String(data.username ?? ''))}</span>
           `;
           loginSection.classList.add('hidden');
           refreshIcons();
         } else if (data.available && !data.authenticated) {
           statusEl.className = 'card-claude unavailable';
-          statusEl.innerHTML = `<span class="status"><i data-lucide="x-circle"></i> ${data.message}</span>`;
+          statusEl.innerHTML = `<span class="status"><i data-lucide="x-circle"></i> ${escapeHtml(String(data.message ?? ''))}</span>`;
           loginSection.classList.remove('hidden');
           refreshIcons();
         } else {
           statusEl.className = 'card-claude unavailable';
-          statusEl.innerHTML = `<span class="status"><i data-lucide="x-circle"></i> ${data.message}</span>`;
+          statusEl.innerHTML = `<span class="status"><i data-lucide="x-circle"></i> ${escapeHtml(String(data.message ?? ''))}</span>`;
           loginSection.classList.remove('hidden');
           refreshIcons();
         }
       } catch (error) {
         statusEl.className = 'card-claude unavailable';
-        statusEl.innerHTML = '<span class="status"><i data-lucide="x-circle"></i> Erreur de vérification</span>';
+        statusEl.innerHTML = `<span class="status"><i data-lucide="x-circle"></i> ${t('error.checkStatus')}</span>`;
         refreshIcons();
       }
     }
@@ -795,11 +1050,11 @@
       if (logsVisible) {
         logsSection.classList.remove('hidden');
-        btn.innerHTML = '<i data-lucide="scroll-text"></i> Masquer Logs';
+        btn.innerHTML = `<i data-lucide="scroll-text"></i> ${t('header.hideLogs')}`;
         fetchLogs();
       } else {
         logsSection.classList.add('hidden');
-        btn.innerHTML = '<i data-lucide="scroll-text"></i> Logs';
+        btn.innerHTML = `<i data-lucide="scroll-text"></i> ${t('header.logs')}`;
       }
       refreshIcons();
     }
@@ -820,26 +1075,26 @@
     function renderMrItem(mr, type) {
       const mrPrefix = mr.platform === 'github' ? '#' : '!';
+      const encodedMrId = encodeURIComponent(String(mr.id ?? ''));
       const threadInfo = type === 'pending-fix'
-        ? `<span class="mr-threads has-open"><i data-lucide="message-circle"></i> ${mr.openThreads} ouvert${mr.openThreads > 1 ? 's' : ''}</span>`
+        ? `<span class="mr-threads has-open"><i data-lucide="message-circle"></i> ${t('mr.threads.openAction', { count: mr.openThreads })}</span>`
         : (type === 'pending-approval' && mr.totalWarnings > 0)
-          ? `<span class="mr-threads has-warnings"><i data-lucide="alert-triangle"></i> ${mr.totalWarnings} important${mr.totalWarnings > 1 ? 's' : ''}</span>`
-          : `<span class="mr-threads all-resolved"><i data-lucide="check-circle"></i> Résolus</span>`;
+          ? `<span class="mr-threads has-warnings"><i data-lucide="alert-triangle"></i> ${t('mr.threads.warningAction', { count: mr.totalWarnings })}</span>`
+          : `<span class="mr-threads all-resolved"><i data-lucide="check-circle"></i> ${t('mr.threads.resolvedAction')}</span>`;
-      const openBtn = `<a href="${mr.url}" target="_blank" class="btn-action open"><i data-lucide="external-link"></i> Ouvrir</a>`;
+      const openBtn = `<a href="${sanitizeHttpUrl(mr.url)}" target="_blank" rel="noopener noreferrer" class="btn-action open" onclick="return onUsefulLinkAction()"><i data-lucide="external-link"></i> ${t('button.open')}</a>`;
       const autoFollowupChecked = mr.autoFollowup !== false ? 'checked' : '';
       const showFollowupActions = type === 'pending-fix' ||
         (type === 'pending-approval' && mr.totalWarnings > 0);
       const actions = showFollowupActions
-        ? `<label class="auto-followup-toggle" onclick="event.stopPropagation()" title="Active/désactive le followup automatique après un push">
-             <input type="checkbox" ${autoFollowupChecked} onchange="toggleAutoFollowup('${mr.id}', this.checked)">
-             Auto follow-up
+        ? `<label class="auto-followup-toggle" onclick="event.stopPropagation()" title="${t('button.autoFollowup')}">
+             <input type="checkbox" ${autoFollowupChecked} onchange="toggleAutoFollowup('${encodedMrId}', this.checked)">
+             ${t('button.autoFollowup')}
            </label>
-           <button class="btn-action" onclick="triggerFollowup('${mr.id}')"><i data-lucide="refresh-cw"></i> Followup</button>${openBtn}`
+           <button class="btn-action" onclick="triggerFollowup('${encodedMrId}')"><i data-lucide="refresh-cw"></i> ${t('button.followup')}</button>${openBtn}`
         : openBtn;
-      // Stats badges
       const statsBadges = [];
       if (mr.totalBlocking > 0) statsBadges.push(`<span class="stat-badge blocking"><i data-lucide="octagon-alert"></i> ${mr.totalBlocking}</span>`);
       if (mr.totalWarnings > 0) statsBadges.push(`<span class="stat-badge warning"><i data-lucide="alert-triangle"></i> ${mr.totalWarnings}</span>`);
@@ -848,22 +1103,20 @@
       const durationFormatted = mr.totalDurationMs ? formatDuration(null, null, mr.totalDurationMs) : '';
-      // Assigner info with avatar
       const assignerUsername = mr.assignment?.username || 'unknown';
       const assignerDisplay = mr.assignment?.displayName || assignerUsername;
       const assignerInitial = assignerDisplay.charAt(0).toUpperCase();
       const assignedAt = mr.assignment?.assignedAt ? formatTime(mr.assignment.assignedAt) : '';
-      // Sanitize ID for accordion toggle
       const accordionId = mr.id.replace(/[^a-zA-Z0-9-]/g, '-');
       return `
         <div class="mr-item-accordion" data-mr-id="${mr.id}">
-          <div class="mr-item-header" onclick="toggleMrAccordion('${accordionId}')">
+          <div class="mr-item-header" onclick="toggleMrAccordion('${accordionId}')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
             <div class="review-status ${type === 'pending-fix' ? 'running' : (type === 'pending-approval' && mr.totalWarnings > 0) ? 'warnings' : 'completed'}"></div>
             <div class="mr-info">
               <div class="mr-title">
-                <a href="${mr.url}" target="_blank" onclick="event.stopPropagation()">${mrPrefix}${mr.mrNumber}</a> - ${mr.title}
+                <a href="${sanitizeHttpUrl(mr.url)}" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation()">${mrPrefix}${mr.mrNumber}</a> - ${escapeHtml(String(mr.title ?? ''))}
               </div>
               <div class="mr-meta">
                 ${threadInfo}
@@ -873,43 +1126,43 @@
             </div>
             <div class="mr-assigner">
               <div class="mr-assigner-info">
-                <span class="mr-assigner-name">${assignerDisplay}</span>
+                <span class="mr-assigner-name">${escapeHtml(assignerDisplay)}</span>
                 <span class="mr-assigner-time">${assignedAt}</span>
               </div>
-              <div class="mr-avatar" title="${assignerDisplay}">${assignerInitial}</div>
+              <div class="mr-avatar" title="${escapeHtml(assignerDisplay)}">${escapeHtml(assignerInitial)}</div>
             </div>
             <div class="mr-toggle"><i data-lucide="chevron-down"></i></div>
           </div>
           <div class="mr-item-content" id="mr-content-${accordionId}">
             <div class="mr-details">
               <div class="mr-detail-row">
-                <span class="mr-detail-label"><i data-lucide="git-branch"></i> Source:</span>
-                <span class="mr-detail-value">${mr.sourceBranch}</span>
+                <span class="mr-detail-label"><i data-lucide="git-branch"></i> ${t('mr.detail.source')}</span>
+                <span class="mr-detail-value">${escapeHtml(String(mr.sourceBranch ?? ''))}</span>
               </div>
               <div class="mr-detail-row">
-                <span class="mr-detail-label"><i data-lucide="git-merge"></i> Target:</span>
-                <span class="mr-detail-value">${mr.targetBranch}</span>
+                <span class="mr-detail-label"><i data-lucide="git-merge"></i> ${t('mr.detail.target')}</span>
+                <span class="mr-detail-value">${escapeHtml(String(mr.targetBranch ?? ''))}</span>
               </div>
               <div class="mr-detail-row">
-                <span class="mr-detail-label"><i data-lucide="calendar"></i> Créée:</span>
+                <span class="mr-detail-label"><i data-lucide="calendar"></i> ${t('mr.detail.created')}</span>
                 <span class="mr-detail-value">${formatTime(mr.createdAt)}</span>
               </div>
               ${mr.lastReviewAt ? `
               <div class="mr-detail-row">
-                <span class="mr-detail-label"><i data-lucide="file-search"></i> Dernière review:</span>
+                <span class="mr-detail-label"><i data-lucide="file-search"></i> ${t('mr.detail.lastReview')}</span>
                 <span class="mr-detail-value">${formatTime(mr.lastReviewAt)}</span>
               </div>
               ` : ''}
               ${mr.reviews?.length ? `
               <div class="mr-reviews-history">
-                <div class="mr-detail-label"><i data-lucide="history"></i> Historique (${mr.reviews.length}):</div>
+                <div class="mr-detail-label"><i data-lucide="history"></i> ${t('mr.detail.history', { count: mr.reviews.length })}</div>
                 <div class="mr-reviews-list">
                   ${mr.reviews.slice(-5).reverse().map(r => `
                     <div class="mr-review-event ${r.type}">
-                      <span class="review-event-type">${r.type === 'review' ? 'Review' : 'Followup'}</span>
+                      <span class="review-event-type">${r.type === 'review' ? t('review.type.review') : t('review.type.followup')}</span>
                       <span class="review-event-time">${formatTime(r.timestamp)}</span>
                       ${r.score !== null ? `<span class="review-event-score">${r.score}/10</span>` : ''}
-                      ${r.blocking > 0 ? `<span class="review-event-blocking">${r.blocking} bloquant${r.blocking > 1 ? 's' : ''}</span>` : ''}
+                      ${r.blocking > 0 ? `<span class="review-event-blocking">${t('mr.review.blocking', { count: r.blocking })}</span>` : ''}
                     </div>
                   `).join('')}
                 </div>
@@ -924,6 +1177,121 @@
       `;
     }
+    function renderNowLane(mr) {
+      const mrPrefix = mr.platform === 'github' ? '#' : '!';
+      const assigneeUsername = mr.assignment?.username || 'unknown';
+      const assigneeDisplay = mr.assignment?.displayName || assigneeUsername;
+      const ownerLabel = t('lane.owner', { owner: assigneeDisplay });
+      const qualityScore = typeof mr.latestScore === 'number' ? mr.latestScore : null;
+      const qualityProgress = getQualityProgress(qualityScore, QUALITY_TARGET_SCORE);
+      const qualityTarget = qualityProgress.qualityTarget;
+      const qualityDelta = qualityProgress.targetDelta;
+      const qualityState = qualityScore === null
+        ? 'unknown'
+        : qualityScore >= QUALITY_TARGET_SCORE
+          ? 'excellent'
+          : qualityScore >= 6
+            ? 'warning'
+            : 'critical';
+      const qualityLabel = qualityScore === null
+        ? t('quality.notAvailable')
+        : qualityScore >= 10
+          ? t('quality.perfect')
+          : qualityScore >= QUALITY_TARGET_SCORE
+            ? t('quality.onTarget')
+            : qualityScore >= 6
+              ? t('quality.belowTarget')
+              : t('quality.lovableQuality');
+      const deltaLabel = qualityProgress.targetDeltaLabel;
+      const qualityTrend = getQualityTrend(mr);
+      const qualityTrendLabel = qualityTrend.direction === 'up'
+        ? t('quality.trendUp', { delta: qualityTrend.label })
+        : qualityTrend.direction === 'down'
+          ? t('quality.trendDown', { delta: qualityTrend.label })
+          : qualityTrend.direction === 'flat'
+            ? t('quality.trendFlat')
+            : t('quality.trendUnknown');
+      const qualityTrendIcon = qualityTrend.direction === 'up'
+        ? 'trending-up'
+        : qualityTrend.direction === 'down'
+          ? 'trending-down'
+          : qualityTrend.direction === 'flat'
+            ? 'minus'
+            : 'circle-help';
+      return `
+        <div class="now-lane">
+          <div class="now-lane-copy">
+            <span class="now-lane-kicker">${t('lane.nowKicker')}</span>
+            <div class="now-lane-title">${mrPrefix}${mr.mrNumber} - ${escapeHtml(String(mr.title ?? ''))}</div>
+            <div class="now-lane-meta">${t('lane.nowMeta', { count: mr.openThreads })}</div>
+            <div class="now-lane-owner">${escapeHtml(ownerLabel)}</div>
+          </div>
+          <div class="now-lane-quality ${qualityState}">
+            <span class="quality-kicker">${t('quality.kicker')}</span>
+            <div class="quality-main">
+              <span class="quality-score">${qualityScore !== null ? qualityScore.toFixed(1) : '-'}</span>
+              <span class="quality-over">/10</span>
+            </div>
+            <div class="quality-target">${t('quality.target', { target: qualityTarget })} ${deltaLabel ? `(${deltaLabel})` : ''}</div>
+            <div class="quality-progress">
+              <div class="quality-progress-track">
+                <div class="quality-progress-fill ${qualityState}" style="width: ${qualityProgress.clampedProgressPercent}%"></div>
+              </div>
+              <span class="quality-progress-value">${qualityProgress.progressPercent !== null ? `${qualityProgress.clampedProgressPercent.toFixed(0)}%` : '-'}</span>
+            </div>
+            <div class="quality-label">${qualityLabel}</div>
+            <div class="quality-trend ${qualityTrend.direction}">
+              <i data-lucide="${qualityTrendIcon}"></i>
+              <span>${qualityTrendLabel}</span>
+            </div>
+            <div class="now-lane-actions">
+              <button class="btn-action" onclick="triggerFollowup('${encodeURIComponent(String(mr.id ?? ''))}')"><i data-lucide="refresh-cw"></i> ${t('button.followup')}</button>
+              <a href="${sanitizeHttpUrl(mr.url)}" target="_blank" rel="noopener noreferrer" class="btn-action open" onclick="return onUsefulLinkAction()"><i data-lucide="external-link"></i> ${t('button.open')}</a>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+    function renderQueueLanes(queueLanesModel) {
+      const nowLaneContent = queueLanesModel.nowLaneItem
+        ? renderNowLane(queueLanesModel.nowLaneItem)
+        : `<div class="empty-state">${t('queueLane.emptyNow')}</div>`;
+      const needsFixContent = queueLanesModel.needsFixItems.length > 0
+        ? queueLanesModel.needsFixItems.map((mergeRequest) => renderMrItem(mergeRequest, 'pending-fix')).join('')
+        : `<div class="empty-state">${t('queueLane.emptyNeedsFix')}</div>`;
+      const readyToApproveContent = queueLanesModel.readyToApproveItems.length > 0
+        ? queueLanesModel.readyToApproveItems.map((mergeRequest) => renderMrItem(mergeRequest, 'pending-approval')).join('')
+        : `<div class="empty-state">${t('queueLane.emptyReadyToApprove')}</div>`;
+      return `
+        <div class="queue-lanes-grid">
+          <div class="queue-lane">
+            <div class="queue-lane-header">
+              <span class="queue-lane-title">${t('queueLane.now')}</span>
+              <span class="queue-lane-count">${queueLanesModel.nowLaneCount}</span>
+            </div>
+            <div class="queue-lane-body">${nowLaneContent}</div>
+          </div>
+          <div class="queue-lane">
+            <div class="queue-lane-header">
+              <span class="queue-lane-title">${t('queueLane.needsFix')}</span>
+              <span class="queue-lane-count">${queueLanesModel.needsFixCount}</span>
+            </div>
+            <div class="queue-lane-body">${needsFixContent}</div>
+          </div>
+          <div class="queue-lane">
+            <div class="queue-lane-header">
+              <span class="queue-lane-title">${t('queueLane.readyToApprove')}</span>
+              <span class="queue-lane-count">${queueLanesModel.readyToApproveCount}</span>
+            </div>
+            <div class="queue-lane-body">${readyToApproveContent}</div>
+          </div>
+        </div>
+      `;
+    }
     function toggleMrAccordion(accordionId) {
       const content = document.getElementById(`mr-content-${accordionId}`);
       const accordion = content?.closest('.mr-item-accordion');
@@ -931,7 +1299,6 @@
       const isOpen = accordion.classList.contains('open');
-      // Close all other MR accordions
       document.querySelectorAll('.mr-item-accordion.open').forEach(el => {
         if (el !== accordion) {
           el.classList.remove('open');
@@ -950,43 +1317,40 @@
       const pendingFixSection = document.getElementById('pending-fix-section');
       const pendingFixEl = document.getElementById('pending-fix-reviews');
       const pendingApprovalSection = document.getElementById('pending-approval-section');
-      const pendingApprovalEl = document.getElementById('pending-approval-reviews');
       const pendingFixCount = document.getElementById('pending-fix-count');
       const pendingApprovalCount = document.getElementById('pending-approval-count');
-      const mrLabel = getMrLabel();
-      // Pending fix - show/hide section dynamically
-      if (currentData.pendingFix.length === 0) {
-        pendingFixSection.classList.add('hidden');
-        pendingFixCount.classList.add('hidden');
+      pendingFixSection.classList.remove('hidden');
+      const rankedPendingFix = rankPendingFixForNowLane(currentData.pendingFix);
+      const queueLanesModel = buildQueueLanesModel(rankedPendingFix, currentData.pendingApproval);
+      sessionMetrics = updatePriorityItemTracking(sessionMetrics, {
+        nowLaneItemId: queueLanesModel.nowLaneItem?.id ?? null,
+        pendingFixIds: rankedPendingFix.map((mergeRequest) => String(mergeRequest.id)),
+        nowMs: Date.now(),
+      });
+      updateSessionMetricsUI();
+      if (queueLanesModel.nowLaneCount + queueLanesModel.needsFixCount + queueLanesModel.readyToApproveCount === 0) {
+        pendingFixEl.innerHTML = `<div class="empty-state">${loadingState.mrTracking ? t('loading.section') : t('empty.pendingFix')}</div>`;
       } else {
-        pendingFixSection.classList.remove('hidden');
-        pendingFixEl.innerHTML = currentData.pendingFix.map(mr => renderMrItem(mr, 'pending-fix')).join('');
-        pendingFixCount.textContent = currentData.pendingFix.length;
-        pendingFixCount.classList.remove('hidden');
+        pendingFixEl.innerHTML = renderQueueLanes(queueLanesModel);
       }
+      pendingFixCount.textContent = String(queueLanesModel.nowLaneCount + queueLanesModel.needsFixCount + queueLanesModel.readyToApproveCount);
+      pendingFixCount.classList.remove('hidden');
-      // Pending approval - show/hide section dynamically
-      if (currentData.pendingApproval.length === 0) {
-        pendingApprovalSection.classList.add('hidden');
-        pendingApprovalCount.classList.add('hidden');
-      } else {
-        pendingApprovalSection.classList.remove('hidden');
-        pendingApprovalEl.innerHTML = currentData.pendingApproval.map(mr => renderMrItem(mr, 'pending-approval')).join('');
-        pendingApprovalCount.textContent = currentData.pendingApproval.length;
-        pendingApprovalCount.classList.remove('hidden');
-      }
+      pendingApprovalSection.classList.add('hidden');
+      pendingApprovalCount.classList.add('hidden');
       refreshIcons();
     }
     async function fetchMrTracking() {
+      setLoadingFlag('mrTracking', true);
       if (!currentProjectPath) {
         currentData.pendingFix = [];
         currentData.pendingApproval = [];
-        // Hide sections when no project loaded
         document.getElementById('pending-fix-section').classList.add('hidden');
         document.getElementById('pending-approval-section').classList.add('hidden');
+        setLoadingFlag('mrTracking', false);
         return;
       }
@@ -1000,10 +1364,14 @@
         updateMrTrackingUI();
       } catch (error) {
         console.error('Error fetching MR tracking:', error);
+      } finally {
+        setLoadingFlag('mrTracking', false);
       }
     }
-    async function triggerFollowup(mrId) {
+    async function triggerFollowup(encodedMrId) {
+      const mrId = safeDecodeURIComponent(encodedMrId);
+      trackUsefulAction('followup');
       try {
         const response = await fetch(`${API_URL}/api/mr-tracking/followup`, {
           method: 'POST',
@@ -1013,16 +1381,18 @@
         const data = await response.json();
         if (data.success) {
           console.log('Followup triggered for MR:', mrId);
+          showToast(t('notify.followupRequested', { mrNumber: String(data.mrNumber ?? '?') }), 'info');
         } else {
-          alert('Erreur: ' + data.error);
+          alert(t('error.triggerFollowup') + ': ' + data.error);
         }
       } catch (error) {
         console.error('Error triggering followup:', error);
-        alert('Erreur lors du déclenchement du followup');
+        alert(t('error.triggerFollowup'));
       }
     }
-    async function toggleAutoFollowup(mrId, enabled) {
+    async function toggleAutoFollowup(encodedMrId, enabled) {
+      const mrId = safeDecodeURIComponent(encodedMrId);
       try {
         const response = await fetch(`${API_URL}/api/mr-tracking/auto-followup`, {
           method: 'POST',
@@ -1031,16 +1401,18 @@
         });
         const data = await response.json();
         if (!data.success) {
-          alert('Erreur: ' + data.error);
+          alert(t('error.toggleAutoFollowup') + ': ' + data.error);
         }
       } catch (error) {
         console.error('Error toggling auto-followup:', error);
-        alert('Erreur lors du changement de auto follow-up');
+        alert(t('error.toggleAutoFollowup'));
       }
     }
-    async function approveMr(mrId) {
-      if (!confirm(`Marquer cette ${getMrLabel()} comme approuvée ?`)) return;
+    async function approveMr(encodedMrId) {
+      const mrId = safeDecodeURIComponent(encodedMrId);
+      if (!confirm(t('confirm.approveMr', { label: getMrLabel() }))) return;
+      trackUsefulAction('approve');
       try {
         const response = await fetch(`${API_URL}/api/mr-tracking/approve`, {
@@ -1050,30 +1422,29 @@
         });
         const data = await response.json();
         if (data.success) {
-          // Remove from pending approval list
           currentData.pendingApproval = currentData.pendingApproval.filter(mr => mr.id !== mrId);
           updateMrTrackingUI();
         } else {
-          alert('Erreur: ' + data.error);
+          alert(t('error.approveMr') + ': ' + data.error);
         }
       } catch (error) {
         console.error('Error approving MR:', error);
-        alert('Erreur lors de l\'approbation');
+        alert(t('error.approveMr'));
       }
     }
     async function syncGitLabThreads() {
       if (!currentProjectPath) {
-        alert('Charger un projet d\'abord');
+        alert(t('error.projectNotLoaded'));
         return;
       }
+      trackUsefulAction('syncThreads');
       const btn = document.getElementById('sync-threads-btn');
-      const icon = btn.querySelector('i');
+      const iconEl = btn.querySelector('i');
-      // Add spinning animation
       btn.disabled = true;
-      icon.classList.add('spinning');
+      iconEl.classList.add('spinning');
       try {
         const response = await fetch(`${API_URL}/api/mr-tracking/sync`, {
@@ -1083,18 +1454,17 @@
         });
         const data = await response.json();
         if (data.success) {
-          // Refresh MR tracking data
           await fetchMrTracking();
           console.log('Threads synchronized successfully');
         } else {
-          alert('Erreur: ' + data.error);
+          alert(t('error.syncThreads') + ': ' + data.error);
         }
       } catch (error) {
         console.error('Error syncing threads:', error);
-        alert('Erreur lors de la synchronisation des threads');
+        alert(t('error.syncThreads'));
       } finally {
         btn.disabled = false;
-        icon.classList.remove('spinning');
+        iconEl.classList.remove('spinning');
       }
     }
@@ -1127,7 +1497,7 @@
     function connectWebSocket() {
       if (ws?.readyState === WebSocket.OPEN) return;
-      updateConnectionStatus('connecting', 'Connexion...');
+      updateConnectionStatus('connecting', 'status.connecting');
       try {
         ws = new WebSocket(WS_URL);
@@ -1135,7 +1505,7 @@
         ws.onopen = () => {
           wsConnected = true;
           reconnectAttempts = 0;
-          updateConnectionStatus('online', 'En ligne');
+          updateConnectionStatus('online', 'connection.online');
         };
         ws.onmessage = (event) => {
@@ -1147,8 +1517,8 @@
                 console.log(`[WS] ${message.type}: ${message.activeReviews?.length || 0} active reviews`, message.activeReviews);
                 currentData.activeReviews = message.activeReviews || [];
                 currentData.recentReviews = message.recentReviews || [];
+                dispatchReviewNotifications(currentData.activeReviews, currentData.recentReviews);
                 updateUI();
-                // Also refresh MR tracking when state changes
                 if (message.type === 'state') {
                   fetchMrTracking();
                 }
@@ -1170,7 +1540,7 @@
         ws.onclose = () => {
           wsConnected = false;
           ws = null;
-          updateConnectionStatus('offline', 'Hors ligne');
+          updateConnectionStatus('offline', 'connection.offline');
           if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
             reconnectAttempts++;
             setTimeout(connectWebSocket, RECONNECT_DELAY);
@@ -1192,22 +1562,27 @@
     }, 30000);
     async function fetchStatus() {
+      setLoadingFlag('status', true);
       try {
         const response = await fetch(`${API_URL}/api/status`);
         const data = await response.json();
         currentData.activeReviews = data.jobs?.active || [];
         currentData.recentReviews = data.jobs?.recent || [];
-        if (!wsConnected) updateConnectionStatus('online', 'En ligne (polling)');
+        dispatchReviewNotifications(currentData.activeReviews, currentData.recentReviews);
+        if (!wsConnected) updateConnectionStatus('online', 'connection.onlinePolling');
         updateUI();
       } catch (error) {
         if (!wsConnected) {
-          updateConnectionStatus('offline', 'Hors ligne');
+          updateConnectionStatus('offline', 'connection.offline');
           document.getElementById('running-count').textContent = '-';
           document.getElementById('queued-count').textContent = '-';
           document.getElementById('completed-count').textContent = '-';
-          document.getElementById('active-reviews').innerHTML = '<div class="empty-state">Serveur non accessible</div>';
-          document.getElementById('recent-reviews').innerHTML = '<div class="empty-state">Serveur non accessible</div>';
+          document.getElementById('active-reviews').innerHTML = `<div class="empty-state">${t('empty.serverNotAccessible')}</div>`;
+          document.getElementById('recent-reviews').innerHTML = `<div class="empty-state">${t('empty.serverNotAccessible')}</div>`;
         }
+      } finally {
+        hasLoadedStatusOnce = true;
+        setLoadingFlag('status', false);
       }
     }
@@ -1240,9 +1615,48 @@
       }
     }
-    // Project config loader with persistence
-    const STORAGE_KEY_PROJECTS = 'review-flow-projects';
-    const STORAGE_KEY_CURRENT = 'review-flow-current-project';
+    async function loadLanguageSetting() {
+      try {
+        const response = await fetch(`${API_URL}/api/settings`);
+        const data = await response.json();
+        const select = document.getElementById('language-select');
+        if (select && data.language) {
+          select.value = data.language;
+          setLanguage(data.language);
+          document.documentElement.lang = data.language;
+          renderStaticLabels();
+        }
+      } catch (error) {
+        console.error('Error loading language setting:', error);
+      }
+    }
+    async function changeLanguage(language) {
+      setLanguage(language);
+      document.documentElement.lang = language;
+      renderStaticLabels();
+      // Re-render all dynamic content
+      updateUI();
+      updateLogs();
+      updateReviewFilesUI();
+      updateMrTrackingUI();
+      updateGitCliUI();
+      // Also persist on server
+      try {
+        const response = await fetch(`${API_URL}/api/settings/language`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ language })
+        });
+        const data = await response.json();
+        if (data.success) {
+          console.log('Language changed to:', language);
+        }
+      } catch (error) {
+        console.error('Error changing language:', error);
+      }
+    }
     let currentProjectConfig = null;
     let currentProjectPath = null;
@@ -1260,11 +1674,8 @@
     function addProjectToHistory(path) {
       const projects = getStoredProjects();
-      // Remove if already exists (to move to top)
       const filtered = projects.filter(p => p !== path);
-      // Add to beginning
       filtered.unshift(path);
-      // Keep max 10 projects
       saveProjects(filtered.slice(0, 10));
       updateProjectSelect();
     }
@@ -1280,7 +1691,7 @@
       const projects = getStoredProjects();
       const current = localStorage.getItem(STORAGE_KEY_CURRENT) || '';
-      select.innerHTML = '<option value="">-- Sélectionner un projet --</option>';
+      select.innerHTML = `<option value="">${t('project.selectPlaceholder')}</option>`;
       for (const path of projects) {
         const shortName = path.split('/').slice(-2).join('/');
         const option = document.createElement('option');
@@ -1302,11 +1713,10 @@
     async function loadProjectConfig() {
       const input = document.getElementById('project-path-input');
       const select = document.getElementById('project-select');
-      // Prioritize input field, fallback to select
       const projectPath = input.value.trim() || select.value;
       if (!projectPath) {
-        showConfigStatus('Sélectionnez ou entrez un chemin', 'error');
+        showConfigStatus(t('error.selectOrEnterPath'), 'error');
         return;
       }
@@ -1317,7 +1727,7 @@
       const status = document.getElementById('config-status');
       const info = document.getElementById('config-info');
-      showConfigStatus('Chargement...', 'loading');
+      showConfigStatus(t('status.loading'), 'loading');
       info.classList.add('hidden');
       try {
@@ -1328,19 +1738,16 @@
           currentProjectConfig = data.config;
           currentProjectPath = projectPath;
-          // Save to history and set as current
           addProjectToHistory(projectPath);
           localStorage.setItem(STORAGE_KEY_CURRENT, projectPath);
-          // Update select to show current project
           document.getElementById('project-select').value = projectPath;
           document.getElementById('project-path-input').value = '';
           const shortName = projectPath.split('/').slice(-2).join('/');
-          showConfigStatus(`<i data-lucide="check-circle"></i> ${shortName}`, 'success');
+          showConfigStatus(`<i data-lucide="check-circle"></i> ${escapeHtml(shortName)}`, 'success');
           refreshIcons();
-          // Update model selector if defaultModel is set
           if (data.config.defaultModel) {
             const modelSelect = document.getElementById('model-select');
             if (modelSelect) {
@@ -1349,34 +1756,30 @@
             }
           }
-          // Update active platform and check CLI
           activePlatform = data.config.gitlab ? 'gitlab' : (data.config.github ? 'github' : null);
           updateGitCliUI();
-          // Reload reviews, stats, and MR tracking for this project
           fetchReviewFiles();
           fetchProjectStats();
           fetchMrTracking();
-          // Show stats section when project is loaded
           document.getElementById('stats-section').classList.remove('hidden');
-          // Display config info (only show active platform)
           const platformIcon = activePlatform === 'gitlab' ? '<i data-lucide="gitlab"></i> GitLab' : '<i data-lucide="github"></i> GitHub';
           info.innerHTML = `
             <span>${platformIcon}</span>
-            <span><i data-lucide="bot"></i> ${data.config.defaultModel || 'non défini'}</span>
-            <span><i data-lucide="file-text"></i> ${data.config.reviewSkill}</span>
-            <span><i data-lucide="refresh-cw"></i> ${data.config.reviewFollowupSkill}</span>
+            <span><i data-lucide="bot"></i> ${escapeHtml(String(data.config.defaultModel || t('status.undefined')))}</span>
+            <span><i data-lucide="file-text"></i> ${escapeHtml(String(data.config.reviewSkill ?? ''))}</span>
+            <span><i data-lucide="refresh-cw"></i> ${escapeHtml(String(data.config.reviewFollowupSkill ?? ''))}</span>
           `;
           info.classList.remove('hidden');
           refreshIcons();
         } else {
-          showConfigStatus('<i data-lucide="x-circle"></i> ' + data.error, 'error');
+          showConfigStatus('<i data-lucide="x-circle"></i> ' + escapeHtml(String(data.error ?? '')), 'error');
           refreshIcons();
         }
       } catch (error) {
-        showConfigStatus('<i data-lucide="x-circle"></i> Erreur de chargement', 'error');
+        showConfigStatus(`<i data-lucide="x-circle"></i> ${t('error.loadingConfig')}`, 'error');
         refreshIcons();
         console.error('Error loading project config:', error);
       }
@@ -1394,56 +1797,43 @@
       const select = document.getElementById('project-select');
       const path = select.value;
       if (!path) {
-        showConfigStatus('Aucun projet sélectionné', 'error');
+        showConfigStatus(t('project.noProjectSelected'), 'error');
         return;
       }
-      if (confirm(`Retirer "${path.split('/').slice(-2).join('/')}" de la liste ?`)) {
+      const shortName = path.split('/').slice(-2).join('/');
+      if (confirm(t('confirm.removeProject', { name: shortName }))) {
         removeProjectFromHistory(path);
         localStorage.removeItem(STORAGE_KEY_CURRENT);
         currentProjectPath = null;
         currentProjectConfig = null;
         document.getElementById('config-info').classList.add('hidden');
-        showConfigStatus('Projet retiré', 'success');
+        showConfigStatus(t('project.removed'), 'success');
       }
     }
     function initProjectLoader() {
       updateProjectSelect();
-      // Auto-load last project
       const lastProject = localStorage.getItem(STORAGE_KEY_CURRENT);
       if (lastProject) {
         loadProjectConfigFromPath(lastProject);
       } else {
-        // No project loaded - show empty state
         document.getElementById('recent-reviews').innerHTML =
-          '<div class="empty-state">Charger un projet pour voir les reviews</div>';
+          `<div class="empty-state">${t('empty.reviewsNoProject')}</div>`;
         document.getElementById('project-stats').innerHTML =
-          '<div class="empty-state">Charger un projet pour voir les stats</div>';
+          `<div class="empty-state">${t('empty.statsNoProject')}</div>`;
       }
     }
-    // Lucide icon helper - call after dynamic content is added
-    function refreshIcons() {
-      lucide.createIcons();
-    }
-    // Icon helper for dynamic HTML
-    function icon(name, className = '') {
-      return `<i data-lucide="${name}" class="${className}"></i>`;
-    }
-    // Platform-aware MR/PR label
     function getMrLabel(platform = activePlatform) {
       return platform === 'github' ? 'PR' : 'MR';
     }
-    // Cancel review modal state
     let cancelModalJobId = null;
-    function showCancelModal(jobId, mrNumber, jobType) {
-      cancelModalJobId = jobId;
-      const typeLabel = jobType === 'followup' ? 'followup' : 'review';
-      document.getElementById('cancel-modal-title').textContent = `Annuler la ${typeLabel} de la ${getMrLabel()} !${mrNumber} (${typeLabel}) ?`;
+    function showCancelModal(encodedJobId, mrNumber, jobType) {
+      cancelModalJobId = safeDecodeURIComponent(encodedJobId);
+      const typeLabel = jobType === 'followup' ? t('review.type.followup').toLowerCase() : t('review.type.review').toLowerCase();
+      document.getElementById('cancel-modal-title').textContent = t('modal.cancel.title', { type: typeLabel, label: getMrLabel(), number: mrNumber });
       const modal = document.getElementById('cancel-modal');
       modal.classList.remove('hidden');
       requestAnimationFrame(() => modal.classList.add('visible'));
@@ -1459,6 +1849,7 @@
     async function confirmCancelReview() {
       if (!cancelModalJobId) return;
+      trackUsefulAction('cancelReview');
       const jobId = cancelModalJobId;
       closeCancelModal();
@@ -1477,17 +1868,17 @@
         if (data.success) {
           const card = document.querySelector(`.review-item[data-job-id="${jobId}"]`);
           if (card) card.remove();
-          showToast('Review annulée', 'success');
+          showToast(t('success.reviewCancelled'), 'success');
           fetchStatus();
         } else if (data.status === 'already-completed') {
-          showToast('Cette review est déjà terminée', 'info');
+          showToast(t('success.reviewAlreadyCompleted'), 'info');
           fetchStatus();
         } else {
-          showToast(data.error || 'Erreur lors de l\'annulation', 'error');
+          showToast(data.error || t('error.cancelReview'), 'error');
         }
       } catch (error) {
         console.error('Error cancelling review:', error);
-        showToast('Erreur lors de l\'annulation', 'error');
+        showToast(t('error.cancelReview'), 'error');
       }
     }
@@ -1506,12 +1897,202 @@
       }, 3000);
     }
+    function renderStaticLabels() {
+      // Header buttons
+      const checkClaudeSpan = document.getElementById('i18n-check-claude');
+      if (checkClaudeSpan) checkClaudeSpan.textContent = t('header.checkClaude');
+      const logsBtnSpan = document.getElementById('i18n-logs-btn');
+      if (logsBtnSpan) logsBtnSpan.textContent = logsVisible ? t('header.hideLogs') : t('header.logs');
+      const serverStatusSpan = document.getElementById('i18n-server-status');
+      if (serverStatusSpan) serverStatusSpan.textContent = t('status.connecting');
+      // Cards
+      const cardRunning = document.getElementById('i18n-card-running');
+      if (cardRunning) cardRunning.textContent = t('card.running');
+      const cardQueued = document.getElementById('i18n-card-queued');
+      if (cardQueued) cardQueued.textContent = t('card.queued');
+      const cardCompleted = document.getElementById('i18n-card-completed');
+      if (cardCompleted) cardCompleted.textContent = t('card.completed');
+      const cardClaudeCli = document.getElementById('i18n-card-claude-cli');
+      if (cardClaudeCli) cardClaudeCli.textContent = t('card.claudeCli');
+      const claudeChecking = document.getElementById('i18n-claude-checking');
+      if (claudeChecking) claudeChecking.textContent = t('status.checking');
+      const gitLoadProject = document.getElementById('i18n-git-load-project');
+      if (gitLoadProject) gitLoadProject.textContent = t('status.loadProject');
+      const gitCliLabel = document.getElementById('git-cli-label');
+      if (gitCliLabel && !activePlatform) gitCliLabel.textContent = t('card.gitCli');
+      const cardModel = document.getElementById('i18n-card-model');
+      if (cardModel) cardModel.textContent = t('card.model');
+      const cardLanguage = document.getElementById('i18n-card-language');
+      if (cardLanguage) cardLanguage.textContent = t('card.language');
+      const stripNow = document.getElementById('i18n-strip-now');
+      if (stripNow) stripNow.textContent = t('strip.now');
+      const stripNowMeta = document.getElementById('i18n-strip-now-meta');
+      if (stripNowMeta) stripNowMeta.textContent = t('strip.nowMeta');
+      const stripNext = document.getElementById('i18n-strip-next');
+      if (stripNext) stripNext.textContent = t('strip.next');
+      const stripNextMeta = document.getElementById('i18n-strip-next-meta');
+      if (stripNextMeta) stripNextMeta.textContent = t('strip.nextMeta');
+      const stripBlocked = document.getElementById('i18n-strip-blocked');
+      if (stripBlocked) stripBlocked.textContent = t('strip.blocked');
+      const stripBlockedMeta = document.getElementById('i18n-strip-blocked-meta');
+      if (stripBlockedMeta) stripBlockedMeta.textContent = t('strip.blockedMeta');
+      applyFocusStripMode();
+      const loadingDataLabel = document.getElementById('i18n-loading-data');
+      if (loadingDataLabel) loadingDataLabel.textContent = t(getLoadingMessageKey());
+      updateSessionMetricsUI();
+      // Model options
+      const modelOpus = document.getElementById('i18n-model-opus');
+      if (modelOpus) modelOpus.textContent = t('model.opus');
+      const modelSonnet = document.getElementById('i18n-model-sonnet');
+      if (modelSonnet) modelSonnet.textContent = t('model.sonnet');
+      // Project loader
+      const projectPlaceholder = document.getElementById('i18n-project-placeholder');
+      if (projectPlaceholder) projectPlaceholder.textContent = t('project.selectPlaceholder');
+      const projectPathInput = document.getElementById('project-path-input');
+      if (projectPathInput) projectPathInput.placeholder = t('project.inputPlaceholder');
+      const projectLoad = document.getElementById('i18n-project-load');
+      if (projectLoad) projectLoad.textContent = t('project.load');
+      const removeProjectBtn = document.getElementById('remove-project-btn');
+      if (removeProjectBtn) removeProjectBtn.title = t('project.removeTooltip');
+      // Login sections
+      const claudeLoginTitle = document.getElementById('i18n-claude-login-title');
+      if (claudeLoginTitle) claudeLoginTitle.textContent = t('login.claude.title');
+      const claudeLoginInstruction = document.getElementById('i18n-claude-login-instruction');
+      if (claudeLoginInstruction) claudeLoginInstruction.textContent = t('login.claude.instruction');
+      const claudeLoginReload = document.getElementById('i18n-claude-login-reload');
+      if (claudeLoginReload) claudeLoginReload.textContent = t('login.claude.reload');
+      const gitLoginTitle = document.getElementById('i18n-git-login-title');
+      if (gitLoginTitle) gitLoginTitle.textContent = t('login.git.title');
+      // Section headers
+      const sectionLogs = document.getElementById('i18n-section-logs');
+      if (sectionLogs) sectionLogs.textContent = t('section.logs');
+      const sectionStats = document.getElementById('i18n-section-stats');
+      if (sectionStats) sectionStats.textContent = t('section.stats');
+      const sectionActiveReviews = document.getElementById('i18n-section-active-reviews');
+      if (sectionActiveReviews) sectionActiveReviews.textContent = t('section.activeReviews');
+      const sectionActiveFollowups = document.getElementById('i18n-section-active-followups');
+      if (sectionActiveFollowups) sectionActiveFollowups.textContent = t('section.activeFollowups');
+      const sectionPendingFix = document.getElementById('i18n-section-pending-fix');
+      if (sectionPendingFix) sectionPendingFix.textContent = t('section.queueLanes');
+      const sectionPendingApproval = document.getElementById('i18n-section-pending-approval');
+      if (sectionPendingApproval) sectionPendingApproval.textContent = t('section.pendingApproval');
+      const sectionCompletedReviews = document.getElementById('i18n-section-completed-reviews');
+      if (sectionCompletedReviews) sectionCompletedReviews.textContent = t('section.completedReviews');
+      // Empty states
+      const emptyLogs = document.getElementById('i18n-empty-logs');
+      if (emptyLogs) emptyLogs.textContent = t('empty.logs');
+      const emptyStats = document.getElementById('i18n-empty-stats');
+      if (emptyStats) emptyStats.textContent = t('empty.stats');
+      const emptyActiveReviews = document.getElementById('i18n-empty-active-reviews');
+      if (emptyActiveReviews) emptyActiveReviews.textContent = t('empty.activeReviews');
+      const emptyActiveFollowups = document.getElementById('i18n-empty-active-followups');
+      if (emptyActiveFollowups) emptyActiveFollowups.textContent = t('empty.activeFollowups');
+      const emptyPendingFix = document.getElementById('i18n-empty-pending-fix');
+      if (emptyPendingFix) emptyPendingFix.textContent = t('empty.pendingFix');
+      const emptyPendingApproval = document.getElementById('i18n-empty-pending-approval');
+      if (emptyPendingApproval) emptyPendingApproval.textContent = t('empty.pendingApproval');
+      const emptyLoading = document.getElementById('i18n-empty-loading');
+      if (emptyLoading) emptyLoading.textContent = t('status.loading');
+      // Sync threads button
+      const syncThreadsBtn = document.getElementById('sync-threads-btn');
+      if (syncThreadsBtn) syncThreadsBtn.title = t('button.syncThreads');
+      // Connection footer
+      const connectionFallback = document.getElementById('i18n-connection-fallback');
+      if (connectionFallback) connectionFallback.textContent = t('connection.fallback');
+      // Modal
+      const modalMessage = document.getElementById('i18n-modal-message');
+      if (modalMessage) modalMessage.textContent = t('modal.cancel.message');
+      const modalBack = document.getElementById('i18n-modal-back');
+      if (modalBack) modalBack.textContent = t('modal.back');
+      const modalConfirm = document.getElementById('cancel-modal-confirm');
+      if (modalConfirm) modalConfirm.textContent = t('modal.confirm');
+      // Update project select placeholder (re-render the select)
+      updateProjectSelect();
+    }
+    // Expose functions to HTML onclick handlers
+    window.checkClaudeStatus = checkClaudeStatus;
+    window.toggleLogs = toggleLogs;
+    window.toggleStats = toggleStats;
+    window.changeModel = changeModel;
+    window.changeLanguage = changeLanguage;
+    window.onProjectSelect = onProjectSelect;
+    window.loadProjectConfig = loadProjectConfig;
+    window.removeCurrentProject = removeCurrentProject;
+    window.toggleReviewAccordion = toggleReviewAccordion;
+    window.toggleReviewDescription = toggleReviewDescription;
+    window.deleteReviewFile = deleteReviewFile;
+    window.toggleMrAccordion = toggleMrAccordion;
+    window.triggerFollowup = triggerFollowup;
+    window.toggleAutoFollowup = toggleAutoFollowup;
+    window.approveMr = approveMr;
+    window.syncGitLabThreads = syncGitLabThreads;
+    window.showCancelModal = showCancelModal;
+    window.closeCancelModal = closeCancelModal;
+    window.confirmCancelReview = confirmCancelReview;
+    window.toggleFocusStripMode = toggleFocusStripMode;
+    window.toggleSection = toggleSection;
+    window.onUsefulLinkAction = onUsefulLinkAction;
+    window.activateOnKeydown = activateOnKeydown;
     // Init
+    if (typeof Notification !== 'undefined' && Notification.permission === 'default') {
+      Notification.requestPermission().catch(() => {});
+    }
+    loadFocusStripMode();
+    renderStaticLabels();
+    updateSessionMetricsUI();
     connectWebSocket();
     fetchStatus();
     checkClaudeStatus();
     loadModelSetting();
-    initProjectLoader(); // Will check git CLI and load reviews/stats after loading project config
+    loadLanguageSetting();
+    initProjectLoader();
     // Initialize Lucide icons
     refreshIcons();
@@ -1521,7 +2102,7 @@
       fetchReviewFiles();
       fetchProjectStats();
       fetchMrTracking();
-    }, 30000); // Refresh review files, stats and MR tracking every 30s
+    }, 30000);
     setInterval(() => {
       document.querySelectorAll('.review-item').forEach(el => {