pinokiod 3.107.0 → 3.109.0

package/server/views/app.ejs

@@ -1378,6 +1378,15 @@ body.dark #fs-status {
   z-index: 20;
 }
 
+.fs-status-dropdown.git-fork .fs-dropdown-menu,
+.fs-status-dropdown.git-publish .fs-dropdown-menu {
+  left: auto;
+  right: 0;
+  width: min(420px, calc(100vw - 24px));
+  max-width: min(420px, calc(100vw - 24px));
+  white-space: normal;
+}
+
 body.dark .fs-dropdown-menu {
   background: rgba(30, 41, 59, 0.96);
   border: 1px solid rgba(148, 163, 184, 0.35);
@@ -1938,6 +1947,40 @@ body.dark {
   background: #2d6ae0 !important;
 }
 
+.pinokio-github-login-modal.swal2-popup {
+  max-width: 420px !important;
+  width: calc(100vw - 48px) !important;
+}
+.pinokio-github-login {
+  padding: 36px 40px 32px 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 14px;
+}
+.pinokio-github-login__icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  background: var(--pinokio-modal-icon-bg);
+  color: var(--pinokio-modal-icon-color);
+  font-size: 28px;
+}
+.pinokio-github-login__title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--pinokio-modal-text);
+}
+.pinokio-github-login__body {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--pinokio-modal-subtitle-color);
+  max-width: 280px;
+}
+
 .pinokio-modern-modal.swal2-popup {
   background: var(--pinokio-modal-bg) !important;
   color: var(--pinokio-modal-text) !important;
@@ -2114,6 +2157,157 @@ body.dark {
   background: rgba(127, 91, 243, 1) !important;
 }
 
+.pinokio-modal-body--fork {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0;
+}
+
+.pinokio-fork-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.pinokio-fork-help {
+  margin: 0;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.pinokio-fork-item {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: rgba(15, 18, 24, 0.65);
+}
+
+.pinokio-fork-item[data-disabled='true'] {
+  opacity: 0.55;
+}
+
+.pinokio-fork-item-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.pinokio-fork-item-header label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.pinokio-fork-item-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.pinokio-fork-item-url {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.65);
+  word-break: break-word;
+}
+
+.pinokio-fork-item-url.empty {
+  font-style: italic;
+}
+
+.pinokio-fork-name-input {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.pinokio-fork-name-input label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.pinokio-modal-input.pinokio-modal-input--error {
+  border-color: #ff6b6b;
+  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.25);
+}
+
+.pinokio-fork-checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.85rem;
+}
+
+.pinokio-fork-checkbox-row label {
+  cursor: pointer;
+}
+
+.pinokio-fork-org-input {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.pinokio-fork-org-input.hidden {
+  display: none !important;
+}
+
+.pinokio-fork-org-input label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.pinokio-fork-org-hint {
+  margin: 0;
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.pinokio-fork-dropdown-item,
+.pinokio-publish-dropdown-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  text-align: left;
+}
+
+.pinokio-fork-dropdown-title,
+.pinokio-publish-dropdown-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.pinokio-fork-dropdown-remote,
+.pinokio-publish-dropdown-remote {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  word-break: break-word;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.pinokio-fork-dropdown-remote.empty,
+.pinokio-publish-dropdown-remote.empty {
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.fs-dropdown-item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .pinokio-git-history-list {
   display: flex;
   flex-direction: column;
@@ -2526,13 +2720,16 @@ body.dark {
     font-size: 1rem;
   }
   */
-  #fs-push-btn {
+  #fs-push-btn,
+  #fs-fork-btn {
     min-width: 0;
   }
-  #fs-push-btn .fs-status-label {
+  #fs-push-btn .fs-status-label,
+  #fs-fork-btn .fs-status-label {
     font-size: 0;
   }
-  #fs-push-btn .fs-status-label i {
+  #fs-push-btn .fs-status-label i,
+  #fs-fork-btn .fs-status-label i {
     font-size: 1rem;
   }
   #fs-status .fs-status-btn .disk-usage,
@@ -2679,7 +2876,7 @@ body.dark {
   <% } %>
   <div class='container'>
     <% if (type === "browse") { %>
-      <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%>">
+      <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%>">
         <a target="<%=src%>" href="<%=src%>" class='fs-status-btn frame-link' data-index="0" data-mode="refresh" data-type="n">
           <span class='fs-status-label'>
             <i class="fa-regular fa-folder-open"></i>
@@ -2733,12 +2930,24 @@ body.dark {
           </button>
           <div class='fs-dropdown-menu submenu hidden' id='fs-changes-menu'></div>
         </div>
-        <button id='fs-push-btn' class='fs-status-btn'>
-          <span class='fs-status-label'>
-            <i class="fa-brands fa-github"></i>
-            <span class='fs-status-title'>Publish</span>
-          </span>
-        </button>
+        <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>
     <% } %>
     <main class='browserview'>
@@ -2772,17 +2981,20 @@ body.dark {
   let ignorePersistedSelection = pluginLaunchActive
   let lastForegroundSignature = null
   const iframe_onerror = (iframe) => {
+    if (iframe && iframe.dataset && iframe.dataset.forceVisible === 'true') {
+      return
+    }
     let originalSrc = iframe.src
     iframe.onload = function() {
       try {
         // Try to access the iframe's document
+        const iframeDoc = iframe.contentDocument || (iframe.contentWindow ? iframe.contentWindow.document : null)
         const currentSrc = iframe.src
         // Check if it's a chrome error page or empty
         if (currentSrc !== originalSrc && 
             (currentSrc.includes('chrome-error://') || 
             currentSrc === 'about:blank' || 
             currentSrc.includes('data:'))) {
-          iframeDoc.classList.add("hidden")
           Swal.fire({
             html: `<i class="fa-solid fa-circle-notch fa-spin"></i> Loading...`,
             customClass: {
@@ -2798,22 +3010,9 @@ body.dark {
           }, 3000)
         }
       } catch (e) {
-        iframe.classList.add("hidden")
         // Cross-origin restriction - assume it loaded successfully
         // if no error was thrown during the initial load
-        Swal.fire({
-          html: `<i class="fa-solid fa-circle-notch fa-spin"></i> Loading...`,
-          customClass: {
-            container: "loader-container",
-            popup: "loader-popup",
-            htmlContainer: "loader-dialog",
-            footer: "hidden",
-            actions: "hidden"
-          }
-        });
-        setTimeout(() => {
-          location.href = location.href 
-        }, 3000);
+        console.warn('Iframe load warning', e)
       }
     }
   }
@@ -2821,7 +3020,7 @@ body.dark {
     document.querySelectorAll(".menu-container .selected").forEach((el) => {
       el.classList.remove("selected")
     })
-    document.querySelectorAll("iframe").forEach((el) => {
+    document.querySelectorAll("main.browserview iframe").forEach((el) => {
       el.classList.add("hidden")
     })
     let frame = document.createElement("iframe")
@@ -3995,6 +4194,13 @@ body.dark {
       })(),
       target: node.getAttribute('target') || null,
       dataIndex: node.getAttribute('data-index') || null,
+      pagePath: (() => {
+        try {
+          return window.location?.pathname || null
+        } catch (_) {
+          return null
+        }
+      })()
     }
     try {
       const key = selectionStorageKey()
@@ -4008,24 +4214,41 @@ body.dark {
       })
     } catch (_) {}
   }
-  const restorePersistedFrameLink = () => {
+  const restorePersistedFrameLink = (providedPayload = null) => {
     const storage = getWindowStorage()
-    if (!storage) {
-      return null
-    }
     const key = selectionStorageKey()
-    if (!key) {
-      return null
+    const currentPath = (() => {
+      try {
+        return window.location?.pathname || ""
+      } catch (_) {
+        return ""
+      }
+    })()
+    let payload = providedPayload
+    if (!payload) {
+      if (!storage || !key) {
+        return null
+      }
+      const raw = storage.getItem(key)
+      if (!raw) {
+        return null
+      }
+      try {
+        payload = JSON.parse(raw)
+      } catch (_) {
+        payload = { selector: raw }
+      }
     }
-    const raw = storage.getItem(key)
-    if (!raw) {
+    if (!payload) {
       return null
     }
-    let payload
-    try {
-      payload = JSON.parse(raw)
-    } catch (_) {
-      payload = { selector: raw }
+    if (typeof payload === 'object' && payload !== null && typeof payload.pagePath === 'string') {
+      if (currentPath && payload.pagePath !== currentPath) {
+        return null
+      }
+    }
+    if (typeof payload === 'string') {
+      payload = { selector: payload }
     }
     const trySelector = (selector) => {
       if (!selector || typeof selector !== 'string') {
@@ -4588,7 +4811,7 @@ body.dark {
     if (!sourceWindow) {
       return null
     }
-    const frames = Array.from(document.querySelectorAll("iframe"))
+    const frames = Array.from(document.querySelectorAll("main.browserview iframe"))
     for (const frame of frames) {
       if (frame.contentWindow === sourceWindow) {
         return frame.name || null
@@ -4684,14 +4907,48 @@ body.dark {
   const renderSelection = async ({ event: eventParam = null, target: explicitTarget = null, force = false } = {}) => {
     const storage = getWindowStorage()
     const selectionKey = selectionStorageKey()
-    const originalHasPersistedSelection = Boolean(selectionKey && storage && storage.getItem(selectionKey))
+    const currentPath = (() => {
+      try {
+        return window.location?.pathname || ""
+      } catch (_) {
+        return ""
+      }
+    })()
     let persistedSelectionRaw = selectionKey && storage ? storage.getItem(selectionKey) : null
+    const devRouteActive = /\/dev(?:$|\/)/.test(currentPath || "")
+    let persistedSelectionPayload = null
+    if (persistedSelectionRaw) {
+      try {
+        const parsed = JSON.parse(persistedSelectionRaw)
+        if (parsed && typeof parsed === "object") {
+          if (typeof parsed.pagePath === "string") {
+            if (!currentPath || parsed.pagePath === currentPath) {
+              persistedSelectionPayload = parsed
+            }
+          } else if (!devRouteActive) {
+            persistedSelectionPayload = parsed
+          }
+        }
+      } catch (_) {
+        if (!devRouteActive) {
+          persistedSelectionPayload = { selector: persistedSelectionRaw }
+        }
+      }
+    }
+    if (!persistedSelectionPayload) {
+      persistedSelectionRaw = null
+    }
+    const originalHasPersistedSelection = Boolean(persistedSelectionPayload)
     const skipPersistedSelection = ignorePersistedSelection
     let hasPersistedSelection = skipPersistedSelection ? false : originalHasPersistedSelection
     if (skipPersistedSelection) {
       persistedSelectionRaw = null
+      persistedSelectionPayload = null
     }
 
+    const triggeredByUser = Boolean(eventParam || explicitTarget)
+    let resolvedByGlobalSelector = false
+
     let target = explicitTarget
     let preselected = null
 
@@ -4704,22 +4961,22 @@ body.dark {
       if (candidate) {
         target = candidate
         global_selector = null
+        resolvedByGlobalSelector = true
       } else {
         scheduleSelectionRetry()
         return
       }
     }
 
+    console.log({ target, skipPersistedSelection })
     if (!target && !skipPersistedSelection) {
       preselected = document.querySelector('#devtab.frame-link.selected') || document.querySelector('.frame-link.selected')
-      if (preselected) {
-        target = preselected
-      }
+      console.log({ preselected })
     }
 
-    if (!target && persistedSelectionRaw) {
-      target = restorePersistedFrameLink()
-      if (!target && persistedSelectionRaw) {
+    if (!target && persistedSelectionPayload) {
+      target = restorePersistedFrameLink(persistedSelectionPayload)
+      if (!target && originalHasPersistedSelection) {
         scheduleSelectionRetry()
         return
       }
@@ -4733,11 +4990,18 @@ body.dark {
       }
     }
 
-    if (!target && skipPersistedSelection) {
+    const devTab = document.querySelector('#devtab.frame-link')
+    if (!triggeredByUser && !resolvedByGlobalSelector && !target && devRouteActive && devTab) {
+      target = devTab
+    } else if (!target && preselected) {
+      target = preselected
+    }
+
+    if (!target) {
       const defaultSelection = document.querySelector("[data-default]")
       if (defaultSelection) {
         target = defaultSelection
-      } else {
+      } else if (skipPersistedSelection) {
         scheduleSelectionRetry()
         return
       }
@@ -4774,6 +5038,12 @@ body.dark {
       }
     <% } %>
 
+    if (!target && preselected) {
+      target = preselected
+    }
+
+    console.log({ targetAfter: target })
+
     if (!target) {
       target = document.querySelector(".frame-link")
     }
@@ -4829,7 +5099,7 @@ body.dark {
     <% } %>
 
     // hide all frames
-    document.querySelectorAll("iframe").forEach((el) => {
+    document.querySelectorAll("main.browserview iframe").forEach((el) => {
       el.classList.add("hidden")
     })
 
@@ -5074,7 +5344,7 @@ body.dark {
     item.href = url
     item.setAttribute("data-index", index)
     item.className = "btn header-item frame-link"
-    item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
+    item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-circle-stop"></i></button></div>`
 
     document.querySelector(".temp-menu").appendChild(item)
 
@@ -5755,7 +6025,7 @@ body.dark {
   })
   setupTabLinkHover()
   document.addEventListener("click", (event) => {
-    if (event.target.closest("#fs-status .fs-dropdown-menu")) {
+    if (event.target.closest("#fs-status .fs-dropdown-menu") || event.target.closest("#fs-status .fs-status-btn")) {
       return
     }
     closeStatusDropdowns()
@@ -5975,9 +6245,9 @@ body.dark {
             } else {
               global_selector = null
             }
-            const frameExists = Array.from(document.querySelectorAll("iframe")).some((frame) => {
-              return frame.name === rawName
-            })
+          const frameExists = Array.from(document.querySelectorAll("main.browserview iframe")).some((frame) => {
+            return frame.name === rawName
+          })
             if (!frameExists) {
               create_iframe(rawName, event.data.launch.href)
             }
@@ -6082,6 +6352,13 @@ body.dark {
     const changesMenu = document.getElementById('fs-changes-menu')
     const changesBtn = document.getElementById('fs-changes-btn')
     const badgeElement = changesBtn ? changesBtn.querySelector('.badge') : null
+    const forkBtn = document.getElementById('fs-fork-btn')
+    const forkDropdownContainer = document.querySelector('#fs-status .git-fork')
+    const forkMenu = document.getElementById('fs-fork-menu')
+    const pushBtn = document.getElementById('fs-push-btn')
+    const publishMenu = document.getElementById('fs-push-menu')
+
+    let latestGitIntegration = null
 
     const readDataAttr = (node, attr) => {
       if (!node) {
@@ -6097,6 +6374,9 @@ body.dark {
     const statusUri = readDataAttr(fsStatusEl, 'data-status-uri')
     const monitorUri = readDataAttr(fsStatusEl, 'data-uri')
     const workspaceName = readDataAttr(fsStatusEl, 'data-workspace')
+    const historyUri = readDataAttr(fsStatusEl, 'data-history-uri')
+    const defaultPushUri = readDataAttr(fsStatusEl, 'data-push-uri')
+    const defaultForkUri = readDataAttr(fsStatusEl, 'data-fork-uri')
 
     const encodeRepoPath = (value) => {
       if (typeof value !== 'string' || value.length === 0) {
@@ -6105,42 +6385,369 @@ body.dark {
       return value.split('/').map(encodeURIComponent).join('/')
     }
 
-    const updateCombinedBadge = (total) => {
-      if (!badgeElement) {
-        return
+    function escapeHtml(value) {
+      if (value === null || value === undefined) {
+        return ''
       }
-      badgeElement.textContent = total > 0 ? String(total) : ''
+      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 updateChangesButtonState = (hasRepos) => {
-      if (!changesBtn) {
-        return
+    function getRepoListSnapshot() {
+      if (Array.isArray(lastRepoList) && lastRepoList.length > 0) {
+        return lastRepoList.slice()
       }
-      if (hasRepos) {
-        changesBtn.disabled = false
-        changesBtn.classList.remove('fs-status-btn--disabled')
+      return Array.from(repoStatusCache.values())
+    }
+
+    function parseRemoteSlug(remoteUrl) {
+      if (!remoteUrl || typeof remoteUrl !== 'string') {
+        return { owner: null, name: null, full: null }
+      }
+      const trimmed = remoteUrl.trim()
+      if (!trimmed) {
+        return { owner: null, name: null, full: null }
+      }
+      const withoutGit = trimmed.replace(/\.git$/i, '')
+
+      const parsePathSegments = (pathValue) => {
+        if (!pathValue) {
+          return []
+        }
+        const cleaned = pathValue.replace(/^\/+/, '')
+        return cleaned.split('/').filter(Boolean)
+      }
+
+      let pathSegment = ''
+      if (withoutGit.startsWith('git@')) {
+        const colonSplit = withoutGit.split(':')
+        pathSegment = colonSplit.length > 1 ? colonSplit.slice(1).join(':') : ''
       } else {
-        changesBtn.disabled = true
-        changesBtn.classList.add('fs-status-btn--disabled')
+        try {
+          const prefixed = withoutGit.includes('://') ? withoutGit : `https://${withoutGit}`
+          const url = new URL(prefixed)
+          pathSegment = url.pathname
+        } catch (error) {
+          pathSegment = withoutGit
+        }
+      }
+
+      const segments = parsePathSegments(pathSegment)
+      if (segments.length >= 2) {
+        const owner = segments[segments.length - 2]
+        const name = segments[segments.length - 1]
+        return { owner, name, full: `${owner}/${name}` }
+      }
+
+      if (segments.length === 1) {
+        const name = segments[0]
+        return { owner: null, name, full: name }
       }
+
+      return { owner: null, name: null, full: null }
     }
 
-    const setChangesMenuMessage = (message) => {
-      if (!changesMenu) {
-        return
+    function deriveForkDefaultName(repo) {
+      if (!repo) {
+        return workspaceName || 'fork'
       }
-      const messageEl = document.createElement('div')
-      messageEl.className = 'fs-dropdown-empty'
-      messageEl.textContent = message
-      changesMenu.innerHTML = ''
-      changesMenu.append(messageEl)
+      const remoteSlug = parseRemoteSlug(repo.url || '')
+      if (remoteSlug && remoteSlug.name) {
+        return remoteSlug.name
+      }
+      if (typeof repo.name === 'string' && repo.name.length > 0) {
+        const segments = repo.name.split('/').filter(Boolean)
+        if (segments.length > 0) {
+          return segments[segments.length - 1]
+        }
+      }
+      if (typeof repo.repoParam === 'string' && repo.repoParam.length > 0) {
+        const repoSegments = repo.repoParam.split('/').filter(Boolean)
+        if (repoSegments.length > 0) {
+          return repoSegments[repoSegments.length - 1]
+        }
+      }
+      return workspaceName || 'fork'
     }
 
-    const attachRepoDropdownHandlers = () => {
-      if (!changesMenu) {
+    function hasRemoteConfigured(repo) {
+      return Boolean(repo && typeof repo.url === 'string' && repo.url.trim().length > 0)
+    }
+
+    function resolveForkUri(repo) {
+      if (repo && typeof repo.git_fork_url === 'string' && repo.git_fork_url.length > 0) {
+        return repo.git_fork_url
+      }
+      return defaultForkUri || null
+    }
+
+    function resolvePushUri(repo) {
+      if (repo && typeof repo.git_push_url === 'string' && repo.git_push_url.length > 0) {
+        return repo.git_push_url
+      }
+      return defaultPushUri || null
+    }
+
+    function updateForkButton() {
+      if (!forkBtn) {
         return
       }
-      const items = changesMenu.querySelectorAll('.git-changes-item')
+      const labelEl = forkBtn.querySelector('.fs-status-title')
+      const repos = getRepoListSnapshot()
+      const forkTargets = Array.isArray(repos)
+        ? repos.filter((repo) => hasRemoteConfigured(repo) && resolveForkUri(repo))
+        : []
+
+      const detachHandlers = () => {
+        forkBtn.removeEventListener('click', handlePushLogin)
+        forkBtn.removeEventListener('click', requireGitLogin)
+      }
+
+      const enableDropdown = () => {
+        forkBtn.classList.add('revealer')
+        forkBtn.setAttribute('data-group', '#fs-fork-menu')
+      }
+
+      const disableDropdown = () => {
+        forkBtn.classList.remove('revealer')
+        forkBtn.removeAttribute('data-group')
+        const forkMenuEl = document.querySelector('#fs-fork-menu')
+        if (forkMenuEl && !forkMenuEl.classList.contains('hidden')) {
+          forkMenuEl.classList.add('hidden')
+        }
+        setDropdownState(forkBtn, false)
+      }
+
+      detachHandlers()
+
+      const isConnected = Boolean(latestGitIntegration && latestGitIntegration.connected)
+
+      renderForkDropdown(repos, {
+        emptyMessage: isConnected
+          ? 'No remotes available to fork'
+          : 'Connect GitHub to enable forking',
+      })
+
+      if (!isConnected) {
+        disableDropdown()
+        if (labelEl) {
+          labelEl.textContent = 'Fork'
+        }
+        forkBtn.disabled = false
+        forkBtn.classList.remove('fs-status-btn--disabled')
+        forkBtn.setAttribute('title', 'Log in to GitHub to fork this workspace')
+        forkBtn.addEventListener('click', requireGitLogin)
+        return
+      }
+
+      if (labelEl) {
+        labelEl.textContent = 'Fork'
+      }
+
+      forkBtn.disabled = false
+      forkBtn.classList.remove('fs-status-btn--disabled')
+      enableDropdown()
+
+      if (!Array.isArray(repos) || repos.length === 0) {
+        forkBtn.setAttribute('title', 'No Git repositories detected')
+        return
+      }
+
+      if (forkTargets.length === 0) {
+        forkBtn.setAttribute('title', 'No remotes available to fork')
+        return
+      }
+
+      forkBtn.removeAttribute('title')
+    }
+
+    const updateCombinedBadge = (total) => {
+      if (!badgeElement) {
+        return
+      }
+      badgeElement.textContent = total > 0 ? String(total) : ''
+    }
+
+    const updateChangesButtonState = (hasRepos) => {
+      if (!changesBtn) {
+        return
+      }
+      if (hasRepos) {
+        changesBtn.disabled = false
+        changesBtn.classList.remove('fs-status-btn--disabled')
+      } else {
+        changesBtn.disabled = true
+        changesBtn.classList.add('fs-status-btn--disabled')
+      }
+    }
+
+    const setChangesMenuMessage = (message) => {
+      if (!changesMenu) {
+        return
+      }
+      const messageEl = document.createElement('div')
+      messageEl.className = 'fs-dropdown-empty'
+      messageEl.textContent = message
+      changesMenu.innerHTML = ''
+      changesMenu.append(messageEl)
+    }
+
+    const setForkMenuMessage = (message) => {
+      if (!forkMenu) {
+        return
+      }
+      const messageEl = document.createElement('div')
+      messageEl.className = 'fs-dropdown-empty'
+      messageEl.textContent = message
+      forkMenu.innerHTML = ''
+      forkMenu.append(messageEl)
+    }
+
+    const setPublishMenuMessage = (message) => {
+      if (!publishMenu) {
+        return
+      }
+      const messageEl = document.createElement('div')
+      messageEl.className = 'fs-dropdown-empty'
+      messageEl.textContent = message
+      publishMenu.innerHTML = ''
+      publishMenu.append(messageEl)
+    }
+
+    const renderForkDropdown = (repos, options = {}) => {
+      if (!forkMenu) {
+        return
+      }
+
+      const opts = typeof options === 'object' && options !== null ? options : {}
+      const list = Array.isArray(repos) ? repos : []
+
+      forkMenu.innerHTML = ''
+
+      if (list.length === 0) {
+        setForkMenuMessage(opts.emptyMessage || 'No repositories available')
+        return
+      }
+
+      const fragment = document.createDocumentFragment()
+
+      list.forEach((repo) => {
+        const key = repo && typeof repo.repoParam === 'string' ? repo.repoParam : ''
+        const name = repo && repo.name ? repo.name : (key || 'Repository')
+        const remoteUrl = repo && repo.url ? repo.url : ''
+        const forkUri = resolveForkUri(repo)
+        const hasRemote = hasRemoteConfigured(repo)
+
+        const item = document.createElement('button')
+        item.type = 'button'
+        item.className = 'fs-dropdown-item pinokio-fork-dropdown-item'
+        item.dataset.repo = key
+
+        const remoteClass = remoteUrl
+          ? 'pinokio-fork-dropdown-remote'
+          : 'pinokio-fork-dropdown-remote empty'
+        const remoteDisplay = remoteUrl ? escapeHtml(remoteUrl) : 'No remote detected'
+
+        item.innerHTML = `
+          <div class="pinokio-fork-dropdown-title">${escapeHtml(name)}</div>
+          <div class="${remoteClass}">${remoteDisplay}</div>
+        `
+
+        if (!hasRemote || !forkUri) {
+          item.disabled = true
+          item.classList.add('fs-dropdown-item--disabled')
+        } else {
+          item.addEventListener('click', (event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            closeStatusDropdowns()
+            showForkModalForRepo(key)
+          })
+        }
+
+        fragment.appendChild(item)
+      })
+
+      forkMenu.appendChild(fragment)
+    }
+
+    const renderPublishDropdown = (repos, options = {}) => {
+      if (!publishMenu) {
+        return
+      }
+
+      const opts = typeof options === 'object' && options !== null ? options : {}
+      const list = Array.isArray(repos) ? repos : []
+
+      publishMenu.innerHTML = ''
+
+      if (list.length === 0) {
+        setPublishMenuMessage(opts.emptyMessage || 'No repositories available')
+        return
+      }
+
+      const fragment = document.createDocumentFragment()
+
+      list.forEach((repo) => {
+        const key = repo && typeof repo.repoParam === 'string' ? repo.repoParam : ''
+        const name = repo && repo.name ? repo.name : (key || 'Repository')
+        const remoteUrl = repo && repo.url ? repo.url : ''
+        const pushUri = resolvePushUri(repo)
+        const hasRemote = hasRemoteConfigured(repo)
+
+        const item = document.createElement('button')
+        item.type = 'button'
+        item.className = 'fs-dropdown-item pinokio-publish-dropdown-item'
+        item.dataset.repo = key
+        item.dataset.name = name
+
+        const remoteClass = remoteUrl
+          ? 'pinokio-publish-dropdown-remote'
+          : 'pinokio-publish-dropdown-remote empty'
+        const remoteDisplay = remoteUrl ? escapeHtml(remoteUrl) : 'No remote detected'
+
+        item.innerHTML = `
+          <div class="pinokio-publish-dropdown-title">${escapeHtml(name)}</div>
+          <div class="${remoteClass}">${remoteDisplay}</div>
+        `
+
+        if (!hasRemote || !pushUri) {
+          item.disabled = true
+          item.classList.add('fs-dropdown-item--disabled')
+        } else {
+          item.addEventListener('click', (event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            closeStatusDropdowns()
+            showPublishModal({ repoParam: key, repoName: name })
+          })
+        }
+
+        fragment.appendChild(item)
+      })
+
+      publishMenu.appendChild(fragment)
+    }
+
+    const attachRepoDropdownHandlers = () => {
+      if (!changesMenu) {
+        return
+      }
+      const items = changesMenu.querySelectorAll('.git-changes-item')
       items.forEach((item) => {
         item.addEventListener('click', async (event) => {
           event.preventDefault()
@@ -6233,6 +6840,8 @@ body.dark {
           changes: Array.isArray(data.changes) ? data.changes : [],
           git_commit_url: data.git_commit_url || null,
           git_history_url: workspaceName ? `/info/git/HEAD/${encodeRepoPath(workspaceName)}` : readDataAttr(fsStatusEl, 'data-history-uri'),
+          git_fork_url: defaultForkUri,
+          git_push_url: defaultPushUri,
           url: null,
         }
 
@@ -6246,12 +6855,14 @@ body.dark {
         renderChangesDropdown(lastRepoList)
         updateCombinedBadge(fallbackRepo.changeCount)
         updatePublishButton()
+        updateForkButton()
         return true
       } catch (error) {
         console.error('check_git fallback error:', error)
         setChangesMenuMessage('Unable to load repositories')
         updateCombinedBadge(0)
         updateChangesButtonState(false)
+        updateForkButton()
         return false
       }
     }
@@ -6316,6 +6927,7 @@ body.dark {
               : sortedRepos.reduce((sum, repo) => sum + (repo.changeCount || 0), 0)
             updateCombinedBadge(total)
             updateChangesButtonState(true)
+            updateForkButton()
           }
 
           updatePublishButton()
@@ -6526,6 +7138,12 @@ body.dark {
           updatedRepo.git_commit_url = freshData.git_commit_url || null
           updatedRepo.name = updatedRepo.name || repoDisplayName || repoParam
           updatedRepo.git_history_url = updatedRepo.git_history_url || (repoData && repoData.git_history_url) || (repoParam ? `/info/git/HEAD/${encodeRepoPath(repoParam)}` : null)
+          if (!updatedRepo.git_fork_url) {
+            updatedRepo.git_fork_url = repoData && repoData.git_fork_url ? repoData.git_fork_url : resolveForkUri(updatedRepo)
+          }
+          if (!updatedRepo.git_push_url) {
+            updatedRepo.git_push_url = repoData && repoData.git_push_url ? repoData.git_push_url : resolvePushUri(updatedRepo)
+          }
           repoStatusCache.set(repoParam, updatedRepo)
           repoData = updatedRepo
           const listEntry = lastRepoList.find((entry) => entry.repoParam === repoParam)
@@ -6536,6 +7154,12 @@ body.dark {
             if (updatedRepo.git_history_url) {
               listEntry.git_history_url = updatedRepo.git_history_url
             }
+            if (!listEntry.git_fork_url && updatedRepo.git_fork_url) {
+              listEntry.git_fork_url = updatedRepo.git_fork_url
+            }
+            if (!listEntry.git_push_url && updatedRepo.git_push_url) {
+              listEntry.git_push_url = updatedRepo.git_push_url
+            }
           }
           const total = Array.from(repoStatusCache.values()).reduce((sum, repo) => sum + (repo.changeCount || 0), 0)
           updateCombinedBadge(total)
@@ -7030,6 +7654,12 @@ body.dark {
             closeBtn.addEventListener('click', () => Swal.close())
           }
 
+          if (iframe) {
+            iframe.dataset.forceVisible = 'true'
+            iframe.classList.remove('hidden')
+            iframe.removeAttribute('hidden')
+          }
+
           disconnectHandler = (event) => {
             if (!iframe || event.source !== iframe.contentWindow) return
             if (!event.data || event.data.type !== 'pinokio:socket-closed') return
@@ -7055,16 +7685,62 @@ body.dark {
       }
     }
 
-    const showPublishModal = () => {
-      const pushUri = document.querySelector('#fs-status').getAttribute('data-push-uri')
+    const showPublishModal = (target) => {
+      let repoParam = null
+      let repoLabel = null
+
+      if (typeof target === 'string') {
+        repoParam = target
+      } else if (target && typeof target === 'object') {
+        if (typeof target.repoParam === 'string') {
+          repoParam = target.repoParam
+        }
+        if (typeof target.repoName === 'string' && target.repoName.trim().length > 0) {
+          repoLabel = target.repoName.trim()
+        }
+      }
+
+      if (!repoParam) {
+        repoParam = activeRepoKey || null
+      }
+
+      let repoData = null
+      if (repoParam) {
+        repoData = repoStatusCache.get(repoParam) || null
+        if (!repoData && lastRepoList.length > 0) {
+          const fallbackMatch = lastRepoList.find((repo) => repo.repoParam === repoParam)
+          if (fallbackMatch) {
+            repoData = fallbackMatch
+          }
+        }
+      }
+
+      if (!repoLabel && repoData && typeof repoData.name === 'string') {
+        repoLabel = repoData.name
+      }
+      if (!repoLabel && repoParam) {
+        repoLabel = repoParam
+      }
+      if (!repoLabel) {
+        repoLabel = workspaceName || 'Repository'
+      }
+
+      const pushUri = resolvePushUri(repoData)
       if (!pushUri) {
         Swal.fire({
           title: 'Error',
-          text: 'Publish URL not available.',
+          text: 'Publish URL not available for this repository.',
           icon: 'error'
         })
         return
       }
+
+      const remoteDisplay = repoData && repoData.url ? escapeHtml(repoData.url) : null
+      const subtitle = `${escapeHtml(repoLabel)} — review your latest changes before publishing.`
+      const remoteHtml = remoteDisplay ? `<div class="pinokio-fork-item-url">${remoteDisplay}</div>` : ''
+      const timestampedUri = pushUri.includes('?')
+        ? `${pushUri}&ts=${Date.now()}`
+        : `${pushUri}?ts=${Date.now()}`
       
       const modalHtml = `
         <div class="pinokio-modal-surface">
@@ -7072,11 +7748,12 @@ body.dark {
             <div class="pinokio-modal-icon"><i class="fa-brands fa-github"></i></div>
             <div class="pinokio-modal-heading">
               <div class="pinokio-modal-title">Publish to GitHub</div>
-              <div class="pinokio-modal-subtitle">Review your latest changes and push them to your remote repository.</div>
+              <div class="pinokio-modal-subtitle">${subtitle}</div>
+              ${remoteHtml}
             </div>
           </div>
           <div class="pinokio-modal-body pinokio-modal-body--iframe">
-            <iframe src="${pushUri}"></iframe>
+            <iframe src="${timestampedUri}"></iframe>
           </div>
           <div class="pinokio-modal-footer pinokio-modal-footer--publish" data-publish-footer>
             <button type="button" class="pinokio-publish-close-btn" data-publish-close>Close</button>
@@ -7329,65 +8006,424 @@ body.dark {
         focusConfirm: false
       })
     }
+
+    async function showForkModalForRepo(repoParam) {
+      const key = typeof repoParam === 'string' && repoParam.length > 0 ? repoParam : (activeRepoKey || null)
+      if (!key) {
+        Swal.fire({
+          title: 'No repository selected',
+          text: 'Select a repository to fork from the dropdown.',
+          icon: 'info'
+        })
+        return
+      }
+
+      let repo = repoStatusCache.get(key)
+      if (!repo) {
+        await check_git()
+        repo = repoStatusCache.get(key)
+      }
+
+      if (!repo) {
+        Swal.fire({
+          title: 'Repository unavailable',
+          text: 'The selected repository could not be found. Refresh Git status and try again.',
+          icon: 'error'
+        })
+        return
+      }
+
+      if (!hasRemoteConfigured(repo)) {
+        Swal.fire({
+          title: 'Remote required',
+          text: 'This repository does not have a remote configured, so it cannot be forked.',
+          icon: 'info'
+        })
+        return
+      }
+
+      const forkUri = resolveForkUri(repo)
+      if (!forkUri) {
+        Swal.fire({
+          title: 'Fork script unavailable',
+          text: 'Unable to locate the fork script for this repository.',
+          icon: 'error'
+        })
+        return
+      }
+
+      const defaultName = deriveForkDefaultName(repo)
+      const remoteDisplay = repo.url ? escapeHtml(repo.url) : 'No remote detected'
+      const remoteClass = repo.url ? 'pinokio-fork-item-url' : 'pinokio-fork-item-url empty'
+      const nameInputId = 'pinokio-fork-name-input'
+      const orgToggleId = 'pinokio-fork-org-toggle'
+      const orgInputId = 'pinokio-fork-org-input'
+
+      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">Fork repository</div>
+              <div class="pinokio-modal-subtitle">${escapeHtml(repo.name || key)}</div>
+            </div>
+          </div>
+            <div class="pinokio-modal-body">
+              <div class="pinokio-fork-modal">
+                <div class="pinokio-fork-item" data-disabled="false">
+                  <div class="pinokio-fork-item-url ${remoteClass}">${remoteDisplay}</div>
+                  <div class="pinokio-fork-name-input">
+                  <label for="${nameInputId}">Fork name</label>
+                  <input id="${nameInputId}" class="pinokio-modal-input" value="${escapeHtml(defaultName || '')}">
+                </div>
+                <div class="pinokio-fork-checkbox-row">
+                  <input type="checkbox" id="${orgToggleId}" data-fork-org-toggle>
+                  <label for="${orgToggleId}">Fork into organization</label>
+                </div>
+                <div class="pinokio-fork-org-input hidden" data-fork-org-section>
+                  <label for="${orgInputId}">Organization</label>
+                  <input id="${orgInputId}" class="pinokio-modal-input" placeholder="my-org">
+                  <p class="pinokio-fork-org-hint">Provide an organization where you have permission to create repositories.</p>
+                </div>
+              </div>
+            </div>
+          </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: true,
+        showCancelButton: true,
+        showConfirmButton: true,
+        confirmButtonText: 'Fork on GitHub',
+        cancelButtonText: 'Cancel',
+        focusConfirm: false,
+        didOpen: (popup) => {
+          const input = popup.querySelector(`#${nameInputId}`)
+          if (input) {
+            input.addEventListener('input', () => {
+              input.classList.remove('pinokio-modal-input--error')
+            })
+            input.focus()
+            input.select()
+          }
+          const orgToggle = popup.querySelector('#' + orgToggleId)
+          const orgSection = popup.querySelector('[data-fork-org-section]')
+          const orgInput = popup.querySelector('#' + orgInputId)
+          const syncOrgSection = () => {
+            if (!orgSection) {
+              return
+            }
+            if (orgToggle && orgToggle.checked) {
+              orgSection.classList.remove('hidden')
+              if (orgInput) {
+                requestAnimationFrame(() => orgInput.focus())
+              }
+            } else {
+              orgSection.classList.add('hidden')
+              if (orgInput) {
+                orgInput.classList.remove('pinokio-modal-input--error')
+              }
+            }
+          }
+          if (orgToggle) {
+            orgToggle.addEventListener('change', syncOrgSection)
+            syncOrgSection()
+          }
+          if (orgInput) {
+            orgInput.addEventListener('input', () => {
+              orgInput.classList.remove('pinokio-modal-input--error')
+            })
+          }
+        },
+        preConfirm: () => {
+          const input = document.getElementById(nameInputId)
+          const forkName = input ? input.value.trim() : ''
+          if (!forkName) {
+            if (input) {
+              input.classList.add('pinokio-modal-input--error')
+              setTimeout(() => input.focus(), 0)
+            }
+            Swal.showValidationMessage('Enter a repository name for the fork')
+            return false
+          }
+          const orgToggle = document.getElementById(orgToggleId)
+          const orgInput = document.getElementById(orgInputId)
+          let orgValue = null
+          if (orgToggle && orgToggle.checked) {
+            orgValue = orgInput ? orgInput.value.trim() : ''
+            if (!orgValue) {
+              if (orgInput) {
+                orgInput.classList.add('pinokio-modal-input--error')
+                setTimeout(() => orgInput.focus(), 0)
+              }
+              Swal.showValidationMessage('Enter the organization name or uncheck the option')
+              return false
+            }
+          }
+          return {
+            job: {
+              repoParam: key,
+              repoName: repo.name || key,
+              forkUri,
+              forkName,
+              remoteUrl: repo.url || '',
+              org: orgValue,
+            }
+          }
+        }
+      }).then((result) => {
+        if (result.isConfirmed && result.value && result.value.job) {
+          showForkShellModal(result.value.job)
+        }
+      })
+    }
+
+    function showForkShellModal(job) {
+      if (!job || !job.forkUri) {
+        return
+      }
+
+      const lifecycle = createPublishModalLifecycle()
+      const forkNameValue = typeof job.forkName === 'string' && job.forkName.trim().length > 0
+        ? job.forkName.trim()
+        : deriveForkDefaultName({ name: job.repoName, url: job.remoteUrl })
+      const queryParts = [`name=${encodeURIComponent(forkNameValue)}`]
+      if (job.org) {
+        queryParts.push(`org=${encodeURIComponent(job.org)}`)
+      }
+      queryParts.push(`ts=${Date.now()}`)
+      const separator = job.forkUri.includes('?') ? '&' : '?'
+      const finalUri = `${job.forkUri}${separator}${queryParts.join('&')}`
+
+      const remoteDisplay = job.remoteUrl ? escapeHtml(job.remoteUrl) : 'No remote detected'
+      const titleDisplay = job.repoName ? escapeHtml(job.repoName) : 'Repository'
+      const forkDisplay = escapeHtml(forkNameValue)
+      const subtitleParts = [titleDisplay, forkDisplay]
+      if (job.org) {
+        subtitleParts.push(`Org: ${escapeHtml(job.org)}`)
+      }
+      const subtitleHtml = subtitleParts.join(' · ')
+      Swal.fire({
+        html: `
+          <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">Fork on GitHub</div>
+                <div class="pinokio-modal-subtitle">${subtitleHtml}</div>
+                <div class="pinokio-fork-item-url">${remoteDisplay}</div>
+              </div>
+            </div>
+            <div class="pinokio-modal-body pinokio-modal-body--iframe">
+              <iframe src="${finalUri}"></iframe>
+            </div>
+            <div class="pinokio-modal-footer pinokio-modal-footer--publish" data-publish-footer>
+              <button type="button" class="pinokio-publish-close-btn" data-publish-close>Close</button>
+            </div>
+          </div>
+        `,
+        customClass: {
+          popup: 'pinokio-modern-modal',
+          htmlContainer: 'pinokio-modern-html',
+          closeButton: 'pinokio-modern-close'
+        },
+        backdrop: 'rgba(9,11,15,0.65)',
+        width: 'min(760px, 94vw)',
+        buttonsStyling: false,
+        showConfirmButton: false,
+        showCloseButton: true,
+        focusConfirm: false,
+        didOpen: lifecycle.didOpen,
+        willClose: lifecycle.willClose
+      }).then(() => {
+        setTimeout(() => {
+          updateForkButton()
+          check_git()
+        }, 250)
+      })
+    }
     
-    const handlePushLogin = () => {
+    function handlePushLogin() {
       window.location.href = '/github'
     }
+    const promptGitLogin = () => {
+      Swal.fire({
+        html: `
+          <div class="pinokio-github-login">
+            <div class="pinokio-github-login__icon"><i class="fa-brands fa-github"></i></div>
+            <div class="pinokio-github-login__title">Log in to GitHub</div>
+            <div class="pinokio-github-login__body">Connect your GitHub account to fork or publish this workspace.</div>
+          </div>
+        `,
+        showCancelButton: true,
+        confirmButtonText: 'Log in',
+        cancelButtonText: 'Not now',
+        reverseButtons: true,
+        showCloseButton: true,
+        focusConfirm: true,
+        customClass: {
+          popup: 'pinokio-modern-modal pinokio-github-login-modal',
+          htmlContainer: 'pinokio-modern-html',
+          confirmButton: 'pinokio-modern-confirm',
+          cancelButton: 'pinokio-modern-cancel',
+          closeButton: 'pinokio-modern-close'
+        }
+      }).then((result) => {
+        if (result.isConfirmed) {
+          handlePushLogin()
+        }
+      })
+    }
+    const requireGitLogin = (event) => {
+      if (event) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+      promptGitLogin()
+    }
 
     // Function to update publish/create button
     const updatePublishButton = async () => {
-      const historyUri = document.querySelector('#fs-status').getAttribute('data-history-uri')
-      const pushBtn = document.querySelector('#fs-push-btn')
-      
-      if (!historyUri || !pushBtn) return
+      if (!pushBtn) {
+        latestGitIntegration = null
+        updateForkButton()
+        return
+      }
+
+      const labelEl = pushBtn.querySelector('.fs-status-title')
+      const setLabel = (text) => {
+        if (labelEl) {
+          labelEl.textContent = text
+        }
+      }
+      const detachHandlers = () => {
+        pushBtn.removeEventListener('click', showPublishModal)
+        pushBtn.removeEventListener('click', showCreateModal)
+        pushBtn.removeEventListener('click', handlePushLogin)
+        pushBtn.removeEventListener('click', requireGitLogin)
+      }
+      const enableDropdown = () => {
+        pushBtn.classList.add('revealer')
+        pushBtn.setAttribute('data-group', '#fs-push-menu')
+      }
+      const disableDropdown = () => {
+        pushBtn.classList.remove('revealer')
+        pushBtn.removeAttribute('data-group')
+        const pushMenuEl = document.querySelector('#fs-push-menu')
+        if (pushMenuEl && !pushMenuEl.classList.contains('hidden')) {
+          pushMenuEl.classList.add('hidden')
+        }
+        setDropdownState(pushBtn, false)
+      }
+
+      const repos = getRepoListSnapshot()
+      const publishTargets = Array.isArray(repos)
+        ? repos.filter((repo) => hasRemoteConfigured(repo) && resolvePushUri(repo))
+        : []
+
+      detachHandlers()
+
+      const syncForkButton = () => {
+        updateForkButton()
+      }
+
+      if (!historyUri) {
+        setPublishMenuMessage('Git integration unavailable')
+        setLabel('Publish')
+        disableDropdown()
+        pushBtn.disabled = publishTargets.length === 0
+        if (pushBtn.disabled) {
+          pushBtn.classList.add('fs-status-btn--disabled')
+        } else {
+          pushBtn.classList.remove('fs-status-btn--disabled')
+        }
+        pushBtn.setAttribute('title', 'Git integration is not available')
+        latestGitIntegration = null
+        syncForkButton()
+        return
+      }
+
+      if (!publishMenu) {
+        setLabel('Publish')
+        disableDropdown()
+      } else if (!publishMenu.hasChildNodes()) {
+        setPublishMenuMessage('Loading repositories...')
+      }
 
       try {
         const response = await fetch(historyUri)
-        const data = await response.json()
-        const labelEl = pushBtn.querySelector('.fs-status-title')
-        const setLabel = (text) => {
-          if (labelEl) {
-            labelEl.textContent = text
-          }
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`)
         }
-        const resetHandlers = () => {
-          pushBtn.removeEventListener('click', showPublishModal)
-          pushBtn.removeEventListener('click', showCreateModal)
-          pushBtn.removeEventListener('click', handlePushLogin)
+        const data = await response.json()
+        latestGitIntegration = data
+
+        const isConnected = Boolean(data && data.connected)
+        const emptyMessage = isConnected
+          ? 'No Git repositories detected'
+          : 'Connect GitHub to publish this workspace'
+        renderPublishDropdown(repos, { emptyMessage })
+
+        if (!isConnected) {
+          setLabel('Publish')
+          pushBtn.disabled = false
+          pushBtn.classList.remove('fs-status-btn--disabled')
+          pushBtn.setAttribute('title', 'Log in to GitHub to publish this workspace')
+          disableDropdown()
+          pushBtn.addEventListener('click', requireGitLogin)
+          syncForkButton()
+          return
         }
 
-        // Check if GitHub is connected
-        if (!data.connected) {
-          // Not logged in - show "Login" button
-          setLabel('Login')
-          resetHandlers()
-          pushBtn.addEventListener('click', handlePushLogin)
+        if (!Array.isArray(repos) || repos.length === 0) {
+          setLabel('Publish')
+          pushBtn.disabled = true
+          pushBtn.classList.add('fs-status-btn--disabled')
+          pushBtn.setAttribute('title', 'No Git repositories detected')
+          disableDropdown()
+          syncForkButton()
           return
         }
-        
-        // GitHub is connected - show appropriate button based on remotes
-        if (!data.remotes || data.remotes.length === 0) {
-          // No remotes - show "Create" button
+
+        pushBtn.disabled = false
+        pushBtn.classList.remove('fs-status-btn--disabled')
+
+        if (publishTargets.length === 0) {
           setLabel('Create')
-          resetHandlers()
+          pushBtn.setAttribute('title', 'Create a GitHub repository for this project')
+          disableDropdown()
           pushBtn.addEventListener('click', showCreateModal)
-        } else {
-          // Has remotes - show "Publish" button
-          setLabel('Publish')
-          resetHandlers()
-          pushBtn.addEventListener('click', showPublishModal)
+          syncForkButton()
+          return
         }
+
+        setLabel('Publish')
+        pushBtn.removeAttribute('title')
+        enableDropdown()
+        syncForkButton()
       } catch (error) {
         console.error('Error checking remotes:', error)
-        // Default to "Login" on error
-        const labelEl = pushBtn.querySelector('.fs-status-title')
-        if (labelEl) {
-          labelEl.textContent = 'Login'
-        }
-        pushBtn.removeEventListener('click', showPublishModal)
-        pushBtn.removeEventListener('click', showCreateModal)
-        pushBtn.removeEventListener('click', handlePushLogin)
-        pushBtn.addEventListener('click', handlePushLogin)
+        setPublishMenuMessage('Git integration unavailable')
+        setLabel('Publish')
+        pushBtn.disabled = false
+        pushBtn.classList.remove('fs-status-btn--disabled')
+        pushBtn.setAttribute('title', 'Log in to GitHub to publish this workspace')
+        disableDropdown()
+        pushBtn.addEventListener('click', requireGitLogin)
+        latestGitIntegration = null
+        updateForkButton()
       }
     }