npm - reviewflow - Versions diffs - 3.0.0 - Mend

reviewflow 3.0.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 (914) hide show

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

@@ -0,0 +1,1537 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Reviewflow Dashboard</title>
+  <link rel="stylesheet" href="styles.css">
+  <script src="https://unpkg.com/lucide@latest"></script>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="logo"><i data-lucide="bot"></i></div>
+      <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
+        </button>
+        <button id="toggle-logs-btn" class="btn btn-secondary" onclick="toggleLogs()">
+          <i data-lucide="scroll-text"></i> Logs
+        </button>
+        <div id="server-status" class="status-indicator connecting">
+          <span class="status-dot"></span>
+          <span>Connexion...</span>
+        </div>
+      </div>
+    </header>
+    <div class="cards">
+      <div class="card">
+        <div class="card-label">En cours</div>
+        <div id="running-count" class="card-value running">-</div>
+      </div>
+      <div class="card">
+        <div class="card-label">En attente</div>
+        <div id="queued-count" class="card-value queued">-</div>
+      </div>
+      <div class="card">
+        <div class="card-label">Terminées</div>
+        <div id="completed-count" class="card-value">-</div>
+      </div>
+      <div class="card">
+        <div class="card-label">Claude CLI</div>
+        <div id="claude-status" class="card-claude checking">
+          <span class="status">Vérification...</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 id="git-cli-status" class="card-claude checking">
+          <span class="status">Charger un projet...</span>
+          <span class="version"></span>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-label">Modèle</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>
+          </select>
+        </div>
+      </div>
+    </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>
+      </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
+      </button>
+      <button class="btn btn-secondary" onclick="removeCurrentProject()" title="Retirer de la liste">
+        <i data-lucide="trash-2"></i>
+      </button>
+      <span id="config-status" class="config-status hidden"></span>
+    </div>
+    <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>
+      <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>
+    </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>
+      <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>
+      </div>
+      <div id="logs-content" class="section-content logs">
+        <div class="empty-state">Aucun log</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
+        <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>
+    </div>
+    <div class="section" id="active-reviews-section">
+      <div class="section-header">
+        <i data-lucide="file-search"></i> Reviews actives
+        <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>
+    </div>
+    <div class="section hidden" id="active-followups-section">
+      <div class="section-header">
+        <i data-lucide="refresh-cw"></i> Followups actifs
+        <span id="active-followups-count" class="badge-count hidden">0</span>
+      </div>
+      <div id="active-followups" class="section-content">
+        <div class="empty-state">Aucun followup en cours</div>
+      </div>
+    </div>
+    <div class="section hidden" id="pending-fix-section">
+      <div class="section-header">
+        <i data-lucide="wrench"></i> En attente de correctif
+        <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()">
+          <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>
+    </div>
+    <div class="section hidden" id="pending-approval-section">
+      <div class="section-header">
+        <i data-lucide="circle-check"></i> En attente d'approbation
+        <span id="pending-approval-count" class="badge-count hidden">0</span>
+      </div>
+      <div id="pending-approval-reviews" class="section-content">
+        <div class="empty-state">Aucune MR en attente d'approbation</div>
+      </div>
+    </div>
+    <div class="section">
+      <div class="section-header">
+        <i data-lucide="file-check"></i> Reviews terminées
+      </div>
+      <div id="recent-reviews" class="section-content">
+        <div class="empty-state">Chargement...</div>
+      </div>
+    </div>
+    <div class="refresh-info">
+      <span id="connection-mode">WebSocket temps réel</span> • Fallback polling 5s
+    </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-actions">
+        <button class="btn-modal-back" onclick="closeCancelModal()">Revenir</button>
+        <button class="btn-modal-confirm" id="cancel-modal-confirm" onclick="confirmCancelReview()">Confirmer</button>
+      </div>
+    </div>
+  </div>
+  <div id="toast-container" class="toast-container"></div>
+  <script>
+    const API_URL = window.location.origin;
+    const WS_URL = `ws://${window.location.host}/ws`;
+    let ws = null;
+    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);
+      } else {
+        return '';
+      }
+      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 renderAgentTimeline(progress) {
+      if (!progress?.agents?.length) return '';
+      const agentsHtml = progress.agents.map(agent => `
+        <div class="agent-box ${agent.status}" title="${agent.displayName}: ${agent.status}">
+          <span class="agent-icon">${getAgentIcon(agent.status)}</span>
+          <span class="agent-name">${agent.displayName}</span>
+        </div>
+      `).join('');
+      return `<div class="agent-timeline">${agentsHtml}</div>`;
+    }
+    function renderProgressBar(progress) {
+      if (!progress) return '';
+      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>
+            <span class="progress-percent">${progress.overallProgress}%</span>
+          </div>
+          <div class="progress-phase">${formatPhase(progress.currentPhase)}</div>
+        </div>
+      `;
+    }
+    function renderReview(review, isActive) {
+      const statusClass = review.status;
+      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 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 assignerInitial = assignerDisplay.charAt(0).toUpperCase();
+      // 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>
+          <div class="review-description-content" id="review-desc-${review.id.replace(/[^a-zA-Z0-9-]/g, '-')}">
+            <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-header">
+            <div class="review-status ${statusClass}"></div>
+            <div class="review-info">
+              <div class="review-title">
+                <a href="${review.mrUrl}" target="_blank">${mrPrefix}${mrNumber}</a> - ${displayTitle}
+              </div>
+              <div class="review-meta">
+                <span class="badge ${statusClass}">${review.status}</span>
+                ${isActive ? `<i data-lucide="clock"></i> ${formatDuration(review.startedAt)}` : ''}
+              </div>
+              ${review.error ? `<div class="error-message">${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>` : ''}
+            <div class="review-assigner">
+              <div class="review-assigner-info">
+                <span class="review-assigner-name">${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>
+          </div>
+          ${descriptionHtml}
+          ${progressHtml}
+        </div>
+      `;
+    }
+    function toggleReviewDescription(reviewId) {
+      const safeId = reviewId.replace(/[^a-zA-Z0-9-]/g, '-');
+      const content = document.getElementById(`review-desc-${safeId}`);
+      const toggle = content?.previousElementSibling;
+      if (!content || !toggle) return;
+      const isOpen = content.classList.contains('open');
+      if (isOpen) {
+        content.classList.remove('open');
+        toggle.classList.remove('open');
+      } else {
+        content.classList.add('open');
+        toggle.classList.add('open');
+        refreshIcons();
+      }
+    }
+    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) : '';
+      return `
+        <div class="log-entry">
+          <span class="log-time">${formatLogTime(log.timestamp)}</span>
+          <span class="log-level ${log.level}">${log.level.toUpperCase()}</span>
+          <div class="log-message">
+            ${log.message}
+            ${dataStr ? `<div class="log-data">${dataStr}</div>` : ''}
+          </div>
+        </div>
+      `;
+    }
+    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;
+      document.getElementById('running-count').textContent = running;
+      document.getElementById('queued-count').textContent = queued;
+      document.getElementById('completed-count').textContent = currentData.reviewFiles.length;
+      // Update Reviews section
+      const activeReviewsSection = document.getElementById('active-reviews-section');
+      const activeReviewsEl = document.getElementById('active-reviews');
+      const activeReviewsCount = document.getElementById('active-reviews-count');
+      if (reviews.length === 0) {
+        activeReviewsSection.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');
+      if (followups.length === 0) {
+        activeFollowupsSection.classList.add('hidden');
+      } else {
+        activeFollowupsSection.classList.remove('hidden');
+        activeFollowupsEl.innerHTML = followups.map(r => renderReview(r, true)).join('');
+        activeFollowupsCount.textContent = followups.length;
+        activeFollowupsCount.classList.remove('hidden');
+      }
+      refreshIcons();
+      // Note: recent-reviews is managed by updateReviewFilesUI() - don't overwrite here
+    }
+    function updateLogs() {
+      const logsEl = document.getElementById('logs-content');
+      const errorCount = currentData.logs.filter(l => l.level === 'error' || l.level === 'warn').length;
+      const errorBadge = document.getElementById('error-count');
+      if (errorCount > 0) {
+        errorBadge.textContent = `${errorCount} erreurs`;
+        errorBadge.classList.remove('hidden');
+      } else {
+        errorBadge.classList.add('hidden');
+      }
+      if (currentData.logs.length === 0) {
+        logsEl.innerHTML = '<div class="empty-state">Aucun log</div>';
+      } else {
+        logsEl.innerHTML = currentData.logs.slice().reverse().map(renderLog).join('');
+      }
+    }
+    function updateConnectionStatus(status, text) {
+      const statusEl = document.getElementById('server-status');
+      statusEl.className = `status-indicator ${status}`;
+      statusEl.innerHTML = `<span class="status-dot"></span><span>${text}</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>';
+    }
+    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 sizeKb = (review.size / 1024).toFixed(1);
+      const mrLabel = getMrLabel();
+      return `
+        <div class="review-accordion" data-filename="${review.filename}">
+          <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-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>
+          <div class="review-accordion-content">
+            <div class="markdown-content" id="review-content-${review.filename.replace(/\./g, '-')}">
+              <div class="empty-state">Chargement...</div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+    async function toggleReviewAccordion(filename) {
+      const accordion = document.querySelector(`.review-accordion[data-filename="${filename}"]`);
+      const isOpen = accordion.classList.contains('open');
+      // Close all other accordions
+      document.querySelectorAll('.review-accordion.open').forEach(el => {
+        if (el !== accordion) el.classList.remove('open');
+      });
+      if (isOpen) {
+        accordion.classList.remove('open');
+        return;
+      }
+      accordion.classList.add('open');
+      const contentId = `review-content-${filename.replace(/\./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>';
+          return;
+        }
+      }
+      contentEl.innerHTML = markdownToHtml(loadedReviews[filename]);
+    }
+    async function fetchReviewFiles() {
+      try {
+        // Fetch reviews for current project if loaded, otherwise all
+        const url = currentProjectPath
+          ? `${API_URL}/api/reviews?path=${encodeURIComponent(currentProjectPath)}`
+          : `${API_URL}/api/reviews`;
+        const response = await fetch(url);
+        const data = await response.json();
+        currentData.reviewFiles = data.reviews || [];
+        updateReviewFilesUI();
+      } catch (error) {
+        console.error('Error fetching review files:', error);
+      }
+    }
+    async function fetchProjectStats() {
+      const statsEl = document.getElementById('project-stats');
+      if (!currentProjectPath) {
+        statsEl.innerHTML = '<div class="empty-state">Charger un projet pour voir les stats</div>';
+        return;
+      }
+      try {
+        const response = await fetch(`${API_URL}/api/stats?path=${encodeURIComponent(currentProjectPath)}`);
+        const data = await response.json();
+        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>';
+          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>
+            <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>
+            <div class="stat-card">
+              <div class="stat-value">${s.totalTime}</div>
+              <div class="stat-label"><i data-lucide="timer"></i> Temps total</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>
+            <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>
+            <div class="stat-card">
+              <div class="stat-value">${s.totalWarnings}</div>
+              <div class="stat-label"><i data-lucide="alert-triangle"></i> Importants</div>
+            </div>
+          `;
+          refreshIcons();
+        } else {
+          statsEl.innerHTML = '<div class="empty-state">Aucune statistique disponible</div>';
+        }
+      } catch (error) {
+        console.error('Error fetching stats:', error);
+        statsEl.innerHTML = '<div class="empty-state">Erreur de chargement des stats</div>';
+      }
+    }
+    function updateReviewFilesUI() {
+      const recentEl = document.getElementById('recent-reviews');
+      if (currentData.reviewFiles.length === 0) {
+        recentEl.innerHTML = '<div class="empty-state">Aucun fichier de review</div>';
+        return;
+      }
+      recentEl.innerHTML = currentData.reviewFiles.map(renderReviewFile).join('');
+      refreshIcons();
+    }
+    async function deleteReviewFile(filename) {
+      if (!confirm(`Supprimer ${filename} ?`)) return;
+      try {
+        const response = await fetch(`${API_URL}/api/reviews/${filename}`, {
+          method: 'DELETE'
+        });
+        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
+        } else {
+          alert('Erreur: ' + data.error);
+        }
+      } catch (error) {
+        console.error('Error deleting review:', error);
+        alert('Erreur lors de la suppression');
+      }
+    }
+    async function checkClaudeStatus() {
+      const claudeEl = document.getElementById('claude-status');
+      const loginSection = document.getElementById('claude-login-section');
+      claudeEl.className = 'card-claude checking';
+      claudeEl.innerHTML = '<span class="status">Vérification...</span>';
+      try {
+        const response = await fetch(`${API_URL}/api/claude/status`);
+        const data = await response.json();
+        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>
+          `;
+          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>
+          `;
+          refreshIcons();
+          if (data.message.includes('authentifié') || data.message.includes('login')) {
+            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>';
+        refreshIcons();
+      }
+    }
+    // Active platform from config (gitlab or github)
+    let activePlatform = null;
+    function updateGitCliUI() {
+      const labelEl = document.getElementById('git-cli-label');
+      const statusEl = document.getElementById('git-cli-status');
+      const loginSection = document.getElementById('git-login-section');
+      if (!activePlatform) {
+        labelEl.textContent = 'Git CLI';
+        statusEl.className = 'card-claude checking';
+        statusEl.innerHTML = '<span class="status">Charger un projet...</span>';
+        loginSection.classList.add('hidden');
+        return;
+      }
+      const isGitlab = activePlatform === 'gitlab';
+      labelEl.textContent = isGitlab ? 'GitLab CLI' : 'GitHub CLI';
+      // 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é';
+        instructionsEl.innerHTML = `
+          <p><strong>1. Installer et authentifier 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: 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>
+        `;
+      } else {
+        titleEl.innerHTML = '<i data-lucide="alert-triangle"></i> GitHub CLI non authentifié';
+        instructionsEl.innerHTML = `
+          <p><strong>1. Installer et authentifier 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: 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>
+        `;
+      }
+      refreshIcons();
+      checkGitCliStatus();
+    }
+    async function checkGitCliStatus() {
+      if (!activePlatform) return;
+      const statusEl = document.getElementById('git-cli-status');
+      const loginSection = document.getElementById('git-login-section');
+      const isGitlab = activePlatform === 'gitlab';
+      const endpoint = isGitlab ? '/api/gitlab/status' : '/api/github/status';
+      statusEl.className = 'card-claude checking';
+      statusEl.innerHTML = '<span class="status">Vérification...</span>';
+      try {
+        const response = await fetch(`${API_URL}${endpoint}`);
+        const data = await response.json();
+        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>
+          `;
+          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>`;
+          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>`;
+          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>';
+        refreshIcons();
+      }
+    }
+    function toggleLogs() {
+      logsVisible = !logsVisible;
+      const logsSection = document.getElementById('logs-section');
+      const btn = document.getElementById('toggle-logs-btn');
+      if (logsVisible) {
+        logsSection.classList.remove('hidden');
+        btn.innerHTML = '<i data-lucide="scroll-text"></i> Masquer Logs';
+        fetchLogs();
+      } else {
+        logsSection.classList.add('hidden');
+        btn.innerHTML = '<i data-lucide="scroll-text"></i> Logs';
+      }
+      refreshIcons();
+    }
+    function toggleStats() {
+      statsCollapsed = !statsCollapsed;
+      const content = document.getElementById('project-stats');
+      const toggle = document.getElementById('stats-toggle');
+      if (statsCollapsed) {
+        content.classList.add('hidden');
+        toggle.classList.add('collapsed');
+      } else {
+        content.classList.remove('hidden');
+        toggle.classList.remove('collapsed');
+      }
+    }
+    function renderMrItem(mr, type) {
+      const mrPrefix = mr.platform === 'github' ? '#' : '!';
+      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 all-resolved"><i data-lucide="check-circle"></i> Résolus</span>`;
+      const openBtn = `<a href="${mr.url}" target="_blank" class="btn-action open"><i data-lucide="external-link"></i> Ouvrir</a>`;
+      const autoFollowupChecked = mr.autoFollowup !== false ? 'checked' : '';
+      const actions = type === 'pending-fix'
+        ? `<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>
+           <button class="btn-action" onclick="triggerFollowup('${mr.id}')"><i data-lucide="refresh-cw"></i> 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>`);
+      if (mr.totalFollowups > 0) statsBadges.push(`<span class="stat-badge followup"><i data-lucide="refresh-cw"></i> ${mr.totalFollowups}</span>`);
+      if (mr.averageScore !== null) statsBadges.push(`<span class="stat-badge score"><i data-lucide="star"></i> ${mr.averageScore.toFixed(1)}/10</span>`);
+      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="review-status ${type === 'pending-fix' ? 'running' : '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}
+              </div>
+              <div class="mr-meta">
+                ${threadInfo}
+                ${statsBadges.join('')}
+                <span><i data-lucide="clock"></i> ${durationFormatted || '-'}</span>
+              </div>
+            </div>
+            <div class="mr-assigner">
+              <div class="mr-assigner-info">
+                <span class="mr-assigner-name">${assignerDisplay}</span>
+                <span class="mr-assigner-time">${assignedAt}</span>
+              </div>
+              <div class="mr-avatar" title="${assignerDisplay}">${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>
+              </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>
+              </div>
+              <div class="mr-detail-row">
+                <span class="mr-detail-label"><i data-lucide="calendar"></i> Créée:</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-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-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-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>` : ''}
+                    </div>
+                  `).join('')}
+                </div>
+              </div>
+              ` : ''}
+            </div>
+            <div class="mr-item-actions" onclick="event.stopPropagation()">
+              ${actions}
+            </div>
+          </div>
+        </div>
+      `;
+    }
+    function toggleMrAccordion(accordionId) {
+      const content = document.getElementById(`mr-content-${accordionId}`);
+      const accordion = content?.closest('.mr-item-accordion');
+      if (!content || !accordion) return;
+      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');
+        }
+      });
+      if (isOpen) {
+        accordion.classList.remove('open');
+      } else {
+        accordion.classList.add('open');
+        refreshIcons();
+      }
+    }
+    function updateMrTrackingUI() {
+      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');
+      } 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');
+      }
+      // 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');
+      }
+      refreshIcons();
+    }
+    async function fetchMrTracking() {
+      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');
+        return;
+      }
+      try {
+        const response = await fetch(`${API_URL}/api/mr-tracking?path=${encodeURIComponent(currentProjectPath)}`);
+        const data = await response.json();
+        if (data.success) {
+          currentData.pendingFix = data.pendingFix || [];
+          currentData.pendingApproval = data.pendingApproval || [];
+        }
+        updateMrTrackingUI();
+      } catch (error) {
+        console.error('Error fetching MR tracking:', error);
+      }
+    }
+    async function triggerFollowup(mrId) {
+      try {
+        const response = await fetch(`${API_URL}/api/mr-tracking/followup`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ mrId, projectPath: currentProjectPath })
+        });
+        const data = await response.json();
+        if (data.success) {
+          console.log('Followup triggered for MR:', mrId);
+        } else {
+          alert('Erreur: ' + data.error);
+        }
+      } catch (error) {
+        console.error('Error triggering followup:', error);
+        alert('Erreur lors du déclenchement du followup');
+      }
+    }
+    async function toggleAutoFollowup(mrId, enabled) {
+      try {
+        const response = await fetch(`${API_URL}/api/mr-tracking/auto-followup`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ mrId, projectPath: currentProjectPath, enabled })
+        });
+        const data = await response.json();
+        if (!data.success) {
+          alert('Erreur: ' + data.error);
+        }
+      } catch (error) {
+        console.error('Error toggling auto-followup:', error);
+        alert('Erreur lors du changement de auto follow-up');
+      }
+    }
+    async function approveMr(mrId) {
+      if (!confirm(`Marquer cette ${getMrLabel()} comme approuvée ?`)) return;
+      try {
+        const response = await fetch(`${API_URL}/api/mr-tracking/approve`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ mrId, projectPath: currentProjectPath })
+        });
+        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);
+        }
+      } catch (error) {
+        console.error('Error approving MR:', error);
+        alert('Erreur lors de l\'approbation');
+      }
+    }
+    async function syncGitLabThreads() {
+      if (!currentProjectPath) {
+        alert('Charger un projet d\'abord');
+        return;
+      }
+      const btn = document.getElementById('sync-threads-btn');
+      const icon = btn.querySelector('i');
+      // Add spinning animation
+      btn.disabled = true;
+      icon.classList.add('spinning');
+      try {
+        const response = await fetch(`${API_URL}/api/mr-tracking/sync`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ projectPath: currentProjectPath })
+        });
+        const data = await response.json();
+        if (data.success) {
+          // Refresh MR tracking data
+          await fetchMrTracking();
+          console.log('Threads synchronized successfully');
+        } else {
+          alert('Erreur: ' + data.error);
+        }
+      } catch (error) {
+        console.error('Error syncing threads:', error);
+        alert('Erreur lors de la synchronisation des threads');
+      } finally {
+        btn.disabled = false;
+        icon.classList.remove('spinning');
+      }
+    }
+    async function fetchLogs() {
+      try {
+        const response = await fetch(`${API_URL}/api/logs`);
+        const data = await response.json();
+        currentData.logs = data.logs || [];
+        updateLogs();
+      } catch (error) {
+        console.error('Error fetching logs:', error);
+      }
+    }
+    function handleProgressUpdate(message) {
+      const { jobId, progress } = message;
+      const review = currentData.activeReviews.find(r => r.id === jobId);
+      if (review) {
+        review.progress = progress;
+        updateUI();
+      }
+    }
+    function handleLogMessage(log) {
+      currentData.logs.push(log);
+      if (currentData.logs.length > 200) currentData.logs.shift();
+      if (logsVisible) updateLogs();
+    }
+    function connectWebSocket() {
+      if (ws?.readyState === WebSocket.OPEN) return;
+      updateConnectionStatus('connecting', 'Connexion...');
+      try {
+        ws = new WebSocket(WS_URL);
+        ws.onopen = () => {
+          wsConnected = true;
+          reconnectAttempts = 0;
+          updateConnectionStatus('online', 'En ligne');
+        };
+        ws.onmessage = (event) => {
+          try {
+            const message = JSON.parse(event.data);
+            switch (message.type) {
+              case 'init':
+              case 'state':
+                console.log(`[WS] ${message.type}: ${message.activeReviews?.length || 0} active reviews`, message.activeReviews);
+                currentData.activeReviews = message.activeReviews || [];
+                currentData.recentReviews = message.recentReviews || [];
+                updateUI();
+                // Also refresh MR tracking when state changes
+                if (message.type === 'state') {
+                  fetchMrTracking();
+                }
+                break;
+              case 'progress':
+                handleProgressUpdate(message);
+                break;
+              case 'log':
+                handleLogMessage(message.log);
+                break;
+              case 'pong':
+                break;
+            }
+          } catch (e) {
+            console.error('WebSocket message error:', e);
+          }
+        };
+        ws.onclose = () => {
+          wsConnected = false;
+          ws = null;
+          updateConnectionStatus('offline', 'Hors ligne');
+          if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+            reconnectAttempts++;
+            setTimeout(connectWebSocket, RECONNECT_DELAY);
+          }
+        };
+        ws.onerror = (error) => console.error('WebSocket error:', error);
+      } catch (error) {
+        console.error('WebSocket creation failed:', error);
+        wsConnected = false;
+      }
+    }
+    setInterval(() => {
+      if (ws?.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'ping' }));
+      }
+    }, 30000);
+    async function fetchStatus() {
+      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)');
+        updateUI();
+      } catch (error) {
+        if (!wsConnected) {
+          updateConnectionStatus('offline', 'Hors ligne');
+          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>';
+        }
+      }
+    }
+    async function loadModelSetting() {
+      try {
+        const response = await fetch(`${API_URL}/api/settings/model`);
+        const data = await response.json();
+        const select = document.getElementById('model-select');
+        if (select && data.model) {
+          select.value = data.model;
+        }
+      } catch (error) {
+        console.error('Error loading model setting:', error);
+      }
+    }
+    async function changeModel(model) {
+      try {
+        const response = await fetch(`${API_URL}/api/settings/model`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ model })
+        });
+        const data = await response.json();
+        if (data.success) {
+          console.log('Model changed to:', model);
+        }
+      } catch (error) {
+        console.error('Error changing model:', error);
+      }
+    }
+    // Project config loader with persistence
+    const STORAGE_KEY_PROJECTS = 'review-flow-projects';
+    const STORAGE_KEY_CURRENT = 'review-flow-current-project';
+    let currentProjectConfig = null;
+    let currentProjectPath = null;
+    function getStoredProjects() {
+      try {
+        return JSON.parse(localStorage.getItem(STORAGE_KEY_PROJECTS) || '[]');
+      } catch {
+        return [];
+      }
+    }
+    function saveProjects(projects) {
+      localStorage.setItem(STORAGE_KEY_PROJECTS, JSON.stringify(projects));
+    }
+    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();
+    }
+    function removeProjectFromHistory(path) {
+      const projects = getStoredProjects().filter(p => p !== path);
+      saveProjects(projects);
+      updateProjectSelect();
+    }
+    function updateProjectSelect() {
+      const select = document.getElementById('project-select');
+      const projects = getStoredProjects();
+      const current = localStorage.getItem(STORAGE_KEY_CURRENT) || '';
+      select.innerHTML = '<option value="">-- Sélectionner un projet --</option>';
+      for (const path of projects) {
+        const shortName = path.split('/').slice(-2).join('/');
+        const option = document.createElement('option');
+        option.value = path;
+        option.textContent = shortName;
+        option.title = path;
+        if (path === current) option.selected = true;
+        select.appendChild(option);
+      }
+    }
+    function onProjectSelect(path) {
+      if (path) {
+        document.getElementById('project-path-input').value = '';
+        loadProjectConfigFromPath(path);
+      }
+    }
+    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');
+        return;
+      }
+      await loadProjectConfigFromPath(projectPath);
+    }
+    async function loadProjectConfigFromPath(projectPath) {
+      const status = document.getElementById('config-status');
+      const info = document.getElementById('config-info');
+      showConfigStatus('Chargement...', 'loading');
+      info.classList.add('hidden');
+      try {
+        const response = await fetch(`${API_URL}/api/project-config?path=${encodeURIComponent(projectPath)}`);
+        const data = await response.json();
+        if (data.success) {
+          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');
+          refreshIcons();
+          // Update model selector if defaultModel is set
+          if (data.config.defaultModel) {
+            const modelSelect = document.getElementById('model-select');
+            if (modelSelect) {
+              modelSelect.value = data.config.defaultModel;
+              changeModel(data.config.defaultModel);
+            }
+          }
+          // 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>
+          `;
+          info.classList.remove('hidden');
+          refreshIcons();
+        } else {
+          showConfigStatus('<i data-lucide="x-circle"></i> ' + data.error, 'error');
+          refreshIcons();
+        }
+      } catch (error) {
+        showConfigStatus('<i data-lucide="x-circle"></i> Erreur de chargement', 'error');
+        refreshIcons();
+        console.error('Error loading project config:', error);
+      }
+    }
+    function showConfigStatus(text, type) {
+      const status = document.getElementById('config-status');
+      status.innerHTML = text;
+      status.className = `config-status ${type}`;
+      status.classList.remove('hidden');
+      refreshIcons();
+    }
+    function removeCurrentProject() {
+      const select = document.getElementById('project-select');
+      const path = select.value;
+      if (!path) {
+        showConfigStatus('Aucun projet sélectionné', 'error');
+        return;
+      }
+      if (confirm(`Retirer "${path.split('/').slice(-2).join('/')}" de la liste ?`)) {
+        removeProjectFromHistory(path);
+        localStorage.removeItem(STORAGE_KEY_CURRENT);
+        currentProjectPath = null;
+        currentProjectConfig = null;
+        document.getElementById('config-info').classList.add('hidden');
+        showConfigStatus('Projet retiré', '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>';
+        document.getElementById('project-stats').innerHTML =
+          '<div class="empty-state">Charger un projet pour voir les stats</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}) ?`;
+      const modal = document.getElementById('cancel-modal');
+      modal.classList.remove('hidden');
+      requestAnimationFrame(() => modal.classList.add('visible'));
+    }
+    function closeCancelModal(event) {
+      if (event && event.target !== event.currentTarget) return;
+      const modal = document.getElementById('cancel-modal');
+      modal.classList.remove('visible');
+      setTimeout(() => modal.classList.add('hidden'), 200);
+      cancelModalJobId = null;
+    }
+    async function confirmCancelReview() {
+      if (!cancelModalJobId) return;
+      const jobId = cancelModalJobId;
+      closeCancelModal();
+      try {
+        const response = await fetch(`${API_URL}/api/reviews/cancel/${encodeURIComponent(jobId)}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            projectPath: currentProjectPath || undefined,
+            mrId: jobId,
+          }),
+        });
+        const data = await response.json();
+        if (data.success) {
+          const card = document.querySelector(`.review-item[data-job-id="${jobId}"]`);
+          if (card) card.remove();
+          showToast('Review annulée', 'success');
+          fetchStatus();
+        } else if (data.status === 'already-completed') {
+          showToast('Cette review est déjà terminée', 'info');
+          fetchStatus();
+        } else {
+          showToast(data.error || 'Erreur lors de l\'annulation', 'error');
+        }
+      } catch (error) {
+        console.error('Error cancelling review:', error);
+        showToast('Erreur lors de l\'annulation', 'error');
+      }
+    }
+    function showToast(message, type) {
+      const container = document.getElementById('toast-container');
+      const iconName = type === 'success' ? 'check-circle' : type === 'info' ? 'info' : 'alert-circle';
+      const toast = document.createElement('div');
+      toast.className = `toast ${type}`;
+      toast.innerHTML = `<i data-lucide="${iconName}"></i> ${escapeHtml(message)}`;
+      container.appendChild(toast);
+      refreshIcons();
+      requestAnimationFrame(() => toast.classList.add('visible'));
+      setTimeout(() => {
+        toast.classList.remove('visible');
+        setTimeout(() => toast.remove(), 300);
+      }, 3000);
+    }
+    // Init
+    connectWebSocket();
+    fetchStatus();
+    checkClaudeStatus();
+    loadModelSetting();
+    initProjectLoader(); // Will check git CLI and load reviews/stats after loading project config
+    // Initialize Lucide icons
+    refreshIcons();
+    setInterval(fetchStatus, 5000);
+    setInterval(() => {
+      fetchReviewFiles();
+      fetchProjectStats();
+      fetchMrTracking();
+    }, 30000); // Refresh review files, stats and MR tracking every 30s
+    setInterval(() => {
+      document.querySelectorAll('.review-item').forEach(el => {
+        const jobId = el.dataset.jobId;
+        const review = currentData.activeReviews.find(r => r.id === jobId);
+        if (review?.startedAt) {
+          const metaEl = el.querySelector('.review-meta');
+          if (metaEl) {
+            const badge = metaEl.querySelector('.badge');
+            metaEl.innerHTML = `${badge?.outerHTML || ''} ${icon('clock')} ${formatDuration(review.startedAt)}`;
+            refreshIcons();
+          }
+        }
+      });
+    }, 1000);
+  </script>
+</body>
+</html>