reviewflow 3.6.0 → 3.8.0

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

@@ -13,6 +13,10 @@
       <div class="logo"><i data-lucide="bot"></i></div>
       <h1>Reviewflow</h1>
       <div class="header-actions">
+        <div class="version-update-wrapper">
+          <div id="version-update-area" class="version-update-area"></div>
+          <div id="version-manual-update-container"></div>
+        </div>
         <button id="check-claude-btn" class="btn btn-primary" onclick="checkClaudeStatus()">
           <i data-lucide="search"></i> <span id="i18n-check-claude"></span>
         </button>
@@ -145,12 +149,27 @@
       <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>
+        <button id="recalculate-btn" class="btn btn-sm btn-secondary" onclick="event.stopPropagation(); recalculateStats()" style="margin-left: auto; font-size: 0.75rem; padding: 2px 8px;">
+          <i data-lucide="refresh-cw" style="width: 12px; height: 12px;"></i>
+          <span id="recalculate-label"></span>
+        </button>
+        <span id="backfill-progress" class="badge-count hidden" style="margin-left: 4px;"></span>
       </div>
       <div id="project-stats" class="section-content stats-grid hidden">
         <div class="empty-state" id="i18n-empty-stats"></div>
       </div>
     </div>
 
+    <div id="team-section" class="section hidden">
+      <div class="section-header clickable" onclick="toggleTeamSection()" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+        <i data-lucide="users"></i> <span id="i18n-section-team"></span>
+        <span id="team-toggle" class="toggle-icon collapsed"><i data-lucide="chevron-down"></i></span>
+      </div>
+      <div id="team-tab-content" class="section-content hidden">
+        <div class="empty-state" id="i18n-empty-team"></div>
+      </div>
+    </div>
+
     <div class="section" id="active-reviews-section">
       <div class="section-header">
         <i data-lucide="file-search"></i> <span id="i18n-section-active-reviews"></span>
@@ -206,6 +225,13 @@
       </div>
     </div>
 
+    <div class="section" id="cleanup-section">
+      <div class="section-header">
+        <i data-lucide="trash-2"></i> <span>Nettoyage</span>
+      </div>
+      <div class="section-content" id="cleanup-content"></div>
+    </div>
+
     <div class="refresh-info">
       <span id="connection-mode"></span> • <span id="i18n-connection-fallback"></span>
       <span class="refresh-separator"> • </span>
@@ -226,6 +252,16 @@
 
   <div id="toast-container" class="toast-container"></div>
 
+  <div id="mr-sheet-overlay" class="sheet-overlay" onclick="closeMrSheet()"></div>
+  <div id="mr-sheet" class="sheet-panel">
+    <div id="mr-sheet-content" class="sheet-content"></div>
+  </div>
+
+  <div id="dev-sheet-overlay" class="sheet-overlay" onclick="closeDevSheet()"></div>
+  <div id="dev-sheet" class="sheet-panel">
+    <div id="dev-sheet-content" class="sheet-content"></div>
+  </div>
+
   <script type="module">
     import { t, setLanguage, getLanguage } from './modules/i18n.js';
     import { formatTime, formatDuration, formatPhase, formatLogTime } from './modules/formatting.js';
@@ -240,6 +276,14 @@
     import { rankPendingFixForNowLane } from './modules/priority.js';
     import { getQualityProgress, getQualityTrend } from './modules/quality.js';
     import { createSessionMetricsState, trackSessionAction, updatePriorityItemTracking, getSessionMetricsSnapshot } from './modules/sessionMetrics.js';
+    import { renderCleanupSection, handleCleanupClick } from './modules/cleanup.js';
+    import { renderVersionUpdateArea, setVersionCheckState } from './modules/versionUpdate.js';
+    import { renderCollapsibleList, toggleCollapsibleList } from './modules/collapsibleList.js';
+    import { renderMrSheetContent, drawScoreTimeline, drawIssuesBreakdown } from './modules/mrSheet.js';
+    import { drawScoreTrendChart, drawReviewActivityChart, drawScoreDistributionChart, animateCounter } from './modules/statsCharts.js';
+    import { renderTeamTab, fetchAndRenderTeamTab } from './modules/teamTab.js';
+    import { renderDeveloperSheetContent, drawRadarChart } from './modules/developerSheet.js';
+    import { buildInsightsReport } from './modules/insightsReport.js';
 
     const API_URL = window.location.origin;
     const WS_URL = `ws://${window.location.host}/ws`;
@@ -250,9 +294,14 @@
     let logsVisible = false;
 
     let currentData = { activeReviews: [], recentReviews: [], logs: [], reviewFiles: [], pendingFix: [], pendingApproval: [] };
+    const mrDataStore = new Map();
     let loadedReviews = {};
     let statsCollapsed = true;
+    let currentStatsReviews = [];
+    let currentDevFilter = 'all';
     let focusStripCompact = false;
+    let teamCollapsed = true;
+    let currentInsightsData = null;
     const loadingState = { status: 0, reviewFiles: 0, stats: 0, mrTracking: 0 };
     let hasLoadedStatusOnce = false;
     const secondarySections = ['active-followups-section', 'pending-approval-section', 'completed-reviews-section'];
@@ -702,21 +751,13 @@
     }
 
     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 = 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">${t('empty.logs')}</div>`;
-      } else {
-        logsEl.innerHTML = currentData.logs.slice().reverse().map(renderLog).join('');
+      const sheetLogsEl = document.querySelector('.sheet-logs-content');
+      if (sheetLogsEl && logsVisible) {
+        if (currentData.logs.length === 0) {
+          sheetLogsEl.innerHTML = `<div class="empty-state">${t('empty.logs')}</div>`;
+        } else {
+          sheetLogsEl.innerHTML = currentData.logs.slice().reverse().map(renderLog).join('');
+        }
       }
     }
 
@@ -829,19 +870,23 @@
 
         if (data.summary) {
           const s = data.summary;
+          const reviews = data.stats?.reviews || [];
           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>';
 
+          const numericScore = parseFloat(s.averageScore);
+          const isScoreNumeric = !isNaN(numericScore);
+
           statsEl.innerHTML = `
             <div class="stat-card metric-reviews">
-              <div class="stat-value"><span class="stat-main">${s.totalReviews}</span></div>
+              <div class="stat-value"><span class="stat-main" data-target="${s.totalReviews}">0</span></div>
               <div class="stat-label"><i data-lucide="file-search"></i> ${t('stats.reviews')}</div>
             </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-value"><span class="stat-main" ${isScoreNumeric ? `data-target="${numericScore}" data-suffix="/10"` : ''}>${isScoreNumeric ? '0' : s.averageScore}</span>${!isScoreNumeric ? '<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 metric-time">
@@ -853,15 +898,57 @@
               <div class="stat-label"><i data-lucide="clock"></i> ${t('stats.averageTime')}</div>
             </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-value"><span class="stat-main" data-target="${s.totalBlocking}">0</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 metric-warnings">
-              <div class="stat-value"><span class="stat-main">${s.totalWarnings}</span></div>
+              <div class="stat-value"><span class="stat-main" data-target="${s.totalWarnings}">0</span></div>
               <div class="stat-label"><i data-lucide="alert-triangle"></i> ${t('stats.warnings')}</div>
             </div>
+            <div class="stats-charts-row">
+              <div class="stats-chart-card">
+                <div class="stats-chart-title"><i data-lucide="trending-up"></i> ${t('stats.scoreTrend')}</div>
+                <div class="dev-filter" id="dev-filter-container">
+                  <button class="dev-filter-btn ${currentDevFilter === 'all' ? 'active' : ''}" data-dev="all" onclick="filterScoreTrend('all')">${t('stats.allDevs')}</button>
+                  ${[...new Set(reviews.map(r => r.assignedBy).filter(Boolean))].map(dev =>
+                    '<button class="dev-filter-btn ' + (currentDevFilter === dev ? 'active' : '') + '" data-dev="' + dev + '" onclick="filterScoreTrend(\'' + dev + '\')">' + dev + '</button>'
+                  ).join('')}
+                </div>
+                <canvas id="stats-score-trend" class="stats-canvas"></canvas>
+              </div>
+              <div class="stats-chart-card">
+                <div class="stats-chart-title"><i data-lucide="bar-chart-3"></i> ${t('stats.reviewActivity')}</div>
+                <canvas id="stats-activity" class="stats-canvas"></canvas>
+              </div>
+            </div>
+            <div class="stats-charts-row">
+              <div class="stats-chart-card full-width">
+                <div class="stats-chart-title"><i data-lucide="pie-chart"></i> ${t('stats.scoreDistribution')}</div>
+                <canvas id="stats-distribution" class="stats-canvas-wide"></canvas>
+              </div>
+            </div>
           `;
           refreshIcons();
+
+          statsEl.querySelectorAll('.stat-main[data-target]').forEach(element => {
+            const target = parseFloat(element.dataset.target);
+            if (!isNaN(target)) {
+              animateCounter(element, target, 800, element.dataset.suffix || '');
+            }
+          });
+
+          currentStatsReviews = reviews;
+
+          requestAnimationFrame(() => {
+            if (reviews.length) {
+              const trendReviews = currentDevFilter === 'all'
+                ? reviews
+                : reviews.filter(r => r.assignedBy === currentDevFilter);
+              drawScoreTrendChart('stats-score-trend', trendReviews);
+              drawReviewActivityChart('stats-activity', reviews);
+              drawScoreDistributionChart('stats-distribution', reviews);
+            }
+          });
         } else {
           statsEl.innerHTML = `<div class="empty-state">${t('empty.statsNoData')}</div>`;
         }
@@ -885,7 +972,10 @@
       }
 
       completedSection?.classList.remove('hidden');
-      recentEl.innerHTML = currentData.reviewFiles.map(renderReviewFile).join('');
+      recentEl.innerHTML = renderCollapsibleList(
+        currentData.reviewFiles.map(renderReviewFile),
+        'completed-reviews', t
+      );
       applySectionExpansion('completed-reviews-section');
       refreshIcons();
     }
@@ -1044,19 +1134,58 @@
     }
 
     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> ${t('header.hideLogs')}`;
-        fetchLogs();
-      } else {
-        logsSection.classList.add('hidden');
-        btn.innerHTML = `<i data-lucide="scroll-text"></i> ${t('header.logs')}`;
+      const sheetPanel = document.getElementById('mr-sheet');
+      const isOpen = sheetPanel.classList.contains('open') && logsVisible;
+
+      if (isOpen) {
+        closeMrSheet();
+        logsVisible = false;
+        return;
       }
-      refreshIcons();
+
+      logsVisible = true;
+      const openLogsSheet = () => {
+        const contentEl = document.getElementById('mr-sheet-content');
+        contentEl.innerHTML = renderLogsSheetContent();
+        document.getElementById('mr-sheet-overlay').classList.add('open');
+        sheetPanel.classList.add('open');
+        document.body.style.overflow = 'hidden';
+        refreshIcons();
+      };
+      fetchLogs().then(openLogsSheet).catch(openLogsSheet);
+    }
+
+    function renderLogsSheetContent() {
+      const errorCount = currentData.logs.filter(l => l.level === 'error' || l.level === 'warn').length;
+      const errorBadge = errorCount > 0
+        ? ` <span class="section-header badge-count">${t('logs.errorCount', { count: errorCount })}</span>`
+        : '';
+
+      const logsHtml = currentData.logs.length === 0
+        ? `<div class="empty-state">${t('empty.logs')}</div>`
+        : currentData.logs.slice().reverse().map(renderLog).join('');
+
+      return `
+        <button class="sheet-close" onclick="closeMrSheet()"><i data-lucide="x"></i></button>
+        <div class="sheet-mr-header">
+          <div>
+            <div class="sheet-mr-title"><i data-lucide="scroll-text"></i> ${t('section.logs')}${errorBadge}</div>
+          </div>
+        </div>
+        <div class="sheet-logs-body">
+          <div class="sheet-logs-content section-content logs">${logsHtml}</div>
+        </div>
+        <div class="sheet-logs-footer">
+          <button class="btn btn-secondary sheet-clear-btn" onclick="clearLogs()">
+            <i data-lucide="trash-2"></i> ${t('logs.clear')}
+          </button>
+        </div>
+      `;
+    }
+
+    function clearLogs() {
+      currentData.logs = [];
+      updateLogs();
     }
 
     function toggleStats() {
@@ -1073,6 +1202,214 @@
       }
     }
 
+    function toggleTeamSection() {
+      teamCollapsed = !teamCollapsed;
+      const content = document.getElementById('team-tab-content');
+      const toggle = document.getElementById('team-toggle');
+
+      if (teamCollapsed) {
+        content.classList.add('hidden');
+        toggle.classList.add('collapsed');
+      } else {
+        content.classList.remove('hidden');
+        toggle.classList.remove('collapsed');
+      }
+    }
+
+    let teamAnalysisCollapsed = false;
+
+    function toggleTeamAnalysis() {
+      teamAnalysisCollapsed = !teamAnalysisCollapsed;
+      const body = document.getElementById('team-analysis-body');
+      const toggle = document.getElementById('team-analysis-toggle');
+      if (body) {
+        body.classList.toggle('hidden', teamAnalysisCollapsed);
+      }
+      if (toggle) {
+        toggle.classList.toggle('collapsed', teamAnalysisCollapsed);
+      }
+      refreshIcons();
+    }
+
+    let aiGenerationInProgress = false;
+
+    async function fetchTeamInsights() {
+      if (!currentProjectPath) return;
+      if (aiGenerationInProgress) return;
+      const container = document.getElementById('team-tab-content');
+      if (!container) return;
+
+      container.innerHTML = `<div class="empty-state team-loading">${icon('loader-circle', 'spinning')} ${t('team.loading')}</div>`;
+      refreshIcons();
+
+      try {
+        const response = await fetch(`${API_URL}/api/insights?path=${encodeURIComponent(currentProjectPath)}`);
+        const data = await response.json();
+        currentInsightsData = data;
+
+        container.innerHTML = renderTeamTab(data, t);
+        refreshIcons();
+
+        setTimeout(() => {
+          container.querySelectorAll('.stat-bar-fill[data-target-width]').forEach((bar) => {
+            bar.style.width = bar.dataset.targetWidth;
+          });
+        }, 50);
+      } catch (error) {
+        console.error('Error fetching team insights:', error);
+        container.innerHTML = `<div class="empty-state">${t('team.noData')}</div>`;
+      }
+    }
+
+    async function generateAiInsights() {
+      if (!currentProjectPath || aiGenerationInProgress) return;
+      aiGenerationInProgress = true;
+      const button = document.querySelector('.ai-generate-btn');
+      if (button) {
+        button.disabled = true;
+        button.classList.add('loading');
+        button.innerHTML = `${icon('loader-circle', 'spinning')} ${t('ai.generating')}`;
+        refreshIcons();
+      }
+      try {
+        const response = await fetch(`${API_URL}/api/insights/generate`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: currentProjectPath, language: getLanguage() }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error || t('ai.error'));
+        }
+        aiGenerationInProgress = false;
+        await fetchTeamInsights();
+      } catch (error) {
+        aiGenerationInProgress = false;
+        console.error('Error generating AI insights:', error);
+        showToast(error.message || t('ai.error'), 'error');
+        if (button) {
+          button.disabled = false;
+          button.classList.remove('loading');
+          button.innerHTML = `${icon('sparkles')} ${t('ai.generate')}`;
+          refreshIcons();
+        }
+      }
+    }
+
+    function openDevSheet(encodedName) {
+      const developerName = decodeURIComponent(encodedName);
+      if (!currentInsightsData || !currentInsightsData.developers) return;
+      const developer = currentInsightsData.developers.find(
+        (dev) => dev.developerName === developerName
+      );
+      if (!developer) return;
+
+      const aiDevelopers = currentInsightsData.aiInsights?.developers || [];
+      const aiDeveloper = aiDevelopers.find(
+        (aiDev) => aiDev.developerName === developerName
+      ) || null;
+
+      const contentEl = document.getElementById('dev-sheet-content');
+      contentEl.innerHTML = renderDeveloperSheetContent(developer, t, aiDeveloper);
+
+      document.getElementById('dev-sheet-overlay').classList.add('open');
+      document.getElementById('dev-sheet').classList.add('open');
+      document.body.style.overflow = 'hidden';
+
+      refreshIcons();
+
+      requestAnimationFrame(() => {
+        drawRadarChart('dev-radar-canvas', developer.categoryLevels, t);
+        const developerReviews = currentStatsReviews.filter(
+          (review) => review.assignedBy === developerName
+        );
+        drawScoreTrendChart('dev-score-trend-canvas', developerReviews);
+        contentEl.querySelectorAll('.stat-bar-fill[data-target-width]').forEach((bar) => {
+          setTimeout(() => { bar.style.width = bar.dataset.targetWidth; }, 50);
+        });
+      });
+    }
+
+    function closeDevSheet() {
+      document.getElementById('dev-sheet-overlay').classList.remove('open');
+      document.getElementById('dev-sheet').classList.remove('open');
+      document.body.style.overflow = '';
+    }
+
+    function exportInsightsPdf() {
+      if (!currentInsightsData || currentInsightsData.isEmpty) return;
+
+      const reportHtml = buildInsightsReport(currentInsightsData, t);
+
+      const iframe = document.createElement('iframe');
+      iframe.style.position = 'fixed';
+      iframe.style.right = '0';
+      iframe.style.bottom = '0';
+      iframe.style.width = '0';
+      iframe.style.height = '0';
+      iframe.style.border = 'none';
+      document.body.appendChild(iframe);
+
+      const document_ = iframe.contentDocument || iframe.contentWindow.document;
+      document_.open();
+      document_.write(reportHtml);
+      document_.close();
+
+      iframe.contentWindow.addEventListener('afterprint', () => {
+        if (iframe.parentNode) document.body.removeChild(iframe);
+      });
+
+      setTimeout(() => {
+        iframe.contentWindow.print();
+        setTimeout(() => {
+          if (iframe.parentNode) document.body.removeChild(iframe);
+        }, 60000);
+      }, 250);
+    }
+
+    async function recalculateStats() {
+      if (!currentProjectPath) return;
+      const button = document.getElementById('recalculate-btn');
+      const progressBadge = document.getElementById('backfill-progress');
+      if (button) button.disabled = true;
+
+      try {
+        const response = await fetch(`${API_URL}/api/stats/recalculate`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: currentProjectPath, backfill: true }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Recalculation failed');
+        }
+
+        if (progressBadge) {
+          progressBadge.textContent = '...';
+          progressBadge.classList.remove('hidden');
+        }
+      } catch (error) {
+        console.error('Error recalculating stats:', error);
+        if (button) button.disabled = false;
+        if (progressBadge) progressBadge.classList.add('hidden');
+      }
+    }
+    window.recalculateStats = recalculateStats;
+
+    function filterScoreTrend(selectedDev) {
+      currentDevFilter = selectedDev;
+      document.querySelectorAll('.dev-filter-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.dev === selectedDev);
+      });
+
+      const filtered = selectedDev === 'all'
+        ? currentStatsReviews
+        : currentStatsReviews.filter(r => r.assignedBy === selectedDev);
+
+      drawScoreTrendChart('stats-score-trend', filtered);
+    }
+    window.filterScoreTrend = filterScoreTrend;
+
     function renderMrItem(mr, type) {
       const mrPrefix = mr.platform === 'github' ? '#' : '!';
       const encodedMrId = encodeURIComponent(String(mr.id ?? ''));
@@ -1112,7 +1449,7 @@
 
       return `
         <div class="mr-item-accordion" data-mr-id="${mr.id}">
-          <div class="mr-item-header" onclick="toggleMrAccordion('${accordionId}')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+          <div class="mr-item-header" onclick="openMrSheet('${encodedMrId}')" 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">
@@ -1259,10 +1596,16 @@
         ? 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('')
+        ? renderCollapsibleList(
+            queueLanesModel.needsFixItems.map((mergeRequest) => renderMrItem(mergeRequest, 'pending-fix')),
+            'needs-fix', t
+          )
         : `<div class="empty-state">${t('queueLane.emptyNeedsFix')}</div>`;
       const readyToApproveContent = queueLanesModel.readyToApproveItems.length > 0
-        ? queueLanesModel.readyToApproveItems.map((mergeRequest) => renderMrItem(mergeRequest, 'pending-approval')).join('')
+        ? renderCollapsibleList(
+            queueLanesModel.readyToApproveItems.map((mergeRequest) => renderMrItem(mergeRequest, 'pending-approval')),
+            'ready-to-approve', t
+          )
         : `<div class="empty-state">${t('queueLane.emptyReadyToApprove')}</div>`;
 
       return `
@@ -1323,6 +1666,11 @@
       pendingFixSection.classList.remove('hidden');
       const rankedPendingFix = rankPendingFixForNowLane(currentData.pendingFix);
       const queueLanesModel = buildQueueLanesModel(rankedPendingFix, currentData.pendingApproval);
+
+      mrDataStore.clear();
+      if (queueLanesModel.nowLaneItem) mrDataStore.set(queueLanesModel.nowLaneItem.id, { ...queueLanesModel.nowLaneItem, _sheetType: 'pending-fix' });
+      queueLanesModel.needsFixItems.forEach(mr => mrDataStore.set(mr.id, { ...mr, _sheetType: 'pending-fix' }));
+      queueLanesModel.readyToApproveItems.forEach(mr => mrDataStore.set(mr.id, { ...mr, _sheetType: 'pending-approval' }));
       sessionMetrics = updatePriorityItemTracking(sessionMetrics, {
         nowLaneItemId: queueLanesModel.nowLaneItem?.id ?? null,
         pendingFixIds: rankedPendingFix.map((mergeRequest) => String(mergeRequest.id)),
@@ -1529,6 +1877,26 @@
               case 'log':
                 handleLogMessage(message.log);
                 break;
+              case 'backfill-progress': {
+                const progressBadge = document.getElementById('backfill-progress');
+                if (progressBadge) {
+                  progressBadge.textContent = t('stats.backfillProgress', { completed: message.data.completed, total: message.data.total });
+                  progressBadge.classList.remove('hidden');
+                }
+                break;
+              }
+              case 'backfill-complete': {
+                const completeBadge = document.getElementById('backfill-progress');
+                const recalcButton = document.getElementById('recalculate-btn');
+                if (completeBadge) {
+                  completeBadge.textContent = t('stats.backfillComplete');
+                  setTimeout(() => completeBadge.classList.add('hidden'), 3000);
+                }
+                if (recalcButton) recalcButton.disabled = false;
+                fetchProjectStats();
+                fetchTeamInsights();
+                break;
+              }
               case 'pong':
                 break;
             }
@@ -1569,6 +1937,14 @@
         currentData.activeReviews = data.jobs?.active || [];
         currentData.recentReviews = data.jobs?.recent || [];
         dispatchReviewNotifications(currentData.activeReviews, currentData.recentReviews);
+        const versionUpdateArea = document.getElementById('version-update-area');
+        if (versionUpdateArea) {
+          versionUpdateArea.innerHTML = renderVersionUpdateArea(
+            { currentVersion: data.version || '?', updateAvailable: data.updateAvailable || false, latestVersion: data.latestVersion || null },
+            t
+          );
+          if (typeof lucide !== 'undefined') lucide.createIcons();
+        }
         if (!wsConnected) updateConnectionStatus('online', 'connection.onlinePolling');
         updateUI();
       } catch (error) {
@@ -1762,8 +2138,10 @@
           fetchReviewFiles();
           fetchProjectStats();
           fetchMrTracking();
+          fetchTeamInsights();
 
           document.getElementById('stats-section').classList.remove('hidden');
+          document.getElementById('team-section').classList.remove('hidden');
 
           const platformIcon = activePlatform === 'gitlab' ? '<i data-lucide="gitlab"></i> GitLab' : '<i data-lucide="github"></i> GitHub';
           info.innerHTML = `
@@ -1811,16 +2189,41 @@
       }
     }
 
-    function initProjectLoader() {
+    async function syncServerRepositories() {
+      try {
+        const response = await fetch(`${API_URL}/api/repositories`);
+        const data = await response.json();
+        if (!data.repositories) return;
+
+        const stored = getStoredProjects();
+        for (const repository of data.repositories) {
+          if (repository.enabled && !stored.includes(repository.localPath)) {
+            stored.push(repository.localPath);
+          }
+        }
+        saveProjects(stored);
+        updateProjectSelect();
+      } catch {
+        // Server unreachable — use localStorage only
+      }
+    }
+
+    async function initProjectLoader() {
+      await syncServerRepositories();
       updateProjectSelect();
       const lastProject = localStorage.getItem(STORAGE_KEY_CURRENT);
       if (lastProject) {
         loadProjectConfigFromPath(lastProject);
       } else {
-        document.getElementById('recent-reviews').innerHTML =
-          `<div class="empty-state">${t('empty.reviewsNoProject')}</div>`;
-        document.getElementById('project-stats').innerHTML =
-          `<div class="empty-state">${t('empty.statsNoProject')}</div>`;
+        const storedProjects = getStoredProjects();
+        if (storedProjects.length > 0) {
+          loadProjectConfigFromPath(storedProjects[0]);
+        } else {
+          document.getElementById('recent-reviews').innerHTML =
+            `<div class="empty-state">${t('empty.reviewsNoProject')}</div>`;
+          document.getElementById('project-stats').innerHTML =
+            `<div class="empty-state">${t('empty.statsNoProject')}</div>`;
+        }
       }
     }
 
@@ -1996,6 +2399,12 @@
       const sectionStats = document.getElementById('i18n-section-stats');
       if (sectionStats) sectionStats.textContent = t('section.stats');
 
+      const recalculateLabel = document.getElementById('recalculate-label');
+      if (recalculateLabel) recalculateLabel.textContent = t('stats.recalculate');
+
+      const sectionTeam = document.getElementById('i18n-section-team');
+      if (sectionTeam) sectionTeam.textContent = t('team.title');
+
       const sectionActiveReviews = document.getElementById('i18n-section-active-reviews');
       if (sectionActiveReviews) sectionActiveReviews.textContent = t('section.activeReviews');
 
@@ -2030,6 +2439,9 @@
       const emptyPendingApproval = document.getElementById('i18n-empty-pending-approval');
       if (emptyPendingApproval) emptyPendingApproval.textContent = t('empty.pendingApproval');
 
+      const emptyTeam = document.getElementById('i18n-empty-team');
+      if (emptyTeam) emptyTeam.textContent = t('team.noData');
+
       const emptyLoading = document.getElementById('i18n-empty-loading');
       if (emptyLoading) emptyLoading.textContent = t('status.loading');
 
@@ -2055,7 +2467,137 @@
       updateProjectSelect();
     }
 
+    async function checkForUpdates() {
+      setVersionCheckState('checking', t);
+      try {
+        const response = await fetch(`${API_URL}/api/version/check`);
+        const data = await response.json();
+        const versionUpdateArea = document.getElementById('version-update-area');
+        if (versionUpdateArea) {
+          versionUpdateArea.innerHTML = renderVersionUpdateArea(
+            { currentVersion: data.currentVersion || '?', updateAvailable: data.updateAvailable || false, latestVersion: data.latestVersion || null },
+            t
+          );
+          if (typeof lucide !== 'undefined') lucide.createIcons();
+        }
+        if (!data.updateAvailable) {
+          showToast(t('version.upToDate'), 'success');
+        }
+      } catch (error) {
+        console.error('Error checking for updates:', error);
+        showToast(t('version.updateFailed'), 'error');
+      } finally {
+        setVersionCheckState('idle', t);
+      }
+    }
+
+    async function triggerVersionUpdate() {
+      setVersionCheckState('updating', t);
+      try {
+        const response = await fetch(`${API_URL}/api/version/update`, { method: 'POST' });
+        const data = await response.json();
+        if (data.status === 'started') {
+          setVersionCheckState('restarting', t);
+          showToast(t('version.restarting'), 'info');
+          setTimeout(() => {
+            const checkInterval = setInterval(async () => {
+              try {
+                const healthResponse = await fetch(`${API_URL}/health`);
+                if (healthResponse.ok) {
+                  clearInterval(checkInterval);
+                  window.location.reload();
+                }
+              } catch {
+                // Server still restarting, keep polling
+              }
+            }, 2000);
+            setTimeout(() => clearInterval(checkInterval), 60000);
+          }, 3000);
+        } else if (data.status === 'permission-denied') {
+          setVersionCheckState('idle', t);
+          showManualUpdateCommand(data.command);
+        } else {
+          showToast(data.error || t('version.updateFailed'), 'error');
+          setVersionCheckState('idle', t);
+        }
+      } catch (error) {
+        console.error('Error triggering update:', error);
+        showToast(t('version.updateFailed'), 'error');
+        setVersionCheckState('idle', t);
+      }
+    }
+
+    function showManualUpdateCommand(command) {
+      const container = document.getElementById('version-manual-update-container');
+      if (!container) return;
+
+      if (container.children.length > 0) {
+        container.innerHTML = '';
+        return;
+      }
+
+      container.innerHTML = `
+        <div class="version-manual-dropdown">
+          <p>${t('version.permissionDenied')}</p>
+          <div class="version-command-row">
+            <code>${command}</code>
+            <button class="btn btn-icon btn-copy" title="${t('version.copyCommand')}" onclick="copyUpdateCommand('${command}')">
+              <i data-lucide="copy"></i>
+            </button>
+          </div>
+        </div>
+      `;
+      refreshIcons();
+    }
+
+    function copyUpdateCommand(command) {
+      navigator.clipboard.writeText(command).then(() => {
+        showToast(t('version.commandCopied'), 'success');
+      });
+    }
+
+    function openMrSheet(encodedMrId) {
+      const mrId = safeDecodeURIComponent(encodedMrId);
+      const mr = mrDataStore.get(mrId);
+      if (!mr) return;
+
+      const contentEl = document.getElementById('mr-sheet-content');
+      contentEl.innerHTML = renderMrSheetContent(mr, t, mr._sheetType);
+
+      document.getElementById('mr-sheet-overlay').classList.add('open');
+      document.getElementById('mr-sheet').classList.add('open');
+      document.body.style.overflow = 'hidden';
+
+      refreshIcons();
+
+      requestAnimationFrame(() => {
+        if (mr.reviews?.length) {
+          drawScoreTimeline('sheet-score-canvas', mr.reviews);
+        }
+        const totalResolved = (mr.openThreads ?? 0) === 0 ? 1 : 0;
+        drawIssuesBreakdown('sheet-issues-canvas', mr.totalBlocking || 0, mr.totalWarnings || 0, totalResolved);
+      });
+    }
+
+    function closeMrSheet() {
+      document.getElementById('mr-sheet-overlay').classList.remove('open');
+      document.getElementById('mr-sheet').classList.remove('open');
+      document.body.style.overflow = '';
+      logsVisible = false;
+    }
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        closeMrSheet();
+        closeDevSheet();
+      }
+    });
+
     // Expose functions to HTML onclick handlers
+    window.checkForUpdates = checkForUpdates;
+    window.triggerVersionUpdate = triggerVersionUpdate;
+    window.copyUpdateCommand = copyUpdateCommand;
+    window.toggleCollapsibleList = toggleCollapsibleList;
     window.checkClaudeStatus = checkClaudeStatus;
     window.toggleLogs = toggleLogs;
     window.toggleStats = toggleStats;
@@ -2079,6 +2621,22 @@
     window.toggleSection = toggleSection;
     window.onUsefulLinkAction = onUsefulLinkAction;
     window.activateOnKeydown = activateOnKeydown;
+    window.handleCleanupClick = handleCleanupClick;
+    window.openMrSheet = openMrSheet;
+    window.closeMrSheet = closeMrSheet;
+    window.openDevSheet = openDevSheet;
+    window.closeDevSheet = closeDevSheet;
+    window.generateAiInsights = generateAiInsights;
+    window.exportInsightsPdf = exportInsightsPdf;
+    window.toggleTeamAnalysis = toggleTeamAnalysis;
+    window.toggleTeamSection = toggleTeamSection;
+    window.clearLogs = clearLogs;
+
+    // Init cleanup section
+    const cleanupContent = document.getElementById('cleanup-content');
+    if (cleanupContent) {
+      cleanupContent.innerHTML = renderCleanupSection(14);
+    }
 
     // Init
     if (typeof Notification !== 'undefined' && Notification.permission === 'default') {
@@ -2102,6 +2660,7 @@
       fetchReviewFiles();
       fetchProjectStats();
       fetchMrTracking();
+      fetchTeamInsights();
     }, 30000);
 
     setInterval(() => {