pinokiod 3.182.0 → 3.184.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.182.0",
+  "version": "3.184.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/views/agents.ejs

@@ -410,6 +410,7 @@ body.dark .plugin-option:hover {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/app.ejs

@@ -891,14 +891,6 @@ body.dark .tab-link-popover {
 body.dark .tab-link-popover .tab-link-popover-header {
   color: rgba(226, 232, 240, 0.7);
 }
-.tab-link-popover .tab-link-popover-separator {
-  height: 1px;
-  margin: 4px 14px;
-  background: rgba(15, 23, 42, 0.08);
-}
-body.dark .tab-link-popover .tab-link-popover-separator {
-  background: rgba(148, 163, 184, 0.18);
-}
 .tab-link-popover .tab-link-popover-item {
   width: 100%;
   border: none;
@@ -932,10 +924,6 @@ body.dark .tab-link-popover .tab-link-popover-item:focus-visible {
   text-transform: uppercase;
   color: rgba(15, 23, 42, 0.55);
 }
-.tab-link-popover .tab-link-popover-item .label i {
-  margin-right: 6px;
-  font-size: 11px;
-}
 body.dark .tab-link-popover .tab-link-popover-item .label {
   color: rgba(226, 232, 240, 0.65);
 }
@@ -3098,6 +3086,7 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></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'>Forum</div></a>
@@ -4400,27 +4389,27 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
       positionTabLinkPopover(pop, link)
     } catch (_) {}
 
-    let entries = []
+    let entries
     try {
-      const result = await buildTabLinkEntries(link)
-      if (Array.isArray(result)) {
-        entries = result.slice()
-      }
+      entries = await buildTabLinkEntries(link)
     } catch (_) {
-      entries = []
+      tabLinkPendingLink = null
+      return
     }
 
     if (tabLinkPendingLink !== link) {
       return
     }
 
-    let openEntries = Array.isArray(entries) ? entries.slice() : []
-    let showOpenSection = openEntries.length > 0
+    if (!entries || entries.length === 0) {
+      hideTabLinkPopover({ immediate: true })
+      return
+    }
 
     if (sameOrigin) {
       const slug = extractProjectSlug(link).toLowerCase()
       if (slug) {
-        openEntries = openEntries.filter((entry) => {
+        entries = entries.filter((entry) => {
           if (!entry || !entry.url) {
             return false
           }
@@ -4455,21 +4444,17 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
           return false
         })
       } else {
-        openEntries = openEntries.filter((entry) => entry.url === canonicalBase)
+        entries = entries.filter((entry) => entry.url === canonicalBase)
       }
 
-      const hasAlternate = openEntries.some((entry) => entry.url !== canonicalBase)
+      const hasAlternate = entries.some((entry) => entry.url !== canonicalBase)
       if (!hasAlternate) {
-        showOpenSection = false
-        openEntries = []
-      } else {
-        showOpenSection = openEntries.length > 0
+        hideTabLinkPopover({ immediate: true })
+        return
       }
-    } else {
-      showOpenSection = openEntries.length > 0
     }
 
-    if (!showOpenSection && !canonicalBase) {
+    if (!entries || entries.length === 0) {
       hideTabLinkPopover({ immediate: true })
       return
     }
@@ -4477,93 +4462,62 @@ body.dark .pinokio-fork-dropdown-remote, body.dark .pinokio-publish-dropdown-rem
     const popover = ensureTabLinkPopoverEl()
     popover.innerHTML = ""
 
-    if (showOpenSection) {
-      const header = document.createElement("div")
-      header.className = "tab-link-popover-header"
-      header.innerHTML = `<i class="fa-solid fa-arrow-up-right-from-square"></i><span>Open in browser</span>`
-      popover.appendChild(header)
-
-      const hasHttpsEntry = openEntries.some((entry) => entry && entry.type === "https")
-
-      openEntries.forEach((entry) => {
-        const item = document.createElement("button")
-        item.type = "button"
-        item.setAttribute("data-url", entry.url)
-        const labelSpan = document.createElement("span")
-        labelSpan.className = "label"
-        labelSpan.textContent = entry.label
-        const valueSpan = document.createElement("span")
-        valueSpan.className = "value"
-        valueSpan.textContent = entry.display
-
-        if (entry.type === 'http' && entry.qr === true) {
-          item.className = "tab-link-popover-item qr-inline"
-          const textCol = document.createElement('div')
-          textCol.className = 'textcol'
-          textCol.append(labelSpan, valueSpan)
-          const qrImg = document.createElement('img')
-          qrImg.className = 'qr'
-          qrImg.alt = 'QR'
-          qrImg.decoding = 'async'
-          qrImg.loading = 'lazy'
-          qrImg.src = `/qr?data=${encodeURIComponent(entry.url)}&s=4&m=0`
-          item.append(textCol, qrImg)
-        } else {
-          item.className = "tab-link-popover-item"
-          // Keep label and value as direct children so column layout applies
-          item.append(labelSpan, valueSpan)
-        }
-        popover.appendChild(item)
-      })
-
-      if (tabLinkRouterHttpsActive === false && !hasHttpsEntry) {
-        const footerButton = document.createElement("button")
-        footerButton.type = "button"
-        footerButton.className = "tab-link-popover-item tab-link-popover-footer"
-        footerButton.setAttribute("data-url", "/network")
-        footerButton.setAttribute("data-target", "_self")
-        footerButton.setAttribute("aria-label", "Open network settings to configure local HTTPS")
-
-        const footerLabel = document.createElement("span")
-        footerLabel.className = "label"
-        footerLabel.textContent = "Custom domain not active"
-
-        const footerValue = document.createElement("span")
-        footerValue.className = "value"
-        footerValue.textContent = "Click to activate"
-
-        footerButton.append(footerLabel, footerValue)
-        popover.appendChild(footerButton)
+    const header = document.createElement("div")
+    header.className = "tab-link-popover-header"
+    header.innerHTML = `<i class="fa-solid fa-arrow-up-right-from-square"></i><span>Open in browser</span>`
+    popover.appendChild(header)
+
+    const hasHttpsEntry = entries.some((entry) => entry && entry.type === "https")
+
+    entries.forEach((entry) => {
+      const item = document.createElement("button")
+      item.type = "button"
+      item.setAttribute("data-url", entry.url)
+      const labelSpan = document.createElement("span")
+      labelSpan.className = "label"
+      labelSpan.textContent = entry.label
+      const valueSpan = document.createElement("span")
+      valueSpan.className = "value"
+      valueSpan.textContent = entry.display
+
+      if (entry.type === 'http' && entry.qr === true) {
+        item.className = "tab-link-popover-item qr-inline"
+        const textCol = document.createElement('div')
+        textCol.className = 'textcol'
+        textCol.append(labelSpan, valueSpan)
+        const qrImg = document.createElement('img')
+        qrImg.className = 'qr'
+        qrImg.alt = 'QR'
+        qrImg.decoding = 'async'
+        qrImg.loading = 'lazy'
+        qrImg.src = `/qr?data=${encodeURIComponent(entry.url)}&s=4&m=0`
+        item.append(textCol, qrImg)
+      } else {
+        item.className = "tab-link-popover-item"
+        // Keep label and value as direct children so column layout applies
+        item.append(labelSpan, valueSpan)
       }
-    }
-
-    if (showOpenSection && canonicalBase) {
-      const separator = document.createElement("div")
-      separator.className = "tab-link-popover-separator"
-      popover.appendChild(separator)
-    }
-
-    if (canonicalBase) {
-      const debugHeader = document.createElement("div")
-      debugHeader.className = "tab-link-popover-header"
-      debugHeader.innerHTML = `<i class="fa-solid fa-cube"></i><span>Debug</span>`
-      popover.appendChild(debugHeader)
+      popover.appendChild(item)
+    })
 
-      const debugItem = document.createElement("button")
-      debugItem.type = "button"
-      debugItem.className = "tab-link-popover-item"
-      debugItem.setAttribute("data-url", canonicalBase)
+    if (tabLinkRouterHttpsActive === false && !hasHttpsEntry) {
+      const footerButton = document.createElement("button")
+      footerButton.type = "button"
+      footerButton.className = "tab-link-popover-item tab-link-popover-footer"
+      footerButton.setAttribute("data-url", "/network")
+      footerButton.setAttribute("data-target", "_self")
+      footerButton.setAttribute("aria-label", "Open network settings to configure local HTTPS")
 
-      const debugLabel = document.createElement("span")
-      debugLabel.className = "label"
-      debugLabel.innerHTML = `<i class="fa-solid fa-border-none"></i><span>Select a region</span>`
+      const footerLabel = document.createElement("span")
+      footerLabel.className = "label"
+      footerLabel.textContent = "Custom domain not active"
 
-      const debugValue = document.createElement("span")
-      debugValue.className = "value"
-      debugValue.textContent = formatDisplayUrl(canonicalBase)
+      const footerValue = document.createElement("span")
+      footerValue.className = "value"
+      footerValue.textContent = "Click to activate"
 
-      debugItem.append(debugLabel, debugValue)
-      popover.appendChild(debugItem)
+      footerButton.append(footerLabel, footerValue)
+      popover.appendChild(footerButton)
     }
 
     tabLinkActiveLink = link

package/server/views/connect/x.ejs

@@ -201,6 +201,7 @@ pre {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/connect.ejs

@@ -820,6 +820,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
 <form class='urlbar'>
   <div class='url-input-container'>

package/server/views/container.ejs

@@ -333,6 +333,7 @@ iframe {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
 <form class='urlbar'>
   <div class='url-input-container'>

package/server/views/download.ejs

@@ -129,6 +129,7 @@ body.frozen {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/explore.ejs

@@ -130,6 +130,7 @@ body main iframe {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/form.ejs

@@ -163,6 +163,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/frame.ejs

@@ -93,6 +93,7 @@ main iframe {
   <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/github.ejs

@@ -242,6 +242,7 @@ ol {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/help.ejs

@@ -263,6 +263,7 @@ body.dark .item .tile .badge {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/index.ejs

@@ -425,6 +425,7 @@ body.dark aside .current.selected {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
 <form class='urlbar'>
   <div class='url-input-container'>

package/server/views/init/index.ejs

@@ -1529,6 +1529,7 @@ body.dark .ace-editor {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/mini.ejs

@@ -763,6 +763,7 @@ body.dark .appcanvas {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible filler'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/net.ejs

@@ -543,6 +543,7 @@ document.addEventListener('DOMContentLoaded', function() {
     <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
     <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
     <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+    <button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
     <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
     <form class='urlbar'>
       <div class='url-input-container'>

package/server/views/network.ejs

@@ -1056,6 +1056,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
 <form class='urlbar'>
   <div class='url-input-container'>

package/server/views/prototype/index.ejs

@@ -1011,6 +1011,7 @@ body.dark .appcanvas {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/review.ejs

@@ -945,6 +945,7 @@ body.dark .top-menu .btn2.selected {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2' id='hidden-placeholder'><i class="fa-solid fa-bars"></i></button>
 <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'>Forum</div></a>

package/server/views/screenshots.ejs

@@ -715,6 +715,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
 <form class='urlbar'>
   <div class='url-input-container'>

package/server/views/settings.ejs

@@ -387,6 +387,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <% } %>
 <% }) %>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
 <form class='urlbar'>
   <div class='url-input-container'>

package/server/views/setup.ejs

@@ -140,6 +140,7 @@ body {
   <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/setup_home.ejs

@@ -156,6 +156,7 @@ body.dark .card {
   <div><i class="fa-solid fa-expand"></i></div>
 </button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>

package/server/views/shell.ejs

@@ -893,6 +893,93 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
       }
     }
+    async collectFilesFromDataTransfer(dataTransfer) {
+      if (!dataTransfer) {
+        return []
+      }
+      const items = dataTransfer.items ? Array.from(dataTransfer.items) : []
+      const stringItems = items.filter((item) => item && item.kind === "string" && typeof item.getAsString === "function")
+      const collectedStrings = []
+      if (stringItems.length > 0) {
+        const stringValues = await Promise.all(stringItems.map((item) => new Promise((resolve) => {
+          try {
+            item.getAsString((value) => resolve({ type: item.type || "text/plain", value }))
+          } catch (_) {
+            resolve({ type: item.type || "text/plain", value: "" })
+          }
+        })))
+        for (const entry of stringValues) {
+          if (entry && typeof entry.value === "string" && entry.value.trim()) {
+            collectedStrings.push(entry)
+          }
+        }
+      } else if (typeof dataTransfer.getData === "function") {
+        const uriList = dataTransfer.getData("text/uri-list")
+        if (uriList && uriList.trim()) {
+          collectedStrings.push({ type: "text/uri-list", value: uriList })
+        }
+        const plain = dataTransfer.getData("text/plain")
+        if (plain && plain.trim()) {
+          collectedStrings.push({ type: "text/plain", value: plain })
+        }
+      }
+      if (!collectedStrings.length) {
+        return []
+      }
+      const origin = window.location.origin
+      const urls = new Set()
+      for (const { type, value } of collectedStrings) {
+        if (!value) {
+          continue
+        }
+        const trimmed = value.trim()
+        if (!trimmed) {
+          continue
+        }
+        const candidates = (type === "text/uri-list" ? trimmed.split(/\r?\n/) : [trimmed]).filter((line) => line && !line.startsWith("#"))
+        for (const candidate of candidates) {
+          let resolved
+          try {
+            resolved = new URL(candidate, origin)
+          } catch (_) {
+            continue
+          }
+          if (resolved.origin !== origin) {
+            continue
+          }
+          urls.add(resolved.href)
+        }
+      }
+      if (!urls.size) {
+        return []
+      }
+      const FileCtor = typeof window !== "undefined" ? window.File : null
+      if (typeof FileCtor !== "function") {
+        return []
+      }
+      const files = []
+      for (const href of urls) {
+        try {
+          const response = await fetch(href, { credentials: "include" })
+          if (!response || !response.ok) {
+            continue
+          }
+          const blob = await response.blob()
+          const nameSegment = href.split("/").pop() || "download"
+          let filename = nameSegment || "download"
+          try {
+            filename = decodeURIComponent(filename)
+          } catch (_) {}
+          if (!filename) {
+            filename = "download"
+          }
+          files.push(new FileCtor([blob], filename, { type: blob.type || "application/octet-stream", lastModified: Date.now() }))
+        } catch (error) {
+          console.warn("Failed to resolve dropped resource", href, error)
+        }
+      }
+      return files
+    }
     async createTerm (_theme) {
       console.log(xtermTheme)
       if (!this.term) {
@@ -964,11 +1051,26 @@ document.addEventListener("DOMContentLoaded", async () => {
           prevent(event)
           dragDepth = 0
           dropOverlay.classList.remove("active")
-          const dropped = Array.from(event.dataTransfer ? event.dataTransfer.files || [] : [])
-          if (!dropped.length) {
+          const files = Array.from(event.dataTransfer ? event.dataTransfer.files || [] : [])
+          try {
+            const extra = await this.collectFilesFromDataTransfer(event.dataTransfer)
+            if (Array.isArray(extra) && extra.length) {
+              const seen = new Set(files.map((file) => `${file.name}-${file.size}`))
+              for (const file of extra) {
+                const key = `${file.name}-${file.size}`
+                if (!seen.has(key)) {
+                  seen.add(key)
+                  files.push(file)
+                }
+              }
+            }
+          } catch (error) {
+            console.warn("Failed to collect files from drop payload", error)
+          }
+          if (!files.length) {
             return
           }
-          await this.uploadFiles(dropped, dropOverlay)
+          await this.uploadFiles(files, dropOverlay)
           this.term.focus()
         })
         term.attachCustomKeyEventHandler(event => {

package/server/views/terminal.ejs

@@ -980,6 +980,93 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
       }
     }
+    async collectFilesFromDataTransfer(dataTransfer) {
+      if (!dataTransfer) {
+        return []
+      }
+      const items = dataTransfer.items ? Array.from(dataTransfer.items) : []
+      const stringItems = items.filter((item) => item && item.kind === "string" && typeof item.getAsString === "function")
+      const collectedStrings = []
+      if (stringItems.length > 0) {
+        const stringValues = await Promise.all(stringItems.map((item) => new Promise((resolve) => {
+          try {
+            item.getAsString((value) => resolve({ type: item.type || "text/plain", value }))
+          } catch (_) {
+            resolve({ type: item.type || "text/plain", value: "" })
+          }
+        })))
+        for (const entry of stringValues) {
+          if (entry && typeof entry.value === "string" && entry.value.trim()) {
+            collectedStrings.push(entry)
+          }
+        }
+      } else if (typeof dataTransfer.getData === "function") {
+        const uriList = dataTransfer.getData("text/uri-list")
+        if (uriList && uriList.trim()) {
+          collectedStrings.push({ type: "text/uri-list", value: uriList })
+        }
+        const plain = dataTransfer.getData("text/plain")
+        if (plain && plain.trim()) {
+          collectedStrings.push({ type: "text/plain", value: plain })
+        }
+      }
+      if (!collectedStrings.length) {
+        return []
+      }
+      const origin = window.location.origin
+      const urls = new Set()
+      for (const { type, value } of collectedStrings) {
+        if (!value) {
+          continue
+        }
+        const trimmed = value.trim()
+        if (!trimmed) {
+          continue
+        }
+        const candidates = (type === "text/uri-list" ? trimmed.split(/\r?\n/) : [trimmed]).filter((line) => line && !line.startsWith("#"))
+        for (const candidate of candidates) {
+          let resolved
+          try {
+            resolved = new URL(candidate, origin)
+          } catch (_) {
+            continue
+          }
+          if (resolved.origin !== origin) {
+            continue
+          }
+          urls.add(resolved.href)
+        }
+      }
+      if (!urls.size) {
+        return []
+      }
+      const FileCtor = typeof window !== "undefined" ? window.File : null
+      if (typeof FileCtor !== "function") {
+        return []
+      }
+      const files = []
+      for (const href of urls) {
+        try {
+          const response = await fetch(href, { credentials: "include" })
+          if (!response || !response.ok) {
+            continue
+          }
+          const blob = await response.blob()
+          const nameSegment = href.split("/").pop() || "download"
+          let filename = nameSegment || "download"
+          try {
+            filename = decodeURIComponent(filename)
+          } catch (_) {}
+          if (!filename) {
+            filename = "download"
+          }
+          files.push(new FileCtor([blob], filename, { type: blob.type || "application/octet-stream", lastModified: Date.now() }))
+        } catch (error) {
+          console.warn("Failed to resolve dropped resource", href, error)
+        }
+      }
+      return files
+    }
     async createTerm (_theme) {
       if (!this.term) {
         const theme = Object.assign({ }, _theme, {
@@ -1048,11 +1135,26 @@ document.addEventListener("DOMContentLoaded", async () => {
           prevent(event)
           dragDepth = 0
           dropOverlay.classList.remove("active")
-          const dropped = Array.from(event.dataTransfer ? event.dataTransfer.files || [] : [])
-          if (!dropped.length) {
+          const files = Array.from(event.dataTransfer ? event.dataTransfer.files || [] : [])
+          try {
+            const extra = await this.collectFilesFromDataTransfer(event.dataTransfer)
+            if (Array.isArray(extra) && extra.length) {
+              const seen = new Set(files.map((file) => `${file.name}-${file.size}`))
+              for (const file of extra) {
+                const key = `${file.name}-${file.size}`
+                if (!seen.has(key)) {
+                  seen.add(key)
+                  files.push(file)
+                }
+              }
+            }
+          } catch (error) {
+            console.warn("Failed to collect files from drop payload", error)
+          }
+          if (!files.length) {
             return
           }
-          await this.uploadFiles(dropped, dropOverlay)
+          await this.uploadFiles(files, dropOverlay)
           this.term.focus()
         })
         term.attachCustomKeyEventHandler(event => {

package/server/views/tools.ejs

@@ -1105,6 +1105,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
+<button class='btn2' id='inspector' data-tippy-content="Switch to inspect mode"><i class="fa-solid fa-eye"></i></button>
 <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
 <form class='urlbar'>
   <div class='url-input-container'>