reviewflow 3.19.2 → 3.21.0

package/dist/dashboard/index.html

@@ -30,6 +30,20 @@
       </div>
     </header>
 
+    <div class="project-bar" role="region" aria-label="Project navigation">
+      <button type="button" id="manage-projects-toggle" class="manage-projects-toggle" aria-expanded="false" aria-controls="manage-panel">
+        <span class="manage-projects-toggle-label">// MANAGE PROJECTS</span>
+        <i data-lucide="chevron-down" class="manage-projects-toggle-icon"></i>
+      </button>
+      <section id="manage-panel" class="manage-panel" aria-label="Manage projects" data-open="false"></section>
+      <nav id="dashboard-tabs" class="dashboard-tab-bar-wrapper" aria-label="Project tabs"></nav>
+    </div>
+
+    <div id="cards-scope-marker" class="cards-scope-marker" data-scope-kind="overview">
+      <span class="cards-scope-prefix">// SCOPE</span>
+      <span class="cards-scope-label">TOUS LES PROJETS</span>
+    </div>
+
     <div class="cards">
       <div class="card card-priority">
         <div class="card-label" id="i18n-card-running"></div>
@@ -78,19 +92,7 @@
           </select>
         </div>
 
-        <div class="project-loader">
-          <select id="project-select" class="project-input" onchange="onProjectSelect(this.value)">
-            <option value="" id="i18n-project-placeholder"></option>
-          </select>
-          <input type="text" id="project-path-input" class="project-input" value="">
-          <button class="btn btn-primary" onclick="loadProjectConfig()">
-            <i data-lucide="folder-open"></i> <span id="i18n-project-load"></span>
-          </button>
-          <button id="remove-project-btn" class="btn btn-secondary" onclick="removeCurrentProject()">
-            <i data-lucide="trash-2"></i>
-          </button>
-          <span id="config-status" class="config-status hidden"></span>
-        </div>
+        <span id="config-status" class="config-status hidden"></span>
 
         <div class="focus-strip">
           <div class="focus-chip focus-now">
@@ -118,9 +120,15 @@
         </div>
 
         <section id="worktree-section" aria-label="Worktree pool"></section>
+
+        <button type="button" id="open-settings-modal-btn" class="sidebar-settings-button" hidden>
+          <span class="sidebar-settings-button__prefix">// SETTINGS</span>
+        </button>
       </aside>
 
       <main class="dashboard-main">
+        <section id="overview-section" class="overview-section" aria-label="Multi-project overview"></section>
+
         <div id="data-loading-state" class="data-loading hidden" role="status" aria-live="polite">
           <i data-lucide="loader-circle"></i>
           <span id="i18n-loading-data"></span>
@@ -313,14 +321,20 @@
     <div id="dev-sheet-content" class="sheet-content"></div>
   </div>
 
+  <dialog id="settings-modal" class="settings-modal" aria-labelledby="settings-modal-title"></dialog>
+
   <script type="module">
     import { t, setLanguage, getLanguage } from './modules/i18n.js';
     import { formatTime, formatDuration, formatPhase, formatLogTime } from './modules/formatting.js';
     import { escapeHtml, markdownToHtml, sanitizeHttpUrl } from './modules/html.js';
     import { getAgentIcon, icon, refreshIcons } from './modules/icons.js';
-    import { MAX_RECONNECT_ATTEMPTS, RECONNECT_DELAY, STORAGE_KEY_PROJECTS, STORAGE_KEY_CURRENT, STORAGE_KEY_FOCUS_STRIP_MODE, QUALITY_TARGET_SCORE } from './modules/constants.js';
+    import { MAX_RECONNECT_ATTEMPTS, RECONNECT_DELAY, STORAGE_KEY_CURRENT, STORAGE_KEY_FOCUS_STRIP_MODE, QUALITY_TARGET_SCORE } from './modules/constants.js';
+    import { buildTabBarModel, renderTabBarHtml, readActiveTab, writeActiveTab } from './modules/tabBar.js';
+    import { buildManagePanelModel, renderManagePanelHtml, buildOptimisticAddedRow, validateLocalPathInput } from './modules/managePanel.js';
+    import { renderOverviewHtml } from './modules/overview.js';
     import { getDesktopNotificationPayload, shouldNotifyDesktop } from './modules/desktopNotifications.js';
     import { getLoadingPresentation, getQuietRefreshSectionIdentifiers } from './modules/loading.js';
+    import { computeCardCounters } from './modules/cardCounters.js';
     import { collectReviewNotifications, createReviewNotificationState } from './modules/notifications.js';
     import { resolveReviewAssigneeDisplay } from './modules/assignee.js';
     import { buildQueueLanesModel } from './modules/queueLanes.js';
@@ -352,6 +366,12 @@
       fetchBudgetStatus,
       submitBudget,
     } from './modules/budgetSettings.js';
+    import {
+      buildSettingsViewModel,
+      renderSettingsModalHtml,
+      validateExternalLink,
+      extractFormPayload,
+    } from './modules/settingsModal.js';
 
     const API_URL = window.location.origin;
     const WS_URL = `ws://${window.location.host}/ws`;
@@ -774,14 +794,12 @@
       const reviews = currentData.activeReviews.filter(r => r.jobType !== 'followup');
       const followups = currentData.activeReviews.filter(r => r.jobType === 'followup');
 
+      renderCardCounters();
+      const blocked = currentData.pendingFix.length;
       const running = currentData.activeReviews.filter(r => r.status === 'running').length;
       const queued = currentData.activeReviews.filter(r => r.status === 'queued').length;
-      const blocked = currentData.pendingFix.length;
       const nowCount = running + blocked;
       const nextCount = queued + currentData.pendingApproval.length;
-      document.getElementById('running-count').textContent = running;
-      document.getElementById('queued-count').textContent = queued;
-      document.getElementById('completed-count').textContent = currentData.reviewFiles.length;
       document.getElementById('focus-now-count').textContent = String(nowCount);
       document.getElementById('focus-next-count').textContent = String(nextCount);
       document.getElementById('focus-blocked-count').textContent = String(blocked);
@@ -2088,6 +2106,9 @@
                 if (message.type === 'state') {
                   fetchMrTracking();
                 }
+                if (activeTabId === 'overview') {
+                  refreshOverviewSection();
+                }
                 break;
               case 'progress':
                 handleProgressUpdate(message);
@@ -2277,69 +2298,6 @@
     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();
-      const filtered = projects.filter(p => p !== path);
-      filtered.unshift(path);
-      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="">${t('project.selectPlaceholder')}</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');
-      const projectPath = input.value.trim() || select.value;
-
-      if (!projectPath) {
-        showConfigStatus(t('error.selectOrEnterPath'), 'error');
-        return;
-      }
-
-      await loadProjectConfigFromPath(projectPath);
-    }
-
     async function loadProjectConfigFromPath(projectPath) {
       const status = document.getElementById('config-status');
       const info = document.getElementById('config-info');
@@ -2355,12 +2313,8 @@
           currentProjectConfig = data.config;
           currentProjectPath = projectPath;
 
-          addProjectToHistory(projectPath);
           localStorage.setItem(STORAGE_KEY_CURRENT, projectPath);
 
-          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> ${escapeHtml(shortName)}`, 'success');
           refreshIcons();
@@ -2413,59 +2367,434 @@
       refreshIcons();
     }
 
-    function removeCurrentProject() {
-      const select = document.getElementById('project-select');
-      const path = select.value;
-      if (!path) {
-        showConfigStatus(t('project.noProjectSelected'), 'error');
+    // SPEC-91 — Dashboard Multi-Project Overview
+    let availableRepositories = [];
+    let activeTabId = 'overview';
+
+    async function fetchAvailableRepositories() {
+      try {
+        const response = await fetch(`${API_URL}/api/repositories`);
+        const data = await response.json();
+        availableRepositories = Array.isArray(data.repositories) ? data.repositories : [];
+      } catch {
+        availableRepositories = [];
+      }
+    }
+
+    function syncAvailableRepositoriesFromResponse(payload) {
+      availableRepositories = Array.isArray(payload?.repositories) ? payload.repositories : [];
+    }
+
+    function renderCardCounters() {
+      let scope;
+      if (activeTabId === 'overview') {
+        scope = { kind: 'overview' };
+      } else {
+        const repository = availableRepositories.find((r) => r.localPath === activeTabId);
+        const projectName = repository?.name ?? activeTabId.split('/').filter(Boolean).pop() ?? activeTabId;
+        scope = { kind: 'project', localPath: activeTabId, projectName };
+      }
+      const counters = computeCardCounters({
+        activeReviews: currentData.activeReviews,
+        reviewFiles: currentData.reviewFiles,
+        scope,
+      });
+      const runningEl = document.getElementById('running-count');
+      const queuedEl = document.getElementById('queued-count');
+      const completedEl = document.getElementById('completed-count');
+      if (runningEl) runningEl.textContent = counters.running;
+      if (queuedEl) queuedEl.textContent = counters.queued;
+      if (completedEl) completedEl.textContent = counters.completed;
+      const markerEl = document.getElementById('cards-scope-marker');
+      if (markerEl) {
+        markerEl.dataset.scopeKind = counters.markerKind;
+        const labelEl = markerEl.querySelector('.cards-scope-label');
+        if (labelEl) labelEl.textContent = counters.markerLabel;
+      }
+    }
+
+    function renderDashboardTabs() {
+      const container = document.getElementById('dashboard-tabs');
+      if (!container) return;
+      const model = buildTabBarModel({
+        repositories: availableRepositories,
+        activeTabId: activeTabId === 'overview' ? null : activeTabId,
+      });
+      container.innerHTML = renderTabBarHtml(model);
+      container.querySelectorAll('.dashboard-tab').forEach((button) => {
+        button.addEventListener('click', () => {
+          const tabId = button.dataset.tabId;
+          if (!tabId) return;
+          handleTabClick(tabId);
+        });
+      });
+    }
+
+    function handleTabClick(tabId) {
+      if (tabId === 'overview') {
+        activateOverviewTab();
         return;
       }
-      const shortName = path.split('/').slice(-2).join('/');
-      if (confirm(t('confirm.removeProject', { name: shortName }))) {
-        removeProjectFromHistory(path);
-        localStorage.removeItem(STORAGE_KEY_CURRENT);
-        currentProjectPath = null;
-        currentProjectConfig = null;
-        document.getElementById('config-info').classList.add('hidden');
-        showConfigStatus(t('project.removed'), 'success');
+      activateProjectTab(tabId);
+    }
+
+    function activateOverviewTab() {
+      activeTabId = 'overview';
+      writeActiveTab('overview');
+      document.body.classList.add('overview-tab-active');
+      const overviewSection = document.getElementById('overview-section');
+      if (overviewSection) overviewSection.classList.remove('hidden');
+      renderDashboardTabs();
+      renderCardCounters();
+      syncSettingsButtonVisibility();
+      refreshOverviewSection();
+    }
+
+    function activateProjectTab(projectPath) {
+      activeTabId = projectPath;
+      writeActiveTab(projectPath);
+      document.body.classList.remove('overview-tab-active');
+      const overviewSection = document.getElementById('overview-section');
+      if (overviewSection) overviewSection.classList.add('hidden');
+      renderDashboardTabs();
+      renderCardCounters();
+      syncSettingsButtonVisibility();
+      loadProjectConfigFromPath(projectPath);
+    }
+
+    function syncSettingsButtonVisibility() {
+      const button = document.getElementById('open-settings-modal-btn');
+      if (!button) return;
+      if (activeTabId === 'overview') {
+        button.hidden = true;
+      } else {
+        button.hidden = false;
       }
     }
 
-    async function syncServerRepositories() {
+    function resolveActiveProjectName() {
+      if (activeTabId === 'overview') return '—';
+      const repository = availableRepositories.find((r) => r.localPath === activeTabId);
+      if (repository?.name) return repository.name;
+      return activeTabId.split('/').filter(Boolean).pop() ?? activeTabId;
+    }
+
+    async function openSettingsModal() {
+      if (activeTabId === 'overview') return;
+      const dialog = document.getElementById('settings-modal');
+      if (!dialog || typeof dialog.showModal !== 'function') return;
       try {
-        const response = await fetch(`${API_URL}/api/repositories`);
-        const data = await response.json();
-        if (!data.repositories) return;
+        const response = await fetch(
+          `${API_URL}/api/project-config?path=${encodeURIComponent(activeTabId)}`,
+        );
+        const payload = await response.json();
+        if (!payload?.success) {
+          dialog.innerHTML = `<form method="dialog" class="settings-modal__form"><p class="settings-modal__error">${escapeHtml(payload?.error || 'Configuration projet illisible')}</p><div class="settings-modal__actions"><button type="submit" class="settings-modal__cancel">Fermer</button></div></form>`;
+          dialog.showModal();
+          return;
+        }
+        const viewModel = buildSettingsViewModel({
+          config: payload.config,
+          projectName: resolveActiveProjectName(),
+        });
+        dialog.innerHTML = renderSettingsModalHtml(viewModel);
+        bindSettingsModalForm(dialog);
+        dialog.showModal();
+      } catch (error) {
+        showToast(t('toast.error') || 'Erreur', 'error');
+      }
+    }
 
-        const stored = getStoredProjects();
-        for (const repository of data.repositories) {
-          if (repository.enabled && !stored.includes(repository.localPath)) {
-            stored.push(repository.localPath);
+    function closeSettingsModal() {
+      const dialog = document.getElementById('settings-modal');
+      if (dialog && dialog.open) dialog.close();
+    }
+
+    function bindSettingsModalForm(dialog) {
+      const form = dialog.querySelector('form.settings-modal__form');
+      const cancelBtn = dialog.querySelector('.settings-modal__cancel');
+      const errorEl = dialog.querySelector('.settings-modal__error');
+      if (cancelBtn) {
+        cancelBtn.addEventListener('click', (event) => {
+          event.preventDefault();
+          closeSettingsModal();
+        });
+      }
+      if (!form) return;
+      form.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        if (errorEl) errorEl.textContent = '';
+        const formData = new FormData(form);
+        const payload = extractFormPayload(formData);
+        const linkValidation = validateExternalLink(payload.externalLink ?? '');
+        if (!linkValidation.ok) {
+          if (errorEl) errorEl.textContent = linkValidation.message;
+          return;
+        }
+        try {
+          const response = await fetch(
+            `${API_URL}/api/project-config?path=${encodeURIComponent(activeTabId)}`,
+            {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(payload),
+            },
+          );
+          if (!response.ok) {
+            const errorPayload = await response.json().catch(() => ({ error: 'Échec de la sauvegarde' }));
+            if (errorEl) errorEl.textContent = errorPayload?.error || 'Échec de la sauvegarde';
+            return;
           }
+          closeSettingsModal();
+          refreshOverviewSection();
+        } catch {
+          if (errorEl) errorEl.textContent = 'Échec de la sauvegarde';
         }
-        saveProjects(stored);
-        updateProjectSelect();
+      });
+    }
+
+    function bindSettingsModalDismissals() {
+      const dialog = document.getElementById('settings-modal');
+      if (!dialog) return;
+      dialog.addEventListener('click', (event) => {
+        if (event.target === dialog) {
+          closeSettingsModal();
+        }
+      });
+    }
+
+    function bindSettingsModalTrigger() {
+      const button = document.getElementById('open-settings-modal-btn');
+      if (!button) return;
+      button.addEventListener('click', () => {
+        openSettingsModal();
+      });
+    }
+
+    async function refreshOverviewSection() {
+      const container = document.getElementById('overview-section');
+      if (!container) return;
+      if (activeTabId !== 'overview') return;
+      try {
+        const response = await fetch(`${API_URL}/api/overview`);
+        const viewModel = await response.json();
+        container.innerHTML = renderOverviewHtml(viewModel);
+        container.querySelectorAll('.overview-project-card').forEach((card) => {
+          card.addEventListener('click', () => {
+            const projectPath = card.dataset.projectPath;
+            if (projectPath) activateProjectTab(projectPath);
+          });
+        });
+        container.querySelectorAll('.project-card__external').forEach((anchor) => {
+          anchor.addEventListener('click', (event) => event.stopPropagation());
+        });
       } catch {
-        // Server unreachable — use localStorage only
+        // Silent: WS reconnection or next refresh will retry
       }
     }
 
-    async function initProjectLoader() {
-      await syncServerRepositories();
-      updateProjectSelect();
-      const lastProject = localStorage.getItem(STORAGE_KEY_CURRENT);
-      if (lastProject) {
-        loadProjectConfigFromPath(lastProject);
+    async function initOverviewAndTabs() {
+      await fetchAvailableRepositories();
+      renderManagePanel();
+      bindManagePanelToggle();
+      bindSettingsModalTrigger();
+      bindSettingsModalDismissals();
+      const persistedTab = readActiveTab();
+      const repositoryPaths = availableRepositories.map((repository) => repository.localPath);
+      if (persistedTab && persistedTab !== 'overview' && repositoryPaths.includes(persistedTab)) {
+        activateProjectTab(persistedTab);
       } else {
-        const storedProjects = getStoredProjects();
-        if (storedProjects.length > 0) {
-          loadProjectConfigFromPath(storedProjects[0]);
+        activateOverviewTab();
+      }
+    }
+
+    let isManagePanelOpen = false;
+
+    function renderManagePanel() {
+      const panel = document.getElementById('manage-panel');
+      if (!panel) return;
+      const model = buildManagePanelModel({ repositories: availableRepositories, isOpen: isManagePanelOpen });
+      panel.innerHTML = renderManagePanelHtml(model);
+      panel.dataset.open = isManagePanelOpen ? 'true' : 'false';
+      bindManagePanelHandlers();
+    }
+
+    function bindManagePanelToggle() {
+      const toggle = document.getElementById('manage-projects-toggle');
+      if (!toggle || toggle.dataset.bound === 'true') return;
+      toggle.dataset.bound = 'true';
+      toggle.addEventListener('click', () => {
+        isManagePanelOpen = !isManagePanelOpen;
+        toggle.setAttribute('aria-expanded', isManagePanelOpen ? 'true' : 'false');
+        renderManagePanel();
+      });
+    }
+
+    function bindManagePanelHandlers() {
+      const panel = document.getElementById('manage-panel');
+      if (!panel) return;
+      const form = panel.querySelector('form.add-form');
+      if (form) {
+        form.addEventListener('submit', handleAddProjectSubmit);
+        const input = form.querySelector('input.add-form-input');
+        if (input) {
+          input.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+              input.value = '';
+              clearManagePanelError();
+            }
+          });
+        }
+      }
+      panel.querySelectorAll('.manage-row-delete').forEach((button) => {
+        button.addEventListener('click', () => {
+          const row = button.closest('.manage-row');
+          const localPath = row?.dataset.localPath;
+          if (localPath) handleDeleteProject(localPath, row);
+        });
+      });
+      panel.querySelectorAll('.manage-row-toggle').forEach((button) => {
+        button.addEventListener('click', () => {
+          const row = button.closest('.manage-row');
+          const localPath = row?.dataset.localPath;
+          const currentlyEnabled = row?.dataset.enabled === 'true';
+          if (localPath) handleToggleProject(localPath, !currentlyEnabled);
+        });
+      });
+    }
+
+    function setManagePanelError(message) {
+      const panel = document.getElementById('manage-panel');
+      const target = panel?.querySelector('[data-role="error-message"]');
+      if (!target) return;
+      target.textContent = message;
+      target.hidden = false;
+    }
+
+    function clearManagePanelError() {
+      const panel = document.getElementById('manage-panel');
+      const target = panel?.querySelector('[data-role="error-message"]');
+      if (!target) return;
+      target.textContent = '';
+      target.hidden = true;
+    }
+
+    function flashAddFormError() {
+      const form = document.querySelector('#manage-panel form.add-form');
+      if (!form) return;
+      form.classList.remove('is-error');
+      requestAnimationFrame(() => form.classList.add('is-error'));
+      setTimeout(() => form.classList.remove('is-error'), 320);
+    }
+
+    function flashAddFormSuccess() {
+      const input = document.querySelector('#manage-panel input.add-form-input');
+      if (!input) return;
+      input.classList.remove('is-success');
+      requestAnimationFrame(() => input.classList.add('is-success'));
+      setTimeout(() => input.classList.remove('is-success'), 1500);
+    }
+
+    function flashTabEntering(localPath) {
+      const tab = document.querySelector(`.dashboard-tab[data-tab-id="${CSS.escape(localPath)}"]`);
+      if (!tab) return;
+      tab.classList.add('is-entering');
+      setTimeout(() => tab.classList.remove('is-entering'), 1500);
+    }
+
+    async function handleAddProjectSubmit(event) {
+      event.preventDefault();
+      const form = event.currentTarget;
+      const input = form.querySelector('input.add-form-input');
+      const submit = form.querySelector('button.add-form-submit');
+      const rawValue = input ? input.value : '';
+      const validation = validateLocalPathInput(rawValue);
+      clearManagePanelError();
+      if (!validation.ok) {
+        const message = validation.reason === 'empty' ? 'Chemin du projet requis' : 'Le chemin doit être absolu';
+        setManagePanelError(message);
+        flashAddFormError();
+        return;
+      }
+      const trimmed = rawValue.trim();
+      if (submit) submit.classList.add('is-busy');
+      try {
+        const response = await fetch(`${API_URL}/api/repositories`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ localPath: trimmed }),
+        });
+        const body = await response.json().catch(() => ({}));
+        if (!response.ok) {
+          setManagePanelError(typeof body?.error === 'string' ? body.error : 'Erreur inconnue');
+          flashAddFormError();
+          return;
+        }
+        syncAvailableRepositoriesFromResponse(body);
+        if (input) input.value = '';
+        flashAddFormSuccess();
+        renderManagePanel();
+        renderDashboardTabs();
+        flashTabEntering(trimmed);
+      } catch {
+        setManagePanelError('Erreur réseau');
+        flashAddFormError();
+      } finally {
+        if (submit) submit.classList.remove('is-busy');
+      }
+    }
+
+    async function handleDeleteProject(localPath, rowElement) {
+      try {
+        const response = await fetch(`${API_URL}/api/repositories?localPath=${encodeURIComponent(localPath)}`, {
+          method: 'DELETE',
+        });
+        const body = await response.json().catch(() => ({}));
+        if (!response.ok) {
+          setManagePanelError(typeof body?.error === 'string' ? body.error : 'Erreur inconnue');
+          return;
+        }
+        syncAvailableRepositoriesFromResponse(body);
+        if (rowElement) {
+          rowElement.classList.add('is-leaving');
+          setTimeout(() => {
+            renderManagePanel();
+          }, 250);
+        } else {
+          renderManagePanel();
+        }
+        const tab = document.querySelector(`.dashboard-tab[data-tab-id="${CSS.escape(localPath)}"]`);
+        if (tab) {
+          tab.classList.add('is-leaving');
+          setTimeout(() => renderDashboardTabs(), 250);
         } 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>`;
+          renderDashboardTabs();
+        }
+        if (activeTabId === localPath) {
+          activateOverviewTab();
         }
+      } catch {
+        setManagePanelError('Erreur réseau');
+      }
+    }
+
+    async function handleToggleProject(localPath, enabled) {
+      try {
+        const response = await fetch(`${API_URL}/api/repositories?localPath=${encodeURIComponent(localPath)}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ enabled }),
+        });
+        const body = await response.json().catch(() => ({}));
+        if (!response.ok) {
+          setManagePanelError(typeof body?.error === 'string' ? body.error : 'Erreur inconnue');
+          return;
+        }
+        syncAvailableRepositoriesFromResponse(body);
+        renderManagePanel();
+        renderDashboardTabs();
+      } catch {
+        setManagePanelError('Erreur réseau');
       }
     }
 
@@ -2608,19 +2937,6 @@
       const modelSonnet = document.getElementById('i18n-model-sonnet');
       if (modelSonnet) modelSonnet.textContent = t('model.sonnet');
 
-      // Project loader
-      const projectPlaceholder = document.getElementById('i18n-project-placeholder');
-      if (projectPlaceholder) projectPlaceholder.textContent = t('project.selectPlaceholder');
-
-      const projectPathInput = document.getElementById('project-path-input');
-      if (projectPathInput) projectPathInput.placeholder = t('project.inputPlaceholder');
-
-      const projectLoad = document.getElementById('i18n-project-load');
-      if (projectLoad) projectLoad.textContent = t('project.load');
-
-      const removeProjectBtn = document.getElementById('remove-project-btn');
-      if (removeProjectBtn) removeProjectBtn.title = t('project.removeTooltip');
-
       // Login sections
       const claudeLoginTitle = document.getElementById('i18n-claude-login-title');
       if (claudeLoginTitle) claudeLoginTitle.textContent = t('login.claude.title');
@@ -2719,9 +3035,6 @@
 
       const modalConfirm = document.getElementById('cancel-modal-confirm');
       if (modalConfirm) modalConfirm.textContent = t('modal.confirm');
-
-      // Update project select placeholder (re-render the select)
-      updateProjectSelect();
     }
 
     async function checkForUpdates() {
@@ -2879,9 +3192,6 @@
     window.toggleStats = toggleStats;
     window.changeModel = changeModel;
     window.changeLanguage = changeLanguage;
-    window.onProjectSelect = onProjectSelect;
-    window.loadProjectConfig = loadProjectConfig;
-    window.removeCurrentProject = removeCurrentProject;
     window.toggleReviewAccordion = toggleReviewAccordion;
     window.toggleReviewDescription = toggleReviewDescription;
     window.deleteReviewFile = deleteReviewFile;
@@ -2926,7 +3236,7 @@
     checkClaudeStatus();
     loadModelSetting();
     loadLanguageSetting();
-    initProjectLoader();
+    initOverviewAndTabs();
     refreshBudgetTile();
     initBudgetSlider();