viberadar 0.3.179 → 0.3.181

package/dist/ui/dashboard.html

@@ -1561,8 +1561,8 @@
   .load-no-k6 code { background: var(--bg); border: 1px solid var(--border); padding: 3px 8px; border-radius: 4px; font-size: 13px; color: var(--blue); }
 
   /* Probe panel */
-  .probe-container { padding: 20px 24px; max-width: 720px; }
-  .probe-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
+  .probe-container { padding: 20px 24px; max-width: 960px; }
+  .probe-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
   .probe-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
   .probe-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
   .probe-section-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
@@ -1578,12 +1578,40 @@
   .probe-btn-start:hover { background: rgba(88,166,255,0.1); }
   .probe-btn-stop  { border-color: var(--red); color: var(--red); }
   .probe-btn-stop:hover { background: rgba(248,81,73,0.1); }
-  .probe-checks { display: flex; flex-direction: column; gap: 8px; }
-  .probe-check-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: baseline; gap: 6px; font-size: 13px; }
-  .probe-check-icon { font-size: 14px; }
-  .probe-check-name { color: var(--text); }
-  .probe-check-dur { font-size: 11px; }
-  .probe-check-error { grid-column: 2 / -1; font-size: 11px; color: var(--red); margin-top: 2px; word-break: break-word; }
+  /* Probe cards */
+  .probe-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
+  .probe-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; flex-direction: column; gap: 0; }
+  .probe-card:hover { border-color: var(--blue); background: var(--bg-hover); }
+  .probe-card.running { border-color: var(--yellow, #e3b341); }
+  .probe-card.passed  { border-color: var(--green); }
+  .probe-card.failed  { border-color: var(--red); }
+  .probe-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+  .probe-card-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; line-height: 1.4; }
+  .probe-card-icon { font-size: 20px; flex-shrink: 0; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .probe-spin { display: inline-block; animation: spin 1s linear infinite; }
+  .probe-card-meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
+  .probe-badge { background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 10px; color: var(--muted); }
+  .probe-card-dur { font-size: 11px; color: var(--muted); }
+  .probe-card-err { font-size: 11px; color: var(--red); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
+  .probe-card-footer { display: flex; align-items: center; justify-content: flex-end; margin-top: 12px; }
+  /* Probe detail */
+  .probe-detail { padding: 20px 24px; max-width: 860px; }
+  .probe-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--blue); cursor: pointer; margin-bottom: 16px; }
+  .probe-back:hover { text-decoration: underline; }
+  .probe-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
+  .probe-detail-title { font-size: 18px; font-weight: 700; color: var(--text); }
+  .probe-detail-meta { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+  .probe-status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
+  .probe-status-passed { background: rgba(63,185,80,0.12); color: var(--green); }
+  .probe-status-failed { background: rgba(248,81,73,0.12); color: var(--red); }
+  .probe-status-running { background: rgba(227,179,65,0.12); color: #e3b341; }
+  .probe-status-idle    { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
+  .probe-steps-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
+  .probe-step-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 7px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
+  .probe-step-type { font-size: 10px; font-weight: 600; color: var(--blue); background: rgba(88,166,255,0.1); padding: 1px 5px; border-radius: 3px; min-width: 80px; text-align: center; }
+  .probe-step-val { color: var(--text); font-family: monospace; }
+  .probe-output-box { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; white-space: pre-wrap; overflow-x: auto; max-height: 360px; overflow-y: auto; color: var(--text); line-height: 1.5; margin-top: 8px; }
 
   </style>
 </head>
@@ -1697,8 +1725,9 @@
 let D = null;
 let contextMode = 'qa';
 let view = 'features';
-let probeData = null; // { status, lastRun, intervalSec, nextRunAt, checks, configFound }
+let probeData = null; // { status, lastRun, intervalSec, nextRunAt, checks, configFound, checkResults, runningCheck }
 let probeRunning = false;
+let probeDetailCheck = null; // null = cards view, string = check name being viewed
 let searchQuery = '';
 let activeTypes = new Set();
 let activePanelKey = null;
@@ -3382,82 +3411,194 @@ async function loadProbeData() {
   try {
     const res = await fetch('/api/probe/status');
     probeData = await res.json();
+    if (contextMode === 'probe') renderContent();
   } catch {}
 }
 
+function probeCheckStatus(checkName) {
+  if (!probeData) return 'idle';
+  if (probeData.runningCheck === checkName) return 'running';
+  const r = probeData.checkResults?.[checkName];
+  return r ? r.status : 'idle';
+}
+
+function probeCheckResult(checkName) {
+  return probeData?.checkResults?.[checkName] || null;
+}
+
+function probeStatusIcon(status) {
+  if (status === 'running') return `<span class="probe-spin">⏳</span>`;
+  if (status === 'passed')  return '✅';
+  if (status === 'failed')  return '❌';
+  return '⏸';
+}
+
+function probeStatusBadge(status) {
+  if (status === 'running') return `<span class="probe-status-badge probe-status-running"><span class="probe-spin">⏳</span> Выполняется</span>`;
+  if (status === 'passed')  return `<span class="probe-status-badge probe-status-passed">✅ Passed</span>`;
+  if (status === 'failed')  return `<span class="probe-status-badge probe-status-failed">❌ Failed</span>`;
+  return `<span class="probe-status-badge probe-status-idle">⏸ Не запускался</span>`;
+}
+
 function renderProbePanel(c) {
+  if (probeDetailCheck !== null) { renderProbeDetail(c); return; }
+
   const d = probeData;
-  const statusColor = !d ? 'var(--muted)' : d.status === 'running' ? 'var(--yellow)' : d.status === 'scheduled' ? 'var(--green)' : 'var(--muted)';
-  const statusLabel = !d ? '—' : d.status === 'running' ? '● running' : d.status === 'scheduled' ? '● scheduled' : '○ idle';
-
-  const lastRunHtml = d && d.lastRun ? (() => {
-    const r = d.lastRun;
-    const allPassed = r.failed === 0;
-    const rows = r.results.map(res => {
-      const ok = res.status === 'passed';
-      return `<div class="probe-check-row">
-        <span class="probe-check-icon">${ok ? '✅' : '❌'}</span>
-        <span class="probe-check-name">${escapeHtml(res.check)}</span>
-        <span class="probe-check-dur" style="color:var(--muted)">${res.durationMs}ms</span>
-        ${!ok && res.error ? `<div class="probe-check-error">${escapeHtml(res.error)}</div>` : ''}
-        ${!ok && res.screenshotPath ? `<div class="probe-check-error" style="color:var(--muted)">📸 ${escapeHtml(res.screenshotPath)}</div>` : ''}
-      </div>`;
-    }).join('');
-    return `
-      <div class="probe-section">
-        <div class="probe-section-title">Последний прогон <span style="color:var(--muted);font-weight:400;font-size:11px">${r.timestamp ? new Date(r.timestamp).toLocaleTimeString() : ''}</span>
-          <span style="margin-left:8px;font-size:12px">${allPassed ? `<span style="color:var(--green)">✅ ${r.passed}/${r.results.length}</span>` : `<span style="color:var(--red)">❌ ${r.failed} failed</span>`}</span>
-        </div>
-        <div class="probe-checks">${rows}</div>
-      </div>`;
-  })() : `<div style="color:var(--muted);font-size:13px;padding:16px 0">Ещё не запускался</div>`;
+  const isRunning = d?.status === 'running';
+  const isScheduled = d?.status === 'scheduled';
 
   const intervalOptions = [60, 300, 600, 1800, 3600].map(s => {
     const label = s < 3600 ? `каждые ${s / 60} мин` : `каждый час`;
-    const sel = d && d.intervalSec === s ? ' selected' : '';
+    const sel = d?.intervalSec === s ? ' selected' : '';
     return `<option value="${s}"${sel}>${label}</option>`;
   }).join('');
 
-  const isScheduled = d && d.status === 'scheduled';
-  const isRunning = d && d.status === 'running';
+  const checks = d?.checks || [];
+
+  const cards = checks.map(ch => {
+    const status = probeCheckStatus(ch.name);
+    const result = probeCheckResult(ch.name);
+    const dur = result ? `${(result.durationMs / 1000).toFixed(1)}s` : '';
+    const typeLabel = ch.type === 'file' ? 'playwright' : 'dsl';
+    const stepsCount = ch.type === 'dsl' ? `${ch.steps.length} шагов` : ch.file?.split('/').pop() || '';
+    return `
+      <div class="probe-card ${status}" onclick="probeOpenDetail(${JSON.stringify(ch.name)})">
+        <div class="probe-card-top">
+          <div class="probe-card-name">${escapeHtml(ch.name)}</div>
+          <div class="probe-card-icon">${probeStatusIcon(status)}</div>
+        </div>
+        <div class="probe-card-meta">
+          <span class="probe-badge">${typeLabel}</span>
+          <span class="probe-card-dur" style="color:var(--muted);font-size:11px">${escapeHtml(stepsCount)}</span>
+          ${dur ? `<span class="probe-card-dur">${dur}</span>` : ''}
+        </div>
+        ${result?.error ? `<div class="probe-card-err">${escapeHtml(result.error)}</div>` : ''}
+        <div class="probe-card-footer">
+          <button class="probe-btn probe-btn-run" style="font-size:11px;padding:4px 10px"
+            onclick="event.stopPropagation();probeRunOne(${JSON.stringify(ch.name)})"
+            ${status === 'running' ? 'disabled' : ''}>▶ Run</button>
+        </div>
+      </div>`;
+  }).join('');
+
+  const lastTs = d?.lastRun?.timestamp ? `· последний запуск ${new Date(d.lastRun.timestamp).toLocaleTimeString()}` : '';
+  const passedCount = checks.filter(ch => probeCheckStatus(ch.name) === 'passed').length;
+  const failedCount = checks.filter(ch => probeCheckStatus(ch.name) === 'failed').length;
+  const summary = checks.length
+    ? `${failedCount > 0 ? `<span style="color:var(--red)">❌ ${failedCount}</span> · ` : ''}${passedCount > 0 ? `<span style="color:var(--green)">✅ ${passedCount}</span> · ` : ''}${checks.length} checks ${lastTs}`
+    : '';
 
   c.innerHTML = `
     <div class="probe-container">
       <div class="probe-header">
         <div>
           <div class="probe-title">🔭 Probe monitoring</div>
-          ${d && d.effectiveTarget ? `<div style="color:var(--muted);font-size:12px">${escapeHtml(d.effectiveTarget)} · ${escapeHtml((d.checks || []).length)} checks · <span style="color:${statusColor}">${statusLabel}</span></div>`
-            : `<div style="color:var(--yellow);font-size:12px">⚠️ Задайте домен стенда в Настройках</div>`}
+          <div style="font-size:12px;color:var(--muted);margin-top:3px">
+            ${d?.effectiveTarget ? escapeHtml(d.effectiveTarget) + ' · ' : ''}${summary || '<span style="color:#e3b341">⚠️ Задайте домен в Настройках</span>'}
+          </div>
         </div>
         <button class="probe-btn" onclick="openProbeSettingsModal()">⚙️ Настройки</button>
       </div>
 
-      <div class="probe-section">
+      <div class="probe-section" style="margin-bottom:0">
         <div class="probe-controls">
           <button class="probe-btn probe-btn-run" onclick="probeRunNow()" ${isRunning ? 'disabled' : ''}>
-            ${isRunning ? '⏳ Выполняется…' : '▶ Run Now'}
+            ${isRunning ? '<span class="probe-spin">⏳</span> Выполняется…' : '▶ Run All'}
           </button>
           <div class="probe-schedule-row">
-            <select id="probeIntervalSelect" class="probe-select">
-              ${intervalOptions}
-            </select>
+            <select id="probeIntervalSelect" class="probe-select">${intervalOptions}</select>
             ${isScheduled
               ? `<button class="probe-btn probe-btn-stop" onclick="probeScheduleStop()">⏹ Стоп</button>`
-              : `<button class="probe-btn probe-btn-start" onclick="probeScheduleStart()">🕐 По расписанию</button>`
-            }
+              : `<button class="probe-btn probe-btn-start" onclick="probeScheduleStart()">🕐 По расписанию</button>`}
+          </div>
+          ${isScheduled && d.nextRunAt ? `<span style="font-size:11px;color:var(--muted)">след. ${new Date(d.nextRunAt).toLocaleTimeString()}</span>` : ''}
+        </div>
+      </div>
+
+      ${checks.length
+        ? `<div class="probe-cards">${cards}</div>`
+        : `<div style="color:var(--muted);font-size:13px;padding:24px 0">Нет проверок в probe.config.yml</div>`}
+    </div>`;
+}
+
+function probeOpenDetail(checkName) {
+  probeDetailCheck = checkName;
+  renderContent();
+}
+
+function renderProbeDetail(c) {
+  const d = probeData;
+  const checks = d?.checks || [];
+  const ch = checks.find(x => x.name === probeDetailCheck);
+  if (!ch) { probeDetailCheck = null; renderProbePanel(c); return; }
+
+  const status = probeCheckStatus(ch.name);
+  const result = probeCheckResult(ch.name);
+  const isRunning = status === 'running';
+
+  const stepsHtml = ch.type === 'dsl' && ch.steps?.length
+    ? `<div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px">Шаги</div>
+       <div class="probe-steps-list">
+         ${ch.steps.map(s => `
+           <div class="probe-step-row">
+             <span class="probe-step-type">${escapeHtml(s.type)}</span>
+             <span class="probe-step-val">${escapeHtml(s.value)}</span>
+           </div>`).join('')}
+       </div>` : '';
+
+  const fileHtml = ch.type === 'file'
+    ? `<div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px">Файл теста</div>
+       <code style="font-size:12px;color:var(--blue);background:var(--bg);padding:6px 10px;border-radius:4px;display:block">${escapeHtml(ch.file || '')}</code>` : '';
+
+  const outputHtml = result?.output
+    ? `<div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:20px;margin-bottom:6px">Вывод</div>
+       <div class="probe-output-box">${escapeHtml(result.output)}</div>` : '';
+
+  const errorHtml = result?.error && !result.output
+    ? `<div style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:20px;margin-bottom:6px">Ошибка</div>
+       <div class="probe-output-box" style="color:var(--red)">${escapeHtml(result.error)}</div>` : '';
+
+  c.innerHTML = `
+    <div class="probe-detail">
+      <div class="probe-back" onclick="probeDetailCheck=null;renderContent()">← Назад к проверкам</div>
+
+      <div class="probe-detail-header">
+        <div>
+          <div class="probe-detail-title">${escapeHtml(ch.name)}</div>
+          <div class="probe-detail-meta">
+            <span class="probe-badge">${ch.type === 'file' ? 'playwright' : 'dsl'}</span>
+            ${probeStatusBadge(status)}
+            ${result ? `<span style="color:var(--muted)">${(result.durationMs / 1000).toFixed(1)}s</span>` : ''}
+            ${result ? `<span style="color:var(--muted)">${new Date().toLocaleTimeString()}</span>` : ''}
           </div>
         </div>
-        ${isScheduled && d.nextRunAt ? `<div style="font-size:11px;color:var(--muted);margin-top:6px">Следующий запуск: ${new Date(d.nextRunAt).toLocaleTimeString()}</div>` : ''}
+        <button class="probe-btn probe-btn-run" style="flex-shrink:0" onclick="probeRunOne(${JSON.stringify(ch.name)})" ${isRunning ? 'disabled' : ''}>
+          ${isRunning ? '<span class="probe-spin">⏳</span> Выполняется…' : '▶ Run'}
+        </button>
       </div>
 
-      ${lastRunHtml}
+      ${stepsHtml}
+      ${fileHtml}
+      ${outputHtml}
+      ${errorHtml}
     </div>`;
 }
 
 async function probeRunNow() {
   probeRunning = true;
   renderContent();
-  try { await fetch('/api/probe/run', { method: 'POST' }); } catch {}
+  try { await fetch('/api/probe/run', { method: 'POST', headers: {'Content-Type':'application/json'}, body: '{}' }); } catch {}
+}
+
+async function probeRunOne(checkName) {
+  try {
+    await fetch('/api/probe/run', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ checkName }),
+    });
+    renderContent();
+  } catch {}
 }
 
 async function probeScheduleStart() {
@@ -8007,11 +8148,29 @@ function connectSSE() {
     if (contextMode === 'load') { renderSidebar(); renderContent(); }
   });
 
-  es.addEventListener('probe-run-started', () => {
+  es.addEventListener('probe-run-started', (e) => {
+    const payload = JSON.parse(e.data || '{}');
     if (!probeData) probeData = {};
     probeData.status = 'running';
+    probeData.runningCheck = null;
     probeRunning = true;
-    if (view === 'probe') renderContent();
+    if (contextMode === 'probe') renderContent();
+  });
+
+  es.addEventListener('probe-check-started', (e) => {
+    const payload = JSON.parse(e.data || '{}');
+    if (!probeData) probeData = {};
+    probeData.runningCheck = payload.checkName;
+    if (contextMode === 'probe') renderContent();
+  });
+
+  es.addEventListener('probe-check-done', (e) => {
+    const result = JSON.parse(e.data || '{}');
+    if (!probeData) probeData = {};
+    if (!probeData.checkResults) probeData.checkResults = {};
+    probeData.checkResults[result.check] = result;
+    probeData.runningCheck = null;
+    if (contextMode === 'probe') renderContent();
   });
 
   es.addEventListener('probe-run-done', (e) => {
@@ -8019,8 +8178,9 @@ function connectSSE() {
     if (!probeData) probeData = {};
     if (payload.results) probeData.lastRun = payload;
     probeData.status = probeData.intervalSec ? 'scheduled' : 'idle';
+    probeData.runningCheck = null;
     probeRunning = false;
-    if (view === 'probe') renderContent();
+    if (contextMode === 'probe') renderContent();
   });
 
   es.addEventListener('probe-scheduled', (e) => {
@@ -8029,7 +8189,7 @@ function connectSSE() {
     probeData.status = payload.status;
     probeData.intervalSec = payload.intervalSec;
     probeData.nextRunAt = payload.nextRunAt;
-    if (view === 'probe') renderContent();
+    if (contextMode === 'probe') renderContent();
   });
 
   es.onerror = () => {

package/package.json

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