pinokiod 3.170.0 → 3.181.0

package/server/views/app.ejs

@@ -905,6 +905,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);
@@ -1759,6 +1762,10 @@ body.dark .swal2-html-container label {
   --pinokio-custom-commit-close-color: rgba(71, 85, 105, 0.75);
   --pinokio-custom-commit-close-hover-bg: rgba(148, 163, 184, 0.18);
   --pinokio-custom-commit-close-hover-color: #0f172a;
+  --pinokio-custom-commit-action-bg: rgba(59, 130, 246, 0.12);
+  --pinokio-custom-commit-action-border: rgba(59, 130, 246, 0.35);
+  --pinokio-custom-commit-action-color: #1d4ed8;
+  --pinokio-custom-commit-action-hover: rgba(59, 130, 246, 0.18);
   --pinokio-commit-item-bg: rgba(226, 232, 240, 0.6);
   --pinokio-commit-item-hover-bg: rgba(59, 130, 246, 0.12);
   --pinokio-commit-item-text: #0f172a;
@@ -1837,6 +1844,10 @@ body.dark {
   --pinokio-custom-commit-close-color: rgba(226, 232, 240, 0.7);
   --pinokio-custom-commit-close-hover-bg: rgba(148, 163, 184, 0.18);
   --pinokio-custom-commit-close-hover-color: #f8fafc;
+  --pinokio-custom-commit-action-bg: rgba(56, 189, 248, 0.12);
+  --pinokio-custom-commit-action-border: rgba(56, 189, 248, 0.35);
+  --pinokio-custom-commit-action-color: #7dd3fc;
+  --pinokio-custom-commit-action-hover: rgba(56, 189, 248, 0.18);
   --pinokio-commit-item-bg: rgba(15, 23, 42, 0.35);
   --pinokio-commit-item-hover-bg: rgba(37, 99, 235, 0.16);
   --pinokio-commit-item-text: #f8fafc;
@@ -2173,6 +2184,70 @@ body.dark {
   flex-wrap: wrap;
 }
 
+.pinokio-history-latest-banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  margin: 12px 20px 0;
+  background: rgba(59, 130, 246, 0.08);
+  border: 1px solid rgba(59, 130, 246, 0.18);
+  border-radius: 10px;
+  color: var(--pinokio-modal-title-color);
+}
+
+.pinokio-history-latest-text {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.pinokio-history-latest-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(59, 130, 246, 0.18);
+  border: 1px solid rgba(59, 130, 246, 0.35);
+  color: #1d4ed8;
+  padding: 6px 14px;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s ease, border 0.15s ease, transform 0.15s ease;
+}
+
+.pinokio-history-latest-btn:hover {
+  background: rgba(59, 130, 246, 0.24);
+  transform: translateY(-1px);
+}
+
+.pinokio-history-latest-btn:focus-visible {
+  outline: 2px solid rgba(59, 130, 246, 0.45);
+  outline-offset: 3px;
+}
+
+.pinokio-history-latest-banner--disabled {
+  opacity: 0.6;
+}
+
+.pinokio-history-latest-banner--disabled .pinokio-history-latest-btn {
+  pointer-events: none;
+  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;
@@ -2553,6 +2628,104 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   flex: 1;
   overflow: hidden;
   padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.pinokio-git-commit-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.pinokio-git-commit-switch-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--pinokio-custom-commit-action-bg);
+  border: 1px solid var(--pinokio-custom-commit-action-border);
+  color: var(--pinokio-custom-commit-action-color);
+  padding: 6px 14px;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s ease, border 0.15s ease, transform 0.15s ease;
+}
+
+.pinokio-git-commit-switch-btn:hover {
+  background: var(--pinokio-custom-commit-action-hover);
+  transform: translateY(-1px);
+}
+
+.pinokio-git-commit-switch-btn:focus-visible {
+  outline: 2px solid var(--pinokio-custom-commit-action-color);
+  outline-offset: 3px;
+}
+
+.pinokio-custom-terminal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(9, 11, 15, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999999;
+}
+
+.pinokio-custom-terminal-modal {
+  width: min(900px, 92vw);
+  height: min(620px, 88vh);
+  background: var(--pinokio-modal-surface-bg, #101522);
+  color: var(--pinokio-modal-title-color);
+  border-radius: 18px;
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.55);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid rgba(76, 137, 251, 0.2);
+}
+
+.pinokio-custom-terminal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: rgba(30, 41, 59, 0.8);
+  border-bottom: 1px solid rgba(76, 137, 251, 0.25);
+}
+
+.pinokio-custom-terminal-header h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.pinokio-custom-terminal-close {
+  background: none;
+  border: none;
+  font-size: 26px;
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 12px;
+  color: rgba(226, 232, 240, 0.7);
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.pinokio-custom-terminal-close:hover {
+  background: rgba(148, 163, 184, 0.18);
+  color: #f8fafc;
+}
+
+.pinokio-custom-terminal-body {
+  flex: 1;
+  background: #0b1120;
+}
+
+.pinokio-custom-terminal-body iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
 }
 
 .pinokio-git-commit-item {
@@ -2800,6 +2973,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;
@@ -2848,10 +3030,12 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   #fs-fork-btn .fs-status-label i {
     font-size: 1rem;
   }
-  #fs-status .fs-status-btn .disk-usage,
-  #fs-status .fs-status-btn .badge {
+  #fs-status .fs-status-btn .disk-usage {
     display: none;
   }
+  #fs-status .git-changes .badge {
+    display: inline-flex;
+  }
 }
 /*
 @media only screen and (max-width: 800px) {
@@ -2904,7 +3088,8 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='sep'></div>
 <div class='mode-selector'>
-  <a class="btn2 <%=type === 'review' ? 'selected' : ''%>" href="<%=review_tab%>"><div><i class="fa-regular fa-message"></i></div><div class='caption'>Community</div></a>
+  <a class="btn2 <%=type === 'review' ? 'selected' : ''%>" href="<%=review_tab%>"><div><i class="fa-regular fa-message"></i></div><div class='caption'>Forum</div></a>
+  <a class="btn2 <%=type === 'files' ? 'selected' : ''%>" href="<%=files_tab%>"><div><i class="fa-solid fa-file-lines"></i></div><div class='caption'>Files</div></a>
   <a class="btn2 <%=type === 'browse' ? 'selected' : ''%>" href="<%=dev_tab%>"><div><i class="fa-solid fa-code"></i></div><div class='caption'>Dev</div></a>
   <a class="btn2 <%=type === 'run' ? 'selected' : ''%>" href="<%=run_tab%>"><div><i class="fa-solid fa-circle-play"></i></div><div class='caption'>Run</div></a>
 </div>
@@ -2931,6 +3116,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     </div>
   </div>
 <% } else { %>
+  <% if (type !== 'files') { %>
   <aside class='active'>
      <!--
     <div class='header-top header-item'>
@@ -2963,15 +3149,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
             <div class='loader'><i class='fa-solid fa-angle-right'></i></div>
             -->
           </a>
-          <a id='editortab' data-mode="refresh" target="<%=editor_tab%>" href="<%=editor_tab%>" class="btn header-item frame-link edit-tab" data-index="11">
-            <div class='tab'>
-              <i class="fa-solid fa-file-lines"></i>
-              <div class='display'>Files</div>
-              <div class='tab-metric'>
-                <span class='disk-usage tab-metric__value' data-path="/">--</span>
-              </div>
-            </div>
-          </a>
+          
           <div class="dynamic <%=type==='run' ? '' : 'selected'%>">
             <div class='submenu'>
               <% if (plugin_menu) { %>
@@ -3006,6 +3184,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       </div>
     </div>
   </aside>
+  <% } %>
   <% if (type === "run") { %>
     <div class='appcanvas_filler'></div>
   <% } %>
@@ -3024,6 +3203,62 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           </div>
         </div>
         -->
+        <div class='fs-status-dropdown fs-open-explorer'>
+          <button class='fs-status-btn' data-filepath="<%=path%>" type='button'>
+            <span class='fs-status-label'>
+              <i class="fa-solid fa-folder-open"></i>
+              <span class='fs-status-title'>Open in File Explorer</span>
+            </span>
+          </button>
+        </div>
+        <div class='fs-status-dropdown git-changes'>
+          <button id='fs-changes-btn' class='fs-status-btn revealer' data-group='#fs-changes-menu' type='button'>
+            <span class='fs-status-label'><i class="fa-solid fa-code-compare"></i> Changes</span>
+            <div class='badge'></div>
+          </button>
+          <div class='fs-dropdown-menu submenu hidden' id='fs-changes-menu'></div>
+        </div>
+        <div class='fs-status-dropdown git-fork'>
+          <button id='fs-fork-btn' class='fs-status-btn revealer' data-group='#fs-fork-menu' type='button'>
+            <span class='fs-status-label'>
+              <i class="fa-solid fa-code-branch"></i>
+              <span class='fs-status-title'>Fork</span>
+            </span>
+          </button>
+          <div class='fs-dropdown-menu submenu hidden' id='fs-fork-menu'></div>
+        </div>
+        <div class='fs-status-dropdown git-publish'>
+          <button id='fs-push-btn' class='fs-status-btn revealer' data-group='#fs-push-menu' type='button'>
+            <span class='fs-status-label'>
+              <i class="fa-brands fa-github"></i>
+              <span class='fs-status-title'>Publish</span>
+            </span>
+          </button>
+          <div class='fs-dropdown-menu submenu hidden' id='fs-push-menu'></div>
+        </div>
+      </div>
+    <% } else if (type === 'files') { %>
+      <div id='fs-status' data-workspace="<%=name%>" data-create-uri="<%=git_create_url%>" data-history-uri="<%=git_history_url%>" data-status-uri="<%=git_status_url%>" data-uri="<%=git_monitor_url%>" data-push-uri="<%=git_push_url%>" data-fork-uri="<%=git_fork_url%>">
+        <!--
+        <div class='fs-status-dropdown nested-menu git blue'>
+          <button type='button' class='fs-status-btn frame-link reveal'>
+            <span class='fs-status-label'>
+              <i class="fa-brands fa-git-alt"></i>
+              Git
+            </span>
+          </button>
+          <div class='fs-dropdown-menu submenu hidden' id='git-repos'>
+          </div>
+        </div>
+        -->
+        <div class='fs-status-dropdown fs-open-explorer'>
+          <button class='fs-status-btn' data-filepath="<%=path%>" type='button'>
+            <span class='fs-status-label'>
+              <i class="fa-solid fa-folder-open"></i>
+              <span class='fs-status-title'>Open in File Explorer</span>
+            </span>
+          </button>
+        </div>
         <div class='fs-status-dropdown git-changes'>
           <button id='fs-changes-btn' class='fs-status-btn revealer' data-group='#fs-changes-menu' type='button'>
             <span class='fs-status-label'><i class="fa-solid fa-code-compare"></i> Changes</span>
@@ -3052,6 +3287,9 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       </div>
     <% } %>
     <main class='browserview'>
+      <% if (type === 'files') { %>
+        <iframe class='selected' src="<%=editor_tab%>"></iframe>
+      <% } %>
     </main>
   </div>
 </div>
@@ -3295,6 +3533,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 ""
@@ -3449,22 +3689,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 ""
     }
@@ -3523,7 +3777,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"
@@ -3545,6 +3800,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]) => {
@@ -3689,11 +3946,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
@@ -3769,14 +4044,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
@@ -3829,7 +4108,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
       }
@@ -3854,13 +4133,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)
@@ -3874,11 +4156,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))
     }
@@ -3896,7 +4178,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
@@ -3920,15 +4202,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)
@@ -3936,6 +4219,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) {
@@ -3950,17 +4255,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)
@@ -4060,6 +4368,26 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       tabLinkHideTimer = null
     }
 
+    // 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)
@@ -4143,7 +4471,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     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"
@@ -4151,7 +4478,24 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       const valueSpan = document.createElement("span")
       valueSpan.className = "value"
       valueSpan.textContent = entry.display
-      item.append(labelSpan, valueSpan)
+
+      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)
     })
 
@@ -6517,7 +6861,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     }
   });
   */
-  <% if (type === "browse") { %>
+  <% if (type === "browse" || type === "files") { %>
     const repoStatusCache = new Map()
     let lastRepoList = []
     let currentChanges = []
@@ -7143,10 +7487,43 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     const showIframeView = (src) => {
       const iframeMarkup = `<iframe src="${src}" frameborder="0"></iframe>`
       const diffBody = document.querySelector('.pinokio-modal-body--diff')
+      let iframeContainer = null
       if (diffBody) {
         diffBody.classList.remove('pinokio-modal-body--diff')
         diffBody.classList.add('pinokio-modal-body--iframe')
         diffBody.innerHTML = iframeMarkup
+        iframeContainer = diffBody
+      } else {
+        const activeSwal = Swal.isVisible()
+        const fallbackHtml = `
+          <div class="pinokio-modal-surface pinokio-modal-surface--iframe">
+            <div class="pinokio-modal-body pinokio-modal-body--iframe"></div>
+          </div>
+        `
+        const launchPromise = Swal.fire({
+          html: fallbackHtml,
+          customClass: {
+            popup: 'pinokio-modern-modal',
+            htmlContainer: 'pinokio-modern-html',
+            closeButton: 'pinokio-modern-close'
+          },
+          backdrop: 'rgba(9,11,15,0.65)',
+          width: 'min(720px, 90vw)',
+          showConfirmButton: false,
+          showCloseButton: true,
+          buttonsStyling: false,
+          focusConfirm: false,
+        })
+        if (!activeSwal) {
+          launchPromise.then(() => {})
+        }
+        const container = Swal.getHtmlContainer()
+        if (container) {
+          iframeContainer = container.querySelector('.pinokio-modal-body--iframe')
+          if (iframeContainer) {
+            iframeContainer.innerHTML = iframeMarkup
+          }
+        }
       }
       const commitFooter = document.querySelector('.pinokio-modal-footer--commit')
       if (commitFooter && commitFooter.parentNode) {
@@ -7616,7 +7993,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
         }
 
         const historyData = await response.json()
-        displayGitHistory(historyData, { repoName: repoName || null, repoParam: repoParam || null })
+        displayGitHistory(historyData, { repoName: repoName || null, repoParam: repoParam || null, repoData })
       } catch (error) {
         console.error('Failed to load git history:', error)
         Swal.fire({
@@ -7629,9 +8006,14 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     
     const displayGitHistory = (historyData, options = {}) => {
       const repoName = options && typeof options === 'object' ? options.repoName : null
+      const repoData = options && typeof options === 'object' ? options.repoData : null
       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]
@@ -7659,6 +8041,26 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
             </div>
           </div>
           ${metaBadges.length ? `<div class="pinokio-history-meta">${metaBadges.join('')}</div>` : ''}
+          <div class="pinokio-history-latest-banner" data-history-latest-banner>
+            <div class="pinokio-history-latest-text">
+              Currently viewing ${escapeHtml(currentRef)}
+            </div>
+            <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 ? 
               '<div class="pinokio-history-empty">No commits found</div>' :
@@ -7689,8 +8091,76 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
               if (commitInfo) {
                 await showCommitDiffModal(commitInfo)
               }
-            })
+              })
           })
+
+          const returnBtn = document.querySelector('[data-history-return-head]')
+          const banner = document.querySelector('[data-history-latest-banner]')
+          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) {
+              checkoutCwd = historyData.dir
+            } else if (repoParam) {
+              checkoutCwd = repoParam
+            }
+
+            const isOid = (s) => typeof s === 'string' && /^[0-9a-f]{7,40}$/i.test(s)
+            const branchEntries = Array.isArray(historyData.branches) ? historyData.branches : []
+            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 (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)
+              })
+            }
+
+            // 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) {
+            const parent = banner.parentNode
+            if (parent) {
+              parent.removeChild(banner)
+            }
+          }
         }
       })
     }
@@ -7731,6 +8201,20 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
         alert('No file changes detected.')
         return
       }
+
+      const commitOid = typeof diffData.oid === 'string' ? diffData.oid : (Array.isArray(changes) && typeof changes[0]?.ref === 'string' ? changes[0].ref : null)
+      const commitCheckoutCwd = (() => {
+        const url = typeof diffData.git_commit_url === 'string' ? new URL(diffData.git_commit_url, window.location.origin) : null
+        if (!url) {
+          return null
+        }
+        const cwdParam = url.searchParams.get('cwd')
+        return cwdParam && cwdParam.length > 0 ? cwdParam : null
+      })()
+
+      const checkoutUrl = commitOid && commitCheckoutCwd
+        ? `/run/scripts/git/checkout.json?cwd=${encodeURIComponent(commitCheckoutCwd)}&commit=${encodeURIComponent(commitOid)}&callback_target=parent&callback=$location.href`
+        : null
       
       // Create custom overlay modal
       const overlay = document.createElement('div')
@@ -7755,6 +8239,13 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
                 <div class="pinokio-git-diff-empty-state">Select a file to view its changes</div>
               </div>
             </div>
+            ${checkoutUrl ? `
+              <div class="pinokio-git-commit-actions">
+                <button type="button" class="pinokio-git-commit-switch-btn">
+                  <i class="fa-solid fa-clock-rotate-left"></i> Switch to this version
+                </button>
+              </div>
+            ` : ''}
           </div>
         </div>
       `
@@ -7763,14 +8254,23 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       
       // Add close handler
       const closeBtn = overlay.querySelector('.pinokio-custom-commit-close')
-      closeBtn.addEventListener('click', () => {
-        document.body.removeChild(overlay)
-      })
+      let escHandler = null
+      const cleanupOverlay = () => {
+        if (escHandler) {
+          document.removeEventListener('keydown', escHandler)
+          escHandler = null
+        }
+        if (overlay.parentNode) {
+          overlay.parentNode.removeChild(overlay)
+        }
+      }
+
+      closeBtn.addEventListener('click', cleanupOverlay)
       
       // Close on overlay click
       overlay.addEventListener('click', (e) => {
         if (e.target === overlay) {
-          document.body.removeChild(overlay)
+          cleanupOverlay()
         }
       })
       
@@ -7798,16 +8298,66 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           }
         })
       })
+
+      if (checkoutUrl) {
+        const switchBtn = overlay.querySelector('.pinokio-git-commit-switch-btn')
+        if (switchBtn) {
+          switchBtn.addEventListener('click', () => {
+            cleanupOverlay()
+            showIframeView(checkoutUrl)
+          })
+        }
+      }
       
       // Handle escape key
-      const escHandler = (e) => {
+      escHandler = (e) => {
         if (e.key === 'Escape') {
-          document.body.removeChild(overlay)
-          document.removeEventListener('keydown', escHandler)
+          cleanupOverlay()
         }
       }
       document.addEventListener('keydown', escHandler)
     }
+
+    const openCheckoutTerminal = (src) => {
+      const overlay = document.createElement('div')
+      overlay.className = 'pinokio-custom-terminal-overlay'
+      overlay.innerHTML = `
+        <div class="pinokio-custom-terminal-modal">
+          <div class="pinokio-custom-terminal-header">
+            <h3>Git Checkout</h3>
+            <button class="pinokio-custom-terminal-close">×</button>
+          </div>
+          <div class="pinokio-custom-terminal-body">
+            <iframe src="${src}" frameborder="0"></iframe>
+          </div>
+        </div>
+      `
+
+      const cleanup = () => {
+        document.removeEventListener('keydown', escHandler)
+        if (overlay.parentNode) {
+          overlay.parentNode.removeChild(overlay)
+        }
+      }
+
+      const closeBtn = overlay.querySelector('.pinokio-custom-terminal-close')
+      closeBtn.addEventListener('click', cleanup)
+
+      overlay.addEventListener('click', (event) => {
+        if (event.target === overlay) {
+          cleanup()
+        }
+      })
+
+      const escHandler = (event) => {
+        if (event.key === 'Escape') {
+          cleanup()
+        }
+      }
+
+      document.addEventListener('keydown', escHandler)
+      document.body.appendChild(overlay)
+    }
     
     const createCommitItem = (commitData) => {
       const commit = commitData.commit