skopix 2.0.90 → 2.0.92

package/cli/commands/dashboard.js

@@ -1896,6 +1896,12 @@ export async function dashboardCommand(options) {
         sendJSON(res, 200, folders);
         return;
       }
+      if (pathname === '/api/folders' && method === 'PUT') {
+        const folders = JSON.parse(await readBody(req));
+        await saveFolders(folders);
+        sendJSON(res, 200, folders);
+        return;
+      }
       if (pathname === '/api/folders' && method === 'DELETE') {
         const { name, type } = JSON.parse(await readBody(req));
         const folders = await getFolders();
@@ -4328,25 +4334,37 @@ async function startStepTester(testerId, url, selector, mode, steps) {
   if (mode === 'preview' && steps && steps.length > 0) {
     // Register expose functions FIRST before addInitScript so they're available on DOMContentLoaded
     await ctx.exposeFunction('__skopixPreviewRun', async ({ index }) => {
+      const session = stepTesterSessions.get(testerId);
+      if (!session) return;
       const s = steps[index];
       if (!s) return;
       await page.evaluate(({ i, status }) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, status); }, { i: index, status: `Running step ${index+1}/${steps.length}...` }).catch(()=>{});
       const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
       const msg = result.passed ? (index+1 >= steps.length ? `✓ All ${steps.length} steps passed!` : `✓ Step ${index+1} passed`) : `✗ Step ${index+1} failed`;
-      await page.evaluate(({ i, r, msg }) => {
+      if (result.passed) session.currentStep = index + 1;
+      if (!session.results) session.results = {};
+      session.results[index] = { passed: result.passed, error: result.error||null };
+      await page.evaluate(({ i, r, msg, currentStep }) => {
         if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, msg);
-      }, { i: index, r: { passed: result.passed, error: result.error||null }, msg }).catch(()=>{});
+        window.__skopixPreviewCurrentStep = currentStep;
+      }, { i: index, r: { passed: result.passed, error: result.error||null }, msg, currentStep: session.currentStep || 0 }).catch(()=>{});
     });
 
     await ctx.exposeFunction('__skopixPreviewRunAll', async ({ fromIndex }) => {
+      const session = stepTesterSessions.get(testerId);
+      if (!session) return;
       for (let i = fromIndex; i < steps.length; i++) {
         const s = steps[i];
         await page.evaluate(({ i, total }) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, `Running step ${i+1}/${total}...`); }, { i, total: steps.length }).catch(()=>{});
         const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
+        if (result.passed) session.currentStep = i + 1;
+        if (!session.results) session.results = {};
+        session.results[i] = { passed: result.passed, error: result.error||null };
         const msg = result.passed ? (i+1 >= steps.length ? `✓ All ${steps.length} steps passed!` : `Running...`) : `✗ Step ${i+1} failed — fix and retry`;
-        await page.evaluate(({ i, r, msg }) => {
+        await page.evaluate(({ i, r, msg, currentStep }) => {
           if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, msg);
-        }, { i, r: { passed: result.passed, error: result.error||null }, msg }).catch(()=>{});
+          window.__skopixPreviewCurrentStep = currentStep;
+        }, { i, r: { passed: result.passed, error: result.error||null }, msg, currentStep: session.currentStep || 0 }).catch(()=>{});
         if (!result.passed) break;
         await new Promise(r => setTimeout(r, 400));
       }
@@ -4357,6 +4375,11 @@ async function startStepTester(testerId, url, selector, mode, steps) {
       stepTesterSessions.delete(testerId);
     });
 
+    await ctx.exposeFunction('__skopixGetState', async () => {
+      const session = stepTesterSessions.get(testerId);
+      return { currentStep: session?.currentStep || 0, results: session?.results || {} };
+    });
+
     // THEN inject toolbar via addInitScript
     // PREVIEW MODE — inject steps list toolbar
     await ctx.addInitScript((stepsData) => {
@@ -4450,6 +4473,17 @@ async function startStepTester(testerId, url, selector, mode, steps) {
           if (window.__skopixStopPreview) window.__skopixStopPreview({});
         });
 
+        // Restore state from server after navigation
+        if (window.__skopixGetState) {
+          window.__skopixGetState({}).then(state => {
+            if (state && state.currentStep > 0) {
+              window.__skopixPreviewCurrentStep = state.currentStep;
+              window.__skopixPreviewResults = state.results || {};
+              renderSteps(state.currentStep, state.results || {});
+            }
+          }).catch(() => {});
+        }
+
         window.__skopixUpdatePreview = (index, result, status) => {
           window.__skopixPreviewResults[index] = result;
           if (result && result.passed) window.__skopixPreviewCurrentStep = index + 1;
@@ -4572,7 +4606,7 @@ async function startStepTester(testerId, url, selector, mode, steps) {
   if (url) await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 }).catch(() => {});
   // Ensure toolbar is injected on first page (DOMContentLoaded may have already fired)
   await page.evaluate(() => { if (window.__skopixTesterSelector !== undefined && !document.getElementById('__skopix_tester') && !document.getElementById('__skopix_preview')) { document.dispatchEvent(new Event('DOMContentLoaded')); } }).catch(() => {});
-  stepTesterSessions.set(testerId, { browser, ctx, page });
+  stepTesterSessions.set(testerId, { browser, ctx, page, currentStep: 0, results: {} });
 }
 
 async function executeStepTesterAction(page, { selector, action, value }) {

package/package.json

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

@@ -5738,13 +5738,16 @@ function renderFolderTree(containerId, type, selectedFolder, onSelect) {
     const isSelected = selectedFolder === node.fullPath;
     return `<div>
       <div class="folder-item ${isSelected ? 'folder-item--active' : ''}"
-        style="padding:7px 14px 7px ${14 + depth * 16}px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;color:${isSelected ? 'var(--cyan)' : 'var(--text)'};background:${isSelected ? 'rgba(34,211,238,0.08)' : ''};transition:background 0.1s"
+        draggable="true"
+        ondragstart="onFolderReorderStart(event,'${escapeAttr(node.fullPath)}','${type}')"
+        ondragover="event.preventDefault();event.stopPropagation();this.style.outline=&quot;2px solid var(--cyan)&quot;"
+        ondragleave="this.style.outline=&quot;&quot;"
+        ondrop="onFolderReorderDrop(event,'${escapeAttr(node.fullPath)}','${type}')"
+        style="padding:7px 14px 7px ${14 + depth * 16}px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;color:${isSelected ? 'var(--cyan)' : 'var(--text)'};background:${isSelected ? 'rgba(34,211,238,0.08)' : ''};transition:background 0.1s;border-top:2px solid transparent"
         data-folder="${escapeAttr(node.fullPath)}" data-type="${type}"
         onmouseover="if(!this.classList.contains('folder-item--active'))this.style.background='var(--surface2)'"
-        onmouseout="if(!this.classList.contains('folder-item--active'))this.style.background=''"
-        ondragover="event.preventDefault();this.style.background='rgba(34,211,238,0.15)'"
-        ondragleave="this.style.background=''"
-        ondrop="onFolderDrop(event,'${escapeAttr(node.fullPath)}','${type}')">
+        onmouseout="if(!this.classList.contains('folder-item--active'))this.style.background=''">
+        <span style="color:var(--muted2);cursor:grab;font-size:12px;flex-shrink:0" onmousedown="event.stopPropagation()">⠿</span>
         <svg width="13" height="13" viewBox="0 0 24 24" fill="${isSelected ? 'rgba(34,211,238,0.3)' : 'none'}" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
         <span style="flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(node.name)}</span>
         <span class="folder-actions" style="display:none;gap:4px">
@@ -5763,7 +5766,7 @@ function renderFolderTree(containerId, type, selectedFolder, onSelect) {
       onmouseover="if(${!allActive})this.style.background='var(--surface2)'" onmouseout="if(${!allActive})this.style.background=''"
       ondragover="event.preventDefault();this.style.background='rgba(34,211,238,0.15)'"
       ondragleave="this.style.background=''"
-      ondrop="onFolderDrop(event,'','${type}')">
+      ondrop="if(!event.dataTransfer.getData('folder-reorder'))onFolderDrop(event,'','${type}')">
       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg>
       All
     </div>
@@ -5805,7 +5808,44 @@ document.addEventListener('click', (e) => {
   }
 });
 
-// Drag and drop
+// Folder reordering
+let folderDragName = null;
+
+function onFolderReorderStart(e, folderName, type) {
+  folderDragName = folderName;
+  e.dataTransfer.setData('folder-reorder', JSON.stringify({ name: folderName, type }));
+  e.dataTransfer.effectAllowed = 'move';
+  e.stopPropagation();
+}
+
+async function onFolderReorderDrop(e, targetName, type) {
+  e.preventDefault();
+  e.stopPropagation();
+  e.currentTarget.style.outline = '';
+  const data = e.dataTransfer.getData('folder-reorder');
+  if (!data) return;
+  const { name: draggedName } = JSON.parse(data);
+  if (draggedName === targetName) return;
+  // Reorder in foldersCache
+  const typeFolders = foldersCache.filter(f => f.type === type);
+  const others = foldersCache.filter(f => f.type !== type);
+  const dragIdx = typeFolders.findIndex(f => f.name === draggedName);
+  const targetIdx = typeFolders.findIndex(f => f.name === targetName);
+  if (dragIdx === -1 || targetIdx === -1) return;
+  const [dragged] = typeFolders.splice(dragIdx, 1);
+  typeFolders.splice(targetIdx, 0, dragged);
+  foldersCache = [...others, ...typeFolders];
+  // Save new order
+  await fetch(API_BASE + '/api/folders', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(foldersCache),
+  });
+  if (type === 'library') renderFolderTree('library-folder-tree', 'library', selectedLibraryFolder);
+  else renderFolderTree('tests-folder-tree', 'tests', selectedTestsFolder);
+}
+
+// Drag items into folders
 function onItemDragStart(e, id, type) {
   e.dataTransfer.setData('text/plain', JSON.stringify({ id, type }));
   e.dataTransfer.effectAllowed = 'move';