WhatIDo/public/worker.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Воркер ИИ — Админ-панель</title>
<link rel="stylesheet" href="admin.css">
</head>
<body data-page="worker">
<div class="layout">
  <div class="sidebar" id="sidebar"></div>
  <div class="main">
    <div class="page-head">
      <h2>Воркер ИИ</h2>
      <p class="page-sub">Отслеживание автоматической проверки сообщений записей</p>
    </div>

    <div class="actions-row">
      <span class="worker-state" id="stateLine"><span class="worker-dot"></span> Загрузка…</span>
      <span style="flex:1"></span>
      <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.85rem">
        <input type="checkbox" id="autoRefresh"> Автообновление
      </label>
      <button class="btn-link" id="refreshBtn" type="button">Обновить</button>
      <button class="btn-link" id="wakeBtn" type="button" title="Запустить обработку очереди немедленно">Разбудить</button>
      <button class="btn-link" id="requeueBtn" type="button" title="Вернуть все записи с ошибкой в очередь">Перепроверить ошибки</button>
      <button class="btn-link" id="toggleBtn" type="button">…</button>
    </div>

    <div class="sys-grid" id="workerCards" style="margin-top:16px">
      <div class="sys-card loading">Загрузка…</div>
    </div>

    <div class="worker-counts" id="workerCounts"></div>

    <div class="settings-stack settings-stack-grid" style="margin-top:20px">
      <div class="settings-card wide">
        <div class="card-head">
          <div class="ic"><i data-lucide="hourglass"></i></div>
          <h3>Очередь (<span id="pendingCount">0</span>)</h3>
        </div>
        <p class="hint">Записи, ожидающие проверки моделью. Обновляются автоматически.</p>
        <div class="audit-wrap">
          <table class="audit-table" id="pendingTable">
            <thead>
              <tr><th>ID</th><th>Ученик</th><th>Группа</th><th>Создана</th></tr>
            </thead>
            <tbody></tbody>
          </table>
          <div class="empty" id="pendingEmpty" style="display:none">Очередь пуста.</div>
        </div>
      </div>

      <div class="settings-card wide">
        <div class="card-head">
          <div class="ic"><i data-lucide="history"></i></div>
          <h3>Последние проверки</h3>
        </div>
        <div class="actions-row" style="margin-bottom:10px">
          <select id="recentFilter" class="settings-input" style="max-width:220px">
            <option value="">Все статусы</option>
            <option value="done">Проверено</option>
            <option value="skipped">Пропущено</option>
            <option value="error">Ошибка</option>
            <option value="reverted">Возвращён оригинал</option>
          </select>
          <span class="hint" id="recentCount"></span>
        </div>
        <div class="audit-wrap">
          <table class="audit-table" id="recentTable">
            <thead>
              <tr><th>Проверено</th><th>Ученик</th><th>Группа</th><th>Статус</th><th>Изменения</th><th>Детали</th></tr>
            </thead>
            <tbody></tbody>
          </table>
          <div class="empty" id="recentEmpty" style="display:none">Проверок пока нет.</div>
        </div>
        <div class="pager" id="recentPager"></div>
      </div>

      <div class="settings-card wide" id="errorsCard" style="display:none">
        <div class="card-head">
          <div class="ic"><i data-lucide="triangle-alert"></i></div>
          <h3>Ошибки (<span id="errorsCount">0</span>)</h3>
        </div>
        <p class="hint">Записи, которые не удалось обработать после всех попыток. Нажмите «Перепроверить ошибки», чтобы запустить их снова.</p>
        <div class="audit-wrap">
          <table class="audit-table" id="errorsTable">
            <thead>
              <tr><th>Время</th><th>ID</th><th>Ученик</th><th>Ошибка</th></tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-overlay" id="aiDetailModal">
  <div class="edit-modal" style="max-width:680px">
    <h3 id="aiDetailTitle">Детали ИИ-проверки</h3>
    <div class="ai-detail-block">
      <div class="ai-detail-label">Отправлено в модель</div>
      <pre id="aiDetailInput"></pre>
    </div>
    <div class="ai-detail-block">
      <div class="ai-detail-label">Ответ модели</div>
      <pre id="aiDetailOutput"></pre>
    </div>
    <div class="card-foot" style="justify-content:flex-end;gap:8px">
      <button type="button" class="cancel" id="aiDetailCloseBtn">Закрыть</button>
    </div>
  </div>
</div>
<div class="toast" id="toast"></div>
<script src="vendor/lucide.min.js"></script>
<script src="admin.js"></script>
<script src="js/worker.js"></script>
</body>
</html>