pinokiod 5.1.10 → 5.1.11

package/server/views/app.ejs

@@ -24,9 +24,30 @@ body.dark #devtab.selected {
   border: none;
   background: rgb(27, 28, 29) !important;
 }
+.config-info {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: bold;
+}
+body.dark .snapshot-comment {
+  color: white;
+}
+.config-info:hover, .config-info:hover i {
+  color: rgba(127, 91, 243, 0.95);
+}
 #editortab {
   color: #7f5bf3;
 }
+body.dark #layout-toggle {
+  color: white;
+}
+#layout-toggle {
+  padding: 10px;
+  border: none;
+  background: none;
+}
 #devtab {
   align-items: center;
   justify-content: center;
@@ -133,6 +154,42 @@ body.dark .m {
   flex-direction: column;
   flex-grow: 1;
 }
+.appcanvas.vertical {
+  flex-direction: row;
+  --appcanvas-sidebar-width: 150px;
+}
+.appcanvas.vertical > aside .header-item {
+  border-radius: 0;
+}
+.appcanvas.vertical #devtab {
+  border-radius: 0;
+}
+.appcanvas.vertical img.meta-icon {
+  /*
+  padding: 10px;
+  display: block;
+  margin: 0 auto;
+  width: 50px;
+  height: 50px;
+  */
+}
+.appcanvas.vertical aside {
+  flex-direction: row; 
+}
+.appcanvas.vertical > aside .submenu {
+  display: block;
+}
+.appcanvas.vertical > aside .m {
+  display: block;
+}
+.appcanvas.vertical .menu-container {
+  overflow: auto;
+  display: block;
+  width: var(--appcanvas-sidebar-width);
+}
+.appcanvas.vertical .config-info {
+  margin-bottom: 10px;
+}
 .appcanvas {
   display: flex;
   flex-direction: column;
@@ -158,9 +215,37 @@ body.dark .appcanvas_filler {
   height: 5px;
   background: #F1F1F1 !important;
 }
+.appcanvas-resizer {
+  display: none;
+}
+.appcanvas.vertical .appcanvas-resizer {
+  display: flex;
+  flex: 0 0 0px;
+  align-items: stretch;
+  justify-content: center;
+  cursor: grab;
+  touch-action: none;
+}
+.appcanvas.vertical .appcanvas-resizer:hover::before {
+  background: rgba(0, 0, 0, 0.15);
+}
+.appcanvas.vertical .appcanvas-resizer::before {
+  content: '';
+  width: 5px;
+  border-radius: 999px;
+  margin: 3px 0;
+}
+body.dark .appcanvas.vertical .appcanvas-resizer:hover::before {
+  background: rgba(255, 255, 255, 0.3);
+}
+.appcanvas.vertical > aside .header-item {
+  max-width: none;
+}
 
 .appcanvas > .container {
+/*
   order: 1;
+  */
   min-height: 0;
   flex-grow: 1;
   display: flex;
@@ -1185,11 +1270,15 @@ body.dark .submenu {
   font-size: 12px;
   font-weight: bold;
 }
+body.dark .disk-usage {
+  border-right: 1px solid rgba(255,255,255,0.1);
+}
 .disk-usage {
-  flex-grow: 1;
+  border-right: 1px solid rgba(0,0,0,0.1);
   font-weight: bold;
-  text-align: right;
-  opacity: 0.5;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
 }
 .disk-usage i {
   margin-right: 5px;
@@ -2375,6 +2464,7 @@ body.dark .pinokio-git-diff-viewer-header {
   background: var(--pinokio-modal-body-bg);
   color: var(--pinokio-modal-body-text-color);
   padding: 10px;
+  font-size: 14px;
 }
 
 .pinokio-modal-body--history {
@@ -3227,7 +3317,63 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 .meta-icon {
   width: 25px;
   height: 25px;
-  padding: 0 0 0 10px;
+  margin-right: 10px;
+}
+body.dark .snapshot-footer {
+  color: white;
+  border-top: 1px solid rgba(148, 163, 184, 0.2);
+}
+.snapshot-footer .btn {
+  font-size: 14px;
+}
+.snapshot-footer {
+  border-top: 1px solid rgba(148, 163, 184, 0.35);
+  padding: 8px !important;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  font-size: 14px;
+  flex-wrap: wrap;
+}
+.snapshot-footer .snapshot-btn {
+  background: rgba(127, 91, 243, 0.95) !important;
+  padding: 8px;
+}
+.snapshot-footer .caption {
+  opacity: 0.8;
+}
+.snapshot-footer-save {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.snapshot-footer-publish {
+  flex-basis: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.snapshot-footer-publish-text {
+  opacity: 0.8;
+}
+.snapshot-footer-input {
+  flex-grow: 1;
+}
+body.dark .snapshot-footer-input input {
+  background: rgba(255,255,255,0.07);
+}
+.snapshot-footer-input input {
+  background: rgba(0,0,0,0.07);
+  width: 100%;
+  padding: 8px;
+  border-radius: 2px;
+  border: none;
+  font-size: 12px;
+}
+.snapshot-footer-input input::placeholder {
+  opacity: 0.7;
 }
 </style>
 <link href="/app.css" rel="stylesheet"/>
@@ -3304,9 +3450,17 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
   <% if (type !== 'files') { %>
   <aside class='active'>
     <div class='menu-container'>
-      <% if (config.icon) { %>
-        <img class='meta-icon' src="<%=config.icon%>"/>
-      <% } %>
+      <div class='config-info'> 
+        <button type='button' id='layout-toggle'>
+          <i class="fa-solid fa-bars"></i>
+        </button>
+        <% if (config.icon) { %>
+          <img class='meta-icon' src="<%=config.icon%>"/>
+        <% } %>
+        <% if (config.title) { %>
+          <div><%=config.title%></div>
+        <% } %>
+      </div>
       <div class='m n system' data-type="n">
         <%if (type==='browse') { %>
           <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn frame-link selected" data-index="10">
@@ -3356,6 +3510,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       </div>
     </div>
   </aside>
+  <div class='appcanvas-resizer' id="appcanvas-resizer" role="separator" aria-orientation="vertical" aria-valuemin="140" aria-valuemax="560" aria-valuenow="150" tabindex="0" aria-label="Resize navigation sidebar"></div>
   <% } %>
   <% if (type === "run") { %>
     <div class='appcanvas_filler'></div>
@@ -3375,6 +3530,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           </div>
         </div>
         -->
+        <span class="disk-usage tab-metric__value" data-path="/">--</span>
         <div class='fs-status-dropdown fs-open-explorer'>
           <button class='fs-status-btn' data-filepath="<%=path%>" type='button'>
             <span class='fs-status-label'>
@@ -3419,11 +3575,6 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       </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="app-info" title="<%=config.title || name%>">
-          <div class="app-info-card">
-            <img src="<%= config.icon %>" onerror="this.onerror=null; this.src='/pinokio-black.png'" alt="Project icon">
-          </div>
-        </div>
         <!--
         <div class='fs-status-dropdown nested-menu git blue'>
           <button type='button' class='fs-status-btn frame-link reveal'>
@@ -3436,6 +3587,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           </div>
         </div>
         -->
+        <span class="disk-usage tab-metric__value" data-path="/">--</span>
         <div class='fs-status-dropdown fs-open-explorer'>
           <button class='fs-status-btn' data-filepath="<%=path%>" type='button'>
             <span class='fs-status-label'>
@@ -3477,6 +3629,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           </button>
           <div class='fs-dropdown-menu submenu hidden' id='fs-push-menu'></div>
         </div>
+        <div class='flexible'></div>
       </div>
     <% } %>
     <main class='browserview'>
@@ -3484,6 +3637,31 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
         <iframe class='selected' src="<%=editor_tab%>"></iframe>
       <% } %>
     </main>
+    <% const registryEnabled = typeof registryBetaEnabled === "undefined" ? false : registryBetaEnabled; %>
+    <% const showSnapshotFooter = typeof hasSnapshots === "undefined" ? true : (!hasSnapshots || (registryEnabled && pendingSnapshotId)); %>
+    <% if (showSnapshotFooter) { %>
+      <div class='snapshot-footer' data-workspace="<%=name%>" data-pending-snapshot-id="<%= pendingSnapshotId ? pendingSnapshotId : '' %>" data-registry-beta-enabled="<%= registryEnabled ? '1' : '0' %>">
+        <div class="snapshot-footer-save <%= registryEnabled && pendingSnapshotId ? 'hidden' : '' %>">
+          <div class='caption' title="<%= registryEnabled ? 'Saves a checkpoint for this app (exact git commits). You can publish it after saving.' : 'Saves a checkpoint for this app (exact git commits).' %>">
+            Save this exact state and restore later with 1-click
+          </div>
+          <div class="snapshot-footer-actions" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
+            <button type="button" class="btn btn-primary snapshot-btn-save">
+              <i class="fa-solid fa-circle-check"></i> Save checkpoint
+            </button>
+          </div>
+        </div>
+        <% if (registryEnabled) { %>
+          <div class="snapshot-footer-publish <%= pendingSnapshotId ? '' : 'hidden' %>" aria-live="polite">
+            <div class="snapshot-footer-publish-text">Local save success! Publish to the registry?</div>
+            <div class="snapshot-footer-actions" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
+              <button type="button" class="btn btn-primary snapshot-btn-publish"><i class="fa-solid fa-cloud-arrow-up"></i> Publish Checkpoint</button>
+              <button type="button" class="btn snapshot-btn-later">Later</button>
+            </div>
+          </div>
+        <% } %>
+      </div>
+    <% } %>
   </div>
 </div>
   <script>
@@ -5085,7 +5263,7 @@ const rerenderMenuSection = (container, html) => {
         Swal.close()
         if (res) {
           if (res.success) {
-            location.href = "/"
+            location.href = "/home"
           } else if (res.error) {
             alert(res.error)
           }
@@ -5291,9 +5469,9 @@ const rerenderMenuSection = (container, html) => {
         e.stopPropagation()
         return
       }
-      if (target.id === 'fs-changes-btn') {
-        check_git()
-      }
+          if (target.id === 'fs-changes-btn' || target.id === 'fs-push-btn' || target.id === 'fs-fork-btn') {
+            check_git(true)
+          }
       e.preventDefault()
       e.stopPropagation()
       const group = target.getAttribute("data-group")
@@ -5594,6 +5772,178 @@ const rerenderMenuSection = (container, html) => {
       })
     }
   })
+
+  const layoutToggleButton = document.querySelector(".config-info")
+  if (layoutToggleButton) {
+    const layoutToggleIcon = layoutToggleButton.querySelector("i.fa-bars")
+    const appcanvas = document.querySelector(".appcanvas")
+    const sidebarResizer = document.getElementById("appcanvas-resizer")
+    const sidebarContainer = document.querySelector(".appcanvas > aside .menu-container")
+
+    if (appcanvas && typeof localStorage !== "undefined") {
+      const storedLayout = localStorage.getItem("pinokioLayoutVertical")
+      if (storedLayout === "1") {
+        appcanvas.classList.add("vertical")
+        if (layoutToggleIcon) {
+          layoutToggleIcon.classList.add("fa-rotate-90")
+        }
+      }
+    }
+
+    layoutToggleButton.addEventListener("click", () => {
+      if (!appcanvas) {
+        return
+      }
+      const isVertical = appcanvas.classList.toggle("vertical")
+      if (layoutToggleIcon) {
+        if (isVertical) {
+          layoutToggleIcon.classList.add("fa-rotate-90")
+        } else {
+          layoutToggleIcon.classList.remove("fa-rotate-90")
+        }
+      }
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem("pinokioLayoutVertical", isVertical ? "1" : "0")
+      }
+    })
+
+    if (appcanvas && sidebarResizer && sidebarContainer) {
+      const SIDEBAR_MIN_WIDTH = 140
+      const SIDEBAR_MAX_WIDTH = 560
+      const workspaceName = "<%= typeof name === 'string' ? name : '' %>"
+      const sidebarWidthStorageKey = workspaceName
+        ? `pinokio-app-sidebar-width:${workspaceName}`
+        : "pinokio-app-sidebar-width"
+
+      let sidebarWidth = null
+      let isResizing = false
+      let pointerId = null
+      let resizeState = null
+      let handlePointerMove = null
+      let handlePointerUp = null
+
+      const clampSidebarWidth = (value) => {
+        const numeric = typeof value === "number" ? value : parseInt(value, 10)
+        if (Number.isNaN(numeric)) {
+          return SIDEBAR_MIN_WIDTH
+        }
+        return Math.min(Math.max(numeric, SIDEBAR_MIN_WIDTH), SIDEBAR_MAX_WIDTH)
+      }
+
+      const readSidebarWidth = () => {
+        try {
+          const stored = window.localStorage.getItem(sidebarWidthStorageKey)
+          if (!stored) {
+            return null
+          }
+          const parsed = parseInt(stored, 10)
+          if (Number.isNaN(parsed)) {
+            return null
+          }
+          return parsed
+        } catch (_) {
+          return null
+        }
+      }
+
+      const persistSidebarWidth = (width) => {
+        try {
+          window.localStorage.setItem(sidebarWidthStorageKey, String(width))
+        } catch (_) {}
+      }
+
+      const applySidebarWidth = (value, persist) => {
+        const width = clampSidebarWidth(value)
+        sidebarWidth = width
+        appcanvas.style.setProperty("--appcanvas-sidebar-width", `${width}px`)
+        sidebarResizer.setAttribute("aria-valuenow", String(width))
+        if (persist) {
+          persistSidebarWidth(width)
+        }
+      }
+
+      const initSidebarWidth = () => {
+        const stored = readSidebarWidth()
+        const base = typeof stored === "number"
+          ? stored
+          : parseInt(getComputedStyle(appcanvas).getPropertyValue("--appcanvas-sidebar-width"), 10) || 150
+        applySidebarWidth(base, false)
+      }
+
+      const finishResizing = () => {
+        if (!isResizing) {
+          return
+        }
+        isResizing = false
+        if (pointerId != null && sidebarResizer) {
+          try {
+            sidebarResizer.releasePointerCapture(pointerId)
+          } catch (_) {}
+        }
+        pointerId = null
+        resizeState = null
+        window.removeEventListener("pointermove", handlePointerMove)
+        window.removeEventListener("pointerup", handlePointerUp)
+        if (sidebarWidth != null) {
+          persistSidebarWidth(sidebarWidth)
+        }
+      }
+
+      const bindResizeListeners = () => {
+        if (!handlePointerMove) {
+          handlePointerMove = (event) => {
+            if (!isResizing || !appcanvas.classList.contains("vertical")) {
+              return
+            }
+            if (pointerId != null && event.pointerId !== pointerId) {
+              return
+            }
+            event.preventDefault()
+            const state = resizeState || {}
+            const baseLeft = typeof state.left === "number"
+              ? state.left
+              : sidebarContainer.getBoundingClientRect().left
+            const offset = typeof state.offset === "number" ? state.offset : 0
+            const nextWidth = event.clientX - baseLeft - offset
+            applySidebarWidth(nextWidth, false)
+          }
+        }
+        if (!handlePointerUp) {
+          handlePointerUp = (event) => {
+            if (pointerId != null && event.pointerId !== pointerId) {
+              return
+            }
+            finishResizing()
+          }
+        }
+        window.addEventListener("pointermove", handlePointerMove)
+        window.addEventListener("pointerup", handlePointerUp, { once: true })
+      }
+
+      sidebarResizer.addEventListener("pointerdown", (event) => {
+        if (!appcanvas.classList.contains("vertical")) {
+          return
+        }
+        if (event.button !== 0 && event.pointerType !== "touch") {
+          return
+        }
+        event.preventDefault()
+        isResizing = true
+        pointerId = event.pointerId
+        try {
+          sidebarResizer.setPointerCapture(event.pointerId)
+        } catch (_) {}
+        const rect = sidebarContainer.getBoundingClientRect()
+        resizeState = {
+          left: rect.left,
+          offset: event.clientX - (rect.left + rect.width)
+        }
+        bindResizeListeners()
+      })
+
+      initSidebarWidth()
+    }
+  }
   setupTabLinkHover()
   document.addEventListener("click", (event) => {
     if (event.target.closest("#fs-status .fs-dropdown-menu") || event.target.closest("#fs-status .fs-status-btn")) {
@@ -5654,7 +6004,7 @@ const rerenderMenuSection = (container, html) => {
             // KB
             val = `${Math.floor(res.du/k * 100) / 100} KB`
           }
-          el.innerHTML = val
+          el.innerHTML = `<i class="fa-solid fa-database"></i> ${val}`
         } else {
         }
       })
@@ -5854,6 +6204,7 @@ const rerenderMenuSection = (container, html) => {
     let gitCommitUrl = null
     let activeRepoKey = null
     let gitStatusRequest = null
+    let gitStatusRequestForce = false
 
     const fsStatusEl = document.querySelector('#fs-status')
     const changesDropdownContainer = document.querySelector('#fs-status .git-changes')
@@ -5885,6 +6236,15 @@ const rerenderMenuSection = (container, html) => {
     const historyUri = readDataAttr(fsStatusEl, 'data-history-uri')
     const defaultPushUri = readDataAttr(fsStatusEl, 'data-push-uri')
     const defaultForkUri = readDataAttr(fsStatusEl, 'data-fork-uri')
+    const buildStatusUrl = (forceRefresh = false) => {
+      if (!statusUri) {
+        return null
+      }
+      if (!forceRefresh) {
+        return statusUri
+      }
+      return statusUri.includes('?') ? `${statusUri}&force=1` : `${statusUri}?force=1`
+    }
 
     const buildWorkspaceLogsUrl = () => {
       if (workspaceName && workspaceName.length > 0) {
@@ -6348,12 +6708,22 @@ const rerenderMenuSection = (container, html) => {
       }
       let repoData = repoStatusCache.get(repoParam) || null
       if (!repoData && typeof check_git === 'function') {
-        await check_git()
+        await check_git(true)
         repoData = repoStatusCache.get(repoParam) || null
       }
       return repoData
     }
 
+    async function refreshRepoData(repoParam) {
+      if (!repoParam) {
+        return null
+      }
+      if (typeof check_git === 'function') {
+        await check_git(true)
+      }
+      return repoStatusCache.get(repoParam) || null
+    }
+
     const getRepoChangeCount = (repo) => {
       if (!repo) {
         return 0
@@ -6369,8 +6739,11 @@ const rerenderMenuSection = (container, html) => {
 
     async function ensureRemoteForPublish({ repoParam, repoName }) {
       const label = repoName || repoParam || 'Repository'
-      const initialRepo = await getRepoData(repoParam)
-      if (hasRemoteConfigured(initialRepo)) {
+      let repoCandidate = await getRepoData(repoParam)
+      if (!hasRemoteConfigured(repoCandidate)) {
+        repoCandidate = await refreshRepoData(repoParam)
+      }
+      if (hasRemoteConfigured(repoCandidate)) {
         return { remoteReady: true, shouldOpenPublish: true }
       }
 
@@ -6381,7 +6754,7 @@ const rerenderMenuSection = (container, html) => {
       }
 
       if (typeof check_git === 'function') {
-        await check_git()
+        await check_git(true)
       }
       const refreshedRepo = await getRepoData(repoParam)
       if (hasRemoteConfigured(refreshedRepo)) {
@@ -6468,7 +6841,7 @@ const rerenderMenuSection = (container, html) => {
           console.error('Failed to open commit modal before publish:', error)
         }
         if (typeof check_git === 'function') {
-          await check_git()
+          await check_git(true)
         }
         return { proceed: true, action: 'commit', changeCount }
       }
@@ -6544,6 +6917,11 @@ const rerenderMenuSection = (container, html) => {
     }
 
     const runPublishFlow = async ({ repoParam, repoName }) => {
+      if (typeof check_git === 'function') {
+        try {
+          await check_git(true)
+        } catch (_) {}
+      }
       let preflight = await fetchPublishPreflightState(repoParam)
       if (!preflight.ok) {
         handlePreflightFailure({ preflight, repoParam, repoName })
@@ -6783,24 +7161,29 @@ const rerenderMenuSection = (container, html) => {
       }
     }
 
-    const check_git = async () => {
+    const check_git = async (forceRefresh = false) => {
       if (gitStatusRequest) {
+        if (forceRefresh && !gitStatusRequestForce) {
+          return gitStatusRequest.then(() => check_git(true))
+        }
         return gitStatusRequest
       }
 
+      const targetStatusUrl = buildStatusUrl(forceRefresh)
+      gitStatusRequestForce = Boolean(forceRefresh)
       gitStatusRequest = (async () => {
         if (repoStatusCache.size === 0) {
           setChangesMenuMessage(statusUri ? 'Loading repositories...' : 'Loading changes...')
           updateChangesButtonState(false)
         }
 
-        if (!statusUri) {
+        if (!targetStatusUrl) {
           await updateFromLegacyMonitor()
           return
         }
 
         try {
-          const response = await fetch(statusUri)
+          const response = await fetch(targetStatusUrl)
           if (!response.ok) {
             throw new Error(`HTTP ${response.status}`)
           }
@@ -6857,6 +7240,7 @@ const rerenderMenuSection = (container, html) => {
         await gitStatusRequest
       } finally {
         gitStatusRequest = null
+        gitStatusRequestForce = false
       }
     }
     
@@ -6922,7 +7306,7 @@ const rerenderMenuSection = (container, html) => {
             typeof event.data.callback === 'string' && 
             event.data.callback.startsWith('$')) {
           if (typeof check_git === 'function') {
-            check_git()
+            check_git(true)
           }
           if (reopenDiffOnCallback && typeof showGitDiffModal === 'function') {
             reopenDiffOnCallback = false
@@ -7029,7 +7413,7 @@ const rerenderMenuSection = (container, html) => {
       }
 
       if (!repoParam) {
-        await check_git()
+        await check_git(true)
         const fallback = repoStatusCache.values().next().value
         if (fallback) {
           repoParam = fallback.repoParam
@@ -7048,7 +7432,7 @@ const rerenderMenuSection = (container, html) => {
 
       let repoData = repoStatusCache.get(repoParam)
       if (!repoData) {
-        await check_git()
+        await check_git(true)
         repoData = repoStatusCache.get(repoParam)
       }
 
@@ -8626,7 +9010,7 @@ const rerenderMenuSection = (container, html) => {
 
       let repo = repoStatusCache.get(key)
       if (!repo) {
-        await check_git()
+        await check_git(true)
         repo = repoStatusCache.get(key)
       }
 
@@ -8864,7 +9248,7 @@ const rerenderMenuSection = (container, html) => {
       forkShellModalPromise.then(() => {
         setTimeout(() => {
           updateForkButton()
-          check_git()
+          check_git(true)
         }, 250)
       })
     }
@@ -9033,6 +9417,39 @@ const rerenderMenuSection = (container, html) => {
     // Initialize the publish/create button
     updatePublishButton()
 
+    // If this page was opened explicitly to publish from the Backups screen,
+    // auto-open the publish flow after the button has been initialized.
+    try {
+      const searchParams = new URLSearchParams(window.location.search || "")
+      if (searchParams.get("pinokio.publish") === "1" && pushBtn) {
+        setTimeout(() => {
+          try {
+            pushBtn.click()
+            setTimeout(() => {
+              try {
+                const menu = document.getElementById("fs-push-menu")
+                if (!menu) return
+                const items = menu.querySelectorAll(".pinokio-publish-dropdown-item")
+                const target = Array.from(items).find((el) => {
+                  const dataName = (el.getAttribute("data-name") || "").trim()
+                  return dataName === workspaceName || dataName === (workspaceName + ".git")
+                }) || items[0]
+                if (target) {
+                  target.click()
+                }
+              } catch (_) {}
+            }, 300)
+            try {
+              searchParams.delete("pinokio.publish")
+              const qs = searchParams.toString()
+              const newUrl = window.location.pathname + (qs ? `?${qs}` : "") + window.location.hash
+              window.history.replaceState(null, "", newUrl)
+            } catch (_) {}
+          } catch (_) {}
+        }, 500)
+      }
+    } catch (_) {}
+
     check_git()
     setInterval(() => {
       if (typeof check_git === 'function') {
@@ -9228,5 +9645,356 @@ const rerenderMenuSection = (container, html) => {
 })()
 </script>
 <script src="/tab-idle-notifier.js"></script>
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+  const footer = document.querySelector(".snapshot-footer")
+  if (!footer) return
+  const saveBtn = footer.querySelector(".snapshot-btn-save")
+  const savePanel = footer.querySelector(".snapshot-footer-save")
+  const publishPanel = footer.querySelector(".snapshot-footer-publish")
+  const publishBtn = footer.querySelector(".snapshot-btn-publish")
+  const laterBtn = footer.querySelector(".snapshot-btn-later")
+  const publishText = publishPanel ? publishPanel.querySelector(".snapshot-footer-publish-text") : null
+  const publishActions = publishPanel ? publishPanel.querySelector(".snapshot-footer-actions") : null
+  if (!saveBtn) return
+  const registryBetaEnabled = footer.getAttribute("data-registry-beta-enabled") === "1"
+  const workspace = footer.getAttribute("data-workspace")
+  if (!workspace) {
+    footer.classList.add("hidden")
+    return
+  }
+  let savedSnapshotId = null
+  const saveOriginal = saveBtn.innerHTML
+  const publishOriginal = publishBtn ? publishBtn.innerHTML : ""
+  const setSaveLoading = (isLoading, primaryText) => {
+    saveBtn.disabled = isLoading
+    if (primaryText) {
+      saveBtn.innerHTML = primaryText
+    }
+  }
+  const setPublishLoading = (isLoading, primaryText) => {
+    if (publishBtn) publishBtn.disabled = isLoading
+    if (laterBtn) laterBtn.disabled = isLoading
+    if (primaryText && publishBtn) {
+      publishBtn.innerHTML = primaryText
+    }
+  }
+  const showPublishPanel = () => {
+    if (!registryBetaEnabled) {
+      footer.classList.add("hidden")
+      return
+    }
+    if (publishPanel) publishPanel.classList.remove("hidden")
+    if (savePanel) savePanel.classList.add("hidden")
+  }
+  const pendingSnapshotId = footer.getAttribute("data-pending-snapshot-id")
+  if (pendingSnapshotId) {
+    savedSnapshotId = pendingSnapshotId
+    showPublishPanel()
+  }
+
+  const waitForRegistryLink = async () => {
+    const startedAt = Date.now()
+    while (Date.now() - startedAt < 120000) {
+      try {
+        const s = await fetch("/api/registry/status", { method: "GET", headers: { "Accept": "application/json" } })
+        if (s.ok) {
+          const data = await s.json()
+          if (data && data.linked) return true
+        }
+      } catch (_) {}
+      await new Promise((r) => setTimeout(r, 2000))
+    }
+    return false
+  }
+
+  const publishSnapshot = async (snapshotId) => {
+    const qs = new URLSearchParams()
+    qs.set("snapshotId", String(snapshotId))
+    const res = await fetch(`/checkpoints/publish?${qs.toString()}`, { method: "POST", headers: { "Accept": "application/json" } })
+    if (!res.ok) return { ok: false }
+    try { return await res.json() } catch (_) { return { ok: false } }
+  }
+
+  let isSaving = false
+  let isPublishing = false
+  const showPublishedLink = (publishUrl) => {
+    showPublishPanel()
+    if (publishText) publishText.textContent = "Published."
+    if (publishActions) {
+      publishActions.innerHTML = publishUrl
+        ? `<a class="btn btn-primary" href="${escapePublishUrl(publishUrl)}" target="_blank" rel="noopener"><i class="fa-solid fa-arrow-up-right-from-square"></i> View published checkpoint</a>`
+        : ''
+    }
+  }
+  const escapePublishUrl = (value) => {
+    if (value === null || value === undefined) {
+      return ''
+    }
+    return String(value).replace(/[&<>"']/g, (match) => {
+      switch (match) {
+        case '&':
+          return '&amp;'
+        case '<':
+          return '&lt;'
+        case '>':
+          return '&gt;'
+        case '"':
+          return '&quot;'
+        case '\'':
+          return '&#39;'
+        default:
+          return match
+      }
+    })
+  }
+
+  const promptRegistryConnect = async (suggestedConnectUrl) => {
+    const connectHtml = `
+      <div class="pinokio-modal-surface">
+        <div class="pinokio-modal-header">
+          <div class="pinokio-modal-icon"><i class="fa-solid fa-link"></i></div>
+          <div class="pinokio-modal-heading">
+            <div class="pinokio-modal-title">Connect to Registry</div>
+            <div class="pinokio-modal-subtitle">
+              Enter your registry connect URL to link Pinokio, then we’ll retry the publish.
+            </div>
+          </div>
+        </div>
+        <div class="pinokio-modal-body">
+          <div class="pinokio-modal-form">
+            <div>
+              <label class="pinokio-modal-label" for="pinokio-registry-connect-url">Registry URL</label>
+              <input
+                id="pinokio-registry-connect-url"
+                class="pinokio-modal-input"
+                type="url"
+                placeholder="https://your-registry/connect/pinokio"
+                autocomplete="off"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+    const choice = await Swal.fire({
+      html: connectHtml,
+      backdrop: 'rgba(9,11,15,0.65)',
+      width: 'min(520px, 92vw)',
+      showCancelButton: true,
+      showConfirmButton: true,
+      confirmButtonText: "Open connect page",
+      cancelButtonText: "Cancel",
+      buttonsStyling: false,
+      focusConfirm: false,
+      customClass: {
+        popup: 'pinokio-modern-modal',
+        htmlContainer: 'pinokio-modern-html',
+        closeButton: 'pinokio-modern-close',
+        confirmButton: 'pinokio-modern-confirm',
+        cancelButton: 'pinokio-modern-cancel'
+      },
+      didOpen: () => {
+        const input = document.getElementById("pinokio-registry-connect-url")
+        if (input) {
+          input.value = suggestedConnectUrl || ""
+          try { input.focus() } catch (_) {}
+          try { input.select() } catch (_) {}
+        }
+      },
+      preConfirm: () => {
+        const input = document.getElementById("pinokio-registry-connect-url")
+        const v = input && input.value != null ? String(input.value).trim() : ""
+        if (!v) {
+          Swal.showValidationMessage("Registry URL is required")
+          return false
+        }
+        return v
+      }
+    })
+    if (!choice || !choice.isConfirmed) return false
+    const connectUrl = choice.value ? String(choice.value).trim() : ""
+    if (!connectUrl) return false
+    try {
+      window.open(connectUrl, "pinokio-registry-connect")
+    } catch (_) {
+      window.location.href = connectUrl
+    }
+    const linked = await waitForRegistryLink()
+    if (!linked) {
+      Swal.fire({ icon: "error", title: "Not connected", text: "Could not confirm the registry connection." })
+      return false
+    }
+    return true
+  }
+
+  const handleSave = async (event) => {
+    event.preventDefault()
+    if (isSaving) return
+    isSaving = true
+    setSaveLoading(true, `<i class="fa-solid fa-circle-notch fa-spin"></i> Saving...`)
+    try {
+      const infoRes = await fetch(`/info/api/${encodeURIComponent(workspace)}`, {
+        method: "GET",
+        headers: { "Accept": "application/json" }
+      })
+      let repos = []
+      if (infoRes.ok) {
+        try {
+          const payload = await infoRes.json()
+          repos = Array.isArray(payload && payload.repos) ? payload.repos : []
+        } catch (_) {}
+      }
+      const hasMainWithRemote = repos.some((repo) => repo && repo.main && repo.url)
+      if (!hasMainWithRemote) {
+        setSaveLoading(false, saveOriginal)
+        const modalHtml = `
+          <div class="pinokio-modal-surface">
+            <div class="pinokio-modal-header">
+              <div class="pinokio-modal-icon"><i class="fa-brands fa-github"></i></div>
+              <div class="pinokio-modal-heading">
+                <div class="pinokio-modal-title">Publish this workspace first</div>
+                <div class="pinokio-modal-subtitle">
+                  Backups are indexed by git remote. Publish this workspace to GitHub (or add a remote) before creating a snapshot.
+                </div>
+              </div>
+            </div>
+            <div class="pinokio-modal-body">
+              <p class="pinokio-modal-text">
+                We couldn&apos;t find a Git remote for this workspace. Once you publish it, you&apos;ll be able to create snapshots and restore them from the Backups page.
+              </p>
+            </div>
+          </div>
+        `
+        Swal.fire({
+          html: modalHtml,
+          customClass: {
+            popup: 'pinokio-modern-modal',
+            htmlContainer: 'pinokio-modern-html',
+            closeButton: 'pinokio-modern-close',
+            confirmButton: 'pinokio-modern-confirm',
+            cancelButton: 'pinokio-modern-cancel'
+          },
+          backdrop: 'rgba(9,11,15,0.65)',
+          width: 'min(520px, 90vw)',
+          buttonsStyling: false,
+          showCloseButton: false,
+          showConfirmButton: true,
+          showCancelButton: true,
+          confirmButtonText: 'Open Publish',
+          cancelButtonText: 'Cancel',
+          focusConfirm: false,
+        }).then((result) => {
+          if (result && result.isConfirmed) {
+            const params = new URLSearchParams(window.location.search || "")
+            params.set("pinokio.publish", "1")
+            const qs = params.toString()
+            const url = `/p/${encodeURIComponent(workspace)}/dev${qs ? `?${qs}` : ""}`
+            window.location.href = url
+          }
+        })
+        return
+      }
+      const params = new URLSearchParams()
+      params.set("workspace", workspace)
+      const res = await fetch(`/checkpoints/snapshot?${params.toString()}`, {
+        method: "POST",
+        headers: { "Accept": "application/json" }
+      })
+      const payload = res.ok ? await res.json().catch(() => null) : null
+      if (!payload || !payload.ok) {
+        setSaveLoading(false, saveOriginal)
+        Swal.fire({ icon: "error", title: "Error", text: "Save failed" })
+        return
+      }
+      const snapshotId = payload && payload.created && payload.created.id ? payload.created.id : null
+      if (!snapshotId) {
+        setSaveLoading(false, saveOriginal)
+        Swal.fire({ icon: "error", title: "Error", text: "Save failed" })
+        return
+      }
+      savedSnapshotId = snapshotId
+      setSaveLoading(false, saveOriginal)
+      saveBtn.disabled = true
+      showPublishPanel()
+	    } catch (_) {
+	      setSaveLoading(false, saveOriginal)
+	      Swal.fire({ icon: "error", title: "Error", text: "Save failed" })
+	    } finally {
+	      isSaving = false
+	    }
+	  }
+
+  const handlePublish = async (event) => {
+    event.preventDefault()
+    if (isPublishing || !savedSnapshotId) return
+    isPublishing = true
+    setPublishLoading(true, `<i class="fa-solid fa-circle-notch fa-spin"></i> Publishing...`)
+    try {
+      const published = await publishSnapshot(savedSnapshotId)
+      if (published && published.publish && published.publish.ok) {
+        const publishUrl = published && published.publish && published.publish.url ? String(published.publish.url) : ""
+        showPublishedLink(publishUrl)
+        return
+      }
+      if (published && published.publish && published.publish.code === "not_linked") {
+        const suggestedConnectUrl = published.publish.connectUrl ? String(published.publish.connectUrl) : ""
+        const linked = await promptRegistryConnect(suggestedConnectUrl)
+        if (!linked) {
+          setPublishLoading(false, publishOriginal)
+          return
+        }
+        const retry = await publishSnapshot(savedSnapshotId)
+        if (retry && retry.publish && retry.publish.ok) {
+          footer.classList.add("hidden")
+          return
+        }
+        const retryMsg = retry && retry.publish && retry.publish.error ? retry.publish.error : "Publish failed"
+        Swal.fire({ icon: "error", title: "Error", text: retryMsg })
+        setPublishLoading(false, publishOriginal)
+        return
+      }
+      const msg = published && published.publish && published.publish.error ? published.publish.error : "Publish failed"
+      Swal.fire({ icon: "error", title: "Error", text: msg })
+      setPublishLoading(false, publishOriginal)
+    } catch (_) {
+      setPublishLoading(false, publishOriginal)
+      Swal.fire({ icon: "error", title: "Error", text: "Publish failed" })
+    } finally {
+      isPublishing = false
+    }
+  }
+
+  const handleLater = async (event) => {
+    event.preventDefault()
+    if (!savedSnapshotId) {
+      footer.classList.add("hidden")
+      return
+    }
+    setPublishLoading(true)
+    try {
+      const qs = new URLSearchParams()
+      qs.set("snapshotId", String(savedSnapshotId))
+      qs.set("decision", "later")
+      const res = await fetch(`/checkpoints/decision?${qs.toString()}`, {
+        method: "POST",
+        headers: { "Accept": "application/json" }
+      })
+      const payload = res.ok ? await res.json().catch(() => null) : null
+      if (!payload || !payload.ok) {
+        throw new Error("Failed to save decision")
+      }
+      footer.classList.add("hidden")
+    } catch (_) {
+      Swal.fire({ icon: "error", title: "Error", text: "Could not save decision" })
+      setPublishLoading(false, publishOriginal)
+    }
+  }
+
+  saveBtn.addEventListener("click", handleSave)
+  if (registryBetaEnabled && publishBtn) publishBtn.addEventListener("click", handlePublish)
+  if (registryBetaEnabled && laterBtn) laterBtn.addEventListener("click", handleLater)
+})
+</script>
 </body>
 </html>