pinokiod 3.52.0 → 3.53.0

package/server/public/urldropdown.css

@@ -12,7 +12,7 @@
   border-top: none;
   border-radius: 0 0 5px 5px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  max-height: 300px;
+  max-height: 500px;
   overflow-y: auto;
   z-index: 1000;
   display: none;
@@ -25,7 +25,7 @@ body.dark .url-dropdown {
   box-shadow: 0 2px 8px rgba(255,255,255,0.1);
 }
 .url-dropdown-item {
-  padding: 12px 16px;
+  padding: 8px 12px;
   cursor: pointer;
   border-bottom: 1px solid #eee;
   display: flex;
@@ -48,6 +48,8 @@ body.dark .url-dropdown-item:hover {
   font-weight: bold;
   color: #2d3748;
   font-size: 14px;
+  display: flex;
+  align-items: center;
 }
 body.dark .url-dropdown-name {
   color: #e2e8f0;
@@ -133,7 +135,7 @@ body.minimized header h1 .mobile-link-button {
 }
 .url-modal-content {
   background: white;
-  padding: 20px;
+  padding: 50px 10px 10px;
   border-radius: 10px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   width: 90%;
@@ -172,3 +174,93 @@ body.dark .url-modal-input {
   border-color: rgba(255, 255, 255, 0.2);
   color: white;
 }
+
+/* Host categorization styles */
+.url-dropdown-host-header {
+  background: royalblue;
+  font-weight: bold;
+  font-size: 18px;
+  color: white;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+body.dark .url-dropdown-host-header {
+  background: royalblue;
+  color: white;
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.url-dropdown-host-header i {
+  width: 18px;
+  text-align: center;
+}
+
+.host-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: #edf2f7;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 18px;
+  color: #4a5568;
+}
+
+body.dark .host-badge {
+  background: rgba(255, 255, 255, 0.1);
+  color: #cbd5e0;
+}
+
+.host-name {
+  font-weight: bold;
+  flex-grow: 1;
+  text-align: right;
+  padding: 5px;
+  font-size: 14px;
+  color: white;
+}
+
+.host-meta {
+  padding: 5px 10px;
+  color: white;
+}
+.host-arch {
+  color: white;
+  font-size: 14px;
+}
+.status-circle {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.status-circle.online {
+  background-color: yellowgreen;
+}
+
+.status-circle.offline {
+  background-color: silver;
+}
+
+.peer-network-button:hover {
+  color: white !important;
+}
+.peer-network-button {
+  background: royalblue;
+  color: white;
+  border: none;
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+
+body.dark .host-arch {
+  color: #a0aec0;
+}

package/server/public/urldropdown.js

@@ -55,6 +55,31 @@ function initUrlDropdown(config = {}) {
     }
   });
 
+  if (document.querySelector(".urlbar")) {
+    document.querySelector(".urlbar").addEventListener("submit", (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      let el = e.target.querySelector("input[type=url]")
+      let val = el.value
+      let type = el.getAttribute("data-host-type")
+      if (type === "local") {
+        let redirect_uri = "/container?url=" + val
+        location.href = redirect_uri
+      } else {
+        let u = new URL(val)
+        if (String(u.port) === "42000") {
+          // pinokio app => open the url itself
+          window.open(val, "_blank")
+        } else {
+          // other servers => open in pinokio redirect frame
+          let redirect_uri = "/container?url=" + val
+          location.href = redirect_uri
+        }
+      }
+    })
+  }
+
+
   function initializeInputValue() {
     if (options.clearBehavior === 'empty') {
       urlInput.value = '';
@@ -140,6 +165,111 @@ function initUrlDropdown(config = {}) {
     dropdown.style.display = 'none';
   }
 
+  function createHostBadge(host) {
+    if (!host || !host.platform) return '';
+    
+    // Get platform icon
+    let platformIcon = '';
+    switch (host.platform) {
+      case 'darwin':
+        platformIcon = 'fa-brands fa-apple';
+        break;
+      case 'win32':
+        platformIcon = 'fa-brands fa-windows';
+        break;
+      case 'linux':
+        platformIcon = 'fa-brands fa-linux';
+        break;
+      default:
+        platformIcon = 'fa-solid fa-desktop';
+        break;
+    }
+    
+    // Create badge HTML
+    return `
+      <span class="host-badge">
+        <i class="${platformIcon}"></i>
+        <span class="host-name">${escapeHtml(host.name)}</span>
+      </span>
+    `;
+  }
+
+  function groupProcessesByHost(processes) {
+    const grouped = {};
+    
+    processes.forEach(process => {
+      // Create a normalized host key based only on name for grouping
+      const hostKey = process.host ? process.host.name : 'Unknown';
+      
+      if (!grouped[hostKey]) {
+        grouped[hostKey] = {
+          host: process.host || { name: 'Unknown', platform: 'unknown', arch: 'unknown' },
+          processes: [],
+          isLocal: false
+        };
+      }
+      
+      // Mark as local if any process from this host is local
+      if (process.host.local === true) {
+        grouped[hostKey].isLocal = true;
+      }
+      
+      grouped[hostKey].processes.push(process);
+    });
+    
+    // Sort host keys: local host first, then alphabetically
+    return Object.keys(grouped)
+      .sort((a, b) => {
+        const aIsLocal = grouped[a].isLocal;
+        const bIsLocal = grouped[b].isLocal;
+        
+        // Local host always comes first
+        if (aIsLocal && !bIsLocal) return 1;
+        if (!aIsLocal && bIsLocal) return -1;
+        
+        // Both local or both remote - sort alphabetically
+        return a.localeCompare(b);
+      })
+      .reduce((sortedGrouped, hostKey) => {
+        sortedGrouped[hostKey] = grouped[hostKey];
+        return sortedGrouped;
+      }, {});
+  }
+
+  function createHostHeader(host, isLocal = false) {
+    if (!host) return '';
+    
+    // Get platform icon
+    let platformIcon = '';
+    switch (host.platform) {
+      case 'darwin':
+        platformIcon = 'fa-brands fa-apple';
+        break;
+      case 'win32':
+        platformIcon = 'fa-brands fa-windows';
+        break;
+      case 'linux':
+        platformIcon = 'fa-brands fa-linux';
+        break;
+      default:
+        platformIcon = 'fa-solid fa-desktop';
+        break;
+    }
+    
+    console.log({ isLocal, host })
+    const hostName = isLocal ? `${host.name} (This Machine)` : `${host.name} (Peer)`;
+    
+    return `
+      <div class="url-dropdown-host-header">
+        <span class='host-meta'>
+          <i class="${platformIcon}"></i>
+          <span class="host-arch">${escapeHtml(host.arch)}</span>
+        </span>
+        <span class="host-name">${escapeHtml(hostName)}</span>
+      </div>
+    `;
+  }
+
   function populateDropdown(processes) {
     if (processes.length === 0) {
       const query = urlInput.value.toLowerCase().trim();
@@ -150,28 +280,76 @@ function initUrlDropdown(config = {}) {
       return;
     }
 
-    const items = processes.map(process => {
-      const url = `http://${process.ip}`;
-      return `
-        <div class="url-dropdown-item" data-url="${url}">
-          <div class="url-dropdown-name">${escapeHtml(process.name)}</div>
-          <div class="url-dropdown-url">${escapeHtml(url)}</div>
-        </div>
-      `;
-    }).join('');
+    // Group processes by host
+    const groupedProcesses = groupProcessesByHost(processes);
+    
+    let html = '';
+    Object.keys(groupedProcesses).forEach(hostKey => {
+      const hostData = groupedProcesses[hostKey];
+      const hostInfo = hostData.host;
+      const processes = hostData.processes;
+      const isLocal = hostData.isLocal;
+      
+      // Add host header
+      html += createHostHeader(hostInfo, isLocal);
+      
+      // Add processes for this host
+      processes.forEach(process => {
+        const onlineIndicator = process.online ? 
+          '<div class="status-circle online"></div>' : 
+          '<div class="status-circle offline"></div>';
+        
+        if (process.ip === null || process.ip === undefined) {
+          // Non-selectable item with "turn on peer network" button
+          const networkUrl = `http://${process.host.ip}:42000/network`;
+          html += `
+            <div class="url-dropdown-item non-selectable">
+              <div class="url-dropdown-name">
+                ${onlineIndicator}
+                <button class="peer-network-button" data-network-url="${networkUrl}"><i class="fa-solid fa-toggle-on"></i> Turn on peer network</button>
+                ${escapeHtml(process.name)}
+              </div>
+            </div>
+          `;
+        } else {
+          // Normal selectable item
+          const url = `http://${process.ip}`;
+          html += `
+            <div class="url-dropdown-item" data-url="${url}" data-host-type="${process.host.local ? "local" : "remote"}">
+              <div class="url-dropdown-name">
+                ${onlineIndicator}
+                ${escapeHtml(process.name)}
+              </div>
+              <div class="url-dropdown-url">${escapeHtml(url)}</div>
+            </div>
+          `;
+        }
+      });
+    });
 
-    dropdown.innerHTML = items;
+    dropdown.innerHTML = html;
 
     // Add click handlers to dropdown items
-    dropdown.querySelectorAll('.url-dropdown-item').forEach(item => {
+    dropdown.querySelectorAll('.url-dropdown-item:not(.non-selectable)').forEach(item => {
       item.addEventListener('click', function() {
         const url = this.getAttribute('data-url');
+        const type = this.getAttribute('data-host-type');
         urlInput.value = url;
+        urlInput.setAttribute("data-host-type", type)
         hideDropdown();
         // Submit the form
         urlInput.closest('form').dispatchEvent(new Event('submit'));
       });
     });
+
+    // Add click handlers to peer network buttons
+    dropdown.querySelectorAll('.peer-network-button').forEach(button => {
+      button.addEventListener('click', function(e) {
+        e.stopPropagation();
+        const networkUrl = this.getAttribute('data-network-url');
+        window.open(networkUrl, '_blank');
+      });
+    });
   }
 
   // Utility function to escape HTML
@@ -330,19 +508,54 @@ function initUrlDropdown(config = {}) {
       return;
     }
 
-    const items = processes.map(process => {
-      const url = `http://${process.ip}`;
-      return `
-        <div class="url-dropdown-item" data-url="${url}">
-          <div class="url-dropdown-name">${escapeHtml(process.name)}</div>
-          <div class="url-dropdown-url">${escapeHtml(url)}</div>
-        </div>
-      `;
-    }).join('');
+    // Group processes by host
+    const groupedProcesses = groupProcessesByHost(processes);
+    
+    let html = '';
+    Object.keys(groupedProcesses).forEach(hostKey => {
+      const hostData = groupedProcesses[hostKey];
+      const hostInfo = hostData.host;
+      const processes = hostData.processes;
+      const isLocal = hostData.isLocal;
+      
+      // Add host header
+      html += createHostHeader(hostInfo, isLocal);
+      
+      // Add processes for this host
+      processes.forEach(process => {
+        const onlineIndicator = process.online ? 
+          '<div class="status-circle online"></div>' : 
+          '<div class="status-circle offline"></div>';
+        
+        if (process.ip === null || process.ip === undefined) {
+          // Non-selectable item with "turn on peer network" button
+          const networkUrl = `http://${process.host.ip}:42000/network`;
+          html += `
+            <div class="url-dropdown-item non-selectable">
+              <div class="url-dropdown-name">
+                ${onlineIndicator}
+                ${escapeHtml(process.name)}
+              </div>
+              <button class="peer-network-button" data-network-url="${networkUrl}"><i class="fa-solid fa-toggle-on"></i> Turn on peer network</button>
+            </div>
+          `;
+        } else {
+          // Normal selectable item
+          const url = `http://${process.ip}`;
+          html += `
+            <div class="url-dropdown-item" data-url="${url}" data-host-type="${process.host.local ? "local" : "remote"}">
+              ${onlineIndicator}
+              <div class="url-dropdown-name">${escapeHtml(process.name)}</div>
+              <div class="url-dropdown-url">${escapeHtml(url)}</div>
+            </div>
+          `;
+        }
+      });
+    });
 
-    modalDropdown.innerHTML = items;
+    modalDropdown.innerHTML = html;
 
-    modalDropdown.querySelectorAll('.url-dropdown-item').forEach(item => {
+    modalDropdown.querySelectorAll('.url-dropdown-item:not(.non-selectable)').forEach(item => {
       item.addEventListener('click', function() {
         const url = this.getAttribute('data-url');
         modalInput.value = url;
@@ -351,6 +564,15 @@ function initUrlDropdown(config = {}) {
         closeMobileModal();
       });
     });
+
+    // Add click handlers to peer network buttons in modal
+    modalDropdown.querySelectorAll('.peer-network-button').forEach(button => {
+      button.addEventListener('click', function(e) {
+        e.stopPropagation();
+        const networkUrl = this.getAttribute('data-network-url');
+        window.open(networkUrl, '_blank');
+      });
+    });
   }
   
   // Set up mobile button click handler
@@ -393,4 +615,4 @@ if (document.readyState === 'loading') {
   });
 } else {
   // DOM is already loaded, templates can initialize immediately
-}
+}

package/server/views/app.ejs

@@ -1833,8 +1833,6 @@ body.minimized #fs-status {
         <div class='app-info-card'>
           <% if (config.icon) { %>
             <img src="<%=config.icon%>" onerror="this.src='/pinokio-black.png'"/>
-          <% } else { %>
-            <i class="fa-regular fa-circle-dot"></i>
           <% } %>
           <div class='app-info-container'>
             <div class='app-info-title'><%=config.title%></div>

package/server/views/connect.ejs

@@ -749,6 +749,9 @@ body.dark .profile td {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }

package/server/views/container.ejs

@@ -300,6 +300,7 @@ iframe {
 }
 */
 </style>
+<script src="/window_storage.js"></script>
 <script src="/popper.min.js"></script>
 <script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
@@ -363,7 +364,7 @@ iframe {
 </button>
 </h1>
 </header>
-<iframe src="<%=src%>"></iframe>
+<iframe class='mainframe' src="<%=src%>"></iframe>
 <script src="/urldropdown.js"></script>
 <script>
 // Initialize URL Dropdown with restore behavior

package/server/views/index.ejs

@@ -333,6 +333,9 @@ body.dark aside .current.selected {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }

package/server/views/init/index.ejs

@@ -1421,6 +1421,9 @@ body.dark .ace-editor {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }

package/server/views/net.ejs

@@ -280,7 +280,7 @@ body.dark .open-menu, body.dark .browse {
 }
 .section-container {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
+  grid-template-columns: repeat(2, 1fr); /* Three equal columns */
   /*
   grid-template-columns: repeat(3, minmax(0, 1fr));
   */
@@ -445,6 +445,9 @@ body.dark .net .mark {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }
@@ -608,7 +611,9 @@ document.addEventListener('DOMContentLoaded', function() {
           <h3>
             <div class='item-icon'>
               <% if (item.icon) { %>
-                <img src="<%=item.icon%>">
+                <div class='placeholder-icon'>
+                  <img src="<%=item.icon%>" onerror="this.src='/pinokio-black.png'"/>
+                </div>
               <% } else { %>
                 <div class='placeholder-icon'>
                   <i class="fa-solid fa-database"></i>
@@ -619,31 +624,25 @@ document.addEventListener('DOMContentLoaded', function() {
               <div class='title'><i class="fa-solid fa-circle"></i><span><%=item.title || item.name%></span></div>
               <div class='grid-3'>
                 <div class='section'>
-                  <% if (item.internal_router.length > 0) { %>
-                    <% item.internal_router.forEach((domain) => { %>
-                      <a class='net' target="_blank" href="https://<%=domain%>"><span class='mark'>HTTPS</span><span><%=domain%></span></a>
-                    <% }) %>
-                  <% } else { %>
-                    <a class='net' target="_blank" href="http://localhost:<%=item.port%>"><span class='mark'>HTTP</span><span>localhost:<%=item.port%></span></a>
+                  <% item.internal_router.forEach((domain) => { %>
+                    <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                  <% }) %>
+                  <a class='net' target="_blank" href="http://localhost:<%=item.port%>">http://localhost:<%=item.port%></a>
+                </div>
+                <div class='section'>
+                  <% if (item.external_ip) { %>
+                    <a class='net' target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
                   <% } %>
                 </div>
-                <% if (item.external_router.length > 0) { %>
-                  <div class='section'>
-                    <% item.external_router.forEach((domain) => { %>
-                      <a class='net' target="_blank" href="https://<%=domain%>"><span class='mark'>HTTPS</span><span><%=domain%></span></a>
-                    <% }) %>
-                  </div>
-                <% } else { %>
-                  <div class='section'>
-                    <% if (item.external_ip) { %>
-                      <a class='net' target="_blank" href="http://<%=item.external_ip%>"><span class='mark'>HTTP</span><span><%=item.external_ip%></span></a>
-                    <% } %>
-                  </div>
-                <% } %>
+                <div class='section'>
+                  <% item.external_router.forEach((domain) => { %>
+                    <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                  <% }) %>
+                </div>
               </div>
             </div>
-          </div>
-        </h3>
+          </h3>
+        </div>
       <% }) %>
     <% } else { %>
       <div class='section-container'>
@@ -653,7 +652,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <div class='col'>
                 <div class='grid-1'>
                   <div class='section'>
-                    <h2>Online</h2><div>Use these URLs to access the online remote servers.</div>
+                    <h2><i class="fa-solid fa-plug-circle-check"></i> Online</h2><div>Use these URLs to access the online remote servers.</div>
                   </div>
                 </div>
               </div>
@@ -664,7 +663,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <h3>
                 <div class='item-icon'>
                   <% if (item[`${protocol}_icon`]) { %>
-                    <img src="<%=item[`${protocol}_icon`]%>">
+                    <img src="<%=item[`${protocol}_icon`]%>" onerror="this.src='/pinokio-black.png'"/>
                   <% } else { %>
                     <div class='placeholder-icon'>
                       <i class="fa-solid fa-database"></i>
@@ -697,7 +696,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <div class='col'>
                 <div class='grid-1'>
                   <div class='section'>
-                    <h2>Installed</h2><div>Remotely launch the installed apps.</div>
+                    <h2><i class="fa-solid fa-folder-tree"></i> Installed</h2><div>Remotely launch the installed apps.</div>
                   </div>
                 </div>
               </div>
@@ -708,7 +707,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <h3>
                 <div class='item-icon'>
                   <% if (item[`${protocol}_icon`]) { %>
-                    <img src="<%=item[`${protocol}_icon`]%>">
+                    <img src="<%=item[`${protocol}_icon`]%>" onerror="this.src='/pinokio-black.png'"/>
                   <% } else { %>
                     <div class='placeholder-icon'>
                       <i class="fa-solid fa-database"></i>
@@ -734,6 +733,7 @@ document.addEventListener('DOMContentLoaded', function() {
             </h3>
           <% }) %>
         </div>
+        <!--
         <div class='section-col'>
           <div class='section-header'>
             <h3>
@@ -770,6 +770,7 @@ document.addEventListener('DOMContentLoaded', function() {
             </h3>
           <% }) %>
         </div>
+        -->
       </div>
     <% } %>
   </div>
@@ -831,6 +832,7 @@ let filteredCount = list.length
 let filteredBtnsCount = 0
 
 const renderSearch = () => {
+  console.log("renderSearch")
   let target = document.querySelector("form input[type=search]")
   let result
   if (target.value.trim().length === 0) {
@@ -841,6 +843,7 @@ const renderSearch = () => {
     result = search(list, target.value)
   }
   let all = document.querySelectorAll(".line.index")
+  console.log("all", all)
   for(let el of all) {
     el.classList.add("hidden")
     el.classList.remove("selected")