pinokiod 3.108.0 → 3.110.0

package/kernel/bin/caddy.js

@@ -23,6 +23,26 @@ class Caddy {
     }
   }
   async start() {
+    // if peer.https_active is true,
+    // 1. kill existing caddy
+    // 2. start caddy
+    if (!this.kernel.peer || !("https_active" in this.kernel.peer)) {
+      // wait until they are available
+      await new Promise((resolve, reject) => {
+        let interval = setInterval(() => {
+          console.log("wait until peer becomes available")
+          if (this.kernel.peer && "https_active" in this.kernel.peer) {
+            console.log("peer ready")
+            clearInterval(interval)
+            resolve()
+          }
+        }, 1000)
+      })
+    }
+    if (!this.kernel.peer.https_active) {
+      console.log("https_active false")
+      return
+    }
 //    console.log("Existing caddy pid?", this.kernel.processes.caddy_pid)
     let running = await this.running()
     console.log("Caddy running?", running)

package/kernel/git.js

@@ -67,41 +67,39 @@ class Git {
         display_name = `${name}/${gitRelPathSansGit}`
         main = false
       }
+      let gitRemote = null
       try {
-        let gitRemote = await git.getConfig({
+        gitRemote = await git.getConfig({
           fs,
           http,
           dir,
           path: 'remote.origin.url'
         })
-        repos.push({
-          main,
-          name: display_name,
-          gitPath,
-          gitRelPath,
-          gitParentPath,
-          gitParentRelPath,
-          dir,
-          url: gitRemote,
-        })
-        if (!this.mapping[gitRemote]) {
+      } catch (_) {}
+
+      const repoEntry = {
+        main,
+        name: display_name,
+        gitPath,
+        gitRelPath,
+        gitParentPath,
+        gitParentRelPath,
+        dir,
+      }
+      if (gitRemote) {
+        repoEntry.url = gitRemote
+      }
+      repos.push(repoEntry)
+
+      if (gitRemote && !this.mapping[gitRemote]) {
+        try {
           let head = await this.getHead(gitParentPath)
           this.mapping[gitRemote] = {
             main,
             path: gitParentPath,
             head 
           }
-        }
-      } catch (e) {
-        repos.push({
-          main,
-          name: display_name,
-          gitPath,
-          gitRelPath,
-          gitParentPath,
-          gitParentRelPath,
-          dir,
-        })
+        } catch (_) {}
       }
       this.dirs.add(dir)
     }

package/kernel/peer.js

@@ -249,7 +249,7 @@ class PeerDiscovery {
   async router_info() {
     try {
       let processes = []
-      if (this.info[this.host]) {
+      if (this.info && this.info[this.host]) {
         let procs = this.info[this.host].proc
         let router = this.info[this.host].router
         let port_mapping = this.info[this.host].port_mapping
@@ -406,6 +406,7 @@ class PeerDiscovery {
     }
     return {
       active: this.active,
+      https_active: this.https_active,
       version: this.kernel.version,
       home: this.kernel.homedir,
       arch: this.kernel.arch,

package/package.json

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

package/server/index.js

@@ -484,98 +484,112 @@ class Server {
     }
   }
   async getGit(ref, filepath) {
-    let dir = this.kernel.path("api", filepath)
-    let branches = await git.listBranches({ fs, dir });
-    // no branch, means no git repo => initialize
-    if (branches.length === 0) {
-      return {}
-//      const defaultBranch = 'main';
-//      await git.init({ fs, dir, defaultBranch });
-//      branches = await git.listBranches({ fs, dir });
-//      const current = await git.currentBranch({ fs, dir, fullname: false }) || defaultBranch;
-//      if (!branches.includes(current)) {
-//        branches.unshift(current);
-//      }
-//      if (!ref || ref === 'HEAD') {
-//        ref = current;
-//      }
-    }
-    let log = []
+    const dir = this.kernel.path("api", filepath)
+
+    let branchList = []
     try {
-      log = await git.log({ fs, dir, depth: 50, ref: ref }); // fetch last 50 commits
-      log.forEach((item) => {
+      branchList = await git.listBranches({ fs, dir })
+    } catch (_) {}
+
+    const collectLog = async (targetRef) => {
+      const entries = await git.log({ fs, dir, depth: 50, ref: targetRef })
+      entries.forEach((item) => {
         item.info = `/gitcommit/${item.oid}/${filepath}`
       })
-    } catch (e) {
-      console.log("Log error", e)
+      return entries
+    }
+
+    let log = []
+    let logError = null
+    if (ref) {
+      try {
+        log = await collectLog(ref)
+      } catch (error) {
+        logError = error
+      }
+    }
+    if (log.length === 0) {
+      try {
+        log = await collectLog('HEAD')
+      } catch (error) {
+        if (!logError) {
+          logError = error
+        }
+      }
+    }
+
+    let currentBranch = null
+    try {
+      currentBranch = await git.currentBranch({ fs, dir, fullname: false })
+    } catch (_) {}
+
+    let branches = []
+    if (branchList.length > 0) {
+      branches = branchList.map((name) => ({
+        branch: name,
+        selected: currentBranch ? name === currentBranch : false
+      }))
+      if (!currentBranch && log.length > 0) {
+        const headOid = log[0].oid
+        branches = [{ branch: headOid, selected: true }, ...branches.map((entry) => ({ ...entry, selected: false }))]
+        currentBranch = headOid
+      }
+    } else {
+      if (currentBranch) {
+        branches = [{ branch: currentBranch, selected: true }]
+      } else if (log.length > 0) {
+        const headOid = log[0].oid
+        branches = [{ branch: headOid, selected: true }]
+        currentBranch = headOid
+      }
+    }
+
+    if (!currentBranch && log.length > 0) {
+      currentBranch = log[0].oid
+    }
+
+    if (branches.length === 0) {
+      branches = [{ branch: currentBranch || 'HEAD', selected: true }]
     }
 
-    let config = await this.kernel.git.config(dir)
+    const config = await this.kernel.git.config(dir)
 
     let hosts = ""
-    let hosts_file = this.kernel.path("config/gh/hosts.yml")
-    let e = await this.exists(hosts_file)
-    if (e) {
-      hosts = await fs.promises.readFile(hosts_file, "utf8")
+    const hostsFile = this.kernel.path("config/gh/hosts.yml")
+    if (await this.exists(hostsFile)) {
+      hosts = await fs.promises.readFile(hostsFile, "utf8")
       if (hosts.startsWith("{}")) {
         hosts = ""
       }
     }
-    let connected = (hosts.length > 0)
+    const connected = hosts.length > 0
+
     let remote = null
-    if (config["remote \"origin\""]) {
+    if (config && config["remote \"origin\""]) {
       remote = config["remote \"origin\""].url
     }
 
-    // Get all remotes
     let remotes = []
     try {
       remotes = await git.listRemotes({ fs, dir, verbose: true })
-    } catch (e) {
-      console.log("Remotes error", e)
-    }
+    } catch (_) {}
 
-    let branch = await git.currentBranch({ fs, dir, fullname: false });
+    if (!currentBranch) {
+      currentBranch = 'HEAD'
+    }
 
-    const remote2 = await git.getConfig({
-      fs,
+    return {
+      ref,
+      config,
+      remote,
+      remotes,
+      connected,
+      log,
+      branch: currentBranch,
+      branches,
       dir,
-      path: `branch.${branch}.remote`
-    });
-
-    // if current branch exitss => currengt branch is selected
-    // if current branch does not exist => get logs[0].oid
-    if (branch) {
-      branches = branches.map((b) => {
-        if (b === branch) {
-          return {
-            branch: b,
-            selected: true
-          }
-        } else {
-          return {
-            branch: b,
-            selected: false
-          }
-        }
-      })
-    } else {
-      branches.push(log[0].oid)
-      branches = branches.map((b) => {
-        if (b === log[0].oid) {
-          return {
-            branch: b,
-            selected: true
-          }
-        } else {
-          return {
-            branch: b,
-            selected: false
-          }
-        }
-      })
+      logError: logError ? String(logError.message || logError) : null
     }
-    return { ref, config, remote, remotes, connected, log, branch, branches, dir }
   }
   async init_env(env_dir_path, options) {
     let current = this.kernel.path(env_dir_path, "ENVIRONMENT")
@@ -4084,11 +4098,14 @@ class Server {
         defaultUrl.searchParams.set('mode', 'settings')
       }
 
+      const initialPath = initialUrl.pathname + initialUrl.search + initialUrl.hash
+      const defaultPath = defaultUrl.pathname + defaultUrl.search + defaultUrl.hash
+
       res.render('layout', {
         theme: this.theme,
         agent: req.agent,
-        initialPath: initialUrl.pathname + initialUrl.search + initialUrl.hash,
-        defaultPath: defaultUrl.pathname + defaultUrl.search + defaultUrl.hash,
+        initialPath,
+        defaultPath,
         sessionId: typeof req.query.session === 'string' ? req.query.session : null
       })
     }))
@@ -5532,7 +5549,6 @@ class Server {
 //    }))
     this.app.post("/env", ex(async (req, res) => {
       let fullpath = path.resolve(this.kernel.homedir, req.body.filepath, "ENVIRONMENT")
-      console.log({ fullpath })
       let updated = req.body.vals
       let hosts = req.body.hosts
       await Util.update_env(fullpath, updated)

package/server/public/layout.js

@@ -37,6 +37,26 @@
   const leafElements = new Map();
   const gutterElements = new Map();
   const layoutCache = new Map();
+  const PRESERVED_QUERY_PARAMS = new Set(['session']);
+
+  function stripTransientQueryParams() {
+    try {
+      const url = new URL(window.location.href);
+      let changed = false;
+      const keys = Array.from(url.searchParams.keys());
+      keys.forEach((key) => {
+        if (!PRESERVED_QUERY_PARAMS.has(key)) {
+          url.searchParams.delete(key);
+          changed = true;
+        }
+      });
+      if (changed) {
+        window.history.replaceState(window.history.state, '', url.toString());
+      }
+    } catch (_) {
+      // ignore malformed URLs
+    }
+  }
 
   function normalizeSrc(raw) {
     if (!raw || typeof raw !== 'string') {
@@ -698,6 +718,7 @@
     applyLayout();
     attachGutterHandlers();
     broadcastLayoutState();
+    stripTransientQueryParams();
   }
 
   function onResize() {

package/server/views/app.ejs

@@ -890,6 +890,33 @@ body.dark .tab-link-popover .tab-link-popover-item .value {
 body.dark .tab-link-popover .tab-link-popover-item .value .muted {
   color: rgba(226, 232, 240, 0.65);
 }
+.tab-link-popover .tab-link-popover-footer {
+  border-top: 1px solid rgba(15, 23, 42, 0.08);
+  margin-top: 4px;
+  padding-top: 12px;
+  background: rgba(59, 130, 246, 0.12);
+  color: #1d4ed8;
+}
+.tab-link-popover .tab-link-popover-footer .label,
+.tab-link-popover .tab-link-popover-footer .value {
+  color: inherit;
+}
+.tab-link-popover .tab-link-popover-footer .value {
+  font-weight: 600;
+}
+.tab-link-popover .tab-link-popover-footer:hover,
+.tab-link-popover .tab-link-popover-footer:focus-visible {
+  background: rgba(37, 99, 235, 0.2);
+}
+body.dark .tab-link-popover .tab-link-popover-footer {
+  border-top-color: rgba(148, 163, 184, 0.2);
+  background: rgba(96, 165, 250, 0.22);
+  color: #bfdbfe;
+}
+body.dark .tab-link-popover .tab-link-popover-footer:hover,
+body.dark .tab-link-popover .tab-link-popover-footer:focus-visible {
+  background: rgba(147, 197, 253, 0.35);
+}
 .tab.has-preview .tab-preview {
   color: rgba(0, 0, 0, 0.6);
   min-width: 0;
@@ -1947,6 +1974,40 @@ body.dark {
   background: #2d6ae0 !important;
 }
 
+.pinokio-github-login-modal.swal2-popup {
+  max-width: 420px !important;
+  width: calc(100vw - 48px) !important;
+}
+.pinokio-github-login {
+  padding: 36px 40px 32px 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 14px;
+}
+.pinokio-github-login__icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  background: var(--pinokio-modal-icon-bg);
+  color: var(--pinokio-modal-icon-color);
+  font-size: 28px;
+}
+.pinokio-github-login__title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--pinokio-modal-text);
+}
+.pinokio-github-login__body {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--pinokio-modal-subtitle-color);
+  max-width: 280px;
+}
+
 .pinokio-modern-modal.swal2-popup {
   background: var(--pinokio-modal-bg) !important;
   color: var(--pinokio-modal-text) !important;
@@ -3054,6 +3115,7 @@ body.dark {
   let tabLinkLocalInfoExpiry = 0
   let tabLinkRouterInfoPromise = null
   let tabLinkRouterInfoExpiry = 0
+  let tabLinkRouterHttpsActive = null
 
   const ensureTabLinkPopoverEl = () => {
     if (!tabLinkPopoverEl) {
@@ -3078,7 +3140,12 @@ body.dark {
         event.stopPropagation()
         const url = item.getAttribute("data-url")
         if (url) {
-          window.open(url, "_blank", "noopener")
+          const targetMode = (item.getAttribute("data-target") || "_blank").toLowerCase()
+          if (targetMode === "_self") {
+            window.location.assign(url)
+          } else {
+            window.open(url, "_blank", "noopener")
+          }
         }
         hideTabLinkPopover({ immediate: true })
       })
@@ -3395,6 +3462,9 @@ body.dark {
           return response.json()
         })
         .then((data) => {
+          if (typeof data?.https_active === "boolean") {
+            tabLinkRouterHttpsActive = data.https_active
+          }
           const processes = Array.isArray(data?.router_info) ? data.router_info : []
           const rewriteMapping = data?.rewrite_mapping && typeof data.rewrite_mapping === "object"
             ? Object.values(data.rewrite_mapping)
@@ -3628,10 +3698,13 @@ body.dark {
             hostPortMap
           }
         })
-        .catch(() => ({
-          portMap: new Map(),
-          hostPortMap: new Map()
-        }))
+        .catch(() => {
+          tabLinkRouterHttpsActive = null
+          return {
+            portMap: new Map(),
+            hostPortMap: new Map()
+          }
+        })
       tabLinkRouterInfoExpiry = now + 3000
     }
     return tabLinkRouterInfoPromise
@@ -3991,6 +4064,8 @@ body.dark {
     header.innerHTML = `<i class="fa-solid fa-arrow-up-right-from-square"></i><span>Open in browser</span>`
     popover.appendChild(header)
 
+    const hasHttpsEntry = entries.some((entry) => entry && entry.type === "https")
+
     entries.forEach((entry) => {
       const item = document.createElement("button")
       item.type = "button"
@@ -4006,6 +4081,26 @@ body.dark {
       popover.appendChild(item)
     })
 
+    if (tabLinkRouterHttpsActive === false && !hasHttpsEntry) {
+      const footerButton = document.createElement("button")
+      footerButton.type = "button"
+      footerButton.className = "tab-link-popover-item tab-link-popover-footer"
+      footerButton.setAttribute("data-url", "/network")
+      footerButton.setAttribute("data-target", "_self")
+      footerButton.setAttribute("aria-label", "Open network settings to configure local HTTPS")
+
+      const footerLabel = document.createElement("span")
+      footerLabel.className = "label"
+      footerLabel.textContent = "Custom domain not active"
+
+      const footerValue = document.createElement("span")
+      footerValue.className = "value"
+      footerValue.textContent = "Click to activate"
+
+      footerButton.append(footerLabel, footerValue)
+      popover.appendChild(footerButton)
+    }
+
     tabLinkActiveLink = link
     tabLinkPendingLink = null
     positionTabLinkPopover(popover, link)
@@ -4160,6 +4255,13 @@ body.dark {
       })(),
       target: node.getAttribute('target') || null,
       dataIndex: node.getAttribute('data-index') || null,
+      pagePath: (() => {
+        try {
+          return window.location?.pathname || null
+        } catch (_) {
+          return null
+        }
+      })()
     }
     try {
       const key = selectionStorageKey()
@@ -4173,24 +4275,41 @@ body.dark {
       })
     } catch (_) {}
   }
-  const restorePersistedFrameLink = () => {
+  const restorePersistedFrameLink = (providedPayload = null) => {
     const storage = getWindowStorage()
-    if (!storage) {
-      return null
-    }
     const key = selectionStorageKey()
-    if (!key) {
-      return null
+    const currentPath = (() => {
+      try {
+        return window.location?.pathname || ""
+      } catch (_) {
+        return ""
+      }
+    })()
+    let payload = providedPayload
+    if (!payload) {
+      if (!storage || !key) {
+        return null
+      }
+      const raw = storage.getItem(key)
+      if (!raw) {
+        return null
+      }
+      try {
+        payload = JSON.parse(raw)
+      } catch (_) {
+        payload = { selector: raw }
+      }
     }
-    const raw = storage.getItem(key)
-    if (!raw) {
+    if (!payload) {
       return null
     }
-    let payload
-    try {
-      payload = JSON.parse(raw)
-    } catch (_) {
-      payload = { selector: raw }
+    if (typeof payload === 'object' && payload !== null && typeof payload.pagePath === 'string') {
+      if (currentPath && payload.pagePath !== currentPath) {
+        return null
+      }
+    }
+    if (typeof payload === 'string') {
+      payload = { selector: payload }
     }
     const trySelector = (selector) => {
       if (!selector || typeof selector !== 'string') {
@@ -4849,14 +4968,48 @@ body.dark {
   const renderSelection = async ({ event: eventParam = null, target: explicitTarget = null, force = false } = {}) => {
     const storage = getWindowStorage()
     const selectionKey = selectionStorageKey()
-    const originalHasPersistedSelection = Boolean(selectionKey && storage && storage.getItem(selectionKey))
+    const currentPath = (() => {
+      try {
+        return window.location?.pathname || ""
+      } catch (_) {
+        return ""
+      }
+    })()
     let persistedSelectionRaw = selectionKey && storage ? storage.getItem(selectionKey) : null
+    const devRouteActive = /\/dev(?:$|\/)/.test(currentPath || "")
+    let persistedSelectionPayload = null
+    if (persistedSelectionRaw) {
+      try {
+        const parsed = JSON.parse(persistedSelectionRaw)
+        if (parsed && typeof parsed === "object") {
+          if (typeof parsed.pagePath === "string") {
+            if (!currentPath || parsed.pagePath === currentPath) {
+              persistedSelectionPayload = parsed
+            }
+          } else if (!devRouteActive) {
+            persistedSelectionPayload = parsed
+          }
+        }
+      } catch (_) {
+        if (!devRouteActive) {
+          persistedSelectionPayload = { selector: persistedSelectionRaw }
+        }
+      }
+    }
+    if (!persistedSelectionPayload) {
+      persistedSelectionRaw = null
+    }
+    const originalHasPersistedSelection = Boolean(persistedSelectionPayload)
     const skipPersistedSelection = ignorePersistedSelection
     let hasPersistedSelection = skipPersistedSelection ? false : originalHasPersistedSelection
     if (skipPersistedSelection) {
       persistedSelectionRaw = null
+      persistedSelectionPayload = null
     }
 
+    const triggeredByUser = Boolean(eventParam || explicitTarget)
+    let resolvedByGlobalSelector = false
+
     let target = explicitTarget
     let preselected = null
 
@@ -4869,22 +5022,22 @@ body.dark {
       if (candidate) {
         target = candidate
         global_selector = null
+        resolvedByGlobalSelector = true
       } else {
         scheduleSelectionRetry()
         return
       }
     }
 
+    console.log({ target, skipPersistedSelection })
     if (!target && !skipPersistedSelection) {
       preselected = document.querySelector('#devtab.frame-link.selected') || document.querySelector('.frame-link.selected')
-      if (preselected) {
-        target = preselected
-      }
+      console.log({ preselected })
     }
 
-    if (!target && persistedSelectionRaw) {
-      target = restorePersistedFrameLink()
-      if (!target && persistedSelectionRaw) {
+    if (!target && persistedSelectionPayload) {
+      target = restorePersistedFrameLink(persistedSelectionPayload)
+      if (!target && originalHasPersistedSelection) {
         scheduleSelectionRetry()
         return
       }
@@ -4898,11 +5051,18 @@ body.dark {
       }
     }
 
-    if (!target && skipPersistedSelection) {
+    const devTab = document.querySelector('#devtab.frame-link')
+    if (!triggeredByUser && !resolvedByGlobalSelector && !target && devRouteActive && devTab) {
+      target = devTab
+    } else if (!target && preselected) {
+      target = preselected
+    }
+
+    if (!target) {
       const defaultSelection = document.querySelector("[data-default]")
       if (defaultSelection) {
         target = defaultSelection
-      } else {
+      } else if (skipPersistedSelection) {
         scheduleSelectionRetry()
         return
       }
@@ -4939,6 +5099,12 @@ body.dark {
       }
     <% } %>
 
+    if (!target && preselected) {
+      target = preselected
+    }
+
+    console.log({ targetAfter: target })
+
     if (!target) {
       target = document.querySelector(".frame-link")
     }
@@ -5239,7 +5405,7 @@ body.dark {
     item.href = url
     item.setAttribute("data-index", index)
     item.className = "btn header-item frame-link"
-    item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
+    item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-circle-stop"></i></button></div>`
 
     document.querySelector(".temp-menu").appendChild(item)
 
@@ -5920,7 +6086,7 @@ body.dark {
   })
   setupTabLinkHover()
   document.addEventListener("click", (event) => {
-    if (event.target.closest("#fs-status .fs-dropdown-menu")) {
+    if (event.target.closest("#fs-status .fs-dropdown-menu") || event.target.closest("#fs-status .fs-status-btn")) {
       return
     }
     closeStatusDropdowns()
@@ -6409,6 +6575,7 @@ body.dark {
 
       const detachHandlers = () => {
         forkBtn.removeEventListener('click', handlePushLogin)
+        forkBtn.removeEventListener('click', requireGitLogin)
       }
 
       const enableDropdown = () => {
@@ -6419,7 +6586,11 @@ body.dark {
       const disableDropdown = () => {
         forkBtn.classList.remove('revealer')
         forkBtn.removeAttribute('data-group')
-        closeStatusDropdowns()
+        const forkMenuEl = document.querySelector('#fs-fork-menu')
+        if (forkMenuEl && !forkMenuEl.classList.contains('hidden')) {
+          forkMenuEl.classList.add('hidden')
+        }
+        setDropdownState(forkBtn, false)
       }
 
       detachHandlers()
@@ -6435,12 +6606,12 @@ body.dark {
       if (!isConnected) {
         disableDropdown()
         if (labelEl) {
-          labelEl.textContent = 'Login'
+          labelEl.textContent = 'Fork'
         }
         forkBtn.disabled = false
         forkBtn.classList.remove('fs-status-btn--disabled')
-        forkBtn.setAttribute('title', 'Connect GitHub to fork this workspace')
-        forkBtn.addEventListener('click', handlePushLogin)
+        forkBtn.setAttribute('title', 'Log in to GitHub to fork this workspace')
+        forkBtn.addEventListener('click', requireGitLogin)
         return
       }
 
@@ -8148,6 +8319,41 @@ body.dark {
     function handlePushLogin() {
       window.location.href = '/github'
     }
+    const promptGitLogin = () => {
+      Swal.fire({
+        html: `
+          <div class="pinokio-github-login">
+            <div class="pinokio-github-login__icon"><i class="fa-brands fa-github"></i></div>
+            <div class="pinokio-github-login__title">Log in to GitHub</div>
+            <div class="pinokio-github-login__body">Connect your GitHub account to fork or publish this workspace.</div>
+          </div>
+        `,
+        showCancelButton: true,
+        confirmButtonText: 'Log in',
+        cancelButtonText: 'Not now',
+        reverseButtons: true,
+        showCloseButton: true,
+        focusConfirm: true,
+        customClass: {
+          popup: 'pinokio-modern-modal pinokio-github-login-modal',
+          htmlContainer: 'pinokio-modern-html',
+          confirmButton: 'pinokio-modern-confirm',
+          cancelButton: 'pinokio-modern-cancel',
+          closeButton: 'pinokio-modern-close'
+        }
+      }).then((result) => {
+        if (result.isConfirmed) {
+          handlePushLogin()
+        }
+      })
+    }
+    const requireGitLogin = (event) => {
+      if (event) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+      promptGitLogin()
+    }
 
     // Function to update publish/create button
     const updatePublishButton = async () => {
@@ -8167,6 +8373,7 @@ body.dark {
         pushBtn.removeEventListener('click', showPublishModal)
         pushBtn.removeEventListener('click', showCreateModal)
         pushBtn.removeEventListener('click', handlePushLogin)
+        pushBtn.removeEventListener('click', requireGitLogin)
       }
       const enableDropdown = () => {
         pushBtn.classList.add('revealer')
@@ -8175,7 +8382,11 @@ body.dark {
       const disableDropdown = () => {
         pushBtn.classList.remove('revealer')
         pushBtn.removeAttribute('data-group')
-        closeStatusDropdowns()
+        const pushMenuEl = document.querySelector('#fs-push-menu')
+        if (pushMenuEl && !pushMenuEl.classList.contains('hidden')) {
+          pushMenuEl.classList.add('hidden')
+        }
+        setDropdownState(pushBtn, false)
       }
 
       const repos = getRepoListSnapshot()
@@ -8227,12 +8438,12 @@ body.dark {
         renderPublishDropdown(repos, { emptyMessage })
 
         if (!isConnected) {
-          setLabel('Login')
+          setLabel('Publish')
           pushBtn.disabled = false
           pushBtn.classList.remove('fs-status-btn--disabled')
-          pushBtn.setAttribute('title', 'Connect GitHub to publish this workspace')
+          pushBtn.setAttribute('title', 'Log in to GitHub to publish this workspace')
           disableDropdown()
-          pushBtn.addEventListener('click', handlePushLogin)
+          pushBtn.addEventListener('click', requireGitLogin)
           syncForkButton()
           return
         }
@@ -8266,12 +8477,12 @@ body.dark {
       } catch (error) {
         console.error('Error checking remotes:', error)
         setPublishMenuMessage('Git integration unavailable')
-        setLabel('Login')
+        setLabel('Publish')
         pushBtn.disabled = false
         pushBtn.classList.remove('fs-status-btn--disabled')
-        pushBtn.setAttribute('title', 'Connect GitHub to publish this workspace')
+        pushBtn.setAttribute('title', 'Log in to GitHub to publish this workspace')
         disableDropdown()
-        pushBtn.addEventListener('click', handlePushLogin)
+        pushBtn.addEventListener('click', requireGitLogin)
         latestGitIntegration = null
         updateForkButton()
       }

package/server/views/file_explorer.ejs

@@ -202,7 +202,7 @@ body.dark .browser-options-row {
     <% if (dep.downloaded) { %>
       <div class='item'><i class="fa-solid fa-check"></i> <a class='downloaded' href="<%=dep.downloaded%>" target="_blank"><%=dep.uri%></a><div class='flexible'></div></div>
     <% } else { %>
-      <div class='item'><a class='btn' href="/home?mode=download&uri=<%=dep.uri%>" target="_blank"><i class="fa-solid fa-download"></i> Download</a> <%=dep.uri%><div class='flexible'></div></div>
+      <div class='item'><a class='btn' href="/?mode=download&uri=<%= encodeURIComponent(dep.uri) %>" target="_blank"><i class="fa-solid fa-download"></i> Download</a> <%=dep.uri%><div class='flexible'></div></div>
     <% } %>
   <% }) %>
   </div>

package/server/views/index.ejs

@@ -464,7 +464,7 @@ body.dark aside .current.selected {
     <% if (dep.downloaded) { %>
       <div class='item'><i class="fa-solid fa-check"></i> <a class='downloaded' href="<%=dep.downloaded%>" target="_blank"><%=dep.uri%></a><div class='flexible'></div></div>
     <% } else { %>
-      <div class='item'><a class='btn' href="/home?mode=download&uri=<%=dep.uri%>" target="_blank"><i class="fa-solid fa-download"></i> Download</a> <%=dep.uri%><div class='flexible'></div></div>
+      <div class='item'><a class='btn' href="/?mode=download&uri=<%= encodeURIComponent(dep.uri) %>" target="_blank"><i class="fa-solid fa-download"></i> Download</a> <%=dep.uri%><div class='flexible'></div></div>
     <% } %>
   <% }) %>
   </div>

package/server/views/index2.ejs

@@ -290,7 +290,7 @@ body.dark .open-menu, body.dark .browse {
     <% if (dep.downloaded) { %>
       <div class='item'><i class="fa-solid fa-check"></i> <a class='downloaded' href="<%=dep.downloaded%>" target="_blank"><%=dep.uri%></a><div class='flexible'></div></div>
     <% } else { %>
-      <div class='item'><a class='btn' href="/home?mode=download&uri=<%=dep.uri%>" target="_blank"><i class="fa-solid fa-download"></i> Download</a> <%=dep.uri%><div class='flexible'></div></div>
+      <div class='item'><a class='btn' href="/?mode=download&uri=<%= encodeURIComponent(dep.uri) %>" target="_blank"><i class="fa-solid fa-download"></i> Download</a> <%=dep.uri%><div class='flexible'></div></div>
     <% } %>
   <% }) %>
   </div>

package/server/views/partials/dynamic.ejs

@@ -46,7 +46,7 @@
               </div>
             <% } else { %>
               <div class='loader shutdown'>
-                  <i class="fa-solid fa-xmark"></i>
+                <i class="fa-solid fa-circle-stop"></i>
               </div>
             <% } %>
           <% } else { %>

package/server/views/partials/menu.ejs

@@ -65,7 +65,7 @@
               <i class='fa-solid fa-spin fa-circle-notch'></i>
               <i class="fa-solid fa-chevron-right"></i>
               -->
-                <i class="fa-solid fa-xmark"></i>
+                <i class="fa-solid fa-circle-stop"></i>
             </div>
           <% } %>
           <% if (item.arrow) { %>