skopix 2.0.27 → 2.0.29

package/package.json

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

package/web/app/index.html

@@ -1578,6 +1578,10 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
             Sync tests to library
           </button>
+          <button class="btn btn-ghost" onclick="openStepHarvester()" style="color:#f59e0b;border-color:rgba(245,158,11,0.3)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
+            Harvest step
+          </button>
           <button class="btn btn-primary" onclick="openAddLibraryStep()">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
             Add step
@@ -1711,7 +1715,68 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
       </div>
     </div>
 
-    <!-- SUITES LIST -->
+    <!-- STEP HARVESTER — START -->
+    <div class="modal-overlay" id="harvester-start-modal" style="display:none" onclick="if(event.target===this)closeHarvester()">
+      <div class="modal" style="max-width:480px;width:100%">
+        <div class="modal-header">
+          <div class="modal-title">Harvest a step</div>
+          <button class="modal-close" onclick="closeHarvester()">✕</button>
+        </div>
+        <div class="modal-body" style="display:flex;flex-direction:column;gap:14px">
+          <p style="font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.7;margin:0">
+            Opens a browser at the URL you specify. Navigate to the element you want to capture, then click <strong style="color:#f59e0b">Capture</strong>. The next interaction you make gets saved directly to the step library.
+          </p>
+          <div class="form-field">
+            <label class="form-label">URL to open</label>
+            <input class="form-input" id="harvester-url" type="text" placeholder="http://localhost:8224/pi">
+          </div>
+          <div class="form-field">
+            <label class="form-label">Step name (optional)</label>
+            <input class="form-input" id="harvester-step-name" type="text" placeholder="e.g. Click chart settings icon">
+            <div class="form-help">Leave blank to auto-generate from the interaction</div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-ghost" onclick="closeHarvester()">Cancel</button>
+          <button class="btn btn-primary" style="background:#f59e0b;border-color:#f59e0b;color:#000" onclick="startHarvester()">Open browser</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- STEP HARVESTER — ACTIVE -->
+    <div class="modal-overlay" id="harvester-active-modal" style="display:none" onclick="if(event.target===this)closeHarvester()">
+      <div class="modal" style="max-width:480px;width:100%">
+        <div class="modal-header">
+          <div class="modal-title" style="color:#f59e0b">
+            <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#f59e0b;margin-right:8px;animation:pulse 1s infinite"></span>
+            Harvester active
+          </div>
+          <button class="modal-close" onclick="closeHarvester()">✕</button>
+        </div>
+        <div class="modal-body" style="display:flex;flex-direction:column;gap:16px">
+          <p style="font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.7;margin:0">
+            Browser is open. Navigate to the element you want to capture, then click <strong style="color:#f59e0b">Capture next interaction</strong>. The very next click, type, or check you make will be saved to the library.
+          </p>
+          <div id="harvester-status" style="font-family:var(--mono);font-size:12px;padding:12px 14px;background:var(--surface2);border-radius:8px;color:var(--muted)">
+            Waiting — navigate to the right page first...
+          </div>
+          <div id="harvester-captured" style="display:none;flex-direction:column;gap:8px">
+            <div style="font-family:var(--mono);font-size:10px;color:#34d399;letter-spacing:0.1em">✓ STEP CAPTURED</div>
+            <div id="harvester-captured-desc" style="font-size:13px;color:var(--text)"></div>
+            <code id="harvester-captured-sel" style="font-size:11px;color:var(--muted)"></code>
+          </div>
+        </div>
+        <div class="modal-footer" style="justify-content:space-between">
+          <button class="btn btn-ghost" onclick="closeHarvester()">Done</button>
+          <div style="display:flex;gap:8px">
+            <button class="btn btn-ghost" id="btn-harvest-another" style="display:none" onclick="harvestAnother()">Harvest another</button>
+            <button class="btn btn-primary" id="btn-capture-next" style="background:#f59e0b;border-color:#f59e0b;color:#000" onclick="captureNextInteraction()">
+              Capture next interaction
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="view" id="view-suites">
       <div class="topbar">
         <div>
@@ -5943,6 +6008,129 @@ async function saveBuiltTest() {
   }
 }
 
+// ── STEP HARVESTER ───────────────────────────────────────────────────────────
+let harvesterState = { recordingId: null, eventSource: null, capturing: false, stepName: '' };
+
+function openStepHarvester() {
+  document.getElementById('harvester-url').value = '';
+  document.getElementById('harvester-step-name').value = '';
+  document.getElementById('harvester-start-modal').style.display = 'flex';
+  setTimeout(() => document.getElementById('harvester-url').focus(), 100);
+}
+
+function closeHarvester() {
+  document.getElementById('harvester-start-modal').style.display = 'none';
+  document.getElementById('harvester-active-modal').style.display = 'none';
+  // Stop recording if active
+  if (harvesterState.recordingId) {
+    fetch(API_BASE + '/api/record/' + harvesterState.recordingId + '/stop', { method: 'POST' }).catch(() => {});
+    if (harvesterState.eventSource) { harvesterState.eventSource.close(); harvesterState.eventSource = null; }
+    harvesterState.recordingId = null;
+  }
+  harvesterState.capturing = false;
+}
+
+async function startHarvester() {
+  const url = document.getElementById('harvester-url').value.trim();
+  harvesterState.stepName = document.getElementById('harvester-step-name').value.trim();
+  if (!url) { showToast('Enter a URL first'); return; }
+
+  document.getElementById('harvester-start-modal').style.display = 'none';
+  document.getElementById('harvester-active-modal').style.display = 'flex';
+  document.getElementById('harvester-status').textContent = 'Opening browser...';
+  document.getElementById('harvester-captured').style.display = 'none';
+  document.getElementById('btn-harvest-another').style.display = 'none';
+  document.getElementById('btn-capture-next').style.display = '';
+  harvesterState.capturing = false;
+
+  try {
+    const res = await fetch(API_BASE + '/api/record/start', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url }),
+    });
+    const data = await res.json();
+    if (!res.ok) { showToast(data.error || 'Failed to open browser'); closeHarvester(); return; }
+    harvesterState.recordingId = data.recordingId;
+    document.getElementById('harvester-status').textContent = 'Browser open — navigate to the element you want, then click Capture.';
+
+    // Listen to the stream but only capture one step when in capture mode
+    const es = new EventSource(API_BASE + '/api/record/' + data.recordingId + '/stream');
+    harvesterState.eventSource = es;
+    es.onmessage = (e) => {
+      try {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'step' && harvesterState.capturing) {
+          harvesterState.capturing = false;
+          saveHarvestedStep(msg.step);
+        }
+      } catch {}
+    };
+    es.onerror = () => {};
+  } catch (err) {
+    showToast('Error: ' + err.message);
+    closeHarvester();
+  }
+}
+
+function captureNextInteraction() {
+  harvesterState.capturing = true;
+  document.getElementById('harvester-status').textContent = '⏺ Capturing — make your interaction in the browser now...';
+  document.getElementById('btn-capture-next').textContent = 'Waiting...';
+  document.getElementById('btn-capture-next').disabled = true;
+}
+
+async function saveHarvestedStep(step) {
+  const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
+  const name = harvesterState.stepName || step.description || (step.action + ' ' + (step.stableSelector || step.selector || '').slice(0, 40));
+  const sel = step.stableSelector || step.selector || '';
+
+  try {
+    const res = await fetch(API_BASE + '/api/step-library', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name,
+        action: step.action,
+        selector: sel,
+        stableSelector: sel,
+        value: step.value || null,
+        assertType: step.assertType || null,
+        description: step.description || null,
+        tags: [],
+      }),
+    });
+    if (!res.ok) throw new Error(await res.text());
+
+    // Show captured step
+    document.getElementById('harvester-status').textContent = 'Step saved to library ✓';
+    document.getElementById('harvester-captured').style.display = 'flex';
+    document.getElementById('harvester-captured-desc').innerHTML =
+      `<span style="font-family:var(--mono);font-size:11px;color:${actionColors[step.action]||'var(--muted)'};margin-right:8px">${step.action}</span>${escapeHtml(name)}`;
+    document.getElementById('harvester-captured-sel').textContent = sel;
+    document.getElementById('btn-harvest-another').style.display = '';
+    document.getElementById('btn-capture-next').style.display = 'none';
+
+    // Refresh library if visible
+    if (libraryStepsCache.length > 0) fetchLibrarySteps().then(() => { if (document.getElementById('view-step-library')?.classList.contains('active')) filterLibrarySteps(); });
+  } catch (err) {
+    showToast('Failed to save step: ' + err.message);
+    document.getElementById('btn-capture-next').disabled = false;
+    document.getElementById('btn-capture-next').textContent = 'Capture next interaction';
+  }
+}
+
+function harvestAnother() {
+  harvesterState.stepName = '';
+  document.getElementById('harvester-step-name') && (document.getElementById('harvester-step-name').value = '');
+  document.getElementById('harvester-captured').style.display = 'none';
+  document.getElementById('btn-harvest-another').style.display = 'none';
+  document.getElementById('btn-capture-next').style.display = '';
+  document.getElementById('btn-capture-next').disabled = false;
+  document.getElementById('btn-capture-next').textContent = 'Capture next interaction';
+  document.getElementById('harvester-status').textContent = 'Navigate to the next element, then click Capture.';
+}
+
 // ── SUITE TEST PICKER ────────────────────────────────────────────────────────
 function openSuiteTestPicker() {
   const list = document.getElementById('stp-test-list');