skopix 2.0.98 → 2.0.100

package/cli/commands/agent.js

@@ -382,18 +382,12 @@ export async function agentCommand(options) {
   }
 
   // ── DEBUG-RECORD JOB ────────────────────────────────────────────────────────
-  // Replays steps to a debug point on this agent (which has a display),
-  // then opens the recorder so user can add new steps from that state.
   async function handleDebugRecord(msg) {
-    const { runId, recordingId, replaySteps, startUrl, env: jobEnv } = msg;
+    const { runId, recordingId, replaySteps, startUrl } = msg;
     console.log(chalk.cyan('  ⏸ Debug replay: ') + chalk.white(replaySteps.length + ' steps to debug point'));
 
-    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 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 {} };
 
     sendRun({ type: 'stdout', text: '' });
     sendRun({ type: 'stdout', text: '  Replaying ' + replaySteps.length + ' steps to reach debug point...' });
@@ -410,19 +404,18 @@ export async function agentCommand(options) {
         await page.waitForTimeout(1000);
       }
 
-      // Replay each step
+      // Replay each step to reach debug point
       let stepNum = 0;
       for (const step of replaySteps) {
         stepNum++;
-        sendRun({ type: 'stdout', text: '  [' + stepNum + '/' + replaySteps.length + '] ' + (step.action || '').toUpperCase() + ' — ' + (step.description || step.selector || '') });
+        sendRun({ type: 'stdout', text: '  [' + stepNum + '/' + replaySteps.length + '] ' + (step.action || '').toUpperCase() + ' — ' + (step.description || step.stableSelector || step.selector || '') });
         try {
           const sel = step.stableSelector || step.selector;
           await executeStep(step, sel, page, { url: startUrl });
-          sendRun({ type: 'stdout', text: chalk.green ? '✓ Done' : '✓ Done' });
         } catch (err) {
-          sendRun({ type: 'stdout', text: '✖ FAILED: ' + err.message });
+          sendRun({ type: 'stdout', text: '  ✖ FAILED at step ' + stepNum + ': ' + err.message });
           sendRun({ type: 'done', exitCode: 1, status: 'failed' });
-          sendRun({ type: 'stdout', text: '✗ Replay failed — could not reach debug point' });
+          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;
@@ -432,38 +425,33 @@ export async function agentCommand(options) {
       sendRun({ type: 'stdout', text: '' });
       sendRun({ type: 'stdout', text: '  ✔ Reached debug point — starting recorder' });
 
-      // Now start the recorder from this browser state
+      // 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 recorderPath = path.resolve(path.dirname(new URL(import.meta.url).pathname), '..', '..', 'core', 'recorder.js');
-      const { spawn } = await import('child_process');
-      const child = spawn('node', [recorderPath, startUrl || '', recordingId, screenshotDir], { stdio: ['pipe', 'pipe', 'pipe'] });
+      const { RecordingSession } = await import('../../core/recorder.js');
+      const session = new RecordingSession({ url: startUrl || '', sessionId: recordingId, screenshotDir });
 
-      child.stdout.on('data', (chunk) => {
-        chunk.toString().split('\n').filter(Boolean).forEach(line => {
-          try {
-            const parsed = JSON.parse(line);
-            sendRec(parsed);
-            if (parsed.type === 'step') process.stdout.write(chalk.cyan('    ⏺ ') + (parsed.step?.action || '') + '\n');
-            if (parsed.type === 'done') console.log(chalk.green('  ✔ Debug recording done'));
-          } catch {}
-        });
-      });
+      // 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') {
+          console.log(chalk.green('  ✔ Debug recording done — ' + (obj.steps?.length || 0) + ' new steps'));
+          browser.close().catch(() => {});
+          ws.send(JSON.stringify({ type: 'jobDone', runId }));
+          console.log(chalk.cyan('  ◆ Waiting for jobs\n'));
+        }
+      };
 
-      child.stderr.on('data', (chunk) => { sendRec({ type: 'error', message: chunk.toString().trim().slice(0, 200) }); });
-      child.on('close', () => {
-        sendRec({ type: 'stopped' });
-        browser.close().catch(() => {});
-        ws.send(JSON.stringify({ type: 'jobDone', runId }));
-        console.log(chalk.cyan('  ◆ Waiting for jobs\n'));
-      });
+      // Attach to existing browser/context/page — injects toolbar without new browser
+      await session.attachTo(browser, ctx, page);
 
-      // Listen for stop signal
+      // 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) {
-          try { child.stdin.write('stop\n'); } catch {}
+          session.stop().catch(() => {});
           ws.removeEventListener('message', stopHandler);
         }
       };
@@ -471,7 +459,7 @@ export async function agentCommand(options) {
 
     } catch (err) {
       console.error(chalk.red('  ✖ Debug error: ' + err.message));
-      sendRun({ type: 'stdout', text: '✖ Debug replay error: ' + err.message });
+      sendRun({ type: 'stdout', text: '  ✖ 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>' });
       ws.send(JSON.stringify({ type: 'jobDone', runId }));

package/core/recorder.js

@@ -597,6 +597,168 @@ 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()
+  async attachTo(browser, context, page) {
+    this.browser = browser;
+    this.context = context;
+    this.page = page;
+
+    // Expose capture function on the existing context
+    await this.context.exposeFunction('__skopixCapture', async (actionData) => {
+      if (this._stopping) return;
+      if (actionData.action === 'stop') {
+        await this.stop();
+        return;
+      }
+      await this._captureStep(actionData);
+    }).catch(() => {}); // may already be exposed
+
+    // Inject the init script into the existing page
+    await this.context.addInitScript(() => {
+      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 ariaLabel = el.getAttribute('aria-label');
+        if (ariaLabel && ['button', 'a', 'input'].includes(el.tagName.toLowerCase())) {
+          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;
+        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) {
+        const piTestId = el.getAttribute('pi-test-identifier') || null;
+        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 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; }
+        return info;
+      }
+
+      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();
+        if (window.__skopixCapture) {
+          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 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) });
+          } 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) });
+          }
+        }
+      }, 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(function() {
+          if (!lastInputEl) return;
+          if (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 selected = el.options[el.selectedIndex];
+        if (window.__skopixCapture) window.__skopixCapture({ action: 'select', element: getElementInfo(el), value: selected ? selected.value : '', label: selected ? selected.text : '' });
+      }, true);
+
+      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>';
+        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);
+      }
+
+      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'); };
+    });
+
+    // Re-evaluate init script on the current page (since addInitScript only runs on navigation)
+    try { await this.page.reload({ waitUntil: 'domcontentloaded', timeout: 15000 }); } catch {}
+
+    this.page.on('framenavigated', async (frame) => {
+      if (frame !== this.page.mainFrame()) return;
+      const url = frame.url();
+      if (url === 'about:blank') return;
+      this.emit({ type: 'navigate', url });
+      setTimeout(async () => {
+        try { await this.page.evaluate((n) => { if (window.__skopixUpdateCount) window.__skopixUpdateCount(n); }, this.steps.length); } catch {}
+      }, 500);
+    });
+
+    this.emit({ type: 'ready' });
+  }
+
   async _captureStep(actionData) {
     const id = this.nextId();
     const page = this.page;

package/package.json

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