skopix 2.0.64 → 2.0.66

package/cli/commands/dashboard.js

@@ -1843,6 +1843,19 @@ export async function dashboardCommand(options) {
       }
 
       // ─── STEP LIBRARY ──────────────────────────────────────────────────
+      if (pathname.match(/^\/api\/step-library\/[^/]+\/usages$/) && method === 'GET') {
+        const id = decodeURIComponent(pathname.split('/')[3]);
+        const library = await listLibrarySteps(suitesDir);
+        const step = library.find(s => s.id === id);
+        if (!step) { sendJSON(res, 404, { error: 'Not found' }); return; }
+        const sel = (step.stableSelector || step.selector || '').toLowerCase();
+        const allTests = await listAllTests(suitesDir);
+        const usages = allTests
+          .filter(t => t.steps && t.steps.some(s => (s.stableSelector||s.selector||'').toLowerCase() === sel))
+          .map(t => ({ id: t.id, name: t.name, scope: t.scope }));
+        sendJSON(res, 200, usages);
+        return;
+      }
       if (pathname === '/api/step-library' && method === 'GET') {
         sendJSON(res, 200, await listLibrarySteps(suitesDir));
         return;
@@ -3998,6 +4011,17 @@ async function startStepTester(testerId, url, selector, mode, steps) {
         // 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 = [

package/package.json

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

@@ -1825,6 +1825,15 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
       </div>
     </div>
 
+    <!-- USAGES POPOVER -->
+    <div id="lib-usages-popover" style="display:none;position:fixed;z-index:9999;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0;min-width:220px;max-width:320px;box-shadow:0 8px 32px rgba(0,0,0,0.4)">
+      <div style="padding:10px 14px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em;display:flex;justify-content:space-between;align-items:center">
+        <span>USED IN TESTS</span>
+        <span style="cursor:pointer;color:var(--muted)" onclick="closeUsagesPopover()">✕</span>
+      </div>
+      <div id="lib-usages-list" style="max-height:240px;overflow-y:auto;padding:6px 0"></div>
+    </div>
+
     <div class="view" id="view-suites">
       <div class="topbar">
         <div>
@@ -5787,7 +5796,11 @@ function renderLibrarySteps(steps) {
                 ${s.defaultAction||'—'}
               </span>
             </td>
-            <td style="padding:12px 16px;font-family:var(--mono);font-size:12px;color:var(--muted)">${s.usageCount||0}</td>
+            <td style="padding:12px 16px;font-family:var(--mono);font-size:12px">
+              ${(s.usageCount||0) > 0
+                ? `<span class="lib-uses-btn" data-id="${escapeAttr(s.id)}" style="color:#22d3ee;cursor:pointer;text-decoration:underline;text-underline-offset:2px">${s.usageCount||0}</span>`
+                : `<span style="color:var(--muted2)">0</span>`}
+            </td>
             <td style="padding:12px 16px;text-align:right">
               <button class="btn btn-ghost lib-test-btn" style="padding:4px 10px;font-size:11px;margin-right:4px;color:#f59e0b;border-color:rgba(245,158,11,0.3)" data-id="${escapeAttr(s.id)}" data-selector="${escapeAttr(sel)}">Test</button>
               <button class="btn btn-ghost lib-edit-btn" style="padding:4px 10px;font-size:11px;margin-right:4px" data-id="${escapeAttr(s.id)}">Edit</button>
@@ -5907,7 +5920,51 @@ function populateLibraryTagFilter() {
   sel.onchange = prev;
 }
 
-// ── STEP TESTER ──────────────────────────────────────────────────────────────
+// ── USAGES POPOVER ───────────────────────────────────────────────────────────
+async function showUsagesPopover(id, anchorEl) {
+  const popover = document.getElementById('lib-usages-popover');
+  const list = document.getElementById('lib-usages-list');
+  list.innerHTML = '<div style="padding:12px 14px;font-family:var(--mono);font-size:11px;color:var(--muted)">Loading...</div>';
+  popover.style.display = 'block';
+
+  // Position near the clicked element
+  const rect = anchorEl.getBoundingClientRect();
+  const top = rect.bottom + 8;
+  const left = Math.min(rect.left, window.innerWidth - 340);
+  popover.style.top = top + 'px';
+  popover.style.left = left + 'px';
+
+  try {
+    const res = await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(id) + '/usages');
+    const usages = await res.json();
+    if (!usages.length) {
+      list.innerHTML = '<div style="padding:12px 14px;font-family:var(--mono);font-size:11px;color:var(--muted)">No tests found using this selector</div>';
+      return;
+    }
+    list.innerHTML = usages.map(u => `
+      <div style="padding:8px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);cursor:pointer"
+        onmouseover="this.style.background='var(--surface2)'" onmouseout="this.style.background=''"
+        onclick="closeUsagesPopover();openTestEditorById('${escapeAttr(u.scope)}','${escapeAttr(u.id)}')">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;color:var(--muted)"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+        <span style="font-size:12px;color:var(--text)">${escapeHtml(u.name)}</span>
+        <span style="font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:auto">${escapeHtml(u.scope)}</span>
+      </div>`).join('');
+  } catch {
+    list.innerHTML = '<div style="padding:12px 14px;color:var(--red);font-size:12px">Failed to load</div>';
+  }
+}
+
+function closeUsagesPopover() {
+  document.getElementById('lib-usages-popover').style.display = 'none';
+}
+
+// Close popover when clicking outside
+document.addEventListener('click', (e) => {
+  const popover = document.getElementById('lib-usages-popover');
+  if (popover && !popover.contains(e.target) && !e.target.closest('.lib-uses-btn')) {
+    closeUsagesPopover();
+  }
+});
 let stepTesterState = { testerId: null };
 
 function openLibraryStepTester(id, selector) {
@@ -5969,9 +6026,11 @@ document.addEventListener('click', (e) => {
   const testBtn = e.target.closest('.lib-test-btn');
   const editBtn = e.target.closest('.lib-edit-btn');
   const deleteBtn = e.target.closest('.lib-delete-btn');
+  const usesBtn = e.target.closest('.lib-uses-btn');
   if (testBtn) { openLibraryStepTester(testBtn.dataset.id, testBtn.dataset.selector); }
   if (editBtn) { editLibraryStep(editBtn.dataset.id); }
   if (deleteBtn) { deleteLibraryStepUI(deleteBtn.dataset.id, deleteBtn.dataset.name); }
+  if (usesBtn) { showUsagesPopover(usesBtn.dataset.id, usesBtn); }
 });
 
 function openAddLibraryStep() {