reviewflow 3.17.1 → 3.19.0

package/dist/dashboard/index.html

@@ -66,204 +66,227 @@
           </select>
         </div>
       </div>
-      <div class="card">
-        <div class="card-label" id="i18n-card-language"></div>
-        <div class="card-model">
+    </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>
-      </div>
-    </div>
 
-    <div class="focus-strip">
-      <div class="focus-chip focus-now">
-        <div class="focus-copy">
-          <span class="focus-label" id="i18n-strip-now"></span>
-          <span class="focus-meta" id="i18n-strip-now-meta"></span>
-        </div>
-        <span class="focus-value" id="focus-now-count">-</span>
-      </div>
-      <div class="focus-chip focus-next">
-        <div class="focus-copy">
-          <span class="focus-label" id="i18n-strip-next"></span>
-          <span class="focus-meta" id="i18n-strip-next-meta"></span>
-        </div>
-        <span class="focus-value" id="focus-next-count">-</span>
-      </div>
-      <div class="focus-chip focus-blocked">
-        <div class="focus-copy">
-          <span class="focus-label" id="i18n-strip-blocked"></span>
-          <span class="focus-meta" id="i18n-strip-blocked-meta"></span>
+        <div 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 class="focus-value" id="focus-blocked-count">-</span>
-      </div>
-      <button id="focus-strip-toggle" class="focus-toggle-btn" onclick="toggleFocusStripMode()"></button>
-    </div>
 
-    <div id="data-loading-state" class="data-loading hidden" role="status" aria-live="polite">
-      <i data-lucide="loader-circle"></i>
-      <span id="i18n-loading-data"></span>
-    </div>
+        <div class="focus-strip">
+          <div class="focus-chip focus-now">
+            <div class="focus-copy">
+              <span class="focus-label" id="i18n-strip-now"></span>
+              <span class="focus-meta" id="i18n-strip-now-meta"></span>
+            </div>
+            <span class="focus-value" id="focus-now-count">-</span>
+          </div>
+          <div class="focus-chip focus-next">
+            <div class="focus-copy">
+              <span class="focus-label" id="i18n-strip-next"></span>
+              <span class="focus-meta" id="i18n-strip-next-meta"></span>
+            </div>
+            <span class="focus-value" id="focus-next-count">-</span>
+          </div>
+          <div class="focus-chip focus-blocked">
+            <div class="focus-copy">
+              <span class="focus-label" id="i18n-strip-blocked"></span>
+              <span class="focus-meta" id="i18n-strip-blocked-meta"></span>
+            </div>
+            <span class="focus-value" id="focus-blocked-count">-</span>
+          </div>
+          <button id="focus-strip-toggle" class="focus-toggle-btn" onclick="toggleFocusStripMode()"></button>
+        </div>
 
-    <div class="project-loader">
-      <select id="project-select" class="project-input" style="min-width: 350px;" onchange="onProjectSelect(this.value)">
-        <option value="" id="i18n-project-placeholder"></option>
-      </select>
-      <input type="text" id="project-path-input" class="project-input" style="min-width: 250px;"
-             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>
-    <div id="config-info" class="config-info hidden"></div>
+        <section id="worktree-section" aria-label="Worktree pool"></section>
+      </aside>
 
-    <div id="claude-login-section" class="login-instructions hidden">
-      <strong><i data-lucide="alert-triangle"></i> <span id="i18n-claude-login-title"></span></strong>
-      <p style="margin-top: 0.5rem;" id="i18n-claude-login-instruction"></p>
-      <p style="margin-top: 0.5rem;"><code>claude login</code></p>
-      <p style="margin-top: 0.5rem; font-size: 0.875rem; color: #a1a1aa;" id="i18n-claude-login-reload"></p>
-    </div>
+      <main class="dashboard-main">
+        <div id="data-loading-state" class="data-loading hidden" role="status" aria-live="polite">
+          <i data-lucide="loader-circle"></i>
+          <span id="i18n-loading-data"></span>
+        </div>
 
-    <div id="git-login-section" class="login-instructions hidden">
-      <strong id="git-login-title"><i data-lucide="alert-triangle"></i> <span id="i18n-git-login-title"></span></strong>
-      <div style="margin-top: 0.75rem;" id="git-login-instructions"></div>
-    </div>
+        <div id="config-info" class="config-info hidden"></div>
 
-    <div id="logs-section" class="section hidden">
-      <div class="section-header">
-        <i data-lucide="scroll-text"></i> <span id="i18n-section-logs"></span>
-        <span id="error-count" class="badge-count hidden"></span>
-      </div>
-      <div id="logs-content" class="section-content logs">
-        <div class="empty-state" id="i18n-empty-logs"></div>
-      </div>
-    </div>
+        <div id="claude-login-section" class="login-instructions hidden">
+          <strong><i data-lucide="alert-triangle"></i> <span id="i18n-claude-login-title"></span></strong>
+          <p style="margin-top: 0.5rem;" id="i18n-claude-login-instruction"></p>
+          <p style="margin-top: 0.5rem;"><code>claude login</code></p>
+          <p style="margin-top: 0.5rem; font-size: 0.875rem; color: #a1a1aa;" id="i18n-claude-login-reload"></p>
+        </div>
 
-    <div id="stats-section" class="section hidden">
-      <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="git-login-section" class="login-instructions hidden">
+          <strong id="git-login-title"><i data-lucide="alert-triangle"></i> <span id="i18n-git-login-title"></span></strong>
+          <div style="margin-top: 0.75rem;" id="git-login-instructions"></div>
+        </div>
 
-    <div id="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="pending-reviews-section">
+          <div class="section-header">
+            <i data-lucide="hourglass"></i> <span id="i18n-section-pending-reviews"></span>
+            <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>
+        </div>
 
-    <div id="token-usage-section" class="section hidden">
-      <div class="section-header">
-        <i data-lucide="coins"></i> <span>Claude token usage</span>
-      </div>
-      <div id="token-usage-content" class="section-content">
-        <div class="empty-state">Loading…</div>
-      </div>
-    </div>
+        <div id="logs-section" class="section hidden">
+          <div class="section-header">
+            <i data-lucide="scroll-text"></i> <span id="i18n-section-logs"></span>
+            <span id="error-count" class="badge-count hidden"></span>
+          </div>
+          <div id="logs-content" class="section-content logs">
+            <div class="empty-state" id="i18n-empty-logs"></div>
+          </div>
+        </div>
 
-    <div id="budget-section" class="section">
-      <div class="section-header">
-        <i data-lucide="wallet"></i> <span>Monthly Claude budget</span>
-      </div>
-      <div class="section-content">
-        <div id="budget-tile">
-          <div class="empty-state">Loading…</div>
+        <div id="stats-section" class="section hidden">
+          <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 class="budget-slider-row">
-          <label for="budget-slider" id="budget-slider-label">Cap: <span id="budget-slider-value">$200</span></label>
-          <input type="range" id="budget-slider" min="0" max="600" step="10" value="200" />
-          <button id="budget-slider-submit" type="button">Apply</button>
-          <span id="budget-slider-status" class="budget-slider-status"></span>
+
+        <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>
-    </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>
-        <span id="active-reviews-count" class="badge-count hidden">0</span>
-      </div>
-      <div id="active-reviews" class="section-content">
-        <div class="empty-state" id="i18n-empty-active-reviews"></div>
-      </div>
-    </div>
+        <div id="claude-economics-section" class="section">
+          <div class="section-header clickable" onclick="toggleSection('claude-economics-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+            <i data-lucide="circuit-board"></i> <span id="i18n-section-claude-economics"></span>
+            <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
+          </div>
+          <div class="section-content economics-content hidden">
+            <div class="economics-panel">
+              <div class="economics-panel-header">
+                <span class="economics-panel-title" id="i18n-economics-token-usage"></span>
+              </div>
+              <div class="economics-panel-body" id="token-usage-content">
+                <div class="empty-state">Loading…</div>
+              </div>
+            </div>
 
-    <div class="section hidden" id="active-followups-section">
-      <div class="section-header clickable" onclick="toggleSection('active-followups-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
-        <i data-lucide="refresh-cw"></i> <span id="i18n-section-active-followups"></span>
-        <span id="active-followups-count" class="badge-count hidden">0</span>
-        <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
-      </div>
-      <div id="active-followups" class="section-content">
-        <div class="empty-state" id="i18n-empty-active-followups"></div>
-      </div>
-    </div>
+            <div class="economics-panel">
+              <div class="economics-panel-header">
+                <span class="economics-panel-title" id="i18n-economics-monthly-budget"></span>
+              </div>
+              <div class="economics-panel-body">
+                <div id="budget-tile">
+                  <div class="empty-state">Loading…</div>
+                </div>
+                <div class="budget-slider-row">
+                  <label for="budget-slider" id="budget-slider-label">Cap: <span id="budget-slider-value">$200</span></label>
+                  <input type="range" id="budget-slider" min="0" max="600" step="10" value="200" />
+                  <button id="budget-slider-submit" type="button">Apply</button>
+                  <span id="budget-slider-status" class="budget-slider-status"></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
 
-    <div class="section hidden" id="pending-fix-section">
-      <div class="section-header">
-        <i data-lucide="wrench"></i> <span id="i18n-section-pending-fix"></span>
-        <span id="pending-fix-count" class="badge-count hidden">0</span>
-        <button id="sync-threads-btn" class="btn-icon btn-sync" onclick="syncGitLabThreads()">
-          <i data-lucide="refresh-cw"></i>
-        </button>
-      </div>
-      <div id="pending-fix-reviews" class="section-content">
-        <div class="empty-state" id="i18n-empty-pending-fix"></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>
+            <span id="active-reviews-count" class="badge-count hidden">0</span>
+          </div>
+          <div id="active-reviews" class="section-content">
+            <div class="empty-state" id="i18n-empty-active-reviews"></div>
+          </div>
+        </div>
 
-    <div class="section hidden" id="pending-approval-section">
-      <div class="section-header clickable" onclick="toggleSection('pending-approval-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
-        <i data-lucide="circle-check"></i> <span id="i18n-section-pending-approval"></span>
-        <span id="pending-approval-count" class="badge-count hidden">0</span>
-        <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
-      </div>
-      <div id="pending-approval-reviews" class="section-content">
-        <div class="empty-state" id="i18n-empty-pending-approval"></div>
-      </div>
-    </div>
+        <div class="section hidden" id="active-followups-section">
+          <div class="section-header clickable" onclick="toggleSection('active-followups-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+            <i data-lucide="refresh-cw"></i> <span id="i18n-section-active-followups"></span>
+            <span id="active-followups-count" class="badge-count hidden">0</span>
+            <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
+          </div>
+          <div id="active-followups" class="section-content">
+            <div class="empty-state" id="i18n-empty-active-followups"></div>
+          </div>
+        </div>
 
-    <div class="section" id="completed-reviews-section">
-      <div class="section-header clickable" onclick="toggleSection('completed-reviews-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
-        <i data-lucide="file-check"></i> <span id="i18n-section-completed-reviews"></span>
-        <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
-      </div>
-      <div id="recent-reviews" class="section-content">
-        <div class="empty-state" id="i18n-empty-loading"></div>
-      </div>
-    </div>
+        <div class="section hidden" id="pending-fix-section">
+          <div class="section-header">
+            <i data-lucide="wrench"></i> <span id="i18n-section-pending-fix"></span>
+            <span id="pending-fix-count" class="badge-count hidden">0</span>
+            <button id="sync-threads-btn" class="btn-icon btn-sync" onclick="syncGitLabThreads()">
+              <i data-lucide="refresh-cw"></i>
+            </button>
+          </div>
+          <div id="pending-fix-reviews" class="section-content">
+            <div class="empty-state" id="i18n-empty-pending-fix"></div>
+          </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="section hidden" id="pending-approval-section">
+          <div class="section-header clickable" onclick="toggleSection('pending-approval-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+            <i data-lucide="circle-check"></i> <span id="i18n-section-pending-approval"></span>
+            <span id="pending-approval-count" class="badge-count hidden">0</span>
+            <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
+          </div>
+          <div id="pending-approval-reviews" class="section-content">
+            <div class="empty-state" id="i18n-empty-pending-approval"></div>
+          </div>
+        </div>
+
+        <div class="section" id="completed-reviews-section">
+          <div class="section-header clickable" onclick="toggleSection('completed-reviews-section')" role="button" tabindex="0" onkeydown="activateOnKeydown(event)">
+            <i data-lucide="file-check"></i> <span id="i18n-section-completed-reviews"></span>
+            <span class="section-toggle collapsed"><i data-lucide="chevron-down"></i></span>
+          </div>
+          <div id="recent-reviews" class="section-content">
+            <div class="empty-state" id="i18n-empty-loading"></div>
+          </div>
+        </div>
 
-    <section id="worktree-section" aria-label="Worktree pool"></section>
+        <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>
-      <span id="session-metrics"></span>
+        <div class="refresh-info">
+          <span id="connection-mode"></span> • <span id="i18n-connection-fallback"></span>
+          <span class="refresh-separator"> • </span>
+          <span id="session-metrics"></span>
+        </div>
+      </main>
     </div>
   </div>
 
@@ -313,6 +336,7 @@
     import { renderDeveloperSheetContent, drawRadarChart } from './modules/developerSheet.js';
     import { buildInsightsReport } from './modules/insightsReport.js';
     import { fetchTokenUsageSummary, renderTokenUsageTile } from './modules/tokenUsage.js';
+    import { buildPendingReviewsModel, renderPendingReviewsHtml } from './modules/pendingReviews.js';
     import {
       renderWorktreeSection,
       fetchWorktreeOverview,
@@ -337,7 +361,7 @@
     let reconnectAttempts = 0;
     let logsVisible = false;
 
-    let currentData = { activeReviews: [], recentReviews: [], logs: [], reviewFiles: [], pendingFix: [], pendingApproval: [] };
+    let currentData = { activeReviews: [], recentReviews: [], logs: [], reviewFiles: [], pendingFix: [], pendingApproval: [], pendingReviews: [] };
     const mrDataStore = new Map();
     let loadedReviews = {};
     let statsCollapsed = true;
@@ -348,7 +372,7 @@
     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'];
+    const secondarySections = ['active-followups-section', 'pending-approval-section', 'completed-reviews-section', 'claude-economics-section'];
     const sectionExpandedState = Object.fromEntries(secondarySections.map((sectionIdentifier) => [sectionIdentifier, false]));
     const quietRefreshSections = [
       'active-reviews-section',
@@ -1801,6 +1825,90 @@
       refreshIcons();
     }
 
+    async function fetchPendingReviews() {
+      try {
+        const response = await fetch(`${API_URL}/api/pending-reviews`);
+        const data = await response.json();
+        currentData.pendingReviews = Array.isArray(data?.pendingReviews) ? data.pendingReviews : [];
+        updatePendingReviewsUI();
+      } catch (error) {
+        console.error('Error fetching pending reviews:', error);
+      }
+    }
+
+    function updatePendingReviewsUI() {
+      const section = document.getElementById('pending-reviews-section');
+      const container = document.getElementById('pending-reviews');
+      const countBadge = document.getElementById('pending-reviews-count');
+      if (!container || !countBadge || !section) return;
+
+      const model = buildPendingReviewsModel(currentData.pendingReviews || []);
+      container.innerHTML = renderPendingReviewsHtml(model);
+
+      if (model.isEmpty) {
+        countBadge.classList.add('hidden');
+        countBadge.textContent = '0';
+      } else {
+        countBadge.textContent = String(model.count);
+        countBadge.classList.remove('hidden');
+      }
+
+      container.querySelectorAll('.btn-confirm-pending').forEach((btn) => {
+        const pendingId = btn.getAttribute('data-pending-id');
+        if (!pendingId) return;
+        btn.addEventListener('click', () => confirmPendingReview(pendingId), { once: true });
+      });
+      container.querySelectorAll('.btn-dismiss-pending').forEach((btn) => {
+        const pendingId = btn.getAttribute('data-pending-id');
+        if (!pendingId) return;
+        btn.addEventListener('click', () => dismissPendingReview(pendingId), { once: true });
+      });
+
+      refreshIcons();
+    }
+
+    async function confirmPendingReview(pendingId) {
+      try {
+        const response = await fetch(`${API_URL}/api/pending-reviews/${encodeURIComponent(pendingId)}/confirm`, {
+          method: 'POST',
+        });
+        const data = await response.json();
+        if (response.ok) {
+          showToast('Review confirmée', 'info');
+        } else if (data?.message) {
+          showToast(data.message, 'error');
+        } else {
+          showToast('Erreur lors de la confirmation', 'error');
+        }
+      } catch (error) {
+        console.error('Error confirming pending review:', error);
+        showToast('Erreur lors de la confirmation', 'error');
+      } finally {
+        await fetchPendingReviews();
+      }
+    }
+
+    async function dismissPendingReview(pendingId) {
+      try {
+        const response = await fetch(`${API_URL}/api/pending-reviews/${encodeURIComponent(pendingId)}`, {
+          method: 'DELETE',
+        });
+        const data = await response.json();
+        if (response.ok) {
+          showToast('Review ignorée', 'info');
+        } else if (data?.message) {
+          showToast(data.message, 'error');
+        } else {
+          showToast('Erreur lors du rejet', 'error');
+        }
+      } catch (error) {
+        console.error('Error dismissing pending review:', error);
+        showToast('Erreur lors du rejet', 'error');
+      } finally {
+        await fetchPendingReviews();
+      }
+    }
+
     async function fetchMrTracking() {
       setLoadingFlag('mrTracking', true);
       if (!currentProjectPath) {
@@ -2027,6 +2135,9 @@
                 }
                 break;
               }
+              case 'pending-changed':
+                fetchPendingReviews();
+                break;
               case 'pong':
                 break;
             }
@@ -2273,7 +2384,6 @@
 
           document.getElementById('stats-section').classList.remove('hidden');
           document.getElementById('team-section').classList.remove('hidden');
-          document.getElementById('token-usage-section').classList.remove('hidden');
 
           const platformIcon = activePlatform === 'gitlab' ? '<i data-lucide="gitlab"></i> GitLab' : '<i data-lucide="github"></i> GitHub';
           info.innerHTML = `
@@ -2537,6 +2647,9 @@
       const sectionTeam = document.getElementById('i18n-section-team');
       if (sectionTeam) sectionTeam.textContent = t('team.title');
 
+      const sectionPendingReviews = document.getElementById('i18n-section-pending-reviews');
+      if (sectionPendingReviews) sectionPendingReviews.textContent = t('section.pendingReviews');
+
       const sectionActiveReviews = document.getElementById('i18n-section-active-reviews');
       if (sectionActiveReviews) sectionActiveReviews.textContent = t('section.activeReviews');
 
@@ -2552,6 +2665,15 @@
       const sectionCompletedReviews = document.getElementById('i18n-section-completed-reviews');
       if (sectionCompletedReviews) sectionCompletedReviews.textContent = t('section.completedReviews');
 
+      const sectionClaudeEconomics = document.getElementById('i18n-section-claude-economics');
+      if (sectionClaudeEconomics) sectionClaudeEconomics.textContent = t('section.claudeEconomics');
+
+      const economicsTokenUsage = document.getElementById('i18n-economics-token-usage');
+      if (economicsTokenUsage) economicsTokenUsage.textContent = t('economics.tokenUsage');
+
+      const economicsMonthlyBudget = document.getElementById('i18n-economics-monthly-budget');
+      if (economicsMonthlyBudget) economicsMonthlyBudget.textContent = t('economics.monthlyBudget');
+
       // Empty states
       const emptyLogs = document.getElementById('i18n-empty-logs');
       if (emptyLogs) emptyLogs.textContent = t('empty.logs');
@@ -2559,6 +2681,9 @@
       const emptyStats = document.getElementById('i18n-empty-stats');
       if (emptyStats) emptyStats.textContent = t('empty.stats');
 
+      const emptyPendingReviews = document.getElementById('i18n-empty-pending-reviews');
+      if (emptyPendingReviews) emptyPendingReviews.textContent = t('empty.pendingReviews');
+
       const emptyActiveReviews = document.getElementById('i18n-empty-active-reviews');
       if (emptyActiveReviews) emptyActiveReviews.textContent = t('empty.activeReviews');
 
@@ -2813,9 +2938,12 @@
       fetchReviewFiles();
       fetchProjectStats();
       fetchMrTracking();
+      fetchPendingReviews();
       fetchTeamInsights();
     }, 30000);
 
+    fetchPendingReviews();
+
     setInterval(() => {
       document.querySelectorAll('.review-item').forEach(el => {
         const jobId = el.dataset.jobId;

package/dist/dashboard/modules/budgetSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"budgetSettings.d.ts","sourceRoot":"","sources":["../../../src/dashboard/modules/budgetSettings.js"],"names":[],"mappings":"AAoDA;;;;;GAKG;AACH,4CAHW,qBAAqB,GACnB,MAAM,CA0BlB;AAED;;;;;;GAMG;AACH,kDAHW,OAAO,GACL,qBAAqB,GAAG,IAAI,CASxC;AAED;;;;;;GAMG;AACH,oDAHW,OAAO,GACL,qBAAqB,GAAG,IAAI,CASxC;AAED;;;;;GAKG;AACH,wCAHW,OAAO,KAAK,GACV,OAAO,CAAC,qBAAqB,CAAC,CAQ1C;AAED;;;;;GAKG;AACH,8CAHW,OAAO,KAAK,GACV,OAAO,CAAC,qBAAqB,CAAC,CAQ1C;AAED;;;;;;GAMG;AACH,uCAJW,MAAM,cACN,OAAO,KAAK,GACV,OAAO,CAAC,kBAAkB,CAAC,CASvC;;uBAtJa,MAAM;0BACN,MAAM;2BACN,MAAM;0BACN,MAAM;uBACN,MAAM;cACN,OAAO;iBACP,MAAM;;;cAKN,MAAM;cACN,QAAQ,GAAC,QAAQ;iBACjB,MAAM;cACN,MAAM;iBACN,MAAM;;;cAKN,MAAM;;;aAKN,OAAO"}
+{"version":3,"file":"budgetSettings.d.ts","sourceRoot":"","sources":["../../../src/dashboard/modules/budgetSettings.js"],"names":[],"mappings":"AAoDA;;;;;GAKG;AACH,4CAHW,qBAAqB,GACnB,MAAM,CAwBlB;AAED;;;;;;GAMG;AACH,kDAHW,OAAO,GACL,qBAAqB,GAAG,IAAI,CASxC;AAED;;;;;;GAMG;AACH,oDAHW,OAAO,GACL,qBAAqB,GAAG,IAAI,CASxC;AAED;;;;;GAKG;AACH,wCAHW,OAAO,KAAK,GACV,OAAO,CAAC,qBAAqB,CAAC,CAQ1C;AAED;;;;;GAKG;AACH,8CAHW,OAAO,KAAK,GACV,OAAO,CAAC,qBAAqB,CAAC,CAQ1C;AAED;;;;;;GAMG;AACH,uCAJW,MAAM,cACN,OAAO,KAAK,GACV,OAAO,CAAC,kBAAkB,CAAC,CASvC;;uBApJa,MAAM;0BACN,MAAM;2BACN,MAAM;0BACN,MAAM;uBACN,MAAM;cACN,OAAO;iBACP,MAAM;;;cAKN,MAAM;cACN,QAAQ,GAAC,QAAQ;iBACjB,MAAM;cACN,MAAM;iBACN,MAAM;;;cAKN,MAAM;;;aAKN,OAAO"}

package/dist/dashboard/modules/budgetSettings.js

@@ -61,13 +61,11 @@ export function renderBudgetTile(viewModel) {
     ? '<span class="budget-tile-badge budget-tile-badge--exceeded">Budget exceeded</span>'
     : '';
   const gaugeClass = viewModel.exceeded ? 'budget-gauge-fill budget-gauge-fill--exceeded' : 'budget-gauge-fill';
+  const headerSection = viewModel.exceeded ? `<div class="budget-tile-header">${exceededBadge}</div>` : '';
 
   return `
     <div class="budget-tile">
-      <div class="budget-tile-header">
-        <span class="budget-tile-title">Monthly Claude budget</span>
-        ${exceededBadge}
-      </div>
+      ${headerSection}
       <div class="budget-tile-figures">
         <span class="budget-tile-consumed">${escapeHtml(viewModel.consumedUsdFormatted)}</span>
         <span class="budget-tile-separator">/</span>