skopix 2.0.108 → 2.0.110

package/cli/commands/agent.js

@@ -191,6 +191,15 @@ export async function agentCommand(options) {
       if (msg.type === 'record') { await handleRecord(msg); return; }
       if (msg.type === 'replay') { await handleReplay(msg); return; }
       if (msg.type === 'debug-record') { await handleDebugRecord(msg); return; }
+      if (msg.type === 'step-tester-start') { await handleStepTester(msg); return; }
+      if (msg.type === 'step-tester-stop') {
+        try {
+          const { stopStepTester } = await import('../../core/step-tester.js');
+          await stopStepTester(msg.testerId);
+        } catch {}
+        ws.send(JSON.stringify({ type: 'jobDone', runId: msg.testerId }));
+        return;
+      }
     });
 
     ws.addEventListener('close', () => {
@@ -236,7 +245,10 @@ export async function agentCommand(options) {
       send({ type: 'error', message: chunk.toString().trim().slice(0, 200) });
     });
 
-    child.on('close', () => { send({ type: 'stopped' }); });
+    child.on('close', () => {
+      send({ type: 'stopped' });
+      try { ws.send(JSON.stringify({ type: 'jobDone', recordingId })); } catch {}
+    });
 
     // Listen for stop signal from server
     const stopHandler = (event) => {
@@ -789,7 +801,26 @@ export async function agentCommand(options) {
     }
   }
 
-    // ── HELPERS ────────────────────────────────────────────────────────────────
+    // ── STEP TESTER JOB ─────────────────────────────────────────────────────────
+  // Runs the full interactive step tester (headed browser + toolbar) on this
+  // machine. The toolbar's buttons call exposeFunction'd handlers directly,
+  // so the whole session is self-contained — no round-tripping needed.
+  async function handleStepTester(msg) {
+    const { testerId, url, selector, mode, steps } = msg;
+    console.log(chalk.cyan('  ⚡ Step tester: ') + chalk.white(mode === 'preview' ? (steps?.length || 0) + ' steps' : (selector || 'manual')) + (url ? chalk.dim(' @ ' + url) : ''));
+    try {
+      const { startStepTester } = await import('../../core/step-tester.js');
+      await startStepTester(testerId, url, selector, mode || 'test', steps);
+      console.log(chalk.green('  ✔ Step tester browser opened — use the toolbar, close when done'));
+      // The session runs independently; mark agent idle so it can take other jobs
+      ws.send(JSON.stringify({ type: 'jobDone', runId: testerId }));
+    } catch (err) {
+      console.error(chalk.red('  ✖ Step tester error: ' + err.message));
+      ws.send(JSON.stringify({ type: 'jobDone', runId: testerId }));
+    }
+  }
+
+  // ── 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/cli/commands/dashboard.js

@@ -9,6 +9,7 @@ import open from 'open';
 import os from 'os';
 import crypto from 'crypto';
 import { loadIssueStore, saveIssueStore } from '../../core/tracker.js';
+import { startStepTester, executeStepTesterAction, runStepTesterAction, stopStepTester, stepTesterSessions } from '../../core/step-tester.js';
 
 // Team mode imports - loaded lazily (only used when SKOPIX_TEAM_MODE=true)
 let teamMode = null; // populated below if team mode is active
@@ -2033,6 +2034,21 @@ export async function dashboardCommand(options) {
         const { url, selector, mode, steps } = JSON.parse(await readBody(req));
         try {
           const testerId = Math.random().toString(36).slice(2, 10);
+          // In team mode, dispatch to a headed agent so the browser opens on the user's machine
+          if (teamMode) {
+            const headedAgent = getLeastBusyAgent(currentUser?.id, true);
+            if (!headedAgent) {
+              sendJSON(res, 503, { error: 'No agent with a display connected. Run "skopix agent" on your local machine to use the step tester.' });
+              return;
+            }
+            stepTesterSessions.set(testerId, { remote: true, agentId: headedAgent.id });
+            headedAgent.status = 'testing';
+            headedAgent.currentJob = { type: 'step-tester', testerId };
+            broadcastAgentList();
+            sendToAgent(headedAgent, { type: 'step-tester-start', testerId, url, selector, mode: mode || 'test', steps });
+            sendJSON(res, 200, { testerId, agent: { id: headedAgent.id, name: headedAgent.name } });
+            return;
+          }
           await startStepTester(testerId, url, selector, mode || 'test', steps);
           sendJSON(res, 200, { testerId });
         } catch (err) { sendJSON(res, 500, { error: err.message }); }
@@ -2066,6 +2082,14 @@ export async function dashboardCommand(options) {
       }
       if (pathname.match(/^\/api\/step-tester\/[^/]+\/stop$/) && method === 'POST') {
         const testerId = pathname.split('/')[3];
+        const session = stepTesterSessions.get(testerId);
+        if (session && session.remote) {
+          const agent = agents.get(session.agentId);
+          if (agent) sendToAgent(agent, { type: 'step-tester-stop', testerId });
+          stepTesterSessions.delete(testerId);
+          sendJSON(res, 200, { stopped: true });
+          return;
+        }
         await stopStepTester(testerId);
         sendJSON(res, 200, { stopped: true });
         return;
@@ -2388,6 +2412,14 @@ export async function dashboardCommand(options) {
       const agent = ws.agentId ? agents.get(ws.agentId) : null;
       if (!agent) return;
 
+      // Explicit job completion — always resets agent to idle regardless of job type
+      if (msg.type === 'jobDone') {
+        agent.status = 'idle';
+        agent.currentJob = null;
+        broadcastAgentList();
+        return;
+      }
+
       if (msg.type === 'jobUpdate') {
         // Agent streaming step output back to server
         const run = msg.runId ? activeRuns.get(msg.runId) : null;
@@ -4536,327 +4568,5 @@ async function syncTestsToLibrary(suitesDir) {
 // STEP TESTER — live browser step testing
 // ═══════════════════════════════════════════════════════════════
 
-const stepTesterSessions = new Map(); // testerId -> { browser, ctx, page }
-
-async function startStepTester(testerId, url, selector, mode, steps) {
-  const { chromium } = await import('playwright');
-  const browser = await chromium.launch({ headless: false, args: ['--no-sandbox'] });
-  const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
-  const page = await ctx.newPage();
-
-  if (mode === 'preview' && steps && steps.length > 0) {
-    // Register expose functions FIRST before addInitScript so they're available on DOMContentLoaded
-    await ctx.exposeFunction('__skopixPreviewRun', async ({ index }) => {
-      const session = stepTesterSessions.get(testerId);
-      if (!session) return;
-      const s = steps[index];
-      if (!s) return;
-      await page.evaluate(({ i, status }) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, status); }, { i: index, status: `Running step ${index+1}/${steps.length}...` }).catch(()=>{});
-      const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
-      const msg = result.passed ? (index+1 >= steps.length ? `✓ All ${steps.length} steps passed!` : `✓ Step ${index+1} passed`) : `✗ Step ${index+1} failed`;
-      if (result.passed) session.currentStep = index + 1;
-      if (!session.results) session.results = {};
-      session.results[index] = { passed: result.passed, error: result.error||null };
-      await page.evaluate(({ i, r, msg, currentStep }) => {
-        if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, msg);
-        window.__skopixPreviewCurrentStep = currentStep;
-      }, { i: index, r: { passed: result.passed, error: result.error||null }, msg, currentStep: session.currentStep || 0 }).catch(()=>{});
-    });
-
-    await ctx.exposeFunction('__skopixPreviewRunAll', async ({ fromIndex }) => {
-      const session = stepTesterSessions.get(testerId);
-      if (!session) return;
-      for (let i = fromIndex; i < steps.length; i++) {
-        const s = steps[i];
-        await page.evaluate(({ i, total }) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, `Running step ${i+1}/${total}...`); }, { i, total: steps.length }).catch(()=>{});
-        const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
-        if (result.passed) session.currentStep = i + 1;
-        if (!session.results) session.results = {};
-        session.results[i] = { passed: result.passed, error: result.error||null };
-        const msg = result.passed ? (i+1 >= steps.length ? `✓ All ${steps.length} steps passed!` : `Running...`) : `✗ Step ${i+1} failed — fix and retry`;
-        await page.evaluate(({ i, r, msg, currentStep }) => {
-          if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, msg);
-          window.__skopixPreviewCurrentStep = currentStep;
-        }, { i, r: { passed: result.passed, error: result.error||null }, msg, currentStep: session.currentStep || 0 }).catch(()=>{});
-        if (!result.passed) break;
-        await new Promise(r => setTimeout(r, 400));
-      }
-    });
-
-    await ctx.exposeFunction('__skopixStopPreview', async () => {
-      try { await browser.close(); } catch {}
-      stepTesterSessions.delete(testerId);
-    });
-
-    await ctx.exposeFunction('__skopixGetState', async () => {
-      const session = stepTesterSessions.get(testerId);
-      return { currentStep: session?.currentStep || 0, results: session?.results || {} };
-    });
-
-    // THEN inject toolbar via addInitScript
-    // PREVIEW MODE — inject steps list toolbar
-    await ctx.addInitScript((stepsData) => {
-      window.__skopixPreviewSteps = stepsData;
-      window.__skopixPreviewResults = {};
-      document.addEventListener('DOMContentLoaded', () => {
-        if (document.getElementById('__skopix_preview')) return;
-        // Push page content left to avoid covering elements
-        document.body.style.marginRight = '320px';
-        document.body.style.boxSizing = 'border-box';
-        // Also fix any fixed/sticky headers
-        const fixedEls = Array.from(document.querySelectorAll('*')).filter(el => {
-          const s = window.getComputedStyle(el);
-          return (s.position === 'fixed' || s.position === 'sticky') && el.id !== '__skopix_preview';
-        });
-        fixedEls.forEach(el => {
-          const s = window.getComputedStyle(el);
-          const right = parseInt(s.right) || 0;
-          el.style.right = (right + 320) + 'px';
-          el.setAttribute('data-skopix-fixed', '1');
-        });
-        const tb = document.createElement('div');
-        tb.id = '__skopix_preview';
-        tb.style.cssText = [
-          'position:fixed', 'top:0', 'right:0', 'bottom:0', 'width:320px',
-          'z-index:2147483647', 'background:#0d0d1a', 'border-left:1px solid rgba(245,158,11,0.4)',
-          'display:flex', 'flex-direction:column', 'font-family:monospace', 'font-size:12px',
-          'box-shadow:-4px 0 24px rgba(0,0,0,0.5)',
-        ].join(';');
-        tb.innerHTML = `
-          <div style="padding:12px 16px;border-bottom:1px solid rgba(245,158,11,0.2);background:rgba(245,158,11,0.06);flex-shrink:0">
-            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
-              <div style="display:flex;align-items:center;gap:8px">
-                <span style="color:#f59e0b">⚡</span>
-                <span style="color:#f59e0b;font-size:10px;letter-spacing:0.1em">PREVIEW</span>
-              </div>
-              <div style="display:flex;gap:6px">
-                <button id="__skopix_run_next" style="background:transparent;border:1px solid rgba(245,158,11,0.4);color:#f59e0b;
-                  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace">▶ Next</button>
-                <button id="__skopix_run_all" style="background:#f59e0b;border:none;color:#000;
-                  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace;font-weight:700">▶▶ All</button>
-                <button id="__skopix_stop_preview" style="background:transparent;border:1px solid #374151;color:#9ca3af;
-                  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace">✕ Stop</button>
-              </div>
-            </div>
-            <div id="__skopix_preview_status" style="color:#9ca3af;font-size:11px">Navigate to start, then click Run</div>
-          </div>
-          <div id="__skopix_steps" style="overflow-y:auto;flex:1;padding:0"></div>
-          <div id="__skopix_preview_summary" style="display:none;padding:12px 16px;border-top:1px solid rgba(255,255,255,0.08);font-size:12px"></div>
-        `;
-        document.body.appendChild(tb);
-
-        function renderSteps(currentIdx, results) {
-          const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
-          document.getElementById('__skopix_steps').innerHTML = stepsData.map((s, i) => {
-            const r = results[i];
-            const isCurrent = i === currentIdx && !r;
-            const status = r ? (r.passed ? '✓' : '✗') : (isCurrent ? '▶' : '○');
-            const statusColor = r ? (r.passed ? '#34d399' : '#ef4444') : (isCurrent ? '#f59e0b' : '#374151');
-            const bg = isCurrent ? 'rgba(245,158,11,0.08)' : r && !r.passed ? 'rgba(239,68,68,0.06)' : '';
-            return `<div style="padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;gap:10px;align-items:flex-start;background:${bg}">
-              <span style="color:${statusColor};font-size:13px;margin-top:1px;flex-shrink:0">${status}</span>
-              <div style="min-width:0">
-                <div style="display:flex;align-items:center;gap:6px;margin-bottom:2px">
-                  <span style="color:${actionColors[s.action]||'#6b7280'};font-size:10px">${s.action}</span>
-                  <span style="color:#e5e7eb;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px">${s.description||''}</span>
-                </div>
-                <code style="color:#4b5563;font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${s.selector||''}</code>
-                ${r && !r.passed ? `<div style="color:#ef4444;font-size:10px;margin-top:3px">${(r.error||'Failed').slice(0,80)}</div>` : ''}
-              </div>
-            </div>`;
-          }).join('');
-        }
-
-        window.__skopixPreviewCurrentStep = 0;
-        window.__skopixPreviewResults = {};
-        renderSteps(0, {});
-
-        document.getElementById('__skopix_run_next').addEventListener('click', (e) => {
-          e.stopPropagation();
-          if (window.__skopixPreviewRun) window.__skopixPreviewRun({ index: window.__skopixPreviewCurrentStep });
-        });
-
-        document.getElementById('__skopix_run_all').addEventListener('click', (e) => {
-          e.stopPropagation();
-          if (window.__skopixPreviewRunAll) window.__skopixPreviewRunAll({ fromIndex: window.__skopixPreviewCurrentStep });
-        });
+// stepTesterSessions imported from step-tester module (shared)
 
-        document.getElementById('__skopix_stop_preview').addEventListener('click', (e) => {
-          e.stopPropagation();
-          if (window.__skopixStopPreview) window.__skopixStopPreview({});
-        });
-
-        // Restore state from server after navigation
-        if (window.__skopixGetState) {
-          window.__skopixGetState({}).then(state => {
-            if (state && state.currentStep > 0) {
-              window.__skopixPreviewCurrentStep = state.currentStep;
-              window.__skopixPreviewResults = state.results || {};
-              renderSteps(state.currentStep, state.results || {});
-            }
-          }).catch(() => {});
-        }
-
-        window.__skopixUpdatePreview = (index, result, status) => {
-          window.__skopixPreviewResults[index] = result;
-          if (result && result.passed) window.__skopixPreviewCurrentStep = index + 1;
-          document.getElementById('__skopix_preview_status').textContent = status || '';
-          renderSteps(window.__skopixPreviewCurrentStep, window.__skopixPreviewResults);
-          // Highlight element
-          if (result) {
-            try {
-              const target = document.querySelector(stepsData[index]?.selector || '');
-              if (target) {
-                const orig = target.style.outline;
-                target.style.outline = result.passed ? '3px solid #34d399' : '3px solid #ef4444';
-                setTimeout(() => { target.style.outline = orig; }, 1500);
-              }
-            } catch {}
-          }
-          // Update summary
-          const total = Object.keys(window.__skopixPreviewResults).length;
-          const passed = Object.values(window.__skopixPreviewResults).filter(r=>r&&r.passed).length;
-          const failed = total - passed;
-          if (total > 0) {
-            const summary = document.getElementById('__skopix_preview_summary');
-            summary.style.display = '';
-            summary.innerHTML = `<span style="color:#34d399">✓ ${passed}</span><span style="color:#4b5563"> / </span><span style="color:${failed>0?'#ef4444':'#4b5563'}">✗ ${failed}</span><span style="color:#4b5563"> of ${stepsData.length}</span>`;
-          }
-        };
-      });
-    }, steps.map(s => ({ action: s.action, selector: s.stableSelector||s.selector||'', description: s.description||s.action, value: s.value||'' })));
-
-  } else {
-    // STEP TESTER MODE — register expose functions FIRST
-    await ctx.exposeFunction('__skopixTesterRun', async ({ sel, action, value }) => {
-      const result = await executeStepTesterAction(page, { selector: sel, action, value });
-      await page.evaluate(({ passed }) => {
-        const el = document.getElementById('__skopix_result');
-        if (el) { el.textContent = passed ? '✓' : '✗'; el.style.color = passed ? '#34d399' : '#ef4444'; }
-      }, { passed: result.passed }).catch(async () => {
-        await new Promise(r => setTimeout(r, 500));
-        await page.evaluate(({ passed }) => {
-          const el = document.getElementById('__skopix_result');
-          if (el) { el.textContent = passed ? '✓' : '✗'; el.style.color = passed ? '#34d399' : '#ef4444'; }
-        }, { passed: result.passed }).catch(() => {});
-      });
-      await page.evaluate(({ passed, sel }) => {
-        try {
-          const target = document.querySelector(sel);
-          if (target) {
-            const orig = target.style.outline;
-            target.style.outline = passed ? '3px solid #34d399' : '3px solid #ef4444';
-            setTimeout(() => { target.style.outline = orig; }, 1500);
-          }
-        } catch {}
-      }, { passed: result.passed, sel }).catch(() => {});
-    });
-
-    await ctx.exposeFunction('__skopixTesterStop', async () => {
-      try { await browser.close(); } catch {}
-      stepTesterSessions.delete(testerId);
-    });
-
-    // THEN inject toolbar
-    await ctx.addInitScript((sel) => {
-      window.__skopixTesterSelector = sel;
-      document.addEventListener('DOMContentLoaded', () => {
-        if (document.getElementById('__skopix_tester')) return;
-        const tb = document.createElement('div');
-        tb.id = '__skopix_tester';
-        tb.style.cssText = [
-          'position:fixed', 'bottom:20px', 'left:50%', 'transform:translateX(-50%)',
-          'z-index:2147483647', 'background:#0f1117', 'border:1px solid #f59e0b',
-          'border-radius:12px', 'padding:12px 16px', 'display:flex', 'align-items:center',
-          'gap:10px', 'font-family:monospace', 'font-size:12px', 'color:#e5e7eb',
-          'box-shadow:0 4px 24px rgba(0,0,0,0.7)', 'min-width:400px',
-        ].join(';');
-        tb.innerHTML = `
-          <span style="color:#f59e0b;font-size:14px">⚡</span>
-          <span style="color:#9ca3af;font-size:11px">STEP TESTER</span>
-          <input id="__skopix_sel" value="${(sel||'').replace(/"/g,'&quot;')}" placeholder="selector..."
-            style="flex:1;background:#1a1d2e;border:1px solid #374151;border-radius:6px;padding:4px 8px;
-            color:#e5e7eb;font-family:monospace;font-size:11px;min-width:160px">
-          <select id="__skopix_action" style="background:#1a1d2e;border:1px solid #374151;border-radius:6px;
-            padding:4px 8px;color:#e5e7eb;font-family:monospace;font-size:11px">
-            <option value="click">click</option>
-            <option value="type">type</option>
-            <option value="check">check</option>
-            <option value="assert">assert (visible)</option>
-            <option value="assert_text">assert (text)</option>
-          </select>
-          <input id="__skopix_value" placeholder="value..." style="width:100px;background:#1a1d2e;
-            border:1px solid #374151;border-radius:6px;padding:4px 8px;color:#e5e7eb;
-            font-family:monospace;font-size:11px;display:none">
-          <button id="__skopix_run" style="background:#f59e0b;border:none;color:#000;
-            border-radius:6px;padding:5px 14px;cursor:pointer;font-size:11px;font-weight:700;
-            font-family:monospace">▶ Run</button>
-          <span id="__skopix_result" style="font-size:13px;min-width:20px"></span>
-          <button id="__skopix_stop" style="background:transparent;border:1px solid #374151;color:#9ca3af;
-            border-radius:6px;padding:5px 10px;cursor:pointer;font-size:11px;font-family:monospace">✕ Stop</button>
-        `;
-        document.body.appendChild(tb);
-        document.getElementById('__skopix_action').addEventListener('change', function() {
-          const needsValue = ['type','assert_text'].includes(this.value);
-          document.getElementById('__skopix_value').style.display = needsValue ? '' : 'none';
-        });
-        document.getElementById('__skopix_run').addEventListener('click', function(e) {
-          e.stopPropagation();
-          const sel = document.getElementById('__skopix_sel').value.trim();
-          const action = document.getElementById('__skopix_action').value;
-          const value = document.getElementById('__skopix_value').value.trim();
-          document.getElementById('__skopix_result').textContent = '⏳';
-          if (window.__skopixTesterRun) window.__skopixTesterRun({ sel, action, value });
-        });
-        document.getElementById('__skopix_stop').addEventListener('click', function(e) {
-          e.stopPropagation();
-          if (window.__skopixTesterStop) window.__skopixTesterStop({});
-        });
-      });
-    }, selector || '');
-  }
-
-  if (url) await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 }).catch(() => {});
-  // Ensure toolbar is injected on first page (DOMContentLoaded may have already fired)
-  await page.evaluate(() => { if (window.__skopixTesterSelector !== undefined && !document.getElementById('__skopix_tester') && !document.getElementById('__skopix_preview')) { document.dispatchEvent(new Event('DOMContentLoaded')); } }).catch(() => {});
-  stepTesterSessions.set(testerId, { browser, ctx, page, currentStep: 0, results: {} });
-}
-
-async function executeStepTesterAction(page, { selector, action, value }) {
-  try {
-    const { sanitiseSelector } = { sanitiseSelector: (s) => s }; // inline since not exported
-    const sel = selector;
-    if (action === 'click') {
-      await page.locator(sel).first().click({ timeout: 5000 });
-    } else if (action === 'type') {
-      await page.locator(sel).first().fill(value || '', { timeout: 5000 });
-    } else if (action === 'check') {
-      await page.locator(sel).first().click({ timeout: 5000 });
-    } else if (action === 'assert' || action === 'assert_text') {
-      if (action === 'assert_text') {
-        const text = await page.locator(sel).first().textContent({ timeout: 5000 });
-        if (!text.includes(value)) throw new Error(`Text "${text}" does not contain "${value}"`);
-      } else {
-        await page.locator(sel).first().waitFor({ state: 'attached', timeout: 5000 });
-      }
-    }
-    const screenshot = await page.screenshot({ type: 'jpeg', quality: 70 }).catch(() => null);
-    return { passed: true, screenshot: screenshot ? screenshot.toString('base64') : null };
-  } catch (err) {
-    const screenshot = await page.screenshot({ type: 'jpeg', quality: 70 }).catch(() => null);
-    return { passed: false, error: err.message, screenshot: screenshot ? screenshot.toString('base64') : null };
-  }
-}
-
-async function runStepTesterAction(testerId, stepData) {
-  const session = stepTesterSessions.get(testerId);
-  if (!session) return { passed: false, error: 'Session not found' };
-  return await executeStepTesterAction(session.page, stepData);
-}
-
-async function stopStepTester(testerId) {
-  const session = stepTesterSessions.get(testerId);
-  if (!session) return;
-  try { await session.browser.close(); } catch {}
-  stepTesterSessions.delete(testerId);
-}

package/core/step-tester.js

@@ -0,0 +1,332 @@
+// Shared step tester logic — used by both the dashboard (solo mode) and
+// the agent (team mode, runs on the user's machine with a display).
+import { chromium } from 'playwright';
+
+// Module-level session store (each process — dashboard or agent — has its own)
+export const stepTesterSessions = new Map();
+
+async function startStepTester(testerId, url, selector, mode, steps) {
+  // Detect display — on Linux servers without DISPLAY, must run headless
+  const hasDisplay = process.platform !== 'linux' || !!process.env.DISPLAY || !!process.env.WAYLAND_DISPLAY;
+  const browser = await chromium.launch({ headless: !hasDisplay, args: ['--no-sandbox'] });
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+  const page = await ctx.newPage();
+
+  if (mode === 'preview' && steps && steps.length > 0) {
+    // Register expose functions FIRST before addInitScript so they're available on DOMContentLoaded
+    await ctx.exposeFunction('__skopixPreviewRun', async ({ index }) => {
+      const session = stepTesterSessions.get(testerId);
+      if (!session) return;
+      const s = steps[index];
+      if (!s) return;
+      await page.evaluate(({ i, status }) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, status); }, { i: index, status: `Running step ${index+1}/${steps.length}...` }).catch(()=>{});
+      const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
+      const msg = result.passed ? (index+1 >= steps.length ? `✓ All ${steps.length} steps passed!` : `✓ Step ${index+1} passed`) : `✗ Step ${index+1} failed`;
+      if (result.passed) session.currentStep = index + 1;
+      if (!session.results) session.results = {};
+      session.results[index] = { passed: result.passed, error: result.error||null };
+      await page.evaluate(({ i, r, msg, currentStep }) => {
+        if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, msg);
+        window.__skopixPreviewCurrentStep = currentStep;
+      }, { i: index, r: { passed: result.passed, error: result.error||null }, msg, currentStep: session.currentStep || 0 }).catch(()=>{});
+    });
+
+    await ctx.exposeFunction('__skopixPreviewRunAll', async ({ fromIndex }) => {
+      const session = stepTesterSessions.get(testerId);
+      if (!session) return;
+      for (let i = fromIndex; i < steps.length; i++) {
+        const s = steps[i];
+        await page.evaluate(({ i, total }) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, `Running step ${i+1}/${total}...`); }, { i, total: steps.length }).catch(()=>{});
+        const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
+        if (result.passed) session.currentStep = i + 1;
+        if (!session.results) session.results = {};
+        session.results[i] = { passed: result.passed, error: result.error||null };
+        const msg = result.passed ? (i+1 >= steps.length ? `✓ All ${steps.length} steps passed!` : `Running...`) : `✗ Step ${i+1} failed — fix and retry`;
+        await page.evaluate(({ i, r, msg, currentStep }) => {
+          if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, msg);
+          window.__skopixPreviewCurrentStep = currentStep;
+        }, { i, r: { passed: result.passed, error: result.error||null }, msg, currentStep: session.currentStep || 0 }).catch(()=>{});
+        if (!result.passed) break;
+        await new Promise(r => setTimeout(r, 400));
+      }
+    });
+
+    await ctx.exposeFunction('__skopixStopPreview', async () => {
+      try { await browser.close(); } catch {}
+      stepTesterSessions.delete(testerId);
+    });
+
+    await ctx.exposeFunction('__skopixGetState', async () => {
+      const session = stepTesterSessions.get(testerId);
+      return { currentStep: session?.currentStep || 0, results: session?.results || {} };
+    });
+
+    // THEN inject toolbar via addInitScript
+    // PREVIEW MODE — inject steps list toolbar
+    await ctx.addInitScript((stepsData) => {
+      window.__skopixPreviewSteps = stepsData;
+      window.__skopixPreviewResults = {};
+      document.addEventListener('DOMContentLoaded', () => {
+        if (document.getElementById('__skopix_preview')) return;
+        // Push page content left to avoid covering elements
+        document.body.style.marginRight = '320px';
+        document.body.style.boxSizing = 'border-box';
+        // Also fix any fixed/sticky headers
+        const fixedEls = Array.from(document.querySelectorAll('*')).filter(el => {
+          const s = window.getComputedStyle(el);
+          return (s.position === 'fixed' || s.position === 'sticky') && el.id !== '__skopix_preview';
+        });
+        fixedEls.forEach(el => {
+          const s = window.getComputedStyle(el);
+          const right = parseInt(s.right) || 0;
+          el.style.right = (right + 320) + 'px';
+          el.setAttribute('data-skopix-fixed', '1');
+        });
+        const tb = document.createElement('div');
+        tb.id = '__skopix_preview';
+        tb.style.cssText = [
+          'position:fixed', 'top:0', 'right:0', 'bottom:0', 'width:320px',
+          'z-index:2147483647', 'background:#0d0d1a', 'border-left:1px solid rgba(245,158,11,0.4)',
+          'display:flex', 'flex-direction:column', 'font-family:monospace', 'font-size:12px',
+          'box-shadow:-4px 0 24px rgba(0,0,0,0.5)',
+        ].join(';');
+        tb.innerHTML = `
+          <div style="padding:12px 16px;border-bottom:1px solid rgba(245,158,11,0.2);background:rgba(245,158,11,0.06);flex-shrink:0">
+            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
+              <div style="display:flex;align-items:center;gap:8px">
+                <span style="color:#f59e0b">⚡</span>
+                <span style="color:#f59e0b;font-size:10px;letter-spacing:0.1em">PREVIEW</span>
+              </div>
+              <div style="display:flex;gap:6px">
+                <button id="__skopix_run_next" style="background:transparent;border:1px solid rgba(245,158,11,0.4);color:#f59e0b;
+                  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace">▶ Next</button>
+                <button id="__skopix_run_all" style="background:#f59e0b;border:none;color:#000;
+                  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace;font-weight:700">▶▶ All</button>
+                <button id="__skopix_stop_preview" style="background:transparent;border:1px solid #374151;color:#9ca3af;
+                  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace">✕ Stop</button>
+              </div>
+            </div>
+            <div id="__skopix_preview_status" style="color:#9ca3af;font-size:11px">Navigate to start, then click Run</div>
+          </div>
+          <div id="__skopix_steps" style="overflow-y:auto;flex:1;padding:0"></div>
+          <div id="__skopix_preview_summary" style="display:none;padding:12px 16px;border-top:1px solid rgba(255,255,255,0.08);font-size:12px"></div>
+        `;
+        document.body.appendChild(tb);
+
+        function renderSteps(currentIdx, results) {
+          const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
+          document.getElementById('__skopix_steps').innerHTML = stepsData.map((s, i) => {
+            const r = results[i];
+            const isCurrent = i === currentIdx && !r;
+            const status = r ? (r.passed ? '✓' : '✗') : (isCurrent ? '▶' : '○');
+            const statusColor = r ? (r.passed ? '#34d399' : '#ef4444') : (isCurrent ? '#f59e0b' : '#374151');
+            const bg = isCurrent ? 'rgba(245,158,11,0.08)' : r && !r.passed ? 'rgba(239,68,68,0.06)' : '';
+            return `<div style="padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;gap:10px;align-items:flex-start;background:${bg}">
+              <span style="color:${statusColor};font-size:13px;margin-top:1px;flex-shrink:0">${status}</span>
+              <div style="min-width:0">
+                <div style="display:flex;align-items:center;gap:6px;margin-bottom:2px">
+                  <span style="color:${actionColors[s.action]||'#6b7280'};font-size:10px">${s.action}</span>
+                  <span style="color:#e5e7eb;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px">${s.description||''}</span>
+                </div>
+                <code style="color:#4b5563;font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${s.selector||''}</code>
+                ${r && !r.passed ? `<div style="color:#ef4444;font-size:10px;margin-top:3px">${(r.error||'Failed').slice(0,80)}</div>` : ''}
+              </div>
+            </div>`;
+          }).join('');
+        }
+
+        window.__skopixPreviewCurrentStep = 0;
+        window.__skopixPreviewResults = {};
+        renderSteps(0, {});
+
+        document.getElementById('__skopix_run_next').addEventListener('click', (e) => {
+          e.stopPropagation();
+          if (window.__skopixPreviewRun) window.__skopixPreviewRun({ index: window.__skopixPreviewCurrentStep });
+        });
+
+        document.getElementById('__skopix_run_all').addEventListener('click', (e) => {
+          e.stopPropagation();
+          if (window.__skopixPreviewRunAll) window.__skopixPreviewRunAll({ fromIndex: window.__skopixPreviewCurrentStep });
+        });
+
+        document.getElementById('__skopix_stop_preview').addEventListener('click', (e) => {
+          e.stopPropagation();
+          if (window.__skopixStopPreview) window.__skopixStopPreview({});
+        });
+
+        // Restore state from server after navigation
+        if (window.__skopixGetState) {
+          window.__skopixGetState({}).then(state => {
+            if (state && state.currentStep > 0) {
+              window.__skopixPreviewCurrentStep = state.currentStep;
+              window.__skopixPreviewResults = state.results || {};
+              renderSteps(state.currentStep, state.results || {});
+            }
+          }).catch(() => {});
+        }
+
+        window.__skopixUpdatePreview = (index, result, status) => {
+          window.__skopixPreviewResults[index] = result;
+          if (result && result.passed) window.__skopixPreviewCurrentStep = index + 1;
+          document.getElementById('__skopix_preview_status').textContent = status || '';
+          renderSteps(window.__skopixPreviewCurrentStep, window.__skopixPreviewResults);
+          // Highlight element
+          if (result) {
+            try {
+              const target = document.querySelector(stepsData[index]?.selector || '');
+              if (target) {
+                const orig = target.style.outline;
+                target.style.outline = result.passed ? '3px solid #34d399' : '3px solid #ef4444';
+                setTimeout(() => { target.style.outline = orig; }, 1500);
+              }
+            } catch {}
+          }
+          // Update summary
+          const total = Object.keys(window.__skopixPreviewResults).length;
+          const passed = Object.values(window.__skopixPreviewResults).filter(r=>r&&r.passed).length;
+          const failed = total - passed;
+          if (total > 0) {
+            const summary = document.getElementById('__skopix_preview_summary');
+            summary.style.display = '';
+            summary.innerHTML = `<span style="color:#34d399">✓ ${passed}</span><span style="color:#4b5563"> / </span><span style="color:${failed>0?'#ef4444':'#4b5563'}">✗ ${failed}</span><span style="color:#4b5563"> of ${stepsData.length}</span>`;
+          }
+        };
+      });
+    }, steps.map(s => ({ action: s.action, selector: s.stableSelector||s.selector||'', description: s.description||s.action, value: s.value||'' })));
+
+  } else {
+    // STEP TESTER MODE — register expose functions FIRST
+    await ctx.exposeFunction('__skopixTesterRun', async ({ sel, action, value }) => {
+      const result = await executeStepTesterAction(page, { selector: sel, action, value });
+      await page.evaluate(({ passed }) => {
+        const el = document.getElementById('__skopix_result');
+        if (el) { el.textContent = passed ? '✓' : '✗'; el.style.color = passed ? '#34d399' : '#ef4444'; }
+      }, { passed: result.passed }).catch(async () => {
+        await new Promise(r => setTimeout(r, 500));
+        await page.evaluate(({ passed }) => {
+          const el = document.getElementById('__skopix_result');
+          if (el) { el.textContent = passed ? '✓' : '✗'; el.style.color = passed ? '#34d399' : '#ef4444'; }
+        }, { passed: result.passed }).catch(() => {});
+      });
+      await page.evaluate(({ passed, sel }) => {
+        try {
+          const target = document.querySelector(sel);
+          if (target) {
+            const orig = target.style.outline;
+            target.style.outline = passed ? '3px solid #34d399' : '3px solid #ef4444';
+            setTimeout(() => { target.style.outline = orig; }, 1500);
+          }
+        } catch {}
+      }, { passed: result.passed, sel }).catch(() => {});
+    });
+
+    await ctx.exposeFunction('__skopixTesterStop', async () => {
+      try { await browser.close(); } catch {}
+      stepTesterSessions.delete(testerId);
+    });
+
+    // THEN inject toolbar
+    await ctx.addInitScript((sel) => {
+      window.__skopixTesterSelector = sel;
+      document.addEventListener('DOMContentLoaded', () => {
+        if (document.getElementById('__skopix_tester')) return;
+        const tb = document.createElement('div');
+        tb.id = '__skopix_tester';
+        tb.style.cssText = [
+          'position:fixed', 'bottom:20px', 'left:50%', 'transform:translateX(-50%)',
+          'z-index:2147483647', 'background:#0f1117', 'border:1px solid #f59e0b',
+          'border-radius:12px', 'padding:12px 16px', 'display:flex', 'align-items:center',
+          'gap:10px', 'font-family:monospace', 'font-size:12px', 'color:#e5e7eb',
+          'box-shadow:0 4px 24px rgba(0,0,0,0.7)', 'min-width:400px',
+        ].join(';');
+        tb.innerHTML = `
+          <span style="color:#f59e0b;font-size:14px">⚡</span>
+          <span style="color:#9ca3af;font-size:11px">STEP TESTER</span>
+          <input id="__skopix_sel" value="${(sel||'').replace(/"/g,'&quot;')}" placeholder="selector..."
+            style="flex:1;background:#1a1d2e;border:1px solid #374151;border-radius:6px;padding:4px 8px;
+            color:#e5e7eb;font-family:monospace;font-size:11px;min-width:160px">
+          <select id="__skopix_action" style="background:#1a1d2e;border:1px solid #374151;border-radius:6px;
+            padding:4px 8px;color:#e5e7eb;font-family:monospace;font-size:11px">
+            <option value="click">click</option>
+            <option value="type">type</option>
+            <option value="check">check</option>
+            <option value="assert">assert (visible)</option>
+            <option value="assert_text">assert (text)</option>
+          </select>
+          <input id="__skopix_value" placeholder="value..." style="width:100px;background:#1a1d2e;
+            border:1px solid #374151;border-radius:6px;padding:4px 8px;color:#e5e7eb;
+            font-family:monospace;font-size:11px;display:none">
+          <button id="__skopix_run" style="background:#f59e0b;border:none;color:#000;
+            border-radius:6px;padding:5px 14px;cursor:pointer;font-size:11px;font-weight:700;
+            font-family:monospace">▶ Run</button>
+          <span id="__skopix_result" style="font-size:13px;min-width:20px"></span>
+          <button id="__skopix_stop" style="background:transparent;border:1px solid #374151;color:#9ca3af;
+            border-radius:6px;padding:5px 10px;cursor:pointer;font-size:11px;font-family:monospace">✕ Stop</button>
+        `;
+        document.body.appendChild(tb);
+        document.getElementById('__skopix_action').addEventListener('change', function() {
+          const needsValue = ['type','assert_text'].includes(this.value);
+          document.getElementById('__skopix_value').style.display = needsValue ? '' : 'none';
+        });
+        document.getElementById('__skopix_run').addEventListener('click', function(e) {
+          e.stopPropagation();
+          const sel = document.getElementById('__skopix_sel').value.trim();
+          const action = document.getElementById('__skopix_action').value;
+          const value = document.getElementById('__skopix_value').value.trim();
+          document.getElementById('__skopix_result').textContent = '⏳';
+          if (window.__skopixTesterRun) window.__skopixTesterRun({ sel, action, value });
+        });
+        document.getElementById('__skopix_stop').addEventListener('click', function(e) {
+          e.stopPropagation();
+          if (window.__skopixTesterStop) window.__skopixTesterStop({});
+        });
+      });
+    }, selector || '');
+  }
+
+  if (url) await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 }).catch(() => {});
+  // Ensure toolbar is injected on first page (DOMContentLoaded may have already fired)
+  await page.evaluate(() => { if (window.__skopixTesterSelector !== undefined && !document.getElementById('__skopix_tester') && !document.getElementById('__skopix_preview')) { document.dispatchEvent(new Event('DOMContentLoaded')); } }).catch(() => {});
+  stepTesterSessions.set(testerId, { browser, ctx, page, currentStep: 0, results: {} });
+}
+
+async function executeStepTesterAction(page, { selector, action, value }) {
+  try {
+    const { sanitiseSelector } = { sanitiseSelector: (s) => s }; // inline since not exported
+    const sel = selector;
+    if (action === 'click') {
+      await page.locator(sel).first().click({ timeout: 5000 });
+    } else if (action === 'type') {
+      await page.locator(sel).first().fill(value || '', { timeout: 5000 });
+    } else if (action === 'check') {
+      await page.locator(sel).first().click({ timeout: 5000 });
+    } else if (action === 'assert' || action === 'assert_text') {
+      if (action === 'assert_text') {
+        const text = await page.locator(sel).first().textContent({ timeout: 5000 });
+        if (!text.includes(value)) throw new Error(`Text "${text}" does not contain "${value}"`);
+      } else {
+        await page.locator(sel).first().waitFor({ state: 'attached', timeout: 5000 });
+      }
+    }
+    const screenshot = await page.screenshot({ type: 'jpeg', quality: 70 }).catch(() => null);
+    return { passed: true, screenshot: screenshot ? screenshot.toString('base64') : null };
+  } catch (err) {
+    const screenshot = await page.screenshot({ type: 'jpeg', quality: 70 }).catch(() => null);
+    return { passed: false, error: err.message, screenshot: screenshot ? screenshot.toString('base64') : null };
+  }
+}
+
+async function runStepTesterAction(testerId, stepData) {
+  const session = stepTesterSessions.get(testerId);
+  if (!session) return { passed: false, error: 'Session not found' };
+  return await executeStepTesterAction(session.page, stepData);
+}
+
+async function stopStepTester(testerId) {
+  const session = stepTesterSessions.get(testerId);
+  if (!session) return;
+  try { await session.browser.close(); } catch {}
+  stepTesterSessions.delete(testerId);
+}
+
+export { startStepTester, executeStepTesterAction, runStepTesterAction, stopStepTester };

package/package.json

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