pinokiod 3.180.0 → 3.182.0

package/server/views/app.ejs

@@ -891,6 +891,14 @@ body.dark .tab-link-popover {
 body.dark .tab-link-popover .tab-link-popover-header {
   color: rgba(226, 232, 240, 0.7);
 }
+.tab-link-popover .tab-link-popover-separator {
+  height: 1px;
+  margin: 4px 14px;
+  background: rgba(15, 23, 42, 0.08);
+}
+body.dark .tab-link-popover .tab-link-popover-separator {
+  background: rgba(148, 163, 184, 0.18);
+}
 .tab-link-popover .tab-link-popover-item {
   width: 100%;
   border: none;
@@ -905,6 +913,9 @@ body.dark .tab-link-popover .tab-link-popover-header {
   background: transparent;
   cursor: pointer;
 }
+.tab-link-popover .tab-link-popover-item.qr-inline { flex-direction: row; align-items: center; gap: 10px; }
+.tab-link-popover .tab-link-popover-item.qr-inline .textcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
+.tab-link-popover .tab-link-popover-item.qr-inline .qr { width: 64px; height: 64px; image-rendering: pixelated; flex: 0 0 auto; margin-left: auto; }
 .tab-link-popover .tab-link-popover-item:hover,
 .tab-link-popover .tab-link-popover-item:focus-visible {
   background: rgba(15, 23, 42, 0.06);
@@ -921,6 +932,10 @@ body.dark .tab-link-popover .tab-link-popover-item:focus-visible {
   text-transform: uppercase;
   color: rgba(15, 23, 42, 0.55);
 }
+.tab-link-popover .tab-link-popover-item .label i {
+  margin-right: 6px;
+  font-size: 11px;
+}
 body.dark .tab-link-popover .tab-link-popover-item .label {
   color: rgba(226, 232, 240, 0.65);
 }
@@ -2232,6 +2247,19 @@ body.dark {
   cursor: not-allowed;
 }
 
+.pinokio-history-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.pinokio-history-branch-select.pinokio-modal-input {
+  width: auto;
+  min-width: 160px;
+  padding: 6px 10px;
+  font-size: 13px;
+}
+
 .pinokio-pill {
   display: inline-flex;
   align-items: center;
@@ -2957,6 +2985,15 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     overflow: auto;
     flex-wrap: nowrap;
   }
+  /* Keep minimized header horizontal and compact on small screens */
+  header.navheader.minimized,
+  header.navheader.minimized h1 {
+    display: inline-flex;
+    flex-direction: row;
+  }
+  header.navheader.minimized h1 .btn2 {
+    width: auto;
+  }
   .appcanvas {
     margin-left: 0;
     flex: 1 1 auto;
@@ -3508,6 +3545,8 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     return false
   }
 
+  const isIPv4Host = (host) => /^(\d{1,3}\.){3}\d{1,3}$/.test((host || '').trim())
+
   const extractProjectSlug = (node) => {
     if (!node) {
       return ""
@@ -3662,22 +3701,36 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     if (!trimmed) {
       return ""
     }
-    if (!/^https?:\/\//i.test(trimmed)) {
-      trimmed = `https://${trimmed}`
-    } else {
-      trimmed = trimmed.replace(/^http:/i, "https:")
+    // If it's already a URL, ensure it's HTTPS and not an IP host
+    if (/^https?:\/\//i.test(trimmed)) {
+      try {
+        const parsed = new URL(trimmed)
+        const host = (parsed.hostname || '').toLowerCase()
+        if (!host || isIPv4Host(host)) {
+          return ""
+        }
+        // Only accept domains (prefer *.localhost) for HTTPS targets
+        if (!(host === 'localhost' || host.endsWith('.localhost') || host.includes('.'))) {
+          return ""
+        }
+        let pathname = parsed.pathname || ""
+        if (pathname === "/") pathname = ""
+        const search = parsed.search || ""
+        return `https://${host}${pathname}${search}`
+      } catch (_) {
+        return ""
+      }
     }
+    // Not a full URL: accept plain domains (prefer *.localhost), reject IPs
     try {
-      const parsed = new URL(trimmed)
-      if (!parsed.host) {
+      const hostCandidate = trimmed.split('/')[0].toLowerCase()
+      if (!hostCandidate || isIPv4Host(hostCandidate)) {
         return ""
       }
-      let pathname = parsed.pathname || ""
-      if (pathname === "/") {
-        pathname = ""
+      if (!(hostCandidate === 'localhost' || hostCandidate.endsWith('.localhost') || hostCandidate.includes('.'))) {
+        return ""
       }
-      const search = parsed.search || ""
-      return `https://${parsed.host}${pathname}${search}`
+      return `https://${hostCandidate}`
     } catch (_) {
       return ""
     }
@@ -3736,7 +3789,8 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   const ensureRouterInfoMapping = async () => {
     const now = Date.now()
     if (!tabLinkRouterInfoPromise || now > tabLinkRouterInfoExpiry) {
-      tabLinkRouterInfoPromise = fetch("/info/system", {
+      // Use lightweight router mapping to avoid favicon/installed overhead
+      tabLinkRouterInfoPromise = fetch("/info/router", {
         method: "GET",
         headers: {
           "Accept": "application/json"
@@ -3758,6 +3812,8 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
             : []
           const portMap = new Map()
           const hostPortMap = new Map()
+          const externalHttpByExtPort = new Map() // ext port -> Set of host:port (external_ip)
+          const externalHttpByIntPort = new Map() // internal port -> Set of host:port (external_ip)
           const hostAliasPortMap = new Map()
           if (data?.router && typeof data.router === "object") {
             Object.entries(data.router).forEach(([dial, hosts]) => {
@@ -3902,11 +3958,29 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
             mergeTargets(entry.external_domain)
             mergeTargets(entry.https_href)
             mergeTargets(entry.app_href)
-            mergeTargets(entry.external_ip)
-            mergeTargets(entry.internal_router)
-            mergeTargets(entry.match)
-            mergeTargets(entry.host)
+            // Some rewrite mapping entries expose domain candidates under `hosts`
             mergeTargets(entry.hosts)
+            // Internal router can also include domain aliases (e.g., comfyui.localhost)
+            mergeTargets(entry.internal_router)
+
+            // Record external http host:port candidates by external and internal ports for later
+            if (entry.external_ip && typeof entry.external_ip === 'string') {
+              const parsed = parseHostPort(entry.external_ip)
+              if (parsed && parsed.port) {
+                const keyExt = parsed.port
+                if (!externalHttpByExtPort.has(keyExt)) {
+                  externalHttpByExtPort.set(keyExt, new Set())
+                }
+                externalHttpByExtPort.get(keyExt).add(`${parsed.host}:${parsed.port}`)
+                const keyInt = String(entry.internal_port || '')
+                if (keyInt) {
+                  if (!externalHttpByIntPort.has(keyInt)) {
+                    externalHttpByIntPort.set(keyInt, new Set())
+                  }
+                  externalHttpByIntPort.get(keyInt).add(`${parsed.host}:${parsed.port}`)
+                }
+              }
+            }
 
             if (httpsTargets.size === 0) {
               return
@@ -3982,14 +4056,18 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 
           return {
             portMap,
-            hostPortMap
+            hostPortMap,
+            externalHttpByExtPort,
+            externalHttpByIntPort
           }
         })
         .catch(() => {
           tabLinkRouterHttpsActive = null
           return {
             portMap: new Map(),
-            hostPortMap: new Map()
+            hostPortMap: new Map(),
+            externalHttpByExtPort: new Map(),
+            externalHttpByIntPort: new Map()
           }
         })
       tabLinkRouterInfoExpiry = now + 3000
@@ -4042,7 +4120,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     const projectSlug = extractProjectSlug(link).toLowerCase()
     const entries = []
     const entryByUrl = new Map()
-    const addEntry = (type, label, url) => {
+    const addEntry = (type, label, url, opts = {}) => {
       if (!url) {
         return
       }
@@ -4067,13 +4145,16 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
         return
       }
       if (entryByUrl.has(canonical)) {
+        const existing = entryByUrl.get(canonical)
+        if (opts && opts.qr === true) existing.qr = true
         return
       }
       const entry = {
         type,
         label,
         url: canonical,
-        display: formatDisplayUrl(canonical)
+        display: formatDisplayUrl(canonical),
+        qr: opts && opts.qr === true
       }
       entryByUrl.set(canonical, entry)
       entries.push(entry)
@@ -4087,11 +4168,11 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       addEntry("url", "URL", baseHref)
     }
 
-    const httpCandidates = new Set()
+    const httpCandidates = new Map() // url -> { qr: boolean }
     const httpsCandidates = new Set()
 
     if (isHttpUrl(baseHref)) {
-      httpCandidates.add(canonicalizeUrl(baseHref))
+      httpCandidates.set(canonicalizeUrl(baseHref), { qr: false })
     } else if (isHttpsUrl(baseHref)) {
       httpsCandidates.add(canonicalizeUrl(baseHref))
     }
@@ -4109,7 +4190,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
         const normalizedPath = pathname.toLowerCase()
         if (normalizedPath.includes(`/asset/api/${projectSlug}`)) {
           const fallbackHttp = `http://127.0.0.1:42000${pathname}`
-          httpCandidates.add(canonicalizeUrl(fallbackHttp))
+          httpCandidates.set(canonicalizeUrl(fallbackHttp), { qr: false })
         }
       } catch (_) {
         // ignore fallback errors
@@ -4133,15 +4214,16 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           if (isHttpsUrl(canonical)) {
             httpsCandidates.add(canonical)
           } else if (isHttpUrl(canonical)) {
-            httpCandidates.add(canonical)
+            const prev = httpCandidates.get(canonical)
+            httpCandidates.set(canonical, { qr: prev ? prev.qr === true : false })
           }
         })
       })
     }
 
+    const routerData = await ensureRouterInfoMapping()
     if (httpCandidates.size > 0) {
-      const routerData = await ensureRouterInfoMapping()
-      httpCandidates.forEach((httpUrl) => {
+      Array.from(httpCandidates.keys()).forEach((httpUrl) => {
         const mapped = collectHttpsUrlsFromRouter(httpUrl, routerData)
         mapped.forEach((httpsUrl) => {
           httpsCandidates.add(httpsUrl)
@@ -4149,6 +4231,28 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       })
     }
 
+    // Add external 192.168.* http host:port candidates mapped from the same internal port as base HTTP
+    try {
+      const base = new URL(baseHref, location.origin)
+      let basePort = base.port
+      if (!basePort) {
+        basePort = base.protocol.toLowerCase() === 'https:' ? '443' : '80'
+      }
+      const samePortHosts = routerData && routerData.externalHttpByIntPort ? routerData.externalHttpByIntPort.get(basePort) : null
+      if (samePortHosts && samePortHosts.size > 0) {
+        samePortHosts.forEach((hostport) => {
+          try {
+            const hpUrl = `http://${hostport}${base.pathname || '/'}${base.search || ''}`
+            const canonical = canonicalizeUrl(hpUrl)
+            if (isHttpUrl(canonical)) {
+              const prev = httpCandidates.get(canonical)
+              httpCandidates.set(canonical, { qr: true || (prev ? prev.qr === true : false) })
+            }
+          } catch (_) {}
+        })
+      }
+    } catch (_) {}
+
     const httpsList = Array.from(httpsCandidates).sort()
 
     if (httpsList.length > 0) {
@@ -4163,17 +4267,20 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           }
           const hostPort = parsed.port ? `${parsed.hostname}:${parsed.port}` : parsed.hostname
           const httpUrl = `http://${hostPort}${parsed.pathname || "/"}${parsed.search || ""}`
-          httpCandidates.add(canonicalizeUrl(httpUrl))
+          const key = canonicalizeUrl(httpUrl)
+          const prev = httpCandidates.get(key)
+          httpCandidates.set(key, { qr: prev ? prev.qr === true : false })
         } catch (_) {
           // ignore failures
         }
       })
     }
 
-    const httpList = Array.from(httpCandidates).sort()
+    const httpList = Array.from(httpCandidates.keys()).sort()
 
     httpList.forEach((url) => {
-      addEntry("http", "HTTP", url)
+      const meta = httpCandidates.get(url) || { qr: false }
+      addEntry("http", "HTTP", url, { qr: meta.qr === true })
     })
     httpsList.forEach((url) => {
       addEntry("https", "HTTPS", url)
@@ -4273,27 +4380,47 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       tabLinkHideTimer = null
     }
 
-    let entries
+    // Show lightweight loading popover immediately while mapping fetch runs
+    try {
+      const pop = ensureTabLinkPopoverEl()
+      pop.innerHTML = ''
+      const header = document.createElement('div')
+      header.className = 'tab-link-popover-header'
+      header.innerHTML = `<i class="fa-solid fa-arrow-up-right-from-square"></i><span>Open in browser</span>`
+      const item = document.createElement('div')
+      item.className = 'tab-link-popover-item'
+      const label = document.createElement('span')
+      label.className = 'label'
+      label.textContent = 'Loading…'
+      const value = document.createElement('span')
+      value.className = 'value muted'
+      value.textContent = 'Discovering routes'
+      item.append(label, value)
+      pop.append(header, item)
+      positionTabLinkPopover(pop, link)
+    } catch (_) {}
+
+    let entries = []
     try {
-      entries = await buildTabLinkEntries(link)
+      const result = await buildTabLinkEntries(link)
+      if (Array.isArray(result)) {
+        entries = result.slice()
+      }
     } catch (_) {
-      tabLinkPendingLink = null
-      return
+      entries = []
     }
 
     if (tabLinkPendingLink !== link) {
       return
     }
 
-    if (!entries || entries.length === 0) {
-      hideTabLinkPopover({ immediate: true })
-      return
-    }
+    let openEntries = Array.isArray(entries) ? entries.slice() : []
+    let showOpenSection = openEntries.length > 0
 
     if (sameOrigin) {
       const slug = extractProjectSlug(link).toLowerCase()
       if (slug) {
-        entries = entries.filter((entry) => {
+        openEntries = openEntries.filter((entry) => {
           if (!entry || !entry.url) {
             return false
           }
@@ -4328,17 +4455,21 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           return false
         })
       } else {
-        entries = entries.filter((entry) => entry.url === canonicalBase)
+        openEntries = openEntries.filter((entry) => entry.url === canonicalBase)
       }
 
-      const hasAlternate = entries.some((entry) => entry.url !== canonicalBase)
+      const hasAlternate = openEntries.some((entry) => entry.url !== canonicalBase)
       if (!hasAlternate) {
-        hideTabLinkPopover({ immediate: true })
-        return
+        showOpenSection = false
+        openEntries = []
+      } else {
+        showOpenSection = openEntries.length > 0
       }
+    } else {
+      showOpenSection = openEntries.length > 0
     }
 
-    if (!entries || entries.length === 0) {
+    if (!showOpenSection && !canonicalBase) {
       hideTabLinkPopover({ immediate: true })
       return
     }
@@ -4346,46 +4477,93 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     const popover = ensureTabLinkPopoverEl()
     popover.innerHTML = ""
 
-    const header = document.createElement("div")
-    header.className = "tab-link-popover-header"
-    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"
-      item.className = "tab-link-popover-item"
-      item.setAttribute("data-url", entry.url)
-      const labelSpan = document.createElement("span")
-      labelSpan.className = "label"
-      labelSpan.textContent = entry.label
-      const valueSpan = document.createElement("span")
-      valueSpan.className = "value"
-      valueSpan.textContent = entry.display
-      item.append(labelSpan, valueSpan)
-      popover.appendChild(item)
-    })
+    if (showOpenSection) {
+      const header = document.createElement("div")
+      header.className = "tab-link-popover-header"
+      header.innerHTML = `<i class="fa-solid fa-arrow-up-right-from-square"></i><span>Open in browser</span>`
+      popover.appendChild(header)
+
+      const hasHttpsEntry = openEntries.some((entry) => entry && entry.type === "https")
+
+      openEntries.forEach((entry) => {
+        const item = document.createElement("button")
+        item.type = "button"
+        item.setAttribute("data-url", entry.url)
+        const labelSpan = document.createElement("span")
+        labelSpan.className = "label"
+        labelSpan.textContent = entry.label
+        const valueSpan = document.createElement("span")
+        valueSpan.className = "value"
+        valueSpan.textContent = entry.display
+
+        if (entry.type === 'http' && entry.qr === true) {
+          item.className = "tab-link-popover-item qr-inline"
+          const textCol = document.createElement('div')
+          textCol.className = 'textcol'
+          textCol.append(labelSpan, valueSpan)
+          const qrImg = document.createElement('img')
+          qrImg.className = 'qr'
+          qrImg.alt = 'QR'
+          qrImg.decoding = 'async'
+          qrImg.loading = 'lazy'
+          qrImg.src = `/qr?data=${encodeURIComponent(entry.url)}&s=4&m=0`
+          item.append(textCol, qrImg)
+        } else {
+          item.className = "tab-link-popover-item"
+          // Keep label and value as direct children so column layout applies
+          item.append(labelSpan, valueSpan)
+        }
+        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")
 
-    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 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"
 
-      const footerValue = document.createElement("span")
-      footerValue.className = "value"
-      footerValue.textContent = "Click to activate"
+        footerButton.append(footerLabel, footerValue)
+        popover.appendChild(footerButton)
+      }
+    }
 
-      footerButton.append(footerLabel, footerValue)
-      popover.appendChild(footerButton)
+    if (showOpenSection && canonicalBase) {
+      const separator = document.createElement("div")
+      separator.className = "tab-link-popover-separator"
+      popover.appendChild(separator)
+    }
+
+    if (canonicalBase) {
+      const debugHeader = document.createElement("div")
+      debugHeader.className = "tab-link-popover-header"
+      debugHeader.innerHTML = `<i class="fa-solid fa-cube"></i><span>Debug</span>`
+      popover.appendChild(debugHeader)
+
+      const debugItem = document.createElement("button")
+      debugItem.type = "button"
+      debugItem.className = "tab-link-popover-item"
+      debugItem.setAttribute("data-url", canonicalBase)
+
+      const debugLabel = document.createElement("span")
+      debugLabel.className = "label"
+      debugLabel.innerHTML = `<i class="fa-solid fa-border-none"></i><span>Select a region</span>`
+
+      const debugValue = document.createElement("span")
+      debugValue.className = "value"
+      debugValue.textContent = formatDisplayUrl(canonicalBase)
+
+      debugItem.append(debugLabel, debugValue)
+      popover.appendChild(debugItem)
     }
 
     tabLinkActiveLink = link
@@ -7879,6 +8057,10 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       const commits = historyData.log || []
       const remote = historyData.remote || ''
       const currentRef = historyData.ref || 'HEAD'
+      const branchEntries = Array.isArray(historyData.branches) ? historyData.branches : []
+      const isOid = (s) => typeof s === 'string' && /^[0-9a-f]{7,40}$/i.test(s)
+      const realBranchEntries = branchEntries.filter((entry) => entry && typeof entry.branch === 'string' && entry.branch.length > 0 && !isOid(entry.branch))
+      const selectedBranchName = (historyData && typeof historyData.branch === 'string' && !isOid(historyData.branch)) ? historyData.branch : null
       
       const commitCountLabel = `${commits.length} commit${commits.length === 1 ? '' : 's'}`
       const lastCommit = commits[0]
@@ -7910,9 +8092,21 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
             <div class="pinokio-history-latest-text">
               Currently viewing ${escapeHtml(currentRef)}
             </div>
-            <button type="button" class="pinokio-history-latest-btn" data-history-return-head>
-              <i class="fa-solid fa-arrow-rotate-left"></i> Return to newest commit
-            </button>
+            <div class="pinokio-history-actions">
+              <button type="button" class="pinokio-history-latest-btn" data-history-return-head>
+                <i class="fa-solid fa-arrow-rotate-left"></i> Return to newest commit
+              </button>
+              ${realBranchEntries.length ? `
+                <select class="pinokio-modal-input pinokio-history-branch-select" data-history-branch-select aria-label="Select branch">
+                  ${realBranchEntries.map(e => `
+                    <option value="${escapeHtml(e.branch)}"${selectedBranchName === e.branch ? ' selected' : ''}>${escapeHtml(e.branch)}</option>
+                  `).join('')}
+                </select>
+                <button type="button" class="pinokio-history-latest-btn" data-history-branch-switch>
+                  <i class="fa-solid fa-code-branch"></i> Switch
+                </button>
+              ` : ''}
+            </div>
           </div>
           <div class="pinokio-modal-body pinokio-modal-body--history">
             ${commits.length === 0 ? 
@@ -7949,7 +8143,9 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 
           const returnBtn = document.querySelector('[data-history-return-head]')
           const banner = document.querySelector('[data-history-latest-banner]')
-          if (returnBtn && typeof showIframeView === 'function') {
+          const branchSelect = document.querySelector('[data-history-branch-select]')
+          const branchSwitchBtn = document.querySelector('[data-history-branch-switch]')
+          if (typeof showIframeView === 'function') {
             const repoParam = options && typeof options === 'object' ? options.repoParam : null
             let checkoutCwd = null
             if (historyData && typeof historyData.dir === 'string' && historyData.dir.length > 0) {
@@ -7958,31 +8154,52 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
               checkoutCwd = repoParam
             }
 
+            const isOid = (s) => typeof s === 'string' && /^[0-9a-f]{7,40}$/i.test(s)
             const branchEntries = Array.isArray(historyData.branches) ? historyData.branches : []
-            let checkoutTarget = null
-
-            if (repoData && typeof repoData.branch === 'string' && repoData.branch.length > 0 && repoData.branch !== currentRef) {
-              checkoutTarget = repoData.branch
-            }
-            if (!checkoutTarget) {
-              const nonCurrent = branchEntries.find((entry) => entry && typeof entry.branch === 'string' && entry.branch.length > 0 && entry.branch !== currentRef)
-              if (nonCurrent) {
-                checkoutTarget = nonCurrent.branch
-              }
+            const realBranches = branchEntries
+              .map((entry) => entry && typeof entry.branch === 'string' ? entry.branch : null)
+              .filter((name) => name && !isOid(name))
+
+            // Wire the branch selector
+            if (branchSelect && checkoutCwd) {
+              branchSelect.addEventListener('change', () => {
+                const value = branchSelect.value
+                if (!value) return
+                const url = `/run/scripts/git/checkout.json?cwd=${encodeURIComponent(checkoutCwd)}&commit=${encodeURIComponent(value)}&callback_target=parent&callback=$location.href`
+                openCheckoutTerminal(url)
+              })
             }
-            if (!checkoutTarget && branchEntries.length > 0) {
-              checkoutTarget = branchEntries[0].branch
+            if (branchSwitchBtn && branchSelect && checkoutCwd) {
+              branchSwitchBtn.addEventListener('click', () => {
+                const value = branchSelect.value
+                if (!value) return
+                const url = `/run/scripts/git/checkout.json?cwd=${encodeURIComponent(checkoutCwd)}&commit=${encodeURIComponent(value)}&callback_target=parent&callback=$location.href`
+                openCheckoutTerminal(url)
+              })
             }
 
-            if (checkoutCwd && checkoutTarget) {
-              const checkoutUrl = `/run/scripts/git/checkout.json?cwd=${encodeURIComponent(checkoutCwd)}&commit=${encodeURIComponent(checkoutTarget)}&callback_target=parent&callback=$location.href`
-              returnBtn.addEventListener('click', () => {
-                openCheckoutTerminal(checkoutUrl)
-              })
-            } else {
-              returnBtn.disabled = true
-              if (banner) {
-                banner.classList.add('pinokio-history-latest-banner--disabled')
+            // Fix "Return to newest commit" target selection
+            if (returnBtn) {
+              let checkoutTarget = null
+              if (repoData && typeof repoData.branch === 'string' && repoData.branch.length > 0 && !isOid(repoData.branch)) {
+                checkoutTarget = repoData.branch
+              } else if (historyData && typeof historyData.branch === 'string' && historyData.branch.length > 0 && !isOid(historyData.branch)) {
+                checkoutTarget = historyData.branch
+              } else if (realBranches.length > 0) {
+                const prefer = ['main', 'master', 'develop', 'dev']
+                checkoutTarget = prefer.find((n) => realBranches.includes(n)) || realBranches[0]
+              }
+
+              if (checkoutCwd && checkoutTarget) {
+                const checkoutUrl = `/run/scripts/git/checkout.json?cwd=${encodeURIComponent(checkoutCwd)}&commit=${encodeURIComponent(checkoutTarget)}&callback_target=parent&callback=$location.href`
+                returnBtn.addEventListener('click', () => {
+                  openCheckoutTerminal(checkoutUrl)
+                })
+              } else {
+                returnBtn.disabled = true
+                if (banner) {
+                  banner.classList.add('pinokio-history-latest-banner--disabled')
+                }
               }
             }
           } else if (banner) {