skopix 2.0.72 → 2.0.74

package/cli/commands/dashboard.js

@@ -1870,6 +1870,69 @@ export async function dashboardCommand(options) {
         return;
       }
 
+      // ─── FOLDERS ───────────────────────────────────────────────────────
+      if (pathname === '/api/folders' && method === 'GET') {
+        sendJSON(res, 200, await getFolders());
+        return;
+      }
+      if (pathname === '/api/folders' && method === 'POST') {
+        const { name, type } = JSON.parse(await readBody(req));
+        const folders = await getFolders();
+        if (!folders.find(f => f.name === name && f.type === type)) {
+          folders.push({ name, type, createdAt: new Date().toISOString() });
+          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();
+        await saveFolders(folders.filter(f => !(f.name === name && f.type === type)));
+        sendJSON(res, 200, { deleted: true });
+        return;
+      }
+      if (pathname === '/api/folders/rename' && method === 'POST') {
+        const { oldName, newName, type } = JSON.parse(await readBody(req));
+        const folders = await getFolders();
+        const idx = folders.findIndex(f => f.name === oldName && f.type === type);
+        if (idx !== -1) folders[idx].name = newName;
+        await saveFolders(folders);
+        // Update all items that used the old folder name
+        if (type === 'library') {
+          const steps = await listLibrarySteps(suitesDir);
+          steps.forEach(s => { if (s.folder === oldName) s.folder = newName; });
+          await saveLibrarySteps(steps);
+        } else if (type === 'tests') {
+          const allTests = await listAllTests(suitesDir);
+          for (const test of allTests) {
+            if (test.folder === oldName) await updateTest(suitesDir, test.scope, test.id, { ...test, folder: newName });
+          }
+        }
+        sendJSON(res, 200, { renamed: true });
+        return;
+      }
+      if (pathname === '/api/folders/move-items' && method === 'POST') {
+        const { ids, folder, type, fromFolder } = JSON.parse(await readBody(req));
+        if (type === 'library') {
+          const steps = await listLibrarySteps(suitesDir);
+          steps.forEach(s => {
+            if (ids === '__all_in_folder__' ? s.folder === fromFolder : ids.includes(s.id)) {
+              s.folder = folder || null;
+            }
+          });
+          await saveLibrarySteps(steps);
+        } else if (type === 'tests') {
+          const allTests = await listAllTests(suitesDir);
+          for (const test of allTests) {
+            const match = ids === '__all_in_folder__' ? test.folder === fromFolder : ids.includes(test.id);
+            if (match) await updateTest(suitesDir, test.scope, test.id, { ...test, folder: folder || null });
+          }
+        }
+        sendJSON(res, 200, { moved: ids === '__all_in_folder__' ? -1 : ids.length });
+        return;
+      }
+
       // ─── STEP LIBRARY ──────────────────────────────────────────────────
       if (pathname.match(/^\/api\/step-library\/[^/]+\/usages$/) && method === 'GET') {
         try {
@@ -3786,6 +3849,24 @@ async function syncIssuesStatus() {
 // STEP LIBRARY — persistent store of reusable UI interactions
 // ═══════════════════════════════════════════════════════════════
 
+const FOLDERS_FILE = () => path.join(os.homedir(), '.skopix', 'folders.yaml');
+
+async function getFolders() {
+  const file = FOLDERS_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 saveFolders(folders) {
+  const file = FOLDERS_FILE();
+  await fs.ensureDir(path.dirname(file));
+  await fs.writeFile(file, yaml.stringify(folders));
+}
+
 const SAVED_URLS_FILE = () => path.join(os.homedir(), '.skopix', 'saved-urls.yaml');
 
 async function getSavedUrls() {
@@ -3803,6 +3884,7 @@ async function saveSavedUrls(urls) {
   await fs.ensureDir(path.dirname(file));
   await fs.writeFile(file, yaml.stringify(urls));
 }
+const LIBRARY_FILE = () => path.join(os.homedir(), '.skopix', 'step-library.yaml');
 const LIBRARY_PENDING_FILE = () => path.join(os.homedir(), '.skopix', 'step-library-pending.yaml');
 
 async function listPendingSteps() {

package/package.json

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

@@ -1531,22 +1531,36 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
       </div>
 
-      <div class="card">
-        <div class="card-header" style="flex-wrap:wrap;gap:12px">
-          <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
-            <input class="form-input" type="text" id="tests-search" placeholder="Search by name or goal..." style="width:280px;padding:8px 12px;font-size:12px" oninput="renderAllTests()">
-            <select class="form-select" id="tests-scope-filter" style="padding:8px 12px;font-size:12px;width:auto" onchange="renderAllTests()">
+      <!-- Two-panel layout: folder tree + tests -->
+      <div style="display:grid;grid-template-columns:220px 1fr;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)">
+
+        <!-- LEFT: Folder tree -->
+        <div style="border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface2)">
+          <div style="padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
+            <span style="font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em">FOLDERS</span>
+            <button class="btn btn-ghost" style="padding:2px 6px;font-size:14px;line-height:1" onclick="openCreateFolder('tests')" title="New folder">+</button>
+          </div>
+          <div id="tests-folder-tree" style="overflow-y:auto;flex:1;padding:6px 0"></div>
+        </div>
+
+        <!-- RIGHT: Tests content -->
+        <div style="display:flex;flex-direction:column;overflow:hidden">
+          <div style="padding:10px 14px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-wrap:wrap">
+            <input class="form-input" type="text" id="tests-search" placeholder="Search by name or goal..." style="flex:1;min-width:180px;padding:6px 10px;font-size:12px" oninput="renderAllTests()">
+            <select class="form-select" id="tests-scope-filter" style="padding:6px 10px;font-size:12px;width:auto" onchange="renderAllTests()">
               <option value="">All scopes</option>
             </select>
-            <select class="form-select" id="tests-tag-filter" style="padding:8px 12px;font-size:12px;width:auto" onchange="renderAllTests()">
+            <select class="form-select" id="tests-tag-filter" style="padding:6px 10px;font-size:12px;width:auto" onchange="renderAllTests()">
               <option value="">All tags</option>
             </select>
+            <button class="btn btn-ghost" id="btn-move-tests-folder" style="display:none;font-size:11px;padding:4px 10px" onclick="openMoveToFolder('tests')">
+              Move to folder
+            </button>
+            <div id="tests-count" style="font-family:var(--mono);font-size:11px;color:var(--muted)"></div>
           </div>
-          <div id="tests-count" style="font-family:var(--mono);font-size:11px;color:var(--muted)"></div>
-        </div>
-        <div class="card-body" style="padding:0">
-          <div id="all-tests-container"><!-- populated --></div>
+          <div id="all-tests-container" style="overflow-y:auto;flex:1"><!-- populated --></div>
         </div>
+
       </div>
     </div>
 
@@ -1610,18 +1624,33 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
       </div>
 
-      <!-- Search + filter -->
-      <div style="display:flex;gap:10px;margin-bottom:16px">
-        <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>
+      <!-- Two-panel layout: folder tree + content -->
+      <div style="display:grid;grid-template-columns:220px 1fr;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)">
 
-      <div class="card">
-        <div class="card-body" style="padding:0">
-          <div id="library-steps-container"><!-- populated --></div>
+        <!-- LEFT: Folder tree -->
+        <div style="border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface2)">
+          <div style="padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
+            <span style="font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em">FOLDERS</span>
+            <button class="btn btn-ghost" style="padding:2px 6px;font-size:14px;line-height:1" onclick="openCreateFolder('library')" title="New folder">+</button>
+          </div>
+          <div id="library-folder-tree" style="overflow-y:auto;flex:1;padding:6px 0"></div>
         </div>
+
+        <!-- RIGHT: Steps content -->
+        <div style="display:flex;flex-direction:column;overflow:hidden">
+          <!-- Search + filter + bulk actions -->
+          <div style="padding:10px 14px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center">
+            <input class="form-input" id="library-search" type="text" placeholder="Search elements..." oninput="filterLibrarySteps()" style="flex:1;font-size:12px">
+            <select class="form-select" id="library-filter-tag" onchange="filterLibrarySteps()" style="width:130px;font-size:12px">
+              <option value="">All tags</option>
+            </select>
+            <button class="btn btn-ghost" id="btn-move-to-folder" style="display:none;font-size:11px;padding:4px 10px" onclick="openMoveToFolder('library')">
+              Move to folder
+            </button>
+          </div>
+          <div id="library-steps-container" style="overflow-y:auto;flex:1"><!-- populated --></div>
+        </div>
+
       </div>
     </div>
 
@@ -1828,6 +1857,47 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
       </div>
     </div>
 
+    <!-- CREATE FOLDER MODAL -->
+    <div class="modal-overlay" id="create-folder-modal" style="display:none" onclick="if(event.target===this)closeCreateFolder()">
+      <div class="modal" style="max-width:400px;width:100%">
+        <div class="modal-header">
+          <div class="modal-title">New folder</div>
+          <button class="modal-close" onclick="closeCreateFolder()">✕</button>
+        </div>
+        <div class="modal-body" style="display:flex;flex-direction:column;gap:14px">
+          <input type="hidden" id="create-folder-type">
+          <div class="form-field">
+            <label class="form-label">Folder name</label>
+            <input class="form-input" id="create-folder-name" type="text" placeholder="e.g. Login, Charts/Bar Charts" onkeydown="if(event.key==='Enter')confirmCreateFolder()">
+            <div class="form-help">Use / for nested folders e.g. "Charts/Bar Charts"</div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-ghost" onclick="closeCreateFolder()">Cancel</button>
+          <button class="btn btn-primary" onclick="confirmCreateFolder()">Create</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- MOVE TO FOLDER MODAL -->
+    <div class="modal-overlay" id="move-folder-modal" style="display:none" onclick="if(event.target===this)closeMoveToFolder()">
+      <div class="modal" style="max-width:400px;width:100%">
+        <div class="modal-header">
+          <div class="modal-title" id="move-folder-title">Move to folder</div>
+          <button class="modal-close" onclick="closeMoveToFolder()">✕</button>
+        </div>
+        <div class="modal-body" style="display:flex;flex-direction:column;gap:10px">
+          <input type="hidden" id="move-folder-type">
+          <div id="move-folder-list" style="display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto"></div>
+          <div style="border-top:1px solid var(--border);padding-top:10px;margin-top:4px">
+            <button class="btn btn-ghost" style="width:100%;justify-content:center;color:var(--muted)" onclick="confirmMoveToFolder(null)">
+              Remove from folder (move to root)
+            </button>
+          </div>
+        </div>
+      </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">
@@ -4084,6 +4154,9 @@ function renderAllTests() {
     if ([...tagFilter.options].some(o => o.value === currentTag)) tagFilter.value = currentTag;
   }
 
+  // Render folder tree
+  renderFolderTree('tests-folder-tree', 'tests', selectedTestsFolder);
+
   // Apply filters
   const search = (document.getElementById('tests-search')?.value || '').toLowerCase();
   const scope = document.getElementById('tests-scope-filter')?.value || '';
@@ -4096,6 +4169,7 @@ function renderAllTests() {
       const haystack = ((t.name || '') + ' ' + (t.goal || '')).toLowerCase();
       if (!haystack.includes(search)) return false;
     }
+    if (selectedTestsFolder !== null && t.folder !== selectedTestsFolder) return false;
     return true;
   });
   filtered = sortTests(filtered);
@@ -4115,11 +4189,14 @@ function renderAllTests() {
     const stepCount = isRec ? (t.steps || []).length : 0;
     const reusableBadge = isRec && t.reusable ? '<span style="font-family:var(--mono);font-size:10px;background:rgba(245,158,11,0.1);color:#f59e0b;border:1px solid rgba(245,158,11,0.2);border-radius:4px;padding:2px 6px;margin-right:5px">REUSABLE</span>' : '';
     const setupBadge = isRec && t.setup ? '<span style="font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:4px">via ' + escapeHtml(t.setup) + '</span>' : '';
+    const folderBadge = t.folder ? '<span style="font-family:var(--mono);font-size:10px;padding:2px 6px;background:rgba(34,211,238,0.1);border-radius:4px;color:#22d3ee;margin-right:4px">📁 ' + escapeHtml(t.folder) + '</span>' : '';
     const subtitle = isRec
       ? '<span style="font-family:var(--mono);font-size:10px;background:rgba(6,182,212,0.1);color:var(--cyan);border:1px solid rgba(6,182,212,0.2);border-radius:4px;padding:2px 7px;margin-right:6px">RECORDED</span>' + reusableBadge + '<span style="font-family:var(--mono);font-size:11px;color:var(--muted)">' + stepCount + ' steps' + setupBadge + '</span>'
       : '<span style="font-family:var(--mono);font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:380px;display:inline-block">' + escapeHtml(t.goal || '') + '</span>';
-    return '<tr>'
-      + '<td><div style="font-weight:600;color:var(--white);margin-bottom:4px">' + escapeHtml(t.name) + '</div><div>' + subtitle + '</div></td>'
+    return '<tr draggable="true" ondragstart="onItemDragStart(event,\'' + escapeAttr(t.id) + '\',\'tests\')">'
+      + '<td style="padding:10px 8px;color:var(--muted2);cursor:grab;font-size:14px;width:20px">⠿</td>'
+      + '<td style="padding:10px 8px;width:20px"><input type="checkbox" class="test-checkbox" data-id="' + escapeAttr(t.id) + '" onchange="onTestCheck()" style="width:14px;height:14px"></td>'
+      + '<td><div style="font-weight:600;color:var(--white);margin-bottom:4px">' + escapeHtml(t.name) + '</div><div>' + folderBadge + subtitle + '</div></td>'
       + '<td><span class="scope-pill ' + (t.scopeIsSaved ? 'saved' : 'suite') + '">' + escapeHtml(t.scopeName) + '</span></td>'
       + '<td>' + (t.credentials ? '<span class="suite-tag-pill" style="color:var(--purple);background:var(--purple-dim);border-color:rgba(124,58,237,0.3)"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:3px"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>' + escapeHtml(t.credentials) + '</span>' : '<span style="color:var(--muted2);font-family:var(--mono);font-size:11px">—</span>') + '</td>'
       + '<td><div style="display:flex;gap:4px;flex-wrap:wrap">' + ((t.tags || []).map(tg => '<span class="suite-tag-pill">' + escapeHtml(tg) + '</span>').join('') || '<span style="color:var(--muted2);font-family:var(--mono);font-size:11px">—</span>') + '</div></td>'
@@ -4148,6 +4225,8 @@ function renderAllTests() {
   container.innerHTML = `
     <table class="tests-table">
       <thead><tr>
+        <th style="width:20px"></th>
+        <th style="width:20px"></th>
         <th style="cursor:pointer;user-select:none" onclick="setTestsSort('name')">Test ${getSortIndicator('name')}</th>
         <th style="cursor:pointer;user-select:none" onclick="setTestsSort('scope')">Scope ${getSortIndicator('scope')}</th>
         <th style="cursor:pointer;user-select:none" onclick="setTestsSort('credentials')">Credentials ${getSortIndicator('credentials')}</th>
@@ -4526,7 +4605,7 @@ const _origSwitchView2 = switchView;
 switchView = function(name) {
   _origSwitchView2(name);
   if (name === 'all-tests') {
-    fetchAllTests().then(renderAllTests);
+    fetchAllTests().then(() => { fetchFolders().then(() => renderAllTests()); });
   }
   if (name === 'suite-runs') {
     fetchSuiteRuns().then(renderSuiteRuns);
@@ -5606,8 +5685,247 @@ async function saveOllamaConfig() {
   }
 }
 
+function getSelectedTestIds() {
+  return Array.from(document.querySelectorAll('.test-checkbox:checked')).map(cb => cb.dataset.id);
+}
+
+function onTestCheck() {
+  const checked = document.querySelectorAll('.test-checkbox:checked');
+  const moveBtn = document.getElementById('btn-move-tests-folder');
+  if (moveBtn) moveBtn.style.display = checked.length >= 1 ? '' : 'none';
+}
+
+// ── FOLDERS ──────────────────────────────────────────────────────────────────
+let foldersCache = [];
+let selectedLibraryFolder = null; // null = All
+let selectedTestsFolder = null;   // null = All
+
+async function fetchFolders() {
+  try {
+    const res = await fetch(API_BASE + '/api/folders');
+    if (!res.ok) return [];
+    foldersCache = await res.json();
+    return foldersCache;
+  } catch { return []; }
+}
+
+// Build nested folder structure from flat list
+function buildFolderTree(folders, type) {
+  const nodes = {};
+  const roots = [];
+  folders.filter(f => f.type === type).forEach(f => {
+    const parts = f.name.split('/');
+    let path = '';
+    parts.forEach((part, i) => {
+      const parentPath = path;
+      path = path ? path + '/' + part : part;
+      if (!nodes[path]) {
+        nodes[path] = { name: part, fullPath: path, children: [], parentPath };
+        if (i === 0) roots.push(nodes[path]);
+        else if (nodes[parentPath]) nodes[parentPath].children.push(nodes[path]);
+      }
+    });
+  });
+  return roots;
+}
+
+function renderFolderTree(containerId, type, selectedFolder, onSelect) {
+  const container = document.getElementById(containerId);
+  if (!container) return;
+  const roots = buildFolderTree(foldersCache, type);
+
+  function renderNode(node, depth = 0) {
+    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"
+        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}')">
+        <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">
+          <span data-rename-folder="${escapeAttr(node.fullPath)}" data-type="${type}" style="opacity:0.5;cursor:pointer;font-size:11px" title="Rename">✎</span>
+          <span data-delete-folder="${escapeAttr(node.fullPath)}" data-type="${type}" style="opacity:0.5;cursor:pointer;font-size:11px;color:var(--red)" title="Delete">✕</span>
+        </span>
+      </div>
+      ${node.children.map(c => renderNode(c, depth + 1)).join('')}
+    </div>`;
+  }
+
+  const allActive = selectedFolder === null;
+  container.innerHTML = `
+    <div style="padding:7px 14px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px;color:${allActive ? 'var(--cyan)' : 'var(--muted)'};background:${allActive ? 'rgba(34,211,238,0.08)' : ''}"
+      data-folder="" data-type="${type}"
+      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}')">
+      <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>
+    ${roots.map(n => renderNode(n)).join('')}`;
+
+  // Show/hide actions on hover
+  container.querySelectorAll('.folder-item').forEach(el => {
+    el.addEventListener('mouseenter', () => { el.querySelector('.folder-actions').style.display = 'flex'; });
+    el.addEventListener('mouseleave', () => { el.querySelector('.folder-actions').style.display = 'none'; });
+  });
+}
+
+// Folder click delegation
+document.addEventListener('click', (e) => {
+  const folderItem = e.target.closest('[data-folder][data-type]');
+  const renameBtn = e.target.closest('[data-rename-folder]');
+  const deleteBtn = e.target.closest('[data-delete-folder]');
+
+  if (renameBtn) {
+    e.stopPropagation();
+    const name = renameBtn.dataset.renameFolder;
+    const type = renameBtn.dataset.type;
+    const newName = prompt('Rename folder:', name);
+    if (newName && newName !== name) renameFolder(name, newName, type);
+    return;
+  }
+  if (deleteBtn) {
+    e.stopPropagation();
+    const name = deleteBtn.dataset.deleteFolder;
+    const type = deleteBtn.dataset.type;
+    showConfirm('Delete folder?', `Delete "${name}"? Items inside will be moved to root.`, () => deleteFolder(name, type));
+    return;
+  }
+  if (folderItem && !renameBtn && !deleteBtn) {
+    const folder = folderItem.dataset.folder || null;
+    const type = folderItem.dataset.type;
+    if (type === 'library') { selectedLibraryFolder = folder; loadLibraryView(); }
+    else if (type === 'tests') { selectedTestsFolder = folder; fetchAllTests().then(renderAllTests); }
+  }
+});
+
+// Drag and drop
+function onItemDragStart(e, id, type) {
+  e.dataTransfer.setData('text/plain', JSON.stringify({ id, type }));
+  e.dataTransfer.effectAllowed = 'move';
+}
+
+async function onFolderDrop(e, folderPath, type) {
+  e.preventDefault();
+  e.currentTarget.style.background = '';
+  try {
+    const data = JSON.parse(e.dataTransfer.getData('text/plain'));
+    if (data.type !== type) return;
+    await fetch(API_BASE + '/api/folders/move-items', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ids: [data.id], folder: folderPath || null, type }),
+    });
+    if (type === 'library') loadLibraryView();
+    else fetchAllTests().then(renderAllTests);
+  } catch {}
+}
+
+// Create folder
+function openCreateFolder(type) {
+  document.getElementById('create-folder-type').value = type;
+  document.getElementById('create-folder-name').value = '';
+  document.getElementById('create-folder-modal').style.display = 'flex';
+  setTimeout(() => document.getElementById('create-folder-name').focus(), 100);
+}
+
+function closeCreateFolder() {
+  document.getElementById('create-folder-modal').style.display = 'none';
+}
+
+async function confirmCreateFolder() {
+  const type = document.getElementById('create-folder-type').value;
+  const name = document.getElementById('create-folder-name').value.trim();
+  if (!name) { showToast('Enter a folder name'); return; }
+  await fetch(API_BASE + '/api/folders', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, type }),
+  });
+  foldersCache = await (await fetch(API_BASE + '/api/folders')).json();
+  closeCreateFolder();
+  if (type === 'library') loadLibraryView();
+  else { renderFolderTree('tests-folder-tree', 'tests', selectedTestsFolder); }
+  showToast(`Folder "${name}" created`);
+}
+
+// Rename / delete folder
+async function renameFolder(oldName, newName, type) {
+  await fetch(API_BASE + '/api/folders/rename', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ oldName, newName, type }),
+  });
+  foldersCache = await (await fetch(API_BASE + '/api/folders')).json();
+  if (type === 'library') { if (selectedLibraryFolder === oldName) selectedLibraryFolder = newName; loadLibraryView(); }
+  else { if (selectedTestsFolder === oldName) selectedTestsFolder = newName; fetchAllTests().then(renderAllTests); }
+}
+
+async function deleteFolder(name, type) {
+  // Move items in this folder to root first
+  await fetch(API_BASE + '/api/folders/move-items', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ids: '__all_in_folder__', folder: null, type, fromFolder: name }),
+  });
+  await fetch(API_BASE + '/api/folders', {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, type }),
+  });
+  foldersCache = await (await fetch(API_BASE + '/api/folders')).json();
+  if (type === 'library') { if (selectedLibraryFolder === name) selectedLibraryFolder = null; loadLibraryView(); }
+  else { if (selectedTestsFolder === name) selectedTestsFolder = null; fetchAllTests().then(renderAllTests); }
+}
+
+// Move to folder modal
+let moveFolderIds = [];
+function openMoveToFolder(type) {
+  const ids = type === 'library' ? getSelectedStepIds() : getSelectedTestIds();
+  if (!ids.length) return;
+  moveFolderIds = ids;
+  document.getElementById('move-folder-type').value = type;
+  document.getElementById('move-folder-title').textContent = `Move ${ids.length} item${ids.length > 1 ? 's' : ''} to folder`;
+  const folders = foldersCache.filter(f => f.type === type);
+  const list = document.getElementById('move-folder-list');
+  if (!folders.length) {
+    list.innerHTML = `<div style="font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;padding:20px">No folders yet — create one first</div>`;
+  } else {
+    list.innerHTML = folders.map(f => `
+      <button class="btn btn-ghost" style="width:100%;justify-content:flex-start;gap:8px;padding:8px 12px" onclick="confirmMoveToFolder('${escapeAttr(f.name)}')">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="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>
+        ${escapeHtml(f.name)}
+      </button>`).join('');
+  }
+  document.getElementById('move-folder-modal').style.display = 'flex';
+}
+
+function closeMoveToFolder() {
+  document.getElementById('move-folder-modal').style.display = 'none';
+}
+
+async function confirmMoveToFolder(folderName) {
+  const type = document.getElementById('move-folder-type').value;
+  closeMoveToFolder();
+  await fetch(API_BASE + '/api/folders/move-items', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ids: moveFolderIds, folder: folderName, type }),
+  });
+  showToast(folderName ? `Moved to "${folderName}"` : 'Moved to root');
+  if (type === 'library') loadLibraryView();
+  else fetchAllTests().then(renderAllTests);
+}
+
 // ── SAVED URLS ───────────────────────────────────────────────────────────────
 let savedUrlsCache = [];
+let libraryStepsCache = [];
 
 async function fetchSavedUrls() {
   try {
@@ -5743,10 +6061,12 @@ function renderPendingSteps(steps) {
 }
 
 async function loadLibraryView() {
-  const [steps, pending] = await Promise.all([
+  const [steps, pending, folders] = await Promise.all([
     fetchLibrarySteps().catch(() => []),
-    fetchPendingSteps().catch(() => [])
+    fetchPendingSteps().catch(() => []),
+    fetchFolders().catch(() => [])
   ]);
+  renderFolderTree('library-folder-tree', 'library', selectedLibraryFolder);
   renderPendingSteps(pending);
   populateLibraryTagFilter();
   renderLibrarySteps(steps);
@@ -5879,13 +6199,17 @@ function renderLibrarySteps(steps) {
           const warning = getSelectorWarning(sel);
           const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
           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">
+          <tr data-step-id="${escapeAttr(s.id)}" draggable="true" ondragstart="onItemDragStart(event,'${escapeAttr(s.id)}','library')" 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 8px 12px 16px;color:var(--muted2);cursor:grab;font-size:14px">⠿</td>
+            <td style="padding:12px 8px">
               <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||'')}</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>` : ''}
+              <div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:3px">
+                ${s.folder ? `<span style="font-family:var(--mono);font-size:10px;padding:2px 6px;background:rgba(34,211,238,0.1);border-radius:4px;color:#22d3ee">📁 ${escapeHtml(s.folder)}</span>` : ''}
+                ${s.tags && s.tags.length ? 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;max-width:300px">
               <div style="display:flex;align-items:center;gap:6px">
@@ -5918,8 +6242,10 @@ function onLibStepCheck() {
   const checked = document.querySelectorAll('.lib-step-checkbox:checked');
   const mergeBtn = document.getElementById('btn-merge-steps');
   const deleteBtn = document.getElementById('btn-delete-selected');
+  const moveBtn = document.getElementById('btn-move-to-folder');
   if (mergeBtn) mergeBtn.style.display = checked.length >= 2 ? '' : 'none';
   if (deleteBtn) deleteBtn.style.display = checked.length >= 1 ? '' : 'none';
+  if (moveBtn) moveBtn.style.display = checked.length >= 1 ? '' : 'none';
 }
 
 function toggleSelectAllSteps(checked) {
@@ -6028,7 +6354,8 @@ function filterLibrarySteps() {
   const filtered = libraryStepsCache.filter(s => {
     const matchQ = !q || (s.name||'').toLowerCase().includes(q) || (s.selector||'').toLowerCase().includes(q) || (s.description||'').toLowerCase().includes(q);
     const matchTag = !tag || (s.tags||[]).includes(tag);
-    return matchQ && matchTag;
+    const matchFolder = selectedLibraryFolder === null || s.folder === selectedLibraryFolder;
+    return matchQ && matchTag && matchFolder;
   });
   renderLibrarySteps(filtered);
 }