pinokiod 3.182.0 → 3.183.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.182.0",
+  "version": "3.183.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/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'>