npm - reviewflow - Versions diffs - 3.20.0 → 3.22.0 - Mend

reviewflow 3.20.0 → 3.22.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 (231) hide show

package/dist/dashboard/index.html CHANGED Viewed

@@ -4,13 +4,25 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Reviewflow Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <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>
+      <div class="logo" aria-label="Reviewflow">
+        <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <rect class="logo-frame" x="2" y="2" width="40" height="40" rx="10"/>
+          <line class="logo-line" x1="10" y1="14" x2="26" y2="14"/>
+          <line class="logo-line logo-line--accent" x1="10" y1="22" x2="20" y2="22"/>
+          <line class="logo-line" x1="10" y1="30" x2="24" y2="30"/>
+          <path class="logo-check" d="M28 26 L31 29 L36 22"/>
+          <circle class="logo-pulse" cx="20" cy="22" r="1.7"/>
+        </svg>
+      </div>
       <h1>Reviewflow</h1>
       <div class="header-actions">
         <div class="version-update-wrapper">
@@ -30,6 +42,43 @@
       </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 class="context-chips" aria-label="Toolchain status">
+        <div class="toolchain-chip">
+          <span class="toolchain-chip-label" id="i18n-card-claude-cli"></span>
+          <div id="claude-status" class="card-claude checking">
+            <span class="status" id="i18n-claude-checking"></span>
+            <span class="version"></span>
+          </div>
+        </div>
+        <div class="toolchain-chip" id="git-cli-card">
+          <span class="toolchain-chip-label" id="git-cli-label"></span>
+          <div id="git-cli-status" class="card-claude checking">
+            <span class="status" id="i18n-git-load-project"></span>
+            <span class="version"></span>
+          </div>
+        </div>
+        <div class="toolchain-chip toolchain-chip-model">
+          <span class="toolchain-chip-label" id="i18n-card-model"></span>
+          <select id="model-select" class="model-select" onchange="changeModel(this.value)">
+            <option value="opus" id="i18n-model-opus"></option>
+            <option value="sonnet" id="i18n-model-sonnet"></option>
+          </select>
+        </div>
+      </div>
+    </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>
@@ -43,45 +92,21 @@
         <div class="card-label" id="i18n-card-completed"></div>
         <div id="completed-count" class="card-value">-</div>
       </div>
-      <div class="card">
-        <div class="card-label" id="i18n-card-claude-cli"></div>
-        <div id="claude-status" class="card-claude checking">
-          <span class="status" id="i18n-claude-checking"></span>
-          <span class="version"></span>
-        </div>
-      </div>
-      <div class="card" id="git-cli-card">
-        <div class="card-label" id="git-cli-label"></div>
-        <div id="git-cli-status" class="card-claude checking">
-          <span class="status" id="i18n-git-load-project"></span>
-          <span class="version"></span>
-        </div>
-      </div>
-      <div class="card">
-        <div class="card-label" id="i18n-card-model"></div>
-        <div class="card-model">
-          <select id="model-select" class="model-select" onchange="changeModel(this.value)">
-            <option value="opus" id="i18n-model-opus"></option>
-            <option value="sonnet" id="i18n-model-sonnet"></option>
-          </select>
-        </div>
-      </div>
     </div>
     <div class="dashboard-layout">
       <aside class="dashboard-sidebar" aria-label="Project tools">
-        <div class="sidebar-language">
-          <label class="sidebar-language-label" for="language-select" id="i18n-card-language"></label>
-          <select id="language-select" class="model-select" onchange="changeLanguage(this.value)">
-            <option value="en">English</option>
-            <option value="fr">Français</option>
-          </select>
-        </div>
+        <button type="button" id="open-settings-modal-btn" class="sidebar-settings-button" hidden>
+          <span class="sidebar-settings-button__prefix">// SETTINGS</span>
+        </button>
-        <nav id="dashboard-tabs" class="dashboard-tab-bar-wrapper" aria-label="Project tabs"></nav>
         <span id="config-status" class="config-status hidden"></span>
-        <div class="focus-strip">
+        <section id="worktree-section" aria-label="Worktree pool"></section>
+      </aside>
+      <main class="dashboard-main">
+        <div class="focus-strip attention-strip" aria-label="Attention indicators">
           <div class="focus-chip focus-now">
             <div class="focus-copy">
               <span class="focus-label" id="i18n-strip-now"></span>
@@ -106,10 +131,6 @@
           <button id="focus-strip-toggle" class="focus-toggle-btn" onclick="toggleFocusStripMode()"></button>
         </div>
-        <section id="worktree-section" aria-label="Worktree pool"></section>
-      </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">
@@ -137,7 +158,11 @@
             <span id="pending-reviews-count" class="badge-count hidden">0</span>
           </div>
           <div id="pending-reviews" class="section-content">
-            <div class="empty-state" id="i18n-empty-pending-reviews"></div>
+            <div class="heartbeat-empty-state" id="pending-reviews-empty-state">
+              <span class="heartbeat-label">// STANDBY</span>
+              <span class="heartbeat-message" id="i18n-empty-pending-reviews">No reviews waiting for confirmation</span>
+              <div class="heartbeat-line-container" id="heartbeat-line" aria-hidden="true"></div>
+            </div>
           </div>
         </div>
@@ -304,16 +329,41 @@
     <div id="dev-sheet-content" class="sheet-content"></div>
   </div>
+  <dialog id="settings-modal" class="settings-modal" aria-labelledby="settings-modal-title"></dialog>
+  <!-- UI language select — kept in DOM for JS wiring; visual control lives in settings modal -->
+  <select id="language-select" style="display:none" aria-hidden="true" onchange="changeLanguage(this.value)">
+    <option value="en">English</option>
+    <option value="fr">Français</option>
+  </select>
   <script type="module">
     import { t, setLanguage, getLanguage } from './modules/i18n.js';
     import { formatTime, formatDuration, formatPhase, formatLogTime } from './modules/formatting.js';
+    import {
+      reducedMotion,
+      animateMount,
+      animateCounter as animateCounterValue,
+      slideTabUnderline,
+      heartbeat,
+      pulseLive,
+      springIn,
+      liftCard,
+      unliftCard,
+      pulseStatusDot,
+      breatheLogo,
+      crossFadeTab,
+      toggleHeight,
+    } from './modules/animations.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, extractGithubSlug } from './modules/cardCounters.js';
     import { collectReviewNotifications, createReviewNotificationState } from './modules/notifications.js';
     import { resolveReviewAssigneeDisplay } from './modules/assignee.js';
     import { buildQueueLanesModel } from './modules/queueLanes.js';
@@ -345,6 +395,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`;
@@ -767,18 +823,23 @@
       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);
+      const chipNow = document.querySelector('.focus-chip.focus-now');
+      const chipNext = document.querySelector('.focus-chip.focus-next');
+      const chipBlocked = document.querySelector('.focus-chip.focus-blocked');
+      if (chipNow) chipNow.dataset.active = nowCount > 0 ? 'true' : 'false';
+      if (chipNext) chipNext.dataset.active = nextCount > 0 ? 'true' : 'false';
+      if (chipBlocked) chipBlocked.dataset.active = blocked > 0 ? 'critical' : 'false';
       const activeReviewsSection = document.getElementById('active-reviews-section');
       const activeReviewsEl = document.getElementById('active-reviews');
       const activeReviewsCount = document.getElementById('active-reviews-count');
@@ -2273,71 +2334,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');
-      if (!select) return;
-      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) {
-        const input = document.getElementById('project-path-input');
-        if (input) 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');
@@ -2353,14 +2349,8 @@
           currentProjectConfig = data.config;
           currentProjectPath = projectPath;
-          addProjectToHistory(projectPath);
           localStorage.setItem(STORAGE_KEY_CURRENT, projectPath);
-          const legacySelect = document.getElementById('project-select');
-          if (legacySelect) legacySelect.value = projectPath;
-          const legacyInput = document.getElementById('project-path-input');
-          if (legacyInput) legacyInput.value = '';
           const shortName = projectPath.split('/').slice(-2).join('/');
           showConfigStatus(`<i data-lucide="check-circle"></i> ${escapeHtml(shortName)}`, 'success');
           refreshIcons();
@@ -2413,43 +2403,6 @@
       refreshIcons();
     }
-    function removeCurrentProject() {
-      const select = document.getElementById('project-select');
-      const path = select?.value ?? currentProjectPath ?? '';
-      if (!path) {
-        showConfigStatus(t('project.noProjectSelected'), 'error');
-        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');
-      }
-    }
-    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
-      }
-    }
     // SPEC-91 — Dashboard Multi-Project Overview
     let availableRepositories = [];
     let activeTabId = 'overview';
@@ -2458,14 +2411,48 @@
       try {
         const response = await fetch(`${API_URL}/api/repositories`);
         const data = await response.json();
-        availableRepositories = Array.isArray(data.repositories)
-          ? data.repositories.filter((repository) => repository.enabled)
-          : [];
+        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;
+        const aliases = [];
+        const slug = extractGithubSlug(repository?.remoteUrl);
+        if (slug) aliases.push(slug);
+        if (repository?.name) aliases.push(repository.name);
+        scope = { kind: 'project', localPath: activeTabId, projectName, aliases };
+      }
+      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;
@@ -2481,6 +2468,7 @@
           handleTabClick(tabId);
         });
       });
+      setupTabUnderline();
     }
     function handleTabClick(tabId) {
@@ -2498,6 +2486,8 @@
       const overviewSection = document.getElementById('overview-section');
       if (overviewSection) overviewSection.classList.remove('hidden');
       renderDashboardTabs();
+      renderCardCounters();
+      syncSettingsButtonVisibility();
       refreshOverviewSection();
     }
@@ -2508,9 +2498,125 @@
       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;
+      }
+    }
+    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/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);
+        const uiLangSelect = dialog.querySelector('#settings-modal-ui-language');
+        if (uiLangSelect) {
+          const hiddenSelect = document.getElementById('language-select');
+          uiLangSelect.value = hiddenSelect ? hiddenSelect.value : getLanguage();
+        }
+        dialog.showModal();
+      } catch (error) {
+        showToast(t('toast.error') || 'Erreur', 'error');
+      }
+    }
+    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';
+        }
+      });
+    }
+    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;
@@ -2525,6 +2631,9 @@
             if (projectPath) activateProjectTab(projectPath);
           });
         });
+        container.querySelectorAll('.project-card__external').forEach((anchor) => {
+          anchor.addEventListener('click', (event) => event.stopPropagation());
+        });
       } catch {
         // Silent: WS reconnection or next refresh will retry
       }
@@ -2532,7 +2641,10 @@
     async function initOverviewAndTabs() {
       await fetchAvailableRepositories();
-      await syncServerRepositories();
+      renderManagePanel();
+      bindManagePanelToggle();
+      bindSettingsModalTrigger();
+      bindSettingsModalDismissals();
       const persistedTab = readActiveTab();
       const repositoryPaths = availableRepositories.map((repository) => repository.localPath);
       if (persistedTab && persistedTab !== 'overview' && repositoryPaths.includes(persistedTab)) {
@@ -2542,6 +2654,202 @@
       }
     }
+    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();
+        const panel = document.getElementById('manage-panel');
+        if (panel) {
+          loadAnimeApi().then((anime) => {
+            if (anime) toggleHeight(panel, isManagePanelOpen, { animeApi: anime });
+          }).catch(() => {});
+        }
+      });
+    }
+    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 {
+          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');
+      }
+    }
     function getMrLabel(platform = activePlatform) {
       return platform === 'github' ? 'PR' : 'MR';
     }
@@ -2681,19 +2989,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');
@@ -2792,9 +3087,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() {
@@ -2952,9 +3244,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;
@@ -3153,7 +3442,169 @@
     }
     refreshWorktreeSection({ animate: true });
-    setInterval(() => refreshWorktreeSection({ animate: false }), 30000);
+    setInterval(() => refreshWorktreeSection({ animate: false }), 5000);
+    // === Operator's Console boot animations ===
+    let heartbeatStop = null;
+    async function bootAnimations() {
+      const anime = await loadAnimeApi();
+      if (!anime) return;
+      // Logo breath — daemon-alive signal
+      const logo = document.querySelector('.logo');
+      if (logo) breatheLogo(logo, { animeApi: anime });
+      // Online status dot pulse
+      const statusDot = document.querySelector('.status-dot');
+      if (statusDot) pulseStatusDot(statusDot, { animeApi: anime });
+      // Metric cards stagger mount
+      const cards = document.querySelectorAll('.cards > .card');
+      if (cards.length > 0) animateMount(cards, { animeApi: anime });
+      // Sidebar slide-in
+      const sidebar = document.querySelector('.dashboard-sidebar');
+      if (sidebar && !reducedMotion()) {
+        anime.animate(sidebar, {
+          opacity: [{ from: 0, to: 1 }],
+          translateX: [{ from: -8, to: 0 }],
+          duration: 280,
+          easing: 'easeOutCubic',
+        });
+      }
+      // Attention strip mount (focus-strip promoted to main)
+      const focusChips = document.querySelectorAll('.focus-chip');
+      if (focusChips.length > 0) animateMount(focusChips, { animeApi: anime, staggerMs: 40, yOffset: 8 });
+      // Heartbeat on pending-reviews empty state
+      startHeartbeat(anime);
+      // Card hover lift — wire to existing cards
+      wireCardHovers(anime);
+      // Settings modal spring-in
+      wireSettingsModal(anime);
+    }
+    function startHeartbeat(anime) {
+      const container = document.getElementById('heartbeat-line');
+      if (!container) return;
+      if (heartbeatStop) heartbeatStop.stop();
+      heartbeatStop = heartbeat(container, { animeApi: anime });
+    }
+    function wireCardHovers(anime) {
+      const cards = document.querySelectorAll('.cards > .card');
+      for (const card of cards) {
+        card.addEventListener('mouseenter', () => liftCard(card, { animeApi: anime }));
+        card.addEventListener('mouseleave', () => unliftCard(card, { animeApi: anime }));
+      }
+    }
+    function wireSettingsModal(anime) {
+      const modal = document.getElementById('settings-modal');
+      if (!modal) return;
+      modal.addEventListener('animationsjs-open', () => springIn(modal, { animeApi: anime }));
+    }
+    // Tab underline glide — set up after tab bar renders
+    let tabUnderlineEl = null;
+    function setupTabUnderline() {
+      const tabBar = document.querySelector('.dashboard-tab-bar');
+      if (!tabBar) return;
+      if (!tabUnderlineEl) {
+        tabUnderlineEl = document.createElement('div');
+        tabUnderlineEl.className = 'tab-underline-indicator';
+        tabBar.style.position = 'relative';
+        tabBar.appendChild(tabUnderlineEl);
+      }
+      const activeTab = tabBar.querySelector('.is-active');
+      if (activeTab) {
+        loadAnimeApi().then((anime) => {
+          if (anime && tabUnderlineEl) slideTabUnderline(tabUnderlineEl, activeTab, { animeApi: anime });
+        }).catch(() => {});
+      }
+    }
+    // Counter animation — wrap renderCardCounters and focus strip to animate changes
+    const originalCounterIds = ['running-count', 'queued-count', 'completed-count', 'focus-now-count', 'focus-next-count', 'focus-blocked-count'];
+    const previousCounterValues = {};
+    function animateCounterChanges(anime) {
+      for (const id of originalCounterIds) {
+        const el = document.getElementById(id);
+        if (!el) continue;
+        if (el.dataset.animating === 'true') continue;
+        const currentText = el.textContent;
+        const currentVal = parseInt(currentText, 10);
+        const prevVal = previousCounterValues[id];
+        if (!Number.isNaN(currentVal) && prevVal !== undefined && prevVal !== currentVal) {
+          el.dataset.animating = 'true';
+          animateCounterValue(el, prevVal, currentVal, {
+            animeApi: anime,
+            onComplete: () => {
+              el.dataset.animating = 'false';
+              previousCounterValues[id] = currentVal;
+            },
+          });
+        } else if (!Number.isNaN(currentVal)) {
+          previousCounterValues[id] = currentVal;
+        }
+      }
+    }
+    // Observe counter element changes
+    async function observeCounters() {
+      const anime = await loadAnimeApi();
+      if (!anime) return;
+      // Snapshot initial values
+      for (const id of originalCounterIds) {
+        const el = document.getElementById(id);
+        if (el) {
+          const val = parseInt(el.textContent, 10);
+          if (!Number.isNaN(val)) previousCounterValues[id] = val;
+        }
+      }
+      const observer = new MutationObserver(() => animateCounterChanges(anime));
+      for (const id of originalCounterIds) {
+        const el = document.getElementById(id);
+        if (el) observer.observe(el, { childList: true, characterData: true, subtree: true });
+      }
+    }
+    // Visibility change — pause/resume heartbeat to save battery
+    document.addEventListener('visibilitychange', () => {
+      loadAnimeApi().then((anime) => {
+        if (!anime) return;
+        if (document.hidden) {
+          if (heartbeatStop) heartbeatStop.stop();
+        } else {
+          startHeartbeat(anime);
+        }
+      }).catch(() => {});
+    });
+    // Boot animations & observers exactly once, regardless of readyState timing
+    let __animationsBooted = false;
+    function bootOnce() {
+      if (__animationsBooted) return;
+      __animationsBooted = true;
+      bootAnimations();
+      observeCounters();
+    }
+    if (document.readyState !== 'loading') {
+      bootOnce();
+    } else {
+      window.addEventListener('DOMContentLoaded', bootOnce);
+    }
   </script>
 </body>
 </html>