pinokiod 3.250.0 → 3.252.0

package/server/views/index.ejs

@@ -162,16 +162,26 @@ body.dark .context-menu-wrapper {
   color: white;
 }
 .context-menu-wrapper {
-  background: rgba(0,0,0,0.06) !important;
+  background: whitesmoke !important;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.menu-btns {
+  position: relative;
 }
 .context-menu {
- /* 
-  max-height: 10000px;
-  overflow: hidden;
-  transition: max-height 1s ease-in-out;
-  */
-  display: flex;
-  margin: 0 5px 0 0;
+  position: absolute;
+  right: auto;
+  margin: 0;
+  padding: 0;
+  z-index: 10;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+.context-menu:popover-open {
+  border: none;
+  outline: none;
 }
 .context-menu .btn:hover {
   color: cornflowerblue !important;
@@ -200,12 +210,6 @@ body.dark .btn {
 body.dark .context-menu .btn {
   color: white;
 }
-.context-menu.collapsed {
-/*
-  max-height: 0; 
-  */
-  display: none;
-}
 body.dark .open-menu, body.dark .browse {
   border: none !important;
   /*
@@ -507,7 +511,7 @@ body.dark aside .current.selected {
   -->
   <% if (running.length > 0) { %>
     <div class='running-apps'>
-      <% running.forEach((item) => { %>
+      <% running.forEach((item, index) => { %>
         <a target="<%=item.target || '_self'%>" href="<%=item.browser_url%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" class='line align-top'>
           <h3>
             <div class='item-icon'>
@@ -538,10 +542,10 @@ body.dark aside .current.selected {
                 <button class='btn browse' data-src="<%=item.view_url%>">
                   <i class="fa-regular fa-eye"></i> View
                 </button>
-                <button class='btn open-menu'>
+                <button class='btn open-menu' type='button' popovertarget="context-menu-running-<%=index%>" popovertargetaction="toggle" aria-haspopup="menu">
                   <i class="fa-solid fa-bars"></i><span> Menu</span>
                 </button>
-                <div class='context-menu collapsed'>
+                <div id='context-menu-running-<%=index%>' class='context-menu' popover>
                   <div class='context-menu-wrapper'>
                     <button class='btn' data-filepath="<%=item.filepath%>">
                       <i class="fa-solid fa-folder-open"></i> Open</button>
@@ -601,7 +605,7 @@ body.dark aside .current.selected {
       <!--
       <div class='header-label'>Not Running</div>
       -->
-      <% notRunning.forEach((item) => { %>
+      <% notRunning.forEach((item, index) => { %>
         <a target="<%=item.target || '_self'%>" href="<%=item.browser_url%>" data-description="<%=item.description%>" data-index="<%=item.index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-uri="<%=item.uri%>" data-icon="<%=item.icon%>" data-path="<%=item.path%>"  data-iconpath="<%=item.iconpath ? item.iconpath : ''%>" class='line align-top'>
           <h3>
             <div class='item-icon'>
@@ -632,10 +636,10 @@ body.dark aside .current.selected {
                 <button class='btn browse' data-src="<%=item.view_url%>">
                   <i class="fa-regular fa-eye"></i> View
                 </button>
-                <button class='btn open-menu'>
+                <button class='btn open-menu' type='button' popovertarget="context-menu-not-running-<%=index%>" popovertargetaction="toggle" aria-haspopup="menu">
                   <i class="fa-solid fa-bars"></i><span> Menu</span>
                 </button>
-                <div class='context-menu collapsed'>
+                <div id='context-menu-not-running-<%=index%>' class='context-menu' popover>
                   <div class='context-menu-wrapper'>
                     <button class='btn' data-filepath="<%=item.filepath%>">
                       <i class="fa-solid fa-folder-open"></i> Open</button>
@@ -740,15 +744,7 @@ body.dark aside .current.selected {
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
-  <% if (typeof peer_qr !== 'undefined' && peer_qr) { %>
-  <div class='qr' style='padding:12px 10px; text-align:center;'>
-    <a href="<%=peer_url%>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
-      <img src="<%=peer_qr%>" alt="Open <%=peer_url%>" style="width:128px; height:128px; image-rendering: pixelated;"/>
-      <div class='caption'>Scan to open</div>
-      <div class='caption' style='font-size:10px; opacity:0.7;'><%=peer_url%></div>
-    </a>
-  </div>
-  <% } %>
+  <%- include('partials/peer_access_points', { peer_access_points, peer_url, peer_qr }) %>
 </aside>
 </main>
 <script>
@@ -1101,6 +1097,47 @@ document.addEventListener("keydown", (e) => {
     }
   }
 });
+const supportsNativePopovers = typeof document.createElement('div').showPopover === 'function'
+if (!supportsNativePopovers) {
+  document.querySelectorAll('.context-menu[popover]').forEach((menu) => {
+    menu.style.display = 'none'
+  })
+}
+const getMenuDimensions = (menu) => {
+  let width = parseFloat(menu.dataset.cachedWidth)
+  let height = parseFloat(menu.dataset.cachedHeight)
+  if (!width || !height) {
+    const prev = {
+      visibility: menu.style.visibility,
+      display: menu.style.display,
+      position: menu.style.position,
+      top: menu.style.top,
+      left: menu.style.left,
+    }
+    menu.style.visibility = 'hidden'
+    menu.style.display = 'block'
+    menu.style.position = 'fixed'
+    menu.style.top = '0'
+    menu.style.left = '0'
+    width = menu.offsetWidth
+    height = menu.offsetHeight
+    if (width > 0) {
+      menu.dataset.cachedWidth = width
+    }
+    if (height > 0) {
+      menu.dataset.cachedHeight = height
+    }
+    menu.style.visibility = prev.visibility
+    menu.style.display = prev.display
+    menu.style.position = prev.position
+    menu.style.top = prev.top
+    menu.style.left = prev.left
+  }
+  return {
+    width: width || 0,
+    height: height || 0
+  }
+}
 document.addEventListener("click", async (e) => {
   if (e.target.classList.contains("shutdown")) {
     target = e.target
@@ -1170,11 +1207,74 @@ document.addEventListener("click", async (e) => {
   if (target) {
     e.preventDefault()
     e.stopPropagation()
-    let contextMenu = target.closest(".col").querySelector(".context-menu").classList.toggle("collapsed")
-//    target.classList.toggle("selected")
+    let popoverId = target.getAttribute('popovertarget')
+    let contextMenu
+    if (popoverId) {
+      contextMenu = document.getElementById(popoverId)
+    }
+    if (!contextMenu) {
+      contextMenu = target.closest(".col")?.querySelector(".context-menu")
+    }
+    if (contextMenu) {
+      const hasNativePopover = supportsNativePopovers && typeof contextMenu.showPopover === 'function'
+      const isOpen = hasNativePopover ? contextMenu.matches(':popover-open') : contextMenu.dataset.open === 'true'
+      if (isOpen) {
+        if (hasNativePopover) {
+          contextMenu.hidePopover()
+        } else {
+          contextMenu.style.display = 'none'
+          contextMenu.dataset.open = 'false'
+        }
+        return
+      }
+      if (hasNativePopover) {
+        document.querySelectorAll('.context-menu[popover]').forEach((menuEl) => {
+          if (menuEl !== contextMenu && menuEl.matches(':popover-open') && typeof menuEl.hidePopover === 'function') {
+            menuEl.hidePopover()
+          }
+        })
+      } else {
+        document.querySelectorAll('.context-menu[data-open="true"]').forEach((menuEl) => {
+          if (menuEl !== contextMenu) {
+            menuEl.style.display = 'none'
+            menuEl.dataset.open = 'false'
+          }
+        })
+      }
+      const buttonRect = target.getBoundingClientRect()
+      const menuRect = getMenuDimensions(contextMenu)
+      const viewportPadding = 12
+      let left = Math.min(buttonRect.left, window.innerWidth - menuRect.width - viewportPadding)
+      left = Math.max(viewportPadding, left)
+      let top = buttonRect.bottom + 6
+      if (top + menuRect.height + viewportPadding > window.innerHeight) {
+        top = buttonRect.top - menuRect.height - 6
+      }
+      const maxTop = Math.max(viewportPadding, window.innerHeight - menuRect.height - viewportPadding)
+      top = Math.min(Math.max(viewportPadding, top), maxTop)
+      if (hasNativePopover) {
+        contextMenu.style.position = 'fixed'
+        contextMenu.style.left = left + 'px'
+        contextMenu.style.top = top + 'px'
+        contextMenu.style.right = 'auto'
+        contextMenu.style.bottom = 'auto'
+        contextMenu.togglePopover()
+      } else {
+        const btnContainer = target.closest('.menu-btns')
+        if (!btnContainer) {
+          return
+        }
+        const containerRect = btnContainer.getBoundingClientRect()
+        contextMenu.style.left = Math.max(0, left - containerRect.left) + 'px'
+        contextMenu.style.top = top - containerRect.top + 'px'
+        contextMenu.style.right = 'auto'
+        contextMenu.style.bottom = 'auto'
+        contextMenu.style.display = 'block'
+        contextMenu.dataset.open = 'true'
+      }
+    }
     return
   }
-
   if (e.target.classList.contains("move-menu")) {
     target = e.target
   } else {

package/server/views/init/index.ejs

@@ -1954,15 +1954,7 @@ body.dark .ace-editor {
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
-  <% if (typeof peer_qr !== 'undefined' && peer_qr) { %>
-  <div class='qr' style='padding:12px 10px; text-align:center;'>
-    <a href="<%=peer_url%>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
-      <img src="<%=peer_qr%>" alt="Open <%=peer_url%>" style="width:128px; height:128px; image-rendering: pixelated;"/>
-      <div class='caption'>Scan to open</div>
-      <div class='caption' style='font-size:10px; opacity:0.7;'><%=peer_url%></div>
-    </a>
-  </div>
-  <% } %>
+  <%- include('partials/peer_access_points', { peer_access_points, peer_url, peer_qr }) %>
 </aside>
 </main>
 <div id='terminal-container' class='hidden'>

package/server/views/net.ejs

@@ -464,6 +464,37 @@ body.dark .net {
   display: block;
   background: none;
 }
+.access-point-list {
+  list-style: none;
+  padding: 0;
+  margin: 6px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.access-point-list li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+.access-point-list .badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  font-size: 10px;
+  border-radius: 999px;
+  background: rgba(127, 91, 243, 0.12);
+  color: rgba(127, 91, 243, 0.9);
+  border: 1px solid rgba(127, 91, 243, 0.3);
+  text-transform: uppercase;
+}
+body.dark .access-point-list .badge {
+  background: rgba(127, 91, 243, 0.2);
+  color: #f0e9ff;
+  border-color: rgba(127, 91, 243, 0.4);
+}
 .net .mark {
   background: rgba(0,0,0,0.9);
   border-radius: 3px;
@@ -666,7 +697,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 <h2><i class="fa-solid fa-wifi"></i> Local network</h2><div>accessible from any machine on the local network</div>
               </div>
               <div class='section'>
-                <h2><i class="fa-solid fa-podcast"></i> Peer</h2><div>accessible from any pinokio peer on the local network <a class='explain' data-type='peer'>What is a "Peer"?</a></div>
+                <h2><i class="fa-solid fa-podcast"></i> Peer</h2><div>accessible from any pinokio peer on the local network</a></div>
               </div>
             </div>
           </div>
@@ -722,7 +753,45 @@ document.addEventListener('DOMContentLoaded', function() {
                   <% } %>
                 </div>
                 <div class='section'>
-                  <% if (item.external_ip) { %>
+                  <%
+                    const directHosts = []
+                    if (Array.isArray(item.external_hosts)) {
+                      const seenHosts = new Set()
+                      item.external_hosts.forEach((hostEntry) => {
+                        if (!hostEntry || !hostEntry.url) {
+                          return
+                        }
+                        const key = hostEntry.url.toLowerCase()
+                        if (seenHosts.has(key)) {
+                          return
+                        }
+                        seenHosts.add(key)
+                        const scope = (hostEntry.scope || '').toLowerCase()
+                        let badge = ''
+                        if (scope === 'lan') badge = 'LAN'
+                        else if (scope === 'cgnat') badge = 'VPN'
+                        else if (scope === 'public') badge = 'Public'
+                        else if (scope === 'loopback') badge = 'Local'
+                        else if (scope === 'linklocal') badge = 'Link-Local'
+                        directHosts.push({
+                          url: hostEntry.url,
+                          badge
+                        })
+                      })
+                    }
+                  %>
+                  <% if (directHosts.length > 0) { %>
+                    <ul class="access-point-list">
+                      <% directHosts.forEach((point) => { %>
+                        <li>
+                          <a class='net' target="_blank" href="<%= point.url %>"><%= point.url %></a>
+                          <% if (point.badge) { %>
+                            <span class="badge"><%= point.badge %></span>
+                          <% } %>
+                        </li>
+                      <% }) %>
+                    </ul>
+                  <% } else if (item.external_ip) { %>
                     <a class='net' target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
                   <% } %>
                 </div>
@@ -937,15 +1006,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
-  <% if (typeof peer_qr !== 'undefined' && peer_qr) { %>
-  <div class='qr' style='padding:12px 10px; text-align:center;'>
-    <a href="<%=peer_url%>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
-      <img src="<%=peer_qr%>" alt="Open <%=peer_url%>" style="width:128px; height:128px; image-rendering: pixelated;"/>
-      <div class='caption'>Scan to open</div>
-      <div class='caption' style='font-size:10px; opacity:0.7;'><%=peer_url%></div>
-    </a>
-  </div>
-  <% } %>
+  <%- include('partials/peer_access_points', { peer_access_points, peer_url, peer_qr }) %>
 </aside>
 </main>
 <script>

package/server/views/network.ejs

@@ -1185,16 +1185,8 @@ document.addEventListener('DOMContentLoaded', function() {
     <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
     <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
     <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
-    <% if (typeof peer_qr !== 'undefined' && peer_qr) { %>
-    <div class='qr' style='padding:12px 10px; text-align:center;'>
-      <a href="<%=peer_url%>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
-        <img src="<%=peer_qr%>" alt="Open <%=peer_url%>" style="width:128px; height:128px; image-rendering: pixelated;"/>
-        <div class='caption'>Scan to open</div>
-        <div class='caption' style='font-size:10px; opacity:0.7;'><%=peer_url%></div>
-      </a>
-    </div>
-    <% } %>
-  </aside>
+  <%- include('partials/peer_access_points', { peer_access_points, peer_url, peer_qr }) %>
+</aside>
 </main>
 <script>
 let interval

package/server/views/partials/peer_access_points.ejs

@@ -0,0 +1,27 @@
+<%
+  const accessPoints = Array.isArray(peer_access_points) ? peer_access_points : []
+  const hasAccessPoints = accessPoints.length > 0
+%>
+<% if (hasAccessPoints) { %>
+  <% accessPoints.forEach((point) => { %>
+    <% if (!point || !point.url) { return } %>
+    <% const qrSrc = point.qr || (`/qr?data=${encodeURIComponent(point.url)}&s=4&m=0`) %>
+    <div class="qr">
+      <a href="<%= point.url %>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
+        <img src="<%= qrSrc %>" alt="Open <%= point.url %>" style="width:128px; height:128px; image-rendering: pixelated;"/>
+        <div class='caption'>
+          Scan to open<% if (point.scope_label) { %> (<%= point.scope_label %>)<% } %>
+        </div>
+        <div class='caption' style='font-size:10px; opacity:0.7;'><%= point.url %></div>
+      </a>
+    </div>
+  <% }) %>
+<% } else if (typeof peer_qr !== 'undefined' && peer_qr) { %>
+  <div class='qr'>
+    <a href="<%=peer_url%>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
+      <img src="<%=peer_qr%>" alt="Open <%=peer_url%>" style="width:128px; height:128px; image-rendering: pixelated;"/>
+      <div class='caption'>Scan to open</div>
+      <div class='caption' style='font-size:10px; opacity:0.7;'><%=peer_url%></div>
+    </a>
+  </div>
+<% } %>

package/server/views/review.ejs

@@ -948,10 +948,10 @@ body.dark .top-menu .btn2.selected {
 <button class='btn2' id='inspector' data-tippy-content="X-ray 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>
-  <a class="btn2 <%=type === 'files' ? 'selected' : ''%>" href="/p/<%=name%>/files"><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>
+  <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 === 'files' ? 'selected' : ''%>" href="/p/<%=name%>/files"><div><i class="fa-solid fa-file-lines"></i></div><div class='caption'>Files</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>
 </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/screenshots.ejs

@@ -776,15 +776,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
-  <% if (typeof peer_qr !== 'undefined' && peer_qr) { %>
-  <div class='qr' style='padding:12px 10px; text-align:center;'>
-    <a href="<%=peer_url%>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
-      <img src="<%=peer_qr%>" alt="Open <%=peer_url%>" style="width:128px; height:128px; image-rendering: pixelated;"/>
-      <div class='caption'>Scan to open</div>
-      <div class='caption' style='font-size:10px; opacity:0.7;'><%=peer_url%></div>
-    </a>
-  </div>
-  <% } %>
+  <%- include('partials/peer_access_points', { peer_access_points, peer_url, peer_qr }) %>
 </aside>
 </main>
 <script>

package/server/views/settings.ejs

@@ -571,15 +571,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
   <a class='tab selected' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
-  <% if (typeof peer_qr !== 'undefined' && peer_qr) { %>
-  <div class='qr' style='padding:12px 10px; text-align:center;'>
-    <a href="<%=peer_url%>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
-      <img src="<%=peer_qr%>" alt="Open <%=peer_url%>" style="width:128px; height:128px; image-rendering: pixelated;"/>
-      <div class='caption'>Scan to open</div>
-      <div class='caption' style='font-size:10px; opacity:0.7;'><%=peer_url%></div>
-    </a>
-  </div>
-  <% } %>
+  <%- include('partials/peer_access_points', { peer_access_points, peer_url, peer_qr }) %>
 </aside>
 </main>
 <script>

package/server/views/shell.ejs

@@ -1493,6 +1493,9 @@ document.addEventListener("DOMContentLoaded", async () => {
           this.term.focus()
         }, true)
         term.attachCustomKeyEventHandler(event => {
+          if (event.type && event.type.toLowerCase() !== 'keydown') {
+            return true
+          }
           if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
             const selection = term.getSelection();
             if (selection) {

package/server/views/terminal.ejs

@@ -1532,6 +1532,9 @@ document.addEventListener("DOMContentLoaded", async () => {
           this.term.focus()
         }, true)
         term.attachCustomKeyEventHandler(event => {
+          if (event.type && event.type.toLowerCase() !== 'keydown') {
+            return true
+          }
           if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
             const selection = term.getSelection();
             if (selection) {

package/server/views/tools.ejs

@@ -1275,15 +1275,7 @@ document.addEventListener('DOMContentLoaded', function() {
   <a class='tab selected' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
   <a class='tab' href="/agents"><i class="fa-solid fa-robot"></i><div class='caption'>Agents</div></a>
   <a class='tab' href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
-  <% if (typeof peer_qr !== 'undefined' && peer_qr) { %>
-  <div class='qr' style='padding:12px 10px; text-align:center;'>
-    <a href="<%=peer_url%>" target="_blank" style="text-decoration:none; color:inherit; display:block;">
-      <img src="<%=peer_qr%>" alt="Open <%=peer_url%>" style="width:128px; height:128px; image-rendering: pixelated;"/>
-      <div class='caption'>Scan to open</div>
-      <div class='caption' style='font-size:10px; opacity:0.7;'><%=peer_url%></div>
-    </a>
-  </div>
-  <% } %>
+  <%- include('partials/peer_access_points', { peer_access_points, peer_url, peer_qr }) %>
 </aside>
 </main>
 <script>