skopix 2.0.77 → 2.0.78

package/cli/commands/dashboard.js

@@ -1999,12 +1999,47 @@ export async function dashboardCommand(options) {
         sendJSON(res, 200, step);
         return;
       }
+      if (pathname === '/api/step-library/recalc-usage' && method === 'POST') {
+        // Recalculate usage counts from actual tests
+        const library = await listLibrarySteps(suitesDir);
+        const allTests = await listAllTests(suitesDir);
+        for (const step of library) {
+          const sel = (step.stableSelector || step.selector || '').toLowerCase();
+          const keyTokens = sel.match(/\.[a-z][a-z0-9_-]+|\[[\w-]+=["'][^"']+["']\]|#[a-z][a-z0-9_-]+/g) || [];
+          step.usageCount = allTests.reduce((count, t) => {
+            return count + (t.steps || []).filter(s => {
+              const sSel = (s.stableSelector||s.selector||'').toLowerCase();
+              if (!sSel) return false;
+              if (sSel === sel) return true;
+              if (keyTokens.some(tok => tok.length > 5 && sSel.includes(tok))) return true;
+              return stepSimilarity({ selector: sSel }, { selector: sel }) >= 0.7;
+            }).length > 0 ? 1 : 0;
+          }, 0);
+        }
+        await saveLibrarySteps(library);
+        sendJSON(res, 200, { recalculated: library.length });
+        return;
+      }
       if (pathname.match(/^\/api\/step-library\/[^/]+$/) && method === 'PUT') {
         const id = decodeURIComponent(pathname.split('/')[3]);
         const data = JSON.parse(await readBody(req));
+        // Get old step to detect selector/name changes
+        const oldLibrary = await listLibrarySteps(suitesDir);
+        const oldStep = oldLibrary.find(s => s.id === id);
         const step = await updateLibraryStep(suitesDir, id, data);
-        if (!step) sendJSON(res, 404, { error: 'Not found' });
-        else sendJSON(res, 200, step);
+        if (!step) { sendJSON(res, 404, { error: 'Not found' }); return; }
+        // Auto-sync tests if selector or name changed
+        if (oldStep) {
+          const oldSel = (oldStep.stableSelector || oldStep.selector || '').toLowerCase();
+          const newSel = data.stableSelector || data.selector || '';
+          const nameChanged = data.name && data.name !== oldStep.name;
+          const selChanged = newSel && newSel.toLowerCase() !== oldSel;
+          if (selChanged || nameChanged) {
+            const allFromSelectors = [oldSel];
+            await syncSelectorsInternal(suitesDir, allFromSelectors, newSel || oldSel, data.name || oldStep.name);
+          }
+        }
+        sendJSON(res, 200, step);
         return;
       }
       if (pathname.match(/^\/api\/step-library\/[^/]+$/) && method === 'DELETE') {
@@ -2021,29 +2056,7 @@ export async function dashboardCommand(options) {
       }
       if (pathname === '/api/step-library/sync-selectors' && method === 'POST') {
         const { fromSelectors, toSelector, toName } = JSON.parse(await readBody(req));
-        const allTests = await listAllTests(suitesDir);
-        let updated = 0;
-        // Build key tokens from all fromSelectors for smart matching
-        const allFromTokens = fromSelectors.flatMap(sel =>
-          (sel.match(/\.[a-z][a-z0-9_-]+|\[[\w-]+=["'][^"']+["']\]|#[a-z][a-z0-9_-]+/g) || []).filter(t => t.length > 5)
-        );
-        for (const test of allTests) {
-          if (!test.steps || !test.steps.length) continue;
-          let changed = false;
-          const newSteps = test.steps.map(step => {
-            const sSel = (step.stableSelector||step.selector||'').toLowerCase();
-            const isMatch = fromSelectors.includes(sSel) ||
-              allFromTokens.some(tok => sSel.includes(tok)) ||
-              fromSelectors.some(fSel => stepSimilarity({ selector: sSel }, { selector: fSel }) >= 0.6);
-            if (isMatch) {
-              changed = true;
-              updated++;
-              return { ...step, stableSelector: toSelector, selector: toSelector, description: toName || step.description };
-            }
-            return step;
-          });
-          if (changed) await updateTest(suitesDir, test.scope, test.id, { ...test, steps: newSteps });
-        }
+        const updated = await syncSelectorsInternal(suitesDir, fromSelectors, toSelector, toName);
         sendJSON(res, 200, { updated });
         return;
       }
@@ -3886,6 +3899,34 @@ async function saveSavedUrls(urls) {
   await fs.ensureDir(path.dirname(file));
   await fs.writeFile(file, yaml.stringify(urls));
 }
+// Internal helper — sync selectors across all tests
+async function syncSelectorsInternal(suitesDir, fromSelectors, toSelector, toName) {
+  const allTests = await listAllTests(suitesDir);
+  let updated = 0;
+  const fromLower = fromSelectors.map(s => s.toLowerCase());
+  const allFromTokens = fromLower.flatMap(sel =>
+    (sel.match(/\.[a-z][a-z0-9_-]+|\[[\w-]+=["'][^"']+["']\]|#[a-z][a-z0-9_-]+/g) || []).filter(t => t.length > 5)
+  );
+  for (const test of allTests) {
+    if (!test.steps || !test.steps.length) continue;
+    let changed = false;
+    const newSteps = test.steps.map(step => {
+      const sSel = (step.stableSelector||step.selector||'').toLowerCase();
+      const isMatch = fromLower.includes(sSel) ||
+        allFromTokens.some(tok => sSel.includes(tok)) ||
+        fromLower.some(fSel => stepSimilarity({ selector: sSel }, { selector: fSel }) >= 0.7);
+      if (isMatch && sSel) {
+        changed = true;
+        updated++;
+        return { ...step, stableSelector: toSelector, selector: toSelector, description: toName || step.description };
+      }
+      return step;
+    });
+    if (changed) await updateTest(suitesDir, test.scope, test.id, { ...test, steps: newSteps });
+  }
+  return updated;
+}
+
 const LIBRARY_FILE = () => path.join(os.homedir(), '.skopix', 'step-library.yaml');
 const LIBRARY_PENDING_FILE = () => path.join(os.homedir(), '.skopix', 'step-library-pending.yaml');
 

package/package.json

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

@@ -6069,7 +6069,12 @@ async function loadLibraryView() {
   renderFolderTree('library-folder-tree', 'library', selectedLibraryFolder);
   renderPendingSteps(pending);
   populateLibraryTagFilter();
-  filterLibrarySteps(); // uses selectedLibraryFolder to filter
+  filterLibrarySteps();
+  // Recalculate usage counts in background
+  fetch(API_BASE + '/api/step-library/recalc-usage', { method: 'POST' })
+    .then(() => fetchLibrarySteps())
+    .then(() => filterLibrarySteps())
+    .catch(() => {});
 }
 
 async function approvePendingUI(id) {
@@ -6525,22 +6530,30 @@ async function saveLibraryStep() {
 
   try {
     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) });
+      closeLibraryStepModal();
+      await loadLibraryView();
+      showToast('Element added to library');
     } 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());
+      const updated = await res.json();
+      closeLibraryStepModal();
+      await loadLibraryView();
+      // Show how many tests were updated
+      const usages = await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(id) + '/usages').then(r => r.json()).catch(() => []);
+      showToast(`Element updated — ${usages.length} test${usages.length !== 1 ? 's' : ''} synced`);
     } 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('Element added to library');
     }
-    closeLibraryStepModal();
-    await loadLibraryView();
-    showToast(isPending ? 'Element added to library' : id ? 'Element updated' : 'Element added to library');
   } catch (err) { showToast('Error: ' + err.message); }
 }