skopix 2.0.37 → 2.0.38

package/cli/commands/dashboard.js

@@ -1823,6 +1823,32 @@ export async function dashboardCommand(options) {
         sendJSON(res, 200, await listLibrarySteps(suitesDir));
         return;
       }
+      if (pathname === '/api/step-library/pending' && method === 'GET') {
+        sendJSON(res, 200, await listPendingSteps());
+        return;
+      }
+      if (pathname.match(/^\/api\/step-library\/pending\/[^/]+\/approve$/) && method === 'POST') {
+        const id = decodeURIComponent(pathname.split('/')[4]);
+        const step = await approvePendingStep(suitesDir, id);
+        sendJSON(res, 200, step || { error: 'Not found' });
+        return;
+      }
+      if (pathname.match(/^\/api\/step-library\/pending\/[^/]+\/dismiss$/) && method === 'POST') {
+        const id = decodeURIComponent(pathname.split('/')[4]);
+        await dismissPendingStep(id);
+        sendJSON(res, 200, { dismissed: true });
+        return;
+      }
+      if (pathname === '/api/step-library/pending/approve-all' && method === 'POST') {
+        const count = await approveAllPending(suitesDir);
+        sendJSON(res, 200, { approved: count });
+        return;
+      }
+      if (pathname === '/api/step-library/pending/dismiss-all' && method === 'POST') {
+        await dismissAllPending();
+        sendJSON(res, 200, { dismissed: true });
+        return;
+      }
       if (pathname === '/api/step-library' && method === 'POST') {
         const data = JSON.parse(await readBody(req));
         const step = await addLibraryStep(suitesDir, data);
@@ -3652,6 +3678,66 @@ async function syncIssuesStatus() {
 // ═══════════════════════════════════════════════════════════════
 
 const LIBRARY_FILE = () => path.join(os.homedir(), '.skopix', 'step-library.yaml');
+const LIBRARY_PENDING_FILE = () => path.join(os.homedir(), '.skopix', 'step-library-pending.yaml');
+
+async function listPendingSteps() {
+  const file = LIBRARY_PENDING_FILE();
+  if (!await fs.pathExists(file)) return [];
+  try {
+    const content = await fs.readFile(file, 'utf8');
+    const data = yaml.parse(content);
+    return Array.isArray(data) ? data : [];
+  } catch { return []; }
+}
+
+async function savePendingSteps(steps) {
+  const file = LIBRARY_PENDING_FILE();
+  await fs.ensureDir(path.dirname(file));
+  await fs.writeFile(file, yaml.stringify(steps));
+}
+
+async function addToPending(suitesDir, pendingStep) {
+  const pending = await listPendingSteps();
+  const existing = await listLibrarySteps(suitesDir);
+  // Check not already in library or pending
+  const allSels = [...existing, ...pending].map(e => (e.stableSelector||e.selector||'').toLowerCase());
+  const selLower = (pendingStep.stableSelector||pendingStep.selector||'').toLowerCase();
+  if (allSels.includes(selLower)) return; // already exists
+  // Check similarity
+  const similar = [...existing, ...pending].find(e => stepSimilarity(e, pendingStep) >= 0.85);
+  if (similar) return;
+  pending.push({ ...pendingStep, id: 'pending-' + Math.random().toString(36).slice(2, 10), addedAt: new Date().toISOString() });
+  await savePendingSteps(pending);
+}
+
+async function approvePendingStep(suitesDir, id) {
+  const pending = await listPendingSteps();
+  const step = pending.find(s => s.id === id);
+  if (!step) return null;
+  const { id: _id, addedAt: _a, ...stepData } = step;
+  const added = await addLibraryStep(suitesDir, stepData);
+  await savePendingSteps(pending.filter(s => s.id !== id));
+  return added;
+}
+
+async function dismissPendingStep(id) {
+  const pending = await listPendingSteps();
+  await savePendingSteps(pending.filter(s => s.id !== id));
+}
+
+async function approveAllPending(suitesDir) {
+  const pending = await listPendingSteps();
+  for (const step of pending) {
+    const { id: _id, addedAt: _a, ...stepData } = step;
+    await addLibraryStep(suitesDir, stepData);
+  }
+  await savePendingSteps([]);
+  return pending.length;
+}
+
+async function dismissAllPending() {
+  await savePendingSteps([]);
+}
 
 async function listLibrarySteps(suitesDir) {
   const file = LIBRARY_FILE();
@@ -3733,19 +3819,41 @@ async function extractStepsToLibrary(suitesDir, steps, testName) {
     const sel = step.stableSelector || step.selector;
     if (!sel) continue;
     const selLower = sel.toLowerCase();
-    // Skip click steps if we already have this selector from a type step (deduplicate click/type pairs)
+
+    // Check exact match first
     if (seenSelectors.has(selLower)) {
-      const existing2 = existing.find(e => (e.stableSelector||e.selector||'').toLowerCase() === selLower) ||
-                        toAdd.find(e => (e.stableSelector||e.selector||'').toLowerCase() === selLower);
-      if (existing2) { existing2.usageCount = (existing2.usageCount || 0) + 1; }
+      const match = existing.find(e => (e.stableSelector||e.selector||'').toLowerCase() === selLower) ||
+                    toAdd.find(e => (e.stableSelector||e.selector||'').toLowerCase() === selLower);
+      if (match) match.usageCount = (match.usageCount || 0) + 1;
       continue;
     }
+
+    // Check similarity against existing library entries (catches slight variations)
+    const similarExisting = existing.find(e => stepSimilarity(e, step) >= 0.85);
+    if (similarExisting) {
+      similarExisting.usageCount = (similarExisting.usageCount || 0) + 1;
+      // If new selector is more stable (has pi-test-identifier), upgrade it
+      if (sel.includes('pi-test-identifier') && !(similarExisting.stableSelector||'').includes('pi-test-identifier')) {
+        similarExisting.stableSelector = sel;
+        similarExisting.selector = sel;
+      }
+      seenSelectors.add(selLower);
+      continue;
+    }
+
+    // Check similarity against steps we're about to add
+    const similarNew = toAdd.find(e => stepSimilarity(e, step) >= 0.85);
+    if (similarNew) {
+      similarNew.usageCount = (similarNew.usageCount || 0) + 1;
+      seenSelectors.add(selLower);
+      continue;
+    }
+
     seenSelectors.add(selLower);
     // Generate clean name — strip action prefix
     let name = step.description || '';
     name = name.replace(/^(click|type|check|assert|select)\s+/i, '').trim() || sel.slice(0, 50);
     toAdd.push({
-      id: 'lib-' + Math.random().toString(36).slice(2, 10),
       name,
       selector: sel,
       stableSelector: step.stableSelector || sel,
@@ -3757,29 +3865,32 @@ async function extractStepsToLibrary(suitesDir, steps, testName) {
       tags: [],
       usageCount: 1,
       sourceTest: testName,
-      createdAt: new Date().toISOString(),
     });
   }
 
-  if (toAdd.length > 0 || existing.some(e => e.usageCount !== undefined)) {
-    await saveLibrarySteps([...existing, ...toAdd]);
+  // Add new elements to pending review queue (not directly to library)
+  for (const step of toAdd) {
+    await addToPending(suitesDir, step);
+  }
+
+  // Save updated usage counts for existing entries
+  if (existing.some(e => e.usageCount !== undefined)) {
+    await saveLibrarySteps(existing);
   }
 }
 
 // Import steps from all existing tests into library
 async function importStepsFromTests(suitesDir) {
   const allTests = await listAllTests(suitesDir);
-  let imported = 0;
-  let skipped = 0;
+  let queued = 0;
   for (const test of allTests) {
     if (!test.steps || test.steps.length === 0) continue;
-    const before = (await listLibrarySteps(suitesDir)).length;
+    const before = (await listPendingSteps()).length;
     await extractStepsToLibrary(suitesDir, test.steps, test.name);
-    const after = (await listLibrarySteps(suitesDir)).length;
-    imported += after - before;
-    skipped += test.steps.length - (after - before);
+    const after = (await listPendingSteps()).length;
+    queued += after - before;
   }
-  return { imported, skipped, total: imported + skipped };
+  return { queued, message: `${queued} elements added to review queue` };
 }
 
 // Sync existing tests — replace matching steps with library steps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skopix",
-  "version": "2.0.37",
+  "version": "2.0.38",
   "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

@@ -1321,6 +1321,7 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
       <a class="nav-item" data-view="step-library">
         <span class="nav-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="4" rx="1"/><rect x="3" y="10" width="18" height="4" rx="1"/><rect x="3" y="17" width="18" height="4" rx="1"/></svg></span>
         Step library
+        <span id="lib-pending-badge" style="display:none;background:#f59e0b;color:#000;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;margin-left:4px;font-family:var(--mono)"></span>
       </a>
 
 
@@ -1589,6 +1590,23 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
       </div>
 
+      <!-- Pending review section -->
+      <div id="library-pending-section" style="display:none;margin-bottom:16px">
+        <div class="card" style="border-color:rgba(245,158,11,0.3);background:rgba(245,158,11,0.04)">
+          <div class="card-header" style="border-color:rgba(245,158,11,0.2)">
+            <div class="card-title" style="color:#f59e0b">
+              ⏳ Pending review
+              <span id="pending-count-label" style="font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400;margin-left:8px"></span>
+            </div>
+            <div style="display:flex;gap:8px">
+              <button class="btn btn-ghost" style="font-size:11px;padding:4px 10px" onclick="dismissAllPendingUI()">Dismiss all</button>
+              <button class="btn btn-primary" style="font-size:11px;padding:4px 10px;background:#f59e0b;border-color:#f59e0b;color:#000" onclick="approveAllPendingUI()">Add all to library</button>
+            </div>
+          </div>
+          <div id="pending-steps-list" style="padding:0"></div>
+        </div>
+      </div>
+
       <!-- Search + filter -->
       <div style="display:flex;gap:10px;margin-bottom:16px">
         <input class="form-input" id="library-search" type="text" placeholder="Search elements..." oninput="filterLibrarySteps()" style="flex:1">
@@ -2791,6 +2809,7 @@ async function refreshAll() {
   renderConfig();
   renderSuites();
   populateSuiteSelect();
+  checkPendingCount();
 }
 
 function renderStats() {
@@ -5549,8 +5568,122 @@ async function saveOllamaConfig() {
   }
 }
 
-// ── STEP LIBRARY ─────────────────────────────────────────────────────────────
-let libraryStepsCache = [];
+// ── STEP LIBRARY PENDING REVIEW ──────────────────────────────────────────────
+let pendingStepsCache = [];
+
+async function fetchPendingSteps() {
+  try {
+    const res = await fetch(API_BASE + '/api/step-library/pending');
+    if (!res.ok) return [];
+    pendingStepsCache = await res.json();
+    return pendingStepsCache;
+  } catch { return []; }
+}
+
+function updatePendingBadge(count) {
+  const badge = document.getElementById('lib-pending-badge');
+  if (!badge) return;
+  if (count > 0) { badge.textContent = count; badge.style.display = ''; }
+  else { badge.style.display = 'none'; }
+}
+
+function renderPendingSteps(steps) {
+  const section = document.getElementById('library-pending-section');
+  const list = document.getElementById('pending-steps-list');
+  const countLabel = document.getElementById('pending-count-label');
+  if (!section || !list) return;
+
+  if (!steps || steps.length === 0) {
+    section.style.display = 'none';
+    updatePendingBadge(0);
+    return;
+  }
+
+  section.style.display = '';
+  updatePendingBadge(steps.length);
+  if (countLabel) countLabel.textContent = `${steps.length} element${steps.length > 1 ? 's' : ''} waiting`;
+
+  list.innerHTML = steps.map(s => {
+    const sel = s.stableSelector || s.selector || '';
+    const fragile = isSelectorFragile(sel);
+    return `
+    <div style="display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid rgba(245,158,11,0.1)" data-pending-id="${escapeAttr(s.id)}">
+      <div style="flex:1;min-width:0">
+        <div style="font-size:13px;color:var(--text);margin-bottom:3px">${escapeHtml(s.name||'')}</div>
+        <div style="display:flex;align-items:center;gap:6px">
+          ${fragile ? '<span style="color:#f59e0b;font-size:12px" title="Fragile selector">⚠</span>' : ''}
+          <code style="font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:400px">${escapeHtml(sel)}</code>
+        </div>
+        ${s.sourceTest ? `<div style="font-family:var(--mono);font-size:10px;color:var(--muted2);margin-top:2px">from: ${escapeHtml(s.sourceTest)}</div>` : ''}
+      </div>
+      <div style="display:flex;gap:6px;flex-shrink:0">
+        <button class="btn btn-ghost pending-edit-btn" style="padding:4px 10px;font-size:11px" data-id="${escapeAttr(s.id)}">Edit</button>
+        <button class="btn btn-ghost pending-dismiss-btn" style="padding:4px 10px;font-size:11px;color:var(--red)" data-id="${escapeAttr(s.id)}">Dismiss</button>
+        <button class="btn btn-primary pending-approve-btn" style="padding:4px 10px;font-size:11px;background:#f59e0b;border-color:#f59e0b;color:#000" data-id="${escapeAttr(s.id)}">Add</button>
+      </div>
+    </div>`;
+  }).join('');
+}
+
+async function loadLibraryView() {
+  const [steps, pending] = await Promise.all([fetchLibrarySteps(), fetchPendingSteps()]);
+  populateLibraryTagFilter();
+  renderPendingSteps(pending);
+  renderLibrarySteps(steps);
+}
+
+async function approvePendingUI(id) {
+  await fetch(API_BASE + '/api/step-library/pending/' + encodeURIComponent(id) + '/approve', { method: 'POST' });
+  await loadLibraryView();
+}
+
+async function dismissPendingUI(id) {
+  await fetch(API_BASE + '/api/step-library/pending/' + encodeURIComponent(id) + '/dismiss', { method: 'POST' });
+  const pending = await fetchPendingSteps();
+  renderPendingSteps(pending);
+}
+
+async function approveAllPendingUI() {
+  const res = await fetch(API_BASE + '/api/step-library/pending/approve-all', { method: 'POST' });
+  const data = await res.json();
+  showToast(`Added ${data.approved} elements to library`);
+  await loadLibraryView();
+}
+
+async function dismissAllPendingUI() {
+  showConfirm('Dismiss all?', 'Dismiss all pending elements without adding them to the library?', async () => {
+    await fetch(API_BASE + '/api/step-library/pending/dismiss-all', { method: 'POST' });
+    await loadLibraryView();
+  });
+}
+
+// Also check pending count on page load and periodically
+async function checkPendingCount() {
+  const pending = await fetchPendingSteps();
+  updatePendingBadge(pending.length);
+}
+
+// Event delegation for pending buttons
+document.addEventListener('click', (e) => {
+  const approveBtn = e.target.closest('.pending-approve-btn');
+  const dismissBtn = e.target.closest('.pending-dismiss-btn');
+  const editBtn = e.target.closest('.pending-edit-btn');
+  if (approveBtn) approvePendingUI(approveBtn.dataset.id);
+  if (dismissBtn) dismissPendingUI(dismissBtn.dataset.id);
+  if (editBtn) {
+    // Open edit modal pre-filled with pending step data
+    const step = pendingStepsCache.find(s => s.id === editBtn.dataset.id);
+    if (step) {
+      document.getElementById('lib-step-id').value = 'pending:' + step.id;
+      document.getElementById('lib-step-name').value = step.name || '';
+      document.getElementById('lib-step-selector').value = step.stableSelector || step.selector || '';
+      document.getElementById('lib-step-action').value = step.defaultAction || '';
+      document.getElementById('lib-step-tags').value = (step.tags || []).join(', ');
+      document.getElementById('library-step-modal-title').textContent = 'Edit before adding';
+      document.getElementById('library-step-modal').style.display = 'flex';
+    }
+  }
+});
 
 async function fetchLibrarySteps() {
   try {
@@ -5861,7 +5994,9 @@ function closeLibraryStepModal() {
 }
 
 async function saveLibraryStep() {
-  const id = document.getElementById('lib-step-id').value;
+  const rawId = document.getElementById('lib-step-id').value;
+  const isPending = rawId.startsWith('pending:');
+  const id = isPending ? rawId.slice(8) : rawId;
   const name = document.getElementById('lib-step-name').value.trim();
   const selector = document.getElementById('lib-step-selector').value.trim();
   const defaultAction = document.getElementById('lib-step-action').value;
@@ -5871,14 +6006,23 @@ async function saveLibraryStep() {
   if (!selector) { showToast('Selector is required'); return; }
 
   try {
-    const body = { name, selector, stableSelector: selector, defaultAction: defaultAction || null, tags };
-    const url = id ? `${API_BASE}/api/step-library/${encodeURIComponent(id)}` : `${API_BASE}/api/step-library`;
-    const method = id ? 'PUT' : 'POST';
-    const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-    if (!res.ok) throw new Error(await res.text());
+    if (isPending) {
+      // Dismiss pending and add directly to library with edits
+      await fetch(API_BASE + '/api/step-library/pending/' + encodeURIComponent(id) + '/dismiss', { method: 'POST' });
+      const body = { name, selector, stableSelector: selector, defaultAction: defaultAction || null, tags };
+      await fetch(API_BASE + '/api/step-library', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+    } else if (id) {
+      const body = { name, selector, stableSelector: selector, defaultAction: defaultAction || null, tags };
+      const res = await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(id), { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      if (!res.ok) throw new Error(await res.text());
+    } else {
+      const body = { name, selector, stableSelector: selector, defaultAction: defaultAction || null, tags };
+      const res = await fetch(API_BASE + '/api/step-library', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      if (!res.ok) throw new Error(await res.text());
+    }
     closeLibraryStepModal();
     await loadLibraryView();
-    showToast(id ? 'Element updated' : 'Element added to library');
+    showToast(isPending ? 'Element added to library' : id ? 'Element updated' : 'Element added to library');
   } catch (err) { showToast('Error: ' + err.message); }
 }
 
@@ -5896,7 +6040,7 @@ async function importStepsFromTests() {
   try {
     const res = await fetch(API_BASE + '/api/step-library/import', { method: 'POST' });
     const data = await res.json();
-    showToast(`Imported ${data.imported} new steps (${data.skipped} already existed)`);
+    showToast(data.queued > 0 ? `${data.queued} elements added to review queue` : 'No new elements found');
     await loadLibraryView();
   } catch (err) { showToast('Error: ' + err.message); }
   finally { if (btn) { btn.disabled = false; btn.textContent = 'Import from all tests'; } }