viberadar 0.3.72 → 0.3.74

package/dist/ui/dashboard.html

@@ -19,6 +19,7 @@
       --green:    #3fb950;
       --red:      #f85149;
       --yellow:   #e3b341;
+      --accent:   #58a6ff;
     }
 
     body {
@@ -45,6 +46,15 @@
     header h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
     .header-project { margin-left: auto; font-size: 13px; color: var(--muted); }
     .header-time    { font-size: 12px; color: var(--dim); }
+    #rescanBtn { font-size: 16px; padding: 2px 6px; background: none; border: none; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
+    #rescanBtn:hover { opacity: 1; }
+    #rescanBtn.spinning { animation: rescan-spin 0.8s linear infinite; opacity: 1; }
+    @keyframes rescan-spin { to { transform: rotate(360deg); } }
+    #rescanStatus { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; transition: all 0.4s; white-space: nowrap; }
+    #rescanStatus.status-idle { color: var(--dim); border-color: transparent; }
+    #rescanStatus.status-scanning { color: var(--yellow); border-color: rgba(227,179,65,0.3); }
+    #rescanStatus.status-done { color: var(--green); border-color: rgba(63,185,80,0.35); background: rgba(63,185,80,0.07); }
+    #rescanStatus.status-error { color: var(--red); border-color: rgba(248,81,73,0.3); }
     .header-agent-rights {
       font-size: 11px;
       color: var(--muted);
@@ -191,7 +201,7 @@
     .obs-priority-low { color: var(--green); }
     .obs-catalog { margin-top:10px; background: var(--bg); border:1px solid var(--border); border-radius:6px; padding:8px; }
     .obs-catalog h4 { font-size:12px; margin-bottom:6px; }
-    .obs-cat-row { display:grid; grid-template-columns: 1.8fr .6fr .8fr .7fr .8fr 1fr; gap:8px; font-size:11px; color:var(--muted); padding:5px 0; border-bottom:1px dashed var(--border); }
+    .obs-cat-row { display:grid; grid-template-columns: 1.4fr .5fr .6fr .4fr 1.2fr .7fr auto; gap:6px; font-size:11px; color:var(--muted); padding:5px 0; border-bottom:1px dashed var(--border); }
     .obs-cat-row.head { color: var(--text); font-weight:600; text-transform:uppercase; font-size:10px; }
 
     /* ── Layout ──────────────────────────────────────────────────────────────── */
@@ -651,14 +661,48 @@
       transition: background 0.1s, color 0.1s, border-color 0.1s;
     }
     .file-row:hover .file-row-agent-btn { border-color: var(--accent); color: var(--accent); }
-    .file-row-agent-btn:hover { background: var(--accent); color: #000 !important; border-color: var(--accent); }
+    .file-row-agent-btn:hover { background: var(--accent); color: var(--bg) !important; border-color: var(--accent); }
     .file-row-agent-btn.stale { border-color: var(--yellow); color: var(--yellow); }
-    .file-row-agent-btn.stale:hover { background: var(--yellow) !important; color: #000 !important; }
+    .file-row-agent-btn.stale:hover { background: var(--yellow) !important; color: var(--bg) !important; }
     .file-row-fix-btn {
       background: var(--red) !important; border-color: var(--red) !important;
       color: #fff !important; font-weight: 600;
     }
     .file-row-fix-btn:hover { opacity: 0.85; }
+    .obs-action-btn {
+      display: inline-flex; align-items: center; gap: 3px;
+      padding: 2px 7px; font-size: 10px;
+      background: transparent; border: 1px solid var(--border); border-radius: 4px;
+      color: var(--dim); cursor: pointer; white-space: nowrap; flex-shrink: 0;
+      transition: background 0.1s, color 0.1s, border-color 0.1s;
+    }
+    .obs-action-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+    .obs-batch-btn { border-color: var(--yellow); color: var(--yellow); }
+    .obs-batch-btn:hover { background: rgba(255,200,0,0.15); color: var(--yellow); border-color: var(--yellow); }
+    .obs-expand-btn { background:none; border:none; color:var(--muted); cursor:pointer; font-size:10px; padding:2px 4px; }
+    .obs-expand-btn:hover { color:var(--accent); }
+    .obs-detail { display:none; padding:6px 0 2px 0; border-top:1px dashed var(--border); margin-top:4px; }
+    .obs-detail.open { display:block; }
+    .obs-detail-list { max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
+    .obs-detail-item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); padding:2px 0; }
+    .obs-detail-item input[type="checkbox"] { margin:0; flex-shrink:0; accent-color:var(--accent); }
+    .obs-detail-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .obs-detail-bar { display:flex; align-items:center; gap:8px; margin-top:6px; padding-top:6px; border-top:1px dashed var(--border); }
+    .obs-run-selected { padding:3px 10px; font-size:11px; font-weight:600; background:var(--accent); color:var(--bg); border:none; border-radius:4px; cursor:pointer; }
+    .obs-run-selected:hover { opacity:0.85; }
+    .obs-run-selected:disabled { opacity:0.4; cursor:not-allowed; }
+    .obs-select-all { font-size:10px; color:var(--dim); cursor:pointer; background:none; border:none; }
+    .obs-select-all:hover { color:var(--accent); }
+    .obs-tier-badge { display:inline-block; padding:1px 6px; border-radius:3px; font-size:10px; font-weight:700; letter-spacing:0.5px; }
+    .obs-tier-critical { background:rgba(248,81,73,0.2); color:var(--red); }
+    .obs-tier-important { background:rgba(227,179,65,0.2); color:var(--yellow); }
+    .obs-tier-normal { background:rgba(139,148,158,0.15); color:var(--muted); }
+    .obs-fp-list { font-size:11px; color:var(--muted); margin:4px 0 0 18px; }
+    .obs-fp-item { display:flex; gap:6px; padding:1px 0; align-items:baseline; }
+    .obs-fp-type { color:var(--yellow); font-weight:600; white-space:nowrap; font-size:10px; }
+    .obs-fp-line { color:var(--dim); font-size:10px; flex-shrink:0; }
+    .obs-tier-group { margin-bottom:8px; }
+    .obs-tier-group-header { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; font-weight:600; color:var(--text); }
     .file-row-err-badge {
       display: inline-flex; align-items: center;
       font-size: 11px; padding: 1px 6px; border-radius: 10px;
@@ -768,7 +812,7 @@
       background: none; border: 1px solid var(--yellow); color: var(--yellow);
       cursor: pointer; font-size: 11px; padding: 2px 8px; border-radius: 4px;
     }
-    .agent-panel-cancel:hover { background: var(--yellow); color: #000; }
+    .agent-panel-cancel:hover { background: var(--yellow); color: var(--bg); }
     .agent-queue-badge {
       font-size: 11px; color: var(--yellow); background: rgba(255,200,0,0.1);
       border: 1px solid var(--yellow); border-radius: 4px; padding: 2px 8px;
@@ -1031,6 +1075,8 @@
   <span class="header-project" id="projectName">—</span>
   <span class="header-time" id="scannedAt"></span>
   <span class="header-agent-rights" id="headerAgentRights" title="Права/режим выполнения агента">🔐 —</span>
+  <button id="rescanBtn" onclick="rescan()" title="Пересканировать проект и обновить данные">🔄</button>
+  <span id="rescanStatus" class="status-idle"></span>
   <button id="runAllBtn" onclick="runAllTests()" title="Запустить все unit и integration тесты">▶ Все тесты</button>
   <button id="termBtn" onclick="toggleAgentPanel()" title="Показать/скрыть терминал агента">📟 Terminal</button>
   <div style="position:relative">
@@ -2060,7 +2106,7 @@ async function reauthAgent() {
   await fetch('/api/agent-reauth', { method: 'POST' });
 }
 
-async function runAgentTask(task, featureKey, filePath, selectedFilePaths) {
+async function runAgentTask(task, featureKey, filePath, selectedFilePaths, meta) {
   document.getElementById('agentPanel').classList.add('open');
   document.getElementById('termBtn').classList.add('term-active');
   if (!agentRunning) {
@@ -2074,10 +2120,60 @@ async function runAgentTask(task, featureKey, filePath, selectedFilePaths) {
       featureKey,
       filePath: filePath || undefined,
       selectedFilePaths: Array.isArray(selectedFilePaths) ? selectedFilePaths : undefined,
+      meta: meta || undefined,
     }),
   });
 }
 
+// ─── Observability drill-down helpers ─────────────────────────────────────────
+function toggleObsDetail(id) {
+  const el = document.getElementById('obs-detail-' + id);
+  if (el) el.classList.toggle('open');
+}
+
+function obsUpdateSelectedCount(groupId) {
+  const container = document.getElementById('obs-detail-' + groupId);
+  if (!container) return;
+  const checked = container.querySelectorAll('input[type="checkbox"]:checked').length;
+  const btn = container.querySelector('.obs-run-selected');
+  if (btn) {
+    btn.textContent = checked > 0 ? `исправить выбранные (${checked})` : 'исправить выбранные';
+    btn.disabled = checked === 0;
+  }
+}
+
+function obsToggleAll(groupId) {
+  const container = document.getElementById('obs-detail-' + groupId);
+  if (!container) return;
+  const boxes = container.querySelectorAll('input[type="checkbox"]');
+  const allChecked = Array.from(boxes).every(b => b.checked);
+  boxes.forEach(b => b.checked = !allChecked);
+  obsUpdateSelectedCount(groupId);
+}
+
+function obsRunSelected(groupId, task, baseMeta) {
+  const container = document.getElementById('obs-detail-' + groupId);
+  if (!container) return;
+  const indices = [];
+  container.querySelectorAll('input[type="checkbox"]:checked').forEach(cb => {
+    indices.push(parseInt(cb.dataset.idx, 10));
+  });
+  if (indices.length === 0) return;
+  runAgentTask('obs-fix-selected', null, null, null, { ...baseMeta, catalogIndices: indices });
+}
+
+function obsMissingRunSelected(groupId) {
+  const container = document.getElementById('obs-detail-' + groupId);
+  if (!container) return;
+  const indices = [];
+  container.querySelectorAll('input[type="checkbox"]:checked').forEach(cb => {
+    const idx = parseInt(cb.dataset.missingIdx, 10);
+    if (!isNaN(idx)) indices.push(idx);
+  });
+  if (indices.length === 0) return;
+  runAgentTask('obs-fix-selected', null, null, null, { missingLogIndices: indices, recommendationType: 'add event' });
+}
+
 async function runTests(featureKey, testType) {
   document.getElementById('agentPanel').classList.add('open');
   document.getElementById('termBtn').classList.add('term-active');
@@ -2138,6 +2234,39 @@ function pluralFiles(n) {
   return 'файлов';
 }
 
+// ─── Rescan ───────────────────────────────────────────────────────────────────
+async function rescan() {
+  const btn = document.getElementById('rescanBtn');
+  const statusEl = document.getElementById('rescanStatus');
+  if (!btn || btn.classList.contains('spinning')) return;
+
+  btn.classList.add('spinning');
+  if (statusEl) { statusEl.className = 'status-scanning'; statusEl.textContent = 'Сканирую…'; }
+
+  try {
+    const res = await fetch('/api/rescan', { method: 'POST' });
+    if (!res.ok) throw new Error('rescan failed');
+    D = await res.json();
+    const t = new Date(D.scannedAt).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
+    document.getElementById('scannedAt').textContent = t;
+    window.__obsCatalog = D.observability?.catalog || [];
+    renderStats();
+    renderSidebar();
+    renderContent();
+    if (statusEl) {
+      statusEl.className = 'status-done';
+      statusEl.textContent = '✓ актуально · ' + t;
+      // Через 8 секунд приглушаем, но оставляем видимым
+      setTimeout(() => { if (statusEl) { statusEl.className = 'status-idle'; statusEl.textContent = '✓ ' + t; } }, 8000);
+    }
+  } catch (e) {
+    console.error('Rescan error:', e);
+    if (statusEl) { statusEl.className = 'status-error'; statusEl.textContent = '⚠ ошибка сканирования'; }
+  } finally {
+    btn.classList.remove('spinning');
+  }
+}
+
 // ─── Init ─────────────────────────────────────────────────────────────────────
 async function init() {
   try {
@@ -2195,19 +2324,31 @@ function renderStats() {
 
   let items;
   if (contextMode === 'observability') {
-    const serviceSources = src.filter(m => m.type === 'service' || m.type === 'util' || m.type === 'other');
-    const errorSignal = Object.values(D.testErrors || {}).reduce((acc, v) => acc + (v?.failed || 0), 0);
-    const totalBytes = src.reduce((acc, m) => acc + (m.size || 0), 0);
-    const avgKb = src.length ? Math.round(totalBytes / src.length / 1024) : 0;
-    const noiseRatio = src.length ? Math.round((src.filter(m => !m.hasTests).length / src.length) * 100) : 0;
-    const missingStructured = serviceSources.filter(m => !m.hasTests).length;
-    items = [
-      { v: serviceSources.length, l: 'Источники логов' },
-      { v: avgKb + ' KB', l: 'Средний объём/файл' },
-      { v: noiseRatio + '%', l: 'Коэффициент шума' },
-      { v: errorSignal, l: 'Сигнал ошибок', c: errorSignal ? '#f85149' : undefined },
-      { v: missingStructured, l: 'Не хватает полей', c: missingStructured ? '#e3b341' : undefined },
-    ];
+    const o = D.observability;
+    if (o) {
+      const noiseRatio = Math.round(o.metrics.noise_ratio * 100);
+      const structPct = Math.round(o.metrics.structured_completeness * 100);
+      const v2 = o.missingCriticalLogsV2 || [];
+      const missingCoverage = v2.length || o.missingCriticalLogs.length;
+      const totalFPs = v2.reduce((s,m) => s + m.failurePoints.length, 0);
+      const noisyCount = o.topNoisyPatterns.length;
+      items = [
+        { v: o.catalog.length, l: 'Источники логов' },
+        { v: noiseRatio + '%', l: 'Коэффициент шума', c: noiseRatio > 30 ? '#f85149' : noiseRatio > 10 ? '#e3b341' : undefined },
+        { v: structPct + '%', l: 'Структурированность', c: structPct < 50 ? '#f85149' : structPct < 80 ? '#e3b341' : undefined },
+        { v: totalFPs || missingCoverage, l: totalFPs ? 'Точек отказа' : 'Нет покрытия', c: totalFPs > 10 ? '#f85149' : (totalFPs || missingCoverage) ? '#e3b341' : undefined },
+        { v: noisyCount, l: 'Шумных паттернов', c: noisyCount ? '#e3b341' : undefined },
+      ];
+    } else {
+      const serviceSources = src.filter(m => m.type === 'service' || m.type === 'util' || m.type === 'other');
+      items = [
+        { v: serviceSources.length, l: 'Источники логов' },
+        { v: '—', l: 'Коэффициент шума' },
+        { v: '—', l: 'Структурированность' },
+        { v: '—', l: 'Нет покрытия' },
+        { v: '—', l: 'Шумных паттернов' },
+      ];
+    }
   } else if (D.hasConfig && D.features) {
     const unmapped = src.filter(m => !m.isInfra && (!m.featureKeys || m.featureKeys.length === 0)).length;
     items = [
@@ -2326,57 +2467,262 @@ function renderQaOnboarding() {
 }
 
 function renderObservability(c) {
-  const src = D.modules.filter(m => m.type !== 'test');
-  const sourceGroups = [
-    { label: 'Сервисы', count: src.filter(m => m.type === 'service').length },
-    { label: 'Утилиты', count: src.filter(m => m.type === 'util').length },
-    { label: 'Прочее', count: src.filter(m => m.type === 'other').length },
+  const o = D.observability;
+  if (!o) {
+    c.innerHTML = `<div class="onboarding-block"><h3>Наблюдаемость</h3><p>Данные анализа логов недоступны. Пересканируй проект.</p></div>`;
+    return;
+  }
+
+  const noiseRatio  = Math.round(o.metrics.noise_ratio * 100);
+  const structPct   = Math.round(o.metrics.structured_completeness * 100);
+  const actionPct   = Math.round(o.metrics.error_actionability * 100);
+  const coveragePct = Math.round(o.metrics.coverage_of_key_flows * 100);
+
+  function metricColor(val, goodThreshold, warnThreshold, invert) {
+    // invert=true: higher is worse (noise), invert=false: higher is better (coverage)
+    if (invert) return val > warnThreshold ? 'var(--red)' : val > goodThreshold ? 'var(--yellow)' : 'var(--green)';
+    return val < warnThreshold ? 'var(--red)' : val < goodThreshold ? 'var(--yellow)' : 'var(--green)';
+  }
+
+  const formatLabels = { structured: 'structured', mixed: 'mixed', unstructured: 'unstructured' };
+  const sourceByFormat = [
+    { label: 'Structured', count: o.catalog.filter(c => c.format === 'structured').length, color: 'var(--green)' },
+    { label: 'Mixed', count: o.catalog.filter(c => c.format === 'mixed').length, color: 'var(--yellow)' },
+    { label: 'Unstructured', count: o.catalog.filter(c => c.format === 'unstructured').length, color: 'var(--red)' },
   ].filter(x => x.count > 0);
-  const errorSignal = Object.values(D.testErrors || {}).reduce((acc, v) => acc + (v?.failed || 0), 0);
-  const missingStructured = src.filter(m => (m.type === 'service' || m.type === 'util') && !m.hasTests).slice(0, 8);
-  const noisy = [...src]
-    .sort((a, b) => (b.size || 0) - (a.size || 0))
-    .slice(0, 5)
-    .map(m => ({ name: m.name, rel: m.relativePath, kb: Math.round((m.size || 0) / 1024) }));
+
+  const recLabels = {
+    'suppress': 'убрать',
+    'downgrade level': 'понизить уровень',
+    'enrich fields': 'обогатить поля',
+    'add event': 'добавить событие',
+  };
+  const hasAgent = !!D.agent;
+
+  // Store catalog for buttons to reference by index (avoids inline JSON in onclick)
+  window.__obsCatalog = o.catalog;
+
+  const noisyRows = o.topNoisyPatterns.slice(0, 8).map(i => {
+    const safePattern = escapeHtml(i.pattern).replace(/'/g, '&#39;');
+    const btn = hasAgent
+      ? `<button class="obs-action-btn" onclick="event.stopPropagation();runAgentTask('obs-suppress-pattern',null,null,null,{pattern:'${safePattern}',recommendation:'${i.recommendation}'})">убрать</button>`
+      : '';
+    return `
+    <div class="obs-list-item">
+      <span class="obs-priority-${i.priority}" style="flex-shrink:0">[${i.priority}]</span>
+      <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${escapeHtml(i.pattern)}">${escapeHtml(i.pattern)}</span>
+      <strong style="flex-shrink:0;color:var(--red)">×${i.count} → ${recLabels[i.recommendation] || i.recommendation}</strong>
+      ${btn}
+    </div>`;
+  }).join('') || '<div class="obs-sub">Шумных паттернов не обнаружено</div>';
+
+  // ── Missing critical logs (V2: grouped by risk tier with failure points) ──
+  const v2Data = o.missingCriticalLogsV2 || [];
+  window.__obsMissingV2 = v2Data;
+  const fpTypeLabels = {
+    'empty-catch':'пустой catch','catch-no-log':'catch без лога','promise-catch-no-log':'.catch без лога',
+    'http-no-error-handling':'HTTP без обработки','db-no-error-handling':'DB без обработки',
+    'throw-no-log':'throw без лога','error-check-no-log':'if(err) без лога',
+  };
+  let missingSection = '';
+  if (v2Data.length > 0) {
+    const tierLabels = { critical:'Критичные', important:'Важные', normal:'Обычные' };
+    const tiers = ['critical','important','normal'];
+    const tierSections = tiers.map(tier => {
+      const items = v2Data.filter(m => m.riskTier === tier);
+      if (!items.length) return '';
+      const groupId = 'missing-' + tier;
+      const expandBtn = hasAgent ? `<button class="obs-expand-btn" onclick="event.stopPropagation();toggleObsDetail('${groupId}')">▼</button>` : '';
+      const totalFPs = items.reduce((s,m) => s + m.failurePoints.length, 0);
+      const detailItems = items.map(m => {
+        const globalIdx = v2Data.indexOf(m);
+        const fpCount = m.failurePoints.length;
+        const fpPreview = m.failurePoints.slice(0,3).map(fp =>
+          `<div class="obs-fp-item"><span class="obs-fp-type">${fpTypeLabels[fp.type]||fp.type}</span><span class="obs-fp-line">~${fp.lineApprox}</span></div>`
+        ).join('');
+        const moreCount = fpCount > 3 ? `<div class="obs-fp-item" style="color:var(--dim)">...и ещё ${fpCount-3}</div>` : '';
+        const covBadge = m.hasAnyWarnError ? '<span style="font-size:10px;color:var(--dim)" title="Есть warn/error, но не все точки покрыты">частично</span>' : '';
+        return `<label class="obs-detail-item" style="flex-wrap:wrap">
+          <input type="checkbox" data-missing-idx="${globalIdx}" onchange="obsUpdateSelectedCount('${groupId}')">
+          <span title="${escapeHtml(m.modulePath)}" style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(m.modulePath.split('/').slice(-2).join('/'))}</span>
+          <span style="color:var(--dim);flex-shrink:0;font-size:10px">${escapeHtml(m.roleHint)}</span>
+          <span style="color:var(--yellow);flex-shrink:0">${fpCount} точек</span>
+          ${covBadge}
+          ${fpPreview || moreCount ? `<div class="obs-fp-list" style="width:100%">${fpPreview}${moreCount}</div>` : ''}
+        </label>`;
+      }).join('');
+      const addBtn = hasAgent ? `<button class="obs-run-selected" disabled onclick="obsMissingRunSelected('${groupId}')">добавить логи выбранным</button>` : '';
+      const detail = hasAgent ? `
+        <div id="obs-detail-${groupId}" class="obs-detail">
+          <div class="obs-detail-bar" style="border-top:none;padding-top:0;margin-bottom:4px">
+            <button class="obs-select-all" onclick="obsToggleAll('${groupId}')">выбрать все / снять</button>
+          </div>
+          <div class="obs-detail-list">${detailItems}</div>
+          <div class="obs-detail-bar">${addBtn}</div>
+        </div>` : '';
+      return `<div class="obs-tier-group">
+        <div class="obs-tier-group-header">
+          <span class="obs-tier-badge obs-tier-${tier}">${tierLabels[tier]}</span>
+          <span>${items.length} модулей, ${totalFPs} точек отказа</span>
+          ${expandBtn}
+        </div>
+        ${detail}
+      </div>`;
+    }).join('');
+    missingSection = tierSections || '<div class="obs-sub" style="color:var(--green)">Критичные сценарии покрыты</div>';
+  } else {
+    missingSection = '<div class="obs-sub" style="color:var(--green)">Критичные сценарии покрыты</div>';
+  }
+
+  const fieldGaps = o.fieldGaps || {};
+  const fieldGapEntries = Object.entries(fieldGaps).filter(([,v]) => v > 0).sort((a,b) => b[1] - a[1]);
+  const fieldGapRows = fieldGapEntries.map(([name, count]) => {
+    const groupId = 'field-' + name.replace(/[^a-z0-9]/gi, '_');
+    const affectedItems = o.catalog.filter(c => (c.missingFields||[]).includes(name));
+    const expandBtn = hasAgent ? `<button class="obs-expand-btn" onclick="event.stopPropagation();toggleObsDetail('${groupId}')">▼</button>` : '';
+    const detailItems = affectedItems.map(ci => {
+      const catIdx = o.catalog.indexOf(ci);
+      return `<label class="obs-detail-item"><input type="checkbox" data-idx="${catIdx}" onchange="obsUpdateSelectedCount('${groupId}')"><span title="${escapeHtml(ci.modulePath)}">${escapeHtml(ci.modulePath.split('/').slice(-2).join('/'))}</span><span style="color:var(--dim);flex-shrink:0">${ci.format}</span></label>`;
+    }).join('');
+    const detail = hasAgent ? `
+      <div id="obs-detail-${groupId}" class="obs-detail">
+        <div class="obs-detail-bar" style="border-top:none;padding-top:0;margin-bottom:4px">
+          <button class="obs-select-all" onclick="obsToggleAll('${groupId}')">выбрать все / снять</button>
+        </div>
+        <div class="obs-detail-list">${detailItems}</div>
+        <div class="obs-detail-bar">
+          <button class="obs-run-selected" disabled onclick="obsRunSelected('${groupId}','obs-fix-selected',{fieldName:'${escapeHtml(name)}'})">обогатить выбранные</button>
+        </div>
+      </div>` : '';
+    return `<div>
+      <div class="obs-list-item">
+        <span><code>${escapeHtml(name)}</code></span>
+        <strong style="color:${count > 20 ? 'var(--red)' : count > 5 ? 'var(--yellow)' : 'var(--muted)'}">${count} пропусков</strong>
+        ${expandBtn}
+      </div>
+      ${detail}
+    </div>`;
+  }).join('') || '<div class="obs-sub" style="color:var(--green)">Все обязательные поля на месте</div>';
+
+  const catalogRows = o.catalog.slice(0, 15).map((i, idx) => {
+    const missing = (i.missingFields || []);
+    const missingStr = missing.length ? missing.join(', ') : '—';
+    const btn = hasAgent
+      ? `<button class="obs-action-btn" onclick="event.stopPropagation();runAgentTask('obs-fix-module',null,null,null,{catalogIndex:${idx}})">исправить</button>`
+      : '';
+    return `
+    <div class="obs-cat-row">
+      <span title="${escapeHtml(i.modulePath)}">${escapeHtml(i.modulePath.split('/').slice(-2).join('/'))}</span>
+      <span>${i.level}</span>
+      <span style="color:${i.format==='structured'?'var(--green)':i.format==='mixed'?'var(--yellow)':'var(--red)'}">${i.format}</span>
+      <span style="color:${missing.length > 4 ? 'var(--red)' : missing.length > 0 ? 'var(--yellow)' : 'var(--green)'}">${missing.length}/8</span>
+      <span title="${escapeHtml(missingStr)}" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escapeHtml(missingStr)}</span>
+      <span style="color:${i.recommendation==='suppress'?'var(--red)':i.recommendation==='add event'?'var(--yellow)':'var(--muted)'}">${recLabels[i.recommendation] || i.recommendation}</span>
+      ${btn}
+    </div>`}).join('');
 
   c.innerHTML = `
     <div class="onboarding-block">
       <h3>Наблюдаемость: что это?</h3>
-      <p>Экран для контроля отношения сигнал/шум: откуда идут логи, где растёт объём, сколько шума и какие поля/сигналы нужно структурировать в первую очередь.</p>
+      <p>Аудит покрытия логами: что добавить, что убрать, что обогатить — на основе статического анализа лог-вызовов.</p>
+    </div>
+
+    <div class="obs-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:12px">
+      <div class="obs-card">
+        <div class="obs-title">Коэффициент шума</div>
+        <div class="obs-value" style="color:${metricColor(noiseRatio,10,30,true)}">${noiseRatio}%</div>
+        <div class="obs-sub">Доля шумных лог-вызовов из всех.</div>
+      </div>
+      <div class="obs-card">
+        <div class="obs-title">Структурированность</div>
+        <div class="obs-value" style="color:${metricColor(structPct,80,50,false)}">${structPct}%</div>
+        <div class="obs-sub">Логи с обязательными полями (module, event, traceId).</div>
+      </div>
+      <div class="obs-card">
+        <div class="obs-title">Actionable ошибки</div>
+        <div class="obs-value" style="color:${metricColor(actionPct,80,50,false)}">${actionPct}%</div>
+        <div class="obs-sub">ERROR-логи с контекстом для диагностики.</div>
+      </div>
+      <div class="obs-card">
+        <div class="obs-title">Покрытие сценариев</div>
+        <div class="obs-value" style="color:${metricColor(coveragePct,80,50,false)}">${coveragePct}%</div>
+        <div class="obs-sub">Модули с хотя бы одним warn/error событием.</div>
+      </div>
     </div>
 
-    <div class="obs-grid">
+    <div class="obs-grid" style="grid-template-columns:1fr 1fr 1fr;margin-bottom:12px">
       <div class="obs-card">
-        <div class="obs-title">Источники логов</div>
+        <div class="obs-title">Источники по формату</div>
         <div class="obs-list">
-          ${sourceGroups.map(g => `<div class="obs-list-item"><span>${g.label}</span><strong>${g.count}</strong></div>`).join('') || '<div class="obs-sub">Нет данных</div>'}
+          ${sourceByFormat.map(g => `
+            <div class="obs-list-item">
+              <span style="color:${g.color}">${g.label}</span>
+              <strong>${g.count}</strong>
+            </div>`).join('') || '<div class="obs-sub">Нет данных</div>'}
         </div>
       </div>
-
       <div class="obs-card">
-        <div class="obs-title">Объём логов (топ файлов)</div>
+        <div class="obs-title">Классификация логов</div>
         <div class="obs-list">
-          ${noisy.map(n => `<div class="obs-list-item"><span title="${n.rel}">${n.name}</span><strong>${n.kb} KB</strong></div>`).join('') || '<div class="obs-sub">Нет файлов</div>'}
+          <div class="obs-list-item"><span style="color:var(--red)">Мусор (убрать)</span><strong>${o.classification.trash}</strong></div>
+          <div class="obs-list-item"><span style="color:var(--green)">Полезные</span><strong>${o.classification.useful}</strong></div>
+          <div class="obs-list-item"><span style="color:var(--blue)">Критичные</span><strong>${o.classification.critical}</strong></div>
         </div>
       </div>
-
       <div class="obs-card">
-        <div class="obs-title">Коэффициент шума</div>
-        <div class="obs-value">${src.length ? Math.round((src.filter(m => !m.hasTests).length / src.length) * 100) : 0}%</div>
-        <div class="obs-sub">Доля источников без тестового контроля (прокси-метрика шумного логирования).</div>
+        <div class="obs-title">Рекомендации</div>
+        <div class="obs-list" style="gap:2px">
+          ${['suppress','enrich fields','add event','downgrade level'].map(rec => {
+            const items = o.catalog.filter(c => c.recommendation === rec);
+            if (!items.length) return '';
+            const groupId = 'rec-' + rec.replace(/\s+/g, '-');
+            const expandBtn = hasAgent ? `<button class="obs-expand-btn" onclick="event.stopPropagation();toggleObsDetail('${groupId}')">▼</button>` : '';
+            const detailItems = items.map((ci, i) => {
+              const catIdx = o.catalog.indexOf(ci);
+              const mf = (ci.missingFields||[]).join(', ') || '—';
+              return `<label class="obs-detail-item"><input type="checkbox" data-idx="${catIdx}" onchange="obsUpdateSelectedCount('${groupId}')"><span title="${escapeHtml(ci.modulePath)}">${escapeHtml(ci.modulePath.split('/').slice(-2).join('/'))}</span><span style="color:var(--dim);flex-shrink:0">${ci.format}</span></label>`;
+            }).join('');
+            const detail = hasAgent ? `
+              <div id="obs-detail-${groupId}" class="obs-detail">
+                <div class="obs-detail-bar" style="border-top:none;padding-top:0;margin-bottom:4px">
+                  <button class="obs-select-all" onclick="obsToggleAll('${groupId}')">выбрать все / снять</button>
+                </div>
+                <div class="obs-detail-list">${detailItems}</div>
+                <div class="obs-detail-bar">
+                  <button class="obs-run-selected" disabled onclick="obsRunSelected('${groupId}','obs-fix-selected',{recommendationType:'${rec}'})">исправить выбранные</button>
+                </div>
+              </div>` : '';
+            return `<div>
+              <div class="obs-list-item"><span>${recLabels[rec]}</span><strong>${items.length}</strong>${expandBtn}</div>
+              ${detail}
+            </div>`;
+          }).join('')}
+        </div>
       </div>
+    </div>
 
+    <div class="obs-grid" style="grid-template-columns:1fr 1fr;margin-bottom:12px">
       <div class="obs-card">
-        <div class="obs-title">Сигнал ошибок</div>
-        <div class="obs-value" style="color:${errorSignal ? 'var(--red)' : 'var(--green)'}">${errorSignal}</div>
-        <div class="obs-sub">Сумма упавших тестов из последнего прогона как индикатор нестабильности сигналов.</div>
+        <div class="obs-title">Что убрать — шумные паттерны</div>
+        <div class="obs-list" style="gap:4px">${noisyRows}</div>
       </div>
+      <div class="obs-card">
+        <div class="obs-title">Что добавить — нет критичных логов</div>
+        <div class="obs-list" style="gap:4px">${missingSection}</div>
+      </div>
+    </div>
 
-      <div class="obs-card" style="grid-column:1 / -1">
-        <div class="obs-title">Недостающие структурированные поля (кандидаты)</div>
-        <div class="obs-list">
-          ${missingStructured.map(m => `<div class="obs-list-item"><span>${m.relativePath}</span><strong>нужна схема</strong></div>`).join('') || '<div class="obs-sub">Явных кандидатов не найдено</div>'}
-        </div>
+    <div class="obs-card" style="margin-bottom:12px">
+      <div class="obs-title">Что обогатить — пробелы по полям</div>
+      <div class="obs-sub" style="margin-bottom:8px">Обязательные поля по стандарту: service, env, trace_id, request_id, event_name, outcome, error_code (warn/error), user_id.</div>
+      <div class="obs-list">${fieldGapRows}</div>
+    </div>
+
+    <div class="obs-card" style="margin-bottom:12px">
+      <div class="obs-title">Каталог источников логов (топ 15)</div>
+      <div class="obs-catalog" style="margin-top:8px;border:none;padding:0">
+        <div class="obs-cat-row head"><span>модуль</span><span>уровень</span><span>формат</span><span>пробелы</span><span>не хватает</span><span>действие</span><span></span></div>
+        ${catalogRows || '<div class="obs-row">Логи не найдены</div>'}
       </div>
     </div>`;
 }
@@ -2410,9 +2756,19 @@ function renderObservabilityOverview(c) {
     `<div class="obs-row"><span class="obs-priority-${i.priority}">[${i.priority}]</span> ${escapeHtml(i.pattern)} · x${i.count} → <b>${i.recommendation}</b></div>`
   ).join('') || '<div class="obs-row">Нет шумных паттернов</div>';
 
-  const missing = (o.missingCriticalLogs || []).slice(0, 5).map(i =>
-    `<div class="obs-row"><span class="obs-priority-${i.priority}">[${i.priority}]</span> ${escapeHtml(i.pattern)} → <b>${i.recommendation}</b></div>`
-  ).join('') || '<div class="obs-row">Критичные логи покрыты</div>';
+  const v2Missing = o.missingCriticalLogsV2 || [];
+  let missing;
+  if (v2Missing.length) {
+    const tierLabels = { critical: '🔴 крит', important: '🟡 важн', normal: '⚪ обычн' };
+    missing = v2Missing.slice(0, 8).map(m =>
+      `<div class="obs-row"><span class="obs-tier-badge obs-tier-${m.riskTier}">${tierLabels[m.riskTier]}</span> ${escapeHtml(m.modulePath)} · ${m.failurePoints.length} точек отказа</div>`
+    ).join('');
+    if (v2Missing.length > 8) missing += `<div class="obs-row" style="color:var(--dim)">...и ещё ${v2Missing.length - 8}</div>`;
+  } else {
+    missing = (o.missingCriticalLogs || []).slice(0, 5).map(i =>
+      `<div class="obs-row"><span class="obs-priority-${i.priority}">[${i.priority}]</span> ${escapeHtml(i.pattern)} → <b>${i.recommendation}</b></div>`
+    ).join('') || '<div class="obs-row">Критичные логи покрыты</div>';
+  }
 
   const catalogRows = (o.catalog || []).slice(0, 10).map(i =>
     `<div class="obs-cat-row"><span>${escapeHtml(i.modulePath)}</span><span>${i.level}</span><span>${i.format}</span><span>${i.frequency}</span><span>${escapeHtml(i.owner)}</span><span>${i.recommendation}</span></div>`
@@ -3062,7 +3418,7 @@ function renderUnmappedDetail(c) {
     <div style="padding:0 0 12px;display:flex;gap:8px;flex-wrap:wrap">
       ${D.agent ? `<button id="runAgentUnmapped" style="
         padding:7px 14px; background:var(--blue); border:none;
-        border-radius:6px; color:#000; font-size:12px; font-weight:700; cursor:pointer;
+        border-radius:6px; color:var(--bg); font-size:12px; font-weight:700; cursor:pointer;
       ">▶ Разобрать через ${D.agent === 'claude' ? 'Claude Code' : 'Codex'}</button>` : ''}
       <button id="copyUnmappedDrill" style="
         padding:7px 14px; background:var(--bg-card); border:1px solid var(--border);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viberadar",
-  "version": "0.3.72",
+  "version": "0.3.74",
   "description": "Live module map with test coverage for vibecoding projects",
   "main": "./dist/cli.js",
   "bin": {