UI: пагинация, вынос пагинатора, быстрые действия

public/js/worker.js

@@ -1,4 +1,5 @@
 const AUTO_REFRESH_MS = 5000;
+const RECENT_PAGE_SIZE = 15;
 const STATUS_LABELS = {
   pending: 'В очереди',
   processing: 'Проверяется',
@@ -18,6 +19,7 @@ let state = null;
 let refreshTimer = null;
 let busy = false;
 let recentRows = [];
+let recentPage = 1;
 
 function fmtDur(ms) {
   if (ms === null || ms === undefined || ms < 0) return '—';
@@ -140,10 +142,19 @@ function renderRecent() {
   document.getElementById('recentCount').textContent = `${rows.length} из ${all.length}`;
   const tbody = document.querySelector('#recentTable tbody');
   const empty = document.getElementById('recentEmpty');
-  if (!rows.length) { tbody.innerHTML = ''; empty.style.display = 'block'; return; }
+  const maxPage = Math.max(1, Math.ceil(rows.length / RECENT_PAGE_SIZE));
+  if (recentPage > maxPage) recentPage = maxPage;
+  if (!rows.length) {
+    recentRows = [];
+    tbody.innerHTML = '';
+    empty.style.display = 'block';
+    renderPager(document.getElementById('recentPager'), 1, 1, () => {});
+    return;
+  }
   empty.style.display = 'none';
-  recentRows = rows;
-  tbody.innerHTML = rows.map((r, i) => `
+  const slice = rows.slice((recentPage - 1) * RECENT_PAGE_SIZE, recentPage * RECENT_PAGE_SIZE);
+  recentRows = slice;
+  tbody.innerHTML = slice.map((r, i) => `
     <tr>
       <td style="white-space:nowrap">${fmtTime(r.ai_checked_at)}</td>
       <td>${esc(r.student_name)}</td>
@@ -152,6 +163,7 @@ function renderRecent() {
       <td>${r.changed ? '<span class="lucide-inline" style="color:#f59e0b"><i data-lucide="pencil"></i></span> исправлен' : '—'}</td>
       <td><button type="button" class="ai-details" data-ai-idx="${i}">Подробнее</button></td>
     </tr>`).join('');
+  renderPager(document.getElementById('recentPager'), recentPage, maxPage, p => { recentPage = p; renderRecent(); });
 }
 
 function renderErrors() {
@@ -226,7 +238,7 @@ document.getElementById('refreshBtn').addEventListener('click', load);
 document.getElementById('wakeBtn').addEventListener('click', wake);
 document.getElementById('toggleBtn').addEventListener('click', toggleEnabled);
 document.getElementById('requeueBtn').addEventListener('click', requeueFailed);
-document.getElementById('recentFilter').addEventListener('change', renderRecent);
+document.getElementById('recentFilter').addEventListener('change', () => { recentPage = 1; renderRecent(); });
 document.getElementById('autoRefresh').addEventListener('change', e => setAutoRefresh(e.target.checked));
 
 document.getElementById('recentTable').addEventListener('click', e => {