skopix 2.0.71 → 2.0.72

package/cli/commands/dashboard.js

@@ -849,6 +849,34 @@ export async function dashboardCommand(options) {
         sendJSON(res, 200, await getConfig());
         return;
       }
+      if (pathname === '/api/saved-urls' && method === 'GET') {
+        sendJSON(res, 200, await getSavedUrls());
+        return;
+      }
+      if (pathname === '/api/saved-urls' && method === 'POST') {
+        const { url, label } = JSON.parse(await readBody(req));
+        const urls = await getSavedUrls();
+        if (!urls.find(u => u.url === url)) {
+          urls.push({ url, label: label || url });
+          await saveSavedUrls(urls);
+        }
+        sendJSON(res, 200, urls);
+        return;
+      }
+      if (pathname === '/api/saved-urls' && method === 'PUT') {
+        const urls = JSON.parse(await readBody(req));
+        await saveSavedUrls(urls);
+        sendJSON(res, 200, urls);
+        return;
+      }
+      if (pathname.match(/^\/api\/saved-urls\/\d+$/) && method === 'DELETE') {
+        const idx = parseInt(pathname.split('/')[3]);
+        const urls = await getSavedUrls();
+        urls.splice(idx, 1);
+        await saveSavedUrls(urls);
+        sendJSON(res, 200, urls);
+        return;
+      }
 
       // ─── RUN ───────────────────────────────────────────────────────────
       // ─── RECORDER ENDPOINTS ──────────────────────────────────────────────────
@@ -3758,7 +3786,23 @@ async function syncIssuesStatus() {
 // STEP LIBRARY — persistent store of reusable UI interactions
 // ═══════════════════════════════════════════════════════════════
 
-const LIBRARY_FILE = () => path.join(os.homedir(), '.skopix', 'step-library.yaml');
+const SAVED_URLS_FILE = () => path.join(os.homedir(), '.skopix', 'saved-urls.yaml');
+
+async function getSavedUrls() {
+  const file = SAVED_URLS_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 saveSavedUrls(urls) {
+  const file = SAVED_URLS_FILE();
+  await fs.ensureDir(path.dirname(file));
+  await fs.writeFile(file, yaml.stringify(urls));
+}
 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.71",
+  "version": "2.0.72",
   "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

@@ -1365,7 +1365,10 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
   </aside>
 
   <!-- MAIN CONTENT -->
-  <main class="main">
+  
+    <!-- SAVED URLS DATALIST -->
+    <datalist id="saved-urls-datalist"></datalist>
+    <main class="main">
 
     <!-- DASHBOARD -->
     <div class="view active" id="view-dashboard">
@@ -1715,7 +1718,7 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
               <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">
+              <input class="form-input" id="builder-url" type="text" placeholder="Start URL (optional)" list="saved-urls-datalist" 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>
@@ -1743,7 +1746,7 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
           </p>
           <div class="form-field">
             <label class="form-label">URL to open</label>
-            <input class="form-input" id="harvester-url" type="text" placeholder="http://localhost:8224/pi">
+            <input class="form-input" id="harvester-url" type="text" placeholder="http://localhost:8224/pi" list="saved-urls-datalist">
           </div>
           <div class="form-field">
             <label class="form-label">Step name (optional)</label>
@@ -1809,7 +1812,7 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
           </p>
           <div class="form-field">
             <label class="form-label">URL to open</label>
-            <input class="form-input" id="tester-url" type="text" placeholder="http://localhost:8224/pi">
+            <input class="form-input" id="tester-url" type="text" placeholder="http://localhost:8224/pi" list="saved-urls-datalist">
           </div>
           <div class="form-field">
             <label class="form-label">Selector</label>
@@ -2068,6 +2071,22 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
       </div>
 
+      <!-- SAVED URLS -->
+      <div class="card" style="margin-bottom:16px">
+        <div class="card-header">
+          <div class="card-title">Saved URLs</div>
+          <div style="font-family:var(--mono);font-size:11px;color:var(--muted)">Available as a dropdown in all URL fields</div>
+        </div>
+        <div class="card-body">
+          <div id="saved-urls-list" style="display:flex;flex-direction:column;gap:8px;margin-bottom:12px"></div>
+          <div style="display:flex;gap:8px">
+            <input class="form-input" id="new-url-input" type="text" placeholder="https://myapp.com/login" style="flex:1" onkeydown="if(event.key==='Enter')addSavedUrl()">
+            <input class="form-input" id="new-url-label" type="text" placeholder="Label (optional)" style="width:180px" onkeydown="if(event.key==='Enter')addSavedUrl()">
+            <button class="btn btn-primary" onclick="addSavedUrl()" style="white-space:nowrap">+ Add URL</button>
+          </div>
+        </div>
+      </div>
+
       <div class="card">
         <div class="card-header">
           <div class="card-title">Stored config values</div>
@@ -2489,7 +2508,7 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
         <div class="form-field" style="margin:0">
           <label class="form-label">Start URL</label>
-          <input class="form-input" id="re-url" type="url">
+          <input class="form-input" id="re-url" type="url" list="saved-urls-datalist">
         </div>
       </div>
       <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
@@ -2601,7 +2620,7 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
     </div>
     <div class="modal-body">
       <p style="font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 20px;line-height:1.7">A browser window will open. Use your app normally. Every click, type, and navigation is captured. Click Stop when done.</p>
-      <div class="form-field"><label class="form-label">Start URL</label><input class="form-input" id="recorder-url" type="url" placeholder="https://myapp.com"></div>
+      <div class="form-field"><label class="form-label">Start URL</label><input class="form-input" id="recorder-url" type="url" placeholder="https://myapp.com" list="saved-urls-datalist"></div>
       <div class="form-field"><label class="form-label">Test name</label><input class="form-input" id="recorder-name" type="text" placeholder="Login and verify dashboard"></div>
       <div class="form-field"><label class="form-label">Save to</label><select class="form-select" id="recorder-scope"><option value="saved">All Tests</option></select></div>
       <div style="display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--border);padding-top:20px">
@@ -2824,6 +2843,7 @@ async function refreshAll() {
   renderSuites();
   populateSuiteSelect();
   checkPendingCount();
+  fetchSavedUrls();
 }
 
 function renderStats() {
@@ -4859,6 +4879,9 @@ switchView = function(name) {
   if (name === 'step-library') {
     loadLibraryView();
   }
+  if (name === 'config') {
+    fetchSavedUrls().then(renderSavedUrlsList);
+  }
   if (name === 'users') {
     fetchUsersAndInvites();
   }
@@ -5583,6 +5606,85 @@ async function saveOllamaConfig() {
   }
 }
 
+// ── SAVED URLS ───────────────────────────────────────────────────────────────
+let savedUrlsCache = [];
+
+async function fetchSavedUrls() {
+  try {
+    const res = await fetch(API_BASE + '/api/saved-urls');
+    if (!res.ok) return [];
+    savedUrlsCache = await res.json();
+    updateUrlDatalist();
+    return savedUrlsCache;
+  } catch { return []; }
+}
+
+function updateUrlDatalist() {
+  const dl = document.getElementById('saved-urls-datalist');
+  if (!dl) return;
+  dl.innerHTML = savedUrlsCache.map(u =>
+    `<option value="${escapeAttr(u.url)}">${escapeAttr(u.label || u.url)}</option>`
+  ).join('');
+}
+
+function renderSavedUrlsList() {
+  const container = document.getElementById('saved-urls-list');
+  if (!container) return;
+  if (!savedUrlsCache.length) {
+    container.innerHTML = `<div style="font-family:var(--mono);font-size:12px;color:var(--muted2)">No saved URLs yet — add one below</div>`;
+    return;
+  }
+  container.innerHTML = savedUrlsCache.map((u, i) => `
+    <div style="display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface2);border-radius:8px;border:1px solid var(--border)">
+      <div style="flex:1;min-width:0">
+        <div style="font-size:13px;color:var(--text)">${escapeHtml(u.label || u.url)}</div>
+        <div style="font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(u.url)}</div>
+      </div>
+      <button class="btn btn-ghost saved-url-copy" style="padding:4px 10px;font-size:11px;flex-shrink:0" data-url="${escapeAttr(u.url)}">Copy</button>
+      <button class="btn btn-ghost saved-url-delete" style="padding:4px 10px;font-size:11px;color:var(--red);flex-shrink:0" data-idx="${i}">Delete</button>
+    </div>`).join('');
+}
+
+async function addSavedUrl() {
+  const url = document.getElementById('new-url-input')?.value?.trim();
+  const label = document.getElementById('new-url-label')?.value?.trim();
+  if (!url) { showToast('Enter a URL first'); return; }
+  try {
+    const res = await fetch(API_BASE + '/api/saved-urls', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, label }),
+    });
+    savedUrlsCache = await res.json();
+    document.getElementById('new-url-input').value = '';
+    document.getElementById('new-url-label').value = '';
+    updateUrlDatalist();
+    renderSavedUrlsList();
+    showToast('URL saved');
+  } catch (err) { showToast('Error: ' + err.message); }
+}
+
+async function deleteSavedUrl(idx) {
+  try {
+    const res = await fetch(API_BASE + '/api/saved-urls/' + idx, { method: 'DELETE' });
+    savedUrlsCache = await res.json();
+    updateUrlDatalist();
+    renderSavedUrlsList();
+  } catch (err) { showToast('Error: ' + err.message); }
+}
+
+function copyToClipboard(text) {
+  navigator.clipboard.writeText(text).then(() => showToast('Copied!')).catch(() => {});
+}
+
+// Event delegation for saved URL buttons
+document.addEventListener('click', (e) => {
+  const copyBtn = e.target.closest('.saved-url-copy');
+  const deleteBtn = e.target.closest('.saved-url-delete');
+  if (copyBtn) copyToClipboard(copyBtn.dataset.url);
+  if (deleteBtn) deleteSavedUrl(parseInt(deleteBtn.dataset.idx));
+});
+
 // ── STEP LIBRARY PENDING REVIEW ──────────────────────────────────────────────
 let pendingStepsCache = [];