skopix 2.0.33 → 2.0.34

package/package.json

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

@@ -1591,15 +1591,9 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
 
       <!-- Search + filter -->
       <div style="display:flex;gap:10px;margin-bottom:16px">
-        <input class="form-input" id="library-search" type="text" placeholder="Search steps..." oninput="filterLibrarySteps()" style="flex:1">
-        <select class="form-select" id="library-filter-action" onchange="filterLibrarySteps()" style="width:140px">
-          <option value="">All actions</option>
-          <option value="click">click</option>
-          <option value="type">type</option>
-          <option value="check">check</option>
-          <option value="assert">assert</option>
-          <option value="select">select</option>
-          <option value="scroll">scroll</option>
+        <input class="form-input" id="library-search" type="text" placeholder="Search elements..." oninput="filterLibrarySteps()" style="flex:1">
+        <select class="form-select" id="library-filter-tag" onchange="filterLibrarySteps()" style="width:140px">
+          <option value="">All tags</option>
         </select>
       </div>
 
@@ -5620,8 +5614,8 @@ function renderLibrarySteps(steps) {
             </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;text-align:right">
-              <button class="btn btn-ghost" style="padding:4px 10px;font-size:11px;margin-right:4px" onclick="editLibraryStep('${escapeAttr(s.id)}')">Edit</button>
-              <button class="btn btn-ghost" style="padding:4px 10px;font-size:11px;color:var(--red)" onclick="deleteLibraryStepUI('${escapeAttr(s.id)}','${escapeAttr(s.name||'')}')">Delete</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>
+              <button class="btn btn-ghost lib-delete-btn" style="padding:4px 10px;font-size:11px;color:var(--red)" data-id="${escapeAttr(s.id)}" data-name="${escapeAttr(s.name||'')}">Delete</button>
             </td>
           </tr>`;
         }).join('')}
@@ -5716,20 +5710,37 @@ async function confirmMergeSteps(ids) {
 
 function filterLibrarySteps() {
   const q = (document.getElementById('library-search')?.value || '').toLowerCase();
-  const action = document.getElementById('library-filter-action')?.value || '';
+  const tag = document.getElementById('library-filter-tag')?.value || '';
   const filtered = libraryStepsCache.filter(s => {
     const matchQ = !q || (s.name||'').toLowerCase().includes(q) || (s.selector||'').toLowerCase().includes(q) || (s.description||'').toLowerCase().includes(q);
-    const matchA = !action || s.action === action;
-    return matchQ && matchA;
+    const matchTag = !tag || (s.tags||[]).includes(tag);
+    return matchQ && matchTag;
   });
   renderLibrarySteps(filtered);
 }
 
+function populateLibraryTagFilter() {
+  const sel = document.getElementById('library-filter-tag');
+  if (!sel) return;
+  const allTags = [...new Set(libraryStepsCache.flatMap(s => s.tags || []))].sort();
+  const current = sel.value;
+  sel.innerHTML = '<option value="">All tags</option>' + allTags.map(t => `<option value="${escapeAttr(t)}" ${t===current?'selected':''}>${escapeHtml(t)}</option>`).join('');
+}
+
 async function loadLibraryView() {
   const steps = await fetchLibrarySteps();
+  populateLibraryTagFilter();
   renderLibrarySteps(steps);
 }
 
+// Event delegation for library table buttons
+document.addEventListener('click', (e) => {
+  const editBtn = e.target.closest('.lib-edit-btn');
+  const deleteBtn = e.target.closest('.lib-delete-btn');
+  if (editBtn) { editLibraryStep(editBtn.dataset.id); }
+  if (deleteBtn) { deleteLibraryStepUI(deleteBtn.dataset.id, deleteBtn.dataset.name); }
+});
+
 function openAddLibraryStep() {
   document.getElementById('lib-step-id').value = '';
   document.getElementById('lib-step-name').value = '';