skopix 2.0.40 → 2.0.42

package/cli/commands/dashboard.js

@@ -1796,10 +1796,10 @@ export async function dashboardCommand(options) {
 
       // ─── STEP TESTER ───────────────────────────────────────────────────
       if (pathname === '/api/step-tester/start' && method === 'POST') {
-        const { url, selector } = JSON.parse(await readBody(req));
+        const { url, selector, mode, steps } = JSON.parse(await readBody(req));
         try {
           const testerId = Math.random().toString(36).slice(2, 10);
-          await startStepTester(testerId, url, selector);
+          await startStepTester(testerId, url, selector, mode || 'test', steps);
           sendJSON(res, 200, { testerId });
         } catch (err) { sendJSON(res, 500, { error: err.message }); }
         return;
@@ -3945,91 +3945,208 @@ async function syncTestsToLibrary(suitesDir) {
 
 const stepTesterSessions = new Map(); // testerId -> { browser, ctx, page }
 
-async function startStepTester(testerId, url, selector) {
+async function startStepTester(testerId, url, selector, mode, steps) {
   const { chromium } = await import('playwright');
   const browser = await chromium.launch({ headless: false, args: ['--no-sandbox'] });
   const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
   const page = await ctx.newPage();
 
-  // Inject the tester toolbar on every page load
-  await ctx.addInitScript((sel) => {
-    window.__skopixTesterSelector = sel;
-    document.addEventListener('DOMContentLoaded', () => {
-      if (document.getElementById('__skopix_tester')) return;
-      const tb = document.createElement('div');
-      tb.id = '__skopix_tester';
-      tb.style.cssText = [
-        'position:fixed', 'bottom:20px', 'left:50%', 'transform:translateX(-50%)',
-        'z-index:2147483647', 'background:#0f1117', 'border:1px solid #f59e0b',
-        'border-radius:12px', 'padding:12px 16px', 'display:flex', 'align-items:center',
-        'gap:10px', 'font-family:monospace', 'font-size:12px', 'color:#e5e7eb',
-        'box-shadow:0 4px 24px rgba(0,0,0,0.7)', 'min-width:400px',
-      ].join(';');
-      tb.innerHTML = `
-        <span style="color:#f59e0b;font-size:14px">⚡</span>
-        <span style="color:#9ca3af;font-size:11px">STEP TESTER</span>
-        <input id="__skopix_sel" value="${(sel||'').replace(/"/g,'&quot;')}" placeholder="selector..."
-          style="flex:1;background:#1a1d2e;border:1px solid #374151;border-radius:6px;padding:4px 8px;
-          color:#e5e7eb;font-family:monospace;font-size:11px;min-width:160px">
-        <select id="__skopix_action" style="background:#1a1d2e;border:1px solid #374151;border-radius:6px;
-          padding:4px 8px;color:#e5e7eb;font-family:monospace;font-size:11px">
-          <option value="click">click</option>
-          <option value="type">type</option>
-          <option value="check">check</option>
-          <option value="assert">assert (visible)</option>
-          <option value="assert_text">assert (text)</option>
-        </select>
-        <input id="__skopix_value" placeholder="value..." style="width:100px;background:#1a1d2e;
-          border:1px solid #374151;border-radius:6px;padding:4px 8px;color:#e5e7eb;
-          font-family:monospace;font-size:11px;display:none">
-        <button id="__skopix_run" style="background:#f59e0b;border:none;color:#000;
-          border-radius:6px;padding:5px 14px;cursor:pointer;font-size:11px;font-weight:700;
-          font-family:monospace">▶ Run</button>
-        <span id="__skopix_result" style="font-size:13px;min-width:20px"></span>
-      `;
-      document.body.appendChild(tb);
-
-      // Show/hide value input based on action
-      document.getElementById('__skopix_action').addEventListener('change', function() {
-        const needsValue = ['type','assert_text'].includes(this.value);
-        document.getElementById('__skopix_value').style.display = needsValue ? '' : 'none';
+  if (mode === 'preview' && steps && steps.length > 0) {
+    // PREVIEW MODE — inject steps list toolbar
+    await ctx.addInitScript((stepsData) => {
+      window.__skopixPreviewSteps = stepsData;
+      window.__skopixPreviewResults = {};
+      document.addEventListener('DOMContentLoaded', () => {
+        if (document.getElementById('__skopix_preview')) return;
+        const tb = document.createElement('div');
+        tb.id = '__skopix_preview';
+        tb.style.cssText = [
+          'position:fixed', 'top:0', 'right:0', 'bottom:0', 'width:320px',
+          'z-index:2147483647', 'background:#0d0d1a', 'border-left:1px solid rgba(245,158,11,0.4)',
+          'display:flex', 'flex-direction:column', 'font-family:monospace', 'font-size:12px',
+          'box-shadow:-4px 0 24px rgba(0,0,0,0.5)',
+        ].join(';');
+        tb.innerHTML = `
+          <div style="padding:12px 16px;border-bottom:1px solid rgba(245,158,11,0.2);background:rgba(245,158,11,0.06);flex-shrink:0">
+            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
+              <div style="display:flex;align-items:center;gap:8px">
+                <span style="color:#f59e0b">⚡</span>
+                <span style="color:#f59e0b;font-size:10px;letter-spacing:0.1em">PREVIEW</span>
+              </div>
+              <div style="display:flex;gap:6px">
+                <button id="__skopix_run_next" style="background:transparent;border:1px solid rgba(245,158,11,0.4);color:#f59e0b;
+                  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace">▶ Next</button>
+                <button id="__skopix_run_all" style="background:#f59e0b;border:none;color:#000;
+                  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace;font-weight:700">▶▶ All</button>
+              </div>
+            </div>
+            <div id="__skopix_preview_status" style="color:#9ca3af;font-size:11px">Navigate to start, then click Run</div>
+          </div>
+          <div id="__skopix_steps" style="overflow-y:auto;flex:1;padding:0"></div>
+          <div id="__skopix_preview_summary" style="display:none;padding:12px 16px;border-top:1px solid rgba(255,255,255,0.08);font-size:12px"></div>
+        `;
+        document.body.appendChild(tb);
+
+        function renderSteps(currentIdx, results) {
+          const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
+          document.getElementById('__skopix_steps').innerHTML = stepsData.map((s, i) => {
+            const r = results[i];
+            const isCurrent = i === currentIdx && !r;
+            const status = r ? (r.passed ? '✓' : '✗') : (isCurrent ? '▶' : '○');
+            const statusColor = r ? (r.passed ? '#34d399' : '#ef4444') : (isCurrent ? '#f59e0b' : '#374151');
+            const bg = isCurrent ? 'rgba(245,158,11,0.08)' : r && !r.passed ? 'rgba(239,68,68,0.06)' : '';
+            return `<div style="padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;gap:10px;align-items:flex-start;background:${bg}">
+              <span style="color:${statusColor};font-size:13px;margin-top:1px;flex-shrink:0">${status}</span>
+              <div style="min-width:0">
+                <div style="display:flex;align-items:center;gap:6px;margin-bottom:2px">
+                  <span style="color:${actionColors[s.action]||'#6b7280'};font-size:10px">${s.action}</span>
+                  <span style="color:#e5e7eb;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px">${s.description||''}</span>
+                </div>
+                <code style="color:#4b5563;font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${s.selector||''}</code>
+                ${r && !r.passed ? `<div style="color:#ef4444;font-size:10px;margin-top:3px">${(r.error||'Failed').slice(0,80)}</div>` : ''}
+              </div>
+            </div>`;
+          }).join('');
+        }
+
+        window.__skopixPreviewCurrentStep = 0;
+        window.__skopixPreviewResults = {};
+        renderSteps(0, {});
+
+        document.getElementById('__skopix_run_next').addEventListener('click', (e) => {
+          e.stopPropagation();
+          if (window.__skopixPreviewRun) window.__skopixPreviewRun({ index: window.__skopixPreviewCurrentStep });
+        });
+
+        document.getElementById('__skopix_run_all').addEventListener('click', (e) => {
+          e.stopPropagation();
+          if (window.__skopixPreviewRunAll) window.__skopixPreviewRunAll({ fromIndex: window.__skopixPreviewCurrentStep });
+        });
+
+        window.__skopixUpdatePreview = (index, result, status) => {
+          window.__skopixPreviewResults[index] = result;
+          if (result && result.passed) window.__skopixPreviewCurrentStep = index + 1;
+          document.getElementById('__skopix_preview_status').textContent = status || '';
+          renderSteps(window.__skopixPreviewCurrentStep, window.__skopixPreviewResults);
+          // Highlight element
+          if (result) {
+            try {
+              const target = document.querySelector(stepsData[index]?.selector || '');
+              if (target) {
+                const orig = target.style.outline;
+                target.style.outline = result.passed ? '3px solid #34d399' : '3px solid #ef4444';
+                setTimeout(() => { target.style.outline = orig; }, 1500);
+              }
+            } catch {}
+          }
+          // Update summary
+          const total = Object.keys(window.__skopixPreviewResults).length;
+          const passed = Object.values(window.__skopixPreviewResults).filter(r=>r&&r.passed).length;
+          const failed = total - passed;
+          if (total > 0) {
+            const summary = document.getElementById('__skopix_preview_summary');
+            summary.style.display = '';
+            summary.innerHTML = `<span style="color:#34d399">✓ ${passed}</span><span style="color:#4b5563"> / </span><span style="color:${failed>0?'#ef4444':'#4b5563'}">✗ ${failed}</span><span style="color:#4b5563"> of ${stepsData.length}</span>`;
+          }
+        };
       });
+    }, steps.map(s => ({ action: s.action, selector: s.stableSelector||s.selector||'', description: s.description||s.action, value: s.value||'' })));
+
+    // Expose run functions
+    await ctx.exposeFunction('__skopixPreviewRun', async ({ index }) => {
+      const s = steps[index];
+      if (!s) return;
+      await page.evaluate((i, status) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, status); }, index, `Running step ${index+1}/${steps.length}...`);
+      const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
+      await page.evaluate((i, r, total) => {
+        if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, r.passed ? (i+1 >= total ? `✓ All ${total} steps passed!` : `✓ Step ${i+1} passed`) : `✗ Step ${i+1} failed`);
+      }, index, result, steps.length);
+    });
 
-      // Run button — posts to parent via window.__skopixTesterRun
-      document.getElementById('__skopix_run').addEventListener('click', function(e) {
-        e.stopPropagation();
-        const sel = document.getElementById('__skopix_sel').value.trim();
-        const action = document.getElementById('__skopix_action').value;
-        const value = document.getElementById('__skopix_value').value.trim();
-        const resultEl = document.getElementById('__skopix_result');
-        resultEl.textContent = '⏳';
-        if (window.__skopixTesterRun) {
-          window.__skopixTesterRun({ sel, action, value });
-        }
+    await ctx.exposeFunction('__skopixPreviewRunAll', async ({ fromIndex }) => {
+      for (let i = fromIndex; i < steps.length; i++) {
+        const s = steps[i];
+        await page.evaluate((i, total) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, `Running step ${i+1}/${total}...`); }, i, steps.length);
+        const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
+        await page.evaluate((i, r, total) => {
+          if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, r.passed ? (i+1 >= total ? `✓ All ${total} steps passed!` : `Running...`) : `✗ Step ${i+1} failed — fix and retry`);
+        }, i, result, steps.length);
+        if (!result.passed) break;
+        await new Promise(r => setTimeout(r, 400));
+      }
+    });
+
+  } else {
+    // STEP TESTER MODE — single step toolbar
+    await ctx.addInitScript((sel) => {
+      window.__skopixTesterSelector = sel;
+      document.addEventListener('DOMContentLoaded', () => {
+        if (document.getElementById('__skopix_tester')) return;
+        const tb = document.createElement('div');
+        tb.id = '__skopix_tester';
+        tb.style.cssText = [
+          'position:fixed', 'bottom:20px', 'left:50%', 'transform:translateX(-50%)',
+          'z-index:2147483647', 'background:#0f1117', 'border:1px solid #f59e0b',
+          'border-radius:12px', 'padding:12px 16px', 'display:flex', 'align-items:center',
+          'gap:10px', 'font-family:monospace', 'font-size:12px', 'color:#e5e7eb',
+          'box-shadow:0 4px 24px rgba(0,0,0,0.7)', 'min-width:400px',
+        ].join(';');
+        tb.innerHTML = `
+          <span style="color:#f59e0b;font-size:14px">⚡</span>
+          <span style="color:#9ca3af;font-size:11px">STEP TESTER</span>
+          <input id="__skopix_sel" value="${(sel||'').replace(/"/g,'&quot;')}" placeholder="selector..."
+            style="flex:1;background:#1a1d2e;border:1px solid #374151;border-radius:6px;padding:4px 8px;
+            color:#e5e7eb;font-family:monospace;font-size:11px;min-width:160px">
+          <select id="__skopix_action" style="background:#1a1d2e;border:1px solid #374151;border-radius:6px;
+            padding:4px 8px;color:#e5e7eb;font-family:monospace;font-size:11px">
+            <option value="click">click</option>
+            <option value="type">type</option>
+            <option value="check">check</option>
+            <option value="assert">assert (visible)</option>
+            <option value="assert_text">assert (text)</option>
+          </select>
+          <input id="__skopix_value" placeholder="value..." style="width:100px;background:#1a1d2e;
+            border:1px solid #374151;border-radius:6px;padding:4px 8px;color:#e5e7eb;
+            font-family:monospace;font-size:11px;display:none">
+          <button id="__skopix_run" style="background:#f59e0b;border:none;color:#000;
+            border-radius:6px;padding:5px 14px;cursor:pointer;font-size:11px;font-weight:700;
+            font-family:monospace">▶ Run</button>
+          <span id="__skopix_result" style="font-size:13px;min-width:20px"></span>
+        `;
+        document.body.appendChild(tb);
+        document.getElementById('__skopix_action').addEventListener('change', function() {
+          const needsValue = ['type','assert_text'].includes(this.value);
+          document.getElementById('__skopix_value').style.display = needsValue ? '' : 'none';
+        });
+        document.getElementById('__skopix_run').addEventListener('click', function(e) {
+          e.stopPropagation();
+          const sel = document.getElementById('__skopix_sel').value.trim();
+          const action = document.getElementById('__skopix_action').value;
+          const value = document.getElementById('__skopix_value').value.trim();
+          document.getElementById('__skopix_result').textContent = '⏳';
+          if (window.__skopixTesterRun) window.__skopixTesterRun({ sel, action, value });
+        });
       });
+    }, selector || '');
+
+    await ctx.exposeFunction('__skopixTesterRun', async ({ sel, action, value }) => {
+      const result = await executeStepTesterAction(page, { selector: sel, action, value });
+      await page.evaluate((r, sel) => {
+        const el = document.getElementById('__skopix_result');
+        if (el) el.textContent = r.passed ? '✓' : '✗';
+        try {
+          const target = document.querySelector(sel);
+          if (target) {
+            const orig = target.style.outline;
+            target.style.outline = r.passed ? '3px solid #34d399' : '3px solid #ef4444';
+            setTimeout(() => { target.style.outline = orig; }, 1500);
+          }
+        } catch {}
+      }, result, sel);
     });
-  }, selector || '');
-
-  // Expose run function back to page
-  await ctx.exposeFunction('__skopixTesterRun', async ({ sel, action, value }) => {
-    const result = await executeStepTesterAction(page, { selector: sel, action, value });
-    await page.evaluate((r) => {
-      const el = document.getElementById('__skopix_result');
-      if (el) el.textContent = r.passed ? '✓' : '✗';
-      // Highlight element briefly
-      try {
-        const target = document.querySelector(r.selector);
-        if (target) {
-          const orig = target.style.outline;
-          target.style.outline = r.passed ? '3px solid #34d399' : '3px solid #ef4444';
-          setTimeout(() => { target.style.outline = orig; }, 1500);
-        }
-      } catch {}
-    }, { ...result, selector: sel });
-  });
+  }
 
   if (url) await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 }).catch(() => {});
-
   stepTesterSessions.set(testerId, { browser, ctx, page });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skopix",
-  "version": "2.0.40",
+  "version": "2.0.42",
   "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

@@ -1708,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;position:relative">
+        <div style="display:flex;flex-direction:column;overflow:hidden">
           <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>
@@ -1725,35 +1725,6 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
             </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>
@@ -6122,7 +6093,6 @@ function closeTestBuilder() {
     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';
   document.querySelectorAll('.view').forEach(v => {
@@ -6422,47 +6392,7 @@ function harvestAnother() {
 }
 
 // ── 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';
-}
+let previewState = { testerId: null };
 
 async function startBuilderPreview() {
   const url = document.getElementById('builder-url')?.value?.trim();
@@ -6477,19 +6407,25 @@ async function startBuilderPreview() {
     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 || '' }),
+      body: JSON.stringify({
+        url,
+        mode: 'preview',
+        steps: builderSteps.map(s => ({
+          action: s.action,
+          stableSelector: s.stableSelector || s.selector,
+          selector: s.selector || s.stableSelector,
+          value: s.value || '',
+          assertType: s.assertType || null,
+          description: s.description || s.action,
+        })),
+      }),
     });
     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();
+    previewState.testerId = data.testerId;
     btn.textContent = '⏸ Previewing';
+    btn.onclick = stopBuilderPreview;
+    showToast('Browser open — use the toolbar in the browser to run steps');
   } catch (err) {
     showToast('Error: ' + err.message);
     btn.disabled = false;
@@ -6502,121 +6438,8 @@ async function stopBuilderPreview() {
     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;
+  if (btn) { btn.disabled = false; btn.textContent = 'Preview'; btn.onclick = startBuilderPreview; }
 }
 
 // ── SUITE TEST PICKER ────────────────────────────────────────────────────────