skopix 2.0.22 → 2.0.24

package/cli/commands/dashboard.js

@@ -1007,6 +1007,8 @@ export async function dashboardCommand(options) {
           const testData = { name, type: 'recorded', url: url || '', steps: steps || [], playwrightJs: playwrightJs || '', playwrightTs: playwrightTs || '', tags: tags || [] };
           const result = await createTest(suitesDir, scope || 'saved', testData);
           if (teamMode && currentUser) { teamMode.db.logAudit({ userId: currentUser.id, action: 'test.created', targetType: 'test', targetId: result.id, metadata: { scope: scope || 'saved', type: 'recorded' } }); }
+          // Auto-extract steps to library in background (non-blocking)
+          extractStepsToLibrary(suitesDir, steps || [], name).catch(() => {});
           sendJSON(res, 200, result);
         } catch (err) { sendJSON(res, 400, { error: err.message }); }
         return;
@@ -1792,6 +1794,43 @@ export async function dashboardCommand(options) {
         return;
       }
 
+      // ─── STEP LIBRARY ──────────────────────────────────────────────────
+      if (pathname === '/api/step-library' && method === 'GET') {
+        sendJSON(res, 200, await listLibrarySteps(suitesDir));
+        return;
+      }
+      if (pathname === '/api/step-library' && method === 'POST') {
+        const data = await readBody(req);
+        const step = await addLibraryStep(suitesDir, data);
+        sendJSON(res, 200, step);
+        return;
+      }
+      if (pathname.match(/^\/api\/step-library\/[^/]+$/) && method === 'PUT') {
+        const id = decodeURIComponent(pathname.split('/')[3]);
+        const data = await readBody(req);
+        const step = await updateLibraryStep(suitesDir, id, data);
+        if (!step) sendJSON(res, 404, { error: 'Not found' });
+        else sendJSON(res, 200, step);
+        return;
+      }
+      if (pathname.match(/^\/api\/step-library\/[^/]+$/) && method === 'DELETE') {
+        const id = decodeURIComponent(pathname.split('/')[3]);
+        await deleteLibraryStep(suitesDir, id);
+        sendJSON(res, 200, { deleted: true });
+        return;
+      }
+      if (pathname === '/api/step-library/import' && method === 'POST') {
+        const data = await readBody(req);
+        const result = await importStepsFromTests(suitesDir);
+        sendJSON(res, 200, result);
+        return;
+      }
+      if (pathname === '/api/step-library/sync' && method === 'POST') {
+        const result = await syncTestsToLibrary(suitesDir);
+        sendJSON(res, 200, result);
+        return;
+      }
+
       // ─── SUITE RUNS ────────────────────────────────────────────────────
       if (pathname === '/api/suite-runs' && method === 'GET') {
         sendJSON(res, 200, await listSuiteRuns(suiteRunsDir, reportsDir));
@@ -3583,3 +3622,167 @@ async function syncIssuesStatus() {
   await saveIssueStore(store);
   return { updated, failed, total: store.issues.length };
 }
+
+// ═══════════════════════════════════════════════════════════════
+// STEP LIBRARY — persistent store of reusable UI interactions
+// ═══════════════════════════════════════════════════════════════
+
+const LIBRARY_FILE = () => path.join(os.homedir(), '.skopix', 'step-library.yaml');
+
+async function listLibrarySteps(suitesDir) {
+  const file = LIBRARY_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 saveLibrarySteps(steps) {
+  const file = LIBRARY_FILE();
+  await fs.ensureDir(path.dirname(file));
+  await fs.writeFile(file, yaml.stringify(steps));
+}
+
+async function addLibraryStep(suitesDir, stepData) {
+  const steps = await listLibrarySteps(suitesDir);
+  const id = 'lib-' + Math.random().toString(36).slice(2, 10);
+  const step = {
+    id,
+    name: stepData.name || stepData.description || 'Unnamed step',
+    action: stepData.action,
+    selector: stepData.stableSelector || stepData.selector || null,
+    stableSelector: stepData.stableSelector || stepData.selector || null,
+    value: stepData.value || null,
+    assertType: stepData.assertType || null,
+    attribute: stepData.attribute || null,
+    description: stepData.description || null,
+    tags: stepData.tags || [],
+    usageCount: 0,
+    createdAt: new Date().toISOString(),
+  };
+  steps.push(step);
+  await saveLibrarySteps(steps);
+  return step;
+}
+
+async function updateLibraryStep(suitesDir, id, data) {
+  const steps = await listLibrarySteps(suitesDir);
+  const idx = steps.findIndex(s => s.id === id);
+  if (idx === -1) return null;
+  steps[idx] = { ...steps[idx], ...data, id };
+  await saveLibrarySteps(steps);
+  return steps[idx];
+}
+
+async function deleteLibraryStep(suitesDir, id) {
+  const steps = await listLibrarySteps(suitesDir);
+  const filtered = steps.filter(s => s.id !== id);
+  await saveLibrarySteps(filtered);
+}
+
+// Similarity check — returns 0-1 score
+function stepSimilarity(a, b) {
+  if (a.action !== b.action) return 0;
+  const selA = (a.stableSelector || a.selector || '').toLowerCase();
+  const selB = (b.stableSelector || b.selector || '').toLowerCase();
+  if (selA && selB) {
+    if (selA === selB) return 1;
+    // Check if one contains the other
+    if (selA.includes(selB) || selB.includes(selA)) return 0.85;
+    // Check shared tokens
+    const tokA = selA.split(/[\s>+~.,#\[\]()=]/).filter(Boolean);
+    const tokB = selB.split(/[\s>+~.,#\[\]()=]/).filter(Boolean);
+    const shared = tokA.filter(t => tokB.includes(t) && t.length > 2);
+    if (shared.length > 0) return Math.min(0.8, shared.length / Math.max(tokA.length, tokB.length));
+  }
+  const descA = (a.description || '').toLowerCase();
+  const descB = (b.description || '').toLowerCase();
+  if (descA && descB && descA === descB) return 0.9;
+  return 0;
+}
+
+// Extract unique steps from a test and add to library (skip duplicates)
+async function extractStepsToLibrary(suitesDir, steps, testName) {
+  if (!steps || steps.length === 0) return;
+  const existing = await listLibrarySteps(suitesDir);
+  const toAdd = [];
+
+  for (const step of steps) {
+    if (!step.action || step.action === 'navigate') continue;
+    // Skip steps with no selector (e.g. scroll)
+    const sel = step.stableSelector || step.selector;
+    if (!sel && step.action !== 'type') continue;
+    // Check if similar step already exists
+    const similar = existing.find(e => stepSimilarity(e, step) >= 0.9);
+    if (similar) {
+      // Increment usage count
+      similar.usageCount = (similar.usageCount || 0) + 1;
+      continue;
+    }
+    // New unique step
+    toAdd.push({
+      id: 'lib-' + Math.random().toString(36).slice(2, 10),
+      name: step.description || (step.action + ' ' + (sel || '').slice(0, 40)),
+      action: step.action,
+      selector: sel || null,
+      stableSelector: step.stableSelector || sel || null,
+      value: step.value || null,
+      assertType: step.assertType || null,
+      attribute: step.attribute || null,
+      description: step.description || null,
+      tags: [],
+      usageCount: 1,
+      sourceTest: testName,
+      createdAt: new Date().toISOString(),
+    });
+  }
+
+  if (toAdd.length > 0 || existing.some(e => e.usageCount !== undefined)) {
+    await saveLibrarySteps([...existing, ...toAdd]);
+  }
+}
+
+// Import steps from all existing tests into library
+async function importStepsFromTests(suitesDir) {
+  const allTests = await listAllTests(suitesDir);
+  let imported = 0;
+  let skipped = 0;
+  for (const test of allTests) {
+    if (!test.steps || test.steps.length === 0) continue;
+    const before = (await listLibrarySteps(suitesDir)).length;
+    await extractStepsToLibrary(suitesDir, test.steps, test.name);
+    const after = (await listLibrarySteps(suitesDir)).length;
+    imported += after - before;
+    skipped += test.steps.length - (after - before);
+  }
+  return { imported, skipped, total: imported + skipped };
+}
+
+// Sync existing tests — replace matching steps with library steps
+async function syncTestsToLibrary(suitesDir) {
+  const allTests = await listAllTests(suitesDir);
+  const library = await listLibrarySteps(suitesDir);
+  let synced = 0;
+  let updated = 0;
+
+  for (const test of allTests) {
+    if (!test.steps || test.steps.length === 0) continue;
+    let testUpdated = false;
+    const newSteps = test.steps.map(step => {
+      const match = library.find(l => stepSimilarity(l, step) >= 0.95);
+      if (match && match.stableSelector && match.stableSelector !== step.stableSelector) {
+        testUpdated = true;
+        return { ...step, stableSelector: match.stableSelector, selector: match.selector || step.selector, libraryId: match.id };
+      }
+      return step;
+    });
+    if (testUpdated) {
+      await updateTest(suitesDir, test.scope, test.id, { ...test, steps: newSteps });
+      updated++;
+    }
+    synced++;
+  }
+  return { synced, updated };
+}

package/package.json

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

@@ -1318,6 +1318,10 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         <span class="nav-icon"><svg viewBox="0 0 24 24"><polyline points="3 12 8 7 13 12 18 7 21 10"/><path d="M3 17l4-4 4 4 4-4 4 4"/></svg></span>
         Suite runs
       </a>
+      <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
+      </a>
 
 
       <!-- Team section - shown only to admins in team mode -->
@@ -1554,6 +1558,94 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
       </div>
     </div>
 
+    <!-- STEP LIBRARY -->
+    <div class="view" id="view-step-library">
+      <div class="topbar">
+        <div>
+          <h1>Step library</h1>
+          <div class="topbar-sub">Reusable UI interactions — built up from your recorded tests</div>
+        </div>
+        <div style="display:flex;gap:8px">
+          <button class="btn btn-ghost" onclick="importStepsFromTests()" id="btn-import-steps">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+            Import from all tests
+          </button>
+          <button class="btn btn-ghost" onclick="syncTestsToLibrary()" id="btn-sync-tests">
+            <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-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
+          </button>
+        </div>
+      </div>
+
+      <!-- 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>
+        </select>
+      </div>
+
+      <div class="card">
+        <div class="card-body" style="padding:0">
+          <div id="library-steps-container"><!-- populated --></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ADD/EDIT LIBRARY STEP MODAL -->
+    <div class="modal-overlay" id="library-step-modal" style="display:none" onclick="if(event.target===this)closeLibraryStepModal()">
+      <div class="modal" style="max-width:560px;width:100%">
+        <div class="modal-header">
+          <div class="modal-title" id="library-step-modal-title">Add step to library</div>
+          <button class="modal-close" onclick="closeLibraryStepModal()">✕</button>
+        </div>
+        <div class="modal-body" style="display:flex;flex-direction:column;gap:14px">
+          <input type="hidden" id="lib-step-id">
+          <div class="form-field">
+            <label class="form-label">Name</label>
+            <input class="form-input" id="lib-step-name" type="text" placeholder="e.g. Click chart settings icon">
+          </div>
+          <div class="form-field">
+            <label class="form-label">Action</label>
+            <select class="form-select" id="lib-step-action">
+              <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>
+            </select>
+          </div>
+          <div class="form-field">
+            <label class="form-label">Selector</label>
+            <input class="form-input" id="lib-step-selector" type="text" placeholder="CSS selector" style="font-family:var(--mono)">
+          </div>
+          <div class="form-field" id="lib-step-value-row">
+            <label class="form-label">Value (for type/assert)</label>
+            <input class="form-input" id="lib-step-value" type="text" placeholder="Value to type or assert">
+          </div>
+          <div class="form-field">
+            <label class="form-label">Tags (comma separated)</label>
+            <input class="form-input" id="lib-step-tags" type="text" placeholder="login, chart, navigation">
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-ghost" onclick="closeLibraryStepModal()">Cancel</button>
+          <button class="btn btn-primary" onclick="saveLibraryStep()">Save</button>
+        </div>
+      </div>
+    </div>
+
     <!-- SUITES LIST -->
     <div class="view" id="view-suites">
       <div class="topbar">
@@ -4570,6 +4662,9 @@ switchView = function(name) {
     clearInterval(agentsPollInterval);
     agentsPollInterval = null;
   }
+  if (name === 'step-library') {
+    loadLibraryView();
+  }
   if (name === 'users') {
     fetchUsersAndInvites();
   }
@@ -5294,6 +5389,290 @@ async function saveOllamaConfig() {
   }
 }
 
+// ── STEP LIBRARY ─────────────────────────────────────────────────────────────
+let libraryStepsCache = [];
+
+async function fetchLibrarySteps() {
+  try {
+    const res = await fetch(API_BASE + '/api/step-library');
+    if (!res.ok) return [];
+    libraryStepsCache = await res.json();
+    return libraryStepsCache;
+  } catch { return []; }
+}
+
+// Detect fragile/dynamic selectors
+function isSelectorFragile(sel) {
+  if (!sel) return false;
+  if (/nth-of-type|nth-child/.test(sel)) return true;  // positional
+  if (/#[a-z]+-\d+/.test(sel)) return true;             // dynamic IDs like #cell-446
+  if (/\[\w+=["'][^"']*\d{3,}[^"']*["']\]/.test(sel)) return true; // long numeric attr values
+  return false;
+}
+
+function getSelectorWarning(sel) {
+  if (!sel) return null;
+  if (/nth-of-type|nth-child/.test(sel)) return 'Positional selector — may break if page layout changes';
+  if (/#[a-z]+-\d+/.test(sel)) return 'Dynamic ID — this number changes between runs';
+  if (/\[\w+=["'][^"']*\d{3,}[^"']*["']\]/.test(sel)) return 'Contains a dynamic numeric value';
+  return null;
+}
+
+function renderLibrarySteps(steps) {
+  const container = document.getElementById('library-steps-container');
+  if (!container) return;
+  if (!steps || steps.length === 0) {
+    container.innerHTML = `<div class="empty" style="padding:60px 32px">
+      <div class="empty-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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></div>
+      <div class="empty-title">No steps yet</div>
+      <div class="empty-desc">Steps are added automatically when you save recorded tests, or click "Import from all tests" to populate from your existing tests.</div>
+      <button class="btn btn-primary" onclick="importStepsFromTests()">Import from all tests</button>
+    </div>`;
+    return;
+  }
+
+  const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
+  const fragileCount = steps.filter(s => isSelectorFragile(s.stableSelector || s.selector)).length;
+
+  container.innerHTML = `
+    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface2)">
+      <div style="display:flex;align-items:center;gap:12px">
+        <label style="display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer">
+          <input type="checkbox" id="lib-select-all" onchange="toggleSelectAllSteps(this.checked)" style="width:14px;height:14px">
+          Select all
+        </label>
+        <button class="btn btn-ghost" id="btn-merge-steps" style="display:none;padding:4px 10px;font-size:11px" onclick="openMergeSteps()">
+          Merge selected
+        </button>
+        <button class="btn btn-ghost" id="btn-delete-selected" style="display:none;padding:4px 10px;font-size:11px;color:var(--red)" onclick="deleteSelectedSteps()">
+          Delete selected
+        </button>
+      </div>
+      ${fragileCount > 0 ? `<div style="font-family:var(--mono);font-size:11px;color:#f59e0b">⚠ ${fragileCount} step${fragileCount>1?'s':''} with fragile selectors</div>` : '<div style="font-family:var(--mono);font-size:11px;color:#34d399">✓ All selectors look stable</div>'}
+    </div>
+    <table style="width:100%;border-collapse:collapse">
+      <thead><tr style="font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em">
+        <th style="padding:10px 16px;width:32px;border-bottom:1px solid var(--border)"></th>
+        <th style="padding:10px 20px;text-align:left;border-bottom:1px solid var(--border)">NAME</th>
+        <th style="padding:10px 16px;text-align:left;border-bottom:1px solid var(--border)">ACTION</th>
+        <th style="padding:10px 16px;text-align:left;border-bottom:1px solid var(--border)">SELECTOR</th>
+        <th style="padding:10px 16px;text-align:left;border-bottom:1px solid var(--border)">USES</th>
+        <th style="padding:10px 16px;text-align:right;border-bottom:1px solid var(--border)"></th>
+      </tr></thead>
+      <tbody>
+        ${steps.map(s => {
+          const sel = s.stableSelector || s.selector || '';
+          const fragile = isSelectorFragile(sel);
+          const warning = getSelectorWarning(sel);
+          return `
+          <tr data-step-id="${escapeAttr(s.id)}" style="border-bottom:1px solid var(--border);transition:background 0.15s${fragile?';background:rgba(245,158,11,0.04)':''}" onmouseover="this.style.background='var(--surface2)'" onmouseout="this.style.background='${fragile?'rgba(245,158,11,0.04)':''}'">
+            <td style="padding:12px 16px">
+              <input type="checkbox" class="lib-step-checkbox" data-id="${escapeAttr(s.id)}" onchange="onLibStepCheck()" style="width:14px;height:14px">
+            </td>
+            <td style="padding:12px 20px">
+              <div style="font-size:13px;color:var(--text)">${escapeHtml(s.name || s.description || '')}</div>
+              ${s.tags && s.tags.length ? `<div style="margin-top:4px;display:flex;gap:4px">${s.tags.map(t=>`<span style="font-family:var(--mono);font-size:10px;padding:2px 6px;background:var(--surface2);border-radius:4px;color:var(--muted)">${escapeHtml(t)}</span>`).join('')}</div>` : ''}
+            </td>
+            <td style="padding:12px 16px"><span style="font-family:var(--mono);font-size:11px;color:${actionColors[s.action]||'var(--muted)'}">${s.action||''}</span></td>
+            <td style="padding:12px 16px;max-width:280px">
+              <div style="display:flex;align-items:center;gap:6px">
+                ${fragile ? `<span title="${escapeAttr(warning||'')}" style="color:#f59e0b;font-size:14px;cursor:help;flex-shrink:0">⚠</span>` : ''}
+                <code style="font-size:11px;color:${fragile?'#f59e0b':'var(--muted)'};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block">${escapeHtml(sel || '—')}</code>
+              </div>
+            </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>
+            </td>
+          </tr>`;
+        }).join('')}
+      </tbody>
+    </table>`;
+}
+
+function onLibStepCheck() {
+  const checked = document.querySelectorAll('.lib-step-checkbox:checked');
+  const mergeBtn = document.getElementById('btn-merge-steps');
+  const deleteBtn = document.getElementById('btn-delete-selected');
+  if (mergeBtn) mergeBtn.style.display = checked.length >= 2 ? '' : 'none';
+  if (deleteBtn) deleteBtn.style.display = checked.length >= 1 ? '' : 'none';
+}
+
+function toggleSelectAllSteps(checked) {
+  document.querySelectorAll('.lib-step-checkbox').forEach(cb => cb.checked = checked);
+  onLibStepCheck();
+}
+
+function getSelectedStepIds() {
+  return Array.from(document.querySelectorAll('.lib-step-checkbox:checked')).map(cb => cb.dataset.id);
+}
+
+async function deleteSelectedSteps() {
+  const ids = getSelectedStepIds();
+  if (!ids.length) return;
+  showConfirm('Delete steps?', `Delete ${ids.length} selected step${ids.length>1?'s':''}?`, async () => {
+    for (const id of ids) {
+      await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(id), { method: 'DELETE' });
+    }
+    showToast(`Deleted ${ids.length} steps`);
+    await loadLibraryView();
+  });
+}
+
+function openMergeSteps() {
+  const ids = getSelectedStepIds();
+  if (ids.length < 2) return;
+  const selected = ids.map(id => libraryStepsCache.find(s => s.id === id)).filter(Boolean);
+
+  // Use the confirm overlay but inject HTML into desc
+  const descEl = document.getElementById('confirm-desc');
+  if (descEl) {
+    descEl.innerHTML = `
+      <div style="font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:16px">
+        Select which step to keep. The others will be deleted.
+      </div>
+      <div style="display:flex;flex-direction:column;gap:8px;text-align:left">
+        ${selected.map((s, i) => `
+          <label style="display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);cursor:pointer">
+            <input type="radio" name="merge-canonical" value="${escapeAttr(s.id)}" ${i===0?'checked':''} style="margin-top:3px;flex-shrink:0">
+            <div>
+              <div style="font-size:13px;color:var(--text);margin-bottom:4px">${escapeHtml(s.name||'')}</div>
+              <code style="font-size:11px;color:var(--muted);word-break:break-all">${escapeHtml(s.stableSelector||s.selector||'')}</code>
+              <span style="font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:8px">${s.usageCount||0} uses</span>
+            </div>
+          </label>`).join('')}
+      </div>`;
+  }
+  document.getElementById('confirm-title').textContent = `Merge ${selected.length} steps`;
+
+  // Override the confirm button
+  const actions = document.querySelector('.confirm-actions');
+  if (actions) {
+    actions.innerHTML = `
+      <button class="btn btn-ghost" onclick="closeConfirm()">Cancel</button>
+      <button class="btn btn-primary" onclick="confirmMergeSteps(${JSON.stringify(ids)})">Merge</button>`;
+  }
+  document.getElementById('confirm-overlay').classList.add('open');
+}
+
+async function confirmMergeSteps(ids) {
+  const selected = ids.map(id => libraryStepsCache.find(s => s.id === id)).filter(Boolean);
+  const canonicalId = document.querySelector('input[name="merge-canonical"]:checked')?.value;
+  if (!canonicalId) return;
+  const canonical = selected.find(s => s.id === canonicalId);
+  const toDelete = selected.filter(s => s.id !== canonicalId);
+  const totalUses = selected.reduce((sum, s) => sum + (s.usageCount||0), 0);
+  closeConfirm();
+  await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(canonicalId), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ...canonical, usageCount: totalUses })
+  });
+  for (const s of toDelete) {
+    await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(s.id), { method: 'DELETE' });
+  }
+  showToast(`Merged ${selected.length} steps into "${canonical.name}"`);
+  await loadLibraryView();
+}
+
+function filterLibrarySteps() {
+  const q = (document.getElementById('library-search')?.value || '').toLowerCase();
+  const action = document.getElementById('library-filter-action')?.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;
+  });
+  renderLibrarySteps(filtered);
+}
+
+async function loadLibraryView() {
+  const steps = await fetchLibrarySteps();
+  renderLibrarySteps(steps);
+}
+
+function openAddLibraryStep() {
+  document.getElementById('lib-step-id').value = '';
+  document.getElementById('lib-step-name').value = '';
+  document.getElementById('lib-step-action').value = 'click';
+  document.getElementById('lib-step-selector').value = '';
+  document.getElementById('lib-step-value').value = '';
+  document.getElementById('lib-step-tags').value = '';
+  document.getElementById('library-step-modal-title').textContent = 'Add step to library';
+  document.getElementById('library-step-modal').style.display = 'flex';
+}
+
+function editLibraryStep(id) {
+  const step = libraryStepsCache.find(s => s.id === id);
+  if (!step) return;
+  document.getElementById('lib-step-id').value = step.id;
+  document.getElementById('lib-step-name').value = step.name || '';
+  document.getElementById('lib-step-action').value = step.action || 'click';
+  document.getElementById('lib-step-selector').value = step.stableSelector || step.selector || '';
+  document.getElementById('lib-step-value').value = step.value || '';
+  document.getElementById('lib-step-tags').value = (step.tags || []).join(', ');
+  document.getElementById('library-step-modal-title').textContent = 'Edit step';
+  document.getElementById('library-step-modal').style.display = 'flex';
+}
+
+function closeLibraryStepModal() {
+  document.getElementById('library-step-modal').style.display = 'none';
+}
+
+async function saveLibraryStep() {
+  const id = document.getElementById('lib-step-id').value;
+  const name = document.getElementById('lib-step-name').value.trim();
+  const action = document.getElementById('lib-step-action').value;
+  const selector = document.getElementById('lib-step-selector').value.trim();
+  const value = document.getElementById('lib-step-value').value.trim();
+  const tags = (document.getElementById('lib-step-tags').value || '').split(',').map(t=>t.trim()).filter(Boolean);
+
+  if (!name) { showToast('Name is required'); return; }
+
+  try {
+    const body = { name, action, selector, stableSelector: selector, value: value || 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());
+    closeLibraryStepModal();
+    await loadLibraryView();
+    showToast(id ? 'Step updated' : 'Step added to library');
+  } catch (err) { showToast('Error: ' + err.message); }
+}
+
+async function deleteLibraryStepUI(id, name) {
+  showConfirm('Delete step?', `Remove "${name}" from the library?`, async () => {
+    await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(id), { method: 'DELETE' });
+    await loadLibraryView();
+    showToast('Step deleted');
+  });
+}
+
+async function importStepsFromTests() {
+  const btn = document.getElementById('btn-import-steps');
+  if (btn) { btn.disabled = true; btn.textContent = 'Importing...'; }
+  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)`);
+    await loadLibraryView();
+  } catch (err) { showToast('Error: ' + err.message); }
+  finally { if (btn) { btn.disabled = false; btn.textContent = 'Import from all tests'; } }
+}
+
+async function syncTestsToLibrary() {
+  const btn = document.getElementById('btn-sync-tests');
+  if (btn) { btn.disabled = true; btn.textContent = 'Syncing...'; }
+  try {
+    const res = await fetch(API_BASE + '/api/step-library/sync', { method: 'POST' });
+    const data = await res.json();
+    showToast(`Synced ${data.synced} tests — ${data.updated} updated with library selectors`);
+  } catch (err) { showToast('Error: ' + err.message); }
+  finally { if (btn) { btn.disabled = false; btn.textContent = 'Sync tests to library'; } }
+}
+
 // ── SUITE TEST PICKER ────────────────────────────────────────────────────────
 function openSuiteTestPicker() {
   const list = document.getElementById('stp-test-list');