viberadar 0.3.80 → 0.3.82

package/dist/ui/dashboard.html

@@ -389,6 +389,61 @@
     .feature-progress-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
     .feature-progress-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
 
+    /* ── Documentation screen ────────────────────────────────────────────────── */
+    .doc-kpi-strip {
+      display: flex; gap: 24px; padding: 12px 16px; margin-bottom: 16px;
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
+    }
+    .doc-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+    .doc-kpi-val { font-size: 20px; font-weight: 700; color: var(--text); }
+    .doc-kpi-lbl { font-size: 11px; color: var(--muted); }
+    .doc-feature-card { cursor: pointer; }
+    .doc-agent-btn {
+      font-size: 11px; padding: 4px 10px; border-radius: 6px;
+      border: 1px solid var(--border); background: var(--bg-hover); color: var(--text);
+      cursor: pointer; transition: background 0.15s;
+    }
+    .doc-agent-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
+    .doc-changed-section {
+      margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
+    }
+    .doc-changed-header {
+      padding: 8px 12px; background: var(--bg-card); color: var(--text);
+      font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px;
+    }
+    .doc-changed-arrow { font-size: 10px; transition: transform 0.2s; }
+    .doc-changed-section.open .doc-changed-arrow { transform: rotate(90deg); }
+    .doc-changed-list { display: none; padding: 8px 12px; }
+    .doc-changed-section.open .doc-changed-list { display: block; }
+    .doc-changed-file {
+      font-size: 12px; color: var(--yellow); padding: 3px 0;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+    }
+    .doc-content {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
+      padding: 20px 24px; line-height: 1.65; color: var(--text);
+    }
+    .doc-content .doc-h { margin: 20px 0 8px 0; color: var(--text); font-weight: 600; }
+    .doc-content h1.doc-h { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
+    .doc-content h2.doc-h { font-size: 17px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
+    .doc-content h3.doc-h { font-size: 15px; }
+    .doc-content .doc-p { margin: 8px 0; font-size: 14px; }
+    .doc-content .doc-list { margin: 8px 0; padding-left: 24px; font-size: 14px; }
+    .doc-content .doc-list li { margin: 4px 0; }
+    .doc-content .doc-code {
+      background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
+      padding: 12px 16px; overflow-x: auto; font-size: 13px; margin: 12px 0;
+    }
+    .doc-content .doc-inline-code {
+      background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
+      padding: 1px 5px; font-size: 12px;
+    }
+    .back-btn {
+      background: none; border: 1px solid var(--border); color: var(--muted);
+      padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
+    }
+    .back-btn:hover { color: var(--text); border-color: var(--dim); }
+
     /* ── No config banner ────────────────────────────────────────────────────── */
     .no-config {
       display: flex;
@@ -1363,15 +1418,19 @@ function switchObsTab(tabId) {
 const modeStore = {
   qa: { view: 'features', searchQuery: '', activeTypes: new Set(), drillFeatureKey: null, drillTestType: null, activePanelKey: null, showOnlyUntestedInFeature: false },
   observability: { view: 'files', searchQuery: '', activeTypes: new Set(), drillFeatureKey: null, drillTestType: null, activePanelKey: null, showOnlyUntestedInFeature: false },
+  docs: { view: 'features', searchQuery: '', activeTypes: new Set(), drillFeatureKey: null, drillTestType: null, activePanelKey: null, showOnlyUntestedInFeature: false },
 };
 
 function getModeFromPath(pathname = window.location.pathname) {
   if (pathname.startsWith('/radar/observability')) return 'observability';
+  if (pathname.startsWith('/radar/docs')) return 'docs';
   return 'qa';
 }
 
 function routePathForMode(mode) {
-  return mode === 'observability' ? '/radar/observability' : '/radar/qa';
+  if (mode === 'observability') return '/radar/observability';
+  if (mode === 'docs') return '/radar/docs';
+  return '/radar/qa';
 }
 
 function setModeRoute(mode, replace = false) {
@@ -1408,8 +1467,8 @@ function switchMode(nextMode) {
   saveModeState(contextMode);
   contextMode = nextMode;
   restoreModeState(contextMode);
-  if (contextMode === 'observability') {
-    view = 'files';
+  if (contextMode === 'observability' || contextMode === 'docs') {
+    view = 'features';
     drillFeatureKey = null;
     drillTestType = null;
     activePanelKey = null;
@@ -2618,6 +2677,7 @@ function renderModeSwitch() {
   const modes = [
     { key: 'qa', label: 'QA Coverage', hint: 'Покрытие, пробелы, тренды' },
     { key: 'observability', label: 'Наблюдаемость', hint: 'Логи, шум, сигналы ошибок' },
+    { key: 'docs', label: 'Документация', hint: 'Актуальность, генерация, обновление' },
   ];
   root.innerHTML = modes.map(m => `
     <button class="mode-switch-btn ${contextMode === m.key ? 'active' : ''}" data-mode="${m.key}">
@@ -2646,6 +2706,16 @@ function renderSidebar() {
     return;
   }
 
+  if (contextMode === 'docs') {
+    tabs.style.display = 'none';
+    extra.innerHTML = `
+      <div class="sidebar-label">Документация</div>
+      <div style="font-size:12px;color:var(--muted);padding:0 6px;line-height:1.45">
+        Статус и актуальность документации по фичам.
+      </div>`;
+    return;
+  }
+
   tabs.style.display = 'flex';
   document.querySelectorAll('.view-tab').forEach(t =>
     t.classList.toggle('active', t.dataset.view === view)
@@ -2690,6 +2760,10 @@ function renderContent() {
     renderObservability(c);
     return;
   }
+  if (contextMode === 'docs') {
+    renderDocumentation(c);
+    return;
+  }
 
   if (view === 'features') {
     if (drillFeatureKey === '__unmapped__') renderUnmappedDetail(c);
@@ -2711,13 +2785,76 @@ function renderObservability(c) {
     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);
+  // Feature-based routing (mirrors QA coverage pattern)
+  if (D.hasConfig && D.features && o.byFeature && !drillFeatureKey) {
+    renderObsFeatureCards(c);
+    return;
+  }
+  if (drillFeatureKey) {
+    renderObsFeatureDetail(c);
+    return;
+  }
+
+  renderObsGlobalDetail(c);
+}
+
+function renderObsGlobalDetail(c, filterFeatureKey) {
+  const o = D.observability;
+  if (!o) return;
+
+  // If filtering by feature, scope data to that feature's modules
+  let catalog = o.catalog;
+  let missingV2 = o.missingCriticalLogsV2 || [];
+  let topNoisy = o.topNoisyPatterns;
+  let fieldGapsData = o.fieldGaps || {};
+  let metricsData = o.metrics;
+
+  if (filterFeatureKey) {
+    const isUnmapped = filterFeatureKey === '__unmapped__';
+    catalog = o.catalog.filter(ci => isUnmapped ? (!ci.featureKeys || ci.featureKeys.length === 0) : (ci.featureKeys || []).includes(filterFeatureKey));
+    // Build set of module paths in this feature for missingV2 filtering
+    const featureModulePaths = new Set(
+      (D.modules || []).filter(m => {
+        if (isUnmapped) return !m.featureKeys || m.featureKeys.length === 0;
+        return (m.featureKeys || []).includes(filterFeatureKey);
+      }).map(m => m.relativePath)
+    );
+    missingV2 = (o.missingCriticalLogsV2 || []).filter(m => featureModulePaths.has(m.modulePath));
+    // Re-derive noisy patterns from filtered catalog
+    const noisyAgg = new Map();
+    for (const ci of catalog) {
+      for (const nm of (ci.noisyMessages || [])) {
+        noisyAgg.set(nm, (noisyAgg.get(nm) || 0) + 1);
+      }
+    }
+    topNoisy = Array.from(noisyAgg.entries())
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 8)
+      .map(([pattern, count], i) => ({
+        pattern, count,
+        priority: i < 3 ? 'high' : i < 6 ? 'medium' : 'low',
+        recommendation: count >= 3 ? 'suppress' : 'downgrade level',
+      }));
+    // Re-derive field gaps from filtered catalog
+    fieldGapsData = {};
+    for (const ci of catalog) {
+      for (const f of (ci.missingFields || [])) {
+        fieldGapsData[f] = (fieldGapsData[f] || 0) + 1;
+      }
+    }
+    // Use per-feature metrics if available
+    if (!isUnmapped && o.byFeature) {
+      const bf = o.byFeature.find(f => f.key === filterFeatureKey);
+      if (bf) metricsData = bf.metrics;
+    }
+  }
+
+  const noiseRatio  = Math.round(metricsData.noise_ratio * 100);
+  const structPct   = Math.round(metricsData.structured_completeness * 100);
+  const actionPct   = Math.round(metricsData.error_actionability * 100);
+  const coveragePct = Math.round(metricsData.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)';
   }
@@ -2728,13 +2865,13 @@ function renderObservability(c) {
   try { _bl = JSON.parse(localStorage.getItem('vr_obs_bl_' + _bsKey) || 'null'); } catch(e) {}
 
   // Pre-compute current snapshot values (before tierSections so _d is in scope)
-  const _blCurrMissing = (o.missingCriticalLogsV2 || []).length;
-  const _blCurrFPs = (o.missingCriticalLogsV2 || []).reduce((s, m) => s + (m.failurePoints || []).length, 0);
-  const _blCurrNoise = (o.topNoisyPatterns || []).length;
-  const _blCurrEnrich = Object.entries(o.fieldGaps || {}).filter(([, v]) => v > 0).length;
+  const _blCurrMissing = missingV2.length;
+  const _blCurrFPs = missingV2.reduce((s, m) => s + (m.failurePoints || []).length, 0);
+  const _blCurrNoise = topNoisy.length;
+  const _blCurrEnrich = Object.entries(fieldGapsData).filter(([, v]) => v > 0).length;
   const _blCurrTiers = {};
   ['critical', 'important', 'normal'].forEach(tier => {
-    const items = (o.missingCriticalLogsV2 || []).filter(m => m.riskTier === tier);
+    const items = missingV2.filter(m => m.riskTier === tier);
     _blCurrTiers[tier] = { modules: items.length, fps: items.reduce((s, m) => s + (m.failurePoints || []).length, 0) };
   });
 
@@ -2765,9 +2902,9 @@ function renderObservability(c) {
 
   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)' },
+    { label: 'Structured', count: catalog.filter(c => c.format === 'structured').length, color: 'var(--green)' },
+    { label: 'Mixed', count: catalog.filter(c => c.format === 'mixed').length, color: 'var(--yellow)' },
+    { label: 'Unstructured', count: catalog.filter(c => c.format === 'unstructured').length, color: 'var(--red)' },
   ].filter(x => x.count > 0);
 
   const recLabels = {
@@ -2779,9 +2916,9 @@ function renderObservability(c) {
   const hasAgent = !!D.agent;
 
   // Store catalog for buttons to reference by index (avoids inline JSON in onclick)
-  window.__obsCatalog = o.catalog;
+  window.__obsCatalog = catalog;
 
-  const noisyRows = o.topNoisyPatterns.map(i => {
+  const noisyRows = topNoisy.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>`
@@ -2796,7 +2933,7 @@ function renderObservability(c) {
   }).join('') || '<div class="obs-sub">Шумных паттернов не обнаружено</div>';
 
   // ── Missing critical logs (V2: grouped by risk tier with failure points) ──
-  const v2Data = o.missingCriticalLogsV2 || [];
+  const v2Data = missingV2;
   window.__obsMissingV2 = v2Data;
   const fpTypeLabels = {
     'empty-catch':'пустой catch','catch-no-log':'catch без лога','promise-catch-no-log':'.catch без лога',
@@ -2854,14 +2991,14 @@ function renderObservability(c) {
     missingSection = '<div class="obs-sub" style="color:var(--green)">Критичные сценарии покрыты</div>';
   }
 
-  const fieldGaps = o.fieldGaps || {};
+  const fieldGaps = fieldGapsData;
   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 affectedItems = 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);
+      const catIdx = 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 ? `
@@ -2884,7 +3021,7 @@ function renderObservability(c) {
     </div>`;
   }).join('') || '<div class="obs-sub" style="color:var(--green)">Все обязательные поля на месте</div>';
 
-  const catalogRows = o.catalog.map((i, idx) => {
+  const catalogRows = catalog.map((i, idx) => {
     const missing = (i.missingFields || []);
     const missingStr = missing.length ? missing.join(', ') : '—';
     const btn = hasAgent
@@ -2901,10 +3038,10 @@ function renderObservability(c) {
       ${btn}
     </div>`}).join('');
 
-  const noisyCount = o.topNoisyPatterns.length;
+  const noisyCount = topNoisy.length;
   const missingCount = v2Data.length;
   const enrichCount = fieldGapEntries.length;
-  const catalogCount = o.catalog.length;
+  const catalogCount = catalog.length;
 
   // ── Build progress banner comparing to baseline ──
   const _blItems = [];
@@ -2931,11 +3068,29 @@ function renderObservability(c) {
       <button onclick="obsResetBaseline('${_bsKey}')">обновить</button>
     </div>`;
 
+  // Feature drill-down header
+  const _featureHeader = filterFeatureKey ? (() => {
+    const isUnmapped = filterFeatureKey === '__unmapped__';
+    const bf = !isUnmapped && o.byFeature ? o.byFeature.find(f => f.key === filterFeatureKey) : null;
+    const label = isUnmapped ? 'Unmapped' : (bf ? bf.label : filterFeatureKey);
+    const color = isUnmapped ? '#e3b341' : (bf ? bf.color : '#484f58');
+    const score = bf ? bf.score : null;
+    return `<div class="feature-detail-header">
+      <button class="back-btn" onclick="setFeatureDrill(null)">← Все фичи</button>
+      <span class="feature-detail-name">
+        <span class="feature-dot" style="background:${color}"></span>
+        ${escapeHtml(label)}
+      </span>
+      ${score != null ? `<span style="font-size:20px;font-weight:700;color:${covColor(score)}">${score}%</span>` : ''}
+    </div>`;
+  })() : '';
+
   c.innerHTML = `
-    <div class="onboarding-block">
+    ${_featureHeader}
+    ${!filterFeatureKey ? `<div class="onboarding-block">
       <h3>Наблюдаемость: что это?</h3>
       <p>Аудит покрытия логами: что добавить, что убрать, что обогатить — на основе статического анализа лог-вызовов.</p>
-    </div>
+    </div>` : ''}
 
     ${_progressBanner}
     ${_baselineStrip}
@@ -3024,12 +3179,12 @@ function renderObservability(c) {
           <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);
+              const items = 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 catIdx = 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('');
@@ -3255,6 +3410,127 @@ function renderObservability(c) {
   switchObsTab(obsActiveTab);
 }
 
+function renderObsFeatureDetail(c) {
+  D.currentFeatureKey = drillFeatureKey;
+  renderObsGlobalDetail(c, drillFeatureKey);
+}
+
+function renderObsFeatureCards(c) {
+  const o = D.observability;
+  if (!o || !o.byFeature) return;
+
+  const q = searchQuery.toLowerCase();
+  const list = o.byFeature.filter(f =>
+    !q || f.label.toLowerCase().includes(q) || f.key.toLowerCase().includes(q)
+  );
+
+  // Global KPI strip (compact)
+  const gNoiseRatio  = Math.round(o.metrics.noise_ratio * 100);
+  const gStructPct   = Math.round(o.metrics.structured_completeness * 100);
+  const gActionPct   = Math.round(o.metrics.error_actionability * 100);
+  const gCoveragePct = Math.round(o.metrics.coverage_of_key_flows * 100);
+  function mc(val, good, warn, inv) {
+    if (inv) return val > warn ? 'var(--red)' : val > good ? 'var(--yellow)' : 'var(--green)';
+    return val < warn ? 'var(--red)' : val < good ? 'var(--yellow)' : 'var(--green)';
+  }
+
+  const globalStrip = `
+    <div class="obs-kpi-strip" style="margin-bottom:16px">
+      <div class="obs-kpi"><span class="obs-kpi-value" style="color:${mc(gNoiseRatio,10,30,true)}">${gNoiseRatio}%</span><span class="obs-kpi-label">Шум</span></div>
+      <div class="obs-kpi"><span class="obs-kpi-value" style="color:${mc(gStructPct,80,50,false)}">${gStructPct}%</span><span class="obs-kpi-label">Структ.</span></div>
+      <div class="obs-kpi"><span class="obs-kpi-value" style="color:${mc(gActionPct,80,50,false)}">${gActionPct}%</span><span class="obs-kpi-label">Actionable</span></div>
+      <div class="obs-kpi"><span class="obs-kpi-value" style="color:${mc(gCoveragePct,80,50,false)}">${gCoveragePct}%</span><span class="obs-kpi-label">Покрытие</span></div>
+    </div>`;
+
+  c.innerHTML = globalStrip + '<div class="features-grid" id="obsGrid"></div>';
+  const grid = document.getElementById('obsGrid');
+
+  list.forEach(f => {
+    const card = document.createElement('div');
+    card.className = 'feature-card';
+
+    // Per-feature baseline
+    const bsKey = String(f.key).replace(/[^a-z0-9_-]/gi, '_');
+    let bl = null;
+    try { bl = JSON.parse(localStorage.getItem('vr_obs_bl_' + bsKey) || 'null'); } catch(e) {}
+    const scoreDelta = bl && bl.score != null && f.score !== bl.score
+      ? (() => {
+        const diff = f.score - bl.score;
+        const good = diff > 0;
+        const color = good ? '#3fb950' : '#f85149';
+        const sign = diff > 0 ? '+' : '';
+        return `<span style="color:${color};font-size:11px;font-weight:700;margin-left:4px">(${sign}${diff})</span>`;
+      })() : '';
+
+    // Mini KPI
+    const n = Math.round(f.metrics.noise_ratio * 100);
+    const s = Math.round(f.metrics.structured_completeness * 100);
+    const a = Math.round(f.metrics.error_actionability * 100);
+    const cv = Math.round(f.metrics.coverage_of_key_flows * 100);
+
+    // Issue counts for badges
+    const issues = f.noisyPatternCount + f.missingCriticalCount + f.fieldGapCount;
+
+    card.innerHTML = `
+      <div class="feature-accent" style="background:${f.color}"></div>
+      <div class="feature-body">
+        <div class="feature-title">
+          <span>${escapeHtml(f.label)}</span>
+          <span class="feature-file-count">${f.catalogCount} лог-модулей</span>
+        </div>
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+          <span style="font-size:24px;font-weight:700;line-height:1;color:${covColor(f.score)}">${f.score}%</span>
+          ${scoreDelta}
+          <div style="flex:1">
+            <div style="font-size:10px;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.4px">Observability Score</div>
+            <div style="height:4px;background:var(--border);border-radius:2px;overflow:hidden">
+              <div style="width:${f.score}%;height:100%;background:${covColor(f.score)};border-radius:2px;transition:width 0.4s"></div>
+            </div>
+          </div>
+        </div>
+        <div style="display:flex;gap:12px;font-size:11px;color:var(--dim);margin-bottom:8px">
+          <span title="Шум">🔇 <span style="color:${mc(n,10,30,true)}">${n}%</span></span>
+          <span title="Структурированность">📋 <span style="color:${mc(s,80,50,false)}">${s}%</span></span>
+          <span title="Actionable ошибки">🎯 <span style="color:${mc(a,80,50,false)}">${a}%</span></span>
+          <span title="Покрытие сценариев">🛡️ <span style="color:${mc(cv,80,50,false)}">${cv}%</span></span>
+        </div>
+        ${issues > 0 ? `<div style="font-size:11px;color:var(--muted)">
+          ${f.noisyPatternCount ? `<span style="color:var(--red)">${f.noisyPatternCount} шум</span> ` : ''}
+          ${f.missingCriticalCount ? `<span style="color:var(--yellow)">${f.missingCriticalCount} без логов</span> ` : ''}
+          ${f.failurePointCount ? `<span style="color:var(--yellow)">${f.failurePointCount} точек отказа</span> ` : ''}
+          ${f.fieldGapCount ? `<span style="color:var(--muted)">${f.fieldGapCount} пробелов</span>` : ''}
+        </div>` : '<div style="font-size:11px;color:var(--green)">Всё ок</div>'}
+      </div>`;
+
+    card.onclick = () => setFeatureDrill(f.key);
+    card.onmousedown = (e) => { if (e.button === 1) e.preventDefault(); };
+    card.onauxclick = (e) => {
+      if (e.button !== 1) return;
+      e.preventDefault();
+      openFeatureInNewTab(f.key);
+    };
+    grid.appendChild(card);
+  });
+
+  // Unmapped card
+  const unmappedCatalog = o.catalog.filter(ci => !ci.featureKeys || ci.featureKeys.length === 0);
+  if (unmappedCatalog.length > 0) {
+    const uCard = document.createElement('div');
+    uCard.className = 'feature-card unmapped-card';
+    uCard.innerHTML = `
+      <div class="feature-accent" style="background:#e3b341"></div>
+      <div class="feature-body">
+        <div class="feature-title">
+          <span>Unmapped</span>
+          <span class="feature-file-count">${unmappedCatalog.length} лог-модулей</span>
+        </div>
+        <div style="font-size:12px;color:var(--dim);margin-top:4px">Модули с логами, не привязанные к фичам</div>
+      </div>`;
+    uCard.onclick = () => setFeatureDrill('__unmapped__');
+    grid.appendChild(uCard);
+  }
+}
+
 function backToFeatureDetail() {
   drillTestType = null;
   activePanelKey = null;
@@ -3329,6 +3605,258 @@ function renderObservabilityOverview(c) {
     </div>`;
 }
 
+// ─── Documentation screen ─────────────────────────────────────────────────────
+
+function renderDocumentation(c) {
+  const doc = D.documentation;
+  if (!doc) {
+    c.innerHTML = `<div class="onboarding-block"><h3>Документация</h3><p>Данные документации недоступны. Убедитесь, что в проекте есть <code>viberadar.config.json</code> с фичами и пересканируйте проект.</p></div>`;
+    return;
+  }
+  if (drillFeatureKey) renderDocFeatureDetail(c);
+  else renderDocFeatureCards(c);
+}
+
+function renderDocFeatureCards(c) {
+  const doc = D.documentation;
+  if (!doc || !doc.features.length) {
+    c.innerHTML = `<div class="onboarding-block"><h3>Документация</h3><p>Фичи не найдены. Добавьте фичи в viberadar.config.json.</p></div>`;
+    return;
+  }
+
+  const q = searchQuery.toLowerCase();
+  const filtered = doc.features.filter(f => !q || f.label.toLowerCase().includes(q) || f.key.toLowerCase().includes(q));
+
+  const docPct = doc.totalFeatures > 0 ? Math.round(((doc.freshCount + doc.staleCount) / doc.totalFeatures) * 100) : 0;
+
+  let html = `
+    <div class="doc-kpi-strip">
+      <div class="doc-kpi"><span class="doc-kpi-val">${doc.totalFeatures}</span><span class="doc-kpi-lbl">Всего фич</span></div>
+      <div class="doc-kpi"><span class="doc-kpi-val" style="color:var(--green)">${doc.freshCount}</span><span class="doc-kpi-lbl">Актуальных</span></div>
+      <div class="doc-kpi"><span class="doc-kpi-val" style="color:var(--yellow)">${doc.staleCount}</span><span class="doc-kpi-lbl">Устаревших</span></div>
+      <div class="doc-kpi"><span class="doc-kpi-val" style="color:var(--red)">${doc.missingCount}</span><span class="doc-kpi-lbl">Без доки</span></div>
+      <div class="doc-kpi"><span class="doc-kpi-val">${docPct}%</span><span class="doc-kpi-lbl">Задокументировано</span></div>
+    </div>
+    <div class="features-grid">`;
+
+  for (const f of filtered) {
+    const statusColor = !f.docExists ? 'var(--red)' : f.isStale ? 'var(--yellow)' : 'var(--green)';
+    const statusText = !f.docExists ? 'Отсутствует' : f.isStale ? `Устарела (${f.changedFilesSinceDoc.length} файл.)` : 'Актуальна';
+    const statusDot = `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${statusColor};margin-right:6px"></span>`;
+    const lastUpd = f.lastUpdated ? new Date(f.lastUpdated).toLocaleDateString('ru-RU') : '—';
+    const freshFiles = f.docExists ? (f.sourceFileCount - f.changedFilesSinceDoc.length) : 0;
+    const progressPct = f.sourceFileCount > 0 ? Math.round((freshFiles / f.sourceFileCount) * 100) : 0;
+    const progressColor = !f.docExists ? 'var(--red)' : f.isStale ? 'var(--yellow)' : 'var(--green)';
+
+    const agentTask = !f.docExists ? 'generate-docs' : f.isStale ? 'update-docs' : null;
+    const agentLabel = !f.docExists ? 'Написать доку' : f.isStale ? 'Обновить доку' : '';
+    const agentBtn = agentTask
+      ? `<button class="agent-card-btn doc-agent-btn" data-task="${agentTask}" data-key="${f.key}" style="margin-top:8px">${agentLabel}</button>`
+      : `<div style="margin-top:8px;font-size:11px;color:var(--green)">Документация актуальна</div>`;
+
+    html += `
+      <div class="feature-card doc-feature-card" data-key="${f.key}">
+        <div class="feature-accent" style="background:${f.color}"></div>
+        <div class="feature-body">
+          <div class="feature-title">
+            <span>${escapeHtml(f.label)}</span>
+            <span class="feature-file-count">${f.sourceFileCount} файл.</span>
+          </div>
+          <div style="display:flex;align-items:center;gap:4px;margin:6px 0;font-size:12px">
+            ${statusDot}<span style="color:${statusColor};font-weight:600">${statusText}</span>
+          </div>
+          <div style="font-size:11px;color:var(--muted);margin-bottom:6px">Обновлено: ${lastUpd}</div>
+          <div class="feature-progress-bar">
+            <div class="feature-progress-fill" style="width:${f.docExists ? progressPct : 0}%;background:${progressColor}"></div>
+          </div>
+          <div class="feature-progress-label">${f.docExists ? (f.isStale ? `${f.changedFilesSinceDoc.length} из ${f.sourceFileCount} изменены` : `${f.sourceFileCount} из ${f.sourceFileCount} актуальны`) : 'Документация отсутствует'}</div>
+          ${agentBtn}
+        </div>
+      </div>`;
+  }
+  html += '</div>';
+  c.innerHTML = html;
+
+  // Card click → drill-down
+  c.querySelectorAll('.doc-feature-card').forEach(card => {
+    card.addEventListener('click', (e) => {
+      if (e.target.closest('.doc-agent-btn')) return;
+      setFeatureDrill(card.dataset.key);
+    });
+  });
+
+  // Agent button clicks
+  c.querySelectorAll('.doc-agent-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      runAgentTask(btn.dataset.task, btn.dataset.key);
+    });
+  });
+}
+
+// Lightweight markdown → HTML renderer
+function renderMarkdownToHtml(md) {
+  let html = '';
+  const lines = md.split('\n');
+  let inCodeBlock = false;
+  let codeBlockContent = '';
+  let inList = false;
+  let listType = '';
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // Code blocks
+    if (line.trimStart().startsWith('```')) {
+      if (inCodeBlock) {
+        html += `<pre class="doc-code"><code>${escapeHtml(codeBlockContent.trimEnd())}</code></pre>`;
+        codeBlockContent = '';
+        inCodeBlock = false;
+      } else {
+        if (inList) { html += listType === 'ul' ? '</ul>' : '</ol>'; inList = false; }
+        inCodeBlock = true;
+      }
+      continue;
+    }
+    if (inCodeBlock) {
+      codeBlockContent += line + '\n';
+      continue;
+    }
+
+    // Headings
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      if (inList) { html += listType === 'ul' ? '</ul>' : '</ol>'; inList = false; }
+      const level = headingMatch[1].length;
+      html += `<h${level} class="doc-h">${inlineFormat(headingMatch[2])}</h${level}>`;
+      continue;
+    }
+
+    // Unordered list
+    if (/^\s*[-*]\s+/.test(line)) {
+      if (!inList || listType !== 'ul') {
+        if (inList) html += listType === 'ul' ? '</ul>' : '</ol>';
+        html += '<ul class="doc-list">';
+        inList = true;
+        listType = 'ul';
+      }
+      html += `<li>${inlineFormat(line.replace(/^\s*[-*]\s+/, ''))}</li>`;
+      continue;
+    }
+
+    // Ordered list
+    if (/^\s*\d+\.\s+/.test(line)) {
+      if (!inList || listType !== 'ol') {
+        if (inList) html += listType === 'ul' ? '</ul>' : '</ol>';
+        html += '<ol class="doc-list">';
+        inList = true;
+        listType = 'ol';
+      }
+      html += `<li>${inlineFormat(line.replace(/^\s*\d+\.\s+/, ''))}</li>`;
+      continue;
+    }
+
+    // End list
+    if (inList && line.trim() === '') {
+      html += listType === 'ul' ? '</ul>' : '</ol>';
+      inList = false;
+    }
+
+    // Empty line
+    if (line.trim() === '') continue;
+
+    // Paragraph
+    if (!inList) {
+      html += `<p class="doc-p">${inlineFormat(line)}</p>`;
+    }
+  }
+
+  if (inCodeBlock) {
+    html += `<pre class="doc-code"><code>${escapeHtml(codeBlockContent.trimEnd())}</code></pre>`;
+  }
+  if (inList) html += listType === 'ul' ? '</ul>' : '</ol>';
+  return html;
+}
+
+function inlineFormat(text) {
+  let s = escapeHtml(text);
+  s = s.replace(/`([^`]+)`/g, '<code class="doc-inline-code">$1</code>');
+  s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+  s = s.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+  s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" style="color:var(--blue)">$1</a>');
+  return s;
+}
+
+let docContentCache = {};
+
+async function renderDocFeatureDetail(c) {
+  const doc = D.documentation;
+  const f = doc?.features.find(x => x.key === drillFeatureKey);
+  if (!f) {
+    c.innerHTML = `<div class="onboarding-block"><p>Фича не найдена.</p></div>`;
+    return;
+  }
+
+  const statusColor = !f.docExists ? 'var(--red)' : f.isStale ? 'var(--yellow)' : 'var(--green)';
+  const statusText = !f.docExists ? 'Отсутствует' : f.isStale ? `Устарела (${f.changedFilesSinceDoc.length} файл.)` : 'Актуальна';
+  const statusDot = `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${statusColor};margin-right:6px"></span>`;
+  const lastUpd = f.lastUpdated ? new Date(f.lastUpdated).toLocaleDateString('ru-RU') : '—';
+
+  const agentTask = !f.docExists ? 'generate-docs' : f.isStale ? 'update-docs' : null;
+  const agentLabel = !f.docExists ? 'Сгенерировать документацию' : f.isStale ? `Обновить документацию (${f.changedFilesSinceDoc.length} файл.)` : '';
+
+  let changedFilesHtml = '';
+  if (f.isStale && f.changedFilesSinceDoc.length > 0) {
+    changedFilesHtml = `
+      <div class="doc-changed-section">
+        <div class="doc-changed-header" onclick="this.parentElement.classList.toggle('open')">
+          Изменённые файлы (${f.changedFilesSinceDoc.length})
+          <span class="doc-changed-arrow">&#9654;</span>
+        </div>
+        <div class="doc-changed-list">
+          ${f.changedFilesSinceDoc.map(fp => `<div class="doc-changed-file">${escapeHtml(fp)}</div>`).join('')}
+        </div>
+      </div>`;
+  }
+
+  let docContentHtml = '';
+  if (f.docExists) {
+    // Fetch content if not cached
+    if (!docContentCache[f.key]) {
+      try {
+        const resp = await fetch('/api/docs/content?feature=' + encodeURIComponent(f.key));
+        const data = await resp.json();
+        if (data.exists && data.content) docContentCache[f.key] = data.content;
+      } catch {}
+    }
+    const raw = docContentCache[f.key] || '';
+    docContentHtml = raw ? `<div class="doc-content">${renderMarkdownToHtml(raw)}</div>` : '<div style="color:var(--muted);padding:16px">Не удалось загрузить содержимое документации.</div>';
+  } else {
+    docContentHtml = `<div style="color:var(--muted);padding:16px;text-align:center">Документация ещё не создана. Нажмите кнопку ниже, чтобы сгенерировать.</div>`;
+  }
+
+  c.innerHTML = `
+    <div style="margin-bottom:16px">
+      <button class="back-btn" id="docBackBtn">&#8592; Все фичи</button>
+    </div>
+    <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
+      <div style="width:4px;height:28px;border-radius:2px;background:${f.color}"></div>
+      <h2 style="margin:0;font-size:18px;color:var(--text)">${escapeHtml(f.label)}</h2>
+      <div style="display:flex;align-items:center;font-size:13px">${statusDot}<span style="color:${statusColor};font-weight:600">${statusText}</span></div>
+      <span style="font-size:12px;color:var(--muted)">Обновлено: ${lastUpd}</span>
+    </div>
+    ${agentTask ? `<div style="margin-bottom:16px"><button class="agent-card-btn doc-detail-agent-btn" data-task="${agentTask}" data-key="${f.key}">${agentLabel}</button></div>` : ''}
+    ${changedFilesHtml}
+    ${docContentHtml}`;
+
+  document.getElementById('docBackBtn').onclick = () => backToFeatures();
+
+  const detailAgentBtn = c.querySelector('.doc-detail-agent-btn');
+  if (detailAgentBtn) {
+    detailAgentBtn.onclick = () => runAgentTask(detailAgentBtn.dataset.task, detailAgentBtn.dataset.key);
+  }
+}
+
 function renderFeatureCards(c) {
   if (!D.hasConfig || !D.features) {
     c.innerHTML = `
@@ -4435,6 +4963,7 @@ async function refreshData() {
   try {
     const res = await fetch('/api/data');
     D = await res.json();
+    docContentCache = {};
 
     // Update header timestamp
     document.getElementById('scannedAt').textContent =