pinokiod 5.1.35 → 5.1.36

package/kernel/git.js

@@ -84,6 +84,17 @@ class Git {
     const offM = pad2(abs % 60)
     return `${y}-${m}-${day}T${hh}:${mm}:${ss}${sign}${offH}:${offM}`
   }
+  normalizeRepoPath(rawPath) {
+    if (typeof rawPath !== "string") return "."
+    let value = rawPath.trim()
+    if (!value) return "."
+    value = value.replace(/\\/g, "/").replace(/\/{2,}/g, "/")
+    if (value === "." || value === "./") return "."
+    if (value.startsWith("./")) {
+      value = value.slice(2)
+    }
+    return value || "."
+  }
   upsertCommitMeta(repoUrlNorm, sha, meta) {
     if (!repoUrlNorm || typeof repoUrlNorm !== "string") return false
     if (!this.isCommitSha(sha)) return false
@@ -231,7 +242,7 @@ class Git {
     const repos = []
     for (const repo of rawRepos) {
       if (!repo) continue
-      const pathVal = typeof repo.path === "string" && repo.path.length > 0 ? repo.path : "."
+      const pathVal = this.normalizeRepoPath(repo.path)
       let remote = typeof repo.remote === "string" && repo.remote.length > 0 ? repo.remote : null
       if (!remote) remote = typeof repo.repo === "string" && repo.repo.length > 0 ? repo.repo : null
       const commit = typeof repo.commit === "string" && repo.commit.length > 0 ? repo.commit : null
@@ -559,6 +570,40 @@ class Git {
     await this.saveManifest()
     return true
   }
+  async deleteCheckpoint(remoteKey, checkpointId) {
+    if (!remoteKey || checkpointId == null) return { ok: false, error: "invalid" }
+    const apps = this.apps()
+    const entry = apps[remoteKey]
+    if (!entry || !Array.isArray(entry.checkpoints)) return { ok: false, error: "not_found" }
+    const idStr = String(checkpointId)
+    const idx = entry.checkpoints.findIndex((c) => c && String(c.id) === idStr)
+    if (idx < 0) return { ok: false, error: "not_found" }
+    const record = entry.checkpoints[idx]
+    entry.checkpoints.splice(idx, 1)
+    await this.saveManifest()
+    const hash = record && record.hash ? String(record.hash) : null
+    let fileDeleted = false
+    if (hash) {
+      let stillUsed = false
+      for (const entry of Object.values(apps)) {
+        if (!entry || !Array.isArray(entry.checkpoints)) continue
+        if (entry.checkpoints.some((c) => c && String(c.hash) === hash)) {
+          stillUsed = true
+          break
+        }
+      }
+      if (!stillUsed) {
+        const filePath = this.checkpointFilePath(hash)
+        if (filePath) {
+          try {
+            await fs.promises.rm(filePath, { force: true })
+            fileDeleted = true
+          } catch (_) {}
+        }
+      }
+    }
+    return { ok: true, hash, fileDeleted }
+  }
   async logCheckpointRestore(event) {
     const logEntry = {
       ts: Date.now(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "5.1.35",
+  "version": "5.1.36",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/index.js

@@ -5205,6 +5205,38 @@ class Server {
       }
       res.json({ ok: true, redirect: `/p/${encodeURIComponent(folder)}` })
     }))
+    this.app.post("/checkpoints/delete", ex(async (req, res) => {
+      const remoteRaw = typeof req.body.remote === 'string'
+        ? req.body.remote.trim()
+        : (typeof req.query.remote === 'string' ? req.query.remote.trim() : '')
+      const remoteKeyRaw = typeof req.body.remoteKey === 'string'
+        ? req.body.remoteKey.trim()
+        : (typeof req.query.remoteKey === 'string' ? req.query.remoteKey.trim() : '')
+      const snapshotRaw = Object.prototype.hasOwnProperty.call(req.body || {}, "snapshotId")
+        ? req.body.snapshotId
+        : (Object.prototype.hasOwnProperty.call(req.query || {}, "snapshotId") ? req.query.snapshotId : "")
+      const snapshotId = snapshotRaw === 'latest'
+        ? ''
+        : (snapshotRaw == null ? '' : String(snapshotRaw))
+      const remoteKey = remoteKeyRaw || (remoteRaw ? this.kernel.git.normalizeRemote(remoteRaw) : '')
+      if (!snapshotId || !remoteKey) {
+        res.status(400).json({ ok: false, error: "Missing parameters" })
+        return
+      }
+      const result = await this.kernel.git.deleteCheckpoint(remoteKey, snapshotId)
+      if (!result || !result.ok) {
+        res.status(404).json({ ok: false, error: "Snapshot not found" })
+        return
+      }
+      res.json({
+        ok: true,
+        deleted: {
+          id: snapshotId,
+          hash: result.hash || null,
+          fileDeleted: !!result.fileDeleted
+        }
+      })
+    }))
     this.app.get("/checkpoints/restore/:workspace/:snapshotId", ex(async (req, res) => {
       const workspace = typeof req.params.workspace === 'string' ? req.params.workspace : ''
       const snapshotId = req.params.snapshotId
@@ -8652,6 +8684,56 @@ class Server {
     }))
 
 
+    this.app.get("/info/apps", ex(async (req, res) => {
+      const apps = []
+      try {
+        const apipath = this.kernel.path("api")
+        const entries = await fs.promises.readdir(apipath, { withFileTypes: true })
+        for (const entry of entries) {
+          let type
+          try {
+            type = await Util.file_type(apipath, entry)
+          } catch (typeErr) {
+            console.warn('Failed to inspect api entry', entry.name, typeErr)
+            continue
+          }
+          if (!type || !type.directory) {
+            continue
+          }
+          try {
+            const meta = await this.kernel.api.meta(entry.name)
+            apps.push({
+              name: entry.name,
+              title: meta && meta.title ? meta.title : entry.name,
+              description: meta && meta.description ? meta.description : '',
+              icon: meta && meta.icon ? meta.icon : "/pinokio-black.png"
+            })
+          } catch (metaError) {
+            console.warn('Failed to load app metadata', entry.name, metaError)
+            apps.push({
+              name: entry.name,
+              title: entry.name,
+              description: '',
+              icon: "/pinokio-black.png"
+            })
+          }
+        }
+      } catch (enumerationError) {
+        console.warn('Failed to enumerate api apps for url dropdown', enumerationError)
+      }
+
+      apps.sort((a, b) => {
+        const at = (a.title || a.name || '').toLowerCase()
+        const bt = (b.title || b.name || '').toLowerCase()
+        if (at < bt) return -1
+        if (at > bt) return 1
+        return (a.name || '').localeCompare(b.name || '')
+      })
+
+      res.json({ apps })
+    }))
+
+
     this.app.get("/info/procs", ex(async (req, res) => {
       await this.kernel.processes.refresh()
 

package/server/public/nav.js

@@ -25,8 +25,25 @@ document.addEventListener("DOMContentLoaded", () => {
     return;
   }
 
+  const homeIcon = homeLink ? homeLink.querySelector("img.icon") : null;
+  const ensureHomeExpandIcon = () => {
+    if (!homeLink || !homeIcon) {
+      return null;
+    }
+    let icon = homeLink.querySelector(".home-expand-icon");
+    if (!icon) {
+      icon = document.createElement("i");
+      icon.className = "fa-solid fa-expand home-expand-icon";
+      icon.setAttribute("aria-hidden", "true");
+      homeLink.appendChild(icon);
+    }
+    return icon;
+  };
+  ensureHomeExpandIcon();
+
   // Helper functions used during initial restore must be defined before use
-  const MIN_MARGIN = 8;
+  const MIN_MARGIN = 0;
+  const LEGACY_MARGIN = 8;
 
   function clampPosition(left, top, sizeOverride) {
     const rect = header.getBoundingClientRect();
@@ -168,19 +185,24 @@ document.addEventListener("DOMContentLoaded", () => {
   // Restore persisted or respect DOM state on load (per path, per session)
   const persisted = readPersisted();
   const restoreFromStorage = !!(persisted && persisted.minimized);
+  const hasStoredPosition = !!(persisted && Number.isFinite(persisted.left) && Number.isFinite(persisted.top));
+  const isLegacyDefault = hasStoredPosition
+    && Math.abs(persisted.left - LEGACY_MARGIN) < 0.5
+    && Math.abs(persisted.top - LEGACY_MARGIN) < 0.5;
+  const useStoredPosition = restoreFromStorage && hasStoredPosition && !isLegacyDefault;
   const domIsMinimized = header.classList.contains("minimized");
   if (restoreFromStorage || domIsMinimized) {
     header.classList.add("minimized");
     // Use minimized size for clamping/positioning
     const size = measureRect((clone) => { clone.classList.add("minimized"); });
-    const fallbackLeft = Math.max(MIN_MARGIN, window.innerWidth - size.width - MIN_MARGIN);
-    const fallbackTop = Math.max(MIN_MARGIN, window.innerHeight - size.height - MIN_MARGIN);
-    const left = restoreFromStorage && Number.isFinite(persisted.left) ? persisted.left : fallbackLeft;
-    const top = restoreFromStorage && Number.isFinite(persisted.top) ? persisted.top : fallbackTop;
+    const fallbackLeft = MIN_MARGIN;
+    const fallbackTop = MIN_MARGIN;
+    const left = useStoredPosition ? persisted.left : fallbackLeft;
+    const top = useStoredPosition ? persisted.top : fallbackTop;
     const clamped = clampPosition(left, top, size);
     state.lastLeft = clamped.left;
     state.lastTop = clamped.top;
-    state.hasCustomPosition = restoreFromStorage;
+    state.hasCustomPosition = useStoredPosition;
     state.minimized = true;
     // Apply immediately and once after layout settles
     applyPosition(clamped.left, clamped.top);
@@ -234,8 +256,8 @@ document.addEventListener("DOMContentLoaded", () => {
       clone.classList.add("minimized");
     });
 
-    const defaultLeft = Math.max(MIN_MARGIN, window.innerWidth - minimizedSize.width - MIN_MARGIN);
-    const defaultTop = Math.max(MIN_MARGIN, window.innerHeight - minimizedSize.height - MIN_MARGIN);
+    const defaultLeft = MIN_MARGIN;
+    const defaultTop = MIN_MARGIN;
     const targetLeft = state.hasCustomPosition ? state.lastLeft : defaultLeft;
     const targetTop = state.hasCustomPosition ? state.lastTop : defaultTop;
 

package/server/public/style.css

@@ -2978,7 +2978,6 @@ header.navheader.minimized {
   height: auto;
   max-height: none;
   padding: 4px 8px;
-  border-radius: 12px;
   background: var(--light-nav-bg);
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
   display: inline-flex;
@@ -3052,9 +3051,23 @@ header.navheader.minimized .home {
   padding: 0;
 }
 header.navheader.minimized .home .icon {
+  display: none;
   width: 24px;
   height: 24px;
 }
+header.navheader .home .home-expand-icon {
+  display: none;
+}
+header.navheader.minimized .home .home-expand-icon {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+  color: inherit;
+}
 
 
 header.navheader.transitioning {

package/server/public/urldropdown.js

@@ -69,6 +69,7 @@ function initUrlDropdown(config = {}) {
     clearBehavior: config.clearBehavior || 'empty', // 'empty' or 'restore'
     defaultValue: config.defaultValue || '',
     apiEndpoint: config.apiEndpoint || '/info/procs',
+    appsEndpoint: config.appsEndpoint || '/info/apps',
     ...config
   };
 
@@ -218,9 +219,113 @@ function initUrlDropdown(config = {}) {
     return `<div class="url-mode-buttons" role="group" aria-label="Project views">${buttonsHtml}</div>`;
   };
 
+  const getAppBasePath = (app) => {
+    if (!app || !app.name) return '';
+    return `/p/${encodeURIComponent(app.name)}`;
+  };
+
+  const getAppDisplayTitle = (app) => {
+    if (!app) return 'Untitled app';
+    return app.title || app.name || 'Untitled app';
+  };
+
+  const buildAppProjectContext = (app, origin) => {
+    const basePath = getAppBasePath(app);
+    if (!basePath) return null;
+    return {
+      origin: origin || '',
+      project: app.name,
+      basePath,
+      currentMode: 'run'
+    };
+  };
+
+  const buildAppsSectionHtml = (apps, {
+    includeCurrentTab = true,
+    currentUrl = '',
+    currentTitle = 'Current tab',
+    currentProject = null,
+    origin = ''
+  } = {}) => {
+    const entries = [];
+
+    if (includeCurrentTab && currentUrl) {
+      const schemeLabel = currentUrl.startsWith('https://') ? 'HTTPS' : 'HTTP';
+      const currentPathLabel = currentProject ? currentProject.basePath : formatUrlLabel(currentUrl) || currentUrl;
+      const projectButtons = currentProject ? buildProjectModeButtons(currentProject) : '';
+      entries.push(`
+        <div class="url-dropdown-item${currentProject ? ' non-selectable current-project' : ''}" data-url="${escapeAttribute(currentUrl)}" data-host-type="current">
+          <div class="url-dropdown-name">
+            <span>
+              <i class="fa-solid fa-clone"></i>
+              ${escapeHtml(currentTitle)}
+            </span>
+          </div>
+          ${currentProject ? `
+            <div class="url-dropdown-url">
+              <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
+              <span class="url-address">${escapeHtml(currentPathLabel)}</span>
+            </div>
+            ${projectButtons}
+          ` : `
+            <div class="url-dropdown-url">
+              <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
+              <span class="url-address">${escapeHtml(currentPathLabel)}</span>
+            </div>
+          `}
+        </div>
+      `);
+    }
+
+    (Array.isArray(apps) ? apps : []).forEach((app) => {
+      if (!app || !app.name) return;
+      if (currentProject && app.name === currentProject.project) {
+        return;
+      }
+      const projectCtx = buildAppProjectContext(app, origin);
+      if (!projectCtx) return;
+      const displayUrl = projectCtx.origin ? `${projectCtx.origin}${projectCtx.basePath}` : projectCtx.basePath;
+      const schemeLabel = displayUrl.startsWith('https://') ? 'HTTPS' : 'HTTP';
+      const projectButtons = buildProjectModeButtons(projectCtx);
+      const displayTitle = getAppDisplayTitle(app);
+      entries.push(`
+        <div class="url-dropdown-item non-selectable current-project" data-url="${escapeAttribute(displayUrl)}" data-host-type="current">
+          <div class="url-dropdown-name">
+            <span>
+              <i class="fa-solid fa-box"></i>
+              ${escapeHtml(displayTitle)}
+            </span>
+          </div>
+          <div class="url-dropdown-url">
+            <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
+            <span class="url-address">${escapeHtml(projectCtx.basePath)}</span>
+          </div>
+          ${projectButtons}
+        </div>
+      `);
+    });
+
+    if (entries.length === 0) {
+      return '';
+    }
+
+    return `
+      <div class="url-dropdown-host-header current-tab">
+        <span class="host-name">Apps</span>
+      </div>
+      ${entries.join('')}
+    `;
+  };
+
   let isDropdownVisible = false;
   let allProcesses = []; // Store all processes for filtering
   let filteredProcesses = []; // Store currently filtered processes
+  let allApps = [];
+  let filteredApps = [];
+  let processesLoaded = false;
+  let appsLoaded = false;
+  let processesFetchPromise = null;
+  let appsFetchPromise = null;
   let createLauncherModal = null;
   let pendingCreateDetail = null;
   let mobileModalKeydownHandler = null;
@@ -266,7 +371,7 @@ function initUrlDropdown(config = {}) {
       if (!el) {
         return;
       }
-      const val = el.value;
+      const val = el.value
       const type = el.getAttribute("data-host-type");
       openUrlWithType(val, type);
     });
@@ -285,28 +390,21 @@ function initUrlDropdown(config = {}) {
     }
   }
 
-  function showDropdown() {
-    if (!dropdown || !urlInput) return;
-    if (isDropdownVisible && allProcesses.length > 0) {
-      // If dropdown is already visible and we have data, show all initially
-      showAllProcesses();
-      return;
+  const normalizeAppsResponse = (data) => {
+    if (!data) return [];
+    if (Array.isArray(data.apps)) return data.apps;
+    if (Array.isArray(data)) return data;
+    return [];
+  };
+
+  const fetchProcesses = () => {
+    if (processesLoaded) {
+      return Promise.resolve(allProcesses);
     }
-    
-    isDropdownVisible = true;
-    dropdown.style.display = 'block';
-    
-    // If we already have processes data, show all initially
-    if (allProcesses.length > 0) {
-      showAllProcesses();
-      return;
+    if (processesFetchPromise) {
+      return processesFetchPromise;
     }
-    
-    // Otherwise, show loading and fetch data
-    dropdown.innerHTML = '<div class="url-dropdown-loading">Loading running processes...</div>';
-    
-    // Fetch processes from API
-    fetch(options.apiEndpoint)
+    processesFetchPromise = fetch(options.apiEndpoint)
       .then(response => {
         if (!response.ok) {
           throw new Error(`HTTP ${response.status}: ${response.statusText}`);
@@ -315,18 +413,90 @@ function initUrlDropdown(config = {}) {
       })
       .then(data => {
         allProcesses = data.info || [];
-        showAllProcesses(); // Show all processes when dropdown first opens
+        processesLoaded = true;
+        return allProcesses;
       })
       .catch(error => {
         console.error('Failed to fetch processes:', error);
-        dropdown.innerHTML = '<div class="url-dropdown-empty">Failed to load processes</div>';
         allProcesses = [];
+        processesLoaded = true;
+        return allProcesses;
+      })
+      .finally(() => {
+        processesFetchPromise = null;
+      });
+    return processesFetchPromise;
+  };
+
+  const fetchApps = () => {
+    if (appsLoaded) {
+      return Promise.resolve(allApps);
+    }
+    if (appsFetchPromise) {
+      return appsFetchPromise;
+    }
+    appsFetchPromise = fetch(options.appsEndpoint)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        allApps = normalizeAppsResponse(data);
+        appsLoaded = true;
+        return allApps;
+      })
+      .catch(error => {
+        console.error('Failed to fetch apps:', error);
+        allApps = [];
+        appsLoaded = true;
+        return allApps;
+      })
+      .finally(() => {
+        appsFetchPromise = null;
+      });
+    return appsFetchPromise;
+  };
+
+  function showDropdown() {
+    if (!dropdown || !urlInput) return;
+    const needsProcessFetch = !processesLoaded;
+    const needsAppsFetch = !appsLoaded;
+    if (isDropdownVisible && !needsProcessFetch && !needsAppsFetch) {
+      // If dropdown is already visible and we have data, show all initially
+      showAllProcesses();
+      return;
+    }
+    
+    isDropdownVisible = true;
+    dropdown.style.display = 'block';
+    
+    const hasAnyData = allProcesses.length > 0 || allApps.length > 0;
+    if (hasAnyData) {
+      showAllProcesses();
+    }
+    
+    if (!needsProcessFetch && !needsAppsFetch) {
+      return;
+    }
+
+    if (!hasAnyData) {
+      dropdown.innerHTML = '<div class="url-dropdown-loading">Loading apps and running processes...</div>';
+    }
+
+    Promise.allSettled([fetchApps(), fetchProcesses()])
+      .then(() => {
+        if (isDropdownVisible) {
+          showAllProcesses();
+        }
       });
   }
 
   function showAllProcesses() {
     filteredProcesses = allProcesses;
-    populateDropdown(filteredProcesses);
+    filteredApps = allApps;
+    populateDropdown(filteredProcesses, filteredApps);
   }
 
   function handleInputChange() {
@@ -339,9 +509,11 @@ function initUrlDropdown(config = {}) {
     if (urlInput.selectionStart === 0 && urlInput.selectionEnd === urlInput.value.length) {
       // Text is fully selected, show all processes until user starts typing
       filteredProcesses = allProcesses;
+      filteredApps = allApps;
     } else if (!query) {
       // No query, show all processes
       filteredProcesses = allProcesses;
+      filteredApps = allApps;
     } else {
       // Filter processes based on name and URL
       filteredProcesses = allProcesses.filter(process => {
@@ -352,9 +524,19 @@ function initUrlDropdown(config = {}) {
         const urls = getProcessFilterValues(process);
         return urls.some((value) => (value || '').toLowerCase().includes(query));
       });
+      filteredApps = allApps.filter(app => {
+        const name = (app && app.name ? app.name : '').toLowerCase();
+        const title = (app && app.title ? app.title : '').toLowerCase();
+        const description = (app && app.description ? app.description : '').toLowerCase();
+        if (name.includes(query) || title.includes(query) || description.includes(query)) {
+          return true;
+        }
+        const basePath = getAppBasePath(app);
+        return (basePath || '').toLowerCase().includes(query);
+      });
     }
     
-    populateDropdown(filteredProcesses);
+    populateDropdown(filteredProcesses, filteredApps);
   }
 
   function hideDropdown() {
@@ -526,54 +708,37 @@ function initUrlDropdown(config = {}) {
     return html;
   };
 
-  const buildDropdownHtml = (processes, { includeCurrentTab = true, inputElement } = {}) => {
+  const buildDropdownHtml = (processes, { includeCurrentTab = true, apps = [], inputElement } = {}) => {
     const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
     const currentTitle = typeof document !== 'undefined' ? (document.title || 'Current tab') : 'Current tab';
     const currentProject = parseProjectContext(currentUrl);
+    const origin = typeof window !== 'undefined' && window.location ? window.location.origin : '';
 
     let html = '';
-    if (includeCurrentTab && currentUrl) {
-      const schemeLabel = currentUrl.startsWith('https://') ? 'HTTPS' : 'HTTP';
-      const currentPathLabel = currentProject ? currentProject.basePath : formatUrlLabel(currentUrl) || currentUrl;
-      const projectButtons = currentProject ? buildProjectModeButtons(currentProject) : '';
-      html += `
-        <div class="url-dropdown-host-header current-tab">
-          <span class="host-name">Current tab</span>
-        </div>
-        <div class="url-dropdown-item${currentProject ? ' non-selectable current-project' : ''}" data-url="${escapeAttribute(currentUrl)}" data-host-type="current">
-          <div class="url-dropdown-name">
-            <span>
-              <i class="fa-solid fa-clone"></i>
-              ${escapeHtml(currentTitle)}
-            </span>
-          </div>
-          ${currentProject ? `
-            <div class="url-dropdown-url">
-              <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
-              <span class="url-address">${escapeHtml(currentPathLabel)}</span>
-            </div>
-            ${projectButtons}
-          ` : `
-            <div class="url-dropdown-url">
-              <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
-              <span class="url-address">${escapeHtml(currentPathLabel)}</span>
-            </div>
-          `}
-        </div>
-      `;
+    const appsHtml = buildAppsSectionHtml(apps, {
+      includeCurrentTab,
+      currentUrl,
+      currentTitle,
+      currentProject,
+      origin
+    });
+    if (appsHtml) {
+      html += appsHtml;
     }
 
-    if (!processes || processes.length === 0) {
-      html += createEmptyStateHtml(getEmptyStateMessage(inputElement));
-      return html;
+    if (processes && processes.length > 0) {
+      html += buildHostsHtml(processes);
+    }
+
+    if (!html) {
+      html = createEmptyStateHtml(getEmptyStateMessage(inputElement));
     }
 
-    html += buildHostsHtml(processes);
     return html;
   };
 
-  function populateDropdown(processes) {
-    dropdown.innerHTML = buildDropdownHtml(processes, { includeCurrentTab: true, inputElement: urlInput });
+  function populateDropdown(processes, apps) {
+    dropdown.innerHTML = buildDropdownHtml(processes, { includeCurrentTab: true, apps, inputElement: urlInput });
     attachCreateButtonHandler(dropdown, urlInput);
     attachUrlItemHandlers(dropdown);
   }
@@ -758,7 +923,7 @@ function initUrlDropdown(config = {}) {
     const description = document.createElement('p');
     description.className = 'url-modal-description';
     description.id = 'url-modal-description';
-    description.textContent = 'Enter a local URL or choose from running processes.';
+    description.textContent = 'Enter a local URL or choose from apps and running processes.';
 
     content.setAttribute('aria-labelledby', heading.id);
     content.setAttribute('aria-describedby', description.id);
@@ -980,46 +1145,46 @@ function initUrlDropdown(config = {}) {
 
     const includeCurrent = modalDropdown._includeCurrent !== false;
     modalDropdown._includeCurrent = includeCurrent;
+    const needsProcessFetch = !processesLoaded;
+    const needsAppsFetch = !appsLoaded;
 
-    const render = (processes) => {
+    const render = (processes, apps) => {
       modalDropdown.innerHTML = buildDropdownHtml(processes, {
         includeCurrentTab: includeCurrent,
+        apps,
         inputElement: modalDropdown.parentElement.querySelector('.url-modal-input')
       });
       attachCreateButtonHandler(modalDropdown, modalDropdown.parentElement.querySelector('.url-modal-input'));
       attachUrlItemHandlers(modalDropdown, { onSelect: handleModalSelection });
     };
 
-    if (allProcesses.length > 0) {
-      render(allProcesses);
+    const hasAnyData = allProcesses.length > 0 || allApps.length > 0;
+    if (hasAnyData) {
+      render(allProcesses, allApps);
+    }
+
+    if (!needsProcessFetch && !needsAppsFetch) {
       return;
     }
 
-    modalDropdown.innerHTML = '<div class="url-dropdown-loading">Loading running processes...</div>';
+    if (!hasAnyData) {
+      modalDropdown.innerHTML = '<div class="url-dropdown-loading">Loading apps and running processes...</div>';
+    }
 
-    fetch(options.apiEndpoint)
-      .then(response => {
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-        return response.json();
-      })
-      .then(data => {
-        allProcesses = data.info || [];
-        render(allProcesses);
-      })
-      .catch(error => {
-        console.error('Failed to fetch processes:', error);
-        modalDropdown.innerHTML = '<div class="url-dropdown-empty">Failed to load processes</div>';
+    Promise.allSettled([fetchApps(), fetchProcesses()])
+      .then(() => {
+        render(allProcesses, allApps);
       });
   }
   
   function handleModalInputChange(modalInput, modalDropdown) {
     const query = modalInput.value.toLowerCase().trim();
     let filtered = allProcesses;
+    let filteredAppList = allApps;
     
     if (modalInput.selectionStart === 0 && modalInput.selectionEnd === modalInput.value.length) {
       filtered = allProcesses;
+      filteredAppList = allApps;
     } else if (query) {
       filtered = allProcesses.filter(process => {
         const name = (process.name || '').toLowerCase();
@@ -1029,18 +1194,29 @@ function initUrlDropdown(config = {}) {
         const urls = getProcessFilterValues(process);
         return urls.some((value) => (value || '').toLowerCase().includes(query));
       });
+      filteredAppList = allApps.filter(app => {
+        const name = (app && app.name ? app.name : '').toLowerCase();
+        const title = (app && app.title ? app.title : '').toLowerCase();
+        const description = (app && app.description ? app.description : '').toLowerCase();
+        if (name.includes(query) || title.includes(query) || description.includes(query)) {
+          return true;
+        }
+        const basePath = getAppBasePath(app);
+        return (basePath || '').toLowerCase().includes(query);
+      });
     }
     
-    populateModalDropdown(filtered, modalDropdown);
+    populateModalDropdown(filtered, filteredAppList, modalDropdown);
   }
   
-  function populateModalDropdown(processes, modalDropdown) {
+  function populateModalDropdown(processes, apps, modalDropdown) {
     const modalInput = modalDropdown.parentElement.querySelector('.url-modal-input');
     const overlayRefs = getModalRefs();
     const includeCurrent = overlayRefs?.includeCurrent !== false;
 
     modalDropdown.innerHTML = buildDropdownHtml(processes, {
       includeCurrentTab: includeCurrent,
+      apps,
       inputElement: modalInput
     });
 
@@ -1061,6 +1237,12 @@ function initUrlDropdown(config = {}) {
     closeMobileModal,
     refresh: function() {
       allProcesses = []; // Clear cache to force refetch
+      allApps = [];
+      filteredApps = [];
+      processesLoaded = false;
+      appsLoaded = false;
+      processesFetchPromise = null;
+      appsFetchPromise = null;
       if (isDropdownVisible) {
         showDropdown();
       }
@@ -1069,7 +1251,7 @@ function initUrlDropdown(config = {}) {
     openSplitModal: function(modalOptions = {}) {
       return showMobileModal({
         title: modalOptions.title || 'Split View',
-        description: modalOptions.description || 'Choose a running process or use the current tab URL for the new pane.',
+        description: modalOptions.description || 'Choose an app, a running process, or use the current tab URL for the new pane.',
         confirmLabel: modalOptions.confirmLabel || 'Split',
         includeCurrent: modalOptions.includeCurrent !== false,
         awaitSelection: true,
@@ -1087,6 +1269,12 @@ function initUrlDropdown(config = {}) {
       closeMobileModal({ suppressResolve: true });
       allProcesses = [];
       filteredProcesses = [];
+      allApps = [];
+      filteredApps = [];
+      processesLoaded = false;
+      appsLoaded = false;
+      processesFetchPromise = null;
+      appsFetchPromise = null;
       if (fallbackElements.form && fallbackElements.form.parentElement) {
         fallbackElements.form.parentElement.removeChild(fallbackElements.form);
       }
@@ -1110,7 +1298,7 @@ function initUrlDropdown(config = {}) {
 
   function getEmptyStateMessage(inputElement) {
     const rawValue = inputElement.value.trim();
-    return rawValue ? `No processes match "${rawValue}"` : 'No running processes found';
+    return rawValue ? `No apps or processes match "${rawValue}"` : 'No apps or running processes found';
   }
 
   function createEmptyStateHtml(message) {

package/server/views/app.ejs

@@ -225,7 +225,7 @@ body.dark .appcanvas_filler {
   flex: 0 0 0px;
   align-items: stretch;
   justify-content: center;
-  cursor: grab;
+  cursor: col-resize;
   touch-action: none;
 }
 .appcanvas.vertical .appcanvas-resizer:hover::before {

package/server/views/checkpoints.ejs

@@ -229,6 +229,26 @@ body.dark .snapshot-card {
   font-size: 14px;
   font-weight: 600;
 }
+.snapshot-actions .snapshot-delete {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.url-modal-button.danger {
+  background: rgba(239, 68, 68, 0.12);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  color: rgba(185, 28, 28, 0.95);
+}
+.url-modal-button.danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.16);
+}
+body.dark .url-modal-button.danger {
+  background: rgba(239, 68, 68, 0.16);
+  border-color: rgba(248, 113, 113, 0.5);
+  color: rgba(254, 202, 202, 0.95);
+}
 .snapshot-option input[type="radio"] {
   margin-top: 6px;
 }
@@ -505,6 +525,7 @@ document.addEventListener("DOMContentLoaded", () => {
               <div class="snapshot-title"><i class="fa-regular fa-clock"></i> ${label}</div>
               <div class="snapshot-actions">
                 ${publishMarkup}
+                <button type="button" class="url-modal-button danger snapshot-delete" data-snapshot-id="${snap.id}">Delete</button>
                 <button type="button" class="url-modal-button confirm snapshot-install" data-snapshot-id="${snap.id}">Install</button>
               </div>
             </div>
@@ -572,15 +593,22 @@ document.addEventListener("DOMContentLoaded", () => {
         const hint = container.querySelector("#folder-hint")
         const closeBtn = container.querySelector('.url-modal-close')
         const installButtons = Array.from(container.querySelectorAll(".snapshot-install"))
+        const deleteButtons = Array.from(container.querySelectorAll(".snapshot-delete"))
+        const publishButtons = Array.from(container.querySelectorAll(".snapshot-publish"))
+        const actionButtons = installButtons.concat(deleteButtons, publishButtons)
         const loadingOverlay = container.querySelector("#backup-loading")
+        const loadingText = loadingOverlay ? loadingOverlay.querySelector(".backup-loading-text") : null
+        const defaultLoadingText = loadingText ? loadingText.textContent : ""
 
-        const setLoading = (isLoading) => {
+        const setLoading = (isLoading, message) => {
           if (loadingOverlay) {
             loadingOverlay.classList.toggle("hidden", !isLoading)
+            if (loadingText) {
+              loadingText.textContent = isLoading ? (message || defaultLoadingText) : defaultLoadingText
+            }
           }
-          installButtons.forEach((btn) => {
+          actionButtons.forEach((btn) => {
             btn.disabled = isLoading
-            if (isLoading) btn.textContent = "Installing..."
           })
           if (closeBtn) closeBtn.disabled = isLoading
         }
@@ -673,7 +701,7 @@ document.addEventListener("DOMContentLoaded", () => {
             installBtn.disabled = true
             installBtn.textContent = "Installing..."
           }
-          setLoading(true)
+          setLoading(true, "Installing...")
           try {
             const res = await fetch("/checkpoints/install", {
               method: "POST",
@@ -712,6 +740,97 @@ document.addEventListener("DOMContentLoaded", () => {
           }
         }
 
+        const updateItemRow = (currentItem) => {
+          if (!currentItem || !currentItem.remoteKey) return
+          const row = document.querySelector(`.backup-row[data-remote-key="${currentItem.remoteKey}"]`)
+          if (!row) return
+          const snapshots = Array.isArray(currentItem.snapshots) ? currentItem.snapshots : []
+          const badgeRow = row.querySelector(".description.backup-meta")
+          if (badgeRow) {
+            const badges = badgeRow.querySelectorAll(".badge")
+            if (badges.length > 1) {
+              const count = snapshots.length
+              badges[1].textContent = count
+                ? `${count} snapshot${count === 1 ? '' : 's'}`
+                : "No snapshots yet"
+            }
+          }
+          const latestRow = Array.from(row.querySelectorAll(".description.backup-meta"))
+            .find((el) => el.querySelector(".fa-regular.fa-clock"))
+          if (latestRow) {
+            if (!snapshots.length) {
+              latestRow.remove()
+            } else {
+              const span = latestRow.querySelector("span")
+              if (span) span.textContent = `Latest checkpoint: ${new Date(snapshots[0].id).toLocaleString()}`
+            }
+          }
+        }
+
+        const handleDelete = async (snapshotId, btn) => {
+          const idStr = snapshotId != null ? String(snapshotId).trim() : ""
+          if (!idStr || idStr === "latest") return
+          const installed = installedBySnapshot[idStr] || []
+          const snapInfo = Array.isArray(item.snapshots)
+            ? item.snapshots.find((snap) => snap && String(snap.id) === idStr)
+            : null
+          const confirmLines = [
+            "Delete this checkpoint locally?",
+            "This removes the local snapshot file and manifest entry."
+          ]
+          if (installed.length) {
+            confirmLines.push(`Installed in: ${installed.join(", ")}`)
+          }
+          if (snapInfo && snapInfo.sync && snapInfo.sync.status === "published") {
+            confirmLines.push("Cloud copy will remain in the registry.")
+          }
+          const confirmed = confirm(confirmLines.join("\n"))
+          if (!confirmed) return
+          if (btn) {
+            btn.disabled = true
+            btn.textContent = "Deleting..."
+          }
+          setLoading(true, "Deleting...")
+          try {
+            const res = await fetch("/checkpoints/delete", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+              },
+              body: JSON.stringify({
+                remote: item.remoteUrl,
+                snapshotId: idStr
+              })
+            })
+            const payload = res && res.ok ? await res.json() : null
+            if (payload && payload.ok) {
+              const option = btn ? btn.closest(".snapshot-option") : null
+              if (option) option.remove()
+              if (Array.isArray(item.snapshots)) {
+                item.snapshots = item.snapshots.filter((snap) => String(snap.id) !== idStr)
+              } else {
+                item.snapshots = []
+              }
+              if (installedBySnapshot && Object.prototype.hasOwnProperty.call(installedBySnapshot, idStr)) {
+                delete installedBySnapshot[idStr]
+              }
+              updateItemRow(item)
+            } else {
+              const msg = payload && payload.error ? payload.error : "Delete failed"
+              Swal.fire({ icon: "error", title: "Error", text: msg })
+            }
+          } catch (error) {
+            Swal.fire({ icon: "error", title: "Error", text: error && error.message ? error.message : "Delete failed" })
+          } finally {
+            if (btn) {
+              btn.disabled = false
+              btn.textContent = "Delete"
+            }
+            setLoading(false)
+          }
+        }
+
         installButtons.forEach((btn) => {
           btn.addEventListener("click", () => {
             const snapshotId = btn.getAttribute("data-snapshot-id") || 'latest'
@@ -719,7 +838,12 @@ document.addEventListener("DOMContentLoaded", () => {
           })
         })
 
-        const publishButtons = Array.from(container.querySelectorAll(".snapshot-publish"))
+        deleteButtons.forEach((btn) => {
+          btn.addEventListener("click", () => {
+            const snapshotId = btn.getAttribute("data-snapshot-id") || ''
+            handleDelete(snapshotId, btn)
+          })
+        })
 
         const highlightSnapshotId = opts && opts.highlightSnapshotId != null ? String(opts.highlightSnapshotId) : null
         setTimeout(() => {