viberadar 0.3.215 → 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');
@@ -7845,11 +7934,12 @@ function applyLoadImport(raw, sourceName) {
 }
 
 function loadImportConfigClick() {
-  const input = document.getElementById('loadConfigImportFile');
-  if (input) {
-    input.value = '';
-    input.click();
-  }
+  openLoadImportConfigModal();
+}
+
+function readLoadImportConfigText(text, sourceName) {
+  const raw = JSON.parse(String(text || '{}'));
+  applyLoadImport(raw, sourceName);
 }
 
 function loadImportConfigFile(input) {
@@ -7858,8 +7948,9 @@ function loadImportConfigFile(input) {
   const reader = new FileReader();
   reader.onload = () => {
     try {
-      const raw = JSON.parse(String(reader.result || '{}'));
-      applyLoadImport(raw, file.name);
+      readLoadImportConfigText(reader.result || '{}', file.name);
+      const overlay = document.getElementById('loadImportConfigOverlay');
+      if (overlay) overlay.remove();
     } catch (e) {
       alert('Конфиг не импортирован: ' + e.message);
     }
@@ -7868,6 +7959,88 @@ function loadImportConfigFile(input) {
   reader.readAsText(file);
 }
 
+function openLoadImportConfigModal() {
+  let overlay = document.getElementById('loadImportConfigOverlay');
+  if (overlay) overlay.remove();
+  overlay = document.createElement('div');
+  overlay.id = 'loadImportConfigOverlay';
+  overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.62);display:flex;align-items:center;justify-content:center;z-index:9999;padding:18px';
+  overlay.innerHTML = `
+    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:18px;width:720px;max-width:96vw;max-height:92vh;overflow:auto">
+      <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px">
+        <div>
+          <div style="font-size:15px;font-weight:600;color:var(--text)">Импорт k6 конфига</div>
+          <div style="font-size:12px;color:var(--muted);margin-top:3px">Вставь JSON из буфера или выбери файл. После импорта поля можно править вручную.</div>
+        </div>
+        <button id="loadImportClose" class="load-btn" style="padding:4px 9px">Закрыть</button>
+      </div>
+      <textarea id="loadImportConfigText" spellcheck="false" placeholder='{"name":"auth-browse","baseUrl":"https://demo.unica.hopper-it.ru","vus":10,"duration":"2m","accounts":[{"email":"user@example.com","password":"pass"}],"script":"import http from ..."}' style="width:100%;min-height:260px;resize:vertical;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.45;padding:10px;outline:none"></textarea>
+      <div id="loadImportStatus" style="min-height:18px;margin-top:8px;font-size:12px;color:var(--muted)">JSON пока не вставлен</div>
+      <div style="display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap">
+        <div>
+          <input id="loadConfigImportFile" type="file" accept=".json,application/json" style="display:none" onchange="loadImportConfigFile(this)" />
+          <button class="load-btn" id="loadImportFileBtn">Выбрать JSON-файл</button>
+        </div>
+        <div style="display:flex;gap:8px">
+          <button class="load-btn" id="loadImportCancel">Отмена</button>
+          <button class="load-btn load-btn-run" id="loadImportApply" disabled>Импорт</button>
+        </div>
+      </div>
+    </div>`;
+  document.body.appendChild(overlay);
+
+  const textEl = overlay.querySelector('#loadImportConfigText');
+  const statusEl = overlay.querySelector('#loadImportStatus');
+  const applyBtn = overlay.querySelector('#loadImportApply');
+  const close = () => overlay.remove();
+  const validate = () => {
+    const text = textEl.value.trim();
+    if (!text) {
+      statusEl.textContent = 'JSON пока не вставлен';
+      statusEl.style.color = 'var(--muted)';
+      applyBtn.disabled = true;
+      return;
+    }
+    try {
+      const raw = JSON.parse(text);
+      const imported = normalizeLoadImport(raw, 'clipboard');
+      const parts = [];
+      if (imported.scriptName) parts.push(imported.scriptName);
+      if (imported.baseUrl) parts.push(imported.baseUrl);
+      if (imported.vus) parts.push(`${imported.vus} VUs`);
+      if (imported.duration) parts.push(imported.duration);
+      statusEl.textContent = `JSON валидный${parts.length ? ': ' + parts.join(' · ') : ''}`;
+      statusEl.style.color = 'var(--green)';
+      applyBtn.disabled = false;
+    } catch (e) {
+      statusEl.textContent = 'JSON невалидный: ' + e.message;
+      statusEl.style.color = 'var(--red)';
+      applyBtn.disabled = true;
+    }
+  };
+
+  overlay.addEventListener('click', e => { if (e.target === overlay) close(); });
+  overlay.querySelector('#loadImportClose').addEventListener('click', close);
+  overlay.querySelector('#loadImportCancel').addEventListener('click', close);
+  overlay.querySelector('#loadImportFileBtn').addEventListener('click', () => {
+    const input = overlay.querySelector('#loadConfigImportFile');
+    input.value = '';
+    input.click();
+  });
+  textEl.addEventListener('input', validate);
+  applyBtn.addEventListener('click', () => {
+    try {
+      readLoadImportConfigText(textEl.value, 'clipboard');
+      close();
+    } catch (e) {
+      statusEl.textContent = 'Конфиг не импортирован: ' + e.message;
+      statusEl.style.color = 'var(--red)';
+      applyBtn.disabled = true;
+    }
+  });
+  setTimeout(() => textEl.focus(), 0);
+}
+
 function renderLoad(c) {
   const isRunning = loadState && loadState.status === 'running';
   const isDone    = loadState && (loadState.status === 'done' || loadState.status === 'stopped');
@@ -7928,9 +8101,8 @@ function renderLoad(c) {
           <button class="load-btn load-btn-run" style="font-size:13px;padding:8px 20px" onclick="loadNewTest()">＋ Новый тест</button>
         </div>
       </div>
-      <input id="loadConfigImportFile" type="file" accept=".json,application/json" style="display:none" onchange="loadImportConfigFile(this)" />
-
-      ${loadSavedScripts.length === 0
+
+      ${loadSavedScripts.length === 0
         ? `<div class="load-library-empty">
             <div style="font-size:32px;margin-bottom:12px">📋</div>
             <div style="font-size:14px;font-weight:500;margin-bottom:6px">Нет сохранённых тестов</div>
@@ -7972,15 +8144,17 @@ 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>` : ''}
       ${!isRunning ? `<button class="load-btn" style="font-size:12px;padding:5px 10px" onclick="loadImportConfigClick()">Импорт конфига</button>` : ''}
-      <input id="loadConfigImportFile" type="file" accept=".json,application/json" style="display:none" onchange="loadImportConfigFile(this)" />
       <span style="font-size:12px;color:var(--muted);margin-left:4px">${statusBadge}</span>
     </div>
 
@@ -8033,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>
@@ -8735,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(); }
   });
@@ -8760,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.215",
+  "version": "0.3.217",
   "description": "Live module map with test coverage for vibecoding projects",
   "main": "./dist/cli.js",
   "bin": {