skopix 2.0.24 → 2.0.26

package/package.json

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

@@ -1516,6 +1516,10 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
           <div class="topbar-sub">Every test across every suite — filter, search, and manage them in one place</div>
         </div>
         <div style="display:flex;gap:8px">
+          <button class="btn btn-ghost" onclick="openTestBuilder()">
+            <svg width="14" height="14" 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"/><path d="M3 17h8M16 17h5M19 14v6"/></svg>
+            Build from library
+          </button>
           <button class="btn btn-primary" onclick="openRecorder()" style="background:#dc2626;border-color:#dc2626">
             <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>
             Record test
@@ -1646,6 +1650,67 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
       </div>
     </div>
 
+    <!-- STEP LIBRARY modal is above -->
+
+    <!-- TEST BUILDER -->
+    <div class="view" id="view-test-builder" style="display:none;flex-direction:column;height:100%">
+      <div class="topbar" style="flex-shrink:0">
+        <div style="display:flex;align-items:center;gap:12px">
+          <button class="btn btn-ghost" onclick="closeTestBuilder()" style="padding:6px 10px">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+            Back
+          </button>
+          <div>
+            <h1 style="margin:0">Test builder</h1>
+            <div class="topbar-sub">Build a test from your step library — no recording needed</div>
+          </div>
+        </div>
+        <div style="display:flex;gap:8px;align-items:center">
+          <input class="form-input" id="builder-test-name" type="text" placeholder="Test name..." style="width:220px">
+          <button class="btn btn-primary" onclick="saveBuiltTest()">Save test</button>
+        </div>
+      </div>
+
+      <div style="display:grid;grid-template-columns:380px 1fr;gap:0;flex:1;overflow:hidden;border-top:1px solid var(--border)">
+
+        <!-- LEFT: Step Library panel -->
+        <div style="border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden">
+          <div style="padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0">
+            <div style="font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em;margin-bottom:8px">STEP LIBRARY</div>
+            <input class="form-input" id="builder-library-search" type="text" placeholder="Search steps..." oninput="filterBuilderLibrary()" style="width:100%">
+            <div style="display:flex;gap:6px;margin-top:8px;flex-wrap:wrap">
+              <button class="btn btn-ghost builder-action-filter active" data-action="" onclick="setBuilderActionFilter(this,'')" style="padding:3px 8px;font-size:11px">All</button>
+              <button class="btn btn-ghost builder-action-filter" data-action="click" onclick="setBuilderActionFilter(this,'click')" style="padding:3px 8px;font-size:11px;color:#22d3ee">click</button>
+              <button class="btn btn-ghost builder-action-filter" data-action="type" onclick="setBuilderActionFilter(this,'type')" style="padding:3px 8px;font-size:11px;color:#a78bfa">type</button>
+              <button class="btn btn-ghost builder-action-filter" data-action="check" onclick="setBuilderActionFilter(this,'check')" style="padding:3px 8px;font-size:11px;color:#34d399">check</button>
+              <button class="btn btn-ghost builder-action-filter" data-action="assert" onclick="setBuilderActionFilter(this,'assert')" style="padding:3px 8px;font-size:11px;color:#fb923c">assert</button>
+            </div>
+          </div>
+          <div id="builder-library-list" style="overflow-y:auto;flex:1;padding:8px 0"></div>
+        </div>
+
+        <!-- RIGHT: Test steps being built -->
+        <div style="display:flex;flex-direction:column;overflow:hidden">
+          <div style="padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between">
+            <div>
+              <div style="font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em">TEST STEPS</div>
+              <div style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px" id="builder-step-count">0 steps — click steps from the library to add them</div>
+            </div>
+            <div style="display:flex;gap:8px">
+              <input class="form-input" id="builder-url" type="text" placeholder="Start URL (optional)" style="width:260px;font-size:12px">
+              <button class="btn btn-ghost" style="font-size:11px;padding:4px 10px" onclick="addBuilderStep()">+ Custom step</button>
+            </div>
+          </div>
+          <div id="builder-steps-list" style="overflow-y:auto;flex:1;padding:16px 20px">
+            <div id="builder-empty" style="text-align:center;padding:60px 20px;color:var(--muted);font-family:var(--mono);font-size:13px">
+              ← Click steps from the library to add them here
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
     <!-- SUITES LIST -->
     <div class="view" id="view-suites">
       <div class="topbar">
@@ -2721,12 +2786,17 @@ function switchView(name) {
     console.warn('View not found:', name);
     return;
   }
+  // Close test builder if open
+  const builder = document.getElementById('view-test-builder');
+  if (builder) builder.style.display = 'none';
   document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
   document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
   target.classList.add('active');
   document.querySelectorAll(`[data-view="${name}"]`).forEach(n => n.classList.add('active'));
   window.scrollTo({ top: 0, behavior: 'smooth' });
+  currentView = name;
 }
+let currentView = 'dashboard';
 
 document.querySelectorAll('.nav-item').forEach(item => {
   item.addEventListener('click', (e) => {
@@ -5673,6 +5743,200 @@ async function syncTestsToLibrary() {
   finally { if (btn) { btn.disabled = false; btn.textContent = 'Sync tests to library'; } }
 }
 
+// ── TEST BUILDER ─────────────────────────────────────────────────────────────
+let builderSteps = [];
+let builderActionFilter = '';
+let previousView = 'all-tests';
+
+function openTestBuilder() {
+  previousView = currentView || 'all-tests';
+  builderSteps = [];
+  document.getElementById('builder-test-name').value = '';
+  document.getElementById('builder-url').value = '';
+  // Show builder view
+  document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
+  const bv = document.getElementById('view-test-builder');
+  bv.style.display = 'flex';
+  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+  renderBuilderSteps();
+  // Load library if not cached
+  if (libraryStepsCache.length === 0) {
+    fetchLibrarySteps().then(() => renderBuilderLibrary());
+  } else {
+    renderBuilderLibrary();
+  }
+}
+
+function closeTestBuilder() {
+  document.getElementById('view-test-builder').style.display = 'none';
+  switchView(previousView);
+}
+
+function setBuilderActionFilter(btn, action) {
+  builderActionFilter = action;
+  document.querySelectorAll('.builder-action-filter').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  renderBuilderLibrary();
+}
+
+function renderBuilderLibrary() {
+  const container = document.getElementById('builder-library-list');
+  if (!container) return;
+  const q = (document.getElementById('builder-library-search')?.value || '').toLowerCase();
+  const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
+
+  let steps = libraryStepsCache;
+  if (builderActionFilter) steps = steps.filter(s => s.action === builderActionFilter);
+  if (q) steps = steps.filter(s => (s.name||'').toLowerCase().includes(q) || (s.selector||'').toLowerCase().includes(q));
+
+  if (steps.length === 0) {
+    container.innerHTML = `<div style="padding:24px 16px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:12px">No steps match</div>`;
+    return;
+  }
+
+  container.innerHTML = steps.map(s => `
+    <div onclick="addBuilderStepFromLibrary('${escapeAttr(s.id)}')"
+      style="padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background 0.1s"
+      onmouseover="this.style.background='var(--surface2)'" onmouseout="this.style.background=''">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:3px">
+        <span style="font-family:var(--mono);font-size:10px;color:${actionColors[s.action]||'var(--muted)'};min-width:40px">${s.action||''}</span>
+        <span style="font-size:12px;color:var(--text)">${escapeHtml(s.name||s.description||'')}</span>
+      </div>
+      <code style="font-size:10px;color:var(--muted2);margin-left:48px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(s.stableSelector||s.selector||'')}</code>
+    </div>`).join('');
+}
+
+function filterBuilderLibrary() {
+  renderBuilderLibrary();
+}
+
+function addBuilderStepFromLibrary(id) {
+  const libStep = libraryStepsCache.find(s => s.id === id);
+  if (!libStep) return;
+  const step = {
+    id: 'bs-' + Math.random().toString(36).slice(2, 8),
+    action: libStep.action,
+    stableSelector: libStep.stableSelector || libStep.selector,
+    selector: libStep.selector || libStep.stableSelector,
+    value: libStep.value || null,
+    assertType: libStep.assertType || null,
+    attribute: libStep.attribute || null,
+    description: libStep.name || libStep.description,
+    libraryId: libStep.id,
+    timestamp: Date.now(),
+  };
+  builderSteps.push(step);
+  renderBuilderSteps();
+}
+
+function addBuilderStep() {
+  const step = {
+    id: 'bs-' + Math.random().toString(36).slice(2, 8),
+    action: 'click',
+    stableSelector: '',
+    selector: '',
+    value: null,
+    description: 'Custom step',
+    timestamp: Date.now(),
+  };
+  builderSteps.push(step);
+  renderBuilderSteps();
+}
+
+function removeBuilderStep(id) {
+  builderSteps = builderSteps.filter(s => s.id !== id);
+  renderBuilderSteps();
+}
+
+function moveBuilderStep(id, dir) {
+  const idx = builderSteps.findIndex(s => s.id === id);
+  if (idx === -1) return;
+  const newIdx = idx + dir;
+  if (newIdx < 0 || newIdx >= builderSteps.length) return;
+  const tmp = builderSteps[idx];
+  builderSteps[idx] = builderSteps[newIdx];
+  builderSteps[newIdx] = tmp;
+  renderBuilderSteps();
+}
+
+function updateBuilderStep(id, field, value) {
+  const step = builderSteps.find(s => s.id === id);
+  if (step) step[field] = value;
+}
+
+function renderBuilderSteps() {
+  const container = document.getElementById('builder-steps-list');
+  const countEl = document.getElementById('builder-step-count');
+  if (!container) return;
+
+  if (countEl) countEl.textContent = builderSteps.length === 0
+    ? '0 steps — click steps from the library to add them'
+    : `${builderSteps.length} step${builderSteps.length > 1 ? 's' : ''}`;
+
+  if (builderSteps.length === 0) {
+    container.innerHTML = `<div id="builder-empty" style="text-align:center;padding:60px 20px;color:var(--muted);font-family:var(--mono);font-size:13px">← Click steps from the library to add them here</div>`;
+    return;
+  }
+
+  const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
+
+  container.innerHTML = builderSteps.map((s, i) => `
+    <div style="display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);align-items:flex-start">
+      <div style="font-family:var(--mono);font-size:11px;color:var(--muted2);min-width:28px;padding-top:8px;text-align:right">${String(i+1).padStart(2,'0')}</div>
+      <div style="flex:1;display:flex;flex-direction:column;gap:6px">
+        <div style="display:flex;gap:8px;align-items:center">
+          <select style="font-family:var(--mono);font-size:11px;padding:4px 6px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:${actionColors[s.action]||'var(--text)'}" onchange="updateBuilderStep('${s.id}','action',this.value);renderBuilderSteps()">
+            ${['click','type','check','assert','select','scroll','navigate'].map(a=>`<option value="${a}" ${s.action===a?'selected':''}>${a}</option>`).join('')}
+          </select>
+          <input type="text" value="${escapeAttr(s.description||'')}" placeholder="Description..." style="flex:1;font-size:12px;padding:4px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text)" onchange="updateBuilderStep('${s.id}','description',this.value)">
+        </div>
+        <input type="text" value="${escapeAttr(s.stableSelector||s.selector||'')}" placeholder="CSS selector..." style="font-family:var(--mono);font-size:11px;padding:4px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--muted)" onchange="updateBuilderStep('${s.id}','stableSelector',this.value);updateBuilderStep('${s.id}','selector',this.value)">
+        ${s.action === 'type' || s.action === 'assert' || s.action === 'select' ? `<input type="text" value="${escapeAttr(s.value||'')}" placeholder="${s.action==='type'?'Value to type...':s.action==='assert'?'Expected value...':'Option value...'}" style="font-size:12px;padding:4px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text)" onchange="updateBuilderStep('${s.id}','value',this.value)">` : ''}
+      </div>
+      <div style="display:flex;flex-direction:column;gap:4px;flex-shrink:0">
+        <button class="btn-icon" style="width:22px;height:22px" onclick="moveBuilderStep('${s.id}',-1)" ${i===0?'disabled':''}>↑</button>
+        <button class="btn-icon" style="width:22px;height:22px" onclick="moveBuilderStep('${s.id}',1)" ${i===builderSteps.length-1?'disabled':''}>↓</button>
+        <button class="btn-icon" style="width:22px;height:22px;color:var(--red)" onclick="removeBuilderStep('${s.id}')">✕</button>
+      </div>
+    </div>`).join('');
+}
+
+async function saveBuiltTest() {
+  const name = document.getElementById('builder-test-name')?.value?.trim();
+  const url = document.getElementById('builder-url')?.value?.trim() || '';
+
+  if (!name) { showToast('Enter a test name first'); document.getElementById('builder-test-name').focus(); return; }
+  if (builderSteps.length === 0) { showToast('Add at least one step'); return; }
+
+  // Clean up steps for saving
+  const steps = builderSteps.map((s, i) => ({
+    id: 'step-' + String(i+1).padStart(3,'0'),
+    action: s.action,
+    stableSelector: s.stableSelector || s.selector || null,
+    selector: s.selector || s.stableSelector || null,
+    value: s.value || null,
+    assertType: s.assertType || null,
+    attribute: s.attribute || null,
+    description: s.description || (s.action + ' step ' + (i+1)),
+    libraryId: s.libraryId || null,
+    timestamp: s.timestamp || Date.now(),
+  }));
+
+  try {
+    const res = await fetch(API_BASE + '/api/record/save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ scope: 'saved', name, url, steps, tags: [] }),
+    });
+    if (!res.ok) throw new Error(await res.text());
+    showToast(`Test "${name}" saved`);
+    closeTestBuilder();
+    switchView('all-tests');
+  } catch (err) {
+    showToast('Error saving: ' + err.message);
+  }
+}
+
 // ── SUITE TEST PICKER ────────────────────────────────────────────────────────
 function openSuiteTestPicker() {
   const list = document.getElementById('stp-test-list');