skopix 2.0.107 → 2.0.108

package/cli/commands/agent.js

@@ -387,7 +387,8 @@ export async function agentCommand(options) {
     const startUrl = (msg.startUrl && msg.startUrl.startsWith('http')) ? msg.startUrl : null;
     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 {} };
+    // IMPORTANT: dashboard listens for 'jobUpdate' (replay) and 'recordingUpdate' (recording)
+    const sendRun = (data) => { try { ws.send(JSON.stringify({ type: 'jobUpdate', runId, data })); } catch {} };
     const sendRec = (data) => { try { ws.send(JSON.stringify({ type: 'recordingUpdate', recordingId, data })); } catch {} };
     const steps = [];
     let chromiumBrowser = null;
@@ -404,10 +405,45 @@ export async function agentCommand(options) {
       ctx = await chromiumBrowser.newContext({ viewport: { width: 1280, height: 800 } });
       page = await ctx.newPage();
 
-      // Wire up capture FIRST — must be on context before any page loads
+      if (startUrl) {
+        await page.goto(startUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
+        await page.waitForTimeout(1000);
+      }
+
+      sendRun({ type: 'stdout', text: '  Replaying ' + replaySteps.length + ' steps...' });
+
+      // Replay each step to the debug point (no toolbar yet — matches original solo flow)
+      let stepNum = 0;
+      let browserClosed = false;
+      for (const step of replaySteps) {
+        if (browserClosed) break;
+        stepNum++;
+        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 {
+          await executeStep(step, sel, page, { url: startUrl || '' });
+          sendRun({ type: 'stdout', text: '    \u2713 Done' });
+        } catch (err) {
+          const emsg = err.message || '';
+          if (emsg.includes('closed') || emsg.includes('destroyed') || emsg.includes('detached')) {
+            browserClosed = true;
+            sendRun({ type: 'stdout', text: '    \u2716 Browser closed \u2014 stopping replay early' });
+          } else {
+            sendRun({ type: 'stdout', text: '    \u26a0 Step ' + stepNum + ' skipped: ' + emsg.slice(0, 100) });
+          }
+        }
+      }
+
+      sendRun({ type: 'stdout', text: '' });
+      sendRun({ type: 'stdout', text: '\u2501'.repeat(60) });
+      sendRun({ type: 'stdout', text: '  \u2714 Reached step ' + replaySteps.length + ' \u2014 browser is ready' });
+      sendRun({ type: 'stdout', text: '  Now recording. Use the browser, then click Stop.' });
+      sendRun({ type: 'stdout', text: '\u2501'.repeat(60) });
+
+      // Wire up capture on context — persists across navigations
       await ctx.exposeFunction('__skopixCapture', async (actionData) => {
         if (actionData.action === 'stop') {
-          // Mirror stopDebugRecording: send done with steps, then stopped
           sendRec({ type: 'done', steps });
           sendRec({ type: 'stopped' });
           try { await ctx.close(); } catch {}
@@ -445,13 +481,8 @@ export async function agentCommand(options) {
         }, 400);
       });
 
-      if (startUrl) {
-        await page.goto(startUrl, { waitUntil: 'domcontentloaded', timeout: 30000 });
-        await page.waitForTimeout(500);
-      }
-
-      // Inject toolbar into page BEFORE replay — visible throughout
-            await page.evaluate(() => {
+      // addInitScript so toolbar re-injects on any future navigation during recording
+      await ctx.addInitScript(() => {
         if (window.__skopixRecording) return;
         window.__skopixRecording = true;
 
@@ -597,38 +628,156 @@ export async function agentCommand(options) {
         });
       });
 
+      // Inject toolbar into the CURRENT page immediately (addInitScript only fires on nav)
+      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(' > ');
+        }
+        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 };
+        }
 
-      // Replay steps to debug point
-      let stepNum = 0;
-      let browserClosed = false;
-      for (const step of replaySteps) {
-        if (browserClosed) break;
-        stepNum++;
-        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 {
-          await executeStep(step, sel, page, { url: startUrl || '' });
-          sendRun({ type: 'stdout', text: '    \u2713 Done' });
-        } catch (err) {
-          const emsg = err.message || '';
-          if (emsg.includes('closed') || emsg.includes('destroyed') || emsg.includes('detached')) {
-            browserClosed = true;
-            sendRun({ type: 'stdout', text: '    \u2716 Browser closed' });
+        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 {
-            sendRun({ type: 'stdout', text: '    \u26a0 Skipped: ' + emsg.slice(0, 100) });
+            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);
 
-      sendRun({ type: 'stdout', text: '' });
-      sendRun({ type: 'stdout', text: '  \u2714 Reached debug point \u2014 now recording' });
-      sendRun({ type: 'stdout', text: '  Use the browser, then click Stop.' });
+        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 replay is done — frontend switches to recording SSE
+      // Tell dashboard replay is done — frontend closes replay SSE and opens recording SSE
       sendRun({ type: 'done', exitCode: 0, status: 'passed', recordingId });
-      process.stderr.write('[debug] toolbar injected, waiting for user actions\n');
+      process.stderr.write('[debug] toolbar injected, recording live, awaiting user actions\n');
 
     } catch (err) {
       console.error(chalk.red('  \u2716 Debug error: ' + err.message));

package/package.json

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