pinokiod 3.153.0 → 3.156.0

package/package.json

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

package/server/index.js

@@ -6742,7 +6742,6 @@ class Server {
         if (preferHttps) {
           httpsHosts = resolveHttpsHosts(item)
         }
-        console.log("httpsHosts", httpsHosts)
         const httpsUrls = httpsHosts.map((host) => {
           if (!host) {
             return null
@@ -6753,7 +6752,6 @@ class Server {
           }
           return `https://${trimmed}`
         }).filter(Boolean)
-        console.log("httpsUrls", httpsUrls)
 
         const preferredHttpsUrl = preferFriendlyHost(httpsHosts)
         const displayHttpsUrl = preferredHttpsUrl
@@ -6783,6 +6781,160 @@ class Server {
       })
 
       this.add_extra_urls(info)
+
+      const toArray = (value) => {
+        if (!value) return []
+        return Array.isArray(value) ? value.filter(Boolean) : [value].filter(Boolean)
+      }
+
+      const uniqueUrls = (urls) => {
+        const seen = new Set()
+        const result = []
+        for (const url of urls) {
+          if (typeof url !== 'string') continue
+          const trimmed = url.trim()
+          if (!trimmed || seen.has(trimmed)) {
+            continue
+          }
+          seen.add(trimmed)
+          result.push(trimmed)
+        }
+        return result
+      }
+
+      const isLoopbackHost = (url) => {
+        try {
+          const hostname = new URL(url).hostname.toLowerCase()
+          return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1'
+        } catch (error) {
+          return false
+        }
+      }
+
+      const stripPeerFromHostname = (url, peerName) => {
+        if (!url || !peerName) {
+          return url
+        }
+        try {
+          const parsed = new URL(url)
+          const suffix = `.${peerName}.localhost`
+          if (parsed.hostname.toLowerCase().endsWith(suffix.toLowerCase())) {
+            const prefix = parsed.hostname.slice(0, -suffix.length)
+            if (!prefix) {
+              return url
+            }
+            const sanitizedHostname = `${prefix}.localhost`
+            const portPart = parsed.port ? `:${parsed.port}` : ''
+            return `${parsed.protocol}//${sanitizedHostname}${portPart}${parsed.pathname}${parsed.search}${parsed.hash}`
+          }
+          return url
+        } catch (error) {
+          return url
+        }
+      }
+
+      const urlContainsPeerName = (url, peerName) => {
+        if (!url || !peerName) {
+          return false
+        }
+        try {
+          const hostname = new URL(url).hostname.toLowerCase()
+          const needle = `.${peerName.toLowerCase()}.`
+          return hostname.includes(needle)
+        } catch (error) {
+          return false
+        }
+      }
+
+      const selectPrimaryUrl = (entry) => {
+        const hostMeta = entry.host || {}
+        const isLocalHost = hostMeta.local === true
+        const peerName = typeof hostMeta.name === 'string' ? hostMeta.name : ''
+
+        const httpCandidates = toArray(entry.urls && entry.urls.http)
+        const httpsCandidates = toArray(entry.urls && entry.urls.https)
+
+        let sanitizedHttpsCandidates = httpsCandidates.slice()
+        if (preferHttps && isLocalHost) {
+          sanitizedHttpsCandidates = uniqueUrls(sanitizedHttpsCandidates.map((url) => {
+            return stripPeerFromHostname(url, peerName)
+          }))
+        }
+
+        let primaryUrl
+
+        if (preferHttps) {
+          let candidates = sanitizedHttpsCandidates.slice()
+
+          if (!isLocalHost && peerName) {
+            const withPeer = candidates.filter((url) => urlContainsPeerName(url, peerName))
+            if (withPeer.length > 0) {
+              candidates = withPeer
+            }
+          }
+
+          primaryUrl = candidates[0]
+
+          if (!primaryUrl && httpCandidates.length > 0) {
+            primaryUrl = httpCandidates[0]
+          }
+        } else {
+          let candidates = httpCandidates.slice()
+
+          if (isLocalHost) {
+            const loopbackCandidate = candidates.find((url) => isLoopbackHost(url))
+            if (loopbackCandidate) {
+              candidates = [loopbackCandidate]
+            }
+          } else {
+            const nonLoopback = candidates.filter((url) => !isLoopbackHost(url))
+            if (nonLoopback.length > 0) {
+              candidates = nonLoopback
+            }
+          }
+
+          primaryUrl = candidates[0]
+
+          if (!primaryUrl) {
+            let httpsFallback = sanitizedHttpsCandidates.slice()
+
+            if (isLocalHost) {
+              httpsFallback = uniqueUrls(httpsFallback.map((url) => stripPeerFromHostname(url, peerName)))
+            } else if (peerName) {
+              const withPeer = httpsFallback.filter((url) => urlContainsPeerName(url, peerName))
+              if (withPeer.length > 0) {
+                httpsFallback = withPeer
+              }
+            }
+
+            primaryUrl = httpsFallback[0]
+          }
+        }
+
+        if (!primaryUrl) {
+          primaryUrl = entry.url || httpCandidates[0] || sanitizedHttpsCandidates[0] || httpsCandidates[0] || null
+        }
+
+        if (primaryUrl) {
+          entry.url = primaryUrl
+          entry.protocol = primaryUrl.startsWith('https://') ? 'https' : 'http'
+
+          entry.urls = {
+            http: primaryUrl.startsWith('http://') ? [primaryUrl] : [],
+            https: primaryUrl.startsWith('https://') ? [primaryUrl] : []
+          }
+        } else {
+          entry.urls = {
+            http: [],
+            https: []
+          }
+        }
+      }
+
+      for (const entry of info) {
+        selectPrimaryUrl(entry)
+      }
+
       res.json({
         info
       })

package/server/public/style.css

@@ -812,6 +812,7 @@ form.search .btn.clone {
 }
 
 body {
+  background: white;
   height: 100%;
   box-sizing: border-box;
   margin: 0;
@@ -2449,7 +2450,8 @@ body.dark .mode-selector .btn2.selected {
   }
   main,
   iframe.mainframe {
-    padding-left: 55px;
+    margin-left: 55px;
+    width: calc(100% - 55px);
   }
   main .container {
     margin-left: 10px !important;

package/server/public/urldropdown.css

@@ -93,68 +93,34 @@ body.dark .url-dropdown-name {
 .url-dropdown-url {
   color: #718096;
   font-size: 12px;
-}
-body.dark .url-dropdown-url {
-  color: #a0aec0;
-}
-.url-dropdown-url-list {
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.url-chip {
-  display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  border: 1px solid #e2e8f0;
-  background: #f8fafc;
-  color: #2d3748;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.15s ease, border-color 0.15s ease;
-}
-.url-chip:hover {
-  background: #edf2f7;
-  border-color: #cbd5f5;
-}
-body.dark .url-chip {
-  border-color: rgba(255,255,255,0.15);
-  background: rgba(255,255,255,0.06);
-  color: #e2e8f0;
+  gap: 8px;
 }
-body.dark .url-chip:hover {
-  background: rgba(255,255,255,0.1);
-  border-color: rgba(255,255,255,0.22);
+body.dark .url-dropdown-url {
+  color: #a0aec0;
 }
-.url-chip .chip-mark {
+.url-scheme {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  padding: 2px 4px;
+  padding: 2px 6px;
   border-radius: 4px;
+  background: rgba(237, 137, 54, 0.18);
+  color: #9c4221;
 }
-.url-chip-https .chip-mark {
+.url-scheme.https {
   background: rgba(72, 187, 120, 0.18);
   color: #276749;
 }
-body.dark .url-chip-https .chip-mark {
-  background: rgba(72, 187, 120, 0.25);
-  color: #9ae6b4;
-}
-.url-chip-http .chip-mark {
-  background: rgba(237, 137, 54, 0.18);
-  color: #9c4221;
-}
-body.dark .url-chip-http .chip-mark {
+body.dark .url-scheme {
   background: rgba(237, 137, 54, 0.25);
   color: #fbd38d;
 }
-.url-chip .chip-label {
-  font-weight: 500;
+body.dark .url-scheme.https {
+  background: rgba(72, 187, 120, 0.25);
+  color: #9ae6b4;
 }
 .url-dropdown-loading {
   padding: 12px 16px;

package/server/public/urldropdown.js

@@ -82,8 +82,9 @@ function initUrlDropdown(config = {}) {
 
   const getProcessUrls = (process) => {
     const urls = (process && process.urls) || {};
-    const httpUrl = urls.http || (process && process.ip ? `http://${process.ip}` : null);
-    const httpsUrls = toArray(urls.https || (process && process.protocol === 'https' && process.url ? process.url : null))
+    const httpCandidates = toArray(urls.http);
+    const httpsCandidates = toArray(urls.https);
+    const normalizedHttps = httpsCandidates
       .map((value) => {
         if (typeof value !== 'string') return null;
         const trimmed = value.trim();
@@ -94,12 +95,19 @@ function initUrlDropdown(config = {}) {
         return `https://${trimmed}`;
       })
       .filter(Boolean);
-    return { httpUrl, httpsUrls };
+    const httpUrl = httpCandidates.length > 0
+      ? httpCandidates[0]
+      : (process && process.ip ? `http://${process.ip}` : null);
+    return {
+      httpUrl,
+      httpUrls: httpCandidates.filter((value) => typeof value === 'string' && value.trim().length > 0),
+      httpsUrls: normalizedHttps
+    };
   };
 
   const getProcessDisplayUrl = (process) => {
     if (process && typeof process.url === 'string' && process.url.trim().length > 0) {
-      return process.url;
+      return process.url.trim();
     }
     const { httpUrl, httpsUrls } = getProcessUrls(process);
     if (httpsUrls.length > 0) {
@@ -114,11 +122,9 @@ function initUrlDropdown(config = {}) {
     if (display) {
       urls.add(display);
     }
-    const { httpUrl, httpsUrls } = getProcessUrls(process);
-    if (httpUrl) {
-      urls.add(httpUrl);
-    }
-    httpsUrls.forEach((httpsUrl) => urls.add(httpsUrl));
+    const { httpUrls, httpsUrls } = getProcessUrls(process);
+    httpUrls.forEach((value) => urls.add(value));
+    httpsUrls.forEach((value) => urls.add(value));
     return Array.from(urls);
   };
 
@@ -163,43 +169,6 @@ function initUrlDropdown(config = {}) {
     return url.replace(/^https?:\/\//i, '');
   };
 
-  const createUrlChip = (url, type, scheme) => {
-    if (!url) {
-      return '';
-    }
-    const normalizedType = type || 'remote';
-    const classSuffix = scheme === 'HTTPS' ? 'https' : 'http';
-    const label = formatUrlLabel(url);
-    return `
-      <button type="button" class="url-chip url-chip-${classSuffix}" data-url="${escapeAttribute(url)}" data-host-type="${escapeAttribute(normalizedType)}">
-        <span class="chip-mark">${scheme}</span>
-        <span class="chip-label">${escapeHtml(label)}</span>
-      </button>
-    `;
-  };
-
-  const buildProcessUrlList = (process) => {
-    const { httpUrl, httpsUrls } = getProcessUrls(process);
-    const hostType = (process && process.host && process.host.local) ? 'local' : 'remote';
-    const parts = [];
-    const seen = new Set();
-    httpsUrls.forEach((candidate) => {
-      if (!candidate || seen.has(candidate)) {
-        return;
-      }
-      parts.push(createUrlChip(candidate, hostType, 'HTTPS'));
-      seen.add(candidate);
-    });
-    if (httpUrl && !seen.has(httpUrl)) {
-      parts.push(createUrlChip(httpUrl, hostType, 'HTTP'));
-      seen.add(httpUrl);
-    }
-    if (parts.length === 0) {
-      return '';
-    }
-    return `<div class="url-dropdown-url-list">${parts.join('')}</div>`;
-  };
-
   let isDropdownVisible = false;
   let allProcesses = []; // Store all processes for filtering
   let filteredProcesses = []; // Store currently filtered processes
@@ -449,89 +418,103 @@ function initUrlDropdown(config = {}) {
     `;
   }
 
-  function populateDropdown(processes) {
-    const currentUrl = window.location.href;
-    const currentTitle = document.title || 'Current tab';
+  const buildProcessItemHtml = (process) => {
+    const onlineIndicator = process.online ?
+      '<div class="status-circle online"></div>' :
+      '<div class="status-circle offline"></div>';
 
-    let html = '';
-    if (currentUrl) {
-      html += `
-        <div class="url-dropdown-host-header current-tab">
-          <span class="host-name">Current tab</span>
-        </div>
-        <div class="url-dropdown-item" data-url="${escapeAttribute(currentUrl)}" data-host-type="current">
+    if (process.ip === null || process.ip === undefined) {
+      const networkUrl = `http://${process.host.ip}:42000/network`;
+      return `
+        <div class="url-dropdown-item non-selectable">
           <div class="url-dropdown-name">
-            <span>
-              <i class="fa-solid fa-clone"></i>
-              ${escapeHtml(currentTitle)}
-            </span>
+            ${onlineIndicator}
+            <button class="peer-network-button" data-network-url="${escapeAttribute(networkUrl)}"><i class="fa-solid fa-toggle-on"></i> Turn on peer network</button>
+            ${escapeHtml(process.name)}
           </div>
-          <div class="url-dropdown-url">${escapeHtml(currentUrl)}</div>
         </div>
       `;
     }
 
-    if (processes.length === 0) {
-      html += createEmptyStateHtml(getEmptyStateMessage(urlInput));
-      dropdown.innerHTML = html;
-      attachCreateButtonHandler(dropdown, urlInput);
-      attachUrlItemHandlers(dropdown);
-      return;
+    const displayUrl = getProcessDisplayUrl(process);
+    if (!displayUrl) {
+      return '';
     }
+    const selectionType = (process.host && process.host.local) ? 'local' : 'remote';
+    const schemeLabel = displayUrl.startsWith('https://') ? 'HTTPS' : 'HTTP';
+    const formattedUrl = formatUrlLabel(displayUrl);
+    return `
+      <div class="url-dropdown-item" data-url="${escapeAttribute(displayUrl)}" data-host-type="${escapeAttribute(selectionType)}">
+        <div class="url-dropdown-name">
+          ${onlineIndicator}
+          ${escapeHtml(process.name)}
+        </div>
+        <div class="url-dropdown-url">
+          <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
+          <span class="url-address">${escapeHtml(formattedUrl || displayUrl)}</span>
+        </div>
+      </div>
+    `;
+  };
 
-    // Group processes by host
+  const buildHostsHtml = (processes) => {
     const groupedProcesses = groupProcessesByHost(processes);
+    let html = '';
 
     Object.keys(groupedProcesses).forEach(hostKey => {
       const hostData = groupedProcesses[hostKey];
       const hostInfo = hostData.host;
       const hostProcesses = hostData.processes;
       const isLocal = hostData.isLocal;
-      
-      // Add host header
+
       html += createHostHeader(hostInfo, isLocal);
-      
-      // Add processes for this host
-      hostProcesses.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="${escapeAttribute(networkUrl)}"><i class="fa-solid fa-toggle-on"></i> Turn on peer network</button>
-                ${escapeHtml(process.name)}
-              </div>
-            </div>
-          `;
-          return;
-        }
 
-        const displayUrl = getProcessDisplayUrl(process);
-        if (!displayUrl) {
-          return;
-        }
-        const selectionType = (process.host && process.host.local) ? 'local' : 'remote';
-        const urlListHtml = buildProcessUrlList(process);
-        html += `
-          <div class="url-dropdown-item" data-url="${escapeAttribute(displayUrl)}" data-host-type="${escapeAttribute(selectionType)}">
-            <div class="url-dropdown-name">
-              ${onlineIndicator}
-              ${escapeHtml(process.name)}
-            </div>
-            <div class="url-dropdown-url">${escapeHtml(displayUrl)}</div>
-            ${urlListHtml}
-          </div>
-        `;
+      hostProcesses.forEach(process => {
+        html += buildProcessItemHtml(process);
       });
     });
 
-    dropdown.innerHTML = html;
+    return html;
+  };
+
+  const buildDropdownHtml = (processes, { includeCurrentTab = true, inputElement } = {}) => {
+    const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
+    const currentTitle = typeof document !== 'undefined' ? (document.title || 'Current tab') : 'Current tab';
+
+    let html = '';
+    if (includeCurrentTab && currentUrl) {
+      const schemeLabel = currentUrl.startsWith('https://') ? 'HTTPS' : 'HTTP';
+      html += `
+        <div class="url-dropdown-host-header current-tab">
+          <span class="host-name">Current tab</span>
+        </div>
+        <div class="url-dropdown-item" data-url="${escapeAttribute(currentUrl)}" data-host-type="current">
+          <div class="url-dropdown-name">
+            <span>
+              <i class="fa-solid fa-clone"></i>
+              ${escapeHtml(currentTitle)}
+            </span>
+          </div>
+          <div class="url-dropdown-url">
+            <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
+            <span class="url-address">${escapeHtml(formatUrlLabel(currentUrl) || currentUrl)}</span>
+          </div>
+        </div>
+      `;
+    }
+
+    if (!processes || processes.length === 0) {
+      html += createEmptyStateHtml(getEmptyStateMessage(inputElement));
+      return html;
+    }
+
+    html += buildHostsHtml(processes);
+    return html;
+  };
+
+  function populateDropdown(processes) {
+    dropdown.innerHTML = buildDropdownHtml(processes, { includeCurrentTab: true, inputElement: urlInput });
+    attachCreateButtonHandler(dropdown, urlInput);
     attachUrlItemHandlers(dropdown);
   }
 
@@ -548,21 +531,19 @@ function initUrlDropdown(config = {}) {
     openUrlWithType(url, type);
   }
 
-  function attachUrlItemHandlers(container) {
+  function attachUrlItemHandlers(container, options = {}) {
     if (!container) return;
+    const onSelect = typeof options.onSelect === 'function' ? options.onSelect : handleSelection;
+    const selectionOptions = options.selectionOptions || {};
     container.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');
-        handleSelection(url, type);
-      });
-    });
-    container.querySelectorAll('.url-chip').forEach(button => {
-      button.addEventListener('click', function(event) {
-        event.stopPropagation();
-        const url = this.getAttribute('data-url');
-        const type = this.getAttribute('data-host-type');
-        handleSelection(url, type);
+        if (onSelect === handleSelection) {
+          onSelect(url, type, selectionOptions);
+        } else {
+          onSelect(url, type);
+        }
       });
     });
     container.querySelectorAll('.peer-network-button').forEach(button => {
@@ -829,6 +810,9 @@ function initUrlDropdown(config = {}) {
     refs.context = customOptions.context || 'default';
     refs.returnSelection = Boolean(customOptions.awaitSelection);
     refs.resolve = null;
+    if (refs.dropdown) {
+      refs.dropdown._includeCurrent = includeCurrent;
+    }
 
     modalInput.value = initialValue;
     updateConfirmState();
@@ -923,15 +907,28 @@ function initUrlDropdown(config = {}) {
   }
   
   function showModalDropdown(modalDropdown) {
+    if (!modalDropdown || !modalDropdown.parentElement) return;
     modalDropdown.style.display = 'block';
-    
+
+    const includeCurrent = modalDropdown._includeCurrent !== false;
+    modalDropdown._includeCurrent = includeCurrent;
+
+    const render = (processes) => {
+      modalDropdown.innerHTML = buildDropdownHtml(processes, {
+        includeCurrentTab: includeCurrent,
+        inputElement: modalDropdown.parentElement.querySelector('.url-modal-input')
+      });
+      attachCreateButtonHandler(modalDropdown, modalDropdown.parentElement.querySelector('.url-modal-input'));
+      attachUrlItemHandlers(modalDropdown, { onSelect: handleModalSelection });
+    };
+
     if (allProcesses.length > 0) {
-      populateModalDropdown(allProcesses, modalDropdown);
+      render(allProcesses);
       return;
     }
-    
+
     modalDropdown.innerHTML = '<div class="url-dropdown-loading">Loading running processes...</div>';
-    
+
     fetch(options.apiEndpoint)
       .then(response => {
         if (!response.ok) {
@@ -941,7 +938,7 @@ function initUrlDropdown(config = {}) {
       })
       .then(data => {
         allProcesses = data.info || [];
-        populateModalDropdown(allProcesses, modalDropdown);
+        render(allProcesses);
       })
       .catch(error => {
         console.error('Failed to fetch processes:', error);
@@ -971,103 +968,16 @@ function initUrlDropdown(config = {}) {
   
   function populateModalDropdown(processes, modalDropdown) {
     const modalInput = modalDropdown.parentElement.querySelector('.url-modal-input');
-    const currentUrl = window.location.href;
-    const currentTitle = document.title || 'Current tab';
     const overlayRefs = getModalRefs();
     const includeCurrent = overlayRefs?.includeCurrent !== false;
 
-    let html = '';
-
-    if (includeCurrent && currentUrl) {
-      html += `
-        <div class="url-dropdown-host-header current-tab">
-          <span class="host-name">Current tab</span>
-        </div>
-        <div class="url-dropdown-item" data-url="${escapeHtml(currentUrl)}" data-host-type="current">
-          <div class="url-dropdown-name">
-            <i class="fa-solid fa-clone"></i>
-            <span>${escapeHtml(currentTitle)}</span>
-          </div>
-          <div class="url-dropdown-url">${escapeHtml(currentUrl)}</div>
-        </div>
-      `;
-    }
-
-    if (processes.length === 0) {
-      html += createEmptyStateHtml(getEmptyStateMessage(modalInput));
-      modalDropdown.innerHTML = html;
-      attachCreateButtonHandler(modalDropdown, modalInput);
-
-      modalDropdown.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');
-          handleModalSelection(url, type);
-        });
-      });
-      return;
-    }
-
-    const groupedProcesses = groupProcessesByHost(processes);
-    Object.keys(groupedProcesses).forEach(hostKey => {
-      const hostData = groupedProcesses[hostKey];
-      const hostInfo = hostData.host;
-      const hostProcesses = hostData.processes;
-      const isLocal = hostData.isLocal;
-
-      html += createHostHeader(hostInfo, isLocal);
-
-      hostProcesses.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) {
-          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 {
-          const url = getProcessDisplayUrl(process);
-          if (!url) {
-            return;
-          }
-          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>
-          `;
-        }
-      });
-    });
-
-    modalDropdown.innerHTML = html;
-
-    modalDropdown.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');
-        handleModalSelection(url, type);
-      });
+    modalDropdown.innerHTML = buildDropdownHtml(processes, {
+      includeCurrentTab: includeCurrent,
+      inputElement: modalInput
     });
 
-    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', 'self');
-      });
-    });
+    attachCreateButtonHandler(modalDropdown, modalInput);
+    attachUrlItemHandlers(modalDropdown, { onSelect: handleModalSelection });
   }
   
   // Set up mobile button click handler

package/server/views/layout.ejs

@@ -62,6 +62,7 @@
     }
 
     .layout-leaf {
+      background: var(--layout-background);
       position: absolute;
       box-sizing: border-box;
       /*