viberadar 0.3.78 → 0.3.80

package/dist/ui/dashboard.html

@@ -787,6 +787,78 @@
     .obs-hint-label.before { color: var(--red); }
     .obs-hint-label.after { color: var(--green); }
 
+    /* ── Progress & baseline delta badges ── */
+    .obs-kpi-delta {
+      display: block; font-size: 11px; font-weight: 700; margin-top: 2px; letter-spacing: 0.01em;
+    }
+    .obs-baseline-strip {
+      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+      padding: 4px 12px; background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.07); border-radius: 6px;
+      font-size: 11px; color: var(--dim); margin-bottom: 6px;
+    }
+    .obs-baseline-strip button {
+      background: none; border: none; color: var(--accent); cursor: pointer;
+      font-size: 11px; padding: 0 2px; text-decoration: underline; text-underline-offset: 2px;
+    }
+    .obs-progress-banner {
+      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+      padding: 8px 14px;
+      background: rgba(63,185,80,0.07); border: 1px solid rgba(63,185,80,0.2);
+      border-radius: 8px; margin-bottom: 8px; font-size: 12px;
+    }
+    .obs-progress-banner.has-regression {
+      background: rgba(248,81,73,0.07); border-color: rgba(248,81,73,0.2);
+    }
+    .obs-pb-title { color: #3fb950; font-weight: 700; font-size: 13px; flex-shrink: 0; }
+    .obs-pb-title.mixed { color: var(--yellow); }
+    .obs-pb-item { color: #3fb950; white-space: nowrap; }
+    .obs-pb-worse { color: #f85149; white-space: nowrap; }
+
+    /* ── Floating selection action bar ── */
+    .obs-floating-bar {
+      position: fixed;
+      bottom: -80px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 300;
+      display: flex; align-items: center; gap: 12px;
+      background: #1c2128;
+      border: 1px solid var(--accent);
+      border-radius: 10px;
+      padding: 10px 10px 10px 16px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(88,166,255,0.15);
+      min-width: 340px;
+      transition: bottom 0.25s cubic-bezier(0.34,1.56,0.64,1);
+      pointer-events: none;
+      opacity: 0;
+    }
+    .obs-floating-bar.visible {
+      bottom: 28px;
+      pointer-events: auto;
+      opacity: 1;
+    }
+    .obs-floating-count {
+      color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap;
+    }
+    .obs-floating-label {
+      color: var(--muted); font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .obs-floating-btn {
+      padding: 8px 18px; font-size: 13px; font-weight: 600;
+      background: var(--accent); color: var(--bg);
+      border: none; border-radius: 6px; cursor: pointer; min-height: 36px;
+      white-space: nowrap; flex-shrink: 0;
+      transition: opacity 0.1s;
+    }
+    .obs-floating-btn:hover { opacity: 0.85; }
+    .obs-floating-dismiss {
+      background: none; border: none; color: var(--dim); cursor: pointer;
+      font-size: 16px; padding: 4px 6px; line-height: 1; flex-shrink: 0;
+      border-radius: 4px; transition: color 0.1s;
+    }
+    .obs-floating-dismiss:hover { color: var(--text); }
+
     .file-row-err-badge {
       display: inline-flex; align-items: center;
       font-size: 11px; padding: 1px 6px; border-radius: 10px;
@@ -1219,6 +1291,13 @@
   <div id="panelContent"></div>
 </div>
 
+<div class="obs-floating-bar" id="obsFloatingBar">
+  <span class="obs-floating-count" id="obsFloatingCount">0 выбрано</span>
+  <span class="obs-floating-label" id="obsFloatingLabel"></span>
+  <button class="obs-floating-btn" id="obsFloatingBtn" onclick="obsDispatchFloating()">запустить</button>
+  <button class="obs-floating-dismiss" title="Снять выделение" onclick="obsFloatingDismiss()">✕</button>
+</div>
+
 <div class="agent-panel" id="agentPanel">
   <div class="agent-panel-header">
     <span class="agent-panel-title" id="agentPanelTitle">🤖 Agent</span>
@@ -2237,9 +2316,76 @@ function obsUpdateSelectedCount(groupId) {
   const checked = container.querySelectorAll('input[type="checkbox"]:checked').length;
   const btn = container.querySelector('.obs-run-selected');
   if (btn) {
-    btn.textContent = checked > 0 ? `исправить выбранные (${checked})` : 'исправить выбранные';
+    const baseLabel = btn.dataset.baseLabel || btn.textContent.replace(/\s*\(\d+\)$/, '');
+    btn.dataset.baseLabel = baseLabel;
+    btn.textContent = checked > 0 ? `${baseLabel} (${checked})` : baseLabel;
     btn.disabled = checked === 0;
   }
+  // Update floating action bar
+  const bar = document.getElementById('obsFloatingBar');
+  if (!bar) return;
+  if (checked > 0) {
+    const action = container.dataset.obsAction || '';
+    const actionLabels = { missing: 'добавить логи', field: 'обогатить поля', rec: 'исправить' };
+    const groupLabel = container.dataset.obsLabel || '';
+    bar.dataset.groupId = groupId;
+    document.getElementById('obsFloatingCount').textContent = `${checked} выбрано`;
+    document.getElementById('obsFloatingLabel').textContent = groupLabel;
+    document.getElementById('obsFloatingBtn').textContent = actionLabels[action] || 'исправить';
+    bar.classList.add('visible');
+  } else {
+    if (bar.dataset.groupId === groupId) {
+      bar.classList.remove('visible');
+      delete bar.dataset.groupId;
+    }
+  }
+}
+
+function obsDispatchFloating() {
+  const bar = document.getElementById('obsFloatingBar');
+  if (!bar) return;
+  const groupId = bar.dataset.groupId;
+  if (!groupId) return;
+  const container = document.getElementById('obs-detail-' + groupId);
+  if (!container) return;
+  const action = container.dataset.obsAction || '';
+  if (action === 'missing') {
+    obsMissingRunSelected(groupId);
+  } else {
+    const meta = container.dataset.obsMeta ? JSON.parse(container.dataset.obsMeta) : {};
+    obsRunSelected(groupId, 'obs-fix-selected', meta);
+  }
+  bar.classList.remove('visible');
+}
+
+function obsTimeAgo(ts) {
+  const s = Math.floor((Date.now() - ts) / 1000);
+  if (s < 60) return `${s}с назад`;
+  if (s < 3600) return `${Math.floor(s / 60)} мин назад`;
+  if (s < 86400) return `${Math.floor(s / 3600)}ч назад`;
+  return `${Math.floor(s / 86400)}д назад`;
+}
+
+function obsResetBaseline(key) {
+  try { localStorage.removeItem('vr_obs_bl_' + key); } catch(e) {}
+  const c = document.getElementById('content');
+  if (c) renderObservability(c);
+}
+
+function obsFloatingDismiss() {
+  const bar = document.getElementById('obsFloatingBar');
+  if (!bar) return;
+  const groupId = bar.dataset.groupId;
+  if (groupId) {
+    const container = document.getElementById('obs-detail-' + groupId);
+    if (container) {
+      container.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
+      const btn = container.querySelector('.obs-run-selected');
+      if (btn) { btn.textContent = btn.dataset.baseLabel || btn.textContent.replace(/\s*\(\d+\)$/, ''); btn.disabled = true; }
+    }
+    delete bar.dataset.groupId;
+  }
+  bar.classList.remove('visible');
 }
 
 function obsToggleAll(groupId) {
@@ -2576,6 +2722,47 @@ function renderObservability(c) {
     return val < warnThreshold ? 'var(--red)' : val < goodThreshold ? 'var(--yellow)' : 'var(--green)';
   }
 
+  // ── Baseline & delta tracking ──
+  const _bsKey = String(D.currentFeatureKey || 'global').replace(/[^a-z0-9_-]/gi, '_');
+  let _bl = null;
+  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 _blCurrTiers = {};
+  ['critical', 'important', 'normal'].forEach(tier => {
+    const items = (o.missingCriticalLogsV2 || []).filter(m => m.riskTier === tier);
+    _blCurrTiers[tier] = { modules: items.length, fps: items.reduce((s, m) => s + (m.failurePoints || []).length, 0) };
+  });
+
+  if (!_bl) {
+    _bl = { ts: Date.now(), noiseRatio, structPct, actionPct, coveragePct,
+            missing: _blCurrMissing, fps: _blCurrFPs, noise: _blCurrNoise, enrich: _blCurrEnrich,
+            tiers: _blCurrTiers };
+    try { localStorage.setItem('vr_obs_bl_' + _bsKey, JSON.stringify(_bl)); } catch(e) {}
+  }
+
+  // Delta badge helpers
+  const _d = (curr, base, invert = false) => {
+    if (base == null || curr === base) return '';
+    const diff = curr - base;
+    const good = invert ? diff > 0 : diff < 0;
+    const color = good ? '#3fb950' : '#f85149';
+    const sign = diff > 0 ? '+' : '';
+    return `<span style="color:${color};font-size:11px;font-weight:700;margin-left:5px">(${sign}${diff})</span>`;
+  };
+  const _dp = (curr, base, invert = false) => {
+    if (base == null || curr === base) return '';
+    const diff = curr - base;
+    const good = invert ? diff > 0 : diff < 0;
+    const color = good ? '#3fb950' : '#f85149';
+    const arrow = good ? '↓' : '↑';
+    return `<span class="obs-kpi-delta" style="color:${color}">${arrow}${Math.abs(diff)}%</span>`;
+  };
+
   const formatLabels = { structured: 'structured', mixed: 'mixed', unstructured: 'unstructured' };
   const sourceByFormat = [
     { label: 'Structured', count: o.catalog.filter(c => c.format === 'structured').length, color: 'var(--green)' },
@@ -2645,17 +2832,18 @@ function renderObservability(c) {
       }).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 id="obs-detail-${groupId}" class="obs-detail" data-obs-action="missing" data-obs-label="${tierLabels[tier]}">
           <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>` : '';
+      const _blTier = _bl?.tiers?.[tier];
       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>
+          <span>${items.length}${_d(items.length, _blTier?.modules)} модулей, ${totalFPs}${_d(totalFPs, _blTier?.fps)} точек отказа</span>
           ${expandBtn}
         </div>
         ${detail}
@@ -2677,7 +2865,7 @@ function renderObservability(c) {
       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 id="obs-detail-${groupId}" class="obs-detail" data-obs-action="field" data-obs-meta='{"fieldName":"${escapeHtml(name)}"}' data-obs-label="поле ${escapeHtml(name)}">
         <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>
@@ -2718,27 +2906,59 @@ function renderObservability(c) {
   const enrichCount = fieldGapEntries.length;
   const catalogCount = o.catalog.length;
 
+  // ── Build progress banner comparing to baseline ──
+  const _blItems = [];
+  if (_bl.missing != null && missingCount !== _bl.missing)
+    _blItems.push({ label: `модулей без логов: ${_bl.missing} → ${missingCount}`, good: missingCount < _bl.missing });
+  if (_bl.fps != null && _blCurrFPs !== _bl.fps)
+    _blItems.push({ label: `точек отказа: ${_bl.fps} → ${_blCurrFPs}`, good: _blCurrFPs < _bl.fps });
+  if (_bl.noise != null && noisyCount !== _bl.noise)
+    _blItems.push({ label: `шумных паттернов: ${_bl.noise} → ${noisyCount}`, good: noisyCount < _bl.noise });
+  if (_bl.enrich != null && enrichCount !== _bl.enrich)
+    _blItems.push({ label: `нужно обогатить: ${_bl.enrich} → ${enrichCount}`, good: enrichCount < _bl.enrich });
+
+  const _hasReg = _blItems.some(x => !x.good);
+  const _hasImp = _blItems.some(x => x.good);
+  const _progressBanner = _blItems.length ? `
+    <div class="obs-progress-banner${_hasReg ? ' has-regression' : ''}">
+      <span class="obs-pb-title${_hasReg && _hasImp ? ' mixed' : _hasReg ? ' obs-pb-worse' : ''}">📊 прогресс</span>
+      ${_blItems.map(it => `<span class="${it.good ? 'obs-pb-item' : 'obs-pb-worse'}">${it.good ? '✅' : '⚠️'} ${it.label}</span>`).join('')}
+    </div>` : '';
+
+  const _baselineStrip = `
+    <div class="obs-baseline-strip">
+      <span>📍 baseline: ${obsTimeAgo(_bl.ts)}</span>
+      <button onclick="obsResetBaseline('${_bsKey}')">обновить</button>
+    </div>`;
+
   c.innerHTML = `
     <div class="onboarding-block">
       <h3>Наблюдаемость: что это?</h3>
       <p>Аудит покрытия логами: что добавить, что убрать, что обогатить — на основе статического анализа лог-вызовов.</p>
     </div>
 
+    ${_progressBanner}
+    ${_baselineStrip}
+
     <div class="obs-kpi-strip">
       <div class="obs-kpi">
         <span class="obs-kpi-value" style="color:${metricColor(noiseRatio,10,30,true)}">${noiseRatio}%</span>
+        ${_dp(noiseRatio, _bl?.noiseRatio, true)}
         <span class="obs-kpi-label">Шум</span>
       </div>
       <div class="obs-kpi">
         <span class="obs-kpi-value" style="color:${metricColor(structPct,80,50,false)}">${structPct}%</span>
+        ${_dp(structPct, _bl?.structPct)}
         <span class="obs-kpi-label">Структурированность</span>
       </div>
       <div class="obs-kpi">
         <span class="obs-kpi-value" style="color:${metricColor(actionPct,80,50,false)}">${actionPct}%</span>
+        ${_dp(actionPct, _bl?.actionPct)}
         <span class="obs-kpi-label">Actionable ошибки</span>
       </div>
       <div class="obs-kpi">
         <span class="obs-kpi-value" style="color:${metricColor(coveragePct,80,50,false)}">${coveragePct}%</span>
+        ${_dp(coveragePct, _bl?.coveragePct)}
         <span class="obs-kpi-label">Покрытие сценариев</span>
       </div>
     </div>
@@ -2814,7 +3034,7 @@ function renderObservability(c) {
                 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 id="obs-detail-${groupId}" class="obs-detail" data-obs-action="rec" data-obs-meta='{"recommendationType":"${rec}"}' data-obs-label="${recLabels[rec] || rec}">
                   <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>

package/package.json

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