npm - lexxit-automation-framework - Versions diffs - 2.0.7 → 2.0.9 - Mend

lexxit-automation-framework 2.0.7 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist-obf/app.js +1 -1
package/dist-obf/controllers/controller.js +1 -1
package/dist-obf/core/BrowserManager.js +1 -1
package/dist-obf/core/PlaywrightEngine.js +1 -1
package/dist-obf/core/ScreenshotManager.js +1 -1
package/dist-obf/core/TestData.js +1 -1
package/dist-obf/core/TestExecutor.js +1 -1
package/dist-obf/core/handlers/AllHandlers.js +1 -1
package/dist-obf/core/handlers/BaseHandler.js +1 -1
package/dist-obf/core/handlers/ClickHandler.js +1 -1
package/dist-obf/core/handlers/CustomCodeHandler.js +1 -1
package/dist-obf/core/handlers/DropdownHandler.js +1 -1
package/dist-obf/core/handlers/InputHandler.js +1 -1
package/dist-obf/core/registry/ActionRegistry.js +1 -1
package/dist-obf/installer/frameworkLauncher.js +1 -1
package/dist-obf/public/dashboard.html +61 -10
package/dist-obf/public/execution.html +510 -0
package/dist-obf/public/queue-monitor.html +221 -3
package/dist-obf/queue/ExecutionQueue.js +1 -1
package/dist-obf/routes/api.routes.js +1 -1
package/dist-obf/server.js +1 -1
package/dist-obf/types/types.js +1 -1
package/dist-obf/utils/chromefinder.js +1 -1
package/dist-obf/utils/elementHighlight.js +1 -1
package/dist-obf/utils/locatorHelper.js +1 -1
package/dist-obf/utils/logger.js +1 -1
package/dist-obf/utils/response.js +1 -1
package/dist-obf/utils/responseFormatter.js +1 -1
package/dist-obf/utils/sseManager.js +1 -1
package/package.json +1 -1

package/dist-obf/public/execution.html ADDED Viewed

@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>PW — Execution Overview</title>
+  <style>
+    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+    :root{
+      --bg:#0a0d14;--s:#111827;--s2:#1a2236;
+      --b:#1e2d45;--b2:#2d3f5e;
+      --t:#e2e8f0;--m:#64748b;--m2:#94a3b8;
+      --pass:#22c55e;--pb:#052e16;--pbd:#14532d;
+      --fail:#ef4444;--fb:#2d0a0a;--fbd:#7f1d1d;
+      --skip:#f59e0b;--sb:#2d1d00;--sbd:#78350f;
+      --run:#3b82f6;--rb:#0c1f3d;--rbd:#1e3a6e;
+      --pend:#64748b;--pendb:#0f172a;--pendbd:#1e2d45;
+      --cancel:#a855f7;--cnb:#1a0a2e;--cnbd:#4a1d7e;
+      --r:10px;--rs:6px;
+    }
+    html,body{height:100%;background:var(--bg);color:var(--t);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
+    /* ── Header ── */
+    header{background:var(--s);border-bottom:1px solid var(--b);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
+    .h-left{display:flex;align-items:center;gap:12px}
+    .h-logo{font-size:1.4rem}
+    .h-title{font-size:.95rem;font-weight:700}
+    .h-sub{font-size:.68rem;color:var(--m);font-family:monospace;margin-top:2px}
+    .h-right{display:flex;align-items:center;gap:8px}
+    .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.04em;border:1px solid transparent}
+    .badge .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
+    .badge-running{background:var(--rb);color:var(--run);border-color:var(--rbd)}
+    .badge-running .dot{background:var(--run);animation:pulse .9s ease-in-out infinite}
+    .badge-pass{background:var(--pb);color:var(--pass);border-color:var(--pbd)}
+    .badge-pass .dot{background:var(--pass)}
+    .badge-fail{background:var(--fb);color:var(--fail);border-color:var(--fbd)}
+    .badge-fail .dot{background:var(--fail)}
+    .badge-idle{background:var(--s2);color:var(--m);border-color:var(--b)}
+    .badge-idle .dot{background:var(--m)}
+    .badge-mode{background:var(--s2);color:var(--m2);border-color:var(--b);font-size:.65rem;padding:3px 9px}
+    .btn-icon{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:99px;font-size:.72rem;font-weight:600;border:1px solid;cursor:pointer;transition:all .2s;text-decoration:none;background:none}
+    .btn-cancel{color:var(--fail);border-color:var(--fbd);background:var(--fb)}
+    .btn-cancel:hover:not(:disabled){background:#3d0a0a;border-color:var(--fail)}
+    .btn-cancel:disabled{opacity:.4;cursor:not-allowed}
+    .btn-queue{color:var(--m2);border-color:var(--b);background:var(--s2)}
+    .btn-queue:hover{color:var(--t);border-color:var(--b2)}
+    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
+    /* ── Layout ── */
+    .layout{display:grid;grid-template-columns:1fr 280px;height:calc(100vh - 53px);overflow:hidden}
+    .main{overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
+    .sidebar{background:var(--s);border-left:1px solid var(--b);display:flex;flex-direction:column;overflow:hidden}
+    /* ── Top stats bar ── */
+    .stats-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
+    .stat{background:var(--s2);border:1px solid var(--b);border-radius:var(--r);padding:10px;text-align:center}
+    .stat-v{font-size:1.5rem;font-weight:800;line-height:1}
+    .stat-l{font-size:.58rem;color:var(--m);margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
+    .stat.total .stat-v{color:var(--t)}
+    .stat.running .stat-v{color:var(--run)}
+    .stat.passed .stat-v{color:var(--pass)}
+    .stat.failed .stat-v{color:var(--fail)}
+    .stat.pending .stat-v{color:var(--pend)}
+    .stat.dur .stat-v{color:var(--run);font-size:1.1rem}
+    /* ── Section label ── */
+    .sec-label{font-size:.62rem;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.1em}
+    /* ── Script cards grid ── */
+    .scripts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}
+    .script-card{background:var(--s2);border:1px solid var(--b);border-left:3px solid var(--pendbd);border-radius:var(--r);padding:13px 15px;transition:border-left-color .3s}
+    .script-card.pending  {border-left-color:var(--pendbd)}
+    .script-card.running  {border-left-color:var(--run)}
+    .script-card.passed   {border-left-color:var(--pass)}
+    .script-card.failed   {border-left-color:var(--fail)}
+    .script-card.cancelled{border-left-color:var(--cancel)}
+    .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
+    .card-info{flex:1;min-width:0}
+    .card-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t)}
+    .card-meta{font-size:.65rem;color:var(--m);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
+    .card-meta span{display:flex;align-items:center;gap:3px}
+    .sbadge{padding:2px 9px;border-radius:99px;font-size:.62rem;font-weight:700;flex-shrink:0;white-space:nowrap}
+    .sb-pending  {background:var(--pendb);color:var(--pend);border:1px solid var(--pendbd)}
+    .sb-running  {background:var(--rb);color:var(--run);border:1px solid var(--rbd)}
+    .sb-running span{animation:pulse .9s infinite}
+    .sb-passed   {background:var(--pb);color:var(--pass);border:1px solid var(--pbd)}
+    .sb-failed   {background:var(--fb);color:var(--fail);border:1px solid var(--fbd)}
+    .sb-cancelled{background:var(--cnb);color:var(--cancel);border:1px solid var(--cnbd)}
+    .prog-wrap{height:3px;background:var(--b);border-radius:99px;overflow:hidden;margin-bottom:8px}
+    .prog-fill{height:100%;background:var(--run);border-radius:99px;transition:width .4s ease;width:0%}
+    .prog-fill.done{background:var(--pass)}
+    .prog-fill.fail{background:var(--fail)}
+    .card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
+    .card-counts{display:flex;align-items:center;gap:8px;font-size:.68rem;color:var(--m)}
+    .card-counts .cp{color:var(--pass)}.card-counts .cf{color:var(--fail)}.card-counts .cs{color:var(--skip)}
+    .card-dur{font-size:.65rem;color:var(--m);font-family:monospace}
+    .btn-view{padding:3px 11px;border-radius:6px;font-size:.66rem;font-weight:600;cursor:pointer;border:1px solid var(--b);background:var(--s2);color:var(--run);text-decoration:none;transition:all .15s;display:inline-block}
+    .btn-view:hover{border-color:var(--run)}
+    .btn-view:not([href]){opacity:.35;pointer-events:none;cursor:default}
+    /* ── Sidebar ── */
+    .sb-sec{padding:12px 14px;border-bottom:1px solid var(--b);flex-shrink:0}
+    .sb-title{font-size:.62rem;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
+    .sum-box{background:var(--s2);border:1px solid var(--b);border-radius:var(--r)}
+    .sum-row{display:flex;justify-content:space-between;padding:7px 12px;font-size:.74rem;border-bottom:1px solid var(--b)}
+    .sum-row:last-child{border-bottom:none}
+    .sum-lbl{color:var(--m)}.sum-val{font-weight:600}
+    .log-box{flex:1;overflow-y:auto;padding:8px 12px;font-family:'Cascadia Code','Fira Code',monospace;font-size:.65rem;line-height:1.7;background:#060b12}
+    .ll{color:var(--m);word-break:break-word}
+    .lp{color:var(--pass)}.lf{color:var(--fail)}.ls{color:var(--skip)}.lr{color:var(--run)}.ly{color:#d2a8ff}
+    .empty{text-align:center;padding:40px;color:var(--m);font-size:.82rem}
+    ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
+  </style>
+</head>
+<body>
+<header>
+  <div class="h-left">
+    <span class="h-logo">🎭</span>
+    <div>
+      <div class="h-title">Playwright — Execution Overview</div>
+      <div class="h-sub" id="execLabel">Connecting…</div>
+    </div>
+  </div>
+  <div class="h-right">
+    <span class="badge badge-mode" id="modeTag">SEQUENTIAL</span>
+    <a class="btn-icon btn-queue" href="/queue-monitor" target="_blank">☰ Queue</a>
+    <button class="btn-icon btn-cancel" id="cancelBtn" onclick="cancelExecution()" disabled>⏹ Cancel</button>
+    <div class="badge badge-idle" id="statusBadge"><span class="dot"></span><span id="statusText">CONNECTING</span></div>
+  </div>
+</header>
+<div class="layout">
+  <div class="main">
+    <!-- Stats bar -->
+    <div class="stats-bar">
+      <div class="stat total"  ><div class="stat-v" id="stTotal">—</div><div class="stat-l">Scripts</div></div>
+      <div class="stat running"><div class="stat-v" id="stRun">0</div><div class="stat-l">Running</div></div>
+      <div class="stat passed" ><div class="stat-v" id="stPass">0</div><div class="stat-l">Passed</div></div>
+      <div class="stat failed" ><div class="stat-v" id="stFail">0</div><div class="stat-l">Failed</div></div>
+      <div class="stat pending"><div class="stat-v" id="stPend">—</div><div class="stat-l">Pending</div></div>
+      <div class="stat dur"    ><div class="stat-v" id="stDur">0s</div><div class="stat-l">Elapsed</div></div>
+    </div>
+    <!-- Script cards -->
+    <div class="sec-label" id="scriptsLabel">Scripts</div>
+    <div class="scripts-grid" id="scriptsGrid">
+      <div class="empty">Loading scripts…</div>
+    </div>
+  </div>
+  <!-- Sidebar -->
+  <div class="sidebar">
+    <div class="sb-sec">
+      <div class="sb-title">🏁 Summary</div>
+      <div class="sum-box">
+        <div class="sum-row"><span class="sum-lbl">Status</span>       <span class="sum-val" id="sumStatus">—</span></div>
+        <div class="sum-row"><span class="sum-lbl">Mode</span>         <span class="sum-val" id="sumMode">—</span></div>
+        <div class="sum-row"><span class="sum-lbl">Total Scripts</span><span class="sum-val" id="sumScripts">—</span></div>
+        <div class="sum-row"><span class="sum-lbl">Passed</span>       <span class="sum-val" style="color:var(--pass)" id="sumPass">—</span></div>
+        <div class="sum-row"><span class="sum-lbl">Failed</span>       <span class="sum-val" style="color:var(--fail)" id="sumFail">—</span></div>
+        <div class="sum-row"><span class="sum-lbl">Duration</span>     <span class="sum-val" id="sumDur">—</span></div>
+      </div>
+    </div>
+    <div class="sb-sec" style="flex-shrink:0"><div class="sb-title">📋 Live Log</div></div>
+    <div class="log-box" id="logBox"></div>
+  </div>
+</div>
+<script>
+const execId = location.pathname.split('/').filter(Boolean)[1];
+const $       = id => document.getElementById(id);
+const esc     = s  => String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+// ── State ────────────────────────────────────────────────────────────────────
+let scripts    = {};   // test_script_uid → { name, totalSteps, browser, status, passed, failed, skipped, startMs }
+let execInfo   = null; // from /api/execution/:id/info
+let isDone     = false;
+let startMs    = Date.now();
+let timerInt   = null;
+let runCount   = 0, passCount = 0, failCount = 0;
+// ── Helpers ──────────────────────────────────────────────────────────────────
+function fmtDur(ms) {
+  if (!ms && ms !== 0) return '—';
+  if (ms < 1000) return ms + 'ms';
+  return (ms / 1000).toFixed(1) + 's';
+}
+function log(msg, cls='') {
+  const b  = $('logBox');
+  const ts = new Date().toLocaleTimeString('en-GB');
+  const d  = document.createElement('div');
+  d.className = 'll ' + cls;
+  d.textContent = `[${ts}]  ${msg}`;
+  b.appendChild(d);
+  b.scrollTop = b.scrollHeight;
+}
+function setStatus(text, cls) {
+  const b = $('statusBadge');
+  b.className = 'badge ' + cls;
+  b.querySelector('span:last-child').textContent = text;
+}
+function updateTopStats() {
+  const list    = Object.values(scripts);
+  const pending = list.filter(s => s.status === 'pending').length;
+  const running = list.filter(s => s.status === 'running').length;
+  const passed  = list.filter(s => s.status === 'passed').length;
+  const failed  = list.filter(s => s.status === 'failed').length;
+  $('stTotal').textContent = list.length || '—';
+  $('stRun').textContent   = running;
+  $('stPass').textContent  = passed;
+  $('stFail').textContent  = failed;
+  $('stPend').textContent  = pending;
+  if (!isDone) $('stDur').textContent = ((Date.now() - startMs) / 1000).toFixed(1) + 's';
+  // Overall status badge
+  if (isDone) return;
+  if (running > 0) setStatus('RUNNING', 'badge-running');
+  else if (list.length > 0 && pending === list.length) setStatus('QUEUED', 'badge-idle');
+}
+// ── Script card builders ──────────────────────────────────────────────────────
+function cardId(uid) { return 'sc-' + uid.replace(/-/g,''); }
+function renderCard(uid) {
+  const s = scripts[uid];
+  if (!s) return;
+  const pct   = s.totalSteps > 0 ? Math.round(((s.passed + s.failed + s.skipped) / s.totalSteps) * 100) : 0;
+  const dur   = s.startMs ? fmtDur(Date.now() - s.startMs) : '—';
+  const fillCls = s.status === 'passed' ? 'done' : s.status === 'failed' ? 'fail' : '';
+  const shortUid = uid.slice(0, 8) + '…';
+  const badgeMap = {
+    pending:   `<span class="sbadge sb-pending">PENDING</span>`,
+    running:   `<span class="sbadge sb-running"><span>●</span> RUNNING</span>`,
+    passed:    `<span class="sbadge sb-passed">✅ PASSED</span>`,
+    failed:    `<span class="sbadge sb-failed">❌ FAILED</span>`,
+    cancelled: `<span class="sbadge sb-cancelled">CANCELLED</span>`,
+  };
+  // "View →" only available once script has started
+  const viewHref  = (s.status !== 'pending') ? `/dashboard/${execId}/${uid}` : '';
+  const viewAttrs = viewHref ? `href="${viewHref}" target="_blank"` : '';
+  const el = $(cardId(uid));
+  if (!el) return;
+  el.className = `script-card ${s.status}`;
+  el.innerHTML = `
+    <div class="card-top">
+      <div class="card-info">
+        <div class="card-name" title="${esc(s.name)}">${esc(s.name)}</div>
+        <div class="card-meta">
+          <span>🆔 ${shortUid}</span>
+          <span>📋 ${s.totalSteps} steps</span>
+          <span>🌐 ${esc(s.browser)}</span>
+          ${s.startMs && !['passed','failed','cancelled'].includes(s.status) ? `<span>⏱ ${fmtDur(Date.now() - s.startMs)}</span>` : ''}
+          ${s.finalDur ? `<span>⏱ ${fmtDur(s.finalDur)}</span>` : ''}
+        </div>
+      </div>
+      ${badgeMap[s.status] || ''}
+    </div>
+    <div class="prog-wrap"><div class="prog-fill ${fillCls}" style="width:${pct}%"></div></div>
+    <div class="card-bottom">
+      <div class="card-counts">
+        <span class="cp">✅ ${s.passed}</span>
+        <span class="cf">❌ ${s.failed}</span>
+        <span class="cs">⏭ ${s.skipped}</span>
+        <span>${pct}%</span>
+      </div>
+      <a class="btn-view" ${viewAttrs}>View →</a>
+    </div>`;
+}
+function buildGrid() {
+  const grid = $('scriptsGrid');
+  // First call — create all card shells in order
+  grid.innerHTML = Object.keys(scripts).map(uid =>
+    `<div class="script-card pending" id="${cardId(uid)}"></div>`
+  ).join('');
+  // Then populate each
+  Object.keys(scripts).forEach(renderCard);
+}
+// ── Load initial script list from backend ─────────────────────────────────────
+async function loadInfo() {
+  try {
+    const r    = await fetch(`/api/execution/${execId}/info`);
+    const data = await r.json();
+    if (!data.scripts) return;
+    execInfo = data;
+    // Update mode badge
+    $('modeTag').textContent = data.parallel
+      ? `PARALLEL (max ${data.max_parallel})`
+      : 'SEQUENTIAL';
+    $('execLabel').textContent  = data.test_set_name
+      ? `Set: ${data.test_set_name}  ·  ID: ${execId}`
+      : 'ID: ' + execId;
+    $('sumMode').textContent    = data.parallel ? 'Parallel' : 'Sequential';
+    $('sumScripts').textContent = data.scripts.length;
+    const label = data.parallel
+      ? `${data.scripts.length} Scripts — Parallel (max ${data.max_parallel})`
+      : `${data.scripts.length} Scripts — Sequential`;
+    $('scriptsLabel').textContent = label;
+    // Update browser tab title
+    if (data.test_set_name) {
+      document.title = `${data.test_set_name} — Execution Overview`;
+      document.querySelector('.h-title').textContent = data.test_set_name;
+    }
+    // Pre-populate script state map in order
+    data.scripts.forEach(s => {
+      scripts[s.test_script_uid] = {
+        name:       s.test_case_name || s.test_script_uid,
+        totalSteps: s.total_steps,
+        browser:    s.browser || 'chromium',
+        status:     'pending',
+        passed: 0, failed: 0, skipped: 0,
+        startMs:    null,
+        finalDur:   null,
+      };
+    });
+    buildGrid();
+    updateTopStats();
+  } catch(e) {
+    log('Failed to load execution info: ' + e.message, 'lf');
+  }
+}
+// ── SSE ───────────────────────────────────────────────────────────────────────
+const es = new EventSource('/api/stream/' + execId);
+es.onopen = () => {
+  log('Connected to execution stream.', 'ly');
+  if (!timerInt) timerInt = setInterval(() => {
+    // Refresh durations on running cards
+    Object.keys(scripts).forEach(uid => {
+      if (scripts[uid].status === 'running') renderCard(uid);
+    });
+    updateTopStats();
+  }, 1000);
+};
+es.onmessage = e => {
+  let ev;
+  try { ev = JSON.parse(e.data); } catch { return; }
+  const { type, data } = ev;
+  if (type === 'log')          { log(data.message || '', ''); return; }
+  if (type === 'queue_update') return;
+  // ── execution_start ──────────────────────────────────────────────────────
+  if (type === 'execution_start') {
+    startMs = Date.now();
+    if (!timerInt) timerInt = setInterval(updateTopStats, 1000);
+    setStatus('RUNNING', 'badge-running');
+    $('cancelBtn').disabled = false;
+    log(`Execution started — ${data.total_scripts} script(s) | ${data.parallel ? 'Parallel' : 'Sequential'}`, 'lr');
+  }
+  // ── script_start ─────────────────────────────────────────────────────────
+  if (type === 'script_start') {
+    const uid = data.test_script_uid;
+    if (!scripts[uid]) {
+      // Fallback: script wasn't in info (shouldn't happen but handle gracefully)
+      scripts[uid] = {
+        name: data.test_case_name || uid,
+        totalSteps: data.total_steps || 0,
+        browser: data.browser || 'chromium',
+        status: 'running',
+        passed: 0, failed: 0, skipped: 0,
+        startMs: Date.now(), finalDur: null,
+      };
+      // Add a new card to the grid
+      const shell = document.createElement('div');
+      shell.className = 'script-card running';
+      shell.id = cardId(uid);
+      $('scriptsGrid').appendChild(shell);
+    } else {
+      scripts[uid].status  = 'running';
+      scripts[uid].startMs = Date.now();
+    }
+    renderCard(uid);
+    updateTopStats();
+    log(`▶ Script started: "${esc(scripts[uid].name)}"`, 'lr');
+  }
+  // ── step_complete — update per-script counts ─────────────────────────────
+  if (type === 'step_complete') {
+    const uid = data.test_script_uid;
+    if (!uid || !scripts[uid]) return;
+    const s = scripts[uid];
+    if      (data.status === 'PASS') s.passed++;
+    else if (data.status === 'FAIL') s.failed++;
+    else if (data.status === 'SKIP') s.skipped++;
+    renderCard(uid);
+  }
+  // ── script_complete ───────────────────────────────────────────────────────
+  if (type === 'script_complete') {
+    const uid = data.test_script_uid;
+    if (!uid || !scripts[uid]) return;
+    const s = scripts[uid];
+    s.status   = data.overall_status === 'PASS' ? 'passed' : 'failed';
+    s.passed   = data.passed_steps;
+    s.failed   = data.failed_steps;
+    s.skipped  = data.skipped_steps;
+    s.finalDur = data.duration;
+    renderCard(uid);
+    updateTopStats();
+    const icon = s.status === 'passed' ? '✅' : '❌';
+    log(`${icon} Script done: "${esc(s.name)}" — ${data.overall_status} | ✅${data.passed_steps} ❌${data.failed_steps} ⏭${data.skipped_steps} (${fmtDur(data.duration)})`,
+      s.status === 'passed' ? 'lp' : 'lf');
+  }
+  // ── execution_cancelled ───────────────────────────────────────────────────
+  if (type === 'execution_cancelled') {
+    isDone = true; clearInterval(timerInt);
+    $('cancelBtn').disabled = true;
+    setStatus('CANCELLED', 'badge-idle');
+    // Mark any still-pending/running scripts as cancelled
+    Object.values(scripts).forEach(s => {
+      if (s.status === 'pending' || s.status === 'running') s.status = 'cancelled';
+    });
+    buildGrid();
+    updateTopStats();
+    updateSummary('CANCELLED');
+    log('⏹ Execution cancelled', 'ly');
+    es.close();
+  }
+  // ── execution_complete ────────────────────────────────────────────────────
+  if (type === 'execution_complete') {
+    isDone = true; clearInterval(timerInt);
+    $('cancelBtn').disabled = true;
+    const ok  = data.status === 'PASS';
+    const dur = fmtDur(data.duration || 0);
+    setStatus(ok ? '✅ PASSED' : '❌ FAILED', ok ? 'badge-pass' : 'badge-fail');
+    $('stDur').textContent = dur;
+    updateTopStats();
+    updateSummary(data.status, dur);
+    log(`🏁 Execution ${data.status} | ✅${data.passed} ❌${data.failed} scripts | ${dur}`, ok ? 'lp' : 'lf');
+    es.close();
+  }
+  if (type === 'error') {
+    setStatus('ERROR', 'badge-fail');
+    log('ERROR: ' + data.message, 'lf');
+    isDone = true; clearInterval(timerInt);
+    $('cancelBtn').disabled = true;
+    es.close();
+  }
+};
+es.onerror = () => { if (!isDone) log('Stream disconnected.', 'lf'); es.close(); };
+function updateSummary(status, dur) {
+  const list   = Object.values(scripts);
+  const passed = list.filter(s => s.status === 'passed').length;
+  const failed = list.filter(s => s.status !== 'passed').length;
+  $('sumStatus').textContent   = status;
+  $('sumStatus').style.color   = status === 'PASS' ? 'var(--pass)' : status === 'CANCELLED' ? 'var(--cancel)' : 'var(--fail)';
+  $('sumPass').textContent     = passed;
+  $('sumFail').textContent     = failed;
+  $('sumDur').textContent      = dur || $('stDur').textContent;
+}
+async function cancelExecution() {
+  if (!confirm('Cancel? Running steps will finish, then remaining steps are skipped.')) return;
+  $('cancelBtn').disabled = true;
+  try {
+    const r = await fetch(`/api/cancel/${execId}`, { method: 'DELETE' });
+    const d = await r.json();
+    log('⏹ ' + d.message, 'ly');
+  } catch (e) {
+    log('Cancel failed: ' + e.message, 'lf');
+    $('cancelBtn').disabled = false;
+  }
+}
+// ── Boot ──────────────────────────────────────────────────────────────────────
+$('execLabel').textContent = 'ID: ' + execId;
+loadInfo();
+</script>
+</body>
+</html>