skopix 2.0.37 → 2.0.39

package/cli/commands/dashboard.js

@@ -1811,6 +1811,25 @@ export async function dashboardCommand(options) {
         sendJSON(res, 200, result);
         return;
       }
+      if (pathname.match(/^\/api\/step-tester\/[^/]+\/run-sequence$/) && method === 'POST') {
+        const testerId = pathname.split('/')[3];
+        const { steps } = JSON.parse(await readBody(req));
+        const session = stepTesterSessions.get(testerId);
+        if (!session) { sendJSON(res, 404, { error: 'Session not found' }); return; }
+        // Run steps one at a time, streaming results via SSE
+        res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Access-Control-Allow-Origin': '*' });
+        for (let i = 0; i < steps.length; i++) {
+          const step = steps[i];
+          res.write(`data: ${JSON.stringify({ type: 'step-start', index: i })}\n\n`);
+          const result = await executeStepTesterAction(session.page, step);
+          res.write(`data: ${JSON.stringify({ type: 'step-result', index: i, ...result })}\n\n`);
+          if (!result.passed) break; // stop on first failure
+          await new Promise(r => setTimeout(r, 300)); // small gap between steps
+        }
+        res.write(`data: ${JSON.stringify({ type: 'done' })}\n\n`);
+        res.end();
+        return;
+      }
       if (pathname.match(/^\/api\/step-tester\/[^/]+\/stop$/) && method === 'POST') {
         const testerId = pathname.split('/')[3];
         await stopStepTester(testerId);
@@ -1823,6 +1842,32 @@ export async function dashboardCommand(options) {
         sendJSON(res, 200, await listLibrarySteps(suitesDir));
         return;
       }
+      if (pathname === '/api/step-library/pending' && method === 'GET') {
+        sendJSON(res, 200, await listPendingSteps());
+        return;
+      }
+      if (pathname.match(/^\/api\/step-library\/pending\/[^/]+\/approve$/) && method === 'POST') {
+        const id = decodeURIComponent(pathname.split('/')[4]);
+        const step = await approvePendingStep(suitesDir, id);
+        sendJSON(res, 200, step || { error: 'Not found' });
+        return;
+      }
+      if (pathname.match(/^\/api\/step-library\/pending\/[^/]+\/dismiss$/) && method === 'POST') {
+        const id = decodeURIComponent(pathname.split('/')[4]);
+        await dismissPendingStep(id);
+        sendJSON(res, 200, { dismissed: true });
+        return;
+      }
+      if (pathname === '/api/step-library/pending/approve-all' && method === 'POST') {
+        const count = await approveAllPending(suitesDir);
+        sendJSON(res, 200, { approved: count });
+        return;
+      }
+      if (pathname === '/api/step-library/pending/dismiss-all' && method === 'POST') {
+        await dismissAllPending();
+        sendJSON(res, 200, { dismissed: true });
+        return;
+      }
       if (pathname === '/api/step-library' && method === 'POST') {
         const data = JSON.parse(await readBody(req));
         const step = await addLibraryStep(suitesDir, data);
@@ -3652,6 +3697,66 @@ async function syncIssuesStatus() {
 // ═══════════════════════════════════════════════════════════════
 
 const LIBRARY_FILE = () => path.join(os.homedir(), '.skopix', 'step-library.yaml');
+const LIBRARY_PENDING_FILE = () => path.join(os.homedir(), '.skopix', 'step-library-pending.yaml');
+
+async function listPendingSteps() {
+  const file = LIBRARY_PENDING_FILE();
+  if (!await fs.pathExists(file)) return [];
+  try {
+    const content = await fs.readFile(file, 'utf8');
+    const data = yaml.parse(content);
+    return Array.isArray(data) ? data : [];
+  } catch { return []; }
+}
+
+async function savePendingSteps(steps) {
+  const file = LIBRARY_PENDING_FILE();
+  await fs.ensureDir(path.dirname(file));
+  await fs.writeFile(file, yaml.stringify(steps));
+}
+
+async function addToPending(suitesDir, pendingStep) {
+  const pending = await listPendingSteps();
+  const existing = await listLibrarySteps(suitesDir);
+  // Check not already in library or pending
+  const allSels = [...existing, ...pending].map(e => (e.stableSelector||e.selector||'').toLowerCase());
+  const selLower = (pendingStep.stableSelector||pendingStep.selector||'').toLowerCase();
+  if (allSels.includes(selLower)) return; // already exists
+  // Check similarity
+  const similar = [...existing, ...pending].find(e => stepSimilarity(e, pendingStep) >= 0.85);
+  if (similar) return;
+  pending.push({ ...pendingStep, id: 'pending-' + Math.random().toString(36).slice(2, 10), addedAt: new Date().toISOString() });
+  await savePendingSteps(pending);
+}
+
+async function approvePendingStep(suitesDir, id) {
+  const pending = await listPendingSteps();
+  const step = pending.find(s => s.id === id);
+  if (!step) return null;
+  const { id: _id, addedAt: _a, ...stepData } = step;
+  const added = await addLibraryStep(suitesDir, stepData);
+  await savePendingSteps(pending.filter(s => s.id !== id));
+  return added;
+}
+
+async function dismissPendingStep(id) {
+  const pending = await listPendingSteps();
+  await savePendingSteps(pending.filter(s => s.id !== id));
+}
+
+async function approveAllPending(suitesDir) {
+  const pending = await listPendingSteps();
+  for (const step of pending) {
+    const { id: _id, addedAt: _a, ...stepData } = step;
+    await addLibraryStep(suitesDir, stepData);
+  }
+  await savePendingSteps([]);
+  return pending.length;
+}
+
+async function dismissAllPending() {
+  await savePendingSteps([]);
+}
 
 async function listLibrarySteps(suitesDir) {
   const file = LIBRARY_FILE();
@@ -3733,19 +3838,41 @@ async function extractStepsToLibrary(suitesDir, steps, testName) {
     const sel = step.stableSelector || step.selector;
     if (!sel) continue;
     const selLower = sel.toLowerCase();
-    // Skip click steps if we already have this selector from a type step (deduplicate click/type pairs)
+
+    // Check exact match first
     if (seenSelectors.has(selLower)) {
-      const existing2 = existing.find(e => (e.stableSelector||e.selector||'').toLowerCase() === selLower) ||
-                        toAdd.find(e => (e.stableSelector||e.selector||'').toLowerCase() === selLower);
-      if (existing2) { existing2.usageCount = (existing2.usageCount || 0) + 1; }
+      const match = existing.find(e => (e.stableSelector||e.selector||'').toLowerCase() === selLower) ||
+                    toAdd.find(e => (e.stableSelector||e.selector||'').toLowerCase() === selLower);
+      if (match) match.usageCount = (match.usageCount || 0) + 1;
+      continue;
+    }
+
+    // Check similarity against existing library entries (catches slight variations)
+    const similarExisting = existing.find(e => stepSimilarity(e, step) >= 0.85);
+    if (similarExisting) {
+      similarExisting.usageCount = (similarExisting.usageCount || 0) + 1;
+      // If new selector is more stable (has pi-test-identifier), upgrade it
+      if (sel.includes('pi-test-identifier') && !(similarExisting.stableSelector||'').includes('pi-test-identifier')) {
+        similarExisting.stableSelector = sel;
+        similarExisting.selector = sel;
+      }
+      seenSelectors.add(selLower);
       continue;
     }
+
+    // Check similarity against steps we're about to add
+    const similarNew = toAdd.find(e => stepSimilarity(e, step) >= 0.85);
+    if (similarNew) {
+      similarNew.usageCount = (similarNew.usageCount || 0) + 1;
+      seenSelectors.add(selLower);
+      continue;
+    }
+
     seenSelectors.add(selLower);
     // Generate clean name — strip action prefix
     let name = step.description || '';
     name = name.replace(/^(click|type|check|assert|select)\s+/i, '').trim() || sel.slice(0, 50);
     toAdd.push({
-      id: 'lib-' + Math.random().toString(36).slice(2, 10),
       name,
       selector: sel,
       stableSelector: step.stableSelector || sel,
@@ -3757,29 +3884,32 @@ async function extractStepsToLibrary(suitesDir, steps, testName) {
       tags: [],
       usageCount: 1,
       sourceTest: testName,
-      createdAt: new Date().toISOString(),
     });
   }
 
-  if (toAdd.length > 0 || existing.some(e => e.usageCount !== undefined)) {
-    await saveLibrarySteps([...existing, ...toAdd]);
+  // Add new elements to pending review queue (not directly to library)
+  for (const step of toAdd) {
+    await addToPending(suitesDir, step);
+  }
+
+  // Save updated usage counts for existing entries
+  if (existing.some(e => e.usageCount !== undefined)) {
+    await saveLibrarySteps(existing);
   }
 }
 
 // Import steps from all existing tests into library
 async function importStepsFromTests(suitesDir) {
   const allTests = await listAllTests(suitesDir);
-  let imported = 0;
-  let skipped = 0;
+  let queued = 0;
   for (const test of allTests) {
     if (!test.steps || test.steps.length === 0) continue;
-    const before = (await listLibrarySteps(suitesDir)).length;
+    const before = (await listPendingSteps()).length;
     await extractStepsToLibrary(suitesDir, test.steps, test.name);
-    const after = (await listLibrarySteps(suitesDir)).length;
-    imported += after - before;
-    skipped += test.steps.length - (after - before);
+    const after = (await listPendingSteps()).length;
+    queued += after - before;
   }
-  return { imported, skipped, total: imported + skipped };
+  return { queued, message: `${queued} elements added to review queue` };
 }
 
 // Sync existing tests — replace matching steps with library steps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skopix",
-  "version": "2.0.37",
+  "version": "2.0.39",
   "description": "Browser-based QA tool — record tests by using your app, replay them deterministically, generate Playwright code automatically",
   "main": "cli/index.js",
   "bin": {

package/web/app/index.html

@@ -1321,6 +1321,7 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
       <a class="nav-item" data-view="step-library">
         <span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="4" rx="1"/><rect x="3" y="10" width="18" height="4" rx="1"/><rect x="3" y="17" width="18" height="4" rx="1"/></svg></span>
         Step library
+        <span id="lib-pending-badge" style="display:none;background:#f59e0b;color:#000;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;margin-left:4px;font-family:var(--mono)"></span>
       </a>
 
 
@@ -1589,6 +1590,23 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
       </div>
 
+      <!-- Pending review section -->
+      <div id="library-pending-section" style="display:none;margin-bottom:16px">
+        <div class="card" style="border-color:rgba(245,158,11,0.3);background:rgba(245,158,11,0.04)">
+          <div class="card-header" style="border-color:rgba(245,158,11,0.2)">
+            <div class="card-title" style="color:#f59e0b">
+              ⏳ Pending review
+              <span id="pending-count-label" style="font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400;margin-left:8px"></span>
+            </div>
+            <div style="display:flex;gap:8px">
+              <button class="btn btn-ghost" style="font-size:11px;padding:4px 10px" onclick="dismissAllPendingUI()">Dismiss all</button>
+              <button class="btn btn-primary" style="font-size:11px;padding:4px 10px;background:#f59e0b;border-color:#f59e0b;color:#000" onclick="approveAllPendingUI()">Add all to library</button>
+            </div>
+          </div>
+          <div id="pending-steps-list" style="padding:0"></div>
+        </div>
+      </div>
+
       <!-- Search + filter -->
       <div style="display:flex;gap:10px;margin-bottom:16px">
         <input class="form-input" id="library-search" type="text" placeholder="Search elements..." oninput="filterLibrarySteps()" style="flex:1">
@@ -1663,6 +1681,10 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
         <div style="display:flex;gap:8px;align-items:center">
           <input class="form-input" id="builder-test-name" type="text" placeholder="Test name..." style="width:220px">
+          <button class="btn btn-ghost" id="btn-preview-test" onclick="startBuilderPreview()" style="color:#f59e0b;border-color:rgba(245,158,11,0.3)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+            Preview
+          </button>
           <button class="btn btn-primary" onclick="saveBuiltTest()">Save test</button>
         </div>
       </div>
@@ -1686,7 +1708,7 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
 
         <!-- RIGHT: Test steps being built -->
-        <div style="display:flex;flex-direction:column;overflow:hidden">
+        <div style="display:flex;flex-direction:column;overflow:hidden;position:relative">
           <div style="padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between">
             <div>
               <div style="font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em">TEST STEPS</div>
@@ -1702,6 +1724,36 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
               ← Click steps from the library to add them here
             </div>
           </div>
+
+          <!-- PREVIEW OVERLAY -->
+          <div id="builder-preview-overlay" style="display:none;position:absolute;inset:0;background:var(--bg);flex-direction:column;z-index:10">
+            <div style="padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;background:rgba(245,158,11,0.06)">
+              <div style="display:flex;align-items:center;gap:10px">
+                <span style="color:#f59e0b;font-size:14px" id="preview-status-dot">⏸</span>
+                <div>
+                  <div style="font-family:var(--mono);font-size:10px;color:#f59e0b;letter-spacing:0.1em">PREVIEW MODE</div>
+                  <div style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px" id="preview-status-text">Browser open — ready to run</div>
+                </div>
+              </div>
+              <div style="display:flex;gap:8px">
+                <button class="btn btn-ghost" id="btn-preview-run-all" onclick="previewRunAll()" style="font-size:11px;padding:4px 12px;color:#f59e0b;border-color:rgba(245,158,11,0.3)">
+                  ▶▶ Run all
+                </button>
+                <button class="btn btn-ghost" id="btn-preview-run-next" onclick="previewRunNext()" style="font-size:11px;padding:4px 12px;color:#f59e0b;border-color:rgba(245,158,11,0.3)">
+                  ▶ Run next
+                </button>
+                <button class="btn btn-ghost" onclick="stopBuilderPreview()" style="font-size:11px;padding:4px 10px">
+                  ✕ Stop preview
+                </button>
+              </div>
+            </div>
+            <div id="preview-steps-list" style="overflow-y:auto;flex:1;padding:8px 0"></div>
+            <div style="padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:10px" id="preview-summary" style="display:none">
+              <span id="preview-passed" style="font-family:var(--mono);font-size:12px;color:#34d399"></span>
+              <span id="preview-failed" style="font-family:var(--mono);font-size:12px;color:#ef4444"></span>
+            </div>
+          </div>
+
         </div>
 
       </div>
@@ -2791,6 +2843,7 @@ async function refreshAll() {
   renderConfig();
   renderSuites();
   populateSuiteSelect();
+  checkPendingCount();
 }
 
 function renderStats() {
@@ -5549,8 +5602,122 @@ async function saveOllamaConfig() {
   }
 }
 
-// ── STEP LIBRARY ─────────────────────────────────────────────────────────────
-let libraryStepsCache = [];
+// ── STEP LIBRARY PENDING REVIEW ──────────────────────────────────────────────
+let pendingStepsCache = [];
+
+async function fetchPendingSteps() {
+  try {
+    const res = await fetch(API_BASE + '/api/step-library/pending');
+    if (!res.ok) return [];
+    pendingStepsCache = await res.json();
+    return pendingStepsCache;
+  } catch { return []; }
+}
+
+function updatePendingBadge(count) {
+  const badge = document.getElementById('lib-pending-badge');
+  if (!badge) return;
+  if (count > 0) { badge.textContent = count; badge.style.display = ''; }
+  else { badge.style.display = 'none'; }
+}
+
+function renderPendingSteps(steps) {
+  const section = document.getElementById('library-pending-section');
+  const list = document.getElementById('pending-steps-list');
+  const countLabel = document.getElementById('pending-count-label');
+  if (!section || !list) return;
+
+  if (!steps || steps.length === 0) {
+    section.style.display = 'none';
+    updatePendingBadge(0);
+    return;
+  }
+
+  section.style.display = '';
+  updatePendingBadge(steps.length);
+  if (countLabel) countLabel.textContent = `${steps.length} element${steps.length > 1 ? 's' : ''} waiting`;
+
+  list.innerHTML = steps.map(s => {
+    const sel = s.stableSelector || s.selector || '';
+    const fragile = isSelectorFragile(sel);
+    return `
+    <div style="display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid rgba(245,158,11,0.1)" data-pending-id="${escapeAttr(s.id)}">
+      <div style="flex:1;min-width:0">
+        <div style="font-size:13px;color:var(--text);margin-bottom:3px">${escapeHtml(s.name||'')}</div>
+        <div style="display:flex;align-items:center;gap:6px">
+          ${fragile ? '<span style="color:#f59e0b;font-size:12px" title="Fragile selector">⚠</span>' : ''}
+          <code style="font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:400px">${escapeHtml(sel)}</code>
+        </div>
+        ${s.sourceTest ? `<div style="font-family:var(--mono);font-size:10px;color:var(--muted2);margin-top:2px">from: ${escapeHtml(s.sourceTest)}</div>` : ''}
+      </div>
+      <div style="display:flex;gap:6px;flex-shrink:0">
+        <button class="btn btn-ghost pending-edit-btn" style="padding:4px 10px;font-size:11px" data-id="${escapeAttr(s.id)}">Edit</button>
+        <button class="btn btn-ghost pending-dismiss-btn" style="padding:4px 10px;font-size:11px;color:var(--red)" data-id="${escapeAttr(s.id)}">Dismiss</button>
+        <button class="btn btn-primary pending-approve-btn" style="padding:4px 10px;font-size:11px;background:#f59e0b;border-color:#f59e0b;color:#000" data-id="${escapeAttr(s.id)}">Add</button>
+      </div>
+    </div>`;
+  }).join('');
+}
+
+async function loadLibraryView() {
+  const [steps, pending] = await Promise.all([fetchLibrarySteps(), fetchPendingSteps()]);
+  populateLibraryTagFilter();
+  renderPendingSteps(pending);
+  renderLibrarySteps(steps);
+}
+
+async function approvePendingUI(id) {
+  await fetch(API_BASE + '/api/step-library/pending/' + encodeURIComponent(id) + '/approve', { method: 'POST' });
+  await loadLibraryView();
+}
+
+async function dismissPendingUI(id) {
+  await fetch(API_BASE + '/api/step-library/pending/' + encodeURIComponent(id) + '/dismiss', { method: 'POST' });
+  const pending = await fetchPendingSteps();
+  renderPendingSteps(pending);
+}
+
+async function approveAllPendingUI() {
+  const res = await fetch(API_BASE + '/api/step-library/pending/approve-all', { method: 'POST' });
+  const data = await res.json();
+  showToast(`Added ${data.approved} elements to library`);
+  await loadLibraryView();
+}
+
+async function dismissAllPendingUI() {
+  showConfirm('Dismiss all?', 'Dismiss all pending elements without adding them to the library?', async () => {
+    await fetch(API_BASE + '/api/step-library/pending/dismiss-all', { method: 'POST' });
+    await loadLibraryView();
+  });
+}
+
+// Also check pending count on page load and periodically
+async function checkPendingCount() {
+  const pending = await fetchPendingSteps();
+  updatePendingBadge(pending.length);
+}
+
+// Event delegation for pending buttons
+document.addEventListener('click', (e) => {
+  const approveBtn = e.target.closest('.pending-approve-btn');
+  const dismissBtn = e.target.closest('.pending-dismiss-btn');
+  const editBtn = e.target.closest('.pending-edit-btn');
+  if (approveBtn) approvePendingUI(approveBtn.dataset.id);
+  if (dismissBtn) dismissPendingUI(dismissBtn.dataset.id);
+  if (editBtn) {
+    // Open edit modal pre-filled with pending step data
+    const step = pendingStepsCache.find(s => s.id === editBtn.dataset.id);
+    if (step) {
+      document.getElementById('lib-step-id').value = 'pending:' + step.id;
+      document.getElementById('lib-step-name').value = step.name || '';
+      document.getElementById('lib-step-selector').value = step.stableSelector || step.selector || '';
+      document.getElementById('lib-step-action').value = step.defaultAction || '';
+      document.getElementById('lib-step-tags').value = (step.tags || []).join(', ');
+      document.getElementById('library-step-modal-title').textContent = 'Edit before adding';
+      document.getElementById('library-step-modal').style.display = 'flex';
+    }
+  }
+});
 
 async function fetchLibrarySteps() {
   try {
@@ -5861,7 +6028,9 @@ function closeLibraryStepModal() {
 }
 
 async function saveLibraryStep() {
-  const id = document.getElementById('lib-step-id').value;
+  const rawId = document.getElementById('lib-step-id').value;
+  const isPending = rawId.startsWith('pending:');
+  const id = isPending ? rawId.slice(8) : rawId;
   const name = document.getElementById('lib-step-name').value.trim();
   const selector = document.getElementById('lib-step-selector').value.trim();
   const defaultAction = document.getElementById('lib-step-action').value;
@@ -5871,14 +6040,23 @@ async function saveLibraryStep() {
   if (!selector) { showToast('Selector is required'); return; }
 
   try {
-    const body = { name, selector, stableSelector: selector, defaultAction: defaultAction || null, tags };
-    const url = id ? `${API_BASE}/api/step-library/${encodeURIComponent(id)}` : `${API_BASE}/api/step-library`;
-    const method = id ? 'PUT' : 'POST';
-    const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-    if (!res.ok) throw new Error(await res.text());
+    if (isPending) {
+      // Dismiss pending and add directly to library with edits
+      await fetch(API_BASE + '/api/step-library/pending/' + encodeURIComponent(id) + '/dismiss', { method: 'POST' });
+      const body = { name, selector, stableSelector: selector, defaultAction: defaultAction || null, tags };
+      await fetch(API_BASE + '/api/step-library', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+    } else if (id) {
+      const body = { name, selector, stableSelector: selector, defaultAction: defaultAction || null, tags };
+      const res = await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(id), { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      if (!res.ok) throw new Error(await res.text());
+    } else {
+      const body = { name, selector, stableSelector: selector, defaultAction: defaultAction || null, tags };
+      const res = await fetch(API_BASE + '/api/step-library', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      if (!res.ok) throw new Error(await res.text());
+    }
     closeLibraryStepModal();
     await loadLibraryView();
-    showToast(id ? 'Element updated' : 'Element added to library');
+    showToast(isPending ? 'Element added to library' : id ? 'Element updated' : 'Element added to library');
   } catch (err) { showToast('Error: ' + err.message); }
 }
 
@@ -5896,7 +6074,7 @@ async function importStepsFromTests() {
   try {
     const res = await fetch(API_BASE + '/api/step-library/import', { method: 'POST' });
     const data = await res.json();
-    showToast(`Imported ${data.imported} new steps (${data.skipped} already existed)`);
+    showToast(data.queued > 0 ? `${data.queued} elements added to review queue` : 'No new elements found');
     await loadLibraryView();
   } catch (err) { showToast('Error: ' + err.message); }
   finally { if (btn) { btn.disabled = false; btn.textContent = 'Import from all tests'; } }
@@ -5939,9 +6117,14 @@ function openTestBuilder() {
 }
 
 function closeTestBuilder() {
+  // Stop preview if active
+  if (previewState.testerId) {
+    fetch(API_BASE + '/api/step-tester/' + previewState.testerId + '/stop', { method: 'POST' }).catch(() => {});
+    previewState.testerId = null;
+  }
+  document.getElementById('builder-preview-overlay').style.display = 'none';
   const builder = document.getElementById('view-test-builder');
   if (builder) builder.style.display = 'none';
-  // Restore all views to their default display state before switching
   document.querySelectorAll('.view').forEach(v => {
     if (v.id !== 'view-test-builder') v.style.display = '';
   });
@@ -6238,6 +6421,204 @@ function harvestAnother() {
   document.getElementById('harvester-status').textContent = 'Navigate to the next element, then click Capture.';
 }
 
+// ── TEST BUILDER PREVIEW ─────────────────────────────────────────────────────
+let previewState = { testerId: null, currentStep: 0, results: [], running: false };
+
+function renderPreviewSteps() {
+  const container = document.getElementById('preview-steps-list');
+  if (!container) return;
+  const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
+
+  container.innerHTML = builderSteps.map((s, i) => {
+    const result = previewState.results[i];
+    const isCurrent = i === previewState.currentStep && !result;
+    const status = result ? (result.passed ? '✓' : '✗') : (isCurrent ? '▶' : '○');
+    const statusColor = result ? (result.passed ? '#34d399' : '#ef4444') : (isCurrent ? '#f59e0b' : 'var(--muted2)');
+    const bg = isCurrent ? 'rgba(245,158,11,0.06)' : result && !result.passed ? 'rgba(239,68,68,0.04)' : '';
+    return `<div style="display:flex;align-items:flex-start;gap:12px;padding:10px 20px;border-bottom:1px solid var(--border);background:${bg}">
+      <span style="font-family:var(--mono);font-size:13px;color:${statusColor};min-width:20px;margin-top:1px">${status}</span>
+      <div style="flex:1;min-width:0">
+        <div style="display:flex;align-items:center;gap:8px">
+          <span style="font-family:var(--mono);font-size:10px;color:${actionColors[s.action]||'var(--muted)'}">${s.action}</span>
+          <span style="font-size:12px;color:var(--text)">${escapeHtml(s.description||'')}</span>
+        </div>
+        <code style="font-size:10px;color:var(--muted2)">${escapeHtml(s.stableSelector||s.selector||'')}</code>
+        ${result && !result.passed ? `<div style="font-family:var(--mono);font-size:11px;color:#ef4444;margin-top:4px">✗ ${escapeHtml(result.error||'Failed')}</div>` : ''}
+        ${result && result.screenshot ? `<img src="data:image/jpeg;base64,${result.screenshot}" style="width:100%;max-width:300px;border-radius:6px;margin-top:8px;border:1px solid var(--border)" loading="lazy">` : ''}
+      </div>
+    </div>`;
+  }).join('');
+
+  // Scroll current step into view
+  const items = container.querySelectorAll('div[style*="border-bottom"]');
+  if (items[previewState.currentStep]) items[previewState.currentStep].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+function updatePreviewSummary() {
+  const passed = previewState.results.filter(r => r && r.passed).length;
+  const failed = previewState.results.filter(r => r && !r.passed).length;
+  const total = previewState.results.filter(r => r).length;
+  if (total === 0) return;
+  document.getElementById('preview-passed').textContent = `✓ ${passed} passed`;
+  document.getElementById('preview-failed').textContent = failed > 0 ? `✗ ${failed} failed` : '';
+  document.getElementById('preview-summary').style.display = 'flex';
+}
+
+async function startBuilderPreview() {
+  const url = document.getElementById('builder-url')?.value?.trim();
+  if (builderSteps.length === 0) { showToast('Add steps first'); return; }
+  if (!url) { showToast('Set a start URL first'); document.getElementById('builder-url').focus(); return; }
+
+  const btn = document.getElementById('btn-preview-test');
+  btn.disabled = true;
+  btn.textContent = 'Opening...';
+
+  try {
+    const res = await fetch(API_BASE + '/api/step-tester/start', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, selector: builderSteps[0]?.stableSelector || '' }),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Failed');
+
+    previewState = { testerId: data.testerId, currentStep: 0, results: [], running: false };
+
+    // Show overlay
+    document.getElementById('builder-preview-overlay').style.display = 'flex';
+    document.getElementById('preview-status-text').textContent = 'Browser open — navigate to start, then click Run next or Run all';
+    document.getElementById('preview-summary').style.display = 'none';
+    renderPreviewSteps();
+    btn.textContent = '⏸ Previewing';
+  } catch (err) {
+    showToast('Error: ' + err.message);
+    btn.disabled = false;
+    btn.textContent = 'Preview';
+  }
+}
+
+async function stopBuilderPreview() {
+  if (previewState.testerId) {
+    await fetch(API_BASE + '/api/step-tester/' + previewState.testerId + '/stop', { method: 'POST' }).catch(() => {});
+    previewState.testerId = null;
+  }
+  document.getElementById('builder-preview-overlay').style.display = 'none';
+  const btn = document.getElementById('btn-preview-test');
+  btn.disabled = false;
+  btn.textContent = 'Preview';
+}
+
+async function previewRunNext() {
+  if (!previewState.testerId || previewState.running) return;
+  if (previewState.currentStep >= builderSteps.length) return;
+
+  previewState.running = true;
+  const step = builderSteps[previewState.currentStep];
+  document.getElementById('preview-status-text').textContent = `Running step ${previewState.currentStep + 1}/${builderSteps.length}...`;
+  document.getElementById('btn-preview-run-next').disabled = true;
+  document.getElementById('btn-preview-run-all').disabled = true;
+  renderPreviewSteps();
+
+  try {
+    const res = await fetch(API_BASE + '/api/step-tester/' + previewState.testerId + '/run', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ selector: step.stableSelector || step.selector, action: step.action, value: step.value || '', assertType: step.assertType }),
+    });
+    const result = await res.json();
+    previewState.results[previewState.currentStep] = result;
+
+    if (result.passed) {
+      previewState.currentStep++;
+      document.getElementById('preview-status-text').textContent =
+        previewState.currentStep >= builderSteps.length
+          ? `✓ All ${builderSteps.length} steps passed!`
+          : `✓ Step ${previewState.currentStep} passed — ready for next`;
+      document.getElementById('preview-status-dot').textContent = previewState.currentStep >= builderSteps.length ? '✓' : '⏸';
+      document.getElementById('preview-status-dot').style.color = previewState.currentStep >= builderSteps.length ? '#34d399' : '#f59e0b';
+    } else {
+      document.getElementById('preview-status-text').textContent = `✗ Step ${previewState.currentStep + 1} failed — fix the step and try again`;
+      document.getElementById('preview-status-dot').textContent = '✗';
+      document.getElementById('preview-status-dot').style.color = '#ef4444';
+    }
+  } catch (err) {
+    previewState.results[previewState.currentStep] = { passed: false, error: err.message };
+  }
+
+  previewState.running = false;
+  document.getElementById('btn-preview-run-next').disabled = previewState.currentStep >= builderSteps.length;
+  document.getElementById('btn-preview-run-all').disabled = false;
+  renderPreviewSteps();
+  updatePreviewSummary();
+}
+
+async function previewRunAll() {
+  if (!previewState.testerId || previewState.running) return;
+  previewState.running = true;
+  previewState.results = [];
+  previewState.currentStep = 0;
+  document.getElementById('btn-preview-run-all').disabled = true;
+  document.getElementById('btn-preview-run-next').disabled = true;
+  document.getElementById('preview-summary').style.display = 'none';
+
+  const steps = builderSteps.map(s => ({
+    selector: s.stableSelector || s.selector,
+    action: s.action,
+    value: s.value || '',
+    assertType: s.assertType,
+  }));
+
+  try {
+    const es = new EventSource(API_BASE + '/api/step-tester/' + previewState.testerId + '/run-sequence?' + new URLSearchParams({ steps: JSON.stringify(steps) }));
+
+    // Use POST with EventSource workaround — send steps via a separate POST then listen
+    const res = await fetch(API_BASE + '/api/step-tester/' + previewState.testerId + '/run-sequence', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ steps }),
+    });
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop();
+      for (const line of lines) {
+        if (!line.startsWith('data: ')) continue;
+        try {
+          const msg = JSON.parse(line.slice(6));
+          if (msg.type === 'step-start') {
+            previewState.currentStep = msg.index;
+            document.getElementById('preview-status-text').textContent = `Running step ${msg.index + 1}/${builderSteps.length}...`;
+            renderPreviewSteps();
+          } else if (msg.type === 'step-result') {
+            previewState.results[msg.index] = { passed: msg.passed, error: msg.error, screenshot: msg.screenshot };
+            previewState.currentStep = msg.passed ? msg.index + 1 : msg.index;
+            renderPreviewSteps();
+            updatePreviewSummary();
+          } else if (msg.type === 'done') {
+            const allPassed = previewState.results.every(r => r && r.passed);
+            document.getElementById('preview-status-text').textContent = allPassed ? `✓ All ${builderSteps.length} steps passed!` : `✗ Preview complete — some steps failed`;
+            document.getElementById('preview-status-dot').textContent = allPassed ? '✓' : '✗';
+            document.getElementById('preview-status-dot').style.color = allPassed ? '#34d399' : '#ef4444';
+          }
+        } catch {}
+      }
+    }
+  } catch (err) {
+    document.getElementById('preview-status-text').textContent = 'Error: ' + err.message;
+  }
+
+  previewState.running = false;
+  document.getElementById('btn-preview-run-all').disabled = false;
+  document.getElementById('btn-preview-run-next').disabled = previewState.currentStep >= builderSteps.length;
+}
+
 // ── SUITE TEST PICKER ────────────────────────────────────────────────────────
 function openSuiteTestPicker() {
   const list = document.getElementById('stp-test-list');