pinokiod 3.102.0 → 3.104.0

package/server/views/app.ejs

@@ -18,8 +18,9 @@
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
 <style>
-body.dark #devtab {
+body.dark #devtab.selected {
   border: none;
+  background: rgba(255,255,255,0.07);
 }
 #devtab {
   align-items: center;
@@ -144,7 +145,7 @@ body.dark .appcanvas {
 }
 */
 body.dark .appcanvas_filler {
-  background: rgba(255,255,255,0.2) !important;
+  background: rgba(255,255,255,0.07) !important;
   border: none;
 }
 .appcanvas_filler {
@@ -370,6 +371,9 @@ body.dark .appcanvas > aside .m.menu .nested-menu > .submenu .frame-link:hover {
   background: none !important;
   border: none;
 }
+body.dark .appcanvas > aside .header-item.btn:not(.selected) {
+  background: none;
+}
 
 .appcanvas > aside .header-item .tab {
   display: flex;
@@ -702,7 +706,7 @@ body .frame-link.selected {
   color: white;
 }
 body.dark .frame-link.selected {
-  background: rgba(255,255,255,0.2) !important;
+  background: rgba(255,255,255,0.07) !important;
 }
 .frame-link .loader {
 /*
@@ -1273,11 +1277,8 @@ body.dark .top-menu .btn2.selected {
 }
 
 body.dark #fs-status {
-/*
-  border-bottom: 1px solid rgba(255,255,255,0.04);
-  */
   border: none;
-  background: rgba(255,255,255,0.2) !important;
+  background: rgba(255,255,255,0.07) !important;
 }
 #fs-status {
   padding: 5px;
@@ -1313,7 +1314,7 @@ body.dark #fs-status {
   border-radius: 4px;
   display: flex !important;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
   font-size: 12px;
   line-height: 1.2;
   color: #24292f;
@@ -1351,6 +1352,13 @@ body.dark #fs-status {
   min-width: 0;
 }
 
+.fs-status-btn.fs-status-btn--disabled,
+.fs-status-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+  pointer-events: none;
+}
+
 .fs-status-dropdown {
   position: relative;
 }
@@ -1441,6 +1449,79 @@ body.dark #fs-status .fs-dropdown-menu .frame-link:hover {
   background: rgba(148, 163, 184, 0.15);
 }
 
+#fs-status .git-changes {
+  margin-left: auto;
+}
+
+#fs-changes-menu .fs-dropdown-empty {
+  padding: 8px 14px;
+  font-size: 12px;
+  color: rgba(31, 41, 55, 0.66);
+}
+
+#fs-changes-menu {
+  left: auto;
+  right: 0;
+  width: max-content;
+  max-width: min(460px, calc(100vw - 32px));
+  max-height: min(70vh, 420px);
+  overflow: auto;
+}
+
+#fs-changes-menu .fs-dropdown-item {
+  align-items: flex-start;
+  white-space: normal;
+}
+
+body.dark #fs-changes-menu .fs-dropdown-empty {
+  color: rgba(226, 232, 240, 0.7);
+}
+
+#fs-changes-menu .git-changes-item-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  white-space: normal;
+  word-break: break-word;
+}
+
+#fs-changes-menu .git-changes-item-count {
+  margin-left: auto;
+  font-size: 12px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+#fs-changes-menu .git-changes-item-count.git-changes-item-count--dirty {
+  color: #2563eb;
+}
+
+#fs-changes-menu .git-changes-item-count.git-changes-item-count--clean {
+  font-weight: 500;
+  color: rgba(31, 41, 55, 0.6);
+}
+
+#fs-changes-menu .git-changes-item.git-changes-item--active {
+  background: rgba(37, 99, 235, 0.08);
+}
+
+body.dark #fs-changes-menu .git-changes-item-count {
+  color: #e2e8f0;
+}
+
+body.dark #fs-changes-menu .git-changes-item-count.git-changes-item-count--dirty {
+  color: #60a5fa;
+}
+
+body.dark #fs-changes-menu .git-changes-item-count.git-changes-item-count--clean {
+  color: rgba(148, 163, 184, 0.6);
+}
+
+body.dark #fs-changes-menu .git-changes-item.git-changes-item--active {
+  background: rgba(96, 165, 250, 0.15);
+}
+
 #fs-status .app-info {
   display: flex;
   align-items: center;
@@ -1508,15 +1589,17 @@ body.dark .fs-status-btn:hover {
 .fs-status-btn .badge {
   background: #dc3545;
   color: white;
-  padding: 4px 8px;
-  border-radius: 12px;
+  padding: 2px 5px;
+  border-radius: 2px;
   font-size: 11px;
   font-weight: 600;
   text-align: center;
+  /*
   position: absolute;
   top: 0;
   right: 0;
   transform:translate(25%, -50%);
+  */
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2596,7 +2679,7 @@ body.dark {
   <% } %>
   <div class='container'>
     <% if (type === "browse") { %>
-      <div id='fs-status' data-create-uri="<%=git_create_url%>" data-history-uri="<%=git_history_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%>">
         <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>
@@ -2618,6 +2701,7 @@ body.dark {
             <button type='button' class='fs-dropdown-item' id='delete' data-name="<%=name%>"><i class="fa-solid fa-trash-can"></i> Delete</button>
           </div>
         </div>
+        <!--
         <div class='fs-status-dropdown nested-menu git blue'>
           <button type='button' class='fs-status-btn frame-link reveal'>
             <span class='fs-status-label'>
@@ -2628,6 +2712,7 @@ body.dark {
           <div class='fs-dropdown-menu submenu hidden' id='git-repos'>
           </div>
         </div>
+        -->
         <div class='fs-status-dropdown'>
           <button type='button' class='fs-status-btn revealer' data-group='#fs-settings-menu'>
             <span class='fs-status-label'><i class='fa-solid fa-gear'></i> Settings</span>
@@ -2641,13 +2726,13 @@ body.dark {
             </a>
           </div>
         </div>
-        <button id='fs-changes-btn' class='fs-status-btn'>
-          <span class='fs-status-label'><i class="fa-solid fa-code-compare"></i> Changes</span>
-          <div class='badge'>loading...</div>
-        </button>
-        <button id='fs-history-btn' class='fs-status-btn'>
-          <span class='fs-status-label'><i class="fa-solid fa-clock-rotate-left"></i> History</span>
-        </button>
+        <div class='fs-status-dropdown git-changes'>
+          <button id='fs-changes-btn' class='fs-status-btn revealer' data-group='#fs-changes-menu' type='button'>
+            <span class='fs-status-label'><i class="fa-solid fa-code-compare"></i> Changes</span>
+            <div class='badge'></div>
+          </button>
+          <div class='fs-dropdown-menu submenu hidden' id='fs-changes-menu'></div>
+        </div>
         <button id='fs-push-btn' class='fs-status-btn'>
           <span class='fs-status-label'>
             <i class="fa-brands fa-github"></i>
@@ -2676,6 +2761,15 @@ body.dark {
       renderSelection({ force: true })
     }, delay)
   }
+  const pluginLaunchActive = (() => {
+    try {
+      const params = new URLSearchParams(window.location.search)
+      return params.has('plugin')
+    } catch (_) {
+      return false
+    }
+  })()
+  let ignorePersistedSelection = pluginLaunchActive
   let lastForegroundSignature = null
   const iframe_onerror = (iframe) => {
     let originalSrc = iframe.src
@@ -2854,6 +2948,82 @@ body.dark {
     }
   }
 
+  const ensureHttpDirectoryUrl = (value) => {
+    try {
+      const parsed = new URL(value)
+      if (parsed.protocol.toLowerCase() !== "http:") {
+        return value
+      }
+      let pathname = parsed.pathname || "/"
+      const lastSegment = pathname.split("/").pop() || ""
+      const hasExtension = lastSegment.includes(".")
+      if (!hasExtension && !pathname.endsWith("/")) {
+        pathname = `${pathname}/`
+        parsed.pathname = pathname
+      }
+      parsed.hash = parsed.hash || ""
+      parsed.search = parsed.search || ""
+      return parsed.toString()
+    } catch (_) {
+      return value
+    }
+  }
+
+  const isLocalHostLike = (hostname) => {
+    if (!hostname) {
+      return false
+    }
+    const hostLower = hostname.toLowerCase()
+    if (hostLower === location.hostname.toLowerCase()) {
+      return true
+    }
+    if (hostLower === "localhost" || hostLower === "0.0.0.0") {
+      return true
+    }
+    if (hostLower.startsWith("127.")) {
+      return true
+    }
+    if (/^\d+\.\d+\.\d+\.\d+$/.test(hostLower)) {
+      return true
+    }
+    return false
+  }
+
+  const extractProjectSlug = (node) => {
+    if (!node) {
+      return ""
+    }
+    const candidates = []
+    const targetFull = node.getAttribute("data-target-full")
+    if (typeof targetFull === "string" && targetFull.length > 0) {
+      candidates.push(targetFull)
+    }
+    const dataHref = node.getAttribute("href")
+    if (typeof dataHref === "string" && dataHref.length > 0) {
+      candidates.push(dataHref)
+    }
+    try {
+      const absolute = new URL(node.href, location.origin)
+      candidates.push(absolute.pathname)
+    } catch (_) {
+      // ignore
+    }
+    for (const candidate of candidates) {
+      if (typeof candidate !== "string" || candidate.length === 0) {
+        continue
+      }
+      const assetMatch = candidate.match(/\/asset\/api\/([^\/?#]+)/i)
+      if (assetMatch && assetMatch[1]) {
+        return assetMatch[1]
+      }
+      const pageMatch = candidate.match(/\/p\/([^\/?#]+)/i)
+      if (pageMatch && pageMatch[1]) {
+        return pageMatch[1]
+      }
+    }
+    return ""
+  }
+
   const formatDisplayUrl = (value) => {
     try {
       const parsed = new URL(value, location.origin)
@@ -3344,13 +3514,17 @@ body.dark {
     }
 
     const baseHref = link.href
+    const projectSlug = extractProjectSlug(link).toLowerCase()
     const entries = []
     const entryByUrl = new Map()
     const addEntry = (type, label, url) => {
       if (!url) {
         return
       }
-      const canonical = canonicalizeUrl(url)
+      let canonical = canonicalizeUrl(url)
+      if (canonical && type === "http") {
+        canonical = ensureHttpDirectoryUrl(canonical)
+      }
       if (!canonical) {
         return
       }
@@ -3360,13 +3534,6 @@ body.dark {
         const originLower = parsed.origin.toLowerCase()
         if (originLower === location.origin.toLowerCase()) {
           skip = true
-        } else {
-          const hostLower = parsed.hostname.toLowerCase()
-          const port = parsed.port || (parsed.protocol === "http:" ? "80" : parsed.protocol === "https:" ? "443" : "")
-          const localHosts = new Set(["localhost", "127.0.0.1", "0.0.0.0", "::1"])
-          if (parsed.protocol === "http:" && port === "42000" && localHosts.has(hostLower)) {
-            skip = true
-          }
         }
       } catch (_) {
         // ignore parse failures but do not skip by default
@@ -3404,6 +3571,26 @@ body.dark {
       httpsCandidates.add(canonicalizeUrl(baseHref))
     }
 
+    if (projectSlug) {
+      try {
+        const baseUrl = new URL(baseHref, location.origin)
+        let pathname = baseUrl.pathname || "/"
+        if (pathname.endsWith("/index.html")) {
+          pathname = pathname.slice(0, -"/index.html".length)
+        }
+        if (!pathname.endsWith("/")) {
+          pathname = `${pathname}/`
+        }
+        const normalizedPath = pathname.toLowerCase()
+        if (normalizedPath.includes(`/asset/api/${projectSlug}`)) {
+          const fallbackHttp = `http://127.0.0.1:42000${pathname}`
+          httpCandidates.add(canonicalizeUrl(fallbackHttp))
+        }
+      } catch (_) {
+        // ignore fallback errors
+      }
+    }
+
     const scriptKeys = collectScriptKeys(link)
     if (scriptKeys.length > 0) {
       const localInfo = await ensureLocalMemory()
@@ -3437,9 +3624,29 @@ body.dark {
       })
     }
 
-    const httpList = Array.from(httpCandidates).sort()
     const httpsList = Array.from(httpsCandidates).sort()
 
+    if (httpsList.length > 0) {
+      httpsList.forEach((url) => {
+        try {
+          const parsed = new URL(url)
+          if (parsed.protocol.toLowerCase() !== "https:") {
+            return
+          }
+          if (!parsed.port || parsed.port !== "42000") {
+            return
+          }
+          const hostPort = parsed.port ? `${parsed.hostname}:${parsed.port}` : parsed.hostname
+          const httpUrl = `http://${hostPort}${parsed.pathname || "/"}${parsed.search || ""}`
+          httpCandidates.add(canonicalizeUrl(httpUrl))
+        } catch (_) {
+          // ignore failures
+        }
+      })
+    }
+
+    const httpList = Array.from(httpCandidates).sort()
+
     httpList.forEach((url) => {
       addEntry("http", "HTTP", url)
     })
@@ -3512,12 +3719,12 @@ body.dark {
       return
     }
 
+    let sameOrigin = false
+    let canonicalBase = canonicalizeUrl(link.href)
     try {
-      const linkOrigin = new URL(link.href, location.href).origin
-      if (linkOrigin === location.origin) {
-        hideTabLinkPopover({ immediate: true })
-        return
-      }
+      const linkUrl = new URL(link.href, location.href)
+      sameOrigin = linkUrl.origin === location.origin
+      canonicalBase = canonicalizeUrl(linkUrl.href)
     } catch (_) {
       hideTabLinkPopover({ immediate: true })
       return
@@ -3558,6 +3765,59 @@ body.dark {
       return
     }
 
+    if (sameOrigin) {
+      const slug = extractProjectSlug(link).toLowerCase()
+      if (slug) {
+        entries = entries.filter((entry) => {
+          if (!entry || !entry.url) {
+            return false
+          }
+          if (entry.url === canonicalBase) {
+            return true
+          }
+          try {
+            const parsed = new URL(entry.url)
+            const hostLower = parsed.hostname ? parsed.hostname.toLowerCase() : ""
+            if (isLocalHostLike(hostLower)) {
+              if (entry.type === "http") {
+                const pathLower = parsed.pathname ? parsed.pathname.toLowerCase() : ""
+                if (pathLower.includes(`/asset/api/${slug}`) || pathLower.includes(`/p/${slug}`)) {
+                  return true
+                }
+              }
+              return false
+            }
+            const pathLower = parsed.pathname ? parsed.pathname.toLowerCase() : ""
+            if (pathLower.includes(`/asset/api/${slug}`)) {
+              return true
+            }
+            if (pathLower.includes(`/p/${slug}`)) {
+              return true
+            }
+            if (hostLower.split(".").some((part) => part === slug)) {
+              return true
+            }
+          } catch (_) {
+            return false
+          }
+          return false
+        })
+      } else {
+        entries = entries.filter((entry) => entry.url === canonicalBase)
+      }
+
+      const hasAlternate = entries.some((entry) => entry.url !== canonicalBase)
+      if (!hasAlternate) {
+        hideTabLinkPopover({ immediate: true })
+        return
+      }
+    }
+
+    if (!entries || entries.length === 0) {
+      hideTabLinkPopover({ immediate: true })
+      return
+    }
+
     const popover = ensureTabLinkPopoverEl()
     popover.innerHTML = ""
 
@@ -4424,8 +4684,13 @@ body.dark {
   const renderSelection = async ({ event: eventParam = null, target: explicitTarget = null, force = false } = {}) => {
     const storage = getWindowStorage()
     const selectionKey = selectionStorageKey()
-    const hasPersistedSelection = Boolean(selectionKey && storage && storage.getItem(selectionKey))
-    const persistedSelectionRaw = selectionKey && storage ? storage.getItem(selectionKey) : null
+    const originalHasPersistedSelection = Boolean(selectionKey && storage && storage.getItem(selectionKey))
+    let persistedSelectionRaw = selectionKey && storage ? storage.getItem(selectionKey) : null
+    const skipPersistedSelection = ignorePersistedSelection
+    let hasPersistedSelection = skipPersistedSelection ? false : originalHasPersistedSelection
+    if (skipPersistedSelection) {
+      persistedSelectionRaw = null
+    }
 
     let target = explicitTarget
 
@@ -4444,7 +4709,7 @@ body.dark {
       }
     }
 
-    if (!target) {
+    if (!target && persistedSelectionRaw) {
       target = restorePersistedFrameLink()
       if (!target && persistedSelectionRaw) {
         scheduleSelectionRetry()
@@ -4452,7 +4717,7 @@ body.dark {
       }
     }
 
-    if (!target) {
+    if (!target && !skipPersistedSelection) {
       const urlKey = selectionUrlStorageKey()
       const storedUrl = urlKey && storage ? storage.getItem(urlKey) : null
       if (storedUrl) {
@@ -4460,6 +4725,16 @@ body.dark {
       }
     }
 
+    if (!target && skipPersistedSelection) {
+      const defaultSelection = document.querySelector("[data-default]")
+      if (defaultSelection) {
+        target = defaultSelection
+      } else {
+        scheduleSelectionRetry()
+        return
+      }
+    }
+
     <% if (type === "run" && env.PINOKIO_SCRIPT_DEFAULT && env.PINOKIO_SCRIPT_DEFAULT.toString().toLowerCase() === "true") { %>
       if (!target && !hasPersistedSelection) {
         const defaultSelection = document.querySelector("[data-default]")
@@ -4531,6 +4806,9 @@ body.dark {
       el.classList.remove("selected")
     })
     target.classList.add("selected")
+    if (skipPersistedSelection && target.hasAttribute('data-default')) {
+      ignorePersistedSelection = false
+    }
     persistFrameLinkSelection(target)
 
     // save target.href
@@ -5180,6 +5458,14 @@ body.dark {
     target = e.target.classList.contains("revealer") ? e.target : e.target.closest(".revealer")
 
     if (target) {
+      if (target.classList.contains('fs-status-btn--disabled') || target.disabled) {
+        e.preventDefault()
+        e.stopPropagation()
+        return
+      }
+      if (target.id === 'fs-changes-btn') {
+        check_git()
+      }
       e.preventDefault()
       e.stopPropagation()
       const group = target.getAttribute("data-group")
@@ -5612,12 +5898,14 @@ body.dark {
       restoreAllTabStates()
     <% } else { %>
       try_dynamic()
+      /*
       const repos = await fetch("<%=repos%>").then((res) => {
         return res.text()
       })
       if (document.querySelector("#git-repos")) {
         document.querySelector("#git-repos").innerHTML = repos
       }
+      */
     <% } %>
 
 
@@ -5725,6 +6013,7 @@ body.dark {
   refresh_du("logs")
   renderSelection({ force: true })
   <% if (type !== 'run') { %>
+  /*
     fetch("<%=repos%>").then((res) => {
       return res.text()
     }).then((repos) => {
@@ -5733,6 +6022,7 @@ body.dark {
       }
     })
     refresh()
+    */
   <% } %>
   <% if (plugin_menu) { %>
 //    document.querySelector(".dynamic .reveal").click()
@@ -5772,31 +6062,266 @@ body.dark {
   });
   */
   <% if (type === "browse") { %>
+    const repoStatusCache = new Map()
+    let lastRepoList = []
     let currentChanges = []
     let gitCommitUrl = null
-    
-    const check_git = () => {
-      fetch("<%=git_monitor_url%>").then((res) => {
-        return res.json()
-      }).then((res) => {
-        currentChanges = res.changes || []
-        gitCommitUrl = res.git_commit_url || null
-        const changesBtn = document.querySelector("#fs-changes-btn")
-        const badgeElement = document.querySelector("#fs-changes-btn .badge")
-        
-        if (res.changes && res.changes.length > 0) {
-          // Show changes button and update badge
-          changesBtn.style.display = 'block'
-          badgeElement.innerHTML = `${res.changes.length}`
-        } else {
-          // Hide changes button when no changes
-          changesBtn.style.display = 'none'
-          badgeElement.innerHTML = ''
+    let activeRepoKey = null
+    let gitStatusRequest = null
+
+    const fsStatusEl = document.querySelector('#fs-status')
+    const changesDropdownContainer = document.querySelector('#fs-status .git-changes')
+    const changesMenu = document.getElementById('fs-changes-menu')
+    const changesBtn = document.getElementById('fs-changes-btn')
+    const badgeElement = changesBtn ? changesBtn.querySelector('.badge') : null
+
+    const readDataAttr = (node, attr) => {
+      if (!node) {
+        return null
+      }
+      const value = node.getAttribute(attr)
+      if (!value || value === 'null' || value === 'undefined') {
+        return null
+      }
+      return value
+    }
+
+    const statusUri = readDataAttr(fsStatusEl, 'data-status-uri')
+    const monitorUri = readDataAttr(fsStatusEl, 'data-uri')
+    const workspaceName = readDataAttr(fsStatusEl, 'data-workspace')
+
+    const encodeRepoPath = (value) => {
+      if (typeof value !== 'string' || value.length === 0) {
+        return ''
+      }
+      return value.split('/').map(encodeURIComponent).join('/')
+    }
+
+    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 attachRepoDropdownHandlers = () => {
+      if (!changesMenu) {
+        return
+      }
+      const items = changesMenu.querySelectorAll('.git-changes-item')
+      items.forEach((item) => {
+        item.addEventListener('click', async (event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          const repoKey = item.dataset.repo
+          const repoName = item.dataset.name
+          if (repoKey) {
+            activeRepoKey = repoKey
+          }
+          items.forEach((node) => {
+            if (node === item) {
+              node.classList.add('git-changes-item--active')
+            } else {
+              node.classList.remove('git-changes-item--active')
+            }
+          })
+          closeStatusDropdowns()
+          try {
+            await showGitDiffModal({ repoParam: repoKey, repoName })
+          } catch (err) {
+            console.error('Failed to open diff modal:', err)
+          }
+        })
+      })
+    }
+
+    const renderChangesDropdown = (repos) => {
+      if (!changesMenu) {
+        return
+      }
+
+      if (!Array.isArray(repos) || repos.length === 0) {
+        setChangesMenuMessage('No Git repositories detected')
+        updateChangesButtonState(false)
+        return
+      }
+
+      const fragment = document.createDocumentFragment()
+      repos.forEach((repo) => {
+        const button = document.createElement('button')
+        button.type = 'button'
+        button.className = 'fs-dropdown-item git-changes-item'
+        button.dataset.repo = repo.repoParam
+        button.dataset.name = repo.name
+        if (repo.main) {
+          button.dataset.main = 'true'
         }
-        updatePublishButton()
-      }).catch((error) => {
-        console.error('check_git error:', error)
+        if (repo.repoParam === activeRepoKey) {
+          button.classList.add('git-changes-item--active')
+        }
+
+        button.innerHTML = `
+          <span class="git-changes-item-label">
+            <i class="fa-solid fa-code-branch"></i>
+            <span>${repo.name}</span>
+          </span>
+          <span class="git-changes-item-count ${repo.changeCount > 0 ? 'git-changes-item-count--dirty' : 'git-changes-item-count--clean'}">
+            ${repo.changeCount > 0 ? repo.changeCount : 'Clean'}
+          </span>
+        `
+
+        fragment.append(button)
       })
+
+      changesMenu.innerHTML = ''
+      changesMenu.append(fragment)
+      updateChangesButtonState(true)
+      attachRepoDropdownHandlers()
+    }
+
+    const updateFromLegacyMonitor = async () => {
+      if (!monitorUri) {
+        setChangesMenuMessage('Git status data unavailable')
+        updateCombinedBadge(0)
+        updateChangesButtonState(false)
+        return false
+      }
+      try {
+        const response = await fetch(monitorUri)
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`)
+        }
+        const data = await response.json()
+        const repoKey = workspaceName || ''
+        const fallbackRepo = {
+          name: workspaceName || 'Current workspace',
+          main: true,
+          repoParam: repoKey,
+          changeCount: Array.isArray(data.changes) ? data.changes.length : 0,
+          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'),
+          url: null,
+        }
+
+        repoStatusCache.clear()
+        repoStatusCache.set(fallbackRepo.repoParam, fallbackRepo)
+        lastRepoList = [fallbackRepo]
+        activeRepoKey = fallbackRepo.repoParam
+        currentChanges = fallbackRepo.changes
+        gitCommitUrl = fallbackRepo.git_commit_url
+
+        renderChangesDropdown(lastRepoList)
+        updateCombinedBadge(fallbackRepo.changeCount)
+        updatePublishButton()
+        return true
+      } catch (error) {
+        console.error('check_git fallback error:', error)
+        setChangesMenuMessage('Unable to load repositories')
+        updateCombinedBadge(0)
+        updateChangesButtonState(false)
+        return false
+      }
+    }
+
+    const check_git = async () => {
+      if (gitStatusRequest) {
+        return gitStatusRequest
+      }
+
+      gitStatusRequest = (async () => {
+        if (repoStatusCache.size === 0) {
+          setChangesMenuMessage(statusUri ? 'Loading repositories...' : 'Loading changes...')
+          updateChangesButtonState(false)
+        }
+
+        if (!statusUri) {
+          await updateFromLegacyMonitor()
+          return
+        }
+
+        try {
+          const response = await fetch(statusUri)
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`)
+          }
+          const data = await response.json()
+          const repos = Array.isArray(data.repos) ? data.repos : []
+
+          repoStatusCache.clear()
+          repos.forEach((repo) => {
+            repoStatusCache.set(repo.repoParam, repo)
+          })
+
+          const sortedRepos = [...repos].sort((a, b) => {
+            if (a.main === b.main) {
+              return a.name.localeCompare(b.name)
+            }
+            return a.main ? -1 : 1
+          })
+
+          lastRepoList = sortedRepos
+
+          const existingActive = activeRepoKey
+            ? sortedRepos.find((repo) => repo.repoParam === activeRepoKey)
+            : null
+          const fallbackRepo = sortedRepos.find((repo) => repo.main) || sortedRepos[0] || null
+          const resolvedActive = existingActive || fallbackRepo
+          activeRepoKey = resolvedActive ? resolvedActive.repoParam : null
+          currentChanges = resolvedActive ? (resolvedActive.changes || []) : []
+          gitCommitUrl = resolvedActive ? (resolvedActive.git_commit_url || null) : null
+
+          if (changesDropdownContainer) {
+            changesDropdownContainer.style.display = ''
+          }
+
+          if (sortedRepos.length === 0) {
+            await updateFromLegacyMonitor()
+          } else {
+            renderChangesDropdown(sortedRepos)
+            const total = typeof data.totalChanges === 'number'
+              ? data.totalChanges
+              : sortedRepos.reduce((sum, repo) => sum + (repo.changeCount || 0), 0)
+            updateCombinedBadge(total)
+            updateChangesButtonState(true)
+          }
+
+          updatePublishButton()
+        } catch (error) {
+          console.error('check_git error:', error)
+          await updateFromLegacyMonitor()
+        }
+      })()
+
+      try {
+        await gitStatusRequest
+      } finally {
+        gitStatusRequest = null
+      }
     }
     
     let messageListener = null
@@ -5908,43 +6433,135 @@ body.dark {
       return messages.join(', ')
     }
     
-    const showGitDiffModal = async (diffData = null, modalTitle = 'File Changes', showSaveButton = true) => {
-      let changes = diffData ? (diffData.changes || []) : currentChanges
-      let commitUrl = diffData ? (diffData.git_commit_url || null) : gitCommitUrl
-      
-      // If no diffData provided and currentChanges is empty, try to fetch fresh data
-      if (!diffData && changes.length === 0) {
+    const showGitDiffModal = async (diffData = null, modalTitle = null, showSaveButton = true) => {
+      const diffDataIsObject = diffData && typeof diffData === 'object' && !Array.isArray(diffData)
+      let repoParam = diffDataIsObject ? (diffData.repoParam || diffData.repoKey || null) : null
+      let repoDisplayName = diffDataIsObject ? (diffData.repoName || diffData.name || null) : null
+
+      if (!repoParam) {
+        repoParam = activeRepoKey || null
+      }
+
+      if (!repoParam && repoStatusCache.size > 0) {
+        const firstEntry = repoStatusCache.values().next().value
+        if (firstEntry) {
+          repoParam = firstEntry.repoParam
+          if (!repoDisplayName) {
+            repoDisplayName = firstEntry.name
+          }
+        }
+      }
+
+      if (!repoParam) {
+        await check_git()
+        const fallback = repoStatusCache.values().next().value
+        if (fallback) {
+          repoParam = fallback.repoParam
+          repoDisplayName = repoDisplayName || fallback.name
+        }
+      }
+
+      if (!repoParam) {
+        Swal.fire({
+          title: 'No repositories',
+          text: 'No Git repositories were detected for this workspace.',
+          icon: 'info'
+        })
+        return
+      }
+
+      let repoData = repoStatusCache.get(repoParam)
+      if (!repoData) {
+        await check_git()
+        repoData = repoStatusCache.get(repoParam)
+      }
+
+      if (!repoDisplayName && repoData) {
+        repoDisplayName = repoData.name
+      }
+      if (!repoDisplayName) {
+        repoDisplayName = repoParam
+      }
+
+      let changes
+      if (diffDataIsObject && Array.isArray(diffData.changes)) {
+        changes = diffData.changes
+      } else if (repoData && Array.isArray(repoData.changes)) {
+        changes = repoData.changes
+      } else {
+        changes = currentChanges
+      }
+
+      let commitUrl
+      if (diffDataIsObject && diffData.git_commit_url) {
+        commitUrl = diffData.git_commit_url
+      } else if (repoData && repoData.git_commit_url) {
+        commitUrl = repoData.git_commit_url
+      } else {
+        commitUrl = gitCommitUrl
+      }
+
+      const shouldForceRefresh = Boolean(diffDataIsObject && diffData.forceRefresh)
+
+      if (!changes || changes.length === 0 || shouldForceRefresh) {
         try {
-          const response = await fetch("<%=git_monitor_url%>")
+          const response = await fetch(`/gitcommit/HEAD/${encodeRepoPath(repoParam)}`)
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`)
+          }
           const freshData = await response.json()
           changes = freshData.changes || []
-          commitUrl = freshData.git_commit_url || null
-          currentChanges = changes // Update the global variable
-          gitCommitUrl = commitUrl
+          commitUrl = freshData.git_commit_url || commitUrl
+          const updatedRepo = repoData || { repoParam }
+          updatedRepo.changes = changes
+          updatedRepo.changeCount = changes.length
+          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)
+          repoStatusCache.set(repoParam, updatedRepo)
+          repoData = updatedRepo
+          const listEntry = lastRepoList.find((entry) => entry.repoParam === repoParam)
+          if (listEntry) {
+            listEntry.changes = changes
+            listEntry.changeCount = changes.length
+            listEntry.git_commit_url = updatedRepo.git_commit_url
+            if (updatedRepo.git_history_url) {
+              listEntry.git_history_url = updatedRepo.git_history_url
+            }
+          }
+          const total = Array.from(repoStatusCache.values()).reduce((sum, repo) => sum + (repo.changeCount || 0), 0)
+          updateCombinedBadge(total)
+          if (lastRepoList.length > 0) {
+            renderChangesDropdown(lastRepoList)
+          }
         } catch (error) {
-          console.error('Failed to fetch current changes:', error)
+          console.error('Failed to fetch repo changes:', error)
         }
       }
-      
-      
-      if (changes.length === 0) {
-        Swal.fire({
-          html: `
-            <div class="pinokio-no-changes-icon"><i class="fa-solid fa-check"></i></div>
-            <div class="pinokio-no-changes-title">Workspace is clean</div>
-            <div class="pinokio-no-changes-body">There are currently no tracked file changes. Make edits or refresh to check again.</div>
-            <div class="pinokio-no-changes-hint">Tip: run your build or tests before committing.</div>
-          `,
-          customClass: {
-            popup: 'pinokio-no-changes-popup',
-            confirmButton: 'pinokio-no-changes-confirm'
-          },
-          confirmButtonText: 'Close',
-          backdrop: 'rgba(9,11,15,0.6)'
-        })
+
+      activeRepoKey = repoParam
+      currentChanges = changes || []
+      gitCommitUrl = commitUrl
+
+      const title = modalTitle || `File Changes${repoDisplayName ? ` — ${repoDisplayName}` : ''}`
+
+      if (lastRepoList.length > 0) {
+        renderChangesDropdown(lastRepoList)
+      }
+
+      if (!changes || changes.length === 0) {
+        try {
+          await showGitHistoryModal({
+            repoParam,
+            repoName: repoDisplayName,
+            historyUrl: repoData && repoData.git_history_url ? repoData.git_history_url : null,
+          })
+        } catch (error) {
+          console.error('Failed to open history for clean repository:', error)
+        }
         return
       }
-      
+
       const changeSummary = `${changes.length} file${changes.length === 1 ? '' : 's'} changed`
       const statusCounts = { added: 0, modified: 0, deleted: 0, renamed: 0 }
       changes.forEach(change => {
@@ -5975,7 +6592,7 @@ body.dark {
           <div class="pinokio-modal-header">
             <div class="pinokio-modal-icon"><i class="fa-solid fa-code-branch"></i></div>
             <div class="pinokio-modal-heading">
-              <div class="pinokio-modal-title">${modalTitle}</div>
+              <div class="pinokio-modal-title">${title}</div>
               <div class="pinokio-modal-subtitle">${changeSummary}</div>
             </div>
           </div>
@@ -6110,9 +6727,54 @@ body.dark {
       container.innerHTML = diffHtml
     }
     
-    const showGitHistoryModal = async () => {
-      const historyUri = document.querySelector('#fs-status').getAttribute('data-history-uri')
-      if (!historyUri) {
+    const showGitHistoryModal = async (options = {}) => {
+      const opts = options && typeof options === 'object' ? options : {}
+      const buildHistoryUrl = (param) => {
+        if (!param) {
+          return null
+        }
+        return `/info/git/HEAD/${encodeRepoPath(param)}`
+      }
+
+      let repoParam = opts.repoParam ?? null
+      let repoName = opts.repoName ?? null
+      let historyUrl = opts.historyUrl ?? null
+
+      if (!repoParam) {
+        repoParam = activeRepoKey || null
+      }
+
+      let repoData = repoParam ? repoStatusCache.get(repoParam) : null
+
+      if (!repoName && repoData && repoData.name) {
+        repoName = repoData.name
+      }
+
+      if (!historyUrl && repoData && repoData.git_history_url) {
+        historyUrl = repoData.git_history_url
+      }
+
+      const fallbackHistoryUri = readDataAttr(fsStatusEl, 'data-history-uri')
+
+      if (!historyUrl) {
+        if (repoParam) {
+          historyUrl = buildHistoryUrl(repoParam)
+        } else if (fallbackHistoryUri) {
+          historyUrl = fallbackHistoryUri
+        }
+      } else if (repoParam && typeof historyUrl === 'string' && historyUrl.startsWith('/info/git/HEAD/')) {
+        historyUrl = buildHistoryUrl(repoParam)
+      }
+
+      if (!repoName) {
+        if (repoParam) {
+          repoName = repoParam
+        } else if (workspaceName) {
+          repoName = workspaceName
+        }
+      }
+
+      if (!historyUrl) {
         Swal.fire({
           title: 'Error',
           text: 'Git history URL not available.',
@@ -6120,16 +6782,15 @@ body.dark {
         })
         return
       }
-      
+
       try {
-        const response = await fetch(historyUri)
+        const response = await fetch(historyUrl)
         if (!response.ok) {
           throw new Error(`HTTP ${response.status}: ${response.statusText}`)
         }
-        
+
         const historyData = await response.json()
-        displayGitHistory(historyData)
-        
+        displayGitHistory(historyData, { repoName: repoName || null, repoParam: repoParam || null })
       } catch (error) {
         console.error('Failed to load git history:', error)
         Swal.fire({
@@ -6140,7 +6801,8 @@ body.dark {
       }
     }
     
-    const displayGitHistory = (historyData) => {
+    const displayGitHistory = (historyData, options = {}) => {
+      const repoName = options && typeof options === 'object' ? options.repoName : null
       const commits = historyData.log || []
       const remote = historyData.remote || ''
       const currentRef = historyData.ref || 'HEAD'
@@ -6159,12 +6821,14 @@ body.dark {
         metaBadges.push(`<span class="pinokio-pill"><i class="fa-solid fa-cloud-arrow-up"></i>${remote}</span>`)
       }
 
+      const historyTitle = repoName ? `${repoName} history` : 'Repository history'
+
       const historyHtml = `
         <div class="pinokio-modal-surface pinokio-modal-surface--history">
           <div class="pinokio-modal-header">
             <div class="pinokio-modal-icon"><i class="fa-solid fa-clock-rotate-left"></i></div>
             <div class="pinokio-modal-heading">
-              <div class="pinokio-modal-title">Repository history</div>
+              <div class="pinokio-modal-title">${historyTitle}</div>
               <div class="pinokio-modal-subtitle">${subtitleText}</div>
             </div>
           </div>
@@ -6719,15 +7383,10 @@ body.dark {
       }
     }
 
-    // Add click handlers for the buttons
-    document.querySelector('#fs-changes-btn').addEventListener('click', () => showGitDiffModal())
-    document.querySelector('#fs-history-btn').addEventListener('click', showGitHistoryModal)
-    
     // Initialize the publish/create button
     updatePublishButton()
     
     check_git()
-    setInterval(check_git, 10000)
   <% } %>
 
   setInterval(() => {