skopix 2.0.104 → 2.0.106

package/cli/commands/agent.js

@@ -385,89 +385,264 @@ export async function agentCommand(options) {
   async function handleDebugRecord(msg) {
     const { runId, recordingId, replaySteps } = msg;
     const startUrl = (msg.startUrl && msg.startUrl.startsWith('http')) ? msg.startUrl : null;
-    console.log(chalk.cyan('  ⏸ Debug replay: ') + chalk.white(replaySteps.length + ' steps to debug point') + (startUrl ? chalk.dim(' @ ' + startUrl) : ''));
+    console.log(chalk.cyan('  ⏸ Debug replay: ') + chalk.white(replaySteps.length + ' steps') + (startUrl ? chalk.dim(' @ ' + startUrl) : ''));
 
     const sendRun = (data) => { try { ws.send(JSON.stringify({ type: 'runUpdate', runId, data })); } catch {} };
     const sendRec = (data) => { try { ws.send(JSON.stringify({ type: 'recordingUpdate', recordingId, data })); } catch {} };
+    const steps = [];
 
     sendRun({ type: 'stdout', text: '' });
     sendRun({ type: 'stdout', text: '  Replaying ' + replaySteps.length + ' steps to reach debug point...' });
-    sendRun({ type: 'stdout', text: '━'.repeat(60) });
+    sendRun({ type: 'stdout', text: '\u2501'.repeat(60) });
+
+    let chromiumBrowser = null;
+    let page = null;
+    let ctx = null;
 
     try {
       const { chromium } = await import('playwright');
-      const browser = await chromium.launch({ headless: false, args: ['--no-sandbox', '--disable-blink-features=AutomationControlled', '--allow-insecure-localhost'] });
-      const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
-      const page = await ctx.newPage();
+      chromiumBrowser = await chromium.launch({ headless: false, args: ['--no-sandbox', '--disable-blink-features=AutomationControlled', '--allow-insecure-localhost'] });
+      ctx = await chromiumBrowser.newContext({ viewport: { width: 1280, height: 800 } });
+      page = await ctx.newPage();
 
       if (startUrl) {
         await page.goto(startUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
         await page.waitForTimeout(1000);
       }
 
-      // Replay each step to reach debug point
+      // Replay steps to debug point
       let stepNum = 0;
+      let browserClosed = false;
       for (const step of replaySteps) {
+        if (browserClosed) break;
         stepNum++;
-        sendRun({ type: 'stdout', text: '  [' + stepNum + '/' + replaySteps.length + '] ' + (step.action || '').toUpperCase() + ' — ' + (step.description || step.stableSelector || step.selector || '') });
+        const sel = sanitiseSelector(step.stableSelector || step.selector);
+        const desc = step.description || (step.action + ' ' + (sel || ''));
+        sendRun({ type: 'stdout', text: '  [' + stepNum + '/' + replaySteps.length + '] ' + step.action.toUpperCase() + ' \u2014 ' + desc });
         try {
-          const sel = step.stableSelector || step.selector;
           await executeStep(step, sel, page, { url: startUrl || '' });
+          sendRun({ type: 'stdout', text: '    \u2713 Done' });
         } catch (err) {
-          sendRun({ type: 'stdout', text: '  ✖ FAILED at step ' + stepNum + ': ' + err.message });
-          sendRun({ type: 'done', exitCode: 1, status: 'failed' });
-          sendRun({ type: 'stdout', text: '<span style="color:var(--red)">✗ Replay failed — could not reach debug point</span>' });
-          await browser.close().catch(() => {});
-          ws.send(JSON.stringify({ type: 'jobDone', runId }));
-          return;
+          const msg2 = err.message || '';
+          if (msg2.includes('closed') || msg2.includes('destroyed') || msg2.includes('detached')) {
+            browserClosed = true;
+            sendRun({ type: 'stdout', text: '    \u2716 Browser closed' });
+          } else {
+            sendRun({ type: 'stdout', text: '    \u26a0 Skipped: ' + msg2.slice(0, 100) });
+          }
         }
       }
 
       sendRun({ type: 'stdout', text: '' });
-      sendRun({ type: 'stdout', text: '  ✔ Reached debug point — starting recorder' });
-
-      // Attach RecordingSession to the existing browser — injects toolbar into current page
-      const screenshotDir = path.join(os.homedir(), '.skopix', 'recordings', recordingId);
-      await fs.ensureDir(screenshotDir);
-
-      const { RecordingSession } = await import('../../core/recorder.js');
-      const session = new RecordingSession({ url: startUrl || msg.startUrl || '', sessionId: recordingId, screenshotDir });
-
-      // Override emit to forward over WebSocket
-      session.emit = (obj) => {
-        sendRec(obj);
-        if (obj.type === 'step') process.stdout.write(chalk.cyan('    ⏺ ') + (obj.step?.action || '') + '\n');
-        if (obj.type === 'done' || obj.type === 'stopped') {
-          console.log(chalk.green('  ✔ Debug recording done — ' + (obj.steps?.length || 0) + ' new steps'));
-          browser.close().catch(() => {});
+      sendRun({ type: 'stdout', text: '  \u2714 Reached debug point \u2014 recording started' });
+      sendRun({ type: 'stdout', text: '  Use the browser, then click Stop.' });
+
+      // Wire up capture — exposeFunction on context persists across navigations
+      await ctx.exposeFunction('__skopixCapture', async (actionData) => {
+        if (actionData.action === 'stop') {
+          // Send done to close replay SSE, then send recording done
+          sendRun({ type: 'done', exitCode: 0, status: 'passed', recordingId });
+          // Save steps
+          const screenshotDir = path.join(os.homedir(), '.skopix', 'recordings', recordingId);
+          sendRec({ type: 'done', steps });
+          try { await chromiumBrowser.close(); } catch {}
           ws.send(JSON.stringify({ type: 'jobDone', runId }));
-          console.log(chalk.cyan('  ◆ Waiting for jobs\n'));
+          console.log(chalk.green('  \u2714 Debug recording done \u2014 ' + steps.length + ' new steps'));
+          console.log(chalk.cyan('  \u25c6 Waiting for jobs\n'));
+          return;
         }
-      };
-
-      // Attach to existing browser/context/page — injects toolbar without new browser
-      await session.attachTo(browser, ctx, page);
+        const id = 'step-' + String(steps.length + 1).padStart(3, '0') + '-dbg';
+        const recStep = {
+          id, action: actionData.action, assertType: actionData.assertType || null,
+          attribute: actionData.attribute || null,
+          selector: actionData.selector || (actionData.element ? actionData.element.selector : null),
+          element: actionData.element || null, value: actionData.value || null,
+          isPassword: actionData.isPassword || false, label: actionData.label || null,
+          clickX: actionData.clickX || null, clickY: actionData.clickY || null,
+          elementX: actionData.elementX || null, elementY: actionData.elementY || null,
+          description: actionData.description || null,
+          url: page ? page.url() : '', timestamp: Date.now(), stableSelector: null,
+        };
+        steps.push(recStep);
+        sendRec({ type: 'step', step: recStep });
+        process.stdout.write(chalk.cyan('    \u23fa ') + (recStep.action || '') + '\n');
+        try { await page.evaluate(n => { if (window.__skopixUpdateCount) window.__skopixUpdateCount(n); }, steps.length); } catch {}
+        // Screenshot
+        setTimeout(async () => {
+          try {
+            const screenshotDir = path.join(os.homedir(), '.skopix', 'recordings', recordingId);
+            await fs.ensureDir(screenshotDir);
+            const sp = path.join(screenshotDir, id + '.png');
+            await page.screenshot({ path: sp, fullPage: false }).catch(() => {});
+            recStep.screenshotPath = sp;
+            sendRec({ type: 'screenshot', stepId: id, path: sp });
+          } catch {}
+        }, 400);
+      });
 
-      // Listen for stop signal from server
-      const stopHandler = (event) => {
-        let m; try { m = JSON.parse(event.data); } catch { return; }
-        if (m.type === 'stopRecord' && m.recordingId === recordingId) {
-          session.stop().catch(() => {});
-          ws.removeEventListener('message', stopHandler);
+      // Inject toolbar + all listeners directly into live page via evaluate
+      // (same approach as solo debug mode in dashboard.js — no reload needed)
+      await page.evaluate(() => {
+        if (window.__skopixRecording) return;
+        window.__skopixRecording = true;
+
+        function getSelector(el) {
+          if (!el || el === document.body) return 'body';
+          const testAttrs = ['data-testid','data-test','pi-test-identifier','data-cy','data-qa'];
+          for (const attr of testAttrs) { const val = el.getAttribute(attr); if (val) return '['+attr+'="'+val+'"]'; }
+          if (el.id && !/^\d/.test(el.id)) return '#'+el.id;
+          const al = el.getAttribute('aria-label');
+          if (al && ['button','a','input'].includes(el.tagName.toLowerCase())) return el.tagName.toLowerCase()+'[aria-label="'+al+'"]';
+          if (el.name && el.tagName === 'INPUT') return 'input[name="'+el.name+'"]';
+          const parts = []; let cur = el, depth = 0;
+          while (cur && cur !== document.body && depth < 4) {
+            let seg = cur.tagName.toLowerCase();
+            if (cur.id && !/^\d/.test(cur.id)) { parts.unshift('#'+cur.id); break; }
+            const sib = Array.from(cur.parentElement ? cur.parentElement.children : []).filter(c => c.tagName === cur.tagName);
+            if (sib.length > 1) seg += ':nth-of-type('+(sib.indexOf(cur)+1)+')';
+            parts.unshift(seg); cur = cur.parentElement; depth++;
+          }
+          return parts.join(' > ');
         }
-      };
-      ws.addEventListener('message', stopHandler);
+        function getElementInfo(el) {
+          return { tag: el.tagName.toLowerCase(), id: el.id||null, name: el.name||null, type: el.type||null,
+            text: (el.innerText||el.value||el.placeholder||el.getAttribute('aria-label')||'').trim().slice(0,80),
+            selector: getSelector(el), classes: el.className ? el.className.toString().trim().slice(0,100) : null,
+            piTestId: el.getAttribute('pi-test-identifier')||null, title: el.getAttribute('title')||null,
+            ariaLabel: el.getAttribute('aria-label')||null, dataTestId: el.getAttribute('data-testid')||null };
+        }
+
+        document.addEventListener('click', function(e) {
+          if (e.target && e.target.closest) { if (e.target.closest('#__skopix_toolbar')) return; if (e.target.closest('#__skopix_popover')) return; if (e.target.closest('#__skopix_hint')) return; }
+          if (window.__skopixPickMode) return;
+          const el = e.target;
+          if (!el || el === document.body || el === document.documentElement) return;
+          const rect = el.getBoundingClientRect();
+          const isCheckable = el.type === 'checkbox' || el.type === 'radio';
+          let checkTarget = null;
+          if (!isCheckable && el.tagName === 'LABEL' && el.htmlFor) checkTarget = document.getElementById(el.htmlFor);
+          if (!isCheckable && el.tagName === 'LABEL' && !el.htmlFor) checkTarget = el.querySelector('input[type="checkbox"],input[type="radio"]');
+          const actual = isCheckable ? el : checkTarget;
+          if (actual && (actual.type === 'checkbox' || actual.type === 'radio')) {
+            window.__skopixCapture && window.__skopixCapture({ action:'check', checked:actual.checked, element:getElementInfo(actual), clickX:Math.round(e.clientX), clickY:Math.round(e.clientY), elementX:Math.round(rect.left+rect.width/2), elementY:Math.round(rect.top+rect.height/2) });
+          } else {
+            window.__skopixCapture && window.__skopixCapture({ action:'click', element:getElementInfo(el), clickX:Math.round(e.clientX), clickY:Math.round(e.clientY), elementX:Math.round(rect.left+rect.width/2), elementY:Math.round(rect.top+rect.height/2) });
+          }
+        }, true);
+
+        let typeTimer = null, lastInputEl = null;
+        document.addEventListener('input', function(e) {
+          const el = e.target;
+          if (!el || !['INPUT','TEXTAREA'].includes(el.tagName)) return;
+          if (el.type === 'checkbox' || el.type === 'radio') return;
+          if (el.closest && (el.closest('#__skopix_toolbar') || el.closest('#__skopix_popover'))) return;
+          lastInputEl = el; clearTimeout(typeTimer);
+          typeTimer = setTimeout(() => { if (!lastInputEl) return; window.__skopixCapture && window.__skopixCapture({ action:'type', element:getElementInfo(lastInputEl), value:lastInputEl.value, isPassword:lastInputEl.type==='password' }); lastInputEl = null; }, 600);
+        }, true);
+
+        document.addEventListener('change', function(e) {
+          const el = e.target; if (!el || el.tagName !== 'SELECT') return;
+          if (el.closest && (el.closest('#__skopix_toolbar') || el.closest('#__skopix_popover'))) return;
+          const sel2 = el.options[el.selectedIndex];
+          window.__skopixCapture && window.__skopixCapture({ action:'select', element:getElementInfo(el), value:el.value, label:sel2?sel2.text:el.value });
+        }, true);
+
+        // Toolbar
+        const tb = document.createElement('div');
+        tb.id = '__skopix_toolbar';
+        tb.style.cssText = 'position:fixed;bottom:20px;right:20px;z-index:2147483647;background:#0f1117;border:2px solid #f59e0b;border-radius:10px;padding:10px 14px;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.6);user-select:none';
+        tb.innerHTML = '<span style="color:#f59e0b;font-size:14px;animation:skopix_pulse 1s infinite">\u25cf</span>'
+          + '<span style="color:#9ca3af">Debug recording</span>'
+          + '<span id="__skopix_count" style="color:#22d3ee;font-weight:700;min-width:20px;text-align:center">0</span>'
+          + '<span style="color:#4b5563">steps</span>'
+          + '<button id="__skopix_assert_btn" style="background:#1e3a5f;border:1px solid #2563eb;color:#60a5fa;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace">+ Assert</button>'
+          + '<button id="__skopix_stop_btn" style="background:#3f0d0d;border:1px solid #dc2626;color:#f87171;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace">\u25a0 Stop</button>';
+        const sty = document.createElement('style');
+        sty.textContent = '@keyframes skopix_pulse{0%,100%{opacity:1}50%{opacity:0.3}}';
+        document.head.appendChild(sty);
+        document.body.appendChild(tb);
+        tb.querySelector('#__skopix_stop_btn').addEventListener('click', e => { e.stopPropagation(); window.__skopixCapture && window.__skopixCapture({ action:'stop' }); });
+        window.__skopixUpdateCount = n => { const el = document.getElementById('__skopix_count'); if (el) el.textContent = n; };
+
+        // Assert picker
+        tb.querySelector('#__skopix_assert_btn').addEventListener('click', function(e) {
+          e.stopPropagation();
+          window.__skopixPickMode = true;
+          document.body.style.cursor = 'crosshair';
+          const hint = document.createElement('div'); hint.id = '__skopix_hint';
+          hint.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:2147483647;background:#1e3a5f;border:1px solid #2563eb;color:#60a5fa;padding:8px 18px;border-radius:8px;font-family:monospace;font-size:13px;pointer-events:none';
+          hint.textContent = 'Click any element to add an assertion \u2014 Esc to cancel';
+          document.body.appendChild(hint);
+          const overlay = document.createElement('div');
+          overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;z-index:2147483646;pointer-events:auto;cursor:crosshair';
+          document.body.appendChild(overlay);
+          const hl = document.createElement('div');
+          hl.style.cssText = 'position:fixed;pointer-events:none;z-index:2147483645;background:rgba(37,99,235,0.15);border:2px solid #2563eb;border-radius:3px;transition:all 0.1s;display:none';
+          document.body.appendChild(hl);
+          overlay.addEventListener('mousemove', function(e2) {
+            overlay.style.pointerEvents = 'none';
+            const el2 = document.elementFromPoint(e2.clientX, e2.clientY);
+            overlay.style.pointerEvents = 'auto';
+            if (!el2 || el2 === document.body) { hl.style.display = 'none'; return; }
+            const r = el2.getBoundingClientRect();
+            hl.style.display = 'block'; hl.style.top = r.top+'px'; hl.style.left = r.left+'px'; hl.style.width = r.width+'px'; hl.style.height = r.height+'px';
+          });
+          overlay.addEventListener('click', function(e2) {
+            e2.preventDefault(); e2.stopPropagation();
+            overlay.style.pointerEvents = 'none';
+            const el2 = document.elementFromPoint(e2.clientX, e2.clientY);
+            overlay.style.pointerEvents = 'auto';
+            window.__skopixPickMode = false; document.body.style.cursor = '';
+            overlay.remove(); const h2 = document.getElementById('__skopix_hint'); if (h2) h2.remove();
+            if (!el2 || el2 === document.body) { hl.style.display = 'none'; return; }
+            const sel2 = getSelector(el2);
+            const txt = (el2.innerText||el2.textContent||'').trim().slice(0,100);
+            const rect2 = el2.getBoundingClientRect();
+            hl.style.background = 'rgba(34,197,94,0.15)'; hl.style.borderColor = '#22c55e';
+            hl.style.display = 'block'; hl.style.top = rect2.top+'px'; hl.style.left = rect2.left+'px'; hl.style.width = rect2.width+'px'; hl.style.height = rect2.height+'px';
+            let sugType = 'visible', sugVal = '';
+            if (txt && txt.length > 0 && txt.length < 80) { sugType = 'text_contains'; sugVal = txt.replace(/\s+/g,' ').trim(); }
+            const popover = document.createElement('div'); popover.id = '__skopix_popover';
+            const topPos = rect2.bottom+8+280 > window.innerHeight ? Math.max(8,rect2.top-288) : rect2.bottom+8;
+            popover.style.cssText = 'position:fixed;z-index:2147483647;top:'+topPos+'px;left:'+Math.min(rect2.left,window.innerWidth-360)+'px;width:350px;background:#0f1117;border:1px solid #2563eb;border-radius:10px;padding:16px;font-family:monospace;font-size:12px;color:#e5e7eb;box-shadow:0 8px 32px rgba(0,0,0,0.7)';
+            popover.innerHTML = '<div style="color:#60a5fa;font-size:11px;letter-spacing:0.1em;margin-bottom:12px">ADD ASSERTION</div>'
+              + '<div style="margin-bottom:10px"><div style="color:#9ca3af;font-size:10px;margin-bottom:4px">ELEMENT</div><div style="background:#1a1d2e;padding:6px 10px;border-radius:6px;color:#22d3ee;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+sel2+'</div>'+(txt?'<div style="color:#6b7280;font-size:10px;margin-top:3px">Text: "'+txt.slice(0,50)+'"</div>':'')+'</div>'
+              + '<div style="margin-bottom:10px"><div style="color:#9ca3af;font-size:10px;margin-bottom:4px">TYPE</div><select id="__skopix_assert_type" style="width:100%;background:#1a1d2e;border:1px solid #374151;color:#e5e7eb;padding:6px 8px;border-radius:6px;font-family:monospace;font-size:12px"><option value="visible"'+(sugType==="visible"?" selected":"")+'>Element is visible</option><option value="text_contains"'+(sugType==="text_contains"?" selected":"")+'>Text contains</option><option value="text_equals">Text equals</option><option value="url_contains">URL contains</option><option value="element_count">Element count</option></select></div>'
+              + '<div id="__skopix_value_row" style="margin-bottom:10px;'+(sugType==="visible"?"display:none":"")+'"><div style="color:#9ca3af;font-size:10px;margin-bottom:4px">EXPECTED VALUE</div><input id="__skopix_assert_value" type="text" value="'+sugVal.replace(/"/g,"&quot;")+'" style="width:100%;box-sizing:border-box;background:#1a1d2e;border:1px solid #374151;color:#e5e7eb;padding:6px 8px;border-radius:6px;font-family:monospace;font-size:12px"></div>'
+              + '<div style="display:flex;gap:8px;justify-content:flex-end"><button id="__skopix_cancel_btn" style="background:transparent;border:1px solid #374151;color:#9ca3af;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:monospace;font-size:12px">Cancel</button><button id="__skopix_add_btn" style="background:#1e3a5f;border:1px solid #2563eb;color:#60a5fa;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:monospace;font-size:12px;font-weight:700">Add \u2713</button></div>';
+            document.body.appendChild(popover);
+            popover.querySelector('#__skopix_assert_type').addEventListener('change', function() {
+              const t = this.value; popover.querySelector('#__skopix_value_row').style.display = t==='visible'?'none':'';
+            });
+            popover.querySelector('#__skopix_cancel_btn').addEventListener('click', function(e3) { e3.stopPropagation(); hl.style.display='none'; popover.remove(); });
+            popover.querySelector('#__skopix_add_btn').addEventListener('click', function(e3) {
+              e3.stopPropagation();
+              const assertType = popover.querySelector('#__skopix_assert_type').value;
+              const value = popover.querySelector('#__skopix_assert_value').value.trim();
+              if (assertType !== 'visible' && assertType !== 'url_contains' && !value) { popover.querySelector('#__skopix_assert_value').style.borderColor='#dc2626'; return; }
+              window.__skopixCapture && window.__skopixCapture({ action:'assert', assertType, selector:assertType==='url_contains'?null:sel2, value:value||null, element:assertType==='url_contains'?null:{tag:el2.tagName.toLowerCase(),text:txt} });
+              hl.style.display='none'; popover.remove();
+            });
+          });
+          document.addEventListener('keydown', function escH(e2) { if (e2.key==='Escape') { window.__skopixPickMode=false; document.body.style.cursor=''; overlay.remove(); const h2=document.getElementById('__skopix_hint');if(h2)h2.remove(); hl.style.display='none'; document.removeEventListener('keydown',escH); } });
+        });
+      });
+
+      // Tell dashboard recording is live — frontend switches to recording SSE
+      sendRun({ type: 'done', exitCode: 0, status: 'passed', recordingId });
+      process.stderr.write('[debug] toolbar injected, waiting for user actions\n');
 
     } catch (err) {
-      console.error(chalk.red('  ✖ Debug error: ' + err.message));
-      sendRun({ type: 'stdout', text: '  ✖ Debug replay error: ' + err.message });
+      console.error(chalk.red('  \u2716 Debug error: ' + err.message));
+      sendRun({ type: 'stdout', text: '  \u2716 Debug replay error: ' + err.message });
       sendRun({ type: 'done', exitCode: 1, status: 'failed' });
-      sendRun({ type: 'stdout', text: '<span style="color:var(--red)">✗ Replay failed — could not reach debug point</span>' });
+      sendRec({ type: 'stopped' });
+      if (chromiumBrowser) try { await chromiumBrowser.close(); } catch {}
       ws.send(JSON.stringify({ type: 'jobDone', runId }));
     }
   }
 
-  // ── HELPERS ────────────────────────────────────────────────────────────────
+    // ── HELPERS ────────────────────────────────────────────────────────────────
   function sanitiseSelector(sel) {
     if (!sel) return sel;
     return sel.replace(/\[([a-zA-Z_-]+)="([^"]+\.\d{5,})"\]/g, (_, attr, val) => '[' + attr + '*="' + val.replace(/\.\d{5,}$/, '') + '"]');

package/core/recorder.js

@@ -597,28 +597,27 @@ export class RecordingSession {
     this.emit({ type: 'ready' });
   }
 
-  // Attach to an existing browser/context/page (used for debug mode)
-  // instead of launching a fresh browser via launch()
+  // Attach to an existing browser/context/page (used for debug mode).
+  // Runs the same context setup as launch() then reloads so addInitScript fires —
+  // toolbar and capture listeners are fully wired up, just like a fresh recording.
   async attachTo(browser, context, page) {
     this.browser = browser;
     this.context = context;
     this.page = page;
 
-    // Expose capture function on the existing context
+    // Same exposeFunction as launch() — persists across all navigations
     await this.context.exposeFunction('__skopixCapture', async (actionData) => {
       if (this._stopping) return;
-      if (actionData.action === 'stop') {
-        await this.stop();
-        return;
-      }
+      if (actionData.action === 'stop') { await this.stop(); return; }
       await this._captureStep(actionData);
-    }).catch(() => {}); // may already be exposed
+    }).catch(() => {});
 
-    // Inject the init script into the existing page
+    // Same addInitScript as launch() — fires on every page load including the reload below
     await this.context.addInitScript(() => {
       if (window.__skopixRecording) return;
       window.__skopixRecording = true;
 
+      // ─── Selector builder ─────────────────────────────────────────────────
       function getSelector(el) {
         if (!el || el === document.body) return 'body';
         const testAttrs = ['data-testid', 'data-test', 'pi-test-identifier', 'data-cy', 'data-qa'];
@@ -632,13 +631,17 @@ export class RecordingSession {
           return el.tagName.toLowerCase() + '[aria-label="' + ariaLabel + '"]';
         }
         if (el.name && el.tagName === 'INPUT') return 'input[name="' + el.name + '"]';
-        const parts = []; let cur = el; let depth = 0;
+        const parts = [];
+        let cur = el;
+        let depth = 0;
         while (cur && cur !== document.body && depth < 4) {
           let seg = cur.tagName.toLowerCase();
           if (cur.id && !/^\d/.test(cur.id)) { parts.unshift('#' + cur.id); break; }
           const sib = Array.from(cur.parentElement ? cur.parentElement.children : []).filter(c => c.tagName === cur.tagName);
           if (sib.length > 1) seg += ':nth-of-type(' + (sib.indexOf(cur) + 1) + ')';
-          parts.unshift(seg); cur = cur.parentElement; depth++;
+          parts.unshift(seg);
+          cur = cur.parentElement;
+          depth++;
         }
         return parts.join(' > ');
       }
@@ -648,42 +651,104 @@ export class RecordingSession {
         const title = el.getAttribute('title') || null;
         const ariaLabel = el.getAttribute('aria-label') || null;
         const dataTestId = el.getAttribute('data-testid') || el.getAttribute('data-test-id') || null;
-        const info = { tag: el.tagName.toLowerCase(), id: el.id || null, name: el.name || null, type: el.type || null, text: (el.innerText || el.value || el.placeholder || ariaLabel || title || '').trim().slice(0, 80), selector: getSelector(el), classes: el.className ? el.className.toString().trim().slice(0, 100) : null, title, ariaLabel, piTestId, dataTestId };
+        const info = {
+          tag: el.tagName.toLowerCase(),
+          id: el.id || null,
+          name: el.name || null,
+          type: el.type || null,
+          text: (el.innerText || el.value || el.placeholder || ariaLabel || title || '').trim().slice(0, 80),
+          selector: getSelector(el),
+          classes: el.className ? el.className.toString().trim().slice(0, 100) : null,
+          title,
+          ariaLabel,
+          piTestId,
+          dataTestId,
+        };
+        // For icon elements with no meaningful ID/text, capture parent context for better selector generation
         const isIcon = ['i', 'span', 'svg'].includes(info.tag) && !info.id && !info.text && !piTestId;
-        if (isIcon && el.parentElement) { const p = el.parentElement; info.parentTag = p.tagName.toLowerCase(); info.parentClasses = p.className ? p.className.toString().trim().slice(0, 100) : null; info.parentSelector = getSelector(p); info.parentAriaLabel = p.getAttribute('aria-label') || null; info.parentTitle = p.getAttribute('title') || null; info.parentTestId = p.getAttribute('pi-test-identifier') || p.getAttribute('data-testid') || null; }
+        if (isIcon && el.parentElement) {
+          const p = el.parentElement;
+          info.parentTag = p.tagName.toLowerCase();
+          info.parentClasses = p.className ? p.className.toString().trim().slice(0, 100) : null;
+          info.parentSelector = getSelector(p);
+          info.parentAriaLabel = p.getAttribute('aria-label') || null;
+          info.parentTitle = p.getAttribute('title') || null;
+          info.parentTestId = p.getAttribute('pi-test-identifier') || p.getAttribute('data-testid') || null;
+        }
         return info;
       }
 
+      // ─── Action listeners ─────────────────────────────────────────────────
       document.addEventListener('click', function(e) {
-        if (e.target && e.target.closest) { if (e.target.closest('#__skopix_toolbar')) return; if (e.target.closest('#__skopix_popover')) return; if (e.target.closest('#__skopix_hint')) return; }
-        if (window.__skopixPickMode) return;
+        // Don't capture clicks on our own toolbar, popover, or hint overlay
+        if (e.target && e.target.closest) {
+          if (e.target.closest('#__skopix_toolbar')) return;
+          if (e.target.closest('#__skopix_popover')) return;
+          if (e.target.closest('#__skopix_hint')) return;
+        }
+        if (window.__skopixPickMode) return; // picker handles its own clicks
         const el = e.target;
         if (!el || el === document.body || el === document.documentElement) return;
         const rect = el.getBoundingClientRect();
         if (window.__skopixCapture) {
+          // Detect checkboxes and radio buttons - use 'check' action
+          // The checked state is what it WILL BE after this click (it toggles)
           const isCheckable = el.type === 'checkbox' || el.type === 'radio';
+          // Also check if we clicked a label that controls a checkbox
           let checkTarget = null;
-          if (!isCheckable && el.tagName === 'LABEL' && el.htmlFor) checkTarget = document.getElementById(el.htmlFor);
-          if (!isCheckable && el.tagName === 'LABEL' && !el.htmlFor) checkTarget = el.querySelector('input[type="checkbox"], input[type="radio"]');
+          if (!isCheckable && el.tagName === 'LABEL' && el.htmlFor) {
+            checkTarget = document.getElementById(el.htmlFor);
+          }
+          if (!isCheckable && el.tagName === 'LABEL' && !el.htmlFor) {
+            checkTarget = el.querySelector('input[type="checkbox"], input[type="radio"]');
+          }
           const actualCheckable = isCheckable ? el : checkTarget;
           if (actualCheckable && (actualCheckable.type === 'checkbox' || actualCheckable.type === 'radio')) {
-            window.__skopixCapture({ action: 'check', checked: actualCheckable.checked, element: getElementInfo(actualCheckable), clickX: Math.round(e.clientX), clickY: Math.round(e.clientY), elementX: Math.round(rect.left + rect.width / 2), elementY: Math.round(rect.top + rect.height / 2) });
+            // By the time the click event fires, checkbox is already toggled
+            // so .checked gives us the new state directly
+            window.__skopixCapture({
+              action: 'check',
+              checked: actualCheckable.checked,
+              element: getElementInfo(actualCheckable),
+              clickX: Math.round(e.clientX),
+              clickY: Math.round(e.clientY),
+              elementX: Math.round(rect.left + rect.width / 2),
+              elementY: Math.round(rect.top + rect.height / 2),
+            });
           } else {
-            window.__skopixCapture({ action: 'click', element: getElementInfo(el), clickX: Math.round(e.clientX), clickY: Math.round(e.clientY), elementX: Math.round(rect.left + rect.width / 2), elementY: Math.round(rect.top + rect.height / 2) });
+            window.__skopixCapture({
+              action: 'click',
+              element: getElementInfo(el),
+              clickX: Math.round(e.clientX),
+              clickY: Math.round(e.clientY),
+              elementX: Math.round(rect.left + rect.width / 2),
+              elementY: Math.round(rect.top + rect.height / 2),
+            });
           }
         }
       }, true);
 
-      let typeTimer = null, lastInputEl = null;
+      let typeTimer = null;
+      let lastInputEl = null;
       document.addEventListener('input', function(e) {
         const el = e.target;
         if (!el || !['INPUT', 'TEXTAREA'].includes(el.tagName)) return;
+        // Checkboxes and radio buttons are handled by the click listener, not type
         if (el.type === 'checkbox' || el.type === 'radio') return;
-        if (el.closest && (el.closest('#__skopix_toolbar') || el.closest('#__skopix_popover'))) return;
-        lastInputEl = el; clearTimeout(typeTimer);
+        if (el.closest && el.closest('#__skopix_toolbar')) return;
+        if (el.closest && el.closest('#__skopix_popover')) return;
+        lastInputEl = el;
+        clearTimeout(typeTimer);
         typeTimer = setTimeout(function() {
           if (!lastInputEl) return;
-          if (window.__skopixCapture) window.__skopixCapture({ action: 'type', element: getElementInfo(lastInputEl), value: lastInputEl.value, isPassword: lastInputEl.type === 'password' });
+          if (window.__skopixCapture) {
+            window.__skopixCapture({
+              action: 'type',
+              element: getElementInfo(lastInputEl),
+              value: lastInputEl.value,
+              isPassword: lastInputEl.type === 'password',
+            });
+          }
           lastInputEl = null;
         }, 600);
       }, true);
@@ -691,89 +756,385 @@ export class RecordingSession {
       document.addEventListener('change', function(e) {
         const el = e.target;
         if (!el || el.tagName !== 'SELECT') return;
-        if (el.closest && (el.closest('#__skopix_toolbar') || el.closest('#__skopix_popover'))) return;
+        if (el.closest && el.closest('#__skopix_toolbar')) return;
+        if (el.closest && el.closest('#__skopix_popover')) return;
         const selected = el.options[el.selectedIndex];
-        if (window.__skopixCapture) window.__skopixCapture({ action: 'select', element: getElementInfo(el), value: selected ? selected.value : '', label: selected ? selected.text : '' });
+        if (window.__skopixCapture) {
+          window.__skopixCapture({
+            action: 'select',
+            element: getElementInfo(el),
+            value: el.value,
+            label: selected ? selected.text : el.value,
+          });
+        }
+      }, true);
+
+      // Scroll listener - debounced, captures final scroll position
+      let scrollTimer = null;
+      document.addEventListener('scroll', function(e) {
+        const el = e.target;
+        // Ignore scrolls on our own UI elements
+        if (el && el.closest) {
+          if (el.closest('#__skopix_toolbar')) return;
+          if (el.closest('#__skopix_popover')) return;
+        }
+        clearTimeout(scrollTimer);
+        scrollTimer = setTimeout(function() {
+          // Determine what was scrolled - the element itself or the window
+          const isWindow = el === document || el === document.documentElement || el === document.body;
+          const scrollLeft = isWindow ? window.scrollX : el.scrollLeft;
+          const scrollTop = isWindow ? window.scrollY : el.scrollTop;
+          // Only capture meaningful scrolls (ignore tiny accidental scrolls)
+          if (Math.abs(scrollTop) < 50 && Math.abs(scrollLeft) < 50) return;
+          const selector = isWindow ? 'window' : getSelector(el);
+          if (window.__skopixCapture) {
+            window.__skopixCapture({
+              action: 'scroll',
+              selector,
+              scrollX: Math.round(scrollLeft),
+              scrollY: Math.round(scrollTop),
+              isWindow,
+              element: isWindow ? null : getElementInfo(el),
+            });
+          }
+        }, 400);
       }, true);
 
+      // ─── Floating toolbar ─────────────────────────────────────────────────
       function createToolbar() {
         if (document.getElementById('__skopix_toolbar')) return;
+
         const toolbar = document.createElement('div');
         toolbar.id = '__skopix_toolbar';
-        toolbar.style.cssText = 'position:fixed;bottom:20px;right:20px;z-index:2147483647;display:flex;align-items:center;gap:8px;background:#0d0d1a;border:1px solid rgba(0,212,255,0.3);border-radius:10px;padding:10px 14px;font-family:monospace;font-size:12px;box-shadow:0 4px 24px rgba(0,0,0,0.5);user-select:none;';
-        toolbar.innerHTML = '<span style="color:#00d4ff;font-weight:600;letter-spacing:0.08em">SKOPIX</span><span id="__skopix_step_count" style="color:#5a6180;font-size:11px">0 steps</span><button id="__skopix_assert_btn" style="background:#1a1d2e;border:1px solid rgba(0,212,255,0.2);color:#00d4ff;border-radius:6px;padding:5px 10px;cursor:pointer;font-family:monospace;font-size:11px">+ Assert</button><button id="__skopix_stop_btn" style="background:#1a1d2e;border:1px solid rgba(239,68,68,0.3);color:#ef4444;border-radius:6px;padding:5px 10px;cursor:pointer;font-family:monospace;font-size:11px">■ Stop</button>';
+        toolbar.style.cssText = [
+          'position:fixed', 'bottom:20px', 'right:20px', 'z-index:2147483647',
+          'background:#0f1117', 'border:1px solid #dc2626', 'border-radius:10px',
+          'padding:10px 14px', '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.6)', 'user-select:none',
+          'transition:opacity 0.2s',
+        ].join(';');
+
+        toolbar.innerHTML = `
+          <span style="color:#dc2626;font-size:14px;animation:skopix_pulse 1s infinite">●</span>
+          <span style="color:#9ca3af">Recording</span>
+          <span id="__skopix_count" style="color:#22d3ee;font-weight:700;min-width:20px;text-align:center">0</span>
+          <span style="color:#4b5563">steps</span>
+          <button id="__skopix_assert_btn" style="
+            background:#1e3a5f;border:1px solid #2563eb;color:#60a5fa;
+            border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace;
+          ">+ Assert</button>
+          <button id="__skopix_stop_btn" style="
+            background:#3f0d0d;border:1px solid #dc2626;color:#f87171;
+            border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace;
+          ">■ Stop</button>
+        `;
+
+        const style = document.createElement('style');
+        style.textContent = '@keyframes skopix_pulse{0%,100%{opacity:1}50%{opacity:0.3}}';
+        document.head.appendChild(style);
         document.body.appendChild(toolbar);
-        document.getElementById('__skopix_stop_btn').addEventListener('click', function() { if (window.__skopixCapture) window.__skopixCapture({ action: 'stop' }); });
-        document.getElementById('__skopix_assert_btn').addEventListener('click', function() { window.__skopixPickMode = true; document.body.style.cursor = 'crosshair'; });
-        document.addEventListener('click', function assertPick(e) {
-          if (!window.__skopixPickMode) return;
-          if (e.target.closest && (e.target.closest('#__skopix_toolbar') || e.target.closest('#__skopix_popover'))) return;
-          e.stopPropagation(); e.preventDefault();
-          window.__skopixPickMode = false; document.body.style.cursor = '';
-          const el = e.target; const sel = getSelector(el); const currentText = (el.innerText || el.value || '').trim().slice(0, 80);
-          const suggestedType = el.tagName === 'IMG' ? 'visible' : currentText ? 'text_contains' : 'visible';
-          const suggestedValue = currentText || '';
-          let highlightEl = document.getElementById('__skopix_highlight');
-          if (!highlightEl) { highlightEl = document.createElement('div'); highlightEl.id = '__skopix_highlight'; highlightEl.style.cssText = 'position:fixed;pointer-events:none;z-index:2147483646;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);border-radius:4px;transition:all 0.1s;'; document.body.appendChild(highlightEl); }
-          const rect = el.getBoundingClientRect(); highlightEl.style.cssText += 'left:' + rect.left + 'px;top:' + rect.top + 'px;width:' + rect.width + 'px;height:' + rect.height + 'px;display:block;';
-          let popover = document.getElementById('__skopix_popover');
-          if (popover) popover.remove();
-          popover = document.createElement('div'); popover.id = '__skopix_popover';
-          popover.style.cssText = 'position:fixed;z-index:2147483647;background:#0d0d1a;border:1px solid rgba(59,130,246,0.4);border-radius:10px;padding:16px;width:320px;box-shadow:0 8px 32px rgba(0,0,0,0.6);font-family:monospace;font-size:12px;color:#e5e7eb;';
-          const vw = window.innerWidth, vh = window.innerHeight;
-          const top = rect.bottom + 10 < vh - 200 ? rect.bottom + 10 : rect.top - 220;
-          const left = Math.min(Math.max(rect.left, 10), vw - 340);
-          popover.style.top = top + 'px'; popover.style.left = left + 'px';
-          popover.innerHTML = '<div style="color:#60a5fa;font-size:11px;letter-spacing:0.1em;margin-bottom:12px">ADD ASSERTION</div><div style="margin-bottom:10px"><div style="color:#9ca3af;font-size:10px;margin-bottom:4px">SELECTED ELEMENT</div><div style="background:#1a1d2e;padding:6px 10px;border-radius:6px;color:#22d3ee;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + sel + '">' + sel + '</div>' + (currentText ? '<div style="color:#6b7280;font-size:10px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Current text: &quot;' + currentText.slice(0, 50) + (currentText.length > 50 ? '...' : '') + '&quot;</div>' : '') + '</div><div style="margin-bottom:10px"><div style="color:#9ca3af;font-size:10px;margin-bottom:4px">ASSERTION TYPE</div><select id="__skopix_assert_type" style="width:100%;background:#1a1d2e;border:1px solid #374151;color:#e5e7eb;padding:6px 8px;border-radius:6px;font-family:monospace;font-size:12px"><option value="visible"' + (suggestedType === "visible" ? " selected" : "") + '>Element is visible</option><option value="text_contains"' + (suggestedType === "text_contains" ? " selected" : "") + '>Text contains</option><option value="text_equals">Text equals</option><option value="url_contains">URL contains</option><option value="element_count">Element count</option><option value="attribute_contains">Attribute contains</option></select></div><div id="__skopix_value_row" style="margin-bottom:10px;' + (suggestedType === "visible" ? "display:none" : "") + '"><div style="color:#9ca3af;font-size:10px;margin-bottom:4px" id="__skopix_value_label">EXPECTED VALUE</div><input id="__skopix_assert_value" type="text" value="' + suggestedValue.replace(/"/g, "&quot;") + '" placeholder="Expected value..." style="width:100%;box-sizing:border-box;background:#1a1d2e;border:1px solid #374151;color:#e5e7eb;padding:6px 8px;border-radius:6px;font-family:monospace;font-size:12px"></div><div style="display:flex;gap:8px;justify-content:flex-end"><button id="__skopix_assert_cancel" style="background:transparent;border:1px solid #374151;color:#9ca3af;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:monospace;font-size:12px">Cancel</button><button id="__skopix_assert_add" style="background:#1e3a5f;border:1px solid #2563eb;color:#60a5fa;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:monospace;font-size:12px;font-weight:700">Add ✓</button></div>';
-          document.body.appendChild(popover);
-          popover.querySelector('#__skopix_assert_cancel').addEventListener('click', function(e) { e.stopPropagation(); if (highlightEl) highlightEl.style.display = 'none'; popover.remove(); });
-          popover.querySelector('#__skopix_assert_add').addEventListener('click', function(e) {
-            e.stopPropagation();
-            const assertType = popover.querySelector('#__skopix_assert_type').value;
-            const value = popover.querySelector('#__skopix_assert_value') ? popover.querySelector('#__skopix_assert_value').value.trim() : '';
-            if (assertType !== 'visible' && assertType !== 'url_contains' && !value) { popover.querySelector('#__skopix_assert_value').style.borderColor = '#dc2626'; return; }
-            if (window.__skopixCapture) window.__skopixCapture({ action: 'assert', assertType, selector: assertType === 'url_contains' ? null : sel, value: value || null, element: assertType === 'url_contains' ? null : getElementInfo(el) });
-            if (highlightEl) highlightEl.style.display = 'none'; popover.remove();
-          });
-        }, true);
+
+        document.getElementById('__skopix_stop_btn').addEventListener('click', function(e) {
+          e.stopPropagation();
+          if (window.__skopixCapture) window.__skopixCapture({ action: 'stop' });
+        });
+
+        document.getElementById('__skopix_assert_btn').addEventListener('click', function(e) {
+          e.stopPropagation();
+          startPickMode();
+        });
       }
 
-      if (document.body) { createToolbar(); } else { document.addEventListener('DOMContentLoaded', createToolbar); }
-      new MutationObserver(() => { if (!document.getElementById('__skopix_toolbar')) createToolbar(); }).observe(document.documentElement, { childList: true, subtree: false });
-      window.__skopixUpdateCount = function(n) { const el = document.getElementById('__skopix_step_count'); if (el) el.textContent = n + ' step' + (n === 1 ? '' : 's'); };
-    });
+      function updateStepCount(n) {
+        const el = document.getElementById('__skopix_count');
+        if (el) el.textContent = n;
+      }
 
-    // Re-evaluate init script on the current page (since addInitScript only runs on navigation)
-    // Use evaluate to inject directly into the live page without reloading
-    try {
-      await this.page.evaluate(() => {
-        if (window.__skopixRecording) return;
-        window.__skopixRecording = true;
-        // Toolbar will be injected via addInitScript on next navigation,
-        // but we need it now — dispatch a custom event to trigger creation
-        const event = new CustomEvent('__skopix_attach');
-        document.dispatchEvent(event);
-      });
-    } catch {}
+      // ─── Element picker mode ──────────────────────────────────────────────
+      let pickerOverlay = null;
+      let lastHovered = null;
 
-    // Directly inject the toolbar into the current live page
-    try {
-      await this.page.evaluate(() => {
-        if (document.getElementById('__skopix_toolbar')) return;
-        const toolbar = document.createElement('div');
-        toolbar.id = '__skopix_toolbar';
-        toolbar.style.cssText = 'position:fixed;bottom:20px;right:20px;z-index:2147483647;display:flex;align-items:center;gap:8px;background:#0d0d1a;border:1px solid rgba(0,212,255,0.3);border-radius:10px;padding:10px 14px;font-family:monospace;font-size:12px;box-shadow:0 4px 24px rgba(0,0,0,0.5);user-select:none;';
-        toolbar.innerHTML = '<span style="color:#00d4ff;font-weight:600;letter-spacing:0.08em">SKOPIX</span><span id="__skopix_step_count" style="color:#5a6180;font-size:11px">0 steps</span><button id="__skopix_assert_btn" style="background:#1a1d2e;border:1px solid rgba(0,212,255,0.2);color:#00d4ff;border-radius:6px;padding:5px 10px;cursor:pointer;font-family:monospace;font-size:11px">+ Assert</button><button id="__skopix_stop_btn" style="background:#1a1d2e;border:1px solid rgba(239,68,68,0.3);color:#ef4444;border-radius:6px;padding:5px 10px;cursor:pointer;font-family:monospace;font-size:11px">■ Stop</button>';
-        document.body.appendChild(toolbar);
-        document.getElementById('__skopix_stop_btn').addEventListener('click', function() {
-          if (window.__skopixCapture) window.__skopixCapture({ action: 'stop' });
+      function startPickMode() {
+        window.__skopixPickMode = true;
+        document.body.style.cursor = 'crosshair';
+
+        // Dim the toolbar
+        const tb = document.getElementById('__skopix_toolbar');
+        if (tb) tb.style.opacity = '0.5';
+
+        // Show hint
+        const hint = document.createElement('div');
+        hint.id = '__skopix_hint';
+        hint.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:2147483647;background:#1e3a5f;border:1px solid #2563eb;color:#60a5fa;padding:8px 18px;border-radius:8px;font-family:monospace;font-size:13px;pointer-events:none';
+        hint.textContent = 'Click any element to add an assertion';
+        document.body.appendChild(hint);
+
+        pickerOverlay = document.createElement('div');
+        pickerOverlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;z-index:2147483646;pointer-events:auto;cursor:crosshair';
+        document.body.appendChild(pickerOverlay);
+
+        let highlight = document.createElement('div');
+        highlight.style.cssText = 'position:fixed;pointer-events:none;z-index:2147483645;background:rgba(37,99,235,0.15);border:2px solid #2563eb;border-radius:3px;transition:all 0.1s;display:none';
+        document.body.appendChild(highlight);
+
+        pickerOverlay.addEventListener('mousemove', function(e) {
+          pickerOverlay.style.pointerEvents = 'none';
+          const el = document.elementFromPoint(e.clientX, e.clientY);
+          pickerOverlay.style.pointerEvents = 'auto';
+          if (!el || el === document.body || el.id === '__skopix_toolbar') {
+            highlight.style.display = 'none';
+            return;
+          }
+          lastHovered = el;
+          const r = el.getBoundingClientRect();
+          highlight.style.display = 'block';
+          highlight.style.top = r.top + 'px';
+          highlight.style.left = r.left + 'px';
+          highlight.style.width = r.width + 'px';
+          highlight.style.height = r.height + 'px';
+        });
+
+        pickerOverlay.addEventListener('click', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          pickerOverlay.style.pointerEvents = 'none';
+          const el = document.elementFromPoint(e.clientX, e.clientY);
+          pickerOverlay.style.pointerEvents = 'auto';
+          if (!el || el === document.body) { stopPickMode(); return; }
+
+          stopPickMode();
+          showAssertionPopover(el, highlight);
+        });
+
+        document.addEventListener('keydown', function escHandler(e) {
+          if (e.key === 'Escape') { stopPickMode(); document.removeEventListener('keydown', escHandler); }
+        });
+      }
+
+      function stopPickMode() {
+        window.__skopixPickMode = false;
+        document.body.style.cursor = '';
+        if (pickerOverlay) { pickerOverlay.remove(); pickerOverlay = null; }
+        const hint = document.getElementById('__skopix_hint');
+        if (hint) hint.remove();
+        const tb = document.getElementById('__skopix_toolbar');
+        if (tb) tb.style.opacity = '1';
+      }
+
+      // ─── Assertion popover ────────────────────────────────────────────────
+      function showAssertionPopover(el, highlightEl) {
+        const existing = document.getElementById('__skopix_popover');
+        if (existing) existing.remove();
+
+        const sel = getSelector(el);
+        const currentText = (el.innerText || el.textContent || '').trim().slice(0, 100);
+        const tag = el.tagName.toLowerCase();
+        const rect = el.getBoundingClientRect();
+
+        // Smart defaults
+        let suggestedType = 'visible';
+        let suggestedValue = '';
+
+        // If element has a title/alt/aria-label, suggest attribute_contains
+        const titleAttr = el.getAttribute('title') || el.getAttribute('alt');
+        if (titleAttr && titleAttr.length > 0) {
+          suggestedType = 'attribute_contains';
+          suggestedValue = titleAttr.slice(0, 80);
+        } else if (currentText && currentText.length > 0 && currentText.length < 80) {
+          suggestedType = 'text_contains';
+          // For numbers, suggest exact value. For text, suggest contains.
+          suggestedValue = currentText.replace(/\s+/g, ' ').trim();
+        }
+        // Count suggestion for tables/lists
+        if (['table', 'tbody', 'ul', 'ol'].includes(tag) || el.querySelectorAll('tr, li').length > 1) {
+          const rows = el.querySelectorAll('tr:not(thead tr), li').length;
+          if (rows > 0) { suggestedType = 'element_count'; suggestedValue = String(rows); }
+        }
+
+        // Highlight selected element in green
+        if (highlightEl) {
+          highlightEl.style.background = 'rgba(34,197,94,0.15)';
+          highlightEl.style.borderColor = '#22c55e';
+          highlightEl.style.display = 'block';
+          highlightEl.style.top = rect.top + 'px';
+          highlightEl.style.left = rect.left + 'px';
+          highlightEl.style.width = rect.width + 'px';
+          highlightEl.style.height = rect.height + 'px';
+        }
+
+        const popover = document.createElement('div');
+        popover.id = '__skopix_popover';
+
+        // Position popover — prefer below element, fall back to above
+        const popHeight = 280;
+        const topPos = rect.bottom + 8 + popHeight > window.innerHeight
+          ? Math.max(8, rect.top - popHeight - 8)
+          : rect.bottom + 8;
+        const leftPos = Math.min(rect.left, window.innerWidth - 360);
+
+        popover.style.cssText = [
+          'position:fixed', 'z-index:2147483647',
+          'top:' + topPos + 'px', 'left:' + leftPos + 'px',
+          'width:350px', 'background:#0f1117',
+          'border:1px solid #2563eb', 'border-radius:10px',
+          'padding:16px', 'font-family:monospace', 'font-size:12px', 'color:#e5e7eb',
+          'box-shadow:0 8px 32px rgba(0,0,0,0.7)',
+        ].join(';');
+
+        popover.innerHTML = `
+          <div style="color:#60a5fa;font-size:11px;letter-spacing:0.1em;margin-bottom:12px">ADD ASSERTION</div>
+
+          <div style="margin-bottom:10px">
+            <div style="color:#9ca3af;font-size:10px;margin-bottom:4px">SELECTED ELEMENT</div>
+            <div style="background:#1a1d2e;padding:6px 10px;border-radius:6px;color:#22d3ee;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${sel}">${sel}</div>
+            ${currentText ? '<div style="color:#6b7280;font-size:10px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Current text: "' + currentText.slice(0,50) + (currentText.length > 50 ? '...' : '') + '"</div>' : ''}
+          </div>
+
+          <div style="margin-bottom:10px">
+            <div style="color:#9ca3af;font-size:10px;margin-bottom:4px">ASSERTION TYPE</div>
+            <select id="__skopix_assert_type" style="width:100%;background:#1a1d2e;border:1px solid #374151;color:#e5e7eb;padding:6px 8px;border-radius:6px;font-family:monospace;font-size:12px">
+              <option value="visible"${suggestedType==='visible'?' selected':''}>Element is visible</option>
+              <option value="text_contains"${suggestedType==='text_contains'?' selected':''}>Text contains</option>
+              <option value="text_equals"${suggestedType==='text_equals'?' selected':''}>Text equals</option>
+              <option value="url_contains">URL contains</option>
+              <option value="element_count"${suggestedType==='element_count'?' selected':''}>Element count</option>
+              <option value="attribute_contains">Attribute contains (title, alt, etc.)</option>
+            </select>
+          </div>
+
+          <div id="__skopix_attr_row" style="margin-bottom:10px;display:none">
+            <div style="color:#9ca3af;font-size:10px;margin-bottom:4px">ATTRIBUTE NAME</div>
+            <input id="__skopix_assert_attr" type="text" value="title" placeholder="e.g. title, alt, aria-label" style="width:100%;box-sizing:border-box;background:#1a1d2e;border:1px solid #374151;color:#e5e7eb;padding:6px 8px;border-radius:6px;font-family:monospace;font-size:12px">
+          </div>
+
+          <div id="__skopix_value_row" style="margin-bottom:10px;${suggestedType==='visible'?'display:none':''}">
+            <div style="color:#9ca3af;font-size:10px;margin-bottom:4px" id="__skopix_value_label">EXPECTED VALUE</div>
+            <input id="__skopix_assert_value" type="text" value="${suggestedValue.replace(/"/g, '&quot;')}" placeholder="Expected value..." style="width:100%;box-sizing:border-box;background:#1a1d2e;border:1px solid #374151;color:#e5e7eb;padding:6px 8px;border-radius:6px;font-family:monospace;font-size:12px">
+          </div>
+
+          <div style="margin-bottom:14px">
+            <div style="color:#9ca3af;font-size:10px;margin-bottom:4px">DESCRIPTION (optional)</div>
+            <input id="__skopix_assert_desc" type="text" placeholder="e.g. First row should be sales" style="width:100%;box-sizing:border-box;background:#1a1d2e;border:1px solid #374151;color:#e5e7eb;padding:6px 8px;border-radius:6px;font-family:monospace;font-size:12px">
+          </div>
+
+          <div style="display:flex;gap:8px;justify-content:flex-end">
+            <button id="__skopix_assert_cancel" style="background:transparent;border:1px solid #374151;color:#9ca3af;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:monospace;font-size:12px">Cancel</button>
+            <button id="__skopix_assert_add" style="background:#1e3a5f;border:1px solid #2563eb;color:#60a5fa;border-radius:6px;padding:6px 14px;cursor:pointer;font-family:monospace;font-size:12px;font-weight:700">Add ✓</button>
+          </div>
+        `;
+
+        document.body.appendChild(popover);
+
+        // Show/hide value field based on type
+        const typeSelect = popover.querySelector('#__skopix_assert_type');
+        const valueRow = popover.querySelector('#__skopix_value_row');
+        const valueLabel = popover.querySelector('#__skopix_value_label');
+        const valueInput = popover.querySelector('#__skopix_assert_value');
+        const attrRow = popover.querySelector('#__skopix_attr_row');
+
+        typeSelect.addEventListener('change', function() {
+          const t = typeSelect.value;
+          attrRow.style.display = t === 'attribute_contains' ? 'block' : 'none';
+          if (t === 'visible') {
+            valueRow.style.display = 'none';
+          } else {
+            valueRow.style.display = 'block';
+            if (t === 'element_count') {
+              valueLabel.textContent = 'EXPECTED COUNT (number)';
+              valueInput.placeholder = 'e.g. 9';
+            } else if (t === 'url_contains') {
+              valueLabel.textContent = 'URL MUST CONTAIN';
+              valueInput.placeholder = 'e.g. /dashboard';
+              valueInput.value = '';
+            } else if (t === 'attribute_contains') {
+              valueLabel.textContent = 'ATTRIBUTE VALUE MUST CONTAIN';
+              valueInput.placeholder = 'e.g. SVG equivalent';
+              // Pre-fill with the title attribute value if it exists
+              const titleVal = el.getAttribute('title') || el.getAttribute('alt') || el.getAttribute('aria-label') || '';
+              if (titleVal && !valueInput.value) valueInput.value = titleVal.slice(0, 80);
+            } else {
+              valueLabel.textContent = 'EXPECTED VALUE';
+              valueInput.placeholder = 'Expected text...';
+            }
+          }
         });
-        document.getElementById('__skopix_assert_btn').addEventListener('click', function() {
-          window.__skopixPickMode = true;
-          document.body.style.cursor = 'crosshair';
+
+        popover.querySelector('#__skopix_assert_cancel').addEventListener('click', function(e) {
+          e.stopPropagation();
+          if (highlightEl) highlightEl.style.display = 'none';
+          popover.remove();
         });
+
+        popover.querySelector('#__skopix_assert_add').addEventListener('click', function(e) {
+          e.stopPropagation();
+          const assertType = typeSelect.value;
+          const value = popover.querySelector('#__skopix_assert_value').value.trim();
+          const description = popover.querySelector('#__skopix_assert_desc').value.trim();
+
+          if (assertType !== 'visible' && assertType !== 'url_contains' && !value) {
+            popover.querySelector('#__skopix_assert_value').style.borderColor = '#dc2626';
+            return;
+          }
+
+          if (window.__skopixCapture) {
+            const attrInput = popover.querySelector('#__skopix_assert_attr');
+            window.__skopixCapture({
+              action: 'assert',
+              assertType,
+              attribute: assertType === 'attribute_contains' ? (attrInput ? attrInput.value.trim() || 'title' : 'title') : null,
+              selector: assertType === 'url_contains' ? null : sel,
+              value: value || null,
+              description: description || null,
+              element: assertType === 'url_contains' ? null : getElementInfo(el),
+            });
+          }
+
+          if (highlightEl) highlightEl.style.display = 'none';
+          popover.remove();
+
+          // Flash the assert button green briefly to confirm
+          const assertBtn = document.getElementById('__skopix_assert_btn');
+          if (assertBtn) {
+            const orig = assertBtn.style.cssText;
+            assertBtn.textContent = '✓ Added';
+            assertBtn.style.background = '#14532d';
+            assertBtn.style.borderColor = '#22c55e';
+            assertBtn.style.color = '#4ade80';
+            setTimeout(() => { assertBtn.textContent = '+ Assert'; assertBtn.style.cssText = orig; }, 1500);
+          }
+        });
+
+        // Focus the value input if visible
+        setTimeout(() => {
+          if (valueRow.style.display !== 'none') valueInput.focus();
+        }, 50);
+      }
+
+      // Boot the toolbar once DOM is ready
+      if (document.body) {
+        createToolbar();
+      } else {
+        document.addEventListener('DOMContentLoaded', createToolbar);
+      }
+
+      // Re-create toolbar after navigation if it got wiped
+      new MutationObserver(() => {
+        if (!document.getElementById('__skopix_toolbar')) createToolbar();
+      }).observe(document.documentElement, { childList: true, subtree: false });
+
+      // Listen for step count updates from parent
+      window.__skopixUpdateCount = function(n) { updateStepCount(n); };
+    });
+
+    this.context.on('page', (newPage) => {
+      newPage.on('framenavigated', async (frame) => {
+        if (frame !== newPage.mainFrame()) return;
+        const url = frame.url();
+        if (url === 'about:blank') return;
+        this.emit({ type: 'navigate', url });
       });
-    } catch {}
+    });
 
     this.page.on('framenavigated', async (frame) => {
       if (frame !== this.page.mainFrame()) return;
@@ -785,10 +1146,12 @@ export class RecordingSession {
       }, 500);
     });
 
+    // Reload so addInitScript fires — injects toolbar + all capture listeners into the page
+    await this.page.reload({ waitUntil: 'domcontentloaded', timeout: 30000 });
     this.emit({ type: 'ready' });
   }
 
-  async _captureStep(actionData) {
+    async _captureStep(actionData) {
     const id = this.nextId();
     const page = this.page;
     const step = {

package/package.json

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