viberadar 0.3.216 → 0.3.217

package/dist/ui/dashboard.html

@@ -1555,10 +1555,31 @@
     background: transparent; color: var(--muted); font-size: 11px; cursor: pointer;
   }
   .load-script-del-btn:hover { border-color: var(--red); color: var(--red); }
-  .load-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-  .load-chart-box { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px; }
-  .load-chart-label { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
-  .load-chart-box canvas { display: block; width: 100%; height: 100px; }
+  .load-live-shell { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 14px; align-items: stretch; }
+  .load-progress-card {
+    background: linear-gradient(180deg, rgba(88,166,255,0.10), rgba(13,17,23,0));
+    border: 1px solid rgba(88,166,255,0.28); border-radius: 8px; padding: 16px;
+    display: flex; flex-direction: column; justify-content: space-between; min-height: 170px;
+  }
+  .load-progress-value { font-size: 52px; line-height: 1; font-weight: 800; color: var(--text); letter-spacing: 0; }
+  .load-progress-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; }
+  .load-progress-bar { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-top: 14px; }
+  .load-progress-fill { height: 100%; background: var(--blue); border-radius: inherit; transition: width 0.25s ease; }
+  .load-live-kpis { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 8px; margin-bottom: 10px; }
+  .load-live-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; min-width: 0; }
+  .load-live-kpi-val { font-size: 20px; font-weight: 750; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .load-live-kpi-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
+  .load-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .load-chart-box { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 10px; min-width: 0; }
+  .load-chart-label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
+  .load-chart-value { color: var(--text); font-weight: 700; }
+  .load-chart-box canvas { display: block; width: 100%; height: 128px; }
+  .load-chart-empty { height:128px; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:12px; border:1px dashed var(--border); border-radius:6px; }
+  @media (max-width: 760px) {
+    .load-live-shell { grid-template-columns: 1fr; }
+    .load-live-kpis { grid-template-columns: 1fr 1fr; }
+    .load-charts { grid-template-columns: 1fr; }
+  }
   .load-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
   .load-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px; text-align: center; }
   .load-kpi-val { font-size: 20px; font-weight: 700; }
@@ -1794,6 +1815,7 @@ let loadDataDirDraft = '';
 let loadResultDirDraft = '';
 let loadAccountsJsonDraft = '';
 let loadImportedEnvVarsDraft = {};
+let loadLiveUiTimer = null;
 let loadView = 'library';     // 'library' | 'editor'
 
 function toggleObsHint(id) {
@@ -7660,20 +7682,87 @@ function generateScriptFromFeature(featureKey) {
   });
 }
 
-function drawLoadCharts() {
-  if (!loadBuckets || loadBuckets.length === 0) return;
-  drawLoadChart('loadChartRps',     loadBuckets, b => b.count / 2,                 'var(--blue)',   'RPS');
-  drawLoadChart('loadChartLatency', loadBuckets, b => b.count > 0 ? b.durSum / b.count : 0, 'var(--green)',  'Latency avg (ms)');
-  drawLoadChart('loadChartErrors',  loadBuckets, b => b.count > 0 ? (b.errors / b.count) * 100 : 0, 'var(--red)', 'Error %');
-  drawLoadChart('loadChartVus',     loadBuckets, b => b.vus,                        'var(--yellow)', 'VUs');
-}
-
+function drawLoadCharts() {
+  if (!loadBuckets || loadBuckets.length === 0) return;
+  drawLoadChart('loadChartRps',     loadBuckets, b => b.count / 2,                 'var(--blue)',   'RPS');
+  drawLoadChart('loadChartLatency', loadBuckets, b => b.count > 0 ? b.durSum / b.count : 0, 'var(--green)',  'Latency avg (ms)');
+  drawLoadChart('loadChartErrors',  loadBuckets, b => b.count > 0 ? (b.errors / b.count) * 100 : 0, 'var(--red)', 'Error %');
+  drawLoadChart('loadChartVus',     loadBuckets, b => b.vus,                        'var(--yellow)', 'VUs');
+}
+
+function parseLoadDurationMs(value) {
+  const text = String(value || '').trim();
+  if (!text) return 0;
+  let total = 0;
+  const re = /(\d+(?:\.\d+)?)\s*(ms|s|m|h)/gi;
+  let match;
+  while ((match = re.exec(text))) {
+    const n = Number(match[1]);
+    const unit = match[2].toLowerCase();
+    total += unit === 'h' ? n * 3600000 : unit === 'm' ? n * 60000 : unit === 's' ? n * 1000 : n;
+  }
+  if (total > 0) return total;
+  const asNum = Number(text);
+  return Number.isFinite(asNum) ? asNum * 1000 : 0;
+}
+
+function estimateLoadDurationMs(state) {
+  const cfg = state?.config || {};
+  const base = parseLoadDurationMs(cfg.duration || loadDurationDraft);
+  if (!base) return 0;
+  return cfg.executionMode === 'script' ? base + 60000 : base;
+}
+
+function formatLoadTime(ms) {
+  if (!ms || ms < 0) return '0s';
+  const sec = Math.floor(ms / 1000);
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return m > 0 ? `${m}m ${String(s).padStart(2, '0')}s` : `${s}s`;
+}
+
+function getLoadLiveStats() {
+  const state = loadState || {};
+  const buckets = loadBuckets || [];
+  const last = buckets[buckets.length - 1] || { count: 0, errors: 0, durSum: 0, vus: 0 };
+  const total = state.totalRequests || buckets.reduce((sum, b) => sum + (b.count || 0), 0);
+  const errors = state.totalErrors || buckets.reduce((sum, b) => sum + (b.errors || 0), 0);
+  const recent = buckets.slice(-5);
+  const recentReqs = recent.reduce((sum, b) => sum + (b.count || 0), 0);
+  const recentErrors = recent.reduce((sum, b) => sum + (b.errors || 0), 0);
+  const recentDur = recent.reduce((sum, b) => sum + (b.durSum || 0), 0);
+  const currentRps = last.count ? last.count / 2 : 0;
+  const avgMs = recentReqs > 0 ? recentDur / recentReqs : 0;
+  const errorPct = recentReqs > 0 ? (recentErrors / recentReqs) * 100 : (total > 0 ? (errors / total) * 100 : 0);
+  const start = state.startTime || Date.now();
+  const end = state.endTime || Date.now();
+  const elapsedMs = Math.max(0, end - start);
+  const estimateMs = estimateLoadDurationMs(state);
+  let progressPct = estimateMs > 0 ? Math.min(99, Math.round((elapsedMs / estimateMs) * 100)) : 0;
+  if (state.status === 'done' || state.status === 'stopped' || state.status === 'error') progressPct = 100;
+  return { total, errors, currentRps, avgMs, errorPct, vus: last.vus || 0, elapsedMs, estimateMs, progressPct, hasBuckets: buckets.length > 0 };
+}
+
+function updateLoadLiveStats() {
+  const stats = getLoadLiveStats();
+  const setText = (id, text) => { const el = document.getElementById(id); if (el) el.textContent = text; };
+  setText('loadProgressValue', `${stats.progressPct}%`);
+  setText('loadElapsedValue', stats.estimateMs ? `${formatLoadTime(stats.elapsedMs)} / ${formatLoadTime(stats.estimateMs)}` : formatLoadTime(stats.elapsedMs));
+  setText('loadTotalRequestsValue', String(Math.round(stats.total || 0)));
+  setText('loadRpsValue', stats.currentRps.toFixed(1));
+  setText('loadAvgValue', stats.avgMs ? `${Math.round(stats.avgMs)} ms` : '—');
+  setText('loadErrorValue', `${stats.errorPct.toFixed(2)}%`);
+  setText('loadVuValue', String(Math.round(stats.vus || 0)));
+  const fill = document.getElementById('loadProgressFill');
+  if (fill) fill.style.width = `${stats.progressPct}%`;
+}
+
 function drawLoadChart(id, buckets, valFn, color, label) {
-  const canvas = document.getElementById(id);
-  if (!canvas) return;
-  const dpr = window.devicePixelRatio || 1;
-  const W = canvas.offsetWidth || 380;
-  const H = 100;
+  const canvas = document.getElementById(id);
+  if (!canvas) return;
+  const dpr = window.devicePixelRatio || 1;
+  const W = canvas.offsetWidth || 380;
+  const H = 128;
   canvas.width  = W * dpr;
   canvas.height = H * dpr;
   const ctx = canvas.getContext('2d');
@@ -8055,10 +8144,13 @@ function renderLoad(c) {
     loadState.status === 'stopped' ? '<span class="load-status-badge load-status-stopped">■ Остановлено</span>' :
     '<span class="load-status-badge load-status-error">✗ Ошибка</span>';
 
-  const summary = (loadState && loadState.summary) || {};
-  const hasSummary = isDone && summary && Object.keys(summary).length > 0;
-
-  c.innerHTML = `<div class="load-screen">
+  const summary = (loadState && loadState.summary) || {};
+  const hasSummary = isDone && summary && Object.keys(summary).length > 0;
+  const liveStats = getLoadLiveStats();
+  const elapsedText = liveStats.estimateMs ? `${formatLoadTime(liveStats.elapsedMs)} / ${formatLoadTime(liveStats.estimateMs)}` : formatLoadTime(liveStats.elapsedMs);
+  const chartEmpty = '<div class="load-chart-empty">Жду первые точки k6 metrics.ndjson</div>';
+
+  c.innerHTML = `<div class="load-screen">
 
     <div class="load-editor-topbar">
       ${!isRunning ? `<button class="load-back-btn" onclick="loadView='library';renderContent()">← Все тесты</button>` : ''}
@@ -8115,15 +8207,40 @@ function renderLoad(c) {
       </div>
     </div>
 
-    ${(isRunning || isDone || hasErr) ? `<div class="load-section">
-      <div class="load-section-title">Живые метрики</div>
-      <div class="load-charts">
-        <div class="load-chart-box"><div class="load-chart-label">Запросов/сек (RPS)</div><canvas id="loadChartRps"></canvas></div>
-        <div class="load-chart-box"><div class="load-chart-label">Среднее время ответа (мс)</div><canvas id="loadChartLatency"></canvas></div>
-        <div class="load-chart-box"><div class="load-chart-label">Процент ошибок (%)</div><canvas id="loadChartErrors"></canvas></div>
-        <div class="load-chart-box"><div class="load-chart-label">Активных VUs</div><canvas id="loadChartVus"></canvas></div>
-      </div>
-    </div>` : ''}
+    ${(isRunning || isDone || hasErr) ? `<div class="load-section">
+      <div class="load-section-title">Живые метрики</div>
+      <div class="load-live-shell">
+        <div class="load-progress-card">
+          <div>
+            <div class="load-progress-value" id="loadProgressValue">${liveStats.progressPct}%</div>
+            <div class="load-progress-label">Выполнение прогона</div>
+            <div class="load-progress-bar"><div class="load-progress-fill" id="loadProgressFill" style="width:${liveStats.progressPct}%"></div></div>
+          </div>
+          <div style="margin-top:14px">
+            <div class="load-live-kpi-lbl">Время</div>
+            <div class="load-live-kpi-val" id="loadElapsedValue" style="font-size:18px">${escapeHtml(elapsedText)}</div>
+          </div>
+        </div>
+        <div>
+          <div class="load-live-kpis">
+            <div class="load-live-kpi"><div class="load-live-kpi-val" id="loadTotalRequestsValue">${Math.round(liveStats.total || 0)}</div><div class="load-live-kpi-lbl">Запросов</div></div>
+            <div class="load-live-kpi"><div class="load-live-kpi-val" id="loadRpsValue">${liveStats.currentRps.toFixed(1)}</div><div class="load-live-kpi-lbl">RPS сейчас</div></div>
+            <div class="load-live-kpi"><div class="load-live-kpi-val" id="loadAvgValue">${liveStats.avgMs ? `${Math.round(liveStats.avgMs)} ms` : '—'}</div><div class="load-live-kpi-lbl">Avg latency</div></div>
+            <div class="load-live-kpi"><div class="load-live-kpi-val" id="loadErrorValue" style="color:${liveStats.errorPct > 2 ? 'var(--red)' : 'var(--text)'}">${liveStats.errorPct.toFixed(2)}%</div><div class="load-live-kpi-lbl">Ошибок</div></div>
+          </div>
+          <div class="load-live-kpi" style="margin-bottom:10px;display:flex;align-items:center;justify-content:space-between">
+            <div><div class="load-live-kpi-lbl">Активные VUs</div><div class="load-live-kpi-val" id="loadVuValue">${Math.round(liveStats.vus || 0)}</div></div>
+            <div style="font-size:12px;color:var(--muted);text-align:right">Данные обновляются из <code>metrics.ndjson</code></div>
+          </div>
+        </div>
+      </div>
+      <div class="load-charts" style="margin-top:12px">
+        <div class="load-chart-box"><div class="load-chart-label"><span>Запросов/сек</span><span class="load-chart-value">${liveStats.currentRps.toFixed(1)}</span></div>${liveStats.hasBuckets ? '<canvas id="loadChartRps"></canvas>' : chartEmpty}</div>
+        <div class="load-chart-box"><div class="load-chart-label"><span>Среднее время ответа</span><span class="load-chart-value">${liveStats.avgMs ? `${Math.round(liveStats.avgMs)} ms` : '—'}</span></div>${liveStats.hasBuckets ? '<canvas id="loadChartLatency"></canvas>' : chartEmpty}</div>
+        <div class="load-chart-box"><div class="load-chart-label"><span>Ошибки</span><span class="load-chart-value">${liveStats.errorPct.toFixed(2)}%</span></div>${liveStats.hasBuckets ? '<canvas id="loadChartErrors"></canvas>' : chartEmpty}</div>
+        <div class="load-chart-box"><div class="load-chart-label"><span>Активные VUs</span><span class="load-chart-value">${Math.round(liveStats.vus || 0)}</span></div>${liveStats.hasBuckets ? '<canvas id="loadChartVus"></canvas>' : chartEmpty}</div>
+      </div>
+    </div>` : ''}
 
     ${hasSummary ? `<div class="load-section">
       <div class="load-section-title">Итоги</div>
@@ -8817,6 +8934,15 @@ function connectSSE() {
     loadState = { runId, status: 'running', startTime: Date.now(), buckets: [], totalRequests: 0, totalErrors: 0, logs: [], script: loadScriptDraft || '', config, summary: null };
     loadBuckets = [];
     loadLogLines = [];
+    if (loadLiveUiTimer) clearInterval(loadLiveUiTimer);
+    loadLiveUiTimer = setInterval(() => {
+      if (!loadState || loadState.status !== 'running') {
+        clearInterval(loadLiveUiTimer);
+        loadLiveUiTimer = null;
+        return;
+      }
+      if (contextMode === 'load') updateLoadLiveStats();
+    }, 1000);
     if (config) applyLoadConfigToFields(config);
     if (contextMode === 'load') { renderSidebar(); renderContent(); }
   });
@@ -8842,12 +8968,13 @@ function connectSSE() {
     loadBuckets = buckets || [];
     if (loadState) loadState.buckets = loadBuckets;
     if (loadState) { loadState.totalRequests = total || 0; loadState.totalErrors = errors || 0; }
-    if (contextMode === 'load') { drawLoadCharts(); renderSidebar(); }
+    if (contextMode === 'load') { updateLoadLiveStats(); drawLoadCharts(); renderSidebar(); }
   });
 
   es.addEventListener('load-done', (e) => {
     const { status, summary } = JSON.parse(e.data);
     if (loadState) { loadState.status = status; loadState.summary = summary || null; loadState.endTime = Date.now(); }
+    if (loadLiveUiTimer) { clearInterval(loadLiveUiTimer); loadLiveUiTimer = null; }
     loadRefreshRuns();
     if (contextMode === 'load') { renderSidebar(); renderContent(); }
   });

package/package.json

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