pinokiod 3.170.0 → 3.180.0

package/server/routes/files.js

@@ -280,5 +280,101 @@ module.exports = function registerFileRoutes(app, { kernel, getTheme, exists })
     });
   }));
 
+  router.post('/api/files/delete', asyncHandler(async (req, res) => {
+    const { workspace, path: relativePath, root: rootParam } = req.body || {};
+    if (typeof relativePath !== 'string') {
+      throw createHttpError(400, 'Path must be provided');
+    }
+
+    const resolved = await resolveWorkspacePath(workspace, relativePath, rootParam);
+    const { absolutePath, relativePosix, workspaceSlug } = resolved;
+
+    if (!relativePosix) {
+      throw createHttpError(400, 'Cannot delete workspace root');
+    }
+
+    const stats = await fs.promises.stat(absolutePath).catch(() => null);
+    if (!stats) {
+      throw createHttpError(404, 'Path not found');
+    }
+
+    let removedType;
+    if (stats.isDirectory()) {
+      await fs.promises.rm(absolutePath, { recursive: true, force: true });
+      removedType = 'directory';
+    } else if (stats.isFile()) {
+      await fs.promises.unlink(absolutePath);
+      removedType = 'file';
+    } else {
+      throw createHttpError(400, 'Unsupported file type');
+    }
+
+    res.json({
+      workspace: workspaceSlug,
+      path: relativePosix,
+      type: removedType,
+      success: true,
+    });
+  }));
+
+  router.post('/api/files/rename', asyncHandler(async (req, res) => {
+    const { workspace, path: relativePath, name: newName, root: rootParam } = req.body || {};
+    if (typeof relativePath !== 'string' || relativePath.length === 0) {
+      throw createHttpError(400, 'Path must be provided');
+    }
+    if (typeof newName !== 'string' || newName.trim().length === 0) {
+      throw createHttpError(400, 'New name must be provided');
+    }
+
+    const sanitizedName = newName.trim();
+    if (sanitizedName.includes('/') || sanitizedName.includes('\\')) {
+      throw createHttpError(400, 'Name cannot contain path separators');
+    }
+
+    const resolved = await resolveWorkspacePath(workspace, relativePath, rootParam);
+    const { absolutePath, relativePosix, workspaceSlug, workspaceRoot } = resolved;
+
+    if (!relativePosix) {
+      throw createHttpError(400, 'Cannot rename workspace root');
+    }
+
+    const sourceStats = await fs.promises.stat(absolutePath).catch(() => null);
+    if (!sourceStats) {
+      throw createHttpError(404, 'Source path not found');
+    }
+
+    const parentSegments = resolved.relativeSegments.slice(0, -1);
+    const sourceName = resolved.relativeSegments[resolved.relativeSegments.length - 1];
+    if (sourceName === sanitizedName) {
+      res.json({
+        workspace: workspaceSlug,
+        path: relativePosix,
+        target: relativePosix,
+        success: true,
+        unchanged: true,
+      });
+      return;
+    }
+
+    const targetAbsolute = path.resolve(workspaceRoot, ...parentSegments, sanitizedName);
+    const relativeTargetSegments = sanitizeSegments([...parentSegments, sanitizedName].join('/'));
+    const relativeTarget = relativeTargetSegments.join('/');
+    const collision = await fs.promises.stat(targetAbsolute).catch(() => null);
+    if (collision) {
+      throw createHttpError(409, 'A file or folder with that name already exists');
+    }
+
+    await fs.promises.rename(absolutePath, targetAbsolute);
+
+    const targetStats = await fs.promises.stat(targetAbsolute);
+    res.json({
+      workspace: workspaceSlug,
+      path: relativePosix,
+      target: relativeTarget,
+      type: targetStats.isDirectory() ? 'directory' : targetStats.isFile() ? 'file' : 'other',
+      success: true,
+    });
+  }));
+
   app.use(router);
 };

package/server/views/app.ejs

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